/* ==========================================================================
   BEARS MOTORSPORT — shared stylesheet
   Design concept: Technical / Engineering
   ========================================================================== */

:root{
  --bg:#080a0d; --bg2:#0d1116; --panel:#11161d; --line:#1e2732; --line2:#2b3745;
  --ink:#eef3f8; --mut:#93a2b3; --dim:#6b7889;
  --red:#e11d2e; --red-hi:#ff2a3c; --gold:#f3b32a; --cy:#3fb6d8; --grn:#3fbf7f;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --cond:'Barlow Condensed',Impact,sans-serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --nav-h:78px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{max-width:1300px;margin:0 auto;padding:0 36px}
.narrow{max-width:900px}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  padding:15px 28px;border-radius:2px;font-family:var(--mono);font-size:12.5px;
  letter-spacing:.16em;text-transform:uppercase;text-decoration:none;font-weight:600;
  transition:.2s;border:1px solid transparent;cursor:pointer;line-height:1;
}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-hi);box-shadow:0 0 32px rgba(225,29,46,.4)}
.btn-ghost{border-color:var(--line2);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn-gold{background:var(--gold);color:#080a0d}
.btn-gold:hover{background:#ffc94d}
.btn-sm{padding:11px 20px;font-size:11px}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:200;background:rgba(8,10,13,.9);
  backdrop-filter:blur(16px);border-bottom:1px solid var(--line);
}
nav{display:flex;align-items:center;gap:44px;height:var(--nav-h)}
.logo{display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--ink);flex-shrink:0}
.logo img{height:50px;width:auto}
.logo .wm b{font-family:var(--cond);font-size:25px;font-weight:700;letter-spacing:.01em;display:block;line-height:.9;text-transform:uppercase}
.logo .wm small{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.4em;color:var(--gold);margin-top:4px}

.menu{display:flex;gap:34px;list-style:none;margin-left:auto;align-items:center}
.menu>li{position:relative}
.menu>li>a{
  color:var(--mut);text-decoration:none;font-size:14.5px;font-weight:500;
  letter-spacing:.01em;transition:.2s;display:flex;align-items:center;gap:7px;
  height:var(--nav-h);
}
.menu>li>a:hover{color:var(--ink)}
.menu>li>a.cur{color:var(--gold)}
.menu>li>a.cur::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--gold)}
.menu .car{width:9px;height:9px;opacity:.55;transition:.2s}
.menu>li:hover .car{transform:rotate(180deg);opacity:1}

.drop{
  position:absolute;top:calc(var(--nav-h) - 10px);left:-20px;min-width:300px;
  background:var(--bg2);border:1px solid var(--line2);padding:8px;
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:.2s;
  box-shadow:0 24px 60px rgba(0,0,0,.6);
}
.menu>li:hover .drop{opacity:1;visibility:visible;transform:translateY(0)}
.drop a{
  display:block;padding:13px 16px;text-decoration:none;color:var(--mut);
  border-left:2px solid transparent;transition:.18s;
}
.drop a:hover{background:var(--panel);color:var(--ink);border-left-color:var(--red)}
.drop a b{display:block;font-family:var(--cond);font-size:19px;text-transform:uppercase;font-weight:600;letter-spacing:.01em;color:var(--ink);line-height:1.1}
.drop a span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--dim);margin-top:4px;text-transform:uppercase}

.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line2);color:var(--ink);width:46px;height:46px;cursor:pointer;align-items:center;justify-content:center;border-radius:2px}
.burger:hover{border-color:var(--gold);color:var(--gold)}

/* mobile drawer */
.drawer{
  position:fixed;inset:var(--nav-h) 0 0;background:var(--bg);z-index:190;
  padding:28px 36px 40px;overflow-y:auto;display:none;
}
.drawer.open{display:block}
.drawer a{display:block;text-decoration:none;color:var(--ink);font-family:var(--cond);
  font-size:30px;text-transform:uppercase;font-weight:600;padding:16px 0;border-bottom:1px solid var(--line);letter-spacing:.01em}
.drawer a.sub{font-family:var(--sans);font-size:16px;text-transform:none;font-weight:500;color:var(--mut);padding:12px 0 12px 20px;border-left:2px solid var(--line);border-bottom:0}
.drawer .btn{width:100%;margin-top:26px}

/* ---------- page hero (inner pages) ---------- */
.phero{position:relative;padding:72px 0 64px;border-bottom:1px solid var(--line);overflow:hidden}
.gridbg{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;opacity:.35}
.gridbg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 70% at 40% 40%,transparent 10%,var(--bg) 88%)}
.phero .wrap{position:relative}
.crumbs{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:22px}
.crumbs a{color:var(--dim);text-decoration:none}
.crumbs a:hover{color:var(--gold)}
.crumbs i{font-style:normal;margin:0 10px;color:var(--line2)}
.phero h1{font-family:var(--cond);font-size:clamp(46px,6vw,84px);font-weight:700;line-height:.94;text-transform:uppercase;letter-spacing:-.008em}
.phero h1 em{font-style:normal;color:var(--red)}
.phero h1 .out{color:transparent;-webkit-text-stroke:1.5px var(--line2)}
.phero .lede{color:var(--mut);font-size:19px;line-height:1.68;max-width:640px;margin-top:22px}
.phero .acts{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}

/* ---------- sections ---------- */
section{padding:104px 0;position:relative}
section.tight{padding:76px 0}
.band{background:var(--bg2);border-block:1px solid var(--line)}
.sec-head{margin-bottom:56px;max-width:820px}
.sec-head .mono{color:var(--red);display:block;margin-bottom:15px}
.sec-head h2{font-family:var(--cond);font-size:clamp(38px,4.6vw,62px);font-weight:700;text-transform:uppercase;line-height:1;letter-spacing:-.005em}
.sec-head h2 em{font-style:normal;color:var(--red)}
.sec-head h2 .out{color:transparent;-webkit-text-stroke:1.5px var(--line2)}
.sec-head p{color:var(--mut);max-width:680px;margin-top:18px;line-height:1.72;font-size:17.5px}
.sec-head.mid{margin-left:auto;margin-right:auto;text-align:center}

.prose p{color:var(--mut);font-size:17.5px;line-height:1.8;margin-bottom:20px;max-width:760px}
.prose p strong{color:var(--ink);font-weight:600}
.prose h3{font-family:var(--cond);font-size:30px;text-transform:uppercase;font-weight:600;margin:40px 0 16px;letter-spacing:.005em}

/* ---------- home hero ---------- */
.hero{position:relative;padding:96px 0 92px;overflow:hidden}
.hero-inner{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:58px;align-items:center}
.tag{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line2);padding:8px 15px;
  border-radius:2px;color:var(--gold);background:rgba(243,179,42,.05)}
.dot{width:6px;height:6px;background:var(--gold);border-radius:50%;box-shadow:0 0 10px var(--gold);animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.25}}
.hero h1{font-family:var(--cond);font-size:clamp(54px,7vw,98px);font-weight:700;line-height:.92;
  letter-spacing:-.01em;margin:28px 0 24px;text-transform:uppercase}
.hero h1 em{font-style:normal;color:var(--red)}
.hero h1 .out{color:transparent;-webkit-text-stroke:1.5px var(--line2)}
.hero .lede{color:var(--mut);font-size:18.5px;line-height:1.68;max-width:560px}
.hero .acts{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap}
.hero .stats{margin-top:54px}

@media(max-width:1040px){
  .hero{padding:56px 0 60px}
  .hero-inner{grid-template-columns:1fr;gap:44px}
  .hero h1{font-size:clamp(44px,8.4vw,76px);margin:22px 0 20px}
  .hero .lede{max-width:none;font-size:17.5px}
  .hero .stats{margin-top:40px}
}
@media(max-width:680px){
  .hero{padding:40px 0 48px}
  /* the longest line is "We build what goes in it." — keep it on one line */
  .hero h1{font-size:clamp(29px,8.0vw,44px);line-height:.98;margin:18px 0 18px}
  .hero .lede{font-size:16.5px}
  .hero .acts{gap:10px}
  .hero .acts .btn{width:100%}
  .hero .stats{display:grid;grid-template-columns:1fr 1fr;margin-top:32px;border-top:0}
  .hero .stats div{padding:16px 16px 16px 0;border-top:1px solid var(--line)}
  .hero .stats strong{font-size:30px}
  .tag{font-size:10.5px;padding:7px 12px}
}

/* ---------- ticker ---------- */
.ticker{border-block:1px solid var(--line);background:var(--bg2);overflow:hidden;padding:16px 0}
.tick-row{display:flex;gap:56px;white-space:nowrap;animation:slide 34s linear infinite;
  font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.tick-row b{color:var(--gold);font-weight:500}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- stat rows ---------- */
.stats{display:flex;border-top:1px solid var(--line)}
.stats div{flex:1;padding:24px 24px 0 0}
.stats strong{display:block;font-family:var(--cond);font-size:38px;font-weight:700;line-height:1}
.stats span{color:var(--dim);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;display:block;margin-top:8px}

.metrics{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line)}
.metrics div{padding:36px 30px;border-right:1px solid var(--line)}
.metrics div:last-child{border-right:0}
.metrics b{font-family:var(--cond);font-size:46px;font-weight:700;line-height:1;display:block;color:var(--gold)}
.metrics span{color:var(--mut);font-size:14.5px;display:block;margin-top:12px;line-height:1.55}

/* ---------- blueprint card ---------- */
.bp{border:1px solid var(--line2);background:linear-gradient(180deg,#0c1015,#0a0d11)}
.bp-top{display:flex;justify-content:space-between;padding:13px 18px;border-bottom:1px solid var(--line);color:var(--dim);gap:16px;flex-wrap:wrap}
.bp .bd{padding:8px}
.bp svg{display:block;width:100%;height:auto}
.bp-bot{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.bp-bot div{padding:14px 16px;border-right:1px solid var(--line)}
.bp-bot div:last-child{border-right:0}
.bp-bot b{display:block;font-family:var(--mono);font-size:13.5px;color:var(--ink)}
.bp-bot span{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--dim);text-transform:uppercase;margin-top:3px;display:block}

/* ---------- pillars ---------- */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line)}
.pil{padding:38px 30px;border-right:1px solid var(--line);transition:.25s}
.pil:last-child{border-right:0}
.pil:hover{background:var(--panel)}
.pil .ico{margin-bottom:20px;color:var(--gold)}
.pil-n{font-family:var(--mono);font-size:11px;color:var(--red);letter-spacing:.2em}
.pil h3{font-family:var(--cond);font-size:28px;text-transform:uppercase;margin:16px 0 13px;font-weight:600;line-height:1.05}
.pil p{color:var(--mut);font-size:15.5px;line-height:1.72}

/* ---------- model cards ---------- */
.models{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line)}
.model{background:var(--bg2);transition:.25s;display:flex;flex-direction:column;text-decoration:none;color:inherit}
.model:hover{background:var(--panel)}
.model:hover .go{color:var(--gold)}
.model .art{background:#0a0e12;border-bottom:1px solid var(--line);padding:24px}
.model .art svg{display:block;width:100%;height:auto}
.model .body{padding:28px 32px 32px;flex:1;display:flex;flex-direction:column}
.model .row{display:flex;justify-content:space-between;align-items:baseline;gap:18px}
.model h3{font-family:var(--cond);font-size:33px;text-transform:uppercase;font-weight:700;line-height:1}
.model .price{font-family:var(--mono);font-size:14px;color:var(--gold);white-space:nowrap}
.model .sub{color:var(--dim);font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin-top:8px}
.model ul{list-style:none;margin:22px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:10px 20px;flex:1}
.model li{color:var(--mut);font-size:14.5px;display:flex;gap:10px;align-items:flex-start;line-height:1.5}
.model li::before{content:"";width:5px;height:5px;background:var(--red);margin-top:7px;flex-shrink:0}
.model .go{margin-top:24px;font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);transition:.2s}

/* ---------- timeline (gantt) ---------- */
.tl{border:1px solid var(--line);background:var(--bg2)}
.tl-head{display:grid;grid-template-columns:220px 1fr;border-bottom:1px solid var(--line)}
.tl-head>div{padding:14px 20px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--dim);text-transform:uppercase}
.tl-head>div:first-child{border-right:1px solid var(--line)}
.days{display:grid;grid-template-columns:repeat(14,1fr)}
.days span{text-align:center;font-family:var(--mono);font-size:11px;color:var(--dim);padding:14px 0}
.tl-row{display:grid;grid-template-columns:220px 1fr;border-bottom:1px solid var(--line)}
.tl-row:last-child{border-bottom:0}
.tl-lbl{padding:18px 20px;border-right:1px solid var(--line)}
.tl-lbl b{font-family:var(--cond);font-size:21px;text-transform:uppercase;font-weight:600;display:block}
.tl-lbl span{font-family:var(--mono);font-size:10px;color:var(--dim);letter-spacing:.12em}
.tl-bars{display:grid;grid-template-columns:repeat(14,1fr);align-items:center;padding:0 5px}
.bar{height:24px;border-radius:1px;position:relative}
.bar span{position:absolute;inset:0;display:flex;align-items:center;padding-left:11px;font-family:var(--mono);font-size:10.5px;color:#0a0d11;font-weight:600;white-space:nowrap;letter-spacing:.06em}

.cmp{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.cmp>div{background:var(--bg2);padding:28px 30px}
.cmp b{font-family:var(--cond);font-size:50px;line-height:1;display:block}
.cmp .mono{color:var(--dim);margin-top:10px}
.cmp .them b{color:var(--dim)}
.cmp .us b{color:var(--gold)}

/* ---------- shop cards ---------- */
.shop{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{border:1px solid var(--line);background:var(--bg2);overflow:hidden}
.card .ph{background:#0a0e12;border-bottom:1px solid var(--line)}
.card .ph svg{display:block;width:100%;height:auto}
.card .cap{padding:22px 24px 26px}
.card .cap b{font-family:var(--cond);font-size:23px;text-transform:uppercase;font-weight:600;display:block}
.card .cap span{font-family:var(--mono);font-size:11px;color:var(--gold);letter-spacing:.13em;text-transform:uppercase;display:block;margin-top:4px}
.card .cap p{color:var(--mut);font-size:14.5px;line-height:1.7;margin-top:13px}

/* ---------- spec list ---------- */
.spec{display:grid;grid-template-columns:repeat(2,1fr);gap:0 60px}
.srow{display:flex;justify-content:space-between;gap:24px;padding:17px 0;border-bottom:1px solid var(--line)}
.srow dt{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--dim);text-transform:uppercase;padding-top:3px;flex-shrink:0}
.srow dd{font-size:15.5px;color:var(--ink);text-align:right;font-weight:500}

/* ---------- comparison table ---------- */
.tbl{width:100%;border-collapse:collapse;border:1px solid var(--line)}
.tbl th,.tbl td{padding:18px 22px;text-align:left;border-bottom:1px solid var(--line);font-size:15.5px}
.tbl th{background:var(--panel);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:500}
.tbl td:first-child{color:var(--ink);font-weight:500}
.tbl td{color:var(--mut)}
.tbl tr:last-child td{border-bottom:0}
.tbl .hi{background:rgba(225,29,46,.05);color:var(--ink)}
.tbl .yes{color:var(--grn)}

/* ---------- configurator ---------- */
.cfg{border:1px solid var(--line2);display:grid;grid-template-columns:1.4fr 1fr;background:var(--bg2)}
.cfg-l{border-right:1px solid var(--line)}
.cfg-view{background:#0a0d11;border-bottom:1px solid var(--line)}
.cfg-view .hd{display:flex;justify-content:space-between;padding:13px 18px;border-bottom:1px solid var(--line);color:var(--dim);gap:14px;flex-wrap:wrap}
.cfg-view .bd{padding:26px}
.cfg-view svg{display:block;width:100%;height:auto}
.cfg-opts{padding:30px 32px 34px}
.grp{margin-bottom:28px}
.grp:last-child{margin-bottom:0}
.grp>label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin-bottom:13px}
.seg{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.seg button{border:1px solid var(--line2);background:transparent;padding:13px 12px;cursor:pointer;text-align:left;transition:.18s;font-family:var(--sans);color:var(--mut);border-radius:2px}
.seg button:hover{border-color:var(--gold);color:var(--ink)}
.seg button.on{border-color:var(--red);background:rgba(225,29,46,.1);color:var(--ink)}
.seg button b{display:block;font-family:var(--cond);font-size:19px;text-transform:uppercase;font-weight:600;letter-spacing:.01em}
.seg button span{display:block;font-family:var(--mono);font-size:9.5px;margin-top:5px;letter-spacing:.06em;opacity:.8}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.opt{border:1px solid var(--line);padding:13px 14px;cursor:pointer;display:flex;gap:12px;align-items:flex-start;transition:.18s;user-select:none;border-radius:2px}
.opt:hover{border-color:var(--line2)}
.opt.on{border-color:var(--gold);background:rgba(243,179,42,.06)}
.opt .bx{width:16px;height:16px;border:1px solid var(--dim);flex-shrink:0;display:grid;place-items:center;margin-top:2px;transition:.18s}
.opt.on .bx{background:var(--gold);border-color:var(--gold)}
.opt .bx svg{opacity:0}
.opt.on .bx svg{opacity:1}
.opt .t b{display:block;font-size:14px;font-weight:500;color:var(--ink)}
.opt .t span{display:block;font-family:var(--mono);font-size:10.5px;color:var(--dim);margin-top:4px;letter-spacing:.04em}
.cfg-r{padding:30px 32px 34px;display:flex;flex-direction:column;background:#0a0d11}
.cfg-r .hd{border-bottom:1px solid var(--line);padding-bottom:18px}
.cfg-r .hd b{font-family:var(--cond);font-size:29px;text-transform:uppercase;font-weight:700;display:block;line-height:1}
.cfg-r .hd span{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--dim);text-transform:uppercase;display:block;margin-top:8px}
.lines{flex:1}
.line{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--mut)}
.line span:last-child{font-family:var(--mono);font-size:12.5px;color:var(--ink);white-space:nowrap}
.tot{margin-top:22px;padding-top:20px;border-top:2px solid var(--red)}
.tot .r{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.tot .r b{font-family:var(--cond);font-size:42px;font-weight:700;color:var(--gold);line-height:1}
.tot .lead{display:flex;align-items:center;gap:9px;margin-top:14px;font-family:var(--mono);font-size:11.5px;color:var(--cy);letter-spacing:.06em}
.tot .nb{color:var(--dim);font-size:12.5px;line-height:1.65;margin-top:14px}
.tot .btn{width:100%;margin-top:18px}

/* ---------- photo slots ---------- */
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.slot{background:var(--bg2);aspect-ratio:4/3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;padding:26px;text-align:center;position:relative;transition:.25s}
.slot:hover{background:var(--panel)}
.slot::before{content:"";position:absolute;inset:14px;border:1px dashed var(--line2)}
.slot>*{position:relative}
.slot svg{color:var(--dim)}
.slot b{font-family:var(--cond);font-size:21px;text-transform:uppercase;font-weight:600}
.slot span{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--dim);text-transform:uppercase;line-height:1.75;max-width:240px}
.slot.wide{grid-column:span 2;aspect-ratio:auto;min-height:340px}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--line);max-width:960px}
.q{border-bottom:1px solid var(--line)}
.q>button{width:100%;background:none;border:0;padding:26px 0;display:flex;justify-content:space-between;
  align-items:center;gap:26px;cursor:pointer;text-align:left;color:var(--ink);
  font-family:var(--cond);font-size:26px;text-transform:uppercase;font-weight:600;transition:.2s;line-height:1.15}
.q>button:hover{color:var(--gold)}
.q .ic{flex-shrink:0;width:28px;height:28px;border:1px solid var(--line2);display:grid;place-items:center;transition:.25s;color:var(--red)}
.q.on .ic{transform:rotate(45deg);border-color:var(--red)}
.q .a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.q.on .a{max-height:500px}
.q .a p{color:var(--mut);line-height:1.8;font-size:16.5px;padding-bottom:28px;max-width:860px}

/* ---------- forms ---------- */
.quote{border:1px solid var(--line2);background:linear-gradient(135deg,#10161e,#0a0e13);padding:58px;
  display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:center}
.quote h2{font-family:var(--cond);font-size:clamp(36px,4.2vw,56px);text-transform:uppercase;line-height:1;font-weight:700}
.quote h2 em{font-style:normal;color:var(--red)}
.quote>div>p{color:var(--mut);margin-top:18px;line-height:1.75;font-size:17px}
.form{display:grid;gap:15px}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.form label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--dim);text-transform:uppercase;display:block;margin-bottom:8px}
.form input,.form select,.form textarea{
  background:#0a0e13;border:1px solid var(--line2);color:var(--ink);padding:15px 17px;
  font-family:var(--sans);font-size:15.5px;border-radius:2px;outline:none;width:100%;transition:.2s}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--gold)}
.form select option{background:var(--bg2)}
.form ::placeholder{color:var(--dim)}
.form .ok{color:var(--gold);font-family:var(--mono);font-size:14px;letter-spacing:.08em;line-height:1.8;text-transform:uppercase}

/* ---------- cta band ---------- */
.ctaband{border-block:1px solid var(--line);background:var(--bg2);padding:64px 0}
.ctaband .in{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.ctaband h2{font-family:var(--cond);font-size:clamp(32px,3.8vw,50px);text-transform:uppercase;line-height:1;font-weight:700}
.ctaband h2 em{font-style:normal;color:var(--red)}
.ctaband p{color:var(--mut);margin-top:14px;font-size:17px;max-width:560px;line-height:1.65}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:60px 0 36px;background:var(--bg2)}
.f-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:44px;padding-bottom:42px;border-bottom:1px solid var(--line)}
.f-top h4{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--gold);text-transform:uppercase;margin-bottom:18px}
.f-top a{display:block;color:var(--mut);text-decoration:none;font-size:15px;margin-bottom:12px;transition:.2s}
.f-top a:hover{color:var(--gold)}
.f-top p{color:var(--mut);font-size:15px;line-height:1.75;max-width:360px}
.f-bot{display:flex;justify-content:space-between;padding-top:28px;color:var(--dim);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;gap:20px;flex-wrap:wrap}

/* ---------- sticky mobile cta ---------- */
.mcta{display:none;position:fixed;left:0;right:0;bottom:0;z-index:180;background:rgba(8,10,13,.96);
  backdrop-filter:blur(14px);border-top:1px solid var(--line2);
  padding:13px 20px calc(13px + env(safe-area-inset-bottom));gap:14px;align-items:center}
.mcta div{flex:1;min-width:0}
.mcta b{font-family:var(--cond);font-size:21px;text-transform:uppercase;display:block;line-height:1;font-weight:600}
.mcta span{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:var(--dim);text-transform:uppercase}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media(max-width:1140px){
  .menu{gap:24px}
  .menu>li>a{font-size:13.5px}
  .logo img{height:44px}
}
@media(max-width:1040px){
  .wrap{padding:0 28px}
  .quote,.spec,.cfg,.hero-inner{grid-template-columns:1fr;gap:40px}
  .cfg{gap:0}
  .cfg-l{border-right:0;border-bottom:1px solid var(--line)}
  .pillars,.models,.shop,.slots,.metrics{grid-template-columns:1fr 1fr}
  .pil,.metrics div{border-right:0;border-bottom:1px solid var(--line)}
  .slot.wide{grid-column:span 2}
  .menu{display:none}
  .burger{display:flex}
  header .btn{display:none}
}
@media(max-width:680px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  .pillars,.models,.shop,.f-top,.cmp,.opts,.slots,.metrics,.form .two,.stats{grid-template-columns:1fr;display:grid}
  .slot.wide{grid-column:span 1;min-height:0;aspect-ratio:4/3}
  .seg{grid-template-columns:1fr 1fr}
  .tl-head,.tl-row{grid-template-columns:1fr}
  .tl-lbl{border-right:0;border-bottom:1px solid var(--line)}
  .quote{padding:32px 24px}
  .cfg-opts,.cfg-r{padding:26px 22px 30px}
  .q>button{font-size:22px;padding:22px 0}
  .bp-bot{grid-template-columns:1fr 1fr}
  .bp-bot div:nth-child(2){border-right:0}
  .tbl th,.tbl td{padding:14px 15px;font-size:14px}
  .mcta{display:flex}
  body{padding-bottom:78px}
  section{padding:72px 0}
  .phero{padding:52px 0 48px}
}


/* ---------- photography ---------- */
.withpic{display:grid;grid-template-columns:1.12fr .88fr;gap:56px;align-items:start}
.withpic .pic{border:1px solid var(--line2);background:var(--bg2);margin:0;position:sticky;top:calc(var(--nav-h) + 24px)}
.withpic .pic img{display:block;width:100%;height:auto}
.withpic .pic figcaption{padding:14px 18px;border-top:1px solid var(--line);font-family:var(--mono);
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);line-height:1.6}
.card .ph img{display:block;width:100%;height:auto}
.bandpic{border-block:1px solid var(--line);background:#0a0d11}
.bandpic figure{margin:0;max-width:1300px;margin-inline:auto;padding:0 36px}
.bandpic img{display:block;width:100%;height:auto;border:1px solid var(--line2)}
.bandpic figcaption{padding:16px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim)}
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.shot{margin:0;background:var(--bg2)}
.shot img{display:block;width:100%;height:auto}
.shot figcaption{padding:16px 18px}
.shot figcaption b{display:block;font-family:var(--cond);font-size:20px;text-transform:uppercase;font-weight:600}
.shot figcaption span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);margin-top:5px;line-height:1.6}
.shot.wide{grid-column:span 2}
@media(max-width:1000px){
  .withpic{grid-template-columns:1fr;gap:34px}
  .withpic .pic{position:static}
  .shots{grid-template-columns:1fr 1fr}
  .shot.wide{grid-column:span 2}
}
@media(max-width:680px){
  .shots{grid-template-columns:1fr}.shot.wide{grid-column:span 1}
  .bandpic figure{padding:0 20px}
}

/* ---------- phone refinements ---------- */
@media(max-width:680px){
  /* headings: smaller floor so long words do not break awkwardly */
  .phero h1{font-size:clamp(38px,10.6vw,58px)}
  .sec-head h2{font-size:clamp(31px,8.4vw,44px);text-wrap:balance}
  /* desktop line breaks are too long for a phone — let the text reflow instead */
  .sec-head h2 br,.quote h2 br,.ctaband h2 br{display:none}
  .sec-head h2 br+*,.quote h2 br+*{margin-left:.28em}
  .sec-head p{font-size:16.5px}
  .prose p{font-size:16.5px}
  .prose h3{font-size:25px}

  /* wide tables scroll instead of squashing */
  .tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line)}
  .tblwrap .tbl{border:0;min-width:640px}
  .tblwrap::after{content:"swipe \2192";display:block;font-family:var(--mono);font-size:9.5px;
    letter-spacing:.14em;text-transform:uppercase;color:var(--dim);padding:8px 12px;border-top:1px solid var(--line)}

  /* the layout planner: keep one foot readable, scroll sideways */
  .gcells{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .cell{min-width:16px}

  /* gantt bars keep their labels legible */
  .bar span{font-size:9.5px;padding-left:8px}

  /* sticky side photos should not stick on a phone */
  .withpic .pic{position:static}

  /* stat blocks two-up rather than one long column */
  .stats{display:grid;grid-template-columns:1fr 1fr;border-top:0}
  .stats div{padding:16px 14px 16px 0;border-top:1px solid var(--line)}
  .stats strong{font-size:30px}

  /* tap targets */
  .btn{padding:16px 24px}
  .drawer a{padding:18px 0}
}
@media(max-width:400px){
  .wrap{padding:0 16px}
  .hero h1{font-size:8.4vw}
  .sec-head h2{font-size:29px}
  .metrics b,.cmp b{font-size:36px}
}