/* ============================================================
   VAA-U — Stylesheet
   Palette: porcelain, ink, bronze, blush, sage
   Type:    Fraunces (display) + Jost (body)
   ============================================================ */

:root {
  --bg: #faf6f0;
  --bg-soft: #f3ece1;
  --panel: #ffffff;
  --ink: #262119;
  --ink-soft: #6e6558;
  --line: #e6ddd0;
  --bronze: #a97f4f;
  --bronze-deep: #8a6337;
  --blush: #e9d7c9;
  --sage: #7d8c6f;
  --shadow: 0 18px 50px -18px rgba(38, 33, 25, 0.22);
  --radius: 22px;
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Jost", "Helvetica Neue", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* overflow-x: clip (not hidden) — hidden would turn the page into a
   nested scroll container and break scrolling in embedded browsers */
html { scroll-behavior: smooth; overflow-x: clip; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  font-weight: 350;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

.container { width: min(1180px, 92%); margin-inline: auto; }

/* ---------- Type ---------- */

h1, h2, h3 { font-family: var(--font-display); font-weight: 420; line-height: 1.08; letter-spacing: -0.01em; }

.display { font-size: clamp(2.6rem, 6.4vw, 4.9rem); }
.headline { font-size: clamp(2rem, 4vw, 3.1rem); }

.em { font-style: italic; font-weight: 380; color: var(--bronze); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--bronze-deep); font-weight: 500; margin-bottom: 1.1rem;
}
.eyebrow::before { content: ""; width: 34px; height: 1px; background: var(--bronze); }

.lede { color: var(--ink-soft); font-size: 1.06rem; max-width: 54ch; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  padding: 0.95rem 2rem; border-radius: 999px; border: 1px solid transparent;
  font-family: var(--font-body); font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.btn svg { width: 15px; height: 15px; }

.btn-dark { background: var(--ink); color: var(--bg); }
.btn-dark:hover { background: var(--bronze-deep); transform: translateY(-2px); box-shadow: var(--shadow); }

.btn-line { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-line:hover { background: var(--ink); color: var(--bg); transform: translateY(-2px); }

.btn-amazon { background: var(--bronze); color: #fff; }
.btn-amazon:hover { background: var(--bronze-deep); transform: translateY(-2px); box-shadow: var(--shadow); }

/* ---------- Header ---------- */

.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  transition: background 0.35s ease, box-shadow 0.35s ease, padding 0.35s ease;
  padding: 1.4rem 0;
}
.site-header.scrolled {
  background: rgba(250, 246, 240, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line);
  padding: 0.8rem 0;
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }

.logo { display: inline-flex; align-items: center; }
.logo img { height: 38px; width: auto; display: block; }

/* the logo artwork is dark ink — invert it to cream on the dark footer */
.site-footer .logo img { filter: invert(1) brightness(0.96); }

.nav-links { display: flex; align-items: center; gap: 2.2rem; list-style: none; }
.nav-links a {
  font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 450;
  padding-bottom: 3px; border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.nav-links a:hover, .nav-links a.active { border-color: var(--bronze); color: var(--bronze-deep); }

/* Highlighted CTA — black with a moving shine sweep to pull the eye */
.nav-cta {
  padding: 0.62rem 1.5rem; font-size: 0.7rem;
  background: var(--ink); color: var(--bg); border-color: transparent;
  position: relative; overflow: hidden;
  box-shadow: 0 8px 22px -10px rgba(38, 33, 25, 0.55);
}
.nav-cta::before {
  content: ""; position: absolute; top: 0; left: -60%;
  width: 45%; height: 100%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.38), transparent);
  transform: skewX(-20deg);
  animation: ctaShine 3.6s ease-in-out infinite;
}
@keyframes ctaShine {
  0%   { left: -60%; }
  45%  { left: 135%; }
  100% { left: 135%; }
}
.nav-cta:hover {
  background: var(--bronze-deep); color: #fff; border-color: transparent;
  transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(38, 33, 25, 0.45);
}

.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 6px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--ink); margin: 5px 0; transition: 0.3s; }

/* ---------- Hero ---------- */

.hero {
  position: relative; min-height: 100svh;
  display: grid; align-items: center;
  padding: 9.5rem 0 5rem; overflow: hidden;
}
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 3rem; align-items: center; }

.hero-copy .display { margin-bottom: 1.4rem; }
.hero-copy .lede { margin-bottom: 2.4rem; }
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

.hero-blob {
  position: absolute; border-radius: 50%; opacity: 0.75; z-index: -1;
  animation: drift 14s ease-in-out infinite alternate;
}
.blob-1 { width: 640px; height: 640px; background: radial-gradient(circle, #f0dcc3 0%, rgba(240, 220, 195, 0) 68%); top: -200px; right: -160px; }
.blob-2 { width: 520px; height: 520px; background: radial-gradient(circle, #ecd3d3 0%, rgba(236, 211, 211, 0) 68%); bottom: -140px; left: -180px; animation-delay: -6s; }

@keyframes drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(40px, 30px) scale(1.08); }
}

/* Arch trio of products */
.hero-stage { display: flex; align-items: flex-end; justify-content: center; gap: 1.2rem; }
.arch {
  border-radius: 999px 999px 26px 26px;
  padding: 2.4rem 1rem 1rem;
  display: grid; place-items: end center;
  box-shadow: var(--shadow);
  transition: transform 0.4s ease;
}
.arch:hover { transform: translateY(-10px); }
.arch svg { width: 100%; height: auto; }
.arch-1 { width: 180px; height: 320px; background: linear-gradient(170deg, #f6e3d5, #eccdb6); animation: float 7s ease-in-out infinite; }
.arch-2 { width: 210px; height: 400px; background: linear-gradient(170deg, #efe0ea, #ddc2d4); animation: float 7s ease-in-out infinite; animation-delay: -2.4s; }
.arch-3 { width: 180px; height: 350px; background: linear-gradient(170deg, #e3e8da, #c8d2bb); animation: float 7s ease-in-out infinite; animation-delay: -4.8s; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

.hero-scroll {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  font-size: 0.68rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-soft);
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
}
.hero-scroll::after {
  content: ""; width: 1px; height: 44px;
  background: linear-gradient(var(--bronze), transparent);
  animation: scrollHint 2s ease-in-out infinite;
}
@keyframes scrollHint { 0%,100% { opacity: 0.3; } 50% { opacity: 1; } }

/* ---------- Marquee ---------- */

.marquee {
  background: var(--ink); color: var(--bg);
  overflow: hidden; padding: 1.05rem 0;
  border-block: 1px solid var(--ink);
}
.marquee-track {
  display: flex; gap: 3rem; width: max-content;
  animation: marquee 30s linear infinite;
  font-size: 0.78rem; letter-spacing: 0.26em; text-transform: uppercase; white-space: nowrap;
}
.marquee-track .dot { color: var(--bronze); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */

section { padding: 6.5rem 0; }

.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2rem; margin-bottom: 3.2rem; flex-wrap: wrap;
}

/* ---------- Product grid & cards ---------- */

.product-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem;
}
#featured-grid { transition: opacity 0.5s ease; }
#featured-grid.grid-fading { opacity: 0; }
.shop-grid { grid-template-columns: repeat(4, 1fr); }

.featured-dots {
  display: flex; justify-content: center; gap: 0.6rem; margin-top: 2.4rem;
}
.featured-dots button {
  width: 8px; height: 8px; border-radius: 50%; padding: 0;
  border: none; background: var(--line); cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
}
.featured-dots button:hover { background: var(--bronze-deep); }
.featured-dots button.active {
  background: var(--bronze-deep); transform: scale(1.3);
}

.card {
  background: var(--panel); border-radius: var(--radius); overflow: hidden;
  cursor: pointer; border: 1px solid var(--line);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  display: flex; flex-direction: column;
  box-shadow: 0 10px 30px -20px rgba(38, 33, 25, 0.35);
}
.card:hover { transform: translateY(-8px); box-shadow: var(--shadow); }

.card-art {
  position: relative; padding: 2.2rem 2.6rem 1.4rem;
  display: grid; place-items: end center; aspect-ratio: 5 / 5.4;
}
.card-art svg { width: 72%; height: auto; transition: transform 0.45s ease; }
.card:hover .card-art svg { transform: scale(1.06) translateY(-4px); }

.badge {
  position: absolute; top: 14px; left: 14px;
  background: var(--ink); color: var(--bg);
  font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 0.32rem 0.75rem; border-radius: 999px; font-weight: 500;
}
.badge.new { background: var(--sage); }

.card-body { padding: 1.3rem 1.4rem 1.5rem; border-top: 1px solid var(--line); flex: 1; background: linear-gradient(180deg, #fdf6ec 0%, #f6ead7 100%); }
.card-cat { font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--bronze-deep); margin-bottom: 0.4rem; }
.card-name { font-family: var(--font-display); font-size: 1.22rem; font-weight: 460; margin-bottom: 0.35rem; }
.card-tagline { font-size: 0.87rem; color: var(--ink-soft); margin-bottom: 0.9rem; min-height: 2.6em; }
.card-foot { display: flex; align-items: center; justify-content: space-between; }
.card-price { font-weight: 500; letter-spacing: 0.04em; }
.card-view {
  font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bronze-deep);
  display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 500;
}
.card-view svg { width: 13px; height: 13px; transition: transform 0.3s ease; }
.card:hover .card-view svg { transform: translateX(4px); }

/* ---------- Filter pills (shop) ---------- */

.filters { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-bottom: 2.6rem; }
.pill {
  padding: 0.55rem 1.4rem; border-radius: 999px; border: 1px solid var(--line);
  background: var(--panel); font-family: var(--font-body); font-size: 0.75rem;
  letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; font-weight: 450;
  transition: all 0.25s ease;
}
.pill:hover { border-color: var(--bronze); color: var(--bronze-deep); }
.pill.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* ---------- Story split ---------- */

.story { background: var(--bg-soft); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 4.5rem; align-items: center; }

.story-visual { position: relative; display: grid; place-items: center; }
.story-frame {
  width: min(400px, 88%); aspect-ratio: 4 / 5;
  border-radius: 999px 999px var(--radius) var(--radius);
  background: linear-gradient(165deg, #eeddc9, #dcc0a4);
  display: grid; place-items: center; box-shadow: var(--shadow);
  position: relative; overflow: hidden;
}
.story-frame svg { width: 58%; }
.story-frame::after {
  content: ""; position: absolute; inset: 14px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: inherit; pointer-events: none;
}
.story-stamp {
  position: absolute; right: 4%; bottom: -26px; width: 120px; height: 120px;
  animation: spin 22s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.story-copy p { color: var(--ink-soft); margin-bottom: 1.2rem; }
.story-copy .headline { margin-bottom: 1.6rem; }

.story-stats { display: flex; gap: 2.8rem; margin-top: 2.2rem; }
.stat b { display: block; font-family: var(--font-display); font-size: 2rem; font-weight: 460; color: var(--bronze-deep); }
.stat span { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }

/* ---------- Values ---------- */

.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.value {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 2.2rem 1.8rem; transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.value:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.value-icon {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--bg-soft); display: grid; place-items: center; margin-bottom: 1.3rem;
  color: var(--bronze-deep);
}
.value-icon svg { width: 24px; height: 24px; }
.value h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.value p { font-size: 0.9rem; color: var(--ink-soft); }

/* ---------- Ritual / steps ---------- */

.ritual { background: var(--ink); color: var(--bg); }
.ritual .eyebrow { color: var(--blush); }
.ritual .eyebrow::before { background: var(--blush); }
.ritual .lede { color: #b8ad9d; }
.ritual-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 3.4rem; }
.step { border-top: 1px solid rgba(250, 246, 240, 0.18); padding-top: 1.6rem; position: relative; }
.step-num { font-family: var(--font-display); font-style: italic; font-size: 2.6rem; color: var(--bronze); line-height: 1; margin-bottom: 0.9rem; }
.step h3 { font-size: 1.25rem; margin-bottom: 0.55rem; }
.step p { font-size: 0.92rem; color: #b8ad9d; }

/* ---------- Testimonials ---------- */

.quotes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.quote {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 2.2rem;
  display: flex; flex-direction: column; gap: 1.2rem;
}
.stars { color: var(--bronze); letter-spacing: 0.2em; font-size: 0.85rem; }
.quote p { font-family: var(--font-display); font-size: 1.12rem; font-style: italic; line-height: 1.5; flex: 1; }
.quote footer { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.quote footer b { color: var(--ink); font-weight: 500; }

/* ---------- Amazon band ---------- */

.amazon-band { padding: 5.5rem 0; }
.band-inner {
  background: linear-gradient(140deg, #efe0cd, #e5cdb2);
  border-radius: calc(var(--radius) * 1.6);
  padding: 4.2rem 3.4rem; text-align: center;
  position: relative; overflow: hidden;
}
.band-inner::before, .band-inner::after {
  content: "✦"; position: absolute; color: rgba(138, 99, 55, 0.28); font-size: 2.2rem;
}
.band-inner::before { top: 2rem; left: 2.6rem; }
.band-inner::after { bottom: 2rem; right: 2.6rem; }
.band-inner .headline { margin-bottom: 1rem; }
.band-inner p { color: var(--bronze-deep); max-width: 52ch; margin: 0 auto 2.2rem; }

/* ---------- Newsletter / bulk enquiry ---------- */

.newsletter { text-align: center; padding-top: 2rem; }
.bulk-actions { display: flex; justify-content: center; margin-top: 2.4rem; }
.newsletter-form {
  display: flex; gap: 0.7rem; justify-content: center; margin-top: 2.2rem; flex-wrap: wrap;
}
.newsletter-form input {
  width: min(360px, 100%); padding: 0.95rem 1.5rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel);
  font-family: var(--font-body); font-size: 0.92rem; outline: none;
  transition: border-color 0.25s ease;
}
.newsletter-form input:focus { border-color: var(--bronze); }
.form-note { margin-top: 1rem; font-size: 0.8rem; color: var(--sage); min-height: 1.2em; }

/* ---------- Footer ---------- */

.site-footer { background: var(--ink); color: #b8ad9d; padding: 4.5rem 0 2rem; margin-top: 4rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 3rem; margin-bottom: 3.4rem; }
.site-footer .logo { color: var(--bg); margin-bottom: 1rem; }
.site-footer p { font-size: 0.9rem; }
.footer-col h4 {
  color: var(--bg); font-family: var(--font-body); font-size: 0.72rem;
  letter-spacing: 0.24em; text-transform: uppercase; margin-bottom: 1.2rem; font-weight: 500;
}
.footer-col ul { list-style: none; display: grid; gap: 0.65rem; }
.footer-col a { font-size: 0.9rem; transition: color 0.25s ease; }
.footer-col a:hover { color: var(--bg); }
.footer-bottom {
  border-top: 1px solid rgba(250, 246, 240, 0.14); padding-top: 1.6rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: 0.78rem; letter-spacing: 0.06em;
}

/* ---------- Page hero (shop / about / bulk) ---------- */

.page-hero { padding: 10.5rem 0 3.5rem; text-align: center; }
.page-hero .lede { margin: 1rem auto 0; }

/* ---------- FAQ page ---------- */

.faq-list { max-width: 780px; margin: 0 auto; display: grid; gap: 1rem; }
.faq-item {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); overflow: hidden; transition: box-shadow 0.3s ease;
}
.faq-item.open { box-shadow: var(--shadow); }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.2rem;
  padding: 1.35rem 1.6rem; background: none; border: none; cursor: pointer;
  font-family: var(--font-display); font-size: 1.12rem; font-weight: 460;
  text-align: left; color: var(--ink);
}
.faq-q svg {
  width: 20px; height: 20px; flex-shrink: 0; color: var(--bronze-deep);
  transition: transform 0.3s ease;
}
.faq-item.open .faq-q svg { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.faq-item.open .faq-a { max-height: 340px; }
.faq-a p { padding: 0 1.6rem 1.5rem; color: var(--ink-soft); font-size: 0.96rem; }
.faq-a a { color: var(--bronze-deep); border-bottom: 1px solid var(--line); }
.faq-a a:hover { border-color: var(--bronze); }

/* ---------- Contact page ---------- */

.contact-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.contact-methods .value { display: block; }
.contact-methods .value .card-view { margin-top: 1.1rem; }

@media (max-width: 860px) { .contact-methods { grid-template-columns: 1fr; } }

/* ---------- Bulk orders page ---------- */

.bulk-layout { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 3.5rem; align-items: start; }
.bulk-intro .headline { margin-bottom: 1.2rem; }
.bulk-intro p { color: var(--ink-soft); margin-bottom: 1.3rem; }
.bulk-points { list-style: none; display: grid; gap: 1rem; margin-top: 1.8rem; }
.bulk-points li { display: flex; gap: 0.85rem; align-items: flex-start; font-size: 0.95rem; color: var(--ink-soft); }
.bulk-points li b { color: var(--ink); font-weight: 500; }
.bulk-points svg { width: 20px; height: 20px; color: var(--bronze-deep); flex-shrink: 0; margin-top: 3px; }

.bulk-form {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 2.4rem;
  box-shadow: var(--shadow);
}
.field { margin-bottom: 1.15rem; }
.field label {
  display: block; font-size: 0.7rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.5rem; font-weight: 500;
}
.field input, .field select, .field textarea {
  width: 100%; padding: 0.85rem 1rem; border-radius: 12px;
  border: 1px solid var(--line); background: var(--bg);
  font-family: var(--font-body); font-size: 0.95rem; color: var(--ink);
  outline: none; transition: border-color 0.25s ease;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--bronze); }
.field textarea { resize: vertical; min-height: 108px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.bulk-form .btn { width: 100%; margin-top: 0.4rem; }
.bulk-form .form-note { text-align: center; color: var(--ink-soft); }

@media (max-width: 900px) {
  .bulk-layout { grid-template-columns: 1fr; gap: 2.4rem; }
}
@media (max-width: 560px) {
  .field-row { grid-template-columns: 1fr; }
}

/* ---------- Modal ---------- */

.modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(38, 33, 25, 0.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: grid; place-items: center; padding: 1.2rem;
  opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.modal-overlay.open { opacity: 1; pointer-events: auto; }

.modal {
  background: var(--bg); border-radius: calc(var(--radius) * 1.3);
  width: min(880px, 100%); max-height: 90vh; overflow-y: auto;
  display: grid; grid-template-columns: 0.85fr 1.15fr;
  transform: translateY(24px) scale(0.98); transition: transform 0.35s ease;
  position: relative;
}
.modal-overlay.open .modal { transform: translateY(0) scale(1); }

.modal-close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--panel);
  cursor: pointer; display: grid; place-items: center;
  font-size: 1rem; color: var(--ink); transition: all 0.25s ease;
}
.modal-close:hover { background: var(--ink); color: var(--bg); }

.modal-art { display: grid; place-items: center; padding: 3rem 2.4rem; background: #ffffff; }
.modal-art svg { width: 82%; max-width: 260px; }

.modal-info { padding: 3rem 2.8rem 2.6rem; background: linear-gradient(180deg, #fdf6ec 0%, #f6ead7 100%); }
.modal-cat { font-size: 0.68rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--bronze-deep); margin-bottom: 0.6rem; }
.modal-info h2 { font-size: 2rem; margin-bottom: 0.4rem; }
.modal-tagline { font-family: var(--font-display); font-style: italic; color: var(--ink-soft); margin-bottom: 1.2rem; }
.modal-meta { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1.4rem; }
.modal-price { font-size: 1.35rem; font-weight: 500; }
.modal-size { font-size: 0.82rem; color: var(--ink-soft); letter-spacing: 0.1em; text-transform: uppercase; }
.modal-desc { font-size: 0.95rem; color: var(--ink-soft); margin-bottom: 1.5rem; }

.modal-section { margin-bottom: 1.4rem; }
.modal-section h4 {
  font-family: var(--font-body); font-size: 0.7rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink); margin-bottom: 0.6rem; font-weight: 500;
}
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  font-size: 0.78rem; padding: 0.35rem 0.9rem; border-radius: 999px;
  background: var(--bg-soft); border: 1px solid var(--line); color: var(--ink-soft);
}
.modal-section p { font-size: 0.9rem; color: var(--ink-soft); }

.modal-buy { margin-top: 1.8rem; }
.redirect-note {
  margin-top: 0.85rem; font-size: 0.78rem; color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center; gap: 0.4rem; text-align: center;
}
.redirect-note svg { width: 13px; height: 13px; flex-shrink: 0; }

/* ---------- Buy control (store dropdown) ---------- */

.buy-dd { position: relative; }

/* Bronze buy button (matches the site's brown accents) */
.buy-split {
  display: flex; border-radius: 999px; overflow: hidden;
  box-shadow: 0 14px 34px -14px rgba(138, 99, 55, 0.6);
}

.buy-main {
  flex: 1; display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 0.9rem 1.4rem; background: linear-gradient(135deg, var(--bronze), var(--bronze-deep)); color: #fff;
  border-radius: 999px 0 0 999px; font-size: 0.82rem; font-weight: 500;
  letter-spacing: 0.06em; transition: filter 0.25s ease;
}
.buy-split.solo .buy-main { border-radius: 999px; }
.buy-main:hover { filter: brightness(1.07); }
.buy-main-text { flex: 1; }
.buy-main-text b { font-weight: 600; }
.buy-main > svg { width: 15px; height: 15px; opacity: 0.85; }

.buy-toggle {
  width: 52px; flex-shrink: 0; border: none; cursor: pointer;
  background: var(--bronze-deep); color: #fff;
  border-left: 1px solid rgba(255, 255, 255, 0.22);
  display: grid; place-items: center; transition: filter 0.25s ease;
}
.buy-toggle:hover { filter: brightness(1.09); }
.buy-toggle svg { width: 20px; height: 20px; transition: transform 0.3s ease; }
.buy.open .buy-toggle svg { transform: rotate(180deg); }

/* Platform logo badge (real store icons) */
.plat-badge {
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; overflow: hidden;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(38, 33, 25, 0.08), 0 2px 5px -2px rgba(38, 33, 25, 0.25);
}
.plat-badge img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Dropdown menu — frosted glass, opens upward above the button */
.buy-menu {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 10px);
  background: rgba(250, 246, 240, 0.66);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  backdrop-filter: blur(22px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 20px; padding: 0.5rem;
  box-shadow: 0 24px 50px -18px rgba(38, 33, 25, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  opacity: 0; transform: translateY(8px) scale(0.98); transform-origin: bottom center;
  pointer-events: none; transition: opacity 0.24s ease, transform 0.24s ease; z-index: 5;
}
.buy.open .buy-menu { opacity: 1; transform: none; pointer-events: auto; }
.buy-menu-head {
  font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-soft); padding: 0.55rem 0.7rem 0.5rem; font-weight: 600;
}
.buy-option {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.62rem 0.7rem; border-radius: 13px;
  font-size: 0.92rem; color: var(--ink); transition: background 0.2s ease;
}
.buy-option:hover { background: rgba(255, 255, 255, 0.6); }
.buy-option-name { flex: 1; font-weight: 500; }
.buy-go { display: inline-flex; color: var(--ink-soft); }
.buy-go svg { width: 15px; height: 15px; transition: transform 0.25s ease; }
.buy-option:hover .buy-go { color: var(--bronze-deep); }
.buy-option:hover .buy-go svg { transform: translateX(3px); }

/* ---------- Reveal animation ---------- */

.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; }

/* ---------- About page extras ---------- */

.about-body { max-width: 720px; margin-inline: auto; }
.about-body p { color: var(--ink-soft); margin-bottom: 1.4rem; font-size: 1.02rem; }
.about-body .drop::first-letter {
  font-family: var(--font-display); font-size: 3.4rem; float: left;
  line-height: 0.9; padding-right: 0.55rem; color: var(--bronze-deep);
}
.signature { font-family: var(--font-display); font-style: italic; font-size: 1.5rem; color: var(--bronze-deep); margin-top: 2rem; }

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
  .product-grid, .shop-grid { grid-template-columns: repeat(3, 1fr); }
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-copy .lede { margin-inline: auto; }
  .hero-actions { justify-content: center; }
  .hero-stage { margin-top: 1.5rem; }
  .arch-2 { height: 340px; }
  .arch-1, .arch-3 { height: 280px; }
  .split { grid-template-columns: 1fr; gap: 3rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  section { padding: 4.5rem 0; }
  .product-grid, .shop-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .card-art { padding: 1.6rem 1.6rem 1rem; }
  .quotes-grid, .ritual-grid { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr; }
  .modal { grid-template-columns: 1fr; max-height: 92vh; }
  .modal-art { padding: 2.4rem 2rem 0.5rem; }
  .modal-art svg { max-width: 180px; }
  .modal-info { padding: 1.8rem 1.6rem 2rem; }
  .band-inner { padding: 3rem 1.6rem; }
  .hero { padding-top: 8rem; }
  .hero-stage { gap: 0.7rem; }
  .arch-1, .arch-3 { width: 110px; height: 200px; }
  .arch-2 { width: 130px; height: 245px; }
  .story-stats { gap: 1.6rem; flex-wrap: wrap; }
}

@media (max-width: 460px) {
  .product-grid, .shop-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* ---------- Toast ---------- */

.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(80px);
  background: var(--ink); color: var(--bg); padding: 0.9rem 1.8rem;
  border-radius: 999px; font-size: 0.85rem; letter-spacing: 0.06em;
  z-index: 300; opacity: 0; transition: all 0.4s ease; pointer-events: none;
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

/* ---------- Floating buttons (WhatsApp + scroll to top) ---------- */

.fab-stack {
  position: fixed; right: 26px; bottom: 26px; z-index: 120;
  display: flex; flex-direction: column; align-items: flex-end; gap: 14px;
}

.fab {
  position: relative;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; border: none;
  box-shadow: 0 12px 30px -10px rgba(38, 33, 25, 0.45);
  transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.35s ease, visibility 0.35s ease, background 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}
.fab:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 18px 38px -10px rgba(38, 33, 25, 0.5); }
.fab:active { transform: translateY(-1px) scale(0.98); }

/* WhatsApp — signature green, always visible, gentle attention pulse */
.fab-wa { background: #25d366; color: #fff; }
.fab-wa svg { width: 30px; height: 30px; }
.fab-wa::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  animation: waPulse 2.6s ease-out infinite;
}
@keyframes waPulse {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
  70%  { box-shadow: 0 0 0 18px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* Scroll to top — brand ink, fades in once you scroll */
.fab-top {
  width: 50px; height: 50px; background: var(--ink); color: var(--bg);
  display: none;
}
.fab-top svg { width: 22px; height: 22px; }
.fab-top.show { display: grid; animation: fabPop 0.35s ease; }
.fab-top.show:hover { transform: translateY(-3px) scale(1.05); background: var(--bronze-deep); }
@keyframes fabPop {
  from { opacity: 0; transform: translateY(10px) scale(0.8); }
  to   { opacity: 1; transform: none; }
}

/* Hover label that slides out to the left */
.fab-label {
  position: absolute; right: calc(100% + 14px); top: 50%;
  transform: translateY(-50%) translateX(6px);
  background: var(--ink); color: var(--bg);
  padding: 0.5rem 0.9rem; border-radius: 999px;
  font-size: 0.74rem; letter-spacing: 0.06em; white-space: nowrap;
  opacity: 0; pointer-events: none;
  box-shadow: 0 10px 24px -10px rgba(38, 33, 25, 0.5);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.fab-label::after {
  content: ""; position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
  border: 6px solid transparent; border-left-color: var(--ink);
}
.fab:hover .fab-label { opacity: 1; transform: translateY(-50%) translateX(0); }

/* Hide the stack behind the fullscreen mobile menu */
body.nav-open .fab-stack { opacity: 0; visibility: hidden; pointer-events: none; }

@media (max-width: 720px) {
  .fab-stack { right: 16px; bottom: 16px; gap: 12px; }
  .fab { width: 52px; height: 52px; }
  .fab-wa svg { width: 28px; height: 28px; }
  .fab-top { width: 46px; height: 46px; }
  .fab-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fab-wa::after { animation: none; }
  .nav-cta::before { animation: none; }
}

/* ============================================================
   Real product photos (replaces the old drawn bottles)
   ============================================================ */

.card-art { place-items: center; padding: 1.6rem 1.7rem 1.2rem; background: #ffffff; }
.card-art img.product-photo {
  width: 100%; height: 100%; max-height: 300px; object-fit: contain;
  transition: transform 0.45s ease;
  filter: drop-shadow(0 14px 24px rgba(38, 33, 25, 0.14));
}
.card:hover .card-art img.product-photo { transform: scale(1.05) translateY(-4px); }

/* Hero trio */
.arch { overflow: hidden; place-items: center; padding: 1.4rem 0.9rem; }
.arch img.hero-photo {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 18px 28px rgba(38, 33, 25, 0.2));
}

/* Story split visual */
.story-frame img.story-photo {
  width: 82%; object-fit: contain;
  filter: drop-shadow(0 18px 28px rgba(38, 33, 25, 0.22));
}

/* Modal photo */
.modal-art img.modal-photo {
  width: 100%; max-width: 300px; object-fit: contain;
  filter: drop-shadow(0 18px 30px rgba(38, 33, 25, 0.16));
}

/* Size selector */
.modal-sizes { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.size-pill {
  padding: 0.42rem 1.05rem; border-radius: 999px; border: 1px solid var(--line);
  background: var(--panel); font-family: var(--font-body); font-size: 0.8rem;
  letter-spacing: 0.05em; color: var(--ink); cursor: pointer; transition: all 0.2s ease;
}
.size-pill:hover { border-color: var(--bronze); color: var(--bronze-deep); }
.size-pill.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* Buy — "coming soon" state (before store links are added) */
.buy-soon { text-align: center; padding: 0.4rem 0; }
.buy-soon-head {
  font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 0.75rem;
}
.buy-soon-stores { display: flex; justify-content: center; gap: 0.7rem; margin-bottom: 0.2rem; }
.buy-soon-stores .plat-badge { width: 42px; height: 42px; border-radius: 12px; }
.buy-soon .redirect-note { margin-top: 0.7rem; }

/* ============================================================
   Hero carousel + story figure: lifestyle person inside a shape
   (body stays INSIDE the shape; only the head rises above the top)
   ============================================================ */

.hero-carousel, .story-figure {
  position: relative;
  width: min(420px, 100%);
  aspect-ratio: 1 / 1;
  margin-inline: auto;
}
.story-figure { cursor: pointer; }

/* three rotating slides stacked in the hero, each with its own shape —
   a plain, subtle opacity crossfade between them. */
.hero-slide {
  position: absolute; inset: 0; cursor: pointer;
  opacity: 0; visibility: hidden;
  transition: opacity 2.4s ease-in-out, visibility 0s linear 2.4s;
}
.hero-slide.active {
  opacity: 1; visibility: visible;
  transition: opacity 2.4s ease-in-out;
  animation: softFloat 9s ease-in-out infinite;
}
@keyframes softFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* the coloured shape */
.hero-shape, .story-shape {
  position: absolute; inset: 15% 0 0 0;
  border-radius: 185px 185px 34px 34px;
  background:
    radial-gradient(118% 62% at 50% 22%, #fbeee1 0%, rgba(251, 238, 225, 0) 62%),
    linear-gradient(168deg, #efdccb 0%, #e6c8b7 48%, #dab8c1 100%);
  box-shadow: 0 34px 70px -30px rgba(38, 33, 25, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  overflow: hidden;
  transition: box-shadow 0.5s ease;
}
/* slide-specific shapes — a different form + tint for each person */
.shape-a {                                   /* nail serum — tall warm arch */
  inset: 13% 0 0 0;
  border-radius: 210px 210px 32px 32px;
}
.shape-b {                                   /* lip balm — cool squircle */
  inset: 17% 0 0 0;
  border-radius: 48px;
  background:
    radial-gradient(120% 60% at 50% 20%, #efe6f2 0%, rgba(239, 230, 242, 0) 62%),
    linear-gradient(165deg, #e4d8ea 0%, #cebdd7 55%, #c2b1d0 100%);
}
.shape-c {                                   /* beard oil — grounded rounded-rect, warm olive tone */
  inset: 14% 0 0 0;
  border-radius: 64px 64px 44px 44px;
  background:
    radial-gradient(115% 60% at 50% 18%, #f2ece0 0%, rgba(242, 236, 224, 0) 62%),
    linear-gradient(170deg, #e2d6c2 0%, #c9b79c 50%, #a99476 100%);
}
/* soft animated glow — drifts + pulses subtly to draw the eye.
   each shape's glow originates from a different pair of spots. */
.hero-shape::before, .story-shape::before {
  content: ""; position: absolute; inset: -12%; border-radius: inherit;
  background:
    radial-gradient(26% 20% at 28% 26%, rgba(255, 248, 238, 0.85), transparent 72%),
    radial-gradient(24% 18% at 72% 60%, rgba(238, 214, 196, 0.75), transparent 72%);
  animation: glowDrift 6.5s ease-in-out infinite;
  pointer-events: none;
}
.shape-a::before {
  background:
    radial-gradient(24% 19% at 30% 22%, rgba(255, 248, 238, 0.85), transparent 72%),
    radial-gradient(22% 16% at 76% 66%, rgba(238, 214, 196, 0.7), transparent 72%);
}
.shape-b::before {
  background:
    radial-gradient(23% 18% at 72% 18%, rgba(250, 244, 252, 0.85), transparent 72%),
    radial-gradient(22% 17% at 22% 72%, rgba(214, 198, 228, 0.7), transparent 72%);
}
.shape-c::before {
  background:
    radial-gradient(22% 18% at 48% 14%, rgba(246, 240, 226, 0.8), transparent 72%),
    radial-gradient(24% 18% at 20% 80%, rgba(196, 184, 156, 0.65), transparent 72%);
}
@keyframes glowDrift {
  0%, 100% { opacity: 0.4; transform: translate(0, 0) scale(1); }
  50% { opacity: 0.8; transform: translate(4%, -3%) scale(1.05); }
}
.hero-shape::after, .story-shape::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 30%;
  border-radius: inherit;
  background: linear-gradient(to top, rgba(38, 33, 25, 0.14), rgba(38, 33, 25, 0));
  pointer-events: none;
}

/* the person fills the figure (cover) so there's no gap; the shape's top
   inset lets the head sit above the shape, and the bottom stays flush inside.
   the mask's bottom corners are rounded to match the shape underneath it,
   so the person is visibly clipped to the shape's own edge, not a plain box. */
.figure-mask {
  position: absolute; inset: 0;
  z-index: 2; overflow: hidden; pointer-events: none;
  border-radius: 0 0 34px 34px;
}
.mask-a { border-radius: 0 0 32px 32px; }
.mask-b { border-radius: 0 0 48px 48px; }
.mask-c { border-radius: 0 0 44px 44px; }
.hero-person, .story-person {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  filter: drop-shadow(0 14px 16px rgba(38, 33, 25, 0.16));
}
/* this source photo is near-square, so cover barely crops it and a faint
   trailing edge at the very bottom was left showing below the body —
   zoom in from the top to crop that off and plant him flush in the shape */
.story-person {
  transform: scale(1.14);
  transform-origin: 50% 0%;
}

/* hover: no upward float — the whole shape emits a soft glow instead */
.hero-slide:hover .hero-shape,
.story-figure:hover .story-shape {
  box-shadow: 0 34px 70px -30px rgba(38, 33, 25, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.45),
    0 0 44px 6px rgba(235, 198, 180, 0.55);
}

/* EST-2026 seal spins in FRONT of the philosophy person */
.story-stamp { z-index: 5; }

@media (max-width: 900px) {
  .hero-carousel, .story-figure { max-width: 360px; }

  .nav-links {
    position: fixed; inset: 0; background: var(--bg);
    flex-direction: column; justify-content: center; gap: 2rem;
    transform: translateX(100%); transition: transform 0.35s ease; z-index: 95;
  }
  .nav-links.open { transform: translateX(0); }
  .nav-links a { font-size: 1rem; }
  .nav-toggle { display: block; position: relative; z-index: 96; }
  .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav-cta { display: none; }
}