/* ============================================================================
   Ildi Pekar — dev2 redesign  ·  design system
   Three light themes: Dawn / Noon (default) / Dusk
   DNA: signature gold, terracotta clay, sage botanical, ivory paper.
   Type: Fraunces (editorial display)  ·  Montserrat (labels / UI / body)
   ============================================================================ */

/* ---------- THEME TOKENS ------------------------------------------------- */
:root,
[data-theme="noon"]{
  --paper:#FCFAF5;     --paper-2:#F5EFE5;   --paper-3:#FFFFFF;
  --ink:#221F1A;       --ink-2:#4C463D;     --ink-3:#8B8275;
  --gold:#A07C43;      --gold-deep:#7C5C2C; --gold-soft:#C7A66A;
  --clay:#BD6743;      --sage:#8A9A7B;
  --line:rgba(34,31,26,.11); --line-2:rgba(34,31,26,.20);
  --card-shadow:rgba(60,48,28,.10);
  --hero-veil:linear-gradient(90deg,rgba(252,250,245,.96) 0%,rgba(252,250,245,.86) 34%,rgba(252,250,245,.30) 62%,rgba(252,250,245,0) 100%);
  --img-veil:linear-gradient(180deg,rgba(20,16,10,0) 40%,rgba(20,16,10,.42) 100%);
  --theme-glyph-a:#F4D58A; --theme-glyph-b:#E9B45B;
}
[data-theme="dawn"]{
  --paper:#FCF3EE;     --paper-2:#F5E6DD;   --paper-3:#FFFDFC;
  --ink:#2C201D;       --ink-2:#5C4D48;     --ink-3:#A08C85;
  --gold:#B06E47;      --gold-deep:#8C5132; --gold-soft:#DB9F7C;
  --clay:#C2674A;      --sage:#93A088;
  --line:rgba(42,32,30,.11); --line-2:rgba(42,32,30,.20);
  --card-shadow:rgba(120,70,50,.10);
  --hero-veil:linear-gradient(90deg,rgba(251,246,243,.96) 0%,rgba(251,246,243,.86) 34%,rgba(251,246,243,.30) 62%,rgba(251,246,243,0) 100%);
  --img-veil:linear-gradient(180deg,rgba(40,20,16,0) 40%,rgba(40,20,16,.40) 100%);
  --theme-glyph-a:#F6CDB6; --theme-glyph-b:#E79E7A;
}
[data-theme="dusk"]{
  --paper:#F3E7CF;     --paper-2:#E9D8BA;   --paper-3:#FAF2E2;
  --ink:#2A2316;       --ink-2:#534832;     --ink-3:#8C7E62;
  --gold:#90692A;      --gold-deep:#6E4E18; --gold-soft:#C49742;
  --clay:#AE5E33;      --sage:#7E8A66;
  --line:rgba(42,35,22,.13); --line-2:rgba(42,35,22,.24);
  --card-shadow:rgba(80,58,20,.14);
  --hero-veil:linear-gradient(90deg,rgba(244,236,220,.96) 0%,rgba(244,236,220,.86) 34%,rgba(244,236,220,.30) 62%,rgba(244,236,220,0) 100%);
  --img-veil:linear-gradient(180deg,rgba(30,22,8,0) 40%,rgba(30,22,8,.46) 100%);
  --theme-glyph-a:#E7BE6A; --theme-glyph-b:#C9912F;
}
[data-theme="twilight"]{
  --paper:#0A0E1C;     --paper-2:#0C1222;   --paper-3:rgba(23,31,56,.74);
  --ink:#ECEFFA;       --ink-2:rgba(223,230,248,.76); --ink-3:rgba(199,209,238,.52);
  --gold:#CBA45C;      --gold-deep:#E4C079; --gold-soft:#93A3CE;
  --clay:#D59A6E;      --sage:#94AEC2;
  --line:rgba(214,224,252,.15); --line-2:rgba(214,224,252,.27);
  --card-shadow:rgba(0,0,0,.55);
  --hero-veil:linear-gradient(90deg,rgba(10,14,28,.96) 0%,rgba(10,14,28,.86) 34%,rgba(10,14,28,.30) 62%,rgba(10,14,28,0) 100%);
  --img-veil:linear-gradient(180deg,rgba(4,6,14,0) 40%,rgba(4,6,14,.5) 100%);
  --theme-glyph-a:#CFE0FF; --theme-glyph-b:#9BB0E6;
}

/* shared deep warm panel (footer / product moments / CTA band) — warm espresso, never cold black */
:root{
  --panel:#1B1712;  --panel-2:#231E18;  --panel-ink:#EFE6D6; --panel-ink-2:rgba(239,230,214,.62);
  --panel-gold:#CFA968;
  --maxw:1240px; --gutter:clamp(20px,5vw,72px);
  --r:18px; --r-lg:26px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- RESET / BASE ------------------------------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink-2);
  font-family:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-weight:400; font-size:16.5px; line-height:1.78; letter-spacing:.005em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background .55s var(--ease), color .55s var(--ease);
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:var(--gold-deep); text-decoration:none; transition:color .25s}
a:hover{color:var(--clay)}
::selection{background:var(--gold-soft); color:#1b1712}
h1,h2,h3,h4{font-family:"Fraunces",Georgia,serif; color:var(--ink); font-weight:380; margin:0; line-height:1.06; letter-spacing:-.012em}
p{margin:0 0 1.1em}

/* ---------- LAYOUT ------------------------------------------------------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter)}
.section{padding:clamp(74px,10vw,150px) 0}
.section--tight{padding:clamp(54px,7vw,96px) 0}
.bg-2{background:var(--paper-2)}
.bg-paper{background:var(--paper)}
.center{text-align:center}
.divider{height:1px;background:var(--line);border:0;margin:0}

/* ---------- TYPE HELPERS ------------------------------------------------- */
.eyebrow{
  font-family:"Montserrat",sans-serif; font-weight:500; font-size:.72rem;
  letter-spacing:.34em; text-transform:uppercase; color:var(--gold-deep);
  display:inline-flex; align-items:center; gap:.7em; margin:0 0 1.1rem;
}
.eyebrow::before{content:""; width:30px; height:1px; background:var(--gold); opacity:.7}
.eyebrow.center{justify-content:center}
.eyebrow.center::after{content:""; width:30px; height:1px; background:var(--gold); opacity:.7}
.display{font-size:clamp(2.5rem,6.4vw,5.3rem); line-height:1.02; letter-spacing:-.02em}
.h-xl{font-size:clamp(2.1rem,4.6vw,3.6rem)}
.h-lg{font-size:clamp(1.7rem,3.2vw,2.55rem)}
.h-md{font-size:clamp(1.32rem,2.1vw,1.7rem)}
.serif-it{font-style:italic}
.lead{font-size:clamp(1.06rem,1.5vw,1.22rem); line-height:1.72; color:var(--ink-2); font-weight:300}
.muted{color:var(--ink-3)}
.accent{color:var(--gold-deep)}
.maxch{max-width:62ch}
.amp{font-family:"Fraunces",serif; font-style:italic; color:var(--gold); font-weight:400}

/* ---------- BUTTONS ------------------------------------------------------ */
.btn{
  --b:var(--gold);
  display:inline-flex; align-items:center; gap:.7em;
  font-family:"Montserrat",sans-serif; font-weight:500; font-size:.78rem;
  letter-spacing:.18em; text-transform:uppercase;
  padding:1.02em 1.85em; border-radius:100px; cursor:pointer;
  border:1px solid var(--b); background:var(--b); color:#FCFAF5;
  transition:transform .35s var(--ease), background .35s, color .35s, border-color .35s, box-shadow .35s;
  box-shadow:0 10px 26px -16px var(--card-shadow);
}
.btn:hover{transform:translateY(-2px); background:var(--gold-deep); border-color:var(--gold-deep); color:#FCFAF5}
.btn .arr{transition:transform .35s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line-2); box-shadow:none}
.btn-ghost:hover{background:var(--ink); color:var(--paper); border-color:var(--ink); transform:translateY(-2px)}
.btn-light{background:var(--panel-gold); border-color:var(--panel-gold); color:#1b1712}
.btn-light:hover{background:#E2C079; border-color:#E2C079; color:#1b1712}
.textlink{font-family:"Montserrat",sans-serif; font-weight:500; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-deep); display:inline-flex; gap:.55em; align-items:center}
.textlink .arr{transition:transform .3s var(--ease)}
.textlink:hover .arr{transform:translateX(4px)}

/* ---------- NAV ---------------------------------------------------------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:90;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--gutter);
  transition:background .4s var(--ease), padding .4s var(--ease), box-shadow .4s, border-color .4s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{background:color-mix(in srgb,var(--paper) 88%,transparent); backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2); padding:12px var(--gutter); border-bottom-color:var(--line); box-shadow:0 8px 30px -22px var(--card-shadow)}
.brand{font-family:"Fraunces",serif; font-weight:430; font-size:1.42rem; letter-spacing:.04em; color:var(--ink); line-height:1; display:flex; flex-direction:column}
.brand small{font-family:"Montserrat",sans-serif; font-weight:500; font-size:.52rem; letter-spacing:.42em; text-transform:uppercase; color:var(--gold-deep); margin-top:5px}
.nav-links{display:flex; align-items:center; gap:clamp(18px,2vw,34px); list-style:none; margin:0; padding:0}
.nav-links a{font-family:"Montserrat",sans-serif; font-weight:500; font-size:.76rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink); position:relative; padding:6px 0}
.nav-links a::after{content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--gold); transition:width .3s var(--ease)}
.nav-links a:hover::after{width:100%}
.nav-right{display:flex; align-items:center; gap:18px}

/* theme switch (segmented Dawn/Noon/Dusk) */
.theme-switch{display:inline-flex; align-items:center; gap:2px; padding:4px; border:1px solid var(--line-2); border-radius:100px; background:color-mix(in srgb,var(--paper-3) 70%,transparent)}
.theme-switch button{
  width:30px; height:30px; border-radius:50%; border:0; cursor:pointer; background:transparent;
  display:grid; place-items:center; color:var(--ink-3); transition:background .3s, color .3s, transform .3s;
}
.theme-switch button svg{width:16px; height:16px}
.theme-switch button:hover{color:var(--ink); transform:translateY(-1px)}
.theme-switch button.active{background:var(--gold); color:#FCFAF5}
.theme-switch button.active:hover{color:#FCFAF5}

/* mobile nav */
.nav-toggle{display:none; background:none; border:0; cursor:pointer; width:30px; height:24px; position:relative}
.nav-toggle span{position:absolute; left:0; height:1.6px; width:100%; background:var(--ink); transition:.3s var(--ease)}
.nav-toggle span:nth-child(1){top:3px} .nav-toggle span:nth-child(2){top:11px} .nav-toggle span:nth-child(3){top:19px}
body.menu-open .nav-toggle span:nth-child(1){top:11px; transform:rotate(45deg)}
body.menu-open .nav-toggle span:nth-child(2){opacity:0}
body.menu-open .nav-toggle span:nth-child(3){top:11px; transform:rotate(-45deg)}
.mobile-menu{position:fixed; inset:0; z-index:80; background:var(--paper); padding:96px var(--gutter) 40px; transform:translateY(-100%); opacity:0; pointer-events:none; transition:transform .5s var(--ease), opacity .4s; display:flex; flex-direction:column; gap:6px}
body.menu-open .mobile-menu{transform:translateY(0); opacity:1; pointer-events:auto}
.mobile-menu a{font-family:"Fraunces",serif; font-size:2rem; color:var(--ink); padding:10px 0; border-bottom:1px solid var(--line)}
.mobile-menu .mm-foot{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:18px}

/* ---------- HERO --------------------------------------------------------- */
.hero{position:relative; min-height:96svh; display:flex; align-items:center; padding:140px 0 96px; overflow:hidden}
.hero-grid{display:grid; grid-template-columns:1.04fr .96fr; gap:clamp(24px,5vw,80px); align-items:center; width:100%}
.hero-copy{max-width:38rem}
.hero-copy .display{margin:0 0 .55em}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:2rem}
.hero-media{position:relative}
.hero-media .frame{position:relative; border-radius:230px 230px var(--r) var(--r); overflow:hidden; aspect-ratio:4/5; box-shadow:0 50px 90px -50px rgba(60,42,18,.5)}
.hero-media .frame img{width:100%; height:100%; object-fit:cover}
.hero-media .frame::after{content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.hero-badge{position:absolute; bottom:24px; left:-26px; background:var(--paper-3); border:1px solid var(--line); border-radius:100px; padding:13px 22px; box-shadow:0 24px 50px -28px var(--card-shadow); display:flex; align-items:center; gap:12px}
.hero-badge b{font-family:"Fraunces",serif; font-weight:500; color:var(--ink); font-size:1.2rem; line-height:1}
.hero-badge span{font-family:"Montserrat",sans-serif; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); line-height:1.3}
.hero-press{margin-top:2.4rem; display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.hero-press .lbl{font-family:"Montserrat",sans-serif; font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-3)}
.hero-press .names{font-family:"Fraunces",serif; font-style:italic; color:var(--ink-2); font-size:1.02rem}
.hero-deco{position:absolute; pointer-events:none; opacity:.5; color:var(--gold-soft)}
/* hero grounding: rating line, stats, floating press quote, scroll cue */
.hero-trust{display:flex; align-items:center; gap:12px; margin-top:1.5rem; flex-wrap:wrap}
.hero-trust .stars{color:var(--gold); letter-spacing:3px; font-size:.86rem; white-space:nowrap}
.hero-trust .tl{font-family:"Montserrat",sans-serif; font-size:.82rem; color:var(--ink-2); letter-spacing:.01em}
.hero-stats{display:flex; gap:clamp(16px,2.3vw,32px); margin-top:2.3rem; padding-top:1.7rem; border-top:1px solid var(--line); flex-wrap:wrap}
.hero-stats div{display:flex; flex-direction:column; gap:5px}
.hero-stats b{font-family:"Fraunces",serif; font-weight:480; font-size:clamp(1.3rem,1.9vw,1.72rem); color:var(--ink); line-height:1; letter-spacing:-.01em}
.hero-stats span{font-family:"Montserrat",sans-serif; font-size:.61rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3)}
.hero-quote{position:absolute; left:-36px; bottom:30px; max-width:250px; margin:0; background:var(--paper-3); border:1px solid var(--line); border-radius:18px; padding:18px 20px; box-shadow:0 34px 64px -34px var(--card-shadow); backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px)}
.hero-quote .stars{display:block; color:var(--gold); letter-spacing:2px; font-size:.68rem; margin-bottom:9px}
.hero-quote blockquote{margin:0 0 9px; font-family:"Fraunces",serif; font-style:italic; font-weight:400; font-size:1.13rem; line-height:1.28; color:var(--ink)}
.hero-quote figcaption{font-family:"Montserrat",sans-serif; font-size:.59rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-deep)}
.scroll-cue{position:absolute; left:50%; bottom:24px; transform:translateX(-50%); width:25px; height:40px; border:1px solid var(--line-2); border-radius:13px}
.scroll-cue span{position:absolute; left:50%; top:8px; width:3px; height:7px; border-radius:2px; background:var(--gold); transform:translateX(-50%); animation:scrolldot 1.9s var(--ease) infinite}
@keyframes scrolldot{0%{opacity:0;top:8px}35%{opacity:1}75%{opacity:0;top:23px}100%{opacity:0;top:23px}}

/* ---------- PRESS MARQUEE ------------------------------------------------ */
.press-strip{border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:30px 0; overflow:hidden}
.press-strip .lead-lbl{text-align:center; font-family:"Montserrat",sans-serif; font-size:.62rem; letter-spacing:.28em; text-transform:uppercase; color:var(--ink-3); margin-bottom:20px}
.marquee{display:flex; gap:clamp(34px,5vw,72px); align-items:center; width:max-content; animation:marq 42s linear infinite}
.marquee:hover{animation-play-state:paused}
.marquee span{font-family:"Fraunces",serif; font-weight:420; font-size:clamp(1.15rem,2vw,1.7rem); color:var(--ink); letter-spacing:.02em; white-space:nowrap; opacity:.82; transition:opacity .3s}
.marquee span:hover{opacity:1; color:var(--gold-deep)}
.marquee .dot{width:5px; height:5px; border-radius:50%; background:var(--gold); opacity:.6; font-size:0}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- EDITORIAL TWO-COL ------------------------------------------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,84px); align-items:center}
.split.rev .split-media{order:2}
.split-media{position:relative}
.media-arch{border-radius:var(--r-lg); overflow:hidden; aspect-ratio:5/6; box-shadow:0 44px 80px -50px rgba(60,42,18,.46)}
.media-arch.tall{aspect-ratio:4/5}
.media-arch img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease)}
.media-arch:hover img{transform:scale(1.045)}
.pullquote{font-family:"Fraunces",serif; font-style:italic; font-weight:380; font-size:clamp(1.5rem,2.7vw,2.15rem); line-height:1.28; color:var(--ink); letter-spacing:-.01em}
.pullquote .mk{color:var(--gold)}
.statlist{display:flex; gap:clamp(22px,4vw,54px); margin-top:2.2rem; flex-wrap:wrap}
.statlist .n{font-family:"Fraunces",serif; font-size:2.4rem; color:var(--ink); line-height:1; display:block}
.statlist .l{font-family:"Montserrat",sans-serif; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); margin-top:8px; display:block}

/* ---------- SECTION HEAD ------------------------------------------------- */
.shead{max-width:54rem}
.shead.center{margin:0 auto; text-align:center}
.shead .h-lg,.shead .h-xl{margin-bottom:.5em}
.shead-row{display:flex; align-items:flex-end; justify-content:space-between; gap:30px; flex-wrap:wrap; margin-bottom:clamp(34px,4vw,56px)}

/* ---------- TREATMENT CARDS --------------------------------------------- */
.tgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2vw,30px)}
.tcard{position:relative; background:var(--paper-3); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column; transition:transform .5s var(--ease), box-shadow .5s, border-color .4s}
.tcard:hover{transform:translateY(-6px); box-shadow:0 40px 70px -46px var(--card-shadow); border-color:var(--line-2)}
.tcard .pic{aspect-ratio:4/3; overflow:hidden}
.tcard .pic img{width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease)}
.tcard:hover .pic img{transform:scale(1.06)}
.tcard .body{padding:24px 26px 28px; display:flex; flex-direction:column; gap:10px; flex:1}
.tcard h3{font-size:1.4rem}
.tcard .meta{display:flex; gap:16px; font-family:"Montserrat",sans-serif; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-top:auto; padding-top:14px; border-top:1px solid var(--line)}
.tcard .meta .price{color:var(--gold-deep); font-weight:600}
.tcard .desc{font-size:.92rem; line-height:1.6; color:var(--ink-2)}
.tcard a.stretch{position:absolute; inset:0; z-index:2}

/* full service menu list */
.menu-group{margin-bottom:clamp(38px,5vw,64px)}
.menu-group h3{font-size:clamp(1.5rem,2.4vw,2rem); margin-bottom:8px}
.menu-group .gsub{color:var(--ink-3); margin-bottom:26px; max-width:54ch}
.mrow{display:grid; grid-template-columns:1fr auto; gap:16px 28px; align-items:baseline; padding:18px 0; border-top:1px solid var(--line); transition:padding-left .3s var(--ease)}
.mrow:last-child{border-bottom:1px solid var(--line)}
.mrow:hover{padding-left:10px}
.mrow .mname{font-family:"Fraunces",serif; font-size:1.3rem; color:var(--ink)}
.mrow .mdesc{font-size:.9rem; color:var(--ink-2); line-height:1.55; margin-top:5px; max-width:64ch}
.mrow .mmeta{text-align:right; white-space:nowrap; font-family:"Montserrat",sans-serif; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.mrow .mmeta b{display:block; font-family:"Fraunces",serif; font-size:1.3rem; letter-spacing:0; text-transform:none; color:var(--gold-deep); font-weight:500}

/* ---------- PRODUCTS (light, floating jars) ----------------------------- */
.products{position:relative; overflow:hidden; background:linear-gradient(180deg,var(--paper) 0%,var(--paper-2) 100%)}
.pgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2vw,28px); margin-top:clamp(34px,4vw,54px)}
.pcard{text-align:center; padding:30px 24px 34px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--paper-3); box-shadow:0 30px 60px -52px var(--card-shadow); transition:transform .5s var(--ease), box-shadow .5s, border-color .4s}
.pcard:hover{transform:translateY(-7px); box-shadow:0 48px 84px -50px var(--card-shadow); border-color:var(--line-2)}
.pcard .pic{aspect-ratio:1/1; display:grid; place-items:center; margin-bottom:18px; padding:8%; border-radius:16px; background:#F5EFE4; box-shadow:inset 0 0 0 1px rgba(40,30,15,.06)}
.pcard .pic img{width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 12px 16px rgba(40,28,12,.16))}
.pcard h3{font-size:1.3rem; margin-bottom:5px; color:var(--ink)}
.pcard .pp{font-family:"Montserrat",sans-serif; font-size:.9rem; letter-spacing:.04em; color:var(--gold-deep)}
.pcard .pp s{color:var(--ink-3); margin-right:8px}
.pcard .ptag{font-family:"Montserrat",sans-serif; font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); margin-bottom:14px}

/* ---------- MEET / SIGNATURE -------------------------------------------- */
.signature{font-family:"Fraunces",serif; font-style:italic; font-size:1.7rem; color:var(--gold-deep)}

/* ---------- JOURNAL ------------------------------------------------------ */
.jgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,34px)}
.jcard{display:flex; flex-direction:column; gap:14px; padding-top:26px; border-top:1px solid var(--line-2); transition:border-color .4s}
.jcard:hover{border-top-color:var(--gold)}
.jcard .date{font-family:"Montserrat",sans-serif; font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-deep)}
.jcard h3{font-size:1.5rem; line-height:1.12}
.jcard p{font-size:.94rem; color:var(--ink-2); margin:0}
.jcard .textlink{margin-top:auto}

/* ---------- PRESS / MEDIA PAGE ------------------------------------------ */
.logo-wall{display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.logo-wall .cell{background:var(--paper-3); aspect-ratio:16/9; display:grid; place-items:center; padding:18px; text-align:center; transition:background .3s}
.logo-wall .cell:hover{background:var(--paper-2)}
.logo-wall .cell span{font-family:"Fraunces",serif; font-size:clamp(1.1rem,1.8vw,1.5rem); color:var(--ink); letter-spacing:.02em}
.media-list{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,2vw,28px)}
.media-item{display:flex; gap:22px; align-items:flex-start; padding:24px 26px; background:var(--paper-3); border:1px solid var(--line); border-radius:var(--r); transition:transform .4s var(--ease), box-shadow .4s, border-color .4s}
.media-item:hover{transform:translateY(-4px); box-shadow:0 30px 60px -44px var(--card-shadow); border-color:var(--line-2)}
.media-item .outlet{font-family:"Fraunces",serif; font-size:1.18rem; color:var(--gold-deep); min-width:118px; line-height:1.15}
.media-item .mt h3{font-family:"Fraunces",serif; font-size:1.16rem; line-height:1.22; margin-bottom:6px; color:var(--ink)}
.media-item .mt p{font-size:.86rem; color:var(--ink-3); margin:0}
.media-item .ext{margin-left:auto; color:var(--gold); flex-shrink:0}

/* ---------- CTA BAND (warm light) --------------------------------------- */
.cta{position:relative; overflow:hidden; text-align:center; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:linear-gradient(165deg,var(--paper-2) 0%,color-mix(in srgb,var(--gold) 13%,var(--paper-2)) 100%)}
.cta::before{content:""; position:absolute; inset:0; background:radial-gradient(60% 70% at 50% -10%,color-mix(in srgb,var(--gold-soft) 30%,transparent),transparent 70%); pointer-events:none}
.cta>*{position:relative}
.cta h2{color:var(--ink)}
.cta .lead{color:var(--ink-2); margin:0 auto 2rem; max-width:46ch}

/* contact rows */
.contact-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(30px,5vw,70px)}
.cinfo{display:flex; flex-direction:column; gap:24px}
.cinfo .item{display:flex; gap:16px; align-items:flex-start; padding-bottom:22px; border-bottom:1px solid var(--line)}
.cinfo .item .ic{color:var(--gold); flex-shrink:0; margin-top:3px}
.cinfo .item h4{font-family:"Montserrat",sans-serif; font-weight:600; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); margin:0 0 6px}
.cinfo .item .v{font-family:"Fraunces",serif; font-size:1.22rem; color:var(--ink); line-height:1.35}
.field{display:flex; flex-direction:column; gap:7px; margin-bottom:18px}
.field label{font-family:"Montserrat",sans-serif; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3)}
.field input,.field textarea{font-family:"Montserrat",sans-serif; font-size:.96rem; color:var(--ink); background:var(--paper-3); border:1px solid var(--line-2); border-radius:12px; padding:13px 16px; transition:border-color .3s, box-shadow .3s}
.field input:focus,.field textarea:focus{outline:0; border-color:var(--gold); box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 18%,transparent)}
.form-card{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(26px,3vw,40px)}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:0 16px}
.hp{position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0}
.cf-turnstile{margin:8px 0 4px; min-height:34px}
.fstat{margin-top:14px; font-size:.9rem; line-height:1.55}
.fstat.err{color:var(--clay)} .fstat.ok{color:var(--sage)}
@media (max-width:480px){.field-row{grid-template-columns:1fr}}

/* ---------- FOOTER ------------------------------------------------------- */
.foot{background:var(--panel-2); color:var(--panel-ink-2); padding:clamp(60px,7vw,96px) 0 34px}
.foot a{color:var(--panel-ink-2)} .foot a:hover{color:var(--panel-gold)}
.foot-top{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:clamp(28px,4vw,50px); padding-bottom:48px; border-bottom:1px solid rgba(239,230,214,.12)}
.foot .brand{color:#F7EFDF}
.foot h5{font-family:"Montserrat",sans-serif; font-weight:600; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(239,230,214,.85); margin:0 0 18px}
.foot ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px}
.foot ul a{font-size:.92rem}
.foot .blurb{font-size:.92rem; line-height:1.7; max-width:32ch; margin:18px 0 22px}
.news{display:flex; gap:8px; margin-top:14px}
.news input{flex:1; background:rgba(255,255,255,.05); border:1px solid rgba(239,230,214,.18); border-radius:100px; padding:11px 18px; color:#F7EFDF; font-family:"Montserrat",sans-serif; font-size:.85rem}
.news input:focus{outline:0; border-color:var(--panel-gold)}
.news button{border:0; background:var(--panel-gold); color:#1b1712; border-radius:100px; padding:0 20px; cursor:pointer; font-family:"Montserrat",sans-serif; font-weight:600; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase}
.foot-bottom{display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; padding-top:26px; font-size:.74rem; letter-spacing:.04em}
.foot-social{display:flex; gap:16px}
.foot-social a{display:grid; place-items:center; width:36px; height:36px; border:1px solid rgba(239,230,214,.2); border-radius:50%; transition:.3s}
.foot-social a:hover{background:var(--panel-gold); border-color:var(--panel-gold); color:#1b1712}
.foot .theme-switch{border-color:rgba(239,230,214,.2)}
.foot .theme-switch button{color:rgba(239,230,214,.6)}
.foot .theme-switch button.active{background:var(--panel-gold); color:#1b1712}

/* ---------- PAGE HEAD (interior) ---------------------------------------- */
.phead{padding:clamp(140px,16vw,200px) 0 clamp(40px,5vw,70px); text-align:center}
.phead .display{margin:0 auto .4em} .phead .lead{margin:0 auto; max-width:54ch}
.crumb{font-family:"Montserrat",sans-serif; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); margin-bottom:1.4rem}
.crumb a{color:var(--ink-3)} .crumb a:hover{color:var(--gold-deep)}

/* ---------- REVEAL ------------------------------------------------------- */
[data-reveal]{opacity:0; transform:translateY(26px); transition:opacity 1s var(--ease), transform 1s var(--ease)}
[data-reveal].in{opacity:1; transform:none}
[data-reveal][data-d="1"]{transition-delay:.08s}[data-reveal][data-d="2"]{transition-delay:.16s}[data-reveal][data-d="3"]{transition-delay:.24s}[data-reveal][data-d="4"]{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1!important;transform:none!important;transition:none} .marquee{animation:none} *{scroll-behavior:auto!important}}

/* ---------- TWILIGHT (opt-in starry night) ------------------------------ */
[data-theme="twilight"] body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-color:#080B16;
  background-image:
    radial-gradient(1.4px 1.4px at 24px 30px, rgba(255,255,255,.95), transparent),
    radial-gradient(1px 1px at 96px 76px, rgba(220,230,255,.7), transparent),
    radial-gradient(1.6px 1.6px at 162px 120px, #fff, transparent),
    radial-gradient(1px 1px at 200px 44px, rgba(200,215,255,.65), transparent),
    radial-gradient(1.2px 1.2px at 60px 168px, rgba(255,255,255,.8), transparent),
    radial-gradient(1px 1px at 140px 206px, rgba(210,222,255,.6), transparent),
    radial-gradient(circle at 80% 10%, rgba(120,140,210,.18), transparent 42%),
    radial-gradient(circle at 12% 86%, rgba(86,108,178,.15), transparent 44%),
    linear-gradient(180deg,#0A0F20 0%,#0B1326 48%,#080B18 100%);
  background-size:220px 220px,220px 220px,260px 260px,260px 260px,300px 300px,300px 300px,100% 100%,100% 100%,100% 100%;
  background-repeat:repeat,repeat,repeat,repeat,repeat,repeat,no-repeat,no-repeat,no-repeat;
}
[data-theme="twilight"] body::after{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-image:
    radial-gradient(2px 2px at 30% 22%, #fff, transparent),
    radial-gradient(2px 2px at 67% 58%, #fff, transparent),
    radial-gradient(2.2px 2.2px at 83% 33%, rgba(255,246,222,.95), transparent),
    radial-gradient(2px 2px at 44% 80%, rgba(220,232,255,.95), transparent),
    radial-gradient(1.8px 1.8px at 56% 14%, rgba(255,255,255,.9), transparent);
  background-repeat:no-repeat;
  animation:twinkle 5.5s ease-in-out infinite alternate;
}
@keyframes twinkle{from{opacity:.4}to{opacity:1}}
[data-theme="twilight"] .bg-2{background:transparent}
[data-theme="twilight"] .products{background:linear-gradient(180deg,rgba(11,17,36,.55),rgba(8,12,26,.32))}
[data-theme="twilight"] .cta{background:linear-gradient(165deg,rgba(16,22,46,.5),rgba(26,18,46,.28)); border-color:var(--line)}
[data-theme="twilight"] .tcard,[data-theme="twilight"] .form-card,
[data-theme="twilight"] .media-item,[data-theme="twilight"] .logo-wall .cell,[data-theme="twilight"] .hero-badge{
  backdrop-filter:blur(7px) saturate(1.1); -webkit-backdrop-filter:blur(7px) saturate(1.1)}
[data-theme="twilight"] .btn:not(.btn-ghost),[data-theme="twilight"] .btn:not(.btn-ghost):hover{color:#0A0E1C}
[data-theme="twilight"] .btn-ghost{color:var(--ink); border-color:rgba(214,224,252,.36)}
[data-theme="twilight"] .btn-ghost:hover{background:var(--ink); color:#0A0E1C; border-color:var(--ink)}
[data-theme="twilight"] .foot{background:#070B18}
/* hero depth so the night sky isn't a flat void */
[data-theme="twilight"] .hero::before{content:""; position:absolute; right:-4%; top:46%; transform:translateY(-50%); width:min(760px,70vw); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(116,138,205,.20),rgba(116,138,205,.06) 45%,transparent 66%); pointer-events:none; z-index:0}
[data-theme="twilight"] .hero>*{position:relative; z-index:1}
/* product cards step the contrast: dark section -> mid-slate card -> ivory tile -> product */
[data-theme="twilight"] .pcard{background:#2C374F; border-color:rgba(214,224,252,.20)}

/* ---------- RESPONSIVE --------------------------------------------------- */
@media (max-width:1000px){
  .tgrid,.pgrid,.jgrid{grid-template-columns:repeat(2,1fr)}
  .logo-wall{grid-template-columns:repeat(3,1fr)}
  .foot-top{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .nav-links,.nav-right .theme-switch,.nav-right .btn{display:none}
  .nav-toggle{display:block}
  .hero-grid,.split,.contact-grid{grid-template-columns:1fr}
  .split.rev .split-media{order:0}
  .hero{min-height:auto; padding:118px 0 56px}
  .hero-media{max-width:440px; margin:8px auto 0}
  .hero-badge{left:0}
  .hero-quote{position:static; max-width:none; margin:16px auto 0; backdrop-filter:none; -webkit-backdrop-filter:none}
  .scroll-cue{display:none}
  .hero-stats{gap:18px 30px}
  .media-list{grid-template-columns:1fr}
  .split-media{max-width:520px; margin:0 auto}
}
@media (max-width:560px){
  .tgrid,.pgrid,.jgrid,.logo-wall{grid-template-columns:1fr}
  .logo-wall .cell{aspect-ratio:21/9}
  .mrow{grid-template-columns:1fr; gap:6px} .mrow .mmeta{text-align:left}
  .foot-top{grid-template-columns:1fr}
  body{font-size:16px}
}