/* Cureton Advisory Services — site styles */

:root {
  --bg: #ffffff;
  --ink: #111111;
  --ink-2: #2a2a2a;
  --muted: #6b6b6b;
  --muted-2: #8a8a8a;
  --line: #e7e7e7;
  --card: #f4f3ef;
  --accent-dark-bg: #c8974a;   /* camel — accent on DARK sections (~7:1) */
  --accent-light-bg: #955B0B;  /* marigold — accent on LIGHT sections (WCAG AA ~5.3:1) */
  --accent: /*ACCENT*/ #955B0B /*/ACCENT*/; /* safe default = light-bg marigold */
  --dark: #0e0e0e;
  --dark-2: #181818;
  --dark-3: #232323;
  --dark-line: #2d2d2d;
  --slate: #4a5260;
  --slate-2: #3b424d;
  --pill-dark: #1b1b1b;
  --pill-light: #ececea;

  --f-display: 'Instrument Serif', 'Times New Roman', serif;
  --f-sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'Geist Mono', 'SFMono-Regular', ui-monospace, Menlo, monospace;

  --maxw: 1240px;
  --pad: clamp(20px, 4vw, 48px);
  --radius: 14px;
  --radius-lg: 22px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--f-sans);
  color: var(--ink);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* Typography */
h1, h2, h3, h4 {
  font-family: var(--f-sans);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(40px, 6.2vw, 64px); }
h2 { font-size: clamp(32px, 4.4vw, 46px); }
h3 { font-size: clamp(22px, 2.2vw, 30px); }

.display {
  font-family: var(--f-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1;
}

p { margin: 0; text-wrap: pretty; }
.lead { font-size: clamp(16px, 1.3vw, 19px); color: var(--muted); max-width: 56ch; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* Optical centering: mono uppercase at 0.12em tracking leaves ~1.32px of
     trailing space after the final glyph, so a symmetric 14/14 pad reads
     right-heavy (last ink sits 14+1.32 from the edge, first ink 14). Trimming
     the right pad by exactly one tracking unit lands the last ink 14px from the
     edge, matching the left. */
  padding: 7px calc(14px - 0.12em) 7px 14px;
  border-radius: 999px;
  background: var(--pill-light);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-family: var(--f-mono);
}
/* letter-spacing:0 on the "/" removes its own trailing tracking, so the space
   between the slash and the first word is exactly the 8px flex gap on every
   pill, not 8px + a tracking unit. */
.eyebrow::before { content: '/'; opacity: 0.45; letter-spacing: 0; }
/* A ™/superscript inside a pill inherits the 1.32px trailing tracking of the
   letter before it, detaching it. Pulling it back by one tracking unit seats it
   snug against its final letter; the tail (e.g. " · ") then follows at normal
   spacing. The value is -1.32px, not -0.12em: `em` on the ™ resolves against its
   own 0.45em font-size (~4.95px → only -0.59px), so the fixed px = one tracking
   unit at the pill's 11px. Scoped to .eyebrow so global ™ usage is untouched. */
.eyebrow .tm { margin-left: -1.32px; }
/* Utility: keeps a word and its trailing ™ (or any pair) from breaking apart. */
.nb { white-space: nowrap; }
/* Long hero eyebrows (CRS, 5M's) wrapped badly at phone widths: .eyebrow is an
   inline-flex, so the "/" pseudo and the text are two separate flex items and the
   text wrapped in a narrow second column beside the slash, producing a broken
   two-column shape up to three lines tall. Switching to inline-block below 480px
   puts the slash and the text in ONE wrapping flow so the pill sets as centered
   full-width lines; the flex `gap` no longer applies there, so the slash carries
   an equivalent margin instead. Size and tracking come down only as far as needed
   to fit two lines. Colors, padding and the desktop pill are untouched. */
@media (max-width: 480px) {
  :is(.page-hero, .pb-hero, .hero, .ct-hero, .section--hero) .eyebrow {
    display: inline-block;
    max-width: 100%;
    text-align: center;
    line-height: 1.5;
    font-size: 10px;
    letter-spacing: 0.08em;
  }
  :is(.page-hero, .pb-hero, .hero, .ct-hero, .section--hero) .eyebrow::before { margin-right: 8px; }
}

.eyebrow--dark { background: rgba(255,255,255,0.07); color: #cfcfcf; }
.eyebrow--accent { background: color-mix(in oklab, var(--accent) 20%, transparent); color: var(--accent); }

/* Layout primitives */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }

/* DEAD-SPACE PASS: two flush .section blocks stacked their vertical padding at
   every boundary (130px + 130px = ~260px at 1440), which read as excessive empty
   space on desktop. The vw coefficient and the upper cap are lowered so the
   desktop gap drops ~30% (to ~90px each side / ~180px per boundary at 1440),
   while the 64/48 mins are untouched — so 390px (and every width pinned to the
   floor) is unchanged. Statement bands and the quote section keep their own
   generous padding; only .section / .section--tight are trimmed. */
.section { padding: clamp(64px, 6.2vw, 96px) 0; }
.section--tight { padding: clamp(48px, 5vw, 72px) 0; }
/* A PLAIN (non-card) light section immediately before a dark band reads
   bottom-heavy: the whitespace above its content stacks the preceding section's
   padding-bottom PLUS this section's padding-top, while the whitespace below is
   only this section's padding-bottom (the dark band's own padding lives inside
   its colored box, so its top edge is the next ink). Dropping this section's top
   padding lets the preceding section's padding-bottom alone provide the top
   space, so the content sits optically centered in its whitespace and the page
   gets shorter, not taller. Excludes cards (block-cream/block-dark keep their
   content symmetric inside the card). Case studies "Where we work" is the only
   section matching today; the rule generalizes to any future plain-before-dark. */
   REQUIRES a light section immediately BEFORE it. That preceding section's
   padding-bottom is what supplies the top space once this one's is zeroed. When
   the previous element is instead a dark hero CARD (services: .page-hero, whose
   padding sits inside its own box and which has no bottom margin), zeroing this
   padding left the heading almost flush against the card, so the leading
   combinator keeps that case at its normal padding. */
:is(.section, .block-cream) + .section:not(.block-cream):not(.block-dark):not(.section--dark):has(+ :is(.block-dark, .section--dark)) {
  padding-top: 0;
}
/* Section background variants (were used site-wide but never defined — caused
   the insights subscribe pill to read as invisible on light paper, and the
   speaking signature-topics / media bands to look flat). */
.section--alt { background: var(--card); }
/* ISSUE 4 — .section--dark shipped full-bleed (edge to edge) while every other
   dark block (block-dark / block-cream / page-hero) is an inset rounded card.
   That inconsistency read as a "bleed" on crs/playbook. Make it an inset rounded
   block to match; the mobile @media below takes it to the shared 14px inset. */
.section--dark { background: var(--ink); color: #c6c6c6; border-radius: 22px; margin: 0 10px; overflow: hidden; }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--dark p, .section--dark .lead { color: #c6c6c6; }
/* Light hero variant (insights/speaking reframes) — was undefined, so heroes
   fell back to base .section: the `.section` shorthand (padding: X 0) sets
   BOTH padding-top and padding-bottom, and the original fix only added a
   padding-bottom longhand override, leaving padding-top still inheriting the
   full clamp(64px,9vw,140px) — the void ABOVE the eyebrow. Mirror .page-hero
   (the working about/services/process hero) padding + h1 + lead + eyebrow
   spacing values exactly. .page-hero is a dark card (color:#fff on
   var(--dark)); .section--hero is a light/flat hero, so spacing/sizing is
   copied 1:1 but text colors stay the light-appropriate ink/muted already
   inherited (copying #fff/#c6c6c6 here would make the text invisible on the
   cream paper background — a regression, not a match). */
.section--hero { padding-top: clamp(72px, 10vw, 140px); padding-bottom: clamp(64px, 8vw, 120px); }
/* Hero eyebrow -> H1 vertical rhythm, uniform across every hero type
   (.page-hero, .pb-hero, .hero, .ct-hero, .section--hero). The pill always sits
   immediately before the H1, so `:has(+ h1)` targets exactly the hero eyebrows;
   section eyebrows precede an h2 and are untouched. The clamp scales the gap
   down on mobile (~22px) instead of copying the 32px desktop value. The paired
   rule zeroes any h1 margin-top some heroes used to make this gap (contact 20px,
   speaking 24px) so the spacing has one source; !important beats page-inline h1
   rules. Reference: about's 32px desktop gap. */
.eyebrow:has(+ h1) { margin-bottom: clamp(22px, 4vw, 32px); }
.eyebrow + h1 { margin-top: 0 !important; }
.section--hero h1 { font-size: clamp(40px, 5.5vw, 64px); max-width: 20ch; letter-spacing: -0.028em; }
.section--hero .lead { max-width: 56ch; margin-top: 28px; font-size: clamp(15px, 1.2vw, 17px); }
/* Breathing room between the hero lead paragraph and the CTA button
   (speaking.html "Invite Shan to speak" — <a class="btn btn--primary">). */
.section--hero .btn--primary,
.section--hero a.btn { margin-top: 32px; }
/* The gap below the hero is hero padding-bottom + the NEXT section's top
   padding (140px base). Trim the following section's top so the hero flows
   into it with one normal section gap, not a void. */
.section--hero + .section { padding-top: clamp(32px, 4vw, 64px); }

.block-dark { background: var(--dark); color: #f2f2f2; border-radius: 22px; margin: 0 10px; overflow: hidden; }
.block-cream { background: var(--card); color: var(--ink); }
.block-slate { background: var(--slate); color: #f2f2f2; }

/* Vertical separation between adjacent DARK sections so two stacked dark
   regions don't fuse into one black mass. Reference = 20px, matching the
   .block-dark -> footer gap that already reads correctly on crs.html. Dark->light
   transitions (padding-based) are untouched; light->dark (e.g. cream -> dark CTA)
   is also untouched. The longhand !important beats the per-instance inline
   `margin:0 10px 20px` on .block-dark.

   (a) inset dark card -> inset dark card OR full-bleed band (.book / .tests):
       the second element gets the 20px top margin. (.waitlist is 5ms's dark
       inset card; folded in so the rule — not its per-instance inline margin —
       guarantees the gap.) */
:is(.section--dark, .block-dark, .page-hero, .pb-hero, .hero, .feature, .waitlist)
+ :is(.section--dark, .block-dark, .page-hero, .pb-hero, .hero, .feature, .waitlist, .book, .tests) {
  margin-top: 20px !important;
}

/* (b) The last DARK section before the footer gets the site's standard 20px
   card gap below it, so it reads as a distinct block above the footer rather
   than fusing into one black mass (both are var(--dark)). Earlier passes tried
   flush-with-squared-corners and then a 1px #2d2d2d hairline; both were too
   subtle to register. A real paper gap is the site's own separator for adjacent
   dark regions (rule (a) above uses the same 20px), so this matches that rhythm.

   The gap is forced to 20px with !important so it is IDENTICAL on every page
   regardless of each section's inline margin (about ships `margin: 0 10px` = 0
   bottom; case-studies ships `... 20px`; the .book band ships none). Rounded
   bottom corners are LEFT INTACT (no squaring) so the inset .block-dark cards
   read as cards floating above the footer. .book (index / speaking) is a
   full-bleed band by design, so its 20px gap reads as a full-width paper break
   rather than a floating card; the gap value is still the same 20px.

   Scoped to reliably-dark classes only. .waitlist is EXCLUDED (it renders cream
   on 5ms, and light-last sections already separate from the dark footer on tone
   — adding a gap there would double up). Heroes are never last, so they are
   dropped from the list too. */
:is(.section--dark, .block-dark, .feature, .book, .tests):has(+ [data-slot="footer"]) {
  margin-bottom: 20px !important;
}

/* Nav */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}
.nav__logo {
  font-family: 'Geist', var(--f-sans);
  font-weight: 300;
  letter-spacing: -0.06em;
  font-size: 28px;
  line-height: 1;
  color: #000;
  text-decoration: none;
}
.nav__links {
  display: flex;
  gap: 28px;
  align-items: center;
  font-size: 14px;
}
.nav__links a {
  color: var(--ink-2);
  position: relative;
  padding: 6px 0;
  transition: color 0.2s;
}
.nav__links a:hover { color: var(--ink); }
.nav__links a.is-active { color: var(--ink); }
.nav__links a.is-active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--accent);
}
.nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--ink);
  color: #fff;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  transition: transform 0.2s, background 0.2s;
}
.nav__cta:hover { transform: translateY(-1px); background: #000; }
.nav__cta .arrow { transition: transform 0.2s; }
.nav__cta:hover .arrow { transform: translate(2px, -2px); }

.nav__burger {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
}

/* Right cluster: Sign in text link + Book a Call button */
.nav__right { display: flex; align-items: center; gap: 18px; }
.nav__signin { font-size: 14px; color: var(--ink-2); transition: color 0.2s; }
.nav__signin:hover { color: var(--ink); }
.nav__signin--mobile { display: none; } /* duplicate for the mobile panel only */

/* "More" dropdown. Visibility is CSS-driven (not the hidden attribute) so the
   same markup can flatten into a plain list at mobile. */
.nav__more { position: relative; }
.nav__more-btn {
  background: none; border: 0; padding: 6px 0; margin: 0;
  font: inherit; font-size: 14px; color: var(--ink-2); cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px; transition: color 0.2s;
}
.nav__more-btn:hover,
.nav__more-btn[aria-expanded="true"] { color: var(--ink); }
.nav__more-btn.is-active { color: var(--ink); }
.nav__more-caret { font-size: 10px; transition: transform 0.2s; }
.nav__more-btn[aria-expanded="true"] .nav__more-caret { transform: rotate(180deg); }
.nav__more-menu {
  display: none;
  position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%);
  min-width: 190px; flex-direction: column; gap: 2px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 8px;
  box-shadow: 0 24px 50px -20px rgba(0,0,0,0.22); z-index: 60;
}
.nav__more.is-open .nav__more-menu { display: flex; }
.nav__more-menu a { padding: 9px 12px; border-radius: 9px; white-space: nowrap; }
.nav__more-menu a:hover { background: var(--card); color: var(--ink); }
.nav__more-menu a.is-active { background: var(--card); color: var(--ink); }
.nav__more-menu a.is-active::after { display: none; } /* underline marker is for the top row only */

@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__burger { display: block; }
  .nav__right .nav__signin { display: none; } /* the panel copy is used instead */
  .nav.is-open .nav__links {
    display: flex;
    position: absolute;
    top: 68px; left: 0; right: 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    padding: 16px var(--pad) 24px;
    gap: 14px;
  }
  /* Flatten the dropdown into the panel: every link visible, no extra tap.
     width:auto + align-items:center so these sit centered like the links above
     them (the panel inherits align-items:center from the desktop rule). */
  .nav__more { width: auto; }
  .nav__more-btn { display: none; }
  .nav__more-menu {
    display: flex; position: static; transform: none; min-width: 0;
    background: transparent; border: 0; border-radius: 0; padding: 0;
    box-shadow: none; gap: 14px; align-items: center;
  }
  .nav__more-menu a { padding: 0; border-radius: 0; }
  .nav__more-menu a:hover,
  .nav__more-menu a.is-active { background: transparent; }
  .nav__signin--mobile { display: block; }
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid transparent;
  transition: transform 0.2s, background 0.2s, color 0.2s;
  cursor: pointer;
  background: none;
  color: inherit;
}
.btn:hover { transform: translateY(-1px); }
.btn .arrow { transition: transform 0.2s; display: inline-block; }
.btn:hover .arrow { transform: translate(2px, -2px); }

.btn--primary { background: var(--ink); color: #fff; }
.btn--primary:hover { background: #000; }
.btn--primary-on-dark { background: #fff; color: var(--ink); }
.btn--primary-on-dark:hover { background: #f0f0f0; }
.btn--ghost { background: transparent; color: inherit; border-color: var(--line); }
.btn--ghost-dark { border-color: rgba(255,255,255,0.2); color: #fff; }
.btn--ghost-dark:hover { background: rgba(255,255,255,0.08); }
.btn--accent { background: var(--accent); color: #fff; }
.btn--accent:hover { background: color-mix(in oklab, var(--accent) 85%, black); }
.btn--pill-light { background: #fff; color: var(--ink); box-shadow: 0 2px 24px rgba(0,0,0,0.08); }
/* ISSUE 5 — pricing callouts (crs + playbook) shipped the CTA flush against the
   body copy; add the site's paragraph-to-button gap. */
.pricing-callout .btn { margin-top: 28px; }

/* Utility */
.stack-sm > * + * { margin-top: 16px; }
.stack-md > * + * { margin-top: 24px; }
.stack-lg > * + * { margin-top: 40px; }
.row { display: flex; gap: 16px; flex-wrap: wrap; }
.row--between { justify-content: space-between; align-items: end; gap: 40px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 28px); }
@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* Footer */
.footer {
  background: var(--dark);
  color: #cfcfcf;
  padding: 96px 0 32px;
}
/* Newsletter band: a CREAM card sitting inside the black footer (the footer
   grid/legal below it stays black). Ink on var(--card) instead of white on
   var(--dark); the input/button pill shapes are unchanged, only their colors
   flip to on-light (white field + line border, ink button with white text). */
.footer__cta {
  text-align: center;
  background: var(--card);
  color: var(--ink);
  border-radius: 22px;
  padding: clamp(48px, 6vw, 72px) clamp(24px, 4vw, 48px);
  margin-bottom: 48px;
}
/* The newsletter heading is split into per-word inline-block spans by site.js
   (data-split / .char-reveal), so words are atomic boxes that cannot hyphenate.
   In the narrow cream card that pushed the line count up and orphaned the last
   word onto its own line below ~380px. Stepping the size down there keeps it at
   2-3 lines; overflow-wrap is a floor so a long word can never force overflow.
   Shared component, so this applies on every page. */
.footer__cta h2 {
  font-size: clamp(36px, 5vw, 54px);
  overflow-wrap: break-word;
  color: var(--ink);
  margin-bottom: 20px;
}
/* 28px, not 30px: at 30px the cream card's ~232px inner box strands
   "guesswork." on a line of its own. 28px is the largest size that keeps all
   three lines carrying more than one word down to 320px. */
@media (max-width: 380px) { .footer__cta h2 { font-size: 28px; } }
.footer__cta p { color: var(--muted); margin-bottom: 32px; }
/* The pill sizes off the CARD's inner width, never the viewport. The old
   `min-width: min(420px, 90vw)` measured 90vw (351px at 390px wide) against a
   card whose inner box is only ~302px there, so the pill pushed past the cream
   edge and off-screen — a min-width is also a floor the flex line can't shrink
   below. `width: min(420px, 100%)` keeps the same 420px desktop pill while
   letting it track the card on narrow screens. */
.footer__sub {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 4px 4px 20px;
  width: min(420px, 100%);
  max-width: 100%;
  box-sizing: border-box;
}
.footer__sub input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: 0;
  color: var(--ink);
  padding: 12px 8px;
  font: inherit;
  outline: none;
}
.footer__sub input::placeholder { color: var(--muted); }
.footer__sub button {
  flex: 0 0 auto;
  background: var(--ink);
  color: #fff;
  border: 0;
  padding: 10px 20px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 13px;
}
/* Below ~500px the field and the Subscribe button can only share one pill by
   squeezing both under a comfortable tap target, so they stack instead: the
   input becomes its own full-width pill and the button sits full-width beneath
   it. The wrapper drops its pill chrome so there is no pill-inside-a-pill. */
@media (max-width: 500px) {
  .footer__sub {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
  }
  .footer__sub input {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 14px 20px;
    text-align: center;
  }
  .footer__sub button {
    width: 100%;
    padding: 14px 20px;
    font-size: 14px;
  }
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.2fr repeat(3, 1fr);
  gap: 32px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--dark-line);
}
@media (max-width: 800px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
.footer__brand { font-size: 20px; color: #fff; font-weight: 500; }
.footer__col h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #7e7e7e;
  margin-bottom: 18px;
  font-family: var(--f-mono);
  font-weight: 500;
}
.footer__col a, .footer__col p {
  display: block;
  color: #cfcfcf;
  padding: 4px 0;
  font-size: 14px;
}
.footer__col a:hover { color: #fff; }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 28px;
  font-size: 12px;
  color: #7e7e7e;
}
.footer__bottom a:hover { color: #fff; }
.footer__legal-links { display: flex; flex-wrap: wrap; align-items: center; }
.footer__legal-links a:not(:last-child)::after { content: '·'; margin: 0 12px; color: #5a5a5a; }

/* Signal: little monospace labels used throughout */
.label-mono {
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}

/* Card shells */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
}
.card--on-dark {
  background: var(--dark-2);
  border-color: var(--dark-line);
  color: #eaeaea;
}
.card--cream { background: var(--card); border: 0; }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.9s ease, transform 0.9s ease; }
.reveal.in { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }

/* Hero char reveal */
/* overflow-x visible so italic glyph overhang isn't clipped; overflow-y clip hides pre-reveal translateY.
   padding-bottom gives italic descenders (y, p, g) room to render inside the clip box.
   negative margin-bottom cancels the padding's layout effect so line-height stays tight. */
.char-reveal .word {
  display: inline-block;
  overflow-x: visible;
  overflow-y: clip;
  vertical-align: top;
  padding-bottom: 0.2em;
  margin-bottom: -0.2em;
}
.char-reveal em .word:last-child { padding-right: 0.12em; }
.char-reveal .word > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1s cubic-bezier(.2,.8,.2,1);
}
.char-reveal.in .word > span { transform: translateY(0); }

/* Marquee */
.marquee {
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
.marquee__track {
  display: flex;
  gap: 56px;
  white-space: nowrap;
  animation: marquee 40s linear infinite;
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* Accordion */
.acc-row {
  display: grid;
  grid-template-columns: 56px 1fr 56px;
  align-items: center;
  gap: 24px;
  padding: 22px 4px;
  border-top: 1px solid var(--line);
  cursor: pointer;
  transition: padding 0.25s ease, background 0.25s ease;
}
.acc-row:last-child { border-bottom: 1px solid var(--line); }
.acc-row:hover { padding-left: 14px; padding-right: 14px; }
.acc-row__num { font-family: var(--f-mono); font-size: 11px; color: var(--muted); letter-spacing: 0.12em; }
.acc-row__title { font-size: clamp(18px, 1.6vw, 22px); font-weight: 500; letter-spacing: -0.01em; }
.acc-row__icon {
  width: 36px; height: 36px; border-radius: 999px;
  background: var(--ink);
  color: #fff;
  display: grid; place-items: center;
  justify-self: end;
  transition: transform 0.3s;
}
.acc-row.is-open .acc-row__icon { transform: rotate(45deg); }
.acc-body {
  grid-column: 2 / 3;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
}
.acc-body__inner {
  padding: 4px 0 22px;
  color: var(--muted);
  max-width: 62ch;
}

/* Tweaks panel */
.tweaks-fab {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 12px 18px;
  font-size: 13px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.2);
  display: none;
}
.tweaks-panel {
  position: fixed;
  right: 20px; bottom: 72px;
  z-index: 100;
  width: 320px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.16);
  display: none;
}
.tweaks-panel h4 {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
  font-weight: 500;
}
.tweaks-panel .swatches { display: flex; gap: 8px; margin-bottom: 20px; }
.tweaks-panel .sw {
  width: 28px; height: 28px; border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s;
}
.tweaks-panel .sw:hover { transform: scale(1.1); }
.tweaks-panel .sw.is-active { border-color: var(--ink); }
.tweaks-panel .tweak-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-size: 13px;
}
.tweaks-panel select, .tweaks-panel input[type="text"] {
  font: inherit;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.tweaks-panel .toggle {
  width: 36px; height: 20px; border-radius: 999px;
  background: #ddd;
  position: relative;
  cursor: pointer;
  transition: background 0.2s;
}
.tweaks-panel .toggle.on { background: var(--ink); }
.tweaks-panel .toggle::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 999px;
  background: #fff;
  transition: transform 0.2s;
}
.tweaks-panel .toggle.on::after { transform: translateX(16px); }

.tweaks-on .tweaks-fab { display: inline-flex; }
.tweaks-on.tweaks-open .tweaks-panel { display: block; }

/* (The .typo-card treatments were removed once every case-studies visual became
   either a Variation D scorecard or a photo; no markup referenced them.) */

/* Hero stamp marigold rule */
.hero__stamp-rule { width:24px; height:2px; background:var(--accent-dark-bg); flex-shrink:0; }

/* Footer LinkedIn */
.footer__linkedin { display:inline-flex; align-items:center; gap:8px; margin-top:16px; color:#6b6b6b; text-decoration:none; font-family:var(--f-mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; transition:color 0.2s; }
.footer__linkedin:hover { color:var(--accent-dark-bg); }

/* ===== Mobile fixes ===== */
/* Footer: collapse to single column at very small screens */
@media (max-width: 480px) {
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; gap: 10px; text-align: center; }
}
/* Cookie notice banner (first-visit, dismissable) */
.cookie-notice {
  position: fixed;
  bottom: 24px;
  left: 24px;
  right: 24px;
  max-width: 640px;
  background: var(--ink);
  color: #f4f1e8;
  padding: 16px 20px;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  z-index: 9000;
  font-size: 14px;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
.cookie-notice--visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.cookie-notice__inner {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.cookie-notice__inner p {
  margin: 0;
  flex: 1;
  min-width: 240px;
  color: #d6d6d6;
}
.cookie-notice__inner p a {
  color: #fff;
  border-bottom: 1px solid var(--accent-dark-bg);
  text-decoration: none;
  padding-bottom: 1px;
}
.cookie-notice__dismiss {
  background: #fff;
  color: var(--ink);
  border: none;
  padding: 8px 18px;
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.cookie-notice__dismiss:hover {
  background: var(--accent);
  color: white;
}
@media (max-width: 540px) {
  .cookie-notice {
    bottom: 16px;
    left: 16px;
    right: 16px;
    padding: 14px 16px;
  }
  .cookie-notice__inner {
    gap: 12px;
  }
}

/* =====================================================================
   Mobile QA pass — shared fixes (real-device iPhone / Safari).
   Fixes the SHARED hero/card patterns once, not per page.
   ===================================================================== */
@media (max-width: 600px) {
  /* ISSUE 2 — one consistent 14px side inset on every rounded dark/cream
     card-section, so none bleed to the viewport edge on mobile; border-radius
     is preserved (only the left/right margins change). These classes live in
     per-page <style> blocks but all share the same `margin: 0 10px` (or 8-20px)
     pattern; the `html` prefix out-specifies the local rules, and !important
     beats the inline block-cream/block-dark margins. Full-bleed sections
     (.tests / .book / .quote / .section--dark) are intentionally left alone. */
  html .page-hero,
  html .pb-hero,
  html .ct-hero,
  html .not-found,
  html .hero,
  html .feature,
  html .waitlist {
    margin-left: 14px;
    margin-right: 14px;
  }
  .block-cream,
  .block-dark,
  .section--dark {
    margin-left: 14px !important;
    margin-right: 14px !important;
  }

  /* ISSUE 3 — eyebrow pill clearance before the hero h1. Several page-heroes
     (pricing / crs / process / case-studies / contact) shipped the eyebrow with
     margin-bottom:0, so the pill collided with the h1 at mobile widths. */
  html .page-hero .eyebrow,
  html .pb-hero .eyebrow,
  html .ct-hero .eyebrow {
    margin-bottom: 22px;
  }
}

/* =====================================================================
   Score cards (K-Score / CRS) — shared component.
   Light variant (.sc) on the 5M's page; dark (.sc--dark) on the CRS page.
   Two-token accent: marigold (var(--accent)) on light, camel
   (var(--accent-dark-bg)) on dark. Adapted from Cureton Score Cards.html.
   ===================================================================== */
.sc {
  --sc-fg: var(--ink);
  --sc-muted: var(--muted);
  --sc-faint: var(--muted-2);
  --sc-accent: var(--accent);
  --sc-line: var(--line);
  --sc-track: #e7e3d8;
  --sc-panel: rgba(17,17,17,0.028);
  width: 100%; max-width: 620px; margin: 0 auto; background: #fff;
  border: 1px solid var(--sc-line); border-radius: 24px;
  padding: clamp(24px, 3.4vw, 40px);
  box-shadow: 0 40px 80px -48px rgba(30,22,6,0.28); color: var(--sc-fg);
}
.sc--dark {
  --sc-fg: #f2efe9; --sc-muted: #a49e92; --sc-faint: #7d776b;
  --sc-accent: var(--accent-dark-bg); --sc-line: var(--dark-line);
  --sc-track: #2b2721; --sc-panel: rgba(255,255,255,0.035);
  background: linear-gradient(180deg, var(--dark-2), var(--dark));
  box-shadow: 0 50px 90px -50px rgba(0,0,0,0.7);
}
.sc__chrome { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid var(--sc-line); }
/* nowrap keeps "K-Score / 5M's" on one line; without it the flex items broke and
   the slash stacked above "5M's", which also squeezed the version pill until it
   pushed past the card's right edge. */
.sc__brand { display: flex; align-items: center; gap: 9px; white-space: nowrap; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--sc-faint); }
.sc__brand b { color: var(--sc-fg); font-weight: 500; }
.sc__dot { width: 7px; height: 7px; border-radius: 999px; background: var(--sc-accent); }
.sc__tag { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-faint); border: 1px solid var(--sc-line); border-radius: 999px; padding: 5px 11px; white-space: nowrap; }
/* Below 480px the label + version pill cannot sit side by side inside the card's
   24px padding, so the row stacks: label first, pill beneath it, left-aligned.
   max-width keeps the pill inside the padding box instead of overhanging the
   card border. Desktop keeps the original space-between row. */
@media (max-width: 480px) {
  .sc__chrome { flex-direction: column; align-items: flex-start; gap: 10px; }
  .sc__tag { max-width: 100%; }
}
.sc__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.sc__name { font-size: clamp(22px, 2.7vw, 30px); letter-spacing: -0.026em; line-height: 1.02; }
.sc__meta { margin-top: 9px; font-size: 13.5px; color: var(--sc-muted); }
.sc__scored { text-align: right; flex: 0 0 auto; }
.sc__scored .k { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--sc-faint); }
.sc__scored .v { margin-top: 5px; font-size: 13px; color: var(--sc-fg); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sc__score { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 3vw, 40px); align-items: center; margin: clamp(22px, 3vw, 32px) 0; padding: clamp(20px, 2.6vw, 28px); background: var(--sc-panel); border-radius: 18px; }
.sc__big { display: flex; align-items: baseline; gap: 2px; line-height: 0.8; }
.sc__big .n { font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: clamp(76px, 11vw, 92px); letter-spacing: -0.03em; color: var(--sc-accent); }
.sc__big .d { font-family: var(--f-mono); font-size: clamp(15px, 1.8vw, 19px); color: var(--sc-faint); letter-spacing: 0.02em; }
.sc__verdict { min-width: 0; }
.sc__band-name { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--sc-accent); }
.sc__band-desc { margin-top: 4px; font-size: 13px; color: var(--sc-muted); line-height: 1.4; }
.meter { margin-top: 18px; }
.meter__track { position: relative; height: 12px; border-radius: 999px; overflow: hidden; display: flex; }
.meter__zone { height: 100%; }
.meter--light .meter__zone.z1 { background: #d8d2c4; }
.meter--light .meter__zone.z2 { background: #e0cfa8; }
.meter--light .meter__zone.z3 { background: #d4a656; }
.meter--light .meter__zone.z4 { background: var(--accent-light-bg); }
.meter--dark .meter__zone.z1 { background: #3a352d; }
.meter--dark .meter__zone.z2 { background: #6a5a38; }
.meter--dark .meter__zone.z3 { background: #9a7638; }
.meter--dark .meter__zone.z4 { background: var(--accent-dark-bg); }
.meter__marker { position: absolute; top: -5px; bottom: -5px; width: 3px; border-radius: 3px; background: var(--sc-fg); transform: translateX(-50%); box-shadow: 0 0 0 3px var(--sc-marker-halo, #fff); }
.sc--dark .meter__marker { --sc-marker-halo: var(--dark-2); }
.meter__caret { position: absolute; top: -13px; transform: translateX(-50%); font-family: var(--f-mono); font-size: 10px; font-weight: 500; color: var(--sc-fg); }
.meter__scale { display: flex; justify-content: space-between; margin-top: 10px; }
.meter__scale span { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-faint); }
.meter__scale span.on { color: var(--sc-accent); }
.sc__seclbl { display: flex; align-items: center; gap: 12px; margin: 4px 0 14px; }
.sc__seclbl .t { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sc-faint); white-space: nowrap; }
.sc__seclbl .r { flex: 1; height: 1px; background: var(--sc-line); }
.rows { display: flex; flex-direction: column; }
.row { display: grid; grid-template-columns: 132px 1fr 40px; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--sc-line); }
.row:last-child { border-bottom: 0; }
.row__label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.row__name { font-size: 15px; font-weight: 500; letter-spacing: -0.012em; }
.row__name em { font-family: var(--f-display); font-style: italic; font-weight: 400; color: var(--sc-accent); font-size: 1.12em; }
.row__sub { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-faint); }
.row__bar { height: 7px; border-radius: 999px; background: var(--sc-track); overflow: hidden; }
.row__bar i { display: block; height: 100%; width: var(--w, 50%); border-radius: 999px; background: var(--sc-accent); transition: width 1s cubic-bezier(.2,.8,.2,1); }
.row.is-low .row__bar i { background: color-mix(in oklab, var(--sc-accent) 42%, var(--sc-track)); }
.row__val { text-align: right; font-family: var(--f-mono); font-size: 14px; font-weight: 500; color: var(--sc-fg); font-variant-numeric: tabular-nums; }
.row.is-low .row__val { color: var(--sc-muted); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.flag { display: flex; align-items: center; gap: 14px; margin-top: 24px; padding: 15px 18px; border-radius: 14px; border: 1px solid var(--sc-line); background: var(--sc-panel); }
.flag__ic { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 999px; background: var(--sc-accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--sc-accent) 18%, transparent); }
.flag__k { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--sc-faint); }
.flag__v { font-size: 14.5px; font-weight: 500; color: var(--sc-fg); letter-spacing: -0.01em; }
.flag__v em { font-family: var(--f-display); font-style: italic; font-weight: 400; color: var(--sc-accent); font-size: 1.08em; }
.readline { margin-top: 22px; padding-left: 16px; border-left: 2px solid var(--sc-accent); }
.readline .k { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--sc-faint); }
.readline .v { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--sc-fg); }
.readline .v em { font-family: var(--f-display); font-style: italic; font-weight: 400; color: var(--sc-accent); font-size: 1.08em; }
.sc__foot { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--sc-line); display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.sc__note { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.05em; color: var(--sc-faint); }
.sc__mark { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--sc-faint); }
@media (max-width: 520px) { .split { grid-template-columns: 1fr; gap: 22px; } }
@media (max-width: 440px) {
  .sc__score { grid-template-columns: 1fr; gap: 14px; }
  .sc__head { flex-wrap: wrap; }
  .sc__scored { text-align: left; }
  .row { grid-template-columns: 104px 1fr 32px; gap: 11px; }
  .row__name { font-size: 14px; }
}

/* Trademark mark — small superscript, applied to every ™ site-wide via
   <span class="tm">™</span>. Reset letter-spacing (headings run negative) and
   force upright so it stays clean inside italic display type. */
.tm { font-size: 0.45em; vertical-align: super; letter-spacing: 0; font-style: normal; line-height: 0; }

/* ISSUE 2 — page-hero family h1 ceilings (per-page rules ship 88px / 80px maxima,
   too large at laptop widths). Reduce the maximum to 64px; mobile minimum (40px)
   preserved. The html prefix out-specifies the per-page .page-hero h1 rules. */
html .page-hero h1, html .pb-hero h1, html .ct-hero h1 { font-size: clamp(40px, 5.5vw, 64px); }