:root{
    /* Liquid Glass design system (ui-ux-pro-max: premium black + gold, WCAG-adjusted) */
    --ink:#1C1917;
    --fg:#0C0A09;
    --paper:#FAFAF9;
    --sub:#57534E;
    --border:#D6D3D1;
    --accent:#A16207;
    --gold:#C9A84C;
    --glass-bg:rgba(255,255,255,.55);
    --glass-bg-strong:rgba(255,255,255,.72);
    --glass-border:rgba(255,255,255,.65);
    --glass-dark:rgba(18,15,13,.5);
    --glass-dark-border:rgba(255,255,255,.14);
    --glass-blur:18px;
    /* text on dark surfaces (film / story / footer) */
    --on-dark:#FAFAF9;
    --on-dark-2:#C7C0B8;
    --on-dark-3:#8F897F;
    /* radius scale — media 20 · card 24 · panel 32 · pill */
    --r-md:20px;
    --r-lg:24px;
    --r-xl:32px;
    --r-pill:999px;
    /* elevation scale */
    --e0:0 4px 12px rgba(28,25,23,.18);
    --e1:0 6px 20px rgba(28,25,23,.08);
    --e2:0 14px 36px rgba(28,25,23,.12);
    --e3:0 24px 56px rgba(28,25,23,.16);
    --e-dark:0 8px 40px rgba(0,0,0,.42);
    --depth-shadow:var(--e1);
    --radius:var(--r-lg);
    --ease-fluid:cubic-bezier(.22,1,.36,1);
    --serif:'Playfair Display','Pretendard',serif;
    --maxw:1240px;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  ::selection{background:var(--gold);color:var(--fg)}
  body{
    font-family:'Pretendard',-apple-system,BlinkMacSystemFont,sans-serif;
    background:var(--paper);color:var(--fg);
    line-height:1.6;letter-spacing:-0.01em;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img,video{display:block;max-width:100%}
  a{color:inherit;text-decoration:none}
  a,button{cursor:pointer}
  :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}

  /* ── iridescent aurora backdrop ── */
  .aurora{
    position:fixed;inset:-20%;z-index:-1;pointer-events:none;
    filter:saturate(1.15);
  }
  .aurora i{
    position:absolute;border-radius:50%;opacity:.5;
    will-change:transform;
  }
  .aurora i:nth-child(1){
    width:52vw;height:52vw;left:-10vw;top:-6vw;
    background:radial-gradient(circle at 35% 35%, #F0D9A0 0%, rgba(240,217,160,0) 62%);
    animation:drift1 64s var(--ease-fluid) infinite alternate;
  }
  .aurora i:nth-child(2){
    width:46vw;height:46vw;right:-12vw;top:16vh;
    background:radial-gradient(circle at 60% 40%, #B7E0DB 0%, rgba(183,224,219,0) 62%);
    animation:drift2 76s var(--ease-fluid) infinite alternate;
  }
  .aurora i:nth-child(3){
    width:44vw;height:44vw;left:16vw;bottom:-14vh;
    background:radial-gradient(circle at 50% 50%, #F2C3B4 0%, rgba(242,195,180,0) 62%);
    animation:drift3 70s var(--ease-fluid) infinite alternate;
  }
  .aurora i:nth-child(4){
    width:36vw;height:36vw;right:8vw;bottom:4vh;
    background:radial-gradient(circle at 45% 55%, #D5CCF0 0%, rgba(213,204,240,0) 60%);
    animation:drift1 88s var(--ease-fluid) infinite alternate-reverse;
  }
  @keyframes drift1{from{transform:translate3d(0,0,0) rotate(0deg)}to{transform:translate3d(9vw,6vh,0) rotate(28deg)}}
  @keyframes drift2{from{transform:translate3d(0,0,0) rotate(0deg)}to{transform:translate3d(-8vw,10vh,0) rotate(-24deg)}}
  @keyframes drift3{from{transform:translate3d(0,0,0) rotate(0deg)}to{transform:translate3d(7vw,-8vh,0) rotate(20deg)}}

  /* ── glass primitives ── */
  .glass{
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    box-shadow:var(--depth-shadow), inset 0 1px 0 rgba(255,255,255,.7);
    border-radius:var(--radius);
  }
  .glass-dark{
    background:var(--glass-dark);
    border:1px solid var(--glass-dark-border);
    box-shadow:var(--e-dark), inset 0 1px 0 rgba(255,255,255,.12);
    border-radius:var(--radius);
    color:#FAFAF9;
  }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
    .glass{-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(160%);backdrop-filter:blur(var(--glass-blur)) saturate(160%)}
    .glass-dark{-webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%)}
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
    .glass{background:rgba(255,255,255,.92)}
    .glass-dark{background:rgba(18,15,13,.9)}
  }
  /* iridescent gradient ring on hover (double background technique, static = cheap) */
  .iri{position:relative;transition:transform .3s var(--ease-fluid), box-shadow .3s var(--ease-fluid)}
  .iri::before{
    content:'';position:absolute;inset:0;border-radius:inherit;padding:2px;
    background:linear-gradient(125deg,#E8C97D,#F2C3B4 30%,#B7E0DB 62%,#D5CCF0 90%);
    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;
    opacity:0;transition:opacity .3s var(--ease-fluid);pointer-events:none;
  }
  .iri:hover{transform:translateY(-4px);box-shadow:var(--e3)}
  .iri:hover::before{opacity:1}

  /* ── type ── */
  .en-serif{font-family:var(--serif);font-style:italic;font-weight:500;letter-spacing:.02em}
  h1,h2,h3{letter-spacing:-0.03em;word-break:keep-all}

  /* ── announcement ── */
  .announce{
    background:var(--fg);color:#FAFAF9;text-align:center;
    font-size:13px;letter-spacing:.06em;padding:12px 16px;
    position:relative;z-index:110;
  }
  .announce b{color:var(--gold);font-weight:600}

  /* ── floating glass header ── */
  header{
    position:fixed;top:0;left:0;right:0;z-index:100;
    padding:16px 20px 0;
    transition:top .3s var(--ease-fluid);
  }
  body.has-announce header{top:44px}
  header.scrolled{top:0}
  .nav{
    display:flex;align-items:center;justify-content:space-between;
    height:64px;max-width:var(--maxw);margin:0 auto;padding:0 12px 0 28px;
    border-radius:var(--r-pill);
    transition:box-shadow .3s;
  }
  header.scrolled .nav{box-shadow:var(--e2), inset 0 1px 0 rgba(255,255,255,.7)}
  /* header inverts to dark glass while over a dark full-bleed section */
  header.on-dark .nav{
    background:var(--glass-dark);border-color:var(--glass-dark-border);
    box-shadow:var(--e-dark), inset 0 1px 0 rgba(255,255,255,.12);
  }
  header.on-dark .logo{color:#FAFAF9}
  header.on-dark .nav-links{color:rgba(250,250,249,.82)}
  header.on-dark .nav-links a::after{background:var(--gold)}
  header.on-dark .btn{background:#FAFAF9;color:var(--fg);border-color:#FAFAF9}
  .logo{font-size:20px;font-weight:800;letter-spacing:.32em;color:var(--fg)}
  .nav-links{display:flex;gap:24px;font-size:14px;font-weight:500;color:#3F3B36}
  .nav-links a{position:relative;padding:4px 0}
  .nav-links a::after{
    content:'';position:absolute;left:0;bottom:0;width:0;height:2px;
    background:var(--accent);transition:width .3s var(--ease-fluid);
  }
  .nav-links a:hover::after{width:100%}

  /* ── buttons ── */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:12px;
    padding:16px 32px;border-radius:var(--r-pill);font-size:14px;font-weight:600;
    background:var(--ink);color:#FAFAF9;border:1px solid var(--ink);
    transition:transform .3s var(--ease-fluid), box-shadow .3s var(--ease-fluid);
  }
  .btn:hover{transform:translateY(-2px);box-shadow:var(--e2)}
  .btn:active{transform:scale(.97)}
  .btn.sm{padding:8px 24px;font-size:13px}
  .btn.glass-btn{
    background:rgba(255,255,255,.28);color:#fff;border:1px solid rgba(255,255,255,.5);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
  }
  @supports (backdrop-filter: blur(1px)){.btn.glass-btn{backdrop-filter:blur(12px) saturate(150%);-webkit-backdrop-filter:blur(12px) saturate(150%)}}
  .btn.glass-btn:hover{background:rgba(255,255,255,.4)}
  .btn.light{background:#FAFAF9;color:var(--fg);border-color:#FAFAF9}
  .btn.ghost{background:transparent;color:inherit;border-color:currentColor}
  .btn .arr{transition:transform .3s var(--ease-fluid)}
  .btn:hover .arr{transform:translateX(4px)}

  /* ── scroll-expansion hero ── */
  .xhero{height:280svh;position:relative}
  .xh-sticky{position:sticky;top:0;height:100svh;overflow:hidden}
  .xh-media{
    position:absolute;inset:0;background:#0C0A09;
    will-change:clip-path;
    clip-path:inset(30svh 38vw 30svh 38vw round 28px);
  }
  .xh-media video{width:100%;height:100%;object-fit:cover;object-position:center 40%;will-change:transform}
  .xh-media::after{
    content:'';position:absolute;inset:0;opacity:var(--xp,0);
    background:linear-gradient(to top, rgba(8,6,5,.55) 0%, rgba(8,6,5,.08) 55%, rgba(8,6,5,.15) 100%);
  }
  .xh-intro{
    position:absolute;inset:0;z-index:2;pointer-events:none;
    display:flex;flex-direction:column;align-items:center;
    padding-top:11svh;text-align:center;
  }
  .xh-kicker{
    font-family:var(--serif);font-style:italic;font-weight:500;
    font-size:clamp(16px,1.6vw,20px);color:var(--accent);letter-spacing:.05em;
    margin-bottom:8px;will-change:transform,opacity;
  }
  .xh-title{font-weight:800;font-size:clamp(30px,4vw,56px);line-height:1.16;color:var(--fg)}
  .xh-line{display:block;will-change:transform}
  .xh-hint{
    position:absolute;bottom:5svh;left:50%;transform:translateX(-50%);
    display:flex;flex-direction:column;align-items:center;gap:12px;
    font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--sub);
  }
  .xh-hint::after{
    content:'';width:1px;height:44px;background:var(--sub);opacity:.6;
    animation:cue 2.2s var(--ease-fluid) infinite;transform-origin:top;
  }
  .xh-content{
    position:absolute;inset:0;z-index:3;display:flex;align-items:flex-end;
    opacity:0;transform:translateY(24px);pointer-events:none;
    will-change:opacity,transform;color:#fff;
  }
  .hero-inner{
    position:relative;width:100%;
    max-width:var(--maxw);margin:0 auto;padding:0 28px 64px;
  }
  .hero-panel{
    max-width:640px;padding:44px 48px;border-radius:var(--r-lg);
  }
  .xh-content .kicker{
    font-family:var(--serif);font-style:italic;font-weight:500;
    font-size:clamp(18px,1.8vw,22px);color:#F0D9A0;letter-spacing:.05em;
    margin-bottom:16px;
  }
  h1{
    font-size:clamp(36px,4.6vw,64px);line-height:1.1;font-weight:800;margin-bottom:24px;
  }
  .xh-content p.lead{
    font-size:clamp(16px,1.3vw,18px);color:rgba(255,255,255,.85);
    max-width:480px;margin-bottom:32px;word-break:keep-all;
  }
  .hero-ctas{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:32px}
  .hero-proof{display:flex;gap:12px;flex-wrap:wrap}
  .chip{
    display:inline-flex;align-items:center;gap:8px;
    padding:8px 16px;border-radius:var(--r-pill);font-size:13px;font-weight:600;
    background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.32);
    color:rgba(255,255,255,.92);letter-spacing:.02em;
  }
  @supports (backdrop-filter: blur(1px)){.chip{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}}
  .stars{color:var(--gold);letter-spacing:2px;font-size:13px}
  @keyframes cue{0%{transform:scaleY(0)}55%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

  /* ── product film (scroll-scrubbed) ── */
  .film{position:relative;height:420svh;background:#050403}
  .film-sticky{
    position:sticky;top:0;height:100svh;overflow:hidden;background:#050403;
    display:flex;align-items:center;
  }
  .film-media{position:absolute;inset:0}
  .film-media video,.film-media img{
    width:100%;height:100%;object-fit:cover;object-position:center;
  }
  .film-media::after{
    content:'';position:absolute;inset:0;
    background:
      linear-gradient(100deg, rgba(5,4,3,.92) 0%, rgba(5,4,3,.72) 26%, rgba(5,4,3,0) 58%),
      radial-gradient(120% 100% at 50% 50%, transparent 45%, rgba(5,4,3,.55) 100%);
  }
  .film-inner{
    position:relative;z-index:2;width:100%;
    max-width:var(--maxw);margin:0 auto;padding:0 28px;
  }
  .film-stage{position:relative;height:56svh;max-width:520px}
  .beat{
    position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
    opacity:0;will-change:opacity,transform;pointer-events:none;
  }
  .beat-no{
    font-family:var(--serif);font-style:italic;font-size:18px;
    color:var(--gold);letter-spacing:.16em;margin-bottom:20px;
  }
  .beat-big{
    font-family:var(--serif);font-weight:600;line-height:.94;
    font-size:clamp(58px,8.4vw,132px);letter-spacing:-0.02em;
    background:linear-gradient(150deg,#FFF7E4 0%,#E8C97D 42%,#A16207 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    margin-bottom:24px;
  }
  .beat-sub{
    font-size:clamp(16px,1.5vw,20px);font-weight:600;color:#F5F1EA;
    margin-bottom:8px;word-break:keep-all;
  }
  .beat-desc{
    font-size:clamp(14px,1.2vw,16px);color:var(--on-dark-2);
    max-width:400px;word-break:keep-all;line-height:1.65;
  }
  .film-label{
    position:absolute;left:28px;top:calc(50% - 30svh);z-index:3;
    font-family:var(--serif);font-style:italic;font-size:16px;color:var(--gold);
    letter-spacing:.05em;opacity:.9;
  }
  .film-rail{
    position:absolute;right:40px;top:50%;transform:translateY(-50%);z-index:3;
    display:flex;flex-direction:column;gap:12px;align-items:center;
  }
  .film-rail i{
    width:2px;height:44px;background:rgba(255,255,255,.18);border-radius:2px;
    position:relative;overflow:hidden;
  }
  .film-rail i b{
    position:absolute;inset:0;background:var(--gold);transform-origin:top;
    transform:scaleY(0);transition:transform .3s var(--ease-fluid);
  }
  .film-cap{
    position:absolute;left:0;right:0;bottom:6svh;z-index:3;text-align:center;
    font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:rgba(255,255,255,.45);
    will-change:opacity;
  }
  .film-cta{
    position:absolute;inset:0;z-index:4;display:flex;align-items:center;
    opacity:0;pointer-events:none;will-change:opacity;
  }
  .film-cta-inner{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 28px}
  .film-cta-panel{
    padding:48px 48px 44px;border-radius:var(--r-xl);max-width:520px;
    will-change:transform;
  }
  .film-cta .eyebrow{color:var(--gold)}
  .film-cta .price-line{justify-content:flex-start}
  .film-cta .cta-btns{justify-content:flex-start}
  .film-cta h2{
    color:#FAFAF9;font-size:clamp(28px,3.4vw,48px);margin-bottom:16px;
  }
  .film-cta p{color:var(--on-dark-2);font-size:16px;margin-bottom:32px;word-break:keep-all}
  .film-cta .price-line{
    display:flex;align-items:baseline;gap:12px;justify-content:center;margin-bottom:28px;
  }
  .film-cta .price-line .now{font-size:30px;font-weight:800;color:#FAFAF9}
  .film-cta .price-line .was{font-size:16px;color:var(--on-dark-3);text-decoration:line-through}
  .film-cta .price-line .off{font-size:16px;font-weight:700;color:var(--gold)}
  .film-cta .cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

  /* ── marquee ── */
  .marquee{
    margin:-32px 20px 0;position:relative;z-index:5;
    overflow:hidden;white-space:nowrap;padding:16px 0;border-radius:var(--r-pill);
  }
  .marquee-track{display:inline-block;animation:scroll 32s linear infinite}
  .marquee span{
    font-size:13px;font-weight:600;letter-spacing:.2em;color:#3F3B36;
    margin:0 32px;text-transform:uppercase;
  }
  .marquee .dot{color:var(--accent)}
  @keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  /* ── sections ── */
  section{padding:120px 0;position:relative}
  /* anchor targets must clear the fixed header (announce 44 + nav 64 + gap) */
  section[id],div[id].xhero,.film[id]{scroll-margin-top:132px}
  .sec-head{max-width:640px;margin-bottom:60px}
  .eyebrow{
    display:flex;align-items:center;gap:16px;
    font-family:var(--serif);font-style:italic;font-size:18px;font-weight:500;
    color:var(--accent);margin-bottom:16px;letter-spacing:.05em;
  }
  .eyebrow::before{content:'';width:36px;height:1px;background:linear-gradient(90deg,var(--gold),transparent)}
  h2{font-size:clamp(30px,3.6vw,50px);font-weight:800;line-height:1.22;margin-bottom:16px}
  .sec-head p{color:var(--sub);font-size:16px;word-break:keep-all}

  /* ── colors ── */
  .color-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
  .color-frame{padding:12px;border-radius:var(--r-xl)}
  .color-img{
    border-radius:var(--r-md);overflow:hidden;aspect-ratio:4/5;position:relative;
  }
  .color-img img{
    width:100%;height:100%;object-fit:cover;position:absolute;inset:0;
    opacity:0;transition:opacity .5s var(--ease-fluid), transform .5s var(--ease-fluid);
    transform:scale(1.04);
  }
  .color-img img.active{opacity:1;transform:scale(1)}
  .color-info{padding:44px 48px}
  .color-info .c-en{
    font-family:var(--serif);font-style:italic;font-size:20px;
    color:var(--c-accent,#A16207);margin-bottom:8px;transition:color .3s;
  }
  .color-info h3{font-size:38px;font-weight:800;margin-bottom:12px}
  .color-info p{color:var(--sub);font-size:16px;max-width:380px;margin-bottom:32px;word-break:keep-all;min-height:52px}
  .swatches{display:flex;gap:16px;margin-bottom:32px}
  .swatch{
    width:48px;height:48px;border-radius:50%;border:2px solid rgba(255,255,255,.8);
    box-shadow:var(--e0), inset 0 1px 0 rgba(255,255,255,.4);
    outline:2px solid transparent;outline-offset:4px;
    transition:outline-color .2s, transform .3s var(--ease-fluid);
  }
  .swatch:hover{transform:scale(1.12)}
  .swatch:active{transform:scale(.95)}
  .swatch.active{outline-color:var(--ink)}
  .sw-onyx{background:#1A1A1A}
  .sw-oat{background:#D8C7AC}
  .sw-coral{background:#E8927C}
  .sw-aqua{background:#A8D4D4}

  /* ── parallax band ── */
  .band{
    position:relative;height:66vh;min-height:440px;overflow:hidden;
    display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;
  }
  .band .band-img{position:absolute;inset:-12% 0;will-change:transform}
  .band .band-img img{width:100%;height:100%;object-fit:cover}
  .band::after{content:'';position:absolute;inset:0;background:rgba(8,6,5,.3)}
  .band-quote{
    position:relative;z-index:2;padding:44px 56px;margin:0 28px;max-width:760px;
  }
  .band-quote .q{
    font-weight:600;font-size:clamp(24px,3.2vw,40px);line-height:1.4;word-break:keep-all;
  }
  .band-quote .a{
    margin-top:16px;font-family:var(--serif);font-style:italic;font-size:16px;
    letter-spacing:.22em;text-transform:uppercase;color:#F0D9A0;
  }

  /* ── sizes ── */
  .size-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}
  .size-card{overflow:hidden;border-radius:var(--r-xl);display:flex;flex-direction:column;position:relative}
  .size-card .img{aspect-ratio:1/1;overflow:hidden;border-radius:var(--r-md);margin:12px}
  .size-card .img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease-fluid)}
  .size-card:hover .img img{transform:scale(1.04)}
  .size-card .body{padding:24px 32px 32px;display:flex;flex-direction:column;gap:8px;flex:1}
  .size-card .oz{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--sub)}
  .size-card h3{font-size:26px;font-weight:800}
  .size-card .desc{color:var(--sub);font-size:16px;margin-bottom:16px;word-break:keep-all}
  .price-row{display:flex;align-items:baseline;gap:12px;margin-bottom:20px}
  .price{font-size:26px;font-weight:800}
  .price-was{font-size:16px;color:#A8A29E;text-decoration:line-through}
  .price-off{font-size:14px;font-weight:700;color:#B91C1C}
  .badge{
    position:absolute;top:24px;left:24px;z-index:2;
    background:rgba(28,25,23,.8);color:#fff;font-size:12px;font-weight:700;
    letter-spacing:.14em;padding:8px 16px;border-radius:var(--r-pill);
    border:1px solid rgba(255,255,255,.25);
  }
  @supports (backdrop-filter: blur(1px)){.badge{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}}
  .badge.soon{background:rgba(201,168,76,.85);color:var(--fg)}
  .soon-img{filter:saturate(.6);opacity:.94}
  .mt-auto{margin-top:auto}

  /* ── features ── */
  .feat-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start}
  .feat-frame{padding:12px;border-radius:var(--r-xl);position:sticky;top:120px}
  .feat-img{border-radius:var(--r-md);overflow:hidden;aspect-ratio:4/5}
  .feat-img img{width:100%;height:100%;object-fit:cover}
  .feat-list{display:flex;flex-direction:column;gap:16px}
  .feat{
    display:flex;gap:24px;padding:28px 32px;border-radius:var(--r-lg);
    transition:transform .3s var(--ease-fluid), box-shadow .3s var(--ease-fluid);
  }
  .feat:hover{transform:translateY(-3px);box-shadow:var(--e2)}
  .feat .num{
    font-family:var(--serif);font-style:italic;
    font-size:24px;color:var(--accent);padding-top:1px;min-width:40px;
  }
  .feat h3{font-size:20px;font-weight:700;margin-bottom:8px}
  .feat p{color:var(--sub);font-size:16px;word-break:keep-all}

  /* ── gallery marquee ── */
  #gallery{padding-bottom:80px}
  .g-marquee{overflow:hidden;margin-top:8px}
  .g-track{display:flex;gap:20px;width:max-content;animation:gscroll 48s linear infinite;padding:8px 0}
  .g-track.reverse{animation-name:gscrollr;animation-duration:56s}
  .g-marquee:hover .g-track{animation-play-state:paused}
  @keyframes gscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @keyframes gscrollr{from{transform:translateX(-50%)}to{transform:translateX(0)}}
  .g-item{
    flex:0 0 auto;width:320px;aspect-ratio:4/5;border-radius:var(--r-md);overflow:hidden;position:relative;
    border:1px solid rgba(255,255,255,.5);box-shadow:var(--e1);
  }
  .g-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease-fluid)}
  .g-item:hover img{transform:scale(1.05)}
  .g-item .tag{
    position:absolute;left:16px;bottom:16px;z-index:2;
    background:rgba(255,255,255,.3);border:1px solid rgba(255,255,255,.45);color:#fff;
    font-size:12px;letter-spacing:.14em;padding:8px 16px;border-radius:var(--r-pill);font-weight:600;
    opacity:0;transform:translateY(6px);transition:opacity .3s, transform .3s var(--ease-fluid);
  }
  @supports (backdrop-filter: blur(1px)){.g-item .tag{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}}
  .g-item:hover .tag{opacity:1;transform:none}
  .g-row-gap{height:20px}

  /* ── reviews ── */
  /* rating summary sits inside the grid so 1 + 5 = a full 3x2 */
  .rating-card{
    display:flex;flex-direction:column;justify-content:center;
    padding:32px;gap:4px;
  }
  .rating-big{
    font-family:var(--serif);font-style:italic;font-weight:600;
    font-size:72px;line-height:1;
    background:linear-gradient(120deg,#A16207,#C9A84C 60%,#E8C97D);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .rating-card .stars{font-size:16px;margin:8px 0 4px}
  .rating-meta{font-size:14px;color:var(--sub);word-break:keep-all}
  .review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .review{padding:32px;display:flex;flex-direction:column;gap:16px}
  .review p{font-size:16px;color:#3F3B36;word-break:keep-all}
  .review .who{font-size:13px;color:var(--sub);margin-top:auto;font-family:var(--serif);font-style:italic}

  /* ── story ── */
  #story{background:var(--fg);color:#FAFAF9;overflow:hidden}
  #story::before,#story::after{
    content:'';position:absolute;border-radius:50%;pointer-events:none;opacity:.35;
  }
  #story::before{
    width:48vw;height:48vw;left:-14vw;top:-10vw;
    background:radial-gradient(circle, rgba(201,168,76,.5) 0%, transparent 62%);
  }
  #story::after{
    width:40vw;height:40vw;right:-10vw;bottom:-14vw;
    background:radial-gradient(circle, rgba(126,200,200,.35) 0%, transparent 62%);
  }
  .story-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;position:relative;z-index:2}
  .story-frame{padding:12px;border-radius:var(--r-xl)}
  .story-img{border-radius:var(--r-md);overflow:hidden;aspect-ratio:4/5}
  .story-img img{width:100%;height:100%;object-fit:cover}
  #story h2{color:#FAFAF9}
  #story .story-copy{padding:48px}
  #story p{color:var(--on-dark-2);font-size:16px;margin-bottom:16px;word-break:keep-all}
  .story-sign{
    font-family:var(--serif);font-style:italic;font-size:24px;color:var(--gold);margin-top:8px;
  }

  /* ── instagram ── */
  #instagram{text-align:center}
  #instagram .eyebrow{justify-content:center}
  #instagram .eyebrow::before{display:none}
  #instagram h2 a{
    font-family:var(--serif);font-style:italic;font-weight:600;letter-spacing:.01em;
    background:linear-gradient(120deg,#A16207,#C9A84C 55%,#E8927C);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    transition:opacity .3s;
  }
  #instagram h2 a:hover{opacity:.75}
  #instagram .sub{color:var(--sub);margin-bottom:48px}
  .ig-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:44px}
  .ig-item{
    position:relative;aspect-ratio:1/1;border-radius:var(--r-md);overflow:hidden;display:block;
    border:1px solid rgba(255,255,255,.55);box-shadow:var(--e1);
  }
  .ig-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease-fluid)}
  .ig-item::after{
    content:'';position:absolute;inset:0;background:rgba(12,10,9,0);transition:background .3s;
  }
  .ig-item .ig-ico{
    position:absolute;inset:0;margin:auto;width:36px;height:36px;z-index:2;
    opacity:0;transform:scale(.8);transition:opacity .3s, transform .3s var(--ease-fluid);color:#fff;
  }
  .ig-item:hover img{transform:scale(1.07)}
  .ig-item:hover::after{background:rgba(12,10,9,.35)}
  .ig-item:hover .ig-ico{opacity:1;transform:scale(1)}

  /* ── cta ── */
  #cta{padding:128px 28px}
  .cta-panel{
    max-width:960px;margin:0 auto;text-align:center;
    padding:88px 40px;border-radius:var(--r-xl);position:relative;overflow:hidden;
  }
  .cta-panel::before{
    content:'';position:absolute;inset:0;z-index:-1;
    background:
      radial-gradient(60% 90% at 12% 10%, rgba(240,217,160,.75) 0%, transparent 60%),
      radial-gradient(55% 80% at 88% 20%, rgba(183,224,219,.7) 0%, transparent 60%),
      radial-gradient(70% 90% at 50% 100%, rgba(242,195,180,.65) 0%, transparent 65%),
      #FAF7F0;
  }
  #cta .eyebrow{justify-content:center}
  #cta .eyebrow::before{display:none}
  #cta h2{margin-bottom:16px}
  #cta p{color:#57534E;margin-bottom:40px}
  .cta-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

  /* ── footer ── */
  footer{background:var(--fg);color:var(--on-dark-3);padding:64px 0 40px}
  .foot-top{
    display:flex;justify-content:space-between;align-items:flex-start;gap:32px;flex-wrap:wrap;
    padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:28px;
  }
  .foot-top .logo{color:#FAFAF9;font-size:18px;margin-bottom:8px;display:block}
  .foot-tag{font-size:14px;max-width:260px;word-break:keep-all}
  .foot-cols{display:flex;gap:64px;flex-wrap:wrap}
  .foot-col h4{color:#FAFAF9;font-size:13px;letter-spacing:.18em;margin-bottom:16px;font-weight:600}
  .foot-col a{display:block;font-size:14px;padding:8px 0;transition:color .2s}
  .foot-col a:hover{color:#FAFAF9}
  .foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:13px}
  .sns a{
    width:44px;height:44px;border:1px solid rgba(255,255,255,.2);border-radius:50%;
    display:inline-flex;align-items:center;justify-content:center;color:#FAFAF9;
    transition:background .3s,border-color .3s,transform .3s var(--ease-fluid);
  }
  .sns a:hover{background:var(--gold);border-color:var(--gold);color:var(--fg);transform:translateY(-2px)}

  /* ── reveal (transform/opacity only, staggered by JS) ── */
  .reveal{opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease-fluid),transform .5s var(--ease-fluid)}
  .reveal.in{opacity:1;transform:none}
  .reveal.no-anim{transition:none}

  /* ── reduced motion ── */
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto}
    .aurora i,.marquee-track,.g-track,.xh-hint::after,.film-cap{animation:none !important}
    .film-cap{display:none}
    .reveal{opacity:1;transform:none;transition:none}
    .band .band-img{transform:none !important}
    *{transition-duration:.01ms !important}
  }

  /* ── responsive ── */
  @media(max-width:1024px){
    :root{--glass-blur:14px}
  }
  @media(max-width:900px){
    .nav-links{display:none}
    .color-grid,.feat-grid,.story-grid{grid-template-columns:1fr;gap:36px}
    .size-grid{grid-template-columns:1fr}
    .review-grid{grid-template-columns:1fr}
    .rating-big{font-size:58px}
    .ig-grid{grid-template-columns:repeat(2,1fr)}
    .feat-frame{position:static}
    section{padding:76px 0}
    .g-item{width:240px}
    .hero-panel{padding:32px 28px}
    .xh-intro{padding-top:13svh}
    .film{height:340svh}
    .film-media::after{
      background:
        linear-gradient(180deg, rgba(5,4,3,.55) 0%, rgba(5,4,3,.2) 30%, rgba(5,4,3,.9) 78%),
        radial-gradient(120% 100% at 50% 50%, transparent 40%, rgba(5,4,3,.6) 100%);
    }
    .film-sticky{align-items:flex-end}
    /* 16:9 film in a tall viewport crops hard — keep the tumbler (≈67% across) centered */
    .film-media video,.film-media img{object-position:67% 42%}
    .film-inner{padding-bottom:12svh}
    .film-stage{height:44svh;max-width:none}
    .film-rail{right:20px}
    .film-label{top:14svh;left:28px}
    .film-cta-panel{padding:40px 24px 32px}
    .film-cta .cta-btns .btn{width:100%}
    .hero-inner{padding-bottom:48px}
    .color-info{padding:32px 28px}
    .band-quote{padding:32px 24px}
    .rating-big{font-size:58px}
    .marquee{margin:-32px 12px 0}
    .cta-panel{padding:64px 24px}
    .aurora i{opacity:.4}
  }

  /* ═══ multipage additions ═══ */

  /* mobile nav */
  .nav-toggle{
    display:none;width:44px;height:44px;border:none;background:none;color:inherit;
    align-items:center;justify-content:center;
  }
  .nav-toggle i{
    display:block;width:20px;height:2px;background:currentColor;position:relative;
    transition:background .2s;
  }
  .nav-toggle i::before,.nav-toggle i::after{
    content:'';position:absolute;left:0;width:20px;height:2px;background:currentColor;
    transition:transform .3s var(--ease-fluid);
  }
  .nav-toggle i::before{top:-6px}
  .nav-toggle i::after{top:6px}
  body.nav-open .nav-toggle i{background:transparent}
  body.nav-open .nav-toggle i::before{transform:translateY(6px) rotate(45deg)}
  body.nav-open .nav-toggle i::after{transform:translateY(-6px) rotate(-45deg)}
  .nav-links a[aria-current="page"]{color:var(--accent);font-weight:600}
  header.on-dark .nav-links a[aria-current="page"]{color:var(--gold)}

  /* page hero (inner pages) */
  .page-head{padding:180px 0 72px;position:relative}
  .page-head .eyebrow{margin-bottom:20px}
  .page-head h1{font-size:clamp(36px,5vw,64px);line-height:1.14;margin-bottom:20px}
  .page-head p{color:var(--sub);font-size:18px;max-width:560px;word-break:keep-all}

  /* spec table */
  .spec{border-top:1px solid var(--border)}
  .spec-row{
    display:grid;grid-template-columns:200px 1fr;gap:24px;
    padding:20px 4px;border-bottom:1px solid var(--border);
  }
  .spec-row dt{font-weight:600;font-size:16px;color:var(--sub)}
  .spec-row dd{font-size:16px;word-break:keep-all}

  /* FAQ */
  .faq{max-width:820px}
  .faq details{
    border-bottom:1px solid var(--border);padding:4px 0;
  }
  .faq summary{
    list-style:none;cursor:pointer;padding:24px 44px 24px 4px;position:relative;
    font-size:18px;font-weight:600;word-break:keep-all;
  }
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{
    content:'';position:absolute;right:12px;top:50%;width:12px;height:12px;
    border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
    transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease-fluid);
  }
  .faq details[open] summary::after{transform:translateY(-20%) rotate(-135deg)}
  .faq details p{padding:0 4px 24px;color:var(--sub);font-size:16px;word-break:keep-all;max-width:680px}

  /* generic 2-col media/text */
  .duo{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
  .duo-frame{padding:12px;border-radius:var(--r-xl)}
  .duo-img{border-radius:var(--r-md);overflow:hidden;aspect-ratio:4/5}
  .duo-img img{width:100%;height:100%;object-fit:cover}
  .duo-copy h2{margin-bottom:16px}
  .duo-copy p{color:var(--sub);font-size:16px;margin-bottom:16px;word-break:keep-all;max-width:460px}

  /* lineup cards */
  .line-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px}
  .line-card{overflow:hidden;display:flex;flex-direction:column;position:relative;border-radius:var(--r-xl)}
  .line-card .img{aspect-ratio:4/5;overflow:hidden;border-radius:var(--r-md);margin:12px}
  .line-card .img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease-fluid)}
  .line-card:hover .img img{transform:scale(1.04)}
  .line-card .body{padding:24px 32px 32px;display:flex;flex-direction:column;gap:8px;flex:1}

  /* contact form */
  .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
  .field{margin-bottom:24px}
  .field label{display:block;font-size:14px;font-weight:600;margin-bottom:8px}
  .field label .req{color:#B91C1C;margin-left:4px}
  .field input,.field select,.field textarea{
    width:100%;font-family:inherit;font-size:16px;color:var(--fg);
    background:rgba(255,255,255,.7);border:1px solid var(--border);
    border-radius:var(--r-md);padding:14px 16px;min-height:48px;
    transition:border-color .3s,box-shadow .3s;
  }
  .field textarea{min-height:160px;resize:vertical;line-height:1.6}
  .field input:focus,.field select:focus,.field textarea:focus{
    outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(161,98,7,.12);
  }
  .field .hint{font-size:13px;color:var(--sub);margin-top:8px}
  .form-note{font-size:13px;color:var(--sub);margin-top:16px;word-break:keep-all}
  .contact-card{padding:40px}
  .contact-card h3{font-size:20px;margin-bottom:8px}
  .contact-card p{color:var(--sub);font-size:16px;margin-bottom:24px;word-break:keep-all}
  .contact-list{display:flex;flex-direction:column;gap:16px}
  .contact-item{display:flex;gap:16px;align-items:flex-start}
  .contact-item .ci-ico{
    width:40px;height:40px;border-radius:var(--r-pill);flex:0 0 auto;
    display:flex;align-items:center;justify-content:center;
    background:rgba(161,98,7,.1);color:var(--accent);
  }
  .contact-item .ci-label{font-size:13px;color:var(--sub);margin-bottom:4px}
  .contact-item .ci-val{font-size:16px;font-weight:600}
  .form-status{
    margin-top:16px;padding:16px;border-radius:var(--r-md);font-size:15px;display:none;
  }
  .form-status.ok{display:block;background:rgba(46,125,125,.12);color:#1F5F5F}
  .form-status.err{display:block;background:rgba(185,28,28,.1);color:#B91C1C}

  @media(max-width:900px){
    .nav-toggle{display:flex}
    body.nav-open .nav-links{
      display:flex;flex-direction:column;gap:4px;
      position:absolute;left:12px;right:12px;top:76px;
      padding:16px;border-radius:var(--r-xl);
      background:#FFFFFF;border:1px solid var(--border);
      box-shadow:var(--e3);
    }
    body.nav-open header.on-dark .nav-links{
      background:#151210;border-color:var(--glass-dark-border);color:var(--on-dark);
    }
    body.nav-open header.on-dark .nav-links a{color:var(--on-dark)}
    body.nav-open .nav-links a{padding:12px 8px;font-size:16px}
    .page-head{padding:140px 0 56px}
    section[id],div[id].xhero,.film[id]{scroll-margin-top:116px}
    .spec-row{grid-template-columns:1fr;gap:8px;padding:16px 4px}
    .duo{grid-template-columns:1fr;gap:36px}
    .line-grid{grid-template-columns:1fr}
    .form-grid{grid-template-columns:1fr;gap:36px}
    .contact-card{padding:28px}
    /* touch targets: 44px minimum on small screens */
    .foot-col a{padding:12px 0}
    .foot-links a,.nav-links a{padding:12px 8px}
  }

  /* ── reviews page ── */
  .rating-hero{
    display:grid;grid-template-columns:280px 1fr;gap:56px;align-items:center;
    padding:48px;
  }
  .rating-hero-score{text-align:center;border-right:1px solid var(--border);padding-right:48px}
  .rating-hero-bars{display:flex;flex-direction:column;gap:12px}
  .rating-lead{font-size:18px;font-weight:600;margin-bottom:8px}
  .rating-chips{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:8px}
  .chip-fact{
    font-size:14px;font-weight:600;color:var(--accent);
    background:rgba(161,98,7,.1);border:1px solid rgba(161,98,7,.18);
    padding:12px 16px;border-radius:var(--r-pill);word-break:keep-all;
  }
  .rating-note{font-size:13px;color:var(--sub);margin-top:8px;word-break:keep-all}
  .review-foot{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    margin-top:auto;padding-top:16px;border-top:1px solid var(--border);
  }
  .review-tag{
    font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--accent);
    background:rgba(161,98,7,.1);padding:8px 12px;border-radius:var(--r-pill);
    white-space:nowrap;
  }

  @media(max-width:900px){
    .rating-hero{grid-template-columns:1fr;gap:32px;padding:32px}
    .rating-hero-score{border-right:none;border-bottom:1px solid var(--border);padding:0 0 32px}
    .review-foot{flex-direction:column;align-items:flex-start;gap:8px}
  }