/* ============================================================================
   Bootstrapped Studios — 5.55 homepage
   Loaded on top of bs.css, homepage only.

   Eight beats. The object owns the first screen outright, the rest of the page
   is built around it: colossal words, near zero copy, intentional placement,
   and light doing the work colour used to do.
   ========================================================================= */

main{position:relative;z-index:4}

/* the content plane leans into the scroll and settles back to flat. The cover
   sits OUTSIDE it on purpose: a transformed ancestor drags the mark's canvas
   with it and the object would shear with the page. */
.plane{position:relative;will-change:transform}

.s{position:relative;padding:clamp(84px,15vh,190px) 0}

/* ============================================================== 01 cover === */

.cover{
  position:relative;
  height:100vh;         /* fallback: svh resolves to 0 in some headless and
                           older engines, which collapses the whole stage */
  height:100svh;
  width:100%;
  overflow:hidden;
  isolation:isolate;
}

/* The only light in the room that is not coming off the object. The canvas
   itself is transparent, so this is the ambience the mark sits in and there
   is no rectangle edge anywhere on the screen. */
.cover::before{
  content:"";
  position:absolute;
  left:50%;top:48%;
  width:190vmax;height:190vmax;
  transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,
      color-mix(in srgb, var(--hero) 26%, transparent) 0%,
      color-mix(in srgb, var(--hero) 13%, transparent) 17%,
      color-mix(in srgb, var(--hero) 4%, transparent) 34%,
      transparent 62%);
  opacity:.92;
  z-index:0;
  pointer-events:none;
  transition:background 620ms var(--ease);
}
@supports not (background: color-mix(in srgb, red, blue)){
  .cover::before{background:radial-gradient(closest-side,
    rgba(255,255,255,.26) 0%, rgba(255,255,255,.13) 17%, rgba(255,255,255,.04) 34%, transparent 62%)}
}
/* edges fall away so the object reads as lit from inside the frame */
.cover::after{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(118% 90% at 50% 46%, transparent 40%, rgba(0,0,0,.80) 100%);
  z-index:6;
  pointer-events:none;
}

/* ------------------------------------------------------------- the type --- */

.cov-back,.cov-front{
  position:absolute;
  left:var(--gut);right:var(--gut);
  margin:0;
  pointer-events:none;
}
/* The top line is artwork, not text: one vector of the real Lexend Bold
   outlines with the crossbar-less A already in it. Nothing to fit, no font to
   wait for, and the spectrum is a background the mask cuts the letters out of
   rather than a background clipped to a font. */
.cov-back{
  top:26.5%;
  z-index:1;
  aspect-ratio:8406/726;
  background-color:var(--ink);
  -webkit-mask:url("img/wordmark.svg?v=e2707a7a4cadb90d") no-repeat center/100% 100%;
  mask:url("img/wordmark.svg?v=e2707a7a4cadb90d") no-repeat center/100% 100%;
}
.cov-front{
  font-family:var(--font-d);
  font-weight:var(--w-d);
  text-transform:uppercase;
  line-height:.80;
  white-space:nowrap;
  color:var(--ink);
  font-synthesis:none;
  letter-spacing:0;
  top:60.5%;
  z-index:1;
  font-size:24px;
}
/* The whole word carries one continuous spectral surface. The second half of
   the ramp repeats the first, which lets the background travel a complete
   cycle and meet its starting frame without a visible jump. */
.cov-back{
  background-image:linear-gradient(90deg,
    #ff5a2b 0%,#ff3d7f 8.333%,#a66cff 16.667%,#4d8cff 25%,
    #2fe6b0 33.333%,#ffd36a 41.667%,#ff5a2b 50%,
    #ff3d7f 58.333%,#a66cff 66.667%,#4d8cff 75%,
    #2fe6b0 83.333%,#ffd36a 91.667%,#ff5a2b 100%);
  background-size:200% 100%;
  background-position:0 50%;
  animation:hero-title-flow 4s linear infinite;
}
@keyframes hero-title-flow{to{background-position:100% 50%}}

/* -------------------------------------------------------- the object ------
   FULL BLEED, deliberately. The ring cage is larger than the frame by design,
   so the only thing allowed to crop it is the window itself. A fixed square
   box here puts a second, invisible edge inside the window and the ring tubes
   get sliced off against it in a hard vertical line.

   `.cover .cov-stage` and not `.cov-stage`: the component ships
   `.bssmark{position:relative}` for drop in use and that file loads after this
   one, so at equal specificity it wins and the box collapses to zero height. */
.cover .cov-stage{
  position:absolute;
  inset:0;
  width:auto;height:auto;
  transform:none;
  z-index:2;
}

/* ------------------------------------------------------------- the foot --- */

.cov-foot{
  position:absolute;
  left:var(--gut);right:var(--gut);
  bottom:clamp(20px,3.4vh,38px);
  z-index:7;
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
}
/* The foot is the only block on the cover whose height is content driven: two
   lines of tagline, two of services, one row of links, all of it reflowing on
   a narrow screen. home-mark.js measures the distance from the bottom of the
   cover to the top of the foot and writes it as --foot-h, so the second
   colossal line can be parked ABOVE it instead of at a percentage that was
   only ever correct on the one phone it was checked on. */
.cov-tag{
  margin:0 0 .9em;
  font-family:var(--font-d);font-weight:var(--w-d);text-transform:uppercase;
  font-size:clamp(.9rem,1.5vw,1.18rem);line-height:1.04;letter-spacing:-.014em;
  color:var(--ink);
}
.cov-cta{display:flex;gap:clamp(16px,2.2vw,30px);flex-wrap:wrap}
/* the scroll cue: a short track with one spark falling down it */
.cov-next{
  position:absolute;left:50%;bottom:clamp(16px,2.6vh,30px);z-index:7;
  width:30px;height:34px;transform:translateX(-50%);
  display:grid;place-items:center;
}
.cov-next i{display:block;width:1px;height:34px;background:var(--hair-soft);
  position:relative;overflow:hidden;border-radius:1px}
.cov-next i::after{
  content:"";position:absolute;left:-1px;right:-1px;height:12px;top:-14px;border-radius:2px;
  background:linear-gradient(180deg,var(--glow-line),var(--hero-lit));
  box-shadow:0 0 8px 1px var(--glow-s);
  animation:drain 2.4s var(--ease) infinite;
}
@keyframes drain{0%{transform:translateY(0)}62%,100%{transform:translateY(48px)}}
@media (max-width:820px){.cov-next{display:none}}

/* Rover stays off the first screen. The object owns that frame outright, and
   it is parked in the same corner as the hero controls. */
body.on-cover .fab{opacity:0;pointer-events:none;transform:translateY(8px)}
.fab{transition:width .5s var(--ease),box-shadow .4s var(--ease),
  opacity .5s var(--ease),transform .5s var(--ease-out)}

/* ------------------------------------------------------------- mobile ----- */
@media (max-width:760px),(orientation:portrait) and (max-width:900px){
  .cov-back{top:22%}
  /* STUDIOS is anchored to the measured top of the foot, never to a guessed
     percentage. On a phone the copy block is tall enough that 66.5% put the
     tagline straight through the word. */
  .cov-front{top:auto;bottom:calc(var(--foot-h,200px) + clamp(18px,3.2vh,34px))}
  /* the lower third was landing cramped on phones: tagline, CTAs and the
     links all inside ~140px. More air between the blocks, and every
     touchable is lifted to a real thumb target. */
  .cov-foot{flex-direction:column;align-items:flex-start;gap:20px;bottom:max(24px,3.4vh)}
  .cov-tag{margin-bottom:.85em}
  .cov-cta{gap:14px 28px;margin-top:2px}
  /* text links are .64rem on desktop — under half a thumb target on glass */
  .cov-foot .tlink{font-size:.74rem;padding:.55em 0 .35em}
}
@media (max-height:560px) and (orientation:landscape){
  .cov-tag{display:none}
}

/* ============================================================ 02 argument === */

.argue{
  padding-top:clamp(96px,20vh,240px);
  padding-bottom:clamp(80px,14vh,180px);
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(26px,5vh,58px);
}
.argue-type{position:relative}
.argue-1,.argue-2{
  margin:0;font-family:var(--font-d);font-weight:var(--w-d);text-transform:uppercase;
  line-height:.78;letter-spacing:-.028em;white-space:nowrap;color:var(--ink);
  font-synthesis:none;
}
/* intentional placement: the first word sits in from the gutter, the second
   runs past the right edge of the page. The line is meant to leave the frame. */
.argue-1{font-size:clamp(3.4rem,17vw,15rem);padding-left:var(--gut)}
.argue-2{font-size:clamp(2rem,8vw,7.2rem);padding-left:calc(var(--gut) + 3vw);
  margin-top:-.06em;color:var(--ink-mute)}
.argue-say{
  display:flex;gap:clamp(20px,4vw,64px);flex-wrap:wrap;align-items:flex-start;
  padding:0 var(--gut);
}
.argue-say .body{flex:1 1 30ch;max-width:44ch;margin:0}
/* align-items, not the default stretch: a chip is sized by its own label and
   must never be pulled to the height of the tallest row */
.chips{display:flex;align-items:flex-start;gap:9px;flex-wrap:wrap;flex:1 1 26ch;max-width:38ch}
.service-pair{
  display:grid;grid-template-columns:1fr 1fr;gap:0;margin:clamp(6px,2vh,22px) var(--gut) 0;
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
}
.service{
  position:relative;display:flex;min-height:clamp(280px,34vw,470px);flex-direction:column;
  align-items:flex-start;justify-content:flex-end;padding:clamp(24px,4vw,56px);
  overflow:hidden;transition:background .55s var(--ease),color .55s var(--ease);
}
.service:first-child{border-right:1px solid var(--hair)}
.service::before{
  content:"";position:absolute;left:50%;bottom:-68%;width:130%;height:110%;transform:translateX(-50%);
  background:radial-gradient(closest-side,var(--glow-m),transparent 72%);opacity:0;
  filter:blur(26px);transition:opacity .55s var(--ease);pointer-events:none;
}
.service:hover::before{opacity:1}
.service > *{position:relative;z-index:1}
.service-label{position:absolute;left:clamp(24px,4vw,56px);top:clamp(24px,4vw,56px);color:var(--ink-ghost)}
.service-name{max-width:9ch;font-size:clamp(2rem,5.3vw,5rem);letter-spacing:-.035em;font-weight:var(--w-d)}
.service .body{max-width:42ch;margin:clamp(16px,2.6vh,28px) 0 0;color:var(--ink-mute)}
.service-result{margin-top:clamp(20px,3.4vh,36px);color:var(--hero-lit)}
.argue-spec{padding:0 var(--gut);margin:0;color:var(--ink-ghost)}

@media (max-width:760px){
  .argue-1{font-size:15.5vw}
  .argue-2{font-size:8vw;padding-left:var(--gut);margin-top:-.02em}
  /* stacked, the flex basis above would become a HEIGHT and open a dead
     column of space under the paragraph */
  .argue-say{flex-direction:column;gap:clamp(18px,3.4vh,30px)}
  .argue-say .body,.chips{flex:0 0 auto;max-width:none;width:100%}
  .service-pair{grid-template-columns:1fr}
  .service{min-height:340px}
  .service:first-child{border-right:0;border-bottom:1px solid var(--hair)}
}

/* ============================================================= 03 the work === */

.work{padding-top:clamp(60px,10vh,120px)}
.wk-head{padding:0 var(--gut);display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(12px,2vh,20px);margin-bottom:clamp(30px,5vh,58px)}
.wk-h{font-size:clamp(2.4rem,8vw,6.4rem);letter-spacing:-.028em;font-weight:var(--w-d)}
.wk-say{max-width:40ch;margin:0}
.wk-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(12px,1.8vw,26px);padding:0 var(--gut);
}
.wk{
  position:relative;display:block;border-radius:16px;overflow:hidden;
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--hair);
  transition:transform .6s var(--ease-out),box-shadow .6s var(--ease);
}
.wk::after{
  content:"";position:absolute;left:50%;bottom:-46%;width:110%;height:82%;transform:translateX(-50%);
  background:radial-gradient(closest-side,var(--glow-s),transparent 72%);
  opacity:0;filter:blur(30px);transition:opacity .6s var(--ease);pointer-events:none;z-index:0}
.wk:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}
.wk:hover::after{opacity:1}
.wk-shot{display:block;overflow:hidden;position:relative;z-index:1}
.wk-shot img{
  width:100%;height:auto;display:block;
  filter:saturate(.1) brightness(.6) contrast(1.1);
  transition:filter .7s var(--ease),transform .9s var(--ease-out);
}
.wk:hover .wk-shot img,.wk.is-active .wk-shot img{filter:none;transform:scale(1.03)}
.wk-meta{
  display:block;position:relative;z-index:1;
  padding:clamp(16px,2vw,26px);
  border-top:1px solid var(--hair-soft);
}
.wk-tag{display:block;color:var(--ink-ghost);margin-bottom:.7em;transition:color .4s var(--ease)}
.wk:hover .wk-tag,.wk.is-active .wk-tag{color:var(--hero-lit)}
.wk-n{
  margin:0 0 .4em;font-family:var(--font-d);font-weight:var(--w-d2);text-transform:uppercase;
  font-size:clamp(1.05rem,2.1vw,1.6rem);line-height:1;letter-spacing:-.018em;color:var(--ink);
}
.wk-p{display:block;font-size:.92rem;line-height:1.5;color:var(--ink-mute);max-width:34ch}
@media (max-width:720px){.wk-grid{grid-template-columns:1fr}}

/* =============================================================== 04 offer === */

.offer{overflow:hidden}
/* the section title as a ghost behind the cards. Real text, real weight, no
   outline hack: it is simply the same word set very large and very quiet. */
.offer-ghost{
  position:absolute;left:var(--gut);top:clamp(30px,6vh,90px);margin:0;z-index:0;
  font-family:var(--font-d);font-weight:var(--w-d);text-transform:uppercase;
  font-size:clamp(7rem,26vw,22rem);line-height:.74;letter-spacing:-.04em;
  color:rgba(255,255,255,.045);pointer-events:none;white-space:nowrap;
  font-synthesis:none;
}
.offer-head{position:relative;z-index:1;padding:0 var(--gut);
  display:flex;flex-direction:column;align-items:flex-start;gap:clamp(12px,2vh,20px);
  margin-bottom:clamp(30px,5vh,58px)}
.offer-h{font-size:clamp(2.2rem,7vw,5.4rem);letter-spacing:-.028em;font-weight:var(--w-d)}
.offer-say{max-width:38ch;margin:0}

.cards{
  position:relative;z-index:1;padding:0 var(--gut);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.8vw,26px);
}
.card{
  position:relative;overflow:hidden;border-radius:18px;
  padding:clamp(22px,2.4vw,36px);
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--hair);
  display:flex;flex-direction:column;align-items:flex-start;gap:.5em;
  transition:transform .6s var(--ease-out),box-shadow .6s var(--ease),background .6s var(--ease);
}
.card::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--chrome-edge)}
.card::after{
  content:"";position:absolute;left:50%;bottom:-56%;width:120%;height:90%;transform:translateX(-50%);
  background:radial-gradient(closest-side,var(--glow-s),transparent 72%);
  opacity:0;filter:blur(30px);transition:opacity .6s var(--ease);pointer-events:none}
.card:hover{transform:translateY(-5px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.24);
  background:var(--surface-2)}
.card:hover::after{opacity:1}
.card>*{position:relative;z-index:1}
.card .m.wide{color:var(--ink-ghost)}
.card-n{
  margin:.3em 0 .2em;font-family:var(--font-d);font-weight:var(--w-d2);text-transform:uppercase;
  font-size:clamp(2rem,4.4vw,3.4rem);line-height:.9;letter-spacing:-.03em;color:var(--ink);
}
.card p{font-size:.94rem;line-height:1.6;color:var(--ink-mute);margin:0 0 .4em;max-width:32ch}
.card-spec{color:var(--ink-faint);margin-top:auto;padding-top:1.2em}
.card-link{margin-top:.9em}
.card-no{
  position:absolute;right:clamp(16px,1.6vw,24px);top:clamp(14px,1.6vw,22px);z-index:0;
  font-family:var(--font-m);font-size:.58rem;letter-spacing:.2em;color:var(--ink-ghost);
}
@media (max-width:900px){.cards{grid-template-columns:1fr}.card-spec{margin-top:.6em}}

/* ============================================================ 05 position === */

/* Pinned: the claim is scrubbed word by word as the hold scrolls past. Sticky
   rather than fixed, because the plane above it is permanently transformed. */
.claim-hold{height:250vh;padding:0}
.claim-stick{
  position:sticky;top:0;height:100vh;height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:0 var(--gut);
}
/* The founder line is the one long sentence set at display scale, and it is
   the only display element on the site in sentence case. Thirty words of
   uppercase is a wall: the reader has no ascenders or descenders to navigate
   by and has to decode it letter by letter. Case is doing the legibility work
   here, so line-height and measure open up to match. */
.claim{
  margin:0;max-width:22ch;
  font-family:var(--font-d);font-weight:var(--w-d2);
  font-size:clamp(1.85rem,5vw,4.6rem);line-height:1.06;letter-spacing:-.028em;
  color:var(--ink);font-synthesis:none;text-wrap:pretty;
}
.claim span{display:inline-block;opacity:.5;will-change:opacity,transform}
.claim .hi{color:var(--hero-lit)}
.claim-by{
  display:flex;align-items:center;gap:12px;margin:clamp(20px,3.4vh,38px) 0 0;color:var(--ink-ghost);
  opacity:0;transform:translateY(10px);
  transition:opacity .7s var(--ease),transform .7s var(--ease-out),color .7s var(--ease);
}
.claim-by img{width:clamp(42px,3.2vw,54px);height:clamp(42px,3.2vw,54px);border-radius:50%;object-fit:cover;object-position:center;box-shadow:0 0 0 1px rgba(255,255,255,.2),0 8px 24px rgba(0,0,0,.24)}
.claim-by p{margin:0}
.claim-by.on{opacity:1;transform:none;color:var(--ink-faint)}
@media (max-width:760px){.claim-hold{height:200vh}}

/* =============================================================== 06 index === */

.ix{
  display:grid;grid-template-columns:minmax(240px,.7fr) 1.3fr;
  gap:clamp(24px,5vw,90px);align-items:start;padding-left:var(--gut);padding-right:var(--gut);
}
.ix-l{position:sticky;top:clamp(96px,16vh,180px)}
.ix-n{
  margin:0;font-family:var(--font-d);font-weight:var(--w-d);
  font-size:clamp(5rem,15vw,13rem);line-height:.76;letter-spacing:-.05em;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.ix-p{margin:.9em 0 1.6em;color:var(--ink-faint)}
@media (max-width:820px){
  .ix{grid-template-columns:1fr;gap:clamp(20px,4vh,40px)}
  .ix-l{position:static}
}

/* ================================================================ 07 spec === */

.spec-h{font-size:clamp(1.9rem,5.4vw,4rem);letter-spacing:-.028em;font-weight:var(--w-d);
  max-width:16ch;margin:.5em 0 clamp(26px,4.6vh,54px)}

/* =============================================================== 08 close === */

.close{padding-top:clamp(56px,9vh,120px);padding-bottom:clamp(50px,8vh,110px)}
.close-word{padding:0 var(--gut);margin:0 0 clamp(26px,4.6vh,58px);position:relative}
.close-word span{
  display:block;font-family:var(--font-d);font-weight:var(--w-d2);
  line-height:.78;white-space:nowrap;letter-spacing:0;text-transform:uppercase;
  font-size:calc(var(--fit,10) * 1px);
}
.close-word::before{
  content:"";position:absolute;left:0;right:0;bottom:-10%;height:130%;pointer-events:none;
  background:radial-gradient(46% 76% at 34% 100%,var(--glow-m),transparent 72%);
  filter:blur(16px);
}
.close-in{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,5vw,84px);
  padding:0 var(--gut);align-items:start;
}
.close-h{font-size:clamp(1.7rem,3.6vw,2.8rem);letter-spacing:-.026em;font-weight:var(--w-d);max-width:14ch;
  margin:0 0 .7em}
.close-say .body{max-width:40ch}
.close-contact{display:flex;flex-direction:column;gap:.9em;align-items:flex-start;
  margin-top:clamp(20px,3.4vh,36px)}
@media (max-width:900px){.close-in{grid-template-columns:1fr}}

/* ============================================================== arrival ====
   The launch sequence. Black, the name rising letter by letter, a real
   progress track and a telemetry readout, then ignition: the bar flares, the
   whole panel lifts off the screen.

   5.57: the readout is wired to REAL readiness — fonts, the chevron glyph and
   the mark reporting itself mounted — so the bar is reporting something rather
   than performing. And the chevron A now animates with the rest of the word:
   it is an <svg>, not a text node, so bs.js wraps it as its own .c. */

#arrive{
  position:fixed;inset:0;z-index:300;background:#000;
  display:grid;place-items:center;overflow:hidden;
  transition:transform 1.05s var(--ease-out),opacity .7s var(--ease) .18s,visibility 1.05s;
}
/* it does not fade out, it LAUNCHES: the panel leaves through the top of the
   screen the way the object it is covering would */
#arrive.out{transform:translateY(-101%);opacity:0;visibility:hidden}

/* the ground the sequence stands on: one low burn, so the black is a room
   rather than a void */
#arrive::before{
  content:"";position:absolute;left:50%;bottom:-46%;width:150vmax;height:110vmax;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(closest-side,
    color-mix(in srgb,var(--hero) 15%,transparent) 0%,
    color-mix(in srgb,var(--hero) 5%,transparent) 38%,transparent 68%);
  opacity:0;transition:opacity 1.4s var(--ease);
}
#arrive.go::before{opacity:1}
@supports not (background: color-mix(in srgb, red, blue)){
  #arrive::before{background:radial-gradient(closest-side,
    rgba(255,255,255,.15) 0%,rgba(255,255,255,.05) 38%,transparent 68%)}
}

#arrive-in{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:clamp(14px,2.4vh,22px);
  padding:0 var(--gut);
}

/* ------------------------------------------------------------- the name ---
   The sequence used to split the name into thirteen elements and stagger a
   transition on each one, behind a dynamic import for the chevron glyph. That
   is a lot of main thread work to schedule at precisely the moment the page is
   compiling shaders, and it is why the letters arrived in clumps.

   It is one vector now, revealed by a single clip-path wipe. One element, one
   compositor animation, and nothing to wait for before it can start. */
#arrive-w{
  display:block;
  width:min(340px,64vw);
  aspect-ratio:8406/726;
  background-color:var(--ink);
  -webkit-mask:url("img/wordmark.svg?v=e2707a7a4cadb90d") no-repeat center/100% 100%;
  mask:url("img/wordmark.svg?v=e2707a7a4cadb90d") no-repeat center/100% 100%;
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1.15s var(--ease-out);
  will-change:clip-path;
}
#arrive.go #arrive-w{clip-path:inset(0 0 0 0)}

/* ------------------------------------------------------------ the track ---
   Everything here is a transform with a transition on it, and the JS writes a
   TARGET rather than a position. That distinction is the whole fix: shader
   compilation blocks the main thread for tens of milliseconds at a time, and a
   bar driven frame by frame from script simply stops dead while that happens.
   A transform the compositor is already interpolating toward keeps moving
   through the stall, which is what makes the readout feel continuous. */
#arrive-r{
  display:block;width:min(340px,64vw);height:2px;border-radius:2px;
  background:var(--hair);position:relative;
}
#arrive-r b{
  position:absolute;left:0;top:0;bottom:0;width:100%;border-radius:2px;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--hero) 30%,transparent),var(--hero) 62%,var(--hero-lit));
  box-shadow:0 0 12px 1px var(--glow-s);
  transition:transform .62s cubic-bezier(.22,.61,.36,1),box-shadow .5s var(--ease);
  will-change:transform;
}
@supports not (background: color-mix(in srgb, red, blue)){
  #arrive-r b{background:linear-gradient(90deg,rgba(255,255,255,.3),#DDE8FF 62%,#BFD9FF)}
}
/* the spark rides the head of the bar on its own transform, so the head and
   the spark are two compositor animations rather than a per frame custom
   property write that forced a style recalc on every single frame */
#arrive-r u{
  position:absolute;left:0;top:50%;width:100%;height:0;
  transform:translateX(0);
  transition:transform .62s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
#arrive-r u::after{
  content:"";position:absolute;left:0;top:0;
  width:6px;height:6px;margin:-3px 0 0 -3px;
  border-radius:50%;background:var(--hero-lit);box-shadow:0 0 14px 3px var(--glow-s);
  opacity:0;transition:opacity .4s var(--ease);
}
#arrive.go #arrive-r u::after{opacity:1}

/* the readout under the track: place on the left, count on the right, both in
   the same quiet mono as every other spec line on the site */
#arrive-meta{
  display:flex;align-items:center;justify-content:space-between;
  width:min(340px,64vw);
  opacity:0;transform:translateY(6px);
  transition:opacity .7s var(--ease) .42s,transform .7s var(--ease-out) .42s;
}
#arrive.go #arrive-meta{opacity:1;transform:none}
#arrive-s,#arrive-pct{
  font-family:var(--font-m);font-size:.54rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink-ghost);line-height:1;
}
#arrive-pct{color:var(--ink-faint);font-variant-numeric:tabular-nums;letter-spacing:.18em}

/* ignition: the frame the sequence completes on. One flash off the bar, then
   the panel leaves. */
#arrive-flare{
  position:absolute;left:50%;top:50%;width:60vmax;height:60vmax;
  transform:translate(-50%,-50%) scale(.2);border-radius:50%;
  pointer-events:none;z-index:1;opacity:0;
  background:radial-gradient(closest-side,
    color-mix(in srgb,var(--hero) 42%,transparent) 0%,
    color-mix(in srgb,var(--hero) 12%,transparent) 34%,transparent 66%);
}
#arrive.fire #arrive-flare{
  animation:arrive-flare .82s var(--ease-out) forwards;
}
@keyframes arrive-flare{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}
  26%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.5)}
}
#arrive.fire #arrive-r b{box-shadow:0 0 30px 6px var(--glow-s),0 0 70px 14px var(--glow-m)}
/* on ignition the readout locks and the name pushes up a hair, like the whole
   lockup just took the load */
#arrive.fire #arrive-in{transition:transform .8s var(--ease-out);transform:translateY(-10px)}

body.arriving{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  #arrive{display:none}
  .cov-back{animation:none}
  .cov-back{background-position:50% 50%}
  .cov-next i::after{animation:none;opacity:0}
  .claim span{opacity:1!important;transform:none!important}
  .claim-by{opacity:1;transform:none}
}

.cov-services{font-size:clamp(.8rem,1.05vw,1rem);line-height:1.5;color:#BEC2C8;margin:0 0 1.25rem;max-width:36ch}
.argue{grid-template-columns:minmax(0,1fr)}
.argue-type{min-width:0;overflow:clip}
.offer-ghost{color:rgba(255,255,255,.055)}
@media(max-width:760px){
 .cov-services{font-size:.78rem;margin-bottom:.9rem}
 .claim-hold{height:auto;min-height:60svh;padding:4rem var(--gut)}
 .claim-stick{position:relative;height:auto;min-height:0;padding:0}
 .claim-hold .claim span{opacity:1!important;transform:none!important}
 .claim-hold .claim-by{opacity:1;transform:none}
}

.spec-terms{max-width:75ch;font-size:.95rem;margin:2rem 0 0}

.cover::before{background:radial-gradient(closest-side,rgba(255,255,255,.095) 0%,rgba(255,255,255,.045) 17%,rgba(255,255,255,.015) 34%,transparent 62%)}
#arrive::before{background:radial-gradient(closest-side,rgba(255,255,255,.075),rgba(255,255,255,.025) 38%,transparent 68%)}