/* ============================================================
   CRITICAL — everything the first screen touches.
   Sections 00-08 (font metrics, tokens, reset, type, UI, loader,
   cursor, nav, avatars) plus the motion appendix, which holds the
   shared [data-anim] / .word reveal primitives.
   Loaded BLOCKING and kept small on purpose: on a bandwidth-limited
   connection inlining these bytes into index.html would cost the same
   transfer time as fetching them, and this way they stay editable.
   Everything below the fold lives in style.css, which loads async.
   ============================================================ */
/* ============================================================
   MERIDIAN — Private Residences
   01 Tokens · 02 Reset · 03 Type · 04 UI · 05 Loader
   06 Cursor · 07 Nav · 08 Hero · 09 Ticker
   ============================================================ */

/* ── 00 · FONT FALLBACK METRICS ──────────────────────────────
   Measured on this page: Inter renders 13.8% wider than the local
   fallback at weight 400 (11.7% at 500), Inter Tight only 1.3-1.8%.
   With display=swap that mismatch reflowed the nav, the buttons and
   the body copy when the webfont arrived, and because .bhero__sky is
   a viewport-sized box tied to the hero's height it was dragged along
   — measured CLS 0.286, against a 0.1 budget. Blocking the webfonts
   dropped it to 0.006, which isolated the cause.

   These faces re-space the LOCAL font so it occupies the same width
   and line box as Inter. Nothing about the design changes; the real
   webfont still loads and still swaps in. Only the reflow goes away.
   ascent/descent are Inter's own (0.969 / 0.241 em) divided by the
   size-adjust, so the line box lands on Inter's 1.21em either way.
   ──────────────────────────────────────────────────────────── */
@font-face{
  font-family:'Inter Fallback';
  src:local('Helvetica Neue'),local('Arial'),local('Liberation Sans');
  size-adjust:112.5%;
  ascent-override:86.1%;
  descent-override:21.4%;
  line-gap-override:0%;
}
@font-face{
  font-family:'Inter Tight Fallback';
  src:local('Helvetica Neue'),local('Arial'),local('Liberation Sans');
  size-adjust:101.5%;
  ascent-override:95.5%;
  descent-override:23.7%;
  line-gap-override:0%;
}

/* Without JS the loader never gets .is-done, so the opaque panel would cover
   the page forever. .no-js is removed by app.js before paint on the happy path. */
.no-js .loader{display:none}

/* ── 01 · TOKENS ─────────────────────────────────────────── */
:root{
  --ink:#0B0C0E;
  --ink-2:#131518;
  --ink-3:#1C1F23;
  --ink-4:#2A2E34;
  --paper:#F5F3F0;
  --paper-2:#FFFFFF;
  --sand:#E8E2D8;
  --brass:#A98457;
  --brass-l:#C9A97D;
  --muted:#6B7076;
  --muted-l:rgba(245,243,240,.58);
  --line:rgba(11,12,14,.11);
  --line-2:rgba(11,12,14,.06);
  --line-l:rgba(245,243,240,.16);

  --sans:'Inter','Inter Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --disp:'Inter Tight','Inter Tight Fallback','Inter',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;

  --gut:clamp(1.15rem,4vw,4rem);
  --wrap:1400px;
  --nav-h:74px;
  --r:clamp(14px,1.4vw,22px);
  --r-lg:clamp(18px,2vw,32px);

  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.62,.05,.32,1);
  --t:.6s var(--e-out);
}

/* ── 02 · RESET ──────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;
  overflow-x:clip;              /* clip (not hidden) keeps position:sticky alive */
  scroll-behavior:auto;
}
body{
  background:var(--paper);
  color:var(--ink);
  font:400 clamp(.95rem,.55vw + .82rem,1.0625rem)/1.62 var(--sans);
  letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
  text-rendering:optimizeLegibility;
}
body.is-locked{overflow:hidden;height:100vh}
img,svg,video{display:block;max-width:100%}
img{height:auto;background:var(--ink-3)}
button,input{font:inherit;color:inherit;background:none;border:0}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;top:8px;left:8px;z-index:999;padding:.6rem 1rem;background:var(--ink);color:var(--paper);border-radius:8px;transform:translateY(-160%);transition:transform .3s}
.skip:focus{transform:none}

/* ── 03 · TYPE ───────────────────────────────────────────── */
.h2{
  font:600 clamp(2.05rem,4.5vw,4.15rem)/1.02 var(--disp);
  letter-spacing:-.038em;
}
.h2--sm{font-size:clamp(1.9rem,3.3vw,3.1rem)}
.h2 em,.hero__title em,.cta__title em{
  font-family:var(--serif);font-style:italic;font-weight:400;
  letter-spacing:-.012em;padding-right:.04em;
}
.label{
  display:inline-flex;align-items:center;gap:.6rem;
  font:500 .6875rem/1 var(--disp);
  letter-spacing:.17em;text-transform:uppercase;color:var(--muted);
}
.label i{width:22px;height:1px;background:currentColor;opacity:.55;display:block}
.label--light{color:var(--muted-l)}

.wrap{width:min(var(--wrap),100% - var(--gut)*2);margin-inline:auto}
.section{padding-block:clamp(5.5rem,11vw,10rem)}

.head{margin-bottom:clamp(2.6rem,5vw,4.5rem)}
.head__grid{
  margin-top:clamp(1.1rem,2vw,1.8rem);
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(1.5rem,4vw,4rem);align-items:end;
}
.head__note{color:var(--muted);max-width:46ch;font-size:.98rem}
.head__side{display:flex;flex-direction:column;gap:1.5rem;align-items:flex-start}
@media(max-width:860px){.head__grid{grid-template-columns:1fr;align-items:start}}

/* ── 04 · UI ─────────────────────────────────────────────── */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:.65em;
  padding:.95rem 1.4rem;border-radius:999px;
  font:500 .8125rem/1 var(--disp);letter-spacing:-.005em;
  isolation:isolate;overflow:hidden;white-space:nowrap;
  transition:color .45s var(--e-out),border-color .45s var(--e-out);
}
.btn--sm{padding:.72rem 1.1rem;font-size:.78rem}
.btn::before{
  content:'';position:absolute;inset:0;border-radius:inherit;z-index:-1;
  transform:translate3d(0,101%,0);transition:transform .62s var(--e-out);
}
.btn:hover::before{transform:translate3d(0,0,0)}
.btn__ico{display:grid;place-items:center;width:1.05em;height:1.05em;overflow:hidden}
.btn__ico svg{width:100%;height:100%;transition:transform .5s var(--e-out)}
.btn:hover .btn__ico svg{transform:translate3d(120%,-120%,0)}
.btn__ico--lead svg{transition:transform .5s var(--e-out)}
.btn:hover .btn__ico--lead svg{transform:scale(1.25)}

.btn--dark{background:var(--ink);color:var(--paper)}
.btn--dark::before{background:var(--paper)}
.btn--dark:hover{color:var(--ink)}
.btn--light{background:var(--paper);color:var(--ink)}
.btn--light::before{background:var(--ink)}
.btn--light:hover{color:var(--paper)}
.btn--glass{
  color:var(--paper);border:1px solid rgba(245,243,240,.28);
  background:rgba(245,243,240,.07);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.btn--glass::before{background:var(--paper)}
.btn--glass:hover{color:var(--ink);border-color:var(--paper)}

.chip{
  display:inline-flex;align-items:center;padding:.55rem .95rem;border-radius:999px;
  border:1px solid var(--line);color:var(--muted);
  font:500 .78rem/1 var(--disp);letter-spacing:-.005em;
  transition:color .35s,background-color .35s,border-color .35s;
}
.chip:hover{color:var(--ink);border-color:rgba(11,12,14,.28)}
.chip.is-on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chip--ghost{
  border-color:rgba(245,243,240,.34);color:var(--paper);
  background:rgba(10,11,13,.22);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;padding:.5rem .85rem;
}

/* image with internal parallax */
.pimg{position:relative;overflow:hidden}
.pimg>img{
  position:absolute;left:0;top:-13%;width:100%;height:126%;
  object-fit:cover;will-change:transform;
}

/* reveal primitives */
.word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.word__i{display:inline-block;transform:translate3d(0,115%,0);transition:transform 1.05s var(--e-out)}
.is-in .word__i{transform:translate3d(0,0,0)}
[data-anim]{opacity:0;transition:opacity .9s var(--e-out) var(--d,0s),transform 1.05s var(--e-out) var(--d,0s)}
[data-anim="fade"]{transform:translate3d(0,14px,0)}
[data-anim="rise"]{transform:translate3d(0,42px,0)}
[data-anim].is-in{opacity:1;transform:none}
.no-js .word__i{transform:none}
.no-js [data-anim]{opacity:1;transform:none}

/* ── 05 · LOADER ─────────────────────────────────────────── */
.loader{position:fixed;inset:0;z-index:200;pointer-events:none}
.loader__bg{position:absolute;inset:0;background:var(--ink);transform-origin:top;
  transition:transform 1.15s var(--e-io) .12s}
.loader__inner{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  gap:1.5rem;padding:var(--gut);color:var(--paper);
  transition:opacity .5s ease,transform .9s var(--e-out);
}
/* each letter is its own flex item, so letter-spacing cannot reach between
   them — the original -.05em here was inert. Air comes from gap instead. */
.loader__word{display:flex;gap:.03em;font:600 clamp(2.6rem,10vw,8rem)/1 var(--disp)}
.loader__word i{
  display:block;font-style:normal;transform:translate3d(0,105%,0);opacity:0;
  animation:loadIn .95s var(--e-out) forwards;
}
.loader__word i:nth-child(1){animation-delay:.05s}
.loader__word i:nth-child(2){animation-delay:.10s}
.loader__word i:nth-child(3){animation-delay:.15s}
.loader__word i:nth-child(4){animation-delay:.20s}
.loader__word i:nth-child(5){animation-delay:.25s}
.loader__word i:nth-child(6){animation-delay:.30s}
.loader__word i:nth-child(7){animation-delay:.35s}
.loader__word i:nth-child(8){animation-delay:.40s}
@keyframes loadIn{to{transform:none;opacity:1}}
.loader__brand{overflow:hidden;padding-bottom:.08em}
.loader__meta{display:flex;justify-content:space-between;align-items:baseline;
  font:500 .72rem/1 var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--muted-l)}
.loader__count{font-size:clamp(1.2rem,3vw,2rem);letter-spacing:-.03em;color:var(--paper);font-variant-numeric:tabular-nums}
.loader__bar{height:1px;background:rgba(245,243,240,.18);overflow:hidden}
.loader__bar span{display:block;height:100%;width:0;background:var(--paper)}
.loader.is-done .loader__bg{transform:scaleY(0)}
.loader.is-done .loader__inner{opacity:0;transform:translate3d(0,-24px,0);transition-duration:.55s}

/* ── 06 · CURSOR + SCROLLBAR ─────────────────────────────── */
.cursor{position:fixed;top:0;left:0;z-index:190;pointer-events:none;
  mix-blend-mode:difference;opacity:0;transition:opacity .3s}
.cursor.is-on{opacity:1}
.cursor__dot,.cursor__ring{position:absolute;top:0;left:0;border-radius:999px;will-change:transform}
.cursor__dot{width:6px;height:6px;background:var(--paper);margin:-3px 0 0 -3px}
.cursor__ring{
  width:38px;height:38px;margin:-19px 0 0 -19px;border:1px solid rgba(245,243,240,.65);
  display:grid;place-items:center;
  transition:width .4s var(--e-out),height .4s var(--e-out),margin .4s var(--e-out),background-color .4s;
}
.cursor__label{
  font:500 .68rem/1 var(--disp);letter-spacing:.04em;color:var(--ink);
  opacity:0;transition:opacity .25s;white-space:nowrap;
}
.cursor.is-link .cursor__ring{width:76px;height:76px;margin:-38px 0 0 -38px;background:var(--paper);border-color:transparent}
.cursor.is-link .cursor__label{opacity:1}
.cursor.is-link .cursor__dot{opacity:0}
@media(hover:none),(pointer:coarse){.cursor{display:none}}

.scrollbar{position:fixed;top:0;left:0;right:0;height:2px;z-index:120;background:transparent;pointer-events:none}
.scrollbar span{display:block;height:100%;width:100%;background:var(--ink);transform:scaleX(0);transform-origin:left}

/* ── 07 · NAV ────────────────────────────────────────────── */
.nav{position:fixed;top:0;left:0;right:0;z-index:110;padding-top:clamp(.75rem,1.6vw,1.3rem);
  transition:transform .6s var(--e-out),opacity .4s}
.nav.is-hidden{transform:translate3d(0,-140%,0);opacity:0}
.nav__inner{
  width:min(var(--wrap),100% - var(--gut)*2);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  height:var(--nav-h);padding-inline:clamp(.9rem,1.6vw,1.4rem);
  border-radius:999px;color:var(--paper);
  transition:background-color .5s var(--e-out),color .5s var(--e-out),
             box-shadow .5s var(--e-out),backdrop-filter .5s,height .5s var(--e-out);
}
.nav.is-stuck .nav__inner{
  height:62px;color:var(--ink);
  background:rgba(245,243,240,.72);
  backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);
  box-shadow:0 1px 0 rgba(11,12,14,.06),0 18px 46px -26px rgba(11,12,14,.45);
}
/* ── LOGOTYPE ──────────────────────────────────────────────
   The display grotesk, set as tracked capitals. Caps carry more optical
   weight than lowercase at the same size, so the size comes down a little
   and the negative tracking goes positive — caps need air, not tightening. */
.brand{display:inline-flex;align-items:center;gap:.6rem;
  font:600 .92rem/1 var(--disp);letter-spacing:.13em;text-transform:uppercase}
/* letter-spacing also trails the last cap, which throws the lockup
   off-centre against the mark — take it back. */
.brand__name{margin-right:-.13em}
.brand__mark{width:24px;height:24px;display:grid;place-items:center}
.brand__mark svg{width:100%;height:100%}
.nav__links{display:flex;align-items:center;gap:clamp(.4rem,1.4vw,1.5rem)}
.nav__links a{
  position:relative;padding:.5rem .2rem;font:450 .875rem/1 var(--disp);letter-spacing:-.01em;
  opacity:.82;transition:opacity .35s;overflow:hidden;display:block;
}
.nav__links a span{display:block;transition:transform .5s var(--e-out)}
.nav__links a::after{
  content:'';position:absolute;left:.2rem;right:.2rem;bottom:.35rem;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .5s var(--e-out);
}
.nav__links a:hover{opacity:1}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav__actions{display:flex;align-items:center;gap:.6rem}
.nav.is-stuck .btn--dark{background:var(--ink);color:var(--paper)}
.nav .btn--dark{background:rgba(245,243,240,.12);border:1px solid rgba(245,243,240,.24);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.nav.is-stuck .btn--dark{border-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}

.burger{display:none;width:42px;height:42px;border-radius:999px;border:1px solid currentColor;
  align-items:center;justify-content:center;gap:5px;flex-direction:column}
.burger span{display:block;width:15px;height:1.4px;background:currentColor;border-radius:2px;
  transition:transform .45s var(--e-out),opacity .3s}
.menu-open .burger span:nth-child(1){transform:translateY(3.2px) rotate(45deg)}
.menu-open .burger span:nth-child(2){transform:translateY(-3.2px) rotate(-45deg)}
@media(max-width:940px){
  .nav__links{display:none}
  .burger{display:flex}
  .nav .btn--sm{display:none}
}

/* mobile menu */
.menu{position:fixed;inset:0;z-index:105;pointer-events:none}
.menu__panel{
  position:absolute;inset:0;background:var(--ink);color:var(--paper);
  display:flex;flex-direction:column;justify-content:center;gap:2.5rem;
  padding:calc(var(--nav-h) + 3rem) var(--gut) var(--gut);
  clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--e-io);
}
.menu-open .menu{pointer-events:auto}
.menu-open .menu__panel{clip-path:inset(0 0 0 0)}
.menu__links{display:flex;flex-direction:column}
.menu__links a{
  display:flex;align-items:baseline;gap:1rem;padding:.5rem 0;border-bottom:1px solid var(--line-l);
  font:600 clamp(1.9rem,9vw,3.4rem)/1.15 var(--disp);letter-spacing:-.04em;
  opacity:0;transform:translateY(28px);transition:opacity .6s var(--e-out),transform .8s var(--e-out);
}
.menu-open .menu__links a{opacity:1;transform:none}
.menu__links a:nth-child(1){transition-delay:.18s}
.menu__links a:nth-child(2){transition-delay:.24s}
.menu__links a:nth-child(3){transition-delay:.30s}
.menu__links a:nth-child(4){transition-delay:.36s}
.menu__links a:nth-child(5){transition-delay:.42s}
.menu__links em{font:500 .72rem/1 var(--disp);letter-spacing:.14em;color:var(--muted-l);font-style:normal}
.menu__foot{display:flex;flex-direction:column;gap:1.2rem;align-items:flex-start;color:var(--muted-l);font-size:.9rem}

/* ── 08 · AVATAR STACK ───────────────────────────────────── */
/* All that survives of the old dark hero; the bright hero in
   hero-bright.css reuses .avatars for its trust badge. The rest of
   this section (.hero, .hero__sky/__grad/__cloud/__title/__stage/
   __meta/__scroll/__caption/__coord/__vig/__glow/__badge/__content/
   __sub/__actions/__house) went with that hero. */
.avatars{display:flex}
.avatars img{
  width:26px;height:26px;border-radius:999px;object-fit:cover;
  border:1.5px solid rgba(245,243,240,.85);margin-left:-9px;background:var(--ink-3);
}
.avatars img:first-child{margin-left:0}
.avatars img{width:22px;height:22px;margin-left:-8px}


/* ── 21 · MOTION APPENDIX ────────────────────────────────── */
.hero__stage{
  opacity:0;transform:translate3d(0,80px,0) scale(.955);
  transition:opacity 1.3s var(--e-out) .3s,transform 1.5s var(--e-out) .3s;
}
.is-ready .hero__stage{opacity:1;transform:none}
.tilt{transition:transform .32s var(--e-out),box-shadow .6s var(--e-out),opacity .5s}
.hscroll__pin{cursor:grab}
.hscroll__pin a,.hscroll__pin button{cursor:pointer}
.grow__rows{transition:none}
.magnetic{will-change:transform}
@media(prefers-reduced-motion:reduce){
  .hero__stage{opacity:1!important;transform:none!important}
  .wordmark{position:relative;margin-top:2rem}
}