/* tastemaker stamp · v3 2026-10-24 · mood: playful (locked brand palette, not generated) · macro: long-scroll poster collage ·
   palette: green + lime + light blue + pink, yellow accent only · hero: poster + parallax stage → scoreboard strip ·
   proof: open case files (no boxes) → comment board · close: apply CTA → apply.html ·
   contrast: matrix in .tastemaker/style-lock.md (all text pairs ≥ 7:1) */
/* ============ Bawnseye Studios: homepage v2 (read HANDOFF.md + .tastemaker/style-lock.md before changing) ============ */

@font-face { font-family: "Anton"; src: url("assets/fonts/anton.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("assets/fonts/nunito.woff2") format("woff2"); font-weight: 200 1000; font-display: swap; }

:root {
  /* the Café family */
  --ice: #EEF7FD;
  --green: #1A5900;
  --green-deep: #123F00;
  --sky: #33B6F2;
  --sky-soft: #D4F0FD;
  --leaf: #EEF5DF;
  --pink: #FF74B1;
  --paper: #FFFFFF;
  /* pops: lime + pink, yellow is the accent (small doses only: tape, the starburst, the odd highlight) */
  --pink-soft: #FFC2DC;
  --lime: #B6FF2E;
  --sun: #FFDD3C;
  /* ink */
  --ink: #111511;
  --ink-2: #1E241E;

  --display: "Anton", "Impact", "Arial Narrow", sans-serif;
  --body: "Nunito", system-ui, sans-serif;

  --line: 3px solid var(--ink);
  --line-sm: 2px solid var(--ink);
  --sh-1: 3px 3px 0 var(--ink);
  --sh-2: 6px 6px 0 var(--ink);
  --sh-3: 10px 10px 0 var(--ink);
  --r-sm: 14px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-pill: 999px;
  --sh-0: 2px 2px 0 var(--ink);

  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-slap: cubic-bezier(.34, 1.56, .64, 1);
  --ease-io: cubic-bezier(.77, 0, .175, 1);

  /* spacing: one rhythm for every section (v4 mobile pass) */
  --pad-big: clamp(80px, 11vw, 150px);
  --pad-mid: var(--pad-big);
  --gutter: clamp(20px, 5vw, 40px);
  --head-gap: clamp(36px, 5vw, 64px);  /* section head → its content */
  --stack: clamp(80px, 10vw, 140px);   /* between big blocks inside a section */

  --torn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 24' preserveAspectRatio='none'%3E%3Cpath d='M0 24 L0 10.8 L26 4.3 L57 7.5 L72 12.1 L99 3.3 L115 3.2 L147 9.8 L181 6.3 L207 7.9 L222 10.2 L240 8.3 L271 9.4 L303 13.5 L334 8.3 L367 14.0 L398 6.1 L426 11.4 L447 11.8 L468 8.3 L498 13.5 L526 16.4 L542 8.0 L561 7.6 L590 3.2 L606 8.4 L631 12.3 L659 9.4 L681 12.8 L697 6.9 L720 11.1 L746 7.1 L774 7.7 L791 10.2 L814 12.0 L840 6.7 L869 6.7 L895 17.5 L922 16.8 L947 6.8 L965 6.7 L986 12.0 L1018 10.1 L1032 10.7 L1057 10.8 L1087 5.8 L1118 4.6 L1144 7.9 L1170 4.8 L1190 10.6 L1200 10.8 L1200 24Z'/%3E%3C/svg%3E");
  --dots: radial-gradient(circle at 1px 1px, rgba(26, 89, 0, .11) 1.4px, transparent 0) 0 0 / 22px 22px;
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  margin: 0;
  background: var(--ice);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.55;
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 8px; }
::selection { background: var(--lime); color: var(--ink); }
mark { background: none; color: inherit; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 10px; }
.skip:focus { left: 12px; }

.wrap { width: min(1200px, 100% - var(--gutter) * 2); margin-inline: auto; }

.ic { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.12em; }
svg use { pointer-events: none; }

/* ---------- type ---------- */
.poster {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(3.25rem, 14vw, 8.5rem);
  line-height: .86;
  letter-spacing: -.01em;
  margin: 0 0 .22em;
  color: var(--green);
  text-transform: uppercase;
}
.poster-light { color: var(--ice); }
.poster-lime { color: var(--lime); }
.poster-sm {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.25rem, 9vw, 4.25rem);
  line-height: .92;
  letter-spacing: -.005em;
  margin: 0 0 .3em;
  color: var(--green);
}
.kicker {
  display: block;
  font-weight: 900;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green);
  margin: 0 0 12px;
}
.kicker-lime { color: var(--lime); }
.lede { font-size: clamp(1.15rem, 2.4vw, 1.45rem); font-weight: 750; line-height: 1.35; margin: 0; max-width: 34ch; }
.lede-light { color: var(--ice); }
.small { font-size: .95rem; }
.sec-head { position: relative; margin-bottom: var(--head-gap); }
.sec-head-sm { margin-bottom: clamp(28px, 3vw, 40px); }
.sec-head > .poster, .sec-head > .poster-sm { margin-bottom: 0; }
.sec-head > .lede, .sec-head > .sec-side { margin-top: 16px; }
/* split header: title left, the supporting line sits on its baseline at the right, so no half-empty rows */
.sec-side > :last-child { margin-bottom: 0; }
@media (min-width: 960px) {
  /* kicker + title stack left (the kicker row soaks up spare height, so it always sits right on the title); the line spans both rows on the right */
  .sec-head.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); grid-template-rows: 1fr auto; column-gap: clamp(32px, 5vw, 72px); align-items: end; }
  .sec-head.split > .kicker { grid-column: 1; grid-row: 1; }
  .sec-head.split > .poster, .sec-head.split > .poster-sm { grid-column: 1; grid-row: 2; }
  .sec-head.split > .sec-side { grid-column: 2; grid-row: 1 / -1; }
  .sec-head.split > .poster, .sec-head.split > .poster-sm { margin-bottom: 0; }
  .sec-head.split .sec-side { margin-top: 0; padding-bottom: .5em; border-left: 3px solid currentColor; padding-left: 22px; }
  .sec-head.split .lede { max-width: none; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  min-height: 48px;
  padding: .72em 1.4em;
  font: 900 1.05rem/1.1 var(--body);
  color: var(--paper);
  background: var(--green);
  border: var(--line);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-1);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out), background-color 200ms ease;
}
.btn .ic { transition: transform 200ms var(--ease-out); }
.btn:active { transform: translate(2px, 2px) scale(.98); box-shadow: 1px 1px 0 var(--ink); transition-duration: 90ms; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
  .btn:hover .ic { transform: translateX(3px); }
  .btn:active { transform: translate(2px, 2px) scale(.98); box-shadow: 1px 1px 0 var(--ink); }
}
/* squishy press (solid primary buttons): the face drops onto its 3px shadow, leaving a 1px sliver,
   then springs back up with a little overshoot. :active fires on tap too, so no JS */
.btn:not(.btn-ghost) { transition: transform 110ms var(--ease-slap), box-shadow 110ms var(--ease-slap), background-color 200ms ease; }
.btn:not(.btn-ghost):active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); transition: transform 110ms var(--ease-out), box-shadow 110ms var(--ease-out); }
.btn-sm { min-height: 44px; padding: .5em 1.05em; font-size: .95rem; }
.btn-big { font-size: clamp(1.1rem, 2.6vw, 1.3rem); padding: .85em 1.6em; min-height: 58px; }
.btn-lime { background: var(--lime); color: var(--ink); }
@media (max-width: 639px) { .btn-block { width: 100%; } }
.btn-ghost { background: var(--paper); color: var(--ink); }
.btn-ink { background: var(--ink); color: var(--lime); }
.btn[disabled] { cursor: progress; opacity: .85; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .4em;
  min-height: 44px;
  font-weight: 900;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
  text-decoration-color: var(--sky);
  transition: text-decoration-color 200ms ease;
}
.link-arrow .ic { transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .link-arrow:hover { text-decoration-color: var(--pink); }
  .link-arrow:hover .ic { transform: translate(2px, 2px); }
  .link-arrow[target]:hover .ic { transform: translate(2px, -2px); }
}

/* ---------- photo treatments ---------- */
.polaroid {
  position: relative;
  display: block;
  margin: 0;
  background: var(--paper);
  padding: 10px 10px 12px;
  border: var(--line);
  border-radius: 8px;
  box-shadow: var(--sh-2);
  rotate: var(--r, 0deg);
  text-decoration: none;
  transition: rotate 240ms var(--ease-out), translate 240ms var(--ease-out), box-shadow 240ms var(--ease-out);
}
.polaroid img { border-radius: 3px; width: 100%; }
.polaroid figcaption, .polaroid .cap { display: block; font-weight: 900; font-size: .95rem; text-align: center; padding-top: 9px; }
.polaroid-dark { background: #000; color: var(--paper); }
@media (hover: hover) and (pointer: fine) {
  .polaroid:hover { rotate: 0deg; translate: 0 -6px; box-shadow: var(--sh-3); }
}
.taped::before {
  content: "";
  position: absolute;
  top: -15px; left: 50%;
  width: 112px; height: 30px;
  translate: -50% 0;
  rotate: -4deg;
  background: rgba(255, 221, 60, .85);
  box-shadow: 0 1px 2px rgba(17, 21, 17, .12);
  clip-path: polygon(3% 0, 97% 6%, 100% 30%, 96% 55%, 100% 80%, 97% 100%, 2% 94%, 0 70%, 4% 45%, 0 20%);
  z-index: 3;
}

/* ---------- Kumukun (always the baked white die-cut sticker: never filter, blend or recolor him) ---------- */
.kumukun { all: unset; display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.kumukun:focus-visible { outline: 3px solid var(--sky); outline-offset: 4px; border-radius: 24px; }
.kumukun img, .kumukun-img { display: block; width: 100%; height: auto; }

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; gap: 16px;
  padding: 12px var(--gutter);
  background: rgba(238, 247, 253, 0);
  border-bottom: 3px solid transparent;
  transition: background-color 240ms ease, border-color 240ms ease;
}
.scrolled .nav {
  background: rgba(238, 247, 253, .9);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  backdrop-filter: blur(10px) saturate(1.4);
  border-bottom-color: var(--ink);
}
/* logo lockup: tree mark + BAWNSEYE (Anton) + a small letterspaced STUDIOS, so it reads as a studio, not one gym word.
   Phones stack STUDIOS under the wordmark so the Apply button keeps its room */
.nav-logo { display: flex; align-items: center; gap: 9px; min-height: 44px; min-width: 0; text-decoration: none; color: var(--green); -webkit-tap-highlight-color: transparent; }
.nav-tree { position: relative; display: block; height: 34px; aspect-ratio: 900 / 557; flex: none; transform-origin: 50% 100%; }
.nav-tree img { width: 100%; height: 100%; }
.nav-tree-lime { position: absolute; inset: 0; opacity: 0; } /* apply page only: the baked lime copy shows while the nav sits on ink */
.nav-lockup { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.nav-word { font-family: var(--display); font-size: 1.4rem; line-height: .9; letter-spacing: .02em; }
.nav-studios { font: 900 .6rem/1 var(--body); letter-spacing: .38em; margin-right: -.38em; color: #4F5A4F; } /* soft ink on ice: 6.3:1 */
@media (min-width: 480px) {
  .nav-tree { height: 38px; }
  .nav-lockup { flex-direction: row; align-items: baseline; gap: 9px; }
  .nav-word { font-size: 1.5rem; }
  .nav-studios { font-size: .72rem; letter-spacing: .24em; margin-right: 0; }
}
.nav-links { display: none; gap: 2px; margin-left: auto; position: relative; }
.nav-links a { font-weight: 900; text-decoration: none; padding: 10px 14px; border-radius: var(--r-pill); transition: background-color 180ms ease; }
.nav-links a:hover { background: var(--sky-soft); }
.nav-links a.on { background: var(--ink); color: var(--lime); }
.nav .btn { margin-left: auto; }
@media (min-width: 860px) {
  .nav-links { display: flex; }
  .nav .btn { margin-left: 8px; }
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  padding-top: 68px; /* room for the fixed nav */
  background: var(--dots), var(--ice);
  overflow: clip;
}
.hero::after { /* soft sky glow behind the stage, keeps the ice from feeling flat */
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 70vmax; height: 70vmax; right: -24vmax; top: -18vmax;
  background: radial-gradient(closest-side, rgba(51, 182, 242, .16), rgba(51, 182, 242, 0));
}
.hero-grid {
  position: relative; z-index: 1;
  width: min(1200px, 100% - var(--gutter) * 2);
  margin-inline: auto;
  padding: 12px 0 48px;
  display: grid;
  grid-template-areas: "title" "stage" "copy";
  align-items: start;
}

.hero-title {
  grid-area: title;
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: min(7.5rem, calc((100vw - var(--gutter) * 2) / 4.3)); /* BAWNSEYE in Anton is ~3.8em wide: ~90% of the column, never touches the edges */
  line-height: .92;
  letter-spacing: -.012em;
}
.hero-title .mask { display: block; overflow: clip; padding-top: .05em; padding-bottom: .06em; } /* room so Anton's caps never sit on the clip edge */
.hero-title .line { display: block; }
.hero-title .l1 { color: var(--green); }
.hero-title .l2 { color: var(--ink); }

.hero-stage { grid-area: stage; position: relative; margin: 20px auto 0; width: min(76%, 320px); }
.stage-inner { position: relative; aspect-ratio: 10 / 8.4; }
.stage-tree { position: absolute; left: 4%; top: 2%; width: 92%; rotate: -2deg; }
.hero-kumukun {
  position: absolute; left: -2%; bottom: -4%; width: 44%;
  rotate: -6deg; transform-origin: 50% 95%;
}
.burst {
  position: absolute; right: -1%; top: -2%;
  width: 31%; aspect-ratio: 1;
  display: grid; place-content: center; text-align: center;
  color: var(--ink);
  background: var(--ink);
  clip-path: polygon(50% 0, 60% 12%, 75% 5%, 78% 21%, 95% 22%, 89% 38%, 100% 50%, 89% 62%, 95% 78%, 78% 79%, 75% 95%, 60% 88%, 50% 100%, 40% 88%, 25% 95%, 22% 79%, 5% 78%, 11% 62%, 0 50%, 11% 38%, 5% 22%, 22% 21%, 25% 5%, 40% 12%);
  rotate: 12deg;
}
.burst b { font-family: var(--display); font-weight: 400; font-size: clamp(1.4rem, 6vw, 2.3rem); line-height: .9; }
.burst small { font-weight: 900; font-size: clamp(.58rem, 2.2vw, .78rem); line-height: 1.1; text-transform: uppercase; letter-spacing: .04em; }
/* starburst keyline: the burst itself is ink, the lime face sits 4px inside it */
.burst::before { content: ""; position: absolute; inset: 4px; background: var(--sun); clip-path: inherit; z-index: 0; }
.burst b, .burst small { position: relative; z-index: 1; }

.hero-copy { grid-area: copy; margin-top: 28px; }
.hero-promise {
  margin: 0 0 16px;
  font-family: var(--display);
  font-size: clamp(2rem, 9.4vw, 3.4rem);
  line-height: 1.04;
  text-transform: uppercase;
}
.hero-promise > span { display: block; }
.hl { display: inline-block; padding: 0 .16em; border: var(--line); border-radius: 12px; box-shadow: var(--sh-1); line-height: 1.08; }
.hl-lime { background: var(--lime); rotate: -2.5deg; }
.hl-sky { background: var(--sky); color: var(--ink); rotate: 1.5deg; margin-top: 8px; }
.hero-sub { font-size: clamp(1.05rem, 2.4vw, 1.25rem); font-weight: 700; line-height: 1.45; max-width: 36ch; margin: 0 0 24px; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
@media (max-width: 639px) {
  .hero-cta { flex-direction: column; }
  /* phones: more air between title, stage and copy, and the stage bleeds a little less */
  .hero-stage { margin-top: 28px; }
  .hero-copy { margin-top: 40px; }
  .hero-kumukun { bottom: -2%; }
  .burst { right: 0; }
}

@media (min-width: 960px) {
  .hero { padding-top: 72px; }
  .hero-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    grid-template-areas: "title stage" "copy stage";
    grid-template-rows: auto 1fr;
    column-gap: 40px;
    padding: 36px 0 64px;
  }
  .hero-title { font-size: clamp(6rem, 12.2vw, 10rem); }
  .hero-stage { width: 100%; margin: 24px 0 0; align-self: center; }
  .hero-kumukun { width: 46%; left: -6%; bottom: -2%; }
  .hero-copy { margin-top: 34px; }
  .hero-promise { font-size: clamp(2.4rem, 3.7vw, 3.5rem); }
}

/* ---------- scoreboard: one dark band, the numbers carry the colour (no blocks, no cards) ---------- */
.score {
  position: relative; z-index: 2;
  list-style: none; margin: 0;
  padding: clamp(28px, 4vw, 44px) var(--gutter);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px;
  background: var(--ink); color: var(--ice);
}
.score li { display: flex; flex-direction: column; gap: 6px; }
.score b { font-family: var(--display); font-weight: 400; font-size: clamp(2.1rem, 11vw, 4rem); line-height: .9; letter-spacing: -.005em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.score span { font-weight: 800; font-size: .95rem; line-height: 1.3; color: rgba(238, 247, 253, .78); }
.sc-1 b { color: var(--lime); }
.sc-2 b { color: var(--sky); }
.sc-3 b { color: var(--pink); }
.sc-4 b { color: var(--sun); }
@media (min-width: 900px) {
  .score { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding-inline: max(var(--gutter), (100% - 1200px) / 2); }
  .score li { padding: 4px clamp(20px, 2.6vw, 36px); border-left: 2px solid rgba(238, 247, 253, .16); }
  .score li:first-child { padding-left: 0; border-left: 0; }
  .score b { font-size: clamp(3rem, 5vw, 4.6rem); }
}

/* ---------- torn edges (sections rip in like paper) ---------- */
.torn { position: relative; }
.torn::before {
  content: "";
  position: absolute; left: 0; right: 0; top: -22px; height: 24px;
  background: var(--torn-c, var(--green));
  -webkit-mask: var(--torn) 0 0 / 1200px 24px repeat-x;
  mask: var(--torn) 0 0 / 1200px 24px repeat-x;
  pointer-events: none;
}
.torn-sky { --torn-c: var(--sky-soft); }
.torn-leaf { --torn-c: var(--leaf); }
.torn-ink { --torn-c: var(--ink); }
.torn-ice { --torn-c: var(--ice); }

/* ---------- receipts ---------- */
.receipts { padding: var(--pad-big) 0; }
.stat-note { font-weight: 700; font-size: 1.1rem; margin: 12px 0 0; max-width: 52ch; }

.case {
  position: relative;
  display: grid; gap: 36px; align-items: center;
  margin-bottom: var(--stack);
}
@media (max-width: 899px) { .case-grog .grog-media { order: -1; } } /* phones: picture first, like the cranberry case */
.case-title { font-family: var(--display); font-weight: 400; font-size: clamp(2.25rem, 9vw, 4rem); line-height: .94; margin: 0 0 20px; color: var(--green); }
.ic-title { stroke-width: 3; vertical-align: -.06em; width: .9em; height: .9em; }
.case-punch { font-family: var(--display); font-size: clamp(1.45rem, 3.6vw, 2.05rem); line-height: 1.04; margin: 24px 0 12px; text-transform: uppercase; max-width: 24ch; }
.case-body p:not([class]) { font-size: 1.08rem; max-width: 46ch; }
.case-media { position: relative; }
.case-cranberry .polaroid { max-width: min(360px, 90%); margin: 16px auto 0; }
.play {
  position: absolute; left: 50%; top: 45%; translate: -50% -50%;
  width: 72px; height: 72px; display: grid; place-items: center;
  background: var(--paper); border: var(--line); border-radius: 50%; box-shadow: var(--sh-1);
  transition: scale 200ms var(--ease-out);
}
.play svg { width: 30px; height: 30px; fill: var(--ink); translate: 2px 0; }
@media (hover: hover) and (pointer: fine) { .polaroid:hover .play { scale: 1.08; } }
.stamp {
  position: absolute; right: 0; top: 2%; z-index: 4; /* top corner: never covers the caption */
  display: grid; text-align: center;
  padding: .3em .7em .35em;
  font-family: var(--display); font-size: clamp(1.6rem, 6vw, 2.6rem); line-height: .9; letter-spacing: .02em;
  color: var(--ink); background: var(--pink);
  border: var(--line); border-radius: 12px; box-shadow: var(--sh-2);
  rotate: 10deg;
}
.flow { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; counter-reset: f; position: relative; }
.flow::before { /* the thread that ties the story together */
  content: ""; position: absolute; left: 25px; top: 18px; bottom: 18px; width: 3px;
  background: repeating-linear-gradient(var(--green) 0 6px, transparent 6px 11px);
}
.flow li { counter-increment: f; position: relative; padding: 12px 0 12px 58px; font-size: 1.08rem; line-height: 1.35; }
.flow li::before {
  content: counter(f); position: absolute; left: 11px; top: 50%; translate: 0 -50%;
  width: 32px; height: 32px; display: grid; place-items: center;
  background: var(--green); color: var(--lime); font-weight: 900; border: var(--line-sm); border-radius: 50%;
}
.flow li:last-child b { background: var(--lime); padding: 0 .25em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

.grog-media { padding: 28px 8px 8px; }
.grog-board {
  position: relative;
  background: radial-gradient(circle at 1px 1px, rgba(17, 21, 17, .14) 1.4px, transparent 0) 0 0 / 20px 20px, var(--pink-soft);
  border: var(--line); border-radius: var(--r-md);
  padding: 30px 18px 84px;
  box-shadow: var(--sh-2);
  transform: rotate(1.5deg);
  transform-style: preserve-3d;
  will-change: transform;
}
.grog-pin { width: 100%; max-width: 440px; margin: 0 auto; }
.big-num {
  position: absolute; left: 14px; bottom: 16px;
  display: grid; padding: 8px 14px 9px;
  background: var(--ink); color: var(--lime);
  border-radius: var(--r-sm); rotate: -6deg; box-shadow: 3px 3px 0 var(--sky);
}
.big-num b { font-family: var(--display); font-weight: 400; font-size: 2.3rem; line-height: 1; }
.big-num small { font-weight: 900; font-size: .78rem; color: var(--paper); }
.glare {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at var(--gx, 30%) var(--gy, 20%), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 45%);
  opacity: 0; transition: opacity 300ms ease;
}
.grog-board.is-tilting .glare { opacity: 1; }
.grog-guy { position: absolute; right: -4px; top: -6px; width: 104px; rotate: 10deg; pointer-events: none; }
@media (min-width: 900px) {
  .case { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; }
  .case-cranberry { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  .case-grog { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
  .grog-guy { width: 170px; right: -6px; top: -62px; }
  .stamp { right: -6%; top: 6%; }
}

/* comments board */
.comments { margin-top: 0; }
.board {
  position: relative;
  padding: clamp(20px, 3vw, 36px);
  background: radial-gradient(circle at 1px 1px, rgba(17, 21, 17, .12) 1.3px, transparent 0) 0 0 / 18px 18px, var(--sky-soft);
  border-radius: var(--r-lg);
}
.comment-wall { columns: 1; column-gap: 22px; }
.comment {
  position: relative; break-inside: avoid;
  margin: 0 0 22px;
  border: var(--line); border-radius: var(--r-sm); box-shadow: var(--sh-1);
  background: #1b1d21; rotate: var(--r, 0deg);
  transition: rotate 240ms var(--ease-out), translate 240ms var(--ease-out), box-shadow 240ms var(--ease-out);
}
.comment img { width: 100%; border-radius: 11px; }
.comment:nth-child(3n+1)::before { /* tape bits */
  content: ""; position: absolute; top: -12px; left: 18px; width: 64px; height: 22px; rotate: -8deg; z-index: 2;
  background: rgba(182, 255, 46, .75);
  clip-path: polygon(3% 0, 97% 8%, 100% 50%, 96% 100%, 2% 92%, 0 50%);
}
.comment:nth-child(3n+2)::before {
  content: ""; position: absolute; top: -12px; right: 18px; width: 64px; height: 22px; rotate: 7deg; z-index: 2;
  background: rgba(255, 194, 220, .85);
  clip-path: polygon(3% 0, 97% 8%, 100% 50%, 96% 100%, 2% 92%, 0 50%);
}
@media (hover: hover) and (pointer: fine) {
  .comment:hover { rotate: 0deg; translate: 0 -4px; box-shadow: var(--sh-2); z-index: 2; }
}
.swipe { display: none; }
@media (max-width: 699px) {
  /* phones: one swipeable rail instead of 7 stacked screenshots (~900px of scroll) */
  .board { margin-inline: calc(var(--gutter) * -1); border-radius: 0; padding: 18px 0 20px; }
  .swipe { display: flex; justify-content: flex-end; align-items: center; gap: .4em; margin: 0; padding-inline: var(--gutter); font-weight: 900; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--green); }
  .comment-wall {
    columns: auto; display: flex; align-items: center; gap: 16px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    padding: 22px var(--gutter) 14px; scrollbar-width: none;
  }
  .comment-wall::-webkit-scrollbar { display: none; }
  .comment-wall:focus-visible { outline-offset: -3px; border-radius: 0; }
  .comment { flex: 0 0 84%; margin: 0; scroll-snap-align: start; rotate: calc(var(--r, 0deg) * .5); }
}
@media (min-width: 700px) { .comment-wall { columns: 2; } }
@media (min-width: 1050px) { .comment-wall { columns: 3; } }

/* ---------- services (editorial index) ---------- */
.services { background: var(--green); color: var(--ice); padding: var(--pad-big) 0; --torn-c: var(--green); }
.menu { list-style: none; padding: 0; margin: 0; border-top: 3px solid rgba(238, 247, 253, .25); }
.menu-row {
  position: relative; isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px;
  grid-template-areas: "num ." "name go" "desc desc";
  gap: 8px 16px;
  padding: 24px 0;
  border-bottom: 3px solid rgba(238, 247, 253, .25);
}
.menu-row::before { /* lime wipe on hover (clip-path, compositor-friendly) */
  content: ""; position: absolute; inset: -3px -12px; z-index: -1;
  background: var(--lime); border-radius: 18px; border: var(--line);
  clip-path: inset(0 100% 0 0 round 18px);
  transition: clip-path 360ms var(--ease-io);
}
.menu-num { grid-area: num; font-weight: 900; font-size: .85rem; font-variant-numeric: tabular-nums; color: var(--lime); transition: color 200ms ease; }
.menu-row h3 {
  grid-area: name; margin: 0;
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(2rem, 8.6vw, 4.2rem); line-height: .95;
  transition: color 200ms ease, translate 360ms var(--ease-out);
}
.menu-go { grid-area: go; align-self: center; width: 28px; height: 28px; color: var(--lime); transition: color 200ms ease, transform 200ms var(--ease-out); }
.menu-row p { grid-area: desc; margin: 0; font-weight: 700; font-size: 1.05rem; max-width: 42ch; transition: color 200ms ease; }
.menu-link { color: inherit; text-decoration: none; }
.menu-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 18px; } /* whole row is the hit area */
.menu-link:focus-visible { outline: none; }
.menu-row:has(.menu-link:focus-visible)::before { clip-path: inset(0 0 0 0 round 18px); }
.menu-row:has(.menu-link:focus-visible) h3, .menu-row:has(.menu-link:focus-visible) p, .menu-row:has(.menu-link:focus-visible) .menu-num, .menu-row:has(.menu-link:focus-visible) .menu-go { color: var(--ink); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (min-width: 900px) {
  .menu-row { grid-template-columns: 64px minmax(0, 1.3fr) minmax(0, 1fr) 32px; grid-template-areas: "num name desc go"; align-items: center; gap: 24px; padding: 30px 12px; }
  .menu-row p { margin: 0; }
}
@media (hover: hover) and (pointer: fine) {
  .menu-row:hover::before { clip-path: inset(0 0 0 0 round 18px); }
  .menu-row:hover h3 { color: var(--ink); translate: 10px 0; }
  .menu-row:hover p, .menu-row:hover .menu-num, .menu-row:hover .menu-go { color: var(--ink); }
  .menu-row:hover .menu-go { transform: translateX(4px); }
}

.howmuch { display: grid; justify-items: start; gap: 8px; margin: var(--head-gap) 0 0; font-weight: 700; font-size: 1.1rem; max-width: 44ch; }
.howmuch p { margin: 0; }
.howmuch .howmuch-q { font-family: var(--display); font-weight: 400; font-size: clamp(2rem, 8vw, 2.6rem); line-height: 1; text-transform: uppercase; color: var(--lime); }
.howmuch .link-arrow { color: var(--lime); text-decoration-color: var(--pink); }

/* ---------- cafe ---------- */
.cafe { padding: var(--pad-big) 0; background: radial-gradient(circle at 1px 1px, rgba(51, 182, 242, .2) 1.4px, transparent 0) 0 0 / 22px 22px, var(--sky-soft); }
.cafe-grid { display: grid; gap: 48px; align-items: center; }
.cafe .poster { margin-bottom: 16px; }
.cafe .lede { margin-bottom: 28px; }
.cafe .poster { white-space: nowrap; font-size: clamp(3.4rem, 15vw, 7.4rem); }
.cup-sticker {
  display: inline-grid; place-items: center; vertical-align: .32em;
  width: .62em; height: .62em; margin-left: .14em;
  background: var(--paper); border: var(--line); border-radius: 50%; box-shadow: var(--sh-1);
  rotate: 12deg;
}
.cup-sticker svg { width: 56%; height: 56%; fill: none; stroke: var(--green); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.checks { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 12px; }
.checks li { padding-left: 40px; position: relative; font-weight: 700; font-size: 1.05rem; line-height: 1.4; }
.checks li::before {
  content: ""; position: absolute; left: 0; top: -1px; width: 28px; height: 28px;
  background: var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111511' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 16px no-repeat;
  border: var(--line-sm); border-radius: 8px; box-shadow: var(--sh-0);
}
.cafe-shots { position: relative; padding: 0 4px 24px; }
.shot { position: relative; margin: 0; border: var(--line); border-radius: var(--r-sm); box-shadow: var(--sh-2); background: var(--paper); rotate: var(--r, 0deg); }
.shot img { border-radius: 0 0 11px 11px; }
.chrome { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: var(--line-sm); background: var(--ice); border-radius: 11px 11px 0 0; font-size: .75rem; font-weight: 900; }
.chrome i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--ink); background: var(--pink); }
.chrome i + i { background: var(--sun); }
.chrome i + i + i { background: var(--lime); }
.chrome span { margin-left: 8px; }
.shot-2 { width: 80%; margin: -36px 0 0 auto; z-index: 2; }
@media (min-width: 900px) { .cafe-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 72px; } }

/* ---------- who ---------- */
.who { padding: var(--pad-mid) 0; }
.who-list { list-style: none; padding: 0; margin: 0; border-top: var(--line); }
.who-list li { display: grid; gap: 14px 32px; padding: 24px 0; border-bottom: var(--line); font-weight: 700; font-size: clamp(1.1rem, 2.2vw, 1.4rem); line-height: 1.35; }
.who-list b { font-family: var(--display); font-weight: 400; font-size: clamp(2.6rem, 7vw, 4.6rem); line-height: .95; text-transform: uppercase; color: var(--green); }
.who-list li:nth-child(1) b { text-decoration: underline 8px var(--lime); text-underline-offset: 6px; }
.who-list li:nth-child(2) b { text-decoration: underline 8px var(--sky); text-underline-offset: 6px; }
.who-list li:nth-child(3) b { text-decoration: underline 8px var(--pink); text-underline-offset: 6px; }
@media (min-width: 820px) { .who-list li { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; } }

/* ---------- about ---------- */
.about { padding: var(--pad-big) 0; background: var(--leaf); }
.about-grid { display: grid; gap: 56px; align-items: center; }
.about-media { position: relative; max-width: 470px; margin: 0 auto; width: 100%; }
@media (max-width: 899px) {
  .about-grid { gap: 0; }
  .about-copy { display: contents; }
  .about-copy > * { order: 3; }
  .about-copy > .kicker { order: 1; }
  .about-copy > .poster { order: 1; margin-bottom: 32px; }
  .about-media { order: 2; max-width: 340px; margin-bottom: 28px; }
  .about-copy > .sig { justify-self: start; }
  .about-copy > p:not(.sig) { margin: 0 0 16px; } /* grid items don't collapse margins */
}
.about .poster { line-height: .92; }
.about-copy p { font-size: clamp(1.08rem, 2vw, 1.18rem); line-height: 1.5; max-width: 44ch; }
.sig { font-family: var(--display); font-size: 2rem !important; color: var(--green); margin: 10px 0 20px; rotate: -3deg; display: inline-block; border-bottom: 4px solid var(--lime); line-height: 1.1; }
.socials { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 640px) { .socials { display: flex; flex-wrap: wrap; } }
.socials a {
  min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 6px 18px;
  font-weight: 900; text-decoration: none;
  background: var(--paper); border: var(--line-sm); border-radius: var(--r-pill); box-shadow: var(--sh-0);
  transition: background-color 180ms ease, translate 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.socials a:only-child { grid-column: 1 / -1; }
@media (hover: hover) and (pointer: fine) { .socials a:hover { background: var(--lime); translate: -1px -2px; box-shadow: 3px 4px 0 var(--ink); } }
@media (min-width: 900px) { .about-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 80px; } }

/* ---------- apply ---------- */
.apply { background: var(--ink); color: var(--paper); padding: var(--pad-big) 0; }
.apply-head { position: relative; }
.apply-k { position: absolute; z-index: 1; right: 0; top: -14px; width: clamp(96px, 24vw, 170px); rotate: 8deg; pointer-events: none; }
@media (min-width: 960px) { .apply-k { top: -64px; } }
.steps { list-style: none; padding: 0; margin: 0 0 40px; display: grid; }
.steps li { display: flex; flex-direction: column; gap: 4px; padding: 20px 0; border-top: 3px solid rgba(238, 247, 253, .22); font-weight: 700; line-height: 1.4; color: var(--ice); }
.step-n { font-weight: 900; font-size: .85rem; letter-spacing: .12em; color: var(--lime); font-variant-numeric: tabular-nums; }
.steps b { font-family: var(--display); font-weight: 400; font-size: clamp(1.8rem, 3.4vw, 2.4rem); text-transform: uppercase; line-height: 1; color: var(--paper); }
@media (min-width: 820px) { .steps:not(.steps-stack) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } }
.apply-cta { position: relative; }
.apply-page { padding-top: calc(72px + clamp(40px, 6vw, 88px)); min-height: 100svh; }
@media (max-width: 999px) { .steps-stack li { padding: 16px 0; } .steps-stack b { font-size: 1.6rem; } }

.apply-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; } /* minmax: the budget select's long options can't widen the page */
.form-wrap { position: relative; max-width: 780px; padding-top: clamp(92px, 12vw, 118px); }
.form-k { position: absolute; z-index: 0; right: 22px; top: 0; width: clamp(150px, 20vw, 200px); rotate: 7deg; }
@media (min-width: 1000px) {
  .apply-body { grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: 64px; align-items: start; }
  .apply-body .steps { margin: 118px 0 0; position: sticky; top: 110px; }
}
.apply-form, .apply-done {
  position: relative; z-index: 1;
  background: var(--ice); color: var(--ink);
  border: 3px solid var(--paper); border-radius: var(--r-lg); box-shadow: 6px 6px 0 var(--lime);
  padding: 28px 20px;
}
.form-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 0 0 22px; font-family: var(--display); font-size: 2rem; line-height: 1; text-transform: uppercase; color: var(--green); }
.form-title span { font-family: var(--body); font-size: .8rem; font-weight: 900; letter-spacing: .1em; color: var(--ink); background: var(--sun); padding: 0 .3em; }
.apply-form .row { display: grid; gap: 0 18px; }
@media (min-width: 640px) { .apply-form .row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .apply-form, .apply-done { padding: 40px; box-shadow: 10px 10px 0 var(--lime); } }
.field { display: block; border: 0; padding: 0; margin: 0 0 20px; min-width: 0; }
.field > span, .field legend { display: block; font-weight: 900; margin-bottom: 7px; padding: 0; }
.field small { font-weight: 700; opacity: .72; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 52px; padding: 12px 14px;
  font: 700 1rem var(--body); color: var(--ink);
  background: var(--paper); border: var(--line); border-radius: var(--r-sm);
  transition: box-shadow 160ms var(--ease-out), translate 160ms var(--ease-out), border-color 160ms ease;
}
.field ::placeholder { color: #6B766B; opacity: 1; }
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; box-shadow: 4px 4px 0 var(--sky); translate: -2px -2px; }
.field.invalid input, .field.invalid select { border-color: #C0135A; background: #FFF0F6; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; gap: .4em; min-height: 44px; padding: 8px 16px;
  font-weight: 900; background: var(--paper); border: var(--line); border-radius: var(--r-pill); cursor: pointer;
  transition: rotate 220ms var(--ease-slap), box-shadow 160ms var(--ease-out), background-color 160ms ease;
}
.chip span::before {
  content: ""; display: none; width: 14px; height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111511' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.chip input:checked + span { background: var(--lime); rotate: -2deg; box-shadow: var(--sh-1); }
.chip input:checked + span::before { display: block; animation: check-in 220ms var(--ease-slap); }
@keyframes check-in { from { transform: scale(.4); opacity: 0; } }
.chip input:active + span { scale: .97; }
.chip input:focus-visible + span { outline: 3px solid var(--sky); outline-offset: 2px; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-error { color: #C0135A; font-weight: 900; min-height: 1.2em; margin: 0 0 10px; }
.form-error a { color: inherit; }
.btn-send { width: 100%; }
@media (min-width: 640px) { .btn-send { width: auto; } }
.fine { font-size: .92rem; margin: 16px 0 0; color: #3B463B; }
.apply-done { text-align: center; }
.done-k { width: 190px; margin: -110px auto 10px; }
.apply-done .poster-sm { color: var(--green); }
.apply-done p { font-weight: 700; }

/* ---------- apply-v2: the step-by-step application ----------
   Default (no JS) = every step stacked as one long form. bawn.js adds .stepped and shows one step at a time */
.apply-step + .apply-step { margin-top: 40px; padding-top: 36px; border-top: 3px dashed rgba(17, 21, 17, .28); }
.apply-step > .kicker { margin-bottom: 8px; }
.step-h { font-family: var(--display); font-weight: 400; font-size: clamp(2.1rem, 7.4vw, 3.1rem); line-height: .94; letter-spacing: -.005em; margin: 0 0 12px; color: var(--green); text-transform: uppercase; }
.step-h:focus { outline: none; } /* focused by script on each step change, for screen readers; it's not a control */
.step-line { font-weight: 700; font-size: 1.08rem; line-height: 1.45; margin: 0 0 24px; max-width: 40ch; }
.step-meta { font-weight: 900; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--green); margin: -8px 0 28px; }
.step-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; }
.step-nav [data-next] { margin-left: auto; }
.step-welcome .step-nav [data-next] { margin-left: 0; }
.step-error { color: #C0135A; font-weight: 900; margin: 0 0 14px; }
.step-error:empty { margin: 0; }
.apply-form:not(.stepped) [data-nav], .apply-form:not(.stepped) .step-line-js, .apply-form:not(.stepped) .tone-read { display: none; }
@media (max-width: 639px) {
  .step-nav-send { flex-direction: column-reverse; align-items: stretch; }
  .step-nav-send .btn { width: 100%; }
}

/* single + multi picks: big tappable cards with the squishy press */
.picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.25rem), 1fr)); gap: 10px; }
.pick { position: relative; display: flex; }
.pick input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.pick > span {
  position: relative; flex: 1;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  min-height: 58px; padding: 10px 40px 10px 14px;
  font-weight: 900; font-size: 1rem; line-height: 1.2;
  background: var(--paper); border: var(--line); border-radius: var(--r-sm); box-shadow: var(--sh-1);
  transition: transform 110ms var(--ease-slap), box-shadow 110ms var(--ease-slap), background-color 160ms ease, rotate 220ms var(--ease-slap);
}
.pick small { font-weight: 700; font-size: .86rem; line-height: 1.3; color: #3B463B; opacity: 1; }
.pick > span::after { /* the tick: a ring for single picks, a rounded square for multi */
  content: ""; position: absolute; right: 12px; top: 50%; translate: 0 -50%;
  width: 20px; height: 20px; border: 2.5px solid var(--ink); border-radius: 50%; background: var(--paper);
}
.pick-multi > span::after { border-radius: 6px; }
.pick input:checked + span { background: var(--lime); rotate: -1deg; }
.pick:nth-child(even) input:checked + span { rotate: 1deg; }
.pick input[type=radio]:checked + span::after { background: radial-gradient(circle, var(--ink) 0 4.5px, var(--paper) 5px); }
.pick input[type=checkbox]:checked + span::after {
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B6FF2E' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.pick input:active + span, .chip input:active + span { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); transition: transform 110ms var(--ease-out), box-shadow 110ms var(--ease-out); }
.pick input:focus-visible + span { outline: 3px solid var(--sky); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .pick input:not(:checked):hover + span { background: var(--sky-soft); } }
.chip span { box-shadow: var(--sh-0); }
.chip input:checked + span { box-shadow: var(--sh-1); }
.chip input:active + span { scale: 1; }
/* "Something else" text box only shows once that card is picked (browsers without :has just always show it) */
@supports selector(:has(*)) {
  .apply-form .field-other { display: none; }
  .apply-form:has(input[name="business_type"][value="Something else"]:checked) .field-other { display: block; }
}
.field select { -webkit-appearance: none; appearance: none; padding-right: 46px; cursor: pointer; }
.field select, .field.invalid select { /* the invalid state's background shorthand would wipe the chevron, so restate it */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111511' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 20px;
}

/* tone sliders: chunky track that fills as you drag, a word at each end, a live readout under it */
.tone { margin: 0 0 22px; --fill: var(--lime); }
.tone[data-tone="loud"] { --fill: var(--sky); }
.tone[data-tone="polish"] { --fill: var(--pink); }
.tone-q { display: block; font-weight: 900; margin-bottom: 4px; }
.tone-range { --v: 50%; -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 48px; margin: 0; background: none; cursor: pointer; }
.tone-range:focus { outline: none; }
.tone-range::-webkit-slider-runnable-track {
  box-sizing: border-box; height: 20px; border: var(--line); border-radius: var(--r-pill); box-shadow: var(--sh-0);
  background: linear-gradient(90deg, var(--fill) var(--v), var(--paper) var(--v));
}
.tone-range::-webkit-slider-thumb {
  -webkit-appearance: none; box-sizing: border-box; width: 38px; height: 38px; margin-top: -12px;
  background: var(--paper); border: var(--line); border-radius: 50%; box-shadow: var(--sh-1);
  transition: transform 160ms var(--ease-slap);
}
.tone-range:active::-webkit-slider-thumb { transform: scale(1.12); }
.tone-range:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--sky); outline-offset: 2px; }
.tone-range::-moz-range-track { box-sizing: border-box; height: 20px; border: var(--line); border-radius: var(--r-pill); background: var(--paper); box-shadow: var(--sh-0); }
.tone-range::-moz-range-progress { box-sizing: border-box; height: 20px; border: var(--line); border-radius: var(--r-pill); background: var(--fill); }
.tone-range::-moz-range-thumb { box-sizing: border-box; width: 38px; height: 38px; background: var(--paper); border: var(--line); border-radius: 50%; box-shadow: var(--sh-1); }
.tone-range:focus-visible::-moz-range-thumb { outline: 3px solid var(--sky); outline-offset: 2px; }
.tone-ends { display: flex; justify-content: space-between; gap: 12px; font-weight: 900; font-size: .92rem; margin-top: 2px; }
.tone-read { display: block; margin-top: 4px; text-align: center; font-family: var(--display); font-size: 1.45rem; line-height: 1.05; text-transform: uppercase; color: var(--green); }

/* progress: a dashed thread with 8 stops; Kumukun rides it (transform only) */
.apply-track { position: relative; container-type: inline-size; padding-top: 46px; margin: 0 0 26px; --p: 0; }
.track-line { position: relative; display: flex; justify-content: space-between; align-items: center; height: 18px; }
.track-line::before, .track-line::after { content: ""; position: absolute; left: 9px; right: 9px; top: 50%; }
.track-line::before { height: 3px; translate: 0 -50%; background: repeating-linear-gradient(90deg, var(--green) 0 6px, transparent 6px 11px); }
.track-line::after { height: 5px; translate: 0 -50%; background: var(--green); border-radius: 3px; transform-origin: 0 50%; transform: scaleX(var(--p)); transition: transform 520ms var(--ease-out); }
.track-line i { position: relative; z-index: 1; width: 18px; height: 18px; border: 2.5px solid var(--ink); border-radius: 50%; background: var(--paper); transition: background-color 200ms ease; }
.track-line i.done { background: var(--green); }
.track-line i.now { background: var(--lime); }
.track-k { position: absolute; left: 0; top: 0; width: 54px; translate: calc(9px + var(--p) * (100cqi - 18px) - 50%) 0; transition: translate 520ms var(--ease-out); }
.track-k img { width: 100%; transform-origin: 50% 100%; }

/* the vibe card: their answers as a taped receipt */
.vibe-card {
  position: relative; margin: 30px 0 28px; padding: 22px 18px 18px;
  background: var(--paper); border: var(--line); border-radius: 10px; box-shadow: var(--sh-2);
  rotate: -1deg;
}
.vibe-card::before { /* yellow tape */
  content: ""; position: absolute; top: -15px; left: 50%; width: 112px; height: 30px; translate: -50% 0; rotate: 3deg;
  background: rgba(255, 221, 60, .85); box-shadow: 0 1px 2px rgba(17, 21, 17, .12);
  clip-path: polygon(3% 0, 97% 6%, 100% 30%, 96% 55%, 100% 80%, 97% 100%, 2% 94%, 0 70%, 4% 45%, 0 20%);
}
.vc-head { text-align: center; padding-bottom: 14px; border-bottom: 2px dashed var(--ink); }
.vc-kicker { display: block; font-weight: 900; font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--green); }
.vc-name { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(1.8rem, 7vw, 2.5rem); line-height: 1; text-transform: uppercase; margin: 6px 0 4px; overflow-wrap: anywhere; }
.vc-sub { display: block; font-weight: 800; font-size: .92rem; color: #3B463B; }
.vc-row { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding: 8px 0; border-bottom: 2px dashed rgba(17, 21, 17, .3); }
.vc-k { font-weight: 900; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--green); }
.vc-v { font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.vc-v.empty { color: #5E6A5E; font-weight: 700; font-style: italic; }
.vc-edit { all: unset; min-height: 44px; display: inline-flex; align-items: center; padding: 0 4px; font-weight: 900; font-size: .85rem; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--sky); cursor: pointer; }
.vc-edit:focus-visible { outline: 3px solid var(--sky); outline-offset: 0; border-radius: 6px; }
@media (hover: hover) and (pointer: fine) { .vc-edit:hover { text-decoration-color: var(--pink); } }
.vc-tones { display: grid; gap: 10px; padding: 12px 0 14px; border-bottom: 2px dashed rgba(17, 21, 17, .3); }
.vc-tones-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: -6px; }
.vc-tone { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr) 4.6rem; align-items: center; gap: 2px 10px; font-weight: 900; font-size: .82rem; }
.vc-tone > span:last-of-type { text-align: right; }
.vc-bar { height: 14px; border: 2px solid var(--ink); border-radius: var(--r-pill); background: var(--paper); overflow: hidden; }
.vc-bar i { display: block; height: 100%; background: var(--fill, var(--lime)); transform-origin: 0 50%; transform: scaleX(var(--v, .5)); border-right: 2px solid var(--ink); }
.vc-tone em { grid-column: 1 / -1; text-align: center; font-style: normal; font-weight: 800; font-size: .84rem; color: #3B463B; }
.vc-code { height: 30px; margin-top: 16px; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 5px, var(--ink) 5px 9px, transparent 9px 11px, var(--ink) 11px 12px, transparent 12px 16px); opacity: .85; }
.vc-foot { margin: 6px 0 0; text-align: center; font-weight: 900; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; }
@media (min-width: 640px) { .vibe-card { padding: 26px 28px 22px; } .vc-row { grid-template-columns: 7rem minmax(0, 1fr) auto; } .vc-tone { grid-template-columns: 5.4rem minmax(0, 1fr) 5.4rem; } }

/* stepped layout tweaks: on phones the form comes first, the 3-step explainer after it */
@media (max-width: 999px) { .apply-body:has(.stepped) .steps { order: 2; margin: 48px 0 0; } }
.form-wrap.started { padding-top: 24px; }
.form-wrap.started .form-k { display: none; }
.stepped .apply-step + .apply-step { margin-top: 0; padding-top: 0; border-top: 0; }

/* ---------- faq ---------- */
.faq { padding: var(--pad-big) 0; }
.faq-grid { display: grid; gap: 8px 64px; }
@media (min-width: 960px) { .faq-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; } .faq .sec-head { position: sticky; top: 110px; margin-bottom: 0; } }
.faq-list { border-top: var(--line); }
.faq details { border-bottom: var(--line); }
.faq summary { cursor: pointer; font-weight: 900; font-size: 1.15rem; line-height: 1.3; padding: 20px 56px 20px 0; min-height: 44px; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.plus { position: absolute; right: 0; top: 50%; translate: 0 -50%; width: 36px; height: 36px; display: grid; place-items: center; background: var(--lime); border: var(--line-sm); border-radius: 50%; transition: rotate 260ms var(--ease-out), background-color 200ms ease; }
.plus svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.faq details[open] .plus { rotate: 135deg; background: var(--pink); }
.faq details p { margin: 0; padding: 0 0 22px; font-size: 1.05rem; max-width: 60ch; }
@supports (interpolate-size: allow-keywords) {
  .faq details { interpolate-size: allow-keywords; }
  .faq details::details-content { height: 0; overflow: clip; transition: height 320ms var(--ease-out), content-visibility 320ms allow-discrete; }
  .faq details[open]::details-content { height: auto; }
}

/* ---------- footer ---------- */
.foot { background: var(--green); color: var(--ice); padding: clamp(72px, 9vw, 104px) 0 0; --torn-c: var(--green); }
.foot-slim { padding-top: 64px; }
.foot-slim .foot-copy { margin-top: 56px; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.foot-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.mark2 { display: block; width: 120px; height: auto; }
.foot-h { margin: 0 0 6px; font-weight: 900; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--lime); }
.foot-links { display: flex; flex-direction: column; }
.foot-links a { font-weight: 700; text-decoration: none; min-height: 44px; overflow-wrap: anywhere; display: inline-flex; align-items: center; justify-self: start; transition: color 160ms ease; }
.foot-links a[href^="mailto"] { overflow-wrap: normal; white-space: nowrap; font-size: .97rem; }
.foot-links a:hover { color: var(--lime); text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 820px) { .foot-grid { grid-template-columns: minmax(0, 1fr) auto; align-items: start; } }
/* big footer: the wordmark is wider than the screen and the page edge cuts the bottom of the letters off.
   The span's own box is shorter than its glyphs and clips them, so the clip sits exactly on the page end
   (clipping the whole footer would also cut off its torn top edge) */
.foot-word { position: relative; margin-top: clamp(40px, 6vw, 72px); line-height: 0; overflow-x: clip; }
.foot-word span {
  display: flex; justify-content: center; /* flex centring lets the word overflow both sides evenly */
  height: .66em;
  font-family: var(--display); font-size: 29vw; line-height: .8; letter-spacing: -.01em; white-space: nowrap;
  color: var(--lime);
  overflow: clip;
  user-select: none;
}
.foot-k { position: absolute; right: 6%; bottom: 58%; width: clamp(92px, 15vw, 210px); rotate: 9deg; }
.foot-copy { position: relative; z-index: 1; margin: 0; padding: 16px var(--gutter) 22px; text-align: center; font-size: .9rem; font-weight: 700; background: var(--ink); color: var(--ice); }
.foot-copy-top { background: none; margin-top: clamp(48px, 6vw, 72px); padding-block: 0; color: rgba(238, 247, 253, .82); } /* the wordmark is the last thing on the page, so the © line moved above it */

/* ---------- film grain: the whole page feels printed. Tune it here (opacity .05–.07). Static, never animated ----------
   Sits above every section (z 40) but under the fixed nav (50) and the skip link (100); clicks pass straight through */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 40; pointer-events: none;
  opacity: .06;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.6 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 180px 180px repeat;
}

/* ---------- hand-drawn annotations (max 3: Receipts squiggle, 150M+ circle, Café arrow) ----------
   Final state is the default; bawn.js adds .anno-wait before observing and .drawn once in view */
.anno { position: absolute; pointer-events: none; overflow: visible; fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; }
.anno path { vector-effect: non-scaling-stroke; } /* stretched with preserveAspectRatio="none", the line stays ~3px */
.anno-word { position: relative; display: inline-block; }
.anno-squiggle { left: -2%; top: 100%; width: 104%; height: clamp(12px, .15em, 22px); rotate: -1.5deg; stroke-width: 3; } /* sits in the gap under the caps, clear of the lede */
.anno-ring { position: relative; display: inline-block; align-self: flex-start; }
.anno-ring > b { display: block; } /* ring box = the number's box, so the circle hugs it */
.anno-circle { left: -11%; top: -24%; width: 122%; height: 150%; rotate: -2deg; stroke: var(--ice); stroke-width: 3; } /* ice, not ink: it sits on the ink scoreboard */
.anno-arrow { left: 4%; top: -58px; width: 74px; height: 66px; rotate: 2deg; stroke-width: 3; z-index: 3; }
@media (min-width: 900px) { .anno-arrow { left: -62px; top: -40px; width: 86px; height: 76px; } }

/* ---------- read-along: the About paragraph fills in word by word as it scrolls through (bawn.js builds the spans) ---------- */
.read-along .rw { opacity: .28; transition: opacity 260ms var(--ease-out); }
.read-along .rw.lit { opacity: 1; }

/* ---------- 404 ---------- */
.lost { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 40px 16px; background: var(--dots), var(--ice); }
.lost .kumukun-img { width: 220px; margin: 0 auto 18px; rotate: -6deg; }
.lost .lede { margin: 0 auto 28px; }

/* ================= motion ================= */
/* Content is visible without JS; the hidden start states only apply once bawn.js-capable browsers add .js */
@media (prefers-reduced-motion: no-preference) {

  /* hero entrance: plays once on load, CSS-only so it never waits on JS */
  .js [data-hero] { animation: rise 900ms var(--ease-out) both; animation-delay: calc(var(--d, 0) * 1ms); }
  .js .hero-title .line { animation: line-up 1000ms var(--ease-out) both; }
  .js .hero-title .l1 { animation-delay: 120ms; }
  .js .hero-title .l2 { animation-delay: 220ms; }
  .js [data-hero="4"] { --d: 260; animation-name: none; }
  .js .stage-tree { animation: tree-in 1100ms var(--ease-out) 280ms both; }
  .js .burst { animation: slap 700ms var(--ease-slap) 900ms both; }
  .js .hero-kumukun { animation: kumu-in 800ms var(--ease-slap) 760ms both, wiggle 5.2s ease-in-out 2.4s infinite; }
  .js [data-hero="5"] { --d: 420; }
  .js [data-hero="5"] .hl-lime { animation: slap 600ms var(--ease-slap) 820ms both; }
  .js [data-hero="5"] .hl-sky { animation: slap-2 600ms var(--ease-slap) 940ms both; }
  .js [data-hero="6"] { --d: 520; }
  .js [data-hero="7"] { --d: 600; }
  .js .score { animation: rise 900ms var(--ease-out) 700ms both; }

  @keyframes rise { from { opacity: 0; transform: translateY(22px); } }
  @keyframes line-up { from { transform: translateY(104%); } }
  @keyframes tree-in { from { opacity: 0; transform: scale(.9) translateY(18px); filter: blur(6px); } }
  @keyframes slap { from { opacity: 0; transform: scale(1.5) rotate(-10deg); } }
  @keyframes slap-2 { from { opacity: 0; transform: scale(1.5) rotate(10deg); } }
  @keyframes kumu-in { from { opacity: 0; transform: translateY(40px) scale(.7) rotate(-18deg); } }
  @keyframes wiggle { 0%, 84%, 100% { rotate: -6deg; } 88% { rotate: -1deg; } 92% { rotate: -9deg; } 96% { rotate: -4deg; } }

  .hero-kumukun img { transition: transform 200ms var(--ease-out); }
  .hero-kumukun:active img { transform: scale(.95); }
  .hero-kumukun.hop img { animation: hop 700ms var(--ease-out); }
  @keyframes hop { 0% { transform: translateY(0) scale(1, 1); } 15% { transform: translateY(0) scale(1.06, .92); } 45% { transform: translateY(-34px) scale(.96, 1.05) rotate(-6deg); } 75% { transform: translateY(0) scale(1.04, .96); } 100% { transform: none; } }

  /* scroll reveals (bawn.js adds .in) */
  .js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 700ms var(--ease-out), transform 800ms var(--ease-out); }
  .js [data-reveal].in { opacity: 1; transform: none; }
  .js [data-stagger] > * {
    --dl: calc(var(--i, 0) * 60ms);
    opacity: 0; transform: translateY(26px) scale(.94) rotate(3deg);
    /* keep each card's own hover transitions alive alongside the entrance */
    transition: opacity 500ms var(--ease-out) var(--dl), transform 700ms var(--ease-slap) var(--dl),
      rotate 240ms var(--ease-out), translate 240ms var(--ease-out), box-shadow 240ms var(--ease-out), background-color 180ms ease, color 180ms ease;
  }
  .js [data-stagger].in > * { opacity: 1; transform: none; }

  /* the SOLD OUT stamp slams once the cranberry case is in view */
  .js .stamp { opacity: 0; }
  .js .case-cranberry.in .stamp { animation: stamp 560ms var(--ease-slap) 520ms both; }
  @keyframes stamp { 0% { opacity: 0; transform: scale(2.4) rotate(14deg); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }

  /* hand-drawn annotations draw themselves once (pathLength="1" on every path, so 1 = the whole stroke) */
  .anno-wait path { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .anno-wait.drawn path { stroke-dashoffset: 0; transition: stroke-dashoffset 800ms cubic-bezier(.65, 0, .35, 1) 250ms; }
  .anno-wait.drawn path + path { transition-duration: 260ms; transition-delay: 1000ms; } /* arrowhead lands after the shaft */

  .js .case-cranberry.in .flow::before { animation: thread 1200ms var(--ease-out) 300ms both; }
  @keyframes thread { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

  .js .form-k { transition: transform 700ms var(--ease-slap) 300ms; transform: translateY(70px) rotate(-8deg); }
  .js .form-wrap.in .form-k { transform: none; }
  .apply-done:not([hidden]) .done-k { animation: kumu-in 700ms var(--ease-slap) both; }

  /* nav tree: a tiny squash + hop on hover / tap (bawn.js adds .hop) */
  .nav-tree.hop { animation: tree-hop 220ms var(--ease-out); }
  @keyframes tree-hop { 0% { transform: none; } 30% { transform: scale(1.1, .86); } 65% { transform: translateY(-5px) scale(.95, 1.06); } 100% { transform: none; } }

  /* application steps: slide in from the side you're heading to; a shake when something's missing */
  .apply-step.in-fwd { animation: step-in-fwd 380ms var(--ease-out); }
  .apply-step.in-back { animation: step-in-back 380ms var(--ease-out); }
  @keyframes step-in-fwd { from { opacity: 0; transform: translateX(28px); } }
  @keyframes step-in-back { from { opacity: 0; transform: translateX(-28px); } }
  .shake { animation: shake 380ms var(--ease-out); }
  @keyframes shake { 15% { transform: translateX(-9px); } 35% { transform: translateX(8px); } 55% { transform: translateX(-5px); } 75% { transform: translateX(3px); } }
  .track-k.hop img { animation: track-hop 520ms var(--ease-out); }
  @keyframes track-hop { 0% { transform: none; } 18% { transform: scale(1.08, .9); } 50% { transform: translateY(-20px) scale(.95, 1.06) rotate(-6deg); } 82% { transform: scale(1.05, .95); } 100% { transform: none; } }
  .tone-read.pop { animation: read-pop 260ms var(--ease-slap); }
  @keyframes read-pop { from { transform: scale(.82) rotate(-3deg); } }

  /* Café shots drift at different speeds as you scroll past (scroll-driven, no JS; unsupported browsers just skip it) */
  @supports (animation-timeline: view()) {
    .shot-1 { animation: drift-a linear both; animation-timeline: view(); animation-range: cover; }
    .shot-2 { animation: drift-b linear both; animation-timeline: view(); animation-range: cover; }
    .foot-k { animation: drift-k var(--ease-out) both; animation-timeline: view(); animation-range: entry 0% entry 100%; } /* finishes as soon as he is fully on screen, even at the very bottom of the page */
    @keyframes drift-a { from { translate: 0 30px; } to { translate: 0 -30px; } }
    @keyframes drift-b { from { translate: 0 90px; } to { translate: 0 -70px; } }
    @keyframes drift-k { from { translate: 0 40px; rotate: 24deg; } to { translate: 0 0; rotate: 9deg; } }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .polaroid, .comment, .menu-row::before, .menu-row h3 { transition-property: background-color, color, box-shadow, opacity; }
  .btn:not(.btn-ghost), .btn:not(.btn-ghost):active { transition: none; } /* the press still happens, it just snaps */
  .read-along .rw { opacity: 1; transition: none; }
  .track-k, .track-line::after, .pick > span, .tone-range::-webkit-slider-thumb { transition: none; } /* Kumukun just appears at his stop */
}

/* ---------- apply page: nav sits on ink until you scroll ---------- */
html:not(.scrolled) .page-apply .nav-logo { color: var(--lime); }
html:not(.scrolled) .page-apply .nav-studios { color: var(--sky); } /* sky on ink: 8.4:1 */
html:not(.scrolled) .page-apply .nav-tree-lime { opacity: 1; }
.page-apply .nav-tree-lime { transition: opacity 240ms ease; }