/* ═══════════════════════════════════════════════════════════════
   META SKY WALLS — Luxurious Façade
   Design system: architectural dark / metallic / cinematic
   ═══════════════════════════════════════════════════════════════ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* surface */
  --void:#050506;
  --ink:#08090b;
  --panel:#0d0e12;
  --panel-2:#13151a;
  --panel-3:#191c22;

  /* line */
  --line:rgba(255,255,255,.075);
  --line-2:rgba(255,255,255,.15);
  --line-gold:rgba(201,162,75,.32);

  /* text */
  --txt:#e9eaee;
  --txt-2:#9ba0aa;
  --txt-3:#686d77;

  /* brand metal */
  --gold:#c9a24b;
  --gold-hi:#f4e2ab;
  --gold-lo:#8a6a2b;
  --grad-gold-2:linear-gradient(112deg,#f6e8bd 0%,#c9a24b 36%,#8a6a2b 58%,#e8d197 82%,#fbf1cf 100%);

  /* type */
  --fd:'Syne','Helvetica Neue',Arial,sans-serif;
  --fb:'Manrope','Helvetica Neue',Arial,sans-serif;
  --fm:'Space Mono',ui-monospace,monospace;

  /* motion */
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.65,0,.35,1);
  --e-soft:cubic-bezier(.4,0,.2,1);

  /* layout */
  --gut:clamp(18px,4vw,64px);
  --maxw:1520px;
  --nav-h:74px;
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:auto;
}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

body{
  background:var(--void);
  color:var(--txt);
  font-family:var(--fb);
  font-weight:300;
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
  text-rendering:optimizeLegibility;
}
body.is-locked{overflow:hidden}

img,svg,canvas,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:0}
button{cursor:pointer}
ul,ol{list-style:none}

::selection{background:var(--gold);color:#0a0a0a}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}

.skip{
  position:fixed;top:-100px;left:16px;z-index:9999;
  background:var(--gold);color:#0a0a0a;padding:10px 16px;font-size:13px;font-weight:600;
}
.skip:focus{top:16px}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}

/* ---------- 2. TYPOGRAPHY ---------- */
.h2{
  font-family:var(--fd);
  font-weight:700;
  font-size:clamp(2rem,4.6vw,4.4rem);
  line-height:.98;
  letter-spacing:-.03em;
  text-wrap:balance;
}
.h2--big{font-size:clamp(2.4rem,6.4vw,6rem)}

.lede{
  font-size:clamp(1rem,1.15vw,1.2rem);
  line-height:1.7;
  color:var(--txt-2);
  font-weight:300;
  max-width:62ch;
}
.lede--tight{max-width:52ch}

.eyebrow{
  display:flex;align-items:center;gap:14px;
  font-family:var(--fm);
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--txt-3);
  white-space:nowrap;
}
.eyebrow i{flex:0 0 auto;width:clamp(28px,5vw,70px);height:1px;background:var(--line-2)}
.eyebrow--gold{color:var(--gold-hi)}
.eyebrow--gold i{background:var(--line-gold)}
/* the hero eyebrow sits on live metal, so it needs its own contrast floor */
.hero .eyebrow--gold{text-shadow:0 1px 14px rgba(5,5,6,.9),0 0 3px rgba(5,5,6,.8)}

em{font-style:normal}
/* the word splitter nests .w inside <em>, so the gradient has to live on
   whichever element actually paints the glyphs */
.hero__h1 em,.hero__h1 em .w,.h2 em,.h2 em .w,.gold{
  background:var(--grad-gold-2);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* ---------- 3. BUTTONS ---------- */
.btn{
  --bh:54px;
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  height:var(--bh);padding:0 30px;
  border-radius:999px;
  font-family:var(--fb);font-size:13.5px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
  overflow:hidden;isolation:isolate;
  transition:transform .5s var(--e-out),color .35s var(--e-soft);
  will-change:transform;
}
.btn--sm{--bh:44px;padding:0 22px;font-size:12px}
.btn span{position:relative;z-index:2}

.btn--gold{color:#0a0a0a;background:var(--grad-gold-2);background-size:200% 100%}
.btn--gold::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(112deg,#fff8e2,#f0d79b 40%,#c9a24b);
  opacity:0;transition:opacity .4s var(--e-soft);
}
.btn--gold:hover::after{opacity:1}

.btn--ghost{color:var(--txt);border:1px solid var(--line-2)}
.btn--ghost::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:var(--grad-gold-2);
  transform:translateY(101%);transition:transform .55s var(--e-out);
}
.btn--ghost:hover{color:#0a0a0a;border-color:transparent}
.btn--ghost:hover::after{transform:translateY(0)}

.btn:active{transform:scale(.97)}

/* ---------- 4. GLOBAL CHROME ---------- */
.grain{
  position:fixed;inset:-50%;z-index:9000;pointer-events:none;
  opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  animation:grainShift 8s steps(6) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)}      20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-3%)}  60%{transform:translate(-2%,-2%)}
  80%{transform:translate(3%,1%)}   100%{transform:translate(0,0)}
}

.scrollbar{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:8000;
  background:rgba(255,255,255,.05);pointer-events:none;
}
.scrollbar i{
  display:block;height:100%;width:0;
  background:var(--grad-gold-2);
  box-shadow:0 0 14px rgba(201,162,75,.6);
}

.cursor{
  position:fixed;top:0;left:0;z-index:9500;pointer-events:none;
  width:34px;height:34px;margin:-17px 0 0 -17px;
  border:1px solid var(--line-gold);border-radius:50%;
  display:none;
  transition:width .35s var(--e-out),height .35s var(--e-out),
             margin .35s var(--e-out),background-color .35s var(--e-out),
             border-color .35s var(--e-out),opacity .3s linear;
}
.cursor i{
  position:absolute;inset:0;margin:auto;width:3px;height:3px;border-radius:50%;
  background:var(--gold);transition:opacity .3s;
}
.cursor.is-on{display:block}
.cursor.is-hot{
  width:64px;height:64px;margin:-32px 0 0 -32px;
  background:rgba(201,162,75,.1);border-color:var(--gold);
}
.cursor.is-hot i{opacity:0}
@media (hover:none),(pointer:coarse){.cursor{display:none!important}}

/* ---------- 5. LOADER ---------- */
.loader{
  position:fixed;inset:0;z-index:9800;
  display:grid;place-items:center;
  background:
    radial-gradient(ellipse 46% 38% at 50% 44%,rgba(201,162,75,.22),transparent 62%),
    #07080b;
}
.loader__inner{
  position:relative;z-index:4;width:min(420px,78vw);text-align:center;
}
.loader__stage{
  position:relative;width:220px;height:220px;margin:0 auto 26px;
  perspective:760px;
}
.loader__coins{
  position:absolute;inset:0;
  transform-style:preserve-3d;
  transform:rotateX(18deg);
  animation:coinOrbit 3.4s linear infinite;
}
.loader__coins i{
  position:absolute;left:50%;top:50%;
  width:40px;height:40px;margin:-20px 0 0 -20px;
  border-radius:50%;
  background:
    radial-gradient(circle at 30% 26%,#fff8d8 0 10%,#f4e2ab 26%,#d4a84e 50%,#8a6a2b 76%,#3a2a10 100%);
  box-shadow:
    0 0 18px rgba(201,162,75,.75),
    6px 0 0 -2px #6a501c,
    inset 0 -5px 8px rgba(0,0,0,.35),
    inset 0 3px 5px rgba(255,244,210,.5);
  transform:rotateY(calc(var(--a) * 1deg)) translateZ(92px);
  backface-visibility:visible;
}
.loader__coins i:nth-child(1){--a:0}
.loader__coins i:nth-child(2){--a:45}
.loader__coins i:nth-child(3){--a:90}
.loader__coins i:nth-child(4){--a:135}
.loader__coins i:nth-child(5){--a:180}
.loader__coins i:nth-child(6){--a:225}
.loader__coins i:nth-child(7){--a:270}
.loader__coins i:nth-child(8){--a:315}
.loader__core{
  position:absolute;inset:62px;
  display:grid;place-items:center;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#1c160c,#0a0b0d 70%);
  border:1px solid rgba(244,226,171,.55);
  box-shadow:0 0 28px rgba(201,162,75,.45),inset 0 0 22px rgba(201,162,75,.12);
}
.loader__core b{
  font-family:var(--fd);font-weight:800;font-size:42px;letter-spacing:-.04em;line-height:1;
  color:var(--gold-hi);
  background:var(--grad-gold-2);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 10px rgba(201,162,75,.55));
}
.loader__brand{
  font-family:var(--fd);font-weight:700;font-size:15px;letter-spacing:.2em;
  color:var(--gold-hi);
  background:var(--grad-gold-2);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  margin-bottom:16px;
}
@keyframes coinOrbit{to{transform:rotateX(18deg) rotateY(360deg)}}
.loader__meta{
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--fm);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:#c5c8d0;margin-bottom:12px;
}
.loader__num{color:var(--gold-hi)}
.loader__bar{height:2px;background:rgba(255,255,255,.16);overflow:hidden}
.loader__bar i{display:block;height:100%;width:0;background:var(--grad-gold-2);box-shadow:0 0 10px rgba(201,162,75,.55)}

.loader__blades{display:none}
.loader.is-done,.loader.is-gone{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:none;
}

/* ---------- 6. NAV ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:7000;
  height:var(--nav-h);
  display:flex;align-items:center;gap:24px;
  padding-inline:var(--gut);
  transition:background-color .5s var(--e-soft),backdrop-filter .5s,
             border-color .5s,height .5s var(--e-soft),transform .6s var(--e-out);
  border-bottom:1px solid transparent;
}
.nav.is-solid{
  height:64px;
  background:rgba(6,7,9,.72);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--line);
}
.nav.is-hidden{transform:translateY(-102%)}

.nav__brand{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.nav__brand img{width:44px;height:auto;filter:drop-shadow(0 0 10px rgba(201,162,75,.25))}
.nav__brandtx{display:flex;flex-direction:column;line-height:1.1}
.nav__brandtx b{
  font-family:var(--fd);font-weight:700;font-size:13px;letter-spacing:.13em;
  background:var(--grad-gold-2);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.nav__brandtx i{font-family:var(--fm);font-size:8.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--txt-3)}

.nav__links{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav__links a{
  position:relative;padding:9px 15px;
  font-size:12.5px;font-weight:500;letter-spacing:.05em;
  color:var(--txt-2);transition:color .3s var(--e-soft);
}
.nav__links a::after{
  content:"";position:absolute;left:15px;right:15px;bottom:4px;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--e-out);
}
.nav__links a:hover{color:var(--txt)}
.nav__links a:hover::after,.nav__links a.is-here::after{transform:scaleX(1)}
.nav__links a.is-here{color:var(--gold)}

.nav__right{display:flex;align-items:center;gap:14px;flex:0 0 auto}

.burger{display:none;width:44px;height:44px;position:relative;flex:0 0 auto}
.burger i{
  position:absolute;left:11px;width:22px;height:1.5px;background:var(--txt);
  transition:transform .45s var(--e-out),opacity .3s;
}
.burger i:nth-child(1){top:19px}
.burger i:nth-child(2){top:25px}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(3px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

/* drawer */
.drawer{
  position:fixed;inset:0;z-index:6900;
  background:var(--ink);
  padding:calc(var(--nav-h) + 30px) var(--gut) 40px;
  display:flex;flex-direction:column;justify-content:space-between;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .8s var(--e-out);
  pointer-events:none;
}
.drawer.is-open{clip-path:inset(0 0 0 0);pointer-events:auto}
.drawer__list{display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.drawer__list a{
  display:flex;align-items:baseline;gap:16px;
  padding:12px 0;border-bottom:1px solid var(--line);
  font-family:var(--fd);font-weight:600;font-size:clamp(1.5rem,7vw,2.4rem);
  letter-spacing:-.02em;
  opacity:0;transform:translateY(18px);
  transition:opacity .6s var(--e-out),transform .6s var(--e-out),color .3s;
}
.drawer.is-open .drawer__list a{opacity:1;transform:none}
.drawer__list a em{font-family:var(--fm);font-size:11px;color:var(--gold);letter-spacing:.15em}
.drawer__list a:active{color:var(--gold)}
.drawer__foot{display:flex;flex-direction:column;gap:6px;font-family:var(--fm);font-size:12px;color:var(--txt-2);padding-top:24px}

/* ---------- 7. SECTION BASE ---------- */
.sec{position:relative;padding-block:clamp(80px,10vw,170px)}
.sec::before{
  content:"";position:absolute;top:0;left:var(--gut);right:var(--gut);height:1px;
  background:linear-gradient(90deg,transparent,var(--line) 12%,var(--line) 88%,transparent);
}
.hero::before,.sig::before{display:none}

/* ---------- 8. HERO ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:calc(var(--nav-h) + 40px) 0 0;
  overflow:hidden;
  isolation:isolate;
}
.hero__gl{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:0;transition:opacity 1.4s var(--e-soft)}
.hero__gl.is-live{opacity:1}

.hero__fallback{
  position:absolute;inset:-8%;z-index:0;
  background:
    radial-gradient(120% 80% at 70% 15%,rgba(201,162,75,.16),transparent 60%),
    radial-gradient(90% 70% at 20% 90%,rgba(90,110,140,.12),transparent 60%),
    url("../img/coin-matrix-brass.webp") center/cover no-repeat,
    var(--void);
  filter:saturate(.7) brightness(.5) contrast(1.1);
  transition:opacity 1s var(--e-soft);
  animation:heroDrift 16s var(--e-io) infinite alternate;
  will-change:transform;
}
@keyframes heroDrift{
  from{transform:scale(1.04) translate3d(-2.2%,1.4%,0)}
  to{transform:scale(1.14) translate3d(2.4%,-1.8%,0)}
}
.hero.gl-live .hero__fallback{opacity:0}

.hero__vig{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(78% 62% at 52% 40%,transparent 22%,rgba(5,5,6,.46) 74%,rgba(5,5,6,.92) 100%),
    linear-gradient(180deg,rgba(5,5,6,.9) 0%,rgba(5,5,6,.15) 26%,rgba(5,5,6,.25) 44%,rgba(5,5,6,.88) 82%,rgba(5,5,6,.97) 100%),
    linear-gradient(94deg,rgba(5,5,6,.78) 0%,rgba(5,5,6,.34) 34%,transparent 62%);
}

.hero__body{
  position:relative;z-index:3;
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding-inline:var(--gut);
  padding-bottom:clamp(28px,4vw,50px);
}
.hero__h1{
  font-family:var(--fd);
  font-weight:800;
  /* vh term keeps the three lines inside short/landscape viewports */
  font-size:clamp(2.5rem,min(10vw,11.6vh),9.6rem);
  line-height:.9;
  letter-spacing:-.045em;
  margin:clamp(14px,2.2vw,28px) 0 clamp(18px,2vw,26px);
}
.hero__h1 .ln{display:block;overflow:hidden;padding-bottom:.06em;white-space:nowrap}
.hero__h1 .w{display:inline-block;will-change:transform}

.hero__sub{
  max-width:52ch;font-size:clamp(.95rem,1.15vw,1.16rem);line-height:1.68;
  color:var(--txt-2);font-weight:300;
}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3vw,38px)}

.hero__stats{
  position:relative;z-index:3;
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding:22px var(--gut) 26px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,transparent,rgba(10,11,14,.55));
  backdrop-filter:blur(4px);
}
.hstat b{
  display:block;font-family:var(--fd);font-weight:700;
  font-size:clamp(1.5rem,3vw,2.7rem);line-height:1;letter-spacing:-.03em;
  background:var(--grad-gold-2);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hstat span{
  display:block;margin-top:7px;font-family:var(--fm);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--txt-3);
}

/* parked on the right rail so it can never collide with the CTA row */
.hero__scroll{
  position:absolute;right:calc(var(--gut) - 4px);bottom:clamp(150px,15vw,210px);
  z-index:3;display:flex;flex-direction:column;align-items:center;gap:12px;
  font-family:var(--fm);font-size:9px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--txt-3);
}
.hero__scroll span{writing-mode:vertical-rl}
.hero__scroll i{width:1px;height:52px;background:linear-gradient(180deg,var(--gold),transparent);overflow:hidden}
.hero__scroll i::after{
  content:"";display:block;width:1px;height:14px;background:var(--gold-hi);
  animation:scrollDot 1.9s var(--e-io) infinite;
}
@keyframes scrollDot{0%{transform:translateY(-14px)}70%,100%{transform:translateY(46px)}}
@media (max-width:900px){.hero__scroll{display:none}}

/* ---------- 9. TICKER ---------- */
.ticker{
  position:relative;overflow:hidden;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(201,162,75,.05),transparent);
  padding:16px 0;
}
.ticker__row{display:flex;align-items:center;gap:34px;width:max-content;will-change:transform}
.ticker__row.is-marquee{animation-name:marqueeX;animation-timing-function:linear;animation-iteration-count:infinite}
.ticker__row span{
  font-family:var(--fd);font-weight:700;
  font-size:clamp(1.1rem,2.2vw,2rem);letter-spacing:-.02em;
  color:transparent;-webkit-text-stroke:1px rgba(233,234,238,.28);
  white-space:nowrap;
}
.ticker__row b{color:var(--gold);font-size:9px;opacity:.6}

/* ---------- 10. ETHOS ---------- */
.ethos__grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  grid-template-areas:"lead stack" "copy stack";
  gap:clamp(30px,4vw,70px) clamp(30px,5vw,80px);
  align-items:start;
}
.ethos__lead{grid-area:lead}
.ethos__lead .eyebrow{margin-bottom:22px}
.ethos__copy{grid-area:copy;display:flex;flex-direction:column;gap:18px}
.ethos__copy p:not(.lede){color:var(--txt-2);font-size:.98rem;max-width:58ch}

.ethos__pts{display:flex;flex-direction:column;gap:0;margin-top:12px}
.ethos__pts li{
  display:grid;grid-template-columns:minmax(140px,.42fr) 1fr;gap:18px;
  padding:16px 0;border-top:1px solid var(--line);
}
.ethos__pts li:last-child{border-bottom:1px solid var(--line)}
.ethos__pts b{
  font-family:var(--fm);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);font-weight:400;
}
.ethos__pts span{color:var(--txt-2);font-size:.92rem;line-height:1.6}

.ethos__stack{grid-area:stack;position:relative;height:clamp(420px,54vw,700px)}
.ethos__im{position:absolute;overflow:hidden;background:var(--panel)}
.ethos__im img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--e-out)}
.ethos__im::after{
  content:"";position:absolute;inset:0;
  box-shadow:inset 0 0 0 1px var(--line-2);
  background:linear-gradient(200deg,rgba(201,162,75,.1),transparent 45%);
  pointer-events:none;
}
.ethos__im figcaption{
  position:absolute;bottom:0;left:0;right:0;padding:14px 16px;
  font-family:var(--fm);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--txt);background:linear-gradient(0deg,rgba(5,5,6,.9),transparent);
}
.ethos__im--a{top:0;right:0;width:70%;height:52%;z-index:2}
.ethos__im--b{bottom:6%;left:0;width:54%;height:42%;z-index:3}
.ethos__im--c{bottom:0;right:6%;width:40%;height:30%;z-index:1}
.ethos__im:hover img{transform:scale(1.06)}

/* ---------- 11. SYSTEMS RAIL ---------- */
.systems{overflow:hidden}
.systems__head{max-width:960px;margin-bottom:clamp(34px,4vw,60px)}
.systems__head .eyebrow{margin-bottom:20px}
.systems__head .lede{margin-top:20px}

.rail{position:relative;padding-left:var(--gut);cursor:grab}
.rail.is-drag{cursor:grabbing}
.rail__track{display:flex;gap:clamp(16px,1.6vw,26px);width:max-content;will-change:transform}

.card{
  position:relative;flex:0 0 auto;
  width:clamp(258px,25vw,372px);
  background:linear-gradient(170deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);
  display:flex;flex-direction:column;
  overflow:hidden;isolation:isolate;
  transition:border-color .6s var(--e-soft),transform .7s var(--e-out);
}
.card::before{
  content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:radial-gradient(60% 45% at 50% 0%,rgba(201,162,75,.16),transparent 70%);
  opacity:0;transition:opacity .6s var(--e-soft);
}
.card:hover{border-color:var(--line-gold);transform:translateY(-6px)}
.card:hover::before{opacity:1}

.card__ix{
  position:absolute;top:14px;left:16px;z-index:3;
  font-family:var(--fm);font-size:11px;letter-spacing:.16em;color:var(--gold);
  mix-blend-mode:normal;
}
.card__im{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--panel-3)}
.card__im img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--e-out),filter .6s}
.card__im::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,5,6,.45),transparent 35%,rgba(5,5,6,.6));
}
.card:hover .card__im img{transform:scale(1.07)}

.card__tx{padding:20px 22px 26px;display:flex;flex-direction:column;gap:11px;flex:1}
.card__tx h3{
  font-family:var(--fd);font-weight:700;font-size:1.32rem;letter-spacing:-.02em;line-height:1.05;
}
.card__tx p{font-size:.88rem;line-height:1.62;color:var(--txt-2)}

.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:6px}
.chips li{
  font-family:var(--fm);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--txt-3);border:1px solid var(--line);padding:5px 9px;border-radius:999px;
}

.rail__ui{display:flex;align-items:center;gap:24px;margin-top:clamp(26px,3vw,42px)}
.rail__bar{flex:1;height:1px;background:rgba(255,255,255,.09);overflow:hidden}
.rail__bar i{display:block;height:100%;width:12%;background:var(--grad-gold-2)}
.rail__btns{display:flex;gap:8px}
.rbtn{
  width:50px;height:50px;border:1px solid var(--line-2);border-radius:50%;
  display:grid;place-items:center;font-size:15px;color:var(--txt-2);
  transition:border-color .35s,color .35s,background-color .35s,transform .4s var(--e-out);
}
.rbtn:hover{border-color:var(--gold);color:var(--gold);background:rgba(201,162,75,.08)}
.rbtn:disabled{opacity:.3;pointer-events:none}

/* ---------- 12. SIGNATURE ---------- */
.sig{padding:0;background:var(--void)}
.sig__stage{position:relative;height:100svh;overflow:hidden;display:grid;place-items:end start}
.sig__media{position:absolute;inset:0;z-index:0}
.sig__media img{width:100%;height:100%;object-fit:cover;will-change:transform;transform:scale(1.18)}
.sig__wash{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(5,5,6,.96) 0%,rgba(5,5,6,.86) 30%,rgba(5,5,6,.42) 58%,transparent 80%),
    linear-gradient(0deg,rgba(5,5,6,.96) 0%,rgba(5,5,6,.5) 42%,transparent 68%),
    linear-gradient(180deg,rgba(5,5,6,.72) 0%,transparent 18%);
}
.sig__tx{
  position:relative;z-index:2;
  padding:0 var(--gut) clamp(56px,8vw,110px);
  max-width:min(760px,92vw);
}
.sig__tx .eyebrow{margin-bottom:20px}
.sig__h{
  font-family:var(--fd);font-weight:700;
  font-size:clamp(2rem,5.4vw,4.8rem);line-height:.96;letter-spacing:-.035em;
  margin-bottom:20px;
}
.sig__tx > p{max-width:50ch;color:var(--txt-2);font-size:clamp(.95rem,1.1vw,1.1rem)}
.sig__specs{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,56px);margin-top:clamp(26px,3vw,40px)}
.sig__specs b{
  display:block;font-family:var(--fd);font-weight:700;font-size:clamp(1.4rem,2.6vw,2.2rem);
  letter-spacing:-.03em;color:var(--gold);line-height:1;
}
.sig__specs span{
  display:block;margin-top:6px;font-family:var(--fm);font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--txt-3);
}

/* ---------- 13. FINISH LAB ---------- */
.lab__head{max-width:900px;margin-bottom:clamp(32px,4vw,58px)}
.lab__head .eyebrow{margin-bottom:20px}
.lab__head .lede{margin-top:20px}

.lab__grid{display:grid;grid-template-columns:1.18fr .82fr;gap:clamp(24px,3vw,44px);align-items:start}

.lab__stage{
  position:relative;aspect-ratio:16/11;
  background:radial-gradient(70% 60% at 50% 30%,var(--panel-3),var(--void));
  border:1px solid var(--line);overflow:hidden;
  touch-action:none;cursor:pointer;
}
.lab__stage.is-live{cursor:ew-resize}
.lab__photo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
  transition:opacity .45s var(--e-soft),filter .5s var(--e-soft);
}
.lab__wash{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  mix-blend-mode:overlay;opacity:0;
  background-size:cover;background-position:center;
  transition:opacity .45s,background-color .45s,background-image .45s;
}
.lab__wash.is-on{opacity:.62}
.lab__wash.is-wood{mix-blend-mode:soft-light;opacity:.7}
.lab__wash.is-metal{mix-blend-mode:color;opacity:.55}
.lab__stage canvas{
  position:absolute;inset:0;z-index:2;
  width:100%;height:100%;display:block;
  opacity:0;pointer-events:none;
}
.lab__stage.is-live canvas{opacity:1;pointer-events:auto}
.lab__stage.is-live .lab__photo,
.lab__stage.is-live .lab__wash{opacity:0}
.lab__frame{
  position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 90px 12px rgba(5,5,6,.85);
}
.lab__hud{
  position:absolute;bottom:0;left:0;right:0;z-index:3;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:14px 18px;
  font-family:var(--fm);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  background:linear-gradient(0deg,rgba(5,5,6,.88),transparent);
  color:var(--txt);
}
.lab__hint{color:var(--txt-3);transition:opacity .5s}
.lab__stage.is-touched .lab__hint{opacity:0}

.lab__ctrl{display:flex;flex-direction:column;gap:clamp(18px,2vw,26px)}
.lab__block h4{
  font-family:var(--fm);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--txt-3);font-weight:400;margin-bottom:12px;
}
.swatchset{display:flex;flex-wrap:wrap;gap:7px}

.pat{
  display:flex;align-items:center;gap:8px;
  padding:8px 12px 8px 9px;border:1px solid var(--line);
  font-size:11.5px;font-weight:500;color:var(--txt-2);
  transition:border-color .3s,color .3s,background-color .3s;
}
.pat i{
  width:18px;height:18px;flex:0 0 auto;border:1px solid var(--line-2);
  background-size:6px 6px;background-color:#1b1e24;
}
.pat[data-pat="coin"] i{background-image:radial-gradient(circle at 50% 50%,#8e939c 42%,transparent 44%)}
.pat[data-pat="scale"] i{background-image:radial-gradient(circle at 50% 0%,#8e939c 46%,transparent 48%)}
.pat[data-pat="tri"] i{background-image:linear-gradient(45deg,#8e939c 25%,transparent 25%,transparent 75%,#8e939c 75%)}
.pat[data-pat="fin"] i{background-image:linear-gradient(90deg,#8e939c 40%,transparent 42%)}
.pat[data-pat="perf"] i{background-image:radial-gradient(circle at 50% 50%,#8e939c 26%,transparent 28%)}
.pat[data-pat="hex"] i{background-image:linear-gradient(60deg,#8e939c 20%,transparent 22%),linear-gradient(-60deg,#8e939c 20%,transparent 22%)}
.pat:hover{color:var(--txt);border-color:var(--line-2)}
.pat.is-on{border-color:var(--gold);color:var(--gold);background:rgba(201,162,75,.07)}

/* fixed-width swatches leave an orphan on the last row — a 3-up grid keeps
   every set of six reading as two clean rows */
.swatchset--fin{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.fin{
  position:relative;width:auto;
  display:flex;flex-direction:column;gap:6px;
  transition:transform .35s var(--e-out);
}
.fin::before{
  content:"";display:block;height:58px;
  background:var(--sw);background-size:cover;background-position:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  transition:box-shadow .3s;
}
.fin span{
  font-family:var(--fm);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--txt-3);transition:color .3s;
}
.fin:hover{transform:translateY(-3px)}
.fin:hover span{color:var(--txt-2)}
.fin.is-on::before{box-shadow:inset 0 0 0 1px var(--gold),0 0 0 1px var(--gold),0 6px 20px rgba(201,162,75,.22)}
.fin.is-on span{color:var(--gold)}

.lab__note{font-size:.82rem;line-height:1.6;color:var(--txt-3);max-width:44ch}

/* ---------- 14. DESIGNER RANGE ---------- */
.range__head{max-width:820px;margin-bottom:clamp(30px,3.4vw,52px)}
.range__head .eyebrow{margin-bottom:20px}
.range__head .lede{margin-top:18px}

.mosaic{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:clamp(8px,1vw,16px);
}
.tile{position:relative;overflow:hidden;aspect-ratio:3/4;background:var(--panel-2);isolation:isolate}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--e-out),filter .6s var(--e-soft);filter:saturate(.9)}
.tile::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  box-shadow:inset 0 0 0 1px var(--line);
  background:linear-gradient(0deg,rgba(5,5,6,.72),transparent 52%);
  transition:box-shadow .4s;
}
.tile figcaption{
  position:absolute;z-index:2;bottom:0;left:0;right:0;padding:12px 13px;
  display:flex;flex-direction:column;gap:2px;
  transform:translateY(6px);opacity:.92;
  transition:transform .5s var(--e-out),opacity .4s;
}
.tile figcaption b{font-family:var(--fd);font-weight:600;font-size:.85rem;letter-spacing:-.01em}
.tile figcaption span{font-family:var(--fm);font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.tile:hover img{transform:scale(1.09);filter:saturate(1.1)}
.tile:hover::after{box-shadow:inset 0 0 0 1px var(--line-gold)}
.tile:hover figcaption{transform:none;opacity:1}
.tile:nth-child(7n+1){grid-column:span 2;aspect-ratio:3/2}
.tile:nth-child(9n+5){grid-column:span 2;aspect-ratio:3/2}

/* ---------- 15. WORK ---------- */
.work__head{max-width:820px;margin-bottom:clamp(30px,3.4vw,54px)}
.work__head .eyebrow{margin-bottom:20px}
.work__body{position:relative}
.work__list{position:relative;z-index:2;border-top:1px solid var(--line)}
.wrow{
  position:relative;display:grid;
  grid-template-columns:56px minmax(0,2.1fr) minmax(0,1fr) minmax(0,1fr) 40px;
  align-items:center;gap:16px;
  padding:clamp(18px,2.2vw,30px) 4px;
  border-bottom:1px solid var(--line);
  transition:padding-left .55s var(--e-out),border-color .4s;
}
.wrow::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:0;z-index:-1;
  background:linear-gradient(90deg,rgba(201,162,75,.09),transparent 70%);
  transition:width .6s var(--e-out);
}
.wrow:hover{padding-left:20px;border-color:var(--line-gold)}
.wrow:hover::before{width:100%}
.wrow__ix{font-family:var(--fm);font-size:11px;letter-spacing:.14em;color:var(--gold)}
.wrow__nm{
  font-family:var(--fd);font-weight:600;
  font-size:clamp(1.05rem,2.3vw,2rem);letter-spacing:-.025em;line-height:1.05;
  transition:color .35s;
}
.wrow:hover .wrow__nm{color:var(--gold-hi)}
.wrow__cl,.wrow__lo{font-family:var(--fm);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3)}
.wrow__ar{justify-self:end;font-size:15px;color:var(--txt-3);transition:transform .45s var(--e-out),color .35s}
.wrow:hover .wrow__ar{transform:translate(3px,-3px);color:var(--gold)}

.work__peek{
  position:absolute;top:0;right:0;z-index:3;pointer-events:none;
  width:clamp(240px,24vw,380px);aspect-ratio:4/3;overflow:hidden;
  opacity:0;transform:scale(.94) translateY(10px);
  transition:opacity .45s var(--e-soft),transform .6s var(--e-out);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9);
}
.work__peek::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--line-gold)}
.work__peek img{width:100%;height:100%;object-fit:cover}
.work__peek.is-on{opacity:1;transform:none}
@media (hover:none),(pointer:coarse){.work__peek{display:none}}

.work__clients{margin-top:clamp(48px,6vw,90px)}
.work__clients .eyebrow{margin-bottom:22px}
.cmarq{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0}
.cmarq__row{display:flex;align-items:center;gap:clamp(28px,4vw,64px);width:max-content;will-change:transform}
.cmarq__row.is-marquee{animation-name:marqueeX;animation-timing-function:linear;animation-iteration-count:infinite}
@keyframes marqueeX{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.cmarq__row span{
  font-family:var(--fd);font-weight:600;font-size:clamp(.95rem,1.7vw,1.5rem);
  letter-spacing:.01em;color:var(--txt-3);white-space:nowrap;
  transition:color .4s;
}
.cmarq__row span:hover{color:var(--gold)}
.work__note{margin-top:24px;max-width:78ch;font-size:.9rem;line-height:1.7;color:var(--txt-3)}

/* ---------- 16. CRAFT ---------- */
.craft__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,4vw,72px);align-items:start}
.craft__lead .eyebrow{margin-bottom:20px}
.craft__lead .h2{margin-bottom:22px}
.craft__lead .btn{margin-top:26px}
.craft__cards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.2vw,18px)}
.ccard{
  position:relative;padding:clamp(20px,2.2vw,30px);
  background:linear-gradient(165deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);overflow:hidden;
  transition:border-color .5s,transform .6s var(--e-out);
}
.ccard::after{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--grad-gold-2);transform:scaleX(0);transform-origin:left;
  transition:transform .7s var(--e-out);
}
.ccard:hover{border-color:var(--line-2);transform:translateY(-4px)}
.ccard:hover::after{transform:scaleX(1)}
.ccard b{
  display:block;font-family:var(--fm);font-size:11px;letter-spacing:.18em;
  color:var(--gold);font-weight:400;margin-bottom:16px;
}
.ccard h3{font-family:var(--fd);font-weight:700;font-size:1.18rem;letter-spacing:-.02em;margin-bottom:9px}
.ccard p{font-size:.88rem;line-height:1.62;color:var(--txt-2)}

.assure{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  margin-top:clamp(44px,5vw,80px);
  background:var(--line);border:1px solid var(--line);
}
.assure__i{background:var(--ink);padding:clamp(20px,2.2vw,30px);transition:background-color .5s}
.assure__i:hover{background:var(--panel-2)}
.assure__i b{
  display:block;font-family:var(--fd);font-weight:600;font-size:1rem;
  letter-spacing:-.01em;margin-bottom:7px;
}
.assure__i span{font-size:.85rem;line-height:1.6;color:var(--txt-3)}

/* ---------- 17. PROCESS ---------- */
.proc__head{max-width:760px;margin-bottom:clamp(34px,4vw,60px)}
.proc__head .eyebrow{margin-bottom:20px}
.proc__steps{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,2vw,30px);padding-top:38px}
.proc__line{position:absolute;top:0;left:var(--gut);right:var(--gut);height:1px;background:rgba(255,255,255,.09)}
.proc__line i{display:block;height:100%;width:0;background:var(--grad-gold-2);box-shadow:0 0 12px rgba(201,162,75,.5)}
.pstep{position:relative;padding-top:6px}
.pstep::before{
  content:"";position:absolute;top:-38px;left:0;width:9px;height:9px;
  border-radius:50%;background:var(--panel-3);box-shadow:0 0 0 1px var(--line-2);
  transform:translateY(-4px);transition:background-color .5s,box-shadow .5s;
}
.pstep.is-lit::before{background:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 18px rgba(201,162,75,.7)}
.pstep span{
  display:block;font-family:var(--fm);font-size:11px;letter-spacing:.18em;
  color:var(--gold);margin-bottom:14px;
}
.pstep h3{font-family:var(--fd);font-weight:700;font-size:1.14rem;letter-spacing:-.02em;margin-bottom:9px}
.pstep p{font-size:.87rem;line-height:1.62;color:var(--txt-2)}

/* ---------- 17b. THE METAL / FAQ ---------- */
.sec--tight{padding-block:clamp(56px,6vw,96px)}
.metal__head{max-width:760px;margin-bottom:clamp(28px,3.2vw,46px)}
.metal__head .eyebrow{margin-bottom:20px}
.metal__grid{
  display:grid;grid-template-columns:minmax(260px,.86fr) 1.14fr;
  gap:clamp(32px,4.5vw,72px);align-items:start;
}
.spec{border-top:0}
.spec__i{
  display:grid;grid-template-columns:28px 1fr;gap:2px 12px;
  align-items:center;padding:13px 0;border-bottom:1px solid var(--line);
}
.spec__i b{
  grid-row:1/3;align-self:start;padding-top:5px;
  font-family:var(--fm);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);font-weight:400;
}
.spec__i span{
  display:flex;align-items:center;gap:12px;min-width:0;
  font-family:var(--fd);font-weight:600;font-size:.98rem;letter-spacing:-.02em;
}
.spec__i span em{
  flex:1 1 auto;min-width:36px;display:flex;align-items:center;gap:10px;
}
.spec__i span em::before{
  content:"";flex:1 1 auto;height:1px;min-width:20px;
  background:repeating-linear-gradient(90deg,var(--gold) 0 1.5px,transparent 1.5px 5px);
  opacity:.42;
}
.spec__i span em::after{
  content:"\2193";flex:0 0 auto;
  font-size:13px;line-height:1;color:var(--gold);
  filter:drop-shadow(0 0 5px rgba(201,162,75,.55));
}
.spec__i i{grid-column:2;font-style:normal;font-size:.78rem;line-height:1.4;color:var(--txt-3)}
.faq{padding-left:clamp(8px,2vw,8px);border-top:1px solid var(--line-gold)}
.faq__kicker{
  font-family:var(--fm);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--txt-3);padding:18px 0 4px;
}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item summary{
  list-style:none;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:15px 0;font-family:var(--fd);font-weight:600;font-size:1.02rem;
  letter-spacing:-.02em;color:var(--txt);
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{
  content:"+";flex:0 0 auto;font-family:var(--fm);font-size:15px;font-weight:400;
  color:var(--gold);line-height:1;
}
.faq__item[open] summary::after{content:"\2013"}
.faq__item[open] summary{color:var(--gold-hi)}
.faq__item p{max-width:62ch;padding:0 0 16px;font-size:.92rem;line-height:1.65;color:var(--txt-2)}
.faq__item p a{border-bottom:1px solid var(--line-gold)}
.faq__item p a:hover{color:var(--gold)}
@media (min-width:981px){
  .metal__grid{gap:0}
  .spec{padding-right:clamp(10px,1.4vw,16px)}
  .faq{padding-left:clamp(28px,3.2vw,48px);border-top:0;border-left:1px solid var(--line-gold)}
  .faq__kicker{padding-top:2px}
}

/* ---------- 18. VISIT ---------- */
.visit__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,4vw,72px);align-items:center}
.visit__tx .eyebrow{margin-bottom:20px}
.visit__tx .h2{margin-bottom:22px}
.visit__dl{margin-top:clamp(26px,3vw,40px);display:flex;flex-direction:column}
.visit__dl > div{
  display:grid;grid-template-columns:minmax(110px,.3fr) 1fr;gap:18px;
  padding:15px 0;border-top:1px solid var(--line);
}
.visit__dl > div:last-child{border-bottom:1px solid var(--line)}
.visit__dl dt{font-family:var(--fm);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-3)}
.visit__dl dd{font-size:.94rem;line-height:1.6;color:var(--txt)}
.visit__dl dd a{border-bottom:1px solid var(--line-gold);transition:color .3s}
.visit__dl dd a:hover{color:var(--gold)}

.visit__dirs{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.dircard{
  flex:1 1 200px;padding:18px 20px;
  border:1px solid var(--line);background:linear-gradient(165deg,var(--panel-2),transparent);
  transition:border-color .4s;
}
.dircard:hover{border-color:var(--line-gold)}
.dircard b{display:block;font-family:var(--fd);font-weight:700;font-size:1.02rem;letter-spacing:-.01em}
.dircard span{display:block;font-family:var(--fm);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--txt-3);margin:4px 0 10px}
.dircard a{font-size:.92rem;color:var(--gold)}

.visit__im{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--panel-2)}
.visit__im img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--e-out)}
.visit__im:hover img{transform:scale(1.05)}
.visit__im::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--line-2);background:linear-gradient(0deg,rgba(5,5,6,.85),transparent 45%)}
.visit__im figcaption{
  position:absolute;bottom:0;left:0;right:0;z-index:2;padding:18px 20px;
  font-family:var(--fm);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--txt);
}

/* ---------- 19. CONTACT ---------- */
.contact{background:linear-gradient(180deg,var(--void),var(--ink) 60%)}
.contact__grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(34px,4vw,80px);align-items:start}
.contact__lead .eyebrow{margin-bottom:20px}
.contact__lead .h2{margin-bottom:22px}
.contact__quick{display:flex;flex-direction:column;gap:1px;margin-top:clamp(28px,3vw,44px);background:var(--line)}
.qlink{
  display:flex;align-items:baseline;gap:16px;padding:16px 2px;background:var(--ink);
  transition:padding-left .5s var(--e-out),background-color .4s;
}
.qlink b{
  flex:0 0 90px;font-family:var(--fm);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--txt-3);font-weight:400;
}
.qlink span{font-family:var(--fd);font-weight:600;font-size:clamp(1rem,1.5vw,1.3rem);letter-spacing:-.02em;transition:color .35s}
.qlink:hover{padding-left:16px;background:var(--panel)}
.qlink:hover span{color:var(--gold)}

.form{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,22px)}
.field{display:flex;flex-direction:column;gap:8px}
.field--full{grid-column:1/-1}
.field label{font-family:var(--fm);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--txt-3)}
.field input,.field select,.field textarea{
  width:100%;padding:14px 16px;
  background:var(--panel);border:1px solid var(--line);
  font-size:.95rem;color:var(--txt);
  transition:border-color .35s,background-color .35s;
  border-radius:0;
}
.field textarea{resize:vertical;min-height:110px;font-family:var(--fb)}
.field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%23c9a24b' stroke-width='1.4' fill='none'/></svg>");
  background-repeat:no-repeat;background-position:right 16px center;padding-right:42px;}
.field input::placeholder,.field textarea::placeholder{color:var(--txt-3);opacity:.7}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold);background:var(--panel-2);outline:none}
.field.is-bad input,.field.is-bad select,.field.is-bad textarea{border-color:#b6503f}

.form__foot{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:6px}
.form__msg{font-family:var(--fm);font-size:11px;letter-spacing:.06em;color:var(--gold)}
.form__msg.is-bad{color:#d9705f}

/* ---------- 20. FOOTER ---------- */
.foot{
  position:relative;overflow-x:clip;
  background:
    radial-gradient(ellipse 62% 42% at 50% 100%,rgba(201,162,75,.09),transparent 64%),
    var(--ink);
  border-top:1px solid var(--line-gold);
}
.foot__top{
  display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,3.4vw,64px);
  padding-block:clamp(36px,4.4vw,64px) clamp(18px,2vw,28px);
}
.foot__brand img{width:clamp(168px,16vw,230px);opacity:.95}
.foot__nav{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}
.foot__nav h5{
  font-family:var(--fm);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);font-weight:400;margin-bottom:16px;
}
.foot__nav div{display:flex;flex-direction:column;gap:9px}
.foot__nav a{font-size:.9rem;color:var(--txt-2);transition:color .3s,transform .4s var(--e-out)}
.foot__nav a:hover{color:var(--gold);transform:translateX(3px)}

.foot__word{
  margin-inline:var(--gut);
  padding:10px 0 2px;
  border-top:1px solid var(--line-gold);
  pointer-events:none;
}
.foot__word svg{display:block;width:100%;height:52px;overflow:visible}

.foot__base{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;
  padding-block:16px 20px;
  border-top:1px solid var(--line);
  font-family:var(--fm);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3);
}
.foot__up{transition:color .3s}
.foot__up:hover{color:var(--gold)}

/* ---------- 21. REVEAL PRIMITIVES ---------- */
[data-rv]{opacity:0;transform:translateY(26px)}
.no-js [data-rv]{opacity:1;transform:none}
[data-split-lines] .ln{display:block;overflow:hidden}
[data-split-lines] .w{display:inline-block}

img[data-src]{background:var(--panel-2)}
img.is-in{animation:imgIn .9s var(--e-soft) both}
@keyframes imgIn{from{opacity:0;filter:blur(8px) saturate(.6)}to{opacity:1;filter:none}}

/* ═══════════════════════ RESPONSIVE ═══════════════════════ */
@media (max-width:1180px){
  .ethos__grid{grid-template-columns:1fr;grid-template-areas:"lead" "copy" "stack"}
  .ethos__stack{height:clamp(400px,72vw,620px);max-width:640px}
  .craft__grid{grid-template-columns:1fr}
  .visit__grid{grid-template-columns:1fr}
  .visit__im{aspect-ratio:16/10;order:-1}
  .contact__grid{grid-template-columns:1fr}
  .lab__grid{grid-template-columns:1fr}
  .lab__stage{aspect-ratio:16/10}
  .foot__top{grid-template-columns:1fr}
}

@media (max-width:980px){
  .nav__links{display:none}
  .burger{display:block}
  .assure{grid-template-columns:repeat(2,1fr)}
  .metal__grid{grid-template-columns:1fr}
  .proc__steps{grid-template-columns:repeat(2,1fr);gap:30px 24px}
  .proc__line{display:none}
  .pstep::before{display:none}
  .pstep{padding-top:0;border-top:1px solid var(--line);padding-top:18px}
  .mosaic{grid-template-columns:repeat(4,1fr)}
  .wrow{grid-template-columns:40px 1fr 34px}
  .wrow__cl,.wrow__lo{display:none}
  .hero__stats{grid-template-columns:repeat(2,1fr);gap:18px}
}

/* the nav runs out of room before the burger breakpoint kicks in — tighten
   the links rather than dropping the primary CTA */
@media (max-width:1180px){
  .nav{gap:10px}
  .nav__links a{padding:9px 9px;font-size:12px}
  .nav__brandtx i{display:none}
}

/* laptops and landscape phones: trim the hero so the stat bar stays in frame */
@media (max-height:800px) and (min-width:721px){
  .hero{padding-top:calc(var(--nav-h) + 14px)}
  .hero__h1{font-size:clamp(2.4rem,min(9.2vw,10.2vh),7.4rem);margin:10px 0 16px}
  .hero__sub{font-size:.93rem;line-height:1.55;max-width:44ch}
  .hero__cta{margin-top:20px}
  .hero__stats{padding:14px var(--gut) 16px}
  .hero__scroll{bottom:clamp(120px,13vw,160px)}
}

@media (max-width:720px){
  :root{--nav-h:64px}
  .nav__brandtx i{display:none}
  /* brand + gold CTA + burger cannot share 390px — drawer already has Contact */
  .nav__right .btn{display:none}
  .h2{font-size:clamp(1.85rem,8.4vw,2.6rem)}
  .hero{min-height:100svh}
  .hero__h1{font-size:clamp(2.5rem,13.5vw,4.4rem);line-height:.9}
  .craft__cards{grid-template-columns:1fr}
  .assure{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .mosaic{grid-template-columns:repeat(2,1fr)}
  .tile:nth-child(7n+1),.tile:nth-child(9n+5){grid-column:span 2;aspect-ratio:16/10}
  .foot__nav{grid-template-columns:1fr 1fr}
  .ethos__pts li{grid-template-columns:1fr;gap:6px}
  .visit__dl > div{grid-template-columns:1fr;gap:6px}
  .card{width:min(78vw,320px)}
  .sig__stage{height:88svh}
  .qlink b{flex-basis:70px}
}

@media (max-width:460px){
  .hero__stats{grid-template-columns:1fr 1fr;padding-bottom:20px}
  .hstat:nth-child(n+3){display:none}
  .foot__nav{grid-template-columns:1fr}
  .rbtn{width:44px;height:44px}
}

/* ═══════════════════════ REDUCED MOTION ═══════════════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  [data-rv]{opacity:1;transform:none}
  #ethos [data-rv]{opacity:0;transform:translateY(26px)}
  .grain{display:none}
  .hero__gl{display:block!important}
  .hero__gl.is-live{opacity:1!important}
  .hero.gl-live .hero__fallback{opacity:0!important;animation:none!important}
  .hero:not(.gl-live) .hero__fallback{
    animation:heroDrift 16s ease-in-out infinite alternate !important;
  }
  .ticker__row.is-marquee,.cmarq__row.is-marquee{
    animation:marqueeX 42s linear infinite !important;
  }
  .loader__coins{animation:coinOrbit 3.4s linear infinite !important}
}