:root{
    --ivory:#F4EFE9;
    --ivory-deep:#EBE3D8;
    --ivory-warm:#EFE7DB;
    --espresso:#2B211C;
    --espresso-soft:#5A4D44;
    --espresso-mute:#8A7C70;
    --gold:#B8956A;
    --gold-light:#D8BC93;
    --gold-deep:#9C7A4F;
    --sage:#9AA68F;
    --sage-deep:#7E8B72;
    --line:rgba(43,33,28,.13);
    --line-soft:rgba(43,33,28,.07);
    --serif:'Cormorant Garamond',Georgia,serif;
    --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    --ease:cubic-bezier(.16,.74,.27,1);
    --ease-soft:cubic-bezier(.33,1,.68,1);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    font-family:var(--sans);
    background:var(--ivory);
    color:var(--espresso);
    line-height:1.62;
    font-weight:300;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    overflow-x:hidden;
    position:relative;
  }
  h1,h2,h3,.serif{font-family:var(--serif);font-weight:700;line-height:1.02;letter-spacing:-.012em}
  a{color:inherit;text-decoration:none}
  img,svg{display:block;max-width:100%}
  ::selection{background:var(--gold);color:var(--ivory)}
  .wrap{max-width:1240px;margin:0 auto;padding:0 48px}
  .eyebrow{
    font-family:var(--sans);font-size:11px;font-weight:500;
    letter-spacing:.34em;text-transform:uppercase;color:var(--gold-deep);
    display:inline-flex;align-items:center;gap:12px;
  }
  .eyebrow::before{content:"";width:26px;height:1px;background:var(--gold);opacity:.6}
  .num-label{font-size:11px;letter-spacing:.3em;color:var(--espresso-mute);font-weight:500;text-transform:uppercase}

  /* ============ GRAIN OVERLAY ============ */
  .grain{
    position:fixed;inset:-50%;width:200%;height:200%;
    pointer-events:none;z-index:9500;opacity:.05;mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  }

  /* ============ CUSTOM CURSOR ============ */
  .cursor,.cursor-dot{position:fixed;top:0;left:0;pointer-events:none;z-index:9600;will-change:transform;opacity:0}
  .cursor{
    width:34px;height:34px;border:1px solid var(--gold);border-radius:50%;
    transform:translate(-50%,-50%);
    transition:width .35s var(--ease),height .35s var(--ease),background .35s var(--ease),border-color .35s var(--ease),opacity .4s;
    display:flex;align-items:center;justify-content:center;
    mix-blend-mode:normal;
  }
  .cursor-dot{width:5px;height:5px;border-radius:50%;background:var(--gold);transform:translate(-50%,-50%)}
  .cursor.grow{width:74px;height:74px;background:rgba(184,149,106,.1);border-color:transparent}
  .cursor .clabel{
    font-family:var(--sans);font-size:9px;letter-spacing:.18em;text-transform:uppercase;
    color:var(--gold-deep);opacity:0;transform:scale(.8);transition:opacity .3s,transform .3s;font-weight:600;
  }
  .cursor.grow .clabel{opacity:1;transform:scale(1)}
  body.cursor-on,body.cursor-on a,body.cursor-on button{cursor:none}

  /* ============ INTRO CURTAIN ============ */
  .intro{
    position:fixed;inset:0;z-index:9999;background:var(--espresso);
    display:flex;align-items:center;justify-content:center;flex-direction:column;
    overflow:hidden;
  }
  .intro::after{
    content:"";position:absolute;inset:0;opacity:.5;
    background:radial-gradient(circle at 50% 42%,rgba(184,149,106,.28),transparent 55%);
  }
  .intro-mark{position:relative;z-index:2;text-align:center}
  .intro-mark svg{width:64px;height:64px;margin:0 auto 22px}
  .intro-word{
    font-family:var(--serif);font-weight:600;color:var(--ivory);
    font-size:clamp(34px,6vw,62px);letter-spacing:.04em;line-height:1;
    display:flex;overflow:hidden;
  }
  .intro-word span{display:inline-block;transform:translateY(110%);opacity:0;
    animation:introUp .95s var(--ease) forwards}
  @keyframes introUp{to{transform:translateY(0);opacity:1}}
  .intro-sub{
    margin-top:18px;font-family:var(--sans);font-size:11px;letter-spacing:.42em;
    text-transform:uppercase;color:var(--gold-light);opacity:0;
    animation:fadeIn .8s ease .7s forwards;
  }
  @keyframes fadeIn{to{opacity:.85}}
  .intro-ring{
    position:absolute;top:50%;left:50%;width:0;height:0;border:1px solid rgba(216,188,147,.3);
    border-radius:50%;transform:translate(-50%,-50%);
    animation:ringExpand 1.2s var(--ease) .25s forwards;
  }
  @keyframes ringExpand{to{width:340px;height:340px;opacity:0}}
  .intro.done{transform:translateY(-100%);transition:transform 1.05s cubic-bezier(.76,0,.24,1)}
  .skip{
    position:absolute;bottom:30px;right:34px;z-index:3;
    font-family:var(--sans);font-size:10px;letter-spacing:.3em;text-transform:uppercase;
    color:rgba(244,239,233,.55);background:none;border:0;cursor:pointer;
    opacity:0;animation:fadeIn .6s ease 1s forwards;transition:color .3s;
  }
  .skip:hover{color:var(--ivory)}

  /* ============ NAV ============ */
  .nav{
    position:sticky;top:0;z-index:9000;
    background:rgba(244,239,233,.92);
    border-bottom:1px solid transparent;
    transition:border-color .5s,background .5s;
  }
  .nav.stuck{border-bottom-color:var(--line);background:var(--ivory)}
  .nav-inner{display:flex;align-items:center;justify-content:space-between;height:80px}
  .logo{font-family:var(--serif);font-weight:700;font-size:27px;letter-spacing:.01em;display:flex;align-items:center;gap:11px}
  .logo .mark{width:26px;height:26px;flex:none}
  .logo small{font-size:8.5px;letter-spacing:.36em;font-family:var(--sans);font-weight:500;color:var(--gold-deep);text-transform:uppercase;align-self:flex-end;margin-bottom:7px}
  .nav-links{display:flex;gap:42px;align-items:center}
  .nav-links a{font-size:12.5px;font-weight:400;letter-spacing:.04em;color:var(--espresso-soft);position:relative;padding:4px 0}
  .nav-links a::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .42s var(--ease)}
  .nav-links a:hover{color:var(--espresso)}
  .nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
  .nav-cta{
    font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;
    border:1px solid var(--espresso);border-radius:100px;padding:11px 24px;color:var(--espresso);
    position:relative;overflow:hidden;transition:color .45s var(--ease),transform .3s var(--ease);
  }
  .nav-cta span{position:relative;z-index:2}
  .nav-cta::before{content:"";position:absolute;inset:0;background:var(--espresso);transform:translateY(101%);transition:transform .45s var(--ease);z-index:1}
  .nav-cta:hover{color:var(--ivory)}
  .nav-cta:hover::before{transform:translateY(0)}
  .nav-cta:active{transform:translateY(1px)}

  /* ============ HERO ============ */
  .hero{position:relative;padding:74px 0 60px;overflow:hidden;min-height:88vh;display:flex;align-items:center}
  .hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
  .hero-bg .glow{
    position:absolute;border-radius:50%;filter:blur(80px);will-change:transform;
  }
  .hero-bg .g1{width:620px;height:620px;top:-140px;right:-120px;
    background:radial-gradient(circle,rgba(216,188,147,.5),transparent 68%)}
  .hero-bg .g2{width:520px;height:520px;bottom:-200px;left:-160px;
    background:radial-gradient(circle,rgba(154,166,143,.34),transparent 70%)}
  .hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr;gap:40px;align-items:center;width:100%}
  .hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:74% center;z-index:0}
  html.js .hero-photo{opacity:0;transform:scale(1.045);transition:opacity 1.4s ease .05s,transform 2.6s var(--ease-soft) .05s}
  body.revealed .hero-photo{opacity:1;transform:none}
  .hero-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(96deg,var(--ivory) 0%,rgba(244,239,233,.88) 28%,rgba(244,239,233,.5) 55%,rgba(244,239,233,.08) 80%,transparent 100%)}
  .hero-visual{display:none!important}
  .hero-copy{max-width:780px}
  .hero h1{
    font-size:clamp(46px,6.8vw,104px);line-height:.94;letter-spacing:-.025em;
    margin:26px 0 0;
  }
  .hero h1 .line{display:block;overflow:hidden}
  .hero h1 .line i{display:inline-block;padding:0 .16em;margin:0 -.16em}
  html.js .hero h1 .line i{transform:translateY(110%);transition:transform 1.15s var(--ease)}
  body.revealed .hero h1 .line i{transform:translateY(0)}
  .hero h1 .gold{font-style:italic;font-weight:600;color:var(--gold);
    background:linear-gradient(110deg,var(--gold-deep),var(--gold-light) 50%,var(--gold-deep));
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  html.js .hero h1 .line:nth-child(1) i{transition-delay:.08s}
  html.js .hero h1 .line:nth-child(2) i{transition-delay:.22s}
  html.js .hero h1 .line:nth-child(3) i{transition-delay:.36s}
  .hero-lede{max-width:430px;margin:34px 0 0;font-size:16px;color:var(--espresso-soft);line-height:1.75}
  html.js .hero-lede{opacity:0;transform:translateY(18px);transition:opacity 1.1s var(--ease) .5s,transform 1.1s var(--ease) .5s}
  body.revealed .hero-lede{opacity:1;transform:none}
  .hero-actions{display:flex;gap:18px;align-items:center;margin-top:40px;flex-wrap:wrap}
  html.js .hero-actions{opacity:0;transform:translateY(18px);transition:opacity 1.1s var(--ease) .66s,transform 1.1s var(--ease) .66s}
  body.revealed .hero-actions{opacity:1;transform:none}
  .btn{
    position:relative;display:inline-flex;align-items:center;gap:12px;
    font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.06em;
    padding:16px 30px;border-radius:100px;overflow:hidden;cursor:pointer;border:1px solid transparent;
    transition:transform .35s var(--ease),border-color .45s,color .45s;
  }
  .btn:active{transform:translateY(1px) scale(.985)}
  .btn-fill{background:var(--espresso);color:var(--ivory)}
  .btn-fill .fillbg{position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);z-index:0}
  .btn-fill:hover .fillbg{transform:scaleX(1)}
  .btn-fill span,.btn-fill .arr{position:relative;z-index:1;transition:color .4s}
  .btn .arr{transition:transform .4s var(--ease)}
  .btn:hover .arr{transform:translateX(5px)}
  .btn-ghost{border-color:var(--line);color:var(--espresso);background:transparent}
  .btn-ghost:hover{border-color:var(--espresso)}
  .hero-tag{display:flex;align-items:center;gap:11px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--espresso-mute)}
  html.js .hero-tag{opacity:0;transform:translateY(14px);transition:opacity 1s var(--ease) .32s,transform 1s var(--ease) .32s}
  body.revealed .hero-tag{opacity:1;transform:none}
  .hero-tag .dot{width:6px;height:6px;border-radius:50%;background:var(--sage);box-shadow:0 0 0 4px rgba(154,166,143,.2)}

  /* hero scroll cue */
  .scroll-cue{
    position:absolute;left:48px;bottom:30px;z-index:3;
    display:flex;flex-direction:column;align-items:center;gap:14px;pointer-events:none;
  }
  .scroll-cue span{font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--espresso-mute);writing-mode:vertical-rl;font-weight:500}
  .scroll-cue .sc-line{position:relative;width:1px;height:58px;background:rgba(43,33,28,.14);overflow:hidden;writing-mode:horizontal-tb}
  .scroll-cue .sc-line i{position:absolute;left:0;top:0;width:100%;height:42%;background:var(--gold);
    animation:scDrop 2.6s cubic-bezier(.45,0,.3,1) infinite}
  @keyframes scDrop{0%{transform:translateY(-110%)}55%,100%{transform:translateY(260%)}}
  html.js .scroll-cue{opacity:0;transition:opacity 1.4s ease 1.1s}
  body.revealed .scroll-cue{opacity:1}
  @media(max-width:860px),(max-height:720px){.scroll-cue{display:none}}

  /* hero bottle */
  .hero-visual{position:relative;display:flex;justify-content:center;align-items:center;
    opacity:0;transform:scale(.94);transition:all 1.3s var(--ease) .4s}
  body.revealed .hero-visual{opacity:1;transform:none}
  .bottle-stage{position:relative;width:330px;height:430px;will-change:transform}
  .bottle-rays{position:absolute;inset:-60px;z-index:0;opacity:.85;animation:slowSpin 60s linear infinite}
  @keyframes slowSpin{to{transform:rotate(360deg)}}
  .orb-halo{position:absolute;top:46%;left:50%;width:300px;height:300px;transform:translate(-50%,-50%);
    border-radius:50%;background:radial-gradient(circle,rgba(216,188,147,.45),transparent 62%);filter:blur(28px);z-index:0}
  .bottle-svg{position:relative;z-index:2;filter:drop-shadow(0 40px 60px rgba(43,33,28,.18))}
  .bottle-float{animation:float 7s ease-in-out infinite}
  @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

  /* ============ MARQUEE ============ */
  .marquee{
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    padding:30px 0;overflow:hidden;white-space:nowrap;background:var(--ivory-warm);position:relative;
  }
  .marquee-track{display:inline-flex;align-items:center;animation:marquee 46s linear infinite;will-change:transform}
  .marquee:hover .marquee-track{animation-play-state:paused}
  .marquee-track .m-item{
    font-family:var(--serif);font-size:38px;font-weight:600;letter-spacing:-.01em;
    color:var(--espresso);padding:0 8px;font-style:italic;
  }
  .marquee-track .m-sep{display:inline-flex;align-items:center;padding:0 34px;color:var(--gold)}
  @keyframes marquee{to{transform:translateX(-50%)}}

  /* ============ SECTION SHELL ============ */
  .section{padding:130px 0;position:relative}
  .section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:72px}
  .section-head h2{font-size:clamp(38px,5.4vw,76px);max-width:760px;line-height:1.0}
  .section-head .sh-side{max-width:280px;text-align:right;font-size:14px;color:var(--espresso-soft);line-height:1.7}

  /* reveal util — transform/opacity only, luxury pacing */
  html.js [data-reveal]{opacity:0;transform:translateY(32px);
    transition:opacity 1.05s var(--ease),transform 1.05s var(--ease);
    transition-delay:var(--rd,0s)}
  html.js [data-reveal].in{opacity:1;transform:none}
  html.js [data-clip]{opacity:0;transform:translateY(40px) scale(.985);
    transition:opacity 1.15s var(--ease),transform 1.15s var(--ease);transition-delay:var(--rd,0s)}
  html.js [data-clip].in{opacity:1;transform:none}
  /* oversized serif pull-quotes rise a touch further, a touch slower */
  html.js .story-quote[data-reveal]{transform:translateY(44px);transition-duration:1.25s}
  html.js .story-quote[data-reveal].in{transform:none}

  /* section labels — thin gold rule draws in */
  .num-label{position:relative}
  .num-label::before{content:"";display:block;width:36px;height:1px;background:var(--gold);margin-bottom:14px;opacity:.85}
  html.js [data-reveal] .num-label::before,html.js .num-label[data-reveal]::before{transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease) calc(var(--rd,0s) + .2s)}
  html.js [data-reveal].in .num-label::before,html.js .num-label[data-reveal].in::before{transform:scaleX(1)}
  /* eyebrow rule draws in when revealed */
  html.js [data-reveal] .eyebrow::before,html.js .eyebrow[data-reveal]::before{transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease) calc(var(--rd,0s) + .25s)}
  html.js [data-reveal].in .eyebrow::before,html.js .eyebrow[data-reveal].in::before{transform:scaleX(1)}

  /* reveal cascade rhythm (grids stagger per row) */
  .cards .card:nth-child(3n+2){--rd:.12s}
  .cards .card:nth-child(3n){--rd:.24s}
  .stats-grid .stat:nth-child(2){--rd:.12s}
  .stats-grid .stat:nth-child(3){--rd:.24s}
  .lgrid .lgrid-item:nth-child(3n+2){--rd:.1s}
  .lgrid .lgrid-item:nth-child(3n){--rd:.2s}
  .lreviews .lreview:nth-child(3n+2){--rd:.12s}
  .lreviews .lreview:nth-child(3n){--rd:.24s}
  .ritual-wrap .rstep:nth-child(3){--rd:.12s}
  .ritual-wrap .rstep:nth-child(4){--rd:.24s}
  .ritual-wrap .rstep:nth-child(5){--rd:.36s}
  .linfo > [data-reveal]:nth-child(2){--rd:.16s}
  .lrow .lrow-body{--rd:.18s}

  /* ============ COLLECTION ============ */
  .collection{background:linear-gradient(180deg,var(--ivory) 0%,var(--ivory-deep) 100%)}
  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
  .card{
    position:relative;background:var(--ivory);border:1px solid var(--line);border-radius:4px;
    overflow:hidden;cursor:pointer;transition:transform .9s var(--ease),box-shadow .9s var(--ease),border-color .6s;
  }
  .card:hover{transform:translateY(-8px);box-shadow:0 34px 64px -30px rgba(43,33,28,.3),0 10px 22px -14px rgba(43,33,28,.1);border-color:rgba(184,149,106,.35)}
  .card-media{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--ivory-warm)}
  .card-swatch{display:none}
  .card-prod{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center}
  .card-prod svg{display:none}
  .card-prod .card-photo{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
  .card:hover .card-photo{transform:scale(1.03)}
  .card-index{position:absolute;top:18px;left:20px;z-index:3;font-size:11px;letter-spacing:.2em;color:var(--espresso-soft);font-weight:500}
  .card-tag{position:absolute;top:18px;right:20px;z-index:3;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
    border:1px solid var(--line);border-radius:100px;padding:5px 11px;color:var(--espresso-soft);background:rgba(244,239,233,.72);transition:color .5s,border-color .5s,background .5s}
  .card:hover .card-tag{border-color:rgba(184,149,106,.55);color:var(--gold-deep);background:rgba(244,239,233,.9)}
  .card-body{padding:26px 26px 30px;position:relative;z-index:3}
  .card-body h3{font-size:28px;line-height:1.05;margin-bottom:7px}
  .card-body .ctype{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep);font-weight:500;margin-bottom:12px;display:block}
  .card-body .cdesc{font-size:13.5px;color:var(--espresso-soft);line-height:1.65;min-height:62px}
  .card-foot{display:flex;justify-content:space-between;align-items:center;margin-top:22px;padding-top:20px;border-top:1px solid var(--line-soft)}
  .card-price{font-family:var(--serif);font-size:26px;font-weight:600}
  .card-price small{font-size:13px;color:var(--espresso-mute);font-family:var(--sans);font-weight:400;margin-left:3px}
  .card-add{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--espresso-soft);transition:gap .4s,color .4s}
  .card:hover .card-add{color:var(--gold-deep);gap:12px}

  /* ============ RITUAL TIMELINE ============ */
  .ritual{background:var(--espresso);color:var(--ivory);position:relative;overflow:hidden}
  .ritual::before{content:"";position:absolute;top:-200px;right:-150px;width:560px;height:560px;
    background:radial-gradient(circle,rgba(184,149,106,.22),transparent 65%);filter:blur(40px)}
  .ritual .eyebrow{color:var(--gold-light)}
  .ritual .eyebrow::before{background:var(--gold-light)}
  .ritual .num-label{color:rgba(244,239,233,.5)}
  .ritual .section-head h2{color:var(--ivory)}
  .ritual .section-head .sh-side{color:rgba(244,239,233,.65)}
  .ritual-wrap{display:grid;grid-template-columns:1fr;gap:0;position:relative;margin-top:20px}
  .ritual-line{position:absolute;left:64px;top:40px;bottom:40px;width:1px;background:rgba(244,239,233,.16)}
  .ritual-line .prog{position:absolute;left:0;top:0;width:100%;height:0;background:linear-gradient(180deg,var(--gold-light),var(--gold));transition:height .4s ease}
  .rstep{
    display:grid;grid-template-columns:130px 1fr auto;gap:36px;align-items:center;
    padding:38px 0;border-bottom:1px solid rgba(244,239,233,.1);position:relative;cursor:pointer;transition:padding-left .5s var(--ease)}
  .rstep:hover,.rstep.active{padding-left:18px}
  .rstep-node{width:14px;height:14px;border-radius:50%;border:1px solid rgba(244,239,233,.4);position:absolute;left:58px;background:var(--espresso);transition:all .5s var(--ease);z-index:2}
  .rstep.active .rstep-node,.rstep:hover .rstep-node{background:var(--gold-light);border-color:var(--gold-light);box-shadow:0 0 0 6px rgba(216,188,147,.18)}
  .rstep-time{font-family:var(--serif);font-size:46px;font-weight:600;font-style:italic;color:rgba(244,239,233,.4);padding-left:46px;transition:color .5s}
  .rstep.active .rstep-time,.rstep:hover .rstep-time{color:var(--gold-light)}
  .rstep-main h3{font-size:30px;margin-bottom:8px}
  .rstep-main p{font-size:14px;color:rgba(244,239,233,.62);max-width:440px;line-height:1.7}
  .rstep-step{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:rgba(244,239,233,.4);font-weight:500}
  .rstep-icon{width:56px;height:56px;opacity:.5;transition:opacity .5s var(--ease),transform .5s var(--ease)}
  .rstep.active .rstep-icon,.rstep:hover .rstep-icon{opacity:1;transform:scale(1.06)}

  /* ============ STATS ============ */
  .stats{background:var(--ivory-warm);position:relative}
  .stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
  .stat{padding:64px 40px 56px;border-right:1px solid var(--line);text-align:center;position:relative}
  .stat:last-child{border-right:0}
  .stat .sval{font-family:var(--serif);font-size:clamp(56px,8vw,96px);font-weight:700;line-height:1;
    background:linear-gradient(120deg,var(--espresso),var(--gold-deep));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .stat .sval .suf{-webkit-text-fill-color:var(--gold);font-size:.6em;font-style:italic}
  .stat .slabel{margin-top:18px;font-size:13px;letter-spacing:.04em;color:var(--espresso-soft);max-width:230px;margin-left:auto;margin-right:auto;line-height:1.6}
  .stat .skey{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-deep);font-weight:500;margin-bottom:18px;display:block}

  /* ============ STORY BAND ============ */
  .story{position:relative;overflow:hidden}
  .story-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:center}
  .story-visual{position:relative;aspect-ratio:1/1.06;border-radius:4px;overflow:hidden;
    background:linear-gradient(150deg,var(--ivory-deep),var(--ivory-warm))}
  .story-visual svg{position:absolute;inset:0;width:100%;height:100%}
  .story-quote{font-family:var(--serif);font-size:clamp(30px,3.6vw,46px);line-height:1.2;font-weight:500;letter-spacing:-.01em;margin:30px 0 30px}
  .story-quote .gold{color:var(--gold);font-style:italic}
  .story p{font-size:15px;color:var(--espresso-soft);line-height:1.8;max-width:480px;margin-bottom:18px}
  .story-sign{margin-top:38px;display:flex;align-items:center;gap:18px}
  .story-sign .sig{font-family:var(--serif);font-size:30px;font-style:italic;color:var(--espresso)}
  .story-sign .who{font-size:12px;color:var(--espresso-mute);letter-spacing:.04em;line-height:1.5}
  .story-sign .who b{color:var(--espresso);font-weight:600;display:block}

  /* ============ FINAL CTA ============ */
  .final{background:var(--espresso);color:var(--ivory);position:relative;overflow:hidden;text-align:center;padding:150px 0 130px}
  .final::before{content:"";position:absolute;top:50%;left:50%;width:900px;height:900px;transform:translate(-50%,-50%);
    background:radial-gradient(circle,rgba(184,149,106,.18),transparent 60%)}
  .final-marq{position:absolute;top:54px;left:0;right:0;overflow:hidden;white-space:nowrap;opacity:.07;pointer-events:none}
  .final-marq span{font-family:var(--serif);font-size:120px;font-weight:700;color:var(--ivory);display:inline-block;animation:marquee 30s linear infinite}
  .final-inner{position:relative;z-index:2}
  .final h2{font-size:clamp(48px,8vw,118px);line-height:.96;letter-spacing:-.02em}
  .final h2 .gold{font-style:italic;font-weight:600;
    background:linear-gradient(110deg,var(--gold-deep),var(--gold-light) 55%,var(--gold-deep));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .final p{max-width:440px;margin:32px auto 0;color:rgba(244,239,233,.7);font-size:16px;line-height:1.7}
  .final-form{display:flex;gap:12px;max-width:480px;margin:44px auto 0;flex-wrap:wrap;justify-content:center}
  .final-form input{
    flex:1;min-width:240px;background:rgba(244,239,233,.06);border:1px solid rgba(244,239,233,.2);
    border-radius:100px;padding:17px 26px;color:var(--ivory);font-family:var(--sans);font-size:14px;outline:none;transition:border-color .4s}
  .final-form input::placeholder{color:rgba(244,239,233,.45)}
  .final-form input:focus{border-color:var(--gold-light)}
  .final-form .btn-fill{background:var(--gold)}
  .final-form .btn-fill .fillbg{background:var(--ivory)}
  .final-form .btn-fill:hover span,.final-form .btn-fill:hover .arr{color:var(--espresso)}
  .final-note{margin-top:22px;font-size:11.5px;letter-spacing:.04em;color:rgba(244,239,233,.45)}

  /* ============ FOOTER ============ */
  .footer{background:#221a16;color:rgba(244,239,233,.75);padding:90px 0 38px;position:relative}
  .footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px;padding-bottom:64px;border-bottom:1px solid rgba(244,239,233,.1)}
  .footer .logo{color:var(--ivory)}
  .footer-brand p{margin-top:22px;font-size:13.5px;line-height:1.8;max-width:300px;color:rgba(244,239,233,.55)}
  .footer-col h4{font-family:var(--sans);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-light);font-weight:600;margin-bottom:22px}
  .footer-col a,.footer-col p{display:block;font-size:13.5px;color:rgba(244,239,233,.62);margin-bottom:13px;transition:color .3s;line-height:1.5}
  .footer-col a{position:relative;width:fit-content}
  .footer-col a:hover{color:var(--ivory)}
  .footer-col a::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:var(--gold-light);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
  .footer-col a:hover::after{transform:scaleX(1);transform-origin:left}
  .footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:30px;gap:20px;flex-wrap:wrap}
  .footer-bottom p{font-size:12px;color:rgba(244,239,233,.42);letter-spacing:.02em}
  .footer-socials{display:flex;gap:14px}
  .footer-socials a{width:44px;height:44px;border:1px solid rgba(244,239,233,.16);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:border-color .4s var(--ease),background .4s var(--ease),transform .4s var(--ease)}
  .footer-socials a:hover{border-color:var(--gold-light);background:rgba(216,188,147,.1);transform:translateY(-3px)}
  .footer-socials a:active{transform:scale(.94)}
  .footer-socials svg{width:16px;height:16px;opacity:.7}

  /* ============ RESPONSIVE ============ */
  @media (max-width:980px){
    .wrap{padding:0 28px}
    .hero-grid{grid-template-columns:1fr;gap:50px}
    .hero-visual{order:-1}
    .bottle-stage{width:250px;height:330px}
    .cards{grid-template-columns:1fr;max-width:440px;margin:0 auto}
    .stats-grid{grid-template-columns:1fr}
    .stat{border-right:0;border-bottom:1px solid var(--line)}
    .story-grid{grid-template-columns:1fr;gap:50px}
    .section-head{flex-direction:column;align-items:flex-start;gap:20px}
    .section-head .sh-side{text-align:left}
    .footer-top{grid-template-columns:1fr 1fr;gap:40px}
    .rstep{grid-template-columns:80px 1fr;gap:20px}
    .rstep-icon{display:none}
    .ritual-line{left:30px}
    .rstep-node{left:24px}
    .rstep-time{padding-left:24px;font-size:34px}
  }
  @media (max-width:560px){
    .wrap{padding:0 20px}
    .section{padding:90px 0}
    .nav-links{display:none}
    .footer-top{grid-template-columns:1fr}
    .marquee-track .m-item{font-size:28px}
    .hero h1{font-size:clamp(46px,15vw,80px)}
  }
  /* mobile hero legibility: deepen the scrim, ease the bottle right */
  @media (max-width:700px){
    .hero-photo{object-position:82% center}
    .hero-scrim{background:linear-gradient(180deg,rgba(244,239,233,.95) 0%,rgba(244,239,233,.87) 42%,rgba(244,239,233,.62) 70%,rgba(244,239,233,.22) 100%)}
  }

  /* ============ REDUCED MOTION ============ */
  @media (prefers-reduced-motion:reduce){
    *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
    .intro{display:none!important}
    [data-reveal],[data-clip],.hero-lede,.hero-actions,.hero-visual,.hero-tag,.hero-photo{opacity:1!important;transform:none!important;clip-path:none!important}
    .hero h1 .line i{transform:none!important}
    html.js [data-reveal] .num-label::before,html.js .num-label[data-reveal]::before,
    html.js [data-reveal] .eyebrow::before,html.js .eyebrow[data-reveal]::before{transform:none!important}
    .pagehero .eyebrow,.pagehero h1,.pagehero .lead,.pagehero .ph-img,.pagehero .eyebrow::before{animation:none!important}
    html.js .ritual-steps .rs .rs-n{opacity:1!important;transform:none!important}
    .marquee-track,.final-marq span,.bottle-rays,.bottle-float,.orb-halo{animation:none!important}
    .cursor,.cursor-dot,.scroll-cue{display:none!important}
  }
  :focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px;border-radius:2px}
/* ============================================================
   SUBPAGE SYSTEM (multi-page demo)
   ============================================================ */
html:not(.intro-play) #intro{display:none!important}
.nav-links a.active,.nav-links a[aria-current="page"]{color:var(--espresso)}

.pagehero{position:relative;padding:clamp(96px,13vw,168px) 0 clamp(48px,7vw,86px);overflow:hidden;border-bottom:1px solid var(--line-soft);background:var(--ivory-warm)}
.pagehero .wrap{position:relative;z-index:2}
.pagehero .eyebrow{margin-bottom:22px}
.pagehero h1{font-family:var(--serif);font-weight:600;font-size:clamp(46px,7.6vw,104px);line-height:1.0;letter-spacing:-.01em}
.pagehero h1 i{font-style:italic}
.pagehero .gold{color:var(--gold)}
.pagehero .lead{font-family:var(--sans);max-width:560px;margin-top:26px;color:var(--espresso-soft);font-size:clamp(15px,1.3vw,18px);line-height:1.75}
.pagehero .ph-img{position:absolute;right:0;top:0;width:42%;height:100%;object-fit:cover;z-index:1;opacity:.92;-webkit-mask-image:linear-gradient(90deg,transparent,#000 66%);mask-image:linear-gradient(90deg,transparent,#000 66%)}
@media(max-width:860px){.pagehero .ph-img{display:none}}

.lsec{padding:clamp(64px,9vw,124px) 0;position:relative}
.lsec.warm{background:var(--ivory-warm)}
.lsec.dark{background:var(--espresso);color:var(--ivory)}
.lsec.dark h2,.lsec.dark h3,.lsec.dark .gold{color:var(--ivory)}
.lsec.dark .num-label,.lsec.dark p{color:var(--ivory-warm)}

/* feature rows */
.lrow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,88px);align-items:center}
.lrow+.lrow{margin-top:clamp(56px,9vw,116px)}
.lrow.rev .lrow-media{order:2}
.lrow-media{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--ivory-warm)}
.lrow-media img{width:100%;height:100%;object-fit:cover;display:block}
.lrow-body .num-label{margin-bottom:18px;display:block}
.lrow-body h3{font-family:var(--serif);font-weight:600;font-size:clamp(28px,4vw,52px);line-height:1.05;margin-bottom:20px}
.lrow-body h3 i{font-style:italic}
.lrow-body p{color:var(--espresso-soft);line-height:1.8;max-width:48ch;margin-bottom:16px}
@media(max-width:860px){.lrow{grid-template-columns:1fr}.lrow.rev .lrow-media{order:0}}

/* ritual steps */
.ritual-steps{display:flex;flex-direction:column;gap:1px;background:var(--line)}
.ritual-steps .rs{background:var(--ivory);padding:clamp(24px,3.4vw,40px) clamp(6px,2vw,28px);display:grid;grid-template-columns:auto 1fr auto;gap:clamp(20px,3vw,38px);align-items:baseline}
.ritual-steps .rs .rs-n{font-family:var(--serif);font-style:italic;font-size:clamp(30px,4vw,52px);color:var(--gold);line-height:1}
.ritual-steps .rs h4{font-family:var(--serif);font-weight:600;font-size:clamp(21px,2.4vw,30px)}
.ritual-steps .rs p{color:var(--espresso-soft);font-size:14.5px;line-height:1.7;margin-top:8px;max-width:60ch}
.ritual-steps .rs .rs-time{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--espresso-mute);white-space:nowrap}
@media(max-width:680px){.ritual-steps .rs{grid-template-columns:auto 1fr;gap:18px}.ritual-steps .rs .rs-time{display:none}}

/* reviews */
.lreviews{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.lreview{border:1px solid var(--line);padding:clamp(28px,3vw,38px) clamp(24px,2.6vw,32px);background:var(--ivory);display:flex;flex-direction:column}
.lreview .stars{color:var(--gold);letter-spacing:3px;font-size:13px;margin-bottom:18px}
.lreview blockquote{font-family:var(--serif);font-size:clamp(19px,1.6vw,24px);line-height:1.5;margin-bottom:22px;flex:1}
.lreview .who{font-size:13px;letter-spacing:.03em;color:var(--espresso)}
.lreview .who span{display:block;color:var(--espresso-mute);font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin-top:5px}
@media(max-width:860px){.lreviews{grid-template-columns:1fr}}

/* form */
.lform{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.lfield{display:flex;flex-direction:column;gap:9px}
.lfield.full{grid-column:1/-1}
.lfield label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--espresso-mute)}
.lfield input,.lfield select,.lfield textarea{background:var(--ivory);border:1px solid var(--line);color:var(--espresso);padding:14px 16px;font-family:var(--sans);font-size:15px;border-radius:0}
.lfield input:focus,.lfield select:focus,.lfield textarea:focus{outline:none;border-color:var(--gold)}
.lfield textarea{min-height:128px;resize:vertical}
@media(max-width:680px){.lform{grid-template-columns:1fr}}

/* faq */
.lfaq{border-top:1px solid var(--line)}
.lfaq-item{border-bottom:1px solid var(--line);padding:26px 0}
.lfaq-item h4{font-family:var(--serif);font-weight:600;font-size:clamp(19px,2vw,26px);margin-bottom:10px}
.lfaq-item p{color:var(--espresso-soft);line-height:1.75;max-width:72ch}

/* ingredient / value grid */
.lgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.lgrid-item{background:var(--ivory);padding:clamp(28px,3.4vw,44px)}
.lgrid-item .num-label{display:block;margin-bottom:16px}
.lgrid-item h4{font-family:var(--serif);font-weight:600;font-size:clamp(20px,2.2vw,28px);margin-bottom:12px}
.lgrid-item p{color:var(--espresso-soft);font-size:14.5px;line-height:1.7}
@media(max-width:860px){.lgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.lgrid{grid-template-columns:1fr}}

/* two-col info */
.linfo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,76px);align-items:start}
@media(max-width:760px){.linfo{grid-template-columns:1fr}}

/* page CTA band */
.lcta{padding:clamp(78px,11vw,148px) 0;text-align:center;background:var(--espresso);color:var(--ivory)}
.lcta h2{font-family:var(--serif);font-weight:600;font-size:clamp(36px,5.5vw,74px);line-height:1.05;margin-bottom:22px}
.lcta h2 i{font-style:italic;color:var(--gold-light)}
.lcta p{color:var(--ivory-warm);max-width:520px;margin:0 auto 34px;line-height:1.8}
.lcta .btn-fill{background:var(--gold);color:var(--espresso)}
.lcta .btn-fill .fillbg{background:var(--ivory)}

/* ===== Sun logo + glowing intro ===== */
.logo .mark{color:var(--gold)}
.footer .logo .mark{color:var(--gold-light)}
.intro{background:var(--espresso) url("../media/intro.jpg") center/cover no-repeat!important}
.intro .intro-mark,.intro .intro-ring{display:none!important}
@media (max-aspect-ratio:3/4){.intro{background-image:url("../media/intro-portrait.jpg")!important}}
#skip{color:rgba(43,33,28,.55)!important}
#skip:hover{color:var(--espresso)!important}

/* ============================================================
   LEVEL-UP SYSTEM — luxury motion, editorial detail, micro-states
   (transform/opacity only; infinite motion pauses off-viewport)
   ============================================================ */

/* ---- page hero: gentle one-shot entrance ---- */
@keyframes phUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes phImg{from{opacity:0;transform:scale(1.05)}to{opacity:.92;transform:none}}
@keyframes ruleIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}
html.js .pagehero .eyebrow{animation:phUp 1s var(--ease) .12s both}
html.js .pagehero .eyebrow::before{transform-origin:left;animation:ruleIn 1.15s var(--ease) .55s both}
html.js .pagehero h1{animation:phUp 1.15s var(--ease) .24s both}
html.js .pagehero .lead{animation:phUp 1.15s var(--ease) .4s both}
html.js .pagehero .ph-img{animation:phImg 1.9s var(--ease-soft) .08s both}

/* ---- ritual page: numbered cascade ---- */
html.js .ritual-steps .rs[data-reveal] .rs-n{opacity:0;transform:translateX(-16px);
  transition:opacity 1s var(--ease) calc(var(--rd,0s) + .28s),transform 1s var(--ease) calc(var(--rd,0s) + .28s)}
html.js .ritual-steps .rs[data-reveal].in .rs-n{opacity:1;transform:none}
.ritual-steps .rs:nth-child(2){--rd:.14s}
.ritual-steps .rs:nth-child(3){--rd:.28s}
.ritual-steps .rs:nth-child(4){--rd:.42s}
.ritual-steps .rs{position:relative;transition:background .6s ease}
.ritual-steps .rs:hover{background:var(--ivory-warm)}
.ritual-steps .rs .rs-n{transition:color .5s}
.ritual-steps .rs:hover .rs-n{color:var(--gold-deep)}

/* ---- section-head + cta rhythm ---- */
.section-head .sh-side{--rd:.16s}
.lcta p[data-reveal]{--rd:.14s}
.lcta .btn[data-reveal],.lcta div[data-reveal]{--rd:.26s}

/* ---- reviews: card + star refinement ---- */
.lreview{transition:transform .8s var(--ease),box-shadow .8s var(--ease),border-color .6s}
.lreview:hover{transform:translateY(-6px);box-shadow:0 30px 54px -32px rgba(43,33,28,.22);border-color:rgba(184,149,106,.45)}
.lreview .stars{font-size:12.5px;letter-spacing:4.5px}

/* ---- feature rows: consistent corners + slow photo drift ---- */
.lrow-media{border-radius:4px}
.lrow-media img{transition:transform 1.5s var(--ease)}
.lrow:hover .lrow-media img{transform:scale(1.025)}

/* ---- ingredient / stockist tiles ---- */
.lgrid-item{transition:background .6s ease}
.lgrid-item:hover{background:var(--ivory-warm)}
.lsec.warm .lgrid-item:hover{background:var(--ivory-deep)}
.lgrid-item h4{transition:color .5s}
.lgrid-item:hover h4{color:var(--gold-deep)}

/* ---- gold underline draws on inline gold links ---- */
a.gold{position:relative}
a.gold::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
a.gold:hover::after{transform:scaleX(1);transform-origin:left}

/* ---- infinite motion pauses off-viewport ---- */
.anim-off,.anim-off::before,.anim-off::after,
.anim-off *,.anim-off *::before,.anim-off *::after{animation-play-state:paused!important}

/* ---- focus in gold ---- */
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
.ritual :focus-visible,.final :focus-visible,.lcta :focus-visible,
.footer :focus-visible,.intro :focus-visible{outline-color:var(--gold-light)}

/* ---- touch: tap targets ≥44px ---- */
@media (pointer:coarse){
  .nav-cta{padding:15px 26px}
  .footer-col a{padding:12px 0;margin-bottom:0}
  .skip{padding:16px;bottom:14px;right:14px}
  .card-add{padding:12px 0}
  .footer-socials a{width:46px;height:46px}
}