/* =============================================================================
   ProofCraft Digital — "The Ledger"
   A warm paper-and-ink editorial system. Scrolling accrues proof, line by line.
   Built by hand. Vanilla CSS. Transform/opacity motion only.
   -----------------------------------------------------------------------------
   0. Tokens
   1. Reset & base
   2. Accessibility
   3. Texture (grain)
   4. Layout (shell, ledger margin, entries)
   5. Typography utilities
   6. Custom cursor (the nib)
   7. Buttons & links
   8. Navigation
   9. Hero — the first entry
   10. Section titles (ink-fill)
   11. Reveal utilities
   12. Sections (positioning, value props, work, packages, process,
       why, care, testimonial, CTA, footer)
   13. Forms
   14. Mobile sticky CTA
   15. Reduced motion & responsive
   ========================================================================== */

/* -----------------------------------------------------------------------------
   0. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* ---------------------------------------------------------------------
     THE TWO STOCKS — defined exactly once each, referenced everywhere.
     Nothing below may hardcode a brand hex. If you need ink on paper in a
     local scope, re-point the semantic token; never restate the palette.
     ------------------------------------------------------------------ */
  --stock-light-paper:      #F4F1EA;
  --stock-light-paper-deep: #EAE5D9;   /* a real tonal step, not a whisper */
  --stock-light-surface:    #FBFAF6;
  --stock-light-ink:        #16150F;
  --stock-light-muted:      #63605A;   /* AA on paper / surface / footer */
  --stock-light-hairline:   #E3DFD4;
  --stock-light-blue:       #1F3A5F;
  --stock-light-vermilion:  #D6451F;
  --stock-light-vermilion-text: #B0381A; /* AA-passing red for small text */

  --stock-dark-paper:      #16150F;
  --stock-dark-paper-deep: #1C1B14;
  --stock-dark-surface:    #211F17;
  --stock-dark-ink:        #F4F1EA;
  --stock-dark-muted:      #9B978B;
  --stock-dark-hairline:   #322F26;
  --stock-dark-blue:       #6E9BD1;
  --stock-dark-vermilion:  #E0552F;
  /* #E0552F measured 4.41:1 on --stock-dark-surface — just under AA.
     #F0764E measures 5.87:1 on surface and 6.47:1 on paper. */
  --stock-dark-vermilion-text: #F0764E;
}

/* Semantic palette — light is the default reading of the volume */
:root {
  --paper:      var(--stock-light-paper);
  --paper-deep: var(--stock-light-paper-deep);
  --surface:    var(--stock-light-surface);
  --ink:        var(--stock-light-ink);
  --muted:      var(--stock-light-muted);
  --hairline:   var(--stock-light-hairline);
  --ink-blue:   var(--stock-light-blue);
  --vermilion:  var(--stock-light-vermilion);
  --vermilion-text: var(--stock-light-vermilion-text);
  --focus-ring: var(--ink-blue);

  /* ---------------------------------------------------------------------
     TYPE — a real ladder. Every rung is used; nothing invents its own clamp.
     The old scale had --fs-hero/display/h2 used once each while 47 raw font
     sizes filled a 2.4x hole between h3 and h2. This closes it.
     ------------------------------------------------------------------ */
  --font-display: "Fraunces", "Playfair Display", Georgia, serif;
  --font-body:    "Inter", "Helvetica Neue", Arial, sans-serif;

  --fs-mega:    clamp(4rem,    16vw,  17rem);  /* one-word chapter marks */
  --fs-hero:    clamp(3.2rem,  10.5vw, 11rem); /* the cold open */
  --fs-display: clamp(2.6rem,  7vw,    7rem);  /* full-viewport statements */
  --fs-h2:      clamp(2.1rem,  4.6vw,  4.4rem);
  --fs-h3:      clamp(1.5rem,  2.4vw,  2.3rem); /* was 1.9rem — fills the hole */
  --fs-h4:      clamp(1.15rem, 1.4vw,  1.45rem);/* NEW rung, was missing entirely */
  --fs-lead:    clamp(1.22rem, 1.7vw,  1.6rem); /* pulled clear of body */
  --fs-body:    clamp(1.0625rem, 0.35vw + 0.96rem, 1.1875rem);
  --fs-small:   0.9375rem;
  --fs-label:   0.6875rem;

  /* Tracking — was 88 declarations across 24 ad-hoc values */
  --track-mega:    -0.04em;
  --track-display: -0.028em;
  --track-title:   -0.015em;
  --track-body:    0;
  --track-label:    0.14em;
  --track-label-wide: 0.2em;

  /* Fraunces variable axes. Requested in the font URL; ignored if absent. */
  --wonk-on:  "WONK" 1, "SOFT" 8;
  --wonk-off: "WONK" 0, "SOFT" 0;

  /* Spacing (8px base) */
  --s-0: 4px;
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 40px;
  --s-5: 64px; --s-6: 120px; --s-7: 160px; --s-8: 240px;

  /* Vertical rhythm — a section's breath is a design decision, not a constant.
     Every .entry on the site used to be exactly 120px, forever. */
  --rhythm-tight: clamp(44px, 6vw,  80px);
  --rhythm-base:  clamp(72px, 9vw,  132px);
  --rhythm-loose: clamp(112px, 15vw, 216px);
  --rhythm-vast:  clamp(15vh, 18vh, 24vh);

  /* Radius */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 8px;

  /* Elevation */
  --ruled:  inset 0 -1px 0 var(--hairline);
  --lift-1: 0 1px 0 var(--hairline);
  --lift-2: 0 14px 30px -18px rgba(22, 21, 15, .22);

  /* Motion */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-ink:   cubic-bezier(0.16, 1, 0.3, 1);   /* the house curve */
  --dur-fast: 180ms;
  --dur-base: 420ms;
  --dur-slow: 700ms;

  /* Layout */
  --container: 1300px;
  --container-wide: 1660px;
  --measure: 64ch;
  --measure-tight: 46ch;
  --margin-w: 84px;   /* ledger margin column */
  --gutter: 40px;     /* outer page gutter */
}

/* Dark theme — swap the stock, nothing else */
[data-theme="dark"] {
  --paper:      var(--stock-dark-paper);
  --paper-deep: var(--stock-dark-paper-deep);
  --surface:    var(--stock-dark-surface);
  --ink:        var(--stock-dark-ink);
  --muted:      var(--stock-dark-muted);
  --hairline:   var(--stock-dark-hairline);
  --ink-blue:   var(--stock-dark-blue);
  --vermilion:  var(--stock-dark-vermilion);
  --vermilion-text: var(--stock-dark-vermilion-text);
}

/* ---------------------------------------------------------------------------
   PAPER STOCK — a section can carry its own stock, locally.

   [data-stock="invert"] always reverses whatever the reader is currently on,
   so a chapter break reads as a reversal in BOTH themes. This is the primitive
   the hero and the tradies hero used to hand-roll by restating the whole dark
   palette inline — four copy-pasted duplicates, now one rule each.
   -------------------------------------------------------------------------- */
html:not([data-theme="dark"]) [data-stock="invert"],
html:not([data-theme="dark"]) .hero--ink {
  --paper:      var(--stock-dark-paper);
  --paper-deep: var(--stock-dark-paper-deep);
  --surface:    var(--stock-dark-surface);
  --ink:        var(--stock-dark-ink);
  --muted:      var(--stock-dark-muted);
  --hairline:   var(--stock-dark-hairline);
  --ink-blue:   var(--stock-dark-blue);
  --vermilion:  var(--stock-dark-vermilion);
  --vermilion-text: var(--stock-dark-vermilion-text);
}
html[data-theme="dark"] [data-stock="invert"] {
  --paper:      var(--stock-light-paper);
  --paper-deep: var(--stock-light-paper-deep);
  --surface:    var(--stock-light-surface);
  --ink:        var(--stock-light-ink);
  --muted:      var(--stock-light-muted);
  --hairline:   var(--stock-light-hairline);
  --ink-blue:   var(--stock-light-blue);
  --vermilion:  var(--stock-light-vermilion);
  --vermilion-text: var(--stock-light-vermilion-text);
}

[data-stock] { background: var(--paper); color: var(--ink); }
[data-stock="deep"]    { background: var(--paper-deep); }
[data-stock="surface"] { background: var(--surface); }

/* -----------------------------------------------------------------------------
   1. RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
  transition: background var(--dur-base) var(--ease-inout),
              color var(--dur-base) var(--ease-inout);
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 380;
  line-height: 1.02;
  letter-spacing: -0.015em;
  font-optical-sizing: auto;
}

p { text-wrap: pretty; }

a { color: inherit; text-decoration: none; }

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

::selection { background: var(--vermilion); color: var(--paper); }

/* -----------------------------------------------------------------------------
   2. ACCESSIBILITY
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: var(--s-2) var(--s-3);
  background: var(--ink);
  color: var(--paper);
  font-size: var(--fs-small);
}
.skip-link:focus { left: var(--s-2); top: var(--s-2); }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-1);
}
/* On the inverted (dark) sign-off band, ink-blue ring is invisible — use paper */
.signoff :focus-visible { outline-color: var(--paper); }

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

/* -----------------------------------------------------------------------------
   3. TEXTURE (grain)
   -------------------------------------------------------------------------- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .05;
  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.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="dark"] body::after { mix-blend-mode: screen; opacity: .035; }

/* -----------------------------------------------------------------------------
   4. LAYOUT (shell, ledger margin, entries)
   -------------------------------------------------------------------------- */
.shell {
  width: min(100% - calc(var(--gutter) * 2), var(--container));
  margin-inline: auto;
}

/* ---------------------------------------------------------------------------
   THE VOLUME — the page-level editorial grid.

   Three tracks the content can occupy: the reading column (--container), a
   wide plate (--container-wide) and the full viewport. Named grid lines mean
   a section can go full-bleed WITHOUT 100vw, so there is never a scrollbar
   overflow and never a horizontal shudder.

   Before this existed, exactly 0 of 123 sections on the site could leave the
   1300px column. That is the single reason every page read the same.
   -------------------------------------------------------------------------- */
.volume {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [wide-start]  minmax(0, calc((var(--container-wide) - var(--container)) / 2))
    [content-start] min(100% - var(--gutter) * 2, var(--container)) [content-end]
                  minmax(0, calc((var(--container-wide) - var(--container)) / 2))
    [wide-end]    minmax(var(--gutter), 1fr)
    [full-end];
}
.volume > *          { grid-column: content; }
.volume > .is-wide   { grid-column: wide; }
.volume > .is-full   { grid-column: full; }

/* Escape hatch for content nested deeper than a direct child of .volume.
   Uses viewport units, so it relies on body{overflow-x:hidden}. Prefer
   .is-full on a direct child wherever the markup allows it. */
.bleed {
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* ---------------------------------------------------------------------------
   MOVEMENTS — a section knows how it wants to be read.

   Vertical rhythm is now a function of the spread, not a constant. Every
   .entry on the site used to be padded to exactly 120px top and bottom,
   ~150 sections of it, which is why the pages had no pace.
   -------------------------------------------------------------------------- */
.movement { position: relative; padding-block: var(--rhythm-base); }

/* A whole viewport, one idea, mostly air. */
[data-spread="statement"] {
  padding-block: var(--rhythm-vast);
  min-height: 78svh;
  display: grid;
  align-content: center;
}

/* Sticky title on the left, content scrolling past it on the right. */
[data-spread="split"] { padding-block: var(--rhythm-loose); }
[data-spread="split"] > .movement__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(var(--s-4), 6vw, var(--s-7));
  align-items: start;
}
[data-spread="split"] .movement__title {
  position: sticky;
  top: clamp(96px, 18vh, 200px);
}

/* Narrow measure with a true marginalia column beside it. */
[data-spread="margin"] > .movement__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.42fr);
  gap: clamp(var(--s-4), 5vw, var(--s-6));
  align-items: start;
}

/* Edge to edge. Content leaves the column entirely. */
[data-spread="bleed"] { padding-block: var(--rhythm-loose); }

/* A chapter break — reversed stock, full viewport, high contrast. */
[data-spread="interlude"] {
  padding-block: var(--rhythm-loose);
  min-height: 88svh;
  display: grid;
  align-content: center;
}

/* The ledger proper: dense, ruled, for reference material. */
[data-spread="tabular"] { padding-block: var(--rhythm-tight); }

@media (max-width: 900px) {
  [data-spread="split"] > .movement__inner,
  [data-spread="margin"] > .movement__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-4);
  }
  [data-spread="split"] .movement__title { position: static; }
  [data-spread="statement"] { min-height: 0; }
  [data-spread="interlude"] { min-height: 0; }
}

/* The ledger — main column with the running left rule + margin */
.ledger {
  position: relative;
  padding-left: var(--margin-w);
  border-left: 1px solid var(--hairline);
}

/* A single numbered entry (a section in the record) */
.entry {
  position: relative;
  padding-block: var(--rhythm-base);
  box-shadow: var(--ruled);
}
.entry:last-child { box-shadow: none; }

/* An entry can borrow a movement's breath without becoming one. */
.entry[data-rhythm="tight"] { padding-block: var(--rhythm-tight); }
.entry[data-rhythm="loose"] { padding-block: var(--rhythm-loose); }

/* Line number hanging in the margin */
.entry__num {
  position: absolute;
  left: calc(var(--margin-w) * -1 + 14px);
  top: calc(var(--s-6) + 6px);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.entry__num::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  width: 8px;
  height: 1px;
  background: var(--ink-blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.entry.is-visible .entry__num::before { transform: scaleX(1); }

/* Ledger stamp — entry numbers thud in like a rubber stamp, with a one-shot
   ink-ring impact. Keyed off the existing .is-visible reveal class. */
html.js .entry .entry__num {
  opacity: 0;
  transform: scale(1.6) rotate(-5deg);
  filter: blur(3px);
}
html.js .entry:nth-child(even) .entry__num {
  transform: scale(1.6) rotate(4deg);
}
html.js .entry.is-visible .entry__num {
  opacity: 1;
  transform: scale(1) rotate(0deg);
  filter: blur(0);
  transition:
    transform .55s cubic-bezier(.2, 1.6, .35, 1),
    opacity .3s ease-out,
    filter .3s ease-out;
}
html.js .entry.is-visible .entry__num::after {
  content: "";
  position: absolute;
  inset: -14px;
  border: 1.5px solid var(--vermilion);
  border-radius: 50%;
  opacity: 0;
  animation: stamp-ring .7s cubic-bezier(.22, 1, .36, 1) .12s;
}
@keyframes stamp-ring {
  0%   { opacity: .55; transform: scale(.4); }
  100% { opacity: 0;   transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  html.js .entry .entry__num { opacity: 1; transform: none; filter: none; transition: none; }
  html.js .entry.is-visible .entry__num::after { animation: none; }
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s-3);
}
.eyebrow--accent { color: var(--ink-blue); }

.lead {
  font-size: var(--fs-lead);
  color: var(--ink);
  max-width: 56ch;
  line-height: 1.55;
}
.muted { color: var(--muted); }
.measure { max-width: 64ch; }

/* Margin pull-note that hangs into the rule */
.pull-note {
  position: relative;
  margin-top: var(--s-4);
  padding-left: var(--s-3);
  font-size: var(--fs-small);
  color: var(--muted);
  font-style: italic;
  font-family: var(--font-display);
  border-left: 2px solid var(--vermilion);
}

/* -----------------------------------------------------------------------------
   5. TYPOGRAPHY UTILITIES
   -------------------------------------------------------------------------- */
.italic { font-style: italic; }
.serif { font-family: var(--font-display); }
.num { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------
   DISPLAY TYPE — the rungs, applied.

   Optical rule: the larger the setting, the tighter it tracks and the shorter
   its leading. Fraunces' WONK axis (the swashy leg on g/y/f) is switched ON
   only at display sizes, where it reads as character rather than noise —
   it is unreadable-as-quirk at body size. Both axes are requested in the font
   URL; if the variable face fails to load these declarations are simply inert.
   -------------------------------------------------------------------------- */
.t-mega, .t-hero, .t-display, .statement {
  font-family: var(--font-display);
  font-weight: 360;
  text-wrap: balance;
}
.t-mega {
  font-size: var(--fs-mega);
  line-height: 0.82;
  letter-spacing: var(--track-mega);
  font-variation-settings: var(--wonk-on);
}
.t-hero {
  font-size: var(--fs-hero);
  line-height: 0.9;
  letter-spacing: var(--track-display);
  font-variation-settings: var(--wonk-on);
}
.t-display {
  font-size: var(--fs-display);
  line-height: 0.96;
  letter-spacing: var(--track-display);
  font-variation-settings: var(--wonk-on);
}

/* A statement owns its viewport. Nothing else competes with it. */
.statement {
  font-size: var(--fs-display);
  line-height: 1.0;
  letter-spacing: var(--track-display);
  max-width: 17ch;
  font-variation-settings: var(--wonk-on);
}
.statement em { font-style: italic; color: var(--ink-blue); }
.statement--wide { max-width: 24ch; }

/* Labels, stamps and codes — one treatment, not the 34 hand-rolled copies
   this site accumulated across 24 different letter-spacing values. */
.label {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.label--accent { color: var(--ink-blue); }
.label--wide { letter-spacing: var(--track-label-wide); }

.measure-tight { max-width: var(--measure-tight); }

.text-link {
  position: relative;
  color: var(--ink-blue);
  font-weight: 500;
  white-space: nowrap;
}
.text-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-base) var(--ease-out);
}
.text-link:hover::after,
.text-link:focus-visible::after { transform: scaleX(1); transform-origin: left; }

/* -----------------------------------------------------------------------------
   6. CUSTOM CURSOR (the nib)
   -------------------------------------------------------------------------- */
.cursor, .cursor-ring {
  position: fixed;
  top: 0; left: 0;
  z-index: 9999;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
  mix-blend-mode: normal;
}
.cursor {
  width: 8px; height: 8px;
  background: var(--ink-blue);
  transform: translate(-50%, -50%);
}
.cursor-ring {
  width: 38px; height: 38px;
  border: 1px solid var(--ink-blue);
  transform: translate(-50%, -50%);
  will-change: transform;
  transition: opacity var(--dur-base) var(--ease-out),
              width var(--dur-fast) var(--ease-out),
              height var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.cursor-ready .cursor,
.cursor-ready .cursor-ring { opacity: 1; }

/* Ring states */
.cursor-ring.is-link  { width: 54px; height: 54px; background: color-mix(in srgb, var(--ink-blue) 8%, transparent); }
.cursor-ring.is-plus  { width: 60px; height: 60px; border-color: var(--vermilion); }
.cursor-ring.is-plus::after {
  content: "+";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--vermilion);
  font-family: var(--font-body);
  font-size: 18px;
}
.cursor-ring.is-sign::after {
  content: "sign";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--ink-blue);
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.cursor-ring.is-sign { width: 64px; height: 64px; }

/* Native cursor hidden only when nib active */
.cursor-ready { cursor: none; }
.cursor-ready a, .cursor-ready button, .cursor-ready input,
.cursor-ready textarea, .cursor-ready select { cursor: none; }

/* -----------------------------------------------------------------------------
   7. BUTTONS & LINKS
   -------------------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 16px 28px;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid var(--ink);
  border-radius: var(--radius-1);
  color: var(--ink);
  background: transparent;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
/* Ink wipe from the left, like a stamp */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.btn:hover, .btn:focus-visible { color: var(--paper); }
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); }

.btn .btn__arrow { transition: transform var(--dur-base) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--primary {
  border-color: var(--ink-blue);
  color: var(--paper);
}
.btn--primary::before { transform: scaleX(1); background: var(--ink-blue); }
.btn--primary:hover::before, .btn--primary:focus-visible::before {
  background: var(--ink);
}

.btn--accent {
  border-color: var(--vermilion);
  color: var(--paper);
}
.btn--accent::before { transform: scaleX(1); background: var(--vermilion); }
.btn--accent:hover::before, .btn--accent:focus-visible::before {
  background: color-mix(in srgb, var(--vermilion) 82%, #000);
}

.btn--ghost { border-color: var(--hairline); }
.btn--ghost::before { background: var(--ink); }

.btn--lg { padding: 20px 36px; font-size: 1rem; }

.actions { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }

/* -----------------------------------------------------------------------------
   8. NAVIGATION
   -------------------------------------------------------------------------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: background var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              padding var(--dur-base) var(--ease-out);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding-block: var(--s-3);
}
.nav.is-condensed {
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--ruled);
}
.nav.is-condensed .nav__inner { padding-block: var(--s-2); }

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: -0.02em;
}
.brand b { font-weight: 460; }
.brand .brand__mark {
  color: var(--ink-blue);
  font-style: italic;
}
.brand__entry {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  color: var(--muted);
  align-self: flex-start;
  margin-left: 4px;
}

.nav__links {
  display: flex;
  gap: var(--s-4);
  font-size: var(--fs-small);
}
.nav__links a {
  position: relative;
  color: var(--ink);
  opacity: .85;
  transition: opacity var(--dur-fast) var(--ease-out);
}
/* ::after underline replaced by JS glider — keep only for no-JS */
html:not(.js) .nav__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%; height: 1px;
  background: var(--ink-blue);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-base) var(--ease-out);
}
html:not(.js) .nav__links a:hover::after,
html:not(.js) .nav__links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav__links a:hover { opacity: 1; }
.nav__links a[aria-current="page"] { opacity: 1; }

.nav__right { display: flex; align-items: center; gap: var(--s-3); }

/* Live tally */
.tally {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.tally__num {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 460;
  letter-spacing: 0;
  color: var(--ink-blue);
  font-variant-numeric: tabular-nums;
}
.tally.is-pulse .tally__num { animation: tallyPulse var(--dur-base) var(--ease-out); }
@keyframes tallyPulse {
  0% { color: var(--vermilion); transform: translateY(-2px); }
  100% { color: var(--ink-blue); transform: translateY(0); }
}

/* Theme toggle */
.theme-toggle {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.theme-toggle:hover { border-color: var(--ink-blue); transform: rotate(-12deg); }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* Mobile menu button */
/* 44x44 hit area — this and the theme toggle are the two controls every mobile
   visitor must hit, and both were under the minimum target size. The bars stay
   28px wide; only the touchable box grows. */
.nav__burger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0 8px;
}
.nav__burger span {
  display: block; height: 1.5px; width: 100%;
  background: var(--ink);
  transition: transform var(--dur-base) var(--ease-out),
              opacity var(--dur-base) var(--ease-out);
}
.nav.is-open .nav__burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* -----------------------------------------------------------------------------
   9. HERO — THE FIRST ENTRY
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: 120px;
  padding-bottom: var(--s-6);
  overflow: hidden;
}
.hero__canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero__inner { position: relative; z-index: 2; } /* width comes from .shell */

/* Cold open — in light mode the home hero carries the ink-dark palette locally
   (custom properties inherit, so every token-driven style inside flips), and
   the page "breathes" back to warm paper the moment you scroll into the ledger.
   In site dark mode this is a near no-op by design. */
/* The palette itself now comes from the [data-stock="invert"] rule in §0 —
   .hero--ink is listed there as a selector. This block only adds the paint.
   (These nine declarations used to be written out longhand here, and again on
   .nav below, and again on .tradie-hero — four copies of the dark palette with
   no shared source of truth.) */
html:not([data-theme="dark"]) .hero--ink {
  background: var(--paper);
  color: var(--ink);
}

/* While the fixed nav overlaps the ink hero, it borrows the same dark palette */
html.nav-on-ink .nav {
  --paper:      var(--stock-dark-paper);
  --paper-deep: var(--stock-dark-paper-deep);
  --surface:    var(--stock-dark-surface);
  --ink:        var(--stock-dark-ink);
  --muted:      var(--stock-dark-muted);
  --hairline:   var(--stock-dark-hairline);
  --ink-blue:   var(--stock-dark-blue);
  --vermilion:  var(--stock-dark-vermilion);
  --vermilion-text: var(--stock-dark-vermilion-text);
  color: var(--ink);
}
.nav__links a, .brand, .theme-toggle, .tally, .brand__entry {
  transition: color .45s var(--ease-out);
}
.nav__burger span { transition: transform var(--dur-base) var(--ease-out),
                                opacity var(--dur-base) var(--ease-out),
                                background .45s var(--ease-out); }

.hero__title {
  font-size: var(--fs-hero);
  line-height: 0.95;
  letter-spacing: -0.025em;
  max-width: 16ch;
}
.hero__title .word-proof {
  position: relative;
  display: inline-block;
  font-style: italic;
  color: var(--ink-blue);
}
/* Ink reveal of the word on load */
.hero__title .word-proof .ink {
  display: inline-block;
  clip-path: inset(0 0 0 0);
}
html.pc-anim .hero:not(.is-signed) .word-proof .ink { clip-path: inset(0 100% 0 0); }
.hero.is-signed .word-proof .ink {
  clip-path: inset(0 0 0 0);
  transition: clip-path var(--dur-slow) var(--ease-inout);
}
/* Hand-drawn underline that "signs" Proof */
.hero__title .sign-underline {
  position: absolute;
  left: -2%;
  bottom: -0.12em;
  width: 104%;
  height: 0.22em;
  overflow: visible;
}
.hero__title .sign-underline path {
  fill: none;
  stroke: var(--vermilion);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 480;
  stroke-dashoffset: 0;
}
html.pc-anim .hero:not(.is-signed) .sign-underline path { stroke-dashoffset: 480; }

/* First visit: the headline condenses out of the ink, letter by letter.
   Only applies when vf-chars exist (fine pointer, motion OK); the word
   "Proof" keeps its own clip-wipe + signature, so it's excluded here. */
html.pc-anim .hero:not(.is-signed) .hero__title .vf-char:not(.word-proof .vf-char) {
  opacity: 0;
  filter: blur(10px);
}
html.pc-anim .hero.is-signed .hero__title .vf-char:not(.word-proof .vf-char) {
  opacity: 1;
  filter: blur(0);
  transition:
    opacity .7s ease-out calc(var(--ci, 0) * 26ms + .15s),
    filter .9s ease-out calc(var(--ci, 0) * 26ms + .15s);
}
.hero.is-signed .sign-underline path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--dur-slow) var(--ease-out) 480ms;
}

.hero__sub {
  margin-top: var(--s-4);
  font-size: var(--fs-lead);
  max-width: 44ch;
  color: var(--ink);
}
.hero__actions { margin-top: var(--s-5); }

.hero__scroll {
  position: absolute;
  bottom: var(--s-4);
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  z-index: 2;
}
.hero__scroll .line {
  display: inline-block;
  width: 48px; height: 1px;
  background: var(--muted);
  position: relative;
  overflow: hidden;
}
.hero__scroll .line::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--ink-blue);
  transform: translateX(-100%);
  animation: scrollHint 2.4s var(--ease-inout) infinite;
}
@keyframes scrollHint {
  0% { transform: translateX(-100%); }
  60%, 100% { transform: translateX(100%); }
}

/* -----------------------------------------------------------------------------
   10. SECTION TITLES (ink-fill)
   -------------------------------------------------------------------------- */
.ink-title {
  position: relative;
  display: inline-block;
  font-size: var(--fs-h2);
  margin-bottom: var(--s-5);
}
.ink-title__outline,
.ink-title__fill {
  display: block;
  grid-area: 1 / 1;
}
.ink-title { display: grid; }
.ink-title__outline {
  color: transparent;
  -webkit-text-stroke: 1px var(--muted);
  opacity: .55;
}
.ink-title__fill {
  color: var(--ink);
  clip-path: inset(0 0 0 0);
}
html.js .ink-title:not(.is-visible) .ink-title__fill { clip-path: inset(0 100% 0 0); }
.ink-title.is-visible .ink-title__fill {
  clip-path: inset(0 0 0 0);
  transition: clip-path var(--dur-slow) var(--ease-inout);
}

/* -----------------------------------------------------------------------------
   11. REVEAL UTILITIES
   -------------------------------------------------------------------------- */
html.js .reveal { opacity: 0; transform: translateY(16px); }
html.js .reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
/* stagger children */
html.js .reveal-stagger > * { opacity: 0; transform: translateY(16px); }
html.js .reveal-stagger.is-visible > * {
  opacity: 1; transform: none;
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
html.js .reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 80ms; }
html.js .reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 160ms; }
html.js .reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 240ms; }
html.js .reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 320ms; }
html.js .reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 400ms; }

/* -----------------------------------------------------------------------------
   12. SECTIONS
   -------------------------------------------------------------------------- */

/* 12.1 Positioning line */
/* Sizing now comes from .statement in §5 — this kept its own clamp and, being
   later in the file at equal specificity, silently overrode the type scale. */
.positioning__statement { font-family: var(--font-display); }
.positioning__statement em { color: var(--ink-blue); }

/* 12.2 Value props — ruled rows */
.props { margin-top: var(--s-3); }
.prop {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
  align-items: baseline;
  padding-block: var(--s-4);
  box-shadow: var(--ruled);
}
.prop:first-child { box-shadow: var(--ruled), inset 0 1px 0 var(--hairline); }
.prop__claim {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.1;
}
.prop__claim .lex { color: var(--ink-blue); font-style: italic; }
.prop__detail { color: var(--muted); font-size: var(--fs-small); max-width: 42ch; }

/* Hand-sketched pen circle around .lex words — draws itself on reveal */
.lex { position: relative; white-space: nowrap; }
.lex-circle {
  position: absolute;
  inset: -0.28em -0.35em;
  width: calc(100% + 0.7em);
  height: calc(100% + 0.56em);
  overflow: visible;
  pointer-events: none;
}
.lex-circle path {
  fill: none;
  stroke: var(--vermilion);
  stroke-width: 2.2;
  stroke-linecap: round;
  opacity: .8;
  stroke-dasharray: 340;
  stroke-dashoffset: 340;
}
.prop.is-visible .lex-circle path {
  transition: stroke-dashoffset .9s cubic-bezier(.6, 0, .3, 1) .35s;
  stroke-dashoffset: 0;
}
@media (prefers-reduced-motion: reduce) {
  .lex-circle path { stroke-dashoffset: 0; transition: none; }
}

/* 12.3 Work — the ledger of work */
.work__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3);
  margin-top: var(--s-3);
}
.plate {
  position: relative;
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-1);
  min-height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  transition: box-shadow var(--dur-base) var(--ease-out);
  transform-style: preserve-3d;
}
.plate:hover { box-shadow: var(--lift-2); }
.plate > :not(.plate__atmosphere):not(.plate__gradual-blur) {
  position: relative;
  z-index: 4;
}
.plate__atmosphere,
.plate__gradual-blur {
  position: absolute;
  pointer-events: none;
}
.plate__atmosphere {
  inset: -1px;
  z-index: 0;
  opacity: 0.86;
  background:
    radial-gradient(70% 58% at 84% 18%, color-mix(in srgb, var(--ink-blue) 26%, transparent), transparent 58%),
    radial-gradient(58% 52% at 20% 92%, color-mix(in srgb, var(--vermilion) 18%, transparent), transparent 62%),
    linear-gradient(135deg, color-mix(in srgb, var(--paper) 74%, transparent), color-mix(in srgb, var(--surface) 88%, transparent));
  transform: scale(1.02);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.plate--reserved .plate__atmosphere {
  opacity: 0.62;
  filter: saturate(0.82);
}
.plate:hover .plate__atmosphere {
  opacity: 1;
  transform: scale(1.08) rotate(0.35deg);
}
/* A single soft fade to seat the caption against the plate.
   This was a five-layer progressive backdrop-filter stack — 20 composited,
   continuously-repainted blur layers on the homepage alone — to achieve a
   gradient that one gradient achieves. The spans are left inert rather than
   ripped out of 20 HTML files; they cost nothing now. */
.plate__gradual-blur {
  left: 0;
  right: 0;
  bottom: 0;
  height: 62%;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    color-mix(in srgb, var(--surface) 22%, transparent) 46%,
    color-mix(in srgb, var(--surface) 74%, transparent) 78%,
    color-mix(in srgb, var(--surface) 92%, transparent) 100%
  );
}
.plate__gradual-blur span { display: none; }
.plate::after { z-index: 5; pointer-events: none; }
.plate--live { border-color: var(--ink-blue); }
/* Halftone print texture, revealed on hover */
.plate::before {
  content: "";
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  background-image: radial-gradient(var(--ink-blue) 0.8px, transparent 1.3px);
  background-size: 7px 7px;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
  mix-blend-mode: multiply;
}
.plate:hover::before { opacity: 0.12; }
[data-theme="dark"] .plate::before { mix-blend-mode: screen; }
/* dog-ear */
.plate::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 22px 22px 0;
  border-color: transparent var(--paper) transparent transparent;
  transition: border-width var(--dur-base) var(--ease-out);
}
.plate:hover::after { border-width: 0 30px 30px 0; }
.plate__code {
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  transform: translateZ(20px);
}
.plate--live .plate__code { color: var(--ink-blue); }
.plate__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  margin-top: var(--s-2);
  transform: translateZ(50px);
}
.plate__meta {
  margin-top: var(--s-3);
  font-size: var(--fs-small);
  color: var(--muted);
  transform: translateZ(30px);
}
.plate__meta dt { display: inline; font-weight: 600; color: var(--ink); }
.plate__meta dd { display: inline; margin-left: 4px; }
.plate__meta div { margin-bottom: 4px; }
.plate--reserved {
  border-style: dashed;
  background: transparent;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
}
.plate--reserved .plate__title { color: var(--muted); }

/* The empty ledger, made beautiful — a caret blinks at the open entry code,
   and a dotted writing line draws under the title on hover. */
.plate--reserved .plate__code::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 6px;
  vertical-align: text-bottom;
  background: var(--vermilion);
  animation: caret-blink 1.1s steps(1) infinite;
}
@keyframes caret-blink {
  0%, 55%   { opacity: 1; }
  56%, 100% { opacity: .12; }
}
.plate--reserved .plate__title {
  background: repeating-linear-gradient(90deg, var(--muted) 0 6px, transparent 6px 12px) no-repeat left 100% / 0% 1px;
  transition: background-size .8s cubic-bezier(.22, 1, .36, 1);
  padding-bottom: 6px;
}
.plate--reserved:hover .plate__title { background-size: 100% 1px; }
.plate--reserved .plate__invitation { transition: color .3s ease, transform .3s ease; }
.plate--reserved:hover .plate__invitation { color: var(--vermilion); transform: translateZ(40px) translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .plate--reserved .plate__code::after { animation: none; opacity: .5; }
  .plate--reserved .plate__title { transition: none; }
}
.plate__score {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  transform: translateZ(35px);
}
.plate__score b {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--ink-blue);
  font-weight: 460;
}

/* 12.4 Packages — price ledger */
.packages { margin-top: var(--s-3); }
.pkg {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1.4fr 1fr auto;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-4) var(--s-3);
  box-shadow: var(--ruled);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}
.pkg::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  height: 2px; width: 100%;
  background: var(--ink-blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.pkg:hover {
  background: var(--surface);
  transform: translateY(-2px);
  box-shadow: var(--lift-2);
}
.pkg:hover::before { transform: scaleX(1); }
.pkg--featured { background: var(--surface); }
.pkg__code {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--muted);
}
.pkg:hover .pkg__code { color: var(--ink-blue); }
.pkg__name { font-family: var(--font-display); font-size: var(--fs-h3); }
.pkg__group {
  display: block;
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.pkg__fit { font-size: var(--fs-small); color: var(--muted); max-width: 38ch; }
.pkg__spec { display: block; margin-top: 6px; font-size: var(--fs-small); color: var(--ink); opacity: .8; }
.pkg__price {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--muted);
  white-space: nowrap;
}
.pkg__price b {
  display: block;
  font-size: 1.9rem;
  color: var(--ink);
  font-weight: 460;
  font-variant-numeric: tabular-nums;
}
.pkg:hover .pkg__price b { color: var(--ink-blue); }
.pkg__cta { justify-self: end; white-space: nowrap; }

/* Most popular stamp */
.stamp {
  position: absolute;
  top: -12px; right: 16px;
  z-index: 3;
  padding: 5px 12px;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vermilion-text);
  border: 1.5px solid var(--vermilion);
  border-radius: var(--radius-1);
  background: var(--paper);
  transform: rotate(-5deg);
}

/* 12.5 Process — six entries */
.process {
  margin-top: var(--s-3);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.proof-trail {
  position: absolute;
  inset: -18px 0 -28px 0;
  z-index: 0;
  width: min(100%, 820px);
  height: calc(100% + 46px);
  pointer-events: none;
  overflow: visible;
}
.proof-trail path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.proof-trail__glow {
  stroke: color-mix(in srgb, var(--ink-blue) 42%, transparent);
  stroke-width: 22;
  opacity: 0.16;
  filter: blur(4px);
}
.proof-trail__path {
  stroke: var(--vermilion);
  stroke-width: 5.5;
  opacity: 0.78;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--vermilion) 28%, transparent));
}
.process__rule {
  position: absolute;
  left: 11px; top: 12px; bottom: 12px;
  width: 2px;
  background: var(--hairline);
  z-index: 1;
}
.process__rule span {
  position: absolute;
  inset: 0;
  background: var(--ink-blue);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.2s var(--ease-out);
}
.process.is-visible .process__rule span { transform: scaleY(1); }
.step {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--s-4);
  padding-block: var(--s-4);
  align-items: baseline;
}
.step__no {
  position: relative;
  z-index: 1;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--hairline);
  font-size: var(--fs-label);
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  transition: border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.step.is-visible .step__no { border-color: var(--ink-blue); color: var(--ink-blue); }
.step__title { font-family: var(--font-display); font-size: var(--fs-h3); }
.step__desc { color: var(--muted); font-size: var(--fs-small); margin-top: 4px; max-width: 52ch; }

/* 12.6 Why — audited comparison */
.compare {
  margin-top: var(--s-3);
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
}
.compare th, .compare td {
  text-align: left;
  padding: var(--s-3) var(--s-3);
  box-shadow: var(--ruled);
  vertical-align: top;
}
.compare thead th {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 380;
  color: var(--muted);
}
.compare thead th.col-pc { color: var(--ink); }
.compare .col-pc { background: var(--surface); }
.compare tbody th {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--ink);
  width: 28%;
}
.compare td .tick { color: var(--vermilion); font-weight: 700; margin-right: 6px; }
.compare td .cross { color: var(--muted); margin-right: 6px; }
.compare .col-pc td, .compare td.col-pc { color: var(--ink); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* 12.7 Care plans */
.care { margin-top: var(--s-3); }
.plan {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-3) var(--s-2);
  box-shadow: var(--ruled);
  transition: background var(--dur-base) var(--ease-out);
}
.plan:hover { background: var(--surface); }
.plan__name { font-family: var(--font-display); font-size: var(--fs-h3); }
.plan__name .rec {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-blue);
  margin-left: var(--s-2);
}
.plan__what { color: var(--muted); font-size: var(--fs-small); max-width: 46ch; }
.plan__price { font-family: var(--font-display); font-size: 1.5rem; white-space: nowrap; }
.plan__price span { font-family: var(--font-body); font-size: var(--fs-small); color: var(--muted); }

/* 12.8 Testimonial placeholder */
.quote {
  text-align: center;
  max-width: 22ch;
  margin: 0 auto;
}
.quote blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.8rem, 4.5vw, 3.4rem);
  line-height: 1.12;
  color: var(--muted);
}
.quote .mark { color: var(--ink-blue); }
.quote figcaption {
  margin-top: var(--s-4);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* 12.9 Final CTA — inverted ledger */
.signoff {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  margin-top: var(--s-6);
  overflow: hidden;
}
.signoff .shell { padding-block: var(--s-7); position: relative; z-index: 1; }
/* Flow field canvas — masked so particles only appear on the right, text zone stays clear */
.signoff__flow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 30%, black 62%);
  mask-image: linear-gradient(to right, transparent 30%, black 62%);
}
/* Cursor spotlight (injected + driven by JS) */
.signoff__spot {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity var(--dur-base) var(--ease-out);
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%),
              color-mix(in srgb, var(--vermilion) 24%, transparent), transparent 62%);
}
.signoff.is-lit .signoff__spot { opacity: 1; }
.signoff__title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7vw, 6rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  max-width: 14ch;
}
.signoff__title em { color: var(--paper); font-style: italic; position: relative; }
.signoff__title em::after {
  content: "";
  position: absolute; left: 0; bottom: 0.04em;
  width: 100%; height: 3px;
  background: var(--vermilion);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
}
.signoff.is-visible .signoff__title em::after { transform: scaleX(1); }
.signoff__sub { margin-top: var(--s-3); color: color-mix(in srgb, var(--paper) 70%, transparent); }
.signoff__actions { margin-top: var(--s-5); }
/* Accents on the inverted panel need AA contrast in BOTH themes.
   Light theme: panel is dark  -> bright vermilion. Dark theme: panel is light -> deep vermilion. */
.signoff .eyebrow,
.signoff .tally__num { color: #F2764F; }
.signoff .tally { color: rgba(244, 241, 234, .68); }
[data-theme="dark"] .signoff .eyebrow,
[data-theme="dark"] .signoff .tally__num { color: var(--vermilion-text); }
[data-theme="dark"] .signoff .tally { color: rgba(22, 21, 15, .62); }

/* 12.10 Footer — the colophon */
.colophon {
  background: var(--paper-deep);
  padding-block: var(--s-5);
  font-size: var(--fs-small);
}
.colophon__top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--s-4);
  padding-bottom: var(--s-4);
  box-shadow: var(--ruled);
}
.colophon__bottom a { color: var(--ink); opacity: .8; text-decoration: underline; text-underline-offset: 2px; }
.colophon__bottom a:hover { opacity: 1; color: var(--ink-blue); }
.colophon h2,
.colophon__col-label {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s-2);
}
.colophon ul { display: flex; flex-direction: column; gap: 8px; }
.colophon a { color: var(--ink); opacity: .8; }
.colophon a:hover { opacity: 1; color: var(--ink-blue); }
.colophon__brand { font-family: var(--font-display); font-size: 1.6rem; }
.colophon__brand .brand__mark { color: var(--ink-blue); font-style: italic; }
.colophon__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-2);
  padding-top: var(--s-4);
  color: var(--muted);
}
.colophon__set { font-style: italic; font-family: var(--font-display); }

/* page hero (interior pages) */
.page-hero { padding-top: 160px; padding-bottom: var(--s-5); box-shadow: var(--ruled); }
.page-hero h1 {
  font-size: clamp(2.6rem, 7vw, 5.5rem);
  letter-spacing: -0.02em;
  max-width: 18ch;
}
.page-hero h1 em { color: var(--ink-blue); font-style: italic; }
.page-hero .lead { margin-top: var(--s-3); }

/* page-specific canvas effect heroes */
.process-hero,
.studio-hero,
.packages-hero,
.work-hero { position: relative; overflow: hidden; }

.page-hero__field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
  pointer-events: none;
}

.process-hero .shell,
.studio-hero .shell,
.packages-hero .shell,
.work-hero .shell { position: relative; z-index: 1; }

/* work.html physics tag cloud */
.work__physics {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

html.js .work-tag {
  position: absolute;
  top: 0; left: 0;
  pointer-events: none;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.28em 0.7em;
  border-radius: 2em;
  white-space: nowrap;
  will-change: transform;
  user-select: none;
}

/* -----------------------------------------------------------------------------
   12.11 INTERACTIONS — smooth scroll, parallax, tilt, CTA nudge, FAQ accordion
   -------------------------------------------------------------------------- */
/* Lenis smooth scroll (classes added to <html> by Lenis) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* Parallax decorative accents (JS-driven via Lenis) */
[data-parallax] { will-change: transform; }

/* CTA attention nudge — a gentle, occasional sway to draw the eye */
@keyframes ctaNudge {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-4px); }
  30% { transform: translateX(4px); }
  45% { transform: translateX(-3px); }
  60% { transform: translateX(3px); }
  78% { transform: translateX(-1px); }
}
.cta-nudge { animation: ctaNudge 0.6s var(--ease-out); }

/* FAQ accordion */
.faq { margin-top: var(--s-3); }
.faq__item { box-shadow: var(--ruled); }
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4) 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.15;
  color: var(--ink);
  transition: color var(--dur-fast) var(--ease-out);
}
.faq__q:hover { color: var(--ink-blue); }
.faq__icon { position: relative; flex: none; width: 20px; height: 20px; }
.faq__icon::before, .faq__icon::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  background: var(--ink-blue);
  transition: transform var(--dur-base) var(--ease-out);
}
.faq__icon::before { width: 18px; height: 2px; transform: translate(-50%, -50%); }
.faq__icon::after  { width: 2px; height: 18px; transform: translate(-50%, -50%); }
.faq__item.is-open .faq__icon::after { transform: translate(-50%, -50%) scaleY(0); }
.faq__a { overflow: hidden; }
.faq__a-inner { padding-bottom: var(--s-4); color: var(--muted); max-width: 66ch; font-size: var(--fs-small); }
html.js .faq__a { height: 0; transition: height var(--dur-base) var(--ease-inout); }

/* -----------------------------------------------------------------------------
   13. FORMS
   -------------------------------------------------------------------------- */
.form { margin-top: var(--s-4); max-width: 640px; }
.field { margin-bottom: var(--s-4); }
.field label {
  display: block;
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s-2);
}
.field label .req { color: var(--vermilion); }
.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 14px 16px;
  font: inherit;
  font-size: var(--fs-small);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-1);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--ink-blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink-blue) 18%, transparent);
}
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.field__hint { font-size: var(--fs-small); color: var(--muted); margin-top: 6px; }
.field__error { color: var(--vermilion-text); font-size: var(--fs-small); margin-top: 6px; display: none; }
.field.has-error input,
.field.has-error textarea { border-color: var(--vermilion); }
.field.has-error .field__error { display: block; }

.form__success {
  display: none;
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--ink-blue);
  border-radius: var(--radius-1);
  margin-top: var(--s-3);
}
.form__success.is-shown { display: block; }
.form__success h3 { font-family: var(--font-display); color: var(--ink-blue); margin-bottom: var(--s-1); }

/* contact split */
.contact-grid { display: grid; grid-template-columns: 1fr 0.8fr; gap: var(--s-6); align-items: start; }
.contact-aside dt { font-size: var(--fs-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-top: var(--s-3); }
.contact-aside dd { font-size: var(--fs-h3); font-family: var(--font-display); }
.contact-aside dd a { color: var(--ink-blue); }

/* Cost calculator */
.calc { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: var(--s-6); align-items: start; margin-top: var(--s-4); }
.calc__group { padding-block: var(--s-4); box-shadow: var(--ruled); }
.calc__legend { font-family: var(--font-display); font-size: var(--fs-h3); margin-bottom: var(--s-3); display: block; }
.calc__opts { display: flex; flex-direction: column; gap: var(--s-2); }
.opt {
  display: flex; gap: var(--s-2); align-items: flex-start;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--hairline); border-radius: var(--radius-1);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.opt:hover { border-color: var(--ink-blue); }
.opt input { margin-top: 5px; accent-color: var(--ink-blue); flex: none; }
.opt:has(input:checked) { border-color: var(--ink-blue); background: var(--surface); }
.opt__body { display: flex; flex-direction: column; }
.opt__title { font-weight: 600; }
.opt__desc { font-size: var(--fs-small); color: var(--muted); }
.opt__price { margin-left: auto; color: var(--muted); font-size: var(--fs-small); white-space: nowrap; padding-left: var(--s-2); }
.calc__result {
  position: sticky; top: 104px;
  background: var(--surface); border: 1px solid var(--ink-blue); border-radius: var(--radius-1);
  padding: var(--s-4);
}
.calc__result .eyebrow { margin-bottom: var(--s-1); }
.calc__est { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); color: var(--ink-blue); font-variant-numeric: tabular-nums; line-height: 1; }
.calc__est span { font-size: 1rem; color: var(--muted); }
.calc__pkg { font-size: var(--fs-small); color: var(--ink); margin-top: var(--s-2); }
.calc__pkg b { color: var(--ink-blue); }
.calc__note { font-size: var(--fs-small); color: var(--muted); margin-top: var(--s-3); font-style: italic; }
.calc__result .btn { width: 100%; justify-content: center; margin-top: var(--s-3); }
@media (max-width: 900px) {
  .calc { grid-template-columns: 1fr; gap: var(--s-4); }
  .calc__result { position: static; }
}

/* -----------------------------------------------------------------------------
   14. MOBILE STICKY CTA
   -------------------------------------------------------------------------- */
.mobile-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: none;
  padding: 12px var(--gutter);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 var(--hairline);
  transform: translateY(110%);
  transition: transform var(--dur-base) var(--ease-out);
}
.mobile-cta.is-shown { transform: translateY(0); }
.mobile-cta .btn { width: 100%; justify-content: center; }

/* The curved menu is injected by JS for mobile navigation.
   Hide it by default so it never appears as an extra block below the footer on desktop/tablet. */
.curved-menu { display: none; }

/* -----------------------------------------------------------------------------
   TEXT ROTATE — cycling words in hero subtitle
   -------------------------------------------------------------------------- */
.text-rotate { display: inline; }
.text-rotate__word { display: inline; color: var(--ink-blue); font-style: italic; }
/* hide subsequent words until JS activates the rotator */
.text-rotate__word + .text-rotate__word { display: none; }

html.js .text-rotate.is-active {
  position: relative;
  display: inline-block;
  vertical-align: text-bottom;
  overflow: hidden;
  transition: width 0.5s var(--ease-inout);
}
html.js .text-rotate.is-active .text-rotate__word {
  position: absolute;
  top: 0; left: 0;
  display: block;
  white-space: nowrap;
  transform: translateY(115%);
  opacity: 0;
  transition: transform 0.6s var(--ease-inout), opacity 0.45s;
}
html.js .text-rotate.is-active .text-rotate__word.is-current {
  transform: translateY(0);
  opacity: 1;
}
html.js .text-rotate.is-active .text-rotate__word.is-exiting {
  transform: translateY(-115%);
  opacity: 0;
}

/* -----------------------------------------------------------------------------
   LETTER 3D SWAP — scroll-triggered flip reveal
   -------------------------------------------------------------------------- */
html.js .char-word {
  display: inline-block;
  white-space: nowrap; /* prevents mid-word line breaks */
}
html.js .char-flip {
  display: inline-block;
  opacity: 0;
  transform: perspective(500px) rotateX(-85deg);
  transform-origin: center 80%;
  transition: transform 0.5s var(--ease-out), opacity 0.35s;
}
html.js .char-flip.is-visible {
  opacity: 1;
  transform: perspective(500px) rotateX(0deg);
}

/* -----------------------------------------------------------------------------
   VARIABLE FONT CURSOR PROXIMITY — hero h1 wght axis
   -------------------------------------------------------------------------- */
.vf-char { display: inline; }

/* -----------------------------------------------------------------------------
   15. REDUCED MOTION & RESPONSIVE
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .proof-trail__path,
  .proof-trail__glow {
    stroke-dashoffset: 0 !important;
  }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    /* Durations were collapsed but DELAYS were not, so every staggered reveal
       on the site still waited out its full delay before appearing instantly —
       reduced-motion users watched content pop in one item at a time instead of
       seeing a finished page. */
    animation-delay: 0s !important;
    transition-delay: 0s !important;
  }
  html.js .reveal,
  html.js .reveal-stagger > * { opacity: 1 !important; transform: none !important; }
  html.js .ink-title:not(.is-visible) .ink-title__fill,
  html.pc-anim .hero__title .word-proof .ink { clip-path: inset(0 0 0 0) !important; }
  html.pc-anim .hero__title .sign-underline path { stroke-dashoffset: 0 !important; }
  .process__rule span { transform: scaleY(1) !important; }
  .hero__scroll .line::after { animation: none; }
}

/* Disable nib + magnetic on touch */
@media (hover: none), (pointer: coarse) {
  .cursor, .cursor-ring { display: none !important; }
  .cursor-ready { cursor: auto; }
}

/* Tablet */
@media (max-width: 1100px) {
  :root { --margin-w: 64px; --gutter: 28px; }
  .contact-grid { grid-template-columns: 1fr; gap: var(--s-5); }
  .colophon__top { grid-template-columns: 1fr 1fr; }
  .nav__right .tally { display: none; }   /* free space for 5 nav links */
  .nav__links { gap: var(--s-3); }
}

/* Mobile */
@media (max-width: 760px) {
  .proof-trail { display: none; }
  :root {
    --margin-w: 40px; --gutter: 20px;
    --s-6: 80px; --s-7: 104px;
  }
  .nav .tally { display: none; }            /* desktop tally hidden; drawer tally re-shown below */
  .nav__right > .btn { display: none; }      /* prevent desktop CTA appearing/clipping beside the burger */
  .nav__links { flex-direction: column; gap: 0; width: 100%; } /* stack inside the drawer */
  .nav__burger { display: flex; }

  /* hide the desktop nav list on mobile — the curved panel replaces it */
  .nav__menu { display: none; }

  /* ── CURVED SIDE MENU ────────────────────────────────────────────────── */
  .curved-menu {
    display: block;
    width: min(480px, 100vw);
    height: 100vh;
    /* hardcoded so it stays dark-on-light regardless of theme toggle */
    background: #16150F;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 98;
    color: #F4F1EA;
    overflow: hidden;
  }
  .curved-menu__body {
    height: 100%;
    padding: 100px 48px 48px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .curved-menu__nav {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 16px;
  }
  .curved-menu__label {
    font-family: var(--font-body);
    font-size: var(--fs-label);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(244,241,234,0.45);
    border-bottom: 1px solid rgba(244,241,234,0.2);
    padding-bottom: 10px;
    margin-bottom: 32px;
  }
  .curved-menu__link {
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
    padding-block: 8px;
  }
  .curved-menu__link a {
    font-family: var(--font-display);
    font-size: clamp(2rem, 10vw, 3rem);
    font-weight: 400;
    font-style: italic;
    color: #F4F1EA;
    text-decoration: none;
    line-height: 1.1;
    transition: color 0.2s;
  }
  .curved-menu__link a:hover,
  .curved-menu__link a[aria-current="page"] { color: #D6451F; }
  .curved-menu__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #D6451F;
    position: absolute;
    left: -24px;
    transform: scale(0);
    transform-origin: center;
  }
  .curved-menu__dot--active { transform: scale(1); }
  .curved-menu__footer {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
  }
  .curved-menu__cta {
    align-self: flex-start;
  }
  .curved-menu__meta {
    font-size: var(--fs-label);
    color: rgba(244,241,234,0.45);
  }
  .curved-menu__curve {
    position: absolute;
    top: 0;
    left: -99px;
    width: 100px;
    height: 100%;
    fill: #16150F;
    stroke: none;
    pointer-events: none;
  }

  .hero { padding-top: 96px; }
  .prop { grid-template-columns: 1fr; gap: var(--s-2); }
  .work__grid { grid-template-columns: 1fr; }
  .pkg {
    grid-template-columns: 40px 1fr;
    gap: var(--s-2) var(--s-3);
    row-gap: var(--s-2);
  }
  .pkg__price { grid-column: 2; }
  .pkg__cta { grid-column: 2; justify-self: start; }
  .plan { grid-template-columns: 1fr; gap: var(--s-2); }
  .plan__price { font-size: 1.3rem; }
  .field--row { grid-template-columns: 1fr; }
  .colophon__top { grid-template-columns: 1fr; gap: var(--s-3); }
  .compare { font-size: var(--fs-small); min-width: 540px; }
  .compare th, .compare td { padding: var(--s-2); }
  .compare tbody th { width: auto; }
  .mobile-cta { display: block; }
  /* reserve space so the fixed CTA never overlaps the footer/last content */
  body { padding-bottom: 76px; }
}

/* desktop: hide mobile-only menu container default */
@media (min-width: 761px) {
  .nav__menu { display: contents; }
  .nav__menu .tally { display: none; } /* the desktop tally lives in .nav__right */
}

/* =============================================================================
   ENHANCED INTERACTIONS v2 — nav glider, highlights, marquee, carousels, cards
   ========================================================================== */

/* ── Nav revamp ──────────────────────────────────────────────────────────── */
/* Thin accent bar at very top — slides in when condensed */
.nav__accent-line {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--vermilion) 0%, color-mix(in srgb, var(--vermilion) 40%, transparent) 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out);
  pointer-events: none;
}
.nav.is-condensed .nav__accent-line { transform: scaleX(1); }

/* Sliding underline glider — moves to hovered/active link */
.nav__glider {
  position: absolute;
  bottom: -5px;
  left: 0;
  height: 1.5px;
  width: 0;
  background: var(--vermilion);
  border-radius: 1px;
  opacity: 0;
  transition: left 0.28s var(--ease-inout),
              width 0.28s var(--ease-inout),
              opacity 0.18s;
  pointer-events: none;
}
.nav__links { position: relative; }

/* Condensed nav: replace ruled box-shadow with border-bottom */
.nav.is-condensed {
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: none;
  border-bottom: 1px solid var(--hairline);
}

/* CTA button shimmer — light sweep on hover */
.btn--primary {
  overflow: hidden;
}
.btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    108deg,
    transparent 30%,
    rgba(255,255,255,0.22) 50%,
    transparent 70%
  );
  background-size: 250% 100%;
  background-position: 250% 0;
  transition: background-position 0.55s var(--ease-out);
  pointer-events: none;
}
.btn--primary:hover::after,
.btn--primary:focus-visible::after { background-position: -50% 0; }

/* Ghost button hover: left-border flash */
.btn--ghost {
  transition: border-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn--ghost:hover { transform: translateX(3px); }

/* ── Text highlight — scrolled marker pen effect ─────────────────────────── */
mark.hl {
  background: none;
  color: inherit;
  position: relative;
  display: inline;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
mark.hl::before {
  content: '';
  position: absolute;
  inset: 4px -3px -1px;
  background: rgba(214,69,31, 0.2);
  border-radius: 2px;
  transform: scaleX(0) skewX(-2deg);
  transform-origin: left center;
  transition: transform 0.6s 0.1s var(--ease-out);
  z-index: -1;
}
html.js mark.hl.is-hl::before { transform: scaleX(1) skewX(-2deg); }

/* ── Word-by-word blur-rise reveal ───────────────────────────────────────── */
html.js [data-reveal="words"] .w-unit {
  display: inline-block;
  opacity: 0;
  transform: translateY(12px);
  filter: blur(4px);
  transition: opacity 0.5s var(--ease-out),
              transform 0.5s var(--ease-out),
              filter 0.45s var(--ease-out);
  will-change: transform, filter;
}
html.js [data-reveal="words"].is-revealed .w-unit {
  opacity: 1; transform: none; filter: none;
}

/* ── Typing text — eyebrow cursor blink ─────────────────────────────────── */
.typing-cursor {
  display: inline-block;
  width: 2px;
  height: 0.9em;
  background: var(--vermilion);
  border-radius: 1px;
  margin-left: 2px;
  vertical-align: -0.05em;
  animation: cursorBlink 0.9s step-start infinite;
}
@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ── Marquee trust ticker ────────────────────────────────────────────────── */
.marquee-row {
  overflow: hidden;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 13px 0;
  user-select: none;
}
.marquee-track {
  display: flex;
  gap: 0;
  white-space: nowrap;
  animation: marqueeScroll 34s linear infinite;
  will-change: transform;
}
.marquee-row:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-size: var(--fs-small);
  font-family: var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 2.2rem;
  flex-shrink: 0;
}
.marquee-item strong { color: var(--ink); font-weight: 500; }
.marquee-sep {
  color: var(--vermilion);
  font-size: 0.6em;
  margin: 0;
  flex-shrink: 0;
}
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Animated copy button ────────────────────────────────────────────────── */
.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 6px;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
  vertical-align: middle;
  margin-left: 8px;
}
.copy-btn:hover { border-color: var(--ink-blue); color: var(--ink); }
.copy-btn.is-copied {
  border-color: #2a7d4f;
  color: #2a7d4f;
  background: rgba(42,125,79,0.06);
}
.copy-btn__icon {
  width: 14px; height: 14px;
  flex-shrink: 0;
  display: grid; place-items: center;
  position: relative;
}
.copy-btn__icon svg {
  position: absolute;
  inset: 0;
  margin: auto;
  transition: opacity 0.2s, transform 0.25s var(--ease-out);
}
.copy-btn__copy { opacity: 1; transform: scale(1); }
.copy-btn__check { opacity: 0; transform: scale(0.6) rotate(-30deg); }
.copy-btn.is-copied .copy-btn__copy { opacity: 0; transform: scale(0.6) rotate(30deg); }
.copy-btn.is-copied .copy-btn__check { opacity: 1; transform: scale(1) rotate(0deg); }

/* ── Stacked showcase carousel ───────────────────────────────────────────── */
.card-stack {
  position: relative;
  width: 100%;
  perspective: 1000px;
}
.card-stack__item {
  position: absolute;
  inset: 0;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-2);
  padding: var(--s-4);
  transition: transform 0.45s var(--ease-inout),
              opacity 0.35s var(--ease-out),
              box-shadow 0.35s var(--ease-out);
  backface-visibility: hidden;
}
.card-stack__item[data-stack="0"] {
  transform: translateY(0) scale(1) translateZ(0);
  opacity: 1; z-index: 3;
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}
.card-stack__item[data-stack="1"] {
  transform: translateY(-6%) scale(0.96) translateZ(-20px);
  opacity: 0.7; z-index: 2;
}
.card-stack__item[data-stack="2"] {
  transform: translateY(-11%) scale(0.92) translateZ(-40px);
  opacity: 0.4; z-index: 1;
}
.card-stack__nav {
  display: flex;
  gap: var(--s-2);
  margin-top: calc(var(--card-stack-height, 240px) + var(--s-3));
  justify-content: flex-start;
}
.card-stack__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--hairline);
  border: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  padding: 0;
}
.card-stack__dot.is-active { background: var(--vermilion); transform: scale(1.4); }

/* ── Package proof cards ─────────────────────────────────────────────────── */
.proof-card {
  position: relative;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-2);
  padding: var(--s-4) var(--s-4) var(--s-4) calc(var(--s-4) + 4px);
  margin-top: var(--s-4);
  transition: border-color 0.3s var(--ease-out),
              box-shadow 0.3s var(--ease-out),
              transform 0.3s var(--ease-out);
  overflow: hidden;
}
.proof-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--hairline);
  transition: background 0.3s var(--ease-out), width 0.3s var(--ease-out);
}
.proof-card:hover {
  border-color: color-mix(in srgb, var(--ink-blue) 40%, var(--hairline));
  box-shadow: 0 6px 24px rgba(0,0,0,0.07);
  transform: translateY(-2px);
}
.proof-card:hover::before {
  background: var(--vermilion);
  width: 4px;
}
.proof-card--featured {
  border-color: color-mix(in srgb, var(--ink-blue) 35%, var(--hairline));
}
.proof-card--featured::before { background: var(--ink-blue); width: 4px; }
.proof-card__stamp {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  font-family: var(--font-body);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vermilion);
  border: 1px solid var(--vermilion);
  padding: 2px 8px;
  border-radius: 3px;
  opacity: 0.85;
}

/* ── Section divider — ruled accent ─────────────────────────────────────── */
.divider {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-block: var(--s-5);
  color: var(--muted);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.divider::before, .divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--hairline);
}
.divider::before { background: linear-gradient(to right, transparent, var(--hairline)); }
.divider::after  { background: linear-gradient(to left,  transparent, var(--hairline)); }

/* =============================================================================
   SCROLL PROGRESS + PAGE TRANSITIONS + SOUL
   ========================================================================== */

/* ── Scroll thumb — right-edge position indicator, alive while scrolling ── */
.scroll-thumb {
  position: fixed;
  top: 12px; bottom: 12px; right: 5px;
  width: 3px;
  z-index: 950;
  pointer-events: none;
  opacity: 0;
  transition: opacity .45s ease;
}
.scroll-thumb.is-active { opacity: 1; }
.scroll-thumb span {
  display: block;
  width: 100%;
  border-radius: 3px;
  background: var(--vermilion);
  transform-origin: 50% 50%;
  will-change: transform;
}
@media (max-width: 720px) { .scroll-thumb { display: none; } }
@media print { .scroll-thumb { display: none !important; } }

/* ── Cross-document View Transitions ─────────────────────────────────────── */
@view-transition {
  navigation: auto;
}

/* The JS ink wipe (setupInkWipe) now owns the cinematic cross-page feel in
   every browser. Where the platform ALSO runs a native cross-document View
   Transition, demote it to a near-instant fade so the two never stack into a
   double animation — the wipe is the star; this fade just seals the seam. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes pcVtFade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  ::view-transition-old(root) {
    animation: pcVtFade 120ms linear both reverse;
  }
  ::view-transition-new(root) {
    animation: pcVtFade 120ms linear both;
  }
}

/* ── Logo → home circle wipe overlay ─────────────────────────────────────── */
.home-wipe {
  position: fixed; inset: 0; z-index: 9998;
  background: #0d0c08;
  clip-path: circle(0% at 5% 4.5%);
  will-change: clip-path;
  pointer-events: none;
}
.home-wipe.is-open {
  transition: clip-path 0.6s cubic-bezier(0.76, 0, 0.24, 1);
  clip-path: circle(150% at 5% 4.5%);
}

/* ── Scroll-scene engine: word units for scrubbed text ───────────────────── */
.sw { display: inline-block; }

/* ── The Ink Thread — one continuous line writes the page as you read ────── */
.ledger { position: relative; }
.ink-thread {
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 6px; /* inside the ledger's margin column, just left of the numerals */
  width: 2px;
  background: color-mix(in srgb, var(--hairline) 60%, transparent);
  pointer-events: none;
}
.ink-thread__fill {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 0%;
  background: linear-gradient(to bottom, var(--ink-blue) 0%, var(--ink-blue) 70%, var(--vermilion) 100%);
}
.ink-thread__nib {
  position: absolute;
  bottom: -4px; left: 50%;
  width: 9px; height: 9px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--vermilion);
  box-shadow: 0 0 14px 3px color-mix(in srgb, var(--vermilion) 50%, transparent);
}
@media (max-width: 860px) { .ink-thread { display: none; } }

/* ── Self-drawing ink marginalia — red pen annotates the offer ────────────── */
.marginalia-host { position: relative; }
.marginalia {
  position: absolute;
  pointer-events: none;
  overflow: visible;
  fill: none;
  z-index: 2;
}
.marginalia path {
  fill: none;
  stroke: var(--vermilion);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  transition: stroke-dashoffset 0.8s cubic-bezier(0.6, 0, 0.3, 1);
}
.marginalia.is-inked path { stroke-dashoffset: 0; }

/* 1 — double underline beneath "Fixed price." (spans the mark, stretched) */
.marginalia--underline {
  left: -3%;
  width: 106%;
  top: 100%;
  height: 0.62em;
  margin-top: -0.14em;
}
.marginalia--underline path { stroke-width: 3.2; }

/* 2 — open oval around $2,000 (position set inline from a measured Range) */
.marginalia--oval path { stroke-width: 2.6; }

/* 3 — NB asterisk + tick beside the contract sign-off */
.marginalia--nb {
  left: 100%;
  top: -0.1em;
  width: 2.1em;
  height: 1.5em;
  margin-left: 0.35em;
}
.marginalia--nb path { stroke-width: 2.6; }

@media (prefers-reduced-motion: reduce) {
  .marginalia { display: none; }
}


/* ── Make-a-mark hint + ledger clock ─────────────────────────────────────── */

/* ── Folio chip + next-page handoff (turning the ledger leaf) ─────────────── */
.folio-chip {
  position: fixed;
  right: var(--s-3);
  bottom: var(--s-3);
  z-index: 40;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.folio-chip b {
  font-weight: 600;
  color: var(--ink-blue);
  font-variant-numeric: tabular-nums;
}
.folio-chip.is-in { opacity: 1; transform: none; }
@media (max-width: 860px) { .folio-chip { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .folio-chip { transition: none; opacity: 1; transform: none; }
}

.folio-next {
  display: block;
  position: relative;
  min-height: 46vh;
  padding: var(--s-6) var(--s-4) var(--s-5);
  background: var(--paper-deep);
  border-top: 1px solid var(--hairline);
  color: var(--ink);
  text-decoration: none;
  overflow: hidden;
}
.folio-next__inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--s-3);
  max-width: 72ch;
  min-height: calc(46vh - var(--s-6) - var(--s-5));
  margin: 0 auto;
}
.folio-next__eyebrow {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.folio-next__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: 1.02;
  color: var(--ink);
  transition: color var(--dur-fast) var(--ease-out);
}
.folio-next__rule {
  position: relative;
  display: block;
  width: 100%;
  height: 2px;
  margin-top: var(--s-2);
  background: color-mix(in srgb, var(--hairline) 70%, transparent);
}
.folio-next__fill {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: scaleX(0);
  background: var(--vermilion);
}
.folio-next:hover .folio-next__title,
.folio-next:focus-visible .folio-next__title { color: var(--ink-blue); }
.folio-next:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -4px; }

/* static (mobile / reduced-motion): a short inked stub marks it as a leaf */
.folio-next--static .folio-next__fill { transform: scaleX(0.16); }
@media (max-width: 860px) {
  .folio-next { min-height: 0; padding: var(--s-5) var(--s-3) var(--s-4); }
  .folio-next__inner { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .folio-next__title { transition: none; }
}


/* Nib ink trail — faint droplets drying behind the pointer */
.nib-drop {
  position: fixed;
  top: 0; left: 0;
  z-index: 9998;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--ink-blue);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

/* Contextual cursor label — the ring names the mark it is over */
.cursor-ring__label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0 6px;
  text-align: center;
  line-height: 1.05;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-blue);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
  pointer-events: none;
}
.cursor-ring.has-label {
  width: 74px; height: 74px;
  border-color: var(--ink-blue);
  background: color-mix(in srgb, var(--paper) 80%, transparent);
}
.cursor-ring.has-label::after { content: none; }
.cursor-ring.has-label .cursor-ring__label { opacity: 1; }


/* ── Ink page transitions ────────────────────────────────────────────────────
   Departure: a diagonal sheet of ink (var(--ink)) sweeps across, led by a thin
   vermilion nib line, via a clip-path polygon transition. Arrival: the head
   gate adds html.pc-arriving pre-paint so body::after covers the incoming page
   in that same ink before first paint (no flash); html.pc-arrived slides it off
   to reveal the page. No GSAP — pure CSS transitions, so it works everywhere.
   ─────────────────────────────────────────────────────────────────────────── */

/* Departure overlay: element background is the leading vermilion nib; the ::after
   is the ink sheet sitting ~5px behind it, so only a thin vermilion edge shows. */
.pc-wipe {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  background: var(--vermilion);
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  transition: clip-path 340ms var(--ease-out);
  will-change: clip-path;
}
.pc-wipe::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  transition: clip-path 340ms var(--ease-out);
  will-change: clip-path;
}
.pc-wipe.is-wiping {
  clip-path: polygon(0 0, calc(125% + 5px) 0, calc(100% + 5px) 100%, 0 100%);
}
.pc-wipe.is-wiping::after {
  clip-path: polygon(0 0, 125% 0, 100% 100%, 0 100%);
}

/* Arrival cover: painted pre-paint by the head gate (html.pc-arriving). The ink
   sheet (::after) fully covers; the vermilion nib (::before) extends 5px past
   the reveal edge so it leads the ink off as the page is uncovered. */
html.pc-arriving body::before,
html.pc-arriving body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  will-change: clip-path;
  /* body::after is ALSO the grain texture, which sets opacity:.05 and
     mix-blend-mode:multiply (and .035/screen in dark). Those are not reset by
     the `background` shorthand, so the ink sheet that exists to hide the
     incoming page has been painting at 5% opacity — i.e. the arrival half of
     the page transition has never actually covered anything. Reset both. */
  opacity: 1;
  mix-blend-mode: normal;
  background-image: none;
}
html.pc-arriving body::before { /* vermilion nib, leads the reveal edge */
  background: var(--vermilion);
  clip-path: polygon(-5px 0, 125% 0, 100% 100%, -5px 100%);
}
html.pc-arriving body::after { /* the ink sheet */
  background: var(--ink);
  clip-path: polygon(0 0, 125% 0, 100% 100%, 0 100%);
}
html.pc-arrived body::before,
html.pc-arrived body::after {
  transition: clip-path 480ms var(--ease-out);
}
html.pc-arrived body::before {
  clip-path: polygon(calc(125% - 5px) 0, 150% 0, 125% 100%, calc(100% - 5px) 100%);
}
html.pc-arrived body::after {
  clip-path: polygon(125% 0, 150% 0, 125% 100%, 100% 100%);
}

@media (prefers-reduced-motion: reduce) {
  /* Belt-and-suspenders: never intercept, never cover, never animate. */
  .pc-wipe { display: none !important; }
  html.pc-arriving body::before,
  html.pc-arriving body::after { display: none !important; }
}

.hero__mark-hint {
  display: none;
  position: absolute;
  bottom: var(--s-4);
  right: 0;
  z-index: 2;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-small);
  color: var(--muted);
  transition: opacity .6s var(--ease-out);
}
html.has-ink-field .hero__mark-hint { display: block; }
.hero__mark-hint.is-used { opacity: 0; }
@media (max-width: 720px) { .hero__mark-hint { display: none; } }
.ledger-clock {
  display: block;
  width: 100%;
  margin-bottom: var(--s-1);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-blue);
}

/* ── The proof shelf — live miniatures of real sample builds ─────────────── */
.plate--sample { padding-top: var(--s-3); }
.plate__live { display: block; margin-bottom: var(--s-2); }
.plate__frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-1);
  background: var(--paper-deep);
  box-shadow: var(--lift-2);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.plate__frame iframe {
  width: 400%;
  height: 400%;
  transform: scale(0.25);
  transform-origin: 0 0;
  border: 0;
  pointer-events: none;
}
.plate__frame-badge {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 4px 10px;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--vermilion);
  border-radius: 999px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.plate--sample:hover .plate__frame { transform: translateY(-4px) rotate(-0.4deg); box-shadow: 0 26px 50px -24px rgba(22, 21, 15, .4); }
.plate--sample:hover .plate__frame-badge { opacity: 1; transform: translateY(0); }

/* ── Tradies hero: its molten canvas is intrinsically dark — carry the dark
      palette locally in light mode so the headline is never ink-on-ink ───── */
/* Fourth and last copy of the dark palette, now a reference like the others. */
html:not([data-theme="dark"]) .tradie-hero {
  --paper:      var(--stock-dark-paper);
  --paper-deep: var(--stock-dark-paper-deep);
  --surface:    var(--stock-dark-surface);
  --ink:        var(--stock-dark-ink);
  --muted:      var(--stock-dark-muted);
  --hairline:   var(--stock-dark-hairline);
  --ink-blue:   var(--stock-dark-blue);
  --vermilion:  var(--stock-dark-vermilion);
  --vermilion-text: var(--stock-dark-vermilion-text);
  background: var(--paper);
  color: var(--ink);
}

/* ── Footer as destination — the closing page of the book ────────────────── */
.colophon__mark {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 15vw, 13rem);
  font-weight: 480;
  line-height: 0.86;
  letter-spacing: -0.045em;
  color: var(--ink);
  opacity: 0.07;
  user-select: none;
  pointer-events: none;
  margin-bottom: var(--s-4);
}
.colophon__mark em { font-style: italic; color: var(--ink-blue); }
.colophon__close {
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-style: italic;
  max-width: 44ch;
  margin-bottom: var(--s-5);
}
.colophon__close a { color: var(--vermilion-text); text-underline-offset: 4px; }
.colophon__aoc-row {
  padding-top: var(--s-3);
  color: var(--muted);
  font-size: var(--fs-small);
  max-width: 62ch;
}
.form__stamp { margin-bottom: var(--s-3); transform: rotate(-6deg) scale(1); }

/* ── Ghost numerals — the entry number, printed enormous and faint behind
      each section (injected by the scene engine) ─────────────────────────── */
.entry__ghost {
  position: absolute;
  top: -0.08em;
  right: -0.02em;
  z-index: 0;
  font-family: var(--font-display);
  font-size: clamp(8rem, 17vw, 19rem);
  font-weight: 500;
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: var(--ink);
  opacity: 0.04;
  pointer-events: none;
  user-select: none;
}
[data-theme="dark"] .entry__ghost { opacity: 0.055; }
.entry > *:not(.entry__ghost) { position: relative; z-index: 1; }

/* ── Tonal paper zoning — alternate entries sit on a slightly deeper sheet ── */
.ledger > .entry:nth-child(even):not([data-spread]) {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--paper-deep) 52%, transparent),
    color-mix(in srgb, var(--paper-deep) 20%, transparent));
  border-radius: var(--radius-1);
  padding-inline: var(--s-3);
  margin-inline: calc(var(--s-3) * -1);
}

/* the thread re-presses each stamp as it passes (keyframe: immune to the
   stamp system's transform transition) */
.entry__num.is-repress { animation: stamp-repress .5s cubic-bezier(.2, 1.6, .35, 1); }
@keyframes stamp-repress {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.22) rotate(-2deg); }
  100% { transform: scale(1); }
}

/* read-time badge on guide cards */
.plate__read {
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--muted);
}

/* ── Process — the filled ledger: a contract that completes itself ───────── */
.process--contract {
  border: 1px solid var(--hairline);
  background: var(--surface);
  border-radius: var(--radius-1);
  box-shadow: var(--lift-2);
  padding: var(--s-4) var(--s-5);
}
.process--contract .process__rule {
  left: calc(var(--s-5) + 11px);
  top: var(--s-4);
  bottom: var(--s-4);
}
.process--contract .process__rule span { transition: none; }
.process--contract .step { padding-right: 64px; }
.step-check {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
}
.step-check rect { fill: none; stroke: var(--hairline); stroke-width: 1.6; }
.step-check__tick {
  fill: none;
  stroke: var(--vermilion);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.contract-sig {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px dashed var(--hairline);
}
.contract-sig__line { max-width: 320px; flex: 1 1 240px; }
.contract-sig__line svg { display: block; width: 100%; height: 54px; overflow: visible; }
.contract-sig__line svg path {
  fill: none;
  stroke: var(--ink-blue);
  stroke-width: 2.4;
  stroke-linecap: round;
}
.contract-sig__line span {
  display: block;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid var(--ink);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.contract-stamp {
  display: inline-block;
  padding: 10px 18px;
  border: 2.5px solid var(--vermilion);
  border-radius: 4px;
  color: var(--vermilion);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: var(--fs-small);
  transform: rotate(-6deg);
}
@media (max-width: 720px) {
  .process--contract { padding: var(--s-3); }
  .process--contract .process__rule { left: calc(var(--s-3) + 11px); }
  .process--contract .step { padding-right: 46px; }
  .step-check { width: 24px; height: 24px; right: 4px; }
}

/* ── Packages — the rate-card deck. Cards stick and stack; each new card
      slides over the last, which settles back scaled and dimmed (GSAP). ──── */
.pkg-stack { position: relative; }
.pkg-stack .entry {
  position: sticky;
  top: 104px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-1);
  box-shadow: 0 24px 60px -30px rgba(22, 21, 15, .35);
  padding: var(--s-4) var(--s-4) var(--s-5);
  margin-bottom: 52vh;
  transform-origin: 50% 0%;
}
.pkg-stack .entry:nth-child(1) { z-index: 1; }
.pkg-stack .entry:nth-child(2) { z-index: 2; }
.pkg-stack .entry:nth-child(3) { z-index: 3; }
.pkg-stack .entry:nth-child(4) { z-index: 4; margin-bottom: var(--s-6); }
.pkg-stack #lss { border-top: 2px solid var(--vermilion); }
/* the entry number becomes the card's corner index */
.pkg-stack .entry .entry__num {
  left: auto;
  right: var(--s-3);
  top: var(--s-3);
}
@media (max-width: 720px) {
  .pkg-stack .entry { padding: var(--s-3); top: 88px; margin-bottom: 40vh; }
  .pkg-stack .entry:nth-child(4) { margin-bottom: var(--s-5); }
}

/* ── GEO proof — the ledger, read back by a machine ──────────────────────── */
.geo-proof {
  max-width: 720px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-1);
  background: var(--surface);
  padding: var(--s-4);
  box-shadow: var(--lift-2);
}
.geo-proof__query {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-h3);
  line-height: 1.25;
}
.geo-proof__avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  color: var(--muted);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-style: normal;
  transform: translateY(6px);
}
.geo-proof__answer {
  margin-top: var(--s-3);
  padding: var(--s-3);
  border-left: 2px solid var(--vermilion);
  background: color-mix(in srgb, var(--paper-deep) 55%, transparent);
}
.geo-proof__text { min-height: 3em; }
/* reveal-in-place typing: full text lives in the HTML; JS only uncovers it */
.geo-proof__text .geo-ch { opacity: 0; }
.geo-proof__text .geo-ch.is-typed { opacity: 1; }
.geo-proof__text.is-typing::after {
  content: "";
  display: inline-block;
  width: 2px; height: 1em;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: var(--vermilion);
  animation: caret-blink 1.1s steps(1) infinite;
}
.geo-proof__cite {
  margin-top: var(--s-2);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.geo-proof__cite span {
  display: inline-block;
  padding: 2px 8px;
  margin-left: 4px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--vermilion-text);
  text-transform: none;
  letter-spacing: 0.02em;
}
.geo-proof__note {
  margin-top: var(--s-3);
  font-size: var(--fs-small);
  color: var(--muted);
  max-width: 56ch;
}
@media (max-width: 720px) { .geo-proof { padding: var(--s-3); } }

/* ── Founder note ─────────────────────────────────────────────────────────── */
.founder-note {
  position: relative;
  padding: var(--s-5) 0 var(--s-5) var(--s-5);
  border-left: 3px solid var(--vermilion);
  margin-top: var(--s-4);
  max-width: 64ch;
}
.founder-note p {
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--ink);
  margin-bottom: var(--s-3);
}
.founder-note p:last-of-type { margin-bottom: 0; }
.founder-note__sig {
  display: block;
  margin-top: var(--s-4);
  font-style: normal;
}
.founder-note__name {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.35rem;
  color: var(--ink-blue);
  letter-spacing: 0.01em;
}
.founder-note__title {
  display: block;
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}

/* ── Brand hover tooltip (easter egg) ────────────────────────────────────── */
.brand__tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  white-space: nowrap;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--hairline);
  background: var(--surface);
  padding: 3px 8px;
  border-radius: 3px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s, transform 0.2s;
}
.brand:hover .brand__tooltip,
.brand:focus-visible .brand__tooltip { opacity: 1; transform: translateY(0); }

/* ── Plate invitation reframe ─────────────────────────────────────────────── */
.plate--reserved .plate__invitation {
  font-size: var(--fs-small);
  color: var(--vermilion-text);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: var(--s-2);
  opacity: 0.85;
  transform: translateZ(40px);
}

/* ── Footer warmth ────────────────────────────────────────────────────────── */
.colophon__warmth {
  font-size: var(--fs-small);
  color: var(--muted);
  padding-top: var(--s-3);
  margin-top: var(--s-3);
  border-top: 1px solid var(--hairline);
  max-width: 56ch;
  line-height: 1.6;
}
.colophon__warmth a { color: var(--ink-blue); }

/* ══════════════════════════════════════════════════════════════════════════════
   TRADIES PAGE — blueprint hero, stat strip, before/after, checklist, suburb map
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Hero blueprint canvas ─────────────────────────────────────────────────── */
.tradie-hero { position: relative; overflow: hidden; }
.tradie-hero .shell { position: relative; z-index: 1; }

/* ── Stats strip ────────────────────────────────────────────────────────────── */
.tradie-stats {
  border-bottom: 1px solid var(--hairline);
  background: var(--surface);
}
.stat-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.stat-item {
  padding: var(--s-4) var(--s-3);
  text-align: center;
  border-right: 1px solid var(--hairline);
}
.stat-item:last-child { border-right: none; }
.stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 4.5rem);
  color: var(--ink-blue);
  line-height: 1;
  font-style: italic;
  font-weight: 400;
  min-height: 1.1em;
}
.stat-label {
  display: block;
  font-size: var(--fs-label);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 8px;
  line-height: 1.5;
}

/* ── Before/After slider ────────────────────────────────────────────────────── */
.ba-slider {
  position: relative;
  margin-top: var(--s-4);
  border: 1px solid var(--hairline);
  border-radius: 3px;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  height: 380px;
  cursor: ew-resize;
  box-shadow: var(--lift-2);
}
.ba-panel {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.ba-panel--before { z-index: 0; background: #edecea; }
.ba-panel--after  { z-index: 1; background: var(--paper); clip-path: inset(0 0 0 50%); will-change: clip-path; }

/* mock browser chrome */
.ba-mock-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: #d2cfc9;
}
.ba-mock-bar--dark { background: #1d1c16; }
.ba-mock-dots { display: flex; gap: 4px; flex-shrink: 0; }
.ba-mock-dots span {
  width: 8px; height: 8px;
  border-radius: 50%; background: #b0aca6;
}
.ba-mock-bar--dark .ba-mock-dots span { background: #444; }
.ba-mock-url {
  flex: 1; background: rgba(255,255,255,0.55); border-radius: 10px;
  padding: 2px 10px; font-size: 0.52rem; color: #888;
  font-family: 'Inter', monospace; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ba-mock-bar--dark .ba-mock-url { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.35); }

/* BEFORE panel — generic template */
.ba-mock-nav-bar {
  background: #5e5b56;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; overflow: hidden;
}
.ba-mock-logo-before {
  font-size: 0.7rem; font-weight: 700; color: white;
  margin-right: auto; white-space: nowrap;
}
.ba-mock-nav-bar span {
  font-size: 0.48rem; color: rgba(255,255,255,0.65);
  letter-spacing: 0.04em; white-space: nowrap;
}
.ba-mock-img-placeholder {
  background: #c8c4be; display: flex;
  align-items: center; justify-content: center;
  font-size: 0.52rem; color: #999; letter-spacing: 0.05em;
  border-bottom: 1px solid #bbb;
}
.ba-mock-body-before { padding: 10px 14px 8px; }
.ba-mock-body-before h3 {
  font-size: 0.76rem; font-weight: 700; margin: 0 0 7px;
  color: #2a2825; line-height: 1.3;
}
.ba-mock-body-before p {
  font-size: 0.52rem; color: #666; line-height: 1.55; margin: 0 0 10px;
}
.ba-mock-btn-before {
  display: inline-block; background: #6a7fa0; color: white;
  font-size: 0.5rem; padding: 5px 12px; border: none; cursor: default;
  letter-spacing: 0.05em; border-radius: 2px;
}
.ba-mock-icon-row {
  display: flex; flex-wrap: wrap; gap: 5px;
  padding: 8px 14px; border-top: 1px solid #d8d4cf;
}
.ba-mock-icon-chip {
  font-size: 0.45rem; background: #e4e1dc;
  border: 1px solid #d0ccc7; border-radius: 2px;
  padding: 2px 6px; color: #888; white-space: nowrap;
}

/* AFTER panel — ProofCraft build */
.ba-mock-header-clean {
  background: var(--ink);
  display: flex; align-items: center;
  justify-content: space-between; padding: 11px 16px;
}
.ba-mock-logo-after {
  font-size: 0.72rem; font-weight: 700; color: white; letter-spacing: 0.02em;
}
.ba-mock-phone-chip {
  font-size: 0.5rem; color: white;
  background: var(--vermilion); border-radius: 2px;
  padding: 4px 8px; letter-spacing: 0.04em; font-weight: 600;
}
.ba-mock-hero-clean { padding: 14px 16px 10px; }
.ba-mock-hero-clean h3 {
  font-size: 0.92rem; font-weight: 700; color: var(--ink);
  margin: 0 0 9px; line-height: 1.25;
}
.ba-mock-hero-clean h3 em { color: var(--ink-blue); font-style: italic; }
.ba-mock-bullets { list-style: none; padding: 0; margin: 0 0 11px; }
.ba-mock-bullets li {
  font-size: 0.54rem; color: #555; padding: 2px 0;
  display: flex; align-items: flex-start; gap: 5px; line-height: 1.4;
}
.ba-mock-bullets li::before {
  content: "✓"; color: var(--vermilion-text); font-weight: 700; flex-shrink: 0;
}
.ba-mock-cta-row { display: flex; gap: 7px; }
.ba-mock-cta-primary {
  background: var(--vermilion); color: white; border: none;
  cursor: default; font-size: 0.5rem; padding: 6px 11px;
  border-radius: 2px; letter-spacing: 0.04em; font-weight: 600;
}
.ba-mock-cta-secondary {
  background: transparent; border: 1px solid var(--hairline);
  color: var(--ink); cursor: default; font-size: 0.5rem;
  padding: 6px 11px; border-radius: 2px; letter-spacing: 0.04em;
}
.ba-mock-gallery {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 4px; padding: 0 16px; margin-top: 8px;
}
.ba-mock-gallery-item {
  background: var(--hairline); aspect-ratio: 4/3; border-radius: 1px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.4rem; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase;
}
.ba-mock-location {
  font-size: 0.48rem; color: var(--muted); padding: 6px 16px;
  letter-spacing: 0.05em; border-top: 1px solid var(--hairline); margin-top: 6px;
}

/* slider handle */
.ba-slider__handle {
  position: absolute; top: 0; bottom: 0;
  left: 50%; transform: translateX(-50%);
  width: 2px; background: white;
  z-index: 10; cursor: ew-resize; pointer-events: all;
  box-shadow: 0 0 6px rgba(0,0,0,0.3);
}
.ba-slider__pill {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 38px; height: 38px; background: white;
  border-radius: 50%; box-shadow: 0 2px 12px rgba(0,0,0,0.28);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-blue);
}
.ba-slider__pill svg { display: block; }

/* side labels */
.ba-side-label {
  position: absolute; bottom: 10px;
  font-size: 0.58rem; letter-spacing: 0.09em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 2px; z-index: 2; pointer-events: none;
  font-family: var(--font-body);
}
.ba-side-label--before {
  left: 12px; background: rgba(0,0,0,0.2); color: rgba(255,255,255,0.8);
}
.ba-side-label--after {
  right: 12px; background: rgba(31,58,95,0.12); color: var(--ink-blue);
  border: 1px solid rgba(31,58,95,0.2);
}
.ba-hint {
  font-size: var(--fs-label); letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--muted); text-align: center; margin-top: var(--s-2);
}

/* ── Credibility checklist ──────────────────────────────────────────────────── */
.check-list {
  list-style: none; padding: 0;
  margin-top: var(--s-4);
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 10px var(--s-4);
  border-top: 1px solid var(--hairline); padding-top: var(--s-3);
}
.check-item {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: var(--fs-small); color: var(--muted);
  transition: color 0.4s var(--ease-out); line-height: 1.4;
}
.check-icon {
  flex-shrink: 0; width: 20px; height: 20px;
  border: 1.5px solid var(--hairline); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 1px; position: relative;
  transition: background 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
}
.check-icon::after {
  content: ""; position: absolute;
  width: 6px; height: 3.5px;
  border-left: 1.5px solid white; border-bottom: 1.5px solid white;
  transform: rotate(-45deg) translate(0.5px, -0.5px);
  opacity: 0; transition: opacity 0.2s 0.12s;
}
.check-item.is-checked { color: var(--ink); }
.check-item.is-checked .check-icon {
  background: var(--vermilion); border-color: var(--vermilion);
}
.check-item.is-checked .check-icon::after { opacity: 1; }

/* ── Sydney suburb map ──────────────────────────────────────────────────────── */
.suburb-map-wrap { margin-top: var(--s-4); }
.suburb-map {
  position: relative; width: 100%; max-width: 600px;
  height: 340px;
  background-image:
    linear-gradient(var(--hairline) 1px, transparent 1px),
    linear-gradient(90deg, var(--hairline) 1px, transparent 1px);
  background-size: 36px 36px;
  background-color: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 2px; overflow: hidden;
}
.suburb-pin {
  position: absolute; display: flex; align-items: center; gap: 5px;
  font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
  opacity: 0; transform: scale(0.75) translateY(4px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out), color 0.22s;
  white-space: nowrap; cursor: default; z-index: 1;
  font-family: var(--font-body);
}
.suburb-pin.is-revealed { opacity: 1; transform: scale(1) translateY(0); }
.suburb-pin:hover { color: var(--vermilion-text); }
.pin-dot {
  width: 6px; height: 6px; border-radius: 50%;
  border: 1.5px solid currentColor; flex-shrink: 0;
  transition: background 0.22s, transform 0.22s;
}
.suburb-pin:hover .pin-dot { background: var(--vermilion); transform: scale(1.6); }
.suburb-map__caption {
  font-size: var(--fs-label); letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--muted); margin-top: var(--s-2);
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .stat-strip { grid-template-columns: 1fr; }
  .stat-item { border-right: none; border-bottom: 1px solid var(--hairline); }
  .stat-item:last-child { border-bottom: none; }
  .check-list { grid-template-columns: 1fr; }
  .ba-slider { height: 300px; }
  .ba-mock-nav-bar span:not(.ba-mock-logo-before) { display: none; }
  .suburb-map { height: 250px; }
}


/* ── TRADIES BLUEPRINT SITE INSPECTION ───────────────────────────────────── */
.trade-workbench {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 760px;
  margin-top: var(--s-4);
}
.trade-workbench__card {
  position: relative;
  overflow: hidden;
  min-height: 116px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--ink-blue) 24%, var(--hairline));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 92%, transparent), color-mix(in srgb, var(--paper) 80%, transparent)),
    repeating-linear-gradient(0deg, transparent 0 17px, color-mix(in srgb, var(--ink-blue) 7%, transparent) 18px),
    repeating-linear-gradient(90deg, transparent 0 17px, color-mix(in srgb, var(--ink-blue) 7%, transparent) 18px);
  box-shadow: var(--lift-2);
  transform: translateY(0) rotate(var(--tilt, 0deg));
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.trade-workbench__card::before {
  content: "";
  position: absolute;
  inset: auto 16px 14px 16px;
  height: 2px;
  background: linear-gradient(90deg, var(--vermilion), transparent);
  transform: scaleX(.38);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
}
.trade-workbench__card:hover,
.trade-workbench__card.is-lifted {
  border-color: color-mix(in srgb, var(--vermilion) 44%, var(--hairline));
  transform: translateY(-6px) rotate(var(--tilt, 0deg));
}
.trade-workbench__card:hover::before,
.trade-workbench__card.is-lifted::before { transform: scaleX(1); }
.trade-workbench__card--licence { --tilt: -1.1deg; }
.trade-workbench__card--quote { --tilt: .65deg; margin-top: 22px; }
.trade-workbench__card--local { --tilt: -0.45deg; }
.trade-workbench__label {
  display: block;
  margin-bottom: 10px;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vermilion-text);
}
.trade-workbench strong {
  display: block;
  max-width: 15ch;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.7rem);
  line-height: 1.08;
  letter-spacing: -.02em;
}
.trade-inspection {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(320px, .72fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: start;
  margin-top: var(--s-5);
}
.trade-inspection__steps {
  display: grid;
  gap: 14px;
}
.trade-inspection__step {
  appearance: none;
  width: 100%;
  padding: 22px 22px 22px 74px;
  position: relative;
  text-align: left;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-1);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--lift-1);
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.trade-inspection__step span {
  position: absolute;
  left: 22px;
  top: 24px;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--muted);
}
.trade-inspection__step strong {
  display: block;
  font-size: 1rem;
  line-height: 1.25;
}
.trade-inspection__step small {
  display: block;
  margin-top: 8px;
  max-width: 42ch;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.5;
}
.trade-inspection__step.is-active {
  border-color: color-mix(in srgb, var(--vermilion) 55%, var(--hairline));
  background: color-mix(in srgb, var(--vermilion) 7%, var(--surface));
  transform: translateX(10px);
}
.trade-inspection__step.is-active span { color: var(--vermilion-text); }
.trade-phone {
  position: sticky;
  top: 112px;
  max-width: 380px;
  justify-self: center;
  width: 100%;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--ink-blue) 34%, var(--hairline));
  border-radius: 32px;
  background: linear-gradient(145deg, #111, #29261d);
  box-shadow: 0 24px 70px -32px rgba(0,0,0,.5);
}
.trade-phone__chrome {
  height: 18px;
  display: flex;
  justify-content: center;
  gap: 4px;
  align-items: center;
}
.trade-phone__chrome span {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.24);
}
.trade-phone__screen {
  min-height: 560px;
  overflow: hidden;
  border-radius: 22px;
  background:
    radial-gradient(circle at 76% 18%, color-mix(in srgb, var(--vermilion) 22%, transparent), transparent 28%),
    linear-gradient(180deg, var(--surface), var(--paper));
  border: 1px solid rgba(255,255,255,.09);
  transition: background var(--dur-slow) var(--ease-out);
}
.trade-phone__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px;
  background: var(--ink);
  color: var(--paper);
  font-size: .72rem;
}
.trade-phone__nav span {
  border: 1px solid rgba(255,255,255,.24);
  padding: 5px 8px;
  border-radius: 999px;
  color: #fff;
}
.trade-phone__hero { padding: 26px 22px 18px; }
.trade-phone__hero small {
  display: block;
  margin-bottom: 8px;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vermilion-text);
}
.trade-phone__hero strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.9rem;
  line-height: 1.04;
  letter-spacing: -.03em;
}
.trade-phone__hero p {
  margin-top: 14px;
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.55;
}
.trade-phone__proof,
.trade-phone__gallery {
  margin: 0 18px 14px;
}
.trade-phone__proof {
  display: grid;
  gap: 8px;
}
.trade-phone__proof span {
  display: block;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  font-size: .72rem;
  color: var(--ink);
}
.trade-phone__gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.trade-phone__gallery span {
  display: block;
  aspect-ratio: 1;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--ink-blue) 24%, var(--hairline)), color-mix(in srgb, var(--vermilion) 24%, var(--hairline)));
  opacity: .35;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.trade-phone__cta {
  margin: 18px;
  padding: 14px 16px;
  text-align: center;
  background: var(--vermilion);
  color: #fff;
  font-weight: 700;
  letter-spacing: .03em;
  transform: translateY(0);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.trade-phone__screen[data-phone-state="1"] .trade-phone__gallery span {
  opacity: 1;
  transform: translateY(-4px);
}
.trade-phone__screen[data-phone-state="2"] .trade-phone__cta {
  transform: translateY(-5px);
  box-shadow: 0 14px 32px -18px var(--vermilion);
}
.trade-audit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: var(--s-3);
}
.trade-audit {
  position: relative;
  padding: 22px;
  border: 1px solid var(--hairline);
  background: var(--surface);
}
.trade-audit::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--muted);
}
.trade-audit--bad::before { background: #8d8179; }
.trade-audit--good::before { background: var(--vermilion); }
.trade-audit span {
  display: block;
  margin-bottom: 12px;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.trade-audit--good span { color: var(--vermilion-text); }
.trade-audit ul { padding-left: 18px; color: var(--muted); font-size: var(--fs-small); }
.trade-audit li + li { margin-top: 6px; }
.trade-proof-archive { overflow: hidden; }
.trade-archive-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 280px);
  gap: 16px;
  margin-top: var(--s-4);
  padding: 4px 0 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-color: var(--vermilion) transparent;
}
.trade-archive-card {
  scroll-snap-align: start;
  min-height: 260px;
  padding: 22px;
  border: 1px solid color-mix(in srgb, var(--ink-blue) 18%, var(--hairline));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, transparent), var(--paper)),
    repeating-linear-gradient(0deg, transparent 0 23px, color-mix(in srgb, var(--ink-blue) 6%, transparent) 24px);
  box-shadow: var(--lift-2);
  transform: translateY(30px) rotate(-1deg);
  opacity: .45;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.trade-archive-card:nth-child(even) { transform: translateY(42px) rotate(1.1deg); }
.trade-archive-card.is-visible {
  opacity: 1;
  transform: translateY(0) rotate(0deg);
}
.trade-archive-card:hover {
  border-color: color-mix(in srgb, var(--vermilion) 42%, var(--hairline));
}
.trade-archive-card span {
  display: inline-block;
  margin-bottom: 36px;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--vermilion-text);
}
.trade-archive-card strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.55rem;
  line-height: 1.08;
  letter-spacing: -.02em;
}
.trade-archive-card p {
  margin-top: 14px;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.55;
}
.suburb-route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.suburb-route__path {
  fill: none;
  stroke: var(--vermilion);
  stroke-width: .75;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .72;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--vermilion) 34%, transparent));
}
.suburb-searches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--s-2);
}
.suburb-searches span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--muted);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  transform: translateY(8px);
  opacity: .35;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.suburb-searches span.is-visible {
  transform: translateY(0);
  opacity: 1;
  color: var(--ink);
  border-color: color-mix(in srgb, var(--vermilion) 28%, var(--hairline));
}
.trade-package-card {
  position: relative;
  max-width: 760px;
  margin-top: var(--s-4);
  padding: clamp(24px, 4vw, 38px);
  border: 1px solid color-mix(in srgb, var(--vermilion) 26%, var(--hairline));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 92%, transparent), var(--paper)),
    repeating-linear-gradient(90deg, transparent 0 31px, color-mix(in srgb, var(--ink-blue) 5%, transparent) 32px);
  box-shadow: var(--lift-2);
}
.trade-package-card::after {
  content: "FIXED QUOTE";
  position: absolute;
  right: 24px;
  top: 24px;
  transform: rotate(4deg);
  border: 2px solid var(--vermilion);
  color: var(--vermilion-text);
  padding: 8px 10px;
  font-size: var(--fs-label);
  font-weight: 800;
  letter-spacing: .16em;
  opacity: .82;
}
.trade-package-card__eyebrow {
  margin-bottom: 8px;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vermilion-text);
}
.trade-package-card h3 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1;
  letter-spacing: -.03em;
}
.trade-package-card ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
  list-style: none;
  margin-top: var(--s-3);
  padding: 0;
}
.trade-package-card li {
  position: relative;
  padding-left: 30px;
  color: var(--muted);
  transition: color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.trade-package-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .42em;
  width: 16px;
  height: 16px;
  border: 1px solid var(--hairline);
  background: transparent;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.trade-package-card li::after {
  content: "";
  position: absolute;
  left: 4px;
  top: .62em;
  width: 8px;
  height: 4px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) scale(.6);
  opacity: 0;
  transition: opacity var(--dur-fast), transform var(--dur-base) var(--ease-out);
}
.trade-package-card li.is-stamped {
  color: var(--ink);
  transform: translateX(4px);
}
.trade-package-card li.is-stamped::before {
  background: var(--vermilion);
  border-color: var(--vermilion);
}
.trade-package-card li.is-stamped::after {
  opacity: 1;
  transform: rotate(-45deg) scale(1);
}
.signoff__proofline {
  margin-top: var(--s-2);
  color: color-mix(in srgb, #fff 78%, var(--paper));
  font-size: clamp(1rem, 2vw, 1.35rem);
  letter-spacing: .02em;
}
.signoff__proofline .kinetic-word {
  display: inline-block;
  opacity: .35;
  transform: translateY(12px) rotateX(45deg);
  transform-origin: 50% 100%;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.signoff__proofline .kinetic-word.is-visible {
  opacity: 1;
  transform: translateY(0) rotateX(0deg);
}
@media (max-width: 860px) {
  .trade-workbench { grid-template-columns: 1fr; max-width: 520px; }
  .trade-workbench__card--quote { margin-top: 0; }
  .trade-inspection { grid-template-columns: 1fr; }
  .trade-phone { position: relative; top: auto; }
  .trade-audit-grid { grid-template-columns: 1fr; }
  .trade-package-card ul { grid-template-columns: 1fr; }
  .trade-package-card::after { position: static; display: inline-block; margin-top: var(--s-3); }
}
@media (max-width: 640px) {
  .trade-inspection__step { padding-left: 58px; }
  .trade-inspection__step span { left: 18px; }
  .trade-phone__screen { min-height: 500px; }
  .trade-archive-track { grid-auto-columns: minmax(220px, 82vw); }
}
@media (prefers-reduced-motion: reduce) {
  .trade-workbench__card,
  .trade-inspection__step,
  .trade-archive-card,
  .suburb-searches span,
  .trade-package-card li,
  .signoff__proofline .kinetic-word {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
  .trade-archive-card,
  .suburb-searches span,
  .signoff__proofline .kinetic-word { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HEALTH CLINICS PAGE — EKG hero, trust journey, flip cards, booking strip,
   specialty finder
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Clinic hero ─────────────────────────────────────────────────────────── */
.clinic-hero { position: relative; overflow: hidden; }
.clinic-hero .shell { position: relative; z-index: 1; }

/* ── Patient trust journey ──────────────────────────────────────────────── */
.trust-journey { margin-top: var(--s-4); overflow-x: auto; padding-bottom: var(--s-2); }
.journey-steps { display: flex; align-items: flex-start; min-width: 520px; }
.journey-step { flex: 0 0 auto; width: 110px; text-align: center; }
.journey-node {
  width: 48px; height: 48px; border-radius: 50%;
  border: 1.5px solid var(--hairline);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--s-2); color: var(--muted);
  transition: border-color 0.4s var(--ease-out), background 0.4s var(--ease-out), color 0.4s var(--ease-out);
}
.journey-icon { width: 20px; height: 20px; }
.journey-step.is-active .journey-node { border-color: var(--ink-blue); background: var(--ink-blue); color: #fff; }
.journey-step__title {
  display: block; font-size: var(--fs-small); font-weight: 600;
  color: var(--muted); line-height: 1.3;
  transition: color 0.4s var(--ease-out);
}
.journey-step.is-active .journey-step__title { color: var(--ink); }
.journey-step__sub { display: block; font-size: 0.62rem; color: var(--muted); margin-top: 3px; line-height: 1.4; }
.journey-connector {
  flex: 1; height: 1.5px; background: var(--hairline);
  margin-top: 23px; position: relative; min-width: 16px; overflow: hidden;
}
.journey-connector::after {
  content: ''; position: absolute; inset: 0;
  background: var(--ink-blue); transform: scaleX(0); transform-origin: left;
  transition: transform 0.42s var(--ease-out);
}
.journey-connector.is-active::after { transform: scaleX(1); }
.trust-journey__caption {
  font-size: var(--fs-label); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); margin-top: var(--s-3);
}

/* ── Practitioner flip cards ─────────────────────────────────────────────── */
.prac-cards-label {
  font-size: var(--fs-label); letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--muted); margin-top: var(--s-5); margin-bottom: var(--s-3);
  padding-top: var(--s-4); border-top: 1px solid var(--hairline);
}
.prac-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.prac-card { perspective: 900px; min-height: 230px; cursor: pointer; }
.prac-card__inner {
  position: relative; height: 230px;
  transform-style: preserve-3d;
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) {
  .prac-card:hover .prac-card__inner { transform: rotateY(180deg); }
}
.prac-card.is-flipped .prac-card__inner { transform: rotateY(180deg); }
.prac-card__front, .prac-card__back {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border: 1px solid var(--hairline); border-radius: 3px;
  padding: var(--s-4) var(--s-3);
  display: flex; flex-direction: column; align-items: flex-start;
}
.prac-card__front { background: var(--surface); }
.prac-card__back {
  background: var(--ink-blue); color: #fff;
  transform: rotateY(180deg); justify-content: center;
}
.prac-avatar {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--av-bg, rgba(31,58,95,0.1));
  color: var(--av-fg, var(--ink-blue));
  font-family: var(--font-display); font-style: italic; font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--s-2); flex-shrink: 0;
}
.prac-name { font-size: var(--fs-body); font-weight: 600; color: var(--ink); line-height: 1.2; margin-bottom: 3px; }
.prac-specialty {
  font-size: var(--fs-label); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); margin-bottom: var(--s-3);
}
.prac-flip-hint { font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-top: auto; }
.prac-back-cred { font-size: var(--fs-label); letter-spacing: 0.07em; color: rgba(255,255,255,0.6); margin-bottom: var(--s-3); }
.prac-back-focus { font-size: var(--fs-small); color: rgba(255,255,255,0.9); line-height: 1.55; margin-bottom: var(--s-3); }
.prac-back-lang { font-size: 0.6rem; letter-spacing: 0.07em; text-transform: uppercase; color: rgba(255,255,255,0.45); }
.prac-disclaimer { font-size: var(--fs-label); color: var(--muted); margin-top: var(--s-3); font-style: italic; }

/* ── Booking compatibility strip ─────────────────────────────────────────── */
.booking-compat { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--hairline); }
.booking-compat__label {
  font-size: var(--fs-label); letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--muted); margin-bottom: var(--s-3);
}
.booking-rail {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}
.booking-ticker { display: flex; animation: bookingScroll 28s linear infinite; }
.booking-ticker:hover { animation-play-state: paused; }
.booking-track { display: flex; gap: 10px; padding-right: 10px; flex-shrink: 0; }
.booking-chip {
  display: inline-flex; align-items: center;
  padding: 5px 14px;
  background: var(--paper); border: 1px solid var(--hairline); border-radius: 20px;
  font-size: var(--fs-label); letter-spacing: 0.06em; color: var(--muted);
  white-space: nowrap; user-select: none;
}
@keyframes bookingScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) { .booking-ticker { animation: none; } }

/* ── Specialty finder ─────────────────────────────────────────────────────── */
.specialty-finder { margin-top: var(--s-4); }
.specialty-finder__label {
  font-size: var(--fs-label); letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--muted); margin-bottom: var(--s-2);
}
.specialty-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.spec-tag {
  padding: 6px 16px; border: 1.5px solid var(--hairline); border-radius: 20px;
  background: transparent; font-family: var(--font-body); font-size: var(--fs-small);
  color: var(--muted); cursor: pointer; line-height: 1;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.spec-tag:hover { border-color: var(--ink-blue); color: var(--ink-blue); }
.spec-tag:focus-visible { outline: 2px solid var(--ink-blue); outline-offset: 2px; }
.spec-tag.is-active { background: var(--ink-blue); border-color: var(--ink-blue); color: #fff; }
.spec-detail { overflow: hidden; max-height: 0; transition: max-height 0.5s var(--ease-out); }
.spec-detail.is-open { max-height: 500px; }
.spec-detail__pad {
  padding: var(--s-4); background: var(--surface);
  border: 1px solid var(--hairline); border-radius: 2px; margin-top: var(--s-3);
}
.spec-detail__title { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--ink); margin-bottom: var(--s-3); }
.spec-detail__list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--hairline); }
.spec-detail__list li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: var(--s-2) 0; border-bottom: 1px solid var(--hairline);
  font-size: var(--fs-small); color: var(--ink); line-height: 1.55;
}
.spec-detail__list li::before { content: "→"; color: var(--vermilion-text); flex-shrink: 0; margin-top: 1px; }
.spec-detail__note {
  font-size: var(--fs-small); color: var(--muted); margin-top: var(--s-3);
  font-style: italic; padding-top: var(--s-3); border-top: 1px solid var(--hairline);
  line-height: 1.6;
}

/* ── Health page responsive ──────────────────────────────────────────────── */
@media (max-width: 640px) {
  .prac-cards { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CAFÉS & RESTAURANTS PAGE — steam canvas, hours widget, menu reveal,
   food platform strip, food photo grid
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Café hero ───────────────────────────────────────────────────────────── */
.cafe-hero { position: relative; overflow: hidden; }
.cafe-hero .shell { position: relative; z-index: 1; }

/* ── Live hours widget ───────────────────────────────────────────────────── */
.hours-widget {
  margin-top: var(--s-4); max-width: 460px;
  border: 1px solid var(--hairline); border-radius: 3px; overflow: hidden;
}
.hours-widget__status {
  display: flex; align-items: center; gap: 10px;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--hairline);
  background: var(--surface);
}
.hours-status-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--hairline); flex-shrink: 0;
  transition: background 0.3s, box-shadow 0.3s;
}
.hours-status-dot.is-open {
  background: #3CB870;
  box-shadow: 0 0 0 3px rgba(60,184,112,0.22);
}
.hours-status-dot.is-closed { background: var(--muted); }
.hours-status-text { font-size: var(--fs-small); color: var(--ink); font-weight: 500; }
.hours-grid { padding: var(--s-3) var(--s-4) var(--s-2); }
.hours-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 5px 0; border-bottom: 1px solid var(--hairline);
  font-size: var(--fs-small); color: var(--muted);
}
.hours-row:last-child { border-bottom: none; }
.hours-row.is-today { color: var(--ink); }
.hours-row.is-today .hours-day { font-weight: 600; }
.hours-row.is-today .hours-day::after {
  content: ' · Today';
  font-size: 0.62rem; font-weight: 400; color: var(--muted); letter-spacing: 0.04em;
}
.hours-time { font-variant-numeric: tabular-nums; }
.hours-note {
  padding: 0 var(--s-4) var(--s-2);
  font-size: 0.62rem; letter-spacing: 0.04em; color: var(--muted);
}
.hours-disclaimer {
  padding: var(--s-2) var(--s-4) var(--s-3);
  border-top: 1px solid var(--hairline);
  font-size: var(--fs-label); color: var(--muted); font-style: italic;
}

/* ── Sample menu reveal ──────────────────────────────────────────────────── */
.menu-preview {
  margin-top: var(--s-4);
  border: 1px solid var(--hairline); border-radius: 3px; overflow: hidden;
  max-width: 560px;
}
.menu-preview__header {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--hairline);
  background: var(--surface);
}
.menu-preview__venue {
  font-family: var(--font-display); font-style: italic;
  font-size: var(--fs-h3); color: var(--ink);
}
.menu-preview__tag {
  font-size: var(--fs-label); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
}
.menu-section {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--hairline);
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.menu-section:last-child { border-bottom: none; }
.menu-section.is-revealed { opacity: 1; transform: translateY(0); }
.menu-section__title {
  font-family: var(--font-display); font-style: italic;
  font-size: 1rem; color: var(--vermilion-text);
  margin-bottom: var(--s-2); letter-spacing: 0.01em;
}
.menu-list { list-style: none; padding: 0; margin: 0; }
.menu-item {
  display: flex; align-items: flex-end; gap: 6px;
  padding: 6px 0; border-bottom: 1px solid var(--hairline);
}
.menu-item:last-child { border-bottom: none; }
.menu-item__info { flex: none; }
.menu-item__name { font-size: var(--fs-small); color: var(--ink); line-height: 1.3; }
.menu-item__desc { font-size: 0.62rem; color: var(--muted); display: block; margin-top: 2px; font-style: italic; line-height: 1.35; }
.menu-item__dots {
  flex: 1; align-self: flex-end;
  border-bottom: 1.5px dotted var(--hairline);
  min-width: 16px; margin-bottom: 4px;
}
.menu-item__price {
  flex: none; font-size: var(--fs-small); color: var(--ink);
  font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.menu-preview__disclaimer {
  font-size: var(--fs-label); color: var(--muted); margin-top: var(--s-3);
  font-style: italic;
}

/* ── Food & ordering platform strip ─────────────────────────────────────── */
.food-strip { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--hairline); }
.food-strip__label {
  font-size: var(--fs-label); letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--muted); margin-bottom: var(--s-3);
}
.food-strip-rail {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}
.food-strip-ticker { display: flex; animation: foodScroll 26s linear infinite; }
.food-strip-ticker:hover { animation-play-state: paused; }
.food-strip-track { display: flex; gap: 10px; padding-right: 10px; flex-shrink: 0; }
.food-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 14px;
  background: var(--paper); border: 1px solid var(--hairline); border-radius: 20px;
  font-size: var(--fs-label); letter-spacing: 0.05em; color: var(--muted);
  white-space: nowrap; user-select: none;
}
.food-chip-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.35; flex-shrink: 0; }
@keyframes foodScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) { .food-strip-ticker { animation: none; } }

/* ── Food photography grid ───────────────────────────────────────────────── */
.food-grid-wrap { margin-top: var(--s-4); }
.food-grid-label {
  font-size: var(--fs-label); letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--muted); margin-bottom: var(--s-2);
}
.food-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  grid-template-rows: 148px 148px;
  gap: 5px; border-radius: 3px; overflow: hidden;
}
.food-cell {
  position: relative;
  background: linear-gradient(145deg, var(--ca, #333), var(--cb, #111));
  opacity: 0; transform: scale(0.96);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out), filter 0.3s;
}
.food-cell--tall { grid-row: span 2; }
.food-cell.is-revealed { opacity: 1; transform: scale(1); }
.food-cell::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(255,255,255,0.06);
  opacity: 0; transition: opacity 0.25s;
}
.food-cell:hover::after { opacity: 1; }
.food-grid__caption {
  font-size: var(--fs-label); color: var(--muted); margin-top: var(--s-2);
  font-style: italic;
}

/* ── Café page responsive ────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .hours-widget { max-width: 100%; }
  .menu-preview { max-width: 100%; }
  .food-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 120px 120px 120px; }
  .food-cell--tall { grid-row: span 1; }
}

/* PROFESSIONAL SERVICES PAGE */
.prof-hero { position: relative; overflow: hidden; }
.prof-hero .shell { position: relative; z-index: 1; }

/* Trust signal mosaic */
.trust-mosaic { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); margin-top: var(--s-5); }
.trust-tile {
  border: 1px solid var(--hairline);
  border-radius: 3px;
  padding: var(--s-4) var(--s-3);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.trust-tile.is-revealed { opacity: 1; transform: translateY(0); }
.trust-tile__icon { width: 30px; height: 30px; color: var(--ink-blue); margin-bottom: var(--s-2); }
.trust-tile__label { display: block; font-size: var(--fs-small); font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.trust-tile__note { display: block; font-size: 0.68rem; color: var(--muted); line-height: 1.55; }
@media (max-width: 640px) { .trust-mosaic { grid-template-columns: 1fr 1fr; } }

/* Engagement timeline */
.eng-timeline { margin-top: var(--s-5); }
.eng-stages {
  display: flex;
  align-items: center;
  overflow-x: auto;
  padding-bottom: var(--s-2);
  -webkit-overflow-scrolling: touch;
}
.eng-stage {
  flex-shrink: 0;
  background: none;
  border: 1.5px solid var(--hairline);
  border-radius: 20px;
  padding: 6px 18px;
  font-size: var(--fs-small);
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.25s, color 0.25s, background 0.25s;
  white-space: nowrap;
}
.eng-stage.is-active { border-color: var(--ink-blue); background: var(--ink-blue); color: #fff; }
.eng-stage:hover:not(.is-active) { border-color: var(--ink); color: var(--ink); }
.eng-connector { flex: 1; height: 1px; background: var(--hairline); min-width: 12px; }
.eng-detail {
  margin-top: var(--s-4);
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  font-size: var(--fs-small);
  color: var(--muted);
  line-height: 1.75;
  min-height: 4.5em;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.eng-detail.is-visible { opacity: 1; transform: translateY(0); }

/* Practice area switcher */
.pa-switcher { margin-top: var(--s-5); }
.pa-tabs { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.pa-tab {
  background: none;
  border: 1.5px solid var(--hairline);
  border-radius: 20px;
  padding: 7px 20px;
  font-size: var(--fs-small);
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.25s, color 0.25s, background 0.25s;
  white-space: nowrap;
}
.pa-tab.is-active { border-color: var(--ink-blue); background: var(--ink-blue); color: #fff; }
.pa-tab:hover:not(.is-active) { border-color: var(--ink); color: var(--ink); }
.pa-panel { margin-top: var(--s-3); padding: var(--s-4); background: var(--surface); border: 1px solid var(--hairline); border-radius: 2px; }
.pa-areas { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-3); opacity: 0; transition: opacity 0.3s var(--ease-out); }
.pa-areas.is-visible { opacity: 1; }
.pa-area-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 20px;
  font-size: var(--fs-label);
  color: var(--ink);
  white-space: nowrap;
}
.pa-area-tag::before { content: "→"; color: var(--vermilion-text); font-size: 0.75em; }
.pa-note { font-size: var(--fs-small); color: var(--muted); line-height: 1.7; font-style: italic; opacity: 0; transition: opacity 0.3s var(--ease-out) 0.1s; }
.pa-note.is-visible { opacity: 1; }

/* Professional body marquee */
.pb-strip { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--hairline); }
.pb-strip__label { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: var(--s-3); }
.pb-rail { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent); mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent); }
.pb-ticker { display: flex; animation: pbScroll 32s linear infinite; }
.pb-ticker:hover { animation-play-state: paused; }
.pb-track { display: flex; gap: 10px; padding-right: 10px; flex-shrink: 0; }
.pb-chip { display: inline-flex; align-items: center; padding: 5px 14px; background: var(--paper); border: 1px solid var(--hairline); border-radius: 20px; font-size: var(--fs-label); color: var(--muted); white-space: nowrap; user-select: none; }
@keyframes pbScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .pb-ticker { animation: none; } }

/* CIRCULAR GALLERY */
.circular-gallery-section { margin-block: var(--s-7); }
.circular-gallery-section .section-label { padding-inline: var(--s-4); margin-bottom: var(--s-3); }
.circular-gallery {
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: grab;
  outline: none;
}
.circular-gallery:active { cursor: grabbing; }
.circular-gallery:focus-visible { outline: 2px solid var(--vermilion); outline-offset: 4px; }

/* Print — clean ledger document */
@media print {
  .nav, .cursor, .cursor-ring, .mobile-cta, .hero__canvas, .hero__scroll, .theme-toggle { display: none !important; }
  html.js .reveal, html.js .reveal-stagger > * { opacity: 1 !important; transform: none !important; }
  body { background: #fff; color: #000; }
}

/* ── Page Transitions Overlay & Elements ────────────────────────────────── */
/* PAGE TRANSITIONS — pixel grid overlay (PixelTransition pattern) */
.pt-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  display: grid;
  grid-template-columns: repeat(var(--pt-cols, 9), 1fr);
  opacity: 0;
}
.pt-overlay > div {
  /* hardcoded so it stays ink-dark regardless of the site's theme toggle */
  background: #16150F;
}


/* =============================================================================
   16. MOVEMENTS — the recomposed volume
   -----------------------------------------------------------------------------
   Everything above this line styles components. This section stages them.

   The site's structural failure was that all 123 sections sat in the same
   1300px column with the same 120px of breath, so nothing could be emphasised
   and every page read at one volume. These rules give a section a spatial
   argument: how wide it sits, how much air it owns, and which stock it is
   printed on. Pace is now authored.
   ========================================================================== */

/* ── I. The cold open ──────────────────────────────────────────────────────
   The hero block sits LOW and LEFT, so the upper two-thirds of the viewport
   is empty ink for the field to breathe in. Asymmetry is the whole point —
   the old hero was vertically centred and horizontally full, which is the
   most neutral position a composition can take. */
.hero--cold { align-items: end; padding-bottom: clamp(var(--s-5), 11vh, var(--s-7)); }
.hero--cold .hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--s-3);
}
.hero--cold .hero__title {
  font-size: var(--fs-hero);
  line-height: 0.86;
  letter-spacing: var(--track-display);
  font-variation-settings: var(--wonk-on);
  max-width: 13ch;
}
.hero--cold .hero__sub {
  max-width: 42ch;
  font-size: var(--fs-lead);
  color: var(--muted);
}
.hero--cold .hero__actions { margin-top: var(--s-4); }

/* A hairline rule enters from the page edge and stops at the headline —
   the first mark the pen makes on the volume. */
.hero--cold .hero__rule {
  position: absolute;
  left: 0;
  top: 34%;
  height: 1px;
  width: clamp(80px, 12vw, 220px);
  background: var(--vermilion);
  transform-origin: left;
  transform: scaleX(0);
  animation: hero-rule 1100ms var(--ease-ink) 260ms forwards;
}
@keyframes hero-rule { to { transform: scaleX(1); } }

/* ── II. Statements ────────────────────────────────────────────────────────
   One sentence, one viewport, nothing else. The single most effective and
   least used move available to this site. */
.movement__statement { font-size: var(--fs-display); }
.movement__statement .hl,
.movement__statement mark { background: none; color: var(--ink-blue); }

/* A statement's supporting line hangs beneath it, small and quiet, so the
   scale contrast does the work. */
.movement__aside {
  margin-top: var(--s-4);
  max-width: 44ch;
  color: var(--muted);
  font-size: var(--fs-small);
}

/* ── III. The proof sheet ──────────────────────────────────────────────────
   The three real sample builds are the only honest flagship evidence the
   studio has, and they were 240px cards in a two-column grid. Here they are
   full-bleed specimens on their own stock. */
.proof-sheet {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(var(--s-2), 1.6vw, var(--s-4));
  padding-inline: var(--gutter);
}
.proof-sheet .plate { min-height: clamp(320px, 42vh, 520px); }
.proof-sheet .plate__frame { aspect-ratio: 16 / 11; }

/* ── IV. The reckoning ─────────────────────────────────────────────────────
   The pricing chapter break. Reversed stock, so it lands as a chapter and not
   as another row. Sits between two paper movements for maximum contrast. */
[data-spread="interlude"] .movement__inner { width: 100%; }
.reckoning__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--hairline);
}

/* ── V. The record ─────────────────────────────────────────────────────────
   Care plans, FAQ, the GEO panel and the reserved testimonial are REFERENCE
   material. Giving them the same weight as the pitch is what flattened the
   page. They keep every word (SEO/GEO intact) but read as a dense appendix. */
[data-spread="tabular"] .entry { padding-block: var(--rhythm-tight); }
[data-spread="tabular"] .lead { font-size: var(--fs-body); }
.record__head {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-3);
  border-bottom: 1px solid var(--ink);
}
.record__head h2 { font-size: var(--fs-h3); letter-spacing: var(--track-title); }

/* ── Marginalia column ─────────────────────────────────────────────────────
   The margin spread's right-hand track: notes set small and quiet, the way an
   editor annotates a proof. */
.marginalia-col {
  font-size: var(--fs-small);
  color: var(--muted);
  border-left: 1px solid var(--hairline);
  padding-left: var(--s-3);
}
.marginalia-col p + p { margin-top: var(--s-2); }
@media (max-width: 900px) {
  .marginalia-col { border-left: 0; border-top: 1px solid var(--hairline); padding-left: 0; padding-top: var(--s-3); }
  .proof-sheet { padding-inline: var(--s-2); }
}

/* ── Reduced motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero--cold .hero__rule { animation: none; transform: scaleX(1); }
}

/* ── Breaking the measure from inside the ledger ───────────────────────────
   The ledger's spine must stay continuous — the Ink Thread draws down it and
   every entry stamp hangs off it — so entries break out rather than the
   column being abandoned. A plain .bleed lands 42px off here, because its
   50% resolves against the ledger's content box, which is inset by the
   margin column. Correct by half the margin width. */
.ledger > .bleed,
.ledger > .entry[data-spread="bleed"],
.ledger > .entry[data-spread="interlude"] {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw - var(--margin-w) / 2);
  margin-right: 0;
}
/* Bled entries carry their own inner column so the text still reads at measure. */
.ledger > .entry[data-spread="bleed"] > .shell,
.ledger > .entry[data-spread="interlude"] > .shell { position: relative; }

/* A statement entry drops the ruled underline — it is a breath, not a row. */
.ledger > .entry[data-spread="statement"] { box-shadow: none; }

/* The interlude is a chapter break: reversed stock edge to edge. */
.ledger > .entry[data-spread="interlude"] {
  background: var(--paper);
  color: var(--ink);
  box-shadow: none;
}

/* Movement numerals — the folio mark for a section that has left the column,
   where .entry__num's margin-hung absolute position no longer applies. */
[data-spread="bleed"] > .shell > .movement__num,
[data-spread="interlude"] > .shell > .movement__num {
  display: block;
  margin-bottom: var(--s-3);
  color: var(--muted);
}

/* ── Bleed corrections ─────────────────────────────────────────────────────
   1. The entry numeral hangs in the ledger margin by absolute position. Inside
      a full-bleed section it has no width constraint and stretched to 1939px,
      which was the site's horizontal overflow. In a bled section it joins the
      flow instead.
   2. 100vw includes the scrollbar, so every bleed sat ~7px left of true and
      pushed ~8px past the right edge. --sbw is measured once in JS; the
      fallback of 0px means this degrades to the old behaviour, not to broken. */
.ledger > .entry[data-spread="bleed"] .entry__num,
.ledger > .entry[data-spread="interlude"] .entry__num,
.ledger > .entry[data-spread="bleed"] .entry__ghost,
.ledger > .entry[data-spread="interlude"] .entry__ghost {
  position: static;
  display: block;
  width: auto;
  transform: none;
  margin-bottom: var(--s-2);
}
.ledger > .entry[data-spread="bleed"] .entry__ghost,
.ledger > .entry[data-spread="interlude"] .entry__ghost { display: none; }

.bleed,
.ledger > .bleed,
.ledger > .entry[data-spread="bleed"],
.ledger > .entry[data-spread="interlude"] {
  width: calc(100vw - var(--sbw, 0px));
  max-width: calc(100vw - var(--sbw, 0px));
}
.ledger > .bleed,
.ledger > .entry[data-spread="bleed"],
.ledger > .entry[data-spread="interlude"] {
  margin-left: calc(50% - (100vw - var(--sbw, 0px)) / 2 - var(--margin-w) / 2);
}
.bleed { margin-inline: calc(50% - (100vw - var(--sbw, 0px)) / 2); }

/* ── Overflow containment ──────────────────────────────────────────────────
   Reveal animations park elements at scale(1.6)/translateX before they enter.
   That was harmless when every .entry__num was a 17px absolutely-positioned
   span; inside a grid or flex context the span becomes a stretched item and
   1.6x of a 1300px column is 2080px of phantom width, which is what put a
   horizontal scrollbar on the page at rest.

   `overflow-x: clip` (not hidden) contains it WITHOUT creating a scroll
   container, so the sticky titles in the split spreads keep working —
   `hidden` would silently break them. */
html { overflow-x: clip; }
body { overflow-x: clip; }

/* And stop the numeral stretching in the first place, so the transform has
   something sane to scale. */
.entry__num { width: max-content; justify-self: start; }

/* ── Contact hand-off ──────────────────────────────────────────────────────
   The form fires a mailto, which silently does nothing for anyone on webmail
   with no registered handler. It used to claim "your email app just opened"
   regardless. It now hands the composed enquiry back so the visitor can always
   complete it themselves — these are the classes main.js injects. */
.form__handoff {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--hairline);
}
.form__handoff-title {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s-1);
}
.form__handoff-address { font-size: var(--fs-lead); margin-bottom: var(--s-2); }
.form__handoff-text {
  width: 100%;
  padding: var(--s-2);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper-deep);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-1);
  resize: vertical;
}
.form__handoff-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-2);
}
.form__handoff-copy.is-copied {
  border-color: var(--vermilion);
  color: var(--vermilion-text);
}
.form__handoff-status {
  font-size: var(--fs-small);
  color: var(--muted);
  min-height: 1.4em;
}

/* The toggle reads best as a 38px disc, but 38px is under the minimum touch
   target. Extend the hit area to 44x44 invisibly rather than inflating the mark. */
.theme-toggle::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
}

/* =============================================================================
   17. COMPOSITION REFINEMENTS
   Requested by the page-composition pass rather than hacked in with style=""
   attributes. Each one closes a real gap in the system above.
   ========================================================================== */

/* A statement carries emphasis inside it — .statement em already takes the
   accent; <strong> at display scale in Fraunces 360 renders as a heavy blob
   that fights the line instead of pointing inside it. */
.statement strong { font-weight: inherit; color: var(--ink-blue); }

/* Nothing on the site sets block margins (`* { margin: 0 }`), so a statement
   collided with anything after it that did not self-space. The system silently
   assumed the next element was always .movement__aside or .pull-note. */
.statement + p:not([class]),
.label + .statement { margin-top: var(--s-4); }

/* A statement's supporting list must stay subordinate to the statement — at
   full column width inside a centred viewport it out-measured the line above. */
[data-spread="statement"] .props { max-width: 62ch; margin-top: var(--s-5); }

/* Marginalia should track the passage it annotates, not scroll away from it. */
@media (min-width: 901px) {
  [data-spread="margin"] > .movement__inner > .marginalia-col {
    position: sticky;
    top: clamp(96px, 18vh, 200px);
    padding-top: var(--s-2);
  }
}
@media (max-width: 900px) {
  [data-spread="margin"] > .movement__inner > .marginalia-col { position: static; }
}
.marginalia-col p strong {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: var(--s-2);
}

.record__head { flex-wrap: wrap; row-gap: var(--s-2); }

/* Text-only specimens on the proof sheet. .proof-sheet .plate is sized for the
   homepage's live iframes (16/11); a card holding a code, a title and one line
   of meta is mostly dead space at 42vh. */
.proof-sheet--text .plate { min-height: clamp(240px, 26vh, 340px); }

/* Prose subheads. Scoped with :not([class]) — .entry h3 unqualified would also
   capture .step__title, .plate__title, .pkg__name and .plan__name, which are
   component headings with their own type, and would have resized four
   components across the site as a side effect of styling body copy. */
.entry h3:not([class]) {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.15;
  letter-spacing: var(--track-title);
  margin-top: var(--s-5);
}
.entry h3:not([class]) + p { margin-top: var(--s-2); }

/* .prop is a hard 1fr/1fr row. Inside a split or margin spread the right track
   is a fraction of the column, so between 900px and ~1180px each half drops
   under 220px and the claim wraps to three lines. Collapse it earlier there. */
@media (max-width: 1180px) {
  [data-spread="split"] .prop,
  [data-spread="margin"] .prop {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-2);
  }
}