/* ==========================================================================
   Vera Clean | Jyothik Enterprise
   css/styles.css (plain CSS, no build step)

   Fonts: Cormorant Garamond (headings, prices) and Jost (body), self-hosted
   variable woff2 files in /fonts (SIL Open Font License). The two latin files
   used above the fold are preloaded in index.html <head>.

   Sections
   01 Tokens            09 Values             17 Contact
   02 Base / reset      10 Collection + card  18 Footer
   03 Utilities         11 Audience           19 Back to top
   04 Buttons           12 Spotlight          20 Mobile bar
   05 Section + head    13 Price table        21 Reveal + motion
   06 (removed)         14 About              22 Responsive
   07 Header + nav      15 FAQ                23 Reduced motion
   08 Hero              16 Enquiry + form
   ========================================================================== */

/* 00 Fonts ----------------------------------------------------------------- */
/* Cormorant latin-ext carries the rupee sign (U+20B9); each file downloads only when used.
   Jost has no rupee glyph, so its latin-ext file is not shipped (system sans covers it). */
@font-face {
  font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("../fonts/cormorant-garamond-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("../fonts/cormorant-garamond-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300 700; font-display: swap;
  src: url("../fonts/cormorant-garamond-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300 700; font-display: swap;
  src: url("../fonts/cormorant-garamond-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/jost-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 01 Tokens ---------------------------------------------------------------- */
:root {
  /* Brand colours (from the logo and labels). --green is the main blue; --gold* are the accents. */
  --navy: #0d2f5b;
  --green: #1a64a3;
  --green-dark: #154f82;
  --green-deep: var(--navy);
  --gold: #d21f30;
  --gold-deep: #2a7fc1;
  --gold-text: #b81c2b;
  --gold-light: #8ecdf0;
  --blue-light: #62bce8;
  --icon: var(--green);
  --ink: #142033;
  --muted: #56606b;
  --muted-strong: #46505a;
  --cream: #f8fbfe;
  --sand: #eef4fa;
  --sage: #e6f0f9;
  --line: #dbe5ef;
  --line-gold: rgba(26, 100, 163, .22);
  --line-strong: #7b8794;
  --white: #ffffff;
  --on-green: #dbe7f3;
  --on-green-muted: #a9bdd2;
  --danger: #b3261e;          /* semantic, not brand */
  --danger-bg: #fbeceb;
  --success: #1d6b3a;         /* 5.9:1 on success-bg */
  --success-bg: #e9f6ee;
  --band-sage: #eaf3fb;       /* ice-blue band (audience, enquiry) */
  /* Product label colours: tints for grounds, accents for text and lines (5:1+ on white) */
  --tint-handwash: #dcebf8; --accent-handwash: #1f6fa3;
  --tint-dish: #dcefd6;     --accent-dish: #2a7a3f;
  --tint-shampoo: #ebdff5;  --accent-shampoo: #7a44ab;
  --tint-floor: #d6eef0;    --accent-floor: #18707a;
  --focus: #1a64a3;           /* ring: 5.96 on the page */

  /* Type */
  --serif: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
  --sans: 'Jost', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --fs-2xs: .75rem;
  --fs-xs: .78rem;
  --fs-sm: .875rem;
  --fs-base: 1rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.125rem;
  /* Cormorant runs small, so serif sizes sit a step larger than a typical scale */
  --fs-xl: clamp(1.45rem, 1.3rem + .5vw, 1.75rem);
  --fs-2xl: clamp(1.75rem, 1.55rem + .7vw, 2.1rem);
  --fs-3xl: clamp(2.2rem, 1.85rem + 1.4vw, 2.85rem);
  --fs-stat: clamp(2.6rem, 2.2rem + 1.6vw, 3.4rem);
  --fs-h2: clamp(2.4rem, 1.8rem + 2.6vw, 3.9rem);
  --fs-h1: clamp(3rem, 1.8rem + 5.2vw, 6rem);
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --lh-tight: 1.04;
  --lh-snug: 1.35;
  --lh-body: 1.65;
  --ls-heading: -.01em;
  --ls-caps: .18em;
  --ls-caps-wide: .22em;
  --measure: 68ch;
  --measure-lead: 56ch;
  --measure-heading: 22ch;

  /* Space */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  /* Vertical rhythm on the 8px grid: 48px on phones up to 64px on desktop.
     Every block in <main> carries it once, below itself, so the gap between
     any two sections is always exactly one --section-y. */
  --section-y: clamp(3rem, 2.43rem + 1.79vw, 4rem);
  --head-gap: clamp(1.5rem, 1.21rem + .89vw, 2rem);   /* section heading -> its content: 24px -> 32px */
  --block-gap: var(--space-5);                        /* heading -> body inside a column: 24px */
  --gutter: clamp(1rem, .6rem + 1.6vw, 1.25rem);
  --container: 1180px;
  --narrow: 860px;            /* single-column blocks: price list, FAQ */

  /* Shape and depth */
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-xl: 36px;
  --radius-pill: 999px;
  --shadow-sm: 0 6px 18px -8px rgba(13, 47, 91, .18);
  --shadow-md: 0 20px 40px -18px rgba(13, 47, 91, .22);
  --shadow-lg: 0 40px 80px -30px rgba(13, 47, 91, .22);
  /* The one card treatment used across the site */
  --card-bg: var(--white);
  --card-border: 1px solid var(--line);
  --card-radius: var(--radius-lg);
  --card-shadow: 0 18px 40px -30px rgba(13, 47, 91, .3);
  --card-shadow-hover: 0 30px 60px -30px rgba(13, 47, 91, .35);

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --dur-fast: .2s;
  --dur: .3s;
  --dur-slow: .6s;

  /* Layout */
  --header-h: 64px;
  --mobile-bar-h: 76px;
  --tap: 44px;
}

/* 02 Base / reset ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Anchor jumps and focus scrolling clear the sticky header */
  scroll-padding-top: calc(var(--header-h) + var(--space-4));
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: var(--sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

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

a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
address { font-style: normal; }
b, strong { font-weight: var(--fw-semibold); }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-heading);
  color: var(--navy);
  text-wrap: balance;
}

em { font-style: italic; color: var(--gold-deep); }
/* Cormorant defaults to old-style figures; prices and stats read better as full-height numerals */
.hero__price-value,
.product-card__price,
.price-table__value,
.lightbox__caption { font-variant-numeric: lining-nums; }  /* used only inside large headings */
p { text-wrap: pretty; }

::selection { background: var(--green); color: var(--white); }

/* Visible focus on everything; never removed without replacement */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

/* Programmatic focus targets (main, error summary) should not show a heavy ring */
main:focus, [tabindex="-1"]:focus:not(:focus-visible) { outline: none; }

/* Menu open: scroll lock on the root only. Locking body would make it the
   scroll container and carry the sticky header away with it. */
html.is-menu-open { overflow: hidden; }

/* 03 Utilities ------------------------------------------------------------- */
.wrap {
  width: min(var(--container), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

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

[hidden] { display: none !important; }

/* Controls and notes that only work with JavaScript */
html:not(.js) [data-js-only] { display: none !important; }

/* Skip link: off-screen until focused (never display:none) */
.skip-link {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 1000;
  padding: var(--space-3) var(--space-5);
  background: var(--green);
  color: var(--white);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
  transform: translateY(-200%);
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus, .skip-link:focus-visible {
  transform: none;
  outline-color: var(--white);
  outline-offset: 2px;
}

/* 04 Buttons --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 48px;
  padding: .85rem 1.75rem;
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  letter-spacing: .01em;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}

.btn--primary {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
}
.btn--primary:hover {
  background: var(--green-dark);
  border-color: var(--green-dark);
  box-shadow: 0 12px 28px -8px rgba(13, 47, 91, .4);
  transform: translateY(-2px);
}

.btn--outline {
  background: transparent;
  border-color: var(--green);
  color: var(--green);
}
.btn--outline:hover {
  background: var(--green);
  color: var(--white);
  transform: translateY(-2px);
}

.btn:active { transform: translateY(0) scale(.98); box-shadow: none; }

.btn--small {
  min-height: var(--tap);
  padding: .6rem 1.25rem;
  font-size: var(--fs-sm);
}

.btn--block { display: flex; width: 100%; }

.btn:disabled, .btn[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Icon used inside buttons AND inside .enquiry__aside-link: not scoped to .btn */
.btn__icon {
  width: 1.125em;
  height: 1.125em;
  flex: none;
}

/* 05 Section + section head ----------------------------------------------- */
.section { padding-block: 0 var(--section-y); }

/* Colour bands: give the page rhythm (cream, sage, cream, deep green ...) */
.section--sage,
.section--dark { padding-top: var(--section-y); margin-bottom: var(--section-y); }
.section--sage { background: var(--band-sage); }
/* Two bands back to back (Who it's for -> Price list): no pale strip between them */
.section--sage + .section--dark { margin-top: calc(var(--section-y) * -1); }
.section--dark {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(60% 80% at 85% 0%, rgba(142, 205, 240, .16), transparent 70%),
    radial-gradient(50% 70% at 10% 100%, rgba(142, 205, 240, .10), transparent 70%),
    var(--green-deep);
  color: var(--on-green);
}
.section--dark :focus-visible { outline-color: var(--gold-light); }
.section--dark .section-head__title { color: var(--white); }
.section--dark .section-head__title em { color: var(--gold-light); }
.section--dark .section-head__text { color: var(--on-green); }
/* Primary action on the dark band: logo red with white text (5.7:1) */
.section--dark .btn--primary {
  background: #c8202f;
  border-color: #c8202f;
  color: var(--white);
}
.section--dark .btn--primary:hover {
  background: #a91a27;
  border-color: #a91a27;
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .45);
}

.section-head {
  max-width: 640px;
  margin-bottom: var(--head-gap);
}
.section-head--center {
  margin-inline: auto;
  text-align: center;
}
.section-head__title {
  font-size: var(--fs-h2);
  margin-bottom: var(--space-3);
  max-width: var(--measure-heading);
}
.section-head--center .section-head__title { margin-inline: auto; }

.section-head__text {
  font-size: var(--fs-md);
  color: var(--muted-strong);
  max-width: var(--measure-lead);
}
.section-head--center .section-head__text { margin-inline: auto; }

/* Shared small-caps label: product category, price labels, table heads,
   contact labels and footer column titles all use this one style */
.product-card__category,
.hero__price-label,
.price-table__head th,
.contact__label,
.site-footer__title {
  font-family: var(--sans);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caps-wide);
  text-transform: uppercase;
  color: var(--gold-text);
}

/* 07 Header + nav ---------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(248, 251, 254, .97);   /* near-opaque: focus rings keep >=3:1 over scrolled content */
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.site-header.is-scrolled {
  border-bottom-color: var(--line-gold);
  box-shadow: 0 8px 24px -16px rgba(13, 47, 91, .25);
}
.site-header.is-open { background: var(--cream); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: var(--header-h);
}

.site-header__actions .btn { font-size: var(--fs-base); }
.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: none;
}

/* Logo */
.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap);
  flex: none;
  border-radius: var(--radius-sm);
}
/* Logo lockup: images/brand/vera-clean-logo.svg (same artwork as the product labels) */
.logo__lockup { display: flex; flex-direction: column; align-items: flex-start; }
.logo__img { display: block; width: auto; height: 38px; }
.logo__sub {
  display: block;
  margin-top: 2px;
  padding-left: 2px;
  line-height: 1.2;
  font-family: var(--sans);
  font-size: .66rem;
  font-weight: var(--fw-medium);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Desktop nav */
.site-nav__toggle { display: none; }

.site-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, .2rem + 2vw, 2.25rem);
}
.site-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--green);
  transition: color var(--dur-fast) var(--ease);
}
.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur) var(--ease);
}
.site-nav__link:hover { color: var(--green); }
.site-nav__link:hover::after { transform: scaleX(1); }

/* Active section: colour + weight + full underline (not colour alone) */
.site-nav__link.is-active,
.site-nav__link[aria-current="true"],
.site-nav__link[aria-current="page"],
.site-nav__link[aria-current="location"] {
  color: var(--green);
  font-weight: var(--fw-semibold);
}
.site-nav__link.is-active::after,
.site-nav__link[aria-current="true"]::after,
.site-nav__link[aria-current="page"]::after,
.site-nav__link[aria-current="location"]::after {
  transform: scaleX(1);
  background: var(--gold);
}

/* Mobile-menu-only CTA: hidden at desktop */
.site-nav__item:has(.site-nav__cta) { display: none; }
.site-nav__cta { display: none; }

/* 08 Hero ------------------------------------------------------------------ */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Only block with top padding: a short lead-in under the header,
     then the standard section rhythm below (8px top) */
  padding-block: clamp(1rem, .5rem + 2vw, 2.5rem) var(--section-y);
}

.hero__backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(22% 30% at 56% 26%, color-mix(in srgb, var(--tint-handwash) 85%, transparent), transparent 70%),
    radial-gradient(20% 30% at 99% 22%, color-mix(in srgb, var(--tint-dish) 85%, transparent), transparent 70%),
    radial-gradient(22% 30% at 56% 80%, color-mix(in srgb, var(--tint-shampoo) 85%, transparent), transparent 70%),
    radial-gradient(20% 30% at 99% 82%, color-mix(in srgb, var(--tint-floor) 85%, transparent), transparent 70%),
    radial-gradient(50% 60% at 80% 45%, rgba(26, 100, 163, .12), transparent 70%);
}
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(2.5rem, 1rem + 5vw, 5.5rem);
  align-items: center;
}
.hero__content { min-width: 0; align-self: start; }   /* text starts right under the header */

.hero__title {
  font-size: var(--fs-h1);
  margin: var(--space-4) 0 var(--space-5);
  max-width: 13ch;
}
.hero__accent { color: var(--gold-deep); }

.hero__lead {
  font-size: var(--fs-md);
  color: var(--muted-strong);
  max-width: var(--measure-lead);
  margin-bottom: var(--space-6);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Three equal columns, each label centred over its value */
.hero__prices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line-gold);
  max-width: 480px;
}
.hero__price {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
}
.hero__price + .hero__price { border-left: 1px solid var(--line); }
.hero__prices .hero__price-label { letter-spacing: .14em; white-space: nowrap; }
.hero__price-value {
  font-family: var(--serif);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-semibold);
  line-height: 1;
  color: var(--green);
}

/* Arched frame (shared with the spotlight) with a fine gold outline outside it */
.hero__visual,
.spotlight__media {
  position: relative;
  min-width: 0;
  width: min(100%, 400px);
  justify-self: center;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-radius: 999px 999px var(--radius-lg) var(--radius-lg);
  background: radial-gradient(80% 60% at 50% 35%, var(--white), #e6eff8 80%);
  box-shadow: var(--card-shadow-hover);
}
.hero__visual::before,
.spotlight__media::before {
  content: "";
  position: absolute;
  inset: -14px;
  border: 1px solid var(--line-gold);
  border-radius: 999px 999px calc(var(--radius-lg) + 14px) calc(var(--radius-lg) + 14px);
  pointer-events: none;
}
.hero__visual {
  aspect-ratio: 4 / 5;
  padding: 22% 9% 9%;
}
/* Hero range: the four products in quadrants, divided by a fine gold "+" */
.hero__visual--range {
  align-items: stretch;
  padding: 15% 6% 6%;
}
.hero__range {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hero__range::before,
.hero__range::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.hero__range::before {                 /* vertical stroke */
  top: 2%;
  bottom: 2%;
  left: 50%;
  width: 1px;
  background: linear-gradient(transparent, var(--blue-light) 22%, var(--blue-light) 78%, transparent);
}
.hero__range::after {                  /* horizontal stroke */
  left: 2%;
  right: 2%;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--blue-light) 22%, var(--blue-light) 78%, transparent);
}
.hero__range-item {
  --tint: rgba(234, 216, 192, .75);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 6%;
  mix-blend-mode: multiply;       /* the item and its button are animated (own layers), so blend at each level */
}
.hero__range-item--handwash { --tint: rgba(236, 196, 160, .75); }
.hero__range-item--dish     { --tint: rgba(178, 222, 162, .75); }
.hero__range-item--shampoo  { --tint: rgba(208, 184, 238, .75); }
.hero__range-item--floor    { --tint: rgba(168, 222, 220, .75); }
/* Soft glow in each product's label colour, behind the can */
.hero__range-item::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 43%;
  width: 104%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--tint), transparent);
  transform: translate(-50%, -50%);
  transition: transform .6s var(--ease-out), opacity .6s var(--ease-out);
  pointer-events: none;
}
.hero__range-item:first-child::after {   /* small diamond where the strokes cross */
  content: "";
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 9px;
  height: 9px;
  z-index: 2;
  background: var(--white);
  border: 1px solid var(--gold);
  box-shadow: 0 0 0 3px rgba(248, 251, 254, .9);
  transform: rotate(45deg);
}
.hero__range .zoom {
  position: relative;
  display: flex;
  justify-content: center;
  mix-blend-mode: multiply;
}
.hero__range-image {
  width: 80%;
  height: auto;
  mix-blend-mode: multiply;
  transform-origin: 50% 100%;
  transition: transform .5s var(--ease-out);
}
.hero__range-item:hover::before { transform: translate(-50%, -50%) scale(1.12); }
.hero__range .zoom:hover .hero__range-image,
.hero__range .zoom:focus-visible .hero__range-image { transform: translateY(-5px) scale(1.04); }
html.js .hero__range .zoom::after { width: 28px; height: 28px; right: 6%; bottom: 0; background-size: 14px; }
@media (hover: none) {
  html.js .hero__range .zoom::after { opacity: 0; }
}
.hero__range-label {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: .45em;
  margin-top: var(--space-2);
  white-space: nowrap;
}
.hero__range-name {
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: var(--fw-medium);
  line-height: 1.2;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--gold-text);
  transition: color var(--dur) var(--ease);
}
.hero__range-item:hover .hero__range-name { color: var(--green); }

/* 09 Values ---------------------------------------------------------------- */

/* 10 Collection + product card -------------------------------------------- */
.collection__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, .5rem + 1.5vw, 1.625rem);
}

.product-card {
  --tint: var(--sage);
  --accent: var(--green);
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 10px;
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color var(--dur) var(--ease);
}
.product-card:hover,
.product-card:focus-within {
  transform: translateY(-6px);
  box-shadow: var(--card-shadow-hover), 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}

.product-card--handwash { --tint: var(--tint-handwash); --accent: var(--accent-handwash); }
.product-card--dish     { --tint: var(--tint-dish);     --accent: var(--accent-dish); }
.product-card--shampoo  { --tint: var(--tint-shampoo);  --accent: var(--accent-shampoo); }
.product-card--floor    { --tint: var(--tint-floor);    --accent: var(--accent-floor); }
.product-card .product-card__category { color: var(--accent); font-weight: var(--fw-semibold); }
/* Thin product-colour line under each card title */

/* Inset media window: 5 L (790x1100) and 1 L (480x770) both sit inside without reflow */
.product-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 3.5rem var(--space-6) var(--space-4);
  border-radius: calc(var(--card-radius) - 8px);
  /* Each product tint softened toward cream so all four sit in one palette */
  background: radial-gradient(circle at 50% 38%, var(--white) 0%, color-mix(in srgb, var(--tint) 30%, var(--cream)) 75%);
  overflow: hidden;
}
.product-card__image {
  width: 100%;
  height: 92%;
  object-fit: contain;
  object-position: center bottom;
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(#000 90%, transparent);
  mask-image: linear-gradient(#000 90%, transparent);
  transition: transform .9s var(--ease-out), opacity .25s ease;
}
.product-card:hover .product-card__image { transform: scale(1.05) translateY(-4px); }
.product-card__image.is-fading { opacity: 0; }
/* 1 L bottle renders smaller than the 5 L can; the media box is fixed, so no layout shift */
.product-card__image[data-pack="1l"] { height: 72%; }   /* set by js/main.js */

/* Size toggle */
.product-card__sizes {
  position: absolute;
  top: var(--space-3);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  padding: 3px;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(13, 47, 91, .12);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
}
/* Without JS the toggle does nothing, so hide it (the 5 L default is shown) */
html:not(.js) .product-card__sizes { display: none; }

.product-card__size-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
  min-width: 3.75rem;
  min-height: var(--tap);
  padding: 0 .75rem;
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--muted-strong);
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.product-card__size-btn:hover { color: var(--green); background: rgba(13, 47, 91, .07); }
.product-card__size-btn:focus-visible { outline-offset: 1px; }

/* Selected: fill + weight + check mark (not colour alone) */
.product-card__size-btn.is-selected,
.product-card__size-btn[aria-pressed="true"] {
  background: var(--green);
  color: var(--white);
  font-weight: var(--fw-semibold);
}
.product-card__size-btn.is-selected::before,
.product-card__size-btn[aria-pressed="true"]::before {
  content: "";
  width: .45em;
  height: .8em;
  margin-top: -.15em;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.product-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-5) var(--space-4) var(--space-3);
  text-align: center;
}
.product-card__title {
  font-size: var(--fs-2xl);
  margin: var(--space-2) 0 var(--space-3);
}
.product-card__text {
  flex: 1;
  font-size: var(--fs-sm);
  color: var(--muted-strong);
}

.product-card__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}
.product-card__foot > p {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-2);
  line-height: 1.15;
  min-width: 0;
}
.product-card__price {
  font-family: var(--serif);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  color: var(--green);
}
.product-card__unit {
  font-size: var(--fs-xs);
  letter-spacing: .04em;
  color: var(--muted);
}
/* Quiet outline action so four cards don't shout; fills on hover */
.product-card__enquire.btn--primary {
  align-self: stretch;
  background: transparent;
  color: var(--green);
  border-color: rgba(13, 47, 91, .35);
}
.product-card__enquire.btn--primary:hover,
.product-card:hover .product-card__enquire.btn--primary {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
}

/* 11 Audience -------------------------------------------------------------- */
.audience__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, .5rem + 1.5vw, 1.75rem);
}

.audience__card {
  position: relative;
  --card-pad: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: var(--card-pad);
  border-radius: var(--card-radius);
  border: var(--card-border);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  isolation: isolate;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color var(--dur) var(--ease);
}
.audience__card:hover {
  transform: translateY(-6px);
  box-shadow: var(--card-shadow-hover);
  border-color: var(--line-gold);
}
/* Each card carries its own pack (decorative): text on the left, the pack on the
   right, vertically centred in the card. Same height in both cards so they match. */
.audience__card::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  right: clamp(1rem, 3vw, 2.5rem);
  height: clamp(170px, 120px + 9vw, 230px);
  aspect-ratio: 480 / 770;
  transform: translateY(-50%);
  background: url("../images/handwash-1l-240.jpg?v=2") center / contain no-repeat;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.audience__card--business::before {
  aspect-ratio: 790 / 1100;
  background-image: url("../images/floor-5l-400.jpg?v=2");
}
.audience__card > * { max-width: 62%; }

.audience__icon {
  width: 52px;
  height: 52px;
  padding: 13px;
  border-radius: 50%;
  border: 1px solid var(--line-gold);
  color: var(--icon);
  margin-bottom: var(--space-5);
}

.audience__title { font-size: var(--fs-2xl); }

.audience__size {
  display: inline-flex;
  align-items: center;
  margin-top: var(--space-3);
  font-family: var(--serif);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  color: var(--gold-deep);
  font-variant-numeric: lining-nums;
}

.audience__text {
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--muted-strong);
}

.audience__text { margin-bottom: var(--space-6); }
/* Pinned to the foot of the card so both cards' buttons sit on the same line */
.audience__cta { margin-top: auto; }

/* 12 Spotlight ------------------------------------------------------------- */
.spotlight__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.5rem, 1rem + 5vw, 5rem);
  align-items: center;
}
.spotlight__media::before { border-radius: calc(var(--radius-lg) + 14px); }
.spotlight__media {
  width: min(100%, 500px);
  border-radius: var(--radius-lg);
  padding: clamp(3rem, 2rem + 3vw, 4.5rem) clamp(1rem, .5rem + 1.5vw, 1.75rem) clamp(1.25rem, 1rem + 1vw, 1.75rem);
}
.spotlight__image {
  width: 100%;
  margin-inline: auto;
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(#000 92%, transparent);
  mask-image: linear-gradient(#000 92%, transparent);
}
.spotlight__content { min-width: 0; }
.spotlight__content .section-head { margin-bottom: 0; }

.spotlight__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* 13 Price table ----------------------------------------------------------- */
.price-table__box {
  position: relative;
  max-width: var(--narrow);
  margin-inline: auto;
  padding: clamp(1.25rem, .75rem + 2vw, 2.25rem) clamp(1.25rem, .5rem + 4vw, 3.5rem);
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  overflow-x: auto;   /* own scroll container: page body never scrolls sideways */
}
/* Inner hairline frame, like a printed menu */
.price-table__box::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid var(--line-gold);
  border-radius: calc(var(--card-radius) - 8px);
  pointer-events: none;
}
.price-table__table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: lining-nums tabular-nums;
}
.price-table__table th,
.price-table__table td {
  padding: 1.15rem 0 1.15rem var(--space-3);
  text-align: left;
  border-bottom: 1px dashed var(--line);
  vertical-align: middle;
}
.price-table__table th:first-child { padding-left: 0; }
.price-table__table tbody .price-table__row:last-child > * { border-bottom: 0; }

.price-table__head th {
  padding-block: var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--line-gold);
}
/* Product colour dot, hung in the left padding so a name that wraps lines up
   under its first word ("Liquid / Dish Washer"), not under the dot. Inline, so it
   always sits on the first line of text whatever the cell's vertical alignment. */
.price-table__table th.price-table__product { padding-left: 1.4rem; }
.price-table__product::before {
  content: "";
  display: inline-block;
  width: .6rem;
  height: .6rem;
  margin: 0 .8rem 0 -1.4rem;
  vertical-align: .12em;
  border-radius: 50%;
  background: var(--dot, var(--green));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot, var(--green)) 18%, transparent);
}
.price-table__table tbody tr:nth-child(1) { --dot: var(--accent-handwash); }
.price-table__table tbody tr:nth-child(2) { --dot: var(--accent-dish); }
.price-table__table tbody tr:nth-child(3) { --dot: var(--accent-shampoo); }
.price-table__table tbody tr:nth-child(4) { --dot: var(--accent-floor); }
.section--dark .price-table__note { color: var(--on-green); }
.section--dark .price-table__box { box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .55); }
.price-table__product {
  font-family: var(--serif);
  line-height: 1.25;
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
  color: var(--green);
}
.price-table__value {
  width: 7rem;
  white-space: nowrap;
  font-family: var(--serif);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  color: var(--green);
}
.price-table__table .price-table__value { text-align: center; padding-inline: var(--space-3); }
.price-table__head .price-table__value { width: 7rem; }
.price-table__table tbody .price-table__row { transition: background-color var(--dur-fast) var(--ease); }

.price-table__note {
  margin-top: var(--space-4);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.price-table__actions {
  display: flex;
  justify-content: center;
  margin-top: var(--space-6);
}

/* 14 About ----------------------------------------------------------------- */
.about { position: relative; overflow: hidden; isolation: isolate; }

.about__inner { max-width: var(--narrow); }
.about__content { min-width: 0; }
.about__content .section-head { margin-bottom: var(--block-gap); }
.about__text {
  font-size: var(--fs-md);
  color: var(--muted-strong);
  margin-bottom: var(--space-4);
  max-width: var(--measure);
}
.about__text:last-child { margin-bottom: 0; }
.about__brand { color: var(--green); }

/* 15 FAQ ------------------------------------------------------------------- */
.faq__head { max-width: var(--narrow); margin-inline: auto; }
.faq__list {
  display: grid;
  max-width: var(--narrow);
  margin-inline: auto;
  border-top: 1px solid var(--line-gold);
}
.faq__item {
  border-bottom: 1px solid var(--line-gold);
  transition: background-color var(--dur) var(--ease);
}
.faq__item:hover,
.faq__item[open] { background: rgba(255, 255, 255, .55); }

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 64px;
  padding: var(--space-5) var(--space-4);
  font-family: var(--serif);
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--green);
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius-md);
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question::marker { content: ""; }
.faq__question:focus-visible { outline-offset: -3px; }

.faq__icon {
  width: 36px;
  height: 36px;
  flex: none;
  padding: 8px;
  border-radius: 50%;
  border: 1px solid var(--line-gold);
  color: var(--icon);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.faq__question:hover .faq__icon { background: var(--white); }
.faq__item[open] .faq__icon {
  transform: rotate(180deg);
  background: var(--green);
  color: var(--white);
}

.faq__answer {
  padding: 0 var(--space-4) var(--space-5);
  font-size: var(--fs-sm);
  color: var(--muted-strong);
  max-width: var(--measure);
}
.faq__answer a {
  color: var(--green);
  font-weight: var(--fw-medium);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.faq__answer a:hover { text-decoration-thickness: 2px; }

/* 16 Enquiry + form -------------------------------------------------------- */
.enquiry {
  padding-top: var(--section-y);
  background: linear-gradient(180deg, var(--cream) 0, var(--band-sage) 12%, var(--band-sage) 88%, var(--cream) 100%);
}
.enquiry__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  align-items: start;
}
.enquiry__form-wrap {
  position: relative;
  overflow: hidden;
  min-width: 0;
  padding: clamp(1.25rem, .75rem + 2.5vw, 2.75rem);
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}

.enquiry__form-wrap::before {   /* fine gold edge along the top of the card */
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--green), var(--blue-light) 50%, var(--green));
}
.enquiry__aside {
  position: sticky;
  top: calc(var(--header-h) + var(--space-5));
  min-width: 0;
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}

.enquiry__direct {
  display: grid;
  gap: var(--space-3);
}
.enquiry__direct-title {
  font-family: var(--serif);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  color: var(--green);
}
.enquiry__aside-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 48px;
  padding: var(--space-2) var(--space-4);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-weight: var(--fw-medium);
  color: var(--green);
  overflow-wrap: break-word;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.enquiry__aside-link:hover { border-color: var(--green); transform: translateX(2px); }
.enquiry__aside-link .btn__icon { color: var(--icon); }

/* Form */
.form { display: grid; gap: var(--space-5); }

.form__note {
  font-size: var(--fs-sm);
  color: var(--muted);
}
.form__optional {
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  color: var(--muted);
}

/* Numbered steps. The counter skips hidden steps, so the dealer path reads 1, 2. */
.form { counter-reset: form-step; }
.form__step {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0;
  margin-bottom: var(--space-4);
  font-family: var(--serif);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--green);
}
.form__step-num::before {
  counter-increment: form-step;
  content: counter(form-step);
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px var(--white), 0 0 0 4px var(--blue-light);
  color: var(--white);
  font-family: var(--sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: 1;
}
/* Steps 2 and 3 start with a hairline divider */
.form__step--heading {
  margin: var(--space-3) 0 calc(var(--space-4) - var(--space-5));
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}

/* Step 1: "I want to" path cards. The radio is visually hidden but stays focusable. */
.paths {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}
.path {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 2px;
  padding: var(--space-4) var(--space-4) var(--space-4);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 2px rgba(13, 47, 91, .04);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.path:hover { border-color: rgba(13, 47, 91, .45); box-shadow: var(--shadow-sm); }
/* Invisible radio stretched over the whole card: any tap selects it */
.path__radio {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.path__icon {
  width: 2.5rem;
  height: 2.5rem;
  padding: .55rem;
  margin-bottom: var(--space-3);
  border-radius: 50%;
  background: #e8f1fa;
  color: var(--icon);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.path__title { font-weight: var(--fw-semibold); color: var(--green); line-height: 1.3; }
.path__text { font-size: var(--fs-xs); color: var(--muted-strong); line-height: 1.45; }
.path__check {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  background: var(--white);
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.path:has(.path__radio:checked) {
  border-color: var(--green);
  background: #eef5fc;
  box-shadow: inset 0 0 0 1px var(--green), var(--shadow-sm);
}
.path:has(.path__radio:checked) .path__icon { background: var(--green); color: var(--white); }
.path:has(.path__radio:checked) .path__check {
  border-color: var(--green);
  background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 70% no-repeat;
}
.path:has(.path__radio:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Step 2: product rows, one quantity stepper per pack size */
.form__fieldset.products { display: block; }
.products > .form__step { float: left; width: 100%; }   /* floated: sits in the flow, not on the fieldset border */
.products::before {
  content: "";
  display: block;
  margin: var(--space-3) 0 var(--space-6);
  border-top: 1px solid var(--line);
}
.products__head,
.products__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 8.25rem 8.25rem;
  column-gap: var(--space-3);
  align-items: center;
}
.products__head {
  clear: both;
  padding: 0 var(--space-4) var(--space-2);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--gold-text);
}
.products__head span { text-align: center; }
.products__head span:first-child { text-align: left; letter-spacing: .06em; text-transform: none; font-size: var(--fs-xs); color: var(--muted); }
.products__list { clear: both; display: grid; gap: var(--space-2); }
.products__row {
  padding: var(--space-3) var(--space-4);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
/* Each row carries its product's label colours (same tints as the product cards).
   Accents are 5:1+ on white and on the selected-row background. */
.products__row { --tint: var(--sage); --accent: var(--green); }
.products__row[data-product-row="handwash"] { --tint: var(--tint-handwash); --accent: var(--accent-handwash); }
.products__row[data-product-row="dish"]     { --tint: var(--tint-dish);     --accent: var(--accent-dish); }
.products__row[data-product-row="shampoo"]  { --tint: var(--tint-shampoo);  --accent: var(--accent-shampoo); }
.products__row[data-product-row="floor"]    { --tint: var(--tint-floor);    --accent: var(--accent-floor); }
.products__row:has(.qty.is-active) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--tint) 35%, var(--white));
  box-shadow: inset 4px 0 0 var(--accent), 0 6px 16px -12px var(--accent);
}
.products__qtys { display: contents; }
.products__cell { display: flex; justify-content: center; }
.products__item { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.products__thumb-wrap {
  display: block;
  width: 3rem;
  height: 3rem;
  flex: none;
  border-radius: var(--radius-sm);
  background: radial-gradient(circle at 50% 40%, var(--white), var(--tint) 85%);
  overflow: hidden;
}
.products__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;   /* the photo's white ground takes on the product tint */
}
.products__label { display: grid; min-width: 0; }
.products__name { font-family: var(--serif); font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--green); line-height: 1.2; }
.products__cat { font-size: var(--fs-2xs); font-weight: var(--fw-medium); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--accent); }
.products__size { display: none; }
.products__count {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: .35rem .85rem;
  border-radius: var(--radius-pill);
  background: var(--sand);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--muted-strong);
}
.products__count.is-active {
  background: #e1edf9;
  color: var(--green);
}
.products__count.is-active::before {
  content: "";
  width: 1rem;
  height: 1rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d2f5b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.products.is-invalid .products__row { border-color: rgba(179, 38, 30, .5); }

.qty {
  display: inline-flex;
  align-items: center;
  padding: 2px;
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.qty.is-active { border-color: var(--accent, var(--green)); box-shadow: inset 0 0 0 1px var(--accent, var(--green)); }
.qty:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.qty__btn {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;   /* 44px touch target */
  flex: none;
  border-radius: 50%;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--green);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.qty__btn:hover { background: rgba(13, 47, 91, .08); }
.qty__btn[data-step="1"] { background: rgba(13, 47, 91, .06); }
.qty.is-active .qty__btn[data-step="1"] { background: var(--accent, var(--green)); color: var(--white); }
.qty:not(.is-active) .qty__btn[data-step="-1"] { color: var(--line-strong); }
.qty__btn:focus-visible { outline-offset: -2px; }
.qty__input {
  width: 3.25ch;
  min-width: 2.5rem;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}
.qty__input::-webkit-outer-spin-button,
.qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty__input:focus-visible { outline: none; }
.qty__input[aria-invalid="true"] { color: var(--danger); }
html:not(.js) .qty__input { width: 4.5rem; padding-inline: var(--space-2); }

/* Step 3: inputs with a small leading icon, and a fixed +91 phone prefix */
.form__input.form__input--icon {
  padding-left: 2.75rem;
  background-repeat: no-repeat;
  background-position: .95rem center;
  background-size: 1.1rem;
}
.form__input.form__input--user { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a64a3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E"); }
.form__input.form__input--shop { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a64a3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l1.6-5h14.8L21 9'/%3E%3Cpath d='M3 9h18'/%3E%3Cpath d='M5 9v12h14V9'/%3E%3Cpath d='M10 21v-5h4v5'/%3E%3C/svg%3E"); }
.form__affix { position: relative; }
.form__prefix {
  position: absolute;
  top: 1.5px;
  bottom: 1.5px;
  left: 1.5px;
  display: grid;
  place-items: center;
  padding: 0 .85rem;
  border-right: 1px solid var(--line);
  border-radius: calc(var(--radius-sm) - 1px) 0 0 calc(var(--radius-sm) - 1px);
  background: var(--cream);
  font-weight: var(--fw-semibold);
  color: var(--green);
  pointer-events: none;
}
.form__input.form__input--prefixed { padding-left: 4.4rem; }

.form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}
.form__field { display: grid; gap: var(--space-2); min-width: 0; align-content: start; }

.form__label,
.form__legend {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--green);
}
.form__fieldset { border: 0; min-width: 0; display: grid; gap: var(--space-2); }
.form__legend { padding: 0; margin-bottom: var(--space-2); }

.form__input,
.form__select,
.form__textarea {
  width: 100%;
  min-height: 48px;
  padding: .7rem .95rem;
  background: var(--white);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: var(--fs-base);   /* 16px: prevents iOS zoom */
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.form__textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.form__input::placeholder,
.form__textarea::placeholder { color: var(--muted); opacity: 1; }

.form__select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d2f5b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  background-size: 18px;
  cursor: pointer;
}

.form__input:hover,
.form__select:hover,
.form__textarea:hover { border-color: var(--green); }

.form__input:focus-visible,
.form__select:focus-visible,
.form__textarea:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 1px;
  border-color: var(--green);
}

.form__hint {
  font-size: var(--fs-xs);
  color: var(--muted);
}

/* Radio options as pill cards; native radio stays visible */
.form__options { display: grid; gap: var(--space-3); }
.form__options--inline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form__option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 52px;
  padding: var(--space-3) var(--space-4);
  background: var(--white);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.form__option:hover { border-color: var(--green); }
.form__option:has(.form__radio:checked) {
  border-color: var(--green);
  border-width: 2px;
  background: #eaf3fb;
  color: var(--green);
  font-weight: var(--fw-semibold);
}
.form__option:has(.form__radio:focus-visible) {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.form__radio {
  width: 20px;
  height: 20px;
  flex: none;
  accent-color: var(--green);
  cursor: pointer;
}
.form__radio:focus-visible { outline: none; }

/* Errors: text + icon + thicker border, never colour alone */
.form__error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--danger);
}
.form__error:empty { display: none; }
.form__error::before {
  content: "!";
  display: grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: .15em;
  flex: none;
  border-radius: 50%;
  background: var(--danger);
  color: var(--white);
  font-size: .72rem;
  font-weight: var(--fw-semibold);
  line-height: 1;
}

.form__field.is-invalid .form__input,
.form__field.is-invalid .form__select,
.form__field.is-invalid .form__textarea,
.form__input.is-invalid,
.form__select.is-invalid,
.form__textarea.is-invalid,
.form__input[aria-invalid="true"],
.form__select[aria-invalid="true"],
.form__textarea[aria-invalid="true"] {
  border-color: var(--danger);
  border-width: 2px;
  background-color: #fffafa;
}
.form__fieldset.is-invalid .form__option { border-color: var(--danger); }
.form__field.is-invalid .form__label,
.form__fieldset.is-invalid .form__legend { color: var(--danger); }

/* Error summary */
.form__errors {
  padding: var(--space-4) var(--space-5);
  background: var(--danger-bg);
  border: 1px solid rgba(179, 38, 30, .3);
  border-left: 5px solid var(--danger);
  border-radius: var(--radius-sm);
  color: var(--danger);
}
.form__errors:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.form__errors-title {
  font-family: var(--sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  letter-spacing: 0;
  color: var(--danger);
}
.form__errors-list {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-2);
  padding-left: 1.2rem;
  list-style: disc;
  font-size: var(--fs-sm);
}
.form__errors-list a {
  display: inline;
  color: var(--danger);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.form__errors-list a:hover { text-decoration-thickness: 2px; }

.form__submit { min-height: 54px; font-size: var(--fs-base); }

/* Status (role=status live region: never display:none, so it stays in the a11y tree) */
.form__status {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-sm);
  border-left: 5px solid var(--green);
  background: #eaf3fb;
  color: var(--green);
  font-size: var(--fs-sm);
}
.form__status:empty {
  padding: 0;
  border: 0;
  background: none;
  margin-top: calc(var(--space-5) * -1);   /* cancel the form grid gap while empty */
}
/* Status stays visible so everyone sees that the message still has to be sent in
   WhatsApp, and why the fallback link below is there. */
.form__status.is-error {
  background: var(--danger-bg);
  border-left-color: var(--danger);
  color: var(--danger);
}
.form__status.is-error::before {
  content: "!";
  font-weight: var(--fw-semibold);
  margin-right: var(--space-2);
}

/* "Open WhatsApp" + "Copy enquiry text", shown after a successful submit */
.form__fallback {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.form__fallback[hidden] { display: none; }

/* Without JavaScript the form cannot build a WhatsApp message: hide it; the
   <noscript> block offers a direct WhatsApp link instead. */
html:not(.js) [data-enquiry-form] { display: none; }
.enquiry__noscript {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
  padding: var(--space-5);
  border-radius: var(--radius-sm);
  border-left: 5px solid var(--green);
  background: #eaf3fb;
}
.enquiry__noscript a:not(.btn) { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }

/* 17 Contact --------------------------------------------------------------- */
.contact__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 760px;
  gap: var(--space-4);
}
.contact__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: var(--space-5);
  align-items: start;
  padding: var(--space-5) clamp(1.25rem, 1rem + 1vw, 1.75rem);
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.contact__item:hover {
  border-color: var(--green);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}
.contact__icon {
  grid-row: 1 / span 2;
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: 50%;
  background: #e8f1fa;
  color: var(--icon);
}
.contact__value {
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--green);
  overflow-wrap: break-word;
}

/* 18 Footer ---------------------------------------------------------------- */
.site-footer {
  padding: var(--section-y) 0 var(--space-6);
  background:
    radial-gradient(50% 90% at 100% 0%, rgba(142, 205, 240, .12), transparent 70%),
    var(--green-deep);
  border-top: 3px solid var(--gold);
  font-size: var(--fs-sm);
  color: var(--on-green);
}
.site-footer :focus-visible { outline-color: var(--gold-light); }
.site-footer .site-footer__title { color: var(--gold-light); }
.logo--footer .logo__lockup {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--white);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: var(--space-6) var(--space-7);
}
.site-footer__brand { min-width: 0; }
.site-footer__tagline {
  margin-top: var(--space-5);
  max-width: 26ch;
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-xl);
  line-height: 1.3;
  color: var(--gold-light);
}
.logo--footer .logo__img { height: 48px; }
.site-footer__copy,
.site-footer__domain { margin: 0; }
.site-footer__domain { letter-spacing: .04em; }
.site-footer__col { min-width: 0; }
.site-footer__title { margin-bottom: var(--space-4); }
.site-footer__list { display: grid; gap: var(--space-1); }
.site-footer__list li { overflow-wrap: break-word; }
.site-footer__link {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--on-green);
  transition: color var(--dur-fast) var(--ease);
}
.site-footer__link:hover {
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: var(--gold-light);
  text-underline-offset: 4px;
}
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(142, 205, 240, .25);
  color: var(--on-green-muted);
  font-size: var(--fs-xs);
  letter-spacing: .04em;
}

/* 18a 404 page ------------------------------------------------------------- */
.not-found { padding-top: var(--section-y); min-height: 70vh; }
.not-found .section-head__title { font-size: var(--fs-h2); }
.not-found__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
.not-found__contact { margin-top: var(--space-6); text-align: center; font-size: var(--fs-sm); color: var(--muted-strong); }
.not-found__contact a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }

/* 18b Zoomable images + lightbox ------------------------------------------ */
/* The [data-zoom] button wraps a product photo; it takes the photo's place in
   each layout so the existing image sizing keeps working. */
.zoom {
  position: relative;
  display: block;
  width: 100%;
  border-radius: var(--radius-md);
}
html.js .zoom { cursor: zoom-in; }
.zoom:focus-visible { outline-offset: -3px; }
.product-card__media .zoom {
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* Small magnifier badge: shown on hover/focus, always shown on touch screens */
html.js .zoom::after {
  content: "";
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d2f5b' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='m20 20-4.2-4.2M11 8.5v5M8.5 11h5'/%3E%3C/svg%3E") center / 18px no-repeat;
  border: 1px solid var(--line-gold);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transform: scale(.85);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  pointer-events: none;
}
html.js .zoom:hover::after,
html.js .zoom:focus-visible::after { opacity: 1; transform: none; }
@media (hover: none) {
  html.js .zoom::after { opacity: .92; transform: none; }
}

html.is-lightbox-open { overflow: hidden; }

.lightbox {
  width: min(92vw, 760px);
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.lightbox::backdrop {
  background: rgba(13, 47, 91, .82);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.lightbox__figure {
  padding: clamp(1rem, .5rem + 2.5vw, 2rem);
  background: var(--card-bg);
  border-radius: var(--card-radius);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .55);
}
.lightbox__image {
  width: auto;
  max-width: 100%;
  max-height: calc(100vh - 9rem);
  max-height: calc(100dvh - 9rem);
  margin-inline: auto;
  object-fit: contain;
}
.lightbox__caption {
  margin-top: var(--space-4);
  text-align: center;
  font-family: var(--serif);
  font-size: var(--fs-xl);
  color: var(--green);
}
.lightbox__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--line-gold);
  color: var(--green);
  box-shadow: var(--shadow-sm);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.lightbox__close:hover { background: var(--green); color: var(--white); }
.lightbox__close svg { width: 20px; height: 20px; }

@media (prefers-reduced-motion: no-preference) {
  .lightbox[open] { animation: lightbox-in .35s var(--ease-out); }
  .lightbox[open]::backdrop { animation: lightbox-fade .35s ease; }
}
@keyframes lightbox-in {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to { opacity: 1; transform: none; }
}
@keyframes lightbox-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 18c WhatsApp: form actions + floating chat button ------------------------ */
.form__actions {
  display: grid;
  gap: var(--space-3);
}
.form__note a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }

.whatsapp-float {
  position: fixed;
  right: max(var(--gutter), env(safe-area-inset-right));
  bottom: max(var(--space-5), env(safe-area-inset-bottom));
  z-index: 40;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
  box-shadow: 0 0 0 4px var(--cream), 0 0 0 5px var(--line-gold), var(--shadow-md);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.whatsapp-float:hover { background: var(--green-dark); transform: translateY(-2px); }
.whatsapp-float__icon { width: 28px; height: 28px; }

/* 19 Back to top (styled by class; position fixed regardless of parent) --- */
.back-to-top {
  position: fixed;
  right: calc(max(var(--gutter), env(safe-area-inset-right)) + 4px);   /* centred over the 56px chat button */
  bottom: calc(max(var(--space-5), env(safe-area-inset-bottom)) + 56px + var(--space-4));
  z-index: 40;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
  box-shadow: var(--shadow-md);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
              visibility 0s linear 0s, background-color var(--dur) var(--ease);
}
.back-to-top:hover { background: var(--green-dark); transform: translateY(-2px); }
.back-to-top__icon { width: 22px; height: 22px; }

html.js .back-to-top:not(.is-visible) {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
              visibility 0s linear var(--dur);
}

/* 20 Mobile bar (<=900px only) --------------------------------------------- */
.mobile-bar { display: none; }

/* 21 Reveal + entrance motion ---------------------------------------------- */
/* Delay values come from the data attribute so no unit juggling is needed in JS */
[data-reveal-delay="80"]  { --reveal-delay: 80ms; }
[data-reveal-delay="160"] { --reveal-delay: 160ms; }
[data-reveal-delay="240"] { --reveal-delay: 240ms; }

@media (prefers-reduced-motion: no-preference) {
  /* Content is visible by default. It is hidden only once the script has armed
     the observer (html.js-reveal), so a failed script never blanks the page. */
  html.js.js-reveal .reveal:not(.is-revealed) {
    opacity: 0;
    transform: translateY(16px);
  }
  html.js.js-reveal .reveal {
    transition: opacity .8s var(--ease-out), transform .8s var(--ease-out),
                box-shadow .5s var(--ease), border-color var(--dur) var(--ease);
    transition-delay: var(--reveal-delay, 0ms), var(--reveal-delay, 0ms), 0s, 0s;
  }
  /* After reveal, hover lift on cards responds instantly */
  html.js.js-reveal .reveal.is-revealed:hover,
  html.js.js-reveal .reveal.is-revealed:focus-within { transition-delay: 0s; }

  /* Hero: the headline, copy and product photos are visible from the first paint
     (no fade-in delaying the largest paint); only the gold rules draw in. */

  /* Hero range: the gold "+" draws out from the centre */
  .hero__range::before { animation: range-draw-y 1s var(--ease-out) .3s both; }
  .hero__range::after  { animation: range-draw-x 1s var(--ease-out) .3s both; }
  .hero__range-item:first-child::after { animation: range-diamond .6s var(--ease-out) .8s both; }

  /* Primary buttons: one soft champagne sheen per hover (no loop) */
  .btn--primary::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(110deg, transparent 30%, rgba(142, 205, 240, .35) 50%, transparent 70%);
    transform: translateX(-110%);
    pointer-events: none;
  }
  .btn--primary:hover::after {
    transform: translateX(110%);
    transition: transform .9s var(--ease-out);
  }
}

@keyframes range-draw-y { from { transform: scaleY(0); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes range-draw-x { from { transform: scaleX(0); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes range-diamond {
  from { opacity: 0; transform: rotate(-135deg) scale(.2); }
  to { opacity: 1; transform: rotate(45deg) scale(1); }
}

/* FAQ answer fade-in on open */
@media (prefers-reduced-motion: no-preference) {
  .faq__item[open] .faq__answer { animation: faq-open .45s var(--ease-out); }
}
@keyframes faq-open {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

/* Sliding selection pill for the size toggle (only where :has() is supported;
   elsewhere the selected button keeps its own fill) */
@supports selector(:has(*)) {
  .product-card__sizes::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc(50% - 4px);
    border-radius: var(--radius-pill);
    background: var(--green);
    transition: transform .4s var(--ease-out);
  }
  .product-card__sizes:has(.product-card__size-btn:nth-child(2):is(.is-selected, [aria-pressed="true"]))::before {
    transform: translateX(calc(100% + 2px));
  }
  .product-card__size-btn.is-selected,
  .product-card__size-btn[aria-pressed="true"] { background: transparent; }
}

/* 22 Responsive ------------------------------------------------------------ */
@media (min-width: 1441px) {
  :root { --container: 1240px; }
}

@media (max-width: 1080px) {
  /* Drop the header Call button so the nav never crowds (mobile bar and menu cover it below 900px) */
  .site-header__cta.btn--outline { display: none; }
  .collection__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  
  
  
  .site-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  :root { --header-h: 60px; }

  .hero__inner,
  .spotlight__inner,
  .about__inner,
  .enquiry__inner { grid-template-columns: minmax(0, 1fr); }

  .hero__title { max-width: 16ch; }
  .hero__visual { width: min(100%, 360px); }
  .hero__title { max-width: 14ch; }
  .enquiry__aside { position: static; }

  /* --- Mobile menu (JS) --- */
  html.js .site-nav__toggle {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: var(--tap);
    height: var(--tap);
    border-radius: var(--radius-sm);
    color: var(--green);
  }
  html.js .site-nav__toggle:hover { background: rgba(13, 47, 91, .07); }
  .site-nav__toggle-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
  }
  .site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:nth-child(2) { opacity: 0; }
  .site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Visual order matches DOM/Tab order: logo, toggle, actions */
  .site-nav { margin-left: auto; }

  html.js .site-nav__list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: -1;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--space-2) var(--gutter) var(--space-6);
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 40px -24px rgba(13, 47, 91, .35);
    /* Closed: hidden from AT and the tab order, not just moved */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-12px);
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
  }
  html.js .site-nav.is-open .site-nav__list,
  html.js .site-header.is-open .site-nav__list,
  html.js .site-nav__toggle[aria-expanded="true"] + .site-nav__list {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease), visibility 0s linear 0s;
  }
  html.js .site-nav__link {
    display: flex;
    min-height: 52px;
    padding-block: var(--space-2);
    border-bottom: 1px solid var(--line);
    font-size: var(--fs-md);
  }
  html.js .site-nav__link::after { display: none; }
  html.js .site-nav__link.is-active,
  html.js .site-nav__link[aria-current="true"] {
    padding-left: var(--space-3);
    box-shadow: inset 3px 0 0 var(--gold);
  }
  html.js .site-nav__item:has(.site-nav__cta),
  html.js .site-nav__cta { display: flex; }
  html.js .site-nav__item:has(.site-nav__cta) { padding-top: var(--space-5); }

  /* --- No-JS fallback: links shown statically, wrapped under the logo --- */
  /* No-JS: the wrapped nav makes the header much taller than --header-h,
     so it stops being sticky and anchor targets can never land under it */
  html:not(.js) .site-header { position: relative; }
  html.no-js .site-header__inner { flex-wrap: wrap; row-gap: 0; padding-block: var(--space-2); }
  html.no-js .site-nav { width: 100%; margin-left: 0; }
  html.no-js .site-nav__list { flex-wrap: wrap; gap: 0 var(--space-5); }

  /* --- Mobile quick-action bar --- */
  html { scroll-padding-bottom: calc(var(--mobile-bar-h) + var(--space-4)); }
  /* Room for the fixed bar, inside the (dark) footer so no strip of page colour shows below it */
  .site-footer { padding-bottom: calc(var(--space-6) + var(--mobile-bar-h)); }

  .mobile-bar {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    padding: var(--space-3) var(--gutter) max(var(--space-3), env(safe-area-inset-bottom));
    background: rgba(248, 251, 254, .96);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -10px 30px -18px rgba(13, 47, 91, .35);
    transition: transform var(--dur) var(--ease), visibility 0s linear 0s;
  }
  .mobile-bar__inner {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    max-width: 560px;
    margin-inline: auto;
  }
  .mobile-bar__btn { min-height: 48px; padding-inline: var(--space-2); gap: var(--space-2); }
  .whatsapp-float { display: none; }
  .contact__list { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; }
  .mobile-bar__icon { width: 18px; height: 18px; flex: none; }

  /* Under JS, the bar is hidden until JS marks it .is-visible */
  html.js .mobile-bar:not(.is-visible),
  html.is-menu-open .mobile-bar,
  body.is-menu-open .mobile-bar {
    transform: translateY(110%);
    visibility: hidden;
    transition: transform var(--dur) var(--ease), visibility 0s linear var(--dur);
  }

  /* The mobile bar takes over this role below 900px */
  .back-to-top { display: none; }
}

@media (max-width: 600px) {
  .site-header__actions { display: none; }
  .site-nav { margin-left: auto; }

  .collection__grid,
  .audience__grid { grid-template-columns: minmax(0, 1fr); }
  .audience__card::before { height: clamp(130px, 36vw, 170px); right: .75rem; }
  .audience__card > * { max-width: 66%; }
  
  
  
  

  .product-card__media { aspect-ratio: 5 / 5.2; }
  .hero__visual { width: min(100% - 28px, 340px); }
  .hero__visual::before { inset: -10px; }

  .hero__actions .btn,
  .spotlight__actions .btn { flex: 1 1 auto; }

  .form__row,
  .paths { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .path { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-3); padding: var(--space-3) 3rem var(--space-3) var(--space-3); }
  .path__icon { grid-row: 1 / span 2; margin: 0; width: 2.25rem; height: 2.25rem; align-self: center; }
  .path__check { top: 50%; transform: translateY(-50%); }
  .products__head { display: none; }
  .products__row { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-3); padding: var(--space-3); }
  .products__qtys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .products__cell { display: grid; gap: 4px; justify-content: stretch; }
  .products__size { display: block; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--muted-strong); white-space: nowrap; }
  .qty { display: flex; }
  .qty__input { flex: 1 1 0; width: 0; min-width: 0; }
  .qty__btn { width: 2.75rem; height: 2.75rem; }
  .form__fallback > .btn { flex: 1 1 100%; }

  .price-table__table th,
  .price-table__table td { padding-block: var(--space-4); }
  .price-table__product { font-size: var(--fs-md); line-height: 1.25; }
  .price-table__value { width: 4.5rem; font-size: var(--fs-base); }
  /* Narrower price headings leave the product names room for one line */
  .price-table__head th { letter-spacing: .08em; }
  .price-table__head .price-table__value,
  .price-table__table .price-table__value { width: auto; padding-inline: var(--space-2); }

  

  .contact__item { column-gap: var(--space-4); }
  .contact__value { font-size: var(--fs-base); }
  .enquiry__aside { padding: var(--space-5) var(--space-4); }
  .enquiry__aside-link { font-size: var(--fs-sm); padding-inline: var(--space-3); }

  .site-footer__grid { grid-template-columns: minmax(0, 1fr); }
  .site-footer__bottom { flex-direction: column; }
}

/* Narrow phones: the 1 L and 5 L steppers stack, so 44px buttons still leave
   room for a 4-digit quantity. */
@media (max-width: 400px) {
  .products__qtys { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .products__cell { grid-template-columns: 2.5rem minmax(0, 1fr); align-items: center; gap: var(--space-2); }
}

@media (max-width: 380px) {
  .btn { white-space: normal; }
  .price-table__box { padding: var(--space-2) var(--space-3); }
  .price-table__table .price-table__value { width: auto; }
  .price-table__product { line-height: 1.25; }
  .price-table__head th { letter-spacing: .08em; }
  .logo__img { height: 34px; }
  .logo__sub { letter-spacing: .08em; }
  .product-card__foot { flex-direction: column; align-items: stretch; }
  .product-card__enquire { width: 100%; }
}

/* Short viewports (landscape phones): fixed chrome would eat the screen */
@media (max-height: 480px) {
  .site-header { position: relative; }
  html { scroll-padding-top: var(--space-4); scroll-padding-bottom: 0; }
  .mobile-bar { display: none; }
  .site-footer { padding-bottom: var(--space-6); }
  .back-to-top { display: grid; bottom: max(var(--space-5), env(safe-area-inset-bottom)); }   /* no mobile bar here */
}

/* Coarse pointers: give inline list links a full 44px target */
@media (pointer: coarse) {
  .site-footer__link { min-height: var(--tap); }
}

/* 23 Reduced motion -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .btn:hover, .btn:active,
  .product-card:hover, .product-card:focus-within,
  .audience__card:hover, .contact__item:hover,
  .enquiry__aside-link:hover, .back-to-top:hover { transform: none; }
  .product-card:hover .product-card__image { transform: none; }
  .hero__range .zoom:hover .hero__range-image,
  .hero__range .zoom:focus-visible .hero__range-image { transform: none; }
  .hero__range-item:hover::before { transform: translate(-50%, -50%); }
}

/* Forced colours (Windows High Contrast): keep state cues visible */
@media (forced-colors: active) {
  .product-card__size-btn[aria-pressed="true"] { border-color: Highlight; }
  .site-nav__link.is-active::after { background: Highlight; }
  .form__option:has(.form__radio:checked) { border-color: Highlight; }
}