/* =====================================================================
   CARTILOOP v4 — "Signal & Image" redesign layer
   Loaded after styles.css on every page. Adds image-led backgrounds,
   new type, a compact story layout, and the chat / action-bar UX.
   Layout concept: full-bleed light imagery behind dark sections,
   pale contour paper behind light ones; the loop is the signature.
   ===================================================================== */
:root{
  --font-display:"Bricolage Grotesque","Manrope",system-ui,sans-serif;
  --font-body:"Hanken Grotesk","Inter",system-ui,sans-serif;
  --img-hero:url(img/hero-home.webp);
  --img-cat:url(img/hero-digital.webp);
  --img-thumb:url(img/thumb-neutral.webp);
  --rd-ease:cubic-bezier(.16,1,.3,1);
}
body.acc-digital,.acc-digital{--img-cat:url(img/hero-digital.webp);--img-thumb:url(img/thumb-digital.webp)}
body.acc-ecom,.acc-ecom{--img-cat:url(img/hero-ecom.webp);--img-thumb:url(img/thumb-ecom.webp)}
body.acc-ai,.acc-ai{--img-cat:url(img/hero-ai.webp);--img-thumb:url(img/thumb-ai.webp)}
body.acc-business,.acc-business{--img-cat:url(img/hero-business.webp);--img-thumb:url(img/thumb-business.webp)}
body.acc-neutral{--img-cat:url(img/cta.webp)}

/* ---------- Type ---------- */
body{font-size:15.5px;letter-spacing:-.003em}
h1,h2,h3,h4,h5{font-weight:700;letter-spacing:-.022em;text-wrap:balance}
.type-hero{font-size:clamp(30px,3.7vw,54px);font-weight:700;letter-spacing:-.03em;line-height:1.02;font-variation-settings:"wdth" 94}
.type-xl,.type-lg{font-weight:700;letter-spacing:-.028em;font-variation-settings:"wdth" 96}
.type-xl{font-size:clamp(27px,3vw,42px)}
.type-lg{font-size:clamp(23px,2.3vw,33px)}
.type-md{font-size:clamp(18px,1.5vw,22px)}
.lede{font-size:clamp(15.5px,1.1vw,17.5px)}
.statement h2{font-size:clamp(23px,2.5vw,36px)}
.statement .lede{font-size:clamp(16px,1.2vw,18px)}
.hero-meta .num{font-size:clamp(24px,2.2vw,32px)}
.marquee-track span{font-size:clamp(18px,2vw,28px)}
.manifesto p.big{font-size:clamp(24px,3vw,42px)}
.manifesto{padding:clamp(72px,9vw,120px) 0}
.sv-panel .sv-num{font-size:clamp(44px,5.5vw,84px)}
.numbered-list li{font-size:clamp(17px,1.6vw,22px)}
.stat-num{font-size:clamp(32px,3.4vw,48px)}
.cpanel-art .big{font-size:clamp(44px,5.5vw,88px)}
.insight-card.featured h3{font-size:clamp(20px,1.9vw,26px)}
.article-body h2{font-size:clamp(22px,2vw,28px)}
.cta-cine{padding:clamp(80px,10vw,140px) 0}
.cta-cine h2{font-size:clamp(28px,3.8vw,52px)}
.btn-xl{height:clamp(52px,4.6vw,60px);font-size:15px}
.jstage h3{font-size:clamp(20px,2vw,28px)}
.atl-card h3{font-size:clamp(22px,2.4vw,32px)}
.card h3{font-size:18px}
.card p{font-size:14.5px}
.btn{height:48px;font-size:14.5px}
.btn-sm{height:40px;font-size:13.5px}
.section{padding:clamp(64px,7.5vw,112px) 0}
.section--tight{padding:clamp(44px,5vw,72px) 0}
.section-head{margin-bottom:clamp(30px,3.5vw,52px)}
.page-hero{min-height:min(78vh,760px)}

.lede{text-wrap:pretty}
.eyebrow{letter-spacing:.12em}

/* ---------- Image layer (injected by redesign.js) ---------- */
.rd-img{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.rd-img>i{position:absolute;inset:-8% -4%;background:var(--rd-src,var(--img-cat)) center/cover no-repeat;transform:translate3d(0,var(--py,0px),0) scale(1.06);will-change:transform;animation:rdKen 30s ease-in-out infinite alternate}
@keyframes rdKen{from{background-position:50% 50%;scale:1}to{background-position:58% 46%;scale:1.08}}
.rd-img::after{content:"";position:absolute;inset:0;background:var(--rd-shade,linear-gradient(90deg,rgba(5,6,13,.92) 0%,rgba(5,6,13,.6) 42%,rgba(5,6,13,.15) 75%,rgba(5,6,13,.35) 100%)),linear-gradient(0deg,var(--next-bg,#05060D) 0%,transparent 26%)}
/* Load moment: hero image wipes in from the left once */
.rd-img.rd-wipe>i{clip-path:inset(0 100% 0 0);animation:rdWipe 1.6s .15s var(--rd-ease) forwards,rdKen 30s 1.8s ease-in-out infinite alternate}
@keyframes rdWipe{to{clip-path:inset(0 0 0 0)}}

.page-hero .fx-orb,.page-hero .fx-grid{opacity:.35!important}
.page-hero .fx-particles{mix-blend-mode:screen}
.hero .fx-orb{opacity:.3}
.hero .rd-img{--rd-src:url(img/cta.webp);--rd-shade:linear-gradient(90deg,rgba(5,6,13,.94) 0%,rgba(5,6,13,.75) 45%,rgba(5,6,13,.55) 100%)}

/* Home: the loop becomes the engine's core */
.rd-loop{position:absolute;left:50%;top:50%;width:150%;max-width:none;aspect-ratio:1;transform:translate(-50%,-50%) translateZ(10px) rotate(-8deg);pointer-events:none;animation:rdLoop 22s linear infinite;filter:saturate(1.15)}
@keyframes rdLoop{to{transform:translate(-50%,-50%) translateZ(10px) rotate(352deg)}}

/* CTA + dark statements get imagery */
.cta-cine .rd-img{--rd-src:url(img/cta.webp);--rd-shade:radial-gradient(70% 70% at 50% 50%,rgba(4,5,11,.45),rgba(4,5,11,.92))}
.cta-cine .rd-img::after{background:var(--rd-shade)}
.cta-cine .mesh{opacity:.45}
.section--dark.statement .rd-img{--rd-shade:linear-gradient(90deg,rgba(5,6,13,.97) 30%,rgba(5,6,13,.72) 100%)}
.section--dark.statement .rd-img>i{opacity:.8}

/* ---------- Cards with image headers ---------- */
a.card{padding-top:0;overflow:hidden}
a.card::after{content:"";display:block;order:-1;margin:0 -28px 6px;height:132px;background:var(--img-thumb) center/cover no-repeat;transition:transform .9s var(--rd-ease),filter .6s;border-bottom:1px solid var(--line)}
a.card:hover::after{transform:scale(1.06);filter:saturate(1.25) brightness(1.08)}
a.card .card-icon{margin-top:-34px;position:relative;z-index:1;background:#0B0F21;color:#fff;border-color:rgba(255,255,255,.18);box-shadow:0 10px 24px -10px rgba(0,0,0,.6)}
.section--white a.card .card-icon,.section--off a.card .card-icon{background:#fff;color:color-mix(in srgb,var(--accent) 85%,#000);border-color:rgba(10,15,36,.1)}

/* Insight covers become images */
.insight-art .cover{background:var(--img-thumb) center/cover no-repeat!important}
.insight-art .cover .cv-grid,.insight-art .cover>svg{opacity:.25}
.insight-card:hover .insight-art .cover{filter:saturate(1.2) brightness(1.08)}

/* ---------- Compact story: process reads at rest, no long pinned void ---------- */
.story-sticky{min-height:0;padding:0}
.story-steps{padding:0;gap:14px}
.story-step{min-height:0;opacity:1;padding:26px 26px 26px 58px;border-radius:20px;border:1px solid var(--line);background:color-mix(in srgb,var(--ink) 3%,transparent);transform:none!important;transition:border-color .5s,background .5s,box-shadow .5s}
.story-step::before{left:24px;top:34px;margin-top:0}
.story-step::after{display:none}
.story-step.is-active{border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:color-mix(in srgb,var(--accent) 7%,transparent);box-shadow:0 24px 60px -36px color-mix(in srgb,var(--accent) 80%,transparent)}
.story-step h3,.story-step h4{font-size:clamp(19px,1.7vw,24px);margin-bottom:6px}
.story-step p{font-size:15px}
.story-step .st-idx{margin-bottom:6px}
.manifesto .mw{opacity:.32}
.eflow-track{height:230vh}
.jstage{min-height:26vh;opacity:.5}

/* ---------- Buttons: a touch more tactile ---------- */
.btn-primary{background:linear-gradient(100deg,#2F8CFF,#7C5CFF 50%,#E0359F);background-size:160% 100%;transition:background-position .8s var(--rd-ease),transform .5s var(--ease),box-shadow .5s var(--ease)}
.btn-primary:hover{background-position:100% 0}

/* ---------- Floating chat (communication) ---------- */
.rd-chat-btn{position:fixed;right:22px;bottom:22px;z-index:140;display:flex;align-items:center;gap:10px;height:56px;padding:0 20px 0 8px;border-radius:999px;background:#0D1226;border:1px solid rgba(255,255,255,.16);color:#fff;font-family:var(--font-display);font-weight:700;font-size:15px;box-shadow:0 20px 50px -18px rgba(124,92,255,.8);transition:transform .4s var(--rd-ease),box-shadow .4s}
.rd-chat-btn:hover{transform:translateY(-3px);box-shadow:0 26px 60px -18px rgba(224,53,159,.8)}
.rd-chat-btn .av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:url(img/logo-mark.webp) center/86% no-repeat,#0B0F21;position:relative}
.rd-chat-btn .av::after{content:"";position:absolute;right:0;bottom:1px;width:11px;height:11px;border-radius:50%;background:#34D399;border:2px solid #0D1226}
.rd-chat{position:fixed;right:22px;bottom:92px;z-index:141;width:min(380px,calc(100vw - 32px));max-height:min(620px,calc(100vh - 120px));display:flex;flex-direction:column;border-radius:22px;overflow:hidden;background:#0B0F21;border:1px solid rgba(255,255,255,.14);box-shadow:0 40px 100px -30px rgba(0,0,0,.9);color:#F3F5FF;transform-origin:bottom right;transform:scale(.9) translateY(10px);opacity:0;pointer-events:none;transition:transform .45s var(--rd-ease),opacity .3s}
.rd-chat.is-open{transform:none;opacity:1;pointer-events:auto}
.rd-chat-head{position:relative;padding:20px 20px 18px;background:url(img/thumb-neutral.webp) center/cover;isolation:isolate}
.rd-chat-head::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,15,33,.35),rgba(11,15,33,.95))}
.rd-chat-head b{display:block;font-family:var(--font-display);font-size:19px;letter-spacing:-.02em}
.rd-chat-head span{font-size:13px;color:rgba(226,231,255,.75);display:flex;align-items:center;gap:6px;margin-top:4px}
.rd-chat-head span::before{content:"";width:7px;height:7px;border-radius:50%;background:#34D399}
.rd-chat-x{position:absolute;right:12px;top:12px;width:34px;height:34px;border-radius:50%;background:rgba(5,6,13,.5);display:grid;place-items:center;color:#fff;font-size:16px}
.rd-chat-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px}
.rd-msg{max-width:86%;padding:10px 14px;border-radius:16px;font-size:14.5px;line-height:1.5;animation:rdMsg .4s var(--rd-ease)}
@keyframes rdMsg{from{opacity:0;transform:translateY(6px)}}
.rd-msg.bot{background:rgba(255,255,255,.07);border-bottom-left-radius:5px}
.rd-msg.me{align-self:flex-end;background:linear-gradient(100deg,#2F8CFF,#7C5CFF);border-bottom-right-radius:5px}
.rd-quick{display:flex;flex-wrap:wrap;gap:8px}
.rd-quick button{padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.18);font-size:13px;color:#F3F5FF;transition:background .2s,border-color .2s}
.rd-quick button:hover{background:rgba(124,92,255,.2);border-color:#7C5CFF}
.rd-chat form{display:flex;flex-direction:column;gap:8px;padding:12px 16px 16px;border-top:1px solid rgba(255,255,255,.08)}
.rd-chat input,.rd-chat textarea{width:100%;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(5,6,13,.6);color:#F3F5FF;font:inherit;font-size:14px;outline:none}
.rd-chat textarea{min-height:64px;resize:none}
.rd-chat input:focus,.rd-chat textarea:focus{border-color:#7C5CFF;box-shadow:0 0 0 3px rgba(124,92,255,.25)}
.rd-chat .row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rd-chat .send{height:44px;border-radius:12px;font-weight:700;color:#fff;background:linear-gradient(100deg,#2F8CFF,#7C5CFF 55%,#E0359F)}
.rd-chat .note{font-size:11.5px;color:rgba(226,231,255,.5)}

/* ---------- Mobile action bar ---------- */
.rd-bar{display:none}
@media (max-width:760px){
  .rd-bar{position:fixed;left:0;right:0;bottom:0;z-index:139;display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(8,11,24,.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid rgba(255,255,255,.1);transform:translateY(110%);transition:transform .45s var(--rd-ease)}
  .rd-bar.is-on{transform:none}
  .rd-bar a,.rd-bar button{height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:6px;font-family:var(--font-display);font-weight:700;font-size:14px;color:#F3F5FF;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05)}
  .rd-bar .primary{border:0;background:linear-gradient(100deg,#2F8CFF,#7C5CFF 55%,#E0359F)}
  .rd-bar svg{width:17px;height:17px}
  .rd-chat-btn{display:none}
  .rd-chat{right:16px;bottom:86px}
  .rd-top{bottom:84px!important}
  body{padding-bottom:70px}
  a.card::after{height:110px}
}

/* ---------- Back to top with progress ring ---------- */
.rd-top{position:fixed;left:22px;bottom:22px;z-index:138;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:rgba(13,18,38,.85);border:1px solid rgba(255,255,255,.12);color:#fff;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .35s,transform .45s var(--rd-ease)}
.rd-top.is-on{opacity:1;transform:none;pointer-events:auto}
.rd-top svg.ring{position:absolute;inset:-1px;transform:rotate(-90deg)}
.rd-top svg.ring circle{fill:none;stroke:url(#rdg);stroke-width:2.5;stroke-linecap:round}
@media (max-width:760px){.rd-top{left:auto;right:16px;width:42px;height:42px}}

/* ---------- CMS-rendered post page ---------- */
.rd-post{max-width:720px;margin:0 auto}
.rd-post .cover-img{width:100%;aspect-ratio:16/8;object-fit:cover;border-radius:24px;border:1px solid var(--line);margin-bottom:40px}
.rd-post .body p{font-size:18.5px;line-height:1.75;color:var(--ink-2);margin-top:22px}
.rd-post .body p:first-child{margin-top:0;font-size:21px;color:var(--ink)}

@media (prefers-reduced-motion:reduce){
  .rd-img>i,.rd-loop{animation:none!important}
  .rd-img.rd-wipe>i{clip-path:none}
}

/* ---------- Compact footer ---------- */
.site-footer{padding:clamp(52px,5.5vw,72px) 0 22px}
.footer-word{display:none}
.footer-top{gap:clamp(20px,2.4vw,36px)}
.footer-col h5{margin-bottom:12px}
.footer-col ul{gap:6px}
.footer-col li a{font-size:13.5px}
.footer-brand p{font-size:13.5px;margin-top:14px}
.footer-status{margin-top:16px}
.site-footer .hero-actions{margin-top:16px!important}
.footer-bottom{margin-top:clamp(36px,4vw,52px);border-top:1px solid rgba(255,255,255,.08);padding-top:18px;font-size:12.5px}
.site-footer hr.hair{display:none}
.rd-chat-btn{height:50px;font-size:14px;padding:0 16px 0 6px}
.rd-chat-btn .av{width:36px;height:36px}
.rd-top{width:44px;height:44px}

/* ---------- Cookie consent ---------- */
.cl-consent{position:fixed;left:22px;bottom:84px;z-index:150;width:min(380px,calc(100vw - 32px));padding:16px 18px;border-radius:16px;background:#0D1226;border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 80px -20px rgba(0,0,0,.9);color:#F3F5FF;font-size:13.5px;line-height:1.5;animation:rdMsg .5s var(--rd-ease)}
.cl-consent div{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
.cl-consent button{height:38px;padding:0 16px;border-radius:10px;font-weight:600;font-size:13.5px;color:#F3F5FF;border:1px solid rgba(255,255,255,.18)}
.cl-consent button.yes{border:0;background:linear-gradient(100deg,#2F8CFF,#7C5CFF 55%,#E0359F)}
@media (max-width:760px){.cl-consent{left:16px;bottom:86px}}

/* ---------- 3D hero scenes ---------- */
.h3d{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity 1.6s var(--rd-ease)}
.h3d.is-on{opacity:1}
.h3d canvas{width:100%!important;height:100%!important;display:block}
@media (min-width:901px){.page-hero .h3d{-webkit-mask-image:linear-gradient(90deg,transparent 30%,#000 62%);mask-image:linear-gradient(90deg,transparent 30%,#000 62%)}}
@media (max-width:900px){.h3d{opacity:0}.h3d.is-on{opacity:.3}}
.has-3d .rd-loop{opacity:0;transition:opacity 1s}
.has-3d .page-hero .rd-img>i{opacity:.45}
.has-3d .hero .rd-img>i{opacity:.6}
.has-3d .page-hero .fx-orb{opacity:.15!important}

/* ---------- Chat extras + post page ---------- */
.rd-msg small{display:block;font-size:11px;opacity:.65;margin-top:4px}
.rd-chat-btn{position:fixed}
.rd-dot{position:absolute;top:6px;right:8px;width:10px;height:10px;border-radius:50%;background:#E0359F;box-shadow:0 0 0 3px #0D1226}
.rd-meta{margin-top:16px;font-size:13.5px;color:var(--ink-3)}
.rd-post .cover-img{margin-top:32px}
.post-body h2{font-size:clamp(21px,2vw,26px);margin:34px 0 10px}
.post-body h3{font-size:19px;margin:26px 0 8px}
.post-body p{font-size:17px;line-height:1.75;color:var(--ink-2);margin:0 0 16px}
.post-body ul{margin:0 0 16px;padding-left:22px;list-style:disc;color:var(--ink-2);font-size:17px;line-height:1.7}
.post-body blockquote{margin:22px 0;padding:14px 20px;border-left:3px solid var(--violet);background:rgba(124,92,255,.08);border-radius:0 12px 12px 0;font-size:18px}
.post-body figure{margin:24px 0}
.post-body img{width:100%;border-radius:16px;border:1px solid var(--line)}
.post-body a{color:#b9a8ff;text-decoration:underline}

/* ---------- Brand logo ---------- */
.brand{gap:0}
.brand-logo{display:block;height:54px;width:auto;max-width:none;transition:height .4s var(--rd-ease),filter .4s}
.site-nav.is-scrolled .brand-logo,.site-nav.scrolled .brand-logo{height:46px}
.brand:hover .brand-logo{filter:drop-shadow(0 0 14px rgba(124,92,255,.55))}
.mobile-menu .brand-logo{height:44px}
.site-footer .brand-logo{height:64px}
@media (max-width:760px){.brand-logo{height:42px}.site-footer .brand-logo{height:48px}}

/* =====================================================================
   v6 — light header with the original logo, clients, WhatsApp, compact heroes
   ===================================================================== */
.site-nav,.site-nav.is-scrolled{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid rgba(10,15,36,.08);box-shadow:0 10px 30px -22px rgba(10,15,60,.45)}
.has-announce .site-nav{top:36px}
.nav-links>a,.nav-links .has-mega>button{color:#2a3150;font-weight:600}
.nav-links>a:hover,.nav-links .has-mega:hover>button,.nav-links>a[aria-current="page"]{color:#0A0F24}
.site-nav .btn-ghost{color:#0A0F24;background:#fff;border-color:rgba(10,15,36,.16)}
.site-nav .btn-ghost .btn-arrow{background:rgba(10,15,36,.06)}
.site-nav .btn-ghost:hover{border-color:#7C5CFF;box-shadow:0 0 0 4px rgba(124,92,255,.12)}
.nav-toggle{background:#fff;border-color:rgba(10,15,36,.15)}
.nav-toggle span{background:#0A0F24}
.mega{background:#fff;border:1px solid rgba(10,15,36,.08);box-shadow:0 40px 80px -30px rgba(10,15,60,.35)}
.mega-col:hover{background:#F4F5FA}
.mega-col h5{color:#0A0F24}
.mega-desc{color:rgba(10,15,36,.55)}
.mega-col a{color:rgba(10,15,36,.75)}
.mega-col a:hover{color:#0A0F24}
.mobile-menu{background:rgba(255,255,255,.985)}
.mobile-menu::before{background:radial-gradient(circle,rgba(124,92,255,.12),transparent 60%)}
.mobile-menu-close{color:#0A0F24;border-color:rgba(10,15,36,.15)}
.mobile-links>a,.mobile-group-head{color:#0A0F24;border-bottom-color:rgba(10,15,36,.08)}
.mobile-group-head span{border-color:rgba(10,15,36,.18)}
.mobile-sub-list a{color:rgba(10,15,36,.7);border-left-color:rgba(10,15,36,.12)}
.mobile-menu-foot p{color:rgba(10,15,36,.5)}
.brand:hover .brand-logo{filter:none}
.site-footer .brand{background:#fff;padding:10px 16px;border-radius:16px;box-shadow:0 14px 40px -20px rgba(0,0,0,.8)}
.site-footer .brand-logo{height:52px}
.scroll-progress{z-index:101}

/* Footer contact */
.footer-contact{display:flex;flex-direction:column;gap:8px;margin-top:18px}
.footer-contact a{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:rgba(235,238,255,.85)}
.footer-contact a:hover{color:#fff}
.footer-contact svg{flex:none;width:18px;height:18px;color:#25D366}
.footer-contact a+a svg{color:#b9a8ff}

/* Clients — white slider */
.clients{position:relative;overflow:hidden;padding:clamp(56px,6vw,96px) 0;background:#fff;color:#0A0F24;--ink:#0A0F24;--ink-2:rgba(10,15,36,.7);--ink-3:rgba(10,15,36,.5);--line:rgba(10,15,36,.08)}
.cl-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px 40px;flex-wrap:wrap;margin-bottom:clamp(26px,3vw,40px)}
.cl-head>div{flex:1 1 520px;max-width:720px}
.cl-head .lede{margin-top:14px;color:var(--ink-2)}
.cs-nav{display:flex;gap:10px}
.cs-btn{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(10,15,36,.14);background:#fff;color:#0A0F24;transition:background .3s,color .3s,border-color .3s,transform .3s var(--rd-ease)}
.cs-btn:hover{background:#0A0F24;color:#fff;border-color:#0A0F24}
.cs-btn:active{transform:scale(.94)}
.cs{position:relative;margin:0 calc(var(--gutter) * -1);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--gutter),#000 calc(100% - var(--gutter)),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 var(--gutter),#000 calc(100% - var(--gutter)),transparent 100%)}
.cs-track{list-style:none;margin:0;padding:10px var(--gutter) 28px;display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-x:contain}
.cs-track::-webkit-scrollbar{display:none}
.cs-slide{flex:0 0 clamp(250px,26vw,330px);scroll-snap-align:start;display:flex;flex-direction:column;gap:14px;padding:12px 12px 18px;border-radius:24px;background:#fff;border:1px solid rgba(10,15,36,.08);box-shadow:0 20px 44px -30px rgba(10,15,60,.4);transition:transform .6s var(--rd-ease),box-shadow .6s var(--rd-ease),border-color .4s}
.cs-slide:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--c1) 45%,transparent);box-shadow:0 34px 60px -34px color-mix(in srgb,var(--c1) 75%,transparent)}
.cs-plate{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:2/1;background:#F6F7FB;border:1px solid rgba(10,15,36,.06)}
.cs-plate img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s var(--rd-ease)}
.cs-slide:hover .cs-plate img{transform:scale(1.05)}
.cs-plate::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-120%);transition:transform 1s var(--rd-ease)}
.cs-slide:hover .cs-plate::after{transform:translateX(120%)}
.cs-meta{display:flex;flex-direction:column;gap:2px;padding:0 6px}
.cs-meta::before{content:"";width:30px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--c1),var(--c2));margin-bottom:10px;transition:width .5s var(--rd-ease)}
.cs-slide:hover .cs-meta::before{width:56px}
.cs-meta b{font-family:var(--font-display);font-size:17px;color:#0A0F24}
.cs-meta small{font-size:13px;color:rgba(10,15,36,.55)}
.cs-dots{display:flex;justify-content:center;gap:8px;margin-top:6px}
.cs-dots button{width:8px;height:8px;border-radius:99px;background:rgba(10,15,36,.18);transition:width .4s var(--rd-ease),background .3s}
.cs-dots button[aria-selected="true"]{width:28px;background:linear-gradient(90deg,#2F8CFF,#7C5CFF,#E0359F)}
@media (max-width:760px){.cs-nav{display:none}.cs-slide{flex-basis:76vw}}
@media (prefers-reduced-motion:reduce){.cs-track{scroll-behavior:auto}}

/* WhatsApp */
.rd-wa-float{position:fixed;right:28px;bottom:86px;z-index:140;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:#25D366;color:#fff;box-shadow:0 14px 34px -12px rgba(37,211,102,.8);transition:transform .35s var(--rd-ease)}
.rd-wa-float:hover{transform:translateY(-3px) scale(1.05)}
.rd-wa-float svg{width:26px;height:26px}
.rd-wa{display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding:7px 12px;border-radius:999px;background:#25D366;color:#fff;font-size:13px;font-weight:700}
.rd-wa svg{width:16px;height:16px}
.rd-bar .wa{background:#25D366;border-color:#25D366}
.wa-card .ic{color:#25D366}
@media (max-width:760px){.rd-wa-float{display:none}}

/* Shorter banners */
.hero{min-height:0;padding:calc(var(--nav-h) + 28px) 0 48px}
.hero .engine{max-width:500px}
.hero-meta{margin-top:30px;padding-top:20px}
.hero .lede{margin-top:20px}
.hero-actions{margin-top:26px}
.scroll-cue{display:none}
.page-hero{min-height:0!important;padding:calc(var(--nav-h) + 36px) 0 48px}
.page-hero .lede{margin-top:18px}
.hero-visual{max-width:440px}

/* No numbered markers */
.st-idx,.section-index,.sv-panel .sv-num,.ef-count,.hs-count,.cap-card .cap-num{display:none!important}
.jstage .jn{font-size:0;width:14px;height:14px;left:18px;border-radius:50%}
.jstage .jn::after{content:none}
.numbered-list li::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--accent);flex:none}
span.idx{display:none}
.hub{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1024px){.hub{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.hub{grid-template-columns:1fr}}