/* ===================================================================
   Shiny Nails – "Luxe" cinematic layer
   Homepage hero (video + CSS/canvas fallback), first-visit brand intro,
   "The Shiny ritual" scroll story, and site-wide micro-luxury
   (cursor glow, page-transition veil, magnetic gold buttons).
   Loads after style.css. Decorative layers are aria-hidden.
   =================================================================== */

:root{
  --lx-black:#070504;
  --lx-ivory:#f5ecda;
  --lx-ivory-2:rgba(245,236,218,.72);
  --lx-gold:#d9b876;
  --lx-gold-hi:#f7e6b0;
  --lx-hair:rgba(217,184,118,.2);
  --lx-ease:cubic-bezier(.22,.8,.18,1);
}

/* ---------------------------------------------------------------
   1. Cinematic hero
   --------------------------------------------------------------- */
.lx-hero{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;
  min-height:clamp(560px,86vh,940px);min-height:clamp(560px,calc(100svh - 118px),940px);
  background:var(--lx-black);color:var(--lx-ivory)}
.lx-hero [hidden]{display:none!important}
.lx-hero-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  background:
    radial-gradient(1100px 700px at 74% 38%,rgba(122,88,38,.34),transparent 62%),
    radial-gradient(900px 600px at 6% 112%,rgba(92,64,28,.32),transparent 60%),
    linear-gradient(180deg,#0b0907 0%,#070504 100%)}

/* slow gold light streaks (CSS fallback / ambience) */
.lx-streaks{position:absolute;inset:0;mix-blend-mode:screen}
.lx-streaks i{position:absolute;left:-40%;width:180%;height:46%;top:6%;opacity:.9;
  background:radial-gradient(closest-side,rgba(236,206,140,.2),rgba(217,178,104,.07) 52%,transparent 100%);
  transform:rotate(-14deg) translate3d(-8%,0,0);animation:lxStreak 26s ease-in-out infinite alternate;will-change:transform}
.lx-streaks i::after{content:"";position:absolute;left:18%;right:18%;top:50%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,236,196,.55) 50%,transparent);box-shadow:0 0 18px 1px rgba(236,206,140,.35)}
.lx-streaks i:nth-child(2){top:38%;height:34%;opacity:.7;animation-duration:31s;animation-delay:-9s;transform:rotate(-19deg) translate3d(6%,0,0)}
.lx-streaks i:nth-child(3){top:58%;height:40%;opacity:.55;animation-duration:37s;animation-delay:-17s}
.lx-streaks i:nth-child(3)::after{opacity:.5}
.lx-streaks i:nth-child(4){top:-12%;height:30%;opacity:.45;animation-duration:43s;animation-delay:-4s;transform:rotate(-9deg) translate3d(0,0,0)}
.lx-streaks i:nth-child(4)::after{display:none}
@keyframes lxStreak{0%{transform:rotate(-14deg) translate3d(-9%,-4%,0)}100%{transform:rotate(-17deg) translate3d(9%,5%,0)}}

/* brand crest drawn in light, with a glint travelling round the arch */
.lx-hero-crest{position:absolute;right:max(4%,calc((100% - 1180px)/2 + 10px));top:50%;height:82%;width:auto;transform:translateY(-50%);
  overflow:visible;transition:opacity 1.6s ease}
.lx-hero-crest path{fill:none}
.lx-crest-base path{stroke:rgba(217,184,118,.2);stroke-width:.16}
.lx-crest-glint path{stroke:rgba(255,236,190,.9);stroke-width:.24;stroke-linecap:round;stroke-dasharray:.07 .93;stroke-dashoffset:1;
  filter:drop-shadow(0 0 6px rgba(236,206,140,.8));animation:lxGlint 9s linear infinite}
.lx-crest-glint path+path{animation-duration:7s;animation-delay:-3s;stroke-dasharray:.1 .9}
@keyframes lxGlint{to{stroke-dashoffset:0}}

.lx-glitter{position:absolute;inset:0;width:100%;height:100%}

/* video (only when the files exist and the visitor wants motion) */
.lx-hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:42% 50%;opacity:0;transition:opacity 1.6s ease;background:transparent}
.lx-hero-video.lx-in{opacity:1}
.lx-has-video .lx-hero-crest{opacity:0}
.lx-has-video .lx-streaks{opacity:.45}
.lx-has-video .lx-glitter{opacity:.55}

/* legibility shade + vignette + film grain */
.lx-hero-shade{position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(7,5,4,.86) 0%,rgba(7,5,4,.62) 30%,rgba(7,5,4,.12) 58%,rgba(7,5,4,0) 72%),
    linear-gradient(0deg,rgba(7,5,4,.9) 0%,rgba(7,5,4,0) 34%),
    radial-gradient(ellipse 80% 90% at 60% 45%,transparent 55%,rgba(0,0,0,.5) 100%)}
.lx-grain{position:absolute;inset:-50%;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 .85 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px}
.lx-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;z-index:1;
  background:linear-gradient(90deg,transparent,rgba(217,184,118,.55) 50%,transparent)}

/* copy */
.lx-hero-inner{flex:1;display:flex;flex-direction:column;justify-content:center;padding:clamp(56px,9vh,110px) 0 30px;position:relative}
.lx-hero-copy{max-width:min(640px,52%)}
.lx-eyebrow{display:flex;align-items:center;gap:.9em;font:500 .74rem/1 var(--sans);letter-spacing:.34em;text-transform:uppercase;color:var(--lx-gold);margin-bottom:1.6rem}
.lx-eyebrow::before{content:"";width:44px;height:1px;background:linear-gradient(90deg,transparent,var(--lx-gold))}
.lx-eyebrow span{opacity:.6}
.lx-title{font-family:var(--serif);font-weight:500;font-size:clamp(2.55rem,1rem + 4.6vw,5.6rem);line-height:.98;letter-spacing:-.022em;
  color:var(--lx-ivory);margin:0 0 .42em}
.lx-line{display:block}
.lx-line>span{display:inline-block;padding:0 .08em .06em 0;
  background:linear-gradient(100deg,#efe2c6 0%,#f3e8d2 42%,#fffdf6 49.5%,#f3e8d2 57%,#efe2c6 100%);background-size:280% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:lxRise 1.1s var(--lx-ease) both,lxSweep 8s 1.6s ease-in-out infinite}
.lx-line+.lx-line>span{animation-delay:.12s,1.75s}
.lx-foil{font-style:italic;font-weight:500;padding:0 .06em 0 .02em;
  background:linear-gradient(100deg,#9c7330 0%,#d9b46a 26%,#fff1c9 44%,#e2c07a 58%,#a77d36 82%,#e9cf8f 100%);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:lxFoil 7s ease-in-out infinite alternate}
@keyframes lxRise{from{opacity:0;transform:translate3d(0,.32em,0)}to{opacity:1;transform:none}}
@keyframes lxSweep{0%{background-position:100% 0}26%,100%{background-position:0 0}}
@keyframes lxFoil{from{background-position:0 0}to{background-position:100% 0}}
.lx-lead{max-width:42ch;font-size:clamp(1rem,.94rem + .28vw,1.14rem);font-weight:300;line-height:1.65;color:var(--lx-ivory-2);margin:0;
  animation:lxRise 1.1s .22s var(--lx-ease) both}
.lx-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:2.2rem;animation:lxRise 1.1s .32s var(--lx-ease) both}
.lx-actions .btn{padding:1.05em 2em}
.lx-btn-line{background:rgba(255,248,232,.03);color:var(--lx-ivory);border:1px solid rgba(217,184,118,.42);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.lx-btn-line .ico-svg{transition:transform .3s var(--lx-ease)}
.lx-btn-line:hover{background:rgba(217,184,118,.1);border-color:var(--lx-gold);color:#fff8e6}
.lx-btn-line:hover .ico-svg{transform:translateX(4px)}

.lx-hero-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 30px;margin-top:clamp(40px,7vh,72px);padding-top:18px;border-top:1px solid var(--lx-hair);
  font-size:.8rem;letter-spacing:.06em;color:rgba(245,236,218,.62);animation:lxRise 1.1s .42s var(--lx-ease) both}
.lx-meta-item{display:inline-flex;align-items:center;gap:.6em;white-space:nowrap}
.lx-meta-item .ico-svg{color:var(--lx-gold);width:1em;height:1em}
.lx-meta-item .dot{width:7px;height:7px;border-radius:50%;background:#58d68d;box-shadow:0 0 0 4px rgba(88,214,141,.14)}
.lx-meta-item .dot.closed{background:#d98a6f;box-shadow:0 0 0 4px rgba(217,138,111,.14)}
.lx-meta-link{color:var(--lx-gold);text-decoration:none;border-bottom:1px solid rgba(217,184,118,.35);padding-bottom:2px}
.lx-meta-link:hover{color:var(--lx-gold-hi);border-color:var(--lx-gold-hi)}

.lx-scroll{position:absolute;left:max(20px,calc((100% - 1180px)/2 - 70px));bottom:110px;display:flex;flex-direction:column;align-items:center;gap:14px;
  color:rgba(245,236,218,.5);text-decoration:none;font-size:.62rem;letter-spacing:.38em;text-transform:uppercase}
.lx-scroll span{writing-mode:vertical-rl}
.lx-scroll i{position:relative;width:1px;height:64px;background:rgba(217,184,118,.22);overflow:hidden}
.lx-scroll i::after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:linear-gradient(transparent,var(--lx-gold-hi));animation:lxDrip 2.4s var(--lx-ease) infinite}
.lx-scroll:hover{color:var(--lx-gold)}
@keyframes lxDrip{to{top:100%}}

@media (max-width:1180px){.lx-scroll{display:none}}
@media (max-width:980px){.lx-hero-copy{max-width:600px}}

/* portrait / phone: video becomes a feathered window between the headline (top) and the actions (bottom);
   copy is centred so the site's fixed edge widgets (sound, chat, contact rail) never sit on top of it */
@media (max-aspect-ratio:4/5),(max-width:640px){
  .lx-hero{min-height:max(620px,calc(100vh - 112px));min-height:max(620px,calc(100svh - 112px))}
  .lx-hero-inner{justify-content:space-between;align-items:center;text-align:center;padding:30px 0 26px}
  .lx-hero-copy{max-width:none;display:contents}
  .lx-eyebrow{justify-content:center}
  .lx-eyebrow::after{content:"";width:44px;height:1px;background:linear-gradient(270deg,transparent,var(--lx-gold))}
  .lx-title{text-align:center}
  .lx-lead{margin-inline:auto;max-width:36ch}
  .lx-actions{margin-top:auto;padding-top:24px;flex-direction:column;align-items:center;gap:10px;width:100%}
  .lx-actions .btn{width:min(100%,300px)}
  .lx-hero-meta{justify-content:center;width:100%}
  .lx-hero-video{top:200px;bottom:auto;height:min(68vw + 130px,560px);object-position:50% 66%;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 24%,#000 70%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 24%,#000 70%,transparent 100%)}
  .lx-hero-shade{background:
    linear-gradient(180deg,rgba(7,5,4,.8) 0%,rgba(7,5,4,.45) 30%,rgba(7,5,4,0) 46%,rgba(7,5,4,0) 60%,rgba(7,5,4,.82) 82%),
    radial-gradient(ellipse 110% 80% at 50% 50%,transparent 60%,rgba(0,0,0,.45) 100%)}
  .lx-hero-crest{right:50%;transform:translate(50%,-50%);height:52%;top:54%}
}
@media (max-width:760px){
  .lx-hero-inner{padding-bottom:calc(98px + env(safe-area-inset-bottom))}   /* clear the fixed mobile booking bar */
}
@media (max-width:640px){
  .lx-hero-inner{padding-top:26px}
  .lx-eyebrow{font-size:.64rem;letter-spacing:.26em;margin-bottom:1.1rem;gap:.7em}
  .lx-eyebrow::before,.lx-eyebrow::after{width:22px}
  .lx-title{font-size:clamp(2.3rem,10.4vw,3rem);margin-bottom:.36em}
  .lx-lead{font-size:.95rem;line-height:1.55}
  /* keep to the clear centre lane between the fixed sound button (left) and contact rail / chat (right) */
  .lx-actions .btn{width:calc(100% - 126px);max-width:290px;padding:.95em .9em;font-size:.88rem;letter-spacing:.02em}
  .lx-hero-meta{width:calc(100% - 126px);max-width:300px;gap:6px 14px;margin-top:18px;padding-top:12px;font-size:.72rem;letter-spacing:.03em}
  .lx-sm-hide{display:none}
  .lx-meta-item:nth-child(3){display:none}
}

/* ---------------------------------------------------------------
   2. First-visit brand intro (≈1.2 s, skippable, never for bots / reduced motion)
   --------------------------------------------------------------- */
.lx-intro{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;cursor:pointer;
  background:radial-gradient(640px 460px at 50% 46%,#1e160c 0%,#0b0806 62%,#050403 100%);
  transition:opacity .38s ease,visibility .38s;-webkit-tap-highlight-color:transparent;
  /* CSS-timed exit, independent of JS timers: stops catching taps at 1.08 s and is gone by 1.46 s even on a busy main thread */
  animation:lxIntroOut .38s ease 1.08s forwards,lxNoPtr 1ms linear 1.08s forwards}
@keyframes lxIntroOut{to{opacity:0;visibility:hidden}}
@keyframes lxNoPtr{to{pointer-events:none}}
.lx-intro[hidden]{display:none}
.lx-intro.lx-out{opacity:0;visibility:hidden;pointer-events:none}
.lx-intro-glow{position:absolute;left:50%;top:44%;width:70vmin;height:70vmin;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(217,184,118,.14),transparent 62%);animation:lxBreath 1.4s ease-out both}
.lx-intro-mark{position:relative;width:92px;height:124px}
.lx-mark{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.lx-mark-line path{stroke-dasharray:1 1;stroke-dashoffset:1;stroke-linecap:round;animation:lxDraw .82s cubic-bezier(.65,.05,.3,1) .04s forwards}
.lx-mark-line path:nth-of-type(2){animation-delay:.16s}
.lx-mark-line path:nth-of-type(4),.lx-mark-line path:nth-of-type(5){animation-duration:.4s;animation-delay:.5s}
.lx-mark-line path[fill="#fffaf0"]{display:none}
.lx-mark-fill{opacity:0;transform:scale(.97);animation:lxFillIn .42s ease-out .64s forwards;filter:drop-shadow(0 0 18px rgba(236,206,140,.35))}
.lx-intro-burst{position:absolute;left:50%;top:22%;width:300px;height:300px;margin:-150px 0 0 -150px;border-radius:50%;pointer-events:none;opacity:0;transform:scale(.15);
  background:radial-gradient(circle,rgba(255,250,232,.95) 0%,rgba(247,226,170,.5) 12%,rgba(217,184,118,.14) 34%,transparent 62%);
  animation:lxBurst .74s cubic-bezier(.2,.7,.2,1) .74s forwards}
.lx-intro-burst::after{content:"";position:absolute;left:-70%;right:-70%;top:50%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,240,205,.95) 50%,transparent);box-shadow:0 0 14px 2px rgba(236,206,140,.6)}
.lx-intro-word{display:flex;flex-direction:column;align-items:center;gap:10px;opacity:0;animation:lxFade .5s ease .42s forwards}
.lx-intro-word span{font:500 1.7rem/1 var(--serif);letter-spacing:.02em;color:#f3e4c2}
.lx-intro-word small{font:500 .6rem/1 var(--sans);letter-spacing:.62em;text-transform:uppercase;color:#bfa06a;margin-right:-.62em}
@keyframes lxDraw{to{stroke-dashoffset:0}}
@keyframes lxFillIn{to{opacity:1;transform:none}}
@keyframes lxBurst{0%{opacity:0;transform:scale(.15)}35%{opacity:1}100%{opacity:0;transform:scale(1.6)}}
@keyframes lxFade{to{opacity:1}}
@keyframes lxBreath{from{opacity:0;transform:translate(-50%,-50%) scale(.7)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}

/* ---------------------------------------------------------------
   3. The Shiny ritual – scroll story
   --------------------------------------------------------------- */
.lx-ritual{position:relative;isolation:isolate;overflow-x:clip;padding:clamp(84px,11vw,150px) 0;color:#efe4cf;
  background:
    radial-gradient(900px 640px at 18% 34%,rgba(201,164,92,.15),transparent 62%),
    radial-gradient(700px 500px at 100% 100%,rgba(122,88,38,.16),transparent 60%),
    linear-gradient(180deg,#0c0907 0%,#130e09 100%);
  border-block:1px solid rgba(217,184,118,.16)}
.lx-ritual-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(40px,7vw,110px);align-items:start}
.lx-ritual-stage{position:sticky;top:calc(var(--header-h) + 36px)}
.lx-arch{position:relative;aspect-ratio:4/5;max-width:470px;margin-inline:auto;overflow:hidden;
  border-radius:999px 999px 28px 28px;border:1px solid rgba(217,184,118,.34);
  background:linear-gradient(172deg,rgba(255,240,210,.075),rgba(255,240,210,.012) 70%);
  box-shadow:0 50px 120px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,240,210,.08)}
.lx-arch::before{content:"";position:absolute;inset:12px;border-radius:999px 999px 20px 20px;border:1px solid rgba(217,184,118,.14);pointer-events:none}
.lx-arch-glow{position:absolute;inset:0;opacity:.3;filter:saturate(.9)}
.lx-arch-glow i{position:absolute;inset:0;background:radial-gradient(circle at 50% 56%,var(--g),transparent 56%)}
/* shade change: layer B (new colour, written directly by luxe.js) fades in over layer A, then A takes the colour and B resets */
.lx-arch .lx-l-b{opacity:0}
.lx-arch.lx-fading .lx-l-b{opacity:1;transition:opacity .8s ease}
.lx-arch-step{position:absolute;left:0;right:0;top:12%;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.lx-arch-step b{font:italic 500 1.5rem/1 var(--serif);color:var(--lx-gold)}
.lx-arch-step span{font-size:.64rem;letter-spacing:.42em;text-transform:uppercase;color:rgba(239,228,207,.62);margin-right:-.42em}
.lx-arch-step.lx-swap b,.lx-arch-step.lx-swap span,.lx-shade-name.lx-swap span{animation:lxSwap .6s var(--lx-ease)}
@keyframes lxSwap{from{opacity:.15;transform:translateY(6px)}to{opacity:1;transform:none}}
.lx-bottle{position:absolute;left:50%;top:22%;width:44%;margin-left:-22%;transform-origin:50% 92%;animation:lxSway 7.5s ease-in-out infinite}
.lx-bottle svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 24px 30px rgba(0,0,0,.45))}
.lx-liquid{transform-box:view-box;transform-origin:100px 210px;animation:lxSlosh 7.5s ease-in-out infinite}
.lx-wave{animation:lxWave 3.4s linear infinite}
.lx-spec{animation:lxSpec 7.5s ease-in-out infinite}
.lx-spec2{animation:lxSpec2 7.5s ease-in-out infinite}
@keyframes lxSway{0%,100%{transform:rotate(-3.5deg) translateY(0)}50%{transform:rotate(3.5deg) translateY(-10px)}}
@keyframes lxSlosh{0%,100%{transform:rotate(3.5deg)}50%{transform:rotate(-3.5deg)}}
@keyframes lxWave{to{transform:translateX(100px)}}
@keyframes lxSpec{0%,100%{transform:translateX(0);opacity:.3}50%{transform:translateX(16px);opacity:.18}}
@keyframes lxSpec2{0%,100%{transform:translateX(0);opacity:.1}50%{transform:translateX(-8px);opacity:.3}}
.lx-shade-name{position:absolute;left:0;right:0;bottom:15%;display:flex;flex-direction:column;align-items:center;gap:6px}
.lx-shade-name small{font-size:.6rem;letter-spacing:.42em;text-transform:uppercase;color:rgba(239,228,207,.5);margin-right:-.42em}
.lx-shade-name span{font:italic 500 1.45rem/1.1 var(--serif);color:#f6ecd6}
.lx-swatches{position:absolute;left:0;right:0;bottom:7%;display:flex;justify-content:center;gap:12px}
.lx-swatch{width:16px;height:16px;padding:0;border-radius:50%;border:0;cursor:pointer;background:var(--c);position:relative;
  box-shadow:inset 0 1px 2px rgba(255,255,255,.4),0 0 0 1px rgba(255,255,255,.12);transition:transform .3s var(--lx-ease)}
.lx-swatch::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid transparent}
.lx-swatch:hover{transform:scale(1.15)}
.lx-swatch.on::after{border-color:var(--lx-gold)}
.lx-swatch:focus-visible{outline:2px solid var(--lx-gold);outline-offset:5px}
.lx-ritual:not(.lx-live) .lx-bottle,.lx-ritual:not(.lx-live) .lx-liquid,.lx-ritual:not(.lx-live) .lx-wave,.lx-ritual:not(.lx-live) .lx-spec,.lx-ritual:not(.lx-live) .lx-spec2{animation-play-state:paused}

.lx-ritual-head .eyebrow{color:var(--lx-gold)}
.lx-ritual-head h2{color:#f6ecd6;font-weight:500;font-size:clamp(2.2rem,1.2rem + 2.8vw,3.6rem);line-height:1.02;margin-bottom:.45em}
.lx-ritual-head h2 em{font-style:italic;background:linear-gradient(100deg,#b48a3c,#f3dca0 45%,#c9a45c 70%,#e9cf8f);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
.lx-ritual-head .muted{color:rgba(239,228,207,.64);max-width:46ch;font-size:1.05rem}
.lx-steps-wrap{position:relative;margin-top:clamp(28px,5vh,56px)}
.lx-rail{position:absolute;left:27px;top:36px;bottom:36px;width:1px;background:rgba(217,184,118,.16)}
.lx-rail i{display:block;height:100%;transform-origin:50% 0;transform:scaleY(0);background:linear-gradient(180deg,var(--lx-gold-hi),#b48a3c);box-shadow:0 0 10px rgba(236,206,140,.45)}
.lx-steps{list-style:none;margin:0;padding:0}
.lx-step{display:grid;grid-template-columns:56px minmax(0,1fr);gap:28px;align-items:start;padding:clamp(30px,6vh,62px) 0;
  transition:opacity .7s var(--lx-ease),transform .9s var(--lx-ease)}
.lx-step-no{position:relative;z-index:1;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  font:500 1.12rem/1 var(--serif);letter-spacing:.04em;color:var(--lx-gold);background:#110d09;border:1px solid rgba(217,184,118,.36);
  transition:background .6s,color .6s,box-shadow .6s,border-color .6s}
.lx-step h3{display:flex;align-items:center;gap:.5em;color:#f6ecd6;font-weight:500;font-size:clamp(1.8rem,1.3rem + 1.3vw,2.5rem);margin:6px 0 .3em}
.lx-step-ico{display:inline-grid;color:var(--lx-gold);font-size:.62em;opacity:.85}
.lx-step p{color:rgba(239,228,207,.66);max-width:44ch;margin:0;font-weight:300;font-size:1.04rem}
html.lx-ready .lx-step{opacity:0;transform:translate3d(0,34px,0)}
html.lx-ready .lx-step.in{opacity:.38;transform:none}
html.lx-ready .lx-step.in.on{opacity:1}
.lx-step.on .lx-step-no{background:linear-gradient(140deg,#f7e6b0,#c9a45c 55%,#9f7a36);color:#1a130b;border-color:transparent;box-shadow:0 0 0 6px rgba(217,184,118,.1),0 10px 30px rgba(201,164,92,.35)}
.lx-ritual-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:22px;padding-left:84px}
.lx-ritual-cta .link-arrow{color:#e6c98c}
.lx-ritual-cta .link-arrow:hover{color:var(--lx-gold-hi)}

@media (max-width:900px){
  .lx-ritual-grid{grid-template-columns:1fr;gap:0}
  .lx-ritual-copy{display:contents}
  .lx-ritual-head{order:1;text-align:center}
  .lx-ritual-head .eyebrow::after{content:"";width:26px;height:1px;background:currentColor;opacity:.7}
  .lx-ritual-head .muted{margin-inline:auto}
  .lx-ritual-stage{order:2;position:relative;top:auto;margin:34px 0 8px}
  .lx-arch{max-width:330px}
  .lx-arch-step{top:9%}
  .lx-bottle{top:25%;width:40%;margin-left:-20%}
  .lx-steps-wrap{order:3}
  .lx-ritual-cta{order:4;padding-left:0;justify-content:center}
}
@media (max-width:560px){
  .lx-arch{max-width:290px}
  .lx-step{grid-template-columns:44px minmax(0,1fr);gap:18px;padding:26px 0}
  .lx-step-no{width:44px;height:44px;font-size:1rem}
  .lx-rail{left:21.5px}
  .lx-ritual-cta{flex-direction:column}
  .lx-ritual-cta .btn{width:100%}
}

/* ---------------------------------------------------------------
   4. Site-wide micro-luxury
   --------------------------------------------------------------- */
/* (a) soft gold cursor glow – desktop fine pointers only (created by luxe.js) */
.lx-glow{position:fixed;left:0;top:0;width:440px;height:440px;margin:-220px 0 0 -220px;border-radius:50%;pointer-events:none;z-index:58;
  background:radial-gradient(circle,rgba(201,164,92,.11) 0%,rgba(201,164,92,.045) 34%,transparent 66%);
  opacity:0;transition:opacity .6s ease;will-change:transform;contain:strict}
html[data-theme=dark] .lx-glow{background:radial-gradient(circle,rgba(236,212,154,.085) 0%,rgba(236,212,154,.03) 34%,transparent 66%)}
.lx-glow.on{opacity:1}
body.nav-open .lx-glow{opacity:0}

/* (b) page-transition veil + gentle entrance */
.lx-veil{position:fixed;inset:0;z-index:1001;pointer-events:none;opacity:0;background:var(--cream);transition:opacity .26s ease}
.lx-veil::after{content:"";position:absolute;left:50%;top:50%;width:140px;height:1px;margin-left:-70px;transform:scaleX(0);
  background:linear-gradient(90deg,transparent,var(--gold),transparent);transition:transform .7s var(--lx-ease) .08s}
html.lx-leaving .lx-veil{opacity:1}
html.lx-leaving .lx-veil::after{transform:scaleX(1)}
@media (prefers-reduced-motion:no-preference){
  body:not(.admin)>main{animation:lxPageIn .5s ease backwards}
}
@keyframes lxPageIn{from{opacity:0}}

/* (c) magnetic gold buttons (transform set by luxe.js) */
.btn-gold.lx-mag{transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background-position .4s}

/* ---------------------------------------------------------------
   Reduced motion: everything still, nothing hidden
   --------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .lx-intro{display:none!important}
  .lx-streaks i,.lx-crest-glint path,.lx-line>span,.lx-foil,.lx-bottle,.lx-liquid,.lx-wave,.lx-spec,.lx-spec2,.lx-scroll i::after{animation:none!important}
  .lx-crest-glint{display:none}
  .lx-line>span{background-position:0 0}
  html.lx-ready .lx-step,html.lx-ready .lx-step.in{opacity:1;transform:none}
  .lx-glow,.lx-veil{display:none}
}

/* ---- desktop menu: keep every item on one line on mid-size screens (05/11/2026) ---- */
@media (min-width:981px){
  .nav-links>a,.nav-links .dd>a,.brand-name{white-space:nowrap}
}
@media (min-width:981px) and (max-width:1300px){
  .nav-links{gap:.8rem}
  .nav-links>a:not(.btn),.nav-links .dd>a{font-size:.86rem}
  .nav-links .btn{padding-left:1rem;padding-right:1rem}
}
@media (min-width:981px) and (max-width:1200px){
  .nav-links>a[href*="blog"]{display:none}          /* Journal stays in the footer */
}
@media (min-width:981px) and (max-width:1080px){
  .nav-links>a[href*="contact"]{display:none}       /* Contact stays in the footer + contact buttons */
  .nav-links{gap:.65rem}
}