/* Shared stylesheet for both website variants (see WEBSITE_VARIANTS.md). Brand-specific rules live in css/brand.css.
   Headline font: Bogart from Adobe Fonts (family name "bogart"); each site's index.html links its own Adobe web project.
   Headings ask for weight 700 (Bold): until Bold is added to the web project, browsers show the heavier Extrabold that is in it.
   If Adobe's font can't load, a locally installed Bogart Bold is tried, then Fraunces (open licence) as the closest stand-in. */
@font-face { font-family: "Display Title"; font-style: normal; font-weight: 700; font-display: swap; src: local("Bogart Bold"), local("Bogart-Bold"); }

/* ==========================================================================
   Homepage styles
   Palette after Frank's Tache deck: blue, pink and yellow with warm peach and pale-pink neutrals.
   Same palette and fonts as V1. Adds movement: a cutting-mat hero with
   draggable samples, scroll-linked details and small animations.
   Everything calms down for visitors who ask for reduced motion.
   ========================================================================== */

:root {
  --paper: #FAF8F3;
  --paper-2: #F1EDE4;   /* V4 value: contact box, founders' experience box, photo placeholders */
  --ink: #1A1814;
  --ink-2: #5A544B;
  --rule: #DAD4C8;
  --yolk: #FEC704;
  --pink: #EE79A3;
  --blue: #81B0DF;
  --peach: #FAE1CD;
  --pale-pink: #F9D4D6;
  --warm: #FCEDE2;
  --blush: #EE79A3;
  --bottle: #81B0DF;
  --help-bg: #FAE1CD;
  --peach-rule: #EFCFB5;
  --stripe-a: #F9D4D6;   /* the pink and cream stripes keep these colours in dark mode too (Frank, 4 Oct). Mustard was tried on 12 Oct and rejected. */
  --stripe-b: #FCEDE2;
  --band-bg: #1A1814;
  --band-ink: #F6F2EA;
  --band-accent: #FEC704;
  --btn-bg: #1A1814;
  --btn-ink: #FAF8F3;
  --note-bg: #FFF0B3;
  --note-ink: #4A3B00;
  --focus: #1A1814;
  --error: #A3261B;
  --field-bg: #FFFFFF;
  --dot-grow: #81B0DF;
  --mat-line: rgba(26, 24, 20, 0.045);
  --mat-major: rgba(26, 24, 20, 0.085);
  --mat-tick: rgba(26, 24, 20, 0.32);
  --obj-shadow: rgba(26, 24, 20, 0.14);

  --f-display: "Besley", Georgia, "Times New Roman", serif;
  --f-title: "bogart", "Display Title", "Fraunces", Georgia, "Times New Roman", serif;
  --f-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --t-xs: 0.8125rem;
  --t-sm: 0.9375rem;
  --t-base: 1.0625rem;
  --t-lg: 1.25rem;
  --t-xl: clamp(1.5rem, 1.25rem + 0.9vw, 1.875rem);
  --t-2xl: clamp(1.9rem, 1.4rem + 2vw, 3rem);
  --t-3xl: clamp(2.75rem, 1.7rem + 4vw, 5rem);

  --gutter: clamp(16px, 4vw, 48px);
  --max: 1240px;
  --section: clamp(56px, 7.5vw, 104px);
  --header-h: 76px;
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #14130F;
    --paper-2: #1E1C17;
    --ink: #F2EDE3;
    --ink-2: #B3AB9E;
    --rule: #37332C;
    --band-bg: #26231E;
    --mat-line: rgba(242, 237, 227, 0.045);
    --mat-major: rgba(242, 237, 227, 0.085);
    --mat-tick: rgba(242, 237, 227, 0.3);
    --obj-shadow: rgba(0, 0, 0, 0.5);
    --btn-bg: #F2EDE3;
    --btn-ink: #14130F;
    --note-bg: #3B3108;
    --note-ink: #FFE58A;
    --focus: #FEC704;
    --help-bg: #241C16;
    --peach-rule: #3D3027;
    --error: #FF8A7A;
    --field-bg: #1A1814;
    --dot-grow: #81B0DF;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #14130F;
  --paper-2: #1E1C17;
  --ink: #F2EDE3;
  --ink-2: #B3AB9E;
  --rule: #37332C;
  --band-bg: #26231E;
  --mat-line: rgba(242, 237, 227, 0.045);
  --mat-major: rgba(242, 237, 227, 0.085);
  --mat-tick: rgba(242, 237, 227, 0.3);
  --obj-shadow: rgba(0, 0, 0, 0.5);
  --btn-bg: #F2EDE3;
  --btn-ink: #14130F;
  --note-bg: #3B3108;
  --note-ink: #FFE58A;
  --focus: #FEC704;
  --help-bg: #241C16;
  --peach-rule: #3D3027;
  --error: #FF8A7A;
  --field-bg: #1A1814;
  --dot-grow: #81B0DF;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--f-title); font-weight: 700; font-variation-settings: "SOFT" 100, "WONK" 0; line-height: 1.06; letter-spacing: -0.01em; text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 60; background: var(--btn-bg); color: var(--btn-ink); padding: 10px 16px; border-radius: 999px; text-decoration: none; font-weight: 600; }
.skip-link:focus { top: 12px; }

:root .eyebrow {
  font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.09em; color: var(--ink-2);
}

/* ---------- Buttons & links ---------- */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 48px; padding: 0 1.4em; border: 0; border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-ink);
  font: 600 1rem/1 var(--f-body); text-decoration: none; cursor: pointer;
  transition: transform 250ms var(--spring);
}
.btn:hover { transform: translateY(-2px) scale(1.02); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn--sm { min-height: 40px; padding: 0 1.1em; font-size: var(--t-sm); }
.text-link { font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.25em; }
.text-link:hover { text-decoration-thickness: 3px; }

/* ---------- Draft markers ---------- */
.draft-bar { background: var(--note-bg); color: var(--note-ink); font-family: var(--f-mono); font-size: var(--t-xs); position: relative; z-index: 41; }
.draft-bar .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding-block: 8px; }
.draft-bar button { font: inherit; color: inherit; background: transparent; cursor: pointer; border: 1px solid currentColor; border-radius: 999px; padding: 4px 12px; }
:root .draft-note {
  font-family: var(--f-mono); font-size: var(--t-xs); line-height: 1.5;
  background: var(--note-bg); color: var(--note-ink);
  padding: 10px 14px; border-radius: 6px; max-width: 62ch;
}
:root .draft-note strong { font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; margin-right: 0.4em; }
html.hide-notes .draft-note, html.hide-notes .draft-bar__text { display: none; }
html.hide-notes .draft-bar .wrap { justify-content: flex-end; padding-block: 4px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40;
  background: var(--paper); color: var(--ink);
  transition: background-color 300ms ease;
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--header-h); }
.brand { display: flex; align-items: center; gap: 16px; text-decoration: none; color: var(--ink); }
.brand .wordmark { height: 38px; width: auto; display: block; transform-origin: 50% 100%; }
.brand .wordmark.is-wobbling { animation: wobble 800ms var(--ease-out); }
.brand__descriptor { font-family: var(--f-display); font-size: var(--t-sm); color: var(--ink-2); padding-left: 16px; border-left: 1px solid var(--rule); line-height: 1.2; white-space: nowrap; }
.nav { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 32px); }
.nav__links { display: flex; gap: clamp(16px, 2.2vw, 30px); }
.nav__links a { position: relative; text-decoration: none; font-weight: 500; font-size: var(--t-sm); padding: 6px 0; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 300ms var(--ease-out); }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
.menu-btn { display: none; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: transparent; color: var(--ink); border: 1.5px solid var(--ink); font: 600 var(--t-sm) var(--f-body); cursor: pointer; }
.menu-btn__icon { width: 16px; height: 10px; position: relative; display: inline-block; }
.menu-btn__icon::before, .menu-btn__icon::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; border-radius: 2px; transition: transform 200ms ease, top 200ms ease; }
.menu-btn__icon::before { top: 0; }
.menu-btn__icon::after { top: 8px; }
.menu-btn[aria-expanded="true"] .menu-btn__icon::before { top: 4px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__icon::after { top: 4px; transform: rotate(-45deg); }
.mobile-menu { border-top: 1px solid var(--rule); background: var(--paper); }
.mobile-menu ul { display: grid; padding-block: 12px; }
.mobile-menu li a { display: block; padding: 14px 0; text-decoration: none; font-family: var(--f-title); font-weight: 700; font-size: var(--t-xl); border-bottom: 1px solid var(--rule); }
.mobile-menu .btn { width: 100%; margin-block: 16px 24px; }
.progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; pointer-events: none; }
.progress__bar { display: block; height: 100%; background: var(--ink); transform-origin: left; transform: scaleX(0); }

@media (max-width: 1200px) { .brand__descriptor { display: none; } }
@media (max-width: 1020px) {
  :root { --header-h: 64px; }
  .nav__links, .nav .btn { display: none; }
  .menu-btn { display: inline-flex; }
  .brand .wordmark { height: 32px; }
}
@media (min-width: 1021px) { .mobile-menu { display: none !important; } }


/* ---------- Hero: the cutting mat ---------- */
.hero {
  --c-a: #EE79A3; --c-b: #81B0DF; --c-c: #FEC704; --c-d: #FEC704;
  --c-e: #EE79A3; --c-f: #FEC704;   /* gift bag: front, side panels */
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--paper); color: var(--ink);
  min-height: clamp(640px, 80vh, 800px);
  padding-block: clamp(28px, 4vw, 52px) clamp(104px, 9vw, 120px);
}
.hero__mat {
  position: absolute; inset: -40px; z-index: -1;
  background-image:
    linear-gradient(to right, var(--mat-major) 1px, transparent 1px),
    linear-gradient(to bottom, var(--mat-major) 1px, transparent 1px),
    linear-gradient(to right, var(--mat-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--mat-line) 1px, transparent 1px);
  background-size: 200px 200px, 200px 200px, 40px 40px, 40px 40px;
}
.hero__mat::after { /* the angled guide line every cutting mat has */
  content: ""; position: absolute; left: 0; top: 0; width: 200%; height: 1px;
  background: var(--mat-major); transform-origin: 0 0; transform: rotate(33deg);
}
.hero__ruler {
  position: absolute; left: 0; right: 0; bottom: 0; height: 26px; z-index: -1;
  background-image:
    linear-gradient(to right, var(--mat-tick) 1px, transparent 1px),
    linear-gradient(to right, var(--mat-major) 1px, transparent 1px);
  background-size: 40px 18px, 8px 9px;
  background-repeat: repeat-x;
  background-position: 0 100%, 0 100%;
}
.hero__inner { position: relative; z-index: 2; pointer-events: none; display: grid; gap: clamp(18px, 2.4vw, 28px); }
.hero__inner > * { pointer-events: auto; }
.hero__eyebrow { display: inline-flex; align-items: center; gap: 10px; justify-self: start; }
:root .hero__eyebrow { color: var(--ink); }
.dot-live { width: 9px; height: 9px; border-radius: 50%; background: var(--ink); animation: pulse 2.4s ease-in-out infinite; }
.hero__title { font-size: clamp(2.6rem, 1.4rem + 4vw, 4.6rem); letter-spacing: -0.012em; line-height: 1.02; max-width: 17ch; justify-self: start; }
@media (min-width: 1100px) { .hero__title { max-width: none; } .hero__title .line { white-space: nowrap; } }
.hero__title .line { display: block; }
.hero__title .w { display: inline-block; animation: rise 800ms var(--ease-out) both; animation-delay: calc(100ms + var(--i) * 70ms); }
.hero__copy { display: grid; gap: 16px; max-width: 500px; }
.hero__lead { font-family: var(--f-display); font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem); line-height: 1.35; animation: fadeUp 700ms var(--ease-out) 350ms both; }
.hero__sub { color: var(--ink-2); animation: fadeUp 700ms var(--ease-out) 420ms both; }
.hero__founders { display: flex; gap: 12px; align-items: flex-start; font-weight: 500; font-size: var(--t-sm); line-height: 1.45; padding: 12px 14px; background: var(--paper-2); border-radius: 10px; animation: fadeUp 700ms var(--ease-out) 480ms both; }
.hero__founders::before { content: ""; flex: none; width: 14px; height: 14px; margin-top: 2px; border-radius: 50%; background: var(--yolk); box-shadow: 0 0 0 3px var(--paper-2), 0 0 0 4.5px var(--yolk); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 6px; animation: fadeUp 700ms var(--ease-out) 540ms both; }

/* Playground (decorative samples) */
/* --edge is where the text column ends; --u is one "step" (1px on wide screens, less as the window narrows),
   so every sample sits at edge + its own distance and they all close up together. */
.playground { position: absolute; inset: 0; z-index: 3; pointer-events: none; --edge: calc(50% - 120px); --u: min(1px, calc((100vw + 548px) / 2248), calc((100vw - 700px) / 783)); }
@media (max-width: 1335px) { .playground { --edge: calc(var(--gutter) + 508px); } }
@media (max-width: 1180px) { .playground { --edge: calc(var(--gutter) + min(500px, 45vw) + 12px); } }
@media (max-width: 1100px) { .playground { --u: calc((100vw - 259px) / 1645); } }
.playground[data-colourway="1"] { --c-a: #81B0DF; --c-b: #FEC704; --c-c: #EE79A3; --c-d: #EE79A3; --c-e: #81B0DF; --c-f: #EE79A3; }
.playground[data-colourway="2"] { --c-a: #FEC704; --c-b: #EE79A3; --c-c: #81B0DF; --c-d: #81B0DF; --c-e: #FEC704; --c-f: #81B0DF; }
.playground[data-colourway="3"] { --c-a: #1A1814; --c-b: #EE79A3; --c-c: #FEC704; --c-d: #81B0DF; --c-e: #81B0DF; --c-f: #FEC704; }
.playground svg * { transition: fill 700ms var(--ease-out); }
.fa { fill: var(--c-a); } .fb { fill: var(--c-b); } .fc { fill: var(--c-c); } .fd { fill: var(--c-d); } .fe { fill: var(--c-e); } .ff { fill: var(--c-f); } .fh { fill: var(--paper); }
.fi { fill: #1A1814; } .fp { fill: #FFFFFF; }
.shade { fill: rgba(0, 0, 0, 0.16); } .shade-l { fill: rgba(0, 0, 0, 0.07); } .shade-d { fill: rgba(0, 0, 0, 0.3); }
.handle { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; }
.line { fill: none; stroke: rgba(26, 24, 20, 0.35); stroke-width: 1.3; stroke-linejoin: round; }
.line-l { fill: none; stroke: rgba(26, 24, 20, 0.2); stroke-width: 1.2; }
.edge { fill: none; stroke: rgba(26, 24, 20, 0.28); stroke-width: 1.2; }
.pages { stroke: rgba(26, 24, 20, 0.35); stroke-width: 1.2; }
.stitch { fill: none; stroke: #FFFFFF; stroke-opacity: 0.6; stroke-width: 1.5; stroke-dasharray: 5 5; }
.crease { fill: none; stroke: rgba(26, 24, 20, 0.45); stroke-width: 2; }
.crease--thin { stroke: rgba(26, 24, 20, 0.3); stroke-width: 1.2; }
.flap { fill: none; stroke: rgba(26, 24, 20, 0.28); stroke-width: 1.4; stroke-linejoin: round; }
.flap--l { stroke: rgba(26, 24, 20, 0.16); }
.tissue { stroke: rgba(26, 24, 20, 0.3); stroke-width: 1.2; }

.obj {
  position: absolute; left: calc(var(--edge) + var(--ox) * var(--u)); top: var(--y); width: calc(var(--w) * var(--s, 1));
  transform: translate3d(var(--dx, 0px), var(--dy, 0px), 0) rotate(calc(var(--r) + var(--tilt, 0deg)));
  transition: transform 500ms var(--ease-out);
  pointer-events: auto; cursor: grab; touch-action: pan-y;
  user-select: none; -webkit-user-select: none;
}
.obj.is-grabbed { cursor: grabbing; transition: none; z-index: 10; }
.obj__in { animation: drop 900ms var(--spring) both; animation-delay: calc(300ms + var(--d) * 110ms); }
.obj__float { animation: float var(--f, 6s) ease-in-out infinite alternate; }
.obj svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(8px 9px 0 var(--obj-shadow)); transition: filter 250ms ease, transform 250ms var(--spring); }
.obj.is-grabbed svg { filter: drop-shadow(16px 20px 0 var(--obj-shadow)); transform: scale(1.05); }
/* photo cut-outs behave exactly like the drawn samples: same flat shadow, same lift when grabbed */
.obj img { display: block; width: 100%; height: auto; max-width: none; filter: drop-shadow(8px 9px 0 var(--obj-shadow)); transition: filter 250ms ease, transform 250ms var(--spring); pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
.obj.is-grabbed img { filter: drop-shadow(16px 20px 0 var(--obj-shadow)); transform: scale(1.05); }
/* Colour guide: every leaf turns on the rivet; hovering opens the fan a little further.
   No outlines: each leaf casts a small flat shadow on the leaf beneath it. */
.fan .strip { transform-box: view-box; transform-origin: 40px 200px; transform: rotate(var(--r)); transition: transform 500ms var(--spring); filter: drop-shadow(-1.6px 1.2px 0 rgba(26, 24, 20, 0.18)); }
.obj--fan:hover .strip { transform: rotate(calc(var(--r) * 1.16)); }
.fan__cover { fill: #FEC704; }
.fan__rule { fill: none; stroke: rgba(26, 24, 20, 0.3); stroke-width: 1.4; }
.fan__rivet { fill: #E4E0D8; stroke: rgba(26, 24, 20, 0.3); stroke-width: 1; }
/* Swatch swing tag */
.swatch-pink { fill: #EE79A3; }
.swatch__name { font-family: var(--f-body); font-weight: 700; font-size: 10.5px; fill: #1A1814; }
.swatch__no { font-family: var(--f-mono); font-size: 7.5px; letter-spacing: 0.04em; fill: #5A544B; }

.hang { position: absolute; left: var(--x); top: 0; width: 104px; transform-origin: 52px 0; animation: swing 3.4s ease-in-out infinite alternate; pointer-events: none; }
.hang__string { display: block; width: 2px; height: clamp(40px, 7vw, 84px); background: var(--ink); margin-inline: auto; }
.hang__tag { display: block; width: 104px; margin-top: -27px; filter: drop-shadow(6px 7px 0 var(--obj-shadow)); }

.hero__tools {
  position: absolute; left: 49%; bottom: 40px; z-index: 4;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  pointer-events: auto; font-family: var(--f-mono); font-size: var(--t-xs); color: var(--ink);
}
.chip-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px 0 10px;
  border-radius: 999px; border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink);
  font: 500 var(--t-xs) var(--f-mono); cursor: pointer; transition: background-color 200ms;
}
.chip-btn:hover { background: var(--paper-2); }
.chip-btn__icon { width: 16px; height: 16px; transition: transform 600ms var(--spring); }
.hero__hint { opacity: 0.7; flex-basis: 100%; order: -1; transition: opacity 400ms; }
.hero__hint::before { content: "↖ "; }
@media (hover: none) { .hero__hint { display: none; } }

/* Paper seal (replaces the spinning disc). Hands over to the fixed tab once it has scrolled under the header. */
.seal { position: absolute; right: clamp(16px, 5vw, 72px); bottom: 30px; width: clamp(112px, 10vw, 138px); z-index: 5; border-radius: 50%; text-decoration: none; transition: transform 400ms var(--spring); }
.seal:hover { transform: scale(1.06) rotate(-4deg); }
.seal { transition: transform 400ms var(--spring), opacity 200ms ease, visibility 0s; }
.seal-docked .seal { opacity: 0; visibility: hidden; transition: opacity 150ms ease, visibility 0s linear 150ms; }
.seal-returning .seal { opacity: 0; }
.seal svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(5px 6px 0 var(--obj-shadow)); }
.seal__turn { transform-box: view-box; transform-origin: 70px 70px; animation: spin 48s linear infinite; }
.seal__paper { fill: #FEC704; }
.seal__text { font-family: var(--f-mono); font-size: 11.5px; font-weight: 500; fill: #1A1814; }
.seal__arrow { fill: none; stroke: #1A1814; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 1335px) { .hero { --s: 0.9; } }
@media (max-width: 1250px) { .hero { --s: 0.84; } }
/* Smaller laptops and landscape tablets: the desktop layout, with a smaller headline,
   a narrower copy column and scaled-down samples so they stay to the right of the text */
@media (max-width: 1180px) {
  .hero { --s: 0.8; }
  .hero__title { font-size: clamp(2.5rem, 0.6rem + 4.4vw, 3.5rem); max-width: none; }
  .hero__title .line { white-space: nowrap; }
  .hero__copy { max-width: min(500px, 45vw); }
  .hang { width: 86px; transform-origin: 43px 0; }
  .hang__tag { width: 86px; margin-top: -23px; }
  .seal { width: 108px; }
  .hero__tools { max-width: 250px; }   /* colourway name drops under the button, clear of the seal */
}
@media (max-width: 1100px) { .hero { --s: 0.72; } }
@media (max-width: 1080px) { .hero { --s: 0.66; } }
@media (max-width: 1000px) { .hero { --s: 0.6; } }
@media (max-width: 960px) { .hero { --s: 0.56; } }
/* Portrait tablets and phones: no samples (they would only fit underneath the copy) */
@media (max-width: 900px) {
  .hero { min-height: 0; padding-bottom: clamp(52px, 9vw, 72px); }
  .hero__title { font-size: clamp(2.6rem, 1.4rem + 4vw, 4.6rem); max-width: 17ch; }
  .hero__title .line { white-space: normal; }
  .hero__copy { max-width: none; }
  .seal, .hero__tools, .obj--fan { display: none; }
  /* Phones and portrait tablets: the four products sit in one row under the buttons (not scattered), still floating.
     The row is part of the page flow here, so it can never cover the text. Dragging is a mouse-only feature. */
  /* The row spans the full text width. The products grow a little with the screen, and the space between them grows much more:
     widely spaced on a tablet, closing up on a phone. --pu is the size step. */
  .playground { position: static; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: clamp(30px, 6vw, 44px); padding-inline: var(--gutter); --pu: clamp(0.95px, 0.2vw + 0.3px, 1.7px); }
  .playground .obj { position: relative; left: auto; top: auto; flex: 0 1 auto; min-width: 0; width: calc(var(--fw, 70) * var(--pu)); cursor: default; }
  .obj--bag { order: 1; --fw: 66; } .obj--mug { order: 2; --fw: 80; } .obj--card { order: 3; --fw: 68; } .obj--notebook { order: 4; --fw: 74; }
  .obj img { filter: drop-shadow(5px 6px 0 var(--obj-shadow)); }
  /* the swatch tag stays, hanging at the top right beside the headline */
  .hang { left: auto; right: 16px; width: 64px; transform-origin: 32px 0; animation-name: swing-s; }
  .hang__tag { width: 64px; margin-top: -17px; }
  .hang__string { height: clamp(40px, 7vw, 60px); }
}
/* phones: a longer string, so the tag hangs beside the shorter second and third lines of the headline */
@media (max-width: 430px) {
  .hang { right: 12px; width: 52px; transform-origin: 26px 0; }
  .hang__tag { width: 52px; margin-top: -14px; }
  .hang__string { height: 118px; }
}
@media (max-width: 392px) {
  .hero__eyebrow { max-width: calc(100% - 60px); }      /* the label wraps so the string never crosses it */
  .hang__string { height: 144px; }
}
@media (max-width: 366px) {
  .hang { right: 10px; width: 46px; transform-origin: 23px 0; }
  .hang__tag { width: 46px; margin-top: -12px; }
  .hang__string { height: 152px; }
}
@media (max-width: 339px) { .hang { display: none; } }  /* no room beside the headline on the very smallest phones */

/* ---------- Sections & reveal ---------- */
.section { padding-block: var(--section); }
.section + .section { border-top: 1px solid var(--rule); }
.section__head { display: grid; gap: 14px; max-width: 760px; margin-bottom: clamp(28px, 4vw, 48px); }
.section__head--wide { max-width: 900px; }
.section__head h2 { font-size: var(--t-2xl); }
.section__head p:not(.eyebrow) { color: var(--ink-2); font-size: var(--t-lg); max-width: 60ch; }

.js-reveal [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); transition-delay: calc(var(--d, 0) * 60ms); }
.js-reveal [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Track record (pale pink stripes, after pages 2 and 6 of the Tache deck) ---------- */
.proof {
  padding-block: clamp(36px, 5vw, 64px);
  background: repeating-linear-gradient(90deg, var(--stripe-a) 0 36px, var(--stripe-b) 36px 72px);
}
.proof__panel { background: var(--paper); border-radius: 18px; padding: clamp(24px, 4vw, 52px); box-shadow: 0 1px 0 rgba(26, 24, 20, 0.05); }
.figures { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); margin-top: clamp(18px, 2.4vw, 28px); align-items: end; }
.figure__n { font-family: var(--f-title); font-weight: 700; font-variation-settings: "SOFT" 100, "WONK" 0; line-height: 0.95; letter-spacing: -0.01em; font-size: clamp(2rem, 1.4rem + 1.8vw, 2.9rem); }
.figure__over { display: block; margin-bottom: 6px; font-family: var(--f-mono); font-weight: 500; font-size: var(--t-xs); letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-2); }
.figure__l { margin-top: 8px; color: var(--ink-2); font-size: var(--t-sm); max-width: 34ch; }
.figure--lead .figure__n { font-size: clamp(3.4rem, 1.8rem + 5.6vw, 7.25rem); }
.figure--lead .figure__over { font-size: var(--t-sm); }
.figure--lead .figure__l { margin-top: 12px; color: var(--ink); font-family: var(--f-display); font-size: var(--t-xl); line-height: 1.25; }
.figures__examples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(18px, 2.6vw, 36px); row-gap: 12px; align-content: end; }
.figures__incl { grid-column: 1 / -1; font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-2); }
.figures__examples .figure { padding-top: 14px; border-top: 2px solid var(--ink); }
.figures__examples .figure__n { white-space: nowrap; }
@media (max-width: 420px) { .figures__examples { grid-template-columns: minmax(0, 1fr); row-gap: 18px; } }
.rule { display: block; height: 3px; border: 0; margin: clamp(24px, 3vw, 36px) 0 0; background: var(--yolk); }
.proof__retail { margin-top: clamp(18px, 2.4vw, 26px); font-weight: 600; font-size: var(--t-lg); }
.logos { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px; }
.logo-slot { position: relative; flex: 1 1 128px; display: grid; place-items: center; min-height: 78px; padding: 16px 12px 12px; border: 1.5px dashed var(--mat-tick); border-radius: 10px; background: var(--paper); text-align: center; }
.logo-slot img { display: block; max-width: 100%; max-height: 40px; width: auto; height: auto; }
.logo-slot__name { font-weight: 600; font-size: var(--t-sm); line-height: 1.2; color: var(--ink); }
.logo-slot:has(img) { border-style: solid; border-color: transparent; }
.logo-slot:has(img) .logo-slot__name, .logo-slot:has(img) .draft-tag { display: none; }
/* black logos become white on the dark panel */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo-slot img, :root:not([data-theme="light"]) .logo-chip img { filter: invert(1); } }
:root[data-theme="dark"] .logo-slot img, :root[data-theme="dark"] .logo-chip img { filter: invert(1); }
.draft-tag { position: absolute; top: 5px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--note-ink); background: var(--note-bg); padding: 1px 6px; border-radius: 4px; }
html.hide-notes .draft-tag { display: none; }
.proof__note { margin-top: 14px; font-size: var(--t-xs); color: var(--ink-2); }
@media (max-width: 900px) { .figures { grid-template-columns: minmax(0, 1fr); align-items: start; } }
@media (max-width: 640px) {
  .proof { background: repeating-linear-gradient(90deg, var(--stripe-a) 0 22px, var(--stripe-b) 22px 44px); padding-inline: 0; }
  .logo-slot { flex-basis: 40%; min-height: 64px; }
}

/* ---------- What can we help you with? (after page 4 of the Tache deck) ---------- */
.help-sec { background: var(--paper); }
.help-head { display: grid; gap: 14px; max-width: 760px; }
.help-head h2 { font-size: var(--t-2xl); }
.help-head__intro { color: var(--ink-2); font-size: var(--t-lg); max-width: 54ch; }
.help { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; margin-top: 30px; }   /* every cell the same height; grid sits 30px below the rule */
.help__item { display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 14px; row-gap: 8px; align-items: center; align-content: start; padding: 52px 22px 40px; border-left: 1px solid var(--rule); }
.help__item:nth-child(3n+1) { border-left: 0; padding-left: 0; }   /* nine items: three rows of three */
.help__item:nth-child(3n) { padding-right: 0; }
.help__item:nth-child(n+4) { border-top: 1px solid var(--rule); }
.help__item h3 { font-size: 1.16rem; line-height: 1.15; }
.help__item p { grid-column: 2; font-size: var(--t-sm); color: var(--ink-2); line-height: 1.5; }
.badge-i { width: 46px; height: 46px; border-radius: 50%; background: var(--b, var(--yolk)); display: grid; place-items: center; }
.badge-i svg { width: 26px; height: 26px; fill: none; stroke: #1A1814; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1180px) {
  .help { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .help__item, .help__item:nth-child(3n), .help__item:nth-child(3n+1) { padding: 44px 22px 36px; border-left: 1px solid var(--rule); }
  .help__item:nth-child(odd) { border-left: 0; padding-left: 0; }
  .help__item:nth-child(even) { padding-right: 0; }
  .help__item:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .help__item:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* the ninth item gets the full row, so its top rule runs right across */
}
@media (max-width: 600px) {
  .help { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .help__item, .help__item:nth-child(odd), .help__item:nth-child(even) { padding: 20px 0 22px; border-left: 0; }
  .help__item:nth-child(n+2) { border-top: 1px solid var(--rule); }
}

/* ---------- CREATE · MAKE · GROW: stacking cards ---------- */
.section--stack { padding-bottom: clamp(40px, 6vw, 80px); }
.stack { display: grid; gap: 0; }
.pcard {
  --card-bg: #FEC704; --card-ink: #1A1814; --card-ink-2: #2E2A24; --card-rule: rgba(26, 24, 20, 0.22);
  position: sticky; top: calc(var(--header-h) + 20px + var(--i) * 26px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: clamp(24px, 4vw, 56px); align-items: center;
  min-height: min(600px, calc(100vh - var(--header-h) - 100px));
  margin-bottom: 9vh; padding: clamp(28px, 4vw, 52px);
  border-radius: 28px; background: var(--card-bg); color: var(--card-ink);
  box-shadow: 0 -2px 0 rgba(26, 24, 20, 0.06), 0 30px 60px -34px rgba(26, 24, 20, 0.45);
  transform-origin: 50% 0; transform: scale(var(--shrink, 1));
  filter: brightness(var(--dim, 1));
}
.pcard:last-child { margin-bottom: 0; }
.pcard--make { --card-bg: #EE79A3; }
.pcard--grow { --card-bg: #81B0DF; }
.pcard__copy { display: grid; gap: 14px; align-content: center; }
.pcard__stage { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.09em; text-transform: uppercase; color: var(--card-ink-2); }
.pcard__word { font-family: var(--f-title); font-weight: 700; font-size: clamp(2.8rem, 1.5rem + 4.6vw, 6.25rem); line-height: 0.92; letter-spacing: 0; }
.pcard__tag { font-family: var(--f-display); font-style: italic; font-size: var(--t-xl); line-height: 1.2; }
.pcard__body { color: var(--card-ink-2); max-width: 46ch; }
.pcard__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; border-top: 1px solid var(--card-rule); margin-top: 6px; }
.pcard__list li { position: relative; padding: 9px 0 9px 18px; border-bottom: 1px solid var(--card-rule); font-size: var(--t-sm); line-height: 1.35; }
.pcard__list li::before { content: ""; position: absolute; left: 0; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--card-ink); }
.pcard__art { display: grid; place-items: center; }
/* Picture show on each card: the illustration, then photos, sliding sideways. Dots underneath show how many there are. */
.pshow { width: 100%; max-width: 480px; display: grid; gap: 10px; justify-items: center; }
.pshow__stage { width: 100%; aspect-ratio: 420 / 380; overflow: hidden; touch-action: pan-y; }
.pshow__track { display: flex; height: 100%; transform: translateX(calc(var(--at, 0) * -100%)); transition: transform 650ms var(--ease-out); }
.pshow__slide { position: relative; flex: 0 0 100%; min-width: 0; margin: 0; }
/* photos sit exactly where the white sheet of the illustration sits */
.pshow__slide--photo .ph, .pshow__slide--photo img { position: absolute; left: 4.762%; top: 5.263%; width: 90.476%; height: 89.474%; border-radius: 11px; }
.pshow__slide--photo img { object-fit: cover; max-width: none; }
.ph--sheet { inset: auto; background-color: #FFFFFF; color: #5A544B; border-color: rgba(26, 24, 20, 0.4); --mat-line: rgba(26, 24, 20, 0.05); }
.ph--sheet svg { color: #5A544B; }
.pshow__nav { display: flex; align-items: center; justify-content: center; }
.pshow__nav[hidden] { display: none; }
.pshow__dot, .pshow__pause { width: 28px; height: 32px; padding: 0; border: 0; background: transparent; display: grid; place-items: center; cursor: pointer; color: #1A1814; }
.pshow__dot::before { content: ""; width: 10px; height: 10px; border-radius: 999px; border: 1.5px solid #1A1814; transition: width 300ms var(--ease-out), background-color 200ms ease; }
.pshow__dot:hover::before { background: rgba(26, 24, 20, 0.35); }
.pshow__dot[aria-current="true"] { width: 40px; }
.pshow__dot[aria-current="true"]::before { width: 26px; background: #1A1814; }
.pshow__pause { margin-left: 8px; border-radius: 50%; }
.pshow__pause svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pshow__pause .i-play { display: none; fill: currentColor; stroke-width: 1.4; }
.pshow__pause[aria-pressed="true"] .i-play { display: inline; }
.pshow__pause[aria-pressed="true"] .i-pause { display: none; }
.pshow__pause:hover { background: rgba(26, 24, 20, 0.12); }
.pshow button:focus-visible { outline-color: #1A1814; }
/* Card-shaped variant (famous faces): 4:5, pictures fill the frame, controls follow the page's text colour so they work in dark mode */
.pshow--card { max-width: none; gap: 4px; }
.pshow--card .pshow__stage { aspect-ratio: 4 / 5; border-radius: 14px; background: var(--paper); }
.pshow__slide--fill img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.pshow--card .pshow__dot, .pshow--card .pshow__pause { color: var(--ink); }
.pshow--card .pshow__dot::before { border-color: var(--ink); }
.pshow--card .pshow__dot[aria-current="true"]::before { background: var(--ink); }
.pshow--card button:focus-visible { outline-color: var(--focus); }
/* Story variant (Selected work): the same 4:3 frame as a story photo. The dots sit on the photo in a small pale pill, so the words
   line up with the stories beside it. The row scrolls sideways, so a swipe moves the row and the dots change the picture. */
.pshow--story { position: relative; display: block; max-width: none; margin: 0 0 8px; }
.pshow--story .pshow__stage { aspect-ratio: 4 / 3; border-radius: 14px; background: var(--paper-2); touch-action: auto; }
.pshow--story .pshow__nav { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); padding: 0 2px 0 6px; border-radius: 999px; background: rgba(250, 248, 244, 0.88); box-shadow: 0 1px 4px rgba(26, 24, 20, 0.12); }
.pshow--story .pshow__dot, .pshow--story .pshow__pause { height: 28px; }
.pshow--story .pshow__dot { width: 24px; }   /* compact, so five dots still leave most of a small photo clear (24 px keeps a fair tap target) */
.pshow--story .pshow__dot[aria-current="true"] { width: 36px; }
.pshow--story .pshow__dot[aria-current="true"]::before { width: 22px; }
.pshow--story .pshow__pause { margin-left: 2px; }
.feature .pshow--story .pshow__stage { touch-action: pan-y; }   /* outside a sideways row, a swipe changes the picture */
@media (prefers-reduced-motion: reduce) { .pshow__track, .pshow__dot::before { transition: none; } }
/* Illustrations: each tells its stage in one short sequence, then holds still */
.art { width: 100%; max-width: 480px; height: auto; overflow: visible; display:block }
.art-sheet { fill: #FFFFFF; }
.art-label { font-family: "DM Mono", monospace; font-size: 12px; letter-spacing: 1.2px; fill: #1A1814; }
.art-small { font-family: "DM Mono", monospace; font-size: 11px; fill: #1A1814; }
.art-muted { fill: #6B645A; }
.art-ui { font-family: "Hanken Grotesk", sans-serif; font-size: 13px; font-weight: 600; fill: #1A1814; }
.k { fill: none; stroke: #1A1814; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.k-thin { stroke-width: 1.2; }
.k-dash { stroke-dasharray: 5 4; }
.k-soft { stroke: rgba(26,24,20,.3); }
.c-pink { fill: #EE79A3; } .c-blue { fill: #81B0DF; } .c-yellow { fill: #FEC704; } .c-ink { fill: #1A1814; } .c-white { fill: #FFFFFF; }
.c-peach { fill: #FAE1CD; } .c-pale { fill: #F9D4D6; } .c-warm { fill: #FCEDE2; }
.sh { fill: rgba(0,0,0,.16); } .sh-l { fill: rgba(0,0,0,.07); } .sh-d { fill: rgba(0,0,0,.3); }
.stamp rect { fill: none; stroke: #1A1814; stroke-width: 3; }
.stamp text { font-family: "DM Mono", monospace; font-weight: 500; font-size: 15px; letter-spacing: 2px; fill: #1A1814; }
/* animation: hidden only when JS is running and motion is allowed; plays once when the card arrives */
.a-pop, .a-rise, .a-stamp, .a-fade { transform-box: fill-box; transform-origin: center; }
.a-rise { transform-origin: 50% 100%; }
.js-anim .a-fade, .js-anim .a-pop, .js-anim .a-rise, .js-anim .a-stamp { opacity: 0; }
.js-anim .a-draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
/* --art-pace shortens every delay so each drawing completes in about two seconds; the script then holds it for half a second and fades to the first photo */
.pshow { --art-pace: 0.7; }
.is-playing .a-fade { animation: aFade 450ms ease calc(var(--dd, 0s) * var(--art-pace, 1)) forwards; }
.is-playing .a-pop { animation: aPop 500ms cubic-bezier(.34,1.56,.64,1) calc(var(--dd, 0s) * var(--art-pace, 1)) forwards; }
.is-playing .a-rise { animation: aRise 560ms cubic-bezier(.34,1.4,.64,1) calc(var(--dd, 0s) * var(--art-pace, 1)) forwards; }
.is-playing .a-stamp { animation: aStamp 440ms cubic-bezier(.2,1.4,.4,1) calc(var(--dd, 0s) * var(--art-pace, 1)) forwards; }
.is-playing .a-draw { animation: aDraw 640ms cubic-bezier(.2,.8,.2,1) calc(var(--dd, 0s) * var(--art-pace, 1)) forwards; }
/* Illustration to first photo: the photo fades in over the drawing (it sits exactly on the white sheet), then the drawing fades away underneath */
.pshow__track.is-fading .pshow__slide:nth-child(2) { transform: translateX(-100%); animation: pFadeIn 600ms ease both; }
.pshow__track.is-fading .pshow__slide:nth-child(1) { animation: pFadeOut 600ms ease both; }
@keyframes pFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pFadeOut { 0%, 55% { opacity: 1; } 100% { opacity: 0; } }
@keyframes aFade { to { opacity: 1; } }
@keyframes aPop { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: none; } }
@keyframes aRise { from { opacity: 0; transform: scaleY(.15); } to { opacity: 1; transform: none; } }
@keyframes aStamp { from { opacity: 0; transform: scale(1.7) rotate(8deg); } to { opacity: 1; transform: none; } }
@keyframes aDraw { to { stroke-dashoffset: 0; } }

@media (max-width: 900px) {
  .pcard { position: relative; top: auto; grid-template-columns: minmax(0, 1fr); min-height: 0; margin-bottom: 20px; transform: none; filter: none; }
  .pcard__art { order: -1; }
  .art, .pshow { max-width: 380px; }
}
@media (max-width: 520px) { .pcard__list { grid-template-columns: minmax(0, 1fr); } .pcard { border-radius: 20px; } }

/* ---------- Selected work ---------- */
.work-sec { padding-block: clamp(36px, 5vw, 64px); background: repeating-linear-gradient(90deg, var(--stripe-a) 0 36px, var(--stripe-b) 36px 72px); }
.work-panel { background: var(--paper); border-radius: 18px; padding: clamp(24px, 4vw, 52px); box-shadow: 0 1px 0 rgba(26, 24, 20, 0.05); }
@media (max-width: 640px) { .work-sec { background: repeating-linear-gradient(90deg, var(--stripe-a) 0 22px, var(--stripe-b) 22px 44px); } }
.work-sec .work-panel { --pad: clamp(24px, 4vw, 52px); overflow: hidden; }
/* Selected work: three stories side by side; when they no longer fit (below 1100 px, phones included) they become a row that scrolls
   sideways and runs off the panel's right edge, so the next story peeks in. Same behaviour as the awards row. Never wraps to two lines. */
.work {
  --bleed: var(--pad);
  display: flex; gap: clamp(20px, 2.6vw, 36px); align-items: flex-start;
  margin-right: calc(var(--bleed) * -1); padding: 4px var(--bleed) 4px 0;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.work::-webkit-scrollbar { display: none; }
.work:focus-visible { outline-offset: 6px; }
.work > .story { flex: 1 1 0; min-width: 0; scroll-snap-align: start; }
@media (max-width: 1099px) { .work > .story { flex: 0 0 min(80vw, 350px); } }
.story { display: grid; gap: 10px; align-content: start; }
.media { position: relative; margin: 0 0 8px; aspect-ratio: 4 / 3; max-width: 100%; border-radius: 14px; overflow: hidden; background: var(--paper-2); }
.media--portrait { aspect-ratio: 3 / 2; margin-bottom: 18px; }
.media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 20px; text-align: center;
  border: 1.5px dashed var(--mat-tick); border-radius: 14px; color: var(--ink-2);
  font-family: var(--f-mono); font-size: var(--t-xs); line-height: 1.4;
  background-image: repeating-linear-gradient(135deg, transparent 0 16px, var(--mat-line) 16px 17px);
}
.ph svg { width: 34px; height: 34px; color: var(--ink-2); }
.ph__size { opacity: 0.75; }
/* While a photo is still on its way (slow connection, lazy loading), its slot stays a plain tinted box: the "Photo to come" label and
   dashed outline only show if the file is really missing (the script removes the image, and then this rule no longer applies). */
:has(> img[data-dropin]) > .ph { border-color: transparent; background-image: none; }
:has(> img[data-dropin]) > .ph > * { visibility: hidden; }
.story__meta { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.story h3 { font-size: var(--t-xl); }
.story__result { justify-self: start; font-family: var(--f-title); font-weight: 700; font-variation-settings: "SOFT" 100, "WONK" 0; font-size: 1.3rem; line-height: 1.2; padding: 3px 8px; background: var(--pill, var(--yolk)); color: #1A1814; border-radius: 6px; }
.story__text { color: var(--ink-2); max-width: 44ch; }
@media (max-width: 480px) { .story__result { font-size: 1.12rem; } }   /* phones: result pills such as "Designed for leading retailers." stay on one line from 360 px wide */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { font-size: var(--t-xs); font-weight: 600; padding: 4px 10px; border: 1px solid var(--rule); border-radius: 999px; }

/* Retailer features under the three stories, kept apart from the retailer-range strip. A lone .feature is one wide row: photo left, words right. */
.feature { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.5fr); gap: clamp(20px, 3.2vw, 48px); align-items: center; margin-top: clamp(28px, 4vw, 48px); padding-top: clamp(24px, 3.4vw, 40px); border-top: 1px solid var(--rule); }
.feature__media { margin: 0; }
.feature__media.pshow--story { display: grid; gap: 10px; justify-items: end; }
.feature__media.pshow--story .pshow__nav { position: static; transform: none; justify-self: end; box-shadow: none; }
@media (min-width: 641px) { .feature__media.pshow--story .pshow__nav { justify-self: center; } }
.feature__copy { display: grid; gap: 10px; justify-items: start; align-content: center; }
.feature__identity { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 12px; width: 100%; margin-bottom: 6px; }
.feature__identity .logo-chip { margin-bottom: 0; flex: 0 0 auto; }
.feature__identity .pshow__nav { position: static; transform: none; margin-left: auto; padding: 0; background: transparent; box-shadow: none; }
.feature__identity .pshow__dot { width: 24px; }
.feature__identity .pshow__dot[aria-current="true"] { width: 36px; }
.feature__identity .pshow__pause { margin-left: 2px; }
@media (max-width: 640px) { .feature__identity .logo-chip { width: 132px; height: 60px; } }
.feature__copy h3 { font-size: var(--t-xl); max-width: 22ch; }
.logo-chip { display: grid; place-items: center; width: 168px; height: 60px; margin-bottom: 6px; padding: 8px 10px; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper); }
.logo-chip img { display: block; width: 100%; height: 100%; object-fit: contain; }
.logo-chip__name { font-weight: 600; font-size: var(--t-sm); }
.logo-chip:has(img) .logo-chip__name { display: none; }
@media (max-width: 640px) { .feature { grid-template-columns: minmax(0, 1fr); align-items: start; } }
/* Two features in a .features wrapper sit side by side as two equal cards (photo on top, words below). Below 900 px they stack,
   each going back to the wide row (photo left, words right), then photo above words on phones. */
.features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 3.6vw, 52px); margin-top: clamp(28px, 4vw, 48px); padding-top: clamp(24px, 3.4vw, 40px); border-top: 1px solid var(--rule); }
.features > .feature { grid-template-columns: minmax(0, 1fr); align-items: start; align-content: start; gap: clamp(16px, 2vw, 24px); margin: 0; padding: 0; border: 0; }
.features .feature__copy { align-content: start; }
.features .feature__copy h3 { max-width: 24ch; }
.feature .chips { margin-top: 4px; }
.chips .chips__more { border-color: transparent; padding-inline: 2px; color: var(--ink-2); font-weight: 500; }
@media (max-width: 899px) {
  .features { grid-template-columns: minmax(0, 1fr); }
  .features > .feature { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr); align-items: center; }   /* photos a little larger than a lone feature's */
  .features > .feature + .feature { padding-top: clamp(24px, 3.4vw, 40px); border-top: 1px solid var(--rule); }
}
@media (max-width: 640px) { .features > .feature { grid-template-columns: minmax(0, 1fr); align-items: start; } }

/* Licensing: a compact product showcase. Heading, introduction underneath it, then a 3 x 3 grid of horizontal tiles:
   our product photo on the left (set in from the tile edge, with rounded corners), the brand's black logo on the right.
   Every tile is the same cream (Frank, 7 Oct). The cream and the black logos stay the same in dark mode, like the stripes. */
.lic-sec { --lic-cream: #F3EBDC; --lic-h: 140px; padding-block: clamp(36px, 3.6vw, 44px) clamp(48px, 6vw, 84px); }   /* bottom space matches the top of Famous faces, so the wave sits evenly between them (Frank, 13 Oct) */
.lic-head { display: grid; gap: 12px; }
.lic-head__title { display: grid; gap: 12px; }
.lic-head h2 { font-size: var(--t-2xl); }
.lic-head__intro { color: var(--ink-2); font-size: var(--t-lg); max-width: 62ch; }
.lic-note { margin: clamp(14px, 1.6vw, 20px) 0 12px; font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); }
.lic-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; }
.lic-tile { display: grid; grid-template-columns: auto minmax(0, 1fr); height: var(--lic-h); border-radius: 14px; overflow: hidden; background: var(--lic-cream); color: #1A1814; }
.lic-tile__photo { position: relative; height: var(--lic-h); width: calc((var(--lic-h) - 16px) * 4 / 3 + 16px); margin: 0; overflow: hidden; }   /* the photo inside the 8 px inset is exactly 4:3, so 4:3 photos are not cropped */
.lic-tile__photo img { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); max-width: none; object-fit: cover; border-radius: 9px; }   /* same size and position as the placeholder */
/* missing photo: a labelled slot showing the file name to save */
.lic-ph { position: absolute; inset: 8px; display: grid; place-content: center; justify-items: center; gap: 3px; padding: 6px; border: 1.5px dashed rgba(26, 24, 20, 0.36); border-radius: 9px; background: rgba(255, 255, 255, 0.5); text-align: center; font-family: var(--f-mono); font-size: 0.6875rem; line-height: 1.3; color: #4F493F; }
.lic-ph svg { width: 22px; height: 22px; margin-bottom: 2px; }
.lic-ph b { font-family: var(--f-body); font-size: 0.8125rem; font-weight: 600; color: #1A1814; }
.lic-tile__photo:has(img) .lic-ph { display: none; }
/* a real photo can be opened larger */
.lic-tile__zoom { position: absolute; inset: 8px; width: calc(100% - 16px); padding: 0; border-radius: 9px; border: 0; background: transparent; cursor: zoom-in; display: grid; place-items: end; }
.lic-tile__zoom[hidden] { display: none; }
.lic-tile__zoom svg { width: 24px; height: 24px; margin: 6px; padding: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); transition: transform 300ms var(--spring); fill: none; stroke: #1A1814; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lic-tile__zoom:hover svg { transform: scale(1.12); }
.lic-tile__zoom:focus-visible { outline: 3px solid #1A1814; outline-offset: 2px; }
/* logos: black, on 3:1 canvases; the compact marks (Smiley, My Little Pony, Hasbro) are drawn larger so they read at the same weight */
.lic-tile__logo { display: grid; place-items: center; min-width: 0; padding: 10px 14px; text-align: center; font-weight: 700; font-size: var(--t-sm); line-height: 1.2; }
.lic-tile__logo img { display: block; width: min(136px, 100%); height: auto; aspect-ratio: 3 / 1; pointer-events: none; }
.lic-tile__logo--mark img { width: min(204px, 150%); max-width: none; }
.lic-tile__logo--lift img { width: min(184px, 135%); max-width: none; }   /* Peppa Pig: drawn small on its canvas, so shown a little larger (Frank, 12 Oct) */
.lic-tile__logo:has(img) .lic-tile__name { display: none; }
/* larger view */
.lic-view { border: 0; padding: 0; background: transparent; max-width: min(92vw, 1080px); max-height: 92vh; overflow: visible; color: #F6F2EA; }
.lic-view::backdrop { background: rgba(20, 19, 15, 0.82); }
.lic-view figure { margin: 0; display: grid; gap: 10px; justify-items: start; }
.lic-view img { display: block; max-width: 100%; max-height: 80vh; width: auto; height: auto; border-radius: 12px; background: #FFFFFF; }
.lic-view figcaption { font-size: var(--t-sm); }
.lic-view__close { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: #FAF8F3; color: #1A1814; cursor: pointer; display: grid; place-items: center; }
.lic-view__close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.lic-view__close:focus-visible { outline: 3px solid #FEC704; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .lic-tile__zoom svg { transition: none; } .lic-tile__zoom:hover svg { transform: none; } }
@media (max-width: 1099px) {
  .lic-sec { --lic-h: 136px; }
  .lic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 679px) {
  .lic-sec { --lic-h: 124px; }
  .lic-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}
@media (max-width: 359px) { .lic-sec { --lic-h: 108px; } }

/* ---------- Branding ---------- */
.brands-sec { padding-block: clamp(48px, 6vw, 84px); overflow-x: clip; }
/* The brands sit in a sideways row that runs off the right edge of the page (same mechanics as the awards row): three fit on a wide
   screen and the fourth peeks in. Cards keep one layout at every width: photo, logo tile on its corner, label, name, snippet. */
.brands {
  --bleed: calc((100vw - 100%) / 2); --gap: clamp(20px, 2.6vw, 36px);
  display: flex; gap: var(--gap); align-items: flex-start;
  margin-right: calc(var(--bleed) * -1); padding: 4px var(--bleed) 4px 0;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.brands::-webkit-scrollbar { display: none; }
.brands:focus-visible { outline-offset: 6px; }
.brands-sec .awards-head { margin-bottom: clamp(28px, 4vw, 48px); }
.brands > .brand { --logo: 112px; --logo-w: var(--logo); --logo-h: var(--logo); flex: 0 0 calc((100% - var(--gap) * 2) / 3); min-width: 0; scroll-snap-align: start; display: grid; gap: 12px; align-content: start; }   /* --logo: size of the logo tile on the photo corner */
.brands > .brand:has(.brand__logo--wide) { --logo-w: calc(var(--logo) * 1.8); --logo-h: calc(var(--logo) * 0.78); }   /* a wide logo gets a wide, shorter tile */
.pshow--brand .pshow__stage { touch-action: auto; }   /* a swipe on a brand photo scrolls the row; the dots change the picture */
.brand__media { position: relative; min-width: 0; }
.brand__media .media { margin: 0 0 36px; }                         /* leaves the same space the picture dots take on the other cards */
.pshow--brand .pshow__stage { aspect-ratio: 4 / 3; background: var(--paper-2); }
.pshow--brand .pshow__nav { justify-self: end; justify-content: flex-end; width: calc(100% - var(--logo-w) - 24px); min-width: 0; }
.pshow--brand .pshow__dot { flex: 0 1 24px; width: auto; min-width: 14px; }
.pshow--brand .pshow__dot[aria-current="true"] { flex-basis: 38px; width: auto; min-width: 24px; }
.pshow--brand .pshow__dot[aria-current="true"]::before { width: calc(100% - 12px); }
.pshow--brand .pshow__pause { flex: 0 0 28px; margin-left: 2px; }
/* logos sit on white tiles, so any logo colour works in light and dark mode */
.brand__logo, .range-logo { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; background: #FFFFFF; color: #1A1814; border: 1px solid var(--rule); border-radius: 10px; text-align: center; font-weight: 700; font-size: var(--t-sm); line-height: 1.2; }
.brand__id { margin-top: calc(var(--logo) / 2 - 34px); }   /* clears the half of the logo tile that hangs below the photo */
.brand__id > div { display: grid; gap: 6px; }
/* The logo tile sits half on, half off the bottom left corner of the photo. The picture dots move to the right to make room. */
.brand__logo { position: absolute; z-index: 2; left: 14px; bottom: calc(36px - var(--logo-h) / 2); width: var(--logo-w); height: var(--logo-h); padding: 8px; border-radius: 14px; box-shadow: 0 10px 22px -12px rgba(26, 24, 20, 0.5); font-family: var(--f-mono); font-weight: 400; font-size: 0.625rem; letter-spacing: 0.04em; text-transform: uppercase; color: #5A544B; }
.brand__logo img, .range-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.range-logo small { display: block; margin-top: 3px; font-family: var(--f-mono); font-weight: 400; font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: #5A544B; }
.brand__logo:has(img) span, .range-logo:has(img) span { display: none; }
.brands > .brand h3 { font-size: var(--t-xl); }
.brand__text { color: var(--ink-2); font-size: var(--t-sm); line-height: 1.55; max-width: 42ch; }
/* Range identities: a row of tiles that scrolls sideways and runs off the right edge of the page (same mechanics as the awards row) */
.ranges { margin-top: clamp(28px, 4vw, 44px); padding-top: clamp(22px, 3vw, 32px); border-top: 1px solid var(--rule); }
.ranges__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 24px; margin-bottom: 16px; }
.ranges__intro { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; color: var(--ink-2); }
.range-logos {
  --bleed: calc((100vw - 100%) / 2);
  display: flex; gap: 12px; margin-right: calc(var(--bleed) * -1); padding: 4px var(--bleed) 4px 0;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.range-logos::-webkit-scrollbar { display: none; }
.range-logos:focus-visible { outline-offset: 6px; }
.range-logo { flex: 0 0 clamp(150px, 17vw, 226px); height: 112px; padding: 16px 20px; scroll-snap-align: start; }
.range-logo--mark { padding: 10px; }   /* round or square marks get a little more room */
@media (max-width: 1199px) { .brands > .brand { --logo: 92px; } }
@media (max-width: 1099px) { .brands > .brand { --logo: 100px; flex-basis: calc((100% - var(--gap)) / 2); } }   /* two and a peek */
@media (max-width: 640px) { .brands > .brand { --logo: 88px; flex-basis: min(84%, 380px); } }                     /* one and a peek */
@media (max-width: 560px) {
  .range-logo { flex-basis: 156px; height: 92px; padding: 12px 14px; }
  .range-logo--mark { padding: 8px; }
  .range-logos { gap: 10px; }
}

/* ---------- Awards ---------- */
/* Award badges keep their original colours and proportions and always sit on a white tile (four of the five are JPGs with a white
   background), so they look the same in light and dark mode. --h sets the badge height; --k scales every badge down on small screens. */
.award-chip { flex: none; display: block; padding: 8px; border: 1px solid var(--rule); border-radius: 10px; background: #FFFFFF; line-height: 0; }
.award-chip img { display: block; width: auto; max-width: none; height: calc(var(--h, 96px) * var(--k, 1)); }
.award-chip--flush { padding: 4px 6px; }   /* landscape badges already carry their own white margin */
.win-tag { display: inline-block; margin-right: 6px; padding: 2px 7px 1px; border-radius: 4px; background: var(--yolk); color: #1A1814; font-family: var(--f-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; vertical-align: 0.12em; }
/* Krafty's badge, on its existing Selected work card: it hangs on the bottom corner of the photo like a sticker,
   so the three cards keep the same text layout */
.story__media { position: relative; }
.story__badge { position: absolute; right: 12px; bottom: -8px; z-index: 1; box-shadow: 0 8px 16px -10px rgba(26, 24, 20, 0.45); }
.story__award { font-weight: 600; font-size: var(--t-sm); }
.story__cat { display: block; margin-top: 3px; font-weight: 400; color: var(--ink-2); }
.story .draft-note { padding: 6px 10px; }

.awards-sec { padding-block: clamp(36px, 5vw, 64px); overflow-x: clip; background: repeating-linear-gradient(90deg, var(--stripe-a) 0 36px, var(--stripe-b) 36px 72px); }   /* pink stripes, as behind Track record and Selected work (Frank, 13 Oct) */
@media (max-width: 640px) { .awards-sec { background: repeating-linear-gradient(90deg, var(--stripe-a) 0 22px, var(--stripe-b) 22px 44px); } }
/* The cards sit on a paper panel; on narrower screens the sideways row runs to the panel's edge (instead of the page's) and is clipped there */
.awards-panel { --pad: clamp(24px, 4vw, 52px); padding: var(--pad); overflow: hidden; }
.awards-panel .awards { --bleed: var(--pad); }
.awards-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 24px; margin-bottom: clamp(22px, 3vw, 36px); }
.awards-head .section__head { margin-bottom: 0; }
.awards-nav { flex: none; display: flex; gap: 10px; margin-left: auto; }
.awards-nav[hidden] { display: none; }
.round-btn { width: 46px; height: 46px; padding: 0; display: grid; place-items: center; border: 1.5px solid var(--ink); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; transition: transform 250ms var(--spring), background-color 160ms ease, opacity 160ms ease; }
.round-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.round-btn:hover:not(:disabled) { background: var(--yolk); border-color: #1A1814; color: #1A1814; transform: scale(1.06); }
.round-btn:active:not(:disabled) { transform: scale(0.96); }
.round-btn:disabled { opacity: 0.3; cursor: default; }
/* The row: runs off the right edge of the page so the next card peeks in. It scrolls with the buttons, a swipe, a trackpad or the
   arrow keys, and snaps to a card. The right-hand padding lets the last card finish in line with the page margin. */
.awards {
  --bleed: calc((100vw - 100%) / 2);
  display: flex; gap: clamp(20px, 2.6vw, 36px); align-items: flex-start;
  margin-right: calc(var(--bleed) * -1); padding: 4px var(--bleed) 4px 0;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.awards::-webkit-scrollbar { display: none; }
.awards:focus-visible { outline-offset: 6px; }
.award { flex: 1 1 0; min-width: 0; display: grid; gap: 6px; align-content: start; scroll-snap-align: start; }
.award h3 { font-size: var(--t-xl); margin-top: 4px; }
.wins { display: grid; gap: 14px; margin-top: 8px; }
/* one row per award: what was won on the left, its badge on the right */
.win { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: start; font-size: var(--t-sm); line-height: 1.45; color: var(--ink-2); }
.win b { display: block; margin-top: 5px; font-weight: 600; font-size: var(--t-base); line-height: 1.3; color: var(--ink); }
.win .win-tag { margin-right: 0; }
.noms { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 18px; align-items: baseline; margin-top: clamp(26px, 3.4vw, 40px); padding-top: 18px; border-top: 1px solid var(--rule); color: var(--ink-2); max-width: none; }
.noms__label { padding: 2px 8px 1px; border: 1px solid var(--mat-tick); border-radius: 4px; font-family: var(--f-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink); }
/* below this the three no longer fit side by side: fixed-width cards in a row that scrolls, with the next one peeking in */
@media (max-width: 1099px) { .award { flex: 0 0 min(80vw, 350px); } }
@media (max-width: 640px) {
  .awards { --k: 0.84; }
  .work > .story, .awards > .award { flex-basis: min(84%, 380px); }
  .awards-head { flex-wrap: wrap; }
  .round-btn { width: 44px; height: 44px; }
  .noms { grid-template-columns: minmax(0, 1fr); justify-items: start; }
}

/* ---------- Famous faces ---------- */
/* Two looks on purpose: official collaborations sit in a filled panel; unexpected moments are smaller, open stories on hairlines. */
.faces-sec { padding-block: clamp(48px, 6vw, 84px); }
.faces-sec .section__head { margin-bottom: clamp(22px, 3vw, 36px); }
.kind { justify-self: start; display: inline-block; padding: 3px 9px 2px; border-radius: 4px; font-family: var(--f-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; }
.kind--official { background: var(--pink); color: #1A1814; }
.kind--moment { border: 1px solid var(--mat-tick); color: var(--ink); }
.collab { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: clamp(22px, 4vw, 56px); align-items: center; padding: clamp(18px, 2.6vw, 32px); border-radius: 18px; background: var(--paper-2); }   /* the same light grey as the contact box (no cream or peach surfaces) */
.collab__media { display: grid; align-items: start; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 18px); }
.media--card { aspect-ratio: 4 / 5; margin: 0; background: var(--paper); }
.collab__copy { display: grid; gap: 12px; justify-items: start; align-content: center; }
.collab__copy h3 { font-size: var(--t-xl); max-width: 24ch; }
.collab__copy .story__text { color: var(--ink); max-width: 50ch; }
.moments { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 56px); margin-top: clamp(26px, 3.4vw, 40px); }
.moments__head { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.moments__intro { color: var(--ink-2); font-size: var(--t-sm); }
.moment { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 20px; align-items: start; padding-top: 22px; }
.media--thumb { aspect-ratio: 4 / 5; margin: 0; border-radius: 10px; }
.ph--sm { padding: 8px; gap: 6px; border-radius: 10px; font-size: 0.6875rem; line-height: 1.35; }
.ph--sm svg { width: 24px; height: 24px; }
.moment__copy { display: grid; gap: 8px; justify-items: start; align-content: start; }
.moment__copy h3 { font-size: 1.3rem; line-height: 1.15; }
.moment__copy p { color: var(--ink-2); font-size: var(--t-sm); line-height: 1.55; max-width: 46ch; }
.moment__copy .text-link { font-size: var(--t-sm); }
.moment__copy .moment__note { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--note-ink); background: var(--note-bg); padding: 3px 8px; border-radius: 4px; }
@media (max-width: 900px) {
  .collab { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .moments { grid-template-columns: minmax(0, 1fr); }
  .moment + .moment { margin-top: 22px; border-top: 1px solid var(--rule); }
}
@media (max-width: 680px) { .collab { grid-template-columns: minmax(0, 1fr); align-items: start; } }
@media (max-width: 420px) { .moment { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; } }

/* ---------- Founders ---------- */
.founders-sec { padding-block: clamp(36px, 5vw, 64px); background: repeating-linear-gradient(90deg, var(--stripe-a) 0 36px, var(--stripe-b) 36px 72px); }   /* pink stripes (Frank, 13 Oct) */
@media (max-width: 640px) { .founders-sec { background: repeating-linear-gradient(90deg, var(--stripe-a) 0 22px, var(--stripe-b) 22px 44px); } }
.founders { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 88px); align-items: start; }
.founders__copy { display: grid; gap: 18px; }
.founders__copy h2 { font-size: var(--t-2xl); }
.founders__copy p { max-width: 54ch; }
.founders__copy p:not(.eyebrow):not(.lead) { color: var(--ink-2); }
.founders__copy .lead { font-family: var(--f-display); font-size: var(--t-xl); line-height: 1.35; }
.xp { background: var(--paper-2); border-radius: 12px; padding: clamp(20px, 2.6vw, 32px); display: grid; gap: 18px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px 10px; }
/* The li is a still hit area; only the tag inside it moves, so hovering never jitters */
.tags li { --tag-bg: #FEC704; --tag-ink: #1A1814; --rot: -2deg; display: block; padding-block: 4px; }
.tags li:nth-child(4n+2) { --tag-bg: #EE79A3; --rot: 1.5deg; }
.tags li:nth-child(4n+3) { --tag-bg: #81B0DF; --rot: -1deg; }
.tags li:nth-child(4n+4) { --tag-bg: #FFFFFF; --tag-line: rgba(26, 24, 20, 0.22); --rot: 2.5deg; }
.tags li:nth-child(3n+1) { --rot: -2.5deg; }
.tag {
  box-shadow: inset 0 0 0 1.5px var(--tag-line, transparent);
  position: relative; display: block; padding: 8px 15px 8px 29px; font-size: var(--t-sm); font-weight: 500; line-height: 1.3;
  background: var(--tag-bg); color: var(--tag-ink);
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 72%, 0 28%);
  transform: rotate(var(--rot)); transform-origin: 14px 50%;
  transition: transform 500ms var(--spring);
}
.tag::before { content: ""; position: absolute; left: 11px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--paper-2); }
.tags li:hover .tag { transform: rotate(0deg) translateY(-3px); animation: tagswing 700ms var(--ease-out); }
@media (max-width: 900px) { .founders { grid-template-columns: minmax(0, 1fr); } }

/* ---------- How we work (drawn line) ---------- */
.steps-wrap { position: relative; }
.steps__track { position: absolute; left: 0; right: 0; top: 8px; height: 2px; background: var(--rule); }
.steps__fill { display: block; height: 100%; background: var(--ink); transform-origin: left; transform: scaleX(var(--p, 1)); }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 36px); }
.step { position: relative; display: grid; gap: 10px; align-content: start; padding-top: 38px; }
.step__dot { position: absolute; top: 0; left: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); transition: background-color 300ms ease, transform 400ms var(--spring); }
.step:nth-child(1) { --dot: var(--yolk); }
.step:nth-child(2) { --dot: var(--pink); }
.step:nth-child(3) { --dot: var(--blue); }
.step:nth-child(4) { --dot: var(--yolk); }
.step.is-reached .step__dot { background: var(--dot, var(--yolk)); transform: scale(1.25); }
.step__num { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--ink-2); letter-spacing: 0.08em; }
.step h3 { font-size: var(--t-xl); }
.step p { color: var(--ink-2); max-width: 34ch; }
@media (max-width: 900px) {
  .steps__track { left: 8px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .steps__fill { width: 100%; height: 100%; transform-origin: top; transform: scaleY(var(--p, 1)); }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .step { padding-top: 0; padding-left: 44px; }
}

/* ---------- Contact ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.contact__copy { display: grid; gap: 22px; }
.contact__copy h2 { font-size: var(--t-3xl); letter-spacing: -0.015em; line-height: 1.02; }
.contact__copy p:not(.eyebrow):not(.draft-note) { color: var(--ink-2); font-size: var(--t-lg); max-width: 40ch; }
.helps { display: grid; border-top: 1px solid var(--rule); max-width: 44ch; }
.helps li { padding-block: 12px; border-bottom: 1px solid var(--rule); font-size: var(--t-sm); display: flex; gap: 10px; align-items: baseline; }
.helps li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--yolk); flex: none; transform: translateY(-1px); }
.form { background: var(--paper-2); border-radius: 14px; padding: clamp(24px, 3.5vw, 44px); display: grid; gap: 20px; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.field { display: grid; gap: 8px; }
.field label { font-weight: 600; font-size: var(--t-sm); }
.field input, .field textarea { width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: var(--field-bg); border: 1.5px solid var(--rule); border-radius: 8px; padding: 12px 14px; min-height: 48px; transition: border-color 200ms, box-shadow 200ms; }
.field textarea { min-height: 150px; resize: vertical; line-height: 1.5; }
.field input:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--ink); box-shadow: 4px 4px 0 var(--yolk); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-2); opacity: 0.8; }
.field__error { color: var(--error); font-size: var(--t-sm); font-weight: 500; }
.field.has-error input, .field.has-error textarea { border-color: var(--error); animation: nudge 360ms ease; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.form__hint { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--ink-2); }
.form__status { border-radius: 8px; padding: 14px 16px; font-size: var(--t-sm); background: var(--note-bg); color: var(--note-ink); }
.form__status--ok { background: #E3F1E4; color: #1D4A22; }      /* shown only after the form service confirms receipt */
.form__status--error { background: #FBE3E0; color: #7A1E14; }
.form .btn:disabled { opacity: 0.6; cursor: progress; }
@media (max-width: 900px) { .contact { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .form__row { grid-template-columns: minmax(0, 1fr); } .form__foot .btn { width: 100%; } }

/* ---------- Footer ---------- */
.site-footer { border-top: 1.5px solid var(--ink); padding-block: clamp(48px, 7vw, 96px) 40px; overflow: hidden; }
.footer__markbtn { display: block; width: 100%; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; border-radius: 12px; transform-origin: 50% 100%; }
.footer__mark { display: block; width: 100%; height: auto; transform-origin: 50% 100%; }
.footer__mark.is-wobbling { animation: wobble 900ms var(--ease-out); }
/* Arrival squash lives on the button, the hover wobble on the logo inside, so they never fight */
.js-reveal .footer__markbtn:not(.is-in) { opacity: 0; transform: translateY(30%) scale(1, 0.6); }
.js-reveal .footer__markbtn.is-in { animation: squashIn 1000ms var(--spring) both; }
.footer__row { margin-top: clamp(28px, 4vw, 48px); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px 40px; align-items: start; }
.footer__descriptor { font-family: var(--f-display); font-size: var(--t-lg); }
.footer__links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer__links a { text-decoration: none; font-size: var(--t-sm); font-weight: 500; }
.footer__links a:hover { text-decoration: underline; }
.footer__legal { margin-top: 28px; display: grid; gap: 12px; font-size: var(--t-xs); color: var(--ink-2); }


/* ---------- Section labels with a short coloured underline (as in the Tache deck) ---------- */
.eyebrow--line { justify-self: start; display: inline-block; padding-bottom: 6px; border-bottom: 3px solid var(--line, var(--yolk)); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Striped wave divider (after pages 3 and 7 of the Tache deck): wavy on both edges ---------- */
.wave {
  height: 54px;
  background: repeating-linear-gradient(90deg, #FAE1CD 0 26px, #EE79A3 26px 52px, #FAE1CD 52px 78px, #81B0DF 78px 104px, #FAE1CD 104px 130px, #FEC704 130px 156px);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 312 54'%3E%3Cpath d='M0 12Q78 -4 156 12T312 12V42Q234 58 156 42T0 42Z'/%3E%3C/svg%3E") 0 0 / 312px 54px repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 312 54'%3E%3Cpath d='M0 12Q78 -4 156 12T312 12V42Q234 58 156 42T0 42Z'/%3E%3C/svg%3E") 0 0 / 312px 54px repeat-x;
}
.wave + .section { border-top: 0; }

/* ---------- Fixed "Let's talk" tab ---------- */
.talk-tab {
  --ty: -50%;
  position: fixed; right: env(safe-area-inset-right, 0px); top: 58%; z-index: 35;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  width: 46px; padding: 10px 0 16px; border-radius: 14px 0 0 14px;
  background: #1A1814; color: #FEC704; text-decoration: none;
  box-shadow: -4px 6px 0 var(--obj-shadow);
  transform: translate(115%, var(--ty)); visibility: hidden;
  transition: transform 320ms var(--ease-out), visibility 0s linear 320ms;
}
.seal-docked:not(.contact-visible) .talk-tab { transform: translate(0, var(--ty)); visibility: visible; transition: transform 460ms var(--spring) 220ms, visibility 0s; }
.seal-docked:not(.contact-visible) .talk-tab:hover { transform: translate(-4px, var(--ty)); transition: transform 200ms var(--ease-out), visibility 0s; }
.talk-tab:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 14px 0 0 14px; }
.talk-tab__seal { width: 34px; height: 34px; margin-left: -2px; }
.talk-tab__seal path:first-child { fill: #FEC704; }
.talk-tab__arrow { fill: none; stroke: #1A1814; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.talk-tab__label { writing-mode: vertical-rl; -webkit-text-orientation: sideways; text-orientation: sideways; transform: rotate(180deg); font: 600 var(--t-sm) var(--f-body); letter-spacing: 0.02em; white-space: nowrap; }
.seal-ghost { position: fixed; z-index: 45; pointer-events: none; margin: 0; }
.seal-ghost svg { display: block; width: 100%; height: auto; overflow: visible; }
@media (max-width: 1180px) {
  .talk-tab { width: 40px; gap: 8px; }
  .talk-tab__seal { width: 30px; height: 30px; }
}
/* Below 1020px the side gutter is too narrow for an edge tab without covering text,
   so the tab sits in the header beside Menu (where the header button used to be). */
@media (max-width: 1020px) {
  .nav { gap: 8px; }
  .talk-tab {
    position: static; flex-direction: row; gap: 7px;
    width: auto; height: 44px; padding: 0 16px 0 7px; border-radius: 999px;
    box-shadow: none; transform: none; opacity: 0; visibility: hidden;
    transition: opacity 160ms ease, visibility 0s linear 160ms;
  }
  .seal-docked:not(.contact-visible) .talk-tab { transform: none; opacity: 1; visibility: visible; transition: opacity 200ms ease 360ms, visibility 0s; }
  .seal-docked:not(.contact-visible) .talk-tab:hover { transform: none; }
  .talk-tab:focus-visible { border-radius: 999px; }
  .talk-tab__seal { width: 30px; height: 30px; margin: 0; }
  .talk-tab__label { writing-mode: horizontal-tb; transform: none; font-size: 0.875rem; }
}
@media (max-width: 480px) {
  .brand .wordmark { height: 28px; }
  .menu-btn { padding: 0 13px; gap: 8px; }
  .talk-tab { padding: 0 13px 0 6px; gap: 6px; }
  .talk-tab__seal { width: 28px; height: 28px; }
  .talk-tab__label { font-size: 0.8125rem; }
}
@media (max-width: 374px) {
  .menu-btn { width: 44px; padding: 0; justify-content: center; }
  .menu-btn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .talk-tab { background: #FEC704; color: #1A1814; box-shadow: -4px 6px 0 rgba(0,0,0,0.35); }
  :root:not([data-theme="light"]) .talk-tab__seal path:first-child { fill: #1A1814; }
  :root:not([data-theme="light"]) .talk-tab__arrow { stroke: #FEC704; }
  :root:not([data-theme="light"]) .talk-tab:focus-visible { outline-color: #F7F3EA; }
}
:root[data-theme="dark"] .talk-tab { background: #FEC704; color: #1A1814; box-shadow: -4px 6px 0 rgba(0,0,0,0.35); }
:root[data-theme="dark"] .talk-tab__seal path:first-child { fill: #1A1814; }
:root[data-theme="dark"] .talk-tab__arrow { stroke: #FEC704; }
:root[data-theme="dark"] .talk-tab:focus-visible { outline-color: #F7F3EA; }

/* the black swing tag gets a faint edge so it doesn't vanish on the dark mat */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hang__tag path.fi { stroke: rgba(242, 237, 227, 0.4); stroke-width: 1.5; } }
:root[data-theme="dark"] .hang__tag path.fi { stroke: rgba(242, 237, 227, 0.4); stroke-width: 1.5; }

/* ---------- Light / dark switch ---------- */
/* Header light/dark control: a small switch. The moon shows in light mode, the sun in dark mode; the knob slides across. */
.theme-btn { position: relative; flex: none; width: 38px; height: 20px; padding: 0; border-radius: 999px; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; transition: background-color 200ms, border-color 200ms; }
.theme-btn::before { content: ""; position: absolute; inset: -11px -5px; }   /* larger click area than the visible switch */
.theme-btn svg { position: absolute; top: 50%; width: 10px; height: 10px; margin-top: -5px; }
.theme-btn__moon { right: 3.5px; fill: currentColor; }
.theme-btn__sun { left: 3.5px; fill: currentColor; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; opacity: 0; }
.theme-btn__knob { position: absolute; top: 2px; left: 2.5px; width: 13px; height: 13px; border-radius: 50%; background: var(--ink); transition: transform 280ms var(--spring); }
.theme-btn:hover { background: var(--paper-2); }
.theme-btn[aria-pressed="true"] { background: var(--yolk); border-color: var(--yolk); color: #1A1814; }
.theme-btn[aria-pressed="true"] .theme-btn__knob { transform: translateX(17px); background: #1A1814; }
.theme-btn[aria-pressed="true"] .theme-btn__moon { opacity: 0; }
.theme-btn[aria-pressed="true"] .theme-btn__sun { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .theme-btn__knob { transition: none; } }
.theme-row { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 20px; padding: 16px 0 4px; border: 0; border-top: 1px solid var(--rule); background: none; color: var(--ink); font: 600 1rem var(--f-body); text-align: left; cursor: pointer; }
.theme-row__switch { position: relative; flex: none; width: 48px; height: 28px; border-radius: 999px; border: 1.5px solid var(--ink); background: transparent; transition: background-color 200ms; }
.theme-row__switch::after { content: ""; position: absolute; top: 3.5px; left: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); transition: transform 280ms var(--spring); }
.theme-row[aria-pressed="true"] .theme-row__switch { background: var(--yolk); border-color: var(--yolk); }
.theme-row[aria-pressed="true"] .theme-row__switch::after { transform: translateX(19px); background: #1A1814; }
.theme-btn:focus-visible, .theme-row:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (max-width: 1020px) { .nav .theme-btn { display: none; } }

/* ---------- Keyframes ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(0.45em) rotate(2deg); } to { opacity: 1; transform: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { to { opacity: 1; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes drop { from { opacity: 0; transform: translateY(-60px) rotate(-8deg) scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes float { from { transform: translateY(-6px) rotate(-1deg); } to { transform: translateY(8px) rotate(1.2deg); } }
@keyframes swing { from { transform: rotate(-7deg); } to { transform: rotate(6deg); } }
@keyframes swing-s { from { transform: rotate(-4deg); } to { transform: rotate(3deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.6); opacity: 0.5; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes popIn { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }
@keyframes stamp { from { opacity: 0; transform: scale(1.8) rotate(8deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes wobble {
  0% { transform: scale(1, 1); }
  20% { transform: scale(1.04, 0.92); }
  40% { transform: scale(0.97, 1.05); }
  60% { transform: scale(1.02, 0.97); }
  80% { transform: scale(0.995, 1.01); }
  100% { transform: scale(1, 1); }
}
@keyframes squashIn {
  0% { opacity: 0; transform: translateY(40%) scale(1, 0.6); }
  55% { opacity: 1; transform: translateY(0) scale(1.03, 0.94); }
  75% { transform: scale(0.98, 1.03); }
  100% { opacity: 1; transform: none; }
}
@keyframes tagswing { 0% { transform: rotate(var(--rot)); } 35% { transform: rotate(-6deg) translateY(-3px); } 65% { transform: rotate(3deg) translateY(-3px); } 100% { transform: rotate(0) translateY(-3px); } }
@keyframes nudge { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* ---------- Reduced motion: keep the look, drop the movement ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .a-draw { stroke-dashoffset: 0; }
  .a-fade, .a-pop, .a-rise, .a-stamp { opacity: 1; }
  .seal__turn { transform: rotate(-12deg); }
  .pcard { transform: none; filter: none; }
}

/* Linked range identities retain the existing logo tile dimensions. */
.range-logo > a { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; width: 100%; height: 100%; min-width: 0; min-height: 0; color: inherit; text-decoration: none; border-radius: 4px; }
.range-logo > a:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }

.range-logo img { min-width: 0; min-height: 0; max-width: 100%; max-height: 100%; }