/* ============================================================
   MIDNIGHT — INTERACTION LAYER

   Additive only. No layout, no content, no structure is changed
   by this file: it gives the existing composition its hover,
   press, focus, cursor, draw and depth behaviour.

   Rules it holds itself to:
     · every effect has a job — hierarchy, feedback, or continuity
     · no two sections use the same reveal
     · every state has a visible resting form
     · prefers-reduced-motion turns all of it off, and the page
       remains completely usable
   ============================================================ */

/* ============================================================
   1. THE CURSOR
   A ring that reports what is under it: wide over a link, filled
   over a card, labelled over a diagram. Pointer-fine only — a
   touch device never sees it and never pays for it.
   ============================================================ */
@media (hover:hover) and (pointer:fine){
  html.has-cursor,html.has-cursor *{cursor:none !important;}
  html.has-cursor a,html.has-cursor button,html.has-cursor input,
  html.has-cursor textarea,html.has-cursor label{cursor:none !important;}
}
.cur{
  position:fixed;left:0;top:0;z-index:300;pointer-events:none;
  width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;
  /* Pinned to the cursor ramp in style.css, NOT to --accent. A page
     accent can be violet or pale cyan; a cursor that inherited those
     would stop reading as one object crossing one site. --cur-tint is
     graded continuously from silver over the dark of the page to brand
     blue over a light card, and the ramp holds no warm stop. */
  border:1px solid color-mix(in srgb,var(--cur-tint) 78%,transparent);
  box-shadow:0 0 18px -8px color-mix(in srgb,var(--cur-tint) 50%,transparent);
  opacity:0;
  transition:width .38s var(--ease-out),height .38s var(--ease-out),
             margin .38s var(--ease-out),background .38s var(--ease-out),
             border-color .3s var(--ease-out),box-shadow .3s var(--ease-out),
             opacity .3s linear;
  will-change:transform;
}
.cur__dot{
  position:fixed;left:0;top:0;z-index:301;pointer-events:none;
  width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;
  background:var(--cur-tint);opacity:0;
  transition:opacity .3s linear,transform .25s var(--ease-out),background .3s var(--ease-out);
  will-change:transform;
}
html.has-cursor .cur,html.has-cursor .cur__dot{opacity:1;}
/* over something clickable the ring opens, picks up a gloss and the dot
   retreats — the same treatment the homepage uses, so the cursor does
   not change personality when a visitor follows a link */
.cur.is-link{
  width:52px;height:52px;margin:-26px 0 0 -26px;
  background:
    linear-gradient(138deg,
      color-mix(in srgb,var(--cur-white) 26%,transparent) 0%,
      color-mix(in srgb,var(--cur-tint) 16%,transparent) 34%,
      color-mix(in srgb,var(--cur-tint) 6%,transparent) 60%,
      color-mix(in srgb,var(--cur-tint) 13%,transparent) 86%,
      color-mix(in srgb,var(--cur-white) 5%,transparent) 100%);
  border-color:color-mix(in srgb,var(--cur-tint) 88%,var(--cur-white));
  box-shadow:
    0 0 22px -4px color-mix(in srgb,var(--cur-tint) 62%,transparent),
    inset 0 1px 0 color-mix(in srgb,var(--cur-white) 50%,transparent);
}
.cur.is-link ~ .cur__dot{transform:scale(0);}
/* over a card it fills and carries a word */
.cur.is-card{width:74px;height:74px;margin:-37px 0 0 -37px;
  background:color-mix(in srgb,var(--cur-tint) 90%,transparent);
  border-color:transparent;
  box-shadow:0 10px 30px -14px color-mix(in srgb,var(--cur-deep) 80%,transparent);}
.cur.is-card ~ .cur__dot{transform:scale(0);}
.cur__l{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--font-display);font-size:.52rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:#03060E;
  opacity:0;transition:opacity .3s var(--ease-out);
}
.cur.is-card .cur__l{opacity:1;}
/* over text it becomes a caret-thin bar */
.cur.is-text{width:2px;height:26px;margin:-13px 0 0 -1px;border-radius:1px;
  background:var(--cur-tint);border-color:transparent;box-shadow:none;}
.cur.is-down{width:20px;height:20px;margin:-10px 0 0 -10px;}

/* ============================================================
   2. PRESS, HOVER AND FOCUS ON CONTROLS
   ============================================================ */
.btn:active,.gst:active,.gate__go:active,.bar__cta:active{
  transform:translateY(1px) scale(.985);transition-duration:.08s;
}
.btn,.gst,.gate__go,.bar__cta{
  -webkit-tap-highlight-color:transparent;
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out),
             background .45s var(--ease-out),color .45s var(--ease-out),
             border-color .45s var(--ease-out);
}
/* a ring that is visible on both grounds, for keyboard users */
.btn:focus-visible,.gst:focus-visible,.gate__go:focus-visible,
.bar__cta:focus-visible,.q__b:focus-visible,a:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:2px;
}

/* inline links draw their own underline from the left */
.bdy a,.lede a,.seam__note a,.cband__lead a,.card__p a,.q__p a,.pg-p a{
  position:relative;border-bottom:0 !important;
  background-image:linear-gradient(var(--accent),var(--accent));
  background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .5s var(--ease-out),color .4s var(--ease-out);
  padding-bottom:2px;
}
.bdy a::after,.lede a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:color-mix(in srgb,var(--accent) 34%,transparent);
}
.bdy a:hover,.lede a:hover,.q__p a:hover,.pg-p a:hover{
  background-size:100% 1px;color:#fff;
}

/* ============================================================
   3. NAVIGATION
   ============================================================ */
.bar{
  transition:background .6s var(--ease-out),backdrop-filter .6s var(--ease-out),
             border-color .6s var(--ease-out),opacity .5s var(--ease-out),
             transform .5s var(--ease-out);
}
html.nav-lift .bar{
  background:rgba(4,6,11,.82);
  backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  border-bottom:1px solid rgba(168,210,236,.13);
}
.bar__nav a{position:relative;overflow:hidden;display:inline-block;}
.bar__nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--accent);
  transform:scaleX(0);transform-origin:100% 50%;
  transition:transform .5s var(--ease-out);
}
.bar__nav a:hover::after,.bar__nav a[aria-current]::after{
  transform:scaleX(1);transform-origin:0 50%;
}
.bar__logo img{transition:transform .6s var(--ease-out),filter .6s var(--ease-out);}
.bar__logo:hover img{transform:scale(1.04);filter:brightness(1.15);}

/* ============================================================
   4. NEW REVEAL VARIANTS
   So no two sections enter the same way.
   ============================================================ */
/* mask-up — a band of colour passes over the element and leaves it */
html.js [data-anim="mask"]{position:relative;overflow:hidden;}
html.js [data-anim="mask"]::after{
  content:"";position:absolute;inset:0;z-index:4;background:var(--accent);
  transform:scaleX(1);transform-origin:0 50%;
  transition:transform .85s var(--ease-io);
  transition-delay:calc(var(--d,0) * 1ms);
}
html.js [data-anim="mask"] > *{opacity:0;transition:opacity .01s linear;
  transition-delay:calc(var(--d,0) * 1ms + 420ms);}
html.js [data-anim="mask"].is-in::after{transform:scaleX(0);transform-origin:100% 50%;}
html.js [data-anim="mask"].is-in > *{opacity:1;}

/* flip — a card turning on its own axis into place */
html.js [data-anim="flip"]{
  opacity:0;transform:perspective(1200px) rotateX(14deg) translate3d(0,26px,0);
  transform-origin:50% 100%;
  transition:opacity .8s var(--ease-out),transform 1.1s var(--ease-out);
  transition-delay:calc(var(--d,0) * 1ms + var(--si,0) * 90ms);
}
html.js [data-anim="flip"].is-in{opacity:1;transform:none;}

/* drift — arrives from the side it sits on, with a slight rotation */
html.js [data-anim="drift"]{
  opacity:0;transform:translate3d(0,30px,0) rotate(-1.2deg) scale(.98);
  transition:opacity .85s var(--ease-out),transform 1.2s var(--ease-out);
  transition-delay:calc(var(--d,0) * 1ms + var(--si,0) * 80ms);
}
html.js [data-anim="drift"].is-in{opacity:1;transform:none;}

/* expand — a rule or divider drawing itself outward from centre */
html.js [data-anim="expand"]{transform:scaleX(0);transform-origin:50% 50%;
  transition:transform 1.2s var(--ease-out);
  transition-delay:calc(var(--d,0) * 1ms);}
html.js [data-anim="expand"].is-in{transform:scaleX(1);}

/* ============================================================
   5. LINE DRAWING — SVG diagrams draw themselves
   ============================================================ */
.draw path,.draw line,.draw circle,.draw ellipse,.draw polyline{
  stroke-dasharray:var(--len,400);stroke-dashoffset:var(--len,400);
}
.draw.is-in path,.draw.is-in line,.draw.is-in circle,
.draw.is-in ellipse,.draw.is-in polyline{
  animation:draw-in 1.5s var(--ease-out) forwards;
  animation-delay:calc(var(--ln,0) * 110ms + var(--d,0) * 1ms);
}
@keyframes draw-in{to{stroke-dashoffset:0;}}

/* ============================================================
   6. DEPTH — floating background elements
   Three slow orbs per section band, offset and parallaxed. Pure
   decoration, so they are aria-hidden and go first under reduced
   motion.
   ============================================================ */
.orb{
  position:absolute;z-index:0;pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,
    color-mix(in srgb,var(--accent) 22%,transparent),transparent 74%);
  filter:blur(18px);opacity:.55;
  animation:orb-float var(--dur,22s) ease-in-out infinite alternate;
  animation-delay:var(--del,0s);
}
@keyframes orb-float{
  from{translate:0 0 0;scale:1;}
  to{translate:var(--ox,24px) var(--oy,-30px) 0;scale:1.12;}
}
.sx,.stage{isolation:isolate;}
.sx > .sx__in,.stage > .stage__in{position:relative;z-index:2;}

/* ============================================================
   7. HEADINGS THAT ANSWER THE POINTER
   Each word lifts as the pointer crosses it. Subtle, and only on
   display headings where the type is the subject.
   ============================================================ */
@media (hover:hover){
  .tt .wd > i{transition:transform 1.05s var(--ease-out), color .45s var(--ease-out);}
  .tt.is-in .wd:hover > i{color:var(--accent);}
}

/* ============================================================
   8. CARDS — depth, glow and internal movement
   ============================================================ */
.card,.figs__c,.strip > div,.seq__s,.offer-card,.prin__c,.pg-xr a{
  transition:transform .6s var(--ease-out),background .5s var(--ease-out),
             border-color .5s var(--ease-out),box-shadow .6s var(--ease-out);
}
.card:hover{
  box-shadow:0 40px 90px -50px color-mix(in srgb,var(--accent) 90%,transparent);
}
.card__h,.offer-card__h,.prin__h,.figs__n,.seq__h{transition:transform .5s var(--ease-out),color .45s var(--ease-out);}
.card:hover .card__h{transform:translateX(4px);}
.card:hover .card__p{color:rgba(190,203,224,.98);}
.card__p{transition:color .5s var(--ease-out);}

/* the chips in the capability bands answer individually */
.cband__l li{transition:transform .45s var(--ease-out),border-color .45s var(--ease-out),
  color .45s var(--ease-out),background .45s var(--ease-out);}
.cband__l li:hover{transform:translateY(-3px);}

/* ============================================================
   9. THE FAQ — an icon that morphs rather than rotates
   ============================================================ */
.q__b i,.q__i{position:relative;display:inline-block;width:14px;height:14px;flex:none;}
.q__b i::before,.q__b i::after,.q__i::before,.q__i::after{
  content:"";position:absolute;left:0;top:50%;width:14px;height:1.5px;
  background:currentColor;border-radius:1px;
  transition:transform .5s var(--ease-out),opacity .4s var(--ease-out);
}
.q__b i::after,.q__i::after{transform:rotate(90deg);}
.q.on .q__b i::after,.q.on .q__i::after{transform:rotate(0deg);opacity:.35;}
.q__b{transition:padding-left .5s var(--ease-out),color .4s var(--ease-out);}
.q:hover .q__b{padding-left:10px;}
.q.on .q__b{color:#fff;}

/* ============================================================
   10. FORMS — polished states
   ============================================================ */
.gate__f,.pg-form .gate__f{position:relative;}
.gate__f input,.gate__f textarea{
  transition:border-color .4s var(--ease-out),background .4s var(--ease-out),
             box-shadow .4s var(--ease-out),transform .3s var(--ease-out);
}
.gate__f input:hover,.gate__f textarea:hover{border-color:rgba(168,210,236,.4);}
.gate__f input:focus,.gate__f textarea:focus{
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent);
}
.gate__f span{transition:color .4s var(--ease-out);}
.gate__f:focus-within span{color:color-mix(in srgb,var(--accent) 88%,#fff);}
/* a filled field keeps a quiet mark so a long form reads as progress */
.gate__f.is-filled input,.gate__f.is-filled textarea{
  border-color:color-mix(in srgb,var(--accent) 42%,transparent);
}
.gate__f.is-filled::after{
  content:"";position:absolute;right:12px;bottom:14px;width:6px;height:6px;
  border-radius:50%;background:var(--accent);
  animation:tick-in .4s var(--ease-out);
}
@keyframes tick-in{from{transform:scale(0);}to{transform:scale(1);}}
.gate__go{position:relative;overflow:hidden;isolation:isolate;}
.gate__go::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(120deg,#fff,color-mix(in srgb,var(--accent) 55%,#fff));
  transform:translateY(101%);transition:transform .5s var(--ease-out);
}
.gate__go:hover::before{transform:translateY(0);}

/* ============================================================
   11. THE SEQUENCE
   The track drifts sideways with the section rather than being
   pinned. A pinned version was tried and removed — see interact.js.
   ============================================================ */
.seq__track{will-change:transform;}

/* ============================================================
   12. SECTION CONTINUITY
   A hairline spine down the left of the reading column, filling
   as the section passes. It is the visual join between sections
   that otherwise just stack.
   ============================================================ */
.sx--spine::after{
  content:"";position:absolute;left:calc(var(--gut) * .42);top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,var(--accent),transparent);
  transform:scaleY(0);transform-origin:50% 0;
  transition:transform 1.6s var(--ease-out);
}
.sx--spine.is-in::after{transform:scaleY(1);}

@media (prefers-reduced-motion:reduce){
  html.has-cursor,html.has-cursor *{cursor:auto !important;}
  .cur,.cur__dot,.orb{display:none !important;}
  html.js [data-anim="mask"]::after{display:none;}
  html.js [data-anim="mask"] > *,
  html.js [data-anim="flip"],html.js [data-anim="drift"]{opacity:1 !important;transform:none !important;transition:none !important;}
  html.js [data-anim="expand"]{transform:none !important;}
  .draw path,.draw line,.draw circle,.draw ellipse,.draw polyline{stroke-dashoffset:0;animation:none;}
  .seq__track{transform:none !important;}
  .sx--spine::after{transform:scaleY(1);}
}

/* ============================================================
   13. THE SERVICES HERO — a live system behind the type
   The canvas is the growth system itself: five anchors, a moving
   particle field, signals passing between them, all reacting to
   the pointer anywhere in the stage. The type sits above it with
   its own parallax, so the two layers separate as you scroll.
   ============================================================ */
.stage--sys{min-height:min(94svh,960px);}
.stage__sys{
  position:absolute;inset:0;z-index:1;width:100%;height:100%;
  opacity:0;animation:sys-in 2.8s var(--ease-out) .25s forwards;
  -webkit-mask-image:radial-gradient(115% 96% at 62% 46%,#000 26%,transparent 78%);
          mask-image:radial-gradient(115% 96% at 62% 46%,#000 26%,transparent 78%);
}
@keyframes sys-in{to{opacity:1;}}
.stage--sys .stage__glow{opacity:.7;}
/* the headline reads over the system, so it carries its own ground */
.tt--sys{
  position:relative;
  text-shadow:0 8px 60px rgba(3,6,14,.85), 0 2px 16px rgba(3,6,14,.7);
}

/* ============================================================
   14. THE CAPABILITY INDEX
   Sticky on the left through the whole band run. It is navigation,
   a progress read-out, and the thing that tells a first-time
   visitor there are five of these and where they are in them.
   ============================================================ */
.capdex{display:none;}
@media (min-width:1180px) and (scripting:none){
  /* The journey: a dotted spine with a solid accent line that fills as
     you descend the five capabilities, a node per capability, and the
     name set beside it. Not a progress bar — a route with stops on it. */
  .capdex{
    display:block;position:sticky;top:50vh;z-index:5;
    height:0;overflow:visible;
    padding-left:clamp(18px,2.2vw,30px);
    pointer-events:none;
  }
  .capdex ol{
    position:relative;list-style:none;margin:0;padding:0 0 0 22px;
    transform:translateY(-50%);
    display:grid;gap:clamp(22px,2.6vh,34px);
    pointer-events:auto;width:max-content;
  }
  /* the route */
  .capdex ol::before{
    content:"";position:absolute;left:4px;top:4px;bottom:4px;width:1px;
    background-image:linear-gradient(180deg,
      rgba(168,210,236,.5) 0 2px, transparent 2px 6px);
    background-size:1px 6px;
    opacity:.55;
  }
  /* how far along it you are */
  .capdex ol::after{
    content:"";position:absolute;left:4px;top:4px;bottom:4px;width:1px;
    background:linear-gradient(180deg,
      color-mix(in srgb,var(--accent) 40%,transparent), var(--accent));
    transform:scaleY(var(--p,0));transform-origin:50% 0;
    transition:transform .75s var(--ease-out);
    box-shadow:0 0 12px color-mix(in srgb,var(--accent) 70%,transparent);
  }
  .capdex a{
    position:relative;display:flex;align-items:center;gap:13px;
    font-family:var(--font-display);font-size:.72rem;font-weight:800;
    letter-spacing:.2em;text-transform:uppercase;
    color:rgba(126,141,166,.85);
    transition:color .55s var(--ease-out);
  }
  /* the stop */
  .capdex__d{
    position:absolute;left:-22px;top:50%;
    width:9px;height:9px;margin-top:-4.5px;border-radius:50%;
    background:#05070C;
    box-shadow:inset 0 0 0 1px rgba(168,210,236,.45);
    transition:box-shadow .6s var(--ease-out), transform .6s var(--ease-out),
               background .6s var(--ease-out);
  }
  .capdex__d::after{                  /* the halo, only when live */
    content:"";position:absolute;inset:-7px;border-radius:50%;
    border:1px solid var(--accent);
    opacity:0;transform:scale(.6);
    transition:opacity .6s var(--ease-out), transform .8s var(--ease-out);
  }
  .capdex__t{position:relative;}
  .capdex__t::after{                  /* the tick out to the name */
    content:"";position:absolute;left:-9px;top:50%;width:0;height:1px;
    background:var(--accent);
    transition:width .6s var(--ease-out);
  }
  .capdex a:hover{color:#DCE8FB;}
  .capdex a:hover .capdex__d{
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 80%,transparent);
    transform:scale(1.2);
  }
  .capdex li.on a{color:#F2F7FF;letter-spacing:.23em;}
  .capdex li.on .capdex__d{
    background:var(--accent);transform:scale(1.15);
    box-shadow:inset 0 0 0 1px var(--accent),
               0 0 18px color-mix(in srgb,var(--accent) 85%,transparent);
  }
  .capdex li.on .capdex__d::after{opacity:.55;transform:scale(1);}
  .capdex li.on .capdex__t::after{width:0;}
  /* passed stops stay marked, so the route reads as travelled */
  .capdex li.done .capdex__d{
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 60%,transparent);
    background:color-mix(in srgb,var(--accent) 28%,#05070C);
  }
}

/* ============================================================
   15. THE CAPABILITY BANDS — an interactive surface
   ============================================================ */
.cband{overflow:clip;}
/* The canvas is an instrument, not a decoration behind the text, so it
   gets real size and real presence. Its frame, corner ticks and label
   are drawn inside the canvas by scenes.js — a border in CSS would sit
   outside the DPR-scaled coordinate space and read as a box. */
.cband__fx{
  height:clamp(320px,48vh,540px);
  opacity:.82;
  transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);
  transform:scale(.985);
}
.cband.is-live .cband__fx{opacity:1;transform:none;}
/* the live band lifts its whole surface, not just its rule */
.cband::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:
    radial-gradient(720px 460px at var(--cmx,50%) var(--cmy,50%),
      color-mix(in srgb,var(--cb) 22%,transparent),transparent 66%),
    linear-gradient(100deg,color-mix(in srgb,var(--cb) 11%,transparent),transparent 56%),
    linear-gradient(180deg,transparent,color-mix(in srgb,#041F8F 26%,transparent));
  transition:opacity .8s var(--ease-out);
}
.cband.is-live::after{opacity:1;}
/* the live band takes a lit edge — the one hard signal of where you are */
.cband::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;z-index:1;
  background:linear-gradient(180deg,transparent,var(--cb),transparent);
  opacity:0;transform:scaleY(.4);transform-origin:50% 50%;
  transition:opacity .8s var(--ease-out),transform 1.1s var(--ease-out);
}
.cband.is-live::before{opacity:.85;transform:scaleY(1);}
.cband--flip::before,.cband--wide::before{left:auto;right:0;}
.cband__h{position:relative;display:inline-block;}
/* the heading carries a ghost of itself, offset — depth without a shadow */
.cband__h::before{
  content:attr(data-ghost);position:absolute;left:0;top:0;z-index:-1;
  color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--cb) 34%,transparent);
  transform:translate3d(0,0,0);opacity:0;
  transition:transform .9s var(--ease-out),opacity .9s var(--ease-out);
}
.cband.is-live .cband__h::before{transform:translate3d(10px,-10px,0);opacity:1;}

/* the chips become a row that responds as a set */
.cband__l{perspective:800px;}
.cband__l li{
  cursor:default;
  transition:transform .5s var(--ease-out),border-color .5s var(--ease-out),
             color .5s var(--ease-out),background .5s var(--ease-out);
}
.cband__l:hover li{opacity:.55;}
.cband__l li:hover{
  opacity:1;transform:translateY(-4px) scale(1.04);
  background:color-mix(in srgb,var(--cb) 20%,transparent);
  border-color:var(--cb);color:#fff;
}

@media (prefers-reduced-motion:reduce){
  .stage__sys{display:none;}
  .cband__fx{opacity:1;transform:none;}
  .cband__h::before{display:none;}
  .cband::after{opacity:1;}
}

/* ============================================================
   16. THE ABOUT HEADLINE
   Two clauses, each on its own line, each with its own mask and
   its own delay, and the whole block drifting against the page as
   it scrolls. The em is a whole line, so every word inside a line
   shares one parent and the grouping is safe.
   ============================================================ */
.tt--stack{display:grid;gap:.02em;}
.ln2{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em;}
.ln2 .wd{overflow:visible;padding-bottom:0;margin-bottom:0;}
.ln2 .wd > i{
  transform:translateY(112%) rotate(1.5deg);transform-origin:0 100%;
  transition:transform 1.2s var(--ease-out);
  transition-delay:calc(var(--li,0) * 160ms + var(--wi,0) * 40ms);
}
.is-in .ln2 .wd > i,.ln2.is-in .wd > i{transform:none;}
.is-in .ln2{overflow:visible;transition:overflow 0s linear 1.4s;}
/* the emphasised clause arrives stroked, then warms toward the accent */
.ln2--em em{
  transition:-webkit-text-stroke-color 1.4s var(--ease-out) .7s;
}