/* --- 01-tokens.css --- */
/* ==========================================================================
   Poznavanje Prirode — design tokens
   Concept: "Wild mountains, bottled." Warm paper, deep forest, jewel berries.
   ========================================================================== */

/* Self-hosted, OFL, variable axes preserved. The weight ranges below are the
   fonts' REAL fvar ranges — claiming 100–900 for Instrument Sans would make the
   browser synthesise weights that do not exist. */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-var.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Brand greens & papers (carried over from the existing brand) ------- */
  --forest-900: #04241B;
  --forest-700: #063527;
  --forest-600: #0B4A36;
  --cream-50:   #FEF7E5;
  --cream-100:  #FAEFD8;
  --butter-200: #FFEEB2;
  --leaf-500:   #8BC53F;

  /* Derived neutrals, always mixed from the brand green so nothing goes grey.
     The alphas are not taste — they are the floor that clears WCAG AA (4.5:1)
     against ALL THREE light backgrounds this text can land on: cream-50,
     cream-100 and white. --ink-faint at 0.68 measures 4.88 / 4.57 / 5.22.
     It was 0.42 (2.4:1) and failed everywhere. Do not lighten these. */
  --ink:        var(--forest-700);
  --ink-muted:  rgb(6 53 39 / 0.78);
  --ink-faint:  rgb(6 53 39 / 0.68);
  --rule:       rgb(6 53 39 / 0.14);
  --rule-soft:  rgb(6 53 39 / 0.08);
  --paper:      var(--cream-50);
  --surface:    #FFFFFF;
  --danger:     #B00020;

  /* On dark sections these are re-declared (see .section--dark).
     Cream at 0.62 over forest-700 is 5.5:1; at 0.5 it was 4.3 and failed. */
  --ring:       var(--forest-700);
  --on-dark:    var(--cream-50);
  --on-dark-muted: rgb(254 247 229 / 0.78);
  --on-dark-faint: rgb(254 247 229 / 0.62);
  --on-dark-rule:  rgb(254 247 229 / 0.18);

  /* --- Per-berry accent system ------------------------------------------- */
  --berry-malina-strong:  #B2334F;
  --berry-malina-tint:    #F8E3E8;
  --berry-kupina-strong:  #4E2A5E;
  --berry-kupina-tint:    #EEE4F1;
  --berry-sumsko-strong:  #79374E;
  --berry-sumsko-tint:    #F3E4EA;
  --berry-borovnica-strong: #35447F;
  --berry-borovnica-tint:   #E4E8F4;
  --berry-divlje-strong:  #7C3E67;
  --berry-divlje-tint:    #F2E4EE;

  /* Fallback so a card without an explicit berry still looks intentional */
  --berry-strong: var(--forest-700);
  --berry-tint:   var(--cream-100);

  /* --- Type -------------------------------------------------------------- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;

  /* Fraunces axes: opsz 9–144, wght 100–900, SOFT 0–100, WONK 0–1.
     High optical size + moderate SOFT + WONK off, per the brand direction. */
  --fv-display: "opsz" 128, "SOFT" 45, "WONK" 0;
  --fv-heading: "opsz" 96,  "SOFT" 45, "WONK" 0;
  --fv-title:   "opsz" 48,  "SOFT" 40, "WONK" 0;
  --fv-numeral: "opsz" 144, "SOFT" 30, "WONK" 0;

  --fs-display: clamp(2.75rem, 1.55rem + 5.3vw, 5.5rem);
  --fs-h2:      clamp(2rem, 1.35rem + 2.7vw, 3.4rem);
  --fs-h3:      clamp(1.3rem, 1.16rem + 0.6vw, 1.6rem);
  --fs-lead:    clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem);
  --fs-body:    clamp(1rem, 0.965rem + 0.16vw, 1.1rem);
  --fs-small:   0.9375rem;
  --fs-tiny:    0.8125rem;
  --fs-eyebrow: 0.8125rem;
  --fs-numeral: clamp(2.5rem, 1.6rem + 3.6vw, 4rem);

  --lh-tight: 1.06;
  --lh-snug:  1.22;
  --lh-body:  1.65;
  --measure:  65ch;

  /* --- Space & shape ------------------------------------------------------ */
  --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 3rem);
  --container: 1240px;
  --container-wide: 1440px;
  --section-y: clamp(4.5rem, 2.5rem + 8vw, 8.75rem);

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;
  /* The arch: fully rounded shoulders, squared base — jars and bottles. */
  --r-arch: 999px 999px var(--r-lg) var(--r-lg);

  /* Green-tinted shadows only. Never grey. */
  --shadow-1: 0 2px 6px -2px rgb(6 53 39 / 0.10), 0 6px 14px -8px rgb(6 53 39 / 0.14);
  --shadow-2: 0 8px 18px -10px rgb(6 53 39 / 0.16), 0 24px 48px -24px rgb(6 53 39 / 0.24);
  --shadow-3: 0 12px 26px -12px rgb(6 53 39 / 0.20), 0 40px 80px -32px rgb(6 53 39 / 0.32);
  --shadow-berry: 0 18px 40px -22px color-mix(in srgb, var(--berry-strong) 55%, transparent);

  /* --- Motion ------------------------------------------------------------ */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.32, 0.72, 0.28, 1);
  --t-fast: 180ms;
  --t-mid: 250ms;
  --t-slow: 650ms;
  --marquee-duration: 36s;

  /* Paper grain: a 3% turbulence wash so flat cream never reads as plastic. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");
}

/* --- 02-base.css --- */
/* ==========================================================================
   Base — reset, typography, shared primitives
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchor targets clear the sticky header. */
  scroll-padding-top: 6.5rem;
}

body {
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* Paper grain over the whole page. Cheap, fixed, never intercepts a click. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background-image: var(--grain);
  opacity: 0.028;
}

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

/* <picture> generates no box of its own, so the <img> is laid out as a direct
   child of whatever contains the picture. Without this, a percentage height on
   the image resolves against the picture (auto) instead of the sized parent. */
picture { display: contents; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }

ul, ol { list-style: none; padding: 0; }

::selection { background: var(--forest-700); color: var(--cream-50); }

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
:focus:not(:focus-visible) { outline: none; }

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

/* Fraunces' WONK axis DEFAULTS TO 1 and no browser resets it, so any Fraunces
   element that fails to state its axes silently ships the quirky letterforms.
   Every rule that reaches for --font-display therefore also sets --fv-*; this
   is the floor that catches anything that slips through. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: var(--fv-title);
  line-height: var(--lh-snug);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  font-variation-settings: var(--fv-display);
  letter-spacing: -0.025em;
}

h2 {
  font-size: var(--fs-h2);
  font-variation-settings: var(--fv-heading);
  letter-spacing: -0.02em;
}

h3 {
  font-size: var(--fs-h3);
  font-variation-settings: var(--fv-title);
}

p { text-wrap: pretty; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 54ch;
}

.prose p { max-width: var(--measure); color: var(--ink-muted); }
.prose p + p { margin-top: 1.1em; }

/* --- Eyebrow: the signature section label --------------------------------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 1.5rem;
}

/* Raspberry on paper, leaf on forest — the number is the only spot of colour in
   the label, so it must not fall back to the section's own background. */
.eyebrow__num {
  font-family: var(--font-display);
  font-variation-settings: var(--fv-numeral);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: var(--berry-malina-strong);
}
.section--dark .eyebrow__num,
.gallery .eyebrow__num { color: var(--leaf-500); }

.eyebrow__rule {
  flex: 0 0 auto;
  width: clamp(1.5rem, 4vw, 3rem);
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

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

.btn {
  --btn-bg: var(--forest-700);
  --btn-fg: var(--cream-50);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0.75rem 1.6rem;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--t-mid) var(--ease-out),
              transform var(--t-fast) var(--ease-out),
              box-shadow var(--t-mid) var(--ease-out);
}

.btn:hover { background: var(--forest-600); box-shadow: var(--shadow-2); }
.btn:active { transform: scale(0.98); }
.btn .icon { transition: transform var(--t-mid) var(--ease-out); }
.btn:hover .icon { transform: translateX(4px); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--forest-700);
  border: 1.5px solid var(--rule);
}
.btn--ghost:hover {
  --btn-bg: transparent;
  border-color: var(--forest-700);
  box-shadow: none;
}

.btn--light {
  --btn-bg: var(--cream-50);
  --btn-fg: var(--forest-700);
}
.btn--light:hover { background: #fff; }

/* --- Chips ---------------------------------------------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.85rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--rule);
  background: color-mix(in srgb, var(--butter-200) 38%, transparent);
  font-size: var(--fs-tiny);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
  white-space: nowrap;
}
.chip .icon { width: 1rem; height: 1rem; color: var(--ink-muted); }

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

/* --- Icons ---------------------------------------------------------------- */

.icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  color: currentColor;
}
.icon--lg { width: 1.75rem; height: 1.75rem; }

/* --- Utilities ------------------------------------------------------------ */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0.5rem;
  left: 50%;
  translate: -50% -160%;
  z-index: 200;
  padding: 0.75rem 1.5rem;
  border-radius: var(--r-pill);
  background: var(--forest-700);
  color: var(--cream-50);
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-2);
  transition: translate var(--t-mid) var(--ease-out);
}
.skip-link:focus { translate: -50% 0; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: var(--container-wide); }

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

.section {
  position: relative;
  padding-block: var(--section-y);
}

.section--tint { background: var(--cream-100); }

.section--dark {
  background: var(--forest-700);
  color: var(--on-dark);
  --ink: var(--cream-50);
  --ink-muted: var(--on-dark-muted);
  --ink-faint: var(--on-dark-faint);
  --rule: var(--on-dark-rule);
  --rule-soft: rgb(254 247 229 / 0.1);
  --ring: var(--cream-50);
}
.section--dark ::selection { background: var(--cream-50); color: var(--forest-700); }

/* Hairline between two same-coloured sections keeps the rhythm legible. */
.section--rule { border-top: 1px solid var(--rule-soft); }

.section__head { max-width: 46rem; }
.section__head .lead { margin-top: 1.25rem; }

/* A sticky column of section furniture, used by juices/jams/faq/contact. */
.sticky-head {
  position: sticky;
  top: 7.5rem;
  align-self: start;
}
@media (max-width: 1023px) {
  .sticky-head { position: static; }
}

/* --- Decorative botanicals ------------------------------------------------ */

.deco {
  position: absolute;
  pointer-events: none;
  color: var(--leaf-500);
  opacity: 0.5;
  z-index: 0;
}
.deco svg { width: 100%; height: 100%; }

/* --- 03-chrome.css --- */
/* ==========================================================================
   Chrome — marquee strips, header, footer
   ========================================================================== */

/* --- Marquee -------------------------------------------------------------- */
/* A real infinite marquee: one track, two identical groups, translate -50%.
   The old site faked this by measuring text width in JS and repeating spans. */

.marquee {
  overflow: hidden;
  background: var(--forest-700);
  color: var(--cream-50);
  border-block: 1px solid rgb(254 247 229 / 0.12);
  user-select: none;
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee var(--marquee-duration) linear infinite;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }

.marquee__group {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding-block: 0.7rem;
}

.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 1.75rem;
  padding-inline: 0.875rem;
  font-family: var(--font-display);
  font-variation-settings: var(--fv-title);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.marquee__sparkle {
  width: 0.75rem;
  height: 0.75rem;
  color: var(--leaf-500);
}

@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.marquee--bottom { border-bottom: 0; }

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  transition: transform var(--t-mid) var(--ease-out),
              background-color var(--t-mid) linear,
              box-shadow var(--t-mid) linear,
              border-color var(--t-mid) linear;
  border-bottom: 1px solid transparent;
}

/* Scrolled: cream glass. */
.site-header.is-stuck {
  background: rgb(254 247 229 / 0.82);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom-color: var(--rule);
}

/* Scrolling down: get out of the way. */
.site-header.is-hidden { transform: translateY(-100%); }
.site-header.is-menu-open { transform: none; }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 4.5rem;
}

.site-header__logo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-sm);
}
.site-header__logo img {
  width: auto;
  height: clamp(2.1rem, 1.6rem + 1.2vw, 2.75rem);
  transition: transform var(--t-mid) var(--ease-out);
}
.site-header__logo:hover img { transform: scale(1.03); }

.site-nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(1rem, 2.2vw, 2rem);
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2rem);
}

.site-nav__link {
  position: relative;
  display: inline-block;
  padding-block: 0.5rem;
  font-size: var(--fs-small);
  font-weight: 500;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}
/* Underline grows from the left — quiet, not a bouncing pill. */
.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.25rem;
  width: 100%;
  height: 1.5px;
  background: var(--forest-700);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-mid) var(--ease-out);
}
.site-nav__link:hover::after,
.site-nav__link:focus-visible::after { transform: scaleX(1); }

.site-header__tools {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-tiny);
  font-weight: 600;
  letter-spacing: 0.06em;
}
.lang-switch a {
  padding: 0.35rem 0.45rem;
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--ink-faint);
  transition: color var(--t-fast) linear;
}
.lang-switch a:hover { color: var(--ink); }
.lang-switch a[aria-current="true"] { color: var(--ink); }
.lang-switch__sep { color: var(--ink-faint); opacity: 0.5; }

.nav-toggle {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  border: 1px solid var(--rule);
  color: var(--ink);
}
.nav-toggle__bars {
  position: relative;
  width: 1.125rem;
  height: 0.75rem;
}
.nav-toggle__bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.75px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--t-mid) var(--ease-out),
              opacity var(--t-fast) linear;
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 50%; translate: 0 -50%; }
.nav-toggle__bars span:nth-child(3) { bottom: 0; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) {
  transform: translateY(0.375rem) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) {
  transform: translateY(-0.375rem) rotate(-45deg);
}

/* Mobile nav */
@media (max-width: 899px) {
  .nav-toggle { display: inline-flex; }

  /* The drawer is fixed, so it paints above the static header content. Lifting
     the logo and the toggle above it keeps the brand visible and — the part that
     actually matters — keeps the close button reachable while the menu is open. */
  .site-header__logo,
  .nav-toggle { position: relative; z-index: 2; }

  .site-nav {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 1;
    width: min(22rem, 88vw);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 6rem var(--gutter) 2.5rem;
    background: var(--cream-50);
    box-shadow: var(--shadow-3);
    border-left: 1px solid var(--rule);
    translate: 100% 0;
    visibility: hidden;
    transition: translate var(--t-mid) var(--ease-out), visibility 0s linear var(--t-mid);
    overflow-y: auto;
  }
  .site-nav[data-open="true"] {
    translate: 0 0;
    visibility: visible;
    transition: translate var(--t-mid) var(--ease-out), visibility 0s;
  }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .site-nav__list li { border-bottom: 1px solid var(--rule-soft); }
  .site-nav__link {
    display: block;
    padding-block: 1rem;
    font-size: 1.125rem;
    font-family: var(--font-display);
    font-variation-settings: var(--fv-title);
  }
  .site-nav__link::after { display: none; }

  .site-header__tools {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 1.5rem;
    margin-top: 2rem;
  }
  .site-header__tools .btn { width: 100%; }
  .lang-switch { justify-content: center; }

  .nav-scrim {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: rgb(4 36 27 / 0.5);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-mid) linear, visibility 0s linear var(--t-mid);
  }
  .nav-scrim[data-open="true"] {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--t-mid) linear, visibility 0s;
  }
}

/* On a phone a 316px panel would clip the logo; take the whole width instead. */
@media (max-width: 479px) {
  .site-nav {
    width: 100%;
    border-left: 0;
  }
}

@media (min-width: 900px) {
  .nav-scrim { display: none; }
}

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

.site-footer {
  position: relative;
  background: var(--forest-900);
  color: var(--on-dark);
  --ink: var(--cream-50);
  --ink-muted: var(--on-dark-muted);
  --rule: var(--on-dark-rule);
  --ring: var(--cream-50);
  padding-block: clamp(3.5rem, 2rem + 5vw, 6rem) 2rem;
  overflow: hidden;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  gap: clamp(2rem, 4vw, 4rem);
}
@media (max-width: 899px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
  .site-footer__grid { grid-template-columns: 1fr; }
}

.site-footer__logo img {
  height: 2.5rem;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.94;
}
.site-footer__tagline {
  margin-top: 1.25rem;
  max-width: 26ch;
  font-family: var(--font-display);
  font-variation-settings: var(--fv-title);
  font-size: 1.125rem;
  line-height: 1.4;
  color: var(--on-dark);
}

.site-footer__heading {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-faint);
  margin-bottom: 1.1rem;
}

.site-footer__links { display: grid; gap: 0.7rem; }
.site-footer__links a {
  font-size: var(--fs-small);
  text-decoration: none;
  color: var(--on-dark-muted);
  transition: color var(--t-fast) linear;
}
.site-footer__links a:hover { color: var(--cream-50); }

.site-footer__contact {
  display: grid;
  gap: 0.6rem;
  font-size: var(--fs-small);
  color: var(--on-dark-muted);
  font-style: normal;
}
.site-footer__contact a { color: var(--on-dark); text-decoration-color: rgb(254 247 229 / 0.4); }
.site-footer__contact a:hover { text-decoration-color: currentColor; }

.social {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.4rem;
}
.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--rule);
  color: var(--on-dark);
  transition: background-color var(--t-mid) var(--ease-out),
              color var(--t-mid) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
.social a:hover {
  background: var(--cream-50);
  color: var(--forest-900);
  transform: translateY(-2px);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-top: clamp(3rem, 5vw, 4.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule);
  font-size: var(--fs-tiny);
  color: var(--on-dark-muted);
}
.site-footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; }

.link-quiet {
  background: none;
  border: 0;
  padding: 0.25rem 0;
  font-size: inherit;
  color: var(--on-dark-muted);
  text-decoration: underline;
  text-decoration-color: rgb(254 247 229 / 0.3);
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color var(--t-fast) linear;
}
.link-quiet:hover { color: var(--cream-50); text-decoration-color: currentColor; }

.to-top {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--rule);
  font-size: var(--fs-tiny);
  font-weight: 600;
  color: var(--on-dark);
  transition: background-color var(--t-mid) var(--ease-out), color var(--t-mid) var(--ease-out);
}
/* The arrow icon is the shared right-arrow, turned to point up. */
.to-top__icon {
  width: 1rem;
  height: 1rem;
  rotate: -90deg;
  transition: translate var(--t-mid) var(--ease-out);
}
.to-top:hover { background: var(--cream-50); color: var(--forest-900); }
.to-top:hover .to-top__icon { translate: 0 -3px; }

/* Oversized wordmark, bled off the bottom edge as a quiet watermark.
   footer-img.png already carries a CREAM wordmark, so it needs no filter here —
   it is baked for a dark background and would vanish on a light one. */
.site-footer__mark {
  position: absolute;
  right: -3%;
  bottom: -22%;
  width: min(20rem, 32vw);
  height: auto;
  opacity: 0.05;
  pointer-events: none;
}
@media (max-width: 899px) { .site-footer__mark { display: none; } }

/* --- 04-hero.css --- */
/* ==========================================================================
   Hero — asymmetric composition, arch-masked product still, trust badges
   ========================================================================== */

.hero {
  position: relative;
  padding-top: clamp(2.5rem, 1rem + 5vw, 5rem);
  padding-bottom: 0;
  overflow: clip;
}

.hero__inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(2rem, 4vw, 4.5rem);
  min-height: min(78vh, 46rem);
}

@media (max-width: 899px) {
  .hero__inner {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 2.5rem;
    padding-top: 1rem;
  }
}

.hero__content { position: relative; z-index: 2; }

.hero__title { max-width: 14ch; }

/* The one word that carries the promise gets the berry. */
.hero__title em {
  font-style: normal;
  color: var(--berry-malina-strong);
}

.hero__sub {
  margin-top: clamp(1.25rem, 2vw, 1.75rem);
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ink-muted);
  max-width: 44ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

/* --- The arch ------------------------------------------------------------- */

.hero__figure {
  position: relative;
  display: grid;
  place-items: end center;
  min-height: min(70vh, 40rem);
}
@media (max-width: 899px) {
  .hero__figure { min-height: 22rem; }
}

/* Arch: fully rounded shoulders, squared base. Echoes a jar, a bottle, a chapel
   window — and it slightly overlaps the section below, so the page reads as
   one continuous composition rather than a stack of bands. */
.hero__arch {
  position: absolute;
  inset: 0 auto 0 50%;
  translate: -50% 0;
  width: min(30rem, 92%);
  border-radius: var(--r-arch);
  background:
    radial-gradient(120% 80% at 50% 8%, var(--butter-200) 0%, transparent 62%),
    linear-gradient(180deg, var(--cream-100) 0%, color-mix(in srgb, var(--berry-malina-tint) 78%, var(--cream-50)) 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.6), var(--shadow-1);
}

/* A single hairline ring, offset — restraint, not decoration for its own sake. */
.hero__ring {
  position: absolute;
  inset: 1.75rem auto 3rem 50%;
  translate: -50% 0;
  width: min(30rem, 92%);
  border: 1px solid rgb(6 53 39 / 0.12);
  border-radius: var(--r-arch);
  pointer-events: none;
}

.hero__image {
  position: relative;
  z-index: 1;
  width: min(34rem, 108%);
  max-width: none;
  height: auto;
  /* Overhangs the arch base — depth without a 3D gimmick. */
  margin-bottom: clamp(-3rem, -2vw, -1.5rem);
  filter: drop-shadow(0 30px 40px rgb(6 53 39 / 0.22));
}

.hero__deco-1 { top: 8%;  left: -3%;  width: clamp(3rem, 6vw, 5rem); rotate: -12deg; }
.hero__deco-2 { top: 22%; right: 2%;  width: clamp(2.5rem, 5vw, 4rem); rotate: 18deg; opacity: 0.42; }
.hero__deco-3 { bottom: 16%; left: 4%; width: clamp(2rem, 4vw, 3.25rem); rotate: 6deg; opacity: 0.35; }
@media (max-width: 899px) {
  .hero__deco-1, .hero__deco-3 { display: none; }
}

/* --- Trust badges --------------------------------------------------------- */

.trust {
  position: relative;
  z-index: 2;
  margin-top: clamp(2rem, 4vw, 3.5rem);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--cream-100) 60%, transparent);
}

.trust__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.trust__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.15rem 1rem;
  font-size: var(--fs-tiny);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  color: var(--ink-muted);
}
.trust__item + .trust__item { border-left: 1px solid var(--rule); }
.trust__item .icon {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--forest-700);
}

@media (max-width: 899px) {
  .trust__list { grid-template-columns: repeat(2, 1fr); }
  .trust__item:nth-child(2n) { border-left: 1px solid var(--rule); }
  .trust__item:nth-child(n + 3) { border-top: 1px solid var(--rule); }
}
@media (max-width: 479px) {
  .trust__item {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
    padding: 1rem 0.5rem;
  }
}

/* --- 05-products.css --- */
/* ==========================================================================
   Products — juices & jams. Same card DNA, mirrored layout, per-berry identity.
   ========================================================================== */

.products__layout {
  display: grid;
  grid-template-columns: minmax(16rem, 22rem) 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

/* Jams mirror juices: intro moves to the right. Siblings, not clones. */
.products--jams .products__layout { grid-template-columns: 1fr minmax(16rem, 22rem); }
.products--jams .products__intro { order: 2; }
.products--jams .products__grid  { order: 1; }

@media (max-width: 1023px) {
  .products__layout,
  .products--jams .products__layout { grid-template-columns: 1fr; }
  .products--jams .products__intro { order: 0; }
  .products--jams .products__grid  { order: 0; }
}

.products__intro .lead { margin-top: 1.25rem; }

/* --- Packaging spec chips ------------------------------------------------- */

.pack {
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule);
}
.pack__lead {
  display: block;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.9rem;
}
.pack__note {
  margin-top: 0.9rem;
  font-size: var(--fs-small);
  color: var(--ink-muted);
}

/* --- Card grid ------------------------------------------------------------ */

.products__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.25rem, 2.2vw, 2rem);
}

/* Offset the second column: a quiet asymmetry, not a rigid 5-up row. */
@media (min-width: 1024px) {
  .products__grid > :nth-child(even) { transform: translateY(3rem); }
  .products--juices .products__grid { padding-bottom: 3rem; }
}

@media (max-width: 639px) {
  .products__grid { grid-template-columns: 1fr; }
}

/* --- Per-berry theming ---------------------------------------------------- */
/* These live in classes, not in style="" attributes, because the shipped CSP is
   `style-src 'self'` — an inline style attribute would be silently dropped and
   every card would fall back to forest green. */

.berry-malina    { --berry-strong: var(--berry-malina-strong);    --berry-tint: var(--berry-malina-tint); }
.berry-kupina    { --berry-strong: var(--berry-kupina-strong);    --berry-tint: var(--berry-kupina-tint); }
.berry-sumsko    { --berry-strong: var(--berry-sumsko-strong);    --berry-tint: var(--berry-sumsko-tint); }
.berry-borovnica { --berry-strong: var(--berry-borovnica-strong); --berry-tint: var(--berry-borovnica-tint); }
.berry-divlje    { --berry-strong: var(--berry-divlje-strong);    --berry-tint: var(--berry-divlje-tint); }

/* --- The card ------------------------------------------------------------- */

/* The generous top padding is load-bearing: the bottle deliberately overhangs
   the top of its stage, and the card clips its own overflow, so the cap would
   be sheared off without this headroom (more still on hover, where the image
   scales 1.05 and rotates). */
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 3.5rem 1.5rem 1.75rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--rule);
  background: var(--surface);
  text-align: left;
  isolation: isolate;
  overflow: hidden;
  transition: transform var(--t-mid) var(--ease-out),
              box-shadow var(--t-mid) var(--ease-out),
              border-color var(--t-mid) var(--ease-out);
}

/* The berry bloom — a radial wash in the fruit's own hue, revealed on hover. */
.product-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(90% 60% at 50% 0%,
              color-mix(in srgb, var(--berry-strong) 16%, transparent) 0%,
              transparent 70%);
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease-out);
}

.product-card:hover,
.product-card:has(.product-card__btn:focus-visible) {
  transform: translateY(-6px);
  box-shadow: var(--shadow-berry);
  border-color: color-mix(in srgb, var(--berry-strong) 35%, transparent);
}
.product-card:hover::before,
.product-card:has(.product-card__btn:focus-visible)::before { opacity: 1; }

/* Stage: the tinted arch the bottle stands on.
   --bottle is the single source of truth for both the render's height and the
   stage's; the stage is deliberately shorter, so the bottle stands proud of it.
   Capped at 14rem (224px) because the client's renders are only 244px (bottles)
   and 227px (jars) tall — there is no larger source anywhere, so going past that
   just buys blur. */
.product-card__stage {
  --bottle: clamp(11rem, 15vw, 14rem);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: calc(var(--bottle) * 0.86);
  margin-bottom: 1.5rem;
  border-radius: var(--r-arch);
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--berry-tint) 45%, var(--cream-50)) 0%,
              var(--berry-tint) 62%,
              color-mix(in srgb, var(--berry-strong) 12%, var(--berry-tint)) 100%);
}

/* Bottle breaks the TOP of the stage — up into the card's deep top padding, never
   down over the name.
   The height is an explicit length on purpose. A percentage here resolves against
   the flex/grid track, which is auto-sized from this very element — circular, so
   the browser silently falls back to the image's intrinsic height. That is exactly
   what happened: the render stayed 241px tall at every breakpoint, and once the
   stage shrank on mobile it overflowed 64px downwards and sat on top of the
   product name. Do not reintroduce a percentage here. */
.product-card__image {
  flex: 0 0 auto;
  width: auto;
  height: var(--bottle);
  max-width: none;
  max-height: none;
  margin-bottom: -0.5rem;
  object-fit: contain;
  filter: drop-shadow(0 14px 18px rgb(6 53 39 / 0.18));
  transition: transform var(--t-mid) var(--ease-out),
              filter var(--t-mid) var(--ease-out);
  transform-origin: bottom center;
}
.product-card:hover .product-card__image,
.product-card:has(.product-card__btn:focus-visible) .product-card__image {
  transform: scale(1.05) rotate(-2deg);
  filter: drop-shadow(0 22px 26px rgb(6 53 39 / 0.24));
}

.product-card__name {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}
.product-card__name h3 { color: var(--ink); }

/* The berry's signature: a short rule in its own colour. */
.product-card__name::after {
  content: "";
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: var(--berry-strong);
  opacity: 0.25;
  transition: opacity var(--t-mid) var(--ease-out);
}
.product-card:hover .product-card__name::after { opacity: 1; }

.product-card__desc {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--ink-muted);
  flex: 1;
}

/* One tab stop, a short accessible name, and a hit area that covers the whole
   card (via the stretched ::after) — without nesting a heading inside a button. */
.product-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-start;
  margin-top: 1.25rem;
  padding: 0.35rem 0;
  font-size: var(--fs-tiny);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--berry-strong);
}
.product-card__btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
.product-card__btn .icon {
  width: 1rem;
  height: 1rem;
  transition: transform var(--t-mid) var(--ease-out);
}
.product-card__btn:focus-visible { outline-offset: 4px; }
.product-card:hover .product-card__btn .icon,
.product-card__btn:focus-visible .icon { transform: translateX(4px); }

/* --- Quick view ----------------------------------------------------------- */

.quickview {
  width: min(56rem, calc(100vw - 2rem));
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: var(--r-xl);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-3);
  overflow: hidden;
}

.quickview__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: stretch;
}

.quickview__figure {
  position: relative;
  display: grid;
  place-items: center;
  padding: 2.5rem 1.5rem;
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--berry-tint) 45%, var(--cream-50)) 0%,
              var(--berry-tint) 100%);
}
/* Explicit length, capped at 14rem — same reasoning as the card stage: a jar
   render is only 227px tall, and a percentage would not resolve here either. */
.quickview__figure img {
  width: auto;
  height: clamp(11rem, 26vh, 14rem);
  max-height: none;
  object-fit: contain;
  filter: drop-shadow(0 24px 30px rgb(6 53 39 / 0.22));
}

.quickview__body {
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 3vw, 2.75rem);
}

.quickview__kicker {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--berry-strong);
  margin-bottom: 0.75rem;
}

.quickview__title { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); }

.quickview__desc {
  margin-top: 1rem;
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink-muted);
}

.quickview__pack {
  margin-top: auto;
  padding-top: 1.75rem;
}
.quickview__pack .pack__lead { margin-top: 1.5rem; }
.quickview__pack .pack__lead:first-child { margin-top: 0; }

.dialog-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--rule);
  background: rgb(254 247 229 / 0.9);
  backdrop-filter: blur(6px);
  color: var(--ink);
  transition: background-color var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
.dialog-close:hover { background: var(--forest-700); color: var(--cream-50); transform: rotate(90deg); }

@media (max-width: 767px) {
  /* Bottom sheet on phones. */
  .quickview {
    width: 100%;
    max-width: 100vw;
    max-height: 92dvh;
    margin: auto 0 0;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    overflow-y: auto;
  }
  .quickview__grid { grid-template-columns: 1fr; }
  .quickview__figure { padding: 2rem 1rem 1.25rem; }
  .quickview__figure img { height: clamp(9rem, 22vh, 12rem); }
  .quickview__body { padding: 1.5rem var(--gutter) 2rem; }
}

/* --- 06-sections.css --- */
/* ==========================================================================
   Statement band (Why), Origin timeline, About
   ========================================================================== */

/* --- Why: the dark statement band ---------------------------------------- */

.why {
  background: linear-gradient(165deg, var(--forest-700) 0%, var(--forest-900) 100%);
  overflow: clip;
}

/* One soft leaf-lit glow, high and off-centre. Gives the flat green depth. */
.why::before {
  content: "";
  position: absolute;
  top: -20%;
  right: -10%;
  width: 45rem;
  height: 45rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(139 197 63 / 0.16) 0%, transparent 62%);
  pointer-events: none;
}

.why__head { max-width: 40rem; }
.why__intro {
  margin-top: 1.5rem;
  font-family: var(--font-display);
  font-variation-settings: var(--fv-title);
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.75rem);
  line-height: 1.45;
  color: var(--on-dark);
  max-width: 34ch;
}

.why__body {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  margin-top: clamp(3rem, 5vw, 4.5rem);
  position: relative;
}
@media (max-width: 899px) {
  .why__body { grid-template-columns: 1fr; }
}

.why__prose p { color: var(--on-dark-muted); max-width: 42ch; }
.why__prose p + p { margin-top: 1.2em; }

.why__list-heading {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--leaf-500);
  margin-bottom: 1.75rem;
}

.why__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem 2rem;
}
@media (max-width: 599px) {
  .why__list { grid-template-columns: 1fr; }
}

.why__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--on-dark-muted);
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--on-dark-rule);
}
.why__list .icon {
  width: 1.4rem;
  height: 1.4rem;
  margin-top: 0.05rem;
  color: var(--leaf-500);
}

/* --- Fact strip ----------------------------------------------------------- */
/* Every number here is asserted by the client's own copy. Nothing invented. */

.facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(3.5rem, 6vw, 5.5rem);
  border-top: 1px solid var(--on-dark-rule);
}
@media (max-width: 767px) {
  .facts { grid-template-columns: repeat(2, 1fr); }
  .facts__item:nth-child(n + 3) { border-top: 1px solid var(--on-dark-rule); }
}

.facts__item {
  padding: clamp(1.75rem, 3vw, 2.5rem) 1.25rem;
  text-align: center;
}
.facts__item + .facts__item { border-left: 1px solid var(--on-dark-rule); }
@media (max-width: 767px) {
  .facts__item:nth-child(odd) { border-left: 0; }
}

.facts__value {
  display: block;
  font-family: var(--font-display);
  font-variation-settings: var(--fv-numeral);
  font-weight: 600;
  font-size: var(--fs-numeral);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--cream-50);
}
.facts__label {
  display: block;
  margin-top: 0.75rem;
  font-size: var(--fs-tiny);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-dark-faint);
}

/* --- Origin: from mountain to jar ---------------------------------------- */

.origin__layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
  margin-top: clamp(2.5rem, 4vw, 4rem);
}
@media (max-width: 899px) {
  .origin__layout { grid-template-columns: 1fr; }
}

.origin__media {
  position: sticky;
  top: 7.5rem;
  display: grid;
  gap: 1.25rem;
}
@media (max-width: 899px) {
  .origin__media { position: static; grid-template-columns: 1fr 1fr; }
}

.origin__photo {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-arch);
  background: var(--cream-100);
  box-shadow: var(--shadow-2);
}
.origin__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.origin__photo--tall { aspect-ratio: 3 / 4; }
.origin__photo--wide {
  aspect-ratio: 4 / 3;
  width: 72%;
  margin-left: auto;
  border-radius: var(--r-lg);
}
@media (max-width: 899px) {
  .origin__photo--wide { width: 100%; aspect-ratio: 3 / 4; }
}

/* Steps: a hairline spine with numerals hung off it. */
.origin__steps { display: grid; }

.origin__step {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  padding: clamp(1.5rem, 2.5vw, 2rem) 0;
  border-top: 1px solid var(--rule);
}
.origin__step:last-child { border-bottom: 1px solid var(--rule); }

.origin__marker {
  display: grid;
  place-items: center;
  gap: 0.5rem;
}
/* These numerals are real text (01–04), so they carry a contrast floor: at 32–48px
   they are "large text" and need 3:1. They were at opacity .18 — 1.41:1, which is
   barely legible. 0.6 measures 3.86:1 and still reads as quiet. */
.origin__num {
  font-family: var(--font-display);
  font-variation-settings: var(--fv-numeral);
  font-weight: 600;
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
  line-height: 1;
  color: var(--forest-700);
  opacity: 0.6;
  transition: opacity var(--t-mid) var(--ease-out), color var(--t-mid) var(--ease-out);
}
.origin__step:hover .origin__num { opacity: 1; color: var(--berry-malina-strong); }

.origin__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--forest-700);
  transition: background-color var(--t-mid) var(--ease-out),
              color var(--t-mid) var(--ease-out),
              border-color var(--t-mid) var(--ease-out);
}
.origin__step:hover .origin__icon {
  background: var(--forest-700);
  color: var(--cream-50);
  border-color: var(--forest-700);
}
.origin__icon .icon { width: 1.5rem; height: 1.5rem; }

.origin__step h3 { margin-bottom: 0.6rem; }
.origin__step p {
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--ink-muted);
  max-width: 52ch;
}

@media (max-width: 479px) {
  .origin__step { grid-template-columns: 1fr; gap: 1rem; }
  .origin__marker { grid-auto-flow: column; justify-content: start; align-items: center; }
}

/* --- About ---------------------------------------------------------------- */

.about__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
@media (max-width: 899px) {
  .about__layout { grid-template-columns: 1fr; }
}

.about__figure {
  position: relative;
  border-radius: var(--r-arch);
  background:
    radial-gradient(110% 70% at 50% 10%, var(--butter-200) 0%, transparent 60%),
    linear-gradient(180deg, var(--cream-50) 0%, var(--berry-sumsko-tint) 100%);
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 3rem);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-1);
}
.about__figure img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 26px 34px rgb(6 53 39 / 0.20));
}

.about__deco {
  bottom: -2.25rem;
  right: -2.5rem;
  width: clamp(3rem, 6vw, 4.5rem);
  rotate: -18deg;
  opacity: 0.38;
  z-index: 2;
}
@media (max-width: 899px) { .about__deco { display: none; } }

.about__content .prose { margin-top: 1.75rem; }
.about__content .chip-row { margin-top: 2rem; }

/* --- 07-gallery-locations.css --- */
/* ==========================================================================
   Gallery (dark editorial mosaic + lightbox) and Retail locations (SVG map)
   ========================================================================== */

/* --- Gallery -------------------------------------------------------------- */

.gallery {
  background: var(--forest-900);
  overflow: clip;
}

.gallery__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.gallery__mosaic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "a a b"
    "c d b"
    "e f f";
  gap: clamp(0.75rem, 1.4vw, 1.25rem);
}

@media (max-width: 767px) {
  .gallery__mosaic {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "a a"
      "b c"
      "d e"
      "f f";
  }
}

.gallery__tile {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--forest-700) 70%, #000);
  isolation: isolate;
}
/* Areas are assigned out of DOM order on purpose: slika4 and slika6 are
   near-duplicate compositions (same tray, plate and cappuccino), so they are
   placed in non-adjacent cells. All six sources are 16:9, so only one tile is
   given a portrait crop. */
/* Only the tiles that DEFINE a row carry an aspect-ratio. Tile 4 spans two rows
   and tile 6 shares a row with a wider neighbour, so both are left to stretch —
   an aspect-ratio on either would cap its height and tear a hole in the grid. */
.gallery__tile:nth-child(1) { grid-area: a; aspect-ratio: 16 / 9; }   /* sets row 1 */
.gallery__tile:nth-child(2) { grid-area: d; aspect-ratio: 1 / 1; }    /* sets row 2 */
.gallery__tile:nth-child(3) { grid-area: c; aspect-ratio: 1 / 1; }
.gallery__tile:nth-child(4) { grid-area: b; height: 100%; border-radius: var(--r-arch); }
.gallery__tile:nth-child(5) { grid-area: f; aspect-ratio: 21 / 9; }   /* sets row 3 */
.gallery__tile:nth-child(6) { grid-area: e; height: 100%; }

@media (max-width: 767px) {
  .gallery__mosaic { grid-template-areas: "a a" "b c" "d e" "f f"; }
  .gallery__tile:nth-child(1) { grid-area: a; aspect-ratio: 16 / 9; }
  .gallery__tile:nth-child(2) { grid-area: b; aspect-ratio: 1 / 1; height: auto; }
  .gallery__tile:nth-child(3) { grid-area: c; aspect-ratio: 1 / 1; }
  .gallery__tile:nth-child(4) { grid-area: d; aspect-ratio: 1 / 1; height: auto; border-radius: var(--r-md); }
  .gallery__tile:nth-child(5) { grid-area: f; aspect-ratio: 16 / 9; }
  .gallery__tile:nth-child(6) { grid-area: e; aspect-ratio: 1 / 1; height: auto; }
}

.gallery__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out), filter var(--t-mid) linear;
}
.gallery__tile::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgb(254 247 229 / 0);
  border-radius: inherit;
  transition: box-shadow var(--t-mid) linear;
}
.gallery__tile:hover img,
.gallery__tile:focus-visible img { transform: scale(1.05); filter: brightness(1.06); }
.gallery__tile:hover::after,
.gallery__tile:focus-visible::after { box-shadow: inset 0 0 0 2px rgb(254 247 229 / 0.85); }

/* The expand cue only appears on intent — the photo is the hero, not the chrome. */
.gallery__cue {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--r-pill);
  background: rgb(254 247 229 / 0.92);
  color: var(--forest-900);
  opacity: 0;
  translate: 0 0.5rem;
  transition: opacity var(--t-mid) var(--ease-out), translate var(--t-mid) var(--ease-out);
}
.gallery__tile:hover .gallery__cue,
.gallery__tile:focus-visible .gallery__cue { opacity: 1; translate: 0 0; }
.gallery__cue .icon { width: 1.125rem; height: 1.125rem; }

/* --- Lightbox ------------------------------------------------------------- */

.lightbox {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cream-50);
  overflow: hidden;
}
.lightbox::backdrop { background: rgb(4 36 27 / 0.94); }

.lightbox__stage {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: clamp(3.5rem, 8vh, 6rem) clamp(1rem, 6vw, 6rem);
}

.lightbox__image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--r-md);
  box-shadow: 0 40px 80px -30px rgb(0 0 0 / 0.6);
}

.lightbox__nav {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--r-pill);
  border: 1px solid rgb(254 247 229 / 0.28);
  background: rgb(4 36 27 / 0.6);
  backdrop-filter: blur(6px);
  color: var(--cream-50);
  transition: background-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.lightbox__nav:hover { background: var(--cream-50); color: var(--forest-900); }
.lightbox__prev { left: clamp(0.5rem, 2vw, 2rem); }
.lightbox__next { right: clamp(0.5rem, 2vw, 2rem); }
.lightbox__prev:hover { transform: translateY(-50%) translateX(-3px); }
.lightbox__next:hover { transform: translateY(-50%) translateX(3px); }

.lightbox .dialog-close {
  background: rgb(4 36 27 / 0.6);
  border-color: rgb(254 247 229 / 0.28);
  color: var(--cream-50);
}
.lightbox .dialog-close:hover { background: var(--cream-50); color: var(--forest-900); }

.lightbox__counter {
  position: absolute;
  left: 50%;
  bottom: clamp(1rem, 3vh, 2rem);
  translate: -50% 0;
  font-family: var(--font-display);
  font-variation-settings: var(--fv-title);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  color: rgb(254 247 229 / 0.72);
}

/* --- Retail locations ----------------------------------------------------- */

.locations__layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
}
@media (max-width: 1023px) {
  .locations__layout { grid-template-columns: 1fr; }
}

.locations__map {
  position: sticky;
  top: 7.5rem;
  padding: clamp(1rem, 2vw, 1.75rem);
  border-radius: var(--r-lg);
  border: 1px solid var(--rule);
  background: var(--cream-100);
  box-shadow: var(--shadow-1);
}
@media (max-width: 1023px) {
  .locations__map { position: static; max-width: 32rem; margin-inline: auto; }
}

.hr-map { width: 100%; height: auto; overflow: visible; }

/* Strokes are declared in screen pixels, not viewBox units: the map is drawn in
   a 1000-unit box but renders around 420px wide, so a plain stroke-width of 1.5
   would come out sub-pixel. Radii and font sizes below ARE in viewBox units and
   are sized for that ~0.42 scale factor. */
.hr-map__land,
.hr-map__islands,
.hr-map__dot,
.hr-map__halo { vector-effect: non-scaling-stroke; }

.hr-map__land {
  fill: color-mix(in srgb, var(--forest-700) 14%, var(--cream-50));
  stroke: rgb(6 53 39 / 0.38);
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.hr-map__islands {
  fill: color-mix(in srgb, var(--forest-700) 9%, var(--cream-50));
  stroke: rgb(6 53 39 / 0.24);
  stroke-width: 1;
}

.hr-map__city { cursor: pointer; }

/* Satellites (Velika Gorica, Dugo Selo, Mokošica) are drawn but not targetable —
   see the note in template.py. They still light up when their list card is
   hovered; they just never intercept a neighbouring city's pointer events. */
.hr-map__city--sat { pointer-events: none; }

/* Invisible, but the actual pointer target: the drawn dot is only ~16px across,
   under the 24x24 minimum for an interactive control. */
.hr-map__hit { fill: transparent; }

.hr-map__dot {
  fill: var(--forest-700);
  stroke: var(--cream-100);
  stroke-width: 2;
  transition: fill var(--t-mid) var(--ease-out), stroke var(--t-mid) var(--ease-out);
}
/* Rijeka carries only the online market — drawn hollow to say so. */
.hr-map__dot--online {
  fill: var(--cream-50);
  stroke: var(--forest-700);
  stroke-width: 2.5;
}

.hr-map__city:hover .hr-map__dot,
.hr-map__city.is-active .hr-map__dot {
  fill: var(--berry-malina-strong);
  stroke: var(--cream-50);
}
.hr-map__city:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Halo pulses only while a city is active. */
.hr-map__halo {
  fill: none;
  stroke: var(--berry-malina-strong);
  stroke-width: 1.5;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  pointer-events: none;
}
.hr-map__city.is-active .hr-map__halo {
  opacity: 1;
  animation: halo 1.8s var(--ease-out) infinite;
}
@keyframes halo {
  0%   { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(2.2); opacity: 0; }
}

.hr-map__label {
  font-family: var(--font-sans);
  font-size: 32px;          /* viewBox units ≈ 13px rendered */
  font-weight: 600;
  fill: var(--ink-muted);
  paint-order: stroke;
  stroke: var(--cream-100);
  stroke-width: 7px;        /* viewBox units — a halo so labels survive the coast */
  stroke-linejoin: round;
  pointer-events: none;
  transition: fill var(--t-mid) linear;
}
.hr-map__label.is-active { fill: var(--berry-malina-strong); }

.locations__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-size: var(--fs-tiny);
  color: var(--ink-muted);
}
.locations__legend span { display: inline-flex; align-items: center; gap: 0.5rem; }
.locations__legend i {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--forest-700);
}
.locations__legend i.is-online {
  background: var(--cream-50);
  box-shadow: inset 0 0 0 2px var(--forest-700);
}

/* --- Location groups ------------------------------------------------------ */

.locations__groups { display: grid; gap: 1rem; }

.location-group {
  padding: clamp(1.25rem, 2vw, 1.75rem);
  border-radius: var(--r-lg);
  border: 1px solid var(--rule);
  background: var(--surface);
  transition: border-color var(--t-mid) var(--ease-out),
              box-shadow var(--t-mid) var(--ease-out),
              transform var(--t-mid) var(--ease-out);
}
.location-group.is-active {
  border-color: color-mix(in srgb, var(--berry-malina-strong) 45%, transparent);
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}

.location-group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--rule-soft);
}
/* Two-word city names ("Velika Gorica") would otherwise wrap under a count that
   is still sitting beside them. Give the name the whole row instead. */
@media (max-width: 479px) {
  .location-group__head { flex-direction: column; align-items: flex-start; }
}
.location-group__city {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-h3);
}
.location-group__city .icon {
  width: 1.2rem;
  height: 1.2rem;
  color: var(--berry-malina-strong);
  opacity: 0.55;
  transition: opacity var(--t-mid) linear;
}
.location-group.is-active .location-group__city .icon { opacity: 1; }

.location-group__count {
  flex: 0 0 auto;
  font-size: var(--fs-tiny);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.location-group__stores {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 0.85rem 1.5rem;
}
.location-group__store {
  font-size: var(--fs-small);
  line-height: 1.45;
}
.location-group__store strong { display: block; font-weight: 600; color: var(--ink); }
.location-group__store span { color: var(--ink-muted); }

/* Online: the odd one out, and it should look it. */
.location-group--online {
  background: linear-gradient(135deg,
              color-mix(in srgb, var(--butter-200) 55%, var(--cream-50)) 0%,
              var(--cream-100) 100%);
  border-color: color-mix(in srgb, var(--forest-700) 22%, transparent);
}
.location-group--online .location-group__city .icon { color: var(--forest-700); opacity: 1; }
.location-group__tag {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.65rem;
  border-radius: var(--r-pill);
  background: var(--forest-700);
  color: var(--cream-50);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* --- 08-faq-contact.css --- */
/* ==========================================================================
   FAQ and Contact
   ========================================================================== */

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

.faq__layout {
  display: grid;
  grid-template-columns: minmax(14rem, 20rem) 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
@media (max-width: 899px) {
  .faq__layout { grid-template-columns: 1fr; }
}

.faq__list { border-top: 1px solid var(--rule); }

.faq__item { border-bottom: 1px solid var(--rule); }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.15rem, 2vw, 1.6rem) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-variation-settings: var(--fv-title);
  font-weight: 600;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3rem);
  line-height: 1.35;
  color: var(--ink);
  transition: color var(--t-fast) linear;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ""; }
.faq__q:hover { color: var(--berry-malina-strong); }
.faq__q:focus-visible { outline-offset: -2px; }

.faq__marker {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--rule);
  color: var(--ink-muted);
  transition: transform var(--t-mid) var(--ease-out),
              background-color var(--t-mid) var(--ease-out),
              color var(--t-mid) var(--ease-out),
              border-color var(--t-mid) var(--ease-out);
}
.faq__marker .icon { width: 1.1rem; height: 1.1rem; }
.faq__item[open] .faq__marker {
  transform: rotate(180deg);
  background: var(--forest-700);
  border-color: var(--forest-700);
  color: var(--cream-50);
}

.faq__a {
  padding-bottom: clamp(1.25rem, 2vw, 1.75rem);
  max-width: 62ch;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--ink-muted);
}

/* Smooth open where the browser supports it; a clean snap where it doesn't. */
@supports selector(::details-content) {
  .faq__item::details-content {
    block-size: 0;
    overflow: hidden;
    opacity: 0;
    transition: content-visibility var(--t-mid) allow-discrete,
                opacity var(--t-mid) var(--ease-out),
                block-size var(--t-mid) var(--ease-out);
  }
  .faq__item[open]::details-content {
    block-size: auto;
    opacity: 1;
  }
}

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

.contact__layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 899px) {
  .contact__layout { grid-template-columns: 1fr; }
}

.contact__intro .lead { margin-top: 1.25rem; }

/* Direct contact: a dark card. B2B buyers should never be forced into a form. */
.contact__direct {
  margin-top: 2.5rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  border-radius: var(--r-lg);
  background: var(--forest-700);
  color: var(--on-dark);
  --ink: var(--cream-50);
  --ink-muted: var(--on-dark-muted);
  --rule: var(--on-dark-rule);
  --ring: var(--cream-50);
  box-shadow: var(--shadow-2);
}

.contact__direct-heading {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--leaf-500);
  margin-bottom: 1.25rem;
}

.contact__details {
  display: grid;
  gap: 1rem;
  font-style: normal;
}
.contact__detail { display: grid; gap: 0.15rem; }
.contact__detail .icon { width: 1.1rem; height: 1.1rem; color: var(--leaf-500); }
.contact__detail dt {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-dark-faint);
}
.contact__detail dd {
  margin: 0;
  padding-left: 1.65rem;   /* aligns the value under the label, past the icon */
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--on-dark);
}
.contact__detail a { text-decoration-color: rgb(254 247 229 / 0.45); }
.contact__detail a:hover { text-decoration-color: currentColor; }

.contact__direct .social { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.contact__direct .social a { width: 2.5rem; height: 2.5rem; }

/* --- The form card -------------------------------------------------------- */

.contact-form {
  position: relative;
  display: grid;
  gap: 1.25rem;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: var(--r-xl);
  border: 1px solid var(--rule);
  background: var(--surface);
  box-shadow: var(--shadow-2);
}

.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
@media (max-width: 599px) {
  .contact-form__row { grid-template-columns: 1fr; }
}

.field { display: grid; gap: 0.45rem; }

.field label {
  font-size: var(--fs-tiny);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 1rem;
  border-radius: var(--r-md);
  border: 1.5px solid var(--rule);
  background: var(--cream-50);
  color: var(--ink);
  font-size: var(--fs-body);
  transition: border-color var(--t-fast) linear, box-shadow var(--t-fast) linear;
}
.field textarea { min-height: 9.5rem; resize: vertical; line-height: 1.6; }

.field select {
  appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23063527' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.1rem;
  cursor: pointer;
}

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: rgb(6 53 39 / 0.3); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--forest-700);
  box-shadow: 0 0 0 3px rgb(139 197 63 / 0.28);
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { outline: none; }

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--danger); }
.field input[aria-invalid="true"]:focus,
.field textarea[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgb(176 0 32 / 0.16); }

.field__error {
  min-height: 1.15rem;
  font-size: var(--fs-tiny);
  font-weight: 500;
  color: var(--danger);
}
.field__error:empty { min-height: 0; }

/* Honeypot. Present, empty, and unreachable by a human. */
.contact-form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.contact-form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  justify-content: space-between;
}
.contact-form__required { font-size: var(--fs-tiny); color: var(--ink-faint); }

.contact-form__button { min-width: 12rem; }
.contact-form__button[disabled] { opacity: 0.65; cursor: progress; }

/* --- Status --------------------------------------------------------------- */

.form-status {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.45;
}
.form-status:empty { display: none; }
.form-status.is-error { color: var(--danger); }
.form-status.is-success {
  padding: 0.9rem 1.1rem;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--leaf-500) 16%, var(--cream-50));
  border: 1px solid color-mix(in srgb, var(--leaf-500) 45%, transparent);
  color: #2E5C15;
}

.form-status__check {
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  color: #3F7A1E;
}
/* 23 ≈ the measured length of the check icon's single continuous path, so the
   stroke draws itself exactly once with no dead time at either end. */
.form-status__check path {
  stroke-dasharray: 23;
  stroke-dashoffset: 23;
  animation: draw-check 560ms var(--ease-out) forwards;
}
@keyframes draw-check { to { stroke-dashoffset: 0; } }

.contact__privacy {
  font-size: var(--fs-tiny);
  line-height: 1.6;
  color: var(--ink-faint);
}
.contact__privacy button {
  padding: 0;
  font-size: inherit;
  color: var(--ink-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.contact__privacy button:hover { color: var(--ink); }

/* --- 09-dialogs-motion.css --- */
/* ==========================================================================
   Dialogs (shared), privacy policy, 404, motion system
   ========================================================================== */

/* --- Native dialog base --------------------------------------------------- */
/* <dialog>.showModal() gives us the focus trap, Esc-to-close and focus
   restoration for free — and it gets them right. */

dialog {
  margin: auto;
  border: 0;
  padding: 0;
}

/* A closed <dialog> is display:none in the UA sheet — but any `display` we set
   on a dialog's own class (e.g. .privacy { display:flex }) outranks it and
   spills the modal into the page. This guard outranks the class in turn. */
dialog:not([open]) { display: none; }
dialog::backdrop {
  background: rgb(4 36 27 / 0.66);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity var(--t-mid) linear;
}
dialog[open]::backdrop { opacity: 1; }

dialog[open] { animation: dialog-in var(--t-mid) var(--ease-out); }
@keyframes dialog-in {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 767px) {
  .quickview[open] { animation: sheet-in var(--t-mid) var(--ease-out); }
  @keyframes sheet-in {
    from { opacity: 0; transform: translateY(100%); }
    to   { opacity: 1; transform: none; }
  }
}

html.has-dialog { overflow: hidden; }

/* --- Privacy modal -------------------------------------------------------- */

.privacy {
  width: min(48rem, calc(100vw - 2rem));
  max-height: min(86dvh, 52rem);
  border-radius: var(--r-xl);
  background: var(--cream-50);
  color: var(--ink);
  box-shadow: var(--shadow-3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.privacy__head {
  position: relative;
  flex: 0 0 auto;
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.5rem) 1.25rem;
  border-bottom: 1px solid var(--rule);
  background: var(--cream-50);
}
.privacy__head h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); padding-right: 3rem; }
.privacy__updated {
  margin-top: 0.4rem;
  font-size: var(--fs-tiny);
  color: var(--ink-faint);
}

.privacy__body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.5rem);
  scrollbar-width: thin;
  scrollbar-color: rgb(6 53 39 / 0.28) transparent;
}
.privacy__body h3 {
  font-size: 1.0625rem;
  font-variation-settings: var(--fv-title);
  margin-top: 2rem;
}
.privacy__body h3:first-child { margin-top: 0; }
.privacy__body p,
.privacy__body ul {
  margin-top: 0.85rem;
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--ink-muted);
}
.privacy__body ul { display: grid; gap: 0.4rem; padding-left: 1.1rem; }
.privacy__body li { list-style: disc; }
.privacy__body li::marker { color: var(--leaf-500); }
.privacy__body a { color: var(--ink); }

.privacy__foot {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  padding: 1.25rem clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid var(--rule);
  background: var(--cream-100);
}

/* --- 404 ------------------------------------------------------------------ */

.notfound {
  display: grid;
  place-items: center;
  min-height: 70vh;
  text-align: center;
}
/* Full-strength berry: a tinted "404" never clears 3:1 against cream at any
   opacity that still reads as faint (0.65 tops out at 2.97:1). */
.notfound__code {
  font-family: var(--font-display);
  font-variation-settings: var(--fv-numeral);
  font-weight: 600;
  font-size: clamp(5rem, 3rem + 12vw, 11rem);
  line-height: 1;
  color: var(--berry-malina-strong);
  opacity: 1;
}
.notfound h1 { margin-top: -1.5rem; }
/* Scoped by class, not `.notfound p` — the numeral is also a <p>, and the
   descendant selector silently outranked its own colour. */
.notfound__text { margin-top: 1rem; color: var(--ink-muted); }
.notfound .btn { margin-top: 2rem; }

/* ==========================================================================
   Motion — one system, applied everywhere
   ========================================================================== */

/* Reveals. Play once: the observer unobserves on entry, so nothing ever
   blinks back out on the way up the page.

   The hidden state is scoped to .js, which the head script only sets when the
   browser can actually run the reveal (and which it takes back if main.js
   never arrives). Content is therefore never hidden by a script that failed. */
.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--t-slow) var(--ease-out),
              transform var(--t-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Hero botanicals drift a few pixels on scroll. Whisper-quiet. */
.deco { transform: translate3d(0, var(--drift, 0px), 0) rotate(var(--deco-rot, 0deg)); }

/* --- Reduced motion ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .marquee__track { animation: none !important; transform: none !important; }

  .js .reveal { opacity: 1 !important; transform: none !important; }

  .deco { transform: none !important; }

  .hr-map__city.is-active .hr-map__halo { animation: none; opacity: 0.6; }

  .form-status__check path { stroke-dashoffset: 0; animation: none; }

  /* Hover lifts and scales would still fire on a trackpad; hold them flat. */
  .product-card:hover,
  .product-card:focus-visible { transform: none; }
  .product-card:hover .product-card__image,
  .product-card:focus-visible .product-card__image { transform: none; }
  .gallery__tile:hover img,
  .gallery__tile:focus-visible img { transform: none; }
}