/* JV Group — home page styles */
@font-face{font-family:"Avenir Next";src:url(../fonts/AvenirNext-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Avenir Next";src:url(../fonts/AvenirNext-Italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Avenir Next";src:url(../fonts/AvenirNext-Medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Avenir Next";src:url(../fonts/AvenirNext-Demi.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Marcellus";src:url(../fonts/Marcellus-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Myriad Pro";src:url(../fonts/MyriadPro-Regular.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  color-scheme: dark;
  --navy:#13273f;
  --navy-deep:#0e1f33;
  --card:rgba(255,255,255,.097);
  --gold:#d6b374;
  --gold-line:#d2a94c;
  --white:#ffffff;
  --gold-tex:url(../images/gold-texture.jpg);
  --sans:"Avenir Next","Avenir","Segoe UI","Helvetica Neue",Arial,sans-serif;
  --serif:"Marcellus","Cormorant Garamond",Georgia,"Times New Roman",serif;
  --h2:clamp(32px, 2.4vw + 9px, 55px);
  --lead:clamp(17px, .45vw + 13.4px, 20px);
}
:root[data-theme="light"],:root[data-theme="dark"]{--navy:#13273f}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--navy:#13273f}}

*,*::before,*::after{box-sizing:border-box}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 121px);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--navy);color:var(--white);font-family:var(--sans);font-size:var(--lead);line-height:1.2;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0;font-weight:400}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{max-width:1457px;margin:0 auto;padding:0 clamp(20px,4vw,40px);box-sizing:content-box}

/* Type */
.eyebrow{font-family:var(--sans);font-weight:500;font-size:18px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);line-height:1.2}
.h2{font-family:var(--serif);font-size:var(--h2);line-height:1.2;text-transform:uppercase;color:var(--white)}
.gold-text{color:var(--gold)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .gold-text{background:var(--gold-tex) center/cover;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
}
.lead{font-size:var(--lead);line-height:1.2}
.sec-head{text-align:center}
.sec-head .eyebrow{margin-bottom:21px}
.sec-head .lead{margin:15px auto 0}
@media (max-width:1500px){br.d{display:none}}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:18px;height:46px;padding:0 26px;border-radius:7px;font-family:var(--sans);font-weight:500;font-size:18px;letter-spacing:.057em;text-transform:uppercase;white-space:nowrap;transition:filter .2s ease, background-color .2s ease}
.btn-gold{background:var(--gold-tex) center/cover;color:var(--navy)}
.btn-line{border:1px solid var(--gold);color:var(--gold)}
.center{text-align:center}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:var(--navy);height:121px}
.site-header::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--navy);z-index:10}
.site-header .inner{position:relative;height:100%;display:flex;align-items:center;justify-content:center}
.logo img{width:190px;height:auto}
.menu-btn{position:absolute;right:74px;top:37px;width:50px;height:50px;border-radius:50%}
.menu-btn img{width:50px;height:50px}

/* Menu overlay */
.nav-panel{position:fixed;inset:0;z-index:60;background:rgba(14,31,51,.98);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(12px,2.2vh,22px);opacity:0;visibility:hidden;transition:opacity .3s ease, visibility .3s;padding:env(safe-area-inset-top,0px) 24px env(safe-area-inset-bottom,0px)}
.nav-panel.open{opacity:1;visibility:visible}
.nav-panel a{font-family:var(--serif);font-size:clamp(24px,3.2vw,40px);text-transform:uppercase;color:var(--white);transition:color .2s}
.nav-panel a:hover{color:var(--gold)}
.nav-close{position:absolute;right:74px;top:calc(37px + env(safe-area-inset-top,0px));width:50px;height:50px;border:2px solid #fff;border-radius:50%;display:grid;place-items:center}
.nav-close::before,.nav-close::after{content:"";position:absolute;width:22px;height:2px;background:#fff;transform:rotate(45deg)}
.nav-close::after{transform:rotate(-45deg)}

/* Hero */
.hero{position:relative;height:1080px;max-height:calc(56.25vw);min-height:420px;background:#0b1a2e}
.play{position:absolute;left:50%;top:50%;width:318px;height:318px;margin:-159px 0 0 -159px;border-radius:50%;background:rgba(255,255,255,.12);display:grid;place-items:center;transform:scale(var(--ps,1))}
.play::before{content:"";position:absolute;inset:24px;border-radius:50%;border:3px solid rgba(255,255,255,.62)}
.play svg{width:96px;height:110px;margin-left:24px}

/* About */
.about{padding:225px 0 0}
.about .grid{display:grid;grid-template-columns:678px 1fr;column-gap:76px;align-items:start}
.about-visual{width:105.46%;max-width:none;margin:10px 0 0 -4.72%}
.about h2{margin-top:21px}
.about .tagline{font-style:italic;font-size:20px;color:var(--gold);margin-top:11px}
.about .copy{margin-top:30px;padding-left:4px;margin-right:-24px}
.about .copy p+p{margin-top:26px}
.about .btn{margin:42px 0 0 4px;width:220px}
.stats{display:flex;margin:57px 0 0 17px}
.stat{position:relative;padding:0 21px;text-align:center}
.stat+.stat::before{content:"";position:absolute;left:-1px;top:13px;bottom:0;width:2px;background:var(--gold)}
.stat .n{font-family:var(--serif);font-size:49.8px;line-height:1.2}
.stat .l{font-family:var(--serif);font-size:22.4px;line-height:1.2;margin-top:4px;white-space:nowrap}

/* Why */
.why{padding-top:232px;position:relative}
.why .wrap{position:relative}
.why .intro{position:relative;z-index:2}
.why h2{margin-top:21px}
.why .intro p{margin-top:22px;max-width:545px;line-height:1.2}
.check-art{position:absolute;right:-56px;top:-300px;width:871px;z-index:3;pointer-events:none}
.cards4{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:40px;margin-top:94px}
.icard{background:var(--card);border:1px solid var(--gold-line);border-radius:19px;min-height:378px;padding:35px 22px 30px 30px}
.icard .ic{width:83px;height:83px}
.icard h3{font-family:var(--serif);font-size:22.4px;line-height:1.65;margin-top:22px}
.icard p{font-size:16px;line-height:28px;margin-top:7px}

/* Two worlds */
.two{padding-top:165px}
.worlds{display:flex;justify-content:center;align-items:center;gap:0;margin-top:106px}
.world{width:635px;aspect-ratio:1;border-radius:50%;background:var(--card);border:1px solid var(--gold);display:flex;flex-direction:column;align-items:center;text-align:center;padding:98px 40px 0;flex:none}
.pill{display:inline-flex;align-items:center;justify-content:center;height:37px;padding:0 30px;border-radius:19px;border:1px solid var(--gold-line);font-weight:500;font-size:18px;letter-spacing:.06em;color:var(--gold);text-transform:uppercase}
.pill.filled{background:var(--navy)}
.world h3{font-family:var(--serif);font-size:55px;line-height:1.2;margin-top:13px}
.world .sub{font-style:italic;font-size:20px;color:var(--gold);margin-top:15px;line-height:1.2}
.world ul{list-style:none;margin:51px 0 0;padding:0;width:394px;max-width:100%}
.world li{font-size:18px;line-height:1.2;padding:7px 0 13px}
.world li+li{border-top:.5px solid rgba(255,255,255,.9)}
.world li:first-child{padding-top:0}
.world .btn{margin-top:18px;padding:0 33px}
.divider{width:114px;align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none}
.divider i{width:1px;height:160px;background:var(--gold)}
.divider b{width:76px;height:76px;border-radius:50%;border:1px solid var(--gold);margin:33px 0;position:relative}
.divider b::before,.divider b::after{content:"";position:absolute;left:50%;top:50%;width:26px;height:1px;background:var(--gold);transform:translate(-50%,-50%)}
.divider b::after{transform:translate(-50%,-50%) rotate(90deg)}

/* Ticker */
.ticker{margin-top:158px;height:65px;background:var(--gold) var(--gold-tex) center/cover;overflow:hidden;display:flex;align-items:center}
.ticker .track{display:flex;flex:none;white-space:nowrap;animation:tick 60s linear infinite}
.ticker span{font-size:18px;letter-spacing:.03em;color:var(--navy);text-transform:uppercase;display:inline-flex;align-items:center}
.ticker span::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--navy);margin:0 37px}
@keyframes tick{to{transform:translateX(-50%)}}

/* Signature */
.signature{position:relative;padding:168px 0 120px;background:var(--navy);isolation:isolate}
.signature::before{content:"";position:absolute;left:0;right:0;top:105px;bottom:0;background:url(../images/signature-silk-background.jpg) center/100% 100% no-repeat;z-index:-2}
.signature::after{content:"";position:absolute;left:0;right:0;top:105px;bottom:0;background:linear-gradient(var(--navy),rgba(19,39,63,0) 240px),rgba(6,16,32,.28);z-index:-1}

.pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 20px;margin-top:124px}
.pcard{position:relative;border-radius:31px;overflow:hidden;aspect-ratio:469/631;background:var(--navy)}
.pcard>img{width:100%;height:100%;object-fit:cover}
.pcard.feat{box-shadow:inset 0 0 0 1px var(--gold-line)}
.pcard.feat::after{content:"";position:absolute;inset:0;border:1px solid var(--gold-line);border-radius:31px;pointer-events:none}
.pcard .cap{position:absolute;left:38px;right:30px;bottom:44px}
.pcard .cap h3{font-family:var(--serif);font-size:22.4px;line-height:1.2}
.pcard .cap p{font-size:16px;margin-top:8px}
.signature .btn{margin-top:82px;padding:0 33px}

/* Process */
.process{padding-top:96px}
.stages{position:relative;display:grid;grid-template-columns:repeat(4,1fr);max-width:1560px;margin:99px auto 0}
.stages::before{content:"";position:absolute;left:calc(50% - 731px);right:calc(50% - 729px);top:113px;height:1px;background:var(--gold-line)}
.stage{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;padding:0 20px}
.stage .k{text-transform:uppercase;font-weight:500;font-size:18px;letter-spacing:.06em;color:var(--gold)}
.stage .num{font-family:var(--serif);font-size:50px;line-height:1.2;margin-top:10px}
.stage .dot{width:21px;height:21px;border-radius:50%;background:var(--gold);margin-top:11px}
.stage .sic{width:79px;height:79px;border-radius:50%;margin-top:26px}
.stage h3{font-family:var(--serif);font-size:25px;line-height:1.2;color:var(--gold);margin-top:9px}
.stage p{font-size:16px;line-height:28px;margin-top:12px;max-width:290px}
.stage .tag{margin-top:15px;width:268px;max-width:100%;border-top:.5px solid var(--gold-line);padding-top:13px;font-size:16px;color:var(--gold)}

/* Partnership */
.partner{padding-top:165px}
.pmodel{display:grid;grid-template-columns:1fr 85px 1fr 85px 1fr;margin-top:126px;align-items:stretch}
.mcard{background:var(--card);border:1px solid var(--gold-line);border-radius:19px;min-height:318px;padding:40px 16px 30px;text-align:center;display:flex;flex-direction:column;align-items:center}
.mcard .ic{width:83px;height:83px}
.mcard h3{font-family:var(--serif);font-size:22.4px;line-height:1.2;margin-top:24px}
.mcard p{font-size:16px;line-height:28px;margin-top:16px;max-width:400px}
.chev{display:flex;align-items:center;justify-content:center}
.chev img{width:52px;opacity:.38}
.partner .btn{margin-top:77px;padding:0 33px}

/* Collections */
.collections{padding-top:143px}
.collections .pcards{margin-top:95px}
.collections .cap{bottom:51px}
.collections .cap .k{font-weight:500;font-size:16px;letter-spacing:.06em;color:var(--gold);text-transform:uppercase}
.collections .cap h3{margin-top:12px}
.pbtn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 15px;margin-top:21px;border-radius:16px;font-weight:500;font-size:12.6px;letter-spacing:.051em;text-transform:uppercase;border:1px solid var(--gold-line);color:var(--gold);background:rgba(19,39,63,.85);transition:filter .2s}
.pbtn svg{width:13px;height:8px}
.pbtn.solid{background:var(--gold-tex) center/cover;color:var(--navy);border-color:transparent}

/* Spotlight */
.spotlight{padding-top:148px;padding-bottom:117px}
.spot{display:grid;grid-template-columns:710px 1fr;column-gap:68px;margin-top:41px;align-items:start}
.spot .info{padding-top:70px}
.spot .info h3{font-family:var(--serif);font-size:40px;line-height:1.2;margin-top:8px}
.spot .info .desc{font-size:16px;line-height:25px;margin-top:16px;max-width:430px}
.specs{margin-top:57px;border-top:1px solid var(--gold-line)}
.specs div{display:grid;grid-template-columns:572px 1fr;align-items:center;height:73px;border-bottom:1px solid var(--gold-line);font-size:16px}
.specs dd{margin:0;font-weight:600;white-space:nowrap}
.specs dt{margin:0}
.finishes{display:flex;align-items:center;gap:20px;margin-top:38px}
.finishes .eyebrow{margin-right:0}
.swatches{display:flex;gap:20px;align-items:center}
.sw{width:30px;height:30px;border-radius:50%;position:relative}
.sw[aria-pressed="true"]::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid var(--gold-line)}
.spot-foot{display:flex;align-items:center;justify-content:space-between;margin-top:34px;max-width:711px}
.spot-foot .btn{height:46px;padding:0 16px}
.pager{display:flex;align-items:center;gap:34px}
.arrow{width:45px;height:45px;border-radius:50%;border:.5px solid var(--gold-line);background:var(--navy);display:grid;place-items:center}
.arrow svg{width:8px;height:16px}
.count{font-family:var(--serif);font-size:37px;line-height:1;white-space:nowrap}
.count i{font-style:normal;color:var(--gold);margin:0 8px}
.spot-visual{width:685px;max-width:100%}

/* Quote band */
.quote{height:342px;background:var(--gold) var(--gold-tex) center/cover;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:41px;text-align:center;color:var(--navy)}
.quote .q{width:46px;height:40px}
.quote blockquote{margin:-3px 0 0;font-family:var(--serif);font-size:60.8px;line-height:74px}
.quote .by{display:flex;align-items:center;gap:20px;margin-top:7px;font-family:"Myriad Pro",var(--sans);font-size:16.6px}
.quote .by::before,.quote .by::after{content:"";width:136px;height:3px;background:var(--navy)}

/* Testimonials */
.testi{padding-top:108px}
.tcards{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:91px}
.tcard{position:relative;background:var(--card);border:1px solid var(--gold-line);border-radius:21px;min-height:329px;padding:40px 44px 34px 47px;display:flex;flex-direction:column}
.tcard .stars{width:132px;height:21px}
.tcard .tq{position:absolute;right:43px;top:28px;width:48px}
.tcard blockquote{margin:30px 0 0;font-size:15.5px;line-height:29px;max-width:360px}
.tcard .who{display:flex;align-items:center;gap:20px;margin-top:auto;padding-top:24px}
.tcard .who img{width:57px;height:57px}
.tcard .who b{display:block;font-family:var(--serif);font-weight:400;font-size:23px;color:var(--gold);line-height:1.1}
.tcard .who span{font-size:16px}

/* Credentials */
.creds{padding-top:132px}
.badges{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:54px}
.badge{position:relative;aspect-ratio:1;max-width:233px;width:100%;justify-self:center;text-align:center}
.badge img{position:absolute;inset:0;width:100%;height:100%}
.badge .t{position:absolute;left:0;right:0;top:53.2%;}
.badge b{display:block;font-family:var(--serif);font-weight:400;font-size:22.4px;color:var(--gold);line-height:1.2}
.badge span{display:block;font-size:13.5px;text-transform:uppercase;margin-top:1px}
.creds .btn{margin-top:69px;padding:0 33px}

/* CTA */
.cta{padding:133px 0 0}
.cta .h2{margin-top:21px}
.cta .lead{margin:13px auto 0}
.cta-btns{display:flex;justify-content:center;gap:60px;margin-top:61px;flex-wrap:wrap}
.cta-btns .btn{height:57px;width:441px;font-size:22.3px;letter-spacing:.054em;justify-content:flex-start;padding:0 0 0 47px;border-radius:9px}
.cta-btns .btn img{flex:none}
.cta-btns .btn-gold{padding-left:21px}

/* Footer */
.site-footer{margin-top:241px;font-family:Mulish,var(--sans);color:#fff}
.site-footer .wrap{max-width:1440px}
.fgrid{display:grid;grid-template-columns:367px 366px 367px 1fr}
.fbrand img.flogo{width:120px}
.fbrand p{font-size:15.5px;line-height:28px;margin-top:22px;max-width:290px}
.social{display:flex;gap:14px;margin-top:20px}
.social a{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.35);display:grid;place-items:center;transition:border-color .2s}
.social svg{width:16px;height:16px;fill:#fff}
.fcol h4{margin:6px 0 0;font-size:13px;font-weight:800;letter-spacing:.16em;color:#c99a3e;text-transform:uppercase}
.fcol ul{list-style:none;margin:18px 0 0;padding:0 0 0 8px}
.fcol li{font-size:15.5px;line-height:20px;margin-bottom:20px}
.fcol li a:hover{color:var(--gold)}
.fcontact li{display:flex;gap:16px;line-height:25.5px;margin-bottom:14px}
.fcontact svg{flex:none;width:14px;height:16px;fill:#c99a3e;margin-top:4px}
.fbottom{margin-top:62px;border-top:1px solid rgba(255,255,255,.22);padding:33px 0 40px;text-align:center;font-size:13.5px}
.fbottom em{font-style:normal;color:#c99a3e}

/* Section scrolling + nav highlight */
html.js-smooth{scroll-behavior:auto} /* JS animates scrolling; CSS smooth stays as the no-JS fallback */
section.section:focus{outline:none} /* sections receive focus after a jump, for screen readers */
.nav-panel{justify-content:safe center;overflow-y:auto}
.nav-panel a{position:relative}
.nav-panel a[aria-current]{color:var(--gold)}
.nav-panel a[aria-current]::after{content:"";position:absolute;left:50%;bottom:-6px;width:28px;height:1px;background:var(--gold);transform:translateX(-50%)}

/* Scroll to top / bottom */
.scroll-nav{position:fixed;right:clamp(16px,3.85vw,74px);bottom:calc(clamp(16px,2vw,32px) + env(safe-area-inset-bottom,0px));z-index:40;display:flex;flex-direction:column;gap:12px}
.scroll-btn{width:50px;height:50px;border-radius:50%;background:rgba(19,39,63,.92);border:1px solid var(--gold-line);display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.35);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:opacity .25s ease,visibility .25s,transform .25s ease,background-color .2s}
.scroll-btn svg{width:18px;height:18px}
.scroll-btn[hidden]{display:grid;opacity:0;visibility:hidden;transform:translateY(8px);pointer-events:none}
@media (max-width:700px){.scroll-nav{gap:10px}.scroll-btn{width:44px;height:44px}.fbottom{padding-bottom:84px}}

/* ---------- Responsive ---------- */
@media (max-width:1560px){
  .stages::before{left:20px;right:20px}
}
@media (max-width:1500px){
  .check-art{right:0;width:min(871px,58%)}
  .about .copy{margin-right:0}
  .about .grid{grid-template-columns:minmax(0,47%) 1fr;column-gap:5%}
  .world{width:min(635px,44vw)}
  .world{padding-top:clamp(48px,6.8vw,98px)}
  .world h3{font-size:clamp(38px,3.6vw,55px)}
  .spot{grid-template-columns:minmax(0,1fr) minmax(0,46%);column-gap:5%}
  .specs div{grid-template-columns:1fr auto}
  .spot-foot{max-width:none}
  .fgrid{grid-template-columns:repeat(4,1fr);gap:30px}
}
@media (max-width:1280px){
  .cards4{grid-template-columns:repeat(2,1fr)}
  .icard{min-height:0}
  .check-art{top:-200px;width:min(700px,60%)}
  .worlds{flex-direction:column}
  .world{width:min(635px,100%)}
  .divider{flex-direction:row;width:auto;height:114px}
  .divider i{height:1px;width:160px}
  .divider b{margin:0 33px}
  .about .grid{grid-template-columns:1fr;row-gap:60px}
  .about-visual{width:min(715px,100%);margin:0 auto}
  .about .text{max-width:760px;margin:0 auto}
  .badges{grid-template-columns:repeat(3,1fr);row-gap:24px}
}
@media (max-width:1100px){
  .site-header{height:96px}
  .logo img{width:150px}
  .menu-btn{right:clamp(20px,4vw,40px);top:23px}
  .nav-close{right:clamp(20px,4vw,40px);top:calc(23px + env(safe-area-inset-top,0px))}
  html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 96px)}
  .play{--ps:.6}
  .stages{grid-template-columns:repeat(2,1fr);row-gap:60px}
  .stages::before{display:none}
  .pmodel{grid-template-columns:1fr;row-gap:0}
  .chev{height:70px}
  .chev img{transform:rotate(90deg);width:36px}
  .mcard{max-width:560px;width:100%;margin:0 auto;min-height:0}
  .spot{grid-template-columns:1fr}
  .spot .info{padding-top:0;order:2}
  .spot-visual{order:1;margin:0 auto;width:min(685px,100%)}
  .tcards{grid-template-columns:1fr;max-width:620px;margin-left:auto;margin-right:auto}
  .quote{height:auto;padding:36px 20px 40px}
  .quote blockquote{font-size:clamp(30px,5.4vw,60.8px);line-height:1.22}
  .fgrid{grid-template-columns:1fr 1fr;row-gap:44px}
  /* Tablet & phone: checkmark sits in the flow under the intro, its point dipping into the first card */
  .why .wrap{display:flex;flex-direction:column}
  .why .intro{order:1}
  .why .check-art{order:2;position:relative;right:auto;top:auto;display:block;align-self:flex-end;width:min(600px,88%);margin:28px 0 -10%;z-index:3}
  .why .cards4{order:3;margin-top:0;width:100%}
  .signature::before{background-size:cover}
  .why{padding-top:160px}
}
@media (max-width:900px){
  .pcards{grid-template-columns:1fr 1fr}
  .pcards>.pcard:last-child{grid-column:1/-1;width:calc(50% - 10px);justify-self:center}
}
@media (max-width:700px){
  .site-header{height:76px}
  html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 76px)}
  .logo img{width:118px}
  .menu-btn,.menu-btn img{width:40px;height:40px}
  .menu-btn{top:18px}
  .nav-close{width:40px;height:40px;top:calc(18px + env(safe-area-inset-top,0px))}
  .play{--ps:.42}
  .about{padding-top:90px}
  .why,.two,.partner,.collections,.creds{padding-top:100px}
  .spotlight{padding-top:100px;padding-bottom:80px}
  .testi{padding-top:80px}
  .cta{padding-top:100px}
  .process{padding-top:80px}
  .signature{padding:120px 0 90px}
  .eyebrow,.stage .k,.pill{font-size:16px}
  .sec-head .lead br,.about .copy br{display:none}
  .cards4{grid-template-columns:1fr;margin-top:56px}
  .btn{font-size:16px;white-space:normal;text-align:center;height:auto;min-height:46px;padding:10px 22px;max-width:100%}
  .worlds,.pcards,.stages,.pmodel,.tcards{margin-top:56px}
  .world{aspect-ratio:auto;border-radius:32px;padding:40px 22px 40px}
  .world h3{font-size:40px}
  .world .sub{font-size:17px}
  .world li{font-size:16px}
  .world .btn{white-space:normal;height:auto;min-height:46px;padding:10px 20px;font-size:16px;text-align:center}
  .divider{height:90px}
  .divider i{width:60px}
  .divider b{width:56px;height:56px;margin:0 20px}
  .stats{display:grid;grid-template-columns:1fr 1fr;margin-left:0;row-gap:24px;max-width:360px}
  .stat:nth-child(3)::before{display:none}
  .stat{padding:0 14px}
  .stat .n{font-size:38px}
  .stat .l{font-size:17px}
  .ticker{margin-top:100px;height:52px}
  .ticker span{font-size:16px}
  .pcards{grid-template-columns:1fr;max-width:469px;margin-left:auto;margin-right:auto}
  .pcards>.pcard:last-child{width:auto;grid-column:auto}
  .stages{grid-template-columns:1fr}
  .spot .info h3{font-size:32px}
  .specs{margin-top:36px}
  .specs div{height:auto;padding:18px 0;gap:12px}
  .spot-foot{flex-wrap:wrap;gap:22px}
  .count{font-size:30px}
  .pager{gap:20px}
  .quote .by{font-size:14px;gap:12px}
  .quote .by::before,.quote .by::after{width:40px;height:2px}
  .quote .q{width:34px;height:30px}
  .tcard{padding:34px 26px 30px}
  .tcard .tq{right:24px;width:38px}
  .badges{grid-template-columns:repeat(2,1fr)}
  .badge b{font-size:clamp(15px,4.4vw,22.4px)}
  .badge span{font-size:clamp(10px,2.8vw,13.5px)}
  .cta-btns{gap:18px;margin-top:40px}
  .cta-btns .btn{width:100%;max-width:441px;font-size:17px;padding-left:24px;gap:14px;height:54px}
  .cta-btns .btn img{transform:scale(.8)}
  .site-footer{margin-top:120px}
  .fgrid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .scroll-btn{transition:none}
  .ticker .track{animation:none}
  .nav-panel{transition:none}
}

/* ===== Hover effects =====
   Scoped to real hover devices (mouse/trackpad) so taps on touch screens never leave things stuck.
   Colour/glow changes always apply; movement (lift, zoom, rotate) only when reduced motion is off. */
@media (hover:hover){
  /* Boxes: why cards, partnership cards, testimonials */
  .icard,.mcard,.tcard{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease,border-color .35s ease,background-color .35s ease}
  .icard:hover,.mcard:hover,.tcard:hover{background-color:rgba(255,255,255,.13);border-color:#ecd59c;box-shadow:0 18px 40px rgba(4,12,24,.45),0 0 0 1px rgba(214,179,116,.35),0 0 32px rgba(214,179,116,.16)}
  .icard .ic,.mcard .ic{transition:transform .4s cubic-bezier(.2,.7,.2,1),filter .4s ease}
  .icard:hover .ic,.mcard:hover .ic{filter:drop-shadow(0 0 10px rgba(214,179,116,.45))}
  .tcard .who img{border-radius:50%;transition:box-shadow .35s ease}
  .tcard:hover .who img{box-shadow:0 0 0 2px var(--gold)}

  /* Photo cards: gold frame + gentle zoom inside the rounded frame */
  .pcard{isolation:isolate;transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease}
  .pcard>img{transition:transform .9s cubic-bezier(.2,.7,.2,1),filter .6s ease}
  .pcard::after{content:"";position:absolute;inset:0;border:1px solid transparent;border-radius:31px;pointer-events:none;transition:border-color .35s ease}
  .pcard:hover::after{border-color:var(--gold)}
  .pcard:hover{box-shadow:0 24px 50px rgba(4,12,24,.55),0 0 36px rgba(214,179,116,.18)}
  .pcard:hover>img{filter:brightness(1.06) saturate(1.05)}

  /* Buttons: gold ones get a light sweep, outlined ones fill softly */
  .btn,.pbtn{position:relative;overflow:hidden;isolation:isolate;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease,filter .3s ease,background-color .3s ease,color .3s ease,border-color .3s ease}
  .btn-gold::after,.pbtn.solid::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-110%);transition:transform .75s ease;pointer-events:none}
  .btn-gold:hover::after,.btn-gold:focus-visible::after,.pbtn.solid:hover::after,.pbtn.solid:focus-visible::after{transform:translateX(110%)}
  .btn-gold:hover,.btn-gold:focus-visible{filter:brightness(1.06);box-shadow:0 10px 26px rgba(214,179,116,.32)}
  .btn-line:hover,.btn-line:focus-visible{background-color:rgba(214,179,116,.14);border-color:#ecd59c;color:#ecd59c;box-shadow:0 0 0 1px rgba(214,179,116,.35),0 10px 26px rgba(4,12,24,.4)}
  .pbtn:hover,.pbtn:focus-visible{border-color:#ecd59c;box-shadow:0 6px 18px rgba(214,179,116,.28)}

  /* Small round controls */
  .arrow{transition:background-color .3s ease,transform .3s ease,box-shadow .3s ease}
  .arrow path{transition:stroke .3s ease}
  .arrow:hover,.arrow:focus-visible{background-color:var(--gold-line);box-shadow:0 0 18px rgba(214,179,116,.35)}
  .arrow:hover path,.arrow:focus-visible path{stroke:var(--navy)}
  .sw{transition:transform .25s ease,box-shadow .25s ease}
  .sw:hover{box-shadow:0 0 0 3px rgba(214,179,116,.25)}
  .social a{transition:background-color .3s ease,border-color .3s ease,transform .3s ease}
  .social svg{transition:fill .3s ease}
  .social a:hover,.social a:focus-visible{background-color:var(--gold-line);border-color:var(--gold-line)}
  .social a:hover svg,.social a:focus-visible svg{fill:var(--navy)}
  .menu-btn{transition:transform .35s ease,filter .35s ease}
  .menu-btn:hover{filter:drop-shadow(0 0 8px rgba(214,179,116,.6))}
  .nav-close{transition:transform .35s ease,border-color .3s ease}
  .nav-close::before,.nav-close::after{transition:background-color .3s ease}
  .nav-close:hover{border-color:var(--gold)}
  .nav-close:hover::before,.nav-close:hover::after{background-color:var(--gold)}
  .scroll-btn:hover{background:var(--gold-line)}
  .scroll-btn:hover path{stroke:var(--navy)}
  .scroll-btn:hover{box-shadow:0 0 0 1px rgba(214,179,116,.4),0 8px 22px rgba(214,179,116,.3)}

  /* Circular borders: product-line circles, plus sign, credential badges, timeline, play button */
  .world{transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s ease,background-color .5s ease,border-color .5s ease}
  .world:hover{background-color:rgba(255,255,255,.13);border-color:#ecd59c;box-shadow:0 0 0 1px rgba(214,179,116,.35),0 0 60px rgba(214,179,116,.18),0 30px 60px rgba(4,12,24,.4)}
  .divider b{transition:transform .5s ease,background-color .4s ease,box-shadow .4s ease}
  .divider b:hover{background-color:rgba(214,179,116,.15);box-shadow:0 0 22px rgba(214,179,116,.35)}
  .badge img{transition:transform .5s cubic-bezier(.2,.7,.2,1),filter .5s ease}
  .badge:hover img{filter:drop-shadow(0 0 14px rgba(214,179,116,.4)) brightness(1.12)}
  .badge b{transition:color .3s ease}
  .badge:hover b{color:#f0d89a}
  .stage .sic,.stage .dot{transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease}
  .stage:hover .sic{box-shadow:0 0 0 4px rgba(214,179,116,.18),0 0 24px rgba(214,179,116,.4)}
  .stage:hover .dot{box-shadow:0 0 0 5px rgba(214,179,116,.22)}
  .play{transition:transform .4s ease,background-color .4s ease}
  .play::before{transition:border-color .4s ease}
  .play:hover{background-color:rgba(255,255,255,.2)}
  .play:hover::before{border-color:rgba(255,255,255,.9)}

  /* Standalone images */
  .about-visual,.spot-visual{transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .6s ease}
  .about-visual:hover,.spot-visual:hover{filter:brightness(1.05) saturate(1.06)}
  .logo img,.flogo{transition:filter .3s ease}
  .logo:hover img,.flogo:hover{filter:drop-shadow(0 0 10px rgba(214,179,116,.45))}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .icard:hover,.mcard:hover,.tcard:hover,.pcard:hover{transform:translateY(-6px)}
  .icard:hover .ic,.mcard:hover .ic,.stage:hover .sic{transform:scale(1.08)}
  .pcard:hover>img{transform:scale(1.06)}
  .btn:hover,.btn:focus-visible,.pbtn:hover,.pbtn:focus-visible,.social a:hover{transform:translateY(-2px)}
  .arrow:hover,.menu-btn:hover{transform:scale(1.08)}
  .sw:hover{transform:scale(1.15)}
  .nav-close:hover,.divider b:hover{transform:rotate(90deg)}
  .scroll-btn:hover{transform:translateY(-3px)}
  .world:hover{transform:scale(1.015)}
  .badge:hover img{transform:scale(1.05)}
  .stage:hover .dot{transform:scale(1.2)}
  .about-visual:hover{transform:scale(1.02)}
  .spot-visual:hover{transform:scale(1.03)}
  .play:hover{transform:scale(calc(var(--ps,1) * 1.05))}
}

/* =====================================================================
   Visual effects
   - Progressive: every "start" state (dimmed, undrawn, zero) only applies under html.fx,
     which main.js adds, so with JS off the page shows the finished design.
   - Motion is removed under prefers-reduced-motion; pointer-only effects need a fine pointer.
   ===================================================================== */

/* ---- Header: fixed, compacts on scroll, with a gold scroll-progress line ---- */
:root{--hdr:121px;--hdr-c:80px}
@media (max-width:1100px){:root{--hdr:96px;--hdr-c:68px}}
@media (max-width:700px){:root{--hdr:76px;--hdr-c:60px}}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + var(--hdr-c))}
body{padding-top:var(--hdr)}
.site-header{position:fixed;top:0;left:0;right:0;height:calc(var(--hdr) + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px);transition:height .35s ease,background-color .35s ease,box-shadow .35s ease}
.site-header.compact{height:calc(var(--hdr-c) + env(safe-area-inset-top,0px));background-color:rgba(19,39,63,.84);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 8px 24px rgba(4,12,24,.35)}
.menu-btn{top:50%;margin-top:-25px}
.logo img{transition:width .35s ease,filter .3s ease}
.site-header.compact .logo img{width:130px}
.site-header::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--gold) var(--gold-tex) center/cover;transform:scaleX(var(--sp,0));transform-origin:0 50%;pointer-events:none}
@media (max-width:1100px){.site-header.compact .logo img{width:112px}}
@media (max-width:700px){.menu-btn{margin-top:-20px}.site-header.compact .logo img{width:96px}}

/* ---- Parallax layers (JS sets --py on the host section) ---- */
.hero{background:#0b1a2e;overflow:hidden}
.hero-media{position:absolute;inset:0;transform:translate3d(0,var(--py,0px),0);will-change:transform}
.hero-img{position:absolute;inset:0;background:#0b1a2e center/cover no-repeat}   /* image set inline in index.php: the video's first frame, so there is no flash before it plays */
.play{z-index:1}
.signature{overflow:hidden}
.signature::before{top:5px;bottom:-100px;transform:translate3d(0,var(--py,0px),0);will-change:transform}
.quote{position:relative;overflow:hidden;isolation:isolate;background:var(--gold)}
.quote::before{content:"";position:absolute;inset:-100px 0;z-index:-1;background:var(--gold-tex) center/cover;transform:translate3d(0,var(--py,0px),0);will-change:transform}

/* ---- Slow hero zoom (runs only while the hero is on screen) ---- */
@keyframes heroZoom{from{transform:scale(1)}to{transform:scale(1.08)}}
.fx .hero-img{animation:heroZoom 26s ease-in-out infinite alternate}
.fx .hero:not(.in-view) .hero-img{animation-play-state:paused}

/* ---- Checkmark draws itself (pathLength=1 on each line) ---- */
.check-art{overflow:visible}
.check-art path{stroke-width:var(--sw,.85)}
.fx .check-art path{stroke-dasharray:1;stroke-dashoffset:1}
.fx .check-art.drawn path{stroke-dashoffset:0;transition:stroke-dashoffset 2.4s cubic-bezier(.6,.05,.25,1);transition-delay:calc(var(--i) * 70ms)}

/* ---- Timeline progress ---- */
.stages::after{content:"";position:absolute;left:calc(50% - 731px);right:calc(50% - 729px);top:112px;height:3px;background:var(--gold) var(--gold-tex) center/cover;transform:scaleX(var(--tp,1));transform-origin:0 50%;box-shadow:0 0 12px rgba(214,179,116,.45);pointer-events:none}
@media (max-width:1560px){.stages::after{left:20px;right:20px}}
@media (max-width:1100px){.stages::after{display:none}}
.stage .dot,.stage .sic,.stage h3,.stage .num{transition:opacity .5s ease,filter .5s ease,transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s ease}
.fx .stage:not(.lit) .dot{opacity:.35;transform:scale(.7)}
.fx .stage:not(.lit) .sic{opacity:.4;filter:grayscale(.85)}
.fx .stage:not(.lit) h3,.fx .stage:not(.lit) .num{opacity:.55}
.fx .stage.lit .dot{box-shadow:0 0 0 5px rgba(214,179,116,.18),0 0 16px rgba(214,179,116,.5)}

/* ---- Gold headline words: polished-metal depth + light sweep ----
   1. In view (main.js adds .shine): a bright sweep with a soft halo, a warm glow and a star glint.
   2. Afterwards (.shine-loop): a gentler sweep every ~9s, only while on screen (.in-view), staggered per word.
   3. Mouse hover replays the full sweep. Reduced motion: static textured gold. */
@keyframes sheen{from{background-position:100% 0,0 0,center}to{background-position:0% 0,0 0,center}}
@keyframes sheen-idle{0%{background-position:100% 0,0 0,center}24%,100%{background-position:0% 0,0 0,center}}
@keyframes gold-glow{0%,100%{filter:drop-shadow(0 0 0 rgba(236,200,122,0))}45%{filter:drop-shadow(0 0 .16em rgba(236,200,122,.55))}}
@keyframes glint{0%,50%{opacity:0;transform:scale(0) rotate(0deg)}68%{opacity:1;transform:scale(1) rotate(90deg)}100%{opacity:0;transform:scale(.2) rotate(180deg)}}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .fx .gold-text{position:relative;
    background-image:
      linear-gradient(110deg,transparent 38%,rgba(255,228,165,.35) 45%,rgba(255,253,242,1) 50%,rgba(255,228,165,.35) 55%,transparent 62%),
      linear-gradient(180deg,rgba(255,244,214,.3) 0%,rgba(255,244,214,0) 46%,rgba(96,60,8,.24) 100%),
      var(--gold-tex);
    background-size:300% 100%,100% 100%,cover;background-position:100% 0,0 0,center;background-repeat:no-repeat}
  .fx .gold-text.shine{animation:sheen 1.6s cubic-bezier(.45,.05,.3,1) .15s both,gold-glow 1.6s ease-out .15s both}
  /* the glint flows inline right after the last letter (zero net width, so no layout shift),
     so it lands on the final letter even when the whole heading block is gold */
  .fx .gold-text.shine:not(.shine-loop)::after{content:"";display:inline-block;position:relative;top:-.46em;width:.52em;height:.52em;margin-left:-.5em;margin-right:-.02em;vertical-align:baseline;pointer-events:none;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.95'/%3E%3Cstop offset='1' stop-color='%23ffe2a0' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='20' cy='20' r='13' fill='url(%23g)'/%3E%3Cpath d='M20 0C21 15 25 19 40 20C25 21 21 25 20 40C19 25 15 21 0 20C15 19 19 15 20 0Z' fill='%23fffaf0'/%3E%3C/svg%3E") center/contain no-repeat;opacity:0;animation:glint 1.6s ease-out .35s both}
  .fx .gold-text.shine-loop{animation:sheen-idle 9s cubic-bezier(.45,.05,.3,1) var(--gd,0s) infinite;animation-play-state:paused}
  .fx .gold-text.shine-loop.in-view{animation-play-state:running}
  /* slider slides: replay when a slide becomes the visible one */
  .fx .hs-slide:not(.is-active) .gold-text,.fx .hs-slide:not(.is-active) .gold-text::after{animation:none}
}
@media (hover:hover) and (pointer:fine){
  .fx .gold-text.shine-loop:hover{animation:sheen 1.1s cubic-bezier(.45,.05,.3,1) both,gold-glow 1.1s ease-out both}
}

/* ---- Credential badges: light travelling round the rings ---- */
@property --sweep{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes badgeSweep{to{--sweep:360deg}}
.badge .t{z-index:2}
.fx .badge::after{content:"";position:absolute;inset:0;z-index:1;border-radius:50%;pointer-events:none;mix-blend-mode:overlay;
  background:conic-gradient(from var(--sweep),transparent 0 68%,rgba(255,238,195,.95) 84%,transparent 92%);
  -webkit-mask:radial-gradient(closest-side,transparent 77%,#000 79%,#000 98%,transparent 100%);mask:radial-gradient(closest-side,transparent 77%,#000 79%,#000 98%,transparent 100%);
  animation:badgeSweep 9s linear infinite}
.fx .badge:nth-child(2)::after{animation-delay:-1.5s}.fx .badge:nth-child(3)::after{animation-delay:-3s}
.fx .badge:nth-child(4)::after{animation-delay:-4.5s}.fx .badge:nth-child(5)::after{animation-delay:-6s}.fx .badge:nth-child(6)::after{animation-delay:-7.5s}
.fx .creds:not(.in-view) .badge::after{animation-play-state:paused}

/* ---- Ticker: pause on hover (speed-up while scrolling is in JS) ---- */
@media (hover:hover){.ticker:hover .track{animation-play-state:paused}}

/* ---- Spotlight carousel ---- */
.slides-info{display:grid}
.si{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s linear .5s}
.si.is-active{opacity:1;visibility:visible;transition:opacity .5s ease .1s,visibility 0s}
.finishes{transition:opacity .4s ease,visibility .4s}
.finishes.is-off{opacity:0;visibility:hidden}
.spot-visual{position:relative;aspect-ratio:1;touch-action:pan-y;-webkit-user-select:none;user-select:none;cursor:grab}
.spot-visual:active{cursor:grabbing}
.spot-rings{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.spot-frame{position:absolute;left:15.72%;top:15.62%;width:68.47%;aspect-ratio:1;border-radius:6.1%;overflow:hidden;background:#13273f;box-shadow:0 0 0 .7px var(--gold-line)}
.sv{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .6s ease}
.sv.is-active{opacity:1}
.sv img{width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
/* finish preview: a colour layer masked to the bangles only */
.tint{position:absolute;inset:0;opacity:0;mix-blend-mode:color;transition:opacity .5s ease,background-color .5s ease;
  -webkit-mask:url(../images/spotlight-bangle-mask.png) center/100% 100% no-repeat;mask:url(../images/spotlight-bangle-mask.png) center/100% 100% no-repeat}
.spot-visual[data-finish="rose"] .tint{opacity:.9;background-color:#e8a08c}
.spot-visual[data-finish="antique"] .tint{opacity:.85;background-color:#8e7a50}
.spot-visual[data-finish="antique"] .sv:first-child img{filter:brightness(.88) contrast(1.05)}
.sv:first-child img{transition:filter .5s ease}

/* ---- Pointer-only: 3D tilt on photo cards + magnetic buttons ---- */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .fx .pcard{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s cubic-bezier(.2,.7,.2,1),translate .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease}
  .fx .pcard:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));translate:0 -6px}
  .fx .pcard.tilting{transition:transform .14s ease-out,translate .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease}
  .fx .pcard::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .4s ease;mix-blend-mode:screen;
    background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,236,200,.26),transparent 46%)}
  .fx .pcard:hover::before{opacity:1}
  .fx .btn{translate:var(--mgx,0px) var(--mgy,0px);transition:transform .3s cubic-bezier(.2,.7,.2,1),translate .4s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease,filter .3s ease,background-color .3s ease,color .3s ease,border-color .3s ease}
}

/* ---- Reduced motion: final states, no movement ---- */
@media (prefers-reduced-motion:reduce){
  .fx .hero-img,.fx .badge::after{animation:none}
  .fx .badge::after{display:none}
  .fx .check-art path{stroke-dasharray:none;transition:none}
  .fx .gold-text.shine,.fx .gold-text.shine-loop,.fx .gold-text.shine-loop:hover{animation:none}
  .fx .gold-text::after{display:none}
  .hero-media,.signature::before,.quote::before{transform:none}
  .si,.si.is-active,.sv,.tint,.finishes,.site-header,.logo img{transition:none}
}
.signature::after{top:0;background:linear-gradient(var(--navy) 0 105px,rgba(19,39,63,0) 345px),linear-gradient(transparent 0 105px,rgba(6,16,32,.28) 105px)}
.pcard .cap{z-index:2}
.fx-init .stage *,.fx-init .check-art path,.fx-init .site-header,.fx-init .logo img{transition:none!important}
.si .specs{margin-bottom:0}
.spot .spot-visual{width:100%;max-width:685px}

/* Simple content pages (legal/) */
.legal{padding:clamp(70px,9vw,140px) 0 40px;min-height:50vh}
.legal .h2{margin:18px 0 26px}
.legal-note{max-width:760px;line-height:1.5;margin-bottom:34px}
.legal-note a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}


/* =====================================================================
   Popup menu (includes/header.php, NAV_MENU in config.php)
   Two groups — Explore (pages) and Collections — plus contact and legal links.
   The panel scrolls and its content is centred with auto margins, so long menus on short
   screens start at the top instead of being clipped (the old justify-content:center issue).
   ===================================================================== */
.nav-panel{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;overflow-y:auto;overscroll-behavior:contain;
  padding:calc(env(safe-area-inset-top,0px) + 120px) clamp(20px,6vw,96px) calc(env(safe-area-inset-bottom,0px) + 36px);
  background:radial-gradient(ellipse 60% 70% at 85% 20%,rgba(214,179,116,.08),transparent 70%),#0e1f33}   /* opaque: no page text ghosting through */
.nav-inner{width:min(1180px,100%);margin:auto}
.nav-groups{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(36px,6vw,110px)}
.nav-group--collections{padding-left:clamp(28px,4vw,64px);border-left:1px solid rgba(214,179,116,.25)}
.nav-label{margin:0 0 22px;font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.nav-label::before{content:"// ";content:"// " / ""}
.nav-list{list-style:none;margin:0;padding:0}
.nav-panel .nav-list a{display:inline-flex;flex-direction:column;gap:4px;padding:8px 0;font-family:var(--serif);text-transform:uppercase;color:#fff}
.nav-panel .nav-list a::after{content:none}
.nav-group--explore .nav-t{font-family:var(--serif);font-size:32px;line-height:1.08}
.nav-group--collections .nav-list a{padding:12px 0}
.nav-group--collections .nav-t{font-size:clamp(24px,2.4vw,32px);line-height:1.15}
.nav-t{position:relative;transition:color .25s}
.nav-t::after{content:"→";display:inline-block;margin-left:.35em;font-size:.6em;vertical-align:.25em;color:var(--gold);opacity:0;transform:translateX(-6px);transition:opacity .25s,transform .25s}
.nav-note{font-family:var(--sans);font-size:14px;letter-spacing:.06em;text-transform:none;color:#9fb0c6}
/* current page (server) or current home section (main.js scroll sync) */
.nav-panel .nav-list a[aria-current] .nav-t{color:var(--gold)}
.nav-panel .nav-list a[aria-current] .nav-t::before{content:"";position:absolute;left:-26px;top:50%;width:14px;height:1px;background:var(--gold)}
.nav-panel .nav-list a:focus-visible{outline:2px solid var(--gold);outline-offset:6px;border-radius:2px}
.nav-foot{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:clamp(40px,6vh,72px);padding-top:24px;border-top:1px solid rgba(214,179,116,.22)}
.nav-panel .nav-foot a{font-family:var(--sans);font-size:16px;text-transform:none;letter-spacing:.02em;color:#c9d2de}
.nav-panel .nav-foot a[aria-current]{color:var(--gold)}
.nav-panel .nav-foot a::after{content:none}
@media (hover:hover){
  .nav-panel .nav-list a:hover .nav-t{color:var(--gold)}
  .nav-panel .nav-list a:hover .nav-t::after{opacity:1;transform:none}
  .nav-panel .nav-foot a:hover{color:var(--gold)}
}
/* staggered entrance (JS on, motion allowed) */
@media (prefers-reduced-motion:no-preference){
  .fx .nav-panel.open .nav-list li,.fx .nav-panel.open .nav-label,.fx .nav-panel.open .nav-foot{animation:nav-in .55s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0) * 45ms + 60ms)}
  @keyframes nav-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}
@media (max-width:1100px){
  .nav-panel{padding-top:calc(env(safe-area-inset-top,0px) + 96px)}
}
@media (max-width:760px){
  .nav-groups{grid-template-columns:1fr;gap:34px}
  .nav-group--collections{padding-left:0;border-left:0;padding-top:30px;border-top:1px solid rgba(214,179,116,.22)}
  .nav-group--explore .nav-t{font-size:32px}
  .nav-group--collections .nav-t{font-size:22px}
  .nav-panel .nav-list a[aria-current] .nav-t::before{left:-18px;width:10px}
  .nav-panel{padding-left:28px;padding-right:24px;padding-top:calc(env(safe-area-inset-top,0px) + 84px)}
  .nav-foot{flex-direction:column;gap:12px}
}

/* ---- Hero banner background video (muted, looping; the still image shows until it loads) ---- */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}