/* =========================================================
   The UX of You: Studio site, v3
   Aesthetic: editorial hiring studio with a full-bleed
   chromatic moment. No soft corals, no rounded cards.
   Palette:   paper cream · warm ink · saturated blood-orange
   Type:      Bricolage Grotesque (display, variable) · Inter Tight · JetBrains Mono
   ========================================================= */

:root {
  --paper:    #F7F4FB;    /* near-white, whisper of purple; lets the brand color pop */
  --paper-2:  #EEE8F4;
  --ink:      #0A0806;    /* warm near-black */
  --ink-2:    #1D1915;
  --ink-3:    #2E2822;
  --muted:    #7A7164;
  --line:     rgba(10, 8, 6, 0.12);
  --line-dark: rgba(247, 244, 251, 0.14);

  --purple:   #3E1A78;    /* the brand. deep royal. */
  --purple-2: #6B3AB2;    /* lighter companion for hover/inset labels */

  --max:      1440px;
  --pad:      clamp(20px, 4vw, 64px);
  --ease:     cubic-bezier(0.2, 0.8, 0.2, 1);
}

* { box-sizing: border-box; }
*::selection { background: var(--purple); color: var(--paper); }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

/* =========================================================
   Reusable: typography tokens
   ========================================================= */

.mono {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.mono.num { color: var(--muted); }
.mono.on-dark { color: var(--paper); }

.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 44px;
  color: var(--purple);
  font-size: 11px;
}
.section-tag.on-dark { color: var(--purple-2); }

.sec-head { padding-bottom: clamp(56px, 7vw, 96px); }
.sec-head__row {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(24px, 5vw, 96px);
  align-items: end;
}

.sec-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 500;
  font-variation-settings: 'opsz' 96, 'wdth' 80;
  font-size: clamp(44px, 7vw, 108px);
  line-height: 0.92;
  letter-spacing: -0.035em;
  margin: 0;
  color: var(--ink);
}
.sec-title em {
  font-style: italic;
  font-variation-settings: 'opsz' 96, 'wdth' 95, 'wght' 500;
  color: var(--purple);
}
.sec-title.on-dark { color: var(--paper); }
.sec-title.on-dark em { color: var(--purple-2); }

.sec-lede {
  font-size: clamp(16px, 1.25vw, 18px);
  color: var(--ink-3);
  max-width: 44ch;
  margin: 0;
  line-height: 1.5;
}
.sec-lede.on-dark { color: #C4BBA8; }

/* =========================================================
   Grain overlay (inside dark/orange sections)
   ========================================================= */
.grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0.5;
  filter: url(#grain);
  background: transparent;
}
.grain::before {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  /* fallback noise via svg data uri */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.25 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.5;
}

/* Helper: Bricolage display utility */
.brico {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-variation-settings: 'opsz' 96, 'wdth' 80;
}

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 22px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
  cursor: pointer;
}
.btn__arrow {
  display: inline-block;
  transition: transform .35s var(--ease);
}
.btn:hover .btn__arrow { transform: translateX(4px); }

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

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 6px 0;
  border-radius: 0;
  border-left: 0; border-right: 0; border-top: 0;
}
.btn--ghost:hover { color: var(--purple); border-bottom-color: var(--purple); }

.btn--dark {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.btn--dark:hover { background: var(--purple); color: var(--paper); border-color: var(--purple); }

/* =========================================================
   TOPBAR (micro-status strip)
   ========================================================= */
.topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 10px var(--pad);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.topbar span { color: var(--muted); font-size: 10px; }
.topbar__status { display: inline-flex; align-items: center; gap: 8px; justify-self: start; }
.topbar__status .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--purple);
  box-shadow: 0 0 0 0 rgba(62,26,120,0.6);
  animation: pulse 2.4s ease-out infinite;
}
.topbar__marker { justify-self: center; }
.topbar__time   { justify-self: end; }

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(62,26,120,0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(62,26,120,0); }
  100% { box-shadow: 0 0 0 0 rgba(62,26,120,0); }
}

@media (max-width: 700px) {
  .topbar { grid-template-columns: 1fr auto; }
  .topbar__marker { display: none; }
}

/* =========================================================
   NAV
   ========================================================= */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 40px;
  padding: 18px var(--pad);
  background: rgba(247, 244, 251, 0.92);
  backdrop-filter: saturate(1.3) blur(14px);
  -webkit-backdrop-filter: saturate(1.3) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.nav.is-scrolled { border-bottom-color: var(--line); }

.logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
}
.logo__mark {
  width: 32px; height: 32px;
  color: var(--ink);
  transition: color .3s var(--ease), transform .4s var(--ease);
}
.logo:hover .logo__mark { color: var(--purple); transform: rotate(8deg); }

.logo__text { display: inline-flex; flex-direction: column; line-height: 1; }
.logo__title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-variation-settings: 'opsz' 36, 'wdth' 90, 'wght' 600;
  font-size: 18px;
  letter-spacing: -0.01em;
}
.logo__sub { color: var(--muted); font-size: 9.5px; margin-top: 4px; }

.nav__links {
  display: flex;
  justify-content: center;
  gap: 36px;
}
.nav__links a {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  position: relative;
  padding: 4px 0;
  transition: color .2s var(--ease);
}
.nav__links a .num { color: var(--purple); }
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--purple);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s var(--ease);
}
.nav__links a:hover { color: var(--purple); }
.nav__links a:hover::after { transform: scaleX(1); }

.nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 18px;
  font-size: 13px;
  font-weight: 500;
  background: var(--ink);
  color: var(--paper);
  transition: background .3s var(--ease), color .3s var(--ease);
}
.nav__cta-arrow {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 24px; height: 24px;
  background: var(--purple);
  color: var(--paper);
  transition: transform .35s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.nav__cta:hover { background: var(--purple); color: var(--paper); }
.nav__cta:hover .nav__cta-arrow { transform: translate(2px, -2px); background: var(--paper); color: var(--purple); }

.nav__toggle {
  display: none;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid var(--ink);
  flex-direction: column;
  align-items: center; justify-content: center;
  gap: 5px;
  cursor: pointer;
}
.nav__toggle span { display: block; width: 18px; height: 1.5px; background: var(--ink); }

@media (max-width: 960px) {
  .nav {
    grid-template-columns: 1fr auto; /* logo left, hamburger right */
    gap: 12px;
    padding: 14px var(--pad);
  }
  .nav__links {
    position: fixed;
    top: 64px; left: 0; right: 0;
    background: var(--paper);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 16px var(--pad) 24px;
    border-bottom: 1px solid var(--line);
    /* Hidden-by-default: visibility + opacity guarantees it's truly
       off-screen regardless of its rendered height. The small slide
       is just polish. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition:
      opacity .3s var(--ease),
      transform .3s var(--ease),
      visibility 0s linear .3s;
  }
  .nav__links.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition:
      opacity .3s var(--ease),
      transform .3s var(--ease),
      visibility 0s linear 0s;
  }
  .nav__links a {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-variation-settings: 'opsz' 48, 'wdth' 85, 'wght' 500;
    font-size: 28px;
    padding: 12px 0;
    width: 100%;
    border-bottom: 1px solid var(--line);
  }
  .nav__links a:last-child { border-bottom: 0; }
  .nav__links a .num { font-size: 11px; }
  .nav__cta { display: none; }
  .nav__toggle {
    display: flex;
    justify-self: end;
    width: 40px; height: 40px;
  }
  /* The rail shouldn't ever show on phones, belt-and-braces */
  .rail { display: none !important; }
  /* Logo sub-label is noise on small screens */
  .logo__sub { display: none; }
  .logo__title { font-size: 16px; }
}

/* =========================================================
   RAIL (vertical decorative label, large screens only)
   ========================================================= */
.rail {
  display: none;
  position: fixed;
  left: 18px;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: left center;
  z-index: 40;
  pointer-events: none;
}
.rail span {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.4em;
  color: var(--muted);
  white-space: nowrap;
  mix-blend-mode: difference;
  color: #8A8175;
}
@media (min-width: 1400px) { .rail { display: block; } }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  padding: clamp(48px, 7vw, 96px) var(--pad) clamp(40px, 6vw, 80px);
  border-bottom: 1px solid var(--line);
  max-width: var(--max);
  margin: 0 auto;
  position: relative;
}

.hero__grid {
  display: grid;
  /* Desktop: title gets its own row spanning the full width so the
     staircase ("Design / the UX / of You.") can actually stretch
     across the page. Below it, the lede + CTAs sit on the left and
     the side-matter (essay label + index) stacks on the right. */
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label     label"
    "title     title"
    "foot      sidenote"
    "foot      index";
  gap: clamp(20px, 2.4vw, 48px) clamp(24px, 4vw, 80px);
  align-items: start;
}

.hero__label {
  grid-area: label;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}
.hero__label .accent { color: var(--purple); }

.hero__title {
  grid-area: title;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 500;
  /* Slightly wider than before (wdth 80 vs 75) so each glyph carries
     more horizontal weight. Cap raised and vw scaling steepened so
     the staircase actually stretches across the page above 1200px
     instead of pinning at 320. Hero has overflow-x: clip as a safety
     net for the wider cycling variants. */
  font-variation-settings: 'opsz' 96, 'wdth' 80, 'wght' 600;
  font-size: clamp(96px, 24vw, 420px);
  line-height: 0.82;
  letter-spacing: -0.055em;
  margin: -8px 0 0 -8px;
  color: var(--ink);
}
.hero__line { display: block; }
/* Indent scales up with the now-larger title so the staircase
   keeps its silhouette at wider viewports. */
.hero__line--2 { padding-left: clamp(40px, 9vw, 160px); }
.hero__line--3 { display: flex; align-items: baseline; gap: 0.2em; }
.hero__of {
  font-variation-settings: 'opsz' 96, 'wdth' 100, 'wght' 300;
  font-style: italic;
  color: var(--ink-3);
}
/* ---------- "You." cycling slot ----------
   A stacked slot: every variant lives in the same spot and
   only the .is-active one is visible. We animate opacity +
   a small lift so the rest of line 3 never shifts vertically.
   Variants share a common baseline but are free to be wildly
   different widths; they're the last glyph on the line.
*/
.hero__you-slot {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
  /* reserve a minimum width so the shortest variants don't
     collapse the layout too hard when they swap in */
  min-width: 1.4em;
}
.hero__you {
  display: inline-block;
  position: absolute;
  left: 0;
  bottom: 0;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(0.08em);
  transition:
    opacity .55s var(--ease),
    transform .55s var(--ease),
    filter .55s var(--ease);
  pointer-events: none;
  color: var(--purple);
  font-style: italic;
  font-variation-settings: 'opsz' 96, 'wdth' 90, 'wght' 600;
}
/* The first variant in the DOM is positioned statically so
   the slot itself has intrinsic width for initial paint. */
.hero__you:first-child {
  position: relative;
}
.hero__you.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.hero__period { color: var(--purple); font-style: normal; }

/* -------- individual variants --------
   Each one is tuned to sit on the same baseline as the
   display face while bringing its own personality. Sizes
   are expressed in em so they scale with the hero clamp. */

/* 01: display italic, the home state */
.hero__you--italic {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-variation-settings: 'opsz' 96, 'wdth' 90, 'wght' 600;
  font-style: italic;
}

/* 02: handwritten, personal, a little off-axis */
.hero__you--script {
  font-family: 'Caveat', cursive;
  font-style: normal;
  font-weight: 700;
  font-size: 1.08em;
  letter-spacing: -0.01em;
  transform-origin: left bottom;
}
.hero__you--script.is-active { transform: translateY(0) rotate(-3deg); }

/* 03: editorial serif italic */
.hero__you--serif {
  font-family: 'Instrument Serif', 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  font-size: 1.05em;
}

/* 04: outlined, structural */
.hero__you--outline {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-variation-settings: 'opsz' 96, 'wdth' 100, 'wght' 700;
  font-style: normal;
  color: transparent;
  -webkit-text-stroke: 2px var(--purple);
  text-stroke: 2px var(--purple);
}
.hero__you--outline .hero__period {
  color: var(--purple);
  -webkit-text-stroke: 0;
}

/* 05: gradient fill, purple to ink */
.hero__you--gradient {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-variation-settings: 'opsz' 96, 'wdth' 85, 'wght' 700;
  font-style: italic;
  background: linear-gradient(115deg, var(--purple) 10%, var(--purple-2) 55%, var(--ink) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
.hero__you--gradient .hero__period {
  -webkit-text-fill-color: var(--purple);
          color: var(--purple);
  background: none;
}

/* 06: wavy underline, tender */
.hero__you--wavy {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-variation-settings: 'opsz' 96, 'wdth' 95, 'wght' 500;
  font-style: normal;
  text-decoration: underline wavy var(--purple);
  text-decoration-thickness: 0.04em;
  text-underline-offset: 0.12em;
}

/* 07: monospace lowercase, a quiet voice */
.hero__you--mono {
  font-family: 'JetBrains Mono', monospace;
  font-style: normal;
  font-weight: 500;
  font-size: 0.78em;
  letter-spacing: -0.02em;
  text-transform: lowercase;
  /* nudge to sit on the cap-height baseline of the rest */
  transform: translateY(-0.04em);
}
.hero__you--mono.is-active { transform: translateY(-0.04em); }

/* 08: ultra-wide, confident */
.hero__you--wide {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-variation-settings: 'opsz' 96, 'wdth' 100, 'wght' 800;
  font-style: normal;
  letter-spacing: -0.04em;
}

/* 09: condensed tall */
.hero__you--condensed {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-variation-settings: 'opsz' 96, 'wdth' 75, 'wght' 700;
  font-style: normal;
  letter-spacing: -0.05em;
}

/* 10: Spanish, handwritten */
.hero__you--tu {
  font-family: 'Caveat', cursive;
  font-style: normal;
  font-weight: 700;
  font-size: 1.05em;
}

/* 11: French, serif */
.hero__you--vous {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 0.95em;
}

/* 12: Chinese, serif */
.hero__you--zh {
  font-family: 'Noto Serif SC', 'Instrument Serif', serif;
  font-style: normal;
  font-weight: 600;
  font-size: 0.92em;
}

/* 13: German, condensed */
.hero__you--du {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-variation-settings: 'opsz' 96, 'wdth' 80, 'wght' 600;
  font-style: italic;
}

/* =========================================================
   Expanded roster: magazine cut-out / ransom-note energy
   plus a wider range of personalities. Each variant is its
   own little world; they share baseline + color family so
   the cross-fade still reads as the same word.
   ========================================================= */

/* Generic "letter chip" used by every ransom-note style.
   Each letter is an inline-block so we can rotate, pad, and
   recolor them individually. Children .hero__you-l inherit
   per-nth-child tweaks defined under each parent variant. */
.hero__you--ransom,
.hero__you--ransom-glossy,
.hero__you--ransom-news,
.hero__you--ransom-zine,
.hero__you--ransom-kids,
.hero__you--ransom-noir {
  font-style: normal;
  letter-spacing: 0;
  line-height: 1;
}
.hero__you--ransom .hero__you-l,
.hero__you--ransom-glossy .hero__you-l,
.hero__you--ransom-news .hero__you-l,
.hero__you--ransom-zine .hero__you-l,
.hero__you--ransom-kids .hero__you-l,
.hero__you--ransom-noir .hero__you-l {
  display: inline-block;
  padding: 0.02em 0.08em;
  margin: 0 0.01em;
  line-height: 1;
  vertical-align: baseline;
  border-radius: 2px;
}

/* 14: ransom classic: newsprint-y mixed fonts, off-white + cream
   chips, each letter kicked at a different angle. */
.hero__you--ransom .hero__you-l--1 {
  font-family: 'Abril Fatface', 'Instrument Serif', serif;
  background: #f4efe4;
  color: var(--ink);
  transform: rotate(-4deg);
  box-shadow: 0 1px 0 rgba(0,0,0,.08);
}
.hero__you--ransom .hero__you-l--2 {
  font-family: 'Special Elite', 'Courier New', monospace;
  background: #fff;
  color: var(--ink);
  transform: rotate(3deg) translateY(-0.04em);
  font-size: 0.9em;
}
.hero__you--ransom .hero__you-l--3 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  background: var(--purple);
  color: #fff;
  transform: rotate(-2deg);
}
.hero__you--ransom .hero__period {
  font-family: 'DM Serif Display', serif;
  color: var(--purple);
  transform: translateY(-0.02em);
  display: inline-block;
}

/* 15: ransom glossy: magazine color-pop, saturated chips */
.hero__you--ransom-glossy .hero__you-l--1 {
  font-family: 'Shrikhand', 'Abril Fatface', serif;
  background: #ffd23f;
  color: #1a1a1a;
  transform: rotate(-3deg);
}
.hero__you--ransom-glossy .hero__you-l--2 {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  background: #ff5a8a;
  color: #fff;
  transform: rotate(4deg);
}
.hero__you--ransom-glossy .hero__you-l--3 {
  font-family: 'Bungee', sans-serif;
  background: var(--purple);
  color: #fff;
  transform: rotate(-2deg);
}
.hero__you--ransom-glossy .hero__period {
  color: var(--purple);
  font-weight: 900;
}

/* 16: ransom newsprint: all typewriter / serif, taped on paper */
.hero__you--ransom-news .hero__you-l {
  background: #f7f3ea;
  color: #111;
  box-shadow: 0 1px 0 rgba(0,0,0,.1);
}
.hero__you--ransom-news .hero__you-l--1 {
  font-family: 'DM Serif Display', serif;
  transform: rotate(-5deg);
}
.hero__you--ransom-news .hero__you-l--2 {
  font-family: 'Special Elite', monospace;
  font-size: 0.86em;
  transform: rotate(2deg) translateY(-0.03em);
}
.hero__you--ransom-news .hero__you-l--3 {
  font-family: 'Abril Fatface', serif;
  transform: rotate(-1deg);
}
.hero__you--ransom-news .hero__period {
  color: var(--ink);
}

/* 17: zine cut-paper: rough torn chips, warm palette */
.hero__you--ransom-zine .hero__you-l {
  /* jagged-edged chips via clip-path */
  clip-path: polygon(2% 8%, 14% 0, 32% 6%, 55% 0, 78% 5%, 96% 1%, 100% 18%,
                     98% 44%, 100% 72%, 95% 98%, 72% 94%, 48% 100%, 22% 96%,
                     4% 100%, 0 78%, 3% 52%, 0 28%);
  padding: 0.1em 0.16em;
}
.hero__you--ransom-zine .hero__you-l--1 {
  font-family: 'Shrikhand', serif;
  background: #ffcf5c;
  color: #1a1a1a;
  transform: rotate(-3deg);
}
.hero__you--ransom-zine .hero__you-l--2 {
  font-family: 'Permanent Marker', cursive;
  background: #ff7a59;
  color: #fff;
  transform: rotate(5deg);
}
.hero__you--ransom-zine .hero__you-l--3 {
  font-family: 'Rubik Mono One', sans-serif;
  background: var(--purple);
  color: #fff;
  transform: rotate(-2deg);
}
.hero__you--ransom-zine .hero__period {
  color: var(--purple);
}

/* 18: kids' scrapbook: playful, primary colors, hand-drawn */
.hero__you--ransom-kids .hero__you-l--1 {
  font-family: 'Permanent Marker', cursive;
  background: #4fc3f7;
  color: #fff;
  transform: rotate(-6deg);
}
.hero__you--ransom-kids .hero__you-l--2 {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  background: #ffd23f;
  color: #1a1a1a;
  transform: rotate(4deg);
  font-size: 1.1em;
}
.hero__you--ransom-kids .hero__you-l--3 {
  font-family: 'Shrikhand', serif;
  background: #ef476f;
  color: #fff;
  transform: rotate(-3deg);
}
.hero__you--ransom-kids .hero__period {
  color: #ef476f;
}

/* 19: noir: black chips, white + purple accent, film-credits */
.hero__you--ransom-noir .hero__you-l {
  background: #0f0f12;
  color: #fff;
}
.hero__you--ransom-noir .hero__you-l--1 {
  font-family: 'Limelight', 'DM Serif Display', serif;
  transform: rotate(-2deg);
}
.hero__you--ransom-noir .hero__you-l--2 {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  color: var(--purple);
  transform: rotate(3deg);
}
.hero__you--ransom-noir .hero__you-l--3 {
  font-family: 'Bungee', sans-serif;
  transform: rotate(-1deg);
}
.hero__you--ransom-noir .hero__period {
  color: var(--purple);
}

/* 20: highlighter: marked-up, important */
.hero__you--highlighter {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-variation-settings: 'opsz' 96, 'wdth' 95, 'wght' 700;
  font-style: normal;
  color: var(--ink);
  background: linear-gradient(180deg, transparent 18%, #fff176 18%, #fff176 88%, transparent 88%);
  padding: 0 0.08em;
}
.hero__you--highlighter .hero__period { color: var(--purple); background: none; }

/* 21: stamp: rubber-stamp red, slightly crooked */
.hero__you--stamp {
  font-family: 'Bungee', 'Rubik Mono One', sans-serif;
  font-style: normal;
  font-weight: 900;
  color: #c0392b;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border: 0.08em solid #c0392b;
  padding: 0.04em 0.12em;
  transform-origin: left bottom;
  /* subtle worn texture via mix-blend + shadow */
  mix-blend-mode: multiply;
  filter: contrast(1.05);
}
.hero__you--stamp.is-active { transform: translateY(0) rotate(-4deg); }
.hero__you--stamp .hero__period { color: #c0392b; }

/* 22: chrome: metallic gradient, 80s-magazine */
.hero__you--chrome {
  font-family: 'Bungee Shade', 'Bungee', sans-serif;
  font-style: normal;
  font-weight: 700;
  background: linear-gradient(180deg, #ffffff 0%, #d9d9d9 35%, #6a6a6a 55%, #ffffff 75%, #9a9a9a 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  text-shadow: 0 2px 0 rgba(0,0,0,0.08);
}
.hero__you--chrome .hero__period {
  -webkit-text-fill-color: var(--purple);
          color: var(--purple);
  background: none;
}

/* 23: pixel: 8-bit, blocky */
.hero__you--pixel {
  font-family: 'Press Start 2P', monospace;
  font-style: normal;
  font-weight: 400;
  font-size: 0.62em;
  letter-spacing: 0.02em;
  color: var(--purple);
  transform: translateY(-0.15em);
}
.hero__you--pixel.is-active { transform: translateY(-0.15em); }

/* 24: tape: strip of masking tape over the word */
.hero__you--tape {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-variation-settings: 'opsz' 96, 'wdth' 90, 'wght' 700;
  font-style: normal;
  color: var(--ink);
  background: rgba(255, 230, 140, 0.72);
  padding: 0.04em 0.18em;
  box-shadow:
    0 1px 0 rgba(0,0,0,0.08),
    inset 0 0 0 1px rgba(0,0,0,0.04);
  /* torn tape edges */
  clip-path: polygon(2% 6%, 18% 0, 38% 4%, 60% 0, 82% 5%, 100% 2%,
                     98% 50%, 100% 96%, 78% 100%, 54% 94%, 30% 100%,
                     8% 96%, 0 82%, 2% 42%);
  transform-origin: left bottom;
}
.hero__you--tape.is-active { transform: translateY(0) rotate(-2deg); }
.hero__you--tape .hero__period { color: var(--purple); }

/* 25: marquee: retro sign, LED-ish dots */
.hero__you--marquee {
  font-family: 'Monoton', 'Bungee', sans-serif;
  font-style: normal;
  font-weight: 400;
  color: #ffb703;
  text-shadow:
    0 0 0.04em #ffb703,
    0 0 0.18em rgba(255, 183, 3, 0.55),
    0 0 0.4em rgba(255, 94, 58, 0.35);
  letter-spacing: 0.02em;
}
.hero__you--marquee .hero__period { color: #ff5e3a; }

/* 26: typewriter: carbon-copy, struck-through */
.hero__you--typewriter {
  font-family: 'Special Elite', 'JetBrains Mono', monospace;
  font-style: normal;
  font-weight: 400;
  font-size: 0.88em;
  color: #2b2b2b;
  letter-spacing: -0.01em;
  /* carbon-paper double imprint */
  text-shadow: 0.02em 0.02em 0 rgba(85, 26, 139, 0.22);
}
.hero__you--typewriter .hero__period { color: var(--purple); }

/* 27: sparkle: a tiny flourish before/after */
.hero__you--sparkle {
  font-family: 'DM Serif Display', 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  color: var(--purple);
  font-size: 1.02em;
}
.hero__you--sparkle::before {
  content: "✦ ";
  font-size: 0.55em;
  vertical-align: 0.4em;
  color: #ffb703;
  margin-right: 0.05em;
}
.hero__you--sparkle .hero__period { color: #ffb703; }

/* 28: neon: purple/pink glow, slightly tilted */
.hero__you--neon {
  font-family: 'Monoton', 'Bungee', sans-serif;
  font-style: normal;
  color: #fff;
  text-shadow:
    0 0 0.04em #fff,
    0 0 0.12em #ff79c6,
    0 0 0.28em var(--purple),
    0 0 0.55em var(--purple);
  letter-spacing: 0.01em;
}
.hero__you--neon.is-active { transform: translateY(0) rotate(-1deg); }
.hero__you--neon .hero__period { color: var(--purple); }

/* 29: graffiti: fat marker, thick outline, tag energy */
.hero__you--graffiti {
  font-family: 'Permanent Marker', cursive;
  font-style: normal;
  font-weight: 400;
  color: var(--purple);
  -webkit-text-stroke: 1px var(--ink);
  text-shadow: 2px 3px 0 rgba(0,0,0,0.12);
  font-size: 1.08em;
}
.hero__you--graffiti.is-active { transform: translateY(0) rotate(-4deg); }
.hero__you--graffiti .hero__period { color: var(--ink); }

/* 30: racing: italic, speed, varsity energy */
.hero__you--racing {
  font-family: 'Racing Sans One', 'Bungee', sans-serif;
  font-style: italic;
  color: var(--purple);
  letter-spacing: -0.02em;
  font-size: 1.02em;
}
.hero__you--racing .hero__period { color: var(--ink); }

/* 31: tiny caps: quietly confident, lowercase small */
.hero__you--tiny {
  font-family: 'Inter Tight', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 0.58em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--purple);
  padding: 0.12em 0.5em;
  transform: translateY(-0.3em);
}
.hero__you--tiny.is-active { transform: translateY(-0.3em); }
.hero__you--tiny .hero__period { color: var(--purple); }

/* 32: bubble: rounded, soft, sticker-ish */
.hero__you--bubble {
  font-family: 'Shrikhand', 'Bungee', sans-serif;
  font-style: normal;
  color: #fff;
  background: var(--purple);
  padding: 0.02em 0.22em;
  border-radius: 0.6em;
  box-shadow: 0 4px 0 rgba(85,26,139,0.35);
}
.hero__you--bubble.is-active { transform: translateY(0) rotate(-2deg); }
.hero__you--bubble .hero__period { color: #ffd23f; }

/* ---------- additional languages ---------- */

/* 33: Arabic: أنت */
.hero__you--ar {
  font-family: 'Noto Sans Arabic', 'Noto Serif SC', serif;
  font-style: normal;
  font-weight: 700;
  font-size: 0.95em;
  direction: rtl;
}

/* 34: Devanagari / Hindi: आप */
.hero__you--hi {
  font-family: 'Noto Sans Devanagari', serif;
  font-style: normal;
  font-weight: 700;
  font-size: 0.92em;
}

/* 35: Japanese: あなた */
.hero__you--ja {
  font-family: 'Noto Sans JP', 'Noto Serif SC', serif;
  font-style: normal;
  font-weight: 900;
  font-size: 0.78em;
  letter-spacing: -0.02em;
}

/* 36: Korean: 너 */
.hero__you--ko {
  font-family: 'Noto Sans KR', sans-serif;
  font-style: normal;
  font-weight: 900;
  font-size: 0.95em;
}

/* 37: Russian: Ты */
.hero__you--ru {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1em;
}

/* Keep the hero from producing horizontal scroll when a
   wider variant (ransom, bubble, chrome, etc.) swaps in. */
.hero { overflow-x: clip; }

/* Line 3 shares space between "of" and the variant slot. The
   slot itself needs to be allowed to shrink (min-width: 0) so
   oversized variants can't push the flex row wider than the
   viewport. Variants are absolutely positioned inside the slot,
   so their visual overflow is cosmetic rather than structural. */
.hero__line--3 { flex-wrap: nowrap; min-width: 0; }
.hero__you-slot { flex: 0 1 auto; min-width: 0; max-width: 100%; }

/* =========================================================
   Mobile tuning for the "You." cycle
   The hero type caps at clamp(88px, 21vw, 320px); below ~720px
   we dial back the variants that naturally render wider (ransom
   chips, bubble pill, chrome shade, graffiti stroke) so every
   variant fits within the viewport and sits on the baseline
   the italic home state defined.
   ========================================================= */
@media (max-width: 720px) {
  /* Tighter chips for every ransom variant: less padding,
     less inter-letter margin, gentler rotations. */
  .hero__you--ransom .hero__you-l,
  .hero__you--ransom-glossy .hero__you-l,
  .hero__you--ransom-news .hero__you-l,
  .hero__you--ransom-zine .hero__you-l,
  .hero__you--ransom-kids .hero__you-l,
  .hero__you--ransom-noir .hero__you-l {
    padding: 0.01em 0.04em;
    margin: 0;
  }
  /* Halve per-letter rotations so chips don't bleed off screen. */
  .hero__you--ransom .hero__you-l--1        { transform: rotate(-2deg); }
  .hero__you--ransom .hero__you-l--2        { transform: rotate(1.5deg) translateY(-0.02em); font-size: 0.85em; }
  .hero__you--ransom .hero__you-l--3        { transform: rotate(-1deg); }
  .hero__you--ransom-glossy .hero__you-l--1 { transform: rotate(-1.5deg); }
  .hero__you--ransom-glossy .hero__you-l--2 { transform: rotate(2deg); }
  .hero__you--ransom-glossy .hero__you-l--3 { transform: rotate(-1deg); }
  .hero__you--ransom-news .hero__you-l--1   { transform: rotate(-2.5deg); }
  .hero__you--ransom-news .hero__you-l--2   { transform: rotate(1deg) translateY(-0.02em); font-size: 0.82em; }
  .hero__you--ransom-news .hero__you-l--3   { transform: rotate(-0.5deg); }
  .hero__you--ransom-zine .hero__you-l--1   { transform: rotate(-1.5deg); }
  .hero__you--ransom-zine .hero__you-l--2   { transform: rotate(2.5deg); }
  .hero__you--ransom-zine .hero__you-l--3   { transform: rotate(-1deg); }
  .hero__you--ransom-kids .hero__you-l--1   { transform: rotate(-3deg); }
  .hero__you--ransom-kids .hero__you-l--2   { transform: rotate(2deg); font-size: 1.02em; }
  .hero__you--ransom-kids .hero__you-l--3   { transform: rotate(-1.5deg); }
  .hero__you--ransom-noir .hero__you-l--1   { transform: rotate(-1deg); }
  .hero__you--ransom-noir .hero__you-l--2   { transform: rotate(1.5deg); }
  .hero__you--ransom-noir .hero__you-l--3   { transform: rotate(-0.5deg); }

  /* Flatten the zine torn clip-path a touch so inner glyph
     doesn't get cropped at the smaller type size. */
  .hero__you--ransom-zine .hero__you-l {
    clip-path: polygon(4% 10%, 18% 2%, 40% 8%, 62% 2%, 84% 6%, 100% 4%,
                       98% 48%, 100% 94%, 78% 98%, 52% 94%, 28% 98%,
                       6% 94%, 0 78%, 4% 48%);
  }

  /* Single-surface variants that render wider than italic:
     scale them down so they share roughly the same footprint. */
  .hero__you--bubble {
    padding: 0.02em 0.14em;
    box-shadow: 0 3px 0 rgba(85,26,139,0.32);
  }
  .hero__you--tape {
    padding: 0.03em 0.12em;
  }
  .hero__you--stamp {
    padding: 0.02em 0.08em;
    border-width: 0.06em;
  }
  .hero__you--graffiti {
    font-size: 1.02em;
    -webkit-text-stroke: 0.8px var(--ink);
    text-shadow: 1.5px 2px 0 rgba(0,0,0,0.12);
  }
  .hero__you--script    { font-size: 1em; }
  .hero__you--serif     { font-size: 1em; }
  .hero__you--sparkle   { font-size: 0.98em; }
  .hero__you--racing    { font-size: 0.98em; }
  .hero__you--bubble    { font-size: 0.94em; }
  .hero__you--chrome    { font-size: 0.96em; }
  .hero__you--neon      { font-size: 0.96em; }
  .hero__you--marquee   { font-size: 0.98em; }
  .hero__you--tu        { font-size: 0.98em; }

  /* Language variants that render wider (longer words) get
     scaled to stay within the line. */
  .hero__you--vous      { font-size: 0.82em; }
  .hero__you--ar        { font-size: 0.82em; }
  .hero__you--hi        { font-size: 0.8em; }
  .hero__you--ja        { font-size: 0.6em; }
  .hero__you--ko        { font-size: 0.88em; }
  .hero__you--ru        { font-size: 0.92em; }
}

/* Even tighter tuning for very small phones. */
@media (max-width: 420px) {
  .hero__you--ransom .hero__you-l,
  .hero__you--ransom-glossy .hero__you-l,
  .hero__you--ransom-news .hero__you-l,
  .hero__you--ransom-zine .hero__you-l,
  .hero__you--ransom-kids .hero__you-l,
  .hero__you--ransom-noir .hero__you-l {
    padding: 0 0.03em;
  }
  .hero__you--ja { font-size: 0.52em; }
  .hero__you--vous { font-size: 0.78em; }
}

/* Respect reduced motion: freeze on the default variant. */
@media (prefers-reduced-motion: reduce) {
  .hero__you { transition: none; }
  .hero__you--script.is-active,
  .hero__you--stamp.is-active,
  .hero__you--tape.is-active,
  .hero__you--neon.is-active,
  .hero__you--graffiti.is-active,
  .hero__you--bubble.is-active { transform: none; }
}

.hero__sidenote {
  grid-area: sidenote;
  max-width: 260px;
  color: var(--ink-3);
  padding-left: 20px;
  padding-top: 24px;
  /* Continues the horizontal rule that foot's border-top starts,
     and keeps the vertical rule that visually separates the
     meta column from the lede. */
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.hero__sidenote-label { display: block; margin-bottom: 8px; color: var(--purple); }
.hero__sidenote p {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-style: italic;
  font-variation-settings: 'opsz' 24, 'wdth' 95, 'wght' 400;
  font-size: 16px;
  line-height: 1.35;
  margin: 0;
}

.hero__foot {
  grid-area: foot;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  align-items: start;
}
.hero__lede p {
  margin: 0;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.42;
  max-width: 44ch;
  color: var(--ink-2);
}
.hero__lede em {
  color: var(--purple);
  font-style: normal;
  font-weight: 500;
}
.hero__ctas { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; justify-content: flex-start; }

.hero__index {
  grid-area: index;
  min-width: 220px;
  color: var(--muted);
  align-self: end;
}
.hero__index-head {
  display: flex;
  justify-content: space-between;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--ink);
  color: var(--ink);
}
.hero__index ol {
  list-style: none;
  padding: 0; margin: 0;
}
.hero__index li {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  padding: 7px 0;
  border-bottom: 1px dotted var(--line);
  font-size: 11px;
  color: var(--ink-3);
  transition: color .25s var(--ease);
}
.hero__index li:hover { color: var(--purple); }
.hero__index li span:first-child { color: var(--purple); }

@media (max-width: 1000px) {
  .hero__grid {
    grid-template-columns: 1fr;
    /* Promote the lede + CTA above the fold. The sidenote and
       index are support material; they can live below. */
    grid-template-areas:
      "label"
      "title"
      "foot"
      "sidenote"
      "index";
  }
  .hero__sidenote { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 16px; max-width: 100%; }
  .hero__foot { grid-template-columns: 1fr; }
  .hero__line--2 { padding-left: clamp(24px, 10vw, 80px); }
  .hero__index { min-width: 0; align-self: start; }
}

/* -------- Phone-scale hero --------
   At ≤700px we want the mission + CTA visible above the fold
   on a 375×812 device. Tighten the section padding, size the
   title so three lines + lede + CTA all fit in one breath. */
@media (max-width: 700px) {
  .hero {
    padding: 20px 16px 32px;
  }
  .hero__label {
    padding-bottom: 12px;
    font-size: 11px;
  }
  .hero__title {
    font-size: clamp(92px, 26vw, 180px);
    line-height: 0.86;
    letter-spacing: -0.05em;
    margin-left: -2px;
  }
  .hero__line--2 { padding-left: clamp(12px, 6vw, 40px); }
  .hero__line--3 { gap: 0.15em; }
  .hero__grid { gap: 18px; }
  .hero__foot {
    padding-top: 18px;
    gap: 16px;
  }
  .hero__lede p {
    font-size: 17px;
    line-height: 1.35;
  }
  .hero__ctas { gap: 10px; width: 100%; }
  .hero__ctas .btn { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 420px) {
  .hero__title {
    font-size: clamp(88px, 27vw, 130px);
  }
}

/* =========================================================
   STRIP (mono, small, sharp)
   ========================================================= */
.strip {
  border-block: 1px solid var(--line);
  background: var(--paper);
  padding: 14px 0;
  overflow: hidden;
}
.strip__track {
  display: inline-flex;
  gap: 28px;
  align-items: center;
  white-space: nowrap;
  animation: tick 50s linear infinite;
  will-change: transform;
}
.strip__track span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.15em;
  color: var(--ink);
  padding-left: 28px;
}
.strip__track i {
  font-style: normal;
  color: var(--purple);
  font-size: 12px;
}
@keyframes tick {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* =========================================================
   MANIFESTO (dark)
   ========================================================= */
.manifesto {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  padding: clamp(100px, 14vw, 200px) var(--pad);
  overflow: hidden;
}
.manifesto__inner {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
}
.manifesto .section-tag { color: var(--purple-2); }

.manifesto__quote {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 300;
  font-variation-settings: 'opsz' 96, 'wdth' 95, 'wght' 300;
  font-size: clamp(28px, 3.8vw, 62px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 22ch;
  color: var(--paper);
  position: relative;
}
.manifesto__quote em {
  font-style: italic;
  font-variation-settings: 'opsz' 96, 'wdth' 100, 'wght' 400;
  color: var(--purple-2);
}
.qmark {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 600;
  color: var(--purple);
  margin-right: 0.05em;
  font-size: 1em;
  line-height: 1;
}
.qmark--right { margin-right: 0; margin-left: 0.05em; }

.manifesto__sig {
  margin-top: 56px;
  display: inline-flex;
  align-items: center;
  gap: 20px;
  color: var(--paper);
  padding-top: 32px;
  border-top: 1px solid var(--line-dark);
}
.manifesto__sig svg path { stroke: var(--purple-2); }
.manifesto__sig-meta { display: flex; flex-direction: column; gap: 4px; color: #B8AF9B; }
.manifesto__sig-meta span:first-child { color: var(--paper); font-size: 13px; }

/* =========================================================
   APPROACH
   ========================================================= */
.approach {
  padding: clamp(96px, 12vw, 160px) var(--pad);
  max-width: var(--max);
  margin: 0 auto;
  border-bottom: 1px solid var(--line);
}
.acts { list-style: none; padding: 0; margin: 0; }
.act {
  display: grid;
  grid-template-columns: clamp(120px, 14vw, 240px) 1fr clamp(80px, 10vw, 140px);
  gap: clamp(16px, 3vw, 48px);
  padding: clamp(32px, 4vw, 56px) 0;
  border-top: 1px solid var(--line);
  align-items: start;
  position: relative;
  transition: color .4s var(--ease);
}
.act:last-child { border-bottom: 1px solid var(--line); }
.act::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: var(--purple);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .5s var(--ease);
}
.act:hover::after { transform: scaleX(1); }
.act:hover .act__num { color: var(--purple); }

.act__num {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-variation-settings: 'opsz' 96, 'wdth' 75, 'wght' 600;
  font-size: clamp(56px, 9vw, 140px);
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: var(--ink);
  transition: color .3s var(--ease);
}
.act__body { padding-top: 16px; }
.act__title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 500;
  font-variation-settings: 'opsz' 96, 'wdth' 85, 'wght' 500;
  font-size: clamp(26px, 3vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}
.act__copy {
  color: var(--ink-3);
  font-size: clamp(15px, 1.1vw, 17px);
  max-width: 54ch;
  margin: 0;
  line-height: 1.5;
}
.act__tag {
  color: var(--muted);
  padding-top: 22px;
  justify-self: end;
}

@media (max-width: 800px) {
  .act { grid-template-columns: 80px 1fr; }
  .act__tag { display: none; }
  .act__num { font-size: 48px; }
}

/* =========================================================
   ITALIC STRIP (big display marquee)
   ========================================================= */
.italic-strip {
  border-block: 1px solid var(--line);
  padding: clamp(24px, 3vw, 40px) 0;
  background: var(--paper-2);
  overflow: hidden;
}
.italic-strip__track {
  display: inline-flex;
  align-items: center;
  gap: clamp(32px, 4vw, 64px);
  white-space: nowrap;
  animation: tick 55s linear infinite;
  will-change: transform;
}
.italic-strip__track span {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-style: italic;
  font-variation-settings: 'opsz' 96, 'wdth' 95, 'wght' 400;
  font-size: clamp(44px, 7vw, 104px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--ink);
  padding-left: clamp(32px, 4vw, 64px);
}
.italic-strip__track span em {
  font-style: italic;
  color: var(--purple);
  font-variation-settings: 'opsz' 96, 'wdth' 100, 'wght' 500;
}
.italic-strip__track .sep {
  color: var(--purple);
  font-family: 'Bricolage Grotesque', sans-serif;
  font-style: normal;
  font-variation-settings: 'opsz' 96, 'wdth' 100, 'wght' 500;
  font-size: clamp(24px, 3vw, 40px);
  padding: 0;
}

/* =========================================================
   ROSTER (dark)
   ========================================================= */
.roster {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  padding: clamp(96px, 12vw, 160px) var(--pad);
  overflow: hidden;
}
.roster > *:not(.grain) { position: relative; }
.roster .sec-head { max-width: var(--max); margin: 0 auto; }

.roster__stage {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}

.roster__list {
  list-style: none;
  padding: 0; margin: 0;
  border-top: 1px solid var(--line-dark);
}
.roster__row {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr auto 28px;
  align-items: baseline;
  gap: 20px;
  padding: clamp(18px, 2vw, 28px) 0;
  border-bottom: 1px solid var(--line-dark);
  cursor: pointer;
  transition: padding .45s var(--ease), color .35s var(--ease);
}
.roster__row::before {
  content: "";
  position: absolute;
  left: -16px; right: -16px; top: 0;
  height: 100%;
  background: var(--paper);
  opacity: 0;
  transition: opacity .35s var(--ease);
  z-index: -1;
}
.roster__row:hover,
.roster__row.is-active { padding-left: 16px; padding-right: 16px; color: var(--ink); }
.roster__row:hover::before,
.roster__row.is-active::before { opacity: 1; }

.roster__num { color: #8A8175; transition: color .3s var(--ease); }
.roster__row:hover .roster__num,
.roster__row.is-active .roster__num { color: var(--ink); }

.roster__name {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 500;
  font-variation-settings: 'opsz' 96, 'wdth' 85, 'wght' 500;
  font-size: clamp(36px, 5.5vw, 84px);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--paper);
  transition: color .3s var(--ease), font-variation-settings .35s var(--ease);
}
.roster__row:hover .roster__name,
.roster__row.is-active .roster__name {
  color: var(--purple);
  font-style: italic;
  font-variation-settings: 'opsz' 96, 'wdth' 100, 'wght' 600;
}

.roster__role {
  color: #8A8175;
  align-self: center;
  transition: color .3s var(--ease);
}
.roster__row:hover .roster__role,
.roster__row.is-active .roster__role { color: var(--ink); }

.roster__arrow {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-variation-settings: 'opsz' 48, 'wdth' 100, 'wght' 500;
  font-size: 24px;
  align-self: center;
  transform: translateX(-6px);
  opacity: 0;
  transition: opacity .3s var(--ease), transform .35s var(--ease);
  color: var(--ink);
}
.roster__row:hover .roster__arrow,
.roster__row.is-active .roster__arrow { opacity: 1; transform: translateX(0); }

.roster__panel {
  position: sticky;
  top: 120px;
  min-height: 500px;
}
.roster__card {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  pointer-events: none;
}
.roster__card.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.roster__portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  background: linear-gradient(180deg, #2C261F 0%, #1B1611 100%);
  overflow: hidden;
  margin-bottom: 20px;
}
.roster__portrait::after {
  content: attr(data-initials);
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-style: italic;
  font-variation-settings: 'opsz' 96, 'wdth' 90, 'wght' 600;
  font-size: clamp(160px, 18vw, 280px);
  color: var(--purple-2);
  opacity: 0.9;
  letter-spacing: -0.04em;
  line-height: 1;
}
.roster__portrait img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.15) contrast(1.05);
}

.roster__meta {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  margin-bottom: 16px;
  color: var(--purple-2);
}
.roster__meta span:last-child { color: #C4BBA8; }
.roster__bio {
  font-size: 16px;
  color: #D5CCB8;
  margin: 0;
  max-width: 44ch;
  line-height: 1.5;
}

@media (max-width: 900px) {
  /* Single-column stage. On mobile we relocate each card into its
     matching row (via JS), so the original panel is hidden. */
  .roster__stage { grid-template-columns: 1fr; gap: 0; }
  .roster__panel { display: none; }

  .roster__row {
    grid-template-columns: 36px 1fr auto;
    column-gap: 16px;
    row-gap: 0;
    align-items: baseline;
    scroll-margin-top: 96px; /* clear the sticky site nav */
    transition:
      background .35s var(--ease),
      padding .35s var(--ease),
      margin .35s var(--ease),
      color .3s var(--ease);
  }
  .roster__arrow { display: none; }

  /* The desktop uses a ::before pseudo as the cream "active" slab.
     That technique is unreliable on mobile once the row grows to
     contain the expanded card (percentage height + negative z-index
     stops painting across the full expanded area), so we paint the
     cream directly on the row itself here. */
  .roster__row::before { display: none; }

  .roster__row:hover,
  .roster__row.is-active {
    background: var(--paper);
    color: var(--ink);
    padding-left: 16px;
    padding-right: 16px;
    margin-left: -8px;
    margin-right: -8px;
  }

  /* Card placed inside a row on mobile: spans full width beneath the
     name, hidden until the row is active, shown as an inline expansion. */
  .roster__row > .roster__card {
    grid-column: 1 / -1;
    grid-row: 2;
    position: static;
    inset: auto;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    display: none;
    padding: 14px 0 20px;
    max-width: 560px;
  }
  .roster__row.is-active > .roster__card { display: block; }

  /* Portrait at 4:5 (matches desktop), face-aware crop. Width is
     decided per-breakpoint below — full-bleed on phones, fixed lane
     on tablets. */
  .roster__row > .roster__card .roster__portrait {
    aspect-ratio: 4 / 5;
    margin-bottom: 14px;
  }
  .roster__row > .roster__card .roster__portrait img {
    object-position: center 22%;
  }

  /* The giant initial overlay works as a stylistic mark on the large
     desktop card, but at compact sizes it just covers the teammate's
     face. Suppress it on the inline card — the dark gradient remains
     as a fallback if an image fails to load. */
  .roster__row > .roster__card .roster__portrait::after {
    display: none;
  }

  /* Recolor card text so it reads on the cream active background. */
  .roster__row.is-active > .roster__card .roster__meta {
    color: var(--purple);
    border-top-color: rgba(27, 22, 17, 0.18);
    border-bottom-color: rgba(27, 22, 17, 0.18);
  }
  .roster__row.is-active > .roster__card .roster__meta span:last-child {
    color: #6B5E4A;
  }
  .roster__row.is-active > .roster__card .roster__bio {
    color: var(--ink);
  }

  @media (prefers-reduced-motion: no-preference) {
    .roster__row.is-active > .roster__card {
      animation: rosterExpand .32s var(--ease);
    }
  }
}

@keyframes rosterExpand {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Tablet card: portrait on the left, meta + bio on the right,
   so the card fills the row instead of leaving a dead lane of
   unused space beside a narrow stacked layout. ---- */
@media (min-width: 641px) and (max-width: 900px) {
  .roster__row > .roster__card {
    display: grid;
    grid-template-columns: minmax(220px, 280px) 1fr;
    grid-template-areas:
      "portrait meta"
      "portrait bio";
    column-gap: 28px;
    row-gap: 12px;
    align-items: start;
    max-width: none;
  }
  .roster__row > .roster__card .roster__portrait {
    grid-area: portrait;
    width: 100%;
    margin-bottom: 0;
  }
  .roster__row > .roster__card .roster__meta {
    grid-area: meta;
    margin-bottom: 0;
    margin-top: 6px; /* nudge meta to optically align with top of portrait */
  }
  .roster__row > .roster__card .roster__bio {
    grid-area: bio;
    max-width: 52ch;
  }
}

/* ---- Phone card: let the portrait fill the card width so the
   teammate feels like the hero of that moment, not a thumbnail.
   A soft cap keeps the 4:5 aspect from towering on larger phones. ---- */
@media (max-width: 640px) {
  .roster__row > .roster__card .roster__portrait {
    width: 100%;
    max-width: 440px;
  }
}

/* =========================================================
   DELIVERABLE
   ========================================================= */
.deliverable {
  padding: clamp(96px, 12vw, 160px) var(--pad);
  max-width: var(--max);
  margin: 0 auto;
  border-bottom: 1px solid var(--line);
}
.deliverable__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

.deliverable__list {
  list-style: none;
  padding: 0; margin: 0;
  border-top: 1px solid var(--ink);
}
.deliverable__list li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 16px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  font-size: clamp(16px, 1.3vw, 20px);
  color: var(--ink-2);
  line-height: 1.4;
  transition: padding .35s var(--ease);
}
.deliverable__list li:hover { padding-left: 8px; }
.deliverable__list li .mono { color: var(--purple); align-self: baseline; }

.deliverable__preview { margin: 0; }
.sheet {
  background: var(--paper);
  color: var(--ink);
  aspect-ratio: 3 / 4;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 28px;
  border: 1px solid var(--ink);
  transform: rotate(-1.2deg);
  box-shadow:
    12px 12px 0 -1px var(--ink),
    12px 12px 0 0 var(--purple);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.sheet:hover {
  transform: rotate(0) translate(-6px, -6px);
  box-shadow:
    18px 18px 0 -1px var(--ink),
    18px 18px 0 0 var(--purple);
}
.sheet__header {
  display: flex;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ink);
}
.sheet__body {
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 24px 0;
}
.sheet__eyebrow { display: block; color: var(--muted); font-size: 10px; }
.sheet__title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 600;
  font-variation-settings: 'opsz' 96, 'wdth' 80, 'wght' 600;
  font-size: clamp(44px, 5.5vw, 80px);
  line-height: 0.92;
  letter-spacing: -0.035em;
}
.sheet__title em {
  font-style: italic;
  font-variation-settings: 'opsz' 96, 'wdth' 95, 'wght' 500;
  color: var(--purple);
}
.sheet__dot {
  width: 10px; height: 10px;
  background: var(--purple);
  border-radius: 50%;
}
.sheet__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sheet__chips span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid var(--ink);
  color: var(--ink);
}
.sheet__lines { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.sheet__lines span { height: 4px; background: var(--ink-3); }
.sheet__lines span.s { width: 55%; }
.sheet__foot {
  display: flex;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid var(--ink);
  color: var(--muted);
}

@media (max-width: 900px) { .deliverable__grid { grid-template-columns: 1fr; } }

/* =========================================================
   PRICING
   ========================================================= */
.pricing {
  padding: clamp(96px, 12vw, 160px) var(--pad);
  max-width: var(--max);
  margin: 0 auto;
  border-bottom: 1px solid var(--line);
}
.pricing__row {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(32px, 5vw, 96px);
  align-items: end;
  border-top: 1px solid var(--ink);
  padding-top: 56px;
}
.pricing__tier { display: block; margin-bottom: 28px; color: var(--purple); }
.pricing__figure {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 600;
  font-variation-settings: 'opsz' 96, 'wdth' 75, 'wght' 700;
  font-size: clamp(120px, 22vw, 300px);
  line-height: 0.82;
  letter-spacing: -0.05em;
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--ink);
}
.pricing__dollar {
  font-size: 0.3em;
  margin-top: 0.25em;
  color: var(--purple);
  font-variation-settings: 'opsz' 96, 'wdth' 100, 'wght' 500;
}
.pricing__num {
  font-style: italic;
  font-variation-settings: 'opsz' 96, 'wdth' 85, 'wght' 600;
  color: var(--purple);
  -webkit-text-stroke: 0;
}
.pricing__subline { color: var(--muted); margin-top: 16px; }

.pricing__list ul {
  list-style: none;
  padding: 0; margin: 0 0 32px;
  border-top: 1px solid var(--line);
}
.pricing__list li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
  color: var(--ink-2);
}
.pricing__list .mono { color: var(--purple); }

@media (max-width: 900px) { .pricing__row { grid-template-columns: 1fr; } }

/* =========================================================
   FAQ
   ========================================================= */
.faq {
  padding: clamp(96px, 12vw, 160px) var(--pad);
  max-width: var(--max);
  margin: 0 auto;
  border-bottom: 1px solid var(--line);
}
.faq__list { border-top: 1px solid var(--ink); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: clamp(24px, 3vw, 40px) 0;
  display: grid;
  grid-template-columns: 60px 1fr 36px;
  gap: 24px;
  align-items: center;
  transition: color .3s var(--ease);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary .mono { color: var(--purple); font-size: 12px; align-self: center; }
.faq__q {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 500;
  font-variation-settings: 'opsz' 96, 'wdth' 90, 'wght' 500;
  font-size: clamp(22px, 2.6vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.faq__item summary:hover .faq__q { color: var(--purple); font-style: italic; }

.faq__plus {
  position: relative;
  width: 28px; height: 28px;
  border: 1px solid var(--ink);
  justify-self: end;
}
.faq__plus::before, .faq__plus::after {
  content: "";
  position: absolute;
  inset: 0; margin: auto;
  background: var(--ink);
}
.faq__plus::before { width: 14px; height: 1.5px; }
.faq__plus::after  { width: 1.5px; height: 14px; transition: transform .3s var(--ease); }
.faq__item[open] .faq__plus::after { transform: rotate(90deg); }
.faq__item[open] .faq__plus { border-color: var(--purple); background: var(--purple); }
.faq__item[open] .faq__plus::before,
.faq__item[open] .faq__plus::after { background: var(--paper); }
.faq__item[open] summary .faq__q { color: var(--purple); font-style: italic; }

.faq__item p {
  padding: 0 0 28px 84px;
  max-width: 72ch;
  color: var(--ink-3);
  font-size: 16px;
  margin: 0;
  line-height: 1.55;
}
@media (max-width: 700px) {
  .faq__item summary { grid-template-columns: 36px 1fr 28px; gap: 12px; }
  .faq__item p { padding-left: 48px; }
}

/* =========================================================
   CLOSE (FULL ORANGE: the chromatic moment)
   ========================================================= */
.close {
  position: relative;
  background: var(--purple);
  color: var(--paper);
  padding: clamp(120px, 16vw, 220px) var(--pad) clamp(80px, 10vw, 140px);
  overflow: hidden;
}
.close__inner { position: relative; max-width: var(--max); margin: 0 auto; }

.close__meta {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  color: #CDBDEA;
  padding-bottom: 24px;
  margin-bottom: clamp(40px, 6vw, 80px);
  border-bottom: 1px solid rgba(236,229,212,0.22);
}
.close__meta span { font-size: 11px; letter-spacing: 0.1em; }
.close__meta span:first-child { color: var(--paper); }

.close__title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 500;
  font-variation-settings: 'opsz' 96, 'wdth' 80, 'wght' 600;
  font-size: clamp(72px, 14vw, 220px);
  line-height: 0.84;
  letter-spacing: -0.045em;
  margin: 0 0 clamp(40px, 5vw, 72px);
  color: var(--paper);
}
.close__title .line { display: block; }
.close__title .line:nth-child(2) { padding-left: clamp(32px, 8vw, 160px); }
.close__title em {
  font-style: italic;
  font-variation-settings: 'opsz' 96, 'wdth' 100, 'wght' 600;
  color: var(--ink);
}

.close__bottom {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: end;
  padding-top: 40px;
  border-top: 1px solid rgba(236,229,212,0.22);
}
.close__sub {
  font-size: clamp(16px, 1.3vw, 19px);
  color: #D9CCEE;
  max-width: 48ch;
  margin: 0;
  line-height: 1.45;
}

.close__cta {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 20px 24px;
  background: var(--ink);
  color: var(--paper);
  transition: background .3s var(--ease);
  border: 1px solid var(--ink);
}
.close__cta-label { color: var(--purple-2); align-self: center; }
.close__cta-addr {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-variation-settings: 'opsz' 48, 'wdth' 85, 'wght' 500;
  font-size: clamp(20px, 2.2vw, 32px);
  letter-spacing: -0.015em;
  color: var(--paper);
}
.close__cta-arrow {
  color: var(--purple-2);
  transition: transform .35s var(--ease), color .3s var(--ease);
  display: inline-flex; align-items: center;
}
.close__cta:hover { background: var(--paper); }
.close__cta:hover .close__cta-addr { color: var(--ink); }
.close__cta:hover .close__cta-label { color: var(--purple); }
.close__cta:hover .close__cta-arrow { transform: translate(6px, -6px); color: var(--purple); }

@media (max-width: 900px) {
  .close__bottom { grid-template-columns: 1fr; }
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  padding: 40px var(--pad) 32px;
  overflow: hidden;
}
.footer > *:not(.grain) { position: relative; }
.footer__top,
.footer__bottom {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  color: #A59A85;
}
.footer__top { padding-bottom: 32px; border-bottom: 1px solid var(--line-dark); }
.footer__top a { color: var(--paper); transition: color .2s var(--ease); }
.footer__top a:hover { color: var(--purple-2); }
.footer__bottom { padding-top: 32px; border-top: 1px solid var(--line-dark); font-size: 10px; }
.footer__top span:nth-child(2) { text-align: center; }
.footer__top span:last-child { text-align: right; }
.footer__bottom span:nth-child(2) { text-align: center; }
.footer__bottom span:last-child { text-align: right; }

.footer__mark {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 600;
  font-style: italic;
  font-variation-settings: 'opsz' 96, 'wdth' 75, 'wght' 700;
  font-size: clamp(180px, 38vw, 620px);
  line-height: 0.8;
  letter-spacing: -0.06em;
  text-align: center;
  color: var(--paper);
  opacity: 0.08;
  user-select: none;
  padding: 40px 0;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .footer__top, .footer__bottom { grid-template-columns: 1fr; }
  .footer__top span, .footer__bottom span { text-align: left !important; }
}

/* =========================================================
   REVEAL
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .strip__track, .italic-strip__track { animation: none; }
}