/* ============================================
   NEFÉL Landing Page
   ============================================ */

:root {
  --ink: #16140f;
  --ink-soft: #2a271f;
  --paper: #f7f3ea;
  --paper-alt: #efe7d6;
  --cream: #fbf8f2;
  --gold: #b6905a;
  --gold-light: #d9bd8f;
  --gold-dim: rgba(182, 144, 90, 0.35);
  /* Darker than --gold specifically for small/thin text on light (--paper)
     backgrounds - plain --gold on --paper measures ~2.7:1 contrast, well
     under the 4.5:1 WCAG AA minimum for normal-size text. This shade
     measures ~5.3:1. Never use for text on dark backgrounds (use --gold or
     --gold-light there instead, where the higher-key gold reads correctly
     and already passes). */
  --gold-deep: #805e32;
  --text-muted: #6f6a5e;
  --text-on-dark: #efe9dc;
  --text-on-dark-muted: #bcb4a2;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  --container: 1240px;
  --radius: 2px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
/* WebP wrapper only - layout stays exactly as if the <img> stood alone. */
picture { display: contents; }

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

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.1;
  margin: 0 0 20px;
  letter-spacing: 0.01em;
}

h2 { font-size: clamp(2rem, 3.4vw, 3rem); }
h3 { font-size: clamp(1.35rem, 2vw, 1.65rem); font-weight: 500; }

p { line-height: 1.75; color: var(--text-muted); margin: 0 0 16px; }

.lead-p { font-size: 1.1rem; color: var(--ink-soft); }

.section-label {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 14px;
  font-weight: 500;
}

.eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 22px;
  font-weight: 500;
}

.eyebrow-light { color: var(--gold-light); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 30px;
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(22,20,15,0.35); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn-primary {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}
.btn-primary:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }

.btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-outline:hover { background: var(--ink); color: var(--cream); }

.btn-outline-light {
  background: transparent;
  color: var(--text-on-dark);
  border-color: rgba(239, 233, 220, 0.5);
}
.btn-outline-light:hover { background: rgba(239, 233, 220, 0.12); border-color: var(--text-on-dark); }

.btn-sm { padding: 11px 22px; font-size: 0.74rem; }
.btn-lg { padding: 18px 42px; font-size: 0.88rem; }

/* ============ HEADER ============ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  padding: 26px 0;
  transition: all 0.35s ease;
  background: transparent;
}
.site-header.is-scrolled {
  padding: 14px 0;
  background: rgba(22, 20, 15, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

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

.main-nav {
  display: flex;
  gap: 38px;
  flex: 1;
  justify-content: center;
}
.main-nav a {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-on-dark-muted);
  transition: color 0.25s ease;
  position: relative;
  padding-bottom: 4px;
}
.main-nav a:hover { color: var(--text-on-dark); }
.main-nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width 0.3s ease;
}
.main-nav a:hover::after { width: 100%; }

.header-actions { display: flex; align-items: center; gap: 20px; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle span {
  width: 22px; height: 1px;
  background: var(--text-on-dark);
}

/* ============ HERO ============ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero-media {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 62%;
  transform: scale(1.05);
}
.hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,9,7,0.55) 0%, rgba(10,9,7,0.45) 40%, rgba(10,9,7,0.78) 100%);
}
.hero-inner {
  /* NOTE: this element also carries the .container class (same node), so
     nothing here may touch padding/margin/max-width - that would silently
     override .container's own box model instead of stacking with it. */
  position: relative;
  z-index: 2;
  padding-top: 90px;
}
.hero-glass {
  max-width: 720px;
  padding: 36px 40px;
  /* A frosted glass panel, not just a darker scrim: the lead paragraph sits
     over busy product-label text on the photo, and darkening the whole
     image doesn't separate light-on-dark text from light-on-dark text -
     blurring what's behind the panel does, while our own text stays crisp
     on top. */
  background: rgba(10, 9, 7, 0.42);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  border-radius: 20px;
}
@media (max-width: 600px) {
  .hero-glass {
    display: block;
    margin-left: -32px;
    margin-right: -32px;
    max-width: none;
    border-radius: 0;
    padding: 28px 32px;
  }
  .hero h1 { margin-bottom: 18px; }
  .hero-lead { margin-bottom: 28px; }
  .hero-lead-full { display: none; }
  .hero-lead-short { display: block; }
}
.hero h1 {
  color: var(--text-on-dark);
  font-size: clamp(2.8rem, 6vw, 4.8rem);
  font-weight: 500;
  margin-bottom: 26px;
}
.hero-lead {
  color: var(--text-on-dark-muted);
  font-size: 1.12rem;
  max-width: 560px;
  margin-bottom: 38px;
}
/* Two copies of the lead paragraph: the full one for desktop, a shorter
   one for narrow screens. On mobile the frosted glass panel has to be at
   least as tall as its text content, and the full paragraph made that
   panel cover almost the entire hero photo - the one moment meant to set
   a premium, sensory first impression. Toggled with the same 600px
   breakpoint .hero-glass already uses. */
.hero-lead-short { display: none; }
.hero-actions { display: flex; gap: 18px; flex-wrap: wrap; }

.hero-scroll {
  position: absolute;
  bottom: 34px; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-on-dark-muted);
}
.hero-scroll span {
  width: 1px; height: 42px;
  background: linear-gradient(180deg, var(--gold-light), transparent);
  animation: scrollpulse 2.2s ease-in-out infinite;
}
@keyframes scrollpulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* ============ SECTIONS ============ */
.section { padding: 92px 0; }
.section-alt { background: var(--paper-alt); }

.section-heading { max-width: 680px; margin: 0 auto 60px; text-align: center; }
.section-heading h2 { margin-bottom: 18px; }
.section-lead { font-size: 1.05rem; }

/* Story */
.story-grid {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: 90px;
  align-items: center;
}
.story-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 1600 / 2251;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: 0 40px 70px -30px rgba(22,20,15,0.35);
}
.story-copy h2 { max-width: 460px; }

/* Philosophy strip */
.philosophy-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px;
}
.philosophy-item { border-top: 1px solid var(--gold-dim); padding-top: 26px; }
.philosophy-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--gold-deep);
  display: block;
  margin-bottom: 14px;
}
.philosophy-item h3 { margin-bottom: 10px; font-size: 1.15rem; }
.philosophy-item p { font-size: 0.94rem; margin: 0; }

/* Break media */
.break-media {
  position: relative;
  min-height: 62vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.break-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 55%;
}
.break-scrim { position: absolute; inset: 0; background: rgba(10,9,7,0.72); }
.break-quote {
  position: relative;
  z-index: 1;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  color: var(--text-on-dark);
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
  line-height: 1.4;
  text-shadow: 0 4px 24px rgba(0,0,0,0.55);
}
.break-quote span { color: var(--gold-light); }

/* Pyramid */
.pyramid {
  max-width: 420px;
  margin: 0 auto 64px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pyramid-row {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ink-soft);
  justify-content: center;
}
.pyramid-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}

/* Family cards */
.families-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--gold-dim);
  border: 1px solid var(--gold-dim);
}
.family-card {
  background: var(--paper);
  padding: 40px 30px;
  transition: background 0.3s ease;
  display: flex;
  flex-direction: column;
}
.family-card:hover { background: var(--cream); }
.family-media {
  aspect-ratio: 3 / 4;
  background: #ffffff;
  margin: -40px -30px 24px;
  overflow: hidden;
}
.family-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 22px;
  box-sizing: border-box;
  display: block;
  transition: transform 0.5s ease;
}
.family-card:hover .family-media img { transform: scale(1.04); }
.family-tag {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}
.family-card h3 { margin-bottom: 6px; }
.family-notes {
  display: block;
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: italic;
  font-family: var(--serif);
  margin-bottom: 18px;
}
.family-card p { font-size: 0.92rem; margin-bottom: 18px; }
.family-use {
  display: block;
  font-size: 0.78rem;
  color: var(--ink-soft);
  border-top: 1px solid var(--gold-dim);
  padding-top: 14px;
  margin-top: auto;
}

/* Quiz */
.quiz-card {
  max-width: 640px;
  margin: 0 auto;
  background: var(--cream);
  border: 1px solid var(--gold-dim);
  padding: 64px 56px;
  text-align: center;
}
.quiz-step { display: none; animation: quizFade 0.4s ease; }
.quiz-step.is-active { display: block; }
@keyframes quizFade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.quiz-step-label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.quiz-step h3 { margin-bottom: 30px; }
.quiz-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.quiz-option {
  font-family: var(--sans);
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  padding: 16px 26px;
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.quiz-option:hover {
  background: var(--ink);
  color: var(--cream);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -12px rgba(22,20,15,0.35);
}
.quiz-result-poetic {
  display: block;
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: italic;
  font-family: var(--serif);
  margin-bottom: 8px;
}
.quiz-result-name { margin-bottom: 18px; }
.quiz-result-desc { max-width: 460px; margin-left: auto; margin-right: auto; }
.quiz-result-search {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin: 26px auto 0;
  padding: 20px 22px;
  max-width: 460px;
  background: var(--paper-alt);
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius);
}
.quiz-result-search-label {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
}
.quiz-result-list { display: flex; flex-direction: column; gap: 1px; background: var(--gold-dim); }
.quiz-result-loading { text-align: center; color: var(--text-muted); font-size: 0.9rem; padding: 10px 0; }
.quiz-result-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 16px;
  background: var(--cream);
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--ink);
  text-align: left;
  transition: background 0.2s ease;
}
.quiz-result-item:hover { background: var(--paper); }
.quiz-result-item-name { flex: 1; }
.quiz-result-item-price { font-family: var(--serif); color: var(--gold-deep); white-space: nowrap; }
.quiz-result-item.is-soldout { color: var(--text-muted); }
.quiz-result-item.is-soldout .quiz-result-item-price { color: var(--text-muted); }
.quiz-result-item.is-soldout em { font-style: normal; font-size: 0.78rem; }
.quiz-result-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.quiz-result-soldout { margin-top: 26px; }
.quiz-soldout-note {
  max-width: 420px;
  margin: 0 auto 22px;
  color: var(--text-muted);
}
.quiz-notify-form {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.quiz-notify-form input {
  font-family: var(--sans);
  font-size: 0.9rem;
  padding: 14px 18px;
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  min-width: 240px;
}
.quiz-notify-message { min-height: 1.4em; font-size: 0.85rem; margin: 0 0 16px; }
.quiz-notify-message.is-success { color: var(--gold-deep, var(--gold)); }
.quiz-notify-message.is-error { color: #a44b3f; }

/* Collection */
.collection-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}
.collection-card {
  background: var(--cream);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 30px 60px -35px rgba(22,20,15,0.3);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.collection-card:hover { transform: translateY(-6px); box-shadow: 0 40px 70px -30px rgba(22,20,15,0.4); }
.collection-media { aspect-ratio: 3 / 2; overflow: hidden; }
.collection-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.collection-card:hover .collection-media img { transform: scale(1.05); }
.collection-body { padding: 40px; }
.collection-body h3 { margin-bottom: 16px; }

/* Third, "completes the ritual" card - spans the full row instead of
   sitting alone at half-width, and lays out horizontally to read as a
   conclusion to the two main cards above it rather than a third equal. */
.collection-card-wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 0.8fr 1fr;
}
/* This card holds a product bottle shot (portrait), not a lifestyle
   photo like the other two cards - object-fit:cover on a portrait image
   inside a wide box was zooming in hard and cropping most of the bottle
   off. Match the shop's own product-photo treatment instead: fixed box,
   white ground, contain + padding, so the whole bottle stays visible. */
.collection-card-wide .collection-media {
  aspect-ratio: 3 / 2;
  height: auto;
  background: #ffffff;
}
.collection-card-wide .collection-media img {
  object-fit: contain;
  padding: 32px;
  box-sizing: border-box;
}
.collection-card-wide .collection-body { display: flex; flex-direction: column; justify-content: center; }

.chip-list {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.chip-list li {
  font-size: 0.76rem;
  letter-spacing: 0.03em;
  padding: 8px 14px;
  border: 1px solid var(--gold-dim);
  border-radius: 20px;
  color: var(--ink-soft);
}

/* Sustainability */
.sustain-grid {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: 90px;
  align-items: center;
}
.sustain-media {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 20px;
  align-items: end;
}
.sustain-media img { width: 100%; height: auto; object-fit: cover; border-radius: var(--radius); box-shadow: 0 30px 60px -30px rgba(22,20,15,0.35); }
.sustain-img-1 { aspect-ratio: 1400 / 1986; }
.sustain-img-2 { aspect-ratio: 1600 / 2273; transform: translateY(40px); }
.sustain-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 34px 0 12px;
  padding-top: 26px;
  border-top: 1px solid var(--gold-dim);
}
.sustain-points strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.8rem;
  color: var(--gold);
  font-weight: 500;
}
.sustain-points span { font-size: 0.8rem; color: var(--text-muted); }
.fine-print { font-size: 0.74rem; color: var(--text-muted); opacity: 0.75; }

/* Gallery */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.gallery-item { border-radius: var(--radius); overflow: hidden; aspect-ratio: 3/4; }
.gallery-cta { text-align: center; margin-top: 44px; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.gallery-item:hover img { transform: scale(1.06); }

/* Hospitality */
.hospitality { background: var(--ink); padding: 96px 0; }
.hospitality-grid {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: 90px;
  align-items: center;
}
/* .section-label defaults to --gold-deep, tuned for light backgrounds -
   this section is dark, so it needs the lighter gold back (same reasoning
   as .eyebrow-light elsewhere). */
.hospitality-copy .section-label { color: var(--gold-light); }
.hospitality-copy h2 { color: var(--text-on-dark); }
.hospitality-copy .lead-p { color: var(--text-on-dark); }
.hospitality-copy p { color: var(--text-on-dark-muted); font-size: 1.02rem; }
/* width:100% with no height rule left the HTML height="1066" attribute
   as the only declared height (an absolute px value, not proportional),
   squishing the image horizontally without scaling it vertically to
   match - a real visual distortion. aspect-ratio + object-fit:cover
   keeps it proportioned at any column width. */
.hospitality-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 1600 / 1066;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: 0 40px 70px -30px rgba(0,0,0,0.5);
}
.trust-marks {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  list-style: none;
  margin: 32px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid rgba(239,233,220,0.16);
}
.trust-marks li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--text-on-dark-muted);
}
.trust-marks li em { font-style: normal; color: var(--text-on-dark-muted); opacity: 0.7; }
.trust-mark-num {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--gold-light);
}

/* Newsletter */
.newsletter-section { padding: 80px 0; }
.newsletter-card {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  background: var(--paper-alt);
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius);
  padding: 56px 48px;
}
.newsletter-copy h2 { margin: 8px 0 10px; }
.newsletter-copy p { color: var(--text-muted); margin-bottom: 28px; }
.newsletter-form {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.newsletter-form input {
  font-family: var(--sans);
  font-size: 0.9rem;
  padding: 15px 20px;
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  min-width: 280px;
  flex: 1 1 280px;
  max-width: 340px;
}
.newsletter-message { min-height: 1.4em; font-size: 0.85rem; margin: 16px 0 0; }
.newsletter-message.is-success { color: var(--gold-deep); }
.newsletter-message.is-error { color: #a44b3f; }
.newsletter-fineprint { font-size: 0.72rem; color: var(--text-muted); opacity: 0.75; margin: 18px 0 0; }
.newsletter-fineprint a { color: inherit; }

/* Honeypot form field - deliberately NOT display:none/visibility:hidden,
   which some spam bots specifically check for and skip filling. Off-canvas
   positioning still looks "filled in" to a naive form-filler while staying
   completely invisible (and, via tabindex="-1"/aria-hidden on the input
   itself, unreachable) to real visitors. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Final CTA */
.cta-final {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.cta-media { position: absolute; inset: 0; background-size: cover; background-position: center 25%; }
.cta-scrim { position: absolute; inset: 0; background: rgba(10,9,7,0.8); }
.cta-inner { position: relative; z-index: 1; text-align: center; }
.cta-inner h2 { color: var(--text-on-dark); margin-bottom: 14px; }
.cta-inner p { color: var(--text-on-dark-muted); margin-bottom: 34px; }

/* Footer */
.site-footer { background: var(--ink); padding-top: 80px; }
.footer-inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(239,233,220,0.12);
}
.footer-brand p { color: var(--text-on-dark-muted); font-size: 0.9rem; max-width: 320px; margin-top: 18px; }
.brand-footer { display: inline-block; }
.brand-footer .brand-logo { height: 28px; }
.footer-col h2 {
  font-family: var(--sans);
  font-weight: 500;
  line-height: normal;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 18px;
  font-weight: 500;
}
.footer-col a { display: block; color: var(--text-on-dark-muted); font-size: 0.9rem; margin-bottom: 12px; transition: color 0.25s; }
.footer-col a:hover { color: var(--text-on-dark); }
.footer-bottom { padding: 26px 0; }
.footer-bottom span { color: var(--text-on-dark-muted); font-size: 0.78rem; }
.footer-cookie-link {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 0.78rem;
  color: var(--text-on-dark-muted);
  text-decoration: underline;
  cursor: pointer;
  margin-left: 14px;
}
.footer-cookie-link:hover { color: var(--text-on-dark); }

/* ============ LEGAL PAGES ============ */
/* Shared by zasebnost.html and pogoji-poslovanja.html - previously an
   identical <style> block duplicated in both files. */
.legal-page { padding: 150px 0 100px; max-width: 780px; margin: 0 auto; }
.legal-page h1 { font-family: var(--serif); font-size: clamp(2rem, 3.6vw, 2.8rem); color: var(--ink); margin-bottom: 8px; }
.legal-page .legal-updated { color: var(--text-muted); font-size: 0.85rem; margin-bottom: 40px; }
.legal-page h2 { font-family: var(--serif); font-size: 1.35rem; color: var(--ink); margin: 40px 0 14px; }
.legal-page p, .legal-page li { color: var(--ink-soft); font-size: 0.98rem; line-height: 1.75; }
.legal-page ul, .legal-page ol { padding-left: 22px; margin-bottom: 16px; }
.legal-page p { margin-bottom: 16px; }
.legal-page a { color: var(--gold-deep); }
.legal-page table { width: 100%; border-collapse: collapse; margin-bottom: 24px; font-size: 0.92rem; }
.legal-page th, .legal-page td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--gold-dim); color: var(--ink-soft); }
.legal-page th { color: var(--ink); font-family: var(--sans); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; }

/* ============ REVEAL ANIMATION ============ */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s cubic-bezier(.2,.8,.2,1), transform 0.8s cubic-bezier(.2,.8,.2,1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ============ RESPONSIVE ============ */
@media (max-width: 980px) {
  .main-nav { display: none; }
  .nav-toggle { display: flex; }
  .header-actions .btn-primary.btn-sm { display: none; }

  .site-header.nav-open {
    background: var(--ink);
    padding-bottom: 20px;
  }
  .site-header.nav-open .main-nav {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    margin-top: 24px;
    order: 3;
  }
  .header-inner { flex-wrap: wrap; }

  .story-grid, .sustain-grid, .hospitality-grid { grid-template-columns: 1fr; gap: 50px; }
  .story-media { order: -1; }
  .philosophy-grid { grid-template-columns: repeat(2, 1fr); gap: 36px; }
  .families-grid { grid-template-columns: repeat(2, 1fr); }
  .collection-grid { grid-template-columns: 1fr; }
  .collection-card-wide { grid-template-columns: 1fr; }
  .collection-card-wide .collection-media { aspect-ratio: 3 / 2; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .sustain-points { grid-template-columns: 1fr; gap: 18px; }
  .footer-inner { grid-template-columns: 1fr; gap: 36px; }
}

@media (max-width: 640px) {
  .section { padding: 88px 0; }
  .container { padding: 0 22px; }
  .families-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .sustain-media { grid-template-columns: 1fr; }
  .sustain-img-2 { transform: none; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { justify-content: center; }
  .quiz-card { padding: 40px 24px; }
  .quiz-options { flex-direction: column; }
}

/* Cookie consent banner */
.cookie-banner {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 999;
  max-width: 640px;
  margin: 0 auto;
  background: var(--ink);
  color: var(--text-on-dark);
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius);
  padding: 22px 26px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5);
}
.cookie-banner p {
  flex: 1 1 280px;
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-on-dark-muted);
  line-height: 1.6;
}
.cookie-banner p a { color: var(--gold-light); text-decoration: underline; }
.cookie-banner-actions { display: flex; gap: 10px; flex-shrink: 0; }
@media (max-width: 560px) {
  .cookie-banner { flex-direction: column; align-items: stretch; text-align: center; }
  .cookie-banner-actions { justify-content: center; }
}

/* ============ ACCESSIBILITY ============ */
.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 1000;
  padding: 12px 20px;
  background: var(--ink);
  color: var(--text-on-dark);
  font-family: var(--sans);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  border: 1px solid var(--gold);
}
.skip-link:focus { top: 16px; }

/* Looping background video needs a way to stop it (WCAG 2.2.2). */
.break-video-toggle {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(239, 233, 220, 0.45);
  background: rgba(22, 20, 15, 0.45);
  color: var(--text-on-dark);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.break-video-toggle[hidden] { display: none; }
.break-video-toggle:hover { border-color: var(--gold-light); background: rgba(22, 20, 15, 0.7); }
.break-video-toggle svg { width: 14px; height: 14px; fill: currentColor; }
.break-video-toggle .icon-play { display: none; }
.break-video-toggle.is-paused .icon-play { display: block; }
.break-video-toggle.is-paused .icon-pause { display: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}