/* =========================================================================
   PIÙ BELLA — Fine Food Ingredients
   Design system, layout and motion. One stylesheet, no build step.

   Palette: two brand colours — dark green #40531A and gold #BFA266 — over a
   warm ivory ground with sand panels. Both live in 01 Tokens as
   --primary-bg / --primary-accent; every other green and gold derives from
   them, so the site retunes from those two lines.
   The green is used deliberately — ticker, marquee, closing band, footer —
   so the light sections carry the content and the green ones frame it.
   The logo tricolour (--green / --red) is the Italian flag and is exempt.

   Contents
   01  Tokens
   02  Reset & base
   03  Filetto (the tricolour signature rule)
   04  Buttons, pills, forms
   05  Ticker & header
   06  Hero
   07  Marquee
   08  Sections: ranges, products, split, pillars, testimonials, FAQ, CTA
   09  Page-specific: about, products, contact, distributor
   10  Footer & floating actions
   11  Motion & reduced motion
   ========================================================================= */

/* ---------------------------------------------------------------- 01 Tokens */
:root {
  /* ---- Theme -------------------------------------------------------------
     The two brand colours. Every green and every gold below is derived from
     these, so the whole site retunes from these two lines. */
  --primary-bg:     #40531A;   /* dark green — dark bands, primary buttons */
  --primary-accent: #BFA266;   /* gold — accents, rules, figures           */

  /* Component channels, for the rgba() tints that need an alpha. */
  --primary-bg-rgb:     64, 83, 26;
  --primary-accent-rgb: 191, 162, 102;

  /* Derived steps. Written as literals rather than colour-mix() so the sheet
     still resolves in browsers without relative-colour support. */
  /* The second green is recessed, not lifted. A panel *above* #40531A is too
     light to carry the dim text that lands on it — the newsletter well reads
     as an input either way, and sinking it keeps every label legible. */
  --primary-bg-well: #33430F;  /* inset wells — inputs on the green bands */
  --primary-bg-deep: #354415;  /* pressed states, footer bar             */
  /* Two gold text colours, because gold at full strength is unreadable as
     text on either ground. Each is solved against the *worst* ground it can
     land on: the deep sand well, and the plain green. */
  --accent-deep:     #7B6127;  /* gold text on ivory / sand  — 5.48 / 4.56:1 */
  --accent-on-dark:  #D7BA7E;  /* gold text on the greens    — 4.54:1        */
  --accent-lift:     #D2B884;  /* gold one step up — hover on the green bands */
  --accent-soft:     rgba(var(--primary-accent-rgb), .14);

  /* Shadows carry a green cast so they read as this theme's shade rather
     than a neutral grey. Darker than --primary-bg on purpose: the alphas
     below were tuned against a near-black and would go weak otherwise. */
  --shadow-rgb: 22, 30, 10;

  /* Tricolour — from the logo, kept exactly. The filetto is the Italian
     flag, so it stays put while the theme moves around it. */
  --green: #00A651;
  --red:   #BE1E2D;
  --white: #FFFFFF;

  /* Ground */
  --bg:    #FAF7F1;   /* warm ivory */
  --bg-2:  #F2ECE1;   /* sand panel */
  --bg-3:  #EAE2D4;   /* deeper sand — inputs, wells */

  /* Ink — green-black rather than espresso, so headings sit in the theme. */
  --ink:      #1B2410;
  --tx:       #1B2410;
  --tx-dim:   #555A47;
  --tx-mute:  #6B6556;   /* 4.51:1 against the deepest sand, not just ivory */

  /* Accent aliases. Kept so the rest of the sheet reads as before. */
  --gold:      var(--primary-accent);
  --gold-deep: var(--accent-deep);
  --gold-soft: var(--accent-soft);

  --line:   rgba(var(--primary-bg-rgb), .16);
  --line-2: rgba(var(--primary-bg-rgb), .32);

  /* Dark-side tokens, for the green bands. Every one of these clears 4.5:1
     on --primary-bg — dark green is much lighter than the espresso these
     were originally drawn against, so they all needed lifting. */
  --d-bg:   var(--primary-bg);
  --d-bg-2: var(--primary-bg-well);
  --d-tx:   #F6F3E7;   /* 7.65:1 */
  --d-dim:  #CBC9B4;   /* 5.08:1 */
  --d-mute: #BBC0A3;   /* 4.53:1 */
  --d-line: rgba(246, 243, 231, .18);

  --display: 'Marcellus SC', 'Cormorant Garamond', Georgia, serif;
  --body:    'Archivo', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --max: 1240px;
  --gut: 40px;
  --r:   6px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ticker-h: 38px;
  --header-h: 96px;

  /* The logo is deliberately taller than the bar it sits in, so it reads as a
     medallion overhanging the header edge rather than a small inline mark. */
  --logo-h: 132px;

  /* Hero figures band — straight off the theme. The gold in that band is
     decoration (border, hairlines), so it uses --primary-accent directly;
     its text goes through --accent-deep like every other gold label. */
  --stat-green: var(--primary-bg);
}

/* Kept together and in descending order so the narrowest match always wins. */
@media (max-width: 1300px) { :root { --logo-h: 120px; } }
@media (max-width: 1120px) { :root { --logo-h: 108px; } }
@media (max-width: 700px)  { :root { --gut: 20px; --header-h: 72px; --logo-h: 92px; } }

/* ------------------------------------------------------- 02 Reset and base */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--ticker-h) + var(--header-h) + 20px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--tx);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
::selection { background: var(--gold); color: var(--white); }

/* The product filter sets card.hidden — an author `display` rule would
   otherwise beat the UA [hidden] rule and nothing would ever hide. */
[hidden] { display: none !important; }

h1, h2, h3, h4 { margin: 0; font-weight: 400; }

/* Marcellus SC is a small-caps face: no text-transform, and it wants
   positive tracking rather than the negative a Didone would take. */
h1.display, h2.display {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: .015em;
  line-height: 1.1;
  color: var(--ink);
}

h1.display { font-size: clamp(2.5rem, 6.6vw, 4.9rem); }
h2.display { font-size: clamp(1.9rem, 4.2vw, 3.1rem); }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.wrap-narrow { max-width: 880px; margin: 0 auto; padding: 0 var(--gut); }

section { position: relative; padding: 112px 0; }
@media (max-width: 800px) { section { padding: 72px 0; } }

.panel { background: var(--bg-2); }

/* Archivo 700 rather than the display face: Marcellus SC ships at 400 only,
   so a bold there would be synthesised. Uppercase is explicit because we are
   no longer relying on a small-caps face to supply the caps. */
.eyebrow {
  display: block;
  font-family: var(--body);
  font-weight: 700;
  font-size: .88rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 16px 0 20px;
}

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

.section-head { max-width: 660px; margin-bottom: 56px; }
.section-head p { color: var(--tx-dim); margin: 20px 0 0; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .filetto { margin-left: auto; margin-right: auto; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
  border-radius: 2px;
}

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

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 300;
  background: var(--ink); color: var(--d-tx);
  padding: 10px 18px; border-radius: var(--r); font-weight: 700;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; }

/* Sections that sit on the theme green rather than ivory. */
.on-dark { background: var(--d-bg); color: var(--d-tx); }
.on-dark h1.display, .on-dark h2.display, .on-dark h3 { color: var(--d-tx); }
.on-dark p, .on-dark .lede { color: var(--d-dim); }
.on-dark .eyebrow { color: var(--accent-on-dark); }
.on-dark .btn-ghost { border-color: var(--d-line); color: var(--d-tx); }
/* Same gold fill as on the light side, so the button behaves the same way
   wherever it lands. */
.on-dark .btn-ghost:hover { background: var(--gold); border-color: var(--gold); color: #241B0C; }

/* ------------------------------------------------------------- 03 Filetto */
/* A 3px tricolour rule taken straight from the logo. Green / white / red. */
.filetto {
  display: block;
  width: 56px;
  height: 3px;
  border-radius: 1px;
  background: linear-gradient(
    to right,
    var(--green) 0 33.333%,
    var(--white) 33.333% 66.666%,
    var(--red)   66.666% 100%
  );
  box-shadow: 0 0 0 1px rgba(var(--shadow-rgb), .07);
}
.filetto--wide { width: 100%; }
.on-dark .filetto { box-shadow: none; }

/* Bottom edge of every large image panel. */
.filetto-edge { position: relative; }
.filetto-edge::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 3;
  background: linear-gradient(
    to right,
    var(--green) 0 33.333%,
    var(--white) 33.333% 66.666%,
    var(--red)   66.666% 100%
  );
}

/* -------------------------------------------------- 04 Buttons, pills, forms */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border: 1px solid transparent;
  border-radius: var(--r);
  font-family: var(--display);
  font-size: .88rem;
  font-weight: 400;
  letter-spacing: .13em;
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .25s var(--ease),
              box-shadow .25s var(--ease);
}
.btn .arw { transition: transform .25s var(--ease); }
.btn:hover .arw { transform: translateX(4px); }

/* The primary call to action carries the theme green. */
.btn-primary { background: var(--primary-bg); color: var(--d-tx); border-color: var(--primary-bg); }
.btn-primary:hover {
  background: var(--primary-bg-deep); border-color: var(--primary-bg-deep);
  transform: translateY(-2px); box-shadow: 0 12px 26px rgba(var(--primary-bg-rgb), .30);
}

.btn-gold { background: var(--gold); color: #241B0C; border-color: var(--gold); }
.btn-gold:hover {
  background: var(--gold-deep); border-color: var(--gold-deep); color: #FFF;
  transform: translateY(-2px); box-shadow: 0 12px 26px rgba(var(--primary-accent-rgb), .40);
}

/* .btn-green (WhatsApp's own #00A651) was retired — the one button using it,
   "Ask on WhatsApp" on the products page, now carries the brand green through
   .btn-primary, matching the floating WhatsApp action. */

/* The secondary button fills with the theme gold on hover. Ink text, not
   white: white on #BFA266 is 2.45:1, the ink is 6.93:1. */
.btn-ghost { border-color: var(--line-2); color: var(--tx); }
.btn-ghost:hover {
  background: var(--gold); border-color: var(--gold); color: #241B0C;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(var(--primary-accent-rgb), .34);
}

.btn-light { background: var(--white); color: var(--ink); border-color: var(--white); }
.btn-light:hover { background: #efe9dd; border-color: #efe9dd; transform: translateY(-2px); }

.btn-sm { padding: 11px 20px; font-size: .78rem; }
.btn-block { width: 100%; justify-content: center; }

/* An unscoped row of buttons. .hero__cta and .cta-band__btns already do this
   inside their own sections; this is the version for everywhere else. */
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }

/* Opt-in: the buttons share the row equally instead of each sizing to its own
   label, so a short and a long label still read as a matched pair. flex-basis
   0 makes the split independent of text length; the labels then centre in
   whatever width they land on. Wrapping still gives each a full row. */
.btn-row--even .btn { flex: 1 1 0; min-width: 15rem; justify-content: center; text-align: center; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--display);
  font-size: .84rem; letter-spacing: .13em;
  color: var(--gold-deep);
  transition: color .2s var(--ease);
}
.link-arrow .arw { transition: transform .25s var(--ease); }
.link-arrow:hover { color: var(--ink); }
.link-arrow:hover .arw { transform: translateX(4px); }

/* Forms */
.field { display: block; margin-bottom: 14px; }
.field > span {
  display: block;
  font-size: .66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .18em;
  color: var(--tx-mute); margin-bottom: 6px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--tx);
  font-family: var(--body);
  font-size: .92rem;
  padding: 11px 14px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { min-height: 92px; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: #A8A096; }
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--line-2); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--gold); outline: none;
  box-shadow: 0 0 0 3px var(--gold-soft);
}
.field select {
  appearance: none; cursor: pointer; padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--tx-mute) 50%),
                    linear-gradient(135deg, var(--tx-mute) 50%, transparent 50%);
  /* Retuned with the field padding above — the chevron is positioned from the
     top, so it drifts off-centre if the control height changes without it. */
  background-position: calc(100% - 20px) 20px, calc(100% - 15px) 20px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.field .err {
  display: block; color: #B3242F; font-size: .78rem; margin-top: 7px;
  letter-spacing: 0; text-transform: none; font-weight: 400;
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
@media (max-width: 620px) { .field-row { grid-template-columns: 1fr; } }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; }

.form-note { font-size: .8rem; color: var(--tx-mute); margin: 14px 0 0; }

.flash {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid rgba(0,166,81,.4);
  background: rgba(0,166,81,.08);
  color: #145C33;
  border-radius: var(--r);
  padding: 15px 18px;
  margin-bottom: 26px;
  font-size: .92rem;
}
.flash::before { content: '—'; color: var(--green); font-weight: 700; }

/* ----------------------------------------------------- 05 Ticker & header */
.ticker {
  position: fixed; top: 0; left: 0; right: 0; z-index: 120;
  height: var(--ticker-h);
  background: var(--d-bg);
  overflow: hidden;
  display: flex; align-items: center;
}
.ticker__track {
  display: flex; flex: none;
  animation: ticker-run 42s linear infinite;
  will-change: transform;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__item {
  display: inline-flex; align-items: center; gap: 26px;
  white-space: nowrap; padding-right: 26px;
  font-family: var(--display);
  font-size: .72rem; letter-spacing: .2em;
  color: var(--d-dim);
}
.ticker__item::after {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold); flex: none;
}
@keyframes ticker-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.header {
  position: fixed; top: var(--ticker-h); left: 0; right: 0; z-index: 110;
  height: var(--header-h);
  background: rgba(250, 247, 241, .86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.header.is-scrolled {
  background: rgba(250, 247, 241, .98);
  box-shadow: 0 8px 30px rgba(var(--shadow-rgb), .07);
}

/* Three columns so the logo sits dead-centre regardless of nav width. */
.header__inner {
  position: relative;
  max-width: var(--max); margin: 0 auto; height: 100%;
  padding: 0 var(--gut);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 34px;
}

/* The supplied logo artwork, centred and overhanging the header edge. */
.brand { display: inline-flex; justify-self: center; }
.brand--header {
  position: relative; z-index: 3;
  /* Half the overhang above, half below, then nudged down so the bar keeps
     a little breathing room at the top. */
  transform: translateY(calc((var(--logo-h) - var(--header-h)) / 2 + 4px));
  transition: transform .3s var(--ease);
}
.brand--header img {
  width: auto; height: var(--logo-h);
  border-radius: 4px;
  box-shadow: 0 14px 34px rgba(var(--shadow-rgb), .22);
  transition: height .3s var(--ease), transform .3s var(--ease),
              box-shadow .3s var(--ease);
}
.brand--header:hover img { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(var(--shadow-rgb), .28); }

/* Once the page moves, the medallion tucks back inside the bar — otherwise it
   would hang over the products filter bar and the content scrolling beneath. */
.header.is-scrolled .brand--header { transform: translateY(0); }
.header.is-scrolled .brand--header img {
  height: calc(var(--header-h) - 14px);
  box-shadow: 0 8px 20px rgba(var(--shadow-rgb), .18);
}
.brand--footer img { width: auto; height: 128px; border-radius: 4px; }
@media (max-width: 940px) { .brand--footer img { height: 112px; } }
@media (max-width: 560px) { .brand--footer img { height: 100px; } }

.nav { display: flex; align-items: center; gap: 52px; }
.nav--left  { justify-content: flex-end; }
.nav--right { justify-content: flex-start; }
/* Archivo, not the display face: Marcellus SC ships at 400 only, so a bold
   nav in it would be a synthesised smear. Archivo has a real 700. */
.nav a {
  position: relative;
  font-family: var(--body);
  font-weight: 700;
  font-size: .8rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--tx-dim);
  padding: 6px 0;
  transition: color .2s var(--ease);
}
.nav a:hover, .nav a.is-active { color: var(--ink); }
/* Underline wipes in left-to-right on hover. */
.nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: linear-gradient(to right,
    var(--green) 0 33.333%, #E6DFD2 33.333% 66.666%, var(--red) 66.666% 100%);
  transform: scaleX(0); transform-origin: left;
  transition: transform .32s var(--ease);
}
.nav a:hover::after, .nav a.is-active::after { transform: scaleX(1); }

/* Icon plus the number, on one line. The pill's left padding equals its top
   padding on purpose: that puts the icon disc concentric with the rounded
   cap. Any other value and the disc sits off-centre in the curve. */
/* --tel-pad and --tel-icon are set against each other so the pill keeps its
   58px height while the disc shrinks — that is what buys clearance between
   the contents and the border without moving the border itself. */
.header__tel {
  --tel-pad: 13px;
  --tel-icon: 36px;
  display: inline-flex; align-items: center; gap: 13px;
  margin-left: 8px;
  /* Right side gets more than the left: the left is already visually inset by
     the disc, the right has only the digits sitting against the curve. */
  padding: var(--tel-pad) 26px var(--tel-pad) var(--tel-pad);
  /* No resting outline — the gold disc and the number carry the pill on their
     own. The radius stays, because the gold fill on hover still needs it. */
  border: 0; border-radius: 999px;
  color: var(--tx-dim);
  white-space: nowrap;
  transition: color .2s var(--ease),
              background .2s var(--ease), transform .2s var(--ease),
              box-shadow .2s var(--ease);
}
.header__tel-icon {
  display: flex; align-items: center; justify-content: center;
  flex: none; width: var(--tel-icon); height: var(--tel-icon); border-radius: 50%;
  background: var(--gold-soft); color: var(--gold-deep);
  transition: background .2s var(--ease), color .2s var(--ease);
}
/* Glyph inset inside the disc, so the icon has its own breathing room too. */
.header__tel svg { width: 18px; height: 18px; display: block; }

/* Archivo, matching the nav — the number now sits on the nav's own baseline.
   The negative margin cancels the trailing letter-space, which would
   otherwise hold the digits off the pill's right padding. */
.header__tel-num {
  font-family: var(--body);
  font-size: 1.06rem; line-height: 1; font-weight: 700;
  letter-spacing: .04em; margin-right: -.04em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  transition: color .2s var(--ease);
}
.header__tel:hover {
  background: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(var(--primary-accent-rgb), .3);
}
/* Ink on the gold fill, matching .btn-ghost:hover — white would be 2.45:1. */
.header__tel:hover .header__tel-icon { background: rgba(255, 255, 255, .3); color: #241B0C; }
.header__tel:hover .header__tel-num  { color: #241B0C; }

/* Two steps down before the mobile drawer takes over at 1000px, so the wider
   nav spacing and the spelled-out number always stay on one line. */
@media (max-width: 1300px) {
  .nav { gap: 38px; }
  .header__inner { gap: 26px; }
}
@media (max-width: 1120px) {
  .nav { gap: 26px; }
  .header__inner { gap: 18px; }
  /* Driven through the two custom properties so the disc stays concentric
     with the cap at this size too. */
  .header__tel { --tel-pad: 11px; --tel-icon: 31px; padding-right: 20px; gap: 11px; margin-left: 4px; }
  .header__tel-num { font-size: .94rem; }
}

.burger {
  display: none;
  position: absolute; right: var(--gut); top: 50%; margin-top: -22px;
  width: 44px; height: 44px;
  background: none; border: 1px solid var(--line-2); border-radius: var(--r);
  color: var(--ink); cursor: pointer;
  align-items: center; justify-content: center;
}
.burger span {
  display: block; position: relative;
  width: 18px; height: 2px; background: currentColor;
  transition: background .1s .12s;
}
.burger span::before,
.burger span::after {
  content: ''; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor;
  transition: transform .25s var(--ease), top .2s var(--ease);
}
.burger span::before { top: -6px; }
.burger span::after  { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 130;
  width: min(360px, 86vw);
  background: var(--bg);
  border-left: 1px solid var(--line);
  padding: 28px var(--gut) 40px;
  transform: translateX(100%);
  transition: transform .35s var(--ease);
  overflow-y: auto;
  display: flex; flex-direction: column;
}
.drawer.is-open { transform: translateX(0); }
.drawer__top { display: flex; justify-content: flex-end; margin-bottom: 24px; }
.drawer__close {
  width: 42px; height: 42px; border: 1px solid var(--line-2); border-radius: var(--r);
  background: none; color: var(--ink); cursor: pointer; font-size: 1.1rem;
}
.drawer nav { display: flex; flex-direction: column; }
/* Matches the bold desktop nav, one size up for thumbs. */
.drawer nav a {
  font-family: var(--body);
  font-weight: 700;
  font-size: 1.02rem; letter-spacing: .12em; text-transform: uppercase;
  padding: 16px 0; border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.drawer nav a.is-active { color: var(--gold-deep); }
.drawer__foot { margin-top: auto; padding-top: 30px; display: grid; gap: 12px; }
.drawer__foot a.tel { color: var(--tx-dim); font-size: .9rem; }

.scrim {
  position: fixed; inset: 0; z-index: 125;
  background: rgba(var(--shadow-rgb), .5);
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s;
}
.scrim.is-open { opacity: 1; visibility: visible; }

@media (max-width: 1000px) {
  .nav, .header__tel { display: none; }
  .header__inner { grid-template-columns: 1fr; }
  .burger { display: inline-flex; }
  .brand--header { justify-self: center; }
}

/* Everything below the fixed ticker + header. */
.page { padding-top: calc(var(--ticker-h) + var(--header-h)); }

/* ------------------------------------------------------------------ 06 Hero */
.hero {
  position: relative;
  padding: 88px 0 96px;
  overflow: hidden;
  background:
    radial-gradient(60% 60% at 88% 12%, var(--gold-soft), transparent 62%),
    linear-gradient(180deg, #FDFBF7 0%, var(--bg) 62%);
}
.hero__grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.02fr .98fr;
  gap: 62px; align-items: center;
}
/* Type comes from the base .eyebrow rule now that every eyebrow shares it.
   Only the spacing is hero-specific. */
.hero .eyebrow { margin: 18px 0 22px; }

/* The lede now follows the h1 directly — there is no sub-line between them
   to carry the gap, so the heading has to open it itself. */
.hero h1 { margin: 0 0 26px; }
.hero .lede { margin: 0 0 34px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* -- Figures band ---------------------------------------------------------- */
/* Four equal columns across the foot of the hero. Equal columns — not `auto` —
   so the gap either side of every figure is identical no matter how many
   digits it carries, and each figure is centred inside its own column. */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-top: 76px; padding: 34px 20px;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(var(--primary-bg-rgb), .06), rgba(var(--primary-bg-rgb), .02)),
    linear-gradient(90deg, rgba(var(--primary-accent-rgb), .10), rgba(var(--primary-accent-rgb), .04));
  border: 1px solid rgba(var(--primary-accent-rgb), .38);
  box-shadow: 0 18px 44px rgba(var(--primary-bg-rgb), .07);
}
.stat {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 4px 14px;
}
/* Hairline rules between the columns, never outside them. */
.stat + .stat::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 1px; height: 56%; transform: translateY(-50%);
  background: linear-gradient(180deg,
    transparent, rgba(var(--primary-accent-rgb), .55), transparent);
}
.stat__num {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1;
  color: var(--stat-green); margin: 0;
}
/* The gold text steps to --accent-deep: #BFA266 itself only reaches ~2.2:1 on
   this near-white panel. Full-strength gold stays on the border and rules,
   where it is decoration rather than something to be read. */
.stat__num .suffix { color: var(--accent-deep); }
.stat__label {
  display: block; margin-top: 11px;
  font-size: .66rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent-deep);
}

@media (max-width: 900px) {
  .stats { grid-template-columns: repeat(2, 1fr); gap: 30px 0; margin-top: 56px; }
  /* With two per row the third cell starts a new row — its left rule would
     hang off the edge, so rules follow the columns instead. */
  .stat + .stat::before { display: none; }
  .stat:nth-child(even)::before {
    content: ''; display: block; position: absolute; left: 0; top: 50%;
    width: 1px; height: 56%; transform: translateY(-50%);
    background: linear-gradient(180deg,
      transparent, rgba(var(--primary-accent-rgb), .55), transparent);
  }
}
@media (max-width: 460px) {
  .stats { grid-template-columns: 1fr; gap: 26px; padding: 28px 16px; }
  .stat:nth-child(even)::before { display: none; }
}

/* -- Hero visual ---------------------------------------------------------- */
/* A framed still-life. When img/hero-kitchen.jpg exists the blade swaps in
   the photograph; otherwise the scene below is composed from the product
   cut-outs so the page never ships with an empty frame. */
.hero__figure {
  position: relative; margin: 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(var(--shadow-rgb), .18);
}
.hero__figure::before {
  content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  border: 1px solid rgba(var(--primary-accent-rgb), .38);
  border-radius: 8px;
}
.hero__photo { width: 100%; aspect-ratio: 4 / 3.3; object-fit: cover; }

.hero__scene {
  position: relative;
  aspect-ratio: 4 / 3.3;
  /* Wall above, counter below — the join reads as a horizon. */
  background:
    radial-gradient(70% 58% at 50% 6%, rgba(255, 252, 245, .95), transparent 70%),
    linear-gradient(180deg, #EFE4D0 0%, #E4D5BB 55%, #CDB795 55.001%, #B99F79 100%);
}
/* Warm window light raking across the scene. */
.hero__scene::before {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(115deg, rgba(255, 250, 236, .5) 0%, transparent 42%),
    radial-gradient(90% 80% at 50% 100%, transparent 45%, rgba(74, 56, 32, .3) 100%);
}
.hero__scene figure {
  position: absolute; margin: 0; bottom: 20%;
}
/* Multiply drops the flat white studio background into the counter tone. */
.hero__scene img {
  width: 100%; height: auto;
  mix-blend-mode: multiply;
  filter: saturate(1.06) contrast(1.03);
}
/* Grounding shadow so the bottles sit on the surface rather than float. */
.hero__scene figure::after {
  content: ''; position: absolute; z-index: -1;
  left: 4%; right: 4%; bottom: 2%; height: 12%;
  background: radial-gradient(closest-side, rgba(74, 56, 32, .42), transparent);
}
.hero__scene .shot--a { width: 32%; left: 8%;  bottom: 17%; z-index: 2; }
.hero__scene .shot--b { width: 42%; left: 31%; bottom: 20%; z-index: 1; }
.hero__scene .shot--c { width: 30%; right: 8%; bottom: 16%; z-index: 2; }

.hero__caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  padding: 26px 26px 22px;
  background: linear-gradient(to top, rgba(var(--shadow-rgb), .82), transparent);
  color: var(--d-tx);
  font-family: var(--display);
  font-size: .84rem; letter-spacing: .18em;
}

@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; gap: 46px; }
  .hero__figure { max-width: 560px; margin: 0 auto; width: 100%; }
}

/* ---------------------------------------------------------------- 07 Marquee */
.marquee {
  background: var(--d-bg);
  color: var(--d-tx);
  padding: 18px 0;
  overflow: hidden;
}
.marquee__track {
  display: flex; flex: none;
  animation: ticker-run 34s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  display: inline-flex; align-items: center; gap: 30px;
  white-space: nowrap; padding-right: 30px;
  font-family: var(--display);
  font-size: .84rem; letter-spacing: .24em;
}
.marquee__item::after {
  content: ''; width: 16px; height: 3px; flex: none; border-radius: 1px;
  background: linear-gradient(to right,
    var(--green) 0 33.333%, #E6DFD2 33.333% 66.666%, var(--red) 66.666% 100%);
}

/* ------------------------------------------------------ 08 Content sections */

/* Range tiles */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1000px) { .tiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .tiles { grid-template-columns: 1fr; } }

.tile {
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 300px;
  padding: 30px 26px 28px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease),
              border-color .3s var(--ease);
}
.tile::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(to right,
    var(--green) 0 33.333%, #E6DFD2 33.333% 66.666%, var(--red) 66.666% 100%);
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
.tile:hover {
  transform: translateY(-6px); border-color: rgba(var(--primary-accent-rgb), .45);
  box-shadow: 0 22px 46px rgba(var(--shadow-rgb), .12);
}
.tile:hover::after { transform: scaleX(1); }
.tile__numeral {
  font-family: var(--display); font-size: 1.05rem;
  color: var(--gold-deep); letter-spacing: .12em;
}
.tile h3 {
  font-family: var(--display); font-weight: 400;
  font-size: 1.36rem; letter-spacing: .03em; line-height: 1.18; margin: 20px 0 12px;
  color: var(--ink);
}
.tile p { color: var(--tx-dim); font-size: .92rem; margin: 0 0 22px; }
.tile__count {
  font-size: .68rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--tx-mute); margin-bottom: 14px;
}

/* Product cards */
.grid-products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1040px) { .grid-products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .grid-products { grid-template-columns: repeat(2, 1fr); gap: 16px; } }

.card {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--primary-accent-rgb), .45);
  box-shadow: 0 22px 46px rgba(var(--shadow-rgb), .13);
}

/* The supplied shots are cut-outs on flat white, which reads cheap. They are
   composited onto a warm studio sweep with multiply so the white disappears
   into the backdrop, then grounded with a soft contact shadow. */
.card__media {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background:
    radial-gradient(112% 88% at 50% 6%, #FFFDF8 0%, #F6EFE2 46%, #E8DCC7 100%);
}
.card__media::before {
  content: ''; position: absolute; z-index: 1;
  left: 16%; right: 16%; bottom: 9%; height: 9%;
  background: radial-gradient(closest-side, rgba(101, 82, 52, .3), transparent);
}
.card__media img {
  position: relative; z-index: 2;
  width: 100%; height: 100%; object-fit: contain;
  padding: 14px;
  mix-blend-mode: multiply;
  filter: saturate(1.06) contrast(1.03);
  transition: transform .5s var(--ease);
}
.card:hover .card__media img { transform: scale(1.06); }
.card__media::after {
  content: ''; position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(to right,
    var(--green) 0 33.333%, #E6DFD2 33.333% 66.666%, var(--red) 66.666% 100%);
}
/* Fallback tile for a SKU with no photograph yet. */
.card__media--wordmark { display: grid; place-items: center; background: var(--bg-3); }
.card__media--wordmark img {
  width: 58%; height: auto; padding: 0; mix-blend-mode: normal;
  border-radius: 3px; box-shadow: 0 10px 24px rgba(var(--shadow-rgb), .18);
}
.card__media--wordmark::before { content: none; }

.badge {
  position: absolute; top: 12px; left: 12px; z-index: 4;
  background: var(--gold); color: #FFF;
  font-size: .58rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 3px;
}
.badge--tag { left: auto; right: 12px; background: var(--ink); color: var(--d-tx); }

.card__body { padding: 20px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.card__range {
  font-size: .6rem; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold-deep); margin-bottom: 9px;
}
.card__body h3 {
  font-family: var(--display); font-weight: 400;
  font-size: 1.06rem; line-height: 1.28; letter-spacing: .02em;
  margin: 0 0 9px; color: var(--ink);
}
.card__blurb { font-size: .85rem; color: var(--tx-dim); margin: 0 0 16px; flex: 1; }
.card__packs {
  font-size: .74rem; color: var(--tx); letter-spacing: .03em;
  padding-top: 13px; border-top: 1px solid var(--line);
  margin-bottom: 15px;
}
.card__packs b {
  display: block; font-size: .58rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--tx-mute); margin-bottom: 5px;
}
.card__ask { font-size: .76rem; letter-spacing: .1em; }

/* Split feature */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
@media (max-width: 960px) { .split { grid-template-columns: 1fr; gap: 44px; } }
.split__media {
  position: relative; border-radius: var(--r); overflow: hidden;
  aspect-ratio: 4 / 3;
  display: grid; grid-template-columns: 1fr 1fr;
  background:
    radial-gradient(100% 76% at 50% 8%, #FFFDF8 0%, #F4ECDE 48%, #E5D8C0 100%);
  box-shadow: 0 24px 54px rgba(var(--shadow-rgb), .14);
}
.split__media img {
  width: 100%; height: 100%; object-fit: contain; padding: 28px;
  mix-blend-mode: multiply;
  filter: saturate(1.06) contrast(1.03);
}

/* -- Long-form story variant ---------------------------------------------- */
/* The story column runs many times the height of the picture, so centring
   would strand the picture in the middle of a column of whitespace. It
   starts at the top and rides along instead. */
.split--story { align-items: start; }
.split--story .split__media {
  position: sticky;
  top: calc(var(--ticker-h) + var(--header-h) + 40px);
}
@media (max-width: 960px) {
  .split--story .split__media { position: static; }
}

.story p { color: var(--tx-dim); max-width: 60ch; margin: 0 0 20px; }
.story .lede { margin-bottom: 26px; }

/* The single-sentence beats between the paragraphs. Set in the display face
   and the accent so the narrative has a rhythm rather than reading as one
   undifferentiated column. */
.story__turn {
  font-family: var(--display);
  font-size: 1.14rem; line-height: 1.4; letter-spacing: .01em;
  color: var(--gold-deep) !important;
  margin: 28px 0 !important;
}
.story__turn--last { color: var(--ink) !important; margin-bottom: 0 !important; }

.benefits { list-style: none; margin: 30px 0 34px; padding: 0; }
.benefits li {
  display: grid; grid-template-columns: auto 1fr; gap: 16px;
  padding: 18px 0; border-top: 1px solid var(--line);
}
.benefits li:last-child { border-bottom: 1px solid var(--line); }
.benefits .n {
  font-family: var(--display); font-size: .9rem;
  color: var(--gold-deep); padding-top: 2px;
}
.benefits h3 { font-family: var(--body); font-size: .95rem; font-weight: 700; margin: 0 0 4px; }
.benefits p { margin: 0; font-size: .88rem; color: var(--tx-dim); }

/* Pillars */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 880px) { .pillars { grid-template-columns: 1fr; } }
.pillar {
  padding: 34px 30px 32px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.pillar:hover {
  transform: translateY(-6px); border-color: rgba(var(--primary-accent-rgb), .45);
  box-shadow: 0 22px 46px rgba(var(--shadow-rgb), .12);
}
.pillar h3 {
  font-family: var(--display); font-weight: 400;
  font-size: 1.26rem; line-height: 1.2; letter-spacing: .03em;
  margin: 20px 0 12px; color: var(--ink);
}
.pillar p { margin: 0; color: var(--tx-dim); font-size: .92rem; }

/* Testimonials — an auto-sliding scroller. The track is a native overflow
   strip with scroll snapping, so it swipes on touch and still works with the
   script switched off; main.js only adds the timer, arrows and dots. */
.quotes-scroller { position: relative; }
.quotes {
  display: flex;
  align-items: stretch;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Room for the hover lift and its shadow, pulled back off the layout. The
     4px side inset is matched by scroll-padding so a snapped card lands flush
     with the section edge rather than 4px inside it. */
  padding: 8px 4px 24px;
  margin: -8px -4px 0;
  scroll-padding-left: 4px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.quotes::-webkit-scrollbar { display: none; }
/* Three across, pulled in far enough that the next card peeks past the right
   edge and the strip reads as scrollable. The 40px is a fixed inset kept from
   the tuned width — the space between cards is the gap on .quotes above. */
.quote {
  flex: 0 0 calc((100% - 40px) / 3 - 52.5px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 44px 15px 30px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(var(--shadow-rgb), .06);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease),
              border-color .3s var(--ease);
}
.quote::before {
  content: '\201C';
  position: absolute; top: 6px; left: 22px;
  font-family: Georgia, 'Times New Roman', serif; font-weight: 700;
  font-size: 6.4rem; line-height: 1; color: var(--gold);
  opacity: .32; pointer-events: none;
  transform-origin: top left;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
/* Same lift the product cards, tiles and pillars use, plus the tricolour
   underline wiping in from the left. */
.quote::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(to right,
    var(--green) 0 33.333%, #E6DFD2 33.333% 66.666%, var(--red) 66.666% 100%);
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
.quote:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--primary-accent-rgb), .45);
  box-shadow: 0 22px 46px rgba(var(--shadow-rgb), .12);
}
.quote:hover::after { transform: scaleX(1); }
.quote:hover::before { opacity: .5; transform: scale(1.06); }
.quote blockquote {
  position: relative; margin: 0 0 22px;
  font-size: 1rem; line-height: 1.62; color: var(--tx);
}
/* Quotes run to different lengths; the attribution still lines up across the
   three cards because it is pushed to the bottom of each. */
.quote figcaption { margin-top: auto; }
.quote cite { font-style: normal; display: block; }
.quote .who { font-family: var(--display); font-size: .92rem; letter-spacing: .06em; color: var(--ink); }
.quote .role { font-size: .78rem; color: var(--tx-mute); margin-top: 2px; }

/* Collapses where the pillars collapse, and to the same single column. */
@media (max-width: 880px) { .quote { flex-basis: 100%; } }

/* Arrows + dots. Hidden until the script confirms there is more than one
   screenful to move through. */
.quotes__nav {
  display: flex; align-items: center; justify-content: center; gap: 20px;
  margin-top: 6px;
}
.quotes__nav[hidden] { display: none; }
.quotes__arrow {
  width: 44px; height: 44px; flex: none; padding: 0;
  display: grid; place-items: center;
  background: var(--white); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: 50%;
  cursor: pointer;
  transition: color .25s var(--ease), border-color .25s var(--ease),
              transform .25s var(--ease), box-shadow .25s var(--ease);
}
.quotes__arrow span {
  width: 9px; height: 9px;
  border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateX(2px) rotate(45deg);
}
.quotes__arrow--next span { transform: translateX(-2px) rotate(-135deg); }
.quotes__arrow:hover {
  color: var(--gold-deep); border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(var(--shadow-rgb), .10);
}
.quotes__dots { display: flex; align-items: center; gap: 8px; }
.quotes__dot {
  width: 8px; height: 8px; padding: 0;
  background: var(--line-2); border: 0; border-radius: 999px;
  cursor: pointer;
  transition: width .3s var(--ease), background .3s var(--ease);
}
.quotes__dot:hover { background: var(--gold); }
.quotes__dot.is-active { width: 24px; background: var(--gold); }

/* FAQ */
.faq { display: grid; grid-template-columns: .82fr 1.18fr; gap: 62px; align-items: start; }
@media (max-width: 960px) { .faq { grid-template-columns: 1fr; gap: 40px; } }
.faq__list { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  width: 100%; padding: 22px 0;
  background: none; border: 0; cursor: pointer; text-align: left;
  color: var(--ink);
  font-family: var(--body); font-size: 1rem; font-weight: 600;
  transition: color .2s var(--ease);
}
.faq__q:hover { color: var(--gold-deep); }
.faq__icon { position: relative; flex: none; width: 14px; height: 14px; }
.faq__icon::before,
.faq__icon::after {
  content: ''; position: absolute; background: currentColor;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.faq__icon::before { top: 6px; left: 0; width: 14px; height: 2px; }
.faq__icon::after  { left: 6px; top: 0; width: 2px; height: 14px; }
.faq__item.is-open .faq__q { color: var(--gold-deep); }
.faq__item.is-open .faq__icon::after { transform: rotate(90deg); opacity: 0; }
.faq__a { max-height: 0; overflow: hidden; transition: max-height .38s var(--ease); }
.faq__a p { margin: 0 0 24px; color: var(--tx-dim); font-size: .93rem; max-width: 62ch; }

/* Closing CTA band */
.cta-band {
  position: relative; overflow: hidden;
  background: var(--d-bg);
  text-align: center;
  padding: 110px 0;
}
.cta-band::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(48% 64% at 50% 46%, rgba(var(--primary-accent-rgb), .26), transparent 68%);
}
.cta-band > .wrap { position: relative; z-index: 2; }
.cta-band .filetto { margin: 0 auto; }

/* The whole band reads gold. The heading takes #BFA266 exactly — at this size
   it is large text, where 3.47:1 clears the 3:1 bar. The eyebrow and the body
   copy are normal-size, which needs 4.5:1, so they take the same gold one
   step lighter (#D7BA7E, 4.54:1) rather than failing at #BFA266. */
.cta-band h2.display { color: var(--primary-accent); }
.cta-band .eyebrow   { color: var(--accent-on-dark); }
.cta-band p {
  max-width: 52ch; margin: 22px auto 34px;
  color: var(--accent-on-dark);
}
.cta-band__btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cta-band .btn-primary { background: var(--gold); border-color: var(--gold); color: #241B0C; }
.cta-band .btn-primary:hover { background: var(--accent-lift); border-color: var(--accent-lift); }

/* ------------------------------------------------- 09 Page-specific blocks */

.page-head {
  padding: 74px 0 58px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #FDFBF7 0%, var(--bg) 100%);
}
.page-head h1 { margin: 0 0 18px; }
.page-head .lede { margin: 0; }
/* A product shot dropped into the free space beside a page head. Nothing sits
   behind it — no panel, border or shadow — so it reads straight off the band.
   Absolutely placed on purpose: the existing text column keeps its exact
   layout, and the shot is dropped where the copy would crowd it. */
.has-shot { position: relative; overflow: hidden; }
.wrap--shot { position: relative; }
.section-shot {
  position: absolute;
  top: 50%; right: var(--gut);
  transform: translateY(-50%);
  /* Wide enough to carry the product, stopping short of the headline's
     longest line at every viewport the shot is shown at. */
  width: clamp(240px, 30vw, 420px);
  max-height: 100%;
  background: transparent;
  pointer-events: none;
}
.section-shot img {
  width: 100%; height: 100%;
  object-fit: contain;
  background: transparent;
}
/* The shot is bounded by the height of the copy beside it, so the shorter
   heads are floored to a height that lets it come up to full size. */
@media (min-width: 1101px) { .wrap--shot { min-height: 340px; } }
/* Below this the copy needs the full measure, so the shot steps out. */
@media (max-width: 1100px) { .section-shot { display: none; } }

.crumbs {
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tx-mute); margin-bottom: 18px;
}
.crumbs a:hover { color: var(--ink); }
.crumbs span { margin: 0 8px; }

/* About timeline */
.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 940px) { .timeline { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .timeline { grid-template-columns: 1fr; } }
.step { padding-top: 24px; border-top: 1px solid var(--line-2); position: relative; }
.step::before {
  content: ''; position: absolute; top: -1px; left: 0; width: 42px; height: 3px;
  background: linear-gradient(to right,
    var(--green) 0 33.333%, #E6DFD2 33.333% 66.666%, var(--red) 66.666% 100%);
}
.step__n { font-family: var(--display); color: var(--gold-deep); font-size: .88rem; letter-spacing: .12em; }
.step h3 {
  font-family: var(--display); font-weight: 400;
  font-size: 1.18rem; line-height: 1.22; letter-spacing: .03em;
  margin: 14px 0 10px; color: var(--ink);
}
.step p { margin: 0; font-size: .9rem; color: var(--tx-dim); }

.rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 880px) { .rules { grid-template-columns: 1fr; } }

/* Products range bar */
/* JS overwrites --filterbar-h with the measured height, because the pills
   wrap to a second row on narrow screens. This is the one-row fallback. */
:root { --filterbar-h: 75px; }

.filterbar {
  position: sticky; top: calc(var(--ticker-h) + var(--header-h)); z-index: 60;
  background: rgba(250, 247, 241, .95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
}
.filterbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.pills { display: flex; gap: 9px; flex-wrap: wrap; }
.pill {
  background: var(--white); cursor: pointer;
  border: 1px solid var(--line); border-radius: 100px;
  color: var(--tx-dim);
  font-family: var(--display);
  font-size: .78rem; letter-spacing: .1em;
  padding: 9px 18px;
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.pill:hover { color: var(--ink); border-color: var(--gold); }
.pill.is-active { background: var(--ink); border-color: var(--ink); color: var(--d-tx); }
.pill .n { opacity: .55; margin-left: 6px; }
/* Indicator rather than a control: same pill, dashed and unclickable, so it
   never reads as a filter that failed to work. */
.pill--soon { cursor: default; color: var(--tx-mute); border-style: dashed; }
.count-label { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tx-mute); }
.count-label b { color: var(--ink); }

/* -- Catalogue sections --------------------------------------------------- */
/* The last range block drops its own bottom padding (below), so the container
   carries the gap that separates the final row of cards from the green
   marquee band underneath. */
.catalogue { padding-top: 56px; padding-bottom: 72px; }
/* Each range is its own anchor target. html already carries
   scroll-padding-top: ticker + header + 20px, and the container's
   scroll-padding and the target's scroll-margin ADD when the browser lands an
   anchor — so this adds ONLY the sticky bar's own height. Repeating the whole
   stack here overshot by ~170px and left the previous range on screen. */
.range-block {
  padding: 0 0 64px;
  scroll-margin-top: var(--filterbar-h);
}
#catalogue { scroll-margin-top: var(--filterbar-h); }
.range-block:last-child { padding-bottom: 0; }

.range-block__head {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  margin-bottom: 26px; padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.range-block__head h2 {
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  letter-spacing: .02em; color: var(--ink);
  margin: 0;
}
.range-block__count {
  margin-left: auto;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--tx-mute);
}

/* Contact / distributor two-column */
.two-col { display: grid; grid-template-columns: .78fr 1.22fr; gap: 62px; align-items: start; }
@media (max-width: 960px) { .two-col { grid-template-columns: 1fr; gap: 44px; } }

/* Opt-in modifier, for the pairing where the right column is a long form and
   the left is a short block of copy: the copy sticks and rides down instead of
   sitting at the top of an empty column. Same offset as .split--story, so both
   clear the ticker and the fixed header by the same margin. Released at 960px,
   where the grid collapses to one column and there is nothing to ride beside. */
.two-col--sticky > :first-child {
  position: sticky;
  top: calc(var(--ticker-h) + var(--header-h) + 40px);
  /* Starts the copy level with the form card's contents, so the two filetti
     sit on one line. The card insets its own first child by 1px of border
     plus 30px of padding; the plain column has to come down by the same. */
  margin-top: 31px;
}
@media (max-width: 960px) {
  /* One column from here down — nothing to align across, and the offset would
     only read as a stray gap. */
  .two-col--sticky > :first-child { position: static; margin-top: 0; }
}

.directline { list-style: none; margin: 26px 0 0; padding: 0; }
.directline li { padding: 20px 0; border-top: 1px solid var(--line); }
.directline li:last-child { border-bottom: 1px solid var(--line); }
.directline .k {
  display: block; font-size: .62rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--tx-mute); margin-bottom: 7px;
}
.directline .v { font-size: 1rem; color: var(--tx); }
.directline a.v:hover { color: var(--gold-deep); }

.form-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 30px 32px 28px;
  box-shadow: 0 18px 44px rgba(var(--shadow-rgb), .08);
}
@media (max-width: 620px) { .form-card { padding: 24px 20px 22px; } }

/* The card's own header runs tighter than a full section header — it is
   introducing a form, not opening a page. */
.form-card .eyebrow { font-size: .78rem; letter-spacing: .18em; margin: 12px 0 12px; }
.form-card .lede { font-size: .95rem; }
.form-card .btn { width: 100%; justify-content: center; margin-top: 4px; }

.process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 940px) { .process { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .process { grid-template-columns: 1fr; } }

/* The four steps sit on the sand panel as white cards rather than open
   columns, so each one reads as a discrete box. Scoped to .process on
   purpose: .step is shared with the About page timeline, which stays open.
   Card language matches .pillar and .tile — same ground, border, radius and
   lift — so the page still reads as one system.
   overflow:hidden clips the inherited tricolour marker to the rounded top. */
.process .step {
  padding: 30px 26px 28px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.process .step:hover {
  transform: translateY(-6px); border-color: rgba(var(--primary-accent-rgb), .45);
  box-shadow: 0 22px 46px rgba(var(--shadow-rgb), .12);
}
/* Sits flush in the card's top-left corner, inside the border. */
.process .step::before { top: 0; }
.process .step h3 { font-size: 1.22rem; margin: 14px 0 12px; }
.process .step p { font-size: .92rem; line-height: 1.7; }

/* -- Location page: contact routing and the head-office map --------------- */

/* Stacked, left-aligned links inside a .pillar. justify-items keeps each one
   only as wide as its text, so the arrow sits against the address rather than
   floating out at the card edge. */
.desk-links { display: grid; justify-items: start; gap: 12px; margin-top: 20px; }
.desk-links .link-arrow { text-transform: none; letter-spacing: .06em; }

/* The wrapper owns the ratio so the block holds its height before the iframe
   paints and never shifts the page around it. Wide and shallow at full width;
   squarer once the column narrows, or the map is a letterbox slot. */
.map-frame {
  position: relative;
  aspect-ratio: 21 / 9;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bg-3);
  box-shadow: 0 18px 44px rgba(var(--shadow-rgb), .08);
}
.map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 820px) { .map-frame { aspect-ratio: 16 / 11; } }
@media (max-width: 520px) { .map-frame { aspect-ratio: 4 / 5; } }

/* Sitemap page */
.sitemap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
@media (max-width: 780px) { .sitemap-grid { grid-template-columns: 1fr; } }
.sitemap-grid ul { list-style: none; margin: 16px 0 0; padding: 0; }
.sitemap-grid li { padding: 9px 0; border-bottom: 1px solid var(--line); }
.sitemap-grid a:hover { color: var(--gold-deep); }

/* --------------------------------------------- 10 Footer & floating actions */
/* Footer copy runs pure white rather than the dimmed off-whites used on the
   other green bands, and one step larger throughout — it is the last thing on
   the page and was reading as fine print. Hovers move to gold, because a
   lighter hover is not available once the resting state is #FFF. */
.footer {
  background: var(--d-bg);
  color: var(--white);
  padding: 78px 0 0;
}
.footer__grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.4fr;
  gap: 44px; padding-bottom: 54px;
}
@media (max-width: 940px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: 36px; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }
.footer h3 {
  font-family: var(--display);
  font-size: 1.08rem; letter-spacing: .24em;
  color: var(--accent-on-dark); margin-bottom: 20px;
}
.footer__links { list-style: none; margin: 0; padding: 0; }
.footer__links li { margin-bottom: 11px; }
.footer__links a { font-size: 1rem; color: var(--white); transition: color .2s var(--ease); }
.footer__links a:hover { color: var(--accent-on-dark); }
.footer__blurb { color: var(--white); font-size: 1rem; max-width: 34ch; margin: 20px 0 22px; }

/* Contact details. No border, no panel — it sits in the grid as a plain
   column alongside Quick links and Ranges, under the shared <h3>.
   <address> italicises by default in every UA, so that is reset. */
.footer__contact {
  font-style: normal;
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
  max-width: 34ch; margin: 0;
}
.footer__contact p { margin: 0; }
.footer__contact a {
  font-size: 1.02rem; color: var(--white);
  transition: color .2s var(--ease);
}
.footer__contact a:hover { color: var(--accent-on-dark); }
/* The second audience is separated by its own label and the space above it —
   no dividing rule — so the two are still not read as one list of four
   interchangeable contact details. */
.footer__contact-split {
  margin-top: 9px !important; padding-top: 13px;
  align-self: stretch;
  font-size: .88rem; color: var(--white);
}

.socials { display: flex; gap: 10px; }
.socials a {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--d-line);
  display: grid; place-items: center; color: var(--white);
  transition: border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.socials a:hover { border-color: var(--gold); color: var(--accent-on-dark); transform: translateY(-2px); }
.socials svg { width: 15px; height: 15px; }

.newsletter {
  display: flex; border: 1px solid var(--d-line); border-radius: var(--r);
  overflow: hidden; background: var(--d-bg-2);
}
.newsletter input {
  flex: 1; min-width: 0; background: none; border: 0; color: var(--white);
  font-family: var(--body); font-size: .95rem; padding: 13px 15px;
}
.newsletter input::placeholder { color: var(--d-mute); }
.newsletter input:focus { outline: none; }
.newsletter button {
  background: var(--gold); color: #241B0C; border: 0; cursor: pointer;
  padding: 0 22px;
  font-family: var(--display); font-size: .85rem; letter-spacing: .14em;
  transition: background .2s var(--ease);
}
.newsletter button:hover { background: var(--accent-lift); }
.newsletter-ok { color: var(--green); font-size: .9rem; margin: 10px 0 0; }

.footer__bar {
  border-top: 1px solid var(--d-line);
  padding: 24px 0 30px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
  font-size: .9rem; color: var(--white);
}
.footer__bar a:hover { color: var(--accent-on-dark); }
.footer__bar .set { display: flex; gap: 22px; flex-wrap: wrap; }

/* Floating actions */
.floaties {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  display: flex; flex-direction: column; gap: 12px;
}
.floaty {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  border: 0; cursor: pointer;
  box-shadow: 0 10px 28px rgba(var(--shadow-rgb), .3);
  transition: transform .25s var(--ease), opacity .25s var(--ease), visibility .25s;
}
.floaty:hover { transform: translateY(-3px) scale(1.05); }
.floaty svg { width: 24px; height: 24px; }
/* Both floaties carry the brand green rather than WhatsApp's own #25D366, so
   the pair reads as one control cluster instead of two unrelated buttons. */
.floaty--wa   { background: var(--primary-bg); color: var(--d-tx); }
.floaty--call { background: var(--primary-bg); color: var(--d-tx); }
.floaty--top {
  background: var(--white); color: var(--ink); border: 1px solid var(--line-2);
  opacity: 0; visibility: hidden;
}
.floaty--top svg { width: 18px; height: 18px; }
.floaty--top.is-visible { opacity: 1; visibility: visible; }
@media (max-width: 560px) { .floaties { right: 14px; bottom: 14px; } .floaty { width: 48px; height: 48px; } }

/* ------------------------------------------------ 11 Motion / reduced motion */
/* Scoped to .js so the page still reads if JavaScript never runs. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

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

@media print {
  .ticker, .header, .floaties, .marquee, .cta-band { display: none !important; }
  body { background: #fff; color: #000; }
  .page { padding-top: 0; }
}