:root {
      --bg-obsidian: #080808;
      --bg-warm-dark: #11100E;
      --bg-card: #161412;
      --gold-warm: #C9A461;
      --amber-glow: rgba(201, 164, 97, 0.22);
      --text-ivory: #F5F2EB;
      --text-stone: #968F83;
      --border-luxury: rgba(201, 164, 97, 0.2);
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      background-color: var(--bg-obsidian);
      color: var(--text-ivory);
      font-family: 'Plus Jakarta Sans', sans-serif;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }

    h1, h2, h3, .serif { font-family: 'Cormorant Garamond', serif; font-weight: 400; }

    /* NAVIGATION LUXE */
    nav {
      position: fixed; top: 0; width: 100%; padding: 26px 5vw;
      display: flex; justify-content: space-between; align-items: center;
      z-index: 100; background: linear-gradient(to bottom, rgba(8,8,8,0.92), transparent);
      backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,0.04);
    }
    .logo {
      font-family: 'Cormorant Garamond', serif; font-size: 1.45rem;
      letter-spacing: 0.28em; text-transform: uppercase; color: var(--text-ivory);
    }
    .logo span { color: var(--gold-warm); font-style: italic; letter-spacing: 0.1em; }
    .nav-links { display: flex; gap: 36px; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-stone); }
    .nav-links a { color: inherit; text-decoration: none; transition: color 0.3s; }
    .nav-links a:hover { color: var(--gold-warm); }
    .nav-cta {
      padding: 10px 22px; border: 1px solid var(--border-luxury); color: var(--text-ivory);
      font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none;
      transition: 0.3s;
    }
    .nav-cta:hover { background: var(--gold-warm); color: #080808; }

    /* BARRE DE PROGRESSION LATÉRALE (STYLE AETERN / APPLE) */
    .scroll-track {
      position: fixed; right: 28px; top: 50%; transform: translateY(-50%);
      width: 1px; height: 200px; background: rgba(255,255,255,0.12); z-index: 90;
    }
    .scroll-orb {
      width: 9px; height: 9px; border-radius: 50%; background: var(--gold-warm);
      position: absolute; left: -4px; top: 0%; box-shadow: 0 0 14px var(--gold-warm);
    }

    /* BOUTONS & TAGS */
    .eyebrow {
      font-size: 0.68rem; letter-spacing: 0.32em; text-transform: uppercase;
      color: var(--gold-warm); margin-bottom: 16px; display: inline-block;
    }
    .btn-gold {
      pointer-events: auto; display: inline-block; padding: 15px 34px;
      border: 1px solid var(--border-luxury); color: var(--text-ivory);
      font-size: 0.74rem; letter-spacing: 0.25em; text-transform: uppercase;
      text-decoration: none; background: rgba(201, 164, 97, 0.06);
      transition: all 0.4s ease; cursor: pointer;
    }
    .btn-gold:hover { border-color: var(--gold-warm); background: var(--gold-warm); color: #080808; }

    /* SECTION 1 : HERO SCROLLYTELLING (ASSEMBLAGE DE LA LUNETTE AU SCROLL) */
    .scrolly-hero { position: relative; width: 100%; height: 420vh; }
    .sticky-stage {
      position: sticky; top: 0; width: 100%; height: 100vh;
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 7vw; overflow: hidden;
    }
    .hero-text { position: relative; z-index: 10; max-width: 480px; pointer-events: none; }
    .hero-text h1 {
      font-size: clamp(3.2rem, 5.5vw, 5.6rem); line-height: 0.94;
      letter-spacing: 0.01em; margin-bottom: 24px;
    }
    .hero-text p {
      font-size: 0.95rem; color: var(--text-stone); line-height: 1.75; margin-bottom: 34px;
    }
    .video-canvas-wrap {
      position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; z-index: 1;
    }
    #assembly-video { width: 100%; height: 100%; object-fit: cover; opacity: 0.9; }

    /* Callouts techniques qui s'allument en scrollant */
    .hud-callout {
      position: absolute; right: 8vw; z-index: 10; max-width: 300px;
      border-left: 1px solid var(--gold-warm); padding: 8px 0 8px 22px;
      background: linear-gradient(90deg, rgba(17,16,14,0.85), transparent);
      backdrop-filter: blur(8px); opacity: 0; transform: translateY(25px);
    }
    #callout-a { top: 28vh; }
    #callout-b { bottom: 18vh; }
    .hud-callout h4 { font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-warm); margin-bottom: 6px; }
    .hud-callout p { font-size: 0.84rem; color: var(--text-stone); line-height: 1.55; }

    /* SECTION 2 : LUNETTES CONNECTÉES "LUMEN VISION OS" (APPLE VISION / META ORION STYLE) */
    .spatial-section {
      padding: 140px 7vw; background: linear-gradient(180deg, var(--bg-obsidian), var(--bg-warm-dark));
      border-top: 1px solid rgba(255,255,255,0.05);
    }
    .spatial-grid {
      display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: center; margin-top: 48px;
    }
    .spatial-video-box {
      position: relative; border-radius: 6px; overflow: hidden;
      border: 1px solid var(--border-luxury); box-shadow: 0 25px 80px rgba(0,0,0,0.8);
      aspect-ratio: 16/10; background: #050505;
    }
    .spatial-video-box video { width: 100%; height: 100%; object-fit: cover; }
    .hud-overlay-badge {
      position: absolute; top: 20px; left: 20px; padding: 8px 16px;
      background: rgba(8, 8, 8, 0.75); border: 1px solid var(--border-luxury);
      font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-warm);
      backdrop-filter: blur(10px);
    }
    .spatial-specs { display: flex; flex-direction: column; gap: 28px; }
    .spec-item {
      padding: 24px; background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.06); transition: 0.3s;
    }
    .spec-item:hover { border-color: var(--gold-warm); background: rgba(201,164,97,0.04); }
    .spec-item h3 { font-size: 1.4rem; margin-bottom: 8px; color: var(--text-ivory); }
    .spec-item p { font-size: 0.88rem; color: var(--text-stone); line-height: 1.65; }

    /* SECTION 3 : CAMPAGNE MANNEQUIN PLEIN ÉCRAN (L'ÉMOTION & LE STYLE) */
    .campaign-section { padding: 120px 7vw; }
    .campaign-header {
      display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 48px; flex-wrap: wrap; gap: 24px;
    }
    .campaign-header h2 { font-size: clamp(2.4rem, 4.2vw, 4rem); line-height: 1.05; }
    .campaign-frame {
      position: relative; width: 100%; height: 78vh; overflow: hidden;
      border: 1px solid var(--border-luxury);
    }
    .campaign-frame video { width: 100%; height: 100%; object-fit: cover; }
    .campaign-caption {
      position: absolute; bottom: 40px; left: 40px; max-width: 440px;
      background: rgba(12, 11, 10, 0.82); backdrop-filter: blur(14px);
      padding: 28px 34px; border: 1px solid var(--border-luxury);
    }

    /* SECTION 4 : LE CATALOGUE 2.0 (GALERIE INTERACTIVE PAR MATIÈRE & USAGE) */
    .catalog-section { padding: 120px 7vw; background: var(--bg-warm-dark); }
    .filter-bar { display: flex; gap: 14px; margin: 40px 0 56px; flex-wrap: wrap; }
    .filter-btn {
      background: transparent; border: 1px solid rgba(255,255,255,0.12);
      color: var(--text-stone); padding: 12px 26px; font-size: 0.72rem;
      letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; transition: 0.3s;
    }
    .filter-btn.active, .filter-btn:hover {
      border-color: var(--gold-warm); color: var(--text-ivory); background: var(--amber-glow);
    }
    .product-grid {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 32px;
    }
    .product-card {
      background: var(--bg-card); border: 1px solid rgba(255,255,255,0.06);
      padding: 34px; transition: all 0.4s ease; cursor: pointer; position: relative;
    }
    .product-card:hover { transform: translateY(-8px); border-color: var(--gold-warm); }
    .product-tag { font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-warm); }
    .product-img-wrap {
      height: 230px; display: flex; align-items: center; justify-content: center;
      margin: 24px 0; overflow: hidden;
    }
    .product-img-wrap img { max-width: 92%; max-height: 100%; object-fit: contain; transition: transform 0.6s ease; }
    .product-card:hover .product-img-wrap img { transform: scale(1.09) rotate(-1.5deg); }
    .product-meta {
      display: flex; justify-content: space-between; align-items: baseline;
      border-top: 1px solid rgba(255,255,255,0.07); padding-top: 20px;
    }
    .product-title { font-family: 'Cormorant Garamond', serif; font-size: 1.55rem; }
    .product-price { font-size: 0.92rem; color: var(--gold-warm); font-weight: 500; }

    footer {
      padding: 80px 7vw; border-top: 1px solid rgba(255,255,255,0.08);
      display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px;
      color: var(--text-stone); font-size: 0.78rem; letter-spacing: 0.08em;
    }

    @media (max-width: 960px) {
      .spatial-grid { grid-template-columns: 1fr; }
      .nav-links { display: none; }
      .hud-callout { right: 5vw; left: 5vw; max-width: none; }
    }
  
    :root { --text-stone: #aaa398; }
    a:focus-visible,button:focus-visible,[role=button]:focus-visible { outline:2px solid #C9A461; outline-offset:5px; }
    .skip-link {position:fixed;left:16px;top:-100px;z-index:999;background:#F5F2EB;color:#080808;padding:14px}.skip-link:focus {top:16px}
    section {scroll-margin-top:95px} .concept-note {font-size:.78rem;color:var(--text-stone);margin-bottom:24px}
    .video-canvas-wrap:after {content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,8,8,.95),rgba(8,8,8,.6) 30%,transparent 68%);pointer-events:none}
    .hud-callout {transition:opacity .4s,transform .4s;max-width:250px} .hud-callout.visible {opacity:1;transform:none}
    .product-card[hidden] {display:none}.product-card {cursor:pointer}.product-meta {gap:12px}.product-price {white-space:nowrap}
    dialog {margin:auto;max-width:660px;width:90%;padding:40px;background:#161412;color:#F5F2EB;border:1px solid #C9A461;line-height:1.7}
    dialog::backdrop {background:rgba(0,0,0,.8)}dialog h2 {font-size:2.5rem}dialog img {width:100%;margin:18px 0}dialog p {margin:10px 0;color:#aaa398}
    .close-dialog {position:absolute;right:15px;top:10px;background:none;border:0;color:#F5F2EB;font-size:2rem;cursor:pointer;padding:8px}
    @media(max-width:1100px){.nav-links{gap:18px;font-size:.62rem}.hero-text {max-width:390px}}
    @media(max-width:700px){nav{padding:18px 5vw}.logo{font-size:1.1rem;letter-spacing:.15em}.nav-cta{padding:12px;font-size:.6rem}.scroll-track{display:none}
    .scrolly-hero{height:auto}.sticky-stage{position:relative;min-height:850px;height:100svh;align-items:flex-start;padding:140px 6vw 30px}
    .hero-text{max-width:100%}.hero-text h1{font-size:3.6rem}.hero-text p{font-size:.88rem;max-width:34em}.video-canvas-wrap{top:45%;height:52%}.video-canvas-wrap:after{background:linear-gradient(#080808,transparent 50%)}
    #assembly-video{object-fit:cover;object-position:75% center}.hud-callout{display:none}.spatial-section,.campaign-section,.catalog-section{padding:75px 6vw}
    .spatial-grid{gap:26px}.spatial-video-box{aspect-ratio:4/3}.hud-overlay-badge{font-size:.52rem;left:10px;top:10px;padding:8px}
    .campaign-frame{height:640px}.campaign-frame video{object-position:48%}.campaign-caption{bottom:18px;left:18px;right:18px;padding:20px;max-width:none}
    .product-grid{grid-template-columns:minmax(0,1fr);gap:20px}.product-card{padding:24px}.filter-bar{gap:8px;margin:28px 0}.filter-btn{padding:13px;font-size:.6rem;letter-spacing:.1em}
    footer{padding:45px 6vw;line-height:1.8}.spatial-section h2{font-size:2.5rem!important}}
    @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}.scrolly-hero{height:auto}.sticky-stage{position:relative;min-height:100svh}.hud-callout{display:none}}
  
    .menu-toggle{display:none;background:none;border:1px solid var(--border-luxury);color:var(--text-ivory);padding:12px;cursor:pointer}
    .motion-toggle{position:fixed;right:20px;bottom:18px;background:#11100ee8;border:1px solid var(--border-luxury);color:var(--text-stone);padding:10px 14px;font-size:.65rem;z-index:99;cursor:pointer}
    @media(max-width:960px){.menu-toggle{display:block}.nav-links.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:#080808;padding:25px 6vw;gap:25px;font-size:.75rem}.nav-cta{margin-left:10px}.logo{margin-right:auto}.motion-toggle{right:10px;bottom:10px}}
    @media(max-width:360px){.logo{font-size:.9rem}.menu-toggle{padding:10px}.nav-cta{font-size:.5rem;padding:10px;letter-spacing:.08em}.hero-text h1{font-size:3.2rem}}
  
    /* V2 — une seule direction : précision contemporaine et accent couture. */
    body{font-family:'Manrope',sans-serif;background:#080808}
    h1,h2,h3{font-family:'Manrope',sans-serif;font-weight:400;letter-spacing:-.045em}
    em,.serif,.product-title{font-family:'Bodoni Moda',serif;font-weight:400;letter-spacing:-.04em}
    h1 em,h2 em{font-style:italic;color:#e4d9c5}
    .logo{font-family:'Manrope',sans-serif;font-size:1.15rem;font-weight:500;letter-spacing:.19em;text-decoration:none;white-space:nowrap}.logo span{font-family:'Bodoni Moda',serif;font-size:1.3em;letter-spacing:0;color:#d3bb8d}
    nav{padding:25px 5vw;backdrop-filter:blur(16px)}.nav-links{letter-spacing:.08em;font-size:.72rem;color:#c7c0b5;gap:30px}.nav-cta{letter-spacing:.08em;font-size:.69rem}
    .eyebrow{font-size:.62rem;letter-spacing:.17em;font-weight:500;color:#c6ac80}
    .btn-gold,.filter-btn{font-family:inherit;letter-spacing:.08em}.btn-gold{background:none}
    .intro-section{height:100svh;min-height:700px;position:relative;overflow:hidden;display:flex;align-items:center;padding:110px 7vw 100px}
    .intro-media{position:absolute;inset:0;background:#080808}.intro-media video{height:100%;width:100%;object-fit:contain;display:block}
    .intro-media:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#080808 0%,rgba(8,8,8,.94) 18%,transparent 47%);pointer-events:none}
    .intro-copy{position:relative;z-index:2;width:48%;max-width:620px}.intro-copy .eyebrow{margin-bottom:28px}.intro-copy h1{font-size:clamp(4rem,6.2vw,7.4rem);font-weight:300;line-height:1.03;margin-bottom:28px;letter-spacing:-.06em}.intro-copy h1 em{white-space:nowrap;font-size:.85em}
    .intro-copy p{font-size:.86rem;line-height:1.9;color:#aaa398;margin-bottom:34px}
    .text-link{display:inline-flex;align-items:center;gap:32px;color:#eee9df;font-size:.72rem;letter-spacing:.015em;text-decoration:none;border-bottom:1px solid #655a46;padding:12px 0;max-width:max-content}.text-link span{font-size:1.2rem;color:#c9a461;transition:transform .3s}.text-link:hover span{transform:translate(3px,3px)}
    .intro-bottom{position:absolute;bottom:42px;left:7vw;right:7vw;display:flex;justify-content:space-between;font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:#918a7f}.intro-bottom a{color:inherit;text-decoration:none}.intro-bottom a span{margin-left:24px;color:#c9a461}
    .scrolly-hero{height:380vh;border-top:1px solid #24211d;scroll-margin-top:0}.sticky-stage{height:100svh;padding:100px 7vw}
    .hero-text{max-width:375px}.hero-text h2{font-size:clamp(2.9rem,4.3vw,5rem);line-height:1.08;margin-bottom:24px}.hero-text p{font-size:.83rem;line-height:1.9;max-width:320px;margin-bottom:26px}.assembly-instruction{font-size:.66rem;color:#c6ac80;letter-spacing:.03em}
    #assembly-video{object-fit:contain;opacity:1}.video-canvas-wrap:after{background:linear-gradient(90deg,#080808 0%,rgba(8,8,8,.84) 20%,transparent 50%)}
    .assembly-chapter{position:absolute;bottom:48px;left:7vw;right:7vw;z-index:4;display:flex;align-items:center;gap:36px;color:#c6ac80;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase}.assembly-chapter>span{min-width:200px}.assembly-progress{height:1px;background:#29251e;flex:1}.assembly-progress i{display:block;width:100%;height:1px;background:#c9a461;transform:scaleX(0);transform-origin:left}
    .hud-callout{right:7vw;left:auto;background:#080808bf;backdrop-filter:blur(12px);border-left:1px solid #7d6947;padding:12px 18px;max-width:260px}#callout-a{top:auto;bottom:115px}#callout-b{bottom:115px}.hud-callout h3{font-size:.91rem;font-weight:400;letter-spacing:-.025em;color:#e4d9c5;margin-bottom:5px}.hud-callout p{font-size:.68rem;color:#aaa398;line-height:1.7}
    .spatial-section,.campaign-section,.catalog-section{padding-top:120px;padding-bottom:120px}.section-title,.campaign-header h2{font-size:clamp(3rem,5vw,5.5rem);line-height:1.08}.section-intro{margin-top:30px;max-width:520px;font-size:.86rem;line-height:1.8;color:#aaa398}.concept-note{font-size:.63rem;color:#847d73;margin:16px 0 0}.spatial-grid{gap:70px;margin-top:65px}.spatial-video-box{border:0;border-radius:0;box-shadow:none;aspect-ratio:1/1}.spatial-video-box video{object-fit:cover}.hud-overlay-badge{font-size:.52rem;letter-spacing:.1em;border:1px solid #5f523b;top:24px;left:24px;background:#080808a0}
    .spatial-specs{gap:0}.spec-item{padding:25px 0;background:none;border:0;border-bottom:1px solid #39332b}.spec-item:hover{border-color:#776345;background:none}.spec-item h3{font-size:1.28rem;margin:0 0 12px}.spec-item p{font-size:.78rem;line-height:1.85}.spec-item .eyebrow{font-size:.54rem;margin-bottom:12px!important}.spatial-specs>.text-link{margin-top:25px}
    .campaign-header{margin-bottom:45px}.campaign-header>p{font-size:.82rem!important}.campaign-frame{border:0;height:auto;aspect-ratio:16/9}.campaign-caption{border:0;border-left:1px solid #a88b5e;background:#080808a6;padding:22px 28px;bottom:32px;left:32px}.campaign-caption .serif{font-size:1.8rem!important}.campaign-caption p{font-size:.68rem!important}
    .catalog-section h2{font-size:clamp(3rem,5vw,5.2rem)!important;line-height:1.08}.filter-bar{margin:38px 0 55px;gap:8px}.filter-btn{font-size:.61rem;padding:12px 18px;border-color:#3b342a}.filter-btn.active{background:#c9a461;color:#080808}.product-grid{gap:22px;grid-template-columns:repeat(3,minmax(0,1fr))}.product-card{padding:25px;background:#14120f;border-color:#2c2720}.product-card:hover{transform:translateY(-4px)}.product-tag{font-size:.52rem;letter-spacing:.12em}.product-img-wrap{height:200px}.product-img-wrap img{max-width:100%;width:100%;height:auto}.product-title{font-size:1.65rem}.product-price{font-size:.72rem}.product-meta{gap:12px}
    footer{font-size:.63rem;letter-spacing:.02em;line-height:1.8}.motion-toggle{font-family:'Manrope',sans-serif;font-size:.58rem;letter-spacing:.02em;padding:10px 13px}.scroll-track{height:120px;right:18px;opacity:.55}
    dialog{font-family:'Manrope',sans-serif}dialog h2{font-family:'Bodoni Moda',serif}
    @media(max-width:1100px){.intro-copy h1{font-size:5.6vw}.intro-copy{width:48%}.hero-text{max-width:310px}.spatial-grid{gap:40px}.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
    @media(max-width:700px){nav{padding:19px 6vw}.logo{font-size:.84rem;letter-spacing:.12em}.logo span{font-size:1.3em}.nav-cta{font-size:.52rem;letter-spacing:.02em;padding:11px 12px}.menu-toggle{font-family:'Manrope',sans-serif;font-size:.6rem;padding:11px}.nav-links.open{padding:25px 6vw}.intro-section{height:100svh;min-height:790px;padding:135px 7vw 80px;align-items:flex-start}.intro-copy{width:100%;max-width:none}.intro-copy .eyebrow{font-size:.51rem;margin-bottom:25px}.intro-copy h1{font-size:clamp(3.4rem,10vw,4.8rem);line-height:1.06;letter-spacing:-.06em;margin-bottom:25px}.intro-copy p{font-size:.76rem;line-height:1.8;margin-bottom:15px}.text-link{font-size:.65rem}.intro-media{top:45%;height:43%;width:160%;left:-58%}.intro-media video{object-fit:contain}.intro-media:after{background:linear-gradient(#080808,transparent 25%,transparent 90%,#080808)}.intro-bottom{bottom:65px;left:7vw;right:7vw;gap:22px;font-size:.48rem;line-height:1.8}.intro-bottom>span{max-width:120px}.intro-bottom>a{max-width:150px;text-align:right}.intro-bottom a span{margin-left:8px}
    .scrolly-hero{height:auto}.sticky-stage{position:relative;height:auto;min-height:820px;padding:90px 7vw 80px;align-items:flex-start}.hero-text{max-width:100%}.hero-text h2{font-size:2.9rem;line-height:1.08}.hero-text p{font-size:.76rem;margin-bottom:18px}.video-canvas-wrap{top:48%;left:-47%;width:145%;height:42%;bottom:auto}.video-canvas-wrap:after{background:linear-gradient(#080808,transparent 30%,transparent 80%,#080808)}#assembly-video{object-fit:contain;object-position:center}.assembly-chapter{bottom:35px;left:7vw;right:7vw;gap:15px;font-size:.5rem}.assembly-chapter>span{min-width:140px}.assembly-instruction{font-size:.61rem}.hud-callout{display:none}
    .spatial-section,.campaign-section,.catalog-section{padding:85px 7vw}.section-title,.spatial-section h2,.campaign-header h2{font-size:2.85rem!important;line-height:1.12}.section-intro{font-size:.77rem;margin-top:22px}.concept-note{font-size:.58rem;line-height:1.7}.spatial-grid{margin-top:35px;gap:22px}.spatial-video-box{aspect-ratio:4/3}.hud-overlay-badge{top:14px;left:14px;font-size:.43rem}.spec-item{padding:23px 0}.spec-item p{font-size:.76rem}.campaign-header{gap:24px}.campaign-frame{aspect-ratio:auto;height:620px}.campaign-frame video{object-position:50%}.campaign-caption{left:18px;right:18px;bottom:35px;padding:18px}.campaign-caption .serif{font-size:1.6rem!important}.catalog-section h2{font-size:2.85rem!important}.product-grid{grid-template-columns:minmax(0,1fr)}.product-img-wrap{height:210px}.filter-bar{gap:7px;margin:30px 0 36px}.filter-btn{padding:12px;font-size:.53rem}.motion-toggle{bottom:8px;right:8px}.product-title{font-size:1.7rem}.intro-media video{pointer-events:none}}
    @media(max-width:360px){.logo{font-size:.72rem}.nav-cta{font-size:.46rem;padding:10px}.menu-toggle{font-size:.54rem;padding:10px}.intro-section{padding-top:125px}.intro-copy h1{font-size:3.15rem}.intro-copy .eyebrow{font-size:.46rem}.intro-copy p{font-size:.72rem}.section-title,.spatial-section h2,.campaign-header h2,.catalog-section h2{font-size:2.5rem!important}}
    @media(prefers-reduced-motion:reduce){.intro-media video{opacity:0}.intro-media{background:#080808 url('assets/orbit-first.webp') center/contain no-repeat}.scrolly-hero{height:auto}.sticky-stage{position:relative;min-height:100svh}}

/* Opening film approved by Jonathan; keep the full frame visible. */
.intro-orbit{inset:0 0 0 34%;width:66%;display:flex;align-items:center;justify-content:center;background:#080808}
.intro-orbit:after{display:none}
.intro-orbit video{width:100%;height:100%;object-fit:contain}
.intro-copy{width:37%}
@media(max-width:700px){.intro-copy{width:100%}.intro-orbit{inset:43% 0 auto;width:100%;height:46%}}
@media(prefers-reduced-motion:reduce){.intro-orbit{background:#080808 url('assets/vision-360-poster.webp') center/contain no-repeat}}

/* A single continuous product stage: 360 → exploded view → assembly. */
.vision-story{height:600svh;position:relative;background:#080808}
.story-anchor{position:absolute;top:38%;scroll-margin-top:0}
.vision-stage{position:sticky;top:0;height:100svh;min-height:660px;overflow:hidden;display:flex;align-items:center;padding:110px 7vw 130px}
.vision-stage .intro-media{inset:0 0 0 36%;width:64%;height:100%;background:#080808}
.vision-stage .intro-media video{object-fit:contain;opacity:1}
.vision-stage .intro-copy{width:37%}
.story-bottom{position:absolute;bottom:42px;left:7vw;right:7vw;z-index:3}
.story-chapters{display:flex;gap:32px;font-size:.59rem;color:#77736d;letter-spacing:.05em}
.story-chapters .current{color:#dfc99f}
.story-progress{height:1px;background:#322d25;margin:18px 0 14px}
.story-progress i{height:1px;display:block;background:#c9a461;transform:scaleX(0);transform-origin:left}
.story-bottom .assembly-instruction{font-size:.6rem;color:#918a7f}
@media(max-width:700px){.vision-story{height:480svh}.vision-stage{min-height:0;height:100svh;padding:110px 7vw 90px;align-items:flex-start}.vision-stage .intro-copy{width:100%}.vision-stage .intro-copy .eyebrow{margin-bottom:18px}.vision-stage .intro-copy h1{font-size:clamp(2.8rem,10vw,4rem);margin-bottom:18px}.vision-stage .intro-copy p{margin-bottom:10px}.vision-stage .intro-media{inset:43% 0 auto;width:100%;height:39%}.story-bottom{bottom:66px}.story-chapters{gap:12px;font-size:.48rem;justify-content:space-between}.story-bottom .assembly-instruction{font-size:.52rem}.story-progress{margin:14px 0 12px}}
@media(max-height:650px) and (min-width:701px){.vision-stage{min-height:100svh}.vision-stage .intro-copy h1{font-size:3.5rem}}
@media(prefers-reduced-motion:reduce){.vision-story{height:auto}.vision-stage{position:relative}.vision-stage .intro-media{background:#080808}.vision-stage .intro-media video{opacity:1}.story-progress{display:none}}

/* Keep the campaign face and fitting gesture visible at every viewport. */
.campaign-frame{overflow:visible;aspect-ratio:auto;height:auto;background:#111}
.campaign-frame video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain}
.campaign-caption{position:relative;inset:auto;background:#111;border-left:1px solid #a88b5e;margin:0;padding:22px 28px}
@media(max-width:700px){.campaign-frame{height:auto}.campaign-caption{inset:auto;padding:18px 20px}.campaign-frame video{height:auto;aspect-ratio:16/9;object-fit:contain}}

/* The same photographed film, displayed as frames for reliable scroll scrubbing. */
#story-frame{display:block;width:100%;height:100%;object-fit:contain}
#story-frame[hidden],#assembly-video[hidden]{display:none!important}
.vision-stage .intro-media video{pointer-events:auto}

/* Chardon FX: archived Lab shader, champagne at rest, iris on pointer. */
.vision-stage,.spatial-section{isolation:isolate}
.spatial-section{position:relative;overflow:clip}
.fx-shader-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}
.vision-stage .intro-media{z-index:1}
.spatial-section>.eyebrow,.spatial-section>.section-title,.spatial-section>.section-intro,.spatial-section>.concept-note,.spatial-grid{position:relative;z-index:1}
.fx-shader--fallback{background:repeating-linear-gradient(90deg,#080808 0 8px,#30291e 8px 9px)}
.fx-shader--fallback .fx-shader-canvas{display:none}
html[data-fx-motion="reduce"] .fx-shader{background:repeating-linear-gradient(90deg,#080808 0 8px,#241f17 8px 9px)}
html[data-fx-motion="reduce"] .fx-shader-canvas{display:none}

/* Immersive product opening: a single large photographed object. */
.vision-stage{padding:0;min-height:0;height:100svh}
.vision-stage .intro-media{inset:0;width:100%;height:100%;background:transparent;z-index:1;pointer-events:none}
.vision-stage .intro-media img,.vision-stage .intro-media video{width:100%;height:100%;object-fit:contain;transform:translateY(7vh) scale(1.06);mask-image:linear-gradient(transparent 5%,black 32%,black 75%,transparent 96%);-webkit-mask-image:linear-gradient(transparent 5%,black 32%,black 75%,transparent 96%)}
.vision-stage .intro-copy{position:absolute;top:15%;left:7vw;width:86%;max-width:none;z-index:2;pointer-events:none;opacity:var(--opening-opacity,1)}
.vision-stage .intro-copy .eyebrow{display:block;margin-bottom:24px;font-size:.6rem;letter-spacing:.24em;animation:hero-arrive 1s both}
.vision-stage .intro-copy h1{font-size:clamp(5rem,9.5vw,10rem);line-height:.95;letter-spacing:-.065em;font-weight:300;margin-bottom:24px;animation:hero-arrive 1.2s .12s both}
.vision-stage .intro-copy h1 em{font-size:1em;color:#eadfc9}
.vision-stage .intro-copy p{font-size:.73rem;max-width:300px;line-height:1.8;animation:hero-arrive 1s .28s both}
.vision-stage .intro-copy .text-link{position:absolute;top:14px;right:0;pointer-events:auto;animation:hero-arrive 1s .4s both}
.vision-stage[data-chapter="exploded"] .intro-copy,.vision-stage[data-chapter="assembly"] .intro-copy{top:16%;bottom:auto;width:42%;}
.vision-stage[data-chapter="exploded"] .intro-copy h1,.vision-stage[data-chapter="assembly"] .intro-copy h1{font-size:clamp(2.5rem,4.8vw,5rem);text-shadow:0 2px 30px #080808}
.vision-stage[data-chapter="exploded"] .intro-copy p,.vision-stage[data-chapter="assembly"] .intro-copy p{text-shadow:0 1px 12px #080808}
.vision-stage[data-chapter="exploded"] .intro-copy .eyebrow,.vision-stage[data-chapter="assembly"] .intro-copy .eyebrow,.vision-stage[data-chapter="exploded"] .intro-copy .text-link,.vision-stage[data-chapter="assembly"] .intro-copy .text-link{display:none}
.story-bottom{bottom:35px}
.vision-stage .fx-shader-canvas{opacity:.48;mask-image:linear-gradient(black,transparent 45%,transparent 65%,black);-webkit-mask-image:linear-gradient(black,transparent 45%,transparent 65%,black)}
@keyframes hero-arrive{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:700px){.vision-stage .intro-copy{top:17%;left:7vw;width:86%}.vision-stage .intro-copy h1{font-size:clamp(3.6rem,16vw,6rem);line-height:1.02;margin-bottom:18px}.vision-stage .intro-copy .eyebrow{font-size:.48rem;letter-spacing:.12em;margin-bottom:24px}.vision-stage .intro-copy p{font-size:.7rem;max-width:260px}.vision-stage .intro-copy .text-link{position:static;margin-top:8px}.vision-stage .intro-media{inset:33% 0 auto;width:100%;height:53%}.vision-stage .intro-media img,.vision-stage .intro-media video{transform:scale(1.08);mask-image:linear-gradient(transparent,black 15%,black 85%,transparent);-webkit-mask-image:linear-gradient(transparent,black 15%,black 85%,transparent)}.vision-stage[data-chapter="exploded"] .intro-copy,.vision-stage[data-chapter="assembly"] .intro-copy{top:18%;bottom:auto;width:86%}.vision-stage[data-chapter="exploded"] .intro-copy h1,.vision-stage[data-chapter="assembly"] .intro-copy h1{font-size:2.8rem}.story-bottom{bottom:66px}}
@media(prefers-reduced-motion:reduce){.vision-stage .intro-copy{opacity:1!important}.vision-stage .intro-copy *{animation:none!important}.vision-stage .intro-media video{pointer-events:auto}}

.vision-stage .intro-copy{transition:opacity .3s ease}
@media(prefers-reduced-motion:reduce){.vision-stage .intro-copy{transition:none}}

/* Scroll reveals live in a reserved upper zone, clear of the complete product. */
.vision-stage .intro-copy,.vision-stage[data-chapter="exploded"] .intro-copy,.vision-stage[data-chapter="assembly"] .intro-copy{top:13%;bottom:auto;left:7vw;width:86%;max-width:none;transition:none}
.vision-stage .intro-copy h1{font-size:clamp(4rem,8vw,7.5rem);line-height:.96;margin-bottom:15px;animation:none}
.vision-stage .intro-copy .eyebrow,.vision-stage .intro-copy p,.vision-stage .intro-copy .text-link{animation:none}
.story-line{display:block;will-change:transform,opacity}
.vision-stage[data-chapter="exploded"] .intro-copy h1,.vision-stage[data-chapter="assembly"] .intro-copy h1{font-size:clamp(2.7rem,5.2vw,5rem);line-height:1.02}
.vision-stage .intro-media{inset:27% 0 auto;width:100%;height:64%}
.vision-stage .intro-media img,.vision-stage .intro-media video{transform:scale(1.03);mask-image:linear-gradient(transparent,black 18%,black 86%,transparent);-webkit-mask-image:linear-gradient(transparent,black 18%,black 86%,transparent)}
@media(max-width:700px){.vision-stage .intro-copy,.vision-stage[data-chapter="exploded"] .intro-copy,.vision-stage[data-chapter="assembly"] .intro-copy{top:15%;width:86%}.vision-stage .intro-copy h1{font-size:clamp(3.2rem,14vw,5rem);line-height:1.02}.vision-stage[data-chapter="exploded"] .intro-copy h1,.vision-stage[data-chapter="assembly"] .intro-copy h1{font-size:2.55rem}.vision-stage .intro-copy .eyebrow{margin-bottom:19px}.vision-stage .intro-media{inset:42% 0 auto;height:43%;width:100%}.vision-stage .intro-copy p{font-size:.68rem;line-height:1.65}.vision-stage .intro-copy .text-link{margin-top:0}}
@media(prefers-reduced-motion:reduce){.story-line{opacity:1!important;transform:none!important}.vision-stage .intro-copy p,.vision-stage .intro-copy .text-link{opacity:1!important}}
@media(max-height:750px) and (min-width:701px){.vision-stage .intro-copy{top:14%}.vision-stage .intro-copy h1{font-size:4rem}.vision-stage .intro-copy .eyebrow{margin-bottom:12px}.vision-stage .intro-copy p{font-size:.66rem}.vision-stage .intro-media{inset:30% 0 auto;height:58%}.vision-stage[data-chapter="exploded"] .intro-copy h1,.vision-stage[data-chapter="assembly"] .intro-copy h1{font-size:3rem}}

footer a{color:var(--text-cream,#f5f2eb);text-underline-offset:5px}footer a:focus-visible{outline:2px solid #dec394;outline-offset:5px}