/* ============================================================
   THE CONTENT SURGEON — Global Stylesheet
   Palette: Warm cream / near-black / grey with subtle medical-red accent.
   Type:    Archivo Black (display) + Archivo (body) + Instrument Serif italic (accents)
   ============================================================ */

/* ---------- DESIGN TOKENS ---------- */
:root{
  --bg: #faf7f2;
  --bg-elev: #f3ede3;
  --ink: #0b0b0b;
  --ink-90: rgba(11,11,11,.9);
  --ink-70: rgba(11,11,11,.72);
  --ink-55: rgba(11,11,11,.62);
  --ink-30: rgba(11,11,11,.34);
  --line: rgba(11,11,11,.12);
  --line-strong: rgba(11,11,11,.22);
  --dark: #0b0b0b;
  --dark-2: #151515;
  --dark-ink: #f5efe4;
  --dark-ink-70: rgba(245,239,228,.7);
  --dark-ink-40: rgba(245,239,228,.4);
  --dark-line: rgba(245,239,228,.14);
  --accent: #c8342c;           /* medical red, used sparingly */
  --accent-soft: rgba(200,52,44,.10);

  --radius-sm: 6px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;

  --shadow-sm: 0 1px 2px rgba(11,11,11,.06), 0 2px 6px rgba(11,11,11,.04);
  --shadow: 0 6px 24px rgba(11,11,11,.08), 0 2px 6px rgba(11,11,11,.04);
  --shadow-lg: 0 20px 60px rgba(11,11,11,.15), 0 6px 18px rgba(11,11,11,.06);

  --container: 1240px;
  --gutter: clamp(20px, 4vw, 56px);

  --t-fast: 160ms cubic-bezier(.2,.7,.3,1);
  --t: 280ms cubic-bezier(.2,.7,.3,1);
  --t-slow: 520ms cubic-bezier(.2,.7,.3,1);

  --font-display: "Archivo Black", "Archivo", system-ui, sans-serif;
  --font-body: "Archivo", system-ui, sans-serif;
  --font-italic: "Instrument Serif", Georgia, serif;
}

/* ---------- RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}
img,svg{ display:block; max-width:100%; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; cursor: pointer; border:0; background: none; color: inherit; }
input,textarea,select{ font: inherit; color: inherit; }
summary{ cursor: pointer; list-style: none; }
summary::-webkit-details-marker{ display:none; }

/* ---------- TYPE PRIMITIVES ---------- */
h1,h2,h3,h4{ margin:0; font-family: var(--font-display); font-weight:900; letter-spacing:-.02em; line-height:1.02; color: var(--ink); }
h1{ font-size: clamp(44px, 8vw, 108px); }
h2{ font-size: clamp(34px, 5.2vw, 68px); }
h3{ font-size: clamp(20px, 2vw, 26px); letter-spacing:-.01em; }
h4{ font-size: 14px; text-transform: uppercase; letter-spacing:.14em; font-family: var(--font-body); font-weight: 700; }
p{ margin: 0 0 1em 0; color: var(--ink-70); }
em{ font-family: var(--font-italic); font-style: italic; font-weight: 400; letter-spacing: 0; color: inherit; }
strong{ font-weight:700; color: var(--ink); }

.container{
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.lg-br{ display:none; }
@media (min-width: 900px){
  .lg-br{ display:block; }
}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.55em;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .01em;
  line-height: 1;
  transition: transform var(--t-fast), background var(--t), color var(--t), box-shadow var(--t);
  white-space: nowrap;
  border: 1.5px solid transparent;
}
.btn span{ transition: transform var(--t-fast); }
.btn:hover span{ transform: translateX(3px); }
.btn--primary{ background: var(--ink); color: var(--bg); }
.btn--primary:hover{ background: var(--accent); }
.btn--ghost{ background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover{ background: var(--ink); color: var(--bg); }
.btn--ghost-light{ background: transparent; color: var(--dark-ink); border-color: var(--dark-ink-70); }
.btn--ghost-light:hover{ background: var(--dark-ink); color: var(--dark); }
.btn--xl{ padding: 18px 30px; font-size: 16px; }

/* ---------- NAV ---------- */
.nav{
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t), background var(--t);
}
.nav--scrolled{ border-bottom-color: var(--line); }
.nav__inner{
  display:flex; align-items:center; justify-content:space-between;
  height: 84px;
}
.nav__brand{ display: inline-flex; align-items: center; }
.nav__brand img{ height: 46px; width:auto; }
@media (min-width: 900px){
  .nav__brand img{ height: 52px; }
}
.nav__menu{
  display:none;
  gap: 32px;
}
.nav__menu a{
  font-weight: 600;
  font-size: 14px;
  color: var(--ink-70);
  letter-spacing: .01em;
  position: relative;
  padding: 6px 0;
}
.nav__menu a::after{
  content: "";
  position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1.5px; background: var(--ink);
  transition: right var(--t);
}
.nav__menu a:hover{ color: var(--ink); }
.nav__menu a:hover::after{ right: 0; }
.nav__cta{ display: none; }
.nav__mobile-cta{ display: none; }
.nav__contact{ display: none; }
@media (min-width: 900px){
  .nav__menu{ display:flex; }
  .nav__cta{ display: inline-flex; }
}

.nav__burger{ display:flex; flex-direction: column; gap: 4px; padding:10px; margin-right:-10px; }
.nav__burger span{ width: 22px; height: 2px; background: var(--ink); transition: transform var(--t); }
.nav__burger.is-open span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2){ opacity: 0; }
.nav__burger.is-open span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }
@media (min-width: 900px){ .nav__burger{ display:none; } }

.nav__menu.is-open{
  display:flex;
  position: absolute; top: 84px; left: 0; right: 0;
  flex-direction: column;
  padding: 20px var(--gutter) 32px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  gap: 14px;
}

/* Scroll progress bar — below nav */
.nav__progress{
  position: absolute; left: 0; bottom: -1px; height: 2px;
  background: var(--accent);
  width: 0%;
  transition: width .08s linear;
  box-shadow: 0 0 8px rgba(200,52,44,.45);
  pointer-events: none;
  z-index: 2;
}

/* Active nav link (scroll-spy) */
.nav__menu a.is-active{ color: var(--ink); font-weight: 700; }
.nav__menu a.is-active::after{ right: 0; background: var(--accent); height: 2px; }

/* ============================================================
   TOC RAIL — section timeline indicator.
   Lives inside <header class="nav"> as an in-flow child, so on mobile it
   extends the sticky nav by ~28px with a horizontal dot strip. On
   desktop CSS lifts it out to position:fixed on the right edge as a
   vertical rail with hover labels.

   Dot/line geometry (desktop):
     rail padding-right: 8px
     dot width: 10px, aligned flex-end => dot center = 8 + 5 = 13px from rail-right
     line width: 1.5px => line right = 13 - 0.75 = 12.25px so line CENTER
     sits exactly on dot center. Sub-pixel value is intentional.
   ============================================================ */
.toc-rail{
  display: flex;
  z-index: 45;
  pointer-events: none;
}

/* ---------- DESKTOP (>=1200px): fixed vertical rail on the right ---------- */
@media (min-width: 1200px){
  .toc-rail{
    position: fixed;
    /* 50vh (not 50%) because the sticky nav's backdrop-filter makes it the
       containing block for fixed descendants — a % would resolve to the
       nav height (~85px) instead of the viewport. vh anchors to the viewport. */
    top: 50vh;
    right: 18px;
    transform: translateY(-50%);
    flex-direction: column;
    gap: 14px;
    padding: 10px 8px;
  }
  .toc-rail::before{
    content: "";
    position: absolute;
    right: 12.25px;       /* centered on dot center (13px) for 1.5px line */
    top: 22px;            /* aligned with first dot's center (label line-height makes items ~22px tall) */
    bottom: 22px;         /* aligned with last dot's center */
    width: 1.5px;
    background: var(--line);
    pointer-events: none;
    z-index: 0;
  }
  .toc-rail__item{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    text-decoration: none;
    pointer-events: auto;
    padding: 0;
  }
  .toc-rail__label{
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-70);
    white-space: nowrap;
    opacity: 0;
    transform: translateX(6px);
    transition: opacity .25s cubic-bezier(.3,.7,.3,1), transform .25s cubic-bezier(.3,.7,.3,1);
    padding: 3px 9px;
    background: rgba(250,247,242,.85);
    border: 1px solid var(--line);
    border-radius: 999px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .toc-rail:hover .toc-rail__label,
  .toc-rail__item.is-active .toc-rail__label{
    opacity: 1;
    transform: translateX(0);
  }
}

/* ---------- MOBILE / TABLET (<1200px): horizontal dot strip inside nav ---------- */
@media (max-width: 1199px){
  .toc-rail{
    position: relative;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0;
    padding: 6px 14px 10px;
    width: 100%;
  }
  .toc-rail__item{
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    flex: 0 0 auto;
    width: 28px;          /* generous tap target */
    height: 22px;
    padding: 0;
  }
  .toc-rail__label{ display: none; }
  /* Mobile: no connecting line — dots alone read as a progress strip,
     avoids the alignment work of centering a line on dynamically-
     positioned dots across phone widths. */
  .toc-rail::before{ display: none; }
}

/* ---------- DOT STYLES (shared) ---------- */
.toc-rail__dot{
  position: relative;     /* create stacking context so z-index below works */
  z-index: 1;             /* paint on top of the connecting line */
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--ink-30);
  background: var(--bg);  /* fully opaque — covers line passing under */
  flex-shrink: 0;
  transition: transform .25s cubic-bezier(.3,.7,.3,1), background .25s, border-color .25s, box-shadow .25s;
}
.toc-rail__item.is-past .toc-rail__dot{
  background: var(--ink-30);
  border-color: var(--ink-30);
}
.toc-rail__item.is-active .toc-rail__dot{
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.4);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.toc-rail__item:hover .toc-rail__dot{
  border-color: var(--accent);
  transform: scale(1.25);
}

/* Hide the rail while the mobile menu is open (prevents visual conflict) */
body.nav-open .toc-rail{ display: none; }

/* ---------- MOBILE TIP: "you are on" section label pill ----------
   Positioned ABOVE the rail (inside the nav area) and always horizontally
   centered. Previously it sat below the rail, overlaying page content
   during scroll which was visually obstructive. */
.toc-rail__tip{
  position: absolute;
  bottom: calc(100% + 4px);
  /* Anchor to the right side of the nav — free horizontal space between
     logo (left) and burger (right). Avoids overlapping either across all
     mobile widths. Burger is ~45px wide at right edge, so 58px offset
     gives ~13px breathing room from it. */
  left: auto;
  right: 58px;
  padding: 3px 9px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(250,247,242,.92);
  border: 1px solid var(--line);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(0, 4px);
  transition: opacity .2s ease, transform .2s ease;
  box-shadow: 0 3px 12px rgba(11,11,11,.08);
  z-index: 5;
}
.toc-rail__tip.is-visible{
  opacity: 1;
  transform: translate(0, 0);
}
/* Desktop has per-dot hover labels already — hide this mobile tip there */
@media (min-width: 1200px){
  .toc-rail__tip{ display: none !important; }
}

/* ---------- HERO ---------- */
.hero{
  position: relative;
  padding: clamp(56px, 10vw, 128px) 0 clamp(48px, 8vw, 96px);
  overflow: hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:auto 0 0 0; height: 1px; background: var(--line);
  z-index: 2;
}
.hero__inner, .hero__scroll{ position: relative; z-index: 1; }
.hero__inner{
  text-align: left;
  max-width: 1400px;
}

.hero__grid{
  display: grid;
  gap: clamp(32px, 5vw, 72px);
  grid-template-columns: 1fr;
  align-items: center;
  margin-bottom: clamp(56px, 9vw, 96px);
}
@media (min-width: 1024px){
  .hero__grid{
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  }
}

.hero__copy{ min-width: 0; }

.hero__visual{
  margin: 0;
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  box-shadow: 0 40px 80px rgba(11,11,11,.10), 0 10px 24px rgba(11,11,11,.06);
  transform: translateY(0) rotate(0deg);
  transition: transform .6s cubic-bezier(.2,.7,.3,1), box-shadow .6s cubic-bezier(.2,.7,.3,1);
}
.hero__visual:hover{
  transform: translateY(-4px) rotate(-.3deg);
  box-shadow: 0 60px 120px rgba(11,11,11,.14), 0 14px 30px rgba(11,11,11,.08);
}
.hero__visual img{
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16/10;
  object-fit: cover;
  object-position: center top;
  transform: scale(1.02);
  transition: transform 8s linear;
}
.hero__visual:hover img{ transform: scale(1.06); }
.hero__visual-cap{
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: rgba(11,11,11,.82);
  color: var(--dark-ink);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
@media (max-width: 760px){
  .hero__visual-cap{
    position: static;
    align-self: flex-start;
    margin: 12px 14px 14px;
    background: transparent;
    color: var(--ink-70);
    border-color: var(--line);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .hero__visual-cap .dot,
  .hero__visual-cap .dot--sm{
    background: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
  }
}
.dot--sm{ width: 6px; height: 6px; }
.hero__eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-70);
  margin-bottom: 28px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-elev);
}
.dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
  display:inline-block;
}
.hero__headline{
  font-size: clamp(48px, 8vw, 128px);
  line-height: .92;
  margin-bottom: 28px;
  letter-spacing: -.035em;
}
.hero__br{ display:none; }
@media (min-width: 900px){ .hero__br{ display:inline; } }

.hero__sub{
  max-width: 720px;
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.45;
  color: var(--ink-70);
  margin-bottom: 40px;
}
.hero__cta{ display:flex; flex-wrap: wrap; gap: 12px; }

.hero__proof{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 48px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}
@media (min-width: 700px){ .hero__proof{ grid-template-columns: repeat(4, 1fr); } }

/* ---------- MOBILE HERO REIMAGINED (<=760px) ----------
   Image-led opener (7 surgeons in scrubs = instant social proof),
   eyebrow pill removed (redundant with the nav tagline), bolder
   headline with accent-red italic "first." for the punchline.
   Placed after base .hero__* rules so specificity/cascade works. */
@media (max-width: 760px){
  .hero__eyebrow{ display: none; }

  .hero__grid{
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-bottom: 56px;
  }
  .hero__visual{ order: 1; }
  .hero__copy{ order: 2; }

  .hero__visual{
    box-shadow: 0 22px 56px rgba(11,11,11,.18), 0 6px 18px rgba(11,11,11,.09);
  }

  .hero__headline{
    font-size: clamp(54px, 14vw, 72px);
    line-height: 1;
    letter-spacing: -.04em;
    margin-bottom: 28px;
  }
  .hero__headline em{
    color: var(--accent);
    line-height: 1;
  }

  .hero__sub{
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 28px;
  }
}

.proof{ min-width: 0; }
.proof__num{
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 60px);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--ink);
  display:flex; align-items:baseline; gap: 2px;
}
.proof__num span{
  font-size: .55em; color: var(--ink-70);
}
.proof__label{
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink-55);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 600;
}

.hero__scroll{
  position: absolute;
  right: var(--gutter);
  bottom: 24px;
  display: none;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-55);
}
.hero__scroll-line{
  width: 1px; height: 60px; background: var(--ink-30); position: relative; overflow: hidden;
}
.hero__scroll-line::after{
  content:""; position:absolute; top: -30px; left:0; right:0; height: 30px; background: var(--ink);
  animation: scrollLine 2.4s infinite cubic-bezier(.6,.1,.3,.9);
}
@keyframes scrollLine{
  0%{ top: -30px; } 100%{ top: 90px; }
}
@media (min-width: 1100px){ .hero__scroll{ display:flex; } }

/* ---------- MARQUEE ---------- */
.marquee-wrap{ padding: 0; }
.marquee__caption{
  padding: 28px 0 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}
.marquee__caption-label{
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  font-weight: 700;
  color: var(--ink);
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-elev);
  display: inline-flex; align-items: center;
}
.marquee__caption-label::before{
  content:""; width: 6px; height: 6px; background: var(--accent); border-radius: 50%;
  margin-right: 10px;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.marquee__caption-note{
  font-size: 14px;
  color: var(--ink-55);
  font-style: italic;
}
.marquee{
  background: var(--dark);
  color: var(--dark-ink);
  padding: 22px 0;
  overflow: hidden;
  border-top: 1px solid var(--dark-line);
  border-bottom: 1px solid var(--dark-line);
}
.marquee__track{
  display: inline-flex; align-items:center; gap: 32px;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 34px);
  letter-spacing: -.01em;
  animation: marquee 40s linear infinite;
  padding-left: 32px;
}
.marquee__track .mk-dot{ color: var(--accent); font-size: 1.2em; line-height: 0; }
.marquee__track span{ flex-shrink: 0; }
@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* ---------- SECTION COMMON ---------- */
section{ padding: clamp(72px, 10vw, 140px) 0; }
.section-head{ max-width: 920px; margin-bottom: clamp(40px, 6vw, 72px); }
.section-head__eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase; font-weight: 700;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-70);
  margin-bottom: 22px;
  background: var(--bg-elev);
}
.section-head__eyebrow.light{
  color: var(--dark-ink-70);
  border-color: var(--dark-line);
  background: rgba(255,255,255,.04);
}
.section-head__eyebrow::before{
  content:""; width:6px; height:6px; background: var(--accent); border-radius: 50%;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.section-head__title{ margin-bottom: 20px; }
.section-head__intro{ font-size: clamp(16px, 1.4vw, 20px); max-width: 720px; color: var(--ink-70); }
.section-head__intro.light{ color: var(--dark-ink-70); }
.section-head--light .section-head__title{ color: var(--dark-ink); }
.section-head--light .section-head__intro{ color: var(--dark-ink-70); }

/* ---------- PROBLEM ---------- */
.problem{ background: var(--bg); overflow-x: clip; }
.pain-grid{
  display:grid; gap: clamp(16px, 2vw, 24px);
  grid-template-columns: 1fr;
}
@media (min-width: 700px){ .pain-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px){ .pain-grid{ grid-template-columns: repeat(4, 1fr); } }

.pain{
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.pain:hover{ transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.pain__num{
  font-family: var(--font-display);
  font-size: 16px; letter-spacing: .06em; color: var(--accent);
  margin-bottom: 24px;
}
.pain h3{ margin-bottom: 10px; font-size: 22px; }
.pain p{ margin: 0; font-size: 15px; color: var(--ink-70); }

/* ---------- SERVICES / OFFERING ---------- */
.services{ background: var(--bg); overflow-x: clip; }
.offering__headline{
  padding: 28px clamp(24px, 2.4vw, 36px);
  border-left: 3px solid var(--accent);
  background: var(--bg-elev);
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-bottom: clamp(40px, 5vw, 64px);
  max-width: 900px;
}
.offering__badge{
  display: inline-block;
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700;
  color: var(--accent);
  margin-bottom: 10px;
}
.offering__headline p{
  font-family: var(--font-italic);
  font-style: italic;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.35;
  color: var(--ink);
  margin: 0;
}
.offering__closer{
  margin-top: clamp(36px, 4vw, 56px);
  max-width: 760px;
  font-size: clamp(17px, 1.4vw, 20px);
  color: var(--ink-70);
  line-height: 1.5;
}
.svc__tag{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase; font-weight: 700;
  color: var(--accent);
  padding: 4px 10px;
  border: 1px solid rgba(200,52,44,.3);
  border-radius: 999px;
  margin-bottom: 14px;
}
.svc-grid{ display:grid; gap: clamp(12px, 1.6vw, 20px); grid-template-columns: 1fr; }
@media (min-width: 720px){ .svc-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px){ .svc-grid{ grid-template-columns: repeat(4, 1fr); } }

.svc{
  background: var(--dark);
  color: var(--dark-ink);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  position: relative;
  overflow: hidden;
  transition: transform var(--t), box-shadow var(--t);
}
.svc:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.svc::after{
  content:""; position:absolute; inset:auto 0 0 0; height: 3px; background: var(--accent);
  transform: scaleX(0); transform-origin: left; transition: transform var(--t-slow);
}
.svc:hover::after{ transform: scaleX(1); }
.svc__icon{ color: var(--dark-ink); margin-bottom: 28px; }
.svc__icon svg{ width: 40px; height: 40px; }
.svc__title{ color: var(--dark-ink); margin-bottom: 10px; font-size: 24px; }
.svc__body{ color: var(--dark-ink-70); margin-bottom: 18px; font-size: 15px; line-height: 1.55; }
.svc__list{ list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--dark-line); padding-top: 18px; }
.svc__list li{
  font-size: 13px; color: var(--dark-ink-70); padding-left: 16px; position: relative; padding-block: 4px;
}
.svc__list li::before{ content:"+"; position:absolute; left: 0; color: var(--accent); font-weight: 700; }

/* ---------- CASE STUDY ---------- */
.case{
  background: var(--dark);
  color: var(--dark-ink);
  padding: clamp(80px, 12vw, 160px) 0;
  position: relative;
  overflow: hidden;
}
.case::before{
  content:""; position:absolute; top: 0; right: -10%; width: 70%; height: 100%;
  background: radial-gradient(ellipse at center, rgba(200,52,44,.18), transparent 70%);
  filter: blur(40px); pointer-events: none; opacity: .8;
}
.case__inner{ position: relative; }
.case__copy{ max-width: 1100px; }
.case__title{
  color: var(--dark-ink);
  font-size: clamp(42px, 7vw, 92px);
  line-height: .96;
  letter-spacing: -.03em;
  margin-bottom: 32px;
}
.case__sub{
  font-size: clamp(16px, 1.4vw, 20px);
  color: var(--dark-ink-70);
  max-width: 760px;
  margin-bottom: 48px;
}
.case__sub em{ color: var(--dark-ink); }
.case__quote{
  border-left: 3px solid var(--accent);
  padding-left: 24px;
  margin: 0 0 56px 0;
  max-width: 780px;
}
.case__quote p{
  font-family: var(--font-italic);
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.3;
  color: var(--dark-ink);
  margin: 0 0 14px 0;
}
.case__quote cite{ font-style: normal; font-size: 14px; color: var(--dark-ink-70); font-weight: 600; }
.case__quote cite a{ color: var(--accent); }
.case__quote cite span{ opacity:.5; margin: 0 6px; }
.case__stats{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  padding-top: 36px;
  border-top: 1px solid var(--dark-line);
}
@media (min-width: 900px){ .case__stats{ grid-template-columns: repeat(4, 1fr); } }
.case__stats > div{ display:flex; flex-direction: column; }
.case__stats strong{
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -.02em;
  color: var(--dark-ink);
  font-weight: 900;
  margin-bottom: 6px;
}
.case__stats > div > span{ font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--dark-ink-40); }

/* ---------- CLIENTS ---------- */
.clients{ background: var(--bg); overflow-x: clip; }
.client-grid{
  display: grid;
  gap: clamp(14px, 1.6vw, 20px);
  grid-template-columns: 1fr;
}
@media (min-width: 700px){ .client-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px){ .client-grid{ grid-template-columns: repeat(4, 1fr); } }

/* ---------- MOBILE ROSTER: tappable-arrow carousel ----------
   Earlier we tried a horizontal scroll-snap swipe carousel, but it
   caused gesture conflicts (either blocked vertical page scroll, or
   caused tile-jitter during vertical scroll). This version shows ONE
   card at a time on mobile, navigated by < / > buttons below — no
   overflow-scroll container, zero gesture conflict. Desktop multi-
   column grid is untouched.
   ---------------------------------------------------------------- */
.client-grid-controls{ display: none; }

@media (max-width: 699px){
  .client-grid{
    display: block;
    position: relative;
  }
  .client-grid > .client{
    display: none;
  }
  .client-grid > .client[data-active="true"]{
    display: flex;  /* restore .client's base column flex */
  }

  /* Arrow controls */
  .client-grid-controls{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 18px;
  }
  .cg-btn{
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bg-elev);
    border: 1px solid var(--line);
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--t), color var(--t), border-color var(--t), transform var(--t);
    padding: 0;
  }
  .cg-btn svg{ width: 18px; height: 18px; display: block; }
  .cg-btn:not(:disabled):active{ transform: scale(.94); }
  .cg-btn:not(:disabled):hover{
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
  }
  .cg-btn:disabled{
    opacity: .28;
    cursor: not-allowed;
  }
  .cg-count{
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-70);
    min-width: 72px;
    text-align: center;
  }
}

/* Instagram icon on each client handle — visual cue that the card
   links to their live Instagram. Excludes the "Apply now" empty slot. */
.client:not(.client--empty) .client__handle::before{
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c8342c' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='5'/><circle cx='12' cy='12' r='4'/><circle cx='17.6' cy='6.4' r='1' fill='%23c8342c'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.client{
  display: flex; flex-direction: column;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
  color: var(--ink);
}
/* No translateY on card hover — removed to stop a feedback loop where
   the lift changed the card's hit area near the cursor, causing rapid
   hover-on/off flicker during scroll. Shadow + border still signal
   interactivity; the inner image still zooms subtly on hover. */
.client:hover{ border-color: var(--ink); box-shadow: var(--shadow-lg); }
.client__media{
  position: relative;
  aspect-ratio: 4/5;
  background: linear-gradient(160deg, #1a1a1a 0%, #060606 100%);
  overflow: hidden;
}
.client__media::before{
  content:""; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 70% 40%, rgba(255,255,255,.08), transparent 50%);
}

/* Photo variant for client cards */
.client__media--photo{
  background: var(--bg-elev);
}
.client__media--photo::before{ display: none; }
.client__media--photo img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
.client:hover .client__media--photo img{ transform: scale(1.04); }
.client__media--photo::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(11,11,11,.35) 100%);
  pointer-events: none;
}
.client__glyph{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.85);
  transition: transform var(--t), color var(--t);
}
.client__glyph svg{ width: 64px; height: 64px; }
.client:hover .client__glyph{ transform: scale(1.1); color: #fff; }
.client:hover .client__glyph svg{ filter: drop-shadow(0 0 20px rgba(255,255,255,.35)); }
.client__metric{
  position: absolute;
  left: 16px; bottom: 16px;
  z-index: 2;
  display: inline-flex; align-items: baseline; gap: 6px;
  background: rgba(255,255,255,.94);
  color: var(--ink);
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 13px; font-weight: 700;
  box-shadow: 0 2px 8px rgba(11,11,11,.08);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.client__metric strong{ font-family: var(--font-display); font-size: 15px; }
.client__metric span{ color: var(--ink-55); font-weight: 500; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.client__body{ padding: 22px 22px 26px; }
.client__body h3{ font-size: 19px; line-height: 1.12; margin-bottom: 8px; }
.client__niche{
  font-size: 13px; color: var(--ink-55); margin-bottom: 18px;
  letter-spacing: .02em;
}
.client__handle{
  display:inline-flex; align-items:center; gap: 6px;
  font-weight: 700; font-size: 14px; color: var(--ink);
  position: relative;
}
.client__handle .arrow{ transition: transform var(--t); display: inline-block; }
.client:hover .client__handle .arrow{ transform: translateX(4px); }

/* Empty / apply card */
.client--empty{ background: transparent; border-style: dashed; }
.client__media--empty{
  background: transparent;
  display: flex; align-items:center; justify-content: center;
  aspect-ratio: 4/5;
}
.client__empty-mark{
  font-family: var(--font-display);
  font-size: 140px;
  color: var(--line-strong);
  line-height: 1;
  transition: color var(--t), transform var(--t);
}
.client--empty:hover .client__empty-mark{ color: var(--accent); transform: scale(1.06); }
.client__handle--cta{ color: var(--accent); }

/* ---------- PROCESS ---------- */
.process{ background: var(--bg); }
.proc{
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 0;
  border-top: 1px solid var(--line);
}
.proc__step{
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: clamp(16px, 4vw, 48px);
  padding: clamp(28px, 4vw, 44px) 0;
  border-bottom: 1px solid var(--line);
  transition: background var(--t);
}
.proc__step:hover{ background: var(--bg-elev); }
.proc__num{
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1;
  color: var(--accent);
  letter-spacing: -.02em;
}
.proc__step h3{ margin-bottom: 10px; }
.proc__step p{ margin: 0; max-width: 760px; color: var(--ink-70); font-size: 16px; }

/* ---------- WHY ---------- */
.why{
  background: var(--dark);
  color: var(--dark-ink);
  position: relative;
  overflow: hidden;
}
.why .container{ position: relative; z-index: 1; }
.why-grid{
  display:grid; gap: clamp(14px, 1.8vw, 24px);
  grid-template-columns: 1fr;
}
@media (min-width: 720px){ .why-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px){ .why-grid{ grid-template-columns: repeat(4, 1fr); } }

.why__item{
  padding: 36px 28px;
  border: 1px solid var(--dark-line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent);
  transition: border-color var(--t), transform var(--t), background var(--t);
}
.why__item:hover{ border-color: var(--accent); transform: translateY(-3px); }
.why__num{
  font-family: var(--font-display); font-size: 14px; letter-spacing: .1em;
  color: var(--accent);
  margin-bottom: 24px;
}
.why__item h3{ color: var(--dark-ink); margin-bottom: 10px; font-size: 22px; }
.why__item p{ color: var(--dark-ink-70); margin: 0; font-size: 15px; }

/* ---------- QUOTES ---------- */
.quotes{ background: var(--bg); overflow-x: clip; }
.quotes__grid{
  display: grid; gap: clamp(20px, 2vw, 28px);
  grid-template-columns: 1fr;
}
@media (min-width: 900px){ .quotes__grid{ grid-template-columns: 1fr 1fr; } }
.quote{
  margin: 0;
  padding: 40px clamp(28px, 3vw, 44px) 36px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  position: relative;
  transition: transform var(--t), border-color var(--t);
}
.quote:hover{ transform: translateY(-3px); border-color: var(--line-strong); }
.quote__mark{
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 120px; line-height: .4;
  color: var(--accent);
  margin-bottom: 16px;
}
.quote blockquote{
  font-family: var(--font-italic);
  font-style: italic;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.32;
  color: var(--ink);
  margin: 0 0 28px 0;
}
.quote__name{ font-weight: 700; font-size: 15px; }
.quote__role{ font-size: 13px; color: var(--ink-55); margin-top: 4px; }
.quote__role a{ color: var(--accent); font-weight: 600; }

/* ---------- FOUNDER ---------- */
.founder{
  background: var(--bg);
  position: relative;
  overflow: hidden;
}
.founder .container{ position: relative; z-index: 1; }
.founder__inner{
  display: grid;
  gap: clamp(40px, 5vw, 80px);
  grid-template-columns: 1fr;
  align-items: start;
}
/* On mobile: copy first, then image. On desktop: image on left, copy on right. */
.founder__image{ order: 2; }
.founder__copy{ order: 1; }
@media (min-width: 900px){
  .founder__inner{ grid-template-columns: 1fr 1.4fr; }
  .founder__image{ order: 1; }
  .founder__copy{ order: 2; }
}

.founder__image{ position: relative; }
.founder__image-inner{
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-elev);
  aspect-ratio: 4/5;
  display:flex; align-items:center; justify-content:center;
  border: 1px solid var(--line);
}
.founder__image-inner img{ width: 100%; height: 100%; object-fit: cover; object-position: center; }
.founder__signature{
  margin-top: 18px;
  padding: 16px 20px;
  background: var(--dark);
  color: var(--dark-ink);
  border-radius: var(--radius);
  display: inline-block;
}
.sig__name{ font-weight: 700; font-size: 15px; }
.sig__role{ font-size: 12px; color: var(--dark-ink-70); margin-top: 2px; letter-spacing: .06em; text-transform: uppercase; }

.founder__title{ margin-bottom: 28px; font-size: clamp(32px, 4vw, 56px); }
.founder__lead{
  font-family: var(--font-italic);
  font-style: italic;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.3;
  color: var(--ink);
  padding: 24px 28px;
  border-left: 3px solid var(--accent);
  margin: 0 0 36px 0;
  background: var(--bg-elev);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.founder__copy p{ font-size: 17px; line-height: 1.55; }
.founder__signoff{ font-family: var(--font-italic); font-style: italic; font-size: 22px; color: var(--ink); margin-top: 8px; }

.timeline{
  list-style: none; padding: 0; margin: 0 0 36px 0;
  border-top: 1px solid var(--line);
}
.timeline li{
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}
@media (max-width: 640px){
  .timeline li{ grid-template-columns: 1fr; gap: 4px; }
}
.timeline__yr{ font-weight: 700; color: var(--accent); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; padding-top: 2px; }
.timeline__what{ color: var(--ink-70); }

/* ---------- PRICING ---------- */
.pricing{ background: var(--dark); color: var(--dark-ink); }
.pricing__card{
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(32px, 4vw, 56px);
  border: 1px solid var(--dark-line);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent);
  position: relative;
  overflow: hidden;
}
.pricing__card::before{
  content:""; position: absolute; top: -40%; left: 50%; width: 80%; height: 80%;
  background: radial-gradient(ellipse, rgba(200,52,44,.18), transparent 70%);
  transform: translateX(-50%);
  filter: blur(60px);
  pointer-events: none;
}

.pricing__teaser{ position: relative; text-align: center; padding: 20px 0 10px; }
.pricing__tease{
  font-family: var(--font-italic);
  font-style: italic;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.3;
  color: var(--dark-ink);
  margin-bottom: 24px;
  max-width: 560px;
  margin-inline: auto;
}
.pricing__tease strong{ color: var(--accent); font-family: var(--font-display); font-style: normal; font-weight: 900; }
.pricing__noscript{
  margin-top: 20px;
  font-size: 14px;
  color: var(--dark-ink-70);
}
.pricing__noscript a{ color: var(--accent); font-weight: 700; text-decoration: underline; }
.pricing__locked{
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 22px;
  border: 1px dashed var(--dark-line);
  border-radius: 999px;
  color: var(--dark-ink-70);
  font-size: 14px;
  margin-bottom: 28px;
}
.pricing__locked svg{ color: var(--accent); }
.pricing__btn{ background: var(--dark-ink); color: var(--dark); }
.pricing__btn:hover{ background: var(--accent); color: var(--dark-ink); }

.pricing__form{
  display: none;
  position: relative;
  animation: fadeUp .4s ease both;
}
.pricing__form.is-active{ display: block; }
.pricing__formhead{ text-align: center; margin-bottom: 32px; }
.pricing__formhead h3{ color: var(--dark-ink); margin-bottom: 8px; }
.pricing__formhead p{ color: var(--dark-ink-70); margin: 0; font-size: 15px; }
.pricing__row{
  display: grid; gap: 16px; grid-template-columns: 1fr; margin-bottom: 16px;
}
@media (min-width: 700px){ .pricing__row{ grid-template-columns: 1fr 1fr; } }
.pricing__row--single{ grid-template-columns: 1fr !important; }
.pricing__form label{ display: block; }
.pricing__form label span{
  display: block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--dark-ink-70); margin-bottom: 8px; font-weight: 600;
}
.pricing__form input,
.pricing__form textarea{
  width: 100%;
  padding: 14px 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--dark-line);
  border-radius: var(--radius);
  color: var(--dark-ink);
  outline: none;
  font-family: inherit;
  transition: border-color var(--t), background var(--t);
}
.pricing__form textarea{ resize: vertical; min-height: 90px; line-height: 1.5; }
.pricing__form input:focus,
.pricing__form textarea:focus{ border-color: var(--accent); background: rgba(255,255,255,.08); }
.pricing__form input::placeholder,
.pricing__form textarea::placeholder{ color: var(--dark-ink-40); }
.pricing__submit{ width: 100%; justify-content: center; margin-top: 12px; background: var(--dark-ink); color: var(--dark); }
.pricing__submit:hover{ background: var(--accent); color: var(--dark-ink); }

.pricing__reveal{
  display: none;
  position: relative;
  animation: fadeUp .5s ease both;
  text-align: center;
}
.pricing__reveal.is-active{ display: block; }
.pricing__eyebrow-small{
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 12px; font-weight: 700;
}
.pricing__price{
  font-family: var(--font-display);
  font-size: clamp(48px, 7vw, 96px);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--dark-ink);
  margin-bottom: 8px;
  display:flex; align-items: baseline; justify-content:center; gap: 8px;
}
.pricing__price .currency{ font-size: .7em; color: var(--dark-ink-70); }
.pricing__price-meta{
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--dark-ink-70);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 600;
}
.pricing__price-meta .pricing__gst{
  padding: 4px 10px;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 999px;
  font-size: 11px;
}
.pricing__allin{
  font-size: 14px;
  color: var(--dark-ink-70);
  margin-bottom: 32px;
}
.pricing__allin strong{ color: var(--dark-ink); }

/* Justify section (revealed after form) */
.pricing__justify{
  max-width: 1240px;
  margin: clamp(56px, 6vw, 88px) auto 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1);
}
.pricing__justify.is-active{
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
.pricing__justify[aria-hidden="true"]:not(.is-active){
  display: none;
}
.pricing__justify-head{
  text-align: center;
  max-width: 780px;
  margin: 0 auto clamp(40px, 5vw, 64px);
}
.pricing__justify-head .section-head__eyebrow{ margin-bottom: 20px; }
.pricing__justify-head h3{
  color: var(--dark-ink);
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.04;
  letter-spacing: -.02em;
  margin-bottom: 18px;
}
.pricing__justify-head p{
  color: var(--dark-ink-70);
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.5;
  margin: 0;
}
.pricing__justify-cta{
  margin-top: clamp(40px, 5vw, 64px);
  text-align: center;
}
.pricing__includes{
  list-style: none; padding: 32px; margin: 32px auto;
  max-width: 640px;
  text-align: left;
  background: rgba(255,255,255,.04);
  border-radius: var(--radius);
  border: 1px solid var(--dark-line);
}
.pricing__includes li{
  padding: 8px 0 8px 24px; position: relative;
  color: var(--dark-ink-70); font-size: 15px;
  border-bottom: 1px solid var(--dark-line);
}
.pricing__includes li:last-child{ border-bottom: 0; }
.pricing__includes li::before{
  content: "+"; position: absolute; left: 0; color: var(--accent); font-weight: 700;
}
.pricing__includes li strong{ color: var(--dark-ink); }
.pricing__note{
  font-size: 14px;
  color: var(--dark-ink);
  max-width: 620px;
  margin: 0 auto 28px;
  padding: 20px 24px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--dark-line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  line-height: 1.55;
  text-align: left;
}
.pricing__note strong{ color: var(--accent); font-weight: 800; }

/* ---------- FAQ (custom animated accordion) ---------- */
.faq{
  background: var(--bg);
  position: relative;
  overflow: hidden;
}
.faq .container{ position: relative; z-index: 1; }
.faq__list{
  max-width: 900px;
  border-top: 1px solid var(--line);
}
.faq__item{
  border-bottom: 1px solid var(--line);
}
/* the clickable header */
.faq__head{
  all: unset;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 24px 0;
  cursor: pointer;
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
  transition: color var(--t);
}
.faq__head:hover{ color: var(--accent); }
.faq__head:focus-visible{ outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.faq__icon{
  flex-shrink: 0;
  width: 28px; height: 28px;
  position: relative;
  transition: transform var(--t);
}
.faq__icon::before,
.faq__icon::after{
  content: "";
  position: absolute;
  background: var(--accent);
  left: 50%; top: 50%;
  transition: transform var(--t);
}
.faq__icon::before{ width: 14px; height: 2.5px; transform: translate(-50%, -50%); }
.faq__icon::after{ width: 2.5px; height: 14px; transform: translate(-50%, -50%); }
.faq__item.is-open .faq__icon::after{ transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq__item.is-open .faq__icon{ transform: rotate(180deg); }

/* animated body via CSS grid trick */
.faq__body-wrap{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s cubic-bezier(.2,.7,.3,1);
}
.faq__item.is-open .faq__body-wrap{
  grid-template-rows: 1fr;
}
.faq__body{
  overflow: hidden;
  color: var(--ink-70);
  font-size: 16px;
  max-width: 780px;
  line-height: 1.6;
}
.faq__body-inner{
  padding: 4px 0 28px 0;
}
.faq__ul{ margin: 10px 0 0 0; padding-left: 20px; }
.faq__ul li{ margin-bottom: 8px; }

/* ---------- BOOK ---------- */
.book{
  background: var(--dark);
  color: var(--dark-ink);
  position: relative;
  overflow: hidden;
}
.book::before{
  content:""; position:absolute; top: -20%; right: -10%; width: 60%; height: 140%;
  background: radial-gradient(ellipse at center, rgba(200,52,44,.22), transparent 70%);
  filter: blur(60px); pointer-events: none;
}
.book__inner{ position: relative; text-align: center; }
/* Center the section-head block itself when inside a centered-text section */
.book .section-head,
.pricing > .container > .section-head,
.dept > .container > .section-head{
  margin-inline: auto;
  text-align: center;
}
.book .section-head__intro,
.pricing > .container > .section-head .section-head__intro,
.dept > .container > .section-head .section-head__intro{
  margin-inline: auto;
}
.book .section-head__eyebrow,
.pricing > .container > .section-head .section-head__eyebrow,
.dept > .container > .section-head .section-head__eyebrow{
  /* eyebrow pill centered */
  margin-inline: auto;
}
.book__title{
  color: var(--dark-ink);
  font-size: clamp(38px, 6vw, 84px);
  letter-spacing: -.03em;
  line-height: 1;
  margin-bottom: 24px;
}
.book__sub{
  color: var(--dark-ink-70);
  max-width: 680px;
  margin: 0 auto 48px;
  font-size: clamp(16px, 1.4vw, 20px);
}
.book__cta-row{
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
  margin-bottom: 72px;
}
.book .btn--primary{ background: var(--dark-ink); color: var(--dark); }
.book .btn--primary:hover{ background: var(--accent); color: var(--dark-ink); }
.book__meta{
  display: grid; gap: 14px;
  grid-template-columns: 1fr;
  max-width: 760px;
  margin: 0 auto;
  padding-top: 36px;
  border-top: 1px solid var(--dark-line);
  color: var(--dark-ink-70);
  font-size: 14px;
}
@media (min-width: 720px){ .book__meta{ grid-template-columns: repeat(3, 1fr); text-align: center; } }
.book__meta strong{ color: var(--dark-ink); font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: .16em; }

/* ---------- FOOTER ---------- */
.footer{
  background: #050505;
  color: var(--dark-ink);
  padding: 72px 0 28px;
}
.footer__inner{
  display: grid;
  gap: 48px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px){ .footer__inner{ grid-template-columns: 1.2fr 2fr; } }
.footer__brand img{ height: 36px; width: auto; filter: invert(1); margin-bottom: 14px; }
.footer__tagline{ color: var(--dark-ink-70); font-size: 14px; margin: 0; }
.footer__cols{ display: grid; gap: 32px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px){ .footer__cols{ grid-template-columns: repeat(3, 1fr); } }
.footer__cols h4{ color: var(--dark-ink); margin-bottom: 14px; font-size: 12px; letter-spacing: .18em; }
.footer__cols a{
  display: block;
  color: var(--dark-ink-70);
  font-size: 14px;
  padding: 5px 0;
  transition: color var(--t);
}
.footer__cols a:hover{ color: var(--accent); }
.footer__bottom{
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--dark-line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: var(--dark-ink-40);
  letter-spacing: .04em;
}

/* ---------- ANIMATIONS ---------- */
@keyframes fadeUp{
  from{ opacity: 0; transform: translateY(12px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* Reveal-on-scroll */
.reveal{ opacity: 0; transform: translateY(18px); transition: opacity .35s ease, transform .35s cubic-bezier(.2,.7,.3,1); }
.reveal.is-in{ opacity: 1; transform: none; }

/* ---------- ANIMATION LAYER (V2 polish) ---------- */

/* Headline word-by-word reveal */
.anim-words .hw{
  display: inline-block;
  opacity: 0;
  transform: translateY(30%) rotate(2deg);
  transition: opacity .4s cubic-bezier(.2,.7,.3,1), transform .4s cubic-bezier(.2,.7,.3,1);
  transition-delay: calc(var(--i, 0) * 22ms);
  will-change: transform, opacity;
}
.anim-words.is-in .hw{
  opacity: 1;
  transform: none;
}
.anim-words .hw-em em{ display: inline-block; }

/* Counter number reveal */
.counter{
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* Magnetic button (JS applies transform inline; this ensures smoothness) */
.btn--magnetic{ transition: transform .25s cubic-bezier(.2,.7,.3,1), background var(--t), color var(--t); will-change: transform; }
.btn--magnetic:hover{ transition-duration: .12s; }

/* Parallax layer — JS applies translate */
.parallax{ will-change: transform; }

/* Pricing slot-machine number reveal */
.slot-reveal{
  display: inline-flex;
  align-items: baseline;
}
.slot-digit{
  display: inline-block;
  overflow: hidden;
  height: 1em;
  line-height: 1;
  vertical-align: baseline;
}
.slot-digit__inner{
  display: block;
  transition: transform 1.2s cubic-bezier(.2,.7,.3,1);
  transform: translateY(0);
}

/* Subtle float animation for accent dots */
@keyframes pulse-dot{
  0%,100%{ box-shadow: 0 0 0 4px var(--accent-soft); }
  50%{ box-shadow: 0 0 0 7px var(--accent-soft); }
}
.dot{ animation: pulse-dot 2.6s ease-in-out infinite; }

/* Hero scroll indicator pulse (already exists, enhance) */
.hero__scroll-line::after{
  background: linear-gradient(180deg, transparent, var(--ink));
}

/* Service card shine effect */
.svc{ background: linear-gradient(180deg, var(--dark-2), var(--dark) 60%); }
.svc::before{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(200,52,44,.14), transparent 50%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.svc:hover::before{ opacity: 1; }

/* Client card image ken-burns-style accent on hover */
.client__media{ transition: transform .6s cubic-bezier(.2,.7,.3,1); }
.client:hover .client__media{ transform: scale(1.02); }

/* Roster banner subtle ken burns */
.roster-banner img{
  transform: scale(1.01);
  transition: transform 6s linear;
}
.roster-banner.is-in img{ transform: scale(1.05); }

/* Float animation for CTA arrow on hover — already handled */

/* Static dark-section decorative glows (no animation — they're drama, not motion) */
/* Keyframes below are retained only for the client__media--photo ken-burns (and nothing else now). */

/* Disable on reduced motion */
@media (prefers-reduced-motion: reduce){
  .anim-words .hw{ opacity: 1; transform: none; transition: none; }
  .dot{ animation: none; }
  .grid-wave, .ecg-divider__line, .glow-border::before{ animation: none !important; }
  .roster-banner img{ transform: none; transition: none; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation: none !important; transition: none !important; }
}

/* ---------- PULSE DIVIDER (full-width ECG — "cutout with light behind") ---------- */
/* Sits on the section seam: zero flow-height, SVG straddles the boundary
   so half bleeds into the section above and half into the section below. */
.pulse-divider{
  width: 100%;
  height: 0;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 4;
  display: block;
  overflow: visible;
  pointer-events: none;
}
.pulse-divider__svg{
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: clamp(44px, 6vw, 64px);
  display: block;
  overflow: hidden;
  z-index: 1;
}
/* Backdrop-blur band that sits BEHIND the pulse SVG, softening the seam
   where two adjacent light sections meet (their ambient glows meet hard otherwise).
   Feathered via mask so the blur fades smoothly into each section. */
.pulse-divider::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: clamp(90px, 11vw, 140px);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 28%, #000 72%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 28%, #000 72%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}
.pulse-divider__base{
  stroke: rgba(200, 52, 44, .22);
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.pulse-divider__beam{
  animation: pulse-travel 4.2s linear infinite;
  transform: translateX(-400px);
  will-change: transform;
}
.pulse-divider__glow{
  filter: blur(.6px) drop-shadow(0 0 6px rgba(255, 94, 80, .85)) drop-shadow(0 0 14px rgba(200, 52, 44, .5));
}
@keyframes pulse-travel{
  0%   { transform: translateX(-400px); }
  100% { transform: translateX(1200px); }
}
@media (prefers-reduced-motion: reduce){
  .pulse-divider__beam{ animation: none; transform: translateX(400px); }
}

/* ============================================================
   V6 — Ambient motion:
        Light sections: moving radial glow (warm drift)
        Dark sections:  sheen sweep (diagonal light pass)
   ============================================================ */

/* Ensure section content stacks above the ambient layers */
section{ position: relative; }

/* ---------- MOVING RADIAL GLOW (light sections only) ---------- */
.hero::after,
.problem::after,
.services::after,
.clients::after,
.flow::after,
.quotes::after,
.founder::after,
.fit::after,
.faq::after{
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse 52% 40% at 18% 28%, rgba(200, 52, 44, 0.14), transparent 62%),
    radial-gradient(ellipse 48% 35% at 82% 72%, rgba(255, 180, 120, 0.55), transparent 58%),
    radial-gradient(ellipse 60% 45% at 50% 90%, rgba(255, 215, 175, 0.35), transparent 65%);
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
  animation: glow-drift 12s ease-in-out infinite;
  will-change: transform;
}

/* Per-section variation so they don't all drift in lockstep */
.problem::after  { animation-duration: 14s; animation-delay: -2s; }
.services::after { animation-duration: 13s; animation-delay: -5s; }
.clients::after  { animation-duration: 15s; animation-delay: -3s; }
.flow::after     { animation-duration: 11s; animation-delay: -6s; }
.quotes::after   { animation-duration: 14s; animation-delay: -4s; }
.founder::after  { animation-duration: 12s; animation-delay: -7s; }
.fit::after      { animation-duration: 16s; animation-delay: -1s; }
.faq::after      { animation-duration: 13s; animation-delay: -8s; }

/* Generous drift keyframes — visible motion, not tiny */
@keyframes glow-drift{
  0%   { transform: translate(0, 0) scale(1); }
  25%  { transform: translate(-10%, 8%) scale(1.18); }
  50%  { transform: translate(9%, -6%) scale(1.08); }
  75%  { transform: translate(-5%, -9%) scale(1.15); }
  100% { transform: translate(0, 0) scale(1); }
}

.hero__inner, .hero__scroll{ position: relative; z-index: 1; }
.problem > .container,
.services > .container,
.clients > .container,
.flow > .container,
.quotes > .container,
.founder > .container,
.fit > .container,
.faq > .container{ position: relative; z-index: 1; }

/* ---------- SHEEN SWEEP (dark sections only) ---------- */
.case::after,
.why::after,
.pricing::after,
.book::after,
.fit__proof::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(200, 52, 44, 0.08) 47%,
    rgba(255, 200, 170, 0.18) 50%,
    rgba(200, 52, 44, 0.08) 53%,
    transparent 70%);
  background-size: 280% 280%;
  background-position: 0% 0%;
  pointer-events: none;
  mix-blend-mode: screen;
  animation: sheen-sweep 14s ease-in-out infinite;
  z-index: 0;
}
.why::after     { animation-duration: 16s; animation-delay: -3s; }
.pricing::after { animation-duration: 13s; animation-delay: -5s; }
.book::after    { animation-duration: 15s; animation-delay: -2s; }
.fit__proof::after { animation-duration: 12s; animation-delay: -4s; }

@keyframes sheen-sweep{
  0%   { background-position: 0% 0%;     opacity: 0; }
  15%  {                                 opacity: 1; }
  50%  { background-position: 100% 100%; opacity: 1; }
  85%  {                                 opacity: 0; }
  100% { background-position: 100% 100%; opacity: 0; }
}

/* Section content above sheen layer */
.case > .container,
.why > .container,
.pricing > .container,
.book > .container{ position: relative; z-index: 1; }
.fit__proof{ position: relative; isolation: isolate; }
.fit__proof > *:not(.fit__proof-head){ position: relative; z-index: 2; }

/* ============================================================
   V2 additions — Flow, Department, Fit
   ============================================================ */

/* ---------- FLOW (interactive process) ---------- */
.flow{
  background: var(--bg);
  position: relative;
  overflow: hidden;
}
.flow .container{ position: relative; z-index: 1; }
.flow__wrap{
  position: relative;
  padding-left: 8px;
}
.flow__rail{
  position: absolute;
  left: 35px; top: 0; bottom: 0;
  width: 2px;
  background: var(--line);
  transform-origin: top;
}
.flow__progress{
  position: absolute;
  left: 35px; top: 0;
  width: 2px;
  height: 0;
  background: linear-gradient(180deg, var(--accent), var(--ink));
  transition: height .15s linear;
  pointer-events: none;
  box-shadow: 0 0 8px rgba(200,52,44,.4);
}
.flow__track{
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: clamp(16px, 2.4vw, 28px);
}
.flow__step{
  position: relative;
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: clamp(16px, 2.4vw, 32px);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1);
  transition-delay: calc(var(--d, 0) * 80ms);
}
.flow__step.is-in{ opacity: 1; transform: none; }
.flow__marker{
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--ink-70);
  position: relative;
  z-index: 2;
  transition: border-color var(--t), background var(--t), color var(--t), transform var(--t);
}
.flow__marker--accent{
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  box-shadow: 0 0 0 8px var(--accent-soft);
}
.flow__step.is-in .flow__marker{ transform: scale(1.03); }
.flow__step:hover .flow__marker{ border-color: var(--ink); color: var(--ink); }
.flow__step:hover .flow__marker--accent{ background: var(--accent); color: #fff; border-color: var(--accent); }

.flow__card{
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 2.6vw, 32px);
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
.flow__step:hover .flow__card{ border-color: var(--line-strong); box-shadow: var(--shadow); transform: translateY(-2px); }
.flow__phase{
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 10px;
}
.flow__card h3{ margin-bottom: 10px; font-size: clamp(20px, 2vw, 26px); }
.flow__card p{ font-size: 15px; line-height: 1.55; margin: 0 0 18px 0; max-width: 720px; }
.flow__card p:last-child{ margin-bottom: 0; }
.flow__time{
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  padding: 8px 14px;
  background: var(--bg);
  border-radius: 999px;
  border: 1px solid var(--line);
}
.flow__time .dot{ width: 6px; height: 6px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 0 3px var(--accent-soft); }

.flow__total{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 3vw, 40px);
  margin-top: clamp(56px, 6vw, 80px);
  padding: clamp(32px, 4vw, 48px);
  background: var(--dark);
  color: var(--dark-ink);
  border-radius: var(--radius-xl);
  position: relative;
  overflow: hidden;
}
.flow__total::before{
  content:""; position:absolute; inset: -50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(200,52,44,.18), transparent 60%);
  filter: blur(40px); pointer-events: none;
}
.flow__total-stat{ position: relative; text-align: center; min-width: 140px; }
.flow__total-num{
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--dark-ink);
}
.flow__total-num span{
  font-size: .32em; color: var(--dark-ink-70); margin-left: 4px; letter-spacing: 0; font-weight: 600;
}
.flow__total-label{
  margin-top: 10px;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--dark-ink-70);
  font-weight: 600;
  line-height: 1.4;
}
.flow__total-stat--highlight .flow__total-num{ color: var(--accent); }
.flow__total-plus{
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 40px);
  color: var(--dark-ink-40);
  position: relative;
}

/* ---------- DEPARTMENT ---------- */
.dept{
  background: var(--dark);
  color: var(--dark-ink);
  position: relative;
  overflow: hidden;
}
.dept::before{
  content:""; position: absolute; top: 10%; right: -20%; width: 70%; height: 80%;
  background: radial-gradient(ellipse, rgba(200,52,44,.12), transparent 60%);
  filter: blur(60px); pointer-events: none;
}
.dept__grid{
  display: grid;
  gap: clamp(14px, 1.8vw, 20px);
  grid-template-columns: 1fr;
  position: relative;
}
@media (min-width: 700px){ .dept__grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px){ .dept__grid{ grid-template-columns: repeat(3, 1fr); } }

.dept__role{
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent);
  border: 1px solid var(--dark-line);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 2.8vw, 32px);
  transition: border-color var(--t), transform var(--t), background var(--t);
  position: relative;
}
.dept__role:hover{
  border-color: var(--accent);
  transform: translateY(-3px);
  background: linear-gradient(180deg, rgba(255,255,255,.05), transparent);
}
.dept__role--anchor{
  background: linear-gradient(135deg, rgba(200,52,44,.15), rgba(200,52,44,.03));
  border-color: var(--accent);
}
.dept__role--anchor:hover{ transform: translateY(-3px); }

.dept__num{
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: .1em;
  color: var(--accent);
  margin-bottom: 20px;
}
.dept__badge{
  display: inline-block;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--dark-ink);
  padding: 4px 10px;
  background: var(--accent);
  border-radius: 999px;
  margin-bottom: 20px;
}
.dept__role h4{
  color: var(--dark-ink);
  font-size: 18px;
  text-transform: none;
  letter-spacing: -.01em;
  font-family: var(--font-display);
  font-weight: 900;
  margin-bottom: 10px;
}
.dept__role p{
  color: var(--dark-ink-70);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}

.dept__econ{
  margin-top: clamp(48px, 6vw, 72px);
  padding: clamp(32px, 4vw, 56px);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--dark-line);
  border-radius: var(--radius-xl);
  position: relative;
  text-align: center;
}
.dept__econ-head{ margin-bottom: 36px; }
.dept__econ-tag{
  display: inline-block;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent); font-weight: 700;
  margin-bottom: 14px;
}
.dept__econ-head h3{
  color: var(--dark-ink);
  font-size: clamp(22px, 2.4vw, 32px);
  max-width: 680px;
  margin: 0 auto;
}
.dept__econ-sub{
  font-size: .4em;
  color: var(--dark-ink-70);
  margin-left: 6px;
  letter-spacing: 0;
  font-weight: 600;
}
.dept__econ-row{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3vw, 40px);
  margin-bottom: 28px;
}
.dept__econ-stat{ min-width: 120px; }
.dept__econ-num{
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 54px);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--dark-ink);
}
.dept__econ-label{
  margin-top: 10px;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--dark-ink-70);
  font-weight: 600;
  line-height: 1.4;
}
.dept__econ-op{
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 40px);
  color: var(--dark-ink-40);
}
.dept__econ-stat--hl .dept__econ-num{ color: var(--accent); }
.dept__econ-note{
  max-width: 780px;
  margin: 0 auto;
  color: var(--dark-ink-70);
  font-size: 15px;
  line-height: 1.55;
}
.dept__econ-note strong{ color: var(--dark-ink); }

/* ---------- FIT (qualifying) ---------- */
.fit{ background: var(--bg); overflow-x: clip; }
.fit__grid{
  display: grid; gap: clamp(14px, 1.8vw, 24px);
  grid-template-columns: 1fr;
  margin-bottom: clamp(56px, 7vw, 88px);
}
@media (min-width: 900px){ .fit__grid{ grid-template-columns: 1fr 1fr; } }

.fit__col{
  padding: clamp(28px, 3vw, 40px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--bg-elev);
  position: relative;
}
.fit__col--yes{
  background: linear-gradient(180deg, rgba(11,11,11,.02), var(--bg-elev));
  border-color: var(--ink);
}
.fit__col--no{
  background: var(--bg-elev);
  opacity: .92;
}
.fit__tag{
  display: inline-block;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: .04em;
  padding: 8px 16px;
  background: var(--ink);
  color: var(--bg);
  border-radius: 999px;
  margin-bottom: 24px;
}
.fit__tag--no{
  background: transparent;
  color: var(--ink-55);
  border: 1.5px dashed var(--line-strong);
}
.fit__col ul{
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 16px;
}
.fit__col li{
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  padding-left: 28px;
  position: relative;
}
.fit__col--yes li::before{
  content:"";
  position: absolute; left: 0; top: 7px;
  width: 18px; height: 10px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
.fit__col--no li{ color: var(--ink-55); }
.fit__col--no li::before{
  content:"";
  position: absolute; left: 4px; top: 11px;
  width: 12px; height: 1.5px;
  background: var(--ink-30);
}

/* Proof block */
.fit__proof{
  padding: clamp(32px, 4vw, 56px);
  background: var(--dark);
  color: var(--dark-ink);
  border-radius: var(--radius-xl);
  position: relative;
  overflow: hidden;
}
.fit__proof::before{
  content:""; position: absolute; top: -30%; left: -10%; width: 60%; height: 120%;
  background: radial-gradient(ellipse, rgba(200,52,44,.18), transparent 60%);
  filter: blur(50px); pointer-events: none;
}
.fit__proof-head{ position: relative; margin-bottom: 36px; max-width: 760px; }
.fit__proof-head h3{ color: var(--dark-ink); font-size: clamp(24px, 2.6vw, 34px); margin-bottom: 10px; }
.fit__proof-head p{ color: var(--dark-ink-70); margin: 0; font-size: 15px; }
.fit__proof-grid{
  position: relative;
  display: grid;
  gap: clamp(20px, 2.4vw, 32px);
  grid-template-columns: 1fr;
}
@media (min-width: 720px){ .fit__proof-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px){ .fit__proof-grid{ grid-template-columns: repeat(4, 1fr); } }

.fit__proof-item{
  padding-top: 20px;
  border-top: 1px solid var(--dark-line);
}
.fit__proof-num{
  font-family: var(--font-display);
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--accent);
  margin-bottom: 16px;
}
.fit__proof-label{
  font-size: 14px;
  line-height: 1.5;
  color: var(--dark-ink-70);
}
.fit__proof-label strong{ color: var(--dark-ink); }

.fit__closer{
  margin-top: clamp(48px, 5vw, 64px);
  max-width: 780px;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.55;
  color: var(--ink-70);
}
.fit__closer em{ color: var(--ink); }

/* Scale founder image better for portraits */
.founder__image-inner{ aspect-ratio: 4/5; background: var(--bg-elev); }
.founder__image-inner img{ object-position: center 20%; }

/* Roster banner (above client grid) */
.roster-banner{
  margin: 0 0 clamp(32px, 4vw, 56px) 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  box-shadow: var(--shadow);
  transition: transform var(--t), box-shadow var(--t);
}
.roster-banner:hover{ transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.roster-banner img{ width: 100%; height: auto; display: block; }

/* ============================================================
   V4 — Mobile-first polish: overlay nav, FAB, founder reorder
   ============================================================ */

/* Mobile nav overlay — full-screen, large, smooth */
@media (max-width: 899px){
  .nav__menu.is-open{
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    height: 100vh; height: 100dvh;
    padding: 96px var(--gutter) 40px;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    background: var(--bg);
    border-bottom: none;
    overflow-y: auto;
    z-index: 60;
    animation: navOverlayIn .35s cubic-bezier(.2,.7,.3,1) both;
  }
  .nav__menu.is-open a{
    font-size: 28px;
    font-family: var(--font-display);
    font-weight: 900;
    letter-spacing: -.02em;
    color: var(--ink);
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
    position: relative;
  }
  .nav__menu.is-open a::after{ display: none; }
  .nav__menu.is-open a::before{
    content: "→";
    position: absolute;
    right: 0; top: 50%;
    transform: translateY(-50%) translateX(-8px);
    color: var(--accent);
    font-size: 20px;
    opacity: 0;
    transition: opacity var(--t), transform var(--t);
  }
  .nav__menu.is-open a:hover::before,
  .nav__menu.is-open a.is-active::before{
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
  .nav__menu.is-open .nav__mobile-cta{
    display: inline-flex;
    margin-top: 32px;
    align-self: flex-start;
    font-size: 16px;
    padding: 18px 28px;
    border-bottom: none;
    color: var(--bg);
  }
  .nav__menu.is-open .nav__mobile-cta::before{ display: none; }
  .nav__menu.is-open .nav__mobile-cta::after{ display: none; }
  .nav__menu.is-open .nav__contact{
    display: block;
    margin-top: auto;
    padding-top: 32px;
    color: var(--ink-55);
    font-size: 14px;
    line-height: 1.6;
    border-top: 1px solid var(--line);
    border-bottom: none;
  }
  .nav__menu.is-open .nav__contact strong{ color: var(--ink); font-weight: 700; }
  .nav__menu.is-open .nav__contact a{
    font-size: 14px;
    font-family: var(--font-body);
    font-weight: 500;
    padding: 4px 0;
    border-bottom: none;
    display: block;
    color: var(--ink-70);
  }
  .nav__menu.is-open .nav__contact a::before{ display: none; }
  body.nav-open{ overflow: hidden; }
}

@keyframes navOverlayIn{
  from{ opacity: 0; transform: translateY(-8px); }
  to{ opacity: 1; transform: none; }
}

/* Ensure the hamburger is clickable above the overlay */
.nav__burger{ position: relative; z-index: 62; }
.nav{ z-index: 60; }

/* ---------- FLOATING BOOK-A-CALL BUTTON (FAB) ---------- */
.fab{
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px 14px 16px;
  background: var(--ink);
  color: var(--bg);
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .01em;
  line-height: 1;
  box-shadow: 0 12px 40px rgba(11,11,11,.35), 0 4px 12px rgba(11,11,11,.2);
  transition:
    transform .35s cubic-bezier(.2,.7,.3,1),
    padding .35s cubic-bezier(.2,.7,.3,1),
    background .25s ease,
    opacity .3s ease;
  opacity: 0;
  transform: translateY(16px) scale(.9);
  pointer-events: none;
  will-change: transform, padding;
}
.fab.is-visible{
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.fab:hover{ background: var(--accent); }
.fab:active{ transform: scale(.96); }
.fab__icon{
  width: 22px; height: 22px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}
.fab__icon svg{ width: 20px; height: 20px; }
.fab__label{
  max-width: 200px;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width .35s cubic-bezier(.2,.7,.3,1), opacity .25s ease, margin .35s ease;
}
/* Compact state: shrinks to circular icon-only after scrolling */
.fab.is-compact{
  padding: 14px;
  border-radius: 999px;
}
.fab.is-compact .fab__label{
  max-width: 0;
  opacity: 0;
  margin-left: -10px;
}
/* Hide entirely when user is inside the Book section */
.fab.is-hidden{
  opacity: 0;
  pointer-events: none;
  transform: translateY(16px) scale(.9);
}

/* Keep FAB away from mobile nav overlay */
@media (max-width: 899px){
  body.nav-open .fab{ display: none; }
}

/* ---------- SELECTION ---------- */
::selection{ background: var(--accent); color: #fff; }