/* Harlow & Pike Plumbing & Heating: design system, rebuild 2
   Two faces by role: Big Shoulders (name, headings, prices, the phone number), Libre Franklin (everything read).
   One white ground. One cobalt band. One iron footer. One warm hue (--lit) that marks only the live line and the
   edge of the call object that line feeds. No card containers: groups are made by a drawn run, a rule or space.
   One supply runs down the page (ledger, crew, cellar, triage); every group hangs from a run.
   No gradients, shadows, blur or radius. */

@font-face{font-family:"Libre Franklin";src:url("fonts/libre-franklin-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Libre Franklin";src:url("fonts/libre-franklin-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Libre Franklin";src:url("fonts/libre-franklin-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Big Shoulders";src:url("fonts/big-shoulders-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Big Shoulders";src:url("fonts/big-shoulders-latin-800-normal.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Big Shoulders";src:url("fonts/big-shoulders-latin-900-normal.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}
/* tuned fallbacks so the swap does not move the layout */
@font-face{font-family:"Libre Franklin Fallback";src:local("Arial");size-adjust:103.5%;ascent-override:93%;descent-override:24%;line-gap-override:0%}
@font-face{font-family:"Libre Franklin Fallback";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:600 700;size-adjust:100.5%;ascent-override:93%;descent-override:24%;line-gap-override:0%}
@font-face{font-family:"Big Shoulders Fallback";src:local("Arial Narrow"),local("ArialNarrow");font-weight:700 900;size-adjust:102%}

:root{
  /* colour: sampled from the two seed photographs (recipes in borrowings_v1.md and sampling.md) */
  --ground:#ffffff;
  --sky:#075fb7;          /* 01 Kowloon sky: links, focus ring on light ground, header rule */
  --teal:#3c6673;         /* 01 balcony grilles: cold runs, rules, quiet text */
  --cobalt:#213255;       /* 02 tile line: headings, the one dark band */
  --tile:#98a7b8;         /* 02 wainscot: hairlines, strokes on the dark band */
  --iron:#232026;         /* 02 firebox door: body ink, the call object, the footer */
  --lit:#c57e6a;          /* 02 copper bucket, bright pixels (re-run, rebuild 1): the live line, 3.2:1 on white, 3.97:1 on cobalt */
  --lit-core:#dea99c;     /* 02 copper bucket, lighter tint: the core of the tube */
  --signal:var(--lit);

  --f-text:"Libre Franklin","Libre Franklin Fallback",Arial,Helvetica,sans-serif;
  --f-display:"Big Shoulders","Big Shoulders Fallback","Arial Narrow",Arial,sans-serif;

  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;--s10:120px;

  --maxw:1180px;
  --pad:max(20px,calc((100vw - var(--maxw)) / 2));
  --rw:4px;               /* run width */
  --body:18px;
  /* drawing colours (flipped on the dark band) */
  --ln:var(--teal);--solid:var(--cobalt);--pipe:var(--teal);--dim:var(--tile);--bg:var(--ground);--ink:var(--iron);--tagfill:#fff;
}
@media (min-width:1000px){:root{--rw:6px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:16px}
@media (min-width:1000px){html{scroll-padding-top:100px}}
body{margin:0;background:var(--ground);color:var(--iron);font:400 var(--body)/1.55 var(--f-text);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:var(--sky);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{text-decoration-thickness:4px}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px}
.on-dark :focus-visible,.site-footer :focus-visible,.demo-bar :focus-visible,.call-bar :focus-visible,.skip:focus-visible{outline-color:#fff}
p{margin:0 0 var(--s4)}
h1,h2,h3{font-family:var(--f-display);font-weight:800;color:var(--cobalt);margin:0;line-height:1}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* skip link */
.skip{position:absolute;left:8px;top:-80px;z-index:50;background:var(--iron);color:#fff;font-weight:700;padding:12px 16px;text-decoration:underline;min-height:44px}
.skip:focus{top:8px}

/* demo bar (always visible, 14px, AA); the address wraps so it never forces a sideways scroll at 200% zoom */
.demo-bar{background:var(--iron);color:#fff;font:400 14px/1.45 var(--f-text);padding:8px var(--pad);overflow-wrap:anywhere}
.demo-bar strong{font-weight:700;margin-right:10px}
.demo-bar a{color:#fff;text-decoration-thickness:1px;padding:14px 0;margin:-14px 0;overflow-wrap:anywhere}

/* header: below 1000px the wordmark, a Call link and the Menu button share one row (they wrap at 200% zoom);
   the menu is a details element, so it opens with JavaScript off as well */
.site-header{background:var(--ground);border-bottom:2px solid var(--sky);position:relative;z-index:20}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:12px var(--pad);min-height:68px;flex-wrap:wrap}
.wordmark{display:block;flex:1 1 130px;min-width:0;color:var(--cobalt);text-decoration:none;line-height:1;min-height:44px}
.wordmark:hover{text-decoration:none}
.wordmark .name{display:block;font:800 clamp(25px,8.3vw,34px)/0.95 var(--f-display);letter-spacing:0}
.wordmark .sub{display:block;font:600 17px/1.25 var(--f-text);color:var(--iron);margin-top:3px}
.wordmark .sub span{display:inline}
.phone-actions{display:flex;flex:0 1 auto;min-width:0;max-width:100%;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:var(--s2)}
.hc-call{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 14px;background:var(--iron);color:#fff;font:700 17px/1 var(--f-text);text-decoration:none;white-space:nowrap}
.hc-call .hc-num{display:none;font:900 26px/1 var(--f-display);letter-spacing:0}
.hc-call:hover .hc-word,.hc-call:hover .hc-num{text-decoration:underline;text-decoration-thickness:3px}
.hc-call:focus-visible{outline-color:var(--sky)}
.nav-fold{display:block}
.menu-toggle{display:inline-flex;align-items:center;min-height:44px;min-width:44px;padding:0 12px;background:transparent;color:var(--sky);border:2px solid var(--sky);font:700 17px/1 var(--f-text);cursor:pointer;border-radius:0;list-style:none}
.menu-toggle::-webkit-details-marker{display:none}
.nav-fold .t-close{display:none}
.nav-fold[open] .t-menu{display:none}
.nav-fold[open] .t-close{display:inline}
.nav-fold[open] .menu-toggle{text-decoration:underline;text-decoration-thickness:3px}
.site-nav ul{list-style:none;margin:0;padding:0}
.site-nav li{border-top:1px solid var(--teal)}
.site-nav a{display:flex;align-items:center;min-height:48px;color:var(--cobalt);font:600 18px/1.2 var(--f-text);text-decoration:none;border-bottom:0}
.site-nav a:hover{text-decoration:underline;text-decoration-thickness:3px}
.site-nav a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:4px;text-underline-offset:6px}
/* the open phone menu drops over the page under the header; it holds links only, no heading, no box */
.site-nav--fold{position:absolute;left:0;right:0;top:100%;z-index:30;background:var(--ground);border-bottom:2px solid var(--sky);padding:0 var(--pad)}
.site-nav--fold li:first-child{border-top:0}
.site-nav--wide{display:none}
.nav-actions{display:none}
.schedule-link{display:inline-flex;align-items:center;white-space:nowrap;min-height:44px;padding:0 18px;border:2px solid var(--sky);color:var(--sky);font:700 17px/1 var(--f-text);text-decoration:none;background:transparent}
.schedule-link:hover{text-decoration:underline;text-decoration-thickness:3px}
.call-link{display:inline-flex;align-items:center;white-space:nowrap;gap:10px;min-height:44px;padding:0 18px;background:var(--iron);color:#fff;font:700 17px/1 var(--f-text);text-decoration:none}
.call-link b{font:900 26px/1 var(--f-display);letter-spacing:0}
.call-link:hover b{text-decoration:underline;text-decoration-thickness:3px}
@media (max-width:359px){
  .phone-actions{gap:6px}
  .hc-call{padding:0 10px}
  .menu-toggle{padding:0 9px}
}
@media (max-width:259px){
  .phone-actions{flex:1 1 100%;justify-content:flex-start}
  .hc-call{flex:1 1 auto;justify-content:center}
  .hc-call .hc-word{display:none}
  .hc-call .hc-num{display:inline;font-size:24px}
}
@media (min-width:560px){
  .hc-call .hc-num{display:inline}
}

@media (min-width:1000px){
  .site-header{position:sticky;top:0}
  .header-inner{flex-wrap:nowrap;gap:var(--s5);min-height:80px}
  .wordmark{flex:0 0 auto}
  .wordmark .name{font-size:34px}
  .phone-actions{display:none}
  .nav-actions{flex:0 0 auto}
  .nav-actions .schedule-link{display:none}
  .site-nav--wide{display:block;flex:1 1 auto}
  .site-nav--wide ul{display:flex;gap:2px;justify-content:flex-end}
  .site-nav--wide li{border:0}
  .site-nav--wide a{padding:0 12px;min-height:44px;font-size:17px}
  .nav-actions{display:flex;gap:var(--s3);align-items:center}
}
@media (min-width:1160px){.nav-actions .schedule-link{display:inline-flex}}

main{position:relative;overflow-x:clip}

/* ---------- drawing grammar (inline svg): cold strokes, solid = the working part, one lit tube ---------- */
.art{overflow:visible}
.ln{fill:none;stroke:var(--ln);stroke-width:2;stroke-linejoin:miter}
.ln3{fill:none;stroke:var(--ln);stroke-width:3;stroke-linejoin:miter}
.fillg{fill:var(--bg)}
.dash{stroke-dasharray:5 5}
.ln-dim{fill:none;stroke:var(--dim);stroke-width:2}
.pipe{fill:none;stroke:var(--pipe);stroke-width:8}
.pipe5{fill:none;stroke:var(--pipe);stroke-width:5}
.jt{fill:var(--pipe);stroke:none}
.solid{fill:var(--solid);stroke:none}
.dot{fill:var(--solid);stroke:none}
.sight{fill:var(--bg);stroke:none}
.floor{fill:none;stroke:var(--ln);stroke-width:2}
.tube-o{fill:none;stroke:var(--pipe);stroke-width:14;stroke-linejoin:miter}
.tube-i{fill:none;stroke:var(--bg);stroke-width:10;stroke-linejoin:miter}
.tubes-o{fill:none;stroke:var(--pipe);stroke-width:9;stroke-linejoin:miter}
.tubes-i{fill:none;stroke:var(--bg);stroke-width:5;stroke-linejoin:miter}
.cord{fill:none;stroke:var(--ln);stroke-width:1.5}
.tie{fill:var(--ln)}
.vtag-b{fill:var(--tagfill);stroke:var(--cobalt);stroke-width:2;stroke-linejoin:miter}
.vtag-h{fill:none;stroke:var(--cobalt);stroke-width:2}
/* tag vocabulary by function: paper luggage tag (parts, habits), riveted plate (equipment), disc (valves), flag (minutes) */
.screw{fill:none;stroke:var(--cobalt);stroke-width:1.5}
.screw-slot{fill:none;stroke:var(--cobalt);stroke-width:1.5}
.disc{fill:var(--tagfill);stroke:var(--cobalt);stroke-width:2}
.disc-in{fill:none;stroke:var(--cobalt);stroke-width:1.2}
.disc-h{fill:var(--bg);stroke:var(--cobalt);stroke-width:1.5}
.pipe-rw{fill:none;stroke:var(--pipe);stroke-width:var(--rw)}
.wheel{fill:none;stroke:#fff;stroke-width:2}
.art text{font-family:var(--f-text);font-weight:600;fill:var(--ink)}
.art text.vtag-t,.vt text.vtag-t{font-family:var(--f-display);font-weight:700;font-size:22px;fill:var(--cobalt)}
.art text.tg-n{font-family:var(--f-display);font-weight:800;font-size:22px;fill:var(--cobalt)}
.art text.tg-lab{font-family:var(--f-display);font-weight:700;font-size:22px;stroke:var(--bg);stroke-width:6;paint-order:stroke;stroke-linejoin:round}
.vt{display:block;overflow:visible;max-width:none}
.dr-s{font-family:var(--f-text);font-weight:700;fill:#213255;stroke:none}
.dr-big{font-family:var(--f-display);font-weight:800;font-size:112px;fill:#213255;stroke:#fff;stroke-width:8;paint-order:stroke;stroke-linejoin:round}
.dr-num{font-family:var(--f-display);font-weight:900;font-size:76px;fill:#213255;stroke:#fff;stroke-width:7;paint-order:stroke;stroke-linejoin:round}
.dr-ink{font-family:var(--f-display);font-weight:800;font-size:48px;fill:#213255;stroke:none}
.art text.dr-s,.art text.dr-big,.art text.dr-num,.art text.dr-ink{fill:#213255}

/* the live line: outer tube, lighter core, flat. It warms from teal to lit once, then holds. */
/* the tube sits in a 2px iron edge, the steel lattice round the neon; flat, no glow */
.hot-run{position:relative;display:block;height:20px;background:var(--lit);border-top:2px solid var(--iron);border-bottom:2px solid var(--iron);animation:warm-outer .6s steps(3,end) .5s both}
.hot-run::after{content:"";position:absolute;left:0;right:0;top:4px;height:8px;background:var(--lit-core);animation:warm-core .6s steps(3,end) .5s both}
.hot-run i{position:absolute;top:-2px;width:16px;height:24px;background:var(--lit);outline:2px solid var(--iron);z-index:1;animation:warm-outer .6s steps(3,end) .5s both}
.hot-run i::after{content:"";position:absolute;left:2px;top:2px;right:2px;bottom:2px;background:var(--lit-core);animation:warm-core .6s steps(3,end) .5s both}
@keyframes warm-outer{from{background-color:var(--teal)}to{background-color:var(--lit)}}
@keyframes warm-core{from{background-color:var(--tile)}to{background-color:var(--lit-core)}}
.hot-svg .hs-outer{stroke:var(--lit);animation:warm-stroke-outer .6s steps(3,end) .5s both}
.hot-svg .hs-core{stroke:var(--lit-core);animation:warm-stroke-core .6s steps(3,end) .5s both}
.hot-svg .hs-edge{stroke:var(--iron)}
.hot-svg .hs-box{fill:var(--lit);stroke:var(--lit-core);stroke-width:2;animation:warm-fill .6s steps(3,end) .5s both}
@keyframes warm-fill{from{fill:var(--teal)}to{fill:var(--lit)}}
.hero .hot-svg .hs-box{stroke:var(--iron)}
@keyframes warm-stroke-outer{from{stroke:var(--teal)}to{stroke:var(--lit)}}
@keyframes warm-stroke-core{from{stroke:var(--tile)}to{stroke:var(--lit-core)}}
@keyframes warm-edge{from{border-color:var(--teal)}to{border-color:var(--lit)}}

/* ---------- hero ---------- */
.hero{padding:var(--s5) var(--pad) var(--s7);display:grid;grid-template-columns:minmax(0,1fr);row-gap:var(--s4)}
.hero h1{font-size:clamp(30px,10.2vw,40px);line-height:1.02;max-width:24ch}
.hero-fixes{margin:var(--s3) 0 0;max-width:44ch}
.hero-strip{display:block;width:100%;height:auto;max-width:none;margin-bottom:calc(var(--s4) * -1)}
.hero-art{display:none}
.hero-row{max-width:none}
.hero-feed{display:none}
.call-button{display:block;background:var(--iron);color:#fff;text-decoration:none;padding:14px 20px;container-type:inline-size}
.call-button:hover{text-decoration:none}
.hero .call-button{border-top:8px solid var(--lit);padding-top:8px;animation:warm-edge .6s steps(3,end) .5s both}
.call-label{display:block;font:700 18px/1.25 var(--f-text);color:#fff;margin-bottom:4px}
.call-number{display:block;font-family:var(--f-display);font-weight:900;font-size:clamp(46px,17vw,66px);font-size:18.4cqw;line-height:.92;letter-spacing:0;white-space:nowrap;color:#fff;margin-left:-2px}
.call-button:hover .call-number{text-decoration:underline;text-decoration-thickness:5px;text-underline-offset:6px}
/* is it an emergency: two ruled lines under the call object, the first says when to call now, the second is the other door */
.hero-aside p{margin:0;font-size:18px;line-height:1.5}
.hero-aside .ia-now{padding:0 0 10px}
.hero-aside .ia-now b{color:var(--cobalt)}
.hero-aside .ia-gas{display:block;margin-top:4px;font-weight:700}
.hero-aside .ia-visit{border-top:1px solid var(--teal)}
.hero-aside .ia-visit a{display:block;min-height:44px;padding:8px 0;font-weight:700}
@media (min-width:700px){
  .hero-aside{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);column-gap:var(--s7);align-items:start}
  .hero-aside .ia-visit{border-top:0}
  .hero-aside .ia-now{padding:0}
}
/* tablet: the phone drawing is capped, not stretched across the page */
@media (min-width:700px) and (max-width:999px){.hero-strip{max-width:500px}}
/* short screens (landscape phones, 200% zoom): the drawing gives way so the number stays on the first screen */
/* up to 760px high (a 375x667 or 360x740 phone) the drawing gives way as well, so the whole emergency line and the gas line are on the first screen */
@media (max-height:760px) and (max-width:999px){.hero-strip{display:none}.hero-fixes{margin-top:var(--s2)}}
.promises{list-style:none;margin:var(--s4) 0 0;padding:0 0 0 calc(var(--rw) + 20px);position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:0 var(--s6);max-width:640px}
.promises::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--rw);background:var(--teal)}
.promises::after{content:"";position:absolute;left:calc(var(--rw) / 2 - 7px);bottom:-7px;width:14px;height:14px;background:var(--teal)}
.promises li{position:relative;padding:10px 0 12px}
.promises li::before{content:"";position:absolute;left:-20px;top:calc(10px + 14px - var(--rw) / 2);width:16px;height:var(--rw);background:var(--teal)}
.promises li::after{content:"";position:absolute;left:calc(-1 * (var(--rw) / 2 + 20px) - 6px);top:calc(10px + 14px - 6px);width:12px;height:12px;background:var(--teal)}
.promises p{margin:0;font-size:18px;line-height:1.5}
.promises b{font-weight:700;color:var(--cobalt);overflow-wrap:anywhere}

@media (min-width:1000px){
  .hero{grid-template-columns:minmax(0,1fr) 400px;grid-template-rows:minmax(214px,auto) auto auto auto;grid-template-areas:"title art" "row art" "aside aside" "promises promises";column-gap:0;row-gap:var(--s6);padding-top:var(--s7);padding-bottom:var(--s8)}
  .hero-head{grid-area:title;align-self:start;padding-right:var(--s6)}
  .hero h1{font-size:clamp(50px,5.4vw,68px);max-width:none}
  .hero-fixes{margin-top:var(--s4);max-width:46ch}
  .hero-strip{display:none}
  .hero-row{grid-area:row;display:flex;align-items:flex-end;max-width:none;height:176px;border-bottom:2px solid var(--teal);position:relative}
  .hero-row .call-button{flex:0 0 min(600px,74%);height:174px;display:flex;flex-direction:column;justify-content:center;padding:0 24px 0}
  .hero .call-button{border-top:0;border-right:8px solid var(--lit);animation-name:warm-edge}
  .hero-feed{display:block;flex:1 1 auto;align-self:flex-end;margin-bottom:calc(var(--inlet,88px) - 10px - 2px)}
  .hero-art{display:block;grid-area:art;align-self:end;width:400px;height:420px;margin-bottom:0;max-width:none;justify-self:end}
  .hero-aside{grid-area:aside;margin-top:calc(var(--s4) * -1)}
  .promises{grid-area:promises;grid-template-columns:repeat(3,minmax(0,1fr));max-width:none;margin-top:0;padding:34px 0 0}
  .promises::before{left:0;right:0;top:0;bottom:auto;width:auto;height:var(--rw)}
  .promises::after{left:auto;right:-7px;bottom:auto;top:calc(var(--rw) / 2 - 7px)}
  .promises li{padding:24px 0 0}
  .promises li::before{left:0;top:calc(var(--rw) - 34px);width:var(--rw);height:calc(34px - var(--rw) + 8px)}
  .promises li::after{left:calc(var(--rw) / 2 - 6px);top:2px}
}

/* the big number answers a pointer: the lit edge of the door that the line feeds widens into the padding (flat, no shadow) */
@media (min-width:1000px) and (hover:hover){
  .hero .call-button{position:relative}
  .hero .call-button::after{content:"";position:absolute;top:0;right:0;bottom:0;width:0;background:var(--lit);transition:width .15s steps(3,end)}
  .hero .call-button:hover::after,.hero .call-button:focus-visible::after{width:14px}
}

/* ---------- cost: the call-out figure heads a main, the price book hangs from it ---------- */
.cost{position:relative;padding:80px 0 96px}
.cost .body{padding:0 var(--pad)}
.cost-tree{position:relative;--fig:clamp(40px,10vw,76px)}
.cost-tree::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--rw);background:var(--teal)}
/* the supply leaves the ledger and keeps running: down through the crew and into the cellar */
.cost::after{content:"";position:absolute;left:var(--pad);bottom:0;height:96px;width:var(--rw);background:var(--teal)}
.cost-head{position:relative;padding-left:calc(var(--rw) + 40px);padding-bottom:var(--s6);display:grid;grid-template-columns:minmax(0,1fr);row-gap:var(--s5)}
.cost-head::before{content:"";position:absolute;left:var(--rw);top:calc(var(--fig) * .49 - var(--rw) / 2);width:30px;height:var(--rw);background:var(--teal)}
.cost-head::after{content:"";position:absolute;left:calc(var(--rw) / 2 - 9px);top:calc(var(--fig) * .49 - 9px);width:18px;height:18px;background:var(--teal)}
.figure-head{display:block;font-size:var(--fig);line-height:.98;color:var(--cobalt)}
.lede{max-width:56ch;margin:0}
.ledger{list-style:none;margin:0;padding:0 0 0 var(--rw)}
.ledger-row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"part part" "job price" "note note";column-gap:var(--s4);align-items:start;padding:12px 0 18px;border-top:1px solid var(--teal)}
.ledger-row:first-child{border-top:0;padding-top:0}
.ledger-row:last-child{padding-bottom:20px}
.ledger .part{grid-area:part;display:block;width:264px;max-width:100%;height:auto;aspect-ratio:264 / 112;margin-bottom:var(--s3)}
.ledger .job{grid-area:job;font:600 20px/1.25 var(--f-text);margin:0;color:var(--iron);align-self:center;padding-left:16px}
.ledger .note{grid-area:note;margin:8px 0 0;font-size:17px;line-height:1.45;color:var(--cobalt);max-width:56ch;padding-left:16px}
.ledger .price{grid-area:price;font:800 38px/1 var(--f-display);color:var(--cobalt);text-align:right;margin:0;white-space:nowrap;align-self:center}
@media (min-width:700px){
  .ledger-row{grid-template-columns:264px minmax(0,1fr) auto;grid-template-areas:"part job price" "part note price";column-gap:var(--s6);align-items:center;padding:8px 0 10px}
  .ledger .part{grid-row:1 / span 2;margin:0}
  .ledger .job{align-self:end;padding-left:0}
  .ledger .note{align-self:start;margin-top:4px;padding-left:0}
  .ledger .price{font-size:48px;grid-row:1 / span 2}
}
@media (min-width:1000px){
  .cost-head{grid-template-columns:minmax(0,1fr) minmax(0,440px);column-gap:var(--s8);align-items:end}
}

/* ---------- who is coming: the door (the supply runs down its left side, each habit is a tee with a tag) ---------- */
.crew{position:relative;padding:16px 0 56px}
.crew::before{content:"";position:absolute;left:var(--pad);top:0;bottom:0;width:var(--rw);background:var(--teal)}
.crew .body{padding:0 var(--pad)}
.crew-art{margin-left:calc(var(--rw) + 22px);margin-right:calc(var(--pad) * -1)}
.crew-art svg{display:block;width:100%;height:auto}
.crew h2{font-size:clamp(32px,8vw,48px);line-height:1.04;max-width:18ch;margin-top:var(--s5);padding-left:calc(var(--rw) + 22px)}
.habits{margin:var(--s4) 0 0;max-width:760px}
.habits div{position:relative;padding:12px 0 14px calc(var(--rw) + 22px)}
.habits div::before{content:"";position:absolute;left:var(--rw);top:calc(12px + 17px - var(--rw) / 2);width:22px;height:var(--rw);background:var(--teal)}
.habits div::after{content:"";position:absolute;left:calc(var(--rw) / 2 - 7px);top:calc(12px + 17px - 7px);width:14px;height:14px;background:var(--teal)}
.habits dt{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;min-height:34px;font:700 18px/1.3 var(--f-text);color:var(--cobalt)}
.habits dt svg{flex:0 0 auto;max-width:none}
.habits dd{margin:6px 0 0}
@media (min-width:1000px){
  .crew .body{display:grid;grid-template-columns:minmax(0,4.6fr) minmax(0,6.4fr);grid-template-areas:"title art" "habits art";grid-template-rows:auto 1fr;column-gap:var(--s8);row-gap:var(--s5);padding-top:var(--s6)}
  .crew-art{grid-area:art;margin-left:0}
  .crew h2{grid-area:title;margin-top:var(--s5);font-size:clamp(40px,4.2vw,52px)}
  .habits{grid-area:habits;margin:0;max-width:none;align-self:end}
}

/* ---------- the dark band: the supply enters the cellar through the ceiling, feeds the meter, then runs down to the triage valves ---------- */
.dark-band{background:var(--cobalt);color:#fff;padding:112px 0 80px;position:relative;z-index:1}
/* flange where the supply passes the cellar ceiling */
.dark-band::before{content:"";position:absolute;left:calc(var(--pad) - 9px);top:0;width:calc(var(--rw) + 18px);height:12px;background:var(--tile)}
.band-top{position:relative}
.band-top::before{content:"";position:absolute;left:var(--pad);top:-112px;bottom:-32px;width:var(--rw);background:var(--tile)}
.dark-band h2,.dark-band h3{color:#fff}
.dark-band .art{--ln:var(--tile);--solid:var(--tile);--pipe:var(--tile);--dim:var(--teal);--bg:var(--cobalt);--ink:#fff}
.dark-band .art text{fill:#fff}
.dark-band .art text.vtag-t,.dark-band .art text.tg-n{fill:var(--cobalt)}
.band-head{padding:0 var(--pad) 0 calc(var(--pad) + var(--rw) + 28px)}
.dark-band h2{font-size:clamp(32px,7.6vw,44px);line-height:1.04;max-width:21ch}
.band-head p{max-width:60ch;margin-top:var(--s4);color:#fff}
/* the cellar plates: the drawing is an svg, every tag on it is a real button laid over it (percent positions from the viewBox,
   never smaller than 44px), and a tap opens a short note under the drawing. The note hangs from the supply run. */
.plate-wrap{position:relative}
.elev{position:relative;margin-top:var(--s6);margin-left:var(--pad)}
.elev > svg{display:block;width:100%;height:auto}
.elev--tall{width:min(600px,calc(100% - var(--pad)))}
.elev--wide{display:none;width:min(1280px,calc(100% - var(--pad)))}
.pt{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:calc(var(--w) + 14px);height:calc(var(--h) + 14px);min-width:44px;min-height:44px;margin:0;padding:0;border:0;border-radius:0;background:transparent;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;z-index:2}
.pt:focus-visible{outline:3px solid var(--sky);outline-offset:0}
.on-dark .pt:focus-visible{outline-color:#fff}
html:not(.js) .pt{display:none}
.vtag.is-hover .vtag-b,.vtag.is-hover .disc{stroke-width:4}
.vtag.is-on .vtag-b,.vtag.is-on .disc{fill:var(--cobalt);stroke:var(--cobalt);stroke-width:2}
.vtag.is-on .screw,.vtag.is-on .screw-slot,.vtag.is-on .disc-h{stroke:#fff}
.dark-band .vtag.is-on .vtag-b,.dark-band .vtag.is-on .disc{stroke:#fff;stroke-width:3}
.art .vtag.is-on text.vtag-t,.art .vtag.is-on text.tg-n{fill:#fff}
.pnote{--rc:var(--teal);--ty:23px;position:relative;margin:var(--s4) 0 0;padding:6px 0 var(--s2) calc(var(--rw) + 22px);max-width:calc(62ch + var(--rw) + 22px);scroll-margin-bottom:96px}
.on-dark .pnote{--rc:var(--tile)}
.band-top .pnote{margin:var(--s4) var(--pad) 0 var(--pad)}
.pnote::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--rw);background:var(--rc)}
.pnote::after{content:"";position:absolute;left:calc(var(--rw) / 2 - 7px);top:calc(var(--ty) - 7px);width:14px;height:14px;background:var(--rc)}
.pn-prompt,.pn-item{position:relative;margin:0}
.pn-prompt::before,.pn-item::before{content:"";position:absolute;left:-22px;top:calc(var(--ty) - 6px - var(--rw) / 2);width:18px;height:var(--rw);background:var(--rc)}
.pn-prompt{padding:3px 0 7px;font-size:18px;line-height:1.5}
.pn-item{display:none}
.pn-item.is-on{display:block}
html:not(.js) .pn-item{display:block;padding-bottom:var(--s3)}
html:not(.js) .pn-prompt{display:none}
.pn-name{font:800 34px/1 var(--f-display);color:var(--cobalt);margin:0 0 var(--s2)}
.on-dark .pn-name{color:#fff}
.pn-text{margin:0;max-width:62ch}
.on-dark .pn-text,.on-dark .pn-prompt{color:#fff}
.pn-text a{font-weight:700}
.on-dark .pn-text a{color:#fff}
/* short plate near the top of the phone page */
.mini{padding:var(--s4) var(--pad) var(--s2)}
.mini h2{font-size:clamp(32px,8vw,44px);line-height:1.04;max-width:20ch;margin:0 0 var(--s4)}
.mini-tip{margin:calc(var(--s2) * -1) 0 var(--s4);font-weight:600}
.mini .elev{margin:0;width:min(600px,100%)}
.mini .pnote{margin-top:var(--s3)}
.mini-more{margin:var(--s4) 0 0}
.mini-more a{display:inline-flex;align-items:center;min-height:44px;font-weight:700}
@media (min-width:1000px){.mini{display:none}}
.triage{padding:var(--s6) var(--pad) 0}
.tri{position:relative;padding:18px 0 28px}
.tri::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--rw);background:var(--tile)}
.tri:last-child::before{bottom:auto;height:calc(18px + 33.5px + var(--rw) / 2)}
.tri-head{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;min-height:67px;padding-left:calc(var(--rw) + 18px)}
.tri-head::before{content:"";position:absolute;left:var(--rw);top:50%;width:18px;height:var(--rw);margin-top:calc(var(--rw) / -2);background:var(--tile)}
.tri-head::after{content:"";position:absolute;left:calc(var(--rw) / 2 - 7px);top:50%;width:14px;height:14px;margin-top:-7px;background:var(--tile)}
.valve{flex:0 0 auto;display:block;max-width:none;width:77px;height:67px}
.valve .pipe-rw{stroke-width:calc(var(--rw) / 1.2)}
.valve .ln,.valve .wheel{stroke-width:2.2}
.tri h3{font-size:40px;line-height:1;margin:0}
.tri-text,.tri-act{padding-left:calc(var(--rw) + 18px)}
.tri-text{margin-top:var(--s2)}
.tri-text p{margin:0 0 var(--s3);max-width:48ch}
.tri-act{margin-top:var(--s4)}
.tri .call-button{max-width:480px;background:#fff;color:var(--iron)}
.tri .call-label,.tri .call-number{color:var(--iron)}
.tri-link{display:inline-flex;align-items:center;min-height:44px;color:#fff;font-weight:700;text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:5px}
@media (min-width:900px){
  .band-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:var(--s8);align-items:end}
  .band-head p{margin:0}
  .tri{display:grid;grid-template-columns:minmax(290px,3fr) minmax(0,5fr) minmax(0,4fr);column-gap:var(--s7);align-items:start}
  .tri-head{grid-column:1}
  .tri-text{grid-column:2;padding-left:0;margin-top:0;padding-top:14px}
  .tri-act{grid-column:3;padding-left:0;margin-top:0;padding-top:6px}
}
@media (min-width:1040px){
  .elev--tall{display:none}
  .elev--wide{display:block}
}

/* ---------- reach: towns hang from a manifold, the drop is as long as the drive ---------- */
.reach{padding:56px 0 104px}
.reach .body{padding:0 var(--pad)}
.reach h2{font-size:clamp(56px,16vw,92px);line-height:.9}
.reach .after{max-width:52ch;margin:var(--s4) 0 0}
.towns{list-style:none;margin:var(--s6) 0 0;padding:0 0 0 var(--rw);position:relative;--k:min(2.6px,calc((100vw - 260px) / 80))}
.towns::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--rw);background:var(--teal)}
.bay{position:relative;display:flex;align-items:center;gap:var(--s3);min-height:68px;padding:var(--s2) 0}
.bay::after{content:"";position:absolute;left:-9px;top:50%;margin-top:-7px;width:14px;height:14px;background:var(--teal)}
.drop{position:relative;flex:0 0 auto;display:block;width:calc(var(--m) * var(--k));height:var(--rw);background:var(--teal);margin-right:124px}
.drop::after{content:"";position:absolute;right:-5px;top:-5px;width:14px;height:14px;background:var(--teal)}
.drop .vt{position:absolute;left:100%;top:-17px;margin-left:-2px}
.bay-text{min-width:0}
.bay .town{font:800 clamp(28px,8vw,36px)/1 var(--f-display);color:var(--cobalt);margin:0}
.bay .note{font-size:17px;line-height:1.35;margin:2px 0 0;color:var(--cobalt);overflow-wrap:anywhere}
@media (min-width:700px){
  .towns{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));row-gap:var(--s7);margin-top:var(--s7);padding-left:0;--k:2.6px}
  .towns::before{display:none}
  .bay{display:block;min-height:0;padding:calc(var(--m) * var(--k) + 34px) var(--s3) 0 0}
  .bay::before{content:"";position:absolute;left:0;right:0;top:0;height:var(--rw);background:var(--teal)}
  .bay::after{left:calc(var(--rw) / 2 - 7px);top:calc(var(--rw) / 2 - 7px);margin-top:0}
  .drop{position:absolute;left:0;top:0;width:var(--rw);height:calc(var(--m) * var(--k) + 12px);margin:0}
  .drop::after{right:auto;left:calc(var(--rw) / 2 - 7px);top:auto;bottom:-2px}
  .drop .vt{left:var(--rw);top:calc(var(--m) * var(--k) * .5 - 14px);margin-left:-2px}
  .bay .town{font-size:clamp(30px,3.2vw,38px)}
}
@media (min-width:1100px){
  .towns{grid-template-columns:repeat(8,minmax(0,1fr))}
  .bay{padding-right:var(--s2)}
  .bay .town{font-size:clamp(24px,2.2vw,29px)}
}

/* ---------- visit form: the fields hang from a stub that ends in the iron door ---------- */
.visit{padding:40px 0 128px}
.visit .body{padding:0 var(--pad);display:grid;grid-template-columns:minmax(0,1fr);row-gap:var(--s6)}
.visit h2{font-size:clamp(56px,16vw,92px);line-height:.9}
.visit .side p{max-width:48ch;margin-top:var(--s4);margin-bottom:0}
.visit .side .strong{font-weight:700;color:var(--cobalt)}
.formcol{min-width:0}
.schedule-form{position:relative;max-width:640px;padding-left:36px}
.schedule-form::before{content:"";position:absolute;left:0;top:10px;bottom:32px;width:var(--rw);background:var(--teal)}
.nowrap{white-space:nowrap}
.nojs{margin:0 0 var(--s5);padding:var(--s3) 0;border-top:2px solid var(--iron);color:var(--iron)}
.field{position:relative;margin:0 0 var(--s5)}
.field::before{content:"";position:absolute;left:-36px;top:11px;width:28px;height:var(--rw);background:var(--teal)}
.field::after{content:"";position:absolute;left:calc(var(--rw) / 2 - 43px);top:4px;width:14px;height:14px;background:var(--teal)}
.field label{display:block;font:600 17px/1.3 var(--f-text);color:var(--cobalt);margin-bottom:2px}
.field .hint{font-weight:400;color:var(--cobalt)}
.field input,.field select,.field textarea{display:block;width:100%;min-height:48px;padding:10px 10px;font:400 18px/1.4 var(--f-text);color:var(--iron);background:transparent;border:1px solid var(--tile);border-bottom:2px solid var(--iron);border-radius:0;-webkit-appearance:none;appearance:none}
.field select{background-image:none;padding-right:34px}
.field .select-wrap{position:relative}
.field .select-wrap::after{content:"";position:absolute;right:12px;top:50%;margin-top:-4px;width:10px;height:10px;border-right:2px solid var(--iron);border-bottom:2px solid var(--iron);transform:rotate(45deg) translate(-3px,-3px);pointer-events:none}
.field textarea{min-height:96px;resize:vertical}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.field .err{display:none;margin:6px 0 0;font:400 17px/1.4 var(--f-text);color:var(--iron);overflow-wrap:anywhere}
.field .err-k{font-weight:700;color:var(--iron);text-decoration:underline;text-decoration-color:var(--sky);text-decoration-thickness:2px;text-underline-offset:4px}
.field.invalid .err{display:block}
/* an invalid field is boxed in plain blue and its message sits under it; no heavy bar, and the count under the heading follows the fields */
.field.invalid input,.field.invalid select,.field.invalid textarea{border:2px solid var(--sky)}
.field.invalid::after{background:var(--sky)}
.submit-door{position:relative;display:block;width:100%;min-height:64px;padding:12px 20px;background:var(--iron);color:#fff;border:0;border-radius:0;font:700 20px/1.2 var(--f-text);text-align:left;cursor:pointer}
.submit-door::before{content:"";position:absolute;left:-36px;top:30px;width:36px;height:var(--rw);background:var(--teal)}
.submit-door::after{content:"";position:absolute;left:calc(var(--rw) / 2 - 43px);top:23px;width:14px;height:14px;background:var(--teal)}
.submit-door:hover{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:5px}
.form-done{display:none;border-top:2px solid var(--teal);padding-top:var(--s4);max-width:620px}
.form-done.is-shown{display:block}
.form-done:focus,.form-done:focus-visible{outline:none;border-top:6px solid var(--sky);padding-top:calc(var(--s4) - 4px)}
.form-done p{margin:0 0 var(--s3);overflow-wrap:anywhere}
.form-done .lead{font:800 38px/1.05 var(--f-display);color:var(--cobalt)}
.form-done .demo-note{font-size:17px;color:var(--iron)}
.form-done .echo{font-weight:600}
.form-summary{display:none;margin:0 0 var(--s5);font:800 28px/1.1 var(--f-display);color:var(--cobalt)}
.form-summary.is-shown{display:block}
@media (min-width:1000px){
  .visit .body{grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:var(--s8);align-items:start}
}

/* ---------- footer ---------- */
.site-footer{background:var(--iron);color:#fff;padding:var(--s8) var(--pad) calc(var(--s8) + 64px);position:relative}
.site-footer a{color:#fff;text-decoration-thickness:2px}
.foot-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s7) var(--s8)}
.foot-name{font:800 44px/.95 var(--f-display);color:#fff;margin:0;letter-spacing:0}
.foot-sub{font:600 17px/1.3 var(--f-text);margin:6px 0 var(--s5);color:#fff}
.foot-call{display:inline-block;color:#fff;text-decoration:none;border-bottom:4px solid var(--tile);padding-bottom:4px;font:900 clamp(26px,12.4vw,60px)/1 var(--f-display);min-height:44px;white-space:nowrap}
.foot-call:hover{text-decoration:underline;text-decoration-thickness:4px;text-underline-offset:6px}
.site-footer h2{font:700 28px/1 var(--f-display);color:#fff;margin:0 0 var(--s3)}
.foot-list{list-style:none;margin:0;padding:0}
.foot-list li{margin:0}
.foot-list a{display:inline-flex;align-items:center;min-height:44px}
.foot-facts p{margin:0 0 var(--s3);overflow-wrap:anywhere}
.credit{margin:var(--s7) 0 0;padding-top:var(--s3);border-top:1px solid var(--tile);font-size:17px;display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--s2)}
.credit a{display:inline-flex;align-items:center;min-height:44px}
@media (min-width:1000px){
  .foot-grid{grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr)}
  .site-footer{padding-bottom:var(--s8)}
}

/* ---------- fixed call bar (below 1000px) ---------- */
.call-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:60px;padding:6px var(--pad) 6px;background:var(--iron);border-top:1px solid var(--tile);color:#fff;text-decoration:none}
.call-bar:hover{text-decoration:none}
.call-bar .l{font:700 18px/1.2 var(--f-text)}
.call-bar .n{font:900 clamp(24px,9vw,34px)/1 var(--f-display);white-space:nowrap}
@media (max-width:239px){.call-bar .l{display:none}.call-bar{justify-content:center}}
.call-bar:hover .n{text-decoration:underline;text-decoration-thickness:3px}
html.js .call-bar{display:none}
html.js .call-bar.is-on{display:flex}
@media (min-width:1000px){.call-bar,html.js .call-bar.is-on{display:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}
@media print{.call-bar,.demo-bar{display:none}}

/* =====================================================================================================
   Inner pages (services, about, gallery, contact, 404): the same grammar, one run down each page.
   .run is the main, .tee a branch with a box node. No card containers: rules, runs and space only.
   ===================================================================================================== */
.run{--rc:var(--teal);position:relative;padding-left:calc(var(--rw) + 34px)}
.run::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--rw);background:var(--rc)}
.run::after{content:"";position:absolute;left:calc(var(--rw) / 2 - 7px);bottom:-7px;width:14px;height:14px;background:var(--rc)}
.tee{position:relative;--ty:20px}
.tee::before{content:"";position:absolute;left:-34px;top:calc(var(--ty) - var(--rw) / 2);width:26px;height:var(--rw);background:var(--rc)}
.tee::after{content:"";position:absolute;left:calc(var(--rw) / -2 - 41px);top:calc(var(--ty) - 7px);width:14px;height:14px;background:var(--rc)}
.on-dark .run{--rc:var(--tile)}

.page-head{padding:var(--s7) var(--pad) var(--s7)}
.page-head h1{font-size:clamp(34px,10vw,46px);line-height:1.02;max-width:22ch}
@media (min-width:700px){.page-head h1,.hero--plain h1,.endcall h2,.sec h2{text-wrap:balance}}
.page-head .lede{font-size:19px;line-height:1.55;max-width:56ch;margin:var(--s4) 0 0}
.head-grid{display:grid;grid-template-columns:minmax(0,1fr);row-gap:var(--s6);margin-top:var(--s5)}
.head-grid > div > .lede,.head-grid > .lede{margin-top:0}
.sec{padding:var(--s7) var(--pad) var(--s8)}
.sec h2{font-size:clamp(34px,8.4vw,48px);line-height:1.02;margin:0 0 var(--s5);max-width:22ch}
@media (min-width:1000px){
  .page-head{padding-top:var(--s8);padding-bottom:var(--s8)}
  .page-head h1{font-size:clamp(52px,5.4vw,70px);max-width:19ch}
  .head-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:var(--s8);align-items:start;margin-top:var(--s6)}
}

/* definition lists hung from a run: a tee per entry, a tag in the drawing's own form */
.facts{margin:0;max-width:820px}
.facts .tee{--ty:29px;padding:12px 0 var(--s4)}
.facts dt{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;min-height:34px;font:700 19px/1.3 var(--f-text);color:var(--cobalt)}
.facts dt svg{flex:0 0 auto;max-width:none}
.facts dd{margin:6px 0 0;max-width:62ch}

/* services: the price book, a group per tee, the heading left and the rows right */
.invoice{width:100%;max-width:560px;border-collapse:collapse}
.invoice caption{text-align:left;font:700 19px/1.3 var(--f-text);color:var(--cobalt);padding:0 0 var(--s3)}
.invoice th,.invoice td{padding:12px 0;border-top:1px solid var(--teal);vertical-align:baseline;text-align:left}
.invoice th{font:400 18px/1.35 var(--f-text);color:var(--iron);padding-right:var(--s4)}
.invoice td{text-align:right;font:800 32px/1 var(--f-display);color:var(--cobalt);white-space:nowrap}
.invoice .total th,.invoice .total td{border-top:4px solid var(--iron)}
.invoice .total th{font-weight:700}
.invoice .total td{font-size:44px}
.book{margin:0 var(--pad) var(--s8);padding-left:calc(var(--rw) + 34px)}
.grp{--ty:calc(var(--s5) + 24px);padding:var(--s5) 0 var(--s6)}
.grp:first-child{--ty:24px;padding-top:0}
.grp h2{font-size:clamp(36px,9vw,48px);line-height:1;margin:0 0 var(--s3)}
.rows{list-style:none;margin:0;padding:0}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"job price" "note note";column-gap:var(--s4);align-items:baseline;padding:14px 0 16px;border-top:1px solid var(--teal)}
.row:first-child{border-top:0;padding-top:0}
.row .job{grid-area:job;font:600 20px/1.3 var(--f-text);margin:0;color:var(--iron)}
.row .note{grid-area:note;margin:6px 0 0;font-size:17px;line-height:1.45;color:var(--cobalt);max-width:60ch}
.row .price{grid-area:price;font:800 38px/1 var(--f-display);color:var(--cobalt);margin:0;text-align:right;white-space:nowrap}
@media (min-width:700px){
  .row{grid-template-areas:"job price" "note price";align-items:center}
  .row .price{font-size:46px}
}
@media (min-width:1000px){
  .grp{display:grid;grid-template-columns:minmax(200px,3fr) minmax(0,8fr);column-gap:var(--s7);align-items:start}
  .grp h2{margin:0}
}
.incl{padding-top:var(--s5)}

/* services head: the group index. Phones: a ruled grid of links. Laptops: a run with a tee per group, which fills the space beside the heading. */
.page-head--jump{display:grid;grid-template-columns:minmax(0,1fr);row-gap:var(--s5);padding-top:var(--s6);padding-bottom:var(--s5)}
.page-head--jump .lede{margin-top:var(--s3)}
.jump ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s5)}
.jump li{border-top:1px solid var(--teal)}
.jump a{display:flex;align-items:center;min-height:48px;padding:4px 0;text-decoration:none}
.jump .jn{font:800 28px/1.05 var(--f-display);color:var(--sky);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.jump a:hover .jn{text-decoration-thickness:4px}
.jump .jd{display:none}
@media (min-width:560px){.jump ul{grid-template-columns:repeat(3,minmax(0,1fr))}}
.inv-h p{margin:var(--s3) 0 0;max-width:34ch}
@media (min-width:1000px){
  .page-head--jump{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--s8);align-items:start;padding-top:var(--s8);padding-bottom:var(--s7)}
  .jump ul{display:block;position:relative;padding-left:calc(var(--rw) + 34px)}
  .jump ul::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--rw);background:var(--teal)}
  .jump ul::after{content:"";position:absolute;left:calc(var(--rw) / 2 - 7px);bottom:-7px;width:14px;height:14px;background:var(--teal)}
  .jump li{position:relative;border-top:0;--ty:29px}
  .jump li::before{content:"";position:absolute;left:-34px;top:calc(var(--ty) - var(--rw) / 2);width:26px;height:var(--rw);background:var(--teal)}
  .jump li::after{content:"";position:absolute;left:calc(var(--rw) / -2 - 41px);top:calc(var(--ty) - 7px);width:14px;height:14px;background:var(--teal)}
  .jump a{display:block;min-height:44px;padding:8px 0 9px;text-decoration:none}
  .jump .jn{font-size:34px;display:inline-block;line-height:1.1}
  .jump .jd{display:block;font-size:17px;line-height:1.35;color:var(--cobalt);margin-top:2px}
}

/* gallery: the plates are indexed beside the heading on laptops (a run with a tee per plate); phones go straight to the pictures */
.jump--plates{display:none}
.page-head--plates{padding-bottom:var(--s7)}
@media (min-width:1000px){
  .jump--plates{display:block}
  .jump--plates li{--ty:22px}
  .jump--plates a{min-height:44px;padding:6px 0 7px}
  .jump--plates .jn{font-size:27px;line-height:1.15}
}
/* about: the map starts at the top of the page, beside the heading */
.page-head--split{display:grid;grid-template-columns:minmax(0,1fr);row-gap:var(--s5)}
.page-head--split .lede{margin-top:var(--s4)}
@media (min-width:1000px){
  .page-head--split{grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"main map" "cap map";grid-template-rows:auto 1fr;column-gap:var(--s8);align-items:start;padding-bottom:var(--s7)}
  .page-head--split .ph-main{grid-area:main}
  .page-head--split .mapfig{grid-area:map;justify-self:start}
  .page-head--split .mapcap{grid-area:cap;margin:0}
}
/* contact: what Ruth asks sits in the left column under the visit copy, beside the long form (after the form on phones) */
.ruth h2{font-size:clamp(34px,8.4vw,48px);line-height:1.02;margin:var(--s2) 0 var(--s5);max-width:20ch}
.ruth .facts{max-width:560px}
@media (min-width:1000px){
  .visit--ruth .body{grid-template-areas:"side form" "ruth form";grid-template-rows:auto 1fr}
  .visit--ruth .side{grid-area:side}
  .visit--ruth .formcol{grid-area:form}
  .visit--ruth .ruth{grid-area:ruth;margin-top:var(--s3)}
}

/* the dark section on the inner pages: the cellar ceiling is not drawn, so no flange */
.dark-band.tune,.dark-band.vans{padding:80px 0 96px}
.dark-band.tune::before,.dark-band.vans::before{display:none}
.tune .body,.vans .body{padding:0 var(--pad)}
.tune h2,.vans h2{font-size:clamp(34px,8vw,48px);line-height:1.02;max-width:20ch}
.tune-lede{max-width:60ch;margin:var(--s4) 0 var(--s6);color:#fff}
.steps{list-style:none;margin:0;max-width:820px}
.steps li{--ty:28px;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--s4);align-items:start;padding:10px 0 14px}
.steps li p{margin:0;padding-top:3px}
.steps .vt{margin-top:0}
@media (max-width:520px){.steps li{grid-template-columns:minmax(0,1fr);row-gap:8px}.steps li p{padding-top:0}}

/* about */
.mapfig{margin:0}
.mapsvg{display:block;width:min(100%,430px);height:auto;max-width:none}
.mapcap{max-width:56ch;margin:0;font-size:17px;line-height:1.5;color:var(--iron)}
.ink-ring{fill:none;stroke:var(--cobalt);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.art text.ink{font-family:var(--f-display);font-weight:700;font-size:22px;fill:var(--cobalt);stroke:var(--bg);stroke-width:6;paint-order:stroke;stroke-linejoin:round}
.who dt span,.when dt span{display:inline}
.facts .more{display:inline-flex;align-items:center;min-height:44px;font-weight:700}
.vans .van-run{max-width:860px;margin-top:var(--s6)}
.vans .tee{--ty:20px;padding:0 0 var(--s6)}
.vans h3{font-size:40px;line-height:1;margin:0 0 var(--s4)}
.stock{list-style:none;margin:0;padding:0}
.stock li{padding:10px 0 12px;border-top:1px solid var(--tile);max-width:60ch}
.stock li:first-child{border-top:0;padding-top:0}
.vans .both{margin:var(--s5) 0 0;padding-left:calc(var(--rw) + 34px);max-width:62ch;color:#fff}

/* gallery: pictures hang under a run of their own, the caption is the tag */
.plates{padding:0 var(--pad) var(--s6)}
.plate-row{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s7);margin:0 0 var(--s7)}
.plate{margin:0;min-width:0}
.plate .ph{display:block;width:100%;height:auto}
.plate figcaption{position:relative;margin-top:var(--s3);padding-top:var(--s4);border-top:var(--rw) solid var(--teal)}
.plate figcaption::before{content:"";position:absolute;left:0;top:calc(var(--rw) / -2 - 7px);width:14px;height:14px;background:var(--teal)}
.plate figcaption h2{font-size:34px;line-height:1;margin:var(--s2) 0 var(--s3)}
.plate figcaption p{margin:0 0 var(--s3);max-width:52ch}
.plate figcaption .by{font-size:17px;color:var(--cobalt);margin:0;overflow-wrap:anywhere}
.cardsvg{display:block;width:100%;max-width:520px;height:auto}
.cardsvg text{font-family:var(--f-text);font-weight:600;fill:var(--iron);font-size:28px}
.cardsvg text.lab{font-family:var(--f-text);font-weight:600;font-size:28px;fill:var(--iron)}
.cardsvg text.inkv{font-family:var(--f-display);font-weight:800;font-size:36px;fill:var(--cobalt)}
.cardsvg text.dr-big2{font-family:var(--f-display);font-weight:800;font-size:54px;fill:var(--cobalt)}
.card-rule{fill:none;stroke:var(--tile);stroke-width:1.5}
.check{fill:none;stroke:var(--cobalt);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
@media (min-width:700px){
  .r-a{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .r-c{grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,4fr);gap:var(--s5)}
  .r-d .plate{display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);column-gap:var(--s7);align-items:center}
  .r-a .ph,.r-c .ph{height:clamp(300px,34vw,460px);object-fit:cover}
  .r-b .ph{height:clamp(240px,27vw,380px);object-fit:cover}
  .r-c .plate figcaption h2{font-size:30px}
}
.credits{padding-top:var(--s5)}
.cred-list{list-style:none;margin:0;padding:0;max-width:860px}
.cred-list li{padding:12px 0;border-top:1px solid var(--teal);font-size:17px;line-height:1.5;overflow-wrap:anywhere}
.cred-list li:first-child{border-top:0}
.cred-list .who{font-weight:700;color:var(--cobalt)}

/* contact: the home page's hero grammar without the boiler, the live line runs to the edge */
.hero--plain{--inlet:90px}
.hero--plain .hero-art,.hero--plain .hero-strip{display:none}
.hero--plain .hot-run i + i{left:auto;right:0}
@media (min-width:1000px){
  .hero--plain{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;grid-template-areas:"title" "row" "aside" "promises"}
  .hero--plain h1{grid-area:title;max-width:20ch}
  .hero--plain .hero-row .call-button{flex:0 0 min(600px,60%)}
}
.hero--plain .hero-row{margin-top:0}
.find-grid{display:grid;grid-template-columns:minmax(0,1fr);row-gap:var(--s5)}
.where{font:800 38px/1.05 var(--f-display);color:var(--cobalt);font-style:normal}
.hours{width:100%;max-width:700px;border-collapse:collapse}
.hours th,.hours td{padding:14px 0;border-top:1px solid var(--teal);text-align:left;vertical-align:baseline}
.hours tr:first-child th,.hours tr:first-child td{border-top:0;padding-top:0}
.hours th{font:700 18px/1.3 var(--f-text);color:var(--cobalt);width:9.5em;padding-right:var(--s4)}
@media (min-width:1000px){.find-grid{grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:var(--s8);align-items:start}}

/* closing call, and the 404 */
.endcall{padding:var(--s8) var(--pad) 112px}
.endcall h2{font-size:clamp(36px,9vw,56px);line-height:1;max-width:18ch}
.endcall p{max-width:52ch;margin:var(--s4) 0 var(--s5)}
.endcall .call-button{max-width:520px}
.endcall p.alt{margin:var(--s4) 0 0}
@media (min-width:1000px){
  .endcall{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);grid-template-areas:"h b" "p b" "a a";column-gap:var(--s8);align-items:center}
  .endcall > h2{grid-area:h;align-self:end}
  .endcall > p:not(.alt){grid-area:p;align-self:start}
  .endcall > .call-button{grid-area:b}
  .endcall > p.alt{grid-area:a}
}
.endcall .alt a{display:inline-flex;align-items:center;min-height:44px;font-weight:700}
.lostsvg{display:block;width:min(100%,520px);height:auto;max-width:none;margin:var(--s6) 0 var(--s2)}
.goto{list-style:none;margin:var(--s6) 0 0;max-width:640px}
.goto .tee{--ty:24px;padding:0 0 var(--s4)}
.goto .go{display:inline-flex;align-items:center;min-height:44px;font:800 34px/1 var(--f-display);color:var(--sky)}
.goto span{display:block}
.lost-call{margin-top:var(--s7);max-width:520px}
.lost-call p{margin:0 0 var(--s4);font-weight:700;color:var(--cobalt)}

/* 200% zoom (about 195 CSS px): two-column tables stack so no row sets a minimum width */
@media (max-width:259px){
  .invoice,.invoice tbody,.invoice tr,.invoice th,.invoice td,.hours,.hours tbody,.hours tr,.hours th,.hours td{display:block;width:auto}
  .invoice td{text-align:left;padding-top:0;border-top:0}
  .invoice th{padding-bottom:0}
  .hours td{padding-top:0;border-top:0}
  .hours th{padding-bottom:0}
}