/* =========================================================================
   D0 ENGINEERING — premium theme matched to d0consulting.com
   Colours sampled from the live site.
   ========================================================================= */
:root{
  /* ===== BRAND COLOURS (light · red accent) ============================
     Accent red · text #3A3A3A · background #F1F1F1 · lines #E0E0E0        */
  --ink:        #ffffff;   /* was dark sections -> now white bands  */
  --ink-2:      #f5f5f5;
  --panel:      #ffffff;   /* cards                                 */
  --panel-line: #e0e0e0;   /* hairlines                             */
  --accent:     #d8232a;   /* RED accent                            */
  --accent-hi:  #e7443b;   /* accent hover                          */
  --btn:        #d8232a;   /* primary buttons = red                 */

  --paper:      #f1f1f1;   /* light-grey sections                   */
  --paper-2:    #ffffff;
  --paper-line: #e0e0e0;
  --paper-ink:  #2a2a2a;
  --paper-mut:  #6b6b6b;

  --fg:         #3a3a3a;   /* body text                             */
  --fg-strong:  #242424;   /* headings                              */
  --muted:      #6f6f6f;
  --muted-2:    #9a9a9a;
  --amber:      #d8232a;   /* teardown callout accent (red)         */
  --amber-soft: rgba(216,35,42,.12);
  /* ==================================================================== */

  --maxw: 1180px;
  --f-global: "Exo 2", system-ui, -apple-system, sans-serif;
  --f-display: var(--f-global);
  --f-body: var(--f-global);
  --f-mono: var(--f-global);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--ink); color:var(--fg);
  font-family:var(--f-body); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg{ max-width:100%; display:block; }
a{ color:var(--accent-hi); text-decoration:none; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 26px; }
h1,h2,h3,h4{ font-family:var(--f-display); font-weight:600; line-height:1.12; margin:0; color:var(--fg-strong); }
h1{ font-size:clamp(2.2rem,5.4vw,3.9rem); font-weight:700; letter-spacing:-.005em; }
h2{ font-size:clamp(1.8rem,3.6vw,2.7rem); font-weight:700; }
h3{ font-size:1.16rem; }
p{ margin:0 0 1rem; }
.eyebrow{
  font-family:var(--f-body); font-size:.75rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--accent);
  margin:0 0 16px;
}
.lead{ font-size:1.14rem; color:var(--muted); }
.muted{ color:var(--muted); }

/* buttons --------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em; cursor:pointer;
  font-family:var(--f-body); font-weight:500; font-size:.95rem;
  padding:.9em 1.7em; border-radius:8px; border:1px solid transparent;
  transition:.2s ease;
}
.btn--primary{ background:var(--btn); color:#fff; border-color:rgba(255,255,255,.08); }
.btn--primary:hover{ background:#242b34; transform:translateY(-1px); }
.btn--white{ background:#ffffff; color:var(--ink); border-color:#ffffff; font-weight:600; }
.btn--white:hover{ background:#eef1f4; transform:translateY(-1px); box-shadow:0 12px 30px -14px rgba(255,255,255,.35); }
.btn--pill{ background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.20); backdrop-filter:blur(4px); }
.btn--pill:hover{ background:rgba(255,255,255,.15); }
.btn--ghost{ background:transparent; color:var(--fg); border-color:var(--panel-line); }
.btn--ghost:hover{ border-color:var(--accent); color:#fff; }

/* ===== HEADER =========================================================== */
.site-head{ position:sticky; top:0; z-index:60; background:rgba(14,18,22,.72); backdrop-filter:blur(12px); border-bottom:1px solid rgba(255,255,255,.05); }
.site-head .wrap{ display:flex; align-items:center; justify-content:space-between; height:72px; }
.brand{ font-family:var(--f-display); font-weight:600; letter-spacing:.32em; font-size:1.05rem; color:#cfd3d7; text-transform:uppercase; }
.brand .zero,.brand b{ color:var(--fg-strong); font-weight:700; }
.brand small{ display:none; }
.nav{ display:flex; align-items:center; gap:30px; }
.nav a{ color:var(--muted); font-size:.92rem; }
.nav a:hover{ color:#fff; }
.nav-toggle{ display:none; background:none; border:0; color:#fff; font-size:1.5rem; cursor:pointer; }

/* ===== HERO ============================================================= */
.hero{ position:relative; text-align:center; padding:118px 0 92px; overflow:hidden; }
.hero::before{ /* cinematic machined-parts vibe via layered gradients */
  content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(120% 90% at 50% -10%, #1c232b 0%, transparent 55%),
    linear-gradient(180deg, #10151a 0%, #0c1013 100%);
}
.hero::after{ content:""; position:absolute; inset:0; z-index:0; opacity:.5;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.018) 0 2px, transparent 2px 26px),
    radial-gradient(60% 50% at 50% 40%, rgba(46,107,171,.10), transparent 70%);
  mask-image:radial-gradient(80% 70% at 50% 40%, #000 40%, transparent 90%);
}
.hero .wrap{ position:relative; z-index:1; }
.hero h1{ max-width:16ch; margin:0 auto; }
.hero .lead{ max-width:60ch; margin:22px auto 0; color:#c4c9cd; }
.hero-cta{ display:flex; gap:14px; justify-content:center; margin-top:34px; flex-wrap:wrap; }
.hero-stats{ display:flex; gap:40px; justify-content:center; flex-wrap:wrap; margin-top:44px; }
.hero-stats .stat b{ display:block; font-family:var(--f-display); font-weight:700; font-size:1.7rem; color:var(--fg-strong); }
.hero-stats .stat span{ font-size:.82rem; color:var(--muted); }

/* ===== SECTION SHELL =================================================== */
.section{ padding:96px 0; }
.section--light{ background:var(--paper); color:var(--paper-ink); }
.section--light h1,.section--light h2,.section--light h3,.section--light h4{ color:var(--paper-ink); }
.section--light .lead,.section--light .muted{ color:var(--paper-mut); }
.section--dark{ background:var(--ink); }
.section-head{ max-width:760px; margin:0 auto 58px; text-align:center; }
.section-head .lead{ margin-top:14px; }

/* line-icon tiles (challenges / services) ------------------------------- */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.tile{ text-align:center; padding:8px; }
.tile .ico{ width:66px; height:66px; margin:0 auto 20px; color:var(--paper-ink); }
.section--dark .tile .ico{ color:var(--fg-strong); }
.tile .ico svg{ width:100%; height:100%; }
.tile h3{ font-size:1.05rem; margin-bottom:8px; }
.tile p{ font-size:.92rem; color:var(--paper-mut); margin:0; }
.section--dark .tile p{ color:var(--muted); }
.tile .num{ font-size:.8rem; font-weight:600; letter-spacing:.12em; color:var(--accent); display:block; margin-bottom:10px; }

/* services get a soft card on light */
.svc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.svc{ background:var(--paper-2); border:1px solid var(--paper-line); border-radius:14px; padding:30px 24px; text-align:center; transition:.2s; }
.svc:hover{ transform:translateY(-4px); box-shadow:0 22px 50px -28px rgba(20,24,29,.4); }
.svc.lead-svc{ border-color:color-mix(in srgb, var(--accent) 45%, var(--paper-line)); box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent) inset; }
.svc .ico{ width:56px; height:56px; margin:0 auto 18px; color:var(--paper-ink); }
.svc h3{ font-size:1.02rem; margin-bottom:8px; }
.svc p{ font-size:.9rem; color:var(--paper-mut); margin:0; }
.svc .num{ font-size:.72rem; font-weight:600; letter-spacing:.14em; color:var(--accent); display:block; margin-bottom:12px; }

/* ===== EXPERIENCE (dark, centered) ===================================== */
.exp{ text-align:center; max-width:820px; margin:0 auto; }
.exp p{ color:var(--muted); font-size:1.05rem; }
.exp .nums{ display:flex; justify-content:center; gap:0; flex-wrap:wrap; margin-top:44px;
  border:1px solid var(--panel-line); border-radius:14px; overflow:hidden; }
.exp .num{ flex:1 1 160px; padding:26px 18px; border-right:1px solid var(--panel-line); background:var(--panel); }
.exp .num:last-child{ border-right:0; }
.exp .num b{ display:block; font-family:var(--f-display); font-weight:700; font-size:2.1rem; color:var(--fg-strong); }
.exp .num span{ font-size:.78rem; color:var(--muted); }

/* ===== PROJECTS / PROOF (dark) ========================================= */
.case{ display:grid; grid-template-columns:1.25fr 1fr; gap:0; border:1px solid var(--panel-line); border-radius:16px; overflow:hidden; margin-bottom:26px; }
.case-main{ padding:38px 40px; background:linear-gradient(180deg, #12171d, var(--ink)); }
.case-main h3{ font-size:1.5rem; margin-bottom:10px; }
.case-main p{ color:var(--muted); margin:0; }
.case-side{ padding:34px 36px; background:var(--panel); border-left:1px solid var(--panel-line); }
.case-side .lbl{ font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin:0 0 8px; }
.case-side ul{ list-style:none; margin:0 0 20px; padding:0; }
.case-side li{ font-size:.92rem; color:var(--fg); padding-left:18px; position:relative; margin:5px 0; }
.case-side li::before{ content:""; position:absolute; left:0; top:.6em; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.builds{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.build{ border:1px solid var(--panel-line); border-radius:14px; padding:24px 22px; background:var(--panel); }
.build .k{ font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.build h4{ font-size:1.05rem; margin:10px 0 6px; }
.build p{ font-size:.88rem; color:var(--muted); margin:0 0 14px; }
.build .metric{ font-family:var(--f-display); font-weight:700; font-size:1.5rem; color:var(--fg-strong); }

/* who I help (light) */
.sector{ background:var(--paper-2); border:1px solid var(--paper-line); border-radius:14px; padding:26px 24px; }
.sector .s-tag{ font-size:.7rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.sector h3{ font-size:1.05rem; margin:10px 0 8px; }
.sector p{ font-size:.9rem; color:var(--paper-mut); margin:0; }

/* quote */
.quote{ max-width:860px; margin:0 auto; text-align:center; }
.quote blockquote{ font-family:var(--f-display); font-weight:600; font-size:clamp(1.4rem,2.8vw,2rem); line-height:1.34; margin:0 0 16px; color:var(--fg-strong); }
.quote cite{ font-size:.85rem; color:var(--muted); font-style:normal; letter-spacing:.03em; }

/* ===== CONTACT (dark + light form card, like the live site) =========== */
.contact{ background:var(--ink); padding:96px 0; }
.contact-grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:52px; align-items:center;
  border:1px solid var(--panel-line); border-radius:18px; overflow:hidden; }
.contact-left{ padding:52px 46px; }
.contact-left h2{ margin-bottom:18px; }
.contact-left p{ color:var(--muted); max-width:42ch; }
.contact-left .nda{ margin-top:34px; font-size:.9rem; color:var(--muted-2); }
.form-card{ background:var(--paper); padding:40px 40px; }
.form-card label{ display:block; font-size:.85rem; color:var(--paper-ink); font-weight:500; margin:0 0 7px; }
.form-card .field{ margin-bottom:20px; }
.form-card input,.form-card textarea{
  width:100%; border:1px solid #cfcfcf; border-radius:9px; padding:14px 15px;
  font-family:var(--f-body); font-size:.95rem; color:var(--paper-ink); background:#fff;
}
.form-card textarea{ min-height:120px; resize:vertical; }
.form-card input:focus,.form-card textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(46,107,171,.15); }
.form-card .send{ text-align:right; }
.form-card button{ background:var(--btn); color:#fff; border:0; border-radius:8px; padding:.9em 1.8em; font-family:var(--f-body); font-weight:500; font-size:.95rem; cursor:pointer; transition:.2s; }
.form-card button:hover{ background:#242b34; }
/* direct contact (tap-to-call / email) + reply promise */
.contact-direct{ display:flex; flex-wrap:wrap; gap:14px; margin:26px 0 16px; }
.contact-phone,.contact-email{ display:flex; flex-direction:column; gap:3px; padding:13px 18px; border:1px solid var(--paper-line); border-radius:12px; text-decoration:none; color:var(--fg-strong); transition:border-color .2s, transform .2s, box-shadow .2s; }
.contact-phone:hover,.contact-email:hover{ border-color:var(--accent); transform:translateY(-1px); box-shadow:0 6px 18px rgba(216,35,42,.12); }
.contact-label{ font-size:.72rem; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
.contact-value{ font-size:1.06rem; font-weight:600; color:var(--fg-strong); }
.contact-left .reply-promise{ font-weight:600; color:var(--fg-strong); max-width:none; margin:8px 0 6px; }

/* ===== FOOTER =========================================================== */
.site-foot{ background:var(--ink-2); padding:56px 0 34px; border-top:1px solid rgba(255,255,255,.04); }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:30px; }
.foot-grid h5{ font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); margin:0 0 10px; }
.foot-grid p,.foot-grid a{ font-size:.9rem; color:var(--muted); margin:0 0 4px; display:block; }
.foot-grid a:hover{ color:#fff; }
.foot-brand .brand{ font-size:1rem; }
.foot-logo-link{ display:inline-flex; align-items:center; max-width:100%; }
.foot-logo-img{ display:block; height:34px; width:auto; max-width:100%; object-fit:contain; }
.foot-legal{ text-align:center; margin-top:44px; padding-top:22px; border-top:1px solid rgba(255,255,255,.05); font-size:.8rem; color:var(--muted-2); }

/* ===== TEARDOWN (dark centerpiece) ===================================== */
.teardown{ padding:40px 0 96px; background:#05080c; }
.stage-label{ display:flex; align-items:center; gap:16px; justify-content:center; margin:0 0 6px; }
.stage-label span{ font-size:.72rem; letter-spacing:.14em; color:var(--muted-2); text-transform:uppercase; }
.stage-label .line{ display:none; }
.stage-shell{ position:relative; }
.stage{ position:relative; height:clamp(440px,54vw,620px); perspective:1500px; perspective-origin:50% 42%; margin-top:6px; }
.orbit{ position:absolute; inset:0; transform-style:preserve-3d; }
.veh{ position:absolute; top:50%; left:50%; width:clamp(260px,40vw,500px);
  transform:translate(-50%,-50%);
  transition:transform .95s cubic-bezier(.22,.75,.22,1), opacity .95s ease, filter .95s ease;
  will-change:transform,opacity,filter; }
.veh .card{ position:relative; background:transparent; border:0; box-shadow:none; overflow:visible; }
.veh .veh-img{ width:100%; height:auto; display:block; -webkit-user-drag:none; user-select:none;
  filter:drop-shadow(0 0 22px rgba(90,190,240,.30)); }
.veh.is-front .veh-img{ filter:drop-shadow(0 0 30px rgba(120,210,255,.5)); }
.veh .cap{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:6px;
  font-size:.72rem; color:var(--muted); }
.veh .cap b{ color:var(--fg-strong); font-family:var(--f-display); font-weight:600; font-size:.92rem; }
.veh:not(.is-front){ cursor:pointer; pointer-events:auto; }
.veh.is-front{ pointer-events:none; }
.anchor{ pointer-events:none; }

.anchor{ position:absolute; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%;
  background:var(--amber); box-shadow:0 0 0 4px var(--amber-soft); opacity:0; transition:opacity .4s ease .2s; z-index:7; }
.veh.is-front .anchor{ opacity:1; }
.anchor::after{ content:""; position:absolute; inset:-5px; border-radius:50%; border:1px solid var(--amber); animation:ping 2.4s ease-out infinite; }
@keyframes ping{ 0%{transform:scale(.6);opacity:.9} 100%{transform:scale(1.7);opacity:0} }

.notes{ position:absolute; inset:0; z-index:40; pointer-events:none; }
.note{ position:absolute; width:min(256px,44vw); background:rgba(21,27,34,.96); border:1px solid var(--panel-line);
  border-left:2px solid var(--amber); border-radius:10px; padding:14px 16px; pointer-events:none;
  opacity:0; transform:translateY(10px) scale(.94); transition:opacity .5s, transform .5s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 26px 60px -24px rgba(0,0,0,.8); }
.note.show{ opacity:1; transform:none; }
.note .code{ font-size:.62rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--amber); display:flex; align-items:center; gap:7px; margin-bottom:6px; }
.note .code::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--amber); box-shadow:0 0 8px var(--amber); }
.note h4{ font-size:.98rem; margin:0 0 4px; color:var(--fg-strong); }
.note p{ font-size:.82rem; color:var(--muted); margin:0; line-height:1.5; }
.note p b{ color:var(--accent-hi); font-weight:600; }
.note::after{ content:""; position:absolute; top:50%; width:clamp(20px,4vw,52px); height:1px; background:linear-gradient(90deg,var(--amber),transparent); }
.note.slot-l::after{ right:-1px; transform:translateX(100%); }
.note.slot-r::after{ left:-1px; transform:translateX(-100%); background:linear-gradient(270deg,var(--amber),transparent); }
.note.pos1{ left:0; top:15%; } .note.pos2{ right:0; top:40%; } .note.pos3{ left:4%; bottom:12%; }

.orbit-controls{ display:flex; align-items:center; justify-content:center; gap:16px; margin-top:30px; flex-wrap:wrap; }
.chips{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.chip{ font-size:.82rem; padding:.55em 1.15em; border:1px solid var(--panel-line); border-radius:40px; background:transparent; color:var(--muted); cursor:pointer; transition:.18s; font-family:var(--f-body); }
.chip:hover{ color:#fff; border-color:var(--muted-2); }
.chip.active{ color:#fff; border-color:var(--accent); background:color-mix(in srgb,var(--accent) 16%,transparent); }
.playbtn{ font-size:.78rem; letter-spacing:.04em; display:inline-flex; align-items:center; gap:8px; padding:.55em 1.05em; border:1px solid var(--panel-line); border-radius:40px; background:transparent; color:var(--muted); cursor:pointer; font-family:var(--f-body); }
.playbtn:hover{ color:#fff; }
.playbtn .dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent); }
.playbtn.paused .dot{ background:var(--muted-2); box-shadow:none; }

/* interior pages */
.page-body{ padding:80px 0; }
.page-body .prose{ max-width:70ch; }
.page-body .prose h2{ margin:1.6em 0 .5em; }

.proof-note{ text-align:center; margin-top:26px; font-size:.88rem; color:var(--muted); max-width:70ch; margin-left:auto; margin-right:auto; }

/* scroll reveal (staggered) + count-up numbers */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .6s ease, transform .7s cubic-bezier(.22,.75,.22,1); }
.reveal.is-in{ opacity:1; transform:none; }

/* ===== RESPONSIVE ====================================================== */
@media (max-width:900px){
  .grid-3,.grid-4,.svc-grid,.builds{ grid-template-columns:repeat(2,1fr); }
  .case,.contact-grid{ grid-template-columns:1fr; }
  .case-side{ border-left:0; border-top:1px solid var(--panel-line); }
}
@media (max-width:640px){
  .nav{ position:fixed; inset:72px 0 auto 0; flex-direction:column; align-items:flex-start; gap:0;
    background:var(--ink-2); border-bottom:1px solid var(--panel-line); padding:8px 26px 18px; transform:translateY(-140%); transition:.3s; }
  .nav.open{ transform:translateY(0); }
  .nav a{ padding:13px 0; width:100%; border-bottom:1px solid var(--panel-line); }
  .nav-toggle{ display:block; }
  .grid-3,.grid-4,.svc-grid,.builds{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .contact-left,.form-card,.case-main,.case-side{ padding:32px 26px; }
  .stage{ height:clamp(320px,84vw,420px); }
  .notes{ position:static; margin-top:18px; display:grid; gap:10px; }
  .note{ position:static !important; width:100%; opacity:1; transform:none; }
  .note::after{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .veh{ transition:none; } .anchor::after{ animation:none; }
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ===================== Bain-style hero slider ========================= */
.hxo{ position:relative; min-height:88vh; display:flex; align-items:center; overflow:hidden; }
.hxo-bg{ position:absolute; inset:0; z-index:0; background:#0b0f14; }
.hxo-bg::before{ content:""; position:absolute; inset:-25%;
  background:
    radial-gradient(38% 55% at 22% 32%, rgba(46,107,171,.55), transparent 60%),
    radial-gradient(45% 65% at 82% 18%, rgba(120,180,235,.30), transparent 62%),
    radial-gradient(55% 75% at 68% 88%, rgba(12,20,32,.9), transparent 70%),
    linear-gradient(118deg,#0b1016 0%, #10203a 42%, #274a70 58%, #aeb9c6 96%, #e7ebef 108%);
  filter:blur(8px); animation:hxoDrift 20s ease-in-out infinite alternate; }
.hxo-bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(6,9,13,.88) 0%, rgba(6,9,13,.4) 34%, transparent 56%); }
@keyframes hxoDrift{ 0%{transform:scale(1.05)} 100%{transform:scale(1.16) translate(-2%,-1%)} }

.hxo-inner{ position:relative; z-index:2; width:100%; padding-bottom:96px; }
.hxo-slides{ position:relative; min-height:340px; max-width:760px; }
.hxo-slide{ position:absolute; inset:0; opacity:0; transform:translateY(18px); pointer-events:none;
  transition:opacity .7s ease, transform .7s cubic-bezier(.22,.75,.22,1); }
.hxo-slide.is-active{ opacity:1; transform:none; pointer-events:auto; position:relative; }
.hxo-eyebrow{ font-size:.82rem; font-weight:600; color:#e6edf4; margin:0 0 18px; }
.hxo-slide h1{ font-size:clamp(2.3rem,5vw,4rem); line-height:1.05; color:#fff; max-width:15ch; }
.hxo-text{ margin-top:18px; color:#d5dde4; font-size:1.12rem; max-width:52ch; }
.hxo-more{ display:inline-flex; align-items:center; gap:12px; margin-top:26px; color:#fff; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; font-size:.82rem; }
.hxo-more span{ transition:transform .2s; } .hxo-more:hover span{ transform:translateX(6px); }

.hxo-tabs{ position:absolute; left:0; right:0; bottom:0; z-index:2; border-top:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg, transparent, rgba(6,9,13,.35)); }
.hxo-tabrow{ display:flex; }
.hxo-tab{ flex:1; background:transparent; border:0; color:rgba(255,255,255,.6);
  font-family:var(--f-display); font-weight:600; font-size:1rem; text-align:center; padding:22px 10px 26px;
  cursor:pointer; position:relative; }
.hxo-tab.is-active{ color:#fff; }
.hxo-tab i{ position:absolute; left:0; bottom:-1px; height:3px; width:0; background:var(--accent); }
.hxo-tab.is-active i{ width:100%; }
.hxo-scroll{ position:absolute; right:26px; bottom:96px; z-index:3; color:rgba(255,255,255,.7);
  font-size:.78rem; letter-spacing:.08em; }
@media(max-width:760px){ .hxo-scroll{ display:none; } .hxo-tabrow{ overflow-x:auto; } .hxo-tab{ font-size:.82rem; padding:16px 8px 20px; } }

/* floating scroll control */
.scrollctl{ position:fixed; right:22px; bottom:22px; z-index:80; width:48px; height:48px; border-radius:50%;
  border:1px solid rgba(255,255,255,.35); background:rgba(10,14,18,.55); color:#fff; display:grid; place-items:center;
  cursor:pointer; backdrop-filter:blur(8px); transition:transform .25s, background .25s; }
.scrollctl:hover{ background:rgba(46,107,171,.9); transform:translateY(-2px); }
.scrollctl svg{ transition:transform .3s; }
.scrollctl.up svg{ transform:rotate(180deg); }

/* ===================== questionnaire ================================= */
.qz{ padding:96px 0; }
.qz-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:52px; align-items:center; }
.qz-media{ background:radial-gradient(120% 120% at 50% 20%, #16202c, #0b0f14); border-radius:18px; padding:22px;
  border:1px solid var(--paper-line); }
.qz-media img{ width:100%; height:auto; filter:drop-shadow(0 0 26px rgba(90,190,240,.35)); }
.qz-body h2{ font-size:clamp(1.8rem,3.4vw,2.6rem); }
.qz-sub{ color:var(--paper-mut); margin-top:14px; font-size:1.05rem; max-width:46ch; }
.qz-q{ margin-top:26px; }
.q-head{ display:flex; align-items:baseline; gap:12px; margin-bottom:12px; }
.q-label{ font-weight:700; color:var(--paper-ink); }
.q-num{ font-size:.85rem; color:#9aa6b1; }
.chips-q{ display:flex; flex-wrap:wrap; gap:12px; }
.chip-q{ border:1px solid #d3d8dd; background:#fff; color:var(--accent); font-weight:600; border-radius:30px;
  padding:.72em 1.25em; cursor:pointer; transition:.16s; font-family:var(--f-body); font-size:.95rem; }
.chip-q:hover{ border-color:var(--accent); }
.chip-q.active{ background:var(--accent); color:#fff; border-color:var(--accent); }
.qz-start{ margin-top:30px; }
.qz-start span{ margin-left:6px; }
@media(max-width:900px){ .qz-grid{ grid-template-columns:1fr; gap:30px; } }

/* ===================== PALETTE V2 — light theme overrides ============= */
body{ background:var(--paper); }

/* buttons */
.btn--primary,.btn--white{ background:var(--accent); color:#fff; border-color:var(--accent); font-weight:600; }
.btn--primary:hover,.btn--white:hover{ background:var(--accent-hi); box-shadow:none; }
.btn--ghost{ color:var(--fg); border-color:var(--panel-line); }
.btn--ghost:hover{ border-color:var(--accent); color:var(--accent); }
.btn--pill{ background:transparent; color:var(--accent); border-color:var(--accent); backdrop-filter:none; }
.btn--pill:hover{ background:var(--accent); color:#fff; }

/* header for light */
.site-head{ background:rgba(255,255,255,.82); border-bottom:1px solid var(--panel-line); }
.brand{ color:#3a3a3a; } .brand b,.brand .zero{ color:var(--accent); }
.nav a{ color:#5a5a5a; } .nav a:hover{ color:#111; }

/* case + form + light surfaces */
.case-main{ background:var(--paper-2); }
.case-side{ background:var(--paper); }
.form-card{ background:var(--paper-2); border:1px solid var(--paper-line); }

/* ---- HERO: light, iPhone-style silky gradient ---- */
.hxo{ color:var(--fg); }
.hxo-bg{ background:#eef0f2; }
.hxo-bg::before{
  background:
    radial-gradient(46% 60% at 16% 26%, rgba(216,35,42,.16), transparent 60%),
    radial-gradient(50% 66% at 84% 20%, rgba(176,186,198,.55), transparent 64%),
    radial-gradient(62% 80% at 72% 92%, rgba(214,220,226,.9), transparent 72%),
    conic-gradient(from 210deg at 62% 42%, #f6f7f8, #e9ebee, #f4f1f1, #eef1f3, #f6f7f8);
  filter:blur(6px); }
.hxo-bg::after{
  background:
    repeating-linear-gradient(122deg, rgba(58,58,58,.045) 0 1px, transparent 1px 27px),
    repeating-linear-gradient(52deg, rgba(58,58,58,.03) 0 1px, transparent 1px 40px),
    linear-gradient(180deg, transparent 58%, rgba(224,224,224,.65) 100%);
  mix-blend-mode:multiply; }
.hxo-eyebrow{ color:var(--accent); }
.hxo-slide h1{ color:var(--fg-strong); }
.hxo-text{ color:#565656; }
.hxo-more{ color:var(--fg-strong); }
.hxo-more:hover{ color:var(--accent); }
.hxo-tabs{ border-top:1px solid var(--panel-line); background:linear-gradient(180deg, transparent, rgba(224,224,224,.5)); }
.hxo-tab{ color:#8a8a8a; } .hxo-tab.is-active{ color:var(--fg-strong); }
.hxo-tab i{ background:var(--accent); }
.hxo-scroll{ display:none; }

/* ---- teardown stays dark: light text overrides ---- */
.teardown{ color:#dfe3e7; }
.teardown .stage-label span{ color:rgba(255,255,255,.55); }
.veh .cap{ color:rgba(255,255,255,.6); } .veh .cap b{ color:#fff; }
.teardown .chip{ color:rgba(255,255,255,.7); border-color:rgba(255,255,255,.2); }
.teardown .chip:hover{ color:#fff; }
.teardown .chip.active{ color:#fff; border-color:var(--accent); background:rgba(216,35,42,.22); }
.teardown .playbtn{ color:rgba(255,255,255,.7); border-color:rgba(255,255,255,.2); }
.teardown .playbtn:hover{ color:#fff; }
.note h4{ color:#fff; } .note p{ color:rgba(255,255,255,.72); }

/* ---- footer grounded in dark grey ---- */
.site-foot{ background:#2b2b2b; }
.site-foot .brand{ color:#e8e8e8; } .site-foot .brand b{ color:var(--accent); }
.foot-grid h5{ color:#9a9a9a; }
.foot-grid p,.foot-grid a{ color:#c9c9c9; } .foot-grid a:hover{ color:#fff; }
.foot-legal{ color:#8a8a8a; border-top-color:rgba(255,255,255,.1); }

/* ---- split two-part scroll control ---- */
.scrollctl{ position:fixed; right:22px; bottom:22px; z-index:80; width:auto; height:auto; border:0;
  background:transparent; backdrop-filter:none; display:flex; flex-direction:column; align-items:center; gap:8px; }
.scrollctl:hover{ transform:none; background:transparent; }
.scrollctl-label{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:#3a3a3a;
  background:rgba(255,255,255,.78); padding:2px 9px; border-radius:11px; box-shadow:0 2px 8px -3px rgba(0,0,0,.3); }
.scrollctl-pill{ display:flex; flex-direction:column; border-radius:26px; overflow:hidden;
  box-shadow:0 14px 34px -12px rgba(0,0,0,.5); }
.scrollctl-pill button{ width:46px; height:42px; border:0; background:var(--accent); color:#fff;
  display:grid; place-items:center; cursor:pointer; transition:background .2s, opacity .2s; }
.scrollctl-pill button + button{ border-top:1px solid rgba(255,255,255,.4); }
.scrollctl-pill button:hover{ background:var(--accent-hi); }
.scrollctl-pill button.disabled{ opacity:.32; cursor:default; }
.scrollctl-pill svg{ width:18px; height:18px; }

/* ===================== PALETTE V2.1 — hero blobs + circular control === */
/* hero: use the SVG blob field, drop the old gradient pseudo, keep a left scrim */
.hxo-bg::before{ content:none; }
.hxo-bg::after{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(241,241,241,.80) 0%, rgba(241,241,241,.32) 30%, transparent 56%); }
.hxo-bg .hxo-svg{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0; }
.hxo-blobs{ transform-origin:center; animation:hxoDrift 26s ease-in-out infinite alternate; }

/* scroll control: transparent circle, accent edges + arrows; outline label */
.scrollctl-label{ background:transparent; color:var(--accent); border:1.5px solid var(--accent);
  box-shadow:none; padding:3px 12px; border-radius:12px; letter-spacing:.16em; }
.scrollctl-pill{ width:58px; height:58px; border-radius:50%; border:1.6px solid var(--accent);
  background:transparent; overflow:hidden; box-shadow:none; }
.scrollctl-pill button{ width:100%; height:50%; background:transparent; color:var(--accent); }
.scrollctl-pill button + button{ border-top:1.4px solid var(--accent); }
.scrollctl-pill button:hover{ background:rgba(216,35,42,.12); }
.scrollctl-pill button.disabled{ opacity:.3; }
.scrollctl-pill svg{ width:18px; height:18px; }

/* ===================== PALETTE V2.2 — feedback pass ================== */
/* progress bar driven by JS only (no CSS jump) */
.hxo-tab.is-active i{ width:0; }

/* scroll control: instant, no reddish transition */
.scrollctl-pill button,.scrollctl-label{ transition:none; }

/* gentler, slower reveals */
.reveal{ transition:opacity .8s ease, transform .9s cubic-bezier(.22,.75,.22,1); }

/* count-up numbers in red */
.exp .num b,.hero-stats .stat b{ color:var(--accent); }

/* questionnaire — progressive reveal */
.qz-hidden{ opacity:0; transform:translateY(14px); max-height:0; overflow:hidden; margin:0; pointer-events:none;
  transition:opacity .7s ease, transform .7s ease, max-height .85s ease, margin .4s ease; }
.qz-q.qz-hidden.qz-show{ opacity:1; transform:none; max-height:640px; margin-top:26px; overflow:visible; pointer-events:auto; }
.qz-start.qz-hidden{ display:inline-flex; }
.qz-start.qz-hidden.qz-show{ opacity:1; transform:none; max-height:90px; margin-top:30px; pointer-events:auto; }

/* ===================== PALETTE V2.3 — feedback pass 2 ================ */
/* challenges: add red accent on the icons */
#challenges .tile .ico{ color:var(--accent); }

/* services: red edge only on the hovered card (no permanent lead border) */
.svc.lead-svc{ border-color:var(--paper-line); box-shadow:none; }
.svc:hover{ border-color:var(--accent); }

/* questionnaire: one question at a time (replace mode) */
.qz-step{ display:none; }
.qz-q.qz-step.qz-active{ display:block; animation:qzIn .45s ease both; }
.qz-start.qz-step.qz-active{ display:inline-flex; animation:qzIn .45s ease both; }
@keyframes qzIn{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} }

/* barrel / odometer numbers (3D roll) */
.reelbox{ display:inline-flex; align-items:baseline; }
.reel{ display:inline-block; height:1em; line-height:1; overflow:hidden;
  -webkit-mask:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
          mask:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent); }
.reel-inner{ display:flex; flex-direction:column; transform:translateY(0);
  transition:transform 1.15s cubic-bezier(.15,.9,.2,1); will-change:transform; }
.reel-inner span{ height:1em; line-height:1; display:block; }
.reel-static{ display:inline-block; }

/* ===================== PALETTE V2.4 — fixes ========================== */
/* barrel digits must inherit the big red number style (not the label span) */
.exp .num b span,.exp .num b .reel-static,.hero-stats .stat b span{ font:inherit; color:inherit; line-height:1; }
.exp .num b .reelbox{ line-height:1; }

/* keep the hero tab strip readable over deep colours */
.hxo-tabs{ background:rgba(241,241,241,.92); }

/* tighten the positioning-quote band */
.quoteband{ padding:70px 0; }

/* ===================== PALETTE V2.5 — LT pass ======================== */
/* hero slides: all anchored to the SAME top-left point */
.hxo-slides{ position:relative; min-height:clamp(460px,56vh,580px); }
.hxo-slide{ position:absolute; top:0; left:0; width:100%; }
.hxo-slide.is-active{ position:absolute; }

/* teardown vehicles now red -> red glow instead of cyan */
.veh .veh-img{ filter:drop-shadow(0 0 22px rgba(255,80,70,.32)); }
.veh.is-front .veh-img{ filter:drop-shadow(0 0 30px rgba(255,90,80,.5)); }

/* step number on plain tiles (How we work) */
.tile .num{ display:block; font-size:.8rem; font-weight:600; letter-spacing:.14em; color:var(--accent); margin-bottom:10px; }

/* ===================== hero pure crossfade (no movement) ============= */
.hxo-slide{ transform:none; transition:opacity .7s ease; }
.hxo-slide.is-active{ transform:none; }

/* ===================== Book-a-call modal ============================= */
.modal-overlay{ position:fixed; inset:0; z-index:200; background:rgba(18,18,20,.6); backdrop-filter:blur(4px);
  display:none; align-items:center; justify-content:center; padding:24px; }
.modal-overlay.open{ display:flex; animation:mFade .25s ease; }
@keyframes mFade{ from{opacity:0} to{opacity:1} }
.modal{ background:var(--paper-2); color:var(--paper-ink); width:min(540px,100%); border-radius:16px;
  padding:34px 34px 30px; box-shadow:0 40px 100px -30px rgba(0,0,0,.5); position:relative; max-height:92vh; overflow:auto;
  animation:mUp .3s cubic-bezier(.2,.8,.2,1); }
@keyframes mUp{ from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none} }
.modal h3{ font-size:1.55rem; margin:0 0 6px; }
.modal p.sub{ color:var(--paper-mut); margin:0 0 22px; font-size:.95rem; }
.modal .field{ margin-bottom:16px; }
.modal label{ display:block; font-size:.85rem; font-weight:500; margin:0 0 6px; color:var(--paper-ink); }
.modal input,.modal textarea{ width:100%; border:1px solid #cfd4d9; border-radius:9px; padding:12px 14px;
  font-family:var(--f-body); font-size:.95rem; background:#fff; color:var(--paper-ink); }
.modal textarea{ min-height:104px; resize:vertical; }
.modal input:focus,.modal textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(216,35,42,.15); }
.modal .row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.modal .actions{ display:flex; justify-content:flex-end; gap:12px; margin-top:8px; }
.modal-close{ position:absolute; top:12px; right:16px; border:0; background:transparent; font-size:1.7rem; line-height:1; color:#9aa0a6; cursor:pointer; }
.modal-close:hover{ color:#222; }
@media(max-width:520px){ .modal .row{ grid-template-columns:1fr; } }

/* ===================== white vehicles + clean build cards =========== */
.veh .veh-img{ filter:drop-shadow(0 0 22px rgba(210,225,245,.28)); }
.veh.is-front .veh-img{ filter:drop-shadow(0 0 30px rgba(225,238,255,.5)); }

.builds{ align-items:stretch; }
.build{ display:flex; flex-direction:column; }
.build .k{ margin-bottom:8px; }
.build h4{ margin:0 0 8px; }
.build p{ margin:0; color:var(--muted); min-height:2.9em; }  /* 2 tidy lines, aligned */

/* anchor links (Read more, nav, #contact) land below the sticky header */
html{ scroll-padding-top:84px; }

/* NDA note in accent */
.contact-left .nda{ color:var(--accent); font-weight:500; }

/* ===================== language toggle (EN / LT) ==================== */
.langsel{ display:inline-flex; align-items:center; border:1px solid var(--panel-line); border-radius:30px; overflow:hidden; margin-right:14px; }
.langsel button{ border:0; background:transparent; padding:.42em .72em; font-family:var(--f-body); font-size:.72rem; font-weight:600; letter-spacing:.05em; color:var(--muted); cursor:pointer; transition:background .2s,color .2s; }
.langsel button.active{ background:var(--accent); color:#fff; }
.langsel button:not(.active):hover{ color:var(--fg-strong); }

/* stat unit inline with number, descriptor below (unit keeps label font) */
.exp .numline{ display:inline-flex; align-items:baseline; gap:6px; justify-content:center; }
.exp .num .unit{ font-family:var(--f-body); font-style:normal; font-size:.82rem; font-weight:500; color:var(--muted); }
.exp .num .desc{ display:block; margin-top:6px; font-size:.82rem; color:var(--muted); }
.langsel{ margin-right:0; margin-left:16px; }

/* native custom logo in header */
.site-head .brand--img .custom-logo-link{ display:inline-flex; align-items:center; }
.site-head .brand--img .custom-logo,.site-head .brand--img img{ height:36px; width:auto; max-width:none; object-fit:contain; display:block; }

/* ===================== RESPONSIVE v2 (mobile / tablet) =============== */
/* dark hamburger on the light header */
.nav-toggle{ color:var(--fg); font-size:1.7rem; line-height:1; padding:6px 8px; }

@media (max-width:900px){
  /* hamburger nav for tablet & phone */
  .nav-toggle{ display:block; }
  .nav{ position:fixed; inset:64px 0 auto 0; flex-direction:column; align-items:stretch; gap:0;
    background:#ffffff; border-bottom:1px solid var(--panel-line); box-shadow:0 24px 40px -24px rgba(0,0,0,.25);
    padding:10px 24px 20px; transform:translateY(-160%); transition:transform .3s ease; z-index:59; }
  .nav.open{ transform:translateY(0); }
  .nav a{ color:var(--fg); padding:14px 0; width:100%; border-bottom:1px solid var(--panel-line); }
  .nav .langsel{ margin:14px 0 4px; align-self:flex-start; }
  .nav .btn--pill{ margin-top:12px; width:100%; text-align:center; }
  /* grids */
  .grid-3,.grid-4,.svc-grid,.builds{ grid-template-columns:repeat(2,1fr); }
  .case,.contact-grid{ grid-template-columns:1fr; }
  .case-side{ border-left:0; border-top:1px solid var(--panel-line); }
}

@media (max-width:640px){
  .grid-3,.grid-4,.svc-grid,.builds{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; }
  .contact-left,.form-card,.case-main,.case-side{ padding:30px 22px; }
  /* experience stats 2 per row */
  .exp .num{ flex:0 0 50%; box-sizing:border-box; }
  /* hero: readable over the red blob, tighter type */
  .hxo{ min-height:84vh; }
  .hxo-inner{ padding-bottom:118px; }
  .hxo-bg::after{ background:linear-gradient(90deg, rgba(238,240,242,.94) 0%, rgba(238,240,242,.6) 46%, rgba(238,240,242,.12) 78%); }
  .hxo-slide h1{ font-size:clamp(2rem,9vw,2.9rem); }
  .hxo-text{ font-size:1rem; }
  .hxo-eyebrow{ margin-bottom:14px; }
  /* showroom: fit small screens, notes stack below */
  .teardown .stage{ overflow:hidden; height:clamp(300px,82vw,400px); }
  .veh{ width:clamp(200px,72vw,300px); }
  .notes{ position:static; margin-top:16px; display:grid; gap:10px; }
  .note{ position:static !important; width:100%; opacity:1 !important; transform:none !important; }
  .note::after{ display:none; }
  .chips{ overflow-x:auto; flex-wrap:nowrap; justify-content:flex-start; padding-bottom:4px; }
  .chip{ flex:0 0 auto; }
  /* section rhythm a touch tighter */
  .section{ padding:64px 0; }
  h2{ font-size:clamp(1.6rem,7vw,2.1rem); }
}

@media (max-width:400px){
  .exp .num{ flex:0 0 100%; }
  .hxo-tab{ font-size:.74rem; }
}

/* logo: never stretch - fix height, width auto (keeps ratio) */
.site-head .brand--img{ display:inline-flex; align-items:center; }
.site-head .brand--img .custom-logo,
.site-head .brand--img img{ height:36px; width:auto; max-width:none; object-fit:contain; display:block; }

/* ===================== MOBILE POLISH ================================ */
@media (max-width:640px){
  /* Teardown: on phones, show one vehicle cleanly above stacked callouts. */
  .teardown{ padding:34px 0 58px; }
  .teardown .wrap{ padding-left:18px; padding-right:18px; }
  .teardown .stage-label{ justify-content:flex-start; margin:0 0 14px; padding:0 6px; }
  .teardown .stage-label span{ line-height:1.55; }
  /* Keep the showroom footprint fixed on mobile. The orbit and notes occupy
     reserved layers so changing platform images/copy never shifts the rest of
     the page. */
  .teardown .stage{
    position:relative;
    height:860px;
    min-height:860px;
    overflow:hidden;
    perspective:1500px;
    perspective-origin:50% 16%;
    margin-top:0;
  }
  .teardown .orbit{
    position:absolute;
    inset:0 0 auto 0;
    height:300px;
    transform-style:preserve-3d;
    overflow:hidden;
  }
  /* Keep the same animated 3D orbit used on desktop. Notes remain stacked below. */
  .teardown .veh{
    display:block;
    width:clamp(200px,72vw,300px);
    transition:transform .95s cubic-bezier(.22,.75,.22,1), opacity .95s ease, filter .95s ease;
    will-change:transform,opacity,filter;
  }
  .teardown .veh .cap{ margin-top:-2px; }
  .teardown .veh .cap b{ font-size:1rem; }
  .teardown .anchor{ width:18px; height:18px; }
  /* Reserve a fixed notes area below the rotating vehicle. Notes are still
     created by the desktop JS and reveal one-by-one with the same stagger. */
  .teardown .notes{
    position:absolute;
    top:312px;
    left:0;
    right:0;
    height:530px;
    display:grid;
    grid-template-rows:repeat(3, minmax(0, 1fr));
    gap:10px;
    margin:0;
    z-index:3;
    pointer-events:none;
    overflow:hidden;
  }
  .teardown .note{
    position:relative !important;
    inset:auto !important;
    width:100%;
    height:100%;
    min-height:0;
    box-sizing:border-box;
    padding:14px 15px 15px;
    opacity:0 !important;
    transform:translateY(10px) scale(.96) !important;
    transition:opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1) !important;
    border-radius:12px;
  }
  .teardown .note.show{
    opacity:1 !important;
    transform:none !important;
  }
  .teardown .note::after{ display:none; }
  .teardown .note .code{ font-size:.58rem; line-height:1.35; }
  .teardown .note h4{ font-size:.93rem; line-height:1.25; }
  .teardown .note p{ font-size:.78rem; line-height:1.48; }
  .teardown .orbit-controls{ margin-top:20px; gap:12px; }
  .teardown .playbtn{ order:0; }
  .teardown .chips{ width:100%; order:1; justify-content:flex-start; padding:0 2px 6px; }

  /* Contact: compact, full-width mobile composition with no dead space. */
  .contact{ padding:48px 0 54px; }
  .contact > .wrap{ padding-left:18px; padding-right:18px; }
  .contact-grid{
    display:block;
    border-radius:14px;
    overflow:hidden;
  }
  .contact-left{
    padding:30px 24px 28px;
  }
  .contact-left h2{ margin-bottom:16px; }
  .contact-left p{ max-width:none; font-size:1rem; line-height:1.65; }
  .contact-direct{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    margin:24px 0 0;
  }
  .contact-phone,.contact-email{
    width:100%;
    min-width:0;
    padding:15px 16px;
  }
  .contact-value{
    font-size:1rem;
    overflow-wrap:anywhere;
    word-break:break-word;
  }
  .contact-left .nda{
    margin:24px 0 0;
    font-size:.88rem;
    line-height:1.55;
  }
  .contact-left .reply-promise{ display:none !important; }
  .form-card{
    padding:28px 24px 30px;
    border-left:0;
    border-right:0;
    border-bottom:0;
  }
  .form-card input,.form-card textarea{
    font-size:16px; /* prevents iOS input zoom */
  }

  /* Hamburger panel: make the CTA a proper compact button, not a tall link row. */
  .nav{
    padding:14px 24px 22px;
    max-height:calc(100dvh - 64px);
    overflow-y:auto;
  }
  .nav > a:not(.btn){ padding:13px 0; }
  .nav .btn--pill{
    width:100% !important;
    min-height:48px;
    height:auto !important;
    padding:11px 18px !important;
    margin:16px 0 2px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:var(--accent);
    border-color:var(--accent);
    color:#fff;
    line-height:1.2;
  }
  .nav .btn--pill:hover,.nav .btn--pill:focus{
    background:var(--accent-hi);
    color:#fff;
  }
  .nav .langsel{ margin:14px 0 0; }

  /* Floating scroll control should not cover form fields or callout text. */
  .scrollctl{ right:12px; bottom:82px; transform:scale(.86); transform-origin:bottom right; }
}

@media (max-width:380px){
  .teardown .stage{ height:900px; min-height:900px; }
  .teardown .notes{ height:570px; }
}


/* ===================== MOBILE SHOWROOM LAYOUT ========================
   Mobile uses two physically separate rows inside .stage-shell:
   1) the animated vehicle orbit; 2) the three staggered problem cards.
   This guarantees notes can never overlap the vehicle and keeps the section
   footprint fixed while platforms rotate. Desktop behaviour is unchanged. */
@media (max-width:640px){
  .teardown .stage-shell{
    position:relative;
    display:grid;
    grid-template-rows:320px 620px;
    row-gap:18px;
    height:958px;
    min-height:958px;
    overflow:hidden;
  }

  .teardown .stage{
    position:relative;
    grid-row:1;
    width:100%;
    height:320px !important;
    min-height:320px !important;
    margin:0;
    overflow:hidden;
    perspective:1500px;
    perspective-origin:50% 44%;
  }

  .teardown .orbit{
    position:absolute;
    inset:0;
    height:100%;
    overflow:hidden;
    transform-style:preserve-3d;
    z-index:1;
  }

  .teardown .veh{
    width:clamp(220px,78vw,330px);
    transition:transform .95s cubic-bezier(.22,.75,.22,1), opacity .95s ease, filter .95s ease !important;
    will-change:transform,opacity,filter;
  }

  .teardown .notes{
    position:relative !important;
    inset:auto !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    grid-row:2;
    width:100%;
    height:620px !important;
    min-height:620px;
    margin:0 !important;
    padding:0;
    display:grid !important;
    grid-template-rows:repeat(3, 1fr);
    gap:10px;
    overflow:hidden;
    z-index:2;
    pointer-events:none;
  }

  .teardown .note,
  .teardown .note.pos1,
  .teardown .note.pos2,
  .teardown .note.pos3{
    position:relative !important;
    inset:auto !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;
    width:100% !important;
    height:100%;
    min-height:0;
    box-sizing:border-box;
    margin:0 !important;
    padding:14px 15px 15px;
    opacity:0 !important;
    transform:translateY(12px) scale(.97) !important;
    transition:opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1) !important;
    border-radius:12px;
    overflow:hidden;
  }

  .teardown .note.show{
    opacity:1 !important;
    transform:none !important;
  }

  .teardown .note::after{ display:none !important; }
  .teardown .note .code{ font-size:.58rem; line-height:1.3; }
  .teardown .note h4{ font-size:.93rem; line-height:1.24; margin-bottom:5px; }
  .teardown .note p{ font-size:.76rem; line-height:1.42; }

  .teardown .orbit-controls{
    position:relative;
    margin-top:18px;
    z-index:4;
  }
}

@media (max-width:390px){
  .teardown .stage-shell{
    grid-template-rows:300px 650px;
    height:968px;
    min-height:968px;
  }
  .teardown .stage{
    height:300px !important;
    min-height:300px !important;
  }
  .teardown .notes{
    height:650px !important;
    min-height:650px;
  }
  .teardown .veh{ width:clamp(210px,80vw,300px); }
}

.d0-form-status{margin:0 0 24px;padding:14px 18px;border:1px solid var(--line,#d9d9d9);border-radius:12px;font-weight:600}.d0-form-status.is-success{border-color:#2f8f57}.d0-form-status.is-error{border-color:var(--accent,#e52d2d)}

.d0-ajax-status{margin-top:14px;font-size:14px;line-height:1.45}.d0-ajax-status.is-success{color:#1f7a43}.d0-ajax-status.is-error{color:#d9232e}button[disabled]{opacity:.6;cursor:not-allowed}