/* Blueprint-light system for the b-series: engineering linework on a white sheet, gold + navy */
:root{
  --paper:#FFFFFF; --sheet:#FBFAF6; --ink:#16192A; --ink-2:#5A5E6E; --rule:rgba(22,25,42,.12);
  --gold:#E0A82E; --gold-l:#F0C760; --line:#B08221; --line-2:rgba(176,130,33,.45); --navy:#1B2A5C; --navy-2:rgba(27,42,92,.55);
  --display:"Archivo",Helvetica,Arial,sans-serif; --sans:"Hanken Grotesk",Helvetica,Arial,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace; --hand:"Architects Daughter",cursive;
  --gut:clamp(18px,4vw,56px); --max:1320px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.grid{background-color:var(--paper);background-image:linear-gradient(rgba(27,42,92,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(27,42,92,.045) 1px,transparent 1px),linear-gradient(rgba(27,42,92,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(27,42,92,.025) 1px,transparent 1px);background-size:120px 120px,120px 120px,24px 24px,24px 24px}

/* type */
.h1{text-wrap:balance;font-family:var(--display);font-weight:700;letter-spacing:-.025em;line-height:1;font-stretch:96%}
.h1 .g{color:var(--line)}
.tag{display:inline-flex;align-items:center;gap:10px;font:500 12px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--navy)}
.tag::before{content:"";width:22px;height:1px;background:var(--line)}
.mono{font:500 11.5px/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.lede{font-size:clamp(16px,1.3vw,18px);line-height:1.6;color:var(--ink-2)}
.hand{font-family:var(--hand);color:var(--navy)}

.btn{display:inline-flex;align-items:center;gap:12px;background:var(--gold);color:var(--ink);text-decoration:none;padding:16px 22px;font:700 14px/1 var(--sans);letter-spacing:.04em;border:0;cursor:pointer;transition:background .2s,transform .1s}
.btn:hover{background:var(--gold-l)}
.btn.line{background:transparent;border:1.5px solid var(--ink)}
.btn.line:hover{background:var(--ink);color:#fff}
.actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}

/* header */
header.site{background:var(--paper);border-bottom:1px solid var(--rule);position:relative;z-index:20}
header.site::after{content:"";position:absolute;left:0;bottom:-1px;width:160px;height:2px;background:var(--gold)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:80px;gap:24px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{height:46px;width:auto}
.brand b{display:block;font:700 18px/1 var(--display);letter-spacing:.04em;text-transform:uppercase}
.brand small{display:block;font:500 10.5px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin-top:4px}
header.site nav{display:flex;gap:30px;font:600 14px/1 var(--sans)}
header.site nav a{text-decoration:none;padding:8px 0;border-bottom:1.5px solid transparent}
header.site nav a:hover{border-color:var(--gold)}
header.site .cta{display:flex;align-items:center;gap:20px}
.tel{text-decoration:none;font:600 15px/1 var(--display);letter-spacing:.02em;display:flex;align-items:center;gap:8px}
.tel svg{width:16px;height:16px;stroke:var(--line);fill:none;stroke-width:2}
header.site .btn{padding:14px 18px}

.hero{position:relative;min-height:max(620px,calc(100svh - 80px));overflow:hidden}

/* stage: fixed-ratio canvas where SVG and HTML overlay share coordinates (overlay uses % and cqw) */
.stagewrap{display:grid;place-items:center;min-height:max(620px,calc(100svh - 80px));overflow:hidden}
.stage{position:relative;width:min(100%,calc((max(620px,100svh - 80px)) * 16 / 9));aspect-ratio:16/9;container-type:inline-size}
.stage>svg{position:absolute;inset:0;width:100%;height:100%}
.ov{position:absolute;z-index:2}
@media (max-width:760px){.stage{aspect-ratio:auto;width:100%}.stage>svg{position:relative;height:auto;display:block}.ov{position:relative;left:auto!important;top:auto!important;width:auto!important;transform:none!important;margin:0 var(--gut) 24px}}

/* drawing styles (used by iso.js) */
svg .l1{fill:none;stroke:var(--line);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
svg .l2{fill:none;stroke:var(--line-2);stroke-width:.9;stroke-linecap:round;stroke-linejoin:round}
svg .l3{fill:none;stroke:var(--line-2);stroke-width:.8;stroke-dasharray:4 4}
svg .nv{fill:none;stroke:var(--navy);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
svg .nv2{fill:none;stroke:var(--navy-2);stroke-width:.8}
svg .fw{fill:#fff}
svg .fg{fill:var(--gold);stroke:var(--line);stroke-width:1.2}
svg .fgl{fill:#FBF1D8;stroke:var(--line);stroke-width:1.2}
svg .dim{fill:none;stroke:var(--navy);stroke-width:.8}
svg .dt{font:500 11px var(--mono);fill:var(--navy);letter-spacing:.04em}
svg .ht{font:400 15px var(--hand);fill:var(--navy)}
svg .bt{font:600 11px var(--mono);fill:var(--navy)}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadein{to{opacity:1}}

@media (max-width:1100px){header.site nav{display:none}}
@media (max-width:640px){.brand small{display:none}.brand img{height:34px}.brand b{font-size:13.5px;letter-spacing:.02em}.tel{display:none}header.site .wrap{gap:10px}header.site .wrap{height:68px}header.site .btn{padding:12px 14px;font-size:12.5px;white-space:nowrap}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}}