/* ============================================================
   BharatBulk — Design System
   Palette: white/spacious, green trust, orange CTA, blue text
   ============================================================ */
:root {
  /* Brand blue (headings, nav, important text) */
  --blue: #173B68;
  --blue-2: #1D416C;
  --ink: #173B68;
  --navy: #173B68;          /* legacy alias used by about/suppliers */
  --navy-2: #173B68;

  /* Text */
  --text: #203F68;
  --muted: #5E7188;         /* secondary copy */
  --muted-2: #60758C;

  /* Green — trust / verified / success (accent) */
  --green: #0B9F55;
  --green-2: #16A05D;
  --green-dark: #0A8F4D;
  --green-tint: #EAF7F0;
  --green-tint-2: #F3FAF6;

  /* Orange — primary CTA / highlights (accent) */
  --orange: #FF6B35;
  --orange-2: #FF7A45;
  --orange-tint: #FFF1EB;

  /* Legacy alias (about/suppliers use --green for icons) kept green */
  --gold: #0B9F55;

  /* Surfaces */
  --bg: #ffffff;
  --bg-2: #FAFBFC;
  --bg-3: #F7F9FA;
  --card: #ffffff;

  /* Lines & shadow */
  --line: #E5E9ED;
  --line-2: #E8ECEF;
  --shadow: 0 6px 24px rgba(23, 59, 104, 0.07);
  --shadow-sm: 0 2px 10px rgba(23, 59, 104, 0.06);
  --shadow-lg: 0 18px 44px rgba(23, 59, 104, 0.12);

  /* Radius (moderate) */
  --radius: 14px;
  --radius-md: 12px;
  --radius-sm: 9px;

  --wrap: min(1200px, calc(100% - 40px));

  /* Latin defaults. The per-script blocks near the bottom of this file swap
     these two for the active locale — headings included, which is why they are
     variables: Poppins has no Indic glyphs, so a hardcoded heading font would
     quietly drop every Indic locale onto a system fallback. */
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-head: 'Poppins', 'Inter', system-ui, sans-serif;

  font-family: var(--font-body);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--blue);
  font-weight: 700;
}

svg {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}

.nav-shell {
  width: var(--wrap);
  height: 74px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 26px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: max-content;
}

.brand-cart {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: #fff;
  background: linear-gradient(140deg, var(--orange), #ff8a4c);
  border-radius: 11px;
  box-shadow: 0 6px 14px rgba(255, 107, 53, 0.28);
  flex: 0 0 auto;
}

.brand-cart svg { width: 24px; height: 24px; stroke-width: 2.1; }

.brand-text strong {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  color: var(--blue);
  letter-spacing: -0.2px;
}

.brand-text strong span { color: var(--orange); }

.brand-text small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1px;
}

/* keep old img logo usable if referenced elsewhere */
.nav-logo { height: 46px; width: auto; object-fit: contain; }

.nav-links {
  display: flex;
  align-items: center;
  /* Nav labels double in some locales (nav.about: 8 -> 16 chars in Bhojpuri).
     The gap absorbs that before the labels themselves have to give. */
  gap: clamp(14px, 1.8vw, 26px);
  margin-left: auto;
  font-size: max(12.5px, calc(14px * var(--label-scale)));
  font-weight: 600;
}
/* A nav item that wraps mid-word reads as broken, and the row has vertical
   room for one line only. Keep each on its own line and let the gap flex. */
.nav-links a { white-space: nowrap; }

.nav-links a { color: var(--blue); opacity: 0.9; transition: color 0.18s; }
.nav-links a:hover, .nav-links a.active { color: var(--orange); opacity: 1; }

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 20px; /* room for a wrapped label — see .btn */
  border: 0;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(135deg, var(--orange), #ff8046);
  font-size: max(12.5px, calc(14px * var(--label-scale)));
  font-weight: 700;
  line-height: var(--lh-snug);
  box-shadow: 0 8px 18px rgba(255, 107, 53, 0.26);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(255, 107, 53, 0.36); }
.nav-cta svg { width: 17px; height: 17px; }

.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--blue);
  place-items: center;
  padding: 11px;
}
.menu-toggle span { display: block; width: 100%; height: 2px; background: currentColor; margin: 3px 0; border-radius: 2px; }

/* ============================================================
   LANGUAGE PICKER
   A <details> element, so it opens and closes with no JS.
   ============================================================ */
.lang-picker {
  position: relative;
  flex: 0 0 auto;
}

.lang-picker > summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--blue);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  list-style: none; /* Firefox */
  white-space: nowrap;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
/* Safari/Chrome draw their own disclosure triangle. */
.lang-picker > summary::-webkit-details-marker { display: none; }
.lang-picker > summary::marker { content: ''; }
.lang-picker > summary:hover { border-color: var(--green); box-shadow: var(--shadow-sm); }
.lang-picker > summary:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

.lang-globe { width: 17px; height: 17px; color: var(--green); flex: 0 0 auto; }
.lang-caret { width: 14px; height: 14px; opacity: 0.55; transition: transform 0.2s ease; }
.lang-picker[open] > summary .lang-caret { transform: rotate(180deg); }
.lang-picker[open] > summary { border-color: var(--green); }

.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  width: 264px;
  max-height: min(70vh, 420px);
  overflow-y: auto;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

.lang-menu-title {
  margin: 2px 6px 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.lang-menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

.lang-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  color: var(--blue);
  transition: background 0.15s ease;
}
.lang-option:hover { background: var(--bg-3); }
.lang-option:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }

/* The name in its own script leads; the latin hint is for anyone who cannot
   read that script yet and is scanning for their language by its English name. */
.lang-native { font-size: 14.5px; font-weight: 600; }
.lang-english { color: var(--muted); font-size: 12px; font-weight: 500; }
.lang-tick { width: 16px; height: 16px; margin-left: auto; color: var(--green); flex: 0 0 auto; }

.lang-option.is-current { background: var(--green-tint); }
.lang-option.is-current .lang-native { color: var(--green-dark); }

/* ============================================================
   PER-SCRIPT FONT STACKS
   Indic text in a fallback system font is the tell that a translation was
   bolted on. Each locale loads exactly one Noto Sans face (see header.ejs)
   and this puts it in front of Inter for that locale only.
   ============================================================ */
html.script-devanagari { --font-body: 'Noto Sans Devanagari', 'Inter', sans-serif; --font-head: 'Noto Sans Devanagari', 'Poppins', sans-serif; }
html.script-bengali   { --font-body: 'Noto Sans Bengali', 'Inter', sans-serif;    --font-head: 'Noto Sans Bengali', 'Poppins', sans-serif; }
html.script-gujarati  { --font-body: 'Noto Sans Gujarati', 'Inter', sans-serif;   --font-head: 'Noto Sans Gujarati', 'Poppins', sans-serif; }
html.script-gurmukhi  { --font-body: 'Noto Sans Gurmukhi', 'Inter', sans-serif;   --font-head: 'Noto Sans Gurmukhi', 'Poppins', sans-serif; }
html.script-tamil     { --font-body: 'Noto Sans Tamil', 'Inter', sans-serif;      --font-head: 'Noto Sans Tamil', 'Poppins', sans-serif; }
html.script-kannada   { --font-body: 'Noto Sans Kannada', 'Inter', sans-serif;    --font-head: 'Noto Sans Kannada', 'Poppins', sans-serif; }

/* "BharatBulk" is latin in every locale, so the wordmark keeps Poppins even
   when the surrounding page has switched to a Noto face. */
.brand-text strong,
.lang-gate-brand { font-family: 'Poppins', 'Inter', sans-serif; }

/* ============================================================
   LANGUAGE-ADAPTIVE METRICS

   The same sentence is not the same size in every language. Measured across
   /locales against the hi-Latn default, short UI labels expand a long way:

     categories.mroT      12 -> 41 chars  (3.4x, Tamil)
     form.unit.kg          2 -> 10 chars  (5.0x, Tamil)
     nav.about             8 -> 16 chars  (2.0x, Bhojpuri)
     hero.trust.verified  18 -> 32 chars  (1.8x, Tamil)

   A layout tuned to Hinglish therefore overflows or wraps to three lines in
   Tamil. Two knobs handle it centrally instead of patching each component:

   --lh-*        line-height. Indic vowel marks sit above AND below the
                 baseline, so the Latin-tuned 1.2 clips them.
   --label-scale a type-scale multiplier for short labels in tight boxes, so
                 long scripts shrink slightly rather than reflow. Always used
                 inside max() so there is a hard legibility floor.
   ============================================================ */
:root {
  --lh-tight: 1.2;
  --lh-snug: 1.3;
  --label-scale: 1;
}

html:not(.script-latin) {
  --lh-tight: 1.35;
  --lh-snug: 1.42;
  --label-scale: 0.94;
}

/* Tamil and Kannada are the longest of the set by a clear margin. */
html.script-tamil,
html.script-kannada { --label-scale: 0.88; }

html:not(.script-latin) h1 { line-height: 1.24; }

/* ---- Overflow guards ------------------------------------------------- *
 * Nothing in any language may force a horizontal scrollbar. Flex and grid
 * children default to min-width:auto, which lets a long unbreakable compound
 * push past its track instead of wrapping inside it — the single most common
 * way a translated layout breaks.
 * -------------------------------------------------------------------- */
body { overflow-wrap: break-word; }

.trust-item,
.trust-item span,
.nav-links a,
.stats article,
.trust-bar .tb-item,
.flow-step,
.category-card,
.lang-picker summary,
label,
select,
input,
textarea { min-width: 0; }

/* A select cannot be wider than its grid track, and its longest <option>
   should not be what decides that track's width. */
select { text-overflow: ellipsis; }

/* Where text does wrap, wrap it evenly instead of leaving one orphan word.
   Unsupported browsers just wrap normally. */
h1, h2,
.category-card strong,
.flow-step strong,
.trust-bar .tb-item strong,
.trust-item span,
.stats span { text-wrap: balance; }

/* Inside the picker every entry is written in its own script. Only the active
   locale's Noto face is loaded, so the other entries fall through to a system
   Indic font — still legible, just not the webfont. Worth it: preloading all
   five faces to style a menu nobody dwells in is not a good trade. */
.lang-option.script-devanagari { font-family: 'Noto Sans Devanagari', 'Inter', sans-serif; }
.lang-option.script-bengali { font-family: 'Noto Sans Bengali', 'Inter', sans-serif; }
.lang-option.script-gujarati { font-family: 'Noto Sans Gujarati', 'Inter', sans-serif; }
.lang-option.script-gurmukhi { font-family: 'Noto Sans Gurmukhi', 'Inter', sans-serif; }
.lang-option.script-tamil { font-family: 'Noto Sans Tamil', 'Inter', sans-serif; }
.lang-option.script-kannada { font-family: 'Noto Sans Kannada', 'Inter', sans-serif; }

/* ============================================================
   LANGUAGE GATE — first visit only
   ============================================================ */
body.gate-open { overflow: hidden; }

.lang-gate {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 20px;
  overflow-y: auto;
  background: rgba(12, 30, 54, 0.55);
  backdrop-filter: blur(6px);
  animation: gate-in 0.25s ease both;
}

@keyframes gate-in { from { opacity: 0; } to { opacity: 1; } }

.lang-gate-card {
  width: min(680px, 100%);
  margin: auto;
  padding: 30px 30px 26px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(9, 24, 44, 0.35);
  text-align: center;
}

.lang-gate-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
}

.lang-gate-brand {
  margin: 0;
  font-family: 'Poppins', 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: -0.2px;
}
.lang-gate-brand span { color: var(--orange); }

.lang-gate-title {
  margin: 0;
  font-size: clamp(21px, 3.4vw, 27px);
  line-height: 1.3;
}

/* The English restatement is deliberately quiet — a fallback for a wrong
   guess, not a second headline competing with the first. */
.lang-gate-title-en {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
}

.lang-gate-sub {
  margin: 10px 0 22px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
}

.lang-gate-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.lang-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 74px;
  padding: 12px 8px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--blue);
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}
.lang-tile:hover {
  border-color: var(--green);
  background: var(--green-tint-2);
  transform: translateY(-2px);
}
.lang-tile:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

.lang-tile-native {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}
.lang-tile-english {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 500;
}

/* The browser already told us its language. Marking that tile turns 12 choices
   into one likely choice plus 11 alternatives. */
.lang-tile.is-suggested {
  border-color: var(--green);
  background: var(--green-tint);
}
.lang-tile-badge {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 8px);
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lang-gate-skip {
  display: inline-block;
  margin-top: 22px;
  padding: 6px 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lang-gate-skip:hover { color: var(--green-dark); }

.lang-tile.script-devanagari { font-family: 'Noto Sans Devanagari', 'Inter', sans-serif; }
.lang-tile.script-bengali { font-family: 'Noto Sans Bengali', 'Inter', sans-serif; }
.lang-tile.script-gujarati { font-family: 'Noto Sans Gujarati', 'Inter', sans-serif; }
.lang-tile.script-gurmukhi { font-family: 'Noto Sans Gurmukhi', 'Inter', sans-serif; }
.lang-tile.script-tamil { font-family: 'Noto Sans Tamil', 'Inter', sans-serif; }
.lang-tile.script-kannada { font-family: 'Noto Sans Kannada', 'Inter', sans-serif; }

@media (max-width: 620px) {
  .lang-gate { padding: 14px; }
  .lang-gate-card { padding: 24px 18px 20px; border-radius: 16px; }
  .lang-gate-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .lang-gate-sub { margin-bottom: 18px; }
}

@media (max-width: 420px) {
  .lang-tile { min-height: 66px; }
  .lang-tile-native { font-size: 15px; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  background: linear-gradient(180deg, #ffffff 0%, var(--bg-3) 100%);
  overflow: hidden;
}

.hero-grid {
  width: var(--wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 52px;
  align-items: center;
  padding: 60px 0 56px;
}

.hero-copy { min-width: 0; padding-top: 18px; }

h1 {
  margin: 0 0 18px;
  font-size: clamp(34px, 3.4vw, 46px);
  line-height: 1.06;
  letter-spacing: -0.5px;
  color: var(--blue);
}
h1 .hl-orange { color: var(--orange); }

.hero-copy > p {
  margin: 0;
  max-width: 440px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
}

.trust-row {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

/* Four across gives each chip roughly 100px. "Verified Suppliers" is one
   16-char word plus a 15-char word in Tamil, which cannot fit that at any
   legible size — it was breaking mid-word and stranding a single character on
   its own line. Two across gives each chip ~210px, enough to wrap between
   words instead of inside them. Fixing the container beats shrinking the type. */
html:not(.script-latin) .trust-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 9px;
}
.trust-item .ti-ic {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  color: var(--green);
  background: var(--green-tint);
  border-radius: 9px;
}
.trust-item .ti-ic svg { width: 18px; height: 18px; }
.trust-item span {
  /* "Verified Suppliers" is 18 chars in Hinglish and 32 in Tamil, in a
     quarter-width hero column. Scale down before wrapping to three lines. */
  font-size: max(11px, calc(12.5px * var(--label-scale)));
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--blue);
}

.hero-actions {
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;
  /* Vertical padding, not just horizontal: a CTA that fits one line in
     Hinglish takes two in Tamil, and with `padding: 0` the second line pressed
     against the button's edge. min-height still governs the single-line case,
     so this changes nothing until the label actually wraps. */
  padding: 11px 22px;
  border: 0;
  border-radius: 11px;
  font-size: max(13px, calc(14.5px * var(--label-scale)));
  font-weight: 700;
  line-height: var(--lh-snug);
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn svg { width: 18px; height: 18px; }

.btn-navy { color: #fff; background: var(--blue); box-shadow: 0 10px 22px rgba(23, 59, 104, 0.2); }
.btn-navy:hover { transform: translateY(-2px); background: #12325a; box-shadow: 0 14px 28px rgba(23, 59, 104, 0.28); }

.btn-orange { color: #fff; background: linear-gradient(135deg, var(--orange), #ff8046); box-shadow: 0 10px 22px rgba(255, 107, 53, 0.28); }
.btn-orange:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(255, 107, 53, 0.38); }

.btn-green { color: #fff; background: linear-gradient(135deg, var(--green), var(--green-2)); box-shadow: 0 10px 22px rgba(11, 159, 85, 0.26); }
.btn-green:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(11, 159, 85, 0.36); }

.btn-video {
  color: var(--blue);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.btn-video:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-video .play {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--orange-tint);
  color: var(--orange);
}
.btn-video .play svg { width: 13px; height: 13px; fill: currentColor; stroke: none; }

/* --- India network map strip (below the hero) --- */
.map-band {
  background:
    radial-gradient(circle at 20% 30%, rgba(11, 159, 85, 0.06), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(255, 107, 53, 0.06), transparent 45%),
    var(--bg-3);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 44px 0;
}
.map-band-inner {
  width: var(--wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.8fr 1fr;
  gap: 44px;
  align-items: center;
}
.map-band-visual {
  display: flex;
  justify-content: center;
  position: relative;
}
.map-band-visual::before {
  content: "";
  position: absolute;
  inset: 6% 10% 10%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(11, 159, 85, 0.12), rgba(11, 159, 85, 0) 72%);
  filter: blur(6px);
}
.map-band-visual .india-map-img {
  position: relative;
  z-index: 1;
  width: auto;
  max-width: 100%;
  max-height: 400px;
  height: auto;
  display: block;
}
.map-band-copy h2 { margin: 0 0 14px; font-size: clamp(23px, 2.6vw, 31px); line-height: 1.14; }
.map-band-copy > p { margin: 0; max-width: 480px; color: var(--muted); font-size: 15.5px; line-height: 1.65; }
.map-band-points {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.map-band-points span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--blue);
  font-size: 12.5px;
  font-weight: 600;
}
.map-band-points span::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--green);
}

/* ============================================================
   REQUEST FORM CARD
   ============================================================ */
.request-card {
  position: relative;
  min-width: 0;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

.form-heading { margin-bottom: 16px; }
.form-heading .form-icon { display: none; }
.form-heading h2 { margin: 0; font-size: 19px; color: var(--blue); }
.form-heading p { margin: 5px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.4; }

form { display: grid; gap: 13px; }

/* Hero requirement form — wide two-column layout */
#bulkForm { grid-template-columns: 1fr 1fr; gap: 14px 16px; align-items: start; }
#bulkForm .fg-full { grid-column: 1 / -1; }

label { display: grid; gap: 6px; }
label span { color: var(--blue); font-size: 12.5px; font-weight: 600; }
label em { color: var(--orange); font-style: normal; }

input, select, textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text);
  min-height: 44px;
  padding: 10px 13px;
  outline: 0;
  transition: border-color 0.18s, box-shadow 0.18s;
}
input::placeholder, textarea::placeholder { color: #9aa8ba; }
textarea { min-height: 70px; resize: vertical; }

input:focus, select:focus, textarea:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 4px rgba(11, 159, 85, 0.12);
}

.field-error input, .field-error select, .field-error textarea {
  border-color: #e0483c;
  background: #fff8f7;
}

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.privacy-note {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--green-dark);
  background: var(--green-tint);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  font-size: 12px;
  line-height: 1.4;
}
.privacy-note svg { flex: 0 0 auto; width: 22px; height: 22px; color: var(--green); }

.submit-btn {
  border: 0;
  border-radius: 11px;
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #fff;
  background: linear-gradient(135deg, var(--green), var(--green-2));
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 10px 22px rgba(11, 159, 85, 0.26);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.submit-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(11, 159, 85, 0.36); }
.submit-btn svg { width: 17px; height: 17px; }

/* ---- Submit loading state (spinner wheel) ---- */
.submit-btn__spinner {
  display: none;
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: bb-spin 0.65s linear infinite;
}

.submit-btn.is-loading {
  cursor: progress;
  opacity: 0.85;
}
.submit-btn.is-loading:hover {
  transform: none;
  box-shadow: 0 10px 22px rgba(11, 159, 85, 0.26);
}
.submit-btn.is-loading .submit-btn__arrow { display: none; }
.submit-btn.is-loading .submit-btn__spinner { display: block; }

.submit-btn:disabled { cursor: not-allowed; }

@keyframes bb-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .submit-btn__spinner { animation-duration: 1.6s; }
}

.form-safe {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11.5px;
}
.form-safe svg { width: 14px; height: 14px; color: var(--green); }

/* ============================================================
   SECTION HEADINGS
   ============================================================ */
.section {
  width: var(--wrap);
  margin: 0 auto;
}

.section-heading { text-align: center; margin-bottom: 34px; }
.section-heading h2 {
  margin: 0;
  font-size: clamp(24px, 3vw, 33px);
  line-height: 1.12;
  color: var(--blue);
  position: relative;
  display: inline-block;
}
.section-heading h2::after {
  content: "";
  display: block;
  width: 54px;
  height: 3px;
  margin: 12px auto 0;
  background: var(--orange);
  border-radius: 3px;
}
.section-heading p {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 14.5px;
  font-weight: 500;
}

/* ============================================================
   SHOWCASE BANNER
   ============================================================ */
.showcase {
  width: var(--wrap);
  margin: 60px auto 0;
}
.showcase-frame {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  background: #fff;
  line-height: 0;
}
.showcase-frame img {
  display: block;
  width: 100%;
  height: auto;
}

/* ============================================================
   HOW IT WORKS — 6 step flow
   ============================================================ */
.how { padding: 66px 0 26px; }

/* Six steps read as a journey, not six boxes. The nodes sit on a single rail
   that runs green -> orange, so the eye is carried left to right and the step
   number no longer has to compete with a card border for attention. */
.flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  align-items: start;
}

.flow::before {
  content: "";
  position: absolute;
  top: 33px;                 /* centre of a 66px node */
  /* exact centre of the outer columns: (track width)/2, where a track is
     (100% - 5 gaps)/6 — so the rail terminates under the node, not beside it */
  left: calc((100% - 50px) / 12);
  right: calc((100% - 50px) / 12);
  height: 2px;
  background: linear-gradient(90deg, var(--green) 0%, #9ec9a8 45%, #ffc4a8 62%, var(--orange) 100%);
  opacity: 0.5;
  border-radius: 2px;
}

.flow-step {
  position: relative;
  padding: 0 8px;
  text-align: center;
  background: none;
  border: 0;
  box-shadow: none;
}

.step-node {
  position: relative;
  display: block;
  width: 66px;
  height: 66px;
  margin: 0 auto 16px;
}

.flow-step .step-ic {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border-radius: 999px;
  color: var(--green);
  background: #fff;          /* opaque, so it breaks the rail cleanly */
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}
.flow-step .step-ic svg { width: 26px; height: 26px; transition: transform 0.22s ease; }

.flow-step .step-index {
  position: absolute;
  top: -2px;
  right: -2px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  border: 2px solid #fff;
}

.flow-step:hover .step-ic {
  transform: translateY(-3px);
  background: var(--green-tint);
  border-color: rgba(11, 159, 85, 0.45);
  box-shadow: 0 10px 22px rgba(11, 159, 85, 0.18);
}
.flow-step:hover .step-ic svg { transform: scale(1.08); }

.flow-step strong {
  display: block;
  color: var(--blue);
  font-size: max(12px, calc(14px * var(--label-scale)));
  line-height: var(--lh-snug);
  /* Room for two lines, so the one title that wraps does not shunt its own
     description below the other five. Expressed in em and derived from the
     live line-height, so it still reserves exactly two lines once the Indic
     line-height and label scale kick in. */
  min-height: calc(2em * var(--lh-snug));
}
.flow-step small {
  display: block;
  max-width: 168px;
  margin: 7px auto 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

/* ============================================================
   CATEGORIES
   ============================================================ */
.categories { padding: 66px 0 20px; }

.category-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
}

.category-card {
  /* `isolation` keeps the z-index:-1 spotlight below from escaping behind the
     card and landing on the page background instead. */
  position: relative;
  isolation: isolate;
  /* Column flex so the title can absorb slack and keep the descriptions
     bottom-aligned across a row whatever the language does to line counts. */
  display: flex;
  flex-direction: column;
  padding: 12px 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  text-align: left;
  box-shadow: var(--shadow-sm);
  transition:
    transform 0.4s cubic-bezier(0.22, 0.7, 0.2, 1),
    box-shadow 0.4s cubic-bezier(0.22, 0.7, 0.2, 1),
    border-color 0.3s ease;
}
/* Baseline hover, and the fallback everywhere the gradient ring below cannot
   be drawn: a plain green border. */
.category-card:hover,
.category-card:focus-visible {
  transform: translateY(-6px);
  border-color: rgba(11, 159, 85, 0.42);
  box-shadow: var(--shadow-lg);
}
/* Tactile press: undo most of the lift so the card feels pushed back down. */
.category-card:active {
  transform: translateY(-2px) scale(0.988);
  transition-duration: 0.09s;
}

/* ---- Gradient ring -------------------------------------------------- *
 * A 1px brand-gradient border, drawn as the difference between a border-box
 * and a content-box mask — the only way to get a gradient on a rounded border
 * without nesting an extra element.
 *
 * The @supports gate is load-bearing, not decorative. Without mask support
 * this pseudo-element is a plain gradient at inset:0 and z-index:3, i.e. an
 * opaque rectangle covering the entire card on hover. So the ring and the
 * `border-color: transparent` that makes room for it are BOTH declared only
 * where the mask actually composites. Elsewhere the green border above stands.
 * -------------------------------------------------------------------- */
@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .category-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(140deg, var(--green) 0%, #5AC98F 42%, var(--orange) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
  }
  .category-card:hover,
  .category-card:focus-visible { border-color: transparent; }
  .category-card:hover::before,
  .category-card:focus-visible::before { opacity: 1; }
}

/* ---- Cursor spotlight ------------------------------------------------ *
 * --mx/--my are written by script.js on pointermove. z-index:-1 paints this
 * above the card's own white background but below the photo and the text, so
 * it warms the card without muddying the image.
 * -------------------------------------------------------------------- */
.category-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(
    240px circle at var(--mx, 50%) var(--my, 0%),
    rgba(11, 159, 85, 0.13),
    rgba(11, 159, 85, 0) 62%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.category-card:hover::after { opacity: 1; }

.category-photo, .category-icon {
  display: block;
  position: relative;
  /* Ratio-driven rather than a fixed 96px: the grid goes 6-up → 3-up → 2-up,
     so a fixed height made the box squat and letterboxed on the wider
     breakpoints. max-height keeps the 3-up row from becoming a tall slab. */
  aspect-ratio: 16 / 11;
  max-height: 190px;
  flex: 0 0 auto; /* the title absorbs slack, never the photo */
  border-radius: 10px;
  margin-bottom: 12px;
  overflow: hidden;
  background: var(--bg-3); /* holds the box while a lazy image decodes */
}
.category-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition:
    transform 0.7s cubic-bezier(0.22, 0.7, 0.2, 1),
    filter 0.45s ease;
}
/* a barely-there scrim keeps every photo reading at the same weight, whatever
   the source exposure happens to be */
.category-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(23, 59, 104, 0) 45%, rgba(23, 59, 104, 0.16) 100%);
  transition: opacity 0.3s ease;
}
.category-card:hover .category-photo img,
.category-card:focus-visible .category-photo img {
  transform: scale(1.1);
  filter: saturate(1.08) contrast(1.03);
}
.category-card:hover .category-photo::after { opacity: 0.55; }

/* ---- "Go" chip ------------------------------------------------------ *
 * These cards are <button>s that prefill the form, but nothing in the design
 * said so. The chip is the affordance. Built as a pseudo-element with an
 * inlined arrow so it costs no markup and no extra request.
 * -------------------------------------------------------------------- */
.category-photo::before,
.category-icon::before {
  content: "";
  position: absolute;
  right: 9px;
  bottom: 9px;
  z-index: 2;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: var(--green)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13m-6-6 6 6-6 6'/%3E%3C/svg%3E")
    center / 13px no-repeat;
  box-shadow: 0 4px 12px rgba(10, 143, 77, 0.4);
  opacity: 0;
  transform: translateY(7px) scale(0.8);
  transition:
    opacity 0.3s ease,
    transform 0.42s cubic-bezier(0.34, 1.4, 0.5, 1);
  pointer-events: none;
}
.category-card:hover .category-photo::before,
.category-card:focus-visible .category-photo::before,
.category-card:hover .category-icon::before,
.category-card:focus-visible .category-icon::before {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.category-icon {
  display: grid;
  place-items: center;
  color: var(--green);
  /* a soft tint wash rather than a flat block, so the one photo-less card
     still reads as part of the set */
  background:
    radial-gradient(120% 90% at 50% 0%, #fff 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(160deg, var(--green-tint) 0%, var(--green-tint-2) 100%);
}
.category-icon svg {
  width: 40px;
  height: 40px;
  transition: transform 0.45s cubic-bezier(0.22, 0.7, 0.2, 1);
}
.category-card:hover .category-icon svg,
.category-card:focus-visible .category-icon svg { transform: scale(1.1) rotate(-4deg); }

.category-card strong {
  display: block;
  /* Absorbs the card's spare vertical space so `small` sits on the card's
     bottom edge. Titles run 12 chars in Hinglish and 41 in Tamil, so they
     occupy a different number of lines per language; without this the
     descriptions in a row start at six different heights. */
  flex: 1 1 auto;
  color: var(--blue);
  font-size: max(12px, calc(14px * var(--label-scale)));
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: var(--lh-snug);
  transition: color 0.25s ease;
}
.category-card:hover strong,
.category-card:focus-visible strong { color: var(--green-dark); }

.category-card small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
  margin-top: 5px;
}

/* ============================================================
   TRUST BAR
   ============================================================ */
.trust-bar-wrap {
  margin-top: 66px;
  background: var(--green-tint-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 40px 0;
}
.trust-bar {
  width: var(--wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px 34px;
}
.trust-bar .tb-item { display: flex; align-items: flex-start; gap: 13px; }
.trust-bar .tb-ic {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  color: var(--green);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 11px;
}
.trust-bar .tb-ic svg { width: 22px; height: 22px; }
.trust-bar strong { display: block; color: var(--blue); font-size: 14.5px; }
.trust-bar span { display: block; margin-top: 4px; color: var(--muted); font-size: 12.5px; line-height: 1.45; }

/* ============================================================
   STATS
   ============================================================ */
.stats {
  width: var(--wrap);
  margin: 66px auto 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.stats article {
  min-height: 108px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 22px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.stats strong {
  color: var(--green);
  font-family: 'Poppins', sans-serif;
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  /* These count up from 0 on scroll. In proportional figures every digit is a
     different width, so the number visibly jitters and nudges the tile's
     centring for the whole 850ms. Tabular figures are fixed-width. */
  font-variant-numeric: tabular-nums;
}
.stats strong::after { content: "+"; }
.stats article:nth-child(2) strong::after { content: "%"; }
.stats span {
  margin-top: 8px;
  color: var(--muted);
  /* stats.states runs 14 -> 25 chars in Marathi, stats.suppliers 18 -> 32 in
     Tamil, inside a quarter-width tile. */
  font-size: max(11px, calc(12.5px * var(--label-scale)));
  font-weight: 600;
  line-height: var(--lh-tight);
}

/* ============================================================
   CTA SECTION
   ============================================================ */
.cta-section {
  width: var(--wrap);
  margin: 66px auto 70px;
  padding: 52px 40px;
  background:
    radial-gradient(circle at 12% 20%, rgba(11, 159, 85, 0.08), transparent 42%),
    radial-gradient(circle at 88% 90%, rgba(255, 107, 53, 0.08), transparent 42%),
    var(--green-tint-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
}
.cta-section h2 { margin: 0; font-size: clamp(24px, 3vw, 34px); line-height: 1.15; color: var(--blue); }
.cta-section p { margin: 14px auto 0; max-width: 500px; color: var(--muted); font-size: 16px; line-height: 1.6; }

.cta-phones { display: flex; justify-content: center; gap: 22px; margin-top: 22px; flex-wrap: wrap; }
.cta-phones span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--blue);
  font-size: 15px;
  font-weight: 600;
}
.cta-phones span::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--green);
}
.cta-buttons { display: flex; justify-content: center; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
.cta-buttons .primary-btn { min-height: 52px; padding: 0 28px; font-size: 15px; }

.primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 11px;
  min-height: 46px;
  padding: 0 22px;
  color: #fff;
  background: linear-gradient(135deg, var(--orange), #ff8046);
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 10px 22px rgba(255, 107, 53, 0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.primary-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(255, 107, 53, 0.38); }

/* ============================================================
   DIALOG / RESULT
   ============================================================ */
dialog { border: 0; padding: 0; border-radius: var(--radius); box-shadow: 0 30px 90px rgba(2, 8, 23, 0.3); }
dialog::backdrop { background: rgba(23, 59, 104, 0.5); backdrop-filter: blur(5px); }
.result-dialog { width: min(620px, calc(100% - 24px)); background: #fff; }

.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 24px;
  border-bottom: 1px solid var(--line);
}
.dialog-header p { margin: 0 0 4px; color: var(--green); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.dialog-header h2 { margin: 0; color: var(--blue); font-size: 22px; }

.icon-btn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--blue);
}

.match-summary {
  margin: 20px 24px 0;
  padding: 15px;
  border-radius: 10px;
  background: var(--green-tint);
  color: var(--green-dark);
  font-size: 13px;
  line-height: 1.5;
}
.supplier-list { display: grid; gap: 12px; padding: 18px 24px 4px; }
.supplier-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
}
.supplier-card strong { display: block; color: var(--blue); font-size: 14px; }
.supplier-card span { display: block; color: var(--muted); font-size: 12px; line-height: 1.45; margin-top: 3px; }
.supplier-score { min-width: 75px; color: var(--green); text-align: right; font-size: 20px; font-weight: 800; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 12px; padding: 20px 24px 24px; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 60;
  transform: translate(-50%, 120px);
  min-width: min(440px, calc(100% - 24px));
  padding: 13px 16px;
  border-radius: 10px;
  color: #fff;
  background: var(--blue);
  box-shadow: var(--shadow-lg);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  opacity: 0;
  transition: transform 0.24s, opacity 0.24s;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }

/* ============================================================
   FLOATING WHATSAPP
   ============================================================ */
.floating-whatsapp {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #25D366;
  color: #fff;
  padding: 12px 20px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.4);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 50;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.floating-whatsapp:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(37, 211, 102, 0.55); color: #fff; }
.floating-whatsapp svg { width: 20px; height: 20px; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: #fff;
  color: var(--text);
  padding: 56px 0 24px;
  border-top: 1px solid var(--line);
  margin-top: 0;
}
.footer-grid {
  width: var(--wrap);
  margin: 0 auto 36px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 40px;
}
.footer-brand .brand { margin-bottom: 14px; }
.footer-brand p { color: var(--muted); font-size: 13.5px; line-height: 1.65; margin: 0; max-width: 320px; }
.footer-links strong, .footer-contact strong {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  margin-bottom: 16px;
  color: var(--blue);
}
.footer-links a { display: block; color: var(--muted); margin-bottom: 11px; font-size: 13.5px; transition: color 0.18s; }
.footer-links a:hover { color: var(--orange); }
.footer-contact p { color: var(--muted); font-size: 13.5px; margin: 0 0 11px; }
.footer-contact a { color: var(--green); font-weight: 600; }
.footer-bottom {
  width: var(--wrap);
  margin: 0 auto;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  text-align: center;
  color: var(--muted);
  font-size: 12.5px;
}

/* ============================================================
   SELECT2 (location dropdown) — align to design
   ============================================================ */
.select2-container--default .select2-selection--single {
  height: 44px !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
  display: flex;
  align-items: center;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 44px !important;
  color: var(--text) !important;
  padding-left: 13px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px !important; }
.select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--green) !important;
  box-shadow: 0 0 0 4px rgba(11, 159, 85, 0.12);
}
.select2-dropdown { border-color: var(--line) !important; border-radius: var(--radius-sm) !important; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--green) !important; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1180px) {
  /* Translated nav labels run longer than the English ones, and the language
     picker is a new item competing for the same row. Tighten before it wraps. */
  .nav-shell { gap: 16px; }
  .nav-links { gap: 16px; font-size: 13.5px; }
  .lang-picker > summary { padding: 0 10px; }
  .lang-current { max-width: 88px; overflow: hidden; text-overflow: ellipsis; }
}

@media (max-width: 1120px) {
  .hero-grid { gap: 36px; }
  .map-band-inner { grid-template-columns: 1fr; gap: 26px; text-align: center; justify-items: center; }
  .map-band-copy > p { margin-inline: auto; }
  .map-band-points { justify-content: center; }
  .trust-bar { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 980px) {
  .flow { grid-template-columns: repeat(3, 1fr); gap: 34px 12px; }
  .flow::before { display: none; }
  .category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
}

/* ---- Nav drawer ------------------------------------------------------ *
 * Driven by `body.nav-drawer`, which script.js adds whenever the inline nav
 * row does not actually fit — a narrow viewport, or a language whose labels
 * are too long for the row at any width.
 *
 * This used to be a `@media (max-width: 820px)` block, and a breakpoint
 * cannot express the real condition: --wrap caps at 1200px, while the Tamil
 * nav needs roughly 1345px for its five links alone. That row therefore
 * overflows on a 2560px monitor exactly as it does on a 1440px one — the
 * orange CTA was being sliced off the right edge. Measuring beats guessing,
 * and it also covers whatever language gets added next.
 *
 * Class-driven rather than media-driven costs no no-JS behaviour: opening the
 * drawer always required JS (the toggle sets body.nav-open).
 * ------------------------------------------------------------------- */
body.nav-drawer .nav-shell { height: auto; min-height: 66px; flex-wrap: wrap; padding: 10px 0; gap: 14px; }
body.nav-drawer .nav-links {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 14px 20px;
  margin: 0;
  gap: 6px;
  transform: translateY(-10px);
  opacity: 0;
  visibility: hidden;
  transition: all 0.28s ease;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 20px 40px rgba(23, 59, 104, 0.12);
}
body.nav-drawer.nav-open .nav-links { transform: translateY(0); opacity: 1; visibility: visible; }
body.nav-drawer .nav-links a {
  min-height: 46px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-size: 15px;
  border-radius: 8px;
  /* The row version is nowrap to stop mid-label breaks; in the drawer there is
     a full width to work with, so long labels should wrap normally. */
  white-space: normal;
}
body.nav-drawer .nav-links a:hover { background: var(--bg-3); }
body.nav-drawer .nav-cta { margin-left: auto; }
body.nav-drawer .menu-toggle { display: grid; }

@media (max-width: 820px) {
  /* Safety for the moment before script.js runs, and for the rare no-JS
     visitor: hide the inline row rather than let it overflow a phone. The
     toggle needs JS to open regardless, so this only has to prevent the
     overflow, not provide a working menu. */
  body:not(.nav-drawer) .nav-links { display: none; }
  body:not(.nav-drawer) .menu-toggle { display: grid; }

  .hero-grid { grid-template-columns: 1fr; gap: 26px; padding: 32px 0 26px; }
  .request-card { max-width: 620px; width: 100%; }
  .trust-row { max-width: 460px; }
}

@media (max-width: 620px) {
  :root { --wrap: min(1200px, calc(100% - 28px)); }
  .trust-row { grid-template-columns: 1fr 1fr; gap: 16px; }
  .flow { grid-template-columns: 1fr; gap: 0; }
  .flow::before {
    display: block;
    top: 34px;
    bottom: 34px;
    left: 33px;
    right: auto;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, var(--green) 0%, #9ec9a8 45%, #ffc4a8 62%, var(--orange) 100%);
  }
  .flow-step {
    display: grid;
    grid-template-columns: 66px 1fr;
    column-gap: 16px;
    align-items: start;
    text-align: left;
    padding: 0 0 26px;
  }
  .flow-step .step-node { margin: 0; grid-row: span 2; }
  /* stacked, every title fits one line — the two-line reserve is only needed
     when six titles have to share a baseline */
  .flow-step strong { align-self: center; padding-top: 14px; min-height: 0; }
  .flow-step small { max-width: none; margin-left: 0; }
  .flow-step:last-child { padding-bottom: 0; }
  .category-grid { grid-template-columns: 1fr 1fr; }
  .trust-bar { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; }
  #bulkForm { grid-template-columns: 1fr; }
  .cta-section { padding: 36px 20px; }
  .cta-phones { flex-direction: column; align-items: center; gap: 12px; }
  .nav-cta span { display: inline; }
  h1 { font-size: clamp(30px, 8vw, 40px); }
  .hero-actions .btn { flex: 1 1 100%; }

  /* The nav row wraps here, so the picker no longer sits at the right edge.
     Anchoring the menu left keeps it on screen — body has overflow-x: hidden,
     so a menu overflowing rightwards would be clipped, not scrollable. */
  .lang-menu { left: 0; right: auto; width: min(264px, calc(100vw - 36px)); }
  .lang-current { max-width: 74px; }
}

/* ============================================================
   MOTION & FOCUS
   ============================================================ */

/* Applied by script.js only — markup ships visible, so a blocked or failed
   script can never leave a section blank. */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.7, 0.2, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* One consistent keyboard ring across links, buttons and cards. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.category-card:focus-visible {
  /* no border-radius here — outline already follows each element's own corners,
     and setting it would reshape inputs the moment they take focus */
  outline: 2px solid var(--green);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .category-photo img,
  .category-card,
  .category-card::before,
  .category-card::after,
  .category-card strong,
  .category-photo::before,
  .category-photo::after,
  .category-icon::before,
  .category-icon svg,
  .btn,
  .nav-cta {
    transition: none !important;
  }

  /* Colour and shadow still respond to hover — those are not motion. What goes
     away is anything that moves: the card lift, the photo zoom, the icon tilt.
     The "go" chip stays permanently visible instead of springing in, so the
     cards keep their clickable affordance without animating to get it. */
  .category-card:hover,
  .category-card:focus-visible,
  .category-card:active {
    transform: none;
  }
  .category-card:hover .category-photo img,
  .category-card:focus-visible .category-photo img {
    transform: none;
    filter: none;
  }
  .category-card:hover .category-icon svg,
  .category-card:focus-visible .category-icon svg {
    transform: none;
  }
  .category-photo::before,
  .category-icon::before {
    opacity: 1;
    transform: none;
  }
}