/* ============================================================================
   Major Design — styles.css
   Single-page scroll-driven home page + standalone service pages.

   QUICK-TUNE MAP (values you're most likely to ask me to nudge):
   • Laptop screen alignment ........ :root  --screen-*            (section A)
   • Phone screen-cutout alignment .. :root  --phone-screen-*      (section A)
   • Dolly / zoom feel .............. js/main.js  (computed "fill" + ZOOM_OVERSCAN)
   • Logo swipe-off distance ........ js/main.js  LOGO_SWIPE
   • Phone size on desktop .......... .phone { height: ... }       (section F)
   • Status-bar clearance in phone .. :root  --phone-statusbar     (section A)
   • Metallic gold sheen ............ :root  --grad-gold           (section A)
   ============================================================================ */

/* ============================================================================
   A) THEME TOKENS + ALIGNMENT COORDINATES  (edit these first)
   ============================================================================ */
:root {
  /* --vh is set by js/main.js to 1% of the REAL (current) viewport height —
     mobile browsers resize the visible viewport as the address bar shows/hides,
     which raw `vh` units don't reliably track. --real-100vh is "100vh" using
     that real value; use it (not plain 100vh) anywhere the hero/phone need to
     exactly match the screen, or they can under/over-shoot on real phones. */
  --vh: 1vh;
  --real-100vh: calc(var(--vh, 1vh) * 100);

  /* ---- Color scheme (forest green + metallic gold + cream) ---- */
  --green-bg:     #1B3A2B;   /* primary forest green background */
  --green-dark:   #0F2419;   /* darkest green — depth / edges / stage bg */
  --gold:         #D4AF37;   /* solid gold — small text, icons, borders */
  --gold-bright:  #E8C766;   /* highlight gold — hover / glows */
  --cream:        #F5F1E6;   /* off-white — body text on dark */
  --cream-dim:    rgba(245, 241, 230, 0.66);
  --ink:          #14271C;   /* dark text for the white phone-section */
  --ink-dim:      #5A6B60;   /* muted dark text on white */
  --green-line:   rgba(245, 241, 230, 0.12);

  /* ---- Metallic gold: a banded gradient with highlights + shadow stops
          so gold text/buttons read as brushed metal rather than flat yellow.
          --grad-gold      : bright, for use on DARK / green backgrounds.
          --grad-gold-deep : darker bronze-gold, legible on the WHITE hero. */
  --grad-gold: linear-gradient(135deg,
      #FBF1C4 0%, #E7C766 20%, #C9A23B 42%,
      #F6E08C 58%, #B07E26 80%, #E7C766 100%);
  --grad-gold-deep: linear-gradient(135deg,
      #9C7C24 0%, #C9A23B 26%, #7E5F18 50%, #D4AF37 74%, #8A6A1C 100%);
  /* --grad-gold-soft : clean gold for BUTTONS (the banded metallic look is
     kept only for headings, not buttons) — a diagonal highlight-to-shadow
     sweep instead of a flat top-to-bottom fade, so it reads as a lit,
     dimensional surface rather than a solid colour swatch. */
  --grad-gold-soft: linear-gradient(135deg, #F3D179 0%, #E0BA55 30%, #CC9F38 70%, #BD8F2E 100%);
  /* --grad-gold-glass : a banded highlight/shadow sweep (brushed-metal
     bands, like --grad-gold-vivid) — near-solid gold so buttons actually
     read as gold instead of a washed-out tint. */
  --grad-gold-glass: linear-gradient(135deg,
      rgba(240, 197, 80, 0.94) 0%, rgba(212, 175, 55, 0.94) 26%,
      rgba(184, 134, 11, 0.94) 50%, rgba(232, 199, 102, 0.94) 74%,
      rgba(212, 175, 55, 0.94) 100%);
  /* Shared shadow recipe for gold buttons: just a plain, neutral contact
     shadow for a little lift — no coloured glow around the outside. */
  --btn-gold-shadow: 0 3px 8px rgba(0, 0, 0, 0.22);
  --btn-gold-shadow-hover: 0 5px 12px rgba(0, 0, 0, 0.26);
  --btn-text: #0F2419;
  --btn-text-shadow: none;
  /* --grad-gold-vivid : richer/more saturated than --grad-gold (which has pale
     cream highlights that read as washed-out on busy/textured backgrounds,
     e.g. the map hero) — same sheen effect, no near-white stops. */
  --grad-gold-vivid: linear-gradient(135deg,
      #F0C550 0%, #D4AF37 28%, #B8860B 52%, #E8C766 76%, #D4AF37 100%);

  /* ---- Type: Sora (modern, sleek display) + Inter (clean body) ---- */
  --font-head: 'Sora', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  /* ---- LOGO / DIVE-IN REGION (centered on the map background) --------------
     % of the .desk-scene box; positions the logo (and the white panel that
     fades in during the dive). Centered so we zoom into the middle of the map.
     Dolly transform-origin = 50% / 50% (map centre). */
  --screen-left:   30%;
  --screen-top:    30%;
  --screen-width:  40%;
  --screen-height: 40%;

  /* ---- PHONE SCREEN CUTOUT (images/phone-frame.png, cropped 705 x 1414) ---- */
  --phone-screen-left:   5.11%;
  --phone-screen-top:    2.62%;
  --phone-screen-width:  89.22%;
  --phone-screen-height: 94.27%;

  /* Top padding inside each phone page so content clears the baked-in "9:41". */
  --phone-statusbar: 12%;

  /* Native pixel aspect ratios of the two assets */
  --desk-aspect:  1536 / 1024;   /* map-bg.jpg */
  --phone-aspect: 705 / 1414;
}

/* ============================================================================
   B) RESET + BASE
   ============================================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--cream);
  background: var(--green-dark);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* A real photo (the Cal Poly stadium shot) sits behind every page's top
   hero/heading section, tinted heavily into the green so it's just barely
   visible — adds a little depth without competing with the text. */

/* ---- Mission page hero: photo left, intro copy center, looping video right ---- */
.mission-hero { padding: 140px 0 30px; position: relative; overflow: hidden; }
.mission-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    linear-gradient(rgba(15, 36, 25, 0.90), rgba(15, 36, 25, 0.90)),
    url('../images/mission-bg-stadium.jpg') center 30% / cover no-repeat;
}
.mission-hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(160px, 240px) 1fr minmax(160px, 240px);
  gap: 36px; align-items: center;
}
.mission-hero-photo, .mission-hero-video {
  display: block; width: 100%; height: auto; border-radius: 16px;
  border: 1px solid var(--green-line); box-shadow: 0 20px 50px rgba(0,0,0,0.35);
  background: #000;
}
.mission-hero-copy { text-align: left; }
.mission-hero-copy h1 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); margin-bottom: 18px; }
@media (max-width: 900px) {
  .mission-hero { padding-top: 110px; }
}
@media (max-width: 900px) {
  .mission-hero-grid { grid-template-columns: 1fr; text-align: center; }
  .mission-hero-copy { text-align: center; }
  .mission-hero-photo { max-width: 110px; margin: 0 auto; }
  .mission-hero-video { max-width: 150px; margin: 0 auto; }
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--gold);
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.container { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ---- Metallic-gold text treatment (apply to prominent headings) ---- */
.metallic {
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
/* Deeper metallic gold — use on the WHITE hero so the headline stays legible. */
.metallic-deep {
  background: var(--grad-gold-deep);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
/* Vivid metallic gold — for text on busy/textured backgrounds (e.g. the map
   hero), where --grad-gold's pale highlights would look washed out. */
.metallic-vivid {
  background: var(--grad-gold-vivid);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; font-family: var(--font-head); font-weight: 600; font-size: 1rem;
  padding: 15px 28px; border-radius: 999px; cursor: pointer; border: none;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
/* Gold "glass" button: solid gold outline carries the shape, the fill is
   the same gold at 50% opacity (tinted, not solid) — with a soft sheen
   that sweeps across on hover for a bit of premium polish. */
.btn-gold {
  position: relative; overflow: hidden;
  background: var(--grad-gold-glass);
  border: 1.5px solid var(--gold-bright);
  color: var(--btn-text); text-shadow: var(--btn-text-shadow);
  box-shadow: var(--btn-gold-shadow);
}
.btn-gold::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.45) 50%, transparent 60%);
  transform: translateX(-120%);
  transition: transform .55s ease;
}
.btn-gold:hover::before, .btn-gold:focus-visible::before { transform: translateX(120%); }
.btn-gold:hover, .btn-gold:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.04);
  box-shadow: var(--btn-gold-shadow-hover);
}
.btn-gold:active {
  transform: translateY(0); filter: brightness(0.98);
  box-shadow: var(--btn-gold-shadow);
}
@media (prefers-reduced-motion: reduce) {
  .btn-gold::before { display: none; }
}
.btn-outline {
  background: transparent; color: var(--gold);
  border: 1px solid rgba(212, 175, 55, 0.5);
}
.btn-outline:hover, .btn-outline:focus-visible {
  border-color: var(--gold-bright); color: var(--gold-bright); transform: translateY(-2px);
}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold-bright); outline-offset: 3px;
}

/* CTA supporting line (small print beneath buttons) */
.cta-note { margin-top: 14px; font-size: 0.85rem; color: var(--cream-dim); }

/* ============================================================================
   C) HERO WRAPPER + PINNED STAGE
   ============================================================================ */
.hero-wrapper { position: relative; height: calc(var(--real-100vh) * 4.6); }   /* scroll runway */

.stage {
  position: relative;            /* GSAP sets fixed while pinned */
  height: var(--real-100vh); width: 100%;
  overflow: hidden;
  background: var(--green-dark);
}

/* ---- Desk scene: photo sized to COVER the viewport, scaled as one unit for
        the "camera flies into the screen" dolly (origin = screen center).
        Centering is done with GSAP xPercent/yPercent so x/y/scale compose. ---- */
.desk-scene {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);   /* fallback; GSAP overrides with xPercent */
  aspect-ratio: var(--desk-aspect);
  width:  max(100vw, calc(var(--real-100vh) * 1536 / 1024));
  height: max(var(--real-100vh), calc(100vw * 1024 / 1536));
  will-change: transform;
}
.desk-photo { width: 100%; height: 100%; object-fit: cover; }
/* Aerial SLO footage layered over the green backdrop at half opacity. */
.desk-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.68; pointer-events: none;
}
/* Slight faded-black wash over the whole map so the gold logo + text pop.
   Sits above the map, below the logo/white panel. Tune the last value (0–1). */
.map-tint { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); pointer-events: none; }

/* Screen-rect container holding the white panel that becomes the fullscreen
   background; glued to the map and scaled along with the desk during the dolly.
   (The logo used to live here too — it's now a fixed, independent element;
   see .logo below — so this only positions the panel.) */
.screen-overlay {
  position: absolute;
  left:   var(--screen-left);
  top:    var(--screen-top);
  width:  var(--screen-width);
  height: var(--screen-height);
  overflow: visible;
}
/* WHITE panel behind the logo. Starts INVISIBLE so the map shows at the start;
   GSAP fades it in during the dive so it becomes the clean white background the
   headline + phone sit on (exactly as before, just revealed mid-zoom). */
.fullscreen-panel {
  position: absolute; inset: 0; opacity: 0;
  background:
    radial-gradient(120% 130% at 50% 40%, #ffffff 0%, #fbf9f3 70%, #f3efe4 100%);
}

/* ---- The logo — a single image (the original file, no seams). Positioned
   independently of .desk-scene (NOT nested inside it), so it does NOT scale
   with the map's dive/zoom — it's full size immediately and stays that size
   until it swipes off to the left. Centred via GSAP xPercent/yPercent
   (see main.js) rather than a CSS transform, so the two never double up. */
.logo {
  /* Anchored a bit below true centre (58%, not 50%) — at 2x size a centred
     square logo leaves no room above it for the two-line heading before it
     collides with the header. Shifting down opens up that space. (Mobile
     restores 50% — its heading gap is computed separately, see below.) */
  position: absolute; top: 58%; left: 50%; z-index: 5;
  /* min(...vw, ...vh) — logo is square, so on any standard landscape monitor
     (height < width) a pure vw size would grow taller than the viewport and
     clip top/bottom. Capping by vh too guarantees it always fits vertically. */
  width: min(60vw, 62vh); max-width: 920px; height: auto;   /* logo.png is square (2x) */
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.35));
  will-change: transform, opacity;
}

/* White layer that fades in BEHIND the phone (green hero -> white phone bg). */
.white-bg {
  position: absolute; inset: 0; z-index: 4;
  background: #ffffff; opacity: 0; pointer-events: none;
}

/* ---- Hero headline layer (separate, readable, centered — never scaled) ---- */
.hero-text {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 24px;
  opacity: 0; pointer-events: none;
}
.hero-text.is-live { pointer-events: auto; }
.hero-title { font-size: clamp(1.9rem, 4.6vw, 3.4rem); max-width: 16ch; }
/* Hero sits on the WHITE screen background, so its supporting copy is dark. */
.hero-text .hero-sub {
  margin: 20px 0 30px; max-width: 46ch;
  font-size: clamp(1rem, 2vw, 1.25rem); color: var(--ink); font-weight: 400;
}
.hero-text .cta-note { color: var(--ink-dim); }

/* ============================================================================
   F) THE PHONE  (rises in, then cycles 5 pages) — sits on the white bg
   ============================================================================ */
.phone {
  /* centred by GSAP (xPercent/yPercent -50) — no CSS transform, or it doubles up */
  position: absolute; top: 50%; left: 50%;
  height: 80vh;                          /* <-- tune phone size on desktop */
  aspect-ratio: var(--phone-aspect);
  z-index: 6; opacity: 0;
  will-change: transform, opacity;
  /* Sits above .hero-text (z-index 5) and covers the same centred area, so
     without this it silently blocks clicks to whatever's underneath (e.g.
     the "See Our Mission" button) the entire time it's invisible and
     waiting to rise in — opacity:0 alone doesn't stop hit-testing. Only
     interactive once actually risen in (see the .is-live toggle in main.js). */
  pointer-events: none;
}
.phone.is-live { pointer-events: auto; }
.phone-screen {
  position: absolute; z-index: 1;
  left:   var(--phone-screen-left);
  top:    var(--phone-screen-top);
  width:  var(--phone-screen-width);
  height: var(--phone-screen-height);
  overflow: hidden;
  border-radius: 8% / 4%;
  background: var(--green-bg);           /* phone screen STAYS green */
}
.phone-frame {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%; pointer-events: none;
}
.phone-page {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column;
  padding: calc(var(--phone-statusbar) + 5%) 9% 6%;
  background:
    radial-gradient(130% 90% at 50% 0%, #214733 0%, var(--green-bg) 60%, var(--green-dark) 100%);
  color: var(--cream); opacity: 0;
}
.phone-page.is-active { opacity: 1; }
.phone-page .pp-inner { display: flex; flex-direction: column; gap: 12px; height: 100%; }
.pp-eyebrow {
  font-family: var(--font-head); font-weight: 600; font-size: 0.72rem;
  letter-spacing: 0.02em; color: var(--gold-bright);
}
.pp-title { font-size: clamp(1.15rem, 4.4vw, 1.55rem); line-height: 1.14; }
.pp-sub { font-size: 0.85rem; color: var(--cream-dim); margin-bottom: 2px; }
.pp-features { list-style: none; display: flex; flex-direction: column; gap: 4px; margin-top: 0; }
.pp-features li {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.8rem; color: var(--cream);
  padding: 5px 11px; border: 1px solid var(--green-line); border-radius: 12px;
  background: rgba(245, 241, 230, 0.03);
}
.pp-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex: 0 0 24px; border-radius: 7px;
  background: rgba(212, 175, 55, 0.14); color: var(--gold-bright);
  border: 1px solid rgba(212, 175, 55, 0.4);
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.45), inset 0 0 6px rgba(212, 175, 55, 0.2);
}
.pp-ico svg { width: 16px; height: 16px; }
.pp-cta {
  margin-top: auto; text-align: center;
  font-family: var(--font-head); font-weight: 600; font-size: 0.9rem;
  background: var(--grad-gold-glass); border: 1.5px solid var(--gold-bright); color: var(--btn-text); text-shadow: var(--btn-text-shadow);
  padding: 7.5px 14.5px; border-radius: 999px;
  box-shadow: var(--btn-gold-shadow);
}

/* ---- Service "snapshot" screens (phone pages 2–5): a BIG centered service
   name (largest text on the screen) + a headline metric for that service. ---- */
/* Vertically centred in the phone screen (by request). Content has been
   trimmed enough that it comfortably fits with room to spare, so centring is
   safe here — if new/longer content is ever added and starts clipping at the
   top+bottom, switch back to justify-content:flex-start. */
.pp-inner.pp-centered { text-align: center; align-items: center; justify-content: center; gap: 4px; }
.pp-service {
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(1.3rem, 5.8vw, 1.85rem); line-height: 1.04;  /* <-- biggest text on the screen */
}
.pp-tag { color: var(--cream-dim); font-size: 0.76rem; line-height: 1.2; max-width: 30ch; }
/* feature rows centered + full width on the centered screens */
.pp-inner.pp-centered .pp-features { width: 100%; margin-top: 2px; }
.pp-inner.pp-centered .pp-features li { justify-content: center; }
/* Overview "service menu": left-aligned rows, each with a description line */
.pp-inner.pp-centered .pp-features.pp-menu li { justify-content: flex-start; text-align: left; gap: 11px; }
.pp-li-text { display: flex; flex-direction: column; gap: 1px; }
.pp-li-title { font-family: var(--font-head); font-weight: 600; font-size: 0.86rem; color: var(--cream); line-height: 1.1; }
.pp-li-sub { font-size: 0.7rem; color: var(--cream-dim); line-height: 1.25; }
.pp-inner.pp-centered .pp-cta { margin-top: 16px; align-self: stretch; }

/* Page dots beside the phone (dark, since they sit on the white bg) */
.phone-dots {
  position: absolute; z-index: 7;
  right: -30px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 10px;
}
.phone-dots .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(20, 39, 28, 0.25); transition: all .25s ease;
}
.phone-dots .dot.is-active { background: var(--gold); transform: scale(1.35); }

/* ============================================================================
   G) STANDARD SCROLL SECTIONS (services / testimonials / contact / footer)
   These stay forest green (white is only behind the phone).
   ============================================================================ */
.section { padding: 78px 0; background: var(--green-dark); }
.section-alt { background: var(--green-bg); }

/* ---- Local Spotlight Interviews (mission page) — each point gets its own
   heading and breathing room, instead of reading as one long wall of text. */
.spotlight-section { padding: 90px 0 100px; }
.spotlight-blocks { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 44px; }
.spotlight-block { position: relative; padding-left: 26px; border-left: 2px solid rgba(212, 175, 55, 0.4); }
.spotlight-heading {
  font-family: var(--font-head); font-weight: 700; color: var(--gold-bright);
  font-size: 1.4rem; letter-spacing: 0.01em; margin-bottom: 12px;
}
.section-head { max-width: 680px; margin: 0 auto 44px; text-align: center; }
/* "Local businesses, real results." was wrapping to 2 lines inside the
   680px cap — widen just this heading's container so it stays on one line.
   nowrap is desktop-only (min-width guard) — forcing it on narrow phones
   would risk the same overflow/clipping bug fixed earlier for other text. */
#testimonials .section-head { max-width: 900px; }
@media (min-width: 769px) {
  #testimonials .section-head h2 { white-space: nowrap; }
}
.section-head h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
.eyebrow {
  font-family: var(--font-head); font-weight: 600; font-size: 0.8rem;
  letter-spacing: 0.06em; color: var(--gold-bright); margin-bottom: 10px;
}
.lede { color: var(--cream); font-family: var(--font-head); font-weight: 400; margin-top: 12px; font-size: 1.05rem; }

/* Services (4 cards, each links to its own page) */
.services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.service-card {
  background: var(--green-bg); border: 1px solid var(--green-line);
  border-radius: 18px; padding: 32px; display: flex; flex-direction: column;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.service-card:hover, .service-card:focus-within {
  transform: translateY(-5px); border-color: rgba(212, 175, 55, 0.5);
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
}
.service-ico {
  width: 50px; height: 50px; border-radius: 12px; margin-bottom: 18px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(212, 175, 55, 0.12); color: var(--gold-bright);
  border: 1px solid rgba(212, 175, 55, 0.4);
  box-shadow: 0 0 16px rgba(212, 175, 55, 0.4), inset 0 0 10px rgba(212, 175, 55, 0.18);
  transition: box-shadow .25s ease;
}
.service-card:hover .service-ico, .feature-box:hover .service-ico {
  box-shadow: 0 0 22px rgba(212, 175, 55, 0.55), inset 0 0 12px rgba(212, 175, 55, 0.25);
}
.service-ico svg { width: 26px; height: 26px; }
.service-card h3 { font-size: 1.3rem; margin-bottom: 10px; }
.service-card .body { color: var(--cream); font-family: var(--font-head); font-size: 0.95rem; margin-bottom: 14px; }
.service-card .proof {
  font-size: 0.85rem; color: var(--gold-bright); font-style: italic;
  padding-left: 12px; border-left: 2px solid rgba(212,175,55,0.4); margin-bottom: 22px;
}
.learn-more {
  margin-top: auto; align-self: flex-start;
  font-family: var(--font-head); font-weight: 600; font-size: 0.92rem;
  background: var(--grad-gold-glass); border: 1.5px solid var(--gold-bright); color: var(--btn-text); text-shadow: var(--btn-text-shadow);
  padding: 9.5px 18.5px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px;
  transition: gap .2s ease, filter .2s ease, transform .2s ease, box-shadow .2s ease;
  box-shadow: var(--btn-gold-shadow);
}
.learn-more:hover, .learn-more:focus-visible {
  gap: 10px; filter: brightness(1.1); transform: translateY(-1px);
  box-shadow: var(--btn-gold-shadow-hover);
}

/* Testimonials */
/* Dark scrim over the top of the desk scene — keeps the gold heading legible
   even where it overlaps the bright laptop screen. */
.hero-scrim {
  position: absolute; top: 0; left: 0; right: 0; height: 50%; z-index: 4;
  pointer-events: none;
  /* stops are % of this element's height (50vh): keep it dark down to ~31% of
     the viewport so BOTH heading lines stay legible over the bright screen. */
  background: linear-gradient(to bottom,
    rgba(8, 18, 12, 0.95) 0%, rgba(8, 18, 12, 0.90) 62%, rgba(8, 18, 12, 0.48) 82%, transparent 100%);
}

/* First-screen heading, overlaid on the desk scene (GSAP fades it during the dive-in).
   drop-shadow (not text-shadow) so it works on the metallic gradient text. */
.hero-intro {
  /* Centred in the gap between the header (64px) and the logo's top edge.
     Logo is anchored at 58vh and square, sized min(60vw,62vh), so its top
     edge = 58vh − half that size.
     `justify-content: safe center` is the key safety net: if this text is
     ever taller than the calculated gap, "safe" falls back to start-aligned
     instead of true centring — which would otherwise push the text UPWARD,
     behind the fixed header (the exact "heading is cut off" bug from before).
     Browsers that don't understand "safe" simply ignore that line and keep
     the plain `center` above it, so there's always a valid fallback. */
  position: absolute; top: 64px; left: 0; right: 0;
  height: calc(58vh - (min(60vw, 62vh) / 2) - 64px);
  display: flex; flex-direction: column; justify-content: center;
  justify-content: safe center;
  z-index: 5; text-align: center; padding: 0 24px; pointer-events: none;
}
/* NOTE: the SUB line is the visually larger/prominent one on this page (by
   request) — .hero-intro-title (the H2, first/top) is deliberately styled
   SMALLER than .hero-intro-sub (the P, second/bottom). Swap font-sizes back
   if that's ever reversed again. */
.hero-intro-title {
  margin-bottom: 8px; font-family: var(--font-head); font-weight: 500;
  font-size: clamp(0.92rem, 2vw, 1.25rem); color: var(--gold-bright); letter-spacing: 0.01em;
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.65));
}
.hero-intro-sub {
  /* Single line on wide screens (tablet/desktop) — plenty of room there.
     Floor/scale kept conservative since this phrase is longer than the
     original heading text was. */
  font-size: clamp(1.6rem, 2.9vw, 3.2rem);
  line-height: 1.08; white-space: nowrap; margin: 0 auto;
  font-family: var(--font-head); font-weight: 600; color: var(--gold);
  filter: drop-shadow(0 2px 14px rgba(0, 0, 0, 0.6));
}

/* Supporting line BELOW the logo, in the same first screen. Logo is anchored
   at 58vh and square (min(60vw,62vh)), so its bottom edge = 58vh + half that
   size — this block starts right there and runs to the bottom of the stage. */
.hero-intro-below {
  position: absolute; left: 0; right: 0; bottom: 0;
  top: calc(58vh + (min(60vw, 62vh) / 2));
  display: flex; flex-direction: column; justify-content: center;
  justify-content: safe center;
  z-index: 5; text-align: center; padding: 12px 24px 40px; pointer-events: none;
}
.hero-intro-below-text {
  max-width: 46ch; margin: 0 auto;
  font-size: clamp(0.9rem, 1.4vw, 1.05rem); line-height: 1.45;
  color: var(--gold-bright); font-weight: 400;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.65));
}
/* Reduced-motion = the static stacked layout. Hero pieces become normal headings
   (no overlay/scrim), on the dark page bg, so light them up. */
@media (prefers-reduced-motion: reduce) {
  .hero-scrim { display: none; }
  .hero-intro { position: static; opacity: 1; padding: 12px 24px 0; }
  .hero-intro-title, .hero-intro-sub { filter: none; }
  .hero-intro-title { font-size: 0.8rem; }
  .hero-intro-sub { font-size: 1.05rem; letter-spacing: 0.04em; }
  .hero-intro-below { position: static; opacity: 1; padding: 8px 24px 0; }
  .hero-intro-below-text { filter: none; }
  /* Logo is normally absolutely centred (top:50%/left:50%), which needs an
     explicit-height ancestor — the static stacked layout doesn't have one, so
     place it in-flow instead: a normal centred image between the map and the
     headline. */
  .logo { position: static; display: block; width: 280px; max-width: 70vw; margin: -20px auto 20px; }
  .hero-text .hero-title { background-image: var(--grad-gold); }
  .hero-text .hero-sub { color: var(--cream); }
  .hero-text .cta-note { color: var(--cream-dim); }
  .phone { display: none; }
}

/* Reviews carousel — continuously scrolls left (a slow ticker, not discrete
   steps), pauses on hover/focus. The track's HTML contains the review set
   TWICE back-to-back (see index.html); animating exactly -50% of the track's
   width scrolls through one full set and lands back at an identical-looking
   start, so the loop repeats with no visible seam. Stops entirely for
   prefers-reduced-motion. */
.reviews-carousel { position: relative; overflow: hidden; max-width: 1080px; margin: 0 auto; }
.reviews-track {
  display: flex; gap: 22px; width: max-content;
  animation: reviews-scroll 70s linear infinite;
}
.reviews-carousel:hover .reviews-track,
.reviews-carousel:focus-within .reviews-track { animation-play-state: paused; }
@keyframes reviews-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .reviews-track { animation: none; }
}
.reviews-track .quote-card { flex: 0 0 320px; }
/* Clamp long reviews to a few lines so no single long testimonial stretches
   every card in the row taller (flex row items stretch to the tallest one). */
.reviews-track .quote-card blockquote {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden; margin-bottom: 10px;
}
.reviews-track .stars { margin-bottom: 8px; }
.reviews-track .quote-card figcaption { padding-top: 4px; }

.quote-card {
  position: relative; overflow: hidden; /* clips the rotating shine to the card's rounded corners */
  background: var(--green-dark); border-radius: 18px; padding: 20px 22px;
}
/* Thin gold "shining" outline: a rotating conic-gradient ring, revealed only
   at the very edge by an inset solid fill matching the card background. */
.quote-card::before {
  content: ''; position: absolute; inset: -40%; z-index: 0;
  background: conic-gradient(from 0deg,
    transparent 0deg, transparent 300deg, var(--gold-bright) 330deg,
    var(--gold) 345deg, var(--gold-bright) 360deg);
  animation: quote-shine 5s linear infinite;
}
.quote-card::after {
  content: ''; position: absolute; inset: 1.5px; z-index: 0;
  background: var(--green-dark); border-radius: 17px;
}
.quote-card > * { position: relative; z-index: 1; }
@keyframes quote-shine { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .quote-card::before { animation: none; }
}
.quote-card figcaption { padding-top: 8px; }
.stars { display: flex; gap: 3px; margin-bottom: 14px; color: var(--gold); }
.stars svg {
  width: 16px; height: 16px; fill: var(--gold-bright);
  filter: drop-shadow(0 0 4px rgba(232, 199, 102, 0.85)) drop-shadow(0 0 8px rgba(212, 175, 55, 0.5));
}
.quote-card blockquote { font-size: 0.98rem; color: var(--cream); margin-bottom: 16px; }
.q-name { display: block; font-family: var(--font-head); font-weight: 600; color: var(--gold); }
.q-role { display: block; font-size: 0.85rem; color: var(--cream-dim); }

/* Closing CTA + contact */
.closing { text-align: center; }
.closing .section-head { margin-bottom: 36px; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; margin-top: 30px; text-align: left; }
.contact-list { list-style: none; margin-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.contact-list li { display: flex; align-items: center; gap: 10px; color: var(--cream); }
.contact-list svg { width: 18px; height: 18px; color: var(--gold-bright); }
.contact-form { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 0.85rem; color: var(--cream-dim); font-family: var(--font-head); }
.field input, .field textarea, .field select {
  font-family: var(--font-body); font-size: 1rem; color: var(--cream);
  background: var(--green-bg); border: 1px solid var(--green-line);
  border-radius: 12px; padding: 12px 14px; resize: vertical;
}
.field select { appearance: auto; cursor: pointer; }
.field-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-form .btn { align-self: flex-start; margin-top: 4px; }
.form-note { font-size: 0.82rem; color: var(--cream-dim); margin-top: 4px; }
.form-note a { color: var(--gold-bright); }
.form-status { font-size: 0.9rem; color: var(--gold-bright); font-weight: 600; min-height: 1.2em; }
@media (max-width: 560px) {
  .field-split { grid-template-columns: 1fr; }
}
.ghl-embed { margin-top: 0; }
.ghl-placeholder {
  border: 1px dashed rgba(212, 175, 55, 0.4); border-radius: 12px;
  padding: 22px; text-align: center; color: var(--cream-dim); font-size: 0.9rem;
}
/* Live GHL booking calendar */
.booking-wrap { max-width: 820px; margin: 12px auto 16px; }
#ghl-embed iframe {
  width: 100%; min-height: 720px; border: none; border-radius: 16px;
  background: #fff; display: block; box-shadow: 0 22px 55px rgba(0, 0, 0, 0.30);
}
/* Email · phone · location shown inline under the calendar */
.contact-list.contact-inline {
  flex-direction: row; flex-wrap: wrap; justify-content: center;
  gap: 14px 28px; margin-top: 26px;
}

.site-footer { padding: 34px 0; background: var(--green-dark); border-top: 1px solid var(--green-line); }
.site-footer p { color: var(--cream-dim); font-size: 0.9rem; text-align: center; }
.site-footer .footer-legal { margin-top: 8px; font-size: 0.82rem; }
.site-footer .footer-legal a { color: var(--cream-dim); text-decoration: underline; }
.site-footer .footer-legal a:hover { color: var(--gold-bright); }

/* ---- Legal pages (privacy policy, terms) — plain prose, not a marketing
   layout. Shared by any page using .legal-content. ---- */
.legal-content { max-width: 760px; margin: 0 auto; text-align: left; }
.legal-content .legal-updated { color: var(--cream-dim); font-size: 0.88rem; margin-bottom: 30px; }
.legal-content h2 {
  font-family: var(--font-head); font-weight: 600; color: var(--gold-bright);
  font-size: 1.3rem; margin: 34px 0 12px;
}
.legal-content h2:first-of-type { margin-top: 0; }
.legal-content p, .legal-content li { color: var(--cream-dim); line-height: 1.7; }
.legal-content p { margin: 0 0 14px; }
.legal-content ul { padding-left: 22px; margin: 0 0 16px; }
.legal-content li { margin-bottom: 8px; }
.legal-content strong { color: var(--cream); }
.legal-content a { color: var(--gold-bright); text-decoration: underline; }

/* ============================================================================
   H) STANDALONE SERVICE PAGES (ai-automations.html, seo.html, ...)
   ============================================================================ */
/* ---- GLOBAL SITE HEADER (fixed) with the pages menu — on every page ---- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: rgba(15, 36, 25, 0.82);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--green-line);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 600; color: var(--cream); }
.brand img { width: 32px; height: 32px; object-fit: contain; }
.brand span { font-size: 0.98rem; white-space: nowrap; }
.main-nav { display: flex; align-items: center; gap: 4px; }
.main-nav a {
  padding: 8px 12px; border-radius: 8px; font-size: 0.92rem;
  color: var(--cream-dim); font-weight: 500; transition: color .2s, background .2s;
}
.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--gold-bright); }
.main-nav .nav-cta {
  background: var(--grad-gold-glass); border: 1.5px solid var(--gold-bright); color: var(--btn-text); text-shadow: var(--btn-text-shadow);
  font-family: var(--font-head); font-weight: 600;
  padding: 7.5px 16.5px; border-radius: 999px; margin-left: 8px;
  box-shadow: var(--btn-gold-shadow);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.main-nav .nav-cta:hover {
  color: var(--green-dark); filter: brightness(1.1);
  transform: translateY(-1px); box-shadow: var(--btn-gold-shadow-hover);
}
/* Hamburger toggle (mobile only) */
.nav-toggle {
  display: none; width: 42px; height: 42px; border-radius: 10px; padding: 0;
  background: transparent; border: 1px solid var(--green-line);
  flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer;
}
.nav-toggle span { width: 18px; height: 2px; background: var(--cream); border-radius: 2px; }

/* ---- Nav dropdowns (Services / Search Visibility / Lead Generation) ----
   Desktop: hover or keyboard-focus reveals the panel below the trigger.
   Mobile: no hover, so a separate caret button toggles an inline accordion
   (see nav.js) — the trigger link itself still navigates normally. */
.nav-item { position: relative; display: flex; align-items: center; }
.nav-item > a { display: flex; align-items: center; gap: 3px; }
.nav-caret { width: 14px; height: 14px; transition: transform .2s ease; }
.nav-item:hover .nav-caret, .nav-item:focus-within .nav-caret, .nav-item.is-open .nav-caret {
  transform: rotate(180deg);
}
.nav-caret-btn {
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; padding: 4px; margin-left: -6px;
  color: var(--cream-dim); cursor: pointer;
}

.nav-dropdown {
  display: none; flex-direction: column; gap: 2px;
  position: absolute; top: 100%; left: 0; margin-top: 12px;
  min-width: 200px; padding: 8px;
  background: var(--green-dark); border: 1px solid var(--green-line);
  border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}
/* Invisible bridge so the dropdown doesn't close crossing the gap to it */
.nav-item::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 12px; }

.nav-item:hover .nav-dropdown, .nav-item:focus-within .nav-dropdown, .nav-item.is-open .nav-dropdown {
  display: flex;
}
.nav-dropdown a { padding: 10px 12px; border-radius: 8px; font-size: 0.9rem; white-space: nowrap; }

/* Anchor jumps shouldn't hide under the fixed header */
[id] { scroll-margin-top: 84px; }

@media (max-width: 920px) {
  .nav-toggle { display: flex; }
  .main-nav {
    position: absolute; top: 64px; left: 0; right: 0; display: none;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--green-dark); border-bottom: 1px solid var(--green-line);
    padding: 10px 22px 18px; max-height: calc(var(--real-100vh, 100vh) - 64px); overflow-y: auto;
  }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 13px 10px; width: 100%; font-size: 1rem; }
  .main-nav .nav-cta { margin: 10px 0 0; text-align: center; }
  .brand span { font-size: 0.9rem; }

  .nav-item { flex-direction: column; align-items: stretch; position: relative; }
  .nav-item > a { flex: 1; }
  .nav-caret-btn { position: absolute; right: 2px; top: 2px; width: 44px; height: 44px; }
  .nav-item:hover .nav-dropdown, .nav-item:focus-within .nav-dropdown { display: none; }
  .nav-item.is-open .nav-dropdown {
    display: flex; position: static; margin: 0 0 4px; padding: 0 0 0 14px;
    background: transparent; border: none; box-shadow: none; min-width: 0;
  }
  .nav-item::after { display: none; }
}

.svc-hero { padding: 130px 0 50px; position: relative; overflow: hidden; } /* top clears fixed header */
.svc-hero::before {            /* soft gold glow + the barely-visible stadium photo */
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(60% 50% at 30% 0%, rgba(212,175,55,0.10) 0%, transparent 70%),
    linear-gradient(rgba(15, 36, 25, 0.90), rgba(15, 36, 25, 0.90)),
    url('../images/mission-bg-stadium.jpg') center 30% / cover no-repeat;
}
.svc-hero .container { position: relative; max-width: 820px; }
.svc-eyebrow {
  font-family: var(--font-head); font-weight: 600; letter-spacing: 0.08em;
  color: var(--gold-bright); font-size: 0.85rem; margin-bottom: 16px;
}
.svc-hero h1 { font-size: clamp(1.9rem, 4.6vw, 3.3rem); margin-bottom: 20px; }
.svc-hero .svc-body { font-size: clamp(1.05rem, 2vw, 1.3rem); color: var(--cream); max-width: 60ch; margin-bottom: 18px; }
.svc-proof {
  display: inline-block; font-style: italic; color: var(--gold-bright);
  padding: 10px 16px; border: 1px solid rgba(212,175,55,0.3);
  border-radius: 999px; background: rgba(212,175,55,0.06); margin-bottom: 30px;
}
.svc-features { padding: 20px 0 50px; }
.svc-features .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature-box { background: var(--green-bg); border: 1px solid var(--green-line); border-radius: 16px; padding: 26px; }
.feature-box .service-ico { margin-bottom: 14px; }
.feature-box h3 { font-size: 1.1rem; margin-bottom: 8px; }
.feature-box p { color: var(--cream); font-family: var(--font-head); font-size: 0.92rem; }

/* Staggered "parallelogram" layout — each card steps down a bit further
   than the last, instead of sitting flat in a row. Desktop only; collapses
   back to a flat stack on mobile so nothing overlaps at narrow widths. */
@media (min-width: 901px) {
  .svc-features .grid-stagger { grid-template-columns: repeat(4, 1fr); align-items: start; margin-bottom: 40px; }
  .grid-stagger .feature-box:nth-child(1) { transform: translateY(0); }
  .grid-stagger .feature-box:nth-child(2) { transform: translateY(26px); }
  .grid-stagger .feature-box:nth-child(3) { transform: translateY(52px); }
  .grid-stagger .feature-box:nth-child(4) { transform: translateY(78px); }
}

/* ---- Portfolio (real client site walkthrough videos) ---- */
.svc-portfolio { padding: 76px 0; text-align: center; }
.svc-portfolio h2 { font-size: clamp(1.6rem, 3.5vw, 2.3rem); }
.portfolio-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px;
  margin-top: 36px; text-align: left;
}
.portfolio-item {
  background: var(--green-dark); border: 1px solid var(--green-line);
  border-radius: 16px; padding: 22px 22px 0; display: flex;
  flex-direction: column; align-items: center; text-align: center;
}
/* Shown at a normal screen size rather than stretched to fill the whole
   card — some of these are mobile (portrait) recordings, some desktop
   (landscape), so cap by both max-width and max-height and let the
   natural aspect ratio pick the binding one. */
.portfolio-video { display: block; width: auto; height: auto; max-width: 100%; max-height: 420px; border-radius: 8px; background: #000; position: relative; z-index: 1; }
/* Shimmering gold border — a rotating conic-gradient behind the video,
   clipped to a thin ring (same technique as .quote-card's shine). Pseudo-
   elements don't render reliably on <video> itself, so the shine lives on
   a wrapping frame div sized to the video via inline-block. */
.portfolio-video-frame { position: relative; display: inline-block; overflow: hidden; border-radius: 10px; margin: 0 auto; padding: 3px; }
.portfolio-video-frame::before {
  content: ''; position: absolute; inset: -60%; z-index: 0;
  background: conic-gradient(from 0deg,
    transparent 0deg, transparent 200deg, var(--gold-bright) 260deg,
    var(--gold) 300deg, var(--gold-bright) 360deg);
  animation: portfolio-shine 4s linear infinite;
}
@keyframes portfolio-shine { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .portfolio-video-frame::before { animation: none; }
}
.portfolio-caption { padding: 16px 4px 22px; color: var(--cream); font-family: var(--font-head); font-size: 0.92rem; line-height: 1.5; }
.portfolio-caption strong { color: var(--cream); }
@media (max-width: 700px) {
  .portfolio-grid { grid-template-columns: 1fr; }
}

/* ---- Results band (per-service metric stats) ---- */
.svc-results {
  padding: 76px 0; text-align: center; background: var(--green-bg);
  border-top: 1px solid var(--green-line); border-bottom: 1px solid var(--green-line);
}
.svc-results h2 { font-size: clamp(1.6rem, 3.5vw, 2.3rem); }
.results-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; }
.result-stat {
  display: flex; flex-direction: column; gap: 8px; padding: 28px 18px;
  background: var(--green-dark); border: 1px solid var(--green-line); border-radius: 16px;
}
.result-stat .num { font-family: var(--font-head); font-weight: 700; font-size: clamp(2.3rem, 5vw, 3.3rem); line-height: 1; }
.result-stat .label { color: var(--cream-dim); font-size: 0.92rem; }

/* Results screenshot gallery — reusable across every service page. Each slot
   is an EMPTY placeholder (dashed box) + an editable caption underneath.
   Fill in real screenshots + captions per service as that data comes in —
   search this file's HTML for "SCREENSHOT SLOT" to find each one. */
.results-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; margin-top: 44px; text-align: left; }
.results-gallery-item {
  background: var(--green-dark); border: 1px solid var(--green-line);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}
.results-gallery-shot {
  aspect-ratio: 16 / 10; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 8px; color: var(--cream-dim); font-size: 0.82rem;
  background: rgba(245, 241, 230, 0.03); border-bottom: 1px dashed var(--green-line);
}
.results-gallery-shot svg { width: 26px; height: 26px; opacity: 0.6; }
/* Real screenshots show at full size, uncropped, at their own natural
   aspect ratio — overriding the placeholder's forced 16:10 box, which was
   stretching them. */
img.results-gallery-shot { display: block; width: 100%; height: auto; aspect-ratio: auto; }
.results-gallery-caption { padding: 16px 18px; color: var(--cream); font-family: var(--font-head); font-size: 0.92rem; line-height: 1.5; }
@media (max-width: 700px) {
  .results-gallery { grid-template-columns: 1fr; }
}

/* ---- Process steps — numbered, connected step flow (reusable). Currently
   used on the Lead Generation page for "one shoot day, 3 months of content". ---- */
.process-steps {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
  max-width: 1080px; margin: 0 auto;
}
.process-step { position: relative; text-align: center; padding-top: 6px; }
.process-num {
  position: relative; z-index: 1; width: 52px; height: 52px; margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: var(--grad-gold-soft); color: var(--green-dark);
  font-family: var(--font-head); font-weight: 700; font-size: 1.25rem;
}
.process-step:not(:last-child)::after {
  content: ''; position: absolute; top: 32px; left: calc(50% + 26px); width: calc(100% - 26px);
  height: 2px; background: rgba(212, 175, 55, 0.35); z-index: 0;
}
.process-step h3 { font-size: 1.02rem; margin-bottom: 8px; }
.process-step p { color: var(--cream); font-family: var(--font-head); font-size: 0.88rem; line-height: 1.5; }
@media (max-width: 900px) {
  .process-steps { grid-template-columns: 1fr; gap: 36px; }
  .process-step:not(:last-child)::after { display: none; }
}

/* ---- FAQ accordion — reusable across any page ---- */
.faq-list { max-width: 720px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--green-line); }
.faq-question {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: none; border: none; cursor: pointer; text-align: left;
  padding: 20px 4px; font-family: var(--font-head); font-weight: 600;
  font-size: 1.05rem; color: var(--cream);
}
.faq-chevron { flex-shrink: 0; width: 20px; height: 20px; color: var(--gold-bright); transition: transform 0.3s ease; }
.faq-item.is-open .faq-chevron { transform: rotate(180deg); }
.faq-answer {
  max-height: 0; overflow: hidden; padding: 0 4px;
  transition: max-height 0.35s ease, padding 0.35s ease;
}
.faq-item.is-open .faq-answer { max-height: 400px; padding-bottom: 22px; }
.faq-answer p { margin: 0; color: var(--cream); font-family: var(--font-head); font-size: 1rem; line-height: 1.6; }

/* Single featured testimonial on a service page */
.svc-quote { padding: 70px 0 20px; background: var(--green-dark); }
.svc-quote .quote-card { max-width: 760px; margin: 0 auto; text-align: center; background: var(--green-bg); }
.svc-quote .stars { justify-content: center; }
.svc-quote blockquote { font-size: 1.12rem; line-height: 1.5; }
.svc-quote figcaption { margin-top: 6px; }

/* A fixed background photo behind every CTA band — it stays put while the
   page scrolls past it, which visually breaks up the sections around it
   instead of the CTA reading as just another plain block. */
.svc-cta {
  position: relative; text-align: center; padding: 60px 0 80px;
  background:
    linear-gradient(rgba(15, 36, 25, 0.85), rgba(15, 36, 25, 0.85)),
    url('../images/mission-bg-stadium.jpg') center 40% / cover no-repeat fixed;
}
@media (max-width: 900px) {
  /* background-attachment: fixed is unreliable on mobile Safari/Chrome scroll. */
  .svc-cta { background-attachment: scroll, scroll; }
}
.svc-cta h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 18px; }

/* ============================================================================
   I) REVEAL-ON-SCROLL
   ============================================================================ */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ============================================================================
   J) RESPONSIVE — animation runs at all widths; this just adjusts the layout below.
   ============================================================================ */
@media (max-width: 768px) {
  /* The scroll animation runs on mobile too, so the hero keeps its animated
     (absolute/pinned) layout. Only the below-the-fold grids + a few sizes change. */
  .services-grid, .contact-grid, .svc-features .grid, .results-grid, .results-gallery { grid-template-columns: 1fr; }
  .section { padding: 46px 0; }
  /* Narrower cards on phones so the next one peeks in at the edge */
  .reviews-track .quote-card { flex-basis: 82vw; max-width: 300px; }
  /* Mobile sizes for the animated hero */
  .phone { height: calc(var(--real-100vh) * 0.72); }
  .phone-dots { right: auto; left: 50%; top: auto; bottom: -24px; transform: translateX(-50%); flex-direction: row; }
  /* "Helping Businesses Scale with AI" can't be both one-line AND large on a
     phone-width screen — let it wrap to 2 lines here so it stays big and
     readable instead of being shrunk to fit one line. */
  .hero-intro-title { font-size: 0.92rem; }
  .hero-intro-sub { font-size: 1.5rem; line-height: 1.15; white-space: normal; max-width: 20ch; margin: 6px auto 0; }

  /* Logo is fixed-size and no longer tied to the map's zoom geometry (see
     .logo above), so it just needs a mobile-appropriate size here. */
  /* A literal 2x (104vw) would run off both edges of the screen, so this is
     as close to double as possible while staying fully on-screen. */
  .logo { width: 80vw; max-width: 620px; top: 50%; } /* restore true-centre (desktop shifts to 58%) */

  /* Fixed gap below the header (not centred in a fragile calculated box —
     see the base rule's comment for why). */
  /* Same "centred with a safe fallback" approach as desktop — logo is
     centred at 50vh and square, sized 80vw (half = 40vw). Reduced from 96vw/48vw
     because the intro text (title + sub) was overflowing this gap and getting
     clipped by .stage's overflow:hidden on shorter/narrower phones. */
  .hero-intro {
    top: 64px; height: calc(50vh - 40vw - 64px);
    display: flex; flex-direction: column; justify-content: center;
    justify-content: safe center;
  }
  /* Logo is centred at 50vh on mobile (80vw wide, half = 40vw) — mirrors the
     desktop rule above but off that geometry instead. */
  .hero-intro-below { top: calc(50vh + 40vw); padding: 12px 24px 24px; }
  .hero-intro-below-text { font-size: 0.92rem; max-width: 30ch; }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .svc-features .grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================================
   K) REDUCED MOTION — skip the animation; clean static stack.
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-wrapper { height: auto; }
  .stage { position: static; height: auto; overflow: visible; padding: 80px 0 10px; }
  .desk-scene {
    position: relative; top: auto; left: auto; transform: none;
    width: 100%; max-width: 900px; height: auto; margin: 0 auto 32px; border-radius: 14px; overflow: hidden;
  }
  .screen-overlay { transform: none !important; }
  .white-bg { display: none; }
  .hero-text { position: static; inset: auto; opacity: 1; pointer-events: auto; padding: 6px 24px 46px; }
  .phone {
    position: static; top: auto; left: auto; transform: none;
    width: 100%; max-width: 420px; height: auto; aspect-ratio: auto; opacity: 1; margin: 0 auto;
    pointer-events: auto;
  }
  .phone-frame, .phone-dots { display: none; }
  .phone-screen {
    position: static; left: auto; top: auto; width: 100%; height: auto;
    overflow: visible; background: transparent; display: flex; flex-direction: column; gap: 18px;
  }
  .phone-page { position: static; inset: auto; opacity: 1; border: 1px solid var(--green-line); border-radius: 18px; padding: 26px 22px; min-height: 340px; }
  .reveal, .reveal.is-visible { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}