/* ===========================================================================
   RELENTIX — Cinematic section layer

   Loaded after the page-local styles so it can re-voice whole sections without
   rewriting the inline <style> blocks each page carries.

   The organising idea, taken from the way Morningside stages a scroll: a page
   is a sequence of statements, and only the statement you have arrived at is
   in focus. Everything approaching is dim and out of focus; it sharpens as it
   reaches the optical centre, then releases. Motion is one authored moment —
   focus — rather than a different entrance per section.

   Section labels ("eyebrows") are gone throughout. A heading that needs a
   label above it to explain what it is has not been written yet.
   =========================================================================== */

/* ---------------------------------------------------------- 0. the surfaces
   the browser draws for us, which otherwise ship in nobody's design system */
::selection{background:rgba(0,163,255,.3);color:#F8FAFC;text-shadow:none}
::-moz-selection{background:rgba(0,163,255,.3);color:#F8FAFC}
html{scrollbar-color:rgba(0,163,255,.42) #020617;scrollbar-width:thin}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:#020617}
::-webkit-scrollbar-thumb{background:rgba(0,163,255,.3);border:3px solid #020617;border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:rgba(0,163,255,.55)}
:focus-visible{outline:2px solid var(--brass,#00A3FF);outline-offset:3px;border-radius:2px}
input,textarea,select{caret-color:var(--brass,#00A3FF)}
a{text-underline-offset:.22em;text-decoration-thickness:1px}

/* --------------------------------------------------- 1. the small-text floor
   The site's secondary copy was set at 400 in a serif on a near-black canvas,
   which reads thin and washed. Everything small gains a weight step and a
   brighter ink so it lands dark and deliberate instead of faint. */
.phz-s p,.phz-out,.led p,.fa p,
.lead,.f-sub,.clients-lbl,.prv p,.val p,
.svc-cta p,.info .sub,.cstudy,.cs p{
  font-weight:500;
}
.fa p{color:#C3D1E2;font-weight:500;font-size:16.5px;line-height:1.65}
.lead{color:#B9C8DC}
.svc-cta p{color:#B9C8DC}

/* the services page's own small copy: the step detail that opens under each
   accordion row, the phase outcome, and the goal marker */
.pstep .d p,.outcome p,.phase-l p,.pkg-note,.brief-lead{font-weight:500}
.pstep .d p{color:#B9C8DC;font-size:16px;line-height:1.62}
.outcome p{color:#DCE6F2;font-size:16px;line-height:1.6}
.outcome small{font-weight:600;letter-spacing:.2em}
.phase-l p{color:#B9C8DC}
.ph-goal{font-weight:600;color:var(--brass-2,#7CCBFF)}
.pstep .t{font-weight:600}
/* the team page's studio copy and member blurbs */
.studio-band .lead,.tm-bd p,.val p,.prv p{font-weight:500;color:#B9C8DC}
.clients-lbl,.phz-n{font-weight:500}
/* brand-tokens.css scopes these as `footer .fb` etc., so match its specificity
   rather than relying on load order */
footer .f-nav a,footer .f-meta,footer .fb,footer .fb span,
footer .f-legal a,footer .f-top-link,footer .f-col h5{
  font-weight:600;
  font-size:11px;
  letter-spacing:.16em;
}
footer .f-nav a,footer .f-tag{font-size:inherit;letter-spacing:normal}
footer .f-nav a{font-size:13.5px;font-weight:500}
footer .f-tag{font-weight:500}

/* ----------------------------------------------- 2. the cinematic statement
   `--f` is the focus value (0 → 1), written per frame by cinematic.js from
   the block's distance to the optical centre of the viewport. Blur and ink
   are the only things that move; nothing reflows. */
.cine{
  --f:0;
  filter:blur(calc((1 - var(--f)) * 9px));
  opacity:calc(.08 + var(--f) * .92);
  transform:translate3d(0,calc((1 - var(--f)) * 22px),0);
  will-change:filter,opacity,transform;
}

/* a statement that owns its own viewport, centred */
.cine-stage{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  min-height:clamp(380px,62svh,620px);
  padding:clamp(40px,7vw,96px) 0;
}
.cine-stage>*{max-width:min(100%,1040px);margin-inline:auto}
/* a statement that should hold the screen alone before the next block arrives */
.cine-stage--full{min-height:clamp(560px,88svh,900px)}
.cine-stage .sec-intro{margin-bottom:0}

/* the centred section opener that replaces every removed eyebrow + left head */
.sec-intro{
  text-align:center;
  max-width:min(100%,920px);
  margin:0 auto clamp(48px,6vw,86px);
}
.sec-intro h2{
  font-size:clamp(38px,5.6vw,86px);
  line-height:.98;
  letter-spacing:-.01em;
  text-wrap:balance;
  margin:0;
}
.sec-intro p{
  margin:clamp(20px,2.4vw,30px) auto 0;
  max-width:62ch;
  font-size:clamp(16px,1.25vw,19px);
  font-weight:500;
  line-height:1.65;
  color:#B9C8DC;
  text-wrap:pretty;
}
/* the work/voices heads are left-aligned blocks in the page CSS; neutralise */
.sec-intro .work-head,.sec-intro .rv{display:block;text-align:center}

@media(prefers-reduced-motion:reduce){
  .cine{--f:1!important;filter:none;transform:none;opacity:1}
}

/* ------------------------------------------------------------ 3. trusted by
   Was an 11px grey whisper over logos at 55% opacity. The proof is the point,
   so it is set as a real line of type and the marks are given their weight. */
.clients{padding:clamp(64px,8vw,104px) 0}
.clients-lbl{
  font-family:var(--mono);
  font-size:clamp(13px,1.05vw,15px);
  font-weight:600;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:#DCE6F2;
  margin-bottom:clamp(38px,4.4vw,58px);
  display:flex;align-items:center;justify-content:center;gap:clamp(16px,2.4vw,30px);
}
/* hairlines that run out to the gutters and stop the label floating */
.clients-lbl::before,.clients-lbl::after{
  content:'';height:1px;flex:1 1 auto;max-width:clamp(40px,14vw,220px);
  background:linear-gradient(90deg,transparent,rgba(0,163,255,.5));
}
.clients-lbl::after{background:linear-gradient(90deg,rgba(0,163,255,.5),transparent)}

/* The five marks are now trimmed to their own artwork (the source files each
   carried a different amount of empty margin - the Nagare file used only 24%
   of its height - so a shared `height` used to size the FILES rather than the
   MARKS). With that gone, `--s` only has to settle the remaining difference:
   the marks range from a 2.5:1 wordmark to a 0.9:1 vertical lockup, and a
   shared height would make the tall one read far bigger than the wide one.
   `--s` part-normalises them by area instead, and drives height rather than a
   transform so the row's gaps stay honest. */
.clients-row{--logo-h:clamp(64px,7vw,104px);gap:clamp(30px,3.6vw,56px) clamp(40px,6.4vw,92px)}
.client-logo{
  height:calc(var(--logo-h) * var(--s,1));width:auto;max-width:min(250px,36vw);
  opacity:1;
  filter:brightness(1.22) contrast(1.12) drop-shadow(0 0 26px rgba(0,163,255,.2));
  transition:filter .4s var(--ease),transform .5s var(--ease);
}
.client-logo:hover{
  filter:brightness(1.4) contrast(1.18) drop-shadow(0 0 32px rgba(0,163,255,.46));
  transform:translateY(-3px);
}
@media(max-width:600px){
  .clients-row{--logo-h:52px;gap:24px 32px}
}

/* --------------------------------------------------------------- 4. ledger
   Replaces the four bordered cards. Cards were the lazy container here: four
   equal boxes of heading-plus-paragraph is the shape of having no idea which
   of the four matters. A ruled ledger says the same things with hairlines,
   and the rule above each column draws itself as the row arrives. */
.ledger{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-top:clamp(52px,6.5vw,92px);
  border-top:1px solid rgba(255,255,255,.13);
}
.led{
  position:relative;
  padding:clamp(28px,2.7vw,42px) clamp(18px,1.9vw,30px) clamp(30px,3.2vw,48px);
}
/* column separators */
.led+.led::before{
  content:'';position:absolute;left:0;top:0;bottom:clamp(14px,2vw,26px);width:1px;
  background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.015));
}
/* the rule that draws in on arrival */
.led::after{
  content:'';position:absolute;left:0;right:0;top:-1px;height:1px;
  background:linear-gradient(90deg,var(--brass,#00A3FF),rgba(0,163,255,.08));
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.05s var(--ease,cubic-bezier(.16,1,.3,1)) calc(var(--d,0) * .11s);
}
.led.in::after{transform:scaleX(1)}

/* the mark above each value: a bare line icon, alternating pink and blue to
   match the underline under its heading. No tile around it: it lights up
   (a soft glow in its own colour) when the column is hovered or focused.
   Numbers were the wrong signal: the four values carry no order. */
.led-ico{
  --c:#FF7ADB;
  display:block;width:32px;height:32px;
  margin-left:-4px;                      /* optical: the glyph sits 4px inside its box */
  color:var(--c);
  opacity:.82;
  transition:opacity .35s var(--ease),filter .45s var(--ease),transform .45s var(--ease);
}
.led:nth-child(even) .led-ico{--c:#7CCBFF}
.led-ico svg{display:block;width:100%;height:100%;overflow:visible}
.led:hover .led-ico,.led:focus-within .led-ico{
  opacity:1;
  filter:drop-shadow(0 0 5px var(--c)) drop-shadow(0 0 14px var(--c));
  transform:translateY(-1px);
}
@media (prefers-reduced-motion:reduce){.led-ico{transition:none}}
.led h3{
  margin:clamp(18px,1.9vw,26px) 0 clamp(12px,1.2vw,16px);
  font-size:clamp(17px,1.35vw,21px);
  line-height:1.2;
  letter-spacing:.015em;
  color:#F8FAFC;
}
.led p{
  margin:0;
  font-size:15px;font-weight:500;line-height:1.62;
  color:#B9C8DC;
  text-wrap:pretty;
}
.led p+p{margin-top:12px}

@media(max-width:1000px){
  .ledger{grid-template-columns:repeat(2,1fr)}
  .led:nth-child(n+3){border-top:1px solid rgba(255,255,255,.13)}
  .led:nth-child(odd)+.led::before{top:0}
  .led:nth-child(3)::before{display:none}
}
@media(max-width:620px){
  .ledger{grid-template-columns:1fr}
  .led{padding-inline:0}
  .led+.led{border-top:1px solid rgba(255,255,255,.13)}
  .led+.led::before{display:none}
}

/* ------------------------------------------------- 5. the phase route
   Was three rounded cards pinning over each other. Cards were the wrong
   container: three boxes sliding past one another is a motion trick, and it
   buried twelve real steps inside decoration. The route is now an index and a
   ledger — where you are on the left, what happens there on the right — ruled
   with the same hairlines as the ledger above it.

   cinematic.js writes `--p` (0 → 1 across the whole route) and toggles `.on`
   on the active index entry. On a phone the index collapses to three ticks and
   each step crosses the screen right to left as it passes.                  */
.phz{
  --pin:clamp(96px,12vh,132px);
  --p:0;
  position:relative;
  margin-top:clamp(8px,2vw,24px);
}

.phz-grid{
  display:grid;
  grid-template-columns:clamp(212px,23vw,296px) 1fr;
  gap:clamp(28px,5vw,80px);
  align-items:start;
}

/* ---- the index ---- */
.phz-idx{
  position:sticky;top:calc(var(--pin) + clamp(34px,5vh,56px));
  display:flex;flex-direction:column;
  padding-left:20px;
}
.phz-idx-rule{position:absolute;left:0;top:10px;bottom:10px;width:1px;background:rgba(255,255,255,.13)}
.phz-idx-rule>span{
  position:absolute;inset:0;transform-origin:top;
  transform:scaleY(var(--p));
  background:linear-gradient(180deg,var(--brass,#00A3FF),var(--brass-2,#7CCBFF));
}
/* The inactive entries are dimmed with colour rather than opacity. Fading the
   whole item to .36 over this near-black ground measured 2.62:1 — these are
   navigation labels, so they have to stay readable when they are not the one
   you are reading. Colour alone gives 7.7:1 inactive against 19.3:1 active,
   which still reads as clearly secondary. */
.phz-i{
  display:block;padding:13px 0;
  transition:color .5s var(--ease);
}
.phz-i b{
  display:block;
  font-size:clamp(16px,1.3vw,19px);font-weight:600;letter-spacing:.005em;
  color:#8FA2BA;
  transition:color .5s var(--ease);
}
.phz-i:hover b{color:#CFDCEA}
.phz-i.on b{color:#F8FAFC}

/* ---- the ledger ---- */
.phz-p{
  padding-bottom:clamp(74px,14vh,170px);
  scroll-margin-top:calc(var(--pin) + 64px);
}
.phz-p:last-child{padding-bottom:0}
.phz-h{margin-bottom:clamp(24px,3vw,42px)}
.phz-h h3{
  margin:0;
  font-size:clamp(34px,4.6vw,68px);line-height:.98;letter-spacing:-.035em;
  color:#F8FAFC;
}
.phz-h h3 em{
  font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em;
  background:linear-gradient(100deg,var(--brass-2,#7CCBFF),var(--brass,#00A3FF) 60%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.phz-out{
  display:flex;align-items:flex-start;gap:12px;
  margin:clamp(16px,1.8vw,24px) 0 0;max-width:58ch;
  font-size:15.5px;font-weight:500;line-height:1.6;color:#B9C8DC;text-wrap:pretty;
}
.phz-out svg{flex:0 0 auto;width:15px;height:15px;margin-top:5px;color:var(--brass-2,#7CCBFF)}

.phz-steps{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.13)}
.phz-s{
  display:grid;grid-template-columns:auto 1fr;
  gap:clamp(14px,1.8vw,28px);
  padding:clamp(20px,2.2vw,30px) 0;
  border-bottom:1px solid rgba(255,255,255,.13);
}
.phz-n{
  padding-top:4px;
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.22em;
  color:rgba(124,203,255,.72);
}
.phz-s b{
  display:block;
  font-size:clamp(16px,1.3vw,19px);font-weight:600;letter-spacing:.01em;
  color:#F8FAFC;
}
.phz-s p{
  margin:8px 0 0;max-width:60ch;
  font-size:15px;font-weight:500;line-height:1.62;color:#B9C8DC;text-wrap:pretty;
}

/* ---- phone: the index becomes three ticks, the steps cross the screen ---- */
@media(max-width:899px){
  .phz-grid{grid-template-columns:1fr;gap:0}
  /* The strip is sticky, so the step it covers scrolls underneath it. A
     top-to-transparent gradient left the labels sitting over bare text; the
     glass treatment the nav already uses works against the section's radial
     ground without banding, and the tail fades the edge instead of cutting
     the covered line in half. */
  .phz-idx{
    position:sticky;top:var(--pin);z-index:5;
    flex-direction:row;align-items:flex-start;gap:10px;
    padding:14px 0;margin-bottom:24px;
    background:rgba(2,6,23,.84);
    backdrop-filter:blur(14px) saturate(140%);
    -webkit-backdrop-filter:blur(14px) saturate(140%);
  }
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .phz-idx{background:#030a1c}
  }
  .phz-idx::after{
    content:'';position:absolute;left:0;right:0;top:100%;height:22px;
    background:linear-gradient(180deg,rgba(2,6,23,.84),transparent);
    pointer-events:none;
  }
  .phz-idx-rule{display:none}
  .phz-i{flex:1 1 0;min-width:0;padding:0}
  .phz-i::before{
    content:'';display:block;height:2px;margin-bottom:10px;
    background:rgba(255,255,255,.15);
    transition:background .45s var(--ease);
  }
  .phz-i.on::before{background:var(--brass,#00A3FF)}
  .phz-i b{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* `--sx` / `--so` are written per frame by cinematic.js from the row's
     distance to the centre of the viewport, so a step arrives from the right
     and leaves to the left without any horizontal scrolling. */
  .phz-s{
    --sx:0px;--so:1;
    transform:translate3d(var(--sx),0,0);
    opacity:var(--so);
    will-change:transform,opacity;
  }
  .phz-h h3{font-size:clamp(32px,8.4vw,46px)}
}

@media(prefers-reduced-motion:reduce){
  .phz-idx-rule>span{transform:none}
  .phz-s{transform:none;opacity:1}
}

/* ------------------------------------------------------------------ 6. FAQ
   The decorative outline numeral sat under the toggle and collided with it
   (see the stacked 01–06 reading through the plus). The row is now an honest
   three-column grid — index, question, toggle — so nothing overlaps and the
   numbers line up down the left edge. */
.fq-num{display:none}
.fq button{
  display:flex;
  align-items:flex-start;
  gap:clamp(12px,1.6vw,22px);
  padding:clamp(22px,2.4vw,30px) clamp(20px,2.4vw,30px);
}
/* the label span holds `<i>01</i>` then the question text: rule them into two
   columns so every index lines up down the left edge and long questions wrap
   against a single consistent margin instead of around the number */
.fq button>span:not(.pl){
  flex:1 1 auto;min-width:0;
  display:grid;
  grid-template-columns:clamp(34px,3.6vw,50px) 1fr;
  gap:clamp(10px,1.2vw,18px);
  align-items:start;
}
.fq button i{
  margin:0;
  font-family:var(--mono);font-style:normal;
  font-size:12px;font-weight:500;letter-spacing:.14em;
  color:rgba(124,203,255,.72);
  padding-top:.42em;
  transition:color .35s var(--ease);
}
.fq.on button i{color:var(--brass,#00A3FF)}
.fq .pl{flex:0 0 auto;align-self:flex-start;margin-top:.1em}
/* the answer lines up with the question, not with the number */
.fa p{padding-left:calc(clamp(20px,2.4vw,30px) + clamp(34px,3.6vw,50px) + clamp(10px,1.2vw,18px))}
@media(max-width:620px){.fa p{padding-left:clamp(20px,2.4vw,30px)}}

/* ----------------------------------------------------------- 7. testimonials
   Two voices, ruled like the ledger rather than boxed, with the sentence that
   actually carries the endorsement picked out. One system, used twice. */
.voices{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:0;
  margin-top:clamp(52px,6.5vw,92px);
  border-top:1px solid rgba(255,255,255,.13);
}
.voice{
  position:relative;
  margin:0;
  padding:clamp(34px,3.4vw,54px) clamp(22px,2.6vw,44px) clamp(34px,3.4vw,52px);
  display:flex;flex-direction:column;gap:clamp(24px,2.6vw,38px);
}
.voice+.voice::before{
  content:'';position:absolute;left:0;top:0;bottom:clamp(16px,2vw,30px);width:1px;
  background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.015));
}
.voice::after{
  content:'';position:absolute;left:0;right:0;top:-1px;height:1px;
  background:linear-gradient(90deg,var(--brass,#00A3FF),rgba(0,163,255,.08));
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.05s var(--ease,cubic-bezier(.16,1,.3,1)) calc(var(--d,0) * .13s);
}
.voice.in::after{transform:scaleX(1)}

.voice blockquote{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(21px,2.05vw,30px);
  font-weight:400;
  line-height:1.32;
  letter-spacing:-.005em;
  color:#CFDCEA;
  text-wrap:pretty;
}
/* the claim worth remembering */
.voice blockquote mark{
  background:none;
  color:#FFFFFF;
  font-weight:600;
  box-shadow:inset 0 -.08em 0 rgba(0,163,255,.5);
}
.voice figcaption{
  display:flex;flex-direction:column;gap:5px;
  margin-top:auto;padding-top:clamp(18px,2vw,26px);
  border-top:1px solid rgba(255,255,255,.1);
}
/* Name, then the business they are from. */
.voice figcaption b{font-size:15px;font-weight:600;letter-spacing:.01em;color:#F8FAFC}
.voice figcaption span{
  font-family:var(--mono);
  font-size:10.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:#9FB0C6;
}
@media(max-width:820px){
  .voices{grid-template-columns:1fr}
  .voice{padding-inline:0}
  .voice+.voice{border-top:1px solid rgba(255,255,255,.13)}
  .voice+.voice::before{display:none}
}

/* --------------------------------------------- 8. inner-page cinematic hero
   services.html and team.html opened with a breadcrumb and a bottom-left
   headline. Centred, with the headline arriving out of focus, they open the
   same way the home page does. */
.page-hero{
  align-items:center;
  text-align:center;
  min-height:clamp(440px,74svh,760px);
  padding:clamp(150px,20vh,220px) 0 clamp(60px,9vh,110px);
}
.page-hero .wrap{display:flex;flex-direction:column;align-items:center}
.page-hero h1{
  max-width:min(100%,16ch);
  margin-inline:auto;
  text-wrap:balance;
}
.page-hero .lead{
  max-width:60ch;margin-inline:auto;
  font-weight:500;color:#B9C8DC;
}
/* a quiet rule under the headline instead of the breadcrumb above it */
.page-hero h1::after{
  content:'';display:block;
  width:clamp(56px,7vw,104px);height:1px;
  margin:clamp(30px,3.6vw,48px) auto 0;
  background:linear-gradient(90deg,transparent,var(--brass,#00A3FF),transparent);
}

/* ------------------------------------------------------- 9. footer approach
   The service page ran out with a large dead gap before the footer because
   the closing band kept the generic section padding. The band now closes the
   page tight against the footer. */
.cta-band{padding-bottom:clamp(60px,7vw,96px)}
.cta-band+footer,main+footer{margin-top:0}
main>section:last-child{padding-bottom:clamp(64px,7.5vw,104px)}

/* ------------------------------------------------------- 10. the brief split
   The contact page ran as one 760px sheet with the studio's actual contact
   details stacked in a five-cell strip *underneath* the form — the fastest
   routes to a human sat below the longest thing on the page.

   Split: the left rail carries the headline, what happens after you submit,
   and every direct route (mail, phone, Instagram, where we are and what time
   it is here). The right column is the form, unchanged. The rail is sticky,
   so the reassurance stays on screen for the whole length of the form. */
.brief-split{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(40px,5.5vw,96px);
  align-items:start;
  max-width:1180px;margin:0 auto;
}

/* `.brief-doc` clips with overflow:hidden, which makes it a scrolling box and
   therefore the rail's sticky scrollport — the rail got pinned at its offset
   immediately and never tracked the page. `overflow:clip` clips identically
   without creating a scroll container, so sticky resolves against the page
   again. (Dropped entirely by old engines, where nothing overflows anyway:
   the decorative grid layer is absolute at inset:0.) */
.brief-doc{overflow:clip}

.brief-rail{position:sticky;top:clamp(104px,13vh,140px);display:flex;flex-direction:column}
.brief-rail .brief-h1{text-align:left;margin:0}
.brief-rail .brief-lead{
  margin:clamp(18px,2vw,26px) 0 0;max-width:34ch;
  font-weight:500;color:#B9C8DC;
}

/* what happens next — ruled, not boxed */
.rail-steps{
  list-style:none;margin:clamp(34px,4vw,52px) 0 0;padding:0;
  border-top:1px solid rgba(255,255,255,.13);
}
.rail-steps li{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(12px,1.4vw,20px);
  padding:clamp(16px,1.8vw,22px) 0;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.rail-n{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.2em;
  color:rgba(124,203,255,.82);padding-top:.25em;
}
.rail-steps b{
  display:block;font-size:15.5px;font-weight:600;letter-spacing:.01em;
  color:#F8FAFC;margin-bottom:5px;
}
.rail-steps p{margin:0;font-size:14.5px;font-weight:500;line-height:1.55;color:#B9C8DC}

/* the direct routes */
.rail-direct{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:clamp(28px,3.2vw,40px)}
.rail-lbl{
  margin:0 0 2px;font-family:var(--mono);
  font-size:10px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  color:#8FA2BA;
}
.rail-mail{
  font-family:var(--mono);font-size:clamp(14px,1.2vw,16.5px);font-weight:500;
  letter-spacing:.01em;color:#F8FAFC;
  border-bottom:1px solid rgba(0,163,255,.45);padding-bottom:2px;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.rail-mail:hover{color:var(--brass-2);border-color:var(--brass-2)}
.rail-tels{display:flex;flex-wrap:wrap;gap:6px 18px}
.rail-tels a{
  font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.02em;
  color:#B9C8DC;transition:color .3s var(--ease);
}
.rail-tels a:hover{color:#fff}

.rail-ig{
  display:inline-flex;align-items:center;gap:9px;
  margin-top:2px;padding:9px 15px 9px 12px;
  border:1px solid rgba(255,255,255,.16);
  font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.06em;
  color:#E2E8F0;
  transition:border-color .35s var(--ease),color .35s var(--ease),background-color .35s var(--ease);
}
.rail-ig svg{width:16px;height:16px;flex:0 0 auto}
.rail-ig:hover{border-color:rgba(0,163,255,.6);color:#fff;background:rgba(0,163,255,.08)}
.rail-place{
  margin:6px 0 0;font-family:var(--mono);
  font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:#8FA2BA;
}

/* the sheet keeps its document identity, now sized by the grid column */
.brief-sheet{max-width:none;margin:0}

/* the status strip that replaces the five-cell block */
.brief-status{
  position:relative;overflow:hidden;
  display:flex;align-items:baseline;gap:12px;
  margin-top:30px;padding:15px 0 16px;
  border-top:2px solid var(--ink);
}
.brief-status span{
  font-family:var(--mono);font-size:10px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:#8FA2BA;
}
.brief-status b{
  margin-left:auto;font-family:var(--mono);font-size:12px;font-weight:600;
  letter-spacing:.08em;color:#F8FAFC;
}
.brief-status .tb-bar{
  position:absolute;left:0;bottom:0;height:2px;width:0;
  background:linear-gradient(90deg,var(--brass),var(--brass-2));
  transition:width .5s var(--ease);
}

@media(max-width:1000px){
  .brief-split{grid-template-columns:1fr;gap:clamp(36px,6vw,56px)}
  .brief-rail{position:static}
  .brief-rail .brief-lead{max-width:60ch}
}

/* ------------------------------------------- 11. the handle, site-wide ---- */
.f-social{display:inline-flex;align-items:center;gap:8px;color:#CBD5E1;font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.08em;transition:color .3s var(--ease)}
.f-social svg{width:15px;height:15px;flex:0 0 auto}
.f-social:hover{color:var(--brass-2)}

/* --------------------------------------------------------------- 12. motion */
.rv{transition-timing-function:var(--ease,cubic-bezier(.16,1,.3,1))}

/* the testimonials intro: the two words that carry the claim read a step heavier */
.sec-intro p strong{font-weight:700;color:#F8FAFC}

/* ------------------------------------------------------------ 11. phone pass
   Phone-only refinements from a real-device review. The desktop composition
   is untouched; everything here sits behind a width query. */
@media(max-width:899px){
  /* the home route's index strip: it covers everything above it up to the
     top of the screen (the nav hides on the way down, so a gap there let the
     page show through above the strip), fades rows as they pass under it,
     and leaves by fading once the route ends (`--bo`, cinematic.js). */
  /* a spread shadow paints the strip full-bleed and up to the top edge
     without widening the box (no sideways scroll); the clip keeps it from
     spilling downward over the rows */
  .phz-idx{
    opacity:var(--bo,1);transition:opacity .2s linear;
    background:rgba(2,6,23,.92);
    box-shadow:0 0 0 100vmax rgba(2,6,23,.92);
    clip-path:inset(calc(-1 * var(--pin) - 8px) -100vmax 0 -100vmax);
  }
  .phz-idx::after{display:none}
  .phz-h{opacity:var(--fo,1)}

  /* statements: a softer focus pull on a phone — 9px of blur over a whole
     heading is the most expensive thing a phone can be asked to draw, and it
     read as a smear in passing */
  .cine{filter:blur(calc((1 - var(--f)) * 3px))}
}

@media(max-width:900px){
  /* inner-page hero: owns the whole first screen and melts into the page
     instead of ending in a hard band above the phase bar */
  .page-hero{
    min-height:100svh;
    padding:clamp(110px,16vh,150px) 0 clamp(120px,18vh,160px);
    background:
      radial-gradient(60% 45% at 85% 12%,rgba(0,163,255,.26),transparent 70%),
      radial-gradient(55% 40% at 0% 88%,rgba(171,0,162,.18),transparent 72%);
  }
  .page-hero::after{display:none}
  .page-hero::before{
    -webkit-mask-image:radial-gradient(90% 70% at 50% 40%,#000,transparent);
    mask-image:radial-gradient(90% 70% at 50% 40%,#000,transparent);
  }
  /* the phase bar rides on the hero's last screen line, not in a band below */
  .phase-nav{margin-top:calc(-1 * clamp(84px,12vh,112px));margin-bottom:clamp(40px,6vh,64px)}

  /* step numbers on the first line of their title, and the description
     under the title rather than under the number */
  .pstep button .n{align-self:baseline}
  .pstep .d p{padding-left:54px}

  /* closing band: no box. It takes the screen and its light comes from
     inside, so there is no edge where the band starts */
  .cta-band{
    min-height:100svh;display:flex;align-items:center;
    background:
      radial-gradient(70% 45% at 50% 42%,rgba(0,163,255,.26),transparent 72%),
      radial-gradient(50% 40% at 8% 88%,rgba(171,0,162,.16),transparent 72%);
  }
  .cta-band>.wrap{width:100%}
}

/* ------------------------------------------------- 12. the package question
   Home only. The two boxed buttons became one centred line of type: two
   destinations either side of a hairline. Each carries an ink underline that
   draws on hover/press (blue for browsing, pink for the quote), so it reads
   as part of the type system rather than as another pair of buttons. */
/* Computers keep the original row: the line on the left, the two boxed
   buttons on the right. The type pair below is the phone version only. */
.pair-desk{display:flex;gap:12px;flex-wrap:wrap}
@media(min-width:641px){.svc-cta--pair .pair{display:none}}
@media(max-width:640px){
  .svc-cta--pair .pair-desk{display:none}
  .svc-cta--pair{flex-direction:column;justify-content:center;text-align:center;gap:clamp(20px,3vw,28px)}
  .svc-cta--pair p{margin:0;font-size:clamp(18px,1.6vw,21px)}
}
.pair{display:flex;align-items:center;justify-content:center;gap:clamp(16px,3.4vw,40px);flex-wrap:nowrap}
.pair-rule{flex:0 0 auto;width:1px;height:22px;background:rgba(255,255,255,.22)}
.pair-l{
  position:relative;display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  min-height:44px;padding:0 2px;
  font-family:var(--disp,'Saira Condensed',sans-serif);font-weight:600;
  font-size:clamp(17px,1.5vw,20px);letter-spacing:.05em;text-transform:uppercase;
  color:#E2E8F0;-webkit-tap-highlight-color:transparent;
  transition:color .35s var(--ease,cubic-bezier(.16,1,.3,1));
}
.pair-l svg{width:17px;height:17px;flex:0 0 auto;color:var(--brass,#00A3FF);transition:transform .45s var(--ease,cubic-bezier(.16,1,.3,1))}
.pair-l::after{
  content:'';position:absolute;left:2px;right:26px;bottom:6px;height:2px;
  background:var(--brass,#00A3FF);
  transform:scaleX(.18);transform-origin:left;
  transition:transform .55s var(--ease,cubic-bezier(.16,1,.3,1));
}
.pair-l--go{color:#fff}
.pair-l--go svg{color:var(--ink-pink,#FFABEE)}
.pair-l--go::after{background:var(--ink-pink,#FFABEE);transform:scaleX(1)}
.pair-l:hover,.pair-l:focus-visible{color:#fff}
.pair-l:hover::after,.pair-l:focus-visible::after,.pair-l:active::after{transform:scaleX(1)}
.pair-l:hover svg,.pair-l:focus-visible svg{transform:translateX(4px)}
.pair-l:active{transform:translateY(1px)}
.pair-l:focus-visible{outline:2px solid var(--brass-2,#7CCBFF);outline-offset:6px;border-radius:2px}
@media(max-width:420px){
  .pair{gap:14px}
  .pair-l{font-size:15.5px;letter-spacing:.03em;gap:6px}
  .pair-l svg{width:15px;height:15px}
  .pair-l::after{right:21px}
}
@media(prefers-reduced-motion:reduce){.pair-l,.pair-l::after,.pair-l svg{transition:none}}

/* --------------------------------------------- 13. services phase head, phone
   The outlined numeral read as cut off on a phone (its gradient fades into
   the ground) and crowded the goal beside it. The phase bar above already
   says which of the three you are in, so the numeral steps aside on a phone
   and the goal becomes a plain sentence under the heading. */
@media(max-width:900px){
  .phase-l{display:flex;flex-direction:column}
  .phase-l .ph-num{display:none}
  .phase-l h2{order:1;margin:0 0 clamp(14px,3.4vw,20px)}
  .phase-l .ph-goal{order:2}
  .phase-l .ph-goal{
    display:block;margin:0 0 4px;
    font-family:var(--serif,'EB Garamond',serif);font-size:clamp(19px,5vw,22px);font-weight:500;
    line-height:1.4;letter-spacing:0;text-transform:none;color:#B9C8DC;
  }
  .phase-l .ph-goal b{font-weight:600;color:#F8FAFC}
}

/* ------------------------------------------------------- 14. phone fixes, round 3 */
@media(max-width:899px){
  /* Nothing may widen the page. The route's steps crossed in from 42px to
     the right, past the screen edge, so the document was wider than the
     phone and a swipe back up could pan the whole page sideways. The steps
     now travel inside the 20px gutter (cinematic.js), and the page itself
     is clipped as a safety net. */
  html,body{overflow-x:clip}

  /* The strip sits right under the bar, or at the very top while the bar is
     hidden on the way down, instead of floating ~120px down the screen. */
  .phz{--stick:68px}
  html:has(#nav.nav-hide) .phz{--stick:6px}
  .phz-idx{
    top:var(--stick);
    clip-path:inset(calc(-1 * var(--stick) - 8px) -100vmax 0 -100vmax);
    transition:opacity .2s linear,top .45s var(--ease,cubic-bezier(.16,1,.3,1));
  }
}
@media(max-width:640px){
  /* team / services closing band: the buttons keep their own size; the
     column is as wide as the longer label, so both line up, centred */
  .cta-band .row{display:grid;grid-template-columns:max-content;justify-content:center;gap:12px}
  .cta-band .row .btn{justify-content:center}
}