/* =========================================================================
   ScribbleMonk — stylesheet
   Sections follow DESIGN_SPEC.md numbering.
   ========================================================================= */

/* ---- 0. Design tokens --------------------------------------------------- */
:root {
  --paper:      #FEF8EE;
  --paper-deep: #FEF8EF;   /* measured: the contact band is barely warmer than --paper */
  --card:       #FFFDF8;
  /* Four measured darks, not one --ink. SPEC_MEASURED §1. */
  --ink-display: #184C25;   /* H1 + section headings   9.47:1 on --paper */
  --ink-btn:     #051F1A;   /* dark fills             16.33:1 on --paper */
  --ink-eyebrow: #172B23;   /* caps labels, UI text   14.13:1 on --paper */
  --ink-body:    #36423E;   /* body copy               9.91:1 on --paper */
  /* --orange is for strokes, dots, underlines, ornaments and display type >=24px bold.
     It is 3.08:1 on --paper, so it must never carry small text or a white-on-fill label. */
  --orange:      #F75A24;
  /* lightest hue-true darkening of --orange that clears AA on white (5.18:1),
     --paper (4.90:1), --card (5.09:1) and --paper-deep (4.89:1). Filled buttons and
     small orange text on cream. White on this fill is 5.18:1. */
  --orange-deep: #BE451C;
  /* hue-true lightening for orange text on --ink-btn: 5.97:1 */
  --orange-lite: #FF6829;
  /* lightest hue-true darkening that clears AA on the peach (4.68:1) and pink (4.56:1) tints */
  --orange-idx:  #B4421A;
  /* SPEC_MEASURED §9.3 — sampled off `rest of the page.png`, not guessed */
  --purple:     #675BCB;   /* fills and ornaments; white on it is 5.34:1 */
  /* text-weight purple: --purple is only 3.82:1 on the 12% purple wash behind the
     why badge and 4.39:1 on the work card's lav tint. This is the darkening that
     clears AA on both (4.61:1 / 5.14:1). */
  --purple-deep: #5B4FB8;
  --lav:        #F6F1F5;   /* pale warm grey-lilac, not the purple the build had */
  --bar-ink:    #171D1B;   /* video control bar — not pure black */

  --tint-lav:   #EFE6F2;
  --tint-peach: #FEEFDA;
  --tint-mint:  #E1ECE6;
  --tint-pink:  #FEE7DF;

  /* the why-card tints are their own set — measurably not the work-card tints */
  --why-mint:   #E8EEE3;
  --why-lav:    #F0E7F3;
  --why-peach:  #FDEBDF;

  --font-display: "Anton", "Arial Narrow", sans-serif;
  --font-heavy:   "Inter", system-ui, Arial, sans-serif;   /* 900 — calibrated against WHAT’S / UP */
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --font-hand:    "Caveat", cursive;

  --r-card: 18px;
  --r-tile: 14px;
  --r-btn:  10px;
  --r-pill: 999px;

  --hu: min(1vw, 1.6vh);   /* hero scale unit, see .hero */
  --wrap: 1240px;
  --pad: clamp(1.25rem, 4vw, 2.5rem);
}

*, *::before, *::after { box-sizing: border-box; }

/* `clip` instead of `hidden`: `hidden` would turn these into scroll containers,
   which kills position: sticky inside them. scroll-padding keeps in-page anchors
   clear of the fixed compact header. */
html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  scroll-padding-top: 80px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-body);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
img { display: block; height: auto; }

h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul { list-style: none; padding: 0; }

a { color: inherit; }

button { font: inherit; color: inherit; cursor: pointer; }

/* --orange-deep, not --orange: SC 1.4.11 wants 3:1 against whatever the ring sits on,
   and --orange is only 2.92:1 on the lavender band, 2.68:1 on --tint-lav and 2.88:1 on
   --tint-peach. --orange-deep clears 3:1 on every surface the ring actually lands on — outline-offset: 3px is load-bearing here, it puts the ring on the page background rather than on a --purple or --orange-deep fill, where it would fail, dark fills
   included (3.33:1 on --ink-btn, 3.30:1 on --bar-ink, 4.90:1 on --paper). */
:focus-visible { outline: 3px solid var(--orange-deep); outline-offset: 3px; border-radius: 2px; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink-btn); color: #fff; padding: 12px 18px; border-radius: 0 0 8px 0;
  font-weight: 600;
}
.skip:focus { left: 0; }

.is-orange { color: var(--orange); }
.is-purple { color: var(--purple); }

/* ---- 0. Recurring ornaments -------------------------------------------- */

/* Sparks — three short orange strokes above a section heading */
.sparks {
  width: 44px; height: 20px; display: block; margin: 0 auto 20px;
  fill: none; stroke: var(--orange); stroke-width: 2.4; stroke-linecap: round;
}
.sparks--purple { stroke: var(--purple); }
/* the comp draws a small orange spark cluster beside the contact hand line */
.sparks--mini {
  width: 22px; height: 10px; display: inline-block; margin: 0 0 0 8px;
  vertical-align: 4px; rotate: 28deg;
}

/* Scribble underline (SVG wobble, not text-decoration) */
.scribble { position: relative; display: inline-block; white-space: nowrap; }
.scribble__line {
  position: absolute; left: 0; bottom: -.22em; width: 100%; height: .34em;
  fill: none; stroke: var(--orange); stroke-width: 2.4; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.scribble--purple .scribble__line { stroke: var(--purple); }

/* Handwritten sub-lines */
.hand {
  font-family: var(--font-hand);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--ink-body);
  line-height: 1.4;
}
.hand--orange { color: var(--orange); }
.hand--purple { color: var(--purple); }

/* Shared circular arrow button */
.circ-btn {
  flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: 50%;
  background: #fff; border: 1px solid var(--ink-eyebrow); color: var(--ink-eyebrow);
  display: grid; place-items: center; font-size: 16px; line-height: 1;
}
/* --orange-deep, not --orange: these arrows are drawn permanently inactive at desktop
   (six logos fit, so there is nothing to scroll), and --orange dimmed to .85 falls to
   2.26:1 — below the 3:1 non-text floor even before the dimming. */
.circ-btn--orange { border-color: var(--orange-deep); color: var(--orange-deep); }

/* Shared inline icon */
.ico { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---- 1. Header / nav ---------------------------------------------------- */

/* Wordmark — logo-wordmark.png is lettering, not type, so it ships as one image */
.wordmark { text-decoration: none; display: inline-block; }
.wordmark__img { width: 100%; }
.wordmark--stack { width: calc(16.73 * var(--hu)); translate: calc(-.75 * var(--hu)) 0; }
.wordmark--row { width: 86px; }

/* Hero variant */
.hdr-hero { background: transparent; }
/* full-bleed in the comp, not container-width. The side padding is asymmetric
   because the ink targets are: left group starts at x=36, right group ends at
   x=1444 (SPEC_MEASURED §8) — 67px of clear space on the right, 36 on the left. */
.hdr-hero__inner {
  /* the two link groups hug the content column rather than the viewport edges, so on
     a wide screen the eye doesn't have to travel from one corner to the other. Same
     centre-anchoring as the hero ornaments; at 1200 these resolve to the reference's
     20px / 48px insets. */
  max-width: none; margin-inline: auto;
  padding-inline: max(1.65vw, calc(50% - 48.3 * var(--hu))) max(3.97vw, calc(50% - 46 * var(--hu)));
  /* 208 not 140: the comp's logo ink sits at y40-168, so a 129px wordmark centred in
     the header needs (208-129)/2 = 40px above it. */
  min-height: calc(13.76 * var(--hu));
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
}
.hdr-hero__group { align-self: start; padding-top: calc(3.7 * var(--hu));
}
.hdr-hero__group {
  display: flex; gap: calc(3.3 * var(--hu)); align-items: center;
}
.hdr-hero__group:last-of-type { justify-content: flex-end; }
/* cap height 15px measured on the comp; Inter's cap ratio is .727 */
.hdr-hero__group a {
  position: relative;
  font-weight: 600; font-size: calc(1.276 * var(--hu)); color: var(--ink-eyebrow); text-decoration: none;
  padding-bottom: calc(0.93 * var(--hu));
}
.hdr-hero__group a::after {
  content: ""; position: absolute; left: 50%; bottom: 0; translate: -50% 0;
  width: 4px; height: 4px; border-radius: 50%; background: var(--orange);
}

/* Compact variant — sticky, revealed on scroll */
.hdr {
  position: fixed; inset: 0 0 auto; z-index: 50;
  background: var(--paper);
  transform: translateY(-100%);
  transition: transform .25s ease, box-shadow .25s ease, visibility .25s;
}
/* visibility, not just transform: keeps the off-screen nav out of the tab order
   and out of the accessibility tree while it is hidden. */
.hdr:not(.is-stuck) { visibility: hidden; }
.hdr.is-stuck { transform: none; }
.hdr.is-shadow { box-shadow: 0 6px 24px rgba(20, 58, 43, .08); }
.hdr__inner {
  max-width: var(--wrap); margin-inline: auto; padding: 14px var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.hdr__nav { display: flex; align-items: center; gap: 30px; }
.hdr__nav a { font-weight: 600; font-size: 15px; text-decoration: none; }

.btn-pill {
  background: var(--orange-deep); color: #fff;
  font-size: 14px; font-weight: 600;
  padding: 11px 22px; border-radius: var(--r-pill);
}

/* ---- 2. HERO ------------------------------------------------------------ */
.hero {
  position: relative; overflow-x: clip;
  min-height: calc(100vh - calc(13.76 * var(--hu)));
  display: grid; align-items: center;
  /* content is centred in the padding box, so a change here moves it by half. */
  padding: calc(1.78 * var(--hu)) 0 calc(5.95 * var(--hu));
}
.hero__inner { text-align: center; position: relative; z-index: 2; padding-right: calc(5.2 * var(--hu)); }

/* calibrated on the single word BRANDING = 107px ink at 14px cap (SPEC_MEASURED §3).
   The word gaps are layout, not tracking — see .dot-sep. */
.hero__eyebrow {
  font-weight: 600; font-size: calc(1.27 * var(--hu)); letter-spacing: .047em; color: var(--ink-eyebrow);
  margin-bottom: calc(2.4 * var(--hu));
}
.dot-sep { color: var(--orange); margin-inline: calc(1.32 * var(--hu)); }

/* Client-directed, deliberately off the comp: the reference measures 94.3px with
   120px line spacing (6.24vw / 1.272). See SPEC_MEASURED §2 for the measurements. */
.hero__title {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  /* 1200x750 reference: cap 64, line pitch 96, line-1 ink 471. Same comp as the 1512
     measurement at 0.794, so the vw-calibrated values land at both widths. */
  font-size: calc(5.94 * var(--hu));
  line-height: 1.336; letter-spacing: .068em;
  color: var(--ink-display);
  margin-bottom: calc(1.78 * var(--hu));
}
.hero__title span { display: block; }
.hero__title span:nth-child(2) { letter-spacing: .041em; }
.hero__title span:nth-child(3) { letter-spacing: .026em; }

.hero__sub {
  font-size: calc(1.53 * var(--hu)); line-height: 1.425; color: var(--ink-body);
  margin-bottom: calc(2.05 * var(--hu));
}

/* align-items:center, not the default stretch: the two comp boxes differ by 1px (71/70) */
.hero__actions { display: flex; align-items: center; gap: calc(2.25 * var(--hu)); justify-content: center; flex-wrap: wrap; }

/* Comp boxes: dark 246×84, ghost 300×83. The heights in SPEC_MEASURED §8 (71/70) were
   measured through a window that cut off at y=890 and clipped the bottom of both fills;
   re-measured against Header.png the dark fill is y809–894 and the ghost y810–892.
   min-width rather than padding alone so the boxes hold even if Inter has not loaded;
   the label still grows the button if it ever outruns the box. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
  font-size: calc(1.46 * var(--hu)); font-weight: 600;
  min-height: calc(5.67 * var(--hu)); padding-inline: calc(2 * var(--hu)); border-radius: var(--r-btn);
}
.btn--ink { min-width: calc(16.73 * var(--hu)); background: var(--ink-btn); color: #fff; border: 1.5px solid var(--ink-btn); }
.btn--ink .scribble__line { stroke: var(--orange); }
.btn--outline { min-width: calc(20.1 * var(--hu)); min-height: calc(5.5 * var(--hu)); background: var(--paper); color: var(--ink-btn); border: 1.5px solid var(--ink-btn); }

/* hero ornaments — natural size, positioned off the comp coordinates */
/* Ornaments are placed off the hero's CENTRE in --hu, not off the viewport edges, so
   they keep the reference's distance from the text on wide screens instead of
   drifting out to the edges. Offsets are the 1200x750 reference positions. */
.hero__monk {
  /* anchored to the hero's TOP, not its bottom: the comp's ink starts at y552 and the
     header is 208px, so 344px down. Bottom-anchoring made the position drift with
     viewport height, which is what put it 16px low. */
  position: absolute; left: calc(50% - 47.9 * var(--hu)); top: calc(23.8 * var(--hu));
  width: calc(21.4 * var(--hu)); z-index: 1; pointer-events: none;
}
/* plane.png carries its own dashed trail — there is no separate SVG trail any more */
.hero__plane {
  position: absolute; right: calc(50% - 49.8 * var(--hu)); top: calc(-.58 * var(--hu)); width: calc(18.3 * var(--hu)); z-index: 1; pointer-events: none;
  aspect-ratio: 274 / 457; overflow: visible;   /* the plane leaves the box on exit */
}
.hero__scroll {
  /* comp ink y633; header is 208px, so 425px down. Top-anchored for the same reason
     as the monk — bottom-anchoring drifted with viewport height. */
  position: absolute; right: calc(50% - 47.6 * var(--hu)); top: calc(28.4 * var(--hu)); z-index: 1;
  width: calc(10.8 * var(--hu)); height: calc(19.4 * var(--hu)); border-radius: 4px; background: transparent;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px;
}
.hero__scroll-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.hero__scroll-rule { width: 1px; height: 34px; background: var(--ink-eyebrow); }
.hero__scroll-word {
  /* vertical-rl with no rotation: the comp reads top-to-bottom, S at the top */
  writing-mode: vertical-rl;
  font-weight: 600; font-size: 12px; letter-spacing: 3px; color: var(--ink-eyebrow);
}
.hero__scroll-arrow { color: var(--ink-eyebrow); font-size: 14px; }

/* ---- Shared section heading -------------------------------------------- */
.section { padding: 88px 0; position: relative; overflow-x: clip; }

/* Per-section padding and heading gap, measured off `rest of the page.png` ×1.75
   (SPEC_MEASURED §9.2). The shared 88px was uniform and the comp is not: the
   lavender band in particular hugs its heading. */
.work    { padding: 104px 0 45px; }
.motion  { padding: 3px 0 8px; }
.why     { padding: 78px 0 8px; }
.clients { padding: 12px 0 36px; }

.sec-head { text-align: center; position: relative; margin-bottom: 44px; }
.work    .sec-head { margin-bottom: 48px; }
.motion  .sec-head { margin-bottom: 31px; }
.why     .sec-head { margin-bottom: 25px; }
.clients .sec-head { margin-bottom: 34px; }
.contact .sec-head { margin-bottom: 7px; }
/* The comp's display face is ~13% heavier than Anton at matched cap height
   (SPEC_MEASURED §2). A hairline stroke closes most of that gap. SPEC_MEASURED says
   never below ~40px, where 1.8px stops reading as weight and starts filling in the
   counters — so each heading carries the stroke only above the viewport width at which
   its own clamp() reaches 40px, solved per rule:
     .hero__title    clamp(2.6rem, 5.94vw, 89.8px)  -> 40px at any width (min is 41.6px),
                     except the <=640 branch's clamp(2.2rem, 11vw, 3rem) below 364px
     .sec-title      clamp(2.2rem, 4.5vw, 68px)     -> 40px at 889px
     .sec-title--sm  clamp(1.7rem, 2.92vw, 44.2px)  -> 40px at 1370px */
.hero__title { -webkit-text-stroke: 1.8px currentColor; }
@media (max-width: 363px)  { .hero__title { -webkit-text-stroke: 0; } }
@media (min-width: 889px)  {
  .sec-title { -webkit-text-stroke: 1.8px currentColor; }
  .sec-title--sm { -webkit-text-stroke: 0; }
}
@media (min-width: 1370px) { .sec-title--sm { -webkit-text-stroke: 1.8px currentColor; } }

/* two measured tiers: 68px for WORK/MOTION, 46px for WHY/CLIENTS/CONTACT */
.sec-title {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(2.2rem, 4.5vw, 68px);
  line-height: 1.05; letter-spacing: .039em; color: var(--ink-display);
  margin-bottom: 14px;
}
.sec-title--sm { font-size: clamp(1.7rem, 2.92vw, 44.2px); letter-spacing: .012em; margin-bottom: 7px; }
/* the comp's monk ink runs y1159-1586 absolute; top:-30px put it at y1066, ~93px high */
/* -150px is measured at the 1512 design width, where it still leaves the drawing on
   canvas. Below ~1330px it does not: the offset is anchored inside the 1240 container,
   so the 206px illustration runs past the viewport edge and `overflow-x: clip` slices
   it in half. The max() floors it at 8px from the viewport's left edge — 50% is half
   the container, 50vw half the viewport, so the difference is the container's own
   gutter. Never positive, so it can never push the row into horizontal scroll. */
/* monk-work.png includes its own dashed trail */

/* ---- 3. WORK: "LOOK WHAT WE MADE." ------------------------------------- */
/* Edge to edge: the track breaks out of the 1240 container so cards run to both
   viewport edges and more of them are visible. The paging row below stays inside
   the container. */
.carousel { position: relative; }
.carousel__track {
  margin-inline: calc(50% - 50vw);
  /* first card sits at the page margin, not the 1240 container's edge — on a wide
     screen that container edge left a ~300px gutter before the first card */
  padding-inline: var(--pad);
  scroll-padding-inline-start: var(--pad);
}


.carousel__track {
  display: flex; gap: 15px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding-bottom: 8px;
  scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }

/* one continuous card: image on top, tint block flush beneath, single outer radius */
/* 330px, not a quarter of the container: the comp's cards are 330 wide with a
   15px gap and the row overflows rather than fitting four across. */
.card {
  flex: 0 0 330px; scroll-snap-align: start;
  container-type: inline-size;
  display: flex; flex-direction: column;
  border-radius: var(--r-tile); overflow: hidden;
}
/* nearly square (332:308 measured), not 4:3 — 4:3 is what made the cards squat */
.card__img { width: 100%; aspect-ratio: 330 / 308; object-fit: cover; }
.card__body {
  padding: 26px 22px 17px;
  flex: 1; display: flex; flex-direction: column; align-items: flex-start;
}
.card__body--lav   { background: var(--tint-lav); }
.card__body--peach { background: var(--tint-peach); }
.card__body--mint  { background: var(--tint-mint); }
.card__body--pink  { background: var(--tint-pink); }

.card__index { font-weight: 600; font-size: 15px; margin-bottom: 10px; }
.card__body--lav   .card__index { color: var(--purple-deep); } /* 5.14:1 on --tint-lav  */
.card__body--peach .card__index { color: var(--orange-idx); }  /* 4.97:1 on --tint-peach */
.card__body--mint  .card__index { color: #1F6B52; }            /* 5.28:1 on --tint-mint */
.card__body--pink  .card__index { color: var(--orange-idx); }  /* 4.74:1 on --tint-pink */

/* condensed display face, not the body sans — calibrated on GLOBAL = 84px ink at 24.5px cap.
   Sized against the card, not the viewport, so the longest title (PRIME PATH COMPANY)
   stays on one line. At 330px wide the longest title (PRIME PATH COMPANY) fits at the
   calibrated 28.5px, so the cqi cap that shrank it to 23.9px is gone. */
.card__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: 28.5px; line-height: 1.1; text-transform: uppercase;
  letter-spacing: .046em; color: var(--ink-display); margin-bottom: 15px;
}
.card__tags { font-size: 15px; color: var(--ink-body); margin-bottom: 10px; }
.card__desc { font-size: 15px; line-height: 1.45; color: var(--ink-body); margin-bottom: 20px; }
.card__body .card__go { margin-top: auto; }
.card__go {
  width: 38px; height: 38px; border-radius: 50%;
  background: #fff; border: 1px solid var(--ink-eyebrow); color: var(--ink-eyebrow);
  display: grid; place-items: center; text-decoration: none;
}

.carousel__nav {
  display: flex; align-items: center; justify-content: center;
  gap: 18px; margin-top: 28px;
}
.carousel__arrow {
  width: 44px; height: 44px; border-radius: 50%;
  background: #fff; border: 0; color: var(--ink-eyebrow);
  display: grid; place-items: center; font-size: 17px;
  box-shadow: 0 6px 20px rgba(20, 58, 43, .18);
  z-index: 3;
}
/* the comp draws both service-row and client-row arrows at full strength even where
   the row fits, so they stay on screen and read as inactive rather than disappearing */
.carousel__arrow:disabled { opacity: .35; cursor: default; }
/* the comp draws the service-row and client-row arrows even where the row fits, so they
   stay on screen and read as inactive. .85 keeps them above the 3:1 non-text floor
   (3.83:1 orange on cream, 8.94:1 ink on the band) rather than relying on the
   disabled-control exemption. */
.circ-btn:disabled { opacity: .85; cursor: default; }
/* …except the work carousel's prev arrow, which the comp does not draw at position 0 */
.carousel__arrow--prev:disabled { visibility: hidden; }

.dots { display: flex; gap: 8px; justify-content: center; }
.dots__dot {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: var(--r-pill);
  background: rgba(20, 58, 43, .18);
  transition: width .2s ease, background .2s ease;
}
.dots__dot.is-active { width: 28px; background: var(--orange); }

/* ---- 4. MOTION: "MAKE IT MOVE." ---------------------------------------- */
.motion {
  background: var(--lav);
  /* square: the torn edge is drawn by .motion__edge, not by a corner radius */
  border-radius: 0;
  padding-bottom: 112px;
  padding-top: calc(88px + .5rem);
}

/* plane-purple.png carries its own dashed trail — no separate SVG trail.
   Comp ink: x 1099-1447, y 1938-2306 absolute; the band starts at y1896, so top:42px
   and right:65px (1512 - 1099 - 348). It sits under the video card, as in the comp. */
.motion__plane {
  position: absolute; right: 65px; top: 42px; width: 348px;
  z-index: 0; pointer-events: none;
}

/* reel-poster.jpg already has the purple play button drawn into it, so the whole
   poster is the link and there is no CSS play button on top of it */
/* poster 1164x352 + a 68px control bar BELOW it, not overlaid — that is the
   420px the comp measures against the build's 342. */
.video {
  position: relative; max-width: 1164px; margin: 0 auto 46px;
  border-radius: 16px; overflow: hidden;
}
.video__link { display: block; }
/* No aspect-ratio and no object-fit: the 1164/352 box was 2.5% taller per unit width
   than reel-poster.jpg's own 1310/386, so `cover` scaled the art up and shaved 15px
   off each side — which is what read as "cropped tighter at the top". Letting the
   poster keep its intrinsic ratio puts it 1:1 with the comp. object-position could
   not have fixed this: the box never overflowed vertically, so it was a no-op.
   The 9px the poster loses is given back on .video's bottom margin (37 -> 46). */
.video__poster { width: 100%; height: auto; }

.video__bar {
  height: 68px;
  background: var(--bar-ink); color: #fff;                /* 17.10:1 */
  display: flex; align-items: center; gap: 18px; padding: 0 22px;
  font-size: 15px;
}
.video__time { white-space: nowrap; }
.video__rail { flex: 1; height: 3px; background: rgba(255, 255, 255, .25); position: relative; }
.video__fill { display: block; width: 34%; height: 100%; background: var(--purple); position: relative; }
.video__knob {
  position: absolute; right: -7px; top: 50%; translate: 0 -50%;
  width: 14px; height: 14px; border-radius: 50%; background: var(--purple);
}
/* the comp's play / volume / gear / fullscreen marks measure ~26px. All four are drawn,
   not typed: the emoji glyphs read at about half that and took the system emoji colour,
   and U+25B6 for play does the same on Windows and Android. */
.video__ico {
  width: 26px; height: 26px; flex: 0 0 auto; opacity: .9;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

/* service row */
/* the comp's service columns are ~215px wide, which needs more than the 1160
   container gives; the row breaks out the same 48px each side as the CTA bar */
/* comp: arrows at x73 and x1465, so the row spans 1392px, not the 1256 that -48px gave.
   Restoring the arrows cost the columns 124px of width and pushed the row 24px taller;
   the comp's own width gives it back. Same width-aware break-out as the why grid. */
.svcrow {
  display: flex; align-items: flex-start; gap: 18px; margin-bottom: 44px;
  margin-inline: max(-116px, min(0px, calc((100vw - 120px - 100%) / -2)));
}
/* auto-columns with a floor: six equal columns while they fit, a real horizontal
   scroller (and live arrows) once they don't */
.svcrow__list {
  flex: 1; min-width: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr);
  overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth;
  scrollbar-width: none;
}
.svcrow__list::-webkit-scrollbar { display: none; }
/* the comp's rules are ~1.5px of #B2B4BC on the #F6F1F5 band = the ink at .28 alpha;
   .12 was so faint the review read them as missing */
.svcrow__list li {
  padding: 0 14px; border-left: 1.5px solid rgba(20, 58, 43, .28);
  scroll-snap-align: start;
}
.svcrow__list li:first-child { border-left: 0; }
.svcrow__num { font-weight: 600; font-size: 15px; color: var(--purple-deep); margin-bottom: 15px; }
/* calibrated on EXPLAINER = 77px ink at 15.75px cap */
.svcrow__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: 20.5px; line-height: 1.15; text-transform: uppercase;
  letter-spacing: .048em; color: var(--ink-display); margin-bottom: 10px;
}
.svcrow__desc { font-size: 14px; line-height: 1.72; color: var(--ink-body); }

/* CTA bar */
/* 1255x112 in the comp — wider than the 1160 container, so it breaks out by 48px
   each side. Its interior samples the same colour as the band, so the visible box
   is the border and shadow, not a white fill. */
.ctabar {
  background: transparent; border: 1.5px solid rgba(103, 91, 203, .16);
  box-shadow: 0 10px 28px rgba(103, 91, 203, .07);
  border-radius: 30px; padding: 12px 26px; min-height: 112px;
  /* 48px is the break-out at 1512, where the container's gutter is wider than that.
     From 1255px down it is not: --pad caps at 40px, so a flat -48px made the bar
     8px wider than the viewport and sliced its rounded corners flat against both
     edges. Same width-aware form as .svcrow and .why__grid — it only ever pulls
     outwards, and never past 40px of viewport gutter. */
  margin-inline: max(-48px, calc(40px - 50vw + 50%));
  display: flex; align-items: center; gap: 22px;
}
.ctabar__badge {
  flex: 0 0 auto; width: 85px; height: 85px; border-radius: 50%;
  background: rgba(103, 91, 203, .12); display: grid; place-items: center;
}
.ctabar__badge svg { width: 40px; height: 40px; fill: none; stroke: var(--purple-deep); stroke-width: 1.8; stroke-linejoin: round; }  /* 4.60:1 on the wash */
.ctabar__lead { font-weight: 700; font-size: 24px; color: var(--ink-display); }
.ctabar .hand { font-size: 1.7rem; }
.ctabar__doodle {
  flex: 1; min-width: 40px; height: 46px;
  fill: none; stroke: var(--purple); stroke-width: 1.5;
  stroke-dasharray: 5 6; opacity: .55;
}
.btn-purple {
  flex: 0 0 auto;
  background: var(--purple); color: #fff; text-decoration: none;   /* 5.34:1 */
  font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 1px;
  min-width: 259px; min-height: 46px; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center;
}

/* ---- 5. TESTIMONIALS: "NICE THINGS PEOPLE SAID." ----------------------- */
.testimonials {
  padding: 78px 0 92px;
  background:
    radial-gradient(circle at 16% 66%, rgba(247, 90, 36, .035), transparent 31%),
    var(--paper);
}
.testimonials__head {
  position: relative; min-height: 142px; margin-bottom: 24px;
  display: grid; place-items: start center;
}
.testimonials__heading { position: relative; z-index: 1; text-align: center; }
.testimonials__heading .sparks { margin-bottom: 17px; }
.testimonials__heading .hand { font-size: clamp(22px, 2vw, 30px); }

/* The client supplied this illustration inside the full section comp. Keeping the
   original pixels and cropping with overflow preserves the exact drawing. */
.testimonials__thanks {
  position: absolute; z-index: 0; right: -18px; top: -32px;
  width: 290px; height: 190px; overflow: hidden; pointer-events: none;
}
.testimonials__thanks img {
  position: absolute; width: 1410px; max-width: none; height: auto;
  left: -1088px; top: -22px; mix-blend-mode: multiply;
}

.testimonials__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px;
  margin-inline: max(-75px, min(0px, calc((100vw - 70px - 100%) / -2)));
}
.testimonial {
  position: relative; min-height: 328px; margin: 0; padding: 35px 38px 26px;
  border: 1px solid rgba(24, 76, 37, .055); border-radius: 10px;
  box-shadow: 0 13px 24px rgba(54, 66, 62, .10);
  display: flex; flex-direction: column;
}
.testimonial--office { background: #FFF9EF; transform: rotate(-1.8deg); }
.testimonial--kg     { background: #FFFDF9; transform: rotate(.35deg); }
.testimonial--mint   { background: #F5F8ED; transform: rotate(-.8deg); }
.testimonial__tape {
  position: absolute; z-index: 2; left: 50%; top: -21px; translate: -50% 0;
  width: 94px; height: 45px; rotate: -5deg;
  background: rgba(225, 211, 190, .55);
  clip-path: polygon(3% 7%, 97% 0, 94% 91%, 0 100%);
}
.testimonial blockquote { display: block; }
.testimonial__quote {
  display: block; height: 45px;
  font-family: Georgia, serif; font-size: 72px; font-weight: 700;
  line-height: .92; color: var(--orange); overflow: hidden;
}
.testimonial blockquote p {
  max-width: 390px; font-size: clamp(16px, 1.35vw, 21px); line-height: 1.42;
  color: var(--ink-body);
}
.testimonial__footer {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 18px;
  margin-top: auto; padding-top: 22px;
}
.testimonial__person { display: flex; flex-direction: column; min-width: 0; }
.testimonial__person::before {
  content: ""; display: block; width: 58px; height: 4px; border-radius: 50%;
  margin-bottom: 20px; background: var(--orange); rotate: -5deg;
}
.testimonial__person strong {
  font-size: clamp(15px, 1.15vw, 18px); color: var(--ink-display); line-height: 1.2;
}
.testimonial__person small {
  margin-top: 3px; font-size: clamp(12px, .93vw, 14px); line-height: 1.3;
  color: var(--ink-body);
}
.testimonial__logo {
  flex: 0 0 auto; width: 126px; height: 60px; object-fit: contain;
  object-position: right bottom;
}
.testimonial__logo--kg { width: 112px; }
.testimonial__mint-logo {
  position: relative; flex: 0 0 auto; padding-right: 2px;
  font-family: Arial, sans-serif; font-weight: 800; font-size: 39px;
  line-height: 1; letter-spacing: -3px; color: #454645;
}
.testimonial__mint-logo span { position: relative; }
.testimonial__mint-logo span::before {
  content: ""; position: absolute; left: 5px; top: -10px;
  width: 13px; height: 8px; border-radius: 100% 0 100% 0;
  background: #36A15E; rotate: -28deg;
}

/* ---- 6. WHY: "WHY SCRIBBLEMONK?" --------------------------------------- */
/* the comp's card row runs x50-1464 = 1415px, not the 1160 the container gives.
   Same break-out as the CTA bar and service row, but width-aware instead of a fixed
   -48px: it only ever pulls outwards, never past 49px of viewport gutter, so no
   width can push it into horizontal scroll. --wrap is untouched (the hero needs it). */
.why__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin-inline: max(-127px, min(0px, calc((100vw - 98px - 100%) / -2)));
}

/* Designer layout: copy at the top, transparent scene art anchored to the bottom. */
.whycard {
  border-radius: var(--r-card); padding: 28px 28px 0; min-height: 500px;
  display: flex; flex-direction: column; overflow: hidden;
}
.whycard__text { position: relative; z-index: 1; }
.whycard--mint  { background: var(--why-mint); }
.whycard--lav   { background: var(--why-lav); }
.whycard--peach { background: var(--why-peach); }

.whycard__badge {
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 800; font-size: 18px; margin-bottom: 18px;
}
.whycard__badge--ink    { background: var(--ink-btn); color: #fff; }
.whycard__badge--purple { background: rgba(103, 91, 203, .12); color: var(--purple-deep); }  /* 4.61:1 on the wash */
.whycard__badge--orange { background: var(--orange-deep); color: #fff; }

/* calibrated on SMALL = 84px ink at 28px cap */
.whycard__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(24px, 2vw, 30.5px); text-transform: uppercase; letter-spacing: .028em;
  line-height: 1.15; color: var(--ink-display); margin-bottom: 16px;
}
.whycard p { font-size: 15px; line-height: 1.5; color: var(--ink-body); margin-bottom: 10px; }
.whycard__art {
  display: block; width: 100%; height: 278px; margin-top: auto;
  object-fit: contain; object-position: 50% 100%; pointer-events: none;
}
.whycard--lav .whycard__art { width: 104%; margin-left: -2%; }
.whycard--peach .whycard__art { width: 110%; height: 274px; margin-left: -5%; }

@media (min-width: 981px) {
  .whycard__title { white-space: nowrap; }
}

/* ---- 7. CLIENTS: "GOOD PEOPLE. GOOD PROJECTS." ------------------------- */
.logorow {
  position: relative; width: 100%; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.logorow__track {
  display: flex; width: max-content;
  animation: clientMarquee 42s linear infinite;
}
.logorow__list {
  flex: 0 0 auto; display: flex; align-items: center; gap: 34px;
  padding-right: 34px;
}
.logo {
  flex: 0 0 184px; width: 184px; height: 104px;
  display: grid; place-items: center; padding: 6px 8px;
  overflow: visible; border: 0; border-radius: 0;
  background: transparent; box-shadow: none;
}
.logo img {
  display: block; width: 100%; height: 92px;
  max-width: 100%;
  object-fit: contain; object-position: 50% 50%;
  align-self: center; justify-self: center;
  transform-origin: center center;
}

.logorow:hover .logorow__track,
.logorow:focus-within .logorow__track { animation-play-state: paused; }

@keyframes clientMarquee {
  to { transform: translateX(-50%); }
}

/* ---- 7. CONTACT: "GOT A “WHAT IF?”" ------------------------------------ */
.contact {
  position: relative; overflow: hidden;
  background: var(--paper-deep);
  padding: clamp(72px, 6vw, 112px) 0;
}
.contact__layout {
  width: min(100%, 1120px); margin-inline: auto; padding-inline: var(--pad);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
  align-items: center; gap: clamp(50px, 6vw, 92px);
}
.contact__main {
  width: 100%; max-width: 620px; display: grid; justify-items: center;
  gap: clamp(36px, 3vw, 52px);
}
.contact__head { text-align: center; }
.contact__head .sparks { margin-bottom: clamp(15px, 1.35vw, 28px); }
.contact__head .sec-title { font-size: clamp(34px, 3.15vw, 64px); margin-bottom: 0; }
.contact__head .contact__thought {
  display: table; width: auto; aspect-ratio: auto;
  margin: clamp(28px, 2.4vw, 42px) auto 0;
}
.contact__copy { text-align: center; }
.contact__copy p { font-size: clamp(15px, 1.22vw, 25px); line-height: 1.72; color: var(--ink-body); }
.contact__copy .hand {
  margin-top: clamp(18px, 1.5vw, 30px);
  font-family: var(--font-hand); font-size: clamp(24px, 1.65vw, 34px); line-height: 1.2;
  color: var(--orange-deep);
}

/* info card */
.infocard {
  width: 100%; margin: 0;
  background: var(--why-peach); border: 1px solid rgba(247, 90, 36, .25);
  border-radius: 26px; padding: clamp(28px, 2.2vw, 40px);
  text-align: center;
}
.infocard__title {
  font-weight: 700; font-size: clamp(18px, 1.45vw, 30px); color: var(--ink-display);
  margin-bottom: clamp(20px, 1.2vw, 25px);
}
.infocard__list li {
  display: flex; align-items: center; justify-content: center; gap: clamp(12px, 1.2vw, 24px);
  font-size: clamp(14px, 1.1vw, 23px); margin-bottom: clamp(12px, .8vw, 16px);
  white-space: nowrap;
}
/* --orange is only 2.81:1 on the peach fill — below the 3:1 non-text floor. */
.infocard__list .ico {
  width: clamp(20px, 1.55vw, 32px); height: clamp(20px, 1.55vw, 32px);
  flex: 0 0 auto; color: var(--orange-deep);
}  /* 4.47:1 */
.infocard__list a { color: var(--ink-body); text-decoration: none; }
.infocard__list a:hover { text-decoration: underline; }
.infocard__rule {
  border: 0; border-top: 1px solid rgba(20, 58, 43, .12);
  margin: clamp(18px, 1.05vw, 22px) 0 clamp(16px, .9vw, 19px);
}

.social { display: flex; gap: clamp(22px, 1.8vw, 37px); align-items: center; justify-content: center; }
.social svg {
  width: clamp(22px, 1.55vw, 32px); height: clamp(22px, 1.55vw, 32px); color: var(--ink-eyebrow);
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.social__off { color: var(--ink-eyebrow); opacity: .55; display: block; }

/* ---- 8. FOOTER ---------------------------------------------------------- */
.foot { background: var(--paper-deep); }
.foot__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding-block: 2px 6px; font-size: 13px; color: var(--ink-body);
}
.foot__hand { color: var(--ink-eyebrow); }
/* the comp sets only "Make it move" in orange, with the orange scribble under it */
.foot__move { color: var(--orange-deep); }   /* 4.89:1 on --paper-deep */
.foot__legal { display: flex; gap: 28px; }
.foot__legal a { text-decoration: none; }
.foot__legal a:hover { text-decoration: underline; }
.analytics-settings {
  border: 0; padding: 0; background: transparent; color: inherit;
  font: inherit; cursor: pointer;
}
.analytics-settings:hover { text-decoration: underline; }

.analytics-consent {
  position: fixed; z-index: 1000; left: max(18px, env(safe-area-inset-left));
  right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom));
  width: min(760px, calc(100% - 36px)); margin-inline: auto;
  padding: 18px 20px; border: 1px solid rgba(24, 76, 37, .16);
  border-radius: 16px; background: #fffdf8;
  box-shadow: 0 16px 50px rgba(5, 31, 26, .18);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.analytics-consent[hidden] { display: none; }
.analytics-consent__copy strong { display: block; color: var(--ink-display); font-size: 17px; }
.analytics-consent__copy p { margin-top: 4px; max-width: 510px; font-size: 13px; line-height: 1.5; }
.analytics-consent__copy a { color: var(--orange-deep); }
.analytics-consent__actions { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.analytics-consent__actions button {
  min-height: 40px; padding: 8px 14px; border: 1px solid var(--ink-btn);
  border-radius: var(--r-pill); background: transparent; color: var(--ink-btn);
  font-size: 13px; font-weight: 700;
}
.analytics-consent__actions .analytics-consent__accept { background: var(--ink-btn); color: #fff; }

/* ---- 9. about.html — "WHAT'S UP." -------------------------------------- */
/* privacy/terms/404 have no hero, so the fixed compact header needs its height cleared */
.aboutpage { padding-top: 73px; }

/* The reference is a generous editorial bento: a two-column upper row followed by
   one full-width audience panel. This section deliberately gets a wider wrap than
   the rest of the site so the service labels and audience copy stay relaxed. */
.about { padding: 22px 0 30px; }
.about .wrap { max-width: 1440px; }

.about__eyebrow {
  position: relative; display: table; margin: 0 auto 10px;
  font-weight: 800; font-size: 15px; letter-spacing: 2.4px; color: var(--orange-deep);
  text-align: center;
}
.about__eyebrow-sparks {
  position: absolute; right: -31px; top: -11px; width: 27px; height: 27px;
  fill: none; stroke: var(--orange); stroke-width: 2.4; stroke-linecap: round;
}

.about__title {
  font-family: var(--font-heavy); font-weight: 900;
  font-size: clamp(38px, min(6.89vw, 104.19px, 8.9vh), 104.19px);
  text-transform: uppercase; letter-spacing: -.044em; word-spacing: .155em; line-height: 1;
  color: var(--ink-display); text-align: center;
  margin: 10px 0 18px;
}

.bento { display: grid; gap: 18px; margin-bottom: 14px; }
.bento--r1 { grid-template-columns: minmax(0, .88fr) minmax(0, 1fr); }
.bento__stack { display: grid; grid-template-rows: 184px 1fr; gap: 14px; }

.bcard {
  background: rgba(255, 253, 248, .9); border: 1px solid rgba(20, 58, 43, .04);
  border-radius: 24px; padding: 28px;
  box-shadow: 0 13px 30px rgba(46, 42, 34, .11);
}
.bcard--do { padding: 14px 20px 16px; box-shadow: 0 10px 24px rgba(46, 42, 34, .08); }
.bcard--big { min-height: 414px; padding: 22px 32px 16px; display: flex; flex-direction: column; }

/* traced from the comp — a round "66", which no loaded face gives us */
.bcard__quote { width: 42px; height: auto; display: block; margin-bottom: 5px; }
.bcard__head {
  font-weight: 800; font-size: clamp(1.55rem, 2.1vw, 1.95rem); line-height: 1.15;
  color: var(--ink-display); margin-bottom: 16px;
}
.bcard__head-accent { color: var(--orange); }
/* The comp underlines only the first word, not the whole phrase, and the stroke
   starts a little left of it. */
/* both accents use the site's hand-drawn scribble stroke rather than a straight bar */
.bcard__head .scribble__line { bottom: -.16em; height: .28em; }
.bcard--big p .scribble__line { stroke: var(--orange); bottom: -.1em; height: .3em; }
.bcard--big p { font-size: 15px; line-height: 1.5; color: var(--ink-eyebrow); margin-bottom: 11px; }

/* small green underline swoosh */
.swoosh { position: relative; display: inline-block; }
.swoosh svg {
  position: absolute; left: 0; bottom: -.2em; width: 100%; height: .3em;
  fill: none; stroke: #1F6B52; stroke-width: 2.2; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.bcard__rule { border: 0; border-top: 1px solid rgba(20, 58, 43, .14); margin: auto 0 9px; }
.bcard__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-weight: 800; font-size: 11px; letter-spacing: .6px; color: var(--ink-eyebrow);
  flex-wrap: wrap;
}
.bcard__foot p { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 11px; color: var(--ink-eyebrow); }
.bcard__brand {
  width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center;
  background: var(--ink-btn); color: #fff; font-size: 10px; font-weight: 800;
}
.bcard__dot, .bcard__live {
  display: inline-block; border-radius: 50%; vertical-align: middle;
}
.bcard__dot { width: 10px; height: 10px; background: var(--orange); }
.bcard__live { width: 10px; height: 10px; background: #1F6B52; }

/* B. stats */
.stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  background: linear-gradient(135deg, #073329, var(--ink-btn));
  border-radius: 24px; padding: 17px 22px 16px;
  box-shadow: 0 12px 26px rgba(5, 31, 26, .2);
}
.stats__row {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  padding: 0 18px; border-left: 1px solid rgba(255, 255, 255, .22); text-align: center;
}
.stats__row:first-child { border-left: 0; }
.stats__icon {
  width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(38, 105, 82, .28); color: #fff;
}
.stats__icon svg {
  width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
/* Client asked for these lighter and smaller than the comp's 54.2px/900. */
.stats__fig {
  /* tabular figures: the count-up changes digit widths every frame otherwise */
  font-variant-numeric: tabular-nums;
  font-family: var(--font-heavy); font-weight: 700;
  font-size: clamp(30px, 2.6vw, 38px);
  line-height: 1; letter-spacing: -.04em; color: #fff;
}
/* A star at the digits' size reads far larger than they do — the glyph fills its em
   box where a numeral only fills its cap height. Scaled to match optically. */
.stats__star { font-size: .58em; vertical-align: .16em; letter-spacing: 0; margin-left: .16em; }
.stats__plus { font-size: .82em; margin-left: .1em; }
.stats__lab {
  font-weight: 500; font-size: 12px; letter-spacing: 0;
  color: rgba(255, 255, 255, .9); text-align: center;
}

/* C / E. labels + chips */
.blabel {
  position: relative; display: table;
  font-weight: 800; font-size: 20px; letter-spacing: 0; color: var(--ink-eyebrow);
  margin-bottom: 17px;
}
.blabel--light { color: #fff; }
/* the same hand-drawn stroke the rest of the page uses, not a straight bar */
.blabel__u {
  position: absolute; left: 0; bottom: -9px; width: 46px; height: 7px;
  fill: none; stroke: var(--orange); stroke-width: 2.4; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.chips { display: grid; gap: 7px 9px; }
.chips--3 { grid-template-columns: repeat(3, 1fr); }
.chips--wrap { grid-template-columns: repeat(2, 1fr); }
/* sized so every label stays on one line at desktop */
.chip {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  background: rgba(254, 248, 238, .74); border: 1px solid rgba(20, 58, 43, .12);
  border-radius: 13px; padding: 7px 10px;
  font-weight: 500; font-size: 12px; color: var(--ink-eyebrow);
  white-space: nowrap;
}
.chip .ico {
  width: 32px; height: 32px; flex: 0 0 auto; padding: 7px; border-radius: 50%;
  background: #F8EBD9; color: var(--ink-btn); stroke-width: 1.8;
}
.badge {
  flex: 0 0 auto; width: 18px; height: 18px; border-radius: 4px;
  display: grid; place-items: center;
  font-size: 9px; font-weight: 700; color: #fff;
}
.badge--ae { background: var(--purple); }
.badge--ai { background: var(--orange); }

/* D. who we work with */
.who {
  min-height: 238px; background: linear-gradient(135deg, #06392E, var(--ink-btn));
  border-radius: 24px; padding: 18px 34px 20px;
  box-shadow: 0 13px 28px rgba(5, 31, 26, .22);
}
.who__head { display: flex; align-items: baseline; gap: 48px; margin-bottom: 10px; }
.who__head .blabel { flex: 0 0 auto; margin-bottom: 0; font-size: 21px; }
.who__head > p { color: rgba(255, 255, 255, .9); font-size: 14px; }
.who__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.who__row {
  display: grid; grid-template-columns: 146px minmax(0, 1fr); align-items: center; gap: 14px;
  min-width: 0; padding: 0 20px; border-left: 1px solid rgba(255, 255, 255, .24);
}
.who__row:first-child { border-left: 0; padding-left: 0; }
.who__row:last-child { padding-right: 0; }
.who__ico { width: 136px; max-height: 152px; object-fit: contain; justify-self: center; }
.who__title {
  font-weight: 800; font-size: 18px; text-transform: uppercase; line-height: 1.2;
  color: var(--orange-lite); margin-bottom: 8px;
}
.who__desc { font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, .92); }
.who__desc strong { color: #fff; font-weight: 800; }

/* E. currently working on */
.bcard--now { display: flex; flex-direction: column; padding: 14px 18px; }
.now__project { font-weight: 800; font-size: 16px; color: var(--ink-display); margin-bottom: 10px; }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 48px; margin-top: auto; }
.bars i { width: 4px; border-radius: 2px; background: var(--orange); }

/* F. client love */
.bcard--love { padding: 16px 22px; display: flex; flex-direction: column; }
.love__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.love__marks { display: flex; align-items: center; gap: 10px; }
.love__stars { color: var(--orange); font-size: 15px; letter-spacing: 2px; }
.love__label { font-weight: 800; font-size: 12px; letter-spacing: 1.5px; color: var(--ink-eyebrow); }
.love__quote-text p { font-weight: 500; font-size: 15px; line-height: 1.5; color: var(--ink-body); }
.love__author { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 12px; }
.love__avatar {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
  background: var(--ink-btn); color: #fff; font-weight: 700; font-size: 15px;
  display: grid; place-items: center;
}
.love__name { font-weight: 700; font-size: 15px; color: var(--ink-eyebrow); }
.love__role { font-size: 14px; color: var(--ink-body); }

/* ---- 10. Responsive ----------------------------------------------------- */

/* the arrows sit on the vertical centre of the image tile. Above 980px the cards
   are a fixed 330px, so the tile is a fixed 306px tall and the arrows do not move. */

/* the 163px rail runs into the 579px button row below ~1024px, so it drops out
   before it can collide rather than being narrowed away from the comp size */
/* below this the centred MAKE IT MOVE. heading runs into the plane's nose */
/* below the container width the centre anchor would push the monk off-canvas */
@media (max-width: 1365px) {
  .hero__monk { right: auto; left: 22px; }
  .motion__plane { display: none; }
}

@media (max-width: 1023px) {
  .hero__scroll { display: none; }
  /* at full size the plane crowds the eyebrow once the layout narrows */
  .hero__plane { width: 170px; }
}

/* The three contact columns stop fitting well before 980: at 1024 the inputs are 91px
   and the placeholders truncate to "Your nan". Stack them while they are still legible. */

/* Short viewports — the hero was calibrated against the comp's 950px-tall frame, and
   at that height it is exact. Most laptops are 700-850, where the 208px header plus
   120px line spacing pushed the buttons ~100px below the fold and cut the monk in
   half. Everything here only bites under 920px tall, so the calibrated case is
   untouched. Values are proportional, not a second design. */


@media (max-width: 980px) {
  /* the desktop rhythm is measured against the comp's 1512 layout; below that the
     sections need real breathing room again */
  .work, .motion, .testimonials, .why, .clients { padding: 60px 0; }
  .work .sec-head, .motion .sec-head, .why .sec-head,
  .clients .sec-head, .contact .sec-head { margin-bottom: 32px; }
  .contact { padding: 60px 0; }
  .contact__layout { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 42px; }
  .infocard { width: min(100%, 590px); }
  .ctabar { margin-inline: 0; min-height: 0; padding: 20px 26px; }
  .whycard { min-height: 0; }
  /* `aspect-ratio: auto` used to live here. It overrode the ratio the UA derives from
     the poster's own width/height attributes, so the lazy-loaded image reserved no box
     at all — its height measured 0 until the bytes arrived, and the whole page below
     it jumped on load. Nothing replaces it: without the override the attributes'
     1310/386 applies, which is the file's real ratio. */

  /* --hu (the hero's scale unit) is ~4px at phone widths, which shrank the eyebrow,
     sub-copy, nav and buttons to 5-6px type. Below 980 the hero uses fixed sizes. */
  .hdr-hero__inner { min-height: 110px; gap: 12px; padding-inline: 20px; }
  .hdr-hero__group { gap: 22px; padding-top: 0; align-self: center; }
  .hdr-hero__group a { font-size: 15px; padding-bottom: 12px; }
  .wordmark--stack { width: 190px; translate: none; }
  .hero__inner { padding-right: 0; }
  .hero__eyebrow { font-size: 13px; margin-bottom: 22px; }
  .dot-sep { margin-inline: 12px; }
  .hero__title { margin-bottom: 18px; }
  .hero__sub { font-size: 17px; margin-bottom: 26px; }
  .hero__actions { gap: 14px; }
  .btn { font-size: 16px; min-height: 52px; padding-inline: 22px; }
  .btn--ink { min-width: 200px; }
  .btn--outline { min-width: 220px; min-height: 52px; }
  .hdr__nav { gap: 18px; font-size: 14px; }

  .hero { min-height: calc(100vh - 110px); }   /* header is 110px from here down */
  /* narrowed so it stays clear of the 579px centred button row. `bottom: 6px` used to
     be here too and never did anything — the base rule's `top: 344px` wins for an
     auto-height absolute box, so the declaration was inert. */
  .hero__monk { width: 160px; }

  /* work carousel keeps scroll-snap with ~78vw cards */
  .card { flex: 0 0 78vw; }

  /* motion service row becomes a 2-column grid — everything fits, so the
     arrows have nothing left to do and are removed rather than left inert */
  .svcrow { margin-inline: 0; }
  .svcrow > .circ-btn, .logorow > .circ-btn { display: none; }
  .svcrow__list {
    grid-auto-flow: row; grid-template-columns: repeat(2, 1fr);
    gap: 20px 0; overflow-x: visible;
  }
  .svcrow__list li:nth-child(odd) { border-left: 0; }
  .ctabar { flex-wrap: wrap; }
  .ctabar__doodle { display: none; }

  .testimonials__head { margin-bottom: 34px; }
  .testimonials__thanks { right: -44px; scale: .82; transform-origin: right top; }
  .testimonials__grid {
    grid-template-columns: 1fr; gap: 24px; width: min(100%, 700px);
    margin-inline: auto;
  }
  .testimonial { min-height: 300px; padding: 34px 38px 28px; transform: none; }
  .testimonial blockquote p { font-size: 19px; }

  .why__grid { grid-template-columns: 1fr; }
  .whycard { min-height: 520px; }
  .whycard__title { font-size: 30.5px; }
  .whycard__art { width: min(100%, 620px); height: 330px; margin-inline: auto; }
  .whycard--lav .whycard__art { width: min(104%, 640px); margin-inline: auto; }
  .whycard--peach .whycard__art { width: min(110%, 660px); height: 320px; margin-inline: auto; }

  .logorow__list {
    grid-auto-flow: row; grid-template-columns: repeat(3, 1fr);
    gap: 26px 18px; overflow-x: visible;
  }

  /* bento collapses to one column */
  .bento--r1 { grid-template-columns: 1fr; }
  .bento__stack { grid-template-rows: auto auto; }
  .bcard--big { min-height: 0; }
  .stats { min-height: 184px; }
  .who { min-height: 0; }
  .who__head { align-items: flex-start; flex-direction: column; gap: 16px; }
  .who__grid { grid-template-columns: 1fr; }
  .who__row {
    grid-template-columns: 146px minmax(0, 1fr); min-height: 164px;
    padding: 16px 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .24);
  }
  .who__row:first-child { border-top: 0; padding-top: 0; }
  .who__row:last-child { padding-bottom: 0; }

  .foot__inner { flex-direction: column; text-align: center; }
}

@media (max-width: 640px) {
  .section, .work, .motion, .testimonials, .why, .clients { padding: 60px 0; }
  .about { padding: 40px 0 56px; }
  .motion { border-radius: 28px; }

  .hero { min-height: auto; padding: 20px 0 60px; }
  .hero__title { font-size: clamp(2.2rem, 11vw, 3rem); }
  .hero__sub { font-size: 16px; }
  .hero__sub br { display: none; }
  /* hero side ornaments hidden below 640px */
  .hero__monk, .hero__plane { display: none; }

  .hdr-hero__inner { grid-template-columns: 1fr; justify-items: center; gap: 14px; padding-block: 18px; }
  .hdr-hero__group:last-of-type { justify-content: center; }
  .hdr__nav { flex-wrap: wrap; justify-content: flex-end; gap: 8px 14px; font-size: 14px; }
  .hdr__nav a { font-size: 14px; }
  .btn-pill { padding: 9px 16px; font-size: 13px; }
  .logorow__list { grid-template-columns: repeat(2, 1fr); }

  .btn { width: 100%; text-align: center; }
  .card { flex: 0 0 84vw; }

  .testimonials__head { min-height: 0; }
  .testimonials__thanks { display: none; }
  .testimonials__heading .hand { font-size: 22px; }
  .testimonial { min-height: 0; padding: 28px 24px 24px; }
  .testimonial blockquote p { font-size: 16px; }
  .testimonial__footer { align-items: center; }
  .testimonial__logo { width: 104px; height: 54px; }
  .testimonial__logo--kg { width: 94px; }
  .testimonial__mint-logo { font-size: 32px; }
  
  .whycard { min-height: 470px; padding: 22px 20px 0; }
  .whycard__title { font-size: clamp(25px, 7.5vw, 30px); white-space: normal; }
  .whycard p { font-size: 14px; }
  .whycard__art,
  .whycard--lav .whycard__art,
  .whycard--peach .whycard__art {
    display: block; width: 108%; height: 250px; max-width: none;
    margin-left: -4%; margin-right: -4%;
  }

  .svcrow__list { grid-template-columns: 1fr; }
  .svcrow__list li { border-left: 0; padding: 0; }
  .bcard--big { padding: 22px; }
  .stats { grid-template-columns: 1fr; padding: 18px 26px; }
  .stats__row { padding: 20px 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .22); }
  .stats__row:first-child { border-top: 0; }
  .chips--3, .chips--wrap { grid-template-columns: 1fr 1fr; }
  .chip { font-size: 12px; white-space: normal; }
  .who { padding: 24px; }
  .who__row { grid-template-columns: 126px minmax(0, 1fr); gap: 14px; }
  .who__ico { width: 118px; max-height: 132px; }
  .who__title { font-size: 16px; }
  .who__desc { font-size: 15px; }
  .foot__legal { gap: 18px; }
  .analytics-consent { align-items: stretch; flex-direction: column; gap: 14px; padding: 17px; }
  .analytics-consent__actions { width: 100%; }
  .analytics-consent__actions button { flex: 1; }
}

@media (max-width: 760px) {
  .contact__layout { width: 100%; padding-inline: 20px; }
  .contact__main { gap: 34px; }
  .contact__head .sec-title { font-size: clamp(36px, 10vw, 52px); }
  .contact__head .contact__thought { margin-top: 30px; }
  .contact__copy p { font-size: 16px; }
  .contact__copy p:first-child br { display: none; }
  .contact__copy .hand { font-size: 27px; }
  .infocard {
    width: 100%; max-width: 470px; padding: 28px 20px;
  }
  .infocard__title { font-size: 21px; }
  .infocard__list li { font-size: 15px; white-space: normal; }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .carousel__track, .svcrow__list, .logorow__list { scroll-behavior: auto; }
  .logorow { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .logorow__track { animation: none; }
  .logorow__list[aria-hidden="true"] { display: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* ---- Legal pages (privacy.html, terms.html) ----------------------------- */
.legal { max-width: 720px; padding-block: 40px 88px; }
.legal__draft {
  background: var(--why-peach); border-radius: var(--r-btn);
  padding: 14px 18px; margin-bottom: 32px;
  font-size: 15px; color: var(--ink-body); line-height: 1.55;
}
.legal__title {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(2rem, 4vw, 3rem); line-height: 1.05; letter-spacing: .03em;
  color: var(--ink-display); margin-bottom: 8px;
}
.legal__meta { font-size: 14px; color: var(--ink-body); opacity: .8; margin-bottom: 36px; }
.legal h2 {
  font-family: var(--font-body); font-weight: 800; font-size: 19px;
  color: var(--ink-display); margin: 32px 0 10px; letter-spacing: .01em;
}
.legal p { font-size: 16px; line-height: 1.65; color: var(--ink-body); margin-bottom: 12px; }
.legal a { color: var(--orange-deep); }

/* ---- FAQ --------------------------------------------------------------- */
.faq {
  max-width: 980px;
  padding-block: 58px 96px;
}
.faq__head {
  max-width: 760px;
  margin: 0 auto 46px;
  text-align: center;
}
.faq__eyebrow {
  margin-bottom: 12px;
  color: var(--orange-deep);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.faq__title {
  color: var(--ink-display);
  font-family: var(--font-display);
  font-size: clamp(2.7rem, 6.2vw, 5.2rem);
  font-weight: 400;
  letter-spacing: .025em;
  line-height: 1.02;
}
.faq__title span { color: var(--orange-deep); }
.faq__intro {
  max-width: 620px;
  margin: 22px auto 0;
  color: var(--ink-body);
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.6;
}
.faq__list {
  border-top: 1px solid rgba(24, 76, 37, .18);
}
.faq__item {
  border-bottom: 1px solid rgba(24, 76, 37, .18);
}
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 25px 4px;
  color: var(--ink-display);
  cursor: pointer;
  font-size: clamp(18px, 2vw, 23px);
  font-weight: 800;
  line-height: 1.35;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary span {
  position: relative;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border: 1px solid var(--orange-deep);
  border-radius: 50%;
}
.faq__item summary span::before,
.faq__item summary span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 2px;
  background: var(--orange-deep);
  translate: -50% -50%;
}
.faq__item summary span::after { rotate: 90deg; }
.faq__item[open] summary span::after { rotate: 0deg; }
.faq__item p {
  max-width: 800px;
  padding: 0 60px 27px 4px;
  color: var(--ink-body);
  font-size: 17px;
  line-height: 1.75;
}
.faq__item a { color: var(--orange-deep); }
.faq__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-top: 56px;
  padding: 30px 34px;
  border-radius: var(--r-card);
  background: var(--why-mint);
}
.faq__cta-kicker {
  margin-bottom: 5px;
  color: var(--orange-deep);
  font-family: var(--font-hand);
  font-size: 24px;
  font-weight: 600;
}
.faq__cta h2 {
  color: var(--ink-display);
  font-size: clamp(21px, 2.6vw, 30px);
  line-height: 1.2;
}
.faq__cta .btn { flex: 0 0 auto; }

@media (max-width: 640px) {
  .faq { padding-block: 40px 68px; }
  .faq__head { margin-bottom: 34px; }
  .faq__title { font-size: clamp(2.45rem, 12vw, 3.7rem); }
  .faq__item summary { padding-block: 21px; }
  .faq__item p { padding-right: 4px; font-size: 16px; }
  .faq__cta { align-items: flex-start; flex-direction: column; padding: 26px 22px; }
}


/* ---- Motion band edges -------------------------------------------------- */
/* The comp's lavender band has a soft torn edge top and bottom, not a straight
   line with rounded corners. Both paths are traced from the comp; they are filled
   with --paper, so they carve the page ground back over the band's square edge. */
.motion { position: relative; }
.motion__edge {
  position: absolute; left: -1px; right: -1px; width: calc(100% + 2px);
  fill: var(--paper); display: block; pointer-events: none; z-index: 1;
}
.motion__edge--top { top: -1px; height: 41px; }
.motion__edge--bot { bottom: -1px; height: 78px; z-index: 1; }
.motion > .wrap { position: relative; z-index: 3; }

/* The right stack is explicitly sized above so its two cards finish level with the
   quote card; keep stretch behaviour without changing the stats card's grid. */
.bento__stack { align-content: stretch; }


/* ---- Comp corrections (client review) ----------------------------------- */
.love__quote { width: 26px; height: auto; display: block; }
.ctabar__badge img { width: 60%; height: auto; }
/* the comp's button is a full pill, with three small sparks off its top-right */
.btn-purple { border-radius: var(--r-pill); }
.ctabar__sparks {
  flex: 0 0 auto; width: 22px; height: 20px; align-self: flex-start; margin-top: 4px;
  fill: none; stroke: var(--purple); stroke-width: 1.8; stroke-linecap: round;
}
/* WHY / CLIENTS / CONTACT headings read too heavy — the stroke is what did it,
   and SPEC_MEASURED §2 says never apply it under ~40px anyway. */
.sec-title--sm { -webkit-text-stroke: 0; }


/* ---- Motion: stats bars + statement reveal ------------------------------ */

/* the four orange bars read as a level meter rather than a static chart */
@keyframes barPulse {
  0%, 100% { transform: scaleY(.55); }
  50%      { transform: scaleY(1); }
}
.bars i {
  transform-origin: bottom center;
  animation: barPulse 1s ease-in-out infinite;
}
.bars i:nth-child(1) { animation-duration: .8s;  animation-delay: -.15s; }
.bars i:nth-child(2) { animation-duration: 1.05s; animation-delay: -.5s; }
.bars i:nth-child(3) { animation-duration: .9s;  animation-delay: -.25s; }
.bars i:nth-child(4) { animation-duration: 1.15s; animation-delay: -.65s; }
.bars i:nth-child(5) { animation-duration: .95s;  animation-delay: -.4s; }

/* statement reveal, on the client's own timing */
@keyframes cstmtRv {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.stagger.is-armed .bcard__head { opacity: 0; }
.stagger.in .bcard__head {
  animation: cstmtRv .6s cubic-bezier(.2, .75, .3, 1) .4s both;
}
/* the hidden state is armed by JS, so no-JS and observer-never-fires both end up
   visible rather than blank; print always shows it */
.stagger.is-shown .bcard__head { opacity: 1; }
@media print { .stagger.is-armed .bcard__head { opacity: 1; animation: none; } }

@media (prefers-reduced-motion: reduce) {
  .bars i { animation: none; transform: none; }
  .stagger.is-armed .bcard__head { opacity: 1; }
  .stagger.in .bcard__head { animation: none; }
}


/* The purple plane was a slice off the low-resolution page comp and never looked
   sharp at any size. Redrawn as vector in the flatter style the client supplied. */
.motion__plane-body path {
  stroke: var(--purple); stroke-width: 3.2;
  stroke-linejoin: round; stroke-linecap: round; fill: none;
}
.motion__plane-trail {
  stroke: var(--purple); stroke-width: 3; fill: none;
  stroke-linecap: round; stroke-dasharray: 9 11;
}






/* ---- Per-letter headings (MAKE IT MOVE, WHAT'S UP) — see app.js ------------
   Spans are built at runtime, so with JavaScript off (or reduced motion) the
   headings render as plain text. Typography is untouched: the letter spans are
   inline-block with no spacing of their own. */
[data-wave] .word { display: inline-block; white-space: nowrap; }
[data-wave] .ltr {
  display: inline-block; will-change: transform;
  /* `translate`/`rotate`, not `transform`: a reveal rule resets transform on
     .sec-title descendants and was silently eating the lift */
  translate: 0 var(--lift, 0px);
  rotate: var(--tilt, 0deg);
  transition: translate .26s cubic-bezier(.2, .8, .2, 1), rotate .26s cubic-bezier(.2, .8, .2, 1);
}
/* springy overshoot on the way back, as on the reference */
[data-wave].is-springing .ltr {
  transition: translate .55s cubic-bezier(.34, 1.56, .64, 1), rotate .55s cubic-bezier(.34, 1.56, .64, 1);
}

/* entrance: faint -> orange flash with a lift -> ink, 22ms apart per letter */
@keyframes cwave {
  0%   { color: rgba(24, 76, 37, .18); translate: 0 0; }
  40%  { color: var(--orange); translate: 0 -3px; }
  100% { color: var(--ink-display); translate: 0 0; }
}
[data-wave-enter].is-pending .ltr { color: rgba(24, 76, 37, .18); }
[data-wave-enter].is-entering .ltr {
  animation: cwave 1s ease both;
  animation-delay: calc(var(--i) * .022s);
}
/* the orange full stop keeps its own colour at rest */
[data-wave-enter].is-entering .ltr.is-orange { animation-name: cwave-orange; }
@keyframes cwave-orange {
  0%   { color: rgba(247, 90, 36, .18); translate: 0 0; }
  40%  { color: var(--ink-display); translate: 0 -3px; }
  100% { color: var(--orange); translate: 0 0; }
}
/* while a letter is entering its hover lift is suspended, so the two never fight;
   app.js swaps .is-entering for .is-entered once the last letter has landed, which
   hands the translate back to the hover wave */
[data-wave-enter].is-entering .ltr { translate: none; }
[data-wave-enter].is-entered .ltr { color: var(--ink-display); }
[data-wave-enter].is-entered .ltr.is-orange { color: var(--orange); }

/* the eyebrow's hand-drawn line is drawn in like a pen stroke */
.about__eyebrow-line .hw-ink { stroke-dasharray: 1; stroke-dashoffset: 1; }
.about__eyebrow.writing .hw-ink { animation: hwdraw 1.1s cubic-bezier(.5, 0, .5, 1) .15s forwards; }
@keyframes hwdraw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  [data-wave] .ltr { transition: none; translate: none; rotate: none; }
  [data-wave-enter].is-pending .ltr, [data-wave-enter].is-entering .ltr { color: inherit; animation: none; }
  .about__eyebrow-line .hw-ink { stroke-dashoffset: 0; }
}


/* ---- Hero monk: breeze animation -------------------------------------------
   Nine raster layers of the same 326x322 canvas, absolutely stacked, so the still
   frame is the original artwork exactly. Pivots are in canvas percentages:
   neck (135,130) -> 41.4% 40.4%; hand grip (80,215) -> 24.5% 66.8%;
   basket rim (50,165) -> 15.3% 51.2%; flower stem base (228,298) -> 70% 92.5%;
   mouth (163,97) -> 50% 30%. Durations are all different and non-harmonic so
   nothing ever moves in step. Everything is transform-only (compositor). */
.monk { aspect-ratio: 326 / 322; }           /* reserves the box: no layout shift */
.monk__l { position: absolute; inset: 0; width: 100%; height: auto; display: block; }
div.monk__l { height: 100%; }
.monk__figure { transform-origin: 50% 92%; animation: mkBreathe 4.6s ease-in-out infinite; }
.monk__head   { transform-origin: 41.4% 40.4%; animation: mkHead 6.2s ease-in-out -1.3s infinite; }
.monk__mouse  { transform-origin: 58.3% 30.4%; animation: mkMouse 7s ease-in-out -2s infinite; }
.monk__basket { transform-origin: 24.5% 66.8%; animation: mkBasket 3.6s ease-in-out -.8s infinite; }
/* two stick groups, each pivoting where it meets the rim: left (40,172) -> 12.3% 53.4%,
   right (62,166) -> 19% 51.6% */
.monk__veg--l { transform-origin: 12.3% 53.4%; animation: mkVeg 3.4s ease-in-out -.6s infinite; }
.monk__veg--r { transform-origin: 19% 51.6%;   animation: mkVeg 2.9s ease-in-out -2.1s infinite; }
.monk__flower { transform-origin: 70% 92.5%;   animation: mkFlower 4.2s ease-in-out -1.1s infinite; }
.monk__ground { animation: mkGround 6.5s ease-in-out -3s infinite; }

/* breathing as a scale from the feet, not a translate: the feet stay planted on the
   ground line and the chest rises ~1.8px at the top. */
@keyframes mkBreathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.006); } }
@keyframes mkHead    { 0%, 100% { rotate: -0.9deg; } 50% { rotate: 0.9deg; } }
/* the leaf at the mouth: still for most of the cycle, one small flick near the end */
@keyframes mkMouse   { 0%, 82%, 100% { rotate: 0deg; } 86% { rotate: 3deg; } 91% { rotate: -2deg; } 96% { rotate: 1deg; } }
@keyframes mkBasket  { 0%, 100% { rotate: -0.7deg; } 50% { rotate: 0.7deg; } }
@keyframes mkVeg     { 0%, 100% { rotate: -1.1deg; } 50% { rotate: 1.1deg; } }
@keyframes mkFlower  { 0%, 100% { rotate: -1.4deg; } 50% { rotate: 1.4deg; } }
@keyframes mkGround  { 0%, 100% { translate: -0.5px 0; } 50% { translate: 0.5px 0; } }

@media (prefers-reduced-motion: reduce) {
  .monk__figure, .monk__head, .monk__mouse, .monk__basket, .monk__veg, .monk__flower, .monk__ground { animation: none; }
}

/* ---- Custom cursors: WHAT'S UP (orange ball), MAKE IT MOVE (purple square) ----
   Built by app.js and only for fine pointers that can hover; the same gate here
   means touch devices never get a stray fixed element or cursor: none.
   Position/scale are set per frame in JS via transform, so only opacity transitions. */
@media (hover: hover) and (pointer: fine) {
  .cursor {
    position: fixed; left: 0; top: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px;
    pointer-events: none; z-index: 60;
    opacity: 0; transition: opacity 180ms ease;
    will-change: transform;
  }
  .cursor.is-on { opacity: 1; }
  .cursor-ball {
    border-radius: 50%; background: var(--orange);
    box-shadow: 0 0 0 1px var(--orange-lite), 0 2px 6px rgba(0, 0, 0, .18);
  }
  /* the square is the heading's own full stop: same purple, same sharp corners */
  .cursor-square {
    width: 12px; height: 12px; margin: -6px 0 0 -6px;
    border-radius: 2px; background: var(--purple);
    box-shadow: 0 0 0 1px rgba(103, 91, 203, .45), 0 2px 6px rgba(0, 0, 0, .18);
  }
  /* native cursor goes away only while the custom one is showing */
  [data-wave].has-cursor { cursor: none; }
}


/* ---- Butterfly on the hero monk's flower ------------------------------------
   Same hand-drawn orange line as the monk, in the monk's 326x322 space (the layer
   is scaled to the rendered monk by app.js). ONE flight in from the top right,
   lands on the flower head, beats its wings three times and is still. Nothing
   animates at rest: a continuous wing-beat measured 8-12% of a CPU core on its
   own, however it was built. */
.bfly-layer {
  position: absolute; left: 0; top: 0; width: 326px; height: 322px;
  transform-origin: 0 0; pointer-events: none; display: none;
}
.bfly-layer.is-ready { display: block; }
/* with scripting off nothing scales the layer, but the resting butterfly is still
   better shown than missing; it sits at its landing point at 1:1 */
@media (scripting: none) { .bfly-layer { display: block; } }
.bfly {
  position: absolute; left: 0; top: 0; width: 0; height: 0; perspective: 40px;
  offset-path: path("M350 38 C300 14 196 60 168 150 C148 212 186 263 232 263 C262 263 300 236 362 196");
  offset-rotate: auto;
  offset-distance: 72.4%;
  animation: bflyFly 4.3s cubic-bezier(.3, .1, .3, 1) 1.2s both;
}
.bfly svg { position: absolute; overflow: visible; fill: none; stroke: var(--orange); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.bfly__hatch { stroke-width: 1; opacity: .7; }
.bfly__wing { position: absolute; top: -9px; width: 14px; height: 18px; will-change: transform; backface-visibility: visible; }
.bfly__wing svg { left: 0; top: 0; width: 14px; height: 18px; }
.bfly__wing--l { left: -14px; transform-origin: 100% 50%; }
.bfly__wing--r { left: 0;     transform-origin: 0 50%; }
/* after landing: three slow beats, then still. No animation runs at rest. */
.bfly__wing { animation: bflyWingFly .62s ease-in-out 1.2s 7, bflyWingRest 3.1s ease-in-out 5.6s 3; }
.bfly__body { left: -3px; top: -8px; width: 6px; height: 12px; }
@keyframes bflyFly {
  0%   { offset-distance: 0%;    opacity: 0; }
  8%   { opacity: 1; }
  100% { offset-distance: 72.4%; opacity: 1; }
}
/* the wings fold in 3D about the body — how a wing actually moves */
@keyframes bflyWingFly  { 0%, 100% { transform: rotateY(0deg); } 50% { transform: rotateY(78deg); } }
@keyframes bflyWingRest { 0%, 100% { transform: rotateY(0deg); } 50% { transform: rotateY(44deg); } }
@media (prefers-reduced-motion: reduce) {
  /* sits on the flower, still */
  .bfly { animation: none; offset-distance: 72.4%; }
  .bfly__wing { animation: none; }
}


/* ---- Paper plane: flies its trail once, then stays ----------------------------
   A single 7s flight on page load. The plane comes in from the bottom right,
   climbs the trail (the dashes are revealed behind it by a mask keyed to the same
   easing), banks through the loop, and settles into its drawn position pointing
   up-right — which is the original artwork. One continuous ease-out over the whole
   path, so it decelerates into the landing like a glider; no in-flight jitter.
   After landing it only drifts very slightly, as if held up by the breeze. */
.plane__line  { stroke: var(--orange); stroke-width: 3.4; stroke-linejoin: round; stroke-linecap: round; }
.plane__hatch { stroke: var(--orange); stroke-width: 1.3; stroke-linecap: round; opacity: .85; }
.plane__dashes { stroke: var(--orange); stroke-width: 2.8; stroke-linecap: round; stroke-dasharray: 9 7; }

.plane__craft {
  offset-path: path("M302 421C292 420 283 418 274 416C255 412 230 405 205 390C165 365 134 330 128 298C124 272 130 255 145 245C170 228 207 238 205 258C200 285 150 290 125 277C90 255 60 240 48 215C38 190 44 150 52 130C62 104 118 52 172 2C196 -21 218 -48 240 -84");
  offset-rotate: auto;
  offset-distance: 68.98%;
  animation: planeFly 7s cubic-bezier(.25, .1, .25, 1) .4s both;
}
/* the plane is drawn with its nose up-right (-46deg); this aligns the nose to +x so
   offset-rotate points it along the trail */
.plane__art  { transform-box: view-box; transform-origin: 0 0; rotate: 46deg; }
/* bank through the loop, then ease into the art's resting heading (22deg off the
   trail's end tangent) during the final approach */
.plane__bank { transform-box: view-box; transform-origin: 0 0; rotate: 22deg; animation: planeBank 7s ease-in-out .4s both; }
.plane__reveal { stroke-dasharray: 1; stroke-dashoffset: 0; animation: planeReveal 7s cubic-bezier(.25, .1, .25, 1) .4s both; }

@keyframes planeFly {
  0%   { offset-distance: 0%;     opacity: 0; }
  4%   { opacity: 1; }
  100% { offset-distance: 68.98%; opacity: 1; }
}
@keyframes planeReveal { 0% { stroke-dashoffset: 1.04; } 100% { stroke-dashoffset: 0; } }
@keyframes planeBank {
  0%, 26% { rotate: 0deg; }
  40%     { rotate: -8deg; }
  56%     { rotate: -5deg; }
  72%     { rotate: 0deg; }
  100%    { rotate: 22deg; }
}
@media (prefers-reduced-motion: reduce) {
  /* the still artwork: trail fully drawn, plane at rest */
  .plane__craft, .plane__bank, .plane__reveal { animation: none; }
  .plane__craft { opacity: 1; }
}


/* ---- "sketchbook": handwritten reveal (see app.js) ---------------------------
   Hidden states are gated on .sk-armed, which only JS adds: with JavaScript off the
   line renders fully, underline and all. Timeline after entering the viewport:
   0-.5s line fades in; .42-1.3s letters write; 1.35-1.95s underline draws with
   overshoot, settles by 2.2s; 1.9-2.75s doodles pop in and stay. */
.sketch { position: relative; display: inline-block; white-space: nowrap; }
.sk { display: inline-block; }
/* the underline starts a touch before the s and runs past the k */
.sketch__line { left: -3%; width: 109%; bottom: -.24em; height: .4em; }
.sketch__line path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.sketch__doodle {
  position: absolute; width: 12px; height: 12px; fill: none; stroke: var(--orange);
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; pointer-events: none;
}
.sketch__doodle--a { left: -14px; top: -10px; }
.sketch__doodle--b { right: -22px; top: -14px; width: 18px; height: 12px; }
.sketch__doodle--c { right: -18px; bottom: -2px; width: 11px; height: 8px; }

/* armed (JS on, not yet in view): everything waits */
.sk-armed { opacity: 0; translate: 0 6px; transition: opacity .5s ease, translate .5s ease; }
.sk-armed .sk { clip-path: inset(0 100% 0 0); }
/* the full stop is written last, after the word */
.sk--stop { display: inline-block; }
.sk-armed .sketch__line path { stroke-dashoffset: 1; }

.sk-armed.is-writing { opacity: 1; translate: 0 0; }
.sk-armed.is-writing .sk { animation: skWrite .16s ease-out var(--d) forwards; }
.sk-armed.is-writing .sketch__line path { animation: skLine .85s cubic-bezier(.5, 0, .4, 1) 1.35s forwards; }
.sk-armed.is-writing .sketch__doodle { animation: skPop .55s ease both; }
.sk-armed.is-writing .sketch__doodle--a { animation-delay: 1.9s; }
.sk-armed.is-writing .sketch__doodle--b { animation-delay: 2.05s; }
.sk-armed.is-writing .sketch__doodle--c { animation-delay: 2.2s; }

@keyframes skWrite { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 -6% 0 0); } }
/* draw to the full path (it ends past the k), then settle back a hair */
@keyframes skLine { 0% { stroke-dashoffset: 1; } 72% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: .035; } }
/* the doodles pop in and stay — they are part of the sketchbook now */
@keyframes skPop {
  0%   { opacity: 0; scale: .6; rotate: -8deg; }
  45%  { opacity: 1; scale: 1.12; rotate: 2deg; }
  100% { opacity: 1; scale: 1; rotate: 0deg; }
}
/* between loops: the word, line and doodles fade out together, then rewrite */
.sk-armed.is-erasing .sk, .sk-armed.is-erasing .sketch__line, .sk-armed.is-erasing .sketch__doodle {
  transition: opacity .4s ease; opacity: 0;
}
/* hover, only once the entrance has settled: the underline gives a little wiggle */
.is-done .sketch:hover .sketch__line { animation: skWiggle .5s ease; }
@keyframes skWiggle {
  0%, 100% { translate: 0 0; scale: 1 1; }
  30%  { translate: 2px -1px; scale: 1.03 1; }
  65%  { translate: -1px 1px; scale: 1.04 1; }
}
@media (prefers-reduced-motion: reduce) {
  .sk-armed, .sk-armed .sk, .sk-armed .sketch__line path { opacity: 1; translate: none; clip-path: none; stroke-dashoffset: 0; animation: none; }
  .sketch__doodle { opacity: 1; animation: none; }
}


/* ---- CTA bar: plane flies the dashed path (see app.js) -----------------------
   The overlay is only ever created by JS; without it the badge's raster plane and
   the fully-visible dashes are the design, untouched. */
.ctaplane {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; overflow: visible; z-index: 2;
}
.ctaplane__line  { fill: none; stroke: var(--purple-deep); stroke-width: 3.2; stroke-linejoin: round; stroke-linecap: round; }
.ctaplane__hatch { fill: none; stroke: var(--purple-deep); stroke-width: 1.4; stroke-linecap: round; opacity: .8; }
/* before take-off the SVG plane sits hidden under the badge's raster; it fades in as
   the raster fades down to a ghost, so the same object appears to lift off */
.ctaplane__craft { opacity: 0; transition: opacity .45s ease; }
.is-flying .ctaplane__craft, .is-landed .ctaplane__craft { opacity: 1; }
.ctabar__badge img { transition: opacity .6s ease, translate .6s ease; }
.is-flying .ctabar__badge img, .is-landed .ctabar__badge img { opacity: .28; translate: 0 -3px; }
/* the hand-drawn nudge that the plane is really flying: tiny, and only in flight */
.is-flying .ctaplane__nudge { animation: ctaFlutter .9s ease-in-out infinite; }
@keyframes ctaFlutter { 0%, 100% { translate: 0 0; } 50% { translate: 0 -1.2px; } }
/* no idle float: the craft sits on a motion path, and any transform animation on it
   runs on the main thread every frame. It rests still; the hover nudge still works. */

/* hover on START A PROJECT: the plane notices, the arrow leads, the line wiggles */
.btn-purple { transition: scale .3s ease, background-color .25s ease; }
.btn-purple__arrow { display: inline-block; margin-left: .35em; transition: translate .3s cubic-bezier(.2, .8, .2, 1); }
.btn-purple:hover { scale: 1.015; }
.btn-purple:hover .btn-purple__arrow { translate: 4px 0; }
.is-landed .ctaplane__nudge { transition: translate .4s cubic-bezier(.2, .8, .2, 1); }
.is-landed.is-hot .ctaplane__nudge { translate: 7px -2px; }
.is-hot .scribble--purple .scribble__line { animation: skWiggle .5s ease; }

@media (prefers-reduced-motion: reduce) {
  .ctaplane { display: none; }
  .ctabar__badge img { opacity: 1 !important; translate: none !important; }
  .ctabar__doodle path { mask: none !important; }
  .btn-purple:hover { scale: 1; }
}


/* ---- "See our work": colour-magnetic (see app.js) ---------------------------
   No movement, no scale: only the fill shifts toward green as the cursor nears. */
@media (hover: hover) and (pointer: fine) {
  .hero .btn--ink { transition: background-color .2s ease, border-color .2s ease; }
}


/* ---- 6b. CLOSING — "so... what are we making?" --------------------------------
   Large statement, a tiny handwritten aside, a plane flying its own trail, and a
   conversational ask. Same cream, same orange line, same Anton/Caveat pairing as
   the rest of the page — nothing new is introduced, only recombined. */
.closing { padding: 110px 0 120px; overflow: hidden; }
.closing__wrap { position: relative; text-align: center; min-height: 520px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.closing__sky {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: min(100%, 1000px); height: 100%; pointer-events: none; overflow: visible;
}
.closing__trail { fill: none; stroke: var(--orange); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 9 7; opacity: .8; }
.closing__reveal { stroke-dasharray: 1; stroke-dashoffset: 1; }
.closing__line  { fill: none; stroke: var(--orange); stroke-width: 3.2; stroke-linejoin: round; stroke-linecap: round; }
.closing__hatch { fill: none; stroke: var(--orange); stroke-width: 1.3; stroke-linecap: round; opacity: .85; }
.closing__craft { opacity: 0; }

.closing__hand { font-size: 1.7rem; margin-bottom: 10px; position: relative; z-index: 2; }
.closing__hand .sk { display: inline-block; }
.closing__title {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(2.6rem, 6.2vw, 92px); line-height: 1.02; letter-spacing: .02em;
  color: var(--ink-display); position: relative; z-index: 2; margin-bottom: 26px;
}
.closing__title span { display: block; }
.closing__note {
  position: relative; z-index: 2; display: inline-block; padding: 11px 22px 12px;
  font-family: var(--font-hand); font-size: 1.35rem; font-weight: 600; color: var(--ink-display);
  rotate: -2.5deg; margin-bottom: 22px;
}
.closing__note-frame {
  position: absolute; inset: 0; width: 100%; height: 100%;
  fill: var(--card); stroke: var(--orange); stroke-width: 1.6; stroke-linejoin: round;
  filter: drop-shadow(0 6px 14px rgba(20, 58, 43, .08));
}
.closing__note-text { position: relative; display: inline-block; clip-path: inset(0 0 0 0); }
.closing__sub { font-size: 17px; color: var(--ink-body); margin-bottom: 30px; position: relative; z-index: 2; }
.closing__actions { display: flex; align-items: center; gap: 26px; justify-content: center; flex-wrap: wrap; position: relative; z-index: 2; }
.closing__cta { font-size: 17px; min-height: 58px; padding-inline: 26px; min-width: 0; transition: scale .3s ease; }
.closing__arrow { display: inline-block; margin-left: .4em; transition: translate .3s cubic-bezier(.2, .8, .2, 1); }
.closing__cta:hover { scale: 1.02; }
.closing__cta:hover .closing__arrow { translate: 4px 0; }
.closing__alt { font-family: var(--font-hand); font-size: 1.35rem; font-weight: 600; color: var(--ink-body); text-decoration: none; }
.closing__alt:hover .scribble__line { animation: skWiggle .5s ease; }

/* entrance, once, when the section enters the viewport (classes from app.js):
   hand line writes -> headline rises -> note pops with a crooked settle -> plane flies */
.closing.is-armed .closing__hand .sk { clip-path: inset(0 100% 0 0); }
.closing.is-armed .closing__title span, .closing.is-armed .closing__sub, .closing.is-armed .closing__actions { opacity: 0; translate: 0 14px; }
.closing.is-armed .closing__note { opacity: 0; scale: .9; rotate: -7deg; }
.closing.is-in .closing__hand .sk { animation: skWrite .14s ease-out var(--d) forwards; }
.closing.is-in .closing__title span, .closing.is-in .closing__sub, .closing.is-in .closing__actions {
  opacity: 1; translate: 0 0; transition: opacity .55s cubic-bezier(.2, .8, .2, 1), translate .55s cubic-bezier(.2, .8, .2, 1);
}
.closing.is-in .closing__l1 { transition-delay: .55s; }
.closing.is-in .closing__l2 { transition-delay: .64s; }
.closing.is-in .closing__sub { transition-delay: .95s; }
.closing.is-in .closing__actions { transition-delay: 1.05s; }
.closing.is-in .closing__note { animation: noteIn .6s cubic-bezier(.2, .9, .3, 1.15) 1.05s both; }
.contact__thought.is-armed { opacity: 0; scale: .9; rotate: -7deg; }
.contact__thought.is-in { animation: noteIn .6s cubic-bezier(.2, .9, .3, 1.15) .2s both; }
@keyframes noteIn {
  0%   { opacity: 0; scale: .9; rotate: -7deg; }
  70%  { opacity: 1; scale: 1.02; rotate: -1.5deg; }
  100% { opacity: 1; scale: 1; rotate: -2.5deg; }
}
.closing.is-flying .closing__craft, .closing.is-landed .closing__craft { opacity: 1; transition: opacity .3s ease; }
/* the landed plane rests still (see the CTA bar note on idle floats); the note's message changes */
.closing.is-landed .closing__nudge { transition: translate .4s cubic-bezier(.2, .8, .2, 1); }
.closing.is-landed.is-hot .closing__nudge { translate: 0 -6px; }
.closing__note-text { transition: clip-path .28s ease-in, opacity .28s ease-in; }
.closing__note.is-swapping .closing__note-text { clip-path: inset(0 0 0 100%); opacity: 0; }

@media (max-width: 980px) {
  .closing { padding: 80px 0 90px; }
  .closing__wrap { min-height: 0; }
  .closing__sky { display: none; }   /* the flight needs the width; on narrow screens the words carry it */
  /* if the viewport later grows past 980 the sky reappears already landed (app.js) */
}
@media (prefers-reduced-motion: reduce) {
  .closing.is-armed .closing__hand .sk, .closing.is-armed .closing__title span, .closing.is-armed .closing__sub,
  .closing.is-armed .closing__actions, .closing.is-armed .closing__note { opacity: 1; translate: none; clip-path: none; scale: 1; animation: none; }
  .closing__craft { opacity: 1; }
  .closing__reveal { stroke-dashoffset: 0; }
  .contact__thought.is-armed { opacity: 1; scale: 1; rotate: -2.5deg; animation: none; }
}

/* ---- Work: the SEE ALL card --------------------------------------------- */
/* the arrow row stays level because the cards are equal-height flex siblings and
   .card__body already flexes with margin-top:auto on the arrow (rules near the top) */
.card--all { background: var(--tint-peach); }
.card__all {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: 14px; height: 100%; padding: 30px; text-decoration: none;
}
.card__all-title {
  font-family: var(--font-display); font-size: 40px; line-height: 1.04;
  letter-spacing: .03em; color: var(--ink-display);
}
.card__all-arrow {
  width: 52px; height: 52px; border-radius: 50%;
  border: 1.5px solid var(--ink-eyebrow); color: var(--ink-eyebrow);
  display: grid; place-items: center; font-size: 22px;
  transition: translate .2s, background-color .2s, color .2s, border-color .2s;
}
.card__all:hover .card__all-arrow { translate: 6px 0; background: var(--orange-deep); border-color: var(--orange-deep); color: #fff; }
.card__all-sub { font-size: 1.15rem; color: var(--orange-deep); }
/* the link fills the card and the card clips (overflow: hidden), so the site's
   outside ring would be invisible here; draw it just inside instead */
.card__all:focus-visible { outline-offset: -3px; }