/* ==========================================================================
   HiveMind: askhivemind.com
   Design system: "Light editorial premium"
   Paper #FAF8F4 · Ink #14110E · Honey accent · Instrument Serif display
   Mobile-first. No framework. No build step.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  /* Surfaces */
  --paper:        #FAF8F4;
  --paper-alt:    #F3EEE4;
  --paper-deep:   #EBE4D6;
  --paper-card:   #FFFDF9;

  /* Ink */
  --ink:          #14110E;
  --ink-2:        #4A443B;
  --ink-3:        #786F62;
  --ink-4:        #A79D8D;
  --rule:         #E2DBCC;
  --rule-soft:    #EDE7DA;

  /* Accent, honey */
  --honey:        #E0A21C;   /* graphic fills */
  --honey-mid:    #B87613;   /* chart series 1, borders */
  --honey-deep:   #8A5A0B;   /* text / links on paper (6.2:1) */
  --honey-wash:   #FCF3E0;
  --honey-line:   #EDD9A9;

  /* Chart categorical, validated (lightness, chroma, CVD, contrast all pass) */
  --c1: #B87613;   /* honey   */
  --c2: #0E8F86;   /* teal    */
  --c3: #C0452A;   /* clay    */
  --c4: #5566C7;   /* indigo  */

  /* Status */
  --pos:          #1B6B48;
  --pos-wash:     #E7F1EB;
  --neg:          #A8331C;
  --neg-wash:     #F6E9E5;

  /* Dark band (used inside light pages for contrast moments) */
  --night:        #16130F;
  --night-2:      #221D17;
  --night-rule:   #373026;
  --night-ink:    #F3EEE4;
  --night-ink-2:  #B8AE9D;

  /* Type */
  --serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:  ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;

  /* Metrics */
  --gutter: 20px;
  --maxw: 1200px;
  --maxw-narrow: 760px;
  --radius: 4px;
  --radius-lg: 8px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.6s;
}

@media (min-width: 700px)  { :root { --gutter: 32px; } }
@media (min-width: 1100px) { :root { --gutter: 48px; } }

/* ---------- 2. Reset ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-feature-settings: "kern" 1, "liga" 1;
}

body.is-locked { overflow: hidden; }

img, svg, video { max-width: 100%; display: block; }
h1, h2, h3, h4, h5, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; width: 100%; }
input, textarea, select { font: inherit; color: inherit; }

::selection { background: var(--honey); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--honey-deep);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ---------- 3. Layout ---------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--maxw-narrow); }
.wrap--wide   { max-width: 1360px; }

.section { padding-block: clamp(56px, 9vw, 116px); }
.section--tight { padding-block: clamp(40px, 6vw, 72px); }
.section--alt  { background: var(--paper-alt); }
.section--deep { background: var(--paper-deep); }
.section--night {
  background: var(--night);
  color: var(--night-ink);
}
.section--night .eyebrow { color: var(--honey); }
.section--night h2, .section--night h3 { color: var(--night-ink); }
.section--night p { color: var(--night-ink-2); }

.rule-top { border-top: 1px solid var(--rule); }

.grid { display: grid; gap: 20px; }
@media (min-width: 700px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .grid--3 { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (min-width: 1000px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- 4. Typography ------------------------------------------------ */
.display,
h1.display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.55rem, 8.2vw, 5.4rem);
  line-height: 0.98;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.95rem, 4.6vw, 3.35rem);
  line-height: 1.04;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.6vw, 1.95rem);
  line-height: 1.14;
  letter-spacing: -0.012em;
}

h4, .h4 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.35;
  letter-spacing: -0.006em;
}

.lede {
  font-size: clamp(1.06rem, 2.1vw, 1.3rem);
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
}

.body-lg { font-size: 1.0625rem; line-height: 1.65; color: var(--ink-2); }
.muted   { color: var(--ink-3); }
.small   { font-size: 0.875rem; line-height: 1.55; }
.tiny    { font-size: 0.78rem; line-height: 1.5; }

.eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--honey-deep);
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--honey-mid);
  flex: none;
}
.eyebrow--plain::before { display: none; }

.serif-em { font-family: var(--serif); font-style: italic; }
.hl { color: var(--honey-deep); }
.hl-mark {
  background: linear-gradient(to bottom, transparent 62%, var(--honey-line) 62%);
  padding-inline: 1px;
}

.stack > * + * { margin-top: 18px; }
.stack-sm > * + * { margin-top: 10px; }
.stack-lg > * + * { margin-top: 28px; }

.section-head { max-width: 720px; }
.section-head > * + * { margin-top: 16px; }

/* ---------- 5. Buttons --------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 24px;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: background .22s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease), transform .22s var(--ease);
  white-space: nowrap;
  text-align: center;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.btn--primary:hover { background: #2C251C; border-color: #2C251C; }

.btn--honey {
  background: var(--honey);
  color: var(--ink);
  border-color: var(--honey);
  font-weight: 600;
}
.btn--honey:hover { background: #F0B02A; border-color: #F0B02A; }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule);
}
.btn--ghost:hover { border-color: var(--ink); background: rgba(20,17,14,.03); }

.btn--night {
  background: var(--night-ink);
  color: var(--night);
  border-color: var(--night-ink);
}
.btn--night:hover { background: #fff; }

.btn--night-ghost {
  background: transparent;
  color: var(--night-ink);
  border-color: var(--night-rule);
}
.btn--night-ghost:hover { border-color: var(--night-ink-2); }

.btn--lg { padding: 17px 30px; font-size: 1rem; }
.btn--sm { padding: 10px 18px; font-size: 0.85rem; }
.btn--block { width: 100%; }

.btn .arw { transition: transform .22s var(--ease); }
.btn:hover .arw { transform: translateX(3px); }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.link-arrow:hover { border-color: var(--honey-mid); color: var(--honey-deep); }
.link-arrow .arw { transition: transform .2s var(--ease); }
.link-arrow:hover .arw { transform: translateX(3px); }

.link-under {
  border-bottom: 1px solid var(--honey-line);
  transition: border-color .2s;
  font-weight: 500;
}
.link-under:hover { border-color: var(--honey-mid); }

/* ---------- 6. Header / nav --------------------------------------------- */
.hdr {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(250, 248, 244, 0.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.hdr.is-stuck { border-bottom-color: var(--rule); }

.hdr__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 66px;
}
@media (min-width: 900px) { .hdr__in { height: 76px; } }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--serif);
  font-size: 1.32rem;
  letter-spacing: -0.02em;
  line-height: 1;
  flex: none;
}
.brand__mark { width: 22px; height: 25px; flex: none; }
.brand__mark path { fill: var(--ink); }
.brand__mark .cell-a { fill: var(--honey); }

.nav { display: none; }
@media (min-width: 900px) {
  .nav {
    display: flex;
    align-items: center;
    gap: 30px;
  }
  .nav a {
    font-size: 0.9rem;
    font-weight: 450;
    color: var(--ink-2);
    transition: color .18s;
    position: relative;
  }
  .nav a:hover, .nav a.is-active { color: var(--ink); }
  .nav a.is-active::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -6px;
    height: 1.5px;
    background: var(--honey);
  }
}

.hdr__cta { display: none; }
@media (min-width: 900px) { .hdr__cta { display: inline-flex; } }

.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  align-items: center;
  margin-right: -8px;
}
@media (min-width: 900px) { .burger { display: none; } }
.burger span {
  display: block;
  width: 19px;
  height: 1.5px;
  background: var(--ink);
  transition: transform .3s var(--ease), opacity .2s;
}
.burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-nav {
  position: fixed;
  inset: 66px 0 0;
  background: var(--paper);
  z-index: 190;
  padding: 28px var(--gutter) 40px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
  overflow-y: auto;
}
.mobile-nav.is-open {
  opacity: 1; transform: none; pointer-events: auto; visibility: visible;
}
.mobile-nav a {
  font-family: var(--serif);
  font-size: 1.85rem;
  line-height: 1.28;
  padding-block: 8px;
  border-bottom: 1px solid var(--rule-soft);
}
.mobile-nav .btn { margin-top: 22px; }
@media (min-width: 900px) { .mobile-nav { display: none; } }

/* ---------- 7. Hero ------------------------------------------------------ */
.hero {
  position: relative;
  padding-block: clamp(48px, 9vw, 104px) clamp(44px, 7vw, 84px);
  overflow: hidden;
}
/* One column on small screens, copy + hive on desktop.
   Constrain the headline and lede individually, never the whole copy block, or the body text
   ends up squeezed into a narrow ribbon on mobile. */
.hero__grid { display: grid; gap: 44px; }
@media (min-width: 960px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(36px, 5vw, 78px);
  }
}
.hero__copy > * + * { margin-top: 24px; }
.hero__copy .lede { max-width: 52ch; }
@media (min-width: 700px)  { .hero .display { max-width: 14ch; } }
@media (min-width: 1000px) { .hero .display { max-width: 13ch; } }
.hero .display .ln { display: block; }

/* ==========================================================================
   THE HIVE  -  the hero's right-hand side

   Six creators and the brand cell, tiled as a honeycomb, drifting slowly.

   WHY A HONEYCOMB AND NOT ANOTHER VIDEO STRIP. The creator wall immediately below is a
   horizontal marquee of vertical tiles; repeating that shape here would read as the same
   element twice. Hexagons are the brand mark and echo the hex pattern already in the hero
   background, so this reads as part of the page rather than an ornament dropped on it.

   THE TILING IS DONE BY flex centring, not by positioning. Rows of 2 / 3 / 2, each centred,
   put the outer rows exactly half a cell off from the middle one - which is the honeycomb
   offset, for free. Then each row is pulled up by a quarter of a cell's height so the points
   interlock. Absolute positioning would need seven sets of coordinates that all break the
   moment the cell size changes.
   ========================================================================== */
.hive {
  --hex-w: clamp(84px, 8.6vw, 118px);
  --hex-h: calc(var(--hex-w) * 1.1547);   /* regular pointy-top hexagon: h = w * 2/sqrt(3) */
  --hex-gap: 9px;
  display: none;                           /* desktop only, see the note in index.html */
}
@media (min-width: 960px) { .hive { display: block; } }

.hive__row { display: flex; justify-content: center; gap: var(--hex-gap); }
.hive__row + .hive__row { margin-top: calc(var(--hex-h) * -0.25 + var(--hex-gap) * 0.5); }

.hive__c {
  display: block;
  width: var(--hex-w);
  height: var(--hex-h);
  flex: none;
  overflow: hidden;
  background: var(--paper-alt);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  /* Negative delays, set per cell in the markup, so every cell starts already partway through
     its cycle. Positive delays would leave the whole cluster sitting still on load and then
     lurch into motion one cell at a time. */
  animation: hiveFloat 7s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
.hive__c img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hive__c--mark {
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, var(--honey) 0%, var(--honey-mid) 100%);
}
.hive__c--mark svg { width: 40%; height: auto; fill: var(--paper); }

@keyframes hiveFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* Motion here is decoration, and decoration is the first thing to drop when someone has asked
   the system to stop moving things. */
@media (prefers-reduced-motion: reduce) {
  .hive__c { animation: none; }
}

.hero-note {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--ink-3);
  flex-wrap: wrap;
}
.dot-pos {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--pos);
  flex: none;
  box-shadow: 0 0 0 3px var(--pos-wash);
}

/* honeycomb backdrop */
.hero__deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  z-index: -1;
  -webkit-mask-image: radial-gradient(120% 90% at 78% 12%, #000 0%, transparent 68%);
          mask-image: radial-gradient(120% 90% at 78% 12%, #000 0%, transparent 68%);
}

/* ---------- 8. Stat components ------------------------------------------ */
.statbar {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
@media (min-width: 800px) { .statbar { grid-template-columns: repeat(4, 1fr); } }
.statbar--3 { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 800px) { .statbar--3 { grid-template-columns: repeat(3, 1fr); } }

.stat {
  padding: 20px 18px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.stat__num {
  font-family: var(--serif);
  font-size: clamp(1.85rem, 4.4vw, 2.9rem);
  line-height: 1;
  letter-spacing: -0.02em;
  display: block;
  /* Tabular figures. Two reasons, and the second is the one that shows.
     Proportional digits set a four-column stat bar ragged, because a 1 is narrower than a 0 and
     the numbers stop lining up as a table. And these numerals are ANIMATED counters, so with
     proportional figures the whole block twitches horizontally on every frame as digits change
     width. Tabular fixes both, and does nothing at all if the face has no tabular set. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* The headline aggregate row.
   Borrowed from how the loudest direct-response agency sites carry their proof: the NUMBER is the
   headline, not the sentence above it. Ours were set smaller than the h2 they sat under, which
   reads as a footnote to the claim rather than the evidence for it. This variant is the only place
   the scale changes; the other stat bars stay quiet so this one can be loud. */
.statbar--lead .stat { padding: 28px 20px 24px; }
.statbar--lead .stat__num {
  font-size: clamp(2.5rem, 7.4vw, 4.3rem);
  letter-spacing: -0.035em;
}
.statbar--lead .stat__lbl { margin-top: 10px; }
.stat__lbl {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 9px;
  display: block;
}
.stat__sub { font-size: 0.78rem; color: var(--ink-4); margin-top: 5px; display: block; }

.section--night .stat { background: transparent; border-color: var(--night-rule); }
.section--night .statbar { border-color: var(--night-rule); }
.section--night .stat__lbl { color: var(--night-ink-2); }
.section--night .stat__num { color: var(--night-ink); }


.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 0.63rem; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 5px 9px; border-radius: 999px;
  border: 1px solid var(--rule); color: var(--ink-3); background: var(--paper);
  white-space: nowrap;
}
.badge--verified { color: var(--pos); border-color: #C4DCCF; background: var(--pos-wash); }
.badge--internal { color: var(--ink-3); border-color: var(--rule); background: var(--paper-alt); }
.badge--honey    { color: var(--honey-deep); border-color: var(--honey-line); background: var(--honey-wash); }
.badge--night    { color: var(--night-ink-2); border-color: var(--night-rule); background: transparent; }

/* ---------- 9. Cards ----------------------------------------------------- */
.card {
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.card > * + * { margin-top: 12px; }
.card--hover:hover {
  border-color: var(--ink-4);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -26px rgba(20,17,14,.3);
}
.card__idx {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: .1em;
  color: var(--honey-deep);
}

.section--night .card {
  background: var(--night-2);
  border-color: var(--night-rule);
  color: var(--night-ink);
}
.section--night .card p { color: var(--night-ink-2); }

/* Numbered step cards */
.steps { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; }
@media (min-width: 780px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { background: var(--paper-card); padding: 26px 22px 28px; }
.step__k {
  font-family: var(--serif);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--honey);
  display: block;
  margin-bottom: 14px;
}
.step h3 { margin-bottom: 8px; font-size: 1.28rem; }
.step p { font-size: 0.9rem; color: var(--ink-2); line-height: 1.6; }
.step__meta {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule-soft);
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-4);
}

/* ---------- 10. Brand / logo strip -------------------------------------- */
.logostrip {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 12px 30px;
}
.logostrip__item {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-family: var(--serif); font-size: 1.22rem; letter-spacing: -0.015em;
  color: var(--ink-2);
  transition: color .2s;
}
.logostrip__item:hover { color: var(--ink); }
.logostrip__item span {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-4);
}

/* ---------- 11. Case study cards ---------------------------------------- */
.case-card {
  display: block;
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
  height: 100%;
}
.case-card:hover {
  border-color: var(--ink-4);
  transform: translateY(-4px);
  box-shadow: 0 24px 50px -30px rgba(20,17,14,.34);
}
.case-card__viz {
  position: relative;
  background: var(--night);
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.case-card__viz img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .55s var(--ease);
}
.case-card:hover .case-card__viz img { transform: scale(1.045); }
.case-card__viz::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,10,8,.66) 0%, rgba(12,10,8,.05) 42%, rgba(12,10,8,.28) 100%);
}
.case-card__tag {
  position: absolute; top: 16px; left: 18px; z-index: 2;
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--honey);
}
.case-card__body { padding: 22px 22px 26px; }
.case-card__body > * + * { margin-top: 10px; }
.case-card h3 { font-size: 1.45rem; }
.case-card__metrics {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 16px !important; padding-top: 16px; border-top: 1px solid var(--rule-soft);
}
.chip {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: .05em;
  padding: 5px 9px; border-radius: 3px;
  background: var(--paper-alt); color: var(--ink-2);
  white-space: nowrap;
}
.chip--honey { background: var(--honey-wash); color: var(--honey-deep); }
.chip--pos { background: var(--pos-wash); color: var(--pos); }

/* ---------- 12. Case study page ----------------------------------------- */
.case-hero { padding-block: clamp(34px, 5vw, 62px) clamp(38px, 6vw, 70px); }
.case-hero__meta {
  display: flex; flex-wrap: wrap; gap: 8px 10px; margin-bottom: 24px;
}
.case-hero .display { font-size: clamp(2.15rem, 6.6vw, 4.35rem); }

.crumb {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 20px;
}
.crumb a:hover { color: var(--honey-deep); }

.prose { max-width: 68ch; }
.prose > * + * { margin-top: 20px; }
.prose p { color: var(--ink-2); font-size: 1.0625rem; line-height: 1.68; }
.prose h3 { margin-top: 40px; color: var(--ink); }
.prose h4 { margin-top: 28px; }
.prose ul { margin-top: 14px; }
.prose li {
  position: relative; padding-left: 22px; margin-bottom: 10px;
  color: var(--ink-2); font-size: 1rem; line-height: 1.6;
}
.prose li::before {
  content: ""; position: absolute; left: 3px; top: 10px;
  width: 6px; height: 7px; background: var(--honey);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.prose strong { font-weight: 600; color: var(--ink); }

.pull {
  border-left: 2px solid var(--honey);
  padding: 6px 0 6px 24px;
  margin-block: 34px;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.9vw, 1.85rem);
  line-height: 1.28;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.pull cite {
  display: block; margin-top: 14px;
  font-family: var(--sans); font-style: normal;
  font-size: 0.82rem; color: var(--ink-3); letter-spacing: 0;
}

.callout {
  background: var(--honey-wash);
  border: 1px solid var(--honey-line);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  margin-block: 30px;
}
.callout > * + * { margin-top: 10px; }
.callout p { color: #5C4A2A; font-size: 0.97rem; }
.callout h4 { color: #4A3A1E; }

.callout--ink {
  background: var(--night); border-color: var(--night-rule);
}
.callout--ink h4 { color: var(--night-ink); }
.callout--ink p { color: var(--night-ink-2); }

/* Section anchor nav inside case study */
.case-toc {
  position: sticky; top: 66px; z-index: 90;
  background: rgba(250,248,244,.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-block: 1px solid var(--rule);
  margin-bottom: 0;
}
@media (min-width: 900px) { .case-toc { top: 76px; } }
.case-toc__in {
  display: flex; gap: 24px; overflow-x: auto; scrollbar-width: none;
  padding-block: 13px;
}
.case-toc__in::-webkit-scrollbar { display: none; }
.case-toc a {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3); white-space: nowrap;
  padding-bottom: 3px; border-bottom: 1.5px solid transparent;
  transition: color .2s, border-color .2s;
}
.case-toc a:hover, .case-toc a.is-active { color: var(--ink); border-color: var(--honey); }

/* ---------- 13. Figures & charts ---------------------------------------- */
.figure {
  margin-block: 34px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--paper-card);
  overflow: hidden;
}
.figure__hd {
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--rule-soft);
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.figure__ttl { font-weight: 600; font-size: 0.95rem; letter-spacing: -0.005em; }
.figure__sub { font-size: 0.82rem; color: var(--ink-3); margin-top: 3px; }
.figure__body { padding: 22px; overflow-x: auto; }
.figure__body > svg { min-width: 460px; width: 100%; height: auto; }
.figure__ft {
  padding: 12px 22px 16px;
  border-top: 1px solid var(--rule-soft);
  font-size: 0.76rem; color: var(--ink-4); line-height: 1.5;
  background: var(--paper-alt);
}
.figure--night { background: var(--night); border-color: var(--night-rule); }
.figure--night .figure__hd { border-color: var(--night-rule); }
.figure--night .figure__ttl { color: var(--night-ink); }
.figure--night .figure__sub { color: var(--night-ink-2); }
.figure--night .figure__ft { background: var(--night-2); border-color: var(--night-rule); color: var(--night-ink-2); }

/* SVG chart primitives */
.ch-grid  { stroke: var(--rule); stroke-width: 1; }
.ch-axis  { stroke: var(--ink-4); stroke-width: 1; }
.ch-lbl   { font-family: var(--mono); font-size: 10px; fill: var(--ink-3); letter-spacing: .04em; }
.ch-lbl-s { font-family: var(--mono); font-size: 9px;  fill: var(--ink-4); letter-spacing: .04em; }
.ch-val   { font-family: var(--sans); font-size: 12px; font-weight: 600; fill: var(--ink); }
.ch-val-lg{ font-family: var(--serif); font-size: 22px; fill: var(--ink); }
.figure--night .ch-lbl   { fill: var(--night-ink-2); }
.figure--night .ch-lbl-s { fill: #8C8272; }
.figure--night .ch-val   { fill: var(--night-ink); }
.figure--night .ch-grid  { stroke: var(--night-rule); }
.figure--night .ch-axis  { stroke: #4E4638; }

/* Legend */
.legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 16px; }
.legend__i {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.78rem; color: var(--ink-2);
}
.legend__sw { width: 11px; height: 11px; border-radius: 2px; flex: none; }
.figure--night .legend__i { color: var(--night-ink-2); }

/* Data table fallback */
.data-table { font-size: 0.85rem; }
.data-table th, .data-table td {
  padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--rule-soft);
}
.data-table th {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 500;
  border-bottom-color: var(--rule);
}
.data-table td { color: var(--ink-2); }
.data-table td:first-child { color: var(--ink); font-weight: 500; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table .num { font-family: var(--mono); font-size: 0.8rem; text-align: right; }
.data-table th.num { text-align: right; }

details.table-toggle { margin-top: 16px; }
details.table-toggle summary {
  cursor: pointer; font-family: var(--mono); font-size: 0.68rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
  list-style: none; display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 0;
}
details.table-toggle summary::-webkit-details-marker { display: none; }
details.table-toggle summary::before { content: "＋"; font-size: .9em; }
details.table-toggle[open] summary::before { content: "－"; }
details.table-toggle summary:hover { color: var(--ink); }

/* ---------- 14. Flow diagram -------------------------------------------- */
.flow {
  display: grid; gap: 14px;
  counter-reset: flowstep;
}
@media (min-width: 900px) {
  .flow--h { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; }
}
.flow__node {
  position: relative;
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 20px 18px;
}
@media (min-width: 900px) {
  .flow--h .flow__node { border-radius: 0; border-right: 0; }
  .flow--h .flow__node:first-child { border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
  .flow--h .flow__node:last-child {
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    border-right: 1px solid var(--rule);
  }
}
.flow__node h4 { margin-bottom: 7px; }
.flow__node p { font-size: 0.86rem; color: var(--ink-3); line-height: 1.55; }
.flow__k {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: .1em;
  color: var(--honey-deep); display: block; margin-bottom: 10px;
}
.flow__node--out { background: var(--honey-wash); border-color: var(--honey-line); }

/* ---------- 15. Video wall ---------------------------------------------- */
.reel {
  display: grid; gap: 14px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 760px)  { .reel { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
@media (min-width: 1060px) { .reel { grid-template-columns: repeat(4, 1fr); } }

.vid {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--night);
  border: 1px solid var(--night-rule);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 12px;
  text-align: left;
  width: 100%;
  transition: transform .28s var(--ease), border-color .28s var(--ease);
  isolation: isolate;
}
.vid:hover { transform: translateY(-3px); border-color: var(--honey-mid); }

/* still frame */
.vid__img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.vid:hover .vid__img { transform: scale(1.045); }

/* scrim so the hook text stays legible over any photo */
.vid::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(12,10,8,.62) 0%, rgba(12,10,8,.12) 34%,
                    rgba(12,10,8,.55) 68%, rgba(12,10,8,.88) 100%);
}
/* fallback tint when no still has been generated yet */
.vid--empty::before {
  background:
    radial-gradient(90% 60% at 30% 8%, rgba(224,162,28,.22), transparent 62%),
    linear-gradient(180deg, #23201A 0%, #14120F 100%);
}

/* ---------- 15b. Photography ------------------------------------------- */
.shot {
  margin-block: 34px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--paper-card);
}
.shot img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 16 / 9; object-fit: cover;
}
.shot figcaption {
  padding: 12px 18px 14px;
  font-size: 0.78rem; line-height: 1.5; color: var(--ink-3);
  border-top: 1px solid var(--rule-soft);
  background: var(--paper-alt);
}
.shot figcaption b { color: var(--ink-2); font-weight: 600; }
.section--night .shot { border-color: var(--night-rule); background: var(--night-2); }
.section--night .shot figcaption {
  background: var(--night-2); border-color: var(--night-rule); color: var(--night-ink-2);
}

/* full-bleed-ish hero image directly under a case headline */
.shot--hero { margin-top: 0; }
.shot--hero img { aspect-ratio: 21 / 9; }
@media (max-width: 700px) { .shot--hero img { aspect-ratio: 16 / 10; } }

/* ---------- 15f. Case cover ---------------------------------------------
   The campaign headline image with the numbers set over it. Text is real
   HTML, not baked into the picture: it stays sharp at any size, is
   editable, and screen readers can read it.                              */
.case-cover {
  margin-top: 34px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--night);
  border: 1px solid var(--rule);
}
/* The overlay is scoped to the media box, never the whole figure, or it
   sits on top of the caption underneath. */
.case-cover__media { position: relative; isolation: isolate; }
.case-cover img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 16 / 9; object-fit: cover;
}
@media (min-width: 900px) { .case-cover img { aspect-ratio: 21 / 9; } }
.case-cover__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,8,6,.5) 0%, rgba(10,8,6,.06) 30%,
                              rgba(10,8,6,.18) 52%, rgba(10,8,6,.8) 88%, rgba(10,8,6,.93) 100%);
}
.case-cover__in {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 16px 18px;
}
@media (min-width: 780px) { .case-cover__in { padding: 22px 26px; } }

.case-cover__tag {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--honey);
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.case-cover__stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 18px;
}
@media (min-width: 640px) { .case-cover__stats { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
.case-cover__stats div { min-width: 0; }
.case-cover__stats b {
  display: block;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.35rem, 4vw, 2.4rem); line-height: 1;
  letter-spacing: -0.02em; color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.5);
}
.case-cover__stats span {
  display: block; margin-top: 5px;
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.78);
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.case-cover__cap {
  padding: 12px 18px 14px;
  font-size: 0.78rem; line-height: 1.5; color: var(--ink-3);
  border-top: 1px solid var(--rule-soft);
  background: var(--paper-alt);
}
.case-cover__cap b { color: var(--ink-2); font-weight: 600; }

/* two images side by side */
.shot-duo { display: grid; gap: 14px; margin-block: 34px; }
@media (min-width: 780px) { .shot-duo { grid-template-columns: 1fr 1fr; gap: 18px; } }
.shot-duo .shot { margin-block: 0; }
.shot-duo .shot img { aspect-ratio: 4 / 3; }

/* creator portrait row */
.portraits { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); margin-top: 22px; }
@media (min-width: 900px) { .portraits { gap: 18px; } }
.portrait {
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--rule); background: var(--paper-card);
}
.portrait img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.portrait figcaption {
  padding: 11px 14px 13px; font-size: 0.78rem; color: var(--ink-3); line-height: 1.45;
  border-top: 1px solid var(--rule-soft);
}
.portrait figcaption b { display: block; color: var(--ink); font-weight: 600; font-size: 0.84rem; margin-bottom: 2px; }
.section--night .portrait { border-color: var(--night-rule); background: var(--night-2); }
.section--night .portrait figcaption { color: var(--night-ink-2); border-color: var(--night-rule); }
.section--night .portrait figcaption b { color: var(--night-ink); }

/* image used as a wide band inside a dark section */
.shot--band { margin-block: 0; border-radius: var(--radius-lg); }

/* ---------- 15c. Creator wall (marquee) --------------------------------
   A CSS marquee rather than an animated GIF: sharper, a fraction of the
   weight, and it can be stopped for prefers-reduced-motion.             */
.wall {
  position: relative;
  overflow: hidden;
  padding-block: 4px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.wall__track {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: wallScroll 64s linear infinite;
}
.wall--rev .wall__track { animation-direction: reverse; }
.wall:hover .wall__track { animation-play-state: paused; }
@keyframes wallScroll {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-50%,0,0); }
}
@media (prefers-reduced-motion: reduce) {
  .wall__track { animation: none; }
  .wall { overflow-x: auto; }
}

.wall__i {
  position: relative;
  flex: none;
  width: 148px;
  aspect-ratio: 9 / 16;
  border-radius: 7px;
  overflow: hidden;
  background: var(--night);
  border: 1px solid var(--night-rule);
}
@media (min-width: 760px) { .wall__i { width: 178px; } }
.wall__i img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Scrim kept as low and light as legibility allows, so the bright colourful
   frame stays the thing you actually see. */
.wall__i::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,10,8,.42) 0%, rgba(12,10,8,.02) 26%,
                              rgba(12,10,8,.06) 54%, rgba(12,10,8,.62) 80%,
                              rgba(12,10,8,.92) 100%);
}

/* platform chip, top-left, like a native post label */
.wall__plat {
  position: absolute; left: 8px; top: 8px; z-index: 2;
  font-family: var(--mono); font-size: 0.5rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--honey);
}
/* the hook caption, set like an on-screen UGC caption */
.wall__cap {
  position: absolute; left: 9px; right: 9px; bottom: 24px; z-index: 2;
  font-family: var(--sans); font-size: 0.68rem; font-weight: 600;
  line-height: 1.28; letter-spacing: -0.005em;
  color: #fff; text-wrap: pretty;
  text-shadow: 0 1px 3px rgba(0,0,0,.55);
}
@media (min-width: 760px) { .wall__cap { font-size: 0.74rem; bottom: 26px; } }
/* vertical + view count footer */
.wall__meta {
  position: absolute; left: 9px; right: 9px; bottom: 8px; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  font-family: var(--mono); font-size: 0.5rem; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(243,238,228,.72);
}

/* ---------- 15d. Team -------------------------------------------------- */
.team {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (min-width: 620px)  { .team { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
@media (min-width: 900px)  { .team { grid-template-columns: repeat(5, 1fr); } }

.member { text-align: left; }
.member__ph {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  margin-bottom: 11px;
}
.member__ph img {
  width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block;
  transition: transform .5s var(--ease);
}
.member:hover .member__ph img { transform: scale(1.04); }
.member__dept {
  position: absolute; left: 8px; top: 8px; z-index: 2;
  font-family: var(--mono); font-size: 0.54rem; letter-spacing: .1em;
  text-transform: uppercase;
  background: rgba(250,248,244,.92);
  color: var(--ink-2);
  padding: 4px 7px; border-radius: 3px;
}
.member__name {
  font-family: var(--sans); font-weight: 600; font-size: 0.9rem;
  letter-spacing: -0.005em; line-height: 1.25;
}
.member__role {
  font-size: 0.78rem; color: var(--ink-3); line-height: 1.4; margin-top: 3px;
}
.section--night .member__name { color: var(--night-ink); }
.section--night .member__role { color: var(--night-ink-2); }
.section--night .member__ph { border-color: var(--night-rule); background: var(--night-2); }
.section--night .member__dept { background: rgba(22,19,15,.88); color: var(--night-ink-2); }

/* ---------- 15e. Split feature (image + copy) --------------------------- */
.split { display: grid; gap: 26px; align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: 52px; }
  .split--rev .split__media { order: 2; }
}
.split__media {
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--rule); background: var(--paper-card);
}
.split__media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.section--night .split__media { border-color: var(--night-rule); }

/* stacked/offset image pair */
.stack-img { position: relative; padding-bottom: 46px; padding-right: 34px; }
.stack-img__a, .stack-img__b {
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--rule);
  box-shadow: 0 22px 48px -28px rgba(20,17,14,.4);
  background: var(--paper-card);
}
.stack-img__a img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; display: block; }
.stack-img__b {
  position: absolute; right: 0; bottom: 0; width: 46%;
  border-color: var(--paper);
  border-width: 4px;
}
.stack-img__b img { width: 100%; height: auto; aspect-ratio: 9/16; object-fit: cover; display: block; }
@media (max-width: 560px) { .stack-img { padding-bottom: 30px; padding-right: 20px; } }
.vid__plat {
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--honey);
}
.vid__hook {
  font-family: var(--serif); font-size: 1.02rem; line-height: 1.2;
  color: var(--night-ink); margin-top: auto; margin-bottom: 9px;
  text-wrap: balance;
}
.vid__meta {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: .05em;
  color: var(--night-ink-2);
  border-top: 1px solid var(--night-rule); padding-top: 8px;
}
.vid__play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(250,248,244,.14);
  border: 1px solid rgba(250,248,244,.28);
  display: grid; place-items: center;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.vid:hover .vid__play { background: var(--honey); transform: translate(-50%,-50%) scale(1.08); }
.vid:hover .vid__play svg { fill: var(--ink); }
.vid__play svg { fill: var(--night-ink); width: 13px; height: 13px; margin-left: 2px; }

/* ---------- 16. Pricing -------------------------------------------------- */
.plans { display: grid; gap: 20px; }
@media (min-width: 980px) { .plans { grid-template-columns: repeat(3, 1fr); gap: 0; align-items: stretch; } }

.plan {
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 28px 24px 30px;
  display: flex; flex-direction: column;
}
@media (min-width: 980px) {
  .plan { border-radius: 0; border-right: 0; }
  .plan:first-child { border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
  .plan:last-child  { border-radius: 0 var(--radius-lg) var(--radius-lg) 0; border-right: 1px solid var(--rule); }
}
.plan--feat {
  background: var(--night);
  border-color: var(--night);
  color: var(--night-ink);
  position: relative;
}
@media (min-width: 980px) {
  .plan--feat { border-radius: var(--radius-lg); margin-block: -14px; border-right: 1px solid var(--night); z-index: 2;
                box-shadow: 0 30px 60px -34px rgba(20,17,14,.5); }
}
.plan--feat .plan__name { color: var(--honey); }
.plan--feat .plan__price, .plan--feat h3 { color: var(--night-ink); }
/* These must out-specify `.plan__list li` (0,1,1), which is declared later and
   would otherwise paint dark charcoal text onto the near-black featured card. */
.plan--feat .plan__desc { color: var(--night-ink-2); }
.plan--feat .plan__list li { color: var(--night-ink-2); }
.plan--feat .plan__list li::before { background: var(--honey); }
.plan--feat .plan__meta { border-color: var(--night-rule); color: var(--night-ink-2); }

.plan__name {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--honey-deep); margin-bottom: 14px;
}
.plan__price {
  font-family: var(--serif); font-size: clamp(2.3rem, 5vw, 3rem);
  line-height: 1; letter-spacing: -0.02em; display: flex; align-items: baseline; gap: 6px;
}
.plan__price small {
  font-family: var(--sans); font-size: 0.82rem; font-weight: 400;
  color: var(--ink-3); letter-spacing: 0;
}
.plan--feat .plan__price small { color: var(--night-ink-2); }
.plan__desc { font-size: 0.9rem; color: var(--ink-3); margin-top: 12px; line-height: 1.55; }
.plan__list { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--rule-soft); }
.plan--feat .plan__list { border-color: var(--night-rule); }
.plan__list li {
  position: relative; padding-left: 20px; margin-bottom: 11px;
  font-size: 0.9rem; line-height: 1.5; color: var(--ink-2);
}
.plan__list li::before {
  content: ""; position: absolute; left: 2px; top: 8px;
  width: 6px; height: 7px; background: var(--honey-mid);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.plan__list li b { color: var(--ink); font-weight: 600; }
.plan--feat .plan__list li b { color: var(--night-ink); }
.plan__cta { margin-top: auto; padding-top: 26px; }
.plan__meta {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule-soft);
  font-size: 0.76rem; color: var(--ink-4); line-height: 1.5;
}
.plan__flag {
  position: absolute; top: 20px; right: 20px;
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--night);
  background: var(--honey); padding: 4px 9px; border-radius: 999px;
}

/* Fee explainer */
.fee-box {
  border: 1px solid var(--rule); border-radius: var(--radius-lg);
  background: var(--paper-card); overflow: hidden;
}
.fee-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--rule-soft);
  font-size: 0.92rem;
}
.fee-row span:last-child { font-family: var(--mono); font-size: 0.86rem; white-space: nowrap; }
.fee-row--total {
  background: var(--night); color: var(--night-ink); border-bottom: 0; font-weight: 600;
}
.fee-row--total span:last-child { color: var(--honey); font-size: 1rem; }
.fee-row small { display: block; color: var(--ink-4); font-size: 0.76rem; margin-top: 2px; font-family: var(--sans); }

/* ---------- 17. FAQ / accordion ----------------------------------------- */
.faq { border-top: 1px solid var(--rule); }
.faq__i { border-bottom: 1px solid var(--rule); }
.faq__q {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; padding: 22px 0; text-align: left;
  font-family: var(--serif); font-size: clamp(1.1rem, 2.2vw, 1.32rem);
  line-height: 1.3; letter-spacing: -0.01em;
  transition: color .2s;
}
.faq__q:hover { color: var(--honey-deep); }
.faq__ic {
  flex: none; width: 20px; height: 20px; margin-top: 4px; position: relative;
}
.faq__ic::before, .faq__ic::after {
  content: ""; position: absolute; background: var(--ink-3);
  left: 50%; top: 50%; transition: transform .3s var(--ease), opacity .2s;
}
.faq__ic::before { width: 13px; height: 1.5px; transform: translate(-50%,-50%); }
.faq__ic::after  { width: 1.5px; height: 13px; transform: translate(-50%,-50%); }
.faq__i.is-open .faq__ic::after { transform: translate(-50%,-50%) rotate(90deg); opacity: 0; }
.faq__a {
  overflow: hidden; max-height: 0;
  transition: max-height .38s var(--ease);
}
.faq__a-in { padding-bottom: 24px; max-width: 66ch; }
.faq__a-in p { color: var(--ink-2); font-size: 0.97rem; line-height: 1.65; }
.faq__a-in p + p { margin-top: 12px; }

/* ---------- 18. Network map --------------------------------------------- */
.netgrid { display: grid; gap: 26px; }
@media (min-width: 940px) { .netgrid { grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } }

.bar-list { display: grid; gap: 13px; }
.bar-item__hd {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: 0.86rem; margin-bottom: 6px;
}
.bar-item__hd b { font-weight: 500; }
.bar-item__hd span { font-family: var(--mono); font-size: 0.76rem; color: var(--ink-3); }
.bar-track { height: 6px; border-radius: 3px; background: var(--paper-deep); overflow: hidden; }
.bar-fill {
  height: 100%; border-radius: 3px; background: var(--honey);
  width: 0; transition: width 1.1s var(--ease);
}
.section--night .bar-track { background: var(--night-rule); }
.section--night .bar-item__hd { color: var(--night-ink); }
.section--night .bar-item__hd span { color: var(--night-ink-2); }

/* ---------- 19. Modal (audit + booking) --------------------------------- */
.modal {
  position: fixed; inset: 0; z-index: 500;
  display: grid; place-items: center;
  padding: 16px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .3s var(--ease), visibility .3s;
}
.modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.modal__scrim {
  position: absolute; inset: 0;
  background: rgba(20,17,14,.55);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.modal__panel {
  position: relative;
  width: 100%; max-width: 620px;
  max-height: calc(100dvh - 32px);
  background: var(--paper);
  border-radius: 12px;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 40px 90px -30px rgba(20,17,14,.5);
  transform: translateY(14px) scale(.985);
  transition: transform .34s var(--ease);
}
.modal.is-open .modal__panel { transform: none; }

.modal__bar { height: 3px; background: var(--paper-deep); flex: none; }
.modal__bar-fill {
  height: 100%; background: var(--honey);
  width: 0%; transition: width .5s var(--ease);
}

.modal__hd {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 16px 20px 12px; flex: none;
}
.modal__step {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}
.modal__x {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; color: var(--ink-3);
  transition: background .2s, color .2s;
  flex: none;
}
.modal__x:hover { background: var(--paper-deep); color: var(--ink); }

.modal__body { padding: 6px 20px 20px; overflow-y: auto; flex: 1 1 auto; }
@media (min-width: 620px) { .modal__body { padding: 10px 34px 26px; } .modal__hd { padding: 20px 34px 12px; } }

.modal__ft {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 20px 18px; border-top: 1px solid var(--rule); flex: none;
  background: var(--paper-alt);
}
@media (min-width: 620px) { .modal__ft { padding: 16px 34px 20px; } }

.fstep { display: none; }
.fstep.is-active { display: block; animation: fstepIn .38s var(--ease) both; }
@keyframes fstepIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.fstep h3 { font-size: clamp(1.4rem, 4vw, 1.85rem); margin-bottom: 8px; }
.fstep__hint { font-size: 0.88rem; color: var(--ink-3); margin-bottom: 22px; }

.field { margin-bottom: 18px; }
.field__lbl {
  display: block; font-size: 0.8rem; font-weight: 500;
  color: var(--ink-2); margin-bottom: 7px;
}
.field__lbl .req { color: var(--honey-deep); }
.input, .textarea, .select {
  width: 100%; padding: 13px 15px;
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: 6px;
  font-size: 1rem;
  transition: border-color .2s, box-shadow .2s;
  -webkit-appearance: none; appearance: none;
}
.input:focus, .textarea:focus, .select:focus {
  outline: 0; border-color: var(--honey-mid);
  box-shadow: 0 0 0 3px rgba(224,162,28,.16);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-4); }
.textarea { min-height: 96px; resize: vertical; line-height: 1.55; }
.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23786F62' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center;
  padding-right: 40px;
}
.input.has-err, .textarea.has-err, .select.has-err { border-color: var(--neg); }
.err-msg { display: none; font-size: 0.78rem; color: var(--neg); margin-top: 6px; }
.err-msg.is-on { display: block; }

/* Honeypot.
   Moved off-screen rather than display:none or hidden, because the bots worth catching skip
   fields hidden those two ways and fill this one. It must stay unreachable for anyone real:
   aria-hidden and tabindex=-1 keep it out of the accessibility tree and the tab order, so a
   screen reader never announces it and a keyboard user never lands in it. */
.hp-field {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   COMMITMENTS  -  the risk-reversal block

   The one device the aggressive direct-response agencies lean on hardest and we had nothing
   equivalent to: a visible, bounded promise placed immediately after the price, answering "what
   happens if this doesn't work" at the exact moment the reader thinks it.

   Ours is deliberately NOT a fabricated performance guarantee. Every line in it is a commitment
   already made elsewhere on this site, in the FAQ, where nobody deciding whether to enquire ever
   scrolls. This is packaging, not a new promise.

   Light, not loud. Their version is a black box shouting in condensed caps; a honey rule and a
   warm wash carries the same "stop here" weight without breaking a paper-and-ink page.
   ========================================================================== */
.commit {
  border: 1px solid var(--honey-line);
  border-left: 3px solid var(--honey);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(224, 162, 28, 0.055), rgba(224, 162, 28, 0.015));
  padding: clamp(24px, 4vw, 40px);
}
.commit__hd { margin-bottom: 26px; }
.commit__list {
  display: grid;
  gap: 22px 40px;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 780px) { .commit__list { grid-template-columns: 1fr 1fr; } }
.commit__item { position: relative; padding-left: 30px; }
.commit__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--honey-deep);
  /* The tick, drawn rather than typed, so it never depends on an emoji font or a glyph the
     reader's system renders as a box. */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3E%3Cpath d='M4.4 8.8l2.7 2.7 5.5-5.5' stroke='black' stroke-width='1.9' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 17px 17px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3E%3Cpath d='M4.4 8.8l2.7 2.7 5.5-5.5' stroke='black' stroke-width='1.9' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 17px 17px no-repeat;
}
.commit__t {
  display: block;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 5px;
  font-size: 1.02rem;
}
.commit__d {
  display: block;
  color: var(--ink-2);
  font-size: 0.93rem;
  line-height: 1.62;
}

/* Timezone line under the day/time pickers. Says which clock the times are on, because a slot
   list with no timezone on it is the single most common way a call gets missed. */
/* Block, NOT flex. Under `display:flex` every child becomes a flex item, and that includes the
   bare text nodes - so the full stop sitting between "</b>" and the button became an item of its
   own with a gap on each side, and the line rendered as "(GMT+5:30) . Not your timezone?".
   Normal inline flow keeps the punctuation attached to the word before it. */
.tzline {
  display: block;
  margin: -6px 0 18px;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--ink-3);
}
.tzline__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--c2);
  vertical-align: middle;
}
.tzline b { color: var(--ink-2); font-weight: 500; }
.tzline__btn {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--honey-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.tzline__btn:hover { color: var(--ink); }

/* The confirmed slot, echoed back on the success screen. */
.slot-confirm {
  margin: 0 0 14px;
  padding: 11px 16px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--paper-alt);
  font-size: 0.92rem;
  color: var(--ink-2);
}
.slot-confirm b { color: var(--ink); font-weight: 600; }

/* Shown only when a submission genuinely failed. */
.send-err {
  margin: 0;
  padding: 12px 26px 14px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--neg);
  background: rgba(192, 69, 42, 0.07);
  border-top: 1px solid rgba(192, 69, 42, 0.2);
}
.send-err a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.field-row { display: grid; gap: 14px; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }

/* Choice pills */
.choices { display: grid; gap: 9px; }
.choices--2 { grid-template-columns: 1fr; }
@media (min-width: 480px) { .choices--2 { grid-template-columns: 1fr 1fr; } }

.choice {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 15px;
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: 7px;
  cursor: pointer;
  transition: border-color .18s, background .18s, transform .18s;
  text-align: left;
  width: 100%;
  font-size: 0.94rem;
}
.choice:hover { border-color: var(--ink-4); }
.choice.is-sel {
  border-color: var(--honey-mid);
  background: var(--honey-wash);
}
.choice__k {
  flex: none; width: 22px; height: 22px; border-radius: 4px;
  border: 1px solid var(--rule); background: var(--paper);
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 0.66rem; color: var(--ink-3);
  transition: background .18s, color .18s, border-color .18s;
}
.choice.is-sel .choice__k {
  background: var(--honey); border-color: var(--honey); color: var(--ink); font-weight: 600;
}
.choice__t { flex: 1; }
.choice__t small { display: block; color: var(--ink-3); font-size: 0.78rem; margin-top: 1px; }

/* Success */
.fdone { text-align: center; padding-block: 22px 8px; }
.fdone__ic {
  width: 62px; height: 62px; margin: 0 auto 22px;
  display: grid; place-items: center;
  background: var(--honey-wash); border: 1px solid var(--honey-line);
  border-radius: 50%;
}
.fdone h3 { margin-bottom: 10px; }
.fdone p { color: var(--ink-2); max-width: 44ch; margin-inline: auto; font-size: 0.97rem; }
.fdone__next {
  margin-top: 26px; text-align: left;
  background: var(--paper-card); border: 1px solid var(--rule);
  border-radius: var(--radius-lg); padding: 18px 20px;
}
.fdone__next li {
  position: relative; padding-left: 26px; font-size: 0.88rem;
  color: var(--ink-2); margin-bottom: 10px; line-height: 1.5;
}
.fdone__next li:last-child { margin-bottom: 0; }
.fdone__next li b { color: var(--ink); font-weight: 600; }
.fdone__next li::before {
  content: counter(nx); counter-increment: nx;
  position: absolute; left: 0; top: 0;
  font-family: var(--mono); font-size: 0.68rem; color: var(--honey-deep);
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--honey-wash); display: grid; place-items: center;
  margin-top: 2px;
}
.fdone__next ol { counter-reset: nx; }

/* ---------- 20. CTA band ------------------------------------------------- */
.cta-band {
  background: var(--night);
  color: var(--night-ink);
  border-radius: 14px;
  padding: clamp(34px, 6vw, 62px) clamp(24px, 5vw, 58px);
  position: relative;
  overflow: hidden;
}
.cta-band__deco {
  position: absolute; right: -60px; top: -60px; width: 320px; opacity: .16; pointer-events: none;
}
.cta-band__in { position: relative; max-width: 620px; }
.cta-band h2 { color: var(--night-ink); margin-bottom: 16px; }
.cta-band p { color: var(--night-ink-2); font-size: 1.02rem; }
.cta-band .btn-row { margin-top: 28px; }
.cta-band__note {
  margin-top: 22px; font-size: 0.8rem; color: #8C8272;
  display: flex; flex-wrap: wrap; gap: 6px 18px;
}

/* ---------- 21. Footer --------------------------------------------------- */
.ftr {
  border-top: 1px solid var(--rule);
  padding-block: 48px 32px;
  background: var(--paper-alt);
}
.ftr__top { display: grid; gap: 32px; }
@media (min-width: 860px) { .ftr__top { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; } }
.ftr__col h5 {
  font-family: var(--mono); font-size: 0.65rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-4); margin-bottom: 14px; font-weight: 500;
}
.ftr__col li { margin-bottom: 9px; }
.ftr__col a { font-size: 0.9rem; color: var(--ink-2); transition: color .18s; }
.ftr__col a:hover { color: var(--honey-deep); }
.ftr__blurb { font-size: 0.9rem; color: var(--ink-3); max-width: 34ch; margin-top: 14px; line-height: 1.6; }
.ftr__bot {
  margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between;
  font-size: 0.78rem; color: var(--ink-4);
}

/* ---------- 22. Reveal animation ----------------------------------------
   Gated on html.js so that if JavaScript fails to load or errors out, every
   .rv block still renders at full opacity instead of an invisible page.     */
.js .rv { opacity: 0; transform: translateY(18px); }
.js .rv.is-in {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js .rv-d1.is-in { transition-delay: .07s; }
.js .rv-d2.is-in { transition-delay: .14s; }
.js .rv-d3.is-in { transition-delay: .21s; }
.js .rv-d4.is-in { transition-delay: .28s; }
@media (prefers-reduced-motion: reduce) {
  .js .rv { opacity: 1; transform: none; }
}

/* ---------- 23. Utilities ------------------------------------------------ */
.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;
}
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 999;
  background: var(--ink); color: var(--paper);
  padding: 10px 18px; border-radius: 6px; font-size: 0.85rem;
  transition: top .2s;
}
.skip:focus { top: 12px; }

.mono { font-family: var(--mono); }
.nowrap { white-space: nowrap; }
.tac { text-align: center; }
.mt-0 { margin-top: 0 !important; }
.mt-s { margin-top: 12px; }
.mt-m { margin-top: 24px; }
.mt-l { margin-top: 40px; }
.mt-xl { margin-top: 60px; }
.mb-m { margin-bottom: 24px; }
.mb-l { margin-bottom: 40px; }
.hide-sm { display: none; }
@media (min-width: 700px) { .hide-sm { display: block; } }

.divider { height: 1px; background: var(--rule); border: 0; margin-block: 0; }