/* ==========================================================================
   AAA+ Technology & Management Consulting Group
   One world: the navy of the footage, the light blue of its grids, the green of the plus.
   ========================================================================== */

:root{
  --canvas:#0B1633;
  --canvas-2:#0F1D42;
  --panel:#142654;
  --paper:#EEF2F8;
  --paper-2:#E3E9F3;
  --navy:#1E3A8A;
  --ink:#1F2937;
  --ink-2:#4B5563;
  --accent:#16A34A;
  --accent-hover:#22C55E;
  --accent-muted:rgba(22,163,74,.16);
  --light:#93C5FD;
  --light-muted:rgba(147,197,253,.14);
  --text:#F1F4FA;
  --text-2:#A9B6D3;
  --line:rgba(147,197,253,.16);
  --line-strong:rgba(147,197,253,.42);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --tshadow:0 1px 2px rgba(4,8,22,.95),0 3px 12px rgba(4,8,22,.78),0 10px 44px rgba(4,8,22,.8);
  --display:'Playfair Display',Georgia,'Times New Roman',serif;
  --body:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --col-x:clamp(24px,7vw,128px);
  --nav-h:76px;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--text);font:400 17px/1.6 var(--body);overflow-x:hidden;overflow-x:clip;animation:pagein 1.1s var(--ease) both}
@keyframes pagein{from{opacity:0}to{opacity:1}}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.sr-only,.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:-64px;z-index:100;background:var(--accent);color:#06122B;padding:10px 14px;border-radius:8px;font-weight:600;text-decoration:none;transition:top .3s var(--ease)}
.skip:focus{top:16px}
.mono{font-family:var(--mono);font-size:13px;letter-spacing:.04em}
section{scroll-margin-top:calc(var(--nav-h) - 8px)}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* ---------- the one fixed environment layer ---------- */
.env{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.env::before{content:"";position:absolute;left:-200px;top:-200px;width:calc(100% + 400px);height:calc(100% + 400px);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96' fill='none' stroke-width='1.6' stroke-linecap='round'%3E%3Cg stroke='%23A9B6D3'%3E%3Cpath d='M14 7v10M9 12h10'/%3E%3Cpath d='M30 49v10M25 54h10'/%3E%3Cpath d='M86 43v10M81 48h10'/%3E%3C/g%3E%3Cg stroke='%2393C5FD'%3E%3Cpath d='M58 21v10M53 26h10'/%3E%3C/g%3E%3Cg stroke='%2316A34A'%3E%3Cpath d='M74 77v10M69 82h10'/%3E%3C/g%3E%3C/svg%3E");background-size:96px 96px;opacity:.075;animation:drift 90s linear infinite}
.env::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 72% 18%,rgba(147,197,253,.11),transparent 70%),radial-gradient(ellipse 50% 40% at 18% 82%,rgba(30,58,138,.4),transparent 70%);animation:breathe 70s ease-in-out infinite -20s}
@keyframes drift{to{transform:translate(192px,192px)}}
@keyframes breathe{50%{opacity:.5}}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--nav-h);display:flex;align-items:center;gap:28px;padding:0 var(--col-x);transition:background .5s var(--ease),box-shadow .5s var(--ease)}
.nav.scrolled{background:rgba(9,18,44,.84);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.logo{display:inline-flex;align-items:center;text-decoration:none;line-height:1;color:var(--text);flex:none}
.logo-svg{display:block;height:52px;width:auto;color:var(--text);overflow:visible}
.foot-brand .logo-svg{height:58px}
.logo-mark{display:inline-flex;align-items:flex-start;font:800 27px/1 var(--body);letter-spacing:-.045em}
.logo-plus{width:12px;height:12px;fill:var(--accent);margin:-1px 0 0 2px;flex:none}
.logo-sub{font:700 7.3px/1 var(--body);letter-spacing:.13em;text-transform:uppercase;color:var(--text-2)}
.nav-links{display:flex;gap:26px;margin-left:auto}
.nav-links a{text-decoration:none;font-weight:500;font-size:14.5px;color:var(--text-2);position:relative;transition:color .3s;padding:6px 0}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--light);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.nav-links a:hover{color:var(--text)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-cta{padding:10px 18px;font-size:14px}
.menu-btn{display:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--line-strong);border-radius:12px;background:rgba(11,22,51,.5);flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;padding:0}
.menu-btn span{display:block;width:18px;height:1.5px;background:var(--text);transition:transform .4s var(--ease)}
.menu-btn[aria-expanded="true"] span:first-child{transform:translateY(3.75px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
.mobile-menu{position:fixed;left:0;right:0;top:var(--nav-h);background:rgba(9,18,44,.985);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);display:none;flex-direction:column;gap:4px;padding:14px 20px 24px;border-bottom:1px solid var(--line);transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .35s var(--ease),transform .35s var(--ease)}
.nav.open .mobile-menu{opacity:1;transform:none;pointer-events:auto}
.mobile-menu a{text-decoration:none;padding:12px 4px;font-weight:500;color:var(--text)}
.mobile-menu .btn{margin-top:12px;justify-content:center}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 24px;border-radius:999px;font-weight:600;font-size:15px;line-height:1.2;text-decoration:none;border:1px solid transparent;cursor:pointer;position:relative;text-shadow:none;transition:transform .5s var(--ease-out),background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease),box-shadow .5s var(--ease)}
.btn-primary{background:var(--accent);color:#06122B;box-shadow:0 8px 30px rgba(22,163,74,.22)}
.btn-primary:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 12px 36px rgba(22,163,74,.32)}
.btn-ghost{border-color:var(--line-strong);color:var(--text);background:rgba(11,22,51,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.btn-ghost:hover{border-color:var(--light);transform:translateY(-2px)}
.btn-wa{border-color:rgba(22,163,74,.55);color:#4ADE80;background:rgba(22,163,74,.08)}
.btn-wa svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.btn-wa:hover{background:rgba(22,163,74,.16);transform:translateY(-2px)}
@media (pointer:coarse){.btn{min-height:44px}}

/* ---------- shared type ---------- */
.kick{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--light);display:inline-flex;align-items:center;gap:10px;margin-bottom:18px}
.plus-i{width:12px;height:12px;stroke:var(--accent);stroke-width:2;stroke-linecap:round;fill:none;flex:none}
.plus-i path{stroke-dasharray:12;stroke-dashoffset:12;transition:stroke-dashoffset .7s var(--ease)}
.plus-i path:nth-child(2){transition-delay:.25s}
.in .plus-i path,.static-hero .plus-i path{stroke-dashoffset:0}
.band .plus-i path{transition:none;stroke-dashoffset:calc(12*(1 - var(--k,0)))}
.h2{font:500 clamp(30px,3.4vw,50px)/1.12 var(--display);letter-spacing:-.005em;max-width:22ch;color:var(--text)}
.h3{font:500 22px/1.3 var(--display)}
.lede{font-size:clamp(16px,1.2vw,18.5px);color:var(--text-2);max-width:56ch;margin-top:20px}
.rule{display:block;height:1px;width:min(220px,40%);background:var(--line-strong);margin-top:24px;transform:scaleX(0);transform-origin:left}
.rule.center{margin-left:auto;margin-right:auto;transform-origin:center}
.sec-head{max-width:780px}
.sec-head.center{margin:0 auto;text-align:center}
.sec-head.center .h2{margin:0 auto}
.sec-head.center .kick{justify-content:center}

/* ---------- sections ---------- */
.sec{position:relative;z-index:1;padding:clamp(88px,11vw,150px) 0}
.wrap{width:min(1200px,100% - 2*var(--col-x));margin:0 auto;position:relative}
.paper{background:var(--paper);color:var(--ink);overflow:hidden}
.paper::before{content:"";position:absolute;left:-200px;top:-200px;width:calc(100% + 400px);height:calc(100% + 400px);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96' fill='none' stroke-width='1.6' stroke-linecap='round'%3E%3Cg stroke='%231E3A8A'%3E%3Cpath d='M14 7v10M9 12h10'/%3E%3Cpath d='M30 49v10M25 54h10'/%3E%3Cpath d='M86 43v10M81 48h10'/%3E%3Cpath d='M58 21v10M53 26h10'/%3E%3C/g%3E%3Cg stroke='%2316A34A'%3E%3Cpath d='M74 77v10M69 82h10'/%3E%3C/g%3E%3C/svg%3E");background-size:96px 96px;opacity:.06;animation:drift 90s linear infinite;pointer-events:none}
.paper .kick{color:var(--navy)}
.paper .h2{color:var(--navy)}
.paper .lede{color:var(--ink-2)}
.paper .rule{background:rgba(30,58,138,.32)}
.paper .btn-ghost{color:var(--navy);border-color:rgba(30,58,138,.4);background:transparent}

/* ---------- reveal choreography ---------- */
.rv .p{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.rv.in .p{opacity:1;transform:translateY(0)}
.rv.in .rv-sub:not(.in) .p{opacity:0;transform:translateY(22px)}
.rv .rule.p{opacity:1;transform:scaleX(0);transition:transform 1.1s var(--ease);transition-delay:calc(var(--d,0s) + .2s)}
.rv.in .rule.p{transform:scaleX(1)}
.rv.done .card.p,.rv-sub.done .card.p{transition:transform .5s var(--ease-out),box-shadow .5s var(--ease),border-color .5s var(--ease)}

/* ==========================================================================
   HERO: the scroll-scrubbed descent
   ========================================================================== */
.hero{position:relative;height:700vh;z-index:1}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--canvas)}
.poster{position:absolute;inset:0;background:var(--canvas) center/cover no-repeat}
#hero{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s var(--ease);will-change:transform;transform:translateZ(0)}
.stage.video-ready #hero{opacity:1}
.stage.video-failed #hero{display:none}
.scrim{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 120% 90% at 58% 45%,rgba(6,10,26,0) 35%,rgba(6,10,26,.62) 100%),linear-gradient(90deg,rgba(6,10,26,.62) 0%,rgba(6,10,26,.34) 38%,rgba(6,10,26,0) 62%)}
.bands{position:absolute;inset:0}
.band{--k:0;position:absolute;left:var(--col-x);top:47%;transform:translateY(-50%);width:min(46vw,640px);opacity:0;pointer-events:none;text-shadow:var(--tshadow);isolation:isolate}
.band.live{pointer-events:auto}
.band::before{content:"";position:absolute;inset:-70% -70% -70% -75%;pointer-events:none;z-index:-1;opacity:calc(.3 + .7*var(--k));background:radial-gradient(ellipse closest-side at 46% 50%,rgba(4,8,22,.8) 0%,rgba(4,8,22,.72) 42%,rgba(4,8,22,.4) 72%,rgba(4,8,22,0) 100%)}
.band .kick{opacity:var(--k);transform:translateY(calc((1 - var(--k))*8px));margin-bottom:22px}
.chip{background:rgba(8,12,28,.55);border:1px solid rgba(147,197,253,.22);border-radius:10px;padding:7px 12px 7px 10px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);text-shadow:0 1px 3px rgba(4,8,22,.85)}
.h-hero{font:500 clamp(40px,4.6vw,66px)/1.08 var(--display);letter-spacing:-.01em;color:var(--text)}
.h-hero .line{display:block;position:relative;padding:.06em 0;margin:-.06em 0}
.h-band{font:500 clamp(30px,3.2vw,46px)/1.18 var(--display);color:var(--text)}
.h-settle{font:500 clamp(44px,5vw,72px)/1.06 var(--display);color:var(--text)}
.band .sub{margin-top:22px;font-size:clamp(16px,1.25vw,19px);color:var(--text-2);max-width:46ch}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.band .btn{text-shadow:none}
.vis .w{display:inline-block}
.vis .c{display:inline-block}

/* entrances, all transform and opacity, all scrubbed off --k */
.fx-blur .soft{position:absolute;left:0;top:0;right:0;filter:blur(12px);opacity:calc(1 - var(--k));pointer-events:none;padding:inherit}
.fx-blur .sharp{opacity:var(--k);display:block}
.fx-approach .w{--kc:clamp(0,(var(--k) - var(--th,0))*3,1);opacity:var(--kc);transform:scale(calc(.84 + .16*var(--kc)));transform-origin:left center}
.fx-grid .c{--kc:clamp(0,(var(--k) - var(--th,0))*2.6,1);opacity:var(--kc);transform:translateX(calc((1 - var(--kc))*var(--jx,0px)))}
.fx-weave .c{--kc:clamp(0,(var(--k) - var(--th,0))*2.6,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*var(--jy,0px))) rotate(calc((1 - var(--kc))*var(--jr,0deg)))}
.fx-rise .w{--kc:clamp(0,(var(--k) - var(--th,0))*3,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*22px))}
.fx-rise .sub{--ks:clamp(0,(var(--k) - .55)*3.5,1);opacity:var(--ks);transform:translateY(calc((1 - var(--ks))*12px))}
.fx-rise .cta-row{--kb:clamp(0,(var(--k) - .72)*4,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb))*12px))}

/* cue and loading ring */
.cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--text-2);transition:opacity .6s var(--ease)}
.cue svg{width:16px;height:16px;fill:none;stroke:var(--light);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(6px);opacity:1}}
.stage.scrolled .cue{opacity:0}
.ring{position:absolute;right:28px;bottom:24px;width:32px;height:32px;color:var(--light);transform:rotate(-90deg);opacity:.9;transition:opacity .8s var(--ease)}
.ring circle{transition:stroke-dashoffset .2s linear}
.stage.video-ready .ring,.stage.video-failed .ring{opacity:0}
@media (max-height:560px){.cue,.ring{display:none}}

/* phones and portrait tablets: the scrub runs on a portrait cut of the footage, captions in the upper region */
@media (max-width: 720px),(orientation: portrait) and (max-width: 1024px),(orientation: portrait) and (pointer: coarse){
  .hero{height:800vh}
  .scrim{background:linear-gradient(180deg,rgba(6,10,26,.55) 0%,rgba(6,10,26,.3) 34%,rgba(6,10,26,.08) 60%,rgba(6,10,26,.5) 100%)}
  .band{left:20px;right:20px;width:auto;top:calc(var(--nav-h) + 5svh);transform:none}
  .band::before{inset:-45% -20px -45% -20px;background:linear-gradient(180deg,rgba(4,8,22,0) 0%,rgba(4,8,22,.86) 24%,rgba(4,8,22,.86) 76%,rgba(4,8,22,0) 100%)}
  .chip{background:rgba(8,12,28,.74)}
  .band .kick{margin-bottom:16px;font-size:11px}
  .h-hero{font-size:clamp(32px,8.6vw,46px)}
  .h-band{font-size:clamp(25px,6.8vw,34px)}
  .h-settle{font-size:clamp(36px,9.6vw,50px)}
  .band .sub{font-size:15.5px;margin-top:16px}
  .cta-row{margin-top:22px;gap:10px}
  .cta-row .btn{width:100%}
  .cue{bottom:16px}
  .ring{right:16px;bottom:14px}
}

/* touch devices: no live blur over the moving video (it re-blurs every frame and stutters the scroll); solid tints instead */
@media (pointer: coarse),(max-width: 900px){
  .nav.scrolled{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(9,18,44,.94)}
  .chip,.btn-ghost,.engage li,.form,.mobile-menu{backdrop-filter:none;-webkit-backdrop-filter:none}
  .nav.open{background:rgba(9,18,44,.985)}
  .chip{background:rgba(8,12,28,.82)}
  .btn-ghost{background:rgba(11,22,51,.62)}
}

/* the designed static hero: the two remaining gates, identical to the JavaScript list; declared after the phone block so it wins when both match */
.static-hero{display:none}
@media (orientation: landscape) and (pointer: coarse) and (max-height: 560px),(prefers-reduced-motion: reduce){
  .hero{height:auto;min-height:100svh}
  .stage{position:relative;height:auto;min-height:100svh;display:flex;align-items:flex-end;background:var(--canvas) url("hero-poster.jpg") 62% center/cover no-repeat}
  .bands,.cue,.ring,#hero,.poster{display:none}
  .scrim{background:linear-gradient(180deg,rgba(6,10,26,.34) 0%,rgba(6,10,26,.1) 26%,rgba(6,10,26,.55) 52%,rgba(6,10,26,.9) 100%)}
  .static-hero{display:flex;flex-direction:column;align-items:flex-start;gap:18px;position:relative;z-index:2;padding:calc(var(--nav-h) + 72px) var(--col-x) 72px;max-width:820px;text-shadow:var(--tshadow)}
  .static-hero .kick{margin-bottom:0}
  .static-hero .h-hero{font-size:clamp(34px,8.4vw,62px)}
  .static-hero .sub{color:var(--text-2);font-size:16.5px;max-width:44ch}
  .static-hero .cta-row{margin-top:10px}
}

/* ==========================================================================
   A. WHO WE ARE
   ========================================================================== */
.who-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,72px);align-items:center}
.who-fig{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:16/10;border:1px solid var(--line);background:var(--panel)}
.who-fig img{width:100%;height:100%;object-fit:cover}
.fig-glow{position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 60% 45%,rgba(147,197,253,.26),transparent 70%);opacity:.45;mix-blend-mode:screen;pointer-events:none}
.on .fig-glow{animation:glowpulse 7s ease-in-out infinite -2s}
@keyframes glowpulse{50%{opacity:1}}
.facts{display:flex;gap:26px;flex-wrap:wrap;margin-top:30px;font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--light)}
.facts li{display:flex;align-items:center;gap:10px}
.facts li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px rgba(22,163,74,.7)}
.principles{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(56px,7vw,96px);border-top:1px solid var(--line)}
.principles li{padding:34px 28px 0 0;position:relative}
.principles li + li{padding-left:28px;border-left:1px solid var(--line)}
.principles .num{font-family:var(--mono);font-size:12px;color:var(--accent);letter-spacing:.12em}
.principles h3{font:500 24px/1.25 var(--display);margin:14px 0 12px}
.principles p{color:var(--text-2);font-size:15.5px;max-width:40ch}

/* ==========================================================================
   B. SOUND FAMILIAR? (paper)
   ========================================================================== */
.pain-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(40px,6vw,96px);align-items:start;position:relative;z-index:1}
.close-line{margin-top:34px;font:italic 500 clamp(22px,2vw,28px)/1.3 var(--display);color:var(--navy)}
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding-top:12px}
.quote{background:rgba(255,255,255,.74);border:1px solid rgba(30,58,138,.12);border-radius:16px;padding:26px 24px 24px;position:relative;box-shadow:0 24px 50px -32px rgba(30,58,138,.4)}
.quote:nth-child(even){margin-top:40px}
.qmark{font:italic 500 64px/.6 var(--display);color:var(--accent);display:block;height:26px;margin-bottom:12px}
.quote p{font:500 17.5px/1.45 var(--body);color:var(--ink)}
.drift-light{position:absolute;right:-12%;top:6%;width:46%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(147,197,253,.4),transparent 65%);pointer-events:none;z-index:0}
.on .drift-light{animation:driftlight 26s ease-in-out infinite -6s}
@keyframes driftlight{50%{transform:translate(-10%,12%)}}

/* ==========================================================================
   C. WHAT WE DO
   ========================================================================== */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:clamp(44px,5vw,72px);position:relative}
.services::before{content:"";position:absolute;top:-28px;left:0;width:22%;height:1px;background:linear-gradient(90deg,transparent,var(--light),transparent);opacity:0}
.on .services::before{opacity:.7;animation:sweep 9s linear infinite}
@keyframes sweep{from{transform:translateX(-100%)}to{transform:translateX(560%)}}
.card{background:linear-gradient(180deg,rgba(20,38,84,.72),rgba(20,38,84,.34));border:1px solid var(--line);border-radius:18px;padding:30px 28px;position:relative;overflow:hidden}
.card::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(147,197,253,.16),transparent 70%);opacity:0;transition:opacity .6s var(--ease);pointer-events:none}
.card:hover{border-color:var(--line-strong);transform:translateY(-4px);box-shadow:0 26px 60px -30px rgba(0,0,0,.65)}
.card:hover::after{opacity:1}
.ico{width:34px;height:34px;fill:none;stroke:var(--light);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-bottom:22px;position:relative}
.card h3{font:600 17.5px/1.3 var(--body);margin-bottom:10px;position:relative}
.card p{color:var(--text-2);font-size:15px;position:relative}

/* ==========================================================================
   D. HOW WE WORK (paper)
   ========================================================================== */
.steps{position:relative;display:grid;grid-template-columns:repeat(7,1fr);margin-top:clamp(44px,5vw,72px);padding-top:26px}
.steps-line{position:absolute;left:calc(100%/14);right:calc(100%/14);top:31px;height:2px;background:rgba(30,58,138,.14);border-radius:2px;overflow:hidden}
.steps-line .fill{position:absolute;inset:0;background:linear-gradient(90deg,var(--navy),var(--accent));transform:scaleX(var(--p,0));transform-origin:left}
.steps li{position:relative;text-align:center;padding:0 6px}
.steps .dot{display:block;width:12px;height:12px;border-radius:50%;background:var(--paper);border:2px solid rgba(30,58,138,.35);margin:0 auto;position:relative;z-index:1;transition:background .4s var(--ease),border-color .4s var(--ease),box-shadow .6s var(--ease)}
.steps li.lit .dot{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 6px rgba(22,163,74,.14)}
.steps .n{display:block;margin-top:16px;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;color:var(--ink-2);transition:color .4s}
.steps .t{display:block;margin-top:4px;font-weight:600;font-size:14.5px;color:var(--navy)}
.steps li.lit .n{color:var(--accent)}
.how-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);margin-top:clamp(64px,8vw,110px);align-items:center}
.pull{font:italic 500 clamp(26px,2.6vw,38px)/1.25 var(--display);color:var(--navy);max-width:22ch}
.how-text .body{margin-top:20px;color:var(--ink-2);max-width:52ch}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.chips li{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:8px 14px;border:1px solid rgba(30,58,138,.3);border-radius:999px;color:var(--navy)}
.how-fig{border-radius:18px;overflow:hidden;aspect-ratio:16/10;border:1px solid rgba(30,58,138,.15);box-shadow:0 30px 70px -40px rgba(30,58,138,.5);background:var(--navy)}
.how-fig img{width:100%;height:100%;object-fit:cover}

/* ==========================================================================
   E. THE CONNECTED JOURNEY (the interactive moment)
   ========================================================================== */
.journey{position:relative;height:clamp(320px,36vw,430px);margin-top:clamp(40px,5vw,64px);border:1px solid var(--line);border-radius:24px;background:radial-gradient(ellipse 70% 80% at 50% 50%,rgba(20,38,84,.6),rgba(11,22,51,.25));overflow:hidden}
.link-path{position:absolute;inset:0;width:100%;height:100%}
.link-path path{fill:none;stroke:var(--light);stroke-width:1.5;stroke-dasharray:var(--len,1000px);stroke-dashoffset:calc(var(--len,1000px)*(1 - var(--p,0)));opacity:.85;filter:drop-shadow(0 0 6px rgba(147,197,253,.6))}
.node{position:absolute;left:0;top:0;--on:clamp(0,(var(--p,0) - var(--t,0))*8,1);--x:calc(var(--sx) + (var(--lx) - var(--sx))*var(--p,0));--y:calc(var(--sy) + (var(--ly) - var(--sy))*var(--p,0));transform:translate(calc(var(--x)*var(--w,1000)/100*1px),calc(var(--y)*var(--h,400)/100*1px)) translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:8px}
.node:nth-child(1){--lx:8;--ly:36}.node:nth-child(2){--lx:20;--ly:36}.node:nth-child(3){--lx:32;--ly:36}.node:nth-child(4){--lx:44;--ly:36}
.node:nth-child(5){--lx:56;--ly:36}.node:nth-child(6){--lx:68;--ly:36}.node:nth-child(7){--lx:80;--ly:36}.node:nth-child(8){--lx:92;--ly:36}
.node .dot{width:12px;height:12px;border-radius:50%;border:1.5px solid var(--line-strong);background:var(--canvas);position:relative;display:block}
.node .dot::after{content:"";position:absolute;inset:-1.5px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px rgba(22,163,74,.85);opacity:var(--on)}
.node .lbl{font:500 12px/1 var(--body);letter-spacing:.02em;color:var(--text);opacity:calc(.42 + .58*var(--on));white-space:nowrap}
.hold-btn{position:absolute;left:50%;top:66%;transform:translate(-50%,-50%);width:116px;height:116px;border-radius:50%;border:1px solid var(--line-strong);background:rgba(11,22,51,.72);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:none;padding:0;transition:border-color .4s var(--ease),box-shadow .6s var(--ease)}
.hold-btn:hover{border-color:var(--light)}
.hold-ring{position:absolute;inset:-7px;border-radius:50%;background:conic-gradient(var(--accent) calc(var(--p,0)*360deg),rgba(147,197,253,.14) 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px))}
.on .hold-ring{animation:ringbreathe 5s ease-in-out infinite}
@keyframes ringbreathe{50%{opacity:.65}}
.hold-plus{width:30px;height:30px;fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:round;transition:transform .7s var(--ease-out)}
.hold-lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
.sec-journey.connected .hold-btn{border-color:var(--accent);box-shadow:0 0 0 8px rgba(22,163,74,.12),0 0 44px rgba(22,163,74,.35);cursor:default}
.sec-journey.connected .hold-plus{transform:scale(1.18)}
.sec-journey.connected .hold-ring{animation:none;opacity:1}
.hold-hint{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--text-2);white-space:nowrap;transition:opacity .5s var(--ease)}
.sec-journey.connected .hold-hint{opacity:0}
.layers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:22px}
.layer{border:1px solid var(--line);border-radius:16px;padding:26px 24px;background:rgba(20,38,84,.35);opacity:.28;transform:translateY(10px);transition:opacity .9s var(--ease),transform .9s var(--ease),border-color .9s var(--ease)}
.sec-journey.connected .layer{opacity:1;transform:none;border-color:var(--line-strong)}
.sec-journey.connected .layer:nth-child(2){transition-delay:.18s}
.sec-journey.connected .layer:nth-child(3){transition-delay:.36s}
.layer h3{font:500 21px/1.3 var(--display);margin-bottom:8px}
.layer p{color:var(--text-2);font-size:15px}
.foot-note{margin-top:26px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--text-2)}
.sec-journey .foot-note{text-align:center}

/* ==========================================================================
   F. WHO WE WORK WITH
   ========================================================================== */
.sec-ind{background:linear-gradient(180deg,rgba(15,29,66,0),rgba(15,29,66,.78) 16%,rgba(15,29,66,.78) 84%,rgba(15,29,66,0))}
.ind-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,6vw,96px);align-items:start}
.ind-fig{position:sticky;top:calc(var(--nav-h) + 24px);border-radius:18px;overflow:hidden;aspect-ratio:4/5;border:1px solid var(--line);background:var(--panel)}
.ind-fig img{width:100%;height:100%;object-fit:cover;transform:scale(1.04)}
.on .ind-fig img{animation:kenburns 40s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1.04) translate(0,0)}to{transform:scale(1.12) translate(-2%,2%)}}
.ind-list{margin-top:34px;border-top:1px solid var(--line)}
.ind-list li{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:22px 0;border-bottom:1px solid var(--line);align-items:baseline;transition:padding-left .5s var(--ease),background .5s var(--ease)}
.ind-list li:hover{padding-left:14px;background:linear-gradient(90deg,rgba(147,197,253,.07),transparent)}
.ind-list h3{font:500 20px/1.3 var(--display)}
.ind-list p{color:var(--text-2);font-size:15px}

/* ==========================================================================
   G. WHY AAA+ (paper)
   ========================================================================== */
.ledger{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(32px,5vw,80px);margin-top:clamp(40px,5vw,64px)}
.ledger li{display:grid;grid-template-columns:44px 1fr;gap:16px;padding:24px 0;border-bottom:1px solid rgba(30,58,138,.14);align-items:baseline}
.ledger .num{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--accent)}
.ledger h3{font:600 17px/1.3 var(--body);color:var(--navy)}
.ledger p{margin-top:6px;color:var(--ink-2);font-size:15px}
.marquee{margin-top:clamp(56px,7vw,96px);border-top:1px solid rgba(30,58,138,.14);border-bottom:1px solid rgba(30,58,138,.14);overflow:hidden;padding:16px 0;position:relative}
.track{display:flex;width:max-content}
.track span{font-family:var(--mono);font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--navy);padding:0 38px;position:relative;white-space:nowrap}
.track span::before{content:"+";position:absolute;left:-5px;color:var(--accent)}
.on .track{animation:slide 48s linear infinite}
@keyframes slide{to{transform:translateX(-25%)}}

/* ==========================================================================
   H. BEYOND CLIENT WORK
   ========================================================================== */
.sec-beyond{padding-top:0;padding-bottom:clamp(48px,6vw,80px)}
.sec-beyond .wrap{padding-top:clamp(56px,7vw,88px);border-top:1px solid var(--line)}
.beyond-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px)}
.beyond-grid .h3{margin-bottom:12px}
.beyond-grid p{color:var(--text-2);font-size:15.5px;max-width:58ch}
.shimmer{position:absolute;top:-1px;left:0;height:1px;width:30%;background:linear-gradient(90deg,transparent,var(--light),transparent);opacity:0}
.on .shimmer{opacity:.8;animation:shimmer 8s ease-in-out infinite}
@keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(433%)}}

/* ==========================================================================
   I. FAQ
   ========================================================================== */
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,5vw,80px);align-items:start}
.faq-head{position:sticky;top:calc(var(--nav-h) + 24px)}
.faq{border-top:1px solid var(--line)}
.faq:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font:500 19px/1.35 var(--display)}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--line-strong);position:relative;transition:transform .5s var(--ease-out),border-color .4s var(--ease),background .4s var(--ease)}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:var(--light);transform:translate(-50%,-50%)}
.faq summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq.open summary i{transform:rotate(45deg);border-color:var(--accent);background:var(--accent-muted)}
.ans-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.faq.open .ans-wrap{grid-template-rows:1fr}
.ans{overflow:hidden}
.ans p{padding:0 50px 24px 0;color:var(--text-2);font-size:15.5px;max-width:60ch}

/* ==========================================================================
   J. WAYS TO ENGAGE + THE CALL TO ACTION
   ========================================================================== */
.sec-cta{overflow:hidden}
.cta-bg{position:absolute;inset:0;background:var(--canvas) url("hero-ending.jpg") center/cover no-repeat}
.cta-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--canvas) 0%,rgba(11,22,51,.82) 26%,rgba(11,22,51,.8) 72%,var(--canvas) 100%)}
.particles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.particles i{position:absolute;bottom:-10px;width:4px;height:4px;border-radius:50%;background:var(--light);opacity:0;box-shadow:0 0 10px rgba(147,197,253,.8)}
.on .particles i{animation-name:rise;animation-timing-function:linear;animation-iteration-count:infinite}
@keyframes rise{0%{transform:translateY(0);opacity:0}10%{opacity:.55}90%{opacity:.35}100%{transform:translateY(-110vh);opacity:0}}
.engage{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:clamp(40px,5vw,64px)}
.engage li{border:1px solid var(--line);border-radius:16px;padding:24px 20px;background:rgba(11,22,51,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.engage .num{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--accent)}
.engage h3{font:600 14.5px/1.3 var(--body);margin:14px 0 8px;text-transform:uppercase;letter-spacing:.08em}
.engage p{color:var(--text-2);font-size:14.5px}
.cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);margin-top:clamp(72px,9vw,128px);align-items:start}
.alt-contact{margin-top:32px;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.email-line{color:var(--text-2);font-size:15px}
.email-line a{color:var(--light)}
.form{background:rgba(11,22,51,.66);border:1px solid var(--line);border-radius:22px;padding:32px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);position:relative}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.field label{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--light)}
.field input,.field textarea{font:inherit;font-size:16px;color:var(--text);background:rgba(20,38,84,.5);border:1px solid var(--line-strong);border-radius:12px;padding:14px 16px;transition:border-color .3s var(--ease),box-shadow .3s var(--ease);width:100%;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:rgba(169,182,211,.62)}
.field input:focus-visible,.field textarea:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-muted)}
.btn-wide{width:100%;margin-top:6px}
.micro{margin-top:14px;font-size:13px;color:var(--text-2);text-align:center}
.form-error{margin-top:12px;color:#FCA5A5;font-size:14px;text-align:center}
.success{position:absolute;inset:0;border-radius:22px;background:rgba(11,22,51,.97);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px;gap:16px}
.success[hidden]{display:none}
.success svg{width:44px;height:44px;stroke:var(--accent);stroke-width:2;fill:none;stroke-linecap:round}
.success p{color:var(--text-2);max-width:40ch}
.success-mail a{color:var(--light)}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{position:relative;z-index:1;border-top:1px solid var(--line);padding:64px 0 32px;background:rgba(7,14,34,.72)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.foot-tag{margin-top:18px;font:italic 500 18px/1.4 var(--display);color:var(--text-2);max-width:26ch}
.foot-col{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.foot-col h4{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--light);margin-bottom:6px;font-weight:500}
.foot-col a{text-decoration:none;color:var(--text-2);font-size:14.5px;transition:color .3s var(--ease)}
.foot-col a:hover{color:var(--text)}
.foot-col .mono{color:var(--text-2);margin-top:8px}
.foot-base{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;margin-top:56px;padding-top:24px;border-top:1px solid var(--line);color:var(--text-2)}
.foot-line{font:italic 500 15px var(--display);color:var(--text-2)}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (min-width:901px){.mobile-menu{display:none}}
@media (max-width:1180px){.nav{gap:18px}.nav-links{gap:18px}.nav-links a{font-size:13.5px}}
@media (max-width:1100px){
  .services{grid-template-columns:repeat(2,1fr)}
  .engage{grid-template-columns:repeat(3,1fr)}
  .ledger{grid-template-columns:1fr}
}
@media (max-width:900px){
  .nav-links,.nav-cta{display:none}
  .menu-btn{display:flex}
  .mobile-menu{display:flex}
  .who-grid,.pain-grid,.how-grid,.ind-grid,.faq-grid,.cta-grid,.beyond-grid{grid-template-columns:1fr}
  .principles{grid-template-columns:1fr}
  .principles li + li{padding-left:0;border-left:0;border-top:1px solid var(--line);margin-top:28px}
  .ind-fig{position:relative;top:auto;aspect-ratio:16/10}
  .faq-head{position:static}
  .layers{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr;gap:18px;padding-top:0;padding-left:34px}
  .steps-line{left:5px;right:auto;top:6px;bottom:6px;width:2px;height:auto}
  .steps-line .fill{transform:scaleY(var(--p,0));transform-origin:top}
  .steps li{text-align:left;display:grid;grid-template-columns:auto auto;gap:4px 12px;align-items:baseline;padding:0;justify-content:start}
  .steps .dot{position:absolute;left:-34px;top:5px;margin:0}
  .steps .n,.steps .t{margin:0}
  .link-path{display:none}
  .journey{height:430px}
  .node:nth-child(1){--lx:14;--ly:16}.node:nth-child(2){--lx:38;--ly:16}.node:nth-child(3){--lx:62;--ly:16}.node:nth-child(4){--lx:86;--ly:16}
  .node:nth-child(5){--lx:14;--ly:37}.node:nth-child(6){--lx:38;--ly:37}.node:nth-child(7){--lx:62;--ly:37}.node:nth-child(8){--lx:86;--ly:37}
  .node:nth-child(1){--sx:20!important;--sy:12!important}.node:nth-child(2){--sx:22!important;--sy:46!important}.node:nth-child(3){--sx:40!important;--sy:8!important}.node:nth-child(4){--sx:46!important;--sy:30!important}
  .node:nth-child(5){--sx:62!important;--sy:14!important}.node:nth-child(6){--sx:70!important;--sy:30!important}.node:nth-child(7){--sx:84!important;--sy:10!important}.node:nth-child(8){--sx:80!important;--sy:46!important}
  .hold-btn{top:71%}
  .hold-hint{bottom:10px;font-size:11px;white-space:normal;width:78%;text-align:center;line-height:1.4}
}
@media (max-width:720px){
  :root{--col-x:20px;--nav-h:64px}
  .logo-mark{font-size:24px}
  .logo-svg{height:44px}
  .services{grid-template-columns:1fr}
  .engage{grid-template-columns:1fr 1fr}
  .quotes{grid-template-columns:1fr}
  .quote:nth-child(even){margin-top:0}
  .foot-grid{grid-template-columns:1fr}
  .form{padding:24px 20px}
  .ind-list li{grid-template-columns:1fr;gap:6px}
  .ledger li{grid-template-columns:36px 1fr}
  .journey{height:380px}
  .node .lbl{font-size:11px}
  .h2{max-width:none}
}
@media (max-width:480px){
  .engage{grid-template-columns:1fr}
  .hold-btn{width:104px;height:104px}
  .cta-row .btn{width:100%}
}

/* ==========================================================================
   REDUCED MOTION: final states shown, every drive stopped
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  html{scroll-behavior:auto}
  body{opacity:1}
  .rv .p,.rv.in .rv-sub:not(.in) .p{opacity:1;transform:none}
  .rv .rule.p{transform:scaleX(1)}
  .plus-i path{stroke-dashoffset:0!important}
  .steps{--p:1!important}
  .steps .dot{background:var(--accent);border-color:var(--accent)}
  .steps .n{color:var(--accent)}
  .journey{--p:1!important}
  .layer{opacity:1;transform:none;border-color:var(--line-strong)}
  .hold-hint{opacity:0}
  .link-path path{stroke-dashoffset:0}
  .particles i,.shimmer,.services::before{opacity:0}
  .fig-glow{opacity:.6}
  .hold-btn{transform:translate(-50%,-50%)}
  .cue{opacity:0}
}

/* ==========================================================================
   STAGE ONE OF THE CONTENT MASTER: trust strip, frictions, seven-step deliverables, about, the full enquiry form, legal pages
   ========================================================================== */
.sec-trust{padding:clamp(56px,7vw,88px) 0}
.sec-trust .wrap{padding:clamp(28px,3.5vw,44px) clamp(24px,3.5vw,48px);border:1px solid var(--line);border-radius:22px;background:linear-gradient(180deg,rgba(20,38,84,.55),rgba(20,38,84,.25))}
.trust-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(24px,4vw,56px);align-items:center}
.trust-h{font-size:clamp(24px,2.3vw,34px);max-width:20ch}
.trust-chips{display:flex;flex-wrap:wrap;gap:10px}
.trust-chips li{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--light);padding:9px 14px;border:1px solid var(--line-strong);border-radius:999px;display:inline-flex;align-items:center;gap:8px}
.trust-chips li::before{content:"+";color:var(--accent);font-weight:600}
.frictions .quote{padding:22px 22px 20px}
.frictions .fnum{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--accent);display:block;margin-bottom:10px}
.frictions .quote.wide{grid-column:1 / -1;margin-top:0}
.notes{margin-top:26px;display:grid;gap:8px}
.note{font-size:13px;line-height:1.55;color:var(--text-2);max-width:96ch;padding-left:14px;border-left:2px solid var(--line-strong)}
.steps .d{display:none}
.steps-7 .d{display:block;margin-top:8px;font-size:12.5px;line-height:1.45;color:var(--ink-2);padding:0 4px}
.chal{color:var(--ink-2)}
.ind-3 li{grid-template-columns:1fr 1fr 1fr}
.ind-3 .chal{color:var(--text-2);font-size:14.5px}
.ind-3 .sol{color:var(--light);font-size:14.5px}
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,72px);align-items:center}
.about-text .body{margin-top:18px;color:var(--ink-2);max-width:60ch}
.threeA{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:clamp(48px,6vw,80px)}
.threeA li{background:rgba(255,255,255,.74);border:1px solid rgba(30,58,138,.12);border-radius:18px;padding:28px 26px;box-shadow:0 24px 50px -32px rgba(30,58,138,.4)}
.threeA .num{font:600 40px/1 var(--display);color:var(--accent);display:block;margin-bottom:14px}
.threeA h3{font:500 24px/1.25 var(--display);color:var(--navy);margin-bottom:10px}
.threeA p{color:var(--ink-2);font-size:15px}
.about-lower{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);margin-top:clamp(48px,6vw,80px)}
.diff .h3{color:var(--navy);margin-bottom:16px}
.diff-list li{padding:12px 0 12px 26px;border-bottom:1px solid rgba(30,58,138,.14);color:var(--ink);font-size:15px;position:relative}
.diff-list li::before{content:"+";position:absolute;left:0;top:10px;color:var(--accent);font-weight:600}
.mv{display:grid;gap:18px;align-content:start}
.mv-block{border-left:2px solid var(--accent);padding:4px 0 4px 20px}
.mv-block h3{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);margin-bottom:8px;font-weight:500}
.mv-block p{color:var(--ink-2);font-size:15px}
.contact-block{font-style:normal;margin-top:28px;display:grid;gap:6px;color:var(--text-2);font-size:15px}
.contact-block strong{color:var(--text);font-weight:600;margin-bottom:4px}
.contact-block a{color:var(--light);text-decoration:none;width:max-content}
.contact-block a:hover{text-decoration:underline}
.form-full .field-row{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.field label em{font-style:normal;text-transform:none;letter-spacing:0;color:var(--text-2)}
.field select{font:inherit;font-size:16px;color:var(--text);background:rgba(20,38,84,.5) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%2393C5FD' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center/14px;border:1px solid var(--line-strong);border-radius:12px;padding:14px 40px 14px 16px;width:100%;appearance:none;-webkit-appearance:none;transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.field select:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-muted)}
.field select option{color:#06122B;background:#fff}
.radios{border:0;padding:0;margin:0 0 18px;display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center}
.radios legend{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--light);margin-bottom:10px;width:100%}
.radios label{display:inline-flex;align-items:center;gap:8px;font-size:15px;cursor:pointer}
.radios input,.consent input{accent-color:var(--accent);width:18px;height:18px;flex:none}
.consent{display:flex;align-items:flex-start;gap:12px;font-size:14px;color:var(--text-2);line-height:1.5;margin:4px 0 18px;cursor:pointer}
.consent input{margin-top:2px}
.hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.form-fail{margin-top:12px;color:#FCA5A5;font-size:14px;text-align:center}
.form-fail a{color:var(--light)}
.form.sending .btn-wide{opacity:.7;pointer-events:none}
.radios{flex-direction:row;align-items:center}
.radios label{font-family:var(--body);font-size:15px;letter-spacing:0;text-transform:none;color:var(--text)}
.sec-cta .cta-grid{margin-top:0}
@media (max-width:900px){
  .steps-7 li{grid-template-columns:auto 1fr;justify-items:start;gap:2px 12px}
  .steps-7 .t{justify-self:start;text-align:left}
}
.foot-values{margin-top:18px;font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--light)}
.foot-values + .foot-tag{margin-top:8px}
.foot-legal{display:flex;gap:18px;flex-wrap:wrap}
.foot-legal a{color:var(--text-2);text-decoration:none;font-size:13.5px}
.foot-legal a:hover{color:var(--text)}
.legal-page{animation:none}
.legal{padding:calc(var(--nav-h) + 56px) 0 80px;position:relative;z-index:1}
.legal .wrap{max-width:820px}
.legal h1{margin-top:6px;max-width:none}
.legal .meta{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:var(--text-2);margin:18px 0 40px}
.legal h2{font:500 24px/1.3 var(--display);margin:36px 0 12px;color:var(--text)}
.legal p,.legal li{color:var(--text-2);font-size:16px;line-height:1.7}
.legal ul{list-style:disc;padding-left:22px;display:grid;gap:8px}
.legal a{color:var(--light)}
.legal-links{margin-top:48px;padding-top:24px;border-top:1px solid var(--line)}
.footer-min{padding:28px 0}
.footer-min .foot-base{margin-top:0;padding-top:0;border-top:0}
@media (max-width:1100px){.ind-3 li{grid-template-columns:1fr 1fr}.ind-3 .sol{grid-column:1 / -1}}
@media (max-width:900px){
  .trust-grid,.about-grid,.about-lower{grid-template-columns:1fr}
  .threeA{grid-template-columns:1fr}
  .steps-7 .d{margin-top:2px;grid-column:1 / -1;padding:0}
  .form-full .field-row{grid-template-columns:1fr}
  .ind-3 li{grid-template-columns:1fr}
  .ind-3 .sol{grid-column:auto}
}

/* ==========================================================================
   STAGE TWO: dedicated pages (page hero, blocks, checklists, spec cards, stage table, CTA band)
   ========================================================================== */
.page-hero{position:relative;z-index:1;min-height:min(60vh,600px);display:flex;align-items:flex-end;padding:calc(var(--nav-h) + 80px) 0 64px;overflow:hidden}
.page-hero .bg{position:absolute;inset:0;background:var(--canvas) url("hero-ending.jpg") center 45%/cover no-repeat}
.page-hero .bg-ind{background-image:url("industries.jpg")}
.page-hero .bg-how{background-image:url("how-we-work.jpg")}
.page-hero .bg-about{background-image:url("who-we-are.jpg")}
.stage-table li > div{display:flex;align-items:baseline;gap:10px}
.stage-table h3{margin-left:0}
.page-hero h1 strong,.checks strong{font-weight:600}
.paper .checks strong{color:var(--navy)}
.page-hero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,10,26,.5) 0%,rgba(11,22,51,.66) 55%,var(--canvas) 100%),linear-gradient(90deg,rgba(6,10,26,.62) 0%,rgba(6,10,26,0) 62%)}
.page-hero .wrap{position:relative;text-shadow:var(--tshadow)}
.page-hero h1{font:500 clamp(36px,4.4vw,64px)/1.08 var(--display);letter-spacing:-.01em;max-width:18ch;color:var(--text)}
.page-hero .lede{color:var(--text-2);max-width:60ch;margin-top:22px}
.page-hero .cta-row{margin-top:30px}
.page-hero .btn{text-shadow:none}
.crumbs{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);display:flex;gap:10px;align-items:center;margin-bottom:20px}
.crumbs a{color:var(--light);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs span::before{content:"/";margin-right:10px;opacity:.5}
.blocks{margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--line)}
.block{display:grid;grid-template-columns:110px 1fr;gap:24px;padding:36px 0;border-bottom:1px solid var(--line)}
.block .num{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--accent);padding-top:10px}
.block h3{font:500 26px/1.25 var(--display);margin-bottom:10px}
.block > div > p{color:var(--text-2);max-width:62ch}
.more{display:inline-flex;align-items:center;gap:8px;margin-top:18px;color:var(--light);text-decoration:none;font-weight:500;font-size:15px;position:relative}
.more::after{content:"+";color:var(--accent);font-weight:600;transition:transform .4s var(--ease-out)}
.more:hover{text-decoration:underline}
.more:hover::after{transform:translateX(3px)}
.card .more{margin-top:16px;font-size:14px}
.sec-head .more{margin-top:22px}
.paper .blocks,.paper .block{border-color:rgba(30,58,138,.14)}
.paper .block h3{color:var(--navy)}
.paper .block > div > p{color:var(--ink-2)}
.paper .more{color:var(--navy)}
.paper .note{color:var(--ink-2);border-color:rgba(30,58,138,.3)}
.paper .faq,.paper .faq:last-child{border-color:rgba(30,58,138,.14)}
.paper .faq summary i{border-color:rgba(30,58,138,.35)}
.paper .faq summary i::before,.paper .faq summary i::after{background:var(--navy)}
.paper .faq .ans p{color:var(--ink-2)}
.sec:not(.paper) .chips li{border-color:var(--line-strong);color:var(--light)}
.sec:not(.paper) .how-fig{border-color:var(--line);box-shadow:0 30px 70px -40px rgba(0,0,0,.6)}
.spec.three{grid-template-columns:repeat(3,1fr)}
.checks{display:grid;grid-template-columns:repeat(2,1fr);gap:0 32px;margin-top:18px}
.checks li{padding:10px 0 10px 24px;border-bottom:1px solid var(--line);position:relative;color:var(--text-2);font-size:15px;line-height:1.5}
.checks li::before{content:"+";position:absolute;left:0;top:9px;color:var(--accent);font-weight:600}
.paper .checks li{border-color:rgba(30,58,138,.14);color:var(--ink)}
.checks.one{grid-template-columns:1fr;max-width:640px}
.spec{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:clamp(40px,5vw,64px)}
.spec li{border:1px solid var(--line);border-radius:18px;padding:28px 26px;background:linear-gradient(180deg,rgba(20,38,84,.62),rgba(20,38,84,.28))}
.spec .for{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--light);display:block;margin-bottom:12px}
.spec h3{font:500 25px/1.25 var(--display);margin-bottom:8px}
.spec p{color:var(--text-2);font-size:15px}
.paper .spec li{background:rgba(255,255,255,.74);border-color:rgba(30,58,138,.12);box-shadow:0 24px 50px -32px rgba(30,58,138,.4)}
.paper .spec .for{color:var(--accent)}
.paper .spec h3{color:var(--navy)}
.paper .spec p{color:var(--ink-2)}
.stage-table{margin-top:clamp(40px,5vw,64px);border-top:1px solid rgba(30,58,138,.14)}
.stage-table li{display:grid;grid-template-columns:150px 1.2fr 1fr;gap:20px;padding:22px 0;border-bottom:1px solid rgba(30,58,138,.14);align-items:baseline}
.stage-table .n{font-family:var(--mono);font-size:12px;color:var(--accent);letter-spacing:.12em}
.stage-table h3{font:600 17px/1.3 var(--body);color:var(--navy);display:inline;margin-left:10px}
.stage-table p{color:var(--ink-2);font-size:15px}
.stage-table .get{color:var(--navy);font-weight:500}
.stage-table .head{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);padding:12px 0}
.cta-band{position:relative;z-index:1;padding:clamp(64px,8vw,110px) 0}
.cta-band .wrap{border:1px solid var(--line);border-radius:24px;padding:clamp(32px,5vw,56px);background:linear-gradient(135deg,rgba(20,38,84,.72),rgba(11,22,51,.5));display:grid;grid-template-columns:1.4fr 1fr;gap:32px;align-items:center}
.cta-band h2{font:500 clamp(28px,3vw,42px)/1.15 var(--display);max-width:22ch}
.cta-band p{color:var(--text-2);margin-top:12px;max-width:54ch}
.cta-band .cta-row{justify-content:flex-end;margin-top:0}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:start;margin-top:clamp(40px,5vw,64px)}
.two-col .h3{margin-bottom:12px}
.two-col p{color:var(--text-2);max-width:56ch}
.paper .two-col p{color:var(--ink-2)}
.paper .two-col .h3{color:var(--navy)}
.nav-links a.active{color:var(--text)}
.nav-links a.active::after{transform:scaleX(1)}
@media (max-width:900px){
  .block{grid-template-columns:1fr;gap:8px}
  .checks,.spec,.spec.three,.two-col{grid-template-columns:1fr}
  .stage-table li{grid-template-columns:1fr;gap:6px}
  .stage-table .head{display:none}
  .cta-band .wrap{grid-template-columns:1fr}
  .cta-band .cta-row{justify-content:flex-start}
  .page-hero{min-height:0;padding-top:calc(var(--nav-h) + 56px)}
}

/* ==========================================================================
   START PAGE: the one-page summary for people who want the short version
   ========================================================================== */
.start-nav .nav-links{display:none}
.start-nav .lang{margin-left:auto}
[dir="rtl"] .start-nav .lang{margin-left:0;margin-right:auto}
.start-nav .nav-cta{display:inline-flex}
@media (max-width:720px){.start-nav .nav-cta{padding:9px 14px;font-size:13px}.start-nav{gap:14px}}
.start-hero{position:relative;z-index:1;padding:calc(var(--nav-h) + 56px) 0 clamp(56px,7vw,96px);overflow:hidden}
.start-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 78% 40%,rgba(147,197,253,.16),transparent 70%);pointer-events:none}
.start-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,6vw,88px);align-items:center}
.start-hero h1{font:500 clamp(34px,4.2vw,58px)/1.1 var(--display);letter-spacing:-.01em;color:var(--text);max-width:16ch}
.start-hero .lede{margin-top:22px;max-width:52ch;font-size:clamp(16px,1.25vw,19px)}
.start-fig{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:1/1;border:1px solid var(--line);background:var(--panel);box-shadow:0 40px 90px -50px rgba(0,0,0,.7)}
.start-fig img{width:100%;height:100%;object-fit:cover;display:block}
.paths{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:34px}
.path{display:flex;flex-direction:column;gap:10px;padding:24px 24px 22px;border-radius:18px;text-decoration:none;border:1px solid var(--line);background:linear-gradient(180deg,rgba(20,38,84,.72),rgba(20,38,84,.34));color:var(--text);transition:transform .5s var(--ease-out),border-color .35s var(--ease),box-shadow .5s var(--ease)}
.path:hover{transform:translateY(-3px);border-color:var(--line-strong);box-shadow:0 26px 60px -30px rgba(0,0,0,.65)}
.path.primary{background:linear-gradient(180deg,rgba(22,163,74,.28),rgba(22,163,74,.12));border-color:rgba(22,163,74,.5)}
.path .k{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--light)}
.path.primary .k{color:#4ADE80}
.path strong{font:600 19px/1.3 var(--body)}
.path span{color:var(--text-2);font-size:15px;line-height:1.5}
.path .go{margin-top:auto;padding-top:8px;font-weight:600;font-size:15px;color:var(--text)}
.path .go::after{content:" \2192";color:var(--accent)}
[dir="rtl"] .path .go::after{content:" \2190"}
.offer{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:clamp(36px,5vw,64px)}
.offer li{background:rgba(255,255,255,.8);border:1px solid rgba(30,58,138,.12);border-radius:18px;overflow:hidden;box-shadow:0 24px 50px -32px rgba(30,58,138,.4);display:flex;flex-direction:column}
.offer figure{margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--navy)}
.offer img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease)}
.offer li:hover img{transform:scale(1.04)}
.offer .t{padding:20px 22px 22px}
.offer h3{font:600 18px/1.3 var(--body);color:var(--navy);margin-bottom:8px}
.offer p{color:var(--ink-2);font-size:15px;line-height:1.55}
.offer .more{margin-top:12px;font-size:14px}
.who{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.who li{font:500 15px/1 var(--body);color:var(--text);padding:12px 16px;border:1px solid var(--line-strong);border-radius:999px;background:rgba(11,22,51,.4)}
.who li::before{content:"+ ";color:var(--accent);font-weight:700}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:clamp(36px,5vw,64px)}
.three li{padding:26px 24px;border-radius:18px;border:1px solid rgba(30,58,138,.12);background:rgba(255,255,255,.8)}
.three .n{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--accent);display:block;margin-bottom:12px}
.three h3{font:500 22px/1.3 var(--display);color:var(--navy);margin-bottom:8px}
.three p{color:var(--ink-2);font-size:15px}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:clamp(36px,5vw,64px)}
.facts li{padding:22px 24px;border-left:2px solid var(--accent)}
.facts strong{display:block;font:600 17px/1.3 var(--body);color:var(--text);margin-bottom:6px}
.facts p{color:var(--text-2);font-size:15px}
[dir="rtl"] .facts li{border-left:0;border-right:2px solid var(--accent)}
.start-contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:start;margin-top:clamp(36px,5vw,56px)}
.start-contact .panel{border:1px solid var(--line);border-radius:22px;padding:clamp(24px,3vw,36px);background:linear-gradient(135deg,rgba(20,38,84,.72),rgba(11,22,51,.5))}
.start-contact .panel h3{font:500 26px/1.25 var(--display);margin-bottom:8px}
.start-contact .panel > p{color:var(--text-2);margin-bottom:20px}
.start-contact .stack{display:flex;flex-direction:column;gap:12px;align-items:stretch}
.start-contact .stack .btn{justify-content:center;width:100%}
.start-contact .links{display:grid;gap:10px;margin-top:18px}
.start-contact .links a{color:var(--light);text-decoration:none;font-size:15px}
.start-contact .links a:hover{text-decoration:underline}
.paper .start-contact .panel{background:rgba(255,255,255,.82);border-color:rgba(30,58,138,.12);box-shadow:0 24px 50px -32px rgba(30,58,138,.4)}
.paper .start-contact .panel h3{color:var(--navy)}
.paper .start-contact .panel > p{color:var(--ink-2)}
.paper .start-contact .links a{color:var(--navy)}
.paper .btn-wa{color:#15803D;border-color:rgba(22,163,74,.55);background:rgba(22,163,74,.1)}
.paper .btn-wa:hover{background:rgba(22,163,74,.18)}
.paper .facts strong{color:var(--navy)}
.paper .facts p{color:var(--ink-2)}
@media (max-width:1000px){
  .offer{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .start-grid,.three,.facts,.start-contact,.paths{grid-template-columns:1fr}
  .start-fig{aspect-ratio:4/3;max-width:560px}
  .start-hero{padding-top:calc(var(--nav-h) + 32px)}
}
@media (max-width:560px){
  .offer{grid-template-columns:1fr}
}

/* ==========================================================================
   LANGUAGE SWITCH
   ========================================================================== */
.lang{font-family:var(--mono);font-size:13px;letter-spacing:.04em;border:1px solid var(--line-strong);border-radius:999px;padding:7px 12px;text-decoration:none;color:var(--text);white-space:nowrap;line-height:1;transition:border-color .3s var(--ease),background .3s var(--ease)}
.lang:hover{border-color:var(--light);background:rgba(147,197,253,.08)}
.lang[lang="ar"]{font-family:'Tajawal',system-ui,sans-serif;font-size:15px;letter-spacing:0;font-weight:500;padding:6px 12px 8px}
.mobile-menu .lang{align-self:flex-start;margin-top:8px}

/* word-level entrances (the Arabic page uses these, because Arabic letters must stay joined) */
.fx-drift .w{--kc:clamp(0,(var(--k) - var(--th,0))*2.8,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*-24px))}
.fx-weavew .w{--kc:clamp(0,(var(--k) - var(--th,0))*2.8,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*var(--jy,0px)))}

/* ==========================================================================
   ARABIC, right to left: the same page mirrored, with Arabic type
   ========================================================================== */
[dir="rtl"]{--display:'Amiri',Georgia,serif;--body:'Tajawal',system-ui,sans-serif}
[dir="rtl"] body{font-size:17.5px;line-height:1.75}
[dir="rtl"] .h-hero,[dir="rtl"] .h-band,[dir="rtl"] .h-settle,[dir="rtl"] .h2{letter-spacing:0;line-height:1.32;font-weight:700}
[dir="rtl"] .h3,[dir="rtl"] .principles h3,[dir="rtl"] .layer h3,[dir="rtl"] .ind-list h3,[dir="rtl"] .faq summary{font-weight:700}
[dir="rtl"] .pull,[dir="rtl"] .close-line,[dir="rtl"] .foot-tag,[dir="rtl"] .foot-line{font-style:normal;font-weight:700}
[dir="rtl"] .qmark{font-family:var(--display);font-style:normal}
[dir="rtl"] .kick,[dir="rtl"] .facts,[dir="rtl"] .chips li,[dir="rtl"] .track span,[dir="rtl"] .field label,[dir="rtl"] .foot-col h4,[dir="rtl"] .engage h3,[dir="rtl"] .hold-lbl,[dir="rtl"] .cue,[dir="rtl"] .foot-note,[dir="rtl"] .hold-hint,[dir="rtl"] .logo-sub,[dir="rtl"] .mono{font-family:var(--body);letter-spacing:0;text-transform:none}
[dir="rtl"] .kick{font-size:14px;font-weight:500}
[dir="rtl"] .hold-lbl{font-size:12px}
[dir="rtl"] .facts,[dir="rtl"] .chips li,[dir="rtl"] .track span,[dir="rtl"] .field label,[dir="rtl"] .foot-col h4{font-size:14px;font-weight:500}
[dir="rtl"] .engage h3{font-size:16px}
[dir="rtl"] .logo{direction:ltr}
[dir="rtl"] .logo-sub{font-size:10px;font-weight:700;text-align:left}
[dir="rtl"] .nav-links{margin-left:0;margin-right:auto}
[dir="rtl"] .menu-btn{margin-left:0;margin-right:auto}
[dir="rtl"] .nav-links a{font-size:15.5px}
[dir="rtl"] .nav-links a::after{transform-origin:right}
[dir="rtl"] .skip{left:auto;right:16px}
[dir="rtl"] .rule{transform-origin:right}
[dir="rtl"] .rule.center{transform-origin:center}
[dir="rtl"] .band{left:auto;right:var(--col-x)}
[dir="rtl"] .band::before{background:radial-gradient(ellipse closest-side at 54% 50%,rgba(4,8,22,.8) 0%,rgba(4,8,22,.72) 42%,rgba(4,8,22,.4) 72%,rgba(4,8,22,0) 100%)}
[dir="rtl"] .scrim{background:radial-gradient(ellipse 120% 90% at 42% 45%,rgba(6,10,26,0) 35%,rgba(6,10,26,.62) 100%),linear-gradient(270deg,rgba(6,10,26,.62) 0%,rgba(6,10,26,.34) 38%,rgba(6,10,26,0) 62%)}
[dir="rtl"] #hero{transform:translateZ(0) scaleX(-1)}
[dir="rtl"] .poster{transform:scaleX(-1)}
[dir="rtl"] .ring{right:auto;left:28px}
[dir="rtl"] .fx-approach .w{transform-origin:right center}
[dir="rtl"] .principles li{padding:34px 0 0 28px}
[dir="rtl"] .principles li + li{padding-left:0;border-left:0;padding-right:28px;border-right:1px solid var(--line)}
[dir="rtl"] .steps-line .fill{transform-origin:right}
[dir="rtl"] .ind-list li:hover{padding-left:0;padding-right:14px;background:linear-gradient(270deg,rgba(147,197,253,.07),transparent)}
[dir="rtl"] .ans p{padding:0 0 24px 50px}
[dir="rtl"] .link-path{transform:scaleX(-1)}
[dir="rtl"] .node{transform:translate(calc((100 - var(--x))*var(--w,1000)/100*1px),calc(var(--y)*var(--h,400)/100*1px)) translate(-50%,-50%)}
@keyframes slide-rtl{to{transform:translateX(25%)}}
[dir="rtl"] .on .track{animation-name:slide-rtl}
[dir="rtl"] .track span::before{left:auto;right:-5px}
[dir="rtl"] .lang[lang="en"]{font-family:var(--mono);font-size:13px;letter-spacing:.04em;padding:7px 12px}
/* stage-one and stage-two components in RTL */
[dir="rtl"] .page-hero h1,[dir="rtl"] .block h3,[dir="rtl"] .spec h3,[dir="rtl"] .cta-band h2,[dir="rtl"] .threeA h3{letter-spacing:0;line-height:1.32;font-weight:700}
[dir="rtl"] .page-hero .bg::after{background:linear-gradient(180deg,rgba(6,10,26,.5) 0%,rgba(11,22,51,.66) 55%,var(--canvas) 100%),linear-gradient(270deg,rgba(6,10,26,.62) 0%,rgba(6,10,26,0) 62%)}
[dir="rtl"] .crumbs,[dir="rtl"] .block .num,[dir="rtl"] .spec .for,[dir="rtl"] .stage-table .n,[dir="rtl"] .stage-table .head,[dir="rtl"] .mv-block h3,[dir="rtl"] .steps .n{font-family:var(--body);letter-spacing:0;text-transform:none}
[dir="rtl"] .crumbs{font-size:13.5px}
[dir="rtl"] .foot-values{font-family:var(--body);letter-spacing:0;text-transform:none;font-weight:500;font-size:14px}
[dir="rtl"] .legal ul{padding-left:0;padding-right:22px}
[dir="rtl"] .legal .meta{font-family:var(--body);letter-spacing:0;font-size:14px}
[dir="rtl"] .legal h2{font-weight:700;line-height:1.4}
[dir="rtl"] .legal p,[dir="rtl"] .legal li{font-size:17px;line-height:1.8}
[dir="rtl"] .crumbs span::before{margin-right:0;margin-left:10px}
[dir="rtl"] .spec .for,[dir="rtl"] .stage-table .head,[dir="rtl"] .mv-block h3{font-size:13.5px;font-weight:500}
[dir="rtl"] .checks li{padding:10px 24px 10px 0}
[dir="rtl"] .checks li::before{left:auto;right:0}
[dir="rtl"] .diff-list li{padding:12px 26px 12px 0}
[dir="rtl"] .diff-list li::before{left:auto;right:0}
[dir="rtl"] .mv-block{border-left:0;border-right:2px solid var(--accent);padding:4px 20px 4px 0}
[dir="rtl"] .note{padding-left:0;padding-right:14px;border-left:0;border-right:2px solid var(--line-strong)}
[dir="rtl"] .more:hover::after{transform:translateX(-3px)}
[dir="rtl"] .stage-table h3{margin-left:0}
[dir="rtl"] .ind-3 li:hover{padding-left:0}
[dir="rtl"] .steps-7 .t{text-align:center}
@media (max-width:900px){
  [dir="rtl"] .steps-7 li{justify-items:end}
  [dir="rtl"] .steps-7 .t{text-align:right}
}
@media (max-width:900px){
  [dir="rtl"] .steps{padding-left:0;padding-right:34px}
  [dir="rtl"] .steps-line{left:auto;right:5px}
  [dir="rtl"] .steps .dot{left:auto;right:-34px}
  [dir="rtl"] .steps-line .fill{transform-origin:top}
  [dir="rtl"] .principles li{padding-left:0}
  [dir="rtl"] .principles li + li{padding-right:0;border-right:0}
}
@media (max-width: 720px),(orientation: portrait) and (max-width: 1024px),(orientation: portrait) and (pointer: coarse){
  [dir="rtl"] .band{left:20px;right:20px}
  [dir="rtl"] .band::before{background:linear-gradient(180deg,rgba(4,8,22,0) 0%,rgba(4,8,22,.86) 24%,rgba(4,8,22,.86) 76%,rgba(4,8,22,0) 100%)}
  [dir="rtl"] .scrim{background:linear-gradient(180deg,rgba(6,10,26,.55) 0%,rgba(6,10,26,.3) 34%,rgba(6,10,26,.08) 60%,rgba(6,10,26,.5) 100%)}
  [dir="rtl"] .ring{left:16px;right:auto}
}