/* =============================================================================
   TRADE — the shared base under the lesson-* (driving school) and garage-* (mechanic)
   layouts, 2026-10-09. Written for a phone first: most of these clients' customers
   open the link from WhatsApp or Facebook on a phone, so the base is one column,
   thumb-sized actions, a bottom dock (call · WhatsApp · book) once the hero has gone
   by, and swipe rows instead of grids. Wider screens get columns at 900px+.

   A layout's own css/styles.css is appended after this file and gives the identity:
   the hero, the type, the shapes. These knobs are what it turns:
     --r        corner radius of cards and buttons
     --r-btn    corner radius of buttons
     --d-weight / --d-case / --d-track / --d-style   the display face's voice
     --hero-h   how much of the first phone screen the hero takes
   Every colour is a token from brand.css (palette.mjs), so a light, dark or warm
   ground works without edits. Motion uses translate/scale/opacity only and none of
   it runs under reduced motion; without JS this is the finished, still page.
   ========================================================================== */

:root{
  --wrap:1200px;
  --gut:20px;
  --r:14px;
  --r-btn:999px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --spring:cubic-bezier(.3,1.5,.5,1);
  --nav-h:64px;
  --d-weight:800;
  --d-case:none;
  --d-track:-.02em;
  --d-style:normal;
  --sec:72px;
}
@media (min-width:900px){ :root{ --gut:40px; --nav-h:76px; --sec:120px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 12px); }
body{ margin:0; background:var(--ink); color:var(--fg); font:400 17px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip; }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }
button,input,select,textarea{ font:inherit; color:inherit; }
svg{ flex:none; }
.wrap{ width:min(100% - 2 * var(--gut), var(--wrap)); margin-inline:auto; }
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
:focus-visible{ outline:2px solid var(--brand-lift); outline-offset:3px; }

/* --- type ------------------------------------------------------------------ */
.d-xl,.d-lg,.d-md{ font-family:var(--serif); margin:0; text-wrap:balance; font-weight:var(--d-weight);
  text-transform:var(--d-case); letter-spacing:var(--d-track); font-style:var(--d-style); }
.d-xl{ font-size:clamp(44px,12vw,104px); line-height:.94; }
.d-lg{ font-size:clamp(34px,8.6vw,64px); line-height:1; }
.d-md{ font-size:clamp(24px,5.4vw,32px); line-height:1.08; }
.d-xl i,.d-lg i,.d-md i{ font-style:var(--d-style); color:var(--brand-lift); }
.d-xl em,.d-lg em,.d-md em{ font-style:var(--d-style); color:var(--fg-2); }
.label{ margin:0 0 14px; font:700 12px/1.3 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--brand-lift); }
.lede{ margin:14px 0 0; max-width:54ch; font-size:clamp(17px,1.4vw,19px); line-height:1.6; color:var(--fg-2); text-wrap:pretty; }
.lede i,.lede em{ font-style:normal; color:var(--fg); font-weight:600; }

/* --- buttons ---------------------------------------------------------------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 24px;
  border:2px solid transparent; border-radius:var(--r-btn); cursor:pointer; text-decoration:none; white-space:nowrap;
  font:700 16px/1 var(--sans); letter-spacing:.005em; -webkit-tap-highlight-color:transparent;
  transition:background-color .2s, border-color .2s, color .2s, scale .15s var(--ease); }
.btn:active{ scale:.97; }
.btn svg{ width:19px; height:19px; transition:translate .25s var(--ease); }
.btn:hover svg{ translate:3px 0; }
.btn--brand{ background:var(--brand); color:var(--on-brand); }
.btn--brand:hover{ background:var(--brand-deep); }
.btn--accent{ background:var(--accent); color:var(--on-accent); }
.btn--line{ border-color:var(--line-2); color:var(--fg); background:transparent; }
.btn--line:hover{ border-color:var(--fg); }
.btn--ghost{ border-color:rgb(var(--hero-fg-rgb) / .4); color:var(--hero-fg); background:transparent; }
.btn--ghost:hover{ border-color:var(--hero-fg); }
.btn--sm{ min-height:42px; padding:0 18px; font-size:14.5px; }
.btn--lg{ min-height:58px; padding:0 28px; font-size:17px; }
.btn--full{ width:100%; }

/* --- preview notice ---------------------------------------------------------- */
.pv{ position:relative; z-index:60; display:flex; align-items:center; justify-content:center; gap:10px;
  padding:8px 44px 8px 16px; background:var(--fg); color:var(--ink); font:500 12.5px/1.35 var(--sans); text-align:center; }
.pv b{ font-weight:800; }
.pv button{ position:absolute; right:6px; top:50%; translate:0 -50%; width:34px; height:34px; border:0; background:none;
  color:inherit; font-size:20px; cursor:pointer; }

/* --- nav --------------------------------------------------------------------- */
.nav{ position:sticky; top:0; z-index:50; height:var(--nav-h); background:rgb(var(--ink-rgb) / .86);
  -webkit-backdrop-filter:saturate(1.4) blur(14px); backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--line); transition:translate .35s var(--ease); }
.nav.is-tucked{ translate:0 -101%; }
.nav__in{ height:100%; display:flex; align-items:center; gap:16px; }
.brand{ display:flex; align-items:center; gap:10px; min-width:0; text-decoration:none; margin-right:auto; }
.brand__logo{ width:40px; height:40px; border-radius:50%; object-fit:cover; flex:none; }
.brand__txt{ display:flex; flex-direction:column; min-width:0; }
/* brandAssets.logoWide (2026-10-15, opt-in): a wide wordmark logo stands alone at a readable height; the name stays for screen readers */
.brand--wide .brand__logo{ width:auto; height:30px; max-width:150px; border-radius:0; object-fit:contain; background:none; padding:0; }
.brand__logo--ondark{ display:none; }
.brand--wide .brand__txt{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
footer .brand--wide .brand__logo{ height:44px; max-width:220px; }
@media (min-width:900px){ .brand--wide .brand__logo{ height:40px; max-width:200px; } footer .brand--wide .brand__logo{ height:52px; max-width:260px; } }
.brand__name{ font:var(--d-weight) 18px/1.05 var(--serif); letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brand__sub{ font:600 11px/1.3 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--fg-3); }
.nav__links{ display:none; }
.nav__cta{ display:flex; align-items:center; gap:8px; }
.nav__tel{ display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--brand); color:var(--on-brand); text-decoration:none; }
.nav__tel svg{ width:19px; height:19px; }
.nav__tel span,.nav__book{ display:none; }
.nav__progress{ position:absolute; left:0; bottom:-1px; height:2px; width:100%; background:var(--brand); transform-origin:0 50%; scale:var(--p,0) 1; }
/* the language switch (site.alternates): the page's own language marked, the other a link. Drawn in currentColor so it
   reads on a clear nav over a photograph as it does on the page's ground */
.langs{ display:inline-flex; align-items:center; flex:none; height:36px; padding:0 3px; border:1px solid color-mix(in srgb, currentColor 34%, transparent); border-radius:999px; }
.langs a{ display:grid; place-items:center; min-width:32px; height:28px; padding:0 7px; border-radius:999px; text-decoration:none; font:700 12px/1 var(--sans); letter-spacing:.06em; opacity:.72; }
.langs a:hover{ opacity:1; }
.langs a.is-on{ opacity:1; background:color-mix(in srgb, currentColor 16%, transparent); }
.nav:has(.langs) .brand__sub{ display:none; }
@media (min-width:1000px){ .nav:has(.langs) .brand__sub{ display:block; } }
.burger{ position:relative; width:44px; height:44px; border:1px solid var(--line-2); border-radius:50%; background:transparent; cursor:pointer; }
.burger i{ position:absolute; left:13px; right:13px; height:2px; background:currentColor; border-radius:2px; transition:translate .3s var(--ease), rotate .3s var(--ease); }
.burger i:first-child{ top:17px; } .burger i:last-child{ top:25px; }
.burger.is-open i:first-child{ translate:0 4px; rotate:45deg; }
.burger.is-open i:last-child{ translate:0 -4px; rotate:-45deg; }
@media (min-width:1000px){
  .nav__links{ display:flex; gap:26px; }
  .nav__links a{ text-decoration:none; font:600 15px/1 var(--sans); color:var(--fg-2); }
  .nav__links a:hover,.nav__links a.is-here{ color:var(--fg); }
  .nav__tel{ width:auto; height:auto; background:none; color:var(--fg); gap:8px; display:flex; align-items:center; font:700 15px/1 var(--sans); }
  .nav__tel svg{ color:var(--brand-lift); }
  .nav__tel span,.nav__book{ display:inline-flex; }
  .burger{ display:none; }
}

/* --- drawer ------------------------------------------------------------------ */
.drawer{ position:fixed; inset:var(--drawer-top, var(--nav-h)) 0 0; z-index:49; display:flex; flex-direction:column; justify-content:space-between;
  gap:24px; padding:24px var(--gut) calc(24px + env(safe-area-inset-bottom)); background:var(--ink); overflow:auto;
  opacity:0; visibility:hidden; translate:0 -12px; transition:opacity .3s, translate .35s var(--ease), visibility 0s .35s; }
.drawer.is-open{ opacity:1; visibility:visible; translate:0 0; transition:opacity .3s, translate .35s var(--ease); }
.drawer nav{ display:flex; flex-direction:column; }
.drawer nav a{ display:flex; align-items:baseline; gap:14px; padding:14px 0; border-bottom:1px solid var(--line);
  text-decoration:none; font:var(--d-weight) 30px/1.1 var(--serif); text-transform:var(--d-case); letter-spacing:var(--d-track); }
.drawer nav a span{ font:600 12px/1 var(--sans); color:var(--brand-lift); letter-spacing:.1em; }
.drawer__end{ display:grid; gap:10px; }

/* --- the dock: a phone's call · WhatsApp · book bar ------------------------------ */
.dock{ position:fixed; left:10px; right:10px; bottom:calc(10px + env(safe-area-inset-bottom)); z-index:45;
  display:flex; gap:8px; padding:8px; border-radius:22px;
  background:rgb(var(--ink-rgb) / .9); -webkit-backdrop-filter:blur(16px) saturate(1.5); backdrop-filter:blur(16px) saturate(1.5);
  border:1px solid var(--line-2); box-shadow:0 12px 40px -12px var(--shade);
  translate:0 140%; transition:translate .45s var(--spring); }
.dock.is-on{ translate:0 0; }
.dock__btn{ flex:1; display:flex; align-items:center; justify-content:center; gap:8px; min-height:52px; border-radius:15px;
  background:var(--ink-3); color:var(--fg); text-decoration:none; font:700 15px/1 var(--sans); }
.dock__btn svg{ width:19px; height:19px; }
.dock__btn--main{ flex:1.5; background:var(--brand); color:var(--on-brand); }
@media (min-width:900px){ .dock{ display:none; } }
/* contact.waFloat: WhatsApp's own green, in the corner; on a phone it shows on the first screen only, then the dock
   carries WhatsApp (app.js marks it .is-past), so it never sits over the page */
.wa-float{ position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:44; display:grid; place-items:center;
  width:58px; height:58px; border-radius:50%; background:#25D366; color:#fff; box-shadow:0 10px 28px -8px rgb(0 0 0 / .45); }
.wa-float svg{ width:32px; height:32px; }
.wa-float:focus-visible{ outline:3px solid #fff; outline-offset:3px; box-shadow:0 0 0 6px #128C7E; }
.dock__btn--wa svg{ color:#25D366; }
@media (max-width:379px){ .dock__btn--wa{ flex:0 0 52px; } .dock__btn--wa span{ display:none; } }
@media (max-width:899px){ .wa-float{ transition:opacity .3s, scale .3s var(--spring); }
  .wa-float.is-past{ opacity:0; scale:.6; visibility:hidden; pointer-events:none; transition:opacity .3s, scale .3s, visibility 0s .3s; } }
@media (min-width:900px){ .wa-float{ right:24px; bottom:24px; width:62px; height:62px; } }

/* --- sections ------------------------------------------------------------------ */
.section{ padding:var(--sec) 0; position:relative; }
.head{ margin-bottom:32px; }
@media (min-width:900px){ .head{ margin-bottom:56px; } }

/* proof band */
.figs{ padding:48px 0; border-block:1px solid var(--line); }
.figs__statement{ margin:0 0 28px; font:var(--d-weight) clamp(26px,6.4vw,44px)/1.12 var(--serif); letter-spacing:var(--d-track);
  text-transform:var(--d-case); font-style:var(--d-style); text-wrap:balance; max-width:22ch; }
.figs__statement em,.figs__statement i{ font-style:var(--d-style); color:var(--brand-lift); }
.figs__list{ margin:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:22px 16px; }
.fig{ display:flex; flex-direction:column-reverse; gap:6px; }
.fig dd{ margin:0; font:var(--d-weight) clamp(34px,9vw,56px)/.95 var(--serif); letter-spacing:-.02em; color:var(--fg); }
.fig dt{ font:500 14px/1.35 var(--sans); color:var(--fg-2); }
@media (min-width:900px){ .figs__in{ display:grid; grid-template-columns:1.1fr 1.4fr; gap:64px; align-items:end; }
  .figs__statement{ margin:0; } .figs__list{ grid-template-columns:repeat(3,1fr); } }

/* services */
.svc__list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.svc__item{ position:relative; display:grid; grid-template-columns:auto 1fr auto; gap:6px 16px; align-items:start;
  padding:22px 0; border-bottom:1px solid var(--line); }
.svc__n{ font:700 13px/1.9 var(--sans); color:var(--brand-lift); letter-spacing:.06em; }
.svc__name{ margin:0; font:var(--d-weight) clamp(24px,6vw,34px)/1.05 var(--serif); letter-spacing:var(--d-track); text-transform:var(--d-case); font-style:var(--d-style); }
.svc__title{ margin:6px 0 0; font-weight:650; color:var(--fg); }
.svc__text{ margin:6px 0 0; color:var(--fg-2); font-size:16px; max-width:60ch; }
.svc__price{ margin:10px 0 0; font-weight:800; color:var(--brand-lift); }
.svc__go{ display:grid; place-items:center; width:46px; height:46px; border-radius:50%; border:1.5px solid var(--line-2); color:var(--fg);
  transition:background-color .2s, color .2s, border-color .2s; }
.svc__go::after{ content:""; position:absolute; inset:0; }
.svc__go svg{ width:19px; height:19px; }
.svc__item:hover .svc__go{ background:var(--brand); border-color:var(--brand); color:var(--on-brand); }

/* passes */
.passes__list{ list-style:none; margin:0 calc(var(--gut) * -1); padding:4px var(--gut) 12px; display:grid; grid-auto-flow:column;
  grid-auto-columns:min(74vw, 280px); gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.passes__list::-webkit-scrollbar{ display:none; }
.pass{ scroll-snap-align:start; position:relative; display:flex; flex-direction:column; gap:6px; min-height:190px; padding:22px;
  border-radius:var(--r); background:var(--ink-2); border:1px solid var(--line); overflow:hidden; }
.pass__stamp{ align-self:flex-start; margin-bottom:auto; padding:6px 10px; border:2px solid currentColor; border-radius:6px; rotate:-6deg;
  color:var(--brand-lift); font:900 13px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; }
.pass__name{ margin-top:22px; font:var(--d-weight) 34px/1 var(--serif); letter-spacing:var(--d-track); text-transform:var(--d-case); font-style:var(--d-style); }
.pass__meta{ font:600 14px/1.35 var(--sans); color:var(--fg-2); }
.pass__note{ font-size:14.5px; line-height:1.45; color:var(--fg); }
.pass__first{ position:absolute; top:20px; right:18px; font:700 11px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--fg-3); }
.passes__more{ margin:20px 0 0; }
@media (min-width:900px){ .passes__list{ margin:0; padding:0; grid-auto-flow:row; grid-template-columns:repeat(4,1fr); overflow:visible; } }

/* offer */
.offer__card{ position:relative; padding:32px 24px; border-radius:calc(var(--r) * 1.4); background:var(--hero-ink); color:var(--hero-fg); overflow:hidden; }
.offer__card .label{ color:var(--hero-accent-lift); }
.offer__title i{ color:var(--hero-accent-lift); }
.offer__text{ margin:14px 0 0; color:var(--hero-fg-2); font-size:17px; max-width:52ch; }
.offer__items{ list-style:none; margin:22px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.offer__items li{ display:flex; align-items:center; gap:8px; padding:10px 14px; border-radius:999px; background:rgb(var(--hero-fg-rgb) / .08);
  font:650 14.5px/1 var(--sans); }
.offer__items svg{ width:16px; height:16px; color:var(--hero-accent-lift); }
.offer__note{ margin:18px 0 0; font-size:14px; color:var(--hero-fg-3); }
.offer__go{ margin-top:24px; }
@media (min-width:900px){ .offer__card{ padding:56px; } }

/* steps */
.steps__list{ list-style:none; margin:0; padding:0; display:grid; gap:12px; counter-reset:s; }
.step{ position:relative; padding:24px 22px 24px 76px; border-radius:var(--r); background:var(--ink-2); border:1px solid var(--line); }
.step__n{ position:absolute; left:22px; top:22px; display:grid; place-items:center; width:38px; height:38px; border-radius:50%;
  background:var(--brand); color:var(--on-brand); font:800 14px/1 var(--sans); }
.step__title{ margin:0; font:var(--d-weight) 22px/1.15 var(--serif); letter-spacing:var(--d-track); text-transform:var(--d-case); font-style:var(--d-style); }
.step p{ margin:6px 0 0; color:var(--fg-2); font-size:16px; }
@media (min-width:900px){ .steps__list{ grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
  .step{ padding:76px 24px 28px; } .step__n{ top:24px; left:24px; } }

/* reviews */
.quotes{ margin:0 calc(var(--gut) * -1); padding:4px var(--gut) 12px; display:grid; grid-auto-flow:column; grid-auto-columns:min(84vw, 360px);
  gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.quotes::-webkit-scrollbar{ display:none; }
.quote,.score{ scroll-snap-align:start; margin:0; display:flex; flex-direction:column; gap:14px; padding:24px; border-radius:var(--r);
  background:var(--ink-2); border:1px solid var(--line); }
.quote__stars{ color:var(--accent-lift); letter-spacing:.12em; font-size:15px; }
.quote blockquote{ margin:0; flex:1; }
.quote blockquote p{ margin:0; font-size:17px; line-height:1.55; }
.quote figcaption{ display:flex; align-items:center; gap:12px; }
.quote figcaption > span:last-child{ display:flex; flex-direction:column; }
.quote figcaption small{ color:var(--fg-3); font-size:13.5px; }
.quote__av{ display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--brand-mist); color:var(--brand-lift); font:800 16px/1 var(--sans); }
.score{ text-decoration:none; background:var(--brand); color:var(--on-brand); border-color:transparent; justify-content:space-between; }
.score__n{ font:var(--d-weight) 72px/.9 var(--serif); letter-spacing:-.03em; }
.score__t{ font:600 17px/1.35 var(--sans); }
.score__l{ display:flex; align-items:center; gap:8px; font:700 14px/1 var(--sans); }
.score__l svg{ width:17px; height:17px; }
@media (min-width:900px){ .quotes{ margin:0; padding:0; grid-auto-flow:row; grid-template-columns:repeat(3,1fr); overflow:visible; } }

/* areas */
.areas__body{ display:grid; gap:28px; }
.areas__places{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.areas__places li{ display:flex; align-items:center; gap:8px; padding:12px 16px; border-radius:999px; background:var(--ink-2); border:1px solid var(--line);
  font:650 16px/1 var(--sans); }
.areas__places svg{ width:17px; height:17px; color:var(--brand-lift); }
.areas__centres ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.areas__centres li{ display:flex; flex-direction:column; gap:2px; padding:16px 18px; border-left:4px solid var(--brand); background:var(--ink-2); border-radius:0 var(--r) var(--r) 0; }
.areas__centres b{ font:var(--d-weight) 20px/1.2 var(--serif); }
.areas__centres span{ color:var(--fg-2); font-size:15px; }
.areas__addr address{ font-style:normal; font-size:19px; font-weight:600; margin-bottom:16px; }
@media (min-width:900px){ .areas__in{ display:grid; grid-template-columns:1fr 1.2fr; gap:64px; align-items:start; } .areas .head{ margin:0; } }

/* gallery */
.shots{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.shot{ padding:0; border:0; background:var(--ink-2); border-radius:calc(var(--r) * .7); overflow:hidden; cursor:zoom-in; aspect-ratio:1; }
.shot img{ width:100%; height:100%; object-fit:cover; transition:scale .6s var(--ease); }
.shot:hover img{ scale:1.05; }
@media (min-width:900px){ .shots{ grid-template-columns:repeat(4,1fr); gap:12px; } .shots--three{ grid-template-columns:repeat(3,1fr); } }

/* prices (2026-10-16): a rate card of the business's own prices, grouped; figures large, units and words small */
.prices__card{ padding:4px 18px 8px; border-radius:var(--r); background:var(--ink-2); border:1px solid var(--line); }
.prices__group{ padding:18px 0 4px; }
.prices__group + .prices__group{ border-top:1px solid var(--line-2); }
.prices__gt{ margin:0 0 2px; font:700 12.5px/1.3 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--fg-3); }
.prices__list{ list-style:none; margin:0; padding:0; }
.prices__row{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 16px; padding:13px 0; }
.prices__row + .prices__row{ border-top:1px solid var(--line); }
.prices__name{ flex:1 1 11em; min-width:0; margin:0; }
.prices__name b{ display:block; font-weight:700; font-size:17px; line-height:1.3; }
.prices__name span{ display:block; margin-top:3px; font-size:14.5px; line-height:1.45; color:var(--fg-2); }
.prices__price{ margin:0 0 0 auto; font:800 27px/1 var(--serif); letter-spacing:-.02em; white-space:nowrap; font-variant-numeric:tabular-nums; }
.prices__price small{ font:650 14px/1 var(--sans); letter-spacing:0; color:var(--fg-2); }
.prices__price--ask{ font:700 15px/1.3 var(--sans); letter-spacing:0; color:var(--fg-2); }
.prices__go{ flex:0 0 100%; display:inline-flex; align-items:center; gap:8px; min-height:44px; margin-top:4px; color:var(--fg); font:700 15px/1.2 var(--sans); text-underline-offset:4px; }
.prices__go svg{ width:16px; height:16px; }
.prices__note{ margin:6px 0 12px; font-size:14px; line-height:1.5; color:var(--fg-3); }
@media (min-width:900px){ .prices__in{ display:grid; grid-template-columns:1fr 1.25fr; gap:64px; align-items:start; } .prices__card{ padding:6px 28px 12px; } }

/* video (2026-10-16): the business's own clips in one grid, the first large; every frame 4:5, the clip cut to fill it */
.vids__grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.vid{ position:relative; margin:0; overflow:hidden; aspect-ratio:4 / 5; border-radius:var(--r); background:var(--ink-3); isolation:isolate; }
.vid--lead{ grid-column:1 / -1; }
.vid__still,.vid video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.vid video{ opacity:0; transition:opacity .3s; }
.vid.is-ready video{ opacity:1; }
.vid__cap{ position:absolute; inset:auto 0 0; z-index:1; padding:40px 12px 11px; background:linear-gradient(rgb(0 0 0 / 0), rgb(0 0 0 / .7)); color:#fff;
  font:500 13px/1.3 var(--sans); pointer-events:none; }
.vid__cap b{ display:block; font-weight:700; font-size:14px; }
.vid__cap span{ display:block; margin-top:2px; opacity:.86; }
.vid--lead .vid__cap{ padding:64px 18px 16px; font-size:14.5px; }
.vid--lead .vid__cap b{ font-size:17px; }
.vid__btn{ position:absolute; top:8px; right:8px; z-index:2; display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:50%;
  background:rgb(0 0 0 / .46); color:#fff; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .2s; }
.vid__btn:hover{ background:rgb(0 0 0 / .66); }
.vid__btn:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.vid__btn i{ width:13px; height:15px; background:currentColor; clip-path:polygon(0 0, 100% 50%, 0 100%); translate:2px 0; }
.vid__btn[aria-pressed="true"] i{ width:12px; height:14px; clip-path:none; background:linear-gradient(90deg, currentColor 0 4px, transparent 4px 8px, currentColor 8px); translate:0 0; }
html:not(.app) .vid__btn{ display:none; }
@media (min-width:900px){
  .vids__grid{ grid-template-columns:repeat(4, 1fr); gap:14px; }
  .vid--lead{ grid-column:span 2; grid-row:span 2; aspect-ratio:auto; }
  /* three clips: one row of three, all the same shape */
  .vids__grid:has(> .vid:nth-child(3):last-child){ grid-template-columns:repeat(3, 1fr); }
  .vids__grid:has(> .vid:nth-child(3):last-child) .vid--lead{ grid-column:auto; grid-row:auto; aspect-ratio:4 / 5; }
  .vid__btn{ top:12px; right:12px; }
}

/* faq */
.qas{ border-top:1px solid var(--line); }
.qa{ border-bottom:1px solid var(--line); }
.qa__q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:20px 0; border:0; background:none;
  text-align:left; cursor:pointer; font:700 18px/1.35 var(--sans); }
.qa__ic{ position:relative; flex:none; width:32px; height:32px; border-radius:50%; background:var(--ink-3); }
.qa__ic::before,.qa__ic::after{ content:""; position:absolute; left:50%; top:50%; width:12px; height:2px; margin:-1px 0 0 -6px; background:currentColor; transition:rotate .3s var(--ease); }
.qa__ic::after{ rotate:90deg; }
.qa.is-open .qa__ic::after{ rotate:0deg; }
.qa__a{ overflow:hidden; max-height:0; transition:max-height .4s var(--ease); }
html:not(.app) .qa__a{ max-height:none; }
.qa__a p{ margin:0 0 22px; color:var(--fg-2); max-width:62ch; }
@media (min-width:900px){ .faq__in{ display:grid; grid-template-columns:1fr 1.4fr; gap:64px; align-items:start; } }

/* contact */
.closing__in{ display:grid; gap:36px; }
.ways{ list-style:none; margin:26px 0 0; padding:0; display:grid; gap:10px; }
.way{ display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:var(--r); background:var(--ink-2); border:1px solid var(--line);
  text-decoration:none; transition:border-color .2s; }
a.way:hover{ border-color:var(--brand); }
.way svg{ width:22px; height:22px; color:var(--brand-lift); }
.way span{ display:flex; flex-direction:column; min-width:0; font-size:16.5px; overflow-wrap:anywhere; }
.way b{ font:600 12.5px/1.4 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--fg-3); }
.quoteform{ padding:24px 20px; border-radius:calc(var(--r) * 1.3); background:var(--ink-2); border:1px solid var(--line); }
.quoteform__title{ margin:0 0 18px; font:var(--d-weight) 26px/1.1 var(--serif); letter-spacing:var(--d-track); text-transform:var(--d-case); font-style:var(--d-style); }
.form__grid{ display:grid; gap:14px; margin-bottom:18px; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field label{ font:650 14px/1.2 var(--sans); color:var(--fg-2); }
.field input,.field select,.field textarea{ width:100%; min-height:52px; padding:13px 15px; border-radius:calc(var(--r) * .7); border:1.5px solid var(--line-2);
  background:var(--ink); font-size:16px; transition:border-color .2s; }
.field textarea{ min-height:96px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--brand-lift); }
.field .is-upper{ text-transform:uppercase; letter-spacing:.08em; font-weight:700; }
.quoteform__note{ margin:14px 0 0; font-size:13.5px; color:var(--fg-3); }
.callcard{ display:flex; flex-direction:column; gap:16px; }
.callcard .quoteform__title,.callcard .quoteform__note{ margin:0; }
.callcard__num{ display:flex; align-items:center; gap:14px; color:var(--fg); text-decoration:none;
  font:var(--d-weight) clamp(30px,7vw,46px)/1 var(--serif); letter-spacing:var(--d-track); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.callcard__num svg{ flex:none; width:32px; height:32px; color:var(--brand-lift); }
.callcard__num:hover span{ text-decoration:underline; text-underline-offset:6px; }
.form__ok{ display:none; margin:14px 0 0; padding:14px 16px; border-radius:var(--r); background:var(--brand-mist); font-weight:600; }
@media (min-width:600px){ .form__grid{ grid-template-columns:1fr 1fr; } .field--full{ grid-column:1 / -1; } }
@media (min-width:900px){ .closing__in{ grid-template-columns:1fr 1.1fr; gap:72px; align-items:start; } .quoteform{ padding:36px; } }

/* footer */
.footer{ padding:56px 0 calc(110px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:var(--ink-2); }
.footer__grid{ display:grid; gap:32px; }
.footer__about p{ color:var(--fg-2); max-width:44ch; font-size:15.5px; }
.footer__h{ margin:0 0 12px; font:700 12px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--fg-3); }
.footer__col ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.footer__col a,.footer__col span{ text-decoration:none; color:var(--fg-2); font-size:15.5px; overflow-wrap:anywhere; }
.footer__col a:hover{ color:var(--fg); }
.socials{ display:flex; gap:8px; }
.socials a{ display:grid; place-items:center; width:42px; height:42px; border-radius:50%; border:1px solid var(--line-2); }
.socials svg{ width:18px; height:18px; }
.footer__base{ margin-top:40px; padding-top:20px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:8px 24px; font-size:13.5px; color:var(--fg-3); }
@media (min-width:900px){ .footer{ padding-bottom:56px; } .footer__grid{ grid-template-columns:1.6fr repeat(3,1fr); } }

/* lightbox */
.lightbox{ position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:56px 12px; background:rgb(0 0 0 / .92);
  opacity:0; visibility:hidden; transition:opacity .25s, visibility 0s .25s; }
.lightbox.is-open{ opacity:1; visibility:visible; transition:opacity .25s; }
.lightbox img{ max-width:100%; max-height:100%; object-fit:contain; border-radius:6px; }
.lightbox button{ position:absolute; display:grid; place-items:center; width:48px; height:48px; border-radius:50%; border:0;
  background:rgb(255 255 255 / .12); color:#fff; cursor:pointer; }
.lightbox button svg{ width:22px; height:22px; }
.lightbox__close{ top:12px; right:12px; }
.lightbox__nav--prev{ left:12px; bottom:16px; } .lightbox__nav--next{ right:12px; bottom:16px; }
.lightbox__count{ position:absolute; bottom:30px; left:50%; translate:-50% 0; color:#fff; font:600 14px/1 var(--sans); }

/* --- arrival ------------------------------------------------------------------ */
html.app .reveal{ opacity:0; translate:0 22px; transition:opacity .7s var(--ease), translate .7s var(--ease); transition-delay:var(--d,0ms); }
html.app .reveal.is-in{ opacity:1; translate:0 0; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  html.js .reveal{ opacity:1; translate:none; transition:none; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* --- the trip (2026-10-09, lesson-journey first): the journey map and the steps under it.
   A layout opts in with its own steps.html (#trip, .trip__hold, .journey); app.js drives it.
   On a phone the map holds at the top of the screen (sticky) while the steps go by
   underneath; app.js moves the car from step to step. From 900px the map holds beside
   the steps. Without .app (no JS) everything is drawn and the car is at the flag. */
.trip{ position:relative; display:grid; gap:18px; }
.trip__hold{ position:sticky; top:10px; z-index:2; }
.trip__hold::before{ content:""; position:absolute; left:-4px; right:-4px; bottom:100%; height:10px; background:var(--ink); }
.trip__hold::after{ content:""; position:absolute; left:-4px; right:-4px; top:100%; height:34px; background:linear-gradient(var(--ink), rgb(var(--ink-rgb) / 0)); pointer-events:none; }
.journey{ position:relative; margin:0; aspect-ratio:360 / 260; border-radius:var(--r); background:var(--ink-2); border:1px solid var(--line);
  overflow:hidden; box-shadow:0 1px 0 var(--line), 0 22px 30px -22px rgb(0 0 0 / .45); }
.journey__map{ position:absolute; inset:0; width:100%; height:100%; color:var(--line-2); }
.journey__verge{ fill:none; stroke:rgb(var(--brand-rgb) / .16); stroke-width:34; stroke-linecap:round; }
.journey__road{ fill:none; stroke:var(--hero-ink); stroke-width:20; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:0; }
.journey__dash{ fill:none; stroke:var(--ink); stroke-width:1.6; stroke-dasharray:6 7; opacity:.9; }
.journey__done{ fill:none; stroke:var(--hero-brand-lift); stroke-width:4; stroke-linecap:round; stroke-dasharray:var(--done,1) 2; }
.journey__car{ translate:330px 34px; rotate:-100deg; }
.journey__body{ fill:#fff; stroke:var(--hero-ink); stroke-width:1.4; }
.journey__roof{ fill:var(--brand); }
.journey__lamp{ fill:var(--ring, #D4202A); }
.journey__start{ position:absolute; left:12.8%; top:82%; width:22%; aspect-ratio:1; translate:-50% -50%; border-radius:50%; overflow:hidden;
  display:grid; place-items:center; background:var(--brand); border:4px solid var(--ink); box-shadow:0 0 0 2px var(--brand), 0 14px 26px -12px rgb(0 0 0 / .5); }
.journey__start img{ width:100%; height:100%; object-fit:cover; }
.journey__l{ display:grid; place-items:center; width:58%; aspect-ratio:1; border-radius:4px; background:#fff; color:var(--ring, #D4202A); font:900 clamp(22px,7vw,40px)/1 var(--sans); }
.journey__flag{ position:absolute; left:91.7%; top:13%; width:30px; height:22px; translate:-12% -100%; border-radius:2px; transform-origin:0 100%;
  background:conic-gradient(var(--hero-ink) 25%, #fff 0 50%, var(--hero-ink) 0 75%, #fff 0) 0 0 / 10px 10px; box-shadow:0 0 0 2px var(--hero-ink); }
.journey__flag::after{ content:""; position:absolute; left:-3px; top:-2px; width:3px; height:40px; background:var(--hero-ink); border-radius:2px; }
.journey__tag{ position:absolute; padding:6px 10px 5px; border-radius:999px; background:var(--ink); border:1px solid var(--line-2);
  font:700 12px/1 var(--sans); white-space:nowrap; box-shadow:0 6px 16px -10px rgb(0 0 0 / .4); transition:opacity .3s, scale .45s var(--spring); }
.journey__tag--a{ left:24%; top:86%; }
.journey__tag--b{ left:49%; top:56%; translate:-50% 0; }
.journey__tag--c{ right:13%; top:6%; background:var(--brand); color:var(--on-brand); border-color:var(--brand); }
.journey__burst{ position:absolute; left:91.7%; top:10%; width:0; height:0; }
.journey__burst i{ position:absolute; left:0; top:0; width:7px; height:7px; border-radius:2px; opacity:0; background:var(--sign-yellow, #FFD200); }
.journey__burst i:nth-child(3n+1){ background:var(--brand-lift); } .journey__burst i:nth-child(3n+2){ background:var(--ring, #D4202A); border-radius:50%; }
.app .journey__road{ stroke-dashoffset:1; }
.app .journey.is-in .journey__road{ animation:draw 1.3s .1s var(--ease) forwards; }
.app .journey__tag--b:not(.is-on),.app .journey__tag--c:not(.is-on){ opacity:0; scale:.6; }
.journey.is-there .journey__flag{ animation:wave 1.2s var(--ease) 2; }
.journey.is-there .journey__tag--c{ box-shadow:0 0 0 6px rgb(var(--brand-rgb) / .22), 0 10px 20px -10px rgb(0 0 0 / .5); }
.journey.is-there .journey__burst i{ animation:burst .9s var(--ease) forwards; }
.journey__burst i:nth-child(1){ --x:-34px; --y:-18px; } .journey__burst i:nth-child(2){ --x:-26px; --y:20px; }
.journey__burst i:nth-child(3){ --x:-8px; --y:30px; }   .journey__burst i:nth-child(4){ --x:-40px; --y:4px; }
.journey__burst i:nth-child(5){ --x:-16px; --y:-26px; } .journey__burst i:nth-child(6){ --x:14px; --y:26px; }
.journey__burst i:nth-child(7){ --x:-30px; --y:32px; }  .journey__burst i:nth-child(8){ --x:6px; --y:-22px; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes wave{ 0%,100%{ rotate:0deg; } 30%{ rotate:-9deg; } 65%{ rotate:6deg; } }
@keyframes burst{ 0%{ opacity:1; translate:0 0; scale:1; } 100%{ opacity:0; translate:var(--x) var(--y); scale:.4; rotate:180deg; } }

.trip .steps__list{ padding-bottom:8vh; }
body.trip-held .nav{ translate:0 -101%; }
@media (min-width:900px){
  .trip{ grid-template-columns:1fr 1.15fr; gap:56px; align-items:start; }
  .trip__hold{ grid-column:2; grid-row:1; top:calc(var(--nav-h) + 24px); }
  .trip__hold::before,.trip__hold::after{ display:none; }
  .trip .steps__list{ grid-column:1; grid-row:1; grid-template-columns:1fr; padding-block:4vh 22vh; }
  .journey__tag{ font-size:14px; padding:8px 13px 7px; }
}
@media (prefers-reduced-motion:reduce){ .app .journey__road{ stroke-dashoffset:0; } }

/* The selected trade designs carry the business identity in the hero, without cropping logos. */
.lesson-journey .identity,.garage-apex .identity{display:flex;align-items:center;gap:18px;min-width:0;margin-bottom:28px;}
.identity__logo{flex:none;width:80px;height:80px;object-fit:contain;background:#fff;border-radius:12px;padding:6px;}
.identity__copy{min-width:0;}
.identity__name{margin:0;font:800 clamp(24px,5vw,42px)/1.06 var(--sans);letter-spacing:-.035em;overflow-wrap:anywhere;text-wrap:balance;}
.identity__place{margin:7px 0 0;font:600 12px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2);}
.lesson-journey .brand__logo,.garage-apex .brand__logo{object-fit:contain;border-radius:6px;background:#fff;padding:3px;}
.lesson-journey .brand__name,.garage-apex .brand__name{white-space:normal;overflow:visible;font-size:clamp(15px,4vw,20px);line-height:1.08;}
.lesson-journey .nav .brand__sub,.garage-apex .nav .brand__sub{font-size:10px;letter-spacing:.04em;}
.garage-apex .identity{color:var(--hero-fg);border-left:3px solid var(--hero-brand-display);padding-left:18px;}
.garage-apex .identity__place{color:var(--hero-fg-2);}
@media(min-width:900px){.identity__logo{width:96px;height:96px;}.identity__name{font-size:42px;}}

.skip-link{position:fixed;left:16px;top:12px;z-index:100;translate:0 -180%;padding:12px 18px;background:var(--fg);color:var(--ink);font-weight:700;border-radius:6px;}
.skip-link:focus{translate:0 0;}

/* socials: icons at the nav's right edge and a section of two cards (opt-in: contact.socialProminent, section "socials") */
.nav__soc{ display:flex; gap:6px; }
.nav__soc a{ display:grid; place-items:center; width:40px; height:40px; border-radius:50%; border:1px solid color-mix(in srgb, currentColor 34%, transparent); color:inherit; }
.nav__soc svg{ width:18px; height:18px; }
@media (max-width:420px){ .nav__soc a{ width:36px; height:36px; } .nav__soc{ gap:4px; } .nav__cta{ gap:5px; } }
.soc__cards{ display:grid; gap:12px; grid-template-columns:1fr; max-width:720px; margin-inline:auto; }
@media (min-width:600px){ .soc__cards{ grid-template-columns:1fr 1fr; } }
.soc__card{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:26px 18px; border-radius:var(--r-btn, 14px); background:var(--card, #fff); border:1px solid var(--line-2); text-decoration:none; color:var(--fg); text-align:center; }
.soc__card svg{ width:34px; height:34px; color:var(--brand-lift, var(--brand)); }
.soc__name{ font:700 20px/1.1 var(--sans); }
.soc__handle{ font:500 15px/1.2 var(--sans); opacity:.75; }
.nav:has(.nav__soc) .brand__sub{ display:none; }
@media (min-width:1000px){ .nav:has(.nav__soc) .brand__sub{ display:block; } }
.nav:has(.nav__soc) .nav__links a,.nav:has(.nav__soc) .nav__tel span,.dock[data-always] .dock__btn span{ white-space:nowrap; }
.dock[data-always] .dock__btn{ gap:6px; padding-inline:6px; }
@media (min-width:900px) and (max-width:1279px){ .nav:has(.nav__soc) .nav__tel span{ display:none; } .nav:has(.nav__soc) .nav__tel{ width:40px; height:40px; justify-content:center; } .nav:has(.nav__soc) .nav__links{ gap:18px; } }

/* Optional supporting documents: readable notices, terms and other short pages. */
.document__in{max-width:780px;}
.document__back{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:650;text-underline-offset:4px;}
.document__back svg{width:18px;height:18px;rotate:180deg;}
.document__head{margin-top:32px;padding-bottom:28px;border-bottom:1px solid var(--line);}
.document__head h1{font:750 clamp(36px,5vw,58px)/1.12 var(--sans);letter-spacing:-.04em;margin:0;}
.document__head .lede{margin-top:16px;}
.document__updated{font-size:13px;color:var(--fg-3);margin:16px 0 0;}
.document__section{padding:28px 0;border-bottom:1px solid var(--line);}
.document__section h2{font:700 23px/1.3 var(--sans);letter-spacing:-.02em;margin:0 0 14px;}
.document__section p,.document__section li{color:var(--fg-2);font-size:16px;line-height:1.75;}
.document__section p{margin:12px 0 0;}
.document__links{padding-left:20px;margin:18px 0 0;}
.document__links li{margin-top:8px;}
.document__links a{color:var(--brand-display,var(--brand-lift));text-underline-offset:4px;}
.document__in>.btn{margin-top:32px;}

/* --- showcase: one kind of job in its own section, photos in labelled rows ---------------- */
.showcase__group{ margin-top:28px; }
.showcase__group:first-of-type{ margin-top:0; }
.showcase__tag{ display:inline-block; margin:0 0 12px; padding:6px 14px; border-radius:999px; border:1.5px solid var(--line-2);
  font:700 12.5px/1.2 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--fg-2); }
.showcase__tag--after{ background:var(--brand); border-color:var(--brand); color:var(--on-brand); }
.showcase__row{ display:grid; grid-auto-flow:column; grid-auto-columns:68vw; gap:10px; margin:0 calc(var(--gut) * -1); padding:0 var(--gut) 6px;
  list-style:none; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-padding-inline:var(--gut); scrollbar-width:none; }
.showcase__row::-webkit-scrollbar{ display:none; }
.showcase__shot{ min-width:0; aspect-ratio:4 / 5; border-radius:var(--r); overflow:hidden; background:var(--ink-2); scroll-snap-align:start; }
.showcase__shot img{ width:100%; height:100%; object-fit:cover; }
.showcase__cta{ margin:28px 0 0; }
@media (min-width:900px){
  .showcase__row{ grid-auto-flow:row; grid-template-columns:repeat(5,minmax(0,1fr)); margin:0; padding:0; overflow:visible; }
}

/* =============================================================================
   PLUMB-FLOW — plumbers (2026-11-11, first for Rapid Emergency Plumbers Northeast Ltd).
   Appended after the shared trade base. Night-navy bands (hero, the call-out, the close,
   the footer: --hero-* tokens) between light pages (--ink). Archivo, wide and heavy for
   display (the logo's own lettering is wide, heavy and italic), the marked words italic in
   the brand. The firm's whole logo leads the hero and its speed streaks run on out of it.
   Motion: translate / scale / opacity only, once, by time; nothing follows the scroll;
   no blur. Under reduced motion or without JS this is the finished, still page.
   ========================================================================== */

.plumb-flow{
  --r:14px;
  --d-weight:800;
  --d-track:-.025em;
  --wide:110%;
  --pf-open:#34C759;            /* the "open now" dot: always on the night hero */
  --pf-star:#FBBC04;            /* Google's own star colour */
  --pf-card:color-mix(in srgb, var(--ink) 25%, #fff);
  --pf-night-line:rgb(var(--hero-fg-rgb) / .1);
  --pf-out:cubic-bezier(.16,1,.3,1);
}
body.plumb-flow{ background:var(--ink); font-size:17px; }

/* --- type -------------------------------------------------------------------- */
.pf-h2{ margin:0; font:800 clamp(34px,8.4vw,62px)/.98 var(--serif); font-stretch:var(--wide); letter-spacing:var(--d-track); text-wrap:balance; }
.pf-h2 i{ font-style:italic; color:var(--brand-display); }
.pf-lede{ margin:16px 0 0; max-width:46ch; font-size:clamp(17px,1.35vw,19px); line-height:1.6; color:var(--fg-2); text-wrap:pretty; }
.pf-kicker{ margin:0 0 14px; font:650 15px/1.3 var(--sans); color:var(--brand-lift); }

/* --- nav: night, solid (no blur); its mark waits until the hero's logo has gone by --- */
.plumb-flow .nav{ background:var(--hero-ink); color:var(--hero-fg); border-bottom-color:var(--pf-night-line); -webkit-backdrop-filter:none; backdrop-filter:none; }
.plumb-flow .brand__logo{ width:44px; height:44px; border-radius:0; object-fit:contain; }
.plumb-flow .brand__name{ font-stretch:105%; }
.plumb-flow .brand__sub{ color:var(--hero-fg-3); letter-spacing:.02em; text-transform:none; font-size:12px; }
html.app .plumb-flow .nav .brand{ opacity:0; translate:0 6px; transition:opacity .35s, translate .45s var(--pf-out); }
html.app .plumb-flow .nav.is-branded .brand{ opacity:1; translate:0 0; }
@media (min-width:1000px){
  html.app .plumb-flow .nav .brand{ opacity:1; translate:0 0; }
  html.app .plumb-flow .nav .brand__logo{ opacity:0; scale:.7; transition:opacity .35s, scale .45s var(--pf-out); }
  html.app .plumb-flow .nav .brand__txt{ translate:-54px 0; transition:translate .45s var(--pf-out); }
  html.app .plumb-flow .nav.is-branded .brand__logo{ opacity:1; scale:1; }
  html.app .plumb-flow .nav.is-branded .brand__txt{ translate:0 0; }
}
.plumb-flow .burger{ border-color:rgb(var(--hero-fg-rgb) / .24); }
.plumb-flow .nav__progress{ background:var(--accent); }
@media (min-width:1000px){
  .plumb-flow .nav__links a{ color:var(--hero-fg-2); }
  .plumb-flow .nav__links a:hover,.plumb-flow .nav__links a.is-here{ color:var(--hero-fg); }
  .plumb-flow .nav__tel{ color:var(--hero-fg); }
  .plumb-flow .nav__tel svg{ color:var(--hero-brand-lift); }
}
.plumb-flow .drawer{ background:var(--hero-ink); color:var(--hero-fg); }
.plumb-flow .drawer nav a{ border-bottom-color:var(--pf-night-line); font-stretch:var(--wide); }
.plumb-flow .drawer nav a span{ color:var(--hero-brand-lift); }
.plumb-flow .drawer .btn--line{ border-color:rgb(var(--hero-fg-rgb) / .3); color:var(--hero-fg); }

/* --- dock: solid night, the call first ------------------------------------------ */
.plumb-flow .dock{ background:var(--hero-ink); border-color:rgb(var(--hero-fg-rgb) / .14); -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:0 14px 40px -14px rgb(0 0 0 / .6); }
.plumb-flow .dock__btn{ background:var(--hero-ink-3); color:var(--hero-fg); }
.plumb-flow .dock__btn:first-child svg{ color:var(--hero-brand-lift); }
.plumb-flow .dock__btn--main{ background:var(--brand); color:var(--on-brand); }

/* --- hero ---------------------------------------------------------------------- */
.pf-hero{ position:relative; overflow:hidden; padding:26px 0 0; color:var(--hero-fg);
  background:linear-gradient(180deg, var(--hero-ink) 0%, var(--hero-ink) 45%, var(--hero-ink-2) 100%); }
.pf-hero__in{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; }

/* the logo, and its streaks carried on: they leave the logo where its own do (--sx, --sy, in % of the logo),
   one --sg apart (cqw of the logo's width), at its angle (--sa), and run off the left of the screen */
.pf-mark{ position:relative; width:min(60vw, 250px); aspect-ratio:863 / 645; margin:0 auto 18px; container-type:inline-size; }
.pf-logo{ position:relative; z-index:1; width:100%; height:auto; }
.pf-streaks{ position:absolute; z-index:0; right:calc(100% - var(--sx, 6%)); top:var(--sy, 43%); width:calc(50vw - 50cqw + var(--sx, 6%) * 1.1); height:0;
  transform-origin:100% 0; rotate:calc(var(--sa, 11deg) * -1); pointer-events:none; }
.pf-streaks i{ position:absolute; right:0; width:100%; height:3px; margin-top:-1.5px; color:var(--hero-fg);
  background:linear-gradient(90deg, rgb(0 0 0 / 0) 0%, currentColor 82%); clip-path:polygon(0 42%, 100% 0, 100% 100%, 0 58%); transform-origin:100% 50%; }
.pf-streaks i:nth-child(1){ top:calc(var(--sg, 3.4cqw) * -1); color:var(--brand); }
.pf-streaks i:nth-child(2){ top:0; height:4px; margin-top:-2px; }
.pf-streaks i:nth-child(3){ top:var(--sg, 3.4cqw); color:var(--accent); }

.pf-hero__status{ display:inline-flex; align-items:center; gap:9px; margin:0 0 18px; padding:7px 14px 7px 12px; border-radius:999px;
  border:1px solid rgb(var(--hero-fg-rgb) / .16); font:600 13.5px/1.2 var(--sans); color:var(--hero-fg-2); }
.pf-live{ width:8px; height:8px; border-radius:50%; background:var(--pf-open); box-shadow:0 0 0 3px rgb(52 199 89 / .2); }
.pf-hero__title{ margin:0; font:800 clamp(40px,10.6vw,80px)/.96 var(--serif); font-stretch:112%; letter-spacing:-.03em; text-wrap:balance; }
.pf-hero__title i{ font-style:italic; color:var(--hero-brand-display); }
.pf-hero__lead{ margin:18px auto 0; max-width:44ch; font-size:clamp(16.5px,1.35vw,19px); line-height:1.58; color:var(--hero-fg-2); text-wrap:pretty; }
.pf-hero__actions{ display:flex; flex-direction:column; gap:10px; width:100%; margin-top:26px; }
.pf-call svg{ width:20px; height:20px; }
.pf-call:hover svg{ translate:0 0; }
.pf-hero__score{ display:inline-flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px 10px; margin-top:20px; color:var(--hero-fg-2);
  text-decoration:none; font:500 14.5px/1.3 var(--sans); }
.pf-hero__score b{ color:var(--hero-fg); font-weight:800; }
.pf-hero__score:hover span{ text-decoration:underline; text-underline-offset:4px; }

.pf-stars{ display:inline-flex; gap:2px; color:var(--pf-star); }
.pf-stars i{ width:15px; height:15px; background:currentColor;
  clip-path:polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.pf-stars--lg i{ width:22px; height:22px; }

.pf-facts{ list-style:none; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); margin:38px auto 0; padding:0; border-top:1px solid var(--pf-night-line); }
.pf-facts li{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:18px 6px 22px; text-align:center; }
.pf-facts li + li{ border-left:1px solid var(--pf-night-line); }
.pf-facts b{ font:800 clamp(24px,6vw,34px)/1 var(--serif); font-stretch:112%; letter-spacing:-.02em; color:var(--hero-fg); }
.pf-facts li:nth-child(1) b{ color:var(--hero-brand-display); }
.pf-facts li:nth-child(3) b{ color:var(--hero-accent-lift); }
.pf-facts span{ font:500 12.5px/1.35 var(--sans); color:var(--hero-fg-3); max-width:16ch; }

@media (min-width:600px){
  .pf-hero__actions{ flex-direction:row; justify-content:center; width:auto; }
}
@media (min-width:900px){
  .pf-hero{ display:flex; flex-direction:column; min-height:calc(100svh - var(--nav-h)); padding-top:clamp(20px, 3vh, 44px); }
  .pf-hero__in{ flex:1; justify-content:center; }
  .pf-mark{ width:clamp(170px, 22vh, 290px); margin-bottom:clamp(12px, 2vh, 20px); }
  .pf-hero__status{ margin-bottom:clamp(12px, 2vh, 18px); }
  .pf-hero__lead{ max-width:60ch; }
  .pf-hero__actions{ margin-top:clamp(18px, 3vh, 28px); }
  .pf-streaks i{ height:4px; margin-top:-2px; }
  .pf-streaks i:nth-child(2){ height:5px; margin-top:-2.5px; }
  .pf-hero__title{ font-size:clamp(48px, min(5.3vw, 8vh), 82px); }
  .pf-facts{ margin-top:clamp(22px, 3.5vh, 44px); }
  .pf-facts li{ flex-direction:row; justify-content:center; gap:14px; padding:clamp(16px, 2.4vh, 24px) 10px clamp(18px, 2.8vh, 28px); }
  .pf-facts span{ text-align:left; font-size:14px; }
}

/* the opening, once: the streaks shoot out behind the logo as it lands, then the words rise */
@keyframes pf-shoot{ from{ scale:0 1; opacity:0; } 30%{ opacity:1; } to{ scale:1 1; opacity:1; } }
@keyframes pf-land{ from{ opacity:0; translate:-12% 0; scale:.94; } to{ opacity:1; translate:0 0; scale:1; } }
@keyframes pf-rise{ from{ opacity:0; translate:0 18px; } to{ opacity:1; translate:0 0; } }
html.app .pf-logo{ animation:pf-land .8s var(--pf-out) .05s both; }
html.app .pf-streaks i{ animation:pf-shoot .9s var(--pf-out) both; }
html.app .pf-streaks i:nth-child(1){ animation-delay:.12s; }
html.app .pf-streaks i:nth-child(2){ animation-delay:.18s; }
html.app .pf-streaks i:nth-child(3){ animation-delay:.24s; }
html.app .pf-hero__copy > *{ animation:pf-rise .7s var(--pf-out) both; }
html.app .pf-hero__status{ animation-delay:.32s; }
html.app .pf-hero__title{ animation-delay:.38s; }
html.app .pf-hero__lead{ animation-delay:.46s; }
html.app .pf-hero__actions{ animation-delay:.52s; }
html.app .pf-hero__score{ animation-delay:.58s; }
html.app .pf-facts{ animation:pf-rise .7s var(--pf-out) .64s both; }

/* --- hero with their photograph (hero.image, 2026-11-11) ------------------------------
   Phone: the photo first, the width of the screen, its foot fading into the night; the words under it.
   From 900px: the photo is the right half of the screen, top to bottom and out to the edge; the words
   stand in the left half, the facts at its foot. Opening, once: the photo waits until it has loaded
   (.is-ready, set by the inline script beside it), then the logo's three speed lines run across it
   left to right and draw it open behind them (the frame's clip follows their front edge, same ease
   and time), while it settles from a little closer. Gated on html.js (set in the head, before the
   first paint), so nothing shows and then hides. */
.pf-hero--pic{ padding:0; background:var(--hero-ink); }
.pf-hero--pic .pf-hero__in{ display:block; text-align:left; }
.pf-pic{ position:relative; margin:0 calc(var(--gut) * -1); height:clamp(270px, 46svh, 540px); overflow:hidden; background:var(--hero-ink-2); }
.pf-pic__frame{ position:absolute; inset:0; display:block; overflow:hidden; }
.pf-pic__img{ width:100%; height:100%; object-fit:cover; object-position:50% 22%; }
.pf-pic::after{ content:""; position:absolute; inset:auto 0 0; height:24%; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgb(var(--hero-ink-rgb) / 0), rgb(var(--hero-ink-rgb) / .92)); }
.pf-pic__run{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.pf-pic__run i{ position:absolute; left:0; top:46%; width:42%; height:3px; margin-top:-1.5px; opacity:0; color:var(--hero-fg);
  background:linear-gradient(90deg, rgb(0 0 0 / 0) 0%, currentColor 88%); clip-path:polygon(0 42%, 100% 0, 100% 100%, 0 58%); }
.pf-pic__run i:nth-child(1){ top:calc(46% - 13px); color:var(--brand); }
.pf-pic__run i:nth-child(2){ height:4px; margin-top:-2px; }
.pf-pic__run i:nth-child(3){ top:calc(46% + 13px); color:var(--accent); }
.pf-pic__tag{ position:absolute; z-index:3; left:var(--gut); bottom:16px; display:inline-flex; align-items:center; gap:9px; padding:8px 14px 8px 12px;
  border-radius:999px; background:rgb(var(--hero-ink-rgb) / .84); color:var(--hero-fg); font:600 13.5px/1.2 var(--sans); }
.pf-hero--pic .pf-hero__copy{ padding:22px 0 0; }
.pf-hero--pic .pf-hero__title{ font-size:clamp(40px, 12.2vw, 60px); line-height:.95; }
.pf-hero--pic .pf-hero__lead{ margin:16px 0 0; }
.pf-hero--pic .pf-hero__actions{ margin-top:24px; }
.pf-hero--pic .pf-hero__score{ justify-content:flex-start; margin-top:18px; }
.pf-hero--pic .pf-facts{ margin:30px 0 0; width:auto; }
.pf-hero--pic .pf-facts li{ align-items:flex-start; text-align:left; padding:18px 0 22px; }
.pf-hero--pic .pf-facts li + li{ padding-left:14px; }
@media (min-width:600px) and (max-width:899px){
  .pf-pic{ height:clamp(320px, 52svh, 620px); }
  .pf-hero--pic .pf-hero__actions{ justify-content:flex-start; }
}
@media (min-width:900px){
  .pf-hero--pic{ display:block; min-height:clamp(620px, calc(100svh - var(--nav-h)), 980px); padding:0; }
  .pf-hero--pic .pf-hero__in{ position:static; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; min-height:inherit; }
  .pf-pic{ position:absolute; top:0; right:0; bottom:0; width:50%; height:auto; margin:0; }
  .pf-pic::after{ display:none; }
  .pf-pic__img{ object-position:50% 30%; }
  .pf-pic__run i{ top:50%; height:4px; margin-top:-2px; }
  .pf-pic__run i:nth-child(1){ top:calc(50% - 20px); }
  .pf-pic__run i:nth-child(2){ height:5px; margin-top:-2.5px; }
  .pf-pic__run i:nth-child(3){ top:calc(50% + 20px); }
  .pf-pic__tag{ left:28px; bottom:28px; padding:10px 16px 10px 14px; font-size:14px; }
  .pf-hero--pic .pf-hero__copy{ flex:1; display:flex; flex-direction:column; align-items:flex-start;
    width:calc(50vw - max(var(--gut), (100vw - var(--wrap)) / 2) - clamp(40px, 5vw, 88px)); max-width:600px; padding:clamp(28px, 5vh, 64px) 0 0; }
  .pf-hero--pic .pf-hero__copy{ container-type:inline-size; }
  .pf-hero--pic .pf-hero__title{ margin-top:auto; font-size:clamp(44px, min(5.7vw, 10vh, 14.6cqi), 92px); }   /* 14.6cqi: a 13-letter line fits the column */
  .pf-hero--pic .pf-hero__lead{ max-width:44ch; margin-top:clamp(16px, 2.4vh, 24px); }
  .pf-hero--pic .pf-hero__actions{ justify-content:flex-start; margin-top:clamp(20px, 3.4vh, 34px); }
  .pf-hero--pic .pf-facts{ align-self:stretch; margin-top:auto; padding-top:clamp(28px, 5vh, 56px); border-top:0; }
  .pf-hero--pic .pf-facts li{ flex-direction:column; justify-content:flex-start; gap:8px; padding:20px 0 clamp(22px, 3.6vh, 40px); border-top:1px solid var(--pf-night-line); }
  .pf-hero--pic .pf-facts li + li{ padding-left:20px; }
}

@keyframes pf-wipe{ from{ clip-path:inset(0 100% 0 0); } to{ clip-path:inset(0 0 0 0); } }
@keyframes pf-settle{ from{ scale:1.12; } to{ scale:1; } }
@keyframes pf-run{ 0%{ translate:-100% 0; opacity:1; } 84%{ opacity:1; } 100%{ translate:138% 0; opacity:0; } }
@keyframes pf-tag{ from{ opacity:0; translate:0 10px; } to{ opacity:1; translate:0 0; } }
html.js .pf-hero--pic .pf-pic__frame{ clip-path:inset(0 100% 0 0); }
html.js .pf-hero--pic .pf-pic__tag{ opacity:0; }
html.js .pf-hero--pic .pf-pic.is-ready .pf-pic__frame{ animation:pf-wipe 1.05s cubic-bezier(.77,0,.18,1) .05s both; }
html.js .pf-hero--pic .pf-pic.is-ready .pf-pic__img{ animation:pf-settle 2.2s var(--pf-out) .05s both; }
html.js .pf-hero--pic .pf-pic.is-ready .pf-pic__run i{ animation:pf-run 1.05s cubic-bezier(.77,0,.18,1) both; }
html.js .pf-hero--pic .pf-pic.is-ready .pf-pic__run i:nth-child(1){ animation-delay:.09s; }
html.js .pf-hero--pic .pf-pic.is-ready .pf-pic__run i:nth-child(2){ animation-delay:.05s; }
html.js .pf-hero--pic .pf-pic.is-ready .pf-pic__run i:nth-child(3){ animation-delay:.12s; }
html.js .pf-hero--pic .pf-pic.is-ready .pf-pic__tag{ animation:pf-tag .6s var(--pf-out) 1s both; }
html.js .pf-hero--pic .pf-hero__copy > *{ animation:pf-rise .75s var(--pf-out) both; }
html.js .pf-hero--pic .pf-hero__title{ animation-delay:.12s; }
html.js .pf-hero--pic .pf-hero__lead{ animation-delay:.22s; }
html.js .pf-hero--pic .pf-hero__actions{ animation-delay:.3s; }
html.js .pf-hero--pic .pf-hero__score{ animation-delay:.36s; }
html.js .pf-hero--pic .pf-facts{ animation-delay:.44s; }

/* the minimal wordmark in the nav and the footer (brandAssets.logoWide) */
.plumb-flow .brand--wide .brand__logo{ width:auto; height:30px; max-width:none; }
.pf-foot__brand .pf-foot__wide{ width:auto; height:56px; }
@media (min-width:900px){ .plumb-flow .brand--wide .brand__logo{ height:40px; } }

/* ---- the firm's van (shared/trade/partials/van.html, 2026-11-01): Knockround's panel van in the firm's colours, between the
   hero and the next section; it drives across as the page scrolls (view timeline), rims turning by --spin (app.js). No pin. */
.vanband{ overflow-x:clip; background:var(--ink); padding-block:clamp(18px,4vw,40px) 0; }
.drive{ --vw:clamp(260px,62vw,560px); position:relative; height:calc(var(--vw) * .434); container-type:inline-size; }
.drive::before{ content:""; position:absolute; left:0; right:0; bottom:calc(var(--vw) * .0189); height:1.5px; background:linear-gradient(90deg,transparent,var(--line-2) 14%,var(--line-2) 86%,transparent); }
.van-go{ position:absolute; left:0; bottom:0; width:var(--vw); translate:calc(50cqw - 50%) 0; will-change:translate; }
.van-go .rim{ position:absolute; top:71.304%; width:8.302%; height:auto; aspect-ratio:1; will-change:rotate; }
.van-go .rim--b{ left:16.981%; } .van-go .rim--f{ left:75.472%; }
.van{ display:block; width:100%; height:auto; overflow:visible; }
.vn-body{ fill:var(--v-body); } .vn-hi{ fill:var(--v-hi); } .vn-lo{ fill:var(--v-lo); } .vn-dk{ fill:var(--v-dk); } .vn-dk2{ fill:var(--v-dk2); }
.vn-pale{ fill:var(--v-pale); } .vn-pale2{ fill:var(--v-pale2); } .vn-ink{ fill:var(--v-ink); } .vn-seamf{ fill:var(--v-seam); }
.vn-seam{ fill:none; stroke:var(--v-seam); stroke-width:3; stroke-linecap:round; }
.vn-arch{ fill:none; stroke:var(--v-dk); stroke-width:10; }
.vn-glass{ fill:var(--v-pale); opacity:.22; }
.vn-shadow{ fill:var(--v-dk); opacity:.13; } .vn-shadow2{ fill:var(--v-dk); opacity:.18; }
.vn-tail{ fill:#E8654F; } .vn-lamp{ fill:#FFEFB0; } .vn-amber{ fill:#D9921F; }
.vn-glint{ fill:none; stroke:#FFFFFF; stroke-width:3.5; stroke-linecap:round; }
.vn-rim{ fill:#EFEDE8; } .vn-hub{ fill:var(--v-pale); stroke:var(--v-seam); stroke-width:3; }
.vn-plate{ fill:#FFFFFF; }
.vn-biz{ fill:var(--v-ink); font-family:var(--serif); font-weight:800; letter-spacing:-.01em; }
.vn-line{ fill:var(--v-ink); opacity:.86; font-family:var(--sans); font-weight:700; }
@keyframes drive{ from{ translate:-100% 0; } to{ translate:100cqw 0; } }
@keyframes spin{ from{ rotate:0deg; } to{ rotate:var(--spin,2600deg); } }
html.js .drive:not(.in) .van-go{ translate:-100% 0; }
html.js .drive .van-go{ transition:translate 2.4s cubic-bezier(.22,1,.36,1); }
html.js .drive .rim{ transition:rotate 2.4s cubic-bezier(.22,1,.36,1); }
html.js .drive:not(.in) .rim{ rotate:-720deg; }
@supports (animation-timeline:view()){
  .drive{ view-timeline:--drive block; }
  html.js .drive .van-go{ transition:none; animation:drive linear both; animation-timeline:--drive; animation-range:cover 4% cover 96%; }
  html.js .drive .rim{ transition:none; animation:spin linear both; animation-timeline:--drive; animation-range:cover 4% cover 96%; }
}
@media (prefers-reduced-motion:reduce){
  html.js .drive .van-go, html.js .drive:not(.in) .van-go{ animation:none; transition:none; translate:calc(50cqw - 50%) 0; }
  html.js .drive .rim, html.js .drive:not(.in) .rim{ animation:none; transition:none; rotate:none; }
}

/* plumb-flow: the van is the firm's red on the light page, and the logo's three speed lines trail it (brand, navy, accent:
   the light-ground form of the wordmark), tapering and fading behind it as it drives. They ride on the van's own layer. */
.plumb-flow .vanband{ padding-block:clamp(26px,5vw,56px) clamp(4px,1vw,12px); }
.plumb-flow .van-go::before{ content:""; position:absolute; right:96.6%; top:31%; width:calc(var(--vw) * 1.05); height:calc(var(--vw) * .085); pointer-events:none;
  background:linear-gradient(180deg, var(--brand) 0 22%, transparent 22% 39%, var(--hero-ink) 39% 61%, transparent 61% 78%, var(--accent) 78% 100%);
  clip-path:polygon(0 44%, 100% 0, 100% 100%, 0 56%);
  -webkit-mask:linear-gradient(90deg, transparent 0%, #000 78%); mask:linear-gradient(90deg, transparent 0%, #000 78%); }

/* --- the call-out rail follows the scroll (2026-11-11, Joseph: "THIS WOULD BE GOOD AS A SCROLLING ANIMATION") ---------
   Where the browser has view timelines, the water runs down (phone) or along (from 900px) the pipe as the page scrolls,
   one CSS timeline on the rail, nothing pinned and no script per frame. The range is chosen so the water's front stays at
   about the same height on a phone screen while the rail goes by (--r0, --rs: where it starts and how much of the scroll it
   takes); each stop lights as the water reaches it (--at: where its ring sits on the pipe, measured by app.js on load and
   resize; --pos until then). Elsewhere it fills once by time on
   view (app.js); under reduced motion it is shown full. */
@keyframes pf-fill-y{ from{ scale:1 0; } to{ scale:1 1; } }
@keyframes pf-fill-x{ from{ scale:0 1; } to{ scale:1 1; } }
@keyframes pf-ring{
  from{ border-color:var(--hero-ink-3); box-shadow:inset 0 0 0 7px var(--hero-ink), inset 0 0 0 20px var(--hero-ink-3); scale:1; }
  to{ border-color:var(--pf-ring, var(--accent)); box-shadow:inset 0 0 0 7px var(--hero-ink), inset 0 0 0 20px var(--pf-ring, var(--accent)); scale:1.08; } }
@keyframes pf-wake{ from{ opacity:.35; } to{ opacity:1; } }
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .pf-rail{ --r0:25%; --rs:.34; view-timeline:--rail block; }
    .pf-rail .pf-stop:last-child{ --pf-ring:var(--brand); }
    html.js .pf-rail .pf-rail__water{ transition:none; animation:pf-fill-y linear both; animation-timeline:--rail;
      animation-range:cover var(--r0) cover calc(var(--r0) + 100% * var(--rs)); }
    html.js .pf-rail .pf-stop__ring{ transition:none; animation:pf-ring linear both; animation-timeline:--rail;
      animation-range:cover calc(var(--r0) + var(--at, var(--pos)) * var(--rs) - 1.2%) cover calc(var(--r0) + var(--at, var(--pos)) * var(--rs) + .6%); }
    html.js .pf-rail .pf-stop > :not(.pf-stop__ring){ transition:none; animation:pf-wake linear both; animation-timeline:--rail;
      animation-range:cover calc(var(--r0) + var(--at, var(--pos)) * var(--rs) - 1.2%) cover calc(var(--r0) + var(--at, var(--pos)) * var(--rs) + 1.8%); }
    @media (min-width:900px){
      .pf-rail{ --r0:20%; --rs:.33; }
      html.js .pf-rail .pf-rail__water{ animation-name:pf-fill-x; }
    }
  }
}

/* --- services: ruled rows, each with its own photograph ---------------------------- */
.pf-svc__head{ margin-bottom:34px; }
.pf-svc__tel{ display:inline-flex; align-items:center; gap:14px; margin-top:28px; color:var(--fg); text-decoration:none; }
.pf-svc__tel svg{ box-sizing:content-box; width:20px; height:20px; padding:14px; border-radius:50%; background:var(--brand); color:var(--on-brand); }
.pf-svc__tel span{ display:flex; flex-direction:column; font:800 24px/1.1 var(--serif); font-stretch:var(--wide); letter-spacing:-.01em; }
.pf-svc__tel small{ font:600 13.5px/1.3 var(--sans); color:var(--fg-3); letter-spacing:0; }
.pf-svc__tel:hover span{ color:var(--brand-lift); }
.pf-svc__list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line-2); }
.pf-job__go{ display:grid; grid-template-columns:78px minmax(0,1fr) 24px; gap:18px; align-items:center; padding:16px 0;
  border-bottom:1px solid var(--line-2); color:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent; }
.pf-job__pic{ display:block; aspect-ratio:4 / 5; border-radius:10px; overflow:hidden; background:var(--ink-3); }
.pf-job__pic img{ width:100%; height:100%; object-fit:cover; transition:scale .6s var(--pf-out); }
.pf-job__n{ display:block; font:700 12.5px/1 var(--sans); letter-spacing:.06em; color:var(--brand-lift); }
.pf-job__name{ margin:6px 0 5px; font:800 22px/1.08 var(--serif); font-stretch:106%; letter-spacing:-.015em; }
.pf-job__text{ display:block; font-size:15.5px; line-height:1.5; color:var(--fg-2); text-wrap:pretty; }
.pf-job__arrow{ color:var(--fg-3); transition:translate .3s var(--pf-out), color .2s; }
.pf-job__arrow svg{ width:20px; height:20px; }
.pf-job__go:hover .pf-job__pic img{ scale:1.06; }
.pf-job__go:hover .pf-job__arrow{ translate:4px 0; color:var(--brand-lift); }
.pf-job__go:hover .pf-job__name{ color:var(--brand-lift); }
@media (min-width:900px){
  .pf-svc__in{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:80px; align-items:start; }
  .pf-svc__head{ margin:0; padding-top:6px; }
  .pf-job__go{ grid-template-columns:104px minmax(0,1fr) 28px; gap:28px; padding:20px 0; }
  .pf-job__name{ font-size:27px; }
  .pf-job__text{ font-size:16.5px; }
}

/* --- the call-out: one real job on a timed rail ------------------------------------- */
.pf-call-out{ background:var(--hero-ink); color:var(--hero-fg); }
.pf-call-out .pf-kicker{ color:var(--hero-accent-lift); }
.pf-call-out .pf-h2 i{ color:var(--hero-brand-display); }
.pf-call-out .pf-lede{ color:var(--hero-fg-2); }
.pf-rail{ position:relative; margin-top:44px; }
.pf-rail__pipe{ position:absolute; left:19px; top:6px; bottom:18px; width:8px; border-radius:8px; background:var(--hero-ink-3); overflow:hidden; }
.pf-rail__water{ position:absolute; inset:0; border-radius:inherit; background:linear-gradient(180deg, var(--accent), var(--hero-accent-lift)); transform-origin:50% 0; }
html.app .pf-rail__water{ scale:1 0; transition:scale 1.7s cubic-bezier(.45,0,.2,1) .15s; }
html.app .pf-rail.is-in .pf-rail__water{ scale:1 1; }
.pf-rail__stops{ list-style:none; margin:0; padding:0; display:grid; gap:34px; }
.pf-stop{ position:relative; padding-left:66px; min-height:46px; }
.pf-stop__ring{ position:absolute; left:0; top:0; width:46px; height:46px; border-radius:50%; background:var(--hero-ink); border:3px solid var(--hero-ink-3);
  box-shadow:inset 0 0 0 7px var(--hero-ink), inset 0 0 0 20px var(--accent); transition:border-color .4s, box-shadow .4s, scale .5s var(--spring); }
html.app .pf-rail .pf-stop__ring{ box-shadow:inset 0 0 0 7px var(--hero-ink), inset 0 0 0 20px var(--hero-ink-3); }
html.app .pf-rail .pf-stop.is-lit .pf-stop__ring{ border-color:var(--accent); box-shadow:inset 0 0 0 7px var(--hero-ink), inset 0 0 0 20px var(--accent); scale:1.08; }
html.app .pf-rail .pf-stop:last-child.is-lit .pf-stop__ring{ border-color:var(--brand); box-shadow:inset 0 0 0 7px var(--hero-ink), inset 0 0 0 20px var(--brand); }
.pf-stop__time{ margin:0; font:800 clamp(32px,8vw,48px)/1 var(--serif); font-stretch:112%; letter-spacing:-.025em; font-variant-numeric:tabular-nums; }
.pf-stop__title{ margin:8px 0 4px; font:700 17px/1.3 var(--sans); }
.pf-stop__text{ margin:0; font-size:15.5px; line-height:1.5; color:var(--hero-fg-2); }
html.app .pf-rail .pf-stop > :not(.pf-stop__ring){ opacity:.35; transition:opacity .5s; }
html.app .pf-rail .pf-stop.is-lit > :not(.pf-stop__ring){ opacity:1; }

.pf-co__quote{ margin:56px 0 0; padding-top:32px; border-top:1px solid var(--pf-night-line); }
.pf-co__quote blockquote{ margin:0; }
.pf-co__quote p{ margin:0; max-width:32ch; font:700 clamp(23px,3vw,34px)/1.25 var(--serif); font-stretch:104%; letter-spacing:-.015em; text-wrap:balance; }
.pf-co__quote p::before{ content:"\201C"; }
.pf-co__quote p::after{ content:"\201D"; }
.pf-co__quote figcaption{ display:flex; gap:10px; margin-top:16px; font-size:15px; }
.pf-co__quote figcaption span{ color:var(--hero-fg-3); }
.pf-times{ margin-top:44px; }
.pf-times__title{ margin:0 0 14px; font:600 15px/1.3 var(--sans); color:var(--hero-fg-3); }
.pf-times ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.pf-times li{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:2px 18px; align-items:baseline; padding:18px 20px; border-radius:var(--r);
  background:var(--hero-ink-2); border:1px solid var(--pf-night-line); }
.pf-times b{ grid-row:span 2; min-width:3.6ch; font:800 30px/1 var(--serif); font-stretch:112%; letter-spacing:-.02em; color:var(--hero-accent-lift); }
.pf-times q{ font-size:16.5px; line-height:1.4; color:var(--hero-fg); }
.pf-times li span{ font-size:13.5px; color:var(--hero-fg-3); }
@media (min-width:900px){
  .pf-co__head{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); column-gap:80px; align-items:end; }
  .pf-co__head .pf-kicker,.pf-co__head .pf-h2{ grid-column:1; }
  .pf-co__head .pf-lede{ grid-column:2; grid-row:1 / span 2; margin:0; padding-bottom:6px; }
  .pf-rail{ margin-top:72px; }
  .pf-rail__pipe{ left:0; right:0; top:19px; bottom:auto; width:auto; height:8px; }
  .pf-rail__water{ transform-origin:0 50%; background:linear-gradient(90deg, var(--accent), var(--hero-accent-lift)); }
  html.app .pf-rail__water{ scale:0 1; }
  html.app .pf-rail.is-in .pf-rail__water{ scale:1 1; }
  .pf-rail__stops{ display:block; position:relative; min-height:190px; }
  .pf-stop{ position:absolute; top:0; left:var(--pos); width:min(300px, 30%); padding:66px 0 0; translate:calc(var(--pos) * -1) 0; }
  .pf-stop__ring{ left:0; }
  .pf-stop:not(:first-child):not(:last-child){ text-align:center; }
  .pf-stop:not(:first-child):not(:last-child) .pf-stop__ring{ left:50%; translate:-50% 0; }
  .pf-stop:last-child{ text-align:right; }
  .pf-stop:last-child .pf-stop__ring{ left:auto; right:0; }
  .pf-co__quote{ margin-top:40px; }
  .pf-times ul{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; }
  .pf-times li{ grid-template-columns:1fr; padding:22px 24px; }
  .pf-times b{ grid-row:auto; font-size:38px; margin-bottom:10px; }
}

/* --- gallery: one wall standing still --------------------------------------------- */
.pf-gal__head{ margin-bottom:28px; }
.pf-wall{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:6px; }
.pf-shot{ position:relative; display:block; padding:0; border:0; border-radius:10px; overflow:hidden; background:var(--ink-3); cursor:zoom-in; aspect-ratio:3 / 4; }
.pf-shot img{ width:100%; height:100%; object-fit:cover; transition:scale .7s var(--pf-out); }
.pf-shot:hover img{ scale:1.05; }
.pf-shot:first-child{ grid-column:1 / -1; aspect-ratio:4 / 3; border-radius:14px; }
@media (min-width:900px){
  .pf-gal__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:48px; margin-bottom:44px; }
  .pf-gal__head .pf-lede{ margin:0; max-width:38ch; }
  .pf-wall{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; }
  .pf-shot{ border-radius:12px; }
  .pf-shot:first-child{ grid-column:span 2; grid-row:span 2; aspect-ratio:auto; border-radius:16px; }
}
/* a short wall (2026-11-12, Rapid's job pages): exactly three or four photos fill one row on a wide screen, the first
   twice as wide; three on a phone sit as the large one over two. The thirteen-photo wall above is untouched. */
.pf-wall:has(> .pf-shot:nth-child(3):last-child){ grid-template-columns:repeat(2, minmax(0,1fr)); }
@media (min-width:900px){
  .pf-wall:has(> .pf-shot:nth-child(3):last-child){ grid-template-columns:2fr 1fr 1fr; }
  .pf-wall:has(> .pf-shot:nth-child(4):last-child){ grid-template-columns:2fr 1fr 1fr 1fr; }
  .pf-wall:has(> .pf-shot:nth-child(3):last-child) .pf-shot:first-child,
  .pf-wall:has(> .pf-shot:nth-child(4):last-child) .pf-shot:first-child{ grid-column:auto; grid-row:auto; }
  /* the row's height comes from the 3:4 photos; the wide first one fills it */
  .pf-wall:has(> .pf-shot:nth-child(3):last-child) .pf-shot:first-child img,
  .pf-wall:has(> .pf-shot:nth-child(4):last-child) .pf-shot:first-child img{ position:absolute; inset:0; }
}

/* --- questions: the shared trade FAQ set in this layout's own type (2026-11-12, Rapid's job pages) ------------ */
.plumb-flow .faq .label{ font:650 15px/1.3 var(--sans); letter-spacing:0; text-transform:none; }
.plumb-flow .faq .d-lg{ margin:0; font:800 clamp(34px,8.4vw,62px)/.98 var(--serif); font-stretch:var(--wide); letter-spacing:var(--d-track); text-wrap:balance; }
.plumb-flow .faq .d-lg i{ font-style:italic; color:var(--brand-display); }
.plumb-flow .qa__q{ font-weight:650; }

/* --- reviews ------------------------------------------------------------------------ */
.pf-rev{ background:var(--ink-2); }
.pf-score{ display:grid; justify-items:start; gap:8px; margin-top:28px; padding:26px 26px 22px; border-radius:20px; background:var(--hero-ink); color:var(--hero-fg); text-decoration:none; }
.pf-score__n{ font:800 84px/.9 var(--serif); font-stretch:112%; letter-spacing:-.04em; }
.pf-score__t{ font:600 16px/1.3 var(--sans); }
.pf-score__l{ display:inline-flex; align-items:center; gap:8px; margin-top:10px; font:700 14.5px/1 var(--sans); color:var(--hero-fg-2); }
.pf-score__l svg{ width:17px; height:17px; transition:translate .3s var(--pf-out); }
.pf-score:hover .pf-score__l svg{ translate:3px 0; }
.pf-rev__wall{ margin-top:28px; }
.pf-q{ margin:0 0 12px; padding:22px 22px 20px; border-radius:16px; background:var(--pf-card); border:1px solid var(--line); break-inside:avoid; }
.pf-q blockquote{ margin:12px 0 18px; }
.pf-q p{ margin:0; font-size:16.5px; line-height:1.55; }
.pf-q figcaption{ display:flex; align-items:center; gap:12px; }
.pf-q figcaption > span:last-child{ display:flex; flex-direction:column; }
.pf-q small{ color:var(--fg-3); font-size:13.5px; }
.pf-q__av{ display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--hero-ink); color:var(--hero-fg); font:800 15px/1 var(--sans); }
.pf-rev__wall.is-folded .pf-q:nth-child(n+5){ display:none; }
.pf-rev__more{ margin-top:8px; width:100%; }
@media (min-width:700px){ .pf-rev__wall{ columns:2; column-gap:12px; } }
@media (min-width:900px){
  .pf-rev__in{ display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr); gap:72px; align-items:start; }
  .pf-rev__wall{ margin-top:0; column-gap:14px; }
  .pf-q{ margin-bottom:14px; padding:26px 26px 22px; }
  .pf-rev__more{ display:none; }
}

/* --- the close: night, the number as large as it goes ------------------------------- */
.pf-close{ background:var(--hero-ink); color:var(--hero-fg); }
.pf-close__call{ container-type:inline-size; }
.pf-close::before{ content:""; position:absolute; left:0; right:0; top:0; height:10px;
  background:linear-gradient(var(--brand) 0 2px, transparent 2px 4px, var(--hero-fg) 4px 6px, transparent 6px 8px, var(--accent) 8px 10px); opacity:.9; }
.pf-close .pf-h2 i{ color:var(--hero-brand-display); }
.pf-close .pf-lede{ color:var(--hero-fg-2); }
.pf-bignum{ display:inline-flex; align-items:center; gap:.3em; margin-top:30px; color:var(--hero-fg); text-decoration:none; white-space:nowrap;
  font:800 clamp(28px,10.6cqi,78px)/1 var(--serif); font-stretch:112%; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.pf-bignum__ic{ display:grid; place-items:center; flex:none; width:.86em; height:.86em; border-radius:50%; background:var(--brand); color:var(--on-brand); }
.pf-bignum__ic svg{ width:.42em; height:.42em; }
.pf-bignum:hover > span:last-child{ text-decoration:underline; text-decoration-thickness:3px; text-underline-offset:8px; }
.pf-close__facts{ list-style:none; margin:30px 0 0; padding:0; max-width:460px; }
.pf-close__facts li{ display:grid; grid-template-columns:96px minmax(0,1fr); gap:12px; padding:14px 0; border-top:1px solid var(--pf-night-line); font-size:16px; }
.pf-close__facts b{ font-weight:600; color:var(--hero-fg-3); }
.pf-form{ background:var(--hero-ink-2); border-color:var(--pf-night-line); color:var(--hero-fg); }
.pf-form .quoteform__title{ margin-bottom:8px; font-stretch:var(--wide); }
.pf-form__lead{ margin:0 0 20px; font-size:15px; line-height:1.5; color:var(--hero-fg-2); }
.pf-form .field label{ color:var(--hero-fg-2); }
.pf-form .field input,.pf-form .field select,.pf-form .field textarea{ background:var(--hero-ink); border-color:rgb(var(--hero-fg-rgb) / .18); color:var(--hero-fg); }
.pf-form .field input::placeholder,.pf-form .field textarea::placeholder{ color:var(--hero-fg-3); }
.pf-form .field input:focus,.pf-form .field select:focus,.pf-form .field textarea:focus{ border-color:var(--hero-accent-lift); }
.pf-form .quoteform__note{ color:var(--hero-fg-3); }
.pf-form .form__ok{ background:rgb(var(--accent-rgb) / .2); }
.pf-close :focus-visible,.pf-hero :focus-visible,.pf-call-out :focus-visible,.pf-foot :focus-visible{ outline-color:var(--hero-fg); }
@media (min-width:900px){
  .pf-close__in{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:72px; align-items:start; }
  .pf-form{ margin-top:0; }
}
@media (max-width:899px){ .pf-form{ margin-top:40px; } }

/* --- footer ------------------------------------------------------------------------- */
.pf-foot{ background:color-mix(in srgb, var(--hero-ink) 72%, #000); color:var(--hero-fg); border-top:1px solid var(--pf-night-line); }
.pf-foot__grid{ display:grid; gap:34px; }
.pf-foot__brand{ display:inline-block; }
.pf-foot__brand img{ width:150px; height:auto; }
.pf-foot__about p{ margin:16px 0 0; max-width:42ch; font-size:15.5px; line-height:1.6; color:var(--hero-fg-2); }
.pf-foot__h{ margin:0 0 12px; font:700 14px/1.2 var(--sans); color:var(--hero-fg); }
.pf-foot__col ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.pf-foot__col a,.pf-foot__col span{ color:var(--hero-fg-2); text-decoration:none; font-size:15.5px; }
.pf-foot__col a:hover{ color:var(--hero-fg); }
.pf-foot__base{ display:flex; flex-wrap:wrap; gap:6px 24px; margin-top:40px; padding-top:20px; border-top:1px solid var(--pf-night-line); font-size:13.5px; color:var(--hero-fg-3); }
@media (min-width:900px){ .pf-foot__grid{ grid-template-columns:1.6fr 1fr 1fr; gap:48px; } }