/* Blue Equipment site styles. Hand-maintained source (not generated).
   Started from concepts/homepage (hero 4 build-out), 2026-09-25. Light only by decision. */
/* Fonts are served from the site itself (2026-10-07): no request to Google, same on any host.
   Variable latin files from Google Fonts; licences (SIL OFL 1.1) beside them in assets/fonts/. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:500 800;font-display:swap;src:url(../fonts/archivo-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  --be:#1d376c; --be-deep:#0a1830; --be-mid:#16305f; --kblue:#0073a3; --sky:#00aeef;
  --paper:#eef2f5; --card:#fff; --ink:#0b1a33; --ink-2:#45556b; --line:#cdd6e0; --stage:#e3e9ef;
  --ok:#157a45; --shut:#b3261e;
  --display:"Archivo",system-ui,sans-serif; --cond:"Barlow Condensed","Arial Narrow",sans-serif; --sans:"Manrope",system-ui,sans-serif; --mono:"JetBrains Mono",Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:light;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
[hidden]{display:none!important}
.wrap{width:min(1320px,100% - 48px);margin-inline:auto}
.mono{font:600 11.5px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase}
:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
.btn{display:inline-flex;align-items:center;gap:12px;height:50px;padding:0 20px;font-weight:700;font-size:15px;text-decoration:none;border:1px solid transparent;white-space:nowrap}
.btn.p{background:var(--be);color:#fff}.btn.p:hover{background:var(--kblue)}
.btn.s{border-color:var(--ink)}.btn.s:hover{background:var(--ink);color:#fff}
.btn.w{background:#fff;color:var(--be-deep)}.btn.w:hover{background:var(--sky)}
.btn.o{border-color:rgba(255,255,255,.6);color:#fff}.btn.o:hover{background:rgba(255,255,255,.12)}
.btn i,.tlink i{width:8px;height:8px;border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg);flex:none}
.tlink{display:inline-flex;align-items:center;gap:10px;font-weight:700;text-decoration:none;color:var(--kblue);padding:6px 0}
.tlink:hover{text-decoration:underline}
.reg{position:absolute;width:12px;height:12px;color:var(--ink-2);opacity:.5}
.reg::before,.reg::after{content:"";position:absolute;background:currentColor}
.reg::before{left:5px;top:0;width:1.5px;height:12px}.reg::after{top:5px;left:0;height:1.5px;width:12px}

/* ---------- header ---------- */
header.site{position:absolute;top:0;left:0;right:0;z-index:20;color:#fff}
header.site .wrap{display:flex;align-items:center;min-height:84px;gap:36px;border-bottom:1px solid rgba(255,255,255,.2)}
.logo img{height:40px;width:auto}
.nav{display:flex;gap:2px}
.nav a{text-decoration:none;font-weight:600;font-size:14.5px;padding:10px 12px}
.nav a:hover{color:var(--sky)}
.hdr-r{margin-left:auto;display:flex;gap:12px;align-items:center}
.tel{text-decoration:none;padding:10px 4px}
.find{display:inline-flex;align-items:center;height:40px;padding:0 16px;background:#fff;color:var(--be-deep);text-decoration:none;font-weight:700;font-size:14.5px}
.find:hover{background:var(--sky)}
.burger{display:none;width:44px;height:40px;place-items:center;border:1px solid rgba(255,255,255,.5);background:none;color:#fff;cursor:pointer}
.burger svg{width:20px;height:20px}
@media (max-width:1100px){.nav,.tel{display:none}.burger{display:grid}
  .nav.open{display:flex;flex-direction:column;position:absolute;top:84px;left:0;right:0;background:var(--be-deep);padding:8px 24px 20px;border-bottom:1px solid rgba(255,255,255,.2)}
  .nav.open a{font-size:20px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.12)}}

/* ---------- hero ---------- */
.photo{position:relative;min-height:600px;color:#fff;background:var(--be-deep);overflow:hidden;display:flex;flex-direction:column}
.photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 56%}
/* the right-hand stop holds the side paragraph over the bright wall sign (was .3: 2.3:1) and the 52% stop
   the "Kinze dealer" label (was .2: 4.4:1); measured with kinze-qa qa_photo.js, 2026-10-22 */
.photo::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(6,14,30,.6) 0%,rgba(6,14,30,.05) 26%,rgba(6,14,30,.32) 52%,rgba(6,14,30,.9) 100%),
  linear-gradient(90deg,rgba(6,14,30,.62),rgba(6,14,30,.08) 55%,rgba(6,14,30,.78))}
.photo .wrap{position:relative;z-index:1}
.photo .body{margin-top:auto;padding:0 0 132px;display:grid;grid-template-columns:1.5fr .5fr;gap:44px;align-items:end}
h1{font-family:var(--cond);font-weight:700;font-size:clamp(56px,7.4vw,112px);line-height:.88;letter-spacing:-.01em;text-transform:uppercase}
h1 .place{display:flex;align-items:center;gap:12px;font:600 12px/1 var(--mono);letter-spacing:.1em;color:#d8e2f0;margin-bottom:22px}
h1 .place::before{content:"";width:34px;height:1px;background:rgba(255,255,255,.55)}
h1 .b{color:#9fd3f2;display:block}
.side p{color:#eef3f9;font-size:16.5px;max-width:34ch;text-shadow:0 1px 12px rgba(0,0,0,.45)}
.side .mono{color:#c9d6ea;margin-top:16px;display:block;line-height:1.7}

/* ---------- chooser ---------- */
.chooser{position:relative;z-index:3;margin-top:-104px}
.ask{display:flex;justify-content:space-between;align-items:end;gap:20px;color:#fff;margin-bottom:12px}
.ask h2{font-family:var(--display);font-stretch:84%;font-weight:800;font-size:24px;letter-spacing:-.01em}
.ask .mono{color:#c9d6ea}
.doors{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);background:var(--card);box-shadow:0 30px 60px -40px rgba(6,14,30,.6)}
.door{appearance:none;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;padding:18px 20px 20px;border-right:1px solid var(--line);position:relative;display:grid;gap:8px;min-height:92px}
.door:last-child{border-right:0}
.door .mono{color:var(--ink-2)}
.door b{font-family:var(--display);font-weight:700;font-stretch:88%;font-size:25px;line-height:1}
.door small{color:var(--ink-2);font-size:14px}
.door::after{content:"";position:absolute;left:-1px;right:-1px;bottom:-1px;height:3px;background:transparent}
.door:hover{background:color-mix(in srgb,var(--kblue) 6%,transparent)}
.door[aria-selected="true"]{background:var(--be);color:#fff}
.door[aria-selected="true"] .mono,.door[aria-selected="true"] small{color:#c8d5ec}
.door[aria-selected="true"]::after{background:var(--sky)}
.panel{display:grid;grid-template-columns:1.55fr 1fr;border:1px solid var(--line);border-top:0;background:var(--card);min-height:380px}
/* all four panels stacked in one cell: the hidden ones keep their height, so the box (and the photo) is the same on every tab */
.panels{display:grid}
.panels>.panel{grid-area:1/1}
@media (max-width:1000px){.panels>.panel{grid-template-rows:auto 1fr}}
.panels>.panel[hidden]{display:grid!important;visibility:hidden}
.vis{position:relative;background:var(--stage);overflow:hidden;border-right:1px solid var(--line)}
.vis .hex{position:absolute;left:50%;top:50%;width:500px;height:500px;transform:translate(-50%,-54%);color:var(--be);opacity:.07}
.vis .horizon{position:absolute;left:0;right:0;bottom:86px;height:1px;background:var(--line)}
.vis .cut{position:absolute;left:6%;width:88%;bottom:62px;height:auto;filter:drop-shadow(0 22px 14px rgba(13,29,61,.25))}
.vis figure{position:absolute;left:7%;right:7%;top:26px;bottom:56px;border:1px solid var(--line);background:#1a2638;overflow:hidden}
.vis figure img{width:100%;height:100%;object-fit:cover}
.cap{position:absolute;left:24px;bottom:22px;color:var(--ink-2);display:flex;gap:10px}
.cap b{color:var(--kblue)}
.ans{padding:30px 30px 28px;display:flex;flex-direction:column}
.ans>.mono{color:var(--kblue)}
.ans h3{font-family:var(--display);font-weight:800;font-stretch:84%;font-size:38px;line-height:.98;letter-spacing:-.01em;margin:14px 0 12px}
.ans p{color:var(--ink-2)}
.facts{list-style:none;margin:20px 0 24px;border-top:1px solid var(--line)}
.facts li{display:grid;grid-template-columns:118px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px}
.facts li span{color:var(--ink-2);font:600 11px/1.9 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.go{margin-top:auto;display:flex;gap:10px;flex-wrap:wrap}

/* ---------- section scaffolding ---------- */
.sec{padding:112px 0}
.sec.white{background:var(--card);border-block:1px solid var(--line)}
.shead{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:end;margin-bottom:44px}
.shead h2{font-family:var(--display);font-weight:800;font-stretch:82%;font-size:clamp(40px,4.6vw,68px);line-height:.94;letter-spacing:-.02em}
.shead h2 span{color:var(--kblue)}
.shead p{color:var(--ink-2);font-size:17px;max-width:46ch}

/* ---------- 01 service ---------- */
.svc-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:start}
.sheet{background:var(--card);border:1px solid var(--line)}
.sheet-h{display:grid;grid-template-columns:52px 1fr 150px;gap:16px;padding:12px 22px;border-bottom:1px solid var(--line);color:var(--ink-2)}
.row{display:grid;grid-template-columns:52px 1fr 150px;gap:16px;padding:24px 22px;border-bottom:1px solid var(--line);align-items:start}
.row:last-child{border-bottom:0}
.row .n{font-family:var(--cond);font-weight:700;font-size:34px;line-height:.9;color:var(--kblue)}
.row h3{font-family:var(--display);font-stretch:90%;font-weight:700;font-size:23px;line-height:1.1;margin-bottom:6px}
.row p{color:var(--ink-2);font-size:15.5px}
.row .tlink{margin-top:8px;font-size:14.5px}
.where{display:grid;gap:6px;justify-items:start}
.where span{border:1px solid var(--line);padding:6px 9px;color:var(--ink-2);line-height:1.1}
.svc-side{display:grid;gap:24px}
.fig{position:relative;border:1px solid var(--line);background:var(--card);padding:10px 10px 0}
.fig .im{aspect-ratio:4/3;overflow:hidden;background:#223}
.fig .im img{width:100%;height:100%;object-fit:cover}
.fig figcaption{display:flex;justify-content:space-between;gap:12px;padding:12px 4px 12px;color:var(--ink-2)}
.fig figcaption b{color:var(--kblue)}
.down{background:var(--be-deep);color:#fff;padding:26px 26px 24px;position:relative;overflow:hidden}
.down .mono{color:#9fd3f2}
.down h3{font-family:var(--display);font-stretch:84%;font-weight:800;font-size:30px;line-height:1;margin:12px 0 10px}
.down p{color:#c9d6ea;font-size:15.5px;max-width:34ch}
.down .nums{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14);margin-top:20px}
.down .nums a{background:var(--be-deep);padding:14px 16px;text-decoration:none;display:block}
.down .nums a:hover{background:var(--be-mid)}
.down .nums small{display:block;color:#b9c8dc;font:600 12.5px/1.25 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.down .nums b{font:600 17px/1.4 var(--mono);letter-spacing:.02em}
.down .truck{position:absolute;right:-30px;bottom:-24px;width:190px;opacity:.1}

/* ---------- 02 new kinze ---------- */
.lines{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line)}
.line{border-right:1px solid var(--line);display:flex;flex-direction:column;background:var(--card)}
.line:last-child{border-right:0}
.line .ph{aspect-ratio:4/3;overflow:hidden;position:relative;background:#223}
.line .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.line:hover .ph img{transform:scale(1.03)}
.line .ph .mono{position:absolute;left:14px;top:14px;background:rgba(10,24,48,.78);color:#fff;padding:7px 9px}
.line .tx{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.line h3{font-family:var(--cond);font-weight:700;font-size:40px;line-height:.95;text-transform:uppercase}
.line .kick{color:var(--kblue);margin:10px 0 12px}
.line p{color:var(--ink-2);font-size:15.5px}
.line p.kick{font-size:11.5px;line-height:1.5;color:var(--kblue)}
.line .facts{margin:18px 0 20px}
.line .links{margin-top:auto;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:14px}
.line .links a{font-size:14.5px}
.also{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;border:1px solid var(--line);border-top:0;background:var(--card);padding:18px 24px}
.also .mono{color:var(--ink-2)}
.also nav{display:flex;flex-wrap:wrap;gap:6px 26px}
.also a{font-family:var(--cond);font-weight:600;font-size:24px;text-decoration:none;color:var(--ink);text-transform:uppercase;padding:4px 0}
.also a:hover{color:var(--kblue)}

/* ---------- 03 used + trade ---------- */
.used{background:var(--be-deep);color:#fff;position:relative;overflow:hidden}
.used .grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:44px 44px}
.used .wrap{position:relative}
.used .shead h2 span{color:#9fd3f2}
.used .shead p{color:#c9d6ea}
/* the lot (photo, overlaid copy, a named salesperson) beside a light trade-in card with a step track */
.ut{display:grid;grid-template-columns:1.3fr 1fr;gap:24px;align-items:stretch}
.ut-k{font:600 12.5px/1 var(--cond);letter-spacing:.12em;text-transform:uppercase;margin:0 0 12px}
.ut h3{font-family:var(--display);font-weight:700;letter-spacing:-.02em;font-size:34px;line-height:1.05;margin:0 0 12px}
.ut-lot{display:grid;grid-template-rows:1fr auto;border:1px solid rgba(255,255,255,.18);background:var(--be-mid);min-width:0}
.ut-ph{grid-area:1/1;position:relative;min-height:540px;overflow:hidden}
.ut-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:45% 55%}
/* the "On the lot" label sits about halfway up the photo (was 2.8:1 there, 2026-10-22) */
.ut-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,24,48,.96) 0%,rgba(10,24,48,.86) 38%,rgba(10,24,48,.62) 60%,rgba(10,24,48,.12) 82%)}
.ut-body{grid-area:1/1;position:relative;z-index:1;display:flex;flex-direction:column;padding:28px 32px 30px}
.ut-body p{color:#dbe5f2;max-width:52ch}
.ut-lot .ut-k{color:#9fd3f2;margin-top:auto}
.ut-tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.ut-tags li{padding:7px 12px;background:rgba(10,24,48,.78);border:1px solid rgba(255,255,255,.3);font:600 13px/1.2 var(--sans);color:#fff}
.ut-go{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.ut-rep{display:flex;align-items:center;gap:16px;padding:16px 32px;border-top:1px solid rgba(255,255,255,.18)}
.ut-rep .face{width:48px;height:60px;object-fit:cover;object-position:50% 20%;border:1px solid rgba(255,255,255,.3);flex:none}
.ut-rep p{margin:0;line-height:1.35}.ut-rep b{display:block;color:#fff;font-weight:600}.ut-rep span{color:#c9d6ea;font-size:14.5px}
.ut-call{margin-left:auto;display:inline-flex;align-items:center;height:48px;padding:0 16px;border:1px solid rgba(255,255,255,.5);color:#fff;font-weight:700;text-decoration:none;white-space:nowrap}
.ut-call:hover{background:rgba(255,255,255,.12)}
.ut-trade{background:#fff;color:var(--ink-2);padding:34px 34px 30px;display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.used .ut-trade h3{color:var(--ink)}
.ut-trade .ut-k{color:var(--kblue)}
.track{list-style:none;counter-reset:t;margin:24px 0 28px;padding:0;align-self:stretch}
.track li{counter-increment:t;position:relative;display:grid;grid-template-columns:40px 1fr;column-gap:16px;padding-bottom:22px}
.track li:last-child{padding-bottom:0}
.track li::before{content:counter(t);grid-row:span 2;width:40px;height:40px;display:grid;place-items:center;border:2px solid var(--be);background:#fff;color:var(--be);font:700 17px/1 var(--display);position:relative;z-index:1}
.track li:not(:last-child)::after{content:"";position:absolute;left:19px;top:40px;bottom:0;width:2px;background:#c9d3e2}
.track b{color:var(--ink);font:600 18px/1.25 var(--cond);padding-top:2px}
.track span{color:var(--ink-2);font-size:15px}
.ut-trade>.btn{flex:none}
.ut-fin{margin:24px 0 0;padding-top:18px;border-top:1px solid var(--line);align-self:stretch;font-size:15px;color:var(--ink-2)}
@media (min-width:1001px){.ut-fin{margin-top:auto}.ut-trade>.btn{margin-bottom:28px}}
.ut-fin a{color:var(--kblue);font-weight:600;display:inline-block;padding:4px 0}
.ut-fin a.ilink{font-weight:600;text-decoration:none;padding:4px 0}   /* inline links in copy slots render as .ilink; this one keeps its own look */
@media (max-width:1000px){.ut{grid-template-columns:1fr}.ut-ph{min-height:500px}}
@media (max-width:700px){
  .ut h3{font-size:28px}
  .ut-lot{grid-template-rows:auto auto auto}
  .ut-ph{grid-area:auto;min-height:0;aspect-ratio:4/3}
  .ut-ph::after{background:linear-gradient(to top,rgba(22,48,95,.9),rgba(22,48,95,0) 35%)}
  .ut-body{grid-area:auto;padding:22px 20px 24px}
  .ut-tags{order:-1;margin-bottom:18px}
  .ut-lot .ut-k{margin-top:0}
  .ut-go .btn{width:100%;justify-content:space-between}
  .ut-rep{padding:16px 20px;flex-wrap:wrap}
  .ut-call{margin-left:0;width:100%;justify-content:center}
  .ut-trade{padding:26px 20px 24px}
}
.fin{margin-top:18px;color:#b9c8dc;font-size:14.5px}
.fin a{color:#fff;font-weight:700;display:inline-block;padding:3px 0}

/* ---------- 04 visit ---------- */
.visit-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:stretch}
.place-ph{position:relative;min-height:560px;overflow:hidden;background:#223;border:1px solid var(--line)}
.place-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.place-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,14,30,0) 30%,rgba(6,14,30,.92))} /* caption was 4.4:1 at 1024 */
.place-ph .lab{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:26px;color:#fff}
.place-ph .lab .mono{color:#c9d6ea;line-height:1.6}
.place-ph .lab b{display:block;font-family:var(--cond);font-weight:700;font-size:40px;line-height:.95;text-transform:uppercase;margin-top:10px;max-width:16ch}
.place-ph .lab p{color:#dfe7f2;font-size:15px;margin-top:10px;max-width:46ch}
.vcard{background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column}
.vblock{padding:22px 24px;border-bottom:1px solid var(--line)}
.vblock:last-child{border-bottom:0}
.vblock>.mono{color:var(--ink-2);display:flex;justify-content:space-between;align-items:center;gap:10px}
.now{display:inline-flex;align-items:center;gap:8px;color:var(--ink)}
.now i{width:8px;height:8px;border-radius:50%;background:var(--ink-2)}
.now i.on{background:var(--ok)}.now i.off{background:var(--shut)}
.addr{font-family:var(--display);font-stretch:88%;font-weight:700;font-size:28px;line-height:1.1;margin-top:12px}
.addr small{display:block;font:500 15px var(--sans);color:var(--ink-2);margin-top:4px}
.vbtns{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.week{display:grid;grid-template-columns:repeat(7,1fr);border:1px solid var(--line);margin-top:14px}
.week div{padding:10px 0 11px;text-align:center;border-right:1px solid var(--line);color:var(--ink-2)}
.week div:last-child{border-right:0}
.week b{display:block;font:600 12.5px/1.5 var(--mono);color:var(--ink)}
.week small{font:500 10.5px var(--mono)}
.week div.today{background:var(--be);color:#c9d6ee}.week div.today b{color:#fff}
.note{color:var(--ink-2);font-size:14px;margin-top:12px}
.drive{list-style:none;counter-reset:d;margin-top:12px}
.drive li{counter-increment:d;display:grid;grid-template-columns:36px 1fr;padding:8px 0;border-bottom:1px solid var(--line);font-size:15.5px}
.drive li:last-child{border-bottom:0}
.drive li::before{content:counter(d,decimal-leading-zero);font:600 12px/2 var(--mono);color:var(--kblue)}
.counties{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.counties span{border:1px solid var(--line);padding:8px 12px;font-weight:600;font-size:15px}

/* ---------- 05 team ---------- */
.team{border:1px solid var(--line);background:var(--card)}
.team-h,.mate{display:grid;grid-template-columns:64px 1.1fr 1.1fr 1fr 1.3fr;gap:18px;align-items:center;padding:16px 24px;border-bottom:1px solid var(--line)}
.team-h{color:var(--ink-2);padding-block:12px}
.mate:last-child{border-bottom:0}
.mono-face{width:48px;height:48px;background:var(--be);color:#fff;display:grid;place-items:center;font:700 16px var(--mono);letter-spacing:.04em}
.mate h3{font-family:var(--display);font-stretch:90%;font-weight:700;font-size:21px;line-height:1.1}
.mate .role{color:var(--ink-2);font-size:15px}
.mate a{text-decoration:none;font:600 14.5px var(--mono);letter-spacing:.01em;padding:8px 0;display:inline-block;overflow-wrap:anywhere}
.mate a:hover{color:var(--kblue);text-decoration:underline}
.mate .em{font-family:var(--sans);font-weight:500}

/* ---------- footer ---------- */
footer{background:var(--be-deep);color:#c3cfe2;font-size:15px}
.f-top{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:32px;padding:64px 0 48px}
.f-top img{height:44px;width:auto;margin-bottom:18px}
.nap{font-style:normal;line-height:1.7}
.nap b{color:#fff}
.f-top .fh{font:600 12.5px/1.25 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#fff;margin-bottom:14px}
.f-top ul{list-style:none;display:grid;gap:2px}
.f-top a{text-decoration:none;padding:5px 0;display:inline-block}
.f-top a:hover{color:#fff;text-decoration:underline}
.f-bot{border-top:1px solid rgba(255,255,255,.14);padding:20px 0 28px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:#9fb0c8;font-size:14px}
.f-bot a{text-decoration:none;padding:4px 0;display:inline-block}
.f-bot a:hover{color:#fff}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .photo .body{grid-template-columns:1fr;gap:20px}
  /* one column puts the label and headline mid-photo, over the hoses and shop lights: the
     headline was 2.6:1 at 375, the label 2.2:1 at 768 (2026-10-22) */
  .photo::after{background:
    linear-gradient(180deg,rgba(6,14,30,.62) 0%,rgba(6,14,30,.5) 24%,rgba(6,14,30,.58) 50%,rgba(6,14,30,.9) 100%),
    linear-gradient(90deg,rgba(6,14,30,.55),rgba(6,14,30,.1) 75%)}
  .panel{grid-template-columns:1fr}.vis{min-height:300px;border-right:0;border-bottom:1px solid var(--line)}
  .shead{grid-template-columns:1fr;gap:16px}
  .svc-grid,.visit-grid{grid-template-columns:1fr}
  .lines{grid-template-columns:1fr}.line{border-right:0;border-bottom:1px solid var(--line)}.line:last-child{border-bottom:0}
  .line .ph{aspect-ratio:16/9}
  .team-h{display:none}.mate{grid-template-columns:56px 1fr;gap:4px 16px}.mate .mono-face{grid-row:span 4}
  .f-top{grid-template-columns:1fr 1fr}
}
/* Tablets: the one-column home tab photo was a 3.3-3.8:1 strip that cut heads off (Jacob, Service tab). Not on phones: min-height + aspect-ratio would widen it past the screen. */
@media (min-width:701px) and (max-width:1000px){.vis{aspect-ratio:2/1}}
@media (max-width:700px){
  .wrap{width:calc(100% - 32px)}
  .photo{min-height:660px}.photo .body{padding-bottom:178px}.side p{font-size:15.5px}
  .chooser{margin-top:-150px}.ask h2{font-size:20px}.ask .mono{display:none}
  .doors{grid-template-columns:1fr 1fr}.door:nth-child(2){border-right:0}.door:nth-child(-n+2){border-bottom:1px solid var(--line)}.door{min-height:0;padding:14px}.door small{display:none}.door b{font-size:20px}
  .vis{min-height:230px}.vis .horizon{bottom:60px}.vis .cut{bottom:40px}.ans{padding:22px}.ans h3{font-size:30px}.facts li{grid-template-columns:96px 1fr}
  .btn{flex:1;justify-content:center;padding:0 12px}
  .sec{padding:72px 0}
  .sheet-h{display:none}.row{grid-template-columns:40px 1fr;padding:20px 16px}.row .where{grid-column:2;display:flex;flex-wrap:wrap}
  .place-ph{min-height:420px}.place-ph .lab b{font-size:32px}.place-ph .lab .mono{display:block;line-height:1.6}
  .down .nums{grid-template-columns:1fr}.down .nums b{white-space:nowrap}
  .week small{display:none}
  .also{grid-template-columns:1fr;gap:10px}.also a{font-size:21px}
  .f-top{grid-template-columns:1fr}
}

/* =====================================================================
   Interior pages (added with the full site build, 2026-09-25)
   ===================================================================== */
.shead p.more{margin-top:14px}
.nav a[aria-current="page"]{color:#9fd3f2;box-shadow:inset 0 -2px 0 #9fd3f2}
.skip{position:absolute;left:-9999px;top:0;z-index:50;background:#fff;color:var(--be-deep);padding:12px 16px;font-weight:700}
.skip:focus{left:16px;top:16px}

/* page hero: shorter photo band under the same transparent header */
.phero{position:relative;min-height:460px;color:#fff;background:var(--be-deep);overflow:hidden;display:flex;flex-direction:column}
.phero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phero::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(6,14,30,.7) 0%,rgba(6,14,30,.25) 34%,rgba(6,14,30,.35) 55%,rgba(6,14,30,.9) 100%),
  linear-gradient(90deg,rgba(6,14,30,.7),rgba(6,14,30,.1) 70%)}
.phero .wrap{position:relative;z-index:1}
.phero .inner{margin-top:auto;padding:120px 0 56px;display:grid;grid-template-columns:1.4fr .6fr;gap:44px;align-items:end}
.crumbs{list-style:none;display:flex;flex-wrap:wrap;gap:6px 10px;color:#c9d6ea;margin-bottom:20px}
.crumbs li{display:flex;align-items:center;gap:10px}
.crumbs li+li::before{content:"/";opacity:.6}
.crumbs a{text-decoration:none;padding:7px 0;display:inline-block}
.crumbs a:hover{color:#fff;text-decoration:underline}
.crumbs [aria-current]{color:#fff}
.phero h1{font-size:clamp(46px,6vw,92px)}
.phero .lede{color:#eef3f9;font-size:17px;max-width:40ch;text-shadow:0 1px 12px rgba(0,0,0,.45)}
.phero .go{margin-top:20px}

/* jump links under an interior hero */
.jump{background:var(--card);border-bottom:1px solid var(--line)}
.jump .wrap{display:flex;gap:4px;overflow-x:auto;scrollbar-width:thin}
.jump a{flex:none;text-decoration:none;padding:18px 16px;font-weight:600;font-size:15px;border-right:1px solid var(--line);display:flex;gap:10px;align-items:center}
.jump a:first-child{border-left:1px solid var(--line)}
.jump a:hover{background:color-mix(in srgb,var(--kblue) 6%,transparent)}
.jump a .mono{color:var(--kblue)}

/* prose and split layouts */
.prose p{color:var(--ink-2);font-size:17px;max-width:66ch}
.prose p+p{margin-top:14px}
.prose h3{font-family:var(--display);font-stretch:88%;font-weight:700;font-size:26px;line-height:1.1;margin:30px 0 10px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.split.rev>:first-child{order:2}
.split .fig{align-self:stretch}
.split .fig .im{aspect-ratio:auto;height:calc(100% - 44px);min-height:320px}
.anchor{scroll-margin-top:24px}

/* info blocks: a bordered row of facts */
.blocks{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);background:var(--card)}
.blocks.two{grid-template-columns:repeat(2,1fr)}
.blocks.four{grid-template-columns:repeat(4,1fr)}
.blk{padding:26px 24px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.blk:last-child{border-right:0}
.blk>.mono{color:var(--kblue)}
.blk h3{font-family:var(--display);font-stretch:88%;font-weight:700;font-size:23px;line-height:1.1}
.blk p{color:var(--ink-2);font-size:15.5px}
.blk .tlink{margin-top:auto;font-size:14.5px}

/* navy call-out band */
.band{background:var(--be-deep);color:#fff;padding:56px 0;position:relative;overflow:hidden}
.band .wrap{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center}
.band .mono{color:#9fd3f2}
.band h2{font-family:var(--display);font-stretch:84%;font-weight:800;font-size:clamp(30px,3.4vw,46px);line-height:1;margin:10px 0 10px}
.band p{color:#c9d6ea;max-width:52ch}
.band .go{margin:0}

/* forms */
.form-wrap{display:grid;grid-template-columns:1.35fr .65fr;gap:24px;align-items:start}
.form{background:var(--card);border:1px solid var(--line)}
.form fieldset{border:0;border-bottom:1px solid var(--line);padding:26px 28px 28px;min-width:0}
.form legend{font:600 12.5px/1.25 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--kblue);padding:0;margin-bottom:18px;float:left;width:100%}
.form legend+*{clear:both}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.fgrid .full{grid-column:1/-1}
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field label,.field .lab{font-weight:600;font-size:15px}
.field .req{color:var(--shut);margin-left:3px}
.field .hint{color:var(--ink-2);font-size:13.5px}
.field input,.field select,.field textarea{font:500 16px var(--sans);color:var(--ink);background:#fff;border:1px solid #9aabbd;border-radius:0;padding:12px 13px;min-height:48px;width:100%}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--sky);outline-offset:0;border-color:var(--be)}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--shut)}
.choice{display:flex;gap:10px;flex-wrap:wrap}
.choice label{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);padding:0 16px;min-height:48px;font-weight:600;cursor:pointer}
.choice input{width:18px;height:18px;accent-color:var(--be)}
.form .submit{padding:24px 28px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.form .submit .btn{cursor:pointer;font-family:var(--sans)}
.form-status{font-size:15px;color:var(--ink-2);flex:1;min-width:220px}
.form-status.err{color:var(--shut);font-weight:600}
.form-status.ok{color:var(--ok);font-weight:600}
.form-note{color:var(--ink-2);font-size:13.5px;padding:0 28px 22px}
.aside{display:grid;gap:24px}

/* simple contact list */
.clist{list-style:none;border-top:1px solid var(--line)}
.clist li{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.clist small{display:block;color:var(--ink-2);font:600 11px/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.clist a{text-decoration:none;font:600 15px var(--mono);padding:6px 0;display:inline-block}
.clist a:hover{color:var(--kblue);text-decoration:underline}

/* 404 */
.nf{padding:200px 0 120px;background:var(--be-deep);color:#fff}
.nf .mono{color:#9fd3f2}
.nf h1{margin:18px 0 20px}
.nf p{color:#c9d6ea;max-width:46ch}
.nf .go{margin-top:24px}

@media (max-width:1000px){
  .phero .inner{grid-template-columns:1fr;gap:18px}
  .split,.form-wrap{grid-template-columns:1fr;gap:28px}
  .split.rev>:first-child{order:0}
  .blocks,.blocks.four{grid-template-columns:1fr 1fr}
  .blocks .blk:nth-child(2n){border-right:0}
  .blocks .blk{border-bottom:1px solid var(--line)}
  .band .wrap{grid-template-columns:1fr}
}
@media (max-width:700px){
  .phero{min-height:440px}.phero .inner{padding:112px 0 40px}
  /* phones: the kicker and headline sit mid-hero, where the desktop wash is thinnest; a bright
     photo put the 12.5px kicker at 3.1:1 (About) and 3.7:1 (New Kinze), 2026-10-21 */
  .phero::after{background:
    linear-gradient(180deg,rgba(6,14,30,.7) 0%,rgba(6,14,30,.55) 34%,rgba(6,14,30,.6) 55%,rgba(6,14,30,.9) 100%),
    linear-gradient(90deg,rgba(6,14,30,.7),rgba(6,14,30,.1) 70%)}
  .blocks,.blocks.two,.blocks.four{grid-template-columns:1fr}.blk{border-right:0}
  .fgrid{grid-template-columns:1fr}
  .form fieldset{padding:22px 18px 24px}.form .submit{padding:20px 18px}.form-note{padding:0 18px 20px}
  .split .fig .im{min-height:240px}
}
.prose p.mono{font-size:11.5px;line-height:1.5;margin-bottom:6px}
.prose .h2s{font-family:var(--display);font-weight:800;font-stretch:82%;font-size:clamp(32px,3.4vw,50px);line-height:.96;letter-spacing:-.02em;margin:12px 0 18px}
.prose .facts{margin:22px 0 26px;max-width:560px}
.prose .go{margin-top:0}
.nf p a{display:inline-block;padding:4px 0}
.ilink{color:var(--kblue);font-weight:700;text-decoration:underline;text-underline-offset:3px;display:inline-block;padding:3px 0}
/* phone numbers in words are tap-to-call (build_site.py tel_links, 2026-10-22) */
a.tel-link{color:var(--kblue);font-weight:600;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}

/* ---- live-site assets: team photos, brand logos, map (2026-09-25) ---- */
.team-h,.mate{grid-template-columns:72px 1.1fr 1.1fr 1fr 1.3fr}
.mate .face{width:56px;height:70px;object-fit:cover;object-position:50% 20%;background:var(--stage);border:1px solid var(--line)}
@media (max-width:1000px){.mate{grid-template-columns:64px 1fr}.mate .face{grid-row:span 4}}
.crew{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);background:var(--card)}
.card-p{border-right:1px solid var(--line);display:flex;flex-direction:column}
.card-p:last-child{border-right:0}
.card-p .ph{aspect-ratio:4/5;overflow:hidden;background:var(--stage);border-bottom:1px solid var(--line)}
.card-p .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.card-p .tx{padding:20px 20px 22px;display:flex;flex-direction:column;gap:2px}
.card-p h3{font-family:var(--display);font-stretch:90%;font-weight:700;font-size:22px;line-height:1.1}
.card-p .role{color:var(--ink-2);font-size:14.5px;margin-bottom:12px;min-height:2.6em}
.card-p a{text-decoration:none;font:600 14.5px var(--mono);padding:8px 0;border-top:1px solid var(--line);overflow-wrap:anywhere}
.card-p a small{display:block;font:600 12.5px/1.25 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.card-p a.em{font-family:var(--sans);font-weight:500;font-size:14px}
.card-p a:hover{color:var(--kblue)}
@media (max-width:1000px){.crew{grid-template-columns:1fr 1fr}.card-p:nth-child(2n){border-right:0}.card-p:nth-child(-n+2){border-bottom:1px solid var(--line)}}
@media (max-width:520px){.crew{grid-template-columns:1fr}.card-p{border-right:0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:120px 1fr}.card-p .ph{aspect-ratio:auto;border-bottom:0;border-right:1px solid var(--line)}.card-p:last-child{border-bottom:0}.card-p .role{min-height:0}}
.logos{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));border:1px solid var(--line);background:#fff}
.logo-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:30px 22px 18px;border-right:1px solid var(--line);text-decoration:none;min-height:150px}
.logo-tile:last-child{border-right:0}
.logo-tile img{max-height:58px;max-width:100%;width:auto;object-fit:contain;filter:grayscale(1) contrast(1.1);opacity:.85;transition:filter .2s,opacity .2s}
.logo-tile:hover img{filter:none;opacity:1}
.logo-tile .mono{color:#45556b}
.also .logos{border:0;grid-template-columns:repeat(4,1fr)}
.also .logo-tile{min-height:0;padding:10px 18px;flex-direction:row;gap:0}
.also .logo-tile .mono{position:absolute;left:-9999px}
.also .logo-tile img{max-height:40px}
@media (max-width:700px){.also .logos{grid-template-columns:1fr 1fr}.also .logo-tile{border-right:0}}
.fig .im.contain{background:#fff}
.fig .im.contain img{object-fit:contain}
.mapfig{border-bottom:1px solid var(--line);background:#fff}
.mapfig img{width:100%;height:auto}
.mapfig figcaption{padding:10px 24px;color:var(--ink-2);border-top:1px solid var(--line)}
.mapfig figcaption b{color:var(--kblue)}

/* side panels stay with the reader beside long forms and lists */
@media (min-width:1001px){
  .form-wrap .aside,.svc-side{position:sticky;top:var(--stick,24px);transition:top .25s;align-self:start}
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* =====================================================================
   KINZE BRAND TYPE (2026-09-25). Jason: the earlier fonts (Archivo,
   Barlow Condensed, Manrope, JetBrains Mono) were not Kinze's. These are the
   four approved Kinze typefaces per KINZE_DESIGN_SYSTEM.md, the same set the
   Kinze Website 2027 build uses:
     Roboto Slab 700     headlines (slab is structural: headings only)
     Work Sans           body and secondary text, including phone numbers
     Roboto Condensed    small uppercase labels (the Trade Gothic stand-in)
     Alfa Slab One       large numerals only (the Chunk Five stand-in)
   Redefining the old tokens keeps every existing rule pointing somewhere
   valid; the overrides below fix what the old faces were sized for.
   ===================================================================== */
:root{
  --display:"Roboto Slab",Rockwell,Georgia,serif;
  --cond:"Roboto Slab",Rockwell,Georgia,serif;
  --sans:"Work Sans",-apple-system,"Segoe UI",Arial,sans-serif;
  --mono:"Roboto Condensed","Arial Narrow",Arial,sans-serif;
  --num:"Alfa Slab One","Roboto Slab",Georgia,serif;
}
*{font-stretch:normal!important}
body{font-family:var(--sans);font-size:16.5px}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.01em}
h1{text-transform:none;font-size:clamp(44px,5.6vw,84px);line-height:1.02}
.phero h1{font-size:clamp(38px,4.6vw,70px)}
.nf h1{font-size:clamp(40px,5vw,72px)}
h1 .place{font:700 14px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;margin-bottom:18px}
.mono{font:700 12.5px/1.25 var(--mono);letter-spacing:.07em;text-transform:uppercase}
.prose p.mono{font-size:12.5px}
.line p.kick{font-size:12.5px}
.shead h2{font-size:clamp(34px,3.8vw,56px);line-height:1.05}
.prose .h2s{font-size:clamp(30px,3vw,44px);line-height:1.08}
.ans h3{font-size:32px;line-height:1.08}
.ask h2{font-size:22px}
.door b{font-family:var(--display);font-size:22px;font-weight:700}
.row .n,.svc-n{font-family:var(--num);font-weight:400;font-size:28px;line-height:1}
.row h3,.blk h3,.mate h3,.card-p h3,.person h3{font-weight:700;letter-spacing:0}
.line h3{text-transform:none;font-size:30px;line-height:1.05}
.place-ph .lab b{text-transform:none;font-size:34px;line-height:1.05}
.also a{text-transform:none}
.addr{font-size:26px}
.down h3,.band h2,.hours-card h3{font-weight:700}
.btn{font-family:var(--sans);font-weight:600}
.nav a,.find{font-family:var(--sans);font-weight:600}
.tel{font:600 14px var(--sans);letter-spacing:.02em}
/* phone numbers and emails read as text, not code */
.down .nums b,.mate a,.card-p a,.clist a,.lines .v{font-family:var(--sans);font-weight:600;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.down .nums b{font-size:18px}
.facts li span,.sheet-h,.team-h,.where span,.fh,.crumbs{font-family:var(--mono);font-weight:700;letter-spacing:.06em}
.facts li span{font-size:12px}
.form legend{font:700 12.5px/1.2 var(--mono);letter-spacing:.07em}
.field label,.field .lab{font-family:var(--sans)}

/* ---- hours: one table, today highlighted (replaces the 7-day grid) ---- */
.htable{width:100%;border-collapse:collapse;margin-top:14px}
.htable th,.htable td{padding:12px 12px;border-bottom:1px solid var(--line);text-align:left;font-size:16px}
.htable th{font-weight:600;color:var(--ink)}
.htable td{text-align:right;color:var(--ink-2);font-variant-numeric:tabular-nums}
.htable tr.today th,.htable tr.today td{background:color-mix(in srgb,var(--kblue) 8%,transparent);color:var(--ink)}
.htable tr.today th::after{content:"Today";margin-left:10px;font:700 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--be);padding:4px 7px;vertical-align:2px}
.hours-note{color:var(--ink-2);font-size:14.5px;margin-top:12px}
.clist li{padding:12px 0}
.clist small{font:600 12.5px/1.25 var(--mono);letter-spacing:.08em}
.clist span{font-weight:600}
@media (min-width:1001px){.visit-grid{align-items:start}.visit-grid>.vcard:last-child{position:sticky;top:var(--stick,24px);transition:top .25s}}
@media (max-width:700px){.htable th,.htable td{padding:11px 8px;font-size:15px}.htable td{white-space:nowrap}.htable tr.today th::after{display:inline-block;margin:6px 0 0;}}

/* =====================================================================
   TYPE = KINZE WEBSITE 2027, VARIATION A (Jason, 2026-09-25: "Lets do
   inter/archivo"). Supersedes the Kinze-brand block above. Measured from
   Variation A's rendered page: headlines Archivo 700 at normal width,
   tracked about -0.025em; subheads Archivo 600; body, nav and buttons
   Inter. Variation A sets its small uppercase labels in a system monospace;
   here they are Archivo 600 instead (Variation C's choice), because Jason
   did not like the code-style labels.
   ===================================================================== */
:root{
  --display:"Archivo",system-ui,sans-serif;
  --cond:"Archivo",system-ui,sans-serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --mono:"Archivo",system-ui,sans-serif;
  --num:"Archivo",system-ui,sans-serif;
}
body{font-family:var(--sans);font-size:16px}
h1,h2{font-family:var(--display);font-weight:700;letter-spacing:-.025em}
h3{font-family:var(--display);font-weight:600;letter-spacing:-.01em}
h1{line-height:1.02}
.shead h2,.prose .h2s{letter-spacing:-.025em;line-height:1.04}
.ans h3,.down h3,.band h2{font-weight:700;letter-spacing:-.02em}
.door b,.line h3,.place-ph .lab b,.addr{font-family:var(--display);font-weight:700;letter-spacing:-.015em}
.row .n,.svc-n{font-family:var(--display);font-weight:800;font-size:30px;letter-spacing:-.02em}
.mono,h1 .place,.form legend,.facts li span,.sheet-h,.team-h,.where span,.fh,.crumbs,.clist small,.htable tr.today th::after,.card-p a small,.down .nums small{font-family:var(--mono);font-weight:600;letter-spacing:.08em}
.btn,.nav a,.find,.tel,.field label,.field .lab{font-family:var(--sans)}
.down .nums b,.mate a,.card-p a,.clist a{font-family:var(--sans);font-weight:600}

/* =====================================================================
   TEXT COLOR RAMP (2026-09-25). Jason: "font colors are different and
   weird." Cause: headings and list values were a violet-leaning near-black
   (#0b1a33) while paragraphs and labels were a cool slate (#45556b), two hue
   families, and list values rendered darker than the paragraph above them.
   Now one ramp on the Blue Equipment logo navy hue (220):
     --ink    #111f3b  headings, names, anything that is a title   16.4:1
     --ink-2  #404d68  all reading text, list values included         8.5:1
     --ink-3  #5a6781  small uppercase labels, captions, roles        5.7:1 (4.7 on the darkest light panel)
   Kinze blue (--kblue) stays for links, accents and the blue half of
   two-tone headlines. Contrast measured on white, --paper and --stage.
   ===================================================================== */
:root{--ink:#111f3b;--ink-2:#404d68;--ink-3:#5a6781}
body{color:var(--ink-2)}
h1,h2,h3,.door b,.addr,.mate h3,.card-p h3,.htable th,.clist span,.field label,.field .lab,.blk h3,.row h3,.line h3{color:var(--ink)}
.facts li{color:var(--ink-2)}
.htable td{color:var(--ink-2)}
.door .mono,.cap,.facts li span,.sheet-h,.where span,.fig figcaption,.vblock>.mono,.team-h,.clist small,.also .mono,.card-p a small,.logo-tile .mono,.mapfig figcaption,.mate .role,.card-p .role,.hours-note,.note,.form-note,.field .hint{color:var(--ink-3)}
.cap b,.fig figcaption b,.mapfig figcaption b{color:var(--kblue)}
.mate a,.card-p a,.clist a,.down .nums b{color:inherit}
.mate a,.card-p a,.clist a{color:var(--ink)}
/* dark grounds keep their own light text */
.photo,.phero,.used,.down,.band,.nf,footer,.place-ph .lab,.door[aria-selected="true"]{color:#fff}
.door[aria-selected="true"] b{color:#fff}
/* headings and titles on dark grounds stay white (the ramp above must not reach them) */
.photo h1,.phero h1,.used h2,.used h3,.down h3,.band h2,.nf h1,.place-ph .lab b,.ask h2,.door[aria-selected="true"] b,footer .nap b{color:#fff}
.photo h1 .b,.phero h1 .b,.nf h1 .b{color:#9fd3f2}
.used .shead h2 span{color:#9fd3f2}
/* contrast fixes found by the scan: small blue caption text on the grey stage, and the blue link on the navy used band */
.cap b{color:#005f87}
.used .tlink{color:#9fd3f2}

/* Visit photo = the Blue Equipment building (2026-09-25, replaced the Kinze
   campus aerial). It is a 3:1 panorama, so hold the crop on the big wall sign
   (about 30% across) instead of the centre, which lands on blank siding. The
   photo is the short column beside a tall card, so it is the one that sticks. */
.place-ph img{object-position:30% 50%}
@media (min-width:1001px){.visit-grid>.place-ph{position:sticky;top:var(--stick,24px);transition:top .25s}}
/* Stacked: the caption covers the lower half of the box, where the sign would
   land. Pin the photo to the top 64% and fade it into the caption ground. */
@media (max-width:1000px){
  .place-ph{background:#060e1e}
  .place-ph img{bottom:auto;height:64%;-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent)}
}

/* ---------- route map (contact page, 2026-09-25) ----------
   Hand-drawn vector of the Kinze campus, traced from an aerial for layout only
   (no map imagery is embedded, so no tile licence or attribution applies).
   Without JS the whole route is drawn. site.js adds .js, hides the line and
   drives it step by step; reduced motion jumps straight to the end. */
.route{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr);border:1px solid var(--line);background:var(--card);margin-bottom:24px;scroll-margin-top:24px}
.rmap{position:relative;border-right:1px solid var(--line);background:#e6ecf1;overflow:hidden}
.rmap svg{display:block;width:100%;height:auto}
.rmap figcaption{position:absolute;left:16px;top:16px;background:rgba(255,255,255,.92);border:1px solid var(--line);padding:8px 12px}
.rmap .rt-land .cp{fill:#eef2f5;stroke:#c3cdd8;stroke-width:3;stroke-dasharray:10 8}
.rmap .rt-land .g{fill:#dde6dc}
.rmap .rt-land .lot{fill:#e2e8ee}
.rmap .rt-land .w{fill:#b8d2e6}
.rt-bld path{fill:#c7d1dc;stroke:#a9b6c5;stroke-width:1.5}
.rmap .rt-be{fill:var(--be);transition:fill .6s}
.rt-cas path,.rt-rd path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.rt-cas path{stroke:#bfcad6;stroke-width:13}.rt-rd path{stroke:#fff;stroke-width:8}
.rt-cas .l{stroke-width:18}.rt-rd .l{stroke-width:12}
.rt-cas .m{stroke-width:24}.rt-rd .m{stroke-width:17}
.rt-cas .h{stroke-width:24}.rt-rd .h{stroke-width:17}
.rt-lbl text{font:600 26px var(--sans);fill:var(--ink-2);paint-order:stroke;stroke:#e6ecf1;stroke-width:7px;stroke-linejoin:round}
.rt-lbl .k{font-weight:700;fill:var(--ink)}
.rmap .sh{font:700 25px var(--sans);fill:#fff}
.rt-scale path{fill:none;stroke:var(--ink-2);stroke-width:3}.rt-scale text{font:600 20px var(--sans);fill:var(--ink-2)}
.rmap .rt-attr{position:absolute;right:0;bottom:0;background:rgba(255,255,255,.9);padding:0 8px;font-size:11.5px;line-height:1.4;color:var(--ink-3)}
.rmap .rt-attr a{color:var(--ink-2);display:inline-block;padding:5px 0}
.rt-n path{fill:var(--ink-2)}.rt-n text{font:700 24px var(--sans);fill:var(--ink-2)}
.rt-ws{fill:var(--be)}
.rt-ghost{fill:none;stroke:var(--kblue);stroke-width:6;stroke-dasharray:2 15;stroke-linecap:round;opacity:.45}
.rt-glow{fill:none;stroke:var(--sky);stroke-width:26;stroke-linecap:round;stroke-linejoin:round;opacity:.22}
.rt-line{fill:none;stroke:var(--sky);stroke-width:10;stroke-linecap:round;stroke-linejoin:round}
.rt-mk circle{fill:var(--be);stroke:#fff;stroke-width:5}
.rt-mk path{fill:none;stroke:#fff;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.rt-drv circle{fill:var(--be);stroke:#fff;stroke-width:4}
.rt-drv text{font:700 24px var(--sans);fill:#fff}
.rt-drv .rt-turn{fill:var(--be);paint-order:stroke;stroke:#e6ecf1;stroke-width:7px}
.rt-dot{fill:#fff;stroke:var(--sky);stroke-width:4}
.rt-pulse{fill:none;stroke:var(--sky);stroke-width:5;opacity:0;transform-box:fill-box;transform-origin:center}
/* JS states */
.route.js .rt-drv{opacity:0;transform:scale(.4);transform-box:fill-box;transform-origin:center;transition:opacity .25s,transform .45s cubic-bezier(.3,1.7,.5,1)}
.route.js .rt-drv.on{opacity:1;transform:none}
.route.js .rt-drv .rt-turn{opacity:0;transition:opacity .3s .25s}
.route.js .rt-drv.last.on .rt-turn{opacity:1}
.route.js .rt-dot{transition:fill .25s}
.route.js .rt-dot:not(.on){fill:#fff}
.route.js .rt-dot.on{fill:var(--sky)}
.route.js:not(.done) .rt-be{fill:#8a9bb3}
.route.done .rt-pulse{animation:rtPulse 2s ease-out infinite}
.route.done .rt-pulse.p2{animation-delay:1s}
@keyframes rtPulse{0%{opacity:.85;transform:scale(1)}100%{opacity:0;transform:scale(3.2)}}
/* step rail */
.rrail{display:flex;flex-direction:column;min-width:0}
.rrail-h{display:flex;justify-content:space-between;gap:10px;padding:22px 24px 16px;border-bottom:1px solid var(--line);color:var(--ink-3)}
.rsteps{list-style:none;flex:1}
.rstep{appearance:none;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;width:100%;display:grid;grid-template-columns:40px 1fr;gap:4px;padding:16px 24px 17px;border-bottom:1px solid var(--line);position:relative;transition:background .2s}
.rstep:hover{background:color-mix(in srgb,var(--kblue) 5%,#fff)}
.rstep .n{color:var(--kblue);line-height:1.7}
.rstep b{display:block;font:700 16.5px/1.3 var(--display);color:var(--ink);letter-spacing:-.01em}
.rstep small{display:block;margin-top:4px;font-size:14px;line-height:1.45;color:var(--ink-3)}
.rstep .bar{position:absolute;left:0;bottom:-1px;height:3px;width:calc(var(--p,0) * 100%);background:var(--sky)}
.rstep[aria-current="step"]{background:color-mix(in srgb,var(--kblue) 8%,#fff)}
.rstep[aria-current="step"]::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--be)}
.rfoot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;padding:18px 24px}
.rfoot .btn{background:none;font-family:inherit;color:var(--ink);cursor:pointer}
.rfoot .btn:hover{color:#fff}
@media (max-width:1000px){.route{grid-template-columns:1fr}.rmap{border-right:0;border-bottom:1px solid var(--line)}}
@media (max-width:700px){.rt-lbl text{font-size:30px}.rmap figcaption{display:none}.rrail-h{padding:18px 20px 14px}.rstep{padding:14px 20px 15px}.rfoot{padding:16px 20px}}
@media (prefers-reduced-motion:reduce){.route.done .rt-pulse{animation:none}}
/* without the script the steps are plain text: hide the controls that need it */
.route:not(.js) [data-replay],.route:not(.js) .rrail-h span+span{display:none}
.route:not(.js) .rstep{cursor:default}
/* route map: approach toggle and the photo cards that pop out at a stop */
.rt-from{display:flex;margin:14px 24px 4px;border:1px solid var(--line)}
.rt-from button{flex:1;appearance:none;border:0;background:#fff;font:600 14px/1.2 var(--sans);color:var(--ink-2);padding:10px 12px;min-height:42px;cursor:pointer;transition:background .2s,color .2s}
.rt-from button+button{border-left:1px solid var(--line)}
.rt-from button:hover{background:color-mix(in srgb,var(--kblue) 6%,#fff)}
.rt-from button[aria-pressed="true"]{background:var(--be);color:#fff}
.rt-card{position:absolute;left:0;top:0;z-index:2;width:250px;background:#fff;border:1px solid var(--line);box-shadow:0 24px 44px -20px rgba(6,14,30,.6);pointer-events:none;
  opacity:0;visibility:hidden;transform:translateY(12px) scale(.9);transform-origin:left center;transition:opacity .25s,transform .45s cubic-bezier(.2,1.4,.4,1),visibility 0s .45s}
.rt-card.flip{transform-origin:right center}
.rt-card.on{opacity:1;visibility:visible;transform:none;transition:opacity .3s,transform .5s cubic-bezier(.2,1.4,.4,1)}
.rt-card img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;background:#fff;clip-path:inset(0 0 100% 0);transition:clip-path .7s .12s cubic-bezier(.3,.7,.2,1)}
.rt-card.on img{clip-path:inset(0)}
.rt-card p{padding:10px 14px 12px;border-top:3px solid var(--sky)}
.rt-card b{display:block;font:700 15px/1.25 var(--display);color:var(--ink)}
.rt-card span{display:block;margin-top:2px;font-size:13px;line-height:1.4;color:var(--ink-3)}
.route:not(.js) .rt-card,.route:not(.js) .rt-from{display:none}
@media (max-width:700px){
  .rt-from{margin:12px 20px 4px}
  .rt-card{left:10px!important;right:10px;top:auto!important;bottom:36px;width:auto;display:grid;grid-template-columns:112px 1fr;align-items:stretch;transform-origin:center bottom}
  .rt-card img{aspect-ratio:auto;height:100%;min-height:76px}
  .rt-card p{border-top:0;border-left:3px solid var(--sky);display:flex;flex-direction:column;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.rt-card,.rt-card.on,.rt-card img{transition:none}}
/* contact page: the address and hours cards sit side by side at one height (Jason, 2026-09-25).
   The homepage Visit grid keeps its sticky photo; only .even stretches. */
.visit-grid.even{align-items:stretch}
.visit-grid.even>.vcard:last-child{position:static}
.visit-grid.even .vcard>.vblock:last-child{flex:1}
@media (max-width:520px){.clist li{grid-template-columns:1fr;gap:4px}}

/* ---------- dealer pass (2026-09-25): quote, parts, trade, financing, quick contact ---------- */
/* header: open or closed right now, beside the phone number (wide screens only) */
.hdr-now{color:#dfe7f2;font:600 13px/1.2 var(--sans);white-space:nowrap}
.hdr-now i{flex:none}
@media (max-width:1320px){.hdr-now{display:none}}
/* phones: fixed quick-contact bar */
.mbar{display:none}
@media (max-width:760px){
  .mbar{display:grid;grid-template-columns:repeat(3,1fr);position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--be-deep);border-top:1px solid rgba(255,255,255,.18);padding-bottom:env(safe-area-inset-bottom)}
  .mbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:58px;color:#fff;text-decoration:none;font:600 12.5px/1.2 var(--sans)}
  .mbar a+a{border-left:1px solid rgba(255,255,255,.14)}
  .mbar a:active{background:var(--be-mid)}
  .mbar svg{width:20px;height:20px;fill:none;stroke:#9fd3f2;stroke-width:2;stroke-linejoin:round}
  body{padding-bottom:calc(58px + env(safe-area-inset-bottom))}
}
/* homepage: trust row under the chooser */
.trust{background:var(--card);border-block:1px solid var(--line)}
.trust ul{list-style:none;display:grid;grid-template-columns:repeat(4,1fr)}
.trust li{padding:20px 22px;border-right:1px solid var(--line)}
.trust li:first-child{padding-left:0}.trust li:last-child{border-right:0}
.trust b{display:block;font:700 17px/1.25 var(--display);color:var(--ink)}
.trust span{display:block;margin-top:3px;font-size:14px;line-height:1.4;color:var(--ink-3)}
@media (max-width:900px){.trust ul{grid-template-columns:1fr 1fr}.trust li{padding:16px 16px 16px 0;border-right:0;border-bottom:1px solid var(--line)}.trust li:nth-child(odd){border-right:1px solid var(--line)}.trust li:nth-child(even){padding-left:16px}.trust li:nth-last-child(-n+2){border-bottom:0}}
/* homepage: services as four links plus the machine-down card */
.svc-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) minmax(300px,1.4fr);border:1px solid var(--line);background:var(--card)}
.svc-link{position:relative;display:flex;flex-direction:column;gap:6px;padding:24px 22px 56px;border-right:1px solid var(--line);text-decoration:none;color:inherit;transition:background .2s}
.svc-link:hover{background:color-mix(in srgb,var(--kblue) 6%,#fff)}
.svc-link .mono{color:var(--kblue)}
.svc-link b{font:700 19px/1.2 var(--display);color:var(--ink)}
.svc-link small{font-size:14.5px;line-height:1.45;color:var(--ink-2)}
.svc-link i{position:absolute;left:24px;bottom:26px;width:9px;height:9px;border-right:2px solid var(--kblue);border-top:2px solid var(--kblue);transform:rotate(45deg);transition:transform .2s}
.svc-link:hover i{transform:translateX(4px) rotate(45deg)}
@media (max-width:1100px){.svc-strip{grid-template-columns:1fr 1fr}.svc-link{border-bottom:1px solid var(--line)}.svc-link:nth-child(even){border-right:0}.svc-strip .down{grid-column:1/-1}}
/* new Kinze: model chips that jump to the quote form */
.models{margin:18px 0 22px}
.models .mono{color:var(--ink-3);margin:12px 0 8px}
.models ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.models a{display:inline-flex;align-items:baseline;gap:8px;min-height:40px;padding:9px 14px;border:1px solid var(--line);background:#fff;text-decoration:none;font:700 15px/1.3 var(--sans);color:var(--ink);transition:border-color .2s,background .2s}
.models a small{font:600 11px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--kblue)}
.models a:hover{border-color:var(--be);background:color-mix(in srgb,var(--kblue) 6%,#fff)}
.prose .more{margin-top:10px}
/* trade-in: step label and the optional second step */
.step-h{color:var(--ink-3);margin:0 0 14px}.step-h b{color:var(--kblue);margin-right:8px}
.more-fields{border:1px solid var(--line);margin:4px 0 22px;background:#fff}
.more-fields summary{list-style:none;cursor:pointer;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:16px 18px;font:700 16px/1.3 var(--display);color:var(--ink);min-height:56px}
.more-fields summary::-webkit-details-marker{display:none}
.more-fields summary .mono{color:var(--ink-3)}.more-fields summary .mono b{color:var(--kblue);margin-right:6px}
.more-fields summary::after{content:"";margin-left:auto;width:9px;height:9px;border-right:2px solid var(--ink-2);border-bottom:2px solid var(--ink-2);transform:rotate(45deg);transition:transform .2s}
.more-fields[open] summary::after{transform:rotate(-135deg)}
.more-fields[open] summary{border-bottom:1px solid var(--line)}
.more-fields fieldset{padding:18px 18px 4px}
/* service request: machine down */
.urgent{margin-top:12px;padding:14px 16px;border-left:4px solid var(--shut);background:color-mix(in srgb,var(--shut) 7%,#fff);color:var(--ink);font-size:15px;line-height:1.5}
.urgent a{color:var(--ink);font-weight:700}
/* service: one line in place of the team table */
.crew-line{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding:22px 24px;border:1px solid var(--line);background:var(--card)}
.crew-line p{color:var(--ink-2);font-size:16px}.crew-line b{color:var(--ink)}
/* about: shop photo row */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:24px}
.gallery figure{background:var(--card);border:1px solid var(--line)}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover}
.gallery figcaption{padding:10px 12px;color:var(--ink-3)}
@media (max-width:900px){.gallery{grid-template-columns:1fr 1fr}}
/* financing: payment estimate */
.est{background:var(--card);border:1px solid var(--line);padding:24px}
.est-out{margin:20px 0 14px;padding:20px 22px;background:var(--be-deep);color:#fff}
.est-out .mono{color:#9fd3f2}
.est-pay{font:700 34px/1.1 var(--display);letter-spacing:-.02em;margin-top:8px;color:#fff}
.est-sub{margin-top:6px;color:#c9d6ea;font-size:15px}
/* service strip, second pass: four links in a row, the machine-down card as a band beneath them */
.svc-strip{grid-template-columns:repeat(4,minmax(0,1fr))}
.svc-strip .down{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,auto);grid-template-areas:"k nums" "h nums" "p go";column-gap:40px;align-items:start}
.svc-strip .down>.mono{grid-area:k}.svc-strip .down>h3{grid-area:h}.svc-strip .down>p:not(.mono){grid-area:p;max-width:52ch}
.svc-strip .down .nums{grid-area:nums;margin-top:0;align-self:start}
.svc-strip .down .go{grid-area:go;margin-top:14px!important;justify-self:end}
@media (max-width:1100px){.svc-strip{grid-template-columns:1fr 1fr}.svc-strip .down{display:block}.svc-strip .down .go{margin-top:14px!important}}
.est .fgrid{align-items:end}
/* padding pass (2026-09-25): everything inside a form sits on the fieldsets' 28px inset */
.form>.step-h{margin:0;padding:24px 28px 0}
.form>.step-h+fieldset{padding-top:18px}
.more-fields{margin:0;border:0;border-bottom:1px solid var(--line);background:none}
.more-fields summary{padding:20px 28px}
.more-fields fieldset,.more-fields[open] fieldset{padding:26px 28px 28px}
.more-fields fieldset:last-child{border-bottom:0}
.est .form-note{padding:0}
@media (max-width:700px){
  .form>.step-h{padding:20px 18px 0}
  .more-fields summary{padding:18px}
  .more-fields fieldset,.more-fields[open] fieldset{padding:22px 18px 24px}
  .est{padding:18px}
}
/* photo cards in a split: the image takes what the caption leaves, so a two-line caption never overflows the card */
.split .fig{display:flex;flex-direction:column}
.split .fig .im{flex:1 1 auto;height:auto}
.fig figcaption{flex-wrap:wrap;row-gap:4px}
/* radio and checkbox pills keep vertical padding when their label wraps */
.choice label{padding:10px 16px}
/* hours: the highlighted "today" row keeps a 12px inset on phones */
@media (max-width:700px){.htable th,.htable td{padding:11px 12px}}
/* map credit: inset from the map corner instead of flush against it */
.rmap .rt-attr{right:8px;bottom:8px;padding:0 10px}
.form>.step-h+fieldset{padding-top:24px}

/* ---------- optimization pass (2026-09-25) ---------- */
/* responsive images: the build wraps photos in <picture>; it draws no box, so every img rule still applies */
picture{display:contents}
.photo>picture>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 56%}
.phero>picture>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* touch screens: every control at least 44px tall, the size Apple and Google recommend for a thumb.
   Gated on the input, not the width, so a narrow desktop window keeps the tighter desktop layout. */
@media (pointer:coarse){
  .find,.burger{min-height:44px}
  .burger{min-width:44px}
  header.site .logo{display:flex;align-items:center;min-height:44px}
  .crumbs a{display:inline-flex;align-items:center;min-height:44px}
  .tlink{min-height:44px}
  .models a{min-height:44px;align-items:center}
  .clist a,.vbtns .btn,.go .btn,.ut-go .btn{min-height:44px}
  .ut-fin a{display:inline-flex;align-items:center;min-height:44px}
  .clist a{display:inline-flex;align-items:center}
  .mate a,.card-p a{display:block;min-height:44px;padding-top:6px;padding-bottom:6px}
  .rt-from button{min-height:48px}
}

/* route toggle on the smallest phones: tighter type so each label keeps its padding */
@media (max-width:360px){.rt-from button{font-size:13px;padding:10px 12px}}

/* print: a clean page of facts, no chrome, no motion states */
@media print{
  header.site,.mbar,.jump,.rt-from,.rfoot,.rt-card,.burger,.hdr-now,.phero>img,.phero>picture,.photo>img,.photo>picture,.band .go,.aside .down,.trust{display:none!important}
  body{background:#fff;color:#000;padding:0}
  .phero,.photo{min-height:0!important;background:#fff!important;color:#000!important;padding:0!important}
  .phero *,.photo *{color:#000!important}
  .phero .inner{padding:0 0 16px!important}
  .sec,.band{padding:18px 0!important;background:#fff!important;color:#000!important}
  .band *{color:#000!important}
  .route .rt-line,.route .rt-glow{stroke-dashoffset:0!important}
  .route .rt-drv{opacity:1!important;transform:none!important}
  footer{background:#fff!important;color:#000!important;border-top:1px solid #999}
  footer *{color:#000!important}
  a[href^="tel:"]::after{content:""}
  .form .submit,.form-note{display:none}
  img{max-width:100%!important}
  section,.vcard,.route,figure{break-inside:avoid}
}
@media print{
  section,.sec{break-inside:auto!important}
  .vcard,figure,.blk,.card-p,.rmap{break-inside:avoid}
  .phero::before,.phero::after,.photo::before,.photo::after,.phero .go,.photo .go{display:none!important}
  .phero,.photo{display:block!important;height:auto!important}
  .phero h1,.phero h1 *{color:#000!important;text-shadow:none!important}
  .form-wrap,form,.chooser .panel .vis{display:none!important}
  .shead{margin-bottom:10px!important}
}
@media print{.rrail-h span+span{display:none!important}.panels>.panel[hidden]{display:none!important}}
@media (pointer:coarse){
  footer ul a,.f-bot a,address.nap a{display:inline-flex;align-items:center;min-height:44px}
  footer ul li{margin:0}
  .shead a.ilink,p.fin a,.rt-attr a,.facts li a.tel-link{display:inline-flex;align-items:center;min-height:44px}
  .also .logo-tile{min-height:44px}
}

/* New Kinze product sections: the photo is a fixed 3:2 (about half the height of
   the tall text column), sits at the top, and stays in view while the copy scrolls past */
@media (min-width:1001px){
  .split.stick{align-items:start}
  .split.stick .fig{align-self:start;position:sticky;top:var(--stick,24px);transition:top .25s}
  .split.stick .fig .im{flex:none;aspect-ratio:3/2;height:auto;min-height:0}
  /* the planter photo is exactly 3:2 and shows a green tractor at its left edge: frame it a little taller and pin it right */
  #planters .split.stick .fig .im{aspect-ratio:5/4}
  #planters .split.stick .fig img{object-position:100% 50%}
}

/* Used page: Blue Equipment's TractorHouse results, one link per category */
.lot-cats{margin-top:48px}
.lot-cats-h{font-size:22px;margin:0 0 16px}
.lot-cats-row{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);background:var(--card)}
.lot-cats-row a{position:relative;display:flex;flex-direction:column;gap:4px;padding:22px 48px 22px 22px;text-decoration:none;border-right:1px solid var(--line)}
.lot-cats-row a:last-child{border-right:0}
.lot-cats-row b{color:var(--ink);font:600 19px/1.2 var(--cond)}
.lot-cats-row small{color:var(--ink-2);font-size:14.5px}
.lot-cats-row i{position:absolute;right:22px;top:50%;width:8px;height:8px;border-right:2px solid var(--kblue);border-top:2px solid var(--kblue);transform:translateY(-50%) rotate(45deg)}
.lot-cats-row a:hover{background:var(--stage)}.lot-cats-row a:hover b{color:var(--kblue)}
.lot-cats-note{margin:12px 0 0;font-size:14.5px;color:var(--ink-3)}
@media (max-width:1000px){.lot-cats-row{grid-template-columns:1fr 1fr}.lot-cats-row a:nth-child(2n){border-right:0}.lot-cats-row a:nth-child(-n+2){border-bottom:1px solid var(--line)}}
@media (max-width:520px){.lot-cats-row{grid-template-columns:1fr}.lot-cats-row a{border-right:0;border-bottom:1px solid var(--line)}.lot-cats-row a:last-child{border-bottom:0}}

/* ================= CONCEPT: on-site used inventory (used-equipment/on-the-lot/) =================
   Sample data from _build/inventory_sample.py. Delete this block with the concept pages at launch. */
.concept-note{background:#fff7e0;border-bottom:1px solid #e9d49a;color:#5a4a12;font-size:14.5px}
.concept-note .wrap{display:flex;gap:14px;align-items:baseline;padding-top:14px;padding-bottom:14px}
.concept-note b{font:600 12px/1 var(--cond);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;color:#5a4a12}
/* toolbar */
.inv-bar{display:grid;grid-template-columns:1fr auto;gap:18px 24px;align-items:end;margin-bottom:28px}
.inv-count{margin:0;font-size:30px;line-height:1.1}
.inv-count span{display:block;margin-top:6px;font:500 14px/1.3 var(--sans);color:var(--ink-3);letter-spacing:0}
.inv-tools{display:flex;gap:12px;align-items:center}
.inv-search{position:relative;display:block}
.inv-search svg{position:absolute;left:14px;top:50%;width:18px;height:18px;transform:translateY(-50%);fill:none;stroke:var(--ink-3);stroke-width:2}
.inv-search input{height:46px;width:260px;padding:0 14px 0 42px;border:1px solid var(--line);background:#fff;font:15px var(--sans);color:var(--ink)}
.inv-sort{display:flex;align-items:center;gap:10px;font:600 12.5px/1 var(--cond);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.inv-sort select{height:46px;padding:0 12px;border:1px solid var(--line);background:#fff;font:15px var(--sans);color:var(--ink);letter-spacing:0;text-transform:none}
.inv-chips{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px}
.inv-chip{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border:1px solid var(--line);background:#fff;font:600 14.5px var(--sans);color:var(--ink);cursor:pointer}
.inv-chip span{font-weight:500;color:var(--ink-3)}
.inv-chip:hover{border-color:var(--be)}
.inv-chip[aria-pressed="true"]{background:var(--be);border-color:var(--be);color:#fff}
.inv-chip[aria-pressed="true"] span{color:#c9d6ea}
/* cards */
.inv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.inv-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);transition:border-color .15s,box-shadow .15s}
.inv-card:hover{border-color:#b8c4d6;box-shadow:0 10px 24px rgba(17,31,59,.08)}
.inv-card[hidden]{display:none}
.inv-ph{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--stage)}
.inv-ph img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.inv-card:hover .inv-ph img{transform:scale(1.03)}
.inv-none{position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:center;font:600 12.5px/1.4 var(--cond);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);background:repeating-linear-gradient(135deg,var(--stage) 0 14px,#e6ebf1 14px 28px)}
.inv-b{position:absolute;left:12px;top:12px;padding:6px 10px;font:600 13px/1 var(--sans)}
.inv-units{background:var(--be);color:#fff}
.inv-cam{position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;background:rgba(10,24,48,.8);color:#fff;font:600 12.5px/1 var(--sans)}
.inv-cam svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
.inv-b0{display:flex;flex-direction:column;flex:1;padding:18px 20px}
.inv-cat{margin:0 0 6px;font:600 12px/1 var(--cond);letter-spacing:.12em;text-transform:uppercase;color:var(--kblue)}
.inv-card h3{margin:0 0 10px;font-size:21px;line-height:1.2}
.inv-card h3 a{color:var(--ink);text-decoration:none}
.inv-card h3 a::after{content:"";position:absolute;inset:0}
.inv-card h3 a:hover{color:var(--kblue)}
.inv-specs{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px;padding:0}
.inv-specs li{padding:5px 9px;background:var(--stage);font-size:13.5px;color:var(--ink-2)}
.inv-row{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;border-top:1px solid var(--line)}
.inv-price{margin:0;font:700 22px/1 var(--display);letter-spacing:-.01em;color:var(--ink)}
.inv-price.call{font:600 16px/1 var(--sans);color:var(--ink-2)}
.inv-ask{position:relative;z-index:1;display:inline-flex;align-items:center;min-height:36px;font-weight:600;font-size:14.5px;color:var(--kblue)}
.inv-empty{padding:40px;text-align:center;border:1px dashed var(--line);background:#fff}
/* not on the lot */
.inv-want{display:grid;grid-template-columns:1.4fr 1fr;gap:32px;align-items:center}
.inv-want h2{margin:0 0 12px}
.inv-want h2 span{color:var(--kblue)}
.inv-want p{margin:0;max-width:60ch}
.inv-want-go{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end}
/* listing page */
.lst-sec{padding-top:28px}
.lst{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:start}
.gal-main{position:relative;margin:0;aspect-ratio:3/2;overflow:hidden;background:var(--stage);border:1px solid var(--line)}
.gal-main img{width:100%;height:100%;object-fit:cover}
.gal-th{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:10px}
.gal-th button{padding:0;border:2px solid transparent;background:var(--stage);aspect-ratio:4/3;overflow:hidden;cursor:pointer}
.gal-th button img{width:100%;height:100%;object-fit:cover;display:block}
.gal-th button[aria-pressed="true"]{border-color:var(--be)}
.gal-th button:hover{border-color:#b8c4d6}
.lst-side{position:sticky;top:var(--stick,24px);transition:top .25s;background:#fff;border:1px solid var(--line);padding:28px}
.lst-side h1{margin:0 0 10px;font-size:40px;line-height:1.05;color:var(--ink)}
.lst-price{margin:0;font:700 34px/1 var(--display);letter-spacing:-.015em;color:var(--ink)}
.lst-fin{margin:10px 0 20px;font-size:15px;color:var(--ink-2)}
.lst-fin a{color:var(--kblue);font-weight:600}
.lst-side .facts{margin-bottom:18px}
.lst-ok{display:flex;align-items:center;gap:10px;margin:0 0 20px;padding:12px 14px;background:#eaf5ee;color:#1f5a34;font-weight:600;font-size:15px}
.lst-ok svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.5;flex:none}
.lst-go{display:grid;gap:10px}
.lst-go .btn{justify-content:space-between}
.lst-rep{display:flex;align-items:center;gap:14px;margin:20px 0 0;padding-top:18px;border-top:1px solid var(--line)}
.lst-rep .face{width:48px;height:60px;object-fit:cover;object-position:50% 20%;border:1px solid var(--line)}
.lst-rep p{margin:0;line-height:1.35}
.lst-rep b{display:block;color:var(--ink);font-weight:600}
.lst-rep span{font-size:14.5px;color:var(--ink-2)}
.lst-rep span a{color:var(--kblue);font-weight:600;text-decoration:none;white-space:nowrap}
.lst-rep span a:hover{text-decoration:underline}
.lst-links{display:flex;flex-wrap:wrap;gap:6px 22px;margin:16px 0 0}
.lst-more{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:start}
.lst-spec{display:grid;grid-template-columns:1fr 1fr;margin:18px 0 0;border-top:1px solid var(--line)}
.lst-spec div{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.lst-spec div:nth-child(odd){padding-right:24px}
.lst-spec dt{font:600 12.5px/1.6 var(--cond);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.lst-spec dd{margin:0;color:var(--ink)}
.lst-desc{margin-top:24px;padding:18px 20px;border-left:3px solid var(--be);background:var(--stage)}
.lst-desc b{display:block;margin-bottom:6px;color:var(--ink)}
.lst-desc span{color:var(--ink-2);font-size:15px}
.lst-desc p{margin:0 0 10px;color:var(--ink-2)}
.lst-desc p:last-child{margin-bottom:0}
.lst-upd{margin:14px 0 0;font-size:14px;color:var(--ink-3)}
.lst-stock{margin:-4px 0 12px;color:var(--ink-3)}
.lst-price.call{font-size:28px}
.inv-card .inv-b{background:var(--be);color:#fff}
/* listing gallery: every TractorHouse photo. Arrows and a counter on the main
   photo; the thumbnails scroll sideways when there are more than six. */
.gal{outline:none}
.gal-n{position:absolute;right:12px;bottom:12px;padding:6px 10px;background:rgba(10,24,48,.8);color:#fff;font:600 13px/1 var(--sans)}
.gal-n b{font-weight:600}
.gal-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;display:grid;place-items:center;border:0;padding:0;background:rgba(10,24,48,.72);color:#fff;cursor:pointer}
.gal-nav:hover,.gal-nav:focus-visible{background:var(--be)}
.gal-nav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.5}
.gal-nav.prev{left:0}.gal-nav.next{right:0}
.gal-th{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - 50px) / 6);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;padding-bottom:6px}
.gal-th button{scroll-snap-align:start}
@media (max-width:700px){.gal-th{grid-auto-columns:calc((100% - 30px) / 4)}}
.lst-why{background:var(--stage);padding:26px 28px;border:1px solid var(--line);position:sticky;top:var(--stick,24px);transition:top .25s}   /* stays beside the spec list on desktop (Jason, 2026-10-06) */
@media (max-width:1000px){.lst-why{position:static}}
.lst-why h3{margin:0 0 14px;font-size:22px}
.lst-why ul{list-style:none;margin:0;padding:0}
.lst-why li{padding:12px 0;border-top:1px solid var(--line);color:var(--ink-2);font-size:15px}
.lst-why li b{display:block;color:var(--ink);font-weight:600;font-size:16px}
.inv-more-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:24px}
.inv-more-h h2{margin:0}
@media (max-width:1100px){.inv-grid{grid-template-columns:repeat(2,1fr)}.inv-bar{grid-template-columns:1fr}.inv-tools{flex-wrap:wrap}}
@media (max-width:1000px){.lst,.lst-more,.inv-want{grid-template-columns:1fr}.lst-side{position:static}.inv-want-go{justify-content:flex-start}}
@media (max-width:700px){
  .concept-note .wrap{flex-direction:column;gap:4px}
  .inv-grid,.inv-grid.three{grid-template-columns:1fr}
  .inv-count{font-size:25px}
  .inv-tools{display:grid;grid-template-columns:1fr;width:100%}
  .inv-search input{width:100%}
  .inv-sort select{flex:1}
  .inv-chips{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px;padding:0 16px 4px}
  .inv-chip{flex:none}
  .gal-th{gap:6px}
  .lst-side{padding:22px 20px}
  .lst-side h1{font-size:32px}
  .lst-spec{grid-template-columns:1fr}
  .lst-spec div:nth-child(odd){padding-right:0}
  .lst-spec div{grid-template-columns:130px 1fr}
  .inv-more-h{flex-direction:column}
}
@media (pointer:coarse){.inv-chip,.inv-ask{min-height:44px}}
@media print{.inv-bar,.gal-th,.lst-go,.concept-note{display:none!important}.lst-side{position:static}}
/* listing page has no photo hero: a navy band under the (transparent) site header carries the breadcrumb */
.lst-top{background:var(--be-deep);padding:104px 0 14px}
.lst-top .crumbs{margin:0}
/* the stand-in planter photo has a green tractor at its left edge: 5:4 pinned right keeps it out */
.gal-main{aspect-ratio:5/4}
.gal-th button{aspect-ratio:5/4}
/* tap targets: every concept link at least 24px tall (44px on touch, above) */
.inv-card h3 a{display:block;padding:2px 0}
.lst-fin a{display:inline-block;padding:3px 0}
/* Used page, inventory switch on: a featured strip of lot cards above the category row */
.lot-feat{margin-top:56px}
.lot-feat-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:18px}
.lot-feat-h .lot-cats-h{margin:0}
.concept-tag{margin:0 0 18px;font-size:14px;color:#5a4a12}
.concept-tag b{display:inline-block;margin-right:8px;padding:4px 8px;background:#fff7e0;border:1px solid #e9d49a;font:600 11.5px/1 var(--cond);letter-spacing:.12em;text-transform:uppercase}
.inv-grid.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:1100px){.inv-grid.three{grid-template-columns:repeat(2,1fr)}.inv-grid.three>:nth-child(3){display:none}}
@media (max-width:700px){.inv-grid.three{grid-template-columns:1fr}.inv-grid.three>:nth-child(3){display:flex}.lot-feat-h{flex-direction:column;gap:6px}}

/* header on scroll (Jason, 2026-09-28): it sits over the hero as before; once the
   page scrolls past it, it becomes a fixed navy bar that slides away while you scroll
   down and slides back as soon as you scroll up. site.js sets .fixed / .in / .anim.
   While it is showing, sticky side panels drop below it (--stick). */
header.site.fixed{position:fixed;background:rgba(10,24,48,.97);transform:translateY(-100%);box-shadow:0 6px 18px rgba(0,0,0,.18)}
header.site.fixed.anim{transition:transform .28s ease}
header.site.fixed.in{transform:none}
header.site.fixed .wrap{border-bottom-color:transparent}
body.hdr-in{--stick:100px}
@media print{header.site.fixed{position:static}}

/* ONE LABEL STYLE (Jason, 2026-09-28: "make everything the same font size, height,
   weight, line"). Every small uppercase label on the site is Archivo 600, 12.5px,
   0.08em tracking, line-height 1.25, the spec of the breadcrumb and figure captions.
   This block overrides the one-off sizes (10.5 to 15.5px), spacings (0.06 to 0.12em)
   and the 900-weight "Fig." numbers. A new label should just use class="mono". */
.facts li span,.fh,.nums small,.tx small,li>span>small,a[data-model] small,.lst-spec dt,.inv-sort,.inv-none,.ut-k,.inv-cat,h1 .place,.down p.mono,.mono{
  font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.08em;line-height:1.25}
.mono b{font-weight:600}

/* listing page: the payment estimate opens in the side panel, nothing leaves the page
   (Jason, 2026-09-28). Same fields and script as /financing/#estimate. */
.lst-est{margin:14px 0 20px;border:1px solid var(--line)}
.lst-est summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:10px 16px;cursor:pointer;font-weight:600;color:var(--kblue)}
.lst-est summary::-webkit-details-marker{display:none}
.lst-est summary small{font-weight:500;font-size:14px;color:var(--ink-3)}
.lst-est summary span{display:flex;align-items:center;gap:10px}
.lst-est summary span::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.lst-est[open] summary span::after{transform:rotate(-135deg) translateY(-1px)}
.lst-est[open] summary{border-bottom:1px solid var(--line)}
.lst-est-b{padding:16px}
.lst-est-b .fgrid{grid-template-columns:1fr 1fr;gap:12px 14px}
.lst-est-b .full{grid-column:1/-1}
.lst-est-h{margin:8px 0 0;font-size:14px;color:var(--ink-3)}
.lst-est-b .est-out{margin:14px 0 10px;padding:16px 18px}
.lst-est-b .est-pay{font-size:26px}
.lst-est-b .form-note{margin:0;padding:0;border:0;background:none;font-size:13.5px}
@media (max-width:420px){.lst-est-b .fgrid{grid-template-columns:1fr}.lst-est summary small{display:none}}

/* payment estimate disclaimer, highlighted (Jason, 2026-09-28) on both estimators */
.form-note.est-note,.lst-est-b .form-note.est-note{position:relative;margin:0 28px 22px;padding:12px 14px 12px 42px;background:#fff4d6;border:1px solid #ecd28a;border-left:4px solid #c99700;color:#4a3b0b;font-size:14px;line-height:1.5}
.lst-est-b .form-note.est-note,.form.est .form-note.est-note{margin:0}
.form-note.est-note b{color:#3a2d05;font-weight:700}
.form-note.est-note::before{content:"i";position:absolute;left:13px;top:12px;width:18px;height:18px;border-radius:50%;background:#c99700;color:#fff;font:700 12px/18px var(--sans);text-align:center}
@media (max-width:700px){.form-note.est-note{margin:0 20px 20px}.lst-est-b .form-note.est-note,.form.est .form-note.est-note{margin:0}}

/* homepage hero on phones: shift the photo so the Blue Equipment wall sign sits clear of the headline */
@media (max-width:700px){.photo>picture>img,.photo>img{object-position:8% 40%!important}}

/* team member with no headshot yet (photo=None in TEAM): the empty headshot backdrop, so the card
   matches the others (team-blank-be.jpg, in IMAGES) */
.face.blank,.card-p .ph.blank{display:block;background:#1d376c url(../img/team-blank-be.jpg) center/cover no-repeat}

/* ---------- staff edit strip (site.js; only for staff who opened the site from the admin) ----------
   A navy bar above everything; the header, its fixed scroll state and sticky panels move down by its height. */
.edit-strip{position:fixed;top:0;left:0;right:0;z-index:60;height:44px;display:flex;align-items:center;gap:6px 12px;padding:0 20px;background:#fff;border-bottom:3px solid #00aeef;box-shadow:0 4px 14px rgba(10,24,48,.35);font:600 14px/1 var(--sans);color:#111f3b}
.edit-strip .es-lab{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:#111f3b;margin-right:auto}
.edit-strip .es-lab::before{content:"";width:10px;height:10px;border-radius:50%;background:#00aeef;box-shadow:0 0 0 3px rgba(0,174,239,.25)}
.edit-strip a{color:#1d376c;text-decoration:none;padding:8px 12px;border:1px solid #1d376c;background:#fff}
.edit-strip a:hover{background:#eef2f5}
.edit-strip a.es-main{background:#1d376c;border-color:#1d376c;color:#fff}
.edit-strip a.es-main:hover{background:#0a1830}
.edit-strip .es-hide{background:none;border:0;color:#404d68;font:inherit;cursor:pointer;padding:8px 4px;text-decoration:underline}
html.editing body{padding-top:44px}
html.editing header.site{top:44px}
html.editing body{--stick:68px}
html.editing body.hdr-in{--stick:144px}
@media (max-width:700px){.edit-strip{padding:0 12px;gap:10px}.edit-strip .es-wide{display:none}}
@media (pointer:coarse){.edit-strip a,.edit-strip .es-hide{min-height:44px;display:inline-flex;align-items:center}.edit-strip{height:auto;min-height:52px}html.editing body{padding-top:52px}html.editing header.site{top:52px}}
@media print{.edit-strip{display:none}html.editing body{padding-top:0}}

/* Homepage chooser tabs on phones (2026-10-07): the type block above sets .door b to 22px for every
   width, which beat the 20px phone rule earlier in the file, so "Used, all makes" wrapped and the
   top row stood taller than the bottom one. Phones get their own size again, after that block
   (and the three other phone sizes that block overrode: .ans h3, .ask h2, .place-ph .lab b). */
@media (max-width:700px){.door b{font-size:18px;line-height:1.1}.door{align-content:center}.ans h3{font-size:30px}.ask h2{font-size:20px}.place-ph .lab b{font-size:32px}}
@media (max-width:360px){.door b{font-size:16px}.door{padding:12px}}

/* SECTIONS (2026-10-08): the two section types no page had before, built from the site's own parts.
   Text (.prose.solo): the story column, one readable measure. Questions and answers (.faq): the
   "more fields" disclosure of the forms, one per question, the answer in reading text. */
.prose.solo{max-width:760px}
.prose.solo h3:first-child{margin-top:0}
.faq{display:grid;gap:10px;max-width:900px}
.faq .qa{background:var(--card);border:1px solid var(--line)}
.sec.white .faq .qa{background:var(--paper)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:18px 22px;min-height:56px}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{margin:0;font:700 19px/1.3 var(--display);color:var(--ink);letter-spacing:-.01em}
.faq summary::after{content:"";margin-left:auto;flex:none;width:9px;height:9px;border-right:2px solid var(--ink-2);border-bottom:2px solid var(--ink-2);transform:rotate(45deg);transition:transform .2s}
.faq .qa[open] summary::after{transform:rotate(-135deg)}
.faq .qa[open] summary{border-bottom:1px solid var(--line)}
.faq .a{padding:16px 22px 20px}
.faq .a p{color:var(--ink-2);font-size:17px;max-width:66ch;margin:0}
@media (max-width:700px){.faq summary{padding:16px 18px}.faq .a{padding:14px 18px 18px}.faq summary h3{font-size:17px}}
@media (prefers-reduced-motion:reduce){.faq summary::after{transition:none}}
@media print{.faq .a{display:block}}

/* NEWS (2026-10-08): a post's header (the 404's navy band: no photo behind the words), its cover
   photo half on the band, and the list of posts as cards. Type and colours are the site's own. */
.post-head{padding:170px 0 120px;background:var(--be-deep);color:#fff}
.post-head .crumbs{margin-bottom:22px}
.post-meta{display:flex;flex-wrap:wrap;gap:6px 18px;color:#9fd3f2}
.post-head h1{color:#fff;font-size:clamp(38px,4.6vw,66px);line-height:1.02;max-width:20ch;margin:14px 0 18px}
.post-head h1 .b{color:#9fd3f2}
.post-head .lede{color:#c9d6ea;font-size:19px;line-height:1.5;max-width:60ch}
.post-head.list{padding-bottom:64px}
.post-cover{margin:0;background:linear-gradient(var(--be-deep) 0 50%,transparent 50%)}
.post-cover img{display:block;width:100%;aspect-ratio:16/8;object-fit:cover;margin-top:-80px}
.post-cover picture{display:contents}
.news-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.post-card a{display:flex;flex-direction:column;height:100%;background:var(--card);border:1px solid var(--line);text-decoration:none;color:inherit}
.post-card a:hover{border-color:var(--kblue)}
.post-card a:hover h2{color:var(--kblue)}
.pc-im img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
.pc-tx{display:flex;flex-direction:column;gap:10px;padding:20px 22px 24px}
.pc-tx .mono{display:flex;gap:14px;color:var(--ink-3)}
.post-card h2{font:700 22px/1.2 var(--display);letter-spacing:-.015em;color:var(--ink);margin:0}
.pc-sum{color:var(--ink-2);font-size:16px}
.news-pager{display:flex;flex-wrap:wrap;gap:6px;margin-top:40px}
.news-pager a,.news-pager span{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 14px;border:1px solid var(--line);background:var(--card);text-decoration:none;font-weight:600}
.news-pager span{background:var(--be);color:#fff;border-color:var(--be)}
.news-none{color:var(--ink-2)}
@media (max-width:1000px){.news-list{grid-template-columns:1fr 1fr}.post-cover img{margin-top:-48px}}
@media (max-width:700px){.news-list{grid-template-columns:1fr}.post-head{padding:130px 0 90px}.post-cover img{aspect-ratio:3/2}}

/* VIDEO (2026-10-08): a poster photo with a play button; the player replaces it on press (site.js) */
.video{margin:0;max-width:1000px}
.video .vid,.video .vid-frame{display:block;position:relative;width:100%;aspect-ratio:16/9;background:var(--be-deep);border:0}
.video .vid img{display:block;width:100%;height:100%;object-fit:cover}
.video .play{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:rgba(10,24,48,.78);box-shadow:0 0 0 2px rgba(255,255,255,.85)}
.video .play::after{content:"";position:absolute;left:34px;top:26px;border-style:solid;border-width:16px 0 16px 26px;border-color:transparent transparent transparent #fff}
.video .vid:hover .play,.video .vid:focus-visible .play{background:var(--kblue)}
.video figcaption{margin-top:12px;color:var(--ink-3)}
@media (max-width:700px){.video .play{width:64px;height:64px;margin:-32px 0 0 -32px}.video .play::after{left:26px;top:19px;border-width:13px 0 13px 21px}}

/* DROPDOWN MENUS (2026-10-08): a header link with links under it (Admin > Site settings > Menu, "in the
   dropdown of the link above"). The link still goes to its page; the arrow beside it opens the list. Wide screens:
   hover opens it too, the list drops below as a white panel. Phone menu: the list opens indented under its link. */
.dd{position:relative;display:flex;align-items:center}
.dd>a{padding-right:2px}
.dd-t{display:grid;place-items:center;width:26px;height:38px;padding:0;border:0;background:none;color:inherit;cursor:pointer}
.dd-t svg{transition:transform .15s ease}
.dd.open>.dd-t svg{transform:rotate(180deg)}
.dd-t:hover{color:var(--sky)}
.dd.on>a{color:#9fd3f2;box-shadow:inset 0 -2px 0 #9fd3f2}
.dd-m{display:none;list-style:none;margin:0;padding:8px 0;position:absolute;top:100%;left:0;min-width:240px;background:#fff;border-top:3px solid var(--sky);box-shadow:0 14px 30px rgba(10,24,48,.22);z-index:30}
.dd.open>.dd-m{display:block}
@media (min-width:1101px) and (hover:hover){.dd:hover>.dd-m{display:block}.dd:hover>.dd-t svg{transform:rotate(180deg)}}
.nav .dd-m a{display:block;padding:11px 20px;color:var(--ink);font-size:14.5px;white-space:nowrap;box-shadow:none}
.nav .dd-m a:hover{color:var(--kblue);background:var(--paper)}
.nav .dd-m a[aria-current="page"]{color:var(--kblue);box-shadow:inset 3px 0 0 var(--kblue)}
@media (max-width:1100px){
  .nav.open .dd{display:block}
  .nav.open .dd>a{display:block;padding-right:56px}
  .nav.open .dd-t{position:absolute;right:0;top:4px;width:48px;height:48px;border-left:1px solid rgba(255,255,255,.12)}
  .nav.open .dd-m{position:static;min-width:0;background:none;border:0;box-shadow:none;padding:0 0 8px 18px}
  .nav.open .dd-m a{color:#fff;font-size:17px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08);white-space:normal}
  .nav.open .dd-m a:hover{background:none;color:var(--sky)}
  .nav.open .dd-m a[aria-current="page"]{color:#9fd3f2;box-shadow:none}
}
@media (pointer:coarse){.dd-t{min-width:44px;min-height:44px}}