/* ==========================================================================
   MAISON ORELISSE — Design System
   ========================================================================== */

:root{
  --ivory:      #F6F1E7;
  --ivory-2:    #EFE9DB;
  --bone:       #E7DFCC;
  --ink:        #1B1712;
  --ink-2:      #2A241C;
  --charcoal:   #14110F;
  --gold:       #C9A66B;
  --gold-2:     #E4C989;
  --gold-deep:  #9C7C48;
  --sage:       #7C8768;
  --terracotta: #B6613C;
  --line:       rgba(27,23,18,.12);
  --line-lt:    rgba(255,255,255,.14);

  --font-display: 'Fraunces', 'Iowan Old Style', 'Times New Roman', serif;
  --font-body:    'Jost', 'Helvetica Neue', Arial, sans-serif;

  --ease: cubic-bezier(.22,1,.36,1);
  --radius: 2px;
  --container: 1280px;
  --header-h: 92px;
}

*,*::before,*::after{ box-sizing:border-box; }
[id]{ scroll-margin-top: calc(var(--header-h) + 24px); }
html{ scroll-behavior:smooth; }
/* reduced-motion (opt-in via Theme Options → html.reduce-motion) */
html.reduce-motion{ scroll-behavior:auto; }
html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }


body{
  margin:0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
a, button{ touch-action:manipulation; }
a:active:not(.btn), button:active:not(.btn){ opacity:.7; transition:opacity .1s linear; }
/* reduced-motion (opt-in via Theme Options → html.reduce-motion) */
html.reduce-motion a:active:not(.btn), html.reduce-motion button:active:not(.btn){ opacity:1; }


h1,h2,h3,h4{
  font-family: var(--font-display);
  font-optical-sizing: none;
  font-variation-settings: 'opsz' 28;
  font-weight:500;
  line-height:1.1;
  margin:0;
  letter-spacing:.2px;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-size:12px;
  letter-spacing:4px;
  text-transform:uppercase;
  color: var(--gold-deep);
  font-weight:500;
  margin-bottom:18px;
}
.eyebrow::before{
  content:'';
  width:32px; height:1px;
  background: var(--gold-deep);
}

.container{
  max-width: var(--container);
  margin:0 auto;
  padding:0 40px;
  padding-left: max(40px, env(safe-area-inset-left));
  padding-right: max(40px, env(safe-area-inset-right));
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:16px 34px;
  font-size:12px;
  letter-spacing:2.5px;
  text-transform:uppercase;
  font-weight:500;
  border:1px solid var(--ink);
  background:transparent;
  color:var(--ink);
  transition: background .5s var(--ease), border-color .5s var(--ease), color .5s var(--ease), transform .15s var(--ease);
  white-space:nowrap;
}
.btn:hover{ background:var(--ink); color:var(--ivory); }
.btn:active{ transform:scale(.96); transition-duration:.1s; }
/* reduced-motion (opt-in via Theme Options → html.reduce-motion) */
html.reduce-motion .btn:active{ transform:none; }

.btn.btn-solid{ background:var(--ink); color:var(--ivory); }
.btn.btn-solid:hover{ background:var(--gold-deep); border-color:var(--gold-deep); color:var(--ivory); }
.btn.btn-gold{ border-color:var(--gold); color:var(--gold-deep); }
.btn.btn-gold:hover{ background:var(--gold); border-color:var(--gold); color:var(--charcoal); }
.btn.btn-light{ border-color:var(--line-lt); color:var(--ivory); }
.btn.btn-light:hover{ background:var(--ivory); border-color:var(--ivory); color:var(--charcoal); }
.btn.btn-ghost{ border-color:transparent; padding-left:2px; padding-right:2px; color:inherit; position:relative; }
.btn.btn-ghost::after{ content:''; position:absolute; left:2px; right:2px; bottom:9px; height:1px; background:currentColor; opacity:.7; transition:opacity .4s var(--ease); }
.btn.btn-ghost:hover{ background:transparent; color:inherit; }
.btn.btn-ghost:hover::after{ opacity:1; }

.hero .btn{ text-shadow:0 1px 8px rgba(0,0,0,.5); }
.hero .btn.btn-light{ text-shadow:none; }

.link-inline{ border-bottom:1px solid rgba(27,23,18,.3); transition:border-color .3s var(--ease), color .3s var(--ease); padding-bottom:1px; }
.link-inline:hover{ border-color:var(--gold-deep); color:var(--gold-deep); }

/* ---------------- Product step badge ---------------- */
.step-badge{ display:inline-flex; align-items:center; gap:8px; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--gold-2); margin-bottom:16px; }
.step-badge .dot{ width:6px; height:6px; border-radius:50%; background:var(--gold-2); }
.ingredient-list{ margin-top:24px; display:flex; flex-direction:column; gap:16px; }
.ingredient-list li{ padding-left:20px; position:relative; font-size:14px; color:var(--ink-2); font-weight:300; line-height:1.6; }
.ingredient-list li::before{ content:''; position:absolute; left:0; top:8px; width:8px; height:1px; background:var(--gold-deep); }
.ingredient-list strong{ display:block; color:var(--ink); font-weight:500; margin-bottom:2px; }

/* ==========================================================================
   PRODUCT TEMPLATE — RESTRAINT (Aman-adjacent: quiet, generous, minimal)
   ========================================================================== */
.restraint-prose{ max-width:640px; margin:0 auto; text-align:center; }
.restraint-prose p{ font-size:17px; line-height:1.95; color:var(--ink-2); font-weight:300; }
.restraint-tags{ margin-top:32px; display:flex; gap:0; justify-content:center; flex-wrap:wrap; font-size:11px; letter-spacing:2.5px; text-transform:uppercase; color:var(--gold-deep); }
.restraint-tags span{
  padding:8px 16px; position:relative; cursor:default;
  transition:color .35s var(--ease);
}
.restraint-tags span::before{
  content:''; position:absolute; inset:2px 4px; border-radius:999px; background:var(--bone);
  opacity:0; transform:scale(.88); transition:opacity .35s var(--ease), transform .35s var(--ease); z-index:-1;
}
.restraint-tags span:hover{ color:var(--gold); }
.restraint-tags span:hover::before{ opacity:1; transform:scale(1); }
.restraint-tags span:not(:last-child)::after{ content:''; position:absolute; right:0; top:11px; width:1px; height:10px; background:var(--line); }
.restraint-steps{ max-width:480px; margin:64px auto 0; display:flex; flex-direction:column; }
.restraint-steps li{ display:flex; gap:24px; align-items:baseline; font-weight:300; color:var(--ink-2); font-size:15px; padding:20px 0; border-top:1px solid var(--line); }
.restraint-steps li:last-child{ border-bottom:1px solid var(--line); }
.restraint-steps .num{ font-family:var(--font-display); font-style:italic; font-size:20px; color:var(--gold-deep); flex:none; width:24px; }
.restraint-steps strong{ display:block; color:var(--ink); font-weight:500; margin-bottom:3px; font-size:15px; }
.restraint-siblings{ margin-top:8px; text-align:center; font-size:15px; color:var(--ink-2); font-weight:300; line-height:2; }
.restraint-cta{ text-align:center; padding:120px 0; }
.restraint-cta h2{ max-width:16ch; margin:0 auto; }
.restraint-cta .btn{ margin-top:36px; }

/* ==========================================================================
   PRODUCT TEMPLATE — SCIENCE (Bader-adjacent: clinical, structured, precise)
   ========================================================================== */
.spec-strip{ border-top:1px solid var(--line-lt); border-bottom:1px solid var(--line-lt); margin-top:36px; display:flex; flex-wrap:wrap; }
.spec-strip div{ flex:1 1 0; padding:16px 22px 16px 0; border-left:1px solid var(--line-lt); padding-left:22px; }
.spec-strip div:first-child{ border-left:none; padding-left:0; }
.spec-strip .k{ font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ivory-2); opacity:.7; margin-bottom:6px; }
.spec-strip .v{ font-size:14px; color:var(--ivory); font-weight:500; }
.hero .spec-strip .k{ color:var(--ivory-2); }
.ingredient-table{ width:100%; border-collapse:collapse; margin-top:28px; font-size:14px; }
.ingredient-table th{ text-align:left; font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink-2); padding-bottom:12px; border-bottom:1px solid var(--ink); font-weight:500; }
.ingredient-table td{ padding:16px 20px 16px 0; border-bottom:1px solid var(--line); color:var(--ink-2); font-weight:300; vertical-align:top; }
.ingredient-table td:first-child{ color:var(--ink); font-weight:500; white-space:nowrap; }
.trial-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); margin-top:20px; }
.stat-tile{ background:var(--ivory); padding:36px 24px; text-align:center; }
.section-bone .stat-tile{ background:var(--bone); }
.stat-tile .num{ font-family:var(--font-display); font-size:clamp(34px,4vw,46px); color:var(--gold-deep); line-height:1; }
.stat-tile .label{ margin-top:10px; font-size:12px; color:var(--ink-2); font-weight:300; }
.stat-disclaimer{ margin-top:18px; font-size:11px; color:var(--ink-2); opacity:.55; text-align:center; }
.protocol-row{
  display:flex; align-items:center; gap:24px; padding:20px 0 20px 0; border-bottom:1px solid var(--line);
  transition:background .4s var(--ease), padding-left .4s var(--ease), border-color .4s var(--ease);
}
.protocol-row:first-child{ border-top:1px solid var(--line); }
.protocol-row:hover{ background:var(--bone); padding-left:16px; border-bottom-color:transparent; box-shadow:inset 2px 0 0 var(--gold); }
.protocol-row .name{ flex:1 1 220px; font-size:15px; transition:color .4s var(--ease); }
.protocol-row:hover .name{ color:var(--gold-deep); }
.protocol-row .fn{ flex:2 1 300px; font-size:13px; color:var(--ink-2); font-weight:300; }
.protocol-row.current{ background:var(--ivory); margin:0 -24px; padding:20px 24px; border-bottom-color:transparent; border-radius:2px; }
.protocol-row.current .name{ color:var(--gold-deep); font-weight:500; }

/* ==========================================================================
   PRODUCT TEMPLATE — EDITORIAL (Aesop-adjacent: narrative, asymmetric)
   ========================================================================== */
.hero-editorial .eyebrow{ font-family:var(--font-display); font-style:italic; text-transform:none; letter-spacing:0; font-size:17px; font-weight:400; }
.hero-editorial .eyebrow::before{ display:none; }
.hero-editorial .hero-content{ max-width:640px; }
.editorial-quote{ font-family:var(--font-display); font-style:italic; font-size:clamp(22px,2.6vw,30px); line-height:1.55; color:var(--ink); max-width:700px; margin:0 auto; text-align:center; padding:0 20px; }
.collage{ display:grid; grid-template-columns:1.25fr .75fr; gap:24px; align-items:end; }
.collage .media-frame.small{ aspect-ratio:3/4; margin-bottom:12%; }
.notes-row{ display:flex; justify-content:center; gap:56px; margin-top:56px; flex-wrap:wrap; text-align:center; }
.notes-row .note{ max-width:230px; }
.notes-row .note .label{ font-size:10px; letter-spacing:2.5px; text-transform:uppercase; color:var(--gold-2); margin-bottom:10px; }
.notes-row .note .val{ font-family:var(--font-display); font-style:italic; font-size:20px; color:var(--ivory); }
.notes-row .note .desc{ margin-top:10px; font-size:13px; font-weight:300; line-height:1.6; color:var(--ivory-2); }
.chapter-list{ display:flex; flex-direction:column; }
.chapter-row{ display:grid; grid-template-columns:64px 1fr auto; align-items:center; gap:24px; padding:32px 0; border-top:1px solid var(--line-lt); }
.chapter-list a.chapter-row{ transition: opacity .3s var(--ease); }
.chapter-list a.chapter-row:hover{ opacity:.65; }
.chapter-row:last-child{ border-bottom:1px solid var(--line-lt); }
.chapter-row .chnum{ font-family:var(--font-display); font-style:italic; font-size:32px; color:var(--gold-2); }
.chapter-row h3{ font-size:21px; color:var(--ivory); }
.chapter-row p{ font-size:13px; color:var(--ivory-2); font-weight:300; margin-top:4px; }
.chapter-row .arrow{ color:var(--gold-2); font-size:20px; }

/* numeral-free variant: a gold rule marks the row and draws fully in on hover, instead of a digit */
.chapter-list.no-num .chapter-row{ grid-template-columns:1fr; position:relative; padding-left:26px; transition:padding-left .4s var(--ease); }
.chapter-list.no-num .chapter-row::before{
  content:""; position:absolute; left:0; top:38px; width:12px; height:1px; background:var(--gold-2);
  transition:width .5s var(--ease-out);
}
.chapter-list.no-num .chapter-row:hover{ padding-left:34px; }
.chapter-list.no-num .chapter-row:hover::before{ width:20px; }
.editorial-close{ text-align:center; max-width:640px; margin:0 auto; }
.editorial-close p.editorial-quote{ margin-bottom:28px; }

@media (max-width:860px){
  .spec-strip{ flex-direction:column; }
  .spec-strip div{ border-left:none; border-top:1px solid var(--line-lt); padding:14px 0; }
  .spec-strip div:first-child{ border-top:none; }
  .trial-row{ grid-template-columns:1fr; }
  .collage{ grid-template-columns:1fr; }
  .collage .media-frame.small{ margin-bottom:0; }
  .protocol-row{ flex-wrap:wrap; }
  .chapter-row{ grid-template-columns:44px 1fr; }
  .chapter-row .arrow{ display:none; }
}

/* ---------------- Reveal on scroll ---------------- */
.reveal{ opacity:0; transform:translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal-stagger > *{ opacity:0; transform:translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal-stagger.in > *{ opacity:1; transform:none; }
.reveal-stagger.in > *:nth-child(1){ transition-delay:.05s; }
.reveal-stagger.in > *:nth-child(2){ transition-delay:.15s; }
.reveal-stagger.in > *:nth-child(3){ transition-delay:.25s; }
.reveal-stagger.in > *:nth-child(4){ transition-delay:.35s; }
.reveal-stagger.in > *:nth-child(5){ transition-delay:.45s; }
.reveal-stagger.in > *:nth-child(6){ transition-delay:.55s; }
.reveal-stagger.in > *:nth-child(7){ transition-delay:.65s; }
.reveal-stagger.in > *:nth-child(8){ transition-delay:.75s; }

/* Luxury text reveal — eyebrow line draws in, then the headline wipes open like a curtain */
.reveal .eyebrow::before{ width:0; transition:width .6s var(--ease) .15s; }
.reveal.in .eyebrow::before{ width:32px; }
.reveal h2{ clip-path:inset(0 100% 0 0); transition:clip-path 1.3s var(--ease) .3s; }
.reveal.in h2{ clip-path:inset(0 0 0 0); }
/* reduced-motion (opt-in via Theme Options → html.reduce-motion) */
html.reduce-motion .reveal .eyebrow::before{ width:32px; transition:none; }
html.reduce-motion .reveal h2{ clip-path:none; transition:none; }


/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1060;
  height: var(--header-h);
  display:flex; align-items:center;
  background: linear-gradient(180deg, rgba(15,12,9,.6) 0%, rgba(15,12,9,.32) 65%, rgba(15,12,9,0) 100%);
  border-bottom:1px solid transparent;
  transition: background .5s var(--ease), border-color .5s var(--ease), height .4s var(--ease);
}
.site-header.scrolled{
  background: rgba(246,241,231,.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-color: var(--line);
  height:76px;
}
.header-inner{
  width:100%;
  max-width: var(--container);
  margin:0 auto;
  padding:0 40px;
  padding-left: max(40px, env(safe-area-inset-left));
  padding-right: max(40px, env(safe-area-inset-right));
  display:flex; align-items:center; justify-content:space-between;
  gap:32px;
}
.brand{ position:relative; display:inline-flex; align-items:center; }
.brand img{ height:49px; width:auto; transition:height .4s var(--ease), opacity .4s var(--ease); animation:logoBreathe 7s ease-in-out infinite; will-change:transform, filter; }
.site-header.scrolled .brand img{ height:43px; }
.brand .logo-dark{ position:absolute; top:0; left:0; opacity:0; }
.brand .logo-light{ opacity:1; }
.site-header.scrolled .brand .logo-light{ opacity:0; }
.site-header.scrolled .brand .logo-dark{ opacity:1; }
@keyframes logoBreathe{
  0%,100%{ transform:scale(1) translateY(0); filter:drop-shadow(0 0 0 rgba(201,166,107,0)); }
  50%{ transform:scale(1.035) translateY(-.5px); filter:drop-shadow(0 0 7px rgba(201,166,107,.45)); }
}
/* Shine sweep: a soft light band travels across the wordmark, masked to the
   logo's own letterforms/rings so it only ever lights up real ink, never the
   transparent gaps between glyphs. */
.logo-shine{
  position:absolute; inset:0;
  pointer-events:none;
  background:linear-gradient(100deg, transparent 42%, rgba(255,255,255,.85) 49%, var(--gold-2) 53%, transparent 62%);
  background-size:280% 100%;
  background-position:160% 0;
  -webkit-mask-image:url(../images/logo.svg); mask-image:url(../images/logo.svg);
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:left center; mask-position:left center;
  mix-blend-mode:soft-light;
  animation:logoShine 6.5s ease-in-out infinite;
}
@keyframes logoShine{
  0%{ background-position:160% 0; }
  38%{ background-position:-60% 0; }
  100%{ background-position:-60% 0; }
}

/* Hover: a livelier response layered on top of the ambient idle motion —
   a soft gold halo blooms behind the mark, the breathe swaps to a quicker
   lift-and-settle, and the shine sweeps through faster. */
.brand::before{
  content:''; position:absolute; inset:-14px -18px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(201,166,107,.4), transparent 72%);
  opacity:0; transform:scale(.7);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
  pointer-events:none;
}
.brand:hover::before{ opacity:1; transform:scale(1); }
.brand:hover img{ animation:logoBreatheHover 1.1s var(--ease) infinite; }
.brand:hover .logo-shine{ animation-duration:1.7s; }
@keyframes logoBreatheHover{
  0%,100%{ transform:scale(1) translateY(0) rotate(0deg); filter:drop-shadow(0 0 0 rgba(201,166,107,0)); }
  45%{ transform:scale(1.06) translateY(-1.5px) rotate(-.6deg); filter:drop-shadow(0 0 12px rgba(201,166,107,.65)); }
  75%{ transform:scale(1.02) translateY(-.5px) rotate(.3deg); filter:drop-shadow(0 0 6px rgba(201,166,107,.4)); }
}
/* reduced-motion (opt-in via Theme Options → html.reduce-motion) */
html.reduce-motion .brand img{ animation:none; }
html.reduce-motion .logo-shine{ animation:none; opacity:0; }
html.reduce-motion .brand:hover img{ animation:none; }
html.reduce-motion .brand:hover .logo-shine{ animation:none; }
html.reduce-motion .brand::before{ transition:none; }


.main-nav ul{ display:flex; gap:40px; align-items:center; }
.nav-link{
  font-size:12px; letter-spacing:2px; text-transform:uppercase; font-weight:500;
  position:relative; padding:6px 0;
  color:var(--ivory);
  text-shadow:0 1px 3px rgba(0,0,0,.55), 0 1px 10px rgba(0,0,0,.4);
  transition: color .4s var(--ease), text-shadow .4s var(--ease);
  white-space:nowrap;
}
.main-nav ul > li{ flex:none; }
.nav-link::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--gold-2); transition:width .4s var(--ease), background .4s var(--ease);
}
.nav-link:hover::after, .nav-link.active::after{ width:100%; }
.site-header.scrolled .nav-link{ color:var(--ink); text-shadow:none; }
.site-header.scrolled .nav-link::after{ background:var(--gold-deep); }

/* ---------------- Collections dropdown (desktop) ---------------- */
.has-dropdown{ position:relative; }
.dropdown-toggle{ display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
.dropdown-toggle .caret{
  width:6px; height:6px; margin-top:-3px;
  border-right:1px solid currentColor; border-bottom:1px solid currentColor;
  transform:rotate(45deg); transition:transform .3s var(--ease);
}
.has-dropdown:hover .dropdown-toggle .caret,
.has-dropdown:focus-within .dropdown-toggle .caret{ transform:rotate(225deg); margin-top:3px; }
.dropdown-menu{
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  width:520px; padding-top:22px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .3s var(--ease), visibility 0s linear .3s;
}
.has-dropdown:hover .dropdown-menu,
.has-dropdown:focus-within .dropdown-menu{
  opacity:1; visibility:visible; pointer-events:auto;
  transition:opacity .3s var(--ease), visibility 0s linear 0s;
}
.dropdown-menu-inner{
  background:var(--ivory); border:1px solid var(--line); border-radius:2px;
  box-shadow:0 28px 56px rgba(20,17,15,.2);
  padding:20px; display:grid; grid-template-columns:1fr 1fr; gap:4px;
}
.dropdown-menu a{
  display:block; padding:12px 14px; border-radius:2px;
  transition:background .25s var(--ease);
}
.dropdown-menu a:hover{ background:var(--bone); }
.dropdown-menu .sub-tag{ display:block; font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--gold-deep); margin-bottom:4px; }
.dropdown-menu .sub-name{ display:block; font-family:var(--font-display); font-size:17px; color:var(--ink); }
.dropdown-menu .view-all{ grid-column:1 / -1; margin-top:6px; padding-top:16px; border-top:1px solid var(--line); text-align:center; }
.dropdown-menu .view-all .sub-name{ font-family:var(--font-body); font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--gold-deep); }

.header-actions{ display:flex; align-items:center; gap:24px; }
.header-actions .btn{ padding:12px 26px; }
.site-header:not(.scrolled) .header-actions .btn-gold{
  background: rgba(15,12,9,.55);
  border-color: var(--gold-2);
  color: var(--gold-2);
  box-shadow: 0 2px 14px rgba(0,0,0,.25);
}
.site-header:not(.scrolled) .header-actions .btn-gold:hover{ background:var(--gold); border-color:var(--gold); color:var(--charcoal); box-shadow:none; }

.icon-btn{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; padding:0; background:none; border:none;
  color:var(--ivory); filter: drop-shadow(0 1px 3px rgba(0,0,0,.55));
  transition: color .4s var(--ease), opacity .3s var(--ease);
}
.icon-btn:hover{ opacity:.7; }
.site-header.scrolled .icon-btn{ color:var(--ink); filter:none; }

/* ---------------- Search overlay ---------------- */
.search-overlay{
  position:fixed; inset:0; z-index:1150;
  background:rgba(20,17,15,.97);
  display:flex; align-items:flex-start; justify-content:center;
  padding:14vh 24px 0;
  opacity:0; visibility:hidden; transform:translateY(-12px);
  transition: opacity .45s var(--ease), transform .45s var(--ease), visibility 0s linear .45s;
}
.search-overlay.open{
  opacity:1; visibility:visible; transform:none;
  transition: opacity .45s var(--ease), transform .45s var(--ease), visibility 0s linear 0s;
}
.search-close{
  position:absolute; top:28px; right:32px; background:none; border:none;
  color:var(--ivory-2); font-size:32px; line-height:1; font-weight:300; padding:8px;
  transition:color .3s var(--ease), transform .3s var(--ease);
}
.search-close:hover{ color:var(--gold-2); transform:rotate(90deg); }
.search-inner{ width:100%; max-width:640px; }
.search-inner .eyebrow{ color:var(--gold-2); }
.search-inner .eyebrow::before{ background:var(--gold-2); }
.search-input{
  width:100%; background:transparent; border:none; border-bottom:1px solid var(--line-lt);
  font-family:var(--font-display); font-size:clamp(24px,3.4vw,36px); font-weight:400;
  color:var(--ivory); padding:14px 2px 20px; transition:border-color .3s var(--ease);
}
.search-input::placeholder{ color:rgba(239,233,222,.4); }
.search-input:focus{ outline:none; border-color:var(--gold); }
.search-results{ margin-top:8px; max-height:52vh; overflow-y:auto; }
.search-result{
  display:block; padding:20px 2px; border-bottom:1px solid var(--line-lt);
  transition:padding-left .3s var(--ease);
}
.search-result:hover, .search-result:focus{ padding-left:12px; outline:none; }
.search-result .r-title{ font-family:var(--font-display); font-size:18px; color:var(--ivory); }
.search-result .r-desc{ margin-top:6px; font-size:13px; font-weight:300; color:var(--ivory-2); max-width:60ch; }
.search-empty{ margin-top:24px; font-size:14px; color:var(--ivory-2); font-weight:300; }

.hamburger{
  display:none; flex-direction:column; gap:5px; background:none; border:none; padding:8px; z-index:1100;
}
.hamburger span{ width:24px; height:1px; background:var(--ivory); box-shadow:0 1px 4px rgba(0,0,0,.35); transition: all .4s var(--ease); }
.site-header.scrolled .hamburger span{ background:var(--ink); box-shadow:none; }
.hamburger.open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; z-index:1050;
  background:var(--charcoal);
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:28px;
  min-height:100%;
  transform:translateY(-100%); transition:transform .55s var(--ease);
  overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  padding:calc(112px + env(safe-area-inset-top, 0px)) 24px calc(48px + env(safe-area-inset-bottom, 0px));
  will-change:transform;
}
.mobile-menu.open{ transform:translateY(0); }
.mobile-menu a{
  color:var(--ivory); font-family:var(--font-display); font-size:28px; font-weight:400;
}
.mobile-menu .btn{ margin-top:12px; }
.mobile-menu-item{ display:flex; flex-direction:column; align-items:center; gap:16px; }
.mobile-menu-item .row{ display:flex; align-items:center; gap:10px; }
.mobile-menu-item .row a{ color:var(--ivory); font-family:var(--font-display); font-size:28px; font-weight:400; }
.mobile-sub-toggle{
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; padding:0; background:none; border:none;
  color:var(--gold-2); cursor:pointer;
}
.mobile-sub-toggle svg{ transition:transform .35s var(--ease); }
.mobile-sub-toggle.open svg{ transform:rotate(180deg); }
.mobile-submenu{
  display:flex; flex-direction:column; align-items:center; gap:16px;
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .45s var(--ease), opacity .3s var(--ease), margin .45s var(--ease);
}
.mobile-submenu.open{ max-height:420px; opacity:1; margin-top:2px; }
.mobile-submenu a{ font-family:var(--font-body); font-size:15px; font-weight:300; letter-spacing:.5px; color:var(--ivory-2); }

/* ==========================================================================
   HERO (generic + page hero)
   ========================================================================== */
.hero{
  position:relative; min-height:100vh; min-height:100dvh; display:flex; align-items:flex-end;
  overflow:hidden; color:var(--ivory);
  padding-top:var(--header-h);
  box-sizing:border-box;
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media img, .hero-media video{ width:100%; height:100%; object-fit:cover; transform:scale(1.08); animation: heroZoom 14s var(--ease) forwards; will-change:transform; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
@keyframes heroZoom{ to{ transform:scale(1); } }
.hero-media::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(20,17,15,.35) 0%, rgba(20,17,15,.25) 40%, rgba(20,17,15,.88) 100%);
}
.hero-content{ position:relative; z-index:1; width:100%; padding:0 40px 120px; max-width:var(--container); margin:0 auto; }
.hero .eyebrow{ color:var(--gold-2); }
.hero .eyebrow::before{ background:var(--gold-2); }
.hero h1{ font-size:clamp(42px,6.5vw,84px); max-width:16ch; }
.hero p.lead{ font-size:18px; max-width:44ch; margin-top:22px; color:var(--ivory-2); font-weight:300; }
.hero-actions{ display:flex; gap:18px; margin-top:44px; flex-wrap:wrap; }

.scroll-cue{
  position:absolute; bottom:40px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color:var(--ivory-2); font-size:11px; letter-spacing:3px; text-transform:uppercase; z-index:1;
}
.scroll-cue .line{ width:1px; height:46px; background:linear-gradient(var(--gold-2),transparent); animation:scrollLine 2.2s ease-in-out infinite; }
@keyframes scrollLine{ 0%{ transform:scaleY(0); transform-origin:top; } 50%{ transform:scaleY(1); transform-origin:top; } 51%{ transform-origin:bottom; } 100%{ transform:scaleY(0); transform-origin:bottom; } }

/* page hero (shorter, for inner pages) — every page-hero instance sits below an
   in-flow breadcrumb bar that already reserves header height, so the padding-top
   inherited from .hero (meant for heroes sitting directly under the fixed header)
   would double that offset here; zero it out. */
.page-hero{ min-height:64vh; min-height:64dvh; padding-top:0; }
.page-hero .hero-content{ padding-bottom:90px; }

/* ==========================================================================
   SECTION UTILITIES
   ========================================================================== */
section{ position:relative; }
.section{ padding:140px 0; }
.section-tight{ padding:100px 0; }
.section-dark{ background:var(--charcoal); color:var(--ivory); }
.section-dark .eyebrow{ color:var(--gold-2); }
.section-dark .eyebrow::before{ background:var(--gold-2); }
.section-bone{ background:var(--bone); }

.section-head{ max-width:720px; margin-bottom:64px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size:clamp(30px,4vw,52px); }
.section-head p{ margin-top:20px; font-size:17px; color:var(--ink-2); font-weight:300; max-width:56ch; }
.section-dark .section-head p{ color:var(--ivory-2); }
.section-head.center p{ margin-left:auto; margin-right:auto; }

.divider{ height:1px; background:var(--line); width:100%; }

/* ---------------- grid / cards ---------------- */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.grid-2 > *{ min-width:0; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:36px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }

@property --panx{ syntax:'<percentage>'; inherits:false; initial-value:0%; }
@property --pany{ syntax:'<percentage>'; inherits:false; initial-value:0%; }

.media-frame{ display:block; position:relative; overflow:hidden; aspect-ratio:4/5; }
.media-frame img, .media-frame video{
  width:100%; height:100%; object-fit:cover;
  scale:1.06; translate:var(--panx) var(--pany);
  transition:scale .9s cubic-bezier(.19,1,.22,1);
  will-change:scale, translate; backface-visibility:hidden; -webkit-backface-visibility:hidden;
}

/* Living-image idle pan for the big narrative image+text frames (grid-2 / standalone
   feature images) — drives the registered --panx/--pany above, compositor-only (GPU)
   instead of forcing a full repaint of the source image every frame the way animating
   object-position did — that repaint cost was what read as a stutter/jerk rather than
   a smooth drift. The 1.06 base scale is the overscan headroom the pan needs so it
   never reveals an edge. `scale` and `translate` are kept as separate CSS properties
   (not combined into one `transform` shorthand) specifically so the hover zoom's
   `transition` only ever targets `scale`, between two plain numbers — an earlier
   version combined them into `transform:scale() translate3d(var(--panx),var(--pany),0)`
   with `transition:transform`, and while --panx/--pany kept animating correctly under
   the hood, Chrome would snapshot a stale/zero translate the instant the hover
   transition captured its target and hold the image pinned to translate(0,0) for the
   entire hover — a real, reproducible Chromium quirk with transitioning a shorthand
   whose value depends on a still-animating custom property, not a logic bug in the
   pan itself. Splitting the properties sidesteps it entirely: `translate` is never
   part of a transition, so it just keeps reading the live custom properties every
   frame, on both sides of the hover boundary, while `scale` alone eases smoothly.
   Same family as .quote-break's qbDrift but a distinct, quieter mechanism/timing for
   the smaller, closer-viewed frames used here. Card-grid thumbnails (many-at-once)
   are excluded below and stay hover-only, on
   purpose — with no drift animation running, they never had this issue. */
.media-frame img, .media-frame video{ animation:mfDrift 21s ease-in-out infinite alternate; }
@keyframes mfDrift{
  0%{ --panx:0%; --pany:0%; }
  50%{ --panx:2%; --pany:-1.6%; }
  100%{ --panx:-1.6%; --pany:2%; }
}
.card-collection .media-frame img, .card-collection .media-frame video,
.collection-track .media-frame img, .collection-track .media-frame video,
.collage .media-frame img, .collage .media-frame video{ animation:none; }

/* Entrance wipe for the same narrative frames, layered on top of .reveal's own
   fade/lift (different element than .reveal h2's horizontal wipe or .quote-break's —
   this one opens vertically, like a curtain lifting). The clip-path lives on the
   img/video, not on .media-frame.reveal itself: Chromium factors an element's own
   clip-path into IntersectionObserver's intersection ratio, so putting it on the
   observed container made intersectionRatio permanently 0 and .in never landed —
   the image stayed clipped to nothing forever. */
.media-frame.reveal{ transition:opacity .9s var(--ease), transform .9s var(--ease); }
.media-frame.reveal img, .media-frame.reveal video{ clip-path:inset(0 0 100% 0); transition:clip-path 1.1s var(--ease) .15s, scale .9s cubic-bezier(.19,1,.22,1); }
.media-frame.reveal.in img, .media-frame.reveal.in video{ clip-path:inset(0 0 0 0); }
/* reduced-motion (opt-in via Theme Options → html.reduce-motion) */
html.reduce-motion .media-frame img, html.reduce-motion .media-frame video{ animation:none; }
html.reduce-motion .media-frame.reveal img, html.reduce-motion .media-frame.reveal video{ clip-path:inset(0 0 0 0); transition:none; }


/* In-page montages and stand-in stills presented as a discrete block (PawVellé
   sections, and Rituels/Soleil now that they carry a placeholder still instead of
   the mismatched reused video) get a quiet gold keyline + soft lift — full-bleed
   hero/quote-break media stays edge-to-edge on purpose, untouched by this rule. */
.media-frame:has(video), .aside-media:has(video), .media-frame.framed{
  border:1px solid rgba(201,166,107,.55);
  box-shadow:0 26px 50px -30px rgba(20,17,15,.45);
}
.media-frame:hover img, .media-frame:hover video{ scale:1.12; }
.media-frame.square{ aspect-ratio:1/1; }
.media-frame.wide{ aspect-ratio:16/10; }
.media-frame.tall{ aspect-ratio:4/4.2; }
.media-frame.ink::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,17,15,0) 45%, rgba(20,17,15,.7) 100%);
  opacity:0; transition:opacity .6s var(--ease);
}
.media-frame.ink:hover::after{ opacity:1; }
.media-frame.ink:hover img, .media-frame.ink:hover video{ scale:1.15; }
/* touch devices have no hover — keep the scrim partly visible so it isn't hidden behind an unreachable state */
@media (hover:none){
  .media-frame.ink::after{ opacity:.5; }
  .media-frame.ink:active::after{ opacity:.85; }
  .media-frame.ink:active img{ scale:1.11; }
}

/* ---------------- Collections slider ---------------- */
.collection-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:32px; flex-wrap:wrap; margin-bottom:48px; }
.slider-arrows{ display:flex; gap:14px; flex:none; }
.slider-arrow{
  width:48px; height:48px; flex:none; border-radius:50%; border:1px solid var(--line);
  background:none; color:var(--ink); display:flex; align-items:center; justify-content:center;
  transition:all .3s var(--ease);
}
.slider-arrow:hover{ border-color:var(--gold-deep); background:var(--gold-deep); color:var(--ivory); }
.slider-arrow:disabled{ opacity:.3; pointer-events:none; }

.collection-slider{ overflow:hidden; }
.collection-track{
  display:flex; gap:28px; overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:6px; margin-bottom:-6px;
}
.collection-track::-webkit-scrollbar{ display:none; }
.collection-track .card-collection{ flex:0 0 calc(25% - 21px); min-width:230px; scroll-snap-align:start; }

.slider-dots{ display:flex; justify-content:center; gap:10px; margin-top:36px; }
.slider-dot{ width:8px; height:8px; padding:0; border-radius:50%; border:none; background:var(--line); transition:all .3s var(--ease); }
.slider-dot.active{ width:22px; border-radius:4px; background:var(--gold-deep); }

.card-collection{ position:relative; display:flex; flex-direction:column; height:100%; }
.card-collection .media-frame{ margin-bottom:22px; }
.card-collection .tag{ font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--gold-deep); margin-bottom:8px; display:block; }
.card-collection h3{ font-size:24px; margin-bottom:8px; }
.card-collection p{ color:var(--ink-2); font-size:14px; font-weight:300; flex:1 0 auto; }
.card-collection .card-link{ display:inline-flex; align-items:center; gap:8px; margin-top:14px; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; border-bottom:1px solid var(--ink); padding-bottom:3px; }
.card-collection .badge-soon{ margin-top:14px; align-self:flex-start; }

.stat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:40px; }
.stat{ text-align:center; }
.stat .num{ font-family:var(--font-display); font-size:clamp(34px,4vw,54px); color:var(--gold); }
.stat .label{ font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--ivory-2); margin-top:8px; }

.step-list{ counter-reset:step; }
.step{ display:grid; grid-template-columns:90px 1fr; gap:32px; padding:44px 0; border-top:1px solid var(--line); }
.step:last-child{ border-bottom:1px solid var(--line); }
.step-num{ counter-increment:step; font-family:var(--font-display); font-size:15px; color:var(--gold-deep); }
.step-num::before{ content: counter(step, decimal-leading-zero); font-size:34px; display:block; color:var(--ink); }
.step h3{ font-size:24px; margin-bottom:10px; }
.step p{ color:var(--ink-2); font-weight:300; max-width:60ch; }
.step-note{ display:inline-block; margin-top:14px; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--gold-deep); }

/* ============================================================
   METHOD STEPS — pinned scroll section (method.html only; the
   numbered .step/.step-num scaffolding above stays as-is for
   method-v2.html, which still uses it).
   The track is tall; the inner viewport is sticky so it holds
   centered on screen for the whole scroll pass, while each step
   cross-fades in, alternating its entrance side left/right/left/right.
   ============================================================ */
.method-pin-track{ position:relative; height:340vh; }
.method-pin-viewport{
  position:sticky; top:0;
  height:100vh; height:100dvh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.method-pin-step{
  --pin-off: 72px;
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding:0 var(--gutter, 24px);
  opacity:0; pointer-events:none;
  transition:opacity 1s var(--ease), transform 1s var(--ease);
}
.method-pin-step.side-left{ transform:translateX(calc(-1 * var(--pin-off))); }
.method-pin-step.side-right{ transform:translateX(var(--pin-off)); }
.method-pin-step.is-active{ opacity:1; transform:translateX(0); pointer-events:auto; }
.method-pin-step .step-inner{ max-width:640px; text-align:center; }
.method-pin-step .step-inner h3{ font-size:clamp(30px,4.4vw,46px); margin:16px 0 18px; }
.method-pin-step .step-inner p{ font-size:16px; color:var(--ink-2); font-weight:300; line-height:1.75; }

.method-pin-dots{ position:absolute; left:50%; bottom:clamp(28px,5vh,56px); transform:translateX(-50%); display:flex; gap:10px; z-index:2; }
.pin-dot{ width:6px; height:6px; border-radius:50%; background:var(--line); transition:background .4s var(--ease), transform .4s var(--ease); }
.pin-dot.is-active{ background:var(--gold-deep); transform:scale(1.4); }

@media (max-width:860px){
  .method-pin-track{ height:280vh; }
  .method-pin-step{ --pin-off: 32px; }
}

/* reduced-motion (opt-in via Theme Options → html.reduce-motion) */
html.reduce-motion .method-pin-track{ height:auto; }
html.reduce-motion .method-pin-viewport{ position:static; height:auto; display:block; overflow:visible; }
html.reduce-motion .method-pin-step{
    position:static; opacity:1; transform:none; pointer-events:auto; transition:none;
    display:block; padding:56px var(--gutter, 24px); border-top:1px solid var(--line);
  }
html.reduce-motion .method-pin-step:first-child{ border-top:none; }
html.reduce-motion .method-pin-step .step-inner{ max-width:720px; margin:0 auto; }
html.reduce-motion .method-pin-dots{ display:none; }


/* value / feature blocks */
.feature{ display:flex; gap:22px; align-items:flex-start; }
.feature .icon, .protocol-row .icon{ position:relative; flex:none; width:50px; height:50px; border:1px solid var(--gold); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--gold-deep); }
.feature .icon svg, .protocol-row .icon svg{ width:22px; height:22px; }
.feature h4{ font-size:17px; margin-bottom:8px; }
.feature p{ font-size:14px; color:var(--ink-2); font-weight:300; }
.section-dark .feature p{ color:var(--ivory-2); }
.section-dark .feature .icon{ border-color:var(--gold-2); color:var(--gold-2); }

/* small numeral badge riding the icon circle's edge */
.feature-num{
  position:absolute; right:-7px; bottom:-6px; width:20px; height:20px; border-radius:50%;
  background:var(--ivory); border:1px solid var(--gold); color:var(--gold-deep);
  font-family:var(--font-display); font-style:normal; font-size:10px; letter-spacing:.2px;
  display:flex; align-items:center; justify-content:center;
  transition:background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.section-dark .feature-num{ background:var(--charcoal); border-color:var(--gold-2); color:var(--gold-2); }

/* icon draw-in: circle pops in, then the line art traces itself */
.feature .icon, .protocol-row .icon{
  opacity:0; transform:scale(.45) rotate(-18deg);
  transition: opacity .5s var(--ease), transform .7s cubic-bezier(.34,1.56,.64,1),
    background-color .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease);
}
.feature .icon svg path, .protocol-row .icon svg path{
  stroke-dasharray:1; stroke-dashoffset:1;
  transition: stroke-dashoffset 1s var(--ease) .45s;
}
.reveal-stagger.in .feature .icon, .reveal-stagger.in .protocol-row .icon{ opacity:1; transform:scale(1) rotate(0deg); }
.reveal-stagger.in .feature .icon svg path, .reveal-stagger.in .protocol-row .icon svg path{ stroke-dashoffset:0; }

/* hover: icon fills solid gold and lifts, numeral badge follows suit */
.feature:hover .icon, .protocol-row:hover .icon{ background:var(--gold); border-color:var(--gold); color:var(--charcoal); transform:scale(1.08) rotate(-4deg); box-shadow:0 16px 30px -16px rgba(156,124,72,.6); }
.feature:hover .feature-num{ background:var(--gold-deep); border-color:var(--gold-deep); color:var(--ivory); transform:scale(1.12); }
.section-dark .feature:hover .icon{ background:var(--gold-2); border-color:var(--gold-2); color:var(--charcoal); }
.section-dark .feature:hover .feature-num{ background:var(--gold-2); border-color:var(--gold-2); color:var(--charcoal); }

/* ============================================================
   SEMANTIC ICON HOVER ANIMATIONS
   Each icon performs a small gesture tied to its own meaning on
   hover, rather than a single generic wobble — same principle
   used across the studio's other prototypes. Idle/hover-response
   lives on the outer .icon circle (background fill + lift, above);
   these run on the inner svg/paths so the two never fight over
   the same transform.
   ============================================================ */
.feature .icon svg path, .protocol-row .icon svg path{ transform-box:fill-box; transform-origin:50% 50%; }

/* Observe — eye: pupil dilates, lid gives a slow blink */
.feature:hover .icon-eye .eye-pupil{ animation:eyePupilPulse 1.6s ease-in-out infinite; }
.feature:hover .icon-eye .eye-outline{ animation:eyeBlink 2.6s ease-in-out infinite; transform-origin:50% 50%; }
@keyframes eyePupilPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.35); } }
@keyframes eyeBlink{ 0%,86%,100%{ transform:scaleY(1); } 91%{ transform:scaleY(.12); } 95%{ transform:scaleY(1); } }

/* Formulate / Context — droplet: quivers as if about to fall */
.feature:hover .icon-droplet .droplet-shape{ animation:dropletQuiver 1.8s ease-in-out infinite; transform-origin:50% 12%; }
@keyframes dropletQuiver{
  0%,100%{ transform:scale(1,1) translateY(0); }
  30%{ transform:scale(.92,1.08) translateY(1px); }
  55%{ transform:scale(1.06,.94) translateY(-1.5px); }
  80%{ transform:scale(.97,1.03) translateY(.5px); }
}

/* Refine — layers: top and bottom planes separate gently, then settle */
.feature:hover .icon-layers .layer-1{ animation:layerFan1 1.8s ease-in-out infinite; }
.feature:hover .icon-layers .layer-3{ animation:layerFan3 1.8s ease-in-out infinite .06s; }
@keyframes layerFan1{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-1.6px); } }
@keyframes layerFan3{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(1.6px); } }

/* Ritualize — clock: hands sweep a slow, deliberate circuit */
.feature:hover .icon-clock .clock-hands{ transform-box:view-box; transform-origin:12px 12px; animation:clockTick 5s linear infinite; }
@keyframes clockTick{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }

/* A Skincare Formula — dropper: tips as if dispensing, liquid line dims mid-pour */
.feature:hover .icon-dropper svg{ transform-box:view-box; transform-origin:12px 3px; animation:dropperTilt 2.2s ease-in-out infinite; }
.feature:hover .icon-dropper .dropper-liquid{ animation:dropperLiquid 2.2s ease-in-out infinite; }
@keyframes dropperTilt{ 0%,100%{ transform:rotate(0deg); } 35%,65%{ transform:rotate(-11deg); } }
@keyframes dropperLiquid{ 0%,15%,100%{ opacity:1; transform:translateY(0); } 45%,70%{ opacity:.35; transform:translateY(1.5px); } }

/* A Travel Ritual — suitcase: handle lifts, case gives a small wheeled wobble */
.feature:hover .icon-suitcase .suitcase-handle{ animation:handleLift 1.6s ease-in-out infinite; transform-origin:50% 100%; }
.feature:hover .icon-suitcase .suitcase-body{ animation:suitcaseRoll 1.6s ease-in-out infinite; transform-origin:50% 100%; }
@keyframes handleLift{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-1.5px); } }
@keyframes suitcaseRoll{ 0%,100%{ transform:rotate(0deg); } 25%{ transform:rotate(-2.5deg); } 75%{ transform:rotate(2.5deg); } }

/* A Sun-Protective Textile — sun: rays pulse outward in sequence, whole sun turns slowly */
.feature:hover .icon-sun svg{ transform-box:view-box; transform-origin:12px 12px; animation:sunSpin 8s linear infinite; }
.feature:hover .icon-sun .sun-ray{ animation:rayPulse 1.4s ease-in-out infinite; }
.icon-sun .sun-ray-2{ animation-delay:.1s; } .icon-sun .sun-ray-3{ animation-delay:.2s; } .icon-sun .sun-ray-4{ animation-delay:.3s; }
.icon-sun .sun-ray-5{ animation-delay:.4s; } .icon-sun .sun-ray-6{ animation-delay:.5s; } .icon-sun .sun-ray-7{ animation-delay:.6s; } .icon-sun .sun-ray-8{ animation-delay:.7s; }
@keyframes rayPulse{ 0%,100%{ opacity:.55; transform:scale(1); } 50%{ opacity:1; transform:scale(1.35); } }
@keyframes sunSpin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }

/* Companion-Animal Care — paw: toes press in sequence, pad follows */
.feature:hover .icon-paw .paw-toe{ animation:toePress 1.5s ease-in-out infinite; }
.icon-paw .paw-toe-2{ animation-delay:.08s; } .icon-paw .paw-toe-3{ animation-delay:.16s; } .icon-paw .paw-toe-4{ animation-delay:.24s; }
.feature:hover .icon-paw .paw-pad{ animation:padPress 1.5s ease-in-out infinite .32s; }
@keyframes toePress{ 0%,100%{ transform:scale(1) translateY(0); } 40%{ transform:scale(.82) translateY(1px); } 60%{ transform:scale(1.08) translateY(-.5px); } }
@keyframes padPress{ 0%,100%{ transform:scale(1); } 45%{ transform:scale(.9); } 65%{ transform:scale(1.05); } }

/* Function — shield: a protective pulse with a brief gold glow */
.feature:hover .icon-shield .shield-shape{ animation:shieldGuard 1.8s ease-in-out infinite; }
@keyframes shieldGuard{
  0%,100%{ transform:scale(1); filter:drop-shadow(0 0 0 rgba(201,166,107,0)); }
  40%{ transform:scale(1.1); filter:drop-shadow(0 0 4px rgba(201,166,107,.7)); }
  60%{ transform:scale(1.02); }
}

/* Compatibility — leaf: sways gently as if in a light current of air */
.feature:hover .icon-leaf svg{ transform-box:view-box; transform-origin:5px 19px; animation:leafSway 2.4s ease-in-out infinite; }
@keyframes leafSway{ 0%,100%{ transform:rotate(0deg); } 30%{ transform:rotate(6deg); } 70%{ transform:rotate(-4deg); } }

/* Experience — fingerprint: arcs ripple outward as if being read */
.feature:hover .icon-fingerprint .fp-arc{ animation:fpRipple 1.6s ease-in-out infinite; }
.icon-fingerprint .fp-arc-1{ animation-delay:.15s; }
.feature:hover .icon-fingerprint .fp-center{ animation:fpPulse 1.6s ease-in-out infinite .3s; }
@keyframes fpRipple{ 0%,100%{ opacity:.6; transform:scale(1); } 50%{ opacity:1; transform:scale(1.06); } }
@keyframes fpPulse{ 0%,100%{ opacity:.7; } 50%{ opacity:1; } }

/* Cosmetic Chemists — flask: gentle swirl, liquid line bubbles */
.protocol-row:hover .icon-flask svg{ transform-box:view-box; transform-origin:12px 2px; animation:flaskSwirl 2s ease-in-out infinite; }
.protocol-row:hover .icon-flask .flask-liquid{ animation:flaskBubble 1.3s ease-in-out infinite; }
@keyframes flaskSwirl{ 0%,100%{ transform:rotate(0deg); } 30%{ transform:rotate(-6deg); } 70%{ transform:rotate(5deg); } }
@keyframes flaskBubble{ 0%,100%{ transform:translateY(0); opacity:1; } 50%{ transform:translateY(-1.5px); opacity:.5; } }

/* Testing & Technical Laboratories — microscope: lens nudges as if focusing */
.protocol-row:hover .icon-microscope .scope-body{ animation:scopeFocus 1.6s ease-in-out infinite; }
@keyframes scopeFocus{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-1.4px); } }

/* Textile & Material Specialists — thread: winds and pulls taut */
.protocol-row:hover .icon-thread .thread-wind{ animation:threadPull 1.4s ease-in-out infinite; }
.protocol-row:hover .icon-thread .thread-spool{ animation:spoolBreathe 1.4s ease-in-out infinite; }
@keyframes threadPull{ 0%,100%{ transform:scaleX(1); opacity:1; } 50%{ transform:scaleX(.82); opacity:.6; } }
@keyframes spoolBreathe{ 0%,100%{ transform:scaleY(1); } 50%{ transform:scaleY(1.03); } }

/* Regulatory & Claims Consultants — clipboard: the check redraws itself, as if being verified */
.protocol-row:hover .icon-clipboard .clip-check{ animation:checkRedraw 1.8s ease-in-out infinite; }
@keyframes checkRedraw{ 0%,55%{ stroke-dashoffset:0; opacity:1; } 60%{ stroke-dashoffset:1; opacity:.4; } 100%{ stroke-dashoffset:0; opacity:1; } }

/* reduced-motion (opt-in via Theme Options → html.reduce-motion) */
html.reduce-motion .feature .icon, html.reduce-motion .protocol-row .icon{ opacity:1; transform:none; transition:none; }
html.reduce-motion .feature .icon svg path, html.reduce-motion .protocol-row .icon svg path{ stroke-dashoffset:0; transition:none; }
html.reduce-motion .feature:hover .icon, html.reduce-motion .protocol-row:hover .icon{ transform:none; }
html.reduce-motion .feature:hover .icon-eye .eye-pupil, html.reduce-motion .feature:hover .icon-eye .eye-outline, html.reduce-motion .feature:hover .icon-droplet .droplet-shape, html.reduce-motion .feature:hover .icon-layers .layer-1, html.reduce-motion .feature:hover .icon-layers .layer-3, html.reduce-motion .feature:hover .icon-clock .clock-hands, html.reduce-motion .feature:hover .icon-dropper svg, html.reduce-motion .feature:hover .icon-dropper .dropper-liquid, html.reduce-motion .feature:hover .icon-suitcase .suitcase-handle, html.reduce-motion .feature:hover .icon-suitcase .suitcase-body, html.reduce-motion .feature:hover .icon-sun svg, html.reduce-motion .feature:hover .icon-sun .sun-ray, html.reduce-motion .feature:hover .icon-paw .paw-toe, html.reduce-motion .feature:hover .icon-paw .paw-pad, html.reduce-motion .feature:hover .icon-shield .shield-shape, html.reduce-motion .feature:hover .icon-leaf svg, html.reduce-motion .feature:hover .icon-fingerprint .fp-arc, html.reduce-motion .feature:hover .icon-fingerprint .fp-center, html.reduce-motion .protocol-row:hover .icon-flask svg, html.reduce-motion .protocol-row:hover .icon-flask .flask-liquid, html.reduce-motion .protocol-row:hover .icon-microscope .scope-body, html.reduce-motion .protocol-row:hover .icon-thread .thread-wind, html.reduce-motion .protocol-row:hover .icon-thread .thread-spool, html.reduce-motion .protocol-row:hover .icon-clipboard .clip-check{
    animation:none; transform:none; filter:none; opacity:1;
  }


/* quote / testimonial */
.quote-block{ max-width:840px; margin:0 auto; text-align:center; }
.quote-block blockquote{ font-family:var(--font-display); font-size:clamp(24px,3vw,38px); font-weight:400; line-height:1.35; margin:0; }
.quote-block blockquote::first-letter{ font-size:1.35em; color:var(--gold-deep); }
.quote-block .quote-sub{ margin-top:18px; font-size:15px; color:var(--ink-2); font-weight:300; max-width:56ch; margin-left:auto; margin-right:auto; }
.quote-block cite{ display:block; margin-top:28px; font-style:normal; font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--gold-deep); }

/* full-bleed quote break (image + centered italic quote) */
.quote-break{ position:relative; padding:150px 0; text-align:center; overflow:hidden; color:var(--ivory); }
.quote-break .qb-media{ position:absolute; inset:0; z-index:0; }
.quote-break .qb-media img, .quote-break .qb-media video{
  width:100%; height:100%; object-fit:cover; transform-origin:center center;
  animation:qbDrift 26s ease-in-out infinite alternate;
  will-change:transform; backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
@keyframes qbDrift{
  0%{ transform:scale(1.05) translate3d(-1.2%,-1%,0) rotate(-.25deg); }
  50%{ transform:scale(1.16) translate3d(1.2%,.6%,0) rotate(.25deg); }
  100%{ transform:scale(1.05) translate3d(-.6%,1.2%,0) rotate(-.15deg); }
}
.quote-break .qb-media::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,12,9,.5) 0%, rgba(15,12,9,.74) 100%); }

/* subtle film-grain flicker over the dark scrim, pure CSS — no extra markup, applies to every .quote-break sitewide */
.quote-break::before{
  content:''; position:absolute; inset:-20%; z-index:1; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
  animation:qbGrain .45s steps(1) infinite;
}
@keyframes qbGrain{
  0%{ transform:translate(0,0); } 25%{ transform:translate(-1.5%,1%); } 50%{ transform:translate(1%,-1.5%); } 75%{ transform:translate(-1%,-1%); } 100%{ transform:translate(0,0); }
}

/* one-shot gold light sweep, fires once when the section scrolls into view */
.quote-break::after{
  content:''; position:absolute; top:-60%; left:-40%; width:32%; height:220%; z-index:1; pointer-events:none;
  background:linear-gradient(78deg, transparent 0%, transparent 38%, rgba(228,201,137,.22) 50%, transparent 62%, transparent 100%);
  transform:translateX(-160%) rotate(6deg); opacity:0;
}
.quote-break.in::after{ animation:qbSheen 2.6s var(--ease) .4s 1 forwards; }
@keyframes qbSheen{
  0%{ transform:translateX(-160%) rotate(6deg); opacity:0; }
  12%{ opacity:1; } 88%{ opacity:1; }
  100%{ transform:translateX(260%) rotate(6deg); opacity:0; }
}

.quote-break .qb-content{ position:relative; z-index:2; max-width:760px; margin:0 auto; padding:0 40px; }
.quote-break blockquote{
  font-family:var(--font-display); font-style:italic; font-weight:400; font-size:clamp(24px,3.2vw,40px); line-height:1.4; margin:0;
  clip-path:inset(0 100% 0 0); transition:clip-path 1.2s var(--ease) .35s;
}
.quote-break.in blockquote{ clip-path:inset(0 0 0 0); }
.quote-break blockquote::before{
  content:''; display:block; width:0; height:1px; background:var(--gold-2); margin:0 auto 26px;
  transition:width .7s var(--ease) .15s;
}
.quote-break.in blockquote::before{ width:52px; }

/* reduced-motion (opt-in via Theme Options → html.reduce-motion) */
html.reduce-motion .quote-break .qb-media img, html.reduce-motion .quote-break .qb-media video, html.reduce-motion .statement-break .sb-media img{ animation:none; transform:scale(1.06); }
html.reduce-motion .quote-break::before, html.reduce-motion .statement-break::before{ animation:none; }
html.reduce-motion .quote-break::after, html.reduce-motion .statement-break::after{ animation:none !important; opacity:0; }
html.reduce-motion .quote-break blockquote{ transition:none; clip-path:inset(0 0 0 0); }
html.reduce-motion .quote-break blockquote::before{ transition:none; width:52px; }


/* editorial pull-quote (in-body) */
.pull-quote{
  font-family:var(--font-display); font-style:italic; font-weight:400;
  font-size:clamp(19px,2.1vw,25px); line-height:1.45; color:var(--ink);
  border-left:2px solid var(--gold); padding-left:26px; margin:34px 0; max-width:50ch;
}
.section-dark .pull-quote{ color:var(--ivory); border-color:var(--gold-2); }

/* full-bleed statement break — one declarative line, no quotation marks/attribution (distinct from .quote-break) —
   shares .quote-break's living-background treatment (qbDrift pan + qbGrain flicker + one-shot qbSheen light sweep,
   all reused as-is below) so the two full-bleed break types read as one family sitewide, not a bespoke one-off. */
.statement-break{ position:relative; padding:130px 0; text-align:center; overflow:hidden; color:var(--ivory); }
.statement-break .sb-media{ position:absolute; inset:0; z-index:0; }
.statement-break .sb-media img{ width:100%; height:100%; object-fit:cover; transform-origin:center center; animation:qbDrift 26s ease-in-out infinite alternate; will-change:transform; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.statement-break .sb-media::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,12,9,.5) 0%, rgba(15,12,9,.78) 100%); }
.statement-break::before{
  content:''; position:absolute; inset:-20%; z-index:1; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
  animation:qbGrain .45s steps(1) infinite;
}
.statement-break::after{
  content:''; position:absolute; top:-60%; left:-40%; width:32%; height:220%; z-index:1; pointer-events:none;
  background:linear-gradient(78deg, transparent 0%, transparent 38%, rgba(228,201,137,.22) 50%, transparent 62%, transparent 100%);
  transform:translateX(-160%) rotate(6deg); opacity:0;
}
.statement-break.in::after{ animation:qbSheen 2.6s var(--ease) .4s 1 forwards; }
.statement-break .sb-content{ position:relative; z-index:2; max-width:820px; margin:0 auto; padding:0 40px; }
.statement-break .eyebrow{ justify-content:center; color:var(--gold-2); }
.statement-break .eyebrow::before{ background:var(--gold-2); }
.statement-break h2{ font-family:var(--font-display); font-weight:400; font-size:clamp(28px,4vw,46px); line-height:1.3; margin-top:18px; }

/* editorial aside — narrow sticky image + wide flowing text column, for anecdote/story moments (distinct from .grid-2 50/50 split) */
.editorial-aside{ display:grid; grid-template-columns:1fr 300px; gap:56px; align-items:start; }
.editorial-aside .aside-media img, .editorial-aside .aside-media video{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.editorial-aside .aside-media figcaption{ margin-top:12px; font-size:12px; color:var(--ink-2); font-style:italic; }
.editorial-aside .aside-text p{ font-size:17px; line-height:1.9; color:var(--ink-2); font-weight:300; max-width:62ch; }
.editorial-aside .aside-text p + p{ margin-top:20px; }
.editorial-aside.reverse{ grid-template-columns:300px 1fr; }
.editorial-aside.reverse .aside-media{ order:0; }
@media (max-width:860px){
  .editorial-aside, .editorial-aside.reverse{ grid-template-columns:1fr; }
  .editorial-aside .aside-media{ max-width:260px; }
}

/* feature variant — a story moment worth more visual weight than the standard
   narrow aside column (currently used for PawVellé's "How It Began") */
.editorial-aside.feature{ grid-template-columns:.85fr 460px; gap:64px; }
.editorial-aside.reverse.feature{ grid-template-columns:460px .85fr; }
@media (max-width:1080px){
  .editorial-aside.feature{ grid-template-columns:1fr 360px; gap:40px; }
  .editorial-aside.reverse.feature{ grid-template-columns:360px 1fr; }
}
@media (max-width:860px){
  .editorial-aside.feature, .editorial-aside.reverse.feature{ grid-template-columns:1fr; }
  .editorial-aside.feature .aside-media{ max-width:380px; }
}

/* The zoom-on-hover clip + growing shadow live on .frame-clip, a wrapper around
   just the <img> — NOT on .aside-media.framed itself, which also contains the
   figcaption. overflow:hidden only stops content from spilling past its OWN
   element's edge; it does nothing to stop a sibling from visually growing over
   another sibling within the same box. With the old single-wrapper structure,
   the hover-scaled image (scale 1.06→1.13) grew downward past its own original
   edge, past the container's overflow:hidden (which was clipping at the far
   edge of the whole figure, well below the caption too), and painted directly
   over the figcaption text sitting right beneath it. Scoping the clip to just
   the image's own box makes that overlap structurally impossible regardless of
   caption spacing. */
.aside-media.framed .frame-clip{ display:block; overflow:hidden; transition:box-shadow .5s var(--ease); border:1px solid rgba(201,166,107,.55); box-shadow:0 26px 50px -30px rgba(20,17,15,.45); }
.aside-media.framed .frame-clip img{ transition:scale .9s cubic-bezier(.19,1,.22,1); }
.aside-media.framed:hover .frame-clip img{ scale:1.13; }
.aside-media.framed:hover .frame-clip{ box-shadow:0 34px 64px -26px rgba(20,17,15,.5); }
.aside-media.framed figcaption{ transition:color .4s var(--ease); }
.aside-media.framed:hover figcaption{ color:var(--gold-deep); }

/* Editorial-aside images get their own idle pan (same mfDrift mechanism as .media-frame —
   see the --panx/--pany note above for why this is transform-driven rather than
   object-position now — offset timing so a page with both doesn't breathe in lockstep)
   plus an iris/circle entrance wipe — a third distinct reveal shape alongside
   .media-frame's vertical wipe and .quote-break blockquote's horizontal one. */
.editorial-aside .aside-media img, .editorial-aside .aside-media video{
  animation:mfDrift 24s ease-in-out infinite alternate;
  scale:1.06; translate:var(--panx) var(--pany);
  clip-path:circle(0% at 30% 50%); transition:clip-path 1.3s var(--ease) .2s, scale .9s cubic-bezier(.19,1,.22,1);
}
.editorial-aside.in .aside-media img, .editorial-aside.in .aside-media video{ clip-path:circle(150% at 30% 50%); }
.editorial-aside.reverse .aside-media img, .editorial-aside.reverse .aside-media video{ clip-path:circle(0% at 70% 50%); }
.editorial-aside.reverse.in .aside-media img, .editorial-aside.reverse.in .aside-media video{ clip-path:circle(150% at 70% 50%); }
/* reduced-motion (opt-in via Theme Options → html.reduce-motion) */
html.reduce-motion .editorial-aside .aside-media img, html.reduce-motion .editorial-aside .aside-media video{ animation:none; clip-path:none; transition:none; }


/* press strip */
.press-strip{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:32px; padding:30px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.press-strip span{ font-family:var(--font-body); font-size:12px; letter-spacing:3px; text-transform:uppercase; font-weight:500; color:var(--ink-2); opacity:.7; }

/* ==========================================================================
   FORMS
   ========================================================================== */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.field{ display:flex; flex-direction:column; gap:10px; }
.field.full{ grid-column:1/-1; }
.field label{ font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--ink-2); }
.field input, .field select, .field textarea{
  background:var(--ivory-2); border:1px solid var(--line);
  padding:15px 16px; font-family:var(--font-body); font-size:16px; color:var(--ink);
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.field input:hover, .field select:hover, .field textarea:hover{ border-color:rgba(27,23,18,.28); }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--gold-deep); background:var(--ivory);
}
.field select{
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M1 1L8 8L15 1' fill='none' stroke='%239C7C48' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; background-size:13px 8px;
  padding-right:42px; cursor:pointer;
}
.field textarea{ resize:vertical; min-height:140px; line-height:1.6; }
.form-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:36px; flex-wrap:wrap; gap:20px; }
.form-note{ font-size:13px; color:var(--ink-2); }
.form-success{ display:none; padding:28px; border:1px solid var(--gold); text-align:center; font-family:var(--font-display); font-size:18px; }
.form-success.show{ display:block; }

.newsletter-form{ display:flex; justify-content:center; gap:14px; max-width:460px; margin:34px auto 0; flex-wrap:wrap; }
.newsletter-form input{
  flex:1; min-width:220px; background:transparent; border:1px solid rgba(245,242,235,.32);
  padding:15px 18px; font-family:var(--font-body); font-size:16px; color:var(--ivory);
  transition:border-color .3s var(--ease);
}
.newsletter-form input::placeholder{ color:var(--ivory-2); opacity:.6; }
.newsletter-form input:hover{ border-color:rgba(245,242,235,.5); }
.newsletter-form input:focus{ outline:none; border-color:var(--gold); }
.newsletter-form input.err{ border-color:#B6613C; }
.newsletter-success{ display:none; margin-top:34px; font-family:var(--font-display); font-size:18px; color:var(--gold-2); }
.newsletter-success.show{ display:block; }
@media (max-width:560px){ .newsletter-form{ flex-direction:column; align-items:stretch; } }

.contact-info{ display:flex; flex-direction:column; gap:36px; }
.contact-info .item h4{ font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--gold-deep); margin-bottom:10px; }
.contact-info .item p{ font-size:16px; }
.contact-info .item a:hover{ color:var(--gold-deep); }

/* ==========================================================================
   FAQ ACCORDION
   ========================================================================== */
.faq-list{ max-width:820px; margin:0 auto; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:28px 0; background:none; border:none; text-align:left;
  font-family:var(--font-display); font-size:19px; color:var(--ink);
}
.faq-q .plus{ position:relative; width:20px; height:20px; flex:none; }
.faq-q .plus::before, .faq-q .plus::after{ content:''; position:absolute; background:var(--ink); transition:transform .4s var(--ease); }
.faq-q .plus::before{ top:50%; left:0; width:100%; height:1px; transform:translateY(-50%); }
.faq-q .plus::after{ left:50%; top:0; width:1px; height:100%; transform:translateX(-50%); }
.faq-item.open .faq-q .plus::after{ transform:translateX(-50%) rotate(90deg); opacity:0; }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .5s var(--ease); }
.faq-a p{ padding:0 0 28px; color:var(--ink-2); font-weight:300; max-width:70ch; }
.faq-cat{ font-family:var(--font-display); font-size:26px; margin:64px 0 20px; }
.faq-cat:first-child{ margin-top:0; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ background:var(--charcoal); color:var(--ivory-2); padding:100px 0 32px; }
.footer-top{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr 1fr; gap:40px; padding-bottom:70px; border-bottom:1px solid var(--line-lt); }
.footer-brand img{ height:32px; margin-bottom:20px; }
.footer-brand p{ font-size:14px; color:var(--ivory-2); font-weight:300; max-width:32ch; }
.footer-social{ display:flex; gap:16px; margin-top:24px; }
.footer-social a{ width:36px; height:36px; border:1px solid var(--line-lt); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:all .3s var(--ease); }
.footer-social a:hover{ border-color:var(--gold); color:var(--gold); }
.footer-col h5{ font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--gold-2); margin-bottom:22px; }
.footer-col ul{ display:flex; flex-direction:column; gap:13px; }
.footer-col a{ font-size:14px; font-weight:300; }
.footer-col a:hover{ color:var(--gold); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:28px; font-size:12px; color:rgba(239,233,222,.5); flex-wrap:wrap; gap:12px; }
.footer-bottom a:hover{ color:var(--gold); }

/* ==========================================================================
   MISC / BADGES
   ========================================================================== */
.badge-soon{ display:inline-flex; align-items:center; gap:8px; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--gold-deep); border:1px solid var(--gold); padding:8px 16px; }
.badge-soon .dot{ width:6px; height:6px; border-radius:50%; background:var(--gold); animation:pulseDot 1.8s ease-in-out infinite; }
a.badge-soon{ transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); }
a.badge-soon:hover{ background:var(--gold); color:var(--charcoal); border-color:var(--gold); }
a.badge-soon:hover .dot{ background:var(--charcoal); }
@keyframes pulseDot{ 0%,100%{ opacity:1; } 50%{ opacity:.3; } }

.badge-live{ display:inline-flex; align-items:center; gap:8px; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--charcoal); background:var(--gold); border:1px solid var(--gold); padding:8px 16px; }
.badge-live .dot{ width:6px; height:6px; border-radius:50%; background:var(--charcoal); }

.progress-line{ position:fixed; top:0; left:0; height:2px; background:var(--gold); z-index:1200; width:0%; }

/* legal specific */
.legal-grid{ display:grid; grid-template-columns:240px 1fr; gap:70px; align-items:start; }
.legal-body h2{ font-size:22px; margin:48px 0 16px; }
.legal-body h2:first-child{ margin-top:0; }
.legal-body h3{ font-size:17px; margin:32px 0 10px; color:var(--ink); }
.legal-body p, .legal-body li{ font-size:15px; color:var(--ink-2); font-weight:300; margin-bottom:14px; }
.legal-body ul{ padding-left:22px; list-style:disc; }
.legal-nav{ position:sticky; top:120px; }
.legal-nav a{ display:block; padding:10px 0; font-size:13px; border-bottom:1px solid var(--line); color:var(--ink-2); }
.legal-nav a:hover, .legal-nav a.active{ color:var(--gold-deep); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px){
  .grid-2{ grid-template-columns:1fr; gap:44px; }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .footer-top{ grid-template-columns:1fr 1fr; row-gap:48px; }
  .stat-row{ grid-template-columns:repeat(2,1fr); row-gap:36px; }
  .collection-track .card-collection{ flex:0 0 calc(50% - 14px); }
}
@media (max-width: 1180px) and (min-width: 861px){
  .header-inner{ padding:0 24px; padding-left:max(24px, env(safe-area-inset-left)); padding-right:max(24px, env(safe-area-inset-right)); gap:20px; }
  .main-nav ul{ gap:20px; }
  .nav-link{ font-size:11px; letter-spacing:1.4px; }
  .header-actions{ gap:14px; }
  .header-actions .btn{ padding:10px 18px; }
}
@media (max-width: 860px){
  .main-nav, .header-actions .btn{ display:none; }
  .hamburger{ display:flex; }
  .header-inner{ padding:0 24px; padding-left:max(24px, env(safe-area-inset-left)); padding-right:max(24px, env(safe-area-inset-right)); }
  .container{ padding:0 24px; padding-left:max(24px, env(safe-area-inset-left)); padding-right:max(24px, env(safe-area-inset-right)); }
  .section{ padding:90px 0; }
  .section-tight{ padding:70px 0; }
  .hero-content{ padding:0 24px 80px; }
  .page-hero{ min-height:72vh; min-height:72dvh; }
  .page-hero .hero-content{ padding-bottom:48px; }
  .form-grid{ grid-template-columns:1fr; }
  .grid-3{ grid-template-columns:1fr; }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .legal-grid{ grid-template-columns:1fr; gap:0; }
  .legal-nav{
    position:sticky; top:var(--header-h);
    display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch;
    background:var(--ivory); z-index:20;
    padding:14px 24px; margin:0 -24px 32px;
    border-bottom:1px solid var(--line);
    scrollbar-width:none;
  }
  .legal-nav::-webkit-scrollbar{ display:none; }
  .legal-nav a{
    flex:0 0 auto; display:inline-block;
    padding:8px 16px; border:1px solid var(--line); border-radius:999px;
    white-space:nowrap; font-size:12.5px;
  }
  .hero-actions{ flex-direction:column; align-items:flex-start; gap:16px; }
  .scroll-cue{ display:none; }
  .btn.btn-ghost{ padding:15px 10px; margin-left:-10px; }
  .pull-quote{ padding-left:18px; margin:28px 0; }
  .collection-head{ margin-bottom:36px; }
  .slider-arrow{ width:42px; height:42px; }
  .collection-track .card-collection{ flex:0 0 72%; }
  .search-overlay{ padding:11vh 20px 0; }
  .search-close{ top:20px; right:20px; }
  .step{ grid-template-columns:1fr; gap:14px; padding:36px 0; }
  .step-num::before{ font-size:26px; }
}
@media (max-width: 520px){
  .grid-4{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr; }
  .stat-row{ grid-template-columns:1fr 1fr; }
  .press-strip{ justify-content:center; text-align:center; }
  .press-strip span{ letter-spacing:1.5px; font-size:11px; }
  .hero-actions .btn{ width:100%; justify-content:center; }
  .btn.btn-ghost{ margin-left:0; }
  .btn{ white-space:normal; text-align:center; }
  .collection-track .card-collection{ flex:0 0 84%; min-width:0; }
  .collection-head{ align-items:flex-start; }
}

/* ---------------- Breadcrumb ---------------- */
.breadcrumb{ display:flex; align-items:center; flex-wrap:wrap; gap:9px; font-size:12px; letter-spacing:.5px; color:var(--ink-2); }
.breadcrumb a{ display:inline-flex; align-items:center; gap:6px; color:var(--ink-2); border-bottom:1px solid transparent; padding-bottom:2px; transition:color .3s var(--ease), border-color .3s var(--ease); }
.breadcrumb a:hover{ color:var(--ink); border-color:var(--line); }
.breadcrumb a svg{ opacity:.6; }
.breadcrumb .crumb-sep{ color:var(--gold-deep); font-size:10px; line-height:1; }
.breadcrumb .crumb-current{ color:var(--ink); font-weight:500; }

/* ---------------- Journal article (single entry) ---------------- */
.article-head{ max-width:800px; margin:0 auto; text-align:center; }
.article-head .eyebrow{ justify-content:center; }
.article-head h1{ margin-top:18px; font-size:clamp(32px,4.4vw,54px); line-height:1.15; }
.article-meta{
  display:flex; align-items:center; justify-content:center; gap:14px; margin-top:22px;
  font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--ink-2);
}
.article-meta .dot-sep{ width:3px; height:3px; border-radius:50%; background:var(--line); }
.article-head .lead{ margin-top:26px; font-size:19px; line-height:1.7; color:var(--ink-2); font-weight:300; max-width:64ch; margin-left:auto; margin-right:auto; }
.article-hero-image{ margin:56px auto 0; max-width:1040px; }
.article-hero-image img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.article-hero-image figcaption{ margin-top:14px; font-size:12px; color:var(--ink-2); font-style:italic; text-align:center; }

.article-body{ max-width:700px; margin:0 auto; }
.article-body p{ font-size:17px; line-height:1.9; color:var(--ink-2); font-weight:300; margin-bottom:24px; }
.article-body h2{ font-size:clamp(23px,2.8vw,29px); margin:52px 0 18px; color:var(--ink); }
.article-body h2:first-child{ margin-top:0; }
.article-body .pull-quote{ margin:44px auto; }
.article-body .article-cta{
  margin-top:52px; padding:36px 40px; background:var(--bone); border-radius:2px;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.article-body .article-cta p{ margin:0; font-size:15px; color:var(--ink); max-width:44ch; }
.article-tags{ max-width:700px; margin:40px auto 0; display:flex; gap:10px; flex-wrap:wrap; }
.article-tags a{
  font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--gold-deep);
  border:1px solid var(--line); padding:8px 16px; transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.article-tags a:hover{ background:var(--gold); border-color:var(--gold); color:var(--charcoal); }
@media (max-width:640px){
  .article-body .article-cta{ flex-direction:column; align-items:flex-start; padding:28px 24px; }
}

/* ---------------- Pagination ---------------- */
.pagination{ display:flex; align-items:center; justify-content:center; gap:32px; margin-top:56px; }
.pagination .page-numbers{ display:flex; gap:6px; }
.pagination .page-num{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; font-size:13px; color:var(--ink-2); border:1px solid transparent; transition:all .3s var(--ease); }
.pagination .page-num:hover{ border-color:var(--line); color:var(--ink); }
.pagination .page-num.active{ background:var(--ink); color:var(--ivory); }
.pagination .page-num.active:hover{ border-color:var(--ink); }
.pagination .page-prev, .pagination .page-next{ display:inline-flex; align-items:center; gap:8px; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--ink); transition:opacity .3s var(--ease); }
.pagination .page-prev:hover, .pagination .page-next:hover{ opacity:.6; }
.pagination [aria-disabled="true"]{ opacity:.3; pointer-events:none; }
@media (max-width:560px){
  .pagination{ gap:16px; }
  .pagination .page-prev span, .pagination .page-next span{ display:none; }
}