/* ==========================================================================
   UNICUS MARKETING — ABOUT PAGE STYLESHEET
   File: /assets/css/about.css
   Version: 2.0
   ==========================================================================

   AI / DEVELOPER REFERENCE — APPROVED PAGE STANDARD

   PURPOSE
   This file contains only the presentation rules unique to about.php.
   It must load after /assets/css/global.css.

   REQUIRED PAGE HOOK
   The About page body element must include:
   <body class="page-about">

   APPROVED FONT SYSTEM
   Display / headlines: "Bebas Neue", sans-serif
   Body / interface:    "Inter", Arial, sans-serif
   Font families are defined and loaded through the global foundation.
   Do not introduce Oswald or another display font.

   APPROVED BRAND FOUNDATION
   Primary copper: #e48240
   Visual direction: dark, cinematic, precise, restrained

   ARCHITECTURE RULES
   - Keep every selector scoped beneath .page-about.
   - Keep only About-page sections, imagery, layouts, and responsive rules here.
   - Do not duplicate resets, header, navigation, footer, shared buttons, or
     other sitewide components from global.css.
   - Do not place <style> tags in this file.
   - Do not move these rules into about.php.
   - Do not use inline CSS except for a legitimate dynamic value.
   - Preserve approved content and visual appearance during maintenance.
   - sections.css, style_dev.css, and template.css are retired.

   CONTENTS
   01. About Page Controls
   02. About Layout and Typography
   03. Hero
   04. Identity
   05. Origin
   06. Principles
   07. Experience
   08. Business Reality
   09. Founder Leadership
   10. Closing Statement
   11. Final CTA
   12. Booking Modal
   13. Responsive — Tablet
   14. Responsive — Mobile
   ========================================================================== */


/* ==========================================================================
   01. ABOUT PAGE CONTROLS
   Page-specific visual controls preserve the approved About design while all
   shared brand, typography, layout, and motion values come from global.css.
   ========================================================================== */

.page-about {
  --about-line: rgba(var(--primary-rgb), 0.22);
  --about-line-soft: rgba(var(--white-rgb), 0.16);

  --image-saturation: 0.88;
  --image-brightness: 0.78;
  --image-contrast: 1.08;

  --hero-img-position: center 42%;
  --hero-img-saturation: 0.80;
  --hero-img-brightness: 0.96;
  --hero-img-contrast: 1.08;
  --hero-overlay-left: 0.90;
  --hero-overlay-mid: 0.76;
  --hero-overlay-right: 0.20;
  --hero-bottom-fade: 0.65;
  --hero-copper-glow: 0.16;

  --origin-img-position: center center;
  --origin-img-saturation: 0.90;
  --origin-img-brightness: 0.86;
  --origin-img-contrast: 1.08;
  --origin-right-fade: 0.95;
  --origin-bottom-shadow: 0.36;
  --origin-copper-glow: 0.10;

  --grind-img-position: right right;
  --grind-img-saturation: 0.82;
  --grind-img-brightness: 0.99;
  --grind-img-contrast: 1.12;
  --grind-overlay-left: 0;
  --grind-overlay-mid: 0.62;
  --grind-overlay-right: 0.28;
  --grind-top-bottom-fade: 0.95;

  --leadership-img-position: center center;
  --leadership-img-saturation: 0.85;
  --leadership-img-brightness: 0.88;
  --leadership-img-contrast: 1.08;
  --leadership-left-fade: 0.95;
  --leadership-bottom-shadow: 0.45;

  --section-pad-lg: 150px;
  --section-pad-xl: 170px;
  --section-pad-mobile: 95px;
}

.page-about .page {
  overflow: hidden;
}

.page-about .wrap {
  width: min(var(--site-max), calc(100% - (var(--site-gutter) * 2)));
  margin: 0 auto;
}


/* =========================================================
       03. TYPOGRAPHY / SHARED ELEMENTS
    ========================================================= */

.page-about h1,
.page-about h2,
.page-about h3,
.page-about p {
  margin-top: 0;
}

.page-about h1,
.page-about h2,
.page-about h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
}

.page-about h1 {
  margin-bottom: 30px;
  font-size: clamp(58px, 8.5vw, 142px);
  line-height: .86;
  letter-spacing: -.035em;
  font-weight: 400;
}

.page-about h2 {
  margin-bottom: 30px;
  font-size: clamp(44px, 5.5vw, 88px);
  line-height: .94;
  letter-spacing: -.025em;
  font-weight: 400;
}

.page-about .gold {
  color: var(--primary);
}

.page-about .lead {
  max-width: 730px;
  color: var(--light-gray);
  font-size: clamp(18px, 1.55vw, 23px);
  line-height: 1.65;
}

.page-about .copy {
  color: var(--medium-gray);
  font-size: 16px;
  line-height: 1.85;
}

.page-about .eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 26px;
  color: var(--primary);
  font-family: var(--font-body);
  font-size: var(--hero-eyebrow-size);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--hero-eyebrow-spacing);
  text-transform: uppercase;
}

.page-about .eyebrow::before {
  content: "";
  width: 42px;
  height: 1px;
  background: var(--primary);
}

.page-about .eyebrow.center {
  justify-content: center;
}


/* =========================================================
       04. HERO SECTION
       Main image darkness: --hero-img-brightness
       Main overlay darkness: --hero-overlay-left / mid / right
    ========================================================= */

.page-about .hero {
  position: relative;
  min-height: 94vh;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
}

.page-about .hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -3;
  overflow: hidden;
}

.page-about .hero-bg video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  display: block;
  filter:
    saturate(var(--hero-img-saturation)) brightness(var(--hero-img-brightness)) contrast(var(--hero-img-contrast));
}

.page-about .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg,
      rgba(5, 5, 5, var(--hero-overlay-left)) 0%,
      rgba(5, 5, 5, var(--hero-overlay-mid)) 48%,
      rgba(5, 5, 5, var(--hero-overlay-right)) 100%),
    linear-gradient(0deg,
      rgba(7, 7, 7, var(--hero-bottom-fade)) 0%,
      transparent 35%);
}

.page-about .hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 74% 39%,
      rgba(var(--primary-rgb), var(--hero-copper-glow)),
      transparent 27%);
}

.page-about .hero-content {
  padding: 150px 0 110px;
}

.page-about .hero h1 {
  max-width: 1280px;
  margin-bottom: 34px;
  font-family: var(--font-display);
  line-height: var(--hero-heading-line);
  letter-spacing: var(--hero-heading-spacing);
  text-transform: uppercase;
}

.page-about .hero h1 span {
  display: block;
}

.page-about .hero h1 .quiet {
  color: #fdfdfc;
  font-size: clamp(30px, 4vw, 62px);
  line-height: .96;
  letter-spacing: -.025em;
}

.page-about .hero h1 .answer {
  max-width: 1250px;
  margin-top: 16px;
  color: var(--primary);
  font-size: var(--hero-heading-size);
  line-height: var(--hero-heading-line);
  letter-spacing: var(--hero-heading-spacing);
}

.page-about .hero-bottom {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 45px;
  align-items: end;
  padding-top: 28px;
  border-top: 1px solid var(--about-line);
}

.page-about .hero-bottom p {
  max-width: 730px;
  margin: 0;
  color: var(--light-gray);
  font-family: var(--font-body);
  font-size: var(--hero-copy-size);
  font-weight: 400;
  line-height: var(--hero-copy-line);
}

.page-about .since {
  color: var(--primary);
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}


/* =========================================================
       05. IDENTITY SECTION
    ========================================================= */

.page-about .identity {
  position: relative;
  padding: var(--section-pad-lg) 0;
  background: var(--black);
}

.page-about .identity::before {
  content: "UNICUS";
  position: absolute;
  right: -35px;
  top: 35px;
  color: rgba(255, 255, 255, .018);
  font: 700 clamp(150px, 24vw, 390px) / 1 var(--font-display);
  letter-spacing: -.04em;
}

.page-about .identity-grid {
  position: relative;
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 110px;
  align-items: start;
}

.page-about .identity-mark {
  padding-top: 12px;
  color: var(--primary);
  font: 400 19px / 1.55 var(--font-display);
  text-transform: uppercase;
  letter-spacing: .12em;
}

.page-about .identity h2 {
  max-width: 890px;
}

.page-about .identity .lead {
  margin-bottom: 38px;
}

.page-about .identity-line {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--primary), transparent);
}


/* =========================================================
       06. ORIGIN SECTION
       Image brightness: --origin-img-brightness
       Bottom shadow: --origin-bottom-shadow
       Copper tint: --origin-copper-glow
    ========================================================= */

.page-about .origin {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 820px;
  background: var(--black-light);
}

.page-about .origin-image {
  position: relative;
  min-height: 620px;
  overflow: hidden;
}

.page-about .origin-image img {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
  object-position: var(--origin-img-position);
  filter:
    saturate(var(--origin-img-saturation)) brightness(var(--origin-img-brightness)) contrast(var(--origin-img-contrast));
}

.page-about .origin-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      transparent 55%,
      rgba(13, 13, 13, var(--origin-right-fade)) 100%),
    linear-gradient(0deg,
      rgba(7, 7, 7, var(--origin-bottom-shadow)),
      transparent 50%),
    radial-gradient(circle at 55% 38%,
      rgba(var(--primary-rgb), var(--origin-copper-glow)),
      transparent 34%);
}

.page-about .origin-copy {
  display: flex;
  align-items: center;
  padding: 110px max(50px, 8vw) 110px 80px;
}

.page-about .origin-copy-inner {
  max-width: 660px;
}

.page-about .origin .quote {
  margin: 48px 0 0;
  padding: 26px 0 0 30px;
  border-left: 2px solid var(--primary);
  color: #ddd7ce;
  font: 400 25px / 1.55 var(--font-display);
  text-transform: uppercase;
}


/* =========================================================
       07. PRINCIPLES SECTION
    ========================================================= */

.page-about .principles {
  position: relative;
  padding: var(--section-pad-lg) 0 var(--section-pad-xl);
  background: #090909;
}

.page-about .principles-head {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 90px;
  align-items: end;
  margin-bottom: 75px;
}

.page-about .principles-head h2 {
  margin: 0;
}

.page-about .principles-head .lead {
  margin: 0 0 7px;
}

.page-about .principle-list {
  border-top: 1px solid var(--about-line);
}

.page-about .principle {
  display: grid;
  grid-template-columns: 90px .7fr 1.3fr;
  gap: 34px;
  align-items: center;
  padding: 31px 0;
  border-bottom: 1px solid var(--about-line-soft);
  transition: background .25s ease, padding .25s ease;
}

.page-about .principle:hover {
  padding-left: 18px;
  background: linear-gradient(90deg,
      rgba(var(--primary-rgb), .07),
      transparent 65%);
}

.page-about .principle-num {
  color: var(--primary);
  font: 500 13px / 1 var(--font-body);
  letter-spacing: .18em;
}

.page-about .principle h3 {
  margin: 0;
  font-size: clamp(25px, 2.4vw, 38px);
}

.page-about .principle p {
  margin: 0;
  color: var(--medium-gray);
  font-size: 15px;
  line-height: 1.65;
}


/* =========================================================
       08. GRIND / EXPERIENCE SECTION
       Image brightness: --grind-img-brightness
       Overlay darkness: --grind-overlay-left / mid / right
    ========================================================= */

.page-about .grind {
  position: relative;
  min-height: 870px;
  display: flex;
  align-items: center;
  isolation: isolate;
}

.page-about .grind-bg {
  position: absolute;
  inset: 0;
  z-index: -3;
}

.page-about .grind-bg img {
  height: 100%;
  object-fit: cover;
  object-position: var(--grind-img-position);
  filter:
    saturate(var(--grind-img-saturation)) brightness(var(--grind-img-brightness)) contrast(var(--grind-img-contrast));
}

.page-about .grind::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg,
      rgba(7, 7, 7, var(--grind-overlay-left)) 2%,
      rgba(7, 7, 7, var(--grind-overlay-mid)) 45%,
      rgba(7, 7, 7, var(--grind-overlay-right)) 100%),
    linear-gradient(0deg,
      rgba(7, 7, 7, var(--grind-top-bottom-fade)),
      transparent 25%,
      transparent 70%,
      rgba(7, 7, 7, var(--grind-top-bottom-fade)));
}

.page-about .grind-content {
  max-width: 830px;
  padding: 140px 0;
}

.page-about .grind-content .big-number {
  margin-bottom: -18px;
  color: var(--primary);
  font: 400 clamp(100px, 16vw, 245px) / .8 var(--font-display);
  letter-spacing: -.06em;
}

.page-about .grind-content h2 {
  font-size: clamp(40px, 4.8vw, 76px);
}

.page-about .grind-content .lead {
  max-width: 760px;
}


/* =========================================================
       09. REVENUE SECTION
    ========================================================= */

.page-about .revenue {
  padding: var(--section-pad-lg) 0;
  background: var(--primary);
  color: #0a0a0a;
}

.page-about .revenue .eyebrow {
  color: #17120d;
}

.page-about .revenue .eyebrow::before {
  background: #17120d;
}

.page-about .revenue-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 100px;
  align-items: start;
}

.page-about .revenue h2 {
  margin: 0;
  font-size: clamp(52px, 7vw, 108px);
}

.page-about .revenue-copy {
  padding-top: 7px;
}

.page-about .revenue-copy p {
  margin: 0 0 25px;
  color: rgba(10, 10, 10, .78);
  font-size: 19px;
  line-height: 1.75;
}

.page-about .revenue-rule {
  margin-top: 40px;
  padding-top: 25px;
  border-top: 1px solid rgba(10, 10, 10, .35);
  font: 400 24px / 1.45 var(--font-display);
  text-transform: uppercase;
}


/* =========================================================
       10. LEADERSHIP SECTION
       Image brightness: --leadership-img-brightness
       Overlay darkness: --leadership-left-fade / bottom-shadow
    ========================================================= */

.page-about .leadership {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  background: #0a0a0a;
}

.page-about .leadership-copy {
  display: flex;
  align-items: center;
  padding: 130px 70px 130px max(48px, calc((100vw - 1420px) / 2));
}

.page-about .leadership-inner {
  max-width: 650px;
}

.page-about .leadership-image {
  position: relative;
  min-height: 780px;
  overflow: hidden;
}

.page-about .leadership-image img {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
  object-position: var(--leadership-img-position);
  filter:
    saturate(var(--leadership-img-saturation)) brightness(var(--leadership-img-brightness)) contrast(var(--leadership-img-contrast));
}

.page-about .leadership-image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg,
      rgba(10, 10, 10, var(--leadership-left-fade)),
      transparent 28%),
    linear-gradient(0deg,
      rgba(0, 0, 0, var(--leadership-bottom-shadow)),
      transparent 40%);
}

.page-about .leadership .signature {
  margin: 34px 0 0;
  color: var(--primary);
  font: 400 19px / 1.4 var(--font-display);
  text-transform: uppercase;
  letter-spacing: .1em;
}

.page-about .text-link {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  margin-top: 35px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--primary);
  color: var(--white);
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.page-about .text-link span {
  color: var(--primary);
  font-size: 18px;
  transition: transform .2s;
}

.page-about .text-link:hover span {
  transform: translateX(5px);
}


/* =========================================================
       11. CLOSE SECTION
    ========================================================= */

.page-about .close {
  position: relative;
  padding: var(--section-pad-xl) 0 180px;
  text-align: center;
  background: var(--black);
}

.page-about .close::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 80px;
  background: linear-gradient(var(--primary), transparent);
}

.page-about .close h2 {
  max-width: 1100px;
  margin: 0 auto 45px;
  font-size: clamp(55px, 8vw, 128px);
}

.page-about .close-lines {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 30px;
  color: #d4cfc7;
  font: 400 clamp(18px, 2vw, 28px) / 1.3 var(--font-display);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.page-about .close-lines span:not(:last-child)::after {
  content: "/";
  margin-left: 30px;
  color: var(--primary);
}

.page-about .final {
  margin-top: 65px;
  color: var(--primary);
  font: 600 14px / 1 var(--font-body);
  letter-spacing: .32em;
  text-transform: uppercase;
}

.page-about .cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  margin-top: 44px;
  padding: 16px 24px;
  border: 1px solid var(--primary);
  background: var(--primary);
  color: #090909;
  font: 700 11px / 1 var(--font-body);
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s, color .2s, transform .2s;
}

.page-about .cta-button:hover {
  background: transparent;
  color: var(--white);
  transform: translateY(-2px);
}

.page-about .cta-button span {
  font-size: 17px;
  line-height: 0;
}


/* =========================================================
       12. BOOKING MODAL
    ========================================================= */

.page-about .booking-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, .84);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}

.page-about .booking-modal.open {
  opacity: 1;
  visibility: visible;
}

.page-about .booking-panel {
  position: relative;
  width: min(720px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 48px;
  border: 1px solid rgba(var(--primary-rgb), .38);
  background: #0d0d0d;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .65);
  transform: translateY(18px);
  transition: transform .25s ease;
}

.page-about .booking-modal.open .booking-panel {
  transform: none;
}

.page-about .booking-panel::before {
  content: "BOOK";
  position: absolute;
  right: 18px;
  top: 6px;
  color: rgba(255, 255, 255, .025);
  font: 400 118px / 1 var(--font-display);
  pointer-events: none;
}

.page-about .booking-close {
  position: absolute;
  right: 18px;
  top: 18px;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: transparent;
  color: var(--white);
  font-size: 22px;
  cursor: pointer;
}

.page-about .booking-panel h2 {
  margin-bottom: 16px;
  font-size: clamp(38px, 5vw, 58px);
}

.page-about .booking-intro {
  max-width: 570px;
  margin-bottom: 30px;
  color: var(--medium-gray);
  font-size: 15px;
  line-height: 1.7;
}

.page-about .booking-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.page-about .field {
  display: grid;
  gap: 8px;
}

.page-about .field.full {
  grid-column: 1 / -1;
}

.page-about .field label {
  color: #c9c3ba;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.page-about .field input,
.page-about .field select,
.page-about .field textarea {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 0;
  outline: 0;
  background: #080808;
  color: var(--white);
  padding: 14px 15px;
  font: 500 14px / 1.4 var(--font-body);
}

.page-about .field input:focus,
.page-about .field select:focus,
.page-about .field textarea:focus {
  border-color: var(--primary);
}

.page-about .field textarea {
  min-height: 105px;
  resize: vertical;
}

.page-about .booking-submit {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 6px;
  padding: 16px 24px;
  border: 1px solid var(--primary);
  background: var(--primary);
  color: #090909;
  font: 700 11px / 1 var(--font-body);
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
}


/* =========================================================
       13. RESPONSIVE — TABLET
    ========================================================= */

@media (max-width: 980px) {
  .page-about {
    --hero-overlay-left: .96;
    --hero-overlay-mid: .62;
    --hero-overlay-right: .38;
  }

  .page-about .wrap {
    width: min(100% - (var(--site-gutter-tablet) * 2), var(--site-max));
  }

  .page-about .hero {
    min-height: 820px;
  }

  .page-about .hero-bottom,
  .page-about .identity-grid,
  .page-about .principles-head,
  .page-about .revenue-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .page-about .identity-mark {
    display: none;
  }

  .page-about .origin,
  .page-about .leadership {
    grid-template-columns: 1fr;
  }

  .page-about .origin-image {
    min-height: 560px;
  }

  .page-about .origin-copy {
    padding: 90px 30px;
  }

  .page-about .principle {
    grid-template-columns: 55px 1fr;
  }

  .page-about .principle p {
    grid-column: 2;
  }

  .page-about .leadership-image {
    order: -1;
    min-height: 650px;
  }

  .page-about .leadership-copy {
    padding: 90px 30px;
  }
}


/* =========================================================
       14. RESPONSIVE — MOBILE
    ========================================================= */

@media (max-width: 620px) {
  .page-about .wrap {
    width: calc(100% - (var(--site-gutter-mobile) * 2));
  }

  .page-about .hero {
    min-height: 760px;
  }

  .page-about .hero-content {
    padding: 110px 0 75px;
  }

  .page-about h1 {
    font-size: clamp(49px, 16vw, 78px);
  }

  .page-about h2 {
    font-size: clamp(40px, 13vw, 62px);
  }

  .page-about .hero-bottom {
    gap: 26px;
  }

  .page-about .since {
    white-space: normal;
  }

  .page-about .identity,
  .page-about .principles,
  .page-about .revenue {
    padding: var(--section-pad-mobile) 0;
  }

  .page-about .origin-image {
    min-height: 430px;
  }

  .page-about .origin .quote {
    font-size: 20px;
  }

  .page-about .principles-head {
    margin-bottom: 45px;
  }

  .page-about .principle {
    grid-template-columns: 38px 1fr;
    gap: 18px;
    padding: 25px 0;
  }

  .page-about .principle h3 {
    font-size: 27px;
  }

  .page-about .grind {
    min-height: 760px;
  }

  .page-about .grind-content .big-number {
    margin-bottom: 2px;
  }

  .page-about .leadership-image {
    min-height: 500px;
  }

  .page-about .close {
    padding: 125px 0;
  }

  .page-about .close-lines {
    display: grid;
    gap: 10px;
  }

  .page-about .close-lines span::after {
    display: none;
  }

  .page-about .booking-panel {
    padding: 42px 22px 28px;
  }

  .page-about .booking-form {
    grid-template-columns: 1fr;
  }

  .page-about .field.full,
  .page-about .booking-submit {
    grid-column: 1;
  }
}
