/* ==========================================================
   DOUCE ÂME — Shared Stylesheet
   ========================================================== */

:root {
  --cream:       #FFFFFF;
  --cream-light: #FFFFFF;
  --cream-warm:  #F7F4EE;
  --beige:       #D9CDB5;
  --beige-deep:  #B8A57F;
  --ink:         #2D2823;
  --ink-soft:    #4A3F38;   /* was #5C5347 — slightly darker for readability */
  --ink-muted:   #6B5E54;   /* was #8B8073 — fails contrast; now ~4.6:1 on white */
  --line:        rgba(45,40,35,0.10);
  --line-strong: rgba(45,40,35,0.20);

  --display: 'Cormorant Garamond','Playfair Display',serif;
  --serif:   'Cormorant Garamond',serif;
  --sans:    'Raleway',sans-serif;

  --sp: 72px;  /* section vertical padding — change once, updates everywhere */
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth }
body {
  font-family: var(--sans);
  background: var(--cream);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.65;
  font-weight: 400;          /* was 300 — too light to read comfortably */
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display:block; max-width:100% }
a { color:inherit; text-decoration:none }
button { font-family:inherit; cursor:pointer; border:none; background:none }
::selection { background:var(--ink); color:var(--cream) }

/* ── Typography ──────────────────────────────────────────── */
.eyebrow {
  font-family: var(--sans);
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--ink-muted); font-weight: 500;  /* was 400 — bolder at small size */
}

h1.display, h2.display, h3.display {
  font-family: var(--display);
  font-weight: 300;
  letter-spacing: 0.01em;
  color: var(--ink);
}
h1.display { font-size: clamp(48px,6vw,84px); line-height:1.04 }
h2.display { font-size: clamp(36px,4.4vw,60px); line-height:1.1 }
h3.display { font-size: clamp(28px,2.8vw,36px); line-height:1.2 }

.italic { font-style: italic }

p { font-family:var(--sans); font-weight:400; line-height:1.75 }
p.lead {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 19px; line-height: 1.7; color: var(--ink-soft);
}

/* ── Top nav ─────────────────────────────────────────────── */
.topbar {
  position: fixed; top:0; left:0; right:0; z-index:100;
  padding: 22px 48px;
  display: grid; grid-template-columns:1fr auto 1fr; align-items:center;
  background: #ffffff;
  border-bottom: 1px solid var(--line);
  transition: padding 0.3s ease;
}
.topbar.scrolled { padding: 14px 48px }
.nav-left, .nav-right { display:flex; gap:36px; align-items:center }
.nav-right { justify-content:flex-end }
.nav-link {
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink); font-weight: 500;
  transition: opacity 0.3s; position:relative; padding: 6px 0;
  white-space: nowrap;
}
.nav-link:hover { opacity: 0.55 }
.nav-link.active::after {
  content:''; position:absolute; bottom:-2px; left:0; right:0;
  height:1px; background:var(--ink);
}

.nav-dropdown { position:relative }

/* Invisible bridge that fills the gap so the mouse never leaves the hover zone */
.nav-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -20px;
  right: -20px;
  height: 18px;
}

.nav-dropdown-menu {
  position: absolute; top: calc(100% + 14px); left:50%;
  transform: translateX(-50%) translateY(-6px);
  background: var(--cream-light); border:1px solid var(--line);
  padding: 18px 26px; min-width:300px;
  opacity:0; pointer-events:none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity:1; pointer-events:auto; transform: translateX(-50%) translateY(0);
}
.nav-dropdown-menu a {
  display:block; font-family:var(--serif); font-size:15px; color:var(--ink);
  padding: 10px 0; border-bottom:1px solid var(--line); letter-spacing:0.02em;
  transition: opacity 0.3s;
}
.nav-dropdown-menu a:last-child { border-bottom:none }
.nav-dropdown-menu a:hover { opacity: 0.55 }
.nav-dropdown-menu a .sub {
  display:block; font-family:var(--sans); font-size:9px; letter-spacing:0.3em;
  text-transform:uppercase; color:var(--ink-muted); margin-top:4px; font-weight:500;
}

.brand { text-align:center; line-height:1 }
.brand a { display:block }
.brand-logo { height:44px; width:auto; display:block; object-fit:contain; }

.menu-toggle { display:none; width:28px; height:24px; position:relative }
.menu-toggle span {
  display:block; position:absolute; left:0; right:0;
  height:1px; background:var(--ink); transition:all 0.3s;
}
.menu-toggle span:nth-child(1) { top:4px }
.menu-toggle span:nth-child(2) { top:50%; transform:translateY(-50%) }
.menu-toggle span:nth-child(3) { bottom:4px }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items:center; justify-content:center;
  padding: 14px 32px; font-family:var(--sans); font-size:10px;
  letter-spacing: 0.28em; text-transform:uppercase; font-weight:500;
  transition: all 0.3s ease; border:1px solid var(--ink);
}
.btn-primary { background:var(--ink); color:var(--cream) }
.btn-primary:hover { background:transparent; color:var(--ink) }
.btn-ghost { background:transparent; color:var(--ink); border-color:var(--ink) }
.btn-ghost:hover { background:var(--ink); color:var(--cream) }
.btn-text {
  padding: 8px 0; border:none; border-bottom:1px solid var(--ink);
  font-family: var(--sans); font-size:10px; letter-spacing:0.28em;
  text-transform: uppercase; font-weight:500; color:var(--ink);
  transition: opacity 0.3s;
}
.btn-text:hover { opacity: 0.55 }

/* ── Ornamental rule ─────────────────────────────────────── */
.rule { width:40px; height:1px; background:var(--beige-deep); margin:0 auto }
.rule-wide { width:80px }

/* ── Page header ─────────────────────────────────────────── */
.page-header {
  padding: 90px 48px 32px; text-align:center; background:var(--cream);
}
.page-header .eyebrow { margin-bottom:28px; display:inline-block }
.page-header h1 { max-width:960px; margin:0 auto 26px }
.page-header p.sub {
  font-family: var(--serif); font-style:italic; font-size:19px;
  color: var(--ink-soft); max-width:640px; margin:0 auto; line-height:1.7; font-weight:400;
}

/* ── Coming-soon badge ───────────────────────────────────── */
.badge-soon {
  display: inline-block; font-family:var(--sans); font-size:10px;
  letter-spacing: 0.32em; text-transform:uppercase; color:var(--ink);
  padding: 6px 14px; border:1px solid var(--ink); background:transparent; font-weight:500;
}

/* ── Footer ──────────────────────────────────────────────── */
footer.site-footer {
  background: var(--cream-warm); color:var(--ink);
  padding: 90px 48px 36px; border-top:1px solid var(--line);
}
.footer-inner {
  max-width: 1280px; margin:0 auto;
  display: grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:60px;
  padding-bottom: 56px; border-bottom:1px solid var(--line);
}
.footer-brand .mark {
  font-family: var(--display); font-size:24px; letter-spacing:0.3em;
  margin-bottom: 14px; font-weight:300; color:var(--ink);
}
.footer-brand .motto {
  font-family: var(--serif); font-style:italic; font-size:16px; line-height:1.8;
  color: var(--ink-soft); max-width:340px; margin-bottom:24px; font-weight:400;
}
.footer-brand .langs {
  font-size: 10px; letter-spacing:0.32em; text-transform:uppercase;
  color: var(--ink-muted); font-weight:500;
}
.footer-col h4 {
  font-family: var(--sans); font-size:10px; letter-spacing:0.32em;
  text-transform: uppercase; color:var(--ink); margin-bottom:24px; font-weight:500;
}
.footer-col a {
  display:block; font-family:var(--serif); font-size:15px;
  color: var(--ink-soft); padding:7px 0; transition:opacity 0.3s; font-weight:400;
}
.footer-col a:hover { opacity: 0.55 }
.footer-bottom {
  max-width: 1280px; margin:36px auto 0;
  display: flex; justify-content:space-between; align-items:center;
  font-family: var(--sans); font-size:10px; letter-spacing:0.22em;
  color: var(--ink-muted); flex-wrap:wrap; gap:18px; text-transform:uppercase; font-weight:400;
}
.footer-bottom .blessing {
  font-family: var(--serif); font-style:italic; text-transform:none;
  letter-spacing: 0.04em; color:var(--ink-soft); font-size:13px; font-weight:400;
}

/* ── Scroll-reveal ───────────────────────────────────────── */
.reveal {
  opacity:0; transform:translateY(30px);
  transition: all 0.9s cubic-bezier(0.16,1,0.3,1);
}
.reveal.in-view { opacity:1; transform:translateY(0) }

/* ─────────────────────────────────────────────────────────
   HOME PAGE
   ───────────────────────────────────────────────────────── */
.hero {
  padding: 80px 64px;
  display: grid; grid-template-columns:1fr 1.1fr; gap:80px;
  align-items: start; background:var(--cream);
}
.hero-content { animation: fadeUp 1s cubic-bezier(0.16,1,0.3,1); padding-top:40px }
.hero-content .eyebrow { margin-bottom:32px; display:block }
.hero-content h1 { margin-bottom:32px }
.hero-content p.lead { margin-bottom:48px; max-width:460px }
.hero-actions { display:flex; gap:24px; align-items:center; flex-wrap:wrap }
.hero-image { animation: fadeIn 1.3s cubic-bezier(0.16,1,0.3,1) 0.2s both }
.hero-image img { width:100%; aspect-ratio:3/2; object-fit:cover }
.hero-image .caption {
  margin-top: 18px; font-family:var(--serif); font-style:italic;
  font-size: 14px; color:var(--ink-muted); text-align:right; letter-spacing:0.04em;
}
@keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

.philosophy {
  padding: var(--sp) 48px; text-align:center;
  background: var(--cream-warm); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.philosophy .eyebrow { margin-bottom:36px; display:inline-block }
.philosophy blockquote {
  font-family: var(--display); font-size:clamp(28px,3.2vw,42px);
  font-weight: 300; line-height:1.4; max-width:880px;
  margin: 0 auto; color:var(--ink); font-style:italic;
}
.philosophy .author {
  margin-top: 36px; font-family:var(--sans); font-size:11px;
  letter-spacing: 0.32em; text-transform:uppercase; color:var(--ink-muted); font-weight:500;
}

.collections-preview { padding:var(--sp) 64px; background:var(--cream) }
.cp-head { text-align:center; margin-bottom:48px; max-width:760px; margin-inline:auto }
.cp-head .eyebrow { margin-bottom:28px; display:inline-block }
.cp-head h2 { margin-bottom:22px }
.cp-head p.sub { font-family:var(--serif); font-style:italic; font-size:18px; color:var(--ink-soft); font-weight:400 }
.cp-rows { display:grid; grid-template-columns:1fr 1fr; gap:40px; max-width:1320px; margin:0 auto }
.cp-row { display:flex; flex-direction:column; gap:0 }
.cp-row.flip > .cp-text { order:initial }
.cp-row.flip > .cp-img, .cp-row.flip > .cp-img-soon { order:initial }
.cp-img { aspect-ratio:4/3; overflow:hidden }
.cp-img img { width:100%; height:100%; object-fit:cover; transition:transform 1.4s ease }
.cp-img:hover img { transform:scale(1.03) }
.cp-text { padding:28px 0 0 }
.cp-text .label {
  font-family: var(--sans); font-size:10px; letter-spacing:0.36em;
  text-transform: uppercase; color:var(--ink-muted); margin-bottom:16px; font-weight:500;
}
.cp-text h3 {
  font-family: var(--display); font-size:clamp(28px,3vw,42px);
  font-weight: 300; line-height:1.1; margin-bottom:16px; color:var(--ink);
}
.cp-text h3 .italic { font-family:var(--display); font-style:italic; color:var(--ink-soft) }
.cp-text p {
  font-family: var(--serif); font-size:16px; line-height:1.75;
  color: var(--ink-soft); font-style:italic; font-weight:400; margin-bottom:24px; max-width:440px;
}
.cp-text .actions { display:flex; gap:24px; align-items:center; flex-wrap:wrap }
.cp-img-soon {
  aspect-ratio: 4/3; background:var(--cream-warm);
  display: flex; flex-direction:column; align-items:center; justify-content:center;
  gap: 20px; border:1px solid var(--line);
}
.cp-img-soon .label-name {
  font-family: var(--display); font-style:italic;
  font-size: clamp(56px,6vw,84px); color:var(--ink); line-height:1;
  text-align: center; font-weight:300;
}
.cp-img-soon .label-scents {
  font-family: var(--sans); font-size:10px; letter-spacing:0.42em;
  text-transform: uppercase; color:var(--ink-muted); font-weight:500;
}

.founder {
  padding: var(--sp) 64px; background:var(--cream-warm);
  display: grid; grid-template-columns:1fr 1.2fr; gap:72px;
  align-items: center; max-width:1320px; margin:0 auto;
}
.founder-img { aspect-ratio:3/4; overflow:hidden }
.founder-img img { width:100%; height:100%; object-fit:cover }
.founder-text .label {
  font-family: var(--sans); font-size:10px; letter-spacing:0.36em;
  text-transform: uppercase; color:var(--ink-muted); margin-bottom:20px; font-weight:500;
}
.founder-text h2 { margin-bottom:28px }
.founder-text p {
  font-family: var(--serif); font-size:18px; line-height:1.8;
  color: var(--ink-soft); font-weight:400; margin-bottom:20px; max-width:560px;
}
.founder-text .sign {
  font-family: var(--display); font-style:italic; font-size:26px;
  color: var(--ink); margin:30px 0; display:block; font-weight:300;
}

.amazon-band { padding:var(--sp) 48px; background:var(--ink); color:var(--cream); text-align:center }
.amazon-band .eyebrow { color:rgba(244,239,230,0.75); margin-bottom:24px; display:inline-block }
.amazon-band h2 { color:var(--cream); margin-bottom:18px }
.amazon-band p {
  font-family: var(--serif); font-style:italic; font-size:18px;
  color: rgba(244,239,230,0.9); margin-bottom:40px;
  max-width: 560px; margin-inline:auto; font-weight:400;
}
.amazon-band .btn { border-color:var(--cream); color:var(--cream); background:transparent }
.amazon-band .btn:hover { background:var(--cream); color:var(--ink) }

/* ─────────────────────────────────────────────────────────
   SABLE BLANC
   ───────────────────────────────────────────────────────── */
.scent-hero { padding:24px 48px var(--sp); background:var(--cream); text-align:center }
.scent-hero img { max-width:980px; width:100%; margin:0 auto; aspect-ratio:5/3; object-fit:cover }

.scents-section { padding:var(--sp) 64px; background:var(--cream) }
.scents-head { text-align:center; margin-bottom:48px; max-width:760px; margin-inline:auto }
.scents-head .eyebrow { margin-bottom:24px; display:inline-block }
.scents-head h2 { margin-bottom:20px }
.scents-head p.sub { font-family:var(--serif); font-style:italic; font-size:18px; color:var(--ink-soft); font-weight:400 }

.scents-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:50px; max-width:1280px; margin:0 auto }
.scent { display:flex; flex-direction:column; transition:transform 0.5s ease }
.scent:hover { transform:translateY(-6px) }
.scent-img { aspect-ratio:1/1; overflow:hidden; background:var(--cream-warm); margin-bottom:30px }
.scent-img img { width:100%; height:100%; object-fit:cover; transition:transform 1.2s ease }
.scent:hover .scent-img img { transform:scale(1.04) }
.scent-body { text-align:center }
.scent-name {
  font-family: var(--display); font-size:36px; font-weight:300;
  color: var(--ink); margin-bottom:6px; letter-spacing:0.02em; font-style:italic;
}
.scent-pronounce {
  font-family: var(--sans); font-size:9px; letter-spacing:0.36em;
  text-transform: uppercase; color:var(--ink-muted); margin-bottom:18px; font-weight:500;
}
.scent-intentions {
  font-family: var(--sans); font-size:11px; letter-spacing:0.32em;
  text-transform: uppercase; color:var(--ink); margin-bottom:22px; font-weight:500;
}
.scent-divider { width:24px; height:1px; background:var(--beige-deep); margin:0 auto 22px }
.scent-poetry {
  font-family: var(--serif); font-style:italic; font-size:16px;
  color: var(--ink-soft); line-height:1.7; margin-bottom:24px; font-weight:400; min-height:90px;
}
.scent-notes {
  font-family: var(--serif); font-size:14px; color:var(--ink);
  margin-bottom: 24px; line-height:1.7; font-weight:400;
}
.scent-price { font-family:var(--display); font-size:24px; color:var(--ink); margin-bottom:22px; font-weight:300 }

.editorial { padding:0; background:var(--cream) }
.editorial-inner {
  max-width: 1440px; margin:0 auto;
  display: grid; grid-template-columns:1fr 1fr; gap:0; min-height:78vh; align-items:stretch;
}
.editorial.flip .editorial-inner { direction:rtl }
.editorial.flip .editorial-text { direction:ltr }
.editorial-image { overflow:hidden }
.editorial-image img { width:100%; height:100%; object-fit:cover; transition:transform 1.5s ease }
.editorial-image:hover img { transform:scale(1.03) }
.editorial-text {
  padding: 64px 80px; display:flex; flex-direction:column;
  justify-content: center; background:var(--cream-warm);
}
.editorial-text .eyebrow { margin-bottom:24px; display:block }
.editorial-text h2 { margin-bottom:28px }
.editorial-text h2 .italic { font-family:var(--display); font-style:italic; color:var(--ink-soft) }
.editorial-text p {
  font-family: var(--serif); font-size:18px; line-height:1.8;
  color: var(--ink-soft); font-weight:400; margin-bottom:22px;
}
.editorial-list { margin-top:30px; list-style:none }
.editorial-list li {
  font-family: var(--sans); font-size:11px; letter-spacing:0.28em;
  text-transform: uppercase; color:var(--ink); padding:18px 0;
  border-bottom: 1px solid var(--line); font-weight:500;
}
.editorial-list li:last-child { border-bottom:none }

.features {
  padding: var(--sp) 64px; background:var(--cream);
  border-top: 1px solid var(--line); border-bottom:1px solid var(--line);
}
.features-head { text-align:center; margin-bottom:48px; max-width:760px; margin-inline:auto }
.features-head .eyebrow { margin-bottom:24px; display:inline-block }
.features-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:48px; max-width:1280px; margin:0 auto }
.feature { text-align:left }
.feature-num { font-family:var(--display); font-style:italic; font-size:32px; color:var(--ink); margin-bottom:18px; font-weight:300 }
.feature h3 { font-family:var(--display); font-size:24px; font-weight:400; color:var(--ink); margin-bottom:16px; line-height:1.25 }
.feature p { font-family:var(--serif); font-size:15px; color:var(--ink-soft); line-height:1.8; font-weight:400 }

.gallery { padding:var(--sp) 0; background:var(--cream-warm) }
.gallery-head { text-align:center; margin-bottom:48px; padding:0 48px; max-width:760px; margin-inline:auto }
.gallery-head .eyebrow { margin-bottom:24px; display:inline-block }
.gallery-head h2 { margin-bottom:20px }
.gallery-head p { font-family:var(--serif); font-style:italic; font-size:17px; color:var(--ink-soft); font-weight:400 }
.gallery-grid {
  display: grid; grid-template-columns:repeat(12,1fr); gap:18px;
  max-width: 1500px; margin:0 auto; padding:0 24px;
}
.gallery-item { overflow:hidden; transition:transform 0.6s ease }
.gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform 1.4s ease }
.gallery-item:hover { transform:translateY(-3px) }
.gallery-item:hover img { transform:scale(1.05) }
.gi-1 { grid-column:span 7; aspect-ratio:4/3 }
.gi-2 { grid-column:span 5; aspect-ratio:4/5 }
.gi-3 { grid-column:span 4; aspect-ratio:4/5 }
.gi-4 { grid-column:span 8; aspect-ratio:5/3 }
.gi-5 { grid-column:span 5; aspect-ratio:1/1 }
.gi-6 { grid-column:span 7; aspect-ratio:5/4 }

.offerings { padding:var(--sp) 64px; background:var(--cream) }
.offerings-head { text-align:center; margin-bottom:48px; max-width:760px; margin-inline:auto }
.offerings-head .eyebrow { margin-bottom:24px; display:inline-block }
.offerings-grid { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:32px }
.offering {
  padding: 56px 44px; border:1px solid var(--line);
  background: var(--cream-light); text-align:center;
}
.offering .badge {
  display: inline-block; font-family:var(--sans); font-size:10px;
  letter-spacing: 0.32em; text-transform:uppercase; color:var(--ink-muted);
  padding: 6px 14px; border:1px solid var(--line-strong); margin-bottom:26px; font-weight:500;
}
.offering h3 { font-family:var(--display); font-size:32px; font-weight:300; margin-bottom:18px; color:var(--ink) }
.offering h3 .italic { font-style:italic; color:var(--ink-soft) }
.offering .desc {
  font-family: var(--serif); font-style:italic; font-size:16px;
  color: var(--ink-soft); line-height:1.7; margin-bottom:28px; font-weight:400;
}
.offering .price { font-family:var(--display); font-size:28px; color:var(--ink); margin-bottom:24px; font-weight:300 }
.offering ul { list-style:none; margin-bottom:30px; text-align:left; max-width:280px; margin-inline:auto }
.offering ul li {
  font-family: var(--sans); font-size:13px; color:var(--ink-soft);
  padding: 9px 0; border-bottom:1px solid var(--line);
  display: flex; justify-content:space-between; font-weight:400;
}
.offering ul li:last-child { border-bottom:none }
.offering ul li span:first-child { color:var(--ink) }

.gift { padding:var(--sp) 48px; background:var(--cream-warm); text-align:center; border-top:1px solid var(--line) }
.gift-inner { max-width:760px; margin:0 auto }
.gift .eyebrow { margin-bottom:30px; display:inline-block }
.gift h2 { margin-bottom:30px }
.gift p {
  font-family: var(--serif); font-style:italic; font-size:19px;
  color: var(--ink-soft); margin-bottom:44px; font-weight:400; line-height:1.7;
}
.gift-occasions { display:flex; flex-wrap:wrap; justify-content:center; gap:18px 32px; margin-bottom:48px }
.gift-occasions span {
  font-family: var(--sans); font-size:11px; letter-spacing:0.28em;
  text-transform: uppercase; color:var(--ink-soft); font-weight:400;
  position: relative; padding:0 14px;
}
.gift-occasions span:not(:last-child)::after {
  content:'·'; position:absolute; right:-20px; top:50%;
  transform: translateY(-50%); color:var(--ink-muted);
}

/* ─────────────────────────────────────────────────────────
   SHOP
   ───────────────────────────────────────────────────────── */
.shop-intro { padding:50px 48px 60px; text-align:center; background:var(--cream) }
.products-section { padding:60px 64px 80px; background:var(--cream) }
.products-section h2 { text-align:center; margin-bottom:60px }
.product-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; max-width:1280px; margin:0 auto }
.product {
  background: var(--cream-light); border:1px solid var(--line);
  display: flex; flex-direction:column; transition:all 0.5s ease; overflow:hidden;
}
.product:hover { transform:translateY(-4px) }
.product-img { width:100%; aspect-ratio:1/1; overflow:hidden }
.product-img img { width:100%; height:100%; object-fit:cover; transition:transform 1.2s ease }
.product:hover .product-img img { transform:scale(1.04) }
.product-img.placeholder {
  background: var(--cream-warm); display:flex; align-items:center; justify-content:center;
  font-family: var(--display); font-style:italic; font-size:48px; color:var(--ink-soft); font-weight:300;
}
.product-body { padding:30px 26px; text-align:center; flex:1; display:flex; flex-direction:column }
.product .label-sm {
  font-family: var(--sans); font-size:10px; letter-spacing:0.32em;
  text-transform: uppercase; color:var(--ink-muted); margin-bottom:10px; font-weight:500;
}
.product h3 { font-family:var(--display); font-size:24px; font-weight:300; margin-bottom:8px; color:var(--ink) }
.product h3 .italic { font-style:italic; color:var(--ink-soft) }
.product .desc {
  font-family: var(--serif); font-style:italic; font-size:14px;
  color: var(--ink-soft); margin-bottom:18px; line-height:1.6; flex:1; font-weight:400;
}
.product .price { font-family:var(--display); font-size:22px; color:var(--ink); margin-bottom:20px; font-weight:300 }

.section-divider {
  margin: 80px auto 60px; max-width:1280px; text-align:center;
  font-family: var(--sans); font-size:10px; letter-spacing:0.36em;
  text-transform: uppercase; color:var(--ink-muted); position:relative; font-weight:500; padding:0 24px;
}
.section-divider::before, .section-divider::after {
  content:''; position:absolute; top:50%; width:28%; height:1px; background:var(--line-strong);
}
.section-divider::before { left:0 }
.section-divider::after { right:0 }

.coming-soon-pill {
  display: inline-block; font-family:var(--sans); font-size:9px;
  letter-spacing: 0.3em; color:var(--ink); padding:4px 10px;
  border: 1px solid var(--line-strong); font-weight:500; margin-left:8px;
}
.product.soon { opacity:0.92 }

.shop-info { padding:60px 48px; background:var(--cream-warm); text-align:center; border-top:1px solid var(--line) }
.shop-info .eyebrow { margin-bottom:18px; display:inline-block }
.shop-info h3 { font-family:var(--display); font-size:28px; font-weight:300; margin-bottom:14px; color:var(--ink) }
.shop-info p {
  font-family: var(--serif); font-style:italic; font-size:16px;
  color: var(--ink-soft); margin-bottom:24px; max-width:540px; margin-inline:auto; font-weight:400;
}

/* ─────────────────────────────────────────────────────────
   ABOUT / OUR STORY
   ───────────────────────────────────────────────────────── */
.story {
  padding: var(--sp) 64px; max-width:1320px; margin:0 auto;
  display: grid; grid-template-columns:1fr 1.3fr; gap:72px; align-items:center;
}
.story-portrait { aspect-ratio:3/4; overflow:hidden }
.story-portrait img { width:100%; height:100%; object-fit:cover }
.story-text .label {
  font-family: var(--sans); font-size:10px; letter-spacing:0.36em;
  text-transform: uppercase; color:var(--ink-muted); margin-bottom:22px; font-weight:500;
}
.story-text h2 { margin-bottom:30px }
.story-text p {
  font-family: var(--serif); font-size:18px; line-height:1.8;
  color: var(--ink-soft); font-weight:400; margin-bottom:20px;
}
.story-text p:first-of-type::first-letter {
  font-family: var(--display); font-size:64px; float:left;
  line-height: 0.85; margin:6px 14px 0 -2px; color:var(--ink); font-style:italic; font-weight:300;
}
.story-sign {
  font-family: var(--display); font-style:italic; font-size:28px;
  color: var(--ink); margin-top:30px; display:block; font-weight:300;
}

.pillars { padding:var(--sp) 64px; background:var(--cream-warm); border-top:1px solid var(--line); border-bottom:1px solid var(--line) }
.pillars-head { text-align:center; margin-bottom:48px; max-width:760px; margin-inline:auto }
.pillars-head .eyebrow { margin-bottom:24px; display:inline-block }
.pillars-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:36px; max-width:1280px; margin:0 auto }
.pillar { text-align:left; border-top:1px solid var(--line-strong); padding-top:32px }
.pillar .num { font-family:var(--display); font-style:italic; font-size:30px; color:var(--ink); margin-bottom:16px; line-height:1; font-weight:300 }
.pillar h3 { font-family:var(--display); font-size:22px; font-weight:400; color:var(--ink); margin-bottom:14px; line-height:1.3 }
.pillar p { font-family:var(--serif); font-size:15px; color:var(--ink-soft); line-height:1.8; font-weight:400 }

.multilingual { padding:var(--sp) 48px; background:var(--cream); text-align:center }
.multilingual-inner { max-width:880px; margin:0 auto }
.multilingual .eyebrow { margin-bottom:30px; display:inline-block }
.multilingual h2 { margin-bottom:70px }
.lang-block { margin-bottom:48px; padding:0 32px }
.lang-block:last-child { margin-bottom:0 }
.lang-block .lang {
  font-family: var(--sans); font-size:10px; letter-spacing:0.36em;
  text-transform: uppercase; color:var(--ink-muted); margin-bottom:22px; display:block; font-weight:500;
}
.lang-block p { font-family:var(--serif); font-style:italic; font-size:18px; line-height:1.8; color:var(--ink-soft); font-weight:400 }

.blessing-band { padding:110px 48px; background:var(--cream-warm); text-align:center; border-top:1px solid var(--line) }
.blessing-band .eyebrow { margin-bottom:30px; display:inline-block }
.blessing-band h2 { margin-bottom:30px }
.blessing-band p { font-family:var(--serif); font-style:italic; font-size:18px; color:var(--ink-soft); margin-bottom:36px; font-weight:400 }

/* ─────────────────────────────────────────────────────────
   COLLECTIONS
   ───────────────────────────────────────────────────────── */
.coll-rows { padding:60px 64px 80px; max-width:1320px; margin:0 auto; display:flex; flex-direction:column; gap:72px }
.coll-row { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center }
.coll-row.flip > .coll-text { order:2 }
.coll-row.flip > .coll-img, .coll-row.flip > .coll-img-soon { order:1 }
.coll-img { aspect-ratio:5/6; overflow:hidden }
.coll-img img { width:100%; height:100%; object-fit:cover; transition:transform 1.4s ease }
.coll-row:hover .coll-img img { transform:scale(1.03) }
.coll-img-soon {
  aspect-ratio: 5/6; background:var(--cream-warm);
  display: flex; flex-direction:column; align-items:center; justify-content:center;
  gap: 24px; border:1px solid var(--line);
}
.coll-img-soon .label-name {
  font-family: var(--display); font-style:italic;
  font-size: clamp(56px,6vw,90px); color:var(--ink); line-height:1; text-align:center; font-weight:300;
}
.coll-img-soon .label-scents {
  font-family: var(--sans); font-size:10px; letter-spacing:0.42em;
  text-transform: uppercase; color:var(--ink-muted); font-weight:500;
}
.coll-text .num {
  font-family: var(--sans); font-size:10px; letter-spacing:0.36em;
  text-transform: uppercase; color:var(--ink-muted); margin-bottom:22px; font-weight:500;
}
.coll-text h2 { margin-bottom:14px }
.coll-text h2 .italic { font-family:var(--display); font-style:italic; color:var(--ink-soft) }
.coll-text .french { font-family:var(--serif); font-style:italic; font-size:17px; color:var(--ink-muted); margin-bottom:24px; font-weight:400 }
.coll-text p { font-family:var(--serif); font-size:17px; line-height:1.8; color:var(--ink-soft); font-weight:400; margin-bottom:18px; max-width:480px }
.coll-text ul.scents { list-style:none; display:flex; flex-wrap:wrap; gap:12px; margin:24px 0 32px }
.coll-text ul.scents li {
  font-family: var(--sans); font-size:10px; letter-spacing:0.28em;
  text-transform: uppercase; color:var(--ink); padding:8px 16px;
  border: 1px solid var(--line-strong); font-weight:500;
}
.coll-text .actions { display:flex; gap:22px; align-items:center; flex-wrap:wrap }

/* ─────────────────────────────────────────────────────────
   CONTACT
   ───────────────────────────────────────────────────────── */
.contact-grid {
  padding: 60px 64px 80px; max-width:1320px; margin:0 auto;
  display: grid; grid-template-columns:1.1fr 1fr; gap:72px; align-items:start;
}
.contact-info .label {
  font-family: var(--sans); font-size:10px; letter-spacing:0.36em;
  text-transform: uppercase; color:var(--ink-muted); margin-bottom:22px; font-weight:500;
}
.contact-info h2 { margin-bottom:28px }
.contact-info p.lead { margin-bottom:48px; max-width:480px }

.contact-channels { margin-top:50px }
.channel { display:flex; gap:24px; align-items:flex-start; padding:26px 0; border-bottom:1px solid var(--line) }
.channel:last-child { border-bottom:none }
.channel .ico {
  flex: 0 0 36px; height:36px; border-radius:50%;
  border: 1px solid var(--line-strong); display:flex; align-items:center; justify-content:center;
  font-family: var(--display); font-style:italic; font-size:16px; color:var(--ink); font-weight:300;
}
.channel .meta { flex:1 }
.channel .meta .label-c {
  font-family: var(--sans); font-size:9px; letter-spacing:0.36em;
  text-transform: uppercase; color:var(--ink-muted); margin-bottom:6px; font-weight:500;
}
.channel .meta a, .channel .meta span.val {
  font-family: var(--serif); font-size:17px; color:var(--ink); transition:opacity 0.3s; font-weight:400;
}
.channel .meta a:hover { opacity: 0.55 }
.channel .meta .extra {
  font-family: var(--serif); font-style:italic; font-size:14px;
  color: var(--ink-muted); margin-top:4px; display:block; font-weight:400;
}

.social-row { display:flex; gap:14px; margin-top:32px }
.social-row a {
  display: flex; align-items:center; gap:10px;
  padding: 10px 18px; border: 1px solid var(--line-strong);
  font-family: var(--sans); font-size:12px; letter-spacing:0.12em; text-transform:uppercase;
  color: var(--ink); transition:all 0.3s; font-weight:500;
}
.social-row a svg { flex-shrink:0 }
.social-row a:hover { background:var(--ink); color:var(--cream); border-color:var(--ink) }

.contact-form-wrap { background:var(--cream-warm); border:1px solid var(--line); padding:50px 44px }
.contact-form-wrap .label-top {
  font-family: var(--sans); font-size:10px; letter-spacing:0.36em;
  text-transform: uppercase; color:var(--ink-muted); margin-bottom:14px; font-weight:500;
}
.contact-form-wrap h3 { font-family:var(--display); font-size:28px; font-weight:300; margin-bottom:8px; color:var(--ink) }
.contact-form-wrap h3 .italic { font-style:italic; color:var(--ink-soft) }
.contact-form-wrap .note {
  font-family: var(--serif); font-style:italic; font-size:15px;
  color: var(--ink-soft); margin-bottom:32px; line-height:1.6; font-weight:400;
}

form.contact-form { display:flex; flex-direction:column; gap:24px }
.field { display:flex; flex-direction:column; gap:8px }
.field label {
  font-family: var(--sans); font-size:10px; letter-spacing:0.3em;
  text-transform: uppercase; color:var(--ink-muted); font-weight:500;
}
.field input, .field textarea, .field select {
  font-family: var(--serif); font-size:16px; color:var(--ink);
  border: none; border-bottom:1px solid var(--line-strong);
  background: transparent; padding:10px 0; outline:none;
  transition: border-color 0.3s; width:100%; font-weight:400;
}
.field textarea { min-height:120px; resize:vertical; border:1px solid var(--line-strong); padding:12px }
.field input:focus, .field textarea:focus, .field select:focus { border-color:var(--ink) }
.field input::placeholder, .field textarea::placeholder { color:var(--ink-soft); font-style:italic; opacity:1 }

form.contact-form button { align-self:flex-start; margin-top:12px }

.contact-locations {
  padding: 56px 48px; background:var(--cream); text-align:center; border-top:1px solid var(--line);
}
.contact-locations h3 { font-family:var(--display); font-size:28px; font-weight:300; margin-bottom:12px; color:var(--ink) }
.contact-locations h3 .italic { font-style:italic; color:var(--ink-soft) }
.contact-locations p {
  font-family: var(--serif); font-style:italic; font-size:16px;
  color: var(--ink-soft); max-width:560px; margin-inline:auto; font-weight:400;
}

/* ─────────────────────────────────────────────────────────
   MAISON PARFUMÉE
   ───────────────────────────────────────────────────────── */
.maison-hero { padding:60px 48px 80px; background:var(--cream); text-align:center }
.maison-hero .placeholder {
  max-width: 1100px; margin:0 auto; aspect-ratio:5/3;
  background: var(--cream-warm); display:flex; flex-direction:column;
  align-items: center; justify-content:center; gap:30px; border:1px solid var(--line);
}
.maison-hero .placeholder .name {
  font-family: var(--display); font-style:italic;
  font-size: clamp(60px,7vw,120px); color:var(--ink); line-height:1; font-weight:300;
}
.maison-hero .placeholder .scents {
  font-family: var(--sans); font-size:11px; letter-spacing:0.48em;
  text-transform: uppercase; color:var(--ink-muted); font-weight:500;
}

.scent-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:36px; max-width:1280px; margin:0 auto }
.scent-card {
  padding: 50px 38px; background:var(--cream-warm); text-align:left;
  transition: transform 0.5s ease; border-top:1px solid var(--line-strong);
}
.scent-card:hover { transform:translateY(-4px) }
.scent-card h3 { font-family:var(--display); font-style:italic; font-size:42px; font-weight:300; color:var(--ink); margin-bottom:6px; letter-spacing:0.02em }
.scent-card .french { font-family:var(--serif); font-style:italic; font-size:15px; color:var(--ink-muted); margin-bottom:36px; font-weight:400 }
.notes-section { margin-bottom:22px }
.notes-label { font-family:var(--sans); font-size:9px; letter-spacing:0.3em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:8px; font-weight:500 }
.notes-list { font-family:var(--serif); font-style:italic; font-size:16px; color:var(--ink); font-weight:400 }
.scent-card .description {
  margin-top: 28px; padding-top:24px; border-top:1px solid var(--line);
  font-family: var(--serif); font-style:italic; font-size:15px;
  color: var(--ink-soft); line-height:1.7; font-weight:400;
}

.products { padding:var(--sp) 64px; background:var(--cream-warm); border-top:1px solid var(--line); border-bottom:1px solid var(--line) }
.products-inner { max-width:1320px; margin:0 auto; display:flex; flex-direction:column; gap:100px }
.product-row { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center }
.product-row.flip > .product-text { order:2 }
.product-row.flip > .product-visual { order:1 }
.product-visual {
  aspect-ratio: 4/5; background:var(--cream); border:1px solid var(--line);
  display: flex; align-items:center; justify-content:center; position:relative;
}
.product-visual::after {
  content: 'COMING SOON'; position:absolute; top:18px; right:18px;
  font-family: var(--sans); font-size:10px; letter-spacing:0.32em;
  color: var(--ink); padding:6px 12px; border:1px solid var(--ink); font-weight:500;
}
.bottle-trio { display:flex; gap:18px; align-items:flex-end }
.bottle {
  width: 80px; height:200px; border-radius:4px 4px 10px 10px;
  background: linear-gradient(180deg,rgba(255,255,255,0.55) 0%,rgba(244,239,230,0.95) 100%);
  border: 1px solid var(--line-strong); position:relative;
  display: flex; align-items:center; justify-content:center;
  box-shadow: 0 20px 40px -20px rgba(45,40,35,0.15);
}
.bottle::before {
  content:''; position:absolute; top:-18px; left:50%; transform:translateX(-50%);
  width: 38px; height:22px; background:var(--ink); border-radius:3px 3px 0 0;
}
.bottle-label { font-family:var(--display); font-style:italic; font-size:17px; color:var(--ink-soft); text-align:center; line-height:1 }

.jar-mock {
  width: 220px; height:180px;
  border-radius: 50% 50% 12px 12px / 28% 28% 12px 12px;
  background: linear-gradient(180deg,rgba(255,255,255,0.6) 0%,rgba(239,233,220,0.95) 100%);
  border: 1px solid var(--line-strong); position:relative;
  display: flex; align-items:center; justify-content:center;
  box-shadow: 0 25px 50px -20px rgba(45,40,35,0.15);
}
.jar-mock::before {
  content:''; position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  width: 180px; height:22px; background:var(--beige); border-radius:12px;
}
.jar-mock-label { font-family:var(--display); font-style:italic; font-size:22px; color:var(--ink-soft); text-align:center; font-weight:300 }

.product-text .num {
  font-family: var(--sans); font-size:10px; letter-spacing:0.36em;
  text-transform: uppercase; color:var(--ink-muted); margin-bottom:20px; font-weight:500;
}
.product-text h2 { margin-bottom:10px }
.product-text h2 .italic { font-family:var(--display); font-style:italic; color:var(--ink-soft) }
.product-text .french { font-family:var(--serif); font-style:italic; font-size:17px; color:var(--ink-muted); margin-bottom:28px; font-weight:400 }
.product-text p.description {
  font-family: var(--serif); font-size:17px; line-height:1.8;
  color: var(--ink-soft); font-weight:400; margin-bottom:32px; max-width:480px;
}
.specs { display:flex; gap:32px; padding:20px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:32px }
.specs .s { flex:1 }
.specs .s-label { font-family:var(--sans); font-size:9px; letter-spacing:0.3em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:6px; font-weight:500 }
.specs .s-value { font-family:var(--serif); font-size:16px; color:var(--ink); font-weight:400 }
.product-text .row { display:flex; gap:24px; align-items:center; flex-wrap:wrap }
.product-text .price { font-family:var(--display); font-size:28px; color:var(--ink); font-weight:300 }

.method { padding:var(--sp) 48px; background:var(--cream); text-align:center }
.method .eyebrow { margin-bottom:24px; display:inline-block }
.method h2 { margin-bottom:70px }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:60px; max-width:1100px; margin:0 auto }
.step { text-align:center }
.step-num { font-family:var(--display); font-style:italic; font-size:80px; color:var(--ink-muted); line-height:1; margin-bottom:18px; opacity:0.5; font-weight:300 }
.step h4 { font-family:var(--display); font-size:22px; font-weight:400; margin-bottom:14px; letter-spacing:0.03em; color:var(--ink) }
.step p { font-family:var(--serif); font-size:15px; color:var(--ink-soft); line-height:1.8; max-width:280px; margin:0 auto; font-weight:400 }

/* ─────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────── */
@media (max-width:1100px) {
  .scents-section { padding:56px 24px }
  .scents-grid { grid-template-columns:1fr; max-width:480px }
  .features { padding:56px 24px }
  .features-grid { grid-template-columns:1fr 1fr; gap:36px }
  .editorial-inner { grid-template-columns:1fr }
  .editorial.flip .editorial-inner { direction:ltr }
  .editorial-text { padding:60px 24px }
  .offerings { padding:56px 24px }
  .offerings-grid { grid-template-columns:1fr; max-width:480px }
  .gift { padding:56px 24px }
  .gi-1,.gi-2,.gi-3,.gi-4,.gi-5,.gi-6 { grid-column:span 12; aspect-ratio:4/3 }
  .scent-cards { grid-template-columns:1fr; max-width:480px }
  .products { padding:56px 24px }
  .product-row { grid-template-columns:1fr; gap:50px }
  .product-row.flip > .product-text, .product-row.flip > .product-visual { order:initial }
  .method { padding:56px 24px }
  .steps { grid-template-columns:1fr; gap:40px }
}

@media (max-width:1024px) {
  .topbar { padding:16px 24px; grid-template-columns:auto 1fr auto; gap:14px }
  .nav-left, .nav-right { display:none }
  .menu-toggle { display:block }
  .footer-inner { grid-template-columns:1fr 1fr; gap:40px }
  .page-header { padding:72px 24px 48px }
  footer.site-footer { padding:60px 24px 24px }

  .nav-left.open, .nav-right.open {
    display: flex; flex-direction:column; align-items:flex-start; gap:16px;
    position: fixed; top:60px; left:0; right:0;
    background: var(--cream-light); padding:30px 24px 36px;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 16px 36px -16px rgba(45,40,35,0.12); z-index:99;
  }
  .nav-right.open { top:auto; border-top:1px solid var(--line); border-bottom:none }
  .nav-dropdown-menu {
    position: static; transform:none; opacity:1; pointer-events:auto;
    border: none; padding:6px 0 6px 16px; min-width:auto; background:transparent;
  }
  .nav-dropdown-menu a { font-size:13px; padding:6px 0; border-bottom:none }

  .hero { grid-template-columns:1fr; padding:110px 24px 60px; gap:50px }
  .collections-preview { padding:56px 24px }
  .cp-rows { grid-template-columns:1fr; gap:48px }
  .founder { grid-template-columns:1fr; padding:56px 24px; gap:40px }
  .amazon-band { padding:56px 24px }

  .story { grid-template-columns:1fr; padding:60px 24px; gap:50px }
  .pillars { padding:56px 24px }
  .pillars-grid { grid-template-columns:1fr 1fr; gap:32px }
  .multilingual, .blessing-band { padding:56px 24px }

  .coll-rows { padding:60px 24px; gap:80px }
  .coll-row { grid-template-columns:1fr; gap:40px }
  .coll-row.flip > .coll-text, .coll-row.flip > .coll-img, .coll-row.flip > .coll-img-soon { order:initial }

  .contact-grid { grid-template-columns:1fr; padding:60px 24px; gap:50px }
  .contact-form-wrap { padding:40px 28px }
  .contact-locations { padding:60px 24px }

  .product-grid { grid-template-columns:1fr 1fr }
  .shop-intro, .products-section, .shop-info { padding-left:24px; padding-right:24px }
}

@media (max-width:640px) {
  :root { --sp: 56px }
  .footer-inner { grid-template-columns:1fr }
  .footer-bottom { flex-direction:column; text-align:center }
  .pillars-grid { grid-template-columns:1fr }
  .product-grid { grid-template-columns:1fr; max-width:380px; margin-inline:auto }
}

/* ─────────────────────────────────────────────────────────
   GRAIN TEXTURE OVERLAY (frontend-design principle)
   ───────────────────────────────────────────────────────── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  opacity: 1;
}

/* ─────────────────────────────────────────────────────────
   HERO CAROUSEL
   ───────────────────────────────────────────────────────── */

/* Override hero-image to not expect a bare img anymore */
.hero-image { position: relative; }
.hero-image > img { display: none; }
.hero-image .caption { display: none; }

.hero-carousel {
  position: relative;
  width: 100%;
  aspect-ratio: 4/5;
  overflow: hidden;
}

.carousel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.carousel-slide.active { opacity: 1; }

.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Short text caption per slide */
.carousel-caption {
  position: absolute;
  bottom: 56px;
  right: 20px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

/* Prev / Next arrows */
.carousel-prev,
.carousel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.25s ease;
  z-index: 10;
  font-family: var(--sans);
}
.carousel-prev { left: 14px; }
.carousel-next { right: 14px; }
.carousel-prev:hover,
.carousel-next:hover {
  background: rgba(255, 255, 255, 0.32);
}

/* Dot indicators — pill expands on active */
.carousel-dots {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 7px;
  align-items: center;
  z-index: 10;
}

.carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.45);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: width 0.35s ease, background 0.35s ease;
}
.carousel-dot.active {
  width: 22px;
  background: rgba(255, 255, 255, 0.95);
}

/* ── Notify Me modal ─────────────────────────────────────── */
.notify-modal {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(45,40,35,0.55); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  transition: opacity 0.25s ease;
}
.notify-modal[aria-hidden="true"] { opacity: 0; pointer-events: none; }
.notify-modal[aria-hidden="false"] { opacity: 1; }
.notify-modal-box {
  background: var(--cream); max-width: 480px; width: 100%;
  padding: 56px 48px; position: relative; text-align: center;
}
.notify-modal-box h3 { font-family: var(--display); font-size: 28px; margin: 12px 0 10px; }
.notify-modal-box p { color: var(--ink-soft); font-size: 15px; margin-bottom: 28px; }
.notify-modal-close {
  position: absolute; top: 18px; right: 20px;
  background: none; border: none; font-size: 22px; color: var(--ink-muted);
  cursor: pointer; line-height: 1; padding: 4px 8px;
}
.notify-modal-close:hover { color: var(--ink); }
.nf-row { display: flex; gap: 12px; margin-bottom: 16px; }
.nf-row input {
  flex: 1; padding: 13px 16px; border: 1px solid var(--line);
  font-family: var(--sans); font-size: 14px; background: var(--cream);
  color: var(--ink); outline: none;
}
.nf-row input:focus { border-color: var(--ink-soft); }
.notify-success {
  color: var(--ink);
  font-style: italic;
  margin-top: 16px;
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 500;
  background: rgba(45,40,35,0.07);
  padding: 12px 16px;
}

/* ── Form success message ────────────────────────────────── */
.form-success {
  color: var(--ink);
  font-style: italic;
  margin-top: 18px;
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 500;
  background: rgba(45,40,35,0.07);
  padding: 14px 18px;
  display: block;
}

@media (max-width: 600px) {
  .notify-modal-box { padding: 40px 24px; }
  .nf-row { flex-direction: column; }
}