/* The Rustenburg Plumbers
   Brand concept: research/brand-concept.md
   Graphite ink / bushveld green / platinum greys, Zilla Slab + IBM Plex Sans, 2px radius,
   the Magaliesberg ridge as the structural edge, motion verb "rise". */

:root{
  --ink:#1b1e22;
  --ink-2:#2b2f34;
  --brand:#1f5135;
  --brand-2:#173f29;
  --act:#277a46;
  --act-lt:#8fd6a8;
  --paper:#eff1f3;
  --white:#fff;
  --line:#d5dade;
  --muted:#4f565d;
  --muted-on-dark:#b8c0c7;
  --radius:2px;
  --wrap:1240px;
  --gutter:24px;
  --head:"Zilla Slab",Rockwell,Georgia,serif;
  --body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --sec:clamp(64px,8vw,112px);
}
@media (max-width:700px){ :root{ --gutter:16px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-padding-top:96px; }
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }
body{
  margin:0; background:var(--white); color:var(--ink);
  font:400 1.0625rem/1.62 var(--body);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
@media (min-width:1100px){ body{ font-size:1.125rem; } }
img{ max-width:100%; height:auto; display:block; }
picture{ display:contents; }
picture > source{ display:none; }
h1,h2,h3,h4{ font-family:var(--head); font-weight:700; letter-spacing:-.012em; line-height:1.06; margin:0; text-wrap:balance; }
h3{ font-weight:700; letter-spacing:-.005em; line-height:1.2; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }
a{ color:inherit; text-decoration-line:underline; text-decoration-thickness:1px; text-underline-offset:.18em; }
a:hover{ color:var(--brand); }
strong{ font-weight:600; }
ul,ol{ margin:0; padding:0; }
:focus-visible{ outline:3px solid var(--act); outline-offset:3px; }
.sr{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.wrap{ width:100%; max-width:calc(var(--wrap) + var(--gutter)*2); margin:0 auto; padding:0 var(--gutter); }

/* ---------- icons: RR line icons as masks, coloured by currentColor ---------- */
.ic{ display:inline-block; flex:none; width:1em; height:1em; background:currentColor;
  -webkit-mask:var(--m) center/contain no-repeat; mask:var(--m) center/contain no-repeat; }
.ic[data-i="valve"]{--m:url(/img/icons/valve.png)}
.ic[data-i="valve-gate"]{--m:url(/img/icons/valve-gate.png)}
.ic[data-i="geyser"]{--m:url(/img/icons/geyser.png)}
.ic[data-i="geyser-install"]{--m:url(/img/icons/geyser-install.png)}
.ic[data-i="boiler"]{--m:url(/img/icons/boiler.png)}
.ic[data-i="leak"]{--m:url(/img/icons/leak.png)}
.ic[data-i="pool"]{--m:url(/img/icons/pool.svg)}
.ic[data-i="plunger"]{--m:url(/img/icons/plunger.png)}
.ic[data-i="drain-camera"]{--m:url(/img/icons/drain-camera.png)}
.ic[data-i="pressure"]{--m:url(/img/icons/pressure.png)}
.ic[data-i="gauge"]{--m:url(/img/icons/gauge.png)}
.ic[data-i="bath"]{--m:url(/img/icons/bath.png)}
.ic[data-i="faucet"]{--m:url(/img/icons/faucet.png)}
.ic[data-i="toilet"]{--m:url(/img/icons/toilet.png)}
.ic[data-i="plumbing"]{--m:url(/img/icons/plumbing.png)}
.ic[data-i="pipe"]{--m:url(/img/icons/pipe.png)}
.ic[data-i="commercial"]{--m:url(/img/icons/commercial.png)}
.ic[data-i="price"]{--m:url(/img/icons/price.png)}
.ic[data-i="invoice"]{--m:url(/img/icons/invoice.png)}
.ic[data-i="insurance"]{--m:url(/img/icons/insurance.png)}
.ic[data-i="pump"]{--m:url(/img/icons/pump.png)}
.ic[data-i="jojo"]{--m:url(/img/icons/jojo.png)}
.ic[data-i="element"]{--m:url(/img/icons/element.png)}
.ic[data-i="check"]{--m:url(/img/icons/check.png)}
.ic[data-i="location"]{--m:url(/img/icons/location.png)}
.ic[data-i="afterhours"]{--m:url(/img/icons/afterhours.png)}
.ic[data-i="warning"]{--m:url(/img/icons/warning.png)}
.ic[data-i="drop"]{--m:url(/img/icons/drop.png)}
.ic[data-i="house-wrench"]{--m:url(/img/icons/house-wrench.png)}
.ic[data-i="drops"]{--m:url(/img/icons/drops.png)}
.ic[data-i="inspection"]{--m:url(/img/icons/inspection.png)}
.ic[data-i="clean"]{--m:url(/img/icons/clean.png)}
.ic[data-i="steam"]{--m:url(/img/icons/steam.png)}
.ic[data-i="solar"]{--m:url(/img/icons/solar.png)}
.ic[data-i="house"]{--m:url(/img/icons/house.png)}
.ic[data-i="housing"]{--m:url(/img/icons/housing.png)}
.ic[data-i="cost"]{--m:url(/img/icons/cost.png)}
.ic[data-i="burst"]{--m:url(/img/icons/burst.png)}

/* ---------- buttons (BT1: flat green, graphite rises on hover) ---------- */
.btn{
  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  min-height:50px; padding:.8em 1.45em; border:0; border-radius:var(--radius);
  background:var(--act); color:#fff; cursor:pointer;
  font:600 1rem/1.1 var(--body); text-decoration:none; white-space:nowrap;
  transition:color .2s var(--ease);
}
.btn::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--ink);
  transform:scaleY(0); transform-origin:bottom; transition:transform .28s var(--ease); }
.btn:hover{ color:#fff; }
.btn:hover::before,.btn:focus-visible::before{ transform:scaleY(1); }
.btn:active{ transform:translateY(1px); }
.btn--light{ background:#fff; color:var(--ink); }
.btn--light::before{ background:var(--act-lt); }
.btn--light:hover{ color:var(--ink); }
.btn--full{ width:100%; }
.btn[disabled]{ opacity:.7; cursor:progress; }
@media (prefers-reduced-motion:reduce){ .btn::before{ transition:none; } }

/* ---------- header (white, hides on scroll down, shows on scroll up) ---------- */
.hd{ position:sticky; top:0; z-index:50; background:#fff; transition:transform .3s var(--ease), box-shadow .3s; }
.hd.is-up{ box-shadow:0 10px 24px -18px rgba(27,30,34,.45); }
.hd.is-hidden{ transform:translateY(-100%); }
.hd__in{ display:flex; align-items:center; gap:28px; height:78px; }
.logo{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink); flex:none; }
.logo img{ width:44px; height:44px; }
.logo__words{ display:flex; flex-direction:column; line-height:1; }
.logo__small{ font:600 .62rem/1 var(--body); letter-spacing:.24em; text-transform:uppercase; color:var(--brand); }
.logo__big{ font:700 1.55rem/1 var(--head); letter-spacing:-.01em; margin:2px 0 1px; }
.logo:hover{ color:var(--ink); }

.nav{ display:flex; align-items:center; gap:2px; margin-left:auto; }
.nav__item{ position:relative; }
.nav__link, .nav__btn{
  display:flex; align-items:center; gap:6px; height:44px; padding:0 12px;
  background:none; border:0; cursor:pointer; color:var(--ink);
  font:500 .98rem/1 var(--body); text-decoration:none; border-radius:var(--radius);
}
.nav__btn::after{ content:""; width:7px; height:7px; border:solid currentColor; border-width:0 1.8px 1.8px 0; transform:translateY(-2px) rotate(45deg); transition:transform .2s; }
.nav__btn[aria-expanded="true"]::after{ transform:translateY(2px) rotate(-135deg); }
.nav__link:hover,.nav__btn:hover,.nav__btn[aria-expanded="true"]{ color:var(--brand); }
.nav__link[aria-current="page"], .nav__item.is-current > .nav__btn{ color:var(--brand); box-shadow:inset 0 -3px 0 var(--act); border-radius:0; }
.panel{
  position:absolute; top:calc(100% + 10px); left:-8px; width:340px; padding:10px;
  background:#fff; border-radius:var(--radius);
  box-shadow:0 22px 40px -22px rgba(27,30,34,.5), 0 0 0 1px rgba(27,30,34,.06);
  display:none;
}
.panel.is-open{ display:block; }
.panel a{ display:grid; grid-template-columns:30px 1fr; gap:2px 12px; padding:12px; text-decoration:none; border-radius:var(--radius); }
.panel a:hover{ background:var(--paper); color:var(--ink); }
.panel a:hover .panel__t{ color:var(--brand); }
.panel .ic{ grid-row:span 2; width:30px; height:30px; color:var(--brand); margin-top:2px; }
.panel__t{ font-weight:600; }
.panel__d{ font-size:.86rem; color:var(--muted); line-height:1.35; }
.hd__cta{ margin-left:10px; }
.burger{ display:none; }

@media (max-width:1180px){
  .nav__link,.nav__btn{ padding:0 9px; font-size:.94rem; }
  .hd__in{ gap:16px; }
}
@media (max-width:1060px){
  .hd__in{ height:68px; }
  .nav, .hd__cta{ display:none; }
  .burger{ display:flex; align-items:center; justify-content:center; margin-left:auto; margin-right:-10px;
    width:48px; height:48px; background:none; border:0; cursor:pointer; color:var(--ink); }
  .burger span{ position:relative; width:24px; height:2px; background:currentColor; transition:background .2s; }
  .burger span::before,.burger span::after{ content:""; position:absolute; left:0; width:24px; height:2px; background:currentColor; transition:transform .25s var(--ease); }
  .burger span::before{ top:-7px; } .burger span::after{ top:7px; }
  .burger[aria-expanded="true"] span{ background:transparent; }
  .burger[aria-expanded="true"] span::before{ transform:translateY(7px) rotate(45deg); }
  .burger[aria-expanded="true"] span::after{ transform:translateY(-7px) rotate(-45deg); }
  .logo img{ width:40px; height:40px; }
  .logo__big{ font-size:1.32rem; }
}

/* mobile menu: MM1 full-screen drill-down */
.mm{ position:fixed; inset:68px 0 0 0; z-index:49; background:#fff; overflow:hidden; display:none; }
.mm.is-open{ display:block; }
body.mm-open .hd{ position:fixed; left:0; right:0; transform:none; }
body.mm-open{ overflow:hidden; }
.mm__track{ display:flex; width:200%; height:100%; transition:transform .3s var(--ease); }
.mm.is-sub .mm__track{ transform:translateX(-50%); }
.mm__pane{ width:50%; height:100%; overflow-y:auto; padding:8px var(--gutter) 32px; display:flex; flex-direction:column; }
.mm__list{ list-style:none; }
.mm__list a, .mm__list button{
  display:flex; align-items:center; justify-content:space-between; width:100%; min-height:56px;
  padding:0; background:none; border:0; border-bottom:1px solid var(--line); cursor:pointer;
  font:600 1.12rem/1.2 var(--body); color:var(--ink); text-decoration:none; text-align:left;
}
.mm__list button::after{ content:""; width:8px; height:8px; border:solid var(--muted); border-width:2px 2px 0 0; transform:rotate(45deg); margin-right:4px; }
.mm__back{ display:flex; align-items:center; gap:10px; min-height:52px; background:none; border:0; padding:0; cursor:pointer; font:500 1rem var(--body); color:var(--brand); }
.mm__back::before{ content:""; width:8px; height:8px; border:solid currentColor; border-width:0 0 2px 2px; transform:rotate(45deg); }
.mm__subhead{ font:700 1.5rem/1.1 var(--head); margin:4px 0 8px; }
.mm__sub{ display:none; }
.mm__sub.is-active{ display:block; }
.mm__sub .mm__list a{ flex-direction:column; align-items:flex-start; justify-content:center; padding:10px 0; }
.mm__sub .mm__list a small{ font:400 .9rem/1.3 var(--body); color:var(--muted); margin-top:2px; }
.mm__cta{ margin-top:24px; }
@media (prefers-reduced-motion:reduce){ .mm__track{ transition:none; } }

/* ---------- hero: big slab type and the job photo left, the graphite call-out panel right ---------- */
.hero{ background:var(--paper); padding:clamp(24px,3vw,40px) 0 0; position:relative; }
.crumbs{ display:flex; flex-wrap:wrap; gap:6px; list-style:none; font-size:.88rem; color:var(--muted); margin-bottom:14px; }
.crumbs li:not(:last-child)::after{ content:"/"; margin-left:6px; color:var(--line); }
.crumbs a{ text-decoration:none; } .crumbs a:hover{ text-decoration:underline; }
.hero__grid{ display:grid; grid-template-columns:minmax(0,7fr) minmax(350px,5fr); align-items:stretch; }
.hero__main{ display:flex; flex-direction:column; padding-right:clamp(28px,3.5vw,56px); }
.hero h1{ font-size:clamp(2.4rem,4.1vw,3.6rem); }
.hero__lede{ font-size:1.06rem; color:var(--ink-2); max-width:62ch; margin:14px 0 clamp(22px,2.6vw,32px); }
.hero__lede a{ color:var(--brand); font-weight:500; }
.hero__jump{ display:none; align-self:flex-start; margin:0 0 24px; }
.hero__photo{ position:relative; flex:1; min-height:300px; overflow:hidden; border-radius:var(--radius) var(--radius) 0 0; background:var(--ink); }
.hero__photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero:not(.hero--svc) .hero__photo{ min-height:420px; }
.ridge{ position:absolute; left:0; right:0; bottom:-1px; width:100%; height:clamp(40px,5vw,80px); z-index:1; display:block; }
.ridge path{ fill:var(--ridge,var(--ink)); }
.hero__card{ display:flex; margin-top:-2px; }
.hero__card .card{ flex:1; display:flex; flex-direction:column; justify-content:center; background:var(--ink); color:#fff; border-radius:var(--radius) var(--radius) 0 0; box-shadow:none; padding:clamp(24px,2.6vw,36px); }
.hero__card .card h2{ color:#fff; }
.hero__card .card__lead{ color:var(--muted-on-dark); }
.hero__card .f label, .hero__card .f legend{ color:#fff; }
.hero__card .f input, .hero__card .f select{ border-color:#fff; }
.hero__card .f__fine{ color:var(--muted-on-dark); }
.hero__card .f__fine a{ color:#fff; }
.hero__card .f__status.is-err{ color:#ffb4a8; }
.hero__card .f__status.is-ok, .hero__card .f__done h3{ color:var(--act-lt); }
.hero__card .btn::before{ background:var(--act-lt); }
.hero__card .btn:hover{ color:var(--ink); }
.hero + .sec{ padding-top:clamp(36px,4vw,56px); }
@media (prefers-reduced-motion:no-preference){
  .js .ridge{ transform-origin:bottom; animation:rise .95s var(--ease) .15s both; }
}
@keyframes rise{ from{ transform:scaleY(.06); } to{ transform:scaleY(1); } }

@media (max-width:1060px){
  .hero__grid{ grid-template-columns:minmax(0,1fr); }
  .hero__main{ padding-right:0; }
  .hero__jump{ display:inline-flex; }
  .hero__photo{ flex:none; min-height:0; aspect-ratio:16/10; }
  .hero__card .card{ border-radius:0; }
}
@media (max-width:700px){
  .hero__photo{ aspect-ratio:4/3; margin:0 calc(var(--gutter) * -1); border-radius:0; }
  .hero__card{ margin:0 calc(var(--gutter) * -1); }
}

/* ---------- call-out form ---------- */
.card{ background:#fff; border-radius:var(--radius); padding:26px 26px 22px; box-shadow:0 30px 60px -36px rgba(27,30,34,.55); }
.card h2{ font-size:1.55rem; margin-bottom:6px; }
.card__lead{ font-size:.95rem; color:var(--muted); margin-bottom:18px; line-height:1.45; }
.f{ display:grid; gap:14px; }
.f__row{ display:grid; gap:6px; }
.f__two{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.f label, .f legend{ font:600 .9rem/1.2 var(--body); color:var(--ink); padding:0; }
.f input, .f select, .f textarea{
  width:100%; max-width:100%; min-width:0; min-height:46px; padding:10px 12px; border:1.5px solid #b9c4c1; border-radius:var(--radius);
  font:400 1rem/1.3 var(--body); color:var(--ink); background:#fff;
}
.f textarea{ min-height:88px; resize:vertical; }
.f select{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%); background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%; background-size:5px 5px; background-repeat:no-repeat; padding-right:36px; }
.f input:focus, .f select:focus, .f textarea:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(31,81,53,.22); }
.f fieldset{ border:0; margin:0; padding:0; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.chip{ position:relative; }
.chip input{ position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer; min-height:0; }
.chip span{ display:inline-flex; align-items:center; min-height:44px; padding:0 14px; border:1.5px solid #b9c4c1; border-radius:var(--radius); font-size:.92rem; font-weight:500; background:#fff; }
.chip input:checked + span{ border-color:var(--brand); background:var(--brand); color:#fff; }
.chip input:focus-visible + span{ outline:3px solid var(--act); outline-offset:2px; }
.f [aria-invalid="true"]{ border-color:#c0392b!important; box-shadow:0 0 0 3px rgba(192,57,43,.2); }
.hero__card .f [aria-invalid="true"]{ border-color:#ffb4a8!important; box-shadow:0 0 0 3px rgba(255,180,168,.35); }
.f__fine{ font-size:.8rem; color:var(--muted); line-height:1.4; margin:2px 0 0; }
.f__hp{ position:absolute; left:-9999px; }
.f__status{ font-size:.95rem; font-weight:500; margin:0; }
.f__status.is-ok{ color:var(--brand); }
.f__status.is-err{ color:#a3271b; }
.f.is-sent .f__fields{ display:none; }
.f__done{ display:none; }
.f.is-sent .f__done{ display:block; }
.f__done h3{ font-size:1.25rem; margin-bottom:6px; }
@media (max-width:420px){ .f__two{ grid-template-columns:minmax(0,1fr); } }

/* ---------- sections ---------- */
.sec{ padding:var(--sec) 0; }
.sec--paper{ background:var(--paper); }
.sec--white + .sec--white{ padding-top:calc(var(--sec) * .55); }
.sec--ink{ background:var(--ink); color:#fff; }
.sec--ink a{ color:#fff; }
.sh{ max-width:760px; margin-bottom:clamp(28px,4vw,48px); }
.sh h2{ font-size:clamp(1.85rem,3.5vw,2.75rem); }
.sh p{ margin-top:12px; color:var(--muted); font-size:1.06rem; }
.sec--ink .sh p{ color:var(--muted-on-dark); }

/* service index (home): categories with rows */
.idx{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px 72px; }
.idx__g h3{ display:flex; align-items:center; gap:12px; font-size:1.2rem; margin-bottom:6px; }
.idx__g h3 .ic{ width:34px; height:34px; color:var(--brand); }
.idx__g > p{ font-size:.95rem; color:var(--muted); margin:0 0 10px; line-height:1.45; }
.idx__rows{ list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:4px 28px; }
.idx__rows li{ position:relative; padding:9px 0; }
.idx__rows a{ font-weight:600; text-decoration:none; color:var(--ink); }
.idx__rows a::after{ content:""; position:absolute; inset:0; }
.idx__rows li:hover a{ color:var(--brand); text-decoration:underline; text-decoration-thickness:2px; }
.idx__rows span{ display:block; font-size:.9rem; color:var(--muted); line-height:1.4; margin-top:2px; }
@media (max-width:1000px){ .idx{ grid-template-columns:minmax(0,1fr); gap:40px; } }
@media (max-width:640px){ .idx__rows{ grid-template-columns:minmax(0,1fr); } }

/* what we handle (service pages): icon beside title, two columns, no boxes */
.handle{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px 56px; list-style:none; }
.handle li{ display:grid; grid-template-columns:44px 1fr; gap:4px 16px; }
.handle .ic{ width:40px; height:40px; color:var(--brand); grid-row:span 2; margin-top:2px; }
.handle h3{ font-size:1.12rem; }
.handle p{ font-size:.98rem; color:var(--muted); margin:0; }
.handle a{ color:var(--brand); }
@media (max-width:760px){ .handle{ grid-template-columns:minmax(0,1fr); gap:24px; } }

/* the hook + the Rustenburg file */
.hook{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,4fr); gap:40px clamp(40px,6vw,88px); align-items:start; }
.hook__text h2{ font-size:clamp(1.85rem,3.4vw,2.6rem); margin-bottom:22px; }
.hook__text p{ max-width:68ch; }
.hook__text h3{ font-size:1.22rem; margin:28px 0 10px; }
.hook__take{ margin-top:28px; font-weight:600; font-size:1.06rem; max-width:62ch; }
.hook__take::before{ content:""; display:block; width:56px; height:4px; background:var(--act); margin-bottom:14px; }
.file{ position:sticky; top:100px; background:#fff; padding:24px 24px 20px; border-radius:var(--radius); }
.sec--white .file{ background:var(--paper); }
.file__h{ display:flex; align-items:center; gap:10px; font:700 1.05rem/1.2 var(--head); text-transform:uppercase; letter-spacing:.04em; margin:0 0 14px; }
.file__h .ic{ width:26px; height:26px; color:var(--act); }
.file dl{ margin:0; }
.file dt{ font-weight:600; font-size:.97rem; line-height:1.4; }
.file dd{ margin:4px 0 16px; font-size:.8rem; color:var(--muted); line-height:1.4; }
.file dd:last-of-type{ margin-bottom:0; }
.file dd a{ color:var(--muted); }
.file__areas{ margin-top:22px; font-size:.9rem; }
.file__areas strong{ display:block; margin-bottom:4px; }
@media (max-width:980px){ .hook{ grid-template-columns:minmax(0,1fr); } .file{ position:static; } }

/* why us: WY4 on the ink band, photo left */
.why{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(36px,5vw,80px); align-items:stretch; }
.why__photo{ position:relative; min-height:100%; border-radius:var(--radius); overflow:hidden; }
.why__photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.why__list{ list-style:none; counter-reset:w; display:grid; gap:26px; margin-top:8px; }
.why__list li{ display:grid; grid-template-columns:52px 1fr; gap:4px 16px; counter-increment:w; }
.why__list li::before{ content:counter(w); grid-row:span 2; font:700 2.1rem/1 var(--head); color:var(--act-lt); }
.why__list h3{ font-size:1.2rem; color:#fff; }
.why__list p{ margin:0; color:var(--muted-on-dark); font-size:1rem; }
.why--flip{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); }
.why--flip .why__photo{ order:2; }
@media (max-width:900px){ .why{ grid-template-columns:minmax(0,1fr); } .why--flip .why__photo{ order:0; } .why__photo{ min-height:0; aspect-ratio:16/10; } .why__photo img{ position:static; } }

/* diagnostics table (home) */
.diag{ width:100%; border-collapse:collapse; font-size:1rem; }
.diag caption{ text-align:left; }
.diag th{ text-align:left; font:700 .82rem/1.2 var(--body); text-transform:uppercase; letter-spacing:.06em; color:var(--muted); padding:0 18px 12px 0; }
.diag td{ padding:18px 18px 18px 0; vertical-align:top; border-top:1px solid var(--line); line-height:1.45; }
.diag td:first-child{ font-weight:600; width:24%; }
.diag td:last-child{ width:19%; padding-right:0; }
.diag td:last-child a{ font-weight:600; color:var(--brand); text-decoration:none; }
.diag td:last-child a:hover{ text-decoration:underline; }
@media (max-width:820px){
  .diag thead{ display:none; }
  .diag, .diag tbody, .diag tr, .diag td{ display:block; width:auto!important; }
  .diag tr{ border-top:1px solid var(--line); padding:16px 0; }
  .diag td{ border:0; padding:4px 0; }
  .diag td[data-l]::before{ content:attr(data-l); display:block; font-size:.86rem; font-weight:600; color:var(--muted); }
}

/* process: P12 you do / we do */
.lanes{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:clamp(32px,5vw,72px); }
.lane h3{ font-size:1.3rem; margin-bottom:18px; display:flex; align-items:baseline; gap:10px; }
.lane h3 small{ font:500 .9rem var(--body); color:var(--muted); letter-spacing:0; }
.lane ol{ list-style:none; counter-reset:s; display:grid; gap:20px; }
.lane li{ counter-increment:s; display:grid; grid-template-columns:44px 1fr; gap:2px 14px; }
.lane li::before{ content:counter(s); grid-row:span 2; width:40px; height:40px; display:grid; place-items:center; font:700 1.15rem/1 var(--head); color:var(--brand); border:2px solid var(--brand); border-radius:var(--radius); }
.lane--we li::before{ background:var(--brand); color:#fff; }
.lane li strong{ font-size:1.05rem; line-height:1.3; padding-top:8px; }
.lane li p{ margin:0; font-size:.98rem; color:var(--muted); }
.lane--you{ padding-right:clamp(0px,2vw,24px); }
@media (prefers-reduced-motion:no-preference){
  .js .lane li{ opacity:0; transform:translateY(14px); transition:opacity .5s var(--ease), transform .6s var(--ease); }
  .js .lanes.is-in .lane li{ opacity:1; transform:none; }
  .js .lanes.is-in .lane li:nth-child(2){ transition-delay:.08s; } .js .lanes.is-in .lane li:nth-child(3){ transition-delay:.16s; }
  .js .lanes.is-in .lane li:nth-child(4){ transition-delay:.24s; } .js .lanes.is-in .lane li:nth-child(5){ transition-delay:.32s; }
}
@media (max-width:860px){ .lanes{ grid-template-columns:minmax(0,1fr); } }

/* FAQ: F3 sticky heading left, list right */
.faq{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:32px clamp(40px,6vw,96px); align-items:start; }
.faq__head{ position:sticky; top:100px; }
.faq__head h2{ font-size:clamp(1.85rem,3.4vw,2.6rem); }
.faq__head p{ margin-top:12px; color:var(--muted); }
.faq__list{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:20px; align-items:center; min-height:64px; padding:16px 0; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary h3{ font-size:1.1rem; font-weight:700; }
.faq summary::after{ content:""; flex:none; width:12px; height:12px; border:solid var(--brand); border-width:0 2.4px 2.4px 0; transform:rotate(45deg) translate(-2px,-2px); transition:transform .2s; }
.faq details[open] summary::after{ transform:rotate(-135deg); }
.faq summary:hover h3{ color:var(--brand); }
.faq__a{ padding:0 0 20px; max-width:66ch; color:var(--ink-2); }
.faq__a a{ color:var(--brand); }
@media (max-width:900px){ .faq{ grid-template-columns:minmax(0,1fr); } .faq__head{ position:static; } }

/* closing: Q6 callback + NP8 service area on the green band, the ridge as its bottom edge */
.closing{ background:var(--brand); color:#fff; padding:var(--sec) 0 calc(var(--sec) * .6); position:relative; }
.closing__grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); grid-template-areas:'head form' 'area form'; gap:28px clamp(36px,5vw,80px); align-items:start; }
.closing__head{ grid-area:head; } .closing__form{ grid-area:form; } .closing .area{ grid-area:area; }
.closing h2{ font-size:clamp(1.9rem,3.6vw,2.8rem); }
.closing__lead{ margin:14px 0 26px; color:#d2e2d7; max-width:52ch; }
.closing .card{ color:var(--ink); box-shadow:none; }
.closing .card h2{ font-size:1.55rem; }
.area h3{ font-size:1.3rem; margin-bottom:6px; color:#fff; }
.area > p{ color:#d2e2d7; font-size:.98rem; margin-bottom:18px; }
.area__cols{ columns:2; column-gap:28px; list-style:none; font-size:.98rem; }
.area__cols li{ break-inside:avoid; padding:5px 0; color:#e6efe9; }
.area__cols a{ color:#fff; font-weight:600; text-decoration:none; }
.area__cols a::after{ content:"ƒA"; margin-left:6px; color:var(--act-lt); font-weight:700; }
.area__cols a:hover{ color:var(--act-lt); text-decoration:underline; }
@media (max-width:700px){ .area__cols li{ padding:0; } .area__cols li, .area__cols a{ min-height:44px; display:flex; align-items:center; } }
.area__note{ margin-top:18px; font-size:.9rem; color:#d2e2d7; }
.closing-edge{ display:block; width:100%; height:clamp(44px,6vw,90px); background:var(--paper); }
.closing-edge path{ fill:var(--brand); }
@media (max-width:900px){ .closing__grid{ grid-template-columns:minmax(0,1fr); grid-template-areas:'head' 'form' 'area'; } }
@media (max-width:700px){ .closing .card{ margin:0 calc(var(--gutter) * -1); } }

/* prices table */
.ptable{ width:100%; border-collapse:collapse; font-size:1rem; margin:8px 0 6px; }
.ptable th{ text-align:left; font:700 .82rem/1.2 var(--body); text-transform:uppercase; letter-spacing:.06em; color:var(--muted); padding:0 16px 10px 0; }
.ptable td{ padding:14px 16px 14px 0; border-top:1px solid var(--line); vertical-align:top; line-height:1.45; }
.ptable td:nth-child(2){ font-weight:600; }
.ptable small{ display:block; color:var(--muted); font-size:.8rem; }
@media (max-width:700px){ .ptable{ font-size:.94rem; } }

/* area pages: services grid */
.svcgrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px 36px; list-style:none; }
.svcgrid li{ position:relative; display:grid; grid-template-columns:40px 1fr; gap:2px 14px; }
.svcgrid .ic{ width:36px; height:36px; color:var(--brand); grid-row:span 2; }
.svcgrid a{ font-weight:600; text-decoration:none; color:var(--ink); }
.svcgrid a::after{ content:""; position:absolute; inset:0; }
.svcgrid li:hover a{ color:var(--brand); text-decoration:underline; }
.svcgrid p{ margin:0; font-size:.93rem; color:var(--muted); line-height:1.45; }
@media (max-width:900px){ .svcgrid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .svcgrid{ grid-template-columns:minmax(0,1fr); } }

/* plain prose pages (privacy, 404) */
.prose{ max-width:72ch; }
.prose h1{ font-size:clamp(2rem,4vw,3rem); margin-bottom:24px; }
.prose h2{ font-size:1.5rem; margin:32px 0 10px; }

/* ---------- footer: FT7 two-tone ---------- */
.ft{ background:var(--paper); padding:clamp(40px,5vw,64px) 0 0; font-size:.96rem; }
.ft__grid{ display:grid; grid-template-columns:minmax(0,4fr) repeat(3,minmax(0,2.6fr)); gap:36px; padding-bottom:48px; }
.ft__brand p{ color:var(--muted); margin-top:16px; max-width:38ch; }
.ft__title{ font:700 1.05rem/1.2 var(--head); margin:0 0 14px; color:var(--brand); }
.ft ul{ list-style:none; display:grid; gap:9px; }
.ft ul a{ text-decoration:none; }
.ft ul a:hover{ text-decoration:underline; }
.ft__legal{ background:var(--ink); color:var(--muted-on-dark); font-size:.86rem; padding:18px 0; }
.ft__legal .wrap{ display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between; }
.ft__legal a{ color:#fff; }
@media (max-width:980px){ .ft__grid{ grid-template-columns:1fr 1fr; } .ft__brand{ grid-column:1/-1; } }
@media (max-width:520px){ .ft__grid{ grid-template-columns:minmax(0,1fr); } }

.sr:focus{ position:fixed!important; top:8px; left:8px; width:auto; height:auto; clip:auto; z-index:100; background:#fff; padding:10px 14px; }
.f__opt{ font-weight:400; color:var(--muted); }

/* area pages: around the area (ink band) */
.around{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,4fr); gap:40px clamp(40px,6vw,88px); align-items:start; }
.around h2{ font-size:clamp(1.7rem,3vw,2.3rem); margin-bottom:18px; }
.around p{ color:var(--muted-on-dark); max-width:66ch; }
.around p strong{ color:#fff; }
.around__h{ font:700 1.1rem/1.2 var(--head); color:var(--act-lt); margin-bottom:12px; }
.around__near ul{ list-style:none; display:grid; gap:4px; }
.around__near a{ display:inline-flex; min-height:40px; align-items:center; font-weight:600; text-decoration:none; }
.around__near a:hover{ color:var(--act-lt); text-decoration:underline; }
@media (max-width:900px){ .around{ grid-template-columns:minmax(0,1fr); } }

/* home: mechanism list */
.hook__list{ list-style:none; display:grid; gap:10px; margin:6px 0 22px; max-width:66ch; }
.hook__list li{ display:grid; grid-template-columns:22px 1fr; gap:10px; }
.hook__list li::before{ content:""; width:10px; height:10px; margin-top:.55em; background:var(--act); border-radius:1px; transform:rotate(45deg); }