/* ============================================================
   FONTS (embedded, offline-safe)
   Display / UI  : Inter Tight 400 / 500
   Italic accent : Instrument Serif Italic
   Statements    : Instrument Serif Regular (Google Fonts)
   ============================================================ */





/* ============================================================
   SCALE SYSTEM
   Reference artboard: 1280 x 853.
   --u is the value of one reference pixel at the current viewport.
   Every measurement below is written in reference pixels.
   ============================================================ */
:root{
  --u: min(100vw / 1280, 100vh / 853);
  --ink:#000;
  --ink-ui:#111114;
  --ink-body:#0a0a0a;
  --navy:#0f1b2d;
  --orange:#f74407;
  --glass-blue: rgba(200,219,248,.62);
  --glass-white: rgba(255,255,255,.95);
  --serif:'Instrument Serif','Instrument Serif',Georgia,'Times New Roman',serif;
}
@supports (height:100dvh){ :root{ --u: min(100vw / 1280, 100dvh / 853); } }

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:#e9ebf1;
  font-family:'Inter Tight',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* ---------- scroll-scrubbed scene ----------
   One fixed layer behind every section. The poster is the hero
   photograph (paints instantly); the video fades in over it once
   its first frame is decoded, then scroll position drives its
   currentTime. The layer itself never moves.                    */
.scene{
  position:fixed; inset:0; z-index:0;
  overflow:hidden; background:#e9ebf1;
  pointer-events:none;
}
.scene-media{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:50% 50%;
  display:block; user-select:none; -webkit-user-drag:none;
}
.scene-video{opacity:0; transition:opacity .7s ease}
.scene.is-ready .scene-video{opacity:1}
/* portrait only: a pale scrim the scrub loop fades up after the hero,
   because on a narrow crop the glass sits directly behind the copy */
.scene-veil{position:absolute; inset:0; background:#eef1f7; opacity:0}

/* ---------- stage (hero) ---------- */
.stage{
  position:relative;   /* no z-index: the fixed header inside must stack above later sections */
  width:100%; height:100vh; height:100svh;
  overflow:hidden;
}

/* ---------- header ----------
   Fixed on the artboard layout so it stays with the reader
   through every section; its children keep their artboard
   coordinates because the bar spans the full viewport width. */
.topbar{position:fixed; left:0; top:0; width:100%; height:0; z-index:20}

.brand{
  position:absolute;
  left:calc(95 * var(--u));
  top:calc(33.5 * var(--u));
  display:flex; align-items:center;
  gap:calc(7.5 * var(--u));
  text-decoration:none;
}
.mark{ width:calc(39 * var(--u)); height:calc(39 * var(--u)); display:block; }
.brand b{
  font-weight:500;
  font-size:calc(22.6 * var(--u));
  letter-spacing:-.045em;
  line-height:calc(39 * var(--u));
  color:var(--ink);
  display:block;
  transform:translateY(calc(-.8 * var(--u)));
}

.nav{
  position:absolute;
  left:50%; transform:translateX(-50%);
  top:calc(44 * var(--u));
  display:flex; align-items:center;
  gap:calc(30.6 * var(--u));
  white-space:nowrap;
}
.nav a{
  font-size:calc(15.07 * var(--u));
  font-weight:500;
  letter-spacing:-.033em;
  line-height:calc(20 * var(--u));
  color:var(--ink-ui);
  text-decoration:none;
  transition:opacity .25s ease;
}
.nav a:hover{opacity:.55}

.head-cta{
  position:absolute;
  right:calc(66 * var(--u));
  top:calc(33.5 * var(--u));
  display:flex; align-items:center;
  gap:calc(8 * var(--u));
}
.pill{
  width:calc(132 * var(--u));
  height:calc(39 * var(--u));
  border-radius:calc(6 * var(--u));
  background:var(--glass-white);
  -webkit-backdrop-filter:blur(calc(10 * var(--u)));
  backdrop-filter:blur(calc(10 * var(--u)));
  display:flex; align-items:center; justify-content:center;
  font-size:calc(15.07 * var(--u));
  font-weight:500;
  letter-spacing:-.03em;
  color:var(--ink-ui);
  text-decoration:none;
  border:0;
  transition:transform .3s cubic-bezier(.2,.7,.3,1), background .3s ease;
}
.pill:hover{transform:translateY(calc(-1 * var(--u)));background:#fff}
.square{
  position:relative;                    /* containing block for its own hit area */
  width:calc(19 * var(--u));
  height:calc(19 * var(--u));
  border-radius:calc(5 * var(--u));
  background:#0a0a0a;
  display:flex; align-items:center; justify-content:center;
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.square:hover{transform:rotate(45deg)}
.square svg{width:calc(9.5 * var(--u));height:calc(9.5 * var(--u));display:block}
/* expanded touch target, no visual change. The left edge stops half-way
   across the 8u gap so it never steals taps from the pill beside it. */
.square::after{
  content:"";position:absolute;border-radius:inherit;
  top:calc(-11 * var(--u)); right:calc(-11 * var(--u));
  bottom:calc(-11 * var(--u)); left:calc(-4 * var(--u));
}

/* --- collapsed navigation. Inert until a breakpoint enables it. --- */
/* the wrapper has no box on desktop, so nav + CTA position exactly as before */
.bar-menu{display:contents}

.burger{
  display:none; position:relative;
  width:calc(39 * var(--u)); height:calc(39 * var(--u));
  border:0; padding:0; cursor:pointer;
  border-radius:calc(6 * var(--u));
  background:var(--glass-white);
  -webkit-backdrop-filter:blur(calc(10 * var(--u)));
  backdrop-filter:blur(calc(10 * var(--u)));
  flex-direction:column; align-items:center; justify-content:center;
  gap:calc(5 * var(--u));
  transition:transform .3s cubic-bezier(.2,.7,.3,1), background .3s ease;
}
.burger span{
  display:block; width:calc(16 * var(--u)); height:calc(1.6 * var(--u));
  background:var(--ink-ui); border-radius:1px;
  transition:transform .28s cubic-bezier(.23,1,.32,1), opacity .2s ease;
}
.burger[aria-expanded="true"] span:first-child{transform:translateY(calc(3.3 * var(--u))) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(calc(-3.3 * var(--u))) rotate(-45deg)}


/* ---------- headline ----------
   Two lines, each positioned on its measured baseline so the
   ink lands exactly where the reference has it.                */
h1{
  position:absolute;
  left:0; right:0;
  top:calc(112 * var(--u));
  margin:0;
  font-family:'Inter Tight','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:400;
  font-size:calc(56.44 * var(--u));
  line-height:calc(60 * var(--u));
  color:var(--ink);
  text-align:center;
}
h1 .l1,h1 .l2,h1 .rv{display:inline-block}
h1 .l1{letter-spacing:-.0425em}
h1 .l2{letter-spacing:-.064em;transform:translateX(calc(3.5 * var(--u)))}
h1 i{
  font-family:'Instrument Serif',Georgia,serif;
  line-height:0;
  font-weight:400;
  font-style:italic;
  letter-spacing:0;
}
h1 .i1{font-size:calc(58.95 * var(--u))}
h1 .i2{font-size:calc(59.2 * var(--u))}

/* ---------- hero buttons ---------- */
.actions{
  position:absolute;
  left:50%; transform:translateX(calc(-50% + .5 * var(--u)));
  top:calc(264.5 * var(--u));
  display:flex; align-items:flex-start;
  gap:calc(11 * var(--u));
  white-space:nowrap;
}
.btn{
  height:calc(40 * var(--u));
  border-radius:calc(6 * var(--u));
  display:flex; align-items:center;
  font-size:calc(15.07 * var(--u));
  font-weight:500;
  text-decoration:none;
  border:0;
  transition:transform .3s cubic-bezier(.2,.7,.3,1), filter .3s ease, background .3s ease;
}
.btn:hover{transform:translateY(calc(-1.5 * var(--u)))}
.btn-primary{
  width:calc(146 * var(--u));
  background:var(--orange);
  color:#fff;
  letter-spacing:-.03em;
  padding-left:calc(21 * var(--u));
  gap:calc(10 * var(--u));
}
.btn-primary:hover{filter:saturate(1.08) brightness(1.04)}
.dot{
  width:calc(18 * var(--u));
  height:calc(18 * var(--u));
  border-radius:50%;
  background:#fff;
  display:flex; align-items:center; justify-content:center;
  flex:none;
}
.dot svg{width:calc(9 * var(--u));height:calc(9 * var(--u));display:block}
.btn-ghost{
  width:calc(120 * var(--u));
  justify-content:center;
  background:var(--glass-blue);
  -webkit-backdrop-filter:blur(calc(8 * var(--u)));
  backdrop-filter:blur(calc(8 * var(--u)));
  color:var(--ink-ui);
  letter-spacing:-.015em;
}
.btn-ghost:hover{background:rgba(210,226,252,.8)}

/* ---------- bottom copy ---------- */
.lede{
  position:absolute;
  right:calc(169 * var(--u));
  bottom:calc(45.5 * var(--u));
  width:calc(276 * var(--u));
  font-size:calc(16.5 * var(--u));
  font-weight:500;
  line-height:calc(21.2 * var(--u));
  letter-spacing:.01em;
  color:var(--ink-body);
}
.scroll{
  position:absolute;
  left:calc(80.5 * var(--u));
  bottom:calc(47.5 * var(--u));
  display:flex; align-items:center;
  gap:calc(8 * var(--u));
  text-decoration:none;
  color:var(--ink-ui);
}
.scroll svg{width:calc(13.5 * var(--u));height:calc(13.5 * var(--u));display:block;flex:none}
.scroll span{
  font-size:calc(13.7 * var(--u));
  font-weight:500;
  letter-spacing:.023em;
  line-height:calc(14 * var(--u));
  transform:translateY(calc(.5 * var(--u)));
}

/* ============================================================
   SECTION 2 — OUR AGENCY
   Eyebrow, hairline, then one statement set large in a condensed
   serif. The left of the frame is quiet studio white while the
   glass tower stands on the right, so the copy owns the left.
   ============================================================ */
.eyebrow{
  display:block;
  font-family:'Inter Tight',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  font-weight:500;
  font-size:calc(11.6 * var(--u));
  line-height:calc(14 * var(--u));
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--ink-ui);
}
.agency{
  position:relative; z-index:1;
  min-height:100vh; min-height:100svh;
  padding:calc(256 * var(--u)) calc(95 * var(--u)) calc(120 * var(--u)) calc(218 * var(--u));
}
.agency .rule{
  display:block;
  width:calc(543 * var(--u));
  height:1px;
  margin-top:calc(22 * var(--u));
  background:rgba(17,17,20,.13);
  transform-origin:0 50%;
}
.statement{
  width:calc(543 * var(--u));
  margin-top:calc(52 * var(--u));
  font-family:var(--serif);
  font-weight:400;
  font-size:calc(55 * var(--u));
  line-height:calc(51.5 * var(--u));
  letter-spacing:-.018em;
  color:var(--ink);
}

/* ============================================================
   SECTION 3 — CLIENTS
   Two halves. The left holds the claim and the CTA and stays
   pinned while the right half — copy plus a staggered two-column
   stack of glass logo cards — scrolls past it.
   ============================================================ */
.clients{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  padding:0 calc(95 * var(--u)) calc(150 * var(--u)) calc(91 * var(--u));
}
.clients-lead{
  position:sticky; top:0;
  height:100vh; height:100svh;
  align-self:start;
  padding-top:calc(248 * var(--u));
}
.clients h2{
  margin-top:calc(34 * var(--u));
  font-family:var(--serif);
  font-weight:400;
  font-size:calc(61 * var(--u));
  line-height:calc(57 * var(--u));
  letter-spacing:-.015em;
  color:var(--ink);
}
.clients h2 i{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.01em}
.clients .eyebrow{letter-spacing:.28em}
.clients .btn-primary{
  width:auto; margin-top:calc(40 * var(--u));
  height:calc(44 * var(--u));
  padding:0 calc(12 * var(--u)) 0 calc(22 * var(--u));
  display:inline-flex;
  font-size:calc(15.5 * var(--u));
}
.clients .btn-primary .dot{width:calc(20 * var(--u));height:calc(20 * var(--u))}

.clients-body{padding-top:calc(251 * var(--u))}
.clients-copy{
  max-width:calc(680 * var(--u));
  font-size:calc(15.4 * var(--u));
  font-weight:400;
  line-height:calc(18.8 * var(--u));
  letter-spacing:-.012em;
  color:var(--ink-body);
}
.logo-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:calc(36 * var(--u));
  margin-top:calc(40 * var(--u));
}
.logo-col{display:flex; flex-direction:column; gap:calc(21 * var(--u))}
.logo-col + .logo-col{margin-top:calc(157 * var(--u))}

.card{
  --lift:0px;
  position:relative;
  height:calc(212 * var(--u));
  border-radius:calc(10 * var(--u));
  background:rgba(255,255,255,.58);
  -webkit-backdrop-filter:blur(calc(16 * var(--u))) saturate(1.15);
  backdrop-filter:blur(calc(16 * var(--u))) saturate(1.15);
  border:1px solid rgba(214,224,240,.9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
  display:flex; align-items:center; justify-content:center;
  font-size:calc(16 * var(--u));
  color:var(--navy);
  transition:transform .5s cubic-bezier(.2,.7,.3,1), background .4s ease;
}
.card:hover{transform:translateY(calc(-3 * var(--u))); background:rgba(255,255,255,.78)}
.card svg{display:block; height:auto}

/* ============================================================
   ENTRANCE SEQUENCE — plays once, then removes itself entirely.

   Motion language (4 behaviours, no more):
     A  MASKED LINE RISE  headline lines, from behind a clip edge
     B  QUIET LIFT        brand, nav, header CTA, body copy, scroll cue
     C  SETTLE            hero buttons (lift + micro scale)
     D  STILLNESS         the scene layer never animates on its own —
                          it only moves when the reader scrolls.

   Every distance is expressed in --u, so the choreography scales
   with the composition instead of being re-tuned per breakpoint.
   ============================================================ */
:root{
  --e-expo:  cubic-bezier(.16,1,.3,1);    /* headline: confident, decisive */
  --e-quint: cubic-bezier(.23,1,.32,1);   /* supporting: smooth arrival    */
  --e-settle:cubic-bezier(.2,.85,.3,1);   /* buttons: firm, no overshoot   */
  --lift: calc(9 * var(--u));
}

/* Armed state. Applied by an inline script before first paint, so there is
   never a flash of the finished page. No JS -> class absent -> page visible. */
.anim .mark,.anim .brand b,.anim .nav a,.anim .pill,.anim .square,.anim .burger,
.anim .stage .btn,.anim .lede,.anim .scroll{opacity:0}
.anim .l1,.anim .l2{clip-path:inset(0% -6% -22% -6%)}
.anim .rv{transform:translateY(1.15em)}

/* Running state. */
.anim-run .mark,.anim-run .brand b,.anim-run .nav a,.anim-run .pill,
.anim-run .square,.anim-run .burger,.anim-run .stage .btn,.anim-run .lede,.anim-run .scroll,
.anim-run .rv{will-change:transform,opacity}

/*  t       element              behaviour
    0.00    scene                (already composed — never moves)
    0.06    logo mark            B
    0.12    wordmark             B
    0.18    nav links            B  x3, 55ms apart
    0.26    header pill          B
    0.32    headline line 1      A  <- begins while the header is still resolving
    0.34    header icon square   C  (smallest object, settles last in its group)
    0.45    headline line 2      A
    0.74    primary CTA          C  <- begins while line 2 is still easing
    0.81    secondary CTA        C
    0.86    paragraph            B
    0.96    scroll cue           B  (quietest element, arrives last)
    1.48    complete                                                          */
.anim-run .mark          {animation:lift      .60s var(--e-quint)  .06s both}
.anim-run .brand b       {animation:lift-word .60s var(--e-quint)  .12s both}
.anim-run .nav a:nth-child(1){animation:lift  .55s var(--e-quint)  .18s both}
.anim-run .nav a:nth-child(2){animation:lift  .55s var(--e-quint) .235s both}
.anim-run .nav a:nth-child(3){animation:lift  .55s var(--e-quint)  .29s both}
.anim-run .pill          {animation:lift      .58s var(--e-quint)  .26s both}
.anim-run .burger        {animation:lift      .58s var(--e-quint)  .30s both}
.anim-run .square        {animation:pop       .52s var(--e-settle) .34s both}
.anim-run .l1 .rv        {animation:reveal   1.00s var(--e-expo)   .32s both}
.anim-run .l2 .rv        {animation:reveal   1.00s var(--e-expo)   .45s both}
.anim-run .stage .btn-primary{animation:settle .60s var(--e-settle) .74s both}
.anim-run .stage .btn-ghost  {animation:settle .60s var(--e-settle) .81s both}
.anim-run .lede          {animation:lift      .58s var(--e-quint)  .86s both}
.anim-run .scroll        {animation:lift      .52s var(--e-quint)  .96s both}

@keyframes lift    {from{opacity:0;transform:translateY(var(--lift))}
                    to  {opacity:1;transform:none}}
/* the wordmark keeps its authored -0.8u optical offset as its resting value */
@keyframes lift-word{from{opacity:0;transform:translateY(calc(8.2 * var(--u)))}
                    to  {opacity:1;transform:translateY(calc(-.8 * var(--u)))}}
@keyframes pop     {from{opacity:0;transform:translateY(calc(6 * var(--u))) scale(.94)}
                    to  {opacity:1;transform:none}}
@keyframes reveal  {from{transform:translateY(1.15em)}
                    to  {transform:none}}
@keyframes settle  {from{opacity:0;transform:translateY(calc(10 * var(--u))) scale(.985)}
                    to  {opacity:1;transform:none}}

/* ------------------------------------------------------------
   SECTION REVEALS — the same B (quiet lift) language, triggered
   once per element as it enters the viewport. The hairline draws
   from its left edge. Armed only when JS runs and motion is
   allowed; otherwise everything is simply visible.
   ------------------------------------------------------------ */
.sr [data-reveal]{
  opacity:0;
  transform:translateY(calc(18 * var(--u)));
  transition:opacity .9s var(--e-quint) var(--d,0s), transform 1.1s var(--e-expo) var(--d,0s);
}
.sr .rule[data-reveal]{opacity:1; transform:scaleX(0); transition:transform 1.2s var(--e-expo) var(--d,0s)}
.sr [data-reveal].in{opacity:1; transform:none}
.sr .card[data-reveal].in{transition:opacity .9s var(--e-quint) var(--d,0s), transform 1.1s var(--e-expo) var(--d,0s), background .4s ease}

a:focus-visible,button:focus-visible{outline:calc(2 * var(--u)) solid #0a0a0a;outline-offset:calc(3 * var(--u));border-radius:calc(4 * var(--u))}

@media (prefers-reduced-motion:reduce){
  /* the script does not arm the sequence at all; this is belt-and-braces */
  html{scroll-behavior:auto}
  .anim .mark,.anim .brand b,.anim .nav a,.anim .pill,.anim .square,
  .anim .btn,.anim .lede,.anim .scroll{opacity:1}
  .anim .l1,.anim .l2{clip-path:none}
  .anim .rv,.anim-run .rv{transform:none;animation:none}
  .anim-run *{animation:none!important}
  .sr [data-reveal]{opacity:1!important;transform:none!important}
  *{transition:none!important}
}

/* ============================================================
   TABLET ARCHITECTURE
   ------------------------------------------------------------
   Why here: the desktop artboard is a uniformly scaled 1280x853
   canvas, so it never collides or overflows — it miniaturises.
   Measured decay of that canvas:
       1180w  scale .92  body 15.2px  nav 13.9px  pill 36.0px   ok
       1112w  scale .87  body 14.3px  nav 13.1px  pill 33.9px   ok
       1080w  scale .84  body 13.9px  nav 12.7px  pill 32.9px   degrading
       1024w  scale .80  body 13.2px  nav 12.1px  pill 31.2px   failed
   Body copy drops under 14px and the pill under 33px at ~1090, so
   the canvas is kept until 1100px — as late as it holds. Below
   that the composition leaves the artboard: same corner anchoring,
   same components at ~design scale, fluid grid instead of fixed
   coordinates.
   ============================================================ */
@media (min-width:600px) and (min-height:600px) and (max-width:1100px),
       (min-width:600px) and (min-height:600px) and (max-aspect-ratio:105/100){
  /* components return to ~their design size instead of shrinking with the canvas */
  :root{ --u: clamp(.9px, .06vw + .38px, 1.06px); }

  .scene-media{object-position:62% 50%}

  /* off the absolute artboard, onto a grid that keeps the same anchors */
  .brand,.nav,.head-cta,h1,.actions,.lede,.scroll{
    position:static; left:auto; right:auto; top:auto; bottom:auto; transform:none;
  }
  .topbar,h1,.actions,.lede,.scroll{position:relative; z-index:1}
  .topbar{z-index:5; width:auto; height:auto}  /* the open panel sits above the hero copy */

  .stage{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    grid-template-rows:auto auto auto minmax(0,1fr) auto;
    grid-template-areas:
      "bar  bar"
      "head head"
      "cta  cta"
      "gap  gap"
      "cue  copy";
    column-gap:clamp(24px,4vw,56px);
    padding:clamp(28px,3.4vw,44px) clamp(32px,4.6vw,56px) clamp(28px,3.4vw,44px);
    padding-bottom:max(clamp(28px,3.4vw,44px), env(safe-area-inset-bottom));
    overflow:visible;
  }

  /* The bar carries the brand and the burger only. Everything the desktop
     bar held — the three links and the Request access pair — moves into the
     panel, unchanged, so nothing is lost and nothing is redesigned. */
  .topbar{
    grid-area:bar; display:flex; align-items:center; justify-content:space-between;
    gap:clamp(16px,3vw,40px);
  }
  .burger{display:flex}



  /* the headline keeps its two-line structure at every tablet width:
     line 2 measures 10.52x the font-size, so 50px needs 526px of column */
  h1{
    grid-area:head; text-align:center;
    margin-top:clamp(44px,8.5vh,104px);
    font-size:clamp(42px, 5.6vw + 3px, 50px);
    line-height:1.063;
  }
  h1 .i1{font-size:1.0445em}            /* the desktop italic ratios, expressed in em */
  h1 .i2{font-size:1.0489em}
  h1 .l2{transform:none}

  .actions{grid-area:cta; justify-self:center; margin-top:clamp(24px,3.6vh,40px)}

  .scroll{grid-area:cue;  align-self:end; justify-self:start}
  .lede{
    grid-area:copy; align-self:end; justify-self:end;
    width:clamp(240px,34vw,320px);
    font-size:clamp(15px,.55vw + 10.4px,16.5px);
    line-height:1.29;
  }

  /* ---- section 2: same anchors, fluid measure ---- */
  .eyebrow{font-size:12px; line-height:16px}
  .agency{
    min-height:auto;
    padding:clamp(120px,18vh,200px) clamp(32px,4.6vw,56px) clamp(120px,18vh,200px) clamp(32px,9vw,120px);
  }
  .agency .rule,.statement{width:min(100%, 600px)}
  .agency .rule{margin-top:20px}
  .statement{margin-top:40px; font-size:clamp(38px,5vw + 4px,54px); line-height:.96}

  /* ---- section 3: claim on top, cards below, nothing pinned ---- */
  .clients{
    display:block;
    padding:clamp(120px,16vh,180px) clamp(32px,4.6vw,56px) clamp(96px,14vh,160px);
  }
  .clients-lead{position:static; height:auto; padding-top:0}
  .clients h2{margin-top:24px; font-size:clamp(44px,5.4vw + 6px,60px); line-height:.96}
  .clients .btn-primary{margin-top:32px; height:46px; font-size:15px; padding:0 12px 0 20px}
  .clients .btn-primary .dot{width:20px;height:20px}
  .clients-body{padding-top:clamp(48px,7vh,72px)}
  .clients-copy{max-width:620px; font-size:16px; line-height:1.45}
  .logo-grid{margin-top:36px; column-gap:16px}
  .logo-col{gap:16px}
  .logo-col + .logo-col{margin-top:clamp(64px,10vw,110px)}
  .card{height:clamp(160px,22vw,210px); border-radius:10px; font-size:clamp(12px,1.35vw + 2px,16px)}
}


/* ============================================================
   MOBILE ARCHITECTURE  ( < 600px, portrait )
   ------------------------------------------------------------
   Why here: 600px is the tablet architecture's own floor, so the
   wider layout is kept for every width it still serves. What
   failed below it was the old phone canvas — it scaled with
   viewport HEIGHT (min(100vw/430, 100vh/860)), so short phones
   miniaturised everything:
       390x844   body 14.5px  button 39.9px  burger 35.4px
       360x800   body 13.4px  button 36.8px  burger 32.6px
       360x640   body 11.9px  button 32.7px  burger 29.0px
       320x568   body 10.6px  button 29.0px  burger 25.8px
   Mobile therefore stops scaling the composition and uses
   standard mobile sizing: 16px body, 14px labels, >=44px touch
   targets, 20-24px gutters, headline fluid on width only.
   ============================================================ */
@media (max-aspect-ratio:105/100) and (max-width:599px){
  /* width-driven only — viewport height no longer shrinks the UI */
  :root{ --u: clamp(1px, .28vw, 1.14px); }

  .scene-media{object-position:64% 50%}
  .stage{
    display:flex; flex-direction:column;
    padding:22px clamp(20px,5.4vw,24px) 24px;
    padding-bottom:max(24px, env(safe-area-inset-bottom));
    overflow:visible;
  }
  .brand,.nav,.head-cta,h1,.actions,.lede,.scroll{position:static;left:auto;right:auto;top:auto;bottom:auto}
  /* static content must paint above the absolutely-positioned photo */
  .topbar,h1,.actions,.lede,.scroll{position:relative;z-index:1}
  .topbar{z-index:5; height:auto}      /* the open panel sits above the hero copy */
  .brand,.nav,.head-cta,h1,.actions,.lede,.scroll{transform:none}

  /* headline re-wraps here, so a per-line mask would cut mid-block:
     same rise + fade language, without the clip. */
  .anim .l1,.anim .l2{clip-path:none;opacity:0}
  .anim .rv{transform:translateY(10px)}
  .anim-run .l1{animation:fade .7s var(--e-expo) .32s both}
  .anim-run .l2{animation:fade .7s var(--e-expo) .42s both}
  .anim-run .l1 .rv{animation:shift .7s var(--e-expo) .32s both}
  .anim-run .l2 .rv{animation:shift .7s var(--e-expo) .42s both}
  @keyframes fade {from{opacity:0}to{opacity:1}}
  @keyframes shift{from{transform:translateY(10px)}to{transform:none}}

  /* ---- header: logo + menu, per the mobile navigation exception ---- */
  .topbar{display:flex;align-items:center;justify-content:space-between;width:100%}
  .brand{gap:8px}
  .mark{width:34px;height:34px}
  .brand b{font-size:20px;line-height:34px;transform:translateY(-.5px)}
  .burger{display:flex;width:44px;height:44px;gap:5px}
  .burger span{width:17px;height:1.6px}
  .burger[aria-expanded="true"] span:first-child{transform:translateY(3.3px) rotate(45deg)}
  .burger[aria-expanded="true"] span:last-child{transform:translateY(-3.3px) rotate(-45deg)}

  /* ---- headline: fluid on width, balanced wrapping, no orphan line ---- */
  h1{
    margin-top:clamp(30px,7vh,60px);
    font-size:clamp(30px,8.2vw,38px);
    line-height:1.1;
    letter-spacing:-.02em;
  }
  h1 .rv{text-wrap:balance}
  h1 .l1{letter-spacing:-.02em}
  h1 .l2{letter-spacing:-.03em}
  h1 .i1{font-size:1.0445em}
  h1 .i2{font-size:1.0489em}

  /* ---- the two CTAs stay side by side; they fit down to 320px ---- */
  /* the hero stays centred, as it is on desktop and tablet */
  .actions{
    margin:clamp(20px,3vh,28px) auto 0; justify-self:auto;
    display:flex; justify-content:center; flex-wrap:wrap; gap:10px;
  }
  .btn{height:46px;font-size:15px}
  .btn-primary{width:clamp(142px,40vw,156px);padding-left:18px;gap:8px}
  .btn-ghost{width:clamp(112px,32vw,126px)}
  .dot{width:20px;height:20px}
  .dot svg{width:9.5px;height:9.5px}

  /* ---- bottom block keeps the desktop reading order: copy, then cue ---- */
  .lede{
    width:min(100%,340px);
    margin-top:auto;
    font-size:16px;
    line-height:1.5;
    letter-spacing:0;
  }
  .scroll{margin-top:18px;gap:9px}
  .scroll svg{width:14px;height:14px}
  .scroll span{font-size:14px;line-height:16px;letter-spacing:.01em;transform:none}

  /* ---- section 2 ---- */
  .eyebrow{font-size:12px; line-height:16px}
  .agency{
    min-height:auto;
    padding:clamp(96px,16vh,140px) clamp(20px,5.4vw,24px) clamp(96px,16vh,140px);
  }
  .agency .rule,.statement{width:100%}
  .agency .rule{margin-top:18px}
  .statement{margin-top:30px; font-size:clamp(34px,9.6vw,42px); line-height:.98; letter-spacing:-.012em}

  /* ---- section 3 ---- */
  .clients{
    display:block;
    padding:clamp(96px,14vh,130px) clamp(20px,5.4vw,24px) 96px;
  }
  .clients-lead{position:static; height:auto; padding-top:0}
  .clients h2{margin-top:20px; font-size:clamp(38px,10.6vw,46px); line-height:.98}
  .clients .btn-primary{width:auto; margin-top:28px; height:46px; font-size:15px; padding:0 12px 0 20px}
  .clients-body{padding-top:44px}
  .clients-copy{font-size:16px; line-height:1.5; letter-spacing:-.005em}
  .logo-grid{margin-top:32px; column-gap:12px}
  .logo-col{gap:12px}
  .logo-col + .logo-col{margin-top:56px}
  .card{height:clamp(120px,34vw,150px); border-radius:9px; font-size:clamp(9.5px,2.7vw,11px)}
}
/* very wide / short screens: keep the composition breathing */
@media (min-aspect-ratio:23/10){
  :root{ --u: min(100vw / 1600, 100vh / 853); }
  @supports (height:100dvh){ :root{ --u: min(100vw / 1600, 100dvh / 853); } }
}


/* ------------------------------------------------------------
   COLLAPSED NAVIGATION PANEL
   Shared by tablet and mobile: identical component, identical
   surfaces. The panel IS the existing <nav> plus the existing
   Request access pair, so there is one set of links and one CTA in
   the document — nothing is duplicated and nothing is invented.
   ------------------------------------------------------------ */
@media (min-width:600px) and (min-height:600px) and (max-width:1100px),
       (min-width:600px) and (min-height:600px) and (max-aspect-ratio:105/100),
       (max-aspect-ratio:105/100) and (max-width:599px){
  .topbar{position:relative}
  .bar-menu{
    display:flex; flex-direction:column; z-index:3;
    position:absolute; top:calc(100% + 10 * var(--u)); right:0;
    min-width:calc(200 * var(--u));
    padding:calc(8 * var(--u));
    border-radius:calc(6 * var(--u));
    background:var(--glass-white);
    -webkit-backdrop-filter:blur(calc(14 * var(--u)));
    backdrop-filter:blur(calc(14 * var(--u)));
    opacity:0; visibility:hidden; pointer-events:none;
    transform:translateY(calc(-6 * var(--u))) scale(.98);
    transform-origin:100% 0;
    transition:opacity .18s ease, transform .18s cubic-bezier(.23,1,.32,1), visibility .18s;
  }
  .topbar.is-open .bar-menu{
    opacity:1; visibility:visible; pointer-events:auto; transform:none;
    transition:opacity .26s ease, transform .26s cubic-bezier(.23,1,.32,1), visibility .26s;
  }

  .bar-menu .nav{
    flex-direction:column; align-items:stretch; text-align:left; gap:0; width:100%;
  }
  .bar-menu .nav a{
    padding:calc(12 * var(--u)) calc(14 * var(--u));
    border-radius:calc(5 * var(--u));
    line-height:calc(20 * var(--u));
    transition:background .25s ease, opacity .25s ease;
  }
  .bar-menu .nav a:hover{background:rgba(213,225,245,.55); opacity:1}

  /* the CTA pair keeps its exact components; it sits on the site's other
     glass surface so the white pill still reads against the panel */
  .bar-menu .head-cta{
    margin-top:calc(6 * var(--u));
    padding:calc(8 * var(--u));
    border-radius:calc(5 * var(--u));
    background:var(--glass-blue);
    gap:calc(8 * var(--u));
  }
}

/* AetherHive rebrand: retain the supplied composition and motion. */
:root{--orange:#edb346;--glass-blue:rgba(225,231,241,.78)}
.brand{color:#171717}.brand b{line-height:1;letter-spacing:-.055em}.brand b small{display:block;font-size:12px;letter-spacing:0;font-weight:400;margin-bottom:3px}.brand b span{color:#68645e}
.btn-primary{color:#16130b;width:auto;min-width:150px;padding:0 14px 0 20px;white-space:nowrap}.pill{min-width:140px}
.btn{min-height:44px;font-size:16px}.nav a{font-size:max(14px,15.07 * var(--u))}.eyebrow{font-size:12px}
.lede,.clients-copy{font-size:max(16px,16 * var(--u));line-height:1.35}
.feature-card{align-items:flex-start;justify-content:flex-start;flex-direction:column;padding:28px;gap:0;min-height:230px;height:auto;background:rgba(255,255,255,.84);backdrop-filter:blur(14px);color:#171717}
.feature-card svg{width:34px;height:36px;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linejoin:round;margin-bottom:30px}
.feature-card h3{font-size:24px;font-weight:500;letter-spacing:-.035em}.feature-card p{font-size:16px;line-height:1.4;max-width:23ch;margin-top:10px;color:#494946}
.logo-col{list-style:none}.contact{position:relative;z-index:1;padding:150px 8vw 120px;background:rgba(238,240,245,.86);text-align:center}.contact h2{font-size:clamp(62px,8vw,106px);line-height:.98;font-weight:400;letter-spacing:-.055em;margin:28px 0}.contact h2 i{font-family:var(--serif);font-weight:400}.contact-copy{font-size:18px;line-height:1.4;max-width:34ch;margin:0 auto 32px}.contact .btn{display:inline-flex;height:48px;gap:18px}.signin{display:block;margin-top:22px;color:#333;font-size:14px;text-underline-offset:4px}footer{position:relative;z-index:1;background:#eef0f5;padding:30px 6vw;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #d8dadd;font-size:14px;gap:24px}footer a{color:inherit;text-decoration:none}footer>a{font-size:20px;letter-spacing:-.04em}footer div{display:flex;gap:22px}
a:focus-visible,button:focus-visible{outline:2px solid #73500c;outline-offset:5px}section{scroll-margin-top:70px}
@media(min-width:1101px){.topbar:before{content:'';position:absolute;inset:0 0 auto;height:95px;background:linear-gradient(#e9ebf1eb,#e9ebf100);pointer-events:none}}
@media(max-width:700px){.feature-card{padding:22px;min-height:240px}.feature-card h3{font-size:22px}.logo-grid{gap:12px}.feature-card p{font-size:16px}.contact{padding:90px 24px}footer{flex-wrap:wrap;padding:28px 24px}footer>span{font-size:12px}}
@media(max-width:380px){.logo-grid{grid-template-columns:1fr}.logo-col+.logo-col{margin-top:0}.logo-col{gap:12px}.feature-card{min-height:190px}.stage{min-height:760px;height:auto}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.scene-video{display:none}}