/* ==========================================================================
   Purolix — brand stylesheet (v3)
   Mobile-first. Light theme: warm white surfaces, navy type, gold accents.
   Fraunces display serif + Plus Jakarta Sans body.
   Breakpoints: 640px (large phone / small tablet), 900px (tablet landscape / laptop), 1100px (desktop)
   ========================================================================== */

:root {
  --navy-900: #0f1f29;
  --navy-800: #16303d;
  --navy-700: #1f4253;
  --gold-600: #8a6d36;
  --gold-500: #a8894f;
  --gold-400: #c3a86a;
  --gold-300: #d9c18d;
  --gold-100: #f3ecda;
  --bg: #fbfaf7;
  --surface: #ffffff;
  --cream-2: #f1eee6;
  --tint: #eef2f5;
  --ink: #0f1f29;
  --ink-2: #44525b;
  --ink-3: #6b7880;
  --line: #e3dfd5;
  --line-2: #cfd6db;
  --white: #ffffff;
  --sale: #b42318;

  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, sans-serif;

  --radius: 16px;
  --radius-sm: 10px;
  --max: 1160px;
  --gutter: 16px;
  --bar-h: 68px;
}
@media (min-width: 640px) { :root { --gutter: 28px; } }
@media (min-width: 900px) { :root { --gutter: 40px; --bar-h: 0px; } }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  padding-bottom: var(--bar-h);
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; line-height: 1.1; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--gold-400); outline-offset: 2px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--navy-900); color: var(--white); padding: 10px 16px; border-radius: 8px; font-weight: 700; }
.skip:focus { left: 16px; }

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
.eyebrow {
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-600);
}
.display {
  font-family: var(--serif); font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  letter-spacing: -0.015em; line-height: 1.04; color: var(--navy-900);
}
.display em { font-style: italic; font-weight: 400; color: var(--gold-600); }
.h1 { font-size: clamp(36px, 9vw, 64px); }
.h2 { font-size: clamp(28px, 6.5vw, 48px); }
.h3 { font-size: clamp(22px, 5vw, 30px); }
.lead { font-size: 16px; color: var(--ink-2); max-width: 56ch; }
@media (min-width: 640px) { .lead { font-size: 17.5px; } }
@media (min-width: 900px) { .lead { font-size: 19px; } }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 250, 247, 0.92);
  backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.header .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 16px; }
.logo { display: inline-flex; align-items: center; gap: 9px; color: var(--navy-900); min-height: 44px; }
.logo__drop { width: 18px; height: 22px; flex: none; }
.logo__word { font-weight: 800; font-size: 18px; letter-spacing: 0.3em; text-transform: uppercase; margin-right: -0.3em; }
.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--line-2); color: var(--navy-900);
  border-radius: 10px; width: 44px; height: 44px; cursor: pointer;
}
.nav-toggle span { display: block; width: 18px; height: 2px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; }
.nav {
  position: absolute; left: 0; right: 0; top: 64px;
  display: none; flex-direction: column; align-items: stretch; gap: 0;
  background: var(--surface); border-bottom: 1px solid var(--line);
  padding: 4px var(--gutter) 16px; box-shadow: 0 24px 40px -30px rgba(15,31,41,.35);
}
.nav.is-open { display: flex; }
.nav a { color: var(--ink-2); font-size: 16px; font-weight: 600; padding: 14px 0; border-bottom: 1px solid var(--line); min-height: 44px; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--navy-900); }
.nav .btn { margin-top: 14px; border-bottom: 0; justify-content: center; }
@media (min-width: 900px) {
  .header .wrap { height: 72px; }
  .logo__word { font-size: 20px; }




}

/* --------------------------------------------------------------------------
   Buttons & pills
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px; border-radius: 999px; font-weight: 700; font-size: 15px;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform .15s, background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.btn:active { transform: translateY(1px); }
.btn--gold { background: var(--gold-400); color: var(--navy-900); }
.btn--gold:hover { background: var(--gold-300); }
.btn--dark { background: var(--navy-900); color: var(--white); }
.btn--dark:hover { background: var(--navy-700); }
.btn--ghost { background: transparent; color: var(--navy-900); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--navy-900); }
.btn--outline { background: transparent; color: var(--navy-900); border-color: var(--navy-900); }
.btn--outline:hover { background: var(--navy-900); color: var(--white); }
.btn svg { width: 18px; height: 18px; }

.pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--gold-400); background: var(--gold-100); color: var(--gold-600);
  font-size: 11px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase;
}
.tag {
  display: inline-block; padding: 3px 9px; border-radius: 999px; margin-left: 8px; vertical-align: middle;
  background: var(--gold-100); color: var(--gold-600);
  font-size: 10px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.section { padding: 56px 0; }
@media (min-width: 640px) { .section { padding: 80px 0; } }
@media (min-width: 900px) { .section { padding: 112px 0; } }
.section--cream { background: var(--bg); }
.section--white { background: var(--surface); }
.section--tint { background: var(--tint); }
.section-head { display: grid; gap: 14px; margin-bottom: 28px; max-width: 760px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; justify-items: center; }
@media (min-width: 640px) { .section-head { margin-bottom: 40px; } }
@media (min-width: 900px) { .section-head { margin-bottom: 56px; } }
.hero__copy .pill, .page-hero__copy .pill, .section-head .pill { justify-self: start; }
.section-head.center .pill { justify-self: center; }

/* --------------------------------------------------------------------------
   Hero (home)
   -------------------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(640px 360px at 100% 0%, rgba(195,168,106,.22) 0%, transparent 65%),
    radial-gradient(500px 300px at 0% 100%, rgba(31,66,83,.08) 0%, transparent 60%),
    var(--bg);
  padding: 40px 0 0;
}
.hero__grid { display: grid; gap: 28px; align-items: end; }
.hero__copy { display: grid; gap: 20px; padding-bottom: 8px; }
.hero__checks { display: grid; gap: 10px; margin-top: 2px; }
.hero__checks li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; color: var(--ink-2); }
.check {
  flex: none; width: 26px; height: 26px; border-radius: 50%; margin-top: 1px;
  background: var(--gold-100); border: 1px solid var(--gold-300); display: grid; place-items: center; color: var(--gold-600);
}
.check svg { width: 13px; height: 13px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.hero__actions .btn { flex: 1 1 auto; }
.hero__art { display: flex; justify-content: center; padding-top: 8px; }
.stats { border-top: 1px solid var(--line); display: grid; }
.stat { padding: 18px 0; }
.stat + .stat { border-top: 1px solid var(--line); }
.stat__num { font-family: var(--serif); font-size: 40px; line-height: 1; color: var(--navy-900); font-variation-settings: "opsz" 144; }
.stat__label { color: var(--ink-3); margin-top: 6px; font-size: 15px; max-width: 26ch; }
@media (min-width: 640px) {
  .hero { padding-top: 64px; }
  .hero__actions .btn { flex: 0 0 auto; }
  .stats { grid-template-columns: repeat(3, 1fr); }
  .stat { padding: 30px 24px 34px 0; }
  .stat + .stat { border-top: 0; border-left: 1px solid var(--line); padding-left: 24px; }
  .stat__num { font-size: 52px; }
}
@media (min-width: 900px) {
  .hero { padding-top: 96px; }
  .hero__grid { grid-template-columns: 1.3fr 1fr; gap: 56px; }
  .hero__copy { gap: 26px; padding-bottom: 80px; }
  .hero__checks li { font-size: 16px; }
  .stat__num { font-size: 60px; }
}

/* --------------------------------------------------------------------------
   Illustrated jerry cans and spotter bottles (pure CSS)
   -------------------------------------------------------------------------- */
.shelf { display: flex; align-items: flex-end; justify-content: center; position: relative; }
.shelf > * { position: relative; }
.shelf .overlap-l { margin-right: -16px; z-index: 2; }
.shelf .overlap-r { margin-left: -16px; z-index: 2; }
.shelf .front { z-index: 3; }
.shelf .back { z-index: 1; }

.can { --w: 100px; --h: 140px; --body: #e9e7e1; --body-dark: #cfcdc5; --cap: #223842; width: var(--w); position: relative; padding-top: 24px; }
.can--gold { --body: #b89a62; --body-dark: #9a7f4c; }
.can--white { --body: #f6f5f0; --body-dark: #d9d7cf; }
.can--grey { --body: #e9e7e1; --body-dark: #cfcdc5; }
.can--lg { --w: 160px; --h: 210px; }
.can--md { --w: 116px; --h: 156px; }
.can--sm { --w: 96px; --h: 134px; }
.can__handle { position: absolute; top: 0; left: 12%; width: 32%; height: 40px; border: 10px solid var(--body); border-bottom: 0; border-radius: 14px 14px 0 0; }
.can__cap {
  position: absolute; top: 2px; right: 14%; width: 20%; height: 26px; background: var(--cap); border-radius: 6px 6px 2px 2px;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.14) 0 2px, transparent 2px 7px);
}
.can__body {
  position: relative; height: var(--h); border-radius: 14px;
  background: linear-gradient(90deg, var(--body-dark) 0%, var(--body) 14%, var(--body) 86%, var(--body-dark) 100%);
  display: grid; place-items: center; padding: 10% 12%;
  box-shadow: 0 24px 40px -24px rgba(15,31,41,.45), inset 0 0 0 1px rgba(15,31,41,.06);
}
.can__body::before { content: ""; position: absolute; inset: 7% 8% auto 8%; height: 8px; border-radius: 6px; background: rgba(0,0,0,.08); }
.label { width: 100%; background: var(--white); border-radius: 7px; padding: 9% 9%; display: grid; gap: 5px; color: var(--ink); text-align: left; box-shadow: 0 1px 0 rgba(0,0,0,.06); }
.label__brand { font-weight: 800; font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; }
.label__rule { width: 20px; height: 3px; background: var(--gold-400); border-radius: 2px; }
.label__name { font-weight: 700; font-size: 10.5px; line-height: 1.2; }
.label__lines { display: grid; gap: 3px; margin-top: 3px; }
.label__lines i { display: block; height: 3px; border-radius: 2px; background: var(--cream-2); }
.label__lines i:nth-child(2) { width: 70%; }
.can--lg .label__brand { font-size: 12px; }
.can--lg .label__name { font-size: 13px; }

.bottle { --w: 48px; --h: 112px; --body: #f2f1ec; --body-dark: #d5d3cb; width: var(--w); position: relative; padding-top: 30px; }
.bottle--gold { --body: #b89a62; --body-dark: #9a7f4c; }
.bottle--white { --body: #f2f1ec; --body-dark: #d5d3cb; }
.bottle--lg { --w: 64px; --h: 150px; }
.bottle__nozzle { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 26%; height: 20px; background: #223842; border-radius: 4px 4px 2px 2px; }
.bottle__nozzle::before { content: ""; position: absolute; top: -9px; left: 50%; width: 5px; height: 11px; background: #223842; transform: translateX(-50%); border-radius: 2px; }
.bottle__neck { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: 40%; height: 14px; background: var(--body-dark); border-radius: 2px 2px 0 0; }
.bottle__body {
  height: var(--h); border-radius: 12px 12px 9px 9px;
  background: linear-gradient(90deg, var(--body-dark) 0%, var(--body) 18%, var(--body) 82%, var(--body-dark) 100%);
  display: grid; align-items: center; padding: 30% 9%;
  box-shadow: 0 24px 40px -24px rgba(15,31,41,.45), inset 0 0 0 1px rgba(15,31,41,.06);
}
.bottle .label { padding: 8px 6px; gap: 3px; border-radius: 4px; }
.bottle .label__brand { font-size: 6px; letter-spacing: .2em; }
.bottle .label__name { font-size: 7px; }
.bottle .label__lines i { height: 2px; }
@media (min-width: 640px) {
  .can--lg { --w: 200px; --h: 260px; }
  .can--md { --w: 150px; --h: 200px; }
  .can--sm { --w: 120px; --h: 165px; }
  .bottle { --w: 58px; --h: 140px; }
  .bottle--lg { --w: 80px; --h: 190px; }
  .shelf .overlap-l { margin-right: -24px; }
  .shelf .overlap-r { margin-left: -24px; }
  .label__brand { font-size: 11px; } .label__name { font-size: 12px; }
  .can--lg .label__brand { font-size: 15px; } .can--lg .label__name { font-size: 16px; }
  .bottle .label__brand { font-size: 7px; } .bottle .label__name { font-size: 8px; }
}
@media (min-width: 900px) {
  .can--lg { --w: 230px; --h: 300px; }
  .can--md { --w: 170px; --h: 230px; }
  .bottle { --w: 64px; --h: 160px; }
  .bottle--lg { --w: 84px; --h: 200px; }
}

/* --------------------------------------------------------------------------
   Cards (USPs)
   -------------------------------------------------------------------------- */
.cards { display: grid; gap: 14px; }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 22px; display: grid; gap: 12px; align-content: start;
}
.card__icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--navy-900); color: var(--gold-300); }
.card__icon svg { width: 21px; height: 21px; }
.card h3 { font-family: var(--serif); font-size: 22px; font-variation-settings: "opsz" 48; color: var(--navy-900); }
.card p { color: var(--ink-2); font-size: 15px; }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); gap: 18px; } .card { padding: 30px 26px; } }
@media (min-width: 900px) { .cards { grid-template-columns: repeat(3, 1fr); } .cards--4 { grid-template-columns: repeat(4, 1fr); } }

/* --------------------------------------------------------------------------
   Workflows
   -------------------------------------------------------------------------- */
.workflows { display: grid; gap: 14px; }
.wf {
  position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 20px 20px; display: grid; gap: 8px; align-content: start; min-height: 0;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.wf:hover { transform: translateY(-3px); box-shadow: 0 24px 40px -28px rgba(15,31,41,.35); border-color: var(--gold-300); }
.wf__num { font-family: var(--serif); font-style: italic; font-size: 28px; color: var(--gold-600); line-height: 1; }
.wf h3 { font-family: var(--serif); font-size: 24px; font-variation-settings: "opsz" 48; color: var(--navy-900); }
.wf p { color: var(--ink-2); font-size: 15px; }
.wf__count { margin-top: auto; padding-top: 12px; font-size: 11.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.wf__arrow { position: absolute; top: 20px; right: 18px; color: var(--gold-600); }
@media (min-width: 640px) { .workflows { grid-template-columns: repeat(2, 1fr); gap: 16px; } .wf { padding: 28px 24px 24px; min-height: 220px; } }
@media (min-width: 1100px) { .workflows { grid-template-columns: repeat(4, 1fr); } }

/* --------------------------------------------------------------------------
   Split + compare
   -------------------------------------------------------------------------- */
.split { display: grid; gap: 32px; align-items: center; }
.split > .shelf { justify-content: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: 72px; } }

.compare { display: grid; border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.compare__row { display: grid; grid-template-columns: 1.3fr 1fr 1fr; }
.compare__row > div { padding: 12px 12px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.compare__row:last-child > div { border-bottom: 0; }
.compare__row--head > div { background: var(--cream-2); font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.compare__row > div:first-child { color: var(--navy-900); font-weight: 700; }
.compare__row > div:nth-child(2) { color: var(--ink-3); }
.compare__row > div:nth-child(3) { color: var(--gold-600); font-weight: 700; background: var(--gold-100); }
@media (min-width: 640px) { .compare__row > div { padding: 16px 20px; font-size: 15px; } .compare__row--head > div { font-size: 11.5px; } }

/* --------------------------------------------------------------------------
   Page hero (products, contact, 404)
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(640px 360px at 100% 0%, rgba(195,168,106,.22) 0%, transparent 65%), var(--bg);
  padding: 40px 0 96px;
}
.page-hero .wrap { display: grid; gap: 24px; align-items: end; }
.page-hero__copy { display: grid; gap: 16px; }
.page-hero .shelf { display: none; }
.page-hero .lead { color: var(--ink-2); }
@media (min-width: 640px) { .page-hero { padding: 64px 0 128px; } }
@media (min-width: 900px) {
  .page-hero { padding: 96px 0 180px; }
  .page-hero .wrap { grid-template-columns: 1fr auto; }
  .page-hero .shelf { display: flex; position: absolute; right: var(--gutter); bottom: -40px; z-index: 0; }
}

/* --------------------------------------------------------------------------
   Price list
   -------------------------------------------------------------------------- */
.price-stack { margin-top: -72px; display: grid; gap: 20px; position: relative; z-index: 2; }
.price-card {
  background: var(--surface); border-radius: var(--radius); border: 1px solid var(--line);
  padding: 20px 18px; box-shadow: 0 30px 60px -44px rgba(15,31,41,.4);
}
.price-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 2px solid var(--navy-900); }
.price-card__title { font-family: var(--serif); font-size: 24px; font-variation-settings: "opsz" 72; color: var(--navy-900); }
.price-card__title i { font-style: italic; color: var(--gold-600); margin-right: 8px; }
.price-card__unit { font-size: 10.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.price-card__intro { color: var(--ink-2); margin: 12px 0 2px; font-size: 14.5px; }
.price-row { display: grid; grid-template-columns: 1fr auto; gap: 10px 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.price-row:last-child { border-bottom: 0; padding-bottom: 4px; }
.price-row__name { font-weight: 800; font-size: 17px; letter-spacing: -0.01em; color: var(--navy-900); }
.price-row__desc { color: var(--ink-3); font-size: 14px; margin-top: 2px; }

.price { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; white-space: nowrap; }
.price__was { font-size: 13px; font-weight: 600; color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--sale); text-decoration-thickness: 1.5px; }
.price__now { font-weight: 800; font-size: 20px; letter-spacing: -0.02em; color: var(--navy-900); }
.price__now small, .price small { font-size: 12px; font-weight: 600; color: var(--ink-3); letter-spacing: 0; margin-left: 2px; }
.price--request { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--gold-600); font-size: 18px; }
.price-note { text-align: center; color: var(--ink-3); font-size: 14px; }
@media (min-width: 640px) {
  .price-stack { margin-top: -96px; gap: 28px; }
  .price-card { padding: 30px 32px; }
  .price-card__title { font-size: 30px; }
  .price-row { padding: 20px 0; }
  .price-row__name { font-size: 19px; }
  .price { flex-direction: row; align-items: baseline; gap: 12px; }
  .price__was { font-size: 15px; }
  .price__now { font-size: 26px; }
  .price--request { font-size: 22px; }
}
@media (min-width: 900px) { .price-stack { margin-top: -130px; } .price-card { padding: 36px 44px; } .price-card__title { font-size: 34px; } .price__now { font-size: 30px; } }

.spotters { display: grid; gap: 14px; }
.spotter {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 18px;
  display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; align-items: center; color: var(--ink);
  box-shadow: 0 24px 48px -40px rgba(15,31,41,.4);
}
.spotter__dot { width: 44px; height: 44px; border-radius: 50%; background: var(--gold-500); position: relative; }
.spotter__dot::after { content: ""; position: absolute; right: -3px; bottom: -3px; width: 14px; height: 14px; border-radius: 50%; background: var(--gold-300); }
.spotter__family { font-size: 10.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-600); }
.spotter__name { font-family: var(--serif); font-size: 24px; font-variation-settings: "opsz" 48; color: var(--navy-900); margin-top: 2px; }
.spotter__desc { color: var(--ink-3); font-size: 14px; margin-top: 2px; }
.spotter .price { grid-column: 2; align-items: flex-start; flex-direction: row; align-items: baseline; gap: 10px; }
@media (min-width: 640px) {
  .spotter { grid-template-columns: auto 1fr auto; padding: 24px 26px; }
  .spotter .price { grid-column: auto; flex-direction: column; align-items: flex-end; gap: 1px; }
  .spotter__dot { width: 52px; height: 52px; }
  .spotter__name { font-size: 28px; }
}
@media (min-width: 1100px) { .spotters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }

.terms { display: grid; gap: 24px; align-items: center; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 24px 20px; }
.terms__list { display: grid; gap: 10px; padding-top: 18px; border-top: 1px solid var(--line); }
.terms__list li { display: flex; gap: 12px; align-items: center; font-weight: 600; color: var(--ink-2); font-size: 15px; }
.terms__list li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-500); flex: none; }
@media (min-width: 640px) { .terms { padding: 36px 32px; } }
@media (min-width: 900px) { .terms { grid-template-columns: 1.4fr 1fr; gap: 32px; padding: 48px; } .terms__list { padding: 0 0 0 28px; border-top: 0; border-left: 1px solid var(--line); } }

/* --------------------------------------------------------------------------
   Steps
   -------------------------------------------------------------------------- */
.steps { display: grid; gap: 14px; counter-reset: step; }
.step { padding: 22px 20px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); display: grid; gap: 10px; }
.step::before { counter-increment: step; content: "0" counter(step); font-family: var(--serif); font-style: italic; font-size: 28px; color: var(--gold-600); line-height: 1; }
.step h3 { font-family: var(--serif); font-size: 22px; font-variation-settings: "opsz" 48; color: var(--navy-900); }
.step p { color: var(--ink-2); font-size: 15px; }
@media (min-width: 640px) { .step { padding: 28px; } }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 20px; } }

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */
.cta {
  background: var(--navy-900); color: var(--white); border-radius: var(--radius);
  padding: 28px 22px; display: grid; gap: 20px; align-items: center; position: relative; overflow: hidden;
}
.cta::after { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; right: -220px; top: -280px; background: radial-gradient(circle, rgba(195,168,106,.22), transparent 60%); pointer-events: none; }
.cta .display { color: var(--white); }
.cta .display em { color: var(--gold-300); }
.cta .lead { color: #c4ced5; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 10px; position: relative; }
.cta__actions .btn { flex: 1 1 auto; }
.cta .btn--ghost { color: var(--white); border-color: rgba(255,255,255,.3); }
.cta .btn--ghost:hover { border-color: var(--white); }
@media (min-width: 640px) { .cta { padding: 40px 36px; } .cta__actions .btn { flex: 0 0 auto; } }
@media (min-width: 900px) { .cta { grid-template-columns: 1.3fr 1fr; gap: 32px; padding: 56px; } .cta__actions { justify-content: flex-end; } }

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.contact { display: grid; gap: 32px; align-items: start; }
.contact__channels { display: grid; gap: 12px; margin-top: 22px; }
.channel {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--radius-sm); min-height: 64px;
  background: var(--surface); border: 1px solid var(--line); transition: border-color .2s, transform .2s;
}
.channel:hover { border-color: var(--gold-400); transform: translateY(-2px); }
.channel__icon { width: 42px; height: 42px; border-radius: 12px; background: var(--navy-900); color: var(--gold-300); display: grid; place-items: center; flex: none; }
.channel__icon svg { width: 20px; height: 20px; }
.channel b { display: block; font-size: 15.5px; color: var(--navy-900); }
.channel span { display: block; font-size: 13.5px; color: var(--ink-3); }

.form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 18px; display: grid; gap: 16px; }
.form__row { display: grid; gap: 14px; }
.field { display: grid; gap: 6px; }
.field label { font-size: 13px; font-weight: 700; letter-spacing: .03em; color: var(--ink-2); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 16px; min-height: 48px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line-2);
  background: var(--bg); color: var(--ink); width: 100%; outline: none; transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(195,168,106,.3); background: var(--white); }
.field textarea { min-height: 120px; resize: vertical; }
.checks { display: grid; gap: 6px 16px; }
.checks label { display: flex; align-items: center; gap: 10px; font-size: 15px; cursor: pointer; min-height: 40px; }
.checks input { accent-color: var(--gold-500); width: 20px; height: 20px; }
.form__foot { display: grid; gap: 10px; }
.form__hint { font-size: 13px; color: var(--ink-3); }
@media (min-width: 640px) {
  .form { padding: 32px; }
  .form__row, .checks { grid-template-columns: 1fr 1fr; }
  .form__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
}
@media (min-width: 900px) { .contact { grid-template-columns: 1fr 1.1fr; gap: 64px; } .form { padding: 40px; } }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: 10px; max-width: 820px; margin: 0 auto; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0 18px; }
.faq summary { cursor: pointer; list-style: none; padding: 16px 0; font-weight: 700; font-size: 15.5px; display: flex; justify-content: space-between; gap: 16px; align-items: center; color: var(--navy-900); min-height: 48px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--serif); font-size: 26px; color: var(--gold-600); line-height: 1; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 18px; color: var(--ink-2); font-size: 15px; }
@media (min-width: 640px) { .faq details { padding: 0 22px; } .faq summary { font-size: 17px; padding: 20px 0; } .faq details p { font-size: 16px; } }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer { background: var(--cream-2); color: var(--ink-2); padding: 48px 0 28px; border-top: 1px solid var(--line); }
.footer__grid { display: grid; gap: 28px; padding-bottom: 32px; border-bottom: 1px solid var(--line); }
.footer__tag { margin-top: 14px; font-family: var(--serif); font-size: 21px; color: var(--navy-900); font-variation-settings: "opsz" 48; max-width: 24ch; }
.footer__tag em { font-style: italic; color: var(--gold-600); }
.footer__blurb { margin-top: 12px; font-size: 14px; max-width: 34ch; color: var(--ink-3); }
.footer h4 { color: var(--navy-900); font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 800; margin-bottom: 12px; }
.footer ul { display: grid; gap: 8px; }
.footer ul a { display: inline-block; padding: 4px 0; min-height: 32px; }
.footer a:hover { color: var(--navy-900); }
.footer__bottom { display: grid; gap: 8px; padding-top: 20px; font-size: 13px; color: var(--ink-3); }
.footer__bottom .logo__word { font-size: 12px; color: var(--navy-900); }
@media (min-width: 640px) { .footer__grid { grid-template-columns: 1fr 1fr; } .footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; } }
@media (min-width: 900px) { .footer { padding-top: 64px; } .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; } }

/* --------------------------------------------------------------------------
   Mobile action bar
   -------------------------------------------------------------------------- */
.mobile-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: rgba(251,250,247,.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
}
.mobile-bar .btn { min-height: 48px; padding-left: 10px; padding-right: 10px; }
@media (min-width: 900px) { .mobile-bar { display: none; } }

/* --------------------------------------------------------------------------
   Reveal on scroll
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } .wf, .channel { transition: none; } }

/* Utilities */
.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 36px; }
.center { text-align: center; }
.muted { color: var(--ink-3); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Fixes after v3 visual pass */
@media (min-width: 900px) {
  .nav .btn { padding: 12px 22px; min-height: 44px; }
  .page-hero .shelf { right: calc(var(--gutter) + 56px); }
}
.hero__grid, .split, .page-hero .wrap { grid-template-columns: minmax(0, 1fr); }
.hero__art { max-width: 100%; overflow: hidden; }
.shelf--hero { transform: scale(.72); transform-origin: bottom center; margin-top: -12%; }
@media (min-width: 640px) { .shelf--hero { transform: scale(.9); margin-top: -4%; } }
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .page-hero .wrap { grid-template-columns: minmax(0, 1fr) auto; }
  .shelf--hero { transform: none; margin-top: 0; }
}

/* Was-price always inline, beside the actual price */
.price, .spotter .price { flex-direction: row; align-items: baseline; gap: 8px; justify-content: flex-end; }
.spotter .price { grid-column: 2; justify-content: flex-start; }
@media (min-width: 640px) { .spotter .price { grid-column: auto; justify-content: flex-end; } .price { gap: 12px; } }

/* --------------------------------------------------------------------------
   Guides index + article pages
   -------------------------------------------------------------------------- */
.guides { display: grid; gap: 14px; }
.guide-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 20px;
  display: grid; gap: 8px; align-content: start; transition: transform .2s, box-shadow .2s, border-color .2s;
}
.guide-card:hover { transform: translateY(-3px); box-shadow: 0 24px 40px -28px rgba(15,31,41,.35); border-color: var(--gold-300); }
.guide-card h3 { font-family: var(--serif); font-size: 21px; font-variation-settings: "opsz" 48; color: var(--navy-900); }
.guide-card p { color: var(--ink-2); font-size: 14.5px; }
.guide-card .eyebrow { font-size: 10.5px; }
@media (min-width: 640px) { .guides { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (min-width: 1100px) { .guides { grid-template-columns: repeat(3, 1fr); } }

.article__head { background: radial-gradient(640px 360px at 100% 0%, rgba(195,168,106,.22) 0%, transparent 65%), var(--bg); padding: 40px 0 32px; border-bottom: 1px solid var(--line); }
.article__head .wrap { display: grid; gap: 14px; max-width: 860px; }
.article__head .eyebrow a:hover { text-decoration: underline; }
.article__meta { font-size: 13px; color: var(--ink-3); }
.article__grid { display: grid; gap: 32px; padding: 32px var(--gutter) 48px; }
.article__body { max-width: 68ch; font-size: 16.5px; line-height: 1.7; color: var(--ink-2); }
.article__body h2 { font-family: var(--serif); font-size: 26px; font-variation-settings: "opsz" 48; color: var(--navy-900); margin: 36px 0 12px; line-height: 1.15; }
.article__body h3 { font-size: 18px; font-weight: 800; color: var(--navy-900); margin: 24px 0 8px; }
.article__body p { margin: 0 0 16px; }
.article__body ul, .article__body ol { margin: 0 0 18px; padding-left: 22px; }
.article__body li { margin-bottom: 8px; }
.article__body ul { list-style: disc; } .article__body ol { list-style: decimal; }
.article__body a { color: var(--navy-900); font-weight: 600; text-decoration: underline; text-decoration-color: var(--gold-400); text-underline-offset: 3px; }
.article__body a:hover { text-decoration-color: var(--navy-900); }
.article__body strong { color: var(--navy-900); }
.quick { margin: 0 0 28px; padding: 18px 20px; border-left: 4px solid var(--gold-400); background: var(--gold-100); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--navy-900); }
.quick p { margin: 0; }
.table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 15px; }
.table th, .table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { background: var(--cream-2); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.article__faq { margin-top: 36px; }
.article__side { display: grid; gap: 14px; align-content: start; }
.side-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 20px; display: grid; gap: 10px; }
.side-card h3 { font-family: var(--serif); font-size: 22px; font-variation-settings: "opsz" 48; color: var(--navy-900); }
.side-card p { color: var(--ink-2); font-size: 14.5px; }
.side-card .btn { justify-self: start; }
.side-card--gold { background: var(--gold-100); border-color: var(--gold-300); }
.article__related { background: var(--surface); border-top: 1px solid var(--line); padding: 40px 0 56px; }
.article__related .display { margin-bottom: 20px; }
.related { display: grid; gap: 12px; }
.related__card { display: grid; gap: 6px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); transition: border-color .2s, transform .2s; }
.related__card:hover { border-color: var(--gold-300); transform: translateY(-2px); }
.related__card strong { font-family: var(--serif); font-size: 19px; font-weight: 500; color: var(--navy-900); line-height: 1.2; }
.related__card > span:last-child { font-size: 14px; color: var(--ink-3); }
@media (min-width: 640px) { .article__head { padding: 64px 0 40px; } .article__grid { padding: 40px var(--gutter) 64px; } .related { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .article__grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; padding: 56px var(--gutter) 80px; } .article__side { position: sticky; top: 88px; } .article__body h2 { font-size: 30px; } }
.price-card__sub { display: block; font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: var(--ink-3); letter-spacing: 0; margin-top: 4px; font-variation-settings: normal; }

/* City pages */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
ul.chips li, .chip { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--navy-900); }
a.chip:hover { border-color: var(--gold-400); background: var(--gold-100); }
.mini-grid { display: grid; gap: 14px; }
.mini-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 18px 10px; }
.mini-card h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-family: var(--serif); font-size: 20px; font-variation-settings: "opsz" 48; color: var(--navy-900); padding-bottom: 10px; border-bottom: 2px solid var(--navy-900); }
.mini-card h3 span { font-family: var(--sans); font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.mini-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; font-weight: 600; color: var(--navy-900); }
.mini-list li:last-child { border-bottom: 0; }
.mini-list .price { flex-direction: row; gap: 8px; }
.mini-list .price__now { font-size: 16px; }
.mini-list .price__was { font-size: 12px; }
.mini-list .price--request { font-size: 15px; }
.related--stack { grid-template-columns: 1fr; }
@media (min-width: 640px) { .mini-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (min-width: 1100px) { .mini-grid { grid-template-columns: repeat(4, 1fr); } }

/* --------------------------------------------------------------------------
   Section visuals (photo plate, packaging art, stain tiles, swatches, floating price cards, brand mark)
   -------------------------------------------------------------------------- */
.page-hero__art { display: none; }
@media (min-width: 900px) { .page-hero__art { display: block; justify-self: end; width: 100%; max-width: 440px; } .page-hero .wrap:has(.page-hero__art) { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.photo { position: relative; border-radius: 22px; overflow: hidden; box-shadow: 0 40px 70px -40px rgba(15,31,41,.5); aspect-ratio: 5/4; }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo::after { content: ""; position: absolute; inset: 0; border-radius: 22px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); background: linear-gradient(180deg, transparent 55%, rgba(15,31,41,.55)); }
.photo__frame { position: absolute; inset: 14px; border: 1px solid rgba(195,168,106,.6); border-radius: 14px; pointer-events: none; z-index: 2; }
.photo__badge { position: absolute; left: 20px; bottom: 20px; z-index: 2; background: var(--white); color: var(--navy-900); border-radius: 14px; padding: 12px 16px; display: grid; gap: 2px; box-shadow: 0 20px 40px -20px rgba(0,0,0,.5); }
.photo__badge b { font-family: var(--serif); font-size: 26px; line-height: 1; }
.photo__badge span { font-size: 12px; color: var(--ink-3); font-weight: 600; }
.packaging { width: 100%; height: auto; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 16px 12px; display: grid; justify-items: center; gap: 8px; text-align: center; color: inherit; transition: border-color .2s, transform .2s; }
a.tile:hover { border-color: var(--gold-300); transform: translateY(-2px); }
.tile__dot { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: var(--navy-900); background: var(--gold-100); }
.tile__dot svg { width: 26px; height: 26px; }
.tile b { font-size: 13px; color: var(--navy-900); }
.tile span { font-size: 10.5px; color: var(--ink-3); letter-spacing: .14em; text-transform: uppercase; font-weight: 800; }
@media (min-width: 640px) { .tiles { gap: 14px; } .tile { padding: 18px 14px; } .tile__dot { width: 56px; height: 56px; } }
.spotter__dot { display: grid; place-items: center; color: var(--navy-900); background: var(--gold-100); border: 1px solid var(--gold-300); }
.spotter__dot::after { display: none; }
.spotter__dot svg { width: 24px; height: 24px; }
.swatches { position: relative; aspect-ratio: 5/4; }
.swatch { position: absolute; width: 58%; aspect-ratio: 4/3; border-radius: 16px; box-shadow: 0 30px 50px -30px rgba(15,31,41,.5); display: flex; align-items: flex-end; padding: 14px; }
.swatch i { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; background: rgba(255,255,255,.88); color: var(--navy-900); padding: 5px 10px; border-radius: 999px; }
.sw1 { left: 0; top: 6%; background-color: #e8e2d4; background-image: repeating-linear-gradient(45deg, rgba(0,0,0,.05) 0 1px, transparent 1px 4px), repeating-linear-gradient(-45deg, rgba(0,0,0,.05) 0 1px, transparent 1px 4px); transform: rotate(-6deg); }
.sw2 { left: 30%; top: 22%; background-color: #1f3340; background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 3px); transform: rotate(3deg); }
.sw3 { left: 42%; top: 50%; background-color: #c9ab66; background-image: linear-gradient(135deg, rgba(255,255,255,.35), transparent 40%, rgba(0,0,0,.08)); transform: rotate(-2deg); }
.sw4 { left: 4%; top: 56%; width: 40%; background-color: #f6f3ea; background-image: repeating-linear-gradient(90deg, rgba(0,0,0,.04) 0 2px, transparent 2px 6px); transform: rotate(8deg); }
.floating { transform: rotate(-2deg); }
.floating .mini-card { box-shadow: 0 40px 70px -40px rgba(15,31,41,.5); background: var(--surface); }
.floating .mini-card + .mini-card { margin-top: -10px; margin-left: 40px; transform: rotate(3deg); }
.mark-bg { position: relative; overflow: hidden; }
.mark-bg::before { content: ""; position: absolute; right: -120px; top: -80px; width: 520px; height: 420px; background: url("../assets/img/mark.svg") no-repeat center / contain; opacity: .16; pointer-events: none; }
.mark-bg > .wrap { position: relative; }
.mark { width: 100%; max-width: 360px; height: auto; margin: 0 auto; }
@media (min-width: 900px) { .hero__grid--single { grid-template-columns: minmax(0, 1fr); } .hero__grid--single .hero__copy { max-width: 760px; } }

/* Home hero product lineup (rendered image) */
.hero__lineup { margin: 24px 0 0; border-radius: 18px; overflow: hidden; background: #dfe3e6; box-shadow: 0 40px 70px -44px rgba(15,31,41,.5), inset 0 0 0 1px rgba(15,31,41,.06); }
.hero__lineup img { width: 100%; height: auto; display: block; }
@media (min-width: 640px) { .hero__lineup { margin-top: 32px; border-radius: 22px; } }
@media (min-width: 900px) { .hero__grid--single .hero__copy { padding-bottom: 8px; } .hero__lineup { margin-top: 40px; } }
.hero .stats { margin-top: 40px; }
.hero__lineup img { width: calc(100% + 8px); max-width: none; margin-left: -4px; }

/* Language switcher: native pop-up button (system picker on iOS), English first */
.header .wrap { gap: 10px; }
.lang { position: relative; display: inline-flex; align-items: center; min-height: 44px; margin-left: auto; color: var(--navy-900); }
.lang > svg:first-child { position: absolute; left: 12px; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; pointer-events: none; }
.lang__chev { position: absolute; right: 10px; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; pointer-events: none; }
.lang select { appearance: none; -webkit-appearance: none; font: inherit; font-size: 14px; font-weight: 700; color: var(--navy-900); background: var(--surface); border: 1px solid var(--line-2); border-radius: 999px; min-height: 44px; padding: 8px 30px 8px 34px; max-width: 150px; cursor: pointer; }
.lang select:focus-visible { outline: 3px solid var(--gold-400); outline-offset: 2px; }
@media (min-width: 900px) { .lang { margin-left: 0; order: 2; } .nav { order: 1; } .lang select { min-height: 40px; } }
.lang-hint { background: var(--gold-100); border-bottom: 1px solid var(--gold-300); color: var(--navy-900); font-size: 14px; }
.lang-hint .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding-top: 4px; padding-bottom: 4px; }
.lang-hint a { font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.lang-hint__x { background: none; border: 0; font-size: 22px; line-height: 1; color: var(--ink-2); width: 44px; height: 44px; cursor: pointer; border-radius: 50%; }
.lang-hint__x:hover { background: rgba(15,31,41,.06); }

/* Indic scripts: matching Noto faces, loaded per language by tools/build-i18n.py */
html[lang="hi"], html[lang="mr"] { --serif: "Noto Serif Devanagari", "Fraunces", serif; --sans: "Noto Sans Devanagari", "Plus Jakarta Sans", sans-serif; }
html[lang="gu"] { --serif: "Noto Serif Gujarati", "Fraunces", serif; --sans: "Noto Sans Gujarati", "Plus Jakarta Sans", sans-serif; }
html[lang="ta"] { --serif: "Noto Serif Tamil", "Fraunces", serif; --sans: "Noto Sans Tamil", "Plus Jakarta Sans", sans-serif; }
html[lang="te"] { --serif: "Noto Serif Telugu", "Fraunces", serif; --sans: "Noto Sans Telugu", "Plus Jakarta Sans", sans-serif; }
html[lang="kn"] { --serif: "Noto Serif Kannada", "Fraunces", serif; --sans: "Noto Sans Kannada", "Plus Jakarta Sans", sans-serif; }
html[lang="bn"] { --serif: "Noto Serif Bengali", "Fraunces", serif; --sans: "Noto Sans Bengali", "Plus Jakarta Sans", sans-serif; }
html[lang="ml"] { --serif: "Noto Serif Malayalam", "Fraunces", serif; --sans: "Noto Sans Malayalam", "Plus Jakarta Sans", sans-serif; }
html[lang="pa"] { --serif: "Noto Serif Gurmukhi", "Fraunces", serif; --sans: "Noto Sans Gurmukhi", "Plus Jakarta Sans", sans-serif; }
html:not([lang="en"]) .display { letter-spacing: 0; line-height: 1.18; }
html:not([lang="en"]) .h1 { font-size: clamp(32px, 7.5vw, 56px); }
html:not([lang="en"]) .eyebrow, html:not([lang="en"]) .pill, html:not([lang="en"]) .tag { letter-spacing: .08em; }

/* ==========================================================================
   HIG pass (accessibility, platform conventions, craft). Overrides earlier rules on purpose.
   ========================================================================== */
:root { --ink-3: #5a6770; --gold-700: #7a5e2c; --line-2: #aeb8c0; --bar-h: 72px; }
@media (min-width: 900px) { :root { --bar-h: 0px; } }
html { scroll-padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom) + 12px); }
body { padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom)); }
:focus-visible { outline: 3px solid var(--navy-900); outline-offset: 2px; }
.cta :focus-visible, .btn--dark:focus-visible, .mobile-bar .btn--dark:focus-visible { outline-color: var(--gold-300); }
/* type floor 12px, calmer tracking */
.eyebrow, .pill, .tag, .price-card__unit, .spotter__family, .tile span, .mini-card h3 span, .guide-card .eyebrow, .compare__row--head > *, .wf__count, .table th, .label__brand { font-size: 12px; letter-spacing: .14em; }
.eyebrow { color: var(--gold-700); }
.pill, .tag, .spotter__family, .wf__num, .price-card__title i, .step::before { color: var(--gold-700); }
.card p, .wf p, .step p { font-size: 16px; }
.price__was { font-size: 14px; color: var(--ink-2); }
.mini-list .price__was { font-size: 13px; }
.price-card__intro { max-width: 72ch; }
.price-card__head { flex-wrap: wrap; }
.price-card__sub { flex-basis: 100%; order: 3; margin: 4px 0 0; }
/* comparison table: real table semantics */
.compare { display: table; width: 100%; border-collapse: separate; border-spacing: 0; }
.compare__row { display: table-row; }
.compare__row > * { display: table-cell; vertical-align: top; text-align: left; font-weight: 400; padding: 12px; border-bottom: 1px solid var(--line); font-size: 13.5px; width: 30%; }
.compare__row > :first-child { width: 40%; color: var(--navy-900); font-weight: 700; }
.compare__row > :nth-child(2) { color: var(--ink-3); }
.compare__row > :nth-child(3) { color: var(--gold-700); font-weight: 700; background: var(--gold-100); }
.compare__row--head > * { background: var(--cream-2); font-weight: 800; text-transform: uppercase; color: var(--ink-3); }
.compare__row:last-child > * { border-bottom: 0; }
@media (min-width: 640px) { .compare__row > * { padding: 16px 20px; font-size: 15px; } }
/* chips: static vs interactive must differ; 44px targets */
.chip, ul.chips li { min-height: 44px; padding: 8px 16px; }
.chips { gap: 10px; }
ul.chips li { background: transparent; border-style: dashed; color: var(--ink-2); font-weight: 500; }
@media (min-width: 1100px) { .mini-grid { grid-template-columns: repeat(2, 1fr); } }
/* chrome */
.header { z-index: 70; }
.header .wrap { gap: 12px; }
.nav { max-height: calc(100dvh - 64px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
@media (min-width: 900px) { .nav { max-height: none; overflow: visible; } }
.nav .btn { color: var(--navy-900); font-weight: 700; }
.nav-toggle, .lang select { border-color: var(--line-2); }
.lang-hint a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
.footer__blurb, .footer__bottom { color: var(--ink-3); }
.footer ul { gap: 0; }
.footer ul a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
.channel:not(a):hover { transform: none; border-color: var(--line); }
.is-disabled { opacity: .55; pointer-events: none; }
/* forms */
fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }
.field legend { font-size: 13px; font-weight: 700; letter-spacing: .03em; color: var(--ink-2); padding: 0; margin-bottom: 6px; }
.req { color: var(--sale); font-weight: 800; }
.field__error { font-size: 13px; color: var(--sale); margin: 2px 0 0; }
.field input[aria-invalid="true"] { border-color: var(--sale); }
.field input, .field select, .field textarea { outline: revert; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--navy-900); outline-offset: 2px; box-shadow: none; }
.checks label { min-height: 44px; }
.checks input { width: 22px; height: 22px; }
.chips--radio { position: relative; }
.chips--radio .chip { cursor: pointer; position: relative; }
.chips--radio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chips--radio .chip:has(input:checked) { background: var(--navy-900); color: var(--white); border-color: var(--navy-900); }
.chips--radio .chip:has(input:focus-visible) { outline: 3px solid var(--navy-900); outline-offset: 2px; }
.faq summary::after { content: "+" / ""; }
/* reveal: only when JS runs; never in print */
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }
@media print { .js .reveal { opacity: 1; transform: none; } .mobile-bar, .lang-hint { display: none; } }

/* Language strip: every language, matched one first; visible without JS, dismissible with JS */
.js .lang-hint { display: none; }
.js .lang-hint.is-on { display: block; }
.lang-hint .wrap { align-items: flex-start; padding-top: 6px; padding-bottom: 6px; }
.lang-hint p { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: 13.5px; }
.lang-hint__label { color: var(--ink-2); margin-right: 4px; min-height: 40px; display: inline-flex; align-items: center; }
.lang-hint__links { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.lang-hint__links a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 10px; border-radius: 999px; background: rgba(255,255,255,.7); border: 1px solid var(--gold-300); color: var(--navy-900); font-weight: 700; text-decoration: none; }
.lang-hint__links a:hover { background: var(--white); }
.lang-hint__links a.is-match { background: var(--navy-900); color: var(--white); border-color: var(--navy-900); }
.lang-hint__x { flex: none; }

/* Enquiry form: honeypot (hidden from people, visible to bots) and send error */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__alert { background: #fdecea; border: 1px solid #f3b5ae; color: #8a1c13; border-radius: var(--radius-sm); padding: 12px 14px; font-size: 14.5px; font-weight: 600; margin: 0 0 4px; }

/* ==========================================================================
   Cart
   A visitor collects products and quantities and sends the list; nothing is paid
   for here. Mobile-first: on a phone every control is its own full-width row,
   and from 640px up each line collapses onto one row.
   -------------------------------------------------------------------------- */

/* --- header: cart link with a count badge -------------------------------- */

.hdr-cart {
  position: relative;
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 0 10px;
  border: 1px solid var(--line-2); border-radius: 10px;
  background: var(--surface); color: var(--navy-900);
  font-size: 14px; font-weight: 700; letter-spacing: .01em;
  text-decoration: none; border-bottom: 1px solid var(--line-2);
}
.hdr-cart:hover { border-color: var(--gold-400); }
.hdr-cart svg { width: 20px; height: 20px; flex: none; }
.hdr-cart__t { display: none; }                    /* icon only until there is room */
.hdr-cart__n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; background: var(--navy-900); color: #fff;
  font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.hdr-cart__n[hidden] { display: none; }

/* --- price list: quantity + Add ------------------------------------------ */

.addctl {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 2px;
}

.qty {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line-2); border-radius: 10px;
  background: var(--surface); overflow: hidden;
}
.qty__btn {
  width: 44px; height: 44px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; cursor: pointer;
  color: var(--navy-900); font-size: 19px; font-weight: 700; line-height: 1;
}
.qty__btn:hover { background: var(--cream-2); }
.qty__input {
  width: 52px; height: 44px; flex: none;
  border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: 16px; font-weight: 700; text-align: center;
  font-variant-numeric: tabular-nums; outline: none;
  -moz-appearance: textfield; appearance: textfield;
}
.qty__input::-webkit-outer-spin-button,
.qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty__unit {
  padding: 0 10px; align-self: stretch;
  display: inline-flex; align-items: center;
  font-size: 13px; font-weight: 700; color: var(--ink-2);
  background: var(--cream-2); white-space: nowrap;
}

.btn--add {
  margin-top: 0; min-height: 44px; padding: 0 20px;
  background: var(--navy-900); color: #fff; border: 1px solid var(--navy-900);
  font-size: 14.5px; font-weight: 700;
}
.btn--add:hover { background: var(--navy-800); border-color: var(--navy-800); }
.btn--add.is-added {
  background: var(--gold-100); color: var(--gold-600);
  border-color: var(--gold-300);
}

.spotter .addctl { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); }

/* --- the cart page ------------------------------------------------------- */

.page-hero--tight { padding-bottom: 28px; }

.cart { display: grid; gap: 20px; }

.cart__empty {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 32px 20px; text-align: center;
}
.cart__empty h2 { margin: 0 0 8px; }
.cart__empty p { margin: 0 auto 18px; max-width: 42ch; color: var(--ink-2); }
.cart__empty[hidden] { display: none; }

.cart__panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 4px 16px;
}
.cart__panel:empty, .cart__panel:has(.cart__list:empty) { display: none; }

.cart__cols { display: none; }

.citem {
  display: grid; grid-template-columns: 1fr auto;
  gap: 10px 12px; align-items: center;
  padding: 16px 0; border-bottom: 1px solid var(--line);
}
.citem:last-child { border-bottom: 0; }
.citem__main { grid-column: 1; grid-row: 1; min-width: 0; }
.citem__name { font-weight: 700; color: var(--navy-900); line-height: 1.3; }
.citem__unit { font-size: 13.5px; color: var(--ink-2); margin-top: 2px; }
.citem .qty { grid-column: 1; grid-row: 2; justify-self: start; }
.citem__line {
  grid-column: 2; grid-row: 2; justify-self: end;
  font-weight: 800; font-size: 17px; color: var(--navy-900);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.citem__x {
  grid-column: 2; grid-row: 1; justify-self: end;
  width: 44px; height: 44px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-2); border-radius: 10px;
  background: var(--surface); color: var(--ink-2); cursor: pointer;
}
.citem__x svg { width: 17px; height: 17px; }
.citem__x:hover { color: var(--sale); border-color: var(--sale); }

.cart__sum {
  display: grid; gap: 16px;
  background: var(--cream-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 16px;
}
.cart__sum[hidden] { display: none; }
.cart__clear {
  justify-self: start; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--line-2); border-radius: 10px;
  background: transparent; color: var(--ink-2);
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.cart__clear:hover { color: var(--sale); border-color: var(--sale); }
.cart__total-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-weight: 700; color: var(--navy-900);
}
.cart__total { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.cart__note { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.cart__note[hidden] { display: none; }

.cart__form[hidden] { display: none; }
.form__intro { margin: -6px 0 0; font-size: 14.5px; color: var(--ink-2); }
.form__req { margin: 0; font-size: 13.5px; color: var(--ink-2); }
.form__status { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--navy-900); min-height: 1.2em; }
.form__actions { display: grid; gap: 10px; }
.field__opt { font-weight: 600; color: var(--ink-3); letter-spacing: 0; }
.btn--lg { min-height: 52px; padding: 0 26px; font-size: 16px; }
.btn.is-off { opacity: .45; cursor: not-allowed; }

.cart__noscript {
  margin: 0; padding: 14px 16px; border-radius: var(--radius-sm);
  background: var(--gold-100); border: 1px solid var(--gold-300);
  font-size: 14.5px; color: var(--navy-900);
}

/* --- focus, visible against cream and white ------------------------------ */

.hdr-cart:focus-visible, .qty__btn:focus-visible, .qty__input:focus-visible,
.btn--add:focus-visible, .citem__x:focus-visible, .cart__clear:focus-visible {
  outline: 3px solid var(--navy-900); outline-offset: 2px; border-radius: 10px;
}

@media (min-width: 640px) {
  .hdr-cart__t { display: inline; }
  .hdr-cart { padding: 0 13px; }

  .price-row { grid-template-columns: minmax(0, 1fr) auto auto; }
  .addctl { grid-column: auto; margin-top: 0; margin-left: 18px; flex-wrap: nowrap; }

  .cart__panel { padding: 4px 20px; }
  .cart__cols {
    display: grid; grid-template-columns: 1fr 172px 104px 44px;
    gap: 12px; align-items: center;
    padding: 14px 0 10px; border-bottom: 1px solid var(--line);
    font-size: 12.5px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--ink-3);
  }
  .cart__cols span:nth-child(3) { text-align: right; }

  .citem { grid-template-columns: 1fr 172px 104px 44px; gap: 12px; }
  .citem__main, .citem .qty, .citem__line, .citem__x { grid-row: 1; }
  .citem__main { grid-column: 1; }
  .citem .qty { grid-column: 2; }
  .citem__line { grid-column: 3; }
  .citem__x { grid-column: 4; }

  .cart__sum { grid-template-columns: auto 1fr; align-items: start; padding: 20px; }
  .cart__clear { grid-row: 1; }
  .cart__totals { grid-column: 2; }
  .form__actions { grid-auto-flow: column; justify-content: start; gap: 12px; }
}

@media (min-width: 900px) {
  .cart { grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr); gap: 24px; align-items: start; }
  .cart__empty { grid-column: 1 / -1; }
  .cart__panel { grid-column: 1; grid-row: 1; }
  .cart__sum { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--bar-h) + 16px); }
  .cart__form { grid-column: 1 / -1; grid-row: 2; }
  .cart__noscript { grid-column: 1 / -1; }
  .cart__sum { grid-template-columns: 1fr; }
  .cart__clear { grid-row: 2; }
  .cart__totals { grid-column: 1; grid-row: 1; }
}

/* --- powders: Rangkaat sits under the spotter grid, labelled as a powder ----- */

.powders { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line-2); }
.powders > .eyebrow { margin: 0 0 12px; }
.spotters--one { grid-template-columns: 1fr; max-width: 560px; }

/* --- header fit: logo + language + cart + menu must all survive a 320px bar ----
   Adding the cart link pushed the menu button off-screen on a phone and squeezed it
   to 32px. Nothing in the bar may shrink below its tap target, and the wordmark
   steps aside first: the drop mark still links home and the link is labelled. */

.header .wrap > .logo { flex: none; }
.header .wrap > .lang,
.header .wrap > .hdr-cart,
.header .wrap > .nav-toggle { flex: none; }

@media (max-width: 640px) {
  .header .wrap { gap: 8px; }
  .hdr-cart { padding: 0 8px; gap: 6px; }
}

@media (max-width: 480px) {
  .logo__word { display: none; }
  .header .wrap > .logo { gap: 0; }
}

/* The header now carries a cart link (~113px), so the horizontal nav no longer fits at
   900px: between there and 1100px the wordmark was squeezed to fit. Same four rules,
   just held back until there is room for all of it. */
@media (min-width: 1100px) {
  .nav-toggle { display: none; }
  .nav { position: static; display: flex; flex-direction: row; align-items: center; gap: 28px; background: none; border: 0; padding: 0; box-shadow: none; }
  .nav a { padding: 0; border: 0; font-size: 15px; min-height: 0; }
  .nav .btn { margin: 0 0 0 4px; }
}

/* The Add control raised each spotter card's minimum width, and plain 1fr columns
   cannot shrink below that, so the two-column grid overflowed between 900 and
   1100px. minmax(0, 1fr) above lets them shrink; the control wraps to suit. */
.spotter .addctl { flex-wrap: wrap; margin-left: 0; }

/* The name column must be allowed to shrink: with the price and the Add control
   both sized to content, a plain 1fr floored the row at its min-content width and
   the price slid past the edge just below 1000px. */
@media (min-width: 640px) and (max-width: 1023px) {
  .addctl { flex-wrap: wrap; justify-content: flex-end; margin-left: 12px; }
}

/* --- long translations must not widen the page ------------------------------
   Three places assumed English-length strings. In Tamil and Malayalam the labels
   are much longer, and each of these forced the document wider than the phone,
   which scrolls the whole page sideways. */

/* The fixed bottom bar: its buttons were nowrap, so a long CTA pushed past 375px. */
/* minmax(0,…) because a plain 1fr track cannot shrink below its content, and the
   Tamil and Malayalam labels are long enough to push the bar past the phone. */
.mobile-bar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.mobile-bar .btn { white-space: normal; min-width: 0; line-height: 1.2; overflow-wrap: break-word; }
.mobile-bar > * { min-width: 0; }

/* The comparison table: give every column an equal share instead of letting the
   longest cell set the width. */
.compare { table-layout: fixed; width: 100%; }
.compare th, .compare td { overflow-wrap: break-word; }

/* The language chooser shows the current language's own name, which is wide in
   some scripts; cap it so the header still fits beside the nav. */
.lang select { max-width: 150px; }

/* Same shrink problem one level up: the price cards sit in a grid whose track was
   floored at the cards' min-content width, so in the longer-text languages each card
   grew past the page. Let the track and the boxes inside it shrink. */
.price-stack { grid-template-columns: minmax(0, 1fr); }
.price-card, .price-row, .price-row > div, .addctl, .spotter, .spotter > div { min-width: 0; }

/* --- the same shrink fix for the remaining layout grids -------------------- */

.hero__grid, .hero__copy, .cart, .cart > *, .citem, .citem > *,
.page-hero__copy, .section-head { min-width: 0; }
.hero__actions, .form__actions { flex-wrap: wrap; }
.citem { grid-template-columns: minmax(0, 1fr) auto; }

@media (min-width: 640px) {
  .citem, .cart__cols { grid-template-columns: minmax(0, 1fr) 172px 104px 44px; }
}

/* The horizontal nav plus a quote button does not fit beside the logo, the language
   chooser and the cart once the labels are translated. The button is the one item
   that repeats elsewhere (hero, bottom bar, footer), so it steps aside first. */
@media (min-width: 1100px) and (max-width: 1279px) {
  .nav .btn { display: none; }
  .nav { gap: 20px; }
}
.nav { min-width: 0; }

/* Last resort for the narrowest phones: a single Tamil or Malayalam word can be wider
   than a 320px column, and without this it drags the whole page sideways. Only breaks
   a word that cannot fit on its own line, so ordinary text is unaffected. */
body { overflow-wrap: break-word; }

/* Buttons were nowrap, which is fine for "Add" or "See prices" but not for a long
   translated call to action: the label then set the width of its whole row and pushed
   the page sideways. Let a label that cannot fit wrap onto a second line instead. */
.btn { white-space: normal; min-width: 0; }
.btn--add, .qty__unit, .price { white-space: nowrap; }

/* Every card grid on the site uses repeat(N, 1fr), whose tracks are floored at the
   items' own minimum width. In the longer-text languages that floor exceeds the page.
   Letting the items shrink lifts the floor without rewriting each template. */
.cards > *, .workflows > *, .steps > *, .guides > *, .mini-grid > *, .stats > *,
.related > *, .spotters > *, .price-stack > *, .channels > *, .split > * { min-width: 0; }

/* The grids nest several levels deep, and each level re-imposes a content-based
   minimum, so naming them one by one kept missing cases. min-width: 0 removes only
   that automatic floor; elements with a width or flex: none of their own (the
   quantity stepper, its buttons, the logo) keep theirs. */
main *, .footer * { min-width: 0; }

/* --- field hints and validation states ------------------------------------ */

.field__hint { margin: 2px 0 0; font-size: 13px; color: var(--ink-3); }
.field__hint[hidden], .field__error[hidden] { display: none; }
.field__error { font-weight: 600; }
.field textarea[aria-invalid="true"] { border-color: var(--sale); }
.field input[aria-invalid="true"]:focus-visible,
.field textarea[aria-invalid="true"]:focus-visible { outline-color: var(--sale); }