/* Night Pylon, light (families/night-pylon).
   A lit commercial exit pylon, redrawn by day: a painted pine pole carries cream
   acrylic sign faces and black letter plates down the page, section headings are
   changeable letter tiles on drawn tracks, prices sit in black windows on a fuel
   board, and one lamp-framed call panel per page is the only lit thing (bulb
   yellow). Square corners, flat fills, no shadows, light only.
   A brand re-skins the family through the custom properties on :root
   (brands/<id>.json design.vars): palette, font names, rig width, pole axis. */

/* ---------- fonts: self-hosted, SIL Open Font License 1.1 ---------- */
@font-face{font-family:"League Gothic";src:url(/assets/fonts/league-gothic-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url(/assets/fonts/barlow-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url(/assets/fonts/barlow-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url(/assets/fonts/barlow-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(/assets/fonts/barlow-condensed-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(/assets/fonts/barlow-condensed-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(/assets/fonts/barlow-condensed-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ---------- tokens ---------- */
:root{
  color-scheme:only light;   /* one designed daylight palette; never auto-darkened */

  /* ground: an overcast daylight behind the pylon */
  --ground:#e4eae5;
  --ground-deep:#d6ded8;     /* footer */
  --rule:#bcc7c0;            /* hairline on the ground */

  /* sign materials */
  --acrylic:#f8f5ec;         /* sign face */
  --acrylic-2:#ebe6d8;       /* plate face, hovered rows */
  --tile:#dcd5c2;            /* changeable letter tile, one step deeper than the face */
  --tile-edge:#b3ab95;
  --track:#cfc8b5;           /* the drawn rail letters sit on, row rules */
  --field:#fffdf7;
  --field-edge:#59584f;
  --letter:#0c0c0c;          /* letter black: text on faces, plates, price windows */
  --letter-hover:#2a2a27;
  --letter-2:#262622;        /* body text on a face */
  --letter-3:#4a4a44;        /* secondary text on a face */
  --pine:#1f5d45;            /* painted pole and cabinet steel */
  --pine-deep:#16432f;
  --pine-seam:#2a7356;
  --pine-bolt:#3a8467;
  --bulb:#ffd23f;            /* the one live light: call panel lamps, number and handset only */
  --ink-soft:#d3d3c7;        /* text on a black plate */
  --ink-dim:#b9b6aa;         /* small labels on black */
  --err:#8f1d14;
  --footing:#5b5f58;         /* concrete base under the pole */
  --footing-cap:#777b72;

  /* type */
  --display:"League Gothic","Arial Narrow",Impact,sans-serif;
  --label:"Barlow Condensed","Arial Narrow",sans-serif;
  --body:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  /* rig */
  --rig-max:1360px;
  --rig:min(var(--rig-max),calc(100% - 32px));
  --axis-f:.65;              /* the pole's line across the rig */
  --axis:calc(var(--axis-f)*100%);
  --gap-sec:120px;
  --mbar-h:84px;
  --tap:44px;
  --lamp-clear:26px;         /* content clear of the lamp ring */
  --pole-x:12px;             /* phone rail centre, from the rig's left edge */
  --hang:28px;               /* phone: how far a face hangs off the rail */
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scrollbar-color:var(--pine) var(--ground)}
body{margin:0;background:var(--ground);color:var(--letter-2);font:400 1.0625rem/1.55 var(--body);overflow-x:hidden;overflow-wrap:break-word;font-variant-numeric:tabular-nums}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:2px}
b,strong{font-weight:600}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
::selection{background:var(--pine);color:var(--acrylic)}
/* focus: a black ring with a cream gap, so it reads on the ground, a face or a black plate */
:focus-visible{outline:3px solid var(--letter);outline-offset:3px;box-shadow:0 0 0 3px var(--acrylic)}
.lplate :focus-visible,.mbar :focus-visible{outline-color:var(--acrylic);box-shadow:0 0 0 3px var(--letter)}
.sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.icon{width:1.1em;height:1.1em;flex:none}
.skip{position:absolute;left:16px;top:0;z-index:60;transform:translateY(-120%);background:var(--letter);color:var(--acrylic);font:700 1rem/1 var(--label);letter-spacing:.06em;text-transform:uppercase;padding:14px 18px;text-decoration:none}
.skip:focus{transform:translateY(12px)}

/* ---------- header: a lit sign band ---------- */
.top{position:relative;z-index:30;background:var(--acrylic);border-bottom:4px solid var(--pine)}
/* brand, nav and call plate keep their places; only the nav wraps when the row runs short */
.top-in{width:var(--rig);margin:0 auto;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"brand nav call";align-items:center;gap:4px 28px;min-height:68px;padding:6px 0}
.top-in>.brand{grid-area:brand}
.top-in>.nav{grid-area:nav}
.top-in>.callbtn{grid-area:call}
.brand{display:inline-flex;align-items:center;gap:10px;min-height:var(--tap);font:700 1.3rem/1.05 var(--label);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--letter)}
.mark{width:20px;height:30px;flex:none}
.wordmark{height:40px;width:auto;max-width:min(100%,320px)}
.mark .c{fill:var(--pine)}.mark .f{fill:var(--acrylic)}.mark .p{fill:var(--pine-deep)}.mark .g{fill:var(--footing)}
.nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:0 22px}
.nav a{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);min-width:var(--tap);font:600 1rem/1 var(--label);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--letter-3)}
.nav a:hover{color:var(--letter);text-decoration:underline}
.nav a[aria-current]{color:var(--letter);text-decoration:underline;text-decoration-thickness:3px;text-decoration-color:var(--pine)}

/* ---------- call plates: unlit letter plates (header, close, footer, phone bar) ---------- */
.callbtn{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px 10px;min-height:var(--tap);background:var(--acrylic);color:var(--letter);text-decoration:none;font:700 1.05rem/1 var(--label);letter-spacing:.06em;text-transform:uppercase;padding:9px 16px;border:2px solid var(--letter);outline:2px solid var(--track);outline-offset:-6px}
.callbtn .lab{display:inline-flex;align-items:center;gap:10px}
.callbtn b{font:400 1.5rem/1 var(--display);letter-spacing:.04em;white-space:nowrap}
.callbtn--dark{background:var(--letter);color:var(--acrylic);outline-color:var(--letter-3)}
.callbtn:focus-visible{outline:3px solid var(--letter);outline-offset:3px;box-shadow:0 0 0 3px var(--acrylic)}
.mbar .callbtn:focus-visible{outline-color:var(--acrylic);box-shadow:0 0 0 3px var(--letter)}
@media (hover:hover){
  .callbtn:hover{background:var(--acrylic-2)}
  .callbtn--dark:hover{background:var(--letter-hover)}
  .callbtn:hover b{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.14em}
}
/* the closing plate: unlit, full width of its face, the number at the call panel's scale */
.callbtn--close{display:flex;width:100%;container:closeplate/inline-size;min-height:112px;padding:22px 28px 20px;border-width:4px;outline-offset:-12px}
.close-in{display:flex;align-items:center;justify-content:space-between;gap:10px 24px;width:100%}
.callbtn--close .lab{gap:12px;font-size:1.45rem;line-height:1.1;letter-spacing:.1em}
.callbtn--close .lab .icon{width:30px;height:30px}
.callbtn--close b{font-size:min(5rem,12.5cqi);line-height:.92;letter-spacing:.03em}
@container closeplate (max-width:600px){
  .close-in{flex-direction:column;align-items:flex-start}
  .callbtn--close b{font-size:min(5rem,15cqi)}
}

/* ---------- structure: the pole and the faces hung on it ---------- */
.site{position:relative;isolation:isolate;display:block}
/* the pole starts behind the first sign (the call stack; the can on the hub) and ends in the footing */
.pole{position:absolute;z-index:1;top:90px;bottom:0;width:56px;left:calc((100% - var(--rig))/2 + var(--rig)*var(--axis-f));transform:translateX(-50%);
  background:linear-gradient(90deg,var(--pine-deep) 0 8px,var(--pine) 8px 40px,var(--pine-seam) 40px 41px,var(--pine) 41px 48px,var(--pine-deep) 48px)}
.pole::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(180deg,transparent 0 238px,var(--pine-deep) 238px 240px)}
.t-hub .pole{top:140px}
.rig{width:var(--rig);margin:0 auto;position:relative;z-index:2}
/* a section is a four-track grid pivoting on the pole: faces hang left of it (on-l),
   across it from the right (on-r) or over the whole rig (on-w) */
.sec{position:relative;padding-top:var(--gap-sec);display:grid;grid-template-columns:[l] calc(var(--axis) - 170px) [axl] 170px [ax] 170px [axr] minmax(0,1fr) [r];align-items:start}
.sec::before{content:"";position:absolute;top:calc(var(--gap-sec) - 36px);left:calc(var(--axis) - 70px);width:140px;height:16px;background:var(--pine-deep);border-top:3px solid var(--pine-bolt)}
.on-l{grid-column:l / ax}
.on-r{grid-column:axl / r}
.on-w{grid-column:l / r}

/* ---------- faces: cream acrylic in a pine cabinet, or a black letter plate ---------- */
.cab{position:relative;background:var(--pine);padding:12px}
/* four bolt heads at the cabinet corners, drawn in the frame */
.cab::after{content:"";position:absolute;inset:2px;pointer-events:none;
  --bolt:radial-gradient(circle,var(--pine-deep) 0 2.2px,var(--pine-bolt) 2.8px 3.9px,transparent 4.5px);
  background:var(--bolt) left top/9px 9px no-repeat,var(--bolt) right top/9px 9px no-repeat,var(--bolt) left bottom/9px 9px no-repeat,var(--bolt) right bottom/9px 9px no-repeat}
.acr{position:relative;background:var(--acrylic);color:var(--letter-2);container:face/inline-size}
.pad{padding:36px 44px 40px}
.lplate{position:relative;background:var(--letter);color:var(--acrylic);border:12px solid var(--pine-deep);container:face/inline-size}
.lplate-in{padding:30px 36px 28px}

/* ---------- letter-tile and plain headings, always on a drawn track ---------- */
.board{margin:0 0 22px;font-weight:400;color:var(--letter)}
.lplate .board{color:var(--acrylic)}
.sec .board,.osec .board{font-size:min(2.85rem,17cqi)}
.sec .board--plain,.osec .board--plain{font-size:min(2.5rem,11cqi)}
/* tiles: empty, aria-hidden boxes whose letters CSS draws from data-ch (the text is in the heading once) */
.tiles{--tg:.16em;--th:calc(1.08em + 3px);display:flex;flex-wrap:wrap;gap:var(--tg) .42em;padding-bottom:4px;
  background:repeating-linear-gradient(180deg,transparent 0 var(--th),var(--track) var(--th) calc(var(--th) + 4px),transparent calc(var(--th) + 4px) calc(var(--th) + var(--tg)))}
.w{display:inline-flex;gap:.07em}
.t{display:inline-block;background:var(--tile);border:1px solid var(--tile-edge);border-bottom-width:2px;font:400 1em/1 var(--display);color:var(--letter);text-transform:uppercase;padding:.06em .1em .02em;min-width:.42em;text-align:center}
.t::before{content:attr(data-ch);display:block}
/* a longer heading: plain display capitals on the same track */
.board-text{display:block;font:400 1em/var(--pl) var(--display);--pl:1.22em;letter-spacing:.02em;text-transform:uppercase;padding-bottom:2px;
  background:repeating-linear-gradient(180deg,transparent 0 calc(var(--pl) - 4px),var(--track) calc(var(--pl) - 4px) var(--pl))}

/* ---------- opening: the title can and the call stack ---------- */
.opening{position:relative;display:grid;grid-template-columns:[l] minmax(0,calc(var(--axis) - 170px)) [axl] minmax(0,1fr) [r];grid-template-rows:auto auto 1fr;align-items:start;padding-top:32px}
.opening>.can{grid-column:l / axl;grid-row:1;margin-right:-28px;z-index:1}
.opening>.stack{grid-column:axl / r;grid-row:1 / span 3;z-index:2;margin-top:30px}
.opening>.shot,.opening>.osec{grid-column:l / axl;grid-row:2;margin:28px -28px 0 0;position:relative;z-index:1}
.opening>.shot{margin-right:48px}
.can{position:relative;background:var(--pine);padding:16px}
.can::after{inset:3px}
.can>.acr{padding:20px 32px 26px}
.can h1{margin:0;font:400 clamp(2.6rem,4.2vw,4rem)/.92 var(--display);letter-spacing:.015em;text-transform:uppercase;color:var(--letter)}
.lede{margin-top:16px;max-width:60ch;font-size:1.125rem;line-height:1.5;color:var(--letter-2)}
.lede p{margin:0 0 .6em}.lede p:last-child{margin-bottom:0}
.lede a,.prose a{color:var(--pine-deep)}
.lede .tel,.prose .tel{font-weight:600;white-space:nowrap}
.crumbs ol{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-wrap:wrap;gap:0 10px;font:600 .95rem/1.2 var(--label);letter-spacing:.08em;text-transform:uppercase;color:var(--letter-3)}
.crumbs li{display:inline-flex;align-items:center;min-height:32px}
.crumbs li+li::before{content:"/";margin-right:10px;color:var(--tile-edge)}
.crumbs a{color:var(--letter)}
/* road and exit plates: lettered data on black, never a route marker */
.plates{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.xplate{background:var(--letter);color:var(--acrylic);font:400 1.45rem/1 var(--display);letter-spacing:.06em;text-transform:uppercase;padding:6px 10px 3px}
.stack{display:flex;flex-direction:column;align-items:stretch}
.callfoot{position:relative;z-index:1;margin:-4px 4% 0;background:var(--acrylic);border:2px solid var(--letter);border-top:0;padding:12px 18px 14px}
.l247{margin:0;font:700 1.08rem/1.25 var(--label);letter-spacing:.04em;text-transform:uppercase;color:var(--letter)}
.ask{margin:6px 0 0;font-size:1rem;line-height:1.4;color:var(--letter-2)}
.stack>.prices{margin-top:22px}
/* a photo in a black frame; its caption a black strip */
.shot{margin:0;background:var(--letter);border:5px solid var(--letter)}
.shot img{width:100%}
.shot figcaption,.band figcaption{font:600 .95rem/1.3 var(--label);letter-spacing:.04em;color:var(--acrylic);background:var(--letter);padding:7px 8px 3px}

/* ---------- the hub: the pylon seen straight on, centred on the pole ---------- */
.opening--hub{display:block;padding:28px 0 0}
.pylon{position:relative;z-index:2;width:min(720px,100%);margin-left:clamp(0px,calc(var(--axis) - 360px),calc(100% - 720px));display:flex;flex-direction:column;align-items:center}
.pylon>.can,.pylon>.callpanel{width:100%}
.pylon>.callpanel{margin-top:-4px}
.open{position:relative;z-index:1;width:92%;margin-top:-6px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;padding:14px 22px 16px;background:var(--acrylic);border:2px solid var(--letter)}
.open .board{flex:none;margin:0;font-size:3.2rem}
.open-txt{flex:1 1 16rem;min-width:0}
.joint{flex:none;width:56px;height:16px;background:var(--pine-deep)}
.pylon>.prices{width:100%}
@media (min-width:961px){
  /* reading order on a desk: can, the OPEN board, the call; a phone gets the call first */
  .pylon>.can{order:0}.pylon>.open{order:1}.pylon>.callpanel{order:2}.pylon>.joint{order:3}.pylon>.prices{order:4}
}
/* the hub photo: a band behind the pylon, fading into the ground at its foot */
.band{position:absolute;z-index:0;left:0;right:0;top:0;height:min(660px,78vh);margin:0;overflow:hidden;background:var(--ground-deep)}
.band img{width:100%;height:100%;object-fit:cover;object-position:28% 55%}
.band::after{content:"";position:absolute;left:0;right:0;bottom:0;height:180px;background:linear-gradient(180deg,transparent,var(--ground))}
.band figcaption{position:absolute;z-index:1;right:16px;top:12px;max-width:min(30rem,calc(100% - 32px))}
.has-band .opening--hub{padding-top:56px}

/* ---------- call panel: the one lamp-framed call on each page ---------- */
.callpanel{position:relative;display:block;container:callpanel/inline-size;text-decoration:none;background:var(--letter);color:var(--bulb);padding:var(--lamp-clear) calc(var(--lamp-clear) + 4px);border:4px solid var(--pine)}
/* steady lamps, drawn in CSS: rows top and bottom, columns between them; "round"
   spaces them evenly at about 24px whatever the panel's size. Never animated. */
.bulbs{position:absolute;inset:-2px;pointer-events:none}
.bulbs::before,.bulbs::after{content:"";position:absolute;inset:0;--lamp:radial-gradient(circle,var(--bulb) 0 4.3px,transparent 5.1px)}
.bulbs::before{background:var(--lamp) left top/24px 24px round no-repeat,var(--lamp) left bottom/24px 24px round no-repeat}
.bulbs::after{top:24px;bottom:24px;background:var(--lamp) left top/24px 24px no-repeat round,var(--lamp) right top/24px 24px no-repeat round}
.call-in{display:flex;align-items:center;justify-content:space-between;gap:8px 24px;padding:0 12px}
.call-lab{display:flex;align-items:center;gap:12px;font:700 1.45rem/1.1 var(--label);letter-spacing:.1em;text-transform:uppercase;color:var(--acrylic)}
.call-lab .icon{width:30px;height:30px;color:var(--bulb)}
.call-num{font:400 min(5rem,12.5cqi)/.92 var(--display);letter-spacing:.03em;white-space:nowrap}
@container callpanel (max-width:600px){
  .call-in{flex-direction:column;align-items:flex-start;padding:0}
  .call-num{font-size:min(5rem,15cqi)}
}
@media (hover:hover){ .callpanel:hover .call-num{text-decoration:underline;text-decoration-thickness:4px;text-underline-offset:.12em} }
.callpanel:focus-visible{outline:4px solid var(--letter);outline-offset:4px;box-shadow:0 0 0 4px var(--acrylic)}

/* ---------- price board: fuel-board lines with a black from-price window ---------- */
.prices{position:relative;background:var(--pine);padding:10px}
.prices::after{display:none}
.prices>.pnote{margin-top:10px}
.pface{background:var(--acrylic)}
.pcap,.ptable caption{margin:0;background:var(--letter);color:var(--acrylic);font:700 .95rem/1 var(--label);letter-spacing:.14em;text-transform:uppercase;padding:9px 16px 8px;text-align:left}
.pboard{list-style:none;margin:0;padding:4px 0;color:var(--letter);container:pboard/inline-size}
.pboard li+li{border-top:2px solid var(--track)}
.pboard a,.pboard .prow{display:grid;grid-template-columns:minmax(0,1fr) auto 18px;align-items:center;gap:14px;min-height:52px;padding:5px 10px 5px 18px;text-decoration:none;color:var(--letter)}
.pboard .prow::after{content:""}
.pname{font:700 1.08rem/1.15 var(--label);letter-spacing:.05em;text-transform:uppercase}
/* the resting tap cue: one more changeable-letter tile, holding a chevron */
.pboard a::after,.golist a::after,.prose .boardlist a::after{content:"";flex:none;width:18px;height:28px;background:var(--tile) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 28'%3E%3Cpath d='M6.5 8.5l6 5.5-6 5.5' fill='none' stroke='%230c0c0c' stroke-width='2.6'/%3E%3C/svg%3E") center/18px 28px no-repeat;border:1px solid var(--tile-edge);border-bottom-width:2px}
@container pboard (max-width:17em){
  .pboard a,.pboard .prow{grid-template-columns:minmax(0,1fr) 18px;row-gap:6px}
  .pboard .pname{grid-column:1 / -1}
  .pboard .pwin{justify-self:start}
}
@media (hover:hover){
  .pboard a:hover{background:var(--acrylic-2)}
  .pboard a:hover .pname{text-decoration:underline}
  .pboard a:hover .pwin{outline:2px solid var(--letter);outline-offset:2px}
}
.pwin{display:inline-flex;flex-wrap:wrap;align-items:baseline;justify-content:flex-end;gap:2px 8px;background:var(--letter);color:var(--acrylic);padding:5px 12px 3px;min-width:200px;white-space:nowrap}
.pwin small{font:600 .82rem/1 var(--label);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim)}
.pwin span{font:400 min(1.8rem,11vw)/1.1 var(--display);letter-spacing:.06em}
.pwin--call span{font-size:min(1.45rem,9vw);text-transform:uppercase}
.pnote{background:var(--acrylic);color:var(--letter-2);padding:14px 20px 12px;border-top:6px solid var(--letter)}
.pnote p{margin:0;font-size:1rem;line-height:1.45;max-width:60ch}
.checked{font:700 .92rem/1.3 var(--label);letter-spacing:.08em;text-transform:uppercase;color:var(--letter-3)}
.pnote .checked{margin-top:10px}
/* the hub's board: the note beside it, the cabinet widened leftward by one note column */
@media (min-width:1181px){
  .pylon>.prices{display:grid;grid-template-columns:300px minmax(0,1fr);gap:10px;align-items:stretch;width:calc(88% + 310px);align-self:flex-end;margin-right:6%}
  .pylon>.prices>.pface{grid-column:2;grid-row:1}
  .pylon>.prices>.pnote{grid-column:1;grid-row:1;margin-top:0;border-top:0}
}
/* the cost page's card: a real table, one row per service */
.ptable{width:100%;border-collapse:collapse;background:var(--acrylic);color:var(--letter)}
.ptable caption{caption-side:top}
.ptable th,.ptable td{padding:6px 10px;vertical-align:middle;text-align:left}
.ptable th{padding-left:18px;font:700 1.08rem/1.2 var(--label);letter-spacing:.05em;text-transform:uppercase}
.ptable th a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.ptable th a:hover{text-decoration:underline}
.ptable td{width:1%;text-align:right;white-space:nowrap}
.ptable tr+tr>*{border-top:2px solid var(--track)}
/* a service page's own line: name, a drawn rail, the window */
.svcline{display:flex;flex-wrap:wrap;align-items:center;row-gap:8px;background:var(--acrylic);padding:14px 18px}
.sname{font:400 1.95rem/1 var(--display);letter-spacing:.03em;text-transform:uppercase;color:var(--letter)}
.svcline::after{content:"";order:1;flex:1 0 28px;height:4px;margin:0 14px;background:var(--track);border-bottom:2px solid var(--tile-edge)}
.svcline>.pwin{order:2;margin-left:auto}

/* ---------- reading text on a face ---------- */
.prose{max-width:64ch}
.prose>:last-child{margin-bottom:0}
.prose p{margin:0 0 1em}
.prose h3,.prose h4{margin:1.4em 0 .45em;font:700 1.2rem/1.3 var(--label);letter-spacing:.05em;text-transform:uppercase;color:var(--letter)}
.prose h4{font-size:1.06rem}
.prose>h3:first-child{margin-top:0}
.prose a{text-decoration-thickness:2px}
.lplate .prose,.lplate p{color:var(--ink-soft)}
.lplate .prose a{color:var(--acrylic)}
.lplate .prose h3{color:var(--acrylic)}
/* lists: lettered rows on the track, a small tile as the bullet */
.prose ul,.prose ol{list-style:none;margin:0 0 1.1em;padding:0}
.prose ul>li{position:relative;padding:10px 0 10px 28px;border-top:2px solid var(--track)}
.prose ul>li::before{content:"";position:absolute;left:2px;top:.95em;width:12px;height:15px;background:var(--tile);border:1px solid var(--tile-edge);border-bottom-width:2px}
.prose ul>li:last-child,.prose ol>li:last-child{border-bottom:2px solid var(--track)}
/* ordered lists: a number tile per step */
.prose ol{counter-reset:np}
.prose ol>li{counter-increment:np;position:relative;min-height:60px;padding:12px 0 12px 60px;border-top:2px solid var(--track)}
.prose ol>li::before{content:counter(np);position:absolute;left:0;top:10px;min-width:44px;font:400 1.9rem/.9 var(--display);text-align:center;background:var(--tile);color:var(--letter);border:1px solid var(--tile-edge);border-bottom-width:3px;padding:7px 8px 3px}
.lplate .prose ul>li,.lplate .prose ol>li,.lplate .prose ul>li:last-child,.lplate .prose ol>li:last-child{border-color:var(--letter-3)}
/* a list of links only: a destination board, names in display capitals */
.prose .boardlist{columns:2 16rem;column-gap:36px}
.prose .boardlist>li{break-inside:avoid;padding:0}
.prose .boardlist>li::before{display:none}
.prose .boardlist a{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:52px;padding:6px 0;font:400 1.6rem/1.05 var(--display);letter-spacing:.03em;text-transform:uppercase;text-decoration:none;color:var(--letter)}
.lplate .prose .boardlist a{color:var(--acrylic)}
.prose .boardlist a:hover>span{text-decoration:underline}
/* a bare list of places: names on their own track */
.prose .placelist{display:grid;grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));gap:12px 32px}
.prose .placelist>li,.prose .placelist>li:last-child{padding:0 0 4px;border:0;border-bottom:4px solid var(--track);font:400 1.75rem/1.05 var(--display);letter-spacing:.03em;text-transform:uppercase;color:var(--letter)}
.prose .placelist>li::before{display:none}
.lplate .prose .placelist>li{color:var(--acrylic)}
/* exit numbers: lettered data on a small black plate (never a route marker) */
.xnum{display:inline-block;margin-right:.3em;background:var(--letter);color:var(--acrylic);font:400 1.2em/1 var(--display);letter-spacing:.05em;text-transform:uppercase;padding:.2em .4em .08em;vertical-align:.04em}
.lplate .xnum{background:var(--acrylic);color:var(--letter)}
.prose .boardlist .xnum{font-size:.82em}
.prose .exitlist>li,.prose ol.exitlist>li{padding-left:0;min-height:0}
.prose .exitlist>li::before{display:none}

/* ---------- what is included (service pages): a black plate ---------- */
.inc p{margin:0;max-width:60ch}

/* ---------- questions: lettered rows on one face ---------- */
.qa{padding:16px 0 18px;border-top:2px solid var(--track)}
.board+.qas>.qa:first-child{border-top:0;padding-top:4px}
.qa h3{margin:0 0 6px;font:700 1.18rem/1.3 var(--label);letter-spacing:.03em;color:var(--letter)}
.qa .prose p{margin-bottom:.6em}

/* ---------- link plates on black: related pages, the way on ---------- */
.golist{list-style:none;margin:0;padding:0}
.golist li+li{border-top:2px solid var(--letter-3)}
.golist a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;padding:8px 0;font:400 1.75rem/1.05 var(--display);letter-spacing:.03em;text-transform:uppercase;text-decoration:none;color:var(--acrylic)}
.golist a:hover span,.golist a[aria-current] span{text-decoration:underline;text-decoration-thickness:3px}

/* ---------- the close: the closing plate, and the written request across the pole ---------- */
.close--form .closer{grid-column:l / axl}
.close--form .formface{grid-column:axl / r;margin:56px 0 0 60px;position:relative;z-index:2}
.closer .board{margin-bottom:24px}

/* ---------- lead form (markup from the generator) ---------- */
.formface .board{font-size:min(2.25rem,11cqi)}
.leadform{display:grid;gap:16px}
.leadform__field label{display:block;margin-bottom:6px;font:700 1.02rem/1.3 var(--label);letter-spacing:.04em;color:var(--letter)}
.leadform input,.leadform select,.leadform textarea{display:block;width:100%;min-height:48px;margin:0;font:500 1.05rem/1.3 var(--body);color:var(--letter);background:var(--field);border:2px solid var(--field-edge);border-radius:0;padding:12px;caret-color:var(--pine)}
.leadform textarea{min-height:110px;resize:vertical}
.leadform select{appearance:none;padding-right:44px;background-image:linear-gradient(45deg,transparent 50%,var(--letter) 50%),linear-gradient(135deg,var(--letter) 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 15px) 50%;background-size:7px 7px;background-repeat:no-repeat}
.leadform input:hover,.leadform select:hover,.leadform textarea:hover{border-color:var(--letter)}
.leadform input:focus-visible,.leadform select:focus-visible,.leadform textarea:focus-visible{outline:3px solid var(--pine);outline-offset:0;box-shadow:none;border-color:var(--pine)}
.leadform :user-invalid{border:3px solid var(--err)}
.leadform__hp{display:none}
.leadform__note{margin:0;font-size:1rem;color:var(--letter-3)}
.leadform__submit{justify-self:start;display:inline-flex;align-items:center;min-height:52px;background:var(--letter);color:var(--acrylic);border:0;border-radius:0;font:700 1.12rem/1 var(--label);letter-spacing:.08em;text-transform:uppercase;padding:15px 24px;cursor:pointer}
@media (hover:hover){ .leadform__submit:hover{background:var(--letter-hover)} }

/* ---------- sources: a low-mass strip ---------- */
.srcs{--gap-sec:72px}
.srcs::before{display:none}
.srcface{grid-column:l / ax;background:var(--acrylic);border:1px solid var(--rule);border-top:6px solid var(--letter);padding:16px 24px 18px;font-size:.95rem;color:var(--letter-2)}
.srcface h2{margin:0 0 8px;font:700 1.05rem/1.2 var(--label);letter-spacing:.12em;text-transform:uppercase;color:var(--letter)}
.srcface ul{margin:0;padding:0 0 0 1.1em}
.srcface li{margin:0 0 4px}
.srcface a{color:var(--pine-deep)}
.srcface .checked{margin:10px 0 0}

/* ---------- the base of the pole ---------- */
.base{position:relative;z-index:2;padding-top:var(--gap-sec)}
.footing{width:min(520px,70%);height:46px;margin-left:calc((100% - var(--rig))/2 + var(--rig)*var(--axis-f) - min(260px,35%));background:var(--footing);border-top:6px solid var(--footing-cap)}

/* ---------- footer ---------- */
.foot{background:var(--ground-deep);border-top:1px solid var(--rule);color:var(--letter-2)}
.foot-in{width:var(--rig);margin:0 auto;padding:40px 0 44px;display:grid;grid-template-columns:1.2fr 1fr auto;gap:24px 48px;align-items:start}
.foot .brand{font-size:1.45rem}
.foot-id p{margin:10px 0 0;max-width:46ch}
.foot-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 22px}
.foot-nav a{display:inline-flex;align-items:center;min-height:var(--tap);font:600 1rem/1 var(--label);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--letter-3)}
.foot-nav a:hover,.foot-nav a[aria-current]{color:var(--letter);text-decoration:underline}
.copy{margin:12px 0 0;font-size:.92rem;color:var(--letter-3)}
/* the footer's services board: a cream destination board under a black rail, a chevron tile per row */
.foot-svc{grid-column:1 / -1;min-width:0}
.foot-h{margin:0 0 8px;font:700 1rem/1.2 var(--label);letter-spacing:.12em;text-transform:uppercase;color:var(--letter)}
.foot-svc ul{list-style:none;margin:0;padding:2px 16px 4px;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));column-gap:32px;background:var(--acrylic);border-top:6px solid var(--letter)}
.foot-svc li{border-bottom:2px solid var(--track)}
.foot-svc a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:var(--tap);padding:4px 0;font:600 1.02rem/1.15 var(--label);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--letter)}
.foot-svc a::after{content:"";flex:none;width:14px;height:22px;background:var(--tile) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 28'%3E%3Cpath d='M6.5 8.5l6 5.5-6 5.5' fill='none' stroke='%230c0c0c' stroke-width='2.6'/%3E%3C/svg%3E") center/14px 22px no-repeat;border:1px solid var(--tile-edge);border-bottom-width:2px}
.foot-svc a:hover span,.foot-svc a[aria-current] span{text-decoration:underline;text-decoration-thickness:2px}
.foot-call{grid-column:-2 / -1}

/* ---------- key takeaways: a summary face, a cream board under a black head rail, one chevron tile per line ---------- */
.sumface{position:relative;background:var(--acrylic);color:var(--letter-2);border:2px solid var(--letter);border-top:8px solid var(--letter);container:face/inline-size}
.sum-in{padding:20px 28px 16px}
.sumface .board{margin-bottom:10px;font-size:min(2.1rem,12cqi)}
.sumface .board--plain{font-size:min(1.9rem,10cqi)}
.sumface .takeaways{list-style:none;margin:0;padding:0}
.sumface .takeaways li{position:relative;padding:9px 0 9px 28px;font-size:1.05rem;line-height:1.45;max-width:62ch}
.sumface .takeaways li+li{border-top:2px solid var(--track)}
.sumface .takeaways li::before{content:"";position:absolute;left:0;top:calc(9px + .1em);width:14px;height:22px;background:var(--tile) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 28'%3E%3Cpath d='M6.5 8.5l6 5.5-6 5.5' fill='none' stroke='%230c0c0c' stroke-width='2.6'/%3E%3C/svg%3E") center/14px 22px no-repeat;border:1px solid var(--tile-edge);border-bottom-width:2px}
.sumface .takeaways a{color:var(--pine-deep);font-weight:600}
@media (max-width:520px){.sum-in{padding:16px 18px 12px}}

/* ---------- phone call bar ---------- */
.mbar{display:none}

/* ---------- desk: a sticky sign band ---------- */
@media (min-width:1181px){
  html{scroll-padding-top:88px}
  .top{position:sticky;top:0}
}

/* ---------- tablet ---------- */
@media (max-width:1180px){
  .top-in{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand call" "nav nav"}
  .nav{justify-content:flex-start;gap:0 18px}
  .close--form .closer{grid-column:l / r}
  .close--form .formface{grid-column:axl / r;margin:-24px 0 0}
}

/* ---------- phone ---------- */
@media (max-width:960px){
  :root{--axis-f:.5;--gap-sec:86px}
  html{scroll-padding-bottom:calc(var(--mbar-h) + 16px)}
  body{padding-bottom:var(--mbar-h)}
  /* the pole becomes a 22px rail at the rig's left edge, with a bolted collar every 160px */
  .pole,.t-hub .pole{top:0;left:calc((100% - var(--rig))/2 + var(--pole-x));width:22px;background:linear-gradient(90deg,var(--pine-deep) 0 4px,var(--pine) 4px 15px,var(--pine-seam) 15px 17px,var(--pine) 17px 19px,var(--pine-deep) 19px)}
  .pole::before{background:repeating-linear-gradient(180deg,transparent 0 156px,var(--pine-bolt) 156px 158px,var(--pine-deep) 158px 164px)}
  .top-in{grid-template-columns:minmax(0,1fr);grid-template-areas:"brand" "nav";gap:0 16px;padding:4px 0 2px}
  .top-in>.callbtn{display:none}
  .brand{font-size:1.15rem}
  .nav{justify-content:space-between;gap:0 8px}
  .nav a{font-size:.94rem;letter-spacing:.04em;min-width:0;padding:0 2px}
  .sec{grid-template-columns:[l axl ax axr] minmax(0,1fr) [r]}
  /* faces alternate: hung right of the rail (l) or crossing it (r) */
  .sec--l{margin-left:var(--hang)}
  .sec--r{margin-right:var(--hang)}
  .sec::before{top:calc(var(--gap-sec) - 28px);left:calc(var(--pole-x) - 8px);width:52px}
  .sec--l::before{left:calc(var(--pole-x) - var(--hang) - 8px)}
  .srcs{margin-left:var(--hang)}
  .pad{padding:24px 20px 26px}
  .lplate{border-width:8px}
  .lplate-in{padding:22px 18px 20px}
  .sec .board,.osec .board{font-size:min(2.05rem,17cqi)}
  .sec .board--plain,.osec .board--plain{font-size:min(2rem,12cqi)}
  .opening{display:block;padding-top:16px}
  .opening>.can{margin:0}
  .opening>.stack{margin-top:14px}
  .opening>.shot,.opening>.osec{margin:22px 0 0 var(--hang)}
  .can{padding:10px}
  .can::after{inset:1px}
  .can>.acr{padding:16px 18px 20px}
  .can h1{font-size:clamp(2.3rem,9vw,3.4rem)}
  .lede{font-size:1.06rem}
  .callfoot{margin:-4px 3% 0;padding:10px 14px 12px}
  .opening--hub{padding-top:16px}
  .has-band .opening--hub{padding-top:120px}
  .band{height:220px}
  .joint{display:none}
  .pylon>.prices{margin-top:18px}
  .band figcaption{right:auto;left:16px;top:8px}
  .pylon{margin:0;width:100%}
  .open{width:96%;padding:10px 14px 12px;gap:6px 18px}
  .open .board{font-size:2.6rem}
  .call-lab{font-size:1.15rem}
  .callpanel{padding:var(--lamp-clear)}
  .pboard a,.pboard .prow{gap:10px;padding:8px 8px 8px 12px}
  .pname{font-size:1rem}
  .pwin{min-width:0;max-width:100%;padding:4px 9px}
  .pwin small{font-size:.72rem}
  .pwin span{font-size:min(1.4rem,8vw)}
  .ptable th{padding-left:12px;font-size:1rem}
  .sname{font-size:1.6rem}
  .prose .boardlist{columns:1}
  .prose .boardlist a,.golist a{font-size:1.45rem}
  .prose .placelist{grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:10px 20px}
  .prose .placelist>li{font-size:1.45rem}
  .closer,.close--form .closer{grid-column:l / r}
  .close--form .formface{grid-column:l / r;margin:var(--gap-sec) 0 0}
  .footing{width:48px;margin-left:calc((100% - var(--rig))/2 + var(--pole-x) - 24px)}
  .foot-in{grid-template-columns:1fr;padding:32px 0 36px}
  .mbar{display:flex;position:fixed;z-index:40;left:0;right:0;bottom:0;padding:10px 12px;background:var(--letter);border-top:3px solid var(--pine)}
  .mbar .callbtn{width:100%;min-height:58px;padding:10px 14px;font-size:clamp(.95rem,.62rem + 1.6vw,1.6rem)}
  .mbar .callbtn .lab{white-space:nowrap}
  .mbar .callbtn b{font-size:min(clamp(1.45rem,.95rem + 2.8vw,2.6rem),13vw)}
}
@media (max-width:520px){
  .sec .board,.osec .board{font-size:min(1.6rem,17cqi)}
  .sec .board--plain,.osec .board--plain{font-size:min(1.6rem,12cqi)}
  .tiles{--tg:.14em;column-gap:.3em}
  .w{gap:.03em}
  .t{padding:.06em .05em .02em;min-width:.36em}
  /* the title sets tighter so the call panel rises; a rem floor still grows with text zoom */
  .can h1{font-size:max(min(2.4rem,10.5cqi),calc(1rem + 8px))}
  .can>.acr{padding:14px 16px 18px}
  .crumbs ol{margin-bottom:8px;font-size:.88rem}
  .crumbs li{min-height:28px}
  .lede{margin-top:12px}
  .has-band .opening--hub{padding-top:64px}
  .band{height:150px}
  .band::after{height:70px}
  .open .board{font-size:2.2rem}
  .prose ol>li{padding-left:52px}
  .prose ol>li::before{min-width:38px;font-size:1.6rem}
}
@media (max-width:340px){
  .nav a{flex:1 1 30%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}
/* print: black on paper, faces outlined, the number kept */
@media print{
  :not(input,select,textarea,option),:not(input,select,textarea,option)::before,::after{background:transparent!important;color:#000!important;box-shadow:none!important}
  .skip,.pole,.bulbs,.footing,.base,.mbar,.band,.sec::before,.nav,.cab::after{display:none!important}
  .cab,.lplate,.callpanel,.callbtn,.pwin,.t{border:1px solid #000!important;outline:0!important}
  .t::before{color:#000}
  .sec{padding-top:24px}
  .sec--l,.sec--r{margin:0}
}

/* Sources fold (2026-11-08): closed by default, opens on tap */
.src-fold>summary{display:list-item;list-style:disclosure-closed inside;cursor:pointer;font-weight:700}
.src-fold[open]>summary{list-style-type:disclosure-open;margin-bottom:.5em}
.src-fold>summary::-webkit-details-marker{display:revert}