/* ============================================================
   sinsil.io / PRIMA — single-file build
   Palette and glass treatment follow the approved concept.
   ============================================================ */
:root{
  --navy-900:#04101a; --navy-800:#061523; --navy-700:#0d2238; --navy-600:#15314d;
  --ice:#84badf; --ice-2:#5c9bc9; --gold:#d6ae5f; --gold-lt:#e6c883; --gold-dk:#b88d40;

  --bg:var(--navy-900); --bg-2:var(--navy-800);
  --ink:#e9f1f8; --muted:#93a8bc; --faint:#6c8199;
  --panel:rgba(255,255,255,.045);
  --panel-2:rgba(6,21,35,.72);
  --edge:rgba(255,255,255,.10);
  --edge-2:rgba(132,186,223,.28);
  --accent:var(--ice); --accent-ink:var(--navy-900);
  --glow-ice:0 0 28px rgba(132,186,223,.25);
  --glow-gold:0 0 24px rgba(214,174,95,.32);
  --shadow:0 18px 48px rgba(0,0,0,.42);
  --radius:18px; --maxw:1200px;
  --g-routes:url("img/sec-routes.webp");
  --g-systems:url("img/sec-systems.webp");
  --g-scale:url("img/sec-scale.webp");
  --g-wall:url("img/sec-wall.webp");
  --g-touch:url("img/sec-touch.webp");
  --g-floor:url("img/sec-floor.webp");
}
html[data-theme="light"]{
  --bg:#fbf8f1; --bg-2:#f4eee3;
  --ink:#16283a; --muted:#55646f; --faint:#7b8894;
  --panel:rgba(255,255,255,.72);
  --panel-2:rgba(255,253,248,.9);
  --edge:rgba(23,42,57,.12);
  --edge-2:rgba(173,126,40,.30);
  --ice:#2f6d99; --ice-2:#2f6d99;
  --gold:#ad7e28; --gold-lt:#c08f2f; --gold-dk:#8c6318;
  --accent:var(--gold); --accent-ink:#fffaf0;
  --glow-ice:0 0 24px rgba(47,109,153,.14);
  --glow-gold:0 0 20px rgba(173,126,40,.20);
  --shadow:0 16px 40px rgba(23,42,57,.12);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:400; line-height:1.65; overflow-x:hidden;
  background-image:radial-gradient(circle at 50% -10%, var(--bg-2) 0%, var(--bg) 72%);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.display{font-family:"Space Grotesk",Inter,sans-serif;font-weight:600;letter-spacing:-.02em;line-height:1.12;margin:0}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
::selection{background:rgba(132,186,223,.3)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:var(--navy-900);padding:10px 16px;border-radius:0 0 8px 0;z-index:200;font-weight:600}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* ---------- ambient glows ---------- */
.aura{position:fixed;border-radius:50%;pointer-events:none;z-index:0;filter:blur(120px)}
.aura--a{top:-380px;left:50%;transform:translateX(-50%);width:900px;height:900px;background:rgba(132,186,223,.10)}
.aura--b{top:38%;right:-260px;width:560px;height:560px;background:rgba(214,174,95,.07)}
html[data-theme="light"] .aura{opacity:.5}

/* ---------- header ---------- */
header{position:fixed;inset:0 0 auto;z-index:100;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:rgba(4,16,26,.78);background:color-mix(in srgb,var(--bg) 72%,transparent);border-bottom:1px solid var(--edge)}
.nav{height:76px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:12px;font-family:"Space Grotesk",sans-serif}
.brand b{font-weight:700;font-size:1.3rem;color:var(--ice);letter-spacing:-.01em}
.brand .bar{width:1px;height:20px;background:var(--edge)}
.brand span{font-size:1.08rem;letter-spacing:.06em;color:var(--ink);opacity:.92}
.navlinks{display:flex;align-items:center;gap:24px}
.navlinks a{font-size:.9rem;color:var(--muted);transition:color .25s}
.navlinks a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:9px;border:0;cursor:pointer;font:inherit;
  font-weight:600;font-size:.9rem;padding:11px 22px;border-radius:999px;transition:all .28s ease}
.btn--gold{background:linear-gradient(135deg,var(--gold-lt),var(--gold-dk));color:var(--navy-900);
  box-shadow:0 0 20px rgba(214,174,95,.35)}
.btn--gold:hover{transform:translateY(-1px);box-shadow:0 0 30px rgba(214,174,95,.55)}
.btn--ghost{background:rgba(214,174,95,.10);border:1px solid rgba(214,174,95,.42);color:var(--gold);box-shadow:var(--glow-gold)}
.btn--ghost:hover{background:rgba(214,174,95,.20);border-color:var(--gold)}
.btn--wire{background:transparent;border:1px solid var(--edge-2);color:var(--accent)}
.btn--wire:hover{background:rgba(132,186,223,.10)}
.btn--lg{padding:15px 30px;font-size:.98rem}
.themetog{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--edge);background:transparent;color:var(--muted);cursor:pointer;transition:.25s}
.themetog:hover{color:var(--ink);border-color:var(--edge-2)}
.themetog svg{width:17px;height:17px}
html[data-theme="dark"] .ico-sun{display:block} html[data-theme="dark"] .ico-moon{display:none}
html[data-theme="light"] .ico-sun{display:none} html[data-theme="light"] .ico-moon{display:block}

/* ---------- shared ---------- */
main{position:relative;z-index:1;padding-top:76px}
section{padding:88px 0}
.eyebrow{display:inline-flex;align-items:center;gap:9px;padding:6px 14px;border-radius:999px;
  border:1px solid var(--edge-2);background:rgba(132,186,223,.09);color:var(--accent);
  font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.dot{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}
.glass{background:linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.012));
  border:1px solid var(--edge);border-radius:var(--radius);box-shadow:var(--shadow);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
html[data-theme="light"] .glass{background:var(--panel)}
html[data-theme="light"] header{background:rgba(251,248,241,.82)}
html[data-theme="light"] footer{background:#f4eee3}
.sec-head{max-width:640px;margin-bottom:44px}
.sec-head h2{font-size:clamp(1.7rem,3.4vw,2.5rem);margin-bottom:14px}
.sec-head p{color:var(--muted);font-size:1.02rem}
.note{color:var(--faint);font-size:.82rem;line-height:1.7;margin-top:26px}

/* ---------- hero ---------- */
.hero{padding:76px 0 84px}
.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:48px;align-items:center}
.hero h1{font-size:clamp(2.1rem,3.6vw,3.3rem);margin:20px 0 0;max-width:16ch}
.hero h1 .grad{background:linear-gradient(100deg,#fff 8%,var(--ice) 92%);-webkit-background-clip:text;
  background-clip:text;color:transparent;display:inline-block}
html[data-theme="light"] .hero h1 .grad{background:linear-gradient(100deg,var(--gold-dk),var(--ice));-webkit-background-clip:text;background-clip:text}
.hero .lede{color:var(--muted);font-size:1.02rem;font-weight:300;max-width:52ch;margin-top:22px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero .fine{color:var(--faint);font-size:.82rem;line-height:1.7;margin-top:26px;max-width:44em}
.hero-art{position:relative;display:grid;place-items:center;min-height:440px}
.hero-art::before{content:"";position:absolute;width:80%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(132,186,223,.22),transparent 68%);filter:blur(50px)}
.hero-art img{position:relative;width:min(100%,380px);height:auto;filter:drop-shadow(0 0 46px rgba(132,186,223,.28))}
.floaty{animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(-8px)}50%{transform:translateY(8px)}}

/* ---------- pipeline ---------- */
.pipe{padding:30px}
.pipe-row{display:flex;align-items:stretch;gap:0}
.step{flex:1 1 0;min-width:0;background:var(--panel-2);border:1px solid var(--edge);
  border-radius:16px;padding:24px;transition:border-color .3s,transform .3s}
.step:hover{border-color:var(--edge-2);transform:translateY(-3px)}
.step--gold:hover{border-color:rgba(214,174,95,.45)}
.step-top{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.chip{flex:0 0 auto;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:rgba(132,186,223,.14);border:1px solid var(--edge-2);color:var(--ice);
  box-shadow:var(--glow-ice),inset 0 1px 0 rgba(255,255,255,.10)}
.chip svg{width:21px;height:21px}
.wire{flex:1 1 auto;height:1px;min-width:12px;
  background:linear-gradient(90deg,var(--ice),var(--ice));
  box-shadow:0 0 8px rgba(132,186,223,.75);opacity:.85}
.glyph{flex:0 0 auto;color:var(--ice);filter:drop-shadow(0 0 7px rgba(132,186,223,.65))}
.glyph svg{width:26px;height:26px}
.step--gold .chip{background:rgba(214,174,95,.14);border-color:rgba(214,174,95,.38);
  color:var(--gold);box-shadow:var(--glow-gold),inset 0 1px 0 rgba(255,255,255,.10)}
.step--gold .wire{background:linear-gradient(90deg,var(--gold),var(--gold));box-shadow:0 0 8px rgba(214,174,95,.7)}
.step--gold .glyph{color:var(--gold);filter:drop-shadow(0 0 7px rgba(214,174,95,.6))}
.step h3{font-size:1.32rem;margin-bottom:9px}
.step p{color:var(--muted);font-size:.88rem}
/* elbow connectors between cards */
.conn{flex:0 0 74px;position:relative;color:var(--ice)}
.conn svg{position:absolute;top:0;left:0;width:74px;height:136px;overflow:visible;
  filter:drop-shadow(0 0 6px rgba(132,186,223,.55))}
.conn path{stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ---------- capabilities ---------- */
.caps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.cap{padding:28px 24px;text-align:center;transition:transform .3s}
.cap:hover{transform:translateY(-5px)}
.cap-ico{width:112px;height:112px;margin:0 auto 20px;position:relative;display:grid;place-items:center}
.cap-ico::before{content:"";position:absolute;inset:6px;border-radius:50%;background:radial-gradient(circle,rgba(132,186,223,.30),transparent 70%);filter:blur(16px)}
.cap--gold .cap-ico::before{background:radial-gradient(circle,rgba(214,174,95,.32),transparent 70%)}
.cap-ico img{position:relative;width:100%;height:auto;filter:drop-shadow(0 6px 16px rgba(0,0,0,.45))}
html[data-theme="light"] .cap-ico::before{opacity:.55}
html[data-theme="light"] .cap-ico img{filter:drop-shadow(0 6px 14px rgba(23,42,57,.22))}
.cap h3{font-size:1.02rem;margin-bottom:10px}
.cap p{color:var(--muted);font-size:.83rem;line-height:1.72}

/* ---------- trust band ---------- */
.trust{max-width:900px;margin:0 auto;position:relative;overflow:hidden;text-align:center;
  padding:52px 40px;border-radius:22px;border:1px solid rgba(214,174,95,.22);
  background:var(--panel-2);background:linear-gradient(180deg,var(--panel-2),color-mix(in srgb,var(--bg) 92%,transparent))}
.hair{position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.55}
.hair--t{top:0}.hair--b{bottom:0}
.trust h2{font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:14px}
.trust > p{color:var(--muted);font-size:.95rem;max-width:44em;margin:0 auto 38px}
.pillars{display:flex;justify-content:center;flex-wrap:wrap;gap:56px}
.pillar{display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--gold)}
.pillar svg{width:30px;height:30px}
.pillar b{font-family:"Space Grotesk",sans-serif;font-size:.88rem;font-weight:500;color:var(--ink);letter-spacing:.02em}

/* ---------- workflow strip ---------- */
.flow{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 24px;flex-wrap:wrap}
.flow-steps{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:.88rem;color:var(--muted)}
.flow-steps b{font-weight:500;color:var(--ink);white-space:nowrap}
.arrow{width:54px;height:1px;background:linear-gradient(90deg,rgba(132,186,223,.2),var(--ice));position:relative}
.arrow::after{content:"";position:absolute;right:0;top:50%;width:6px;height:6px;
  border-top:1px solid var(--ice);border-right:1px solid var(--ice);transform:translateY(-50%) rotate(45deg)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--edge);background:#030c14;background:color-mix(in srgb,var(--bg) 88%,#000);padding:38px 0 46px;position:relative;z-index:1}
.foot{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap;align-items:flex-start}
.foot-legal{color:var(--faint);font-size:.73rem;line-height:1.8;max-width:62ch;text-align:right}


/* ---------- ported sections ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start}
.lead{font-family:"Space Grotesk",sans-serif;font-size:1.2rem;line-height:1.45;margin-bottom:14px;color:var(--ink)}
.lead em{font-style:normal;color:var(--accent)}
.bound{padding:26px}
.bound-head{margin-bottom:14px;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);font-weight:600}
.bound-in{display:flex;flex-wrap:wrap;gap:10px;padding:18px;border-radius:14px;border:1px dashed var(--edge-2);background:rgba(132,186,223,.06)}
.tag{padding:7px 14px;border-radius:999px;font-size:.8rem;color:var(--ice);background:rgba(132,186,223,.12);border:1px solid var(--edge-2)}
.bound-split{display:flex;align-items:center;gap:14px;margin:16px 0;color:var(--faint);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase}
.bound-split::before,.bound-split::after{content:"";flex:1;height:1px;background:var(--edge)}
.bound-out{display:flex;align-items:center;gap:14px;padding:18px;border-radius:14px;border:1px solid rgba(214,174,95,.28);background:rgba(214,174,95,.06)}
.coin{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;border:1px solid rgba(214,174,95,.4);color:var(--gold);font-family:"Space Grotesk",sans-serif;font-size:1.05rem;box-shadow:var(--glow-gold)}
.bound-out b{display:block;font-weight:600;font-size:.95rem}
.bound-out i{display:block;font-style:normal;color:var(--muted);font-size:.82rem}
.numgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.numcard{padding:24px}
.numcard .n{font-family:"Space Grotesk",sans-serif;font-size:1.4rem;color:var(--gold);opacity:.85;flex:0 0 auto;line-height:1}
.numcard h3{font-size:1.02rem;line-height:1.35;margin-bottom:8px}
.numcard p{color:var(--muted);font-size:.86rem}
.checks,.stackbox{padding:26px}
.checks h4,.stackbox h4{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);font-weight:600;margin-bottom:18px}
.crow{display:flex;justify-content:space-between;gap:18px;padding:13px 0;border-bottom:1px solid var(--edge)}
.crow:last-child{border-bottom:0}
.crow b{font-weight:500;font-size:.92rem;white-space:nowrap}
.crow span{color:var(--muted);font-size:.84rem;text-align:right}
.bar{margin-bottom:14px}
.bar-l{font-size:.8rem;color:var(--muted);margin-bottom:6px}
.bar-t{height:9px;border-radius:999px;background:rgba(132,186,223,.10);overflow:hidden}
.bar-f{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--ice-2),var(--ice))}
.bar--gold .bar-f{background:linear-gradient(90deg,var(--gold-dk),var(--gold))}
.nogrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
.nocard{padding:22px;border-radius:14px;border:1px solid var(--edge);background:var(--panel-2)}
.nocard b{display:flex;align-items:flex-start;gap:10px;font-family:"Space Grotesk",sans-serif;font-size:.97rem;font-weight:600;line-height:1.42;margin-bottom:8px}  /* flex-start, not center: a two-line heading was dragging the number badge
     down off the first line. Now the badge stays on line one either way. */
.nocard .x{width:22px;height:22px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(214,174,95,.4);color:var(--gold);font-size:.7rem}
.nocard p{color:var(--muted);font-size:.84rem}
.final{text-align:center;padding:54px 40px;position:relative;overflow:hidden}
.final h2{font-size:clamp(1.7rem,3.4vw,2.4rem);margin-bottom:14px}
.final .sub{color:var(--muted);max-width:54ch;margin:0 auto 24px;font-size:.98rem}
.finlist{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:28px}
@media (max-width:980px){
  .split,.numgrid,.nogrid{grid-template-columns:1fr}
  .crow{flex-direction:column;gap:4px}
  .crow span{text-align:left}
}


/* ---------- platform band ---------- */
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.shot{overflow:hidden;transition:transform .3s,border-color .3s}
.shot:hover{transform:translateY(-4px);border-color:var(--edge-2)}
.shot figure{margin:0;position:relative}
.shot .gfx{width:100%;aspect-ratio:16/10}
.shot figure::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(4,16,26,.55) 100%)}
html[data-theme="light"] .shot figure::after{background:linear-gradient(180deg,transparent 60%,rgba(23,42,57,.14) 100%)}
.shot-body{padding:24px}
.shot h3{font-size:1.24rem;margin-bottom:6px}
.shot .sub{color:var(--accent);font-size:.79rem;font-weight:600;letter-spacing:.10em;
  text-transform:uppercase;margin-bottom:12px}
.shot p{color:var(--muted);font-size:.88rem}
@media (max-width:980px){.shots{grid-template-columns:1fr}}


.gfx{background-size:cover;background-position:center;background-repeat:no-repeat;display:block}
.gfx--routes{background-image:var(--g-routes)}
.gfx--systems{background-image:var(--g-systems)}
.gfx--scale{background-image:var(--g-scale)}
.gfx--wall{background-image:var(--g-wall)}
.gfx--touch{background-image:var(--g-touch)}
.gfx--floor{background-image:var(--g-floor)}

/* ---------- bento mosaic ---------- */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.bt{border-radius:18px;overflow:hidden;border:1px solid var(--edge);display:flex;flex-direction:column;
  min-height:300px;transition:transform .3s,border-color .3s}
.bt:hover{transform:translateY(-4px);border-color:var(--edge-2)}
.bt--text{padding:32px;background:var(--panel-2);justify-content:center}
.bt--alt{background:linear-gradient(150deg,rgba(132,186,223,.10),rgba(255,255,255,.02))}
.bt--media{padding:0}
.bt--media .gfx{flex:1;min-height:300px}
.bt--split{padding:24px;background:var(--panel-2)}
.bt--split .gfx{width:100%;aspect-ratio:16/9;border-radius:12px;border:1px solid var(--edge);margin-bottom:20px}
.bt .ic{color:var(--accent);margin-bottom:14px;display:block}
.bt .ic svg{width:22px;height:22px}
.bt h3{font-size:1.22rem;margin-bottom:10px;max-width:22ch;line-height:1.15;min-height:2.3em}  /* 2 lines: keeps copy aligned when one heading wraps and its neighbour does not */
.bt p{color:var(--muted);font-size:.88rem}

/* ---------- moving banner ---------- */
.mq{position:relative;overflow:hidden;padding:34px 0;--mq-gap:22px}
.mq::before,.mq::after{content:"";position:absolute;top:0;bottom:0;width:130px;z-index:2;pointer-events:none}
.mq::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.mq::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)}
.mq-track{display:flex;align-items:center;gap:var(--mq-gap);width:max-content;
  animation:mq-slide 140s linear infinite}
.mq:hover .mq-track{animation-play-state:paused}
@keyframes mq-slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-50% - (var(--mq-gap) / 2)),0,0)}}
.mq-item{flex:0 0 auto;border-radius:14px;border:1px solid var(--edge);box-shadow:var(--shadow);
  background-size:cover;background-position:center;transition:transform .35s}
.mq-item:hover{transform:scale(1.05) rotate(0deg)!important;z-index:3;position:relative}
.mq-item.s1{width:210px;height:280px;margin-top:-16px;transform:rotate(-1.4deg)}
.mq-item.s2{width:150px;height:150px;margin-top:58px;transform:rotate(2deg)}
.mq-item.s3{width:290px;height:190px;margin-top:8px;transform:rotate(1.1deg)}
.mq-item.s4{width:170px;height:230px;margin-top:-26px;transform:rotate(-2.2deg)}
.mq-item.s5{width:330px;height:215px;margin-top:34px;transform:rotate(.8deg)}
.mq-item.s6{width:140px;height:195px;margin-top:-6px;transform:rotate(-1deg)}
@media (max-width:640px){
  .mq-item.s1{width:132px;height:176px}.mq-item.s2{width:96px;height:96px;margin-top:36px}
  .mq-item.s3{width:180px;height:118px}.mq-item.s4{width:106px;height:144px}
  .mq-item.s5{width:200px;height:130px;margin-top:22px}.mq-item.s6{width:88px;height:122px}
  .mq::before,.mq::after{width:56px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}

/* ============================================================
   2026-08-19 mobile patch — iPhone-class viewports.
   Root cause: .navlinks never wrapped, forcing ~900px page width
   (iOS zooms out to fit); plus .hero-grid/.pipe-row/.caps/.bento
   had no mobile rules. Append-only.
   ============================================================ */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:36px}
  .hero-art{min-height:320px}
  .caps{grid-template-columns:1fr 1fr}
  .bento{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  /* Nav becomes brand row + swipeable link row instead of widening the page */
  .nav{height:auto;flex-wrap:wrap;padding:12px 0;row-gap:4px}
  .navlinks{width:100%;order:3;overflow-x:auto;-webkit-overflow-scrolling:touch;
    gap:18px;padding:2px 2px 8px;scrollbar-width:none;white-space:nowrap}
  .navlinks::-webkit-scrollbar{display:none}
  .hero{padding:44px 0 56px}
  .hero-art{min-height:280px}
  .caps,.bento{grid-template-columns:1fr}
  /* Pipeline: stack the three steps; connectors become vertical wires */
  .pipe-row{flex-direction:column;align-items:stretch;gap:0}
  .conn{flex:0 0 auto;align-self:center;width:1px;height:40px;margin:6px 0;
    background:linear-gradient(180deg,rgba(132,186,223,.2),var(--ice))}
  .conn svg{display:none}
  .step{padding:16px 4px}
}

/* ===== generated 2026-08-19: former inline style attributes =====
   Moved out of the markup so the CSP can drop style-src 'unsafe-inline'. */
.u-1{padding:14px 0 26px}
.u-2{margin-top:18px}
.u-3{border-color:var(--edge);background:rgba(255,255,255,.03)}
.u-4{border-color:var(--edge-2);color:var(--ice);box-shadow:var(--glow-ice)}
.u-5{margin-bottom:30px}
.bg-arb-01{background-image:url(img/arb-01.webp)}
.bg-arb-02{background-image:url(img/arb-02.webp)}
.bg-arb-03{background-image:url(img/arb-03.webp)}
.u-6{width:100%}
.u-7{width:78%}
.u-8{width:62%}
.u-9{width:48%}
.u-10{width:34%}
.u-11{margin-top:16px}
.bg-ev-01{background-image:url(img/ev-01.webp)}
.bg-ev-02{background-image:url(img/ev-02.webp)}
.bg-ev-03{background-image:url(img/ev-03.webp)}
.bg-no-01{background-image:url(img/no-01.webp)}
.bg-no-02{background-image:url(img/no-02.webp)}
.bg-no-03{background-image:url(img/no-03.webp)}
.bg-no-04{background-image:url(img/no-04.webp)}
.bg-no-05{background-image:url(img/no-05.webp)}
.bg-no-06{background-image:url(img/no-06.webp)}
.u-12{padding-top:0}
.u-13{max-width:70ch;margin-left:auto;margin-right:auto}
.u-14{color:var(--faint);font-size:.76rem;margin-top:10px}

/* ===== 2026-08-19: banner reduced to 13 card-sourced images =====
   Grouped 3-2-4-4; every cluster links to the section its cards live in.
   --mq-gap is the BETWEEN-cluster gap and is referenced by the mq-slide
   keyframe, so raising it keeps the seamless-loop offset correct. */
.mq{--mq-gap:46px}
.mq-cluster{display:flex;align-items:center;gap:10px;flex:0 0 auto}
a.mq-item{display:block;text-decoration:none;cursor:pointer}
a.mq-item:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.mq:focus-within .mq-track{animation-play-state:paused}
/* the header is position:fixed, so anchored headings need clearance */
section[id]{scroll-margin-top:96px}
@media (max-width:640px){
  .mq{--mq-gap:26px}
  .mq-cluster{gap:7px}
  /* the mobile header wraps to two rows (~121px), so clear that, not 74px */
  section[id]{scroll-margin-top:132px}
}

/* banner needs class hooks for the section graphics, which live in vars */
.bg-sec-routes{background-image:var(--g-routes)}
.bg-sec-systems{background-image:var(--g-systems)}
.bg-sec-scale{background-image:var(--g-scale)}
.bg-sec-wall{background-image:var(--g-wall)}
.bg-sec-touch{background-image:var(--g-touch)}
.bg-sec-floor{background-image:var(--g-floor)}
/* one continuous shuffled run now, so items space evenly */
.mq{--mq-gap:22px}
.mq-cluster{gap:var(--mq-gap)}

/* ===== banner tiles read as the SAME photo as the card =====
   Cards render these at 16:10 (.gfx). The banner previously used portrait and
   square tiles, so background-size:cover cropped a different region of the same
   file and the pair was unrecognisable. All tiles are now 16:10 — only the
   scale varies — so the crop matches the card. */
.mq-item.s1{width:264px;height:165px;margin-top:-14px;transform:rotate(-1.2deg)}
.mq-item.s2{width:196px;height:123px;margin-top:40px;transform:rotate(1.6deg)}
.mq-item.s3{width:304px;height:190px;margin-top:6px;transform:rotate(.9deg)}
.mq-item.s4{width:232px;height:145px;margin-top:-22px;transform:rotate(-1.8deg)}
.mq-item.s5{width:340px;height:213px;margin-top:28px;transform:rotate(.7deg)}
.mq-item.s6{width:180px;height:113px;margin-top:-4px;transform:rotate(-1deg)}

/* the tile says which section it belongs to — the visible link between the
   banner copy and the card copy */
.mq-item{position:relative;overflow:hidden}
.mq-tag{
  position:absolute;left:9px;bottom:9px;z-index:2;
  padding:4px 10px;border-radius:999px;
  font-size:.6rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:#fff;background:rgba(8,20,30,.62);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.22);
  opacity:.9;transition:opacity .25s,background .25s}
a.mq-item:hover .mq-tag,a.mq-item:focus-visible .mq-tag{opacity:1;background:rgba(8,20,30,.85)}

@media (max-width:640px){
  .mq-item.s1{width:186px;height:116px}
  .mq-item.s2{width:150px;height:94px}
  .mq-item.s3{width:210px;height:131px}
  .mq-item.s4{width:168px;height:105px}
  .mq-item.s5{width:230px;height:144px}
  .mq-item.s6{width:140px;height:88px}
  .mq-tag{font-size:.54rem;padding:3px 8px;left:7px;bottom:7px}
}

/* ===== FIX: .shotimg had no rule at all =====
   It is an empty inline <span> carrying only a background-image, so it
   collapsed to 0x0 and these 12 card images never rendered. Sized to 16:10 to
   match .gfx and the banner tiles, so the banner copy and the card copy are
   recognisably the same photo. */
.shotimg{
  display:block;
  width:100%;
  aspect-ratio:16/10;
  margin-bottom:16px;
  border-radius:10px;
  border:1px solid var(--edge);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.nocard .shotimg{margin-bottom:14px}
@media (max-width:640px){
  .shotimg{aspect-ratio:16/9;margin-bottom:13px}
}

/* banner tiles target the card image itself, not just the section */
.shotimg[id],.gfx[id]{scroll-margin-top:104px}
@media (max-width:640px){.shotimg[id],.gfx[id]{scroll-margin-top:138px}}
.shotimg[id]:target,.gfx[id]:target{
  outline:3px solid var(--gold);outline-offset:3px;
  animation:img-land 2.2s ease-out 1}
@keyframes img-land{
  0%{box-shadow:0 0 0 0 rgba(214,174,95,.55)}
  60%{box-shadow:0 0 0 16px rgba(214,174,95,0)}
  100%{box-shadow:0 0 0 0 rgba(214,174,95,0)}}

/* Every numcard and nocard now carries an image, so the old margin-top:auto
   pin is obsolete — and was itself the misalignment: it pushed each heading
   down by whatever space that card's own copy left spare, so headings drifted
   out of line across a row. Top-aligning under a fixed 16:10 image puts every
   heading on the same line. */
.numcard,.nocard{display:flex;flex-direction:column}

/* number and heading share one line, in both card families */
.numhead{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.numhead h3{margin-bottom:0}


/* Below ~1100px the longer headings start wrapping to two lines while their
   row-mates stay on one, which pushed the copy underneath out of step. Pinning
   the heading box to two lines only in that range keeps the copy aligned there
   without loosening the desktop layout, where nothing wraps. */
@media (max-width:1100px){
  .numcard h3{min-height:2.7em}
  .nocard b{min-height:2.84em}
}