/* VOKSTRA — styles.css · drafting-sheet system */
/* self-hosted variable fonts */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;
  src:url(/fonts/SpaceGrotesk.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+2074,U+20AC,U+2122,U+2212}
@font-face{font-family:'Martian Mono';font-style:normal;font-weight:100 800;font-display:swap;
  src:url(/fonts/MartianMono.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+2074,U+20AC,U+2122,U+2212}
:root{
  --paper:#C6CCD1;   /* brushed aluminum — page */
  --sheet:#E9ECEE;   /* polished plate — cards */
  --ink:#14181C;     /* near-black */
  --steel:#48525B;   /* secondary text */
  --faint:#97A1A9;   /* tertiary */
  --hair:#B7BEC4;    /* hairlines on plate */
  --mark:#1D4FC4;    /* Dykem layout-fluid blue */
  --markd:#153C9C;   /* deep blue */
  --frame:1.5px solid var(--ink);
  --disp:'Space Grotesk',ui-sans-serif,sans-serif;
  --mono:'Martian Mono',ui-monospace,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font:400 16.5px/1.62 var(--disp);
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.055) 0 1px,rgba(0,0,0,0) 1px 3px),
    linear-gradient(180deg,#CBD1D6,#C2C8CD);background-color:var(--paper);background-attachment:fixed;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration-color:var(--faint);text-underline-offset:3px}
a:hover{text-decoration-color:var(--mark)}
:focus-visible{outline:2.5px solid var(--mark);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--sheet);padding:.6em 1em;z-index:99;font-family:var(--mono);font-size:12px}
.skip:focus{left:8px}
.wrap{max-width:1280px;margin-inline:auto;padding-inline:clamp(16px,4vw,44px)}
.mono{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--steel)}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(10px);border-bottom:var(--frame)}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:66px}
.brand{display:flex;align-items:center;flex:none}
.logo .logot{font:700 33px var(--disp);letter-spacing:.02em;fill:var(--ink)}
.logo .logoo circle{fill:none;stroke:var(--ink);stroke-width:3.4}
.logo .logoo line{stroke:var(--mark);stroke-width:3.4;stroke-linecap:round}
.logo .logoo .tick{stroke:var(--ink);stroke-width:2.6}
.mainnav{display:flex;align-items:center;gap:clamp(14px,2.4vw,30px)}
.mainnav>a{font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  text-decoration:none;color:var(--steel);padding:6px 2px;border-bottom:2px solid transparent}
.mainnav>a:hover{color:var(--ink)}
.mainnav>a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--mark)}
.menubtn{display:none}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.6em;font-family:var(--mono);font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;text-decoration:none;cursor:pointer;
  padding:13px 22px;border-radius:3px;border:1.5px solid var(--ink);transition:transform .18s,box-shadow .18s,background .18s}
.btn:hover{transform:translateY(-2px);box-shadow:4px 5px 0 rgba(22,25,27,.16)}
.btn:active{transform:none;box-shadow:none}
.btn-mark{background:var(--mark);border-color:var(--mark);color:#fff}
.btn-mark:hover{background:var(--markd);border-color:var(--markd)}
.btn-ink{background:transparent;color:var(--ink)}
.navcta{padding:9px 16px;border-width:1.5px}

/* ---------- sheets ---------- */
main{display:block}
.wrap>.sheet{margin-block:clamp(22px,3.4vw,40px)}
.sheet{position:relative;border:var(--frame);background:linear-gradient(180deg,#EDF0F2 0,var(--sheet) 46%,#E2E6E9 100%)}
.sheet-in{padding:clamp(24px,4.2vw,58px)}
.reg{position:absolute;width:15px;height:15px;pointer-events:none}
.reg::before,.reg::after{content:"";position:absolute;background:var(--steel)}
.reg::before{width:15px;height:1.5px;top:7px}
.reg::after{height:15px;width:1.5px;left:7px}
.r1{top:-8px;left:-8px}.r2{top:-8px;right:-8px}.r3{bottom:-8px;left:-8px}.r4{bottom:-8px;right:-8px}
.tblock{display:flex;border-top:var(--frame);font-family:var(--mono);font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--steel)}
.tblock span{padding:9px 14px;border-right:1.5px solid var(--ink);white-space:nowrap}
.tblock span:last-child{border-right:0}
.tb-grow{flex:1;text-align:right;overflow:hidden;text-overflow:ellipsis}
@media (max-width:700px){.tb-h{display:none}}

/* ---------- type ---------- */
h1{font:700 clamp(2.5rem,6.2vw,4.5rem)/1.02 var(--disp);letter-spacing:-.028em;margin:0 0 .35em}
h2{font:700 clamp(1.7rem,3.4vw,2.5rem)/1.08 var(--disp);letter-spacing:-.02em;margin:0 0 .5em}
h3{font:700 1.12rem/1.25 var(--disp);letter-spacing:-.01em;margin:0 0 .35em}
p{margin:0 0 1em;max-width:62ch}
.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--markd);margin:0 0 1.3em}
.lede{font-size:clamp(1.02rem,1.5vw,1.18rem);color:#2C3236}
.sech{margin-bottom:1.1em}
.sechrow{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.mono-h{font:700 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--steel);margin:0 0 .9em}
.golink{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--markd);text-decoration:none;white-space:nowrap}
.golink::after{content:" ->";}
.golink:hover{color:var(--mark)}

/* ---------- hero ---------- */
.sheet-hero .sheet-in{padding-top:clamp(34px,5vw,70px)}
.hero{display:grid;gap:clamp(28px,4vw,64px)}
@media (min-width:1020px){.hero{grid-template-columns:1fr 1.08fr;align-items:start}}
.heromini{margin-top:2.1em}
.ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:1.6em}
.hero-fig{margin:0}
.hero-fig figcaption,.sys-fig figcaption{font-size:.86rem;color:var(--steel);margin-top:10px;max-width:none}
.figno{color:var(--markd);margin-right:.7em}
.legend{list-style:none;margin:18px 0 0;padding:14px 0 0;border-top:1px solid var(--hair);
  display:grid;grid-template-columns:1fr 1fr;gap:7px 26px}
@media (max-width:620px){.legend{grid-template-columns:1fr}}
.legend li{display:flex;align-items:baseline;gap:9px;font-size:.86rem;color:var(--steel)}
.legend .lgno{flex:none;width:19px;height:19px;border:1.5px solid var(--mark);border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;font:700 10px var(--mono);color:var(--markd);transform:translateY(2px)}
.legend a{text-decoration:none;color:var(--ink)}
.legend a:hover{color:var(--markd)}

/* ---------- stats ---------- */
.stats{display:grid;gap:0;grid-template-columns:repeat(2,1fr)}
@media (min-width:900px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{padding:6px 26px 6px 0;border-left:1.5px solid var(--hair);padding-left:22px}
.stat:first-child{border-left:0;padding-left:0}
@media (max-width:899px){.stat:nth-child(3){border-left:0;padding-left:0}
 .stat{margin-bottom:22px}}
.stat b{display:block;font:700 clamp(2.4rem,4.6vw,3.6rem)/1 var(--disp);letter-spacing:-.03em}
.stat .mono{display:block;margin:.55em 0 .5em;color:var(--markd)}
.stat p{font-size:.9rem;color:var(--steel);margin:0}

/* ---------- family cards ---------- */
.famgrid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.famcard{position:relative;border:1.5px solid var(--ink);background:var(--sheet);padding:20px 20px 18px;
  text-decoration:none;display:flex;flex-direction:column;gap:6px;transition:transform .18s,box-shadow .18s}
.famcard:hover{transform:translateY(-3px);box-shadow:6px 7px 0 rgba(22,25,27,.14)}
.famcode{position:absolute;top:14px;right:16px;font-size:12px;font-weight:700;color:var(--markd);
  border:1.5px solid var(--mark);border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center}
.famdwg{margin:2px 0 8px;border-bottom:1px solid var(--hair);padding-bottom:8px}
.famdwg .dwg{max-height:150px}
.famcard p{font-size:.9rem;color:var(--steel);margin:0 0 .9em}
.famcard .golink{margin-top:auto}

/* ---------- product cards ---------- */
.pgrid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(272px,1fr))}
.pcard{border:1.5px solid var(--ink);background:var(--sheet);display:flex;flex-direction:column}
.pdwg{border-bottom:1px solid var(--hair);padding:14px 12px 6px;background:
  linear-gradient(var(--hair) 0 0) left 14px top 0/1px 100% no-repeat}
.pdwg{background:none}
.pmeta{padding:15px 18px 17px;display:flex;flex-direction:column;gap:6px;flex:1}
.prow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.chip{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  border:1.5px solid var(--ink);border-radius:3px;padding:4px 8px;background:var(--paper)}
.pprice{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--markd);letter-spacing:.02em;white-space:nowrap}
.pname{margin:2px 0 0;font-size:1.08rem}
.pdims{margin:0;text-transform:none;letter-spacing:.03em}
.speclink{margin-top:auto;align-self:flex-start;background:none;border:0;padding:8px 0 2px;cursor:pointer;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--markd)}
.speclink::after{content:" ->"}
.speclink:hover{color:var(--mark)}
.pgridnote{margin:26px 0 0;text-transform:none;letter-spacing:.04em}

/* ---------- chips / filters ---------- */
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:1.8em}
.chipbtn{cursor:pointer;font-size:11px;padding:8px 13px;transition:background .15s,color .15s}
.chipbtn:hover{border-color:var(--mark);color:var(--markd)}
.chipbtn[aria-pressed="true"]{background:var(--ink);color:var(--sheet);border-color:var(--ink)}

/* ---------- spec dialog ---------- */
.specdlg{border:var(--frame);background:var(--sheet);color:var(--ink);padding:0;
  width:min(640px,92vw);max-height:88vh;margin:auto;box-shadow:14px 16px 0 rgba(22,25,27,.18)}
.specdlg::backdrop{background:rgba(22,25,27,.45);backdrop-filter:blur(2px)}
.dbody{padding:clamp(20px,4vw,36px);overflow:auto;max-height:calc(88vh - 2px)}
.dclose{position:absolute;top:10px;right:10px;z-index:2;width:38px;height:38px;border:1.5px solid var(--ink);
  background:var(--sheet);font-size:20px;cursor:pointer;border-radius:3px}
.dclose:hover{background:var(--mark);border-color:var(--mark);color:#fff}
.spec-head{display:flex;align-items:center;gap:14px;margin-bottom:8px;padding-right:44px}
.spec-head h3{margin:0;font-size:1.35rem}
.spec-dwg{border:1px solid var(--hair);margin:12px 0 16px;padding:8px}
.spec-blurb{color:#2C3236}
.spec-table{width:100%;border-collapse:collapse;margin:10px 0 14px;font-size:.93rem}
.spec-table th{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--steel);text-align:left;font-weight:400;width:38%}
.spec-table th,.spec-table td{border-top:1px solid var(--hair);padding:9px 4px;vertical-align:top}
.spec-note{font-size:.8rem;color:var(--steel);max-width:none}
.pr{font-family:var(--mono);font-weight:700;color:var(--markd);text-align:right;white-space:nowrap}
.spec-table td.pr{text-align:left}

/* ---------- apps ---------- */
.apps{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.app{border:1.5px solid var(--ink);background:var(--sheet);padding:20px;text-decoration:none;
  transition:transform .18s,box-shadow .18s;display:block}
.app:hover{transform:translateY(-3px);box-shadow:6px 7px 0 rgba(22,25,27,.14)}
.appno{display:inline-block;color:var(--markd);border-bottom:2px solid var(--mark);padding-bottom:4px;margin-bottom:14px}
.app p{font-size:.9rem;color:var(--steel);margin:0}

/* ---------- quality ---------- */
.qteaser{display:grid;gap:clamp(26px,4vw,60px);align-items:start}
@media (min-width:960px){.qteaser{grid-template-columns:1.2fr 1fr}}
.minitable{width:100%;border-collapse:collapse;font-size:.95rem;border:1.5px solid var(--ink)}
.minitable caption{caption-side:top;text-align:left;padding:10px 14px;border:1.5px solid var(--ink);
  border-bottom:0;background:var(--paper);font-size:10.5px}
.minitable th,.minitable td{border-top:1px solid var(--hair);padding:10px 14px;text-align:left}
.minitable th{font-weight:400;color:var(--steel);width:44%}
.minitable tr:first-child th,.minitable tr:first-child td{border-top:0}
.qgrid{display:grid;gap:clamp(26px,4vw,60px)}
@media (min-width:960px){.qgrid{grid-template-columns:1.25fr 1fr}}
.chem td{text-transform:none}
.qrows{border-top:1.5px solid var(--ink)}
.qrow{display:grid;gap:6px 30px;padding:18px 0;border-bottom:1px solid var(--hair)}
@media (min-width:760px){.qrow{grid-template-columns:280px 1fr}}
.qrow h3{margin:0}
.qrow p{margin:0;color:#2C3236}
.qcards{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.qcard{border:1.5px solid var(--ink);padding:20px;background:var(--sheet)}
.qcard p{font-size:.92rem;color:var(--steel);margin:0}
.packlist{margin:0 0 1.6em;padding-left:1.2em}
.packlist li{margin-bottom:.55em}

/* ---------- systems ---------- */
.sys{display:grid;gap:clamp(26px,4vw,56px);align-items:start}
@media (min-width:1020px){.sys{grid-template-columns:1fr 1.15fr}}
.sys-fig{margin:0;border:1px solid var(--hair);padding:14px 14px 12px;background:var(--sheet)}
.bom{width:100%;border-collapse:collapse;font-size:.9rem;margin-top:14px}
.bom caption{text-align:left;padding-bottom:10px;font-size:10.5px}
.bom th{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);
  font-weight:400;text-align:left;border-bottom:1.5px solid var(--ink);padding:0 8px 8px 0}
.bom td{border-bottom:1px solid var(--hair);padding:9px 8px 9px 0;vertical-align:top}
.bom .mono{text-transform:none}
.bom a{text-decoration:none;color:var(--markd);font-weight:700}
.bom a:hover{text-decoration:underline}
.bom th.pr,.bom td.pr{text-align:right;padding-right:0}
@media (max-width:560px){.td-dim{display:none}.bom th:nth-child(3){display:none}}

/* ---------- CTA band ---------- */
.sheet-cta .sheet-in{text-align:center;padding-block:clamp(48px,7vw,90px)}
.ctaband h2{font-size:clamp(2.2rem,5vw,3.6rem)}
.ctaband p{margin-inline:auto;color:var(--steel)}
.ctaband .btn{margin-top:1.4em}

/* ---------- page intro ---------- */
.pageintro .lede{max-width:56ch}

/* ---------- contact ---------- */
.contact{display:grid;gap:clamp(30px,5vw,70px)}
@media (min-width:980px){.contact{grid-template-columns:1fr 1fr;align-items:start}}
.factlist{margin:0 0 1.8em;padding-left:1.15em;color:#2C3236}
.factlist li{margin-bottom:.6em;max-width:54ch}
.contactmeta{display:flex;flex-direction:column;gap:8px;text-transform:none;letter-spacing:.04em;border-top:1px solid var(--hair);padding-top:16px}
.rfq{border:1.5px solid var(--ink);background:var(--paper);padding:clamp(20px,3.4vw,34px)}
.frow{margin-bottom:16px}
.frow label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--steel);margin-bottom:7px}
.frow input,.frow textarea{width:100%;border:1.5px solid var(--ink);background:var(--sheet);
  padding:12px 13px;font:400 15.5px var(--disp);color:var(--ink);border-radius:2px}
.frow input:focus-visible,.frow textarea:focus-visible{outline-offset:1px}
.frow textarea{resize:vertical}
.frow ::placeholder{color:var(--faint)}
.hp{position:absolute;left:-9999px}
.regarding{border:1.5px dashed var(--mark);padding:9px 12px;margin-bottom:16px;text-transform:none;color:var(--markd)}
.formnote{margin:12px 0 0;text-transform:none;letter-spacing:.04em}

/* ---------- footer ---------- */
.foot{padding-block:clamp(26px,4vw,44px) clamp(30px,4vw,54px)}
.footsheet .footgrid{display:grid;gap:30px;padding:clamp(24px,3.6vw,44px);grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
@media (min-width:960px){.footsheet .footgrid{grid-template-columns:1.6fr 1fr 1fr 1.2fr}}
.footbrand p{font-size:.9rem;color:var(--steel);margin:14px 0 18px;max-width:34ch}
.logo-foot .logot{font-size:30px}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:.55em;font-size:.92rem}
.foot a{text-decoration:none;color:#2C3236}
.foot a:hover{color:var(--markd)}

/* ---------- drawings ---------- */
.dwg{width:100%;height:auto}
.dwg text{font-family:var(--mono)}
.dwg .obj{stroke:var(--ink);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.dwg .obj2{stroke:var(--ink);stroke-width:1;fill:none;opacity:.72;stroke-linecap:round}
.dwg .fillstl{fill:url(#stl)}
.dwg .fillwht{fill:var(--sheet)}
.dwg .hid{stroke:var(--steel);stroke-width:1.05;fill:none;stroke-dasharray:5 4}
.dwg .ctr{stroke:var(--faint);stroke-width:.9;fill:none;stroke-dasharray:11 4 2 4}
.dwg .dim{stroke:var(--steel);stroke-width:.95;fill:none}
.dwg .dimt{font-size:10.5px;font-weight:700;fill:var(--markd);paint-order:stroke;stroke:var(--sheet);
  stroke-width:3.5px;stroke-linejoin:round;letter-spacing:0;text-transform:none}
.dwg .lbl{font-size:10px;fill:var(--steel)}
.dwg .hatch{fill:url(#conc);stroke:var(--hair);stroke-width:1}
.dwg .wallband{fill:#E9ECEB;stroke:none}
.dwg .co circle{fill:var(--sheet);stroke:var(--mark);stroke-width:1.7}
.dwg .con{font-size:12px;font-weight:700;fill:var(--markd)}
.dwg-hero,.dwg-sys{max-height:560px}

/* ---------- reveal + draw-in ---------- */
.io{opacity:0;transform:translateY(14px);transition:opacity .7s ease var(--d,0s),transform .7s ease var(--d,0s)}
.io.in{opacity:1;transform:none}
.rise{opacity:0;transform:translateY(16px);transition:opacity .75s ease var(--d,0s),transform .75s ease var(--d,0s)}
.in .rise{opacity:1;transform:none}
.dwg .anim{stroke-dasharray:1;stroke-dashoffset:1;fill-opacity:0;
  transition:stroke-dashoffset 1s cubic-bezier(.55,.06,.25,1) var(--d,0s),fill-opacity .7s ease calc(var(--d,0s) + .35s)}
.in .dwg .anim{stroke-dashoffset:0;fill-opacity:1}
.dwg .dim,.dwg .dimt,.dwg .hid,.dwg .ctr,.dwg .lbl{opacity:0;transition:opacity .7s ease .75s}
.in .dwg .dim,.in .dwg .dimt,.in .dwg .hid,.in .dwg .ctr,.in .dwg .lbl{opacity:1}
.dwg .co{opacity:0;transform:scale(.4);transform-box:fill-box;transform-origin:center;
  transition:opacity .45s ease var(--d,0s),transform .45s cubic-bezier(.2,1.4,.4,1) var(--d,0s)}
.in .dwg .co{opacity:1;transform:scale(1)}
.specdlg .dwg .anim{stroke-dashoffset:0;fill-opacity:1}
.specdlg .dwg .dim,.specdlg .dwg .dimt,.specdlg .dwg .hid,.specdlg .dwg .ctr,.specdlg .dwg .co{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .io,.rise,.dwg .co{opacity:1!important;transform:none!important;transition:none!important}
  .dwg .anim{stroke-dashoffset:0!important;fill-opacity:1!important;transition:none!important}
  .dwg .dim,.dwg .dimt,.dwg .hid,.dwg .ctr,.dwg .lbl{opacity:1!important;transition:none!important}
  .btn,.famcard,.app{transition:none!important}
}

/* ---------- mobile nav ---------- */
@media (max-width:880px){
  .menubtn{display:flex;align-items:center;gap:9px;background:none;border:1.5px solid var(--ink);
    border-radius:3px;padding:9px 12px;cursor:pointer}
  .menubtn span{display:block;width:17px;height:1.8px;background:var(--ink)}
  .menubtn span:nth-child(2){margin-block:0}
  .menubtn{flex-direction:row}
  .menubtn b{font:700 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase}
  .menubtn span{position:relative}
  .menubtn>span{width:17px}
  .menubtn span+span{display:none}
  .menubtn::before{content:"";display:none}
  .mainnav{position:fixed;inset:66px 0 auto 0;background:var(--sheet);border-bottom:var(--frame);
    flex-direction:column;align-items:stretch;gap:0;padding:8px 0 18px;
    transform:translateY(-110%);visibility:hidden;pointer-events:none;
    transition:transform .3s ease,visibility 0s linear .3s;box-shadow:0 18px 30px rgba(22,25,27,.12)}
  .mainnav.open{transform:none;visibility:visible;pointer-events:auto;transition:transform .3s ease}
  .mainnav>a{padding:14px clamp(18px,5vw,40px);font-size:13px;border-bottom:1px solid var(--hair)}
  .mainnav>a[aria-current="page"]{border-bottom:1px solid var(--hair);color:var(--markd)}
  .navcta{margin:16px clamp(18px,5vw,40px) 0;justify-content:center}
  body.navopen{overflow:hidden}
}
@media (min-width:881px){.mainnav{transform:none!important;position:static;visibility:visible!important;pointer-events:auto!important}}

/* ---------- product photography (KOBOLTA) ---------- */
.pimgbox{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
  padding:16px 16px 8px;border-bottom:1px solid var(--hair);overflow:hidden}
.pimg{max-width:100%;max-height:100%;object-fit:contain;
  filter:drop-shadow(0 10px 18px rgba(20,24,28,.20)) drop-shadow(0 2px 4px rgba(20,24,28,.12))}
.spec-photo{margin:0 0 12px;display:flex;justify-content:center;padding:6px 0 2px}
.spec-photo img{max-width:78%;max-height:240px;object-fit:contain;
  filter:drop-shadow(0 8px 14px rgba(20,24,28,.16))}
.logo .logosub{font:600 10px var(--mono);letter-spacing:.42em;fill:var(--steel);text-transform:uppercase}

/* ---------- hero render + drafting overlay ---------- */
.hero-wrap{position:relative}
.hero-img{display:block;width:100%;height:auto;
  filter:drop-shadow(0 18px 30px rgba(20,24,28,.22)) drop-shadow(0 3px 6px rgba(20,24,28,.14))}
.hero-brand{position:absolute;left:50%;top:31.3%;width:46%;transform:translate(-50%,-50%)}
.hero-brand svg{display:block;width:100%;height:auto}
.postal{margin:10px 0 0;font-style:normal;font-size:12px;line-height:1.7;color:var(--steel);
  border-left:2px solid var(--hair);padding-left:12px}