/* ==========================================================================
   Vitamyth — public stylesheet
   Colour custom properties are injected per-request by inc/theme.php, so the
   whole site re-skins when the palette changes in the admin panel.
   ========================================================================== */

/* --- Nunito, self-hosted -------------------------------------------------
   One variable file per subset covers every weight we use (400–900), so the
   site has no font-CDN dependency and nothing to load from a third party.
   ------------------------------------------------------------------------- */
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/nunito-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/nunito-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

/* --- Design tokens ------------------------------------------------------- */
:root {
  --font-sans: "Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --r-sm: .375rem;
  --r-md: .625rem;          /* the brand radius */
  --r-lg: 1rem;
  --r-xl: 1.5rem;
  --r-pill: 999px;

  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;

  --shadow-sm: 0 1px 2px rgba(12, 58, 12, .06), 0 1px 3px rgba(12, 58, 12, .08);
  --shadow-md: 0 4px 12px rgba(12, 58, 12, .08), 0 2px 4px rgba(12, 58, 12, .06);
  --shadow-lg: 0 18px 40px rgba(12, 58, 12, .12), 0 4px 12px rgba(12, 58, 12, .06);

  /* The page container. --wrap is a ceiling, not a width: under it the content
     runs the full width of the screen, so a 360px phone and a 1920px monitor
     both fill up. The gutter grows with the viewport so a wide screen keeps a
     margin without the content shrinking into an island in the middle. */
  --wrap: 1360px;
  --gutter: clamp(1rem, 3.2vw, 3rem);
  --nav-h: 4.5rem;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --t-fast: 150ms;
  --t-mid: 240ms;
}

/* Large screens keep widening instead of stranding empty desk down both sides.
   Reading width is capped separately by .section-head and .prose, so lines
   never get too long to follow however wide the monitor is. */
@media (min-width: 1600px) { :root { --wrap: 1520px; --gutter: 3.5rem; } }
@media (min-width: 1920px) { :root { --wrap: 1760px; --gutter: 4rem; } }
@media (min-width: 2400px) { :root { --wrap: 2040px; --gutter: 5rem; } }

/* --- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
}

body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--c-body);
  background: var(--c-surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* Full height of the screen, so a short page (a 404, an empty search, a
     thank-you) still puts the footer at the bottom edge instead of leaving a
     band of blank surface under it. dvh keeps that honest on phones, where the
     browser toolbars grow and shrink as you scroll. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
main { flex: 1 0 auto; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: var(--c-link); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { padding: 0; list-style: none; }
:target { scroll-margin-top: calc(var(--nav-h) + 1rem); }
/* Author-level, because .card and friends set display and would otherwise win
   over the browser's own [hidden] rule when JS hides a filtered-out card. */
[hidden] { display: none !important; }

/* Visible focus for keyboard users — never removed, only restyled. */
:focus-visible {
  outline: 3px solid var(--c-secondary);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* --- Typography ---------------------------------------------------------- */
h1, h2, h3, h4, h5 {
  font-weight: 800;
  line-height: 1.15;
  color: var(--c-heading);
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.5rem); letter-spacing: -.01em; }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
h4 { font-size: 1.05rem; }
p  { text-wrap: pretty; }
.lead { font-size: clamp(1rem, 1.6vw, 1.15rem); color: var(--c-muted); }
.mark { color: var(--c-primary); }
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: .4rem .85rem;
  font-size: .78rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--c-strong);
  background: var(--c-primary-soft);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
}
.eyebrow--on-dark {
  color: var(--c-highlight);
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .22);
}

/* --- Layout -------------------------------------------------------------- */
/* Every band of the page puts its content in a .wrap, so this one rule decides
   how much of the screen the site uses. The max() folds in the notch cutout, so
   with viewport-fit=cover a phone held sideways never hides text behind the
   rounded corner while the backgrounds still run edge to edge. */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}
.section { padding-block: clamp(3rem, 7vw, 5.5rem); position: relative; }
.section--tint { background: var(--c-canvas); }
.section--dark { background: var(--c-dark); color: rgba(255, 255, 255, .82); }
.section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
/* The brand green is too dark to read on the dark band — use the highlight. */
.section--dark .mark { color: var(--c-highlight); }
.section-head { max-width: 46rem; margin-inline: auto; margin-bottom: clamp(2rem, 4vw, 3rem); text-align: center; }
.section-head > * + * { margin-top: var(--s-3); }

.grid { display: grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }

/* Pins a band to a column count its item count divides into evenly, so a wide
   monitor makes the cards bigger instead of stranding one or two on a row of
   their own. Only used where the count is fixed by the design — the six core
   values read 3 + 3. Auto-fit still handles every band that can grow. */
@media (min-width: 1200px) {
  .grid--max-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.stack > * + * { margin-top: var(--s-4); }
.center { text-align: center; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--s-4); top: -4rem; z-index: 200;
  padding: var(--s-3) var(--s-4);
  background: var(--c-surface); color: var(--c-strong);
  border-radius: var(--r-md); box-shadow: var(--shadow-md); font-weight: 700;
  transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: var(--s-3); }

.ic { width: 1.25em; height: 1.25em; flex: none; }
.ic-sm { width: 1em; height: 1em; }
.ic-lg { width: 1.75em; height: 1.75em; }
/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 2.75rem;                 /* 44px touch target */
  padding: .7rem 1.35rem;
  font-weight: 800; font-size: .95rem; line-height: 1.2;
  border-radius: var(--r-md);
  border: 1.5px solid transparent;
  text-decoration: none; text-align: center;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }

.btn--primary { background: var(--c-primary); color: var(--c-primary-ink); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--c-primary-hover); box-shadow: var(--shadow-md); }

.btn--secondary { background: var(--c-secondary); color: var(--c-secondary-ink); box-shadow: var(--shadow-sm); }
.btn--secondary:hover { background: var(--c-secondary-hover); box-shadow: var(--shadow-md); }

.btn--outline { border-color: var(--c-primary); color: var(--c-primary); background: transparent; }
.btn--outline:hover { background: var(--c-primary-soft); }

.btn--ghost { color: var(--c-strong); background: var(--c-primary-soft); }
.btn--ghost:hover { background: var(--c-light); }

.btn--on-dark { border-color: rgba(255, 255, 255, .45); color: #fff; }
.btn--on-dark:hover { background: rgba(255, 255, 255, .12); }

/* WhatsApp keeps its own green so the button is recognised instantly. The label
   is ink, not white: white on #25D366 is only 1.98:1 and fails WCAG AA. */
.btn--wa { background: #25D366; color: var(--c-ink); box-shadow: var(--shadow-sm); }
.btn--wa:hover { background: #1EBE5A; box-shadow: var(--shadow-md); }

.btn--lg { min-height: 3.15rem; padding: .9rem 1.75rem; font-size: 1.05rem; }
.btn--sm { min-height: 2.75rem; padding: .5rem 1rem; font-size: .85rem; }
.btn--block { width: 100%; }

/* --- Chips / badges ------------------------------------------------------ */
.chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 2.75rem; padding: .45rem 1rem;
  font-size: .9rem; font-weight: 700; white-space: nowrap;
  color: var(--c-strong); background: var(--c-surface);
  border: 1.5px solid var(--c-line); border-radius: var(--r-pill);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.chip:hover { border-color: var(--c-primary); background: var(--c-primary-soft); text-decoration: none; }
a.chip { color: var(--c-strong); }
.chip[aria-pressed="true"] { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-primary-ink); }
.chip__count { font-size: .78rem; opacity: .75; font-weight: 800; }
.filters {
  display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.filters--left { justify-content: flex-start; }
.filters--foot { margin-top: clamp(2rem, 4vw, 3rem); margin-bottom: 0; }

.badge {
  display: inline-block; padding: .2rem .6rem;
  font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  border-radius: var(--r-pill);
  background: var(--c-highlight); color: var(--c-highlight-ink);
}
.badge--soft { background: var(--c-primary-soft); color: var(--c-strong); }
.badge--cat {
  background: rgba(var(--c-dark-rgb), .82); color: #fff;
  backdrop-filter: blur(4px);
}
/* --- Header / navigation -------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--c-line);
  transition: box-shadow var(--t-mid) var(--ease);
  /* Installed to the home screen the status bar sits over the top of the page,
     so the bar grows by that much rather than hiding the logo behind the clock.
     In a normal browser tab the inset is 0 and nothing changes. */
  padding-top: env(safe-area-inset-top);
}
.site-header.is-stuck { box-shadow: var(--shadow-md); }
.site-header__bar {
  display: flex; align-items: center; gap: var(--s-4);
  min-height: var(--nav-h);
}
.brand { display: inline-flex; align-items: center; gap: var(--s-3); margin-right: auto; }
.brand img { height: 2.4rem; width: auto; }
.brand__name { font-weight: 900; font-size: 1.15rem; color: var(--c-strong); letter-spacing: -.01em; }

.nav { display: none; align-items: center; gap: var(--s-2); }
.nav a, .nav__toggle {
  display: inline-flex; align-items: center; gap: var(--s-1);
  min-height: 2.75rem; padding: .5rem .8rem;
  font-weight: 700; color: var(--c-ink); border-radius: var(--r-md);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav a:hover, .nav__toggle:hover { background: var(--c-primary-soft); color: var(--c-strong); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--c-primary); background: var(--c-primary-soft); }

.nav__group { position: relative; }
.nav__menu {
  position: absolute; top: calc(100% + .4rem); left: 0; z-index: 20;
  min-width: 15rem; padding: var(--s-2);
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  display: none;
}
.nav__group.is-open .nav__menu { display: block; }
.nav__menu a { display: flex; width: 100%; font-weight: 600; }
.nav__toggle[aria-expanded="true"] .ic { transform: rotate(180deg); }
.nav__toggle .ic { transition: transform var(--t-fast) var(--ease); }

.header-actions { display: none; align-items: center; gap: var(--s-2); }

.burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: var(--r-md); color: var(--c-strong);
  background: var(--c-primary-soft);
}
.burger:hover { background: var(--c-light); }

.drawer {
  display: grid; grid-template-rows: 0fr;
  overflow: hidden;
  border-top: 0 solid var(--c-line);
  transition: grid-template-rows var(--t-mid) var(--ease);
}
.drawer.is-open { grid-template-rows: 1fr; border-top-width: 1px; }
/* Everything the open panel needs and the closed one must not have.
   The vertical padding is here rather than on .drawer__inner because the panel
   is a border-box: padding is a floor its height cannot go under, so leaving it
   on left a 30px strip of the first link visible — and clickable — under the
   closed bar. The cap is here for the same reason, a scroll container cannot
   collapse below its own padding either. What the cap buys: a phone held
   sideways has barely 350px of height, so the panel takes what is left below the
   bar and scrolls inside itself instead of running off the screen. */
.drawer.is-open .drawer__inner {
  padding-top: var(--s-3);
  padding-bottom: var(--s-5);
  max-height: calc(100dvh - var(--nav-h));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.drawer__inner {
  min-height: 0;
  padding-block: 0;
  /* The drawer sits outside .wrap, so it needs the notch cutout of its own. */
  padding-left: max(var(--s-4), env(safe-area-inset-left));
  padding-right: max(var(--s-4), env(safe-area-inset-right));
}
.drawer a, .drawer .nav__toggle {
  display: flex; align-items: center; gap: var(--s-2);
  min-height: 2.9rem; padding: .6rem .25rem;
  font-weight: 700; color: var(--c-ink);
  border-bottom: 1px solid var(--c-line);
}
.drawer__sub { padding-left: var(--s-4); }
.drawer__sub a { font-weight: 600; color: var(--c-body); }
.drawer__actions { display: flex; gap: var(--s-3); margin-top: var(--s-4); }
.drawer__actions .btn { flex: 1; }

/* A tablet has room for the account buttons long before it has room for the
   whole nav, so those two thresholds are deliberately different — the bar fills
   the width it has instead of showing a phone header on a 800px screen. */
@media (min-width: 600px) { .header-actions { display: flex; } }
@media (min-width: 900px) {
  .nav { display: flex; }
  .burger { display: none; }
  .drawer { display: none; }
}
/* 900–1119px: the full nav only fits once the links and buttons tighten up, and
   only if an unusually wide uploaded logo is reined in. */
@media (min-width: 900px) and (max-width: 1119px) {
  .site-header__bar { gap: var(--s-3); }
  .nav { gap: 0; }
  .nav a, .nav__toggle { padding: .5rem .55rem; font-size: .95rem; }
  .header-actions { gap: var(--s-1); }
  .header-actions .btn { padding: .5rem .75rem; }
  .brand img { height: 2.1rem; max-width: 9rem; object-fit: contain; }
}
/* --- Hero ----------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 7vw, 5.5rem);
  background:
    radial-gradient(60rem 32rem at 82% -10%, var(--c-primary-soft), transparent 65%),
    radial-gradient(44rem 26rem at -5% 20%, var(--c-secondary-soft), transparent 60%),
    var(--c-canvas);
}
.hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 3.5rem;
  background: linear-gradient(to bottom, transparent, var(--c-surface));
  pointer-events: none;
}
.hero__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.hero__copy > * + * { margin-top: var(--s-4); }
.hero h1 { color: var(--c-strong); }
.hero h1 img { display: inline-block; height: clamp(2.4rem, 6vw, 4rem); width: auto; vertical-align: -.35em; }
.hero__cards { display: grid; gap: var(--s-4); margin-top: var(--s-5); }
.hero__card {
  padding: var(--s-4);
  background: rgba(255, 255, 255, .78);
  border: 1px solid var(--c-line); border-left: 4px solid var(--c-primary);
  border-radius: var(--r-md); box-shadow: var(--shadow-sm);
}
.hero__card h3 { font-size: 1.05rem; color: var(--c-strong); }
.hero__card p { margin-top: var(--s-2); font-size: .95rem; }

.hero__aside { display: grid; gap: var(--s-4); justify-items: start; }
/* The two screenshots are sized as shares of the row they sit in, never in rem
   or vw. 78 + 30 - 8 = 100, so the pair always spans its container exactly —
   which matters because that container is a phone's full width at one end and a
   narrow grid column beside the hero copy at the other. Absolute sizes fitted
   one of those and overflowed the other: 14vw on a 1024px laptop pushed the
   overlapping phone 67px off the right of the screen. */
.hero__shots { position: relative; display: flex; align-items: flex-end; }
.hero__shots img {
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  background: var(--c-surface);
}
.hero__shots img:first-child { max-width: 78%; }
.hero__shots img:last-child { width: 30%; margin-left: -8%; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); }

.trust { display: grid; gap: var(--s-4); margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.trust__item {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4);
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-md); box-shadow: var(--shadow-sm);
}
.trust__icon {
  display: grid; place-items: center;
  width: 3rem; height: 3rem; flex: none;
  color: var(--c-primary-ink); background: var(--c-primary);
  border-radius: var(--r-md);
}
.trust__item h4 { font-size: 1rem; color: var(--c-ink); }
.trust__item p { font-size: .85rem; color: var(--c-muted); }

@media (min-width: 768px) {
  .hero__cards, .trust { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
}
@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: 1.05fr .95fr; }
  .hero__aside { order: 2; justify-items: end; }
}
/* --- Generic card --------------------------------------------------------- */
.card {
  display: flex; flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--c-accent); }
/* A whole card can be a link — keep it looking like a card, not like text. */
a.card, a.card:hover { color: inherit; text-decoration: none; }
.card__body { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.card__media {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--c-primary-soft);
}
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease); }
.card:hover .card__media img { transform: scale(1.04); }
.card__foot {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4) var(--s-4);
  border-top: 1px solid var(--c-line);
}
.card__foot .btn { margin-left: auto; }

/* Solutions */
.solution { text-align: center; }
.solution .card__media { aspect-ratio: 1 / 1; border-radius: var(--r-lg); }
.solution h3 { font-size: 1.1rem; }
.solution p { font-size: .92rem; color: var(--c-muted); }

/* Products */
.product-card .card__media { aspect-ratio: 31 / 24; background: #fff; }
.product-card .card__media img { object-fit: contain; padding: var(--s-3); }
.product-card__tags {
  position: absolute; inset: var(--s-3) var(--s-3) auto; z-index: 2;
  display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: space-between;
}
.product-card__pack {
  position: absolute; right: var(--s-3); bottom: var(--s-3); z-index: 2;
  padding: .2rem .55rem; font-size: .72rem; font-weight: 800;
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-pill);
  color: var(--c-body);
}
.product-card h3 { font-size: 1.2rem; color: var(--c-ink); }
.product-card__tagline { font-size: .88rem; font-weight: 700; color: var(--c-primary); }
.product-card__text { font-size: .93rem; }
.benefits { display: grid; gap: var(--s-2); margin-top: var(--s-2); }
.benefits li { display: flex; gap: var(--s-2); font-size: .9rem; }
.benefits .ic { color: var(--c-accent); margin-top: .15rem; }
.price { display: flex; align-items: baseline; gap: var(--s-2); font-weight: 900; color: var(--c-strong); }
.price__mrp { font-size: .85rem; font-weight: 600; color: var(--c-muted); text-decoration: line-through; }

/* Values */
.value-card { position: relative; padding: var(--s-5) var(--s-4); text-align: left; }
.value-card__icon {
  display: grid; place-items: center;
  width: 3.25rem; height: 3.25rem; margin-bottom: var(--s-3);
  color: var(--c-primary-ink);
  background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
  border-radius: var(--r-md);
}
.value-card h3 { font-size: 1.15rem; color: var(--c-ink); }
.value-card p { margin-top: var(--s-2); font-size: .93rem; }
.value-card__rule { width: 2.5rem; height: 3px; margin-top: var(--s-4); border-radius: var(--r-pill); background: var(--c-secondary); }
/* --- About ---------------------------------------------------------------- */
.about__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.about__media { position: relative; }
.about__media img { border-radius: var(--r-xl); box-shadow: var(--shadow-lg); width: 100%; }
.about__media::before {
  content: ""; position: absolute; inset: auto -1rem -1rem auto;
  width: 60%; height: 60%; z-index: -1;
  background: var(--c-primary-soft); border-radius: var(--r-xl);
}
.about__point { display: flex; gap: var(--s-3); }
.about__point .trust__icon { width: 2.5rem; height: 2.5rem; border-radius: var(--r-sm); }
.about__point h3 { font-size: 1.05rem; color: var(--c-strong); }
.about__point p { margin-top: var(--s-1); font-size: .95rem; }
@media (min-width: 900px) { .about__grid { grid-template-columns: .9fr 1.1fr; } }

/* --- Vision / mission ----------------------------------------------------- */
.pillar {
  position: relative; overflow: hidden;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--r-xl);
}
.pillar__head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.pillar__icon {
  display: grid; place-items: center; width: 3rem; height: 3rem; flex: none;
  color: var(--c-dark); background: var(--c-highlight); border-radius: var(--r-md);
}
.pillar h3 { font-size: 1.25rem; letter-spacing: .02em; }
.pillar > p { color: rgba(255, 255, 255, .84); }
.pillar__list { display: grid; gap: var(--s-2); margin-top: var(--s-4); }
.pillar__list li { display: flex; align-items: flex-start; gap: var(--s-2); font-size: .95rem; }
.pillar__list .ic { color: var(--c-highlight); margin-top: .15rem; }
.pillar--mission .pillar__icon { background: var(--c-accent); color: var(--c-accent-ink); }

.vision-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-4);
  margin-top: clamp(2rem, 4vw, 3rem); padding: var(--s-5);
  text-align: center;
  background: rgba(255, 255, 255, .06);
  border: 1px dashed rgba(255, 255, 255, .28);
  border-radius: var(--r-xl);
}
.vision-cta h3 { font-size: 1.2rem; }

/* --- CTA band ------------------------------------------------------------- */
.cta-band {
  position: relative; overflow: hidden;
  padding-block: clamp(3rem, 7vw, 5rem);
  background: linear-gradient(135deg, var(--c-dark), var(--c-strong) 55%, var(--c-primary));
  color: rgba(255, 255, 255, .88);
  text-align: center;
}
.cta-band::before,
.cta-band::after {
  content: ""; position: absolute; border-radius: 50%;
  background: rgba(255, 255, 255, .07);
}
.cta-band::before { width: 22rem; height: 22rem; top: -8rem; left: -6rem; }
.cta-band::after { width: 16rem; height: 16rem; right: -5rem; bottom: -7rem; }
.cta-band .wrap { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; }
.cta-band h2 .mark { color: var(--c-highlight); }
.cta-band p { max-width: 40rem; margin-inline: auto; margin-top: var(--s-3); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; margin-top: var(--s-5); }
/* --- Footer --------------------------------------------------------------- */
.site-footer { background: var(--c-dark); color: rgba(255, 255, 255, .74); padding-top: clamp(2.5rem, 5vw, 4rem); }
.site-footer h4 { color: #fff; font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: var(--s-3); }
.site-footer a { color: rgba(255, 255, 255, .78); }
.site-footer a:hover { color: #fff; }
.footer__grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.footer__brand img { height: 2.6rem; width: auto; margin-bottom: var(--s-3); }
.footer__brand p { font-size: .93rem; max-width: 24rem; }
.footer__links li + li { margin-top: var(--s-2); }
.footer__links a { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 2.25rem; font-size: .93rem; }
.footer__links .ic { color: var(--c-accent); width: 1rem; height: 1rem; }
.footer__contact li { display: flex; gap: var(--s-3); font-size: .93rem; }
.footer__contact li + li { margin-top: var(--s-3); }
.footer__contact .ic { color: var(--c-highlight); margin-top: .2rem; }
.footer__contact strong { display: block; color: #fff; font-weight: 700; }
.socials { display: flex; gap: var(--s-2); margin-top: var(--s-4); }
.socials a {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  background: rgba(255, 255, 255, .1); border-radius: var(--r-md);
  transition: background-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.socials a:hover { background: var(--c-primary); transform: translateY(-2px); }
.footer__bottom {
  margin-top: clamp(2rem, 4vw, 3rem); padding-block: var(--s-4);
  /* Clears the home-bar area when the site is installed and run standalone. */
  padding-bottom: max(var(--s-4), env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: .85rem; text-align: center;
}
.footer__bottom p + p { margin-top: var(--s-2); font-size: .78rem; opacity: .72; }
@media (min-width: 768px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr; } }
@media (min-width: 1100px) { .footer__grid { grid-template-columns: 1.7fr 1fr 1fr 1.4fr; } }

/* --- Page header (inner pages) -------------------------------------------- */
.page-head {
  padding-block: clamp(2rem, 5vw, 3.5rem);
  background: radial-gradient(40rem 20rem at 15% -20%, var(--c-primary-soft), transparent 70%), var(--c-canvas);
  border-bottom: 1px solid var(--c-line);
}
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: .85rem; color: var(--c-muted); }
/* Small text, so the link needs a little height of its own to be a comfortable
   target on a touch screen — 22px of line box is under the 24px minimum. */
.crumbs a { color: var(--c-muted); padding-block: .2rem; }
.crumbs a:hover { color: var(--c-primary); }
.crumbs .ic { width: .9rem; height: .9rem; }
.page-head h1 { margin-top: var(--s-3); }
.page-head p { margin-top: var(--s-2); max-width: 44rem; }

/* --- Prose (legal pages, product descriptions) ---------------------------- */
.prose { max-width: 46rem; }
.prose > * + * { margin-top: var(--s-4); }
.prose h3 { margin-top: var(--s-6); font-size: 1.2rem; color: var(--c-strong); }
.prose h4 { margin-top: var(--s-5); }
.prose ul, .prose ol { padding-left: 1.35rem; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: var(--s-2); }
.prose a { text-decoration: underline; }
.prose strong { color: var(--c-ink); }
/* --- Product detail ------------------------------------------------------- */
.pd { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.pd__gallery { position: sticky; top: calc(var(--nav-h) + 1rem); display: grid; gap: var(--s-3); }
.pd__stage {
  display: grid; place-items: center;
  aspect-ratio: 31 / 24; padding: var(--s-5);
  background: var(--c-surface);
  border: 1px solid var(--c-line); border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
}
.pd__stage img { max-height: 100%; width: auto; object-fit: contain; }
.pd__thumbs { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pd__thumb {
  width: 4.5rem; height: 4.5rem; padding: var(--s-1);
  background: var(--c-surface); border: 1.5px solid var(--c-line); border-radius: var(--r-md);
  cursor: pointer;
}
.pd__thumb img { width: 100%; height: 100%; object-fit: contain; }
.pd__thumb[aria-pressed="true"] { border-color: var(--c-primary); }
.pd__head > * + * { margin-top: var(--s-3); }
.pd__meta { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.pd__section { margin-top: var(--s-6); }
.pd__section h2 { font-size: 1.35rem; }
.pd__section > * + * { margin-top: var(--s-4); }
.pd__ing { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pd__ing li {
  padding: .35rem .8rem; font-size: .88rem; font-weight: 700;
  color: var(--c-strong); background: var(--c-primary-soft);
  border: 1px solid var(--c-line); border-radius: var(--r-pill);
}
.pd__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
.pd__note {
  margin-top: var(--s-5); padding: var(--s-4);
  font-size: .9rem;
  background: var(--c-canvas); border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}
@media (min-width: 900px) { .pd { grid-template-columns: .95fr 1.05fr; } }

/* Accordion (FAQs) */
.acc { border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface); }
.acc + .acc { margin-top: var(--s-3); }
.acc summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  min-height: 3rem; padding: var(--s-3) var(--s-4);
  font-weight: 800; color: var(--c-ink); cursor: pointer; list-style: none;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary .ic { color: var(--c-primary); transition: transform var(--t-fast) var(--ease); }
.acc[open] summary .ic { transform: rotate(180deg); }
.acc__body { padding: 0 var(--s-4) var(--s-4); font-size: .95rem; }

/* --- Forms ---------------------------------------------------------------- */
.form { display: grid; gap: var(--s-4); }
.field { display: grid; gap: var(--s-2); }
.field > label { font-weight: 700; font-size: .92rem; color: var(--c-ink); }
.field__hint { font-size: .82rem; color: var(--c-muted); }
.input, .textarea, .select {
  width: 100%; min-height: 2.9rem; padding: .65rem .85rem;
  background: var(--c-surface); color: var(--c-ink);
  border: 1.5px solid var(--c-line); border-radius: var(--r-md);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.input:hover, .textarea:hover, .select:hover { border-color: var(--c-accent); }
.input:focus, .textarea:focus, .select:focus {
  outline: none; border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(var(--c-primary-rgb), .18);
}
.textarea { min-height: 8rem; resize: vertical; }
.field--error .input, .field--error .textarea, .field--error .select { border-color: #B42318; }
.field__error { display: flex; align-items: center; gap: var(--s-2); font-size: .85rem; font-weight: 700; color: #B42318; }
/* --- Alerts --------------------------------------------------------------- */
.alert {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-4);
  border: 1px solid var(--c-line); border-left-width: 4px;
  border-radius: var(--r-md); font-size: .93rem;
  background: var(--c-canvas);
}
.alert .ic { margin-top: .1rem; flex: none; }
.alert--ok   { border-left-color: var(--c-primary); background: var(--c-primary-soft); color: var(--c-strong); }
.alert--err  { border-left-color: #B42318; background: #FEF3F2; color: #912018; }
.alert--warn { border-left-color: var(--c-secondary); background: var(--c-secondary-soft); color: #7A4A00; }
.alert--info { border-left-color: var(--c-accent); }
.alert a { color: inherit; text-decoration: underline; }
.alert__list { margin-top: var(--s-2); padding-left: 1.1rem; list-style: disc; }

/* --- Contact page --------------------------------------------------------- */
.contact__grid { display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: start; }
.contact__card {
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-xl); box-shadow: var(--shadow-sm);
}
.contact__list li { display: flex; gap: var(--s-3); }
.contact__list li + li { margin-top: var(--s-4); }
.contact__list .ic { color: var(--c-primary); margin-top: .2rem; }
.contact__list strong { display: block; color: var(--c-ink); }
@media (min-width: 900px) { .contact__grid { grid-template-columns: 1.1fr .9fr; } }

/* --- Empty state ---------------------------------------------------------- */
.empty {
  padding: clamp(2rem, 5vw, 3.5rem); text-align: center;
  border: 1px dashed var(--c-line); border-radius: var(--r-xl);
  background: var(--c-canvas);
}
.empty .ic { width: 2.5rem; height: 2.5rem; color: var(--c-muted); margin-inline: auto; }
.empty h1, .empty h3 { margin-top: var(--s-3); }
.empty p { margin-top: var(--s-2); color: var(--c-muted); }

/* --- Phones ---------------------------------------------------------------
   The compact end of the scale, kept in one place and last in the file so it
   overrides cleanly. Only the layout rhythm tightens: the component steps
   (--s-1 to --s-4) are left alone so cards, buttons and badges keep the shape
   they were designed with. What gets cut is the air between bands, which is
   where a phone otherwise spends most of its scrolling.
   ------------------------------------------------------------------------- */
@media (max-width: 599px) {
  :root {
    --nav-h: 3.9rem;
    --gutter: .9rem;
    --s-5: 1.15rem;
    --s-6: 1.5rem;
    --s-7: 2.25rem;
    --s-8: 3rem;
    --s-9: 4rem;
  }
  .section { padding-block: 2.5rem; }
  .section-head { margin-bottom: 1.75rem; }
  h1 { font-size: clamp(1.8rem, 7vw, 2.45rem); }
  .brand img { height: 2.05rem; }

  /* Stacked, full-width actions. Two buttons sharing a 360px row leave both
     narrower than the 44px target they need and the row reads as ragged. */
  .hero__ctas, .cta-band__actions, .pd__actions { flex-direction: column; }
  .hero__ctas > *, .cta-band__actions > *, .pd__actions > * { width: 100%; }
  .btn--lg { min-height: 3rem; padding: .8rem 1.25rem; font-size: 1rem; }

  .value-card { padding: var(--s-4); }
  .pd__stage { padding: var(--s-4); }
  .pd__thumb { width: 3.75rem; height: 3.75rem; }
  .footer__bottom { font-size: .8rem; }
}

/* --- Motion --------------------------------------------------------------- */
/* Scoped to html.js (set by the inline snippet in tpl/header.php) so that with
   JavaScript off every .reveal block is simply visible instead of stuck at 0. */
.js .reveal { opacity: 0; transform: translateY(14px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
.reveal.is-in:nth-child(2) { transition-delay: 70ms; }
.reveal.is-in:nth-child(3) { transition-delay: 140ms; }
.reveal.is-in:nth-child(4) { transition-delay: 210ms; }

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

/* --- Print ---------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .cta-band, .btn, .burger { display: none !important; }
  body { color: #000; background: #fff; }
  .section { padding-block: 1rem; }
}