/* MOTIONLINK — site styles
   Extracted from the reviewed single-file build, then extended.
   Tokens live in :root. */

/* ================= DESIGN TOKENS =================
   Accent is sampled directly from the MOTIONLINK logo: #006DFF.
   Surfaces carry a slight blue bias so the brand blue sits on them naturally. */
:root{
  --bg:#0A0C10;
  --bg-2:#0F1319;
  --surface:#151A22;
  --surface-2:#1C2230;
  --border:rgba(255,255,255,.085);
  --border-2:rgba(255,255,255,.20);
  --text:#F2F5F8;
  --text-2:#98A4B2;
  --text-3:#68737F;
  --accent:#006DFF;
  --accent-2:#3D8BFF;
  --accent-3:#7FB2FF;
  --accent-soft:rgba(0,109,255,.12);
  --accent-line:rgba(0,109,255,.40);
  --accent-rgb:0,109,255;            /* same hue as --accent, for alpha mixes */
  --accent-ink:#006DFF;              /* the accent when it sits on a light surface */

  /* light band (vehicle applications) */
  --light:#EDF1F6;
  --light-card:#FFFFFF;
  --light-border:#D7DEE7;
  --ink:#0D1117;
  --ink-2:#4A5765;
  --ink-3:#7C8896;

  --r-sm:6px; --r-md:10px; --r-lg:16px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;

  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  --fs-h1:clamp(2.3rem,3.9vw + .7rem,4.15rem);
  --fs-h2:clamp(1.6rem,1.5vw + 1rem,2.35rem);
  --fs-h3:1.1rem;
  --fs-body:1rem;
  --fs-sm:.875rem;
  --fs-xs:.75rem;

  --dur:220ms;
  --ease:cubic-bezier(.22,.61,.36,1);
  --header-h:70px;

  --gutter:clamp(20px,4.2vw,88px);
  --rail:clamp(196px,18vw,286px);
  --gap-rail:clamp(28px,3.6vw,64px);
  --band:clamp(56px,6.6vw,116px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font);font-size:var(--fs-body);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.02em;line-height:1.15}
/* narrow rail columns otherwise produce orphan words ("one" / "uses." on their own line) */
h1,h2{text-wrap:balance}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}

.shell{width:100%;padding-left:var(--gutter);padding-right:var(--gutter)}
.mono{font-family:var(--mono);letter-spacing:.04em}

.tag{
  font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);
}
.tag-mute{color:var(--text-3)}
.sec{padding:var(--band) 0}
.sec-alt{background:var(--bg-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}

.grid-bg{
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:56px 56px;
}
.corner{position:relative}
.corner::before,.corner::after{
  content:"";position:absolute;width:11px;height:11px;pointer-events:none;
  border-color:var(--accent-line);border-style:solid;border-width:0;
}
.corner::before{top:0;left:0;border-top-width:1px;border-left-width:1px}
.corner::after{bottom:0;right:0;border-bottom-width:1px;border-right-width:1px}

/* ================= BUTTONS ================= */
.btn{display:inline-flex;align-items:center;gap:var(--sp-2);
  padding:13px 24px;border-radius:var(--r-sm);border:1px solid transparent;
  font-size:var(--fs-sm);font-weight:600;cursor:pointer;white-space:nowrap;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-2)}
.btn-ghost{border-color:var(--border-2);color:var(--text)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent-3)}
.btn-sm{padding:10px 18px;font-size:var(--fs-xs)}

/* ================= HEADER ================= */
.site-header{position:sticky;top:0;z-index:60;height:var(--header-h);
  background:rgba(10,12,16,.88);backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
.site-header::after{content:"";position:absolute;top:0;left:0;height:2px;width:100%;
  background:linear-gradient(90deg,var(--accent) 0%,rgba(var(--accent-rgb),.22) 24%,transparent 54%)}
.header-inner{height:100%;display:flex;align-items:center;gap:var(--sp-6)}
.brand{display:flex;align-items:center}
/* real brand mark — processed from the supplied logo for dark backgrounds */
.brand img{height:30px;width:auto}
.nav{display:flex;gap:var(--sp-5);margin-left:auto}
.nav a{font-size:var(--fs-sm);color:var(--text-2);transition:color var(--dur) var(--ease)}
.nav a:hover{color:var(--text)}
.header-cta{display:flex;align-items:center;gap:var(--sp-3);margin-left:var(--sp-5)}
.lang{font-size:var(--fs-xs);color:var(--text-2);border:1px solid var(--border);
  padding:7px 10px;border-radius:var(--r-sm);background:transparent;cursor:pointer}
.lang:hover{border-color:var(--border-2);color:var(--text)}
.nav-toggle{display:none;background:none;border:1px solid var(--border);color:var(--text);
  border-radius:var(--r-sm);padding:8px 10px;cursor:pointer}

/* ================= HERO ================= */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--border);
  min-height:clamp(540px,76vh,800px);display:flex;align-items:flex-end;
  padding:var(--sp-9) 0 var(--sp-7)}
.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden;
  background:linear-gradient(180deg,#0C1017 0%,#0A0C10 100%)}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 42%;opacity:1;
  filter:brightness(1.12) contrast(1.04) saturate(1.02)}
/* Overlays compound as 1-(1-a)(1-b) — both layers stay light on purpose so the
   photograph survives. The brand blue is injected on the right for identity. */
.hero-media::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(10,12,16,.94) 0%,rgba(10,12,16,.80) 34%,rgba(10,12,16,.44) 62%,rgba(10,12,16,.16) 86%,rgba(var(--accent-rgb),.22) 100%),
    linear-gradient(180deg,rgba(10,12,16,.30) 0%,transparent 34%,transparent 52%,rgba(10,12,16,.90) 100%)}
.hero-inner{position:relative;z-index:2;width:100%}
.hero-slogan{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent-3);margin-bottom:var(--sp-4)}
.hero h1{font-size:var(--fs-h1);max-width:20ch;margin:0 0 var(--sp-5);
  text-shadow:0 2px 24px rgba(0,0,0,.72)}
.hero h1 em{font-style:normal;color:var(--accent-3)}
.hero-row{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:var(--sp-6);align-items:end;max-width:1180px}
.hero-sub{font-size:clamp(1rem,.35vw + .92rem,1.12rem);color:#CED6DF;max-width:64ch;
  text-shadow:0 1px 18px rgba(0,0,0,.9),0 1px 3px rgba(0,0,0,.7)}
.hero-actions{display:flex;gap:var(--sp-3);flex-wrap:wrap;justify-content:flex-end}
.hero-actions .btn-ghost{background:rgba(10,12,16,.45);backdrop-filter:blur(4px)}

.hero-strip{display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--gap-rail);flex-wrap:wrap;
  margin-top:clamp(30px,4.4vh,64px);padding-top:var(--sp-5);border-top:1px solid var(--border)}
.hero-audio{display:flex;align-items:center;gap:var(--sp-5)}
.spectrum{display:flex;align-items:flex-end;gap:3px;height:52px}
.spectrum i{display:block;width:3px;border-radius:1px;background:var(--accent);
  height:26%;animation:eq 1.15s ease-in-out infinite alternate;
  animation-delay:calc(var(--i) * .065s);opacity:.9}
@keyframes eq{from{height:16%}to{height:100%}}
.hero-audio .cap{font-family:var(--mono);font-size:var(--fs-xs);color:var(--text-3);
  letter-spacing:.12em;text-transform:uppercase}
.hero-stats{display:flex;gap:clamp(20px,3.4vw,64px);flex-wrap:wrap}
.hero-stats div{display:flex;flex-direction:column;gap:2px}
.hero-stats b{font-family:var(--mono);font-size:1.15rem;font-weight:700;color:var(--accent-3);letter-spacing:.02em}
.hero-stats span{font-family:var(--mono);font-size:var(--fs-xs);color:var(--text-2);
  letter-spacing:.1em;text-transform:uppercase}

/* ================= RAIL LAYOUT ================= */
.rail-sec{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);gap:var(--gap-rail)}
.rail-col{position:relative}
.rail{position:sticky;top:calc(var(--header-h) + clamp(16px,3vh,40px))}
.rail-head{display:flex;align-items:center;gap:var(--sp-3);
  padding-bottom:var(--sp-4);border-bottom:1px solid var(--border);margin-bottom:var(--sp-5)}
.idx-num{font-family:var(--mono);font-size:var(--fs-xs);font-weight:700;color:var(--text-3);letter-spacing:.14em}
.rail h2{font-size:var(--fs-h2);max-width:24ch;margin-bottom:var(--sp-4)}
.rail p{color:var(--text-2);font-size:.95rem;max-width:36ch}
.rail-note{margin-top:var(--sp-5);font-family:var(--mono);font-size:var(--fs-xs);
  color:var(--text-3);letter-spacing:.07em;line-height:1.7}
.rail-cta{margin-top:var(--sp-6)}

/* ================= SPLIT HEAD ================= */
.head-split{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:var(--gap-rail);align-items:end;margin-bottom:clamp(28px,3.2vw,56px)}
.head-split h2{font-size:clamp(1.7rem,1.4vw + 1.05rem,2.5rem);max-width:20ch;margin-top:var(--sp-4)}
.head-split .lead{color:var(--text-2);font-size:1.02rem;max-width:54ch;justify-self:end}
.head-split .lead .tag{display:block;margin-bottom:var(--sp-3)}

/* ================= 01 WHAT WE DEVELOP ================= */
.dev-block{border-top:1px solid var(--border);padding-top:var(--sp-5)}
.dev-block + .dev-block{margin-top:var(--sp-7)}
.dev-head{display:flex;align-items:baseline;gap:var(--sp-4);margin-bottom:var(--sp-2)}
.dev-head h3{font-size:1.25rem}
.dev-head .dev-idx{font-family:var(--mono);font-size:var(--fs-xs);color:var(--accent);font-weight:700;letter-spacing:.12em}
.dev-block > p{color:var(--text-2);font-size:var(--fs-sm);max-width:64ch;margin-bottom:var(--sp-5)}
.spec{display:grid;grid-template-columns:200px minmax(0,1fr);gap:var(--sp-4) var(--sp-5)}
.spec dt{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent-3);padding-top:3px}
.spec dd{margin:0;font-size:var(--fs-sm);color:var(--text-2);padding-bottom:var(--sp-4);
  border-bottom:1px solid var(--border)}
.spec dd b{color:var(--text);font-weight:500}

/* ================= 02 APPLICATIONS — light band ================= */
/* The supplied application references are product-style renders on white, so they are
   presented on a light band rather than being darkened into a dark tile. */
.band-light{background:var(--light);color:var(--ink);padding:var(--band) 0}
.band-light .tag{color:var(--accent-ink)}
.band-light h2,.band-light h3{color:var(--ink)}
.band-light .lead{color:var(--ink-2)}
.band-light .head-split h2{color:var(--ink)}
.app-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--sp-4)}
.app-card{background:var(--light-card);border:1px solid var(--light-border);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.app-card:hover{border-color:var(--accent-ink);transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(13,17,23,.10)}
/* 3:2 rather than 4:3 — the supplied vehicle renders are wide, and a taller box
   crops the front and rear of the vehicle off. Background stays white so the
   white-background renders sit on the card without a visible edge. */
.app-visual{position:relative;aspect-ratio:3/2;overflow:hidden;background:#fff;
  border-bottom:1px solid var(--light-border)}
.app-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .55s var(--ease)}
.app-card:hover .app-visual img{transform:scale(1.04)}
.app-badge{position:absolute;top:10px;left:12px;z-index:2;font-family:var(--mono);
  font-size:var(--fs-xs);font-weight:700;color:#fff;background:var(--accent-ink);
  padding:3px 7px;border-radius:4px;letter-spacing:.08em}
.app-body{padding:var(--sp-5) var(--sp-5) var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-3);flex:1}
.app-body h3{font-size:1.02rem}
.app-body p{color:var(--ink-2);font-size:var(--fs-sm);flex:1}
.app-link{display:inline-flex;align-items:center;gap:6px;margin-top:var(--sp-3);
  font-family:var(--mono);font-size:var(--fs-xs);font-weight:700;color:var(--accent-ink);letter-spacing:.06em}
.app-link::after{content:"→";transition:transform var(--dur) var(--ease)}
.app-card:hover .app-link::after{transform:translateX(4px)}

/* ================= 03 PRODUCT LINES — rail + full-width rows ================= */
.lines{border-top:1px solid var(--border)}
.line{display:grid;grid-template-columns:52px 122px minmax(0,1fr) clamp(170px,21vw,300px) 26px;
  gap:var(--sp-5);align-items:center;padding:var(--sp-5) 0;
  border-bottom:1px solid var(--border);
  transition:background var(--dur) var(--ease),padding-left var(--dur) var(--ease)}
.line:hover{background:var(--surface);padding-left:var(--sp-4)}
.line-idx{font-family:var(--mono);font-size:var(--fs-xs);color:var(--text-3);font-weight:700;letter-spacing:.1em}
/* Product shot: the platform render supplied for that line, auto-trimmed of its
   white margin. Cropped to fill the same way the application cards are, so the
   two sections read as one set. */
.line-thumb{display:block;width:132px;aspect-ratio:2/1;border-radius:var(--r-sm);
  overflow:hidden;background:#fff;border:1px solid var(--border)}
.line-thumb img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.line:hover .line-thumb{border-color:var(--accent-line)}
.line-name{font-size:1.12rem;font-weight:600;color:var(--text)}
.line-desc{font-size:var(--fs-sm);color:var(--text-2);margin-top:var(--sp-2);max-width:62ch}
.line-use{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-3);text-align:right}
.line-arrow{color:var(--accent);font-size:1.1rem;text-align:right;
  transition:transform var(--dur) var(--ease)}
.line:hover .line-arrow{transform:translateX(4px)}

/* ================= 04 FEATURED SYSTEMS =================
   Two columns: only programmes with real MOTIONLINK product photography are shown here.
   A third programme (golf cart soundbar) exists but the supplied photo carries a third-party
   watermark, so it is deliberately not published. */
.feat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-5)}
.feat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;
  transition:border-color var(--dur) var(--ease)}
.feat-card:hover{border-color:var(--accent-line)}
.feat-visual{height:clamp(240px,23vw,384px);position:relative;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(120% 100% at 50% 0%,#1E2530 0%,#12161D 100%);
  border-bottom:1px solid var(--border);padding:var(--sp-6)}
.feat-visual img{max-width:100%;max-height:100%;object-fit:contain;
  transition:transform .55s var(--ease)}
.feat-card:hover .feat-visual img{transform:scale(1.03)}
.feat-visual.photo{padding:0}
.feat-visual.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feat-body{padding:var(--sp-5) var(--sp-6) var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-3);flex:1}
.feat-body{padding:var(--sp-5) var(--sp-6) var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-3);flex:1}
.feat-kicker{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.chip{font-family:var(--mono);font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:4px 9px;border-radius:4px;
  background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent-3)}
.feat-body h3{font-size:1.08rem;line-height:1.3}
.feat-body p{font-size:var(--fs-sm);color:var(--text-2);flex:1}
.spec-line{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-2)}
.spec-line span{font-family:var(--mono);font-size:var(--fs-xs);color:var(--text-3);
  border:1px solid var(--border);border-radius:4px;padding:4px 8px}

/* ================= 05 STANDARDS =================
   The connectivity platform sheet is supplied on a black background, so it is
   presented as its own dark panel instead of a white chip. */
.std-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-4)}
.std-card{background:#FFFFFF;border-radius:var(--r-md);padding:var(--sp-5);
  display:grid;place-items:center;min-height:104px}
.std-card img{max-height:74px;max-width:200px;object-fit:contain}
.std-card.panel{grid-column:1/-1;background:#000;padding:var(--sp-6);border:1px solid var(--border)}
.std-card.panel img{width:680px;max-width:100%;max-height:none;height:auto}
.std-note{margin-top:var(--sp-5);font-family:var(--mono);font-size:var(--fs-xs);
  color:var(--text-3);letter-spacing:.06em;line-height:1.8}

/* ================= 06 CAPABILITIES ================= */
.cap-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-5)}
.cap-item{border-top:2px solid var(--accent);padding-top:var(--sp-5)}
.cap-item .tag{display:block;margin-bottom:var(--sp-3)}
.cap-item h3{font-size:1rem;margin-bottom:var(--sp-3)}
.cap-item p{font-size:var(--fs-sm);color:var(--text-2);max-width:38ch}
.team-strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--sp-4);
  margin-top:var(--sp-8);padding-top:var(--sp-6);border-top:1px solid var(--border)}
.team-cell{display:flex;flex-direction:column;gap:2px}
.team-cell b{font-family:var(--mono);font-size:1.5rem;font-weight:700;color:var(--accent-3)}
.team-cell span{font-family:var(--mono);font-size:var(--fs-xs);color:var(--text-2);
  letter-spacing:.09em;text-transform:uppercase}
.team-cell.total b{color:var(--text)}

/* ================= 07 COMPANY STRUCTURE ================= */
.struct{display:grid;gap:var(--sp-4)}
.struct-row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:var(--sp-5);align-items:center;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--sp-5) var(--sp-6)}
.struct-node h3{font-size:1.05rem;margin-bottom:var(--sp-2)}
.struct-node p{font-size:var(--fs-sm);color:var(--text-2)}
.struct-node .loc{font-family:var(--mono);font-size:var(--fs-xs);color:var(--accent-3);
  letter-spacing:.08em;margin-top:var(--sp-2);display:block}
.struct-link{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);min-width:190px}
.struct-link span{font-family:var(--mono);font-size:var(--fs-xs);color:var(--text-3);
  letter-spacing:.1em;text-transform:uppercase;text-align:center}
.struct-link i{display:block;width:100%;height:1px;background:var(--accent-line);position:relative}
.struct-link i::after{content:"";position:absolute;right:0;top:-3px;border-left:7px solid var(--accent);
  border-top:3.5px solid transparent;border-bottom:3.5px solid transparent}
.map-card{margin-top:var(--sp-5);border:1px solid var(--border);border-radius:var(--r-lg);
  overflow:hidden;background:#fff}
.map-card img{width:100%;height:auto;display:block}

/* ================= 08 INQUIRY ================= */
.inquiry{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(32px,5vw,96px);align-items:start}
.inquiry h2{font-size:clamp(1.6rem,1.4vw + 1rem,2.4rem);max-width:24ch;margin:var(--sp-4) 0 var(--sp-4)}
.inquiry .copy{color:var(--text-2);max-width:48ch}
.inq-list{margin-top:var(--sp-6);display:grid;gap:var(--sp-3);font-size:var(--fs-sm);color:var(--text-2)}
.form-wrap{width:100%;max-width:780px;justify-self:end}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
.field{display:flex;flex-direction:column;gap:var(--sp-2)}
.field.full{grid-column:1/-1}
.field-action{grid-column:1/-1;display:flex;justify-content:flex-start;margin-top:var(--sp-2)}
.field label{font-family:var(--mono);font-size:var(--fs-xs);color:var(--text-2);letter-spacing:.06em}
.field input,.field select,.field textarea{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:12px 14px;color:var(--text);font-family:inherit;font-size:var(--fs-sm);
  transition:border-color var(--dur) var(--ease)}
.field textarea{resize:vertical;min-height:104px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);outline:none}

/* ================= FOOTER ================= */
.site-footer{border-top:1px solid var(--border);background:var(--bg-2);padding:var(--band) 0 var(--sp-6)}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(24px,3.4vw,64px)}
.footer-brand img{height:22px;width:auto;margin-bottom:var(--sp-4)}
.footer-grid h4{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-3);margin-bottom:var(--sp-4)}
.footer-grid li{margin-bottom:var(--sp-3)}
.footer-grid li a{font-size:var(--fs-sm);color:var(--text-2);transition:color var(--dur) var(--ease)}
.footer-grid li a:hover{color:var(--accent-3)}
.footer-about{font-size:var(--fs-sm);color:var(--text-2);max-width:36ch}
.footer-sl{font-family:var(--mono);font-size:var(--fs-xs);color:var(--text-3);
  letter-spacing:.1em;margin-top:var(--sp-4)}
.footer-bottom{margin-top:var(--sp-8);padding-top:var(--sp-5);border-top:1px solid var(--border);
  display:flex;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;
  font-family:var(--mono);font-size:var(--fs-xs);color:var(--text-3)}

/* ================= MOTION ================= */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}
.rail-in{opacity:0;transition:opacity .7s var(--ease)}
.rail-in.in{opacity:1}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal,.rail-in{opacity:1;transform:none}
  .spectrum i{height:52%!important}
}

/* ================= RESPONSIVE ================= */
@media (max-width:1240px){
  .app-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .team-strip{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:var(--sp-5)}
}
@media (max-width:1180px){
  .rail-sec{grid-template-columns:1fr;gap:var(--sp-6)}
  .rail{position:static}
  .rail h2,.rail p{max-width:60ch}
  .head-split{grid-template-columns:1fr;gap:var(--sp-5);align-items:start}
  .head-split .lead{justify-self:start}
  .feat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cap-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .inquiry{grid-template-columns:1fr;gap:var(--sp-7)}
  .form-wrap{justify-self:start;max-width:none}
  .hero-row{grid-template-columns:1fr;gap:var(--sp-5);align-items:start}
  .hero-actions{justify-content:flex-start}
  .line{grid-template-columns:44px 98px minmax(0,1fr) 22px}
  .line-thumb{width:98px}
  .line-use{display:none}
  .struct-row{grid-template-columns:1fr;gap:var(--sp-4)}
  .struct-link{align-items:flex-start;min-width:0}
  .struct-link i{width:120px}
  .struct-link i::after{top:auto;right:auto;left:120px;bottom:-3px;
    border-left:7px solid var(--accent);border-top:3.5px solid transparent;border-bottom:3.5px solid transparent}
}
@media (max-width:900px){
  .nav{display:none}
  .nav-toggle{display:block;margin-left:auto}
  .app-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--sp-6)}
  .hero{min-height:clamp(480px,70vh,650px)}
  .hero h1{max-width:16ch}
  .spec{grid-template-columns:1fr;gap:var(--sp-2)}
  .spec dd{padding-bottom:var(--sp-4);margin-bottom:var(--sp-3)}
  .std-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  :root{--gutter:18px}
  .sec,.band-light{padding:var(--sp-8) 0}
  .app-grid,.feat-grid,.cap-grid,.form-grid,.footer-grid{grid-template-columns:1fr}
  .std-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}
  .std-card{padding:var(--sp-4);min-height:86px}
  .std-card img{max-height:50px;max-width:100%}
  .std-card.panel{grid-column:1/-1;padding:var(--sp-4)}
  .team-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .line{grid-template-columns:30px 78px minmax(0,1fr) 18px;gap:var(--sp-3)}
  .line-thumb{width:78px}
  .line-name{font-size:1.02rem}
  .brand img{height:19px}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{justify-content:center}
  .hero-strip{flex-direction:column;align-items:flex-start}
  .hero-audio{flex-direction:column;align-items:flex-start;gap:var(--sp-3)}
  .hero-stats{width:100%;justify-content:space-between}
  .header-cta .btn{display:none}
  .spectrum{height:40px}
}

/* ==========================================================================
   MOBILE NAVIGATION
   The static prototype shipped a ☰ button with no open state, so navigation
   was unreachable below 900px. Fixed here: .nav.is-open is toggled by site.js.
   ========================================================================== */
@media (max-width:900px){
  .nav.is-open{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;
    margin-left:0;padding:var(--sp-5) var(--gutter);gap:var(--sp-4);z-index:70;
    background:var(--bg-2);border-bottom:1px solid var(--border)}
  .nav.is-open a{font-size:1rem;color:var(--text)}
  .nav-toggle[aria-expanded="true"]{border-color:var(--accent-line);color:var(--text)}
}

/* ==========================================================================
   SKIP LINK / ACCESSIBILITY
   ========================================================================== */
.ml-skip{position:absolute;left:-9999px;top:0;z-index:200;padding:12px 18px;
  background:var(--accent);color:#fff;border-radius:0 0 var(--r-sm) 0}
.ml-skip:focus{left:0}

/* ==========================================================================
   WORDPRESS MENU OUTPUT
   A menu assigned to the `primary` location comes out of wp_nav_menu() as
   <ul><li><a>. The bespoke fallback emits bare <a> elements. Both are
   normalised here so the header looks identical either way.
   ========================================================================== */
.nav ul{display:flex;gap:var(--sp-5);list-style:none;margin:0;padding:0}
.nav li{position:relative;margin:0}

/* Products dropdown — populated from the product_cat taxonomy */
.nav-item{position:relative;display:flex;align-items:center}
.nav-item.has-sub > a::after{content:"\2304";font-size:.7em;margin-left:5px;opacity:.6}
.nav-sub{position:absolute;top:calc(100% + 14px);left:-16px;min-width:236px;
  display:flex;flex-direction:column;gap:2px;padding:var(--sp-3);
  background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r-md);
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur)}
.nav-item.has-sub:hover .nav-sub,
.nav-item.has-sub:focus-within .nav-sub{opacity:1;visibility:visible;transform:translateY(0)}
.nav-sub a{display:block;padding:9px 12px;border-radius:var(--r-sm);
  font-size:var(--fs-sm);color:var(--text-2);white-space:nowrap}
.nav-sub a:hover,.nav-sub a:focus{background:var(--accent-soft);color:var(--text)}
.nav ul .sub-menu{position:absolute;top:calc(100% + 14px);left:-16px;min-width:236px;
  display:flex;flex-direction:column;gap:2px;padding:var(--sp-3);margin:0;
  background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r-md);
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur)}
.nav li:hover > .sub-menu,.nav li:focus-within > .sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav .sub-menu a{display:block;padding:9px 12px;border-radius:var(--r-sm);white-space:nowrap}
.nav .sub-menu a:hover{background:var(--accent-soft);color:var(--text)}

/* Inside the mobile drawer the dropdown is always expanded, no hover state */
@media (max-width:900px){
  .nav.is-open ul{display:flex;flex-direction:column;gap:var(--sp-4)}
  .nav.is-open .nav-sub,
  .nav.is-open .sub-menu{position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:0;background:transparent;padding:var(--sp-2) 0 0 var(--sp-4);min-width:0}
}