/* ============================================================
   THE RETAIL UNIVERSITY — couture design system
   Palette: obsidian · ivory · liquid brass.  Type: Cormorant + Jost.
   ============================================================ */

:root{
  --obsidian:#0a0806;
  --espresso:#0c0907;
  --ink:#12100b;
  --ink-2:#1a1610;
  --ivory:#f6f0e4;
  --bone:#cdbfa8;
  --muted:#9a8c76;
  --brass:#c8a35a;
  --brass-bright:#ecd49a;
  --brass-deep:#9a7636;
  --wine:#6e2230;

  --line:rgba(200,163,90,.20);
  --line-soft:rgba(246,240,228,.10);
  --gold-grad:linear-gradient(105deg,#9a7636 0%,#e8cf95 40%,#f6e7c3 50%,#e8cf95 60%,#9a7636 100%);

  --serif:"Cormorant Garamond", Georgia, serif;
  --sans:"Jost","Inter", system-ui, sans-serif;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.4,0,.1,1);
  --ease-luxe:cubic-bezier(.16,1,.3,1);

  --pad:clamp(1.4rem, 5vw, 6.5rem);
  --maxw:1520px;
}

*{margin:0;padding:0;box-sizing:border-box}
html.lenis{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth iframe{pointer-events:none}

body{
  font-family:var(--sans);
  background:
    radial-gradient(50% 40% at 85% 2%, rgba(200,163,90,.06), transparent 60%),
    var(--obsidian);
  color:var(--ivory);
  font-weight:300;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  cursor:none;
}
@media (hover:none){ body{cursor:auto} }

img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
em{font-style:italic}
.gold,em{
  background:var(--gold-grad);background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--brass-bright);
}
strong{font-weight:400}
::selection{background:var(--brass);color:var(--obsidian)}

/* ---------- shared type ---------- */
.eyebrow{
  font-family:var(--sans);font-weight:400;font-size:.7rem;
  letter-spacing:.46em;text-transform:uppercase;color:var(--brass);
  display:flex;align-items:center;gap:1.1rem;
}
.eyebrow::before{content:"";width:2.4rem;height:1px;background:linear-gradient(90deg,transparent,var(--brass));}
.eyebrow--center{justify-content:center}
.eyebrow--center::before,.eyebrow--center::after{content:"";width:2.4rem;height:1px;background:var(--brass);opacity:.7}
.eyebrow--center::before{background:linear-gradient(90deg,transparent,var(--brass))}
.eyebrow--center::after{background:linear-gradient(90deg,var(--brass),transparent)}

.section-title{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2.5rem,6.2vw,5.4rem);line-height:1.0;letter-spacing:-.015em;
}
.section-head{
  padding:clamp(4.5rem,11vw,10rem) var(--pad) clamp(2.2rem,5vw,4rem);
  max-width:var(--maxw);margin-inline:auto;display:flex;flex-direction:column;gap:1.7rem;
}
.section-head--center{align-items:center;text-align:center}

/* ============================================================
   TEXTURE OVERLAYS
   ============================================================ */
.grain{position:fixed;inset:-50%;z-index:9000;pointer-events:none;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,2%)}40%{transform:translate(3%,-3%)}
  60%{transform:translate(-2%,4%)}80%{transform:translate(4%,-2%)}100%{transform:translate(0,0)}}
.vignette{position:fixed;inset:0;z-index:8000;pointer-events:none;
  box-shadow:inset 0 0 20vw rgba(0,0,0,.6), inset 0 0 5vw rgba(0,0,0,.4)}
.ambient{display:none}

/* candlelight — a warm glow that follows the cursor */
.spotlight{position:fixed;inset:0;z-index:6000;pointer-events:none;mix-blend-mode:soft-light;
  background:radial-gradient(circle 420px at var(--mx,50%) var(--my,40%), rgba(255,226,170,.22), rgba(255,210,140,.06) 45%, transparent 72%);
  transition:opacity .6s var(--ease)}
@media (hover:none){ .spotlight{display:none} }

/* cursor */
.cursor{position:fixed;top:0;left:0;z-index:10000;pointer-events:none;mix-blend-mode:difference;
  transform:translate(-50%,-50%);will-change:transform}
.cursor__dot{position:absolute;top:50%;left:50%;width:5px;height:5px;border-radius:50%;background:var(--ivory);
  transform:translate(-50%,-50%);transition:opacity .3s}
.cursor__ring{position:absolute;top:50%;left:50%;width:36px;height:36px;border-radius:50%;
  border:1px solid rgba(246,240,228,.6);transform:translate(-50%,-50%) scale(1);
  transition:transform .35s var(--ease),border-color .35s,opacity .3s}
.cursor.is-hover .cursor__ring{transform:translate(-50%,-50%) scale(1.7);border-color:var(--brass-bright)}
.cursor.is-hover .cursor__dot{opacity:0}
.cursor.is-down .cursor__ring{transform:translate(-50%,-50%) scale(.8)}
@media (hover:none){ .cursor{display:none} }

/* ============================================================
   PRELOADER
   ============================================================ */
.loader{position:fixed;inset:0;z-index:9500;background:var(--obsidian);display:grid;place-items:center;
  transition:opacity 1s var(--ease),visibility 1s}
.loader.is-done{opacity:0;visibility:hidden}
.loader__inner{display:flex;flex-direction:column;align-items:center;gap:1.3rem;text-align:center}
.loader__seal{position:relative;width:120px;height:120px;display:grid;place-items:center}
.loader__ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.loader__ring circle{fill:none;stroke:var(--brass);stroke-width:1;opacity:.85;
  stroke-dasharray:352;stroke-dashoffset:352;animation:draw 2.4s var(--ease) forwards infinite}
@keyframes draw{0%{stroke-dashoffset:352}70%,100%{stroke-dashoffset:0}}
.loader__mono{font-family:var(--serif);font-size:1.9rem;letter-spacing:.32em;padding-left:.32em;
  background:var(--gold-grad);background-size:200% auto;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;animation:shimmer 2.6s linear infinite}
@keyframes shimmer{to{background-position:200% center}}
.loader__name{font-size:.7rem;letter-spacing:.44em;text-transform:uppercase;color:var(--bone)}
.loader__bar{width:200px;height:1px;background:var(--line-soft);overflow:hidden;margin-top:.4rem}
.loader__fill{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brass-deep),var(--brass-bright))}
.loader__pct{font-size:.6rem;letter-spacing:.34em;text-transform:uppercase;color:var(--muted)}

/* ============================================================
   NAV
   ============================================================ */
.nav{position:fixed;top:0;left:0;width:100%;z-index:7000;display:flex;align-items:center;
  justify-content:space-between;gap:2rem;padding:1.6rem var(--pad);
  transition:padding .5s var(--ease),background .5s,backdrop-filter .5s,border-color .5s}
.nav::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom, rgba(10,8,6,.85), transparent);opacity:1;transition:opacity .5s}
.nav.is-scrolled{padding:.95rem var(--pad);background:rgba(10,8,6,.72);
  backdrop-filter:blur(16px) saturate(120%);border-bottom:1px solid var(--line-soft)}
.nav.is-scrolled::before{opacity:0}
.nav__brand{display:flex;align-items:baseline;gap:.75rem}
.nav__brand-mark{font-family:var(--serif);font-size:1.5rem;letter-spacing:.2em;color:var(--brass-bright)}
.nav__brand-name{font-size:.64rem;letter-spacing:.38em;text-transform:uppercase;color:var(--bone)}
.nav__links{display:flex;gap:2.5rem}
.nav__links a{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--bone);
  position:relative;padding:.3rem 0;transition:color .4s;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.nav__links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--gold-grad);background-size:200% auto;transition:width .45s var(--ease)}
.nav__links a:hover{color:var(--ivory)}
.nav__links a:hover::after{width:100%}
.nav__menu{display:none;flex-direction:column;gap:6px;background:none;border:0;cursor:none;padding:6px}
.nav__menu span{width:26px;height:1px;background:var(--ivory);transition:.4s}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;
  padding:1.1rem 2.3rem;border:1px solid var(--brass);color:var(--ivory);overflow:hidden;
  transition:color .5s var(--ease);will-change:transform;border-radius:1px}
.btn span{position:relative;z-index:2}
.btn::before{content:"";position:absolute;inset:0;z-index:1;background:var(--gold-grad);background-size:200% auto;
  transform:translateY(101%);transition:transform .55s var(--ease)}
.btn:hover::before{transform:translateY(0)}
.btn:hover{color:var(--obsidian)}
.btn--gold{color:var(--obsidian);border-color:transparent;background:var(--gold-grad);background-size:200% auto;
  box-shadow:0 14px 40px -18px rgba(200,163,90,.6);animation:btnsheen 6s linear infinite}
@keyframes btnsheen{to{background-position:200% center}}
.btn--gold::before{background:linear-gradient(105deg,#f3e3bd,#fff7e6,#f3e3bd)}
.btn--ghost{border-color:var(--line);color:var(--bone);backdrop-filter:blur(2px)}
.btn--ghost::before{background:rgba(246,240,228,.94)}
.btn--ghost:hover{color:var(--obsidian)}
.btn--nav{padding:.78rem 1.5rem;font-size:.62rem;box-shadow:none;animation:none}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;height:100svh;min-height:660px;overflow:hidden}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1}
.hero.is-grabbing{cursor:grabbing}
.hero__fallback{position:absolute;inset:0;z-index:0;
  background:url("assets/valabasas-poster.jpg") center/cover no-repeat;filter:brightness(.5)}

/* layered scrim — guarantees text legibility over any panorama frame */
.hero__scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(10,8,6,.72) 0%, rgba(10,8,6,.18) 16%, transparent 34%, transparent 50%, rgba(10,8,6,.55) 78%, rgba(10,8,6,.96) 100%);}
.hero__glow{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(64% 64% at 50% 50%, rgba(10,8,6,.88) 0%, rgba(10,8,6,.62) 42%, rgba(10,8,6,.2) 66%, transparent 82%)}
.hero__sweep{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.5;mix-blend-mode:screen;
  background:linear-gradient(75deg,transparent 40%,rgba(236,212,154,.10) 50%,transparent 60%);
  background-size:300% 100%;animation:sweep 9s var(--ease-soft) infinite}
@keyframes sweep{0%{background-position:120% 0}60%,100%{background-position:-60% 0}}

/* gold corner frame */
.hero__frame{position:absolute;inset:clamp(1rem,2.4vw,2.2rem);z-index:5;pointer-events:none}
.hero__frame i{position:absolute;width:46px;height:46px;border:1px solid var(--line)}
.hero__frame i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}
.hero__frame i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}
.hero__frame i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}
.hero__frame i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}

.hero__content{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;gap:1.7rem;padding:6rem var(--pad) 4rem;pointer-events:none}
.hero__content .btn,.hero__content a{pointer-events:auto}
.hero__eyebrow{color:var(--brass-bright);text-shadow:0 2px 18px rgba(0,0,0,.7)}
.hero__title{font-family:var(--serif);font-weight:300;
  font-size:clamp(2.9rem,8vw,6.8rem);line-height:.98;letter-spacing:-.02em;
  text-shadow:0 4px 40px rgba(0,0,0,.55)}
.hero__title .line{display:block;overflow:hidden;padding-bottom:.04em}
.hero__title .line span{display:block;will-change:transform}
.hero__title em{font-weight:400}
.hero__sub{max-width:44rem;color:var(--ivory);opacity:.92;font-size:clamp(.98rem,1.5vw,1.16rem);
  line-height:1.75;text-shadow:0 2px 24px rgba(0,0,0,.7)}
.hero__actions{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;margin-top:.6rem}

.hero__hint{position:absolute;z-index:5;left:var(--pad);bottom:clamp(2.2rem,5vh,3.6rem);
  display:flex;align-items:center;gap:.9rem;color:var(--bone);font-size:.64rem;letter-spacing:.28em;
  text-transform:uppercase;text-shadow:0 1px 10px rgba(0,0,0,.6)}
.hero__hint-ring{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);position:relative}
.hero__hint-ring::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--brass);
  animation:pulse 2.6s var(--ease) infinite}
@keyframes pulse{0%{transform:scale(.7);opacity:1}100%{transform:scale(1.7);opacity:0}}
.hero__scroll{position:absolute;z-index:5;right:var(--pad);bottom:clamp(2.2rem,5vh,3.6rem);
  display:flex;flex-direction:column;align-items:center;gap:.8rem;color:var(--bone)}
.hero__scroll-text{font-size:.58rem;letter-spacing:.32em;text-transform:uppercase;writing-mode:vertical-rl;text-shadow:0 1px 10px rgba(0,0,0,.6)}
.hero__scroll-line{width:1px;height:56px;background:linear-gradient(var(--brass),transparent);position:relative;overflow:hidden}
.hero__scroll-line::after{content:"";position:absolute;top:-50%;left:0;width:100%;height:50%;
  background:var(--brass-bright);animation:scrolldot 2s var(--ease) infinite}
@keyframes scrolldot{0%{top:-50%}100%{top:100%}}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{border-block:1px solid var(--line-soft);padding:1.6rem 0;overflow:hidden;
  background:linear-gradient(var(--ink),var(--espresso));position:relative;z-index:5}
.marquee__track{display:flex;width:max-content;animation:marq 46s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__set{display:flex;align-items:center;gap:2.8rem;padding-right:2.8rem}
.marquee__set span{font-family:var(--serif);font-size:clamp(1.35rem,2.6vw,2.2rem);color:var(--bone);
  font-style:italic;font-weight:400;white-space:nowrap;opacity:.85;transition:color .4s,opacity .4s}
.marquee__set span:hover{color:var(--brass-bright);opacity:1}
.marquee__set i{color:var(--brass);font-style:normal;font-size:.7rem}
@keyframes marq{to{transform:translateX(-50%)}}

/* ============================================================
   MANIFESTO
   ============================================================ */
.manifesto{padding:clamp(5.5rem,14vw,12rem) var(--pad);max-width:var(--maxw);margin-inline:auto;position:relative}
.manifesto__grid{display:grid;gap:2.6rem;max-width:1140px}
.manifesto__statement{font-family:var(--serif);font-weight:300;
  font-size:clamp(2.1rem,5.6vw,4.6rem);line-height:1.08;letter-spacing:-.015em}
.manifesto__statement span{display:block;overflow:hidden;padding-bottom:.03em}
.manifesto__body{max-width:46rem;color:var(--bone);font-size:1.06rem;display:flex;flex-direction:column;gap:1.1rem;margin-top:.6rem}
.manifesto__body strong{color:var(--ivory)}
.stats{display:flex;flex-wrap:wrap;gap:clamp(2rem,6vw,5.5rem);margin-top:2.6rem;padding-top:2.6rem;
  border-top:1px solid var(--line-soft)}
.stat{display:flex;flex-direction:column;gap:.55rem}
.stat__num{font-family:var(--serif);font-size:clamp(2.8rem,5.2vw,4rem);line-height:1;color:var(--brass-bright)}
.stat__num--word{font-style:italic}
.stat__label{font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}

/* ============================================================
   CAPABILITIES
   ============================================================ */
.caps{max-width:var(--maxw);margin-inline:auto}
.caps__list{display:flex;flex-direction:column;gap:clamp(2.5rem,5.5vw,5rem);padding:0 var(--pad) clamp(4rem,9vw,8rem)}
.cap{display:grid;grid-template-columns:1.12fr 1fr;align-items:center;gap:clamp(2rem,5vw,5.5rem);
  perspective:1200px}
.cap:nth-child(even){grid-template-columns:1fr 1.12fr}
.cap:nth-child(even) .cap__media{order:2}
.cap__media{position:relative;overflow:hidden;border-radius:2px;box-shadow:0 50px 100px -45px rgba(0,0,0,.85);
  will-change:transform;transition:transform .2s var(--ease-soft)}
.cap__media::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  border:1px solid var(--line);mix-blend-mode:screen}
.cap__media img{width:100%;aspect-ratio:16/11;object-fit:cover;transition:transform 1.2s var(--ease);transform:scale(1.05)}
.cap:hover .cap__media img{transform:scale(1.13)}
.cap__media::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 58%,rgba(10,8,6,.55));pointer-events:none}
.cap__index{position:absolute;top:1rem;left:1.4rem;font-family:var(--serif);font-size:2.6rem;color:var(--brass-bright);
  opacity:.9;z-index:4;text-shadow:0 2px 22px rgba(0,0,0,.6)}
.cap__ey{font-size:.64rem;letter-spacing:.36em;text-transform:uppercase;color:var(--brass);margin-bottom:1rem}
.cap__text h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,3.5vw,3rem);line-height:1.06;margin-bottom:1rem}
.cap__text p:last-child{color:var(--bone);max-width:34rem;font-size:1.04rem}

/* ============================================================
   CRAFT / MATERIALS
   ============================================================ */
.craft{max-width:var(--maxw);margin-inline:auto;position:relative}
.materials{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-soft);
  border-block:1px solid var(--line-soft);margin:0 var(--pad) clamp(4rem,9vw,8rem)}
.material{background:var(--obsidian);padding:clamp(2rem,3vw,3rem) clamp(1.4rem,2vw,2rem) clamp(2.6rem,4vw,3.4rem);
  display:flex;flex-direction:column;gap:.9rem;position:relative;transition:background .5s}
.material:hover{background:linear-gradient(var(--ink),var(--obsidian))}
.material__no{font-family:var(--serif);font-style:italic;font-size:1.3rem;color:var(--brass);text-transform:uppercase;letter-spacing:.1em}
.material h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,2.4vw,2rem)}
.material p{color:var(--muted);font-size:.94rem}
.material::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--gold-grad);background-size:200% auto;transition:width .7s var(--ease)}
.material:hover::after{width:100%}

/* ============================================================
   TRU FACTORY
   ============================================================ */
.factory{max-width:var(--maxw);margin-inline:auto;position:relative}
.factory__intro{padding:0 var(--pad);max-width:62rem}
.factory__intro p{color:var(--bone);font-size:clamp(1.08rem,1.7vw,1.32rem);line-height:1.75}
.factory__points{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.6rem,3vw,3.2rem);
  padding:clamp(2.6rem,5vw,4rem) var(--pad);margin:clamp(2rem,4vw,3rem) 0 clamp(1.8rem,3vw,2.8rem);
  border-block:1px solid var(--line-soft)}
.fpoint{display:flex;flex-direction:column;gap:.7rem;position:relative}
.fpoint__no{font-family:var(--serif);font-style:italic;color:var(--brass);font-size:1.4rem}
.fpoint h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.3rem,2vw,1.75rem);line-height:1.1}
.fpoint p{color:var(--muted);font-size:.96rem;line-height:1.65}
@media (max-width:760px){ .factory__points{grid-template-columns:1fr;gap:1.9rem} }

/* interlude brand label (real motto, replaces fabricated quote) */
.interlude__brand{display:block;font-family:var(--sans);font-size:.7rem;letter-spacing:.4em;
  text-transform:uppercase;color:var(--brass);margin-bottom:1.4rem}

/* ============================================================
   INSIDE THE STUDIO — real-team trust band
   ============================================================ */
.studio{max-width:var(--maxw);margin-inline:auto;padding-bottom:clamp(3.5rem,7vw,7rem)}
.studio__lede{max-width:46rem;color:var(--bone);font-size:1.05rem;line-height:1.7;margin-top:.4rem}
.studio__band{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.9rem,1.6vw,1.5rem);padding:clamp(1.5rem,3vw,2.5rem) var(--pad) 0}
.studio__shot{position:relative;overflow:hidden;border-radius:2px;cursor:none;
  box-shadow:0 34px 80px -42px rgba(0,0,0,.92)}
.studio__shot img{width:100%;height:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 30%;
  transition:transform 1.2s var(--ease);transform:scale(1.03)}
.studio__shot:hover img{transform:scale(1.1)}
.studio__shot::before{content:"";position:absolute;inset:.8rem;z-index:2;border:1px solid var(--line);opacity:0;
  transform:scale(1.02);transition:opacity .5s var(--ease),transform .5s var(--ease);pointer-events:none}
.studio__shot:hover::before{opacity:1;transform:scale(1)}
.studio__shot::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(10,8,6,.85),transparent 46%)}
.studio__shot figcaption{position:absolute;left:0;bottom:0;z-index:3;padding:1.2rem 1.3rem;
  font-size:.58rem;letter-spacing:.26em;text-transform:uppercase;color:var(--brass);
  transform:translateY(6px);opacity:.9;transition:.5s var(--ease)}
.studio__shot:hover figcaption{transform:translateY(0);opacity:1}
@media (max-width:760px){
  .studio__band{grid-template-columns:1fr 1fr}
  .studio__shot:first-child{grid-column:1 / -1}
  .studio__shot:first-child img{aspect-ratio:16/10;object-position:center 28%}
}

/* ============================================================
   GALLERY
   ============================================================ */
.work{max-width:var(--maxw);margin-inline:auto}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(190px,auto);
  gap:clamp(.9rem,1.6vw,1.5rem);padding:0 var(--pad) clamp(4rem,9vw,8rem)}
.gcard{position:relative;overflow:hidden;border-radius:2px;grid-row:span 2;cursor:none;
  box-shadow:0 36px 80px -45px rgba(0,0,0,.9);will-change:transform}
.gcard img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--ease);transform:scale(1.05)}
.gcard:hover img{transform:scale(1.15)}
.gcard--tall{grid-row:span 3}
.gcard--wide{grid-column:span 2;grid-row:span 2}
.gcard::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,8,6,.9) 0%,transparent 48%);
  opacity:.8;transition:opacity .5s}
.gcard:hover::after{opacity:.96}
.gcard__frame{position:absolute;inset:.9rem;z-index:2;border:1px solid var(--line);opacity:0;
  transform:scale(1.03);transition:opacity .5s var(--ease),transform .5s var(--ease);pointer-events:none}
.gcard:hover .gcard__frame{opacity:1;transform:scale(1)}
.gcard figcaption{position:absolute;left:0;bottom:0;z-index:3;padding:1.4rem 1.5rem;display:flex;flex-direction:column;gap:.3rem;
  transform:translateY(8px);opacity:.94;transition:.5s var(--ease)}
.gcard:hover figcaption{transform:translateY(0);opacity:1}
.gcard__cat{font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;color:var(--brass)}
.gcard__name{font-family:var(--serif);font-size:1.4rem}
.gcard__view{position:absolute;top:1.1rem;right:1.2rem;z-index:3;font-size:.58rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--ivory);padding:.5rem .9rem;border:1px solid var(--line);border-radius:40px;
  background:rgba(10,8,6,.4);backdrop-filter:blur(4px);opacity:0;transform:translateY(-6px);transition:.45s var(--ease)}
.gcard:hover .gcard__view{opacity:1;transform:translateY(0)}

/* ============================================================
   VIRTUAL SHOWROOM — live 3D VR tour
   ============================================================ */
.showroom{max-width:var(--maxw);margin-inline:auto}
.showroom__lede{max-width:42rem;margin-inline:auto;color:var(--bone);font-size:1.05rem}
.showroom__stage{padding:0 var(--pad) clamp(4rem,9vw,8rem)}
.showroom__frame{position:relative;aspect-ratio:16/9;border-radius:3px;overflow:hidden;
  border:1px solid var(--line);box-shadow:0 60px 130px -50px rgba(0,0,0,.95);background:#000}
.showroom__frame::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  border:1px solid var(--line-soft);mix-blend-mode:screen;border-radius:3px}
.showroom__poster{position:absolute;inset:0;z-index:3;background-size:cover;background-position:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.6rem;cursor:none;
  transition:opacity .6s var(--ease),visibility .6s}
.showroom__frame.is-live .showroom__poster{opacity:0;visibility:hidden}
.showroom__scrim{position:absolute;inset:0;background:
  radial-gradient(60% 60% at 50% 50%, rgba(10,8,6,.45), rgba(10,8,6,.78))}
.showroom__tag{position:relative;z-index:2;font-size:.6rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--brass);padding:.55rem 1rem;border:1px solid var(--line);border-radius:40px;background:rgba(10,8,6,.4);backdrop-filter:blur(4px)}
.vr-enter{position:relative;z-index:2;flex:0 0 auto;width:96px;height:96px;border-radius:50%;background:rgba(10,8,6,.35);
  border:0;cursor:none;display:grid;place-items:center;transition:transform .5s var(--ease)}
.showroom__tag,.showroom__hint{flex:0 0 auto}
.vr-enter__ring{position:absolute;inset:0;border-radius:50%;border:1px solid var(--brass)}
.vr-enter__ring::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--brass-bright);
  animation:pulse 2.6s var(--ease) infinite}
.vr-enter__tri{width:0;height:0;border-style:solid;border-width:13px 0 13px 22px;
  border-color:transparent transparent transparent var(--brass-bright);margin-left:6px;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.5))}
.showroom__frame:hover .vr-enter{transform:scale(1.08)}
.showroom__hint{position:relative;z-index:2;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--bone);text-shadow:0 1px 10px rgba(0,0,0,.6)}
.showroom__loading{position:absolute;inset:0;z-index:2;display:none;align-items:center;justify-content:center;gap:.9rem;
  color:var(--bone);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;background:#000}
.showroom__frame.is-loading .showroom__loading{display:flex}
.showroom__loading span{width:16px;height:16px;border:1px solid var(--line);border-top-color:var(--brass-bright);
  border-radius:50%;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.showroom__iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:1}
/* self-hosted WebGL room viewer */
.showroom__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1}
.showroom__frame.is-grabbing{cursor:grabbing}
.showroom__frame:fullscreen{border-radius:0;aspect-ratio:auto}
.showroom__frame:fullscreen .showroom__canvas{width:100vw;height:100vh}
.showroom__plate{position:absolute;left:1.2rem;bottom:1.1rem;z-index:3;font-size:.56rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--bone);padding:.55rem .95rem;border:1px solid var(--line);border-radius:40px;
  background:rgba(10,8,6,.42);backdrop-filter:blur(5px);opacity:0;transform:translateY(6px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);pointer-events:none}
.showroom__frame.is-live .showroom__plate{opacity:1;transform:none}

/* on-brand masks over the third-party VR viewer's chrome (it's cross-origin, so we can't
   edit its text directly — these cover the corners where its UI/Chinese labels sit).
   pointer-events:none keeps the panorama fully drag-navigable underneath. */
.vr-mask{position:absolute;z-index:3;pointer-events:none;opacity:0;transition:opacity .8s var(--ease)}
.showroom__frame.is-live .vr-mask{opacity:1}
.vr-mask--tl{top:0;left:0;width:clamp(260px,36%,400px);height:clamp(170px,32%,240px);
  background:#0a0806;
  -webkit-mask:radial-gradient(135% 135% at 0% 0%, #000 58%, transparent 80%);
          mask:radial-gradient(135% 135% at 0% 0%, #000 58%, transparent 80%);
  padding:1.4rem 1.6rem;display:flex;flex-direction:column;gap:.35rem}
.vr-mask__label{font-family:var(--serif);font-size:clamp(1.3rem,2vw,1.7rem);color:var(--ivory);line-height:1}
.vr-mask__sub{font-size:.58rem;letter-spacing:.26em;text-transform:uppercase;color:var(--brass)}
.vr-mask--tr{top:0;right:0;width:clamp(150px,22%,260px);height:clamp(96px,18%,150px);
  background:linear-gradient(225deg, rgba(10,8,6,.98) 48%, transparent 82%)}
.vr-mask--right{top:0;right:0;height:100%;width:clamp(96px,13%,180px);
  background:linear-gradient(to left, rgba(10,8,6,.98) 50%, transparent)}
.vr-mask--bottom{bottom:0;left:0;width:100%;height:clamp(74px,18%,140px);
  background:linear-gradient(to top, rgba(10,8,6,.98) 48%, transparent)}
.showroom__bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;margin-top:1.2rem}
.showroom__meta{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.showroom__open{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--brass);
  background:transparent;border:0;border-bottom:1px solid var(--line);padding:0 0 2px;cursor:none;
  font-family:var(--sans);transition:color .3s,border-color .3s}
.showroom__open:hover{color:var(--brass-bright);border-color:var(--brass-bright)}

/* ============================================================
   INTERLUDE
   ============================================================ */
.interlude{position:relative;height:78vh;min-height:480px;overflow:hidden;display:grid;place-items:center}
.interlude__bg{position:absolute;inset:-14% 0;background-size:cover;background-position:center;will-change:transform}
.interlude__scrim{position:absolute;inset:0;background:
  radial-gradient(70% 70% at 50% 50%, rgba(10,8,6,.45), rgba(10,8,6,.78))}
.interlude__quote{position:relative;z-index:2;text-align:center;padding-inline:var(--pad);
  font-family:var(--serif);font-weight:300;font-size:clamp(1.9rem,4.8vw,3.9rem);line-height:1.22;max-width:24ch}
.interlude__quote span{display:block;overflow:hidden}
.interlude__mark{font-size:3em;line-height:0;color:var(--brass);height:.5em;margin-bottom:.1em}

/* ============================================================
   PROCESS
   ============================================================ */
.process{max-width:var(--maxw);margin-inline:auto}
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:0 var(--pad) clamp(5rem,10vw,9rem)}
.step{padding:2.4rem 1.7rem 2.8rem;border-top:1px solid var(--line);position:relative;display:flex;flex-direction:column;gap:.75rem}
.step + .step{border-left:1px solid var(--line-soft)}
.step__no{font-family:var(--serif);font-style:italic;font-size:1.2rem;color:var(--brass)}
.step h3{font-family:var(--serif);font-weight:400;font-size:1.7rem}
.step p{color:var(--bone);font-size:.96rem}
.step::before{content:"";position:absolute;top:-1px;left:0;width:0;height:1px;background:var(--gold-grad);background-size:200% auto;transition:width 1s var(--ease)}
.step.is-in::before{width:100%}

/* ============================================================
   CTA / FORM
   ============================================================ */
.cta{position:relative;overflow:hidden;padding:clamp(4.5rem,9vw,8.5rem) var(--pad)}
.cta__bg{position:absolute;inset:-14% 0;background-size:cover;background-position:center;filter:brightness(.36) saturate(1.05);will-change:transform}
.cta__scrim{position:absolute;inset:0;background:
  radial-gradient(80% 80% at 82% 16%, rgba(110,34,48,.22), transparent 60%),
  linear-gradient(to right, rgba(10,8,6,.94), rgba(10,8,6,.66))}
.cta__panel{position:relative;z-index:2;max-width:var(--maxw);margin-inline:auto;display:grid;
  grid-template-columns:.92fr 1.08fr;gap:clamp(2.5rem,6vw,6rem);align-items:start}
.cta__title{font-family:var(--serif);font-weight:300;font-size:clamp(2.7rem,6vw,5.2rem);line-height:1;margin:1.3rem 0 1.5rem}
.cta__lede{color:var(--bone);max-width:30rem;font-size:1.06rem}
.cta__assure{list-style:none;margin-top:2.1rem;display:flex;flex-direction:column;gap:.95rem}
.cta__assure li{position:relative;padding-left:1.8rem;color:var(--bone);font-size:.96rem}
.cta__assure li::before{content:"✦";position:absolute;left:0;color:var(--brass);font-size:.8rem;top:.18rem}

.form{display:grid;grid-template-columns:1fr 1fr;gap:1.9rem 1.7rem;background:rgba(18,15,11,.6);
  backdrop-filter:blur(14px);border:1px solid var(--line);padding:clamp(1.9rem,3.5vw,3.2rem);border-radius:3px;
  box-shadow:0 60px 130px -55px rgba(0,0,0,.95);position:relative}
.form::before{content:"";position:absolute;inset:0;border-radius:3px;pointer-events:none;
  border:1px solid transparent;background:var(--gold-grad) border-box;-webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.25}
.field{position:relative;display:flex;flex-direction:column}
.field--full{grid-column:1 / -1}
.field input,.field select,.field textarea{background:transparent;border:0;border-bottom:1px solid var(--line-soft);
  color:var(--ivory);font-family:var(--sans);font-size:1rem;font-weight:300;padding:.9rem 0 .65rem;outline:none;width:100%;cursor:none;transition:border-color .4s}
.field textarea{resize:vertical;min-height:3rem}
.field select{appearance:none}
.field select option{background:var(--ink);color:var(--ivory)}
.field label{position:absolute;left:0;top:.9rem;color:var(--muted);font-size:1rem;pointer-events:none;transition:.35s var(--ease)}
.field input:focus + label,.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,.field textarea:not(:placeholder-shown) + label,
.field--select select:focus + label,.field--select.is-filled label{
  top:-.7rem;font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--brass)}
.field__line{position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--gold-grad);background-size:200% auto;transition:width .45s var(--ease)}
.field input:focus ~ .field__line,.field select:focus ~ .field__line,.field textarea:focus ~ .field__line{width:100%}
.field.is-error input,.field.is-error select{border-bottom-color:var(--wine)}
.field--select::after{content:"⌄";position:absolute;right:.2rem;top:.7rem;color:var(--brass);pointer-events:none;font-size:1rem}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.btn--submit{grid-column:1 / -1;margin-top:.5rem;padding:1.2rem;cursor:none}
.btn__loading{display:none}
.btn.is-loading .btn__label{display:none}
.btn.is-loading .btn__loading{display:inline}
.form__note{grid-column:1 / -1;font-size:.7rem;color:var(--muted);text-align:center;letter-spacing:.04em}

.form__success{display:none;position:relative;z-index:2;text-align:center;background:rgba(18,15,11,.6);backdrop-filter:blur(14px);
  border:1px solid var(--line);padding:clamp(2.5rem,6vw,4.5rem);border-radius:3px;flex-direction:column;align-items:center;gap:1rem}
.form__success.is-visible{display:flex;animation:fadeUp .9s var(--ease)}
.form__success-mark{width:66px;height:66px;border-radius:50%;border:1px solid var(--brass);display:grid;place-items:center;
  color:var(--brass-bright);font-size:1.5rem;margin-bottom:.5rem;animation:sealpulse 3s var(--ease) infinite}
@keyframes sealpulse{0%,100%{box-shadow:0 0 0 0 rgba(200,163,90,0)}50%{box-shadow:0 0 0 8px rgba(200,163,90,.08)}}
.form__success h3{font-family:var(--serif);font-weight:400;font-size:2.3rem}
.form__success p{color:var(--bone);max-width:32rem}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:linear-gradient(var(--ink),var(--obsidian));border-top:1px solid var(--line-soft);padding:clamp(3.5rem,7vw,6rem) var(--pad) 2rem}
.footer__top{max-width:var(--maxw);margin-inline:auto;display:grid;grid-template-columns:1fr 1.4fr;gap:3rem;padding-bottom:3rem;border-bottom:1px solid var(--line-soft)}
.footer__mark{font-family:var(--serif);font-size:2.8rem;letter-spacing:.22em;color:var(--brass-bright)}
.footer__name{font-size:.68rem;letter-spacing:.34em;text-transform:uppercase;color:var(--bone);margin-top:.6rem}
.footer__tag{font-family:var(--serif);font-style:italic;color:var(--muted);margin-top:.3rem;font-size:1.1rem}
.footer__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.footer__col h4{font-size:.64rem;letter-spacing:.28em;text-transform:uppercase;color:var(--brass);margin-bottom:1.1rem;font-weight:400}
.footer__col a{display:block;color:var(--bone);font-size:.9rem;margin-bottom:.7rem;transition:color .3s}
.footer__col a:hover{color:var(--ivory)}
.footer__col p{color:var(--bone);font-size:.88rem;line-height:1.7}
.footer__base{max-width:var(--maxw);margin:1.6rem auto 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:.7rem;letter-spacing:.1em;color:var(--muted)}

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox{position:fixed;inset:0;z-index:9800;display:flex;align-items:center;justify-content:center;
  background:rgba(6,5,4,.94);backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s}
.lightbox.is-open{opacity:1;visibility:visible}
.lightbox__stage{position:relative;max-width:min(92vw,1300px);max-height:84vh;display:flex;flex-direction:column;gap:1rem;
  transform:scale(.96);transition:transform .6s var(--ease-luxe)}
.lightbox.is-open .lightbox__stage{transform:scale(1)}
.lightbox__stage img{max-width:100%;max-height:78vh;object-fit:contain;border:1px solid var(--line);box-shadow:0 40px 120px -30px rgba(0,0,0,.9)}
.lightbox__stage figcaption{text-align:center;font-family:var(--serif);font-style:italic;font-size:1.2rem;color:var(--bone)}
.lightbox__close,.lightbox__nav{position:absolute;z-index:2;background:rgba(18,15,11,.5);border:1px solid var(--line);
  color:var(--ivory);width:54px;height:54px;border-radius:50%;cursor:none;font-size:1.3rem;display:grid;place-items:center;
  transition:background .4s,border-color .4s,color .4s}
.lightbox__close:hover,.lightbox__nav:hover{background:var(--brass);color:var(--obsidian);border-color:var(--brass)}
.lightbox__close{top:clamp(1.2rem,4vw,2.5rem);right:clamp(1.2rem,4vw,2.5rem)}
.lightbox__nav{top:50%;transform:translateY(-50%)}
.lightbox__nav--prev{left:clamp(1rem,3vw,2.5rem)}
.lightbox__nav--next{right:clamp(1rem,3vw,2.5rem)}

/* ============================================================
   LUXE DETAILS — light-bloom, scroll rail, crest, ornaments
   ============================================================ */
/* subtle brass light-bloom behind dark sections */
.manifesto{background:radial-gradient(72% 60% at 10% 22%, rgba(200,163,90,.055), transparent 58%)}
.craft{background:radial-gradient(60% 70% at 50% 0%, rgba(200,163,90,.05), transparent 60%)}
.process{background:radial-gradient(58% 80% at 92% 14%, rgba(200,163,90,.05), transparent 60%)}
.work{background:radial-gradient(50% 50% at 100% 30%, rgba(110,34,48,.06), transparent 60%)}

/* editorial scroll rail */
.rail{position:fixed;right:clamp(1rem,2.1vw,2.3rem);top:50%;transform:translateY(-50%);z-index:6500;
  display:flex;flex-direction:column;gap:1.05rem;opacity:0;transition:opacity .7s var(--ease)}
.rail.is-ready{opacity:1}
.rail__dot{position:relative;display:flex;align-items:center;justify-content:flex-end;height:12px;cursor:none}
.rail__dot span{width:7px;height:7px;border-radius:50%;border:1px solid var(--muted);display:block;transition:.45s var(--ease)}
.rail__dot::before{content:attr(data-label);position:absolute;right:20px;white-space:nowrap;
  font-size:.55rem;letter-spacing:.28em;text-transform:uppercase;color:var(--bone);
  opacity:0;transform:translateX(8px);transition:.45s var(--ease);pointer-events:none;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.rail__dot:hover::before{opacity:1;transform:translateX(0)}
.rail__dot:hover span{border-color:var(--brass-bright)}
.rail__dot.is-active span{background:var(--brass-bright);border-color:var(--brass-bright);
  box-shadow:0 0 12px rgba(236,212,154,.75);transform:scale(1.18)}
.rail__dot.is-active::before{opacity:1;transform:translateX(0);color:var(--brass-bright)}
@media (max-width:980px){ .rail{display:none} }

/* active nav link */
.nav__links a.is-active{color:var(--ivory)}
.nav__links a.is-active::after{width:100%}

/* ambient sound toggle */
.sound{position:fixed;left:clamp(1rem,2.1vw,2.3rem);bottom:clamp(5rem,11vh,6.4rem);z-index:6500;
  display:flex;align-items:center;gap:.7rem;background:rgba(10,8,6,.5);border:1px solid var(--line);
  border-radius:40px;padding:.6rem 1.05rem .6rem .9rem;color:var(--bone);cursor:none;backdrop-filter:blur(7px);
  font-size:.56rem;letter-spacing:.26em;text-transform:uppercase;transition:color .4s,border-color .4s,background .4s}
.sound:hover{color:var(--ivory);border-color:var(--brass);background:rgba(10,8,6,.7)}
.sound__bars{display:flex;align-items:flex-end;gap:2px;height:14px}
.sound__bars i{width:2px;height:4px;background:var(--brass);border-radius:1px;transition:background .3s}
.sound.is-on .sound__bars i{background:var(--brass-bright);animation:eq .9s ease-in-out infinite}
.sound.is-on .sound__bars i:nth-child(2){animation-delay:.15s}
.sound.is-on .sound__bars i:nth-child(3){animation-delay:.3s}
.sound.is-on .sound__bars i:nth-child(4){animation-delay:.45s}
@keyframes eq{0%,100%{height:4px}50%{height:14px}}
@media (max-width:760px){ .sound{left:50%;transform:translateX(-50%);bottom:1rem;padding:.5rem .9rem} }

/* couture engraved crest */
.crest{width:clamp(104px,9vw,134px);height:auto;overflow:visible;margin-bottom:.4rem}
.crest-ring{fill:none;stroke:var(--brass);stroke-width:1.1;opacity:.9}
.crest-ring--thin{stroke-width:.5;opacity:.45}
.crest-arc{fill:var(--brass);font-family:var(--sans);font-size:11.5px;letter-spacing:2px;font-weight:400}
.crest-mono{fill:var(--brass-bright);font-family:var(--serif);font-size:52px;letter-spacing:1px}
.crest-sub{fill:var(--bone);font-family:var(--sans);font-size:8.5px;letter-spacing:3.5px}
.crest-rule{stroke:var(--brass);stroke-width:.8;opacity:.7}
.crest-star{fill:var(--brass);font-size:12px}

/* ornamental chapter dividers */
.ornament{display:flex;align-items:center;justify-content:center;gap:1.5rem;padding:.5rem var(--pad);
  max-width:var(--maxw);margin-inline:auto}
.ornament span{height:1px;width:min(24vw,300px);background:linear-gradient(90deg,transparent,var(--line),transparent)}
.ornament i{color:var(--brass);font-style:normal;font-size:.72rem}

/* ============================================================
   FOUNDER STORY
   ============================================================ */
.founder{max-width:var(--maxw);margin-inline:auto;padding:clamp(4rem,9vw,8rem) var(--pad)}
.founder__grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(2.5rem,6vw,6rem);align-items:center}
.founder__media{position:relative}
.founder__portrait{position:relative;overflow:hidden;border-radius:3px;box-shadow:0 50px 110px -50px rgba(0,0,0,.9)}
.founder__portrait::before{content:"";position:absolute;inset:0;z-index:2;border:1px solid var(--line);pointer-events:none}
.founder__portrait::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(10,8,6,.55),transparent 48%)}
.founder__portrait img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center 18%;filter:saturate(.97) contrast(1.03)}
.founder__badge{position:absolute;right:clamp(-1.2rem,-1vw,-.4rem);bottom:1.8rem;z-index:3;
  background:rgba(10,8,6,.72);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:2px;
  padding:1rem 1.4rem;text-align:center;display:flex;flex-direction:column;gap:.25rem}
.founder__badge-num{font-family:var(--serif);font-size:2.5rem;color:var(--brass-bright);line-height:1}
.founder__badge-num i{font-style:normal;font-size:1.3rem;vertical-align:super;color:var(--brass)}
.founder__badge-label{font-size:.52rem;letter-spacing:.24em;text-transform:uppercase;color:var(--bone)}
.founder__title{font-family:var(--serif);font-weight:300;font-size:clamp(2.4rem,5vw,4.3rem);line-height:1.02;margin:1.2rem 0 1.6rem}
.founder__body{display:flex;flex-direction:column;gap:1.1rem;color:var(--bone);font-size:1.05rem;max-width:42rem}
.founder__body strong{color:var(--ivory);font-weight:400}
.founder__quote{margin-top:2.1rem;padding-left:1.7rem;border-left:1px solid var(--brass);
  font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,2.5vw,2rem);color:var(--ivory);line-height:1.32}
.founder__quote cite{display:block;margin-top:1rem;font-family:var(--sans);font-style:normal;
  font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--brass)}

/* ============================================================
   SHOWROOM — PROJECT SWITCHER + swap fade
   ============================================================ */
.showroom__canvas{transition:opacity .55s var(--ease)}
.showroom__frame.is-swapping .showroom__canvas{opacity:.12}
.showroom__projects{display:grid;grid-template-columns:repeat(6,1fr);gap:.7rem;margin-top:1rem}
.vproj{position:relative;aspect-ratio:16/11;border:1px solid var(--line-soft);border-radius:2px;overflow:hidden;
  background-size:cover;background-position:center;cursor:none;padding:0;display:flex;flex-direction:column;
  justify-content:flex-end;align-items:flex-start;text-align:left;transition:transform .45s var(--ease),border-color .45s}
.vproj::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,8,6,.9),transparent 62%);transition:opacity .4s}
.vproj>span{position:relative;z-index:2;padding:0 .7rem}
.vproj__cat{font-size:.48rem;letter-spacing:.22em;text-transform:uppercase;color:var(--brass)}
.vproj__name{font-family:var(--serif);font-size:.98rem;color:var(--ivory);padding-bottom:.55rem;line-height:1.1}
.vproj:hover{transform:translateY(-3px);border-color:var(--line)}
.vproj.is-active{border-color:var(--brass)}
.vproj.is-active::before{content:"";position:absolute;inset:0;z-index:3;border:1px solid var(--brass);border-radius:2px;pointer-events:none}

/* ============================================================
   SOCIAL PROOF
   ============================================================ */
.social{max-width:var(--maxw);margin-inline:auto;padding-bottom:clamp(3.5rem,8vw,7rem)}
.social__handle{color:var(--brass);border-bottom:1px solid var(--line);transition:color .3s}
.social__handle:hover{color:var(--brass-bright)}
.social__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;padding:0 var(--pad);align-items:start}
.social__card{position:relative;border:1px solid var(--line);border-radius:6px;overflow:hidden;
  background:#0e0b09;box-shadow:0 40px 90px -55px rgba(0,0,0,.95);min-height:420px;display:flex;
  align-items:center;justify-content:center;padding:.4rem}
.social__card iframe{border-radius:4px;max-width:100% !important}
.social__card .instagram-media,.social__card .tiktok-embed{width:100% !important}

/* ============================================================
   IMAGE LOADING PLACEHOLDER — dark-brass panel + shimmer behind every
   media box so lazy images read as intentional, never as dead black space.
   ============================================================ */
.gcard, .cap__media, .studio__shot, .founder__portrait{
  background-color:#14100b;
  background-image:linear-gradient(115deg, #1c1710 0%, #0d0a08 46%, #1f190f 100%);
  background-size:220% 220%;
  animation:shimmerbg 4.5s ease-in-out infinite;
}
/* parallax photo sections just get a dark fill (no shimmer — they use cover images) */
.interlude__bg, .cta__bg{background-color:#0d0a08}
@keyframes shimmerbg{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@media (prefers-reduced-motion:reduce){ .gcard,.cap__media,.studio__shot,.founder__portrait{animation:none} }

/* ============================================================
   REVEAL
   ============================================================ */
[data-reveal]{opacity:0;transform:translateY(30px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal-line]{display:inline-block;transform:translateY(115%);transition:transform 1.15s var(--ease-luxe)}
[data-reveal-line].is-in{transform:translateY(0)}
.gcard,.cap,.material{opacity:0;transform:translateY(42px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.gcard.is-in,.cap.is-in,.material.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition-duration:.01ms !important}
  [data-reveal],[data-reveal-line],.gcard,.cap,.material{opacity:1;transform:none}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .gallery{grid-template-columns:repeat(2,1fr)}
  .gcard--wide{grid-column:span 2}
  .steps{grid-template-columns:repeat(2,1fr)}
  .step:nth-child(3){border-left:0}
  .materials{grid-template-columns:repeat(2,1fr)}
  .cta__panel{grid-template-columns:1fr;gap:2.5rem}
  .footer__top{grid-template-columns:1fr}
  .founder__grid{grid-template-columns:1fr;gap:2.6rem}
  .founder__media{max-width:440px}
  .showroom__projects{grid-template-columns:repeat(3,1fr)}
  .social__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  body{cursor:auto}
  .nav__links,.btn--nav{display:none}
  .nav__menu{display:flex}
  .nav.is-open .nav__links{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    background:rgba(10,8,6,.98);padding:1.6rem var(--pad);gap:1.4rem;border-bottom:1px solid var(--line-soft)}
  .cap,.cap:nth-child(even){grid-template-columns:1fr}
  .cap:nth-child(even) .cap__media{order:0}
  .form{grid-template-columns:1fr}
  .field--full{grid-column:1}
  .stats{gap:1.6rem 2.6rem}
  .footer__cols{grid-template-columns:1fr 1fr}
  .footer__base{flex-direction:column}
  .hero__hint{display:none}
  .hero__content{padding-top:5rem}
  /* taller, immersive VR frame on phones + proportional masks */
  .showroom__frame{aspect-ratio:4/5}
  .vr-enter{width:76px;height:76px}
  .vr-enter__tri{border-width:11px 0 11px 18px}
  .vr-mask--tl{width:64%;height:22%;padding:1rem 1.1rem}
  .vr-mask__label{font-size:1.15rem}
  .vr-mask__sub{font-size:.52rem;letter-spacing:.18em}
  .vr-mask--tr{width:36%;height:13%}
  .vr-mask--right{width:18%}
  .vr-mask--bottom{height:13%}
}
@media (max-width:600px){
  .showroom__projects{grid-template-columns:repeat(2,1fr)}
  .social__grid{grid-template-columns:1fr}
  .founder__badge{right:1rem;bottom:1rem;padding:.8rem 1.1rem}
  .founder__badge-num{font-size:2rem}
}
@media (max-width:460px){
  /* 2-col uniform gallery halves page height + loads smaller images faster */
  .gallery{grid-template-columns:1fr 1fr;grid-auto-rows:auto;gap:.7rem}
  .gcard,.gcard--wide,.gcard--tall{grid-column:auto;grid-row:auto}
  .gcard img{aspect-ratio:4/5;height:auto}
  .gcard__name{font-size:1.05rem}
  .gcard__cat{font-size:.5rem}
  .steps,.materials{grid-template-columns:1fr}
  .step + .step{border-left:0}
  .footer__cols{grid-template-columns:1fr}
}