/* ─── CUSTOM PROPERTIES ──────────────────────────────────────────────────────── */
:root {
  --white:          #ffffff;
  --black:          #0C0C0C;
  --near-black:     #111111;
  --gray-text:      #555555;
  --gray-mid:       #6b6b6b;
  --gray-light:     #F4F4F4;
  --gray-border:    #E4E4E4;
  --emerald:        #0A5C36;
  --emerald-dark:   #073d24;
  --emerald-glow:   rgba(10, 92, 54, 0.18);
  --emerald-on-dark: #3DB27A; /* emerald text on --near-black: 7:1 (brand emerald is only 2.3:1 there) */

  --font-display:   'Playfair Display', Georgia, serif;
  --font-body:      'Inter', -apple-system, sans-serif;

  --nav-h:          80px;
  --section-pad-x:  clamp(28px, 6vw, 100px);
  --max-w:          1240px;
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── RESET ──────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  font-family: var(--font-body);
  background: var(--white);
  color: var(--black);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#scroll-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}


/* ─── NAV ─────────────────────────────────────────────────────────────────────── */
#nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--section-pad-x);
  height: var(--nav-h);
  transition:
    background   0.45s var(--ease-out),
    backdrop-filter 0.45s var(--ease-out),
    box-shadow   0.45s var(--ease-out),
    height       0.35s var(--ease-out);

  /* initial state — animated in by GSAP */
  opacity: 0;
  transform: translateY(-28px);
}

#nav.scrolled {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 1px 0 var(--gray-border);
  height: 64px;
}

#nav.on-dark {
  background: rgba(17, 17, 17, 0.82);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}

#nav.on-dark .nav-logo {
  color: rgba(255, 255, 255, 0.92);
}

#nav.on-dark .nav-links a {
  color: rgba(255, 255, 255, 0.65);
}

#nav.on-dark .nav-links a:hover {
  color: #ffffff;
  opacity: 1;
}

#nav.on-dark .nav-links a::after {
  background: rgba(255, 255, 255, 0.7);
}

.nav-logo {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.2px;
  color: var(--black);
  text-decoration: none;
  transition: color 0.45s var(--ease-out);
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 40px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.nav-links a {
  text-decoration: none;
  color: var(--black);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.1px;
  opacity: 0.55;
  transition: opacity 0.22s ease, color 0.45s var(--ease-out);
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0;
  width: 0; height: 1px;
  background: var(--emerald);
  transition: width 0.28s var(--ease-out);
}

.nav-links a:hover { opacity: 1; color: var(--emerald); }
.nav-links a:hover::after { width: 100%; }

.nav-cta {
  text-decoration: none;
  background: var(--emerald);
  color: var(--white);
  padding: 10px 24px;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1px;
  transition: background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

.nav-cta:hover {
  background: var(--emerald-dark);
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 8px 24px var(--emerald-glow);
}

/* ─── SHARED SECTION STYLES ──────────────────────────────────────────────────── */
.section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.section-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 120px var(--section-pad-x);
}

/* Section ghost numbers */
.section-number {
  position: absolute;
  font-family: var(--font-display);
  font-size: clamp(140px, 18vw, 260px);
  font-weight: 900;
  line-height: 1;
  color: rgba(0, 0, 0, 0.032);
  pointer-events: none;
  user-select: none;
  z-index: 1;
  top: 48px;
  left: calc(var(--section-pad-x) - 12px);
  opacity: 0;
  transform: translateX(40px);
}

/* Eyebrow / tag labels */
.label-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--emerald);
  margin-bottom: 22px;
  opacity: 0;
  clip-path: inset(100% 0 0 0);
}

.label-tag::before {
  content: '';
  display: block;
  width: 22px;
  height: 1px;
  background: var(--emerald);
  flex-shrink: 0;
}

/* Section headlines */
.section-headline {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.8vw, 62px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.5px;
  color: var(--black);
  margin-bottom: 40px;
  opacity: 0;
  transform: translateX(-50px);
}

/* ─── PRIMARY BUTTON ─────────────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  background: var(--emerald);
  color: var(--white);
  padding: 15px 36px;
  border-radius: 5px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.1px;
  transition:
    background  0.28s ease,
    transform   0.28s var(--ease-out),
    box-shadow  0.28s ease;
}

.btn-primary:hover {
  background: var(--emerald-dark);
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 18px 48px rgba(10, 92, 54, 0.30);
}

.btn-large {
  padding: 18px 48px;
  font-size: 17px;
}

/* ─── HERO ────────────────────────────────────────────────────────────────────── */
@keyframes hero-breathe {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}

@keyframes hero-grid-drift {
  0%   { background-position: 0 0; }
  100% { background-position: 68px 68px; }
}

#hero {
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: var(--nav-h); /* center content in the band below the fixed nav */
  padding-bottom: 130px; /* shift centering up — clears marquee (bottom:64px) + scroll indicator (bottom:24px) */
  position: relative;
  background: linear-gradient(135deg, #ffffff 0%, #f0f7f4 50%, #e8f5ef 100%);
  background-size: 200% 200%;
  animation: hero-breathe 8s ease-in-out infinite;
}

.hero-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(10, 92, 54, 0.042) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 92, 54, 0.042) 1px, transparent 1px);
  background-size: 68px 68px;
  animation: hero-grid-drift 24s linear infinite;
  mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 30%, transparent 100%);
  z-index: 0;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 960px;
  padding: 0 var(--section-pad-x);
}

.hero-headline {
  font-family: var(--font-display);
  font-size: clamp(46px, 7.2vw, 98px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -2px;
  color: var(--black);
  margin-bottom: 30px;
}

/* Word-mask animation support */
.word-outer {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-top: 0.25em;   /* Playfair Display 'f' ascender extends ~0.18em above line-box-top; 0.25em clears it safely */
  padding-bottom: 0.12em;
}
.word-inner {
  display: inline-block;
}

/* Character-level animation support (eyebrow labels) */
.char-outer {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.char-inner { display: inline-block; }

.hero-sub {
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.82;
  color: var(--gray-text);
  max-width: 640px;
  margin: 0 auto 44px;
  opacity: 0;
  transform: translateY(22px);
}

.hero-cta {
  opacity: 0;
  transform: translateY(18px);
}

/* ─── ICON SET ───────────────────────────────────────────────────────────────── */
/* One line-icon system site-wide: 24×24 viewBox, 2px round stroke in
   currentColor. non-scaling-stroke keeps the stroke at exactly 2px at every
   rendered size (18px contact chips through 28px service cards). */
.icon {
  display: block;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon * { vector-effect: non-scaling-stroke; }

/* ─── HERO AUTOMATION FLOW ───────────────────────────────────────────────────── */
/* Four-step example automation beside (desktop), below (tablet) or under the
   CTA as a simplified list (mobile, see mobile overrides). The resting state
   is fully lit — the unlit look only exists once main.js adds .is-animating,
   so no-JS, reduced motion and a GSAP failure all show the complete flow. */
.hero-flow {
  list-style: none;
  margin: 0;
  padding: 0;
  opacity: 0;
  transform: translateY(18px);
}

.flow-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--white);
  border: 1px solid var(--emerald);
  border-radius: 10px;
  padding: 10px 18px 10px 10px;
  transition: border-color 0.35s ease;
}

.flow-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--emerald);
  color: var(--white);
  transition: background-color 0.35s ease, color 0.35s ease;
}
.flow-icon .icon { width: 20px; height: 20px; }

.flow-label {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--black);
  transition: color 0.35s ease;
}

.hero-flow.is-animating .flow-node:not(.is-lit) .flow-card  { border-color: var(--gray-border); }
.hero-flow.is-animating .flow-node:not(.is-lit) .flow-icon  { background: #e8f5ef; color: var(--emerald); }
.hero-flow.is-animating .flow-node:not(.is-lit) .flow-label { color: var(--gray-mid); }

/* Connector: dashed track, emerald fill scaled by --p (0→1), and a pulse dot
   riding a full-length wrapper translated by --p of its own length — so the
   loop only ever animates one custom property plus opacity. */
.flow-link {
  --p: 1;
  position: relative;
  display: block;
  width: 2px;
  height: 26px;
  margin-left: 29px; /* card left padding 10 + icon radius 20 − half the line */
  background-image: linear-gradient(to bottom, var(--gray-border) 50%, transparent 50%);
  background-size: 2px 6px;
}
.flow-fill {
  position: absolute;
  inset: 0;
  background: var(--emerald);
  transform-origin: top;
  transform: scaleY(var(--p));
}
.flow-pulse {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(calc(var(--p) * 100%));
}
.flow-pulse::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--emerald);
  box-shadow: 0 0 0 4px var(--emerald-glow);
}

/* Desktop: headline + CTA on the left, flow stacked on the right. */
@media (min-width: 1100px) {
  .hero-content {
    width: 100%;
    max-width: var(--max-w);
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
    gap: 72px;
    align-items: center;
    text-align: left;
  }
  .hero-headline { font-size: clamp(44px, 4.8vw, 76px); }
  .hero-sub { margin-left: 0; margin-right: 0; }
}
@media (min-width: 1100px) and (max-height: 760px) {
  .hero-headline { font-size: clamp(40px, 4vw, 56px); margin-bottom: 22px; }
  .hero-sub { font-size: 16px; line-height: 1.7; margin-bottom: 28px; }
  .flow-card { padding-top: 8px; padding-bottom: 8px; }
  .flow-link { height: 20px; }
}

/* Tablet: text stays centered; the flow becomes a row of four below the CTA. */
@media (min-width: 769px) and (max-width: 1099px) {
  .hero-flow {
    display: flex;
    justify-content: center;
    margin-top: 32px;
  }
  .flow-node { display: flex; align-items: flex-start; }
  .flow-card {
    flex-direction: column;
    gap: 8px;
    width: 128px;
    min-height: 104px;
    padding: 12px 8px;
    text-align: center;
  }
  .flow-icon { width: 36px; height: 36px; }
  .flow-label { font-size: 13px; }
  .flow-link {
    width: 28px;
    height: 2px;
    margin: 30px 6px 0; /* card top padding 12 + icon radius 18 */
    background-image: linear-gradient(to right, var(--gray-border) 50%, transparent 50%);
    background-size: 6px 2px;
  }
  .flow-fill { transform-origin: left; transform: scaleX(var(--p)); }
  .flow-pulse { transform: translateX(calc(var(--p) * 100%)); }
  .flow-pulse::after { left: 0; top: 50%; }
}
@media (min-width: 769px) and (max-width: 1099px) and (max-height: 900px) {
  .hero-headline { font-size: clamp(40px, 5.6vw, 60px); margin-bottom: 22px; }
  .hero-sub { margin-bottom: 28px; }
  .hero-flow { margin-top: 24px; }
}

/* ─── SECTION 2: WHAT WE DO ──────────────────────────────────────────────────── */
#what-we-do {
  background: var(--white);
  min-height: unset;
  margin-top: 0;
}

#what-we-do .section-inner {
  padding-top: 56px;
  padding-bottom: 56px;
}

.s2-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 80px;
  align-items: start;
  padding-top: 0;
}

.s2-left {
  padding-top: 14px;
  position: sticky;
  top: calc(var(--nav-h) + 40px);
}

.s2-right .section-headline {
  margin-bottom: 32px;
}

.reveal-item {
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.85;
  color: var(--gray-text);
  margin-bottom: 24px;
  opacity: 0;
  clip-path: inset(100% 0 0 0);
}

.s2-p2 {
  font-weight: 500;
  font-size: clamp(17px, 1.6vw, 21px);
  color: var(--black);
  font-family: var(--font-display);
  font-style: italic;
  margin-bottom: 0;
}

.s2-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--gray-border);
}

.s2-stat {
  padding-right: 24px;
  opacity: 0;
  clip-path: inset(100% 0 0 0);
}

.s2-stat:not(:first-child) {
  padding-left: 24px;
  border-left: 1px solid var(--gray-border);
}

.s2-stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(30px, 3.2vw, 48px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--black);
  margin-bottom: 10px;
}

.s2-stat-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gray-mid);
  line-height: 1.65;
}

/* ─── SECTION 3: SERVICES ────────────────────────────────────────────────────── */
#services {
  background: var(--gray-light);
}

#services .section-inner {
  padding-top: 72px;
  padding-bottom: 72px;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.service-card {
  background: var(--white);
  border: 1px solid var(--gray-border);
  border-radius: 10px;
  overflow: hidden;
  transition:
    transform  0.38s var(--ease-out),
    box-shadow 0.38s var(--ease-out),
    border-color 0.38s ease;
  opacity: 0;
  clip-path: inset(100% 0 0 0);
  cursor: default;
}

.service-card:hover {
  transform: translateY(-14px);
  box-shadow:
    0 6px 0 rgba(10, 92, 54, 0.10),      /* emerald glow directly under card */
    0 24px 56px rgba(10, 92, 54, 0.13),  /* soft emerald ambient */
    0 32px 64px rgba(0, 0, 0, 0.10);     /* dark depth shadow */
  border-color: rgba(10, 92, 54, 0.28);
}

.card-top-border {
  height: 3px;
  background: var(--emerald);
}

.card-body {
  padding: 28px 28px 32px;
}

.card-icon {
  color: var(--emerald);
  margin-bottom: 22px;
  opacity: 0.8;
}

.card-body h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 14px;
  line-height: 1.25;
}

.card-body p {
  font-size: 15px;
  line-height: 1.78;
  color: var(--gray-text);
  margin-bottom: 14px;
}

.card-features {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.card-features li {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--gray-text);
  padding-left: 16px;
  position: relative;
}

.card-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--emerald);
  opacity: 0.55;
}

.card-price {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--emerald);
  background: rgba(10, 92, 54, 0.07);
  padding: 6px 14px;
  border-radius: 4px;
}

/* Audit card's "includes a website" line: sits directly under the price
   pill, darker than .card-guarantee so the two read as separate lines. */
.card-includes {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--black);
}

/* Small guarantee subtext for a specific tier card — no background pill of
   its own, so it doesn't compete visually with .card-price above it. */
.card-guarantee {
  display: block;
  margin-top: 10px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--emerald);
}

/* Short desktop viewports: header + cards overflowed the fixed 100vh snap
   section, and flex-centering pushed the label up under the nav. Reserve
   room for the nav on top and tighten spacing so everything fits. */
@media (min-width: 769px) and (max-height: 820px) {
  #services .section-inner { padding-top: 96px; padding-bottom: 24px; }
  #services .label-tag { margin-bottom: 14px; }
  #services .section-headline { font-size: clamp(34px, 4vw, 48px); margin-bottom: 24px; }
  #services .card-body { padding: 22px 24px 24px; }
  #services .card-icon { margin-bottom: 14px; }
}

/* Tablet portrait (e.g. iPad 820×1180): cards stack to one column above the
   mobile breakpoint, so the snap section still clips them. Tighten spacing
   and pull each icon inline beside its title. */
@media (min-width: 769px) and (max-width: 900px) {
  #services .section-inner { padding-top: 96px; padding-bottom: 24px; }
  #services .section-headline { margin-bottom: 24px; }
  #services .cards-grid { gap: 14px; }
  #services .card-body { padding: 22px 24px 24px; }
  #services .card-icon { float: left; margin: 0 12px 0 0; line-height: 0; }
}

/* ─── SECTION 4: WHY US ───────────────────────────────────────────────────────── */
#why {
  background: var(--white);
}

.why-points {
  display: flex;
  flex-direction: column;
  margin-top: 8px;
}

.why-point {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 44px;
  padding: 44px 0;
  border-bottom: 1px solid var(--gray-border);
  opacity: 0;
  clip-path: inset(100% 0 0 0);
  transition: background 0.3s ease;
}

.why-point:first-child {
  border-top: 1px solid var(--gray-border);
}

.why-point:last-child {
  border-bottom: 1px solid var(--gray-border);
}

.why-num {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 700;
  color: var(--emerald);
  line-height: 1;
  padding-top: 4px;
  opacity: 0.22;
  transition: opacity 0.3s ease;
}

.why-point:hover .why-num {
  opacity: 1;
}

.why-text h3 {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 700;
  color: var(--black);
  margin-bottom: 12px;
  line-height: 1.2;
}

.why-text p {
  font-size: 16px;
  line-height: 1.82;
  color: var(--gray-text);
  max-width: 580px;
}

/* ─── SECTION 5: HOW IT WORKS ───────────────────────────────────────────────────── */
#how-it-works {
  background: var(--gray-light);
}

#how-it-works .section-inner {
  padding-top: 72px;
  padding-bottom: 72px;
}

.process-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 64px;
  margin-top: 52px;
  border-top: 1px solid rgba(10, 92, 54, 0.28);
  padding-top: 48px;
}

.process-step {
  opacity: 0;
  clip-path: inset(100% 0 0 0);
}

.ps-num {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--emerald);
  margin-bottom: 20px;
}

.ps-title {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 700;
  color: var(--black);
  margin-bottom: 14px;
  line-height: 1.2;
}

.ps-body {
  font-size: 15px;
  line-height: 1.78;
  color: var(--gray-text);
}

/* ─── SECTION 6: PROOF / CASE STUDY ──────────────────────────────────────────── */
#proof {
  background: var(--white);
  min-height: unset;
}

#proof .section-inner {
  padding-top: 56px;
  padding-bottom: 56px;
}

/* This headline is longer than the other sections' (no manual <br> break),
   so it wraps to two lines at the default clamp(34px,4.8vw,62px) scale and
   pushes the section well past one viewport. Scaled down to fit one line
   at typical widths, matching how services.html's FAQ headline was
   similarly scaled down for the same reason. */
.s6-headline {
  font-size: clamp(28px, 3.6vw, 44px);
}

.s6-cta {
  margin-top: 4px;
  opacity: 0;
  clip-path: inset(100% 0 0 0);
}

/* ─── SECTION 7: CLOSING CTA ──────────────────────────────────────────────────── */
#closing-cta {
  background: var(--near-black);
  position: relative;
  padding-bottom: 100px;
}
#closing-cta #footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

#about-mission {
  padding-top: 80px;
  padding-bottom: 80px;
}

.cta-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(10, 92, 54, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 92, 54, 0.06) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
  z-index: 0;
}

.cta-inner {
  text-align: center;
  max-width: 860px;
  margin: 0 auto;
  padding-top: 48px;
  padding-bottom: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cta-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--emerald);
  margin-bottom: 24px;
  opacity: 0;
  clip-path: inset(100% 0 0 0);
}

.cta-closing-hl {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.8vw, 40px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: 24px;
  opacity: 0;
  clip-path: inset(100% 0 0 0);
}

.cta-headline {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.8vw, 54px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.5px;
  color: var(--white);
  margin-bottom: 28px;
  opacity: 0;
  transform: translateY(36px);
}

.cta-body {
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.68);
  margin-bottom: 36px;
  max-width: 540px;
  opacity: 0;
  clip-path: inset(100% 0 0 0);
}

.cta-btn {
  opacity: 0;
  clip-path: inset(100% 0 0 0);
}

/* Light-background variant of the dark closing-CTA treatment — used on
   services.html, where the closing CTA sits on a light section instead of
   #closing-cta's dark background. Replaces inline style overrides that
   previously duplicated this on the .cta-headline/.cta-body elements. */
.cta-light .cta-headline {
  color: var(--black);
  margin-bottom: 24px;
}
.cta-light .cta-body {
  color: var(--gray-text);
  max-width: 520px;
  margin: 0 auto 40px;
}

/* ─── FOOTER ──────────────────────────────────────────────────────────────────── */
#footer {
  background: var(--near-black);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 36px var(--section-pad-x);
}

.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.footer-logo {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.80);
  letter-spacing: -0.1px;
}

.footer-tagline {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 32px;
}

.footer-links a {
  text-decoration: none;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.62);
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: rgba(255, 255, 255, 0.80);
}

.footer-links span {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
}

/* ─── MARQUEE TICKER ─────────────────────────────────────────────────────────── */
.marquee-wrap {
  position: absolute;
  bottom: 64px;
  left: 0; right: 0;
  overflow: hidden;
  border-top: 1px solid rgba(10, 92, 54, 0.15);
  border-bottom: 1px solid rgba(10, 92, 54, 0.15);
  padding: 10px 0;
}
.marquee-track {
  display: flex;
  white-space: nowrap;
  width: max-content;
  animation: marquee-scroll 140s linear infinite; /* 5× the old distance at the same ~29px/s */
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--emerald);
}
.marquee-track span { padding: 0 14px; }
.marquee-sep { opacity: 0.30; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ─── RESPONSIVE ─────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-cta { margin-left: auto; }

  .s2-layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .s2-left { position: static; }

  .cards-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .process-steps {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 40px;
  }

  .why-point {
    grid-template-columns: 60px 1fr;
    gap: 28px;
  }

  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .footer-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

@media (max-width: 600px) {
  .section-inner { padding-top: 100px; padding-bottom: 100px; }
  .cta-inner { padding-top: 100px; padding-bottom: 100px; }

  .why-point {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .why-num { font-size: 32px; }
}

/* ─── CUSTOM CURSOR ──────────────────────────────────────────────────────────── */
/* Scoped to html.js-cursor-active, which main.js adds only after the custom
   cursor has actually initialized — if the script fails silently, desktop
   users keep their native cursor instead of losing it entirely. */
@media (hover: hover) and (pointer: fine) {
  html.js-cursor-active * { cursor: none !important; }
}

/* ─── FOCUS STYLES ───────────────────────────────────────────────────────────── */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--emerald);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Suppresses the ring for exactly one programmatic focus() call (e.g. the
   mobile menu moving focus to its first link on open) — see
   focusWithoutOutline() in main.js. Real keyboard nav removes this class
   on the very next keydown, so :focus-visible works normally afterward. */
html.js-focus-no-outline a:focus-visible,
html.js-focus-no-outline button:focus-visible {
  outline: none;
}

#cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 8px; height: 8px;
  background: var(--emerald);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  will-change: transform;
}

#cursor-ring {
  position: fixed;
  top: 0; left: 0;
  width: 40px; height: 40px;
  border: 1.5px solid var(--emerald);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
}

.cursor-label {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 600;
  color: var(--white);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
}

/* ─── SNAP SECTIONS ─────────────────────────────────────────────────────────── */
.snap-section {
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
  margin: 0;
  padding-top: 0;
}

/* ─── PAGE TRANSITION OVERLAY ────────────────────────────────────────────────── */
#page-overlay {
  position: fixed;
  inset: 0;
  background: var(--emerald);
  z-index: 1000;
  transform: translateY(100%);
  pointer-events: none;
  will-change: transform;
}
/* On Netlify (fast CDN), the page renders before GSAP runs. This class is set by an
   inline <head> script so the overlay covers the page from the very first paint. */
html.page-entering #page-overlay {
  transform: translateY(0%) !important;
  pointer-events: all;
  /* Pure-CSS failsafe: if GSAP fails to load/run for any reason, main.js never
     removes html.page-entering, so this fades the overlay out after ~2.5s
     regardless of JS. Animates opacity (not transform) — transform above is
     !important, and a CSS animation can never override an !important value
     on the same property, so opacity is the only lever available here. */
  animation: page-overlay-failsafe 0.01s ease-in 2.5s forwards;
}
@keyframes page-overlay-failsafe {
  to { opacity: 0; pointer-events: none; }
}

/* ─── SKIP LINK ──────────────────────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -40px;
  left: 8px;
  z-index: 10001; /* above #intro-overlay (10000) and everything else */
  background: var(--emerald);
  color: var(--white);
  padding: 10px 18px;
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 8px;
}

/* ─── FILM GRAIN OVERLAY ─────────────────────────────────────────────────────── */
#grain-overlay {
  position: fixed;
  inset: 0;
  z-index: 9996;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay; /* overlay formula near-blacks → ≈0 effect; light backgrounds → subtle texture */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  animation: grain 0.8s steps(1) infinite;
}
@keyframes grain {
  0%   { transform: translate(0, 0);       }
  14%  { transform: translate(-15%, -5%);  }
  28%  { transform: translate(10%, 10%);   }
  42%  { transform: translate(-5%, 15%);   }
  57%  { transform: translate(12%, -8%);   }
  71%  { transform: translate(-15%, 10%);  }
  85%  { transform: translate(5%, -12%);   }
}

/* ─── HAMBURGER BUTTON ───────────────────────────────────────────────────────── */
#hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin-left: 16px;
  z-index: 1001;
  flex-shrink: 0;
}

.hamburger-bar {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--black);
  border-radius: 1px;
  transition: transform 0.32s var(--ease-out), opacity 0.25s ease;
}

#nav.on-dark #hamburger .hamburger-bar {
  background: rgba(255, 255, 255, 0.88);
}

#hamburger[aria-expanded="true"] .hamburger-bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
#hamburger[aria-expanded="true"] .hamburger-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
#hamburger[aria-expanded="true"] .hamburger-bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* ─── MOBILE MENU OVERLAY ────────────────────────────────────────────────────── */
#mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 980;
  background: var(--near-black);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.38s var(--ease-out);
}

#mobile-menu.open {
  opacity: 1;
  pointer-events: all;
}

#mobile-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 12px;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1;
  transition: color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

#mobile-close:hover { color: var(--white); }

.mobile-nav-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin-bottom: 48px;
  width: 100%;
  padding: 0 40px;
  text-align: center;
}

.mobile-nav-links li {
  width: 100%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  padding: 18px 0;
}

.mobile-nav-links li:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.mobile-nav-links a {
  font-family: var(--font-display);
  font-size: clamp(28px, 8vw, 44px);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  letter-spacing: -0.5px;
  display: block;
  transition: color 0.2s ease;
}

.mobile-nav-links a:hover,
.mobile-nav-links a:active { color: var(--emerald-on-dark); }

#closing-cta .cta-eyebrow { color: var(--emerald-on-dark); }

/* Visually hidden, still read by screen readers. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─── BOOKING DIALOG (Calendly) ──────────────────────────────────────────────── */
/* Our own dialog hosting Calendly's official inline widget (main.js section
   22). z-index sits above everything on the site: skip-link 10001, intro
   overlay 10000, cursor 9999/9998, grain 9996, mobile menu 980, nav 900. */
.booking-dialog {
  position: fixed;
  inset: 0;
  z-index: 10002;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.booking-dialog.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease, visibility 0s;
}
/* touch-action (a CSS property, not a listener) stops scroll gestures that
   start on the backdrop from reaching the page behind. */
.booking-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 12, 12, 0.55);
  touch-action: none;
}
.booking-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1000px, 100%);
  height: min(760px, 100%);
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
  transform: scale(0.97);
  transition: transform 0.25s var(--ease-out);
}
.booking-dialog.is-open .booking-panel { transform: none; }
/* Header bar keeps the close button clear of Calendly's own content
   (including its top-right "Powered by" ribbon). */
.booking-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 52px;
  padding: 0 4px;
  border-bottom: 1px solid var(--gray-border);
  flex-shrink: 0;
}
.booking-close {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  border-radius: 50%;
  color: var(--near-black);
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.booking-close:hover { color: var(--emerald); background: var(--gray-light); }
.booking-close .icon { width: 20px; height: 20px; }
/* isolation: Calendly's spinner uses z-index:-1, so this keeps it painting
   above the panel background instead of behind it. */
.booking-embed {
  position: relative;
  flex: 1;
  min-height: 0;
  isolation: isolate;
}
.booking-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px;
  text-align: center;
  font-size: 16px;
  color: var(--gray-text);
}

/* While open: custom cursor hidden (main.js also drops js-cursor-active so
   the native cursor returns), and the page behind locked by class only. */
html.booking-open #cursor-dot,
html.booking-open #cursor-ring { visibility: hidden !important; }
body.booking-open,
body.booking-open #scroll-container { overflow: hidden !important; }

/* ─── MOBILE OVERRIDES (@media max-width: 768px) ────────────────────────────── */
@media (max-width: 768px) {

  /* 1. Re-enable normal document scroll */
  html {
    overflow: auto !important;
    height: auto !important;
    touch-action: pan-y;
  }
  body {
    overflow: auto !important;
    height: auto !important;
    touch-action: pan-y;
  }

  /* 2. Disable snap container — becomes static block */
  #scroll-container {
    position: static !important;
    height: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: none !important;
    scroll-behavior: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* 3. Disable snap behaviour on all sections */
  .snap-section {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    scroll-snap-align: unset !important;
    scroll-snap-stop: unset !important;
    overflow: visible !important;
  }

  /* 4. Section min-height — let content decide */
  .section {
    min-height: auto !important;
  }

  /* 5. Hero — dvh alone handles mobile browser chrome; no JS --vh needed here.
     (A --vh-based override previously ran after this and re-fired on every
     resize, including the iOS address-bar collapse mid-scroll, causing the
     hero to reflow and freeze momentum scrolling.) */
  /* Height is auto with a 100dvh floor (was a fixed 100dvh) so the automation
     flow under the CTA can extend the hero on short phones instead of
     pushing the headline up under the nav. */
  #hero {
    height: auto !important;
    min-height: max(500px, 100dvh) !important; /* beats .snap-section's min-height: auto !important (item 3) */
    max-height: none !important;
    padding-top: calc(var(--nav-h) + 16px);
    padding-bottom: 24px; /* marquee hidden on mobile (item 26 below) — base 130px is now dead space */
  }

  /* 6. Hide custom cursor on touch */
  #cursor-dot,
  #cursor-ring {
    display: none !important;
  }

  /* 7. Nav — show hamburger, hide desktop CTA */
  #hamburger {
    display: flex !important;
  }
  .nav-cta {
    display: none !important;
  }

  /* 7b. Nav blur — reduced on mobile only. blur(24px) is a meaningful
     repaint cost on every scroll frame on mid-tier Android devices;
     desktop keeps the stronger blur(24px) since that cost isn't an issue
     there. */
  #nav.scrolled,
  #nav.on-dark {
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }

  /* 8. Section ghost numbers — too large for mobile */
  .section-number {
    display: none !important;
  }

  /* 9. Section inner — reduce padding to eliminate dead space */
  .section-inner {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  /* 10. Stats — stack vertically, full width, clean borders */
  .s2-stats {
    grid-template-columns: 1fr !important;
    gap: 0;
    margin-top: 24px;
  }
  .s2-stat {
    padding: 16px 0 !important;
    border-bottom: 1px solid var(--gray-border);
    border-left: none !important;
  }
  .s2-stat:first-child {
    border-top: 1px solid var(--gray-border);
  }
  .s2-stat:not(:first-child) {
    padding-left: 0 !important;
    border-left: none !important;
  }
  .s2-stat-num {
    font-size: clamp(28px, 8vw, 40px) !important;
    margin-bottom: 4px;
  }
  .s2-stat-label {
    letter-spacing: 1.5px !important;
    line-height: 1.5;
  }

  /* 11. Why Us — single column */
  .why-point {
    grid-template-columns: 1fr !important;
    gap: 10px;
    padding: 24px 0;
  }

  /* 12. Process steps — stack */
  .process-steps {
    grid-template-columns: 1fr !important;
    gap: 36px;
    margin-top: 28px;
  }

  /* 13. CTA inner */
  .cta-inner {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  /* 14. Hero content */
  .hero-content {
    padding: 0 20px;
  }

  /* 15. About: header two-col → single col; add nav clearance to first content */
  .about-header-inner {
    grid-template-columns: 1fr !important;
    gap: 28px;
    padding-top: calc(var(--nav-h) + 20px) !important;
  }

  /* 16. About: story two-col grid → single col; reduce top padding */
  #about-story.snap-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px;
    padding: 40px var(--section-pad-x) !important;
  }

  /* 17. About: headshot reasonable height */
  .headshot-img {
    max-height: 220px !important;
  }

  /* 17b. Joseph's photo crops too high at this mobile height with the
     shared "center top" position (about.html:134) — his face sits lower
     in the source image than Karson's, so the crop cut off everything
     below his upper lip. Scoped to his container only; Karson's headshot
     is untouched. */
  #about-headshot-joseph .headshot-img {
    object-position: center 30%;
  }

  /* 18. Services: tier two-col → single col; reduce padding */
  .tier-inner {
    grid-template-columns: 1fr !important;
    gap: 28px;
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }

  /* 19. Services/About/Contact: restore footer to flow (was position: absolute) */
  #services-cta #footer,
  #about-cta-section #footer,
  #contact-form-section #footer {
    position: static !important;
  }
  #services-cta,
  #about-cta-section,
  #contact-form-section {
    padding-bottom: 0 !important;
  }

  /* 20. Services page header — add nav clearance, reduce bottom padding */
  .page-header {
    padding-top: calc(var(--nav-h) + 20px) !important;
    padding-bottom: 32px !important;
  }

  /* 21. Footer */
  .footer-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
  }
  .footer-links {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  /* 22. Scroll lock when mobile menu is open */
  body.menu-open {
    overflow: hidden !important;
  }

  /* 23. Hamburger bars turn white when overlaid on dark menu */
  #hamburger[aria-expanded="true"] .hamburger-bar {
    background: rgba(255, 255, 255, 0.85);
  }

  /* 24. About mission section inner — reduce padding */
  .mission-inner {
    padding: 0 var(--section-pad-x) !important;
  }

  /* 25. Services CTA — switch to block so footer stretches full width */
  #services-cta {
    display: block !important;
    padding: 40px var(--section-pad-x) 0 !important;
    text-align: center;
  }

  /* 26. About CTA inner — reduce top padding */
  #about-cta-section .about-cta-inner {
    padding-top: 40px !important;
    padding-bottom: 36px !important;
  }

  /* ── FOOTER OVERLAP FIX ───────────────────────────────────────────────────── */
  /* CTA sections embed footer inside their flex column. Switching to display:block
     lets the footer stretch to full width naturally (flex cross-axis was centering
     and collapsing it to content width). */
  #about-cta-section,
  #contact-form-section,
  #closing-cta {
    display: block !important;
    padding-bottom: 0 !important;
  }

  /* Footer inside these sections: flow naturally, full width, small breathing room */
  #services-cta #footer,
  #about-cta-section #footer,
  #contact-form-section #footer,
  #closing-cta #footer {
    position: static !important;
    width: 100%;
    margin-top: 32px;
  }

  /* Services CTA footer: break out of section's horizontal padding so footer spans full viewport */
  #services-cta #footer {
    margin-left: calc(-1 * var(--section-pad-x));
    margin-right: calc(-1 * var(--section-pad-x));
    width: calc(100% + 2 * var(--section-pad-x));
  }

  /* About mission: switch to block so .mission-inner stretches full width */
  #about-mission {
    display: block !important;
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }
  #about-mission .mission-inner {
    width: 100%;
  }

  /* ── DEAD SPACE FIX ───────────────────────────────────────────────────────── */
  /* Section headlines have opacity:0 + translateX(-50px) as GSAP initial states.
     SplitText (Club GSAP) is unavailable via CDN, so splitAndMask() returns []
     and previously no ScrollTrigger was created — leaving headlines invisible
     but still in the document flow, creating ~120px of phantom empty space.
     The JS fix in section 8 now adds a fallback ScrollTrigger; this CSS rule
     is the safety net so the headline is never permanently invisible on mobile. */
  .section-headline {
    opacity: 1 !important;
    transform: none !important;
  }

  /* s2-layout: collapse row gap so "WHAT WE DO" label is ≤24px from headline */
  .s2-layout {
    gap: 0 !important;
  }

  /* Label tag: slightly tighten bottom margin on mobile */
  .label-tag {
    margin-bottom: 12px !important;
  }

  /* Marquee: hide on mobile — hero content takes priority */
  .marquee-wrap { display: none !important; }

  /* Char reveal safety net: show chars at natural position if GSAP doesn't fire */
  .char-inner { transform: none !important; }

  /* 27. Grain overlay disabled on mobile — its infinite animation loop adds
     unnecessary repaint cost during scroll, contributing to the iOS scroll freeze. */
  #grain-overlay {
    display: none !important;
  }

  /* 28. Hero background-position animations (breathing gradient + drifting
     grid) repaint continuously rather than compositing efficiently — same
     category of cost as the grain overlay above. Disabled on mobile. */
  #hero {
    animation: none !important;
  }
  .hero-bg-grid {
    animation: none !important;
  }

  /* 29. Hero automation flow — simplified vertical list below the CTA:
     icon + label only, no card chrome. Plays once then rests (main.js). */
  .hero-flow {
    width: max-content;
    max-width: 100%;
    margin: 32px auto 0;
    text-align: left;
  }
  .flow-card {
    border: 0;
    padding: 0;
    background: none;
    gap: 12px;
  }
  .flow-icon { width: 32px; height: 32px; }
  .flow-icon .icon { width: 16px; height: 16px; }
  .flow-link { height: 14px; margin-left: 15px; }

  /* 30. Services included-website mockup — a slightly larger phone and
     tighter bezels at phone widths. Scoped under the
     section id so it outranks services.html's inline <style>, which loads
     after this file. */
  #tier-01-site .site-mockup { padding-right: 12%; }
  #tier-01-site .laptop-screen { border-radius: 10px 10px 0 0; padding: 8px 8px 12px; }
  #tier-01-site .mockup-phone { width: 27%; border-radius: 16px; padding: 14px 5px 8px; }
  #tier-01-site .mockup-phone::before { top: 6px; height: 3px; }

  /* 31. Booking dialog — full screen on phones. On mobile the page scrolls on
     <html> (item 1 sets html overflow:auto), so the class lock covers it too. */
  .booking-dialog { padding: 0; }
  .booking-panel { width: 100%; height: 100%; border-radius: 0; }
  html.booking-open { overflow: hidden !important; }

  /* 32. 404 page — fill the screen (item 4 otherwise lets sections shrink to
     their content, leaving blank white under the message). */
  #not-found { min-height: 100dvh !important; }
}

/* ── HERO ANIMATION SCROLL LOCK ──────────────────────────────────────────────
   Applied via JS on mobile only while the hero entrance timeline runs.
   body.hero-animating specificity (0,1,1) beats the media query body (0,0,1)
   so this correctly overrides the mobile overflow:auto rule. */
body.hero-animating {
  overflow: hidden !important;
  touch-action: none !important;
}

/* ─── REDUCED MOTION ─────────────────────────────────────────────────────────── */
/* Covers CSS-driven animation/transitions site-wide (hero gradient/grid drift,
   marquee scroll, grain texture, hover transitions, etc). GSAP-driven motion is
   handled separately in JS — see the reveal() helper and prefersReducedMotion
   checks in main.js and the inline per-page scripts. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  #scroll-container {
    scroll-behavior: auto !important;
    scroll-snap-type: none !important;
  }
}