/* ============================================================
   EFEKTE
   Ladder: 4 / 8 / 16 / 24 / 32 / 48 / 64 / 80 / 96. Container 1266px.
   Everything below the hero starts on the same left edge.
   ============================================================ */

:root{
  --cream:#f5f5f2; --ink:#070707;
  --blue:#2457ff; --indigo:#304cff; --deep:#152e9e; --mist:#dde5ff;

  --tx:#070707; --tx-2:rgba(7,7,7,.58); --tx-3:rgba(7,7,7,.36);
  --tx-i:#f5f5f2; --tx-i2:rgba(245,245,242,.6); --tx-i3:rgba(245,245,242,.34);

  --g-fill:rgba(255,255,255,.5); --g-fill-dark:rgba(14,14,20,.42);
  --g-blur:22px; --g-edge-dark:rgba(255,255,255,.10); --g-lit:rgba(36,87,255,.42);

  --ease:cubic-bezier(.16,1,.3,1);

  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:32px;
  --s6:48px; --s7:64px; --s8:80px; --s9:96px;

  --sec:96px; --maxw:1266px; --gut:24px; --hdr-h:80px;
  --nav-pad:clamp(24px,3.4vw,80px);   /* header gutter, wider than the body */
  --r-s:8px; --r-m:16px; --r-l:24px;

  --grad-dark:linear-gradient(100deg,var(--mist),#8fa8ff 45%,var(--blue));
  --grad-light:linear-gradient(100deg,var(--indigo),#4d6bff 45%,var(--deep));

  /* monochrome grain: feTurbulence alone emits colour on every channel */
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
@media(max-width:900px){:root{--sec:72px;--gut:20px}}
@media(max-width:600px){:root{--sec:48px;--gut:16px}}

*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;background:var(--cream);-webkit-text-size-adjust:100%}
body{background:var(--cream);color:var(--tx);font-family:Montserrat,system-ui,sans-serif;font-weight:300;font-size:16px;line-height:1.4;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body.is-locked{overflow:hidden}
img{display:block;max-width:100%;height:auto}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
b,strong{font-weight:600}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:var(--r-s)}
::selection{background:rgba(36,87,255,.22)}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.skip{position:absolute;left:-9999px;top:0;z-index:900;padding:var(--s3) var(--s4);background:var(--blue);color:#fff}
.skip:focus{left:0}

h1,h2,h3,h4{font-family:Montserrat,sans-serif;font-weight:300;letter-spacing:-.02em;line-height:1.05}
.grad{font-style:normal;background:var(--grad-light);-webkit-background-clip:text;background-clip:text;color:transparent}
.head--dark .grad,.art .grad{background:var(--grad-dark);-webkit-background-clip:text;background-clip:text}

/* an editorial label instead of the wide-tracked uppercase micro-caps */
.eyebrow{
  display:inline-flex;align-items:baseline;gap:12px;
  font-size:15px;font-weight:500;letter-spacing:0;color:var(--tx-2);margin-bottom:var(--s4);
}
.eyebrow b{font-family:"Space Grotesk",sans-serif;font-weight:400;font-size:14px;color:var(--blue)}
.head--dark .eyebrow,.eyebrow--i{color:rgba(245,245,242,.78)}

.head{max-width:760px;margin-bottom:var(--s6)}
.head h2{font-size:clamp(32px,4vw,48px);line-height:1.04}
.head>p{margin-top:var(--s4);font-size:16px;line-height:1.5;color:var(--tx-2);max-width:56ch}
.head--dark h2{color:var(--tx-i)}
.head--dark>p{color:var(--tx-i2)}
.head--center{max-width:none;text-align:center;display:flex;flex-direction:column;align-items:center}
.head--center .eyebrow{justify-content:center}
.head--center>p{max-width:52ch}

.btn{
  display:inline-flex;align-items:center;gap:var(--s2);padding:14px var(--s4);border-radius:999px;
  font-size:15px;font-weight:400;background:var(--ink);color:var(--cream);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),opacity .3s var(--ease);
}
.btn::after{content:"";width:16px;height:1px;background:currentColor;transition:width .3s var(--ease)}
.btn:hover{transform:translateY(-1px);box-shadow:0 var(--s3) var(--s5) -16px rgba(7,7,7,.7)}
.btn:hover::after{width:24px}
.btn--blue{background:linear-gradient(120deg,var(--blue),var(--indigo));color:#fff}
.btn--blue:hover{box-shadow:0 var(--s3) var(--s6) -16px rgba(36,87,255,.9)}
.btn[disabled]{opacity:.4;pointer-events:none}

/* ============================================================
   HEADER — inside the container, no scrim, no haze
   ============================================================ */
.hdr{position:fixed;inset:0 0 auto 0;height:var(--hdr-h);z-index:500}
/* full bleed with a generous gutter: the logo sits well left and the language
   plus CTA well right, which keeps both clear of the hero tail between them */
.hdr__row{
  width:100%;padding-inline:var(--nav-pad);height:var(--hdr-h);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
}
.hdr[data-theme="dark"]{color:var(--tx-i)}
.hdr__logo{justify-self:start;display:inline-flex;align-items:center;position:relative;min-height:44px}
.hdr__logo img{width:clamp(104px,9vw,134px);height:auto;transition:opacity .4s var(--ease)}
.hdr__logo .on-dark{position:absolute;left:0;top:50%;transform:translateY(-50%);opacity:0}
.hdr[data-theme="dark"] .hdr__logo .on-light{opacity:0}
.hdr[data-theme="dark"] .hdr__logo .on-dark{opacity:1}
.pill{
  justify-self:center;display:flex;gap:var(--s5);padding:12px var(--s5);border-radius:999px;
  background:var(--g-fill);
  backdrop-filter:blur(var(--g-blur)) saturate(180%);-webkit-backdrop-filter:blur(var(--g-blur)) saturate(180%);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 10px var(--s5) -18px rgba(7,7,7,.5);
  transition:background .5s var(--ease),border-color .5s var(--ease);
}
.pill a{font-size:14px;color:var(--tx-2);transition:color .3s var(--ease)}
.pill a:hover{color:var(--blue)}
.hdr[data-theme="dark"] .pill{background:var(--g-fill-dark);border-color:var(--g-edge-dark);box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.hdr[data-theme="dark"] .pill a{color:rgba(245,245,242,.86)}
.hdr[data-theme="dark"] .pill a:hover{color:#fff}
.hdr__cta{
  justify-self:end;font-size:14px;padding:11px var(--s4);border-radius:999px;
  background:linear-gradient(160deg,rgba(255,255,255,.84),rgba(255,255,255,.64));
  border:1px solid rgba(255,255,255,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease);
}
.hdr__cta:hover{transform:translateY(-1px);border-color:var(--g-lit);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 24px rgba(36,87,255,.28)}
.hdr[data-theme="dark"] .hdr__cta{background:var(--g-fill-dark);border-color:var(--g-edge-dark);box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
/* 44px is the smallest thing a thumb hits reliably; the bars stay 32px,
   the target around them does not */
.hdr__burger{display:none;justify-self:end;width:44px;height:44px;place-items:center;gap:6px;margin-right:-6px}
.hdr__burger span{display:block;width:18px;height:1px;background:currentColor;transition:transform .3s var(--ease),opacity .2s}
.hdr__burger[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.hdr__burger[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.hdr__sheet{
  position:absolute;top:var(--hdr-h);left:var(--gut);right:var(--gut);max-width:var(--maxw);margin-inline:auto;
  padding:var(--s4);border-radius:var(--r-l);display:flex;flex-direction:column;
  background:rgba(245,245,242,.94);
  backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);
  border:1px solid rgba(255,255,255,.6);box-shadow:0 var(--s5) var(--s7) -32px rgba(7,7,7,.5);
}
.hdr[data-theme="dark"] .hdr__sheet{background:rgba(10,10,14,.94);border-color:var(--g-edge-dark)}
.hdr__sheet a,.hdr__sheet button{display:flex;align-items:center;min-height:48px;padding:12px 0;font-size:17px;text-align:left}
.hdr__sheetcta{margin-top:var(--s3);align-self:flex-start;padding:12px var(--s4)!important;border-radius:999px;background:var(--ink);color:var(--cream);font-size:14px!important}
@media(max-width:1040px){.hdr__row{grid-template-columns:1fr auto}.pill,.hdr__cta{display:none}.hdr__burger{display:grid}}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;height:100svh;min-height:600px;display:flex;align-items:center;background:var(--cream);overflow:hidden}
.hero__wash{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(46% 34% at 96% 6%,rgba(221,229,255,.7),transparent 70%),
    radial-gradient(40% 30% at 8% 88%,rgba(36,87,255,.07),transparent 70%),
    radial-gradient(52% 22% at 62% 104%,rgba(36,87,255,.09),transparent 68%);
}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);z-index:6}
.hero__in{
  position:relative;z-index:3;width:100%;max-width:var(--maxw);margin-inline:auto;
  padding:var(--hdr-h) var(--gut) 0;display:flex;flex-direction:column;gap:var(--s6);
}
.quote{max-width:min(44rem,50%)}
.quote p{font-size:clamp(23px,4.6vw,50px);font-weight:200;letter-spacing:-.03em;line-height:1.24;color:var(--ink)}
.ln{display:block}
.ln--break{margin-bottom:.42em}
.quote b{font-weight:600}
.quote figcaption{margin-top:var(--s4);display:flex;align-items:center;gap:12px;font-size:14px;color:var(--tx-2)}
.quote figcaption i{width:28px;height:1px;background:rgba(7,7,7,.28);flex:none}
.hero__foot{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s4)}
.hero__foot p{font-size:16px;color:var(--tx-2)}

.ch{opacity:0}
.ch.on{opacity:1;transition:opacity .07s linear}
.caret{display:inline-block;width:.055em;height:.78em;margin-left:.06em;vertical-align:-.08em;background:var(--blue);opacity:0}
.caret.on{opacity:1;animation:blink 1.05s steps(1) infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}

/* No top fade. It is placed clear of the header button instead, tracking the
   container edge so it holds on any width up to an ultrawide monitor. */
.hero__tail{
  position:absolute;z-index:2;top:0;bottom:0;
  /* parked between the centred pill and the right-hand controls, measured off
     the same gutter the header uses so the gap holds at every width */
  right:calc(var(--nav-pad) + clamp(240px,21vw,380px));
  width:min(calc(100svh / 3.1348),18vw,330px);
  clip-path:url(#tailV);background:#05060c;pointer-events:none;
}
@media(max-width:1040px){.quote{max-width:64%}.hero__tail{right:clamp(16px,5vw,80px);width:24vw}}
@media(max-width:880px){.quote{max-width:100%}.hero__tail{right:-14vw;width:44vw;opacity:.5}}

.intro{opacity:0;transform:translateY(10px)}
.is-ready .intro{opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease)}
.is-ready .intro--2{transition-delay:.1s}
.hero__tail{opacity:0;transition:opacity 1.4s var(--ease)}
.is-ready .hero__tail{opacity:1}
@media(max-width:880px){.is-ready .hero__tail{opacity:.5}}
/* ============================================================
   ART + PERFORMANCE — the original overhanging sheet, restored
   ============================================================ */
/* the sheet overhangs the slab, so the section cannot clip its own content */
/* The bottom padding must clear the slab's glow. When it did not, the next
   .rule painted its opaque background straight over it and left a hard
   horizontal cut under the slab. */
.art{background:var(--ink);color:var(--tx-i);padding:var(--sec) 0 calc(var(--s9) + var(--s7))}
.slab{position:relative;margin:var(--s8) auto 0;max-width:820px;aspect-ratio:16/9}
/* ambient light rather than a drop shadow: a radial that fades to nothing on
   every side, so no straight edge can ever show up in it */
.slab::after{
  content:"";position:absolute;left:-12%;right:-12%;top:6%;bottom:calc(var(--s8) * -1);z-index:-1;
  background:radial-gradient(58% 62% at 50% 62%,rgba(36,87,255,.55),rgba(36,87,255,.16) 46%,transparent 72%);
  filter:blur(46px);pointer-events:none;
}
.slab__field{position:absolute;inset:0;border-radius:var(--r-l);overflow:hidden}
.slab__sheet{
  position:absolute;top:calc(var(--s6) * -1);right:calc(var(--s5) * -1);
  width:56%;height:86%;border-radius:var(--r-l);
  background:linear-gradient(150deg,rgba(255,255,255,.16),rgba(255,255,255,.05) 46%,rgba(255,255,255,.10));
  backdrop-filter:blur(18px) saturate(150%) brightness(1.05);
  -webkit-backdrop-filter:blur(18px) saturate(150%) brightness(1.05);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(255,255,255,.08),0 var(--s5) var(--s8) -40px rgba(0,0,0,.9);
}
.slab__sheet::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(118deg,rgba(255,255,255,.34) 0%,transparent 38%,transparent 62%,rgba(255,255,255,.12) 100%)}
/* a sentence rather than two words, so it drops the uppercase tracking that
   only works on single words and keeps the rule as a lead-in */
.slab__foot{
  position:absolute;left:var(--s5);bottom:var(--s5);right:var(--s5);z-index:2;
  display:flex;align-items:center;gap:var(--s3);
  font-family:"Space Grotesk",sans-serif;font-weight:300;
  font-size:clamp(13px,1.15vw,16px);letter-spacing:.005em;
  color:rgba(255,255,255,.82);text-shadow:0 1px 12px rgba(4,6,20,.5);
}
.slab__foot i{flex:none;width:clamp(20px,2.4vw,34px);height:1px;background:rgba(255,255,255,.45)}
@media(max-width:760px){.slab{aspect-ratio:4/3;margin-top:var(--s7)}.slab__sheet{top:calc(var(--s6) * -1);right:calc(var(--s4) * -1);width:64%;height:82%}}

/* ============================================================
   PILLARS — tails centred in the container
   ============================================================ */
.pillars{background:var(--cream);padding:var(--s6) 0 var(--sec)}
/* full bleed by design: the bars run the whole page and the shift they pivot
   on is what sits centred. margin here must not reintroduce a left offset. */
/* a full-bleed element needs more air than a text block, or it reads as
   crashing into the heading above it */
.pillars .head{margin-bottom:var(--s8)}
.shift{width:100%;margin:0 0 var(--s8);user-select:none}
.shift__stage{position:relative;width:100%;height:var(--stage-h,400px)}
.row{position:absolute;left:0;width:100%;height:var(--row-h,140px);display:block;text-align:left}
.row__svg{position:absolute;inset:0;width:100%;height:100%}
.row__svg path{transition:fill .45s var(--ease)}
.row__a,.row__b{
  position:absolute;white-space:nowrap;color:var(--cream);font-weight:200;
  font-size:var(--row-fs,40px);letter-spacing:-.03em;line-height:1;pointer-events:none;
  transition:opacity .4s var(--ease);
}
/* each label hugs its own side of the shift, so a pair reads as one unit */
.row__a{left:var(--ax,40%);top:25%;transform:translate(-100%,-50%)}
.row__b{left:var(--bx,56%);top:75%;transform:translateY(-50%)}
.row__a,.row__b{opacity:.9}
.row:hover .row__a,.row:hover .row__b,.row[aria-selected="true"] .row__a,.row[aria-selected="true"] .row__b{opacity:1}

.panels{position:relative}
.panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:var(--s7);align-items:center}
.panel__body h3{font-size:clamp(24px,2.8vw,32px);margin-bottom:var(--s5)}
/* a spec list rather than dashes: statement, then the reason */
.spec{display:flex;flex-direction:column}
.spec li{padding:var(--s4) 0;border-top:1px solid rgba(7,7,7,.12)}
.spec li:last-child{border-bottom:1px solid rgba(7,7,7,.12)}
.spec b{display:block;font-size:15px;font-weight:500;color:var(--tx);margin-bottom:var(--s1)}
.spec span{display:block;font-size:14px;line-height:1.55;color:var(--tx-2)}
@media(max-width:900px){.panel{grid-template-columns:1fr;gap:var(--s5)}}


/* ============================================================
   CLIPS
   ============================================================ */
.clip{position:relative;margin-top:var(--s3)}
.panel .clip{margin-top:0}
.clip__frame{position:relative;aspect-ratio:4/3;border-radius:var(--r-l);overflow:hidden;background:linear-gradient(158deg,#101425 0%,#0a0b12 55%,#141a30 100%);box-shadow:0 var(--s5) var(--s8) -48px rgba(7,7,7,.7)}
.clip__frame::before{content:"";position:absolute;inset:0;background:radial-gradient(58% 70% at 76% 22%,rgba(36,87,255,.34),transparent 62%),radial-gradient(50% 60% at 18% 88%,rgba(48,76,255,.2),transparent 60%)}
.clip__frame::after{content:"";position:absolute;inset:0;background-image:var(--noise);background-size:180px 180px;opacity:.34;mix-blend-mode:soft-light}
/* the video sits inside the frame, so the frame keeps its own rounding and
   the gradient behind it still shows while the file is arriving */
.clip video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* ============================================================
   PROCESS — rim light follows the cursor, brighter each step
   ============================================================ */
.process{background:var(--ink);color:var(--tx-i);padding:var(--s6) 0}
.track{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)}
.cell{position:relative;overflow:hidden;padding:var(--s5);border-radius:var(--r-m)}
.cell--dark{
  --lit:.3;--mx:50%;--my:50%;
  background:var(--g-fill-dark);
  backdrop-filter:blur(var(--g-blur)) saturate(160%);-webkit-backdrop-filter:blur(var(--g-blur)) saturate(160%);
  transition:transform .4s var(--ease);
}
.cell--dark::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:radial-gradient(240px circle at var(--mx) var(--my),
    rgba(180,200,255,calc(.35 + .65 * var(--lit))) 0%,
    rgba(36,87,255,calc(.18 + .5 * var(--lit))) 34%,
    rgba(255,255,255,.07) 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,linear-gradient(#000 0 0);mask-composite:exclude;
}
.cell--dark::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(280px circle at var(--mx) var(--my),rgba(36,87,255,calc(.16 * var(--lit) + .04)),transparent 66%);
}
.cell--dark:hover{transform:translateY(-3px)}
.cell--dark h3{color:var(--tx-i);font-size:22px;margin-bottom:var(--s2)}
.cell--dark p{color:var(--tx-i2);font-size:14.5px;line-height:1.6}
.cell__n{display:block;font-family:"Space Grotesk",sans-serif;font-size:13px;color:#8fa8ff;margin-bottom:var(--s5)}
.track li:nth-child(1){--lit:.3}
.track li:nth-child(2){--lit:.53}
.track li:nth-child(3){--lit:.76}
.track li:nth-child(4){--lit:1}
.cell>*{position:relative;z-index:2}
@media(max-width:1000px){.track{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.track{grid-template-columns:1fr}}

/* ============================================================
   FAQ · CLOSE · FOOTER · RULE
   ============================================================ */
.faq{background:var(--cream);padding:var(--s6) 0}
.faq__in{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:var(--s7);align-items:start}
.faq .head{margin-bottom:0;position:sticky;top:calc(var(--hdr-h) + var(--s4))}
.qa{display:flex;flex-direction:column}
.qa details{border-top:1px solid rgba(7,7,7,.13)}
.qa details:last-child{border-bottom:1px solid rgba(7,7,7,.13)}
.qa summary{display:flex;align-items:center;gap:var(--s4);padding:var(--s4) 0;cursor:pointer;list-style:none;font-size:17px}
.qa summary::-webkit-details-marker{display:none}
.qa summary span{flex:1}
.qa summary i{position:relative;flex:none;width:14px;height:14px}
.qa summary i::before,.qa summary i::after{content:"";position:absolute;left:50%;top:50%;width:13px;height:1px;background:var(--tx);transform:translate(-50%,-50%);transition:transform .4s var(--ease),opacity .25s}
.qa summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
.qa details[open] summary i::after{transform:translate(-50%,-50%) rotate(0);opacity:0}
.qa details p{padding:0 var(--s5) var(--s4) 0;font-size:15px;line-height:1.6;color:var(--tx-2)}
@media(max-width:900px){.faq__in{grid-template-columns:1fr;gap:var(--s5)}.faq .head{position:static}}

.close{position:relative;background:var(--ink);color:var(--tx-i);padding:var(--s6) 0 var(--sec);overflow:hidden}
.close__wash{position:absolute;left:50%;bottom:-46%;width:min(80rem,140vw);aspect-ratio:1.5/1;transform:translateX(-50%);background:radial-gradient(ellipse at center,rgba(36,87,255,.34),rgba(48,76,255,.08) 42%,transparent 70%);filter:blur(30px);pointer-events:none}
.close .wrap{position:relative;z-index:1}
.close .head{margin-bottom:var(--s4)}
.close h2{font-size:clamp(30px,4.2vw,52px);color:var(--tx-i)}
.close>.wrap>p{max-width:52ch;font-size:16px;line-height:1.6;color:var(--tx-i2)}
.close__row{margin-top:var(--s6)}

.foot{background:var(--ink);color:var(--tx-i);padding:var(--sec) 0 var(--s4)}
.foot__in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--s7)}
.foot__in img{width:150px;margin-bottom:var(--s4)}
.foot__in p{font-size:14px;line-height:1.9;color:var(--tx-i2)}
.foot__nav{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4)}
.foot__nav h3{font-family:"Space Grotesk",sans-serif;font-size:11px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--tx-i3);margin-bottom:var(--s3)}
/* a footer link is still a link you have to hit with a thumb */
.foot__nav a,.foot__nav span,.foot__link{display:flex;align-items:center;min-height:40px;font-size:14px;color:var(--tx-i2);padding:var(--s1) 0;transition:color .25s;text-align:left}
.foot__nav a:hover,.foot__link:hover{color:var(--tx-i)}
.foot__base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s7);padding-top:var(--s4);border-top:1px solid rgba(245,245,242,.1);font-size:12px;color:var(--tx-i3)}
@media(max-width:760px){.foot__in{grid-template-columns:1fr}}

.rule{position:relative;width:100%;height:clamp(110px,11vw,170px);line-height:0;overflow:hidden}
.rule svg{display:block;width:100%;height:100%}
.rule[data-rule="to-cream"]{background:var(--cream)}
.rule[data-rule="to-ink"]{background:var(--ink)}
.rule .fill--ink{fill:var(--ink)}
.rule .fill--cream{fill:var(--cream)}

/* ── arrivals ──
   Three motions rather than one, so a page does not read as a single blind
   going up. A rise for blocks of text, a short slide for anything that is a
   list, and a settle for material: images and film come in at 98% and land.
   All three are opacity and transform only, and all three are off entirely
   under prefers-reduced-motion. */
.rv{opacity:0;transform:translateY(12px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv--x{opacity:0;transform:translateX(-10px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
.rv--z{opacity:0;transform:scale(.97) translateY(8px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
.rv.in,.rv--x.in,.rv--z.in{opacity:1;transform:none}

/* the answer arrives rather than appearing, every time it is opened */
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.qa details[open] > p{animation:faqIn .42s var(--ease) both}

/* ============================================================
   BUSINESS DIAGNOSIS — modal
   ============================================================ */
.dxm{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:var(--s4)}
/* the scrim used to blur the whole viewport behind it. A backdrop blur is
   recomputed whenever anything behind it moves, and at 84% black over a
   dark page there was nothing of it left to see. The cost was the entire
   screen, every frame the form was open. */
.dxm__scrim{position:absolute;inset:0;background:rgba(4,4,8,.84);opacity:0;transition:opacity .4s var(--ease)}
.dxm.is-open .dxm__scrim{opacity:1}
.dxm__panel{
  position:relative;width:min(820px,100%);max-height:min(880px,92svh);overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:rgba(143,168,255,.35) transparent;
  padding:var(--s6);border-radius:var(--r-l);color:var(--tx-i);
  background:linear-gradient(168deg,#12131c,#0a0a10);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 var(--s7) var(--s9) -40px rgba(0,0,0,1);
  opacity:0;transform:translateY(14px) scale(.985);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.dxm.is-open .dxm__panel{opacity:1;transform:none}
@media(max-width:620px){.dxm{padding:0}.dxm__panel{padding:var(--s5) var(--s4);max-height:100svh;border-radius:0;width:100%}}
.dxm__x{position:absolute;top:var(--s4);right:var(--s4);width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.18);display:grid;place-items:center;transition:background .25s,border-color .25s}
.dxm__x:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.4)}
.dxm__x span{position:absolute;width:13px;height:1px;background:#fff}
.dxm__x span:first-child{transform:rotate(45deg)}
.dxm__x span:last-child{transform:rotate(-45deg)}
.dxm__head{margin-bottom:var(--s6);padding-right:var(--s6)}
.dxm__head h2{font-size:clamp(24px,3.2vw,34px);color:#fff;margin-bottom:var(--s3)}
.dxm__head>p:last-child{font-size:15px;line-height:1.6;color:var(--tx-i2);max-width:52ch}

/* progress reads from the pips themselves; no "step x of y" caption */
.dx__pips{display:flex;gap:var(--s2);align-items:center}
.dx__pips i{
  display:block;height:3px;flex:1;border-radius:3px;background:rgba(255,255,255,.12);
  transition:background .45s var(--ease),flex-grow .55s var(--ease);
}
.dx__pips i.done{background:rgba(143,168,255,.5)}
.dx__pips i.on{flex-grow:2.2;background:linear-gradient(90deg,var(--blue),var(--indigo))}
.dx__step{display:none;border:0;margin-top:var(--s5)}
.dx__step.is-on{display:block;animation:stepIn .45s var(--ease)}
@keyframes stepIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.dx__step legend{font-size:clamp(20px,2.6vw,26px);font-weight:300;letter-spacing:-.02em;color:#fff;padding:0;margin-bottom:var(--s3)}
.dx__hint{font-size:14px;line-height:1.55;color:var(--tx-i2);margin-bottom:var(--s4);max-width:56ch}
.opts{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s2)}
@media(max-width:620px){.opts{grid-template-columns:1fr}}
/* glass options: tinted body, lit top edge, soft lift */
.opt{
  position:relative;text-align:left;padding:var(--s4);border-radius:var(--r-m);overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.03) 60%,rgba(255,255,255,.06));
  backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(255,255,255,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 var(--s3) var(--s5) -28px rgba(0,0,0,.9);
  transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease);
}
.opt b{display:block;font-size:15px;font-weight:500;color:#fff}
.opt span{display:block;margin-top:var(--s1);font-size:13px;color:var(--tx-i2)}
.opt:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 var(--s4) var(--s6) -28px rgba(0,0,0,1)}
.opt.is-sel{
  background:linear-gradient(140deg,rgba(36,87,255,.42),rgba(48,76,255,.22));
  border-color:rgba(143,168,255,.75);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 0 0 1px rgba(36,87,255,.28),0 var(--s4) var(--s6) -26px rgba(36,87,255,.9);
}
.opt--other{border-style:dashed}

.dxq{margin-bottom:var(--s3)}
.dxq legend,.dxq .lg{font-size:clamp(20px,2.6vw,26px);font-weight:300;letter-spacing:-.02em;color:#fff;padding:0;margin:0}
.other{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s4)}
.other span{font-size:13px;color:var(--tx-i2)}
.fields{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3)}
@media(max-width:620px){.fields{grid-template-columns:1fr}}
.fields label{display:flex;flex-direction:column;gap:var(--s2)}
.fields span{font-size:13px;color:var(--tx-i2)}
.fields small{display:block;font-size:11px;color:var(--tx-i3);margin-top:2px}
.fields input,.other input{padding:13px var(--s3);border-radius:var(--r-s);font:inherit;font-size:15px;color:#fff;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);transition:border-color .25s,background .25s}
.fields input::placeholder,.other input::placeholder{color:rgba(245,245,242,.28)}
.fields input:focus,.other input:focus{outline:none;border-color:rgba(143,168,255,.8);background:rgba(255,255,255,.08)}
.fields input:user-invalid{border-color:rgba(255,120,120,.6)}
.dx__nav{display:flex;align-items:center;gap:var(--s4);margin-top:var(--s6)}
.dx__back{font-size:14px;color:var(--tx-i2)}
.dx__back:hover{color:#fff}
.dx__nav .btn{margin-left:auto}
.dx__capture{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid rgba(255,255,255,.1)}
.dx__note{margin-top:var(--s3);font-size:13px;color:#8fa8ff;min-height:1em}
/* the result: one sentence, one picture, three things to do */
.dxr__lead{font-size:14px;color:#8fa8ff;margin-bottom:var(--s2)}
.dxr__h{margin:0 0 var(--s4);font-size:clamp(26px,4vw,40px);font-weight:300;letter-spacing:-.02em;color:#fff}
.dxr__p{font-size:16px;line-height:1.65;color:var(--tx-i2);max-width:58ch}
.dxr__p b{color:#fff;font-weight:500}

/* five stages as five rules, the weak one lit. The site says everything else
   with a thin line and a colour, so this does too; a row of tick and warning
   icons was the only place on the page wearing a badge. */
.dxr__chain{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s3);margin:var(--s6) 0}
.dxr__link{display:flex;flex-direction:column;gap:var(--s3)}
.dxr__bar{display:block;height:2px;border-radius:2px;background:rgba(255,255,255,.14)}
.dxr__linkname{font-size:12.5px;line-height:1.4;color:var(--tx-i3)}
.dxr__link.is-weak .dxr__bar{background:var(--blue);box-shadow:0 0 0 3px rgba(36,87,255,.16)}
.dxr__link.is-weak .dxr__linkname{color:#fff}
@media(max-width:620px){
  .dxr__chain{grid-template-columns:1fr;gap:var(--s2)}
  .dxr__link{flex-direction:row;align-items:center;gap:var(--s3)}
  .dxr__bar{width:26px;flex:none}
}

/* three things, numbered, nothing else */
.dxr__acts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;counter-reset:act}
.dxr__act{
  position:relative;padding:var(--s4) 0 var(--s4) var(--s6);
  border-top:1px solid rgba(255,255,255,.12);counter-increment:act;
}
.dxr__act:last-child{border-bottom:1px solid rgba(255,255,255,.12)}
.dxr__act::before{
  content:counter(act);position:absolute;left:0;top:calc(var(--s4) + 2px);
  font-family:"Space Grotesk",sans-serif;font-size:13px;color:#8fa8ff;
}
.dxr__act b{display:block;font-size:16px;font-weight:500;color:#fff}
.dxr__act em{display:block;font-style:normal;margin-top:var(--s1);font-size:14px;line-height:1.55;color:var(--tx-i2)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;scroll-behavior:auto!important}
  /* everything except the reveals loses its transition */
  *:not(.rv):not(.rv--x):not(.rv--z){transition-duration:.001ms!important}
  /* What this setting asks for is no motion, not no change. Travel and scale
     are what trigger people; a plain fade does not. So the reveals keep a
     short fade and give up the movement. */
  .rv,.rv--x,.rv--z{transform:none!important;transition:opacity .45s linear!important}
  .intro{opacity:1;transform:none}
  .ch{opacity:1}
}

/* ── language toggle ── */
.hdr__end{justify-self:end;display:flex;align-items:center;gap:var(--s5)}
/* the nav pill keeps its glass; these two sit beside it over the same
   ground, and three backdrop passes over an animating hero was three times
   the cost of one for a difference nobody can point at */
.lang{
  display:flex;align-items:center;gap:var(--s2);padding:5px 7px;border-radius:999px;
  background:linear-gradient(160deg,rgba(255,255,255,.82),rgba(255,255,255,.62));
  border:1px solid rgba(255,255,255,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.lang span{
  display:grid;place-items:center;width:30px;height:21px;border-radius:5px;overflow:hidden;
  opacity:.42;filter:saturate(.55);transition:opacity .25s,filter .25s,box-shadow .25s;
}
.lang span svg{width:100%;height:100%;display:block}
.lang span.is-on{opacity:1;filter:none;box-shadow:0 0 0 1.5px var(--ink)}
.lang:focus:not(:focus-visible){outline:none}
.hdr[data-theme="dark"] .lang{background:var(--g-fill-dark);border-color:var(--g-edge-dark);box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.hdr[data-theme="dark"] .lang span.is-on{box-shadow:0 0 0 1.5px var(--cream)}

@media(max-width:1040px){.hdr__end{display:none}}

/* ============================================================
   SUB PAGES — services.html and about.html
   ============================================================ */
.page,.svc{background:var(--cream)}
.page__top,.svc__top{padding:calc(var(--hdr-h) + var(--s9)) 0 var(--s8)}
.page__top h1,.svc__top h1{font-size:clamp(34px,5vw,62px);font-weight:300;letter-spacing:-.025em;line-height:1.04;max-width:18ch}
.page__lede,.svc__lede{margin-top:var(--s5);max-width:58ch;font-size:clamp(16px,1.7vw,19px);line-height:1.65;color:var(--tx-2)}

.svc__list{padding-bottom:var(--s9)}
/* the names carry the page and one stage carries the work. Ten tiles at once
   was the clutter; this shows one thing at a time and lets you drive it. */
.svc__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--s7);align-items:start}
/* the gallery runs longer than the list, so the list rides along with it */
.svc__names{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
  position:sticky;top:calc(var(--hdr-h) + var(--s5))}
.svc__names li{display:flex;align-items:baseline;gap:var(--s4);padding:var(--s4) 0}
.svc__t{display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.svc__n{
  flex:none;font-family:"Space Grotesk",sans-serif;font-size:13px;
  color:var(--blue);font-variant-numeric:tabular-nums;
}
.svc__name{
  font-size:clamp(20px,2.5vw,32px);font-weight:300;letter-spacing:-.02em;
  line-height:1.14;color:var(--tx);
}
/* one line each: enough for a search engine to know what the name means,
   short enough that the list still reads as a list */
.svc__d{font-size:14px;line-height:1.5;color:var(--tx-2);max-width:46ch}

/* the stage: one tile per material, each at that material's own shape */
.svc__scatter{position:relative;min-height:200px}
.svctile{
  position:absolute;margin:0;overflow:hidden;
  border-radius:var(--r-m);background:rgba(7,7,7,.05);
  box-shadow:0 var(--s5) var(--s7) -42px rgba(7,7,7,.85);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
  cursor:pointer;
}
.svctile video,.svctile img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
/* the grain ties the materials to the rest of the site's surfaces */
.svctile::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--noise);background-size:180px 180px;opacity:.1;
}
.svctile:hover,.svctile:focus-visible{
  transform:translateY(-6px);
  box-shadow:0 var(--s6) var(--s8) -28px rgba(36,87,255,.95);
  outline:none;
}
@media(max-width:960px){
  .svc__grid{grid-template-columns:1fr;gap:var(--s6)}
  .svc__names{position:static}
}

/* about: the split */
.story{padding:var(--s8) 0}
.story__in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--s7);align-items:center}
.story__body h2{font-size:clamp(26px,3.4vw,40px);margin-bottom:var(--s5)}
.story__body p{font-size:17px;line-height:1.72;color:var(--tx-2);max-width:56ch}
.story__body p + p{margin-top:var(--s4)}
.story__art{position:relative;margin:0;aspect-ratio:1;border-radius:var(--r-l);overflow:hidden;background:#0a0b12}
@media(max-width:900px){.story__in{grid-template-columns:1fr;gap:var(--s5)}.story__art{aspect-ratio:16/9}}

/* about: founder note */
/* ── about: the founder's note, and nothing else ── */
.note{padding:calc(var(--hdr-h) + var(--s9)) 0 var(--s9);background:var(--ink);color:var(--tx-i)}
.note__in{max-width:760px}
.note__h{margin-top:var(--s2);font-size:clamp(30px,4.2vw,52px);font-weight:200;letter-spacing:-.025em;line-height:1.06;color:var(--tx-i);max-width:20ch}
.note__body{margin-top:var(--s6)}
.note__body p{
  font-size:clamp(17px,1.9vw,21px);font-weight:200;line-height:1.62;
  letter-spacing:-.01em;color:var(--tx-i);
}
.note__body p + p{margin-top:var(--s5)}

/* the signature is a drawing, not a typeface: it sits at its own size and
   the line underneath is the only thing set in type */
.sign{margin:var(--s8) 0 0;padding-top:var(--s6);border-top:1px solid rgba(245,245,242,.16)}
.sign img{
  display:block;width:clamp(160px,20vw,230px);height:auto;
  /* a black-ink signature on an ink page has to be inverted to read */
  filter:invert(1);opacity:.92;
}
.sign figcaption{display:flex;flex-direction:column;gap:var(--s1);margin-top:var(--s3)}
.sign__name{font-size:16px;font-weight:500;color:var(--tx-i)}
.sign__role{font-size:14px;color:var(--tx-i2)}
.sign__line{margin-top:var(--s3);font-size:15px;line-height:1.6;color:var(--tx-i2);max-width:44ch}

.hold{padding:var(--s9) 0 calc(var(--s9) + var(--s6))}

/* ============================================================
   PERFORMANCE
   The plasma is the expensive part of this site: every layer is a
   blur plus a blend mode, and each one composites on every frame.
   These rules cut the layer count and stop anything off-screen.
   ============================================================ */

/* Keep each plasma's compositing inside its own box */
.plasma,.slab__field,.svctile,.story__art{contain:paint}


/* Nothing animates while it is scrolled out of view. This selector lost
   its declaration block in an earlier edit, which left every plasma on the
   page running whether or not you could see it. */
.is-off i,
.is-off .gyre{animation-play-state:paused!important}

/* The diagnosis scrim is a backdrop-filter across the whole viewport. A
   backdrop blur has to be recomputed every time anything behind it moves,
   so a live plasma underneath means the browser re-blurs the entire screen
   sixty times a second for as long as the form is open. Behind a 72% scrim
   at 8px you cannot see the motion anyway, so it stops while the form is up
   and the blur is computed once. */
body.is-locked .plasma i,
body.is-locked .plasma .gyre,
body.is-locked .svcrow__plasma i{animation-play-state:paused!important}

/* Glass costs a backdrop-filter pass per element. Worth it on the nav and
   the modal panel; not worth it on cards sitting over a flat background,
   where a gradient is indistinguishable. */
.cell{backdrop-filter:none;-webkit-backdrop-filter:none}
.cell:not(.cell--dark){background:linear-gradient(160deg,rgba(255,255,255,.86),rgba(255,255,255,.42))}
.cell--dark{background:rgba(18,18,26,.72)}
.opt{backdrop-filter:none;-webkit-backdrop-filter:none}
/* the section itself: cream, with room under the orbit for the CTA glow */
.reel{background:var(--cream);padding:var(--s7) 0 var(--s8)}

/* ============================================================
   SERVICES ORBIT
   Four reels on one circle around the button, flat. Every card is the
   same size and the same weight, upright at all times, evenly spaced a
   quarter turn apart. The path itself is drawn, so what you read is a
   ring of work pointing at one door, not objects floating in fake depth.
   Positions come from orbitField() in script.js.
   ============================================================ */
.orbit{
  position:relative;width:100%;max-width:1320px;margin-inline:auto;
  height:clamp(600px,62vw,860px);
  display:grid;place-items:center;
}
/* anchors the middle so the centre reads as a destination, not a gap */
.orbit__glow{
  position:absolute;left:50%;top:50%;width:min(880px,84vw);aspect-ratio:1.7/1;
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(36,87,255,.17),rgba(36,87,255,.05) 44%,transparent 72%);
}
/* rx and ry are written by the script, so the line is always the exact
   path the cards travel rather than an approximation of it */
.orbit__ring{
  position:absolute;left:50%;top:50%;
  width:calc(var(--rx,0px) * 2);height:calc(var(--ry,0px) * 2);
  transform:translate(-50%,-50%);
  border:1px dashed rgba(7,7,7,.14);border-radius:50%;
  pointer-events:none;
}
.orbit__cards{position:absolute;inset:0;pointer-events:none}
.ochip{
  position:absolute;left:50%;top:50%;pointer-events:auto;
  width:clamp(118px,10.5vw,172px);aspect-ratio:9/16;
  margin:0;border-radius:var(--r-l);overflow:hidden;
  background:#0a0b12;
  border:1px solid rgba(7,7,7,.1);
  box-shadow:0 var(--s5) var(--s7) -38px rgba(7,7,7,.8);
  transition:box-shadow .45s var(--ease),border-color .45s var(--ease);
}
/* the clip is laid over the still and only exists while you point at the
   card, so the still is what carries the card the rest of the time */
.ochip img{display:block;width:100%;height:100%;object-fit:cover}
.ochip video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* the grain ties the reels to the rest of the site's surfaces */
.ochip::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--noise);background-size:180px 180px;opacity:.14;
}
.ochip.is-lift{
  border-color:rgba(36,87,255,.55);
  box-shadow:0 var(--s6) var(--s8) -26px rgba(36,87,255,1);
}

/* ── the CTA at the centre ── */
.orbit__mid{position:relative;z-index:30;width:100%;display:flex;justify-content:center;padding:0 var(--gut)}
.bigbtn{
  position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:var(--s5);width:100%;max-width:560px;padding:var(--s6);
  border-radius:var(--r-l);
  background:linear-gradient(150deg,#ffffff,#eef1fd 60%,#e2e9ff);
  box-shadow:0 2px 3px -2px rgba(7,7,7,.07),0 var(--s6) var(--s8) -50px rgba(36,87,255,.9);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
/* scales from its own centre, so it grows evenly rather than only rightward */
.bigbtn:hover{transform:scale(1.02);box-shadow:0 2px 3px -2px rgba(7,7,7,.08),0 var(--s7) var(--s9) -44px rgba(36,87,255,1)}
.bigbtn__copy{display:flex;flex-direction:column;gap:var(--s2);text-align:left}
.bigbtn__t{font-size:clamp(22px,2.5vw,30px);font-weight:300;letter-spacing:-.02em}
.bigbtn__s{font-size:14px;line-height:1.5;color:var(--tx-2)}
.bigbtn__go{
  flex:none;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(120deg,var(--blue),var(--indigo));transition:transform .45s var(--ease);
}
.bigbtn__go svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.bigbtn:hover .bigbtn__go{transform:translateX(4px)}
/* above the grid breakpoint the button gives way to the ring, so the cards
   always have room to pass it rather than slide behind it */
@media(min-width:901px){.bigbtn{max-width:min(560px,calc(100vw - 560px))}}

/* below this width the button is close to full-bleed, so there is no ring
   left to travel: the reels become a plain row above it, which stays
   legible instead of piling up in the middle. orbitField() stops too. */
@media(max-width:900px){
  .orbit{display:block;height:auto;padding:0 var(--gut)}
  .orbit__glow,.orbit__ring{display:none}
  .orbit__cards{
    position:static;pointer-events:auto;
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3);
    max-width:620px;margin:0 auto var(--s6);
  }
  .ochip{position:static;width:auto;transform:none!important}
  .orbit__mid{padding:0}
}
@media(max-width:620px){
  .orbit__cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2);max-width:400px}
  .bigbtn{padding:var(--s4) var(--s5);gap:var(--s4)}
  .bigbtn__go{width:46px;height:46px}
}

/* ============================================================
   MONTHLY REPORT
   The real thing, not a drawing of one.
   ============================================================ */
/* the image already carries its own rounded card and shadow on a cream
   ground, so the container adds nothing but a second frame around it */
.report{margin:0}
.report img{display:block;width:100%;height:auto}

/* ============================================================
   PLASMA
   Layered conic and radial fields, each blurred and screened over the
   one below. This is the original build, restored: the look is settled
   and performance work goes around it, never through it.
   ============================================================ */
.plasma,.svcrow__plasma{position:absolute;inset:0;isolation:isolate;overflow:hidden}
.plasma i,.plasma .gyre,.svcrow__plasma i,.svcrow__plasma .gyre{position:absolute;display:block}
.gyre{inset:0;animation:gyre 41s linear infinite}
.cur{position:absolute;inset:-50%;mix-blend-mode:screen}
.c1{
  background:conic-gradient(from 90deg,transparent 0%,var(--deep) 10%,var(--indigo) 20%,var(--blue) 29%,
    transparent 44%,transparent 56%,var(--blue) 64%,var(--indigo) 76%,transparent 92%);
  filter:blur(calc(26px / var(--k,1)));animation:spinA 15s linear infinite;
}
.c2{
  background:conic-gradient(from 220deg,transparent 0%,rgba(21,46,158,.95) 15%,rgba(36,87,255,.95) 29%,
    transparent 44%,transparent 60%,rgba(48,76,255,.85) 74%,transparent 88%);
  filter:blur(calc(32px / var(--k,1)));opacity:.86;animation:spinB 24s linear infinite;
}
.mass{border-radius:50%;mix-blend-mode:screen}
.m1{top:-24%;left:8%;width:74%;height:150%;background:radial-gradient(ellipse at center,var(--blue) 0%,var(--indigo) 38%,rgba(21,46,158,.5) 60%,transparent 74%);filter:blur(calc(20px / var(--k,1)));animation:driftA 12s ease-in-out infinite alternate}
.m2{bottom:-30%;right:2%;width:68%;height:132%;background:radial-gradient(ellipse at center,var(--indigo) 0%,var(--blue) 44%,rgba(36,87,255,.34) 64%,transparent 78%);filter:blur(calc(24px / var(--k,1)));opacity:.88;animation:driftB 17s ease-in-out infinite alternate}
.m3{top:16%;left:30%;width:38%;height:48%;background:radial-gradient(circle at center,var(--mist) 0%,rgba(143,168,255,.5) 42%,transparent 70%);filter:blur(calc(18px / var(--k,1)));opacity:.72;animation:orbit 20s ease-in-out infinite}
.eddy{
  top:16%;left:48%;width:40%;height:40%;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(48,76,255,.8) 70deg,rgba(221,229,255,.9) 120deg,transparent 200deg,rgba(36,87,255,.55) 290deg,transparent 360deg);
  filter:blur(calc(13px / var(--k,1)));mix-blend-mode:screen;opacity:.85;animation:spinA 8s linear infinite,wander 18s ease-in-out infinite alternate;
}
.fil{
  inset:-20%;background:repeating-conic-gradient(from 0deg,rgba(221,229,255,.1) 0deg 2deg,transparent 2deg 13deg);
  filter:blur(calc(11px / var(--k,1)));mix-blend-mode:screen;opacity:.34;
  -webkit-mask-image:radial-gradient(circle,transparent 22%,#000 58%,transparent 80%);
  mask-image:radial-gradient(circle,transparent 22%,#000 58%,transparent 80%);
  animation:spinA 60s linear infinite;
}
.fil.f2{background:repeating-conic-gradient(from 5deg,rgba(36,87,255,.09) 0deg 1.5deg,transparent 1.5deg 16deg);opacity:.26;animation:spinB 38s linear infinite}
/* soft-light holds density across highlights and shadows; overlay dies at both ends */
.grain{inset:0;background-image:var(--noise);background-size:calc(180px / var(--k,1)) calc(180px / var(--k,1));opacity:.5;mix-blend-mode:soft-light;pointer-events:none}
.plasma--tail .m1{top:-10%;left:-16%;width:120%;height:66%}
.plasma--tail .m2{bottom:-12%;right:-20%;width:124%;height:62%}
.plasma--tail .m3{top:34%;left:6%;width:80%;height:34%}
.plasma--tail .eddy{width:74%;height:26%}
.plasma--tail .grain{opacity:.62}

@keyframes gyre{0%{transform:rotate(0) scale(1)}25%{transform:rotate(-95deg) scale(1.04)}50%{transform:rotate(-180deg) scale(.98)}75%{transform:rotate(-268deg) scale(1.03)}100%{transform:rotate(-360deg) scale(1)}}
@keyframes spinA{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes spinB{from{transform:rotate(360deg)}to{transform:rotate(0)}}
@keyframes driftA{0%{transform:rotate(-12deg) scale(.88) translate(-5%,-5%)}100%{transform:rotate(18deg) scale(1.16) translate(6%,8%)}}
@keyframes driftB{0%{transform:rotate(14deg) scale(1.1) translate(5%,6%)}100%{transform:rotate(-16deg) scale(.86) translate(-7%,-7%)}}
@keyframes orbit{0%{transform:translate(0,0) scale(.9)}25%{transform:translate(16%,14%) scale(1.1)}50%{transform:translate(2%,30%) scale(.85)}75%{transform:translate(-14%,12%) scale(1.05)}100%{transform:translate(0,0) scale(.9)}}
/* The original wander moved top/left, which is a layout property and so
   re-laid-out and repainted the whole field sixty times a second. These are
   the same offsets expressed against the element's own box, so the path is
   identical and the browser can do it on the compositor. `translate` is a
   separate property from `transform`, so it composes with spinA's rotation
   instead of overwriting it. */
@keyframes wander{0%{translate:-5% -5%}35%{translate:-75% 45%}70%{translate:-20% 80%}100%{translate:20% 20%}}
.plasma--tail .eddy{animation:spinA 8s linear infinite,wanderTail 18s ease-in-out infinite alternate}
@keyframes wanderTail{0%{translate:-2.7% -7.7%}35%{translate:-40.5% 69.2%}70%{translate:-10.8% 123.1%}100%{translate:10.8% 30.8%}}

/* ============================================================
   FRAME METER
   Off unless the url ends in ?fps. It reports the real frame rate on
   the machine you are looking at, which is the only place the answer
   to "is it laggy" actually lives.
   ============================================================ */
.fps{
  position:fixed;left:12px;bottom:12px;z-index:9999;
  padding:8px 12px;border-radius:10px;pointer-events:none;
  font-family:"Space Grotesk",monospace;font-size:13px;line-height:1.5;
  color:#eaf0ff;background:rgba(6,8,18,.86);border:1px solid rgba(143,168,255,.35);
  font-variant-numeric:tabular-nums;white-space:pre;
}
.fps b{font-weight:500;color:#8fa8ff}

/* ============================================================
   PLASMA FRAME BUDGET
   The hero tail is the heaviest thing on the site: 13.3 million pixels of
   blurred layer inside a 475 thousand pixel column, nine of them blended,
   all behind an svg clip path. The layers are what they are, so the saving
   has to come from how often they are redrawn rather than from what they
   draw.

   These rotations run for fifteen to sixty seconds a turn, so a step every
   twentieth of a second moves each one by well under a degree. On a field
   blurred at 11 to 32px that is not a visible difference, and it is eight
   times less raster work on a 165Hz display.
   ============================================================ */
/* gyre and orbit have five keyframe stops, and steps apply per interval,
   so the count is a quarter of the others for the same rate */
.gyre{animation-timing-function:steps(205)}
.c1{animation-timing-function:steps(300)}
.c2{animation-timing-function:steps(480)}
.fil{animation-timing-function:steps(1200)}
.fil.f2{animation-timing-function:steps(760)}
.eddy,.plasma--tail .eddy{animation-timing-function:steps(160),steps(90)}
/* the masses were the whole remaining cost once the sweeps were stepped:
   870k px of blur redrawn 165 times a second. Their drift is eased rather
   than linear, so stepping does flatten it, but over a twelve second travel
   of a blob blurred at 20px there is nothing in that to see. */
.m1{animation-timing-function:steps(240)}
.m2{animation-timing-function:steps(340)}
.m3{animation-timing-function:steps(100)}

/* the clip already confines the tail; saying so lets the browser cull the
   layer area that falls outside it instead of rastering and discarding it */
.hero__tail{contain:paint;isolation:isolate}

/* ============================================================
   LITE
   Add ?lite to any url to strip every blur and backdrop pass on the site.
   It is the one experiment that settles where the cost is: if a browser is
   smooth with this on and heavy with it off, the cost is raster, and we
   know exactly what there is to trade. Nothing else about the page changes.
   ============================================================ */
/* not "remove the blur": a conic gradient with the blur taken off shows its
   own facets. Take away the layers that cost the most instead, and keep the
   soft radial masses that carry the colour. Same field, fewer surfaces. */
.lite .cur,.lite .fil,.lite .eddy{display:none!important}
.lite .grain{opacity:.34}
.lite .close__wash,.lite .calc__wash,.lite .orbit__glow{filter:none!important}
.lite .pill,.lite .hdr__sheet,.lite .slab__sheet,.lite .cell--dark,.lite .opt{
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}

/* ============================================================
   OFF-SCREEN SECTIONS
   Every blurred, blended layer on this page costs whether or not it is
   on screen. content-visibility lets the browser skip style, layout,
   paint and compositing for a section until it comes near the viewport,
   which is the only way to stop paying for all of them at once.

   The intrinsic size is each section's real height, so the scrollbar does
   not jump as they come in and out. Nothing here changes how anything
   looks; it only changes when the work happens.
   ============================================================ */
.art{content-visibility:auto;contain-intrinsic-size:auto 847px}
.pillars{content-visibility:auto;contain-intrinsic-size:auto 1095px}
.reel{content-visibility:auto;contain-intrinsic-size:auto 917px}
.process{content-visibility:auto;contain-intrinsic-size:auto 527px}
.faq{content-visibility:auto;contain-intrinsic-size:auto 630px}
.foot{content-visibility:auto;contain-intrinsic-size:auto 413px}

/* ============================================================
   PRIVACY CHOICE. Exists only once an analytics id is set in
   analytics.js. Solid, not glass: a backdrop blur fixed over the
   plasma would cost a frame budget this page does not have.
   ============================================================ */
.ck{
  position:fixed;right:var(--s4);bottom:var(--s4);z-index:900;
  width:min(380px,calc(100vw - 48px));padding:var(--s4);border-radius:var(--r-l);
  background:rgba(245,245,242,.97);color:var(--tx);border:1px solid rgba(7,7,7,.08);
  box-shadow:0 var(--s4) var(--s7) -24px rgba(7,7,7,.45);
  opacity:0;transform:translateY(12px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.ck.is-in{opacity:1;transform:none}
.ck p{font-size:14px;line-height:1.6;color:var(--tx-2);margin:0 0 var(--s3)}
.ck__row{display:flex;gap:var(--s2)}
.ck__row button{
  flex:1;min-height:44px;padding:0 var(--s3);border-radius:999px;font:inherit;font-size:14px;cursor:pointer;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.ck__no{background:transparent;border:1px solid rgba(7,7,7,.18);color:var(--tx)}
.ck__no:hover{border-color:var(--tx)}
.ck__yes{background:var(--ink);border:1px solid var(--ink);color:var(--cream)}
.ck__yes:hover{background:var(--blue);border-color:var(--blue)}
body.is-locked .ck{display:none}
.foot__link[hidden]{display:none}
@media (max-width:560px){.ck{left:var(--s3);right:var(--s3);bottom:var(--s3);width:auto}}

/* ============================================================
   ARRIVING ON A PAGE
   Two layers. Where the browser supports it, going from one page to the
   next is a view transition: the old page lifts away and the new one
   settles in, instead of the window cutting over. Then
   the top of the new page arrives. Those are keyframe animations rather than
   transitions, so they run from the very first frame the page paints and
   need no script, no observer and no timing to go right.
   ============================================================ */
@view-transition{navigation:auto}
/* The header used to carry its own transition name so it stayed put during a page change. That was removed as the likeliest cause of scroll lag returning in Chrome on every page: it kept the fixed glass header isolated for the whole visit, not only during the change. */
::view-transition-old(root){animation:vtOut .26s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vtIn .6s var(--ease) both}
@keyframes vtOut{to{opacity:0;transform:translateY(-12px)}}
@keyframes vtIn{from{opacity:0;transform:translateY(18px)}}

@keyframes enterUp{from{opacity:0;transform:translateY(24px) scale(.985)}to{opacity:1;transform:none}}
.svc__top h1,.svc__lede,.calc__top>*,.note .eyebrow{animation:enterUp .95s var(--ease) backwards}
.svc__top h1{animation-delay:.08s}
.svc__lede{animation-delay:.24s}
.calc__top>:nth-child(1){animation-delay:.06s}
.calc__top>:nth-child(2){animation-delay:.16s}
.calc__top>:nth-child(3){animation-delay:.3s}
.note .eyebrow{animation-delay:.1s}

/* the About note writes itself: see typeNote() */
.wd{display:inline-block;opacity:0;transform:translateY(.4em)}
.wd.on{opacity:1;transform:none;transition:opacity .55s var(--ease),transform .55s var(--ease)}
.sign--wait img{clip-path:inset(0 100% 0 0)}
.sign--wait figcaption{opacity:0;transform:translateY(10px)}
.sign--wait.sign--in img{clip-path:inset(0 0 0 0);transition:clip-path 1.5s cubic-bezier(.65,0,.35,1)}
.sign--wait.sign--in figcaption{opacity:1;transform:none;transition:opacity .8s var(--ease) .7s,transform .8s var(--ease) .7s}

@media(prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* ============================================================
   CLOSING ROW AND CONTACT FORM
   ============================================================ */
.close__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3)}
.btn--ghost{background:transparent;color:var(--tx-i);box-shadow:inset 0 0 0 1px rgba(245,245,242,.32)}
.btn--ghost::after{display:none}
.btn--ghost:hover{box-shadow:inset 0 0 0 1px rgba(245,245,242,.85),0 var(--s3) var(--s5) -16px rgba(0,0,0,.6)}

/* a field no person sees; only a bot fills it in */
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden;opacity:0}

.dxm--ct .dxm__panel{width:min(700px,100%)}
.ct__how{margin-top:var(--s5)}
.ct__lg{font-size:13px;color:var(--tx-i2);margin-bottom:var(--s2)}
.opts--3{grid-template-columns:repeat(3,1fr)}
@media(max-width:620px){.opts--3{grid-template-columns:1fr}}
.ct__msg{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s5)}
.ct__msg>span{font-size:13px;color:var(--tx-i2)}
.ct__msg small{display:block;font-size:11px;color:var(--tx-i3);margin-top:2px}
.ct__msg textarea{
  resize:vertical;min-height:110px;padding:13px var(--s3);border-radius:var(--r-s);
  font:inherit;font-size:15px;line-height:1.5;color:#fff;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  transition:border-color .25s,background .25s;
}
.ct__msg textarea::placeholder{color:rgba(245,245,242,.28)}
.ct__msg textarea:focus{outline:none;border-color:rgba(143,168,255,.8);background:rgba(255,255,255,.08)}
.dxm--ct .dx__nav{margin-top:var(--s5)}
.dxm--ct .dx__note{margin:0}
.ct__done{animation:stepIn .45s var(--ease)}
.ct__done .dxm__head{margin-bottom:0}
.ct__done a,.dx__hint a{color:#8fa8ff;text-decoration:underline;text-underline-offset:3px}

/* ============================================================
   EVERY SCREEN SIZE
   The hero tail's width now comes from heroTail(), which sizes it from the
   hero's height so the drawing keeps its proportion. What stays here is only
   the cap that keeps it clear of the text at each width.
   ============================================================ */
.hero__tail{max-width:min(18vw,330px)}
@media(max-width:1040px){.hero__tail{max-width:24vw}}
@media(max-width:880px){.hero__tail{max-width:44vw}}

/* The glass sheet overhangs the slab by a fixed 24px, but on a phone the gutter
   is only 16 to 20px, so it ran off the edge of the screen. It now overhangs
   by part of the gutter instead. The dark gap under the slab was sized for a
   desktop glow and shrinks with it. */
@media(max-width:900px){.slab__sheet{right:calc(var(--gut) * -.4)}}
@media(max-width:760px){
  .art{padding-bottom:calc(var(--s9) + var(--s3))}
  .slab::after{bottom:calc(var(--s6) * -1)}
}
/* below 880px the quote runs the full width and the tail sits behind it, so
   it stays narrow enough to keep its bend clear of the button */
@media(max-width:880px){.hero__tail{max-width:36vw;right:-8vw}}
@media(max-width:600px){.hero__tail{max-width:34vw;right:-10vw}}