/* ---- 00-base.css ---- */
/* Pickld Wholesale site: tokens, type, grid and the few shared primitives.
   Owned by the orchestrator. Section builders read this file and never edit it.
   Brand source: brand-kit/BRAND-GUIDELINES.md (Pickld Black, Pickld Green, Cream; Inter). */

@font-face {
  font-family: "Inter";
  src: url("assets/brand/Inter-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("assets/brand/Inter-Variable-Italic.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("assets/brand/InstrumentSerif-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* colour: use these, never a new hex */
  --ink: #0A0A0A;
  --ink-80: #2A2A27;
  --ink-60: #5B5B55;
  --ink-40: #8C8C84;
  --ink-20: #C8C8BF;
  --ink-10: #E2E2DA;
  --cream: #F4F4F0;
  --paper: #FAFAF7;
  --white: #FFFFFF;
  --green: #16A34A;
  --green-ink: #0F7A36;      /* green for small text on cream (contrast) */
  --green-tint: #DDEFE2;     /* a flat tint for one highlighted bar or band, never a gradient */
  --rule: rgba(10, 10, 10, 0.14);
  --rule-strong: rgba(10, 10, 10, 0.32);
  --rule-on-ink: rgba(244, 244, 240, 0.18);
  --muted-on-ink: rgba(244, 244, 240, 0.64);

  /* shape: one family, nothing rounder */
  --r-s: 12px;
  --r-m: 20px;
  --r-l: 28px;

  /* layout */
  --max: 1440px;
  --gutter: clamp(16px, 3.4vw, 48px);
  --col-gap: clamp(12px, 1.9vw, 28px);
  --sec-pad: clamp(56px, 7vw, 112px);
  --sec-pad-tight: clamp(40px, 5vw, 72px);

  /* type */
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --t-display: clamp(46px, 8.4vw, 124px);
  --t-h2: clamp(32px, 4.4vw, 60px);
  --t-h3: clamp(22px, 2.2vw, 30px);
  --t-lede: clamp(19px, 1.7vw, 24px);
  --t-body: 17px;
  --t-small: 15px;
  --t-caption: 13px;
  --t-label: 12px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.55;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
::selection { background: var(--green); color: var(--white); }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--gutter); top: 12px; z-index: 100; background: var(--ink); color: var(--cream); padding: 12px 16px; border-radius: var(--r-s); }

/* layout */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
@media (max-width: 767px) { .grid { grid-template-columns: minmax(0, 1fr); } .grid > * { grid-column: 1 / -1 !important; } }
.sec { position: relative; padding-block: var(--sec-pad); }
.sec--ink { background: var(--ink); color: var(--cream); }
.sec--tight { padding-block: var(--sec-pad-tight); }
.sec--cream { background: var(--cream); }   /* Ben 14 Nov: the page is white; cream only as an occasional band */
.sec--paper { background: var(--white); }   /* retired: white */
.sec--white { background: var(--white); }
.sec--green { background: var(--green); color: var(--ink); }
.sec + .sec--rule-top { border-top: 1px solid var(--rule); }
.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }
.sec--ink .rule { border-top-color: var(--rule-on-ink); }

/* the section label: "04   The launch machine" beside a hairline */
.sec-label {
  display: flex; align-items: center; gap: 14px;
  font-size: var(--t-label); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  font-variant-numeric: tabular-nums; color: var(--ink-60);
  margin-bottom: clamp(20px, 2.6vw, 36px);
}
.sec-label::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.sec-label b { color: var(--ink); font-weight: 700; }
.sec--ink .sec-label { color: var(--muted-on-ink); }
.sec--ink .sec-label b { color: var(--cream); }
.sec--ink .sec-label::after { background: var(--rule-on-ink); }

/* type */
.display { font-size: var(--t-display); line-height: 0.94; letter-spacing: -0.038em; font-weight: 700; }
.h2 { font-size: var(--t-h2); line-height: 1.0; letter-spacing: -0.03em; font-weight: 700; }
.h3 { font-size: var(--t-h3); line-height: 1.15; letter-spacing: -0.015em; font-weight: 650; }
.lede { font-size: var(--t-lede); line-height: 1.42; letter-spacing: -0.008em; color: var(--ink-80); }
.sec--ink .lede { color: rgba(244, 244, 240, 0.86); }
.small { font-size: var(--t-small); line-height: 1.5; }
.caption { font-size: var(--t-caption); line-height: 1.45; color: var(--ink-60); }
.sec--ink .caption { color: var(--muted-on-ink); }
.label { font-size: var(--t-label); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; }
.num { font-variant-numeric: tabular-nums lining-nums; letter-spacing: -0.02em; }
.serif { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.005em; }
.green { color: var(--green-ink); }
.sec--ink .green { color: var(--green); }
.measure { max-width: 34em; }

/* figures and captions */
figure.work { margin: 0; }
figure.work img { border-radius: var(--r-s); background: var(--ink-10); }
figure.work figcaption { margin-top: 10px; font-size: var(--t-caption); line-height: 1.45; color: var(--ink-60); }
.sec--ink figure.work figcaption { color: var(--muted-on-ink); }
.source { margin-top: 12px; font-size: 12px; line-height: 1.4; color: var(--ink-40); }
.sec--ink .source { color: var(--muted-on-ink); }

/* actions: rectangles, no shadow */
.btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px;
  border-radius: var(--r-s); background: var(--ink); color: var(--cream);
  font-weight: 600; font-size: 16px; letter-spacing: -0.005em; text-decoration: none; border: 1px solid var(--ink);
}
.btn:hover { background: var(--green); border-color: var(--green); color: var(--white); text-decoration: none; }
.btn--line { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn--line:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.sec--ink .btn { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.sec--ink .btn:hover { background: var(--green); border-color: var(--green); color: var(--white); }
.sec--ink .btn--line { background: transparent; color: var(--cream); border-color: var(--rule-on-ink); }

/* charts: shared defaults for inline SVG */
.chart text { font-family: var(--font); font-variant-numeric: tabular-nums; }
.chart .axis { stroke: var(--rule-strong); stroke-width: 1; }
.chart .grid-line { stroke: var(--rule); stroke-width: 1; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* the one swipe rail, for phones (launch, work, range). No arrows, no autoplay; the next item shows at the edge. */
.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scroll-padding-inline: var(--gutter); margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; min-width: 0; }
@media (min-width: 768px) { .rail--phone { display: contents; } }

/* ---- system primitives (finishing pass, 14 Nov): one icon, one card, one live state, one section head, one point.
   Sections may still scope their own variants; these are the defaults every section starts from. ---- */
:root { --ink-raised: #151513; }
.ic { flex: none; width: 22px; height: 22px; color: var(--green); }
.sec--green .ic { color: var(--ink); }
.live { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--green-ink); }
.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.sec--ink .live, .on-ink .live { color: var(--green); }
.card { background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-s); padding: 20px 22px; }
.sec--ink .card, .on-ink .card { background: var(--ink-raised); border-color: var(--rule-on-ink); }
/* section head: H2 in columns 1 to 7, one lede in 8 to 12, baselines level */
.head { row-gap: 14px; align-items: end; margin-bottom: clamp(28px, 3.6vw, 52px); }
.head > .h2 { grid-column: 1 / span 7; }
.head > .lede { grid-column: 8 / -1; font-size: clamp(17px, 1.4vw, 20px); }
/* a point: green icon, bold line, small line (FANG deck slides 4 and 15) */
.pt { display: flex; gap: 14px; align-items: flex-start; min-width: 0; }
.pt > .ic { margin-top: 2px; }
.pt-t { font-size: 18px; font-weight: 650; letter-spacing: -0.014em; line-height: 1.25; }
.pt-l { margin-top: 4px; font-size: var(--t-small); line-height: 1.5; color: var(--ink-60); }
.sec--ink .pt-l, .on-ink .pt-l { color: var(--muted-on-ink); }
.sec--green .pt-l { color: var(--ink); }
/* work captions: what it is in ink, then brand and month */
figure.work figcaption b { color: var(--ink); font-weight: 600; }
/* below 1024px a head stacks: the H2 takes the row, the lede sits under it at a readable measure */
@media (max-width: 1023px) {
  .head > .h2, .head > .lede,
  #model .m-head > .m-title, #model .m-head > .m-lede,
  #systems .sy-head > .sy-title, #systems .sy-head > .sy-lede,
  #launch .l-head > .l-title, #launch .l-head > .l-lede { grid-column: 1 / -1; max-width: 34em; }
  .head > .h2, #model .m-head > .m-title, #systems .sy-head > .sy-title, #launch .l-head > .l-title { max-width: none; }
}

/* ---- 01-top.css ---- */
/* 01 top: masthead and hero, on the black field. Words left, the ecosystem in three layers right
   (brands in, Pickld Wholesale and its three engines, every channel out). Every selector scoped under #top. */

#top { padding-top: 0; padding-bottom: clamp(48px, 5.4vw, 84px); }

/* masthead: not sticky, a hairline under it */
#top .tp-mast { position: relative; z-index: 5; border-bottom: 1px solid var(--rule-on-ink); }
#top .tp-mast-in { display: flex; align-items: center; gap: 28px; min-height: 76px; }
#top .tp-logo { display: block; flex: none; padding: 12px 0; text-decoration: none; }
#top .tp-logo img { width: auto; height: 30px; }
#top .tp-nav { margin-left: auto; }
#top .tp-nav ul { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
#top .tp-nav a, #top .tp-talk {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  font-size: 15px; font-weight: 500; letter-spacing: -0.005em; text-decoration: none; color: rgba(244, 244, 240, 0.86);
}
#top .tp-nav a:hover, #top .tp-talk:hover { text-decoration: underline; text-decoration-thickness: 1px; color: var(--white); }
#top .tp-talk { font-weight: 650; color: var(--cream); margin-left: 10px; padding: 0 0 0 22px; border-left: 1px solid var(--rule-on-ink); min-height: 28px; }
#top .tp-menu { display: none; }

/* hero */
#top .tp-hero { padding-top: clamp(36px, 5vw, 76px); align-items: center; row-gap: 44px; }
#top .tp-words { grid-column: 1 / span 6; }
#top .tp-words .sec-label { margin-bottom: clamp(22px, 2.4vw, 32px); }
#top .tp-h1 { font-size: clamp(40px, 4.6vw, 70px); line-height: 0.96; letter-spacing: -0.042em; font-weight: 750; margin-left: -0.04em; max-width: 9.6em; }
#top .tp-h1 .serif { font-size: 1.1em; letter-spacing: -0.02em; line-height: 0.8; color: var(--green); }
#top .tp-lede { margin-top: clamp(22px, 2.2vw, 30px); font-size: clamp(18px, 1.5vw, 21px); max-width: 25em; }
#top .tp-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 30px; margin-top: clamp(26px, 2.6vw, 36px); }
#top .tp-alt { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; font-size: 16px; }
#top .btn { background: var(--green); border-color: var(--green); color: var(--white); }
#top .btn:hover { background: var(--cream); border-color: var(--cream); color: var(--ink); }

/* the ecosystem */
#top .tp-eco { grid-column: 7 / -1; padding-left: clamp(0px, 2vw, 32px); display: grid; grid-template-columns: minmax(0, 1fr); }
#top .tp-k { font-size: var(--t-label); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted-on-ink); text-align: center; margin-bottom: 10px; }
#top .tp-k--out { margin: 12px 0 0; }
#top .tp-eco b { display: block; font-weight: 650; letter-spacing: -0.012em; line-height: 1.25; color: var(--cream); }
#top .tp-eco p span, #top .tp-eng span { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.4; color: var(--muted-on-ink); }

#top .tp-in {
  justify-self: center; display: flex; align-items: center; gap: 12px; padding: 12px 20px 12px 16px;
  background: var(--ink-raised); border: 1px solid var(--rule-on-ink); border-radius: var(--r-s); font-size: 16px;
}
/* the way in: a green line with a head */
#top .tp-flow { position: relative; justify-self: center; width: 1px; height: 30px; background: var(--green); }
#top .tp-flow::after {
  content: ""; position: absolute; left: -4px; bottom: 1px; width: 9px; height: 9px;
  border-right: 1.5px solid var(--green); border-bottom: 1.5px solid var(--green); transform: rotate(45deg);
}

#top .tp-flow--out { display: none; }

#top .tp-core { background: var(--ink-raised); border: 1px solid rgba(244, 244, 240, 0.42); border-radius: var(--r-m); padding: 20px 22px 4px; }
#top .tp-core-h { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 18px; }
#top .tp-core-h img { height: 26px; width: auto; }
#top .tp-eng { margin: 0; }
#top .tp-eng li { display: flex; align-items: flex-start; gap: 12px; padding: 13px 0; border-top: 1px solid var(--rule-on-ink); font-size: 16px; }
#top .tp-eng .ic { margin-top: 1px; }

/* channels: each hangs off the panel on a thin line that ends in a green node */
#top .tp-out { margin: 26px 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
#top .tp-out li {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px 12px;
  background: var(--ink-raised); border: 1px solid var(--rule-on-ink); border-radius: var(--r-s);
  font-size: 13.5px; font-weight: 600; line-height: 1.25; letter-spacing: -0.005em; text-align: center;
}
#top .tp-out li::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 1px; height: 26px; background: rgba(244, 244, 240, 0.34); }
#top .tp-out li::after { content: ""; position: absolute; left: 50%; top: -5px; width: 9px; height: 9px; margin-left: -4px; border-radius: 50%; background: var(--green); }

@media (min-width: 1100px) {
  /* on a wide screen the three engines sit side by side */
  #top .tp-eng { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule-on-ink); }
  #top .tp-eng li { flex-direction: column; gap: 10px; border-top: 0; padding: 16px 14px 16px 0; font-size: 15.5px; }
  #top .tp-eng li + li { padding-left: 14px; border-left: 1px solid var(--rule-on-ink); }
  #top .tp-eng span { font-size: 13px; }
}

@media (max-width: 1099px) {
  #top .tp-nav, #top .tp-talk { display: none; }
  #top .tp-menu { display: block; margin-left: auto; }
  #top .tp-menu summary {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px 0 14px; cursor: pointer; list-style: none;
    font-size: 16px; font-weight: 650;
  }
  #top .tp-menu summary::-webkit-details-marker { display: none; }
  #top .tp-menu summary::after { content: "+"; margin-left: 10px; font-weight: 400; font-size: 22px; line-height: 1; }
  #top .tp-menu[open] summary::after { content: "\2212"; }
  #top .tp-menu nav {
    position: absolute; left: 0; right: 0; top: 100%; z-index: 20; padding: 6px var(--gutter) 18px;
    background: var(--ink-raised); border-top: 1px solid var(--rule-on-ink); border-bottom: 1px solid var(--rule-on-ink);
  }
  #top .tp-menu ul { margin: 0; padding: 0; list-style: none; }
  #top .tp-menu li + li { border-top: 1px solid var(--rule-on-ink); }
  #top .tp-menu a { display: flex; align-items: center; min-height: 52px; padding: 0 4px; font-size: 18px; font-weight: 550; text-decoration: none; }

  #top .tp-words, #top .tp-eco { grid-column: 1 / -1; }
  #top .tp-h1 { font-size: clamp(40px, 7.4vw, 64px); max-width: 10em; }
  #top .tp-eco { width: 100%; padding-left: 0; }
  #top .tp-k { text-align: left; }
  #top .tp-in { justify-self: start; }
  #top .tp-flow { justify-self: start; margin-left: 27px; }
}

@media (max-width: 767px) {
  #top { padding-bottom: 48px; }
  #top .tp-mast-in { min-height: 64px; }
  #top .tp-logo img { height: 26px; }
  #top .tp-hero { row-gap: 36px; }
  #top .tp-h1 { font-size: clamp(38px, 10.8vw, 46px); letter-spacing: -0.04em; }
  #top .tp-acts .btn { width: 100%; justify-content: space-between; }
  #top .tp-core { padding: 18px 18px 2px; }
  #top .tp-core-h img { height: 22px; }
  /* channels: a short ruled list on one spine */
  #top .tp-out { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #top .tp-out li { flex-direction: row; justify-content: flex-start; gap: 10px; padding: 12px 14px; text-align: left; font-size: 15px; min-height: 48px; }
  #top .tp-out li::before, #top .tp-out li::after { content: none; }
  #top .tp-flow--out { display: block; }
  #top .tp-out { margin-top: 0; }
  #top .tp-out li:last-child { grid-column: 1 / -1; }
}

/* ---- 02-model.css ---- */
/* 05 model: the network. A black hub with the lockup, five live channel cards on thin lines,
   the brand coming in from the top. After the FANG deck's "who would sell it" slide, made for the web. */

#model .m-head { row-gap: 16px; align-items: end; margin-bottom: clamp(32px, 4.4vw, 60px); }
#model .m-title { grid-column: 1 / span 7; max-width: 14em; }
#model .m-lede { grid-column: 8 / -1; font-size: clamp(17px, 1.35vw, 19px); }

#model .ic { flex: none; width: 22px; height: 22px; color: var(--green); }
#model .ic--s { width: 20px; height: 20px; }

#model .live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--green-ink);
}
#model .live i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }

/* ---- the network: phone first, a spine down the left ---- */
#model .m-net { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; }
#model .m-wires { display: none; }

#model .m-brand {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px;
  background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-s);
  position: relative; margin-bottom: 48px;
}
#model .m-brand::after {           /* the way in: a green line with a head */
  content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 36px; background: var(--green);
}
#model .m-brand::before {
  content: ""; position: absolute; left: 50%; top: calc(100% + 24px); width: 9px; height: 9px; margin-left: -4px;
  border-right: 1.5px solid var(--green); border-bottom: 1.5px solid var(--green); transform: rotate(45deg); z-index: 3;
}
#model .m-ct { font-size: 17px; font-weight: 650; letter-spacing: -0.012em; line-height: 1.25; }
#model .m-line { font-size: var(--t-small); line-height: 1.45; color: var(--ink-60); }
#model .m-brand .m-line { font-size: 14px; }

#model .m-hub {
  position: relative; z-index: 2; width: 208px; height: 208px; border-radius: 50%; background: var(--ink); color: var(--cream);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
}
#model .m-hub::before { content: ""; position: absolute; inset: -12px; border: 1px solid var(--ink-20); border-radius: 50%; }
#model .m-hub img { width: 140px; }
#model .m-hubline { font-size: 11px; letter-spacing: 0.02em; color: var(--muted-on-ink); }

#model .m-cards {
  justify-self: stretch; position: relative; display: grid; gap: 12px; margin: 0; padding: 40px 0 0 22px;
}
#model .m-cards::before {          /* the spine */
  content: ""; position: absolute; left: 0; top: 0; bottom: 60px; width: 1px; background: var(--ink-20);
}
#model .m-cards::after {           /* hub to spine */
  content: ""; position: absolute; left: 0; top: 0; width: 50%; height: 1px; background: var(--ink-20);
}
#model .m-card {
  position: relative; z-index: 1; background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-s);
  padding: 18px 20px 20px;
}
#model .m-card::before { content: ""; position: absolute; right: 100%; top: 50%; width: 22px; height: 1px; background: var(--ink-20); margin-right: 1px; }
#model .m-ch { display: flex; align-items: center; gap: 10px; }
#model .m-big {
  margin-top: 10px; font-size: clamp(24px, 2.1vw, 28px); line-height: 1.1; font-weight: 700; letter-spacing: -0.028em; color: var(--green-ink);
}
#model .m-card .m-line { margin-top: 6px; }

/* ---- desktop: the hub in the middle, cards around it, wires drawn by 05-model.js ---- */
@media (min-width: 960px) {
  #model .m-net {
    grid-template-columns: minmax(0, 1fr) 248px minmax(0, 1fr);
    grid-template-rows: auto 124px 124px auto;
    column-gap: clamp(56px, 8vw, 120px); row-gap: 24px; justify-items: stretch; align-items: center;
  }
  #model .m-wires { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 0; }
  #model .m-wires line { stroke: var(--ink-20); stroke-width: 1; }
  #model .m-wires .w-in { stroke: var(--green); }
  #model .m-wires path { fill: none; stroke: var(--green); stroke-width: 1.5; }
  #model .m-wires circle { fill: var(--white); stroke: var(--ink-20); stroke-width: 1; }

  #model .m-brand { grid-column: 2; grid-row: 1; justify-self: center; margin-bottom: 22px; z-index: 1; }
  #model .m-brand::before, #model .m-brand::after { content: none; }
  #model .m-hub { grid-column: 2; grid-row: 2 / span 2; width: 248px; height: 248px; justify-self: center; }
  #model .m-hub img { width: 152px; }
  #model .m-hubline { font-size: 12px; }

  #model .m-cards { display: contents; }
  #model .m-cards::before, #model .m-cards::after, #model .m-card::before { content: none; }
  #model .m-card { padding: 22px 24px 24px; }
  #model .m-card--store { grid-column: 1; grid-row: 1 / span 2; }
  #model .m-card--clubs { grid-column: 1; grid-row: 3 / span 2; }
  #model .m-card--trade { grid-column: 3; grid-row: 1 / span 2; }
  #model .m-card--venues { grid-column: 3; grid-row: 3 / span 2; }
  #model .m-card--partners { grid-column: 2; grid-row: 4; justify-self: center; width: 340px; margin-inline: -46px; margin-top: 12px; }
}

/* ---- what every stockist gets ---- */
#model .m-gets { margin-top: clamp(40px, 5vw, 72px); padding-top: 24px; border-top: 1px solid var(--rule); }
#model .m-gh { font-size: 17px; font-weight: 650; letter-spacing: -0.012em; }
#model .m-gl { margin-top: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
#model .m-gl li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--t-small); line-height: 1.4; }
#model .m-gl .ic { margin-top: 1px; }
@media (min-width: 960px) { #model .m-gl { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; } }

/* ---- what it means for a brand ---- */
#model .m-why { margin-top: clamp(32px, 4vw, 56px); padding-top: 24px; border-top: 1px solid var(--rule); display: grid; gap: 22px; }
#model .m-w { display: flex; gap: 14px; align-items: flex-start; }
#model .m-w .ic { margin-top: 2px; }
#model .m-wt { font-size: 18px; font-weight: 650; letter-spacing: -0.014em; line-height: 1.25; }
#model .m-wp { margin-top: 4px; font-size: var(--t-small); line-height: 1.5; color: var(--ink-60); max-width: 30em; }
@media (min-width: 768px) { #model .m-why { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--col-gap); } }

/* tablet: the five cards in two columns under the hub, one line down from it */
@media (min-width: 640px) and (max-width: 959px) {
  #model .m-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-left: 0; }
  #model .m-cards::before { left: 50%; bottom: auto; height: 40px; }
  #model .m-cards::after, #model .m-card::before { content: none; }
  #model .m-card:last-child { grid-column: 1 / -1; }
}

/* these two sections carry their own dot element; switch the shared one off */
#model .live::before { content: none; }

/* ---- 03-systems.css ---- */
/* 06 systems, on the black field: what comes in, the PickldOps panel and its modules on one live record,
   and who signs in. After the FANG deck's systems slide. No dates, no how. */

#systems .sy-head { row-gap: 16px; align-items: end; margin-bottom: clamp(28px, 4vw, 52px); }
#systems .sy-title { grid-column: 1 / span 7; max-width: 13em; }
#systems .sy-lede { grid-column: 8 / -1; font-size: clamp(17px, 1.35vw, 19px); }

#systems .ic { flex: none; width: 22px; height: 22px; color: var(--green); }
#systems .ic--l { width: 28px; height: 28px; }
#systems .live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--green);
}
#systems .live i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }

#systems .sy-k { font-size: var(--t-label); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted-on-ink); margin-bottom: 12px; }
#systems .sy-mt { font-size: 16px; font-weight: 650; letter-spacing: -0.01em; line-height: 1.25; color: var(--cream); }
#systems .sy-mp { margin-top: 2px; font-size: 14px; line-height: 1.4; color: var(--muted-on-ink); }

/* ---- the map: phone first, top to bottom ---- */
#systems .sy-map { display: grid; grid-template-columns: minmax(0, 1fr); }

#systems .sy-inl, #systems .sy-pl { display: grid; gap: 6px; margin: 0; }
#systems .sy-inl li, #systems .sy-p, #systems .sy-o {
  display: flex; align-items: center; gap: 12px;
  background: #151513; border: 1px solid var(--rule-on-ink); border-radius: var(--r-s);
}
#systems .sy-inl li { padding: 10px 16px; font-size: 15px; font-weight: 600; letter-spacing: -0.008em; line-height: 1.3; }

/* connectors: on phones one arrow, turned to point down */
#systems .sy-link { display: flex; justify-content: center; padding: 2px 0; }
#systems .sy-arr { width: 40px; height: 12px; transform: rotate(90deg); margin: 10px 0; }
#systems .sy-arr path { fill: none; stroke: var(--green); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
#systems .sy-link .sy-arr + .sy-arr { display: none; }

/* the panel: lifted off the black field by a cream edge */
#systems .sy-panel { background: #151513; border: 1px solid rgba(244, 244, 240, 0.42); border-radius: var(--r-m); padding: 20px 20px 0; }
#systems .sy-ph { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; }
#systems .sy-pt { font-size: 24px; font-weight: 700; letter-spacing: -0.028em; line-height: 1.1; }
#systems .sy-ps { margin-top: 3px; font-size: 14px; color: var(--muted-on-ink); }
#systems .sy-mods { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; }
#systems .sy-m { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--rule-on-ink); }
#systems .sy-m .ic { margin-top: 1px; }
#systems .sy-core {
  display: flex; align-items: flex-start; gap: 12px; margin: 0 -20px; padding: 16px 20px 18px;
  border-top: 1px solid var(--green); border-radius: 0 0 var(--r-m) var(--r-m);
  font-size: 14px; line-height: 1.45; color: var(--muted-on-ink);
}
#systems .sy-core b { color: var(--cream); font-weight: 650; }

#systems .sy-pl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#systems .sy-p { position: relative; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 14px 14px; }
#systems .sy-p .live { position: absolute; top: 16px; right: 14px; }
#systems .sy-out .sy-k { margin-top: 0; }

#systems .sy-outs { margin-top: clamp(20px, 2.4vw, 32px); padding-top: clamp(20px, 2.4vw, 32px); border-top: 1px solid var(--rule-on-ink); display: grid; gap: 12px; }
#systems .sy-o { align-items: flex-start; background: none; border: 0; border-radius: 0; }
#systems .sy-o .ic { margin-top: 1px; }

@media (max-width: 479px) { #systems .sy-m .sy-mp { display: none; } #systems .sy-m { padding: 11px 0; align-items: center; } }

/* ---- desktop: in, panel, out, left to right ---- */
@media (min-width: 1000px) {
  #systems .sy-map { grid-template-columns: minmax(0, 0.62fr) 56px minmax(0, 1.72fr) 56px minmax(0, 1fr); align-items: stretch; }
  #systems .sy-col { display: flex; flex-direction: column; }
  #systems .sy-inl, #systems .sy-pl { flex: 1; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  #systems .sy-inl { grid-auto-rows: 1fr; }
  #systems .sy-pl { grid-auto-rows: 1fr; }
  #systems .sy-inl li { flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; padding: 16px 18px; font-size: 16px; }
  #systems .sy-p { flex-direction: row; align-items: center; gap: 14px; padding: 14px 18px; }
  #systems .sy-p .ic { margin-top: 1px; }
  #systems .sy-p .live { position: static; }

  /* arrows line up with the cards they serve: same rows as the lists, under the column label */
  #systems .sy-link { display: grid; grid-auto-rows: 1fr; gap: 10px; padding: 26px 0 0; justify-items: center; align-items: center; }
  #systems .sy-arr { width: 44px; transform: none; margin: 0; }
  #systems .sy-link .sy-arr + .sy-arr { display: block; }

  #systems .sy-panel { padding: 26px 28px 0; }
  #systems .sy-ph { padding-bottom: 22px; }
  #systems .sy-pt { font-size: 28px; }
  /* the two module columns hang off one green spine that runs down into the live record */
  #systems .sy-mods { position: relative; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0; }
  #systems .sy-mods::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--green); }
  #systems .sy-m { position: relative; }
  #systems .sy-m:nth-child(odd) { padding-right: 24px; }
  #systems .sy-m:nth-child(even) { padding-left: 28px; }
  #systems .sy-m:nth-child(even)::before {
    content: ""; position: absolute; left: -3px; top: -4px; width: 7px; height: 7px; border-radius: 50%;
    background: #151513; border: 1px solid var(--green);
  }
  #systems .sy-m { padding-block: 14px; }
  #systems .sy-core { margin: 0 -28px; padding: 18px 28px 20px; font-size: 15px; }

  #systems .sy-outs { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--col-gap); }
}

#systems .live::before { content: none; }

/* ---- 04-launch.css ---- */
/* 03 launch: everything one launch puts out. A channel map (FANG deck slides 5 and 9) wired into one panel of real pieces. */
#launch .ic { width: 22px; height: 22px; color: var(--green); flex: none; }
#launch .l-head { row-gap: 14px; margin-bottom: clamp(28px, 3.4vw, 48px); align-items: end; }
#launch .l-title { grid-column: 1 / span 7; }
#launch .l-lede { grid-column: 8 / -1; font-size: clamp(17px, 1.4vw, 20px); }

/* channel cards: on phones one ruled list per side of the panel, from 768px five wired cards */
#launch .l-chs { margin: 0; border: 1px solid var(--rule); border-radius: var(--r-s); padding: 2px 16px; }
#launch .l-ch { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 13px 0; min-width: 0; }
#launch .l-ch + .l-ch { border-top: 1px solid var(--rule); }
#launch .l-ch .ic { grid-row: 1 / span 2; margin-top: 1px; }
#launch .l-ch-t { font-size: 16px; line-height: 1.3; letter-spacing: -0.01em; }
#launch .l-ch-t b { font-weight: 700; }
#launch .l-ch-l { grid-column: 2; font-size: 15px; line-height: 1.4; color: var(--ink-60); }

/* the panel of real pieces */
#launch .l-panel { background: var(--ink); color: var(--cream); border-radius: var(--r-m); padding: 20px var(--gutter) 22px; margin: 10px calc(-1 * var(--gutter)); border-radius: 0; }
#launch .l-panel-h { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--rule-on-ink); }
#launch .l-panel-t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#launch .l-panel-t b { font-size: clamp(19px, 2vw, 26px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
#launch .l-live { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--green); }
#launch .l-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
#launch .l-panel-d { font-size: var(--t-small); color: var(--muted-on-ink); }
#launch .l-panel-n { display: flex; align-items: center; gap: 12px; flex: none; max-width: 46%; }
#launch .l-panel-n b { font-size: clamp(52px, 6vw, 84px); line-height: 0.82; font-weight: 800; letter-spacing: -0.05em; color: var(--green); }
#launch .l-panel-n span { font-size: var(--t-small); line-height: 1.3; color: rgba(244, 244, 240, 0.86); max-width: 8.5em; }

#launch .l-pieces { margin-top: 18px; grid-auto-columns: max-content; gap: 12px; align-items: start; }
#launch .l-pc { margin: 0; min-width: 0; }
#launch .l-pc img { height: 300px; width: auto; max-width: none; border-radius: var(--r-s); object-fit: cover; }
#launch .l-pc--cover img { width: 320px; object-position: 62% 50%; }
#launch .l-pc--mail img { width: 190px; object-position: top; }
#launch .l-cutbox { position: relative; display: block; height: 300px; width: 190px; background: var(--white); border-radius: var(--r-s); }
#launch .l-cutbox img { position: absolute; inset: 5% 0; width: 100% !important; height: 90% !important; border-radius: 0; object-fit: contain; }
#launch .l-pc figcaption { margin-top: 10px; font-size: var(--t-caption); line-height: 1.4; color: var(--muted-on-ink); }

#launch .l-src { margin-top: 14px; }

/* the other launches, dates only */
#launch .l-cad { margin-top: clamp(36px, 4.5vw, 64px); }
#launch .l-cad-t { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 19px; letter-spacing: -0.015em; }
#launch .l-cad-t b { font-weight: 700; }
#launch .l-cad-t span { font-size: var(--t-small); color: var(--ink-60); letter-spacing: 0; flex-basis: 100%; }
#launch .l-cad-list { list-style: none; margin-top: 18px; margin-bottom: 0; grid-auto-columns: 132px; gap: 0; padding-inline: var(--gutter); }
#launch .l-cad-list li { position: relative; border-top: 1px solid var(--rule-strong); padding: 16px 12px 0 0; font-size: 14px; line-height: 1.35; color: var(--ink-80); }
#launch .l-cad-list li::before { content: ""; position: absolute; left: 0; top: -4px; width: 7px; height: 7px; background: var(--ink); }
#launch .l-cad-list .num { display: block; font-weight: 700; color: var(--ink); font-size: 15px; margin-bottom: 2px; }
#launch .l-cad-list .l-cad-hi::before { background: var(--green); }
#launch .l-cad-list .l-cad-hi .num { color: var(--green-ink); }

@media (max-width: 767px) {
  #launch .l-title, #launch .l-lede { grid-column: 1 / -1; }
  #launch .l-pc img, #launch .l-cutbox { height: 250px; }
  #launch .l-pc--cover img { width: 290px; }
  #launch .l-pc--mail img, #launch .l-cutbox { width: 160px; }
  #launch .l-ch { padding: 11px 0; }
  #launch .l-cad-t span { display: none; }
}

@media (min-width: 768px) {
  #launch .l-chs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 16px); border: 0; border-radius: 0; padding: 0; }
  #launch .l-ch, #launch .l-ch + .l-ch { background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-s); padding: 16px 16px 18px; column-gap: 10px; row-gap: 4px; align-items: center; }
  #launch .l-ch .ic { grid-row: 1; margin: 0; }
  #launch .l-ch-l { grid-column: 1 / -1; font-size: 14.5px; }
  /* the wires: each card is joined to the panel by a thin line that ends in a green node */
  #launch .l-ch::before { content: ""; position: absolute; left: 50%; width: 1px; height: 28px; background: var(--rule-strong); }
  #launch .l-ch::after { content: ""; position: absolute; left: 50%; width: 9px; height: 9px; margin-left: -4px; border-radius: 50%; background: var(--green); }
  #launch .l-chs--top .l-ch::before { top: 100%; }
  #launch .l-chs--top .l-ch::after { top: calc(100% + 24px); }
  #launch .l-chs--bot .l-ch::before { bottom: 100%; }
  #launch .l-chs--bot .l-ch::after { bottom: calc(100% + 24px); }
  #launch .l-panel { margin: 28px 0; border-radius: var(--r-m); padding: clamp(20px, 2.2vw, 30px); }
  #launch .l-pieces { display: grid; overflow: visible; margin-inline: 0; padding-inline: 0; grid-auto-flow: row; margin-top: 22px;
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 2.2fr) minmax(0, 1.5fr) minmax(0, 3.1fr) minmax(0, 2.2fr); grid-template-rows: auto auto; gap: 14px; align-items: stretch; }
  #launch .l-pc { display: flex; flex-direction: column; }
  #launch .l-pc img { width: 100%; height: auto; }
  #launch .l-pc--cover { grid-column: 1 / span 3; grid-row: 1; }
  #launch .l-pc--cover img { width: 100%; aspect-ratio: 2.1; }
  #launch .l-pc--ad { grid-column: 1; grid-row: 2; }
  #launch .l-pc--ad img { aspect-ratio: 4 / 5; }
  #launch .l-pc--cut { grid-column: 2 / span 2; grid-row: 2; }
  #launch .l-cutbox { width: 100%; height: 0; flex: 1 1 0; min-height: 0; }
  #launch .l-pc--story { grid-column: 4; grid-row: 1 / span 2; }
  #launch .l-pc--mail { grid-column: 5; grid-row: 1 / span 2; }
  #launch .l-pc--story img, #launch .l-pc--mail img { height: 0; flex: 1 1 0; min-height: 0; width: 100%; }
  #launch .l-cad-list { display: grid; overflow: visible; margin-inline: 0; padding-inline: 0; grid-auto-flow: row; grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 22px; }
  #launch .l-cad-list li { padding-bottom: 2px; }
}
@media (min-width: 1100px) {
  #launch .l-cad-list { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  #launch .l-cad-list li { font-size: 13.5px; }
}

/* tablet: five narrow cards, so each stacks icon, title, line and they all start level */
@media (min-width: 768px) and (max-width: 1099px) {
  #launch .l-ch, #launch .l-ch + .l-ch { grid-template-columns: minmax(0, 1fr); row-gap: 6px; align-items: start; align-content: start; padding: 14px 12px 16px; }
  #launch .l-ch .ic { grid-row: auto; }
  #launch .l-ch-l { grid-column: 1; font-size: 14px; }
  #launch .l-ch-t { font-size: 15px; }
  #launch .l-pc--story img { object-position: 8% 50%; }
}

/* ---- 05-numbers.css ---- */
/* 02 numbers: growth as an index (never raw volume), with three icon-led figures. FANG deck slide 14 language. */
#numbers .ic { width: 22px; height: 22px; color: var(--green); flex: none; }
#numbers .ic--s { width: 16px; height: 16px; }
#numbers .nm-top { row-gap: 32px; align-items: stretch; }
#numbers .nm-lead { grid-column: 1 / span 5; grid-row: 1; }
#numbers .nm-h2 { max-width: 9.5em; }
#numbers .nm-lede { margin-top: 18px; max-width: 24em; font-size: clamp(17px, 1.4vw, 20px); }

/* the chart card */
#numbers .nm-card { background: #151513; border: 1px solid var(--rule-on-ink); border-radius: var(--r-m); padding: clamp(20px, 2.2vw, 32px); }
#numbers .nm-chart { grid-column: 7 / -1; grid-row: 1 / span 2; display: flex; flex-direction: column; }
#numbers .nm-card-h { display: flex; gap: 12px; align-items: flex-start; }
#numbers .nm-card-h .ic { margin-top: 2px; }
#numbers .nm-card-h b { display: block; font-size: 19px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; }
#numbers .nm-sub { display: block; margin-top: 2px; font-size: var(--t-small); color: var(--muted-on-ink); }
#numbers .nm-plot { margin-top: 26px; }
#numbers .nm-bars { display: grid; grid-template-columns: repeat(5, 1fr); column-gap: clamp(10px, 2vw, 28px); height: clamp(220px, 22vw, 300px); align-items: end; border-bottom: 1px solid var(--rule-on-ink); padding-inline: clamp(0px, 1.5vw, 20px); }
#numbers .nm-col { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; min-width: 0; }
#numbers .nm-x { font-size: clamp(16px, 1.5vw, 20px); font-weight: 700; margin-bottom: 8px; color: var(--cream); }
#numbers .nm-bar { display: block; width: 100%; max-width: 92px; background: var(--green); opacity: 0.38; border-radius: 6px 6px 0 0; flex: none; }
#numbers .nm-col { --room: 40px; }
#numbers .nm-bar { max-height: calc(100% - var(--room)); }
#numbers .nm-col--hi .nm-bar { opacity: 1; }
#numbers .nm-col--hi .nm-x { color: var(--green); font-size: clamp(26px, 2.8vw, 38px); font-weight: 800; letter-spacing: -0.035em; line-height: 1; margin-bottom: 10px; }
#numbers .nm-col--hi { --room: 52px; }
#numbers .nm-months, #numbers .nm-rugrow { display: grid; grid-template-columns: repeat(5, 1fr); column-gap: clamp(10px, 2vw, 28px); padding-inline: clamp(0px, 1.5vw, 20px); text-align: center; }
#numbers .nm-months { margin-top: 10px; font-size: var(--t-small); font-weight: 500; color: rgba(244, 244, 240, 0.86); }
#numbers .nm-rug { margin-top: 14px; }
#numbers .nm-rugc { display: flex; justify-content: center; gap: 5px; height: 16px; }
#numbers .nm-rugc i { display: block; width: 3px; height: 16px; background: var(--green); border-radius: 1px; }
#numbers .nm-rugcap { display: flex; gap: 8px; align-items: flex-start; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule-on-ink); font-size: var(--t-small); line-height: 1.45; color: rgba(244, 244, 240, 0.86); }
#numbers .nm-rugcap .ic { margin-top: 3px; }
#numbers .nm-chart .source { margin-top: auto; padding-top: 16px; }

/* the three figures */
#numbers .nm-figs { grid-column: 1 / span 5; grid-row: 2; align-self: end; }
#numbers .nm-fig { display: grid; grid-template-columns: 22px minmax(0, auto) minmax(0, 1fr); column-gap: 16px; align-items: center; padding: 18px 0; border-top: 1px solid var(--rule-on-ink); }
#numbers .nm-fig:last-child { border-bottom: 1px solid var(--rule-on-ink); }
#numbers .nm-big { font-size: clamp(38px, 3.7vw, 52px); line-height: 1; letter-spacing: -0.045em; font-weight: 800; color: var(--green); min-width: 4.6em; display: flex; align-items: center; gap: 12px; }
#numbers .nm-stars { display: inline-flex; gap: 2px; }
#numbers .nm-star { flex: none; width: 15px; height: 15px; color: var(--green); fill: currentColor; }
#numbers .nm-cap { font-size: var(--t-small); line-height: 1.4; color: var(--muted-on-ink); }
#numbers .nm-cap b { display: block; color: var(--cream); font-weight: 650; }

@media (max-width: 1023px) {
  #numbers .nm-lead, #numbers .nm-figs, #numbers .nm-chart { grid-column: 1 / -1; grid-row: auto; }
  #numbers .nm-h2 { max-width: 12em; }
}
@media (max-width: 767px) {
  #numbers .nm-top { row-gap: 24px; }
  #numbers .nm-bars { height: 230px; }
  #numbers .nm-fig { grid-template-columns: 22px minmax(0, 1fr); row-gap: 6px; align-items: start; padding: 16px 0; }
  #numbers .nm-fig .ic { margin-top: 8px; }
  #numbers .nm-big { font-size: 40px; min-width: 0; }
  #numbers .nm-cap { grid-column: 2; font-size: 16px; }
}

/* ---- 06-work.css ---- */
/* 06 The work: the marketing engine's output. Four groups, each led by a green icon and a bold line:
   a mosaic of ads, three article covers, then emails and product sheets on one shelf. Scoped under #work. */

#work .wk-g { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; font-size: 18px; font-weight: 650; letter-spacing: -0.014em; line-height: 1.25; }
#work .wk-g b { font-weight: 650; flex: none; }
#work .wk-g span { font-size: var(--t-small); font-weight: 400; letter-spacing: 0; color: var(--ink-60); min-width: 0; }
#work .wk-g::after { content: ""; flex: 1; min-width: 24px; height: 1px; background: var(--rule); }

#work figure.work { min-width: 0; }
#work figure.work img { width: 100%; height: auto; }
#work .wk-ads, #work .wk-covers { margin-bottom: clamp(40px, 4.6vw, 64px); }
#work .rail { align-items: start; }

/* phone: every group is a swipe rail */
#work .wk-ads { grid-auto-columns: max-content; }
#work .wk-ads figure { display: grid; grid-template-columns: auto; justify-content: start; align-content: start; }
#work .wk-ads figure.work img { height: 340px; width: auto; }
#work .wk-ads figcaption { width: 0; min-width: 100%; }   /* a caption never widens its picture */
#work .wk-covers { grid-auto-columns: 82%; }
#work .wk-mails { grid-auto-columns: 46%; }
#work .wk-sheets { grid-auto-columns: 46%; }
#work .wk-grp + .wk-grp { margin-top: 36px; }
/* an email is shown from its lead picture: the strip starts below the masthead every email shares */
#work .wk-strip { aspect-ratio: 707 / 1000; overflow: hidden; border: 1px solid var(--rule-strong); border-radius: var(--r-s); background: var(--white); }
#work .wk-strip img { margin-top: -27.5%; border-radius: 0; }
#work .wk-sheets img { border: 1px solid var(--rule-strong); }

@media (max-width: 767px) { #work .wk-g span { display: none; } }

@media (min-width: 768px) {
  #work .wk-covers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; overflow: visible; margin-inline: 0; padding-inline: 0; }
  /* emails and sheets share one shelf of five equal columns */
  #work .wk-band { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: clamp(14px, 1.9vw, 24px); }
  #work .wk-grp, #work .wk-mails, #work .wk-sheets { display: contents; }
  #work .wk-grp .wk-g { grid-row: 1; }
  #work .wk-grp--mail .wk-g { grid-column: 1 / span 2; }
  #work .wk-grp--sheet .wk-g { grid-column: 3 / span 3; }
  #work .wk-band figure { grid-row: 2; }
  #work .wk-grp .wk-g span { display: none; }
}

@media (min-width: 1100px) {
  /* the mosaic: the lead ad, four more in a block, a story at full height. The four set the height. */
  #work .wk-ads {
    display: grid; overflow: visible; margin-inline: 0; padding-inline: 0; grid-auto-flow: row;
    grid-template-columns: minmax(0, 2.25fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.61fr); grid-template-rows: auto auto; gap: 24px; align-items: stretch;
  }
  #work .wk-ads figure { display: flex; flex-direction: column; }
  #work .wk-ads figure.work img { width: 100%; height: auto; }
  #work .wk-ads figcaption { width: auto; min-width: 0; min-height: 46px; }
  #work .wk-lead { grid-column: 1; grid-row: 1 / span 2; }
  #work .wk-story { grid-column: 4; grid-row: 1 / span 2; }
  #work .wk-ads .wk-lead img, #work .wk-ads .wk-story img { flex: 1 1 0; height: 0; min-height: 0; object-fit: cover; }
  #work .wk-story img { object-position: 50% 30%; }
  #work .wk-grp .wk-g span { display: inline; }
}

/* ---- 07-range.css ---- */
/* 07 range, on cream: six real paddles standing on one white shelf, the 14 names in a ruled grid,
   then what else is on the shelf as three points. Scoped under #range. */

#range .rg-shelf { background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-m); padding: 28px 0 20px; overflow: hidden; }
#range .rg-rack { grid-auto-columns: 36%; gap: 0; margin-inline: 0; padding-inline: 20px; scroll-padding-inline: 20px; align-items: end; }
#range .rg-p { margin: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
#range .rg-p img { height: 200px; width: auto; max-width: none; }
#range .rg-p figcaption { margin-top: 14px; font-size: var(--t-caption); line-height: 1.35; color: var(--ink-60); }
#range .rg-p figcaption b { display: block; font-size: 15px; font-weight: 650; letter-spacing: -0.01em; color: var(--ink); }

/* the names: one ruled grid, hairlines between cells */
#range .rg-names {
  margin: clamp(24px, 2.6vw, 36px) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  background: var(--rule); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule);
}
#range .rg-names li {
  background: var(--cream); padding: 12px 0 12px 10px; font-size: 15px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; white-space: nowrap;
}
#range .rg-names li:nth-child(3n+1) { padding-left: 0; }
#range .rg-names li:last-child { grid-column: span 2; }

#range .rg-also { margin: clamp(28px, 3.2vw, 44px) 0 0; display: grid; gap: 20px; }

@media (min-width: 768px) {
  #range .rg-shelf { padding: 36px 28px 26px; }
  #range .rg-rack { display: grid; grid-auto-flow: row; grid-template-columns: repeat(6, minmax(0, 1fr)); overflow: visible; padding-inline: 0; }
  #range .rg-p img { height: clamp(200px, 22vw, 300px); }
  #range .rg-names { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  #range .rg-names li, #range .rg-names li:nth-child(3n+1) { padding: 16px 0 16px 14px; font-size: clamp(15px, 1.5vw, 21px); }
  #range .rg-names li:nth-child(7n+1) { padding-left: 0; }
  #range .rg-names li:last-child { grid-column: auto; }
  #range .rg-also { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--col-gap); }
}

/* ---- 08-brands.css ---- */
/* 08 brands: six steps as wired cards on one line, then the ask beside the monthly report panel. Scoped under #brands. */

#brands .br-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--rule); border-radius: var(--r-s); }
#brands .br-s { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; column-gap: 14px; row-gap: 2px; align-items: start; padding: 14px 16px; }
#brands .br-s + .br-s { border-top: 1px solid var(--rule); }
#brands .br-s .ic { grid-column: 1; grid-row: 1 / span 2; margin-top: 1px; }
#brands .br-n { grid-column: 3; grid-row: 1; font-size: 13px; font-weight: 600; color: var(--ink-40); }
#brands .br-s h3 { grid-column: 2; grid-row: 1; font-size: 17px; font-weight: 650; letter-spacing: -0.012em; line-height: 1.3; }
#brands .br-s > p:last-child { grid-column: 2 / -1; font-size: var(--t-small); line-height: 1.45; color: var(--ink-60); }
#brands .br-s a { color: var(--ink); }

#brands .br-lower { margin-top: clamp(40px, 5vw, 72px); row-gap: 32px; align-items: center; }
#brands .br-ask { grid-column: 1 / span 5; }
#brands .br-ask-p { margin-top: 14px; color: var(--ink-80); max-width: 26em; }
#brands .br-ask .btn { margin-top: 26px; }
#brands .br-report { grid-column: 7 / -1; background: var(--ink); color: var(--cream); border-radius: var(--r-m); padding: 22px 24px 6px; }
#brands .br-rh { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; }
#brands .br-rh .ic { width: 28px; height: 28px; }
#brands .br-rt { font-size: 22px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; }
#brands .br-rs { margin-top: 3px; font-size: 14px; color: var(--muted-on-ink); }
#brands .br-key { margin: 0; }
#brands .br-key li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--rule-on-ink); }
#brands .br-key .ic { margin-top: 1px; }
#brands .br-key b { display: block; font-size: 16px; font-weight: 650; letter-spacing: -0.01em; line-height: 1.25; }
#brands .br-key span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.4; color: var(--muted-on-ink); }

@media (min-width: 768px) {
  #brands .br-key { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  #brands .br-key li:last-child { grid-column: 1 / -1; }
}
@media (max-width: 899px) {
  #brands .br-ask, #brands .br-report { grid-column: 1 / -1; }
  #brands .br-report { order: -1; }
}
@media (max-width: 767px) { #brands .br-ask .btn { width: 100%; justify-content: space-between; } }

/* desktop: six cards on one line, joined through their numbers */
@media (min-width: 900px) {
  #brands .br-steps { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 16px); border: 0; border-radius: 0; padding-top: 34px; position: relative; }
  #brands .br-steps::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 1px; background: var(--rule-strong); }
  #brands .br-s, #brands .br-s + .br-s { display: block; background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-s); padding: 18px 16px 20px; }
  #brands .br-s::before { content: ""; position: absolute; left: 27px; bottom: 100%; width: 1px; height: 12px; background: var(--rule-strong); }
  #brands .br-n { position: absolute; left: 16px; top: -35px; width: 23px; height: 23px; display: flex; align-items: center; justify-content: center; background: var(--white); border: 1px solid var(--rule-strong); border-radius: 50%; font-size: 12px; font-weight: 700; color: var(--ink); }
  #brands .br-s:last-child .br-n { background: var(--green); border-color: var(--green); color: var(--white); }
  #brands .br-s h3 { margin-top: 12px; }
  #brands .br-s > p:last-child { margin-top: 4px; font-size: 14.5px; }
}

/* ---- 09-stockists.css ---- */
/* 09 stockists, the one green field: five points with ink icons, a white card for how to start, the real paddle wall.
   Scoped under #stockists. */

#stockists .sec-label, #stockists .sec-label b { color: var(--ink); }
#stockists .sec-label::after { background: rgba(10, 10, 10, 0.4); }
#stockists .st-grid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 1fr) minmax(0, 4fr);
  grid-template-areas: "title . photo" "lede . photo" "gets . photo" "start . photo"; column-gap: var(--col-gap); align-items: start;
}
#stockists .st-title { grid-area: title; max-width: 11em; }
#stockists .st-lede { grid-area: lede; color: var(--ink); margin-top: 20px; max-width: 30em; font-size: clamp(17px, 1.4vw, 20px); }
#stockists .st-photo { grid-area: photo; align-self: stretch; display: flex; flex-direction: column; }
#stockists .st-photo img { flex: 1 1 0; min-height: 0; height: 0; border-radius: var(--r-m); background: var(--ink); width: 100%; object-fit: cover; object-position: 50% 40%; }
#stockists .st-photo figcaption { color: var(--ink); }

#stockists .st-gets { grid-area: gets; margin: clamp(28px, 3.4vw, 44px) 0 0; padding-top: 24px; border-top: 1px solid var(--ink); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px var(--col-gap); }
#stockists .st-wide { grid-column: 1 / -1; }
#stockists .pt-l { max-width: 34em; }

#stockists .st-start {
  grid-area: start; margin-top: clamp(24px, 2.8vw, 36px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px;
  background: var(--white); border-radius: var(--r-s); padding: 20px 22px;
}
#stockists .st-start > div { flex: 1 1 16em; min-width: 0; }
#stockists .st-start-t { font-size: 18px; font-weight: 650; letter-spacing: -0.014em; line-height: 1.25; }
#stockists .st-start-p { margin-top: 4px; font-size: var(--t-small); line-height: 1.5; color: var(--ink-80); }
#stockists .btn, #stockists .btn:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); min-height: 52px; flex: none; }
#stockists .btn:hover { text-decoration: underline; text-decoration-thickness: 2px; }
#stockists .btn:focus-visible, #stockists a:focus-visible { outline-color: var(--ink); outline-offset: 4px; }

@media (max-width: 1023px) {
  #stockists .st-grid { grid-template-columns: minmax(0, 1fr) 36%; grid-template-areas: "title title" "lede lede" "gets photo" "start start"; }
  #stockists .st-photo { margin-top: clamp(28px, 3.4vw, 44px); }
  #stockists .st-gets { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  #stockists .st-grid { display: block; }
  #stockists .st-photo { margin-top: 24px; display: block; }
  #stockists .st-photo img { height: auto; aspect-ratio: 4 / 3; object-position: 50% 42%; }
  #stockists .st-gets { margin-top: 24px; gap: 18px; }
  #stockists .btn { width: 100%; justify-content: center; }
}

/* ---- 10-founders.css ---- */
/* 10 founders, on cream: the real photo running off the left edge, the words, and the two routes to start as cards.
   Scoped under #founders. */
#founders .fd-stage { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: center; max-width: var(--max); margin-inline: auto; padding-right: var(--gutter); }
#founders .fd-big { grid-column: 1 / span 6; }
#founders .fd-big img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 22%; border-radius: 0 var(--r-m) var(--r-m) 0; }
#founders .fd-big figcaption { padding-left: var(--gutter); }
#founders .fd-text { grid-column: 8 / span 5; }
#founders .fd-copy { margin-top: 24px; max-width: 30em; }
#founders .fd-copy p + p { margin-top: 1em; }
#founders .fd-routes { margin-top: 32px; display: grid; gap: 10px; }
#founders .fd-route {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px; min-height: 44px; text-decoration: none;
  background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-s);
}
#founders .fd-route > span { flex: 1; min-width: 0; }
#founders .fd-route b { display: block; font-size: 18px; font-weight: 650; letter-spacing: -0.014em; line-height: 1.25; }
#founders .fd-route span span { display: block; margin-top: 2px; font-size: var(--t-small); color: var(--ink-60); }
#founders .fd-route i { font-style: normal; font-size: 20px; color: var(--ink-40); }
#founders .fd-route:hover { border-color: var(--ink); }
#founders .fd-route:hover i { color: var(--green-ink); }
@media (max-width: 767px) {
  #founders .fd-stage { display: block; padding-right: 0; }
  #founders .fd-big img { width: calc(100% - var(--gutter)); }
  #founders .fd-text { padding: 32px var(--gutter) 0; }
}

/* ---- 12-contact.css ---- */
/* 12 contact: a slim ink footer. The two routes to start close the founders section, so they are not repeated here.
   Every selector scoped under #contact. */

#contact { padding-block: clamp(48px, 5.6vw, 80px) clamp(20px, 2.4vw, 28px); }

#contact .ct-grid { row-gap: 36px; align-items: start; }
#contact .ct-logo { grid-column: 1 / span 3; display: block; width: fit-content; text-decoration: none; }
/* the current lockup file carries 6.2% of empty space on its left; pull it back so the wordmark sits on the grid line */
#contact .ct-logo img { --w: clamp(150px, 14vw, 200px); width: var(--w); height: auto; margin-left: 0; }

#contact .ct-talk { grid-column: 5 / span 4; }
#contact .ct-h2 { font-size: var(--t-small); font-weight: 500; letter-spacing: 0; color: var(--muted-on-ink); }
#contact .ct-mail { margin-top: 4px; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.2; letter-spacing: -0.02em; font-weight: 650; }
#contact .ct-mail a { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; overflow-wrap: anywhere; }
#contact .ct-addr { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
#contact .ct-mail a:hover { color: var(--green); }
#contact .ct-co { margin-top: 18px; font-size: var(--t-small); line-height: 1.6; color: var(--muted-on-ink); }

#contact .ct-nav { grid-column: 9 / span 2; }
#contact .ct-out { grid-column: 11 / -1; }
#contact .ct-nav ul, #contact .ct-out { margin: -11px 0 0; padding: 0; list-style: none; }
#contact .ct-nav a, #contact .ct-out a {
  display: flex; align-items: center; min-height: 44px; font-size: var(--t-small); color: var(--cream); text-decoration: none;
}
#contact .ct-nav a:hover, #contact .ct-out a:hover { text-decoration: underline; }

#contact .ct-base {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 24px;
  margin-top: clamp(40px, 4.4vw, 64px); padding-top: 8px; border-top: 1px solid var(--rule-on-ink);
  font-size: var(--t-caption); color: var(--muted-on-ink);
}
#contact .ct-up { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--cream); text-decoration: none; }
#contact .ct-up:hover { text-decoration: underline; }

@media (max-width: 1099px) {
  #contact .ct-logo { grid-column: 1 / span 4; }
  #contact .ct-talk { grid-column: 5 / span 8; }
  #contact .ct-nav { grid-column: 5 / span 4; }
  #contact .ct-out { grid-column: 9 / span 4; }
}

@media (max-width: 767px) {
  #contact .ct-grid { row-gap: 28px; }
  #contact .ct-nav ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
  #contact .ct-out { margin-top: -20px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
}