/* =============================================================================
   schloss-duesseldorf.de — SHARED DESIGN LANGUAGE
   Register: Stahl + Signalmagenta. Feel adapted from style-library/stahl-kupfer;
   every value re-derived for this site. Kupfer is fully replaced by the magenta
   trio — two warm accents would break the one-accent rule.

   Read DESIGN-LANGUAGE.md before editing. Per-page <style> is LAYOUT ONLY:
   never a new colour, font, radius, shadow or duration value.
   ========================================================================== */

/* ── PART 0 · TOKENS ────────────────────────────────────────────────────── */
:root{
  /* grounds — cool grey carrying ~3–4 % of the magenta seed (design-tokens §3.2) */
  --bg:#F8F7FA;
  --surface:#FFFFFF;
  --surface-alt:#EFEDF4;
  --steel:#E3E0EA;              /* the brushed material band */
  --tint-mag:#FBEDF6;           /* the magenta whisper band */
  --line:#D6D2DE;               /* 1.49:1 — DECORATIVE hairline only */
  --line-strong:#75718A;        /* ≥3:1 on every light ground — load-bearing borders */

  /* ink */
  --text:#1C1A24;               /* 16.01:1 on surface, 12.6:1 on steel */
  --muted:#4E4A5C;              /* 7.63:1 on surface — "muted" is chroma, never contrast */
  --head:#12101A;

  /* the trade register */
  --primary:#1E3B54;            /* gunmetal steel-blue, 11.61:1 on white */
  --primary-hover:#152B3E;
  --primary-subtle:#E4EAF0;

  /* THE ONE ACCENT — reserved for the phone action */
  --cta:#C4188E;                /* FILL. white on it 5.43:1 */
  --cta-hover:#A20F76;
  --cta-ink:#AE1580;            /* magenta as TEXT on light grounds (worst: --steel 5.01:1) */
  --cta-light:#F09BD0;          /* magenta as TEXT on dark grounds (--dark 9.07, --primary 5.70) */

  --dark:#0F1219;               /* white on it 18.49:1 */
  --dark-muted:#A9AEBE;         /* 8.6:1 on --dark */

  --focus:#0A0C12;
  --danger:#B3261E;
  --danger-tint:#FCECEB;
  --success:#186B41;

  /* type */
  --font:"Fira Sans","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --fs-sm:.9375rem;             /* 15px — labels/eyebrows only, never body */
  --fs-base:1.125rem;           /* 18px floor */
  --fs-md:1.1875rem;
  --fs-lg:1.375rem;
  --fs-xl:clamp(1.35rem,2.1vw,1.6rem);
  --fs-title:clamp(1.7rem,3.3vw,2.6rem);
  --fs-display:clamp(2.1rem,5.4vw,3.7rem);
  --lh-body:1.68;
  --lh-head:1.14;
  --measure:66ch;

  /* space */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1.125rem;
  --s5:1.75rem; --s6:2.75rem; --s7:4.25rem; --s8:6.5rem;
  --band:clamp(2.75rem,5.6vw,5.25rem);   /* section padding-block */
  --gutter:clamp(1.125rem,3.2vw,2rem);   /* .wrap padding-inline */
  --wrap:74rem;
  --wrap-wide:90rem;
  --wrap-narrow:48rem;

  /* square is structural, round is interactive */
  --r-sm:3px; --r-md:5px; --r-pill:999px;
  --notch:22px;                 /* the key-bow cut */

  /* one restrained elevation system */
  --sh-sm:0 1px 2px rgb(18 16 26 / .07);
  --sh-md:0 6px 22px -10px rgb(18 16 26 / .22);

  --tap:44px;
  --dur-fast:150ms; --dur:280ms; --ease:cubic-bezier(.22,.61,.36,1);
  --hdr-h:70px;
  --callbar-h:0px;              /* set to 64px under 860px so content never hides */
}

/* ── PART 1 · BASE ──────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font);font-size:var(--fs-base);line-height:var(--lh-body);
  font-weight:400;-webkit-font-smoothing:antialiased;
  padding-bottom:var(--callbar-h);
  overflow-wrap:break-word;
}
img,svg,video{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{
  margin:0 0 var(--s3);color:var(--head);font-weight:800;
  line-height:var(--lh-head);letter-spacing:-.018em;
  hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;
  /* German compounds must hyphenate, ordinary words must not: without this an
     H1 breaks as "Schlüsseldienst Kos-ten Düsseldorf". Only words of 12+ letters
     may break, and never with fewer than 5 letters before the hyphen. */
  hyphenate-limit-chars:12 5 4;
  -webkit-hyphenate-limit-before:5;-webkit-hyphenate-limit-after:4;
}
h1{font-size:var(--fs-display)}
h2{font-size:var(--fs-title)}
h3{font-size:var(--fs-xl);letter-spacing:-.012em}
h4{font-size:var(--fs-lg);letter-spacing:-.008em}
p{margin:0 0 var(--s4);max-width:var(--measure)}
p:last-child{margin-bottom:0}
strong,b{font-weight:800;color:var(--head)}
a{color:var(--primary);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--cta-ink)}
ul,ol{margin:0 0 var(--s4);padding-left:1.35em;max-width:var(--measure)}
li{margin-bottom:var(--s2)}
li:last-child{margin-bottom:0}
hr{border:0;border-top:1px solid var(--line);margin:var(--s6) 0}
::selection{background:var(--cta);color:#fff}

/* the dual focus ring — a single dark ring vanishes on --primary and --dark */
:where(a,button,summary,[tabindex]):focus-visible{
  outline:none;
  box-shadow:0 0 0 3px var(--surface),0 0 0 6px var(--focus);
  border-radius:var(--r-sm);
}
.section--dark :where(a,button,summary,[tabindex]):focus-visible,
.section--primary :where(a,button,summary,[tabindex]):focus-visible,
.on-dark :where(a,button,summary,[tabindex]):focus-visible{
  box-shadow:0 0 0 3px var(--dark),0 0 0 6px var(--cta-light);
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--dark);color:#fff;padding:.85rem 1.15rem;font-weight:800;
}
.skip:focus{left:.5rem;top:.5rem}

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

/* ── PART 2 · BANDS + WRAP ─────────────────────────────────────────────── */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--wide{max-width:var(--wrap-wide)}
.wrap--narrow{max-width:var(--wrap-narrow)}

.section{
  padding-block:var(--band);
  background:var(--bg);
  position:relative;
  display:flow-root;              /* stops a seam child's negative margin collapsing the band */
}
.section--surface{background:var(--surface)}
.section--tint{background:var(--surface-alt)}
.section--mag{background:var(--tint-mag)}
.section--steel{
  background:var(--steel);
  background-image:
    repeating-linear-gradient(90deg,rgba(18,16,26,.028) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.55) 0 1px,transparent 1px 9px);
}
.section--dark{background:var(--dark);color:#fff}
.section--primary{background:var(--primary);color:#fff}
.section--flush{padding-block:0}
.section--tight{padding-block:clamp(1.75rem,3.4vw,2.75rem)}

/* dark-band ink. The :not() chain is load-bearing: a bare `.section--dark a`
   is (0,1,1) and silently beats every .btn/.callbtn (0,1,0), painting a call
   button's label magenta-on-magenta. */
.section--dark,.section--primary{color:#fff}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4,
.section--primary h1,.section--primary h2,.section--primary h3,.section--primary h4{color:#fff}
.section--dark p,.section--primary p{color:#EDEFF4}
.section--dark .muted,.section--primary .muted{color:var(--dark-muted)}
/* The exclusion list lives inside :where() ON PURPOSE. A bare `:not(a):not(b)…`
   chain adds one class each, so `.section--dark a:not()×6` is (0,7,1) and
   out-ranks EVERY light island inside the band — a white phone card in a dark
   section then paints its links magenta-on-white at 2.03:1. Wrapped in :where()
   the whole chain contributes nothing and the rule sits at (0,1,1), so the
   island rules further down simply win by source order. */
.section--dark a:where(:not(.btn,.callbtn,.chip,.brand,.ftel,.cardlink,.telbig)),
.section--primary a:where(:not(.btn,.callbtn,.chip,.brand,.ftel,.cardlink,.telbig)){
  color:var(--cta-light)
}
.section--dark a:where(:not(.btn,.callbtn,.chip,.brand,.ftel,.cardlink,.telbig)):hover,
.section--primary a:where(:not(.btn,.callbtn,.chip,.brand,.ftel,.cardlink,.telbig)):hover{color:#fff}
.section--dark .eyebrow,.section--primary .eyebrow{color:var(--cta-light)}
.section--dark .hrule,.section--primary .hrule{background:rgb(255 255 255 / .22)}

/* A DARK CARD IN A LIGHT BAND gets none of the rules above — it is dark by its
   own background. .on-dark re-declares the descendant set. */
.on-dark{background:var(--dark);color:#fff}
.on-dark h2,.on-dark h3,.on-dark h4,.on-dark strong,.on-dark b{color:#fff}
.on-dark p{color:#EDEFF4}
.on-dark .muted{color:var(--dark-muted)}
.on-dark .eyebrow{color:var(--cta-light)}
.on-dark a:where(:not(.btn,.callbtn,.chip,.telbig)){color:var(--cta-light)}
.on-dark .hrule{background:rgb(255 255 255 / .22)}

/* ── PART 3 · ATOMS ────────────────────────────────────────────────────── */
.eyebrow{
  display:flex;align-items:center;gap:.6rem;
  margin:0 0 var(--s3);min-width:0;
  font-size:var(--fs-sm);font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;color:var(--cta-ink);
}
/* A German compound in uppercase at .15em tracking (Verbraucherstreitbeilegung)
   sets the page's min-content width at 320px. `anywhere` — not `break-word` —
   is the value that also shrinks the min-content size. */
.eyebrow,.keypad__k,.compare__k,.badge,.rows__go,.media__cap{overflow-wrap:anywhere}
/* the key-bit mark — a 30×12 magenta bar clipped to a 4-tooth bitting profile.
   Four teeth is the measured cap; more renders as a smear at this size. */
.eyebrow::before{
  content:"";flex:0 0 auto;width:30px;height:12px;background:var(--cta);
  clip-path:polygon(0 0,100% 0,100% 100%,84% 100%,84% 55%,68% 55%,68% 100%,
                    52% 100%,52% 55%,36% 55%,36% 100%,20% 100%,20% 55%,0 55%);
}
.section--dark .eyebrow::before,.section--primary .eyebrow::before,.on-dark .eyebrow::before{background:var(--cta-light)}
.eyebrow--plain::before{display:none}
.eyebrow--center{justify-content:center}

.stitle{max-width:24ch}            /* ONE headline class. Modifiers change only
                                      max-width / text-align / colour. */
.stitle--wide{max-width:34ch}
.stitle--full{max-width:none}
.stitle--center{margin-inline:auto;text-align:center}

.lead{font-size:var(--fs-lg);line-height:1.55;color:var(--muted);max-width:60ch}
.lead strong{color:var(--head)}
.muted{color:var(--muted)}
.prose{max-width:var(--measure)}
.prose p+p{margin-top:0}
.prose--wide{max-width:74ch}

.hrule{height:1px;background:var(--line);border:0;margin:var(--s5) 0}
.hrule--strong{height:2px;background:var(--line-strong)}
.hrule--cta{height:3px;background:var(--cta);width:64px;margin-inline:0}

/* buttons — .btn is a square-ish structural object; the CALL is the loud one */
.btn,.callbtn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:var(--tap);padding-block:.75rem;padding-inline:1.35rem;
  border-radius:var(--r-sm);border:2px solid transparent;
  font:inherit;font-weight:800;line-height:1.2;text-decoration:none;
  cursor:pointer;position:relative;overflow:hidden;
  transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease);
}
.btn{background:var(--primary);color:#fff}
.btn:hover{background:var(--primary-hover);color:#fff}
.btn--ghost{background:transparent;color:var(--primary);border-color:var(--line-strong)}
.btn--ghost:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.section--dark .btn--ghost,.section--primary .btn--ghost,.on-dark .btn--ghost{
  color:#fff;border-color:rgb(255 255 255 / .55);background:transparent}
.section--dark .btn--ghost:hover,.section--primary .btn--ghost:hover,.on-dark .btn--ghost:hover{
  background:#fff;color:var(--dark);border-color:#fff}

/* THE call button. Full-white caps — white at opacity over magenta drops under AA. */
.callbtn{
  background:var(--cta);color:#fff;border-color:var(--cta);
  padding-inline:1.6rem;font-size:var(--fs-md);border-radius:var(--r-pill);
  letter-spacing:.005em;
}
/* the label must not wrap inside the pill — but nowrap on the WHOLE button would
   set a 376px minimum layout width, so it is scoped to the label span only and
   released again below 400px. */
.callbtn>span:not(.callbtn__num){white-space:nowrap}
.callbtn__ic{width:22px;height:22px;flex:0 0 auto;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.callbtn:hover,.callbtn:focus-visible{background:var(--cta-hover);border-color:var(--cta-hover);color:#fff}
.callbtn--lg{font-size:var(--fs-lg);padding-block:.95rem;padding-inline:2rem}
.callbtn--block{display:flex;width:100%}
/* on a --primary band the magenta fill is only 2.14:1 against the ground: give it an edge */
.section--primary .callbtn{border-color:#fff}
.callbtn__num{font-variant-numeric:tabular-nums;white-space:nowrap}

.chip{
  display:inline-flex;align-items:center;gap:.4rem;
  min-height:var(--tap);padding:.5rem 1rem;border-radius:var(--r-pill);
  background:var(--surface);border:1px solid var(--line-strong);
  color:var(--primary);font-size:var(--fs-sm);font-weight:600;text-decoration:none;
  transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease);
}
a.chip:hover{background:var(--primary);border-color:var(--primary);color:#fff}
.chip--cta{border-color:var(--cta);color:var(--cta-ink)}
a.chip--cta:hover{background:var(--cta);border-color:var(--cta);color:#fff}
.section--dark .chip,.section--primary .chip,.on-dark .chip{
  background:transparent;border-color:rgb(255 255 255 / .5);color:#fff}
.section--dark a.chip:hover,.section--primary a.chip:hover,.on-dark a.chip:hover{
  background:#fff;color:var(--dark);border-color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:.55rem;margin:0;padding:0;list-style:none;max-width:none}
.chips li{margin:0}

.badge{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.25rem .7rem;border-radius:var(--r-sm);
  background:var(--primary-subtle);color:var(--primary);
  font-size:var(--fs-sm);font-weight:800;letter-spacing:.02em;
}
.badge--cta{background:var(--tint-mag);color:var(--cta-ink)}
.badge--danger{background:var(--danger-tint);color:var(--danger)}

.numpill{
  flex:0 0 auto;display:inline-grid;place-items:center;
  width:46px;height:46px;border-radius:var(--r-pill);
  border:2px solid var(--line-strong);background:transparent;
  font-weight:800;font-size:var(--fs-md);color:var(--primary);
  font-variant-numeric:tabular-nums;
}
.numpill--cta{border-color:var(--cta);color:var(--cta-ink)}
.section--dark .numpill,.section--primary .numpill,.on-dark .numpill{
  border-color:var(--cta-light);color:var(--cta-light)}

/* the phone number as display type — where the call is the only channel a huge
   tappable number outranks another square button */
.telbig{
  display:inline-block;font-weight:800;letter-spacing:-.02em;
  font-size:clamp(1.9rem,5.2vw,3.05rem);line-height:1.06;
  font-variant-numeric:tabular-nums;color:var(--cta-ink);text-decoration:none;
  min-height:var(--tap);
}
.telbig:hover{color:var(--cta);text-decoration:underline;text-decoration-thickness:2px}
.section--dark .telbig,.section--primary .telbig,.on-dark .telbig{color:var(--cta-light)}
.section--dark .telbig:hover,.section--primary .telbig:hover,.on-dark .telbig:hover{color:#fff}
/* A bare number inside running copy is still a tap target on a phone-only site.
   :where() keeps the specificity at zero, so it can never resurrect an element a
   component rule hides — the classic way this fix breaks the mobile navigation. */
:where(a[href^="tel:"]:not(.callbtn):not(.telbig):not(.ftel):not(.brand)){
  display:inline-block;min-height:var(--tap);padding-block:.55rem;
  font-weight:800;font-variant-numeric:tabular-nums;color:var(--cta-ink);
}
.telnote{display:block;margin-top:var(--s2);font-size:var(--fs-sm);color:var(--muted);font-weight:600}
.section--dark .telnote,.section--primary .telnote,.on-dark .telnote{color:var(--dark-muted)}

/* the pin-tumbler rule — five pins of unequal depth HANGING from a shear line.
   Bottom-anchored bars read as signal-strength; top-anchored reads as a lock. */
.pinrule{display:flex;align-items:flex-start;gap:5px;height:34px;
  border-top:2px solid var(--line-strong);padding-top:0;width:74px}
.pinrule i{display:block;width:8px;background:var(--cta)}
.pinrule i:nth-child(1){height:60%}
.pinrule i:nth-child(2){height:100%}
.pinrule i:nth-child(3){height:42%}
.pinrule i:nth-child(4){height:82%}
.pinrule i:nth-child(5){height:55%}
.section--dark .pinrule,.section--primary .pinrule,.on-dark .pinrule{border-top-color:rgb(255 255 255 / .5)}
.section--dark .pinrule i,.section--primary .pinrule i,.on-dark .pinrule i{background:var(--cta-light)}

/* ── PART 4 · CARDS + MEDIA ────────────────────────────────────────────── */
.card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:var(--s5);
  min-width:0;display:flex;flex-direction:column;gap:var(--s3);
}
.card h3{margin:0}
.card p{margin:0}
.card--edge{border-color:var(--line-strong)}
.card--inlay{border-left:3px solid var(--cta);padding-left:calc(var(--s5) - 2px)}
.card--tint{background:var(--surface-alt)}
.card--dark{background:var(--dark);border-color:var(--dark)}
.card--flat{background:transparent;border:0;padding:0}
/* the key-bow notch: clip-path clips border AND shadow, so a notched card is
   either FILLED with no edge (.card--notch) or a two-element traced notch. */
.card--notch{
  border:0;
  clip-path:polygon(0 0,calc(100% - var(--notch)) 0,100% var(--notch),100% 100%,0 100%);
}
.notch{background:var(--line-strong);padding:1px;
  clip-path:polygon(0 0,calc(100% - var(--notch)) 0,100% var(--notch),100% 100%,0 100%)}
.notch__in{background:var(--surface);padding:var(--s5);
  clip-path:polygon(0 0,calc(100% - var(--notch)) 0,100% calc(var(--notch) - 1px),100% 100%,0 100%)}
.section--dark .card,.section--primary .card{
  background:rgb(255 255 255 / .05);border-color:rgb(255 255 255 / .18);color:#fff}
.section--dark .card h3,.section--primary .card h3{color:#fff}
.section--dark .card p,.section--primary .card p{color:#E6E9F0}

.media{position:relative;overflow:hidden;border-radius:var(--r-sm);background:var(--surface-alt);min-width:0}
.media img{width:100%;height:100%;object-fit:cover;display:block}
.media--16x9{aspect-ratio:16/9}
.media--3x2{aspect-ratio:3/2}
.media--4x3{aspect-ratio:4/3}
.media--1x1{aspect-ratio:1/1}
.media--4x5{aspect-ratio:4/5}
.media--tall{aspect-ratio:3/4}
.media--notch{border-radius:0;
  clip-path:polygon(0 0,calc(100% - var(--notch)) 0,100% var(--notch),100% 100%,0 100%)}
.media--frame{border:1px solid var(--line-strong);border-radius:0;padding:6px;background:var(--surface)}
.media--frame img{border-radius:0}
/* caption chip welded to an image corner */
.media__cap{
  position:absolute;left:0;bottom:0;z-index:2;
  background:var(--dark);color:#fff;font-size:var(--fs-sm);font-weight:800;
  padding:.45rem .85rem;letter-spacing:.02em;
}
.media__cap--cta{background:var(--cta)}
.media__cap--tr{left:auto;right:0;bottom:auto;top:0}

/* ── PART 5 · SECTION PRIMITIVES (the LEGO bricks) ─────────────────────── */

/* .grid — the neutral card grid. minmax(0,1fr) everywhere: a 1fr track takes a
   min-content minimum and one long German compound sets the page's min width. */
.grid{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr))}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid--gap-lg{gap:var(--s5)}
.grid--gap-sm{gap:var(--s3)}
/* exactly five items: 3 on top, 2 wide underneath — never an orphan card */
.grid--5{grid-template-columns:repeat(6,minmax(0,1fr))}
.grid--5>*{grid-column:span 2}
.grid--5>*:nth-child(4),.grid--5>*:nth-child(5){grid-column:span 3}
/* exactly four items: 2 × 2, so the last row is never a single card */
.grid--2x2{grid-template-columns:repeat(2,minmax(0,1fr))}

/* .split — the workhorse two-column band */
.split{display:grid;gap:clamp(var(--s5),4vw,var(--s7));align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.split--60{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
.split--40{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)}
.split--top{align-items:start}
.split--rev>*:first-child{order:2}

/* section-local copy helpers used across pages (layout only, no new theme value) */
.trustnote{margin-top:var(--s6)}
.secnote{margin:0 0 var(--s4);color:var(--muted);font-weight:600}
.secnote .badge{margin-right:.45rem}
.signature-out{margin-top:var(--s5);font-weight:800}
.pb-links{margin-top:var(--s4);font-weight:600}
.aftercompare{margin-top:var(--s5);max-width:70ch}
.cmplist{list-style:none;margin:0;padding:0;max-width:none;display:grid;gap:var(--s2)}
.cmplist li{margin:0;padding-left:1.5rem;position:relative}
.cmplist li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;
  background:var(--cta);border-radius:1px}
.compare__side--dark .cmplist li::before{background:var(--cta-light)}
.stack{display:grid;gap:var(--s5)}
.stack--sm{gap:var(--s4)}
.stack--lg{gap:var(--s6)}
.after{margin-top:var(--s5)}
.after--lg{margin-top:var(--s6)}
.center{text-align:center}
.linkline{margin-top:var(--s4);font-weight:600}
.linkline a{margin-right:.75rem}
/* the paste-only slot on the lawyer-supplied pages — visible, never mistaken for copy */
.paste{display:inline-block;background:var(--danger-tint);color:var(--danger);
  border:1px dashed var(--danger);border-radius:var(--r-sm);padding:.1rem .55rem;font-weight:800;
  font-size:var(--fs-sm);letter-spacing:.02em}

/* .diptych — zero-gutter two-column band, each half its own fill, meeting on
   the centreline with no container */
.diptych{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0}
.diptych__half{padding:clamp(2rem,5vw,4.25rem) clamp(1.25rem,4vw,3.5rem);min-width:0}
.diptych__half--surface{background:var(--surface)}
.diptych__half--steel{background:var(--steel)}
.diptych__half--dark{background:var(--dark);color:#fff}
.diptych__half--mag{background:var(--tint-mag)}
.diptych__half--img{padding:0}
.diptych__half--img img{width:100%;height:100%;object-fit:cover;min-height:280px}

/* .ledger — one hairline frame; a narrow label cell against a wide content cell */
.ledger{border:1px solid var(--line-strong);background:var(--surface)}
.ledger__row{display:grid;grid-template-columns:minmax(0,14rem) minmax(0,1fr);gap:0;
  border-bottom:1px solid var(--line)}
.ledger__row:last-child{border-bottom:0}
.ledger__k{padding:var(--s4) var(--s5);background:var(--surface-alt);
  font-weight:800;color:var(--head);border-right:1px solid var(--line);min-width:0}
.ledger__v{padding:var(--s4) var(--s5);min-width:0}
.ledger__v p{margin:0}
.ledger--dark{background:var(--dark);border-color:var(--dark);color:#fff}
.ledger--dark .ledger__row{border-bottom-color:rgb(255 255 255 / .16)}
.ledger--dark .ledger__k{background:rgb(255 255 255 / .06);color:#fff;border-right-color:rgb(255 255 255 / .16)}

/* .keypad — the layout LINES are the design: gap:1px over a line-coloured
   ground with cells painted in the surface colour. At gap:2px three cells read
   as ONE segmented slab. */
.keypad{display:grid;gap:1px;background:var(--line-strong);
  grid-template-columns:repeat(auto-fit,minmax(min(14rem,100%),1fr));border:1px solid var(--line-strong)}
.keypad__cell{background:var(--surface);padding:var(--s5);min-width:0;
  display:flex;flex-direction:column;gap:var(--s2)}
.keypad__cell h3{margin:0}
.keypad__cell p{margin:0}
.keypad--slab{gap:2px;background:var(--dark);border-color:var(--dark)}
.keypad--slab .keypad__cell{background:var(--surface);padding:var(--s4) var(--s5)}
.keypad--dark{background:rgb(255 255 255 / .2);border-color:rgb(255 255 255 / .2)}
.keypad--dark .keypad__cell{background:var(--dark);color:#fff}
.keypad--dark .keypad__cell h3{color:#fff}
.keypad--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.keypad__k{font-size:var(--fs-sm);font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--cta-ink)}
.keypad--dark .keypad__k{color:var(--cta-light)}

/* .steps — the process. Vertical connected steps; .steps--h goes horizontal. */
.steps{list-style:none;margin:0;padding:0;max-width:none;display:grid;gap:0}
.steps>li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s4);
  padding-bottom:var(--s5);position:relative;margin:0}
.steps>li:last-child{padding-bottom:0}
.steps>li::before{
  content:"";position:absolute;left:22px;top:52px;bottom:6px;width:2px;background:var(--line);
}
.steps>li:last-child::before{display:none}
.section--dark .steps>li::before,.section--primary .steps>li::before,.on-dark .steps>li::before{
  background:rgb(255 255 255 / .22)}
.steps__body{min-width:0;padding-top:.35rem}
.steps__body h3{margin:0 0 var(--s2);font-size:var(--fs-lg)}
.steps__body p{margin:0}
.steps--h{grid-template-columns:repeat(auto-fit,minmax(min(13rem,100%),1fr));gap:var(--s5)}
.steps--h>li{grid-template-columns:minmax(0,1fr);padding-bottom:0}
.steps--h>li::before{left:0;right:0;top:22px;bottom:auto;width:auto;height:2px}
.steps--h>li:last-child::before{display:none}
.steps--h .numpill{margin-bottom:var(--s3);position:relative;z-index:1;background:var(--bg)}
.section--surface .steps--h .numpill{background:var(--surface)}
.section--tint .steps--h .numpill{background:var(--surface-alt)}
.section--steel .steps--h .numpill{background:var(--steel)}
.section--mag .steps--h .numpill{background:var(--tint-mag)}
.section--dark .steps--h .numpill{background:var(--dark)}
.section--primary .steps--h .numpill{background:var(--primary)}

/* .iclist — the icon list. Factors, symptoms, checklists — never a bare <ul>. */
.iclist{list-style:none;margin:0;padding:0;max-width:none;
  display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(min(17rem,100%),1fr))}
.iclist>li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s3);margin:0;align-items:start}
.iclist__mark{
  flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center;border-radius:var(--r-sm);
  background:var(--tint-mag);color:var(--cta-ink);font-weight:800;font-size:var(--fs-sm);
}
.iclist__mark svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.section--dark .iclist__mark,.section--primary .iclist__mark,.on-dark .iclist__mark{
  background:rgb(255 255 255 / .1);color:var(--cta-light)}
.iclist__body{min-width:0}
.iclist__body b{display:block;margin-bottom:.15rem;color:var(--head);font-weight:800}
.section--dark .iclist__body b,.section--primary .iclist__body b,.on-dark .iclist__body b{color:#fff}
.iclist__body span{color:var(--muted)}
.section--dark .iclist__body span,.section--primary .iclist__body span,.on-dark .iclist__body span{color:#DCE0E8}
.iclist--1{grid-template-columns:minmax(0,1fr)}
.iclist--2{grid-template-columns:repeat(2,minmax(0,1fr))}

/* .compare — the LEGAL before/after: a static two-up with a shared centre rule.
   No hidden divider element: a display:none child collapses a 3-track grid. */
.compare{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;
  border:1px solid var(--line-strong);background:var(--surface)}
.compare__side{padding:var(--s5);min-width:0}
.compare__side+.compare__side{border-left:1px solid var(--line-strong)}
.compare__side h3{margin:0 0 var(--s3);font-size:var(--fs-lg)}
.compare__k{display:block;margin-bottom:var(--s2);font-size:var(--fs-sm);font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.compare__side--accent{background:var(--tint-mag)}
.compare__side--accent .compare__k{color:var(--cta-ink)}
.compare__side--dark{background:var(--dark);color:#fff}
.compare__side--dark h3{color:#fff}
.compare__side--dark p{color:#E6E9F0}
.compare__side--dark .compare__k{color:var(--cta-light)}

/* .rows — the hover-flood index. A list that is also a gallery. */
.rows{list-style:none;margin:0;padding:0;max-width:none;border-top:1px solid var(--line-strong)}
.rows>li{margin:0;border-bottom:1px solid var(--line-strong)}
.rows__a{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s4);align-items:center;
  padding:var(--s5) var(--s3);text-decoration:none;color:inherit;position:relative;isolation:isolate;
  min-height:var(--tap);
}
.rows__a::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--tint-mag);
  transform:scaleY(0);transform-origin:bottom;transition:transform var(--dur) var(--ease);
}
.rows__a:hover::before,.rows__a:focus-visible::before{transform:scaleY(1)}
.rows__t{min-width:0}
.rows__t b{display:block;font-size:var(--fs-lg);font-weight:800;color:var(--head);line-height:1.2;
  margin-bottom:.2rem}
.rows__t span{color:var(--muted);display:block}
.rows__go{flex:0 0 auto;font-weight:800;color:var(--cta-ink);white-space:nowrap;font-size:var(--fs-sm);
  letter-spacing:.06em;text-transform:uppercase}
.rows__a:hover .rows__go{text-decoration:underline;text-decoration-thickness:2px}

/* .strip — full-bleed accent rule carrying the vocabulary, STATIC (never a marquee) */
.strip{background:var(--cta);color:#fff;padding-block:var(--s4);padding-inline:var(--gutter)}
.strip__in{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 2rem;
  max-width:var(--wrap-wide);margin-inline:auto}
.strip__in span{font-weight:800;letter-spacing:.02em;display:inline-flex;align-items:center;gap:.7rem}
.strip__in span::after{content:"";width:6px;height:6px;background:rgb(255 255 255 / .7);border-radius:50%}
.strip__in span:last-child::after{display:none}

/* .notice — the callout. --danger for safety, --info for the magenta register. */
.notice{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s4);
  border-left:5px solid var(--danger);background:var(--danger-tint);
  padding:var(--s5);border-radius:0 var(--r-sm) var(--r-sm) 0;
}
.notice__ic{flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center;color:var(--danger)}
.notice__ic svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.notice__b{min-width:0}
.notice__b h3{margin:0 0 var(--s2);font-size:var(--fs-lg);color:var(--danger)}
.notice__b p{margin:0 0 var(--s2)}
.notice__b p:last-child{margin-bottom:0}
.notice__b strong{color:var(--danger)}
.notice--info{border-left-color:var(--cta);background:var(--tint-mag)}
.notice--info .notice__ic,.notice--info .notice__b h3,.notice--info .notice__b strong{color:var(--cta-ink)}
.notice--calm{border-left-color:var(--line-strong);background:var(--surface-alt)}
.notice--calm .notice__ic,.notice--calm .notice__b h3{color:var(--primary)}
.notice--calm .notice__b strong{color:var(--head)}
.section--dark .notice,.section--primary .notice{background:rgb(255 255 255 / .07)}
.section--dark .notice p,.section--primary .notice p{color:#EDEFF4}

/* .faq — <details> accordions, no JS required */
.faq{border-top:1px solid var(--line-strong)}
.faq details{border-bottom:1px solid var(--line-strong);background:transparent}
.faq summary{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s4);align-items:center;
  padding:var(--s4) 0;min-height:var(--tap);cursor:pointer;list-style:none;
  font-weight:800;font-size:var(--fs-lg);color:var(--head);line-height:1.3;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";width:15px;height:15px;flex:0 0 auto;border-right:2.5px solid var(--cta-ink);
  border-bottom:2.5px solid var(--cta-ink);transform:rotate(45deg) translateY(-3px);
  transition:transform var(--dur-fast) var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.faq summary:hover{color:var(--cta-ink)}
.faq__a{padding:0 0 var(--s5);max-width:var(--measure)}
.faq__a p{margin:0 0 var(--s3)}
.faq__a p:last-child{margin-bottom:0}
.section--dark .faq,.section--dark .faq details{border-color:rgb(255 255 255 / .24)}
.section--dark .faq summary{color:#fff}
.section--dark .faq summary::after{border-color:var(--cta-light)}

/* .glist — the glossary register */
.glist{display:grid;gap:0;border-top:1px solid var(--line-strong);max-width:none;
  list-style:none;margin:0;padding:0}
.glist>li{display:grid;grid-template-columns:minmax(0,16rem) minmax(0,1fr);gap:var(--s4);
  padding:var(--s4) 0;border-bottom:1px solid var(--line);margin:0}
.glist__t{font-weight:800;color:var(--head);min-width:0}
.glist__d{color:var(--muted);min-width:0}
.glist__d p{margin:0}

/* .stats — static figures, never counters */
.stats{display:grid;gap:var(--s5);grid-template-columns:repeat(auto-fit,minmax(min(11rem,100%),1fr));
  list-style:none;margin:0;padding:0;max-width:none}
.stats>li{margin:0;min-width:0;border-left:3px solid var(--cta);padding-left:var(--s4)}
.stats__n{display:block;font-size:clamp(1.7rem,3.4vw,2.4rem);font-weight:800;line-height:1.05;
  color:var(--head);letter-spacing:-.02em}
.stats__l{display:block;margin-top:.3rem;color:var(--muted);font-size:var(--fs-sm)}
.section--dark .stats__n,.section--primary .stats__n{color:#fff}
.section--dark .stats__l,.section--primary .stats__l{color:var(--dark-muted)}

/* .rail — a sticky side column against a single-file stack (one viewport only) */
.rail{display:grid;grid-template-columns:minmax(0,20rem) minmax(0,1fr);gap:clamp(var(--s5),4vw,var(--s7));
  align-items:start}
.rail--right{grid-template-columns:minmax(0,1fr) minmax(0,20rem)}
.rail__side{position:sticky;top:calc(var(--hdr-h) + var(--s4));min-width:0}
.rail__main{min-width:0;display:grid;gap:var(--s5)}

/* .offgrid — hand-placed masonry rhythm via nth-child, zero JS */
.offgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.offgrid>*:nth-child(3n+2){margin-top:var(--s6)}
.offgrid>*:nth-child(3n+3){margin-top:calc(var(--s6) * 1.7)}

/* .peek — scroll-snap rail with the next card bleeding off the edge */
.peek{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(min(19rem,78vw),1fr);
  gap:var(--s4);overflow-x:auto;scroll-snap-type:x mandatory;
  padding-block:var(--s2) var(--s4);scrollbar-width:thin}
.peek>*{scroll-snap-align:start;min-width:0}

/* .mosaic — one tall image beside two stacked halves */
.mosaic{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  grid-template-rows:repeat(2,minmax(0,1fr));gap:var(--s3)}
.mosaic>*:first-child{grid-row:span 2}

/* the phone block — the conversion surface, never a form.
   It is dark by its own background, NOT by sitting in a .section--dark, so every
   descendant colour is re-declared here. Without this a plain link inside it
   inherits --primary and lands at ~1.3:1 on the dark slab. */
.phoneblock{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s5);align-items:center;
  background:var(--dark);color:#fff;padding:clamp(1.75rem,4vw,3rem);border-radius:var(--r-sm);
}
.phoneblock h2,.phoneblock h3,.phoneblock h4,.phoneblock strong,.phoneblock b{color:#fff}
.phoneblock h2,.phoneblock h3{margin:0 0 var(--s3)}
.phoneblock p{color:#EDEFF4;margin:0}
.phoneblock .eyebrow{color:var(--cta-light)}
.phoneblock .eyebrow::before{background:var(--cta-light)}
.phoneblock .muted,.phoneblock .telnote{color:var(--dark-muted)}
.phoneblock a:where(:not(.btn,.callbtn,.chip,.telbig)){color:var(--cta-light)}
.phoneblock a:where(:not(.btn,.callbtn,.chip,.telbig)):hover{color:#fff}
.phoneblock .telbig{color:var(--cta-light)}
.phoneblock .telbig:hover{color:#fff}
.phoneblock :where(a,button,summary,[tabindex]):focus-visible{
  box-shadow:0 0 0 3px var(--dark),0 0 0 6px var(--cta-light)}
.phoneblock__num{text-align:right;min-width:0}
.phoneblock--light{background:var(--surface);color:var(--text);border:1px solid var(--line-strong)}
.phoneblock--mag{background:var(--tint-mag);color:var(--text);border:0;border-left:5px solid var(--cta)}
.phoneblock--light h2,.phoneblock--light h3,.phoneblock--light h4,
.phoneblock--light strong,.phoneblock--light b,
.phoneblock--mag h2,.phoneblock--mag h3,.phoneblock--mag h4,
.phoneblock--mag strong,.phoneblock--mag b{color:var(--head)}
.phoneblock--light p,.phoneblock--mag p{color:var(--muted)}
.phoneblock--light .eyebrow,.phoneblock--mag .eyebrow{color:var(--cta-ink)}
.phoneblock--light .eyebrow::before,.phoneblock--mag .eyebrow::before{background:var(--cta)}
.phoneblock--light .muted,.phoneblock--light .telnote,
.phoneblock--mag .muted,.phoneblock--mag .telnote{color:var(--muted)}
.phoneblock--light a:where(:not(.btn,.callbtn,.chip,.telbig)),
.phoneblock--mag a:where(:not(.btn,.callbtn,.chip,.telbig)){color:var(--primary)}
.phoneblock--light a:where(:not(.btn,.callbtn,.chip,.telbig)):hover,
.phoneblock--mag a:where(:not(.btn,.callbtn,.chip,.telbig)):hover{color:var(--cta-ink)}
.phoneblock--light .telbig,.phoneblock--mag .telbig{color:var(--cta-ink)}
.phoneblock--light .telbig:hover,.phoneblock--mag .telbig:hover{color:var(--cta)}
.phoneblock--light :where(a,button,summary,[tabindex]):focus-visible,
.phoneblock--mag :where(a,button,summary,[tabindex]):focus-visible{
  box-shadow:0 0 0 3px var(--surface),0 0 0 6px var(--focus)}
.phoneblock--stack{grid-template-columns:minmax(0,1fr);text-align:left}
.phoneblock--stack .phoneblock__num{text-align:left}

/* the closing band */
.ctaband{display:grid;gap:var(--s5);grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:center}
.ctaband h2{margin:0 0 var(--s3)}
.ctaband__act{display:flex;flex-direction:column;gap:var(--s3);align-items:flex-start;min-width:0}

/* the trust strip — belegbar only */
.trust{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(min(13rem,100%),1fr));
  list-style:none;margin:0;padding:0;max-width:none}
.trust>li{margin:0;min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s3);
  align-items:start}
.trust__ic{width:30px;height:30px;flex:0 0 auto;color:var(--cta-ink)}
.trust__ic svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.section--dark .trust__ic,.section--primary .trust__ic,.on-dark .trust__ic{color:var(--cta-light)}
.trust__b{min-width:0}
.trust__b b{display:block;color:var(--head);font-weight:800;margin-bottom:.1rem}
.section--dark .trust__b b,.section--primary .trust__b b,.on-dark .trust__b b{color:#fff}
.trust__b span{color:var(--muted);font-size:var(--fs-md)}
.section--dark .trust__b span,.section--primary .trust__b span,.on-dark .trust__b span{color:#DCE0E8}

/* breadcrumbs + toc */
.crumbs{font-size:var(--fs-sm);color:var(--muted);padding-block:var(--s3);margin:0}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem .55rem;margin:0;padding:0;max-width:none}
.crumbs li{margin:0;display:flex;align-items:center;gap:.55rem}
.crumbs li+li::before{content:"›";color:var(--line-strong)}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--cta-ink);text-decoration:underline}
.crumbs [aria-current="page"]{color:var(--head);font-weight:600}

/* ── PART 6 · HERO FAMILY ──────────────────────────────────────────────── */
.hero{position:relative;padding-block:clamp(2.25rem,5vw,4.5rem);display:flow-root}
.hero h1{margin:0 0 var(--s4)}
.hero__sub{font-size:var(--fs-xl);line-height:1.45;color:var(--muted);max-width:52ch;margin:0 0 var(--s5)}
/* A dark HERO carries `.hero--dark`, not `.section--dark`, so every ink rule in
   PART 2 silently skipped it: an eyebrow stayed --cta-ink at 2.87:1 and the
   call note stayed --muted at 2.19:1 on near-black. Contain it here. */
.hero--dark{background:var(--dark);color:#fff}
.hero--primary{background:var(--primary);color:#fff}
.hero--dark .hero__sub{color:#D9DDE6}
.hero--primary .hero__sub{color:#DCE4EC}
.hero--dark h1,.hero--dark h2,.hero--dark h3,.hero--dark h4,
.hero--primary h1,.hero--primary h2,.hero--primary h3,.hero--primary h4{color:#fff}
.hero--dark p,.hero--primary p{color:#EDEFF4}
.hero--dark .eyebrow,.hero--primary .eyebrow{color:var(--cta-light)}
.hero--dark .eyebrow::before,.hero--primary .eyebrow::before{background:var(--cta-light)}
.hero--dark .telnote,.hero--primary .telnote,
.hero--dark .muted,.hero--primary .muted{color:var(--dark-muted)}
.hero--dark .telbig,.hero--primary .telbig{color:var(--cta-light)}
.hero--dark .telbig:hover,.hero--primary .telbig:hover{color:#fff}
.hero--dark .badge,.hero--primary .badge{background:rgb(255 255 255 / .12);color:#fff}
.hero--dark .numpill,.hero--primary .numpill{border-color:var(--cta-light);color:var(--cta-light)}
.hero--dark .chip,.hero--primary .chip{background:transparent;border-color:rgb(255 255 255 / .5);color:#fff}
.hero--dark a.chip:hover,.hero--primary a.chip:hover{background:#fff;color:var(--dark);border-color:#fff}
.hero--dark a:where(:not(.btn,.callbtn,.chip,.brand,.telbig)),
.hero--primary a:where(:not(.btn,.callbtn,.chip,.brand,.telbig)){color:var(--cta-light)}
.hero--dark a:where(:not(.btn,.callbtn,.chip,.brand,.telbig)):hover,
.hero--primary a:where(:not(.btn,.callbtn,.chip,.brand,.telbig)):hover{color:#fff}
.hero--dark :where(a,button,summary,[tabindex]):focus-visible,
.hero--primary :where(a,button,summary,[tabindex]):focus-visible{
  box-shadow:0 0 0 3px var(--dark),0 0 0 6px var(--cta-light)}
.hero--primary .callbtn{border-color:#fff}
.hero--steel{background:var(--steel);
  background-image:
    repeating-linear-gradient(90deg,rgba(18,16,26,.028) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.55) 0 1px,transparent 1px 9px)}
.hero--tint{background:var(--surface-alt)}
.hero--mag{background:var(--tint-mag)}
.hero--surface{background:var(--surface)}
.hero__grid{display:grid;gap:clamp(var(--s5),4vw,var(--s7));align-items:center;
  grid-template-columns:minmax(0,1.12fr) minmax(0,1fr)}
.hero__grid--even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.hero__grid--wide{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.hero__grid--rev>*:first-child{order:2}
.hero__act{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;margin-bottom:var(--s4)}
.hero__meta{display:flex;flex-wrap:wrap;gap:.5rem .9rem;margin:0;padding:0;list-style:none;max-width:none}
.hero__meta li{margin:0}
.hero__copy{min-width:0}
.hero__chips{margin-top:var(--s4)}
.split__copy{min-width:0}
.cardgo{margin:auto 0 0;padding-top:var(--s2)}
.cardgo a{font-weight:800;text-decoration:none;color:var(--cta-ink);display:inline-flex;align-items:center;gap:.4rem}
.cardgo a::after{content:"→";transition:transform var(--dur-fast) var(--ease)}
.cardgo a:hover{text-decoration:underline;text-decoration-thickness:2px}
.cardgo a:hover::after{transform:translateX(3px)}
.section--dark .cardgo a,.section--primary .cardgo a,.on-dark .cardgo a{color:var(--cta-light)}

/* the panel hero — a quiet solid block with an optional support column */
.hero--panel>.wrap{display:grid;gap:clamp(var(--s5),4vw,var(--s7));align-items:center;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.hero--panel:not(:has(.hero__aside))>.wrap{grid-template-columns:minmax(0,1fr)}
.hero__panel{min-width:0;max-width:52rem}
.hero__aside{min-width:0}
@media (max-width:860px){.hero--panel>.wrap{grid-template-columns:minmax(0,1fr)}}

/* the emergency bar — the number is the first and largest element */
.herobar{background:var(--dark);color:#fff;padding-block:clamp(1.75rem,4vw,3rem)}
.herobar__in{display:grid;gap:var(--s5);grid-template-columns:minmax(0,1fr) auto;align-items:center}
.herobar .telbig{color:var(--cta-light)}
.herobar .telnote{color:var(--dark-muted)}
.herobar h1{color:#fff}
.herobar .hero__sub{color:#D9DDE6}
.herobar .eyebrow{color:var(--cta-light)}
.herobar .eyebrow::before{background:var(--cta-light)}
.herobar .badge{background:rgb(255 255 255 / .1);color:#fff}
.hero--diptych{padding-block:0}

/* ── PART 7 · THE SEAM GRAMMAR ─────────────────────────────────────────── */
/* Every other band has exactly one element crossing its boundary — by negative
   margin, never by decoration. A crossing element must be the FIRST or LAST
   child of its band. Both collapse below 760px. */
.seam-up{margin-top:-54px;position:relative;z-index:3}
.seam-up--lg{margin-top:-82px}
/* the receiving band must not eat the pull with its own top padding, and must be
   flow-root or the negative margin collapses THROUGH it and nothing crosses */
.section:has(> .wrap > .seam-up:first-child),
.section:has(> .seam-up:first-child){padding-top:0;display:flow-root}
.section--hang{padding-bottom:0;display:flow-root}
.seam-down{margin-bottom:-54px;position:relative;z-index:3}
.section--catch{padding-top:calc(var(--band) + 54px);display:flow-root}
@media (max-width:760px){
  .seam-up,.seam-up--lg,.seam-down{margin-top:0;margin-bottom:0}
  .section:has(> .wrap > .seam-up:first-child),
  .section:has(> .seam-up:first-child){padding-top:var(--band)}
  .section--hang{padding-bottom:var(--band)}
  .section--catch{padding-top:var(--band)}
}
/* a circular seal straddling a seam */
.seal{
  width:120px;height:120px;border-radius:var(--r-pill);display:grid;place-items:center;
  text-align:center;background:var(--cta);color:#fff;font-weight:800;font-size:var(--fs-sm);
  line-height:1.2;padding:var(--s3);position:relative;z-index:4;
  filter:drop-shadow(0 8px 18px rgb(18 16 26 / .22));
}

/* ── PART 8 · CHROME ───────────────────────────────────────────────────── */
.site-header{
  position:sticky;top:0;z-index:60;background:var(--surface);
  border-bottom:1px solid var(--line);
  transition:box-shadow var(--dur-fast) var(--ease);
}
.site-header.is-stuck{box-shadow:var(--sh-md)}
.hdr{display:flex;align-items:center;gap:var(--s4);min-height:var(--hdr-h);
  padding-block:.5rem}
.chrome-fixed{position:relative;z-index:70}  /* zero-height wrapper; its children are position:fixed */
.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:var(--head);
  font-weight:800;line-height:1.1;flex:0 1 auto;min-width:0;min-height:var(--tap)}
.brand__mark{width:38px;height:38px;flex:0 0 auto;border-radius:var(--r-sm)}
.brand__t{display:flex;flex-direction:column;min-width:0}
.brand__t b{font-size:1.0625rem;letter-spacing:-.012em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brand__t span{font-size:.8125rem;font-weight:600;color:var(--muted);letter-spacing:.03em}
.nav{margin-left:auto;display:flex;align-items:center;gap:.15rem}
.nav a{
  display:inline-flex;align-items:center;min-height:var(--tap);padding:.4rem .62rem;
  color:var(--primary);text-decoration:none;font-weight:600;font-size:1rem;border-radius:var(--r-sm);
  position:relative;
}
.nav a::after{
  content:"";position:absolute;left:.62rem;right:.62rem;bottom:.5rem;height:2px;background:var(--cta);
  transform:scaleX(0);transform-origin:left;transition:transform var(--dur-fast) var(--ease);
}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--cta-ink)}
.hdr__call{margin-left:var(--s3);flex:0 0 auto}
.hdr__call .callbtn{padding-inline:1.15rem;font-size:1.0625rem}
.burger{
  display:none;margin-left:auto;width:var(--tap);height:var(--tap);flex:0 0 auto;
  background:transparent;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  align-items:center;justify-content:center;cursor:pointer;color:var(--primary);
}
.burger svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}

/* the drawer: visibility:hidden removes the links from the tab order.
   Never transition `visibility` — a focus-on-open would land on a hidden element. */
.drawer{
  position:fixed;inset:0;z-index:80;visibility:hidden;overflow:hidden;
  background:rgb(15 18 25 / .55);opacity:0;transition:opacity var(--dur) var(--ease);
}
.drawer[data-open="true"]{visibility:visible;opacity:1}
.drawer__panel{
  position:absolute;right:0;top:0;bottom:0;width:min(21rem,88vw);background:var(--surface);
  padding:var(--s5) var(--s5) calc(var(--s5) + var(--callbar-h));overflow-y:auto;
  transform:translateX(102%);transition:transform var(--dur) var(--ease);
  display:flex;flex-direction:column;gap:var(--s3);
}
.drawer[data-open="true"] .drawer__panel{transform:none}
.drawer__x{
  align-self:flex-end;width:var(--tap);height:var(--tap);background:transparent;
  border:1px solid var(--line-strong);border-radius:var(--r-sm);cursor:pointer;color:var(--primary);
  display:grid;place-items:center;
}
.drawer__x svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.drawer nav{display:flex;flex-direction:column}
.drawer nav a{
  display:flex;align-items:center;min-height:var(--tap);padding:.7rem .25rem;
  border-bottom:1px solid var(--line);color:var(--primary);text-decoration:none;font-weight:600;
}
.drawer nav a[aria-current="page"]{color:var(--cta-ink)}
.drawer .callbtn{margin-top:var(--s4)}

/* the sticky mobile call bar */
.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  background:var(--dark);padding:.55rem var(--gutter) calc(.55rem + env(safe-area-inset-bottom));
  border-top:2px solid var(--cta);
}
.callbar .callbtn{width:100%;font-size:var(--fs-md)}

.totop{
  position:fixed;right:1rem;bottom:calc(1rem + var(--callbar-h));z-index:65;
  width:46px;height:46px;border-radius:var(--r-pill);border:1px solid var(--line-strong);
  background:var(--surface);color:var(--primary);cursor:pointer;display:grid;place-items:center;
  opacity:0;pointer-events:none;transform:translateY(10px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
  box-shadow:var(--sh-md);
}
.totop.is-on{opacity:1;pointer-events:auto;transform:none}
.totop svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}

.site-footer{background:var(--dark);color:#fff;padding-block:var(--s7) var(--s5)}
.site-footer h2,.site-footer h3{color:#fff;font-size:var(--fs-md);margin:0 0 var(--s3);
  letter-spacing:.06em;text-transform:uppercase}
.site-footer a{color:#D9DDE6;text-decoration:none}
.site-footer a:hover{color:var(--cta-light);text-decoration:underline}
.foot{display:grid;gap:var(--s5) var(--s6);
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1.15fr) minmax(0,.85fr)}
.foot ul{list-style:none;margin:0;padding:0;max-width:none;display:grid;gap:.55rem}
.foot li{margin:0}
.foot__cols{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s4)}
.foot__h2{margin-top:var(--s5)}
.foot__brand p{color:var(--dark-muted);max-width:34ch}
.ftel{display:inline-block;font-size:var(--fs-xl);font-weight:800;color:var(--cta-light);
  text-decoration:none;font-variant-numeric:tabular-nums;margin-bottom:var(--s2);min-height:var(--tap)}
.ftel:hover{color:#fff;text-decoration:underline}
.footbar{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid rgb(255 255 255 / .16);
  display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);justify-content:space-between;
  color:var(--dark-muted);font-size:var(--fs-sm)}
.footbar ul{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s4);list-style:none;margin:0;padding:0}
.footbar li{margin:0}

/* ── PART 9 · MOTION ───────────────────────────────────────────────────── */
/* The reveal moves ONLY. An opacity fade would leave text at a blended colour
   until the transition ends — every automated contrast check reads that as
   invisible text, and a reader who scrolls fast sees copy that has not arrived.
   A calm rise says "new section" without ever hiding a word. */
.reveal{transform:translateY(18px);transition:transform 620ms var(--ease)}
.reveal.is-in{transform:none}
.reveal.d1{transition-delay:80ms}
.reveal.d2{transition-delay:160ms}
.reveal.d3{transition-delay:240ms}
.reveal.d4{transition-delay:320ms}
/* scripting off must not blank the page */
.no-js .reveal{transform:none}

.card,.chip,.media img{transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
a.card:hover,.card:hover{box-shadow:var(--sh-md)}
.media--zoom img{transition:transform 700ms var(--ease)}
.media--zoom:hover img{transform:scale(1.04)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{transform:none}
}

/* ── PART 10 · RESPONSIVE ──────────────────────────────────────────────── */
/* the nav needs more room than the call button does — split the two breakpoints */
@media (max-width:1150px){
  .nav{display:none}
  .burger{display:flex}
  .hdr__call{margin-left:auto}
}
@media (max-width:1080px){
  .foot{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rail,.rail--right{grid-template-columns:minmax(0,1fr)}
  .rail__side{position:static}
  .offgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .offgrid>*:nth-child(3n+2),.offgrid>*:nth-child(3n+3){margin-top:0}
}
@media (max-width:980px){
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--5>*,.grid--5>*:nth-child(4),.grid--5>*:nth-child(5){grid-column:span 1}
  .keypad--3{grid-template-columns:repeat(auto-fit,minmax(min(14rem,100%),1fr))}
}
@media (max-width:860px){
  :root{--callbar-h:64px;--hdr-h:64px}
  .hdr__call{display:none}
  .callbar{display:block}
  .hero__grid,.hero__grid--even,.hero__grid--wide,
  .split,.split--60,.split--40{grid-template-columns:minmax(0,1fr)}
  .split--rev>*:first-child,.hero__grid--rev>*:first-child{order:0}
  .diptych{grid-template-columns:minmax(0,1fr)}
  .grid--3,.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr))}
  .mosaic{grid-template-columns:minmax(0,1fr);grid-template-rows:auto}
  .mosaic>*:first-child{grid-row:auto}
  .ctaband{grid-template-columns:minmax(0,1fr)}
  .phoneblock{grid-template-columns:minmax(0,1fr)}
  .phoneblock__num{text-align:left}
  .herobar__in{grid-template-columns:minmax(0,1fr)}
  .compare{grid-template-columns:minmax(0,1fr)}
  .compare__side+.compare__side{border-left:0;border-top:1px solid var(--line-strong)}
  .ledger__row{grid-template-columns:minmax(0,1fr)}
  .ledger__k{border-right:0;border-bottom:1px solid var(--line)}
  .glist>li{grid-template-columns:minmax(0,1fr);gap:var(--s2)}
  .iclist--2{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  :root{--measure:100%}
  .grid--2,.grid--3,.grid--4,.grid--5,.grid--2x2{grid-template-columns:minmax(0,1fr)}
  .offgrid{grid-template-columns:minmax(0,1fr)}
  .foot{grid-template-columns:minmax(0,1fr)}
  .rows__a{grid-template-columns:auto minmax(0,1fr);row-gap:var(--s2)}
  .rows__go{grid-column:2;justify-self:start}
  .steps--h>li::before{display:none}
  .strip__in{justify-content:flex-start}
}
@media (max-width:430px){
  .hdr{gap:.6rem}
  .brand__mark{width:32px;height:32px}
  .brand__t b{font-size:.9375rem}
}
@media (max-width:400px){
  /* a nowrap call label forces a 376px layout viewport — let it wrap here */
  .callbtn{padding-inline:.85rem;font-size:1rem;gap:.4rem}
  .callbtn>span:not(.callbtn__num){white-space:normal}
  .callbtn__num{font-size:1rem}
  .telbig{font-size:clamp(1.6rem,8.4vw,2rem)}
  .brand__t span{display:none}
}

/* print — the number must survive paper */
@media print{
  .site-header,.callbar,.totop,.drawer,.skip{display:none!important}
  body{padding-bottom:0}
  .section{padding-block:1rem;background:#fff!important;color:#000!important}
  .reveal{transform:none}
}