/* ============================================================
   TOKENS
============================================================ */
:root{
  --navy:#2E3446;              /* Falcon logo slate-navy */
  --navy-900:#141823;
  --navy-800:#1C2130;
  --navy-700:#262C3D;
  --purple:#7C5CFF;
  --purple-lt:#A78BFF;
  --purple-deep:#5233D6;
  --ink:#1B1F2A;
  --muted:#6B7280;
  --line:#E5E7EF;
  --bg:#FFFFFF;
  --bg-soft:#F6F7FB;
  --ease:cubic-bezier(.16,1,.3,1);
  --maxw:1320px;
}
*{box-sizing:border-box;margin:0;padding:0}
/* clip, not hidden: hidden on the scroll container would break every
   position:sticky section on the site */
html{scroll-behavior:smooth;overflow-x:clip}
body{
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
button{font-family:inherit}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,4vw,48px)}

.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--purple)}
.eyebrow::before{content:"";width:4px;height:16px;border-radius:2px;background:currentColor}
.eyebrow.on-dark{color:var(--purple-lt)}
h2.section-title{font-size:clamp(2rem,3.9vw,3.25rem);font-weight:700;line-height:1.14;letter-spacing:-.02em;margin-top:18px}
.grad-text{background:linear-gradient(95deg,var(--purple),#3EC8B0);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{color:var(--muted);line-height:1.75;font-size:1.02rem}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:12px;padding:10px 26px 10px 10px;border-radius:999px;font-weight:500;font-size:.98rem;border:1px solid transparent;cursor:pointer;transition:transform .4s var(--ease),box-shadow .4s var(--ease),background-color .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease)}
.btn .ico{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--purple);color:#fff;transition:transform .4s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:hover .ico{transform:translateX(3px)}
.btn-solid{background:linear-gradient(120deg,var(--purple),var(--purple-deep));color:#fff;padding:13px 30px;box-shadow:0 12px 30px rgba(124,92,255,.32)}
.btn-solid:hover{box-shadow:0 18px 42px rgba(124,92,255,.45)}
.btn-ghost{border-color:rgba(255,255,255,.28);color:#fff;background:rgba(255,255,255,.07);backdrop-filter:blur(10px);padding:13px 30px}
.btn-ghost:hover{background:rgba(255,255,255,.16)}
.btn-outline{background:#fff;color:var(--ink);border-color:var(--line);padding:9px 24px 9px 9px;
  box-shadow:0 6px 18px rgba(43,20,112,.07)}
.btn-outline .ico{background:linear-gradient(120deg,var(--purple),var(--purple-deep));color:#fff}
.btn-outline:hover{border-color:var(--purple);color:var(--purple);box-shadow:0 12px 28px rgba(124,92,255,.18)}
.btn-pill-dark{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:#fff}
.btn-light{background:#fff;color:#3A1F9B;padding:9px 26px 9px 9px;box-shadow:0 10px 26px rgba(43,20,112,.18)}
.btn-light .ico{background:linear-gradient(120deg,var(--purple),var(--purple-deep))}
.btn-light:hover{box-shadow:0 16px 36px rgba(43,20,112,.26)}
.btn-pill-dark:hover{background:rgba(255,255,255,.16)}

/* ============================================================
   NAVBAR — transparent over hero, glass once scrolled
============================================================ */
.nav{position:fixed;inset:0 0 auto 0;z-index:90;transition:background-color .45s var(--ease),backdrop-filter .45s var(--ease),box-shadow .45s var(--ease)}
.nav::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(10,12,20,.66),rgba(10,12,20,0));transition:opacity .45s var(--ease)}
.nav.scrolled{background:rgba(255,255,255,.94);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);box-shadow:0 1px 0 rgba(20,24,35,.07),0 12px 34px rgba(20,24,35,.07)}
.nav.scrolled::before{opacity:0}
/* the utility row collapses away and the bar inverts to dark-on-white */
.nav.scrolled .nav-utility{height:0;opacity:0;pointer-events:none}
.nav.scrolled .nav-links > a,.nav.scrolled .nav-mega-trigger{color:var(--ink)}
.nav.scrolled .nav-links > a:hover,.nav.scrolled .nav-mega-trigger:hover{color:var(--purple)}
.nav.scrolled .nav-links > a::after,.nav.scrolled .nav-mega-trigger::after{background:var(--purple)}
.nav.scrolled .nav-burger span{background:var(--ink)}
.nav.scrolled .nav-logo .logo-light{opacity:0}
.nav.scrolled .nav-logo .logo-dark{opacity:1}
.nav-inner{position:relative;width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,4vw,48px)}
.nav-utility{display:flex;justify-content:flex-end;align-items:center;gap:24px;height:40px;overflow:hidden;font-size:.84rem;color:rgba(255,255,255,.8);transition:height .45s var(--ease),opacity .3s var(--ease)}
.nav-utility a{transition:color .3s}
.nav-utility a:hover{color:#fff}
.nav-utility .sep{width:1px;height:14px;background:rgba(255,255,255,.22)}
.nav-main{display:flex;align-items:center;justify-content:space-between;height:68px}
.nav-logo{position:relative;display:block;height:38px;flex:none}
.nav-logo img{height:38px;width:auto;transition:opacity .4s var(--ease)}
.nav-logo .logo-dark{position:absolute;inset:0;opacity:0}
.nav-links{display:flex;align-items:center;gap:clamp(20px,3vw,44px)}
.nav-links > a,.nav-mega-trigger{position:relative;color:#fff;font-size:1.02rem;padding:6px 0}
.nav-links > a::after,.nav-mega-trigger::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--purple-lt);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav-links > a:hover::after,.nav-mega-trigger:hover::after{transform:scaleX(1)}
.nav-cta{background:linear-gradient(120deg,var(--purple),var(--purple-deep));color:#fff;padding:11px 26px;border-radius:999px;font-size:.96rem;box-shadow:0 10px 26px rgba(124,92,255,.3);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(124,92,255,.45)}
.nav-burger{display:none;width:40px;height:40px;border:0;background:transparent;cursor:pointer;flex-direction:column;justify-content:center;align-items:flex-end;gap:6px}
.nav-burger span{display:block;height:2px;width:24px;background:#fff;border-radius:2px;transition:.35s var(--ease)}
.nav-burger span:nth-child(3){width:16px}
.nav-burger.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){width:24px;transform:translateY(-8px) rotate(-45deg)}

/* ============================================================
   HERO SLIDER
============================================================ */
.hero{position:relative;height:100svh;min-height:620px;overflow:hidden;background:var(--navy-900)}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 1.1s var(--ease),visibility 1.1s}
.slide.active{opacity:1;visibility:visible}
.slide-media{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.03);transition:transform 8s linear}
.slide.active .slide-media{transform:scale(1.13)}     /* slow Ken-Burns push-in */
/* opaque left panel hides the headline baked into the render and carries live text */
.slide-scrim{position:absolute;inset:0;background:linear-gradient(90deg,var(--navy-900) 0%,var(--navy-900) 38%,rgba(20,24,35,.86) 50%,rgba(20,24,35,.42) 64%,rgba(20,24,35,0) 78%)}
.slide-scrim::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,24,35,.55),transparent 30%,transparent 60%,rgba(20,24,35,.6))}
.slide-body{position:relative;z-index:3;height:100%;display:flex;align-items:center}
.slide-copy{max-width:640px;color:#fff}
.slide-copy h1{font-size:clamp(2.5rem,5.8vw,4.9rem);font-weight:700;line-height:1.05;letter-spacing:-.025em;margin:20px 0 18px}
.slide-copy h1 .thin{font-weight:300}
.slide-copy p{font-size:clamp(1rem,1.3vw,1.18rem);line-height:1.65;color:rgba(255,255,255,.78);max-width:470px;margin-bottom:34px}
.slide-copy>*{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.slide.active .slide-copy>*{opacity:1;transform:none}
.slide.active .slide-copy>*:nth-child(1){transition-delay:.20s}
.slide.active .slide-copy>*:nth-child(2){transition-delay:.32s}
.slide.active .slide-copy>*:nth-child(3){transition-delay:.44s}
.slide.active .slide-copy>*:nth-child(4){transition-delay:.56s}
.hero-arrow{position:absolute;top:50%;translate:0 -50%;z-index:6;width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);backdrop-filter:blur(8px);color:#fff;display:grid;place-items:center;cursor:pointer;transition:.35s var(--ease)}
.hero-arrow:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.5)}
.hero-arrow.prev{left:clamp(10px,2vw,28px)}
.hero-arrow.next{right:clamp(10px,2vw,28px)}
.hero-dots{position:absolute;left:50%;translate:-50% 0;bottom:40px;z-index:6;display:flex;gap:10px}
.hero-dots button{width:58px;height:3px;border:0;border-radius:2px;background:rgba(255,255,255,.3);cursor:pointer;padding:0;transition:background-color .4s}
.hero-dots button.on{background:#fff}

/* ============================================================
   SOLUTIONS — pinned scroll morph
============================================================ */
.sol-stage{position:relative;height:300vh;background:var(--bg)}
.sol-pin{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center;background:var(--bg)}
.sol-frame{position:absolute;inset:clamp(14px,2.4vw,34px);border-radius:28px;overflow:hidden;container-type:inline-size;background:linear-gradient(160deg,#F7F5FF,#EEF8F6 60%,#F9F7FF);will-change:transform,border-radius;transform-origin:center 58%;box-shadow:0 30px 80px rgba(20,24,35,.18)}
.sol-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;will-change:transform}
.sol-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,24,35,.14),rgba(20,24,35,0) 34%)}
/* glass card that scrolls up and dissolves */
.sol-card{position:relative;z-index:4;width:min(1180px,90vw);border-radius:26px;padding:clamp(34px,4.4vw,62px);background:linear-gradient(120deg,rgba(255,255,255,.93),rgba(246,247,251,.86));backdrop-filter:blur(26px) saturate(150%);-webkit-backdrop-filter:blur(26px) saturate(150%);border:1px solid rgba(255,255,255,.7);box-shadow:0 30px 80px rgba(20,24,35,.16);align-self:start;margin-top:clamp(70px,11vh,130px);will-change:transform,opacity}
.sol-card-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,60px);align-items:end}
.sol-card h2{font-size:clamp(1.8rem,3.4vw,3rem);font-weight:700;line-height:1.16;letter-spacing:-.02em;margin-top:16px}
.sol-scroll-hint{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:clamp(26px,4vh,48px);color:var(--purple);font-size:.92rem}
.mouse{width:24px;height:38px;border:1.6px solid var(--purple);border-radius:14px;position:relative}
.mouse::after{content:"";position:absolute;left:50%;top:7px;translate:-50% 0;width:3px;height:7px;border-radius:2px;background:var(--purple);animation:wheel 1.9s var(--ease) infinite}
@keyframes wheel{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,13px)}}
/* hotspots revealed once the image is open */
/* Pins are placed by JS in IMAGE coordinates (data-u / data-v), not frame percentages,
   so they stay glued to the product through the cover crop, the pan and the image scale.
   The dot sits 13px from the pill's trailing edge; .flip puts the pill on the other side
   when the anchor is too close to the left edge to fit it. */
.hotspot{position:absolute;left:0;top:0;z-index:5;display:flex;align-items:center;gap:8px;padding:0;
  border:0;background:transparent;cursor:pointer;opacity:0;scale:.86;
  translate:calc(-100% + 13px) -50%;transform-origin:calc(100% - 13px) center;
  will-change:opacity,scale}
.hotspot.flip{flex-direction:row-reverse;translate:-13px -50%;transform-origin:13px center}
.hotspot .hs-label{white-space:nowrap;font-size:.92rem;font-weight:500;color:var(--ink);background:rgba(255,255,255,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.85);border-radius:999px;padding:8px 17px;box-shadow:0 10px 26px rgba(20,24,35,.2)}
.hotspot .hs-dot{position:relative;flex:none;width:26px;height:26px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 4px 12px rgba(20,24,35,.25)}
.hotspot .hs-dot::before{content:"";width:11px;height:11px;border-radius:50%;background:var(--purple)}
.hotspot .hs-dot::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--purple);animation:ping 2.4s var(--ease) infinite}
@keyframes ping{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(1.85);opacity:0}}
.hotspot:hover .hs-label{color:var(--purple)}

/* ============================================================
   PRODUCTS
============================================================ */
.products{padding:clamp(80px,11vh,140px) 0 clamp(70px,9vh,120px);background:linear-gradient(180deg,#fff 0%,var(--bg-soft) 55%,#fff 100%);text-align:center}
.products .section-title{max-width:18ch;margin-inline:auto}
.prod-stage{position:relative;margin-top:clamp(40px,6vh,72px);display:grid;grid-template-columns:1fr minmax(0,2.1fr) 1fr;gap:clamp(16px,2.4vw,36px);align-items:center;text-align:left}

.prod-visual{position:relative;aspect-ratio:2/1;border-radius:24px;overflow:hidden;container-type:inline-size}
.prod-visual img{width:100%;height:100%;object-fit:contain}
.stat-col{display:flex;flex-direction:column;gap:clamp(16px,2.6vh,28px)}
.stat-col.right{align-items:flex-end;text-align:right}
.stat-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px 26px;box-shadow:0 18px 44px rgba(20,24,35,.08);max-width:290px;transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease)}
.stat-card:hover{transform:translateY(-5px);border-color:rgba(124,92,255,.4);box-shadow:0 26px 60px rgba(124,92,255,.16)}
.stat-card b{display:block;font-size:clamp(1.5rem,2.3vw,2rem);font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.stat-card span{display:block;margin-top:6px;font-size:.9rem;line-height:1.55;color:var(--muted)}
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,30px);margin-top:clamp(48px,7vh,86px);text-align:left}
.prod-card{position:relative;border-radius:22px;overflow:hidden;background:var(--navy-900);min-height:400px;display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate}
.prod-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2;transition:transform .9s var(--ease)}
.prod-card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,24,35,.16) 20%,rgba(20,24,35,.62) 58%,rgba(20,24,35,.93) 100%)}
.prod-card:hover img{transform:scale(1.07)}
.prod-card-body{padding:clamp(24px,2.6vw,34px);color:#fff}
.prod-card .tag{display:inline-block;font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:linear-gradient(120deg,var(--purple),var(--purple-deep));border:0;border-radius:999px;padding:6px 13px;margin-bottom:14px;box-shadow:0 6px 18px rgba(82,51,214,.45)}
.prod-card h3{font-size:1.32rem;font-weight:600;margin-bottom:8px}
.prod-card p{font-size:.93rem;line-height:1.6;color:rgba(255,255,255,.72)}
.prod-card .spec{display:flex;gap:18px;margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.16);font-size:.84rem;color:rgba(255,255,255,.82)}
.prod-card .spec i{font-style:normal;color:var(--purple-lt);font-weight:600}

/* Product cards under the home products section. The shots are cut-outs on
   transparent backgrounds, so each one sits on its own soft panel rather than
   bleeding to the card edge. */
.pcards-head{display:flex;align-items:center;justify-content:space-between;gap:20px;
  margin-top:clamp(40px,6vh,72px)}
.pcards-head h3{font-size:clamp(1.15rem,1.8vw,1.5rem);font-weight:600;color:var(--ink)}
.pcards-nav{display:flex;gap:10px}
/* four across, eight in the rail — it scrolls rather than wrapping */
.pcards{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3 * clamp(14px,1.6vw,22px)) / 4);
  gap:clamp(14px,1.6vw,22px);margin-top:20px;text-align:left;
  overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x mandatory;
  scrollbar-width:none;padding-bottom:6px}
.pcards::-webkit-scrollbar{display:none}
.pcard{scroll-snap-align:start}
.pcard{position:relative;display:flex;flex-direction:column;border-radius:22px;overflow:hidden;
  background:#fff;border:1px solid var(--line);box-shadow:0 14px 40px rgba(20,24,35,.06);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease)}
.pcard:hover{transform:translateY(-6px);border-color:var(--purple);
  box-shadow:0 26px 60px rgba(82,51,214,.18)}
/* flex:none is what keeps this square — without it the shot is sized by the
   photo inside it and every card ends up a different height, because the
   product cut-outs range from 1536x1024 to 1024x1536 */
.pcard-shot{position:relative;aspect-ratio:1/1;flex:none;overflow:hidden;
  background:linear-gradient(160deg,#F6F4FF,#EDF7F5 58%,#F8F6FF)}
/* absolute + inset is what pins the photo inside the square; a max-height
   percentage against an aspect-ratio box is not reliably honoured, and the
   cut-outs run from 1200x660 to 826x1200 so a tall one would push the card */
.pcard-shot img{position:absolute;inset:16px;width:calc(100% - 32px);height:calc(100% - 32px);
  object-fit:contain;transition:transform .6s var(--ease)}
.pcard:hover .pcard-shot img{transform:scale(1.06)}
.pcard-body{padding:20px 20px 22px;display:flex;flex-direction:column;gap:6px;flex:1}
.pcard-cat{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--purple)}
.pcard-body h3{font-size:1.16rem;font-weight:600;color:var(--ink)}
.pcard-body p{font-size:.88rem;line-height:1.55;color:var(--muted)}
.pcard-spec{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);
  display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.pcard-spec span{font-size:.78rem;color:var(--muted)}
.pcard-spec b{font-size:.95rem;font-weight:600;color:var(--ink)}
.pcard-go{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;color:var(--purple);background:rgba(255,255,255,.86);
  backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.9);
  opacity:0;translate:0 -6px;transition:.4s var(--ease)}
.pcard:hover .pcard-go{opacity:1;translate:none}
.pcards-more{display:flex;justify-content:center;margin-top:clamp(26px,4vh,44px)}
/* the registered office sits in the footer contact list, as text not a link */
.foot-office{display:flex;gap:10px;align-items:flex-start;color:rgba(255,255,255,.62);
  font-size:.86rem;line-height:1.6}
.foot-office .ci{flex:none;margin-top:2px}

/* ============================================================
   LANGUAGE SWITCHER — on both sites, so it lives here not in ar.css
============================================================ */
.lang-switch{display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border-radius:999px;
  font-size:.82rem;font-weight:600;line-height:1;letter-spacing:.01em;white-space:nowrap;
  /* the nav's own colour is dark ink, so this has to be stated, not inherited */
  color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.42);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background-color .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
.lang-switch:hover{background:rgba(255,255,255,.3);border-color:#fff;color:#fff}
.lang-switch svg{width:13px;height:13px;opacity:.8;flex:none}
/* over a white bar the glass has nothing to sit on, so it becomes a purple chip */
.nav-solid .lang-switch,.scrolled .lang-switch{background:rgba(124,92,255,.1);
  border-color:rgba(124,92,255,.32);color:var(--purple)}
.nav-solid .lang-switch:hover,.scrolled .lang-switch:hover{background:rgba(124,92,255,.18);
  border-color:var(--purple)}

/* The utility row carries one on desktop. On a phone that row is hidden, so a
   second copy rides in the main bar between the logo and the burger. */
.nav-lang{display:none}
@media(max-width:860px){
  .nav-lang{display:inline-flex;margin-inline-start:auto;margin-inline-end:14px;
    padding:7px 15px;font-size:.84rem}
  .nav-lang svg{display:none}
}

@media(max-width:1080px){
  .pcards{grid-auto-columns:calc((100% - clamp(14px,1.6vw,22px)) / 2)}
}
@media(max-width:560px){
  /* a phone gets the plain stack back: no rail, no arrows */
  .pcards-head{display:none}
  .pcards{display:grid;grid-auto-flow:row;grid-template-columns:1fr;grid-auto-columns:auto;
    gap:14px;overflow-x:visible;scroll-snap-type:none;margin-top:clamp(34px,5vh,56px)}
  /* a full-width square shot wastes the screen on a phone: go side by side */
  .pcard{flex-direction:row;align-items:stretch}
  .pcard-shot{flex:0 0 38%;aspect-ratio:auto;min-height:154px}
  .pcard-shot img{inset:12px;width:calc(100% - 24px);height:calc(100% - 24px)}
  .pcard-body{padding:16px 16px 18px}
  .pcard-go{display:none}
}

/* ============================================================
   ABOUT
============================================================ */
.about{position:relative;overflow:hidden;background:radial-gradient(120% 85% at 50% 118%,#6A4BE8 0%,#3B2A9B 38%,var(--navy-900) 78%);color:#fff;padding:clamp(80px,12vh,150px) 0 clamp(150px,22vh,280px)}
.about::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1px);background-size:26px 26px;opacity:.5;mask-image:linear-gradient(180deg,#000,transparent 72%);-webkit-mask-image:linear-gradient(180deg,#000,transparent 72%)}
.about::after{content:"";position:absolute;left:50%;bottom:-46vw;translate:-50% 0;width:92vw;height:92vw;max-width:1250px;max-height:1250px;border-radius:50%;background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.3),rgba(147,120,255,.28) 42%,rgba(90,60,220,0) 70%);animation:breathe 9s var(--ease) infinite alternate}
@keyframes breathe{from{transform:translate(-50%,0) scale(1)}to{transform:translate(-50%,-2%) scale(1.045)}}
.about .wrap{position:relative;z-index:2}
.about-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap}
.about-head h2{font-size:clamp(2rem,4.2vw,3.4rem);font-weight:700;letter-spacing:-.02em;margin-top:16px;line-height:1.1}
.about-rule{height:1px;background:rgba(255,255,255,.22);margin:clamp(28px,4vh,46px) 0}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:start}
.about-grid p{font-size:1.06rem;line-height:1.8;color:rgba(255,255,255,.84);max-width:52ch}
.stat-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:clamp(14px,2.2vh,22px) 0;border-bottom:1px solid rgba(255,255,255,.2)}
.stat-row:first-child{border-top:1px solid rgba(255,255,255,.2)}
.stat-row .k{font-size:1.02rem;font-weight:600;line-height:1.35;max-width:14ch}
.stat-row .v{font-size:clamp(2.1rem,4.4vw,3.6rem);font-weight:300;letter-spacing:-.03em;line-height:1;white-space:nowrap}

/* ============================================================
   CTA BAND + FOOTER
============================================================ */
.cta-band{position:relative;overflow:hidden;text-align:center;padding:clamp(70px,11vh,130px) 0;color:#fff;background:linear-gradient(115deg,#2B1B6E 0%,#5233D6 26%,#7C5CFF 46%,#2F9FD4 70%,#25B39A 100%)}
.cta-band::before{content:"";position:absolute;inset:-30% -10%;background:radial-gradient(45% 55% at 25% 40%,rgba(255,255,255,.28),transparent 70%),radial-gradient(40% 50% at 78% 62%,rgba(255,255,255,.2),transparent 70%);filter:blur(24px);animation:aurora 14s var(--ease) infinite alternate}
@keyframes aurora{from{transform:translate3d(-2%,0,0) scale(1)}to{transform:translate3d(3%,-3%,0) scale(1.1)}}
.cta-band .wrap{position:relative;z-index:2}
.cta-band h2{font-size:clamp(1.9rem,4vw,3.2rem);font-weight:700;letter-spacing:-.02em}
.cta-band p{margin:14px 0 32px;letter-spacing:.14em;text-transform:uppercase;font-size:.88rem;color:rgba(255,255,255,.88)}

.footer{background:var(--navy-900);color:#fff;padding:clamp(60px,8vh,96px) 0 34px}
.footer-grid{display:grid;grid-template-columns:1.35fr repeat(3,1fr);gap:clamp(28px,4vw,54px)}
.footer-logo img{height:52px;width:auto;margin-bottom:22px}
.footer-tag{font-size:.94rem;line-height:1.75;color:rgba(255,255,255,.62);max-width:34ch}
.footer h4{font-size:1.02rem;font-weight:600;margin-bottom:20px}
.footer ul{list-style:none;display:flex;flex-direction:column;gap:13px}
.footer ul a{font-size:.94rem;color:rgba(255,255,255,.66);transition:color .3s,padding-left .3s}
.footer ul a:hover{color:#fff;padding-left:4px}
.contact-list{list-style:none;display:flex;flex-direction:column;gap:14px;margin-top:26px}
.contact-list a{display:inline-flex;align-items:center;gap:11px;font-size:.95rem;color:rgba(255,255,255,.78);transition:color .3s}
.contact-list a:hover{color:var(--purple-lt)}
.contact-list .ci{width:32px;height:32px;flex:none;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)}
.socials{display:flex;gap:12px;margin-top:38px}
.socials a{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.8);transition:.35s var(--ease)}
.socials a:hover{background:var(--purple);border-color:var(--purple);color:#fff;transform:translateY(-3px)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:clamp(38px,6vh,62px);padding-top:26px;border-top:1px solid rgba(255,255,255,.14);font-size:.86rem;color:rgba(255,255,255,.55)}
.footer-bottom nav{display:flex;gap:26px}
.footer-bottom a:hover{color:#fff}

/* ============================================================
   SCROLL REVEALS
============================================================ */
.rv{opacity:0;transform:translateY(38px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}.rv.d4{transition-delay:.4s}

/* ============================================================
   RESPONSIVE
============================================================ */
/* names stay visible at every size — just tighten the pill inside a narrow frame */
@container (max-width:520px){
  .hotspot .hs-label{font-size:.8rem;padding:7px 13px}
  .hotspot{gap:6px}
}
@media(max-width:1080px){
  .prod-stage{grid-template-columns:1fr;gap:26px}
  .stat-col,.stat-col.right{flex-direction:row;align-items:stretch;text-align:left;flex-wrap:wrap;justify-content:center}
  .stat-card{max-width:none;flex:1 1 220px}
  /* single column now, so the render goes first — display:contents makes the
     wrapper transparent, so the order has to sit on the render itself here */
  .prod-stage .prod-visual{order:-1}
  .prod-grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
  .nav-utility{display:none}
  .nav-links{position:fixed;inset:0 0 auto 0;top:68px;flex-direction:column;align-items:stretch;gap:0;padding:14px clamp(20px,4vw,48px) 26px;background:rgba(20,24,35,.96);backdrop-filter:blur(22px);clip-path:inset(0 0 100% 0);transition:clip-path .5s var(--ease)}
  .nav-links.open{clip-path:inset(0 0 0 0)}
  .nav-links > a,.nav-mega-trigger{padding:15px 0;border-bottom:1px solid rgba(255,255,255,.1)}
  .nav-links a::after{display:none}
  .nav.scrolled .nav-links{background:rgba(255,255,255,.97)}
  .nav.scrolled .nav-links > a,.nav.scrolled .nav-mega-trigger{border-bottom-color:rgba(20,24,35,.1)}
  .nav-burger{display:flex}
  .nav-cta{display:none}
  /* portrait crops ~60% horizontally — anchoring hard right removes the branding baked top-left */
  .slide-scrim{background:linear-gradient(180deg,rgba(20,24,35,.88) 0%,rgba(20,24,35,.6) 48%,rgba(20,24,35,.9) 100%)}
  .slide-scrim::after{display:none}
  .slide-media{background-position:100% center}
  .slide-copy{max-width:none}
  .hero-arrow{display:none}
  /* the pin is KEPT on mobile — same scrubbed morph, just a tighter frame
     and a single-column card sized for the narrow viewport.
     Frame and card share the same gutters, top edge and radius, so the card sits
     exactly over the top of the image and none of it peeks out above. */
  .sol-pin{--sol-gut:clamp(10px,3vw,18px);--sol-top:clamp(78px,11vh,112px)}
  .sol-stage{height:260vh}
  /* The render is 2:1. Centring it in the pin — rather than dropping it at the
     foot — keeps it beside the card instead of leaving half a screen of white
     between them once the card has ridden up and dissolved.
     `translate` is an individual property, so it composes with the scale() the
     morph writes to `transform` rather than being overwritten by it. */
  /* the window fills the screen and the render, twice as wide as it, walks
     across as you scroll — every label gets the room to be read on its own */
  .sol-frame{inset:var(--sol-gut);top:var(--sol-gut);height:auto;aspect-ratio:auto;
    translate:none;border-radius:20px}
  /* The products render stays put on a phone — the whole picture at once —
     and the labels are spread apart by the pin placer instead. */
  .hotspot .hs-label{transition:translate .3s var(--ease)}
  .sol-card{width:calc(100% - var(--sol-gut) * 2);margin-top:var(--sol-top);padding:26px 22px;border-radius:20px}
  .sol-card h2{font-size:clamp(1.55rem,6.6vw,2.1rem)}
  .sol-card .lead{font-size:.97rem;line-height:1.65}
  .sol-card-grid{grid-template-columns:1fr;gap:14px;align-items:start}
  .sol-scroll-hint{margin-top:22px}
  .about-grid{grid-template-columns:1fr}
  .prod-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1!important;transform:none!important}
  .slide-media,.slide.active .slide-media{transform:none!important;transition:none}
  .about::after,.cta-band::before,.mouse::after,.hotspot .hs-dot::after{animation:none}
  /* only the pop-in scale is forced — JS still fades out any pin panned off frame */
  .hotspot{scale:1!important}
}
/* ============================================================
   WOW-STYLE REVEALS  (.wow + variant, optional data-wow-delay)
============================================================ */
.wow{opacity:0;transition:opacity .9s var(--ease),transform .9s var(--ease);will-change:opacity,transform}
.wow.fade-up{transform:translateY(38px)}
.wow.fade-down{transform:translateY(-38px)}
.wow.fade-left{transform:translateX(44px)}
.wow.fade-right{transform:translateX(-44px)}
.wow.zoom-in{transform:scale(.92)}
.wow.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.wow{opacity:1!important;transform:none!important}}
/* on narrow screens a horizontal start offset pushes the element past the viewport
   edge and widens the document, so slide them in vertically instead */
@media(max-width:860px){
  .wow.fade-left,.wow.fade-right{transform:translateY(38px)}
}

/* pages with no hero sit below a solid bar */
body.nav-solid{padding-top:68px}

/* ============================================================
   NAV — products mega menu
============================================================ */
.nav-item-mega{display:flex;align-items:center}
.nav-mega-trigger{position:relative;display:inline-flex;align-items:center;gap:7px}
.nav-mega-trigger::before{content:"";position:absolute;left:-22px;right:-22px;top:100%;height:42px}
.nav-mega-trigger .caret{transition:transform .35s var(--ease)}
.nav-item-mega:hover .caret,.nav-item-mega.open .caret,.nav-item-mega.hovering .caret{transform:rotate(180deg)}
.nav-links > a.current::after,.nav-mega-trigger.current::after{transform:scaleX(1)}

.mega{position:absolute;top:100%;left:0;right:0;display:flex;justify-content:center;padding-top:14px;
  opacity:0;visibility:hidden;transform:translateY(-8px);pointer-events:none;
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s}
.nav-item-mega:hover .mega,.nav-item-mega.open .mega,.nav-item-mega.hovering .mega{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.mega-inner{width:min(940px,92vw);background:rgba(255,255,255,.98);backdrop-filter:blur(22px);
  border-radius:22px;padding:28px 30px 30px;box-shadow:0 30px 80px rgba(20,24,35,.22);border:1px solid rgba(20,24,35,.06)}
.mega-head{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-bottom:18px;margin-bottom:20px;border-bottom:1px solid var(--line)}
.mega-title{font-size:1.32rem;font-weight:700;color:var(--ink)}
.mega-sub{font-size:.93rem;color:var(--muted);margin-top:3px}
.mega-all{flex:none;padding:8px 20px 8px 8px;font-size:.9rem}
.mega-all .ico{width:28px;height:28px}
.mega-grid{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.mega-grid a{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:999px;
  border:1px solid var(--line);color:var(--ink);font-size:.95rem;background:#fff;
  transition:border-color .3s var(--ease),color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.mega-grid a:hover,.mega-grid a.current{border-color:var(--purple);color:var(--purple);transform:translateY(-3px);
  background:linear-gradient(120deg,rgba(124,92,255,.10),rgba(62,200,176,.08));
  box-shadow:0 14px 32px rgba(124,92,255,.22)}
.mega-grid a:hover .mega-ico{transform:scale(1.14) rotate(-4deg)}
.mega-ico{transition:transform .35s var(--ease)}
.mega-ico{flex:none;width:26px;height:26px;color:var(--purple);display:grid;place-items:center}
.mega-ico svg{width:100%;height:100%}

/* ============================================================
   PRODUCTS INDEX
============================================================ */
.po-intro{padding:clamp(64px,10vh,120px) 0 clamp(28px,5vh,56px);text-align:center;background:var(--bg)}
.po-lead{max-width:60ch;margin:20px auto 0;color:var(--muted);line-height:1.8}
.po-arrow{width:40px;height:40px;margin:clamp(26px,4vh,44px) auto 0;border-radius:50%;
  border:1px solid var(--line);display:grid;place-items:center;color:var(--purple);
  animation:po-bob 2.2s var(--ease) infinite}
@keyframes po-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

.po-wrap{padding:0 0 clamp(70px,10vh,130px);background:var(--bg)}
.po-list{position:relative;display:grid;grid-template-columns:1fr 1fr;
  column-gap:clamp(40px,7vw,120px);row-gap:clamp(30px,6vh,70px);align-items:start}
/* centre rail */
.po-rail{position:absolute;top:0;bottom:0;left:50%;translate:-50% 0;width:2px;background:var(--line);border-radius:2px}
.po-rail-fill{position:absolute;top:0;left:0;width:100%;height:0;border-radius:2px;
  background:linear-gradient(180deg,var(--purple),rgba(124,92,255,.35))}
.po-rider{position:absolute;bottom:-14px;left:50%;translate:-50% 0;width:29px;height:29px;opacity:0;transition:opacity .3s}
.po-rider svg{width:100%;height:100%}

/* the rail animation drives these, but only once JS has taken over: without
   the guard a blocked script, or a full-page capture that never scrolls,
   leaves the whole section blank */
.pobl-li{will-change:opacity,transform}
.js .pobl-li{opacity:0}
.pobl-li.left{grid-column:1}
.pobl-li.right{grid-column:2;margin-top:clamp(50px,9vh,120px)}
/* The studio shots already carry their own purple backdrop, so floating them in
   a box on a purple card gave two mismatched gradients and a visible seam. The
   shot is the card now: full bleed, with the copy on a scrim over it. */
.pobl-card{position:relative;display:flex;flex-direction:column;justify-content:space-between;
  isolation:isolate;overflow:hidden;border-radius:24px;color:#fff;
  padding:clamp(24px,2.6vw,34px);min-height:clamp(360px,46vh,470px);
  background:linear-gradient(150deg,#8A6BFF,#5E3FE0 55%,#3EC8B0);
  box-shadow:0 26px 70px rgba(82,51,214,.22);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.pobl-card:hover{transform:translateY(-6px);box-shadow:0 36px 90px rgba(82,51,214,.32)}
.pobl-media{position:absolute;inset:0;z-index:-2}
.pobl-media img{width:100%;height:100%;object-fit:cover;object-position:center 58%;
  transition:transform .8s var(--ease)}
.pobl-card:hover .pobl-media img{transform:scale(1.05)}
/* the placeholder has no backdrop of its own, so it keeps the card gradient */
.pobl-media .ph-tile{width:100%;height:100%;object-fit:cover;opacity:.9}
.pobl-card::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(28,16,74,.82) 0%,rgba(28,16,74,.36) 38%,
    rgba(28,16,74,.12) 60%,rgba(28,16,74,.72) 100%)}
.pobl-top{position:relative}
.pobl-title{font-size:clamp(1.4rem,2.2vw,2rem);font-weight:600;margin-bottom:10px;
  text-shadow:0 2px 14px rgba(10,6,30,.4)}
.pobl-info{font-size:.95rem;line-height:1.65;color:rgba(255,255,255,.88);max-width:38ch;
  text-shadow:0 1px 12px rgba(10,6,30,.4)}
.pobl-go{display:inline-flex;align-items:center;gap:12px;align-self:flex-end;
  font-size:.92rem;font-weight:600;padding-block:8px;padding-inline:18px 8px;border-radius:999px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.34);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background-color .4s var(--ease),border-color .4s var(--ease)}
.pobl-go .ico{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.45);
  transition:transform .4s var(--ease),background-color .4s var(--ease)}
.pobl-card:hover .pobl-go{background:rgba(255,255,255,.24);border-color:rgba(255,255,255,.6)}
.pobl-card:hover .pobl-go .ico{background:rgba(255,255,255,.32);transform:translateX(4px)}

/* ============================================================
   PRODUCT (category) PAGE — hero reshapes into the featured series
============================================================ */
.pd-stage{position:relative;height:250vh;background:var(--bg)}
.pd-pin{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--bg);display:grid;place-items:center}
.pd-panel{position:absolute;inset:0;overflow:hidden;transform-origin:center center;
  background:linear-gradient(125deg,#C6B4FF 0%,#A78BFF 38%,#8E6BF2 100%);
  will-change:transform,border-radius}
.pd-panel-media{position:absolute;right:0;top:0;bottom:0;width:56%;display:grid;place-items:center;padding:4vh 3vw}
.pd-panel-media img,.pd-panel-media .ph-tile{max-width:100%;max-height:74vh;width:auto;height:auto;object-fit:contain;
  border-radius:20px;filter:drop-shadow(0 34px 60px rgba(43,20,112,.28))}
.pd-panel-media .ph-tile{opacity:.92}
.pd-panel-body{position:absolute;left:0;top:0;bottom:0;width:52%;display:grid;align-content:center;
  padding-left:clamp(28px,7vw,120px);padding-right:24px;color:#fff;z-index:2}
.pd-copy{grid-area:1/1}
.pd-h1{font-size:clamp(2.2rem,5vw,4rem);font-weight:700;letter-spacing:-.02em;line-height:1.06;color:#fff}
.pd-intro{margin-top:18px;max-width:46ch;font-size:clamp(.98rem,1.2vw,1.12rem);line-height:1.7;color:rgba(255,255,255,.92)}
.pd-series-name{font-size:clamp(1.8rem,3.6vw,2.9rem);font-weight:700;letter-spacing:-.01em;text-transform:uppercase;color:#2B1470;line-height:1.05}
.pd-series-kicker{margin-top:8px;font-size:clamp(.82rem,1.05vw,1rem);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#4A2BA8}
.pd-chips{list-style:none;display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 30px}
.pd-chips li{display:flex;flex-direction:column;gap:12px;min-width:136px;padding:13px 17px;border-radius:12px;
  background:rgba(255,255,255,.26);border:1px solid rgba(255,255,255,.42);backdrop-filter:blur(8px);
  color:#2B1470;font-weight:600;font-size:.94rem}
.pd-chips svg{width:20px;height:20px;color:#6B47E8}
.pd-crumb{position:absolute;left:clamp(28px,7vw,120px);bottom:26px;z-index:3;display:flex;gap:16px;
  font-size:.92rem;color:rgba(255,255,255,.65)}
.pd-crumb a:hover{color:#fff}
.pd-crumb span{color:#fff}

/* rows of remaining series */
.pd-rows{padding:clamp(60px,9vh,110px) 0;background:var(--bg)}
.pd-row{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(26px,5vw,80px);align-items:center;
  margin-bottom:clamp(50px,8vh,110px)}
.pd-row:last-child{margin-bottom:0}
.pd-row-media{display:grid;place-items:center;min-height:240px}
.pd-row-media img,.pd-row-media .ph-tile{max-width:100%;max-height:330px;object-fit:contain;border-radius:18px}
.pd-row-cards{display:grid;gap:16px}
.pd-spec-card{display:grid;grid-template-columns:1.2fr 1fr;gap:20px;padding:24px 28px;border-radius:18px;
  background:linear-gradient(120deg,rgba(124,92,255,.10),rgba(124,92,255,.03));border:1px solid rgba(124,92,255,.14)}
.pd-kicker{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.pd-name{font-size:clamp(1.3rem,2vw,1.75rem);font-weight:700;color:#3A1F9B}
.pd-value{font-size:clamp(1.3rem,2vw,1.75rem);font-weight:700;color:#3A1F9B}
.pd-row-bottom{display:grid;grid-template-columns:1.25fr 1fr;gap:16px}
.pd-feat-card{position:relative;padding:22px 24px 18px;border-radius:18px;overflow:hidden;
  background:linear-gradient(140deg,rgba(124,92,255,.09),rgba(62,200,176,.07));border:1px solid rgba(124,92,255,.12)}
.pd-feat-ico{display:block;width:30px;height:30px;color:var(--purple);margin-bottom:14px}
.pd-feat-ico svg{width:100%;height:100%}
.pd-feat-count{position:absolute;top:22px;right:24px;z-index:2;display:flex;align-items:center;gap:8px;
  font-size:.82rem;color:var(--muted)}
.pd-feat-count i{display:block;width:26px;height:1.5px;background:var(--purple);opacity:.6}
.pd-feat-card h4{font-size:.98rem;font-weight:600;color:#3A1F9B;margin-bottom:8px;letter-spacing:.02em}
.pd-feat-card p{font-size:.9rem;line-height:1.6;color:var(--muted)}
/* slides stack, only the active one takes part in layout height */
.pd-feat-track{position:relative;display:grid}
.pd-feat-slide{grid-area:1/1;opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
.pd-feat-slide.on{opacity:1;transform:none;pointer-events:auto}
.pd-feat-dots{display:flex;gap:7px;margin-top:16px}
.pd-feat-dots button{width:22px;height:4px;padding:0;border:0;border-radius:3px;cursor:pointer;
  background:rgba(124,92,255,.25);transition:background-color .35s var(--ease),width .35s var(--ease)}
.pd-feat-dots button.on{width:34px;background:var(--purple)}
.pd-cta-card{display:flex;flex-direction:column;justify-content:space-between;padding:22px 24px;border-radius:18px;
  color:#fff;background:linear-gradient(135deg,#8A6BFF,#5E3FE0 55%,#3EC8B0);font-weight:600;font-size:1.02rem;
  box-shadow:0 18px 44px rgba(82,51,214,.24);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.pd-cta-card:hover{transform:translateY(-4px);box-shadow:0 26px 60px rgba(82,51,214,.34)}
.pd-cta-go{align-self:flex-end;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.5);margin-top:26px;transition:transform .4s var(--ease)}
.pd-cta-card:hover .pd-cta-go{transform:translateX(4px)}

/* ============================================================
   SERIES PAGE
============================================================ */
.sd-hero{position:relative;min-height:min(92svh,860px);display:flex;align-items:center;overflow:hidden;
  background:linear-gradient(135deg,#7E5CFF 0%,#5E3FE0 40%,#8FA2F5 72%,#9FE8DC 100%)}
.sd-hero-media{position:absolute;right:0;top:0;bottom:0;width:52%;display:grid;place-items:center;padding:8vh 3vw}
.sd-hero-media img,.sd-hero-media .ph-tile{max-width:100%;max-height:68vh;object-fit:contain;border-radius:20px;
  filter:drop-shadow(0 40px 70px rgba(20,24,35,.32))}
.sd-hero-inner{position:relative;z-index:2;width:100%;padding-top:120px;padding-bottom:110px}
.sd-hero-copy{max-width:min(620px,58%)}
.sd-badge{display:inline-block;padding:8px 20px;border-radius:999px;font-size:.92rem;font-weight:500;color:#fff;
  background:linear-gradient(120deg,rgba(255,255,255,.34),rgba(255,255,255,.14));
  border:1px solid rgba(255,255,255,.42);backdrop-filter:blur(8px)}
.sd-title{margin:18px 0 16px;font-size:clamp(2.2rem,5vw,3.9rem);font-weight:700;letter-spacing:-.025em;color:#fff}
.sd-intro{max-width:46ch;font-size:clamp(.98rem,1.2vw,1.1rem);line-height:1.7;color:rgba(255,255,255,.86)}
.sd-gauges{list-style:none;display:flex;flex-wrap:wrap;gap:16px;margin-top:clamp(28px,4vh,44px)}
.sd-gauges li{flex:1 1 210px;max-width:290px;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 22px;border-radius:16px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.34);
  backdrop-filter:blur(12px)}
.sd-gauge-label{font-size:.92rem;color:rgba(255,255,255,.9)}
.sd-gauge-ring{position:relative;display:grid;place-items:center;min-width:62px;min-height:62px}
.sd-gauge-ring svg{position:absolute;inset:0;width:100%;height:100%}
.sd-gauge-value{position:relative;font-size:1.12rem;font-weight:700;color:#fff}
.sd-crumb{position:absolute;left:0;right:0;bottom:22px;z-index:3;display:flex;gap:16px;font-size:.92rem;
  color:rgba(255,255,255,.66)}
.sd-crumb a:hover{color:#fff}
.sd-crumb span{color:#fff}

/* Key Advantages — the photo grows out of its card to cover the whole block */
.ka-stage{position:relative;height:230vh;background:var(--bg)}
.ka-pin{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--bg);display:grid;place-items:center}
.ka-media{position:absolute;inset:clamp(14px,2vw,28px);overflow:hidden;border-radius:26px;
  clip-path:inset(0 0 0 55% round 26px);will-change:clip-path}
.ka-media img,.ka-media .ph-tile{width:100%;height:100%;object-fit:cover}
.ka-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,24,35,.34),rgba(20,24,35,.06) 55%)}
.ka-inner{position:relative;z-index:2;width:100%}
.ka-title{font-size:clamp(1.9rem,3.6vw,3rem);font-weight:700;letter-spacing:-.02em;margin-bottom:clamp(24px,4vh,42px);
  color:var(--ink);transition:color .5s var(--ease)}
.ka-title.on-media{color:#fff}
.ka-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:660px}
.ka-card{padding:22px 24px;border-radius:16px;border:1px solid rgba(124,92,255,.14);
  background:linear-gradient(140deg,rgba(124,92,255,.11),rgba(124,92,255,.03));
  transition:background-color .5s var(--ease),border-color .5s var(--ease),color .5s var(--ease),backdrop-filter .5s}
.ka-card h3{font-size:1.02rem;font-weight:600;color:#3A1F9B;margin:12px 0 8px;transition:color .5s var(--ease)}
.ka-card p{font-size:.9rem;line-height:1.6;color:var(--muted);transition:color .5s var(--ease)}
.ka-ico{display:block;width:28px;height:28px;color:var(--purple);transition:color .5s var(--ease)}
.ka-ico svg{width:100%;height:100%}
/* once the photo has slid under a card, the card turns to glass */
.ka-card.on-media{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.34);backdrop-filter:blur(10px)}
.ka-card.on-media h3{color:#fff}
.ka-card.on-media p{color:rgba(255,255,255,.88)}
.ka-card.on-media .ka-ico{color:#fff}
.ka-cta{position:absolute;right:clamp(28px,5vw,80px);bottom:clamp(60px,12vh,130px);z-index:3;
  display:flex;flex-direction:column;gap:20px;width:min(270px,42vw);padding:22px 24px;border-radius:16px;
  color:#fff;background:linear-gradient(135deg,#8A6BFF,#6A45E8);font-weight:600;font-size:1.05rem;
  opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease),box-shadow .4s;
  box-shadow:0 20px 50px rgba(82,51,214,.36)}
.ka-cta.on{opacity:1;transform:none}
.ka-cta-go{align-self:flex-end;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.5);transition:transform .4s var(--ease)}
.ka-cta:hover .ka-cta-go{transform:translateX(4px)}

/* resources */
.sd-res{padding:clamp(64px,10vh,130px) 0;background:var(--bg)}
.sd-res-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(20px,3vw,40px);margin-top:clamp(30px,5vh,52px);
  align-items:stretch}
.sd-res-art{border-radius:22px;padding:clamp(20px,3vw,40px);display:grid;place-items:center;
  background:linear-gradient(150deg,#D9CCFF,#B9A6FF 45%,#BFEFE6)}
.sd-res-art svg{width:100%;height:auto}
.sd-res-tiles{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-content:center;
  background:var(--bg-soft);border-radius:22px;padding:clamp(20px,3vw,36px)}
.sd-res-tiles a{display:flex;flex-direction:column;gap:14px;padding:22px 20px;border-radius:14px;background:#fff;
  border:1px solid var(--line);color:var(--ink);font-size:.95rem;font-weight:500;
  transition:transform .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease),box-shadow .4s var(--ease)}
.sd-res-tiles a:hover{transform:translateY(-4px);border-color:var(--purple);color:var(--purple);
  box-shadow:0 16px 40px rgba(124,92,255,.16)}
.sd-res-tiles svg{width:24px;height:24px;color:var(--purple)}

/* ============================================================
   DOWNLOAD CENTER
============================================================ */
.dl-band{padding:clamp(56px,9vh,110px) 0;background:linear-gradient(120deg,#F3EFFF,#EAF7F4 55%,#F6F3FF)}
.dl-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(20px,3vw,44px);align-items:center}
.dl-art{border-radius:22px;padding:clamp(18px,3vw,36px);display:grid;place-items:center;
  background:linear-gradient(150deg,rgba(167,139,255,.35),rgba(127,231,212,.3))}
.dl-art svg{width:100%;height:auto;max-width:420px}
.dl-card{background:#fff;border-radius:22px;padding:clamp(26px,3.4vw,46px);box-shadow:0 26px 70px rgba(20,24,35,.1)}
.dl-title{font-size:clamp(1.4rem,2.6vw,2.1rem);font-weight:700;line-height:1.24;letter-spacing:-.02em;margin:14px 0 24px}
/* full-width rows rather than tiles: five items flow 3+2 and read as a list,
   instead of leaving a single orphan tile stranded on its own row */
.dl-icons{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:10px;margin-bottom:30px}
.dl-icons a{display:flex;align-items:center;gap:13px;padding:13px 15px;border-radius:13px;
  border:1px solid var(--line);background:#fff;font-size:.93rem;color:var(--ink);
  transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease)}
.dl-icons a:hover{transform:translateX(3px);border-color:var(--purple);
  box-shadow:0 12px 28px rgba(124,92,255,.15)}
.dl-ic{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:rgba(124,92,255,.1);color:var(--purple);transition:background-color .35s var(--ease)}
.dl-icons a:hover .dl-ic{background:var(--purple);color:#fff}
.dl-ic svg{width:20px;height:20px}
.dl-lb{flex:1;line-height:1.3}
/* with an odd number of items the last one fills the row rather than sitting half-empty */
.dl-icons li:last-child:nth-child(odd){grid-column:1/-1}
.dl-go{width:16px;height:16px;flex:none;color:var(--muted);opacity:0;transform:translateX(-4px);
  transition:opacity .35s var(--ease),transform .35s var(--ease)}
.dl-icons a:hover .dl-go{opacity:1;transform:none;color:var(--purple)}

/* ============================================================
   STUB / 404
============================================================ */
.stub{padding:clamp(90px,16vh,190px) 0;text-align:center;background:var(--bg)}
.stub .po-lead{margin-bottom:34px}

/* ============================================================
   RESPONSIVE
============================================================ */
@media(max-width:1080px){
  .mega-grid{grid-template-columns:repeat(2,1fr)}
  .sd-res-tiles{grid-template-columns:repeat(2,1fr)}
  .pd-row-bottom{grid-template-columns:1fr}
}
@media(max-width:860px){
  /* mega menu becomes a plain list inside the burger panel */
  .nav-item-mega{display:block;width:100%}
  .nav-mega-trigger{justify-content:space-between;width:100%;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.1)}
  .nav.scrolled .nav-mega-trigger{border-bottom-color:rgba(20,24,35,.1)}
  /* a plain show/hide driven only by .open — max-height animation and :hover
     both misbehave inside the fixed, clip-path'd burger panel on touch */
  .mega{position:static;transform:none!important;translate:none;padding-top:0;overflow:visible;
    opacity:1!important;visibility:visible!important;pointer-events:auto;display:none;transition:none}
  .nav-item-mega:hover .mega{display:none}
  .nav-item-mega.open .mega,
  .nav-item-mega.open:hover .mega{display:block}
  .mega-inner{width:100%;box-shadow:none;border:0;background:transparent;padding:6px 0 14px;backdrop-filter:none}
  .mega-head{display:none}
  .mega-grid{grid-template-columns:1fr;gap:8px}
  .mega-grid a{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#fff}
  .nav.scrolled .mega-grid a{background:#fff;border-color:var(--line);color:var(--ink)}

  .po-list{grid-template-columns:1fr;row-gap:22px}
  .po-rail{display:none}
  .js .pobl-li{opacity:1}
  .pobl-li.left,.pobl-li.right{grid-column:1;margin-top:0}

  .pd-stage{height:auto}
  .pd-pin{position:relative;height:auto;display:block}
  .pd-panel{position:relative;inset:auto;transform:none!important;border-radius:0!important;min-height:auto;padding-bottom:64px}
  .pd-panel-media{position:relative;width:auto;padding:96px 22px 0;min-height:auto}
  .pd-panel-media img,.pd-panel-media .ph-tile{max-height:38vh}
  .pd-panel-body{position:relative;width:auto;padding:26px 22px 0;display:block}
  .pd-copy{opacity:1!important;visibility:visible!important;transform:none!important}
  .pd-series{margin-top:34px;padding-top:26px;border-top:1px solid rgba(255,255,255,.25)}
  .pd-chips li{flex:1 1 130px;min-width:0}
  .pd-crumb{position:relative;left:auto;bottom:auto;padding:24px 22px 0}
  .pd-row{grid-template-columns:1fr;gap:22px}
  .pd-spec-card{grid-template-columns:1fr;gap:14px}

  /* the hero is a 3-column flex row on desktop; on a phone that squashed the
     image to 44px and stacked the breadcrumb into a narrow column beside the
     copy. Make it a single ordered stack instead: copy, image, breadcrumb. */
  .sd-hero{display:flex;flex-direction:column;align-items:stretch;min-height:auto;
    padding-top:calc(68px + 22px);padding-bottom:26px}
  .sd-hero-inner{order:1;position:relative;width:auto;padding:0 20px}
  .sd-hero-media{order:2;position:relative;width:auto;padding:24px 20px 0;min-height:0;display:block}
  .sd-crumb{order:3;position:relative;left:auto;right:auto;bottom:auto;width:auto;max-width:none;
    margin:0;padding:22px 20px 0;flex-wrap:wrap;gap:6px 14px;font-size:.86rem}
  .sd-hero-media img,.sd-hero-media .ph-tile{width:100%;height:auto;max-height:38vh;
    aspect-ratio:8/5;object-fit:contain;border-radius:18px}
  .sd-hero-copy{max-width:none}
  .sd-title{font-size:clamp(1.9rem,9vw,2.6rem)}
  .sd-intro{max-width:none}
  .sd-gauges{gap:10px}
  .sd-gauges li{flex:1 1 100%;max-width:none;padding:14px 18px}

  .ka-stage{height:auto}
  .ka-pin{position:relative;height:auto;display:block;padding:clamp(56px,8vh,90px) 0}
  .ka-media{position:relative;inset:auto;width:auto;margin:0 clamp(16px,4vw,28px) 26px;aspect-ratio:4/3;
    clip-path:none!important;border-radius:20px}
  .ka-grid{grid-template-columns:1fr;max-width:none}
  .ka-cta{position:relative;right:auto;bottom:auto;width:auto;margin:24px clamp(16px,4vw,28px) 0;opacity:1;transform:none}

  .sd-res-grid{grid-template-columns:1fr}
  .sd-res-tiles{grid-template-columns:1fr 1fr}
  .dl-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .sd-res-tiles{grid-template-columns:1fr}
  .dl-icons{grid-template-columns:1fr}
}

/* ============================================================
   INNOVATION
============================================================ */
.inno-hero{position:relative;min-height:min(62svh,560px);display:flex;align-items:flex-end;overflow:hidden;background:var(--navy-900)}
.inno-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.inno-hero-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,24,35,.78),rgba(20,24,35,.25) 62%),linear-gradient(0deg,rgba(20,24,35,.6),transparent 45%)}
.inno-hero-inner{position:relative;z-index:2;width:100%;padding-block:clamp(120px,16vh,170px) 34px;color:#fff}
.inno-hero h1{font-size:clamp(2.4rem,6vw,4.6rem);font-weight:700;letter-spacing:.02em;text-transform:uppercase;line-height:1}
.inno-crumb{display:flex;gap:16px;margin-top:20px;font-size:.92rem;color:rgba(255,255,255,.66)}
.inno-crumb a:hover{color:#fff}
.inno-crumb span{color:#fff}

.inno-lead{padding:clamp(64px,10vh,130px) 0;background:linear-gradient(140deg,#F7F4FF,#EEF9F7 55%,#F9F6FF)}
.inno-lead-title{font-size:clamp(1.7rem,3.6vw,3rem);font-weight:700;line-height:1.22;letter-spacing:-.02em;max-width:22ch}
.inno-lead-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,70px);align-items:center;margin-top:clamp(30px,5vh,54px)}
.inno-pillars{list-style:none;display:grid;gap:14px;margin:26px 0 30px}
.inno-pillars li{display:grid;gap:3px;padding-left:16px;border-left:3px solid var(--purple)}
.inno-pillars strong{font-size:1rem;font-weight:600;color:var(--ink)}
.inno-pillars span{font-size:.92rem;color:var(--muted);line-height:1.6}
.inno-lead-media{border-radius:20px;overflow:hidden;box-shadow:0 30px 70px rgba(43,20,112,.18)}
.inno-lead-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/10}

.inno-line{padding:clamp(56px,9vh,110px) 0 0;background:var(--bg)}
.inno-showcase{margin-top:clamp(26px,4vh,46px);border-radius:24px;overflow:hidden;
  transform:scale(.92);opacity:0;will-change:transform,opacity,border-radius;
  box-shadow:0 34px 80px rgba(20,24,35,.2)}
.inno-showcase img{width:100%;height:auto;aspect-ratio:21/9;object-fit:cover;display:block}

.inno-grid-sec{padding:clamp(48px,8vh,96px) 0;background:linear-gradient(180deg,var(--bg),#F6F4FF)}
.inno-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,26px)}
.inno-grid figure{border-radius:16px;overflow:hidden;box-shadow:0 16px 40px rgba(20,24,35,.12)}
.inno-grid img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/10;transition:transform .8s var(--ease)}
.inno-grid figure:hover img{transform:scale(1.06)}

.inno-rd{padding:clamp(60px,10vh,130px) 0;background:linear-gradient(130deg,#F6F2FF,#EDF8F6 60%,#FAF7FF)}
.inno-rd-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(28px,5vw,70px);align-items:center}
.inno-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.inno-strip img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/5;border-radius:14px;
  box-shadow:0 18px 44px rgba(43,20,112,.16)}

@media(max-width:1080px){
  .inno-lead-grid,.inno-rd-grid{grid-template-columns:1fr}
  .inno-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){
  .inno-grid{grid-template-columns:1fr}
  .inno-strip{grid-template-columns:repeat(3,1fr)}
  .inno-strip img:nth-child(n+4){display:none}
}
/* ============================================================
   SHARED: glass surfaces + colour washes on white
   Used across the whole site, not just Company.
============================================================ */
.glass-panel{
  background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.08));
  backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  border:1px solid rgba(255,255,255,.34);
}
.glass-light{
  background:linear-gradient(135deg,rgba(255,255,255,.86),rgba(255,255,255,.62));
  backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:0 20px 50px rgba(43,20,112,.10);
}

/* soft colour behind otherwise-white sections — the page stops being flat white
   without competing with the content sitting on top of it */
.tint-soft,.tint-mint,.tint-lilac{position:relative;isolation:isolate}
.tint-soft::before,.tint-mint::before,.tint-lilac::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
}
.tint-soft::before{
  background:
    radial-gradient(52% 58% at 8% 0%,rgba(124,92,255,.14),transparent 70%),
    radial-gradient(46% 54% at 96% 32%,rgba(62,200,176,.14),transparent 70%),
    radial-gradient(40% 46% at 50% 108%,rgba(167,139,255,.12),transparent 70%);
}
.tint-mint::before{
  background:
    radial-gradient(48% 56% at 88% 4%,rgba(62,200,176,.18),transparent 70%),
    radial-gradient(44% 50% at 4% 70%,rgba(124,92,255,.14),transparent 70%);
}
.tint-lilac::before{
  background:
    radial-gradient(50% 60% at 2% 10%,rgba(167,139,255,.20),transparent 70%),
    radial-gradient(44% 52% at 98% 88%,rgba(124,92,255,.14),transparent 70%);
}

/* ============================================================
   COMPANY
============================================================ */
.co-hero{position:relative;min-height:min(64svh,580px);display:flex;align-items:flex-end;overflow:hidden;background:var(--navy-900)}
.co-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.co-hero-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,24,35,.8),rgba(20,24,35,.3) 66%),linear-gradient(0deg,rgba(20,24,35,.62),transparent 46%)}
.co-hero-inner{position:relative;z-index:2;width:100%;padding-block:clamp(120px,16vh,180px) 34px;color:#fff}
.co-hero h1{font-size:clamp(1.9rem,4.4vw,3.5rem);font-weight:700;line-height:1.12;letter-spacing:.01em;text-transform:uppercase;max-width:20ch}
.co-crumb{display:flex;gap:16px;margin-top:20px;font-size:.92rem;color:rgba(255,255,255,.66)}
.co-crumb a:hover{color:#fff}
.co-crumb span{color:#fff}

.co-about{padding:clamp(60px,10vh,120px) 0;background:#fff}
.co-about-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,80px);align-items:start}
.co-about-title{font-size:clamp(1.6rem,3vw,2.5rem);font-weight:700;letter-spacing:-.02em;margin-top:14px}

.co-drives{padding:0 0 clamp(50px,8vh,100px);background:#fff}
.co-drives-card{position:relative;border-radius:26px;overflow:hidden;min-height:clamp(300px,42vh,430px);display:flex;align-items:flex-start;
  box-shadow:0 34px 84px rgba(43,20,112,.24)}
.co-drives-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.co-drives-veil{position:absolute;inset:0;background:linear-gradient(120deg,rgba(60,30,180,.82),rgba(90,60,230,.46) 52%,rgba(40,180,170,.4))}
.co-drives-body{position:relative;z-index:2;margin:clamp(22px,3vw,36px);padding:clamp(24px,3vw,40px);border-radius:20px;max-width:640px;color:#fff}
.co-drives-body h2{margin-top:14px;font-size:clamp(1.4rem,2.6vw,2.2rem);font-weight:700;line-height:1.25;letter-spacing:-.01em}

/* history ---------------------------------------------------------- */
.co-history{position:relative;padding:clamp(56px,9vh,110px) 0 clamp(40px,6vh,70px);overflow:hidden;background:#fff}
.co-history-bg{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.55) 42%,rgba(255,255,255,.12) 100%),
             url('../img/company/download-984.jpg') center bottom / cover no-repeat,
             linear-gradient(180deg,#fff,#F7F0FB)}
.co-history-head{position:relative;z-index:1;text-align:center}
.co-timeline{position:relative;z-index:1;margin-top:clamp(28px,5vh,52px)}
.co-track{display:flex;gap:clamp(40px,6vw,90px);overflow-x:auto;scroll-behavior:smooth;
  padding:0 clamp(20px,50vw - 380px,50vw);scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none}
.co-track::-webkit-scrollbar{display:none}
.co-year{flex:0 0 min(620px,84vw);scroll-snap-align:center;padding-bottom:10px}
.co-year-head{display:flex;align-items:center;gap:18px}
.co-year-num{font-size:clamp(2.4rem,5vw,4rem);font-weight:700;letter-spacing:-.02em;line-height:1;
  color:#C9B8F2;transition:color .5s var(--ease)}
.co-year.on .co-year-num{background:linear-gradient(95deg,var(--purple),#3EC8B0);-webkit-background-clip:text;background-clip:text;color:transparent}
.co-year-rule{flex:1;height:1px;background:repeating-linear-gradient(90deg,rgba(124,92,255,.5) 0 6px,transparent 6px 12px);position:relative}
.co-year-rule i{position:absolute;right:0;top:50%;translate:0 -50%;width:9px;height:9px;border-radius:50%;background:var(--purple)}
.co-year-list{list-style:none;margin-top:26px;display:grid;gap:13px}
.co-year-list li{position:relative;padding-left:20px;font-size:.98rem;line-height:1.6;color:var(--ink)}
.co-year-list li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--purple)}

.co-years{display:flex;gap:4px;margin-top:clamp(28px,5vh,50px);padding:7px;border-radius:999px;overflow-x:auto;
  scrollbar-width:none;background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(255,255,255,.66))}
.co-years::-webkit-scrollbar{display:none}
.co-years button{flex:1;min-width:92px;padding:11px 18px;border:0;border-radius:999px;background:transparent;cursor:pointer;
  font-size:.95rem;font-weight:500;color:var(--muted);transition:.35s var(--ease)}
.co-years button:hover{color:var(--purple)}
.co-years button.on{background:linear-gradient(120deg,var(--purple),var(--purple-deep));color:#fff;
  box-shadow:0 10px 24px rgba(82,51,214,.32)}

/* presence --------------------------------------------------------- */
.co-presence{padding:clamp(60px,10vh,120px) 0;background:#fff;text-align:center}
.co-presence-head .lead{max-width:56ch;margin:16px auto 0}
.co-map{position:relative;margin-top:clamp(26px,4vh,50px)}
.co-map img{width:100%;height:auto;display:block;opacity:.92}
.co-pins{list-style:none;position:absolute;inset:0}
.co-pins li{position:absolute;translate:-50% -50%;opacity:0;
  animation:co-pin-in .5s var(--ease) forwards;animation-delay:var(--d)}
@keyframes co-pin-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.co-pin-dot{display:block;width:11px;height:11px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:var(--purple);box-shadow:0 0 0 4px rgba(124,92,255,.22);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.co-pins li:hover .co-pin-dot,.co-pins li.lit .co-pin-dot,.co-pin-dot:focus-visible{
  transform:scale(1.5);box-shadow:0 0 0 7px rgba(124,92,255,.28);outline:0}
/* the label only appears for the pin being pointed at, so dense regions like
   Europe can never pile labels on top of each other */
.co-pin-label{position:absolute;left:50%;bottom:calc(100% + 9px);translate:-50% 0;
  font-size:.78rem;font-weight:500;color:var(--ink);white-space:nowrap;
  background:rgba(255,255,255,.96);border:1px solid rgba(124,92,255,.22);border-radius:999px;padding:4px 10px;
  box-shadow:0 8px 20px rgba(43,20,112,.16);backdrop-filter:blur(6px);pointer-events:none;
  opacity:0;transform:translateY(4px);transition:opacity .25s var(--ease),transform .25s var(--ease)}
.co-pins li:hover .co-pin-label,.co-pins li.lit .co-pin-label,
.co-pin-dot:focus-visible + .co-pin-label{opacity:1;transform:none;z-index:3}
.co-legend{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
  margin-top:clamp(22px,3.5vh,38px)}
.co-legend li{font-size:.84rem;color:var(--muted);padding:6px 14px;border-radius:999px;cursor:default;
  background:rgba(255,255,255,.7);border:1px solid var(--line);backdrop-filter:blur(8px);
  transition:.3s var(--ease)}
.co-legend li:hover,.co-legend li.lit{color:var(--purple);border-color:var(--purple);
  background:#fff;box-shadow:0 8px 20px rgba(124,92,255,.16)}

/* honors ----------------------------------------------------------- */
.co-honors{padding:0 0 clamp(60px,10vh,120px);background:#fff}
.co-honors-card{position:relative;border-radius:26px;overflow:hidden;padding:clamp(28px,4vw,52px);
  background:linear-gradient(135deg,#3A1F9B,#5233D6 48%,#2E7FD4);color:#fff;
  box-shadow:0 34px 84px rgba(43,20,112,.3)}
.co-honors-glow{position:absolute;left:50%;top:-40%;translate:-50% 0;width:80%;height:120%;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.3),transparent 62%)}
.co-honors-head{position:relative;z-index:1;padding-bottom:22px;margin-bottom:26px;border-bottom:1px solid rgba(255,255,255,.26)}
.co-honors-head h2{margin-top:14px;font-size:clamp(1.4rem,2.8vw,2.2rem);font-weight:700;letter-spacing:-.01em}
.co-honors-grid{position:relative;z-index:1;list-style:none;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:14px}
.co-honors-grid li{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
  padding:22px 16px;border-radius:16px;
  background:linear-gradient(140deg,rgba(255,255,255,.2),rgba(255,255,255,.07));
  border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(12px);
  transition:transform .45s var(--ease),background-color .45s var(--ease)}
.co-honors-grid li:hover{transform:translateY(-5px);background:rgba(255,255,255,.26)}
.co-badge{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.4)}
.co-badge svg{width:20px;height:20px}
.co-honors-grid strong{font-size:1rem;font-weight:600}
.co-honor-note{font-size:.82rem;color:rgba(255,255,255,.76);line-height:1.4}

@media(max-width:1000px){
  .co-about-grid{grid-template-columns:1fr;gap:20px}
}
@media(max-width:860px){
  .co-year{flex-basis:88vw}
  .co-track{padding-inline:6vw}
  .co-pin-label{display:none}
  .co-pins li{translate:-50% -50%}
}
@media(prefers-reduced-motion:reduce){
  .co-pins li{animation:none;opacity:1}
  .co-track{scroll-behavior:auto}
}

/* ============================================================
   COLOUR ON WHITE — the remaining flat-white sections get the same
   soft wash used on Company, plus a few glass surfaces.
============================================================ */
.po-intro,.po-wrap,.pd-rows,.sd-res,.products,.stub{position:relative;isolation:isolate}
.po-intro::after,.po-wrap::after,.pd-rows::after,.sd-res::after,.stub::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
}
.po-intro::after{background:radial-gradient(54% 70% at 50% -10%,rgba(124,92,255,.16),transparent 72%)}
.po-wrap::after{background:
  radial-gradient(38% 34% at 2% 18%,rgba(124,92,255,.13),transparent 70%),
  radial-gradient(34% 30% at 98% 52%,rgba(62,200,176,.13),transparent 70%),
  radial-gradient(36% 32% at 6% 86%,rgba(167,139,255,.12),transparent 70%)}
.pd-rows::after{background:
  radial-gradient(40% 36% at 100% 6%,rgba(124,92,255,.12),transparent 70%),
  radial-gradient(36% 32% at 0% 62%,rgba(62,200,176,.11),transparent 70%)}
.sd-res::after{background:
  radial-gradient(44% 46% at 6% 0%,rgba(167,139,255,.16),transparent 72%),
  radial-gradient(40% 44% at 96% 70%,rgba(62,200,176,.14),transparent 72%)}
.stub::after{background:radial-gradient(50% 60% at 50% 0%,rgba(124,92,255,.14),transparent 72%)}

/* glass surfaces on the light pages */
.stat-card,.pd-spec-card,.pd-feat-card,.sd-res-tiles a,.dl-card,.dl-icons a,.ka-card{
  backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%);
}
.stat-card{background:linear-gradient(140deg,rgba(255,255,255,.92),rgba(255,255,255,.74));
  border-color:rgba(255,255,255,.9);box-shadow:0 18px 44px rgba(43,20,112,.10)}
.dl-card{background:linear-gradient(140deg,rgba(255,255,255,.94),rgba(255,255,255,.8));
  border:1px solid rgba(255,255,255,.9)}
.sd-res-tiles{background:transparent}
.sd-res-tiles a{background:linear-gradient(140deg,rgba(255,255,255,.9),rgba(255,255,255,.7));
  border-color:rgba(255,255,255,.88)}
.pobl-card{box-shadow:0 26px 70px rgba(82,51,214,.24),inset 0 1px 0 rgba(255,255,255,.28)}


/* ============================================================
   FIXES
============================================================ */
/* (8) the resource tiles were borderless and floated on the wash */
.sd-res-tiles a{border:1px solid rgba(124,92,255,.22);box-shadow:0 10px 26px rgba(43,20,112,.07)}
.sd-res-tiles a:hover{border-color:var(--purple)}
.dl-icons a{border-color:rgba(124,92,255,.2)}

@media(max-width:860px){
  /* (4) honors: two compact cards per row instead of one giant one */
  .co-honors-card{padding:22px 16px;border-radius:20px}
  .co-honors-grid{grid-template-columns:1fr 1fr;gap:10px}
  .co-honors-grid li{padding:16px 10px;gap:6px;border-radius:13px}
  .co-badge{width:32px;height:32px}
  .co-badge svg{width:16px;height:16px}
  .co-honors-grid strong{font-size:.9rem}
  .co-honor-note{font-size:.74rem}
  .co-legend li{font-size:.78rem;padding:5px 11px}

  /* (6) the product shot and the spec card were running into each other */
  .pd-row{gap:0}
  .pd-row-media{margin-bottom:18px;padding:18px;border-radius:18px;
    background:linear-gradient(150deg,rgba(124,92,255,.10),rgba(62,200,176,.08));
    border:1px solid rgba(124,92,255,.16)}
  .pd-row-media img,.pd-row-media .ph-tile{max-height:220px}
  .pd-row-cards{gap:12px}
}
@media(max-width:560px){
  .co-honors-grid{grid-template-columns:1fr}
}

/* ============================================================
   HOME — latest news rail
============================================================ */
.hn{padding:clamp(60px,9vh,120px) 0;background:#fff}
.hn-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-bottom:clamp(26px,4vh,46px)}
.hn-controls{display:flex;align-items:center;gap:10px}
.hn-arrow{width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--line);background:rgba(255,255,255,.8);color:var(--ink);backdrop-filter:blur(8px);
  transition:.3s var(--ease)}
.hn-arrow svg{width:18px;height:18px}
.hn-arrow:hover:not(:disabled){border-color:var(--purple);color:var(--purple);transform:translateY(-2px)}
.hn-arrow:disabled{opacity:.35;cursor:default}
.hn-all{margin-left:6px}

.hn-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,1fr);gap:clamp(16px,2vw,26px);
  overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x mandatory;padding-bottom:6px;
  scrollbar-width:none;-ms-overflow-style:none}
.hn-rail::-webkit-scrollbar{display:none}
.hn-card{scroll-snap-align:start}
.hn-card > a{display:flex;flex-direction:column;height:100%;padding:24px 24px 0;border-radius:20px;overflow:hidden;
  background:linear-gradient(150deg,rgba(255,255,255,.94),rgba(255,255,255,.72));
  border:1px solid rgba(124,92,255,.16);backdrop-filter:blur(12px);
  box-shadow:0 18px 44px rgba(43,20,112,.08);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease)}
.hn-card > a:hover{transform:translateY(-5px);border-color:var(--purple);
  box-shadow:0 26px 60px rgba(124,92,255,.2)}
.hn-meta{font-size:.86rem;color:var(--muted)}
.hn-title{margin:10px 0 18px;font-size:1.08rem;font-weight:600;line-height:1.4;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hn-media{margin-top:auto;border-radius:14px 14px 0 0;overflow:hidden;aspect-ratio:16/10;background:var(--bg-soft)}
.hn-media img,.hn-media .ph-tile{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s var(--ease)}
.hn-card > a:hover .hn-media img{transform:scale(1.06)}

@media(max-width:860px){
  .hn-rail{grid-auto-columns:minmax(260px,84%)}
  /* the flex head wrapped badly here and the control row spilled over the top of
     the first card — on a phone the two blocks simply stack */
  .hn-head{display:block;margin-bottom:22px}
  .hn-controls{width:100%;justify-content:flex-start;margin-top:22px}
}


/* ============================================================
   HERO — finished banner slides (their headline is part of the image)
============================================================ */
/* the banners carry their own headline, so they are never cropped: the hero takes
   the banner's own aspect and the image is contained inside it */
.hero{background:#0E1018;height:auto;min-height:0;aspect-ratio:16/9;max-height:100svh}
.slide-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;
  transform:none;transition:none}
/* The hero is a 16:9 box capped at the viewport height. On a window WIDER than
   16:9 that cap makes the box wider than the banner's own shape, and `contain`
   leaves a bar down the side. The only crop needed there is top and bottom —
   where none of the baked-in type sits — so cover it. */
@media (min-width:861px) and (min-aspect-ratio: 16/9){
  /* aspect-ratio + max-height was capping the height and then shrinking the
     WIDTH to match, which is what left the bar beside the hero */
  .hero{aspect-ratio:auto;height:100svh;max-height:none}
  .slide-img{object-fit:cover}
}
.slide-body{align-items:flex-end}
.slide-cta{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease) .35s,transform .8s var(--ease) .35s}
.slide.active .slide-cta{opacity:1;transform:none}
.slide-body .wrap{padding-bottom:clamp(74px,12vh,120px)}
/* ============================================================
   SLIDE OVERLAY — type set over a render that ships without any
   The sizes are in vw/cqw-ish clamps so the block scales with the picture and
   keeps looking like part of it rather than a caption bolted on top.
============================================================ */
.slide-over{position:absolute;inset:0;z-index:4;display:flex;align-items:center;
  pointer-events:none;color:#fff}
/* the copy runs past the dark sky and over the lit house, so it gets its own
   soft ground rather than relying on text-shadow alone */
.slide-over::before{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(6,10,24,.66),rgba(6,10,24,.34) 34%,rgba(6,10,24,0) 58%)}
.slide-over .wrap{width:100%}
/* lifted off centre so the pillar row lands on sky, not on the lit house */
.so-block{max-width:min(46%,560px);margin-bottom:clamp(40px,9vh,100px);
  text-shadow:0 2px 18px rgba(6,10,24,.55)}
.so-logo{width:clamp(150px,15vw,232px);height:auto;margin-bottom:clamp(14px,2vw,26px)}
.so-eyebrow{font-size:clamp(.66rem,.92vw,.86rem);font-weight:400;letter-spacing:.34em;
  text-transform:uppercase;line-height:1.85;color:rgba(255,255,255,.62);margin-bottom:clamp(10px,1.4vw,18px)}
.so-title{font-size:clamp(1.9rem,3.5vw,3.4rem);font-weight:400;line-height:1.1;letter-spacing:-.01em}
.so-title strong{font-weight:700}
.so-sub{margin-top:clamp(4px,.6vw,10px);font-size:clamp(1.05rem,1.9vw,1.85rem);font-weight:400;
  line-height:1.3;color:rgba(255,255,255,.95)}
.so-note{margin-top:clamp(6px,.8vw,12px);font-size:clamp(.82rem,1.1vw,1.05rem);color:rgba(255,255,255,.62)}
.so-pillars{list-style:none;display:flex;gap:clamp(14px,2.2vw,30px);margin-top:clamp(18px,2.6vw,34px);
  padding-top:clamp(14px,2vw,24px);border-top:1px solid rgba(255,255,255,.2)}
.so-pillars li{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
  flex:1 1 0;min-width:0}
.so-pillars li + li{border-inline-start:1px solid rgba(255,255,255,.18);padding-inline-start:clamp(12px,1.8vw,24px)}
.so-pillars svg{width:clamp(18px,1.9vw,26px);height:clamp(18px,1.9vw,26px);color:rgba(255,255,255,.88)}
.so-pillars span{font-size:clamp(.6rem,.8vw,.76rem);letter-spacing:.2em;text-transform:uppercase;
  line-height:1.5;color:rgba(255,255,255,.8)}
/* Arabic has no small caps and the tracking breaks its joins */
[dir="rtl"] .so-eyebrow,[dir="rtl"] .so-pillars span{letter-spacing:0;text-transform:none}
[dir="rtl"] .so-eyebrow{font-size:clamp(.74rem,1vw,.94rem)}
[dir="rtl"] .so-pillars span{font-size:clamp(.68rem,.9vw,.84rem)}

/* On a phone the banner is served as a purpose-built portrait re-layout
   (hero-N-p.webp: same headline and same hero object, stacked instead of side
   by side), so it can cover the whole viewport without cropping either. */
@media(max-width:860px){
  .hero{height:100svh;min-height:520px;max-height:none;aspect-ratio:auto;padding-top:0}
  .slide{position:absolute;inset:0}
  .slide:not(.active){display:none}
  .slide picture{position:absolute;inset:0}
  .slide-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    object-position:center;transform:none!important}
  /* just enough shading at the foot for the button and the dots to read */
  .slide-scrim{display:block;inset:auto 0 0;height:38%;
    background:linear-gradient(180deg,rgba(14,16,24,0),rgba(14,16,24,.78))}
  .slide-scrim::after{display:none}
  .slide-body{position:absolute;inset:auto 0 0;height:auto;padding:0 0 74px;align-items:flex-end}
  /* the portrait render is centred on the monument: the type goes above it */
  .slide-over{align-items:flex-start;padding-top:calc(68px + 14px)}
  .slide-over::before{background:linear-gradient(180deg,rgba(6,10,24,.72),rgba(6,10,24,.28) 42%,rgba(6,10,24,0) 62%)}
  .so-block{max-width:none;margin-bottom:0;text-align:center}
  .so-logo{width:min(46vw,190px);margin-inline:auto}
  .so-eyebrow{letter-spacing:.28em}
  .so-title{font-size:clamp(1.7rem,8vw,2.3rem)}
  .so-sub{font-size:clamp(.95rem,4.3vw,1.2rem);max-width:22ch;margin-inline:auto}
  .so-pillars{gap:0;margin-top:16px;padding-top:12px}
  .so-pillars li + li{padding-inline-start:10px}
  .slide-body .wrap{padding-bottom:0;display:flex;justify-content:center}
  .hero-dots{bottom:28px}
}
@media(prefers-reduced-motion:reduce){
  .slide-img,.slide.active .slide-img{transform:none!important;transition:none}
}


/* ============================================================
   PRODUCTS INDEX — hero using the whole-home render
============================================================ */
.po-hero{position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(115deg,#EFEAFF 0%,#F6F4FF 42%,#E9F8F5 100%)}
.po-hero-img{position:absolute;right:0;bottom:0;width:min(70%,1180px);height:auto;
  object-fit:contain;object-position:right bottom;z-index:-1;
  mask-image:linear-gradient(90deg,transparent,#000 22%);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%)}
.po-hero-inner{padding-block:clamp(90px,14vh,150px) clamp(60px,9vh,110px);max-width:var(--maxw)}
.po-hero h1{font-size:clamp(2.3rem,5.2vw,4rem);font-weight:700;letter-spacing:-.02em;line-height:1.05;color:var(--ink)}
.po-hero p{margin-top:16px;max-width:34ch;font-size:clamp(1rem,1.25vw,1.14rem);line-height:1.7;color:var(--muted)}
.po-crumb{display:flex;gap:16px;margin-top:26px;font-size:.92rem;color:var(--muted)}
.po-crumb a:hover{color:var(--purple)}
.po-crumb span{color:var(--ink);font-weight:500}
.po-intro{padding-top:clamp(40px,6vh,72px)}

@media(max-width:860px){
  .po-hero-img{position:relative;width:100%;right:auto;bottom:auto;margin-top:8px;
    mask-image:none;-webkit-mask-image:none}
  .po-hero-inner{padding-block:calc(68px + 28px) 0}
  .po-hero p{max-width:none}
  .po-crumb{margin-bottom:18px}
}

/* category hero: the studio shots carry their own purple backdrop, so let them
   fill their half of the panel and melt into the gradient rather than float */
.pd-panel-media img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;
  object-position:center;border-radius:0;filter:none;
  mask-image:linear-gradient(90deg,transparent,#000 26%);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 26%)}
.pd-panel-media{padding:0}
/* On a phone the shot ran as a rounded box floating on the panel gradient, and
   because the studio backdrop is a different purple from the gradient the box
   edge was impossible to miss. Full-bleed it instead and fade the bottom into
   the panel, so the picture reads as the hero and the copy sits under it. */
@media(max-width:860px){
  .pd-panel{padding-bottom:52px}
  .pd-panel-media{padding:0}
  .pd-panel-media img{width:100%;height:auto;max-width:none;max-height:none;
    aspect-ratio:1/1;object-fit:cover;object-position:center 46%;border-radius:0;
    mask-image:linear-gradient(180deg,#000 68%,transparent 99%);
    -webkit-mask-image:linear-gradient(180deg,#000 68%,transparent 99%)}
  /* the placeholder has no backdrop of its own, so it keeps its card look */
  .pd-panel-media .ph-tile{margin:96px 22px 0;border-radius:16px;max-height:38vh}
  .pd-panel-body{padding:2px 22px 0}
  .pd-h1{font-size:clamp(2rem,9vw,2.6rem)}
  .pd-intro{margin-top:12px;font-size:1rem}
}


/* ============================================================
   IMAGE FIXES
============================================================ */
/* the supplied hero photo carries a caption top-left; framing low and right keeps
   it out of the crop and puts the hardware in view */
.co-hero-img{object-position:62% 68%}
/* company profile download — sits under the About copy */
.co-profile-btn{margin-top:clamp(22px,3vh,34px);gap:12px;white-space:nowrap;flex-wrap:nowrap}
.co-profile-meta{margin-left:4px;padding-left:12px;border-left:1px solid rgba(255,255,255,.34);
  font-size:.82rem;letter-spacing:.04em;opacity:.8;text-transform:uppercase}
@media(max-width:520px){ .co-profile-meta{display:none} }
@media(max-width:860px){ .co-hero-img{object-position:70% 62%} }

/* the lead card holds a 2.82:1 production shot — 16:10 cropped it to a dark sliver */
.inno-lead-media img{aspect-ratio:16/11}
/* the showcase image is 1920x440; matching that ratio shows it whole and sharp
   instead of upscaling a 480px crop */
.inno-showcase img{aspect-ratio:1920/440}

/* series pages with no photography yet: copy runs full width */
.sd-hero-noimg .sd-hero-copy{max-width:min(760px,100%)}
.sd-hero-noimg .sd-gauges li{max-width:320px}
.pd-row-noimg{grid-template-columns:1fr}

.ka-plain{padding:clamp(60px,10vh,120px) 0;background:#fff}
.ka-plain .ka-grid-plain{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px;max-width:none;margin-top:clamp(24px,4vh,40px)}
.ka-plain .ka-card{background:linear-gradient(140deg,rgba(255,255,255,.95),rgba(255,255,255,.72));
  border:1px solid rgba(124,92,255,.18);box-shadow:0 16px 40px rgba(43,20,112,.08)}
.ka-plain-cta{margin-top:clamp(26px,4vh,44px)}

/* ============================================================
   RICH ARTICLE CONTENT
   Shared by /news/<slug> and /blog/<slug>. Both pages already set
   their own type scale and paragraph rhythm; everything below is
   the markup the editor can now produce and neither page styled
   before — headings, lists, quotes, images, links and the two
   alignment helpers that survive sanitising.
============================================================ */
.news-body h2,.blog-prose h2{
  font-size:clamp(1.3rem,2.3vw,1.75rem);font-weight:700;line-height:1.28;
  letter-spacing:-.015em;color:var(--ink);margin:1.9em 0 .55em;
}
.news-body h3,.blog-prose h3{
  font-size:clamp(1.1rem,1.8vw,1.32rem);font-weight:600;line-height:1.35;
  letter-spacing:-.01em;color:var(--ink);margin:1.6em 0 .45em;
}
.news-body h4,.blog-prose h4{
  font-size:1.03rem;font-weight:600;color:var(--ink);margin:1.4em 0 .4em;
}
.news-body h2:first-child,.blog-prose h2:first-child,
.news-body h3:first-child,.blog-prose h3:first-child{margin-top:0}

.news-body ul,.news-body ol,.blog-prose ul,.blog-prose ol{
  margin:1.1em 0;padding-inline-start:1.5em;
}
.news-body li,.blog-prose li{margin:.45em 0;line-height:1.8}
.news-body ul,.blog-prose ul{list-style:disc}
.news-body ol,.blog-prose ol{list-style:decimal}
.news-body li::marker,.blog-prose li::marker{color:var(--purple)}

.news-body blockquote,.blog-prose blockquote{
  margin:1.5em 0;padding:.35em 0 .35em 1.15em;
  border-inline-start:3px solid var(--purple);
  color:var(--muted);font-size:1.03em;font-style:italic;
}
.news-body blockquote p:first-child,.blog-prose blockquote p:first-child{margin-top:0}

.news-body img,.blog-prose img{
  display:block;max-width:100%;height:auto;border-radius:14px;margin:1.6em 0;
  box-shadow:0 12px 32px rgba(20,24,35,.10);
}
.news-body figure,.blog-prose figure{margin:1.6em 0}
.news-body figcaption,.blog-prose figcaption{
  margin-top:.7em;font-size:.88rem;color:var(--muted);text-align:center;
}

.news-body a,.blog-prose a{
  color:var(--purple);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;transition:color .3s var(--ease);
}
.news-body a:hover,.blog-prose a:hover{color:var(--purple-deep)}

.news-body hr,.blog-prose hr{
  border:0;border-top:1px solid var(--line);margin:2.2em 0;
}
.news-body pre,.blog-prose pre{
  background:var(--bg-soft);border:1px solid var(--line);border-radius:12px;
  padding:16px 18px;margin:1.4em 0;overflow-x:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9rem;line-height:1.65;
}
.news-body code,.blog-prose code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em;
  background:rgba(124,92,255,.10);color:var(--purple-deep);padding:2px 6px;border-radius:5px;
}
.news-body pre code,.blog-prose pre code{background:none;color:inherit;padding:0}

/* the only classes rich_sanitize() lets through */
.ql-align-center{text-align:center}
.ql-align-right{text-align:right}
.ql-align-justify{text-align:justify}
.ql-indent-1{padding-inline-start:3em}
.ql-indent-2{padding-inline-start:6em}
.ql-indent-3{padding-inline-start:9em}
.ql-indent-4{padding-inline-start:12em}
.ql-indent-5{padding-inline-start:15em}
.ql-indent-6{padding-inline-start:18em}
.ql-indent-7{padding-inline-start:21em}
.ql-indent-8{padding-inline-start:24em}