/* ===== Vina's Skincare — design tokens ===== */
:root{
  --text-xs:clamp(.75rem,.7rem + .25vw,.875rem);
  --text-sm:clamp(.875rem,.8rem + .35vw,1rem);
  --text-base:clamp(1rem,.95rem + .25vw,1.125rem);
  --text-lg:clamp(1.125rem,1rem + .75vw,1.5rem);
  --text-xl:clamp(1.5rem,1.2rem + 1.25vw,2.25rem);
  --text-2xl:clamp(2rem,1.2rem + 2.5vw,3.5rem);
  --text-3xl:clamp(2.5rem,1rem + 4vw,5rem);
  --text-hero:clamp(2.75rem,1rem + 6vw,6.5rem);
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--space-20:5rem;--space-24:6rem;--space-32:8rem;
  --radius-sm:.25rem;--radius-md:.5rem;--radius-lg:1rem;--radius-full:9999px;
  --transition-interactive:220ms cubic-bezier(.16,1,.3,1);
  --ease:cubic-bezier(.16,1,.3,1);
  --content-narrow:640px;--content-default:1040px;--content-wide:1280px;
  --font-display:'Cormorant Garamond','Cormorant',Georgia,serif;
  --font-body:'Switzer','Jost','Helvetica Neue',Arial,sans-serif;
  /* brand constants */
  --green-900:#1b2516;--green-800:#22301c;--green-700:#2c3d24;--green-600:#34452b;--green-500:#4a5f3c;
  --gold-300:#efdcae;--gold-400:#e6c98a;--gold-500:#d1a862;--gold-600:#b98d45;--gold-700:#8f6a2f;
  --cream-50:#faf6ee;--cream-100:#f4ebdd;--cream-200:#e9dcc5;--cream-300:#d9c8a9;
}
:root,[data-theme=light]{
  --color-bg:var(--cream-100);
  --color-surface:var(--cream-50);
  --color-surface-2:#fffdf8;
  --color-surface-offset:var(--cream-200);
  --color-border:color-mix(in oklab,var(--green-600) 18%,transparent);
  --color-divider:color-mix(in oklab,var(--green-600) 10%,transparent);
  --color-text:#1e2418;
  --color-text-muted:#5b6352;
  --color-text-faint:#8b907f;
  --color-text-inverse:var(--cream-50);
  --color-gold:var(--gold-600);
  --color-gold-bright:var(--gold-500);
  --color-green:var(--green-600);
  --color-green-deep:var(--green-800);
  --color-primary:var(--green-600);
  --color-primary-hover:var(--green-700);
  --shadow-sm:0 1px 2px oklch(.25 .03 120/.08);
  --shadow-md:0 8px 24px -8px oklch(.25 .03 120/.18);
  --shadow-lg:0 24px 60px -20px oklch(.25 .03 120/.3);
  --hero-overlay:linear-gradient(90deg,rgba(27,37,22,.78) 0%,rgba(27,37,22,.45) 40%,rgba(27,37,22,0) 70%);
}
[data-theme=dark]{
  --color-bg:var(--green-900);
  --color-surface:var(--green-800);
  --color-surface-2:var(--green-700);
  --color-surface-offset:#182012;
  --color-border:color-mix(in oklab,var(--gold-500) 22%,transparent);
  --color-divider:color-mix(in oklab,var(--gold-500) 12%,transparent);
  --color-text:var(--cream-100);
  --color-text-muted:#b9b39f;
  --color-text-faint:#7f8070;
  --color-text-inverse:var(--green-900);
  --color-gold:var(--gold-500);
  --color-gold-bright:var(--gold-400);
  --color-green:var(--green-700);
  --color-green-deep:var(--green-900);
  --color-primary:var(--gold-500);
  --color-primary-hover:var(--gold-400);
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 24px 60px -20px rgba(0,0,0,.6);
  --hero-overlay:linear-gradient(90deg,rgba(17,24,14,.85) 0%,rgba(17,24,14,.55) 40%,rgba(17,24,14,.05) 70%);
}

/* ===== utilities ===== */
.container{width:min(100% - 2*clamp(var(--space-4),5vw,var(--space-12)),var(--content-wide));margin-inline:auto}
.container--default{max-width:var(--content-default)}
.container--narrow{max-width:var(--content-narrow)}
.section{padding-block:clamp(var(--space-16),9vw,var(--space-32))}
.eyebrow{font-family:var(--font-body);font-size:var(--text-xs);letter-spacing:.28em;text-transform:uppercase;color:var(--color-gold);font-weight:500;display:inline-flex;align-items:center;gap:var(--space-3)}
.eyebrow::before{content:"";width:2rem;height:1px;background:var(--color-gold)}
.title{font-family:var(--font-display);font-weight:500;font-size:var(--text-2xl);line-height:1.05;letter-spacing:-.01em}
.title em{font-style:italic;font-weight:400;color:var(--color-gold)}
.lead{color:var(--color-text-muted);font-size:var(--text-base);max-width:54ch}
.skip-link{position:absolute;left:var(--space-4);top:-100px;background:var(--color-gold);color:var(--green-900);padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);z-index:100}
.skip-link:focus{top:var(--space-4)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-size:var(--text-sm);font-weight:500;letter-spacing:.08em;text-transform:uppercase;padding:.95rem 1.75rem;border-radius:var(--radius-full);text-decoration:none;min-height:44px;border:1px solid transparent;position:relative;overflow:hidden}
.btn--gold{background:linear-gradient(135deg,var(--gold-400),var(--gold-500) 55%,var(--gold-600));color:var(--green-900);box-shadow:0 6px 20px -6px rgba(185,141,69,.6)}
.btn--gold:hover{transform:translateY(-2px);box-shadow:0 12px 28px -8px rgba(185,141,69,.75)}
.btn--ghost{border-color:currentColor;color:var(--cream-50)}
.btn--ghost:hover{background:rgba(250,246,238,.12)}
.btn--outline{border-color:var(--color-border);color:var(--color-text)}
.btn--outline:hover{border-color:var(--color-gold);color:var(--color-gold)}
.btn--dark{background:var(--green-600);color:var(--cream-50)}
.btn--dark:hover{background:var(--green-700)}

/* gold rules */
.goldline{height:3px;background:linear-gradient(90deg,transparent,var(--gold-400) 20%,var(--gold-600) 50%,var(--gold-400) 80%,transparent);opacity:.9}

/* ===== header ===== */
.header{position:sticky;top:0;z-index:50;background:color-mix(in oklab,var(--green-800) 92%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--cream-50);border-bottom:1px solid color-mix(in oklab,var(--gold-500) 25%,transparent);transition:box-shadow .3s var(--ease)}
.header--scrolled{box-shadow:0 10px 30px -15px rgba(0,0,0,.5)}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);min-height:4.75rem}
.logo{display:inline-flex;align-items:center;gap:var(--space-3);color:inherit;text-decoration:none}
.logo svg{width:44px;height:44px;color:var(--gold-500);flex:none}
.logo__word{font-family:var(--font-display);font-size:var(--text-lg);letter-spacing:.22em;text-transform:uppercase;font-weight:500;line-height:1}
.logo__tld{text-transform:lowercase;letter-spacing:.08em;color:var(--gold-400);font-style:italic}
.logo__sub{display:block;font-family:var(--font-body);font-size:.6rem;letter-spacing:.34em;text-transform:uppercase;color:var(--gold-400);margin-top:.3rem;font-weight:500}
.nav{display:flex;gap:clamp(var(--space-3),1.6vw,var(--space-6));align-items:center}
.nav a{color:color-mix(in oklab,var(--cream-50) 85%,transparent);text-decoration:none;font-size:.78rem;letter-spacing:.09em;white-space:nowrap;text-transform:uppercase;font-weight:500;position:relative;padding:.5rem 0}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:.1rem;height:1px;background:var(--gold-400);transition:right .35s var(--ease)}
.nav a:hover,.nav a[aria-current=page]{color:var(--gold-300)}
.nav a:hover::after{right:0}
.header__actions{display:flex;align-items:center;gap:var(--space-3)}
.icon-btn{width:44px;height:44px;border-radius:var(--radius-full);display:inline-flex;align-items:center;justify-content:center;color:var(--cream-50);border:1px solid color-mix(in oklab,var(--gold-500) 35%,transparent)}
.icon-btn:hover{border-color:var(--gold-400);color:var(--gold-300)}
.header .btn{padding:.7rem 1.25rem}
.menu-toggle{display:none}
@media (max-width:900px){
  .nav{position:fixed;inset:4.75rem 0 auto 0;background:var(--green-800);flex-direction:column;align-items:flex-start;padding:var(--space-6) clamp(var(--space-4),5vw,var(--space-12)) var(--space-8);gap:var(--space-2);border-bottom:1px solid color-mix(in oklab,var(--gold-500) 30%,transparent);transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease)}
  .nav.is-open{opacity:1;transform:none;pointer-events:auto}
  .nav a{font-size:var(--text-base);padding:.75rem 0;width:100%}
  .menu-toggle{display:inline-flex}
  .header .btn--gold{display:none}
}

/* ===== hero ===== */
.hero{position:relative;min-height:min(92vh,880px);display:grid;align-items:center;color:var(--cream-50);overflow:hidden;isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:68% 55%;transform:scale(1.04);animation:heroZoom 12s var(--ease) forwards}
@keyframes heroZoom{to{transform:scale(1)}}
.hero::before{content:"";position:absolute;inset:0;background:var(--hero-overlay);z-index:-1}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:30%;background:linear-gradient(180deg,transparent,rgba(27,37,22,.55));z-index:-1}
.hero__inner{padding-block:clamp(var(--space-16),12vh,var(--space-32))}
.hero__content{max-width:38rem}
.hero .eyebrow{color:var(--gold-400)}
.hero .eyebrow::before{background:var(--gold-400)}
.hero__title{font-family:var(--font-display);font-weight:400;font-size:var(--text-hero);line-height:.98;letter-spacing:-.015em;margin-block:var(--space-5) var(--space-6)}
.hero__title em{font-style:italic;color:var(--gold-300)}
.hero__lead{font-size:var(--text-lg);font-weight:300;color:color-mix(in oklab,var(--cream-50) 88%,transparent);max-width:34ch;line-height:1.5}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-8)}
.hero__badges{display:flex;flex-wrap:wrap;gap:var(--space-6);margin-top:var(--space-12);font-size:var(--text-xs);letter-spacing:.2em;text-transform:uppercase;color:color-mix(in oklab,var(--cream-50) 70%,transparent)}
.hero__badges span{display:inline-flex;align-items:center;gap:var(--space-2)}
.hero__badges svg{width:14px;height:14px;color:var(--gold-400)}
.hero__scroll{position:absolute;right:clamp(var(--space-4),5vw,var(--space-12));bottom:var(--space-8);writing-mode:vertical-rl;font-size:var(--text-xs);letter-spacing:.3em;text-transform:uppercase;color:color-mix(in oklab,var(--cream-50) 60%,transparent);display:flex;align-items:center;gap:var(--space-3)}
.hero__scroll::after{content:"";width:1px;height:3.5rem;background:linear-gradient(var(--gold-400),transparent);animation:drip 2.4s ease-in-out infinite}
@keyframes drip{0%,100%{transform:scaleY(.4);transform-origin:top;opacity:.4}50%{transform:scaleY(1);opacity:1}}
@media (max-width:640px){
  .hero__scroll{display:none}
  .hero{display:flex;flex-direction:column-reverse;min-height:auto;background:var(--green-800)}
  .hero::before,.hero::after{display:none}
  .hero__media{position:relative;inset:auto;aspect-ratio:1/0.95;z-index:0}
  .hero__media img{animation:none;transform:none;object-position:50% 60%}
  .hero__media::after{content:"";position:absolute;inset:0 0 auto 0;height:22%;background:linear-gradient(180deg,var(--green-800),transparent)}
  .hero__inner{padding-block:var(--space-10) var(--space-6)}
  .hero__title{font-size:clamp(2.6rem,13vw,3.4rem)}
  .hero__lead{font-size:var(--text-base)}
  .hero__cta{margin-top:var(--space-6)}
  .hero__badges{margin-top:var(--space-6);gap:var(--space-4)}
  .logo__word{font-size:1rem;letter-spacing:.16em;white-space:nowrap}
  .logo__sub{font-size:.55rem;letter-spacing:.28em}
  .logo svg{width:36px;height:36px}
}
}

/* ===== marquee ===== */
.marquee{background:var(--green-800);color:var(--gold-300);overflow:hidden;border-block:1px solid color-mix(in oklab,var(--gold-500) 30%,transparent)}
.marquee__track{display:flex;width:max-content;animation:marquee 40s linear infinite;padding-block:var(--space-3)}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__track span{font-family:var(--font-display);font-size:var(--text-lg);font-weight:500;letter-spacing:.12em;text-transform:uppercase;padding-inline:var(--space-8);white-space:nowrap;display:inline-flex;align-items:center;gap:var(--space-8)}
.marquee__track span::after{content:"☥";color:var(--gold-500);font-size:1em}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ===== intro / proverb ===== */
.intro{text-align:center}
.intro .proverb{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:400;font-style:italic;line-height:1.2;max-width:22ch;margin-inline:auto;color:var(--color-text)}
.intro .proverb-by{display:block;margin-top:var(--space-4);font-family:var(--font-body);font-style:normal;font-size:var(--text-xs);letter-spacing:.3em;text-transform:uppercase;color:var(--color-gold)}
.intro .lead{margin:var(--space-8) auto 0;text-align:center}

/* ===== categories ===== */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4)}
.cat{position:relative;aspect-ratio:3/4;border-radius:var(--radius-lg);overflow:hidden;text-decoration:none;color:var(--cream-50);display:flex;align-items:flex-end;isolation:isolate;background:var(--green-700)}
.cat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .9s var(--ease)}
.cat::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(27,37,22,0) 30%,rgba(27,37,22,.85));z-index:-1}
.cat:hover img{transform:scale(1.06)}
.cat__body{padding:var(--space-6)}
.cat__name{font-family:var(--font-display);font-size:var(--text-xl);font-weight:500;line-height:1}
.cat__desc{font-size:var(--text-sm);color:color-mix(in oklab,var(--cream-50) 75%,transparent);margin-top:var(--space-2)}
.cat__link{display:inline-flex;align-items:center;gap:var(--space-2);margin-top:var(--space-4);font-size:var(--text-xs);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-300)}
.cat__link svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.cat:hover .cat__link svg{transform:translateX(4px)}
@media (max-width:900px){.cats{grid-template-columns:repeat(2,1fr)}}

/* ===== shop ===== */
.shop{background:var(--color-surface);position:relative}
.shop::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,var(--color-gold),transparent)}
.shop__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--space-6);margin-bottom:var(--space-10)}
.filters{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.chip{font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;font-weight:500;padding:.6rem 1.1rem;border-radius:var(--radius-full);border:1px solid var(--color-border);color:var(--color-text-muted);min-height:40px}
.chip:hover{border-color:var(--color-gold);color:var(--color-gold)}
.chip[aria-pressed=true]{background:var(--green-600);color:var(--cream-50);border-color:var(--green-600)}
[data-theme=dark] .chip[aria-pressed=true]{background:var(--gold-500);color:var(--green-900);border-color:var(--gold-500)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6) var(--space-5)}
@media (max-width:1100px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:720px){.grid{grid-template-columns:repeat(2,1fr);gap:var(--space-5) var(--space-3)}}
.card{display:flex;flex-direction:column;background:var(--color-surface-2);border:1px solid var(--color-divider);border-radius:var(--radius-lg);overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .3s;animation:cardIn .6s var(--ease) both}
@keyframes cardIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:color-mix(in oklab,var(--color-gold) 45%,transparent)}
.card__media{position:relative;aspect-ratio:1;background:linear-gradient(160deg,var(--cream-50),var(--cream-200));overflow:hidden}
[data-theme=dark] .card__media{background:linear-gradient(160deg,#f3ebdc,#e3d6bd)}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.card__media--contain img{object-fit:contain;padding:var(--space-4)}
.card:hover .card__media img{transform:scale(1.05)}
.card__tag{position:absolute;top:var(--space-3);left:var(--space-3);font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;background:color-mix(in oklab,var(--green-800) 88%,transparent);color:var(--gold-300);padding:.35rem .6rem;border-radius:var(--radius-sm)}
.card__tag--best{background:var(--gold-500);color:var(--green-900)}
.card__body{padding:var(--space-4) var(--space-4) var(--space-5);display:flex;flex-direction:column;gap:var(--space-2);flex:1}
.card__cat{font-size:var(--text-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--color-gold);font-weight:500}
.card__name{font-family:var(--font-display);font-size:var(--text-lg);font-weight:600;line-height:1.15}
.card__desc{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.5}
.card__foot{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-3);margin-top:auto;padding-top:var(--space-3)}
.card__price{font-family:var(--font-display);font-size:var(--text-xl);font-weight:600;font-variant-numeric:lining-nums tabular-nums;letter-spacing:0}
.card__price small{font-family:var(--font-body);font-size:var(--text-xs);color:var(--color-text-faint);margin-left:.25rem;letter-spacing:.05em}
.card .btn{padding:.7rem 1rem;font-size:.72rem;min-height:42px;white-space:nowrap;width:100%}
.shop__note{margin-top:var(--space-8);font-size:var(--text-sm);color:var(--color-text-faint);text-align:center}
.empty{grid-column:1/-1;text-align:center;padding:var(--space-16);color:var(--color-text-muted);font-family:var(--font-display);font-size:var(--text-xl)}

/* ===== ritual (full bleed) ===== */
.ritual{position:relative;color:var(--cream-50);background:var(--green-800);overflow:hidden}
.ritual__grid{display:grid;grid-template-columns:1.05fr .95fr;min-height:720px}
.ritual__media{position:relative;min-height:420px}
.ritual__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ritual__media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 70%,var(--green-800))}
.ritual__body{padding:clamp(var(--space-12),7vw,var(--space-24)) clamp(var(--space-6),6vw,var(--space-20));display:flex;flex-direction:column;justify-content:center}
.ritual .title{color:var(--cream-50)}
.ritual .lead{color:color-mix(in oklab,var(--cream-50) 75%,transparent)}
.steps{counter-reset:step;display:grid;gap:var(--space-5);margin-top:var(--space-10)}
.step{display:grid;grid-template-columns:3rem 1fr;gap:var(--space-4);padding-top:var(--space-5);border-top:1px solid color-mix(in oklab,var(--gold-500) 30%,transparent)}
.step::before{counter-increment:step;content:"0" counter(step);font-family:var(--font-display);font-size:var(--text-xl);color:var(--gold-400);line-height:1}
.step h3{font-family:var(--font-display);font-size:var(--text-lg);font-weight:600;color:var(--cream-50)}
.step p{font-size:var(--text-sm);color:color-mix(in oklab,var(--cream-50) 70%,transparent);margin-top:var(--space-1)}
@media (max-width:900px){.ritual__grid{grid-template-columns:1fr}.ritual__media::after{background:linear-gradient(180deg,transparent 60%,var(--green-800))}}

/* ===== about ===== */
.about__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(var(--space-8),6vw,var(--space-20));align-items:center}
.about__media{position:relative}
.about__media img{border-radius:var(--radius-lg);aspect-ratio:3/4;object-fit:cover;width:100%;box-shadow:var(--shadow-lg)}
.about__media::before{content:"";position:absolute;inset:-14px auto auto -14px;width:60%;height:60%;border:1px solid var(--color-gold);border-radius:var(--radius-lg);z-index:-1;opacity:.7}
.about__quote{position:absolute;right:-6%;bottom:8%;background:var(--green-800);color:var(--cream-50);padding:var(--space-5) var(--space-6);border-radius:var(--radius-md);max-width:18rem;box-shadow:var(--shadow-lg);border-left:3px solid var(--gold-500)}
.about__quote p{font-family:var(--font-display);font-size:var(--text-lg);font-style:italic;line-height:1.3}
.about__quote span{display:block;margin-top:var(--space-2);font-size:var(--text-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-400)}
.about__body .title{margin-block:var(--space-5) var(--space-6)}
.about__body p+p{margin-top:var(--space-4)}
.about__body p{color:var(--color-text-muted)}
.about__body p strong{color:var(--color-text);font-weight:500}
.about__sign{font-family:var(--font-display);font-size:var(--text-xl);font-style:italic;color:var(--color-gold);margin-top:var(--space-8)}
.about__sign small{display:block;font-family:var(--font-body);font-style:normal;font-size:var(--text-xs);letter-spacing:.24em;text-transform:uppercase;color:var(--color-text-faint);margin-top:var(--space-1)}
@media (max-width:900px){.about__grid{grid-template-columns:1fr}.about__media{max-width:28rem}.about__quote{right:0;bottom:-10%}}

/* ===== values strip ===== */
.values{background:var(--color-surface);border-block:1px solid var(--color-divider)}
.values__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-8)}
.value{text-align:center;padding-inline:var(--space-2)}
.value svg{width:44px;height:44px;margin:0 auto var(--space-4);color:var(--color-gold)}
.value h3{font-family:var(--font-display);font-size:var(--text-lg);font-weight:600}
.value p{font-size:var(--text-sm);color:var(--color-text-muted);margin:var(--space-2) auto 0;max-width:26ch}
@media (max-width:800px){.values__grid{grid-template-columns:repeat(2,1fr)}}

/* ===== boutique ===== */
.boutique{position:relative;overflow:hidden;color:var(--cream-50);isolation:isolate}
.boutique__bg{position:absolute;inset:0;z-index:-2}
.boutique__bg img{width:100%;height:100%;object-fit:cover}
.boutique::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(27,37,22,.92),rgba(27,37,22,.7));z-index:-1}
.boutique__inner{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--space-12);align-items:center}
.boutique .title{color:var(--cream-50)}
.boutique .lead{color:color-mix(in oklab,var(--cream-50) 78%,transparent)}
.boutique__card{background:color-mix(in oklab,var(--cream-50) 8%,transparent);border:1px solid color-mix(in oklab,var(--gold-500) 40%,transparent);border-radius:var(--radius-lg);padding:var(--space-8);backdrop-filter:blur(8px)}
.boutique__card h3{font-family:var(--font-display);font-size:var(--text-xl);font-weight:500}
.boutique__card ul{list-style:none;margin-top:var(--space-5);display:grid;gap:var(--space-3)}
.boutique__card li{display:flex;gap:var(--space-3);font-size:var(--text-sm);color:color-mix(in oklab,var(--cream-50) 85%,transparent)}
.boutique__card li::before{content:"☥";color:var(--gold-400);flex:none}
@media (max-width:900px){.boutique__inner{grid-template-columns:1fr}}

/* ===== faq ===== */
.faq__grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(var(--space-8),6vw,var(--space-20))}
.faq__list{display:grid;gap:var(--space-2)}
.faq__item{border-bottom:1px solid var(--color-divider)}
.faq__item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);padding:var(--space-5) 0;font-family:var(--font-display);font-size:var(--text-lg);font-weight:600;min-height:44px}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";font-weight:300;font-size:var(--text-xl);color:var(--color-gold);transition:transform .35s var(--ease);flex:none;line-height:1}
.faq__item[open] summary::after{transform:rotate(45deg)}
.faq__item summary:hover{color:var(--color-gold)}
.faq__item p{padding:0 0 var(--space-5);color:var(--color-text-muted);font-size:var(--text-sm);line-height:1.65}
@media (max-width:900px){.faq__grid{grid-template-columns:1fr}}

/* ===== contact ===== */
.contact{background:var(--green-800);color:var(--cream-50);position:relative;overflow:hidden}
.contact::before{content:"";position:absolute;inset:0;background:url("./assets/texture-gold.webp") center/cover;opacity:.12;mix-blend-mode:screen;pointer-events:none}
.contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(var(--space-8),6vw,var(--space-20));position:relative}
.contact .title{color:var(--cream-50)}
.contact .lead{color:color-mix(in oklab,var(--cream-50) 75%,transparent)}
.contact__list{list-style:none;margin-top:var(--space-8);display:grid;gap:var(--space-5)}
.contact__list li{display:grid;grid-template-columns:2.75rem 1fr;gap:var(--space-4);align-items:start}
.contact__list svg{width:2.75rem;height:2.75rem;padding:.7rem;border:1px solid color-mix(in oklab,var(--gold-500) 45%,transparent);border-radius:var(--radius-full);color:var(--gold-400)}
.contact__list b{display:block;font-size:var(--text-xs);letter-spacing:.24em;text-transform:uppercase;color:var(--gold-400);font-weight:500;margin-bottom:.2rem}
.contact__list a{color:var(--cream-50);text-decoration:none;font-family:var(--font-display);font-size:var(--text-lg);font-variant-numeric:lining-nums}
.contact__list a:hover{color:var(--gold-300)}
.contact__list span{color:color-mix(in oklab,var(--cream-50) 80%,transparent);font-size:var(--text-base)}
.form{background:color-mix(in oklab,var(--cream-50) 6%,transparent);border:1px solid color-mix(in oklab,var(--gold-500) 35%,transparent);border-radius:var(--radius-lg);padding:clamp(var(--space-6),4vw,var(--space-10));display:grid;gap:var(--space-4)}
.form label{display:grid;gap:var(--space-2);font-size:var(--text-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-300)}
.form input,.form textarea{width:100%;background:color-mix(in oklab,var(--green-900) 60%,transparent);border:1px solid color-mix(in oklab,var(--gold-500) 30%,transparent);color:var(--cream-50);padding:.9rem 1rem;border-radius:var(--radius-sm);font-size:var(--text-base);letter-spacing:0;text-transform:none;min-height:48px}
.form input:focus,.form textarea:focus{border-color:var(--gold-400);outline:none;box-shadow:0 0 0 3px color-mix(in oklab,var(--gold-500) 25%,transparent)}
.form textarea{min-height:8rem;resize:vertical}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.form .btn{justify-self:start;margin-top:var(--space-2)}
.form__ok{display:none;padding:var(--space-4);border:1px solid var(--gold-500);border-radius:var(--radius-sm);color:var(--gold-300);font-size:var(--text-sm)}
.form.is-sent .form__ok{display:block}
.form.is-sent .form__fields{display:none}
@media (max-width:900px){.contact__grid{grid-template-columns:1fr}.form__row{grid-template-columns:1fr}}

/* ===== footer ===== */
.footer{background:var(--green-900);color:color-mix(in oklab,var(--cream-50) 70%,transparent);padding-block:var(--space-16) var(--space-8)}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--space-10)}
.footer .logo{color:var(--cream-50)}
.footer__tag{margin-top:var(--space-5);font-size:var(--text-sm);max-width:30ch;line-height:1.6}
.footer h4{font-size:var(--text-xs);letter-spacing:.26em;text-transform:uppercase;color:var(--gold-400);font-weight:500;margin-bottom:var(--space-4)}
.footer ul{list-style:none;display:grid;gap:var(--space-2)}
.footer a{color:inherit;text-decoration:none;font-size:var(--text-sm)}
.footer a:hover{color:var(--gold-300)}
.social{display:flex;gap:var(--space-3);margin-top:var(--space-6)}
.social a{width:44px;height:44px;border-radius:var(--radius-full);border:1px solid color-mix(in oklab,var(--gold-500) 35%,transparent);display:inline-flex;align-items:center;justify-content:center;color:var(--cream-50)}
.social a:hover{border-color:var(--gold-400);color:var(--gold-300);transform:translateY(-2px)}
.social svg{width:18px;height:18px}
.footer__bottom{margin-top:var(--space-12);padding-top:var(--space-6);border-top:1px solid color-mix(in oklab,var(--gold-500) 20%,transparent);display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-3);font-size:var(--text-xs);letter-spacing:.06em}
.footer__bottom a{font-size:inherit}
@media (max-width:900px){.footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.footer__grid{grid-template-columns:1fr}}

/* ===== reveal ===== */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.12s}.reveal[data-delay="2"]{transition-delay:.24s}.reveal[data-delay="3"]{transition-delay:.36s}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* toast */
.toast{position:fixed;left:50%;bottom:var(--space-6);transform:translate(-50%,20px);background:var(--green-800);color:var(--cream-50);border:1px solid var(--gold-500);padding:var(--space-3) var(--space-5);border-radius:var(--radius-full);font-size:var(--text-sm);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s var(--ease);z-index:60;box-shadow:var(--shadow-lg)}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

/* In motion */
.motion{position:relative;overflow:hidden}
.motion::before{content:"";position:absolute;inset:0;background:url("./assets/texture-gold.webp") center/cover;opacity:.06;pointer-events:none}
.motion .container{position:relative}
.motion__head{max-width:46rem}
.motion__stage{display:grid;grid-template-columns:minmax(0,1fr) clamp(13rem,22vw,17rem);gap:var(--space-8);align-items:start;margin-top:var(--space-10)}
.theatre{margin:0;position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--green-900);box-shadow:var(--shadow-lg);border:1px solid color-mix(in oklab,var(--gold-500) 35%,transparent)}
.theatre::before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--gold-400) 25%,transparent);pointer-events:none;z-index:1}
.theatre__video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--green-900)}
.theatre__caption{max-width:none;display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-5);background:var(--green-800);color:var(--cream-50);font-family:var(--font-display);font-size:var(--text-lg)}
.theatre__shop{font-family:var(--font-body);font-size:var(--text-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-400);text-decoration:none;white-space:nowrap}
.theatre__shop:hover{color:var(--gold-300)}
.reel{margin:0;text-align:center}
.reel__frame{position:relative;aspect-ratio:9/16;border-radius:1.6rem;overflow:hidden;background:var(--green-900);box-shadow:var(--shadow-lg);border:3px solid var(--green-800);outline:1px solid color-mix(in oklab,var(--gold-500) 55%,transparent);outline-offset:2px}
.reel__video{display:block;width:100%;height:100%;object-fit:cover}
.reel__badge{position:absolute;top:var(--space-3);left:var(--space-3);font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;background:color-mix(in oklab,var(--green-800) 88%,transparent);color:var(--gold-300);padding:.35rem .6rem;border-radius:var(--radius-sm)}
.reel figcaption{max-width:none;margin-top:var(--space-4);font-size:var(--text-sm);color:var(--color-text-muted)}
.reel figcaption a{color:var(--color-gold)}
.clips{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--space-4);margin-top:var(--space-8)}
.clip{position:relative;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--color-divider);background:var(--color-surface-2);padding:0;text-align:left;cursor:pointer;transition:transform .4s var(--ease),border-color .3s,box-shadow .4s var(--ease)}
.clip img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .6s var(--ease)}
.clip span{display:block;padding:var(--space-3);font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;font-weight:500;color:var(--color-text)}
.clip::after{content:"";position:absolute;top:calc(50% - 1.4rem);left:calc(50% - 1rem);width:2rem;height:2rem;border-radius:50%;background:color-mix(in oklab,var(--green-900) 70%,transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e6c98a'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/55% no-repeat;border:1px solid color-mix(in oklab,var(--gold-400) 60%,transparent);opacity:.9;transition:opacity .3s}
.clip:hover{transform:translateY(-4px);border-color:color-mix(in oklab,var(--color-gold) 55%,transparent);box-shadow:var(--shadow-md)}
.clip:hover img{transform:scale(1.05)}
.clip[aria-pressed="true"]{border-color:var(--color-gold);box-shadow:0 0 0 2px color-mix(in oklab,var(--color-gold) 45%,transparent)}
.clip[aria-pressed="true"]::after{opacity:0}
@media (max-width:1100px){.clips{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){.motion__stage{grid-template-columns:1fr}.reel{max-width:16rem;margin:0 auto}}
@media (max-width:600px){.clips{grid-template-columns:repeat(2,1fr);gap:var(--space-3)}}

.reel__sound{position:absolute;left:50%;bottom:var(--space-4);transform:translateX(-50%);display:inline-flex;align-items:center;gap:.4rem;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--gold-300);background:color-mix(in oklab,var(--green-900) 78%,transparent);border:1px solid color-mix(in oklab,var(--gold-400) 55%,transparent);border-radius:var(--radius-full);padding:.5rem .9rem;backdrop-filter:blur(6px);cursor:pointer;white-space:nowrap}
.reel__sound .snd-on{display:none}.reel__sound .snd-off{display:block}
.reel__sound[aria-pressed="true"] .snd-on{display:block}.reel__sound[aria-pressed="true"] .snd-off{display:none}

/* Clothing page */
.hero--tees::before{background:linear-gradient(90deg,rgba(27,37,22,.9) 0%,rgba(27,37,22,.72) 40%,rgba(27,37,22,.25) 100%)}
.hero--tees .hero__media img{object-position:62% 30%}
@media (max-width:640px){.hero--tees .hero__media{aspect-ratio:16/11}.hero--tees .hero__media img{object-position:50% 30%}}
.tees__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-8);margin-top:var(--space-10)}
.tee__media{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--color-divider);background:var(--color-surface-2);box-shadow:var(--shadow-md)}
.tee__media img{width:100%;aspect-ratio:1;object-fit:cover;transition:transform .7s var(--ease)}
.tee:hover .tee__media img{transform:scale(1.04)}
.tee h3{font-family:var(--font-display);font-size:var(--text-xl);margin-top:var(--space-5)}
.tee p{color:var(--color-text-muted);font-size:var(--text-sm);margin-top:var(--space-2);max-width:32ch}
.notify__inner{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--space-12);align-items:center;padding-block:clamp(var(--space-16),8vw,var(--space-24))}
.notify .title{color:var(--cream-50)}.notify .lead{color:color-mix(in oklab,var(--cream-50) 78%,transparent)}
.notify__form{background:color-mix(in oklab,var(--cream-50) 8%,transparent);border:1px solid color-mix(in oklab,var(--gold-500) 40%,transparent);border-radius:var(--radius-lg);padding:var(--space-8);display:flex;flex-direction:column;gap:var(--space-3)}
.notify__form label{font-size:var(--text-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-400)}
.notify__form input{background:var(--green-900);color:var(--cream-50);border:1px solid color-mix(in oklab,var(--gold-500) 35%,transparent);border-radius:var(--radius-md);padding:.9rem 1rem;font-size:var(--text-base);min-height:48px}
.notify__form input:focus{outline:2px solid var(--gold-400);outline-offset:2px}
.notify__form .btn{margin-top:var(--space-2)}
.notify__fine{font-size:var(--text-xs);color:color-mix(in oklab,var(--cream-50) 65%,transparent);margin-top:var(--space-3);max-width:none}
.notify__fine a{color:var(--gold-400)}
.tease__inner{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--space-10);align-items:center;background:var(--color-surface-2);border:1px solid var(--color-divider);border-radius:var(--radius-lg);overflow:hidden}
.tease__media img{width:100%;height:100%;aspect-ratio:16/10;object-fit:cover}
.tease__body{padding:var(--space-8) var(--space-10) var(--space-8) 0}
@media (max-width:900px){.tees__grid{grid-template-columns:1fr;max-width:28rem;margin-inline:auto}.notify__inner{grid-template-columns:1fr}.tease__inner{grid-template-columns:1fr}.tease__body{padding:0 var(--space-6) var(--space-8)}}

.card__soon{color:var(--color-text);border-color:var(--color-gold)}
.card__soon:hover{background:color-mix(in oklab,var(--color-gold) 15%,transparent)}
.card__tag--soon{background:var(--gold-500);color:var(--green-900)}

.card__placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-10) var(--space-3) var(--space-4);text-align:center;color:var(--gold-500,#b8893a)}
.card__placeholder svg{width:clamp(44px,28%,88px);height:auto}
.card__placeholder span{font-family:var(--font-display);font-size:clamp(.9rem,2.8vw,1.15rem);line-height:1.2;color:var(--green-600,#2c3d24)}

/* ===== gift boxes ===== */
.gifts__head{text-align:center;display:flex;flex-direction:column;align-items:center;margin-bottom:var(--space-10)}
.gifts__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6)}
.giftad{margin:0}
.giftad__link{display:block;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--color-divider);box-shadow:0 10px 30px rgba(0,0,0,.08);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.giftad__link:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.14)}
.giftad img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.giftad figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3);margin-top:var(--space-3);font-family:var(--font-display);font-size:var(--text-lg)}
.giftad figcaption small{font-family:var(--font-body);font-size:var(--text-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--color-gold)}
.gifts__cta{text-align:center;margin-top:var(--space-10)}
@media (max-width:900px){.gifts__grid{grid-template-columns:repeat(2,1fr);gap:var(--space-4)}.giftad figcaption{flex-direction:column;gap:2px;font-size:var(--text-base)}}

.card__scents{font-size:var(--text-xs);line-height:1.5;color:var(--color-text-muted);margin-top:var(--space-2)}
.card__scents span{color:var(--color-gold);font-weight:600;letter-spacing:.08em;text-transform:uppercase}

/* Launch promo bar */
.promo{background:linear-gradient(90deg,var(--gold-600),var(--gold-500));color:#1b2516;font-size:var(--text-sm);text-align:center}
.promo__inner{display:flex;align-items:center;justify-content:center;gap:var(--space-4);flex-wrap:wrap;padding-block:.55rem}
.promo p{margin:0;letter-spacing:.02em}
.promo__code{display:inline-block;font-weight:700;letter-spacing:.12em;background:rgba(27,37,22,.12);border:1px dashed rgba(27,37,22,.45);border-radius:var(--radius-sm);padding:.05rem .45rem}
.promo__link{color:#1b2516;font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.promo__link:hover{color:#000}
.promo p{max-width:none}
@media (max-width:640px){.promo{font-size:.8rem}.promo__inner{gap:.25rem .75rem;padding-block:.45rem}.promo__lead{display:none}}
.promo__end{white-space:nowrap}