/* ============================================================
   backsnap. — design system
   Theme: daylight workshop. Bone paper, ink type, clay accent.
   Type: Saira Condensed (600/700) for headlines, Inter (400/500) for the rest.
   Radius system: sharp (0). One accent. One theme.
   Dark bands: nav + footer only.
   ============================================================ */

@font-face {
  font-family: "Saira Condensed";
  src: url("../assets/fonts/saira-condensed-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: "Saira Condensed";
  src: url("../assets/fonts/saira-condensed-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: optional;
}

/* ---------- metric-matched fallbacks ----------
   Paired with font-display:optional above. `swap` was the shift: it
   paints a fallback first, so the FALLBACK's metrics laid out the first
   frame, and every line box moved when the real face landed — 112 of 174
   text elements on the home page, paragraphs gaining or losing a line and
   everything under them jumping. `optional` gives the fonts a ~100ms
   window (they are preloaded, local and small, so they make it on any
   warm cache) and otherwise keeps the fallback for that page view
   instead of reflowing mid-read.
   These faces are what that fallback view uses. Untuned, the system
   faces are nowhere near the webfonts — Helvetica runs 6% narrow against
   Inter and 19% short on ascent, Arial Narrow runs 11% WIDE against
   Saira — so an unstyled fallback view would not match the design.
   size-adjust is the ratio of the two faces measured over this site's
   own 39k characters of copy; ascent/descent-override pin the baseline
   inside the line box, expressed against the adjusted em. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Helvetica Neue"), local("Arial");
  size-adjust: 106.02%;
  ascent-override: 91.5%;
  descent-override: 22.6%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Saira Fallback";
  src: local("Arial Narrow"), local("Roboto Condensed"), local("Helvetica Neue");
  size-adjust: 89.62%;
  ascent-override: 126.1%;
  descent-override: 49.1%;
  line-gap-override: 0%;
}

:root {
  --paper: #E7DED2;
  --ink: #181410;
  --clay: #C4522C;
  /* spec asked for #6E645A, which lands at 4.34:1 on --paper (AA fail at 17px);
     nudged to the nearest passing value, 4.61:1 */
  --muted: #6A6056;
  /* AA variants: --muted fails (4.26:1) on --paper-2; clay fails (3.44:1)
     for small text on paper. Text-only tones, decorative clay unchanged. */
  --muted-strong: #625950;
  --clay-text: #A6441E;
  /* derived, not new hues */
  --paper-2: color-mix(in srgb, var(--ink) 4.5%, var(--paper));
  --line: rgba(24, 20, 16, 0.15);
  --line-strong: rgba(24, 20, 16, 0.34);
  /* light-on-ink set for the dark bands (nav, footer, media overlays) */
  --paper-70: rgba(231, 222, 210, 0.74);
  --paper-45: rgba(231, 222, 210, 0.5);
  --line-inv: rgba(231, 222, 210, 0.16);
  --font-head: "Saira Condensed", "Saira Fallback", "Arial Narrow", "Helvetica Neue", sans-serif;
  --font-sans: "Inter", "Inter Fallback", -apple-system, "Helvetica Neue", sans-serif;
  /* measure column unit — stands in for `ch`.
     `ch` is the advance of "0" in the FONT THAT IS CURRENTLY LOADED, so
     every `Nch` max-width silently changed size mid-load: .body-copy's
     58ch measured 493px on the fallback and 622px once Inter arrived, a
     129px swing that re-wrapped the copy under it. size-adjust can't fix
     this — it scales the "0" advance and the glyph advances by the same
     factor, so their ratio (the thing that sets the wrap point) is
     untouched. These are em, which answer to font-size alone, so the
     column is identical before and after the swap.
     0.631em = Inter's "0" advance, 0.477em = Saira Condensed's. Both
     measured at 100px, so N * var(--ch) == the old Nch, exactly. */
  --ch: 0.631em;
  --ch-head: 0.477em;
  --nav-h: 72px;
  --pad-x: clamp(1.25rem, 4vw, 4rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
::selection { background: var(--clay); color: var(--paper); }

/* film grain — fixed, non-scrolling, cheap */
.grain {
  position: fixed; inset: 0; z-index: 80; pointer-events: none;
  opacity: 0.32; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E");
}

/* ---------- type utilities ---------- */
.display {
  font-family: var(--font-head);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.01em;
}
.mono {
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.eyebrow {
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--clay-text);
}
.section-title {
  font-size: clamp(2.4rem, 5.4vw, 4.6rem);
}
/* stitch motif: a short machine-stitch rule above select headlines */
.stitch::before {
  content: ""; display: block; width: 72px;
  border-top: 3px dashed var(--clay);
  margin-bottom: 1.3rem;
}
.body-copy {
  color: var(--muted);
  max-width: calc(58 * var(--ch));
  font-size: clamp(1rem, 1.15vw, 1.125rem);
}

/* ---------- buttons ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 1.05rem 2rem;
  font-weight: 500;
  font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid var(--ink);
  overflow: hidden;
  transition: color 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--ink);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform 0.38s var(--ease-out);
}
.btn:hover { color: var(--paper); }
.btn:hover::before { transform: scaleY(1); }
.btn:active { transform: translateY(1px); }
/* primary: ink fill, paper text; clay is the hover state only */
.btn--solid { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn--solid::before { background: var(--clay); }
.btn--solid:hover { color: var(--paper); border-color: var(--clay); }
.btn .arr { transition: transform 0.35s var(--ease-out); }
.btn:hover .arr { transform: translateX(4px); }
.btn:focus-visible, a:focus-visible, button:focus-visible {
  outline: 2px solid var(--clay); outline-offset: 3px;
}
/* plain text link (demoted CTA) */
.link-plain {
  font-weight: 500; font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding-bottom: 0.4em;
  border-bottom: 1px solid currentColor;
  transition: opacity 0.25s;
}
.link-plain:hover { opacity: 0.62; }

/* ---------- nav (dark contrast band) ---------- */
#site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  height: var(--nav-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 var(--pad-x);
  background: var(--ink);
  color: var(--paper);
  transition: background 0.4s, border-color 0.4s;
  border-bottom: 1px solid transparent;
}
#site-header.scrolled {
  background: rgba(24, 20, 16, 0.9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line-inv);
}
.header-left { display: flex; gap: 2rem; }
.nav-link {
  font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--paper-70); position: relative; padding: 0.3rem 0;
  transition: color 0.25s;
}
.nav-link::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--clay); transform: scaleX(0); transform-origin: right;
  transition: transform 0.35s var(--ease-out);
}
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--paper); }
.nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.logo-lockup { display: inline-flex; align-items: center; gap: 0.55rem; justify-self: center; }
.logo-lockup svg { width: 22px; height: 22px; color: var(--clay); flex: none; }
.text-logo {
  font-family: var(--font-head);
  font-weight: 700; font-size: 1.5rem; letter-spacing: 0;
  line-height: 1;
}
.header-right { display: flex; justify-content: flex-end; align-items: center; gap: 1.5rem; }
/* on the ink band the fill is invisible, so the button reads through its paper border */
.nav-cta { padding: 0.7rem 1.4rem; border-color: var(--paper); }

/* mobile nav — 850px: below that the 4 links + logo + CTA collide */
.nav-burger { display: none; }
/* 1100px, not 850: four links + centered lockup + CTA need ~1090px —
   below that the links physically overlap the logo */
@media (max-width: 1100px) {
  #site-header { grid-template-columns: auto 1fr auto; }
  .logo-lockup { justify-self: start; order: -1; }
  .header-left {
    position: fixed; inset: var(--nav-h) 0 auto 0;
    flex-direction: column; gap: 0;
    background: var(--ink); border-bottom: 1px solid var(--line-inv);
    padding: 0.5rem var(--pad-x) 1.25rem;
    transform: translateY(-110%); visibility: hidden;
    transition: transform 0.4s var(--ease-out), visibility 0s 0.4s;
    z-index: -1;
  }
  .header-left.open { transform: translateY(0); visibility: visible; transition-delay: 0s; }
  .header-left .nav-link { padding: 0.9rem 0; font-size: 1rem; border-bottom: 1px solid var(--line-inv); }
  .nav-burger {
    display: flex; flex-direction: column; gap: 5px; padding: 0.6rem; margin-right: 0.8rem;
  }
  .nav-burger span { width: 22px; height: 2px; background: var(--paper); transition: transform 0.3s, opacity 0.3s; }
  .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav-cta { padding: 0.55rem 0.9rem; font-size: 0.72rem; }
}

/* ---------- hero (v8: the production line) ---------- */
.hero {
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
  /* color authority: sampled from hats-paper.mp4 frame-0 corners
     (#E2D8CE, Δ −5/−6/−4 vs --paper #E7DED2) — hero only */
  background: #E2D8CE;
}
/* copy column: same container metrics as the site, headline biased above
   center so the belt band (58vh) grazes line 2 instead of burying it */
.hero-copy {
  position: relative;
  max-width: 1360px;
  margin-inline: auto;
  padding: calc(var(--nav-h) + 1.5rem) 48px 0;
  display: flex; flex-direction: column; justify-content: center;
  min-height: 72dvh;
}
.hero-headline {
  font-size: clamp(72px, 9vw, 132px);
  line-height: 0.94;
  text-transform: uppercase;
  max-width: calc(12 * var(--ch-head));
  margin: 0;
}
/* lines interleave with the belt: even belt items (z:1) run behind
   lines 2-3, odd items (z:3) run in front of line 2 only */
.hero-headline .hl-line { display: block; position: relative; white-space: nowrap; width: max-content; }
.hl-1 { z-index: 4; }
.hl-2 { z-index: 2; }
.hl-3 { z-index: 4; }
/* per-character stamp targets (JS splits); inline-block for transforms */
.hero-headline .ch { display: inline-block; will-change: transform; }
/* no-JS / pre-stitch fallback underline; JS swaps it for the sewn SVG */
.hero-headline .uline { display: inline-block; box-shadow: inset 0 -0.14em 0 var(--clay); }
.hero-headline .uline.is-stitched { box-shadow: none; }
.hero-stitch {
  position: absolute;
  left: 0; bottom: -0.06em;
  overflow: visible;
  pointer-events: none;
}
/* "SEWN": hidden sizer keeps the exact text metrics, the SVG sews over it */
.sewn-slot { position: relative; display: inline-block; }
.sewn-sizer { visibility: hidden; }
.sewn-svg { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.star-period {
  display: inline-block;
  width: 28px; height: 28px;
  margin-left: 0.12em;
  color: var(--clay);
  animation: star-spin 40s linear infinite;
}
@keyframes star-spin { to { transform: rotate(360deg); } }
.hero-foot {
  position: absolute;
  left: max(48px, calc((100% - 1360px) / 2 + 48px));
  bottom: 7vh;
  z-index: 5;
}
.hero-sub {
  color: var(--muted);
  font-size: 1.0625rem;
  max-width: calc(38 * var(--ch));
  margin-bottom: 28px;
}
.hero-ctas { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
/* the opaque video IS the page surface: its backdrop matches the hero
   background (sampled from the clip), oversized past the hero's top so
   hats exit through the top of the page. No radius, no shadow, no frame.
   Left + bottom mask fades dissolve any residual color mismatch. */
.video-stage {
  /* square sized by BOTH viewport axes: 124vh on widescreen, capped at
     81vw so square/portrait monitors (5:4, 4:3 side screens) never get
     a stage wider than the layout can hold. The right overhang scales
     with the stage (-10% of it, not of the viewport) so the pile —
     including the hats' rightward drift while they lift off in the
     scrub — always stays on screen, with clearance from the headline.
     Bottom pinned to the hero bottom; any excess height bleeds out
     through the page's top. */
  --stage: min(124vh, 81vw);
  position: absolute;
  bottom: 0; right: calc(var(--stage) * -0.1);
  height: var(--stage);
  aspect-ratio: 1 / 1;
  pointer-events: none;
  z-index: 1;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 12%),
    linear-gradient(to top, transparent 0, #000 10%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 12%),
    linear-gradient(to top, transparent 0, #000 10%);
  mask-composite: intersect;
}
.hero-copy { z-index: 2; }
.hero-vid {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block; object-fit: cover;
}
/* stack: scrub clip stays painted UNDERNEATH the landing clip at all
   times (Safari mispaints a video first shown mid-scroll — half its
   box came up empty), the landing covers it until the hand-off flips
   the landing's opacity, and the poster rides on top until playback */
#vid-depart { z-index: 1; }
#vid-landing { z-index: 2; }
.vid-poster { z-index: 3; }
/* 981-1280: the 124vh square swallows the copy column at these widths.
   Fill the hero exactly (100vh max) so the headline stays clear; the
   width cap and proportional overhang come from the base rule.
   Desktop >=1281 untouched. */
@media (min-width: 981px) and (max-width: 1280px) {
  .video-stage { --stage: min(100vh, 81vw); }
}
@media (max-width: 980px) {
  .hero-headline { font-size: clamp(44px, 11vw, 72px); }
  /* the 18px stitch box is em-relative-positioned but fixed-height, so at
     phone type sizes the thread rode up into the letter bottoms; drop it
     clear of SEWN's baseline */
  .hero-headline .hero-stitch { bottom: -0.2em; }
  /* ~90vw square pinned to the page top (the desktop bleed cut two
     thirds of the pile off-screen here and left a dead gap), centered
     so the pile sits under the middle of the screen */
  .video-stage { height: min(90vw, 100vh); top: 0; bottom: auto; right: auto; left: 50%; transform: translateX(-50%); }
  /* copy starts below the video square so the headline never sits on a hat */
  .hero-copy { padding-top: calc(min(90vw, 100vh) + 1.25rem); justify-content: flex-start; min-height: 0; }
  .hero-foot { position: relative; left: auto; bottom: auto; margin: 2rem 24px 3rem; }
  /* stacked hero reads centered: headline, sub, and both CTAs (owner call) */
  .hero-headline { max-width: none; text-align: center; }
  .hero-headline .hl-line { margin-inline: auto; }
  .hero-foot { text-align: center; }
  .hero-sub { margin-inline: auto; }
  .hero-ctas { justify-content: center; }
}
@media (max-width: 760px) {
  .hero-copy { padding-left: 24px; padding-right: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .star-period { animation: none; }
}

/* ---------- marquee ---------- */
.marquee {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 1.1rem 0; overflow: hidden;
  background: var(--paper-2);
}
.marquee-track { display: flex; gap: 0; width: max-content; will-change: transform; }
.marquee-chunk { display: flex; align-items: center; flex: none; }
.marquee-chunk span {
  font-family: var(--font-head);
  font-weight: 600; text-transform: uppercase;
  font-size: clamp(1rem, 1.7vw, 1.35rem); letter-spacing: 0.06em;
  padding: 0 1.6rem; white-space: nowrap;
}
.marquee-chunk .star { color: var(--clay); padding: 0; }
.marquee-chunk .star svg { width: 14px; height: 14px; display: block; }

/* ---------- triptych ---------- */
.triptych {
  padding: clamp(5rem, 10vw, 9rem) var(--pad-x);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1rem, 2vw, 2rem);
  align-items: start;
}
.triptych figure { position: relative; overflow: hidden; }
.triptych figure:nth-child(1) { grid-column: 1 / span 4; aspect-ratio: 3 / 4; }
.triptych figure:nth-child(2) { grid-column: 5 / span 5; aspect-ratio: 4 / 3; margin-top: clamp(2rem, 6vw, 6rem); }
.triptych figure:nth-child(3) { grid-column: 10 / span 3; aspect-ratio: 3 / 4.4; margin-top: clamp(1rem, 3vw, 3rem); }
.triptych img {
  width: 100%; height: 112%; object-fit: cover;
  filter: grayscale(0.12) contrast(1.04);
  will-change: transform;
}
.triptych figcaption {
  margin-top: 0.8rem; color: var(--muted);
}
@media (max-width: 760px) {
  .triptych { grid-template-columns: 1fr 1fr; }
  .triptych figure:nth-child(1) { grid-column: 1 / -1; margin: 0; }
  .triptych figure:nth-child(2) { grid-column: 1 / span 1; margin: 0; }
  .triptych figure:nth-child(3) { grid-column: 2 / span 1; margin: 0; aspect-ratio: 3/4; }
}

/* ---------- section header ---------- */
.sec-head { padding: 0 var(--pad-x); margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.sec-head .section-title { max-width: calc(20 * var(--ch-head)); }
.sec-head .body-copy { margin-top: 1.2rem; }

/* ---------- craft / anatomy ---------- */
.craft { padding: clamp(5rem, 10vw, 9rem) 0 clamp(4rem, 8vw, 7rem); background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.craft-grid {
  display: grid; grid-template-columns: minmax(0, 6.5fr) minmax(0, 5.5fr);
  gap: clamp(2rem, 5vw, 5rem);
  padding: 0 var(--pad-x);
  align-items: center;
}
.anatomy { position: relative; max-width: 500px; margin-inline: auto; width: 100%; }
.anatomy img { width: 100%; height: auto; filter: drop-shadow(0 24px 44px rgba(24, 20, 16, 0.28)); }
.hotspot {
  position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px;
  display: grid; place-items: center;
}
.hotspot i {
  width: 10px; height: 10px; background: var(--clay); border-radius: 50%;
  transition: transform 0.3s var(--ease-out);
}
.hotspot::before {
  content: ""; position: absolute; inset: 0; border: 1px solid var(--clay);
  border-radius: 50%; opacity: 0.5;
  animation: pulse 2.6s var(--ease-out) infinite;
}
@keyframes pulse {
  0% { transform: scale(0.5); opacity: 0.7; }
  70% { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1.25); opacity: 0; }
}
.hotspot:hover i, .hotspot.active i { transform: scale(1.7); }
.hotspot .tip {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translate(-50%, 4px);
  background: var(--ink); border: 1px solid var(--ink);
  color: var(--paper); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
  padding: 0.45rem 0.7rem; opacity: 0; pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
}
.hotspot:hover .tip, .hotspot.active .tip { opacity: 1; transform: translate(-50%, 0); }
.craft-list h3 {
  font-weight: 500; text-transform: uppercase;
  font-size: 0.8125rem; letter-spacing: 0.14em; color: var(--muted);
  margin: 2rem 0 0.9rem;
}
.craft-list h3:first-child { margin-top: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  font-size: 0.78rem; letter-spacing: 0.02em; font-weight: 400;
  padding: 0.5rem 0.85rem; border: 1px solid var(--line-strong);
  color: var(--muted); transition: border-color 0.25s, color 0.25s, background 0.25s;
  cursor: default;
}
.chip:hover, .chip.active { border-color: var(--clay); color: var(--ink); background: color-mix(in srgb, var(--clay) 9%, transparent); }
@media (max-width: 900px) {
  .craft-grid { grid-template-columns: 1fr; }
}

/* ---------- fabrics strip ---------- */
.fabrics { padding: clamp(5rem, 10vw, 9rem) 0 0; }
.fabric-strip {
  display: flex; height: clamp(420px, 64vh, 620px);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.fabric {
  position: relative; flex: 1; overflow: hidden; cursor: pointer;
  border-right: 1px solid var(--line);
  transition: flex 0.65s var(--ease-out);
}
.fabric:last-child { border-right: 0; }
.fabric img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 72%;
  filter: brightness(0.78) saturate(0.92);
  transition: filter 0.6s var(--ease-out), transform 0.9s var(--ease-out);
  transform: scale(1.06);
}
.fabric:hover, .fabric.open, .fabric:focus-visible { flex: 3.2; }
.fabric:hover img, .fabric.open img, .fabric:focus-visible img { filter: brightness(0.96) saturate(1); transform: scale(1); }
.fabric .f-label {
  position: absolute; left: 1.1rem; bottom: 1.1rem; z-index: 2;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--font-head); color: var(--paper);
  font-weight: 600; text-transform: uppercase;
  font-size: clamp(1.05rem, 1.7vw, 1.5rem); letter-spacing: 0.05em;
  transition: opacity 0.3s;
}
.fabric .f-detail {
  position: absolute; left: 1.4rem; right: 1.4rem; bottom: 1.3rem; z-index: 2;
  color: var(--paper);
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.45s var(--ease-out) 0.15s, transform 0.45s var(--ease-out) 0.15s;
}
.fabric .f-detail strong {
  display: block; font-family: var(--font-head);
  font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.4rem, 2.4vw, 2.2rem); line-height: 1;
}
.fabric .f-detail em {
  display: block; font-style: normal; color: var(--paper-70); font-size: 0.85rem; margin-top: 0.45rem; max-width: calc(34 * var(--ch));
}
.fabric::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(24, 20, 16, 0.72), transparent 55%);
}
.fabric:hover .f-label, .fabric.open .f-label, .fabric:focus-visible .f-label { opacity: 0; }
.fabric:hover .f-detail, .fabric.open .f-detail, .fabric:focus-visible .f-detail { opacity: 1; transform: translateY(0); }
.fabrics-note { padding: 1.2rem var(--pad-x) 0; color: var(--muted); }
@media (max-width: 860px) {
  .fabric-strip { flex-direction: column; height: auto; }
  .fabric { min-height: 64px; border-right: 0; border-bottom: 1px solid var(--line); }
  .fabric:hover, .fabric.open { flex: none; }
  .fabric img { position: absolute; }
  .fabric .f-label { writing-mode: horizontal-tb; transform: none; bottom: auto; top: 50%; margin-top: -0.7em; }
  .fabric .f-detail { display: none; }
  .fabric.open { min-height: 300px; }
  .fabric.open .f-label { opacity: 1; top: 1rem; margin: 0; }
}

/* ---------- pricing ---------- */
.pricing { padding: clamp(5rem, 10vw, 9rem) var(--pad-x); }
.pricing-grid {
  display: grid; grid-template-columns: minmax(0, 4.5fr) minmax(0, 7.5fr);
  gap: clamp(2.5rem, 5vw, 5rem); align-items: start;
}
.pricing-summary { position: sticky; top: calc(var(--nav-h) + 2rem); }
.pricing-summary .section-title { margin-bottom: 1.2rem; }
.includes { margin-top: 2rem; border-top: 1px solid var(--line-strong); }
.includes li {
  list-style: none; display: flex; align-items: center; gap: 0.8rem;
  padding: 0.85rem 0; border-bottom: 1px solid var(--line);
  color: var(--muted); font-size: 0.95rem;
}
.includes li svg { width: 13px; height: 13px; color: var(--clay); flex: none; }
.moq-note { margin-top: 1.4rem; color: var(--muted); }
.tiers { border-top: 1px solid var(--line-strong); }
.tier { border-bottom: 1px solid var(--line); }
.tier-btn {
  display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; gap: 1.5rem;
  width: 100%; padding: 1.35rem 0.2rem; text-align: left;
  transition: padding 0.3s var(--ease-out);
}
.tier-btn:hover { padding-left: 0.9rem; }
.tier-range {
  font-family: var(--font-head);
  font-weight: 600; text-transform: uppercase;
  font-size: clamp(1.1rem, 1.9vw, 1.6rem); letter-spacing: 0.01em;
}
.tier-price { font-size: clamp(1rem, 1.6vw, 1.35rem); font-weight: 500; }
.tier-price .unit { color: var(--muted); font-size: 0.72em; }
.tier-price.inquire { color: var(--clay); }
.tier-icon { position: relative; width: 14px; height: 14px; align-self: center; }
.tier-icon::before, .tier-icon::after {
  content: ""; position: absolute; background: var(--ink); transition: transform 0.35s var(--ease-out);
}
.tier-icon::before { left: 0; right: 0; top: 6px; height: 2px; }
.tier-icon::after { top: 0; bottom: 0; left: 6px; width: 2px; }
.tier.open .tier-icon::after { transform: scaleY(0); }
.tier-body { max-height: 0; overflow: hidden; transition: max-height 0.5s var(--ease-out); }
.tier-body ul { padding: 0.2rem 0.2rem 1.4rem; }
.tier-body li {
  list-style: none; color: var(--muted); font-size: 0.92rem;
  padding: 0.32rem 0; display: flex; gap: 0.7rem; align-items: baseline;
}
.tier-body li::before { content: "+"; color: var(--clay); font-weight: 500; }
.tier-body a { color: var(--clay); border-bottom: 1px solid currentColor; }
.pricing-notes { margin-top: 1.6rem; color: var(--muted); }
.pricing-notes a { color: var(--clay); border-bottom: 1px solid currentColor; }
@media (max-width: 900px) {
  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-summary { position: static; }
}

/* ---------- process: the stitched timeline ---------- */
.process {
  background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: clamp(3.5rem, 6vw, 5.5rem) 0 clamp(3rem, 5vw, 4.5rem);
}
.tl { position: relative; padding: 0 var(--pad-x); }
/* thread + ruler live on absolute overlays over the content box: no layout
   shift. Explicit width: an abs-positioned SVG ignores `right` (replaced
   element with intrinsic size) and collapses to its 300px default. */
.tl-thread, .tl-ruler {
  position: absolute; top: 0; left: var(--pad-x);
  width: calc(100% - var(--pad-x) * 2); height: 100%;
  pointer-events: none; overflow: visible;
}
.tl-thread { z-index: 1; }
.tl-seg { transition: opacity 0.25s ease; }
.tl.dim .tl-seg { opacity: 0.5; }
.tl.dim .tl-seg.on { opacity: 1; }
/* bands reserved above the columns: thread y=16, ruler ticks y=34-72 */
.tl-steps {
  list-style: none;
  display: grid; grid-template-columns: 0.95fr 1fr 1.55fr;
  gap: clamp(1.5rem, 3.5vw, 3.5rem);
  padding-top: 96px;
}
.tl-step { min-width: 0; position: static; }
.tl-step:focus-visible { outline: 2px solid var(--clay); outline-offset: 6px; }
.tl-node { position: absolute; width: 0; height: 0; z-index: 2; }
.tl-node i {
  position: absolute; left: -7px; top: -7px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--clay); border: 2.5px solid var(--paper-2);
  box-shadow: 0 0 0 1px var(--clay);
  transition: transform 0.25s var(--ease-out);
}
.tl-step:hover .tl-node i, .tl-step:focus-visible .tl-node i { transform: scale(1.45); }
.tl .step-num {
  font-family: var(--font-head); font-weight: 600;
  font-size: clamp(2.6rem, 4.5vw, 4.2rem); line-height: 0.9;
  color: transparent; -webkit-text-stroke: 1.5px var(--clay);
}
.tl-step h3 {
  font-family: var(--font-head); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.35rem, 2vw, 1.9rem); line-height: 1;
  margin: 0.7rem 0 0.7rem;
}
.tl-step > p { color: var(--muted-strong); font-size: clamp(0.95rem, 1.1vw, 1.05rem); max-width: calc(44 * var(--ch)); }
.tl-micro {
  /* inherits .tl-step > p's measure; Inter's "0" is 2.3% wider at 500
     than at 400, so this row needs its own value to stay pixel-identical
     to the `ch` it replaced */
  --ch: 0.646em;
  margin-top: 0.9rem; font-size: 0.8rem; font-weight: 500;
  letter-spacing: 0.04em; color: var(--muted-strong);
  transition: color 0.25s ease;
}
.tl-step:hover .tl-micro, .tl-step:focus-visible .tl-micro { color: var(--ink); }
/* ruler ticks (JS-built) */
.tl-tick { position: absolute; background: var(--line-strong); transition: background 0.2s ease; }
.tl-tick.lit { background: var(--clay); }
.tl-tick-label {
  position: absolute; font-size: 0.6rem; font-weight: 500;
  letter-spacing: 0.08em; color: var(--muted); transition: color 0.2s ease;
}
.tl-tick-label.lit { color: var(--clay-text); }
.tl-weeks {
  position: absolute; font-size: 0.6rem; font-weight: 500;
  letter-spacing: 0.22em; color: var(--muted);
}
@media (max-width: 760px) {
  /* the thread turns vertical down a left rail; ruler ticks ride it */
  .tl-steps { display: block; padding-top: 8px; padding-left: 4.4rem; }
  .tl-step { margin-bottom: 2.4rem; }
  .tl-step:last-child { margin-bottom: 0; }
}

/* ---------- silhouettes: visual starting points ---------- */
.sils { padding: clamp(3.5rem, 7vw, 6rem) var(--pad-x); border-bottom: 1px solid var(--line); }
.sils .sec-head { padding: 0; }
.sil-tiles {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
}
.sil-tile { min-width: 0; }
.sil-tile-img {
  aspect-ratio: 4 / 3;
  border: 1px dashed var(--line-strong);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); margin-bottom: 0.9rem;
}
/* filled tiles: photo backdrop is already page paper — no frame */
.sil-tile-img.filled { border: 0; }
.sil-tile-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sil-tile h3 {
  font-family: var(--font-head); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.2rem, 1.8vw, 1.6rem); line-height: 1;
}
.sil-spec {
  margin-top: 0.35rem;
  font-size: 0.72rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--muted);
}
.sil-tag { margin-top: 0.35rem; color: var(--muted); font-size: 0.9rem; }
.sil-guide { margin-top: clamp(1.8rem, 3vw, 2.6rem); }
@media (max-width: 900px) { .sil-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .sil-tiles { grid-template-columns: 1fr; } }

/* ---------- pricing includes checklist ---------- */
.includes-list { list-style: none; margin: 0.5rem 0 1.1rem; }
.includes-list li {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.28rem 0; color: var(--muted);
}
.includes-list li svg { width: 12px; height: 12px; color: var(--clay); flex: none; }

/* ---------- specs ---------- */
.specs { padding: clamp(2.25rem, 4.5vw, 4rem) var(--pad-x); }
.specs-table { border-top: 1px solid var(--line-strong); }
.specs-row {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 2rem; padding: 1.5rem 0; border-bottom: 1px solid var(--line);
}
.specs-row h4 {
  font-family: var(--font-head);
  font-weight: 600; text-transform: uppercase;
  font-size: 1.1rem; letter-spacing: 0.04em;
}
.specs-row .vals { display: flex; gap: clamp(1.5rem, 4vw, 4rem); flex-wrap: wrap; }
.specs-row .vals div strong { font-weight: 500; font-size: clamp(1.15rem, 2vw, 1.6rem); display: block; }
.specs-row .vals div span { color: var(--muted); font-size: 0.78rem; }
@media (max-width: 720px) {
  .specs-row { grid-template-columns: 1fr; gap: 0.8rem; }
}

/* ---------- faq ---------- */
.faq { padding: 0 var(--pad-x) clamp(5rem, 10vw, 9rem); }
.faq-list { border-top: 1px solid var(--line-strong); max-width: 62rem; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%; text-align: left; display: flex; justify-content: space-between; align-items: center; gap: 2rem;
  padding: 1.4rem 0.2rem;
  font-weight: 500; font-size: clamp(1.02rem, 1.5vw, 1.25rem);
  transition: color 0.25s, padding 0.3s var(--ease-out);
}
.faq-q:hover { color: var(--clay); padding-left: 0.9rem; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.45s var(--ease-out); }
.faq-a p { padding: 0 0.2rem 1.4rem; color: var(--muted); max-width: calc(60 * var(--ch)); }

/* ---------- hats wall teaser ---------- */
.wall {
  position: relative; overflow: hidden;
  height: clamp(360px, 62vh, 600px);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--paper-2);
}
.wall-track { position: absolute; inset: 0; width: 135%; will-change: transform; }
.wall-track img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.wall-btn {
  position: absolute; left: 50%; bottom: clamp(1.5rem, 4vw, 3rem); transform: translateX(-50%);
}
.wall-btn:active { transform: translateX(-50%) translateY(1px); }

/* ---------- founder ---------- */
.founder {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 5rem);
  padding: clamp(5rem, 10vw, 9rem) var(--pad-x);
  background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  align-items: center;
}
.founder-photo { position: relative; overflow: hidden; aspect-ratio: 4 / 5; }
.founder-photo img { width: 100%; height: 112%; object-fit: cover; filter: grayscale(1) contrast(1.08); will-change: transform; }
.founder-copy .section-title { margin-bottom: 1.6rem; font-size: clamp(2rem, 4.2vw, 3.7rem); }
.founder-copy .body-copy + .body-copy { margin-top: 1rem; }
.founder-sig { margin-top: 2rem; display: flex; align-items: center; gap: 1rem; }
.founder-sig svg { width: 18px; height: 18px; color: var(--clay); }
.founder-sig span { font-size: 0.8rem; font-weight: 500; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; }
@media (max-width: 860px) {
  .founder { grid-template-columns: 1fr; }
  .founder-photo { max-width: 420px; }
}

/* ---------- cta (photographic dark band) ---------- */
.cta {
  position: relative; min-height: 92dvh;
  display: grid; align-items: center;
  padding: clamp(5rem, 10vw, 8rem) var(--pad-x);
  overflow: hidden;
  color: var(--paper);
}
.cta video, .cta .cta-poster {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) brightness(0.62) contrast(1.05);
}
.cta::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(24, 20, 16, 0.88) 22%, rgba(24, 20, 16, 0.35) 70%, rgba(24, 20, 16, 0.65));
}
.cta-content { position: relative; z-index: 2; max-width: 780px; }
.cta-content .section-title { font-size: clamp(3rem, 7vw, 6.4rem); }
.cta-content p { margin: 1.6rem 0 2.4rem; color: var(--paper-70); font-size: clamp(1.02rem, 1.3vw, 1.2rem); max-width: calc(40 * var(--ch)); }
/* over dark imagery the ink fill needs an edge */
.cta .btn--solid { border-color: var(--paper); }
.cta .btn--solid:hover { border-color: var(--clay); }

/* ---------- footer (dark contrast band) ---------- */
footer {
  background: var(--ink); color: var(--paper);
  padding: clamp(3rem, 6vw, 5rem) var(--pad-x) 2rem;
}
.foot-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr); gap: 2.5rem; }
.foot-brand .text-logo { font-size: clamp(2.2rem, 5vw, 3.6rem); }
.foot-brand p { color: var(--paper-45); margin-top: 0.8rem; max-width: calc(34 * var(--ch)); }
.foot-col h5, .foot-col .foot-h {
  font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--paper-45); margin-bottom: 1.1rem; font-weight: 500;
}
/* overflow-wrap: the email is one unbreakable token that overflows
   narrow grid columns (768px band) without it */
.foot-col a { display: block; padding: 0.3rem 0; color: var(--paper-70); transition: color 0.25s; overflow-wrap: anywhere; }
.foot-col a:hover { color: var(--clay); }
.foot-legal {
  margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.4rem; border-top: 1px solid var(--line-inv);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  color: var(--paper-45);
}
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr; gap: 2rem; } }

/* ---------- gallery page ---------- */
.page-head {
  padding: calc(var(--nav-h) + clamp(3rem, 8vw, 6rem)) var(--pad-x) clamp(2.5rem, 5vw, 4rem);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
}
.page-head h1 { font-size: clamp(3.2rem, 9vw, 8.5rem); }
.page-head .mono { color: var(--muted); }
.gallery-masonry {
  columns: 3; column-gap: clamp(0.8rem, 1.5vw, 1.5rem);
  padding: 0 var(--pad-x) clamp(4rem, 8vw, 7rem);
}
/* one hat = one atomic block: a style's shots never split across columns */
.gallery-masonry .g-group { break-inside: avoid; }
.gallery-masonry .g-item {
  break-inside: avoid; margin-bottom: clamp(0.8rem, 1.5vw, 1.5rem);
  overflow: hidden; position: relative; display: block; width: 100%;
  /* photos are paper-recolored: no border, no tile bg — hats float on the page */
  background: var(--paper);
}
.gallery-masonry .g-item img {
  /* height:auto is load-bearing — the imgs carry width/height attributes to
     reserve their space, and without it that height wins over the scaled
     width and every shot renders squashed */
  width: 100%; height: auto; transition: transform 0.7s var(--ease-out);
}
.gallery-masonry .g-item:hover img { transform: scale(1.035); }
@media (max-width: 900px) { .gallery-masonry { columns: 2; } }
@media (max-width: 560px) { .gallery-masonry { columns: 1; } }

/* lightbox (stays dark: it's a projection room) */
.lightbox {
  position: fixed; inset: 0; z-index: 120; display: none;
  align-items: center; justify-content: center;
  background: rgba(24, 20, 16, 0.93); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  padding: 4vh 4vw;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lightbox-close {
  position: absolute; top: 1.4rem; right: 1.6rem;
  font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--paper-70); padding: 0.6rem;
}
.lightbox-close:hover { color: var(--clay); }

/* ---------- get started page ---------- */
.gs-layout {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  min-height: 100dvh;
  align-items: start;
}
/* split-screen: the photo column is a sticky 100dvh frame — it holds
   still (quote and scrim pinned to the viewport) while the form scrolls */
.gs-photo { position: sticky; top: 0; height: 100dvh; overflow: hidden; }
.gs-photo img, .gs-photo video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(0.4) brightness(0.8);
}
.gs-photo .gs-quote {
  position: absolute; left: clamp(1.5rem, 3vw, 3rem); bottom: clamp(1.5rem, 3vw, 3rem); right: clamp(1.5rem, 3vw, 3rem); z-index: 2;
  color: var(--paper);
}
.gs-photo .gs-quote blockquote {
  font-family: var(--font-head);
  font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.4rem, 2.2vw, 2.1rem); line-height: 1.05;
}
.gs-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(24, 20, 16, 0.85), transparent 45%); }
.gs-form-panel { padding: calc(var(--nav-h) + 2.5rem) clamp(1.5rem, 5vw, 5rem) 5rem; }
.gs-title { font-size: clamp(2.2rem, 4vw, 3.6rem); margin: 1rem 0 0.8rem; }
.gs-sub { color: var(--muted); max-width: calc(48 * var(--ch)); margin-bottom: 2.5rem; }

/* step progress */
.gs-progress { display: flex; gap: 0.5rem; margin-bottom: 2.5rem; }
.gs-progress .p-seg { flex: 1; }
.gs-progress .p-seg i { display: block; height: 2px; background: var(--line-strong); position: relative; overflow: hidden; }
.gs-progress .p-seg i::after {
  content: ""; position: absolute; inset: 0; background: var(--clay);
  transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease-out);
}
.gs-progress .p-seg.done i::after, .gs-progress .p-seg.current i::after { transform: scaleX(1); }
.gs-progress .p-seg span {
  display: block; margin-top: 0.55rem; font-size: 0.64rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.gs-progress .p-seg.current span { color: var(--ink); }

/* form steps */
.form-step { display: none; }
.form-step.active { display: block; animation: stepIn 0.5s var(--ease-out); }
@keyframes stepIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.form-step h2 {
  font-family: var(--font-head);
  font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem); margin-bottom: 1.8rem;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.form-group { margin-bottom: 1.2rem; }
.form-group label {
  display: block; font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.5rem;
}
.form-group label .req { color: var(--clay); }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; background: transparent; border: 1px solid var(--line-strong);
  color: var(--ink); font: inherit; font-size: 0.98rem;
  padding: 0.85rem 1rem; border-radius: 0;
  transition: border-color 0.25s, background 0.25s;
  -webkit-appearance: none; appearance: none;
}
.form-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23181410' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center;
  padding-right: 2.6rem;
}
.form-group select:invalid { color: var(--muted); }
.form-group option { color: var(--ink); background: var(--paper); }
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--muted); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--clay); background: var(--paper-2);
}
/* visible ring for keyboard focus (border-color alone is too subtle) */
.form-group input:focus-visible, .form-group select:focus-visible, .form-group textarea:focus-visible {
  outline: 2px solid var(--clay); outline-offset: 2px;
}
.form-group .err-msg {
  display: none; color: var(--clay-text); font-size: 0.8rem; margin-top: 0.4rem;
}
.form-group.invalid input, .form-group.invalid select, .form-group.invalid textarea { border-color: var(--clay); }
.form-group.invalid .err-msg { display: block; }

/* silhouette visual select */
.sil-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem; margin-bottom: 1.4rem; }
.sil-card { position: relative; }
.sil-card input { position: absolute; opacity: 0; inset: 0; }
.sil-card label {
  display: block; border: 1px solid var(--line-strong); padding: 1.1rem 1.2rem;
  cursor: pointer; transition: border-color 0.25s, background 0.25s; height: 100%;
  font-family: var(--font-sans); text-transform: none; letter-spacing: normal;
  font-size: 1rem; color: var(--ink); margin-bottom: 0;
}
.sil-card strong {
  display: block; font-family: var(--font-head); font-weight: 600; text-transform: uppercase;
  font-size: 1.15rem;
}
.sil-card em { display: block; font-style: normal; color: var(--muted); font-size: 0.8rem; margin-top: 0.35rem; line-height: 1.45; }
.sil-card input:checked + label { border-color: var(--clay); background: color-mix(in srgb, var(--clay) 7%, transparent); }
.sil-card input:focus-visible + label { outline: 2px solid var(--clay); outline-offset: 3px; }
@media (max-width: 640px) { .sil-grid { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; gap: 0; } }

.gs-nav-row { display: flex; justify-content: space-between; align-items: center; margin-top: 2rem; gap: 1rem; }
.btn-ghost {
  font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); padding: 0.8rem 0; transition: color 0.25s;
}
.btn-ghost:hover { color: var(--ink); }
.gs-risk { margin-top: 1.2rem; color: var(--muted); font-size: 0.85rem; }
.gs-expect { margin-top: 0.8rem; color: var(--muted); font-size: 0.85rem; max-width: calc(56 * var(--ch)); }
/* inline "what are vector files?" explainer toggle */
.link-note {
  display: inline-block; margin: 0.15rem 0 0.4rem;
  font-size: 0.78rem; font-weight: 500;
  color: var(--clay-text); border-bottom: 1px solid currentColor;
  cursor: pointer;
}
.link-note:hover { color: var(--ink); }
.vec-help {
  margin: 0.2rem 0 0.7rem; padding: 0.7rem 0.9rem;
  background: var(--paper-2); border-left: 2px solid var(--clay);
  color: var(--muted-strong); font-size: 0.85rem; max-width: calc(52 * var(--ch));
}
.form-success { text-align: center; padding: 4rem 1rem; display: none; }
.form-success.show { display: block; animation: stepIn 0.5s var(--ease-out); }
.form-success h2 { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; font-size: clamp(1.9rem, 3.6vw, 3rem); margin-bottom: 1rem; }
.form-success p { color: var(--muted); max-width: calc(44 * var(--ch)); margin: 0 auto; }
@media (max-width: 980px) {
  .gs-layout { grid-template-columns: 1fr; }
  .gs-photo { display: none; }
}

/* ---------- flagship: "Your Hat. Your Way." ---------- */
.flagship {
  padding: clamp(3.5rem, 7vw, 6rem) var(--pad-x);
  border-bottom: 1px solid var(--line);
}
/* no max-width cap: on wide screens the hat column rides out to the
   page's right edge instead of stranding white space past 1400px */
.flagship-grid {
  position: relative; /* anchors the .tag-branches overlay */
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 6vw, 6rem); align-items: center;
}
/* branch threads: JS-drawn arrows from the sewn underline out to the
   three hat bands' callouts; geometry is computed per layout in main.js.
   Pixel-sized (not inset-stretched) so live window resizing never warps
   the drawn threads — JS rebuilds them to the new layout instead */
.tag-branches {
  position: absolute; top: 0; left: 0;
  overflow: visible; pointer-events: none;
}
@media (max-width: 860px) { .tag-branches { display: none; } }
/* stitched infographic arrows: replace the arrows erased from the hat
   PNGs; same pixel-sized overlay pattern, shown at every width */
.hat-arrows {
  position: absolute; top: 0; left: 0;
  overflow: visible; pointer-events: none;
}
.flagship-tagline {
  font-size: clamp(3.4rem, 8.5vw, 8rem);
  line-height: 0.94;
}
.flagship-tagline .tag-line { display: block; width: max-content; }
/* the sewn underline reuses the hero stitch: JS appends .hero-stitch
   into .tag-uline; box-shadow is the pre-JS / no-JS fallback */
.flagship-tagline .tag-uline { display: inline-block; position: relative; box-shadow: inset 0 -0.12em 0 var(--clay); }
.flagship-tagline .tag-uline.is-stitched { box-shadow: none; }
.flagship-copy { margin-top: 2.2rem; }
.flagship-copy .body-copy + .body-copy { margin-top: 1rem; }
.flagship-copy .link-plain { margin-top: 1.8rem; display: inline-block; }
/* hat detail diagram: the owner's customize-every-detail infographic,
   backdrop mapped to site paper so it prints straight onto the page */
.hatlab { width: 100%; margin: 0; }
.hatlab img { display: block; height: auto; }
/* staggered bands: widths are native-px / 1047 (the full poster's width)
   so all three hats keep the same drawing scale after the split.
   side + interior hug the left, the back view pulls hard right; the
   slight negative margins buy back the height the bigger art adds. */
.hatlab .hl-side { width: 91%; margin-right: auto; }
.hatlab .hl-back { width: 95.5%; margin-left: auto; margin-top: -3%; }
.hatlab .hl-interior { width: 93%; margin-right: auto; margin-top: -3%; }
@media (max-width: 860px) {
  .flagship-grid { grid-template-columns: 1fr; }
  .hatlab { max-width: 520px; margin-inline: auto; }
  /* stacked layout: sit the sewn underline in the gap between
     "YOUR WAY." and the copy below instead of across the letter bottoms */
  .flagship-tagline .tag-uline .hero-stitch { bottom: -0.34em; }
  /* stacked layout reads centered: tagline, copy, founder link (owner call) */
  .flagship-tagline .tag-line { margin-inline: auto; }
  .flagship-copy { text-align: center; }
  .flagship-copy .body-copy { margin-inline: auto; }
}

/* ---------- process turnaround line ---------- */
.turnaround {
  padding: 0 var(--pad-x) clamp(2.5rem, 5vw, 4rem);
  color: var(--muted-strong); /* sits on --paper-2, where --muted fails AA */
}
.turnaround strong { color: var(--ink); font-weight: 500; }

/* ---------- pricing table (plain, per content doc) ---------- */
.price-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--line-strong);
}
.price-table th {
  font-size: 0.72rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.22em; color: var(--muted);
  text-align: left; padding: 1rem 0.2rem 0.8rem;
  border-bottom: 1px solid var(--line);
}
.price-table th:last-child, .price-table td:last-child { text-align: right; }
.price-table td {
  padding: 1.05rem 0.2rem;
  border-bottom: 1px solid var(--line);
  transition: color 0.25s, background-color 0.25s;
}
/* row hover lights up clay, kin to the FAQ summaries */
.price-table tbody tr:hover td {
  color: var(--clay);
  background: rgba(196, 82, 44, 0.05);
}
.price-table tbody tr:hover .pt-price.inquire a { color: var(--clay); }
.price-table .pt-units {
  font-family: var(--font-head);
  font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.25rem, 2vw, 1.7rem); line-height: 1;
  letter-spacing: 0.01em;
}
.price-table .pt-price {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  font-size: clamp(1rem, 1.6vw, 1.3rem);
}
.price-table .pt-price .unit { color: var(--muted); font-size: 0.72em; }
.price-table .pt-price.inquire { color: var(--clay-text); }
.pricing-fineprint { margin-top: 1.8rem; }
.pricing-fineprint p { color: var(--muted); max-width: calc(58 * var(--ch)); }
.pricing-fineprint p + p { margin-top: 0.6rem; }
.pricing-fineprint strong { color: var(--ink); font-weight: 500; }
@media (max-width: 640px) {
  .price-table td { padding: 0.75rem 0.15rem; }
  .price-table .pt-units { font-size: 1.15rem; }
  .price-table .pt-price { font-size: 0.95rem; }
}

/* ---------- fabric book: swatch pack pages in a sideways rail ---------- */
.fabric-book { border-bottom: 0; }
.book-strip {
  display: flex; gap: 1.1rem;
  overflow-x: auto;
  padding: 0.6rem 0 1.1rem;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.book-strip a { flex: 0 0 auto; scroll-snap-align: start; }
.book-strip img {
  height: clamp(320px, 44vw, 500px); width: auto; display: block;
  border: 1px solid var(--line-strong);
  background: #fff;
  transition: transform 0.25s var(--ease-out);
}
.book-strip a:hover img { transform: translateY(-4px); }
.book-strip a:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; }
.book-fineprint { margin-top: 1.1rem; color: var(--muted); font-size: 0.95rem; }

/* ---------- faq: native details/summary, hairline dividers ---------- */
.faq-details { border-top: 0.5px solid var(--line-strong); max-width: 62rem; }
.faq-d { border-bottom: 0.5px solid var(--line-strong); }
.faq-d summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding: 1.4rem 0.2rem;
  font-family: var(--font-head); font-weight: 600; text-transform: uppercase;
  font-size: clamp(1.15rem, 2vw, 1.55rem); line-height: 1.1;
  transition: color 0.25s, padding-left 0.3s var(--ease-out);
}
.faq-d summary::-webkit-details-marker { display: none; }
.faq-d summary:hover { color: var(--clay); padding-left: 0.9rem; }
.faq-d summary:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; }
.faq-d summary .tier-icon { flex: none; }
.faq-d[open] summary .tier-icon::after { transform: scaleY(0); }
.faq-d .faq-body { padding: 0 0.2rem 1.5rem; color: var(--muted); max-width: calc(60 * var(--ch)); }
.faq-more { margin-top: 1.6rem; color: var(--muted); max-width: 62rem; }
.faq-more a { color: var(--clay-text); text-decoration: underline; text-underline-offset: 3px; }
.faq-more a:hover { color: var(--clay); }

/* ---------- about page ---------- */
.about-hero {
  padding: calc(var(--nav-h) + clamp(3rem, 8vw, 6rem)) var(--pad-x) clamp(2.5rem, 5vw, 4rem);
}
.about-hero h1 { font-size: clamp(2.8rem, 7.2vw, 6.8rem); max-width: calc(14 * var(--ch-head)); }
.about-hero .mono { color: var(--muted); margin-bottom: 1.4rem; }
.about-body {
  padding: 0 var(--pad-x) clamp(5rem, 10vw, 9rem);
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: start;
}
.about-prose { max-width: calc(52 * var(--ch)); font-size: clamp(1.05rem, 1.3vw, 1.2rem); }
.about-prose p + p { margin-top: 1.4em; }
.about-pull {
  border: 0; margin: clamp(2.5rem, 5vw, 4rem) 0;
  font-family: var(--font-head); font-weight: 600; text-transform: uppercase;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: 1.04;
  color: var(--clay); max-width: calc(18 * var(--ch-head));
}
.about-pull::before {
  content: ""; display: block; width: 72px;
  border-top: 3px dashed var(--clay); margin-bottom: 1.1rem;
}
.about-photo { position: sticky; top: calc(var(--nav-h) + 2rem); }
/* the stuck photo always fits the viewport, caption included */
.about-photo img {
  max-height: calc(100dvh - var(--nav-h) - 6rem);
  object-fit: cover;
}
.about-photo .photo-slot {
  aspect-ratio: 4 / 5;
  border: 1px dashed var(--line-strong);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
}
.about-photo figcaption { margin-top: 0.8rem; color: var(--muted); }
@media (max-width: 860px) {
  .about-body { grid-template-columns: 1fr; }
  .about-photo { position: static; order: -1; max-width: 420px; }
}

/* ---------- customization page ---------- */
.cz-section, .specs {
  scroll-margin-top: calc(var(--nav-h) + 12px);
}
.cz-section {
  padding: clamp(3.5rem, 7vw, 6rem) var(--pad-x);
  border-bottom: 1px solid var(--line);
}
.cz-section .eyebrow { margin-bottom: 0.6rem; display: block; }
.cz-section .section-title { margin-bottom: 1.2rem; }
.cz-section .body-copy + .body-copy { margin-top: 0.8rem; }
/* inline-prose term treatment: each term inked, separated by clay stars */
.term-list { max-width: 62rem; margin-top: 1.6rem; }
/* fabrics roster reads as ONE line: unclamp the measure and size the
   type to the viewport so Corduroy + Denim never wrap to a second row */
.cz-materials .term-list { max-width: none; }
.cz-materials .term-list .term { font-size: clamp(1rem, 1.9vw, 1.7rem); }
@media (max-width: 640px) {
  .cz-materials .term-list .term { font-size: 1.05rem; }
}
/* phones: the lede sat right on top of the fabric roster — open it up */
@media (max-width: 860px) {
  .cz-materials .term-list { margin-top: 2.6rem; }
}
.term-list .term {
  font-family: var(--font-head); font-weight: 600; text-transform: uppercase;
  font-size: clamp(1.3rem, 2.6vw, 2.1rem); line-height: 1.35;
  white-space: nowrap;
}
/* clay commas: quick 8deg tilt when their term is hovered — nothing more.
   The comma lives INSIDE its term span so a line break can never orphan it. */
.term-list .term-sep {
  color: var(--clay); padding-right: 0.45em;
  display: inline-block;
  transform-origin: left bottom;
  transition: transform 0.15s ease;
}
.term-list .term:hover .term-sep { transform: rotate(8deg); }
.term-list .term { transition: color 0.25s; }

/* ---------- spec explorer: the hat is the nav ---------- */
.explorer-grid {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  margin-top: 2.4rem;
  max-width: 1400px;
}
/* leader lines live on an absolute overlay: zero layout shift */
.leader-svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 3; overflow: visible;
}
/* region highlight: base photo dims, the masked copy lights the region.
   Only the hat dims — never the page. Keep the existing drop-shadow. */
.anatomy .hat-base {
  /* the diagram's backdrop IS the page paper: no drop-shadow, no card edge */
  filter: none;
  transition: filter 0.25s ease;
}
.anatomy.region-lit .hat-base {
  filter: brightness(0.55) saturate(0.6);
}
/* the cartoon infographic wants more room than the photo cutout did */
.explorer-grid .anatomy { max-width: 660px; }
.anatomy .hat-glow {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 1;
}
.anatomy .hat-top { opacity: 0; transition: opacity 0.25s ease; }
.anatomy.region-lit .hat-top { opacity: 1; }

/* hotspot dots */
.hs-dot {
  position: absolute; width: 32px; height: 32px;
  margin: -16px 0 0 -16px;
  display: grid; place-items: center;
  z-index: 2; cursor: pointer;
}
.hs-dot i {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--clay); border: 2px solid #fff;
  box-shadow: 0 1px 6px rgba(24, 20, 16, 0.35);
  transition: transform 0.25s var(--ease-out);
  animation: dot-pulse 2.4s ease-in-out infinite alternate;
  animation-delay: var(--pulse-delay, 0s);
}
@keyframes dot-pulse { from { transform: scale(1); } to { transform: scale(1.15); } }
.hs-dot:hover i, .hs-dot:focus-visible i, .hs-dot.active i {
  animation: none;
  transform: scale(1.6);
}
.hs-dot.ping i { animation: dot-ping 0.5s ease-in-out 2; }
@keyframes dot-ping { 50% { transform: scale(1.55); } }
/* option groups: active brightens to full ink, the rest dim to 35% */
.explorer-groups .cz-group { transition: opacity 0.25s ease; }
.explorer-grid.has-active .explorer-groups .cz-group { opacity: 0.35; }
.explorer-grid.has-active .explorer-groups .cz-group.active { opacity: 1; }
/* group headers: hairline draws in on scroll */
.cz-group h3 { position: relative; padding-bottom: 0.55rem; }
.cz-group h3::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--line-strong);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.8s var(--ease-out);
}
.cz-group h3.drawn::after { transform: scaleX(1); }
/* chip row: the coarse-pointer / narrow-layout stand-in for the dots */
.hs-chips { display: none; gap: 0.5rem; flex-wrap: wrap; }
@media (max-width: 900px), (pointer: coarse) {
  .hs-chips { display: flex; }
}
@media (max-width: 900px) {
  .explorer-grid { grid-template-columns: 1fr; gap: 1.6rem; align-items: start; }
  .leader-svg { display: none; }
}

/* ---------- customization v3: the scroll journey ---------- */
.jtitle {
  display: block; width: min(660px, 86%); height: auto;
  margin: clamp(1.5rem, 3vw, 2.5rem) auto clamp(1rem, 2vw, 1.5rem);
}
.journey { max-width: 1400px; }
.jband {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  /* fixed generous gutter: the leader thread needs room to travel */
  gap: clamp(96px, 9vw, 150px);
  align-items: center;
  padding: clamp(2rem, 4vw, 3.25rem) 0;
  border-top: 1px solid var(--line);
}
.jband:first-child { border-top: 0; }
.jband--slim { display: block; }
.jfig { position: relative; }
/* the stage wraps ONLY the image + dots, so dot percentages always
   track the drawing even when the chip row adds height below.
   width: fit-content keeps the stage exactly the image's rendered
   size when max-height binds (portrait crops) — dots stay true */
.jstage { position: relative; width: fit-content; margin-inline: auto; }
.jstage .jbase {
  display: block; width: auto; height: auto;
  /* size by BOTH constraints: never wider than the column, never
     taller than ~72vh, never cropped — portrait and landscape alike */
  max-width: 100%; max-height: 72vh;
  object-fit: contain;
}
.jfig .jchips { margin-top: 0.9rem; }
.jline {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 2; overflow: visible;
}
/* live annotation tooltip: the original callout's microcopy */
.jtip {
  position: absolute; z-index: 4; pointer-events: none;
  min-width: 138px; max-width: 210px;
  background: var(--paper); border: 1px solid var(--ink);
  box-shadow: 4px 4px 0 rgba(24, 20, 16, 0.12);
  padding: 0.5rem 0.7rem 0.55rem;
  opacity: 0; transition: opacity 0.18s ease;
}
.jtip.on { opacity: 1; }
.jtip strong {
  display: block; font-family: var(--font-head); font-weight: 700;
  text-transform: uppercase; font-size: 0.82rem; letter-spacing: 0.03em;
  color: var(--ink); line-height: 1.2;
}
.jtip span {
  display: block; margin-top: 0.15rem;
  font-family: var(--font-sans); font-size: 0.78rem; line-height: 1.35;
  color: var(--muted-strong);
}
/* term lighting: hovered/locked option brightens, siblings step back */
.jlist .term-list { transition: none; }
.jlist.has-active .term { opacity: 0.35; transition: opacity 0.25s ease, color 0.25s; }
.jlist.has-active .term.active { opacity: 1; color: var(--clay-text); }
.term-list .term.active { color: var(--clay-text); }
.term-list .term[data-opt] { cursor: default; }
/* chip expanded state carries the tooltip copy on coarse pointers */
.chip .chip-tip { display: none; }
.chip.active .chip-tip {
  display: block; margin-top: 0.2rem;
  font-size: 0.72rem; line-height: 1.3; text-transform: none;
  letter-spacing: 0; color: var(--muted-strong);
}
@media (prefers-reduced-motion: reduce) {
  .jtip { transition: none; }
  .hs-dot i { animation: none; }
}
@media (max-width: 900px) {
  .jband { grid-template-columns: 1fr; gap: 1.2rem; }
  .jline { display: none; }
  .jfig { max-width: 520px; }
}

/* ---------- materials: hover tint bands (pre-rendered layers) ------ */
.cz-materials { position: relative; }
.cz-materials > *:not(.tint-stack) { position: relative; z-index: 1; }
.tint-stack { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.tint-stack .tint {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity 0.18s ease;
}
.tint-stack .tint.on { opacity: 0.06; }
.tint[data-tint="hemp"] { background: #7A7D5F; }
.tint[data-tint="cotton-canvas"] { background: #B39A6B; }
.tint[data-tint="cotton-twill"] { background: #6F7D6A; }
.tint[data-tint="performance-nylon"] { background: #5E6B77; }
.tint[data-tint="mesh"] { background: #8A8F94; }
.tint[data-tint="corduroy"] { background: #A0522D; }
.tint[data-tint="denim"] { background: #4E6379; }
.cz-lede { color: var(--muted); max-width: calc(58 * var(--ch)); margin-top: 0.4rem; }
.cz-group { margin-top: 2.4rem; }
.cz-group h3 {
  font-size: 0.72rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.22em; color: var(--muted); margin-bottom: 0.9rem;
}
/* subsection photo row: hairline-gapped triptych with mono captions */
.cz-photo-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  margin-top: 2.4rem;
}
.cz-photo-grid figure { background: var(--paper); }
.cz-photo-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.cz-photo-grid figcaption { padding: 0.7rem 0.8rem; color: var(--muted); }
@media (max-width: 720px) { .cz-photo-grid { grid-template-columns: 1fr; } }

/* pending-image slot, shared */
.img-slot {
  border: 1px dashed var(--line-strong);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); margin-top: 2.4rem;
  aspect-ratio: 21 / 9;
}
.img-slot.swatch { aspect-ratio: auto; min-height: 100%; margin: 0; }
.cz-fabric-pending {
  flex: 1; min-width: 0; border-right: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); text-align: center; padding: 1rem 0.5rem;
}

/* ---------- reveal defaults (JS adds .rv) ---------- */
/* Reveals fade only — no travel. The 28px translateY this used to carry
   meant every reveal element sat 28px BELOW its final spot and rose into
   it on scroll-in, so the whole page read as shifting down and around on
   the first pass down (and never again, since the triggers are once:true
   — which is why it "fixed itself"). Desktop was the only place it ran;
   mobile already opted out via mobileStatic in main.js. */
.rv { opacity: 0; }
html.no-motion .rv { opacity: 1; transform: none; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
  .rv { opacity: 1 !important; transform: none !important; }
  .hotspot::before { animation: none; }
}

/* ---------- terms page ---------- */
.legal-hero {
  padding: calc(var(--nav-h) + clamp(3rem, 8vw, 6rem)) var(--pad-x) clamp(2rem, 4vw, 3rem);
}
.legal-hero .mono { color: var(--muted); margin-bottom: 1.4rem; }
.legal-meta { color: var(--muted); font-size: 0.95rem; margin-top: 0.6rem; }
.legal-meta a { color: var(--clay-text); text-decoration: underline; text-underline-offset: 3px; }
.legal-meta a:hover { color: var(--clay); }
.legal-body {
  padding: 0 var(--pad-x) clamp(5rem, 10vw, 9rem);
  max-width: calc(70 * var(--ch)); margin-inline: auto;
  font-size: clamp(1rem, 1.1vw, 1.08rem);
}
.legal-body h2 {
  font-family: var(--font-head); font-weight: 600; text-transform: uppercase;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem); margin: 2.4em 0 0.7em;
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body p { color: var(--ink); max-width: 100%; }
.legal-body p + p, .legal-body p + h2, .legal-body h2 + p { margin-top: 1.1em; }
.legal-body strong { font-weight: 700; }