/* ==========================================================================
   Bearing Planet — home page
   Ported from the design handoff `Bearing Planet Home.dc.html` + README.md.
   Values are lifted verbatim from the comp; see README.md in this repo for
   the handful of documented deviations.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */
:root {
  /* brand */
  --blue: #0F58D6;
  --blue-dark: #0C46AC;
  --blue-deeper: #0A3C93;
  --blue-light: #A9C9FF;

  /* ink */
  --ink: #0B1526;
  --body-muted: #33415C;
  --muted: #5B6675;
  --faint: #8492A6;
  --placeholder: #9AA5B5;

  /* dark surfaces */
  --near-black: #0A1220;
  --on-dark: #8FA1BC;
  --on-dark-link: #C7D4E8;
  --on-blue: #C9DBF7;

  /* blue tints */
  --tint-1: #B9CFF5;
  --tint-2: #CBDCF8;
  --tint-3: #D8E5FA;
  --tint-4: #EAF1FC;

  /* surfaces */
  --grey: #F4F6F9;
  --blue-fill: #EDF3FD;
  --border: #E7EBF2;
  --border-input: #E3E8F0;
  --border-strong: #C9D8F0;

  /* signals */
  --red: #D92D20;
  --green: #3DDC71;
  --success: #0A7D3E;

  --display: 'Archivo', sans-serif;
  /* Two chains, exactly as the comp declares them. `body` falls back through
     system-ui; every element the comp gave an explicit font-family falls back
     straight to sans-serif. It matters: ● ■ → ↗ live outside the Instrument
     Sans subset, so the chain decides which face draws them and how wide they
     are. Collapsing these into one token shifts the marquee by 8px. */
  --sans: 'Instrument Sans', sans-serif;
  --sans-body: 'Instrument Sans', system-ui, sans-serif;

  --container: 1280px;
}

/* ------------------------------------------------------------------ global */
html {
  scroll-behavior: smooth;
  /* `clip` not `hidden`: hidden creates a scroll container and breaks the
     sticky header/footer inside in-app browsers. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--blue);
  color: var(--ink);
  font-family: var(--sans-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-dark); }

button, input, select, textarea { font-family: inherit; }
input::placeholder, textarea::placeholder { color: var(--placeholder); }
::selection { background: var(--blue); color: #fff; }

img { max-width: 100%; display: block; }

/* Keyboard focus. Invisible to mouse users; the comp has no focus states. */
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}
.industries :focus-visible,
.footer :focus-visible,
.nav :focus-visible,
.utility :focus-visible,
.pill:focus-visible {
  outline-color: #fff;
}

.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;
}

.container { max-width: var(--container); margin: 0 auto; }

/* Shared eyebrow: 12px/600/0.16em with an 8px red square. */
.eyebrow {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: none;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 8px; height: 8px;
  background: var(--red);
  display: inline-block;
  flex: none;
}

/* Shared section H2. */
.h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(34px, 3.4vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 18px 0 0;
}

.section { padding: 96px 28px; }
.section--grey { background: var(--grey); }
.section--white { background: #fff; }

/* --------------------------------------------------------- photo slots
   No photography shipped with the handoff — these are the drop zones,
   styled to read as deliberate rather than broken. Replace each .slot
   with an <img> when the client sends the real photos. */
.slot {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--blue-fill);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.slot::before,
.slot::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.slot::before {
  width: min(70%, 230px);
  aspect-ratio: 1;
  border: 1px solid rgba(15, 88, 214, 0.18);
}
.slot::after {
  width: min(40%, 128px);
  aspect-ratio: 1;
  border: 1px solid rgba(15, 88, 214, 0.13);
}
.slot__label {
  position: relative;
  text-align: center;
  padding: 0 18px;
  line-height: 1.5;
}
.slot__label b {
  display: block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--faint);
  text-transform: none;
}
.slot__label span {
  display: block;
  margin-top: 5px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12.5px;
  color: var(--muted);
}
.slot--warehouse { background: #E4EAF3; }
.slot--warehouse::before { width: min(58%, 300px); }
.slot--warehouse::after { width: min(34%, 170px); }

/* Bounds the header's sticky range to header+sheet. Must not create a stacking
   context (no z-index) or set overflow, or the sticky children break. */
.scroll-region { position: relative; }

/* ------------------------------------------------------------------ header
   Sticky, painted UNDER the page sheet. The sheet slides up over it on
   scroll; the menu is only visible at scroll-top by design.

   z-index is 2, not the comp's 1, and it matters in both directions:
   equal to the sheet, so the later-in-DOM sheet still paints over it and the
   slide is unchanged — but above the footer, which is sticky from scroll 0 and
   on mobile is tall enough to reach up into the nav. Pairs with .scroll-region
   above: without that bound the header would stay pinned past the sheet's end
   and paint over the footer at the bottom instead. */
.header {
  position: sticky;
  top: 0;
  z-index: 2;
}

.utility {
  background: var(--near-black);
  color: var(--on-dark);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: none;
  padding: 9px 28px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.utility__left { display: flex; gap: 10px; align-items: center; }
.utility__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--red);
  display: inline-block;
  flex: none;
}
.utility__right { display: flex; gap: 24px; flex-wrap: wrap; }
.utility__phone,
.utility__phone:hover { color: var(--on-dark-link); }

/* No border-bottom here — a hairline breaks the seamless blue.
   position:relative so the full-width mega panels anchor to the nav's box
   rather than to each nav item (see .mega in catalog.css). */
.nav { background: var(--blue); position: relative; }
.nav__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 14px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.wordmark {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.06em;
  color: #fff;
}
.wordmark:hover { color: #fff; }
.wordmark em { font-style: normal; color: var(--blue-light); }

.nav__links {
  display: flex;
  gap: 30px;
  align-items: center;
  font-size: 14.5px;
  font-weight: 500;
}
.nav__links a { color: var(--tint-3); }
.nav__links a:hover { color: #fff; }

.nav__actions { display: flex; gap: 12px; align-items: center; }
.nav__phone {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  color: var(--tint-4);
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 10px;
  white-space: nowrap;
}
.nav__phone:hover { border-color: #fff; color: #fff; }
.nav__cta {
  background: #fff;
  color: var(--blue-dark);
  font-weight: 600;
  font-size: 14px;
  padding: 11px 20px;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(6, 20, 44, 0.25);
  white-space: nowrap;
}
.nav__cta:hover { background: var(--tint-4); color: var(--blue-deeper); }

/* -------------------------------------------------------------- page sheet
   The white rounded sheet that slides between the blue header and footer. */
.sheet {
  position: relative;
  z-index: 2;
  background: #fff;
  border-radius: 28px;
  overflow: hidden;
}

/* -------------------------------------------------------------------- hero */
.hero {
  position: relative;
  overflow: hidden;
  background: #fff;
  min-height: min(74vh, 660px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.hero__photo {
  position: absolute;
  inset: 0;
  opacity: 0.85;
}
/* Poster paints first and is all most phones ever load — see main.js. */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  opacity: 0.85;
  pointer-events: none;
}
/* Flat tint, no ring motif: the hero already has its own decorative circles
   top-right, and this area belongs to the photo. Stays out of the way until
   the real macro shot lands. */
.hero__slot::before, .hero__slot::after { content: none; }
/* Rebalanced from the comp's 0.97 / 0.90@55% / 0.50 to carry a hero VIDEO.
   The comp's curve was written for a still, and it holds ~90% white all the way
   down to 55% — which leaves a moving background reading at only ~5%, i.e. a
   ghost. This keeps the wash heavy (>=0.88) across 0-62%, where the headline,
   lede and CTAs actually sit, then drops hard to 0.25 so the footage reads in
   the empty band beneath them.

   Legibility is measured, not assumed: sampled behind the text at every second
   of the 16s loop, worst-case contrast is 13.43:1 for the H1 and 7.28:1 for the
   lede (AA needs 4.5). Reverting to the comp's curve is this one declaration. */
.hero__wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.97) 0%,
    rgba(255, 255, 255, 0.94) 45%,
    rgba(255, 255, 255, 0.88) 62%,
    rgba(255, 255, 255, 0.25) 100%);
  pointer-events: none;
}
.hero__ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.hero__ring--1 {
  right: -180px; top: -180px;
  width: 640px; height: 640px;
  border: 1px solid rgba(15, 88, 214, 0.16);
}
.hero__ring--2 {
  right: -100px; top: -100px;
  width: 480px; height: 480px;
  border: 1px solid rgba(15, 88, 214, 0.11);
}
.hero__content {
  position: relative;
  max-width: var(--container);
  width: 100%;
  margin: 0 auto;
  padding: 72px 44px 44px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(15, 88, 214, 0.3);
  border-radius: 999px;
  padding: 8px 16px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: none;
  color: var(--body-muted);
}
.hero__badge i { font-style: normal; color: var(--red); }
.hero__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 24px 0 0;
  text-transform: none;
}
.hero__title em { font-style: normal; color: var(--blue); }
.hero__lede {
  max-width: 52ch;
  color: var(--body-muted);
  font-size: 17px;
  line-height: 1.65;
  margin: 24px 0 0;
}
.hero__ctas {
  display: flex;
  gap: 14px;
  margin-top: 32px;
  flex-wrap: wrap;
  justify-content: center;
}
.btn-primary {
  background: var(--blue);
  color: #fff;
  font-weight: 600;
  font-size: 15.5px;
  padding: 15px 26px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 10px 26px rgba(15, 88, 214, 0.3);
}
.btn-primary:hover {
  background: var(--blue-dark);
  color: #fff;
  transform: translateY(-1px);
}
.btn-secondary {
  color: var(--ink);
  font-weight: 600;
  font-size: 15.5px;
  padding: 15px 26px;
  border-radius: 12px;
  border: 1px solid var(--border-strong);
}
.btn-secondary:hover { border-color: var(--blue); color: var(--blue); }

.stats {
  position: relative;
  border-top: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.stats__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 22px 44px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.stats__num {
  font-family: var(--display);
  font-weight: 700;
  font-size: 30px;
  color: var(--ink);
}
.stats__label {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: none;
  color: var(--muted);
  margin-top: 4px;
}

/* ---------------------------------------------------------------- marquee */
.marquee {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 26px 0;
  background: #fff;
}
.marquee__head {
  max-width: var(--container);
  margin: 0 auto 18px;
  padding: 0 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.marquee__title {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: none;
  color: var(--muted);
}
.marquee__title i { font-style: normal; color: var(--red); }
.marquee__link { font-size: 13.5px; font-weight: 600; }
.marquee__viewport { position: relative; overflow: hidden; }
.marquee__fade {
  position: absolute;
  top: 0; bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}
.marquee__fade--l { left: 0; background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0)); }
.marquee__fade--r { right: 0; background: linear-gradient(270deg, #fff, rgba(255, 255, 255, 0)); }
.marquee__track {
  display: flex;
  width: max-content;
  animation: bpMarquee 30s linear infinite;
}
.marquee__track:hover { animation-play-state: paused; }
.marquee__pill {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--body-muted);
  border: 1px solid var(--border-input);
  border-radius: 999px;
  padding: 11px 22px;
  margin-right: 12px;
  white-space: nowrap;
}
@keyframes bpMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ------------------------------------------------------------ about / trust */
.about__grid {
  display: grid;
  grid-template-columns: minmax(380px, 1.05fr) minmax(340px, 0.95fr);
  gap: 64px;
  align-items: center;
}
.about__h2 { text-wrap: balance; }
.about__p {
  color: var(--muted);
  font-size: 16.5px;
  line-height: 1.7;
  margin: 22px 0 0;
  max-width: 56ch;
}
.about__p + .about__p { margin-top: 14px; }
/* Author emphasis, not <mark>: this is a styling highlight, not marked-for-
   reference text, and the comp uses a plain span here. */
.about__p .hl {
  color: var(--ink);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--red);
}
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 28px;
  font-weight: 600;
  font-size: 15px;
  color: var(--blue);
  transition: gap 0.2s;
}
.link-arrow:hover { gap: 14px; color: var(--blue-dark); }

.about__media { position: relative; }
.about__photo {
  height: 440px;
  border-radius: 20px;
  overflow: hidden;
  background: #E4EAF3;
}
.about__statcard {
  position: absolute;
  left: -26px;
  bottom: -26px;
  background: var(--ink);
  color: #fff;
  border-radius: 16px;
  padding: 22px 26px;
  box-shadow: 0 20px 40px rgba(11, 21, 38, 0.25);
}
.about__statnum {
  font-family: var(--display);
  font-weight: 700;
  font-size: 40px;
  line-height: 1;
}
.about__statnum em { font-style: normal; color: #5B8DEF; }
.about__statlabel {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: none;
  color: var(--on-dark);
  margin-top: 6px;
}

.trust {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 16px;
  margin-top: 88px;
}
.trust__card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 26px;
}
.trust__card:hover { border-color: var(--blue); }
.trust__num {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--blue);
}
.trust__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 19px;
  margin: 12px 0 0;
}
.trust__body {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
  margin: 8px 0 0;
}
.trust__gstin {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  color: var(--body-muted);
}

/* -------------------------------------------------------------- products */
/* The conveyor stage wraps the products head + grid. It has to carry the
   container constraint itself, because the grid is a direct child of it
   rather than of .container (the motion layer needs the grid free to travel
   horizontally). Without this the grid would run the full section width and
   lay out 4 columns instead of the approved 3. */
.conveyor__stage {
  max-width: var(--container);
  margin: 0 auto;
}

.products__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
}
.products__intro {
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.65;
  max-width: 44ch;
  margin: 0;
}
.products__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 20px;
  margin-top: 44px;
}
.card {
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px;
  background: #fff;
  transition: all 0.2s;
}
.card:hover {
  border-color: var(--blue);
  box-shadow: 0 16px 40px rgba(11, 21, 38, 0.08);
  transform: translateY(-3px);
}
.card__photo {
  /* Was a fixed 200px on a 380px card: a 1.9:1 letterbox. Every squarish
     product then filled barely 44% of the width and floated in white.
     The cutouts are normalised to 4:3, so the box matches them. */
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  /* White, not the blue fill: a cutout sits on white, and any sliver of a
     tinted box behind it reads as a grey rectangle floating in the card. */
  background: #fff;
}
.card__row {
  padding: 18px 10px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.card__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 20px;
  margin: 0;
}
.card__quote {
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
}
.card__quote:hover { color: var(--red); }
.card__brands {
  padding: 0 10px 10px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--faint);
}

/* ------------------------------------------------------------------- how */
.how__h2 { max-width: 20ch; }
.how__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 20px;
  margin-top: 44px;
}
.step {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 30px;
  position: relative;
  overflow: hidden;
}
.step__watermark {
  font-family: var(--display);
  font-weight: 700;
  font-size: 64px;
  color: var(--blue-fill);
  position: absolute;
  top: 10px;
  right: 20px;
  line-height: 1;
}
.step__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 21px;
  position: relative;
  margin: 0;
}
.step__body {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.65;
  margin: 10px 0 0;
  position: relative;
  max-width: 34ch;
}
.how__note {
  margin: 26px 0 0;
  font-size: 14px;
  color: var(--muted);
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ------------------------------------------------------------- industries */
.industries {
  background: var(--near-black);
  padding: 96px 28px;
  position: relative;
  overflow: hidden;
}
.industries__ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.industries__ring--1 {
  left: -220px; bottom: -220px;
  width: 560px; height: 560px;
  border: 1px solid rgba(143, 177, 235, 0.12);
}
.industries__ring--2 {
  left: -140px; bottom: -140px;
  width: 400px; height: 400px;
  border: 1px solid rgba(143, 177, 235, 0.09);
}
.industries .container { position: relative; }
.industries__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
}
.industries__eyebrow { color: var(--on-dark); }
/* This heading alone carries no letter-spacing in the comp, where every other
   H2 is -0.01em. Matching the comp rather than "correcting" it. */
.industries__h2 { color: #fff; letter-spacing: normal; }
.industries__intro {
  color: var(--on-dark);
  font-size: 15px;
  line-height: 1.65;
  max-width: 40ch;
  margin: 0;
}
/* His 16 industries (29 Sep), eight a side on desktop. */
.industries__list {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(8, auto);
  grid-auto-flow: column;
  column-gap: 56px;
  border-top: 1px solid rgba(143, 177, 235, 0.16);
}
@media (max-width: 900px) {
  .industries__list { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
}
.ind-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 16px 8px;
  border-bottom: 1px solid rgba(143, 177, 235, 0.16);
  color: transparent;
  min-width: 0;
}
.ind-row:hover { background: rgba(15, 88, 214, 0.12); color: transparent; }
.ind-row__word {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(26px, 2.5vw, 38px);
  text-transform: none;
  letter-spacing: 0.01em;
  /* Stroke up from 0.5: at the smaller two-column size the outline read faint. */
  -webkit-text-stroke: 1px rgba(199, 212, 232, 0.8);
  color: transparent;
  transition: color 0.2s;
}
/* Row-level hover: the README describes the fill and the row tint as one
   hover state, so the word fills from anywhere in the row. */
.ind-row:hover .ind-row__word {
  color: #fff;
  -webkit-text-stroke: 1px transparent;
}
.ind-row__meta {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: none;
  color: var(--on-dark);
  white-space: nowrap;
}
.industries__tail {
  margin-top: 20px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: none;
  color: var(--on-dark);
}

/* ---------------------------------------------------------------- enquiry */
.enquiry { padding: 96px 14px; }
.enquiry__card {
  max-width: var(--container);
  margin: 0 auto;
  background: linear-gradient(130deg, var(--blue), var(--blue-dark) 60%, var(--blue-deeper));
  border-radius: 26px;
  position: relative;
  overflow: hidden;
}
.enquiry__ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.enquiry__ring--1 {
  right: -160px; top: -160px;
  width: 520px; height: 520px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.enquiry__ring--2 {
  right: -90px; top: -90px;
  width: 380px; height: 380px;
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.enquiry__ring--3 {
  right: -20px; top: -20px;
  width: 240px; height: 240px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.enquiry__grid {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(360px, 1fr);
  gap: 48px;
  padding: clamp(36px, 5vw, 72px);
  position: relative;
}
.enquiry__eyebrow {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: none;
  color: var(--tint-1);
}
.enquiry__h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(34px, 3.6vw, 54px);
  line-height: 1.06;
  color: #fff;
  margin: 18px 0 0;
  text-wrap: balance;
}
.enquiry__body {
  color: var(--tint-2);
  font-size: 16px;
  line-height: 1.7;
  margin: 20px 0 0;
  max-width: 46ch;
}
.enquiry__number {
  display: inline-block;
  margin-top: 36px;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(28px, 3.2vw, 46px);
  color: #fff;
  border-bottom: 3px solid rgba(255, 255, 255, 0.5);
  padding-bottom: 8px;
  letter-spacing: 0.01em;
}
.enquiry__number:hover { color: #fff; border-color: #fff; }
.enquiry__wa {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 16px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: none;
  color: var(--tint-1);
}
.enquiry__wa i {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green);
  display: inline-block;
  flex: none;
}

.form {
  background: #fff;
  border-radius: 18px;
  padding: 30px;
  box-shadow: 0 30px 60px rgba(6, 20, 44, 0.35);
}
.form__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 20px;
  margin: 0;
}
.form__sub {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.6;
  margin: 6px 0 0;
}
.form__rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}
.part-row {
  display: grid;
  grid-template-columns: 1fr 86px 34px;
  gap: 10px;
  align-items: center;
}
.input {
  border: 1px solid var(--border-input);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  color: var(--ink);
  outline: none;
  width: 100%;
  box-sizing: border-box;
}
.input--qty { padding: 12px; }
.input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(15, 88, 214, 0.15);
}
.part-row__remove {
  border: 1px solid var(--border-input);
  background: #fff;
  border-radius: 10px;
  height: 42px;
  cursor: pointer;
  color: var(--faint);
  font-size: 16px;
  line-height: 1;
}
.part-row__remove:hover { color: var(--red); border-color: var(--red); }
.form__add {
  margin-top: 12px;
  background: none;
  border: 1px dashed #B9C6DA;
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--blue);
  cursor: pointer;
  width: 100%;
}
.form__add:hover { border-color: var(--blue); background: #F4F8FE; }
.form__contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
}
.form__submit {
  margin-top: 16px;
  width: 100%;
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 15px;
  font-size: 15.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(15, 88, 214, 0.3);
}
.form__submit:hover { background: var(--blue-dark); }
.form__err {
  margin-top: 12px;
  font-size: 13px;
  color: var(--red);
  font-weight: 500;
}
.form__sent {
  margin-top: 12px;
  font-size: 13px;
  color: var(--success);
  font-weight: 500;
}
.form__foot {
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--faint);
  line-height: 1.55;
}
[hidden] { display: none !important; }

/* ----------------------------------------------------------------- footer
   Sticky at the viewport bottom, placed after the sheet, so the sheet's
   bottom edge reveals it like a curtain. Pure CSS. */
.footer {
  position: sticky;
  bottom: 0;
  z-index: 1;
  background: var(--blue);
  color: var(--on-blue);
  padding: 72px 28px 0;
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(260px, 1.3fr) repeat(3, minmax(160px, 1fr));
  gap: 40px;
  padding-bottom: 56px;
}
.footer__blurb {
  font-size: 14px;
  line-height: 1.7;
  margin: 18px 0 0;
  max-width: 34ch;
}
.footer__head {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: none;
  color: var(--blue-light);
  margin-bottom: 16px;
}
.footer__links {
  display: flex;
  flex-direction: column;
  gap: 11px;
  font-size: 14px;
}
.footer__links a { color: var(--on-dark-link); }
.footer__links a:hover { color: #fff; }
.footer__address {
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
}
/* A GSTIN is an identifier: never let the footer's lowercase style touch it. */
.footer__bottom span + span { text-transform: none; }
.footer__bottom {
  text-transform: none;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  padding: 22px 0 26px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.06em;
}

/* ------------------------------------------------------------------- pill */
.pill {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 60;
  background: var(--ink);
  color: #fff;
  border-radius: 999px;
  padding: 13px 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 14.5px;
  box-shadow: 0 12px 30px rgba(11, 21, 38, 0.35);
}
.pill:hover {
  transform: translateY(-2px);
  color: #fff;
  background: var(--blue);
}

/* ================================================================ responsive
   The comp is a desktop artboard with no breakpoints. Everything above is
   the comp verbatim; below is the collapse, which keeps the type scale and
   only changes how columns stack. */

@media (max-width: 980px) {
  .nav__inner { flex-wrap: wrap; row-gap: 14px; }
  .nav__links {
    order: 3;
    width: 100%;
    justify-content: center;
    gap: 24px;
    padding-top: 2px;
  }
}

/* The footer's own tracks bottom out at 260 + 160*3 + 120 of gaps = 860px, but
   the container is only (vw - 56) — so below 916px the last column walks past
   the padding. It has to break one step earlier than everything else. */
@media (max-width: 915px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}

@media (max-width: 900px) {
  .section { padding: 72px 24px; }
  .industries { padding: 72px 24px; }
  .hero__content { padding: 60px 28px 36px; }
  .stats__inner { padding: 20px 28px; }

  .about__grid { grid-template-columns: 1fr; gap: 40px; }
  .about__photo { height: 380px; }
  .about__statcard { left: -16px; bottom: -20px; }
  .trust { margin-top: 64px; }

  .enquiry__grid { grid-template-columns: 1fr; gap: 36px; }
  .enquiry { padding: 72px 16px; }

  .footer__grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}

@media (max-width: 700px) {
  .stats__inner { grid-template-columns: repeat(2, 1fr); gap: 20px 16px; }
  .about__photo { height: 320px; }
  .about__statcard { left: -10px; padding: 18px 22px; }
  .about__statnum { font-size: 34px; }
  .marquee__fade { width: 64px; }

  /* At the comp's 640/480px these read as a corner detail against a 1280
     container; at phone width they sweep across the headline. Scaled to keep
     the same corner-arc character. */
  .hero__ring--1 { right: -140px; top: -150px; width: 400px; height: 400px; }
  .hero__ring--2 { right: -90px; top: -100px; width: 290px; height: 290px; }
  .industries__ring--1 { left: -160px; bottom: -160px; width: 360px; height: 360px; }
  .industries__ring--2 { left: -100px; bottom: -100px; width: 250px; height: 250px; }
}

@media (max-width: 620px) {
  .ind-row {
    gap: 12px;
    padding: 14px 4px;
  }
  /* The comp's clamp floors at 34px, but the container keeps shrinking below
     it, so "MANUFACTURING" is silently clipped by .industries{overflow:hidden}
     under ~358px. Caps at the same 34px, so this only ever shrinks — and only
     below 620px, where the 4.6vw term is already floored anyway. */
  .ind-row__word { line-height: 1.1; font-size: clamp(20px, 5.6vw, 28px); }
}

/* The sticky curtain reveal only works while the footer is shorter than the
   viewport. Once it is taller, sticky drags its top above the viewport at every
   scroll position and the wordmark/blurb become permanently unreachable — the
   1-column footer is 736px against an iPhone 14's 664px of Safari viewport, and
   the 2-column one is 468px against a landscape phone's 390px. Below these
   thresholds the footer just scrolls up normally, which reads near-identically:
   the sheet's rounded corners still meet the blue. */
@media (max-width: 560px), (max-height: 560px) {
  .footer { position: static; }
}

@media (max-width: 560px) {
  .section { padding: 56px 20px; }
  .industries { padding: 56px 20px; }
  .hero__content { padding: 48px 20px 32px; }
  .stats__inner { padding: 18px 20px; }
  .marquee__head { padding: 0 20px; }
  .utility { padding: 9px 20px; justify-content: center; text-align: center; }
  .utility__right { gap: 16px; justify-content: center; }
  .nav__inner { padding: 14px 20px; }
  .nav__phone { display: none; }
  /* Five items on one 390px line: 'About us' broke into two lines and
     pushed the row tall. Nowrap the items and share the slack. */
  .nav__links { gap: 8px; font-size: 13.5px; justify-content: space-between; }
  .nav__links a { white-space: nowrap; }

  .about__statcard { left: -8px; bottom: -18px; }
  /* The badge is one nowrap flex line in the comp; at phone width its three
     items each wrap internally and strand the dot. Wrap as whole items on
     centred lines instead. */
  .hero__badge {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    font-size: 10.5px;
    letter-spacing: 0.09em;
    padding: 8px 14px;
    gap: 8px;
  }
  .footer { padding: 56px 20px 0; }
  .footer__grid { grid-template-columns: 1fr; gap: 32px; padding-bottom: 40px; }
  .form { padding: 22px; }
  .enquiry__number { margin-top: 28px; }
  .pill { right: 14px; bottom: 14px; padding: 12px 18px; font-size: 14px; }
}

@media (max-width: 460px) {
  .part-row { grid-template-columns: 1fr 62px 34px; gap: 8px; }
  .input { padding: 12px 12px; }
  .form__contact { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee__track { animation: none; transform: none; }
  .marquee__viewport { overflow-x: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .btn-primary:hover, .pill:hover, .card:hover { transform: none; }
}

@media print {
  .pill, .marquee__fade { display: none; }
  .header, .footer { position: static; }
}

/* ==========================================================================
   Editorial bands (21 Jul) — SKF-style full-bleed image sections that add
   depth and imagery to the homepage. Two patterns: --hero (full-bleed dark
   image with overlaid text) and --split (image one side, text the other).
   ========================================================================== */
.eband { position: relative; overflow: hidden; }

/* Full-bleed dark overlay band (the "genuine / spot the counterfeit" one). */
.eband--hero {
  min-height: min(72vh, 640px);
  display: flex;
  align-items: center;
  background: var(--near-black);
}
.eband--hero .eband__media { position: absolute; inset: 0; }
.eband--hero .eband__media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.eband--hero .eband__wash {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(10,18,32,0.92) 0%, rgba(10,18,32,0.7) 46%, rgba(10,18,32,0.28) 100%);
}
.eband--hero .eband__inner { position: relative; z-index: 2; width: 100%; padding: 96px 44px; }
.eband--hero .eband__eyebrow { color: var(--tint-1); }
.eband--hero .eband__title { color: #fff; }
.eband--hero .eband__title em { color: var(--red); }
.eband--hero .eband__lede { color: var(--on-blue); }

.eband__eyebrow {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eband__eyebrow::before { content: ""; width: 8px; height: 8px; background: var(--red); display: inline-block; }
.eband__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(38px, 5vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-transform: none;
  margin: 20px 0 0;
  max-width: 16ch;
}
.eband__title em { font-style: normal; }
.eband__lede {
  font-size: 18px;
  line-height: 1.65;
  margin: 22px 0 0;
  max-width: 50ch;
}
.eband__cta { display: inline-flex; margin-top: 30px; }

/* Split editorial band (image one side, statement the other). */
.eband--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  background: var(--grey);
}
.eband--split .eband__media { min-height: 420px; }
.eband--split .eband__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eband--split .eband__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 72px clamp(28px, 5vw, 88px);
}
.eband--split .eband__eyebrow { color: var(--muted); }
.eband--split .eband__title { color: var(--ink); }
.eband--split .eband__title em { color: var(--blue); }
.eband--split .eband__lede { color: var(--muted); }
/* Alternate the image to the right on the second split band. */
.eband--split.eband--flip .eband__media { order: 2; }

@media (max-width: 820px) {
  .eband--split { grid-template-columns: 1fr; }
  .eband--split .eband__media { min-height: 260px; order: 0 !important; }
  .eband--split .eband__inner { padding: 44px 24px; }
  .eband--hero .eband__inner { padding: 64px 24px; }
  .eband--hero .eband__wash {
    background: linear-gradient(180deg, rgba(10,18,32,0.72), rgba(10,18,32,0.9));
  }
}

/* ==========================================================================
   ANATOMY / EXPLODED VIEW (22 Jul) — the client's a reference build ask, applied
   to the five ranges he named. Markup from tools/gen_anatomy.py.

   Static-first, and that is the whole design: what ships here is the fully
   exploded, fully labelled state, so with JS off (or reduced motion) this is a
   readable technical diagram rather than a broken animation. motion.css/js
   layer the pin and the separation on top under .motion.
   ========================================================================== */
.anat {
  background: #fff;
  border-top: 1px solid var(--border);
  padding: 96px 28px;
}
.anat__head {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 40px;
  align-items: end;
}
.anat__intro {
  margin: 0;
  color: var(--muted);
  font-size: 16.5px;
  line-height: 1.65;
  max-width: 46ch;
  justify-self: end;
}

/* Range switcher. Real buttons: JS turns them into the scrub control, and
   without JS they are in-page anchors to each diagram. */
.anat__tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 34px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border);
}
.anat__tab {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 9px 17px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--body-muted);
  cursor: pointer;
}
.anat__tab span {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--faint);
}
.anat__tab:hover { border-color: var(--blue); color: var(--blue); }
.anat__tab[aria-current="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.anat__tab[aria-current="true"] span { color: var(--blue-light); }

/* Static deck: every range stacked and readable. .motion collapses this into
   one pinned stage. */
.anat__deck { display: grid; gap: 72px; margin-top: 48px; }
.anat__item {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(28px, 5vw, 76px);
  align-items: center;
}
.anat__stage { position: relative; }
.anat__svg { width: 100%; height: auto; display: block; overflow: visible; }

/* Line-art vocabulary, one weight throughout so the five read as one set. */
.anat__ring, .anat__disc, .anat__slab {
  fill: var(--blue-fill);
  stroke: var(--blue);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}
.anat__ring--soft { fill: rgba(15, 88, 214, 0.05); stroke: var(--border-strong); }
.anat__ball {
  fill: #fff;
  stroke: var(--blue);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}
.anat__rivet { fill: var(--blue); }
/* Bolt slots read as voids, so they take the page background, not the fill. */
.anat__hole {
  fill: #fff;
  stroke: var(--blue);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}
.anat__slot, .anat__lead {
  stroke: var(--blue);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}
/* Leader line out to the callout column, for parts too small to reach it. */
.anat__lead { stroke: var(--border-strong); stroke-dasharray: 2 3; }
.anat__num circle { fill: var(--ink); }
.anat__num text {
  fill: #fff;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11px;
  text-anchor: middle;
}

.anat__sub {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: none;
  color: var(--faint);
}
.anat__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-transform: none;
  margin: 8px 0 0;
  color: var(--ink);
}
.anat__parts {
  list-style: none;
  counter-reset: anatp;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.anat__li {
  counter-increment: anatp;
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--border);
  align-items: baseline;
}
.anat__li::before {
  content: counter(anatp, decimal-leading-zero);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--blue);
  padding-top: 2px;
}
/* Both children belong in the text column. Without the explicit placement the
   name takes (row 1, col 2) and the description falls through to (row 2,
   col 1) — the 26px numeral column — and wraps one word per line. */
.anat__li b,
.anat__li span { grid-column: 2; }
.anat__li b {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink);
  display: block;
}
.anat__li span {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}
.anat__cta { margin-top: 20px; }

@media (max-width: 900px) {
  .anat { padding: 64px 22px; }
  .anat__head { grid-template-columns: 1fr; gap: 18px; }
  .anat__intro { justify-self: start; }
  .anat__item { grid-template-columns: 1fr; gap: 26px; }
  .anat__stage { max-width: 320px; margin: 0 auto; }
  .anat__deck { gap: 56px; }
}

/* ==========================================================================
   SHOP BY BRAND (22 Jul) — the carousel the client drew on his screenshot: brand
   logo, then the products of that brand. Slides from generate_catalog.py.

   Native scroll-snap carries this with JS off; the arrows are progressive
   enhancement and get hidden when there is nothing to scroll.
   ========================================================================== */
.brandc { border-top: 1px solid var(--border); }
.brandc__head {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 40px;
  align-items: end;
}
.brandc__intro {
  margin: 0;
  color: var(--muted);
  font-size: 16.5px;
  line-height: 1.65;
  max-width: 46ch;
  justify-self: end;
}
.brandc__frame {
  position: relative;
  margin-top: 36px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}
.brandc__viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Fade the cut edges so a half-visible slide reads as "more this way". */
  mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
}
.brandc__viewport::-webkit-scrollbar { display: none; }
.brandc__track {
  display: flex;
  gap: 14px;
  padding: 4px 2px 6px;
}
.brandc__slide {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: 268px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px 20px 18px;
}
.brandc__slide:hover { border-color: var(--border-strong); }

/* The logo sits in a fixed-height well so 24 different aspect ratios all
   line up on one baseline instead of jittering the cards. */
.brandc__logo {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.brandc__logo img { height: 44px; width: auto; max-width: 100%; object-fit: contain; }
.brandc__name {
  margin-top: 14px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--ink);
}
.brandc__ranges {
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--faint);
}
.brandc__ranges a { color: var(--faint); }
.brandc__ranges a:hover { color: var(--blue); }
.brandc__label {
  margin-top: 16px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: none;
  color: var(--faint);
}
.brandc__chips {
  margin-top: 9px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.brandc__chip {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  color: var(--blue);
  background: var(--blue-fill);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 5px 11px;
}
.brandc__chip:hover { border-color: var(--blue); background: #fff; }
/* The range chip is the parent of the product chips beside it, so it reads a
   step stronger. Keeps "Ball & Roller Bearings > Deep Groove" legible as a
   hierarchy rather than as two equal, competing claims. */
.brandc__chip--range {
  background: var(--ink);
  color: #fff;
}
.brandc__chip--range:hover { background: var(--blue); color: #fff; border-color: transparent; }
.brandc__none {
  font-size: 13px;
  color: var(--muted);
  font-style: italic;
}
.brandc__all {
  margin-top: auto;
  padding-top: 16px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  color: var(--blue);
}
.brandc__arrow {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: #fff;
  color: var(--ink);
  font-size: 17px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.brandc__arrow:hover { border-color: var(--blue); color: var(--blue); }
.brandc__arrow[disabled] { opacity: 0.32; cursor: default; }
.brandc__arrow[disabled]:hover { border-color: var(--border-strong); color: var(--ink); }
.brandc__rail {
  margin-top: 18px;
  height: 2px;
  background: var(--border);
  overflow: hidden;
}
.brandc__rail span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--blue);
  transform: scaleX(0.12);
  transform-origin: 0 50%;
}

@media (max-width: 900px) {
  .brandc__head { grid-template-columns: 1fr; gap: 18px; }
  .brandc__intro { justify-self: start; }
  /* Arrows are a pointer affordance; touch has the swipe. */
  .brandc__arrow { display: none; }
  .brandc__frame { grid-template-columns: minmax(0, 1fr); }
  .brandc__slide { width: 240px; }
}

/* ==========================================================================
   SHOP BY CATEGORY coverflow (30 Jul) — the first of the client's two 22 Jul
   screenshots of a reference build: one large centred card with the name
   over the photo, the neighbours peeking either side for depth, round arrows,
   a CTA beneath.

   The mechanic is taken, not the styling: theirs is a barrel-curved card on
   brand orange, this is the site's own blue/ink over the catalogue photography.
   Centre-snap scrolling means it works with JS off; motion.js only marks the
   centred card and wires the arrows and dots.
   ========================================================================== */
.catc__head {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 40px;
  align-items: end;
}
.catc__intro {
  margin: 0;
  color: var(--muted);
  font-size: 16.5px;
  line-height: 1.65;
  max-width: 46ch;
  justify-self: end;
}
/* Half the active card's width, reused by the track padding and the arrow
   placement so they cannot disagree. */
.catc { --catc-half: min(30vw, 430px); padding-inline: 0; }
.catc__gutter { padding-inline: 28px; box-sizing: border-box; }

.catc__frame {
  position: relative;
  margin-top: 38px;
}
.catc__viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.catc__viewport::-webkit-scrollbar { display: none; }
.catc__track {
  display: flex;
  gap: 20px;
  /* Half a viewport of padding either side is what lets the FIRST and LAST
     cards reach the centre. Without it neither end can ever be the active
     card, and the rail looks broken at its extremes. */
  padding: 6px calc(50% - var(--catc-half));
}
/* End runway. Deliberately ~a gap wider than strictly needed: overshoot just
   leaves a little dead scroll, undershoot means the last card can never be
   centred, so err long. vw rather than % because a percentage here resolves
   against the padded track content box, not the viewport. */
.catc__spacer {
  flex: 0 0 auto;
  width: calc(50vw - var(--catc-half));
}

.catc__slide {
  scroll-snap-align: center;
  flex: 0 0 auto;
  width: calc(var(--catc-half) * 2);
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Neighbours sit back. JS adds .is-active to the centred one. */
  opacity: 0.42;
  transition: opacity 0.35s ease;
}
.catc__slide.is-active { opacity: 1; }

/* The scale lives on the CARD, never on the flex item. A transform on the
   item shrinks the scroll container's scrollable overflow region, which ate
   331px of runway and meant the LAST category could never reach the centre
   (it went active, but sat off to the right with next already disabled).
   Keeping the item's layout box untransformed makes the end of the rail
   exactly as long as the track padding says it is. */
.catc__card { transform: scale(0.945); transition: transform 0.35s ease; }
.catc__slide.is-active .catc__card { transform: scale(1); }

.catc__card {
  position: relative;
  display: block;
  transform-origin: 50% 50%;
  width: 100%;
  overflow: hidden;
  /* A gentle curve top and bottom, nodding at their barrel card without
     copying it. Percentage radii keep it responsive, unlike clip-path. */
  border-radius: 34% / 7%;
  background: var(--ink);
  aspect-ratio: 16 / 9;
  color: #fff;
}
.catc__card:hover { color: #fff; }
.catc__media { position: absolute; inset: 0; }
.catc__media img { width: 100%; height: 100%; object-fit: cover; }
.catc__wash {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 18, 32, 0.12) 0%, rgba(10, 18, 32, 0.34) 46%, rgba(10, 18, 32, 0.76) 100%);
}
.catc__label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 0 8% 7%;
  text-align: center;
}
.catc__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(22px, 3.1vw, 46px);
  line-height: 1.06;
  letter-spacing: -0.015em;
  text-transform: none;
  margin: 0;
  color: #fff;
  text-shadow: 0 2px 18px rgba(6, 14, 28, 0.5);
}
.catc__count {
  display: block;
  margin-top: 8px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.13em;
  text-transform: none;
  color: var(--tint-2);
}
/* The CTA belongs to the centred card only; on the neighbours it would be
   both unreachable and visually noisy. */
.catc__cta {
  margin-top: 22px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.catc__slide.is-active .catc__cta { opacity: 1; pointer-events: auto; }

.catc__arrow {
  position: absolute;
  top: 50%;
  /* Centred ON the card's edge, which is where his reference puts them. */
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: #fff;
  color: var(--ink);
  font-size: 19px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}
.catc__arrow--prev { left: calc(50% - var(--catc-half) - 26px); }
.catc__arrow--next { right: calc(50% - var(--catc-half) - 26px); }
.catc__arrow:hover { border-color: var(--blue); color: var(--blue); }
.catc__arrow[disabled] { opacity: 0.3; cursor: default; }
.catc__arrow[disabled]:hover { border-color: var(--border-strong); color: var(--ink); }

/* Shared dot control (built by motion.js). */
.catc__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 26px;
}
.carousel__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--border-strong);
  cursor: pointer;
}
.carousel__dot.is-on { background: var(--blue); transform: scale(1.35); }
.carousel__dot:hover { background: var(--blue); }

@media (max-width: 900px) {
  .catc__head { grid-template-columns: 1fr; gap: 18px; }
  .catc__intro { justify-self: start; }
  /* His reference is the phone view WITH arrows on the slide edges, so they
     stay. At 41vw half-width the desktop offsets would push them off-screen,
     so they sit just inside the card instead of outside it. */
  .catc__arrow { width: 40px; height: 40px; }
  .catc__arrow--prev { left: 10px; }
  .catc__arrow--next { right: 10px; }
  .catc { --catc-half: 41vw; }
  .catc__track { gap: 12px; }
  .catc__card { aspect-ratio: 4 / 3; border-radius: 26% / 6%; }
  /* Touch has no hover to reveal the CTA, and the whole card is a link
     anyway, so the neighbours stay legible instead of dimmed to nothing. */
  .catc__slide { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  .catc__viewport { scroll-behavior: auto; }
  .catc__slide { transition: none; opacity: 1; }
  .catc__card { transform: none; transition: none; }
  .catc__cta { opacity: 1; pointer-events: auto; transition: none; }
}

/* ==========================================================================
   THE FOUR PAGES (4 Aug) — contact, certificates, brands, about. Built from
   the client's 22 Jul list. Deliberately reuses .section/.container/.h2/.eyebrow/
   .slot/.stats and the brand chips from the homepage rail, so these read as
   the same site rather than four new layouts.
   ========================================================================== */
.pg__head {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 40px;
  align-items: end;
  margin-top: 26px;
}
.pg__intro {
  margin: 0;
  color: var(--muted);
  font-size: 16.5px;
  line-height: 1.65;
  max-width: 46ch;
  justify-self: end;
}
.pg__intro--wide { justify-self: start; margin-top: 14px; max-width: 62ch; }

.pg__cols {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(24px, 4vw, 56px);
  margin-top: 48px;
  align-items: start;
}
.pg__panel {
  background: var(--grey);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 26px;
}
.pg__panel--flat { background: #fff; }
.pg__label {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: none;
  color: var(--faint);
  margin-top: 22px;
}
.pg__label:first-child { margin-top: 0; }
.pg__addr, .pg__lines {
  margin: 7px 0 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink);
}
.pg__wa { margin-top: 28px; }
.pg__list {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}
.pg__list li {
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  padding-left: 18px;
  position: relative;
}
.pg__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 7px; height: 7px;
  background: var(--blue);
}
.pg__list b { color: var(--ink); font-weight: 600; }
.pg__note {
  margin: 26px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--faint);
}
.pg__note--wide { max-width: 74ch; margin-top: 34px; }

/* About: the range list as flush cells, not cards. */
.pg__ranges {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}
.pg__range {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink);
  background: #fff;
}
.pg__range:hover { background: var(--blue-fill); color: var(--blue); }
.stats--page { border-bottom: 1px solid var(--border); }

/* Certificates */
.cert__grid {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.cert__card {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 26px 24px;
  background: #fff;
}
.cert__logo { height: 44px; display: flex; align-items: center; }
.cert__logo img { height: 40px; width: auto; object-fit: contain; }
.cert__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  text-transform: none;
  margin: 16px 0 0;
  color: var(--ink);
}
.cert__for {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: none;
  color: var(--blue);
  margin-top: 4px;
}
.cert__body { margin: 12px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.cert__note {
  margin-top: 26px;
  border-left: 2px solid var(--blue);
  padding: 4px 0 4px 18px;
}
.cert__note p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--muted); max-width: 72ch; }
.cert__note b { color: var(--ink); }
.cert__slots {
  margin: 28px 0 30px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.cert__slot { aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; }
/* The certificates themselves, each opening its PDF. */
.cert__docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; margin: 26px 0 30px; }
.cert__doc { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.cert__doc a { display: block; background: #fff; border: 1px solid var(--border-input); border-radius: 12px; padding: 10px; transition: border-color 0.18s ease; }
.cert__doc a:hover { border-color: var(--blue); }
.cert__doc img { display: block; width: 100%; height: auto; }
.cert__doc figcaption { font-family: var(--sans); font-size: 14px; line-height: 1.45; color: var(--body-muted); }
.cert__doc figcaption b { display: block; color: var(--ink); font-size: 15px; }

/* Brands page: the same chip vocabulary as the homepage rail. */
.brandp__grid {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.brandp__card {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px 20px;
  background: #fff;
}
.brandp__card:hover { border-color: var(--border-strong); }
.brandp__logo { height: 46px; display: flex; align-items: center; }
.brandp__logo img { height: 40px; width: auto; max-width: 100%; object-fit: contain; }
.brandp__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  text-transform: none;
  margin: 14px 0 12px;
  color: var(--ink);
}

@media (max-width: 900px) {
  .pg__head { grid-template-columns: 1fr; gap: 16px; }
  .pg__intro { justify-self: start; }
  .pg__cols { grid-template-columns: 1fr; gap: 28px; margin-top: 32px; }
  .cert__grid, .brandp__grid, .cert__slots { grid-template-columns: 1fr; }
  .pg__ranges { grid-template-columns: 1fr; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .brandp__grid { grid-template-columns: repeat(2, 1fr); }
  .pg__ranges { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Sheet-derived additions (4 Aug) — brands that arrived via the client's
   categorisation sheet rather than the brochure (KG, FYH, Mitutoyo) have no
   extracted logo yet, so they carry a typographic mark. Same display face as
   the wordmark, so it reads as deliberate rather than as a broken image.
   ========================================================================== */
.brandmark {
  font-family: var(--display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 0.02em;
  color: var(--ink);
  line-height: 1;
}
.brandmark--sm { font-size: 15px; align-self: center; }
/* Text pill in the logo marquee: the base .marquee__pill already IS the
   typographic treatment, so the text variant needs no extra rules. The logo
   variant is the one that swaps padding for the image. */

/* ==========================================================================
   SHOP BY BRAND, take two (4 Aug) — the 27-card carousel from the sheet data
   buried every make in chip piles and hid most of them off-screen. Now a
   flush selector grid (house sharp-flush-cells): all 27 visible, click one,
   ONE detail strip below shows what we stock it in. Tiles are real links to
   /brands/#b-<slug>, so no-JS lands on the full page; motion.js upgrades the
   click in place.
   ========================================================================== */
.brandsel { margin-top: 36px; }
.brandsel__grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}
.brandsel__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 76px;
  padding: 12px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: #fff;
}
/* height:auto too, or the 30px height attribute holds while max-width
   narrows the width and the logo squashes (his 23 Sep "logos look stretched"). */
.brandsel__tile img { height: auto; max-height: 30px; width: auto; max-width: 100%; object-fit: contain; }
.brandsel__tile .brandmark { font-size: 17px; }
.brandsel__tile:hover { background: var(--blue-fill); }
.brandsel__tile.is-on {
  background: var(--blue-fill);
  box-shadow: inset 0 -3px 0 var(--blue);
}
.brandsel__detail {
  border: 1px solid var(--border);
  border-top: 0;
  background: var(--grey);
  padding: 22px 24px;
  min-height: 118px;
}
.brandsel__panel { display: none; }
.brandsel__panel.is-on { display: block; }
.brandsel__phead {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}
.brandsel__phead b {
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  text-transform: none;
  color: var(--ink);
}
.brandsel__phead span {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: none;
  color: var(--faint);
}

@media (max-width: 900px) {
  .brandsel__grid { grid-template-columns: repeat(4, 1fr); }
  .brandsel__tile { height: 64px; }
  .brandsel__detail { padding: 16px; }
}

/* ==========================================================================
   COUNTER BAND (13 Aug) — his six numbers, moving digits, from the SKF
   emarketplace reference he sent 9 Aug: dark glass tiles continuing the dark
   hero above. Numbers are static in the HTML; motion.js animates them once
   on first view, so no-JS and reduced motion read the finished figures.
   ========================================================================== */
.stats--counters {
  background: #0A1220;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.stats__inner--six {
  max-width: var(--container);
  margin: 0 auto;
  padding: 34px 28px 38px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.stats__inner--six > div {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 18px 16px 15px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.stats--counters .stats__num {
  color: #fff;
  font-size: clamp(22px, 1.9vw, 30px);
  white-space: nowrap;
}
.stats--counters .stats__label { color: var(--tint-1); margin-top: 5px; }

@media (max-width: 1100px) { .stats__inner--six { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .stats__inner--six { grid-template-columns: repeat(2, 1fr); gap: 9px; } }
@media (prefers-reduced-motion: reduce) {
  .stats__inner--six > div { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ==========================================================================
   HERITAGE (3 Sep, from his 9 Aug composite of SKF's "Since 1907" block):
   a real part on white, the founding year, one statement. Photo hygiene rule
   applies: contain on white, generous negative space.
   ========================================================================== */
.heritage { background: #fff; border-top: 1px solid var(--border); padding: 96px 28px; }
.heritage__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.heritage__photo { aspect-ratio: 1 / 1; border-radius: 22px; overflow: hidden; background: #fff; border: 1px solid var(--border); }
.heritage__photo img { width: 100%; height: 100%; object-fit: contain; padding: 9%; box-sizing: border-box; }
.heritage__p { margin: 20px 0 0; font-size: 17px; line-height: 1.7; color: var(--muted); max-width: 54ch; }
.heritage .link-arrow { margin-top: 24px; display: inline-flex; }
@media (max-width: 900px) { .heritage { padding: 64px 22px; } .heritage__grid { grid-template-columns: 1fr; gap: 26px; } .heritage__photo { max-width: 360px; } }

/* Brand pages (3 Sep): logo -> that brand's products. */
.brandpg__head { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; margin-top: 26px; }
.brandpg__logo { width: 168px; height: 96px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 16px; background: #fff; padding: 16px; }
.brandpg__logo img { max-height: 56px; width: auto; max-width: 100%; object-fit: contain; }
.brandpg__logo .brandmark { font-size: 26px; }
.brandpg__grid { margin-top: 40px; }
.brandpg__cta { margin-top: 36px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.brandpg__cta .link-arrow { margin-left: 8px; }
.brandp__logo { display: flex; }
@media (max-width: 700px) { .brandpg__head { grid-template-columns: 1fr; gap: 16px; } }

/* ------------------------------------------------- lowercase headings
   His 22 Jul note: "lets have all the header in lowercase match the vibe,
   no caps". Applied at the type level rather than per-section, because the
   per-section rules only ever reached the homepage and left every inner
   page h1 title-cased. Brand names inside a heading go down with it: that
   is the ask. Eyebrows and utility strings are NOT headings and keep their
   own casing rules. */
h1, h2, h3, h4,
.h1, .h2, .h3,
.card__title, .card__title a,
.catc__name,
.pp__h1, .pg__h1, .pgbanner__h1,
.brandpg__head h1,
.heroB__sub, .heroB__h1,
.enquiry__h2, .footer__h3,
.mnav__rname, .mnav__pages a, .mega__card b {
  text-transform: none;
}

/* ------------------------------------------------ floating WhatsApp button
   Asked for on 7 Aug ("Also can we add a floating WhatsApp button"). It sits
   on every page, not just the homepage, and the enquiry pill steps left of it
   so the two never overlap. Green because that is the affordance people
   recognise; everything else on the page stays in the house palette. */
.wafab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 61;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background: #25D366;
  display: grid;
  place-items: center;
  box-shadow: 0 12px 30px rgba(11, 21, 38, 0.32);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.wafab svg { width: 30px; height: 30px; fill: #fff; display: block; }
.wafab:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
@media (hover: hover) {
  .wafab:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(11, 21, 38, 0.4); }
}
/* The enquiry pill shares the corner, so it moves clear of the button. */
.pill { right: 88px; }
@media (max-width: 560px) {
  .wafab { width: 48px; height: 48px; right: 16px; bottom: 16px; }
  .wafab svg { width: 27px; height: 27px; }
  .pill { right: 74px; bottom: 19px; padding: 11px 16px; font-size: 13.5px; }
}

/* ------------------------------------------------------- mobile menu
   Below 900px the nav links row is replaced by one button and a sheet.
   The desktop mega panel is hover-driven and has no phone equivalent, so
   the ranges and the brand logos were unreachable from a phone header. */
.navburger { display: none; }
.mnav { display: none; }

@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__inner { flex-wrap: nowrap; row-gap: 0; }
  .navburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 40px;
    padding: 0 8px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 10px;
    cursor: pointer;
  }
  .navburger span {
    display: block;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform 0.22s ease, opacity 0.18s ease;
  }
  .navburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .navburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .navburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .mnav {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(8, 14, 26, 0.55);
    backdrop-filter: blur(3px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .mnav[hidden] { display: none; }
  .mnav__sheet {
    background: #fff;
    min-height: 100%;
    padding: 18px 20px 40px;
    box-sizing: border-box;
  }
  .mnav__head { display: flex; align-items: center; justify-content: space-between; }
  .mnav__eyebrow {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: none;
    color: var(--body-muted);
  }
  .mnav__eyebrow--mid { display: block; margin: 26px 0 12px; }
  .mnav__close {
    width: 40px; height: 40px;
    font-size: 30px; line-height: 1;
    background: transparent; border: 0; color: var(--ink); cursor: pointer;
  }
  .mnav__ranges { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
  .mnav__range {
    display: flex; flex-direction: column; gap: 8px;
    padding: 10px;
    border: 1px solid var(--border-input);
    border-radius: 12px;
    color: var(--ink);
  }
  .mnav__rimg { display: block; height: 74px; border-radius: 8px; overflow: hidden; background: #fff; }
  .mnav__rimg img { width: 100%; height: 100%; object-fit: contain; padding: 6px; box-sizing: border-box; }
  .mnav__rname { font-family: var(--sans); font-size: 12.5px; font-weight: 600; line-height: 1.25; }
  .mnav__brands { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .mnav__brand {
    display: grid; place-items: center;
    height: 46px;
    border: 1px solid var(--border-input);
    border-radius: 10px;
    background: #fff;
  }
  .mnav__brand img { max-width: 76%; max-height: 22px; object-fit: contain; }
  .mnav__pages { display: grid; gap: 2px; margin-top: 26px; }
  .mnav__pages a {
    padding: 13px 2px;
    border-bottom: 1px solid var(--border-input);
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
  }
  .mnav__ctas { display: grid; gap: 10px; margin-top: 22px; }
  .mnav__ctas a { text-align: center; }
  html.mnav-open, html.mnav-open body { overflow: hidden; }
}

/* ------------------------------------------------------------ ticker
   His 6 Sep header annotation: a scrolling line under the utility bar. The
   claim is his; the words are as he wrote them. */
.ticker {
  background: var(--blue);
  color: #fff;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.ticker__track {
  display: flex;
  align-items: center;
  gap: 28px;
  width: max-content;
  padding: 7px 0;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  white-space: nowrap;
  animation: ticker 48s linear infinite;
}
.ticker__track i { font-style: normal; font-size: 7px; opacity: 0.7; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } }
.wordmark { display: inline-flex; align-items: center; gap: 10px; }
/* The blue mark sat on the blue nav and all but vanished (his 25 Sep "logo is
   not coming out good"). A white disc behind it and a size up. */
.wordmark__mark { display: block; width: 46px; height: 46px; border-radius: 50%; background: #fff; padding: 3px; box-sizing: border-box; box-shadow: 0 1px 6px rgba(4, 20, 60, 0.25); }
.heroB__lede--logo { display: flex; justify-content: center; }
.heroB__lede--logo img { height: 56px; width: auto; max-width: none; object-fit: contain; background: #fff; padding: 8px 14px; border: 1px solid var(--border); border-radius: 10px; }
@media (max-width: 560px) {
  /* Mark and name must clear the Enquiry button at 390 (29 Sep QC: the T sat under it). */
  .nav__inner .wordmark { gap: 8px; font-size: 15px; }
  .wordmark__mark { width: 32px; height: 32px; padding: 2px; }
  .heroB__lede--logo img { height: 46px; }
  .ticker__track { font-size: 11.5px; }
}

/* ---------------------------------------------- about: business timeline
   From his 5 Sep PDF: four milestones on a dashed line, each with a logo. */
.timeline { margin: 34px 0 10px; }
.timeline--full { margin: 44px 0 36px; }
.timeline .eyebrow { margin-bottom: 4px; }
.timeline__track {
  list-style: none; margin: 14px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  position: relative;
}
.timeline__track::before {
  content: ""; position: absolute; left: 4%; right: 4%; top: 30px;
  border-top: 2px dashed var(--border-strong); z-index: 0;
}
.timeline__item {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  padding: 16px 12px 18px;
  background: #fff; border: 1px solid var(--border-input); border-radius: 14px;
}
.timeline__logo { display: block; height: 28px; width: auto; max-width: 120px; object-fit: contain; object-position: center; }
/* About page opens on the timeline and the stats band (29 Sep). */
.timeline--top { margin: 8px 0 28px; }
.pg__vmg { display: grid; gap: 22px; margin-top: 30px; }
.pg__vmgitem p { margin: 6px 0 0; font-size: 16px; line-height: 1.7; color: var(--body-muted); }
/* His 22 Sep ask: Vision / Mission / Goal bigger for visibility. */
.pg__vmghead { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(24px, 2.2vw, 32px); letter-spacing: -0.01em; color: var(--blue); }
.timeline__item b { font-family: var(--sans); font-size: 22px; letter-spacing: -0.01em; color: var(--blue); }
.timeline__item span { font-family: var(--sans); font-size: 13px; line-height: 1.35; color: var(--body-muted); }
@media (max-width: 760px) {
  .timeline__track { grid-template-columns: 1fr 1fr; }
  .timeline__track::before { display: none; }
}


/* ------------------------------------------- sentence case (1 Oct)
   His 29 Sep: "Font is good, just the first alphabet capital at the
   beginning of the sentence". Headings and names now keep their authored
   case (the lowercase rules above were switched off). Small labels stay
   lowercase with a capital first letter. ::first-letter needs a block box,
   so the flex labels are switched to block with an inline marker. */
.eyebrow::first-letter,
.slot__label b::first-letter,
.utility::first-letter,
.hero__badge::first-letter,
.stats__label::first-letter,
.marquee__title::first-letter,
.about__statlabel::first-letter,
.ind-row__meta::first-letter,
.industries__tail::first-letter,
.enquiry__eyebrow::first-letter,
.enquiry__wa::first-letter,
.footer__head::first-letter,
.eband__eyebrow::first-letter,
.anat__tab::first-letter,
.anat__sub::first-letter,
.brandc__label::first-letter,
.catc__count::first-letter,
.pg__label::first-letter,
.cert__for::first-letter,
.brandsel__phead span::first-letter,
.mnav__eyebrow::first-letter,
.mega__colhead::first-letter,
.pp__vcap::first-letter,
.pp__relhead::first-letter,
.conveyor__hint::first-letter,
.heroB__kicker::first-letter,
.heroB__cue::first-letter { text-transform: uppercase; }
.eyebrow { display: block; }
.eyebrow::before { display: inline-block; margin-right: 10px; vertical-align: middle; }
.pill { transition: opacity 0.25s ease, transform 0.25s ease; }
.pill.pill--hidden { opacity: 0; pointer-events: none; transform: translateY(12px); }

/* 8 Oct: WhatsApp and Call side by side under the enquiry number (his 4 Oct ask). */
.enquiry__btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.enquiry__btn { display: inline-flex; align-items: center; gap: 9px; padding: 12px 20px; border-radius: 999px; font-family: var(--sans); font-weight: 600; font-size: 15px; color: #fff; }
.enquiry__btn svg { width: 20px; height: 20px; fill: currentColor; display: block; }
.enquiry__btn--wa { background: #25D366; color: #0B1526; }
.enquiry__btn--wa:hover { background: #1FBE5B; color: #0B1526; }
.enquiry__btn--call { border: 1px solid rgba(255,255,255,0.55); }
.enquiry__btn--call:hover { border-color: #fff; color: #fff; }