/* ============ TOKENS ============ */
:root {
  --navy: #0a2a66;
  --navy-2: #0b3a8c;
  --royal: #1257c9;
  --sky: #2f9be8;
  --aqua: #7cc8f5;
  --mist: #eaf4ff;
  --mist-2: #f3f8ff;
  --ink: #0f1d33;
  --ink-2: #4a5a73;
  --line: #d9e6f7;
  --white: #ffffff;
  --tint: #eff8f3;          /* soft green tint for page sections */
  --wa: #25d366;
  --green: #1a8a76;        /* label teal-green */
  --teal: #1f9384;
  --teal-dark: #0f4f48;
  --yellow: #f3df4a;       /* label 'Pan India Services' yellow */
  --mint: #7ee2a8;
  --grad-accent: linear-gradient(90deg, var(--royal), var(--green));

  --radius: 3px;
  --radius-sm: 2px;
  --shadow: 0 1px 2px rgba(10, 42, 102, .06), 0 8px 24px rgba(10, 42, 102, .08);
  --shadow-lg: 0 2px 4px rgba(10, 42, 102, .08), 0 20px 48px rgba(10, 42, 102, .16);
  --grad: linear-gradient(135deg, var(--navy-2) 0%, var(--royal) 55%, var(--sky) 100%);

  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --header-h: 116px;
}

/* ============ BASE ============ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--tint);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, .h1 { margin: 0 0 .5em; line-height: 1.15; color: var(--navy); letter-spacing: -0.02em; }
h1, .h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); font-weight: 800; }
h3 { font-size: 1.15rem; font-weight: 700; }
p { margin: 0 0 1em; color: var(--ink-2); }
/* highlighted word inside a heading, e.g. "Pan-India" */
.hl { color: var(--royal); white-space: nowrap; }
.lead { font-size: 1.15rem; color: var(--ink); font-weight: 500; }

.container { width: min(1200px, 100% - 32px); margin-inline: auto; }
.section { padding: clamp(64px, 9vw, 110px) 0; position: relative; }
.section__head { max-width: 720px; margin: 0 auto clamp(36px, 5vw, 56px); text-align: center; }
.section__head--light h2, .section__head--light p { color: var(--white); }
.section__head--light p { opacity: .85; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--green);
  margin-bottom: .9rem;
}
.eyebrow--light { color: var(--yellow); }

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: 1.05em 1.7em; border-radius: var(--radius-sm); border: 2px solid transparent;
  font: 700 .8rem/1 var(--font); text-transform: uppercase; letter-spacing: .1em; cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  white-space: nowrap;
}
.btn:hover { transform: none; }
.btn::after { content: "\2192"; font-size: 1.15em; transition: transform .2s; }
.btn:hover::after { transform: translateX(4px); }
.hero__arrow::after, .form__actions .btn::after, .nav__cta::after { content: none; }
.btn--primary { background: var(--royal); color: var(--white); }
.btn--primary:hover { background: var(--navy-2); }
.btn--ghost { background: transparent; color: var(--navy-2); border-color: var(--navy-2); }
.btn--ghost:hover { background: var(--navy-2); color: var(--white); }
.btn--light { background: var(--white); color: var(--navy-2); }
.btn--outline-light { color: var(--white); border-color: rgba(255,255,255,.6); }
.btn--outline-light:hover { background: rgba(255,255,255,.12); }

/* ============ HEADER ============ */
.header { position: sticky; top: 0; z-index: 50; background: #fff; transition: box-shadow .25s; }
.header.is-scrolled { box-shadow: 0 6px 24px rgba(10, 42, 102, .10); }
.topbar { background: var(--navy); color: #cfe3ff; font-size: .8rem; }
.topbar__inner { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; }
.topbar__links { display: flex; gap: 20px; }
.topbar a:hover { color: var(--white); }

.nav { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.nav__logo { display: inline-flex; align-items: center; gap: 7px; }
.nav__logo img { height: 54px; width: auto; }
.brandline { white-space: nowrap; display: flex; flex-direction: column; line-height: 1.2; padding-left: 8px; border-left: 1px solid var(--line); }
.brandline strong { font-size: .95rem; font-weight: 800; color: var(--navy); letter-spacing: -.01em; }
.brandline small { font-size: .72rem; font-weight: 600; color: var(--ink-2); margin-top: 1px; transition: opacity .35s ease, transform .35s ease; }
.brandline small.is-out { opacity: 0; transform: translateY(-5px); }
.brandline small.is-in { opacity: 0; transform: translateY(5px); transition: none; }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand__mark { width: 46px; height: 46px; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__text strong { font-size: 1.75rem; font-weight: 800; font-style: italic; letter-spacing: .02em; color: var(--navy); }
.brand__text small { margin-top: 5px; padding-top: 4px; border-top: 1.5px solid var(--royal); font-size: .56rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--royal); }
.footer__grid a.brand, .brand--light { display: inline-flex; margin-bottom: 16px; }
.footer__grid .brand__text { display: flex; margin: 0; }
.brand--light .brand__text strong { color: var(--white); }
.brand--light .brand__text small { color: var(--aqua); border-top-color: var(--aqua); }
.nav__menu { display: flex; align-items: center; gap: 30px; }
.nav__menu > a:not(.btn) { white-space: nowrap; font-weight: 600; font-size: .95rem; color: var(--ink); position: relative; padding: 6px 0; }
.nav__menu > a:not(.btn)::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--royal); transform: scaleX(0); transform-origin: left; transition: transform .25s;
}
.nav__menu > a:not(.btn):hover::after, .nav__menu > a.is-current::after { transform: scaleX(1); }
.nav__cta { padding: .7em 1.3em; }

.nav__toggle { display: none; background: none; border: 0; width: 44px; height: 44px; cursor: pointer; padding: 10px; }
.nav__toggle span { display: block; height: 2px; background: var(--navy); margin: 5px 0; transition: transform .25s, opacity .25s; }
.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); }

/* ============ HERO CAROUSEL ============ */
.hero { position: relative; overflow: hidden; min-height: clamp(560px, 78vh, 720px); background: var(--mist); }
.hero__track { position: relative; height: 100%; min-height: inherit; }
.slide {
  position: absolute; inset: 0; display: flex; align-items: center;
  opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility .8s;
  padding: 40px 0 90px;
}
.slide.is-active { opacity: 1; visibility: visible; }
.slide__inner { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 40px; }
.slide__copy p { font-size: 1.1rem; max-width: 520px; }
.slide__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.slide__copy > * { transform: translateY(24px); opacity: 0; transition: transform .7s ease, opacity .7s ease; }
.slide.is-active .slide__copy > * { transform: none; opacity: 1; }
.slide.is-active .slide__copy > *:nth-child(2) { transition-delay: .1s; }
.slide.is-active .slide__copy > *:nth-child(3) { transition-delay: .2s; }
.slide.is-active .slide__copy > *:nth-child(4) { transition-delay: .3s; }

.slide--1 { background: radial-gradient(ellipse at 75% 45%, #ffffff 0%, #e3efff 45%, #d3e6fb 100%); }
.slide__visual { display: flex; justify-content: center; align-items: center; }
.slide__jar {
  width: min(460px, 100%); mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 55%, transparent 100%);
          mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 55%, transparent 100%);
}

.slide--pan { background: radial-gradient(ellipse at 72% 50%, #ffffff 0%, #e6f1fe 45%, #d3e6fb 100%); }
.pan-stats { list-style: none; margin: 28px 0 0; padding: 0; display: flex; gap: 0; }
.pan-stats li { padding: 0 22px; border-left: 1px solid rgba(10, 42, 102, .15); text-align: center; }
.pan-stats li:first-child { padding-left: 0; border-left: 0; }
.pan-stats strong { display: block; font-size: 1.7rem; font-weight: 800; color: var(--navy); line-height: 1; letter-spacing: -.02em; }
.pan-stats span { display: block; margin-top: 6px; font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }

.pan-map { position: relative; width: min(560px, 100%); aspect-ratio: 1312 / 1199; animation: pan-float 7s ease-in-out infinite alternate; }
@keyframes pan-float { to { transform: translateY(-8px); } }
.pan-map__img { width: 100%; height: 100%; object-fit: contain; opacity: .82; filter: saturate(.55) brightness(1.04) contrast(.9); }
.pan-map__routes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pan-route__base { fill: none; stroke: rgba(10, 42, 102, .4); stroke-width: 4; stroke-dasharray: 10 14; }
.pan-route__flow { fill: none; stroke: #22c76f; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 4px rgba(34, 199, 111, .75)); }
.slide--pan.is-active .pan-route__flow { animation: route-draw 4s ease-in-out infinite; animation-delay: calc(var(--i) * .15s); }
.slide--pan.is-active .pan-end__ring { animation: end-ping 4s ease-out infinite; animation-delay: calc(var(--i) * .15s); }
@keyframes route-draw { 0% { stroke-dashoffset: 1; opacity: 1; } 40% { stroke-dashoffset: 0; opacity: 1; } 80% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.pan-end__dot { fill: var(--navy-2); stroke: var(--white); stroke-width: 5; }
.pan-end__ring { fill: none; stroke: var(--green); stroke-width: 5; transform-box: fill-box; transform-origin: center; opacity: 0; }
@keyframes end-ping { 0%, 38% { transform: scale(.4); opacity: 0; } 42% { opacity: .9; } 70%, 100% { transform: scale(1.8); opacity: 0; } }
/* little 20L jars ride each route from Pune to the city, in step with the route drawing */
.pan-jar { opacity: 0; }
@supports (offset-path: path("M0 0")) {
  .pan-jar { offset-rotate: 0deg; offset-distance: 0%; }
  .slide--pan.is-active .pan-jar { animation: jar-travel 4s ease-in-out infinite; animation-delay: calc(var(--i) * .15s); }
}
@keyframes jar-travel {
  0% { offset-distance: 0%; opacity: 0; }
  4% { opacity: 1; }
  40% { offset-distance: 100%; opacity: 1; }
  50% { offset-distance: 100%; opacity: 0; }
  100% { offset-distance: 100%; opacity: 0; }
}
.pan-city { font: 700 29px var(--font); fill: var(--navy); paint-order: stroke; stroke: rgba(255,255,255,.92); stroke-width: 7px; stroke-linejoin: round; letter-spacing: .01em; }
.pan-hq__dot { fill: var(--green); stroke: var(--white); stroke-width: 8; }
.pan-hq__ring { fill: rgba(26, 138, 118, .25); transform-box: fill-box; transform-origin: center; animation: hq-pulse 2.4s ease-out infinite; }
.pan-hq__ring--2 { animation-delay: 1.2s; }
@keyframes hq-pulse { from { transform: scale(.6); opacity: .9; } to { transform: scale(2.6); opacity: 0; } }
.pan-map__label { position: absolute; transform: translate(-104%, 10%); display: flex; flex-direction: column; align-items: center; text-align: center; padding: 7px 11px; background: var(--white); border-radius: var(--radius-sm); box-shadow: var(--shadow); font-size: .72rem; font-weight: 600; color: var(--ink-2); line-height: 1.3; white-space: nowrap; }
.pan-map__label strong { color: var(--navy); font-size: .9rem; font-weight: 800; }
.pan-map__legend { position: absolute; right: 2%; bottom: 4%; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; background: rgba(255,255,255,.9); border-radius: var(--radius-sm); box-shadow: var(--shadow); font-size: .74rem; font-weight: 600; color: var(--navy); white-space: nowrap; }
.pan-map__legend i { width: 22px; height: 0; border-top: 2.5px solid var(--green); }
.slide--banner { background: #e1f9ed; padding: 0 0 60px; justify-content: center; }   /* matches the mint edges of hero-across-india-v3 */
.slide__banner { height: 100%; width: auto; max-width: 100%; aspect-ratio: 16 / 9; object-fit: contain; object-position: center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%), linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%), linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.slide--3 { background: linear-gradient(160deg, #f5faff 0%, #dcecff 100%); }
.slide__products { position: relative; gap: 0; }
.products { display: flex; align-items: flex-end; margin-right: -36px; flex: none; }
.products { display: grid; align-items: end; }
.products__pair { grid-area: 1 / 1; opacity: 0; transition: opacity .8s ease; }
.products__pair.is-active { opacity: 1; }
.products__pair { width: clamp(250px, 25vw, 360px); mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse 52% 52% at 50% 50%, #000 66%, transparent 100%);
          mask-image: radial-gradient(ellipse 52% 52% at 50% 50%, #000 66%, transparent 100%); }
.products img { mix-blend-mode: multiply; }
.slide__products .offer { position: relative; z-index: 1; flex: none; width: min(330px, 100%); padding: 22px 24px 18px; }
.slide__products .offer__grid { grid-template-columns: 1fr; }
.slide__products .offer__grid li, .slide__products .offer__grid li:nth-child(even) { display: grid; grid-template-columns: 26px 1fr; column-gap: 14px; padding: 14px 0; border-left: 0; }
.slide__products .offer__grid svg { grid-row: span 2; margin: 2px 0 0; width: 24px; height: 24px; }
.slide__products .offer__grid strong { font-size: .95rem; }
.offer { width: min(460px, 100%); background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 26px 28px 22px; text-align: left; }
.offer__label { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--green); padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.offer__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; }
.offer__grid li { padding: 20px 18px 20px 0; border-bottom: 1px solid var(--line); }
.offer__grid li:nth-child(even) { padding-left: 18px; padding-right: 0; border-left: 1px solid var(--line); }
.offer__grid svg { width: 26px; height: 26px; fill: none; stroke: var(--green); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 12px; }
.offer__grid strong { display: block; color: var(--navy); font-size: 1rem; margin-bottom: 3px; }
.offer__grid span { display: block; color: var(--ink-2); font-size: .82rem; line-height: 1.45; }
/* points appear one at a time each time the slide comes up */
.slide--3 .offer__grid li, .slide--3 .offer__note { opacity: 0; transform: translateX(18px); transition: opacity .45s ease, transform .45s ease; }
.slide--3 .offer__grid svg { transform: scale(.4); transition: transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.slide--3.is-active .offer__grid li, .slide--3.is-active .offer__note { opacity: 1; transform: none; }
.slide--3.is-active .offer__grid svg { transform: none; }
.slide--3.is-active .offer__grid li:nth-child(1), .slide--3.is-active .offer__grid li:nth-child(1) svg { transition-delay: .5s; }
.slide--3.is-active .offer__grid li:nth-child(2), .slide--3.is-active .offer__grid li:nth-child(2) svg { transition-delay: 1.1s; }
.slide--3.is-active .offer__grid li:nth-child(3), .slide--3.is-active .offer__grid li:nth-child(3) svg { transition-delay: 1.7s; }
.slide--3.is-active .offer__grid li:nth-child(4), .slide--3.is-active .offer__grid li:nth-child(4) svg { transition-delay: 2.3s; }
.slide--3.is-active .offer__note { transition-delay: 2.9s; }
.offer__note { margin: 14px 0 0; font-size: .74rem; color: var(--ink-2); line-height: 1.5; }

.hero__arrow {
  position: absolute; bottom: 64px; z-index: 5;
  width: 40px; height: 40px; border-radius: var(--radius-sm); border: 0; cursor: pointer;
  background: rgba(255,255,255,.85); color: var(--navy); font-size: 24px; line-height: 1;
  border: 1px solid var(--line); transition: background .2s, color .2s;
}
.hero__arrow:hover { background: var(--navy-2); color: var(--white); }
.hero__arrow--prev { left: calc(50% - 110px); }
.hero__arrow--next { left: calc(50% + 70px); }
.hero__dots { position: absolute; left: 50%; bottom: 83px; transform: translateX(-50%); display: flex; gap: 6px; z-index: 5; }
.hero__dots button {
  width: 22px; height: 3px; border-radius: 0; border: 0; padding: 0; cursor: pointer;
  background: rgba(10, 42, 102, .25); transition: width .3s, background .3s;
}
.hero__dots button[aria-selected="true"] { width: 44px; background: var(--green); }
.hero.is-dark .hero__dots button { background: rgba(255,255,255,.45); }
.hero.is-dark .hero__dots button[aria-selected="true"] { background: var(--white); }

.wave { position: absolute; left: 0; width: 100%; height: 80px; display: block; z-index: 2; }
.wave--bottom { bottom: -1px; }
.wave--top { top: -1px; }

/* ============ CERTS ============ */
.certs { background: var(--mist-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: clamp(36px, 5vw, 56px) 0; }
.certs__inner { display: grid; grid-template-columns: minmax(220px, .8fr) 3fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.certs__intro .eyebrow { margin-bottom: .6rem; }
.certs__intro h2 { font-size: clamp(1.25rem, 1.9vw, 1.6rem); margin: 0; line-height: 1.25; }
.certs__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.cert { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 6px 16px; }
.cert + .cert { border-left: 1px solid var(--line); }
.cert__badge { width: 84px; height: 84px; object-fit: contain; margin-bottom: 12px; transition: transform .25s; }
/* the FSSAI wordmark is wide and flat: give it more width and lift it to sit level with the round seals */
.cert__badge--mpcb { width: 96px; }
/* the round ISO seal reads smaller than the other marks at the same box size, so enlarge it */
.cert__badge[src$="certs/iso.png"] { scale: 1.2; }
.cert__badge--wide { width: 116px; object-position: center 38%; }
.cert:hover .cert__badge { transform: scale(1.05); }
.cert strong { color: var(--navy); font-size: .95rem; }
.cert small { color: var(--ink-2); font-size: .78rem; line-height: 1.4; }

/* ============ ABOUT ============ */
.about__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.checklist { list-style: none; padding: 0; margin: 1.5em 0 0; display: grid; gap: 12px; }
.checklist li { position: relative; padding-left: 34px; font-weight: 500; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: var(--radius-sm);
  background: var(--green);
}
.checklist li::after {
  content: ""; position: absolute; left: 8px; top: 7px; width: 5px; height: 9px;
  border: solid var(--white); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
/* checklist: points slide in one by one, boxes pop, ticks draw, then a soft glow ripples down the list */
/* hover uses `translate` so it still works after the entrance animation has set `transform` */
.checklist li { transition: translate .25s ease; }
.checklist li:hover { translate: 5px 0; }
.reveal .checklist li { opacity: 0; transform: translateX(-18px); }
.reveal .checklist li::before { transform: scale(.4); }
.reveal .checklist li::after { transform: rotate(45deg) scale(0); }
.reveal.is-visible .checklist li { animation: check-in .55s ease forwards; }
.reveal.is-visible .checklist li::before { animation: box-pop .45s cubic-bezier(.3, 1.6, .5, 1) forwards, box-glow 6s ease-in-out infinite; }
.reveal.is-visible .checklist li::after { animation: tick-draw .35s ease-out forwards; }
.reveal.is-visible .checklist li:nth-child(1), .reveal.is-visible .checklist li:nth-child(1)::before, .reveal.is-visible .checklist li:nth-child(1)::after { animation-delay: .25s, 1.6s; }
.reveal.is-visible .checklist li:nth-child(2), .reveal.is-visible .checklist li:nth-child(2)::before, .reveal.is-visible .checklist li:nth-child(2)::after { animation-delay: .45s, 3.1s; }
.reveal.is-visible .checklist li:nth-child(3), .reveal.is-visible .checklist li:nth-child(3)::before, .reveal.is-visible .checklist li:nth-child(3)::after { animation-delay: .65s, 4.6s; }
.reveal.is-visible .checklist li:nth-child(4), .reveal.is-visible .checklist li:nth-child(4)::before, .reveal.is-visible .checklist li:nth-child(4)::after { animation-delay: .85s, 6.1s; }
/* ticks draw just after their box pops */
.reveal.is-visible .checklist li:nth-child(1)::after { animation-delay: .5s; }
.reveal.is-visible .checklist li:nth-child(2)::after { animation-delay: .7s; }
.reveal.is-visible .checklist li:nth-child(3)::after { animation-delay: .9s; }
.reveal.is-visible .checklist li:nth-child(4)::after { animation-delay: 1.1s; }
@keyframes check-in { to { opacity: 1; transform: none; } }
@keyframes box-pop { to { transform: scale(1); } }
@keyframes tick-draw { to { transform: rotate(45deg) scale(1); } }
@keyframes box-glow { 0%, 18%, 100% { box-shadow: 0 0 0 0 rgba(26, 138, 118, 0); } 6% { box-shadow: 0 0 0 7px rgba(26, 138, 118, .22); } }
.about__stats { display: grid; grid-template-columns: 1fr 1fr; }
.stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 10px; padding: 26px 24px 26px 0; border-bottom: 1px solid var(--line); }
.stat:nth-child(even) { padding-left: 24px; padding-right: 0; border-left: 1px solid var(--line); }
.stat strong { display: block; font-size: clamp(2.2rem, 3.6vw, 3rem); font-weight: 700; color: var(--navy); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stat span { color: var(--ink-2); font-weight: 600; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }

/* ============ FRANCHISE ============ */
.franchise-sec { background: var(--tint); border-top: 1px solid var(--line); }
.franchise-sec__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.franchise-sec__visual { position: relative; display: grid; justify-items: center; padding: 28px 24px 8px; background: var(--white); border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden; }
.franchise-sec__logo { height: clamp(104px, 11vw, 138px); width: auto; max-width: 230px; object-fit: contain; margin-bottom: 4px; border-radius: var(--radius-sm); }
.franchise-sec__photo { width: 100%; max-width: 520px; mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse 52% 50% at 50% 50%, #000 68%, transparent 100%);
          mask-image: radial-gradient(ellipse 52% 50% at 50% 50%, #000 68%, transparent 100%); }
.franchise-sec__copy h2 { margin-bottom: .4em; font-size: clamp(1.45rem, 2.4vw, 2rem); }
/* brand switcher */
.fr-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; margin-bottom: clamp(28px, 4vw, 44px); }
.fr-head__title { margin: .25em 0 0; max-width: 16ch; }
.fr-tabs { display: flex; gap: 10px; flex-wrap: wrap; }
.fr-tab { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); font: inherit; font-size: .88rem; font-weight: 700; color: var(--ink-2); cursor: pointer; overflow: hidden; transition: border-color .25s, color .25s, box-shadow .25s, translate .25s; }
.fr-tab__logo { height: 34px; width: 52px; object-fit: contain; filter: grayscale(1) opacity(.65); transition: filter .3s; }
.fr-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--green); transform: scaleX(0); transform-origin: left; }
.fr-tab:hover { border-color: var(--aqua); color: var(--navy); translate: 0 -2px; }
.fr-tab:hover .fr-tab__logo, .fr-tab.is-active .fr-tab__logo { filter: none; }
.fr-tab.is-active { color: var(--navy); border-color: var(--navy); box-shadow: 0 8px 22px -14px rgba(10,42,102,.55); }
.fr-tab.is-active::after { transform: scaleX(1); }
.fr-tab.is-active.is-timing::after { animation: frProgress var(--fr-ms, 7000ms) linear forwards; }
.fr-tab:focus-visible { outline: 2px solid var(--royal); outline-offset: 2px; }
@keyframes frProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.fr-panels { display: grid; grid-template-columns: minmax(0, 1fr); }
.fr-panel { grid-area: 1 / 1; }
.fr-panel:not(.is-active) { visibility: hidden; pointer-events: none; }
.fr-panel.is-active .franchise-sec__visual { animation: frIn .6s cubic-bezier(.2,.7,.2,1) both; }
.fr-panel.is-active .franchise-sec__photo { animation: frRise .8s .1s cubic-bezier(.2,.7,.2,1) both; }
.fr-panel.is-active .franchise-sec__logo { animation: frPop .6s .05s cubic-bezier(.3,1.4,.5,1) both; }
.fr-panel.is-active .franchise-sec__copy > * { animation: frIn .55s cubic-bezier(.2,.7,.2,1) both; }
.fr-panel.is-active .franchise-sec__copy > :nth-child(2) { animation-delay: .06s; }
.fr-panel.is-active .franchise-sec__copy > :nth-child(3) { animation-delay: .12s; }
.fr-panel.is-active .franchise-sec__copy > :nth-child(4) { animation-delay: .18s; }
.fr-panel.is-active .franchise-sec__copy > :nth-child(5) { animation-delay: .24s; }
@keyframes frIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes frRise { from { opacity: 0; transform: translateY(26px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes frPop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
.franchise-sec__facts { margin: 26px 0 28px; }
.franchise-sec__facts div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.franchise-sec__facts div:first-child { border-top: 1px solid var(--line); }
.franchise-sec__facts dt { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); padding-top: 3px; }
.franchise-sec__facts dd { margin: 0; font-weight: 600; color: var(--navy); }
.franchise-sec__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; }
.franchise-sec__phone { font-weight: 700; color: var(--navy); font-size: .93rem; }
.franchise-sec__phone:hover { color: var(--green); }

/* ============ SUPPLY ============ */
.supply { background: var(--mist-2); }
.supply__grid { display: grid; grid-template-columns: .85fr 1.4fr; gap: clamp(32px, 4vw, 56px); align-items: center; }
.supply__visual {
  position: sticky; top: 110px; border-radius: var(--radius); overflow: hidden; background: #dfeefe; box-shadow: var(--shadow);
}
.supply__visual img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.supply__tag {
  position: absolute; left: 20px; bottom: 20px; background: rgba(255,255,255,.96);
  padding: 12px 18px; border-radius: var(--radius); display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow);
}
.supply__tag strong { font-size: 1.6rem; color: var(--royal); font-weight: 800; }
.supply__tag span { font-size: .8rem; font-weight: 600; color: var(--navy); line-height: 1.3; max-width: 110px; }
.supply__cards { display: grid; grid-template-columns: 1fr 1fr; column-gap: 44px; align-content: start; }
.card { display: grid; grid-template-columns: 30px 1fr; column-gap: 16px; padding: 24px 0 22px; border-bottom: 1px solid var(--line); }
.card h3 { margin: 0 0 6px; font-size: 1.05rem; transition: color .2s; }
.card:hover h3 { color: var(--royal); }
.card p { margin: 0; font-size: .93rem; grid-column: 2; }
.supply__cta { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; padding-top: 28px; color: var(--ink-2); font-size: .93rem; }
.supply__cta a:not(.btn) { color: var(--navy); font-weight: 700; }
.supply__cta a:not(.btn):hover { color: var(--royal); }
.card__icon { grid-row: span 2; width: 30px; height: 30px; padding-top: 1px; }
.card__icon svg { width: 26px; height: 26px; fill: none; stroke: var(--green); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.steps { margin-top: 64px; background: var(--white); border-radius: var(--radius); padding: clamp(28px, 4vw, 44px); box-shadow: var(--shadow); }
.steps__title { text-align: center; font-size: 1.4rem; margin-bottom: 28px; }
.steps__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 24px; row-gap: 0; counter-reset: s; }
/* each step shares the list's rows (number / title / text), so every title and every
   description starts at the same height in all columns, even if one wraps onto more lines */
.steps__list li { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; }
.steps__body { position: relative; }
.steps__list li { position: relative; z-index: 1; }
/* track runs from the centre of step 01's number to the centre of step 04's (positioned by script.js) */
.steps__track { position: absolute; top: 23px; left: 23px; width: 0; height: 2px; z-index: 0;
  background: repeating-linear-gradient(90deg, var(--aqua) 0 6px, transparent 6px 12px); --p: 0; }
.steps__fill { position: absolute; left: 0; top: 0; height: 2px; width: calc(var(--p) * 100%); background: var(--grad-accent); }
.steps__jar { position: absolute; bottom: 1px; left: calc(var(--p) * 100%); width: 32px; height: 42px; transform: translateX(-50%); z-index: 2; }
.steps__jar svg { display: block; width: 100%; height: 100%; animation: jar-bob .5s ease-in-out infinite alternate; }
@keyframes jar-bob { to { transform: translateY(-2px) rotate(2deg); } }
.steps__list span { transition: background .3s, color .3s; }
.steps__list li.is-reached span { background: var(--green); color: var(--white); }
.steps__list span {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: var(--radius-sm);
  background: var(--mist); color: var(--royal); font-weight: 800; margin-bottom: 14px; position: relative; z-index: 1;
}
.steps__list strong { display: block; align-self: start; color: var(--navy); margin-bottom: 4px; line-height: 1.3; }
.steps__list p { align-self: start; font-size: .9rem; margin: 0; }

/* ============ QUALITY ============ */
.quality { background: radial-gradient(ellipse 60% 40% at 10% 12%, rgba(26, 138, 118, .26), transparent 70%), radial-gradient(ellipse 70% 55% at 100% 100%, rgba(26, 138, 118, .28), transparent 70%), linear-gradient(165deg, #0a3a66 0%, var(--navy-2) 45%, #0c5a86 78%, #0d6e6c 100%); color: var(--white); padding-top: clamp(110px, 12vw, 150px); padding-bottom: clamp(110px, 12vw, 150px); overflow: hidden; }
.quality::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 1px, transparent 1px 28px);
}
.process__wrap { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 4vw, 56px); margin-bottom: 48px; position: relative; align-items: center; }
.process__figure { overflow: hidden; margin: 0; border-radius: var(--radius); background: var(--white); padding: 28px; display: flex; flex-direction: column; justify-content: center; }
.process__figure img { width: 100%; max-width: 500px; margin: 0 auto; }
.process__col { position: relative; padding-left: 34px; }
.process__pipe { position: absolute; left: 8px; top: 0; bottom: 0; width: 4px; border-radius: 4px; background: rgba(255,255,255,.12); }
.process__pipe-fill { position: absolute; left: 0; top: 0; width: 100%; height: var(--fill, 0px); border-radius: 4px; background: linear-gradient(180deg, var(--aqua), var(--mint)); box-shadow: 0 0 12px rgba(126, 226, 168, .55); transition: height .9s cubic-bezier(.6, 0, .3, 1); }
.process__drop { position: absolute; left: 50%; top: var(--fill, 0px); width: 14px; height: 18px; transform: translate(-50%, -60%); transition: top .9s cubic-bezier(.6, 0, .3, 1);
  background: var(--mint); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; clip-path: path("M7 0 C7 0 0 8 0 11.5 A7 6.5 0 0 0 14 11.5 C14 8 7 0 7 0Z"); filter: drop-shadow(0 0 6px rgba(126, 226, 168, .9)); }
.process { list-style: none; margin: 0; padding: 0; position: relative; }
.process li { display: grid; grid-template-columns: 52px minmax(150px, .9fr) 1.3fr; align-items: center; column-gap: 16px; padding: 14px 12px; border-bottom: 1px solid rgba(255,255,255,.1); cursor: default; transition: background .35s, transform .35s; }
.process li:first-child { border-top: 1px solid rgba(255,255,255,.1); }
.process__n { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(126, 226, 168, .5); border-radius: var(--radius-sm); font-size: .8rem; font-weight: 700; color: var(--mint); font-variant-numeric: tabular-nums; transition: background .35s, color .35s, border-color .35s, transform .35s; }
.process strong { font-size: 1.02rem; font-weight: 700; color: rgba(255,255,255,.62); transition: color .35s; }
.process small { color: rgba(255,255,255,.45); font-size: .88rem; transition: color .35s; }
.process li.is-done strong { color: rgba(255,255,255,.85); }
.process li.is-done .process__n { background: rgba(126, 226, 168, .14); }
.process li.is-active { background: linear-gradient(90deg, rgba(126, 226, 168, .16), rgba(255,255,255,.03)); transform: translateX(6px); }
.process li.is-active .process__n { background: var(--mint); border-color: var(--mint); color: var(--navy); transform: scale(1.08); box-shadow: 0 0 0 5px rgba(126, 226, 168, .18); }
.process li.is-active strong { color: var(--white); }
.process li.is-active small { color: rgba(255,255,255,.88); }

/* live caption under the diagram */
.stage-now { margin-top: 18px; display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 12px; row-gap: 12px; text-align: left; }
.stage-now__count { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--green); }
.stage-now__name { font-size: 1.05rem; font-weight: 700; color: var(--navy); animation: stage-in .45s ease; }
@keyframes stage-in { from { opacity: 0; transform: translateY(6px); } }
.stage-bar { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.stage-bar i { height: 4px; border-radius: 2px; background: var(--line); transition: background .4s; }
.stage-bar i.on { background: var(--grad-accent); }
.process__figure img { transition: transform .6s ease; }
.process__figure:hover img { transform: scale(1.03); }

/* underwater scene in the section background */
.sea { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.sea__bubbles span { position: absolute; bottom: -40px; width: var(--s, 10px); height: var(--s, 10px); border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,.04) 60%); animation: rise var(--d, 14s) linear infinite; animation-delay: var(--delay, 0s); opacity: 0; }
@keyframes rise { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: .7; } 50% { transform: translate(18px, -50vh); } 90% { opacity: .5; } 100% { transform: translate(-10px, -110vh); opacity: 0; } }
.sea__bubbles span:nth-child(1) { left: 3%; --s: 8px; --d: 13s; --delay: 0s; }
.sea__bubbles span:nth-child(2) { left: 8%; --s: 14px; --d: 17s; --delay: 3s; }
.sea__bubbles span:nth-child(3) { left: 13%; --s: 6px; --d: 11s; --delay: 6s; }
.sea__bubbles span:nth-child(4) { left: 18%; --s: 10px; --d: 15s; --delay: 1s; }
.sea__bubbles span:nth-child(5) { left: 24%; --s: 18px; --d: 20s; --delay: 8s; }
.sea__bubbles span:nth-child(6) { left: 29%; --s: 7px; --d: 12s; --delay: 4s; }
.sea__bubbles span:nth-child(7) { left: 34%; --s: 12px; --d: 16s; --delay: 10s; }
.sea__bubbles span:nth-child(8) { left: 39%; --s: 9px; --d: 14s; --delay: 2s; }
.sea__bubbles span:nth-child(9) { left: 45%; --s: 16px; --d: 19s; --delay: 7s; }
.sea__bubbles span:nth-child(10) { left: 50%; --s: 6px; --d: 10s; --delay: 5s; }
.sea__bubbles span:nth-child(11) { left: 55%; --s: 11px; --d: 15s; --delay: 9s; }
.sea__bubbles span:nth-child(12) { left: 61%; --s: 8px; --d: 13s; --delay: 12s; }
.sea__bubbles span:nth-child(13) { left: 66%; --s: 5px; --d: 9s; --delay: 1.5s; }
.sea__bubbles span:nth-child(14) { left: 71%; --s: 13px; --d: 18s; --delay: 4.5s; }
.sea__bubbles span:nth-child(15) { left: 76%; --s: 7px; --d: 12s; --delay: 11s; }
.sea__bubbles span:nth-child(16) { left: 80%; --s: 20px; --d: 22s; --delay: 6.5s; }
.sea__bubbles span:nth-child(17) { left: 85%; --s: 9px; --d: 14s; --delay: 3.5s; }
.sea__bubbles span:nth-child(18) { left: 89%; --s: 6px; --d: 10s; --delay: 8.5s; }
.sea__bubbles span:nth-child(19) { left: 93%; --s: 12px; --d: 17s; --delay: 0.5s; }
.sea__bubbles span:nth-child(20) { left: 97%; --s: 8px; --d: 13s; --delay: 13s; }
.sea__bubbles span:nth-child(21) { left: 6%; --s: 5px; --d: 9s; --delay: 9.5s; }
.sea__bubbles span:nth-child(22) { left: 47%; --s: 5px; --d: 8s; --delay: 2.5s; }
.sea__bubbles span:nth-child(23) { left: 64%; --s: 15px; --d: 21s; --delay: 14s; }
.sea__bubbles span:nth-child(24) { left: 26%; --s: 6px; --d: 9s; --delay: 11.5s; }
.sea__weed { position: absolute; bottom: 70px; width: clamp(110px, 14vw, 190px); height: auto; fill: none; stroke: rgba(126, 226, 168, .28); stroke-width: 2; stroke-linecap: round; transform-origin: 50% 100%; animation: sway 7s ease-in-out infinite alternate; }
.sea__weed--l { left: -10px; }
.sea__weed--r { right: -10px; transform: scaleX(-1); animation-name: sway-r; animation-duration: 8.5s; }
@keyframes sway { from { transform: skewX(-4deg); } to { transform: skewX(4deg); } }
@keyframes sway-r { from { transform: scaleX(-1) skewX(-4deg); } to { transform: scaleX(-1) skewX(4deg); } }
.sea__fish { position: absolute; left: 0; width: var(--w, 46px); animation: swim var(--d, 38s) linear infinite; animation-delay: var(--delay, 0s); opacity: 0; }
.sea__fish svg { display: block; width: 100%; fill: none; stroke: rgba(190, 240, 215, .5); stroke-width: 1.6; stroke-linejoin: round; animation: wiggle 1.4s ease-in-out infinite alternate; }
.sea__fish svg circle { fill: rgba(255,255,255,.4); stroke: none; }
/* fish art faces left: flip the ones that swim right */
.sea__fish--r svg { transform: scaleX(-1); }
@keyframes wiggle { to { translate: 0 4px; rotate: 3deg; } }
@keyframes swim { 0% { transform: translateX(-80px); opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } 100% { transform: translateX(calc(100vw + 80px)); opacity: 0; } }
@keyframes swim-l { 0% { transform: translateX(calc(100vw + 80px)); opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } 100% { transform: translateX(-80px); opacity: 0; } }
.sea__fish--1 { top: 22%; --w: 52px; --d: 42s; --delay: 0s; }
.sea__fish--2 { top: 38%; --w: 34px; --d: 30s; --delay: 8s; animation-name: swim-l; }
.sea__fish--3 { top: 90%; --w: 44px; --d: 48s; --delay: 16s; }
.sea__fish--4 { top: 8%; --w: 28px; --d: 26s; --delay: 4s; animation-name: swim-l; }
.sea__fish--5 { top: 12%; --w: 30px; --d: 36s; --delay: 22s; animation-name: swim-l; }
.quality > .container { position: relative; }

.qa { position: relative; border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius); background: rgba(6, 26, 66, .55); }
.qa__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.qa__item { padding: 30px 28px; }
.qa__item + .qa__item { border-left: 1px solid rgba(255,255,255,.12); }
.qa__big { display: block; font-size: clamp(2.6rem, 4vw, 3.4rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; margin-bottom: 14px; background: linear-gradient(90deg, var(--mint), var(--aqua)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.qa__icon { display: block; width: 38px; height: 38px; margin: 4px 0 18px; fill: none; stroke: var(--mint); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.qa__item h3 { color: var(--white); font-size: 1rem; margin-bottom: 6px; }
.qa__item p { color: rgba(255,255,255,.7); font-size: .88rem; margin: 0; }
.qa__hygiene { display: flex; align-items: center; gap: 24px; padding: 22px 28px; border-top: 1px solid rgba(255,255,255,.12); }
.qa__badge { flex: none; width: 76px; height: 76px; display: grid; place-items: center; background: var(--white); border-radius: var(--radius-sm); padding: 6px; }
.qa__badge img { width: 100%; height: 100%; object-fit: contain; }
.qa__hygiene > div { flex: 1; }
.qa__hygiene h3 { color: var(--white); font-size: 1rem; margin-bottom: 4px; }
.qa__hygiene p { color: rgba(255,255,255,.72); font-size: .9rem; margin: 0; max-width: 720px; }
.qa__hygiene .btn { flex: none; }

/* ============ WHY ============ */
.why { background: var(--mist-2); }
.why__head { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 80px); align-items: end; margin-bottom: clamp(36px, 5vw, 56px); }
.why__head h2 { margin: 0; }
.why__head p { margin: 0; font-size: 1.02rem; max-width: 520px; }
.why__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.why__item { padding: 28px 28px 8px; position: relative; }
.why__item:first-child { padding-left: 0; }
.why__item + .why__item { border-left: 1px solid var(--line); }
.why__n { display: block; font-size: 2.6rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; margin-bottom: 22px; color: transparent; -webkit-text-stroke: 1.2px var(--royal); transition: color .3s; }
.why__item:hover .why__n { color: var(--royal); }
.why__item h3 { margin-bottom: 8px; }
.why__item p { margin: 0; font-size: .93rem; }

/* ============ CLIENTS ============ */
.clients { overflow: hidden; padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(48px, 6vw, 72px); }
.clients .section__head { margin-bottom: clamp(24px, 3vw, 36px); }
/* facility management partners */
.fm { background: linear-gradient(150deg, var(--navy) 0%, #0b3a8c 58%, var(--teal) 100%); color: var(--white); overflow: hidden; }
.fm::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 300px at 90% 0%, rgba(126,226,168,.14), transparent 70%); pointer-events: none; }
.fm__grid { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.fm__copy h2 { color: var(--white); margin: .3em 0 .45em; }
.fm__copy p { color: rgba(255,255,255,.86); font-size: 1.04rem; line-height: 1.7; margin: 0 0 26px; }
.fm__link { display: inline-flex; gap: 8px; font-weight: 700; color: var(--yellow); border-bottom: 1px solid rgba(243,223,74,.4); padding-bottom: 3px; transition: gap .25s, border-color .25s; }
.fm__link:hover { gap: 14px; border-color: var(--yellow); }
.fm__names { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255,255,255,.16); border-left: 1px solid rgba(255,255,255,.16); }
.fm__names li { position: relative; padding: clamp(18px, 2.2vw, 26px) clamp(14px, 1.6vw, 20px); border-right: 1px solid rgba(255,255,255,.16); border-bottom: 1px solid rgba(255,255,255,.16); min-height: 108px; display: flex; flex-direction: column; justify-content: flex-end; transition: background .4s; }
.fm__names li::after { content: ""; position: absolute; left: -1px; right: -1px; bottom: -1px; height: 2px; background: var(--yellow); transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.fm__names strong { font-size: clamp(1.15rem, 1.9vw, 1.55rem); font-weight: 800; letter-spacing: -.01em; line-height: 1.15; color: var(--white); }
.fm__names span { font-size: .74rem; color: rgba(255,255,255,.62); margin-top: 6px; }
.fm__names .fm__logo { margin-top: 0; display: flex; align-items: center; justify-content: center; height: clamp(58px, 6vw, 72px); padding: 10px 14px; background: var(--white); border-radius: var(--radius-sm); box-shadow: 0 6px 18px -10px rgba(0,0,0,.45); transition: translate .3s, box-shadow .3s; }
.fm__logo img { max-height: 100%; max-width: 100%; width: auto; object-fit: contain; }
.fm__logo img[src$="iss.svg"] { max-height: 92%; }
.fm__names .fm__logo:has(img[src$="supreme.png"]), .fm__names .fm__logo:has(img[src$="updater-services.svg"]) { padding: 5px 6px; }
.fm__names .fm__logo--text { font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 800; color: var(--navy); letter-spacing: -.01em; }
.fm__names li.is-lit .fm__logo, .fm__names li:hover .fm__logo { translate: 0 -3px; box-shadow: 0 12px 24px -12px rgba(0,0,0,.55); }
.fm__names span:not(.fm__logo) { margin-top: 10px; }
.fm__names .fm__more strong { color: var(--yellow); font-size: clamp(1rem, 1.5vw, 1.2rem); }
.fm__names li.is-lit, .fm__names li:hover { background: rgba(255,255,255,.07); }
.fm__names li.is-lit::after, .fm__names li:hover::after { transform: scaleX(1); }
/* staggered entrance */
.fm__names.reveal { opacity: 1; transform: none; }
.fm__names li { opacity: 0; transform: translateY(16px); }
.fm__names.is-visible li { animation: fmIn .55s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(var(--i) * 90ms + 150ms); }
@keyframes fmIn { to { opacity: 1; transform: none; } }
.marquee { display: grid; gap: 18px; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee__row { display: flex; width: max-content; gap: 18px; animation: scroll 60s linear infinite; }
.marquee__row--reverse { animation-direction: reverse; animation-duration: 70s; }
.marquee:hover .marquee__row { animation-play-state: paused; }
@keyframes scroll { to { transform: translateX(-50%); } }
.client {
  flex: none; width: 190px; height: 96px; padding: 16px 22px; border-radius: var(--radius); background: var(--white); border: 1px solid var(--line);
  display: grid; place-items: center; transition: border-color .2s;
}
.client img { max-width: 100%; max-height: 60px; object-fit: contain; }
.client:hover { border-color: var(--royal); }

/* ============ RANGE ============ */
.range { padding-top: 0; }
.range__inner {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: center;
  background: var(--grad); border-radius: var(--radius); padding: clamp(32px, 5vw, 56px);
}
.range__inner h2, .range__inner p { color: var(--white); }
.range__inner p { opacity: .88; margin: 0; }
.range__inner .eyebrow { color: var(--yellow); }
.range__visual { display: grid; gap: 22px; }
.range__photos { border-radius: var(--radius); display: grid; place-items: center; background: linear-gradient(180deg, #f4f9ff, #d9eafc); padding: 12px 24px; min-height: 260px; overflow: hidden; }
.range__pair { grid-area: 1 / 1; width: min(100%, 440px); opacity: 0; transition: opacity .8s ease;
  -webkit-mask-image: radial-gradient(ellipse 52% 52% at 50% 50%, #000 66%, transparent 100%);
          mask-image: radial-gradient(ellipse 52% 52% at 50% 50%, #000 66%, transparent 100%); }
.range__pair.is-active { opacity: 1; }
.range__photos img { mix-blend-mode: multiply; }
.range__bottle { width: 80px; margin-bottom: 8px; }
.range__jar { width: 230px; -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 60%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 60%, transparent 100%); }
.sizes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; }
.sizes li { border-radius: var(--radius-sm); text-align: center; padding: 12px 6px; background: rgba(255,255,255,.1); color: var(--white); font-weight: 700; font-size: .85rem; white-space: nowrap; }
.sizes .is-hero { background: var(--white); color: var(--navy-2); }

/* ============ LEADERSHIP ============ */
.team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.member { background: var(--white); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); transition: transform .3s, box-shadow .3s; }
.member:hover { box-shadow: var(--shadow-lg); }
.member img { width: 100%; aspect-ratio: 4/3.4; object-fit: cover; object-position: center 25%; }
.member__body { padding: 24px 26px 28px; }
.member__body h3 { font-size: 1.25rem; margin-bottom: 4px; }
.member__role { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--green); margin-bottom: 12px; }
.member__body p { font-size: .93rem; margin: 0; }

/* ============ CONTACT ============ */
.contact { background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 60%, var(--royal) 100%); }
.contact__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.contact__info h2 { color: var(--white); }
.contact__info > p { color: rgba(255,255,255,.82); }
.contact__list { margin: 28px 0; display: grid; gap: 14px; }
.contact__list div { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.14); }
.contact__list dt { color: var(--mint); font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding-top: 2px; }
.contact__list dd { margin: 0; color: var(--white); font-weight: 600; }
.contact__list a:hover { text-decoration: underline; }
.plants { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.plant { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius); padding: 16px 18px; }
.plant strong { display: block; color: var(--white); margin-bottom: 4px; }
.plant span { color: rgba(255,255,255,.75); font-size: .88rem; }

.form { background: var(--white); border-radius: var(--radius); padding: clamp(24px, 4vw, 40px); box-shadow: var(--shadow-lg); display: grid; gap: 16px; }
.form h3 { font-size: 1.5rem; margin-bottom: 4px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form label { display: grid; gap: 6px; font-size: .85rem; font-weight: 600; color: var(--navy); }
.form input, .form select, .form textarea {
  font: 500 1rem var(--font); color: var(--ink); width: 100%;
  padding: 12px 14px; border-radius: var(--radius-sm); border: 1.5px solid var(--line); background: var(--mist-2);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.form textarea { resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--green); background: var(--white); box-shadow: 0 0 0 4px rgba(26, 138, 118, .14); }
.form .is-invalid { border-color: #d33b3b; background: #fff6f6; }
.form__error { color: #c02c2c; font-size: .88rem; font-weight: 600; margin: 0; }
.form__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.form__actions .btn { flex: 1 1 180px; }

/* ============ QUOTE CTA (home) ============ */
.quote-cta { background: linear-gradient(160deg, var(--teal-dark) 0%, #157066 55%, var(--teal) 100%); padding: clamp(56px, 7vw, 88px) 0; }
.quote-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.quote-cta h2 { color: var(--white); margin-bottom: .35em; }
.quote-cta p { color: rgba(255,255,255,.8); margin: 0; max-width: 560px; }
.quote-cta__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.quote-cta__phone { color: var(--white); font-weight: 600; font-size: .95rem; }
.quote-cta__phone:hover { text-decoration: underline; }

/* ============ QUOTE PAGE ============ */
.crumbs { background: var(--mist-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: .82rem; color: var(--ink-2); }
.crumbs .container { display: flex; gap: 10px; padding: 12px 0; }
.crumbs a { color: var(--navy-2); font-weight: 600; }
.crumbs a:hover { text-decoration: underline; }
.contact--page { padding-top: clamp(48px, 6vw, 80px); }
.contact--page .h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); color: var(--white); }
.next-steps { background: var(--mist-2); }
.next-steps__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.next-steps__list li { padding: 28px 28px 8px; }
.next-steps__list li:first-child { padding-left: 0; }
.next-steps__list li + li { border-left: 1px solid var(--line); }
.next-steps__list h3 { margin-bottom: 8px; }
.next-steps__list p { margin: 0; font-size: .93rem; }

/* quote page: form + sidebar */
.quote { background: var(--tint); padding: clamp(40px, 5vw, 64px) 0 clamp(64px, 8vw, 96px); }
.quote__intro { max-width: 640px; margin-bottom: clamp(28px, 4vw, 44px); }
.quote__intro h1 { font-size: clamp(2rem, 3.6vw, 2.8rem); margin-bottom: .35em; }
.quote__intro p { font-size: 1.05rem; margin: 0; }
.quote__grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }

.qform fieldset { border: 0; margin: 0; padding: 22px 0 6px; display: grid; gap: 18px; }
.qform fieldset + fieldset { border-top: 1px solid var(--line); }
.qform legend { float: left; width: 100%; padding: 0; margin-bottom: 4px; display: flex; align-items: baseline; gap: 12px; font-size: 1.05rem; font-weight: 700; color: var(--navy); }
.qform legend + * { clear: both; }
.qform legend span { font-size: .78rem; font-weight: 700; letter-spacing: .08em; color: var(--green); }
.qform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.qform label { display: grid; gap: 7px; font-size: .84rem; font-weight: 600; color: var(--ink); }
.qform em { font-style: normal; color: var(--green); }
.qform input, .qform select, .qform textarea {
  font: 500 .98rem var(--font); color: var(--ink); width: 100%;
  padding: 12px 14px; border: 1px solid #c9d6e8; border-radius: var(--radius-sm); background: var(--white);
  transition: border-color .15s, box-shadow .15s;
}
.qform input::placeholder, .qform textarea::placeholder { color: #9aa8bd; }
.qform textarea { resize: vertical; }
.qform input:hover, .qform select:hover, .qform textarea:hover { border-color: #9fb3cf; }
.qform input:focus, .qform select:focus, .qform textarea:focus { outline: none; border-color: var(--navy-2); box-shadow: 0 0 0 3px rgba(11, 58, 140, .12); }
.qform .is-invalid { border-color: #d33b3b; background: #fff8f8; }
.qform .form__error { margin: 18px 0 0; }
.qform__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin-top: 24px; }
.qform__alt { background: none; border: 0; padding: 0; font: 600 .92rem var(--font); color: var(--navy-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.qform__alt:hover { color: var(--green); }
.qform__note { margin: 16px 0 0; font-size: .8rem; color: var(--ink-2); }

.qside { padding-top: 22px; }
.qside h2 { font-size: 1.05rem; margin-bottom: 10px; }
.qside__list { margin: 0 0 32px; border-top: 1px solid var(--line); }
.qside__list div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.qside__list dt { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); padding-top: 3px; }
.qside__list dd { margin: 0; display: grid; gap: 2px; font-weight: 600; color: var(--navy); }
.qside__list a:hover { color: var(--green); }
.qside h3 { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 10px; }
.qside__plants { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; font-size: .9rem; color: var(--ink-2); line-height: 1.5; }
.qside__plants strong { display: block; color: var(--navy); font-size: .95rem; }

/* "view all certifications" link under the badges */
.certs__more { grid-column: 1 / -1; justify-self: center; margin-top: 30px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); font-size: .88rem; font-weight: 700; color: var(--navy-2); transition: border-color .2s, color .2s; }
.certs__more span { transition: transform .2s; }
.certs__more:hover { border-color: var(--green); color: var(--green); }
.certs__more:hover span { transform: translateX(4px); }
.footer__grid a.footer__more { margin-top: 6px; color: var(--yellow); font-weight: 600; }

/* ============ CERTIFICATIONS PAGE ============ */
.certpage { background: var(--tint); padding: clamp(40px, 5vw, 64px) 0 clamp(64px, 8vw, 96px); }
.certcard { display: grid; grid-template-columns: 200px 1fr; gap: clamp(20px, 3vw, 40px); padding: 32px 0; border-top: 1px solid var(--line); }
.certcard:last-of-type { border-bottom: 1px solid var(--line); }
.certcard__logo { display: grid; place-items: center; align-self: start; height: 160px; background: var(--mist-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.certcard__logo img { max-width: 100%; max-height: 116px; object-fit: contain; }
.certcard__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.certcard__tag { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--green); margin-bottom: 6px; }
.certcard h2 { font-size: clamp(1.3rem, 2vw, 1.6rem); margin: 0 0 4px; }
.certcard__issuer { margin: 0; font-size: .92rem; }
.certcard__status { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; background: rgba(26, 138, 118, .1); color: var(--green); font-size: .76rem; font-weight: 700; letter-spacing: .04em; }
.certcard__status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(26, 138, 118, .2); }
.certcard__facts { margin: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
.certcard__facts div { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.certcard__facts dt { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); padding-top: 2px; }
.certcard__facts dd { margin: 0; font-weight: 600; color: var(--navy); font-size: .94rem; overflow-wrap: anywhere; }
.certcard__facts .muted { color: var(--ink-2); font-weight: 500; font-style: italic; }
.certcard__request { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 24px; margin-top: 18px; padding: 16px 18px; background: var(--mist-2); border: 1px dashed var(--line); border-radius: var(--radius); }
.certcard__request p { display: flex; align-items: center; gap: 10px; margin: 0; font-size: .9rem; color: var(--ink-2); }
.certcard__request svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--green); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.certcard__request .btn { padding: 11px 18px; font-size: .8rem; }
.certcard__bodies { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 18px; }
.certcard__bodies figure { margin: 0; display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.certcard__bodies img { width: 58px; height: 58px; object-fit: contain; }
.certcard__bodies figcaption { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); line-height: 1.4; }
.certcard__bodies figcaption strong { display: block; font-size: .92rem; letter-spacing: 0; text-transform: none; color: var(--navy); }
.certcard__note a { color: var(--royal); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.certcard__note { margin: 16px 0 0; font-size: .9rem; }
.certpage__qa { margin-top: 48px; padding: 28px 32px; background: var(--mist-2); border: 1px solid var(--line); border-radius: var(--radius); }
.certpage__qa h2 { font-size: 1.2rem; margin-bottom: 18px; }
.certpage__qa ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.certpage__qa li { padding: 0 20px; border-left: 1px solid var(--line); }
.certpage__qa li:first-child { padding-left: 0; border-left: 0; }
.certpage__qa strong { display: block; font-size: 1.8rem; font-weight: 800; color: var(--navy); line-height: 1.1; }
.certpage__qa span { display: block; margin-top: 6px; font-size: .84rem; color: var(--ink-2); }
.certpage__cta { margin-top: 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 28px 32px; border-radius: var(--radius); background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 60%, var(--royal) 100%); }
.certpage__cta h2 { color: var(--white); font-size: 1.3rem; margin-bottom: 4px; }
.certpage__cta p { color: rgba(255,255,255,.8); margin: 0; }
.certpage__cta .btn--primary { background: var(--white); color: var(--navy-2); }

/* ============ FOOTER ============ */
.footer { background: #061a42; color: rgba(255,255,255,.72); padding: 64px 0 24px; font-size: .92rem; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.footer p { color: rgba(255,255,255,.7); }
.hero-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 30px; margin-top: 32px; }
/* each mark gets its own natural width at a common height, so wide marks don't crowd the round ones */
.hero-badges img { height: 50px; width: auto; max-width: 92px; object-fit: contain; }
.hero-badges img[src$="certs/iso.png"] { height: 56px; }
.slide.is-active .slide__copy > *:nth-child(5) { transition-delay: .4s; }
.footer__grid a.footer__brand { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 16px; }   /* wraps (logo above text) when the column is too narrow for both */
.footer__logo { display: inline-block; padding: 0; flex: none; }   /* never squeezed by the brand text beside it */
.footer__grid .footer__logo { display: inline-block; margin: 0; }
.footer__grid .brandline { display: flex; margin: 0; border-left-color: rgba(255,255,255,.2); }
.footer__grid .brandline strong, .footer__grid .brandline small { display: block; margin-bottom: 0; }
.footer .brandline strong { color: var(--white); }
.footer .brandline small { color: rgba(255,255,255,.7); }
.footer__logo img { height: 60px; width: auto; max-width: none; }
.footer__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.footer__badges img { border-radius: var(--radius-sm); width: 46px; height: 46px; background: var(--white); padding: 3px; }
.footer h4 { color: var(--white); font-size: .9rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 14px; }
.footer__grid a, .footer__grid span { display: block; margin-bottom: 8px; }
.footer a:hover { color: var(--white); }
.footer__bottom { display: flex; justify-content: space-between; gap: 16px; margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); font-size: .84rem; }

/* ============ WHATSAPP FLOAT ============ */

/* ============ REVEAL ============ */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* ============ RESPONSIVE ============ */
/* mid-size screens: keep the dispenser slide's photo + panel inside the hero */
@media (min-width: 901px) and (max-width: 1180px) {
  .products__pair { width: 160px; }
  .products { margin-right: -24px; }
  .slide__products .offer { width: 280px; padding: 18px 18px 14px; }
}

/* switch to the hamburger menu before the 7 menu items run out of room */
@media (max-width: 1180px) {
  .nav__toggle { display: block; }
  .nav__menu {
    position: fixed; inset: 0 0 auto 0; top: var(--menu-top, 100px);
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--white); padding: 12px 16px 24px; box-shadow: 0 20px 40px rgba(10, 42, 102, .15);
    transform: translateY(-12px); opacity: 0; visibility: hidden; transition: all .25s;
  }
  .nav__menu.is-open { transform: none; opacity: 1; visibility: visible; }
  .nav__menu > a:not(.btn) { padding: 14px 4px; border-bottom: 1px solid var(--line); }
  .nav__menu > a:not(.btn)::after { display: none; }
  .nav__cta { margin-top: 16px; }
}

@media (max-width: 1080px) {
  .qa__grid { grid-template-columns: repeat(2, 1fr); }
  .qa__item:nth-child(3) { border-left: 0; }
  .qa__item:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.12); }
  .why__grid { grid-template-columns: repeat(2, 1fr); }
  .why__item:nth-child(3) { border-left: 0; padding-left: 0; }
  .why__item:nth-child(n+3) { border-top: 1px solid var(--line); margin-top: 20px; }
  .why__head { grid-template-columns: 1fr; align-items: start; }
  .supply__grid { grid-template-columns: 1fr; }
  .supply__visual { position: relative; top: 0; max-width: 420px; margin: 0 auto; }
  .certs__inner { grid-template-columns: 1fr; text-align: center; }
  .range__inner { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .fm__grid { grid-template-columns: 1fr; }
  .topbar__inner > span:first-child { display: none; }
  .topbar__inner { justify-content: center; }
  .nav { height: 66px; }
  .nav__logo img { height: 44px; }
  .nav__logo { gap: 6px; }
  .nav__logo .brandline { padding-left: 7px; }
  .nav__logo .brandline strong { font-size: .88rem; }
  .nav__logo .brandline small { font-size: .66rem; }
  .brand__mark { width: 40px; height: 40px; }
  .brand__text strong { font-size: 1.5rem; }

  .hero { min-height: 0; }
  .hero__track { display: grid; align-items: start; transition: height .45s ease; }   /* height follows the active slide (set in script.js) */
  .slide { position: relative; grid-area: 1 / 1; padding: 36px 0 110px; }
  .slide__inner { grid-template-columns: 1fr; gap: 24px; text-align: center; }
  .slide__copy p { margin-inline: auto; }
  .slide__actions, .hero-badges { justify-content: center; }
  .slide__jar { width: min(280px, 70vw); }
  .slide__products { flex-direction: column; }
  .products { margin: 0 0 -24px; }
  .products__pair { width: 240px; }
  .offer { margin: 0 auto; padding: 20px; }
  .process__wrap { grid-template-columns: 1fr; }
  .process li { grid-template-columns: 44px 1fr; }
  .process__col { padding-left: 26px; }
  .process__pipe { left: 4px; }
  .process small { grid-column: 2; margin-top: 2px; }
  .slide--banner { padding: 24px 0 96px; align-items: center; }
  .slide__banner { width: 100%; height: auto; }
  .pan-map { width: min(360px, 100%); margin: 0 auto; }
  .pan-city { font-size: 34px; stroke-width: 9px; }
  .pan-stats { justify-content: center; }
  .pan-stats li { padding: 0 14px; }
  .pan-stats strong { font-size: 1.4rem; }
  .hero__arrow { display: none; }
  .hero__dots { bottom: 70px; }

  .about__grid, .contact__grid, .quote__grid, .franchise-sec__grid { grid-template-columns: 1fr; }
  .certcard__facts { grid-template-columns: 1fr; }
  .team { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .steps__list { grid-template-columns: 1fr 1fr; }
  .steps__track { display: none; }
}

@media (max-width: 600px) {
  .fm__names { grid-template-columns: repeat(2, 1fr); }
  .fm__names li { min-height: 92px; }
  .fm__names .fm__more { grid-column: 1 / -1; min-height: 0; }
  .supply__cards, .form__row, .plants, .steps__list { grid-template-columns: 1fr; }
  .certs__list { grid-template-columns: 1fr 1fr; row-gap: 28px; }
  .cert:nth-child(3) { border-left: 0; }
  .contact__list div { grid-template-columns: 1fr; gap: 2px; }
  .sizes { grid-template-columns: repeat(3, 1fr); }
  .franchise { flex-direction: column; align-items: flex-start; }
  .client { width: 150px; height: 80px; }
  .footer__grid { grid-template-columns: 1fr; }
  .certcard { grid-template-columns: 1fr; }
  .certcard__logo { height: 130px; max-width: 220px; }
  .certcard__facts { grid-template-columns: 1fr; }
  .certcard__facts div { grid-template-columns: 1fr; gap: 2px; }
  .certcard__head { flex-direction: column; }
  .certpage__qa ul { grid-template-columns: 1fr 1fr; row-gap: 18px; }
  .certpage__qa li:nth-child(3) { padding-left: 0; border-left: 0; }
  .franchise-sec__facts div { grid-template-columns: 1fr; gap: 2px; }
  .franchise-sec__grid { grid-template-columns: minmax(0, 1fr); }
  .franchise-sec__actions .btn { white-space: normal; text-align: center; }
  .fr-tabs { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .fr-tab { flex-direction: column; gap: 6px; padding: 10px 6px; font-size: .74rem; text-align: center; }
  .fr-tab__logo { width: 100%; height: 38px; }
  .qa__item { padding: 22px 18px; }
  .qa__hygiene { flex-direction: column; align-items: flex-start; padding: 22px 18px; }
  .sea__fish--3, .sea__fish--5 { display: none; }
  .qform__row { grid-template-columns: 1fr; }
  .qside__list div { grid-template-columns: 1fr; gap: 2px; }
  .next-steps__list { grid-template-columns: 1fr; }
  .next-steps__list li { padding: 22px 0 18px; }
  .next-steps__list li + li { border-left: 0; border-top: 1px solid var(--line); }
  .why__grid { grid-template-columns: 1fr; }
  .why__item, .why__item:nth-child(3) { padding: 22px 0 18px; border-left: 0 !important; }
  .why__item + .why__item { border-top: 1px solid var(--line); margin-top: 0; }
  .footer__bottom { flex-direction: column; }
  .topbar__links { gap: 12px; font-size: .75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .fm__names li { opacity: 1; transform: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

/* narrow phones: wide wordmark logo + brand line must clear the menu button */
@media (max-width: 420px) {
  .nav__logo img { height: 38px; }
  .nav__logo .brandline { padding-left: 6px; }
  .nav__logo .brandline strong { font-size: .82rem; }
  .nav__logo .brandline small { font-size: .6rem; }
}
@media (max-width: 350px) {
  .nav__logo img { height: 34px; }
  .nav__logo .brandline small { font-size: .55rem; }
}

/* header: painted green stroke behind the logo + brand line (rest of the header stays white) */
.nav__logo { position: relative; isolation: isolate; padding: 0 6px 0 22px; }
.nav__logo img { height: 50px; }
.nav__logo::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: -40px; top: 50%; height: 72px; transform: translateY(-50%);
  background: url("assets/header-stroke.png") center / 100% 100% no-repeat;
}
.nav__logo .brandline { border-left-color: rgba(255,255,255,.4); }
/* sit the logo + text slightly above the stroke's centre line */
.nav__logo > img, .nav__logo > .brandline { position: relative; top: -4px; }
.nav__logo .brandline strong { color: var(--white); }
.nav__logo .brandline small { color: rgba(255,255,255,.88); }
@media (max-width: 900px) {
  .nav__logo { padding-left: 16px; }
  .nav__logo img { height: 42px; }
  .nav__logo::before { right: -26px; height: 60px; }
}
@media (max-width: 420px) {
  .nav__logo { padding-left: 13px; padding-right: 2px; }
  .nav__logo img { height: 34px; }
  .nav__logo::before { right: -18px; height: 50px; }
  .nav__logo > img, .nav__logo > .brandline { top: -3px; }
}
@media (max-width: 350px) {
  .nav__logo { padding-left: 11px; padding-right: 0; gap: 5px; }
  .nav__logo img { height: 30px; }
  .nav__logo .brandline { padding-left: 5px; }
  .nav__logo::before { right: -10px; height: 46px; }
}
/* reserve the width of the longest rotating brand phrase so nothing (incl. the stroke) changes size */
.brandline small { display: flex; flex-direction: column; }
.brandline small::after { content: "Royal Challenge Water & Soda"; height: 0; overflow: hidden; visibility: hidden; }

/* performance: freeze looping animations in sections that are off-screen (toggled by script.js) */
.is-offscreen, .is-offscreen *, .is-offscreen *::before, .is-offscreen *::after { animation-play-state: paused !important; }
@media (max-width: 420px) {
  .footer__grid > * { min-width: 0; }
  .footer__logo img { height: 46px; }
  .footer__brand { flex-wrap: wrap; row-gap: 8px; }
}

/* ============ MOBILE POLISH: iPhone (Safari) + Android (Chrome) ============ */
:root { color-scheme: light; }                       /* stop Android "force dark" recolouring the brand */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }   /* no font inflation when rotating */
a, button, [role="tab"], label, select, summary { touch-action: manipulation; -webkit-tap-highlight-color: rgba(18, 87, 201, .14); } /* no double-tap zoom / 300ms delay */
.qform input, .qform textarea { -webkit-appearance: none; appearance: none; }  /* iOS: no inner shadow / odd rounding */

/* iPhone notch, rounded corners and home bar (needs viewport-fit=cover in the page <meta>) */
.container { width: min(1200px, calc(100% - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))); }
.footer__bottom { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 4px); }

/* the hero tracks the visible viewport as mobile browser toolbars show/hide */
@supports (height: 1svh) { .hero { min-height: clamp(560px, 78svh, 720px); } }

@media (max-width: 900px) {
  html { scroll-padding-top: 112px; }

  /* tap targets: at least ~44px, without changing how things look */
  .topbar__inner { padding: 0; align-items: center; }
  .topbar a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer__grid a { padding: 11px 0; margin-bottom: 0; }
  .footer__grid span { margin-bottom: 0; padding: 4px 0; }
  .footer__grid a.footer__brand { padding: 0; margin-bottom: 16px; }
  .footer__bottom a { display: inline-flex; align-items: center; min-height: 44px; }
  .fm__link, .franchise-sec__phone, .quote-cta__phone, .supply__cta a { display: inline-flex; align-items: center; min-height: 44px; }
  .qform__alt { min-height: 44px; }
  .nav__logo { min-height: 44px; }
  .nav__menu .nav__cta { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .hero__dots button { position: relative; }
  .hero__dots button::after { content: ""; position: absolute; inset: -20px -3px; }   /* big invisible hit area, same 3px line */

  /* text that was under 12px */
  .pan-stats span, .stat span, .pan-map__legend, .pan-map__label, .fm__names li > span:not(.fm__logo) { font-size: .78rem; }

  /* lighter looping animation on phones: half the bubbles */
  .sea__bubbles span:nth-child(n+13) { display: none; }
}

/* iOS zooms the whole page when a field under 16px is tapped; keep fields at 16px on touch screens */
@media (max-width: 900px), (pointer: coarse) {
  .qform input, .qform select, .qform textarea { font-size: 16px; min-height: 48px; }
  .qform textarea { min-height: 96px; }
}
@media (max-width: 420px) and (min-width: 351px) {
  .nav__logo .brandline small { font-size: .68rem; }   /* was 9.6px, too small to read */
}
@media (max-width: 420px) {
  /* certifications page: the 2-column stats were wider than a 320px screen */
  .certpage__qa { padding: 24px 18px; }
  .certpage__qa ul { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .certpage__qa li { padding: 0 12px; }
  .certpage__qa li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .certpage__qa strong { font-size: 1.5rem; }
}

/* ============ LEGAL PAGES (privacy.html, terms.html) ============ */
.legal { background: var(--tint); padding: clamp(40px, 5vw, 64px) 0 clamp(64px, 8vw, 96px); }
.legal .quote__intro { max-width: 760px; }
.legal__meta { margin-top: 14px !important; font-size: .85rem !important; color: var(--ink-2); font-weight: 600; }
.legal__layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.legal__toc { position: sticky; top: calc(var(--header-h) + 20px); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; font-size: .9rem; }
.legal__toc strong { display: block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--green); margin-bottom: 10px; }
.legal__toc ol { margin: 0; padding-left: 1.3em; display: grid; gap: 7px; color: var(--ink-2); }
.legal__toc a { color: var(--navy-2); font-weight: 600; }
.legal__toc a:hover { text-decoration: underline; }
.legal__doc { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(24px, 4vw, 48px); max-width: 820px; }
.legal__doc section { scroll-margin-top: calc(var(--header-h) + 20px); }
.legal__doc section + section { margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--line); }
.legal__doc h2 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); margin-bottom: .6em; }
.legal__doc h3 { font-size: 1.05rem; margin: 1.4em 0 .5em; }
.legal__doc p, .legal__doc li { font-size: 1rem; line-height: 1.7; color: var(--ink); }
.legal__doc p { margin: 0 0 1em; }
.legal__doc ul { margin: 0 0 1em; padding-left: 1.25em; display: grid; gap: 6px; }
.legal__doc a { color: var(--royal); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.legal__doc code { font-size: .9em; background: var(--mist-2); border: 1px solid var(--line); padding: 1px 5px; border-radius: var(--radius-sm); }
.legal__rows { margin: 0 0 1.2em; border: 1px solid var(--line); border-radius: var(--radius); }
.legal__rows > div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; padding: 12px 16px; }
.legal__rows > div + div { border-top: 1px solid var(--line); }
.legal__rows span { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); padding-top: 3px; }
.legal__rows p { margin: 0; }
.legal__ticks { list-style: none; padding: 0 !important; }
.legal__ticks li { position: relative; padding-left: 32px; }
.legal__ticks li::before { content: ""; position: absolute; left: 0; top: 4px; width: 20px; height: 20px; border-radius: var(--radius-sm); background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' 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 / 14px no-repeat; }
mark.todo { background: #fff1a8; color: #5a4500; outline: 1px dashed #c9a400; padding: 0 4px; border-radius: 2px; font-weight: 600; }   /* placeholder still to be filled in */
.qform__note a, .legal .quote__intro a { color: var(--royal); font-weight: 600; text-decoration: underline; }
.footer__legal { display: flex; flex-wrap: wrap; gap: 4px 22px; }
@media (max-width: 900px) {
  .legal__layout { grid-template-columns: 1fr; }
  .legal__toc { position: static; }
  .legal__toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
}
@media (max-width: 600px) {
  .legal__toc ol { grid-template-columns: 1fr; }
  .legal__rows > div { grid-template-columns: 1fr; gap: 4px; }
  .legal__doc { padding: 22px 18px; }
}

/* ============ ENQUIRY CONSENT POPUP (quote.html) ============ */
.consent { width: min(520px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: var(--radius); box-shadow: var(--shadow-lg); color: var(--ink); background: var(--white); overflow: auto; }
.consent::backdrop { background: rgba(10, 42, 102, .55); backdrop-filter: blur(2px); }
.consent[open] { animation: consentIn .25s ease both; }
@keyframes consentIn { from { opacity: 0; transform: translateY(12px); } }
.consent__box { padding: clamp(22px, 4vw, 32px); }
.consent h2 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); margin: 4px 0 .6em; }
.consent p { margin: 0 0 .8em; font-size: .97rem; line-height: 1.6; }
.consent .legal__ticks { margin: 0 0 1em; display: grid; gap: 6px; font-size: .97rem; line-height: 1.55; }
.consent__small { font-size: .85rem !important; color: var(--ink-2); }
.consent__small a { color: var(--royal); font-weight: 600; text-decoration: underline; }
.consent__check { display: flex; gap: 12px; align-items: flex-start; margin: 18px 0 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--mist-2); font-weight: 600; font-size: .95rem; line-height: 1.45; cursor: pointer; }
.consent__check input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--green); cursor: pointer; }
.consent__actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.consent__actions .btn:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 480px) {
  .consent__actions { flex-direction: column-reverse; }
  .consent__actions .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .consent[open] { animation: none; } }
.consent__actions .btn--ghost::after { content: none; }   /* no forward arrow on "Cancel" */

/* ============ PURIFICATION: drop that clears stage by stage (replaces the old cycle diagram) ============ */
@property --t { syntax: "<number>"; inherits: true; initial-value: 0; }
.purity { --t: 0; position: relative; display: grid; justify-items: center; padding: 8px 0 0; transition: --t .9s ease; }
.purity__drop { width: min(240px, 62%); height: auto; overflow: visible; filter: drop-shadow(0 18px 28px rgba(18, 87, 201, calc(.12 + var(--t) * .2))); }
.purity__c1 { stop-color: color-mix(in srgb, #7cc8f5 calc(var(--t) * 100%), #cbb88f); }
.purity__c2 { stop-color: color-mix(in srgb, #1257c9 calc(var(--t) * 100%), #8a7350); }
.purity__shine { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 7; stroke-linecap: round; }
.purity__bubbles circle { fill: rgba(255,255,255,.55); animation: purityRise 4.2s linear infinite; }
.purity__bubbles circle:nth-child(2) { animation-delay: -1.4s; animation-duration: 3.6s; }
.purity__bubbles circle:nth-child(3) { animation-delay: -2.6s; animation-duration: 5s; }
.purity__bubbles circle:nth-child(4) { animation-delay: -.6s; animation-duration: 3.2s; }
@keyframes purityRise { from { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } to { transform: translateY(-190px); opacity: 0; } }
.purity__icons { position: absolute; left: 50%; top: 50%; width: clamp(64px, 9vw, 92px); aspect-ratio: 1; transform: translate(-50%, -18%); }
.purity__icon { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0; transform: scale(.7); transition: opacity .45s ease, transform .5s cubic-bezier(.3, 1.4, .5, 1); filter: drop-shadow(0 2px 4px rgba(10, 42, 102, .35)); }
.purity__icon circle[r=".9"] { fill: #fff; stroke: none; }
.purity__icon.is-on { opacity: 1; transform: none; }
.purity__scale { display: flex; align-items: center; gap: 10px; width: min(300px, 90%); margin-top: 22px; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.purity__scale i { position: relative; flex: 1; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #a8916a, #7cc8f5 60%, #1257c9); }
.purity__scale i::after { content: ""; position: absolute; top: 50%; left: calc(7px + var(--t) * (100% - 14px)); width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--navy-2); transform: translate(-50%, -50%); box-shadow: 0 2px 6px rgba(10, 42, 102, .3); }
.stage-now__desc { grid-column: 1 / -1; margin-top: -6px; font-size: .88rem; color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .purity__bubbles circle { animation: none; opacity: 0; } .purity { transition: none; } }

/* quote form: confirmation shown after "Send Enquiry" */
.qform[hidden], .qform__done[hidden] { display: none !important; }
.qform__done { text-align: center; padding: clamp(32px, 5vw, 56px) clamp(20px, 4vw, 40px); }
.qform__done:focus { outline: none; }
.qform__done-icon { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--green); box-shadow: 0 10px 24px rgba(26, 138, 118, .35); margin-bottom: 18px; animation: doneIn .5s cubic-bezier(.3, 1.5, .5, 1) both; }
.qform__done-icon svg { width: 32px; height: 32px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
@keyframes doneIn { from { transform: scale(.4); opacity: 0; } }
.qform__done h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-bottom: .5em; }
.qform__done p { max-width: 440px; margin: 0 auto .6em; }
.qform__done .qform__note a { color: var(--royal); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .qform__done-icon { animation: none; } }

/* compact closing band + footer on laptops/desktops, so "Let's keep your team hydrated" stays fully in view at the end of the page */
@media (min-width: 901px) {
  .quote-cta { padding: clamp(36px, 4.4vw, 64px) 0; }
  .footer { padding: 44px 0 22px; }
  .footer__grid { grid-template-columns: 1.4fr 1fr 1.25fr 1fr; gap: 28px; }
  .footer h4 { margin-bottom: 10px; }
  .footer__grid a, .footer__grid span { margin-bottom: 6px; }
  .footer__grid > :nth-child(3) > span { margin-bottom: 2px; }
  .footer__badges { margin-bottom: 10px; }
  .footer__grid a.footer__brand { margin-bottom: 10px; }
  .footer p { margin-bottom: 0; }
  .footer__bottom { margin-top: 30px; padding-top: 18px; }
}
.quote-cta { display: flex; align-items: center; }   /* keeps the content centred when script.js grows the band to fill the screen */
.quote-cta > .container { width: min(1200px, 100% - 32px); }
/* footer brand: logo always above the text (so the layout can't flip as the rotating line changes length),
   and the line keeps the width of its longest phrase so nothing around it shifts */
.footer__grid a.footer__brand { flex-direction: column; align-items: flex-start; flex-wrap: nowrap; }
.footer__grid .brandline small { display: flex; flex-direction: column; }