/* ==========================================================================
   RADIANCE PREMIUM v4 — 4K / Projector / TV / Laptop / Mobile
   Single authoritative design system. Loads after site.css.
   Tokens: Teal #0b8793 · Cyan #1fb7ca · Orange #f06432 · Ink #07313b
   ========================================================================== */

/* ── TOKENS ─────────────────────────────────────────────────────────────── */
:root{
  --bg:#ffffff; --bg-soft:#f5fbfc; --surface:#ffffff; --surface-2:#eef9fb;
  --line:rgba(11,135,147,.15); --line-strong:rgba(11,135,147,.28);
  --text:#07313b; --muted:#4a717c; --muted-2:#7899a2;
  --gold:#f06432; --gold-soft:#0b8793; --tan:#1fb7ca;
  --teal:#0b8793; --cyan:#1fb7ca; --orange:#f06432; --red:#c83d4f; --ink:#07313b;
  --maxw:min(1760px,calc(100vw - clamp(24px,4.5vw,160px)));
  --r:18px; --ease:cubic-bezier(.22,.61,.36,1);
  --shadow:0 18px 56px rgba(7,49,59,.09);
  --shadow-lg:0 32px 96px rgba(7,49,59,.15);
  --shadow-xl:0 48px 140px rgba(7,49,59,.18);
  --grad-hero:linear-gradient(135deg,#f0fbfd 0%,#ffffff 45%,#e4f8fb 100%);
  --grad-teal:linear-gradient(135deg,#0b8793,#1fb7ca);
  --grad-orange:linear-gradient(135deg,#f06432,#c83d4f);
  --grad-dark:linear-gradient(135deg,#07313b 0%,#0b8793 62%,#1fb7ca 100%);
}

/* ── RESET & BASE ───────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{font-size:clamp(14px,.9vw,18px);scroll-behavior:smooth;overflow-x:hidden;-webkit-text-size-adjust:100%}
body{background:linear-gradient(180deg,#fff 0%,#f5fbfc 48%,#fff 100%)!important;color:var(--ink)!important;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(11,135,147,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(11,135,147,.035) 1px,transparent 1px);background-size:52px 52px;mask-image:linear-gradient(180deg,rgba(0,0,0,.6),transparent 60%);-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.6),transparent 60%)}
h1,h2,h3,h4,h5{color:var(--ink)!important}
p,li{color:var(--muted)!important}
.em{color:var(--orange)!important}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ── LAYOUT ─────────────────────────────────────────────────────────────── */
.wrap{max-width:var(--maxw)!important;margin:0 auto;padding:0 clamp(16px,3vw,56px)!important}
.eyebrow{color:var(--teal)!important;letter-spacing:clamp(.14em,.24vw,.3em)!important;font-size:clamp(10px,.72vw,13px)!important}
.eyebrow::before{background:var(--orange)!important}

/* ── NAVIGATION ─────────────────────────────────────────────────────────── */
header{background:rgba(255,255,255,.88)!important;backdrop-filter:blur(22px)!important;-webkit-backdrop-filter:blur(22px)!important;border-bottom:1px solid var(--line)!important;box-shadow:0 2px 20px rgba(7,49,59,.04);position:fixed;top:0;left:0;right:0;z-index:120}
header.solid{background:rgba(255,255,255,.98)!important;box-shadow:0 8px 40px rgba(7,49,59,.1)!important}
.nav{height:clamp(60px,5vw,90px)!important;display:flex;align-items:center;justify-content:space-between!important}
.brand{flex-shrink:0!important;min-width:0}
/* Inner pages: transparent (white header provides contrast) */
body:not([data-page="index"]) .brand .logo-img{height:clamp(32px,2.6vw,50px)!important;background:transparent!important;padding:0!important;box-shadow:none!important;border-radius:0!important}
/* Homepage: white pill so dark logo is visible on dark video header */
body[data-page="index"] .brand .logo-img{height:clamp(34px,2.8vw,52px)!important;background:#fff!important;padding:5px 13px!important;border-radius:10px!important;box-shadow:0 3px 18px rgba(0,0,0,.5)!important}
/* Desktop only — mobile handled by @media(max-width:920px) block below */
@media(min-width:921px){
  .nav-links{display:flex!important;align-items:center!important;gap:clamp(1px,.35vw,8px)!important;flex-wrap:nowrap!important;flex:1!important;justify-content:center!important}
}
/* Inner pages only — dark theme homepage keeps its own white nav */
body:not([data-page="index"]) .nav-links a{color:#1d454f!important;font-weight:600!important;font-size:clamp(10px,.7vw,13.5px)!important;white-space:nowrap!important;padding:6px clamp(4px,.45vw,9px)!important;border-radius:8px;transition:color .2s,background .2s}
body:not([data-page="index"]) .nav-links a:hover,body:not([data-page="index"]) .nav-links a.active{color:var(--teal)!important;background:rgba(11,135,147,.07)!important}
/* Homepage — light text on dark hero */
body[data-page="index"] .nav-links a{color:rgba(255,255,255,.8)!important;font-weight:600!important;font-size:clamp(10px,.7vw,13.5px)!important;white-space:nowrap!important;padding:6px clamp(4px,.45vw,9px)!important;border-radius:8px;transition:color .2s,background .2s}
body[data-page="index"] .nav-links a:hover,body[data-page="index"] .nav-links a.active{color:#fff!important;background:rgba(255,255,255,.1)!important}


.nav-cta{
  background:var(--grad-orange)!important;color:#fff!important;
  box-shadow:0 10px 30px rgba(240,100,50,.28)!important;
  border-radius:100px!important;
  padding:12px clamp(18px,1.6vw,32px)!important;
  font-family:"Sora",sans-serif!important;
  font-weight:700!important;font-size:clamp(12px,.82vw,15px)!important;
  white-space:nowrap;cursor:pointer;
  transition:box-shadow .3s,transform .25s;
  display:inline-flex!important;align-items:center;gap:6px;
  text-decoration:none!important;border:none!important;
  min-height:44px!important;letter-spacing:.02em
}
.nav-cta:hover{box-shadow:0 20px 54px rgba(240,100,50,.44)!important;transform:translateY(-2px)}
.menu-btn{border-color:var(--line)!important;color:var(--ink)!important;background:#fff!important;flex-shrink:0;display:none!important}
.nav-right{flex-shrink:0!important;gap:10px!important}

/* ── SEARCH PILL ─────────────────────────────────────────────────────────── */
.nav-search-pill{
  display:inline-flex!important;align-items:center;gap:7px;
  background:rgba(11,135,147,.09)!important;
  border:1.5px solid rgba(11,135,147,.25)!important;
  border-radius:100px!important;
  padding:9px clamp(12px,1.2vw,20px)!important;
  color:var(--teal)!important;
  font-family:"Sora",sans-serif!important;
  font-weight:600!important;font-size:clamp(11px,.78vw,14px)!important;
  white-space:nowrap;cursor:pointer;text-decoration:none!important;
  transition:background .22s,border-color .22s,transform .22s,box-shadow .22s;
  min-height:40px;flex-shrink:0
}
.nav-search-pill:hover{background:rgba(11,135,147,.17)!important;border-color:var(--teal)!important;transform:translateY(-1px);box-shadow:0 6px 20px rgba(11,135,147,.18)}
.nav-search-pill svg{flex-shrink:0;opacity:.85}
/* On dark homepage header */
body[data-page="index"] .nav-search-pill{background:rgba(255,255,255,.1)!important;border-color:rgba(255,255,255,.28)!important;color:#fff!important}
body[data-page="index"] .nav-search-pill:hover{background:rgba(255,255,255,.2)!important;border-color:rgba(255,255,255,.5)!important}
body[data-page="index"] header.solid .nav-search-pill{background:rgba(11,135,147,.09)!important;border-color:rgba(11,135,147,.25)!important;color:var(--teal)!important}
/* Laptop (921–1199px): compress nav so all items + Enquire fit */
@media(min-width:921px) and (max-width:1199px){
  /* Search pill: icon only */
  .search-pill-txt{display:none!important}
  .nav-search-pill{padding:9px 11px!important;border-radius:50%!important;min-height:40px;width:40px!important;justify-content:center!important}
  /* Nav links: tighter font + gap */
  .nav-links{gap:clamp(2px,.8vw,10px)!important;flex-shrink:1!important;min-width:0!important}
  .nav-links a{font-size:clamp(10.5px,1vw,12.5px)!important;padding:6px 2px!important;letter-spacing:0!important;white-space:nowrap!important}
  /* Enquire: compact, never hidden */
  .nav-cta{padding:8px 12px!important;font-size:12px!important;white-space:nowrap!important;flex-shrink:0!important}
  /* Nav container */
  .nav{flex-wrap:nowrap!important}
  .nav-right{flex-shrink:0!important;gap:6px!important}
  /* Brand: don't shrink logo */
  .brand{flex-shrink:0!important}
}
/* Mobile: icon-only */
@media(max-width:619px){
  .search-pill-txt{display:none}
  .nav-search-pill{padding:9px 11px!important;border-radius:50%!important;min-height:40px;width:40px;justify-content:center}
}

/* ── NAV CLOSE BUTTON (mobile overlay × ) ───────────────────────────────── */
.nav-close-btn{
  display:none;/* hidden on desktop */
  position:absolute;top:20px;right:20px;
  width:44px;height:44px;border-radius:50%;
  background:rgba(11,135,147,.1);border:1.5px solid rgba(11,135,147,.2);
  color:var(--ink);cursor:pointer;
  align-items:center;justify-content:center;
  transition:background .2s,transform .2s;z-index:2
}
.nav-close-btn:hover{background:rgba(11,135,147,.2);transform:rotate(90deg)}
/* Show only when nav overlay is open */
@media(max-width:920px){
  .nav-links.open .nav-close-btn{display:flex!important}
}

/* ── MOBILE NAV OVERLAY ─────────────────────────────────────────────────── */
body.nav-open{overflow:hidden!important}
@media(max-width:920px){
  .menu-btn{display:grid!important}
  .nav-links{
    display:none!important;
    position:fixed!important;inset:0!important;
    flex-direction:column!important;
    align-items:center!important;justify-content:center!important;
    gap:18px!important;
    background:rgba(255,255,255,.97)!important;
    backdrop-filter:blur(24px)!important;-webkit-backdrop-filter:blur(24px)!important;
    z-index:400!important;/* above header z-index:120, media z-index:200 */
    padding:60px 24px 40px!important;
    overflow-y:auto!important
  }
  .nav-links.open{display:flex!important;animation:navSlideIn .28s cubic-bezier(.22,.61,.36,1) both}
  @keyframes navSlideIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
  .nav-links a{
    font-size:20px!important;
    color:var(--ink)!important;
    font-weight:700!important;
    padding:12px 28px!important;
    border-radius:14px!important;
    width:100%;max-width:320px;text-align:center;
    transition:background .18s,color .18s;
    white-space:nowrap!important
  }
  .nav-links a:hover,.nav-links a.active{background:rgba(11,135,147,.08)!important;color:var(--teal)!important}
}
@media(max-width:619px){
  /* Already covered by 920px above — tighten spacing */
  .nav-links{gap:12px!important}
  .nav-links a{font-size:18px!important;padding:10px 20px!important}
}

/* ── BUTTONS ─────────────────────────────────────────────────────────────── */
/* ── BUTTONS — single authoritative rule ───────────────────────────────── */
.btn{border-radius:100px!important;font-weight:700!important;min-height:52px!important;padding:14px clamp(22px,2.2vw,40px)!important;font-size:clamp(13.5px,.9vw,16px)!important;letter-spacing:.02em;transition:box-shadow .3s,transform .25s;position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px}
.btn-gold{background:var(--grad-orange)!important;color:#fff!important;box-shadow:0 14px 42px rgba(240,100,50,.28)!important}
.btn-gold::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 20%,rgba(255,255,255,.28) 50%,transparent 80%);transform:translateX(-100%);transition:transform .55s var(--ease)}
.btn-gold:hover::after{transform:translateX(100%)}
.btn-gold:hover{box-shadow:0 24px 64px rgba(240,100,50,.44)!important;transform:translateY(-3px)}
.btn-ghost{background:#fff!important;color:var(--ink)!important;border:1.5px solid var(--line)!important;box-shadow:0 8px 24px rgba(7,49,59,.07)!important}
.btn-ghost:hover{border-color:var(--teal)!important;color:var(--teal)!important;transform:translateY(-2px)}
.btn-shop{background:var(--grad-orange)!important;color:#fff!important;border:none!important;box-shadow:0 12px 32px rgba(240,100,50,.24)!important}
.btn-shop:hover{box-shadow:0 20px 52px rgba(240,100,50,.4)!important;transform:translateY(-3px)}
.btn-support{background:var(--grad-orange)!important;color:#fff!important;border:none!important;box-shadow:0 12px 32px rgba(240,100,50,.24)!important}
.btn-support:hover{box-shadow:0 20px 52px rgba(240,100,50,.4)!important;transform:translateY(-3px)}

/* ── HERO (homepage) ─────────────────────────────────────────────────────── */
.hero{color:var(--ink)!important}
.hero-scrim{background:linear-gradient(90deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.90) 38%,rgba(255,255,255,.45) 65%,rgba(240,251,253,.60) 100%)!important}
.hero h1{font-size:clamp(38px,5.8vw,124px)!important;color:var(--ink)!important;line-height:.96!important;text-shadow:none!important;max-width:min(16ch,1100px)!important;text-wrap:balance;letter-spacing:-.02em!important}
.hero .sub{font-size:clamp(15px,1.15vw,23px)!important;color:#3d6470!important;max-width:60ch!important;line-height:1.62!important}
.hero .eyebrow{color:var(--teal)!important}
.hero-inner{padding-top:clamp(90px,8.5vw,190px)!important;padding-bottom:clamp(64px,6vw,150px)!important}
.hero-actions{display:flex;flex-wrap:wrap;gap:clamp(8px,1vw,16px);margin-bottom:clamp(24px,3vw,52px)}
.hero-stats .s,.statrow>div{background:rgba(255,255,255,.9)!important;border:1px solid var(--line)!important;box-shadow:var(--shadow)!important;border-radius:16px;transition:transform .3s,box-shadow .3s}
.hero-stats .s:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)!important}
.hero-stats .n,.statrow .n{color:var(--teal)!important}
.hero-stats .l,.statrow .l{color:var(--muted-2)!important}

/* ── PAGE HEROES (phero) — VIVID ─────────────────────────────────────────── */
.phero{padding:clamp(108px,9.5vw,210px) 0 clamp(52px,5.5vw,110px)!important;min-height:clamp(320px,38vw,520px)!important;background:var(--grad-hero)!important;border-bottom:1px solid var(--line)!important;color:var(--ink)!important;position:relative;overflow:hidden}
/* Image banner variant */
/* ── Video banner ── */
.phero.has-video-banner{position:relative;overflow:hidden}
.phero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none}
.phero.has-banner{background:none!important;min-height:clamp(440px,52vw,680px)!important;display:flex;align-items:center}
/* Full vivid image — no colour kill */
.phero.has-banner .phero-bg{
  display:block!important;position:absolute;inset:0;
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  z-index:0;
  filter:brightness(1.12) saturate(1.3) contrast(1.08);
  transform:scale(1.06);
  animation:bannerZoom 12s ease-out forwards;
}
@keyframes bannerZoom{
  0%  {transform:scale(1.10);}
  100%{transform:scale(1.00);}
}
/* Minimal vignette only at edges + left gradient so text pops */
.phero.has-banner .phero-scrim{
  display:block!important;position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(90deg, rgba(0,0,0,.68) 0%, rgba(0,0,0,.32) 55%, rgba(0,0,0,.06) 100%),
    linear-gradient(0deg,  rgba(0,0,0,.58) 0%, rgba(0,0,0,0) 48%);
}
.phero.has-banner .wrap{position:relative;z-index:2}
.phero.has-banner .phero-stripe{display:none}
.phero.has-banner::before,.phero.has-banner::after{display:none}
/* Text */
.phero.has-banner h1{color:#fff!important;font-weight:800!important;text-shadow:0 3px 32px rgba(0,0,0,.85),0 1px 8px rgba(0,0,0,.7)!important;max-width:18ch}
.phero.has-banner p{color:#fff!important;font-size:clamp(15px,1.3vw,18px)!important;line-height:1.7!important;text-shadow:0 1px 16px rgba(0,0,0,.75)!important;max-width:52ch}
.phero.has-banner .eyebrow{color:#ffb347!important;background:rgba(240,100,50,.18)!important;border-color:rgba(240,130,30,.5)!important;text-shadow:none}
.phero.has-banner .crumbs,.phero.has-banner .crumbs a{color:rgba(255,255,255,.6)!important}
.phero.has-banner .crumbs a:hover{color:#fff!important}
/* Teal arc top-right */
.phero::before{content:"";position:absolute;right:-8vw;top:-12vw;width:min(52vw,800px);height:min(52vw,800px);border-radius:50%;background:radial-gradient(circle,rgba(11,135,147,.13) 0%,rgba(31,183,202,.07) 52%,transparent 70%);pointer-events:none}
/* Orange glow bottom-left */
.phero::after{content:"";position:absolute;left:-6vw;bottom:-9vw;width:min(38vw,580px);height:min(38vw,580px);border-radius:50%;background:radial-gradient(circle,rgba(240,100,50,.11) 0%,rgba(200,61,79,.05) 52%,transparent 70%);pointer-events:none}
.phero .wrap{position:relative;z-index:2}
.phero h1{font-size:clamp(28px,4.4vw,90px)!important;color:var(--ink)!important;text-wrap:balance;line-height:1.03!important;letter-spacing:-.02em!important}
.phero p{font-size:clamp(14px,1.08vw,21px)!important;color:var(--muted)!important;max-width:66ch!important;line-height:1.66!important}
/* Page-specific accent tints */
body[data-page="shop"] .phero::before{background:radial-gradient(circle,rgba(11,135,147,.17) 0%,transparent 65%)}
body[data-page="support"] .phero::before{background:radial-gradient(circle,rgba(240,100,50,.14) 0%,transparent 65%)}
body[data-page="partners"] .phero::before{background:radial-gradient(circle,rgba(31,183,202,.17) 0%,transparent 65%)}
body[data-page="about"] .phero::before{background:radial-gradient(circle,rgba(11,135,147,.14) 0%,transparent 65%)}
/* Diagonal stripe accent on phero */
.phero-stripe{position:absolute;right:0;top:0;bottom:0;width:min(46vw,680px);background:linear-gradient(135deg,rgba(11,135,147,.04) 0%,rgba(31,183,202,.07) 50%,rgba(240,100,50,.04) 100%);clip-path:polygon(18% 0%,100% 0%,100% 100%,0% 100%);pointer-events:none}

.crumbs{color:var(--muted-2)!important;font-size:clamp(11px,.78vw,13px)!important}
.crumbs a:hover{color:var(--orange)!important}
/* phero-bg and phero-scrim controlled by .has-banner */

/* ── SECTIONS ───────────────────────────────────────────────────────────── */
.sec{padding:clamp(52px,7.5vw,150px) 0!important}
.sec-head h2{font-size:clamp(26px,4.2vw,86px)!important;color:var(--ink)!important;text-wrap:balance;letter-spacing:-.02em!important}
.sec-head p{font-size:clamp(14px,1.08vw,22px)!important;color:var(--muted)!important;max-width:70ch!important}
.band{background:linear-gradient(135deg,#ecf9fb 0%,#fff 50%,#e3f7fa 100%)!important;color:var(--ink)!important;border-top:1px solid var(--line)!important;border-bottom:1px solid var(--line)!important}
.band h2,.band h3,.band h4{color:var(--ink)!important}
.band p{color:var(--muted)!important}
.band .eyebrow{color:var(--teal)!important}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.5vw,90px);align-items:start}
.lead{font-size:clamp(15px,1.12vw,22px)!important;color:var(--muted)!important;line-height:1.66!important}

/* ── CARDS ──────────────────────────────────────────────────────────────── */
.card,.why,.fmt,.stage,.form,.office,.machine{background:#fff!important;border:1px solid var(--line)!important;box-shadow:var(--shadow)!important;border-radius:var(--r)!important;color:var(--ink)!important;transition:transform .32s var(--ease),box-shadow .32s,border-color .25s}
.card h3,.card h2,.why h4,.fmt h4{color:var(--ink)!important}
.card p,.why p,.fmt p{color:var(--muted)!important}
.card:hover,.why:hover,.fmt:hover,.machine:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)!important;border-color:rgba(240,100,50,.3)!important}
.card .k{color:var(--teal)!important;font-weight:700;font-size:clamp(10px,.74vw,12.5px);text-transform:uppercase;letter-spacing:.12em;display:block;margin-bottom:8px}
.card .more{color:var(--orange)!important}
.card .tag{background:var(--teal)!important;color:#fff!important}
.chip,.ind,.spec{background:#eef9fb!important;border-color:var(--line)!important;color:var(--teal)!important;font-weight:700;transition:background .2s,border-color .2s,color .2s,transform .2s}
.chip:hover,.spec:hover{border-color:var(--orange)!important;color:var(--orange)!important;transform:translateY(-2px)}
.cap{border-radius:18px!important;box-shadow:var(--shadow)!important}
.why .ic{background:linear-gradient(135deg,rgba(11,135,147,.12),rgba(31,183,202,.08))!important;color:var(--teal)!important}

/* ── STAGE ROWS ─────────────────────────────────────────────────────────── */
.stage{display:grid!important;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)!important;gap:clamp(22px,4vw,88px)!important;padding:clamp(22px,3vw,60px)!important;margin-bottom:clamp(18px,2.5vw,48px)}
.stage.flip{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)!important}
.stage-body h3{font-size:clamp(22px,2.6vw,54px)!important;color:var(--ink)!important;text-wrap:balance;letter-spacing:-.015em!important}
.stage-body p{color:var(--muted)!important}
.stage-media{border-radius:18px!important;min-height:clamp(220px,24vw,540px);aspect-ratio:16/11!important;overflow:hidden}
.stage-media .num{background:var(--teal)!important;color:#fff!important}
.mrow{border-bottom:1px solid var(--line)!important}
.mbody h3{color:var(--ink)!important}
.mbody p{color:var(--muted)!important}

/* ── STAT BAND ──────────────────────────────────────────────────────────── */
.statband{background:var(--grad-dark)!important;color:#fff!important;position:relative;overflow:hidden}
.statband::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(0deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:64px 64px;opacity:.5}
.statband::after{content:"";position:absolute;right:-10%;top:-30%;width:min(60vw,900px);height:min(60vw,900px);border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.07) 0%,transparent 60%);pointer-events:none}
.statband .n{color:#fff!important;font-size:clamp(32px,4.5vw,90px)!important}
.statband .l{color:rgba(255,255,255,.72)!important;font-size:clamp(12px,.9vw,16px)!important}
/* Statband cards must NOT inherit white box from .statrow>div rule — text is white so box must be transparent */
.statband .statrow>div{background:transparent!important;border:none!important;box-shadow:none!important;border-radius:0!important}

/* ── PARTNER MARQUEE ────────────────────────────────────────────────────── */
/* Office cards — consistent fonts, alignment, light-theme readable */
.office{align-self:start!important;text-align:center!important}
.office .meta{justify-content:center!important}
.office .lbl{
  font-family:"Sora",sans-serif!important;
  font-size:10.5px!important;
  font-weight:700!important;
  letter-spacing:.22em!important;
  text-transform:uppercase!important;
  color:var(--teal)!important;
  margin-bottom:10px!important;
}
.office .addr{
  font-family:"Sora",sans-serif!important;
  font-size:clamp(13.5px,.95vw,15px)!important;
  font-weight:500!important;
  line-height:1.7!important;
  color:var(--ink)!important;
}
.office .meta{
  margin-top:14px!important;
  display:flex!important;
  flex-wrap:wrap!important;
  gap:8px 20px!important;
}
.office .meta a{
  font-family:"Sora",sans-serif!important;
  font-size:13px!important;
  font-weight:600!important;
  color:var(--teal)!important;
  text-decoration:none!important;
  border-bottom:1px solid rgba(11,135,147,.25)!important;
}

.partner-band{overflow:hidden;background:linear-gradient(90deg,#fff,#eef9fb 50%,#fff)!important;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(24px,3.5vw,70px) 0}
.partner-head h2{font-size:clamp(24px,3.2vw,68px)!important;color:var(--ink)!important;text-wrap:balance}
.logo-marquee{display:flex;flex-direction:column;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.logo-track{display:flex;gap:clamp(12px,1.6vw,32px);min-width:max-content;animation:radianceMarquee 28s linear infinite}
.logo-marquee:hover .logo-track{animation-play-state:paused}
@keyframes radianceMarquee{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.partner-logo{width:clamp(150px,13.5vw,290px);height:clamp(96px,7.5vw,148px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:18px;flex:0 0 auto;transition:box-shadow .32s,transform .32s,border-color .25s}
.partner-logo:hover{box-shadow:var(--shadow-lg);transform:translateY(-5px);border-color:rgba(240,100,50,.32)}
.partner-logo img{max-width:86%;max-height:60px;object-fit:contain}
.partner-logo span{font-weight:800;color:var(--ink)!important;font-size:clamp(11px,.85vw,14px);text-align:center}

/* ── INDUSTRIES ─────────────────────────────────────────────────────────── */
.ind{border-radius:14px!important;background:#fff!important;color:var(--teal)!important}
.ind:hover,.ind.active{background:var(--teal)!important;color:#fff!important;border-color:transparent!important}

/* ── FORMS ──────────────────────────────────────────────────────────────── */
.contact h2{color:var(--ink)!important}
.contact p{color:var(--muted)!important}
.form{padding:clamp(22px,3vw,52px)!important}
input,textarea,select{border:1px solid var(--line)!important;border-radius:12px!important;background:#fff!important;color:var(--ink)!important;padding:13px 16px!important;font-size:clamp(14px,.9vw,16px)!important;width:100%!important;outline:none;transition:border-color .25s,box-shadow .25s}
input:focus,textarea:focus,select:focus{border-color:var(--orange)!important;box-shadow:0 0 0 4px rgba(240,100,50,.1)!important}
input::placeholder,textarea::placeholder{color:var(--muted-2)!important}
label{color:var(--ink)!important}

/* ── FORM ACK ───────────────────────────────────────────────────────────── */
.form-ack,.ok,#enqOk,#formAck{margin-top:16px;padding:14px 18px;border-radius:14px;background:linear-gradient(135deg,#e4fbf2,#d4f5e9);border:1px solid rgba(11,135,147,.22);color:#0a6b4e!important;font-weight:700;line-height:1.55;display:none;animation:fadeAck .4s var(--ease) both}
.form-ack.show,.ok.show{display:block!important}
@keyframes fadeAck{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ── SEARCH ─────────────────────────────────────────────────────────────── */
.radiance-search{background:rgba(255,255,255,.9);border:1px solid var(--line);border-radius:22px;padding:clamp(14px,1.4vw,20px);box-shadow:0 24px 72px rgba(7,49,59,.1);backdrop-filter:blur(16px);max-width:min(840px,100%);margin-bottom:10px}
.radiance-search label{color:var(--teal)!important;font-weight:800;font-size:clamp(10px,.74vw,13px);text-transform:uppercase;letter-spacing:.18em;margin-bottom:10px;display:block}
.search-row{display:grid;grid-template-columns:1fr auto;gap:10px}
.search-row input{min-height:52px!important;border-radius:14px!important;font-weight:600!important;font-size:clamp(13px,.9vw,16px)!important}
.search-row button{border:0;border-radius:14px;padding:0 clamp(18px,2vw,28px);background:var(--grad-orange);color:#fff;font:800 clamp(13px,.88vw,15px) Sora,system-ui,sans-serif;cursor:pointer;box-shadow:0 12px 30px rgba(240,100,50,.24);white-space:nowrap;min-width:80px;transition:box-shadow .25s,transform .25s;position:relative;overflow:hidden}
.search-row button::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 20%,rgba(255,255,255,.25) 50%,transparent 80%);transform:translateX(-100%);transition:transform .5s var(--ease)}
.search-row button:hover::after{transform:translateX(100%)}
.search-row button:hover{box-shadow:0 18px 46px rgba(240,100,50,.36);transform:translateY(-2px)}
.search-hints{font-size:clamp(11px,.78vw,13px);color:var(--muted-2);margin-top:9px;line-height:1.5}
.search-result{font-size:clamp(12px,.82vw,14px);font-weight:700;color:var(--teal);margin-top:7px}

/* ── MEDIA CONTROLS ─────────────────────────────────────────────────────── */
#media{position:fixed;bottom:clamp(16px,2vw,40px);right:clamp(12px,2vw,40px);display:flex;align-items:center;gap:10px;z-index:200;filter:drop-shadow(0 18px 44px rgba(7,49,59,.18))}
.tour-pill{display:flex;align-items:center;gap:10px;background:#fff!important;color:var(--ink)!important;border:1px solid var(--line)!important;border-radius:100px;padding:9px 18px 9px 9px;cursor:pointer;font-family:Sora,system-ui,sans-serif;font-weight:700;font-size:clamp(11px,.82vw,14px);transition:border-color .25s,box-shadow .25s,transform .25s;box-shadow:var(--shadow);white-space:nowrap}
.tour-pill:hover{border-color:var(--orange)!important;box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.tour-pill .ic{width:30px;height:30px;border-radius:50%;background:var(--grad-orange)!important;color:#fff!important;display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative}
.tour-pill.playing{border-color:var(--orange)!important}
.tour-pill.playing .ic::after{content:"";position:absolute;width:36px;height:36px;border-radius:50%;border:2px solid var(--orange);animation:narrationPulse 1.4s ease-out infinite}
@keyframes narrationPulse{0%{opacity:.8;transform:scale(.7)}100%{opacity:0;transform:scale(1.7)}}
.mc-btn{width:38px;height:38px;border-radius:50%;background:#fff!important;border:1px solid var(--line)!important;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--teal)!important;box-shadow:var(--shadow);transition:border-color .25s,box-shadow .25s,transform .25s}
.mc-btn:hover{border-color:var(--orange)!important;transform:scale(1.1);box-shadow:var(--shadow-lg)}
.eq{display:flex;gap:2.5px;align-items:flex-end;height:16px}
.eq span{display:block;width:3px;background:var(--teal);border-radius:2px;height:6px;transition:height .2s}
.mc-btn.active .eq span:nth-child(1){animation:eq1 .6s ease-in-out infinite alternate}
.mc-btn.active .eq span:nth-child(2){animation:eq2 .4s ease-in-out infinite alternate}
.mc-btn.active .eq span:nth-child(3){animation:eq3 .5s ease-in-out infinite alternate}
.mc-btn.active .eq span:nth-child(4){animation:eq4 .45s ease-in-out infinite alternate}
@keyframes eq1{to{height:14px}}@keyframes eq2{to{height:10px}}@keyframes eq3{to{height:16px}}@keyframes eq4{to{height:8px}}

/* ── WA FLOAT ───────────────────────────────────────────────────────────── */
.wa-float{position:fixed;left:clamp(14px,2vw,36px);bottom:clamp(16px,2vw,40px);width:clamp(44px,3.5vw,62px);height:clamp(44px,3.5vw,62px);background:#25d366;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 40px rgba(37,211,102,.4);z-index:200;transition:transform .3s,box-shadow .3s}
.wa-float:hover{transform:scale(1.13) translateY(-3px);box-shadow:0 20px 60px rgba(37,211,102,.5)}
.wa-float svg{width:clamp(24px,2vw,34px);height:clamp(24px,2vw,34px)}
.wa-float::before{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid rgba(37,211,102,.4);animation:waPulse 2.2s ease-out infinite}
@keyframes waPulse{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.55)}}
/* ── Mail floating button ── */
.mail-float{position:fixed;left:clamp(14px,2vw,36px);bottom:clamp(84px,8vw,108px);width:clamp(44px,3.5vw,62px);height:clamp(44px,3.5vw,62px);background:linear-gradient(135deg,#0b8793,#073b4c);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 40px rgba(11,135,147,.45);z-index:200;transition:transform .3s,box-shadow .3s;text-decoration:none}
.mail-float:hover{transform:scale(1.13) translateY(-3px);box-shadow:0 20px 60px rgba(11,135,147,.6)}
.mail-float svg{width:clamp(22px,1.8vw,30px);height:clamp(22px,1.8vw,30px)}
.mail-float::before{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid rgba(11,135,147,.4);animation:mailPulse 2.5s ease-out infinite}
@keyframes mailPulse{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.55)}}

/* ── ENQUIRE MODAL ──────────────────────────────────────────────────────── */
#enqModal{position:fixed;inset:0;z-index:500;display:none;align-items:center;justify-content:center;background:rgba(7,49,59,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:24px}
#enqModal.open{display:flex;animation:modalIn .3s ease}
#enqModal .modal-box{background:#fff;border-radius:24px;width:100%;max-width:560px;box-shadow:var(--shadow-xl);transform:translateY(28px) scale(.97);transition:transform .4s var(--ease);overflow:hidden;max-height:92vh;overflow-y:auto}
#enqModal.open .modal-box{transform:none}
#enqModal .modal-head{background:var(--grad-dark);padding:clamp(20px,2.5vw,32px) clamp(20px,2.5vw,32px) clamp(16px,2vw,24px);position:relative}
#enqModal .modal-head h3{font-family:Sora,system-ui,sans-serif;font-weight:800;font-size:clamp(18px,1.6vw,26px);color:#fff!important;margin-bottom:4px}
#enqModal .modal-head p{color:rgba(255,255,255,.75)!important;font-size:clamp(13px,.9vw,15px)}
#enqModalClose{
  position:absolute!important;top:14px!important;right:14px!important;
  width:32px!important;height:32px!important;border-radius:50%!important;
  background:rgba(255,255,255,.18)!important;
  border:1.5px solid rgba(255,255,255,.3)!important;
  color:#fff!important;
  font-size:16px!important;line-height:1!important;
  cursor:pointer!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  transition:background .2s,transform .2s!important;
  box-shadow:none!important;
  padding:0!important;
  z-index:10!important;
}
#enqModalClose:hover{background:rgba(255,255,255,.32)!important;transform:scale(1.1)!important}
#enqModal .modal-body{padding:clamp(20px,2.5vw,32px)}
#enqModal .field{margin-bottom:16px}
#enqModal .field label{display:block;font-family:Sora,system-ui,sans-serif;font-weight:700;font-size:clamp(10px,.78vw,12px);text-transform:uppercase;letter-spacing:.12em;color:var(--teal)!important;margin-bottom:6px}
#enqModal input,#enqModal select,#enqModal textarea{font-size:clamp(13px,.9vw,15px)!important}
#enqModal .submit-row{display:flex;gap:10px;margin-top:8px}
#enqModal .submit-row .btn{flex:1;justify-content:center;border:0;cursor:pointer}
#enqModal .form-ack{margin-top:0}

/* ── FOOTER ─────────────────────────────────────────────────────────────── */
footer{background:#07313b!important;border-top:none!important}
footer h5,.foot-col h5{color:rgba(255,255,255,.45)!important;text-transform:uppercase;letter-spacing:.14em;font-size:clamp(10px,.78vw,12px)!important}
footer p,.foot-top p{color:rgba(255,255,255,.55)!important}
.foot-top a,.foot-col a{color:rgba(255,255,255,.65)!important;transition:color .2s}
.foot-top a:hover,.foot-col a:hover{color:var(--orange)!important}
.foot-bot{border-top:1px solid rgba(255,255,255,.1)!important;color:rgba(255,255,255,.32)!important;font-size:clamp(11px,.78vw,13px)!important}

/* ── REVEAL ANIMATIONS ──────────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.12s}.reveal.d2{transition-delay:.22s}
.reveal.d3{transition-delay:.32s}.reveal.d4{transition-delay:.44s}
.stage-media.reveal{opacity:0;transform:translateX(32px)}
.stage-media.reveal.in{opacity:1;transform:none}
.stage.flip .stage-media.reveal{transform:translateX(-32px)}
.stage.flip .stage-media.reveal.in{transform:none}

/* ── 4K / LARGE SCREEN 2400px+ ───────────────────────────────────────────── */
@media(min-width:2400px){
  html{font-size:clamp(18px,.94vw,26px)}
  :root{--maxw:min(2480px,calc(100vw - 200px));--shadow:0 24px 72px rgba(7,49,59,.08);--shadow-lg:0 40px 120px rgba(7,49,59,.14)}
  .nav{height:100px!important}
  .brand .logo-img{height:60px!important}
  .hero h1{font-size:clamp(80px,6.5vw,160px)!important}
  .phero h1{font-size:clamp(60px,5.2vw,120px)!important}
  .statband .n{font-size:clamp(56px,5.5vw,120px)!important}
  .partner-logo{width:320px!important;height:170px!important}
  .logo-track{gap:40px!important}
  .wa-float{width:76px!important;height:76px!important}
  .mail-float{width:76px!important;height:76px!important}
  #media{bottom:48px!important;right:48px!important}
  .tour-pill{font-size:16px!important;padding:13px 24px 13px 13px!important}
  .tour-pill .ic{width:40px!important;height:40px!important}
}

/* ── 1800–2399px ─────────────────────────────────────────────────────────── */
@media(min-width:1800px) and (max-width:2399px){
  html{font-size:clamp(16px,.9vw,20px)}
  :root{--maxw:min(1840px,calc(100vw - 140px))}
}

/* ── TABLET 768–1179px ──────────────────────────────────────────────────── */
@media(max-width:1179px){
  .split{grid-template-columns:1fr!important;gap:clamp(22px,4vw,48px)}
  .stage{grid-template-columns:1fr!important}
  .stage.flip{grid-template-columns:1fr!important}
  .stage-media{aspect-ratio:16/9!important;min-height:auto}
  .stage-media.reveal,.stage.flip .stage-media.reveal{transform:translateY(24px)}
}

/* ── MOBILE 619px and below ─────────────────────────────────────────────── */
@media(max-width:619px){
  html{font-size:15px}
  .hero h1{font-size:clamp(32px,8.5vw,50px)!important;max-width:100%!important}
  .phero h1{font-size:clamp(24px,7.5vw,42px)!important}
  .phero::before,.phero::after,.phero-stripe{display:none}
  /* Hero buttons: 2-column grid, hide secondary CTAs */
  .hero-actions{flex-direction:row!important;flex-wrap:wrap!important;gap:10px!important}
  .hero-actions .btn{flex:1 1 calc(50% - 5px);min-width:130px;justify-content:center;min-height:46px!important;font-size:13px!important;padding:12px 14px!important}
  .hero-actions .btn-shop,.hero-actions .btn-support{display:none!important}
  /* Stats: 2x2 grid */
  .hero-stats{display:grid!important;grid-template-columns:1fr 1fr!important;gap:14px 20px!important}
  /* Mobile nav handled by @media(max-width:767px) block above */
  #media{bottom:12px!important;right:10px!important;gap:7px}
  .tour-pill{font-size:11px!important;padding:8px 12px 8px 8px!important}
  .tour-pill .lbl{display:none}
  .mc-btn{width:34px!important;height:34px!important}
  .wa-float{left:10px!important;bottom:12px!important;width:46px!important;height:46px!important}
  .mail-float{left:10px!important;bottom:70px!important;width:46px!important;height:46px!important}
  .radiance-search{border-radius:16px!important;padding:12px!important}
  .search-row{grid-template-columns:1fr}
  .search-row button{border-radius:12px!important;padding:12px!important;min-height:48px}
}

/* ── LANDSCAPE MOBILE ───────────────────────────────────────────────────── */
@media(max-height:500px) and (orientation:landscape){
  .hero{min-height:auto!important}
  .hero-inner{padding-top:72px!important;padding-bottom:32px!important}
  .hero h1{font-size:clamp(24px,5vw,42px)!important}
  .phero{padding:72px 0 28px!important}
  .phero h1{font-size:clamp(20px,4.5vw,34px)!important}
  #media{bottom:8px!important;right:8px!important}
  .wa-float{bottom:8px!important;left:8px!important}
  .mail-float{bottom:64px!important;left:8px!important}
}

/* ── CARD & GRID — FULL ALIGNMENT & NO TEXT CUTTING ─────────────────────── */
/* Cards never clip content */
.card{overflow:visible!important;display:flex!important;flex-direction:column!important;height:100%!important}
.card .ph{overflow:hidden!important;flex-shrink:0}
/* Text always wraps correctly */
.card p,.why p,.fmt p,.office p,.stage-body p,.card h3,.card h2,.why h4,.fmt h4{
  word-break:break-word!important;overflow-wrap:break-word!important;
  white-space:normal!important;overflow:visible!important
}
.card h3,.card h2,.why h4,.fmt h4{hyphens:auto}
/* .bd fills remaining space so all cards in a row stretch equal */
.card .bd{
  overflow:visible!important;flex:1!important;display:flex!important;flex-direction:column!important;
  padding:clamp(18px,2vw,28px) clamp(18px,2vw,28px) clamp(20px,2.2vw,30px)!important;
  min-height:0!important
}
.card ul{overflow:visible!important}
.card li{white-space:normal!important;word-break:break-word!important}
/* Grid — always stretch cards to equal height */
.grid{display:grid!important;gap:clamp(16px,2vw,28px)!important;align-items:stretch!important}
.g3{grid-template-columns:repeat(3,1fr)!important}
.g2{grid-template-columns:repeat(2,1fr)!important}
@media(max-width:920px){
  .g3{grid-template-columns:repeat(2,1fr)!important}
}
@media(max-width:600px){
  .g3,.g2{grid-template-columns:1fr!important}
}

/* ── PARTNER CARDS (partners.html) ──────────────────────────────────────── */
.partner-item{text-align:center!important;align-items:center!important}
.partner-logo-ph{
  width:100%!important;display:flex!important;align-items:center!important;justify-content:center!important;
  padding:clamp(20px,2.5vw,36px) clamp(16px,2vw,28px) clamp(14px,1.6vw,20px)!important;
  border-bottom:1px solid var(--line)!important;flex-shrink:0!important;
  min-height:clamp(90px,9vw,140px)!important
}
.partner-logo-ph img{
  max-height:clamp(44px,4.5vw,72px)!important;max-width:clamp(120px,14vw,200px)!important;
  width:auto!important;object-fit:contain!important;
  image-rendering:-webkit-optimize-contrast;
  filter:grayscale(10%) brightness(1.02)!important
}
.partner-item:hover .partner-logo-ph img{filter:grayscale(0%) brightness(1.05)!important}
.partner-item .bd{text-align:left!important;align-items:flex-start!important}

/* ── FOUNDER BAND ─────────────────────────────────────────────────────── */
.founder-band{background:linear-gradient(135deg,#07313b 0%,#0b4d5c 40%,#0B8793 100%)!important;color:#fff!important}
.founder-hero{text-align:center;padding:clamp(20px,3vw,48px) 0 0}
.founder-badge{margin-bottom:clamp(10px,1.5vw,18px)}
.founder-band h2{font-size:clamp(36px,5.5vw,110px)!important;color:#fff!important;letter-spacing:-.03em;line-height:.95;margin-bottom:12px}
.founder-tag{font-family:'Fraunces',serif;font-style:italic;font-size:clamp(18px,2.2vw,38px);color:rgba(255,255,255,.75);margin-bottom:clamp(14px,2vw,28px)}
.founder-band .lead{color:rgba(255,255,255,.82)!important;max-width:72ch;margin:0 auto}
.founder-band .card{background:rgba(255,255,255,.09)!important;border:1px solid rgba(255,255,255,.18)!important;color:#fff!important}
.founder-band .card h3{color:#fff!important}
.founder-band .card p{color:rgba(255,255,255,.78)!important}
.founder-band .card .k{color:rgba(255,255,255,.6)!important}

/* btn unified above */

/* ── PARTNER LOGOS — HD sharp rendering ───────────────────────────────── */
.partner-logo-wrap,.partner-logo,.part-logo{
  display:flex!important;align-items:center!important;justify-content:center!important;
  padding:clamp(16px,2vw,28px)!important;
}
.partner-logo-wrap img,.partner-logo img,.part-logo img,.partner img{
  width:auto!important;max-width:clamp(100px,14vw,200px)!important;
  height:clamp(36px,4.5vw,64px)!important;
  object-fit:contain!important;object-position:center!important;
  image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;
  filter:none!important;mix-blend-mode:multiply!important;
}
/* Partner cards uniform height */
.partner-card,.part-card{
  display:flex!important;flex-direction:column!important;align-items:center!important;
  justify-content:center!important;min-height:clamp(110px,12vw,180px)!important;
  padding:clamp(20px,2.5vw,36px) clamp(16px,2vw,28px)!important;
  text-align:center!important;
}
.partner-card h4,.part-card h4{margin-top:clamp(10px,1.2vw,16px)!important;font-size:clamp(13px,.9vw,16px)!important}
.partner-card p,.part-card p{font-size:clamp(12px,.78vw,14px)!important;margin-top:6px!important}

/* Shop SVG product images */
.prod-img img[src$=".svg"]{
  width:100%!important;height:100%!important;object-fit:cover!important;
  background:#0d1f26;
}

/* ── CAREERS FORM ─────────────────────────────────────────────────────── */
.career-form-wrap{max-width:860px;margin:0 auto;background:#fff;border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--shadow-lg);overflow:hidden}
.career-intro{background:var(--grad-hero);padding:clamp(28px,4vw,56px) clamp(24px,3.5vw,48px);border-bottom:1px solid var(--line)}
.career-intro h2{font-size:clamp(24px,3.2vw,56px)!important;margin-top:12px}
.career-form{padding:clamp(24px,3.5vw,48px)}
.cf-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.upload-field{margin-top:4px}
.upload-box{position:relative;border:2px dashed var(--line);border-radius:12px;transition:border-color .2s,background .2s;cursor:pointer;overflow:hidden}
.upload-box:hover{border-color:var(--teal);background:rgba(11,135,147,.04)}
.upload-box input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.upload-ui{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:clamp(20px,3vw,36px);pointer-events:none}
.upload-ui svg{color:var(--teal);opacity:.7}
.upload-lbl{font-weight:600;color:var(--teal);font-size:clamp(13px,.88vw,15px)}
.upload-hint{font-size:clamp(11px,.72vw,12.5px);color:var(--muted-2)}
@media(max-width:640px){.cf-grid{grid-template-columns:1fr}}

/* ── ENHANCED MARQUEE WITH ANIMATION ─────────────────────────────────── */
.logo-marquee{position:relative;overflow:hidden;padding:clamp(18px,2.5vw,32px) 0}
.logo-marquee::before,.logo-marquee::after{
  content:'';position:absolute;top:0;bottom:0;width:clamp(60px,8vw,140px);z-index:2;pointer-events:none
}
.logo-marquee::before{left:0;background:linear-gradient(90deg,#fff 0%,transparent 100%)}
.logo-marquee::after{right:0;background:linear-gradient(270deg,#fff 0%,transparent 100%)}
.marquee-label{
  text-align:center;font-family:"Sora",sans-serif;font-weight:700;
  font-size:clamp(9px,.65vw,11px);letter-spacing:.22em;text-transform:uppercase;
  color:var(--teal)!important;margin-bottom:clamp(10px,1.2vw,18px);opacity:.7
}
.logo-track{
  display:flex;align-items:center;gap:clamp(24px,3.5vw,60px);
  width:max-content;
  animation:scrollLeft 28s linear infinite
}
.logo-track-rev{
  animation:scrollRight 32s linear infinite
}
.logo-track:hover,.logo-track-rev:hover{ animation-play-state:paused }
@keyframes scrollLeft{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
@keyframes scrollRight{
  0%{transform:translateX(-50%)}
  100%{transform:translateX(0)}
}

/* Partner logo cards */
.partner-logo{
  display:flex!important;flex-direction:column;align-items:center;gap:8px;
  padding:clamp(14px,1.8vw,22px) clamp(18px,2.5vw,36px)!important;
  background:#fff;border:1px solid var(--line);border-radius:16px;
  box-shadow:0 4px 20px rgba(7,49,59,.06);
  transition:transform .3s var(--ease),box-shadow .3s,border-color .25s;
  min-width:clamp(110px,12vw,175px);text-decoration:none!important
}
.partner-logo:hover{
  transform:translateY(-6px) scale(1.04);
  box-shadow:0 16px 48px rgba(11,135,147,.18)!important;
  border-color:var(--teal)!important
}
.partner-logo img{
  height:clamp(32px,3.2vw,52px)!important;width:auto!important;max-width:140px!important;
  object-fit:contain;filter:grayscale(20%);transition:filter .3s;
  image-rendering:-webkit-optimize-contrast
}
.partner-logo:hover img{ filter:grayscale(0%) }
.partner-logo span{
  font-family:"Sora",sans-serif;font-weight:600;
  font-size:clamp(9px,.65vw,11px);color:var(--muted-2)!important;
  letter-spacing:.08em;white-space:nowrap
}

/* Customer logo cards — glassy effect */
.customer-marquee{ margin-top:0;border-top:1px solid var(--line) }
.customer-logo{
  display:flex!important;flex-direction:column;align-items:center;gap:8px;
  padding:clamp(14px,1.8vw,22px) clamp(18px,2.5vw,36px)!important;
  background:linear-gradient(135deg,rgba(11,135,147,.06) 0%,rgba(240,100,50,.04) 100%);
  border:1px solid rgba(11,135,147,.15);border-radius:16px;
  box-shadow:0 4px 20px rgba(7,49,59,.05);
  transition:transform .3s var(--ease),box-shadow .3s,border-color .25s;
  min-width:clamp(120px,13vw,190px);
  animation:popIn .5s var(--ease) both
}
.customer-logo:hover{
  transform:translateY(-6px) scale(1.04);
  box-shadow:0 18px 52px rgba(240,100,50,.16)!important;
  border-color:rgba(240,100,50,.4)!important
}
.customer-logo img{
  height:clamp(36px,3.8vw,58px)!important;width:auto!important;max-width:160px!important;
  object-fit:contain;transition:transform .3s
}
.customer-logo:hover img{ transform:scale(1.06) }
.customer-logo span{
  font-family:"Sora",sans-serif;font-weight:700;
  font-size:clamp(9px,.68vw,11.5px);color:var(--ink)!important;
  letter-spacing:.06em;white-space:nowrap
}
@keyframes popIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}

/* Nav ghost CTA — secondary variant */
.nav-cta-ghost{
  background:transparent!important;
  color:var(--teal)!important;
  box-shadow:none!important;
  border:1.5px solid var(--teal)!important;
  padding:10px clamp(14px,1.3vw,26px)!important;
}
.nav-cta-ghost:hover{background:rgba(11,135,147,.08)!important}
body[data-page="index"] .nav-cta-ghost{color:rgba(255,255,255,.85)!important;border-color:rgba(255,255,255,.4)!important}
body[data-page="index"] .nav-cta-ghost:hover{background:rgba(255,255,255,.08)!important}

/* Homepage header — always dark (not transparent) so nav links always visible */
body[data-page="index"] header{
  background:rgba(8,10,14,.82)!important;
  backdrop-filter:blur(16px)!important;
  -webkit-backdrop-filter:blur(16px)!important;
  border-bottom:1px solid rgba(255,255,255,.07)!important;
}

/* About page — card text alignment */
body[data-page="about"] .card{text-align:center!important}
body[data-page="about"] .card .k{display:block;margin:0 auto 10px}
body[data-page="about"] .card h3{margin-bottom:10px}
body[data-page="about"] .grid.g3{align-items:stretch}
body[data-page="about"] .founder-hero{text-align:center!important;max-width:820px;margin:0 auto}
body[data-page="about"] .founder-hero .lead{text-align:left!important}

/* ─── Homepage card fixes ─────────────────────────────── */
/* Format cards (fmt-grid) — 4-col on desktop, 2-col tablet, 1-col mobile */
body[data-page="index"] .fmt-grid{
  display:grid!important;
  grid-template-columns:repeat(4,1fr)!important;
  gap:clamp(14px,1.8vw,24px)!important;
}
body[data-page="index"] .fmt{
  padding:clamp(20px,2.4vw,34px)!important;
  border-radius:18px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:10px!important;
  height:100%!important;
  min-height:200px!important;
}
body[data-page="index"] .fmt .ic{
  width:48px!important;height:48px!important;
  flex-shrink:0!important;
  margin-bottom:4px!important;
}
body[data-page="index"] .fmt h4{
  font-size:clamp(13px,1vw,16px)!important;
  line-height:1.3!important;
  margin:0!important;
}
body[data-page="index"] .fmt p{
  font-size:clamp(11.5px,.78vw,13.5px)!important;
  line-height:1.6!important;
  color:var(--muted)!important;
  margin:0!important;
}

/* Capability cards (cap-grid) — images must show fully */
body[data-page="index"] .cap-grid{
  display:grid!important;
  grid-template-columns:repeat(3,1fr)!important;
  gap:clamp(14px,1.8vw,24px)!important;
}
body[data-page="index"] .cap{
  border-radius:18px!important;
  overflow:hidden!important;
  aspect-ratio:4/3!important;
  position:relative!important;
  display:block!important;
  text-decoration:none!important;
}
body[data-page="index"] .cap img{
  width:100%!important;height:100%!important;
  object-fit:cover!important;
  opacity:1!important;
  transition:transform .5s ease,opacity .3s!important;
  filter:brightness(1.05) saturate(1.15)!important;
}
body[data-page="index"] .cap:hover img{
  transform:scale(1.06)!important;
  opacity:.88!important;
}
body[data-page="index"] .cap::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background:linear-gradient(0deg,rgba(4,30,38,.82) 0%,rgba(4,30,38,0) 52%)!important;
  z-index:1!important;
}
body[data-page="index"] .cap .c-in{
  position:absolute!important;
  bottom:0!important;left:0!important;right:0!important;
  padding:clamp(14px,1.8vw,22px)!important;
  z-index:2!important;
}
body[data-page="index"] .cap .c-in h4{
  color:#fff!important;
  font-size:clamp(14px,1.1vw,18px)!important;
  margin-bottom:4px!important;
}
body[data-page="index"] .cap .c-in p{
  color:rgba(255,255,255,.78)!important;
  font-size:clamp(11.5px,.78vw,13px)!important;
  margin:0!important;
}
body[data-page="index"] .cap .tag{
  font-size:clamp(10px,.68vw,12px)!important;
  font-weight:700!important;
  letter-spacing:.08em!important;
  color:var(--orange)!important;
  text-transform:uppercase!important;
  margin-bottom:4px!important;
  display:block!important;
}

/* Machine ribbon photos */
body[data-page="index"] .machine-ribbon{
  display:grid!important;
  grid-template-columns:2fr 1fr 1fr 1fr 1fr!important;
  gap:clamp(8px,1vw,16px)!important;
  margin-top:clamp(28px,3.5vw,48px)!important;
  border-radius:18px!important;
  overflow:hidden!important;
}
body[data-page="index"] .machine-shot{
  position:relative!important;
  aspect-ratio:3/4!important;
  overflow:hidden!important;
  border-radius:14px!important;
}
body[data-page="index"] .machine-shot.big{aspect-ratio:3/5!important}
body[data-page="index"] .machine-shot img{
  width:100%!important;height:100%!important;
  object-fit:cover!important;
  filter:brightness(1.08) saturate(1.2)!important;
  transition:transform .5s ease!important;
}
body[data-page="index"] .machine-shot:hover img{transform:scale(1.06)!important}
body[data-page="index"] .machine-shot span{
  position:absolute!important;
  bottom:0!important;left:0!important;right:0!important;
  background:linear-gradient(0deg,rgba(4,30,38,.85) 0%,transparent 100%)!important;
  color:#fff!important;
  font-size:clamp(10px,.7vw,12.5px)!important;
  font-weight:700!important;
  padding:clamp(8px,1vw,14px)!important;
  text-transform:uppercase!important;
  letter-spacing:.06em!important;
}

/* Responsive: tablet */
@media(max-width:900px){
  body[data-page="index"] .fmt-grid{grid-template-columns:repeat(2,1fr)!important}
  body[data-page="index"] .cap-grid{grid-template-columns:repeat(2,1fr)!important}
  body[data-page="index"] .machine-ribbon{grid-template-columns:1fr 1fr!important}
  body[data-page="index"] .machine-shot.big{aspect-ratio:16/9!important;grid-column:span 2}
}
@media(max-width:560px){
  body[data-page="index"] .fmt-grid{grid-template-columns:1fr!important}
  body[data-page="index"] .cap-grid{grid-template-columns:1fr!important}
  body[data-page="index"] .machine-ribbon{grid-template-columns:1fr!important}
}

/* ─── Format card images ──────────────────────────────── */
body[data-page="index"] .fmt{
  justify-content:flex-start!important;
}
body[data-page="index"] .fmt-img{
  width:100%!important;
  margin-top:auto!important;
  padding-top:14px!important;
  border-radius:10px!important;
  overflow:hidden!important;
  aspect-ratio:16/9!important;
}
body[data-page="index"] .fmt-img img{
  width:100%!important;height:100%!important;
  object-fit:cover!important;
  border-radius:10px!important;
  filter:brightness(1.05) saturate(1.15)!important;
  transition:transform .5s ease!important;
  display:block!important;
}
body[data-page="index"] .fmt:hover .fmt-img img{
  transform:scale(1.05)!important;
}

/* ─── Why gallery strip ───────────────────────────────── */
body[data-page="index"] .why-gallery{
  display:grid!important;
  grid-template-columns:repeat(6,1fr)!important;
  gap:clamp(8px,.9vw,14px)!important;
  margin-top:clamp(40px,5vw,64px)!important;
  border-radius:18px!important;
  overflow:hidden!important;
}
body[data-page="index"] .wg-item{
  position:relative!important;
  aspect-ratio:3/4!important;
  overflow:hidden!important;
  border-radius:12px!important;
  cursor:default!important;
}
body[data-page="index"] .wg-item img{
  width:100%!important;height:100%!important;
  object-fit:cover!important;
  filter:brightness(1.06) saturate(1.2)!important;
  transition:transform .55s ease!important;
  display:block!important;
}
body[data-page="index"] .wg-item:hover img{
  transform:scale(1.08)!important;
}
body[data-page="index"] .wg-item span{
  position:absolute!important;
  bottom:0!important;left:0!important;right:0!important;
  background:linear-gradient(0deg,rgba(4,30,38,.86) 0%,transparent 100%)!important;
  color:#fff!important;
  font-size:clamp(9px,.65vw,11.5px)!important;
  font-weight:700!important;
  padding:clamp(8px,.9vw,12px) clamp(6px,.7vw,10px)!important;
  text-transform:uppercase!important;
  letter-spacing:.05em!important;
}
@media(max-width:900px){
  body[data-page="index"] .why-gallery{grid-template-columns:repeat(3,1fr)!important}
}
@media(max-width:560px){
  body[data-page="index"] .why-gallery{grid-template-columns:repeat(2,1fr)!important}
}

/* Hero video — crystal clear, minimal scrim */
body[data-page="index"] .hero-scrim{background:linear-gradient(90deg,rgba(4,6,8,.68) 0%,rgba(4,6,8,.35) 50%,rgba(4,6,8,.08) 100%),linear-gradient(0deg,rgba(4,6,8,.65) 0%,rgba(4,6,8,0) 35%)!important}

/* ── WHY RADIANCE + CAREERS: cards have no .bd wrapper — pad + align ALL screens ── */
body[data-page="why-radiance"] .card,
body[data-page="careers"] .card{
  padding:clamp(20px,2.5vw,32px)!important;
  text-align:left!important;
  align-items:flex-start!important;
}
body[data-page="why-radiance"] .card .k,
body[data-page="careers"] .card .k{
  display:block!important;
  text-align:left!important;
  margin:0 0 8px 0!important;
}
body[data-page="why-radiance"] .card h3,
body[data-page="careers"] .card h3{
  text-align:left!important;
  margin:0 0 12px 0!important;
  color:var(--ink)!important;
}
body[data-page="why-radiance"] .card p,
body[data-page="careers"] .card p{
  text-align:left!important;
  margin:0!important;
  color:var(--muted)!important;
}


/* ═══════════════════════════════════════════════════════
   HOMEPAGE — hero text, scrim, and all card sections
   ═══════════════════════════════════════════════════════ */

/* ── Hero scrim: just enough to read text, video stays vivid ── */
body[data-page="index"] .hero-scrim{
  background:
    linear-gradient(90deg,rgba(2,4,6,.78) 0%,rgba(2,4,6,.44) 42%,rgba(2,4,6,.06) 100%),
    linear-gradient(0deg,rgba(2,4,6,.72) 0%,rgba(2,4,6,0) 36%)!important;
}

/* ── Hero headline — gold/amber with strong text shadow ── */
body[data-page="index"] .hero h1{
  color:#fff!important;
  text-shadow:0 2px 32px rgba(0,0,0,.9),0 1px 8px rgba(0,0,0,.8)!important;
  font-weight:800!important;
}
body[data-page="index"] .hero h1 .em{
  color:#f4c430!important;
  text-shadow:0 0 40px rgba(244,196,48,.55),0 2px 24px rgba(0,0,0,.9)!important;
}
body[data-page="index"] .hero .eyebrow{
  color:#f4c430!important;
  text-shadow:0 1px 12px rgba(0,0,0,.8)!important;
  letter-spacing:.18em!important;
  font-weight:700!important;
}
body[data-page="index"] .hero .sub{
  color:rgba(255,255,255,.92)!important;
  text-shadow:0 1px 18px rgba(0,0,0,.85)!important;
  font-size:clamp(15px,1.5vw,18px)!important;
  line-height:1.7!important;
  max-width:54ch!important;
}
/* Stats row text */
body[data-page="index"] .hero-stats .s .n{
  color:#fff!important;
  text-shadow:0 2px 12px rgba(0,0,0,.7)!important;
}
body[data-page="index"] .hero-stats .s .l{
  color:rgba(255,255,255,.72)!important;
}
body[data-page="index"] .hero-stats{
  border-top-color:rgba(255,255,255,.18)!important;
}
/* Stat boxes transparent — numbers float on dark hero video */
body[data-page="index"] .hero-stats .s{
  background:transparent!important;
  border:none!important;
  box-shadow:none!important;
  border-radius:0!important;
}

/* ── FORMAT CARDS (fmt-grid) — consistent height, all text visible ── */
body[data-page="index"] .fmt-grid{
  display:grid!important;
  grid-template-columns:repeat(4,1fr)!important;
  gap:20px!important;
  align-items:stretch!important;
}
body[data-page="index"] .fmt{
  display:flex!important;
  flex-direction:column!important;
  gap:0!important;
  padding:24px 22px 20px!important;
  border-radius:16px!important;
  height:100%!important;
  box-sizing:border-box!important;
}
body[data-page="index"] .fmt .ic{
  width:44px!important;height:44px!important;
  flex-shrink:0!important;
  margin-bottom:12px!important;
  color:#0f7f8f!important;
}
body[data-page="index"] .fmt h4{
  font-size:15px!important;
  font-weight:700!important;
  line-height:1.3!important;
  margin:0 0 8px!important;
  color:#0d3440!important;
}
body[data-page="index"] .fmt p{
  font-size:13px!important;
  line-height:1.6!important;
  color:#5e737b!important;
  margin:0 0 14px!important;
  flex-grow:1!important;
}
body[data-page="index"] .fmt-img{
  width:100%!important;
  border-radius:10px!important;
  overflow:hidden!important;
  aspect-ratio:16/9!important;
  margin-top:auto!important;
  flex-shrink:0!important;
}
body[data-page="index"] .fmt-img img{
  width:100%!important;height:100%!important;
  object-fit:cover!important;
  display:block!important;
  border-radius:10px!important;
  filter:brightness(1.06) saturate(1.15)!important;
  transition:transform .5s ease!important;
}
body[data-page="index"] .fmt:hover .fmt-img img{transform:scale(1.05)!important}

/* ── CAPABILITY CARDS (cap-grid) ── */
body[data-page="index"] .cap-grid{
  display:grid!important;
  grid-template-columns:repeat(3,1fr)!important;
  gap:20px!important;
}
body[data-page="index"] .cap{
  border-radius:16px!important;
  overflow:hidden!important;
  min-height:320px!important;
  aspect-ratio:unset!important;
  display:flex!important;
  align-items:flex-end!important;
  border:none!important;
  position:relative!important;
}
body[data-page="index"] .cap img{
  position:absolute!important;inset:0!important;
  width:100%!important;height:100%!important;
  object-fit:cover!important;
  opacity:1!important;
  filter:brightness(1.05) saturate(1.2)!important;
  transition:transform .5s ease,opacity .3s!important;
}
body[data-page="index"] .cap::after{
  content:""!important;
  position:absolute!important;inset:0!important;
  background:linear-gradient(0deg,rgba(3,18,24,.88) 0%,rgba(3,18,24,.22) 55%,rgba(3,18,24,0) 100%)!important;
  z-index:1!important;
}
body[data-page="index"] .cap:hover img{transform:scale(1.06)!important;opacity:.9!important}
body[data-page="index"] .cap .c-in{
  position:relative!important;z-index:2!important;
  padding:22px!important;
  width:100%!important;
}
body[data-page="index"] .cap .tag{
  display:block!important;
  font-family:"Sora",sans-serif!important;
  font-size:10.5px!important;font-weight:700!important;
  letter-spacing:.14em!important;text-transform:uppercase!important;
  color:#f4c430!important;
  margin-bottom:6px!important;
}
body[data-page="index"] .cap h4{
  color:#fff!important;
  font-size:18px!important;font-weight:700!important;
  margin-bottom:6px!important;
  text-shadow:0 1px 8px rgba(0,0,0,.6)!important;
}
body[data-page="index"] .cap p{
  color:rgba(255,255,255,.78)!important;
  font-size:13px!important;line-height:1.55!important;
  margin:0!important;
}

/* ── WHY RADIANCE CARDS (why-grid) ── */
body[data-page="index"] .why-grid{
  display:grid!important;
  grid-template-columns:repeat(3,1fr)!important;
  gap:22px!important;
  align-items:stretch!important;
}
body[data-page="index"] .why{
  display:flex!important;flex-direction:column!important;
  padding:28px 26px!important;
  border-radius:16px!important;
  height:100%!important;box-sizing:border-box!important;
  text-align:left!important;
}
body[data-page="index"] .why .ic{
  width:48px!important;height:48px!important;
  border-radius:12px!important;
  display:grid!important;place-items:center!important;
  background:rgba(15,127,143,.12)!important;
  border:1.5px solid rgba(15,127,143,.25)!important;
  margin-bottom:16px!important;
  flex-shrink:0!important;
  color:#0f7f8f!important;
}
body[data-page="index"] .why h4{
  font-size:16px!important;font-weight:700!important;
  margin:0 0 10px!important;color:#0d3440!important;
  line-height:1.3!important;
}
body[data-page="index"] .why p{
  font-size:13.5px!important;line-height:1.65!important;
  color:#5e737b!important;margin:0!important;
}

/* ── WHY GALLERY STRIP ── */
body[data-page="index"] .why-gallery{
  display:grid!important;
  grid-template-columns:repeat(6,1fr)!important;
  gap:12px!important;
  margin-top:48px!important;
}
body[data-page="index"] .wg-item{
  position:relative!important;aspect-ratio:3/4!important;
  overflow:hidden!important;border-radius:12px!important;
}
body[data-page="index"] .wg-item img{
  width:100%!important;height:100%!important;
  object-fit:cover!important;
  filter:brightness(1.06) saturate(1.2)!important;
  transition:transform .55s ease!important;display:block!important;
}
body[data-page="index"] .wg-item:hover img{transform:scale(1.08)!important}
body[data-page="index"] .wg-item span{
  position:absolute!important;bottom:0!important;left:0!important;right:0!important;
  background:linear-gradient(0deg,rgba(3,18,24,.85) 0%,transparent 100%)!important;
  color:#fff!important;font-size:10px!important;font-weight:700!important;
  padding:10px 8px!important;text-transform:uppercase!important;letter-spacing:.05em!important;
}

/* ── MACHINE RIBBON ── */
body[data-page="index"] .machine-ribbon{
  display:grid!important;
  grid-template-columns:2fr 1fr 1fr 1fr 1fr!important;
  gap:12px!important;
  margin-top:40px!important;
  border-radius:0!important;overflow:visible!important;
}
body[data-page="index"] .machine-shot{
  position:relative!important;
  aspect-ratio:2/3!important;
  overflow:hidden!important;
  border-radius:14px!important;
}
body[data-page="index"] .machine-shot.big{aspect-ratio:3/4!important}
body[data-page="index"] .machine-shot img{
  width:100%!important;height:100%!important;
  object-fit:cover!important;
  filter:brightness(1.08) saturate(1.2)!important;
  transition:transform .5s ease!important;display:block!important;
}
body[data-page="index"] .machine-shot:hover img{transform:scale(1.06)!important}
body[data-page="index"] .machine-shot span{
  position:absolute!important;bottom:0!important;left:0!important;right:0!important;
  background:linear-gradient(0deg,rgba(3,18,24,.88) 0%,transparent 100%)!important;
  color:#fff!important;font-size:10px!important;font-weight:700!important;
  padding:12px 10px!important;text-transform:uppercase!important;letter-spacing:.06em!important;
}

/* ── STAGE CARDS (line stages) ── */
body[data-page="index"] .stage{
  gap:clamp(28px,4vw,54px)!important;
  padding:clamp(36px,4.5vw,64px) 0!important;
}
body[data-page="index"] .stage-body h3{
  color:#0d3440!important;font-size:clamp(20px,2.5vw,32px)!important;
  margin-bottom:12px!important;
}
body[data-page="index"] .stage-body .lead{
  color:#5e737b!important;font-size:15.5px!important;line-height:1.7!important;
  margin-bottom:20px!important;
}
body[data-page="index"] .chip{
  background:#eef9fb!important;
  border-color:rgba(15,127,143,.2)!important;
  color:#0f7f8f!important;
  font-weight:600!important;
}
body[data-page="index"] .chip:hover{
  background:#0f7f8f!important;color:#fff!important;
  border-color:#0f7f8f!important;
}

/* ─

/* ═══════════════════════════════════════════════════════════════════
   MOBILE DRAWER — body-level, escapes header stacking context
   Only active on ≤920px — desktop/laptop/4K completely unaffected
   ═══════════════════════════════════════════════════════════════════ */
#rdrawer-ov{
  position:fixed;inset:0;
  background:rgba(0,0,0,.6);
  z-index:9800;
  opacity:0;pointer-events:none;
  transition:opacity .32s ease;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
#rdrawer-ov.open{opacity:1;pointer-events:all}

#rdrawer{
  position:fixed;top:0;right:0;bottom:0;
  width:min(300px,84vw);
  background:linear-gradient(170deg,#071e28 0%,#0a4a57 55%,#0f7f8f 100%);
  z-index:9900;
  display:flex;flex-direction:column;
  transform:translateX(110%);
  visibility:hidden;pointer-events:none;
  transition:transform .34s cubic-bezier(.22,.61,.36,1),
             visibility .34s,
             pointer-events .34s;
  overflow-y:auto;overflow-x:hidden;
  box-shadow:-16px 0 60px rgba(0,0,0,.45);
  border-left:1px solid rgba(255,255,255,.08);
}
#rdrawer.open{
  transform:translateX(0);
  visibility:visible;
  pointer-events:all;
}

/* Hide drawer on desktop — no interference with laptop/projector/4K */
@media(min-width:921px){
  #rdrawer,#rdrawer-ov{display:none!important}
}

.rd-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 20px 16px;
  border-bottom:1px solid rgba(255,255,255,.1);
  flex-shrink:0;
}
.rd-logo{
  height:32px;width:auto;
  filter:brightness(1.1);
}
.rd-close{
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s,transform .25s;
  flex-shrink:0;outline:none;
}
.rd-close:hover,.rd-close:focus{
  background:rgba(255,255,255,.22);
  transform:rotate(90deg);
}

.rd-nav{
  display:flex;flex-direction:column;
  padding:8px 0;flex:1;
}
.rd-nav a{
  display:flex;align-items:center;
  padding:14px 22px;
  color:rgba(255,255,255,.88)!important;
  font-family:"Sora",sans-serif;font-weight:600;font-size:15px;
  text-decoration:none!important;
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:background .18s,color .18s,padding-left .18s;
  letter-spacing:.01em;
}
.rd-nav a:hover,.rd-nav a:focus{
  background:rgba(255,255,255,.09);
  color:#fff!important;
  padding-left:30px;
}

.rd-foot{
  padding:20px;
  display:flex;flex-direction:column;gap:10px;
  border-top:1px solid rgba(255,255,255,.1);
  flex-shrink:0;
}
.rd-cta{
  display:block;text-align:center;
  padding:13px;border-radius:100px;
  font-family:"Sora",sans-serif;font-weight:700;font-size:14px;
  text-decoration:none!important;
  background:linear-gradient(135deg,#f06432 0%,#c83d4f 100%);
  color:#fff!important;
  transition:box-shadow .25s,transform .2s;
}
.rd-cta:hover{
  box-shadow:0 8px 28px rgba(240,100,50,.45);
  transform:translateY(-1px);
}
.rd-cta-ghost{
  background:rgba(255,255,255,.08)!important;
  border:1px solid rgba(255,255,255,.22)!important;
  color:rgba(255,255,255,.88)!important;
}
.rd-cta-ghost:hover{
  background:rgba(255,255,255,.15)!important;
  box-shadow:none!important;
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE FIXES — all inside ≤920px so laptop/desktop/4K untouched
   ═══════════════════════════════════════════════════════════════════ */
@media(max-width:920px){

  /* ── nav-right: prevent overflow on small screens ── */
  .nav-right{
    gap:6px!important;
    flex-shrink:0!important;
  }
  /* Hide Enquire button on mobile — shown in drawer footer */
  .nav-right .nav-cta,
  .nav-right a.nav-cta,
  .nav-right .btn-ghost.open-modal,
  .nav-right a.btn-ghost:not(.nav-search-pill){
    display:none!important;
  }
  /* Keep search pill compact — icon only */
  .search-pill-txt{
    display:none!important;
  }
  .nav-search-pill{
    width:38px!important;min-width:38px!important;
    padding:0!important;
    justify-content:center!important;
    border-radius:50%!important;
  }

  /* ── Reveal threshold: lower so cards near viewport edge fire ── */
  /* (JS uses 0.12 — we ensure transforms start at 0 for stacked cards) */
  .reveal{
    transform:translateY(18px)!important;
  }
  .reveal.in{
    transform:none!important;
  }

  /* ── Partner-band: fix text z-index above marquee gradients ── */
  .partner-head{position:relative!important;z-index:3!important}
  .marquee-label{position:relative!important;z-index:3!important}
  .logo-marquee::before,.logo-marquee::after{z-index:2!important}

  /* ── Trusted-by / statband text ── */
  .statband{overflow:visible!important}
  .statband .wrap{position:relative!important;z-index:2!important}

  /* ── Contact grid: single column, readable address ── */
  .contact-grid{
    grid-template-columns:1fr!important;
    gap:20px!important;
  }
  .office .addr{color:var(--ink)!important;font-size:14px!important}
  .office .meta{font-size:13px!important}
  .office .meta a{color:var(--teal)!important}
  .office{margin-bottom:12px!important;padding:16px 18px!important}

  /* ── Cards without .bd: add padding so text has breathing room ── */
  .grid .card:not(:has(>.ph)):not(:has(>.bd)){
    padding:20px!important;
  }
  /* Fallback for browsers without :has() */
  .card>span.k:first-child,
  .card>h3:first-child,
  .card>h4:first-child{
    /* These cards have content directly in .card — ensure left alignment */
    text-align:left!important;
  }
  .card{
    text-align:left!important;
  }
  /* Why Radiance & Careers: cards use span.k + h3 + p directly */
  body[data-page="why-radiance"] .card,
  body[data-page="careers"] .card{
    padding:20px!important;
    text-align:left!important;
  }
  body[data-page="why-radiance"] .card .k,
  body[data-page="careers"] .card .k{
    text-align:left!important;
    margin-left:0!important;
  }
  body[data-page="why-radiance"] .card h3,
  body[data-page="careers"] .card h3{
    text-align:left!important;
    font-size:18px!important;
  }
  body[data-page="why-radiance"] .card p,
  body[data-page="careers"] .card p{
    text-align:left!important;
    font-size:14px!important;
  }

  /* ── Packaging journey (stage) cards — single column ── */
  .stage{
    grid-template-columns:1fr!important;
    gap:20px!important;
    padding:clamp(28px,5vw,48px) 0!important;
    border-radius:16px!important;
    padding-left:0!important;padding-right:0!important;
  }
  .stage.flip .stage-media{order:0!important}
  .stage-body{
    padding:0 4px!important;
    text-align:left!important;
  }
  .stage-body h3{font-size:20px!important;margin-bottom:10px!important}
  .stage-body .lead{font-size:14.5px!important}
  .stage .chips{
    display:flex!important;flex-wrap:wrap!important;gap:6px!important;
  }

  /* ── fmt-grid (machine card grid) ── */
  .fmt-grid{grid-template-columns:repeat(2,1fr)!important}

  /* ── Industries sections cards above "Sectors We Serve" ── */
  .ind-grid,.ind-wrap{overflow:visible!important}

  /* ── Machine ribbon — responsive ── */
  body[data-page="index"] .machine-ribbon{
    grid-template-columns:1fr 1fr!important;
  }
  body[data-page="index"] .machine-shot.big{
    grid-column:1/-1!important;
    aspect-ratio:16/7!important;
  }

  /* ── Footer addresses ── */
  .foot-top{
    grid-template-columns:1fr!important;
    gap:24px!important;
  }
  .foot-bot{
    flex-direction:column!important;
    gap:6px!important;
    text-align:center!important;
  }
}

/* ── Small mobile ≤619px: portrait-specific ── */
@media(max-width:619px){

  /* Stat cards on hero — transparent, numbers visible */
  body[data-page="index"] .hero-stats .s{
    background:transparent!important;
    border:none!important;
    box-shadow:none!important;
    border-radius:0!important;
    padding:0 8px 0 0!important;
  }
  body[data-page="index"] .hero-stats{
    gap:18px 24px!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    padding-top:18px!important;
  }
  .hero-stats .s .n{color:#fff!important;font-size:clamp(22px,7vw,36px)!important}
  .hero-stats .s .l{color:rgba(255,255,255,.72)!important;font-size:11px!important}

  /* Hero CTA buttons — 2 per row */
  .hero-actions{
    flex-direction:row!important;
    flex-wrap:wrap!important;
    gap:8px!important;
  }
  .hero-actions .btn{
    flex:1 1 calc(50% - 4px)!important;
    min-width:120px!important;
    justify-content:center!important;
    font-size:13px!important;
    padding:12px 10px!important;
    min-height:44px!important;
  }
  /* Hide Shop and Ticket CTA on mobile portrait — too many buttons */
  .hero-actions .btn-shop,
  .hero-actions .btn-support{
    display:none!important;
  }

  /* fmt-grid single column on very small */
  .fmt-grid{grid-template-columns:1fr!important}

  /* Packaging journey text */
  .stage-body h3{font-size:18px!important}
  .stage-body .lead{font-size:14px!important}

  /* Card padding tighter */
  body[data-page="why-radiance"] .card,
  body[data-page="careers"] .card{
    padding:16px!important;
  }
  .grid.g3{grid-template-columns:1fr!important}

  /* Industries page caps */
  .cap-grid{grid-template-columns:1fr 1fr!important}

  /* Machine ribbon */
  body[data-page="index"] .machine-ribbon{
    grid-template-columns:1fr!important;
  }
  body[data-page="index"] .machine-shot.big{
    aspect-ratio:16/9!important;
  }
}

/* ── Landscape mobile ≤ 812px height < 500px ── */
@media(max-height:500px) and (max-width:920px){
  #rdrawer{
    flex-direction:row;flex-wrap:wrap;overflow-y:auto;
  }
  .rd-head{width:100%;border-bottom:1px solid rgba(255,255,255,.1)}
  .rd-nav{flex-direction:row;flex-wrap:wrap;padding:8px}
  .rd-nav a{
    padding:10px 14px;border-bottom:none;font-size:13px;
    border:1px solid rgba(255,255,255,.1);border-radius:100px;margin:4px;
  }
  .rd-nav a:hover{padding-left:14px}
  .rd-foot{flex-direction:row;padding:10px 14px;width:100%}
  .rd-cta{padding:10px 20px;flex:1}
}