/* ==========================================================================
   Gaffneys Leaking Showers | Inner pages (Phase 2)
   Loaded after site.css on inner pages only. Uses the same tokens, type scale,
   buttons, radius and motion as the homepage; adds page-level components.
   Mobile first: every block is composed for phones, then rearranged for larger screens.
   ========================================================================== */

:root{--fs-h1-inner:clamp(2rem,1.45rem + 1.9vw,2.75rem)}
.eyebrow--light{color:var(--blue)}
.h2{text-wrap:balance}
.page-inner h1,.page-inner h2,.page-inner h3{text-wrap:balance}
.page-inner main p{text-wrap:pretty}

/* ---------- Breadcrumbs ---------- */
.crumbs{margin-bottom:14px}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;font-size:.8125rem;line-height:1.4;color:var(--muted)}
.crumbs li{display:inline-flex;align-items:center}
.crumbs .icon{font-size:.8rem;margin:0 6px;opacity:.55}
.crumbs a{padding:6px 0;transition:color var(--t) var(--ease)}
.crumbs a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.crumbs [aria-current]{color:var(--ink);font-weight:600}

/* ==========================================================================
   Inner hero: compact editorial split. Text left, photo right bleeding to the
   edge of the screen. On phones: text, buttons, then a wide photo.
   ========================================================================== */
.ihero{display:grid;grid-template-columns:var(--gutter) minmax(0,1fr) var(--gutter);row-gap:24px;padding:calc(var(--header-h) + 18px) 0 var(--gutter);background:var(--paper)}
.ihero__body{grid-column:2;min-width:0}
.ihero .eyebrow{margin-bottom:12px}
.ihero h1{text-wrap:pretty;font-size:var(--fs-h1-inner);line-height:1.08;letter-spacing:-.03em;max-width:20ch}
.ihero__lead{text-wrap:pretty;margin-top:14px;max-width:50ch;font-size:var(--fs-lead);line-height:1.6;color:var(--text)}
.ihero__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.ihero__facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:24px;border-top:1px solid var(--line)}
.ihero__facts li{padding:12px 10px 0 0;font-size:.8125rem;line-height:1.35;color:var(--muted)}
.ihero__facts li+li{padding-left:12px;border-left:1px solid var(--line)}
.ihero__facts strong{display:block;font-size:.9375rem;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.ihero__media{grid-column:2;position:relative;margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:16/10;background:var(--grey)}
.ihero__media img{width:100%;height:100%;object-fit:cover;object-position:52% 50%}
.ihero__media figcaption{position:absolute;left:14px;bottom:14px;padding:6px 12px;border-radius:var(--r-pill);background:rgba(11,8,10,.62);color:#fff;font-size:.75rem;font-weight:600;letter-spacing:.02em;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
@media (max-width:479px){
  .ihero__actions .btn{flex:1 1 100%}
  .ihero__facts li{padding-right:6px}.ihero__facts li+li{padding-left:8px}
  .ihero__facts strong{font-size:.875rem}
}
@media (min-width:640px) and (max-width:1023px){.ihero__media{aspect-ratio:21/9}}
@media (min-width:1024px){
  .ihero{--side:max(var(--gutter),calc((100% - var(--max)) / 2));grid-template-columns:[full-start] var(--side) [content-start] minmax(0,54fr) [split] minmax(0,46fr) [content-end] var(--side) [full-end];
    row-gap:0;padding:var(--header-h) 0 0}
  .ihero__body{grid-column:content-start/split;align-self:center;padding:28px 56px 36px 0}
  .ihero__media{grid-column:split/full-end;aspect-ratio:auto;height:auto;min-height:400px;margin:24px 0 36px;border-radius:var(--r) 0 0 var(--r)}
  .ihero__media picture{position:absolute;inset:0}
  .ihero__media figcaption{left:20px;bottom:20px}
}
@media (min-width:1024px) and (max-width:1199px){.ihero{grid-template-columns:[full-start] var(--side) [content-start] minmax(0,58fr) [split] minmax(0,42fr) [content-end] var(--side) [full-end]}.ihero__body{padding-right:40px}.ihero__lead{font-size:1rem}}
@media (min-width:1440px){.ihero__body{padding-right:72px}}

/* ==========================================================================
   Signs: cut-away diagram with numbered marks, matched to a checklist
   ========================================================================== */
.signs{display:grid;gap:24px}
.signs__head p:last-child{margin-top:14px;color:var(--muted);max-width:52ch}
.signs__head .eyebrow{margin-bottom:12px}
.signs__fig{margin:0;padding:12px;border-radius:var(--r);background:var(--paper)}
.signs__fig figcaption{display:flex;align-items:center;gap:10px;padding:10px 8px 4px;font-size:.8125rem;color:var(--muted)}
.key-dash{width:28px;height:0;border-top:2px dashed var(--blue-ink)}
.leakmap{width:100%;height:auto}
@media (max-width:639px){
  .signs__fig{margin-inline:calc(var(--gutter) * -1);padding:8px 6px;border-radius:0}
  .spot__in{--s:1.5}
  .lm-label text{font-size:15px;letter-spacing:.12em}
}
@media (min-width:640px) and (max-width:1023px){.spot__in{--s:1.2}}
.lm-room{fill:#fff}.lm-room--hall{fill:#F5F8F9}.lm-below{fill:var(--grey)}
.lm-line{stroke:var(--ink);stroke-width:1.5}
.lm-slab{fill:url(#hatch);stroke:rgba(11,8,10,.5);stroke-width:1}
.hatch{stroke:rgba(11,8,10,.22);stroke-width:1.2}
.lm-wall{fill:#DDE5E9;stroke:rgba(11,8,10,.5);stroke-width:1}
.lm-tiles{fill:#fff;stroke:rgba(11,8,10,.5);stroke-width:1}
.lm-grid line{stroke:rgba(11,8,10,.16);stroke-width:1}
.lm-crack{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.lm-gap{fill:var(--ink)}
.lm-mould circle{fill:#39443C;opacity:.75}
.lm-silicone{fill:none;stroke:#C9D1D3;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.lm-silicone--bad{stroke:#40463F}
.lm-floor{fill:none;stroke:var(--ink);stroke-width:1.6}
.lm-drain{fill:var(--ink)}
.lm-pipe{stroke:rgba(11,8,10,.35);stroke-width:5}
.lm-lifted{stroke:var(--ink);stroke-width:3;stroke-linecap:round}
.lm-hob{fill:#fff;stroke:var(--ink);stroke-width:1.4}
.lm-glass{fill:rgba(1,154,255,.14);stroke:rgba(1,108,178,.55);stroke-width:1}
.lm-water{fill:rgba(1,154,255,.45)}
.lm-fixture{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lm-fixture--head{stroke-width:4}
.lm-spray path{fill:none;stroke:rgba(1,154,255,.7);stroke-width:1.4;stroke-dasharray:3 5;stroke-linecap:round}
.lm-damp{fill:rgba(128,104,60,.13)}
.lm-bubbles circle{fill:#fff;stroke:rgba(128,104,60,.5);stroke-width:1}
.lm-skirting{fill:#fff;stroke:var(--ink);stroke-width:1.2}
.lm-stain{fill:rgba(128,104,60,.2)}
.lm-path{fill:none;stroke:var(--blue-ink);stroke-width:2;stroke-dasharray:5 6;stroke-linecap:round}
.lm-label text{font-family:var(--font);font-size:11px;font-weight:600;letter-spacing:.2em;fill:rgba(11,8,10,.42)}
.spot{cursor:default}
.spot__in{--s:1;transform:scale(var(--s));transform-box:fill-box;transform-origin:center;transition:opacity 420ms var(--ease-out),transform 420ms var(--ease-out)}
.spot__dot{fill:var(--ink);transition:fill 200ms var(--ease)}
.spot__ring{fill:none;stroke:var(--blue);stroke-width:2.5;opacity:0;transition:opacity 200ms var(--ease)}
.spot text{font-family:var(--font);font-size:14px;font-weight:700;fill:#fff;pointer-events:none;transition:fill 200ms var(--ease)}
.spot.is-lit .spot__dot{fill:var(--blue)}
.spot.is-lit text{fill:var(--ink)}
.spot.is-lit .spot__ring{opacity:1}
.is-armed .spot__in{opacity:0;transform:scale(.4)}
.is-armed.is-in .spot__in{opacity:1;transform:scale(var(--s));transition-delay:calc(var(--i) * 90ms)}
@media (prefers-reduced-motion:no-preference){
  .is-in .lm-path{animation:flow 1.6s linear infinite}
}
@keyframes flow{to{stroke-dashoffset:-22}}

.sign-list{border-top:1px solid var(--line)}
.sign-list li{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start;padding:12px 4px 12px 0;border-bottom:1px solid var(--line);border-radius:2px;outline-offset:-2px;cursor:default}
.sign__n{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;font-size:.8125rem;font-weight:700;transition:background-color 200ms var(--ease),color 200ms var(--ease)}
.sign__t strong{display:block;font-size:.9375rem;font-weight:600;line-height:1.35;color:var(--ink)}
.sign__t span{display:block;margin-top:2px;font-size:.8125rem;line-height:1.45;color:var(--muted)}
@media (max-width:639px){.sign__t span{display:none}.sign-list li{padding-block:10px;align-items:center}}
.sign-list li.is-lit .sign__n{background:var(--blue);color:var(--ink)}
.signs__note{margin-top:18px;font-size:.9375rem;color:var(--text)}
.signs__note .link{margin-top:6px}
@media (min-width:640px) and (max-width:1023px){.sign-list{display:grid;grid-template-columns:1fr 1fr;column-gap:28px}}
@media (min-width:1024px){
  .signs{grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"fig head" "fig list";column-gap:64px;row-gap:24px;align-items:start}
  .signs__head{grid-area:head}.signs__fig{grid-area:fig;padding:20px;position:sticky;top:calc(var(--header-h) + 24px)}.signs__list{grid-area:list}
  .signs__head .h2{font-size:2.5rem}
}
@media (min-width:1200px){.signs__head .h2{font-size:2.75rem}}

/* ==========================================================================
   Diagnosis: dark split, then the water test
   ========================================================================== */
.diag{background:var(--ink);color:var(--muted-dark)}
.diag h2,.diag h3{color:#fff}
.diag .eyebrow{margin-bottom:12px}
.diag__grid{display:grid;gap:32px}
.diag__intro p{margin-top:16px;color:rgba(255,255,255,.78);max-width:48ch}
.diag__intro .h2{max-width:14ch}
.diag__label{font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin-bottom:10px}
.look{display:grid}
.look li{display:grid;grid-template-columns:36px 1fr;gap:12px;padding:16px 0;border-top:1px solid var(--line-dark)}
.look__n{font-size:.8125rem;font-weight:600;color:var(--blue);padding-top:2px;letter-spacing:.04em}
.look h3{font-size:1rem;letter-spacing:-.01em}
.look p{margin-top:4px;font-size:.875rem;line-height:1.55;color:var(--muted-dark)}
@media (min-width:640px){.look{grid-template-columns:1fr 1fr;column-gap:32px}}
@media (min-width:1024px){.diag__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px}.diag__look{padding-top:6px}}
.test{display:grid;margin-top:40px;border-radius:var(--r);overflow:hidden;background:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line-dark)}
.test__img{aspect-ratio:16/10;background:var(--ink-3)}
.test__img img{width:100%;height:100%;object-fit:cover}
.test__body{padding:22px 22px 26px}
.test__kicker{font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.test h3{margin-top:8px;font-size:1.375rem;letter-spacing:-.02em}
.test__body p:last-child{margin-top:10px;color:rgba(255,255,255,.78);max-width:62ch}
@media (min-width:640px){.test{grid-template-columns:220px 1fr}.test__img{aspect-ratio:auto;min-height:220px}.test__body{align-self:center;padding:28px 32px}}
@media (min-width:1024px){.test{grid-template-columns:260px 1fr;margin-top:56px}.test__body{padding:32px 48px}.test h3{font-size:1.625rem}}

/* ==========================================================================
   Repair options: a comparison, lightest repair first
   ========================================================================== */
.opts-head{display:grid;gap:14px;margin-bottom:28px}
.opts-head .eyebrow{margin-bottom:12px}
.opts-head>p{color:var(--muted);max-width:50ch}
@media (min-width:900px){.opts-head{grid-template-columns:1fr minmax(0,440px);align-items:end;column-gap:48px;margin-bottom:40px}}
.opts-cols{display:none}
.opts{border-top:1px solid var(--ink)}
.opt{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;padding:22px 0;border-bottom:1px solid var(--line)}
.opt__name,.opt__what,.opt__more{grid-column:1/-1}
.opt__n{display:block;font-size:.75rem;font-weight:600;letter-spacing:.08em;color:var(--blue-ink);margin-bottom:6px}
.opt__name h3{font-size:1.1875rem;letter-spacing:-.02em}
.opt__what{font-size:.9375rem;line-height:1.6;color:var(--text)}
.opt__label{display:block;margin-bottom:4px;font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.opt__suits p,.opt__tiles p{font-size:.875rem;line-height:1.5;color:var(--ink)}
.meter{display:flex;gap:4px;margin:6px 0 8px}
.meter i{width:18px;height:6px;border-radius:3px;background:rgba(11,8,10,.14)}
.meter i.on{background:var(--ink)}
.opt__more .link{font-size:.875rem;min-height:36px}
@media (min-width:1024px){
  .opts-cols{display:grid;grid-template-columns:1.05fr 1.55fr 1fr .85fr;column-gap:32px;padding-bottom:12px;font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .opt{grid-template-columns:1.05fr 1.55fr 1fr .85fr;grid-template-rows:auto 1fr;column-gap:32px;row-gap:10px;padding:26px 0}
  .opt__name{grid-column:1;grid-row:1}
  .opt__more{grid-column:1;grid-row:2;align-self:end}
  .opt__what{grid-column:2;grid-row:1/3}
  .opt__suits{grid-column:3;grid-row:1/3}
  .opt__tiles{grid-column:4;grid-row:1/3}
  .opt__label{display:none}
  .opt__tiles .meter{margin-top:4px}
}
.notiles{display:grid;gap:14px;margin-top:40px;padding:26px 22px;border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--line)}
.notiles h3{font-size:clamp(1.375rem,1.1rem + 1vw,1.875rem);letter-spacing:-.025em;line-height:1.18;max-width:22ch}
.notiles p{font-size:.9375rem;line-height:1.65;color:var(--text)}
.notiles p+p{margin-top:.8em}
.notiles strong{color:var(--ink)}
@media (min-width:900px){.notiles{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:48px;padding:40px 44px;margin-top:56px}}
.cta-strip{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin-top:16px;padding:20px 22px;border-radius:var(--r);background:var(--ink);color:rgba(255,255,255,.8)}
.cta-strip p{font-size:.9375rem;max-width:60ch}
.cta-strip strong{color:#fff;font-weight:600}
@media (max-width:639px){.cta-strip .btn{width:100%}}
@media (min-width:900px){.cta-strip{padding:20px 28px}}

/* ==========================================================================
   Proof: a compact portrait comparison beside real job photos
   ========================================================================== */
.proof{display:grid;gap:28px}
.proof__head .eyebrow{margin-bottom:12px}
.proof__head p{margin-top:14px;color:var(--muted);max-width:50ch}
.ba.ba--portrait{aspect-ratio:450/624;width:100%;max-width:400px;margin-inline:auto}
.proof__cap{max-width:400px;margin:12px auto 0;font-size:.8125rem;color:var(--muted)}
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:62%;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.strip li{scroll-snap-align:start}
.strip figure{margin:0}
.strip__img{aspect-ratio:4/5;border-radius:var(--r-sm);overflow:hidden;background:var(--grey)}
.strip__img img{width:100%;height:100%;object-fit:cover}
.strip figcaption{margin-top:10px;font-size:.875rem;font-weight:600;line-height:1.35;color:var(--ink)}
.proof__more .link{margin-top:20px}
@media (min-width:640px){.strip{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);overflow:visible;margin:0;padding:0}}
@media (min-width:1024px){
  .proof{grid-template-columns:minmax(0,400px) minmax(0,1fr);grid-template-areas:"ba head" "ba more";column-gap:72px;row-gap:32px;align-items:start}
  .proof__head{grid-area:head}.proof__ba{grid-area:ba}.proof__more{grid-area:more;align-self:end}
  .ba.ba--portrait,.proof__cap{margin-inline:0}
  .strip{grid-template-columns:repeat(3,minmax(0,220px))}
}

/* ==========================================================================
   Why Gaffneys (short): large figure, a few lines, one real review
   ========================================================================== */
.why2{display:grid;gap:24px}
.why2__fig{font-size:clamp(5rem,3.4rem + 6vw,8.5rem);font-weight:600;line-height:.85;letter-spacing:-.06em;color:var(--ink)}
.why2__fig span{color:var(--blue-ink)}
.why2__body h2{font-size:clamp(1.5rem,1.15rem + 1.3vw,2.25rem);max-width:18ch}
.why2__body>p{margin-top:14px;max-width:52ch}
.why2__points{display:grid;gap:10px;margin-top:18px}
.why2__points li{display:flex;gap:10px;align-items:flex-start;font-size:.9375rem;font-weight:500;color:var(--ink)}
.why2__points .icon{flex:none;margin-top:4px;font-size:18px;color:var(--blue-ink);stroke-width:2.2}
.pull{margin:0;padding:26px 24px;border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--line)}
.pull__mark{font-size:3rem;line-height:.7;height:24px;font-weight:600;color:var(--blue)}
.pull blockquote{margin-top:10px;font-size:1.0625rem;line-height:1.6;color:var(--ink)}
.pull figcaption{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:.8125rem;color:var(--muted)}
.pull figcaption strong{display:block;font-size:.9375rem;font-weight:600;color:var(--ink)}
@media (min-width:768px) and (max-width:1199px){.why2{grid-template-columns:auto 1fr;column-gap:40px;align-items:center}.pull{grid-column:1/-1}}
@media (min-width:1200px){.why2{grid-template-columns:auto minmax(0,1fr) minmax(0,400px);gap:56px;align-items:center}.pull{padding:32px}}

/* ==========================================================================
   Process: sticky heading, numbered timeline
   ========================================================================== */
.tl-wrap{display:grid;gap:28px}
.tl-head p{margin-top:14px;color:var(--muted);max-width:40ch}
.tl-call{display:inline-flex;align-items:center;gap:12px;margin-top:22px;color:var(--ink)}
.tl-call .ico{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line);font-size:18px}
.tl-call small{display:block;font-size:.8125rem;font-weight:500;color:var(--muted)}
.tl-call span:last-child{font-size:1.25rem;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.tl{border-top:1px solid var(--line)}
.tl li{display:grid;grid-template-columns:52px 1fr;gap:14px;padding:20px 0;border-bottom:1px solid var(--line)}
.tl__n{font-size:1.625rem;font-weight:500;line-height:1;letter-spacing:-.03em;color:rgba(11,8,10,.5);transition:color var(--t) var(--ease)}
.tl li:hover .tl__n{color:var(--blue-ink)}
.tl h3{font-size:1.125rem;letter-spacing:-.015em}
.tl p{margin-top:6px;font-size:.9375rem;line-height:1.6;color:var(--muted);max-width:58ch}
@media (min-width:768px){.tl li{grid-template-columns:84px 1fr;padding:24px 0}.tl__n{font-size:2.25rem}}
@media (min-width:1024px){.tl-wrap{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:72px}.tl-head{position:sticky;top:calc(var(--header-h) + 32px);align-self:start}.tl-head .h2{max-width:13ch}}

/* ==========================================================================
   Local band
   ========================================================================== */
.local{padding-block:40px;background:var(--paper);border-block:1px solid var(--line)}
.local__inner{display:grid;gap:20px}
.local h2{font-size:clamp(1.375rem,1.1rem + 1vw,1.875rem);letter-spacing:-.025em;max-width:22ch}
.local p{margin-top:12px;color:var(--muted);max-width:58ch}
.local__chips{margin-top:0}
@media (min-width:768px){.local{padding-block:52px}}
@media (min-width:1024px){.local__inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}}

/* ==========================================================================
   Related services (only links to pages that exist)
   ========================================================================== */
.rel{margin-top:48px}
.rel__title{margin-bottom:12px;font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.rel__list{display:grid;border-top:1px solid var(--ink)}
.rel__list li{border-bottom:1px solid var(--line)}
.rel__link{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 14px;min-height:64px;padding:14px 0;transition:color var(--t) var(--ease)}
.rel__link strong{font-size:.9375rem;font-weight:600;color:var(--ink)}
.rel__link span{grid-column:1;font-size:.8125rem;line-height:1.45;color:var(--muted)}
.rel__link .icon{grid-column:2;grid-row:1/3;color:var(--blue-ink);transition:transform var(--t) var(--ease-out)}
.rel__link:hover strong{color:var(--blue-ink)}
.rel__link:hover .icon{transform:translateX(3px)}
@media (min-width:768px){.rel__list{grid-template-columns:repeat(2,1fr);column-gap:32px}}
@media (min-width:1200px){
  .rel__list{grid-template-columns:repeat(auto-fit,minmax(0,1fr));column-gap:0}
  .rel__list li{border-bottom:0}
  .rel__list li+li .rel__link{padding-left:24px;border-left:1px solid var(--line)}
  .rel__link{padding-right:24px;min-height:84px}
}

/* ---------- Closing on inner pages: still photo instead of video ---------- */
.cta--still .cta__bg picture{height:100%}
.cta--still .cta__bg img{object-position:50% 45%}

/* ---------- Print ---------- */
@media print{.ihero__media,.signs__fig,.cta-strip,.closing .cta{display:none}}

/* ==========================================================================
   PHASE 2B: more building blocks for inner pages
   ========================================================================== */

/* ---------- Hero variants ---------- */
/* card: a real job photo shown at a size that suits it, on a warm panel */
.ihero__panel{grid-column:2;position:relative;display:grid;place-items:center;gap:14px;padding:28px 20px;border-radius:var(--r);background:var(--warm)}
.ihero__panel--wide{padding:14px;background:#fff;box-shadow:0 0 0 1px var(--line)}
.card-photo{margin:0;width:min(100%,300px)}
.card-photo picture{display:block;border-radius:var(--r-sm);overflow:hidden;aspect-ratio:370/490;background:var(--grey);box-shadow:0 24px 48px -28px rgba(11,8,10,.45)}
.card-photo img{width:100%;height:100%;object-fit:cover}
.card-photo figcaption{margin-top:10px;font-size:.8125rem;font-weight:600;color:var(--ink);text-align:center}
.ihero__note{max-width:34ch;font-size:.8125rem;color:var(--muted);text-align:center}
.ihero__panel .ba.ba--portrait{max-width:320px}
@media (max-width:639px){.card-photo{width:min(100%,240px)}.ihero__panel{padding:22px 16px}}
@media (min-width:1024px){
  .ihero__panel{grid-column:split/content-end;margin:24px 0 36px;padding:36px}
  .ihero__panel--wide{padding:18px}
  .card-photo{width:min(100%,320px)}
}
/* dark: text only, for the diagnostic page */
.ihero--dark{background:var(--ink)}
.ihero--dark .crumbs ol{color:var(--muted-dark)}
.ihero--dark .crumbs [aria-current],.ihero--dark .crumbs a:hover{color:#fff}
.ihero--dark .eyebrow{color:var(--blue)}
.ihero--dark h1{color:#fff}
.ihero--dark .ihero__lead{color:rgba(255,255,255,.8)}
.ihero--dark .btn--outline{--fg:#fff;border-color:rgba(255,255,255,.35)}
.ihero--dark .btn--outline:hover{border-color:#fff}
.ihero--dark .ihero__facts{border-color:var(--line-dark)}
.ihero--dark .ihero__facts li{color:var(--muted-dark)}
.ihero--dark .ihero__facts li+li{border-color:var(--line-dark)}
.ihero--dark .ihero__facts strong{color:#fff}
.ihero__trace{grid-column:2;margin:0}
.ihero__trace svg{width:100%;height:auto}
@media (min-width:1024px){.ihero__trace{grid-column:split/content-end;align-self:center;margin:24px 0 36px}}
.trace-grid line{stroke:rgba(255,255,255,.07);stroke-width:1}
.trace-path{fill:none;stroke:var(--blue);stroke-width:2;stroke-dasharray:6 7;stroke-linecap:round}
.trace-dot{fill:var(--blue)}
.trace-ring{fill:none;stroke:var(--blue);stroke-width:1.5;opacity:.5}
.trace-label{font-family:var(--font);font-size:13px;font-weight:600;fill:#fff}
.trace-sub{font-family:var(--font);font-size:11px;font-weight:500;fill:var(--muted-dark);letter-spacing:.04em}
@media (prefers-reduced-motion:no-preference){.trace-path{animation:flow 2.2s linear infinite}.trace-ring{animation:pulse 2.4s var(--ease) infinite;transform-box:fill-box;transform-origin:center}}
@keyframes pulse{0%{transform:scale(.6);opacity:.7}100%{transform:scale(1.6);opacity:0}}
/* text: no media (projects, contact) */
.ihero--text{padding-bottom:36px}
.ihero--text .ihero__body{grid-column:2}
@media (min-width:1024px){.ihero--text{padding-bottom:0}.ihero--text .ihero__body{grid-column:content-start/content-end;padding-right:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);column-gap:64px;align-items:end}
  .ihero--text .ihero__body>*{grid-column:1}.ihero--text .ihero__lead{grid-column:2;grid-row:3/5;align-self:end;margin-bottom:6px}}

/* ---------- Block heading ---------- */
.bhead{display:grid;gap:12px;margin-bottom:28px}
.bhead>p{color:var(--muted);max-width:52ch}
.bhead .eyebrow{margin-bottom:0}
@media (min-width:900px){.bhead{margin-bottom:40px}.bhead--split{grid-template-columns:1fr minmax(0,440px);align-items:end;column-gap:48px}.bhead--split>p{justify-self:end}}
.diag .bhead>p,.bg-ink .bhead>p{color:var(--muted-dark)}
.bg-ink{background:var(--ink);color:var(--muted-dark)}
.bg-ink h2,.bg-ink h3{color:#fff}

/* ---------- Editorial split ---------- */
.esplit{display:grid;gap:24px}
.esplit__text p{margin-top:14px;max-width:54ch}
.esplit__text .eyebrow{margin-bottom:12px}
.esplit__text .h2{max-width:18ch}
.esplit__media{min-width:0}
@media (min-width:900px){
  .esplit{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:72px;align-items:center}
  .esplit--flip .esplit__text{order:2}
  .esplit__extra{grid-column:1/-1}
}
.framed{margin:0 auto;width:min(100%,360px)}
.framed picture{display:block;border-radius:var(--r);overflow:hidden;aspect-ratio:370/490;background:var(--grey)}
.framed img{width:100%;height:100%;object-fit:cover}
.framed figcaption{margin-top:10px;font-size:.8125rem;color:var(--muted)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:560px;margin-inline:auto}
.duo .framed{width:100%}
.duo .framed:last-child{margin-top:48px}
@media (max-width:479px){.duo .framed:last-child{margin-top:28px}}

/* ---------- Problem / solution ---------- */
.ps{display:grid;gap:16px}
.ps__col{padding:24px 22px;border-radius:var(--r)}
.ps__col--problem{background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.ps__col--solution{background:var(--ink);color:rgba(255,255,255,.8)}
.ps__col--solution strong{color:#fff}
.ps__label{font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px;color:var(--muted)}
.ps__col--solution .ps__label{color:var(--blue)}
.ps ul li,.ps ol li{padding:12px 0;border-top:1px solid var(--line)}
.ps__col--solution li{border-color:var(--line-dark)!important}
.ps li strong{display:block;font-size:.9375rem;font-weight:600;color:var(--ink);line-height:1.35}
.ps__col--solution li strong{color:#fff}
.ps li span{display:block;margin-top:2px;font-size:.875rem;line-height:1.5;color:var(--muted)}
.ps__col--solution li span{color:var(--muted-dark)}
.ps ol li{display:grid;grid-template-columns:34px 1fr;gap:10px}
.ps__n{font-size:.8125rem;font-weight:600;color:var(--blue);padding-top:1px}
@media (min-width:900px){.ps{grid-template-columns:1fr 1fr;gap:20px}.ps__col{padding:32px 32px 24px}}

/* ---------- Versus (two options on the same rows) ---------- */
.vs{display:grid;gap:12px;align-items:stretch}
.vs__col{display:flex;flex-direction:column;padding:24px 22px;border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--line)}
.vs__col--b{background:var(--ink);box-shadow:none;color:rgba(255,255,255,.82)}
.vs__top{margin-bottom:12px}
.vs__tag{display:inline-block;margin-bottom:8px;padding:4px 10px;border-radius:var(--r-pill);background:var(--paper);font-size:.6875rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-ink)}
.vs__col--b .vs__tag{background:rgba(255,255,255,.1);color:var(--blue)}
.vs__col h3{font-size:1.375rem;letter-spacing:-.02em}
.vs__col--b h3{color:#fff}
.vs__col ul{flex:1}
.vs__col li{padding:12px 0;border-top:1px solid var(--line);font-size:.9375rem;line-height:1.5;color:var(--ink)}
.vs__col--b li{border-color:var(--line-dark);color:#fff}
.vs__label{display:block;font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.vs__col--b .vs__label{color:var(--muted-dark)}
.vs__more{margin-top:16px}
.vs__col--b .link{color:#fff}.vs__col--b .link:hover{color:var(--blue)}
.vs__or{display:none}
.vs__foot{margin-top:18px;font-size:.875rem;color:var(--muted);max-width:70ch}
@media (min-width:768px){.vs{grid-template-columns:1fr auto 1fr;gap:0}.vs__or{display:grid;place-items:center;width:56px;font-size:.8125rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.vs__col{padding:32px}}

/* ---------- Rail (horizontal steps) ---------- */
.rail{display:grid;gap:0;border-top:1px solid var(--line)}
.rail li{display:grid;grid-template-columns:44px 1fr;column-gap:12px;padding:16px 0;border-bottom:1px solid var(--line)}
.rail__n{grid-row:1/3;font-size:.8125rem;font-weight:600;color:var(--blue-ink);padding-top:3px}
.rail h3{font-size:1.0625rem;letter-spacing:-.015em}
.rail p{margin-top:4px;font-size:.875rem;line-height:1.55;color:var(--muted)}
.rail--dark{border-color:var(--line-dark)}.rail--dark li{border-color:var(--line-dark)}
.rail--dark .rail__n{color:var(--blue)}.rail--dark p{color:var(--muted-dark)}
@media (min-width:900px){
  .rail{grid-template-columns:repeat(var(--n),minmax(0,1fr));column-gap:24px;border-top:0;padding-top:0}
  .rail li{display:block;position:relative;padding:26px 0 0;border-bottom:0;border-top:1px solid var(--line)}
  .rail--dark li{border-color:var(--line-dark)}
  .rail li::before{content:"";position:absolute;left:0;top:-5px;width:9px;height:9px;border-radius:50%;background:var(--blue)}
  .rail__n{display:block;margin-bottom:10px;font-size:2rem;font-weight:500;letter-spacing:-.03em;line-height:1;color:rgba(11,8,10,.5)}
  .rail--dark .rail__n{color:rgba(255,255,255,.45)}
}

/* ---------- Statement ---------- */
.statement{padding-block:56px;background:var(--paper);border-block:1px solid var(--line)}
.statement__text{max-width:30ch;font-size:clamp(1.5rem,1.1rem + 2vw,2.625rem);font-weight:600;line-height:1.2;letter-spacing:-.03em;color:var(--ink);text-wrap:balance}
.statement__cite{margin-top:14px;font-size:.875rem;color:var(--muted)}
.statement--dark{background:var(--ink);border:0}
.statement--dark .statement__text{color:#fff}
.statement--dark .statement__cite{color:var(--muted-dark)}
.statement__text em{font-style:normal;color:var(--blue-ink)}
.statement--dark .statement__text em{color:var(--blue)}
@media (min-width:768px){.statement{padding-block:80px}}

/* ---------- Index list (large numbered rows) ---------- */
.ix{border-top:1px solid var(--ink)}
.ix li{border-bottom:1px solid var(--line)}
.ix__row{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:12px;min-height:64px;padding:14px 0;color:var(--ink)}
.ix__n{font-size:.8125rem;font-weight:600;color:var(--blue-ink)}
.ix__t strong{display:block;font-size:1.0625rem;font-weight:600;letter-spacing:-.015em}
.ix__t span{display:block;margin-top:2px;font-size:.875rem;color:var(--muted);line-height:1.45}
a.ix__row .icon{color:var(--blue-ink);transition:transform var(--t) var(--ease-out)}
a.ix__row:hover strong{color:var(--blue-ink)}
a.ix__row:hover .icon{transform:translateX(3px)}
@media (min-width:768px){.ix--c2{display:grid;grid-template-columns:1fr 1fr;column-gap:40px;border-top:0}.ix--c2 li:nth-child(-n+2){border-top:1px solid var(--ink)}.ix__row{min-height:76px}.ix__t strong{font-size:1.1875rem}}

/* ---------- Trio of facts ---------- */
.trio{display:grid;gap:0;border-top:1px solid var(--line)}
.trio li{padding:16px 0;border-bottom:1px solid var(--line)}
.trio strong{display:block;font-size:1.0625rem;font-weight:600;color:var(--ink);letter-spacing:-.015em}
.trio span{display:block;margin-top:3px;font-size:.875rem;color:var(--muted);line-height:1.5}
@media (min-width:768px){.trio{grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}.trio li{padding:20px 24px 20px 0;border-bottom:0}.trio li+li{padding-left:24px;border-left:1px solid var(--line)}}
.bg-ink .trio,.bg-ink .trio li{border-color:var(--line-dark)}.bg-ink .trio strong{color:#fff}.bg-ink .trio span{color:var(--muted-dark)}

/* ---------- Signs block variants ---------- */
@media (min-width:1024px){
  .signs--flip{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"head fig" "list fig"}
  .signs--cols{grid-template-columns:1fr;grid-template-areas:"head" "fig" "list"}
  .signs--cols .signs__fig{position:static;max-width:none}
  .signs--cols .signs__head{display:grid;grid-template-columns:1fr minmax(0,440px);column-gap:48px;align-items:end}
  .signs--cols .signs__head p:last-child{grid-column:2;grid-row:1/3;margin-top:0}
  .signs--cols .sign-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));column-gap:32px}
}
@media (max-width:639px){.sign-list--keep .sign__t span{display:block}}
.lm-bath{fill:#fff;stroke:var(--ink);stroke-width:1.4}
.lm-mirror{fill:rgba(1,154,255,.08);stroke:rgba(11,8,10,.4);stroke-width:1}
.lm-seal-ring{stroke-width:3}
.lm-screed{fill:#E3E7E8;stroke:rgba(11,8,10,.45);stroke-width:1}
.lm-membrane{fill:none;stroke:var(--blue-ink);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.lm-bond{fill:none;stroke:#E0913C;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.lm-adhesive{fill:none;stroke:#B4BCC0;stroke-width:5}
.lm-tile{fill:#fff;stroke:var(--ink);stroke-width:1.2}
.lm-flange{stroke:var(--blue-ink);stroke-width:4;stroke-linecap:round}
.lm-waterline{fill:none;stroke:rgba(1,154,255,.8);stroke-width:2;stroke-linecap:round}
.lm-silicone--dark{stroke:#8F999C;stroke-width:4}
.z-floor{fill:rgba(1,154,255,.10);stroke:none}
.z-shower{fill:rgba(1,154,255,.28)}
.z-bathwall{fill:rgba(1,154,255,.2)}
.z-splash{fill:rgba(1,154,255,.28)}
.z-wall{fill:none;stroke:var(--ink);stroke-width:6;stroke-linejoin:miter}
.z-door{fill:none;stroke:rgba(11,8,10,.35);stroke-width:1;stroke-dasharray:3 4}
.z-doorleaf{stroke:var(--ink);stroke-width:2}
.z-stop{stroke:#E0913C;stroke-width:5;stroke-linecap:round}
.z-glass{stroke:rgba(1,108,178,.7);stroke-width:3}
.z-waste{fill:#fff;stroke:var(--ink);stroke-width:2}
.z-fall path{fill:none;stroke:rgba(1,108,178,.6);stroke-width:1.5;stroke-dasharray:4 4;marker-end:none}
.z-bath{fill:#fff;stroke:var(--ink);stroke-width:1.4}
.z-fixture{fill:#fff;stroke:rgba(11,8,10,.55);stroke-width:1.2}
.key{display:flex;flex-wrap:wrap;gap:8px 18px;padding:10px 8px 4px;font-size:.8125rem;color:var(--muted)}
.key span{display:inline-flex;align-items:center;gap:8px}
.key i{width:16px;height:10px;border-radius:2px}
.key .k-membrane{background:var(--blue-ink);height:4px}.key .k-bond{background:#E0913C;height:4px}
.key .k-strong{background:rgba(1,154,255,.28)}.key .k-light{background:rgba(1,154,255,.10);box-shadow:inset 0 0 0 1px rgba(1,154,255,.3)}

/* ---------- Gallery, filters, lightbox ---------- */
.filt{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.filt__btn{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px rgba(11,8,10,.2);font-size:.875rem;font-weight:600;color:var(--ink);transition:background-color var(--t) var(--ease),color var(--t) var(--ease)}
.filt__btn:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.filt__btn.is-on{background:var(--ink);color:#fff;box-shadow:none}
.gal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 14px}
.gal__item[hidden]{display:none}
.gal figure{margin:0}
.gal__img{position:relative;border-radius:var(--r-sm);overflow:hidden;aspect-ratio:370/490;background:var(--grey)}
.gal__img img{width:100%;height:100%;object-fit:cover;transition:transform 700ms var(--ease-out)}
.gal__item:hover .gal__img img{transform:scale(1.03)}
.gal__open{position:absolute;inset:0;cursor:zoom-in}
.gal__open:focus-visible{outline:2px solid var(--blue);outline-offset:-4px}
.gal figcaption{margin-top:10px;font-size:.875rem;font-weight:600;line-height:1.35;color:var(--ink)}
.gal figcaption small{display:block;margin-top:2px;font-size:.75rem;font-weight:500;color:var(--muted)}
@media (min-width:640px){.gal{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 20px}}
@media (min-width:1024px){.gal{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1440px){.gal{grid-template-columns:repeat(auto-fill,minmax(0,280px));justify-content:space-between}}
.lb{padding:0;border:0;background:transparent;max-width:none;max-height:none;width:100%;height:100%;overflow:hidden}
.lb::backdrop{background:rgba(11,8,10,.9)}
.lb[open]{display:grid;place-items:center}
.lb figure{margin:0;display:grid;justify-items:center;gap:12px;padding:64px 16px 24px}
.lb img{max-width:min(92vw,370px);max-height:calc(100vh - 160px);width:auto;height:auto;border-radius:var(--r-sm);background:var(--ink-2)}
.lb figcaption{color:#fff;font-size:.9375rem;font-weight:600;text-align:center;max-width:40ch}
.lb__close,.lb__nav{position:fixed;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:20px}
.lb__close:hover,.lb__nav:hover{background:rgba(255,255,255,.24)}
.lb__close{top:16px;right:16px}
.lb__nav{top:50%;margin-top:-24px}.lb__nav--prev{left:16px}.lb__nav--next{right:16px}
@media (max-width:639px){.lb__nav{top:auto;bottom:18px;margin:0}.lb figure{padding-bottom:84px}}

/* ---------- Tabs (diagnostic) ---------- */
.tabs__list{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--gutter) * -1);padding:2px var(--gutter) 8px}
.tabs__list::-webkit-scrollbar{display:none}
.tabs__tab{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);font-size:.875rem;font-weight:600;color:#fff;white-space:nowrap;transition:background-color var(--t) var(--ease),color var(--t) var(--ease)}
.tabs__tab:hover{box-shadow:inset 0 0 0 1px #fff}
.tabs__tab[aria-selected="true"]{background:var(--blue);color:var(--ink);box-shadow:none}
.tabs__panels{margin-top:18px}
.js .tabs__panel[data-hidden]{display:none}
html:not(.js) .tabs__list{display:none}
html:not(.js) .tabs__panel+.tabs__panel{margin-top:16px}
.tabs__panel{outline-offset:4px;animation:stepIn 360ms var(--ease-out)}
.det{display:grid;gap:14px}
.det__col{padding:22px;border-radius:var(--r);background:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line-dark)}
.det__col h3{font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);margin-bottom:10px}
.det__lead{font-size:1.25rem;font-weight:600;letter-spacing:-.02em;line-height:1.3;color:#fff}
.det__col li{padding:10px 0;border-top:1px solid var(--line-dark);font-size:.9375rem;line-height:1.5;color:rgba(255,255,255,.85)}
.det__col li strong{color:#fff;font-weight:600}
.det__col .link{margin-top:10px;color:#fff}
.det__col .link:hover{color:var(--blue)}
.det__col--main{background:transparent;box-shadow:none;padding:4px 0}
.det__col--main p{margin-top:10px;color:rgba(255,255,255,.75)}
@media (min-width:900px){.tabs__list{flex-wrap:wrap;overflow:visible;margin:0;padding:0}.det{grid-template-columns:1.1fr 1fr 1fr;gap:20px}.det__col{padding:26px}.det__col--main{padding:4px 12px 0 0}}

/* ---------- Methods grid (how we trace) ---------- */
.methods{display:grid;gap:0;border-top:1px solid var(--line)}
.methods li{padding:20px 0;border-bottom:1px solid var(--line)}
.methods .icon{font-size:26px;color:var(--blue-ink);stroke-width:1.5}
.methods h3{margin-top:10px;font-size:1.125rem;letter-spacing:-.015em}
.methods p{margin-top:6px;font-size:.9375rem;line-height:1.6;color:var(--muted)}
@media (min-width:768px){.methods{grid-template-columns:1fr 1fr;column-gap:40px}}
@media (min-width:1200px){.methods{grid-template-columns:repeat(4,1fr);column-gap:32px;border-top:0}.methods li{border-bottom:0;border-top:1px solid var(--ink);padding-top:24px}}

/* ---------- Choice pair (your products or ours) ---------- */
.pair{display:grid;gap:14px}
.pair__item{padding:26px 24px;border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--line)}
.pair__item h3{font-size:1.25rem;letter-spacing:-.02em}
.pair__item p{margin-top:10px;font-size:.9375rem;color:var(--text);max-width:48ch}
.pair__k{display:block;margin-bottom:10px;font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-ink)}
@media (min-width:768px){.pair{grid-template-columns:1fr 1fr;gap:20px}.pair__item{padding:32px}}

/* ---------- Wide before / after in a split ---------- */
.ba.ba--split{aspect-ratio:1376/768;max-width:none;width:100%}
@media (max-width:639px){.ba.ba--split{aspect-ratio:4/3}}

/* ---------- About ---------- */
.story{display:grid;gap:28px}
.story__lead{font-size:clamp(1.25rem,1.05rem + .9vw,1.625rem);font-weight:500;line-height:1.45;letter-spacing:-.015em;color:var(--ink);max-width:36ch}
.story__body p{max-width:60ch}
.story__body p+p{margin-top:1em}
@media (min-width:1024px){.story{grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:72px;align-items:start}}
.reviews{display:grid;gap:14px}
.reviews .pull{height:100%}
@media (min-width:768px){.reviews{grid-template-columns:1fr 1fr;gap:20px}}
@media (min-width:1200px){.reviews{grid-template-columns:repeat(4,1fr)}.reviews .pull{padding:26px}}
.reviews blockquote{font-size:.9375rem}
.areas2{display:grid;gap:24px}
.areas2 .map{min-height:360px}
.areas2__body p{margin-top:14px;color:var(--muted);max-width:50ch}
.areas2__body .chips{margin-top:20px}
@media (min-width:1024px){.areas2{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);column-gap:56px;align-items:center}.areas2 .map{min-height:480px}}

/* ---------- Contact ---------- */
.contact{display:grid;gap:28px;padding:calc(var(--header-h) + 18px) 0 var(--section);background:var(--grey)}
.contact__inner{display:grid;gap:28px}
.contact__info h1{font-size:var(--fs-h1-inner);line-height:1.08;letter-spacing:-.03em;max-width:14ch}
.contact__info .eyebrow{margin-bottom:12px}
.contact__lead{margin-top:14px;max-width:44ch;font-size:var(--fs-lead);color:var(--text)}
.cinfo{margin-top:24px;border-top:1px solid var(--line)}
.cinfo li{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.cinfo .ico{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px var(--line);font-size:18px;color:var(--ink)}
.cinfo small{display:block;font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cinfo a,.cinfo span.v{font-size:1rem;font-weight:600;color:var(--ink);word-break:normal}
.cinfo a.big{font-size:1.5rem;letter-spacing:-.02em}
.cinfo .v-mail{font-size:.9375rem;white-space:nowrap}
@media (max-width:374px){.cinfo .v-mail{font-size:.8125rem}}
.contact__points{margin-top:20px;display:grid;gap:8px}
.contact__points li{display:flex;gap:10px;font-size:.9375rem}
.contact__points .icon{color:var(--blue-ink);font-size:18px;margin-top:3px;stroke-width:2.2}
@media (min-width:1024px){.contact__inner{grid-template-columns:minmax(0,2fr) minmax(0,3fr);column-gap:56px;align-items:start}.contact__info{position:sticky;top:calc(var(--header-h) + 24px)}}
.next3{display:grid;gap:0;border-top:1px solid var(--line)}
.next3 li{display:grid;grid-template-columns:48px 1fr;gap:12px;padding:18px 0;border-bottom:1px solid var(--line)}
.next3 .rail__n{font-size:1.5rem;font-weight:500;color:rgba(11,8,10,.5);line-height:1}
.next3 h3{font-size:1.0625rem}.next3 p{margin-top:4px;font-size:.9375rem;color:var(--muted)}
@media (min-width:900px){.next3{grid-template-columns:repeat(3,1fr);column-gap:32px;border-top:0}.next3 li{display:block;border-bottom:0;border-top:1px solid var(--ink);padding-top:22px}.next3 .rail__n{display:block;margin-bottom:12px;font-size:2rem}}
@media (min-width:1024px){.signs--cols .signs__fig{width:100%;max-width:900px;justify-self:center}}
/* ---------- Causes (three numbered points) ---------- */
.causes{display:grid;gap:0;border-top:1px solid var(--ink)}
.causes li{display:grid;grid-template-columns:48px 1fr;column-gap:12px;padding:20px 0;border-bottom:1px solid var(--line)}
.causes__n{grid-row:1/3;font-size:1.5rem;font-weight:500;line-height:1;letter-spacing:-.03em;color:var(--blue-ink)}
.causes h3{font-size:1.1875rem;letter-spacing:-.02em}
.causes p{margin-top:6px;font-size:.9375rem;line-height:1.6;color:var(--muted);max-width:44ch}
@media (min-width:900px){.causes{grid-template-columns:repeat(3,1fr);column-gap:40px}.causes li{display:block;padding:28px 0 8px;border-bottom:0}.causes__n{display:block;margin-bottom:18px;font-size:3rem}}
@media (min-width:900px){.esplit--wide{grid-template-columns:minmax(0,4fr) minmax(0,7fr);column-gap:56px}}
.statement__text{max-width:34ch}
.ihero--dark + .bg-ink{border-top:1px solid var(--line-dark)}
.section--tight{padding-top:28px}
@media (min-width:1024px){.section--tight{padding-top:36px}}
@media (min-width:900px){.esplit--wide.esplit--flip{grid-template-columns:minmax(0,7fr) minmax(0,4fr)}}
.esplit__media .trio{grid-template-columns:1fr!important;border-bottom:0}
.esplit__media .trio li{padding:16px 0!important;border-left:0!important;border-bottom:1px solid var(--line)}
.bg-ink .esplit__media .trio li{border-color:var(--line-dark)}
@media (min-width:1280px){.gal{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (min-width:1440px){.gal{grid-template-columns:repeat(5,minmax(0,1fr));justify-content:normal}}
.gal--4{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:1024px){.gal--4{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
.duo{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.contact{display:block}
.contact__inner>*{min-width:0}
/* compact card heroes: small real photos sit beside a caption on phones, and stay modest on desktop */
@media (max-width:1023px){
  .ihero__panel:not(.ihero__panel--wide){display:block;padding:14px}
  .ihero__panel:not(.ihero__panel--wide) .card-photo{display:grid;grid-template-columns:112px 1fr;column-gap:16px;align-items:center;width:100%}
  .ihero__panel:not(.ihero__panel--wide) .card-photo figcaption{margin:0;text-align:left;font-size:.875rem}
}
@media (min-width:1024px){
  .ihero__panel:not(.ihero__panel--wide){padding:28px}
  .ihero__panel:not(.ihero__panel--wide) .card-photo{width:min(100%,250px)}
}
.card-photo figcaption strong{display:block;font-weight:600;color:var(--ink)}
.card-photo .ihero__note{display:block;margin:6px auto 0;font-weight:400}
@media (max-width:1023px){.card-photo .ihero__note{margin:6px 0 0;text-align:left}}
@media (max-width:1023px){.ihero__panel--wide .ba.ba--portrait{max-width:230px}.ihero__panel--wide{padding:14px}}
@media (min-width:1024px){.ihero__panel--wide .ba.ba--portrait{max-width:290px}}
@media (min-width:640px) and (max-width:1023px){.ihero__trace{max-width:480px;justify-self:center;width:100%}}
/* contact: on phones the form comes straight after the heading; details follow */
.contact__inner{grid-template-areas:"head" "form" "info"}
.contact__head{grid-area:head}.contact__form{grid-area:form}.contact__info{grid-area:info}
.contact__info .cinfo{margin-top:0}
@media (min-width:1024px){
  .contact__inner{grid-template-areas:"head form" "info form";grid-template-rows:auto 1fr;row-gap:0}
  .contact__info{position:static}
  .contact__info .cinfo{margin-top:24px}
  .contact__form{position:sticky;top:calc(var(--header-h) + 24px);align-self:start}
}

/* ---------- Colour system: focus ring on dark areas uses the brand blue ---------- */
.diag,.test,.cta-strip,.ihero--dark,.bg-ink,.ps__col--solution,.vs__col--b,.statement--dark,.rail--dark,.lb,.det__col{--focus:var(--color-blue)}