/* ============================================================
   site.css — SHARED ACROSS EVERY ROUTE
   Design tokens, base type, buttons, forms, tables, masthead,
   motion, and the 2026 progressive-enhancement layer.
   Change a value here and every page follows. Do not add
   page-specific layout to this file.
   ============================================================ */
/* ============================================================
   PALETTE F — provisional tokens
   Drawn from the working documents of a Jamaican business:
   ballpoint navy, manila folder, carbon-copy grey, ledger green,
   rubber date-stamp red. REPLACE with the values from styles.css
   when the design-system bundle is available.
   ============================================================ */
/* Cascade order. Declared first so precedence is explicit:
   base (this file) < route (home.css et al) < enhancements.
   Without this, unlayered rules outrank every layered rule regardless of
   specificity, which silently disabled the container query, the invalid-field
   border and the .rise transition override. */
@layer base, route, enhancements;

@layer base {
:root{
  --ink:#16223A;
  --ink-soft:#2C3A56;
  --carbon:#5A6274;   /* darkened from #6E7788: that value measured 4.14:1 on --paper
                         and 3.80:1 on --paper-warm across 51 text instances (labels,
                         captions, thead, stat/verb numerals, sources, footer).
                         #5A6274 = 5.62 / 5.15. PROVISIONAL — re-check at token swap. */
  --manila:#E4D8BE;
  --manila-deep:#CDBE9B;
  --paper:#F8F5EF;
  --paper-warm:#F1EBDF;
  --ledger:#1E5B49;
  --ledger-tint:#DDE9E3;
  --stamp:#A6323C;
  --jaffa:#F28B30;    /* NoDrftSystems brand accent. DARK GROUNDS ONLY — the mirror of
                         the --carbon rule. Measured against this palette: 2.27:1 on
                         --paper and 2.08:1 on --paper-warm, which fails AA at every
                         size, against 6.43:1 on --ink. The masthead and footer sit on
                         paper, so the wordmark renders in --ink there and the mark
                         image carries the brand colour instead. Using this as text on
                         a light ground is a bug. VDA: the accent cannot appear in the
                         wordmark on this palette without darkening it or moving the
                         bar onto a dark ground. */
  --rule:#D6CBB4;

  --display:'Archivo', system-ui, sans-serif;
  --body:'Source Serif 4', Georgia, serif;
  --mono:'IBM Plex Mono', ui-monospace, monospace;

  --measure:68ch;
  --gutter:clamp(1.25rem, 5vw, 4rem);
  --stack:clamp(3.5rem, 8vw, 7rem);
}

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

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:6rem}
@media (max-width:760px){html{scroll-padding-top:8rem}}

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

body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:clamp(1.02rem,0.98rem + 0.2vw,1.16rem);line-height:1.62;font-optical-sizing:auto}

img{max-width:100%;display:block}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);
  padding:.7rem 1.1rem;font-family:var(--mono);font-size:.75rem;z-index:100}

.skip:focus{left:0}

.wrap{max-width:78rem;margin:0 auto;padding-inline:var(--gutter)}

.col{max-width:var(--measure)}

.band{padding-block:var(--stack)}

.band--dark{background:var(--ink);color:var(--paper)}

.band--manila{background:var(--paper-warm)}

.band + .band{border-top:1px solid var(--rule)}

.band + .band--dark{border-top-color:rgba(248,245,239,.16)}

h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-.021em;line-height:1.08;margin:0}

h1{font-size:clamp(2.3rem,1.4rem + 3.9vw,4.15rem);line-height:1.03;letter-spacing:-.032em}

h2{font-size:clamp(1.72rem,1.25rem + 1.9vw,2.7rem)}

h3{font-size:clamp(1.24rem,1.1rem + .7vw,1.62rem);letter-spacing:-.014em}

p{margin:0 0 1.05em}

strong{font-weight:600}

a{color:inherit}

.label{font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.19em;
  text-transform:uppercase;color:var(--carbon);display:inline-flex;align-items:center;
  gap:.6rem;margin-bottom:1.5rem}

.label::before{content:"";width:1.6rem;height:1px;background:var(--manila-deep)}

.band--dark .label{color:var(--manila-deep)}

.band--dark .label::before{background:rgba(228,216,190,.4)}

.lede{font-size:clamp(1.16rem,1.05rem + .5vw,1.42rem);line-height:1.5;color:var(--ink-soft)}

.band--dark .lede{color:var(--manila)}

/* SIGNATURE — the five-state method strip */
.strip{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--rule);background:var(--paper);
  font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase}

.strip span{flex:1 1 6.5rem;padding:.72rem .5rem;text-align:center;color:var(--ink);
  border-right:1px solid var(--rule);position:relative}

.strip span:last-child{border-right:0}

.strip span::before{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--ledger);transform:scaleX(0);transform-origin:left;
  transition:transform .5s cubic-bezier(.22,1,.36,1)}

.strip[data-lit] span::before{transform:scaleX(1)}

.strip[data-lit] span:nth-child(1)::before{transition-delay:.05s}

.strip[data-lit] span:nth-child(2)::before{transition-delay:.15s}

.strip[data-lit] span:nth-child(3)::before{transition-delay:.25s}

.strip[data-lit] span:nth-child(4)::before{transition-delay:.35s}

.strip[data-lit] span:nth-child(5)::before{transition-delay:.45s}

.band--dark .strip{background:transparent;border-color:rgba(228,216,190,.32)}

.band--dark .strip span{color:var(--paper);border-right-color:rgba(228,216,190,.32)}

.masthead{border-bottom:1px solid var(--rule);padding-block:1.1rem;position:sticky;top:0;z-index:20;
  background:color-mix(in srgb, var(--paper) 92%, transparent);backdrop-filter:blur(8px)}

.masthead .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem}

.mark{display:inline-flex;align-items:center;gap:.65rem;font-family:var(--mono);
  font-size:.9rem;font-weight:600;letter-spacing:.115em;text-transform:uppercase;
  text-decoration:none;color:var(--ink)}

/* height-driven so the intrinsic 1235x1198 ratio is preserved without hardcoding it */
.mark-img{display:block;height:2.25rem;width:auto;flex:0 0 auto}

.mark em{font-style:normal}

/* the accent only where it measures — 6.43:1 on ink */
.band--dark .mark em,.bleed .mark em{color:var(--jaffa)}

.masthead a.btn{font-size:.76rem;padding:.55rem 1.1rem;white-space:nowrap}

.nav{display:flex;gap:1.4rem;margin-left:auto;margin-right:1.2rem;font-family:var(--mono);
  font-size:.7rem;letter-spacing:.13em;text-transform:uppercase}

.nav a{text-decoration:none;color:var(--carbon);padding-block:.3rem;border-bottom:1px solid transparent}

.nav a:hover{color:var(--ink);border-bottom-color:var(--ledger)}

/* Below 760px the nav becomes a second row rather than disappearing. The mark is
   reduced so it still shares row one with the CTA — at full size the two exceed
   the row and wrap apart, which costs a third row on a sticky header. */
@media (max-width:760px){
  .masthead{padding-block:.8rem}
  .masthead .wrap{flex-wrap:wrap;row-gap:.55rem;column-gap:.6rem}
  /* Prominent identity treatment: above the approved Option B after review, while
     preserving mobile header balance and the 24px target floor. */
  .mark{font-size:.82rem;letter-spacing:.075em;gap:.5rem}
  .mark-img{height:1.8rem}
  .nav{order:3;flex-basis:100%;margin:0;justify-content:space-between;gap:.9rem;
    border-top:1px solid var(--rule);padding-top:.45rem}
  /* nowrap keeps each label on one line: without it three labels need 351px of a
     350px row and every one of them wraps, costing a third masthead row. */
  .nav a{padding-block:.3rem;min-height:24px;white-space:nowrap}
}

/* WCAG 1.4.10: below a 351px viewport the three nowrap labels (331px min-content)
   plus the 20px gutters overflow the document by up to 31px. Wrapping the nav
   only at this width keeps two rows everywhere the no-third-row ruling was
   measured (390px) and restores reflow conformance at 320px, where it is tested. */

@media (max-width:430px){
  .masthead .wrap{display:grid;grid-template-columns:minmax(0,1fr);row-gap:.55rem}
  .masthead a.btn{justify-self:start}
  .nav{order:initial;width:100%;flex-basis:auto;display:flex;justify-content:space-between}
}
@media (max-width:350px){
  .nav{flex-wrap:nowrap;gap:.55rem}
  .nav a{font-size:.66rem;letter-spacing:.03em}
}

.inline-link{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;color:var(--ledger);border-bottom:1px solid var(--rule);padding-bottom:.2rem}

.inline-link:hover{border-bottom-color:var(--ledger)}

.btn{display:inline-block;font-family:var(--mono);font-size:.8rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;text-decoration:none;padding:.92rem 1.5rem;
  border:1px solid var(--ink);background:var(--ink);color:var(--paper);cursor:pointer;
  transition:background .18s ease,color .18s ease}

.btn:hover{background:var(--ledger);border-color:var(--ledger)}

.btn--ghost{background:transparent;color:var(--ink)}

.btn--ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}

.band--dark .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}

.band--dark .btn:hover{background:var(--ledger);color:var(--paper);border-color:var(--ledger)}

.band--dark .btn--ghost{background:transparent;color:var(--paper)}

.band--dark .btn--ghost:hover{background:var(--paper);color:var(--ink)}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--ledger);outline-offset:3px}

.band--dark a:focus-visible,.band--dark button:focus-visible,.band--dark input:focus-visible,
.band--dark select:focus-visible,.band--dark textarea:focus-visible{outline-color:var(--manila)}

.tablewrap{overflow-x:auto;border:1px solid var(--rule);background:var(--paper)}
[role="region"][tabindex]:focus-visible{outline:2px solid var(--ledger);outline-offset:2px}

table{border-collapse:collapse;width:100%;min-width:38rem;font-size:.94rem}

caption{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--carbon);text-align:left;padding:.9rem 1.1rem;border-bottom:1px solid var(--rule)}

th,td{padding:.92rem 1.1rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--rule)}

thead th{font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--carbon);background:var(--paper-warm)}

tbody tr:last-child td{border-bottom:0}

td.resp{background:var(--ledger-tint)}

td.resp strong{color:var(--ledger)}

/* form */
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));gap:1.1rem;
  margin-top:2.2rem;max-width:52rem}

.field{display:flex;flex-direction:column;gap:.42rem}

.field--wide{grid-column:1/-1}

.field label{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft)}

.field input,.field select,.field textarea{
  font-family:var(--body);font-size:1rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule);
  padding:.75rem .85rem;border-radius:0}

/* dark-band treatment, scoped — mirrors the .btn convention above.
   Previously these were unscoped, so a form on a light band rendered
   --paper text on a --paper ground (contrast 1.00). */
.band--dark .field label{color:var(--manila-deep)}

.band--dark .field input,.band--dark .field select,.band--dark .field textarea{
  color:var(--paper);background:rgba(248,245,239,.07);border-color:rgba(228,216,190,.4)}

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

/* These sit in @layer base alongside the .field input border they need to beat,
   and win there on specificity. What they must NOT do is sit in
   @layer enhancements, which loses to base regardless of specificity — that is
   where this rule was, and why it never rendered. :user-invalid, not :invalid,
   so a field only flags after the user has interacted with it. */
.field:has(input:user-invalid) input,
.field:has(textarea:user-invalid) textarea{border-color:var(--stamp);border-width:2px}

.field label::after{color:var(--stamp)}

.band--dark .field label::after{color:var(--manila)}

.band--dark .field ::placeholder{color:var(--manila-deep);opacity:1}

.field select option{color:var(--ink)}

.field .hint{font-size:.82rem;color:var(--ink-soft);font-family:var(--body)}
.band--dark .field .hint{color:var(--manila-deep)}

.form-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin-top:.4rem}

.form-actions .alt{font-size:.9rem;color:var(--ink-soft)}

/* honeypot: off-screen rather than display:none, so bots that skip hidden
   fields still see it. Not announced, not focusable. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.formnote{grid-column:1/-1;font-size:.86rem;line-height:1.5;color:var(--ink-soft);
  border-left:2px solid var(--rule);padding-left:.9rem;margin:.4rem 0 0}

.band--dark .formnote{color:var(--manila-deep);border-left-color:rgba(228,216,190,.32)}

.form noscript{grid-column:1/-1}

.formstatus{grid-column:1/-1;font-family:var(--mono);font-size:.8rem;line-height:1.5;
  border:1px solid var(--rule);padding:.85rem 1rem;margin-top:.4rem;color:var(--ink)}

.formstatus[data-kind=error]{border-color:var(--stamp)}

/* A delivered enquiry is a resolved state, which is what --ledger is reserved for
   in CLAUDE.md. This is the one addition that fits the rule as written, rather than
   the interactive-affordance uses the open question is about, so it takes the count
   to 20 without widening that conflict. */
.formstatus[data-kind=ok]{border-color:var(--ledger)}

.band--dark .formstatus{color:var(--paper);border-color:rgba(228,216,190,.4)}

.band--dark .formstatus[data-kind=error]{border-color:var(--stamp)}

.band--dark .formstatus[data-kind=ok]{border-color:var(--ledger-tint)}
.band--dark .form-actions .alt{color:var(--manila-deep)}

.reassure{font-size:.92rem;color:var(--ink-soft);max-width:44ch;margin-top:1.4rem}

.band--dark .reassure{color:var(--manila-deep)}

.steps{list-style:none;counter-reset:s;margin:2.2rem 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(14rem,100%),1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}

.band--dark .steps{border-color:rgba(228,216,190,.32);background:rgba(228,216,190,.32)}

.band--dark .steps li{background:var(--ink)}

.steps li{counter-increment:s;padding:1.2rem 1.1rem;background:var(--paper)}

.band--dark .steps li{border-right-color:rgba(228,216,190,.32)}

.steps li::before{content:counter(s,decimal-leading-zero);display:block;font-family:var(--mono);
  font-size:.66rem;letter-spacing:.16em;color:var(--ledger);margin-bottom:.5rem}

.band--dark .steps li::before{color:var(--ledger-tint)}

.steps li b{font-family:var(--display);font-weight:700;font-size:1.02rem;display:block}

.steps li span{display:block;font-size:.9rem;color:var(--ink-soft);margin-top:.4rem;line-height:1.45}

.band--dark .steps li span{color:var(--manila-deep)}

footer.foot{border-top:1px solid var(--rule);padding-block:2.5rem;font-family:var(--mono);
  font-size:.72rem;letter-spacing:.08em;color:var(--carbon)}

/* Footer layout — shared furniture, so it lives here rather than in a route sheet:
   all six routes carry the same footer. Two deliberate constraints.
   1. No --ledger token anywhere below (written without its var() wrapper here on
      purpose: a grep for the wrapped form is how the count is taken, and a comment
      that contains it reports as a 20th declaration). The ledger semantic
      (connected/resolved vs interactive affordance) is an open human call, and
      the build's count of 19
      declarations is cited in CLAUDE.md and HANDOFF.md. Adding hover-affordance
      uses here would both pre-empt the decision and break the tracked count, so
      the hover affordance is --ink instead.
   2. No mailto. The address is a tracked nodrftsystems.com placeholder; repeating it on
      six routes would multiply a P0 blocker. The footer routes to /assessment/,
      which already carries the real contact path.
   The mark, .qualifier and .mark em rules are reused from the masthead unchanged,
   so the footer identity cannot drift away from the header identity. */
.foot-grid{display:grid;grid-template-columns:1fr;gap:2.25rem;align-items:start}

@media (min-width:34rem){
  /* two columns first: four link groups on a narrow tablet row wrap badly */
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:2.25rem 2.5rem}
  .foot-brand{grid-column:1 / -1}
}

@media (min-width:64rem){
  .foot-grid{grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:2.5rem}
  .foot-brand{grid-column:auto}
}

.foot-brand .mark{color:var(--ink)}

.foot-line{margin:.95rem 0 0;max-width:32ch;font-family:var(--body);font-size:1rem;
  line-height:1.5;letter-spacing:normal;text-transform:none;color:var(--ink-soft)}

.foot-h{margin:0 0 1rem;font-family:var(--mono);font-size:.66rem;font-weight:500;
  letter-spacing:.19em;text-transform:uppercase;color:var(--ink)}

.foot-list{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}

/* padding-block + min-height give a ~31px target against the WCAG 2.2 AA
   minimum of 24px, without opening the line rhythm up enough to look sparse. */
.foot-list a{display:inline-block;min-height:24px;padding-block:.4rem;
  text-decoration:none;color:var(--carbon);border-bottom:1px solid transparent}

.foot-list a:hover{color:var(--ink);border-bottom-color:var(--ink)}

/* WCAG 2.2 2.5.8 Target Size (Minimum): 24x24 CSS px. The footer list gets this from
   .foot-list a; the inline mail link in .form-actions was rendering 171x20 because it
   is inline text inside a sentence. inline-block plus the same floor fixes it without
   breaking the sentence flow. */
.form-actions .alt a{display:inline-block;min-height:24px;padding-block:.15rem}

/* A list item that is not a link still needs the same vertical rhythm as its
   siblings, or the locality sits tight against the address above it. */
.foot-place{padding-block:.4rem;color:var(--carbon)}

/* Interaction states the VECS and QAS passes both flagged as missing. The enquiry
   form disables its submit button while a send is in flight, and without these the
   disabled control rendered identically to an enabled one — the only signal was the
   status text. No --ledger here: the token's semantics are an open question and this
   is affordance, not a resolved state. */
.btn:disabled,button:disabled,input:disabled,select:disabled,textarea:disabled{
  opacity:.5;cursor:not-allowed}

.btn:disabled{border-color:var(--rule)}

/* a small, non-decorative press response — confirms the tap landed */
.btn:active:not(:disabled),.nav a:active,.foot-list a:active{transform:translateY(1px)}

@media (prefers-reduced-motion:reduce){
  .btn:active:not(:disabled),.nav a:active,.foot-list a:active{transform:none}
}

/* Closing CTA row. Promoted from about.css on 20 Aug 2026 when the VECS route
   review added an in-body CTA to /automate/, /signs/, /method/ and /sources/ —
   five routes use it, so it belongs in the shared contract, and the old
   .about-cta name no longer described it. */
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem;margin-top:1.6rem}

.foot-bottom{margin:2.75rem 0 0;padding-top:1.35rem;border-top:1px solid var(--rule)}

.js .rise{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)}

.js .rise.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .js .rise{opacity:1;transform:none;transition:none}
  .strip span::before{transition:none}
}

/* ------------------------------------------------------------
   SHARED COMPONENTS — promoted from home.css when the site split into
   routes. Each of these is now used by more than one route:
     .bleed, .pull, .bleed-caption  home + method
     .symptoms                     signs + method
     .note                         home + signs + method
   ------------------------------------------------------------ */

/* full-bleed image bands */
.bleed{position:relative;isolation:isolate;overflow:hidden;background:var(--ink);color:var(--paper);
  display:flex;align-items:flex-end;min-height:clamp(24rem,58vh,38rem);
  padding-block:clamp(2.5rem,6vw,4.5rem)}

/* <picture> is static, so it would become a second flex item of .bleed;
   the bare <img> never was, being absolutely positioned. Keep the box tree as built. */
.bleed picture{display:contents}

.bleed-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}

/* Vertical scrim. The mid stop was .80, which left the .label kicker sitting at
   roughly 35% down the band at ~.72 alpha — measured 2.72:1 over bright photo.
   The start stays .52 so the top of the frame still opens up; only the middle,
   where the text actually sits, is lifted. */
.bleed::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(22,34,58,.52) 0%,rgba(22,34,58,.88) 48%,rgba(22,34,58,.95) 100%)}

/* Desktop scrim. The original ramped .96 -> .90 @40% -> .52 @100%, which put the
   thin end (.66-.73) under the h1 and lede where they cross bright window light:
   measured 4.80 and 4.69 against a 4.5 threshold. The stops below hold the scrim
   through the text column (which ends around 80%) and keep the .52 endpoint
   unchanged, so the photograph still opens up on the right as designed. */
.bleed--side::after{background:linear-gradient(100deg,rgba(22,34,58,.96) 0%,rgba(22,34,58,.93) 55%,rgba(22,34,58,.88) 78%,rgba(22,34,58,.52) 90%,rgba(22,34,58,.52) 100%)}

/* INTERIM — pending VDA. Below 1000px the hero copy spans the full band, so the
   horizontal scrim's weak end (.52) falls under body text. Target fix is to lift
   the copy off the photograph at mobile (HANDOFF Sec.5); this holds AA until then. */
@media (max-width:1000px){
  .bleed--side::after{background:linear-gradient(180deg,rgba(22,34,58,.88) 0%,rgba(22,34,58,.92) 45%,rgba(22,34,58,.96) 100%)}
}

/* The kicker sits highest in the band, where the scrim is thinnest. --manila-deep
   measured 2.72:1 over bright photo and --manila only reached 3.89. --paper clears
   AA without dimming the image further; at 10.5px uppercase mono the hierarchy is
   carried by size and tracking, not by colour. */
.bleed .label{color:var(--paper)}

.bleed .label::before{background:rgba(228,216,190,.45)}

.bleed .lede{color:var(--manila)}

.bleed .sub{color:var(--manila-deep)}

/* .bleed is not .band--dark — dark-ground overrides must be declared for both,
   as .btn already does. Without this the hero reassure line reads 1.39:1. */
.bleed .reassure{color:var(--manila-deep)}

.bleed .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}

.bleed .btn:hover{background:var(--ledger);color:var(--paper);border-color:var(--ledger)}

.bleed .btn--ghost{background:transparent;color:var(--paper)}

.bleed .btn--ghost:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}

.bleed .strip{background:transparent;border-color:rgba(228,216,190,.42)}

.bleed .strip span{color:var(--paper);border-right-color:rgba(228,216,190,.42)}

.bleed-caption{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--manila);margin-top:2.2rem}

.pull{font-family:var(--display);font-weight:700;letter-spacing:-.027em;line-height:1.05;
  font-size:clamp(1.85rem,1.15rem + 3vw,3.35rem);max-width:19ch;margin:0}

.band + .bleed,.bleed + .band{border-top:0}

.symptoms{list-style:none;margin:0;padding:0;columns:2;column-gap:2.5rem}

.symptoms li{break-inside:avoid;padding:.62rem 0 .62rem 1.6rem;position:relative;
  border-bottom:1px dotted var(--rule);font-size:.97rem}

.symptoms li::before{content:"";position:absolute;left:0;top:1.18rem;width:.5rem;height:.5rem;
  border:1px solid var(--stamp)}

.band--dark .symptoms li{border-bottom-color:rgba(228,216,190,.22)}

.note{border-left:3px solid var(--stamp);padding:.2rem 0 .2rem 1.1rem;
  font-family:var(--display);font-weight:600;font-size:1.02rem;line-height:1.4}

.bleed .note{border-left-color:var(--stamp);color:var(--paper)}
}

/* ============================================================
   2026 ENHANCEMENTS
   Progressive enhancement only: every rule degrades to the base
   experience.
   ============================================================ */
@layer enhancements {

  /* colour scheme is deliberate — prevents forced auto-darkening
     wrecking the paper palette and the photography scrims */
  :root{color-scheme:light;accent-color:var(--ledger)}

  /* typography: kill orphans and ragged headline breaks */
  h1,h2,h3,.pull,.stat b{text-wrap:balance}
  p,.lede,.sub,.hint,.steps li span{text-wrap:pretty}

  /* render only what's near the viewport — this page is long */
  .band:not(.hero):not(.bleed){content-visibility:auto;contain-intrinsic-size:auto 640px}

  /* cards respond to their own column, not the viewport */
  .autos,.services,.method{container-type:inline-size}
  @container (min-width:46rem){
    .autos article,.services article{padding:2.1rem}
    .method article{padding:2.4rem}
  }

  /* required fields mark themselves */
  .field:has(input:required) label::after,
  .field:has(textarea:required) label::after{content:" *"}
  .field textarea{field-sizing:content}

  /* scroll-driven reveals — off the main thread, no observer needed */
  @supports (animation-timeline:view()){
    @media (prefers-reduced-motion:no-preference){
      .js .rise{
        opacity:0;transform:translateY(14px);transition:none;
        animation:rise-in linear both;
        animation-timeline:view();
        animation-range:entry 8% cover 24%;
      }
      .strip span::before{
        animation:strip-fill linear both;
        animation-timeline:view();
        animation-range:entry 25% cover 45%;
      }
    }
  }
  @keyframes rise-in{to{opacity:1;transform:none}}
  @keyframes strip-fill{to{transform:scaleX(1)}}

  /* Cross-document view transitions. LIVE since the route split — this now
     applies a default cross-fade on every navigation between the six routes.
     Keep or remove deliberately; it is a behaviour change, not decoration. */
  @media (prefers-reduced-motion:no-preference){
    @view-transition{navigation:auto}
  }
}