/* ============================================================
   AEROPRODUKT — Branding Case Study
   Gabriel Radatovics · logo redesign & visual identity
   Industrial air-flow / fire & smoke protection manufacturer
   ============================================================ */

:root{
  --orange:#F07028;        /* brand orange — primary accent */
  --orange-d:#D85E1C;      /* deeper orange for hovers */
  --orange-l:#FF8A45;      /* lighter orange on dark surfaces */
  --ink:#1E1A18;           /* warm near-black (logo charcoal) */
  --ink-2:#2A2522;         /* raised charcoal card */
  --grey:#6A635D;          /* muted body on light */
  --light:#F6F4F1;         /* warm off-white page */
  --paper:#FFFFFF;
  --dark:#171311;          /* obsidian */
  --card-dark:#211C19;     /* raised obsidian card */
  --mute:#9A9089;          /* body text on dark */
  --light-text:#E8E3DD;    /* brighter body on dark */
  --tint:#FBEDE4;          /* soft orange tint surface */
  --line-l:rgba(30,26,22,.12);
  --line-d:rgba(239,235,230,.12);
  --disp:'Space Grotesk',-apple-system,BlinkMacSystemFont,sans-serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --gutter:max(24px, calc((100% - 1440px) / 2));
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  font-family:var(--sans);
  background:var(--light);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}

/* ---------- Top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:100;
  background:var(--dark);
  border-bottom:3px solid var(--orange);
  height:62px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--gutter);
}
.topbar .brand{font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:3px;color:#fff;}
.topbar nav{display:flex;gap:34px;}
.topbar nav a{font-family:var(--disp);font-weight:500;font-size:11px;letter-spacing:1.5px;color:rgba(255,255,255,.6);transition:color .2s;position:relative;text-transform:uppercase;}
.topbar nav a:hover{color:#fff;}
.topbar nav a.active{color:#fff;}
.topbar nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:-21px;height:3px;background:var(--orange);}
.progress{position:absolute;left:0;bottom:-3px;height:3px;width:0;background:#fff;transition:width .08s linear;z-index:101;}

.navtoggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;}
.navtoggle span{display:block;width:24px;height:2px;background:#fff;transition:transform .25s,opacity .2s;}
.navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ---------- Section shell ---------- */
.sec{
  padding:116px var(--gutter) 108px;
  background:var(--light);
  scroll-margin-top:70px;
}
.sec.dark{background:var(--dark);color:#fff;}
.sec.tint{background:var(--tint);}

/* ---------- Section header ---------- */
.hdr{display:flex;gap:48px;align-items:flex-start;margin-bottom:60px;}
.hdr .num{
  font-family:var(--disp);font-weight:700;font-size:112px;line-height:92px;
  letter-spacing:-2px;color:var(--orange);flex:none;
}
.hdr .tblock{border-left:3px solid var(--orange);padding-left:30px;}
.eyebrow{font-family:var(--disp);font-weight:600;font-size:11px;letter-spacing:3px;color:var(--orange);text-transform:uppercase;}
.sec.dark .eyebrow{color:var(--orange-l);}
.hdr .title{font-family:var(--disp);font-weight:700;font-size:46px;line-height:50px;letter-spacing:-1px;color:var(--ink);margin:14px 0 18px;}
.sec.dark .hdr .title{color:#fff;}
.hdr .sub{font-weight:400;font-size:17px;line-height:27px;color:var(--grey);max-width:820px;}
.sec.dark .hdr .sub{color:var(--mute);}

.label{font-family:var(--disp);font-weight:600;font-size:11px;letter-spacing:3px;color:var(--orange);text-transform:uppercase;display:block;margin-bottom:18px;}
.sec.dark .label{color:var(--orange-l);}

.block{margin-top:52px;}
.block:first-child{margin-top:0;}
.block.center{text-align:center;}

/* ---------- Cards / rows ---------- */
.row{display:flex;gap:22px;align-items:stretch;}
.row.top{align-items:flex-start;}

.card{background:var(--paper);border:1px solid var(--line-l);border-radius:14px;padding:30px 32px;flex:1;}
.sec.dark .card{background:var(--card-dark);border:1px solid var(--line-d);}
.sec.tint .card{background:var(--paper);}
.card.t-accent{border-top:3px solid var(--orange);box-shadow:0 8px 22px rgba(30,20,10,.06);}
.card h3{font-family:var(--disp);font-weight:600;font-size:20px;line-height:26px;color:var(--ink);letter-spacing:-.3px;}
.sec.dark .card h3{color:#fff;}
.card p{font-weight:400;font-size:15px;line-height:23px;color:var(--grey);margin-top:14px;}
.sec.dark .card p{color:var(--mute);}
.card .clabel{font-family:var(--disp);font-weight:700;font-size:11px;letter-spacing:2px;color:var(--orange);text-transform:uppercase;}

/* ---------- Hero ---------- */
.hero-sec{background:var(--dark);padding:94px var(--gutter) 104px;position:relative;overflow:hidden;}
.hero-sec::after{content:"";position:absolute;right:-180px;top:-120px;width:620px;height:620px;border-radius:50%;border:120px solid var(--orange);opacity:.07;}
.hero{display:flex;align-items:center;gap:56px;position:relative;z-index:1;}
.hero .left{flex:0 0 560px;max-width:560px;}
.hero .left .eyebrow{font-size:12px;letter-spacing:2.5px;}
.hero .left h1{font-family:var(--disp);font-weight:700;font-size:82px;line-height:82px;letter-spacing:-2px;color:#fff;margin:20px 0 10px;}
.hero .left h1 span{color:var(--orange);}
.hero .left .tag{font-family:var(--disp);font-weight:500;font-size:16px;letter-spacing:4px;color:var(--mute);text-transform:lowercase;margin-bottom:26px;}
.hero .left .lede{font-weight:400;font-size:18px;line-height:29px;color:var(--light-text);max-width:510px;}
.hero .meta{display:flex;gap:40px;margin-top:38px;flex-wrap:wrap;}
.hero .meta .mi .k{display:block;font-family:var(--disp);font-weight:600;font-size:10px;letter-spacing:1.5px;color:var(--orange-l);text-transform:uppercase;}
.hero .meta .mi .v{display:block;font-weight:600;font-size:15px;color:#fff;margin-top:6px;}
.hero .right{flex:1;display:flex;align-items:center;justify-content:center;}
.hero .logo-card{background:linear-gradient(160deg,#241E1A,#1A1512);border:1px solid var(--line-d);border-radius:20px;padding:56px 48px;width:100%;display:flex;flex-direction:column;align-items:center;gap:30px;box-shadow:0 30px 60px rgba(0,0,0,.4);}
.hero .logo-card .mono{width:150px;}
.hero .logo-card .divh{width:100%;height:1px;background:var(--line-d);}
.hero .logo-card .word{width:88%;}

/* ---------- two-column generic ---------- */
.cols2{display:flex;gap:46px;align-items:flex-start;}
.cols2 .grow{flex:1;}
.narr p{font-weight:400;font-size:18px;line-height:30px;color:var(--ink);}
.narr p+p{margin-top:18px;color:var(--grey);}

/* facts panel */
.facts{flex:0 0 420px;background:var(--dark);border-radius:16px;padding:14px 34px;}
.facts .frow{padding:17px 0;border-top:1px solid rgba(255,255,255,.1);}
.facts .frow:first-child{border-top:none;}
.facts .frow .k{font-family:var(--disp);font-weight:600;font-size:10px;letter-spacing:2px;color:var(--orange-l);text-transform:uppercase;}
.facts .frow .v{font-weight:600;font-size:15px;line-height:21px;color:#fff;margin-top:5px;}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:11px;}
.chip{border:1px solid var(--line-l);background:var(--paper);border-radius:24px;padding:11px 19px;font-weight:500;font-size:14px;color:var(--ink);}
.sec.dark .chip{background:var(--card-dark);border-color:var(--line-d);color:#fff;}

/* note / open box */
.openq{border-left:3px solid var(--orange);background:var(--tint);border-radius:0 12px 12px 0;padding:24px 30px;}
.openq .ql{font-family:var(--disp);font-weight:700;font-size:10px;letter-spacing:2px;color:var(--orange);text-transform:uppercase;margin-bottom:8px;}
.openq p{font-weight:400;font-size:15px;line-height:24px;color:var(--grey);}

/* objective box */
.objective{display:flex;align-items:center;gap:44px;background:var(--orange);border-radius:14px;padding:42px 52px;color:#fff;}
.objective .ol{font-family:var(--disp);font-weight:700;font-size:10px;letter-spacing:3px;color:rgba(255,255,255,.7);text-transform:uppercase;flex:none;}
.objective .od{width:1px;height:52px;background:rgba(255,255,255,.35);flex:none;}
.objective p{font-family:var(--disp);font-weight:600;font-size:23px;line-height:32px;color:#fff;letter-spacing:-.3px;}

/* metrics */
.metric{font-family:var(--disp);font-weight:700;font-size:48px;letter-spacing:-1px;color:var(--orange);}
.sec.dark .metric{color:var(--orange-l);}
.card h4{font-family:var(--disp);font-weight:600;font-size:17px;line-height:23px;color:var(--ink);margin-top:8px;}
.sec.dark .card h4{color:#fff;}
.card .cdesc{font-weight:400;font-size:14px;line-height:21px;color:var(--grey);margin-top:10px;}
.sec.dark .card .cdesc{color:var(--mute);}

/* archetype cards */
.arch{display:flex;gap:22px;}
.archcard{flex:1;background:var(--card-dark);border:1px solid var(--line-d);border-radius:16px;padding:32px 34px;position:relative;overflow:hidden;}
.archcard .rank{font-family:var(--disp);font-weight:700;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--orange-l);}
.archcard.secondary .rank{color:var(--mute);}
.archcard h3{font-family:var(--disp);font-weight:700;font-size:30px;letter-spacing:-.5px;color:#fff;margin:8px 0 2px;}
.archcard .en{font-weight:500;font-size:14px;color:var(--orange-l);margin-bottom:18px;}
.archcard.secondary .en{color:var(--mute);}
.archcard p{font-weight:400;font-size:15px;line-height:24px;color:var(--light-text);}
.archcard .traits{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;}
.archcard .traits span{background:rgba(240,112,40,.14);color:var(--orange-l);border-radius:18px;padding:7px 14px;font-weight:600;font-size:12px;}
.archcard.secondary .traits span{background:rgba(255,255,255,.07);color:var(--light-text);}
.archcard .glyph{position:absolute;right:-30px;bottom:-40px;font-size:150px;opacity:.05;color:#fff;line-height:1;}

/* insight rows */
.insight{display:flex;gap:30px;align-items:flex-start;}
.insight .q{flex:0 0 480px;}
.insight .q .il{font-family:var(--disp);font-weight:700;font-size:10px;letter-spacing:2px;color:var(--orange);text-transform:uppercase;}
.sec.dark .insight .q .il{color:var(--orange-l);}
.insight .q p{font-family:var(--disp);font-weight:600;font-size:19px;line-height:27px;color:var(--ink);margin-top:8px;letter-spacing:-.3px;}
.sec.dark .insight .q p{color:#fff;}
.insight .imp{flex:1;}
.insight .imp .il{font-family:var(--disp);font-weight:700;font-size:10px;letter-spacing:2px;color:var(--grey);text-transform:uppercase;}
.sec.dark .insight .imp .il{color:var(--mute);}
.insight .imp p{font-weight:400;font-size:16px;line-height:24px;color:var(--grey);margin-top:8px;}
.sec.dark .insight .imp p{color:var(--mute);}

/* figure / showcase */
.shot{background:var(--paper);border:1px solid var(--line-l);border-radius:14px;overflow:hidden;box-shadow:0 10px 30px rgba(30,20,10,.06);}
.shot.pad{padding:48px 56px;}
.shot--narrow{max-width:900px;margin:0 auto;}
.shotcap{font-weight:400;font-size:14px;line-height:21px;color:var(--grey);margin-top:16px;text-align:center;max-width:760px;margin-left:auto;margin-right:auto;}
.shotcap b{color:var(--ink);font-weight:700;}

/* concept / mark breakdown */
.markgrid{display:flex;gap:22px;align-items:stretch;}
.markshow{flex:0 0 440px;background:var(--dark);border-radius:16px;display:flex;align-items:center;justify-content:center;padding:56px;}
.markshow img{width:78%;}
.markread{flex:1;display:flex;flex-direction:column;gap:18px;justify-content:center;}
.mrow{display:flex;gap:18px;align-items:flex-start;}
.mrow .mi{flex:none;width:44px;height:44px;border-radius:11px;background:var(--tint);display:flex;align-items:center;justify-content:center;}
.mrow .mi svg{width:22px;height:22px;stroke:var(--orange);}
.mrow .mt h4{font-family:var(--disp);font-weight:600;font-size:17px;color:var(--ink);letter-spacing:-.2px;}
.mrow .mt p{font-weight:400;font-size:14px;line-height:22px;color:var(--grey);margin-top:4px;}

/* direction cards (3 routes) */
.routes{display:flex;gap:22px;}
.route{flex:1;border:1px solid var(--line-l);border-radius:16px;overflow:hidden;background:var(--paper);display:flex;flex-direction:column;}
.route.chosen{border:2px solid var(--orange);box-shadow:0 14px 34px rgba(240,112,40,.14);}
.route .rtop{height:150px;display:flex;align-items:center;justify-content:center;padding:26px;background:var(--light);border-bottom:1px solid var(--line-l);position:relative;}
.route .rtop img{max-height:88px;width:auto;}
.route .rbody{padding:22px 26px 26px;}
.route .rn{font-family:var(--disp);font-weight:700;font-size:10px;letter-spacing:2px;color:var(--grey);text-transform:uppercase;}
.route .rt{font-family:var(--disp);font-weight:600;font-size:19px;color:var(--ink);margin:6px 0 10px;letter-spacing:-.3px;}
.route p{font-weight:400;font-size:14px;line-height:22px;color:var(--grey);}
.route .badge{position:absolute;top:14px;right:14px;background:var(--orange);color:#fff;font-family:var(--disp);font-weight:700;font-size:10px;letter-spacing:1.5px;padding:5px 11px;border-radius:20px;text-transform:uppercase;}

/* swatches */
.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.swatch .blk{height:120px;border-radius:12px;position:relative;border:1px solid var(--line-l);display:flex;align-items:flex-end;padding:12px 14px;}
.swatch .blk .on{font-family:var(--disp);font-weight:700;font-size:11px;letter-spacing:1px;}
.swatch .nm{font-family:var(--disp);font-weight:600;font-size:14px;color:var(--ink);margin-top:12px;}
.swatch .hex{font-weight:400;font-size:13px;color:var(--grey);margin-top:2px;font-variant-numeric:tabular-nums;}
.swatch .use{font-weight:400;font-size:12px;line-height:17px;color:var(--grey);margin-top:6px;}

/* type specimen */
.typecard{border:1px solid var(--line-l);border-radius:16px;background:var(--paper);padding:6px 32px;}
.typecard .trow{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:22px 0;border-top:1px solid var(--line-l);}
.typecard .trow:first-child{border-top:none;}
.typecard .trow .spec{font-family:var(--disp);color:var(--ink);line-height:1;}
.typecard .trow .meta{text-align:right;flex:none;}
.typecard .trow .meta .mn{font-family:var(--disp);font-weight:600;font-size:13px;color:var(--ink);}
.typecard .trow .meta .mm{font-weight:400;font-size:12px;color:var(--grey);margin-top:3px;}

/* variants grid */
.vargrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.varcell{border:1px solid var(--line-l);border-radius:14px;overflow:hidden;background:var(--paper);}
.varcell .vimg{height:150px;display:flex;align-items:center;justify-content:center;padding:26px;}
.varcell .vimg img{max-height:84px;max-width:80%;width:auto;}
.varcell.on-light .vimg{background:var(--paper);}
.varcell.on-tint .vimg{background:var(--tint);}
.varcell.on-dark .vimg{background:var(--dark);}
.varcell.on-orange .vimg{background:var(--orange);}
.varcell .vlab{border-top:1px solid var(--line-l);padding:13px 18px;font-family:var(--disp);font-weight:600;font-size:12px;letter-spacing:1px;color:var(--ink);text-transform:uppercase;display:flex;justify-content:space-between;align-items:center;}
.varcell .vlab span{font-family:var(--sans);font-weight:400;font-size:12px;letter-spacing:0;color:var(--grey);text-transform:none;}

/* application showcase */
.app-full{border-radius:16px;overflow:hidden;border:1px solid var(--line-l);box-shadow:0 14px 40px rgba(30,20,10,.08);}
.app-two{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.app-two .shot img{width:100%;}

/* principles / guardrails */
.guards{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.guard{display:flex;gap:16px;align-items:flex-start;background:var(--paper);border:1px solid var(--line-l);border-radius:14px;padding:24px 26px;}
.guard .gi{flex:none;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:700;font-size:18px;}
.guard.do .gi{background:var(--tint);color:var(--orange);}
.guard.dont .gi{background:#F3EEEB;color:var(--grey);}
.guard .gt h4{font-family:var(--disp);font-weight:600;font-size:16px;color:var(--ink);}
.guard .gt p{font-weight:400;font-size:14px;line-height:21px;color:var(--grey);margin-top:5px;}

/* impact band */
.statband{display:flex;align-items:center;justify-content:center;gap:72px;background:var(--orange);border-radius:16px;padding:40px 24px;color:#fff;flex-wrap:wrap;}
.statband .s{text-align:center;}
.statband .s .n{font-family:var(--disp);font-weight:700;font-size:48px;letter-spacing:-1px;color:#fff;}
.statband .s .l{font-weight:500;font-size:14px;opacity:.92;margin-top:4px;}

/* closing */
.closing{text-align:center;max-width:860px;margin:0 auto;}
.closing .cq{font-family:var(--disp);font-weight:600;font-size:34px;line-height:46px;letter-spacing:-.6px;color:#fff;}
.closing .cq em{color:var(--orange-l);font-style:normal;}
.closing .by{margin-top:40px;display:inline-flex;align-items:center;gap:14px;}
.closing .by .ava{width:46px;height:46px;border-radius:50%;background:var(--orange);display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:700;color:#fff;font-size:16px;}
.closing .by .nm{text-align:left;}
.closing .by .nm .a{font-weight:600;font-size:15px;color:#fff;}
.closing .by .nm .b{font-size:13px;color:var(--mute);margin-top:2px;}

/* footer */
.foot{background:#0F0C0B;padding:40px var(--gutter);display:flex;align-items:center;justify-content:space-between;}
.foot .fb{font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:2px;color:#fff;}
.foot .fm{font-size:12px;color:var(--mute);}

/* ---------- in-context mockups ---------- */
.browserframe{border-radius:16px;overflow:hidden;border:1px solid var(--line-l);box-shadow:0 24px 60px rgba(30,20,10,.14);background:#fff;}
.browserbar{height:46px;background:#EDEAE6;display:flex;align-items:center;gap:16px;padding:0 18px;border-bottom:1px solid rgba(0,0,0,.06);}
.browserbar .dots{display:flex;gap:7px;}
.browserbar .dots i{width:12px;height:12px;border-radius:50%;display:block;}
.browserbar .dots i:nth-child(1){background:#F05A4F;}
.browserbar .dots i:nth-child(2){background:#F4BE3F;}
.browserbar .dots i:nth-child(3){background:#5AC25A;}
.browserbar .urlpill{flex:1;max-width:460px;height:28px;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:16px;display:flex;align-items:center;gap:8px;padding:0 14px;font-size:13px;color:var(--grey);font-variant-numeric:tabular-nums;}
.browserbar .urlpill svg{width:12px;height:12px;stroke:#5AC25A;flex:none;}
.siteheader{display:flex;align-items:center;justify-content:space-between;padding:22px 34px;background:#fff;border-bottom:1px solid var(--line-l);}
.siteheader .slogo{height:34px;width:auto;}
.sitenav{display:flex;align-items:center;gap:28px;}
.sitenav a{font-family:var(--disp);font-weight:500;font-size:14px;color:var(--ink);}
.sitenav a:hover{color:var(--orange);}
.sitecta{background:var(--orange);color:#fff;font-family:var(--disp);font-weight:600;font-size:13px;padding:11px 20px;border-radius:9px;}
.siteheroband{position:relative;background:linear-gradient(120deg,#1A1512 0%,#241D18 60%,#2E241C 100%);padding:60px 34px 64px;overflow:hidden;}
.siteheroband::after{content:"";position:absolute;right:-90px;top:-70px;width:360px;height:360px;border-radius:50%;border:70px solid var(--orange);opacity:.1;}
.siteheroband .eyebrowb{font-family:var(--disp);font-weight:600;font-size:11px;letter-spacing:2.5px;color:var(--orange-l);text-transform:uppercase;}
.siteheroband h3{font-family:var(--disp);font-weight:700;font-size:34px;line-height:40px;letter-spacing:-.6px;color:#fff;margin:14px 0 18px;max-width:560px;}
.siteheroband p{font-size:15px;line-height:23px;color:var(--light-text);max-width:440px;}
.siteheroband .hbtns{display:flex;gap:14px;margin-top:26px;}
.siteheroband .hbtns .b1{background:var(--orange);color:#fff;font-family:var(--disp);font-weight:600;font-size:13px;padding:13px 22px;border-radius:9px;}
.siteheroband .hbtns .b2{border:1px solid rgba(255,255,255,.3);color:#fff;font-family:var(--disp);font-weight:600;font-size:13px;padding:13px 22px;border-radius:9px;}

.ctxrow{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px;}
.signage{border-radius:14px;overflow:hidden;border:1px solid var(--line-d);background:linear-gradient(160deg,#211C19,#14100E);min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:40px;position:relative;}
.signage::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--orange);}
.signage img{width:64%;max-width:320px;}
.signage .cap{font-family:var(--disp);font-weight:600;font-size:11px;letter-spacing:2px;color:var(--mute);text-transform:uppercase;}
.nameplate{border-radius:14px;overflow:hidden;border:1px solid var(--line-l);background:linear-gradient(145deg,#E9E6E1 0%,#F6F4F1 40%,#D9D5CF 100%);min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:40px;position:relative;}
.nameplate .plate{background:linear-gradient(145deg,#CFCBC4,#EDEBE7 45%,#C7C3BC);border:1px solid rgba(0,0,0,.14);border-radius:8px;padding:22px 30px;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 6px 16px rgba(0,0,0,.14);display:flex;flex-direction:column;align-items:center;gap:12px;min-width:260px;}
.nameplate .plate img{width:150px;opacity:.86;}
.nameplate .plate .spec{font-family:var(--disp);font-weight:600;font-size:10px;letter-spacing:1.5px;color:#56504A;text-transform:uppercase;text-align:center;line-height:16px;border-top:1px solid rgba(0,0,0,.14);padding-top:10px;width:100%;}
.ctxcap{font-family:var(--disp);font-weight:600;font-size:11px;letter-spacing:2px;color:var(--grey);text-transform:uppercase;margin-top:14px;text-align:center;}

/* reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1;transform:none;}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .hero{flex-direction:column;align-items:flex-start;gap:40px;}
  .hero .left{flex:none;max-width:100%;}
  .hero .right{width:100%;}
  .cols2{flex-direction:column;}
  .facts{flex:none;width:100%;}
  .insight{flex-direction:column;gap:14px;}
  .insight .q{flex:none;}
  .markgrid{flex-direction:column;}
  .markshow{flex:none;}
  .swatches{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:900px){
  .topbar nav{display:none;position:absolute;top:62px;left:0;right:0;background:var(--dark);flex-direction:column;gap:0;padding:8px 0;border-bottom:3px solid var(--orange);}
  .topbar nav.open{display:flex;}
  .topbar nav a{padding:15px var(--gutter);}
  .topbar nav a.active::after{display:none;}
  .navtoggle{display:flex;}
  .row,.arch,.routes,.markgrid{flex-direction:column;}
  .guards,.app-two,.vargrid,.ctxrow{grid-template-columns:1fr;}
  .siteheader{flex-wrap:wrap;gap:16px;}
  .sitenav{display:none;}
  .siteheroband h3{font-size:26px;line-height:32px;}
  .hdr{gap:24px;}
  .hdr .num{font-size:74px;line-height:64px;}
  .objective{flex-direction:column;align-items:flex-start;gap:22px;}
  .objective .od{display:none;}
}
@media (max-width:560px){
  .sec{padding:70px var(--gutter) 64px;}
  .hero-sec{padding:60px var(--gutter) 72px;}
  .hero .left h1{font-size:58px;line-height:58px;}
  .hdr .title{font-size:34px;line-height:38px;}
  .hero .logo-card{padding:40px 28px;}
  .swatches{grid-template-columns:repeat(2,1fr);}
  .statband{gap:36px 48px;}
}