/* ═══════════════════════════════════════════════════════════
   Rkieh Productions — Motion components
   Everything here is legible and usable with JS disabled.
   .js-on is added by motion.js; only then do we hide-then-reveal.
   ═══════════════════════════════════════════════════════════ */

/* ── Shared: structural grid lines ──────────────────────── */
.gridlines{position:absolute;inset:0;pointer-events:none;z-index:0;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent)}
.gridlines i{position:absolute;top:0;bottom:0;width:1px;background:var(--line-2);opacity:.75}
.gridlines i:nth-child(1){left:12.5%} .gridlines i:nth-child(2){left:37.5%}
.gridlines i:nth-child(3){left:62.5%} .gridlines i:nth-child(4){left:87.5%}
@media (max-width:760px){.gridlines i:nth-child(2),.gridlines i:nth-child(3){display:none}}

/* ── Reveal primitives ───────────────────────────────────
   Content is VISIBLE BY DEFAULT. The hidden start state applies only when
   .js-on is present, which the inline head script adds and then REMOVES
   again if motion.js has not confirmed it is running. So a failed script,
   a blocked CDN, JS switched off or reduced-motion all leave the page
   fully readable — JS can only ever enhance, never gate legibility. */
.js-on [data-anim],
.js-on [data-reveal]{opacity:0}
.js-on [data-anim="up"],
.js-on [data-reveal]{transform:translate3d(0,22px,0)}
.js-on [data-anim="left"] {transform:translate3d(-24px,0,0)}
.js-on [data-anim="right"]{transform:translate3d(24px,0,0)}
.js-on [data-anim="scale"]{transform:scale(.965)}
/* Belt and braces: any of these states force everything visible again. */
.reduce-motion [data-anim],   .reduce-motion [data-reveal],
html:not(.js-on) [data-anim],  html:not(.js-on) [data-reveal],
.motion-failed [data-anim],    .motion-failed [data-reveal]{
  opacity:1!important;transform:none!important}
@media (prefers-reduced-motion:reduce){
  [data-anim],[data-reveal]{opacity:1!important;transform:none!important}
}

/* ══ 1. HERO ═══════════════════════════════════════════ */
.xhero{position:relative;overflow:clip;
  padding-block:clamp(2.25rem,1.5rem + 3.5vw,4rem) clamp(2.5rem,1.75rem + 3.5vw,4.5rem)}
.xhero-in{position:relative;z-index:2;display:grid;min-width:0;gap:clamp(2.25rem,1.5rem + 4vw,4rem);
  align-items:center}
@media (min-width:1000px){.xhero-in{grid-template-columns:minmax(0,.86fr) minmax(0,1fr)}}
.xhero .kicker{display:inline-flex;align-items:center;gap:.55rem;padding:.42rem .9rem .42rem .5rem;
  border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--line-2);
  font-size:var(--t-xs);font-weight:600;color:var(--ink-2);margin-bottom:1.35rem;
  box-shadow:var(--sh-sm)}
.xhero .kicker b{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .6rem;
  border-radius:var(--r-pill);background:var(--ink);color:var(--oat-50);font-size:.68rem;
  font-weight:700;letter-spacing:.04em}
.xhero h1{font-size:clamp(2.15rem,1.2rem + 3.5vw,3.85rem);line-height:1.01;
  letter-spacing:-.042em;font-weight:600;margin-bottom:1.3rem;max-width:17ch}
.xhero .lead{max-width:48ch;margin-bottom:1.85rem}
.xhero-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:1.85rem}
.xhero-paths{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
  max-width:34rem}
.xpath{display:flex;align-items:center;gap:.7rem;padding:.85rem 1rem;border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--line-2);
  transition:border-color .22s,transform .28s var(--ease),box-shadow .28s var(--ease)}
.xpath:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.xpath[data-div="pro"]:hover{border-color:var(--pro)}
.xpath[data-div="sol"]:hover{border-color:var(--sol)}
.xpath .dot{inline-size:.5rem;block-size:.5rem;border-radius:50%;flex:none}
.xpath[data-div="pro"] .dot{background:var(--pro)}
.xpath[data-div="sol"] .dot{background:var(--sol)}
.xpath>span{min-width:0}
.xpath .t{display:block;font-size:var(--t-sm);font-weight:600;letter-spacing:-.015em;line-height:1.25}
.xpath .s{display:block;font-size:var(--t-xs);color:var(--ink-3);margin-top:.12rem}
.xpath .go{margin-left:auto;color:var(--ink-3);transition:transform .25s var(--ease)}
.xpath:hover .go{transform:translateX(3px)}

/* Hero stage — 2:1 media container, swappable for video later */
.stage{position:relative;aspect-ratio:2/1;border-radius:var(--r-xl);overflow:hidden;
  background:linear-gradient(160deg,var(--oat-100),var(--oat-300));
  border:1px solid var(--line-2);box-shadow:var(--sh-lg)}
@media (max-width:640px){.stage{aspect-ratio:4/3;border-radius:var(--r-lg)}}
.stage>svg,.stage>video,.stage>img{position:absolute;inset:0;inline-size:100%;
  block-size:100%;object-fit:cover}
.stage-glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 70% at 22% 30%,color-mix(in srgb,var(--pro) 13%,transparent),transparent 70%),
             radial-gradient(55% 65% at 80% 68%,color-mix(in srgb,var(--sol) 15%,transparent),transparent 70%)}

/* SVG scene pieces */
.scene .node{transform-box:fill-box;transform-origin:center}
.scene .wire{stroke:var(--oat-500);stroke-width:1.5;fill:none;stroke-linecap:round}
.scene .wire-pro{stroke:var(--pro)} .scene .wire-sol{stroke:var(--sol)}
.scene .chip{fill:var(--oat-50);stroke:var(--oat-400);stroke-width:1.25}
.scene .label{font:600 8px/1 var(--sans);fill:var(--oat-800);letter-spacing:-.02em}
.scene .label-sm{font:600 6.5px/1 var(--sans);fill:var(--oat-700)}
.scene .swatch-pro{fill:var(--pro)} .scene .swatch-sol{fill:var(--sol)}
.scene .pulse{fill:var(--pro)}
.scene .pulse-sol{fill:var(--sol)}

/* ══ 2. PROOF BENTO ════════════════════════════════════ */
.bento{display:grid;gap:.85rem;grid-template-columns:repeat(12,1fr);
  grid-auto-rows:minmax(112px,auto)}
@media (max-width:900px){.bento{grid-template-columns:repeat(6,1fr)}}
@media (max-width:560px){.bento{grid-template-columns:repeat(2,1fr)}}
.bcell{position:relative;min-width:0;border-radius:var(--r-lg);overflow:hidden;
  background:var(--surface);border:1px solid var(--line-2);
  padding:clamp(1.1rem,.9rem + .8vw,1.6rem);display:flex;flex-direction:column;
  justify-content:space-between;gap:.85rem;
  transition:transform .34s var(--ease),box-shadow .34s var(--ease),border-color .24s,
             background .24s}
.bcell:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--line)}
.bcell.tint{background:var(--acc-tint,var(--brand-tint));border-color:transparent}
.bcell.ink{background:var(--panel);color:var(--panel-ink);border-color:transparent}
.bcell.ink .bl,.bcell.ink p{color:color-mix(in srgb,var(--panel-ink) 68%,transparent)}
.bcell .bl{font-size:var(--t-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3)}
.bcell .bn{font-size:clamp(2rem,1.3rem + 2.4vw,3.1rem);font-weight:600;line-height:.94;
  letter-spacing:-.05em;font-variant-numeric:tabular-nums;color:var(--acc,var(--brand))}
.bcell .bt{font-size:var(--t-h4);font-weight:600;letter-spacing:-.02em}
.bcell p{font-size:var(--t-sm);color:var(--ink-3);line-height:1.55}
.bcell .arrow{position:absolute;right:1.1rem;bottom:1.1rem;color:var(--ink-3);
  transition:transform .28s var(--ease)}
.bcell:hover .arrow{transform:translate(3px,-3px)}
.bcell .shotwrap{position:absolute;inset:0;overflow:hidden}
.bcell .shotwrap img{inline-size:100%;block-size:100%;object-fit:cover;
  transition:transform .7s var(--ease)}
.bcell:hover .shotwrap img{transform:scale(1.05)}
.bcell.media{padding:0;min-height:190px}
.bcell.media .cap{position:relative;z-index:2;margin-top:auto;padding:1.15rem 1.25rem;
  background:linear-gradient(to top,rgba(20,19,17,.82),transparent);color:#fff;
  inline-size:100%}
.bcell.media .cap .bl{color:rgba(255,255,255,.72)}
.bcell blockquote{margin:0;font-size:1.02rem;line-height:1.5;letter-spacing:-.018em;
  color:inherit}
.bcell figcaption{font-size:var(--t-xs);color:var(--ink-3);margin-top:.7rem}
.bcell .logo-wall{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));
  gap:.9rem 1.1rem;align-items:center;width:100%}
.bcell .logo-wall span{font-size:var(--t-sm);font-weight:600;color:var(--ink-3);
  text-align:center;letter-spacing:-.015em}
.bcell .logo-wall img{max-height:1.9rem;width:auto;margin-inline:auto;opacity:.7}
/* spans */
.s3{grid-column:span 3}.s4{grid-column:span 4}.s5{grid-column:span 5}
.s6{grid-column:span 6}.s7{grid-column:span 7}.s8{grid-column:span 8}.s12{grid-column:span 12}
.r2{grid-row:span 2}
@media (max-width:900px){
  .s3,.s4,.s5{grid-column:span 3}.s6,.s7,.s8{grid-column:span 6}.s12{grid-column:span 6}
}
@media (max-width:560px){
  .s3,.s4,.s5,.s6,.s7,.s8,.s12{grid-column:span 2}.r2{grid-row:span 1}
}

/* ══ 3. SERVICE EXPLORER ═══════════════════════════════ */
.explorer{position:relative}
.exp-tabs{display:flex;flex-wrap:wrap;gap:.5rem;position:relative;margin-bottom:2rem}
.exp-tab{position:relative;z-index:1;padding:.62rem 1.1rem;border-radius:var(--r-pill);
  border:1.5px solid var(--line);background:var(--surface);font-size:var(--t-sm);
  font-weight:600;color:var(--ink-2);white-space:nowrap;
  transition:color .22s,border-color .22s,background .22s}
.exp-tab:hover{color:var(--ink);border-color:var(--ink-3)}
.exp-tab[aria-selected="true"]{color:var(--on-acc,#fff);border-color:transparent;
  background:var(--acc,var(--brand))}
.exp-tab .d{display:inline-block;inline-size:.42rem;block-size:.42rem;border-radius:50%;
  margin-right:.45rem;background:var(--acc,var(--brand));transition:background .2s}
.exp-tab[aria-selected="true"] .d{background:currentColor}
.exp-body{display:grid;min-width:0;gap:clamp(1.75rem,1.2rem + 3vw,3.25rem);align-items:center}
@media (min-width:900px){.exp-body{grid-template-columns:minmax(0,.82fr) minmax(0,1fr)}}
.exp-panel{position:relative}
.exp-panel[hidden]{display:none}
.exp-copy .eyebrow{color:var(--acc,var(--brand))}
.exp-copy h3{font-size:clamp(1.6rem,1.1rem + 2vw,2.6rem);letter-spacing:-.035em;
  margin-bottom:1rem}
.exp-copy p{color:var(--ink-2);max-width:44ch;margin-bottom:1.6rem}
.exp-copy .btn-brand{--bg:var(--acc,var(--brand));--bd:var(--acc,var(--brand));
  --fg:var(--on-acc,#fff)}
.exp-media{position:relative;aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;
  background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--sh-md)}
.exp-media .art{position:absolute;inset:0;display:grid;place-items:center;gap:.9rem;
  align-content:center;background:var(--acc-tint,var(--brand-tint));
  color:var(--acc,var(--brand));text-align:center;padding:1.5rem}
.exp-media .art svg{opacity:.9}
.exp-media .art .cap{font-size:var(--t-xs);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;opacity:.75}
.exp-media img,.exp-media video{position:absolute;inset:0;inline-size:100%;block-size:100%;
  object-fit:cover}
.exp-progress{position:relative;margin-top:2rem;height:2.5px;background:var(--line-2);
  overflow:hidden;border-radius:2px}
.exp-progress i{display:block;block-size:100%;inline-size:0;background:var(--acc,var(--brand));
  transform-origin:left center}
.exp-pausenote{font-size:var(--t-xs);color:var(--ink-3);margin-top:.7rem}

/* ══ 4. STICKY FEATURE STACK ═══════════════════════════ */
.stack{position:relative}
.stack{--lip:14px}
.stack-panel{position:sticky;top:calc(76px + var(--i,0) * var(--lip));
  margin-bottom:clamp(1.5rem,1rem + 2vw,2.75rem)}
@media (max-width:760px){.stack{--lip:9px}.stack-panel{top:calc(66px + var(--i,0) * var(--lip))}}
.stack-inner{position:relative;border-radius:var(--r-xl);overflow:hidden;min-width:0;
  background:var(--pan-bg,var(--surface));color:var(--pan-ink,var(--ink));
  border:1px solid var(--line-2);box-shadow:var(--sh-lg);
  min-height:min(78vh,660px);display:grid;gap:clamp(1.25rem,.9rem + 2.4vw,2.75rem);
  padding:clamp(1.5rem,1rem + 2.2vw,2.9rem);align-content:center}
/* dim overlay used while the next panel slides over — cheaper than filter() */
.stack-inner{--dim:0}
.stack-inner::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:#14130f;opacity:var(--dim);border-radius:inherit;z-index:5}
@media (min-width:940px){.stack-inner{grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  align-items:center}}
.stack-inner .pill{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .95rem;
  border-radius:var(--r-pill);background:var(--pan-pill,var(--brand-tint));
  color:var(--pan-acc,var(--brand));font-size:var(--t-xs);font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:1.25rem;
  border:1px solid color-mix(in srgb,currentColor 22%,transparent)}
.stack-inner .pill .n{opacity:.55;font-variant-numeric:tabular-nums}
.stack-inner h2{font-size:clamp(1.75rem,1.1rem + 2.3vw,2.85rem);letter-spacing:-.04em;
  line-height:1.04;margin-bottom:1rem}
.stack-inner .lead{color:var(--pan-ink-2,var(--ink-2));max-width:44ch;
  font-size:clamp(1rem,.96rem + .3vw,1.12rem)}
.stack-proof{margin-top:1.35rem;padding:1rem 1.15rem;border-radius:var(--r-md);
  background:color-mix(in srgb,currentColor 5%,transparent);
  border-left:2.5px solid var(--pan-acc,var(--brand));font-size:var(--t-sm)}
.stack-proof b{color:var(--pan-acc,var(--brand))}
.stack-cta{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1.6rem}
.stack-cta .btn-brand{--bg:var(--pan-acc,var(--brand));--bd:var(--pan-acc,var(--brand));
  --fg:var(--pan-on-acc,#fff)}
.stack-media{position:relative;border-radius:var(--r-lg);overflow:hidden;
  aspect-ratio:4/3;background:var(--pan-media,var(--surface-2));
  border:1px solid color-mix(in srgb,currentColor 12%,transparent)}
.stack-media>*{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover}
.media-ph{display:grid;place-content:center;justify-items:center;gap:.85rem;text-align:center;
  color:var(--pan-acc,var(--brand));opacity:.55;padding:1.5rem}
.media-ph .cap{font-size:var(--t-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase}
@media (max-width:939px){.stack-media{aspect-ratio:16/10}}

/* Panel palettes */
.p-creative{--pan-bg:#fff3f0;--pan-acc:#c9252a;--pan-pill:#ffe2de;--pan-media:#ffe7e3;
  --pan-on-acc:#fff}
.p-build   {--pan-bg:#eef4ff;--pan-acc:#0a54b0;--pan-pill:#dbe8ff;--pan-media:#e0ecff;
  --pan-on-acc:#fff}
.p-erp     {--pan-bg:#e9faf0;--pan-acc:#046a3f;--pan-pill:#d3f5e2;--pan-media:#d9f7e6;
  --pan-on-acc:#fff}
.p-growth  {--pan-bg:#fff6e6;--pan-acc:#a9660c;--pan-pill:#ffeccd;--pan-media:#fff0d8;
  --pan-on-acc:#fff}
.p-secure  {--pan-bg:#1c1a2e;--pan-acc:#c1b0ff;--pan-pill:#2b2747;--pan-media:#262242;
  --pan-ink:#f2f0ff;--pan-ink-2:#b9b4d4;--pan-on-acc:#1a1730}
.p-secure .stack-inner{border-color:#2e2a4a}

/* ══ 5. CONNECTED-SYSTEM SHOWCASE ══════════════════════ */
.flowscene{position:relative;border-radius:var(--r-xl);overflow:hidden;
  background:linear-gradient(150deg,var(--oat-100),var(--oat-300));
  border:1px solid var(--line-2);aspect-ratio:16/7}
@media (max-width:860px){.flowscene{aspect-ratio:4/5}}
.flowscene svg{position:absolute;inset:0;inline-size:100%;block-size:100%}
.flow-steps{display:grid;gap:.75rem;margin-top:1.75rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,168px),1fr))}
.flow-step{padding:.95rem 1.05rem;border-radius:var(--r-md);background:var(--surface);
  border:1px solid var(--line-2);font-size:var(--t-sm)}
.flow-step .n{font-size:var(--t-xs);font-weight:700;color:var(--acc,var(--brand));
  letter-spacing:.08em;display:block;margin-bottom:.35rem}
.flow-step b{font-weight:600;letter-spacing:-.015em}
.flow-step.on{border-color:var(--acc,var(--brand));box-shadow:var(--sh-sm)}

/* ══ 6. CAROUSEL ═══════════════════════════════════════ */
.carousel{position:relative}
.car-track{display:flex;gap:clamp(.85rem,.6rem + 1vw,1.5rem);
  padding-inline:max(1.15rem,calc((100vw - var(--wrap)) / 2));
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;padding-block:.5rem 1.25rem;
  cursor:grab}
.car-track::-webkit-scrollbar{display:none}
.car-track.dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.car-item{flex:0 0 min(78vw,620px);scroll-snap-align:center;position:relative;
  border-radius:var(--r-lg);overflow:hidden;background:var(--surface);
  border:1px solid var(--line-2);transition:opacity .4s var(--ease),transform .4s var(--ease)}
@media (max-width:620px){.car-item{flex-basis:86vw}}
.car-item .frame{position:relative;aspect-ratio:16/9;background:var(--surface-2);
  display:grid;place-items:center;overflow:hidden}
.car-item .frame img,.car-item .frame video{position:absolute;inset:0;inline-size:100%;
  block-size:100%;object-fit:cover}
.car-item .meta{padding:1.15rem 1.35rem 1.4rem}
.car-item .bl{font-size:var(--t-xs);font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--acc,var(--brand));margin-bottom:.5rem}
.car-item h3{font-size:var(--t-h4);margin-bottom:.4rem}
.car-item p{font-size:var(--t-sm);color:var(--ink-3)}
.car-item .playbtn{position:absolute;inset:0;display:grid;place-items:center;z-index:2;
  background:rgba(20,19,17,.18);color:#fff;transition:background .25s}
.car-item .playbtn:hover{background:rgba(20,19,17,.3)}
.car-item .playbtn span{inline-size:3.4rem;block-size:3.4rem;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--ink);display:grid;place-items:center;
  box-shadow:var(--sh-md);transition:transform .25s var(--ease)}
.car-item .playbtn:hover span{transform:scale(1.08)}
.car-nav{display:flex;align-items:center;gap:.55rem;justify-content:center;margin-top:.5rem}
.car-btn{inline-size:2.8rem;block-size:2.8rem;border-radius:50%;border:1.5px solid var(--line);
  background:var(--surface);display:grid;place-items:center;color:var(--ink-2);
  transition:border-color .2s,color .2s,transform .2s var(--ease)}
.car-btn:hover:not(:disabled){border-color:var(--ink);color:var(--ink);transform:scale(1.05)}
.car-btn:disabled{opacity:.35;cursor:not-allowed}
.car-dots{display:flex;gap:.35rem;margin-inline:.6rem}
.car-dots button{inline-size:.5rem;block-size:.5rem;border-radius:50%;background:var(--line);
  transition:background .2s,transform .2s}
.car-dots button[aria-current="true"]{background:var(--brand);transform:scale(1.35)}

/* ══ 7. EDITORIAL BENTO ════════════════════════════════ */
.ebento{display:grid;gap:.85rem;grid-template-columns:repeat(12,1fr)}
@media (max-width:900px){.ebento{grid-template-columns:repeat(6,1fr)}}
@media (max-width:560px){.ebento{grid-template-columns:repeat(2,1fr)}}
.ecard{position:relative;min-width:0;border-radius:var(--r-lg);overflow:hidden;background:var(--surface);
  border:1px solid var(--line-2);display:flex;flex-direction:column;min-height:200px;
  transition:transform .34s var(--ease),box-shadow .34s var(--ease),border-color .22s}
.ecard:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.ecard.tint{background:var(--acc-tint,var(--brand-tint));border-color:transparent}
.ecard.ink{background:var(--panel);color:var(--panel-ink);border-color:transparent}
.ecard.ink p,.ecard.ink .bl{color:color-mix(in srgb,var(--panel-ink) 66%,transparent)}
.ecard .shot{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--surface-2)}
.ecard .shot img{inline-size:100%;block-size:100%;object-fit:cover;
  transition:transform .7s var(--ease)}
.ecard:hover .shot img{transform:scale(1.045)}
.ecard .body{padding:1.2rem 1.35rem 1.45rem;display:flex;flex-direction:column;gap:.5rem;
  flex:1}
.ecard .bl{font-size:var(--t-xs);font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--acc,var(--brand))}
.ecard h3{font-size:var(--t-h4);letter-spacing:-.022em}
.ecard p{font-size:var(--t-sm);color:var(--ink-3);line-height:1.55}
.ecard .foot{margin-top:auto;padding-top:.9rem;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;font-size:var(--t-xs);color:var(--ink-3)}
.ecard .foot .go{transition:transform .26s var(--ease)}
.ecard:hover .foot .go{transform:translateX(4px)}

/* ══ 8. CLOSING CTA ════════════════════════════════════ */
.closer{position:relative;padding-top:clamp(3rem,2rem + 4vw,6rem);overflow:clip}
.closer-scene{position:relative;min-width:0;border-radius:var(--r-xl) var(--r-xl) 0 0;overflow:hidden;
  background:linear-gradient(165deg,#1e1c19,#131211 60%,#191723);
  min-height:clamp(24rem,18rem + 22vw,38rem);display:grid;align-items:center}
.closer-scene svg.bgscene{position:absolute;inset:0;inline-size:100%;block-size:100%;
  opacity:.85}
.closer-in{position:relative;z-index:2;min-width:0;text-align:center;
  padding:clamp(3rem,2rem + 5vw,6rem) clamp(1rem,.6rem + 1.6vw,2.5rem)
          clamp(7rem,5rem + 8vw,11rem)}
.closer h2{font-size:clamp(2.2rem,1.3rem + 4.2vw,4.4rem);letter-spacing:-.045em;
  color:#faf9f6;margin-bottom:1.25rem}
.closer p{color:rgba(250,249,246,.72);max-width:48ch;margin-inline:auto;margin-bottom:2.1rem}
.closer-cta{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;min-width:0}
.closer-cta .btn{max-width:100%}
.closer-paths{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));
  max-width:38rem;margin:2.5rem auto 0}
.closer-path{display:flex;align-items:center;gap:.75rem;padding:.95rem 1.15rem;
  border-radius:var(--r-md);background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.13);color:#faf9f6;text-align:left;
  transition:background .22s,border-color .22s,transform .28s var(--ease)}
.closer-path:hover{background:rgba(255,255,255,.11);transform:translateY(-2px)}
.closer-path[data-div="pro"]:hover{border-color:var(--pro)}
.closer-path[data-div="sol"]:hover{border-color:var(--sol)}
.closer-path .dot{inline-size:.5rem;block-size:.5rem;border-radius:50%;flex:none}
.closer-path[data-div="pro"] .dot{background:var(--pro)}
.closer-path[data-div="sol"] .dot{background:var(--sol)}
.closer-path>span{min-width:0}
.closer-path .t{display:block;font-size:var(--t-sm);font-weight:600}
.closer-path .s{display:block;font-size:var(--t-xs);color:rgba(250,249,246,.6);margin-top:.12rem}
/* Footer overlaps the scene */
.closer + .ftr,.ftr.overlap{margin-top:clamp(-9rem,-6rem - 6vw,-5rem);position:relative;z-index:3;
  border-radius:var(--r-xl) var(--r-xl) 0 0}
.ftr.overlap{background:var(--panel)}

/* ══ Motion media ══════════════════════════════════════ */
.mvideo{position:relative;inline-size:100%;block-size:100%;object-fit:cover;display:block}
.reduce-motion .mvideo{display:none}
.mposter{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover}
.has-video .mposter{opacity:1;transition:opacity .5s}
.has-video.playing .mposter{opacity:0}
.reduce-motion .has-video .mposter{opacity:1!important}

/* ══ Reduced motion / no-JS safety ═════════════════════ */
@media (prefers-reduced-motion:reduce){
  .car-track{scroll-behavior:auto}
  .bcell,.ecard,.car-item,.xpath,.stack-inner{transition:none}
}

/* ── 320px hardening ────────────────────────────────────── */
@media (max-width:360px){
  .btn{white-space:normal;text-align:center}
  .closer-in{padding-inline:1rem}
  .xhero .kicker{white-space:normal}
  .exp-tab{white-space:normal}
}
.stack-copy,.exp-copy,.xhero-copy{min-width:0}

/* ══ Rkieh Productions illustration library ═════════════════════════
   One visual grammar across every service. Colour is inherited from the
   host panel (--art-acc / --art-ink), so the same artwork reads correctly
   on a cream card, a tinted card or the dark security panel.
   Fully legible with no JS — motion classes only add life.        */
.rk-art{inline-size:100%;block-size:100%;display:block;
  --art-acc:var(--acc,var(--brand));
  --art-ink:var(--ink);
  --art-pane:var(--surface);
  --art-line:color-mix(in srgb,var(--art-ink) 14%,transparent);
  --art-faint:color-mix(in srgb,var(--art-ink) 12%,transparent);
  --art-soft:color-mix(in srgb,var(--art-ink) 34%,transparent);
  --art-tile:color-mix(in srgb,var(--art-ink) 7%,transparent);
}
.rk-art .pane{fill:var(--art-pane);stroke:var(--art-line);stroke-width:1.25}
.rk-art .pane.strong{stroke:color-mix(in srgb,var(--art-acc) 40%,transparent);stroke-width:1.5}
.rk-art .acc{fill:var(--art-acc)}
.rk-art .acc-mid{fill:color-mix(in srgb,var(--art-acc) 55%,transparent)}
.rk-art .acc-soft{fill:color-mix(in srgb,var(--art-acc) 22%,transparent)}
.rk-art .sw2{fill:color-mix(in srgb,var(--art-acc) 34%,transparent)}
.rk-art .ink{fill:var(--art-ink)}
.rk-art .ink-soft{fill:var(--art-soft)}
.rk-art .ink-faint{fill:var(--art-faint)}
.rk-art .tile{fill:var(--art-tile);stroke:var(--art-line);stroke-width:1}
.rk-art .screen{fill:color-mix(in srgb,var(--art-ink) 88%,transparent)}
.rk-art .notch{fill:color-mix(in srgb,var(--art-pane) 60%,transparent)}
.rk-art .bar{fill:var(--art-ink)}
.rk-art .chrome{fill:color-mix(in srgb,var(--art-pane) 26%,transparent)}
.rk-art .dot-a{fill:#e5484d}.rk-art .dot-b{fill:#f2b622}.rk-art .dot-c{fill:#12ab66}
.rk-art .wire{fill:none;stroke:color-mix(in srgb,var(--art-acc) 52%,transparent);
  stroke-width:1.75;stroke-linecap:round}
.rk-art .grid{fill:none;stroke:var(--art-faint);stroke-width:1}
.rk-art .trend{fill:none;stroke:var(--art-acc);stroke-width:2.75;stroke-linecap:round;
  stroke-linejoin:round}
.rk-art .node{fill:var(--art-pane);stroke:var(--art-acc);stroke-width:1.75}
.rk-art .node.acc{fill:var(--art-acc);stroke:none}
.rk-art .hub{fill:color-mix(in srgb,var(--art-acc) 12%,transparent);
  stroke:color-mix(in srgb,var(--art-acc) 34%,transparent);stroke-width:1.5}
.rk-art .stripe path{fill:color-mix(in srgb,var(--art-pane) 70%,transparent)}
.rk-art .play{fill:var(--art-pane)}
.rk-art .playhead{fill:var(--art-acc)}
.rk-art .shield{fill:color-mix(in srgb,var(--art-ink) 92%,transparent);
  stroke:var(--art-acc);stroke-width:1.75}
.rk-art .tick{fill:none;stroke:var(--art-acc);stroke-width:2.6;stroke-linecap:round;
  stroke-linejoin:round}
.rk-art .tick.lg{stroke-width:4.5}
.rk-art .scan{stroke:var(--art-acc);stroke-width:2;stroke-linecap:round;opacity:.55}
.rk-art .ok{fill:color-mix(in srgb,var(--art-acc) 28%,transparent);
  stroke:var(--art-acc);stroke-width:1.5}
.rk-art .chip{fill:var(--art-pane);stroke:var(--art-line);stroke-width:1.25}
.rk-art .spec{font:600 46px/1 var(--serif);fill:var(--art-ink);letter-spacing:-.02em}
.rk-art .pulse-a{fill:var(--art-acc)}
.rk-art .pulse-b{fill:color-mix(in srgb,var(--art-acc) 70%,transparent)}

/* Host panels give the artwork room and inherit their accent into it */
.exp-media .rk-art,.stack-media .rk-art{padding:0}
.exp-media .art-wrap,.stack-media .art-wrap{position:absolute;inset:0;display:grid;
  place-items:center;padding:clamp(1rem,.6rem + 1.6vw,2rem)}
.stack-media .rk-art{--art-acc:var(--pan-acc,var(--brand));--art-ink:var(--pan-ink,var(--ink))}
.p-secure .stack-media .rk-art{--art-pane:#241f42;--art-ink:#efeaff}
.exp-media .rk-art{--art-acc:var(--acc,var(--brand));--art-pane:var(--surface)}

/* Motion: opt-in, and only when the page allows it */
.js-on .rk-art .rk-float,
.js-on .rk-art .rk-scan,
.js-on .rk-art .rk-bars rect,
.js-on .rk-art .pulse-a,
.js-on .rk-art .pulse-b{will-change:transform}
.reduce-motion .rk-art *{animation:none!important}

/* ── Capability-family accents ──────────────────────────────
   The unified site groups work by family rather than by division. These sit
   alongside the [data-div] rules above rather than replacing them, so content
   written before the change keeps its accent until it is migrated.
   ─────────────────────────────────────────────────────────── */
.xpath[data-family="operations"]:hover,
.closer-path[data-family="operations"]:hover{border-color:var(--sol)}
.xpath[data-family="media"]:hover,
.closer-path[data-family="media"]:hover{border-color:var(--pro)}
.xpath[data-family="applications"]:hover,
.closer-path[data-family="applications"]:hover{border-color:var(--berry-500)}
.xpath[data-family="enterprise-ai"]:hover,
.closer-path[data-family="enterprise-ai"]:hover{border-color:var(--ube-500)}

.xpath[data-family="operations"] .dot,
.closer-path[data-family="operations"] .dot{background:var(--sol)}
.xpath[data-family="media"] .dot,
.closer-path[data-family="media"] .dot{background:var(--pro)}
.xpath[data-family="applications"] .dot,
.closer-path[data-family="applications"] .dot{background:var(--berry-500)}
.xpath[data-family="enterprise-ai"] .dot,
.closer-path[data-family="enterprise-ai"] .dot{background:var(--ube-500)}

/* Family panel palettes. Added alongside the legacy service palettes above so
   panels written before the unification keep their colour. */
.p-operations   {--pan-bg:#e9faf0;--pan-acc:#046a3f;--pan-pill:#d3f5e2;--pan-media:#d9f7e6;
  --pan-on-acc:#fff}
.p-media        {--pan-bg:#fff3f0;--pan-acc:#c9252a;--pan-pill:#ffe2de;--pan-media:#ffe7e3;
  --pan-on-acc:#fff}
.p-applications {--pan-bg:#eef4ff;--pan-acc:#0a54b0;--pan-pill:#dbe8ff;--pan-media:#e0ecff;
  --pan-on-acc:#fff}
.p-enterprise-ai{--pan-bg:#1c1a2e;--pan-acc:#c1b0ff;--pan-pill:#2b2747;--pan-media:#262242;
  --pan-ink:#f2f0ff;--pan-ink-2:#b9b4d4;--pan-on-acc:#1a1730}
.p-enterprise-ai .stack-inner{border-color:#2e2a4a}