/* =============================================================
   components.css
   Scope: #hero, #logic, #about, #proof, #reach
   Session 2 -- Grant Leisure "Visible Dominance" v2
   All color values via CSS custom properties from tokens.css.
   Mobile-first. min-width breakpoints scale up.
   No magic numbers without explanatory comments.
   ============================================================= */


/* =============================================================
   NAV
   Sticky. Glass effect on scroll (class .is-scrolled added by JS).
   48px min height for senior touch targets.
   ============================================================= */

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-modal); /* Elevated to --z-modal -- cinematic overlay rows on projects.html sit at --z-overlay and beat --z-nav, hiding the ghost nav */
  /* Transparent over hero video by default */
  background: transparent;
  transition: background var(--duration-default) var(--ease-stellar),
              backdrop-filter var(--duration-default) var(--ease-stellar),
              box-shadow var(--duration-default) var(--ease-stellar);
}

.site-nav.is-scrolled {
  /* Frosted glass -- matches projects.html ghost nav exactly.
     Opacity bumped from 0.75 to 0.88 -- holds contrast during the bleed's
     mid-grey transition states. White nav text stayed legible on full navy
     and full white but dipped below WCAG AA when the underlay passed through
     mid-greys (~rgb(138, 145, 150)). Higher opacity keeps the backdrop
     reading as navy regardless of what's beneath it. */
  background: rgba(50, 62, 72, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.18); /* Elevation cue -- not decorative */
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 20px minimum side breathing room on small screens */
  padding: 0 clamp(1.25rem, 4vw, 3rem);
  /* 72px nav height -- comfortably above 48px minimum touch target */
  height: 72px;
  max-width: 1440px;
  margin: 0 auto;
}

.nav-logo img {
  display: block;
}

/* Mobile hamburger -- hidden on desktop */
.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 8px;
}

.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--gl-white);
  border-radius: 2px;
  transition: transform var(--duration-fast) var(--ease-stellar),
              opacity var(--duration-fast) var(--ease-stellar);
}

/* Hamburger open state -- JS adds .is-open to .nav-toggle */
.nav-toggle.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle.is-open span:nth-child(2) {
  opacity: 0;
}
.nav-toggle.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Nav links: stacked on mobile, hidden until toggle fired */
.nav-links {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 72px; /* aligns flush under nav bar */
  left: 0;
  right: 0;
  background: var(--gl-navy);
  list-style: none;
  margin: 0;
  padding: 1rem 0 2rem;
  transform: translateY(-110%);
  transition: transform var(--duration-default) var(--ease-stellar);
  z-index: var(--z-overlay);
}

/* JS adds .is-open to ul.nav-links when toggle fires */
.nav-links.is-open {
  transform: translateY(0);
}

.nav-links li {
  display: flex;
}

.nav-link {
  display: flex;
  align-items: center;
  /* 56px tall -- above 48px minimum */
  min-height: 56px;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--gl-white);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-stellar);
}

.nav-link:hover,
.nav-link:focus-visible {
  color: var(--gl-green);
}

/* CTA pill -- CONTACT */
.nav-link.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0.5rem clamp(1.25rem, 4vw, 3rem);
  padding: 0 2rem;
  min-height: 48px;
  width: auto;
  background: var(--gl-green);
  color: var(--gl-white);
  border-radius: 4px;
  transition: background var(--duration-fast) var(--ease-stellar);
}

.nav-link.nav-cta:hover,
.nav-link.nav-cta:focus-visible {
  background: var(--gl-navy);
  color: var(--gl-white);
}

@media (min-width: 768px) {
  .nav-toggle { display: none; }

  .nav-links {
    flex-direction: row;
    align-items: center;
    position: static;
    background: transparent;
    padding: 0;
    gap: clamp(1rem, 2vw, 2.5rem);
    transform: none;
    transition: none;
  }

  .nav-links li { display: block; }

  .nav-link {
    min-height: 48px;
    padding: 0;
    width: auto;
  }

  .nav-link.nav-cta {
    margin: 0;
    padding: 0 1.5rem;
  }
}


/* =============================================================
   01 // HERO
   Full-bleed video. h1 centered over overlay. Scroll cue below.
   ============================================================= */

#hero {
  position: relative;
  width: 100%;
  /* 100svh -- safe area aware on iOS; fallback 100vh */
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
}

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Slight desaturation so text remains legible without over-darkening */
  filter: saturate(1.15) brightness(0.72);
}

/* Dark gradient overlay -- top is lighter (nav), bottom is darker (text anchor) */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(50, 62, 72, 0.35) 0%,   /* --gl-navy at 35% -- nav zone */
    rgba(50, 62, 72, 0.15) 40%,  /* mid -- let video breathe */
    rgba(26, 26, 26, 0.60) 100%  /* deep anchor at base for headline */
  );
}

.hero-content {
  position: relative;
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 clamp(1.25rem, 5vw, 4rem);
  /* Push content slightly above center for visual balance */
  margin-top: -6vh;
}

.hero-headline {
  font-family: var(--font-header);
  font-size: clamp(3.25rem, 8vw + 1rem, 7.5rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: var(--gl-white);
  -webkit-font-smoothing: antialiased;
  /* Directional shadow -- depth without glow, anchors text against any video frame */
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.5),
    0 8px 24px rgba(0, 0, 0, 0.45),
    0 24px 64px rgba(0, 0, 0, 0.35);
}

/* Scroll cue -- animated vertical line */
.hero-scroll-cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: clamp(2rem, 4vh, 3.5rem);
  min-height: 48px; /* touch target */
  min-width: 48px;
}

.scroll-cue-line {
  display: block;
  width: 2px;
  /* 48px line -- clear visual cue without crowding */
  height: 48px;
  background: var(--gl-white);
  opacity: 0.7;
  animation: scrollPulse 2s var(--ease-stellar) infinite;
  transform-origin: top center;
}

@keyframes scrollPulse {
  0%   { transform: scaleY(0); opacity: 0; }
  40%  { transform: scaleY(1); opacity: 0.7; }
  100% { transform: scaleY(1); opacity: 0; }
}


/* =============================================================
   02 // LOGIC
   Psychological stop-point. Dark navy surface. Large stat left.
   Statement right. No section label.
   ============================================================= */

#logic {
  /* Background removed -- transparent so .page-underlay bleeds through.
     Logic is part of the WHITE chapter; underlay sits at #FFFFFF here. */
  /* Asymmetric padding: large top, medium bottom.
     The bleed needs visible travel room above the content for the
     navy → white walk. Top padding gives the user scroll room to watch
     the underlay change. Bottom is smaller because once content lands,
     the user wants to keep moving toward About -- excess bottom space
     reads as empty/floating.
     Top reduced from clamp(14rem, 28vw, 22rem) -- previous value left
     nearly a full viewport of dead white space before 90% arrived. */
  padding-block-start: clamp(10rem, 20vw, 16rem);
  padding-block-end: clamp(7rem, 14vw, 11rem);
  padding-inline: clamp(1.25rem, 5vw, 4rem);
  display: flex;
  align-items: center;
  justify-content: center;
}
.logic-inner {
  max-width: 1200px;
  margin: 0 auto;
  /* Vertical centered stack -- 90% on top, statement below, tagline below.
     Restructured from the previous 2-column desktop layout per "Option B":
     A&I-style centered composition with type doing the work via scale.
     Mobile inherits this same centered stack -- nothing to override. */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.logic-stat {
  font-family: var(--font-header);
  /* Sized between hero (clamp max 7.5rem = 120px) and supporting text
     (statement max 4rem = 64px). Numerals read slightly smaller than
     letters at same point size, so the 90% can run larger than hero max
     without visually exceeding it. Max 11rem = 176px on desktop. Mobile
     floor 6.5rem = 104px keeps it dominant on phones. */
  font-size: clamp(6.5rem, 18vw, 11rem);
  font-weight: 900;
  line-height: 0.9;
  color: var(--gl-green-vivid);
  letter-spacing: -0.04em;
  margin: 0;
  white-space: nowrap;
}
.logic-text {
  /* Vertical inline below the 90%. Both lines centered. */
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  align-items: center;
  max-width: 760px;
}
.logic-statement {
  font-family: var(--font-header);
  /* Scaled up from clamp(1.5rem, 3vw, 2.5rem). Now large enough to carry
     real weight beneath the 90% without competing with it. */
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--gl-navy); /* Logic sits in white chapter -- navy text */
  margin: 0;
}
.logic-resolve {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: 600;
  line-height: 1.6;
  color: var(--gl-navy); /* Flipped from green -- per direction, all Logic body text is dark */
  margin: 0;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* No desktop row layout override -- Logic stays a vertical centered stack
   across all viewports. Removed the previous @media (min-width: 768px) block
   that split it into 2 columns; that layout fought the new composition. */


/* =============================================================
   03 // ABOUT
   White surface. Text left. Tourist photo right.
   Visible h2: "WE'VE BEEN MAKING PEOPLE SMILE SINCE 1982"
   ============================================================= */

#about {
  /* Background removed -- transparent so .page-underlay bleeds through.
     About is part of the WHITE chapter; underlay sits at #FFFFFF here. */
  /* Asymmetric padding: standard top, expanded bottom.
     About is the last section of the white chapter -- the expanded bottom
     gives the white → navy bleed (Bleed 2) visible scroll distance to walk
     through all 8 stops before Proof arrives. Without this, the chapter
     transition feels abrupt because the sections are pressed together. */
  padding-block-start: var(--section-pad-y);
  padding-block-end: clamp(8rem, 16vw, 13rem);
  padding-inline: clamp(1.25rem, 5vw, 4rem);
}

.about-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 5vw, 5rem);
}

.about-text {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.about-heading {
  font-family: var(--font-header);
  font-size: clamp(2rem, 4vw + 0.5rem, 3.75rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--gl-navy);
  margin: 0;
  /* Green accent underline -- signals "start" of the brand story */
  padding-bottom: clamp(1rem, 2vw, 1.5rem);
  border-bottom: 4px solid var(--gl-green);
}

.about-origin {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: 1.7;
  color: var(--gl-black);
  margin: 0;
}

.about-narrative {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: 1.7;
  color: var(--gl-black);
  margin: 0;
}

.about-figure {
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 16px 64px rgba(50, 62, 72, 0.12);
}

.about-figure img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 900px) {
  .about-inner {
    flex-direction: row;
    align-items: center;
  }

  .about-text {
    flex: 0 0 45%;
  }

  .about-figure {
    flex: 1;
  }

  .about-figure img {
    width: 100%;
    height: auto;
  }
}


/* =============================================================
   04 // PROOF
   Green surface. 6-icon grid. Scale summary below.
   No section label.
   ============================================================= */

#proof {
  /* Background removed -- transparent so .page-underlay bleeds through.
     Proof is part of the NAVY chapter; underlay sits at #323E48 here.
     Previously hardcoded to #5C9387 (the original brand teal); that color
     is now retired from section-level use. Green lives only as accent
     (buttons, hover states) per the navy/white two-tone composition. */
  /* Compressed padding -- shared token with #validation and #testimonials
     for consistent rhythm across the three "interstitial" sections. */
  padding-block: var(--section-pad-y-compressed);
  padding-inline: clamp(1.25rem, 5vw, 4rem);
}

.proof-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 3.5vw, 3rem);
}

/* 2-column grid on mobile, 3-col mid, 6-col desktop */
.proof-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 600px) {
  .proof-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .proof-grid {
    /* All 6 items in one row at desktop -- horizontal read like a counter */
    grid-template-columns: repeat(6, 1fr);
  }
}

.proof-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
}

.proof-item img {
  /* 64px icon -- WCAG-safe size, not a touch target so no 48px rule applies */
  width: 64px;
  height: 64px;
  object-fit: contain;
  /* White tint to unify icons on the green background */
  filter: brightness(0) invert(1);
}

.proof-number {
  font-family: var(--font-header);
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 900;
  line-height: 1;
  color: var(--gl-white);
  letter-spacing: -0.03em;
  /* Text-shadow removed -- was rgba(92, 147, 135, 0.30), a green glow tuned
     for the old #5C9387 background. Proof now sits on the navy underlay so
     a green shadow would read incorrectly. */
}

.proof-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.4;
  color: var(--gl-white);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.20);
  opacity: 0.95;
}

/* Scale summary bar -- 43 Countries | 5 Continents | 2,500+ Projects */
.proof-scale {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  /* Separator line above to visually anchor the summary */
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  padding-top: clamp(2rem, 3vw, 2.5rem);
}

.proof-scale-item {
  font-family: var(--font-header);
  font-size: clamp(1.125rem, 2.5vw, 1.75rem);
  font-weight: 700;
  color: var(--gl-white);
  letter-spacing: -0.01em;
}

.proof-scale-divider {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.5);
  user-select: none;
}


/* =============================================================
   05 // REACH
   Dark navy surface. Map full-width. Country copy centered below.
   No section label.
   ============================================================= */

#reach {
  /* Background removed -- transparent so .page-underlay bleeds through.
     Reach is part of the NAVY chapter; underlay sits at #323E48 here. */
  /* Asymmetric padding -- full --section-pad-y on top, compressed
     --space-2xl on bottom. Previously full on both, which stacked with
     Expertise's full top padding creating ~280px of dead space between
     the 'iconic skylines' line and 'MAXIMIZE YOUR RETURN'. Expertise
     keeps its full top so the Maximize moment breathes properly. */
  padding-block-start: var(--section-pad-y);
  padding-block-end: var(--space-2xl);
  padding-inline: clamp(1.25rem, 5vw, 4rem);
}

.reach-inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 4vw, 4rem);
}

.reach-map {
  margin: 0;
  /* Negative horizontal margin bleeds map to near-full viewport width */
  max-width: 900px;
  margin-inline: auto;
  overflow: hidden;
}

.reach-map img {
  display: block;
  width: 100%;
  height: auto;
  /* Vibrant saturation boost per brief: "high-saturation map" */
  filter: saturate(1.4) brightness(1.05);
}

.reach-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(1rem, 2vw, 1.5rem);
}

.reach-countries {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: 600;
  line-height: 1.8;
  color: var(--gl-green);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
}

.reach-statement {
  font-family: var(--font-header);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--gl-white);
  margin: 0;
  max-width: 680px; /* Constrains line length for senior readability */
}
/* ============================================================
   #EXPERTISE -- Bento Grid Services
   Dark surface section for light/dark rhythm after #reach
   ============================================================ */

#expertise {
  /* Background removed -- transparent so .page-underlay bleeds through.
     Expertise is part of the NAVY chapter; underlay sits at #323E48 here. */
  /* Asymmetric padding: standard top, expanded bottom.
     Expertise is the last section of the navy chapter -- the expanded
     bottom gives the navy → white bleed (Bleed 3) visible scroll distance
     to walk through all 8 stops before Validation/marquee arrives. Same
     value as #about's bottom padding for consistent chapter-transition
     rhythm across both bleeds. */
  padding-block-start: var(--section-pad-y);
  padding-block-end: clamp(8rem, 16vw, 13rem);
}

.expertise__inner {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-lg);
}

.expertise__subhead {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--gl-green-vivid);
  text-transform: uppercase;
  margin-block-end: var(--space-sm);
}

.expertise__heading {
  font-family: var(--font-header);
  font-size: var(--text-h1);
  color: var(--gl-white);
  line-height: 1.1;
  margin-block-end: var(--space-lg);
  max-width: 16ch;
}

/* -- Bento Grid Layout ------------------------------------ */

.bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  align-items: stretch;
}

@media (min-width: 48rem) {
  .bento {
    grid-template-columns: repeat(2, 1fr);
    align-items: stretch;
  }
}

@media (min-width: 72rem) {
  .bento {
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
  }
}

/* -- Bento Card Base -------------------------------------- */

.bento__card {
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  height: 100%;
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  box-shadow: var(--shadow-md);
  transition: border-color var(--duration-fast) var(--ease-stellar),
              box-shadow var(--duration-fast) var(--ease-stellar);
}
.bento__card:hover {
  border-color: var(--gl-green-vivid);
  box-shadow: 0 0 30px rgba(92, 147, 135, 0.20);
}

/* Accent variant -- green left border signal */
.bento__card--accent {
  border-left: 4px solid var(--gl-green-vivid);
}

/* Feature card -- premium tier, full right column */
.bento__card--feature {
  background-color: var(--gl-green-vivid);
  border-color: transparent;
  justify-content: space-between;
}

.bento__card--feature:hover {
  border-color: transparent;
}

/* -- Bento Card Elements ---------------------------------- */

.bento__number {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--gl-green-vivid);
  letter-spacing: 0.1em;
}

.bento__card--feature .bento__number {
  color: rgba(255, 255, 255, 0.60);
}

.bento__title {
  font-family: var(--font-header);
  font-size: var(--text-h3);
  color: var(--gl-white);
  line-height: 1.2;
}

.bento__body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.6;
  flex-grow: 1;
}

.bento__card--feature .bento__body {
  color: rgba(255, 255, 255, 0.90);
}

.bento__tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--gl-white);
  background-color: rgba(50, 62, 72, 0.30);
  padding: var(--space-xs) var(--space-sm);
  border-radius: 2px;
  align-self: flex-start;
  margin-block-start: var(--space-md);
}

/* -- Bento Toggle Button --------------------------------- */

.bento__toggle {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gl-green);
  background: none;
  border: 1px solid var(--gl-green);
  border-radius: 4px;
  padding: 0.6rem 1.25rem;
  cursor: pointer;
  align-self: flex-start;
  margin-block-start: auto;
  min-height: 48px;
  transition: background-color var(--duration-fast) var(--ease-stellar),
              color var(--duration-fast) var(--ease-stellar);
}

.bento__toggle:hover {
  background-color: var(--gl-green);
  color: var(--gl-white);
}

.bento__toggle:focus-visible {
  outline: 3px solid var(--gl-green);
  outline-offset: 4px;
}

/* ============================================================
   SERVICE MODAL
   Full-screen overlay. Navy surface. Slides up on open.
   ============================================================ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(26, 26, 26, 0.85);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-default) var(--ease-stellar),
              visibility var(--duration-default) var(--ease-stellar);
}

.modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.modal {
  background-color: var(--gl-navy);
  border-top: 4px solid var(--gl-green-vivid);
  border-radius: 4px;
  padding: var(--space-lg);
  max-width: 680px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  position: relative;
  transform: translateY(24px);
  transition: transform var(--duration-default) var(--ease-stellar);
}

.modal-overlay.is-open .modal {
  transform: translateY(0);
}

.modal__close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  background: none;
  border: none;
  color: var(--gl-white);
  font-size: 1.25rem;
  cursor: pointer;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background-color var(--duration-fast) var(--ease-stellar);
}

.modal__close:hover {
  background-color: rgba(255, 255, 255, 0.10);
}

.modal__close:focus-visible {
  outline: 3px solid var(--gl-green);
  outline-offset: 2px;
}

.modal__number {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gl-green-vivid);
  display: block;
  margin-block-end: var(--space-sm);
}

.modal__title {
  font-family: var(--font-header);
  font-size: var(--text-h2);
  color: var(--gl-white);
  line-height: 1.2;
  margin: 0;
  margin-block-end: var(--space-md);
  padding-block-end: var(--space-md);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.modal__body {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.7;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.modal__body p {
  margin: 0;
}

/* ============================================================
   #VALIDATION -- Partner Logo Marquee
   White surface. JS-driven infinite scroll. Logos grey at rest.
   ============================================================ */

#validation {
  /* Background removed -- transparent so .page-underlay bleeds through.
     Validation opens the final WHITE chapter; underlay sits at #FFFFFF here. */
  /* Compressed padding -- shared token with #proof and #testimonials for
     consistent rhythm. Symmetrical top/bottom (previously top was
     --section-pad-y and bottom was --space-xl, creating awkward asymmetry). */
  padding-block: var(--section-pad-y-compressed);
  overflow: hidden;
}

.validation__inner {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-lg);
  margin-block-end: var(--space-xl);
}

.validation__trust-line {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--gl-navy);
  text-align: center;
  text-transform: uppercase;
}

.marquee {
  display: flex;
  flex-direction: row;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
}

.marquee__track {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 3rem;
  padding-inline: 2rem;
  list-style: none;
  margin: 0;
  padding-block: 0;
  will-change: transform;
  flex-shrink: 0;
}

.marquee__item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 90px;
}

.marquee__item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: grayscale(100%) opacity(0.6);
  transition: filter 0.3s ease;
}

/* Optical weight tuning -- Disney Parks scale(0.85) is the reference standard */
.marquee__item img[alt="Disney Parks"]                     { transform: scale(0.85); } /* LOCKED */
.marquee__item img[alt="Lego"]                             { transform: scale(0.75); } /* LOCKED */
.marquee__item img[alt="Anheuser-Busch"]                   { transform: scale(0.80); } /* LOCKED */
.marquee__item img[alt="English Heritage"]                 { transform: scale(0.90); } /* LOCKED */
.marquee__item img[alt="Caesars Entertainment"]            { transform: scale(0.72); } /* was 0.80 -- too big */
.marquee__item img[alt="Victoria and Albert Museum"]       { transform: scale(0.72); } /* was 0.90 -- too big */
.marquee__item img[alt="ZSL Zoological Society of London"] { transform: scale(0.75); } /* was 0.55 -- too small */
.marquee__item img[alt="Bluewater"]                        { transform: scale(0.88); } /* was 0.75 -- too small */
.marquee__item img[alt="Ferrari World"]                    { transform: scale(0.88); } /* was 0.75 -- too small */
.marquee__item img[alt="Merlin Entertainments"]            { transform: scale(0.82); } /* was 0.75 -- slightly small */
.marquee__item img[alt="NBC Universal"]                    { transform: scale(0.88); } /* was 0.80 -- too small */
.marquee__item img[alt="San Diego Zoo"]                    { transform: scale(1.05); } /* was 0.88 -- too small */
.marquee__item img[alt="Ocean Park"]                       { transform: scale(0.90); } /* was 0.85 -- too small */
.marquee__item img[alt="Paramount"]                        { transform: scale(0.88); } /* was 0.80 -- too small */
.marquee__item img[alt="Parques Reunidos"]                 { transform: scale(1.05); } /* was 0.90 -- too small */
.marquee__item img[alt="Village Roadshow"]                 { transform: scale(0.85); } /* was 0.70 -- too small */
.marquee__item img[alt="Universal"]                        { transform: scale(0.85); } /* was 0.75 -- too small */

.marquee__item img:hover {
  filter: grayscale(0%) opacity(1);
}

/* ============================================================
   #LEADERSHIP -- Team Grid
   White surface. 1 col mobile, 2 col tablet, 3 col desktop.
   ============================================================ */

#leadership {
  /* Background removed -- transparent so .page-underlay bleeds through.
     Leadership is part of the WHITE chapter; underlay sits at #FFFFFF here.
     Top border removed -- no longer separating two white surfaces since
     #validation also uses the underlay now. */
  padding-block: var(--section-pad-y);
}

.leadership__inner {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-lg);
}

.leadership__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--gl-green-vivid);
  text-transform: uppercase;
  margin-block-end: var(--space-sm);
}

.leadership__heading {
  font-family: var(--font-header);
  font-size: var(--text-h1);
  color: var(--gl-navy);
  line-height: 1.1;
  margin-block-end: var(--space-lg);
}

/* -- Team Grid ------------------------------------------- */

/* -- Team Carousel --------------------------------------- */

.team-carousel {
  overflow: hidden;
  position: relative;
}

.team-carousel__track {
  display: flex;
  gap: var(--space-lg);
  transition: transform var(--duration-default) var(--ease-stellar);
  will-change: transform;
}

.team-card {
  display: flex;
  flex-direction: column;
  background-color: var(--gl-white);
  border: 1px solid rgba(50, 62, 72, 0.10);
  border-radius: 4px;
  overflow: hidden;
  flex: 0 0 100%;
  transition: box-shadow var(--duration-fast) var(--ease-stellar),
              transform var(--duration-fast) var(--ease-stellar);
}

@media (min-width: 48rem) {
  .team-card {
    flex: 0 0 calc(33.333% - var(--space-lg) * 2 / 3);
  }
}

.team-card:hover {
  box-shadow: 0 8px 32px rgba(50, 62, 72, 0.12);
  transform: translateY(-4px);
}

.team-card__img-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: rgba(50, 62, 72, 0.06);
}

.team-card__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: saturate(1.1);
  transition: transform var(--duration-default) var(--ease-stellar);
}

.team-card--keith .team-card__img-wrap img {
  object-position: center 40%;
}

/* Per-card crop calibration. Default is `center top` (0%); higher % pushes
   the crop downward, lower % keeps the head near the top of the frame.
   Starting values from live review -- adjust in 5% increments. */
.team-card--robert .team-card__img-wrap img {
  object-position: center 15%;
}

.team-card--andy .team-card__img-wrap img {
  object-position: center 35%;
}

.team-card--andrew .team-card__img-wrap img {
  object-position: center 25%;
}

.team-card--edmund .team-card__img-wrap img {
  object-position: center 25%;
}

.team-card:hover .team-card__img-wrap img {
  transform: scale(1.04);
}

.team-card__body {
  padding: var(--space-md) var(--space-lg);
  border-top: 3px solid var(--gl-green-vivid);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.team-card__name {
  font-family: var(--font-header);
  font-size: var(--text-h3);
  color: var(--gl-navy);
  line-height: 1.2;
  margin: 0;
}

.team-card__title {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--gl-green-vivid);
  text-transform: uppercase;
  line-height: 1.4;
  margin: 0;
}

.team-card__bio-btn {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gl-navy);
  background: none;
  border: 1px solid rgba(50, 62, 72, 0.25);
  border-radius: 4px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  align-self: flex-start;
  margin-block-start: var(--space-sm);
  min-height: 48px;
  transition: border-color var(--duration-fast) var(--ease-stellar),
              color var(--duration-fast) var(--ease-stellar);
}

.team-card__bio-btn:hover {
  border-color: var(--gl-green-vivid);
  color: var(--gl-green-vivid);
}

.team-card__bio-btn:focus-visible {
  outline: 3px solid var(--gl-green);
  outline-offset: 2px;
}

/* -- Carousel Controls ----------------------------------- */

.team-carousel__controls {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin-block-start: var(--space-lg);
}

/* Dots between the arrows -- mirrors the testimonials pattern.
   Team section sits on white, so dots use navy tones instead of white. */
.team-carousel__dots {
  display: flex;
  gap: var(--space-sm);
}

.team-carousel__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(50, 62, 72, 0.25);
  border: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-stellar);
  padding: 0;
  min-height: unset;
}

.team-carousel__dot.is-active {
  background-color: var(--gl-green-vivid);
}

.carousel-btn {
  /* Stripped-back arrow -- no circle, no border. 48px target preserved. */
  width: 48px;
  height: 48px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  color: var(--gl-navy); /* Default surface; testimonials override below for navy bg */
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--duration-fast) var(--ease-stellar);
}

.carousel-btn:hover {
  color: var(--gl-green-vivid);
}

.carousel-btn:focus-visible {
  outline: 2px solid var(--gl-green-vivid);
  outline-offset: 4px;
}

/* Testimonials previously sat on navy and required white arrows. The section
   has been flipped to the white chapter, so arrows revert to navy (matching
   the .carousel-btn default in this file). Override removed -- no special
   rule needed. */

/* ============================================================
   #TESTIMONIALS -- Single quote carousel
   Navy surface. One quote at a time. Arrow navigation.
   ============================================================ */

#testimonials {
  /* Background removed -- transparent so .page-underlay bleeds through.
     Testimonials FLIPPED from navy to white chapter; underlay sits at #FFFFFF.
     All white-on-navy text below has been re-tuned for white surface. */
  /* Compressed padding -- shared token with #proof and #validation for
     consistent rhythm across the three interstitial sections. */
  padding-block: var(--section-pad-y-compressed);
}

.testimonials__carousel {
  /* Widened from 760px to 920px -- testimonials previously felt squished
     on the white underlay. Wider carousel gives quotes room to read as
     editorial pull-quotes rather than constrained captions. */
  max-width: 920px;
  margin-inline: auto;
  padding-inline: var(--space-lg);
}

.testimonials__track {
  position: relative;
  overflow: hidden;
}

.testimonial {
  display: none;
  flex-direction: column;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  border-left: 3px solid var(--gl-green);
  padding-left: var(--space-md);
}

.testimonial.is-active {
  display: flex;
}

.testimonial::before {
  content: '\201C';
  font-family: var(--font-header);
  /* Bumped from clamp(2rem, 3vw, 2.75rem). Previous size was tuned for navy
     background where high contrast amplified the visual weight. On white,
     the green mark needs more scale to register as the editorial opening
     it's meant to be. */
  font-size: clamp(3rem, 4vw, 4.5rem);
  line-height: 1;
  color: var(--gl-green-vivid);
  display: block;
  margin-block-end: 0;
  opacity: 0.6;
}

.testimonial__quote {
  margin: 0;
  padding: 0;
}

.testimonial__quote p {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: 1.7;
  color: rgba(50, 62, 72, 0.85); /* Flipped from white -- testimonials on white underlay */
  margin: 0;
  font-style: italic;
}

.testimonial__attribution {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-block-start: var(--space-xs);
}

.testimonial__name {
  font-family: var(--font-header);
  font-size: var(--text-h3);
  color: var(--gl-navy); /* Flipped from white -- testimonials on white underlay */
  line-height: 1.2;
}

.testimonial__title {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--gl-green-vivid);
  text-transform: uppercase;
}

.testimonials__controls {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin-block-start: var(--space-md);
}

.testimonials__dots {
  display: flex;
  gap: var(--space-sm);
}

.testimonials__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(50, 62, 72, 0.25); /* Flipped from white -- testimonials on white underlay */
  border: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-stellar);
  padding: 0;
  min-height: unset;
}

.testimonials__dot.is-active {
  background-color: var(--gl-green);
}

.testimonial__title {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--gl-green-vivid);
  text-transform: uppercase;
}

.testimonial__company {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--gl-navy) !important; /* Flipped from white -- testimonials on white underlay. !important overrides body color inherited from global.css */
  opacity: 0.6;
  letter-spacing: 0.04em;
}

/* ============================================================
   #ENGAGE -- Contact Section
   White surface. Two-column desktop. Copy left, form right.
   ============================================================ */
#engage {
  /* Background removed -- transparent so .page-underlay bleeds through.
     Engage is part of the WHITE chapter; underlay sits at #FFFFFF here.
     Top border removed -- no longer separating two surfaces since
     #testimonials also uses the underlay now. */
  padding-block: var(--section-pad-y);
}
.engage__inner {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-lg);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}
@media (min-width: 64rem) {
  .engage__inner {
    grid-template-columns: 1.2fr 1fr;
    align-items: start;
    gap: var(--space-2xl);
  }
}

/* -- Left Column: Copy + Contact ------------------------- */
.engage__heading {
  font-family: var(--font-header);
  font-size: var(--text-h1);
  color: var(--gl-navy);
  line-height: 1.2;
  margin-block-end: var(--space-md);
  padding-block-end: var(--space-md);
  border-bottom: 3px solid var(--gl-green);
}
.engage__contact {
  font-style: normal;
  padding-block-start: var(--space-sm);
}
.engage__address {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gl-black);
  line-height: 1.6;
  margin-block-end: var(--space-sm);
  white-space: nowrap;
}
.engage__contact-row {
  display: flex;
  gap: var(--space-xl);
}
.engage__contact-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gl-green);
  display: block;
  margin-block-end: 2px;
}
.engage__contact-link {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--gl-navy);
  text-decoration: none;
  font-weight: 600;
}
.engage__contact-link:hover {
  color: var(--gl-green);
}

/* -- Right Column: Form ---------------------------------- */
.engage-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  background-color: var(--gl-white);
}

/* Name and Email sit side by side. Phone spans full. */
.form-field--name   { grid-column: 1; }
.form-field--email  { grid-column: 2; }
.form-field--phone  { grid-column: 1 / -1; }
.form-field--message { grid-column: 1 / -1; }
.form-field--submit  { grid-column: 1 / -1; }

/* Stack to single column on mobile */
@media (max-width: 40rem) {
  .engage-form {
    grid-template-columns: 1fr;
  }
  .form-field--name,
  .form-field--email { grid-column: 1; }
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.form-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gl-navy);
  text-transform: uppercase;
}
.form-input {
  font-family: var(--font-body);
  font-size: 1rem; /* 16px minimum -- prevents iOS zoom on focus */
  color: var(--gl-navy);
  background-color: var(--gl-white);
  border: 1.5px solid rgba(50, 62, 72, 0.25);
  border-radius: 4px;
  height: 56px; /* above 48px minimum touch target */
  padding-inline: var(--space-md);
  width: 100%;
  transition: border-color var(--duration-fast) var(--ease-stellar);
}
.form-input:focus {
  outline: none;
  border-color: var(--gl-green);
}
.form-input:focus-visible {
  outline: 3px solid var(--gl-green);
  outline-offset: 2px;
}
.form-input--textarea {
  height: auto;
  padding-block: var(--space-md);
  resize: vertical;
  min-height: 148px; /* ~5 rows */
}
.form-submit {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gl-white);
  background-color: var(--gl-green);
  border: none;
  border-radius: 4px;
  height: 56px; /* above 48px minimum touch target */
  padding-inline: var(--space-xl);
  cursor: pointer;
  align-self: flex-start;
  min-width: 48px;
  transition: background-color var(--duration-fast) var(--ease-stellar);
}
.form-submit:hover {
  background-color: var(--gl-navy);
}
.form-submit:focus-visible {
  outline: 3px solid var(--gl-green);
  outline-offset: 3px;
}

/* ============================================================
   #FOOTER -- Legal
   Navy surface. Single centered legal line.
   ============================================================ */

#footer {
  /* FLIPPED from navy to white chapter -- footer now closes the page on white.
     Background removed -- transparent so .page-underlay bleeds through at
     #FFFFFF. Top border removed (no surface change between engage and footer
     now that both sit on the white underlay). */
  padding-block: var(--space-lg);
}

.footer__inner {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer__legal {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: rgba(50, 62, 72, 0.50); /* Flipped from white-at-50% to navy-at-50% for white underlay */
  text-align: center;
  margin: 0;
  letter-spacing: 0.05em;
}

/* About section content reveal -- opacity + rise only, no clip-path.
   Section background cuts hard. Elements rise into the white space. */
.about-reveal {
  opacity: 0;
  transform: translateY(40px);
  will-change: opacity, transform;
}
/* Content reveal -- opacity + rise, matches about-reveal pattern */
.reveal-content {
  opacity: 0;
  transform: translateY(40px);
  will-change: opacity, transform;
}

/* ============================================================
   MEMORIAL -- Robert Liljenwall
   White chapter. Remove this block when the section is retired.
   ============================================================ */

#memorial {
  padding: clamp(5rem, 10vw, 9rem) clamp(1.5rem, 6vw, 6rem);
}

.memorial__inner {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.memorial__figure {
  margin: 0;
}

.memorial__figure img {
  width: 100%;
  height: auto;
  /* Matches team-card--robert object-position for consistent framing */
  object-fit: cover;
  object-position: center 15%;
  aspect-ratio: 1 / 1;
  display: block;
  /* Desaturated treatment -- this is a memorial, not a team card */
  filter: grayscale(30%);
}

.memorial__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gl-green);
  margin: 0 0 0.75rem;
}

.memorial__name {
  font-family: var(--font-header);
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  color: var(--gl-navy);
  margin: 0 0 0.4rem;
  line-height: 1.1;
}

.memorial__title {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  color: rgba(50, 62, 72, 0.55);
  margin: 0 0 2rem;
  text-transform: uppercase;
}

/* Thin rule separating title from body text */
.memorial__title::after {
  content: '';
  display: block;
  width: 3rem;
  height: 1px;
  background: var(--gl-green);
  margin-top: 1.5rem;
}

.memorial__body p {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.1vw, 1.125rem);
  line-height: 1.75;
  color: var(--gl-navy);
  margin: 0 0 1.2rem;
}

.memorial__body p:last-child {
  margin-bottom: 0;
  font-style: italic;
  opacity: 0.7;
}

/* Mobile: stack photo above text */
@media (max-width: 767px) {
  .memorial__inner {
    grid-template-columns: 1fr;
  }

  .memorial__figure img {
    max-width: 280px;
    margin: 0 auto;
  }
}