/* ============================================================================================
   schloss-duisburg-bernhardt.de — the shared design LANGUAGE.
   Every page links this file unedited; that is the cohesion. Uniqueness comes from how each
   page COMPOSES these primitives (see plans/<slug>.plan.md and BRICKS.md).

   Vocabulary: style-library/stahl-kupfer — ruled objects, hairline grids, segmented slabs,
   bordered cabinets. Re-themed from gunmetal+copper to this site's palette: deep teal
   structure, #12BEDC as the brand accent, copper reserved for the phone.

   Colour tokens come from theme.json as --wp--preset--color--*; they are aliased once here.
   NOTHING below may introduce a new colour value. Page-scoped <style> is LAYOUT ONLY.
   ============================================================================================ */

/* ── 0 · token aliases ─────────────────────────────────────────────────────────────────── */
:root{
  --surface:var(--wp--preset--color--surface);
  --bg:var(--wp--preset--color--bg);
  --tint:var(--wp--preset--color--tint);
  --steel:var(--wp--preset--color--steel);
  --primary-subtle:var(--wp--preset--color--primary-subtle);
  --line:var(--wp--preset--color--line);
  --line-strong:var(--wp--preset--color--line-strong);
  --ink:var(--wp--preset--color--ink);
  --muted:var(--wp--preset--color--muted);
  --head:var(--wp--preset--color--head);
  --primary:var(--wp--preset--color--primary);
  --primary-mid:var(--wp--preset--color--primary-mid);
  --brand:var(--wp--preset--color--brand);
  --cta:var(--wp--preset--color--cta);
  --cta-ink:var(--wp--preset--color--cta-ink);
  --cta-light:var(--wp--preset--color--cta-light);
  --dark:var(--wp--preset--color--dark);
  --dark-muted:var(--wp--preset--color--dark-muted);
  --danger:var(--wp--preset--color--danger);
  --danger-tint:var(--wp--preset--color--danger-tint);
  --success:var(--wp--preset--color--success);
  --focus:#052029;

  --r-sm:4px; --r-pill:999px;
  --wrap:1152px; --gutter:clamp(18px,4vw,32px); --band:clamp(52px,6.2vw,96px);
  --t-fast:.16s cubic-bezier(.4,0,.2,1);      /* atoms  */
  --t-slow:.34s cubic-bezier(.22,.61,.36,1);  /* composites — the two-speed convention */
  --hdr:74px;
}
@media (max-width:900px){ :root{ --hdr:64px; } }

/* ── 1 · base ──────────────────────────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--hdr) + 12px); }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--surface); color:var(--ink);
  font-family:var(--wp--preset--font-family--body);
  font-size:var(--wp--preset--font-size--base); line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;                 /* clip, not hidden: does not create a scroll container */
}
img,svg,video{ max-width:100%; height:auto; display:block; }
h1,h2,h3,h4{
  font-family:var(--wp--preset--font-family--display); font-weight:800; color:var(--head);
  line-height:1.14; letter-spacing:-.018em; margin:0 0 .5em;
  /* German compounds (Schließzylinder, Einbruchschutz, Zentralschließanlage) otherwise
     break a narrow column or set the page's minimum width. */
  hyphens:auto; -webkit-hyphens:auto; overflow-wrap:break-word; word-break:normal;
}
h1{ font-size:var(--wp--preset--font-size--display); letter-spacing:-.026em; }
h2{ font-size:var(--wp--preset--font-size--title); }
h3{ font-size:var(--wp--preset--font-size--sub); line-height:1.3; letter-spacing:-.01em; }
h4{ font-size:1.0625rem; line-height:1.35; }
p{ margin:0 0 1.05em; }
p:last-child,ul:last-child,ol:last-child{ margin-bottom:0; }
a{ color:var(--primary); text-underline-offset:.18em; text-decoration-thickness:.06em; }
a:hover{ color:var(--cta-ink); }
strong,b{ font-weight:700; color:var(--head); }
small{ font-size:.9375rem; }
::selection{ background:var(--brand); color:var(--dark); }

/* Dual focus ring: whichever ground it lands on, one of the two layers clears 3:1.
   A single dark ring measures 1.00:1 on the dark band; a single light ring 1.00:1 on white. */
:focus-visible{
  outline:3px solid var(--surface); outline-offset:0;
  box-shadow:0 0 0 3px var(--surface),0 0 0 6px var(--focus); border-radius:var(--r-sm);
}
.section--dark :focus-visible,.on-dark :focus-visible{
  box-shadow:0 0 0 3px var(--dark),0 0 0 6px var(--brand); outline-color:var(--dark);
}
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--dark); color:#fff; padding:14px 22px; font-weight:700; border-radius:0 0 var(--r-sm) 0;
}
.skip:focus{ left:0; }

/* ── 2 · layout shells ─────────────────────────────────────────────────────────────────── */
/* .wrap may be combined with a component class, so it uses padding-inline only — a shorthand
   `padding` on the partner class would silently zero the gutter and put H1s on the edge. */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.wrap--narrow{ max-width:820px; }
.wrap--wide{ max-width:1330px; }

.section{ position:relative; padding-block:var(--band); background:var(--surface); }
.section--bg{ background:var(--bg); }
.section--tint{ background:var(--tint); }
.section--subtle{ background:var(--primary-subtle); }
.section--primary{ background:var(--primary); color:#fff; }
.section--dark{ background:var(--dark); color:#fff; }
.section--tight{ padding-block:clamp(34px,4vw,58px); }
.section--flush{ padding-block:0; }

/* The brushed-steel band. A material texture (german-design.md §4.3), not a decorative
   gradient: two repeating hairline sets at ~2% over a flat cool tint. Never recolour it. */
.section--steel{
  background-color:var(--steel);
  background-image:
    repeating-linear-gradient(90deg,rgba(6,32,42,.055) 0 1px,transparent 1px 7px),
    repeating-linear-gradient(90deg,rgba(18,190,220,.06) 0 1px,transparent 1px 29px);
}

/* ── 3 · the seam grammar (the single difference between "designed" and "stacked boxes") ─ */
/* .seam-up on the FIRST child of the receiving band is the whole mechanism for pulling up. */
.seam-up{ margin-top:-54px; position:relative; z-index:2; }
.seam-up--lg{ margin-top:-82px; }
/* Three guards, each of which independently makes a seam render as ZERO crossing:
   1. the receiving band's own top padding swallows the pull, so drop it;
   2. with padding-top:0 the negative margin collapses THROUGH the parent and moves the whole
      band — flow-root contains it;
   3. :has() means forgetting the explicit class cannot silently kill the overlap. */
.section:has(> .wrap > .seam-up:first-child),
.section:has(> .seam-up:first-child),
.section--catch{ padding-top:0; display:flow-root; }
.section--hang{ padding-bottom:0; display:flow-root; }
.section--hang > .wrap > .seam-down:last-child,
.section--hang > .seam-down:last-child{ margin-bottom:-54px; position:relative; z-index:2; }
@media (max-width:700px){
  .seam-up,.seam-up--lg{ margin-top:0; }
  .section--hang > .wrap > .seam-down:last-child,
  .section--hang > .seam-down:last-child{ margin-bottom:0; }
  .section:has(> .wrap > .seam-up:first-child),
  .section:has(> .seam-up:first-child),
  .section--catch{ padding-top:var(--band); }
  .section--hang{ padding-bottom:var(--band); }
}

/* ── 4 · typographic atoms ─────────────────────────────────────────────────────────────── */
/* ONE section-title class. Modifiers change max-width / align / colour — never size or weight.
   This is why visibly different bands still read as one site. */
.stitle{ font-size:var(--wp--preset--font-size--title); max-width:22ch; margin:0 0 .48em; }
.stitle--wide{ max-width:34ch; }
.stitle--full{ max-width:none; }
.stitle--center{ margin-inline:auto; text-align:center; }
.lead{ font-size:var(--wp--preset--font-size--lead); line-height:1.6; color:var(--muted); max-width:62ch; }
.lead--tight{ max-width:48ch; }
.prose{ max-width:68ch; }
.prose p + h3{ margin-top:1.5em; }
.muted{ color:var(--muted); }

.eyebrow{
  display:flex; align-items:center; gap:10px;
  font-family:var(--wp--preset--font-family--body);
  font-size:.8125rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase;
  color:var(--cta-ink); margin:0 0 14px;
}
.eyebrow--center{ justify-content:center; }
/* The key-bit mark: a copper bar clipped to a 4-tooth key bitting profile. Four is the measured
   ceiling — a 7-tooth profile at this size renders as an illegible smear. */
.eyebrow::before{
  content:""; flex:0 0 auto; width:30px; height:12px; background:currentColor;
  clip-path:polygon(0 0,100% 0,100% 100%,86% 100%,86% 46%,72% 46%,72% 100%,58% 100%,58% 34%,44% 34%,44% 100%,30% 100%,30% 52%,16% 52%,16% 100%,0 100%);
}
.eyebrow--cap::before{ clip-path:none; width:26px; height:3px; }
.eyebrow--plain::before{ display:none; }

.hrule{ height:1px; background:var(--line); border:0; margin:0; }
.hrule--strong{ background:var(--line-strong); }

/* ── 5 · buttons & the call capsule ────────────────────────────────────────────────────── */
/* Square is structural, round is interactive — roundness MEANS "you can act on this", which is
   exactly the affordance an older reader scanning for the phone needs. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:13px 26px; border-radius:var(--r-pill); border:2px solid transparent;
  font-family:var(--wp--preset--font-family--body); font-weight:700; font-size:1.0625rem;
  line-height:1.2; text-decoration:none; cursor:pointer; position:relative; overflow:hidden;
  transition:color var(--t-fast),border-color var(--t-fast),background-color var(--t-fast);
}
.btn--call{ background:var(--cta); color:#fff; }
.btn--call:hover,.btn--call:focus-visible{ color:#fff; }
/* the scaleX wipe-fill hover */
.btn--call::before{
  content:""; position:absolute; inset:0; background:var(--head); z-index:0;
  transform:scaleX(0); transform-origin:left center; transition:transform var(--t-slow);
}
.btn--call:hover::before{ transform:scaleX(1); }
.btn--call > *{ position:relative; z-index:1; }
.btn--ghost{ background:transparent; color:var(--primary); border-color:var(--line-strong); }
.btn--ghost:hover{ color:var(--cta-ink); border-color:var(--cta-ink); }
.section--dark .btn--ghost,.on-dark .btn--ghost{ color:#fff; border-color:var(--dark-muted); }
.section--dark .btn--ghost:hover,.on-dark .btn--ghost:hover{ color:var(--dark); background:var(--brand); border-color:var(--brand); }
.btn--sm{ min-height:46px; padding:11px 20px; font-size:1rem; }

/* The phone number as display type. Where the call is the only conversion channel, a huge
   tappable number outranks another square button. Selectable text containing digits (C3). */
.telbig{
  display:inline-block; padding-block:9px; font-family:var(--wp--preset--font-family--display); font-weight:800;
  font-size:clamp(1.85rem,4.6vw,3.375rem); line-height:1.05; letter-spacing:-.025em;
  font-variant-numeric:tabular-nums; color:var(--cta-ink); text-decoration:none;
  transition:color var(--t-fast);
}
.telbig:hover{ color:var(--cta); }
.section--dark .telbig,.on-dark .telbig{ color:var(--cta-light); }
.section--dark .telbig:hover,.on-dark .telbig:hover{ color:#fff; }
.telbig--sm{ font-size:clamp(1.5rem,3vw,2.125rem); }

/* ── 6 · cards, notches, chips ─────────────────────────────────────────────────────────── */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:clamp(20px,2.4vw,30px); min-width:0;
  transition:border-color var(--t-slow),transform var(--t-slow);
}
.card:hover{ border-color:var(--line-strong); transform:translateY(-3px); }
.card h3{ margin-bottom:.4em; }
.card p{ color:var(--muted); }
.card p:last-child{ margin-bottom:0; }
/* the copper hairline inlay — marks the emphasis card in a set */
.card--inlay{ border-left:3px solid var(--cta); padding-left:calc(clamp(20px,2.4vw,30px) - 2px); }
.card--brand{ border-left:3px solid var(--brand); padding-left:calc(clamp(20px,2.4vw,30px) - 2px); }
.card--flat{ box-shadow:none; }
.card--flat:hover{ transform:none; }

/* The key-bow notch. clip-path clips border AND box-shadow too, so there are two honest forms:
   .card--notch is a FILLED notched card with no edge (only legible on a tinted/steel/dark
   band); .notch + .notch__in is a two-element card whose hairline traces the cut. */
.card--notch{
  border:0; background:var(--surface);
  clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,0 100%);
  filter:drop-shadow(0 1px 0 rgba(6,32,42,.09));   /* applied AFTER clipping — follows the notch */
}
.notch{ background:var(--line-strong); clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,0 100%); padding:1px; }
.notch__in{
  background:var(--surface); clip-path:polygon(0 0,calc(100% - 25px) 0,100% 25px,100% 100%,0 100%);
  padding:clamp(20px,2.4vw,30px); min-width:0; height:100%;
}
.section--dark .notch__in,.on-dark .notch__in{ background:var(--dark); }

.chip{
  display:inline-flex; align-items:center; gap:8px; min-height:44px;
  padding:9px 17px; border-radius:var(--r-pill);
  border:2px solid var(--line-strong); background:var(--surface); color:var(--primary);
  font-size:1rem; font-weight:600; text-decoration:none; line-height:1.25;
  transition:background-color var(--t-fast),color var(--t-fast),border-color var(--t-fast);
}
.chip:hover{ background:var(--primary); border-color:var(--primary); color:#fff; }
.section--dark .chip,.on-dark .chip{ background:transparent; border-color:var(--dark-muted); color:#fff; }
.section--dark .chip:hover,.on-dark .chip:hover{ background:var(--brand); border-color:var(--brand); color:var(--dark); }
.chip-cluster{ display:flex; flex-wrap:wrap; gap:10px; }

.hpill{
  display:inline-flex; align-items:center; gap:9px; padding:7px 15px; border-radius:var(--r-pill);
  background:var(--primary-subtle); color:var(--primary); font-size:.9375rem; font-weight:700;
}
.section--dark .hpill,.on-dark .hpill{ background:rgba(18,190,220,.16); color:var(--brand); }

/* the numeral pill — the process-step marker */
.numpill{
  flex:0 0 auto; display:inline-grid; place-items:center; width:46px; height:46px;
  border:2px solid var(--line-strong); border-radius:var(--r-pill);
  font-family:var(--wp--preset--font-family--display); font-weight:800; font-size:1.0625rem;
  color:var(--primary); font-variant-numeric:tabular-nums;
}
.section--dark .numpill,.on-dark .numpill{ border-color:var(--brand); color:var(--brand); }

/* the qualification seal — never a rating */
.seal{
  display:grid; place-items:center; text-align:center; gap:2px;
  width:112px; height:112px; border-radius:var(--r-pill);
  background:var(--dark); color:#fff; padding:12px; line-height:1.2;
}
.seal b{ color:var(--brand); font-size:.9375rem; display:block; }
.seal span{ font-size:.75rem; color:var(--dark-muted); }

/* ── 7 · the icon badge & icon list ────────────────────────────────────────────────────── */
.ibadge{
  flex:0 0 auto; display:grid; place-items:center; width:44px; height:44px; border-radius:var(--r-sm);
  background:var(--primary-subtle); color:var(--primary);
}
.ibadge svg{ width:22px; height:22px; }
.ibadge--cta{ background:var(--cta); color:#fff; }
.ibadge--brand{ background:var(--brand); color:var(--dark); }
.ibadge--danger{ background:var(--danger); color:#fff; }
.section--dark .ibadge,.on-dark .ibadge{ background:rgba(18,190,220,.16); color:var(--brand); }

.iclist{ display:grid; gap:clamp(14px,1.8vw,22px); margin:0; padding:0; list-style:none; }
.iclist--2{ grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr)); }
.iclist__i{ display:flex; gap:15px; align-items:flex-start; min-width:0; }
.iclist__i > div{ min-width:0; }
.iclist__i b{ display:block; margin-bottom:2px; font-size:1.0625rem; }
.iclist__i p{ margin:0; color:var(--muted); }
.section--dark .iclist__i p,.on-dark .iclist__i p{ color:var(--dark-muted); }

/* ── 8 · grids ─────────────────────────────────────────────────────────────────────────── */
/* minmax(0,1fr) everywhere: a bare 1fr/auto track takes a MIN-CONTENT minimum, so one long
   German compound sets the page's minimum width and the whole document scrolls at 320px. */
.grid{ display:grid; gap:clamp(14px,1.8vw,24px); }
.grid--2{ grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); }
.grid--3{ grid-template-columns:repeat(auto-fit,minmax(min(100%,262px),1fr)); }
.grid--4{ grid-template-columns:repeat(auto-fit,minmax(min(100%,224px),1fr)); }
.grid > *{ min-width:0; }

/* hand-placed masonry rhythm via nth-child, zero JS */
.offgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr)); gap:clamp(14px,1.8vw,24px); align-items:start; }
@media (min-width:940px){
  .offgrid > *:nth-child(2){ margin-top:38px; }
  .offgrid > *:nth-child(3){ margin-top:-14px; }
  .offgrid > *:nth-child(5){ margin-top:26px; }
}

/* ── 9 · the keypad — the layout LINES are the design ──────────────────────────────────── */
/* gap:1px over a line-coloured ground with cells painted in the surface colour, so the rules
   are drawn by the gap instead of by per-cell borders. Reflows with no arithmetic. */
.keypad{
  display:grid; gap:1px; background:var(--line-strong);
  border:1px solid var(--line-strong); border-radius:var(--r-sm); overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));
}
.keypad__c{ background:var(--surface); padding:clamp(20px,2.4vw,30px); min-width:0; }
.keypad--tight,.keypad--cta{ gap:2px; }       /* at 2px, three cells read as ONE segmented slab */
.keypad--cta{ background:var(--dark); border-color:var(--dark); }
.keypad--cta .keypad__c{ background:var(--dark); color:#fff; }
.section--dark .keypad,.on-dark .keypad{ background:rgba(167,198,205,.34); border-color:rgba(167,198,205,.34); }
.section--dark .keypad__c,.on-dark .keypad__c{ background:var(--dark); color:#fff; }

/* ── 10 · the pin-tumbler rule ─────────────────────────────────────────────────────────── */
/* Five pins of unequal depth HANGING from a shear line. Bottom-anchored bars read as
   signal-strength bars — the wrong object entirely. */
.pinrule{ display:block; width:74px; height:30px; border-top:2px solid var(--brand); position:relative; margin-bottom:18px; }
.pinrule i{ position:absolute; top:0; width:6px; background:var(--brand); }
.pinrule i:nth-child(1){ left:0;   height:19px; }
.pinrule i:nth-child(2){ left:17px;height:11px; }
.pinrule i:nth-child(3){ left:34px;height:26px; }
.pinrule i:nth-child(4){ left:51px;height:14px; }
.pinrule i:nth-child(5){ left:68px;height:22px; }
.pinrule--cta{ border-top-color:var(--cta); }
.pinrule--cta i{ background:var(--cta); }

/* ── 11 · section vocabulary ───────────────────────────────────────────────────────────── */
/* zero-gutter two-column band, each half its own fill, meeting on the centreline */
.diptych{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); }
.diptych__h{ padding:clamp(34px,5vw,72px) clamp(22px,4vw,60px); min-width:0; }
.diptych__h--tint{ background:var(--tint); }
.diptych__h--steel{ background-color:var(--steel); background-image:repeating-linear-gradient(90deg,rgba(6,32,42,.055) 0 1px,transparent 1px 7px); }
.diptych__h--dark{ background:var(--dark); color:#fff; }
.diptych__h--primary{ background:var(--primary); color:#fff; }

/* one hairline frame; a narrow label cell against a wide content cell */
.ledger{ border:1px solid var(--line-strong); border-radius:var(--r-sm); overflow:hidden; }
.ledger__r{ display:grid; grid-template-columns:minmax(0,15rem) minmax(0,1fr); gap:0; border-top:1px solid var(--line); }
.ledger__r:first-child{ border-top:0; }
.ledger__l{ padding:clamp(16px,2vw,24px); background:var(--tint); font-weight:700; color:var(--primary); min-width:0; hyphens:auto; overflow-wrap:break-word; }
.ledger__v{ padding:clamp(16px,2vw,24px); min-width:0; }
.ledger__v p:last-child{ margin-bottom:0; }
@media (max-width:720px){ .ledger__r{ grid-template-columns:minmax(0,1fr); } .ledger__l{ padding-bottom:0; background:transparent; } }
.ledger--dark{ border-color:rgba(167,198,205,.4); }
.ledger--dark .ledger__r{ border-top-color:rgba(167,198,205,.24); }
.ledger--dark .ledger__l{ background:rgba(18,190,220,.1); color:var(--brand); }

/* a sticky side column against a single-file stack (single viewport, never scroll-jacking) */
.rail{ display:grid; grid-template-columns:minmax(0,20rem) minmax(0,1fr); gap:clamp(24px,4vw,56px); align-items:start; }
.rail__side{ position:sticky; top:calc(var(--hdr) + 22px); min-width:0; }
@media (max-width:920px){ .rail{ grid-template-columns:minmax(0,1fr); } .rail__side{ position:static; } }
.rail--right{ grid-template-columns:minmax(0,1fr) minmax(0,20rem); }
@media (max-width:920px){ .rail--right{ grid-template-columns:minmax(0,1fr); } }

/* static two-up with a shared centre rule — the LEGAL before/after */
.compare{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); border:1px solid var(--line-strong); border-radius:var(--r-sm); overflow:hidden; }
.compare__s{ padding:clamp(22px,2.8vw,34px); min-width:0; border-left:1px solid var(--line); }
.compare__s:first-child{ border-left:0; }
@media (max-width:632px){ .compare__s{ border-left:0; border-top:1px solid var(--line); } .compare__s:first-child{ border-top:0; } }
.compare__s--tint{ background:var(--tint); }
.compare__s--danger{ background:var(--danger-tint); }
.compare__s--dark{ background:var(--dark); color:#fff; }
.compare__k{ font-size:.8125rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:9px; }
.compare__s--dark .compare__k{ color:var(--brand); }
.compare__s--danger .compare__k{ color:var(--danger); }

/* one tall image beside two stacked halves.
   NOT auto-fit: a mosaic usually sits inside a half-width column, where auto-fit's own
   minimum silently drops it to ONE column and the three images become a 1800px tower.
   Explicit two-track above the breakpoint, explicit one-track below. */
.mosaic{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(12px,1.4vw,18px); }
.mosaic > *{ min-width:0; }
@media (min-width:520px){
  .mosaic{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mosaic__t{ grid-row:span 2; }
}

/* scroll-snap rail with the next card bleeding off the edge — user-driven, keyboard-reachable */
.peek{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(268px,300px); gap:clamp(14px,1.6vw,20px);
  overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:14px; scrollbar-width:thin; }
.peek > *{ scroll-snap-align:start; }

/* vertical connected steps */
.timeline{ display:grid; gap:0; margin:0; padding:0; list-style:none; }
.timeline__s{ display:grid; grid-template-columns:46px minmax(0,1fr); gap:18px; padding-bottom:clamp(20px,2.4vw,30px); position:relative; }
.timeline__s::before{ content:""; position:absolute; left:23px; top:52px; bottom:0; width:2px; background:var(--line); }
.timeline__s:last-child{ padding-bottom:0; }
.timeline__s:last-child::before{ display:none; }
.timeline__s h3{ margin:9px 0 .3em; }
.timeline__s p{ color:var(--muted); margin:0; }
.section--dark .timeline__s::before,.on-dark .timeline__s::before{ background:rgba(167,198,205,.3); }
.section--dark .timeline__s p,.on-dark .timeline__s p{ color:var(--dark-muted); }

/* horizontal steps */
.stepper{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,222px),1fr)); gap:clamp(16px,2vw,26px); margin:0; padding:0; list-style:none; counter-reset:st; }
.stepper__s{ min-width:0; padding-top:20px; border-top:3px solid var(--line-strong); }
.stepper__s b{ display:block; font-family:var(--wp--preset--font-family--display); font-size:1.0625rem; margin:8px 0 5px; }
.stepper__s p{ margin:0; color:var(--muted); font-size:1rem; }
.stepper__n{ font-size:.8125rem; font-weight:800; letter-spacing:.13em; color:var(--cta-ink); font-variant-numeric:tabular-nums; }
.section--dark .stepper__s,.on-dark .stepper__s{ border-top-color:var(--brand); }
.section--dark .stepper__n,.on-dark .stepper__n{ color:var(--brand); }
.section--dark .stepper__s p,.on-dark .stepper__s p{ color:var(--dark-muted); }

/* the callout */
.notice{ display:flex; gap:16px; align-items:flex-start; padding:clamp(18px,2.2vw,26px);
  border-left:5px solid var(--danger); background:var(--danger-tint); border-radius:0 var(--r-sm) var(--r-sm) 0; min-width:0; }
.notice > div{ min-width:0; }
.notice b{ display:block; margin-bottom:5px; color:var(--danger); font-size:1.0625rem; }
.notice p{ margin:0 0 .6em; }
.notice p:last-child{ margin-bottom:0; }
.notice--info{ border-left-color:var(--cta); background:var(--tint); }
.notice--info b{ color:var(--cta-ink); }
.notice--brand{ border-left-color:var(--brand); background:var(--primary-subtle); }
.notice--brand b{ color:var(--primary); }

/* static figures, never counters */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); gap:clamp(18px,2.4vw,32px); }
.stats__i{ min-width:0; border-top:3px solid var(--brand); padding-top:16px; }
.bignum{ display:block; font-family:var(--wp--preset--font-family--display); font-weight:800;
  font-size:clamp(2rem,3.4vw,2.875rem); line-height:1; letter-spacing:-.03em; color:var(--primary); font-variant-numeric:tabular-nums; }
.stats__i span{ display:block; margin-top:7px; color:var(--muted); font-size:1rem; }
.section--dark .bignum,.on-dark .bignum{ color:var(--brand); }
.section--dark .stats__i span,.on-dark .stats__i span{ color:var(--dark-muted); }

/* the hover-flood service index — a list that is also a gallery. Replaces the forbidden <ul>. */
.rows{ border-top:1px solid var(--line-strong); }
.rows__r{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:clamp(14px,2vw,26px); align-items:center;
  padding:clamp(18px,2.2vw,26px) clamp(12px,1.6vw,20px); border-bottom:1px solid var(--line);
  position:relative; text-decoration:none; color:inherit; overflow:hidden; }
.rows__r::before{ content:""; position:absolute; inset:0; background:var(--tint); transform:scaleY(0); transform-origin:bottom; transition:transform var(--t-slow); z-index:0; }
.rows__r:hover::before{ transform:scaleY(1); }
.rows__r > *{ position:relative; z-index:1; }
.rows__t{ min-width:0; }
.rows__t b{ display:block; font-family:var(--wp--preset--font-family--display); font-size:clamp(1.125rem,1.6vw,1.375rem); font-weight:800; color:var(--head); letter-spacing:-.012em; }
.rows__t span{ display:block; color:var(--muted); font-size:1rem; margin-top:3px; }
.rows__go{ flex:0 0 auto; color:var(--cta-ink); font-weight:700; font-size:1rem; white-space:nowrap; }
@media (max-width:620px){ .rows__r{ grid-template-columns:auto minmax(0,1fr); } .rows__go{ grid-column:2; } }

/* full-bleed accent rule carrying the service vocabulary — STATIC (marquees are banned) */
.strip{ background:var(--cta); color:#fff; padding-block:16px; padding-inline:var(--gutter); }
.strip__in{ display:flex; flex-wrap:wrap; gap:10px 30px; align-items:center; justify-content:center;
  max-width:var(--wrap); margin-inline:auto; font-weight:700; font-size:1rem; }
.strip__in span{ display:inline-flex; align-items:center; gap:11px; }
.strip__in span::before{ content:""; width:7px; height:7px; background:#fff; transform:rotate(45deg); flex:0 0 auto; }
.strip--brand{ background:var(--brand); color:var(--dark); }
.strip--brand .strip__in span::before{ background:var(--dark); }

/* the glossary register */
.glist{ display:grid; gap:0; border-top:1px solid var(--line-strong); }
.glist__i{ display:grid; grid-template-columns:minmax(0,17rem) minmax(0,1fr); gap:clamp(12px,2vw,28px);
  padding-block:clamp(16px,2vw,24px); border-bottom:1px solid var(--line); }
.glist__i dt{ font-family:var(--wp--preset--font-family--display); font-weight:800; font-size:1.0625rem; color:var(--primary); min-width:0; }
.glist__i dd{ margin:0; color:var(--muted); min-width:0; }
@media (max-width:680px){ .glist__i{ grid-template-columns:minmax(0,1fr); gap:5px; } }

/* the bordered cabinet — one object internally ruled, not three floating cards */
.cabinet{ border:1px solid var(--line-strong); border-radius:var(--r-sm); display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); overflow:hidden; }
.cabinet__p{ padding:clamp(22px,2.6vw,32px); border-left:1px solid var(--line); min-width:0; }
.cabinet__p:first-child{ border-left:0; }
@media (max-width:532px){ .cabinet__p{ border-left:0; border-top:1px solid var(--line); } .cabinet__p:first-child{ border-top:0; } }

/* ── 12 · media ────────────────────────────────────────────────────────────────────────── */
.media{ position:relative; border-radius:var(--r-sm); overflow:hidden; background:var(--tint); min-width:0; }
.media img{ width:100%; height:100%; object-fit:cover; display:block; }
.media--notch{ border-radius:0; clip-path:polygon(0 0,calc(100% - 34px) 0,100% 34px,100% 100%,0 100%); }
.media--tall{ aspect-ratio:3/4; }
.media--wide{ aspect-ratio:16/10; }
.media--square{ aspect-ratio:1; }
/* caption chip welded to an image corner — carries the Stadtteil, the local-trust signal */
.capchip{ position:absolute; left:0; bottom:0; background:var(--dark); color:#fff;
  padding:9px 16px; font-size:.875rem; font-weight:700; border-radius:0 var(--r-sm) 0 0; max-width:88%; }
.capchip b{ color:var(--brand); font-weight:800; }
/* open-border L-frame: shows only the two borders facing away from the photo */
.frame{ position:relative; }
.frame::after{ content:""; position:absolute; right:-14px; bottom:-14px; width:52%; height:46%;
  border-right:3px solid var(--brand); border-bottom:3px solid var(--brand); pointer-events:none; }
.frame--tl::after{ right:auto; bottom:auto; left:-14px; top:-14px; border:0; border-left:3px solid var(--cta); border-top:3px solid var(--cta); }

/* ── 13 · FAQ accordion (native <details>, works with JS off) ──────────────────────────── */
.faq{ border-top:1px solid var(--line-strong); }
.faq__i{ border-bottom:1px solid var(--line); }
.faq__q{ display:flex; gap:16px; align-items:flex-start; justify-content:space-between;
  padding:clamp(16px,2vw,22px) 4px; cursor:pointer; list-style:none;
  font-family:var(--wp--preset--font-family--display); font-weight:800; font-size:clamp(1.0625rem,1.3vw,1.1875rem);
  color:var(--head); line-height:1.35; min-width:0; }
.faq__q::-webkit-details-marker{ display:none; }
.faq__q:hover{ color:var(--cta-ink); }
.faq__q span{ min-width:0; }
.faq__q::after{ content:""; flex:0 0 auto; width:15px; height:15px; margin-top:5px;
  border-right:2.5px solid var(--cta-ink); border-bottom:2.5px solid var(--cta-ink);
  transform:rotate(45deg); transition:transform var(--t-fast); }
.faq__i[open] .faq__q::after{ transform:rotate(-135deg); }
.faq__a{ padding:0 4px clamp(18px,2vw,24px); color:var(--muted); max-width:74ch; }
.faq__a p:last-child{ margin-bottom:0; }
.section--dark .faq__q,.on-dark .faq__q{ color:#fff; }
.section--dark .faq__a,.on-dark .faq__a{ color:var(--dark-muted); }
.section--dark .faq__i,.on-dark .faq__i{ border-bottom-color:rgba(167,198,205,.24); }
.section--dark .faq,.on-dark .faq{ border-top-color:rgba(167,198,205,.4); }

/* ── 14 · the phone block — the dark card inside a light band, ALWAYS the phone card ──── */
.phoneblock{ background:var(--dark); color:#fff; border-radius:var(--r-sm);
  padding:clamp(26px,3.4vw,46px); min-width:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:clamp(20px,3vw,44px); align-items:center; }
.phoneblock--notch{ border-radius:0; clip-path:polygon(0 0,calc(100% - 40px) 0,100% 40px,100% 100%,0 100%); }
.phoneblock h2,.phoneblock h3{ color:#fff; }
.phoneblock p{ color:var(--dark-muted); }
.phoneblock__act{ min-width:0; }
.phoneblock__note{ display:block; margin-top:11px; color:var(--dark-muted); font-size:1rem; }

/* the CTA band */
.ctaband{ background:var(--primary); color:#fff; }
.ctaband--dark{ background:var(--dark); }
.ctaband__in{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:clamp(20px,3vw,48px); align-items:center; }
.ctaband h2{ color:#fff; margin-bottom:.3em; }
.ctaband p{ color:var(--dark-muted); margin-bottom:0; }
.ctaband__act{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }

/* ── 15 · the trust strip & the ruled credential wall ─────────────────────────────────── */
.trust{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); gap:0;
  border:1px solid var(--line-strong); border-radius:var(--r-sm); overflow:hidden; }
.trust__i{ display:flex; gap:14px; align-items:flex-start; padding:clamp(18px,2.2vw,26px);
  border-left:1px solid var(--line); min-width:0; }
.trust__i:first-child{ border-left:0; }
@media (max-width:532px){ .trust__i{ border-left:0; border-top:1px solid var(--line); } .trust__i:first-child{ border-top:0; } }
.trust__i b{ display:block; font-size:1.0625rem; margin-bottom:2px; }
.trust__i p{ margin:0; color:var(--muted); font-size:1rem; }
.trust--dark{ border-color:rgba(167,198,205,.4); }
.trust--dark .trust__i{ border-left-color:rgba(167,198,205,.24); }
.trust--dark .trust__i p{ color:var(--dark-muted); }

/* ── 16 · site chrome ─────────────────────────────────────────────────────────────────── */
.site-header{
  position:sticky; top:0; z-index:60; background:var(--surface);
  border-bottom:1px solid var(--line); transition:box-shadow var(--t-fast);
}
.site-header.is-stuck{ box-shadow:0 1px 0 var(--line-strong),0 8px 24px rgba(6,32,42,.07); }
.hbar{ display:flex; align-items:center; gap:clamp(10px,1.6vw,20px); min-height:var(--hdr);
  max-width:1360px; margin-inline:auto; }
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--head);
  min-height:44px;
  font-family:var(--wp--preset--font-family--display); font-weight:800; font-size:1.0625rem;
  letter-spacing:-.018em; line-height:1.15;
  /* flex:0 0 auto so the nav can never squeeze the wordmark to nothing; min-width:0 on the
     TEXT so a long brand still ellipsises instead of pushing the burger off-screen at 360px. */
  flex:0 0 auto; min-width:0; }
.brand__m{ flex:0 0 auto; width:34px; height:34px; }
.brand__t{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.brand__t i{ display:none; font-family:var(--wp--preset--font-family--body); font-style:normal;
  font-size:.75rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--cta-ink); }
@media (min-width:1280px){ .brand__t i{ display:block; } }
.nav{ margin-left:auto; display:flex; align-items:center; gap:3px; }
.nav{ min-width:0; }
.nav a{ display:inline-flex; align-items:center; min-height:44px; padding:6px 9px; border-radius:var(--r-sm);
  color:var(--primary); font-weight:600; font-size:.9375rem; text-decoration:none; position:relative; white-space:nowrap; }
.nav a::after{ content:""; position:absolute; left:9px; right:9px; bottom:8px; height:2px;
  background:var(--cta); transform:scaleX(0); transform-origin:left; transition:transform var(--t-fast); }
.nav a:hover::after,.nav a[aria-current="page"]::after{ transform:scaleX(1); }
.nav a[aria-current="page"]{ color:var(--head); }
.navcall{ flex:0 0 auto; margin-left:8px; }
.burger{ flex:0 0 auto; display:none; align-items:center; justify-content:center; gap:8px;
  min-width:48px; min-height:48px; padding:0 12px; margin-left:auto;
  background:transparent; border:2px solid var(--line-strong); border-radius:var(--r-sm);
  color:var(--primary); font-weight:700; font-size:.9375rem; cursor:pointer; }
.burger i{ display:block; width:19px; height:2px; background:currentColor; position:relative; }
.burger i::before,.burger i::after{ content:""; position:absolute; left:0; width:19px; height:2px; background:currentColor; }
.burger i::before{ top:-6px; } .burger i::after{ top:6px; }
@media (max-width:1179px){
  .nav{ display:none; }
  .burger{ display:inline-flex; margin-left:0; order:3; }
  /* the brand absorbs the slack here, so the call button and burger always keep their full
     width — the reverse (a fixed brand) pushed the burger off-screen at 320px */
  .brand{ flex:1 1 auto; }
  .navcall{ margin-left:auto; order:2; }
}
@media (max-width:520px){ .navcall .btn{ padding-inline:15px; } .navcall .btn span{ display:none; } }
@media (max-width:380px){ .burger span{ display:none; } .burger{ min-width:44px; padding-inline:0; } }

/* the drawer. visibility:hidden (not aria-hidden alone) removes the links from the tab order —
   aria-hidden on a still-focusable drawer is the axe SERIOUS aria-hidden-focus. */
.drawer{ position:fixed; inset:0; z-index:90; visibility:hidden; }
.drawer__scrim{ position:absolute; inset:0; background:rgba(6,32,42,.55); opacity:0; transition:opacity var(--t-slow); }
.drawer__p{ position:absolute; top:0; right:0; bottom:0; width:min(400px,90vw); background:var(--surface);
  transform:translateX(100%); transition:transform var(--t-slow); display:flex; flex-direction:column;
  padding:18px var(--gutter) 28px; overflow-y:auto; }
.drawer.is-open{ visibility:visible; }             /* NOT transitioned — a focus-on-open would
                                                      otherwise land on a still-hidden element */
.drawer.is-open .drawer__scrim{ opacity:1; }
.drawer.is-open .drawer__p{ transform:translateX(0); }
.drawer__x{ align-self:flex-end; min-width:48px; min-height:48px; background:transparent;
  border:2px solid var(--line-strong); border-radius:var(--r-sm); color:var(--primary); font-size:1.25rem; cursor:pointer; }
.drawer__l{ display:flex; flex-direction:column; gap:2px; margin-top:14px; }
.drawer__l a{ display:flex; align-items:center; min-height:52px; padding:8px 4px;
  border-bottom:1px solid var(--line); color:var(--primary); font-weight:700; font-size:1.0625rem; text-decoration:none; }
.drawer__l a[aria-current="page"]{ color:var(--cta-ink); }
.drawer__cta{ margin-top:22px; }

/* the sticky mobile call bar — the single most important element on the site */
.calltab{ position:fixed; left:0; right:0; bottom:0; z-index:70; display:none;
  background:var(--dark); border-top:2px solid var(--brand);
  padding:9px var(--gutter) calc(9px + env(safe-area-inset-bottom)); }
.calltab a{ display:flex; align-items:center; justify-content:center; gap:11px; min-height:54px;
  background:var(--cta); color:#fff; border-radius:var(--r-pill); text-decoration:none;
  font-weight:800; font-size:1.0625rem; padding-inline:18px; text-align:center; }
.calltab b{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.calltab small{ display:block; font-size:.75rem; font-weight:600; color:var(--dark-muted);
  text-align:center; margin-top:5px; }
@media (max-width:1179px){ .calltab{ display:block; } body{ padding-bottom:104px; } }

.totop{ position:fixed; right:16px; bottom:118px; z-index:65; width:48px; height:48px;
  display:grid; place-items:center; background:var(--surface); color:var(--primary);
  border:2px solid var(--line-strong); border-radius:var(--r-pill); cursor:pointer;
  opacity:0; pointer-events:none; transition:opacity var(--t-slow); }
.totop.is-on{ opacity:1; pointer-events:auto; }
/* it floats over EVERY band, so no single ring colour works — dual ring, ~18:1 layer contrast */
.totop:focus-visible{ outline:3px solid var(--surface); box-shadow:0 0 0 3px var(--surface),0 0 0 6px var(--focus); }
@media (min-width:1180px){ .totop{ bottom:22px; } }

.site-footer{ background:var(--dark); color:var(--dark-muted); padding-block:clamp(44px,5vw,72px) 0; }
.site-footer h2,.site-footer h3{ color:#fff; font-size:1rem; letter-spacing:.09em; text-transform:uppercase;
  font-family:var(--wp--preset--font-family--body); font-weight:800; margin-bottom:14px; }
.fgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr)); gap:clamp(24px,3vw,44px); }
.fgrid ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.fgrid a{ color:var(--dark-muted); text-decoration:none; font-size:1rem; }
.fgrid a:hover{ color:var(--brand); text-decoration:underline; }
.ftel{ display:inline-flex; align-items:center; min-height:44px; padding-block:6px;
  color:var(--cta-light); font-family:var(--wp--preset--font-family--display);
  font-weight:800; font-size:1.5rem; text-decoration:none; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.ftel:hover{ color:#fff; }
.colophon{ margin-top:clamp(32px,4vw,52px); border-top:1px solid rgba(167,198,205,.24);
  padding-block:22px; display:flex; flex-wrap:wrap; gap:10px 26px; align-items:center; justify-content:space-between;
  font-size:.9375rem; }
.colophon nav{ display:flex; flex-wrap:wrap; gap:2px 8px; }
.colophon nav a{ display:inline-flex; align-items:center; min-height:44px; padding-inline:8px; }
.colophon a{ color:var(--dark-muted); }

/* ── 16b · BORDERED OBJECTS ARE OPAQUE ───────────────────────────────────────────────── */
/* A ruled object may be pulled ACROSS a seam, and a seam element sits over the band above it.
   If the object paints no background of its own, that band shows through and its ink lands on
   the wrong ground: a white section's .ledger overlapping a --primary hero measured 1.62:1,
   while walking the DOM for a background still reported white. Only a composite check sees it.
   So every bordered object paints its own ground — surface in a light band, dark in a dark one,
   which is exactly the behaviour the transparent version happened to have. */
.ledger,.cabinet,.trust,.compare,.faq,.glist,.rows{ background:var(--surface); }
.section--bg :is(.ledger,.cabinet,.trust,.compare,.faq,.glist,.rows){ background:var(--bg); }
.section--tint :is(.ledger,.cabinet,.trust,.compare,.faq,.glist,.rows){ background:var(--tint); }
.section--subtle :is(.ledger,.cabinet,.trust,.compare,.faq,.glist,.rows){ background:var(--primary-subtle); }
.section--steel :is(.ledger,.cabinet,.trust,.compare,.faq,.glist,.rows),
.hero--steel :is(.ledger,.cabinet,.trust,.compare,.faq,.glist,.rows){ background:var(--steel); }
.section--dark :is(.ledger,.cabinet,.trust,.compare,.faq,.glist,.rows),
.section--primary :is(.ledger,.cabinet,.trust,.compare,.faq,.glist,.rows),
.on-dark :is(.ledger,.cabinet,.trust,.compare,.faq,.glist,.rows),
.ledger--dark,.trust--dark{ background:var(--dark); }

/* ── 17 · BAND-INK CONTAINMENT ────────────────────────────────────────────────────────── */
/* A primitive that paints its own LIGHT fill inside a dark band inherits the band's white ink
   and renders white-on-white. Every such primitive needs an entry here — and, just as important,
   nothing else may be in the list.
   Containment applied to the wrong primitive is the mirror-image bug and just as invisible:
   `.keypad__c` and `.notch__in` are painted --dark INSIDE a dark band, so giving them --ink
   printed #14232a on #06202a at 1.1:1. `.trust__i`, `.ledger__v`, `.cabinet__p` and `.glist__i`
   paint no background at all, so they must keep the band's white.
   Rule of thumb: it belongs here only if it sets a light `background` of its own. */
.section--dark  :is(.card:not(.card--dark),.compare__s--tint,.compare__s--danger,.ledger__l,.notice,.media),
.section--primary :is(.card:not(.card--dark),.compare__s--tint,.compare__s--danger,.ledger__l,.notice,.media){
  color:var(--ink);
}
.section--dark  :is(.card:not(.card--dark),.notice) :is(h1,h2,h3,h4),
.section--primary :is(.card:not(.card--dark),.notice) :is(h1,h2,h3,h4){ color:var(--head); }
.section--dark  :is(.card:not(.card--dark),.notice,.compare__s--tint) p,
.section--primary :is(.card:not(.card--dark),.notice,.compare__s--tint) p{ color:var(--muted); }
.section--dark  .notice b,.section--primary .notice b{ color:var(--danger); }
.section--dark  .notice--info b,.section--primary .notice--info b{ color:var(--cta-ink); }
.section--dark  .notice--brand b,.section--primary .notice--brand b{ color:var(--primary); }
/* …and a link inside one of those light islands must not stay turquoise-on-white (2.2:1).
   The :not() CHAIN below is not decoration — the dark-band link rule further down carries six
   :not() clauses and therefore scores (0,7,1). A shorter selector here, however specific it
   looks, silently loses to it: the :not() chain outranks the component it was excluding for.
   This rule must carry at least the same chain to win. */
.section--dark  :is(.card:not(.card--dark),.notice,.compare__s--tint,.compare__s--danger,.ledger__l) a:not(.btn):not(.chip):not(.telbig):not(.brand):not(.ftel):not(.rows__r),
.section--primary :is(.card:not(.card--dark),.notice,.compare__s--tint,.compare__s--danger,.ledger__l) a:not(.btn):not(.chip):not(.telbig):not(.brand):not(.ftel):not(.rows__r){
  color:var(--primary);
}
.section--dark  :is(.card:not(.card--dark),.notice) a:hover,
.section--primary :is(.card:not(.card--dark),.notice) a:hover{ color:var(--cta-ink); }
/* a dark card keeps the dark-band link treatment, at the same weight as the :not() chain */
.section--dark  .card--dark a:not(.btn):not(.chip):not(.telbig):not(.brand):not(.ftel):not(.rows__r),
.section--primary .card--dark a:not(.btn):not(.chip):not(.telbig):not(.brand):not(.ftel):not(.rows__r){ color:var(--brand); }
/* The mirror case: primitives that paint NO background of their own but set their secondary text
   to --muted. On a dark band that is #46606a on #06202a = 2.3:1. Each needs the dark equivalent.
   (.iclist, .timeline, .stepper and .stats already carry theirs in their own sections.) */
.section--dark  :is(.trust__i,.ledger__v,.cabinet__p,.glist__i,.keypad__c,.notch__in) :is(p,dd,span,.muted),
.section--primary :is(.trust__i,.ledger__v,.cabinet__p,.glist__i,.keypad__c,.notch__in) :is(p,dd,span,.muted),
.section--dark  .rows__t span,.section--primary .rows__t span{ color:var(--dark-muted); }
/* .glist__i dt is transparent over the dark ground, so turquoise is right for it.
   .ledger__l is NOT: it paints its own --tint cell, so turquoise on it is 1.9:1. It is a light
   island and takes the light-island ink. (:is() scores its highest argument, so the old combined
   rule outranked the containment block and repainted the label cell.) */
.section--dark  .glist__i dt,.section--primary .glist__i dt{ color:var(--brand); }
.section--dark  .ledger__l,.section--primary .ledger__l{ color:var(--primary); }
.section--dark  .ledger--dark .ledger__l,.section--primary .ledger--dark .ledger__l{ color:var(--brand); }

/* …but a card that is ITSELF dark keeps the dark treatment */
.section--dark .card--dark,.section--primary .card--dark{ background:var(--dark); color:#fff; border-color:rgba(167,198,205,.3); }
.section--dark .card--dark :is(h2,h3,h4),.section--primary .card--dark :is(h2,h3,h4){ color:#fff; }
.section--dark .card--dark p,.section--primary .card--dark p{ color:var(--dark-muted); }

/* Ink for the dark bands themselves. The :not() chain is load-bearing: a bare
   `.section--dark a{color:…}` is (0,1,1) and silently beats every .btn/.chip (0,1,0), which
   renders a call button's label in its own background colour at ~1.4:1. */
.section--dark,.section--primary,.on-dark{ color:#fff; }
.section--dark :is(h1,h2,h3,h4),.section--primary :is(h1,h2,h3,h4),.on-dark :is(h1,h2,h3,h4){ color:#fff; }
.section--dark .lead,.section--primary .lead,.on-dark .lead,
.section--dark .muted,.section--primary .muted,.on-dark .muted{ color:var(--dark-muted); }
.section--dark .eyebrow,.section--primary .eyebrow,.on-dark .eyebrow{ color:var(--brand); }
.section--dark a:not(.btn):not(.chip):not(.telbig):not(.brand):not(.ftel):not(.rows__r),
.section--primary a:not(.btn):not(.chip):not(.telbig):not(.brand):not(.ftel):not(.rows__r),
.on-dark a:not(.btn):not(.chip):not(.telbig):not(.brand):not(.ftel):not(.rows__r){ color:var(--brand); }
.section--dark :is(strong,b),.section--primary :is(strong,b),.on-dark :is(strong,b){ color:#fff; }
.section--dark .hrule,.section--primary .hrule,.on-dark .hrule{ background:rgba(167,198,205,.24); }
/* A dark PANEL in a light band is dark by its own fill, not by a band class — so none of the
   rules above reach it. .on-dark re-declares the whole descendant set for exactly that case. */
.on-dark{ }

/* ── 18 · motion ──────────────────────────────────────────────────────────────────────── */
/* Reveal by a PERCENTAGE of the element's own height, so tall and short blocks auto-stagger. */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .55s ease,transform .55s cubic-bezier(.22,.61,.36,1); }
.reveal.in{ opacity:1; transform:none; }
.d1{ transition-delay:.07s; } .d2{ transition-delay:.14s; } .d3{ transition-delay:.21s; } .d4{ transition-delay:.28s; }
/* Scripting off must not blank the page. The chrome ships a <noscript> that sets this. */
.no-js .reveal{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .btn--call::before{ display:none; }
}

/* ── 19 · utilities ───────────────────────────────────────────────────────────────────── */
.stack{ display:grid; gap:clamp(16px,2vw,26px); }
.stack--sm{ gap:12px; }
.stack--lg{ gap:clamp(26px,3.4vw,46px); }
.cluster{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.split{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:clamp(24px,4vw,60px); align-items:center; }
.split--top{ align-items:start; }
.split > *{ min-width:0; }
.split--flip > *:first-child{ order:2; }
@media (max-width:672px){ .split--flip > *:first-child{ order:0; } }
.center{ text-align:center; }
.vh{ position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
.crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:2px 4px; font-size:.9375rem; color:var(--muted); margin-bottom:14px; }
.crumbs a{ display:inline-flex; align-items:center; min-height:44px; padding-inline:6px; color:var(--muted); }
.crumbs > span[aria-current]{ padding-inline:6px; }
.crumbs a:hover{ color:var(--cta-ink); }
.crumbs span[aria-hidden]{ color:var(--line-strong); }
.section--dark .crumbs,.on-dark .crumbs{ color:var(--dark-muted); }
.section--dark .crumbs a,.on-dark .crumbs a{ color:var(--dark-muted); }

/* ── 20 · hero shells (the per-page variety menu; layout only) ─────────────────────────── */
.hero{ position:relative; padding-block:clamp(40px,5.2vw,86px); }
.hero--dark{ background:var(--dark); color:#fff; }
.hero--primary{ background:var(--primary); color:#fff; }
.hero--tint{ background:var(--tint); }
.hero--steel{ background-color:var(--steel);
  background-image:repeating-linear-gradient(90deg,rgba(6,32,42,.055) 0 1px,transparent 1px 7px),
                   repeating-linear-gradient(90deg,rgba(18,190,220,.06) 0 1px,transparent 1px 29px); }
.hero__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));
  gap:clamp(26px,4vw,58px); align-items:center; }
.hero__grid--top{ align-items:start; }
.hero h1{ margin-bottom:.34em; }
.hero .lead{ margin-bottom:26px; }
.hero__act{ display:flex; flex-wrap:wrap; gap:14px 18px; align-items:center; }
.hero__meta{ display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:22px; font-size:1rem; color:var(--muted); }
.hero--dark .hero__meta,.hero--primary .hero__meta{ color:var(--dark-muted); }
.hero__meta span{ display:inline-flex; align-items:center; gap:9px; }
.hero__meta span::before{ content:""; width:7px; height:7px; background:var(--brand); transform:rotate(45deg); flex:0 0 auto; }
/* the vertical trust rail overhanging the hero */
.hrail{ display:grid; gap:16px; padding-left:20px; border-left:3px solid var(--brand); }
.hrail b{ display:block; font-family:var(--wp--preset--font-family--display); font-size:1rem; }
.hrail p{ margin:0; color:var(--muted); font-size:.9375rem; }
.hero--dark .hrail p,.hero--primary .hrail p{ color:var(--dark-muted); }

/* ── 21 · print ───────────────────────────────────────────────────────────────────────── */
@media print{
  .site-header,.calltab,.totop,.drawer,.site-footer{ display:none!important; }
  body{ padding-bottom:0; }
  .reveal{ opacity:1; transform:none; }
}