/* ═══════════════════════════════════════════════════
   AURELON — "Stone upon stone"
   Design system: graphite masonry + sunrise gold seam
   ═══════════════════════════════════════════════════ */

/* ── FONTS ───────────────────────────────────────── */
@font-face{font-family:Cormorant;font-style:normal;font-weight:300 600;font-display:swap;
  src:url(../fonts/cormorant-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:Cormorant;font-style:normal;font-weight:300 600;font-display:swap;
  src:url(../fonts/cormorant-cyr.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:InterA;font-style:normal;font-weight:300 700;font-display:swap;
  src:url(../fonts/inter-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:InterA;font-style:normal;font-weight:300 700;font-display:swap;
  src:url(../fonts/inter-cyr.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}

/* ── TOKENS ──────────────────────────────────────── */
:root{
  --void:#08080A;
  --stone-950:#0C0D10;
  --stone-900:#121317;
  --stone-850:#16181D;
  --stone-800:#1C1E24;
  --stone-700:#252831;
  --stone-600:#31353F;
  --stone-500:#454A56;

  --bone:#F1EEE9;
  --ink:#16181D;
  --travertine:#C3BCB0;
  --ash:#8B8781;
  --ash-dim:#63615E;

  --gold:#C8A44D;
  --gold-hi:#F3E1AA;
  --gold-deep:#7E6222;
  --gold-glow:rgba(200,164,77,.22);

  --hair:rgba(196,186,164,.12);
  --hair-strong:rgba(196,186,164,.22);

  --ff-d:Cormorant,'Times New Roman',serif;
  --ff-u:InterA,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --pad:clamp(20px,4.4vw,64px);
  --wrap:1320px;
  --sec-y:clamp(88px,12vw,190px);

  --e:cubic-bezier(.22,.61,.28,1);
  --e-out:cubic-bezier(.16,1,.3,1);
}

/* ── RESET ───────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--void);color:var(--travertine);
  font-family:var(--ff-u);font-weight:300;font-size:clamp(.95rem,.86rem + .28vw,1.0625rem);
  line-height:1.66;letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;text-rendering:optimizeLegibility;
}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
::selection{background:rgba(200,164,77,.28);color:var(--bone)}
:focus-visible{outline:1px solid var(--gold);outline-offset:4px}

/* Film grain belongs on the wall, not on the whole document. A fixed,
   blend-mode layer stretched over a live WebGL canvas is a compositing
   trap on mobile — it produced a torn rectangle across the headline. */
.hero__grad::after,.phead__grad::after,.story__grad::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity:.055;mix-blend-mode:overlay;
}

.wrap{width:min(100% - var(--pad)*2,var(--wrap));margin-inline:auto}
.skip{position:fixed;top:-100px;left:20px;z-index:200;background:var(--gold);color:#0A0A0C;padding:10px 18px;font-size:.8rem}
.skip:focus{top:16px}

/* ── TYPE PRIMITIVES ─────────────────────────────── */
.label{
  font-size:.6875rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ash-dim);font-weight:400;
}
.eyebrow{
  font-size:.6875rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ash);font-weight:400;
}
.h2{
  font-family:var(--ff-d);font-weight:400;
  font-size:clamp(2.05rem,1.2rem + 3.2vw,4rem);
  line-height:1.06;letter-spacing:-.012em;color:var(--bone);
}
.h2--xl{font-size:clamp(2.6rem,1.4rem + 5vw,5.6rem)}
.num{font-family:var(--ff-d);font-weight:400}
/* Cormorant defaults to old-style figures; prices and indices must be lining */
.num,.crs__i,.road__n,.step__n,.line__v
{font-variant-numeric:lining-nums tabular-nums;font-feature-settings:'lnum' 1,'tnum' 1}

/* ── PRELOADER ───────────────────────────────────── */
.pre{
  position:fixed;inset:0;z-index:150;background:var(--void);
  display:grid;place-items:center;
  transition:opacity .7s var(--e),visibility .7s;
}
.pre.done{opacity:0;visibility:hidden}
.pre__in{display:grid;justify-items:center;gap:26px;padding-bottom:4vh}
.pre__mark{color:var(--stone-600);opacity:0;animation:preIn .9s var(--e-out) .05s forwards}
.pre__seam{stroke-dasharray:33;stroke-dashoffset:33;animation:seam 1.1s var(--e-out) .5s forwards}
@keyframes seam{to{stroke-dashoffset:0}}
@keyframes preIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.pre__word{display:flex;gap:.42em;font-size:.75rem;letter-spacing:.42em;color:var(--travertine);text-indent:.42em}
.pre__word span{opacity:0;animation:preIn .7s var(--e-out) forwards}
.pre__word span:nth-child(1){animation-delay:.18s}
.pre__word span:nth-child(2){animation-delay:.24s}
.pre__word span:nth-child(3){animation-delay:.30s}
.pre__word span:nth-child(4){animation-delay:.36s}
.pre__word span:nth-child(5){animation-delay:.42s}
.pre__word span:nth-child(6){animation-delay:.48s}
.pre__word span:nth-child(7){animation-delay:.54s}
.pre__bar{width:170px;height:1px;background:var(--stone-700);overflow:hidden}
.pre__bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold-deep),var(--gold-hi));transition:width .35s linear}

/* ── CURSOR ──────────────────────────────────────── */
.cur{position:fixed;top:0;left:0;z-index:140;pointer-events:none;mix-blend-mode:screen;opacity:0;transition:opacity .3s}
.cur.on{opacity:1}
.cur__ring,.cur__dot{position:absolute;border-radius:50%;transform:translate(-50%,-50%)}
.cur__ring{width:30px;height:30px;border:1px solid rgba(200,164,77,.5);transition:width .3s var(--e-out),height .3s var(--e-out),border-color .3s,background .3s}
.cur__dot{width:4px;height:4px;background:var(--gold-hi)}
.cur.hot .cur__ring{width:52px;height:52px;border-color:rgba(243,225,170,.85);background:rgba(200,164,77,.06)}
@media (hover:hover) and (pointer:fine){
  body.cursor-on,body.cursor-on a,body.cursor-on button,body.cursor-on .crs,body.cursor-on .road{cursor:none}
}

/* ── HEADER ──────────────────────────────────────── */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:22px var(--pad);
  transition:background .5s var(--e),padding .5s var(--e),border-color .5s;
  border-bottom:1px solid transparent;
}
/* A backdrop blur over a canvas that repaints every frame re-runs the blur
   every frame — it cost this page half its frame budget. On a near-black
   palette a graded scrim reads the same and costs nothing. */
.hdr.stuck{
  background:linear-gradient(180deg,rgba(8,8,10,.94) 0%,rgba(8,8,10,.86) 62%,rgba(8,8,10,.72) 100%);
  border-bottom-color:var(--hair);padding-block:14px;
}
.hdr__brand{display:flex;align-items:center;gap:11px;color:var(--bone)}
.hdr__mark{flex:none}
.hdr__word{font-size:.8125rem;letter-spacing:.34em;font-weight:400;text-indent:.34em}
.hdr__nav{display:flex;gap:clamp(18px,2.4vw,38px)}
.hdr__nav a{
  font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ash);
  position:relative;padding-block:4px;transition:color .35s var(--e);
}
.hdr__nav a::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--gold);transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--e-out);
}
.hdr__nav a:hover,.hdr__nav a[aria-current="page"]{color:var(--bone)}
.hdr__nav a:hover::after,.hdr__nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.hdr__nav a[aria-current="page"]::after{background:var(--gold);opacity:.75}
.mmenu nav a[aria-current="page"] i{color:var(--gold)}
.hdr__right{display:flex;align-items:center;gap:14px}

.lang{position:relative;display:flex;border:1px solid var(--hair-strong);border-radius:999px;padding:2px}
.lang__b{
  position:relative;z-index:1;font-size:.625rem;letter-spacing:.16em;padding:6px 11px;
  color:var(--ash);transition:color .35s var(--e);border-radius:999px;
}
.lang__b[aria-pressed="true"]{color:#0B0B0D}
.lang__b:focus-visible{outline-offset:1px}
.lang__pill{
  position:absolute;top:2px;left:2px;height:calc(100% - 4px);width:38px;border-radius:999px;
  background:linear-gradient(160deg,var(--gold-hi),var(--gold));
  transition:transform .5s var(--e-out);
}
.lang[data-i="1"] .lang__pill{transform:translateX(38px)}

.burger{display:none;width:34px;height:34px;position:relative}
.burger i{position:absolute;left:7px;width:20px;height:1px;background:var(--bone);transition:transform .4s var(--e-out),opacity .3s}
.burger i:nth-child(1){top:15px}
.burger i:nth-child(2){top:20px}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(2.5px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){transform:translateY(-2.5px) rotate(-45deg)}

.mmenu{
  position:fixed;inset:0;z-index:95;background:rgba(8,8,10,.985);
  display:grid;align-content:end;gap:clamp(26px,5vh,44px);
  padding:0 var(--pad) clamp(30px,6vh,54px);
  opacity:0;visibility:hidden;transition:opacity .45s var(--e),visibility .45s;
}
.mmenu.open{opacity:1;visibility:visible}
.mmenu nav{display:grid}
.mmenu nav a{
  display:flex;align-items:baseline;gap:18px;
  padding:14px 0;border-top:1px solid var(--hair);
  font-family:var(--ff-d);font-size:clamp(1.9rem,8vw,2.5rem);line-height:1.12;color:var(--bone);
  opacity:0;transform:translateY(14px);transition:opacity .5s var(--e-out),transform .5s var(--e-out);
}
.mmenu nav a:last-child{border-bottom:1px solid var(--hair)}
.mmenu nav a i{
  font-family:var(--ff-u);font-style:normal;font-size:.625rem;letter-spacing:.2em;
  color:var(--ash-dim);min-width:22px;
}
.mmenu.open nav a{opacity:1;transform:none}
.mmenu.open nav a:nth-child(1){transition-delay:.06s}
.mmenu.open nav a:nth-child(2){transition-delay:.11s}
.mmenu.open nav a:nth-child(3){transition-delay:.16s}
.mmenu.open nav a:nth-child(4){transition-delay:.21s}
.mmenu.open nav a:nth-child(5){transition-delay:.26s}
.mmenu__foot{display:grid;gap:14px}
.mmenu__foot a{display:grid;gap:3px;font-size:1.0625rem;color:var(--travertine)}
.mmenu__foot b{font-weight:400;font-size:.625rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ash-dim)}

/* ── HERO ────────────────────────────────────────── */
.hero{
  position:relative;min-height:100svh;min-height:100vh;
  display:grid;grid-template-rows:1fr auto;
  padding-top:clamp(120px,18vh,190px);padding-bottom:clamp(24px,4vh,44px);
  isolation:isolate;
}
.hero__stage{position:absolute;inset:0;z-index:-1;overflow:hidden;background:#08080A}
.hero__canvas{width:100%;height:100%;opacity:0;transition:opacity 1.2s var(--e)}
.hero__canvas.on{opacity:1}
/* The scrim is the composition: type lives on the shaded left of the wall,
   the sun comes in from the right. Nothing is centred, nothing is crowded. */
.hero__grad{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(96deg,rgba(8,8,10,.90) 0%,rgba(8,8,10,.62) 26%,rgba(8,8,10,.14) 56%,rgba(8,8,10,0) 74%),
    linear-gradient(180deg,rgba(8,8,10,.58) 0%,rgba(8,8,10,.06) 20%,rgba(8,8,10,0) 46%,rgba(8,8,10,.45) 84%,rgba(8,8,10,.94) 100%);
}
.hero__body{align-self:center;max-width:1000px;display:grid;gap:clamp(20px,2.4vw,30px);justify-items:start}
.hero__h1{
  font-family:var(--ff-d);font-weight:400;
  font-size:clamp(3.4rem,1.4rem + 9.4vw,10rem);
  line-height:.92;letter-spacing:-.022em;color:var(--bone);
  text-shadow:0 2px 60px rgba(0,0,0,.5);
}
.hero__h1 .ln{display:block;overflow:hidden;padding-bottom:.04em}
.hero__h1 .ln>span{display:block}
.js .hero__h1 .ln>span{transform:translateY(110%);transition:transform 1.15s var(--e-out)}
.ready .hero__h1 .ln>span{transform:none}
.ready .hero__h1 .ln:nth-child(2)>span{transition-delay:.09s}
.hero__sub{max-width:47ch;color:var(--travertine);font-size:clamp(.98rem,.9rem + .3vw,1.125rem);line-height:1.62}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.hero__foot{
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  font-size:.6875rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ash-dim);
}
.hero__meta{text-align:right}
.scroll{display:flex;align-items:center;gap:12px}
.scroll i{display:block;width:1px;height:40px;background:linear-gradient(180deg,transparent,var(--gold));position:relative;overflow:hidden}
.scroll i::after{content:'';position:absolute;inset:0;background:var(--gold-hi);animation:sc 2.4s var(--e) infinite}
@keyframes sc{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* ── BUTTONS ─────────────────────────────────────── */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  height:52px;padding:0 30px;overflow:hidden;
  font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;
  transition:color .4s var(--e),border-color .4s var(--e);
}
.btn span{position:relative;z-index:1}
.btn::before{
  content:'';position:absolute;inset:0;transform:scaleY(0);transform-origin:bottom;
  transition:transform .55s var(--e-out);
}
.btn:hover::before{transform:scaleY(1)}
.btn--gold{background:linear-gradient(160deg,var(--gold-hi),var(--gold));color:#0B0B0D;font-weight:500}
.btn--gold::before{background:var(--bone)}
.btn--ghost{border:1px solid var(--hair-strong);color:var(--travertine)}
.btn--ghost::before{background:rgba(200,164,77,.1)}
.btn--ghost:hover{color:var(--bone);border-color:rgba(200,164,77,.5)}

/* ── SECTION SHELL ───────────────────────────────── */
.sec{padding-block:var(--sec-y);position:relative;scroll-margin-top:80px}
.sec__head{display:grid;gap:clamp(18px,2.2vw,30px);margin-bottom:clamp(44px,6vw,86px);max-width:900px}
.sec__head--split{
  max-width:none;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:clamp(24px,4vw,80px);align-items:end;
}
.sec__head--split>div{display:grid;gap:clamp(18px,2.2vw,30px)}
.lead{color:var(--ash);font-size:.9375rem;line-height:1.68;max-width:42ch;padding-bottom:.35em}

/* technical sheet frame — the drawing is a document, not a decoration */
.sheet{border:1px solid var(--hair);background:linear-gradient(160deg,rgba(24,26,31,.5),rgba(8,8,10,0) 70%)}
.sheet__swipe{display:none;color:var(--gold)}
@media (max-width:760px){.sheet__swipe{display:block}}
.sheet__hd{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:14px clamp(16px,2vw,26px);border-bottom:1px solid var(--hair);
  font-size:.625rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ash-dim);
}

/* ── ORIGIN ──────────────────────────────────────── */
.origin__grid{
  display:grid;grid-template-columns:minmax(120px,1fr) minmax(0,5.4fr) minmax(0,4fr);
  gap:clamp(28px,3.6vw,64px);align-items:start;
}
.statement{
  font-family:var(--ff-d);font-weight:400;
  font-size:clamp(1.6rem,.9rem + 2.5vw,3rem);line-height:1.2;letter-spacing:-.01em;color:var(--bone);
}
.statement em{font-style:italic;color:var(--gold-hi)}
.origin__body{display:grid;gap:20px;padding-top:.55em;color:var(--ash);max-width:46ch}
.rules{display:grid;gap:0;margin-top:10px;border-top:1px solid var(--hair)}
.rules li{
  padding:14px 0 14px 26px;border-bottom:1px solid var(--hair);position:relative;
  font-size:.875rem;letter-spacing:.01em;color:var(--travertine);
}
.rules li::before{content:'';position:absolute;left:0;top:22px;width:10px;height:1px;background:var(--gold)}

/* ── HOLDING ─────────────────────────────────────────
   The roadmap is the wall. Leasing is laid stone; Freight is half-set;
   the rest are still setting-out lines on the drawing. Nothing is
   claimed to exist that doesn't.                                      */
/* Five courses, laid bottom to top in the reading order. The light rakes
   in from the right exactly as it does on the hero wall, so the section
   belongs to the same building. */
.wall5{display:grid;gap:2px;background:rgba(196,186,164,.06);padding:2px}
.crs{
  position:relative;overflow:hidden;
  display:grid;
  grid-template-columns:clamp(84px,8.5vw,112px) minmax(190px,1.05fr) minmax(0,1.6fr) 46px;
  align-items:center;gap:clamp(16px,2.4vw,40px);
  padding:clamp(24px,2.7vw,38px) clamp(20px,2.6vw,38px);
  background:linear-gradient(96deg,#0B0C0F 0%,#0D0E12 66%,#101116 100%);
  transition:background .7s var(--e),box-shadow .7s var(--e);
}
.crs::after{ /* the sun on the right edge of a laid course */
  content:'';position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity 1.1s var(--e);
  background:linear-gradient(94deg,transparent 52%,rgba(200,164,77,.09) 88%,rgba(200,164,77,.20) 100%);
}
.crs--soon{background:linear-gradient(96deg,#0C0D11 0%,#121319 62%,#191B21 100%)}
.crs--on{
  background:linear-gradient(96deg,#101116 0%,#1A1C22 58%,#282A32 100%);
  box-shadow:inset 0 1px 0 rgba(200,164,77,.42);
}
.crs--on::after{opacity:1}
.crs:hover::after{opacity:.5}
.crs:hover{background:linear-gradient(96deg,#0D0E12 0%,#15161B 62%,#1E2027 100%)}

.crs__st{font-size:.625rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ash-dim)}
.crs--on .crs__st{color:var(--gold)}
.crs__n{
  font-family:var(--ff-d);font-weight:400;font-size:clamp(1.55rem,1rem + 1.7vw,2.5rem);
  line-height:1.04;color:var(--stone-500);letter-spacing:.008em;transition:color .6s var(--e);
}
.crs--soon .crs__n{color:var(--ash)}
.crs--on .crs__n,.crs:hover .crs__n{color:var(--bone)}
.crs__d{font-size:.875rem;color:var(--ash-dim);line-height:1.62}
.crs--on .crs__d{color:var(--travertine)}
.crs__i{
  font-family:var(--ff-d);font-size:1.25rem;color:var(--stone-500);text-align:right;
  font-feature-settings:'lnum' 1,'tnum' 1;transition:color .6s var(--e);
}
.crs--on .crs__i{color:var(--gold)}

/* ── CONTACT ─────────────────────────────────────── */
.contact{border-top:1px solid var(--hair);background:linear-gradient(180deg,rgba(18,19,23,.45),rgba(8,8,10,0) 60%)}
.contact__grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(40px,5vw,90px);align-items:start}
.contact__l{display:grid;gap:clamp(18px,2.2vw,28px);align-content:start}
.contact__p{color:var(--ash);max-width:40ch}
.facts{display:grid;gap:0;margin-top:clamp(10px,2vw,26px);max-width:420px;border-top:1px solid var(--hair)}
.facts>div{display:grid;grid-template-columns:minmax(96px,30%) 1fr;gap:18px;
  padding:15px 0;border-bottom:1px solid var(--hair);align-items:baseline}
.facts dt{font-size:.625rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ash-dim)}
.facts dd{font-size:.9375rem;color:var(--travertine)}
.contact__r{display:grid;border-top:1px solid var(--hair-strong)}
.line{
  display:grid;grid-template-columns:minmax(96px,26%) 1fr;gap:18px;align-items:baseline;
  padding:clamp(18px,2vw,26px) 0;border-bottom:1px solid var(--hair);position:relative;
  transition:padding-inline .45s var(--e);
}
.line::after{content:'';position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .6s var(--e-out)}
a.line:hover{padding-inline:12px}
a.line:hover::after{transform:scaleX(1);transform-origin:left}
.line__k{font-size:.625rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ash-dim)}
.line__v{font-family:var(--ff-d);font-size:clamp(1.5rem,1rem + 1.5vw,2.25rem);color:var(--bone);line-height:1.14;letter-spacing:.005em;font-feature-settings:'lnum' 1,'tnum' 1;transition:color .4s var(--e)}
a.line:hover .line__v{color:var(--gold-hi)}
.line__v--sm{font-size:clamp(1.05rem,.9rem + .6vw,1.35rem)}
.line--static .line__v{color:var(--travertine)}

/* ── FOOTER ──────────────────────────────────────── */
.ftr{border-top:1px solid var(--hair);padding-block:clamp(44px,5vw,72px) 30px;margin-top:auto}
.ftr__top{
  display:grid;grid-template-columns:1fr auto 1.1fr;gap:clamp(28px,4vw,64px);
  align-items:start;padding-bottom:clamp(34px,4vw,54px);border-bottom:1px solid var(--hair);
}
.ftr__brand{display:flex;align-items:center;gap:12px;color:var(--bone)}
.ftr__brand span{font-size:.8125rem;letter-spacing:.34em;text-indent:.34em}
.ftr__nav{display:grid;gap:9px;font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase}
.ftr__nav a{color:var(--ash);transition:color .35s var(--e)}
.ftr__nav a:hover{color:var(--bone)}
.ftr__cta{display:grid;gap:14px;justify-items:start}
.ftr__cta a{display:grid;gap:2px;font-size:1.0625rem;color:var(--travertine);transition:color .35s var(--e)}
.ftr__cta a:hover{color:var(--gold-hi)}
.ftr__cta b{font-weight:400;font-size:.625rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ash-dim)}
.ftr__grid{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
  padding-top:26px;font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ash-dim)}

/* ═══════════════════════════════════════════════════
   PAGE ARCHITECTURE
   ═══════════════════════════════════════════════════ */
html,body{min-height:100%}
body{display:flex;flex-direction:column}
main{flex:1 0 auto}

/* ── page transitions ────────────────────────────── */
main{opacity:1;transform:none;transition:opacity .21s var(--e),transform .21s var(--e)}
body.is-leaving main{opacity:0;transform:translateY(-10px)}
body.is-entering main{animation:pageIn .6s var(--e-out) both}
@keyframes pageIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.wipe{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:120;pointer-events:none;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold-hi),var(--gold-deep));
  box-shadow:0 0 24px 2px rgba(200,164,77,.35);
  transform:scaleX(0);transform-origin:left;opacity:0;
}
body.is-leaving .wipe{animation:wipeIn .24s var(--e-out) forwards}
body.is-entering .wipe{animation:wipeOut .5s var(--e) forwards}
@keyframes wipeIn{from{transform:scaleX(0);opacity:1}to{transform:scaleX(1);opacity:1}}
@keyframes wipeOut{0%{transform:scaleX(1);transform-origin:right;opacity:1}
  100%{transform:scaleX(0);transform-origin:right;opacity:0}}

/* ── page head ───────────────────────────────────── */
.phead{
  position:relative;isolation:isolate;
  min-height:clamp(400px,58svh,620px);
  display:flex;align-items:flex-end;
  padding:clamp(140px,20vh,220px) 0 clamp(40px,6vh,74px);
}
.phead--tall{min-height:clamp(440px,66svh,700px)}
.phead__stage{position:absolute;inset:0;z-index:-1;overflow:hidden;background:#08080A}
.phead__canvas{width:100%;height:100%;opacity:0;transition:opacity 1.1s var(--e)}
.phead__canvas.on{opacity:1}
.phead__grad{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(96deg,rgba(8,8,10,.92) 0%,rgba(8,8,10,.66) 28%,rgba(8,8,10,.16) 58%,rgba(8,8,10,0) 76%),
    linear-gradient(180deg,rgba(8,8,10,.72) 0%,rgba(8,8,10,.08) 26%,rgba(8,8,10,.42) 76%,rgba(8,8,10,.98) 100%);
}
.phead__body{display:grid;gap:clamp(16px,2vw,26px);max-width:900px}
.phead__h1{
  font-family:var(--ff-d);font-weight:400;
  font-size:clamp(2.6rem,1.3rem + 5.6vw,6.4rem);
  line-height:.98;letter-spacing:-.018em;color:var(--bone);
}
.phead__h1:focus{outline:none}
.phead__h1 .ln{display:block;overflow:hidden;padding-bottom:.05em}
.phead__h1 .ln>span{display:block}
.js .phead__h1 .ln>span{transform:translateY(110%);animation:lnUp 1.05s var(--e-out) .08s forwards}
.js .phead__h1 .ln:nth-child(2)>span{animation-delay:.16s}
@keyframes lnUp{to{transform:none}}
.phead__sub{max-width:52ch;color:var(--travertine);font-size:clamp(.98rem,.9rem + .3vw,1.125rem);line-height:1.62}

.tlink{
  display:inline-flex;align-items:center;gap:10px;margin-top:6px;
  font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
  transition:gap .4s var(--e-out),color .35s var(--e);
}
.tlink::after{content:'';width:22px;height:1px;background:currentColor}
.tlink:hover{gap:16px;color:var(--gold-hi)}

/* ── doors (home section entrances) ──────────────── */
.crs--door{cursor:pointer}
.crs--door .crs__n{color:var(--ash)}
.crs--door.crs--on .crs__n{color:var(--bone)}
.crs--door::before{
  content:'';position:absolute;right:clamp(20px,2.6vw,38px);top:50%;
  width:26px;height:1px;background:var(--gold);
  transform:translateY(-50%) scaleX(0);transform-origin:right;
  transition:transform .5s var(--e-out);z-index:1;
}
.crs--door:hover::before{transform:translateY(-50%) scaleX(1);transform-origin:left}
.crs--door:hover .crs__i{opacity:0}
.crs__i{transition:color .6s var(--e),opacity .4s var(--e)}

/* ── closer ──────────────────────────────────────── */
.closer{border-top:1px solid var(--hair);
  background:linear-gradient(180deg,rgba(20,22,27,.5),rgba(8,8,10,0) 70%)}
.closer__in{display:grid;gap:clamp(18px,2.4vw,30px);justify-items:start;max-width:760px}
.closer__p{color:var(--ash);max-width:46ch}
.closer__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}

/* ── steps ───────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair)}
.step{background:var(--void);padding:clamp(26px,2.8vw,40px) clamp(20px,2.2vw,32px);display:grid;gap:12px;align-content:start}
.step__n{font-family:var(--ff-d);font-size:1.75rem;color:var(--gold);line-height:1;font-feature-settings:'lnum' 1,'tnum' 1}

.step h3{font-family:var(--ff-d);font-weight:400;font-size:clamp(1.35rem,1rem + 1vw,1.75rem);color:var(--bone);line-height:1.1}
.step p{font-size:.875rem;color:var(--ash);line-height:1.65}

/* ── 404 ─────────────────────────────────────────── */
.e404__nav{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:10px}
.e404__nav a{
  font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ash);
  position:relative;padding-bottom:4px;transition:color .35s var(--e);
}
.e404__nav a::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--e-out)}
.e404__nav a:hover{color:var(--bone)}
.e404__nav a:hover::after{transform:scaleX(1);transform-origin:left}

/* ── REVEAL ──────────────────────────────────────── */
/* Nothing is hidden unless a script exists to reveal it: with JS off the
   page is simply the page. */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .95s var(--e-out),transform .95s var(--e-out)}
.js .rv.in{opacity:1;transform:none}

/* ── RESPONSIVE ──────────────────────────────────── */
@media (max-width:1080px){
  .sec__head--split{grid-template-columns:1fr;gap:28px}
  .lead{max-width:56ch}

  .ftr__top{grid-template-columns:1fr 1fr;gap:32px}
  .ftr__brand{grid-column:1/-1}
  .origin__grid{grid-template-columns:1fr 1fr;gap:36px}
  .origin__grid .label{grid-column:1/-1}


}
@media (max-width:900px){
  .hdr__nav{display:none}
  .burger{display:block}
  .hero__meta{display:none}
  .hdr{padding:16px var(--pad)}
  .lang__b{padding:5px 9px;font-size:.5625rem}
  .lang__pill{width:32px}
  .lang[data-i="1"] .lang__pill{transform:translateX(32px)}
  .hdr__word{font-size:.75rem;letter-spacing:.3em;text-indent:.3em}
}
@media (max-width:760px){
  .origin__grid{grid-template-columns:1fr}
  .contact__grid{grid-template-columns:1fr}



  .h2 br{display:none}
  /* a technical drawing has a minimum legible size; let the phone pan it */
  .fleet__draw{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-inline:0;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,rgba(0,0,0,.25) 100%);
    mask-image:linear-gradient(90deg,#000 88%,rgba(0,0,0,.25) 100%)}
  .crs{grid-template-columns:1fr auto;gap:6px 14px;padding:22px 20px;align-items:baseline}
  .crs__st{grid-column:1;grid-row:1}
  .crs__i{grid-column:2;grid-row:1;font-size:1rem}
  .crs__n{grid-column:1/-1}
  .crs__d{grid-column:1/-1;margin-top:2px}
  .crs::after{-webkit-mask-image:linear-gradient(92deg,transparent 62%,#000 100%);mask-image:linear-gradient(92deg,transparent 62%,#000 100%)}

  .line{grid-template-columns:1fr;gap:6px}
  .steps{grid-template-columns:1fr}







  .ftr__top{grid-template-columns:1fr;gap:26px}

}
@media (max-width:520px){
  .hero{padding-top:clamp(96px,15vh,140px)}
  .hero__sub{font-size:.9375rem;line-height:1.58}

  .hero__foot{justify-content:flex-start}
  .btn{flex:1 1 100%;height:54px}
  .ftr__grid{flex-direction:column;align-items:flex-start;gap:10px}
}

/* ── NO-WEBGL FALLBACK ───────────────────────────── */
/* A wall drawn in pure CSS: courses, mortar and one raking light. */
.no-gl .hero__canvas{display:none}
.no-gl .hero__stage{
  background:
    radial-gradient(60% 70% at 104% 24%,rgba(255,158,64,.13),transparent 64%),
    repeating-linear-gradient(180deg,
      rgba(237,233,225,.05) 0 1px,
      transparent 1px 102px,
      rgba(0,0,0,.55) 102px 106px),
    linear-gradient(96deg,#08080A 0%,#0E0F14 56%,#1C1E26 100%);
}
/* joints and gold appear only where the light reaches, as in the shader */
.no-gl .hero__stage::before,
.no-gl .hero__stage::after{
  content:'';position:absolute;inset:0;
  -webkit-mask-image:linear-gradient(96deg,transparent 38%,#000 100%);
  mask-image:linear-gradient(96deg,transparent 38%,#000 100%);
}
.no-gl .hero__stage::before{
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.5) 0 2px,transparent 2px 214px);
}
.no-gl .hero__stage::after{
  background:repeating-linear-gradient(180deg,rgba(200,164,77,.5) 0 1px,transparent 1px 318px);
  background-position:0 74px;
}

/* ── REDUCED MOTION ──────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .rv{opacity:1;transform:none}
  .hero__h1 .ln>span{transform:none}
  .cur{display:none}
}


/* ═══════════════════════════════════════════════════
   PAGES: FORK, ROADS, Q&A, BLUEPRINT
   ═══════════════════════════════════════════════════ */


.phead__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.phead__note{font-size:.8125rem;color:var(--ash-dim);max-width:52ch}
.phead__note a{color:var(--gold);border-bottom:1px solid rgba(200,164,77,.35);padding-bottom:1px}
.phead__note a:hover{color:var(--gold-hi)}

/* ── the fork ─────────────────────────────────────── */
.roads{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:rgba(196,186,164,.09)}
.road{
  position:relative;display:grid;align-content:start;gap:16px;
  padding:clamp(30px,3.4vw,52px) clamp(24px,2.8vw,44px) clamp(28px,3vw,44px);
  background:linear-gradient(150deg,#131519 0%,#0C0D11 62%,#0A0A0C 100%);
  transition:background .6s var(--e);isolation:isolate;overflow:hidden;
}
.road::before{
  content:'';position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .7s var(--e);
  background:
    radial-gradient(80% 60% at 88% 0%,rgba(200,164,77,.13),transparent 68%),
    linear-gradient(150deg,#1C1F25 0%,#101116 60%,#0B0C0F 100%);
}
.road:hover::before,.road:focus-visible::before{opacity:1}
.road::after{
  content:'';position:absolute;left:0;top:0;height:2px;width:100%;
  background:linear-gradient(90deg,var(--gold-hi),var(--gold-deep));
  transform:scaleX(0);transform-origin:left;transition:transform .7s var(--e-out);
}
.road:hover::after,.road:focus-visible::after{transform:scaleX(1)}
.road__n{
  font-family:var(--ff-d);font-size:1.125rem;color:var(--stone-500);
  font-feature-settings:'lnum' 1,'tnum' 1;transition:color .6s var(--e);
}
.road:hover .road__n{color:var(--gold)}
.road__k{font-size:.625rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ash-dim)}
.road__h{
  font-family:var(--ff-d);font-weight:400;font-size:clamp(1.9rem,1.2rem + 2.2vw,3.1rem);
  line-height:1.04;letter-spacing:-.01em;color:var(--bone);
}
.road__l{display:grid;gap:11px;margin-top:4px}
.road__l li{position:relative;padding-left:20px;font-size:.875rem;color:var(--ash);line-height:1.55}
.road__l li::before{content:'';position:absolute;left:0;top:10px;width:8px;height:1px;background:var(--gold-deep)}
.road__cta{
  display:inline-flex;align-items:center;gap:10px;margin-top:10px;
  font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
  transition:gap .45s var(--e-out);
}
.road__cta::after{content:'';width:24px;height:1px;background:currentColor}
.road:hover .road__cta{gap:16px}


/* ── question / answer ────────────────────────────── */
.qa{display:grid;gap:0;border-top:1px solid var(--hair-strong)}
.qa__row{
  display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,1.65fr);
  gap:clamp(18px,3vw,56px);align-items:start;
  padding:clamp(22px,2.6vw,34px) 0;border-bottom:1px solid var(--hair);
  transition:padding-inline .45s var(--e),background .45s var(--e);
}
.qa__row:hover{background:rgba(255,255,255,.014);padding-inline:14px}
.qa__row h3{
  font-family:var(--ff-d);font-weight:400;font-size:clamp(1.25rem,1rem + .9vw,1.75rem);
  line-height:1.14;color:var(--bone);letter-spacing:.005em;
}
.qa__row p{font-size:.9375rem;color:var(--ash);line-height:1.68;max-width:62ch}

.steps--4{grid-template-columns:repeat(4,1fr)}

/* ── the blueprint that draws itself ──────────────── */
.bp__wrap{padding:clamp(10px,1.6vw,22px) clamp(6px,1.2vw,18px);overflow-x:auto;-webkit-overflow-scrolling:touch}
.bp{width:100%;height:auto;display:block;color:rgba(200,164,77,.72)}
.bp__grid{color:rgba(196,186,164,.5)}
.bp g[data-seq]{--d:0s}
.bp g[data-seq] > *{
  fill:none;stroke:currentColor;stroke-width:1.1;
  stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 1.15s var(--e-out) var(--d);
}
.bp .bp__sheet > *{stroke:rgba(196,186,164,.28);stroke-width:1}
.bp .bp__sheet > rect{stroke:none;stroke-dasharray:none;stroke-dashoffset:0;
  opacity:0;transition:opacity .9s var(--e) var(--d)}
.bp .bp__ground > *{stroke:rgba(196,186,164,.20)}
.bp .bp__fine > *{stroke:rgba(200,164,77,.34);stroke-width:.85}
.bp .bp__dim > *{stroke:rgba(196,186,164,.34);stroke-width:.85}
.bp .bp__lead > *{stroke:rgba(196,186,164,.30);stroke-width:.85}
.rv.in .bp g[data-seq] > *{stroke-dashoffset:0}
.rv.in .bp .bp__sheet > rect{opacity:1}

.bp__tx{--d:0s}
.bp__tx > text{opacity:0;transition:opacity .9s var(--e) var(--d)}
.rv.in .bp__tx > text{opacity:1}
.bp__t{fill:var(--travertine);font-family:InterA,sans-serif;font-size:11px;letter-spacing:.16em}
.bp__t--sub{fill:var(--ash-dim);font-size:10px}
.bp__t--dim{fill:var(--ash);font-size:10.5px;letter-spacing:.2em}
.bp__t--gold{fill:var(--gold)}
.bp__brand{fill:rgba(237,233,225,.26);font-family:InterA,sans-serif;font-size:26px;letter-spacing:.46em}

@media (prefers-reduced-motion:reduce){
  .bp g[data-seq] > *{stroke-dashoffset:0}
  .bp .bp__sheet > rect,.bp__tx > text{opacity:1}
}

@media (max-width:1080px){
  .roads{grid-template-columns:1fr}
  .steps--4{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .qa__row{grid-template-columns:1fr;gap:10px}
  .steps--4{grid-template-columns:1fr}
  .bp{min-width:780px}
  .road{padding:26px 20px 28px}
}


/* ═══════════════════════════════════════════════════
   2026 · MOTION TYPOGRAPHY
   Headlines arrive a word at a time, from behind their
   own baseline. One device, used everywhere, never twice
   in the same viewport.
   ═══════════════════════════════════════════════════ */
.kt{overflow:visible}
.js .kt .w{display:inline-block;overflow:hidden;vertical-align:top}
.js .kt .w > i{
  display:inline-block;font-style:inherit;
  transform:translateY(105%) rotate(2deg);opacity:0;
  transition:transform 1.05s var(--e-out) var(--wd,0s),opacity .8s var(--e) var(--wd,0s);
}
.js .kt.in .w > i,.js .ready .hero__h1.kt .w > i{transform:none;opacity:1}

/* ═══════════════════════════════════════════════════
   2026 · SCROLL STORY
   Three statements over one pinned wall. Nothing moves
   that the reader did not move.
   ═══════════════════════════════════════════════════ */
.story{position:relative;height:300vh}
.story__pin{position:sticky;top:0;height:100svh;height:100vh;overflow:hidden;isolation:isolate}
.story__stage{position:absolute;inset:0;z-index:-1;background:#08080A}
.story__canvas{width:100%;height:100%;opacity:0;transition:opacity 1s var(--e)}
.story__canvas.on{opacity:1}
.story__grad{
  position:absolute;inset:0;
  background:
    linear-gradient(96deg,rgba(8,8,10,.92) 0%,rgba(8,8,10,.66) 30%,rgba(8,8,10,.18) 62%,rgba(8,8,10,0) 80%),
    linear-gradient(180deg,rgba(8,8,10,.86) 0%,rgba(8,8,10,0) 26%,rgba(8,8,10,0) 62%,rgba(8,8,10,.92) 100%);
}
.story__frames{position:relative;height:100%;display:grid;align-content:center}
.story__f{
  grid-area:1/1;opacity:0;transform:translateY(26px);
  transition:opacity .7s var(--e),transform .9s var(--e-out);
  max-width:900px;pointer-events:none;
}
.story__f.is-on{opacity:1;transform:none;pointer-events:auto}
.story__k{
  font-size:.6875rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);margin-bottom:clamp(16px,2vw,26px);
}
.story__h{
  font-family:var(--ff-d);font-weight:400;
  font-size:clamp(2.1rem,1.2rem + 3.6vw,4.6rem);
  line-height:1.06;letter-spacing:-.015em;color:var(--bone);
}
.story__rail{
  position:absolute;right:var(--pad);top:50%;transform:translateY(-50%);
  display:grid;gap:10px;
}
.story__rail i{display:block;width:1px;height:42px;background:var(--hair-strong);transition:background .5s var(--e)}
.story__rail i.on{background:var(--gold)}

/* ═══════════════════════════════════════════════════
   2026 · MICRO-INTERACTIONS
   ═══════════════════════════════════════════════════ */
.mag{will-change:transform}
.js .mag{transition:transform .5s var(--e-out),color .4s var(--e),border-color .4s var(--e)}

/* header call pill */
.lines{position:relative}
.lines__t{
  display:flex;align-items:center;gap:9px;padding:8px 15px;border-radius:999px;
  border:1px solid var(--hair-strong);
  font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--travertine);
  transition:border-color .4s var(--e),color .4s var(--e),background .4s var(--e);
}
.lines__t i{
  width:5px;height:5px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 0 rgba(200,164,77,.5);animation:pulse 3.2s var(--e) infinite;
}
.lines__t:hover,.lines__t[aria-expanded="true"]{border-color:rgba(200,164,77,.55);color:var(--bone);background:rgba(200,164,77,.06)}
.lines__p{
  position:absolute;top:calc(100% + 12px);right:0;z-index:10;min-width:250px;
  display:grid;gap:2px;padding:2px;
  background:rgba(10,11,14,.98);border:1px solid var(--hair-strong);
  box-shadow:0 30px 60px -30px #000;
}
.lines__p[hidden]{display:none}
.lines__p a{display:grid;gap:2px;padding:12px 16px;font-size:1rem;color:var(--travertine);
  font-variant-numeric:lining-nums tabular-nums;transition:background .35s var(--e),color .35s var(--e)}
.lines__p a:hover{background:rgba(200,164,77,.08);color:var(--gold-hi)}
.lines__p b{font-weight:400;font-size:.5625rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ash-dim)}

/* ═══════════════════════════════════════════════════
   PAGE PIECES
   ═══════════════════════════════════════════════════ */
.hero__note,.phead__note,.closer__note{
  font-size:.75rem;letter-spacing:.06em;color:var(--ash-dim);line-height:1.5;
  padding-left:16px;border-left:1px solid var(--gold-deep);max-width:64ch;
}
.hero__note span,.phead__note span,.closer__note span{white-space:nowrap}
.closer__note{margin-top:8px}

.road--yes .road__n,.road--no .road__n{font-size:1.4rem}
.road--yes .road__n{color:var(--gold)}
.road--yes::after{background:linear-gradient(90deg,var(--gold-hi),var(--gold-deep));transform:scaleX(1)}
.road--no::after{background:var(--hair-strong);transform:scaleX(1)}
.road--no .road__h{color:var(--ash)}

.steps--5{grid-template-columns:repeat(5,1fr)}

/* ── apply block ─────────────────────────────────── */
.apply{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(20px,3vw,52px);align-items:start}
.apply__fast{display:grid;gap:2px;background:rgba(196,186,164,.09);padding:2px}
.fastbtn{
  display:grid;gap:3px;padding:clamp(16px,1.8vw,22px) clamp(16px,2vw,26px);
  background:linear-gradient(150deg,#141619 0%,#0C0D11 70%);
  transition:background .5s var(--e);
}
.fastbtn:hover{background:linear-gradient(150deg,#1C1F25 0%,#101116 70%)}
.fastbtn b{font-weight:400;font-size:.5625rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ash-dim)}
.fastbtn span{font-family:var(--ff-d);font-size:clamp(1.15rem,1rem + .6vw,1.5rem);color:var(--bone);
  font-variant-numeric:lining-nums tabular-nums;line-height:1.15}
.fastbtn i{font-style:normal;font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.fastbtn--wa span{color:var(--gold-hi)}

/* ── form ────────────────────────────────────────── */
.form{
  border:1px solid var(--hair);padding:clamp(20px,2.6vw,36px);
  background:linear-gradient(150deg,rgba(24,26,31,.55),rgba(8,8,10,0) 70%);
  display:grid;gap:clamp(18px,2.2vw,26px);
}
.hp{position:absolute;left:-9999px;opacity:0;pointer-events:none}
.form__row{border:0;padding:0;margin:0;display:grid;gap:10px}
.form__row legend{font-size:.625rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ash-dim);padding:0}
.form__opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{position:relative;display:inline-flex}
.opt input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.opt span{
  padding:11px 20px;border:1px solid var(--hair-strong);
  font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ash);
  transition:color .35s var(--e),border-color .35s var(--e),background .35s var(--e);
}
.opt input:hover + span{color:var(--bone);border-color:rgba(200,164,77,.4)}
.opt input:checked + span{color:#0B0B0D;border-color:transparent;background:linear-gradient(160deg,var(--gold-hi),var(--gold))}
.opt input:focus-visible + span{outline:1px solid var(--gold);outline-offset:3px}

.form__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,20px)}
.fld{display:grid;gap:8px}
.fld--wide{grid-column:1/-1}
.fld > span{font-size:.625rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ash-dim)}
.fld input,.fld select,.fld textarea{
  width:100%;padding:13px 15px;font:inherit;font-size:.9375rem;color:var(--bone);
  background:rgba(255,255,255,.022);border:1px solid var(--hair-strong);border-radius:0;
  transition:border-color .35s var(--e),background .35s var(--e);
}
.fld textarea{resize:vertical;min-height:96px;line-height:1.55}
.fld select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ash) 50%),linear-gradient(135deg,var(--ash) 50%,transparent 50%);
  background-position:calc(100% - 19px) 21px,calc(100% - 14px) 21px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.fld select option{background:#0E0F13;color:var(--bone)}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  outline:none;border-color:rgba(200,164,77,.6);background:rgba(200,164,77,.05)}
.form__foot{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px}
.form__note{font-size:.75rem;color:var(--ash-dim);max-width:40ch;line-height:1.6}
.form__msg{font-size:.875rem;color:var(--gold-hi);min-height:1.2em}
.form__msg[data-state="err"]{color:#D98C74}
.form.is-sent .form__grid,.form.is-sent .form__row,.form.is-sent .form__foot{display:none}

@media (max-width:1080px){
  .apply{grid-template-columns:1fr}
  .steps--5{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .lines{display:none}
  .story{height:260vh}
}
@media (max-width:760px){
  .form__grid{grid-template-columns:1fr}
  .steps--5{grid-template-columns:1fr}
  .story__rail{display:none}
}
@media (prefers-reduced-motion:reduce){
  .js .kt .w > i{transform:none;opacity:1}
  .story{height:auto}
  .story__pin{position:relative;height:auto;padding:clamp(80px,12vh,140px) 0}
  .story__frames{display:grid;gap:clamp(40px,6vh,80px)}
  .story__f{grid-area:auto;opacity:1;transform:none;pointer-events:auto}
}