/* ============================================================
   GLORYN CUSTOM — shared design system
   Cinematic dark luxury · black & gold · living light
   ============================================================ */

/* ---------- fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

@font-face{ font-family:'Galgo'; font-style:normal; font-weight:300; font-display:swap;
  src:url('../fonts/galgo-light.woff2') format('woff2'), url('../fonts/galgo-light.woff') format('woff') }
@font-face{ font-family:'Galgo'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/galgo-regular.woff2') format('woff2'), url('../fonts/galgo-regular.woff') format('woff') }
@font-face{ font-family:'Galgo'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/galgo-bold.woff2') format('woff2'), url('../fonts/galgo-bold.woff') format('woff') }

/* ---------- tokens ---------- */
:root{
  --bg:#0a0a0a;
  --bg-deep:#050505;
  --surface:#131313;
  --surface-2:#1b1a18;
  --ink:#0a0a0a;

  --gold:#e7b53b;
  --gold-bright:#f7d885;
  --gold-deep:#b8862a;
  --bronze:#8a5a1e;

  --cream:#f6f1e7;
  --muted:rgba(246,241,231,.56);
  --faint:rgba(246,241,231,.32);
  --line:rgba(231,181,59,.16);
  --line-soft:rgba(246,241,231,.08);

  --yellow:#ffce00;          /* flat hero placeholder */
  --yellow-ink:#100c00;

  --shell:78rem;
  --gutter:clamp(1.25rem, 4vw, 3.5rem);
  --radius:0;
  --radius-lg:0;
  --radius-pill:0;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --font-display:'Galgo', serif;
  --font-body:'Outfit', system-ui, sans-serif;
}

/* ---------- reset ---------- */
*{ margin:0; padding:0; box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:6.5rem }
body{
  background:var(--bg);
  color:var(--cream);
  font-family:var(--font-body);
  font-weight:300;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer }
ul{ list-style:none }
img{ display:block; max-width:100% }
::selection{ background:var(--gold); color:var(--ink) }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:2px }

/* hide scrollbar but keep scroll */
html{ scrollbar-width:none }
body::-webkit-scrollbar{ display:none }

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }
.skip{ position:fixed; left:1rem; top:1rem; z-index:200; background:var(--gold); color:var(--ink); padding:.6rem 1.1rem; border-radius:.6rem; font-size:.8rem; font-weight:600; transform:translateY(-200%); transition:transform .25s }
.skip:focus{ transform:none }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-delay:0s !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important }
}

/* ============================================================
   atmosphere — grain + vignette on the dark canvas
   ============================================================ */
.atmosphere{ position:fixed; inset:0; z-index:0; pointer-events:none }
.atmosphere::before{  /* radial gold bloom top */
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(231,181,59,.06), transparent 55%),
    radial-gradient(90% 60% at 85% 110%, rgba(138,90,30,.06), transparent 60%);
}
.grain{ position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.03; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* starfield canvas (dark sections) */
.starfield{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none }

/* ============================================================
   custom cursor (fine pointers only)
   ============================================================ */
.cursor-dot,.cursor-ring{ display:none }
@media (hover:hover) and (pointer:fine){
  html.has-cursor, html.has-cursor *{ cursor:none !important }
  .cursor-dot{
    display:block; position:fixed; top:0; left:0; z-index:9999;
    width:7px; height:7px; border-radius:50%;
    background:var(--gold-bright);
    box-shadow:0 0 10px 2px rgba(231,181,59,.9);
    transform:translate(-50%,-50%); pointer-events:none;
  }
  .cursor-ring{
    display:block; position:fixed; top:0; left:0; z-index:9998;
    width:42px; height:42px; border-radius:50%;
    border:1.5px solid rgba(231,181,59,.55);
    transform:translate(-50%,-50%); pointer-events:none;
    transition:width .3s var(--ease), height .3s var(--ease), background .3s, border-color .3s;
  }
  .cursor-ring::after{ content:""; position:absolute; inset:-12px; border-radius:50%;
    background:radial-gradient(circle, rgba(231,181,59,.16), transparent 70%); }
  html.cursor-hover .cursor-ring{ width:64px; height:64px; background:rgba(231,181,59,.08); border-color:rgba(231,181,59,.8) }
  html.cursor-hover .cursor-dot{ opacity:0 }
}

/* ============================================================
   layout helpers
   ============================================================ */
.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gutter) }
.section{ position:relative; z-index:2; padding-block:clamp(4.5rem,10vw,9rem) }
.section--tight{ padding-block:clamp(3rem,6vw,5rem) }
main{ position:relative; z-index:2 }

.eyebrow{ display:inline-flex; align-items:center; gap:.6rem; font-size:.66rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.24em; color:var(--gold) }
.eyebrow .dot{ display:none }
.eyebrow--muted{ color:var(--faint) } .eyebrow--muted .dot{ background:var(--faint); box-shadow:none }

/* ---------- typography ---------- */
.display{ font-family:var(--font-display); font-weight:400; line-height:1.02; letter-spacing:.01em; color:var(--cream) }
.display-1{ font-size:clamp(2.9rem, 8.5vw, 7.2rem) }
.display-2{ font-size:clamp(2.2rem, 5.5vw, 4.4rem) }
.display-3{ font-size:clamp(1.7rem, 3.4vw, 2.7rem) }
.lede{ font-size:clamp(1.05rem,1.6vw,1.3rem); color:var(--muted); font-weight:300; max-width:46ch; line-height:1.7 }
.gold-text{ color:var(--gold) }
.serif-italic{ font-family:var(--font-display); font-style:normal }

/* gold gradient text */
.grad-gold{ background:linear-gradient(100deg,var(--gold-bright),var(--gold) 45%,var(--gold-deep));
  -webkit-background-clip:text; background-clip:text; color:transparent }

/* ============================================================
   buttons / pills
   ============================================================ */
.btn{ display:inline-flex; align-items:center; gap:.6rem; font-size:.78rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.14em; padding:.9rem 1.7rem; border-radius:var(--radius-pill);
  transition:transform .5s var(--ease), background .4s, color .4s, box-shadow .4s, border-color .4s; will-change:transform }
.btn .arrow{ display:inline-flex; transition:transform .5s var(--ease) }
.btn:hover{ transform:translateY(-2px) }
.btn:hover .arrow{ transform:translate(6px,0) }
.btn--gold{ background:var(--gold); color:var(--ink); box-shadow:none }
.btn--gold:hover{ background:var(--gold-bright); box-shadow:0 10px 28px -14px rgba(231,181,59,.5) }
.btn--ghost{ border:1px solid var(--line-soft); color:var(--cream) }
.btn--ghost:hover{ border-color:var(--gold); color:var(--gold) }
.btn--ink{ background:var(--ink); color:var(--gold) }
.btn--lg{ padding:1.05rem 2.1rem; font-size:.82rem }

/* ============================================================
   reveal system
   ============================================================ */
.reveal{ opacity:0; transform:translate3d(var(--rx,0), var(--ry,54px),0) scale(var(--rsc,1));
  transition:opacity 1.5s var(--ease), transform 1.5s var(--ease); transition-delay:var(--rd,0ms); will-change:opacity,transform }
.reveal.is-visible{ opacity:1; transform:translate3d(0,0,0) scale(1) }

/* per-letter title reveal (from laocoon) */
.char{ display:inline-block; opacity:0; transform:translateY(.9em); filter:blur(20px);
  transition:opacity 1.3s var(--ease-out), transform 1.3s var(--ease-out), filter 1.3s var(--ease-out) }
.reveal-title.is-visible .char{ opacity:1; transform:translateY(0); filter:blur(0) }

/* line mask reveal */
.line-reveal .ln{ display:block; overflow:hidden }
.line-reveal .ln-in{ display:block; transform:translateY(110%); transition:transform 1.7s var(--ease-out); transition-delay:var(--ld,0ms) }
.line-reveal.is-visible .ln-in{ transform:translateY(0) }

/* ============================================================
   header
   ============================================================ */
/* fixed stack: navbar on top, promo bar locked directly beneath it */
.topbar{ position:fixed; inset-inline:0; top:0; z-index:90; transition:transform 1.15s var(--ease) }
.topbar.nav-hidden{ transform:translateY(-100%); pointer-events:none }
.header{ position:relative; z-index:2; transition:background .4s, backdrop-filter .4s, border-color .4s;
  border-bottom:1px solid transparent }

/* ---- promo / announcement bar (under the navbar, all pages) ---- */
.promo{ position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:.6rem; flex-wrap:wrap;
  padding:.5rem 1rem; text-align:center; text-decoration:none;
  background:#0b0b0a; border-bottom:1px solid var(--line-soft);
  font-size:.66rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--faint);
  transition:color .3s }
.promo .star{ color:var(--gold); filter:drop-shadow(0 0 5px rgba(231,181,59,.6)) }
.promo strong{ color:var(--gold-bright); font-weight:700 }
.promo .promo-cta{ color:var(--gold); border-bottom:1px solid rgba(231,181,59,.45); padding-bottom:1px; transition:color .3s, border-color .3s }
.promo:hover .promo-cta{ color:var(--gold-bright); border-color:var(--gold) }
@media(max-width:520px){ .promo{ font-size:.6rem; letter-spacing:.1em; gap:.4rem } .promo .promo-cta{ display:none } }
.header.scrolled{ background:rgba(10,10,10,.72); backdrop-filter:blur(14px) saturate(140%); border-bottom-color:var(--line-soft) }
.header-in{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:1.1rem var(--gutter) }
.brand{ display:inline-flex; align-items:center; gap:.7rem; transition:transform .35s var(--ease) }
.brand:hover{ transform:scale(1.03) }
.brand img{ width:38px; height:38px; border-radius:50%; box-shadow:0 0 0 1px var(--line), 0 0 18px -4px rgba(231,181,59,.6) }
.brand-name{ font-family:var(--font-display); font-size:1.25rem; letter-spacing:.06em; line-height:1 }
.brand-name small{ display:block; font-family:var(--font-body); font-size:.55rem; letter-spacing:.42em; text-transform:uppercase; color:var(--gold); font-weight:600; margin-top:.15rem }

.nav-primary{ display:none }
.nav-primary ul{ display:flex; align-items:center; gap:2.2rem }
.nav-primary a{ position:relative; font-size:.78rem; font-weight:500; text-transform:uppercase; letter-spacing:.18em; color:var(--muted); transition:color .3s }
.nav-primary a::after{ content:""; position:absolute; left:0; bottom:-6px; width:0; height:1px; background:var(--gold); transition:width .35s var(--ease) }
.nav-primary a:hover, .nav-primary a[aria-current="page"]{ color:var(--cream) }
.nav-primary a:hover::after, .nav-primary a[aria-current="page"]::after{ width:100% }

.header-right{ display:flex; align-items:center; gap:1rem }
.menu-btn{ display:inline-flex; align-items:center; gap:.6rem; border:1px solid var(--line); border-radius:var(--radius-pill);
  padding:.6rem 1rem; font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.16em; color:var(--cream);
  transition:border-color .3s, color .3s, background .3s }
.menu-btn:hover{ border-color:var(--gold); color:var(--gold) }
.menu-btn .bars{ display:inline-flex; flex-direction:column; gap:3px }
.menu-btn .bars span{ width:16px; height:1.5px; background:currentColor; transition:transform .3s }
.menu-word{ display:none }

/* header sitting over the yellow hero → ink text for contrast (reverts once scrolled) */
.header.hero-light:not(.scrolled) .brand-name{ color:var(--ink) }
.header.hero-light:not(.scrolled) .brand-name small{ color:rgba(16,12,0,.7) }
.header.hero-light:not(.scrolled) .nav-primary a{ color:rgba(16,12,0,.6) }
.header.hero-light:not(.scrolled) .nav-primary a:hover,
.header.hero-light:not(.scrolled) .nav-primary a[aria-current="page"]{ color:var(--ink) }
.header.hero-light:not(.scrolled) .nav-primary a::after{ background:var(--ink) }
.header.hero-light:not(.scrolled) .menu-btn{ color:var(--ink); border-color:rgba(16,12,0,.3) }
.header.hero-light:not(.scrolled) .menu-btn:hover{ border-color:var(--ink) }
.header.hero-light:not(.scrolled) .btn--gold{ background:var(--ink); color:var(--gold); box-shadow:0 8px 24px -10px rgba(0,0,0,.5) }

@media(min-width:600px){ .menu-word{ display:inline } }
@media(min-width:1000px){ .nav-primary{ display:flex } }

/* ============================================================
   full-screen nav overlay
   ============================================================ */
.nav-menu{ position:fixed; inset:0; z-index:150; display:flex; flex-direction:column; background:var(--bg-deep);
  opacity:0; pointer-events:none; transition:opacity .5s var(--ease); overflow:hidden }
.nav-menu.open{ opacity:1; pointer-events:auto }
.nav-menu .starfield{ opacity:.7 }
.nav-top{ position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; padding:1.1rem var(--gutter) }
.nav-close{ display:inline-flex; align-items:center; gap:.55rem; border:1px solid var(--line); border-radius:var(--radius-pill);
  padding:.55rem 1.1rem; font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.16em; color:var(--muted);
  transition:border-color .3s, color .3s }
.nav-close:hover{ border-color:var(--gold); color:var(--gold) }
.nav-mid{ position:relative; z-index:2; flex:1; display:flex; flex-direction:column; justify-content:center }
.nav-list{ display:flex; flex-direction:column }
.nav-item{ display:flex; align-items:baseline; gap:1.2rem; padding-block:.35rem; width:100%; text-align:left;
  font-family:var(--font-display); font-size:clamp(2.4rem,8vw,5.5rem); line-height:1.08; color:var(--faint);
  transform:translateY(2rem); opacity:0; transition:transform 1s var(--ease), opacity 1s var(--ease), color .5s }
.nav-menu.open .nav-item{ transform:translateY(0); opacity:1 }
.nav-item .idx{ font-family:var(--font-body); font-size:.9rem; font-weight:500; color:var(--gold); letter-spacing:.1em; flex:none; width:2.5rem }
.nav-item:hover{ color:var(--cream) }
.nav-item:hover .lab{ padding-left:.6rem }
.nav-item .lab{ transition:padding .35s var(--ease) }
.nav-bottom{ position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between;
  border-top:1px solid var(--line-soft); padding:1.3rem var(--gutter); font-size:.75rem; letter-spacing:.06em; color:var(--faint) }
.nav-bottom a{ color:var(--gold); transition:color .3s } .nav-bottom a:hover{ color:var(--gold-bright) }

/* ============================================================
   loader
   ============================================================ */
.loader{ position:fixed; inset:0; z-index:300; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2rem; background:var(--bg-deep); transition:opacity .6s var(--ease), visibility .6s }
.loader.done{ opacity:0; visibility:hidden }
.loader-brand{ display:flex; flex-direction:column; align-items:center; gap:1rem; text-align:center }
.loader-brand img{ width:76px; height:76px; border-radius:50%; box-shadow:0 0 40px -6px rgba(231,181,59,.6) }
.loader-brand .name{ font-family:var(--font-display); font-size:1.8rem; letter-spacing:.14em }
.loader-brand .tag{ font-size:.7rem; letter-spacing:.34em; text-transform:uppercase; color:var(--gold) }
.loader-track{ width:min(20rem,60vw); height:1px; background:var(--line-soft); overflow:hidden }
.loader-fill{ height:100%; width:0; background:linear-gradient(90deg,var(--gold-deep),var(--gold-bright)) }
.loader-count{ font-size:.72rem; letter-spacing:.2em; color:var(--muted); font-variant-numeric:tabular-nums }

/* ============================================================
   autoplay video hero (home)
   ============================================================ */
.video-hero{ position:relative; height:100svh; min-height:540px; overflow:hidden; background:#0b0b0c;
  border-radius:0 0 clamp(1.5rem,4vw,3rem) clamp(1.5rem,4vw,3rem) }
.video-hero__media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block }
.video-hero__scrim{ position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(130% 100% at 50% 46%, transparent 42%, rgba(6,6,7,.5) 100%),
    linear-gradient(to bottom, rgba(6,6,7,.55), transparent 24%, transparent 62%, rgba(6,6,7,.72)) }
.video-hero__mark{ position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); z-index:3;
  width:100%; margin:0; padding-inline:clamp(.75rem,2.5vw,2.5rem); line-height:0; pointer-events:none }
.video-hero__mark svg{ display:block; width:100%; height:auto; overflow:visible; filter:drop-shadow(0 8px 44px rgba(0,0,0,.6)) }
.video-hero__mark text{ font-family:var(--font-display); font-weight:400; font-size:190px; fill:var(--cream) }
.video-hero .hero-scroll{ z-index:3; color:var(--cream); text-shadow:0 2px 20px rgba(0,0,0,.6) }
/* wordmark intro — one line, “Gloryn” then “Custom”: each unblurs, lifts & fades in */
.video-hero__mark .vh-word{ opacity:0; filter:blur(14px);
  transform-box:fill-box; transform-origin:center; transform:translateY(22px) scale(1.05);
  transition:opacity .7s var(--ease-out), transform .9s var(--ease-out), filter .8s var(--ease-out);
  transition-delay:var(--wd,0s) }
.video-hero__mark .vh-word.is-visible{ opacity:1; filter:blur(0); transform:translateY(0) scale(1) }

/* always-visible menu button over the homepage hero (before the navbar drops in) */
.floating-menu{ position:fixed; top:1.05rem; right:var(--gutter); z-index:95;
  opacity:0; pointer-events:none; transition:opacity .5s var(--ease);
  background:rgba(10,10,10,.4); backdrop-filter:blur(10px) }
.topbar.nav-hidden ~ .floating-menu{ opacity:1; pointer-events:auto }

/* ============================================================
   HERO — flat yellow, video ready (home) [legacy / unused]
   ============================================================ */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; justify-content:center; overflow:hidden;
  background:var(--yellow); color:var(--yellow-ink); border-radius:0 0 var(--radius-lg) var(--radius-lg) }
.hero-wordmark{ position:relative; z-index:3; width:100%; margin:0; padding-inline:clamp(.75rem,2.5vw,2.5rem); line-height:0 }
.hero-wordmark svg{ display:block; width:100%; height:auto; overflow:visible }
.hero-wordmark text{ font-family:var(--font-display); font-weight:400; font-size:190px; fill:var(--yellow-ink) }
.hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; display:block }
.hero::after{ /* subtle depth so flat yellow still feels crafted */
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.28), transparent 55%),
    radial-gradient(90% 70% at 50% 120%, rgba(0,0,0,.20), transparent 60%);
  mix-blend-mode:soft-light }
.hero-noise{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.12; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") }
.hero-inner{ position:relative; z-index:3; width:100%; padding-block:clamp(6rem,14vh,10rem) clamp(2.5rem,6vh,4rem) }
.hero-badge{ display:inline-flex; align-items:center; gap:.6rem; border:1px solid rgba(16,12,0,.28); border-radius:var(--radius-pill);
  padding:.5rem 1.1rem; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.2em; margin-bottom:1.6rem }
.hero-badge .dot{ width:6px; height:6px; border-radius:50%; background:var(--yellow-ink) }
.hero h1{ font-family:var(--font-display); font-weight:400; font-size:clamp(3rem,11vw,9rem); line-height:.92; letter-spacing:.01em }
.hero h1 em{ font-style:normal; position:relative }
.hero-sub{ margin-top:1.6rem; max-width:44ch; font-size:clamp(1rem,1.5vw,1.25rem); font-weight:400; color:rgba(16,12,0,.72) }
.hero-cta{ margin-top:2.2rem; display:flex; flex-wrap:wrap; gap:.9rem }
.hero .btn--gold{ background:var(--ink); color:var(--gold); box-shadow:0 10px 34px -10px rgba(0,0,0,.5) }
.hero .btn--ghost{ border-color:rgba(16,12,0,.35); color:var(--yellow-ink) }
.hero .btn--ghost:hover{ border-color:var(--yellow-ink); background:rgba(16,12,0,.06); color:var(--yellow-ink) }
.hero-trust{ margin-top:clamp(2.5rem,6vh,4rem); display:grid; grid-template-columns:1fr; gap:1rem;
  border-top:1px solid rgba(16,12,0,.18); padding-top:1.6rem }
.hero-trust .ht{ display:flex; align-items:center; gap:.7rem; font-size:.82rem; font-weight:500; letter-spacing:.02em }
.hero-trust .ht b{ font-weight:700 }
.hero-trust .ht .ic{ font-size:1.1rem }
.hero-scroll{ position:absolute; z-index:3; right:var(--gutter); bottom:2rem; display:flex; align-items:center; gap:.6rem;
  font-size:.68rem; text-transform:uppercase; letter-spacing:.24em; font-weight:600; writing-mode:vertical-rl }
.hero-placeholder-note{ position:absolute; z-index:3; left:var(--gutter); bottom:1.4rem; font-size:.62rem; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(16,12,0,.4); font-weight:600 }
@media(min-width:720px){ .hero-trust{ grid-template-columns:repeat(3,auto); gap:2.5rem; justify-content:start } }

/* generic page hero (interior pages) */
.page-hero{ position:relative; padding-block:clamp(8rem,18vh,12rem) clamp(3rem,6vw,5rem); overflow:hidden }
/* when a marquee already sits under the topbar, the hero doesn't need the big top gap */
.page-hero--flush{ padding-top:clamp(2.5rem,5vw,4rem) }
.page-hero .display-1{ font-size:clamp(2.6rem,7vw,6rem) }
.page-hero .lede{ margin-top:1.4rem }

/* ============================================================
   services list (home) — menu-style large type
   ============================================================ */
.svc-list{ display:flex; flex-direction:column; margin-top:clamp(2rem,4vw,3.2rem);
  border-top:1px solid var(--line-soft) }
.svc-item{ position:relative; display:flex; align-items:baseline; gap:1.2rem; width:100%;
  padding-block:clamp(.85rem,1.9vw,1.5rem); border-bottom:1px solid var(--line-soft);
  font-family:var(--font-display); font-weight:400; line-height:1.05; color:var(--faint);
  font-size:clamp(1.9rem,5.5vw,3.6rem); transition:color .55s var(--ease) }
.svc-item .idx{ flex:none; width:2.5rem; font-family:var(--font-body); font-size:.9rem; font-weight:500;
  letter-spacing:.1em; color:var(--gold) }
.svc-item .lab{ flex:1; transition:padding .55s var(--ease) }
.svc-item .arrow{ flex:none; color:var(--gold); font-size:1.4rem; opacity:0; transform:translateX(-.9rem);
  transition:opacity .55s var(--ease), transform .55s var(--ease) }
.svc-item:hover{ color:var(--cream) }
.svc-item:hover .lab{ padding-left:1rem }
.svc-item:hover .arrow{ opacity:1; transform:translateX(0) }
.svc-item--all{ color:var(--gold) }
.svc-item--all:hover{ color:var(--gold-bright) }

/* ============================================================
   before / after reveal
   ============================================================ */
.ba{ position:relative; width:100%; aspect-ratio:3/2; border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--line); box-shadow:0 40px 80px -30px rgba(0,0,0,.8); cursor:ew-resize; user-select:none; touch-action:none }
.ba img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none }
.ba-after{ clip-path:inset(0 0 0 var(--pos,50%)) }
.ba-before-wrap{ clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0) }
.ba-handle{ position:absolute; top:0; bottom:0; left:var(--pos,50%); width:2px; background:var(--gold); transform:translateX(-50%);
  box-shadow:0 0 18px 2px rgba(231,181,59,.7); z-index:3; pointer-events:none }
.ba-knob{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:52px; height:52px; border-radius:50%;
  background:rgba(10,10,10,.7); border:1.5px solid var(--gold); display:grid; place-items:center; color:var(--gold);
  backdrop-filter:blur(6px); font-size:1.1rem }
.ba-tag{ position:absolute; bottom:1rem; z-index:2; font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.18em;
  padding:.4rem .8rem; border-radius:var(--radius-pill); background:rgba(10,10,10,.55); backdrop-filter:blur(4px) }
.ba-tag.left{ left:1rem; color:var(--muted) } .ba-tag.right{ right:1rem; color:var(--gold) }

/* ============================================================
   gallery
   ============================================================ */
.gallery{ columns:2; column-gap:.9rem }
.gallery .g-item{ position:relative; break-inside:avoid; margin-bottom:.9rem; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line-soft) }
.gallery img{ width:100%; height:auto; transition:transform .7s var(--ease), filter .7s; filter:saturate(1.02) }
.gallery .g-item::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(5,5,5,.55), transparent 45%);
  opacity:0; transition:opacity .5s }
.gallery .g-item .g-cap{ position:absolute; left:1rem; bottom:.9rem; z-index:2; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); opacity:0; transform:translateY(8px); transition:opacity .5s, transform .5s }
.gallery .g-item:hover img{ transform:scale(1.05) }
.gallery .g-item:hover::after,.gallery .g-item:hover .g-cap{ opacity:1; transform:translateY(0) }
@media(min-width:700px){ .gallery{ columns:3 } }
@media(min-width:1040px){ .gallery{ columns:4 } }

/* ============================================================
   services orbit (services page) — rotating ring of cards
   hover / tap a card to bring it to the top and name it
   ============================================================ */
.orbit-sec{ padding-top:0 }
.orbit-stage{ position:relative; height:clamp(380px,66vw,660px);
  margin-block:clamp(-2.5rem,-4vw,-1rem) clamp(1.5rem,5vw,3rem);
  display:grid; place-items:center; perspective:1100px; cursor:default }
.orbit-stage .starfield{ position:absolute; inset:0; width:100%; height:100% }
/* soft gold aura in the middle of the ring */
.orbit-stage::before{ content:""; position:absolute; left:50%; top:50%; width:44%; height:44%;
  transform:translate(-50%,-50%); pointer-events:none;
  background:radial-gradient(circle, rgba(231,181,59,.16), transparent 70%) }
.orbit-tilt{ position:absolute; inset:0; transform-style:preserve-3d; will-change:transform }
.orbit{ position:absolute; inset:0; transform-style:preserve-3d; will-change:transform }
.gen-item{ position:absolute; top:50%; left:50%; transform-origin:center; transform-style:preserve-3d;
  transition:transform .55s var(--ease) }
.gen-img{ display:block; width:clamp(92px,11.5vw,138px); height:clamp(120px,15vw,176px); object-fit:cover;
  border-radius:22px; background:var(--surface);
  box-shadow:0 26px 55px -22px rgba(0,0,0,.9);
  transition:transform .55s var(--ease), box-shadow .5s var(--ease) }
.gen-item.is-focus .gen-img{ box-shadow:0 36px 72px -20px rgba(0,0,0,.95), 0 0 48px -6px rgba(231,181,59,.4) }
/* service name — clean text floating just above the focused card */
.gen-name{ position:absolute; left:50%; bottom:100%; pointer-events:none; white-space:nowrap;
  font-family:var(--font-display); font-weight:400; font-size:clamp(1.6rem,3vw,2.9rem); letter-spacing:.02em;
  color:var(--cream); text-shadow:0 2px 22px rgba(0,0,0,.75);
  opacity:0; transform:translate(-50%,12px) translateZ(80px);
  transition:opacity .4s var(--ease), transform .4s var(--ease) }
.gen-item.is-focus .gen-name{ opacity:1; transform:translate(-50%,-8px) translateZ(80px) }

/* services accordion — the homepage-style list under the orbit, expandable */
.svc-acc{ margin-top:clamp(1.5rem,4vw,2.5rem); border-top:1px solid var(--line-soft) }
.svc-acc-item{ border-bottom:1px solid var(--line-soft) }
.svc-acc-head{ display:flex; align-items:center; gap:1.2rem; width:100%; text-align:left;
  padding-block:clamp(.9rem,2vw,1.5rem); font-family:var(--font-display); font-weight:400; line-height:1.05;
  color:var(--faint); font-size:clamp(1.7rem,4.6vw,3rem); transition:color .5s var(--ease) }
.svc-acc-head .idx{ flex:none; width:2.5rem; font-family:var(--font-body); font-size:.9rem; font-weight:500;
  letter-spacing:.1em; color:var(--gold) }
.svc-acc-head .lab{ flex:1; transition:padding .5s var(--ease) }
.svc-acc-head:hover,.svc-acc-item.is-open .svc-acc-head{ color:var(--cream) }
.svc-acc-head:hover .lab{ padding-left:1rem }
/* + / − toggle icon */
.svc-acc-ico{ flex:none; position:relative; width:16px; height:16px }
.svc-acc-ico::before,.svc-acc-ico::after{ content:""; position:absolute; background:var(--gold);
  transition:transform .4s var(--ease), opacity .4s }
.svc-acc-ico::before{ top:50%; left:0; right:0; height:1.5px; transform:translateY(-50%) }
.svc-acc-ico::after{ left:50%; top:0; bottom:0; width:1.5px; transform:translateX(-50%) }
.svc-acc-item.is-open .svc-acc-ico::after{ transform:translateX(-50%) scaleY(0) }
/* panel: animate open with the grid 0fr→1fr technique (no JS height math) */
.svc-acc-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--ease) }
.svc-acc-item.is-open .svc-acc-panel{ grid-template-rows:1fr }
.svc-acc-inner{ overflow:hidden; min-height:0 }
.svc-acc-content{ padding:.1rem 0 clamp(1.2rem,2.5vw,1.8rem) calc(2.5rem + 1.2rem); max-width:60ch }
.svc-acc-content p{ color:var(--muted); font-size:clamp(.95rem,1.3vw,1.05rem); line-height:1.65 }
.svc-acc-meta{ margin-top:1.1rem; display:flex; flex-wrap:wrap; gap:.6rem }
.svc-acc-chip{ display:inline-flex; align-items:center; gap:.45rem; font-size:.7rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; padding:.5rem .9rem; border:1px solid var(--line-soft); color:var(--gold) }
.svc-acc-chip--muted{ color:var(--muted) }
@media(max-width:520px){ .svc-acc-content{ padding-left:0 } }

/* ============================================================
   feature / split band
   ============================================================ */
.split{ display:grid; grid-template-columns:1fr; gap:clamp(2rem,5vw,4rem); align-items:center }
@media(min-width:900px){ .split{ grid-template-columns:1.05fr 1fr } .split--rev .split-media{ order:-1 } }

/* warranty band */
.warranty{ position:relative; border-radius:var(--radius-lg); overflow:hidden; padding:clamp(2.5rem,6vw,4.5rem);
  background:linear-gradient(120deg, var(--surface-2), var(--surface)); border:1px solid var(--line) }
.warranty::before{ content:""; position:absolute; right:-10%; top:-30%; width:50%; height:160%;
  background:radial-gradient(circle, rgba(231,181,59,.16), transparent 65%) }
.warranty .big{ font-family:var(--font-display); font-size:clamp(3.5rem,10vw,7rem); line-height:.9; color:var(--gold) }

/* ============================================================
   stats
   ============================================================ */
.stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:2.5rem 1.5rem; margin-top:3rem }
.stat .n{ font-family:var(--font-display); font-size:clamp(3.4rem,8vw,6.2rem); line-height:1; color:var(--gold) }
.stat .l{ margin-top:.6rem; font-size:.8rem; letter-spacing:.06em; color:var(--muted) }
@media(min-width:760px){ .stats{ grid-template-columns:repeat(4,1fr) } }

/* ============================================================
   testimonials
   ============================================================ */
.rating-panel{ display:flex; flex-wrap:wrap; align-items:center; gap:1.5rem 3rem; padding:clamp(1.8rem,4vw,2.6rem);
  border-radius:var(--radius-lg); background:var(--surface); border:1px solid var(--line); margin-top:2.5rem }
.rating-panel .score{ font-family:var(--font-display); font-size:clamp(3rem,7vw,4.5rem); line-height:1; color:var(--gold) }
.stars{ display:inline-flex; gap:.15rem; color:var(--gold) }
.rp-meta{ font-size:.85rem; color:var(--muted) }
.tcards{ display:grid; grid-template-columns:1fr; gap:1.2rem; margin-top:2rem }
.tcard{ display:flex; flex-direction:column; gap:1.1rem; padding:1.6rem; border-radius:var(--radius);
  background:var(--surface); border:1px solid var(--line-soft); transition:transform .45s var(--ease), border-color .45s }
.tcard:hover{ transform:translateY(-5px); border-color:var(--line) }
.tcard .stars{ font-size:.9rem }
.tcard p{ font-size:1.02rem; line-height:1.65; color:var(--cream); font-weight:300 }
.tcard .who{ display:flex; align-items:center; gap:.85rem; margin-top:auto }
.tcard .av{ width:2.6rem; height:2.6rem; border-radius:50%; display:grid; place-items:center; font-weight:600;
  background:linear-gradient(120deg,var(--gold),var(--bronze)); color:var(--ink) }
.tcard .who .nm{ display:block; font-weight:500; font-size:.9rem } .tcard .who .rl{ display:block; font-size:.75rem; color:var(--faint) }
.tcard .g-badge{ font-size:.68rem; color:var(--faint); display:inline-flex; align-items:center; gap:.4rem }
@media(min-width:680px){ .tcards{ grid-template-columns:repeat(2,1fr) } }
@media(min-width:1000px){ .tcards{ grid-template-columns:repeat(3,1fr) } }

/* ============================================================
   forms (booking / contact)
   ============================================================ */
.contact-grid{ display:grid; grid-template-columns:1fr; gap:clamp(2rem,5vw,3.5rem) }
@media(min-width:920px){ .contact-grid{ grid-template-columns:1.1fr .9fr } }
.form-card{ padding:clamp(1.6rem,4vw,2.6rem); border-radius:var(--radius-lg); background:var(--surface); border:1px solid var(--line) }
.field{ display:flex; flex-direction:column; gap:.5rem; margin-bottom:1.1rem }
.field label{ font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.16em; color:var(--gold) }
.field input,.field select,.field textarea{ width:100%; padding:.85rem 1rem; border-radius:.8rem; background:var(--bg);
  border:1px solid var(--line-soft); color:var(--cream); font-family:inherit; font-size:.95rem; transition:border-color .3s, background .3s }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--gold); background:#0d0d0d }
.field textarea{ resize:vertical; min-height:7rem }
.field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23e7b53b' stroke-width='2'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center }
.field-row{ display:grid; grid-template-columns:1fr; gap:0 1rem }
@media(min-width:560px){ .field-row{ grid-template-columns:1fr 1fr } }
.form-note{ font-size:.75rem; color:var(--faint); margin-top:.4rem }
.form-status{ margin-top:1rem; font-size:.85rem; padding:.9rem 1.1rem; border-radius:.7rem; display:none }
.form-status.show{ display:block }
.form-status.ok{ background:rgba(231,181,59,.12); border:1px solid var(--line); color:var(--gold) }
.form-status.err{ background:rgba(220,80,60,.12); border:1px solid rgba(220,80,60,.4); color:#f0a090 }

.info-block{ display:flex; flex-direction:column; gap:1.6rem }
.info-item{ display:flex; gap:1rem; align-items:flex-start }
.info-item .ic{ flex:none; width:2.8rem; height:2.8rem; border-radius:.9rem; display:grid; place-items:center;
  background:var(--surface); border:1px solid var(--line); color:var(--gold); font-size:1.1rem }
.info-item .k{ font-size:.7rem; text-transform:uppercase; letter-spacing:.16em; color:var(--faint) }
.info-item .v{ font-size:1rem; color:var(--cream); margin-top:.2rem } .info-item .v a:hover{ color:var(--gold) }
.locations{ display:grid; grid-template-columns:1fr; gap:1.2rem; margin-top:1rem }
@media(min-width:620px){ .locations{ grid-template-columns:1fr 1fr } }
.loc-card{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--line-soft); background:var(--surface);
  transition:border-color .4s var(--ease), transform .4s var(--ease) }
.loc-card:hover{ border-color:var(--line); transform:translateY(-4px) }
.loc-map{ position:relative; height:150px; display:grid; place-items:center; overflow:hidden;
  background:
    radial-gradient(circle at 32% 42%, rgba(231,181,59,.16), transparent 58%),
    repeating-linear-gradient(0deg, rgba(246,241,231,.045) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(246,241,231,.045) 0 1px, transparent 1px 28px),
    #0d0d0c }
.loc-map .pin{ font-size:1.7rem; color:var(--gold); filter:drop-shadow(0 0 12px rgba(231,181,59,.7)) }
.loc-card .loc-body{ padding:1.1rem 1.3rem 1.3rem }
.loc-card .loc-body .city{ font-family:var(--font-display); font-size:1.25rem; color:var(--gold) }
.loc-card .loc-body .addr{ font-size:.85rem; color:var(--muted); margin-top:.35rem }
.loc-directions{ margin-top:1rem; display:inline-flex; align-items:center; gap:.5rem; font-size:.72rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.14em; color:var(--gold) }
.loc-directions .arrow{ transition:transform .35s var(--ease) }
.loc-card:hover .loc-directions .arrow{ transform:translateX(4px) }

/* ============================================================
   footer
   ============================================================ */
.footer{ position:relative; z-index:2; border-top:1px solid var(--line-soft); background:var(--bg-deep); overflow:hidden }
.footer .starfield{ opacity:.5 }
.footer-in{ position:relative; z-index:2; padding-block:clamp(3.5rem,8vw,6rem) 2.5rem }
.footer-cta{ display:flex; flex-direction:column; gap:2rem; padding-bottom:3rem; border-bottom:1px solid var(--line-soft) }
.footer-cta h2{ font-family:var(--font-display); font-size:clamp(2rem,5vw,3.6rem); font-weight:400; line-height:1.05; max-width:16ch }
.footer-cols{ display:grid; grid-template-columns:1fr 1fr; gap:2.5rem 1.5rem; padding-block:3rem }
.footer-brand{ grid-column:1/-1; display:flex; flex-direction:column; gap:1rem; max-width:28rem }
.footer-brand .brand img{ width:44px; height:44px }
.footer-brand p{ color:var(--muted); font-size:.9rem }
.footer-col h4{ font-size:.68rem; text-transform:uppercase; letter-spacing:.2em; color:var(--faint); margin-bottom:1.1rem }
.footer-col ul{ display:flex; flex-direction:column; gap:.7rem; font-size:.9rem; color:var(--muted) }
.footer-col a:hover{ color:var(--gold) }
.footer-legal{ display:flex; flex-direction:column; gap:.8rem; align-items:flex-start; justify-content:space-between;
  border-top:1px solid var(--line-soft); padding-top:2rem; font-size:.75rem; color:var(--faint) }
.footer-legal a{ color:var(--gold); transition:color .3s } .footer-legal a:hover{ color:var(--gold-bright) }
.footer-watermark{ position:absolute; z-index:1; inset-inline:0; bottom:-1vw; text-align:center; pointer-events:none; user-select:none;
  font-family:var(--font-display); font-size:clamp(3rem,12vw,9rem); line-height:.8; color:rgba(231,181,59,.035); white-space:nowrap }
@media(min-width:760px){
  .footer-cols{ grid-template-columns:2fr 1fr 1fr 1fr }
  .footer-brand{ grid-column:auto }
  .footer-legal{ flex-direction:row; align-items:center }
}

/* ============================================================
   UNIQUE MOTION FEATURES (adapted from awwwards templates)
   ============================================================ */

/* ---- contextual cursor label (fine pointers) ---- */
@media (hover:hover) and (pointer:fine){
  .cursor-label{ display:flex; position:fixed; top:0; left:0; z-index:9999; align-items:center; justify-content:center;
    padding:0; border-radius:50%; width:0; height:0; background:var(--gold); color:var(--ink);
    font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; white-space:nowrap; overflow:hidden;
    transform:translate(-50%,-50%); pointer-events:none; opacity:0;
    transition:width .35s var(--ease), height .35s var(--ease), opacity .3s }
  html.cursor-label-on .cursor-label{ width:74px; height:74px; opacity:1 }
  html.cursor-label-on .cursor-ring, html.cursor-label-on .cursor-dot{ opacity:0 }
}

/* ---- infinite marquee ticker ---- */
.marquee{ position:relative; z-index:2; overflow:hidden; display:flex; user-select:none;
  border-block:1px solid var(--line-soft); padding-block:clamp(1.1rem,2.2vw,1.9rem);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent) }
.marquee-track{ display:flex; flex-shrink:0; align-items:center; gap:clamp(1.5rem,3vw,2.6rem); padding-right:clamp(1.5rem,3vw,2.6rem);
  animation:marquee-x 52s linear infinite; will-change:transform }
.marquee:hover .marquee-track{ animation-play-state:paused }
.marquee--rev .marquee-track{ animation-direction:reverse }
.marquee-item{ font-family:var(--font-display); font-size:clamp(1.6rem,4vw,3.1rem); line-height:1; color:var(--cream); white-space:nowrap }
.marquee-item.ghost{ color:transparent; -webkit-text-stroke:1px rgba(231,181,59,.5) }
/* marquee pinned directly beneath the fixed topbar (promo bar) */
.marquee--top{ margin-top:var(--topbar-h, 7rem); border-top:0 }
.marquee-star{ color:var(--gold); font-size:clamp(.9rem,1.8vw,1.4rem); filter:drop-shadow(0 0 6px rgba(231,181,59,.6)) }
@keyframes marquee-x{ to{ transform:translateX(-50%) } }

/* ---- scroll-velocity skew target ---- */
[data-skew]{ will-change:transform }

/* ---- horizontal-scroll pinned gallery ---- */
.hscroll{ position:relative }
.hscroll-sticky{ position:sticky; top:0; height:100svh; display:flex; align-items:center; overflow:hidden }
.hscroll-head{ position:absolute; top:calc(var(--topbar-h, 6.5rem) + .85rem); left:var(--gutter); right:var(--gutter); z-index:3;
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; pointer-events:none }
.hscroll-head .cnt{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--faint);
  font-variant-numeric:tabular-nums }
.hscroll-track{ display:flex; align-items:center; gap:clamp(1rem,2.4vw,2rem); padding-inline:var(--gutter); will-change:transform }
.hcard{ position:relative; flex:none; width:clamp(17rem,34vw,26rem); aspect-ratio:4/5; border-radius:var(--radius);
  overflow:hidden; border:1px solid var(--line-soft) }
.hcard img{ width:100%; height:100%; object-fit:cover; transition:transform 1.3s var(--ease) }
.hcard:hover img{ transform:scale(1.08) }
.hcard .cap{ position:absolute; left:1.1rem; bottom:1rem; z-index:2; font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold) }
.hcard::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(5,5,5,.6), transparent 45%) }
.hcard .idx{ position:absolute; top:1rem; right:1.1rem; z-index:2; font-family:var(--font-display); color:rgba(246,241,231,.55); font-size:.9rem }
.hscroll-progress{ position:absolute; left:var(--gutter); right:var(--gutter); bottom:clamp(2rem,5vh,3.5rem); z-index:3; height:1px; background:var(--line-soft) }
.hscroll-progress i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--gold-deep),var(--gold-bright)) }
/* fallback: on no-JS or reduced motion, show as horizontal overflow scroll */
.hscroll.is-static .hscroll-sticky{ position:relative; height:auto; padding-block:2rem }
.hscroll.is-static .hscroll-track{ overflow-x:auto; scroll-snap-type:x mandatory }
.hscroll.is-static .hcard{ scroll-snap-align:center }

/* ============================================================
   instagram strip (home) — latest posts via Behold feed
   ============================================================ */
.insta__tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:.9rem }
.insta__tile{ position:relative; aspect-ratio:1; overflow:hidden; background:var(--surface); border:1px solid var(--line-soft) }
.insta__tile--live{ display:block; color:var(--cream) }
.insta__img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .9s var(--ease) }
.insta__tile--live:hover .insta__img{ transform:scale(1.06) }
.insta__overlay{ position:absolute; inset:0; padding:1rem; display:flex; flex-direction:column; justify-content:flex-end;
  background:linear-gradient(to top, rgba(5,5,5,.82), transparent 62%); opacity:0; transition:opacity .4s var(--ease) }
.insta__tile--live:hover .insta__overlay{ opacity:1 }
.insta__stats{ display:flex; gap:1rem; font-size:.8rem; font-weight:600; margin:0 0 .35rem; color:var(--gold) }
.insta__caption{ font-size:.78rem; line-height:1.35; margin:0; color:var(--cream);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.insta__handle{ display:inline-flex; align-items:center; gap:.55rem; margin-top:1.6rem;
  font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--gold);
  transition:color .3s }
.insta__handle:hover{ color:var(--gold-bright) }
.insta__handle .arrow{ transition:transform .35s var(--ease) }
.insta__handle:hover .arrow{ transform:translateX(5px) }
@media(min-width:760px) and (max-width:1040px){ .insta__tiles{ grid-template-columns:repeat(4,1fr) } }
@media(max-width:600px){ .insta__tiles{ grid-template-columns:repeat(2,1fr) } }

/* ============================================================
   misc reveal-on-scroll of section intros
   ============================================================ */
.intro{ display:flex; flex-direction:column; gap:1.2rem; max-width:52rem }
.intro .display-2{ max-width:20ch }
.center{ text-align:center; align-items:center; margin-inline:auto }
.mt-lg{ margin-top:clamp(2.5rem,6vw,4rem) }
.divider{ height:1px; background:var(--line-soft); border:0; margin-block:clamp(3rem,7vw,5rem) }
/* hide an element on mobile (phones), keep on larger screens */
@media (max-width:767px){ .hide-on-mobile{ display:none !important } }

/* ============================================================
   legal pages — privacy policy & terms (prose)
   ============================================================ */
.legal{ max-width:58rem }
.legal__meta{ display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; align-items:center;
  margin-top:1.6rem; font-size:.8rem; color:var(--faint) }
.legal__meta strong{ color:var(--muted); font-weight:500 }

.legal__toc{ margin-top:clamp(2.6rem,5vw,3.6rem); padding:clamp(1.4rem,3vw,1.9rem) clamp(1.4rem,3vw,2rem);
  border:1px solid var(--line); background:rgba(231,181,59,.02) }
.legal__toc h2{ font-size:.66rem; text-transform:uppercase; letter-spacing:.22em; color:var(--faint); margin-bottom:1.1rem }
.legal__toc ol{ list-style:none; counter-reset:toc; display:grid; gap:.7rem; font-size:.92rem;
  grid-template-columns:1fr }
.legal__toc li{ counter-increment:toc }
.legal__toc a{ color:var(--muted); display:inline-flex; gap:.85rem; transition:color .3s var(--ease) }
.legal__toc a::before{ content:counter(toc,decimal-leading-zero); color:var(--gold);
  font-variant-numeric:tabular-nums; font-size:.78rem }
.legal__toc a:hover{ color:var(--cream) }
@media(min-width:680px){ .legal__toc ol{ grid-template-columns:1fr 1fr; gap:.7rem 2rem } }

.legal__body{ margin-top:clamp(3rem,6vw,4.5rem); display:grid; gap:clamp(2.6rem,5vw,3.8rem) }
.legal-block{ scroll-margin-top:7rem }
.legal-block h2{ font-family:var(--font-display); font-weight:400; color:var(--cream);
  font-size:clamp(1.55rem,3vw,2.3rem); line-height:1.08; margin-bottom:1.2rem;
  display:flex; align-items:baseline; gap:1rem }
.legal-block h2 .idx{ font-family:var(--font-body); font-size:.72rem; font-weight:600; letter-spacing:.15em;
  color:var(--gold); transform:translateY(-.4em) }
.legal-block h3{ color:var(--cream); font-size:1.02rem; font-weight:600; margin:1.7rem 0 .6rem }
.legal-block p{ color:var(--muted); line-height:1.85; margin-bottom:1rem; max-width:66ch }
.legal-block p:last-child{ margin-bottom:0 }
.legal-block a{ color:var(--gold) } .legal-block a:hover{ color:var(--gold-bright) }
.legal-block strong{ color:var(--cream); font-weight:600 }
.legal-block ul{ list-style:none; display:grid; gap:.7rem; margin:.5rem 0 1.2rem; max-width:66ch }
.legal-block ul li{ position:relative; padding-left:1.5rem; color:var(--muted); line-height:1.75 }
.legal-block ul li::before{ content:"—"; position:absolute; left:0; color:var(--gold-deep) }

.legal__foot{ margin-top:clamp(3rem,6vw,4.5rem); padding-top:2rem; border-top:1px solid var(--line-soft);
  font-size:.82rem; color:var(--faint); max-width:66ch }
.legal__foot a{ color:var(--gold) } .legal__foot a:hover{ color:var(--gold-bright) }

.footer-legal__links a{ white-space:nowrap }

/* ============================================================
   sharp edges — unround every component
   (only the circular logo emblem and the custom cursor stay round)
   ============================================================ */
:focus-visible{ border-radius:0 }
.skip,
.field input, .field select, .field textarea,
.form-status,
.info-item .ic,
.eyebrow .dot, .hero-badge .dot,
.ba-knob,
.srv-media .idx,
.tcard .av{ border-radius:0 }

/* ============================================================
   theme toggle button (header, next to Menu)
   ============================================================ */
.theme-btn{ display:inline-grid; place-items:center; width:2.55rem; height:2.55rem; flex:none;
  border:1px solid var(--line); color:var(--cream);
  transition:border-color .3s, color .3s, background .3s, transform .3s var(--ease) }
.theme-btn:hover{ border-color:var(--gold); color:var(--gold) }
.theme-btn:active{ transform:scale(.94) }
.theme-btn svg{ width:17px; height:17px; display:none }
.theme-btn .theme-ic--sun{ display:block }                        /* dark mode → offer sun */
html[data-theme="light"] .theme-btn .theme-ic--sun{ display:none }
html[data-theme="light"] .theme-btn .theme-ic--moon{ display:block }
/* keep it legible while sitting over the dark video hero (before scroll) */
.floating-menu .theme-btn{ color:var(--cream) }

/* ============================================================
   LIGHT MODE — “cool gallery white”
   flips the design tokens; the video hero stays cinematic (dark)
   ============================================================ */
html[data-theme="light"]{
  --bg:#f6f6f4;
  --bg-deep:#eeeeeb;
  --surface:#ffffff;
  --surface-2:#f1f1ee;
  --ink:#17150f;              /* dark text that sits on gold buttons */
  --gold:#9a6a15;            /* deep antique gold — readable on light */
  --gold-bright:#7d5410;     /* hover → richer/darker on light */
  --gold-deep:#6a4711;
  --bronze:#5f3f14;
  --cream:#1b1b1e;           /* primary text → charcoal */
  --muted:rgba(27,27,30,.62);
  --faint:rgba(27,27,30,.44);
  --line:rgba(27,27,30,.14);
  --line-soft:rgba(27,27,30,.08);
  color-scheme:light;
}
html[data-theme="light"] body{ color:var(--cream) }

/* components that hardcode dark values */
html[data-theme="light"] .promo{ background:#f0efe9 }
html[data-theme="light"] .header.scrolled{ background:rgba(255,255,255,.72) }
html[data-theme="light"] .floating-menu{ background:rgba(255,255,255,.6) }
html[data-theme="light"] .field input:focus,
html[data-theme="light"] .field select:focus,
html[data-theme="light"] .field textarea:focus{ background:#ffffff }
html[data-theme="light"] .loc-map{ background:
  radial-gradient(circle at 32% 42%, rgba(154,106,21,.14), transparent 58%),
  repeating-linear-gradient(0deg, rgba(27,27,30,.05) 0 1px, transparent 1px 28px),
  repeating-linear-gradient(90deg, rgba(27,27,30,.05) 0 1px, transparent 1px 28px),
  #ececea }

/* keep the video hero dark & cinematic even in light mode */
html[data-theme="light"] .video-hero__mark text{ fill:#f6f1e7 }
html[data-theme="light"] .video-hero .hero-scroll{ color:#f6f1e7 }

/* starfields stay visible in light mode — the stars recolor to near-black in site.js */

/* atmosphere + grain retuned for a light canvas */
html[data-theme="light"] .grain{ opacity:.02; mix-blend-mode:multiply }
html[data-theme="light"] .atmosphere::before{ background:
  radial-gradient(120% 80% at 50% -10%, rgba(154,106,21,.05), transparent 55%),
  radial-gradient(90% 60% at 85% 110%, rgba(154,106,21,.045), transparent 60%) }
html[data-theme="light"] .footer-watermark{ color:rgba(154,106,21,.06) }