/* ==========================================================================
   Smart Closet System — stylesheet

   Sections 1-7 are the foundation (fonts, tokens, reset, base type, focus,
   motion, shell). Sections 8-19 are components, in roughly the order they
   appear down the page. 21-22 are load choreography and print.

   No @import. No external URL of any kind. Every asset referenced here is
   same-origin under /assets/.

   The above-the-fold subset of this file is duplicated inline in the <head>
   of index.html as critical CSS. If you change the tokens, the header, the
   hero or the tags, mirror the change there too.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONTS — self-hosted, WOFF2, /assets/fonts/

   Binaries live in this repository. Nothing is fetched from a third-party host
   at runtime: no Google Fonts link, no CDN. Both families are SIL OFL 1.1,
   which permits self-hosting and redistribution. See assets/fonts/README.md.

   Archivo is a variable font carrying BOTH a weight and a WIDTH axis
   (font-stretch 62%-125%), so one file covers two roles from BUILD-SPEC:
     - Display  = Archivo at font-stretch 75%  (the "Archivo Condensed" cut)
     - Utility  = Archivo at font-stretch 100%
   Registering it once and varying the axis is one download instead of two.

   unicode-range splits each family into latin / latin-ext. This is an English
   (US) page for a US company, so in practice only the latin subset is ever
   fetched; latin-ext stays unrequested unless a character outside Latin-1
   appears in the copy.
   -------------------------------------------------------------------------- */

/* --- Archivo — display + utility ---------------------------------------- */
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-var-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-var-latin-ext.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Newsreader — body prose -------------------------------------------- */
@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/newsreader-var-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/newsreader-var-latin-ext.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/newsreader-italic-var-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   2. TOKENS
   -------------------------------------------------------------------------- */

:root {

  /* --- Colour ----------------------------------------------------------- */
  --ink:      #191C22;  /* deep blue-black — navy in shadow. Text, dark sections */
  --bone:     #F1EFE9;  /* cool calico off-white. Page background */
  --slate:    #59616D;  /* secondary text, captions */
  --brass:    #A98748;  /* antique hardware. Accent, rules, active states */
  --oxblood:  #5E2A31;  /* deep accent. Primary CTA only */
  --line:     #D6D2C8;  /* hairline rules and borders */

  /* Two contrast-safe cuts of tokens above. Neither is a new accent: each is
     the same hue at the value the 4.5:1 floor requires.

     --bone-dim  secondary text on --ink panels. --slate on --ink is 2.72:1.
     --brass-txt small text that must read as brass. --brass on --bone is
                 2.95:1, so --brass is confined to rules, stitching, borders
                 and hover states — it never colours a glyph. */
  --bone-dim:  #B9B5AC;   /* 8.27:1 on --ink  */
  --brass-txt: #806129;   /* 4.99:1 on --bone */

  /* Measured contrast on --bone ground (WCAG 2.1, normal text needs 4.5:1):
       --ink     14.75:1  PASS
       --slate    5.42:1  PASS
       --oxblood  9.87:1  PASS
       --brass    2.95:1  FAIL — rules, borders and large display only.
                                 Never body text, never a link label.
     On --ink ground:
       --bone    14.75:1  PASS
       --bone-dim 8.27:1  PASS */

  /* --- Type ------------------------------------------------------------- */
  /* Both Archivo roles resolve to the same file; the width axis separates
     them. --stretch-display is applied on headings, not baked into the var,
     because font-stretch is not a font-family value. */
  --face-display: "Archivo", "Archivo Narrow", "Helvetica Neue Condensed",
                  "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
  --face-body:    "Newsreader", "Iowan Old Style", "Charter", "Georgia",
                  "Times New Roman", serif;
  --face-utility: "Archivo", "Helvetica Neue", "Inter", system-ui,
                  "Segoe UI", Arial, sans-serif;

  --stretch-display: 75%;   /* the condensed cut */
  --stretch-utility: 100%;  /* the normal cut */

  /* Scale: 13 / 15 / 17 / 21 / 28 / 40 / 60. Top two clamp on mobile. */
  --t-13: 0.8125rem;
  --t-15: 0.9375rem;
  --t-17: 1.0625rem;
  --t-21: 1.3125rem;
  --t-28: 1.75rem;
  --t-40: clamp(1.75rem, 1.15rem + 2.6vw, 2.5rem);
  --t-60: clamp(2.375rem, 1.35rem + 4.4vw, 3.75rem);

  --lh-body:    1.6;
  --lh-display: 1.04;
  --lh-tight:   1.25;

  --track-display: 0.02em;
  --track-utility: 0.12em;

  /* --- Space ------------------------------------------------------------ */
  --gap-3:   0.375rem;
  --gap-6:   0.75rem;
  --gap-10:  1.25rem;
  --gap-16:  2rem;
  --gap-24:  3rem;
  --gap-40:  5rem;

  --section-pad: 3.5rem;   /* 56px mobile; raised to 96px at 900px up */
  --shell:       1080px;
  --shell-pad:   1.5rem;

  /* --- Motion ----------------------------------------------------------- */
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-hover: 160ms;
}

@media (min-width: 900px) {
  :root {
    --section-pad: 6rem;   /* 96px desktop */
    --shell-pad:   2.5rem;
  }
}

/* --------------------------------------------------------------------------
   3. RESET
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body,
h1, h2, h3, h4, p,
figure, blockquote, dl, dd,
ul, ol { margin: 0; }

ul[class],
ol[class] {
  padding: 0;
  list-style: none;
}

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

input,
button,
select,
textarea {
  font: inherit;
  color: inherit;
}

table {
  border-collapse: collapse;
  width: 100%;
}

/* --------------------------------------------------------------------------
   4. BASE TYPOGRAPHY
   -------------------------------------------------------------------------- */

html { font-size: 100%; }

body {
  background: var(--bone);
  color: var(--ink);
  font-family: var(--face-body);
  font-size: var(--t-17);
  font-weight: 400;
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--face-display);
  font-stretch: var(--stretch-display);
  font-weight: 700;
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  text-wrap: balance;
}

h1 { font-size: var(--t-60); }
h2 { font-size: var(--t-40); }
h3 { font-size: var(--t-21); line-height: var(--lh-tight); }
h4 { font-size: var(--t-17); line-height: var(--lh-tight); font-weight: 600; }

p { text-wrap: pretty; }

p + p { margin-top: var(--gap-10); }

strong, b { font-weight: 600; }

small { font-size: var(--t-13); }

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover { text-decoration-color: var(--brass); }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

/* --- Utility face: eyebrows, labels, footer, captions --------------------- */

/* Archivo carries no true smcp feature, so the small-caps effect is built the
   reliable way: uppercase at 13px with 0.12em tracking. */
.u-eyebrow,
.u-label,
.u-meta {
  font-family: var(--face-utility);
  font-stretch: var(--stretch-utility);
  font-size: var(--t-13);
  font-weight: 600;
  letter-spacing: var(--track-utility);
  text-transform: uppercase;
  line-height: 1.4;
}

.u-eyebrow { color: var(--brass-txt); }
.u-label   { color: var(--ink); }
.u-meta    { color: var(--slate); font-weight: 400; text-transform: none; letter-spacing: 0.04em; }

/* --- Secondary prose ----------------------------------------------------- */

.u-sub {
  font-size: var(--t-21);
  color: var(--slate);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   5. FOCUS + ACCESSIBILITY FLOOR
   -------------------------------------------------------------------------- */

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

/* Legacy fallback for engines without :focus-visible. */
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute;
  left: var(--shell-pad);
  top: 0;
  z-index: 100;
  transform: translateY(-120%);
  background: var(--ink);
  color: var(--bone);
  padding: var(--gap-6) var(--gap-10);
  font-family: var(--face-utility);
  font-size: var(--t-13);
  letter-spacing: var(--track-utility);
  text-transform: uppercase;
  text-decoration: none;
}

.skip-link:focus { transform: translateY(0); }

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

/* --------------------------------------------------------------------------
   6. MOTION
   Everything animated is opt-in via no-preference. This block is the global
   off-switch for anything that slips through.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   7. SHELL
   -------------------------------------------------------------------------- */

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

.section {
  padding-block: var(--section-pad);
}

/* The one structural device: a hairline rule above each section eyebrow,
   full-bleed to the container edge. The h2 variant covers the final CTA,
   which BUILD-SPEC opens with a headline and no eyebrow. */
.section > .shell > .u-eyebrow:first-child,
.section > .shell > h2:first-child {
  display: block;
  border-top: 1px solid var(--line);
  padding-top: var(--gap-16);
}

/* --------------------------------------------------------------------------
   8. HEADER — sticky, gains its hairline only once scrolled
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bone);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-hover) var(--ease);
}

.site-header.is-stuck { border-bottom-color: var(--line); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-16);
  min-height: 68px;
}

.site-header__logo {
  font-family: var(--face-display);
  font-stretch: var(--stretch-display);
  font-weight: 700;
  font-size: var(--t-21);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--gap-16);
}

.site-nav a {
  font-family: var(--face-utility);
  font-stretch: var(--stretch-utility);
  font-size: var(--t-13);
  font-weight: 600;
  letter-spacing: var(--track-utility);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

/* --brass is 2.95:1 on --bone and cannot carry a label, so it appears here as
   the underline only. The text itself stays --ink. */
.site-nav a:not(.btn):hover {
  text-decoration: underline;
  text-decoration-color: var(--brass);
  text-underline-offset: 0.4em;
}

.site-header__toggle { display: none; }

@media (max-width: 899px) {
  .site-header__toggle {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: 1px solid var(--line);
    border-radius: 2px;
    cursor: pointer;
  }

  .site-header__bars,
  .site-header__bars::before,
  .site-header__bars::after {
    display: block;
    width: 18px;
    height: 1px;
    background: var(--ink);
  }

  .site-header__bars {
    position: relative;
  }

  .site-header__bars::before,
  .site-header__bars::after {
    content: "";
    position: absolute;
    left: 0;
  }

  .site-header__bars::before { top: -6px; }
  .site-header__bars::after  { top: 6px; }

  .site-nav {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    display: none;
    padding: var(--gap-10) var(--shell-pad) var(--gap-16);
    background: var(--bone);
    border-bottom: 1px solid var(--line);
  }

  body.nav-open .site-nav { display: block; }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: var(--gap-10);
  }

  .site-nav__list .btn { justify-content: center; }
}

/* --------------------------------------------------------------------------
   9. BUTTONS — flat fills only, no gradients
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.9rem 1.4rem;
  font-family: var(--face-utility);
  font-stretch: var(--stretch-utility);
  font-size: var(--t-13);
  font-weight: 600;
  letter-spacing: var(--track-utility);
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color var(--dur-hover) var(--ease),
              border-color var(--dur-hover) var(--ease),
              transform var(--dur-hover) var(--ease);
}

.btn--primary {
  background: var(--oxblood);
  color: var(--bone);
}

.btn--primary:hover {
  background: color-mix(in srgb, var(--oxblood) 86%, #000);
}

.btn--secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}

.btn--secondary:hover { border-color: var(--brass); }

.btn:hover { transform: translateY(-1px); }

.btn--sm { padding: 0.65rem 1rem; }

/* --------------------------------------------------------------------------
   10. HERO
   -------------------------------------------------------------------------- */

.hero {
  padding-top: calc(var(--section-pad) * 0.85);
  padding-bottom: var(--gap-16);
}

.hero__eyebrow { margin-bottom: var(--gap-16); }

.hero__title {
  max-width: 14ch;
  margin-bottom: var(--gap-16);
}

.hero__sub {
  max-width: 56ch;
  margin-bottom: var(--gap-16);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-10);
  margin-bottom: var(--gap-10);
}

.hero__note { color: var(--slate); }

/* --------------------------------------------------------------------------
   11. OCCASION TAGS — the signature element

   A woven garment label cut from a roll: hairline outer edge, dashed brass
   stitching set 4px in, and two notches punched into the left edge so the
   silhouette reads as cut stock rather than a pill.

   The stitch line is an `outline` with a negative offset, which lets it track
   the border-radius without a wrapper element. That means the tag has to
   restate its own focus ring as a box-shadow, since the global :focus-visible
   rule would otherwise overwrite the stitching.
   -------------------------------------------------------------------------- */

.tags { padding-bottom: var(--section-pad); }

.tags__scroller {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-10);
  /* Room for the 2px hover lift, so nothing clips once this becomes a
     scroll container on small screens. */
  padding-block: 8px;
}

/* The edge is an INSET box-shadow rather than a border, which is what makes
   the notches possible. A real border sits outside the overflow clip, so a
   pseudo-element can never cover it; an inset shadow is inside the padding
   box, so the notch can interrupt it and substitute its own arc.
   A subtractive mask was the other candidate and does not work here: the tag
   fill and the page ground are both --bone, so removing area removes nothing
   visible — it only punches gaps in the outline, which reads as a rendering
   fault instead of a cut. */
.tag {
  --edge: var(--line);
  position: relative;
  flex: 0 0 auto;
  padding: 0.8rem 1.2rem 0.8rem 1.6rem;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--face-utility);
  font-stretch: var(--stretch-utility);
  font-size: var(--t-13);
  font-weight: 600;
  letter-spacing: var(--track-utility);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border: 0;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px var(--edge);
  overflow: hidden;
  outline: 1px dashed var(--brass);
  outline-offset: -5px;
  transition: transform var(--dur-hover) var(--ease),
              outline-color var(--dur-hover) var(--ease),
              box-shadow var(--dur-hover) var(--ease);
}

/* Each notch is a full circle filled with the page ground and ringed in
   --edge, sitting half outside the left edge. `overflow: hidden` on the tag
   clips away the outer half, so what survives is a concave arc: the edge line
   bends inward and back out. That bend is the whole effect — it is the
   difference between a label cut from a roll and a pill.
   Radius stays at 5px so the arc stops short of the stitching at -5px and the
   two never collide. */
.tag::before,
.tag::after {
  content: "";
  position: absolute;
  left: -5px;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--bone);
  box-shadow: 0 0 0 1px var(--edge);
}

.tag::before { top: 30%; }
.tag::after  { top: 70%; }

.tag:hover {
  --edge: var(--brass);
  transform: translateY(-2px);
  outline-color: var(--oxblood);
}

/* The stitch occupies `outline`, so the focus ring has to be drawn as a
   box-shadow — and that shadow has to restate the inset edge, or focusing a
   tag would erase its own outline. */
.tag:focus-visible {
  --edge: var(--brass);
  transform: translateY(-2px);
  outline: 1px dashed var(--oxblood);
  outline-offset: -5px;
  box-shadow: inset 0 0 0 1px var(--edge),
              0 0 0 2px var(--bone),
              0 0 0 4px var(--oxblood);
}

@media (max-width: 899px) {
  .tags__scroller {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    /* Bleed the row to the viewport edge so the last tag does not look
       arbitrarily truncated. */
    margin-inline: calc(var(--shell-pad) * -1);
    padding-inline: var(--shell-pad);
    /* Snap positions ignore padding unless scroll-padding says otherwise.
       Without this the first tag snaps flush to the scrollport edge on load,
       eating the inset and breaking alignment with the hero text above. */
    scroll-padding-inline: var(--shell-pad);
  }

  .tags__scroller::-webkit-scrollbar { display: none; }

  .tag { scroll-snap-align: start; }
}

/* --------------------------------------------------------------------------
   12. CAPABILITY BAR — four items, hairline dividers, no numbers
   -------------------------------------------------------------------------- */

.capability { padding-block: var(--gap-16); }

.capability__list {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--line);
}

.capability__item {
  padding-block: var(--gap-10);
  border-bottom: 1px solid var(--line);
}

@media (min-width: 900px) {
  .capability__list {
    grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px solid var(--line);
  }

  .capability__item {
    border-bottom: 0;
    padding-block: var(--gap-16);
  }

  /* Dividers sit BETWEEN items only, so the row does not read as four boxes. */
  .capability__item + .capability__item {
    border-left: 1px solid var(--line);
    padding-left: var(--gap-16);
  }
}

/* --------------------------------------------------------------------------
   13. PROSE + IDENTITY DISCLOSURE
   -------------------------------------------------------------------------- */

.section__head { margin-bottom: var(--gap-24); }
.section__head h2 { max-width: 22ch; }

/* Approach and FAQ carry an eyebrow and no headline, so the content that
   follows has to supply its own breathing room. */
.u-eyebrow + .cards,
.u-eyebrow + .faq { margin-top: var(--gap-24); }

.prose { max-width: 64ch; }
.prose p + p { margin-top: var(--gap-10); }

.prose__lede {
  font-size: var(--t-21);
  line-height: 1.45;
}

/* CLAUDE.md 1.3: legal identity appears exactly twice per page — here and in
   the footer bottom bar. Do not add a third instance anywhere. */
.disclosure {
  max-width: 64ch;
  margin-top: var(--gap-24);
  padding-top: var(--gap-16);
  border-top: 1px solid var(--line);
}

/* --------------------------------------------------------------------------
   14. CARD GRIDS — quiet by design

   No borders, no fills, no shadows. The signature element is the tag row;
   everything else stays out of its way. Structure comes from the display face
   against the serif body and from the grid gap, not from boxes.
   -------------------------------------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-24) var(--gap-16);
}

@media (min-width: 640px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
  .cards--3 { grid-template-columns: repeat(3, 1fr); }
  .cards--4 { grid-template-columns: repeat(4, 1fr); }
}

.card h3 { margin-bottom: var(--gap-6); }

.card p {
  color: var(--slate);
  font-size: var(--t-15);
}

/* --------------------------------------------------------------------------
   15. PROCESS — the only numbered sequence on the site

   CLAUDE.md/BUILD-SPEC: numbered markers appear here and nowhere else,
   because this is the one block of content that is genuinely ordered.
   -------------------------------------------------------------------------- */

.process {
  counter-reset: step;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-16);
  list-style: none;
  padding: 0;
}

@media (min-width: 640px) {
  .process { grid-template-columns: repeat(2, 1fr); gap: var(--gap-24) var(--gap-16); }
}

@media (min-width: 960px) {
  .process { grid-template-columns: repeat(3, 1fr); }
}

.process__item {
  counter-increment: step;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--gap-10);
  align-items: start;
}

.process__item::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--face-display);
  font-stretch: var(--stretch-display);
  font-weight: 700;
  font-size: var(--t-28);
  line-height: 1;
  letter-spacing: var(--track-display);
  /* --brass is 2.95:1 and fails even the 3:1 large-text threshold, so the
     numerals use the text-safe cut. */
  color: var(--brass-txt);
}

.process__item h3 { margin-bottom: var(--gap-6); }

.process__item p {
  color: var(--slate);
  font-size: var(--t-15);
}

/* --------------------------------------------------------------------------
   16. FAQ — native <details>, no JavaScript

   Every answer ships in the initial HTML. A closed <details> is collapsed
   visually but present in the document, so a crawler that never runs a script
   still reads all eight answers.
   -------------------------------------------------------------------------- */

.faq { border-top: 1px solid var(--line); }

.faq__item { border-bottom: 1px solid var(--line); }

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-10);
  padding-block: var(--gap-10);
  cursor: pointer;
  list-style: none;
}

.faq__item summary::-webkit-details-marker { display: none; }

.faq__item summary h3 {
  font-size: var(--t-21);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}

/* Sign is decorative; the open/closed state is already exposed by <details>
   itself to assistive technology. */
.faq__item summary::after {
  content: "+";
  flex: 0 0 auto;
  font-family: var(--face-utility);
  font-size: var(--t-21);
  line-height: 1;
  color: var(--brass-txt);
  transition: transform var(--dur-hover) var(--ease);
}

.faq__item[open] summary::after { content: "\2013"; }

.faq__answer {
  max-width: 68ch;
  padding-bottom: var(--gap-16);
  color: var(--slate);
}

/* --------------------------------------------------------------------------
   17. POLICIES
   -------------------------------------------------------------------------- */

.policy-card {
  display: block;
  padding-top: var(--gap-10);
  border-top: 1px solid var(--line);
  text-decoration: none;
  transition: border-color var(--dur-hover) var(--ease);
}

.policy-card:hover { border-top-color: var(--brass); }

.policy-card h3 { margin-bottom: var(--gap-6); }

.policy-card p {
  color: var(--slate);
  font-size: var(--t-15);
}

.policies__note {
  margin-top: var(--gap-24);
  color: var(--slate);
  max-width: 64ch;
}

/* --------------------------------------------------------------------------
   18. FINAL CTA

   Deliberately on --bone, not --ink: --oxblood on --ink is 1.49:1, so the
   primary button would all but disappear on a dark ground, and BUILD-SPEC
   reserves --oxblood for the primary CTA. The dark anchor is the footer.
   -------------------------------------------------------------------------- */

.final-cta { text-align: left; }
.final-cta h2 { max-width: 18ch; margin-bottom: var(--gap-10); }
.final-cta .u-sub { max-width: 52ch; margin-bottom: var(--gap-16); }
.final-cta__note { margin-top: var(--gap-10); color: var(--slate); }

/* --------------------------------------------------------------------------
   19. LEGAL + CONTACT PAGES
   -------------------------------------------------------------------------- */

.legal { max-width: 68ch; }
.legal h2 { font-size: var(--t-28); margin-top: var(--gap-24); margin-bottom: var(--gap-6); }
.legal h3 { margin-top: var(--gap-16); margin-bottom: var(--gap-3); }
.legal p, .legal li { color: var(--slate); }
.legal p + p, .legal ul { margin-top: var(--gap-10); }
.legal ul { padding-left: 1.2rem; list-style: disc; }
.legal li + li { margin-top: var(--gap-3); }
.legal a { color: var(--ink); }
.legal__updated { margin-bottom: var(--gap-24); }

.contact-grid { display: grid; grid-template-columns: 1fr; gap: var(--gap-24); }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1.3fr; gap: var(--gap-40); } }

.contact-details dt { margin-top: var(--gap-10); }
.contact-details dd { margin: 0; color: var(--slate); }

.field { display: block; margin-bottom: var(--gap-10); }
.field > span { display: block; margin-bottom: var(--gap-3); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.7rem 0.8rem;
  background: var(--bone);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 2px;
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { border-color: var(--brass); }

.field textarea { min-height: 8rem; resize: vertical; }

/* Unchecked by default and never bundled into the submit button — the consent
   has to be a deliberate act (BUILD-SPEC Part 3). */
.consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--gap-6);
  align-items: start;
  margin-block: var(--gap-16);
  font-size: var(--t-15);
  color: var(--slate);
}

.consent input { margin-top: 0.3em; width: 1rem; height: 1rem; }

.required { color: var(--oxblood); }

/* --------------------------------------------------------------------------
   20. FOOTER — shared chrome, identical markup on all six pages
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--ink);
  color: var(--bone);
  padding-block: var(--section-pad) var(--gap-16);
}

.site-footer__cols {
  display: grid;
  gap: var(--gap-16);
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .site-footer__cols { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
}

.site-footer .u-label {
  color: var(--bone);
  margin-bottom: var(--gap-6);
}

/* --slate fails contrast on --ink (2.72:1). Secondary text on the dark ground
   uses --bone-dim at 8.27:1 instead. */
.site-footer p,
.site-footer li {
  color: var(--bone-dim);
  font-size: var(--t-15);
  line-height: 1.7;
}

.site-footer ul { list-style: none; padding: 0; }

.site-footer a {
  color: var(--bone-dim);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--bone);
  text-decoration: underline;
  text-decoration-color: var(--brass);
  text-underline-offset: 0.25em;
}

.site-footer :focus-visible {
  outline-color: var(--brass);
}

.site-footer__bar {
  margin-top: var(--gap-24);
  padding-top: var(--gap-16);
  border-top: 1px solid rgba(241, 239, 233, 0.16);
}

.site-footer__bar .u-meta { color: var(--bone-dim); }

/* --------------------------------------------------------------------------
   21. LOAD CHOREOGRAPHY — the one orchestrated moment

   Headline sets word by word, 60ms apart, then the tag row fades in as a
   group. Nothing else animates on load and there are no scroll reveals.
   Everything is opt-in: with reduced motion the page renders at rest, fully
   visible, with no animation declared at all.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .hero__title .w {
    display: inline-block;
    animation: label-set 400ms var(--ease) both;
  }

  .hero__title .w:nth-child(1) { animation-delay: 0ms; }
  .hero__title .w:nth-child(2) { animation-delay: 60ms; }
  .hero__title .w:nth-child(3) { animation-delay: 120ms; }
  .hero__title .w:nth-child(4) { animation-delay: 180ms; }

  .tags__scroller {
    animation: label-fade 400ms var(--ease) 560ms both;
  }
}

@keyframes label-set {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@keyframes label-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --------------------------------------------------------------------------
   22. PRINT
   -------------------------------------------------------------------------- */

@media print {
  body { background: #fff; color: #000; }
  .skip-link, .site-header { display: none; }
  a[href^="/"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}