/* ============================================================================
   EASYCARE — "Rakhe Ghar Ka Khayal"
   Eshanura Enterprises Pvt. Ltd. · Lakhimpur Kheri, Uttar Pradesh

   Brand platform: THE BROOM THAT STANDS.
   Every EasyCare broom carries a mazboot hanging loop, so it hangs instead of
   lying dusty on the floor. That single idea is the brand's proof point, so it
   drives the art direction: a hook motif, hard colour blocks, poster-weight
   type and flat vector product illustration.

   Colours are sampled from the real brand artwork:
     teal  #006078  <- wordmark      navy  #04214B  <- brochure field
     cream #F6F0E8  <- brochure paper  magenta #F0038F <- moulded handle
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */
:root {
  --navy-950: #021538;
  --navy-900: #04214B;
  --navy-800: #0B366F;
  --navy-700: #14489A;

  /* Teal survives only inside the EasyCare wordmark it came from. It is not a
     UI colour here — that is what made the palette speak several languages. */
  --teal-200: #9FD2DE;   /* eyebrow on navy, where it has contrast */

  --mag-700: #B80066;
  --mag-600: #D9007A;
  --mag-500: #F0038F;
  --mag-100: #FFE3F2;
  /* the accent's TEXT step. --mag-600 clears 4.5:1 on white but not on the warm
     cream (4.38:1), so anything that carries text on a light background uses
     this. One hue, two lightness steps — marks at --mag-500, text at --mag-text. */
  --mag-text: #B80066;

--cream-50:  #FDFBF8;
--cream-100: #F6F0E8;
--cream-200: #EADFCE;

  /* product-card tints — one per broom, kept pale enough for body text */
  --blush-50: #FDEEF4;
  --sand-50:  #F7F1E6;
  --sky-50:   #EAF2F9;

  --wa-500: #12833F;

  --ink:      #0A1F3C;
  --body:     #3E5169;
  --muted:    #65758A;
  --line:     rgba(10, 31, 60, .14);
  --line-lt:  rgba(10, 31, 60, .07);
  --white:    #fff;

  --font: "Work Sans", "Segoe UI", system-ui, sans-serif;
  --font-display: "Nunito", "Segoe UI", system-ui, sans-serif;
  --font-deva: "Noto Sans Devanagari", "Noto Sans", system-ui, sans-serif;

  --shell: 1280px;
  --gutter: clamp(1.25rem, 4.5vw, 4rem);
  --nav-h: 76px;

  /* the brand leans hard-edged: radii stay near zero except for pills */
  --r-pill: 999px;

  --ease: cubic-bezier(.22, .61, .36, 1);

  /* Rendered product scale.
     extract_assets.py resamples every cutout to 20px per inch of real broom, so
     an image's own pixel height already encodes its physical length. To show
     that, every product must be scaled by the SAME FACTOR — a shared `height`
     would flatten all three to identical sizes and hide the 52" vs 42" truth.
     So each product declares only its real length, and one shared scale turns
     it into a height. Never hand-tune a per-product height. */
  /* Sizes, not decoration. These are the display scales at which each broom is
     rendered; they were raised once the images stopped being cropped into
     fixed-height slots, because a photograph the user wants to see should be
     shown at a size worth looking at. */
  --broom-ppi-hero: clamp(7px, .95vw, 14px);
  --broom-ppi-card: clamp(4.6px, .44vw, 6.3px);
  --broom-ppi-detail: clamp(7px, .78vw, 11.5px);
  --broom-ppi-scale: clamp(4.4px, .50vw, 7.2px);
}

/* Real lengths, in inches. Data, not styling. */
.is-titli { --len-in: 52; }
.is-angan { --len-in: 42; }
.is-indi  { --len-in: 42; }

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

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

body {
  margin: 0;
  background: var(--cream-50);
  color: var(--body);
  font-family: var(--font);
  font-size: clamp(1rem, .97rem + .16vw, 1.0625rem);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
figure, blockquote { margin: 0; }

h1, h2, h3, h4 {
  font-family: var(--font);
  color: var(--ink);
  font-weight: 900;
  line-height: .92;
  letter-spacing: -.035em;
  margin: 0 0 .4em;
}

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
a { color: inherit; }

:focus-visible { outline: 3px solid var(--mag-500); outline-offset: 3px; }

::selection { background: var(--mag-500); color: #fff; }

.deva { font-family: var(--font-deva); }

.skip-link {
  position: absolute; left: 12px; top: -80px; z-index: 999;
  background: var(--mag-500); color: #fff; padding: 12px 20px;
  font-weight: 800; text-decoration: none; transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; }

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

.shell { width: min(100% - var(--gutter) * 2, var(--shell)); margin-inline: auto; }

/* ---------------------------------------------------------- type utilities */
.kicker {
  display: inline-flex; align-items: center; gap: .7rem;
  font-size: .6875rem; font-weight: 800; letter-spacing: .26em;
  text-transform: uppercase; color: var(--muted);
  margin: 0 0 1.5rem;
}
.kicker svg { flex: 0 0 auto; }

.display   { font-size: clamp(3rem, 1rem + 7.4vw, 7.6rem); font-weight: 900; letter-spacing: -.045em; line-height: .86; }
.h-xl      { font-size: clamp(2.4rem, 1.2rem + 4.4vw, 4.6rem); letter-spacing: -.035em; }
.h-lg      { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem); }
.h-md      { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); letter-spacing: -.025em; }
.lead      { font-size: clamp(1.0625rem, 1rem + .4vw, 1.3rem); line-height: 1.6; color: inherit; }
.small     { font-size: .875rem; }
.muted     { color: var(--muted); }

.on-navy   { color: rgba(255,255,255,.78); }
.on-navy h1, .on-navy h2, .on-navy h3 { color: #fff; }
.on-navy .kicker { color: var(--teal-200); }  /* teal survives only on navy, where it has contrast */

/* section marker — the numbered editorial device */
.sec-index {
  display: flex; align-items: baseline; gap: 1rem;
  font-size: .6875rem; font-weight: 800; letter-spacing: .26em; text-transform: uppercase;
  color: var(--mag-600); margin-bottom: 1.25rem;
}
.sec-index b { font-size: 1rem; letter-spacing: .1em; color: currentColor; }
.sec-index::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .28; }
.on-navy .sec-index { color: var(--mag-500); }

/* --------------------------------------------------------------- buttons */
.btn {
  --bg: var(--navy-900); --fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  font-family: var(--font); font-size: .9375rem; font-weight: 800; letter-spacing: -.005em;
  padding: .95em 1.7em; min-height: 50px;
  border: 2px solid transparent; border-radius: var(--r-pill);
  background: var(--bg); color: var(--fg); text-decoration: none; cursor: pointer;
  transition: transform .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}
.btn:hover { transform: translateY(-2px); background: var(--navy-950); }
/* --mag-500 is the true handle magenta (4.11:1 with white) and stays for rules
   and marks. A button carries text, so it takes --mag-600 (4.96:1). */
.btn--mag { --bg: var(--mag-600); }
.btn--mag:hover { background: var(--mag-700); }
.btn--navy { --bg: var(--navy-900); }
.btn--navy:hover { background: var(--navy-950); }
.btn--wa { --bg: var(--wa-500); }
.btn--wa:hover { background: #0F6E34; }
.btn--line { --bg: transparent; --fg: var(--ink); border-color: rgba(10,31,60,.22); }
.btn--line:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn--onlight { --bg: transparent; --fg: #fff; border-color: rgba(255,255,255,.45); }
.btn--onlight:hover { background: #fff; color: var(--navy-900); border-color: #fff; }
.btn--sm { font-size: .8125rem; padding: .7em 1.2em; min-height: 42px; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* ------------------------------------------------------------------ header */
.topbar {
  background: var(--navy-950); color: rgba(255,255,255,.62);
  font-size: .75rem; letter-spacing: .02em;
}
.topbar .shell {
  display: flex; align-items: center; justify-content: center; gap: .8rem;
  min-height: 36px; padding-block: .3rem; text-align: center;
}
.topbar strong { color: #fff; font-weight: 800; }
.topbar a { color: var(--teal-200); text-decoration: none; font-weight: 700; }
.topbar a:hover { text-decoration: underline; }
.topbar .dot { color: var(--mag-500); }

.nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--cream-50);
  border-bottom: 2px solid var(--navy-900);
}
.nav__inner { display: flex; align-items: center; gap: 1.5rem; min-height: var(--nav-h); }
.nav__brand { display: flex; align-items: center; flex: 0 0 auto; }
.nav__brand img { height: 38px; width: auto; }

.nav__links { display: flex; align-items: center; gap: .25rem; margin-left: auto; list-style: none; padding: 0; }
.nav__links a {
  display: block; padding: .6rem .85rem;
  font-size: .875rem; font-weight: 800; letter-spacing: .01em;
  color: var(--ink); text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.nav__links a:hover { color: var(--mag-600); border-bottom-color: var(--mag-500); }
.nav__links a[aria-current="page"] { color: var(--navy-900); border-bottom-color: var(--navy-900); }
.nav__cta { display: flex; align-items: center; gap: .6rem; }
.nav__brand { display: grid; gap: .15rem; justify-items: start; }
.nav__toggle {
  display: none; margin-left: auto;
  width: 46px; height: 46px; border: 2px solid var(--navy-900);
  background: transparent; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center;
}
.nav__toggle span {
  display: block; width: 20px; height: 2.5px; background: var(--navy-900);
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.nav__toggle span + span { margin-top: 4.5px; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.progress {
  position: absolute; left: 0; bottom: -2px; height: 2px; width: 100%;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--mag-500), var(--mag-text));
}

/* --------------------------------------------------------------------- hero */
.hero {
  position: relative; overflow: hidden;
  border-bottom: 2px solid var(--navy-900);
  background: var(--cream-50);
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
  align-items: stretch;
}
.hero__copy {
  padding: clamp(2.5rem, 5vw, 4.75rem) clamp(1.5rem, 4vw, 3.5rem) clamp(2rem, 4vw, 3.25rem);
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(1.25rem, 2.4vw, 1.9rem);
}
.hero__copy .display { margin: 0; max-width: 17ch; font-size: clamp(2.5rem, 1rem + 4.6vw, 5.2rem); }
.hero__copy .display em { font-style: normal; color: var(--mag-600); }

.hero__script {
  font-family: var(--font);
  font-size: clamp(1.25rem, 1rem + 1.3vw, 2rem);
  font-weight: 800; font-style: italic; letter-spacing: -.01em;
  color: var(--navy-800);
  padding-left: clamp(.75rem, 1.5vw, 1.25rem);
  border-left: 3px solid var(--mag-500);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* The photographic half — a real EasyCare broom standing in a real room.
   The broom spans almost the full height of this frame, so any crop cuts it.
   It is therefore shown WHOLE, matted on the brand cream, and capped by height
   so the hero does not become a 1700px wall. Never `object-fit: cover`. */
/* The hero shows the actual products: transparent cutouts on the brand cream,
   standing on one floor line at true relative scale, as large as the column
   allows. Nothing to crop, nothing to box, no mat — the alpha does the work.
   Room photography belongs further down where it can be seen whole. */
.hero__brooms {
  display: flex; align-items: flex-end; justify-content: center;
  gap: clamp(.5rem, 2vw, 2rem);
  padding: clamp(1.25rem, 2.5vw, 2.25rem) clamp(1rem, 2.5vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem);
  background: var(--cream-100);
  border-left: 2px solid var(--navy-900);
}
.hero__brooms img {
  width: auto; height: calc(var(--len-in) * var(--broom-ppi-hero));
  filter: drop-shadow(0 20px 26px rgba(10, 31, 60, .22));
}

/* ------------------------------------------------- three promises (icons) */
.promises {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: clamp(1rem, 2vw, 1.75rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.promise { display: grid; gap: .6rem; justify-items: center; text-align: center; }
.promise svg { width: 40px; height: 40px; color: var(--navy-800); }
.promise strong {
  display: block; font-size: .75rem; font-weight: 900;
  letter-spacing: .16em; text-transform: uppercase; color: var(--navy-900);
}

/* ---------------------------------------- true-scale band with measurement */
/* This is the product truth stated plainly: all three on one floor line, sized
   by real length, each with the measurement drawn beside it. */
.scalebar { background: var(--cream-100); border-bottom: 2px solid var(--navy-900); overflow: hidden; }
.scalebar__inner {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center;
  gap: clamp(1rem, 3vw, 3rem);
  padding: clamp(2rem, 4vw, 3.25rem) var(--gutter) clamp(1.5rem, 3vw, 2.5rem);
}
.measure { margin: 0; display: grid; grid-template-columns: auto 2.5rem; gap: .55rem; align-items: end; }
.measure img { width: auto; height: calc(var(--len-in) * var(--broom-ppi-scale)); filter: drop-shadow(0 14px 18px rgba(10,31,60,.22)); }
.measure__axis { position: relative; align-self: stretch; }
.measure__axis::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
  transform: translateX(-50%); background: currentColor; opacity: .5;
}
.measure__axis::after {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 10px;
  transform: translateX(-50%); opacity: .5;
  background:
    linear-gradient(currentColor, currentColor) top / 10px 1px no-repeat,
    linear-gradient(currentColor, currentColor) bottom / 10px 1px no-repeat;
}
.measure__len {
  position: absolute; left: 50%; bottom: -1.75rem; transform: translateX(-50%);
  white-space: nowrap; font-size: .8125rem; font-weight: 900; letter-spacing: .06em;
  color: var(--navy-900);
}
.measure__name { display: block; margin-top: 2.75rem; text-align: center; font-size: .6875rem; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.scalebar__note {
  text-align: center; padding: 0 var(--gutter) clamp(1.25rem, 2.5vw, 2rem);
  margin: 0; font-size: .8125rem; color: var(--muted);
}
.scalebar__note b { color: var(--mag-600); }

/* ----------------------------------------------------- feature row (icons) */
.features { list-style: none; padding: 0; margin: 0; display: grid; gap: clamp(1rem, 2.4vw, 2rem); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.feature { display: grid; gap: .5rem; align-content: start; }
.feature__ic { width: 44px; height: 44px; color: var(--navy-800); }
.feature h3 { font-size: .8125rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--navy-900); margin: 0; }
.feature p { font-size: .875rem; color: var(--body); margin: 0; }

/* ----------------------------------------------------------------- ticker */
/* Text-bearing magenta surfaces use --mag-600 (4.96:1 with white).
   --mag-500 is the true handle magenta and stays for rules, dots and marks. */
.ticker {
  background: var(--mag-600); color: #fff; overflow: hidden;
  display: flex; user-select: none;
}
.ticker--navy { background: var(--navy-900); }
.ticker__track {
  display: flex; flex: 0 0 auto;
  padding-block: .85rem;
  animation: slide 34s linear infinite;
  will-change: transform;
}
.ticker--navy .ticker__track { animation-duration: 26s; animation-direction: reverse; }
.ticker__track > span {
  display: inline-flex; align-items: center; gap: 1.4rem;
  padding-inline: 1.4rem; white-space: nowrap;
  font-size: .8125rem; font-weight: 900; letter-spacing: .18em; text-transform: uppercase;
}
.ticker__track > span::after {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: .55; margin-left: 1.4rem;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ----------------------------------------------------------------- blocks */
.block { padding-block: clamp(4rem, 8vw, 7.5rem); position: relative; }
.block--navy { background: var(--navy-900); }
.block--cream { background: var(--cream-100); }
.block--magenta { background: var(--mag-600); color: rgba(255,255,255,.92); }
.block--magenta h1, .block--magenta h2, .block--magenta h3 { color: #fff; }
.block--magenta .sec-index { color: #fff; }
.block--magenta .lead { color: rgba(255,255,255,.9); }

.block__head { max-width: 60ch; margin-bottom: clamp(2.5rem, 4vw, 3.5rem); }

/* ------------------------------------------------- 01 · the difference */
.diff { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); align-items: center; }
.diff__art { position: relative; }
/* the handle spec diagram — full size, its own aspect, no frame */
.diff__art img { width: 100%; height: auto; display: block; }
.diff__art { border: 0; }
.diff__art::after { display: none; }
.diff__art::after {
  content: ""; position: absolute; inset: 0;
  border: 2px solid rgba(255,255,255,.22); pointer-events: none;
}

.diff__points { list-style: none; padding: 0; margin: 2.5rem 0 0; border-top: 2px solid rgba(255,255,255,.16); }
.diff__points li {
  display: grid; grid-template-columns: 3.5rem 1fr; gap: 1.25rem;
  padding: 1.4rem 0; border-bottom: 1px solid rgba(255,255,255,.14);
  align-items: start;
}
.diff__points .n { font-size: .75rem; font-weight: 900; letter-spacing: .1em; color: var(--mag-500); padding-top: .35rem; }
.diff__points h3 { font-size: 1.125rem; letter-spacing: -.015em; margin: 0 0 .2rem; }
.diff__points p { font-size: .9375rem; color: rgba(255,255,255,.72); margin: 0; }

/* --------------------------------------- product cards (image beside copy) */
/* Each card is a tinted panel: product photograph and its measurement on one
   side, the story and the action on the other. Tint is chosen so the broom's
   own handle stays legible — a magenta handle disappears on a magenta field. */
.pcards { display: grid; gap: clamp(1rem, 2vw, 1.75rem); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pcard { display: flex; flex-direction: column; }
.pcard--angan { background: var(--blush-50); }
.pcard--indi  { background: var(--sand-50); }
.pcard--titli { background: var(--sky-50); }
.pcard__grid {
  flex: 1;
  display: grid; gap: clamp(.75rem, 1.5vw, 1.25rem);
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  padding: clamp(1rem, 1.8vw, 1.5rem);
}
.pcard__fig { margin: 0; display: grid; grid-template-columns: auto 1.6rem; gap: .35rem; align-items: end; }
.pcard__fig img { width: auto; height: calc(var(--len-in) * var(--broom-ppi-card)); filter: drop-shadow(0 10px 14px rgba(10,31,60,.2)); }
.pcard__dim { position: relative; align-self: stretch; }
.pcard__dim::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
  transform: translateX(-50%); background: var(--navy-900); opacity: .38;
}
.pcard__dim::after {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 7px;
  transform: translateX(-50%); opacity: .38;
  background:
    linear-gradient(var(--navy-900), var(--navy-900)) top / 7px 1px no-repeat,
    linear-gradient(var(--navy-900), var(--navy-900)) bottom / 7px 1px no-repeat;
}
.pcard__dim span {
  position: absolute; left: 50%; bottom: -1.35rem; transform: translateX(-50%);
  white-space: nowrap; font-size: .6875rem; font-weight: 900; color: var(--navy-900);
}
.pcard__body { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.pcard__body h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.05; letter-spacing: -.02em; margin: 0; }
.pcard__kind { font-size: .9375rem; font-weight: 700; color: var(--navy-800); margin: 0; }
.pcard__desc { font-size: .875rem; color: var(--body); margin: 0; }
.pcard__chips { list-style: none; padding: 0; margin: .35rem 0 0; display: grid; gap: .45rem; }
.pcard__chips li { display: flex; gap: .55rem; align-items: flex-start; font-size: .8125rem; }
.pcard__chips svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; color: var(--navy-800); }
.pcard__foot { padding: 0 clamp(1rem, 1.8vw, 1.5rem) clamp(1rem, 1.8vw, 1.5rem); }
.pcard__foot .btn { width: 100%; }

/* ------------------------------------------- "a cleaner home" lifestyle band */
/* The room frame is a 406x1024 portrait. Giving it a `1fr` column forced the
   height cap to decide the width, which left up to 620px of dead cream at wide
   viewports. An `auto` column tracks the image's own width instead, so there is
   no mat to render at any viewport — the copy takes whatever the photo does not. */
.clean { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: stretch; }
.clean__copy {
  background: var(--navy-900); color: #fff;
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 3.5rem);
  display: flex; flex-direction: column; justify-content: center; gap: 1rem;
}
.clean__copy .eyebrow { font-size: .75rem; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; color: var(--teal-200); }
/* headings carry an explicit colour in the base layer, so `color:#fff` on the
   parent is not enough — it has to be restated for headings on navy */
.clean__copy h2, .clean__copy h3 { color: #fff; }
.clean__copy h2 { font-size: clamp(1.8rem, 1.3rem + 2vw, 3rem); line-height: 1.05; letter-spacing: -.025em; margin: 0; }
.clean__copy p { font-size: .9375rem; color: rgba(255,255,255,.78); margin: 0; max-width: 46ch; }
.clean__copy strong { color: #fff; }
.clean__copy .btn { align-self: flex-start; margin-top: .5rem; }
/* The room photograph is shown whole — never cropped. Its column is sized by
   the image itself, so this cap now sets the photo's real size rather than
   squeezing it inside a wider slot. The old comment here claimed an 1850px band;
   that was the photo forcing a `1fr` column, not the height cap. */
.clean__photo {
  position: relative; background: var(--cream-200);
  display: grid; place-items: center; overflow: hidden;
}
.clean__photo img {
  max-width: 100%; max-height: 82vh; width: auto; height: auto; display: block;
}
.clean__copy .uses { margin-top: 2rem; }
.uses--inset .use { border-top-color: rgba(255,255,255,.4); }
.uses--inset .use h3 { color: #fff; }
.uses--inset .use p { color: rgba(255,255,255,.78); }

/* ============================================================================
   CLEAN SYSTEM
   Built against the Gala idiom (galaclean.com): near-black ink, a single
   accent, small accent eyebrow above every heading, the last word of a heading
   picked out in the accent, warm washes instead of grey, plain spec lists,
   no prices, no shadows, generous whitespace.

   ACCENT DISCIPLINE — the only accent on this site is brand magenta. --mag-500
   is the true handle colour and is used for marks and rules only; anything
   carrying text uses --mag-600.

   CLAIM DISCIPLINE — see README "What this site does not claim". Nothing here
   asserts a number, ranking, certification or partnership that cannot be
   checked against the retail pack or the company record.
   ========================================================================== */

  /* Custom properties are only valid inside a rule — declaring these at the top
   level of the file silently discards them, which is exactly what happened
   (top borders vanished). They belong in :root with the rest of the tokens.

   ONE VOICE. The ink family is NAVY, not near-black. There was a second ink
   (#181818 / #4E4E4E greys borrowed from the Gala register) running alongside
   the brand navy, so headings and body copy were two unrelated dark colours on
   the same page and the palette spoke four voices — navy, grey, teal, magenta.
   Everything that needs ink now gets navy, and teal survives only inside the
   wordmark it came from. So: one ink, one accent, one paper, one hairline. */
:root {
  --ink-900: #04214B;   /* headings — brand navy */
  --ink-600: #0B366F;   /* body */
  --ink-400: #4A5F8C;   /* meta — verified 5.0:1 on white */
  --line-2:  #E4E4E4;
  --paper:   #F6F0E8;   /* warm cream, not a cool grey */
  --footer-bg: #F6F0E8;
}

/* heading with its final word in the accent — the cheapest repeatable
   authority device, borrowed from Gala's "Find Us <span>At</span>" */
.headline { color: var(--ink-900); letter-spacing: -.03em; line-height: 1.08; }
.headline em { font-style: normal; color: var(--mag-text); }
/* single-accent rule: the hero word takes the accent too, not the old bronze */
.hero--clean .hero__copy .display em { color: var(--mag-text); }

/* small accent label sitting above a heading */
.eyebrow-accent {
  display: block; margin-bottom: .75rem;
  font-size: .75rem; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--mag-text);
}

/* warm wash — cream/peach radial, the softest thing on the page */
.wash {
  background:
    radial-gradient(ellipse 70% 90% at 6% 100%, #FDF5DC 0%, #FFFCF0 32%, rgba(255,255,255,0) 62%),
    radial-gradient(ellipse 60% 80% at 100% 0%, #FDEEE2 0%, #FFF9F4 34%, rgba(255,255,255,0) 66%),
    var(--white);
}

/* plain spec list — Gala's product-detail pattern, no marketing in the rows */
.spec { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--line-2); }
.spec__row {
  display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1rem;
  padding: .7rem 0; border-bottom: 1px solid var(--line-2);
}
.spec__row dt {
  font-size: .75rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-400);
}
.spec__row dd { margin: 0; font-size: .9375rem; color: var(--ink-600); }

/* calm product card: white, hairline border, no shadow, no radius theatre */
.calmcard {
  background: var(--white); border: 1px solid var(--line-2);
  padding: clamp(1.25rem, 2vw, 1.75rem);
  display: flex; flex-direction: column; gap: 1rem;
}
/* Every card reserves the tallest broom's height and stands its own broom on
   that floor line, so the cards line up AND the 52" TITLI still reads taller
   than the 42" pair. Scale stays honest; the layout stays calm. */
.calmcard__fig {
  margin: 0; display: flex; align-items: flex-end; justify-content: center;
  min-height: calc(52 * var(--broom-ppi-card));
}
.calmcard__fig img { height: calc(var(--len-in) * var(--broom-ppi-card)); width: auto; }
.calmcard h3 { font-size: clamp(1.5rem, 1.25rem + 1vw, 1.95rem); letter-spacing: -.025em; margin: 0; }
.calmcard__kind { font-size: .875rem; color: var(--ink-400); margin: -.5rem 0 0; }
.calmcard .btn { align-self: stretch; }

/* clean hero — light, calm, one photograph at full size */
.hero--clean { background: var(--white); }
.hero--clean .hero__copy { gap: clamp(1rem, 2vw, 1.5rem); }
.hero--clean .hero__script { border-left-color: var(--mag-500); }
/* the brand keeps its own voice in the hero, not a generic corporate grey */
.hero--clean .display { color: var(--navy-900); }
.hero--clean .hero__brooms { border-left: 2px solid var(--navy-900); }

/* plain body copy inside the clean sections */
.lede { font-size: clamp(1.0625rem, 1rem + .35vw, 1.2rem); line-height: 1.62; color: var(--ink-600); max-width: 60ch; }

/* institutional facts strip — the only "trust" content allowed */
.facts {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: clamp(1rem, 2.4vw, 2.25rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}
.facts li { border-top: 2px solid var(--navy-900); padding-top: .85rem; }
.facts b { display: block; font-size: .9375rem; color: var(--ink-900); margin-bottom: .2rem; }
.facts span { font-size: .8125rem; color: var(--ink-400); }
/* on a dark brand block the same list has to invert, or it is unreadable */
.on-brand .facts li { border-top-color: rgba(255,255,255,.4); }
.on-brand .facts b { color: #fff; }
.on-brand .facts span { color: rgba(255,255,255,.72); }

/* headings wear the brand display face; body copy stays neutral */
h1, h2, h3, h4, .display, .headline, .btn, .nav__links a, .eyebrow-accent, .spec__row dt {
  font-family: var(--font-display);
}

/* The footer is light on every page, so all of its colours live here rather
   than as inline styles scattered across four HTML files. */
.footer {
  background: var(--footer-bg); color: var(--ink-600);
  border-top: 2px solid var(--navy-900);
}
.footer h4 { color: var(--navy-900); }
.footer a, .footer address { color: var(--ink-600); }
.footer a:hover { color: var(--navy-900); }
.footer strong { color: var(--ink-900); }
.footer__top { border-top: 0; padding-block: clamp(2.5rem, 4vw, 3.5rem) clamp(1.5rem, 2.5vw, 2rem); }
.footer__bottom { border-top-color: var(--line-2); color: var(--ink-400); }
.footer .brandlock__house img { height: 26px; }

/* the wash replaces the band's own fill */
.scalebar.wash { border-bottom-color: var(--line-2); }
.scalebar.wash::before { content: none; }

/* ============================================================================
   BRAND DEVICES — what makes this EasyCare rather than a cleaning brand
   ========================================================================== */

/* The hanging loop, repeated. This is the brand's own motif and the thing the
   Gala pass threw away; it belongs back on the dark brand blocks. */
.on-brand {
  position: relative; overflow: hidden; background: var(--navy-900);
}
.on-brand::before {
  content: ""; position: absolute; inset: 0;
  background: url("../img/art/loop-pattern.svg") repeat;
  background-size: 150px 150px; opacity: .16;
}
.on-brand > * { position: relative; z-index: 1; }

/* footer brand lockup — Eshanura gets its own space, not a sentence */
.brandlock { display: grid; gap: 1.25rem; align-content: start; }
.brandlock__house {
  display: flex; align-items: center; gap: .9rem;
  padding-top: 1rem; border-top: 1px solid var(--line-2);
}
.brandlock__house img { height: 26px; width: auto; display: block; }
.brandlock__house span {
  font-size: .625rem; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-400); line-height: 1.4;
}

/* poster-weight brand line — the brand's voice, distinct from body copy */
.brandline {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1rem + 4.4vw, 4.4rem);
  font-weight: 900; letter-spacing: -.04em; line-height: .98;
  color: var(--navy-900);
}
.on-brand .brandline { color: #fff; }
.on-brand .brandline em { font-style: normal; color: var(--mag-500); }
/* text on the brand block, without scattering inline colours through the markup.
   Headings need restating: the base layer sets an explicit dark colour on
   h1-h4, which wins over an inherited `color` and leaves them invisible. */
.on-brand .lede { color: rgba(255,255,255,.82); }
.on-brand .eyebrow-accent { color: var(--mag-500); }
.on-brand .diff__points h3, .on-brand .use h3 { color: #fff; }
.on-brand .diff__points p, .on-brand .use p { color: rgba(255,255,255,.78); }
.on-brand .diff__points, .on-brand .diff__points li { border-color: rgba(255,255,255,.18); }

/* ---------------------------------------------------------------- prose pages */
.prose h2 {
  font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); letter-spacing: -.02em;
  margin: 2.25rem 0 .6rem;
}
.prose h2:first-of-type { margin-top: 0; }
.prose p { margin: 0 0 1rem; }
.prose a { color: var(--navy-800); font-weight: 600; }
.prose a:hover { color: var(--navy-900); }
.prose strong { color: var(--ink); }
.prose .lead { color: var(--muted); }

/* ------------------------------------------------------- 02 · product posters */
.range { display: grid; gap: clamp(1.25rem, 2.2vw, 2rem); grid-template-columns: repeat(3, minmax(0, 1fr)); }

.poster {
  display: flex; flex-direction: column;
  border: 2px solid var(--navy-900);
  background: var(--white);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.poster:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(10,31,60,.14); }

.poster__field {
  position: relative; overflow: hidden;
  display: grid; place-items: end center;
  padding: clamp(1.5rem, 2.5vw, 2.25rem) 1.5rem 0;
  min-height: clamp(280px, 30vw, 360px);
}
.poster__field img {
  height: calc(var(--len-in) * var(--broom-ppi-card)); width: auto;
  filter: drop-shadow(0 14px 18px rgba(0,0,0,.28));
  transition: transform .45s var(--ease);
}
.poster:hover .poster__field img { transform: translateY(-6px); }
.poster__no {
  position: absolute; top: 0; left: 0;
  padding: .5rem .85rem;
  font-size: .6875rem; font-weight: 900; letter-spacing: .16em;
  background: var(--navy-900); color: #fff;
}

/* Field colours are chosen for contrast against each product's own handle,
   not just for variety — a magenta handle disappears on a magenta field. */
.poster--titli .poster__field { background: var(--cream-200); }
.poster--angan .poster__field { background: var(--navy-900); }
.poster--indi  .poster__field { background: var(--navy-900); }
.poster--angan .poster__no,
.poster--indi  .poster__no { background: var(--cream-50); color: var(--navy-900); }
.poster--angan .poster__field img { filter: drop-shadow(0 14px 20px rgba(0,0,0,.45)); }
.poster--indi  .poster__field img { filter: drop-shadow(0 14px 20px rgba(0,0,0,.45)); }

.poster__body { padding: clamp(1.25rem, 2vw, 1.75rem); display: flex; flex-direction: column; flex: 1; }
.poster__type { font-size: .6875rem; font-weight: 900; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-bottom: .35rem; }
.poster__body h3 { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem); margin: 0 0 .5rem; }
.poster__desc { font-size: .9375rem; margin-bottom: 1.1rem; }
.poster__specs { list-style: none; padding: 0; margin: 0 0 1.25rem; border-top: 1px solid var(--line-lt); }
.poster__specs li {
  display: flex; gap: .6rem; align-items: flex-start;
  padding: .55rem 0; border-bottom: 1px solid var(--line-lt);
  font-size: .875rem;
}
.poster__specs li::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; margin-top: .5rem; background: var(--mag-500); }
.poster__foot { margin-top: auto; display: flex; gap: .5rem; }
.poster__foot .btn { flex: 1; }

/* ------------------------------------------------------------- craft band */
.craft { position: relative; overflow: hidden; background: var(--navy-950); }
/* The backdrop is absolutely positioned, so it paints over any static sibling —
   which buried this section's heading under its own gradient. Lift the whole
   shell above it; .craft__inner already did this for the three columns. */
.craft .shell { position: relative; z-index: 1; }
.craft__bg { position: absolute; inset: 0; z-index: 0; }
.craft__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .34; }
.craft__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--navy-950) 26%, rgba(2,21,56,.82) 58%, rgba(11,54,111,.55) 100%);
}
.craft__inner { position: relative; z-index: 1; display: grid; gap: clamp(2rem, 4vw, 4rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); align-items: center; }
.craft__item { border-top: 2px solid var(--mag-500); padding-top: 1.25rem; }
.craft__item h3 { font-size: 1.25rem; letter-spacing: -.02em; margin-bottom: .4rem; }
.craft__item p { font-size: .9375rem; color: rgba(255,255,255,.72); margin: 0; }

/* ------------------------------------------------------ 04 · where it works */
.uses { display: grid; gap: clamp(1.25rem, 2.2vw, 2rem); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.use {
  border-top: 2px solid var(--ink-900); background: transparent;
  padding: clamp(1.1rem, 1.6vw, 1.4rem) 0 0;
  display: flex; flex-direction: column;
}
.use__n {
  font-size: .6875rem; font-weight: 800; letter-spacing: .2em;
  color: var(--mag-text); margin-bottom: .75rem;
}
.use h3 { font-family: var(--font-display); font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); letter-spacing: -.02em; margin-bottom: .45rem; }
.use p { font-size: .9375rem; margin: 0; color: var(--ink-600); }

/* ------------------------------------------------------------- trust band */
.trust { display: grid; gap: 1px; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--line-lt); border: 2px solid var(--navy-900); }
.trust__item { background: var(--white); padding: clamp(1.25rem, 2.2vw, 1.75rem); }
.trust__item dt { font-size: 1rem; font-weight: 900; color: var(--ink); letter-spacing: -.015em; margin-bottom: .2rem; }
.trust__item dd { margin: 0; font-size: .8125rem; color: var(--muted); line-height: 1.55; }

/* -------------------------------------------------------------------- page */
.pagehead { background: var(--cream-100); border-bottom: 2px solid var(--navy-900); padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.crumbs { display: flex; gap: .5rem; list-style: none; padding: 0; margin: 0 0 1.25rem; font-size: .8125rem; color: var(--muted); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--mag-600); }
.crumbs li + li::before { content: "/"; margin-right: .5rem; opacity: .5; }

/* ------------------------------------------------------------ product page */
.pdetail { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: minmax(0, 520px) minmax(0, 1fr); align-items: center; }
/* Product art is shown whole and at size. The old `overflow: hidden` +
   fixed min-height cropped the broom head off the top and the handle off the
   bottom, and the inline border boxed it inside a coloured rectangle. Neither
   helps: these are the product photographs and they are the point. */
.pdetail__art {
  display: grid; place-items: end center;
  padding: clamp(1rem, 2vw, 1.5rem) 1.5rem 0;
}
/* The detail-page art shares the home page's one-rule-per-inch scale: a single
   height would flatten the 52" TITLI down to the 42" pair and hide the truth. */
.pdetail__art img {
  height: calc(var(--len-in, 42) * var(--broom-ppi-detail));
  width: auto; display: block;
  filter: drop-shadow(0 14px 18px rgba(10,31,60,.28));
}
.pdetail__list { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: .7rem; }
.pdetail__list li { display: flex; gap: .7rem; align-items: flex-start; font-size: .9375rem; }
.pdetail__list svg { flex: 0 0 auto; margin-top: .28rem; color: var(--mag-600); }
/* Spec tags, not actions. These sit directly above the navy "Enquire" button,
   so filling them with the same navy made the pair read as two CTAs. A pale
   accent tint keeps the hard-edged geometry and still separates the label
   from the button underneath it. */
.pdetail__meta { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.pdetail__meta li {
  font-size: .6875rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  background: var(--mag-100); color: var(--navy-900);
  padding: .35rem .7rem; border-left: 3px solid var(--mag-600);
}

.table-wrap { border: 2px solid var(--navy-900); overflow-x: auto; background: var(--white); }
table.compare { width: 100%; border-collapse: collapse; min-width: 660px; font-size: .9rem; }
table.compare th, table.compare td { padding: 1rem 1.15rem; text-align: left; border-bottom: 1px solid var(--line-lt); }
table.compare thead th { background: var(--navy-900); color: #fff; font-size: .75rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
table.compare tbody th { font-weight: 800; color: var(--ink); }
table.compare tbody tr:last-child th, table.compare tbody tr:last-child td { border-bottom: 0; }
table.compare tbody tr:hover { background: var(--cream-100); }

/* ------------------------------------------------------------------- form */
.form-card { background: var(--white); border: 2px solid var(--navy-900); padding: clamp(1.5rem, 3vw, 2.5rem); }
.form-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.field { display: flex; flex-direction: column; gap: .35rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: .6875rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.field input, .field select, .field textarea {
  font: inherit; font-size: .9375rem; color: var(--ink);
  background: var(--cream-50); border: 2px solid var(--line);
  padding: .8rem .95rem; min-height: 48px; border-radius: 0;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--navy-800); box-shadow: 0 0 0 4px rgba(4,33,75,.14);
}
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%2365758A' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }
.form-note { font-size: .8125rem; color: var(--muted); margin: .9rem 0 0; }
.form-status { margin-top: 1rem; padding: .9rem 1.1rem; border: 2px solid var(--navy-800); background: var(--cream-100); color: var(--navy-900); font-size: .9rem; font-weight: 700; display: none; }
.form-status.is-ok { display: block; }

/* -------------------------------------------------------------- pack shots */
.packs { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pack { border: 2px solid var(--navy-900); background: #fff; padding: 1.5rem; text-align: center; }
.pack img { height: clamp(240px, 28vw, 340px); width: auto; margin-inline: auto; }
.pack h3 { font-size: 1.25rem; margin: 1rem 0 .15rem; }
.pack p { font-size: .75rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0; }

/* ----------------------------------------------------------------- footer
   The dark footer styling that used to live here has been removed. It sat
   AFTER the light footer rules and silently won the cascade, so the footer
   rendered navy on every page while the HTML said otherwise. Everything here
   is structure only; the footer palette lives in the CLEAN SYSTEM block. */
/* ----------------------------------------------------------------- footer
   A footer's job is the things that are true of the organisation and belong to
   no single page: who we are, where we are, how to reach us, the parent brand,
   the legal pages, copyright. It is NOT a second copy of the navigation.

   It used to carry a "Range" column, an "EasyCare" column and a bottom nav bar
   — three more lists of links, duplicating the header nav and pages the visitor
   had already seen. All removed. `build/footer.html` is the single source this
   block is spliced from, so the four pages cannot drift apart again. */
.footer { font-size: .875rem; }
.footer a { text-decoration: none; }
.footer__top {
  display: grid; gap: clamp(1.75rem, 3.5vw, 2.75rem);
  grid-template-columns: 1.6fr 1fr 1fr .9fr;
}
.footer h4 { font-size: .6875rem; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 1rem; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.footer address { font-style: normal; display: grid; gap: .35rem; line-height: 1.7; }
.footer address .small { color: var(--ink-400); }
.footer__bottom {
  padding-block: 1.5rem;
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem;
  align-items: center; justify-content: space-between; font-size: .8125rem;
}
.footer__bottom p { margin: 0; }

/* ----------------------------------------------------------------- reveal */
.reveal { opacity: 0; transform: translateY(20px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in[data-delay="1"] { transition-delay: .08s; }
.reveal.is-in[data-delay="2"] { transition-delay: .16s; }
.reveal.is-in[data-delay="3"] { transition-delay: .24s; }

/* ------------------------------------------------------------- responsive */
@media (max-width: 1080px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__photo { min-height: 62vh; }
  /* `minmax(0, 1fr)`, not `1fr`: a plain `1fr` track has an `auto` minimum, so
     it refuses to shrink below the 406px image and pushes the page sideways on
     narrow phones. */
  .clean { grid-template-columns: minmax(0, 1fr); }
  /* Single column: the old `aspect-ratio: 4/3` forced a landscape box around a
     406x1024 frame, and with `overflow: hidden` that clipped 57% of the photo —
     the broom's head and handle were cut off on every phone. Drop the box and
     let the figure hug the image, as it does on desktop. Letting it fill the
     column instead makes a 2544px-tall photo at this breakpoint, so the frame
     stays at its natural 406px and centres in the column. */
  .clean__photo {
    min-height: 0; aspect-ratio: auto;
    justify-self: center; width: max-content; max-width: 100%;
  }
  .clean__photo img { max-height: none; width: auto; height: auto; }
  .pcards { grid-template-columns: 1fr; }
  .pcard__grid { grid-template-columns: auto minmax(0, 1fr); }
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .diff { grid-template-columns: 1fr; }
  .range { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
  .uses { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
  .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .pdetail { grid-template-columns: 1fr; }
  .pdetail__art { max-width: 460px; }
}

@media (max-width: 720px) {
  .promises { grid-template-columns: 1fr; gap: 1.25rem; }
  .promise { grid-template-columns: auto minmax(0, 1fr); justify-items: start; text-align: left; gap: .35rem .9rem; align-items: center; }
  .promise svg { width: 34px; height: 34px; grid-row: span 2; }
  .features { grid-template-columns: 1fr; gap: 1.25rem; }
  .feature { grid-template-columns: auto minmax(0, 1fr); gap: .3rem 1rem; align-items: center; }
  .feature__ic { width: 38px; height: 38px; grid-row: span 2; }
  .scalebar__inner { gap: 1rem 1.5rem; }
  .measure img { height: calc(var(--len-in) * 4.1px); }
  .pcard__grid { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .pcard__chips li { justify-content: center; }
  .pcard__dim span { bottom: -1.2rem; }
  .hero__photo { min-height: 52vh; }
}

@media (max-width: 900px) {
  .nav__toggle { display: flex; }
  .nav__links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--cream-50); border-bottom: 2px solid var(--navy-900);
    padding: .5rem var(--gutter) 1.25rem; margin: 0;
    clip-path: inset(0 0 100% 0); opacity: 0; pointer-events: none;
    transition: clip-path .35s var(--ease), opacity .25s var(--ease);
  }
  .nav__links.is-open { clip-path: inset(0 0 0 0); opacity: 1; pointer-events: auto; }
  .nav__links a { padding: .95rem 0; border-bottom: 1px solid var(--line-lt); font-size: 1.0625rem; }
  .nav__links a[aria-current="page"] { border-bottom-color: var(--navy-900); }
  .nav__cta { display: none; }
}

@media (max-width: 720px) {
  .topbar .hide-sm { display: none; }
  .packs { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .trust { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .diff__points li { grid-template-columns: 2.5rem 1fr; gap: .85rem; }
  .craft__bg img { opacity: .26; }
}

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

@media print {
  .nav, .topbar, .ticker, .block--magenta { display: none !important; }
  body { background: #fff; color: #000; }
  .block { padding-block: 1.5rem; }
}