@font-face{font-family:'Satoshi';src:url("/_astro/satoshi-variable.CFg-z2ne.woff2") format('woff2');font-weight:300 900;font-style:normal;font-display:block}
/* =========================================================================
   ARVONN — glass theme
   Deep navy field, blue light, frosted panels. Motion settles with weight.
   html.motion = full motion, html.calm = reduced motion (set in <head>).
   ========================================================================= */
:root{
  --bg:#050b24;--navy:#09173f;--navy2:#0e2a7a;--blue:#2a4bef;--blue2:#6f8dff;--sky:#ccd9ff;
  --tx:#f5f7ff;--tx2:#b7c2ea;--tx3:#8f9cd0;
  --line:rgba(172,192,255,.26);--line2:rgba(188,204,255,.4);
  --grad:linear-gradient(135deg,#2743d7,#3558f0 45%,#7d9bff);
  --blur:blur(22px) saturate(1.6);
  --r:28px;--gut:clamp(18px,4vw,56px);--navh:78px;
  --ease:cubic-bezier(.19,1,.22,1);
  --fd:"Satoshi",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 392.5 366.6'%3E%3Cpath d='M330.5,49.6C312.8,18.9,280.2,0,244.6,0h-97.1c-35.4,0-68.3,18.9-86,49.6L13.3,133.7c-17.7,30.7-17.7,68.5,0,99.2l48.5,84.1c17.7,30.7,50.3,49.6,86,49.6h97.1c35.4,0,68.3-18.9,86-49.6l48.5-84.1c17.7-30.7,17.7-68.5,0-99.2l-48.5-84.1h-.2ZM249.2,274.9h-107.4c-45.7,0-74.1-49.4-51.2-89l53.6-92.9c22.8-39.6,79.9-39.6,102.7,0l53.6,92.9c22.8,39.6-5.8,89-51.2,89Z'/%3E%3C/svg%3E");
  --i-ur:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E");
  --i-r:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M14 6l6 6-6 6'/%3E%3C/svg%3E");
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scrollbar-color:#2b3d96 #050b24;overflow-x:clip;scroll-padding-top:104px}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--tx);font:400 1rem/1.6 var(--fd);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}
img,video,svg,canvas{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,dl,dd{margin:0}
button{font:inherit;color:inherit}
::selection{background:#2a4bef;color:#fff}
:focus-visible{outline:2px solid #a9bcff;outline-offset:3px}
[hidden]{display:none!important}
html.menu-open{overflow:hidden}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:16px;top:-90px;z-index:200;padding:12px 18px;border-radius:14px;background:#fff;color:#09173f;font-weight:600;text-decoration:none;transition:top .3s}
.skip:focus{top:16px}
.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic.f{fill:currentColor;stroke:none}

/* ---------- the field behind everything ---------- */
.bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:
  radial-gradient(90% 70% at 0% 0%,rgba(36,62,206,.5) 0%,rgba(36,62,206,0) 60%),
  radial-gradient(80% 70% at 100% 100%,rgba(42,75,239,.55) 0%,rgba(42,75,239,0) 62%),
  linear-gradient(180deg,#060d2c,#040919)}
.bg canvas{position:absolute;inset:0;width:100%;height:100%}
.bg::after{content:"";position:absolute;inset:0;opacity:.07;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- layout + type ---------- */
.wrap{width:min(1320px,calc(100% - 2*var(--gut)));margin-inline:auto}
.sec{position:relative;padding:clamp(84px,11vw,170px) 0}
.lbl{display:inline-flex;align-items:center;gap:11px;font-size:.72rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--tx2)}
.lbl::before{content:"";width:12px;height:11px;flex:none;background:var(--blue2);-webkit-mask:var(--mark) center/contain no-repeat;mask:var(--mark) center/contain no-repeat}
.h2{margin-top:20px;font-size:clamp(2.3rem,5.4vw,5.2rem);line-height:1.02;letter-spacing:-.04em;font-weight:500;text-wrap:balance}
.h2 b,.grad{font-weight:700;background:linear-gradient(100deg,#fff 0%,#ccd9ff 40%,#6f8dff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.ln{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em}
.ln>span{display:block}
.lead{font-size:clamp(1.02rem,1.3vw,1.24rem);line-height:1.55;color:var(--tx2);max-width:46ch}
.head{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:20px clamp(24px,5vw,80px);align-items:end}
.head .lbl{grid-column:1/-1;justify-self:start}
.head .h2{margin-top:0}
.head.c{display:block;text-align:center}
.head.c .h2{margin-top:20px}
.head.c .lead{margin:24px auto 0}

/* ---------- glass ---------- */
.glass{position:relative;border-radius:var(--r);background:linear-gradient(150deg,rgba(136,164,255,.24) 0%,rgba(80,112,242,.11) 44%,rgba(24,46,134,.2) 100%);box-shadow:inset 0 0 0 1px var(--line),inset 0 1px 0 rgba(255,255,255,.2),0 40px 80px -44px rgba(0,5,36,.9);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.glass{background:linear-gradient(150deg,rgba(40,62,160,.92),rgba(12,24,84,.94))}}
/* visitors who ask for less transparency get solid panels */
@media (prefers-reduced-transparency:reduce){.glass,.nav,.menu,.cs-dlg,.reel-bar{-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(150deg,#22379c,#0c1854)}}
/* light that follows the pointer across a panel and along its edge */
.spot{isolation:isolate}
.spot::before,.spot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .6s}
.spot::before{z-index:-1;background:radial-gradient(520px circle at var(--mx,50%) var(--my,-40%),rgba(132,160,255,.22),transparent 62%)}
.spot::after{padding:1px;background:radial-gradient(340px circle at var(--mx,50%) var(--my,-40%),rgba(226,233,255,.95),rgba(132,160,255,.3) 46%,transparent 72%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.spot-group:hover .spot::before,.spot-group:hover .spot::after,.spot:hover::before,.spot:hover::after{opacity:1}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:0 26px;border:0;border-radius:999px;font:500 1rem/1 var(--fd);letter-spacing:-.01em;color:#fff;text-decoration:none;white-space:nowrap;cursor:pointer;transition:transform .7s var(--ease),box-shadow .5s,background-color .5s}
.btn-p{background:linear-gradient(165deg,#6b93ff 0%,#2a4bef 46%,#1730dd 100%);background-origin:border-box;box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 -2px 6px rgba(0,0,60,.35),0 0 0 1px #1a33d6,0 18px 44px -12px rgba(42,75,239,.8)}
.btn-p:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 6px rgba(0,0,60,.35),0 0 0 1px #1a33d6,0 26px 60px -12px rgba(62,98,255,.95)}
.btn-w{background:#fff;color:#0b1c66;font-weight:600;box-shadow:0 14px 40px -14px rgba(160,185,255,.7)}
.btn-w:hover{box-shadow:0 20px 50px -14px rgba(190,205,255,.95)}
.btn-g{background:rgba(124,152,255,.1);box-shadow:inset 0 0 0 1px var(--line2);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.btn-g:hover{background:rgba(124,152,255,.2)}
.btn-sm{min-height:46px;padding:0 20px;font-size:.94rem}
.btn-lg{min-height:64px;padding:0 28px 0 30px;font-size:1.1rem;font-weight:600;letter-spacing:-.02em}
.btn .ic{transition:transform .6s var(--ease)}
.btn:hover .ic{transform:rotate(-14deg) translate(2px,-2px)}
.arr{position:relative;display:inline-block;width:18px;height:18px;overflow:hidden;flex:none}
.arr::before,.arr::after{content:"";position:absolute;inset:0;background:currentColor;-webkit-mask:var(--i-ur) center/100% no-repeat;mask:var(--i-ur) center/100% no-repeat;transition:transform .55s var(--ease)}
.arr::after{transform:translate(-125%,125%)}
:is(a,button):hover .arr::before{transform:translate(125%,-125%)}
:is(a,button):hover .arr::after{transform:none}
.arr.r::before,.arr.r::after{-webkit-mask-image:var(--i-r);mask-image:var(--i-r)}
.arr.r::after{transform:translateX(-135%)}
:is(a,button):hover .arr.r::before{transform:translateX(135%)}
.magnet{transition:transform .7s var(--ease),box-shadow .5s,background-color .5s}
.tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.tags li{padding:7px 13px;border-radius:999px;font-size:.82rem;line-height:1.3;color:#e3e9ff;background:rgba(124,152,255,.13);box-shadow:inset 0 0 0 1px rgba(170,190,255,.22)}

/* ---------- reveal ---------- */
html.js [data-rv]{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease) var(--d,0s),transform 1.2s var(--ease) var(--d,0s)}
html.js [data-rv].in{opacity:1;transform:none}
html.js [data-rvh] .ln>span{transform:translateY(112%);transition:transform 1.25s var(--ease)}
html.js [data-rvh] .ln:nth-child(2)>span{transition-delay:.09s}
html.js [data-rvh] .ln:nth-child(3)>span{transition-delay:.18s}
html.js [data-rvh].in .ln>span{transform:none}
html.calm [data-rv]{transform:none;transition:opacity .6s ease var(--d,0s)}
html.calm [data-rvh] .ln>span{transform:none;opacity:0;transition:opacity .6s ease}
html.calm [data-rvh].in .ln>span{opacity:1}

/* safety net: if the page script has not reported in after a few seconds, show everything */
html.safe [data-rv],html.safe .fadeup,html.safe .mf .w,html.safe .step,html.safe .pr-list li{opacity:1!important;transform:none!important}
html.safe [data-rvh] .ln>span,html.safe .hero h1 .ln>span{opacity:1!important;transform:none!important}
html.safe .pre{display:none!important}

/* ---------- intro: the page opens through the mark ---------- */
.pre{display:none}
html.motion .pre{display:block;position:fixed;inset:0;z-index:100;pointer-events:none;animation:preBail .01s 6s forwards}
html.motion .pre.done{display:none}
.pre svg{position:absolute;inset:0;width:100%;height:100%}
/* a hairline just under the mark fills while the mark holds, then fades as the page opens through the mark.
   clamp(96px,14vmin,150px) is the mark's width, as the inline script in index.astro sizes it */
.pre-line{position:absolute;left:50%;top:calc(50% + clamp(96px,14vmin,150px)*.414 + 34px);width:calc(clamp(96px,14vmin,150px)*.7);height:2px;translate:-50% 0;border-radius:2px;background:rgba(160,180,255,.16);overflow:hidden;transition:opacity .35s}
.pre-line i{display:block;height:100%;background:linear-gradient(90deg,#2a4bef,#ccd9ff 70%,#fff);transform-origin:0 50%;transform:scaleX(0)}
.pre.zoom .pre-line{opacity:0}
@keyframes preBail{to{visibility:hidden}}

/* ---------- pointer extras (the normal pointer always stays) ---------- */
.cur-lbl{display:none}
@media (hover:hover) and (pointer:fine){
  .cur-lbl{display:inline-flex;align-items:center;gap:8px;position:fixed;left:0;top:0;z-index:95;pointer-events:none;margin:22px 0 0 18px;padding:7px 13px;border-radius:999px;font-size:.76rem;font-weight:600;letter-spacing:.03em;color:#fff;background:rgba(42,75,239,.88);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),0 14px 34px -10px rgba(42,75,239,.8);opacity:0;scale:.6;transition:opacity .3s,scale .45s var(--ease)}
  .cur-lbl::before{content:"";width:6px;height:6px;border-radius:50%;background:#ccd9ff}
  .cur-lbl.on{opacity:1;scale:1}
}

/* ---------- nav ---------- */
.nav{position:fixed;z-index:60;left:50%;top:14px;translate:-50% 0;width:min(1320px,calc(100% - 28px));height:64px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 9px 0 22px;border-radius:999px;background:linear-gradient(135deg,rgba(128,156,255,.2),rgba(20,38,120,.34));box-shadow:inset 0 0 0 1px rgba(176,194,255,.26),inset 0 1px 0 rgba(255,255,255,.2),0 22px 50px -22px rgba(0,5,40,.9);-webkit-backdrop-filter:blur(20px) saturate(1.7);backdrop-filter:blur(20px) saturate(1.7);transition:height .6s var(--ease),top .6s var(--ease),background-color .5s}
.nav.scrolled{height:58px;top:10px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:#fff}
.brand .bm{width:29px;height:27px;color:#4a6bff;transition:rotate 1s var(--ease),width .7s var(--ease),margin .7s var(--ease),opacity .5s ease,scale .7s var(--ease)}
/* homepage, while the 3D mark is on screen: the wordmark alone in the bar. The mark slides in once the 3D mark has gone (app.js) */
.nav.solo .brand .bm{width:0;margin-right:-10px;opacity:0;scale:.6}
.brand:hover .bm{rotate:60deg}
.brand .wm{width:96px;height:auto;color:#fff}
.nav nav{position:absolute;left:50%;top:50%;translate:-50% -50%}
.nav ul{position:relative;display:flex;gap:2px;list-style:none;margin:0;padding:5px;border-radius:999px;background:rgba(4,10,40,.36);box-shadow:inset 0 0 0 1px rgba(160,180,255,.14)}
.nav li a{position:relative;z-index:1;display:block;padding:8px 16px;border-radius:999px;font-size:.92rem;font-weight:500;line-height:1.4;color:var(--tx2);text-decoration:none;transition:color .4s}
.nav li a:hover,.nav li a.on{color:#fff}
.nav-hl{position:absolute;left:0;top:5px;bottom:5px;width:0;border-radius:999px;background:rgba(132,160,255,.24);box-shadow:inset 0 0 0 1px rgba(196,210,255,.32);opacity:0;transition:transform .6s var(--ease),width .6s var(--ease),opacity .4s}
.nav-r{display:flex;align-items:center;gap:8px}
.nav-prog{position:absolute;left:30px;right:30px;bottom:0;height:1px;background:linear-gradient(90deg,rgba(142,166,255,0),#a9bcff 12%,#a9bcff 88%,rgba(142,166,255,0));transform-origin:0 50%;transform:scaleX(var(--p,0));pointer-events:none}
.burger{display:none;position:relative;width:46px;height:46px;border:0;border-radius:50%;background:rgba(124,152,255,.16);box-shadow:inset 0 0 0 1px var(--line2);cursor:pointer}
.burger i{position:absolute;left:14px;right:14px;height:1.5px;background:#fff;transition:transform .5s var(--ease),top .5s var(--ease)}
.burger i:nth-child(1){top:19px}.burger i:nth-child(2){top:26px}
.menu-open .burger i:nth-child(1){top:22.5px;transform:rotate(45deg)}
.menu-open .burger i:nth-child(2){top:22.5px;transform:rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:55;display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding:calc(var(--navh) + 30px) var(--gut) 30px;background:linear-gradient(160deg,rgba(26,46,150,.82),rgba(5,11,36,.94));-webkit-backdrop-filter:blur(26px) saturate(1.5);backdrop-filter:blur(26px) saturate(1.5);overflow:auto;visibility:hidden;opacity:0;transition:opacity .45s,visibility 0s .45s}
.menu-open .menu{visibility:visible;opacity:1;transition-delay:0s}
.menu a.m{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0;border-bottom:1px solid rgba(160,180,255,.16);font-size:clamp(2rem,9vw,3.2rem);font-weight:600;letter-spacing:-.04em;line-height:1.1;text-decoration:none;opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .8s var(--ease)}
.menu a.m small{font-size:.74rem;font-weight:500;letter-spacing:.2em;color:var(--tx3)}
.menu-open .menu a.m{opacity:1;transform:none;transition-delay:calc(var(--i)*.05s + .1s)}
.menu-foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:var(--tx2);font-size:.92rem}
@media (max-width:920px){.nav nav{display:none}.burger{display:block}.nav{padding-left:18px}}
@media (max-width:420px){.nav .btn-sm{padding:0 15px;font-size:.88rem}.nav .btn-sm .arr{display:none}.brand .wm{width:84px}}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;min-height:100vh;min-height:100svh;padding:calc(var(--navh) + 34px) 0 34px;display:flex;flex-direction:column}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(46% 56% at 76% 52%,rgba(42,75,239,.36),transparent 72%),radial-gradient(36% 44% at 6% 26%,rgba(42,75,239,.2),transparent 72%)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(150,175,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(150,175,255,.055) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse 85% 80% at 50% 40%,#000 25%,transparent 78%);mask-image:radial-gradient(ellipse 85% 80% at 50% 40%,#000 25%,transparent 78%)}
.hero .wrap{flex:1;display:flex;flex-direction:column}
.hero-top{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.status{display:inline-flex;align-items:center;gap:10px;padding:5px 16px 5px 5px;border-radius:999px;font-size:.88rem;font-weight:500;color:#dfe6ff;background:linear-gradient(135deg,rgba(132,160,255,.2),rgba(132,160,255,.06));box-shadow:inset 0 0 0 1px rgba(176,194,255,.3);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.status b{padding:5px 12px;border-radius:999px;background:var(--grad);font-size:.78rem;font-weight:600;line-height:1.4;color:#fff}
.hero-main{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;padding:40px 0 10px}
.hero h1{font-size:clamp(3.2rem,7.6vw,8.2rem);line-height:.9;letter-spacing:-.03em;font-weight:700;text-transform:uppercase;color:#fff}
.hero h1 .ln{padding:.04em 0 .1em;margin-bottom:-.06em}
.hero h1 .ln>span{display:inline-block}
.hero h1 .ln:last-child>span{background:linear-gradient(90deg,#fff 0%,#e3eaff 22%,#ccd9ff 45%,#8ea6ff 72%,#5f7fff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
html.js .hero h1 .ln>span{transform:translateY(112%) rotate(4deg);transform-origin:0 100%;transition:transform 1.4s var(--ease) .15s}
html.js .hero h1 .ln:last-child>span{transition-delay:.26s}
/* the small line above the headline that names the agency */
.hero h1 .h1-k{display:flex;width:max-content;margin-bottom:clamp(18px,2.4vw,30px);font-size:.78rem;line-height:1.4;text-transform:uppercase}
html.js .hero.go h1 .ln>span{transform:none}
html.js .fadeup{opacity:0;transform:translateY(26px);transition:opacity 1.1s var(--ease) var(--d,0s),transform 1.3s var(--ease) var(--d,0s)}
html.js .hero.go .fadeup{opacity:1;transform:none}
html.calm .hero h1 .ln>span,html.calm .fadeup{transform:none!important;opacity:1!important;transition:none}
.hero-copy p{max-width:44ch;margin-top:34px;font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.45;letter-spacing:-.015em;color:#b4bfe8}
.hero-copy p b{color:#fff;font-weight:500}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px;margin-top:40px}
/* the primary action sits in a selection frame: constructed, not styled */
.sel{position:relative;padding:16px 18px}
.sel::before{content:"";position:absolute;left:-60px;right:-60px;top:0;bottom:0;border-block:1px solid;border-image:linear-gradient(90deg,transparent,rgba(150,175,255,.3) 20%,rgba(150,175,255,.3) 80%,transparent) 1;pointer-events:none}
.sel::after{content:"";position:absolute;left:0;right:0;top:-46px;bottom:-46px;border-inline:1px solid;border-image:linear-gradient(transparent,rgba(150,175,255,.3) 30%,rgba(150,175,255,.3) 70%,transparent) 1;pointer-events:none}
.sel i{position:absolute;z-index:2;width:9px;height:9px;background:#09173f;border:1.5px solid #8fabff;transition:scale .5s var(--ease)}
.sel i:nth-of-type(1){left:-4px;top:-4px}.sel i:nth-of-type(2){right:-4px;top:-4px}.sel i:nth-of-type(3){left:-4px;bottom:-4px}.sel i:nth-of-type(4){right:-4px;bottom:-4px}
.sel:hover i{scale:1.35}
.hero-bot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:30px;padding-top:18px;border-top:1px solid rgba(150,175,255,.16);font-size:.9rem;color:#8f9cd0}
.hero-bot>span b{color:#fff;font-weight:600}
.hero-bot dl{display:flex;gap:clamp(20px,3vw,40px);flex-wrap:wrap}
.hero-bot dl div{display:flex;flex-direction:column-reverse}
.hero-bot dd{font-size:1.5rem;font-weight:600;letter-spacing:-.04em;line-height:1.1;background:linear-gradient(104deg,#fff 0%,#cfe0ff 45%,#7fb0ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.scroll-ind{display:inline-flex;align-items:center;gap:10px}
.scroll-ind i{position:relative;width:22px;height:34px;border:1.5px solid #fff;border-radius:12px}
.scroll-ind i::after{content:"";position:absolute;left:50%;top:6px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:#8fabff}
html.motion .scroll-ind i::after{animation:sc 1.8s var(--ease) infinite}
@keyframes sc{0%{transform:translateY(0);opacity:1}70%{transform:translateY(12px);opacity:0}100%{transform:translateY(0);opacity:0}}
/* 3D mark stage (the 3D object itself is drawn by the module at the end of the page) */
.mark3d{position:relative;width:100%;max-width:620px;justify-self:end;aspect-ratio:1/1;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.mark3d.drag{cursor:grabbing}
.mark3d canvas{position:absolute;left:-14%;top:-10%;width:128%;height:120%;max-width:none;display:block;opacity:0;transition:opacity 1.2s var(--ease);-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 72%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 72%,transparent 100%)}
.mark3d.gl-ready canvas{opacity:1}
.m3-fallback{position:absolute;left:22%;top:24%;width:56%;height:auto;filter:drop-shadow(0 30px 60px rgba(42,75,239,.6));transition:opacity .6s}
.mark3d.gl-ready .m3-fallback{opacity:0}
.m3-glow{position:absolute;left:4%;right:4%;top:16%;height:68%;border-radius:50%;background:radial-gradient(ellipse at 50% 50%,rgba(42,75,239,.55),rgba(39,67,215,.18) 45%,transparent 70%);filter:blur(28px)}
html.motion .m3-glow{animation:m3pulse 7s ease-in-out infinite}
@keyframes m3pulse{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
@media (max-width:960px){
  .hero-main{grid-template-columns:1fr;padding-top:24px}
  .mark3d{justify-self:center;max-width:480px;order:-1;margin-top:10px}
}
/* short desktop screens: lift the copy so the first screen still holds the headline, both actions and the trust line */
@media (min-width:961px) and (max-height:820px){
  .hero{padding-top:calc(var(--navh) + 20px)}
  .hero-main{align-items:start;padding-top:22px}
  .hero-copy{padding-top:clamp(8px,5.5vh,56px)}
  .hero-copy p{margin-top:24px}
  .hero-cta{margin-top:30px}
}
@media (max-width:760px){.hero{min-height:auto}}
@media (max-width:600px){.mark3d{max-width:100%}.btn-lg{min-height:58px;font-size:1rem;padding:0 22px 0 24px}
  .status{font-size:.78rem;padding-right:13px}.status b{font-size:.72rem}
  .hero-bot dl{display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between;gap:12px;width:100%}.hero-bot dt{font-size:.78rem}}

/* ---------- brand-word ticker ---------- */
.tick{position:relative;overflow:hidden;padding:clamp(22px,3.4vw,46px) 0;border-block:1px solid rgba(160,180,255,.12);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.tick-track{display:flex;width:max-content;will-change:transform}
.tick-track span{display:inline-flex;align-items:center;gap:clamp(20px,3vw,46px);padding-right:clamp(20px,3vw,46px);font-size:clamp(2.2rem,6vw,5.4rem);font-weight:700;line-height:1.1;letter-spacing:-.03em;text-transform:uppercase;white-space:nowrap;color:rgba(204,217,255,.62)}
.tick-track span b{font-weight:700;color:#fff}
.tick-track span::after{content:"";width:.36em;height:.34em;flex:none;background:var(--blue2);-webkit-mask:var(--mark) center/contain no-repeat;mask:var(--mark) center/contain no-repeat}
.tick.sm .tick-track span{font-size:clamp(1.5rem,3.4vw,3rem);text-transform:none}

/* ---------- manifesto ---------- */
.mf{max-width:19.5em;margin-top:28px;font-size:clamp(1.9rem,4.5vw,4.3rem);line-height:1.1;letter-spacing:-.035em;font-weight:500}
.mf em{font-style:normal;color:var(--sky)}
html.motion .mf .w{opacity:.14;transition:opacity .3s linear}
.tri{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:clamp(44px,6vw,90px)}
.tri-i{padding:26px 26px 30px}
.tri-i em,.cmp-i em,.step em,.pr-list em{display:block;font-style:normal;font-size:.74rem;font-weight:500;letter-spacing:.24em;color:var(--blue2)}
.tri-i h3{margin:34px 0 8px;font-size:clamp(1.4rem,2.2vw,2rem);font-weight:600;letter-spacing:-.03em;line-height:1.1}
.tri-i p{color:var(--tx2)}
.mf-foot{margin-top:34px}

/* ---------- showreel ---------- */
/* never taller than the screen, so the pause control is always in view with the film */
.reel-stage{width:min(1480px,calc(100% - 2*var(--gut)),calc((100vh - var(--navh) - 56px)*16/9));width:min(1480px,calc(100% - 2*var(--gut)),calc((100svh - var(--navh) - 56px)*16/9));margin:clamp(34px,5vw,70px) auto 0;perspective:1800px}
.reel-bezel{padding:clamp(6px,.8vw,12px);border-radius:clamp(22px,2.8vw,44px);transform:scale(var(--s,1)) rotateX(var(--rx,0deg));transform-origin:50% 100%;will-change:transform}
.reel-frame{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:clamp(16px,2.1vw,32px);background:#050b24;box-shadow:0 60px 140px -50px rgba(30,60,230,.85)}
.reel-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;cursor:pointer}
/* the homepage showreel is cut at 4:3, so its frame takes that shape, sized to fit the screen height (case films stay 16:9) */
#reelStage{width:min(1480px,calc(100% - 2*var(--gut)),calc((100vh - var(--navh) - 56px)*4/3));width:min(1480px,calc(100% - 2*var(--gut)),calc((100svh - var(--navh) - 56px)*4/3))}
#reelFrame{aspect-ratio:4/3}
.reel-big{position:absolute;left:50%;top:50%;z-index:2;width:clamp(72px,9vw,116px);height:clamp(72px,9vw,116px);margin:0;translate:-50% -50%;display:grid;place-items:center;border:0;border-radius:50%;color:#fff;background:rgba(42,75,239,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.45),0 24px 60px -16px rgba(0,5,40,.8);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);cursor:pointer;opacity:0;scale:.7;pointer-events:none;transition:opacity .4s,scale .6s var(--ease)}
.reel-big .ic{width:34%;height:34%;translate:6% 0}
.reel-frame.paused .reel-big{opacity:1;scale:1;pointer-events:auto}
.reel-bar{position:absolute;left:clamp(8px,1.2vw,18px);right:clamp(8px,1.2vw,18px);bottom:clamp(8px,1.2vw,18px);z-index:3;display:flex;align-items:center;gap:8px;padding:7px;border-radius:999px;background:rgba(8,18,66,.5);box-shadow:inset 0 0 0 1px rgba(184,200,255,.32),inset 0 1px 0 rgba(255,255,255,.14);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5)}
.rb{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:42px;height:42px;padding:0 15px;border:0;border-radius:999px;background:rgba(132,160,255,.22);color:#fff;font-size:.86rem;font-weight:500;line-height:1;white-space:nowrap;cursor:pointer;transition:background-color .35s}
.rb:hover{background:rgba(132,160,255,.42)}
.rb .ic{width:17px;height:17px}
.rb.main{background:#fff;color:#0b1c66;font-weight:600;min-width:104px}
.rb.main:hover{background:#e3eaff}
.rb .i-on,.rb.on .i-off{display:none}
.rb.on .i-on{display:block}
#reelPlay .i-play,#reelPlay.is-paused .i-pause{display:none}
#reelPlay.is-paused .i-play{display:block}
.reel-prog{flex:1;min-width:40px;height:42px;display:flex;align-items:center;padding:0 6px;border-radius:999px;cursor:pointer;touch-action:none}
.reel-prog i{position:relative;display:block;width:100%;height:4px;border-radius:4px;background:rgba(255,255,255,.22);overflow:hidden}
.reel-prog i::after{content:"";position:absolute;inset:0;background:#fff;transform-origin:0 50%;transform:scaleX(var(--p,0))}
.reel-time{padding:0 6px;font-size:.82rem;font-variant-numeric:tabular-nums;color:#dfe6ff;white-space:nowrap}
@media (max-width:640px){.reel-time,#reelFs{display:none}.rb{padding:0 12px}.rb.main{min-width:0}.rb:not(.main) span{display:none}}

/* ---------- selected work in depth: the bento boards ---------- */
/* the plain version, without scripts and in calm mode: the heading, then the boards in a grid */
.galaxy{position:relative;padding-top:clamp(70px,9vw,140px)}
.gx-hud,.gx-scene{width:min(1320px,calc(100% - 2*var(--gut)));margin-inline:auto}
.gx-title{margin-top:18px}
.gx-stars,.gx-bot{display:none}
.gx-scene{margin-top:clamp(34px,4.6vw,64px)}
.gx-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.gx-card a{display:block;aspect-ratio:4/3;border-radius:clamp(12px,1.3vw,18px);overflow:hidden;background:#0c1854;box-shadow:inset 0 0 0 1px var(--line),0 30px 80px -40px #000}
.gx-card img{display:block;width:100%;height:100%;object-fit:cover}
.gx-cap{display:flex;justify-content:space-between;gap:16px;margin-top:12px;font-size:.92rem;color:var(--tx2)}
.gx-cap b{font-weight:600;color:#fff}
@media (max-width:700px){.gx-list{grid-template-columns:1fr}}
/* full motion: the section pins, and each board flies toward the viewer in turn (app.js sets the transforms) */
.galaxy.on3d{height:calc(100vh + (var(--n) - 1)*80vh);padding:0}
/* the pinned frame is as tall as the screen with the browser bars showing, so nothing hides behind them on a phone */
.galaxy.on3d .gx-in{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
/* phones: a shorter flight, so eight boards take less thumb */
@media (max-width:700px){.galaxy.on3d{height:calc(100svh + (var(--n) - 1)*60svh)}}
/* touch screens: one stop per board, so a swipe moves one board (app.js adds the stops and the class) */
html.gx-snap{scroll-snap-type:y proximity}
.gx-stop{position:absolute;left:0;width:1px;height:1px;pointer-events:none;scroll-snap-align:start;scroll-snap-stop:always}
.galaxy.on3d .gx-in::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(48% 44% at 50% 54%,rgba(42,75,239,.28),rgba(42,75,239,.08) 55%,transparent 75%)}
.galaxy.on3d .gx-stars{display:block;position:absolute;inset:0;width:100%;height:100%}
.galaxy.on3d .gx-scene{position:absolute;inset:0;width:auto;margin:0}
.galaxy.on3d .gx-world{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d}
.galaxy.on3d .gx-list{display:block;position:absolute;left:0;top:0;transform-style:preserve-3d}
.galaxy.on3d .gx-card{position:absolute;left:calc(var(--cw)*-.5);top:calc(var(--cw)*-.375);width:var(--cw);opacity:0;will-change:transform,opacity}
.galaxy.on3d .gx-card a{border-radius:calc(var(--cw)*.02);box-shadow:inset 0 0 0 1px rgba(196,210,255,.24),0 60px 140px -40px rgba(0,0,0,.9)}
.galaxy.on3d .gx-cap{display:none}
.gx-sat{position:absolute;left:0;top:0;visibility:hidden;aspect-ratio:4/3;border-radius:8px;overflow:hidden;pointer-events:none;background:#0c1854;will-change:transform,opacity}
.gx-sat img{display:block;width:100%;height:100%;object-fit:cover}
.galaxy.on3d .gx-hud{position:absolute;inset:0;z-index:2;width:auto;margin:0;padding:calc(var(--navh) + 22px) max(var(--gut),calc((100% - 1320px)/2)) clamp(20px,3.4vh,36px);display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}
.galaxy.on3d .gx-title{font-size:clamp(2rem,min(3.6vw,6vh),3.4rem)}
.galaxy.on3d .gx-bot{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.gx-now{display:flex;align-items:baseline;gap:10px}
.gx-now>b{font-size:clamp(2.6rem,min(4.4vw,7vh),4rem);font-weight:700;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.gx-now>span{font-size:.78rem;letter-spacing:.22em;color:var(--tx3)}
.gx-now p{display:flex;flex-direction:column;margin-left:18px;line-height:1.3}
.gx-now p b{font-size:1.08rem;font-weight:600}
.gx-now p span{font-size:.88rem;color:var(--tx2)}
.gx-prog{flex:0 1 300px;height:2px;margin-bottom:12px;border-radius:2px;background:rgba(160,180,255,.18);overflow:hidden}
.gx-prog i{display:block;height:100%;background:linear-gradient(90deg,#6f8dff,#fff);transform-origin:0 50%;transform:scaleX(var(--p,0))}
@media (max-width:700px){.gx-prog{display:none}.gx-now p{margin-left:8px}}

/* ---------- work ---------- */
.cs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.8vw,26px);margin-top:clamp(40px,5vw,76px);perspective:1800px}
.cs-card{--ac:#2a4bef;display:flex;flex-direction:column;padding:10px}
.cs-glow{position:absolute;inset:14% 8% -3%;z-index:-2;border-radius:50%;background:var(--ac);filter:blur(64px);opacity:0;transition:opacity .9s;pointer-events:none}
.cs-card:hover .cs-glow,.cs-card:focus-within .cs-glow{opacity:.38}
.cs-media{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;border-radius:calc(var(--r) - 10px);overflow:hidden;background:#060d2e;cursor:pointer}
.cs-media img,.cs-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.5s var(--ease),opacity .8s}
.cs-media video{opacity:0}
.cs-card.playing .cs-media video{opacity:1}
.cs-card:hover .cs-media img,.cs-card:hover .cs-media video{transform:scale(1.045)}
.cs-idx,.cs-open{position:absolute;left:14px;z-index:1;display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 13px;border-radius:999px;font-size:.78rem;font-weight:600;letter-spacing:.06em;color:#fff;background:rgba(8,18,66,.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.26);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.cs-idx{top:14px}
.cs-open{bottom:14px;letter-spacing:0;font-weight:500;font-size:.84rem;opacity:0;translate:0 10px;transition:opacity .5s,translate .6s var(--ease)}
.cs-open .ic{width:13px;height:13px}
.cs-card:hover .cs-open,.cs-media:focus-visible .cs-open{opacity:1;translate:0 0}
@media (hover:none){.cs-open{opacity:1;translate:0 0}}
.cs-meta{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:18px 12px 10px 14px}
.cs-name{font-size:clamp(1.4rem,2.1vw,1.95rem);font-weight:600;letter-spacing:-.03em;line-height:1.1}
.cs-sub{margin-top:5px;font-size:.95rem;line-height:1.4;color:var(--tx2)}
.cs-sub b{color:#fff;font-weight:500}
.cs-be{flex:none;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;border-radius:999px;font-size:.88rem;font-weight:500;color:#fff;text-decoration:none;background:rgba(132,160,255,.13);box-shadow:inset 0 0 0 1px var(--line2);transition:background-color .4s,box-shadow .4s}
.cs-be:hover{background:var(--ac);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.cs-be .arr{width:15px;height:15px}
.cs-more{margin-top:clamp(30px,4vw,54px);text-align:center}
@media (max-width:860px){.cs-grid{grid-template-columns:1fr}}
@media (max-width:480px){.cs-meta{flex-direction:column;align-items:flex-start}}
/* case-study view */
.cs-dlg{width:min(1260px,calc(100vw - 24px));max-width:none;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);padding:0;border:0;border-radius:30px;overflow:hidden;color:var(--tx);background:linear-gradient(160deg,rgba(38,60,172,.78),rgba(7,14,52,.9));box-shadow:inset 0 0 0 1px var(--line2),inset 0 1px 0 rgba(255,255,255,.2),0 60px 160px -40px #000;-webkit-backdrop-filter:blur(30px) saturate(1.5);backdrop-filter:blur(30px) saturate(1.5)}
.cs-dlg[open]{display:flex;flex-direction:column}
html.motion .cs-dlg[open]{animation:dlgIn .7s var(--ease)}
.cs-dlg::backdrop{background:rgba(3,7,26,.74);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
@keyframes dlgIn{from{opacity:0;transform:translateY(40px) scale(.97)}}
.cs-top{flex:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 14px 14px 24px;border-bottom:1px solid rgba(160,180,255,.18)}
.cs-count{display:flex;align-items:center;gap:12px;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--tx2)}
.cs-count b{color:#fff;font-weight:600;font-variant-numeric:tabular-nums}
.cs-btns{display:flex;gap:8px}
.cs-btns button{width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(132,160,255,.16);box-shadow:inset 0 0 0 1px var(--line2);cursor:pointer;transition:background-color .35s}
.cs-btns button:hover{background:rgba(132,160,255,.38)}
.cs-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);overflow:auto;overscroll-behavior:contain}
.cs-stage{position:sticky;top:0;align-self:start;padding:18px 0 18px 18px}
.cs-stage video{width:100%;aspect-ratio:16/9;border-radius:18px;background:#000;box-shadow:0 30px 80px -30px color-mix(in srgb,var(--ac,#2a4bef) 70%,transparent)}
.cs-text{padding:26px 28px 34px}
.cs-sector{font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--tx2)}
.cs-text h2{margin-top:10px;font-size:clamp(2rem,3.6vw,3.2rem);font-weight:700;letter-spacing:-.04em;line-height:1}
.cs-idea{margin-top:10px;font-size:1.2rem;font-weight:500;letter-spacing:-.01em;color:var(--sky)}
.cs-text h3{margin:26px 0 6px;font-size:.74rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--blue2)}
.cs-text p{color:#d6defa}
.cs-text .tags{margin-top:8px}
.cs-text .btn{margin-top:28px;width:100%}
@media (max-width:900px){.cs-body{grid-template-columns:1fr}.cs-stage{position:static;padding:12px 12px 0}.cs-text{padding:22px 20px 28px}.cs-dlg{border-radius:22px}}

/* ---------- clients ---------- */
.collab{margin-top:28px;text-align:center}
.collab span{display:inline-flex;align-items:center;gap:12px;padding:11px 20px 11px 14px;border-radius:999px;font-size:.98rem;font-weight:500;color:#e9eeff;background:rgba(132,160,255,.13);box-shadow:inset 0 0 0 1px var(--line2)}
.collab svg{width:20px;height:19px;flex:none;color:var(--blue2)}

/* ---------- the market ---------- */
.cmp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:clamp(40px,5vw,72px)}
.cmp-i{padding:28px 28px 32px}
.cmp-i h3{margin:40px 0 10px;font-size:clamp(1.5rem,2.3vw,2.1rem);font-weight:600;letter-spacing:-.03em;line-height:1.1}
.cmp-i p{color:var(--tx2)}
.gap-line{max-width:23em;margin-top:clamp(54px,8vw,120px);font-size:clamp(1.6rem,3.3vw,3.1rem);line-height:1.14;letter-spacing:-.035em;font-weight:500;color:#8f9cd0}
.gap-line b{font-weight:500;color:#fff}

/* ---------- services ---------- */
.cols{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(28px,5vw,90px);align-items:start}
.cols-l{position:sticky;top:calc(var(--navh) + 40px)}
.cols-l .h2{font-size:clamp(2.2rem,4.3vw,4.4rem)}
.cols-l .lead{margin-top:22px;max-width:34ch}
.cols-l .btn{margin-top:30px}
.acc{padding:10px}
.acc-i{border-radius:20px;transition:background-color .6s,box-shadow .6s}
.acc-i+.acc-i{margin-top:2px}
.acc-i.on{background:linear-gradient(120deg,rgba(156,178,255,.18),rgba(124,152,255,.05));box-shadow:inset 0 0 0 1px rgba(196,210,255,.24)}
.acc-i>h3{font:inherit}
.acc-i>h3>button{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:20px;width:100%;padding:26px 22px;border:0;border-radius:inherit;background:none;text-align:left;cursor:pointer}
.acc-n{font-size:.74rem;font-weight:500;letter-spacing:.24em;color:var(--tx3)}
.acc-t{font-size:clamp(1.5rem,2.7vw,2.5rem);font-weight:500;letter-spacing:-.035em;line-height:1.05;transition:translate .7s var(--ease)}
.acc-i:not(.on)>h3>button:hover .acc-t{translate:8px 0}
.pm{position:relative;width:40px;height:40px;flex:none;border-radius:50%;background:rgba(132,160,255,.14);box-shadow:inset 0 0 0 1px var(--line2);transition:background-color .4s,rotate .7s var(--ease)}
.pm::before,.pm::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.5px;margin:-.75px 0 0 -7px;background:#fff;transition:rotate .7s var(--ease)}
.pm::after{rotate:90deg}
.on>h3 .pm,.on>button .pm{background:#fff}
.on>h3 .pm::before,.on>h3 .pm::after,.on>button .pm::before,.on>button .pm::after{background:#0b1c66}
.on>h3 .pm::after,.on>button .pm::after{rotate:0deg}
.acc-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .75s var(--ease)}
.on>.acc-b{grid-template-rows:1fr}
.acc-b>div{overflow:hidden;visibility:hidden;transition:visibility 0s .75s}
.on>.acc-b>div{visibility:visible;transition-delay:0s}
.acc-b p{max-width:54ch;padding:0 22px 0 calc(22px + 3.4em);color:var(--tx2)}
.acc-b .tags{padding:18px 22px 28px calc(22px + 3.4em)}
/* links from a discipline to its own page */
.acc-b .acc-more{display:flex;flex-wrap:wrap;gap:8px 22px;max-width:none;margin-top:-10px;padding:0 22px 30px calc(22px + 3.4em)}
.acc-more a{display:inline-flex;align-items:center;gap:8px;font-size:.95rem;font-weight:500;color:var(--sky);text-decoration:none}
.acc-more a:hover{color:#fff}
.prose .tags a{color:inherit;text-decoration:none}
.prose .tags a:hover{color:#fff}
@media (max-width:960px){.cols{grid-template-columns:1fr}.cols-l{position:static}}
@media (max-width:600px){.acc-i>h3>button{gap:14px;padding:20px 14px}.acc-b p{padding:0 14px}.acc-b .tags{padding:16px 14px 22px}.acc-b .acc-more{padding:0 14px 24px}}

/* ---------- process ---------- */
.rail{position:relative;height:2px;margin:clamp(46px,6vw,90px) 0 30px;border-radius:2px;background:rgba(160,180,255,.18)}
.rail::before{content:"";position:absolute;inset:0;border-radius:2px;background:linear-gradient(90deg,#2a4bef,#a9bcff);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.rail-m{position:absolute;inset:0;transform:translateX(calc(var(--p,0)*100%))}
/* the marker on the process line, in the primary button's language: a blue fill lit from the top, inside a ring that runs white into blue */
.rail-m span{position:absolute;left:-18px;top:-17px;width:36px;height:36px;display:grid;place-items:center;border:1.5px solid transparent;border-radius:50%;background:linear-gradient(165deg,#6b93ff 0%,#2a4bef 48%,#1730dd 100%) padding-box,linear-gradient(155deg,#fff 0%,#a9bcff 45%,#2a4bef 100%) border-box;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 26px rgba(62,98,255,.7)}
.rail-m svg{width:16px;height:15px;color:#fff}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;list-style:none;margin:0;padding:0}
.step{display:flex;flex-direction:column;padding:26px 24px 26px}
html.js .step{opacity:.55;transition:opacity .8s,translate 1s var(--ease)}
html.js .step.on{opacity:1;translate:0 -6px}
.step h3{margin:44px 0 8px;font-size:clamp(1.5rem,2.2vw,2.1rem);font-weight:600;letter-spacing:-.03em;line-height:1.1}
.step p{flex:1;color:var(--tx2)}
.step .tags{margin-top:22px}
@media (max-width:1100px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.steps{grid-template-columns:1fr}.rail{display:none}.steps{margin-top:40px}.step h3{margin-top:26px}}

/* ---------- proof of weight ---------- */
.proof-panel{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r);padding:clamp(24px,4vw,58px);background:linear-gradient(140deg,#3457f4 0%,#1f3bd0 46%,#11258b 100%);box-shadow:inset 0 0 0 1px rgba(200,212,255,.5),inset 0 1px 0 rgba(255,255,255,.4),0 70px 130px -60px rgba(42,75,239,.95)}
.proof-rings{position:absolute;right:-12%;top:-30%;z-index:-1;width:74%;height:auto;color:rgba(214,224,255,.2);pointer-events:none}
.proof-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.proof-top .lbl{color:#fff}
.proof-top .lbl::before{background:#fff}
.proof-top h2{margin-top:12px;font-size:clamp(2.2rem,5vw,4.6rem);font-weight:500;letter-spacing:-.04em;line-height:1}
.proof-top .brand .bm{color:#fff;width:24px;height:22px}
.proof-top .brand .wm{width:80px}
.proof-rows{margin-top:clamp(24px,4vw,50px)}
.proof-rows>div{display:grid;grid-template-columns:minmax(0,27%) minmax(0,1fr) auto;gap:14px 24px;align-items:center;padding:clamp(16px,2.4vw,32px) 0;border-top:1px solid rgba(214,224,255,.32)}
.proof-rows dt{max-width:9em;font-size:clamp(1.05rem,1.9vw,1.6rem);font-weight:500;letter-spacing:-.01em;line-height:1.12;text-transform:uppercase}
.proof-rows .d{max-width:28ch;color:#e3e9ff}
.proof-rows .n{font-size:clamp(3rem,9.4vw,8.6rem);font-weight:700;letter-spacing:-.05em;line-height:.88;text-align:right;text-transform:uppercase;font-variant-numeric:tabular-nums;white-space:nowrap}
.minis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:14px}
.mini{padding:26px 26px 28px}
.mini b{display:block;font-size:clamp(2.6rem,4.6vw,4.2rem);font-weight:700;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.mini h3{margin:16px 0 8px;font-size:.78rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--sky)}
.mini p{color:var(--tx2)}
@media (max-width:860px){.proof-rows>div{grid-template-columns:1fr auto}.proof-rows .d{grid-column:1;grid-row:2}.proof-rows .n{grid-column:2;grid-row:1/3}}
@media (max-width:560px){.proof-rows>div{grid-template-columns:1fr}.proof-rows .n{grid-column:1;grid-row:auto;text-align:left;font-size:clamp(3.4rem,20vw,5.4rem)}.proof-rows .d{grid-row:auto}.proof-top .brand{display:none}}

/* ---------- principles ---------- */
.pr-list{display:grid;gap:12px;list-style:none;margin:0;padding:0}
.pr-list li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;padding:28px}
.pr-list em{padding-top:.75em}
.pr-list h3{margin-bottom:6px;font-size:clamp(1.4rem,2.3vw,2.05rem);font-weight:600;letter-spacing:-.03em;line-height:1.1}
.pr-list p{color:var(--tx2)}
html.js .pr-list.live li{opacity:.6;transition:opacity .7s}
html.js .pr-list.live li.on{opacity:1}

/* ---------- pricing ---------- */
.price-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch;margin-top:clamp(46px,6vw,90px);perspective:1800px}
.pk{display:flex;flex-direction:column;padding:clamp(24px,2.4vw,36px)}
.pk.rec{background:linear-gradient(150deg,#3b5ef4 0%,#2a4bef 46%,#1b35c8 100%);box-shadow:inset 0 0 0 1px rgba(206,216,255,.6),inset 0 1px 0 rgba(255,255,255,.45),0 60px 120px -44px rgba(42,75,239,1);-webkit-backdrop-filter:none;backdrop-filter:none}
@media (min-width:1181px){.pk.rec{margin-block:-20px}}
.pk-n{display:flex;justify-content:space-between;align-items:center;min-height:28px;font-size:.8rem;letter-spacing:.26em;color:var(--tx2)}
.pk-rec{padding:6px 12px;border-radius:999px;font-size:.64rem;font-weight:700;letter-spacing:.2em;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)}
.pk h3{margin:22px 0 8px;font-size:clamp(1.6rem,2.1vw,2.1rem);font-weight:700;letter-spacing:-.02em;line-height:1;text-transform:uppercase}
.pk .for{min-height:3.2em;color:var(--tx2)}
.pk .from{display:block;margin-top:26px;font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--tx2)}
.pk .amt{font-size:clamp(2.8rem,3.9vw,3.9rem);font-weight:700;letter-spacing:-.045em;line-height:1.05}
.pk .dur{margin-top:8px;font-size:.76rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#e3e9ff}
/* remaining spots per package: the four numbers are plain text in the pricing cards and are updated by hand */
.pk-av b{margin-left:-4px;font-weight:700;color:#fff}
.pk-av{align-self:flex-start;display:inline-flex;align-items:center;gap:9px;margin-top:18px;padding:7px 14px 7px 11px;border-radius:999px;font-size:.82rem;font-weight:500;line-height:1.3;color:#e9eeff;background:rgba(132,160,255,.14);box-shadow:inset 0 0 0 1px rgba(184,200,255,.32)}
.pk-av i{flex:none;width:7px;height:7px;border-radius:50%;background:#9af5c8;box-shadow:0 0 0 3px rgba(154,245,200,.2)}
.pk.rec .pk-av{color:#fff;background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.pk ul{flex:1;display:grid;align-content:start;gap:11px;list-style:none;margin:26px 0 30px;padding:24px 0 0;border-top:1px solid rgba(196,210,255,.24)}
.pk li{display:flex;gap:12px;align-items:flex-start;font-size:.98rem;line-height:1.4;color:#e9eeff}
.pk li::before{content:"";flex:none;width:12px;height:11px;margin-top:.3em;background:var(--blue2);-webkit-mask:var(--mark) center/contain no-repeat;mask:var(--mark) center/contain no-repeat}
.pk.rec .for,.pk.rec .from{color:#e9eeff}
.pk.rec .pk-n{color:#fff}
.pk.rec li::before{background:#fff}
.pk .btn{width:100%;justify-content:space-between;padding:0 22px 0 26px}
/* four across: the same room for every description and term, so the prices line up */
@media (min-width:1181px){.pk .for{min-height:4.8em}.pk .dur{min-height:3.2em}}
/* four across on wide screens, two by two below that, one column on phones */
@media (max-width:1180px){.price-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:880px;margin-inline:auto}}
@media (max-width:960px){.price-grid{grid-template-columns:1fr;max-width:560px}.pk .for{min-height:0}}

/* ---------- faq ---------- */
.faq-card{display:flex;flex-direction:column;gap:18px;margin-top:34px;padding:24px;max-width:400px}
.faq-card b{display:block;font-size:1.1rem;font-weight:600}
.faq-card p{color:var(--tx2)}
.acc.qa .acc-i>button{display:flex;justify-content:space-between;align-items:center;gap:20px;width:100%;padding:20px;border:0;border-radius:inherit;background:none;font-size:clamp(1.05rem,1.5vw,1.28rem);font-weight:500;letter-spacing:-.015em;line-height:1.3;text-align:left;cursor:pointer}
.acc.qa .acc-b p{max-width:62ch;padding:0 76px 24px 20px}
@media (max-width:600px){.acc.qa .acc-i>button{padding:18px 14px}.acc.qa .acc-b p{padding:0 14px 20px}}

/* ---------- contact ---------- */
.contact .panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,72px);padding:clamp(22px,4vw,64px);border-radius:clamp(28px,3vw,44px)}
.contact .h2{font-size:clamp(2.6rem,5.6vw,5.4rem)}
.contact .lead{margin-top:24px}
.c-alt{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.chip{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 18px 0 14px;border-radius:999px;font-size:.94rem;font-weight:500;color:#fff;text-decoration:none;background:rgba(132,160,255,.12);box-shadow:inset 0 0 0 1px var(--line2);transition:background-color .4s}
.chip:hover{background:rgba(132,160,255,.26)}
.chip .ic{width:18px;height:18px;color:var(--sky)}
form{display:grid;gap:12px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fld{position:relative}
.fld input,.fld select,.fld textarea{width:100%;padding:26px 18px 10px;border:0;border-radius:16px;background:rgba(4,10,42,.5);box-shadow:inset 0 0 0 1px rgba(160,180,255,.24);color:#fff;font:400 1rem/1.4 var(--fd);outline:0;transition:box-shadow .3s,background-color .3s}
.fld textarea{min-height:130px;resize:vertical}
.fld select{-webkit-appearance:none;appearance:none;padding-right:44px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ccd9ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:20px}
.fld option{background:#0b1a5e;color:#fff}
.fld label{position:absolute;left:18px;top:18px;color:var(--tx2);pointer-events:none;transform-origin:0 0;transition:transform .4s var(--ease),color .3s}
.fld input:focus~label,.fld input:not(:placeholder-shown)~label,.fld textarea:focus~label,.fld textarea:not(:placeholder-shown)~label,.fld select~label{transform:translateY(-11px) scale(.76);color:var(--sky)}
.fld input:hover,.fld select:hover,.fld textarea:hover{background-color:rgba(4,10,42,.66)}
.fld input:focus-visible,.fld select:focus-visible,.fld textarea:focus-visible{box-shadow:inset 0 0 0 1.5px #a9bcff,0 0 0 4px rgba(111,141,255,.26)}
.f-send{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.f-send .btn{flex:1 1 220px}
.f-note{font-size:.86rem;color:var(--tx2)}
.f-status{font-size:.98rem;font-weight:500;line-height:1.4;color:var(--sky)}
.f-status:empty{display:none}
.f-status.ok{color:#9af5c8}
.f-status.ok::before{content:"";display:inline-block;width:1.05em;height:1.05em;margin-right:8px;vertical-align:-.18em;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat}
.f-status.err{color:#ffb9b9}
.fld.bad input{box-shadow:inset 0 0 0 1.5px #ff9d9d}
.fld.bad label{color:#ffb9b9}
form.busy .f-send{opacity:.6;pointer-events:none}
@media (max-width:960px){.contact .panel{grid-template-columns:1fr}}
@media (max-width:520px){.two{grid-template-columns:1fr}}

/* ---------- footer ---------- */
footer{position:relative;margin-top:clamp(30px,5vw,80px);padding:clamp(54px,7vw,100px) 0 26px;border-top:1px solid rgba(160,180,255,.14);background:linear-gradient(180deg,rgba(4,9,30,0),rgba(3,7,24,.9))}
.ft{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px}
.ft .brand .bm{width:34px;height:32px}
.ft .brand .wm{width:116px}
.ft-tag{margin-top:26px;font-size:clamp(2rem,4.4vw,3.8rem);font-weight:500;letter-spacing:-.04em;line-height:1.02}
.ft .c-alt{margin-top:30px}
.ft-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
@media (max-width:560px){.ft-links{grid-template-columns:1fr 1fr}}
.ft-links h2{margin-bottom:14px;font-size:.72rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--tx3)}
.ft-links a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 0;border-bottom:1px solid rgba(160,180,255,.14);font-size:1.05rem;font-weight:500;color:#e9eeff;text-decoration:none;transition:color .3s,padding .6s var(--ease)}
.ft-links a:hover{color:#fff;padding-left:8px}
.ft-links .arr{width:16px;height:16px;color:var(--blue2)}
.giant{position:relative;margin:clamp(44px,7vw,110px) 0 22px;color:rgba(132,160,255,.13)}
.giant svg{width:100%;height:auto}
.giant .lit{position:absolute;inset:0;color:#a9bcff;opacity:0;transition:opacity .6s;-webkit-mask-image:radial-gradient(clamp(140px,22vw,340px) circle at var(--mx,50%) var(--my,50%),#000,transparent 72%);mask-image:radial-gradient(clamp(140px,22vw,340px) circle at var(--mx,50%) var(--my,50%),#000,transparent 72%)}
.giant.on .lit{opacity:1}
.legal{display:flex;justify-content:space-between;align-items:center;gap:14px 24px;flex-wrap:wrap;padding-top:18px;border-top:1px solid rgba(160,180,255,.14);font-size:.88rem;color:var(--tx3)}
.legal-r{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.legal button,.legal a{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border:0;border-radius:999px;background:rgba(132,160,255,.1);box-shadow:inset 0 0 0 1px var(--line);font-size:.86rem;font-weight:500;color:#dfe6ff;text-decoration:none;cursor:pointer;transition:background-color .35s}
.legal button:hover,.legal a:hover{background:rgba(132,160,255,.24)}
.legal .ic{width:15px;height:15px}
@media (max-width:860px){.ft{grid-template-columns:1fr}}

/* ---------- email links: other ways to write, shown beside the link that was pressed ---------- */
.mailpop{position:fixed;z-index:70;left:12px;top:12px;width:max-content;max-width:min(370px,calc(100vw - 24px));padding:14px 46px 14px 16px;border-radius:20px;font-size:.9rem;line-height:1.4;color:#e9eeff;background:linear-gradient(150deg,rgba(48,74,198,.96),rgba(11,22,80,.97));box-shadow:inset 0 0 0 1px var(--line2),inset 0 1px 0 rgba(255,255,255,.2),0 30px 70px -24px rgba(0,5,36,.95)}
.mailpop div{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.mp{display:inline-flex;align-items:center;min-height:38px;padding:0 15px;border:0;border-radius:999px;font-size:.86rem;font-weight:600;line-height:1;color:#0b1c66;background:#fff;text-decoration:none;cursor:pointer;transition:background-color .3s}
.mp:hover{background:#dfe6ff}
button.mp{color:#fff;background:rgba(132,160,255,.2);box-shadow:inset 0 0 0 1px var(--line2)}
button.mp:hover{background:rgba(132,160,255,.36)}
.mp-x{position:absolute;right:9px;top:9px;width:30px;height:30px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:rgba(132,160,255,.18);color:#fff;cursor:pointer}
.mp-x .ic{width:14px;height:14px}

/* ---------- motion notice ---------- */
.toast{position:fixed;right:16px;bottom:16px;z-index:80;display:flex;align-items:center;gap:6px;max-width:min(470px,calc(100vw - 32px));padding:10px 10px 10px 18px;border-radius:22px;font-size:.9rem;line-height:1.4;transform:translateY(160%);transition:transform .8s var(--ease)}
.toast.on{transform:none}
.toast p{flex:1}
.toast button{flex:none;min-height:40px;padding:0 14px;border:0;border-radius:999px;font-size:.86rem;font-weight:600;cursor:pointer}
.toast .y{background:#fff;color:#0b1c66}
.toast .n{width:40px;padding:0;display:grid;place-items:center;background:rgba(132,160,255,.18);color:#fff}

/* ---------- shared small-screen rules ---------- */
@media (max-width:900px){.head{grid-template-columns:1fr}.tri,.cmp,.minis{grid-template-columns:1fr}.tri-i h3,.cmp-i h3{margin-top:22px}}
@media (hover:none){.spot::before,.spot::after{display:none}}
@media print{.bg,.nav,.pre,.toast,.cur-lbl{display:none!important}body{background:#fff;color:#000}}
/* =========================================================================
   ARVONN — what the multi-page site adds to site.css
   site.css is the homepage's stylesheet, kept as it was. The few rules the homepage gained with the new pages,
   and everything the other pages need, are here. Same language: glass, blue light, motion that settles.
   ========================================================================= */

/* ---------- homepage additions ---------- */
.cs-media{text-decoration:none}                            /* the card picture is a link now */
.cs-text .btn+.btn{margin-top:10px}                        /* film view: the case-study button sits above the Behance one */
html.deep .pre{display:none!important}                     /* a visit that lands on /#section skips the intro */

/* ---------- page hero: the opening of every page except the homepage ---------- */
.ph{position:relative;isolation:isolate;padding:calc(var(--navh) + clamp(44px,7vw,108px)) 0 clamp(36px,5vw,72px)}
.ph::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(46% 70% at 84% 34%,rgba(42,75,239,.3),transparent 72%)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:6px 10px;list-style:none;margin:0 0 28px;padding:0;font-size:.86rem;color:var(--tx3)}
.crumbs li+li::before{content:"/";margin-right:10px;color:rgba(160,180,255,.45)}
.crumbs a{color:var(--tx2);text-decoration:none;transition:color .3s}
.crumbs a:hover{color:#fff}
/* the page's one h1 is shown uppercase and bold, as the homepage hero's is. Only the display changes: the text in the HTML keeps its own case */
.ph h1,.contact.top h1{font-weight:700;text-transform:uppercase;letter-spacing:-.03em;line-height:.96;color:#fff}
.ph h1{margin-top:20px;max-width:20ch;font-size:clamp(2.1rem,5.4vw,5.2rem);text-wrap:balance}
.ph h1 b,.contact.top h1 b{font-weight:700;background:linear-gradient(90deg,#fff 0%,#e3eaff 22%,#ccd9ff 45%,#8ea6ff 72%,#5f7fff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.ph-idea{margin-top:22px;font-size:clamp(1.3rem,2.4vw,2.1rem);font-weight:500;letter-spacing:-.025em;line-height:1.15;color:var(--sky)}
.ph .lead{margin-top:24px;max-width:58ch}
.ph-act{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
/* it settles into place. Nothing here starts hidden, so the page's main text never waits for the script */
html.motion .ph .wrap>*{animation:phIn 1.2s var(--ease) both}
html.motion .ph .wrap>:nth-child(2){animation-delay:.05s}
html.motion .ph .wrap>:nth-child(3){animation-delay:.1s}
html.motion .ph .wrap>:nth-child(4){animation-delay:.16s}
html.motion .ph .wrap>:nth-child(n+5){animation-delay:.22s}
@keyframes phIn{from{transform:translateY(28px)}}

/* ---------- long-form text: case studies, industry pages, the text columns of the other pages ---------- */
.prose{max-width:70ch;font-size:clamp(1.03rem,1.18vw,1.15rem);line-height:1.72;color:#d3dbf8}
.prose>:first-child{margin-top:0}
/* headings inside the text follow the homepage's section headings (.h2): same weight, spacing, colour and case, at a size that suits a column of text */
.prose h2{margin:1.9em 0 .5em;font-size:clamp(2rem,3.7vw,3.3rem);font-weight:500;letter-spacing:-.04em;line-height:1.02;color:#fff;text-wrap:balance}
.prose h3{margin:1.7em 0 .45em;font-size:clamp(1.4rem,2.1vw,1.9rem);font-weight:500;letter-spacing:-.04em;line-height:1.06;color:#fff;text-wrap:balance}
.prose p{margin:0 0 1.15em}
.prose ul,.prose ol{margin:0 0 1.2em;padding-left:1.25em}
.prose li{margin:.35em 0}
.prose li::marker{color:var(--blue2)}
.prose strong{font-weight:600;color:#fff}
.prose em{font-style:normal;color:var(--sky)}
.prose a{color:#fff;text-decoration:underline;text-decoration-color:rgba(142,166,255,.7);text-decoration-thickness:1px;text-underline-offset:4px;transition:text-decoration-color .3s}
.prose a:hover{text-decoration-color:#fff}
.prose .tags{padding:0;margin:0 0 1.4em}
.prose .tags li{margin:0}

/* ---------- a film or picture in the glass frame the showreel uses ---------- */
.cs-film{padding-bottom:clamp(54px,8vw,120px)}
.cs-film .reel-stage{margin-top:0}
.cs-film .reel-frame{box-shadow:0 60px 140px -50px color-mix(in srgb,var(--ac,#2a4bef) 80%,transparent)}
.cs-film video{cursor:auto}
.reel-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- case study ---------- */
.case-text{padding-top:0}
.case-text .prose{margin-inline:auto}
.cs-up{margin-top:1.6em}
.cs-behance{margin:0 0 clamp(20px,4vw,50px);text-align:center}
.cs-film .cs-behance{margin:clamp(22px,3vw,38px) 0 0}

/* ---------- industry pages: facts at a glance beside the text ---------- */
.glance{padding:26px}
.glance h2{font-size:clamp(1.4rem,2.1vw,1.9rem);font-weight:500;letter-spacing:-.04em;line-height:1.06;color:#fff}
.glance dl{margin:16px 0 0}
.glance dl div{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:13px 0;border-top:1px solid rgba(160,180,255,.18)}
.glance dt{font-size:.92rem;color:var(--tx2)}
.glance dd{font-weight:500;color:#fff;text-align:right}
.glance .btn{width:100%;margin-top:18px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}

/* ---------- the closing call to action ---------- */
.cta{padding-top:0}
.cta-panel{display:grid;grid-template-columns:minmax(0,1.25fr) auto;gap:clamp(24px,4vw,60px);align-items:end;padding:clamp(26px,4.4vw,64px);border-radius:clamp(28px,3vw,44px)}
.cta-panel .h2{font-size:clamp(2.4rem,5vw,4.8rem)}
.cta-panel .lead{margin-top:22px}
.cta-act{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:980px){.cta-panel{grid-template-columns:1fr}}

/* ---------- contact page: the form opens the page ---------- */
.contact.top{padding-top:calc(var(--navh) + clamp(34px,5vw,76px))}
.contact.top .crumbs ol{margin-bottom:22px}

/* ---------- client logos: one strip, no boxes ----------
   Still row by default (calm mode, or no scripts). With full motion it becomes a continuous strip that the page script moves. */
.logos{margin-top:clamp(36px,5vw,66px)}
.logos-set{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;row-gap:clamp(24px,3vw,38px);list-style:none;margin:0;padding:0 var(--gut)}
.logos-set[aria-hidden]{display:none}
.logos-set li{display:flex;align-items:center;padding-inline:clamp(20px,2.6vw,40px)}
.logos-set a{display:block;border-radius:6px}
.logos-set img{width:calc(var(--w)*var(--ls,1));max-width:none;height:auto;opacity:.74;transition:opacity .5s}
.logos-set li:hover img,.logos-set a:focus-visible img{opacity:1}
html.motion .logos{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
html.motion .logos:has(a:focus-visible){-webkit-mask-image:none;mask-image:none}   /* a logo focused with the keyboard is never under the fade */
html.motion .logos-track{display:flex;width:max-content;will-change:transform}
html.motion .logos-set,html.motion .logos-set[aria-hidden]{display:flex;flex:none;flex-wrap:nowrap;padding:0}
/* the still row: five to a row, two on a phone, so the ten logos always sit in even rows */
html:not(.motion) .logos-set li{flex:0 0 20%;justify-content:center;padding-inline:clamp(10px,1.4vw,22px)}
html:not(.motion) .logos-set img{max-width:100%}
@media (max-width:760px){html:not(.motion) .logos-set li{flex-basis:50%}}
@media (max-width:600px){.logos{--ls:.8}html:not(.motion) .logos{--ls:.67}}