/* Self-hosted fonts: Poppins (SIL Open Font License, latin subset), the face used on
   Origin Dental, in four weights. */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/poppins-400.woff2?v=9212f6f986) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/poppins-500.woff2?v=a09f2fccfe) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/poppins-600.woff2?v=72993dddf8) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/poppins-700.woff2?v=25b0e113ca) format('woff2')}

/* ════════════════════════════════════════════════════════════════════
   KEYSTONE FENCE & DECK CO. — site stylesheet
   Identity: the builder's elevation sheet. Drafting-vellum ground,
   powder-coated-steel ink, stained-cedar accent, lumber-grade-stamp
   green for "included" and success states.
   Type and ground follow Origin Dental: Poppins throughout, white cards on a
   light blue-grey page, slate text.

   Deliberately single-theme: the drawing-sheet world is the brand, so
   every surface and colour is painted explicitly rather than following
   the visitor's OS theme.
   ════════════════════════════════════════════════════════════════════ */

:root{
  --vellum:#F4F8FB; --sheet:#FFFFFF; --sheet-2:#E7F3FA; --sheet-3:#CDE7F5;
  --steel:#26313D; --steel-2:#2B3542; --steel-3:#3A4655;
  --graphite:#4A5562; --pencil:#66717D;
  --rule:#E2E8EE; --rule-2:#D0DAE2;
  --cedar:#A0552A; --cedar-deep:#7C401E; --cedar-tint:#EFDCCD; --cedar-on-dark:#DE915C;
  --wood:#D9AE86; --wood-2:#C19068; --wood-3:#E8C9A8; --composite:#8C8279;
  --stamp:#2F5B4C; --stamp-tint:#DCE8E2;
  --alert:#A33A2B; --alert-tint:#F4DFDB;
  --on-dark:#ECECE6; --on-dark-2:#B3B8B4;

  --display:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --text:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  --wrap:1200px;
  --gutter:clamp(16px,4vw,40px);
  --sec:clamp(56px,8vw,104px);
  --radius:2px;
  --hdr:76px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 16px)}
body{margin:0;background:var(--vellum);color:var(--graphite);font:400 17px/1.65 var(--text);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{max-width:100%}
a{color:var(--cedar-deep);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--cedar)}
:focus-visible{outline:3px solid var(--cedar);outline-offset:2px}
strong,b{color:var(--steel);font-weight:600}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.2em}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--steel);color:var(--on-dark);
  padding:10px 14px;font:600 14px var(--text);text-decoration:none}
.skip:focus{top:12px}

/* ── type ───────────────────────────────────────────────────────── */
h1,h2,h3,h4{color:var(--steel);margin:0;text-wrap:balance}
h1,.h1{font:600 clamp(2.2rem,4.4vw,3.4rem)/1.12 var(--display);letter-spacing:-.02em}
h2,.h2{font:600 clamp(1.6rem,2.8vw,2.25rem)/1.2 var(--display);letter-spacing:-.015em}
h3,.h3{font:700 1.22rem/1.3 var(--text);letter-spacing:-.01em}
h4{font:700 1rem/1.35 var(--text)}
.lede{font-size:clamp(1.06rem,1.6vw,1.22rem);line-height:1.6;color:var(--graphite);max-width:60ch}
.code{font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cedar-deep);
  display:inline-flex;align-items:center;gap:10px}
.code::before{content:"";width:22px;height:1px;background:currentColor}
.code.plain::before{display:none}
.mono{font-family:var(--mono)}
.measure{max-width:66ch}

/* ── layout ─────────────────────────────────────────────────────── */
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter)}
.sec{padding-block:var(--sec)}
.sec.tight{padding-block:clamp(40px,5vw,64px)}
.sec.alt{background:var(--sheet-2)}
.sec.sheet{background:var(--sheet)}
.sec-head{display:grid;gap:14px;margin-bottom:clamp(28px,4vw,48px);max-width:760px}
.sec-head.center{margin-inline:auto;text-align:center;justify-items:center}
.sec-head p{margin:0}
.rule-top{border-top:1px solid var(--rule)}
.grid{display:grid;gap:clamp(14px,2vw,24px)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* ── buttons ────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;
  border:1.5px solid transparent;border-radius:var(--radius);font:600 15px/1 var(--text);letter-spacing:.01em;
  text-decoration:none;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s;white-space:nowrap}
.btn svg{width:16px;height:16px;flex:none}
.btn-primary{background:var(--cedar);color:#fff}
.btn-primary:hover{background:var(--cedar-deep);color:#fff}
.btn-dark{background:var(--steel);color:var(--on-dark)}
.btn-dark:hover{background:var(--steel-3);color:#fff}
.btn-line{border-color:var(--steel);color:var(--steel);background:transparent}
.btn-line:hover{background:var(--steel);color:var(--on-dark)}
.btn-ghost-dark{border-color:rgba(236,236,230,.4);color:var(--on-dark)}
.btn-ghost-dark:hover{border-color:var(--on-dark);color:#fff}
.btn-block{width:100%}
.btn:active{transform:translateY(1px)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.tel{font-family:var(--mono);font-weight:500;letter-spacing:.02em}

/* ── header ─────────────────────────────────────────────────────── */
.hdr{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--rule)}
.hdr.scrolled{box-shadow:0 6px 24px -14px rgba(38,49,61,.35)}
.hdr-in{display:flex;align-items:center;gap:24px;height:var(--hdr)}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--steel);flex:none}
.brand-mark{display:block}
.bm-frame{fill:none;stroke:var(--steel);stroke-width:1.5}
.bm-post{fill:var(--steel)}
.bm-brace{fill:var(--cedar)}
.brand-word{display:grid;line-height:1}
.brand-name{font:700 1.3rem/1 var(--display);letter-spacing:.02em;text-transform:uppercase}
.brand-sub{font:500 9.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--graphite);margin-top:5px}
.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav-item{position:relative}
.nav-link{display:flex;align-items:center;gap:6px;padding:10px 12px;font:600 14.5px/1 var(--text);color:var(--steel);
  text-decoration:none;border-radius:var(--radius);background:none;border:0;cursor:pointer}
.nav-link:hover,.nav-item:focus-within>.nav-link{color:var(--cedar-deep)}
.nav-link[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--cedar)}
.nav-link .chev{width:10px;height:10px;transition:transform .2s}
.nav-item.open>.nav-link .chev{transform:rotate(180deg)}
.mega{position:absolute;top:calc(100% + 12px);left:50%;transform:translate(-50%,6px);width:min(560px,90vw);
  background:var(--sheet);border:1px solid var(--rule-2);box-shadow:0 24px 60px -24px rgba(38,49,61,.4);
  padding:22px;display:grid;grid-template-columns:200px 1fr;gap:20px;opacity:0;visibility:hidden;
  transition:opacity .18s,transform .18s,visibility .18s}
.mega::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.nav-item.open>.mega,.nav-item:focus-within>.mega{opacity:1;visibility:visible;transform:translate(-50%,0)}
@media(hover:hover){.nav-item:hover>.mega{opacity:1;visibility:visible;transform:translate(-50%,0)}}
.mega-intro{border-right:1px solid var(--rule);padding-right:18px;display:grid;align-content:start;gap:8px}
.mega-intro .drawing{background:var(--vellum);border:1px solid var(--rule)}
.mega-intro a{font:700 15px/1.25 var(--text);color:var(--steel);text-decoration:none}
.mega-intro a:hover{color:var(--cedar-deep)}
.mega-intro small{font-size:13px;line-height:1.45}
.mega-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.mega-list a{display:grid;grid-template-columns:44px 1fr;align-items:baseline;gap:6px;padding:8px 10px;
  text-decoration:none;color:var(--steel);font:600 14.5px/1.3 var(--text);border-radius:var(--radius)}
.mega-list a:hover{background:var(--vellum);color:var(--cedar-deep)}
.mega-list .mc{font:500 11px var(--mono);color:var(--cedar-deep);letter-spacing:.08em}
.hdr-cta{display:flex;align-items:center;gap:14px;flex:none}
.hdr-tel{display:grid;text-decoration:none;color:var(--steel);line-height:1.1;text-align:right}
.hdr-tel small{font:500 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--graphite)}
.hdr-tel span{font:600 16px var(--mono)}
.icon-btn{display:none;width:44px;height:44px;align-items:center;justify-content:center;border:1.5px solid var(--rule-2);
  border-radius:var(--radius);background:var(--sheet);color:var(--steel);cursor:pointer;text-decoration:none}
.icon-btn svg{width:19px;height:19px}

/* mobile drawer */
.drawer{position:fixed;inset:0;z-index:80;background:var(--vellum);display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);visibility:hidden}
.drawer.open{transform:none;visibility:visible}
.drawer-top{display:flex;align-items:center;justify-content:space-between;height:68px;padding-inline:var(--gutter);
  border-bottom:1px solid var(--rule);flex:none}
.drawer-body{overflow-y:auto;padding:8px var(--gutter) 24px;flex:1}
.d-group{border-bottom:1px solid var(--rule)}
.d-row{display:flex;align-items:center;justify-content:space-between;width:100%;padding:16px 0;background:none;border:0;
  font:600 1.12rem/1.2 var(--display);letter-spacing:-.005em;color:var(--steel);text-decoration:none;cursor:pointer;text-align:left}
.d-row .chev{width:14px;height:14px;transition:transform .2s}
.d-group.open .d-row .chev{transform:rotate(180deg)}
.d-sub{display:none;list-style:none;margin:0 0 14px;padding:0}
.d-group.open .d-sub{display:grid;grid-template-columns:1fr 1fr;gap:2px 10px}
.d-sub a{display:block;padding:9px 0;font:500 15px/1.3 var(--text);color:var(--graphite);text-decoration:none}
.d-sub a.hub{grid-column:1/-1;font-weight:700;color:var(--cedar-deep)}
.drawer-foot{padding:16px var(--gutter) calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--rule);display:grid;gap:10px;flex:none}

/* sticky phone CTA */
.mbar{display:none}

/* ── breadcrumbs ────────────────────────────────────────────────── */
.crumbs{font:500 12px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--graphite);
  padding-block:18px;border-bottom:1px solid var(--rule)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--rule-2)}
.crumbs a{color:var(--graphite);text-decoration:none}
.crumbs a:hover{color:var(--cedar-deep)}
.crumbs [aria-current]{color:var(--steel)}

/* ── drawing sheets ─────────────────────────────────────────────── */
.sheet-frame{position:relative;background:var(--sheet);border:1px solid var(--rule-2);padding:clamp(10px,2vw,18px)}
.sheet-frame::before,.sheet-frame::after{content:"";position:absolute;width:14px;height:14px;border:1.5px solid var(--steel)}
.sheet-frame::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.sheet-frame::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.sheet-tag{position:absolute;top:10px;left:14px;font:500 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--graphite)}
.drawing{display:block;width:100%;height:auto}
.drawing *{vector-effect:non-scaling-stroke}
.k-ln{fill:none;stroke:var(--steel);stroke-width:1.4}
.k-th{fill:none;stroke:var(--graphite);stroke-width:.8}
.k-wd{fill:var(--wood);stroke:var(--steel);stroke-width:.7}
.k-wd2{fill:var(--wood-2);stroke:var(--steel);stroke-width:.7}
.k-wd3{fill:var(--wood-3);stroke:var(--steel);stroke-width:.7}
.k-st{fill:var(--steel);stroke:var(--steel);stroke-width:.6}
.k-cap{fill:var(--steel)}
.k-picket{stroke:var(--steel);stroke-width:1.5;fill:none}
.k-finial{fill:var(--steel)}
.k-pipe{fill:var(--steel-3);stroke:var(--steel);stroke-width:.6}
.k-wire{fill:none;stroke:var(--graphite);stroke-width:.55}
.k-grid-box{stroke:none}
.k-brace{stroke:var(--steel);stroke-width:1.4;fill:none}
.k-brace-2{stroke:var(--steel);stroke-width:.7;stroke-dasharray:2 2;fill:none}
.k-meshfill{stroke:none}
.k-wire-t{stroke:var(--steel);stroke-width:.9}
.k-arm{stroke:var(--steel);stroke-width:1.6}
.k-barb{stroke:var(--steel);stroke-width:.75;fill:none}
.k-hatch{stroke:var(--rule-2);stroke-width:1}
.k-soil{stroke:none}
.k-grade{stroke:var(--steel);stroke-width:1.7}
.k-dot{fill:var(--pencil)}
.k-pebble{fill:none;stroke:var(--pencil);stroke-width:.6}
.k-mortar{fill:none;stroke:#F3EEE8;stroke-width:1}
.k-brick-bg{fill:#B9927A}
.k-conc-bg{fill:#DCDAD3}
.k-grav-bg{fill:#D3CEC4}
.k-pier{stroke:var(--steel);stroke-width:1}
.k-capstone{fill:var(--sheet-3);stroke:var(--steel);stroke-width:.9}
.k-gate{fill:none;stroke:var(--steel);stroke-width:2}
.k-spring{fill:none;stroke:var(--cedar);stroke-width:1.2}
.k-wheel{fill:var(--sheet);stroke:var(--steel);stroke-width:1.3}
.k-track{stroke:var(--steel);stroke-width:2.2}
.k-operator{fill:var(--steel-3);stroke:var(--steel);stroke-width:1}
.k-op-vent{fill:var(--graphite)}
.k-frame{fill:none;stroke:var(--steel);stroke-width:2.6}
.k-frame-ln{stroke:var(--steel);stroke-width:2.2}
.k-eye{fill:var(--cedar)}
.k-goose{fill:none;stroke:var(--steel);stroke-width:3}
.k-keypad{fill:var(--steel)}
.k-key{fill:var(--sheet-3)}
.k-ghost{fill:none;stroke:var(--pencil);stroke-width:1;stroke-dasharray:4 3}
.k-sag{fill:none;stroke:var(--alert);stroke-width:.9;stroke-dasharray:3 2}
.k-cable{stroke:var(--steel);stroke-width:1.3}
.k-turnbuckle{fill:var(--cedar);stroke:var(--steel);stroke-width:.6}
.k-wall{fill:var(--sheet-2);stroke:var(--steel);stroke-width:1}
.k-siding{stroke:var(--rule-2);stroke-width:.7}
.k-deckboard{fill:var(--composite);stroke:var(--steel);stroke-width:.6}
.k-joist{fill:var(--wood-2);stroke:var(--steel);stroke-width:.7}
.k-beam{fill:var(--wood-2);stroke:var(--steel);stroke-width:.8}
.k-post{fill:var(--wood);stroke:var(--steel);stroke-width:.8}
.k-footing{stroke:var(--steel);stroke-width:.8}
.k-baluster{stroke:var(--steel);stroke-width:1.2}
.k-stair{fill:none;stroke:var(--steel);stroke-width:1.5}
.k-stringer{stroke:var(--steel);stroke-width:1;stroke-dasharray:3 2}
.k-roof{fill:var(--steel-3);stroke:var(--steel);stroke-width:1}
.k-seam{stroke:var(--graphite);stroke-width:.6}
.k-slab{fill:var(--sheet-3);stroke:var(--steel);stroke-width:.6}
.k-rot{fill:#9C7B60;stroke:var(--alert);stroke-width:1.2;stroke-dasharray:2 1.5}
.k-sister{fill:var(--stamp-tint);stroke:var(--stamp);stroke-width:1.1}
.k-new{fill:var(--wood-3);stroke:var(--stamp);stroke-width:1.3}
.k-old{stroke:var(--alert);stroke-width:1.2;stroke-dasharray:4 3;fill:none}
.k-broken{fill:var(--wood-2);stroke:var(--alert);stroke-width:1.1}
.k-wind{fill:none;stroke:var(--graphite);stroke-width:1.2}
.k-stained{fill:#A8612F;stroke:var(--steel);stroke-width:.6}
.k-weathered{fill:#BAB6AD;stroke:var(--steel);stroke-width:.6}
.k-wetedge{stroke:var(--cedar);stroke-width:1.1;stroke-dasharray:3 3}
.k-clay-bg{fill:#E4D9CB}
.k-concrete{stroke:var(--steel);stroke-width:1}
.k-gravel{stroke:var(--steel);stroke-width:.6}
.k-crown{fill:none;stroke:var(--steel);stroke-width:1}
.k-remove{fill:none;stroke:var(--pencil);stroke-width:1.1;stroke-dasharray:4 3}
.k-remove-ln{stroke:var(--rule-2);stroke-width:.6;stroke-dasharray:3 3}
.k-backfill{stroke:var(--steel);stroke-width:.6}
.k-trailer{fill:var(--sheet-2);stroke:var(--steel);stroke-width:1.3}
.k-st-ln{stroke:var(--steel);stroke-width:2.2}
.k-arrow{fill:none;stroke:var(--cedar);stroke-width:1.5}
.k-dm{stroke:var(--cedar);stroke-width:.85;fill:none}
.k-ext{stroke:var(--cedar);stroke-width:.5;opacity:.75}
.k-knock{fill:var(--sheet)}
.k-dt{font:600 10px var(--mono);fill:var(--cedar-deep);letter-spacing:.04em}
.k-lb{font:500 9px var(--mono);fill:var(--graphite)}
.k-note{font:600 8.6px var(--mono);fill:var(--steel);letter-spacing:.06em}
.k-pin{fill:var(--cedar)}
.k-lead{stroke:var(--steel);stroke-width:.6;fill:none}
.k-tb{fill:var(--sheet);stroke:var(--steel);stroke-width:1}
.k-tbh{font:600 8.4px var(--mono);fill:var(--steel);letter-spacing:.08em}
.k-tbl{font:500 6.8px var(--mono);fill:var(--graphite);letter-spacing:.1em}
.k-tbv{font:600 8.2px var(--mono);fill:var(--steel);letter-spacing:.04em}

/* ── hero ───────────────────────────────────────────────────────── */
.hero{padding-block:clamp(36px,6vw,80px) clamp(48px,7vw,96px);border-bottom:1px solid var(--rule)}
.hero-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,64px);align-items:center}
.hero h1{margin:16px 0 20px}
.hero .lede{margin-bottom:28px}
.page-hero{padding-block:clamp(28px,4.5vw,56px) clamp(36px,5vw,64px);border-bottom:1px solid var(--rule)}
.page-hero .hero-grid{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.page-hero h1{font-size:clamp(2rem,4vw,3rem);margin:14px 0 18px}

/* ── cards ──────────────────────────────────────────────────────── */
.card{background:var(--sheet);border:1px solid var(--rule-2);display:flex;flex-direction:column;
  text-decoration:none;color:inherit;transition:border-color .2s,transform .2s,box-shadow .2s;position:relative}
a.card:hover{border-color:var(--steel);transform:translateY(-2px);box-shadow:0 18px 40px -26px rgba(38,49,61,.45)}
.card-art{background:var(--vellum);border-bottom:1px solid var(--rule);padding:14px 14px 10px;aspect-ratio:16/9;display:flex;align-items:center}
.card-art .drawing{max-height:100%}
.card-body{padding:18px 18px 20px;display:grid;gap:8px;align-content:start;flex:1}
.card-body p{margin:0;font-size:15px;line-height:1.55}
.card-code{font:500 11px var(--mono);letter-spacing:.12em;color:var(--cedar-deep);text-transform:uppercase}
.card h3{font:600 1.15rem/1.3 var(--display);letter-spacing:-.005em}
.card-more{margin-top:auto;padding-top:10px;font:600 13.5px var(--text);color:var(--steel);display:flex;align-items:center;gap:8px}
.card-more svg{width:14px;height:14px;transition:transform .2s}
a.card:hover .card-more svg{transform:translateX(3px)}
.card-links{list-style:none;margin:6px 0 0;padding:12px 0 0;border-top:1px solid var(--rule);display:grid;gap:2px}
.card-links a{display:flex;justify-content:space-between;gap:8px;padding:6px 0;font:500 14.5px/1.3 var(--text);color:var(--steel);text-decoration:none}
.card-links a:hover{color:var(--cedar-deep)}
.card-links .mc{font:500 11px var(--mono);color:var(--pencil)}
.silo-card .card-art{aspect-ratio:auto;padding:18px}
.silo-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.silo-count{font:500 11px var(--mono);color:var(--graphite);letter-spacing:.06em}

/* ── content blocks ─────────────────────────────────────────────── */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center}
.prose h2{margin:1.6em 0 .55em}
.prose h2:first-child{margin-top:0}
.prose h3{margin:1.4em 0 .4em}
.prose p,.prose li{max-width:68ch}
.checks{list-style:none;padding:0;margin:0 0 1em;display:grid;gap:10px}
.checks li{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;color:var(--steel);font-weight:500}
.checks svg{width:20px;height:20px;color:var(--stamp);margin-top:2px}
.checks.two{grid-template-columns:1fr 1fr;gap:10px 22px}
.spec{width:100%;border-collapse:collapse;font-size:15px;margin:0 0 1em}
.spec th,.spec td{text-align:left;padding:11px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.spec th{font:500 11.5px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--graphite);width:38%;padding-right:16px}
.spec td{color:var(--steel);font-weight:500}
.spec-wrap{overflow-x:auto}
.options{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:0 0 1.2em}
.option{background:var(--sheet);border:1px solid var(--rule-2);display:grid;align-content:start}
.option .card-art{aspect-ratio:auto;padding:10px}
.option-body{padding:14px 16px 16px}
.option-body h3{font-size:1.05rem;margin-bottom:6px}
.option-body p{font-size:14.5px;line-height:1.55;margin:0}
.factors{list-style:none;padding:0;margin:0 0 1em;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.factors li{background:var(--sheet);padding:16px 18px}
.factors strong{display:block;font-size:15.5px;margin-bottom:4px}
.factors span{font-size:14.5px;line-height:1.5}
.note{border-left:3px solid var(--cedar);background:var(--sheet);padding:16px 18px;margin:0 0 1.2em;font-size:15.5px}
.note strong{display:block;margin-bottom:4px}

/* steps: a real sequence, so numbered */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--rule-2);border:1px solid var(--rule-2);counter-reset:step}
.steps li{background:var(--sheet);padding:22px 20px 24px;counter-increment:step;display:grid;gap:8px;align-content:start}
.steps li::before{content:counter(step,decimal-leading-zero);font:800 2.4rem/1 var(--display);color:var(--cedar)}
.steps h3{font-size:1.05rem}
.steps p{margin:0;font-size:14.5px;line-height:1.55}

/* commitments */
.commit{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule-2);border:1px solid var(--rule-2)}
.commit > div{background:var(--sheet);padding:22px 20px;display:grid;gap:8px;align-content:start}
.commit svg{width:26px;height:26px;color:var(--cedar)}
.commit h3{font-size:1.05rem}
.commit p{margin:0;font-size:14.5px;line-height:1.55}

/* audiences */
.aud{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.aud > div{border-top:2px solid var(--steel);padding-top:14px;display:grid;gap:6px;align-content:start}
.aud h3{font:600 1.12rem/1.3 var(--display)}
.aud p{margin:0;font-size:14.5px;line-height:1.55}

/* dark band */
.band{background:var(--steel-2);color:var(--on-dark-2)}
.band h2,.band h3,.band strong{color:var(--on-dark)}
.band .code{color:var(--cedar-on-dark)}
.band a:not(.btn){color:var(--cedar-on-dark)}
.band .lede{color:var(--on-dark-2)}
.cta-band{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
.cta-band .tel-big{font:600 clamp(1.5rem,3vw,2.1rem)/1.1 var(--mono);color:var(--on-dark);text-decoration:none;display:inline-block;margin-top:6px}

/* chips / areas */
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.chips a,.chips span{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border:1px solid var(--rule-2);
  background:var(--sheet);color:var(--steel);text-decoration:none;font:600 14.5px var(--text);border-radius:var(--radius)}
.chips a:hover{border-color:var(--steel)}
.chips span{color:var(--graphite);font-weight:500;background:transparent;border-style:dashed}

/* faq */
.faq{border-top:1px solid var(--rule-2)}
.faq details{border-bottom:1px solid var(--rule-2)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:18px 0;font:700 1.06rem/1.35 var(--text);color:var(--steel)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:14px;height:14px;
  background:linear-gradient(var(--cedar),var(--cedar)) center/14px 2px no-repeat,linear-gradient(var(--cedar),var(--cedar)) center/2px 14px no-repeat;
  transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 0 20px;max-width:70ch}
.faq .a p:last-child{margin:0}

/* service page layout */
.svc-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(28px,4vw,56px);align-items:start}
.aside{position:sticky;top:calc(var(--hdr) + 18px);display:grid;gap:14px}
.quote-card{background:var(--sheet);border:1px solid var(--rule-2);border-top:4px solid var(--cedar);padding:22px}
.quote-card h2{font-size:1.9rem;margin-bottom:6px}
.quote-card > p{font-size:14.5px;margin-bottom:14px}
.aside-list{background:var(--sheet);border:1px solid var(--rule-2);padding:18px 20px}
.aside-list h3{font:500 11.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--graphite);margin-bottom:10px}
.aside-list ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.aside-list a{display:block;padding:6px 0;font:600 14.5px/1.35 var(--text);color:var(--steel);text-decoration:none}
.aside-list a:hover{color:var(--cedar-deep)}
.aside-list a[aria-current]{color:var(--cedar-deep)}
.related{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}

/* projects */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.filters button{min-height:40px;padding:0 15px;border:1px solid var(--rule-2);background:var(--sheet);color:var(--steel);
  font:600 14px var(--text);border-radius:var(--radius);cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--steel);border-color:var(--steel);color:var(--on-dark)}
.proj{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.proj-card .card-body{gap:10px}
.proj-meta{font:500 11.5px/1.5 var(--mono);letter-spacing:.06em;color:var(--graphite);text-transform:uppercase}
.proj-spec{list-style:none;margin:0;padding:10px 0 0;border-top:1px solid var(--rule);display:grid;gap:4px;
  font:500 12.5px/1.45 var(--mono);color:var(--steel)}
.proj-spec li{display:flex;justify-content:space-between;gap:12px}
.proj-spec span:first-child{color:var(--graphite)}
.proj-card[hidden]{display:none}
.tag-sample{display:inline-block;font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--graphite);border:1px dashed var(--rule-2);padding:4px 8px}

/* coverage diagram */
.coverage{position:relative;aspect-ratio:4/3;background:var(--sheet);border:1px solid var(--rule-2);overflow:hidden}
.coverage svg{width:100%;height:100%;display:block}
.cv-road{stroke:var(--rule-2);stroke-width:1.2;fill:none}
.cv-ring{fill:none;stroke:var(--cedar);stroke-width:1;stroke-dasharray:4 4}
.cv-dot{fill:var(--steel)}
.cv-home{fill:var(--cedar)}
.cv-lbl{font:600 12px var(--mono);fill:var(--steel);letter-spacing:.06em}
.cv-sub{font:500 9.5px var(--mono);fill:var(--graphite);letter-spacing:.08em}
.cv-link{cursor:pointer}
.cv-link:hover .cv-lbl,.cv-link:focus .cv-lbl{fill:var(--cedar-deep)}

/* ── forms ──────────────────────────────────────────────────────── */
.form{display:grid;gap:18px}
.field{display:grid;gap:7px;min-width:0}
.field label,.legend{font:600 14px/1.3 var(--text);color:var(--steel)}
.legend{padding:0;margin:0 0 2px}
.req{color:var(--cedar-deep)}
.opt{font-weight:400;color:var(--graphite);font-size:13px}
.input,.select,.textarea{width:100%;min-height:50px;padding:12px 14px;border:1.5px solid var(--rule-2);border-radius:var(--radius);
  background:var(--sheet);color:var(--steel);font:500 16px/1.4 var(--text);transition:border-color .15s,box-shadow .15s}
.textarea{min-height:130px;resize:vertical}
.select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--steel) 50%),linear-gradient(135deg,var(--steel) 50%,transparent 50%);
  background-position:calc(100% - 20px) 22px,calc(100% - 15px) 22px;background-size:5px 5px;background-repeat:no-repeat;padding-right:40px}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--steel);box-shadow:0 0 0 3px var(--cedar-tint)}
.field.invalid .input,.field.invalid .select,.field.invalid .textarea{border-color:var(--alert);box-shadow:0 0 0 3px var(--alert-tint)}
.err{display:none;font:500 13px/1.4 var(--text);color:var(--alert)}
.field.invalid .err,fieldset.invalid .err{display:block}
.help{font-size:13px;line-height:1.45;color:var(--graphite)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
fieldset{border:0;margin:0;padding:0;min-width:0}
.choice{display:flex;flex-wrap:wrap;gap:8px}
.choice label{position:relative;cursor:pointer}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1.5px solid var(--rule-2);border-radius:var(--radius);
  background:var(--sheet);font:600 14.5px var(--text);color:var(--steel);transition:all .15s}
.choice input:checked+span{background:var(--steel);border-color:var(--steel);color:var(--on-dark)}
.choice input:focus-visible+span{outline:3px solid var(--cedar);outline-offset:2px}
.drop{position:relative;border:1.5px dashed var(--rule-2);background:var(--sheet);padding:22px;text-align:center;border-radius:var(--radius);transition:all .15s}
.drop.over{border-color:var(--cedar);background:var(--cedar-tint)}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.drop svg{width:28px;height:28px;color:var(--cedar);margin-bottom:6px}
.drop strong{display:block;font-size:15px}
.drop span{font-size:13px}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;margin-top:4px}
.thumbs:empty{display:none}
.thumb{position:relative;aspect-ratio:1;background:var(--sheet-2);border:1px solid var(--rule-2);overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb button{position:absolute;top:4px;right:4px;width:26px;height:26px;border:0;border-radius:50%;background:rgba(38,49,61,.82);
  color:#fff;cursor:pointer;font:700 14px/1 var(--text);display:grid;place-items:center}
.thumb small{position:absolute;left:0;right:0;bottom:0;background:rgba(38,49,61,.7);color:#fff;font:500 10px/1.2 var(--mono);padding:3px 5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.consent{font-size:13px;line-height:1.5;color:var(--graphite)}
.progress{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:6px}
.progress div{display:grid;gap:8px;font:500 11.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--graphite)}
.progress div::before{content:"";height:4px;background:var(--rule)}
.progress .on{color:var(--steel)}
.progress .on::before{background:var(--cedar)}
.step-panel[hidden]{display:none}
.form-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.form-status{display:none;padding:14px 16px;border-radius:var(--radius);font-size:14.5px}
.form-status.show{display:block}
.form-status.error{background:var(--alert-tint);color:var(--alert);border:1px solid #E3B5AD}
.success{display:none;text-align:left}
.success.show{display:grid;gap:14px}
.success .stamp{display:inline-flex;align-items:center;gap:10px;font:600 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--stamp);border:2px solid var(--stamp);padding:8px 12px;width:max-content;transform:rotate(-1.5deg)}
.success ol{margin:0;padding-left:1.2em;display:grid;gap:6px}
.est-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(28px,4vw,56px);align-items:start}
.form-shell{background:var(--sheet);border:1px solid var(--rule-2);padding:clamp(20px,3vw,34px)}
.btn[disabled]{opacity:.6;cursor:progress}

/* ── footer ─────────────────────────────────────────────────────── */
.ftr{background:var(--steel-2);color:var(--on-dark-2);padding-top:clamp(48px,6vw,72px);font-size:15px}
.ftr a{color:var(--on-dark);text-decoration:none}
.ftr a:hover{color:var(--cedar-on-dark)}
.ftr-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.2fr;gap:32px}
.ftr h2{font:500 11.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-2);margin-bottom:14px}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ftr .brand{color:var(--on-dark)}
.ftr .bm-frame{stroke:var(--on-dark)}
.ftr .bm-post{fill:var(--on-dark)}
.ftr .brand-sub{color:var(--on-dark-2)}
.ftr-about p{margin:16px 0 0;max-width:34ch;font-size:14.5px;line-height:1.6}
.ftr-tel{font:600 1.15rem var(--mono)}
.ftr-base{margin-top:clamp(36px,5vw,56px);border-top:1px solid rgba(236,236,230,.14);padding-block:20px;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;font-size:13px}
.ftr-base p{margin:0}
.ftr-disclose{color:var(--on-dark-2)}

/* ── build notes ────────────────────────────────────────────────── */
.tree{display:grid;gap:14px}
.tree-root{background:var(--steel);color:var(--on-dark);padding:14px 18px;font:600 14px var(--mono);letter-spacing:.06em;width:max-content}
.tree-silos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;position:relative;padding-top:18px}
.tree-silos::before{content:"";position:absolute;top:0;left:12%;right:12%;height:18px;border:1px solid var(--rule-2);border-bottom:0}
.tree-silo{background:var(--sheet);border:1px solid var(--rule-2)}
.tree-silo > a{display:block;padding:12px 14px;background:var(--steel-2);color:var(--on-dark);font:600 13px var(--mono);letter-spacing:.04em;text-decoration:none}
.tree-silo ul{list-style:none;margin:0;padding:8px 14px 12px;display:grid;gap:4px}
.tree-silo li a{font:500 12.5px/1.4 var(--mono);color:var(--steel);text-decoration:none}
.tree-silo li a:hover{color:var(--cedar-deep)}
.tree-areas{background:var(--cedar-tint);border:1px solid #DDBFA7;padding:12px 16px;font:500 12.5px/1.6 var(--mono);color:var(--steel)}
.url-table{width:100%;border-collapse:collapse;font:500 13px/1.5 var(--mono)}
.url-table th,.url-table td{text-align:left;padding:9px 12px 9px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.url-table th{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--graphite)}
.url-table td:first-child{color:var(--cedar-deep);white-space:nowrap}

/* ── responsive ─────────────────────────────────────────────────── */
@media(max-width:1080px){
  .ftr-grid{grid-template-columns:1fr 1fr 1fr}
  .ftr-about{grid-column:1/-1}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .aud{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proj{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:960px){
  :root{--hdr:64px}
  .nav,.hdr-tel,.hdr-cta .btn{display:none}
  .icon-btn{display:inline-flex}
  .hdr-cta{margin-left:auto;gap:8px}
  .hero-grid,.page-hero .hero-grid,.split,.cta-band{grid-template-columns:1fr}
  .svc-layout,.est-layout{grid-template-columns:1fr}
  .aside{position:static}
  .tree-silos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tree-silos::before{display:none}
  .related{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .mbar{display:grid;grid-template-columns:1fr 1.25fr;position:fixed;left:0;right:0;bottom:0;z-index:70;
    background:var(--steel);padding:8px 8px calc(8px + env(safe-area-inset-bottom));gap:8px;box-shadow:0 -8px 24px -12px rgba(38,49,61,.5)}
  .mbar .btn{min-height:48px;font-size:14.5px;padding:0 10px}
  .g3,.commit{grid-template-columns:repeat(2,minmax(0,1fr))}
  .options{grid-template-columns:repeat(2,minmax(0,1fr))}
  .factors{grid-template-columns:1fr}
  .checks.two{grid-template-columns:1fr}
  .proj{grid-template-columns:1fr}
  .ftr-grid{grid-template-columns:1fr 1fr;gap:28px 18px}
}
@media(max-width:620px){
  body{font-size:16px}
  .brand-name{font-size:1.15rem}
  .brand-sub{font-size:8.5px;letter-spacing:.16em}
  .brand-mark{width:32px;height:32px}
  .hero h1{font-size:clamp(1.9rem,8vw,2.4rem)}
  .page-hero h1{font-size:clamp(1.75rem,7.4vw,2.2rem)}
  .btn-row .btn{flex:1 1 auto}
  .hero .btn-row .btn{flex:1 1 100%}
  /* small-card grids sit two-up on phones instead of one long column */
  .g2.cards-2,.g3,.g4,.commit,.steps,.aud,.related,.options{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .card-body{padding:13px 12px 14px;gap:6px}
  .card h3{font-size:1.18rem}
  .card-body p{font-size:13.5px;line-height:1.45}
  .card-art{padding:8px}
  .card-more{font-size:12.5px;padding-top:6px}
  .silo-card .card-links{display:none}
  .silo-card .card-art{padding:10px}
  .steps li,.commit > div{padding:15px 13px 16px}
  .steps li::before{font-size:1.8rem}
  .steps p,.commit p,.aud p{font-size:13.5px}
  .commit h3,.steps h3{font-size:.98rem}
  .aud h3{font-size:1.2rem}
  .option-body{padding:10px 11px 12px}
  .option-body h3{font-size:.95rem}
  .option-body p{font-size:13px}
  .row2{grid-template-columns:1fr}
  .proj-rail{display:grid;grid-auto-flow:column;grid-auto-columns:82%;grid-template-columns:none;overflow-x:auto;
    scroll-snap-type:x mandatory;gap:12px;padding-bottom:8px;scrollbar-width:none}
  .proj-rail::-webkit-scrollbar{display:none}
  .proj-rail > *{scroll-snap-align:start}
  .tree-silos{grid-template-columns:1fr 1fr;gap:8px}
  .url-table{font-size:11.5px}
  .spec th{width:44%}
  .ftr-base{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}
@media print{.hdr,.mbar,.drawer,.ftr,.aside{display:none}body{background:#fff}}

/* Drawing notes and title blocks shrink below legibility on a phone;
   there the elevation and its dimensions carry the drawing alone. */
@media(max-width:620px){.drawing .co,.drawing .tb{display:none}}

/* ── components added with the page templates ──────────────────── */
.sheet-frame{padding-top:34px}
.card h3 a{color:inherit;text-decoration:none}
.card h3 a:hover{color:var(--cedar-deep)}
a.card-more{text-decoration:none}
a.card-more:hover{color:var(--cedar-deep)}
.compare{width:100%;min-width:560px;border-collapse:collapse;font-size:15px;background:var(--sheet);border:1px solid var(--rule-2)}
.compare th,.compare td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--rule);vertical-align:top}
.compare thead th{font:500 11.5px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--graphite);background:var(--sheet-2)}
.compare tbody th{color:var(--steel);font-weight:600}
.compare tbody tr:last-child > *{border-bottom:0}
.coverage{margin:0}
.cv-cap{position:absolute;right:12px;bottom:10px;font:500 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--graphite)}
.chips svg{width:15px;height:15px;color:var(--cedar);flex:none}
.aside-list .steps{counter-reset:step}
.aside-list .steps li{padding:12px 0;background:none;border-top:1px solid var(--rule);grid-template-columns:34px 1fr;column-gap:8px}
.aside-list .steps li::before{font-size:1.5rem;grid-row:span 2}
.aside-list .steps li:first-child{border-top:0}
.mbar .btn svg{width:17px;height:17px}
.checks li > span{min-width:0}
.prose > .note{margin-top:1em}
.url-table td:nth-child(3){color:var(--graphite)}
/* Long email addresses must wrap inside the two-column phone footer
   instead of pushing the page wider than the screen. */
.ftr li,.ftr a{overflow-wrap:anywhere}

/* Mega menus hang from the nav, not the item, so even the last one stays
   inside the viewport (a hidden menu still counts toward scroll width). */
.nav{position:relative}
.nav-item{position:static}
.mega{left:0;transform:translate(0,6px)}
.nav-item.open>.mega,.nav-item:focus-within>.mega{transform:none}
@media(hover:hover){.nav-item:hover>.mega{transform:none}}
/* Brand + seven nav items + phone + button need ~1,160px. Drop the phone
   below 1280 and switch to the menu button below 1120 (tablet landscape). */
@media(max-width:1280px){.hdr-tel{display:none}}
@media(max-width:1120px){
  .nav,.hdr-cta .btn{display:none}
  .icon-btn{display:inline-flex}
  .hdr-cta{margin-left:auto;gap:8px}
}
.spec td,.spec td a{overflow-wrap:anywhere}
/* every card's drawing panel shares one shape, so the text rows line up */
.silo-card .card-art,.card-art{aspect-ratio:16/8}
.card-art .drawing{width:100%;height:100%}
.option .card-art{aspect-ratio:16/8}
.card-links .mc,.mega-list .mc{white-space:nowrap}
figure{margin:0}
@media(max-width:760px){
  /* room for the sticky call bar lives inside the dark footer, not below it */
  body{padding-bottom:0}
  .ftr{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
}
@media(max-width:620px){
  /* hairline grids keep their 1px rules on phones */
  .steps,.commit{gap:1px}
  .silo-count{display:none}
  .silo-head .card-code{white-space:nowrap}
}
/* Component display rules (e.g. .form{display:grid}) must never beat the
   hidden attribute — after a submit the form has to actually disappear. */
[hidden]{display:none!important}
/* fields inside each form step get the same rhythm as the form itself */
.step-panel{display:grid;gap:18px}
.aside-list .steps h3{font:700 1rem/1.3 var(--text);letter-spacing:0;text-transform:none;color:var(--steel);margin:0 0 4px}
/* silo tree: root centred over the bracket, joined by a stem */
.tree-root{margin:0 auto;position:relative}
.tree-root::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:14px;background:var(--rule-2)}
@media(max-width:960px){.tree-root{margin:0}.tree-root::after{display:none}}

/* ── land clearing drawings ─────────────────────────────────────── */
.k-trunk{fill:var(--wood-2);stroke:var(--steel);stroke-width:.8}
.k-canopy-ol,.k-scrub-ol,.k-keeper-ol{fill:var(--steel);stroke:var(--steel);stroke-width:1}
.k-canopy{fill:#D2E0D7}
.k-scrub{fill:#BFD1C5}
.k-keeper{fill:#C3D9CB}
.k-keeper-ol{fill:var(--stamp);stroke:var(--stamp)}
.k-stem{stroke:var(--steel);stroke-width:1.4;fill:none}
.k-flag{fill:var(--cedar)}
.k-stake{fill:var(--wood-2);stroke:var(--steel);stroke-width:.6}
.k-mulch-bg{fill:#CDB397}
.k-chip{fill:none;stroke:var(--wood-2);stroke-width:.9}
.k-mulch{stroke:var(--steel);stroke-width:.5}
.k-track-out{fill:var(--steel);stroke:var(--steel);stroke-width:.6}
.k-track-in{fill:var(--steel-3)}
.k-machine{fill:var(--cedar);stroke:var(--steel);stroke-width:.9}
.k-cab{fill:var(--sheet);stroke:var(--steel);stroke-width:1.3}
.k-glass{fill:#DCE6E8;stroke:var(--steel);stroke-width:.6}
.k-glare{stroke:#FFFFFF;stroke-width:2}
.k-cyl{stroke:var(--steel-3);stroke-width:3.2}
.k-head{fill:var(--steel-3);stroke:var(--steel);stroke-width:.9}
.k-drum{fill:var(--sheet-3);stroke:var(--steel);stroke-width:1}
.k-teeth{stroke:var(--steel);stroke-width:1.6}
.k-skid{stroke:var(--steel);stroke-width:1.6}
.k-blade{stroke:var(--sheet-3);stroke-width:1.4;stroke-dasharray:5 3}
.k-edge{stroke:var(--steel);stroke-width:1.8}
.k-debris{fill:var(--sheet-3);stroke:var(--steel);stroke-width:.8}
.k-debris-ln{stroke:var(--steel);stroke-width:1.2}
.k-stubble{stroke:var(--stamp);stroke-width:1}
.k-scrubplan{fill:none;stroke:#9FB5A7;stroke-width:.8}
.k-planzone{stroke:none}
.k-strip{fill:var(--cedar-tint);stroke:var(--cedar);stroke-width:.8;stroke-dasharray:5 3}
.k-plantree{fill:#D2E0D7;stroke:var(--steel);stroke-width:.9}
.k-plantree-keep{fill:#C3D9CB;stroke:var(--stamp);stroke-width:2}
.k-plantree-in{fill:none;stroke:var(--steel);stroke-width:.5;stroke-dasharray:2 2}
.k-propline{stroke:var(--steel);stroke-width:1.2;stroke-dasharray:14 4 2 4}
.k-pinplan{fill:var(--sheet);stroke:var(--cedar);stroke-width:1.4}
.k-fillzone{fill:var(--cedar-tint);stroke:none}
.k-cutzone{fill:var(--sheet-3);stroke:none}
.k-oldgrade{fill:none;stroke:var(--alert);stroke-width:1.1;stroke-dasharray:5 3}
.k-arm{fill:var(--steel-2);stroke:var(--steel);stroke-width:.9}
.k-pin-pivot{fill:var(--sheet-3);stroke:var(--steel);stroke-width:.8}

/* home trades grid: five trade cards + a scoping tile, 3 x 2 */
.silo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.silo-cta{background:var(--steel-2);border-color:var(--steel-2);color:var(--on-dark-2)}
.silo-cta .card-body{align-content:center;gap:12px;padding:26px 24px}
.silo-cta h3{color:var(--on-dark);font:600 1.45rem/1.25 var(--display)}
.silo-cta .card-code{color:var(--cedar-on-dark)}
.silo-cta p{color:var(--on-dark-2)}
.silo-cta .btn{justify-self:start;margin-top:6px}
.silo-cta a.card-more{color:var(--on-dark)}
.silo-cta a.card-more:hover{color:var(--cedar-on-dark)}
@media(max-width:1080px){.silo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){
  .silo-grid{gap:10px}
  .silo-cta .card-body{padding:14px 12px;gap:8px}
  .silo-cta h3{font-size:1.25rem}
  .silo-cta .btn{white-space:normal;text-align:center;min-height:44px;padding:8px 12px;font-size:13.5px;line-height:1.25}
}
/* build-notes tree: one column per trade */
.tree-silos{grid-template-columns:repeat(5,minmax(0,1fr))}
.tree-silo li a{overflow-wrap:anywhere}
@media(max-width:960px){.tree-silos{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Desktop utility bar: phone, hours and area move up here so the main
   header has room for every trade in the nav. */
.topbar{background:var(--steel-2);color:var(--on-dark-2);font:500 12.5px/1 var(--mono);letter-spacing:.03em}
.topbar-in{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:38px}
.topbar span,.topbar a{display:inline-flex;align-items:center;gap:8px}
.topbar svg{width:14px;height:14px;color:var(--cedar-on-dark);flex:none}
.topbar a{color:var(--on-dark);text-decoration:none;font-weight:600;font-size:13.5px}
.topbar a:hover{color:var(--cedar-on-dark)}
.hdr-tel{display:none!important}
/* brand + eight nav items + estimate button need ~1,050px */
@media(max-width:1180px){
  .topbar{display:none}
  .nav,.hdr-cta .btn{display:none}
  .icon-btn{display:inline-flex}
  .hdr-cta{margin-left:auto;gap:8px}
}
/* The panel's shape alone sets its height; the drawing scales inside it,
   so cards in a row always line up whatever each drawing's proportions. */
.card-art{position:relative}
.card-art .drawing{position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px)}

/* ── hero video ─────────────────────────────────────────────────── */
.vid-frame{padding-top:34px}
.vid-box{position:relative;aspect-ratio:16/9;background:var(--sheet);overflow:hidden}
.vid-box video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.vid-btn{position:absolute;top:3px;right:6px;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 8px;
  border:0;background:none;color:var(--graphite);font:500 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.vid-btn svg{width:11px;height:11px}
.vid-btn .i-play,.vid-btn.is-paused .i-pause{display:none}
.vid-btn.is-paused .i-play{display:block}
.vid-btn:hover{color:var(--cedar-deep)}

/* ── maps ───────────────────────────────────────────────────────── */
.map-frame{padding-top:34px;margin:0}
.map-box{position:relative;aspect-ratio:4/3;background:var(--sheet-2);overflow:hidden;border:1px solid var(--rule)}
.map-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.map-fallback{background:var(--sheet)}
.map-fallback svg{width:100%;height:100%;display:block}
.map-note{margin:10px 0 0;padding:8px 10px;background:var(--sheet-2);border:1px dashed var(--rule-2);
  font:500 10.5px/1.45 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--graphite)}
.map-cap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 16px;padding-top:12px;
  font:500 11px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--graphite)}
.map-cap a{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--cedar-deep);text-decoration:none}
.map-cap a:hover{text-decoration:underline}
.map-cap svg{width:13px;height:13px;flex:none}

/* ── photos (rendered only when photos/<key>/ has images) ─────────── */
.ph-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ph{margin:0;background:var(--sheet);border:1px solid var(--rule-2);padding:8px}
.ph picture,.ph img{display:block;width:100%}
.ph img{height:auto;aspect-ratio:4/3;object-fit:cover}
.ph figcaption{padding:10px 2px 2px;font:500 11px/1.45 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--graphite)}
.ph-sec{padding-top:0}
.card-art.has-photo picture,.card-art.has-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:620px){
  .ph-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;overflow-x:auto;scroll-snap-type:x mandatory;
    margin-inline:calc(var(--gutter) * -1);padding:0 var(--gutter) 8px;scroll-padding-inline:var(--gutter);scrollbar-width:thin}
  .ph{scroll-snap-align:start}
}

.nowrap{white-space:nowrap}
@media(max-width:360px){.ftr .ftr-mail{font-size:14px}}

/* ── bigger hero video ──────────────────────────────────────────── */
@media(min-width:1181px){
  .hero .hero-grid{grid-template-columns:minmax(0,3.75fr) minmax(0,6.25fr);gap:48px}
  .hero h1{font-size:clamp(2.2rem,4.4vw,3.4rem)}
}
@media(max-width:620px){.hero .vid-frame{margin-inline:calc(var(--gutter) * -1 + 4px);padding:32px 6px 6px}}

/* ── real map with the line map as its key ──────────────────────── */
.map-duo{position:relative}
.map-key{position:absolute;z-index:3;top:10px;right:10px;width:44%;padding:6px;background:var(--sheet);
  border:1px solid var(--rule-2);box-shadow:0 2px 10px rgba(38,49,61,.12)}
.map-key svg{display:block;width:100%;height:auto}
.cv-key .cv-lbl{font-size:27px;letter-spacing:.03em}
.cv-key .cv-sub{font-size:19px;letter-spacing:.05em}
.cv-key .cv-road{stroke-width:2.2}
.cv-key .cv-ring{stroke-width:2;stroke-dasharray:7 6}
.map-real picture,.map-real img{position:absolute;inset:0;width:100%;height:100%;display:block}
.map-real img{object-fit:cover}
.map-ring{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.map-ring circle{fill:none;stroke:var(--cedar);stroke-width:2;stroke-dasharray:8 6}
.map-ring text{font:600 15px var(--mono);letter-spacing:.12em;fill:var(--cedar-deep);text-anchor:middle;
  paint-order:stroke;stroke:var(--sheet);stroke-width:4px}
.map-pins{list-style:none;margin:0;padding:0}
/* Google-style pins: a red teardrop whose tip sits on the point, red label with a white halo */
.pin{position:absolute;width:0;height:0;--s:20px;--lift:14px}
.pin.home{--s:24px;--lift:17px}
.pin.cur{--s:28px;--lift:20px}
.pin::before{content:"";position:absolute;left:calc(var(--s) / -2);top:calc(var(--lift) * -1 - var(--s) / 2);width:var(--s);height:var(--s);
  background:#ea4335;border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:-1px 1px 3px rgba(60,64,67,.4)}
.pin::after{content:"";position:absolute;left:calc(var(--s) * -.18);top:calc(var(--lift) * -1 - var(--s) * .18);width:calc(var(--s) * .36);height:calc(var(--s) * .36);
  border-radius:50%;background:#b31412}
.pin > a,.pin > span{position:absolute;left:calc(var(--s) / 2 + 4px);top:calc(var(--lift) * -1);transform:translateY(-50%);white-space:nowrap;
  font:600 14px/1.15 var(--text);color:#c5221f;text-decoration:none;
  text-shadow:0 0 2px #fff,0 0 2px #fff,0 0 3px #fff,1px 1px 0 #fff,-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff}
.pin small{display:block;font:500 10px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#5f6368}
.pin > a:hover,.pin > a:focus-visible{text-decoration:underline}
.pin.flip > a,.pin.flip > span{left:auto;right:calc(var(--s) / 2 + 4px);text-align:right}
.pin.home > a,.pin.cur > span{font-weight:700}
.pin.cur > span{font-size:15px}
.map-key ~ .map-box .pin.under-key{display:none}
.map-attr{position:absolute;right:0;bottom:0;z-index:2;padding:2px 6px;background:rgba(255,255,255,.85);
  font:400 10px/1.3 var(--text);color:#5f6368}
.map-attr a{color:inherit;text-decoration:none}
.map-attr a:hover{color:#202124;text-decoration:underline}
@media(max-width:620px){
  .map-key{position:static;width:auto;margin-bottom:10px;box-shadow:none}
  .map-key ~ .map-box .pin.under-key{display:block}
  .map-real .pin > a,.map-real .pin > span{font-size:12px}
}

/* ── home: cities and line map in a row, then a full-width map ───── */
.map-sec{padding-bottom:clamp(40px,5vw,64px)}
.map-panels{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:20px;margin-bottom:28px}
.map-panels .map-areas,.map-panels .map-key{position:static;width:auto;background:var(--sheet);border:1px solid var(--rule-2);box-shadow:none}
.map-panels .map-areas{padding:22px 24px;display:flex;flex-direction:column;justify-content:center}
.map-panels .map-key{padding:8px;margin:0;display:flex;align-items:center}
.map-areas .chips{gap:8px}
.map-areas .help{margin:16px 0 8px !important}
.map-canvas{--mh:clamp(520px,42vw,600px);position:relative;height:var(--mh);overflow:hidden;background:#f8f8f8;border-block:1px solid var(--rule-2)}
.map-canvas iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
/* the render is 1500 x 600 px: shown at that size (or larger on wide screens) and cropped
   to the screen around its centre, where the pins are, so labels never shrink */
.map-stage{position:absolute;left:50%;top:50%;width:max(100%,1500px);aspect-ratio:5/2;transform:translate(-50%,-50%)}
.map-stage picture,.map-stage img{position:absolute;inset:0;width:100%;height:100%;display:block}
.map-canvas > .map-fallback{height:100%;display:flex;justify-content:center}
.map-canvas > .map-fallback svg{height:100%;width:auto}
.map-foot{padding-top:14px}
@media(max-width:860px){.map-panels{grid-template-columns:minmax(0,1fr) minmax(0,300px)}}
@media(max-width:620px){
  .map-panels{grid-template-columns:1fr;gap:12px;margin-bottom:20px}
  .map-panels .map-areas{padding:0;border:0;background:none}
}

/* ── trade cards with a photo ───────────────────────────────────── */
.silo-card .card-art.has-photo{aspect-ratio:16/9;padding:0}

/* ── design pass (taste skill): one job per section ─────────────── */
/* Hero holds eyebrow, headline, one line of copy and the CTAs; the
   standards that used to sit under the buttons get their own strip. */
@media(min-width:1181px){
  .hero .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px}
  .hero h1{font-size:clamp(2.2rem,3.6vw,3.2rem)}
}
.hero .lede{max-width:50ch;text-wrap:pretty}
.proof-bar{background:var(--sheet);border-bottom:1px solid var(--rule)}
.proof{list-style:none;margin:0;padding:18px 0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 28px;
  font:500 13px/1.3 var(--mono);letter-spacing:.03em;color:var(--steel)}
.proof li{display:flex;align-items:center;gap:9px}
.proof svg{width:16px;height:16px;color:var(--stamp);flex:none}
@media(max-width:760px){.proof{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;padding:16px 0}}
@media(max-width:440px){.proof{grid-template-columns:1fr}}

/* Home projects: one featured job across the row, two below, so the
   section doesn't repeat the trade-card grid above it. */
@media(min-width:761px){
  .proj-feature{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proj-feature > :first-child{grid-column:1/-1;flex-direction:row}
  .proj-feature > :first-child .card-art{flex:0 0 50%;aspect-ratio:auto;min-height:300px;border-bottom:0;border-right:1px solid var(--rule)}
  .proj-feature > :first-child .card-body{padding:28px 30px 30px;align-content:center}
  .proj-feature > :first-child h3{font-size:2rem}
}
@media(min-width:1081px){.proj-feature > :first-child .proj-spec{grid-template-columns:1fr 1fr;column-gap:28px}}

/* Standards: an open list, not another boxed grid. */
.commit-open{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 56px;background:none;border:0}
.commit-open > div{background:none;padding:0;grid-template-columns:40px minmax(0,1fr);column-gap:16px;row-gap:6px}
.commit-open > div svg{grid-row:1 / span 2;width:30px;height:30px;margin-top:1px}
.commit-open h3{font-size:1.12rem}
.commit-open p{font-size:15px;max-width:48ch}
@media(max-width:760px){.commit-open{grid-template-columns:1fr;gap:24px}}
@media(max-width:620px){.commit-open{gap:22px}.commit-open > div{padding:0}.commit-open h3{font-size:1.02rem}.commit-open p{font-size:14.5px}}

/* Specifications: one rule over the group instead of a hairline under every row. */
.spec-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px 32px;margin:0 0 1.2em;
  padding-top:20px;border-top:2px solid var(--steel)}
.spec-grid > div{min-width:0}
.spec-grid dt{font:500 11.5px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--graphite)}
.spec-grid dd{margin:6px 0 0;color:var(--steel);font-weight:500;font-size:15.5px;line-height:1.45;overflow-wrap:anywhere}

.map-areas > h3{margin:0 0 14px}
/* small codes beside links need AA contrast */
.card-links .mc{color:var(--graphite)}