/* =========================================================================
   theKNOWNSENSE Company — "The Working Wall"

   The page is a brand strategist's whiteboard: grid surface, marker
   scribbles, sticky notes, tape and doodles. The conceit isn't
   decoration — a whiteboard is literally where this work happens, so the
   aesthetic is the process made visible.

   Motion vocabulary (all gated on html.js + prefers-reduced-motion):
     .scribble  marker strokes draw themselves on, and erase on the way out
     .pop       dots/nodes spring in
     .grow      bars wipe out from the left
     [data-float]    pinned scraps drift
     [data-spotlight-note]  sticky notes peel off and fly away on scroll
   ========================================================================= */

/* ---- Fonts (self-hosted, SIL OFL) --------------------------------------- */

@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/work-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/work-sans-700.woff2") format("woff2");
}
/* Caveat is a variable font: one file covers the whole 400–700 range. */
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/caveat-var.woff2") format("woff2");
}

/* ---- Tokens -------------------------------------------------------------- */

:root {
  --board: #ffffff;          /* whiteboard surface — plain white */
  --board-line: #dcdfd8;     /* the printed dot grid, and hairline rules */
  --panel: #fdfdfb;          /* a clean board panel taped onto the wall */

  --ink: #23241f;            /* black marker */
  /* Both brand values below are sampled straight out of the supplied logo
     artwork, not the brief's approximations (which had #5E5F61 / #3DB825). */
  --ink-soft: #666666;       /* brand grey — body copy, 5.7:1 on white, passes AA */
  --green: #3bbc21;          /* brand green — fills and marks only; 2.5:1, never text */
  /* Display green for the hero's outlined payoff line and the ring around it.
     The raw brand green is 2.50:1 on white and fails even the 3:1 bar for
     large text, so it cannot carry that sentence; this is 4.29:1, comfortably
     past it, and still reads as the brand's green rather than a forest green.
     Brand green stays on fills and marks, where contrast rules don't apply. */
  --green-ink: #2f8c1d;
  --green-deep: #27761a;     /* darkened brand green for text: 5.7:1 on white */
  --on-green: #17220f;       /* 6.6:1 on --green */

  --marker-red: #e0483d;
  --marker-blue: #2f6bd0;

  /* Every sticky note is the same green — one pad, one colour, the way a real
     block of notes actually is. Light enough that the near-black marker hand on
     top clears AA comfortably (>11:1). */
  --note-green: #bde9ae;

  --tape: rgba(226, 220, 190, 0.85);

  --font-hand: "Caveat", "Bradley Hand", "Segoe Script", cursive;
  --font-body: "Work Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 16px; --sp-4: 24px;
  --sp-5: 40px; --sp-6: 64px; --sp-7: 104px; --sp-8: 168px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 180ms;
  --dur-med: 340ms;
  --dur-slow: 680ms;

  --measure: 62ch;
  --wrap-max: 1180px;

  --note-shadow: 2px 5px 0 rgba(35, 36, 31, 0.07), 6px 14px 26px rgba(35, 36, 31, 0.10);
}

/* ---- Reset ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body, h1, h2, h3, p, ul, ol, li, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { max-width: 100%; }
a { color: inherit; text-decoration: none; }

body {
  background: var(--board);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* =========================================================================
   The board surface — a fixed dot grid behind everything, so it stays put
   while the content scrolls over it like paper on a wall.
   ========================================================================= */

.board { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }

.board__dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(var(--board-line) 1.4px, transparent 1.4px);
  background-size: 24px 24px;
  opacity: 0.75;
}

/* ---- Utility -------------------------------------------------------------- */

.skip-link {
  position: absolute; left: var(--sp-3); top: -60px;
  background: var(--ink); color: var(--board);
  padding: var(--sp-2) var(--sp-3); border-radius: 4px; z-index: 200;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: var(--sp-3); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

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

.wrap { max-width: var(--wrap-max); margin-inline: auto; padding-inline: var(--sp-4); }
@media (min-width: 768px) { .wrap { padding-inline: var(--sp-6); } }

/* handwritten section labels, as if scrawled above each area */
.marker-label {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  color: var(--marker-blue);
  transform: rotate(-1.6deg);
  transform-origin: left center;
  margin-bottom: var(--sp-3);
}
.marker-label--center { text-align: center; transform-origin: center; }

/* Headings are set like printed sheets pinned to the board: heavy grotesque,
   uppercase, tracked in tight, sized past comfortable. The handwriting stays
   on the notes and annotations, so the two registers sit against each other
   rather than blurring into one. */
.board-heading {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(2.2rem, 6vw, 4.2rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  margin-bottom: var(--sp-5);
}

/* =========================================================================
   Sticky notes
   ========================================================================= */

.note {
  --rot: 0deg;
  position: relative;
  background: var(--note-green);
  padding: var(--sp-4) var(--sp-4) var(--sp-5);
  box-shadow: var(--note-shadow);
  transform: rotate(var(--rot));
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
  /* the slight lift of a peeled corner */
  clip-path: polygon(0 0, 100% 0, 100% 92%, 94% 100%, 0 100%);
}
.note p {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.3;
  color: var(--ink);
}
.note--green { background: var(--note-green); }

.note:hover { transform: rotate(calc(var(--rot) * 0.3)) translateY(-4px) scale(1.02); }

/* pins and tape */
.note__pin {
  position: absolute; top: -9px; left: 50%; margin-left: -9px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--marker-red);
  box-shadow: inset -2px -2px 0 rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.24);
}
.note__tape {
  position: absolute; top: -12px; left: 50%; margin-left: -42px;
  width: 84px; height: 26px;
  background: var(--tape);
  transform: rotate(-3deg);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.sticky-btn__tape { display: none; }

/* larger note variants */
.note--lg { padding: var(--sp-5) var(--sp-4); }
.note--lg p { font-size: clamp(1.2rem, 2.2vw, 1.75rem); }

.note--card { padding: var(--sp-5) var(--sp-4) var(--sp-5); height: 100%; }
.note--hero { padding: var(--sp-6) var(--sp-5) var(--sp-6); text-align: center; }

/* =========================================================================
   Taped-on board panels (definition, objection)
   ========================================================================= */

.whiteboard {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--board-line);
  border-radius: 2px;
  padding: var(--sp-6) var(--sp-5);
  box-shadow: 0 2px 0 rgba(35,36,31,0.04), 0 18px 40px rgba(35,36,31,0.08);
}
.whiteboard__tape {
  position: absolute; width: 110px; height: 30px;
  background: var(--tape);
  box-shadow: 0 1px 3px rgba(0,0,0,0.10);
}
.whiteboard__tape--tl { top: -14px; left: -18px; transform: rotate(-28deg); }
.whiteboard__tape--tr { top: -14px; right: -18px; transform: rotate(26deg); }
.whiteboard__tape--br { bottom: -14px; right: -18px; transform: rotate(-24deg); }

/* =========================================================================
   Marker / doodle motion system
   ========================================================================= */

.doodle { position: absolute; pointer-events: none; overflow: visible; }
.doodle__cap {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 20px;
  fill: var(--ink-soft);
}
.doodle__cap--green { fill: var(--green-deep); }

/* strokes draw on... */
html.js .scribble {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 900ms var(--ease-out);
}
html.js .is-drawn .scribble,
html.js .is-drawn.scribble { stroke-dashoffset: 0; }
/* ...and erase when they leave, which is what "getting erased" means here:
   the same stroke running backwards, slightly faster than it drew. */
html.js .is-erasing .scribble,
html.js .is-erasing.scribble {
  stroke-dashoffset: 1;
  transition-duration: 520ms;
}
html.js .scribble:nth-child(2) { transition-delay: 130ms; }
html.js .scribble:nth-child(3) { transition-delay: 260ms; }
html.js .scribble:nth-child(4) { transition-delay: 390ms; }

html.js .pop {
  transform: scale(0);
  transform-box: fill-box; transform-origin: center;
  transition: transform 520ms var(--ease-back) 420ms;
}
html.js .is-drawn .pop { transform: scale(1); }

html.js .grow {
  transform: scaleX(0);
  transform-box: fill-box; transform-origin: left center;
  transition: transform 620ms var(--ease-out);
}
html.js .is-drawn .grow { transform: scaleX(1); }
html.js .grow:nth-of-type(2) { transition-delay: 110ms; }
html.js .grow:nth-of-type(3) { transition-delay: 220ms; }
html.js .grow:nth-of-type(4) { transition-delay: 330ms; }
html.js .grow:nth-of-type(5) { transition-delay: 440ms; }
html.js .grow:nth-of-type(6) { transition-delay: 550ms; }


/* generic reveal */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px) rotate(-0.6deg);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
html.js [data-reveal].is-in { opacity: 1; transform: none; }

/* pinned scraps breathe slightly */
@keyframes drift {
  0%, 100% { transform: rotate(var(--rot)) translateY(0); }
  50%      { transform: rotate(calc(var(--rot) + 0.8deg)) translateY(-7px); }
}
html.js [data-float] { animation: drift 7s var(--ease-out) infinite; }
html.js [data-float]:nth-child(2) { animation-duration: 8.5s; animation-delay: -2s; }
html.js [data-float]:nth-child(3) { animation-duration: 9.5s; animation-delay: -4s; }

/* =========================================================================
   Header
   ========================================================================= */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.86);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--board-line);
  transition: transform var(--dur-med) var(--ease-out);
}
.site-header.is-hidden { transform: translateY(-100%); }
.site-header__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); padding-block: var(--sp-3);
}
/* The supplied logo artwork, used unaltered. Intrinsic size is 760x137, so the
   width/height attributes in the markup reserve the right box and stop the
   header shifting as it loads. */
.wordmark {
  position: relative;
  display: inline-block;
  line-height: 0;
}
.wordmark img {
  display: block;
  width: clamp(158px, 20vw, 232px);
  height: auto;
}
.wordmark--small img { width: clamp(146px, 17vw, 190px); }
.header-link {
  font-family: var(--font-hand); font-weight: 700;
  font-size: 1.2rem; color: var(--ink);
  border-bottom: 2px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.header-link:hover, .header-link:focus-visible { border-color: var(--marker-red); }

/* =========================================================================
   Sticky-note buttons
   ========================================================================= */

.sticky-btn {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--sp-3);
  background: var(--green);
  color: var(--on-green);
  font-family: var(--font-hand); font-weight: 700;
  font-size: 1.5rem; line-height: 1;
  padding: var(--sp-4) var(--sp-5);
  transform: rotate(-1.5deg);
  box-shadow: var(--note-shadow);
  clip-path: polygon(0 0, 100% 0, 100% 88%, 92% 100%, 0 100%);
  transition: transform var(--dur-med) var(--ease-back), box-shadow var(--dur-med) var(--ease-out);
  justify-self: start;
}
.sticky-btn:hover {
  transform: rotate(1deg) translateY(-4px) scale(1.04);
  box-shadow: 3px 8px 0 rgba(35,36,31,0.08), 10px 22px 34px rgba(35,36,31,0.16);
}
.sticky-btn--green { background: var(--green); color: var(--on-green); }
.sticky-btn__arrow { width: 44px; height: 18px; flex: none; }

/* =========================================================================
   01 · Hero
   ========================================================================= */

.hero { position: relative; }
.hero__stage {
  position: relative;
  /* The sticky header sits in normal flow, so the hero gets the rest of the
     viewport. --header-h is measured and published by main.js; the fallback
     covers the no-JS case. */
  min-height: calc(100vh - var(--header-h, 70px));
  display: grid; align-items: center;
  /* Kept tight enough that the hero actually fits one screen — otherwise the
     "scroll" cue pinned to its bottom edge falls below the fold, which rather
     defeats the point of a scroll cue. */
  padding-block: var(--sp-5) var(--sp-7);
}
.hero__layout { position: relative; z-index: 2; display: grid; gap: var(--sp-6); width: 100%; }
@media (min-width: 940px) {
  .hero__layout { grid-template-columns: 1.15fr 0.85fr; gap: var(--sp-5); align-items: center; }
}

.hero__copy { position: relative; }
.hero__headline {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.94;
  font-size: clamp(1.95rem, 4.8vw + 0.3rem, 3.5rem);
  text-transform: uppercase;
  max-width: 16ch;
  position: relative;
}
.line-mask { display: block; overflow: hidden; }
html.js .hero__headline .line {
  display: block;
  transform: translateY(110%);
  transition: transform 900ms var(--ease-out);
}
html.js .hero__headline .line-mask:nth-child(2) .line { transition-delay: 130ms; }
.hero.is-revealed .hero__headline .line { transform: translateY(0); }
/* The payload line is knocked out: transparent fill, stroked outline.

   The solid colour below is NOT dead code — it is the fallback. If
   -webkit-text-stroke is unsupported, `color: transparent` alone would render
   the line completely invisible, so the knockout is applied only inside
   @supports, where the stroke is guaranteed to draw. */
.line--payload {
  color: var(--green-ink);
  --stroke-w: 1.5px;
}
@media (min-width: 768px)  { .line--payload { --stroke-w: 2px; } }
@media (min-width: 1100px) { .line--payload { --stroke-w: 2.5px; } }

@supports (-webkit-text-stroke: 2px currentColor) {
  .line--payload {
    color: transparent;
    -webkit-text-stroke: var(--stroke-w) var(--green-ink);
  }
}

/* Anchored to the BOTTOM of the headline rather than a percentage down it, so
   it keeps ringing the payload line no matter how the line above wraps. Still
   desktop-only: below 900px the headline rewraps far enough that a fixed-width
   ellipse stops matching the text it is meant to circle. */
.doodle--circle { display: none; }
@media (min-width: 900px) {
  .doodle--circle {
    display: block;
    /* Sized in em so it tracks the headline's own type size, and stretched
       (preserveAspectRatio="none") rather than left to its fixed 420:120
       aspect. Deriving height from width made the ellipse far taller than the
       two payload lines, so its top arc cut through the line above. The
       payload is two lines at line-height .94, so 1.88em of text plus a little
       air lands at 2.4em. */
    width: min(108%, 470px);
    height: 2.15em;
    left: -5%;
    bottom: -0.2em;
    top: auto;
    z-index: -1;
    opacity: 0.9;
  }
}

.hero__foot { margin-top: var(--sp-6); display: grid; gap: var(--sp-4); max-width: 34ch; }
html.js .hero__foot {
  opacity: 0; transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease-out) 520ms, transform var(--dur-slow) var(--ease-out) 520ms;
}
.hero.is-revealed .hero__foot { opacity: 1; transform: none; }
.hero__support { font-size: 1.0625rem; color: var(--ink-soft); }

/* the pinned scraps */
.hero__scraps { position: relative; display: grid; gap: var(--sp-4); justify-items: center; padding-block: var(--sp-4); }
.hero__scraps .note { width: min(100%, 300px); }
.hero__scraps .note:nth-child(1) { justify-self: start; }
.hero__scraps .note:nth-child(3) { justify-self: end; }
.doodle--arrow { width: 130px; right: -2%; bottom: -8%; }

.hero__cue {
  position: absolute; left: 50%; bottom: var(--sp-5);
  transform: translateX(-50%);
  display: grid; justify-items: center; gap: var(--sp-1);
  color: var(--ink-soft);
}
.hero__cue-text { font-family: var(--font-hand); font-weight: 700; font-size: 1.1rem; }
.hero__cue svg { width: 18px; height: 34px; }
@media (max-width: 767px) { .hero__cue { display: none; } }

/* =========================================================================
   02 · Recognition — notes fly off the wall
   ========================================================================= */

.recognition {
  position: relative;
  /* Notes fly in from -16vw and out to +46vw. On mobile the wall is a normal
     grid, so those transforms can briefly extend the page's scroll width and
     flash a horizontal scrollbar. `clip` contains them — and unlike
     `overflow: hidden` it does NOT break the position:sticky pin on the
     descendant track, which is the trap here. */
  overflow-x: clip;
}
/* The track has to cover both acts now — every note flying on, then every note
   flying off — so it scales with twice the note count plus a beat for the hold
   and the closing line. main.js sets --notes from the markup. */
/* A beat per note stopped working once the wall filled up: twelve notes at
   the old rate meant a section several thousand vh long. The track now has a
   fixed base plus a small increment, so a full wall reads as a wave of notes
   arriving rather than a queue. */
html.js .recognition__track { height: calc(180vh + var(--notes, 4) * 12vh); }
.recognition__sticky {
  min-height: 100vh;
  display: grid; align-items: center;
  padding-block: var(--sp-7);
}
html.js .recognition__sticky { position: sticky; top: 0; height: 100vh; }
.recognition__inner { position: relative; width: 100%; }

/* Two columns even on the narrowest screens: a dozen notes stacked single
   file runs ~1100px, which overflows the pinned stage and clips the wall. */
.recognition__wall {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-2);
  max-width: 560px;
  margin-inline: auto;
}
/* Notes in the wall run smaller than a standalone note — a dozen of them have
   to sit on one screen without the pinned stage overflowing. */
.recognition__wall .note { padding: var(--sp-2) var(--sp-3) var(--sp-3); }
.recognition__wall .note p { font-size: clamp(0.85rem, 2.5vw, 1.15rem); line-height: 1.2; }
.recognition__wall .note__pin { width: 14px; height: 14px; margin-left: -7px; top: -7px; }

@media (min-width: 620px) {
  .recognition__wall { grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); max-width: 760px; }
  .recognition__wall .note { padding: var(--sp-3); }
}
@media (min-width: 1000px) {
  .recognition__wall {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-4) var(--sp-3);
    max-width: none;
  }
  /* nudge alternate columns so the grid rhythm never reads as a table */
  .recognition__wall .note:nth-child(4n+2) { margin-top: var(--sp-4); }
  .recognition__wall .note:nth-child(4n+3) { margin-top: calc(var(--sp-2) * -1); }
  .recognition__wall .note:nth-child(4n)   { margin-top: var(--sp-3); }
}

html.js [data-spotlight-note] {
  transition: transform 720ms var(--ease-out), opacity 620ms var(--ease-out);
  will-change: transform, opacity;
}
/* Waiting: still off the board, down and to the left, ready to sail in. */
html.js [data-spotlight-note].is-waiting {
  transform: translate3d(-16vw, 64vh, 0) rotate(-22deg) scale(0.82);
  opacity: 0;
  pointer-events: none;
}
/* Gone: peeled off and sailed away past the top-right corner. */
html.js [data-spotlight-note].is-gone {
  transform: translate3d(46vw, -78vh, 0) rotate(38deg) scale(0.72);
  opacity: 0;
  pointer-events: none;
}

.recognition__beneath {
  position: relative;
  text-align: center;
  max-width: 44ch;
  margin: var(--sp-6) auto 0;
}
/* Hidden only when JS is running to reveal it. Ungated, this would hide real
   copy forever for anyone without JS. */
html.js .recognition__beneath {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
html.js .recognition__beneath.is-shown { opacity: 1; transform: none; }
.recognition__close {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.45rem, 3.4vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.doodle--underline { position: relative; width: 100%; max-width: 460px; margin: 0 auto var(--sp-2); display: block; }


/* =========================================================================
   07 · Our own case — the mark, pulled apart

   The only brand we can show end to end is our own, so it gets the
   treatment a real design review would give it: the mark large and
   central, annotations flanking it, marker arrows pointing in.
   ========================================================================= */

.teardown { padding-block: var(--sp-8) var(--sp-7); }
.teardown__intro { max-width: var(--measure); font-size: 1.125rem; color: var(--ink-soft); }

/* the sentence everything else has to answer to */
.teardown__sentence {
  position: relative;
  margin: var(--sp-6) 0 var(--sp-7);
  max-width: 680px;
  background: var(--panel);
  border: 1px solid var(--board-line);
  border-left: 6px solid var(--green);
  padding: var(--sp-5) var(--sp-5) var(--sp-5);
  box-shadow: 0 2px 0 rgba(35,36,31,0.04), 0 16px 34px rgba(35,36,31,0.07);
}
.teardown__tag {
  display: block;
  font-family: var(--font-body);
  font-weight: 700; font-size: 0.68rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--green-deep);
  margin-bottom: var(--sp-2);
}
.teardown__sentence p {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.2vw, 2.2rem);
  line-height: 1.25;
}

/* the annotated board */
.teardown__board { display: grid; gap: var(--sp-5); align-items: center; }
.teardown__mark {
  margin: 0;
  display: grid; place-items: center;
  padding: var(--sp-6) var(--sp-5);
  background: var(--panel);
  border: 1px solid var(--board-line);
  box-shadow: 0 2px 0 rgba(35,36,31,0.04), 0 18px 40px rgba(35,36,31,0.09);
}
.teardown__mark img { width: min(100%, 480px); height: auto; }

.teardown__note { display: grid; gap: var(--sp-2); }
.teardown__note p {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: clamp(1.1rem, 1.9vw, 1.35rem);
  line-height: 1.3;
}
.teardown__note em { font-style: normal; color: var(--green-deep); }
.teardown__arrow { position: relative; width: 76px; height: 34px; overflow: visible; }
.teardown__arrow--flip { transform: scaleX(-1); }

/* Desktop: notes flank the mark, arrows point inward at it. Below this the
   whole thing stacks and the arrows would point at nothing, so they go. */
@media (min-width: 900px) {
  .teardown__board {
    grid-template-columns: 0.9fr minmax(360px, 1.5fr) 0.9fr;
    column-gap: var(--sp-5); row-gap: var(--sp-6);
  }
  .teardown__mark { grid-column: 2; grid-row: 1 / 3; }
  .teardown__note--l { grid-column: 1; justify-items: end; text-align: right; }
  .teardown__note--r { grid-column: 3; justify-items: start; }
  .teardown__note--l .teardown__arrow { justify-self: end; }
}
@media (max-width: 899px) {
  .teardown__arrow { display: none; }
  .teardown__note {
    border-left: 4px solid var(--green);
    padding-left: var(--sp-3);
  }
  .teardown__mark { order: -1; }
}

.teardown__close {
  margin-top: var(--sp-7);
  max-width: var(--measure);
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  line-height: 1.3;
}

/* =========================================================================
   Bridges — the connective beats between sections. On a real board you'd
   draw an arrow from one cluster to the next; that's what these are. The
   arrow draws itself on scroll like every other marker stroke.
   ========================================================================= */

.bridge {
  display: grid;
  justify-items: center;
  gap: var(--sp-2);
  text-align: center;
  padding-block: var(--sp-6) var(--sp-4);
}
.bridge p {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.8vw, 1.85rem);
  line-height: 1.2;
  color: var(--ink);
  max-width: 26ch;
}
.bridge__arrow { width: 34px; height: 74px; overflow: visible; }
@media (max-width: 767px) {
  .bridge { padding-block: var(--sp-5) var(--sp-3); }
  .bridge__arrow { height: 58px; }
}

/* =========================================================================
   03 · The word
   ========================================================================= */

.word { padding-block: var(--sp-8); }
.whiteboard--definition { max-width: 760px; }
.definition {
  position: relative; z-index: 1;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  line-height: 1.28;
}
.definition__term {
  color: var(--green-deep);
  border-bottom: 4px solid var(--green);
  padding-bottom: 2px;
}
.definition__pos { color: var(--ink-soft); font-weight: 400; }
.definition__body { color: var(--ink); }
.doodle--box { left: -3%; top: 50%; width: 106%; transform: translateY(-50%); z-index: 0; }
.word__support {
  margin-top: var(--sp-5);
  color: var(--ink-soft);
  max-width: var(--measure);
  font-size: 1.125rem;
}

/* =========================================================================
   04 · Phases
   ========================================================================= */

.phases { padding-block: var(--sp-7); }
.phases__board { display: grid; gap: var(--sp-6); }
@media (min-width: 900px) { .phases__board { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); } }
.phase { position: relative; }
.phase__num {
  display: block;
  font-family: var(--font-hand); font-weight: 700;
  font-size: 2.2rem; color: var(--marker-red); line-height: 1;
  margin-bottom: var(--sp-2);
}
.phase__title {
  font-family: var(--font-hand); font-weight: 700;
  font-size: 1.7rem; line-height: 1.15; margin-bottom: var(--sp-2);
}
.phase__desc { font-family: var(--font-body); font-size: 0.95rem; line-height: 1.5; color: rgba(35,36,31,0.75); }
.phase__output { font-family: var(--font-body); font-size: 0.9rem; margin-top: var(--sp-3); line-height: 1.5; }
.phase__output-label {
  display: inline-block;
  font-weight: 700; text-transform: uppercase;
  font-size: 0.62rem; letter-spacing: 0.12em;
  background: rgba(35,36,31,0.10);
  padding: 2px 7px; border-radius: 3px; margin-right: var(--sp-2);
}
.doodle--connector { display: none; }
@media (min-width: 900px) {
  .doodle--connector { display: block; width: 96px; right: -74px; top: 46%; z-index: 3; }
}

/* =========================================================================
   05 / 06 · Statements
   ========================================================================= */

.statement { padding-block: var(--sp-7); }
.statement--alt { background: rgba(35,36,31,0.035); border-block: 1px solid var(--board-line); }
.statement__grid { display: grid; gap: var(--sp-4); }
@media (min-width: 768px) { .statement__grid { grid-template-columns: 1.6fr 8fr; gap: var(--sp-5); } }
.statement__lead { font-size: 1.125rem; color: var(--ink-soft); max-width: var(--measure); }
.statement__payoff {
  font-family: var(--font-hand); font-weight: 700;
  font-size: clamp(2rem, 4.4vw, 3rem);
  line-height: 1.1; margin-top: var(--sp-4); max-width: 18ch;
}
.statement__body { margin-top: var(--sp-3); max-width: var(--measure); }
/* Highlighter: a translucent swipe laid behind the words. Slightly taller
   than the text and nudged off-centre, because a real marker never lands
   square on the line. multiply keeps the ink reading as ink over the letters. */
.highlight {
  position: relative;
  background-image: linear-gradient(var(--hl, rgba(61,184,37,0.55)), var(--hl, rgba(61,184,37,0.55)));
  background-repeat: no-repeat;
  background-size: 100% 0.72em;
  background-position: 0 0.42em;
  mix-blend-mode: multiply;
  padding-inline: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.highlight--yellow { --hl: rgba(255, 226, 92, 0.85); }

/* the hero's emphasis runs through the same marker */
.hero__support strong {
  font-weight: 700;
  background-image: linear-gradient(rgba(255,226,92,0.85), rgba(255,226,92,0.85));
  background-repeat: no-repeat;
  background-size: 100% 0.74em;
  background-position: 0 0.4em;
  mix-blend-mode: multiply;
  padding-inline: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.statement__split { display: grid; gap: var(--sp-6); align-items: center; }
@media (min-width: 900px) { .statement__split { grid-template-columns: 1.4fr 0.6fr; } }
.doodle--timeline { position: relative; width: 100%; max-width: 640px; margin-top: var(--sp-6); display: block; }
.doodle--loop { position: relative; width: min(100%, 240px); justify-self: center; display: block; }

/* =========================================================================
   07 · Objection
   ========================================================================= */

.objection { padding-block: var(--sp-8); }
.whiteboard--objection { max-width: 880px; margin-inline: auto; }
.objection__heading {
  font-family: var(--font-body); font-weight: 700;
  font-size: clamp(1.9rem, 5vw, 3.2rem);
  line-height: 0.98; letter-spacing: -0.035em; text-transform: uppercase;
  margin-bottom: var(--sp-5);
}
.objection__body { display: grid; gap: var(--sp-4); font-size: 1.0625rem; max-width: 66ch; }
.objection__body p:first-child { color: var(--ink-soft); }
.doodle--stack { position: relative; width: 100%; max-width: 560px; margin-top: var(--sp-6); display: block; }

/* =========================================================================
   08 · Exclusions
   ========================================================================= */

.exclusions { padding-block: var(--sp-7); }
.exclusions__list { display: grid; gap: var(--sp-5); }
@media (min-width: 900px) { .exclusions__list { grid-template-columns: repeat(3, 1fr); } }
.note--strike { position: relative; height: 100%; }
/* Centred on the note rather than offset from its bottom edge — the notes hold
   different amounts of text, and a bottom offset made the line land under the
   words on the short ones and through them on the long one. */
.strike {
  position: absolute;
  left: var(--sp-3); right: var(--sp-3);
  top: 50%; transform: translateY(-50%);
  width: auto; height: 52px;
  overflow: visible;
}

/* =========================================================================
   09 · Ask
   ========================================================================= */

.ask { position: relative; padding-block: var(--sp-8); overflow: hidden; }
.ask__grid { position: relative; z-index: 1; max-width: 620px; margin-inline: auto; }
.note--hero { max-width: 560px; margin-inline: auto; }
.ask__heading {
  font-family: var(--font-body); font-weight: 700;
  font-size: clamp(2.2rem, 7vw, 3.8rem); line-height: 0.92;
  letter-spacing: -0.04em; text-transform: uppercase;
  margin-bottom: var(--sp-4);
}
.ask__body { font-family: var(--font-body); font-size: 1rem; color: rgba(35,36,31,0.78); margin-bottom: var(--sp-5); }
.note--hero .sticky-btn { justify-self: center; }

/* =========================================================================
   Footer
   ========================================================================= */

.site-footer { border-top: 2px solid var(--ink); background: rgba(35,36,31,0.022); }
.site-footer__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); padding-block: var(--sp-4); flex-wrap: wrap;
}
.site-footer__meta { font-size: 0.85rem; color: var(--ink-soft); }

/* =========================================================================
   Preloader — the logo scribbled in

   The whole sequence is CSS. JS only decides whether to SKIP it (repeat
   visits) and tidies the node away afterwards, so a broken or absent
   main.js cannot leave a visitor stranded behind a white screen.

   Timeline: stroke draws 0-1.15s, holds briefly, overlay fades and is gone
   by 2.05s, then visibility:hidden and pointer-events:none for good.
   ========================================================================= */

.preloader { display: none; }

html.js .preloader {
  display: grid;
  place-items: center;
  position: fixed;
  inset: 0;
  z-index: 400;
  background: var(--board);
  pointer-events: none;
  animation: pl-clear 2.05s forwards;
}
.preloader__mark { width: min(78vw, 460px); }
.preloader__mark svg { width: 100%; height: auto; display: block; }

/* stroke-dasharray of 1 works at any length because the path is normalised */
.preloader__stroke {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: pl-draw 1.15s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
@keyframes pl-draw { to { stroke-dashoffset: 0; } }
@keyframes pl-clear {
  0%, 70% { opacity: 1; visibility: visible; }
  100%    { opacity: 0; visibility: hidden; }
}

/* Repeat visits: class is set before first paint, so there is no flash of an
   overlay that is only going to be dismissed. */
html.pl-skip .preloader { display: none !important; }

/* Hold the scroll only while the overlay is genuinely up. */
html.js:not(.pl-skip):not(.pl-done) body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  html.js .preloader { animation: pl-clear-fast 700ms forwards; }
  .preloader__stroke { stroke-dashoffset: 0 !important; animation: none !important; }
  @keyframes pl-clear-fast {
    0%, 45% { opacity: 1; visibility: visible; }
    100%    { opacity: 0; visibility: hidden; }
  }
}

/* =========================================================================
   Pen pointer

   The old cursor was a dot trailing the real one — a second blob that said
   nothing. This is a pen: the nib sits exactly on the hotspot, and holding
   the button down scribbles on the board, which is the one thing a pointer on
   a whiteboard ought to do. Ink only appears while you are actually drawing,
   so it never smears across the page while somebody is reading, and it clears
   itself within two seconds. Over anything interactive the pen lifts away and
   a label states what will happen.
   ========================================================================= */

/* the ink the marker leaves behind */
.ink {
  display: none;
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 290;
}
html.has-fine-pointer .ink { display: block; }

.cursor {
  position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 300;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
  will-change: transform;
}
.cursor.is-live { opacity: 1; }

/* Hotspot is the very point of the felt tip, so the nib is offset to put
   that corner on the pointer rather than the icon's top-left. */
.cursor__nib {
  position: absolute;
  left: -6px; top: -30px;
  width: 32px; height: 32px;
  /* The global reset sets svg { max-width: 100% }. .cursor is a shrink-to-fit
     fixed box with no width, so 100% resolves to 0 and the nib collapses to
     nothing. Opt this one out. */
  max-width: none;
  transform-origin: 6px 30px;
  transition: transform var(--dur-med) var(--ease-back), opacity var(--dur-fast) var(--ease-out);
  filter: drop-shadow(1px 2px 0 rgba(35,36,31,0.18));
}
/* lifted off the board when there is something to click */
.cursor.is-hover .cursor__nib { transform: translate(6px, -8px) rotate(-14deg); }
/* and pressed into it while actually drawing */
.cursor.is-drawing .cursor__nib {
  transform: translate(-1px, 2px) rotate(-5deg);
  transition-duration: 90ms;
}

.cursor__label {
  position: absolute;
  left: 14px; top: 6px;
  white-space: nowrap;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--board);
  background: var(--ink);
  padding: 6px 10px;
  border-radius: 2px;
  transform: scale(0.7) rotate(-2deg);
  transform-origin: 0 50%;
  opacity: 0;
  transition: transform var(--dur-med) var(--ease-back), opacity var(--dur-fast) var(--ease-out);
}
.cursor.is-hover .cursor__label { opacity: 1; transform: scale(1) rotate(-2deg); }
.cursor__label:empty { display: none; }

/* Only take the system cursor away once ours is actually running. */
html.has-fine-pointer.cursor-live,
html.has-fine-pointer.cursor-live a,
html.has-fine-pointer.cursor-live button,
html.has-fine-pointer.cursor-live .note { cursor: none; }

html:not(.has-fine-pointer) .cursor,
html:not(.has-fine-pointer) .ink { display: none; }


/* =========================================================================
   02 · What you say first — the unusable opening answer
   ========================================================================= */

.first-answer { padding-block: var(--sp-8) var(--sp-7); }
.first-answer__wrap { max-width: 720px; }
.first-answer__note { max-width: 620px; }
.first-answer__note p { font-size: clamp(1.15rem, 2.1vw, 1.6rem); line-height: 1.35; }
.first-answer__note-line {
  margin-top: var(--sp-5);
  max-width: var(--measure);
  font-size: 1.0625rem;
  color: var(--ink-soft);
}

/* =========================================================================
   05 · What comes out — the centrepiece. Everything the session surfaced,
   tangled, resolving into one line. This is the page's single image.
   ========================================================================= */

.outcome { padding-block: var(--sp-7) var(--sp-8); }
.outcome .board-heading { font-size: clamp(2.8rem, 10vw, 6.5rem); }
.outcome__viz { display: block; margin: var(--sp-5) 0 var(--sp-6); max-width: 720px; }
.outcome__viz svg { width: 100%; height: auto; overflow: visible; }
.outcome__body { display: grid; gap: var(--sp-4); max-width: var(--measure); }
.outcome__body p { font-size: 1.125rem; }
.outcome__body p:last-child {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.6vw, 1.85rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--ink);
}

/* Shared wrapper for inline drawings that sit in normal flow. */
.viz { margin: 0; }

/* 07 · the pick diagram — four answers, one circled */
.doodle--pick { position: relative; width: 100%; max-width: 560px; margin-top: var(--sp-6); display: block; }

/* =========================================================================
   Reduced motion — one audit point. Everything lands in its finished state:
   scribbles fully drawn, notes on the wall, no drift, no pin.
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  .cursor, .ink { display: none !important; }
  html.has-fine-pointer.cursor-live,
  html.has-fine-pointer.cursor-live a,
  html.has-fine-pointer.cursor-live button,
  html.has-fine-pointer.cursor-live .note { cursor: auto !important; }
  [data-magnetic] { transform: none !important; }
  .site-header, .site-header.is-hidden { transition: none !important; transform: none !important; }
  html.js [data-float] { animation: none !important; }

  html.js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  html.js .hero__headline .line,
  html.js .hero__foot { opacity: 1 !important; transform: none !important; transition: none !important; }

  html.js .scribble { stroke-dashoffset: 0 !important; transition: none !important; }
  html.js .is-erasing .scribble, html.js .is-erasing.scribble { stroke-dashoffset: 0 !important; }
  html.js .pop { transform: scale(1) !important; transition: none !important; }
  html.js .grow { transform: scaleX(1) !important; transition: none !important; }

  /* no pinned track, and the notes simply stay on the wall */
  html.js .recognition__track { height: auto !important; }
  html.js .recognition__sticky { position: static !important; height: auto !important; min-height: 0 !important; }
  html.js [data-spotlight-note] { transform: rotate(var(--rot)) !important; opacity: 1 !important; transition: none !important; }
  .recognition__beneath { opacity: 1 !important; transform: none !important; transition: none !important; }
  @media (min-width: 900px) {
    .recognition__wall { display: grid !important; min-height: 0 !important; grid-template-columns: repeat(2, 1fr); }
    .recognition__wall .note { position: relative !important; top: auto !important; left: auto !important; width: 100% !important; }
  }
  .note:hover, .sticky-btn:hover { transform: rotate(var(--rot)) !important; }
}

/* Short viewports (landscape phones, small windows): the pinned wall can't
   fit, so unpin it. The notes then never fly, which means nothing would ever
   add .is-shown — so the closing line has to be forced visible here, at a
   specificity that beats `html.js .recognition__beneath`. */
@media (max-height: 620px) {
  html.js .recognition__track { height: auto; }
  html.js .recognition__sticky { position: static; height: auto; min-height: 0; }
  /* !important is doing real work here: main.js still tags the notes
     .is-waiting on load, and that class outranks a plain selector. Without
     this the whole wall would sit permanently off-screen, because with no
     pinned track the scroll never advances far enough to fly them in. */
  html.js [data-spotlight-note] {
    transform: rotate(var(--rot)) !important;
    opacity: 1 !important;
  }
  html.js .recognition__beneath { opacity: 1; transform: none; }
}