/* ============================================================
   MIDNIGHT — COMPOSITION SYSTEM

   The previous inner-page template was one shape repeated: a
   masthead, then a stack of left-aligned blocks. That is what
   made the pages read as a theme. This file replaces it with a
   set of named section archetypes that deliberately differ from
   one another — full-bleed, centred, asymmetric, sticky-split,
   overlapping, pinned — so a page changes composition as you
   descend rather than scrolling the same rectangle twice.

   Every archetype has a finished resting state. Remove the
   JavaScript and the page is still complete; remove motion
   preference and every transition stops.
   ============================================================ */

:root{
  --gut: clamp(20px, 5vw, 84px);
  --maxw: 1320px;
  --rail: clamp(16px, 2vw, 28px);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
}

/* ---------- 1. the section frame ---------------------------- */
.sx{
  position:relative;
  padding-block:clamp(72px, 13vh, 168px);
  padding-inline:var(--gut);
}
.sx__in{max-width:var(--maxw);margin-inline:auto;position:relative;}

/* full-bleed variants break the gutter deliberately */
.sx--bleed{padding-inline:0;}
.sx--bleed > .sx__in{max-width:none;}

/* a band is a field of colour, edge to edge, with its own ground */
.sx--band{
  padding-block:clamp(84px, 15vh, 180px);
  background:
    radial-gradient(120% 100% at 50% 0%,
      color-mix(in srgb, var(--accent) 13%, transparent), transparent 62%),
    linear-gradient(180deg, #070A11, #04060B 70%);
  border-block:1px solid rgba(168,210,236,.12);
}
.sx--band > .sx__in{max-width:1080px;}

/* ---------- 2. the grid ------------------------------------- */
.gx{
  display:grid;
  grid-template-columns:repeat(12, minmax(0, 1fr));
  gap:clamp(18px, 2.4vw, 40px);
  align-items:start;
}
.gx > *{grid-column:span 12;}
/* Column placement is read straight off the attributes. An earlier
   version used custom properties that nothing ever set, which silently
   collapsed every placed element into a single 1/12 track. */
@media (min-width:900px){
  .gx > [data-c="1"]{grid-column-start:1;} .gx > [data-c="2"]{grid-column-start:2;}
  .gx > [data-c="3"]{grid-column-start:3;} .gx > [data-c="4"]{grid-column-start:4;}
  .gx > [data-c="5"]{grid-column-start:5;} .gx > [data-c="6"]{grid-column-start:6;}
  .gx > [data-c="7"]{grid-column-start:7;} .gx > [data-c="8"]{grid-column-start:8;}
  .gx > [data-c="9"]{grid-column-start:9;} .gx > [data-c="10"]{grid-column-start:10;}
  .gx > [data-s="2"]{grid-column-end:span 2;} .gx > [data-s="3"]{grid-column-end:span 3;}
  .gx > [data-s="4"]{grid-column-end:span 4;} .gx > [data-s="5"]{grid-column-end:span 5;}
  .gx > [data-s="6"]{grid-column-end:span 6;} .gx > [data-s="7"]{grid-column-end:span 7;}
  .gx > [data-s="8"]{grid-column-end:span 8;} .gx > [data-s="9"]{grid-column-end:span 9;}
  .gx > [data-s="10"]{grid-column-end:span 10;} .gx > [data-s="11"]{grid-column-end:span 11;}
}

/* ---------- 3. typography ----------------------------------- */
.tt{
  font-family:var(--font-display);font-weight:800;
  line-height:.98;letter-spacing:-.05em;color:#F4F8FF;
  margin:0;text-wrap:balance;
}
/* Editorial scale. Size is not the same thing as hierarchy: only the
   page opening earns display size, and even that is well under the
   7.2rem this used to run to. Everything below it steps down in small,
   deliberate intervals so rhythm — not scale — does the work. */
.tt--xl{font-size:clamp(2.45rem, 5.6vw, 4.6rem);line-height:1.0;letter-spacing:-.045em;}
.tt--lg{font-size:clamp(1.82rem, 3.4vw, 2.75rem);letter-spacing:-.038em;line-height:1.04;}
.tt--md{font-size:clamp(1.3rem, 2.05vw, 1.78rem);letter-spacing:-.028em;line-height:1.12;}
.tt--sm{font-size:clamp(1.04rem, 1.35vw, 1.2rem);letter-spacing:-.015em;
  line-height:1.3;font-weight:700;}
.tt em{
  font-style:normal;color:transparent;
  -webkit-text-stroke:1.3px color-mix(in srgb, var(--accent) 72%, transparent);
}
.tt .hl{font-style:normal;color:var(--accent);}

.ey{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-display);font-size:.72rem;font-weight:800;
  letter-spacing:.3em;text-transform:uppercase;
  color:color-mix(in srgb, var(--accent) 85%, #fff);margin:0 0 20px;
}
.ey::before{
  content:"";width:26px;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .9s var(--ease-out) .1s;
}
.is-in .ey::before,.ey.is-in::before{transform:scaleX(1);}

.lede{
  font-size:clamp(1.06rem, 1.5vw, 1.34rem);line-height:1.58;
  color:rgba(186,198,218,.95);margin:24px 0 0;max-width:56ch;
}
.lede strong{color:#EDF3FF;font-weight:600;}
.bdy{font-size:1.02rem;line-height:1.75;color:rgba(172,185,207,.94);margin:18px 0 0;max-width:64ch;}
.bdy strong{color:#E9F1FF;font-weight:600;}
.bdy a,.lede a{color:var(--accent);border-bottom:1px solid color-mix(in srgb,var(--accent) 36%,transparent);}
.bdy a:hover,.lede a:hover{color:#fff;border-color:var(--accent);}
.mid{text-align:center;margin-inline:auto;}
.mid .lede,.mid .bdy{margin-inline:auto;}
.mid .ey{justify-content:center;}

/* ---------- 3b. editorial furniture -------------------------
   The pieces that let a page build hierarchy without reaching for
   another size increase: a section numeral, a metadata rule, a
   standfirst, a small supporting head. Borrowed from print, where
   one page has to hold five levels without shouting. */
.idx{
  display:block;font-family:var(--font-display);font-weight:800;
  font-size:.72rem;letter-spacing:.24em;color:rgba(126,141,166,.9);
  font-variant-numeric:tabular-nums;
}
.idx b{
  font-weight:800;color:var(--accent);
  /* the numeral is set in the accent, the total stays quiet */
}
.meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:0 18px;
  margin:22px 0 0;padding-top:14px;
  border-top:1px solid rgba(168,210,236,.14);
  font-family:var(--font-display);font-size:.72rem;font-weight:700;
  letter-spacing:.19em;text-transform:uppercase;
  color:rgba(126,141,166,.92);font-variant-numeric:tabular-nums;
}
.meta > span{display:inline-flex;align-items:center;gap:8px;}
.meta > span::before{
  content:"";width:4px;height:4px;border-radius:50%;
  background:var(--accent);opacity:.75;flex:none;
}
.dek{
  font-family:var(--font-body);font-size:.98rem;line-height:1.62;
  color:rgba(160,174,198,.95);margin:14px 0 0;max-width:46ch;
}
.sub{
  font-family:var(--font-display);font-weight:700;
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(186,200,222,.92);margin:0 0 10px;
}

/* ---------- 4. the stage (page opening) --------------------- */
.stage{
  position:relative;min-height:min(82svh, 820px);
  display:grid;align-content:center;
  padding-block:clamp(120px, 18vh, 200px) clamp(48px, 8vh, 96px);
  padding-inline:var(--gut);
  overflow:clip;
}
.stage__in{max-width:var(--maxw);margin-inline:auto;width:100%;position:relative;z-index:2;}
.stage--mid .stage__in{text-align:center;}
.stage--mid .lede{margin-inline:auto;}
.stage__fx{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:0;animation:fx-rise 2.6s var(--ease-out) .3s forwards;
}
@keyframes fx-rise{to{opacity:1;}}
/* a second, slower layer gives the opening real depth */
.stage__glow{
  position:absolute;z-index:0;pointer-events:none;
  left:50%;top:44%;width:min(1100px, 120%);aspect-ratio:1.6;
  translate:-50% -50%;
  background:radial-gradient(closest-side,
    color-mix(in srgb, var(--accent) 17%, transparent), transparent 72%);
  filter:blur(14px);
  will-change:transform;
}
.stage__cue{
  position:absolute;left:50%;bottom:clamp(18px,4vh,40px);translate:-50% 0;
  z-index:3;display:grid;justify-items:center;gap:9px;
  font-family:var(--font-display);font-size:.72rem;font-weight:800;
  letter-spacing:.26em;text-transform:uppercase;color:rgba(130,145,170,.9);
}
.stage__cue i{
  display:block;width:1px;height:38px;
  background:linear-gradient(180deg, var(--accent), transparent);
  animation:cue 2.6s var(--ease-io) infinite;
}
@keyframes cue{0%{transform:scaleY(0);transform-origin:50% 0;}
  45%{transform:scaleY(1);transform-origin:50% 0;}
  55%{transform:scaleY(1);transform-origin:50% 100%;}
  100%{transform:scaleY(0);transform-origin:50% 100%;}}

/* ---------- 5. actions -------------------------------------- */
.acts{display:flex;flex-wrap:wrap;gap:13px;margin-top:36px;}
.mid .acts,.stage--mid .acts{justify-content:center;}
.btn{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;gap:11px;
  padding:16px 30px;border-radius:2px;
  background:linear-gradient(120deg, color-mix(in srgb,var(--accent) 74%,#0381FB), var(--accent));
  color:#03060E;font-family:var(--font-display);font-weight:800;
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  box-shadow:0 24px 60px -28px color-mix(in srgb,var(--accent) 95%,transparent);
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(120deg,#fff, color-mix(in srgb,var(--accent) 60%,#fff));
  transform:translateY(101%);transition:transform .55s var(--ease-out);
}
.btn:hover{transform:translateY(-3px);box-shadow:0 34px 72px -28px var(--accent);}
.btn:hover::before{transform:translateY(0);}
.btn svg{width:16px;height:16px;transition:transform .5s var(--ease-out);}
.btn:hover svg{transform:translateX(5px);}

.gst{
  position:relative;display:inline-flex;align-items:center;gap:9px;
  padding:16px 26px;border-radius:2px;
  border:1px solid rgba(168,210,236,.26);color:rgba(206,218,236,.96);
  font-family:var(--font-display);font-weight:700;font-size:.74rem;
  letter-spacing:.16em;text-transform:uppercase;overflow:hidden;isolation:isolate;
  transition:color .45s var(--ease-out), border-color .45s var(--ease-out);
}
.gst::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:color-mix(in srgb, var(--accent) 16%, transparent);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .55s var(--ease-out);
}
.gst:hover{color:#fff;border-color:color-mix(in srgb,var(--accent) 70%,transparent);}
.gst:hover::before{transform:scaleX(1);}

/* ---------- 6. sticky split --------------------------------- */
.spl{display:grid;gap:clamp(26px,4vw,64px);grid-template-columns:1fr;}
@media (min-width:960px){
  .spl{grid-template-columns:minmax(280px, .82fr) minmax(0, 1.18fr);}
  .spl__pin{position:sticky;top:clamp(96px, 16vh, 170px);align-self:start;}
}

/* ---------- 7. overlapping / layered cards ------------------ */
.lay{display:grid;gap:clamp(16px,2vw,28px);grid-template-columns:1fr;margin-top:clamp(34px,6vh,64px);}
@media (min-width:880px){
  .lay{grid-template-columns:repeat(2, 1fr);}
  .lay > :nth-child(even){transform:translateY(clamp(22px, 4vw, 58px));}
}
.card{
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(26px,3vw,40px);
  border:1px solid rgba(168,210,236,.14);
  background:linear-gradient(155deg, rgba(13,18,29,.92), rgba(5,7,12,.96));
  transition:border-color .55s var(--ease-out), transform .6s var(--ease-out);
  will-change:transform;
}
.card::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:radial-gradient(420px 320px at var(--mx,50%) var(--my,50%),
    color-mix(in srgb, var(--accent) 17%, transparent), transparent 66%);
  transition:opacity .55s var(--ease-out);
}
.card:hover{border-color:color-mix(in srgb, var(--accent) 46%, transparent);}
.card:hover::before{opacity:1;}
.card__n{
  display:block;font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.7rem,2.9vw,2.3rem);line-height:.9;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:1px rgba(168,210,236,.28);
  transition:-webkit-text-stroke-color .5s var(--ease-out), color .5s var(--ease-out);
}
.card:hover .card__n{-webkit-text-stroke-color:transparent;color:color-mix(in srgb,var(--accent) 34%,transparent);}
.card__h{
  font-family:var(--font-display);font-weight:700;font-size:clamp(1.06rem,1.7vw,1.28rem);
  letter-spacing:-.02em;color:#EEF4FF;margin:18px 0 0;
}
.card__p{margin:12px 0 0;font-size:.95rem;line-height:1.66;color:rgba(163,177,200,.95);}

/* 3D tilt, applied by JS; the transform var keeps hover lift composable */
[data-tilt]{transform:perspective(1100px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));}

/* ---------- 8. the kinetic rail ----------------------------- */
.rail{
  position:relative;overflow:hidden;
  padding-block:clamp(26px,4vh,44px);
  border-block:1px solid rgba(168,210,236,.12);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.rail__t{display:flex;width:max-content;will-change:transform;}
.rail__g{display:flex;align-items:center;gap:clamp(28px,4vw,64px);padding-inline:clamp(14px,2vw,32px);}
.rail__w{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.35rem,2.9vw,2.15rem);letter-spacing:-.035em;
  color:transparent;-webkit-text-stroke:1px rgba(168,210,236,.34);
  white-space:nowrap;transition:color .5s var(--ease-out), -webkit-text-stroke-color .5s var(--ease-out);
}
.rail__w:nth-child(odd){color:rgba(233,241,255,.9);-webkit-text-stroke-color:transparent;}
.rail:hover .rail__w{color:var(--accent);-webkit-text-stroke-color:transparent;}
.rail__d{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none;opacity:.7;}

/* ---------- 9. pinned step sequence ------------------------- */
.seq{position:relative;}
.seq__track{
  display:grid;gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  background:rgba(168,210,236,.12);
  border:1px solid rgba(168,210,236,.12);
  margin-top:clamp(32px,5vh,56px);
}
.seq__s{
  position:relative;background:#05070C;padding:30px 26px 34px;
  transition:background .55s var(--ease-out);
}
.seq__s:hover,.seq__s.is-live{background:#080D17;}
.seq__t{
  font-family:var(--font-display);font-size:.72rem;font-weight:800;
  letter-spacing:.22em;text-transform:uppercase;margin:0;
  color:rgba(120,133,157,.95);font-variant-numeric:tabular-nums;
  transition:color .5s var(--ease-out);
}
.seq__s.is-live .seq__t{color:var(--accent);}
.seq__h{
  font-family:var(--font-display);font-weight:700;font-size:1.04rem;
  letter-spacing:-.018em;color:#EDF3FF;margin:14px 0 0;
}
.seq__p{margin:10px 0 0;font-size:.92rem;line-height:1.62;color:rgba(158,172,195,.95);}
.seq__s::after{
  content:"";position:absolute;left:0;right:0;top:-1px;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:0 50%;
  transition:transform 1s var(--ease-out);
  transition-delay:calc(var(--si,0) * 130ms);
}
.seq__track.is-in .seq__s::after{transform:scaleX(1);}

/* ---------- 10. figures with count-up ----------------------- */
.figs{
  display:grid;gap:1px;margin-top:clamp(32px,5vh,56px);
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  background:rgba(168,210,236,.12);border:1px solid rgba(168,210,236,.12);
}
.figs__c{background:#05070C;padding:30px 24px 32px;transition:background .5s var(--ease-out);}
.figs__c:hover{background:#080D17;}
.figs__n{
  display:block;font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.75rem,3vw,2.5rem);line-height:1;letter-spacing:-.045em;
  color:#F1F6FF;font-variant-numeric:tabular-nums;
  transition:color .5s var(--ease-out), text-shadow .6s var(--ease-out);
}
.figs__c:hover .figs__n{color:#fff;text-shadow:0 0 48px color-mix(in srgb,var(--accent) 78%,transparent);}
.figs__l{display:block;margin-top:13px;font-size:.86rem;line-height:1.52;color:rgba(150,164,188,.95);}

/* ---------- 11. the pull statement -------------------------- */
.pull{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.45rem,2.75vw,2.25rem);line-height:1.18;letter-spacing:-.032em;
  color:#F2F7FF;margin:0 auto;max-width:19ch;text-wrap:balance;
}
.pull u{
  text-decoration:none;color:var(--accent);
  background-image:linear-gradient(var(--accent),var(--accent));
  background-size:0% 2px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size 1.1s var(--ease-out) .5s;
}
.is-in .pull u{background-size:100% 2px;}
.pull__src{
  display:block;margin-top:22px;
  font-family:var(--font-display);font-size:.72rem;font-weight:800;
  letter-spacing:.26em;text-transform:uppercase;color:rgba(126,140,164,.95);
}

/* ---------- 12. definition strip ---------------------------- */
.strip{
  display:grid;gap:1px;margin-top:clamp(36px,6vh,64px);
  grid-template-columns:repeat(auto-fit,minmax(186px,1fr));
  background:rgba(168,210,236,.12);border:1px solid rgba(168,210,236,.12);
}
.strip > div{background:#05070C;padding:22px 22px 24px;transition:background .5s var(--ease-out);}
.strip > div:hover{background:#080D17;}
.strip dt{
  font-family:var(--font-display);font-size:.72rem;font-weight:800;
  letter-spacing:.26em;text-transform:uppercase;color:rgba(118,131,155,.95);margin:0;
}
.strip dd{margin:10px 0 0;font-size:.94rem;line-height:1.52;color:rgba(202,214,232,.96);}

/* ============================================================
   MOTION PRIMITIVES
   Each is opt-in per element so no two sections animate the
   same way. All are keyed off .is-in, added by the observer.
   ============================================================ */
html.js [data-anim]{will-change:transform,opacity,clip-path;}

/* rise — the quiet default */
html.js [data-anim="rise"]{opacity:0;transform:translate3d(0,26px,0);
  transition:opacity .8s var(--ease-out),transform 1s var(--ease-out);
  transition-delay:calc(var(--d,0) * 1ms + var(--si,0) * 70ms);}
html.js [data-anim="rise"].is-in{opacity:1;transform:none;}

/* wipe — a mask reveal, for statements and figures.
   This used clip-path on the element itself, which was a silent
   chicken-and-egg: Chromium factors the target's own clip into the
   IntersectionObserver rect, so a wipe element clipped to zero height
   never reported as intersecting, never received .is-in, and stayed
   invisible for the life of the page. A mask changes no geometry. */
html.js [data-anim="wipe"]{
  -webkit-mask-image:linear-gradient(#000,#000);mask-image:linear-gradient(#000,#000);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 0%;mask-size:100% 0%;
  opacity:.001;
  transition:-webkit-mask-size 1.15s var(--ease-out),mask-size 1.15s var(--ease-out),
             opacity .5s linear;
  transition-delay:calc(var(--d,0) * 1ms);}
html.js [data-anim="wipe"].is-in{-webkit-mask-size:100% 100%;mask-size:100% 100%;opacity:1;}
@supports not (mask-size: 100% 0%){
  html.js [data-anim="wipe"]{-webkit-mask-image:none;mask-image:none;}
}

/* scale — for cards and media */
html.js [data-anim="scale"]{opacity:0;transform:scale(.945) translate3d(0,18px,0);
  transition:opacity .8s var(--ease-out),transform 1.1s var(--ease-out);
  transition-delay:calc(var(--d,0) * 1ms + var(--si,0) * 95ms);}
html.js [data-anim="scale"].is-in{opacity:1;transform:none;}

/* slide — direction-aware, for split compositions */
html.js [data-anim="slide-l"]{opacity:0;transform:translate3d(-34px,0,0);
  transition:opacity .8s var(--ease-out),transform 1.1s var(--ease-out);
  transition-delay:calc(var(--d,0) * 1ms);}
html.js [data-anim="slide-r"]{opacity:0;transform:translate3d(34px,0,0);
  transition:opacity .8s var(--ease-out),transform 1.1s var(--ease-out);
  transition-delay:calc(var(--d,0) * 1ms);}
html.js [data-anim="slide-l"].is-in,html.js [data-anim="slide-r"].is-in{opacity:1;transform:none;}

/* blur — depth of field coming into focus */
html.js [data-anim="focus"]{opacity:0;filter:blur(12px);transform:scale(1.03);
  transition:opacity .9s var(--ease-out),filter 1.2s var(--ease-out),transform 1.2s var(--ease-out);
  transition-delay:calc(var(--d,0) * 1ms);}
html.js [data-anim="focus"].is-in{opacity:1;filter:none;transform:none;}

/* Word reveals, built by JS. Deliberately words and not characters:
   at display sizes a per-character inline-block loses kerning and can
   break mid-word on a resize, which is worse than the effect is good. */
.wd{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em;}
.wd > i{
  display:inline-block;font-style:inherit;
  transform:translateY(110%);transform-origin:0 100%;
  transition:transform 1.1s var(--ease-out);
  transition-delay:calc(var(--wi,0) * 55ms + var(--d,0) * 1ms);
}
.is-in .wd > i{transform:none;}
/* the mask must stop clipping once the glow lands */
.is-in .wd{overflow:visible;transition:overflow 0s linear .95s;}

/* section-entry hairline, drawn left to right */
.sx::before{
  content:"";position:absolute;left:var(--gut);right:var(--gut);top:0;height:1px;
  background:linear-gradient(90deg,var(--accent),transparent 58%);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform 1.5s var(--ease-out) .05s;
}
.sx.is-in::before{transform:scaleX(1);}
.sx--band::before,.sx--nohair::before{display:none;}

/* parallax targets are moved by JS through one custom property */
[data-par]{transform:translate3d(0,var(--py,0px),0);will-change:transform;}

/* ---------- page transition curtain -------------------------- */
.curtain{
  position:fixed;inset:0;z-index:200;pointer-events:none;
  background:linear-gradient(180deg,#04060B,#080D18);
  transform:scaleY(0);transform-origin:50% 100%;
}
.curtain.is-out{
  transform:scaleY(1);transform-origin:50% 100%;
  transition:transform .52s var(--ease-io);
}
.curtain.is-in-anim{
  transform:scaleY(1);transform-origin:50% 0;
  animation:curtain-lift .62s var(--ease-io) forwards;
}
@keyframes curtain-lift{to{transform:scaleY(0);}}

@media (prefers-reduced-motion:reduce){
  html.js [data-anim]{opacity:1 !important;transform:none !important;
    filter:none !important;clip-path:none !important;transition:none !important;}
  .wd > i{transform:none;transition:none;}
  .sx::before{transform:scaleX(1);transition:none;}
  .stage__cue i,.stage__fx{animation:none;}
  .rail__t{animation:none;}
  .curtain{display:none;}
  .pull u{background-size:100% 2px;transition:none;}
  .lay > :nth-child(even){transform:none;}
  [data-par]{transform:none;}
}

/* ---------- bridging the composed pages to the theme -------- */
/* the seam panels keep their styling but lose the grid wrapper they
   were built inside; on a composed page they stack in the flow */
.spl__flow{display:grid;gap:clamp(16px,2vw,26px);}
.spl__flow .seam__p{
  border:1px solid rgba(168,210,236,.14);
  background:linear-gradient(155deg,rgba(11,15,24,.9),rgba(5,7,12,.96));
  padding:clamp(24px,2.6vw,34px);
}
.spl__flow .seam__p--good{
  border-color:color-mix(in srgb,var(--accent) 32%,transparent);
  background:linear-gradient(155deg,rgba(8,14,24,.95),rgba(4,7,13,.97));
}
.spl__flow .seam__stage{height:230px;}

/* the composed pages own their own rhythm — kill the old template's */
.pg-main:has(.sx) .pg-top,.pg-main:has(.stage) .pg-top{display:none;}
body.pg:has(.stage) .mn__gl{opacity:.3;}

/* the FAQ block, restyled for a centred column */
.sx .qs{margin-top:clamp(30px,5vh,50px);max-width:none;}
.sx .q{border-bottom:1px solid rgba(168,210,236,.12);}
.sx .q__b{font-size:clamp(.98rem,1.4vw,1.1rem);}

/* cross-links inside a composed section */
.sx .pg-xr{margin-top:0;}

/* crumbs on a centred stage */
.stage .pg-crumb{margin-bottom:26px;}

/* ---------- alternating capability bands -------------------- */
@media (min-width:1000px){
  .cband--flip .cband__in{grid-template-columns:minmax(320px,1fr) minmax(0,1.02fr);}
  .cband--flip .cband__fx{grid-column:1;order:1;}
  .cband--flip > .cband__in > div{grid-column:2;order:2;}
}
.cband__fx{height:clamp(280px,42vh,460px);}
.cband{padding-block:clamp(66px,11vh,132px);}
.cband__in{max-width:var(--maxw);margin-inline:auto;align-items:center;}

/* A third composition, so the five bands are not one shape mirrored:
   the middle band runs its instrument as a full-width strip, ruled off,
   with the copy set beneath it in two columns. The first version gave
   the canvas 560px of height for a figure that only used the middle of
   it, which read as a container with something dropped in — the strip
   proportion and the rule are what make it a composition. */
@media (min-width:1000px){
  .cband--wide .cband__in{grid-template-columns:minmax(0,1fr);}
  .cband--wide{padding-block:clamp(34px,5vh,64px) clamp(66px,11vh,128px);}
  .cband--wide .cband__fx{
    grid-column:1 / -1;order:0;
    height:clamp(300px,38vh,420px);
    border-bottom:1px solid rgba(168,210,236,.16);
    margin-bottom:clamp(26px,4vh,44px);
  }
  .cband--wide > .cband__in > div{
    order:2;grid-column:1;
    display:grid;align-items:start;
    grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    column-gap:clamp(26px,4vw,72px);row-gap:0;
  }
  .cband--wide .cband__h{grid-column:1;grid-row:1;}
  .cband--wide .cband__lead{grid-column:1;grid-row:2;max-width:52ch;}
  .cband--wide .cband__l{grid-column:2;grid-row:1;margin-top:10px;}
  .cband--wide .cband__break{grid-column:2;grid-row:2;margin-top:26px;}
}

/* ---------- engagement cards -------------------------------- */
.eng{
  display:grid;gap:clamp(16px,2vw,24px);margin-top:clamp(34px,6vh,60px);
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
@media (min-width:1040px){
  .eng > :nth-child(2){transform:translateY(clamp(18px,3vw,44px));}
}
.eng .card{display:flex;flex-direction:column;}
.eng .card__k{
  font-family:var(--font-display);font-size:.72rem;font-weight:800;
  letter-spacing:.24em;text-transform:uppercase;color:var(--oc,var(--accent));margin:0;
}
.eng .card__go{
  margin-top:auto;padding-top:24px;display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-display);font-size:.72rem;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--oc,var(--accent));
}
.eng .card__go svg{width:14px;height:14px;transition:transform .5s var(--ease-out);}
.eng .card:hover .card__go svg{transform:translateX(5px);}
.eng .card__m{
  margin:20px 0 0;padding-top:16px;border-top:1px solid rgba(168,210,236,.13);
  font-size:.84rem;line-height:1.55;color:rgba(136,150,173,.95);
}
.eng .card::before{background:radial-gradient(380px 300px at var(--mx,50%) var(--my,50%),
  color-mix(in srgb,var(--oc,var(--accent)) 18%,transparent),transparent 68%);}
.eng .card:hover{border-color:color-mix(in srgb,var(--oc,var(--accent)) 50%,transparent);}

/* The diagram chips are positioned by percentage and translated by half
   their own width, so a long label at 78% can reach past the panel edge
   on a narrow screen. Clip the stage and shrink the labels rather than
   let the document scroll sideways. */
.seam__stage{overflow:clip;}
@media (max-width:560px){
  .seam__stage{height:200px;}
  .chip{font-size:.72rem;padding:5px 8px;letter-spacing:.05em;}
  .stage__glow{width:min(700px,150%);}
}

/* chapters.js paints a full-viewport colour wash that drifts and scales
   past the viewport edge — on a composed page the bands already carry the
   accent, so the wash is redundant and only costs a sideways scrollbar. */
.pg-main:has(.sx) ~ .wash,
body:has(.stage) .wash{display:none;}
/* clip, not hidden: clip does not create a scroll container, so the
   sticky split column keeps working */
html{overflow-x:clip;}

/* ---------- line-grouped headings ---------------------------- */
.ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em;}
.ln .wd{overflow:visible;padding-bottom:0;margin-bottom:0;}
.ln .wd > i{
  transform:translateY(112%);
  transition:transform 1.15s var(--ease-out);
  transition-delay:calc(var(--li,0) * 130ms + var(--d,0) * 1ms);
}
.is-in .ln .wd > i{transform:none;}
.is-in .ln{overflow:visible;transition:overflow 0s linear 1.2s;}


/* ---------- the sell statement ------------------------------
   This was a 19ch column centred inside a 1080px band, which left
   very wide dead margins either side and broke the sentence over
   five short lines. Set left, at a measure that lands it in two,
   with the routes-in note beside it on a rule. */
.sv-sell{padding-block:clamp(66px,11vh,128px);}
.sv-sell__in{
  max-width:1180px;margin-inline:auto;
  display:grid;gap:clamp(34px,5vh,68px);
}
/* The head is now one editorial block rather than a two-column split,
   because the composition below it is what carries the width. */
.sv-sell__hd{display:grid;gap:clamp(16px,2.2vh,22px);}
@media (min-width:960px){
  .sv-sell__hd{
    grid-template-columns:minmax(0,1.35fr) minmax(280px,.8fr);
    align-items:end;column-gap:clamp(28px,4vw,72px);
  }
  .sv-sell__hd .ey{grid-column:1;}
  .sv-sell__hd .sv-sell__q{grid-column:1;}
  .sv-sell__hd .sv-sell__note{grid-column:2;grid-row:1 / span 2;align-self:end;}
}
.sv-sell__q{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.38rem,2.35vw,1.95rem);
  line-height:1.2;letter-spacing:-.03em;color:#F2F7FF;
  margin:0;max-width:52ch;text-wrap:pretty;
}
.sv-sell__q u{
  text-decoration:none;color:var(--accent);
  background-image:linear-gradient(var(--accent),var(--accent));
  background-size:0% 2px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size 1.1s var(--ease-out) .45s;
}
.is-in .sv-sell__q u{background-size:100% 2px;}
.sv-sell__note{
  margin:0;font-size:.97rem;line-height:1.72;color:rgba(172,185,207,.95);
  padding-top:18px;border-top:1px solid rgba(168,210,236,.2);
}

/* ---------- engagement cards: a refined blue interaction ------ */
.eng .card{
  transition:transform .6s var(--ease-out), border-color .6s var(--ease-out),
             box-shadow .6s var(--ease-out), background .6s var(--ease-out);
}
.eng .card::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:linear-gradient(150deg,
    color-mix(in srgb,var(--oc,#6FB8FF) 16%,transparent),
    transparent 54%, color-mix(in srgb,#041F8F 40%,transparent));
  transition:opacity .6s var(--ease-out);
}
.eng .card:hover{
  transform:translateY(-6px);
  border-color:color-mix(in srgb,var(--oc,#6FB8FF) 62%,transparent);
  box-shadow:0 30px 70px -40px color-mix(in srgb,var(--oc,#6FB8FF) 85%,transparent),
             inset 0 1px 0 color-mix(in srgb,var(--oc,#6FB8FF) 34%,transparent);
}
.eng .card:hover::after{opacity:1;}

/* the capability chips answer in blue too */
.cband__l li{transition:color .45s var(--ease-out),border-color .45s var(--ease-out),
  background .45s var(--ease-out),transform .45s var(--ease-out);}
.cband__l li:hover{
  color:#F2F8FF;
  border-color:color-mix(in srgb,var(--cb,#6FB8FF) 70%,transparent);
  background:color-mix(in srgb,var(--cb,#6FB8FF) 13%,transparent);
  transform:translateY(-3px);
}


/* ============================================================
   THE SYSTEM FIGURE — five in, one system, three out

   The proposition of this whole page is that the capabilities are
   joined. A headline claiming that, over a paragraph repeating it, was
   the one section on the page that argued instead of showing. This
   draws it: five sources on the left, the joins across the middle, and
   the three things you can actually buy on the right.

   Rules it holds to:
     · the wires are geometry, not decoration — each one starts at a
       capability's own row and ends at the core, so the picture stays
       true when the type reflows;
     · it degrades to a stack under 900px rather than shrinking a
       diagram until it cannot be read;
     · nothing in it is a card with a border and a shadow, because the
       page already has two of those sections.
   ============================================================ */
.sysf{
  display:grid;gap:clamp(22px,3vh,30px);
  align-items:center;
}
@media (min-width:900px){
  .sysf{
    grid-template-columns:minmax(0,.92fr) clamp(96px,11vw,170px) minmax(0,1.08fr);
    gap:0;
  }
}

/* ---- the five sources ---- */
.sysf__caps{list-style:none;margin:0;padding:0;display:grid;gap:2px;}
.sysf__caps li{
  position:relative;padding:clamp(11px,1.5vh,15px) 0 clamp(11px,1.5vh,15px) 20px;
  border-bottom:1px solid rgba(168,210,236,.09);
  transition:padding-left .5s var(--ease-out);
}
.sysf__caps li:last-child{border-bottom:0;}
/* the node each wire leaves from */
.sysf__caps li::before{
  content:"";position:absolute;left:0;top:50%;translate:0 -50%;
  width:7px;height:7px;border-radius:50%;
  background:var(--nc,#6FB8FF);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--nc,#6FB8FF) 16%,transparent),
             0 0 16px color-mix(in srgb,var(--nc,#6FB8FF) 60%,transparent);
  transition:box-shadow .5s var(--ease-out);
}
.sysf__caps li:hover::before{
  box-shadow:0 0 0 5px color-mix(in srgb,var(--nc,#6FB8FF) 22%,transparent),
             0 0 24px color-mix(in srgb,var(--nc,#6FB8FF) 85%,transparent);
}
.sysf__caps li:hover{padding-left:26px;}
.sysf__caps b{
  display:block;font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.02rem,1.5vw,1.22rem);letter-spacing:-.02em;
  color:#EFF5FF;
}
.sysf__caps span{
  display:block;margin-top:3px;font-size:.84rem;line-height:1.5;
  color:rgba(168,182,205,.92);
}

/* ---- the joins ---- */
.sysf__join{display:none;}
@media (min-width:900px){
  .sysf__join{display:block;align-self:stretch;position:relative;min-height:340px;}
}
.sysf__wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
/* the point the five arrive at. Without it the curves stop in mid-air
   and the picture reads as five lines rather than as a convergence. */
.sysf__join::after{
  content:"";position:absolute;right:-5px;top:50%;translate:0 -50%;
  width:10px;height:10px;border-radius:50%;
  background:#CFE4FF;
  box-shadow:0 0 0 4px rgba(120,170,245,.16),
             0 0 22px rgba(150,196,255,.75),
             0 0 46px rgba(90,140,225,.35);
}
.sysf__w{
  stroke-dasharray:1 1;
  stroke-dashoffset:1;
  /* pathLength normalises every curve to 1 so one timing fits all five,
     however long each path actually is */
  pathLength:1;
  transition:stroke-dashoffset 1.25s var(--ease-out);
  transition-delay:calc(var(--wi) * 110ms + 240ms);
}
.is-in .sysf__w,[data-anim].is-in .sysf__w{stroke-dashoffset:0;}
@media (prefers-reduced-motion: reduce){
  .sysf__w{stroke-dashoffset:0;transition:none;}
}

/* ---- the core, and what leaves it ---- */
.sysf__core{position:relative;padding:clamp(22px,3vh,32px) 0 0 clamp(0px,2vw,30px);}
@media (min-width:900px){
  .sysf__core{padding-top:0;border-left:1px solid rgba(168,210,236,.14);
    padding-left:clamp(24px,3vw,44px);}
}
/* the dimensional wash behind the core — the same felt light the
   homepage mark sits in, at a fraction of its strength */
.sysf__halo{
  position:absolute;left:-14%;top:-18%;width:70%;aspect-ratio:1;
  pointer-events:none;z-index:-1;
  background:radial-gradient(ellipse 46% 46% at 50% 50%,
    rgba(168,210,255,.11) 0%, rgba(104,150,220,.05) 42%,
    rgba(60,96,168,.02) 64%, transparent 78%);
}
.sysf__coreK{
  margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--cx-lb,.68rem);font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(158,172,196,.96);
}
.sysf__coreT{
  margin:10px 0 0;font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.5rem,2.6vw,2.15rem);line-height:1.04;letter-spacing:-.04em;
  color:#F4F9FF;
}
.sysf__coreS{
  margin:10px 0 0;font-size:.92rem;line-height:1.62;
  color:rgba(176,189,211,.95);max-width:34ch;
}
.sysf__out{
  list-style:none;margin:clamp(20px,2.8vh,28px) 0 0;padding:0;
  display:grid;gap:1px;background:rgba(168,210,236,.12);
  border-block:1px solid rgba(168,210,236,.12);
}
.sysf__out a{
  display:block;padding:clamp(13px,1.8vh,17px) clamp(2px,1vw,14px);
  background:linear-gradient(168deg,rgba(12,18,34,.86),rgba(7,11,22,.86));
  transition:background .45s var(--ease-out), padding-left .45s var(--ease-out);
}
.sysf__out a:hover{
  background:linear-gradient(152deg,#FFFFFF,#F1F7FF 58%,#DEEAFA);
  padding-left:clamp(12px,1.6vw,22px);
}
.sysf__out b{
  display:block;font-family:var(--font-display);font-weight:800;
  font-size:.99rem;letter-spacing:-.01em;color:#EFF5FF;
  transition:color .45s var(--ease-out);
}
.sysf__out i{
  display:block;margin-top:3px;font-style:normal;font-size:.83rem;
  color:rgba(164,178,202,.94);transition:color .45s var(--ease-out);
}
.sysf__out a:hover b{color:#060B16;}
.sysf__out a:hover i{color:rgba(24,38,64,.86);}

/* ---- the four facts, now part of the system rather than a strip ---- */
.sysf__facts{
  margin:0;display:grid;gap:1px;
  background:rgba(168,210,236,.1);
  border-top:1px solid rgba(168,210,236,.12);
}
@media (min-width:720px){.sysf__facts{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:1040px){.sysf__facts{grid-template-columns:repeat(4,minmax(0,1fr));}}
.sysf__facts > div{
  padding:clamp(15px,2vh,20px) clamp(2px,1.2vw,18px);
  background:#04070E;
}
.sysf__facts dt{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--cx-lb,.68rem);font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(152,166,190,.96);
}
.sysf__facts dd{
  margin:8px 0 0;font-size:.9rem;line-height:1.55;color:rgba(186,199,220,.96);
}