/* ---- 00-tokens.css ---- */
/* Gorda Digital Lab — v6 "Editorial, with the Maison cover". Design tokens (spec-v6 §1.1–§1.5). Owner: P1.
   Every stylesheet sets font-size only through --t-*, spacing only through --s* and the fluid tokens, colours only
   through the colour tokens. */
/* Layer order for the whole site: every partial wraps its rules in one of these. */
@layer base, components, pages, motion;

/* --- §1.1 fonts: self-hosted, OFL 1.1 (licences in /fonts/OFL-*.txt). Built by build-fonts/make_webfonts.py:
       Latin subset, woff2; Bodoni keeps its opsz axis (6–96), wght limited to the weights the site uses. ---------- */
@font-face {
  font-family: "Bodoni Moda";
  src: url("/fonts/BodoniModa-VF.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bodoni Moda";
  src: url("/fonts/BodoniModa-Italic-VF.woff2") format("woff2");
  font-weight: 400 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter Tight";
  src: url("/fonts/InterTight-VF.woff2") format("woff2");
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("/fonts/DMMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Metric-matched fallbacks (fontTools, 29.10: mean advance of a–z against the local face; vertical metrics from hhea;
   Bodoni measured at its display drawing, wght 400 / opsz 72). */
@font-face {
  font-family: "Bodoni Moda Fallback";
  src: local("Georgia");
  font-style: normal;
  size-adjust: 105.04%;
  ascent-override: 107.1%;
  descent-override: 38.08%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Bodoni Moda Fallback";
  src: local("Georgia Italic"), local("Georgia-Italic");
  font-style: italic;
  size-adjust: 94.17%;
  ascent-override: 119.46%;
  descent-override: 42.47%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Tight Fallback";
  src: local("Arial"), local("ArialMT");
  size-adjust: 99.28%;
  ascent-override: 97.57%;
  descent-override: 24.3%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "DM Mono Fallback";
  src: local("Courier New"), local("CourierNewPSMT");
  size-adjust: 99.98%;
  ascent-override: 99.22%;
  descent-override: 31.01%;
  line-gap-override: 0%;
}

@layer base {
  :root {
    /* --- §1.1 families ------------------------------------------------------------------------------------- */
    --serif: "Bodoni Moda", "Bodoni Moda Fallback", Didot, Georgia, serif;
    --sans: "Inter Tight", "Inter Tight Fallback", "Helvetica Neue", Arial, sans-serif;
    --mono: "DM Mono", "DM Mono Fallback", ui-monospace, Menlo, monospace;

    /* --- §1.2 type scale: 17 tokens, nothing else sets font-size ------------------------------------------ */
    /* fix r1 (judges): 86px max, so "without the shoot." ends inside the left image at 1440 (≈ x 685), never on the seam */
    --t-cover: clamp(44px, 6vw, 86px);
    --t-display: clamp(44px, 6.1vw, 88px);
    --t-title: clamp(36px, 4.7vw, 68px);
    --t-format: clamp(84px, 10.3vw, 148px);
    --t-fig: clamp(40px, 4.7vw, 68px);
    --t-case: clamp(28px, 3.05vw, 44px);
    --t-quote: clamp(26px, 2.9vw, 42px);
    --t-q: clamp(22px, 1.8vw, 26px);
    --t-h3: clamp(18px, 1.4vw, 20px);
    --t-lead: clamp(17px, 1.32vw, 19px);
    --t-body: 16px;
    --t-small: 14px;
    --t-ui: 12px;
    --t-credit: 11px;
    --t-word: clamp(22px, 1.75vw, 25px);
    --t-plus: 0.62em;
    --t-unit: 0.38em;
    /* Bodoni weight per §1.2: 500 at ≤ 1100 (where --t-case and --t-quote run under 40px), 400 above. */
    --serif-w: 400;

    /* --- §1.3 colours ---------------------------------------------------------------------------------------- */
    --paper: #f7f6f2;
    --ink: #121211;
    --ink-2: #4f4d48;
    --rule: rgba(18, 18, 17, 0.16);
    --plate: #e8e6e0;
    --night: #0c0c0b;
    --on: #f3f1ec;
    --on-2: #b3b0a8;
    --rule-on: rgba(243, 241, 236, 0.22);
    --chip-bg: rgba(18, 18, 17, 0.82);
    --chip-fg: #ffffff;
    --chip-brand: rgba(247, 246, 242, 0.94);
    --pin: var(--ink);
    --scrim-cover: linear-gradient(to top, rgba(12, 12, 11, 0.78) 0%, rgba(12, 12, 11, 0.55) 45%, rgba(12, 12, 11, 0) 70%);
    --scrim-top: linear-gradient(to bottom, rgba(12, 12, 11, 0.55), rgba(12, 12, 11, 0));
    --scrim-top-h: calc(var(--header-h) + 64px);
    --focus: 2px solid currentColor;
    --focus-offset: 3px;
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    /* The only two shadows (§1.3): the cover headline, and small light text over the cover photo (cover kicker,
       note, credit; the header while .is-over-cover). Variant `studio` uses neither. */
    --shadow-cover: 0 2px 40px rgba(0, 0, 0, 0.25);
    --shadow-small: 0 1px 2px rgba(0, 0, 0, 0.5);

    /* --- §1.4 spacing: static scale ------------------------------------------------------------------------ */
    --s1: 4px;
    --s2: 8px;
    --s3: 12px;
    --s4: 16px;
    --s5: 24px;
    --s6: 32px;
    --s7: 48px;
    --s8: 64px;
    --s9: 80px;
    --s10: 128px;
    --s11: 160px;
    /* Layout constant: the container width (content 1440 at ≥ 1520). */
    --max: 1520px;
    /* Fluid tokens, 1440 values (≤ 1100 and ≤ 760 below). */
    --m: 40px;
    --g: 24px;
    --sec: 128px;
    --head: 48px;
    --block: 32px;
    --header-h: 64px;
    /* Distance from the container's content edge to the viewport edge (§1.5 bleeds). */
    --bleed-x: calc(var(--m) + max(0px, (100vw - var(--max)) / 2));
    --safe-b: env(safe-area-inset-bottom, 0px);
  }

  @media (max-width: 1100px) {
    :root {
      --t-cover: clamp(44px, 5.9vw, 65px);
      --serif-w: 500;
      --m: 28px;
      --g: 20px;
      --sec: 104px;
      --head: 40px;
      --block: 24px;
    }
  }
  @media (max-width: 760px) {
    :root {
      --m: 16px;
      --g: 12px;
      --sec: 72px;
      --head: 32px;
      --header-h: 56px;
    }
  }
}

/* ---- 01-base.css ---- */
/* Gorda Digital Lab — v6. Reset, body, container, 12-column grid, bleeds, focus and a11y basics (spec-v6 §1.3–§1.5).
   Owner: P1. */
@layer base {
  /* --- reset --------------------------------------------------------------------------- */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  html {
    color-scheme: light;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(var(--header-h) + var(--s4));
    overscroll-behavior-x: none;
  }
  body,
  h1,
  h2,
  h3,
  h4,
  p,
  figure,
  figcaption,
  blockquote,
  dl,
  dd,
  ul,
  ol {
    margin: 0;
  }
  ul,
  ol {
    padding: 0;
  }
  h1,
  h2,
  h3,
  h4 {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
  }
  img,
  picture,
  svg,
  video {
    display: block;
    max-width: 100%;
    height: auto;
  }
  button,
  input,
  select,
  textarea {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
  }
  button {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  summary {
    cursor: pointer;
  }
  dialog {
    margin: 0;
    padding: 0;
    border: 0;
  }

  /* --- body (§1.2, §1.3): paper, ink, Inter Tight 16/1.6 ------------------------------------------------ */
  body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: var(--t-body);
    font-weight: 400;
    line-height: 1.6;
    font-optical-sizing: auto;
    font-kerning: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
  }
  ::selection {
    background: var(--ink);
    color: var(--paper);
  }
  /* Inline links in text (§1.8): underline, 3px offset, 1px. */
  a {
    color: inherit;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
  }
  /* Inter Tight ships 300–500; a bold request would be synthesised. */
  b,
  strong {
    font-weight: 500;
  }
  p + p {
    margin-top: 1em;
  }
  /* Tabular lining figures for anything that carries a numeral (§1.2). */
  .num {
    font-variant-numeric: lining-nums tabular-nums;
  }

  /* --- container (§1.5): 1520 max, content 1440 at ≥ 1520 ------------------------------------------------ */
  .container {
    max-width: var(--max);
    margin-inline: auto;
    padding-inline: var(--m);
  }

  /* --- grid (§1.5): one 12-column grid ----------------------------------------------------------------- */
  .g12 {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--g);
  }
  /* Full bleed to the viewport edge from inside a .container (body's overflow-x: clip hides the scrollbar
     overshoot of 100vw). */
  .bleed-start {
    margin-inline-start: calc(-1 * var(--bleed-x));
  }
  .bleed-end {
    margin-inline-end: calc(-1 * var(--bleed-x));
  }

  /* --- surfaces (§1.3): paper everywhere, one night band (inquiry + footer) ------------------------------ */
  .night {
    --rule: var(--rule-on);
    background: var(--night);
    color: var(--on);
  }
  /* --- accessibility basics (§2.5) --------------------------------------------------- */
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .skip-link {
    position: absolute;
    top: var(--s3);
    left: var(--s3);
    z-index: 100;
    padding: var(--s2) var(--s4);
    background: var(--ink);
    color: var(--paper);
    font-size: var(--t-small);
    line-height: 1.5;
    transform: translateY(-200%);
  }
  .skip-link:focus {
    transform: none;
  }
  /* §1.3 --focus: 2px currentColor, 3px offset; light outline wherever the surface is dark. */
  :focus-visible {
    outline: var(--focus);
    outline-offset: var(--focus-offset);
  }
  .cover :focus-visible,
  .night :focus-visible,
  .is-over-cover :focus-visible,
  dialog :focus-visible {
    outline-color: var(--on);
  }

  /* --- print basics ---------------------------------------------------------------------- */
  @media print {
    .site-header,
    .menu,
    .skip-link,
    .cta-bar,
    dialog {
      display: none;
    }
    body {
      background: #fff;
      color: #000;
    }
    .night {
      background: #fff;
      color: #000;
      --rule: #d3d1ca;
    }
  }
}

/* ---- 02-type.css ---- */
/* Gorda Digital Lab — v6. Type roles (spec-v6 §1.2, §1.8 .link, §1.13 shared components). Owner: P1.
   The only file that may use var(--serif): Bodoni Moda in the §1.2 serif roles, never below 22px. Other packages add
   layout only (grid-column, order, align-self, margins) to these selectors, under a page-scoped parent. */
@layer base {
  /* --- serif roles: display (Bodoni 400) --------------------------------------------------------------------- */
  .cover__title,
  .display,
  .title,
  .format__fig,
  .fact__fig,
  .wordmark {
    font-family: var(--serif);
    font-style: normal;
    font-weight: 400;
    font-optical-sizing: auto;
    font-variant-numeric: lining-nums proportional-nums;
  }
  .cover__title {
    font-size: var(--t-cover);
    line-height: 0.92;
    letter-spacing: -0.026em;
  }
  .display {
    font-size: var(--t-display);
    line-height: 0.96;
    letter-spacing: -0.022em;
  }
  .title {
    font-size: var(--t-title);
    line-height: 1;
    letter-spacing: -0.018em;
  }
  .format__fig {
    font-size: var(--t-format);
    line-height: 0.8;
    letter-spacing: -0.04em;
    white-space: nowrap;
  }
  /* The Retainer numeral is set in italic (§1.2). */
  .format__fig em,
  .format__fig--italic,
  #retainer .format__fig {
    font-style: italic;
  }
  .fact__fig {
    font-size: var(--t-fig);
    line-height: 0.85;
    letter-spacing: -0.03em;
    white-space: nowrap;
  }
  .wordmark {
    font-size: var(--t-word);
    line-height: 1;
    letter-spacing: 0.01em;
  }

  /* --- serif roles: case size (500 at ≤ 1100, 400 above, through --serif-w) ------------------------------------ */
  .case-title,
  .format__name,
  .sig__name,
  .faq-group__title,
  .menu__links a,
  .foot__word {
    font-family: var(--serif);
    font-size: var(--t-case);
    font-style: normal;
    font-weight: var(--serif-w);
    font-optical-sizing: auto;
    line-height: 1.04;
    letter-spacing: -0.012em;
  }
  .format__name,
  .menu__links a {
    font-style: italic;
  }
  .quote {
    font-family: var(--serif);
    font-size: var(--t-quote);
    font-style: italic;
    font-weight: var(--serif-w);
    font-optical-sizing: auto;
    line-height: 1.16;
    letter-spacing: -0.012em;
    text-wrap: pretty;
  }

  /* --- serif roles: question size (italic 500) ----------------------------------------------------------------- */
  .qa dt,
  .check__t,
  .step__n,
  .step__t,
  .cover__credit em,
  .fact__unit {
    font-family: var(--serif);
    font-size: var(--t-q);
    font-style: italic;
    font-weight: 500;
    font-optical-sizing: auto;
    line-height: 1.15;
    letter-spacing: -0.005em;
  }

  /* --- italic accent (§1.2): the second clause of a display line is <em>; a line that starts at the left margin
         gets .04em so the "f" overhang does not touch the edge. Templates add .it-start to a block italic line. ---- */
  :is(.cover__title, .display, .title, .case-title, .quote) em {
    font-style: italic;
  }
  :is(.cover__title, .display, .title, .case-title) :is(br + em, em.it-start),
  .it-start {
    padding-inline-start: 0.04em;
  }
  h1,
  h2,
  h3,
  .cover__title,
  .display,
  .title,
  .case-title,
  .h1,
  .h2,
  .h3 {
    text-wrap: balance;
  }

  /* --- the "+" of "20+" (plus filter) and the unit after a numeral (§1.2) --------------------------------------- */
  .plus {
    position: relative;
    top: -0.516em;   /* = .32em of the numeral at .62em */
    font-family: var(--sans);
    font-size: var(--t-plus);
    font-style: normal;
    font-weight: 300;
    letter-spacing: 0;
  }
  .unit {
    margin-inline-start: 0.25em;
    font-family: var(--sans);
    font-size: var(--t-unit);
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
  }

  /* --- sans roles -------------------------------------------------------------------------------------------- */
  h3,
  .h3 {
    font-family: var(--sans);
    font-size: var(--t-h3);
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -0.005em;
  }
  .h3 {
    max-width: 40ch;
  }
  .deck,
  .lead {
    font-family: var(--sans);
    font-size: var(--t-lead);
    font-weight: 400;
    line-height: 1.55;
    color: inherit;
    max-width: 42ch;
    text-wrap: pretty;
  }
  .body,
  .prose p,
  .qa dd {
    font-size: var(--t-body);
    line-height: 1.6;
    max-width: 62ch;
    text-wrap: pretty;
  }
  .ui {
    font-family: var(--sans);
    font-size: var(--t-ui);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  /* Credit material only: kickers, counters, chips (DM Mono 11px caps). Paragraphs are never mono. */
  .kicker,
  .mono {
    font-family: var(--mono);
    font-size: var(--t-credit);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-variant-numeric: lining-nums tabular-nums;
  }
  .kicker {
    color: var(--ink);
  }
  :is(.cover, .night, .on-black) .kicker {
    color: var(--on);
  }
  .nb {
    white-space: nowrap;
  }

  /* --- §1.8 link: 12px caps with a 1px rule; ≥ 44px tap height -------------------------------------------------- */
  .link {
    display: inline-flex;
    align-items: flex-end;
    min-height: 44px;
    padding: var(--s3) 0 var(--s1);
    border-bottom: 1px solid currentColor;
    color: inherit;
    font-family: var(--sans);
    font-size: var(--t-ui);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    transition: border-color 0.2s var(--ease);
  }
  .link:hover {
    border-bottom-color: transparent;
  }

  /* --- section head (§1.13): kicker + h2.title cols 1–7, deck cols 9–12 bottom-aligned -------------------------- */
  .sec-head {
    align-items: start;
    margin-bottom: var(--head);
  }
  .sec-head > .kicker {
    grid-column: 1 / 8;
    grid-row: 1;
  }
  .sec-head > .title {
    grid-column: 1 / 8;
    grid-row: 2;
    margin-top: var(--s5);
  }
  .sec-head > :is(.deck, .sec-head__side) {
    grid-column: 9 / 13;
    grid-row: 1 / span 2;
    align-self: end;
  }

  /* --- title row (§1.13, inner pages): kicker + h1.display cols 1–7; deck or image cols 8/9–12, bottom-aligned --- */
  .title-row {
    padding-top: var(--s9);
    padding-bottom: var(--head);
  }
  .title-row.g12 {
    align-items: start;
  }
  .title-row.g12 > :is(.kicker, .title-row__main) {
    grid-column: 1 / 8;
    grid-row: 1;
  }
  .title-row.g12 > .display {
    grid-column: 1 / 8;
    grid-row: 2;
    margin-top: var(--s5);
  }
  .title-row.g12 > :is(.deck, .title-row__side) {
    grid-column: 9 / 13;
    grid-row: 1 / span 2;
    align-self: end;
  }
  .title-row.g12 > .title-row__frame {
    grid-column: 8 / 13;
    grid-row: 1 / span 2;
    align-self: end;
  }
  .title-row__main > .display {
    margin-top: var(--s5);
  }

  /* --- open Q&A (§1.13): dl.qa > div > dt + dd; the page sets the columns ---------------------------------------- */
  .qa {
    display: grid;
    column-gap: var(--g);
    row-gap: var(--s7);
  }
  .qa > div {
    padding-top: var(--s4);
    border-top: 1px solid var(--rule);
  }
  .qa dd {
    margin: var(--s3) 0 0;
    color: inherit;
  }

  @media (max-width: 900px) {
    .sec-head > :is(.kicker, .title, .deck, .sec-head__side),
    .title-row.g12 > :is(.kicker, .title-row__main, .display, .deck, .title-row__side, .title-row__frame) {
      grid-column: 1 / -1;
      grid-row: auto;
    }
    .sec-head > :is(.deck, .sec-head__side),
    .title-row.g12 > :is(.deck, .title-row__side, .title-row__frame) {
      margin-top: var(--s5);
    }
  }
  @media (max-width: 760px) {
    .qa {
      row-gap: var(--s6);
    }
  }

  /* The promise line printed by the cta() macro (class="promise"): a sentence, so ink, never grey (§1.2). */
  .promise {
    margin-top: var(--s3);
    max-width: 44ch;
    font-family: var(--sans);
    font-size: var(--t-small);
    font-weight: 400;
    line-height: 1.5;
    color: inherit;
    text-wrap: pretty;
  }

  /* --- rhythm inside a block (§1.4): kicker → title --s5; title → deck --s5 (deck → actions in 03) ------------ */
  .kicker + :is(.cover__title, .display, .title, .case-title) {
    margin-top: var(--s5);
  }
  :is(.display, .title, .case-title) + :is(.deck, .lead) {
    margin-top: var(--s5);
  }
  .h3 + p {
    margin-top: var(--s2);
  }
}

/* ---- 03-buttons.css ---- */
/* Gorda Digital Lab — v6. Buttons (spec-v6 §1.8), action rows, form inputs and copy states.
   Owner: P1. ".link" lives in 02-type.css (§1.13). The AI chip ".chip" is P2's (04a-plates.css). */
@layer components {
  /* --- §1.8 buttons: 56px (48 ≤ 760), 12px caps, ink, square; the arrow is drawn, never typed ----------------- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s3);
    min-height: 56px;
    padding: 0 24px;
    border: 1px solid var(--ink);
    border-radius: 0;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--sans);
    font-size: var(--t-ui);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .btn::after {
    content: "→";
    content: "→" / "";
    font-size: var(--t-small);
    font-weight: 400;
    letter-spacing: 0;
    transform: translateY(-1px);
  }
  .btn:hover,
  .btn:focus-visible {
    background: transparent;
    color: var(--ink);
  }
  .btn:disabled,
  .btn[aria-disabled="true"] {
    opacity: 0.5;
    pointer-events: none;
  }
  /* Light: on night and on the cover image. */
  .btn--light,
  .btn--white {
    border-color: var(--paper);
    background: var(--paper);
    color: var(--ink);
  }
  .btn--light:hover,
  .btn--light:focus-visible,
  .btn--white:hover,
  .btn--white:focus-visible {
    border-color: var(--on);
    background: transparent;
    color: var(--on);
  }
  /* Line: secondary use only (404 "See the work"). */
  .btn--line {
    background: transparent;
    color: var(--ink);
  }
  .btn--line:hover,
  .btn--line:focus-visible {
    background: var(--ink);
    color: var(--paper);
  }
  .btn--white-line {
    border-color: var(--on);
    background: transparent;
    color: var(--on);
  }
  .btn--white-line:hover,
  .btn--white-line:focus-visible {
    border-color: var(--paper);
    background: var(--paper);
    color: var(--ink);
  }
  /* Header size: no arrow. */
  .btn--sm {
    min-height: 40px;
    padding: 0 18px;
  }
  .btn--sm::after,
  .btn[data-copy]::after {
    content: none;
  }
  .btn--block {
    width: 100%;
  }
  @media (max-width: 760px) {
    .btn {
      min-height: 48px;
    }
    .btn--sm {
      min-height: 36px;
    }
  }

  /* --- action rows and the cta() group ------------------------------------------------ */
  .actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s3);
  }
  /* §1.4: deck → actions --s6. */
  :is(.deck, .lead) + :is(.actions, .cta-group, .btn) {
    margin-top: var(--s6);
  }
  .cta-group {
    display: block;
  }
  /* Inside .actions the group dissolves: the button sits in the row, the promise follows it. */
  .actions > .cta-group {
    display: contents;
  }
  .actions .promise {
    flex: 1 0 100%;
    order: 1;
    margin-top: 0;
  }

  /* --- native inputs (email-fallback card only; Tally renders its own) ------------------- */
  .field {
    display: grid;
    gap: var(--s2);
  }
  .field > label,
  .field-label {
    font-size: var(--t-ui);
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: 0.02em;
    color: var(--ink-2);
  }
  input:not([type="checkbox"]):not([type="radio"]),
  textarea,
  select {
    width: 100%;
    min-height: 48px;
    padding: 0 var(--s3);
    border: 1px solid var(--ink-2);   /* a control's edge at ≥ 3:1 (WCAG 1.4.11), not --rule */
    border-radius: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: var(--t-body);
    font-weight: 400;
    line-height: 1.5;
  }
  textarea {
    padding-block: var(--s3);
    resize: vertical;
  }
  input:hover,
  textarea:hover,
  select:hover,
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible {
    border-color: var(--ink);
  }
  [aria-invalid="true"] {
    border-color: var(--ink);
  }
  .field-error {
    font-size: var(--t-ui);
    font-weight: 400;
    line-height: 1.35;
    color: var(--ink-2);
  }
  ::placeholder {
    color: var(--ink-2);
    opacity: 1;
  }

  /* --- [data-copy] button: core JS swaps the label to "Copied" and may add .is-copied ---- */
  [data-copy] {
    position: relative;
  }
  .btn[data-copy].is-copied {
    background: transparent;
    color: var(--ink);
  }
  .btn--line[data-copy].is-copied {
    background: var(--ink);
    color: var(--paper);
  }
  [data-copy][hidden] {
    display: none;
  }
}

/* ---- 04a-plates.css ---- */
/* Gorda Digital Lab — v6. Image treatment (spec-v6 §1.6) and AI chips (§1.7). Owner: P2.
   - .frame (picture()): paints its own --ph until the photograph decodes; no border, keyline, shadow or radius.
     Without a window the image keeps its native ratio (width/height attributes, no layout shift). A window is an
     aspect-ratio box (--ar, or a ratio class) with object-fit: cover at the per-use focal point --pos.
   - .chip: one chip per image, flush in the corner where images.py burns the pixel label, so the page shows one
     label, not two. Flush, not inset 4px: at display scales under ~.67 the burned label starts 3px from the corner
     and an inset chip left a sliver of it showing (P0 reference, deviation 8). .chip--tl follows a label burned at
     the top (Img.label_corner); .chip--brand is the brand's own photograph. Scoped to frames and the lightbox, so a
     page's own .chips .chip (jump nav) never inherits it; the lightbox chip is .chip.lb-ai (base.html). */
@layer components {
  /* --- frame ----------------------------------------------------------------------------------------------------- */
  .frame {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--ph, var(--plate));
  }
  .frame > picture {
    display: block;
  }
  .frame img {
    display: block;
    width: 100%;
    height: auto;
  }

  /* --- windows: picture(..., ar="4 / 5") or a ratio class; the image covers the box at --pos -------------------- */
  .frame--34 {
    --ar: 3 / 4;
  }
  .frame--45 {
    --ar: 4 / 5;
  }
  .frame--11 {
    --ar: 1 / 1;
  }
  .frame--56 {
    --ar: 5 / 6;
  }
  :is(.frame--win, .frame--34, .frame--45, .frame--11, .frame--56) {
    aspect-ratio: var(--ar, 3 / 4);
  }
  :is(.frame--win, .frame--34, .frame--45, .frame--11, .frame--56) > picture {
    position: absolute;
    inset: 0;
  }
  :is(.frame--win, .frame--34, .frame--45, .frame--11, .frame--56) img {
    height: 100%;
    object-fit: cover;
    object-position: var(--pos, 50% 50%);
  }

  /* A before-photo whose largest rendition is under 2× its slot (corset-before, 592px): never scaled up. It is
     contained in its window on paper, anchored bottom-left, so its chip sits on the photograph's own corner. */
  .frame.plate--contain {
    background: transparent;
  }
  .frame.plate--contain img {
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: 0 100%;
  }
  :is(.frame--win, .frame--34, .frame--45, .frame--11, .frame--56).plate--contain img {
    width: 100%;
  }

  /* --- chips --------------------------------------------------------------------------------------------------- */
  .frame > .chip,
  .lb-ai {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    padding: var(--s1) var(--s2);
    /* --chip-bg over an ink underlay, i.e. opaque: at DPR 2 the burned label under the chip measures ~6px and its
       strokes ghosted through the 82 % chip (29.10 capture). */
    background: linear-gradient(var(--chip-bg), var(--chip-bg)), var(--ink);
    color: var(--chip-fg);
    font-family: var(--mono);
    font-size: var(--t-credit);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
  }
  .frame > .chip--brand {
    background: var(--chip-brand);
    color: var(--ink);
  }
  /* Fix r2 (judges): on an image that bleeds off the left viewport edge the chip stays flush in the corner (it covers
     the burned label there), but its text starts at the page margin, on the line of the caption and the text
     column, instead of at x = 0. */
  :is(.bleed-start, .cover__fig--left) .frame > .chip:not(.chip--tl) {
    padding-inline-start: var(--bleed-x);
  }
  @media (max-width: 900px) {
    :is(.case-hero:not(.case-hero--pinned) .case-hero__fig, .work-spread__cover, .case-row__lead, .process__plate)
      .frame > .chip:not(.chip--tl) {
      padding-inline-start: var(--bleed-x);
    }
  }
  @media (max-width: 760px) {
    .set-lead .frame > .chip:not(.chip--tl) {
      padding-inline-start: var(--bleed-x);
    }
  }
  /* A label burned at LABEL_TOP_FRAC of the image height (images.py): the chip's top is that point of the image as
     the window shows it. With object-fit: cover the drawn image is max(ratio × frame width, frame height) tall and
     shifted up by focal-y × (that − frame height), so the label sits at
     (label_f − focal y) × max(ratio × 100cqw, 100%) + focal y × 100%; minus the chip's top padding. picture() sets
     --lab-f, --img-r (h / w) and --pos-y. When the image covers by height (the 9:16 phone cover) the focal y drops
     out, so a phone-only object-position never moves the chip off the label. */
  .frame--tl {
    container-type: inline-size;
  }
  .frame--tl > .chip--tl {
    top: 0;
    top: calc((var(--lab-f) - var(--pos-y)) * max(var(--img-r) * 100cqw, 100%) + var(--pos-y) * 100% - var(--s1));
    bottom: auto;
  }

  /* --- captions: a figcaption without .credit (the lightbox caption) reads as a credit line ----------------------- */
  figcaption {
    margin-top: var(--s3);
    font-family: var(--mono);
    font-size: var(--t-credit);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-2);
    font-variant-numeric: lining-nums tabular-nums;
  }

  /* --- linked frames: zoom cursor for the lightbox; a linked case cover scales 1.02 under the pointer ------------- */
  a:has(> .frame) {
    display: block;
    color: inherit;
    text-decoration: none;
  }
  a[data-case-link] > .frame img {
    transition: transform 0.5s var(--ease);
  }
  a[data-case-link]:hover > .frame img,
  a[data-case-link]:focus-visible > .frame img {
    transform: scale(1.02);
  }
  a[data-lb-item] {
    display: block;
    cursor: zoom-in;
    color: inherit;
    text-decoration: none;
  }
  @media (prefers-reduced-motion: reduce) {
    a[data-case-link] > .frame img {
      transition: none;
    }
  }
}

/* ---- 04b-media.css ---- */
/* Gorda Digital Lab — v6. Media components (spec-v6 §1.7 credit line, §1.12 items 7–8, §1.13; owner P2):
   the credit line under every figure, the scroll-snap strip (arrows and an "01 / 08" counter, no JS-driven
   movement), and the <dialog> lightbox with groups, decode-swap and a 2× loupe (v5 C17). */
@layer components {
  /* --- credit line (§1.7): DM Mono 11px caps, --ink-2 (--on-2 on night), 12px under the image, parts joined by
         " · " with a no-break space before each dot so a line breaks only after a dot; long parts may wrap. ------- */
  .credit {
    display: block;
    margin: var(--s3) 0 0;
    font-family: var(--mono);
    font-size: var(--t-credit);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-2);
    font-variant-numeric: lining-nums tabular-nums;
    text-wrap: pretty;
  }
  .credit > span {
    white-space: nowrap;
  }
  .credit > span.w {
    white-space: normal;
  }
  .credit--ink {
    color: var(--ink);
  }
  :is(.night, .inquiry, .cover) :is(.credit, figcaption) {
    color: var(--on-2);
  }
  /* Fix r2 (judges): a before/after pair in two half-width columns. ≤ 760 each caption keeps its first part
     ("Before", "What you send"); the brand-photo parts (.credit__more) hide, since the chip on the image already
     says "Brand’s photo", and one .pair-note under the pair says the photo is enlarged for display. */
  .credit > .credit__more {
    white-space: normal;
  }
  .credit__more > span {
    white-space: nowrap;
  }
  .pair-note {
    display: none;
    grid-column: 1 / -1;
  }
  @media (max-width: 760px) {
    .credit__more {
      display: none;
    }
    .pair-note {
      display: block;
      margin-top: var(--s3);
    }
  }

  /* --- strip: a native horizontal scroller; 4 columns at ≥ 761, 78vw tiles on phones ------------------------- */
  .strip {
    position: relative;
  }
  .strip__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s4) var(--g);
    margin-bottom: var(--head);
  }
  /* Fix r2 (judges): a kicker alone (the title is visually hidden) shares one centre line with the counter and the
     arrows, instead of sitting on their bottom edge. */
  .strip__head--bare {
    align-items: center;
  }
  .strip__head--bare .kicker {
    margin: 0;
  }
  .strip__titles > .title {
    margin-top: var(--s5);
  }
  .strip__nav {
    display: flex;
    align-items: center;
    gap: var(--s2);
  }
  .strip__count {
    margin-inline-end: var(--s3);
    font-family: var(--mono);
    font-size: var(--t-credit);
    line-height: 1.5;
    letter-spacing: 0.08em;
    font-variant-numeric: lining-nums tabular-nums;
    white-space: nowrap;
  }
  .strip__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--ink);
    background: transparent;
    color: var(--ink);
    font-family: var(--sans);
    font-size: var(--t-small);
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s var(--ease), color 0.2s var(--ease), opacity 0.2s var(--ease);
  }
  .strip__btn:hover,
  .strip__btn:focus-visible {
    background: var(--ink);
    color: var(--paper);
  }
  .strip__btn:disabled {
    opacity: 0.3;
    cursor: default;
  }
  .strip__btn:disabled:hover {
    background: transparent;
    color: var(--ink);
  }
  .strip__track {
    display: flex;
    gap: var(--g);
    margin: 0 calc(-1 * var(--m));
    padding: 0 var(--m);
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--m);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .strip__track::-webkit-scrollbar {
    display: none;
  }
  .strip__item {
    flex: 0 0 calc((100% - 3 * var(--g)) / 4);
    min-width: 0;
    scroll-snap-align: start;
  }
  .strip__link {
    display: block;
    color: inherit;
    text-decoration: none;
  }
  @media (max-width: 760px) {
    .strip__item {
      flex-basis: 78vw;
    }
    .strip__head {
      margin-bottom: var(--s5);
    }
  }

  /* --- lightbox (rule 6): native <dialog>, 100dvh, opacity 0.25s with @starting-style ---------- */
  .lightbox {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    background: rgba(12, 12, 11, 0.97);
    color: var(--on);
    overscroll-behavior: contain;
    touch-action: pan-y;
    opacity: 0;
    transition: opacity 0.25s var(--ease), overlay 0.25s allow-discrete, display 0.25s allow-discrete;
  }
  .lightbox[open] {
    opacity: 1;
  }
  @starting-style {
    .lightbox[open] {
      opacity: 0;
    }
  }
  .lightbox::backdrop {
    background: transparent;
  }
  html:has(dialog[open]) {
    overflow: hidden;
  }
  .lightbox figure {
    display: grid;
    place-items: center;
    align-content: center;
    height: 100%;
    padding: var(--s8) var(--s7);
  }
  /* The image box is the only clipping parent of the 2× loupe: the zoomed image never spills over the
     caption or the buttons. */
  .lb-stage {
    display: block;
    overflow: hidden;
    max-width: 100%;
  }
  .lightbox img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(100dvh - var(--s10) - var(--s7));
    background: var(--plate);
    transform-origin: var(--ox, 50%) var(--oy, 50%);
    transition: transform 0.3s var(--ease);
  }
  /* C17: the new image is swapped in only after it has decoded (20-media.js), then fades in once. */
  .lightbox[open] img.is-fresh {
    animation: lb-in 0.15s var(--ease);
  }
  @keyframes lb-in {
    from {
      opacity: 0;
    }
  }
  .lightbox[open] img[data-zoomable] {
    cursor: zoom-in;
  }
  /* The loupe: the largest rendition, 2× around the pointer (--ox/--oy). The box keeps its pre-zoom size
     (--lb-w/--lb-h), so the larger file never changes the layout. */
  .lightbox.is-zoomed img {
    width: var(--lb-w, auto);
    height: var(--lb-h, auto);
    max-width: none;
    max-height: none;
    transform: scale(2);
    cursor: zoom-out;
    touch-action: none;
  }
  /* Loading hairline under the counter: shown only while the next image decodes (opacity only). */
  .lb-progress {
    position: relative;
    display: block;
    width: var(--s9);
    height: 2px;
    margin: var(--s2) auto 0;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.2);
  }
  .lightbox[open] .lb-progress {
    opacity: 0;
    transition: opacity 0.2s var(--ease);
  }
  .lightbox[open].is-loading .lb-progress {
    opacity: 1;
  }
  .lb-progress::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 40%;
    background: var(--on);
    animation: lb-sweep 0.9s var(--ease) infinite;
  }
  @keyframes lb-sweep {
    from {
      transform: translateX(-100%);
    }
    to {
      transform: translateX(250%);
    }
  }
  /* While zoomed the burned pixel label can be cropped out: the chip (.chip.lb-ai) is pinned to the dialog instead. */
  .lb-ai {
    position: absolute;
    left: var(--s4);
    bottom: calc(var(--s4) + var(--safe-b));
    z-index: 2;
  }
  .lb-ai[hidden],
  .lb-zoom[hidden] {
    display: none;
  }
  .lightbox figcaption {
    text-align: center;
    max-width: 70ch;
    color: var(--on-2);
  }
  .lightbox .lb-count {
    margin-top: var(--s2);
    text-align: center;
    max-width: none;
    font-family: var(--mono);
    font-size: var(--t-credit);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--on);
  }
  .lb-btn {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    border: 1px solid var(--rule-on);
    color: var(--on);
    font-size: var(--t-small);
    line-height: 1;
    transition: background 0.2s, color 0.2s;
  }
  .lb-btn:hover,
  .lb-btn:focus-visible {
    background: var(--on);
    color: var(--night);
  }
  .lb-close {
    top: var(--s4);
    right: var(--s4);
  }
  .lb-zoom {
    top: var(--s4);
    right: calc(var(--s4) + 44px + var(--s2));
  }
  .lb-zoom[aria-pressed="true"] {
    background: var(--on);
    color: var(--night);
  }
  .lb-zoom svg {
    width: var(--s5);
    height: var(--s5);
  }
  .lb-prev,
  .lb-next {
    top: 50%;
    transform: translateY(-50%);
  }
  .lb-prev {
    left: var(--s4);
  }
  .lb-next {
    right: var(--s4);
  }
  /* Prev / next have nothing to do in a group of one. */
  .lightbox.is-single .lb-prev,
  .lightbox.is-single .lb-next {
    display: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .lightbox img {
      transition: none;
    }
    .lightbox[open] img.is-fresh,
    .lb-progress::after {
      animation: none;
    }
  }
  @media (max-width: 760px) {
    .lightbox figure {
      padding: var(--s8) var(--s4);
    }
    .lb-prev,
    .lb-next {
      top: auto;
      bottom: calc(var(--s4) + var(--safe-b));
      transform: none;
    }
    .lb-ai {
      bottom: calc(var(--s4) + 44px + var(--s2) + var(--safe-b));
    }
  }
}

/* ---- 05-header.css ---- */
/* Gorda Digital Lab — v6. Header (spec-v6 §1.10), menu and brief bar (§1.11). Owner: P1.
   The header is always opaque paper with a hairline; on / only, while it sits over the cover, 10-header.js sets
   .is-over-cover (transparent, light text). The menu (≤ 1100) is paper and drops under the header; the brief bar
   (≤ 760, v5 C14) is paper with an ink rule. Font rules for .wordmark and .menu__links a live in 02-type.css. */
@layer components {
  /* --- header ----------------------------------------------------------------------------------------------- */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--paper);
    color: var(--ink);
    border-bottom: 1px solid var(--rule);
    transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
  }
  /* 10-header.js sets .no-tr for the first frame, so a load never animates from paper to transparent. */
  .site-header.no-tr,
  .site-header.no-tr * {
    transition: none;
  }
  .site-header__in {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas: "nav word end";
    align-items: center;
    column-gap: var(--g);
    height: var(--header-h);
  }
  .site-header .wordmark {
    grid-area: word;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
  }
  .nav {
    grid-area: nav;
    min-width: 0;
  }
  .nav ul {
    display: flex;
    gap: var(--s6);
    list-style: none;
  }
  .nav a,
  .header-email,
  .menu-btn {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: inherit;
    font-family: var(--sans);
    font-size: var(--t-ui);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
  }
  /* The rule sits under the label (not at the 44px box edge): a 1px underline 5px below the caps, on hover and on
     the current page only (a transparent underline would still cast the over-cover text-shadow). */
  .nav a:hover,
  .nav a[aria-current],
  .header-email {
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
  }
  .site-header__end {
    grid-area: end;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: var(--s5);
  }
  .header-btn .short {
    display: none;
  }
  .menu-btn {
    display: none;
    justify-content: flex-end;
    min-width: 44px;
  }
  .menu-btn[aria-expanded="true"] {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
  }

  /* --- over a night surface (fix r1, 10-header.js .is-dark): the header turns night too; placed before
         the over-cover rules, which win at equal specificity ------------------------- */
  .site-header.is-dark {
    background: var(--night);
    border-bottom-color: var(--rule-on);
    color: var(--on);
  }
  .site-header.is-dark .header-btn {
    border-color: var(--on);
    background-color: var(--on);
    color: var(--ink);
  }
  .site-header.is-dark .header-btn:hover,
  .site-header.is-dark .header-btn:focus-visible {
    background-color: transparent;
    color: var(--on);
  }
  .site-header.is-dark :focus-visible {
    outline-color: var(--on);
  }
  /* --- over the cover (home only, set by 10-header.js): transparent, no rule, light text with a small shadow -- */
  .site-header.is-over-cover {
    background: transparent;
    border-bottom-color: transparent;
    color: var(--on);
    text-shadow: var(--shadow-small);
  }
  .site-header.is-over-cover .header-btn {
    border-color: var(--on);
    background-color: transparent;
    color: var(--on);
  }
  .site-header.is-over-cover .header-btn:hover,
  .site-header.is-over-cover .header-btn:focus-visible {
    border-color: var(--paper);
    background-color: var(--paper);
    color: var(--ink);
    text-shadow: none;
  }
  /* Variant `studio` (pale plates): ink text, the dark button, no shadow (§2.1.2). */
  .site-header.is-over-cover[data-over-cover="studio"] {
    color: var(--ink);
    text-shadow: none;
  }
  .site-header.is-over-cover[data-over-cover="studio"] .header-btn {
    border-color: var(--ink);
    background-color: var(--ink);
    color: var(--paper);
  }
  .site-header.is-over-cover[data-over-cover="studio"] .header-btn:hover,
  .site-header.is-over-cover[data-over-cover="studio"] .header-btn:focus-visible {
    background-color: transparent;
    color: var(--ink);
  }
  .site-header.is-over-cover[data-over-cover="studio"] :focus-visible {
    outline-color: var(--ink);
  }
  /* A 1px sentinel 10-header.js places at the cover's bottom edge (no layout: it overlaps the cover's last px). */
  .cover-sentinel {
    display: block;
    height: 1px;
    margin-top: -1px;
    pointer-events: none;
    visibility: hidden;
  }

  /* --- menu (≤ 1100): paper, full height under the header; opens with an 8px drop, closes at once ------------ */
  .menu {
    display: none;
  }
  .menu__links {
    list-style: none;
  }
  .menu__links a {
    display: block;
    padding: var(--s4) 0;
    padding-inline-start: 0.04em;   /* italic Bodoni at the left margin: keep the overhang inside it (§1.2) */
    border-bottom: 1px solid var(--rule);
    color: inherit;
    text-decoration: none;
  }
  .menu__links a:hover,
  .menu__links a[aria-current] {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.14em;
  }
  .menu__btn {
    margin-top: var(--s6);
  }
  .menu__note,
  .menu__mail {
    font-size: var(--t-small);
    line-height: 1.5;
  }
  .menu__note {
    margin-top: var(--s4);
    text-wrap: balance;
  }
  .menu__mail {
    margin-top: var(--s3);
  }
  .menu__mail a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    text-decoration: underline;
  }

  @media (max-width: 1100px) {
    .site-header__in {
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas: "word end";
    }
    .site-header .wordmark {
      justify-self: start;
    }
    .nav {
      display: none;
    }
    .menu-btn {
      display: inline-flex;
    }
    .menu {
      position: fixed;
      top: var(--header-h);
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 55;
      display: block;
      overflow-y: auto;
      overscroll-behavior: contain;
      background: var(--paper);
      color: var(--ink);
      transform: translateY(-8px);
      visibility: hidden;
    }
    .menu.is-open {
      transform: none;
      visibility: visible;
      transition: transform 0.35s var(--ease);
    }
    .menu__in {
      padding-bottom: calc(var(--s7) + var(--safe-b));
    }
  }
  /* Tablet widths: the block button spans half the panel, not a 1,000px bar. */
  @media (width > 760px) and (max-width: 1100px) {
    .menu__btn {
      width: 50%;
    }
  }
  @media (max-width: 760px) {
    .site-header__end {
      gap: var(--s4);
    }
  }
  @media (max-width: 560px) {
    .header-btn .long {
      display: none;
    }
    .header-btn .short {
      display: inline;
    }
    /* Only with JS: the brief bar (15-ctabar.js) takes over; without JS the "Brief" button stays. */
    .js .site-header .header-btn {
      display: none;
    }
  }

  /* --- brief bar (≤ 760, v5 C14) ------------------------------------------------------------------------------
     Markup after </footer>, `hidden` in the HTML: no JS = no bar. 15-ctabar.js removes `hidden`, then toggles
     .is-on (armed once the page's first .cta-group has scrolled above the viewport; off while another .cta-group or
     the footer is on screen or the menu is open). Off = slid down + visibility hidden + inert; never at load. */
  .cta-bar[hidden],
  .cta-bar {
    display: none;
  }
  @media (max-width: 760px) {
    .js .cta-bar:not([hidden]) {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 50;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--s3);
      padding: var(--s2) var(--m) calc(var(--s2) + var(--safe-b));
      background: var(--paper);
      color: var(--ink);
      border-top: 1px solid var(--ink);
      transform: translateY(100%);
      visibility: hidden;
      transition: transform 0.25s var(--ease), visibility 0s linear 0.25s;
    }
    .js .cta-bar.is-on:not([hidden]) {
      transform: none;
      visibility: visible;
      transition: transform 0.25s var(--ease), visibility 0s, background-color 0.25s var(--ease),
        color 0.25s var(--ease), border-color 0.25s var(--ease);
    }
    /* Fix r1: over a night surface (10-header.js) the bar is night too, with the light button. */
    .js .cta-bar.is-dark:not([hidden]) {
      background: var(--night);
      color: var(--on);
      border-top-color: var(--rule-on);
    }
    .cta-bar.is-dark .cta-bar__text > span + span {
      color: var(--on-2);
    }
    .cta-bar.is-dark .btn {
      border-color: var(--on);
      background-color: var(--on);
      color: var(--ink);
    }
    .cta-bar.is-dark :focus-visible {
      outline-color: var(--on);
    }
    .cta-bar__text {
      display: flex;
      flex-direction: column;
      min-width: 0;
      font-family: var(--sans);
      font-size: var(--t-ui);
      font-weight: 500;
      line-height: 1.4;
      letter-spacing: 0;
    }
    .cta-bar__text > span + span {
      font-weight: 400;
      color: var(--ink-2);
    }
    .cta-bar__text > span {
      white-space: nowrap;
    }
    .cta-bar .cta-group {
      flex: none;
    }
    .cta-bar .btn {
      min-height: 44px;
      padding: 0 var(--s4);
      letter-spacing: 0.1em;
    }
    .cta-bar .btn::after {
      content: none;
    }
    /* WCAG 2.4.11: a focused control is scrolled clear of the bar while it shows. */
    html.has-cta-bar {
      scroll-padding-bottom: calc(var(--s2) * 2 + 44px + var(--safe-b));
    }
  }
}

/* ---- 06-colophon-footer.css ---- */
/* Gorda Digital Lab — v6. Inquiry band (spec-v6 §2.1.10) and footer (§1.11): the one night surface. Owner: P1.
   Band: text cols 1–6 | the "What you send / What you get" pair cols 7–12, bottom-aligned with the button; `single`
   one figure cols 9–12; `none` text cols 1–8 (≥ 1101: full width, the list in three columns). Footer: wordmark cols 1–4,
   Studio 6–7 · Pages 8 · Rights 9–10 · Contact 11–12, legal row; ≤ 560 one column in the §1.11 order.
   The .foot__word font rule lives in 02-type.css. */
@layer components {
  /* --- inquiry band -------------------------------------------------------------------------------------------- */
  .inquiry {
    padding-top: var(--sec);
    padding-bottom: var(--s9);
  }
  .inquiry__in {
    align-items: end;
    row-gap: var(--s7);
  }
  .inquiry__text {
    grid-column: 1 / 7;
  }
  .inquiry__list {
    margin-top: var(--s6);
    max-width: 34em;
    list-style: none;
    border-top: 1px solid var(--rule-on);
  }
  .inquiry__list > li {
    padding: var(--s3) 0;
    border-bottom: 1px solid var(--rule-on);
    font-size: var(--t-lead);
    line-height: 1.5;
    text-wrap: pretty;
  }
  .inquiry__text > .cta-group {
    margin-top: var(--s6);
  }
  .inquiry__figs {
    grid-column: 7 / 13;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--g);
    align-items: start;
  }
  .inquiry--single .inquiry__figs {
    grid-column: 9 / 13;
    grid-template-columns: minmax(0, 1fr);
  }
  .inquiry--none .inquiry__text {
    grid-column: 1 / 9;
  }
  /* Credit line on night (P2's .credit grammar, restated for the band so it holds before 04b lands). */
  .inquiry__fig > figcaption {
    margin-top: var(--s3);
    color: var(--on-2);
    font-family: var(--mono);
    font-size: var(--t-credit);
    line-height: 1.5;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-variant-numeric: lining-nums tabular-nums;
  }
  /* Each credit part stays whole ("enlarged for display" never splits); the line breaks only after a " ·". */
  .inquiry__part {
    white-space: nowrap;
  }
  /* `none` (every source already on the page): no figure, so the list runs across the full width in three ruled
     columns rather than leaving cols 9–12 empty beside the text (§6.3 no void). */
  @media (width > 1100px) {
    .inquiry--none .inquiry__text {
      grid-column: 1 / -1;
    }
    .inquiry--none .inquiry__list {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      column-gap: var(--g);
      max-width: none;
    }
  }
}

/* The band's 3:4 windows: scoped under .inquiry and in `pages` so they hold over the shared .frame rules. */
@layer pages {
  .inquiry .inquiry__window {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
  }
  /* Fix r2: a lone figure (a case without a brand photo) is square, so it closes level with the text column. */
  .inquiry--single .inquiry__window {
    aspect-ratio: 1 / 1;
  }
  /* Fix r2: on phones a case page's band stays text only (the pair repeats the proof just above it; the empty field
     it fills exists only beside the text at ≥ 901). */
  @media (max-width: 760px) {
    .inquiry--case .inquiry__figs {
      display: none;
    }
  }
  .inquiry .inquiry__window > .frame {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
  }
  .inquiry .inquiry__window picture {
    display: block;
    width: 100%;
    height: 100%;
  }
  .inquiry .inquiry__window img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--pos, 50% 50%);
  }
  /* A before-photo narrower than 2× the slot: shown whole on its own tone, never enlarged (§1.6). */
  .inquiry .inquiry__window--contain img {
    object-fit: contain;
  }
  .inquiry .inquiry__window > .chip--brand:last-child {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    padding: var(--s1) var(--s2);
    background: var(--chip-brand);
    color: var(--ink);
    font-family: var(--mono);
    font-size: var(--t-credit);
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
  }
}

@layer components {
  /* --- footer ------------------------------------------------------------------------------------------------ */
  .site-footer {
    padding-bottom: calc(var(--s6) + var(--safe-b));
  }
  .foot {
    row-gap: var(--s6);
    padding-top: var(--s8);
  }
  /* Under the band: a hairline inside the container; alone (brief, thanks, privacy, 404): the surface change is
     the break, so --s9 above the wordmark and no rule. */
  .inquiry + .site-footer > .foot {
    border-top: 1px solid var(--rule-on);
  }
  .site-footer--solo > .foot {
    padding-top: var(--s9);
  }
  .foot__word {
    grid-column: 1 / 5;
    align-self: start;
  }
  .foot__col {
    font-size: var(--t-small);
    line-height: 1.6;
    min-width: 0;
    text-wrap: balance;
  }
  .foot .foot__h {
    margin-bottom: var(--s3);
    color: var(--on-2);
  }
  .foot__col ul {
    list-style: none;
  }
  .foot__col li + li {
    margin-top: var(--s1);
  }
  .foot__col a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--rule-on);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }
  .foot__col a:hover {
    text-decoration-color: currentColor;
  }
  .foot__legal {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--s2) var(--g);
    margin-top: var(--s6);
    padding-top: var(--s4);
    border-top: 1px solid var(--rule-on);
    color: var(--on-2);
    font-family: var(--mono);
    font-size: var(--t-credit);
    line-height: 1.5;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  @media (width > 1100px) {
    .foot__studio {
      grid-column: 6 / 8;
    }
    .foot__pages {
      grid-column: 8 / 9;
    }
    .foot__rights {
      grid-column: 9 / 11;
    }
    .foot__contact {
      grid-column: 11 / 13;
    }
  }
  @media (max-width: 1100px) {
    .foot__word {
      grid-column: 1 / -1;
    }
    .foot__studio {
      grid-column: 1 / 4;
    }
    .foot__pages {
      grid-column: 4 / 7;
    }
    .foot__rights {
      grid-column: 7 / 10;
    }
    .foot__contact {
      grid-column: 10 / 13;
    }
  }
  @media (max-width: 900px) {
    .inquiry__text,
    .inquiry--none .inquiry__text,
    .inquiry__figs,
    .inquiry--single .inquiry__figs {
      grid-column: 1 / -1;
    }
  }
  @media (max-width: 760px) {
    .inquiry__text > .cta-group > .btn {
      width: 100%;
    }
    .foot__studio,
    .foot__pages,
    .foot__rights,
    .foot__contact {
      grid-column: span 6;
    }
  }
  @media (max-width: 560px) {
    .foot {
      padding-top: var(--s7);
      row-gap: var(--s5);
    }
    .foot__contact {
      grid-column: 1 / -1;
      order: 1;
    }
    .foot__pages {
      grid-column: 1 / 7;
      order: 2;
    }
    .foot__rights {
      grid-column: 7 / 13;
      order: 2;
    }
    /* Pages and Rights read as one 2-column list of 44px rows; Rights' title is for screen readers only. */
    .foot__rights > .foot__h {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
    }
    .foot__rights {
      padding-top: calc(var(--t-credit) * 1.5 + var(--s3));
    }
    .foot__pages li + li,
    .foot__rights li + li {
      margin-top: 0;
    }
    .foot__pages a,
    .foot__rights a {
      display: inline-flex;
      align-items: center;
      min-height: 44px;
    }
    .foot__word {
      order: 3;
      margin-top: var(--s4);
    }
    .foot__studio {
      grid-column: 1 / -1;
      order: 4;
    }
    .foot__studio > .foot__h {
      display: none;
    }
    .foot__legal {
      order: 5;
      flex-direction: column;
      margin-top: var(--s2);
    }
  }
}

/* ---- 07-cover.css ---- */
/* Gorda Digital Lab — v6. Home cover (spec-v6 §2.1.2, the maison graft) and the facts strip (§2.1.3). Owner: P3.
   The cover is pulled up under the header (transparent over it, P1's 10-header.js). ≥ 761: an 8:5 diptych edge to
   edge, scrims top and bottom, the copy bottom-left, the credit bottom-right. ≤ 760: the left image alone at 9:16.
   Variant `studio` (.cover--paper): pale plates under paper scrims, no text-shadow, ink copy and the dark button. */
@layer pages {
  /* --- stage ----------------------------------------------------------------------------------------------- */
  /* The cover's scrims. Night tone: the §1.3 bottom scrim, and a top scrim deepened from --scrim-top (.55) so the
     11–12px header text clears 4.5:1 over the bright alpine sky (tools/cover_contrast.py; ⚑ P1 may adopt it in
     00-tokens.css). Paper tone (variant `studio`): paper-coloured scrims, so ink text clears 4.5:1 over the model's
     dark hair and skin, which a scrim-free pale plate cannot guarantee. */
  .cover {
    --cover-scrim-top: linear-gradient(to bottom, rgba(12, 12, 11, 0.7) 0%, rgba(12, 12, 11, 0.42) 50%, rgba(12, 12, 11, 0) 100%);
    --cover-scrim-bottom: var(--scrim-cover);
    position: relative;
    /* The header is --header-h plus its 1px bottom rule (05-header.css), so the pull-up includes the rule: without
       it a 1px paper line showed above the photograph. */
    margin-top: calc((var(--header-h) + 1px) * -1);
    background: var(--night);
    color: var(--on);
  }
  .cover__stage {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* A definite width, so max-height / min-height clamp the height instead of transferring through the ratio
       into the width (a 1264px stage at 1440×790, an 896px one at 761×900). */
    width: 100%;
    aspect-ratio: 8 / 5;
    max-height: 100svh;
    min-height: min(560px, 100svh);
    overflow: hidden;
  }
  /* Scrims over the whole stage (§1.3): the top one under the transparent header, the bottom one under the copy. */
  .cover__stage::before,
  .cover__stage::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    z-index: 1;
    pointer-events: none;
  }
  .cover__stage::before {
    top: 0;
    height: var(--scrim-top-h);
    background: var(--cover-scrim-top);
  }
  .cover__stage::after {
    top: 0;
    bottom: 0;
    background: var(--cover-scrim-bottom);
  }
  .cover__fig {
    position: relative;
    min-width: 0;
    min-height: 0;
    margin: 0;
    overflow: hidden;
  }
  .cover__fig > .frame {
    position: absolute;
    inset: 0;
    height: auto;
  }
  .cover__fig picture {
    display: block;
    width: 100%;
    height: 100%;
  }
  .cover__fig img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: var(--pos, 50% 50%);
  }
  /* The seam: a 1px light hairline on the right image's left edge, from under the header to 45% of the stage, so it
     never runs through the wordmark or the headline. */
  .cover__fig--right::before {
    content: "";
    position: absolute;
    top: var(--header-h);
    left: 0;
    z-index: 2;
    width: 1px;
    height: calc(45% - var(--header-h));
    background: var(--on);
    opacity: 0.35;
    pointer-events: none;
  }
  /* Chips (§1.7, fix r1): above the scrims, bottom-left on both images like every chip on the site (the left image's
     label is burned bottom-left again; the copy sits above it). */
  .cover__fig .chip {
    z-index: 2;
  }
  /* Fix r1 (judges): a soft extra shade bottom-left of the left image only, under the copy. */
  .cover__fig--left::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(12, 12, 11, 0.45) 0%, rgba(12, 12, 11, 0) 45%);
    pointer-events: none;
  }
  .cover--paper .cover__fig--left::after {
    content: none;
  }

  /* --- copy ------------------------------------------------------------------------------------------------ */
  /* Copy and credit sit on the container's edges (--bleed-x = --m below 1520px, more above), under the header's
     nav and button. */
  .cover__copy {
    position: absolute;
    left: var(--bleed-x);
    bottom: var(--s8);
    z-index: 3;
    color: var(--on);
  }
  .cover__kicker,
  .cover__note,
  .cover__credit-k {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  }
  .cover__title {
    color: var(--on);
    text-shadow: 0 2px 40px rgba(0, 0, 0, 0.25);
  }
  .cover__line {
    white-space: nowrap;
  }
  .cover__act {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s5) var(--s6);
    margin-top: var(--s6);
  }
  /* Fix r1 (judges): the reassurance line in the sans at 14px, not 11px mono caps over the photograph. */
  .cover__note {
    margin: 0;
    font-family: var(--sans);
    font-size: var(--t-small);
    font-weight: 500;
    line-height: 1.45;
    color: var(--on);
  }
  .cover__credit {
    position: absolute;
    right: var(--bleed-x);
    bottom: var(--s8);
    z-index: 3;
    display: grid;
    justify-items: end;
    gap: var(--s1);
    margin: 0;
    text-align: right;
    color: var(--on);
  }
  .cover__credit em {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  }
  .cover__credit-k {
    font-family: var(--mono);
    font-size: var(--t-credit);
    line-height: 1.5;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .cover__sentinel {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
  }
  /* ≥ 1101: the italic line is indented half an em and may cross the seam (as in the maison reference). */
  @media (width > 1100px) {
    .cover__line--it {
      padding-inline-start: 0.5em;
    }
  }

  /* --- variant `studio`: pale plates, paper scrims, ink copy, no shadow ---------------------------------------------- */
  .cover--paper {
    --cover-scrim-top: linear-gradient(to bottom, rgba(247, 246, 242, 0.9) 0%, rgba(247, 246, 242, 0.62) 50%, rgba(247, 246, 242, 0) 100%);
    --cover-scrim-bottom: linear-gradient(to top, rgba(247, 246, 242, 0.88) 0%, rgba(247, 246, 242, 0.62) 45%, rgba(247, 246, 242, 0) 70%);
    background: var(--paper);
    color: var(--ink);
  }
  .cover--paper :is(.cover__copy, .cover__title, .cover__note, .cover__credit, .cover__kicker) {
    color: var(--ink);
    text-shadow: none;
  }
  .cover--paper :is(.cover__credit-k, .cover__credit em) {
    text-shadow: none;
  }
  .cover--paper .cover__fig--right::before {
    background: var(--ink);
    opacity: 0.16;
  }

  /* --- ≤ 760: one image at 9:16, copy at the bottom, full-width button, note centred ----------------------------- */
  @media (max-width: 760px) {
    .cover__stage {
      grid-template-columns: 1fr;
      aspect-ratio: 9 / 16;
    }
    .cover__fig--right,
    .cover__credit {
      display: none;
    }
    .cover__fig--left img {
      object-position: var(--pos-phone, var(--pos, 50% 0%));
    }
    .cover__copy {
      right: var(--bleed-x);
    }
    .cover__act {
      flex-direction: column;
      align-items: stretch;
      gap: var(--s4);
    }
    .cover__act > .cta-group,
    .cover__act .btn {
      width: 100%;
    }
    .cover__note {
      text-align: center;
    }
  }
  /* ≤ 760 the copy spans the image, so it stands one chip-height clear of the bottom-left chip. */
  @media (max-width: 760px) {
    .cover__copy {
      bottom: var(--s8);
    }
  }
  @media (max-width: 560px) {
    .cover__copy {
      bottom: var(--s7);
    }
  }

  /* --- facts strip (§2.1.3): deck cols 1–5 | three ruled cells cols 6–12 ------------------------------------------ */
  /* --s7 top and bottom (§2.1.3); the proof after it starts at --sec − --s7 (14-proof.css), so the seam between the
     two is one --sec, as between any two sections. */
  .facts {
    align-items: end;
    padding-block: var(--s7);
  }
  .facts__deck {
    grid-column: 1 / 6;
    align-self: end;
    max-width: 40ch;
  }
  .facts__list {
    grid-column: 6 / 13;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--ink);
  }
  .fact {
    padding: var(--s4) var(--s5) 0 0;
  }
  .fact + .fact {
    padding-inline-start: var(--s5);
    border-left: 1px solid var(--rule);
  }
  .fact__num {
    display: flex;
    align-items: baseline;
    column-gap: var(--s2);
    margin: 0;
    font-size: var(--t-fig);
    line-height: 0.85;
    white-space: nowrap;
  }
  /* Fix r1 (judges): the unit is a short italic Bodoni suffix on the numeral's baseline ("2 business days",
     "24 hours"), so the three facts read as one set; font rules in 02-type.css (serif role, --t-q). */
  .fact__unit {
    font-style: italic;
    letter-spacing: 0;
    white-space: nowrap;
  }
  .fact__txt {
    margin-top: var(--s3);
    max-width: 26ch;
    font-size: var(--t-small);
    line-height: 1.45;
    text-wrap: pretty;
  }
  @media (max-width: 900px) {
    .facts__deck,
    .facts__list {
      grid-column: 1 / -1;
    }
    /* Fix r1 (judges): one two-column grid for the three rows (a subgrid), so every label starts at the same x
       right of the widest numeral + italic unit. */
    .facts__list {
      grid-template-columns: max-content minmax(0, 1fr);
      margin-top: var(--s6);
    }
    .fact,
    .fact + .fact {
      display: grid;
      grid-column: 1 / -1;
      grid-template-columns: subgrid;
      align-items: baseline;
      column-gap: var(--s5);
      padding: var(--s4) 0;
      border-left: 0;
    }
    .fact + .fact {
      border-top: 1px solid var(--rule);
    }
    .fact:last-child {
      border-bottom: 1px solid var(--rule);
    }
    .fact__txt {
      margin-top: 0;
    }
  }
}

/* ---- 08a-home.css ---- */
/* Gorda Digital Lab — v6. Home: image windows, work (§2.1.5) and the services teaser frame (§2.1.6). Owner: P3.
   Layout only for the shared components (credit, chip, formats, link): their type and colour rules live with their
   owners (02-type P1, 04b-media P2, 09-formats P4). */
@layer pages {
  /* --- windows (§1.6): an aspect box, the photograph cover-fitted at its focal point --pos -------------------------- */
  .home .win {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--plate);
  }
  .home .win--45 {
    aspect-ratio: 4 / 5;
  }
  .home .win--34 {
    aspect-ratio: 3 / 4;
  }
  .home .win--11 {
    aspect-ratio: 1 / 1;
  }
  .home .win > .frame,
  .home .win picture {
    display: block;
    width: 100%;
    height: 100%;
  }
  .home .win img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--pos, 50% 50%);
  }
  /* A before-photo whose largest rendition is under 2× its slot (corset-before, 592px): contained, never enlarged
     past the window, on the plate tone. */
  .home .win--contain img {
    object-fit: contain;
  }
  .home .win--contain > .frame {
    background: transparent;
  }
  .home .win > .chip--brand {
    position: absolute;
    left: var(--s1);
    bottom: var(--s1);
    z-index: 2;
  }
  .home .tile > .credit {
    margin-top: var(--s3);
    /* A credit that needs two lines splits evenly instead of leaving "for display" or "Before ·" alone. */
    text-wrap: balance;
  }
  /* Bleeds (§1.5) restated at page level: 04a's `figure { margin: 0 }` (components layer) outranks the base-layer
     `.bleed-start` margin on a <figure> (same workaround as 10-cases.css; P1/P2 to fix at the source). */
  .home .bleed-start {
    margin-inline-start: calc(-1 * var(--bleed-x));
  }

  /* --- work ------------------------------------------------------------------------------------------------- */
  /* The proof closes on paper before the night band starts (one --sec of paper, then the band's own padding). */
  .home .proof-sec {
    padding-bottom: var(--sec);
  }
  /* Fix r1 (judges): the work section is the home page's night gallery band (the prototype's light → dark → light
     rhythm); its own padding closes it before the services teaser returns to paper. */
  .work {
    padding-block: var(--sec);
  }
  .home .work .win {
    background: var(--night);
  }
  .work.night .strip__btn {
    border-color: var(--on);
    color: var(--on);
  }
  .work.night .strip__btn:hover,
  .work.night .strip__btn:focus-visible {
    background: var(--on);
    color: var(--ink);
  }
  /* Fix r1 (judges): one inter-case gap (96 at 1440, 64 on phones), not a full --sec plus a caption line. */
  .case-row + .case-row,
  .case-row + .case-pair {
    margin-top: max(var(--s8), calc(var(--sec) - var(--s6)));
  }
  .case-row__foot .link {
    margin-top: var(--s4);
  }
  .case-text {
    margin-top: var(--s4);
    max-width: 40ch;
    font-size: var(--t-body);
    line-height: 1.6;
    text-wrap: pretty;
  }
  .case-row .link,
  .case-duo__foot .link {
    margin-top: var(--s4);
  }

  /* alpine: the car bleeds from the left viewport edge to col 7; text + gravel cols 9–12, bottom-aligned. */
  .case-row--alpine {
    align-items: end;
  }
  .case-row__lead {
    grid-column: 1 / 8;
  }
  .case-row__lead > .credit {
    padding-inline-start: var(--bleed-x);
  }
  /* Fix r2 (judges): the alpine copy starts level with the top of the car and the gravel frame (3:4) closes level
     with its bottom; bottom-aligned copy left ~220px of night between the section deck and the eyebrow. */
  .case-row__side {
    grid-column: 9 / 13;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .case-row__side > .case-row__text > .kicker:first-child {
    margin-top: 0;
  }
  .case-row__second {
    margin-top: var(--s7);
  }

  /* tennis: title cols 1–7 | text + link cols 9–12 (bottom-aligned), then three 3:4 tiles of 4 columns. */
  .case-row__head {
    align-items: end;
  }
  .case-row__titles {
    grid-column: 1 / 8;
  }
  .case-row__aside {
    grid-column: 9 / 13;
  }
  .case-row__aside > .case-text {
    margin-top: 0;
  }
  .tiles {
    margin-top: var(--s7);
  }
  .tiles__track {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--g);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .tiles__nav {
    display: none;
  }
  .tiles__count {
    font-family: var(--mono);
    font-size: var(--t-credit);
    letter-spacing: 0.08em;
  }

  /* leggings | corset: two articles of 6 columns, a hairline between; title rows share a height (subgrid). */
  .case-pair {
    grid-template-rows: auto auto auto;
  }
  .case-duo {
    position: relative;
    display: grid;
    grid-column: span 6;
    grid-row: span 3;
    grid-template-rows: subgrid;
  }
  .case-duo:first-child {
    padding-inline-end: var(--s5);
  }
  .case-duo + .case-duo {
    padding-inline-start: var(--s5);
  }
  .case-duo + .case-duo::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--g) / -2);
    border-left: 1px solid var(--rule);
  }
  .case-duo__head {
    align-self: end;
  }
  .case-duo__pics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--g);
    align-items: start;
    margin-top: var(--s6);
  }

  /* --- services teaser: the head and the formats come from P1 / P4; only the section rhythm here --------------- */
  .services-teaser {
    padding-top: var(--sec);
  }

  /* --- ≤ 900: every composition stacks ----------------------------------------------------------------------- */
  @media (max-width: 900px) {
    .case-row__lead,
    .case-row__side,
    .case-row__titles,
    .case-row__aside {
      grid-column: 1 / -1;
    }
    .case-row__lead {
      margin-inline: calc(-1 * var(--bleed-x));
    }
    .case-row__lead > .credit {
      padding-inline: var(--bleed-x);
    }
    .case-row__side {
      display: block;
      margin-top: var(--s7);
    }
    .case-row__second {
      max-width: 50%;
    }
    .case-row__aside {
      margin-top: var(--s5);
    }
    .case-pair {
      grid-template-rows: none;
    }
    .case-duo {
      display: block;
      grid-column: 1 / -1;
      grid-row: auto;
    }
    .case-duo:first-child,
    .case-duo + .case-duo {
      padding-inline: 0;
    }
    .case-duo + .case-duo {
      margin-top: var(--s7);
      padding-top: var(--s7);
    }
    .case-duo + .case-duo::before {
      top: 0;
      right: 0;
      bottom: auto;
      left: 0;
      border-left: 0;
      border-top: 1px solid var(--rule);
    }
    .case-duo__pics {
      margin-top: var(--s5);
    }
  }

  /* --- ≤ 760: gravel hides; the tennis tiles become a scroll-snap strip at 78vw with arrows and a counter ------- */
  @media (max-width: 760px) {
    .case-row__second {
      display: none;
    }
    .tiles__track {
      display: flex;
      gap: var(--g);
      margin-inline: calc(-1 * var(--m));
      padding-inline: var(--m);
      overflow-x: auto;
      overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: var(--m);
      scrollbar-width: none;
    }
    .tiles__track::-webkit-scrollbar {
      display: none;
    }
    .tiles__track > li {
      flex: 0 0 78vw;
      scroll-snap-align: start;
    }
    .tiles__nav {
      display: flex;
      align-items: center;
      gap: var(--s4);
      margin-top: var(--s4);
    }
  }
}

/* ---- 08b-home-studio-faq.css ---- */
/* Gorda Digital Lab — v6. Home process (§2.1.7), studio (§2.1.8) and questions (§2.1.9). Owner: P3. */
@layer pages {
  /* --- process: plate from the left viewport edge to col 6 | cols 8–12 bottom-aligned --------------------------- */
  .process {
    padding-top: var(--sec);
  }
  .process__row {
    align-items: end;
  }
  .process__plate {
    grid-column: 1 / 7;
  }
  .process__plate > .credit {
    padding-inline-start: var(--bleed-x);
  }
  .process__body {
    grid-column: 8 / 13;
    padding-bottom: var(--s7);
  }
  .steps {
    margin: var(--head) 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--ink);
  }
  .step {
    display: grid;
    grid-template-columns: var(--s7) minmax(0, 1fr);
    padding-block: var(--s4);
    border-bottom: 1px solid var(--rule);
  }
  .step__n {
    padding-top: var(--s1);
  }
  .step__when {
    font-family: var(--mono);
    font-size: var(--t-credit);
    line-height: 1.5;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-2);
    font-variant-numeric: lining-nums tabular-nums;
  }
  .step__t {
    margin-top: var(--s1);
  }
  .step__txt {
    margin-top: var(--s2);
    max-width: 46ch;
    font-size: var(--t-body);
    line-height: 1.55;
  }
  .process__note {
    margin-top: var(--s5);
    font-size: var(--t-small);
  }
  .process__body > .link {
    margin-top: var(--s3);
  }
  .process > .guarantee-bar {
    margin-top: var(--block);
  }
  /* --- studio: portrait 1:1 cols 1–4 | note cols 6–12, bottom-aligned ------------------------------------------ */
  .studio {
    align-items: end;
    padding-top: var(--sec);
  }
  .studio__portrait {
    grid-column: 1 / 5;
    margin: 0;
  }
  .studio__portrait > .credit {
    margin-top: var(--s3);
  }
  .studio__note {
    grid-column: 6 / 13;
    padding-bottom: var(--s6);
  }
  .studio__note > .quote {
    margin: var(--s5) 0 0;
  }
  .studio__note > .quote > p::before {
    content: "\201C";
    margin-inline-start: -0.42em;
  }
  .studio__note > .quote > p::after {
    content: "\201D";
  }
  .sig {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s2) var(--s5);
    margin-top: var(--s6);
    padding-top: var(--s4);
    border-top: 1px solid var(--ink);
  }
  /* The role wraps only at its " · " (each part stays on one line). */
  .sig__part {
    white-space: nowrap;
  }
  .sig__role {
    font-family: var(--mono);
    font-size: var(--t-credit);
    line-height: 1.5;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-2);
  }

  /* --- questions: open Q&A, 3 × 2 above 1100, 2 columns 761–1100, 1 column ≤ 760 -------------------------------- */
  /* The last paper section: a short foot, because the night band's own --sec follows (rowscan counts the paper and
     the night padding as one blank band, limit --sec + 48px). */
  .questions {
    padding-block: var(--sec) var(--s6);
  }
  .questions .qa {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .questions .qa > div {
    border-top-color: var(--rule);
  }
  .questions__link {
    margin-top: var(--s6);
  }

  @media (max-width: 1100px) {
    .questions .qa {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (max-width: 900px) {
    .process__row {
      row-gap: 0;
    }
    .process__plate,
    .process__body,
    .studio__portrait,
    .studio__note {
      grid-column: 1 / -1;
    }
    /* kicker + title → the plate → steps, note, link */
    .process__body {
      display: contents;
    }
    .process__body > .kicker {
      order: -3;
    }
    .process__body > .title {
      order: -2;
    }
    .process__plate {
      order: -1;
      margin-top: var(--head);
      margin-inline: calc(-1 * var(--bleed-x));
    }
    .process__plate > .credit {
      padding-inline: var(--bleed-x);
    }
    .process__body > * {
      grid-column: 1 / -1;
    }
    /* A grid item stretches: keep the link's underline to its own text. */
    .process__body > .link {
      justify-self: start;
    }
    .studio__note {
      margin-top: var(--s7);
      padding-bottom: 0;
    }
  }
  @media (max-width: 760px) {
    .questions .qa {
      grid-template-columns: 1fr;
    }
    /* §6.4 trim 2 at 375: the process plate at 1:1. */
    .process__plate > .win {
      aspect-ratio: 1 / 1;
    }
    /* §6.4 trim 1 at 375 (home Q&A to four items): "What do you need" and "How fast" are already answered by the
       first process step and the facts strip; both stay on /faq/ and in the DOM. */
    .questions .qa > div:nth-child(3),
    .questions .qa > div:nth-child(4) {
      display: none;
    }
    .studio__note > .quote > p::before {
      margin-inline-start: 0;
    }
  }
}

/* ---- 09-formats.css ---- */
/* Gorda Digital Lab — v6. The formats component and /services/ (spec-v6 §1.13, §2.1.6, §2.4). Owner: P4.
   Font rules for .format__fig / .format__name (serif roles) live in 02-type.css; this file sets their layout only.
   Reference: v6-reference/pages/services-* (P0). Rules for the /services/-only blocks are scoped under .page-services. */
@layer pages {
  /* --- formats, home (§2.1.6): four columns, a rule on the left of columns 2–4 -------------------------------- */
  .formats {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .formats:not(.formats--rows) {
    display: grid;
    /* the Retainer column is wider: "12 a month" is the widest numeral and must not cross the page margin */
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.25fr);
    border-bottom: 1px solid var(--ink);
  }
  .formats:not(.formats--rows) > .format {
    display: flex;
    flex-direction: column;
    padding: var(--s6) var(--g) var(--s6);
    border-left: 1px solid var(--rule);
  }
  .formats:not(.formats--rows) > .format:first-child {
    padding-left: 0;
    border-left: 0;
  }
  .format__fig {
    margin: 0 0 var(--s5);
  }
  /* The unit after the Retainer numeral sits on the numeral's baseline at --t-unit (.unit, P1). It takes the
     numeral's own face (italic Bodoni at ≈ 56px, as in the P0 reference): Inter Tight at that size read as a
     second heading. `inherit` keeps var(--serif) in 02-type.css only. */
  .format__unit {
    margin-inline-start: 0.3em;
    font-family: inherit;
    font-style: italic;
    font-weight: inherit;
    line-height: 0;
  }
  /* the italic Retainer numeral starts at the left margin: .04em keeps its overhang inside it (§1.2) */
  #retainer .format__fig {
    padding-inline-start: 0.04em;
  }
  .format__name {
    margin: 0;
  }
  .format__count {
    margin: var(--s2) 0 0;
    font-family: var(--mono);
    font-size: var(--t-credit);
    line-height: 1.5;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-variant-numeric: lining-nums tabular-nums;
    color: var(--ink);
  }
  .format__use {
    margin: var(--s4) 0 0;
    font-size: var(--t-body);
    line-height: 1.5;
    max-width: 30ch;
    text-wrap: balance;
  }
  /* /services/ rows: the text side is 5 columns wide, so the one-line use reads on one line there */
  .formats--rows .format__use {
    max-width: 44ch;
  }
  .format__spec {
    list-style: none;
    margin: var(--s5) 0 0;
    padding: 0;
  }
  .format__spec li {
    padding: var(--s3) 0;
    border-top: 1px solid var(--rule);
    font-size: var(--t-small);
    line-height: 1.4;
    text-wrap: pretty;
  }
  .formats:not(.formats--rows) .format__use {
    min-height: 3em;
  }

  /* --- foot row: "In every set" cols 1–7 | the one button cols 9–12 -------------------------------------------- */
  .formats__foot {
    margin-top: var(--s6);
    row-gap: var(--s5);
    align-items: start;
  }
  .formats__every {
    grid-column: 1 / 8;
    margin: 0;
    font-size: var(--t-body);
    line-height: 1.6;
    max-width: 60ch;
    text-wrap: pretty;
  }
  .formats__every .kicker {
    display: block;
    margin-bottom: var(--s3);
  }
  .formats__act {
    grid-column: 9 / 13;
  }
  .formats:not(.formats--rows) + .formats__foot .formats__act {
    display: grid;
    justify-items: end;
    text-align: right;
  }
  .formats__note {
    margin: var(--s3) 0 0;
    font-size: var(--t-small);
    line-height: 1.5;
  }

  /* --- guarantee bar (§1.13): one line between two rules --------------------------------------------------------- */
  .guarantee-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: var(--s5);
    row-gap: var(--s2);
    margin: 0;
    padding: var(--s5) 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
  }
  .guarantee-bar__label {
    font-family: var(--mono);
    font-size: var(--t-credit);
    line-height: 1.5;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .guarantee-bar__text {
    font-size: var(--t-body);
    line-height: 1.6;
    max-width: none;   /* one line at ≥ 1280, as the bar is meant to read (≈ 113 characters) */
    text-wrap: pretty;
  }

  /* --- image windows (aspect-ratio boxes, object-fit: cover at the inherited --pos) ------------------------------ */
  :is(.format__lead, .format__comp, .deliverables__tile, .svc-title .title-row__frame) {
    position: relative;
    overflow: hidden;
  }
  .format__lead,
  .svc-title .title-row__frame {
    aspect-ratio: 4 / 5;
  }
  .format__comp,
  .deliverables__tile {
    aspect-ratio: 3 / 4;
  }
  :is(.format__lead, .format__comp, .deliverables__tile, .svc-title .title-row__frame) :is(.frame, picture) {
    display: block;
    width: 100%;
    height: 100%;
  }
  :is(.format__lead, .format__comp, .deliverables__tile, .svc-title .title-row__frame) img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--pos, 50% 50%);
  }
  :is(.format__pics, .svc-title__plate, .deliverables) .credit {
    margin: var(--s3) 0 0;
  }

  /* --- /services/ title row (§2.4): head + deck cols 1–7, the plate cols 9–12 across both rows ------------------ */
  .svc-title {
    grid-template-rows: minmax(0, 1fr) auto;
    row-gap: var(--s5);
    align-items: end;
  }
  .svc-title__head {
    grid-column: 1 / 8;
    grid-row: 1;
  }
  .svc-title__deck {
    grid-column: 1 / 8;
    grid-row: 2;
    padding-bottom: calc(var(--s3) + var(--t-credit) * 1.5);
  }
  /* 38ch (not the 42ch default) sets the deck in five lines at 1440, so the text group starts within 200px of the
     plate's top: no dead column beside the title plate (§6.3). */
  @media (width > 900px) {
    .svc-title__deck .lead {
      max-width: 38ch;
    }
  }
  .svc-title__deck .cta-group {
    margin-top: var(--s6);
  }
  .svc-title__plate {
    grid-column: 9 / 13;
    grid-row: 1 / 3;
    margin: 0;
  }

  /* --- /services/ formats as editorial rows (§2.4) ----------------------------------------------------------------- */
  .format--row {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--g);
    align-items: end;
    padding-top: var(--head);
    border-top: 1px solid var(--rule);
  }
  .format--row + .format--row {
    margin-top: var(--s9);
  }
  .format__text {
    grid-column: 1 / 6;
    grid-row: 1;
    padding-inline-end: var(--s7);
    padding-bottom: calc(var(--s3) + var(--t-credit) * 1.5);
  }
  .format--row .format__spec {
    border-top: 1px solid var(--ink);
  }
  .format--row .format__spec li {
    border-top: 0;
    border-bottom: 1px solid var(--rule);
  }
  .format__files {
    margin: var(--s5) 0 0;
    font-size: var(--t-body);
    line-height: 1.6;
    max-width: 40ch;
    text-wrap: pretty;
  }
  .format__pics {
    grid-column: 6 / 13;
    grid-row: 1;
    display: grid;
    grid-template-columns: subgrid;
    align-items: end;
    margin: 0;
  }
  .format__lead {
    grid-column: 1 / 5;
    grid-row: 1;
  }
  .format__comp {
    grid-column: 5 / 8;
    grid-row: 1;
  }
  .format__pics .credit {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .format--mirror .format__text {
    grid-column: 8 / 13;
    padding-inline: var(--s7) 0;
  }
  .format--mirror .format__pics {
    grid-column: 1 / 8;
  }
  .format--mirror .format__lead {
    grid-column: 4 / 8;
  }
  .format--mirror .format__comp {
    grid-column: 1 / 4;
  }
  .formats--rows + .formats__foot {
    margin-top: var(--s9);
    padding-top: var(--s6);
    border-top: 1px solid var(--ink);
  }

  /* --- terms | add-ons --------------------------------------------------------------------------------------------- */
  .svc-terms {
    padding-top: var(--sec);
    row-gap: var(--s8);
    align-items: start;
  }
  .svc-terms__col {
    grid-column: 1 / 7;
    padding-inline-end: var(--s6);
  }
  .svc-terms__col--addons {
    grid-column: 7 / 13;
    padding-inline: var(--s6) 0;
    border-left: 1px solid var(--rule);
  }
  .svc-terms .case-title {
    margin-top: var(--s3);
  }
  .page-services .defs {
    margin: var(--s5) 0 0;
    border-top: 1px solid var(--ink);
    border-bottom: 0;
  }
  .page-services .defs > div {
    display: grid;
    grid-template-columns: minmax(0, 11em) minmax(0, 1fr);
    column-gap: var(--g);
    padding: var(--s4) 0;
    border-top: 0;
    border-bottom: 1px solid var(--rule);
  }
  .page-services .defs dt {
    padding-top: 0.3em;
    font-family: var(--mono);
    font-size: var(--t-credit);
    line-height: 1.5;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .page-services .defs dd {
    margin: 0;
    font-size: var(--t-body);
    line-height: 1.55;
    color: var(--ink);
    text-wrap: pretty;
  }
  .svc-terms__note {
    margin: var(--s5) 0 0;
    font-size: var(--t-small);
    line-height: 1.5;
  }
  .svc-terms__note + .link {
    margin-top: var(--s2);
  }

  /* --- guarantee: head row with the Fidelity Guarantee note, the deliverable strip, the Compliance Pack row ------ */
  .svc-guarantee {
    padding-top: var(--sec);
  }
  .svc-guarantee .sec-head {
    margin-bottom: 0;
  }
  .svc-guarantee__note p:not(.kicker) {
    margin: 0;
    font-size: var(--t-body);
    line-height: 1.6;
    max-width: 52ch;
  }
  .svc-guarantee__note p:not(.kicker) + p {
    margin-top: var(--s3);
  }
  .svc-guarantee__note .kicker {
    margin-bottom: var(--s3);
    padding-top: var(--s3);
    border-top: 1px solid var(--ink);
  }
  .page-services .deliverables {
    margin: var(--head) 0 0;
  }
  .deliverables__row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--g);
  }
  .svc-compliance {
    margin-top: var(--s7);
    padding-top: var(--s5);
    border-top: 1px solid var(--ink);
    row-gap: var(--s3);
    align-items: start;
  }
  .svc-compliance .case-title {
    grid-column: 1 / 5;
    margin: 0;
  }
  .svc-compliance__txt {
    grid-column: 5 / 11;
    margin: 0;
    font-size: var(--t-body);
    line-height: 1.6;
    max-width: 62ch;
  }
  .svc-compliance__link {
    grid-column: 11 / 13;
    justify-self: end;
    margin-top: calc(-1 * var(--s3));
  }

  /* --- questions: head on its own row, the open Q&A in two columns --------------------------------------------- */
  /* the inquiry band brings its own --sec on top; a second --sec here was a 256px band of empty paper (§6.3) */
  .svc-questions {
    padding-top: var(--sec);
    padding-bottom: var(--s6);
  }
  .svc-questions .qa {
    margin-top: var(--head);
  }
  .svc-questions > .link {
    margin-top: var(--s6);
  }

  @media (width > 760px) {
    .svc-questions .qa {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 1100px) {
    .formats:not(.formats--rows) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .formats:not(.formats--rows) > .format:nth-child(3) {
      padding-left: 0;
      border-left: 0;
    }
    .formats:not(.formats--rows) > .format:nth-child(n + 3) {
      border-top: 1px solid var(--rule);
    }
    .format__text,
    .format--mirror .format__text {
      padding-inline: 0;
    }
    .svc-compliance .case-title {
      grid-column: 1 / -1;
    }
    .svc-compliance__txt {
      grid-column: 1 / 10;
    }
  }

  @media (max-width: 900px) {
    .page-services .svc-title {
      padding-top: var(--s7);
      grid-template-rows: none;
    }
    .svc-title__head,
    .svc-title__deck,
    .svc-title__plate {
      grid-column: 1 / -1;
      grid-row: auto;
    }
    .svc-title__deck {
      padding-bottom: 0;
    }
    .svc-title .title-row__frame {
      width: 100%;
      max-height: 52svh;
      aspect-ratio: 4 / 5;
    }
    .format--row {
      row-gap: var(--s6);
    }
    .format__text,
    .format--mirror .format__text {
      grid-column: 1 / -1;
      grid-row: 1;
      padding: 0;
    }
    .format__pics,
    .format--mirror .format__pics {
      grid-column: 1 / -1;
      grid-row: 2;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: var(--g);
    }
    .format__lead,
    .format--mirror .format__lead {
      grid-column: 1;
      aspect-ratio: 3 / 4;
    }
    .format__comp,
    .format--mirror .format__comp {
      grid-column: 2;
    }
    .formats__every,
    .formats__act {
      grid-column: 1 / -1;
    }
    .formats:not(.formats--rows) + .formats__foot .formats__act {
      justify-items: start;
      text-align: left;
    }
    .svc-terms__col,
    .svc-terms__col--addons {
      grid-column: 1 / -1;
      padding: 0;
      border: 0;
    }
    .svc-compliance__txt,
    .svc-compliance__link {
      grid-column: 1 / -1;
      justify-self: start;
      margin-top: 0;
    }
  }

  @media (max-width: 760px) {
    /* one row per format: the numeral left (84px), the text on the right; spec list and sentence full width */
    .formats:not(.formats--rows) {
      grid-template-columns: minmax(0, 1fr);
    }
    .formats:not(.formats--rows) > .format,
    .formats:not(.formats--rows) > .format:nth-child(3) {
      padding: var(--s5) 0;
      border-left: 0;
      border-top: 1px solid var(--rule);
    }
    .formats:not(.formats--rows) > .format:first-child {
      border-top: 0;
    }
    .formats:not(.formats--rows) > .format,
    .format__text {
      display: grid;
      grid-template-columns: 96px minmax(0, 1fr);
      column-gap: var(--s4);
      align-items: start;
    }
    .formats:not(.formats--rows) > .format > *,
    .format__text > * {
      grid-column: 2;
    }
    .formats:not(.formats--rows) .format__fig,
    .format__text > .format__fig {
      grid-column: 1;
      grid-row: 1 / 4;
      margin: 0;
    }
    .format__unit {
      display: block;
      margin: var(--s2) 0 0;
      font-family: var(--mono);
      font-size: var(--t-credit);
      font-style: normal;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .format__use,
    .formats:not(.formats--rows) .format__use {
      min-height: 0;
    }
    .format__spec,
    .format__files {
      grid-column: 1 / -1;
    }
    .format--row {
      padding-top: var(--s5);
      row-gap: var(--s5);
    }
    .format--row + .format--row {
      margin-top: var(--s7);
    }
    .format__spec {
      margin-top: var(--s4);
    }
    .format__spec li {
      padding: var(--s2) 0;
    }
    .format__files {
      margin-top: var(--s4);
    }
    .formats--rows + .formats__foot {
      margin-top: var(--s7);
    }
    .formats__act .btn {
      width: 100%;
    }
    .formats:not(.formats--rows) + .formats__foot .formats__act {
      justify-items: stretch;
    }
    .svc-terms {
      row-gap: var(--s7);
    }
    .page-services .defs > div {
      grid-template-columns: minmax(0, 1fr);
      row-gap: var(--s1);
    }
    .deliverables__row {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      row-gap: var(--g);
    }
  }
}

/* ---- 10-cases.css ---- */
/* Gorda Digital Lab — v6. /work/ and the case pages (spec-v6 §2.2, §2.3; reference v6-reference/pages/tennis-*).
   Owner: P6. Layout only for the shared components (.proof, .credit, .chip, .pins: P2; .kicker, .display, .title,
   .case-title, .link, .title-row: P1), under .page-case / .page-work. Spacing from the §1.4 tokens, type from the
   --t-* tokens, breakpoints 1100 / 900 / 760 / 560 only. */
@layer pages {
  /* --- image windows (§1.6): a box with --ar and the focal point --pos; the picture fills it ---------------- */
  :is(.page-case, .page-work) .win {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: var(--ar, 3 / 4);
  }
  :is(.page-case, .page-work) .win > .frame {
    position: absolute;
    inset: 0;
    height: 100%;
  }
  :is(.page-case, .page-work) .win > .frame > picture {
    display: block;
    width: 100%;
    height: 100%;
  }
  :is(.page-case, .page-work) .win img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--pos, 50% 50%);
  }
  /* A companion beside a lead: as tall as the lead, whatever its width (§2.3 `lead` row). */
  .page-case .win--fill {
    flex: 1 1 auto;
    min-height: 0;
    aspect-ratio: auto;
  }
  /* §1.9: a pinned image keeps its native ratio (--ar = w / h), so pin percentages map 1:1. */
  .page-case .win--native img {
    object-fit: fill;
  }
  a.win {
    color: inherit;
    text-decoration: none;
  }

  /* Bleeds (§1.5), restated at page level: 04a's `figure { margin: 0 }` (components layer) outranks the base-layer
     `.bleed-*` margins on a <figure>. */
  :is(.page-case, .page-work) .bleed-start {
    margin-inline-start: calc(-1 * var(--bleed-x));
  }
  :is(.page-case, .page-work) .bleed-end {
    margin-inline-end: calc(-1 * var(--bleed-x));
  }
  /* A bled figure's credit starts at the container edge, not at the viewport edge. */
  :is(.page-case, .page-work) .bleed-start > .credit {
    padding-inline-start: var(--bleed-x);
  }

  /* --- case hero (§2.3): figure cols 7–12 first in the DOM, text cols 1–5 bottom-aligned to the image ---------- */
  .case-hero {
    padding-top: var(--s9);
    align-items: end;
  }
  .case-hero__fig {
    grid-column: 7 / 13;
    grid-row: 1;
  }
  /* The window keeps the bottom-aligned button inside the first viewport (652 × 731 at 1440×900). */
  .page-case .case-hero__frame {
    aspect-ratio: var(--ar, 4 / 5);
    width: 100%;
    max-height: calc(100svh - var(--header-h) - var(--s9) - var(--s5));
  }
  /* Corset (pinned cover): never cropped; it scales down to the same height, right-aligned. */
  .page-case .case-hero--pinned .case-hero__frame {
    aspect-ratio: var(--ar);
    width: min(100%, calc((100svh - var(--header-h) - var(--s9) - var(--s5)) * 0.8));
    margin-inline-start: auto;
  }
  .case-hero--pinned .case-hero__fig > .credit {
    text-align: end;
  }
  .case-hero__checks {
    grid-column: 7 / 13;
    grid-row: 2;
    margin-top: var(--s5);
  }
  /* ≥ 901 the three checks run side by side under the image (term over note), so the row stays short and the
     text column beside it is not left empty (a stacked list there is ~240px of void). Below ~1400 the terms take
     two even lines each; the row still reads as one caption. */
  @media (width > 900px) {
    .case-hero__checks .checks {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      column-gap: var(--g);
    }
    .case-hero__checks .check {
      grid-template-columns: 24px minmax(0, 1fr);
      align-items: start;
    }
    .case-hero__checks .check__note {
      grid-column: 2;
      text-align: start;
    }
  }
  .case-hero__text {
    grid-column: 1 / 6;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* the figure's credit line under the image: the button's bottom meets the image's bottom */
    padding-bottom: calc(var(--s3) + var(--t-credit) * 1.5);
  }
  .crumbs a {
    text-decoration: none;
    border-bottom: 1px solid currentColor;
  }
  .crumbs a:hover {
    border-bottom-color: transparent;
  }
  .case-hero__brief {
    margin-top: var(--s5);
  }
  /* Fix r1: the meta is two fixed credit lines (project · images · models · settings / AI-generated · retouched). */
  .page-case .case-hero__meta {
    margin-top: var(--s4);
  }
  .page-case .case-hero__credit {
    margin-top: 0;
    text-wrap: balance;
  }
  /* --s7 (integration): the bottom-aligned text column then starts within 200px of the image top at 1440 on every
     case (leggings measured 201 with --s6, §6.3). */
  .case-hero__cta {
    margin-top: var(--s7);
  }

  /* --- proof plates (§2.3): P2's .proof plate (14-proof.css) inside a section; the page sets the spacing only. -- */
  .case-proof {
    padding-top: var(--sec);
  }

  /* --- what we did (§2.3): 1:1 plate cols 1–5 (P0 deviation 2) | list cols 7–12, bottom-aligned --------------- */
  .page-case .did {
    padding-top: var(--sec);
    align-items: end;
  }
  .did__plate {
    grid-column: 1 / 6;
  }
  /* A short list (≤ 3 rows): a 4-column plate, so the list column is not empty for more than 200px above it. */
  .did--short .did__plate {
    grid-column: 1 / 5;
  }
  .did__body {
    grid-column: 7 / 13;
    padding-bottom: calc(var(--s3) + var(--t-credit) * 1.5);
  }
  .did__list {
    margin: var(--s5) 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--ink);
  }
  .did__list > li {
    display: grid;
    grid-template-columns: var(--s8) minmax(0, 1fr);
    padding: var(--s4) 0 var(--s5);
    border-bottom: 1px solid var(--rule);
    font-size: var(--t-lead);
    line-height: 1.55;
    text-wrap: pretty;
  }
  .did__n {
    padding-top: 0.45em;
    font-family: var(--mono);
    font-size: var(--t-credit);
    line-height: 1.5;
    letter-spacing: 0.08em;
    font-variant-numeric: lining-nums tabular-nums;
  }
  /* Corset: its two images as the diptych, cols 1–6, the list cols 7–12. */
  .did--pair .did__pair {
    grid-column: 1 / 7;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--g);
  }
  .did--pair .did__body {
    grid-column: 8 / 13;
  }
  .did--pair .set-meta {
    margin-top: var(--s4);
  }

  /* --- the set (§2.3): lead | trio | pair rows, no chapter headings ---------------------------------------------- */
  .case-set {
    padding-top: var(--sec);
  }
  .page-case .set-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s2) var(--g);
    margin-bottom: var(--head);
    padding-bottom: var(--s4);
    border-bottom: 1px solid var(--ink);
  }
  .page-case .set-head > .set-meta {
    margin-top: 0;
  }
  .set-rows {
    display: grid;
    row-gap: var(--block);
  }
  .set-row--lead {
    align-items: stretch;
  }
  .set-lead {
    grid-column: 1 / 8;
    grid-row: 1;
  }
  .set-row--lead .set-comp {
    grid-column: 8 / 13;
    grid-row: 1;
    display: flex;
    flex-direction: column;
  }
  .set-row--mirror .set-lead {
    grid-column: 6 / 13;
  }
  .set-row--mirror .set-comp {
    grid-column: 1 / 6;
  }
  .set-row--pair > figure {
    grid-column: span 6;
  }
  .set-row--trio > figure {
    grid-column: span 4;
  }

  /* --- case end (§2.3): offer cols 1–5 | next case cols 7–12, previous and all work under it -------------------- */
  /* --sec above, as every section (§1.4); below, only the links' breathing room before the night band's own
     --sec (a taller gap reads as a blank band, §6.3). */
  .case-end {
    padding-top: var(--sec);
    padding-bottom: var(--s5);
    align-items: end;
  }
  .case-end__offer {
    grid-column: 1 / 6;
    grid-row: 1;
  }
  .case-end__offer > .lead {
    margin-top: var(--s5);
  }
  .case-end__offer > .cta-group {
    margin-top: var(--s6);
  }
  .case-end__next {
    grid-column: 7 / 13;
    grid-row: 1;
  }
  .case-end__links {
    grid-column: 7 / 13;
    grid-row: 2;
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2) var(--s6);
    margin-top: var(--s5);
    border-top: 1px solid var(--rule);
  }
  .next-case {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: var(--g);
    align-items: end;
    color: inherit;
    text-decoration: none;
  }
  /* The card's plate is 2 of its 6 columns (259px tall at 1440), close to the offer column's height, so the offer
     column beside it is never empty for long (§1.5); the title gets 4 columns. */
  .next-case__frame {
    grid-column: 1 / 3;
  }
  /* kicker → title --s5 and title → credit --s3 come from 02-type / 04b; no extra gap here. */
  .next-case__text {
    grid-column: 3 / 7;
    display: flex;
    flex-direction: column;
  }
  .next-case__title {
    display: block;
  }
  /* The italic clause of a listed case title starts its own line ("Leggings, / matched to the product photo."),
     never mid-line after a single roman word. */
  :is(.work-spread, .next-case) .case-title em {
    display: block;
  }
  .next-case:hover .next-case__title {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.12em;
  }

  /* --- /work/ (§2.2): four spreads, cover 4:5 across 7 columns from the viewport edge, alternating ------------- */
  .work-title {
    padding-bottom: var(--head);
  }
  .work-spreads {
    display: grid;
    row-gap: var(--sec);
  }
  .work-spread {
    align-items: end;
  }
  .work-spread__cover {
    grid-column: 1 / 8;
    grid-row: 1;
  }
  .work-spread__cover > a {
    display: block;
  }
  .work-spread--mirror .work-spread__cover {
    grid-column: 6 / 13;
  }
  .work-spread__side {
    grid-column: 9 / 13;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: calc(var(--s3) + var(--t-credit) * 1.5);
  }
  .work-spread--mirror .work-spread__side {
    grid-column: 1 / 5;
  }
  .work-spread__text > .case-title {
    margin-top: var(--s4);
  }
  .work-spread__text > .credit {
    margin-top: 0;
  }
  .work-spread__text > .body {
    margin-top: var(--s4);
  }
  .work-spread .case-title a {
    color: inherit;
    text-decoration: none;
  }
  .work-spread .case-title a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.12em;
  }
  /* The side figure fills the four side columns, so the column beside the 1,029px cover is never empty for more
     than 200px (§1.5 no-void rule). */
  .work-spread__inset {
    width: 100%;
    margin-top: var(--s6);
  }
  .work-spread__link {
    margin-top: var(--s4);
  }
  /* --- /work/ index: every additional case as a card, four across (owner decision 11.11) ------------------------ */
  .work-index {
    padding-top: var(--sec);
  }
  .work-index__head {
    align-items: end;
    padding-bottom: var(--head);
    border-top: 1px solid var(--rule);
    padding-top: var(--s5);
  }
  .work-index__title {
    grid-column: 1 / 8;
    margin: 0;
  }
  .work-index__deck {
    grid-column: 9 / 13;
    margin: 0;
  }
  .work-index__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--g);
    row-gap: var(--s8);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .work-card__link {
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
  }
  .work-card__fig {
    margin: 0;
    overflow: hidden;
  }
  .work-card__fig .win {
    display: block;
    transition: transform 0.6s var(--ease);
  }
  .work-card__link:hover .work-card__fig .win {
    transform: scale(1.03);
  }
  .work-card__credit {
    margin-top: var(--s3);
  }
  .work-card__title {
    margin-top: var(--s2);
    font-family: var(--serif);
    font-weight: var(--serif-w);
    font-size: var(--t-q);
    line-height: 1.15;
    letter-spacing: -0.01em;
  }
  .work-card__title em {
    display: block;
  }
  .work-card__link:hover .work-card__title {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.12em;
  }
  @media (max-width: 1100px) {
    .work-index__grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  @media (max-width: 900px) {
    .work-index__title,
    .work-index__deck {
      grid-column: 1 / -1;
    }
    .work-index__head {
      row-gap: var(--s4);
    }
  }
  @media (max-width: 560px) {
    .work-index__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: var(--s3);
      row-gap: var(--s6);
    }
  }
  .work-sheet {
    padding-top: var(--sec);
    padding-bottom: var(--s6);
  }

  /* --- ≤ 900: every two-column composition stacks ---------------------------------------------------------------- */
  @media (max-width: 900px) {
    .case-hero {
      padding-top: 0;
      row-gap: var(--s5);
    }
    .case-hero__fig {
      grid-column: 1 / -1;
      margin-inline: calc(-1 * var(--m));
    }
    .case-hero__fig > .credit,
    .case-hero__checks {
      padding-inline: var(--m);
    }
    .page-case .case-hero__frame {
      aspect-ratio: var(--ar, 4 / 5);
      max-height: 52svh;
    }
    .page-case .case-hero--pinned .case-hero__frame {
      width: min(100%, calc(52svh * 0.8));
      margin-inline: auto;
    }
    .case-hero--pinned .case-hero__fig > .credit {
      text-align: center;
    }
    .case-hero__checks {
      grid-column: 1 / -1;
      grid-row: 3;
      margin-top: 0;
    }
    .case-hero__text {
      grid-column: 1 / -1;
      grid-row: 2;
      padding-bottom: 0;
    }
    /* §2.3: the button directly after the H1, so it sits inside 375×812. */
    .case-hero__text > .crumbs {
      order: 0;
    }
    .case-hero__text > .display {
      order: 1;
    }
    .case-hero__cta {
      order: 2;
      margin-top: var(--s5);
    }
    .case-hero__brief {
      order: 3;
    }
    .page-case .case-hero__meta {
      order: 4;
    }

    /* Fix r2 (judges): "What we did" follows a figure caption; one section-start step (48px), not 24px, so the
       caption and the kicker no longer read as one mono block. */
    .page-case .did {
      row-gap: var(--s7);
    }
    .did__plate,
    .did__body,
    .did--pair .did__pair,
    .did--pair .did__body {
      grid-column: 1 / -1;
    }
    .did__body {
      padding-bottom: 0;
    }

    .case-end {
      row-gap: var(--s6);
    }
    .case-end__offer,
    .case-end__next,
    .case-end__links {
      grid-column: 1 / -1;
      grid-row: auto;
    }
    .case-end__links {
      margin-top: calc(var(--s5) - var(--s6));
    }

    .work-spread {
      row-gap: var(--s5);
    }
    .page-work .work-spread__cover,
    .page-work .work-spread--mirror .work-spread__cover {
      grid-column: 1 / -1;
      grid-row: 1;
      margin-inline: calc(-1 * var(--m));
    }
    .work-spread__cover > .credit,
    .page-work .bleed-start > .credit {
      padding-inline: var(--m);
    }
    .work-spread__side,
    .work-spread--mirror .work-spread__side {
      grid-column: 1 / -1;
      grid-row: 2;
      padding-bottom: 0;
    }
    .work-spread__inset {
      width: calc(50% - var(--g) / 2);
    }
  }

  /* --- ≤ 760: the set runs two per row; a lead goes full-bleed ------------------------------------------------ */
  @media (max-width: 760px) {
    .set-rows {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: var(--g);
      row-gap: var(--s6);
    }
    .set-row {
      display: contents;
    }
    .page-case .set-lead,
    .page-case .set-row--mirror .set-lead {
      grid-column: 1 / -1;
      grid-row: auto;
      margin-inline: calc(-1 * var(--m));
    }
    .page-case .set-lead > .credit {
      padding-inline: var(--m);
    }
    .set-row--lead .set-comp,
    .set-row--mirror .set-comp,
    .set-row--pair > figure,
    .set-row--trio > figure {
      grid-column: auto;
      grid-row: auto;
      display: block;
    }
    .page-case .win--fill {
      aspect-ratio: 3 / 4;
    }
    /* Phone height budget (§6.4): Previous and All work on one row, tighter list rows, a shorter end. */
    .case-end__links {
      gap: 0 var(--s5);
    }
    .next-case__frame {
      grid-column: 1 / 4;
    }
    .next-case__text {
      grid-column: 4 / 7;
    }
    .did__list > li {
      padding: var(--s3) 0 var(--s4);
    }
    /* Fix r2 (judges): the brand's photo stays on phones (the deck promises it): the title runs full width, then
       the photo (left half) beside the summary and the link (right half). The cover's caption hides; its chip is
       the AI label and the case meta line follows directly. */
    .page-work .work-spread__cover > .credit {
      display: none;
    }
    .work-spread__side,
    .work-spread--mirror .work-spread__side {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: var(--g);
      align-items: start;
    }
    .work-spread__text {
      display: contents;
    }
    .work-spread__text > .credit {
      grid-column: 1 / -1;
      grid-row: 1;
    }
    .work-spread__text > .case-title {
      grid-column: 1 / -1;
      grid-row: 2;
    }
    .work-spread__text > .body {
      grid-column: 2;
      grid-row: 3;
      margin-top: var(--s5);
    }
    .work-spread__inset {
      grid-column: 1;
      grid-row: 3 / span 2;
      width: 100%;
      margin-top: var(--s5);
    }
    .work-spread__link {
      grid-column: 2;
      grid-row: 4;
      justify-self: start;
    }
    /* §6.2: the H1 and the whole first cover inside 375×812. */
    .work-title {
      padding-top: var(--s8);
      padding-bottom: var(--s5);
    }
  }
}

/* ---- 11a-process-faq.css ---- */
/* Gorda Digital Lab — v6. P5 shared pieces (sticky column, hairline rows, figures, next links)
   + /how-it-works/ (spec-v6 §2.5) + /faq/ (§2.6, built against the P0 reference frames). Owner: P5.
   v6 tokens only; breakpoints 1100 / 900 / 760; layout for the shared components (.title-row, .qa, .link,
   .case-title, .kicker) is page-scoped, never a font, colour or size rule (§1.13). */
@layer pages {
  /* --- P5 shared ------------------------------------------------------------------------------------------- */
  /* The sticky column (allow-list name); static ≤ 900 where the columns stack. */
  .sticky {
    position: sticky;
    top: calc(var(--header-h) + var(--s6));
    align-self: start;
  }
  /* Title rows: the kicker and the H1 travel together, bottom-aligned with whatever sits in cols 8/9–12. */
  :is(.page-process, .page-faq, .page-compliance, .page-thanks, .page-privacy) .title-row__main {
    align-self: end;
  }
  /* Hairline rows (lists on /how-it-works/, /ai-compliance/, /brief/thanks/, 404). */
  .p5-rows {
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--rule);
  }
  .p5-rows > li {
    padding-block: var(--s3);
    border-top: 1px solid var(--rule);
    font-size: var(--t-body);
    line-height: 1.5;
    text-wrap: pretty;
  }
  /* One figure: ratio box + credit (macros/timeline.html plate()); `--pos` is the focal point. */
  .p5-fig {
    margin: 0;
    min-width: 0;
  }
  /* Next links: a row of .link, wrapping. */
  .p5-next ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--s6);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  /* --- /how-it-works/ title row: the rib triptych in cols 8–12 ------------------------------------------------- */
  .page-process .title-row > .proc-tri {
    grid-column: 8 / 13;
    grid-row: 1 / span 2;
    align-self: end;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--g);
  }

  /* --- #steps: sticky plan (cols 1–4) beside the timeline (cols 6–12), the bar under both ---------------------- */
  .proc-steps {
    padding-top: var(--s7);
  }
  .proc-steps__side {
    grid-column: 1 / 5;
  }
  .proc-steps__main {
    grid-column: 6 / 13;
  }
  .plan-block {
    margin-top: var(--s6);
  }
  .plan {
    margin: var(--s3) 0 0;
    border-top: 1px solid var(--ink);
  }
  .plan__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    column-gap: var(--g);
    padding-block: var(--s3);
    border-bottom: 1px solid var(--rule);
  }
  .plan dt {
    padding-top: var(--s1);
    font-family: var(--mono);
    font-size: var(--t-credit);
    line-height: 1.5;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-2);
  }
  .plan dd {
    margin: 0;
    font-size: var(--t-small);
    line-height: 1.5;
  }
  .plan__fine {
    margin-top: var(--s3);
    font-size: var(--t-small);
    line-height: 1.5;
    color: var(--ink-2);
  }
  /* Timeline: when (credit) | title + text; the first rule is ink, the others hairlines. */
  .timeline {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--ink);
  }
  .timeline__row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 5fr);
    column-gap: var(--g);
    padding-block: var(--s5);
  }
  .timeline__row + .timeline__row {
    border-top: 1px solid var(--rule);
  }
  .timeline__when {
    grid-column: 1;
    grid-row: 1 / span 2;
    padding-top: var(--s1);
    padding-right: var(--s4);
  }
  .timeline__t {
    grid-column: 2;
  }
  .timeline__text {
    grid-column: 2;
    margin-top: var(--s2);
    font-size: var(--t-body);
    line-height: 1.6;
    max-width: 62ch;
    text-wrap: pretty;
  }
  .proc-bar {
    margin-top: var(--s8);
  }

  /* --- #send-us: h2, deck, the photo pair (cols 1–4) | two lists + next links (cols 6–12), bottom-aligned ------ */
  .send-us {
    padding-top: var(--sec);
    padding-bottom: var(--sec);
    align-items: end;
  }
  .send-us__head {
    grid-column: 1 / 5;
  }
  .send-us__main {
    grid-column: 6 / 13;
  }
  .send-us__pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--g);
    margin-top: var(--s6);
  }
  .send-us__lists {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--g);
    align-items: start;   /* both kickers on one line; the lists hang from it */
  }
  .send-us__label {
    margin-bottom: var(--s3);
  }
  .send-us .p5-rows > li {
    font-size: var(--t-small);
  }
  .send-us .p5-next {
    margin-top: var(--s6);
  }

  @media (max-width: 1100px) {
    .page-process .title-row > .proc-tri {
      grid-column: 7 / 13;
    }
    .send-us__lists {
      grid-template-columns: minmax(0, 1fr);
      row-gap: var(--s6);
    }
  }
  @media (max-width: 900px) {
    .sticky {
      position: static;
    }
    .page-process .title-row > .proc-tri {
      grid-column: 1 / -1;
      grid-row: auto;
      margin-top: var(--s6);
    }
    .proc-steps__side,
    .proc-steps__main,
    .send-us__head,
    .send-us__main {
      grid-column: 1 / -1;
    }
    .proc-steps__main {
      margin-top: var(--s7);
    }
    .send-us__main {
      margin-top: var(--s7);
    }
    .send-us__lists {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (max-width: 760px) {
    /* ~107px tiles: a credit part may wrap inside itself instead of running out of the page. */
    .proc-tri .credit > span {
      white-space: normal;
    }
    .timeline__row {
      grid-template-columns: minmax(0, 1fr);
      padding-block: var(--s4);
    }
    .timeline__when,
    .timeline__t,
    .timeline__text {
      grid-column: 1;
      grid-row: auto;
    }
    .timeline__when {
      padding: 0 0 var(--s2);
    }
    .proc-bar {
      margin-top: var(--s7);
    }
    .send-us__lists {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* --- /faq/ (P0 reference): sticky group links + button | four open groups ------------------------------------ */
  .faq-body {
    padding-top: var(--s5);
    padding-bottom: var(--sec);
    align-items: start;
  }
  .faq-side {
    grid-column: 1 / 5;
  }
  .faq-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--ink);
  }
  .faq-nav li {
    border-bottom: 1px solid var(--rule);
  }
  .faq-nav .link {
    width: 100%;
    align-items: center;
    padding: var(--s4) 0 var(--s3);
    border-bottom: 0;
  }
  .faq-nav .link::after {
    content: "↓";
    margin-inline-start: auto;
    font-family: var(--sans);
    font-size: var(--t-small);
    line-height: 1;
    letter-spacing: 0;
  }
  .faq-nav .link:hover,
  .faq-nav .link[aria-current] {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
  }
  /* Fix r1 (judges): 40-faq.js marks the group being read; its row turns its arrow to "→". */
  .faq-nav .link[aria-current]::after {
    content: "→";
  }
  .faq-side__cta {
    margin-top: var(--s6);
  }
  .faq-groups {
    grid-column: 6 / 13;
  }
  .faq-group {
    padding-top: var(--s4);
    border-top: 1px solid var(--ink);
  }
  .faq-group + .faq-group {
    margin-top: var(--s9);
  }
  .page-faq .faq-group .qa {
    margin-top: var(--s6);
  }
  /* Two-line questions break evenly (P0 reference). */
  .page-faq .qa dt {
    text-wrap: balance;
  }
  .faq-close {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--s5) var(--g);
    margin-top: var(--s9);
    padding-top: var(--s6);
    border-top: 1px solid var(--ink);
  }
  /* Fix r2 (judges): one question per row, question left and answer right, a hairline between rows. The two-column
     grid left an empty cell beside every odd last question ("Where are you based?"). */
  @media (width > 900px) {
    .page-faq .faq-group .qa {
      grid-template-columns: minmax(0, 1fr);
      row-gap: 0;
    }
    .page-faq .faq-group .qa > div {
      display: grid;
      grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
      column-gap: var(--g);
      align-items: baseline;
      padding: var(--s5) 0 var(--s6);
    }
    .page-faq .faq-group .qa > div:last-child {
      border-bottom: 1px solid var(--rule);
    }
    .page-faq .faq-group .qa dd {
      margin-top: 0;
    }
  }
  @media (max-width: 900px) {
    .faq-side {
      grid-column: 1 / -1;
    }
    .faq-groups {
      grid-column: 1 / -1;
      margin-top: var(--s8);
    }
    .faq-nav ul {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: var(--g);
    }
    .faq-close {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  @media (max-width: 760px) {
    .faq-body {
      padding-top: 0;
    }
    /* Fix r2 (judges): the 1440 pattern, one full-width hairline row per group (label left, arrow right, 44px);
       the outlined chips wrapped raggedly (2, then 1 and 1). */
    .faq-nav ul {
      display: block;
    }
    .faq-nav .link {
      min-height: 44px;
      padding: var(--s3) 0;
    }
    .faq-side__cta {
      margin-top: var(--s5);
    }
    .faq-side__cta .btn,
    .faq-close .btn {
      width: 100%;
    }
    .faq-groups {
      margin-top: var(--s8);
    }
    .faq-group + .faq-group {
      margin-top: var(--s8);
    }
  }
}

/* ---- 11b-compliance-legal.css ---- */
/* Gorda Digital Lab — v6. /ai-compliance/ (spec-v6 §2.7), /privacy/ (§2.10), /brief/thanks/ (§2.9) and the 404
   (§2.11), on the /faq/ reference grammar: title row, sticky contents column, open hairline rows. Owner: P5.
   v6 tokens only; breakpoints 1100 / 900 / 760. Sticky names on the allow-list: `.toc`, `.legal-toc`. */
@layer pages {
  /* --- /ai-compliance/ title row: the H1 in cols 1–8 (three lines, not four), "In short" in cols 9–12, bottom-aligned */
  .page-compliance .title-row > .title-row__main {
    grid-column: 1 / 9;
  }
  .page-compliance .title-row > .in-short {
    grid-column: 9 / 13;
    grid-row: 1 / span 2;
    align-self: end;
  }
  .in-short .p5-rows {
    margin-top: var(--s3);
    border-top: 1px solid var(--ink);
  }
  .in-short .p5-rows > li {
    border-top-color: var(--rule);
  }
  .in-short .p5-rows > li:first-child {
    border-top: 0;
  }
  .c-title-cta {
    display: none;
  }
  @media (max-width: 760px) {
    .page-compliance .title-row > .c-title-cta {
      display: block;
      grid-column: 1 / -1;
      margin-top: var(--s6);
    }
    .c-title-cta .btn {
      width: 100%;
    }
  }

  /* --- contents column + main column (compliance and privacy) ---------------------------------------------------- */
  .legal-body {
    padding-top: var(--s5);
    padding-bottom: var(--sec);
    align-items: start;
  }
  .toc,
  .legal-toc {
    position: sticky;
    top: calc(var(--header-h) + var(--s6));
    grid-column: 1 / 5;
    align-self: start;
  }
  .toc__list {
    margin: var(--s3) 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--ink);
  }
  .toc__list > li {
    border-bottom: 1px solid var(--rule);
  }
  .toc__list a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding-block: var(--s2);
    font-size: var(--t-small);
    line-height: 1.4;
    text-decoration: none;
  }
  .toc__list a:hover,
  .toc__list a:focus-visible {
    text-decoration: underline;
  }
  .legal-toc .toc__title {
    margin-top: var(--s5);
  }
  .legal-main {
    grid-column: 6 / 13;
  }

  /* --- /ai-compliance/ sections: heading | text on one row (> 1100), stacked below ------------------------------- */
  .c-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    column-gap: var(--g);
    padding-block: var(--s5);
    border-top: 1px solid var(--rule);
    scroll-margin-top: calc(var(--header-h) + var(--s4));
  }
  .c-section:first-child {
    padding-top: var(--s4);
    border-top-color: var(--ink);
  }
  .c-section__t {
    grid-column: 1;
    grid-row: 1 / span 2;
    padding-right: var(--s4);
  }
  .c-section__text,
  .c-section__list {
    grid-column: 2;
  }
  .c-section__text {
    font-size: var(--t-body);
    line-height: 1.6;
    max-width: 62ch;
    text-wrap: pretty;
  }
  .c-section__text + .c-section__list {
    margin-top: var(--s3);
  }
  .c-section__list > li:first-child {
    padding-top: 0;
    border-top: 0;
  }
  .c-section__list > li:last-child {
    padding-bottom: 0;
  }
  .c-section__list {
    border-bottom: 0;
  }
  .c-label {
    padding-block: var(--s5) var(--s6);
    border-top: 1px solid var(--rule);
  }
  .c-label__facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s1) var(--s5);
    margin: var(--s2) 0 0;
    padding: 0;
    list-style: none;
    font-family: var(--mono);
    font-size: var(--t-credit);
    line-height: 1.5;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-2);
  }
  .legal-fine {
    margin-top: var(--s6);
    padding-top: var(--s5);
    border-top: 1px solid var(--ink);
    font-size: var(--t-small);
    line-height: 1.5;
    color: var(--ink-2);
    max-width: 62ch;
  }
  .page-compliance .p5-next {
    margin-top: var(--s4);
  }

  /* --- /privacy/: prose in --t-body, h2 in the h3 role --------------------------------------------------------- */
  .legal-prose {
    max-width: 62ch;
    padding-top: var(--s4);
    border-top: 1px solid var(--ink);
  }
  .legal-prose p {
    font-size: var(--t-body);
    line-height: 1.6;
    text-wrap: pretty;
  }
  .legal-prose h2 {
    margin-top: var(--s7);
    scroll-margin-top: calc(var(--header-h) + var(--s4));
  }
  .legal-prose h2 + p {
    margin-top: var(--s2);
  }

  /* --- /brief/thanks/: the h2 and its links on one row, then the send list in two columns --------------------------- */
  .thanks-body {
    padding-top: var(--s5);
    padding-bottom: var(--sec);
  }
  .thanks-body__head {
    align-items: end;
    padding-top: var(--s4);
    border-top: 1px solid var(--ink);
  }
  .thanks-body__head > .case-title {
    grid-column: 1 / 8;
  }
  .thanks-body__head > .p5-next {
    grid-column: 9 / 13;
  }
  .thanks-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--g);
    margin-top: var(--s6);
  }

  /* --- 404: text cols 1–6 | the meadow plate cols 8–12 ------------------------------------------------------------ */
  .notfound {
    padding-top: var(--s9);
    padding-bottom: var(--sec);
    align-items: end;
  }
  .notfound__text {
    grid-column: 1 / 7;
  }
  .notfound__text > .deck {
    margin-top: var(--s5);
  }
  .notfound-list {
    margin-top: var(--s5);
    border-top: 1px solid var(--ink);
  }
  .notfound-list > li {
    padding: 0;
  }
  .notfound-list a {
    display: flex;
    align-items: center;
    min-height: 44px;
    text-decoration: none;
  }
  .notfound-list a:hover,
  .notfound-list a:focus-visible {
    text-decoration: underline;
  }
  .notfound__act {
    margin-top: var(--s6);
  }
  /* cols 9–12 (437 × 546 at 1440), not §2.11's 8–12: the 553px plate pushed the page past its 1,300px ceiling. */
  .notfound__plate {
    grid-column: 9 / 13;
  }

  @media (max-width: 1100px) {
    .c-section {
      grid-template-columns: minmax(0, 1fr);
    }
    .c-section__t,
    .c-section__text,
    .c-section__list {
      grid-column: 1;
      grid-row: auto;
    }
    .c-section__t {
      padding: 0 0 var(--s2);
    }
  }
  @media (max-width: 900px) {
    .page-compliance .title-row > .in-short {
      grid-column: 1 / -1;
      grid-row: auto;
      margin-top: var(--s6);
    }
    .toc,
    .legal-toc {
      position: static;
      grid-column: 1 / -1;
    }
    .legal-main {
      grid-column: 1 / -1;
      margin-top: var(--s7);
    }
    .thanks-body__head > .case-title,
    .thanks-body__head > .p5-next {
      grid-column: 1 / -1;
    }
    .thanks-body__head > .p5-next {
      margin-top: var(--s3);
    }
    .notfound__text {
      grid-column: 1 / -1;
    }
    .notfound__plate {
      display: none;
    }
  }
  @media (max-width: 760px) {
    /* The contents become two short columns instead of a long list above the text. */
    .toc__list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: var(--g);
    }
    .thanks-list {
      grid-template-columns: minmax(0, 1fr);
    }
    .notfound__act .btn {
      width: 100%;
    }
  }
}

/* ---- 12-brief.css ---- */
/* Gorda Digital Lab — v6. /brief/ (spec-v6 §2.8; the spec-v5 C13 form). Owner: P5.
   v6 tokens only; breakpoints 900 / 560. The sticky column is `.brief-intro` (allow-list). Inputs and chips keep a
   bottom line or border in --ink-2 (≥ 3:1 on paper, test_form_contrast). */
@layer pages {
  .brief {
    padding-top: var(--s5);
    padding-bottom: var(--sec);
  }
  .brief-grid {
    align-items: start;
  }
  .brief-intro {
    grid-column: 1 / 5;
    position: sticky;
    top: calc(var(--header-h) + var(--s6));
  }
  /* No box: a 2px ink rule opens the card and the fields run to its edges. */
  .form-card {
    grid-column: 6 / 13;
    padding-top: var(--s5);
    border-top: 2px solid var(--ink);
  }

  /* --- shared text roles on this page ------------------------------------------------------------------------ */
  .b-note {
    font-size: var(--t-small);
    line-height: 1.5;
    text-wrap: pretty;
  }
  .b-fine {
    font-size: var(--t-small);
    line-height: 1.5;
    color: var(--ink-2);
  }
  .b-link {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    cursor: pointer;
  }
  .b-link:hover {
    text-decoration-thickness: 2px;
  }

  /* --- what happens next ------------------------------------------------------------------------------------- */
  .brief-steps-title {
    margin-bottom: var(--s3);
  }
  .brief-steps-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--rule);
  }
  .brief-steps-list > li {
    display: grid;
    grid-template-columns: var(--s6) minmax(0, 1fr);
    column-gap: var(--s3);
    padding-block: var(--s4);
  }
  .brief-steps-list > li + li {
    border-top: 1px solid var(--rule);
  }
  .brief-step-title {
    margin-top: var(--s1);
    font-size: var(--t-body);
    font-weight: 500;
    line-height: 1.5;
  }
  .brief-step-title + .b-note {
    margin-top: var(--s1);
    max-width: 44ch;
  }

  /* --- founder line: 56px round portrait ----------------------------------------------------------------------- */
  .brief-founder {
    display: flex;
    align-items: center;
    gap: var(--s4);
    margin-top: var(--s6);
  }
  .brief-portrait {
    flex: none;
    width: calc(var(--s7) + var(--s2));
    overflow: hidden;
    border-radius: 50%;
  }
  .brief-founder .b-note {
    max-width: 36ch;
    text-wrap: balance;
  }
  .brief-founder .kicker {
    margin-top: var(--s1);
  }

  /* --- form head, selected line, done panel ------------------------------------------------------------------- */
  :is(.brief-form-head, .brief-done, .brief-nojs, .form-selected) > .kicker + :is(.h3, .case-title) {
    margin-top: var(--s3);
  }
  .brief-done > :is(.h3, .case-title) + .b-note {
    margin-top: var(--s2);
    max-width: 60ch;
  }
  .form-selected {
    margin-bottom: var(--s5);
    padding-bottom: var(--s4);
    border-bottom: 1px solid var(--rule);
  }

  /* --- fields: Brand | Website, then full-width rows ------------------------------------------------------------ */
  .brief-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s6) var(--g);
    margin-top: var(--s6);
  }
  .brief-fields > .field--full {
    grid-column: 1 / -1;
  }
  .brief-fields .field {
    display: grid;
    align-content: start;
    gap: var(--s2);
  }
  .brief-form fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .brief-form legend {
    padding: 0;
    margin-bottom: var(--s3);
  }
  .brief-form .field > label,
  .brief-form .field-label {
    font-size: var(--t-small);
    font-weight: 500;
    line-height: 1.5;
    color: var(--ink);
  }
  .req {
    font-weight: 400;
    color: var(--ink-2);
  }
  /* Hairline inputs: --ink-2 bottom line (7.6:1 on paper), ink on hover and focus. */
  .brief-form input:not([type="checkbox"]):not([type="radio"]),
  .brief-form textarea {
    min-height: 48px;
    padding: 0 0 var(--s2);
    border: 0;
    border-bottom: 1px solid var(--ink-2);
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    font-size: var(--t-body);
    transition: border-color 0.2s;
  }
  .brief-form textarea {
    padding-top: var(--s3);
    min-height: calc(var(--s10) - var(--s2));
  }
  .brief-form input:not([type="checkbox"]):not([type="radio"]):hover,
  .brief-form textarea:hover {
    border-bottom-color: var(--ink);
  }
  .brief-form input:not([type="checkbox"]):not([type="radio"]):focus-visible,
  .brief-form textarea:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
    border-bottom-color: var(--ink);
  }
  .brief-form input[aria-invalid="true"],
  .brief-form input:user-invalid {
    border-bottom: 2px solid var(--ink);
  }
  .brief-form ::placeholder {
    color: var(--ink-2);
    opacity: 1;
  }
  .brief-form .field-error {
    font-size: var(--t-small);
    line-height: 1.5;
    color: var(--ink);
  }
  /* Fix r2 (judges): every text input runs the full column width (the short garments and date fields stopped at
     ~60 % and read as unfinished). */
  .brief-form input:not([type="checkbox"]):not([type="radio"]) {
    width: 100%;
  }

  /* --- Package: radio rows (name · image count), hairlines, 48px rows ---------------------------------------- */
  .pkg-rows {
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--rule);
  }
  .pkg-row {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    column-gap: var(--s4);
    min-height: 48px;
    padding-block: var(--s3);
    cursor: pointer;
  }
  .pkg-row + .pkg-row {
    border-top: 1px solid var(--rule);
  }
  .pkg-row input {
    appearance: none;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1px solid var(--ink-2);
    border-radius: 50%;
    background: var(--paper);
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
  }
  .pkg-row input:checked {
    border: 5px solid var(--paper);
    background: var(--ink);
    outline: 1px solid var(--ink);
  }
  .pkg-row input:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
  }
  .pkg-row:hover input {
    border-color: var(--ink);
  }
  .pkg-row__name {
    font-size: var(--t-body);
    font-weight: 500;
    line-height: 1.5;
  }
  .pkg-row__count {
    font-weight: 400;
    color: var(--ink-2);
  }

  /* --- chips: usage, markets, deadline (visually hidden native input, focus ring on the label) ------------------ */
  .opt-hint {
    margin-bottom: var(--s3);
    font-size: var(--t-small);
    line-height: 1.5;
    color: var(--ink-2);
  }
  .opts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
  }
  .opt {
    position: relative;
    display: inline-flex;
  }
  .opt > span {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 18px;
    border: 1px solid var(--ink-2);
    background: transparent;
    color: var(--ink);
    font-size: var(--t-small);
    line-height: 1.5;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
  }
  .opt:hover > span {
    border-color: var(--ink);
  }
  .opt > input:checked + span {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--paper);
  }
  .opt > input:focus-visible + span {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
  }
  .opt-date {
    display: grid;
    gap: var(--s2);
    margin-top: var(--s4);
  }

  /* --- submit row, fallbacks, assurances, guide link, fineprint ------------------------------------------------ */
  .brief-submit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s3) var(--s5);
    margin-top: var(--s7);
  }
  .brief-submit-note {
    flex: 1 1 24ch;
    max-width: 40ch;
    color: var(--ink-2);
  }
  /* Fix r1: the webmail fallback is one quiet sentence under the button. */
  .brief-alt {
    flex: 1 0 100%;
    color: var(--ink-2);
  }
  .brief-assure {
    margin-top: var(--s6);
  }
  .brief-assure > li {
    display: grid;
    grid-template-columns: var(--s5) minmax(0, 1fr);
    font-size: var(--t-small);
  }
  .brief-assure > li:first-child {
    border-top: 0;
  }
  .brief-assure {
    border-top: 1px solid var(--ink);
  }
  /* A short tick drawn with two borders (no glyph-font dependency). */
  .brief-assure > li::before {
    content: "";
    width: var(--s2);
    height: var(--s3);
    margin-top: var(--s1);
    border-right: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    transform: rotate(40deg);
  }
  .brief-form-head + .form-selected,
  .brief-form-head + .brief-assure {
    margin-top: var(--s5);
  }
  .brief-guide {
    margin-top: var(--s4);
  }
  .brief-fineprint {
    margin-top: var(--s5);
  }
  .brief-done > .actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s3) var(--s5);
    margin-top: var(--s5);
  }
  .brief-copied {
    margin-top: var(--s3);
    color: var(--ink-2);
  }
  .brief-done-next,
  .brief-address {
    margin-top: var(--s5);
  }
  .form-tally {
    margin-top: var(--s5);
  }
  .form-tally iframe {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
  }
  .form-tally > .b-fine {
    margin-top: var(--s4);
  }

  @media (max-width: 900px) {
    /* The intro wrapper dissolves so the order is card → steps → founder line. */
    .brief-intro {
      position: static;
      display: contents;
    }
    .brief-steps,
    .brief-founder,
    .form-card {
      grid-column: 1 / -1;
    }
    .form-card {
      order: 1;
    }
    .brief-steps {
      order: 2;
      margin-top: var(--s8);
    }
    .brief-founder {
      order: 3;
    }
    .form-card .actions,
    .brief-submit {
      flex-direction: column;
      align-items: stretch;
    }
    .form-card .btn {
      width: 100%;
    }
    .brief-edit {
      align-self: start;
    }
    /* Fix r2 (judges): what the button does comes first, the webmail fallback after it, as on desktop. */
    .brief-submit-note {
      flex: none;
      max-width: none;
    }
    .brief-alt {
      flex: none;
    }
  }
  @media (max-width: 560px) {
    .brief-fields {
      grid-template-columns: minmax(0, 1fr);
      row-gap: var(--s5);
    }
    .pkg-row {
      column-gap: var(--s3);
    }
    /* "Copy the brief" takes its own line instead of one that starts with "·". */
    .brief-alt > .nb {
      display: block;
      margin-top: var(--s1);
    }
    .brief-alt > .nb > [aria-hidden="true"] {
      display: none;
    }
  }
}

/* ---- 14-proof.css ---- */
/* Gorda Digital Lab — v6. Proof plate, pins and checks (spec-v6 §1.9, §2.1.4; owner P2). Markup: macros/proof.html.
   ≥ 901: one .g12 row at the prototype's 4 | 3 | 5 split — text (cols 1–4), Fig. 1 over Fig. 3 (cols 5–7), Fig. 2 at
   its native ratio with the pins (cols 8–12); all three end on one line (align-items: end), the text column's last
   line level with the images' bottom edge (its padding is one credit line). ≤ 900: head → Fig. 2 → Fig. 1 | Fig. 3
   (3:4 each) → checks → link. Pins are pointer-only: a hovered check row lifts its pin (CSS :has), a hovered pin
   underlines its row (20-media.js `pins` sets .is-on). The checks list is the accessible version; pins are
   aria-hidden and sit inside the image's lightbox link. */
@layer pages {
  .proof-sec {
    padding-top: var(--sec);
  }
  /* After the facts strip, which closes on its own --s7 padding (§2.1.3), the seam stays one --sec. */
  .facts + .proof-sec {
    padding-top: calc(var(--sec) - var(--s7));
  }
  .proof.g12 {
    align-items: end;
  }
  .proof__text {
    grid-column: 1 / 5;
    padding-inline-end: var(--s4);
    padding-bottom: calc(var(--s3) + var(--t-credit) * 1.5);
  }
  /* Fix r1 (judges): Fig. 1 | Fig. 3 and Fig. 2 share one box (cols 5–12, a subgrid of the plate), so the image
     tops and bottoms are level whatever the text column's height; Fig. 3 absorbs the difference (below). */
  .proof__plates {
    grid-column: 5 / 13;
    display: grid;
    grid-template-columns: subgrid;
    align-items: end;
    align-self: end;
  }
  .proof__side {
    grid-column: 1 / 4;
    display: flex;
    flex-direction: column;
    gap: var(--block);
  }
  .proof__after {
    grid-column: 4 / 9;
  }
  .proof__lb {
    position: relative;
    display: block;
  }
  .proof__head + :is(.proof__checks, .figs) {
    margin-top: var(--s7);
  }
  .proof__link {
    margin-top: var(--s5);
  }
  /* With a link, the link itself is the column's last line: it sits on the figure credits' line (one row of small
     capitals along the plate's bottom edge) instead of above it, which keeps the text column no taller than Fig. 2. */
  @media (width > 900px) {
    .proof__text:has(> .proof__link) {
      padding-bottom: 0;
    }
  }

  /* --- checks: "N of N points checked", then numbered hairline rows (number · term · note) --------------------- */
  .checks__count {
    margin: 0 0 var(--s3);
    font-family: var(--mono);
    font-size: var(--t-credit);
    line-height: 1.5;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink);
    font-variant-numeric: lining-nums tabular-nums;
  }
  .checks,
  .figs {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--ink);
  }
  .check,
  .figs__row {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--s4);
    padding: var(--s3) 0;
    border-bottom: 1px solid var(--rule);
  }
  .figs__row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .check__n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--pin);
    color: var(--paper);
    font-family: var(--mono);
    font-size: var(--t-credit);
    line-height: 1;
    font-variant-numeric: lining-nums tabular-nums;
  }
  .check__t {
    min-width: 0;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
  }
  .check__note {
    font-family: var(--mono);
    font-size: var(--t-credit);
    line-height: 1.5;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: end;
    color: var(--ink-2);
  }

  /* Under four checks the note sits under its term (two short rows would leave the text column too short beside
     the images, and a long note would crowd the term). */
  .checks--stack .check {
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: start;
    row-gap: var(--s1);
    padding: var(--s4) 0;
  }
  .checks--stack .check__n {
    grid-row: 1 / 3;
    margin-top: 2px;
  }
  .checks--stack .check__note {
    grid-column: 2;
    text-align: start;
  }

  /* --- ≥ 901, a plate with a head: the side stack takes the row's height and Fig. 3 absorbs the difference, so
         Fig. 1 and Fig. 2 start on one line whenever Fig. 2 (or the text) sets the row (the prototype's s01 frame:
         three tops level). Fig. 3 stays a window between 65 % and 125 % of its width (never squatter than 3 : 2,
         never taller than 4 : 5; the figure's cap allows a two-line credit); past the cap the free space goes above
         Fig. 1 and the stack bottom-aligns as before, never a hole between the two figures. ---------------------- */
  @media (width > 900px) {
    .proof:not(.proof--bare) .proof__side {
      align-self: stretch;
      justify-content: flex-end;
      container-type: inline-size;
    }
    .proof:not(.proof--bare) .proof__detail {
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      max-height: calc(125cqw + var(--s3) + var(--t-credit) * 3);
    }
    .proof:not(.proof--bare) .proof__detail > .proof__lb {
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
    }
    .proof:not(.proof--bare) .proof__detail .frame {
      flex: 1 1 auto;
      aspect-ratio: auto;
      min-height: 65cqw;
    }
    /* A plate under the page's proof h2 (case pages: an h3 at the case-title size) has a short text column: its
       rows stack the note under the term, so the column does not stand empty beside the images (§1.5). */
    .proof:has(.proof__head .case-title) .check {
      grid-template-columns: 24px minmax(0, 1fr);
      align-items: start;
      row-gap: var(--s1);
      padding: var(--s4) 0;
    }
    .proof:has(.proof__head .case-title) .check__n {
      grid-row: 1 / 3;
      margin-top: 2px;
    }
    .proof:has(.proof__head .case-title) .check__note {
      grid-column: 2;
      text-align: start;
    }
  }

  /* --- a plate without a head (a second triptych under the first): Fig. 2 in cols 1–5 over two rows; Fig. 1 | Fig. 3
         (3 : 4 of the width) above the checks or legend in cols 6–12. Everything ends on Fig. 2's bottom line. ------ */
  @media (width > 900px) {
    .proof--bare .proof__plates {
      display: contents;
    }
    .proof--bare.g12 {
      row-gap: var(--s7);
    }
    .proof--bare .proof__after {
      grid-column: 1 / 6;
      grid-row: 1 / 3;
    }
    .proof--bare .proof__side {
      grid-column: 6 / 13;
      grid-row: 1;
      flex-direction: row;
      align-items: flex-end;
      gap: var(--g);
    }
    .proof--bare .proof__before {
      flex: 3 1 0;
      min-width: 0;
    }
    .proof--bare .proof__detail {
      flex: 4 1 0;
      min-width: 0;
    }
    .proof--bare .proof__text {
      grid-column: 6 / 13;
      grid-row: 2;
      padding-inline-end: 0;
    }
    .proof--bare .checks--stack .check {
      grid-template-columns: 24px minmax(0, 1fr) auto;
      align-items: center;
      row-gap: 0;
      padding: var(--s3) 0;
    }
    .proof--bare .checks--stack .check__n {
      grid-row: auto;
      margin-top: 0;
    }
    .proof--bare .checks--stack .check__note {
      grid-column: auto;
      text-align: end;
    }
  }

  /* --- pins: 24px ink circles with a paper numeral and a 1px paper ring (they sit on black fabric too) ---------- */
  .pins {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
  }
  .pin {
    position: absolute;
    left: var(--x);
    top: var(--y);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    border: 1px solid var(--paper);
    border-radius: 50%;
    background: var(--pin);
    color: var(--paper);
    font-family: var(--mono);
    font-size: var(--t-credit);
    line-height: 1;
    font-variant-numeric: lining-nums tabular-nums;
    pointer-events: auto;
    transition: transform 0.2s var(--ease);
  }
  @media (hover: hover) {
    .pin.is-on,
    :is(.proof, .case-hero):has(.check:nth-child(1):hover) .pin:nth-child(1),
    :is(.proof, .case-hero):has(.check:nth-child(2):hover) .pin:nth-child(2),
    :is(.proof, .case-hero):has(.check:nth-child(3):hover) .pin:nth-child(3),
    :is(.proof, .case-hero):has(.check:nth-child(4):hover) .pin:nth-child(4),
    :is(.proof, .case-hero):has(.check:nth-child(5):hover) .pin:nth-child(5),
    :is(.proof, .case-hero):has(.check:nth-child(6):hover) .pin:nth-child(6) {
      transform: scale(1.15);
      box-shadow: 0 0 0 2px var(--paper);
    }
    .check:hover .check__t,
    .check.is-on .check__t {
      text-decoration-color: currentColor;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .pin {
      transition: none;
    }
  }

  /* --- ≤ 900 (fix r1: reading order = figure order): head → Fig. 1 the brand's photo → Fig. 2 delivered, with its
         pins → Fig. 3 | the checks (or the figure legend) side by side → link. Dense flow puts Fig. 3 beside the
         checks although the checks come first in the DOM. ------------------------------------------------------- */
  @media (max-width: 900px) {
    .proof.g12 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-auto-flow: row dense;
      row-gap: var(--s6);
      align-items: start;
    }
    .proof__text,
    .proof__plates,
    .proof__side {
      display: contents;
    }
    .proof__head {
      grid-column: 1 / -1;
    }
    .proof__before {
      grid-column: 1 / -1;
      order: 1;
    }
    .proof__before .frame {
      aspect-ratio: 4 / 5;
    }
    .proof__after {
      grid-column: 1 / -1;
      order: 2;
    }
    .proof__detail {
      grid-column: 1;
      order: 3;
    }
    .proof__detail .frame {
      aspect-ratio: 3 / 4;
    }
    .proof__checks,
    .figs {
      grid-column: 2;
      order: 3;
    }
    .proof__head + :is(.proof__checks, .figs) {
      margin-top: 0;
    }
    /* Half a column: the note sits under its term. */
    .proof .check {
      grid-template-columns: 24px minmax(0, 1fr);
      align-items: start;
      row-gap: var(--s1);
      padding: var(--s3) 0;
    }
    .proof .check__n {
      grid-row: 1 / 3;
      margin-top: 2px;
    }
    .proof .check__note,
    .figs__row .check__note {
      grid-column: 2;
      text-align: start;
    }
    .figs__row {
      grid-template-columns: minmax(0, 1fr);
      row-gap: var(--s1);
    }
    .figs__row .check__note {
      grid-column: 1;
    }
    .proof__link {
      order: 4;
      grid-column: 1 / -1;
      justify-self: start;
      margin-top: calc(var(--s5) - var(--s6));
    }
  }
  /* Tablets: Fig. 1 | Fig. 2 as a before/after pair, Fig. 3 | checks under it. */
  @media (width > 760px) and (max-width: 900px) {
    .proof__before {
      grid-column: 1;
    }
    .proof__after {
      grid-column: 2;
    }
  }
  /* Phones: the brand's photo as a square window (the home page stays inside its 375 height budget). */
  @media (max-width: 760px) {
    .proof__before .frame {
      aspect-ratio: 1 / 1;
    }
  }
}

/* ---- 99-motion.css ---- */
/* Gorda Digital Lab — v6. Motion (spec-v6 §1.12): exactly these, everything else is static. Owner: P1.
   1 images fade in once decoded (.rv, here) · 2 header over-cover → solid (05) · 3 buttons and .link (03, 02) ·
   4 pins (14-proof, P2) · 5 menu (05) · 6 brief bar (05) · 7 lightbox (04b/20-media, P2) · 8 strips: native scroll-snap
   (P2) · 9 cross-document view transition (here). No parallax, scroll-jacking, marquee, autoplay, word masks, clipping masks,
   cursor followers or tabs. Under prefers-reduced-motion every transition and animation is off. */
@layer motion {
  /* 1. Images: the photograph fades in over its --ph placeholder (the frame keeps its colour; chips stay put), once
        every <img> inside the .rv element has decoded (00-core.js `reveals`). Hidden states exist only under
        html.js-reveal (addenda A.2); eager images (the cover, every LCP image) are never at opacity 0. The 2s
        `unhide` net applies until 00-core.js has claimed the elements (html.rv-ready). */
  @keyframes unhide {
    to {
      opacity: 1;
    }
  }
  .js-reveal .rv img:not([loading="eager"]) {
    opacity: 0;
    transform: scale(1.045);
    transition: opacity 0.9s var(--ease), transform 1.6s var(--ease);
  }
  .js-reveal:not(.rv-ready) .rv img:not([loading="eager"]) {
    animation: unhide 0s linear 2s forwards;
  }
  .js-reveal .rv.is-in img {
    opacity: 1;
    transform: none;
  }
  /* The photograph settles from 104.5 % inside its own frame, so the frame clips it. */
  .js-reveal .rv {
    overflow: hidden;
  }

  /* 1b. Type (polish 11.11): below the first block of a page, kickers, headings and decks rise 14px and fade in as
         they enter the view (00-core.js `rises` marks .is-in). The first block (cover, title row: the LCP text) is
         never hidden. Same gates as the images: html.js-reveal only, the 2s `unhide` net until the script claims
         them, off under reduced motion. */
  .js-reveal main > :not(:first-child) :is(.kicker, h2, .deck) {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.8s var(--ease), transform 1s var(--ease);
  }
  .js-reveal main > :not(:first-child) :is(h2, .deck) {
    transition-delay: 0.08s;
  }
  .js-reveal:not(.rv-ready) main > :not(:first-child) :is(.kicker, h2, .deck) {
    animation: unhide 0s linear 2s forwards;
  }
  .js-reveal main > :not(:first-child) :is(.kicker, h2, .deck).is-in {
    opacity: 1;
    transform: none;
  }
  @media print {
    .js-reveal main > :not(:first-child) :is(.kicker, h2, .deck) {
      opacity: 1;
      transform: none;
      animation: none;
    }
  }

  /* 9. Cross-document view transitions: root crossfade .25s; the header is named out so it does not blink. */
  @view-transition {
    navigation: auto;
  }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.25s;
    animation-timing-function: var(--ease);
  }
  .site-header {
    view-transition-name: site-header;
  }
  ::view-transition-old(site-header),
  ::view-transition-new(site-header) {
    animation: none;
  }

  /* Smooth anchor scrolling only for readers who did not ask for less motion. */
  @media (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
    }
  }

  /* Print: every image in its final state. */
  @media print {
    .js-reveal .rv img {
      opacity: 1;
      animation: none;
    }
  }

  /* Reduced motion: the kill switch; reveals land in their final state at once. */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .js-reveal .rv img,
    .js-reveal main > :not(:first-child) :is(.kicker, h2, .deck) {
      opacity: 1 !important;
      transform: none !important;
    }
    html {
      scroll-behavior: auto;
    }
  }
}