/* ==========================================================================
   SKINSENSUAL — brand theme
   Section layout follows the "Skinsensual South Africa" design canvas; the
   identity layer follows skinsensual.co itself: white ground, black ink, a
   single typeface (Instrument Sans) at 400/500, no letterspacing and no
   uppercase transforms. The one accent is #405868 — the colour of the
   official wordmark, sampled from assets/img/brand/wordmark.webp.
   ========================================================================== */

:root {
  /* Ground & ink */
  --cream: #FFFFFF;
  --ink: #000000;
  --ink-soft: #333333;
  --body: #444444;
  --muted: #666666;
  --sand: #8A8A8A;

  /* Panels */
  --warm: #F6F6F6;
  --warm-deep: #ECECEC;
  --line: #E4E4E4;
  --line-warm: #DEDEDE;
  --line-warm-2: #D6D6D6;
  --line-chip: #DDDDDD;
  --line-input: #CFCFCF;
  --hover-warm: #F0F0F0;

  /* Accent — the wordmark's own slate */
  --teal: #405868;
  --teal-light: #8AA0AD;

  /* On dark */
  --on-dark: #FFFFFF;
  --on-dark-soft: #B4B4B4;
  --line-dark: #2E2E2E;
  --line-dark-2: #474747;
  --foot-note: #777777;

  /* Type */
  --font-display: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Metrics */
  --maxw: 1240px;
  --pad: 32px;
  --section-y: 96px;

  /* Legacy aliases kept so older inline styles keep resolving */
  --pine-deep: var(--ink);
  --gold-tint: var(--teal-light);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-wrap: pretty;
  overflow-x: hidden;
}

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

a { color: var(--ink); text-decoration: none; transition: color .2s ease, opacity .2s ease; }
a:hover { color: var(--teal); }

input, select, textarea, button { font-family: inherit; font-size: inherit; }

::selection { background: var(--ink); color: var(--cream); }

:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

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

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: normal;
  margin: 0;
}

h1 { font-size: clamp(34px, 4.4vw, 56px); line-height: 1.12; }
h2 { font-size: clamp(26px, 3vw, 40px); line-height: 1.18; }
h3 { font-size: 24px; font-weight: 400; line-height: 1.2; letter-spacing: normal; }
h4 { font-size: 16px; font-weight: 500; letter-spacing: normal; }

p { margin: 0 0 18px; }
p:last-child { margin-bottom: 0; }

em { font-style: normal; color: var(--teal); }

.eyebrow {
  display: block;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: normal;
  color: var(--sand);
  margin-bottom: 14px;
}

.lead {
  font-size: 17px;
  line-height: 1.75;
  color: var(--body);
  font-weight: 400;
  max-width: 60ch;
}

.mt-0 { margin-top: 0; }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

section { padding: var(--section-y) 0; }

.bg-warm, .bg-cream {
  background: var(--warm);
  border-top: 1px solid var(--line-warm);
  border-bottom: 1px solid var(--line-warm);
}

.grid { display: grid; gap: 34px 26px; }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 72px;
  align-items: center;
}

/* Section headers ---------------------------------------------------------- */

.section-head { margin-bottom: 34px; }
.section-head h2 { margin: 0; }
.section-head .lead { margin-top: 18px; }

.section-head.center {
  text-align: center;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.section-head.center .lead { margin-left: auto; margin-right: auto; }

.section-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  padding-bottom: 26px;
  margin-bottom: 34px;
}
.section-head-row .section-head { margin-bottom: 0; }

/* Rule variant used by the canvas: eyebrow + h2 left, note right ------------ */

.head-rule {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  padding-bottom: 26px;
}
.head-rule h2 { margin: 0; }
.head-rule .note {
  margin: 0;
  max-width: 38ch;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--muted);
  font-weight: 400;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: normal;
  line-height: 1;
  padding: 13px 26px;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
}

.btn svg { width: 15px; height: 15px; flex: none; }

.btn-primary, .btn-gold {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}
.btn-primary:hover, .btn-gold:hover {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}

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

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

.btn-whatsapp {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-chip);
}
.btn-whatsapp:hover { border-color: var(--teal); color: var(--teal); }

.btn-sm { padding: 9px 18px; font-size: 13px; }

.btn[disabled] { opacity: .5; cursor: default; }

/* --------------------------------------------------------------------------
   Ticker / announcement bar
   -------------------------------------------------------------------------- */

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

.ticker {
  background: var(--ink);
  color: var(--on-dark);
  overflow: hidden;
  padding: 11px 0;
}
.ticker-track {
  display: flex;
  width: max-content;
  animation: ss-marquee 44s linear infinite;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: normal;
  white-space: nowrap;
}
.ticker-track > span { padding-right: 0; }
.tick-sep { font-style: normal; color: var(--teal-light); padding: 0 6px; }

/* Marquee band under the hero */
.marquee-band {
  background: var(--ink);
  color: var(--warm);
  overflow: hidden;
  padding: 18px 0;
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: ss-marquee 32s linear infinite;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: normal;
}
.marquee-track > div {
  display: flex;
  gap: 56px;
  padding-right: 56px;
}

@media (prefers-reduced-motion: reduce) {
  .ticker-track, .marquee-track { animation: none; }
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.site-header .container {
  padding-top: 12px;
  padding-bottom: 12px;
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo { display: flex; align-items: center; gap: 12px; }

/* Official wordmark. Height-locked so the header rhythm matches the design's
   19px letterspaced logotype; the file is a wide 1080x134 transparent WebP. */
.logo-mark {
  height: 19px;
  width: auto;
  display: block;
  align-self: flex-start; /* a stretched flex item would widen `width:auto` */
}
.site-footer .logo-mark { height: 18px; }
.logo-word {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 19px;
  letter-spacing: .34em;
  line-height: 1;
}
.logo-word .dot { color: var(--teal); }
.logo-sub {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: normal;
  color: var(--sand);
}

.main-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 14px 26px;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: normal;
}
.main-nav a { position: relative; padding: 2px 0; }
.main-nav a.active { color: var(--teal); }
.main-nav a.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: var(--teal);
}

.main-nav .nav-cta {
  padding: 10px 20px;
  font-size: 14px;
  letter-spacing: normal;
  color: var(--cream);
}
.main-nav .nav-cta:hover { color: #fff; }

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

.header-phone {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
  text-align: right;
}
.header-phone small {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: normal;
  color: var(--sand);
}
.header-phone a { font-size: 13.5px; font-weight: 400; }

.header-cta .btn { padding: 10px 20px; font-size: 14px; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0 8px;
  background: none;
  border: 1px solid var(--line);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 1px;
  background: var(--ink);
  transition: transform .25s ease, opacity .25s ease;
}

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

.hero {
  position: relative;
  border-bottom: 1px solid var(--line);
  padding: 0;
}
.hero .container {
  max-width: none;
  padding: 0;
  min-height: 640px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: stretch;
}
.hero .container > div:first-child {
  min-width: 0;
  padding: 104px 56px 104px max(var(--pad), calc((100vw - var(--maxw)) / 2));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
}
.hero h1 { margin: 0; }
.hero .lead { margin: 0; max-width: 44ch; }

.hero-badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: normal;
  color: var(--sand);
}
.hero-badge .dot { display: none; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 6px;
}

.hero-certs {
  display: flex;
  gap: 34px;
  flex-wrap: wrap;
  padding-top: 22px;
  margin-top: 10px;
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: normal;
  color: var(--sand);
}
.cert-chip { display: inline-flex; align-items: center; gap: 8px; }
.cert-chip svg { width: 14px; height: 14px; color: var(--teal-light); }

.hero-visual {
  position: relative;
  min-width: 0;
  min-height: 520px;
  background: var(--warm);
  overflow: hidden;
}
.arch-frame, .hero-visual .arch-frame { position: absolute; inset: 0; }
.arch-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-float { display: none; }

/* --------------------------------------------------------------------------
   Animated hero
   The brand's own home page opens on a moving product banner. This is the same
   idea built from our packshots: the copy arrives line by line, the products
   rise into place one after another, then drift very slightly so the panel
   never looks frozen. Everything is CSS, so nothing waits on JavaScript and
   there is no video to download.
   -------------------------------------------------------------------------- */

.hero-scene {
  position: absolute;
  inset: 0;
  /* A whisper of the wordmark slate keeps the white packshots off a flat white
     ground without introducing a second brand colour. */
  background:
    radial-gradient(120% 90% at 72% 30%, rgba(64, 88, 104, .10), transparent 60%),
    radial-gradient(80% 70% at 25% 85%, rgba(64, 88, 104, .06), transparent 62%),
    var(--warm);
}

.hero-scene .hp {
  position: absolute;
  margin: 0;
  /* The packshots are rectangles photographed on white, not cut-outs.
     Multiplying them into the ground drops the white away and leaves the
     product, so three flat photos read as one arranged scene. The shadows
     are already in the photography, so no filter is added on top. */
  mix-blend-mode: multiply;
}
.hero-scene .hp img { width: 100%; height: auto; display: block; }

.hero-scene .hp-1 { left: 1%;   bottom: -2%; width: 40%; z-index: 3; }
.hero-scene .hp-2 { right: 0;   bottom: 1%;  width: 37%; z-index: 2; }
.hero-scene .hp-3 { left: 31%;  top: -4%;    width: 31%; z-index: 1; }

@keyframes ss-rise {
  from { opacity: 0; transform: translateY(38px) scale(.94); }
  to   { opacity: 1; transform: none; }
}
@keyframes ss-drift {
  from { transform: translateY(0); }
  to   { transform: translateY(-14px); }
}
@keyframes ss-lift {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
@keyframes ss-wipe {
  from { opacity: 0; transform: translateY(26px); clip-path: inset(0 0 100% 0); }
  to   { opacity: 1; transform: none; clip-path: inset(0 0 -20% 0); }
}

/* The packs rise in, then hand over to a slow drift that alternates forever. */
.hero.is-animated .hp {
  animation:
    ss-rise .9s cubic-bezier(.22, .8, .3, 1) backwards,
    ss-drift 6s ease-in-out infinite alternate;
}
.hero.is-animated .hp-1 { animation-delay: .30s, 1.2s; }
.hero.is-animated .hp-2 { animation-delay: .46s, 1.9s; }
.hero.is-animated .hp-3 { animation-delay: .62s, 2.6s; }

.hero.is-animated .hero-badge   { animation: ss-lift .7s ease-out .05s backwards; }
.hero.is-animated h1            { animation: ss-wipe .9s cubic-bezier(.22, .8, .3, 1) .15s backwards; }
.hero.is-animated .lead         { animation: ss-lift .8s ease-out .38s backwards; }
.hero.is-animated .hero-actions { animation: ss-lift .8s ease-out .52s backwards; }
.hero.is-animated .hero-certs   { animation: ss-lift .8s ease-out .66s backwards; }

@media (prefers-reduced-motion: reduce) {
  .hero.is-animated .hp,
  .hero.is-animated .hero-badge,
  .hero.is-animated h1,
  .hero.is-animated .lead,
  .hero.is-animated .hero-actions,
  .hero.is-animated .hero-certs { animation: none; }
}

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

/* --------------------------------------------------------------------------
   Stats band
   -------------------------------------------------------------------------- */

.stats-band {
  border-bottom: 1px solid var(--line);
  background: var(--cream);
}
.stats-band .container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background: var(--line);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  padding: 0;
  max-width: var(--maxw);
}
.stat {
  background: var(--cream);
  padding: 34px 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.stat strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 40px;
  line-height: 1;
}
.stat span {
  font-size: 13.5px;
  color: var(--muted);
  font-weight: 400;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Product cards
   -------------------------------------------------------------------------- */

.product-card {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.product-media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  background: var(--warm);
  overflow: hidden;
}
.product-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.product-card:hover .product-media img { transform: scale(1.03); }

/* Official packshots are shot full-frame on white — contain them so nothing
   is cropped, and let the tile carry the white instead of the warm ground. */
.product-media.is-photo { background: #fff; border: 1px solid var(--line); }
.product-media.is-photo img { object-fit: contain; padding: 14px; }
.product-card:hover .product-media.is-photo img { transform: scale(1.04); }

.product-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(255, 255, 255, .92);
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: normal;
  padding: 6px 10px;
  pointer-events: none;
  color: var(--ink);
}
/* The chip needs an edge once the tile behind it is white. */
.product-media.is-photo .product-tag {
  top: 11px;
  left: 11px;
  background: var(--cream);
  border: 1px solid var(--line);
}

.product-body {
  padding: 18px 2px 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
}
.product-body h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: 0;
}
.product-vol {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--sand);
  white-space: nowrap;
}
.product-head-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}
.product-body p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
  font-weight: 400;
}
.product-actives {
  margin-top: auto;
  padding-top: 12px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: normal;
  color: var(--teal);
}
.product-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 14px;
}

/* Category filter ---------------------------------------------------------- */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 26px 0 34px;
}
.filter-bar a, .filter-bar button {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: normal;
  padding: 11px 20px;
  border: 1px solid var(--line-chip);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: all .2s ease;
  line-height: 1;
}
.filter-bar a:hover, .filter-bar button:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.filter-bar .is-active, .filter-bar a.is-active, .filter-bar button.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
}
.filter-bar .count { opacity: .5; margin-left: 6px; font-size: 12px; }

/* Category blocks on /products -------------------------------------------- */

.cat-block { margin-bottom: 72px; }
.cat-block:last-child { margin-bottom: 0; }
.cat-anchor { scroll-margin-top: 120px; }

.cat-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 20px;
  margin-bottom: 34px;
}
.cat-block-head h2 { font-size: clamp(24px, 2.6vw, 34px); }
.cat-block-head small {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: normal;
  color: var(--sand);
}

/* Category tiles on the home page ------------------------------------------ */

.cat-tile {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: var(--cream);
  transition: border-color .25s ease;
}
.cat-tile:hover { border-color: var(--ink); }
.cat-art {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--warm);
  overflow: hidden;
}
.cat-art img { width: 100%; height: 100%; object-fit: cover; }
.cat-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 22px;
  flex: 1;
}
.cat-body h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 17px;
  letter-spacing: 0;
}
.cat-blurb { font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.cat-count {
  margin-top: auto;
  padding-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: normal;
  color: var(--teal);
}
.cat-count svg { width: 14px; height: 14px; }

/* --------------------------------------------------------------------------
   Routines — hairline grid
   -------------------------------------------------------------------------- */

.routines { padding-top: 0; }

.rule-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.rule-grid.tight { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.routine-card {
  background: var(--cream);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 200px;
  transition: background .2s ease;
}
.routine-card:hover { background: var(--hover-warm); }
.routine-num {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: normal;
  color: var(--sand);
}
.routine-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
}
.routine-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
  font-weight: 400;
}
.routine-steps {
  margin-top: auto;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: normal;
  color: var(--teal);
}
.routine-steps span:not(:last-child)::after { content: " → "; color: var(--teal-light); }

/* The markets we supply --------------------------------------------------- */

/* The row rarely divides evenly, so the rules are drawn on the cells rather
   than by a background showing through the gaps — a short last row then ends
   cleanly instead of leaving a filled empty square. */
.country-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  background: var(--cream);
  border: 0;
}
.country-cell {
  background: var(--cream);
  outline: 1px solid var(--line);
  padding: 20px 22px;
  font-family: var(--font-display);
  font-size: 16px;
  transition: background .2s ease;
}
.country-cell:hover { background: var(--hover-warm); }

/* Numbered process cells (04 — Partnership steps) --------------------------- */

.step-cell {
  background: var(--cream);
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.step-cell .n {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 34px;
  line-height: 1;
  color: var(--teal-light);
}
.step-cell h4 { margin: 0; }
.step-cell p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--muted);
  font-weight: 400;
}

/* --------------------------------------------------------------------------
   About split with stats
   -------------------------------------------------------------------------- */

.about-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 72px;
  align-items: center;
}
.about-media {
  position: relative;
  aspect-ratio: 5 / 4;
  background: var(--warm-deep);
  overflow: hidden;
}
.about-media img { width: 100%; height: 100%; object-fit: cover; }
.about-copy { display: flex; flex-direction: column; gap: 22px; }
.about-copy h2 { margin: 0; font-size: clamp(26px, 3vw, 38px); line-height: 1.18; }
.about-copy p { margin: 0; font-size: 16px; line-height: 1.8; color: var(--ink-soft); font-weight: 400; }

.figure-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  padding-top: 14px;
  border-top: 1px solid var(--line-warm-2);
}
.figure-row .fig-n {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 40px;
  line-height: 1;
}
.figure-row .fig-l { font-size: 13.5px; color: var(--muted); font-weight: 400; }

/* --------------------------------------------------------------------------
   Tier cards
   -------------------------------------------------------------------------- */

.tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 26px;
}
.tier {
  border: 1px solid var(--line);
  background: #fff;
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.tier .kicker {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: normal;
  color: var(--teal);
}
.tier h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.2;
}
.tier > p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--muted); font-weight: 400; }
.tier .hr { height: 1px; background: var(--line); margin: 4px 0; }
.tier ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.tier li {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  font-weight: 400;
}
.tier li::before { content: "—"; color: var(--teal-light); flex: none; }
.tier .moq {
  margin-top: auto;
  padding-top: 16px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: normal;
  color: var(--sand);
}

/* --------------------------------------------------------------------------
   Dark "apply" section
   -------------------------------------------------------------------------- */

.dark-section {
  background: var(--ink);
  color: var(--on-dark);
  padding: 0;
}
.dark-section .container {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 80px;
  align-items: start;
}
.dark-section .eyebrow { color: var(--teal-light); }
.dark-section h2 { color: var(--cream); font-size: clamp(26px, 3vw, 38px); line-height: 1.18; }
.dark-intro { display: flex; flex-direction: column; gap: 22px; }
.dark-intro > p { margin: 0; font-size: 15.5px; line-height: 1.8; color: var(--on-dark-soft); font-weight: 400; }

.dark-contact {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 12px;
  margin-top: 8px;
  border-top: 1px solid var(--line-dark);
  font-size: 14px;
  color: var(--on-dark-soft);
  font-weight: 400;
}
.dark-contact a { color: var(--on-dark); border-bottom: 1px solid var(--line-dark-2); }
.dark-contact a:hover { color: var(--teal-light); border-color: var(--teal-light); }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.form-wrap {
  background: var(--cream);
  color: var(--ink);
  border: 1px solid var(--line);
  padding: 44px 42px;
}
.dark-section .form-wrap { border: 0; }
.form-wrap h2 { font-size: 26px; font-weight: 400; margin-bottom: 8px; }

.form-kicker {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: normal;
  color: var(--sand);
  margin-bottom: 22px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field.full { grid-column: 1 / -1; }

.field label {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: normal;
  color: var(--muted);
}
.field .req { color: var(--teal); }

.field input,
.field select,
.field textarea {
  border: 0;
  border-bottom: 1px solid var(--line-input);
  background: none;
  padding: 10px 0;
  font-size: 15px;
  color: var(--ink);
  letter-spacing: 0;
  text-transform: none;
  outline: none;
  border-radius: 0;
  transition: border-color .2s ease;
  width: 100%;
}
.field textarea { resize: vertical; min-height: 96px; line-height: 1.6; }
.field select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.field input:focus,
.field select:focus,
.field textarea:focus { border-bottom-color: var(--teal); }
.field input::placeholder, .field textarea::placeholder { color: #B4AFA7; }

.form-foot {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 26px;
}
.form-foot .btn { padding: 14px 28px; }

.form-note { font-size: 14px; color: var(--sand); font-weight: 400; }

.form-msg { margin-top: 18px; font-size: 14px; line-height: 1.6; }
.form-msg:empty { display: none; }
.form-msg.ok { color: var(--teal); border-left: 2px solid var(--teal); padding-left: 14px; }
.form-msg.err { color: #A5442F; border-left: 2px solid #A5442F; padding-left: 14px; }

/* Wholesale order rows ----------------------------------------------------- */

.order-rows { display: flex; flex-direction: column; gap: 14px; }
.order-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px 34px;
  gap: 14px;
  align-items: end;
}
.order-row .rm {
  background: none;
  border: 1px solid var(--line-input);
  color: var(--sand);
  height: 38px;
  cursor: pointer;
  line-height: 1;
  font-size: 18px;
  transition: all .2s ease;
}
.order-row .rm:hover { border-color: var(--ink); color: var(--ink); }
.add-row-btn { align-self: flex-start; }

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

.faq-split {
  display: grid;
  grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
  gap: 64px;
  align-items: start;
}
.faq-split > h2 { margin: 0; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.18; }

.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%;
  background: none;
  border: 0;
  padding: 24px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 400;
  color: var(--ink);
}
.faq-q:hover { color: var(--teal); }
.faq-q .ic {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  color: var(--sand);
  transition: transform .25s ease;
  flex: none;
}
.faq-item.open .faq-q .ic { transform: rotate(45deg); }
.faq-a { display: none; }
.faq-item.open .faq-a { display: block; }
.faq-a p {
  margin: 0;
  padding: 0 0 24px;
  max-width: 70ch;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--muted);
  font-weight: 400;
}

/* --------------------------------------------------------------------------
   Page hero (interior pages)
   -------------------------------------------------------------------------- */

.page-hero {
  border-bottom: 1px solid var(--line);
  padding: 72px 0 60px;
}
.page-hero h1 { margin: 0 0 20px; }
.page-hero .lead { margin: 0; }
.page-hero .updated {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: normal;
  color: var(--sand);
  margin: 0;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: normal;
  color: var(--sand);
  margin-bottom: 26px;
}
.breadcrumb a { color: var(--sand); }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb .sep { color: var(--line-chip); }

/* --------------------------------------------------------------------------
   Product detail
   -------------------------------------------------------------------------- */

.product-detail { padding-top: 56px; }
.product-detail .container {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 72px;
  align-items: start;
}

.pd-gallery { position: sticky; top: 110px; }
.pd-media {
  aspect-ratio: 4 / 5;
  background: var(--warm);
  overflow: hidden;
}
.pd-media img { width: 100%; height: 100%; object-fit: cover; }
.pd-media.is-photo { background: #fff; border: 1px solid var(--line); }
.pd-media.is-photo img { object-fit: contain; padding: 26px; }
.pd-note {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--sand);
  font-weight: 400;
}

.pd-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.pd-thumb {
  aspect-ratio: 1 / 1;
  padding: 0;
  background: #fff;
  border: 1px solid var(--line);
  cursor: pointer;
  overflow: hidden;
  transition: border-color .2s ease;
}
.pd-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.pd-thumb:hover { border-color: var(--sand); }
.pd-thumb.is-active { border-color: var(--ink); }

.pd-info h1 { font-size: clamp(26px, 3vw, 38px); margin: 0 0 14px; }
.pd-sub {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 22px;
}
.pd-info > p { font-size: 15.5px; line-height: 1.8; color: var(--ink-soft); }

.pd-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: normal;
  padding: 7px 12px;
  border: 1px solid var(--line-chip);
  color: var(--muted);
}
.chip svg { width: 13px; height: 13px; }
.chip.gold { border-color: var(--ink); color: var(--ink); }

.pd-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 30px 0 8px;
}

.pd-section {
  margin-top: 44px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}
.pd-section h2 {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: normal;
  color: var(--sand);
  margin-bottom: 20px;
}

.benefit-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.benefit-list li {
  display: flex;
  gap: 12px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-soft);
}
.benefit-list svg { width: 17px; height: 17px; flex: none; margin-top: 3px; color: var(--teal); }

.ing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.ing-card {
  background: var(--cream);
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.ing-card strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 14.5px;
  letter-spacing: normal;
}
.ing-card .pct {
  display: inline-block;
  margin-left: 6px;
  font-size: 13px;
  letter-spacing: normal;
  color: var(--teal);
}
.ing-card span { font-size: 13px; line-height: 1.6; color: var(--muted); }

.spec-table { width: 100%; border-collapse: collapse; }
.spec-table tr { border-bottom: 1px solid var(--line); }
.spec-table tr:first-child { border-top: 1px solid var(--line); }
.spec-table th, .spec-table td {
  text-align: left;
  vertical-align: top;
  padding: 15px 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
}
.spec-table th {
  width: 170px;
  padding-right: 20px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: normal;
  color: var(--sand);
}
.spec-table td { color: var(--ink-soft); }

.related { border-top: 1px solid var(--line); }

/* --------------------------------------------------------------------------
   Content blocks reused across interior pages
   -------------------------------------------------------------------------- */

.feature {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.f-icon, .i-icon, .p-ic {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-chip);
  color: var(--teal);
  flex: none;
}
.f-icon svg, .i-icon svg, .p-ic svg { width: 19px; height: 19px; }
.feature h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0;
  margin: 0;
}
.feature p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--muted); }

.info-card {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  border: 1px solid var(--line);
  background: var(--cream);
  padding: 24px 22px;
}
.info-card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: normal;
  margin: 0 0 4px;
}
.info-card p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); }

.proof-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.proof-card {
  background: var(--cream);
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.proof-card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  margin: 0;
}
.proof-card p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--muted); }

.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1px;
  background: var(--line-warm);
  border: 1px solid var(--line-warm);
}
.why-cell {
  background: var(--warm);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.why-num {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: normal;
  color: var(--sand);
}
.why-cell h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  margin: 0;
}
.why-cell p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--ink-soft); }

.value-list { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--line); }
.value-list .v {
  display: flex;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.value-list .v > svg { width: 17px; height: 17px; flex: none; margin-top: 4px; color: var(--teal); }
.value-list .v strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 16px;
  margin-bottom: 5px;
}
.value-list .v span { font-size: 14px; line-height: 1.7; color: var(--muted); }

.steps { display: flex; flex-direction: column; gap: 0; margin-top: 24px; counter-reset: st; border-top: 1px solid var(--line); }
.steps .step {
  display: flex;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.steps .num {
  counter-increment: st;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1;
  color: var(--teal-light);
  flex: none;
  min-width: 44px;
}
.steps .num::before { content: "0" counter(st); }
.steps h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: normal;
  margin: 0 0 5px;
}
.steps p { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--muted); }

.cta-duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 26px;
}
.partner-card {
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.partner-card.pine { background: var(--ink); color: var(--on-dark); }
.partner-card.gold { background: var(--warm); color: var(--ink); border: 1px solid var(--line-warm); }
.partner-card h2 { font-size: clamp(26px, 2.8vw, 34px); margin: 0; }
.partner-card.pine h2 { color: var(--cream); }
.partner-card.pine em { color: var(--teal-light); }
.partner-card p { margin: 0; font-size: 15px; line-height: 1.75; }
.partner-card.pine p { color: var(--on-dark-soft); }
.partner-card.gold p { color: var(--ink-soft); }
.partner-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.partner-card li { display: flex; gap: 11px; font-size: 14px; line-height: 1.55; }
.partner-card li svg { width: 16px; height: 16px; flex: none; margin-top: 3px; }
.partner-card.pine li svg { color: var(--teal-light); }
.partner-card.gold li svg { color: var(--teal); }
.partner-card .btn { align-self: flex-start; margin-top: 8px; }

.visual-frame, .map-frame {
  aspect-ratio: 5 / 4;
  background: var(--warm);
  border: 1px solid var(--line);
  overflow: hidden;
}
.visual-frame img, .map-frame iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  display: block;
}

.prose p { font-size: 15.5px; line-height: 1.8; color: var(--ink-soft); }
.prose h2 { margin-bottom: 20px; }

/* Legal pages -------------------------------------------------------------- */

.legal { max-width: 78ch; }
.legal h2 {
  font-size: 22px;
  font-weight: 400;
  margin: 48px 0 16px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.legal h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.legal h3 { font-size: 17px; font-weight: 400; margin: 28px 0 12px; }
.legal p, .legal li { font-size: 15px; line-height: 1.85; color: var(--ink-soft); }
.legal ul, .legal ol { padding-left: 20px; margin: 0 0 18px; }
.legal li { margin-bottom: 8px; }
.legal a { border-bottom: 1px solid var(--line-input); }

/* --------------------------------------------------------------------------
   Global CTA + footer
   -------------------------------------------------------------------------- */

.global-cta {
  background: var(--ink);
  color: var(--on-dark);
  text-align: center;
  padding: 88px 0;
}
.global-cta h2 { color: var(--cream); margin: 0 0 18px; }
.global-cta em { color: var(--teal-light); }
.global-cta p {
  max-width: 56ch;
  margin: 0 auto 32px;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--on-dark-soft);
}
.global-cta .btns {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}
.global-cta .btn-whatsapp { border-color: var(--line-dark-2); color: var(--on-dark); }
.global-cta .btn-whatsapp:hover { border-color: var(--teal-light); color: var(--teal-light); }

.site-footer {
  background: var(--warm);
  border-top: 1px solid var(--line-warm);
}
.footer-main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 48px;
  padding: 72px 0 34px;
}
.footer-about { display: flex; flex-direction: column; gap: 14px; }
.footer-about .logo-word { font-size: 18px; }
.footer-about p {
  margin: 0;
  max-width: 34ch;
  font-size: 14px;
  line-height: 1.75;
  color: #5F6265;
}
.footer-social { display: flex; gap: 12px; margin-top: 4px; }
.footer-social a {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-warm-2);
  color: var(--ink);
}
.footer-social a:hover { background: var(--ink); color: var(--warm); border-color: var(--ink); }
.footer-social svg { width: 17px; height: 17px; }

.site-footer h4 {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: normal;
  color: var(--sand);
  margin: 0 0 16px;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.site-footer ul a, .site-footer ul span { font-size: 14px; font-weight: 400; color: #5F6265; }
.site-footer ul a:hover { color: var(--teal); }

.footer-contact li { display: flex; gap: 11px; align-items: flex-start; }
.footer-contact svg { width: 15px; height: 15px; flex: none; margin-top: 4px; color: var(--sand); }

.footer-disclaimer {
  border-top: 1px solid var(--line-warm-2);
  padding: 26px 0;
}
.footer-disclaimer p {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--foot-note);
  font-weight: 400;
}

.footer-bottom { border-top: 1px solid var(--line-warm-2); }
.footer-bottom .container {
  padding-top: 22px;
  padding-bottom: 40px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--foot-note);
  font-weight: 400;
}
.footer-legal { display: flex; gap: 22px; }
.footer-legal a { color: var(--foot-note); }
.footer-legal a:hover { color: var(--ink); }

/* Floating WhatsApp -------------------------------------------------------- */

.wa-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 50;
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: var(--cream);
  transition: background .2s ease;
}
.wa-float:hover { background: var(--teal); color: #fff; }
.wa-float svg { width: 22px; height: 22px; }

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

.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal.d1 { transition-delay: .08s; }
.js .reveal.d2 { transition-delay: .16s; }
.js .reveal.d3 { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

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

@media (max-width: 1100px) {
  .dark-section .container,
  .product-detail .container { gap: 56px; }
  .split, .about-split { gap: 52px; }
}

@media (max-width: 980px) {
  :root { --section-y: 72px; }

  .hero .container { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hero .container > div:first-child { padding: 72px var(--pad); }
  .hero-visual { min-height: 460px; }

  /* Stacked, the panel is wide and short, so sizing the packs by width would
     run them off the bottom. Drive them from the panel's height instead. */
  .hero-scene .hp { width: auto; }
  .hero-scene .hp img { width: auto; height: 100%; }
  .hero-scene .hp-1 { height: 84%; bottom: -2%; left: 8%; }
  .hero-scene .hp-2 { height: 72%; bottom: 2%;  right: 8%; }
  .hero-scene .hp-3 { height: 56%; top: 2%;     left: 41%; }

  .split,
  .about-split,
  .faq-split,
  .dark-section .container,
  .product-detail .container { grid-template-columns: minmax(0, 1fr); gap: 44px; }

  .pd-gallery { position: static; max-width: 420px; }

  .form-wrap { padding: 34px 28px; }
}

@media (max-width: 860px) {
  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    padding: 8px var(--pad) 20px;
  }
  .main-nav.open { display: flex; }
  .main-nav a {
    padding: 15px 0;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
  }
  .main-nav a.active::after { display: none; }
  .main-nav .nav-cta {
    justify-content: center;
    margin-top: 16px;
    border-bottom: 0;
    padding: 15px 20px;
  }

  .site-header .container { position: relative; }
  .nav-toggle { display: flex; }
  .header-phone { display: none; }

  body.nav-open { overflow: hidden; }
}

@media (max-width: 700px) {
  :root { --pad: 20px; --section-y: 60px; }

  body { font-size: 15.5px; }

  .form-grid { grid-template-columns: 1fr; }
  .field.full { grid-column: auto; }

  .order-row { grid-template-columns: minmax(0, 1fr) 90px 34px; gap: 10px; }

  .hero-certs { gap: 14px 22px; font-size: 13px; }
  .hero .container > div:first-child { gap: 22px; }

  .marquee-track { font-size: 14px; }
  .marquee-track > div { gap: 36px; padding-right: 36px; }

  .partner-card { padding: 34px 26px; }
  .form-wrap { padding: 28px 22px; }
  .routine-card, .why-cell, .proof-card { padding: 26px 22px; }
  .tier { padding: 28px 24px; }

  .figure-row { grid-template-columns: 1fr; gap: 20px; }

  .spec-table th, .spec-table td { display: block; width: auto; padding-bottom: 4px; }
  .spec-table td { padding-top: 0; padding-bottom: 15px; }

  .global-cta { padding: 64px 0; }
  .footer-main { padding-top: 52px; gap: 36px; }
  .wa-float { right: 16px; bottom: 16px; width: 48px; height: 48px; }
}