/* ============================================================
   Rongsheng Mobile India Private Limited
   Corporate-industrial system, referencing nirmal.co.in:
   1200px container · 80px section rhythm · 8/12px radii ·
   subtle shadows · brand-blue headings · alternating
   white / solid-blue bands. No glass, gradients or blobs.
   ============================================================ */

:root {
  /* one structural blue + the vivo accent */
  --brand: #232a6b;          /* headings, solid bands (from the logo wordmark) */
  --accent: #415fff;         /* vivo blue — CTAs, eyebrows, numbers, links */
  --accent-d: #2c46e0;

  --ink: #14172b;
  --body: #4d5468;
  --muted: #666d80;          /* 5.17:1 on white; #838a9e was 3.45, under AA */
  --white: #ffffff;
  --tint: #f5f8ff;
  --line: #e3e7f2;
  --line-d: rgba(255,255,255,.18);

  /* measured height of the sticky bar, kept as a variable because the mobile
     drawer sizes itself against it (see the responsive block) */
  --hdr-h: 73px;

  --container: 1200px;
  --pad: 80px;               /* section rhythm */
  --gut: 24px;

  --r: 8px;
  --r-lg: 12px;
  --sh-sm: 0 2px 8px rgba(20,23,43,.08);
  --sh-md: 0 8px 20px rgba(20,23,43,.10);

  --display: 'Poppins', 'Inter', sans-serif;
  /* the company name is set in Montserrat; everything else stays Poppins */
  --wordmark: 'Montserrat', 'Poppins', 'Inter', sans-serif;
  --ease: cubic-bezier(.4, 0, .2, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gut); }

/* The header is sticky, so an anchor jump would otherwise land the section
   title underneath it. 84px clears the 73px desktop bar and the slimmer
   mobile one alike. */
section[id] { scroll-margin-top: 84px; }

/* Default blue-grey flash on tap reads as a bug on a blue site */
a, button { -webkit-tap-highlight-color: rgba(65, 95, 255, .14); }

/* ── type ───────────────────────────────────────────────── */
h1, h2, h3 {
  font-family: var(--display);
  color: var(--brand);
  letter-spacing: -.025em;
  line-height: 1.25;
}
h1 { font-size: clamp(2rem, 1.25rem + 2.9vw, 3.05rem); font-weight: 800; line-height: 1.18; }
h2 { font-size: clamp(1.6rem, 1.15rem + 1.6vw, 2.1rem); font-weight: 800; }
h3 { font-size: 1.125rem; font-weight: 700; }

.eyebrow {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.eyebrow-on-dark { color: #a8b6ff; }
.on-dark { color: var(--white); }
.on-dark-2 { color: rgba(255,255,255,.82); }

.lead { font-size: 1.0625rem; max-width: 54ch; }
p + p { margin-top: 14px; }

.micro-note { font-size: .78rem; color: var(--muted); font-style: italic; margin-top: 14px; }

/* ── buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 28px;
  font-family: var(--display);
  font-size: .9rem; font-weight: 600;
  border: 1.5px solid transparent; border-radius: var(--r);
  cursor: pointer; white-space: nowrap;
  transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-d); }
.btn-outline { color: var(--brand); border-color: var(--line); background: #fff; }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }

.arrow-link {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 26px;
  font-family: var(--display); font-size: .82rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
}
.arrow-link span { transition: transform .15s var(--ease); }
.arrow-link:hover span { transform: translateX(4px); }


/* ── header ─────────────────────────────────────────────── */
.hdr {
  position: sticky; top: 0; z-index: 90;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.hdr-in { display: flex; align-items: center; gap: 24px; padding-block: 14px; }
.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; min-width: 0; }
.brand-mark { width: 44px; aspect-ratio: 1; border-radius: 50%; object-fit: contain; flex: none; }
.brand-name {
  font-family: var(--wordmark); font-weight: 700;
  /* ceiling dropped from 1.22rem: the full legal name is 37 characters and
     collided with the nav at the old size */
  font-size: clamp(.86rem, .7rem + .5vw, 1.02rem);
  color: var(--brand); letter-spacing: -.02em; line-height: 1.2;
}

.nav-menu { display: flex; align-items: center; gap: 30px; }
.nav { display: flex; gap: 28px; }
.nav a {
  font-size: .9rem; font-weight: 500; color: var(--body);
  padding-block: 4px;
  border-bottom: 2px solid transparent;
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.nav a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.nav-cta { padding: 10px 22px; font-size: .85rem; }

.burger { display: none; flex-direction: column; gap: 5px; width: 40px; height: 40px;
  background: none; border: none; cursor: pointer; align-items: center; justify-content: center; }
.burger span { width: 21px; height: 2px; background: var(--brand); border-radius: 2px;
  transition: transform .2s var(--ease), opacity .2s var(--ease); }
.hdr.open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hdr.open .burger span:nth-child(2) { opacity: 0; }
.hdr.open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── background texture ─────────────────────────────────────
   Soft radial glows on the sections themselves; the hairline
   grid sits on a pseudo-element so it can be masked separately.

   Drawn flat and edge-to-edge the grid read as graph paper — an
   even mesh of boxes running straight under the headline and
   around the buttons. It is now faded out through the middle of
   each section, so the lines frame the content from the margins
   and the type sits on clean ground. The lattice is a honeycomb
   on an 84 x 48.5 tile; the square mesh it replaced sat at 60px,
   which was dense enough to feel busy on its own.
   ─────────────────────────────────────────────────────────── */
.hero, .sec { position: relative; }
/* keep real content above the texture layer */
.hero > *, .sec > * { position: relative; z-index: 1; }

.hero::before,
.sec:not(#contact)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Honeycomb, not a square mesh — linear-gradients can only make straight
     bands, so the lattice is one tiled SVG. The tile is 84 x 48.5 and holds a
     whole flat-top hexagon (circumradius 28) plus the two half horizontal edges
     that complete its neighbours. The hexagon's TOP edge is deliberately left
     out: the tile above supplies that line as its own bottom edge, and drawing
     both would stack two hairlines and make every other row twice as dark. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='48.5' viewBox='0 0 84 48.5'%3E%3Cg fill='none' stroke='%23232a6b' stroke-opacity='.05' stroke-width='1'%3E%3Cpath d='M56 0 70 24.25 56 48.5 28 48.5 14 24.25 28 0'/%3E%3Cpath d='M0 24.25H14M70 24.25H84'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 84px 48.5px;
  /* transparent in a mask hides: the grid is absent through the
     centre and fades up toward the edges */
  -webkit-mask-image: radial-gradient(78% 62% at 50% 46%, transparent 34%, #000 92%);
          mask-image: radial-gradient(78% 62% at 50% 46%, transparent 34%, #000 92%);
}

.hero {
  background-color: var(--tint);
  background-image:
    radial-gradient(at 28% 45%, rgba(65,95,255,.08) 0%, transparent 58%),
    radial-gradient(at 80% 25%, rgba(65,95,255,.06) 0%, transparent 52%),
    linear-gradient(180deg, #ffffff 0%, var(--tint) 100%);
  padding-block: clamp(48px, 5vw, 84px);
  border-bottom: 1px solid var(--line);
}
.hero { position: relative; overflow: hidden; }
/* large soft accent wash behind the visual, for depth */
.hero-glow {
  position: absolute; top: -18%; right: -8%;
  width: 46vw; max-width: 720px; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(65,95,255,.13) 0%, transparent 68%);
  pointer-events: none;
}
/* Centred hero, no image. The only high-resolution asset was the signage the
   user asked to remove; the remaining photos (~450–500px) would look soft at
   hero scale, so the fold carries type + proof instead of a stretched photo. */
.hero-center { padding-block: clamp(66px, 7vw, 118px); text-align: center; }
.hero-in { position: relative; display: grid; justify-items: center; }
.hero-center .hero-glow {
  top: -34%; right: auto; left: 50%; transform: translateX(-50%);
  width: 76vw; max-width: 900px;
}
.hero h1 {
  font-size: clamp(2rem, 1.15rem + 3.4vw, 3.4rem);
  /* must exceed the longest explicit line ("Distribution, Retail & Service" = 30ch) */
  text-wrap: balance; max-width: 32ch;
}
.hero-center .lead { margin-inline: auto; }
.hero-center .btn-row { justify-content: center; }
.hero-center .trust { justify-content: center; width: 100%; max-width: 760px; }

.hero h1 { margin-bottom: 20px; }
/* brand word gets the accent + a soft underline sweep */
.hl {
  color: var(--accent); position: relative; white-space: nowrap;
}
/* Highlighter bar behind accent words. It has never actually been visible:
   `z-index: -1` with no stacking context between .hl and the root sent it
   behind the section's own background. Putting the grid on a positioned
   pseudo-element created that stacking context, which switched the bar on —
   an unrequested change, so it stays off. Delete `display: none` to enable it. */
.hl::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .06em; height: .18em;
  background: rgba(65,95,255,.16); border-radius: 3px; z-index: -1;
  display: none;
}
.hero .lead { margin-bottom: 30px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* small proof row under the CTAs */
.trust {
  display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 40px);
  margin-top: 38px; padding-top: 26px; border-top: 1px solid var(--line);
}
.trust li { display: flex; flex-direction: column; }
.trust strong {
  font-family: var(--display); font-weight: 800; font-size: 1.35rem;
  color: var(--brand); line-height: 1.1; letter-spacing: -.02em;
}
.trust span { font-size: .8rem; color: var(--muted); margin-top: 2px; }
.trust strong em { font-style: normal; color: var(--accent); }
.trust li { align-items: center; text-align: center; }

/* ── solid band ─────────────────────────────────────────── */
/* No grid on the dark bands — the hairlines read far harsher on deep blue than
   on light surfaces. Just a soft directional glow for depth. */
.band {
  background-color: var(--brand);
  background-image: radial-gradient(at 12% 0%, rgba(255,255,255,.10) 0%, transparent 58%);
  padding-block: var(--pad);
}
.stats { padding-block: clamp(38px, 7vw, 52px); }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.stat { text-align: center; padding-inline: 8px; }
.stat + .stat { border-left: 1px solid var(--line-d); }
.stat-num {
  display: block; font-family: var(--display); font-weight: 800;
  font-size: clamp(1.9rem, 1.3rem + 2vw, 2.7rem); line-height: 1.1;
  color: #fff; font-variant-numeric: tabular-nums;
}
.stat-t {
  display: block; margin-top: 10px; padding-top: 10px;
  font-size: .92rem; font-weight: 600; color: #fff;
  position: relative;
}
.stat-t::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 26px; height: 2px; border-radius: 2px; background: var(--accent);
}
.stat-s { display: block; font-size: .8rem; color: rgba(255,255,255,.7); }

/* ── sections ───────────────────────────────────────────── */
.sec { padding-block: var(--pad); }
.sec.tint {
  background-color: var(--tint);
  background-image: radial-gradient(at 22% 0%, rgba(65,95,255,.07) 0%, transparent 55%);
}
/* Get in Touch: no grid — the form and detail list already carry the structure. */
#contact {
  background-image: radial-gradient(at 20% 0%, rgba(65,95,255,.07) 0%, transparent 55%);
  background-size: auto;
}
.sec-head { max-width: 720px; margin-bottom: clamp(28px, 4vw, 44px); }
.sec-head h2 { margin-bottom: 14px; }
.sec-sub { max-width: 62ch; }

/* about */
.about-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 4vw, 60px); align-items: center; }
.about-grid h2 { margin-bottom: 18px; }
.about-fig { margin: 0; }
.about-fig img {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  box-shadow: var(--sh-md);
}

.spec { margin-top: 26px; border-top: 1px solid var(--line); }
.spec > div { display: grid; grid-template-columns: 150px 1fr; gap: 16px;
  padding-block: 13px; border-bottom: 1px solid var(--line); }
.spec dt { font-size: .78rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.spec dd { font-size: .92rem; color: var(--ink); }

/* numbered cards */
.num-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.num-card {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 30px 26px 32px;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease);
}
/* accent edge that wipes in on hover */
.num-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .18s var(--ease);
}
.num-card:hover { border-color: var(--accent); box-shadow: var(--sh-md); transform: translateY(-3px); }
.num-card:hover::before { transform: scaleX(1); }
.num-card:hover .ic { background: var(--accent); color: #fff; }

.num {
  position: absolute; top: 26px; right: 26px;
  font-family: var(--display); font-size: 2rem; font-weight: 800;
  letter-spacing: -.03em; color: rgba(65,95,255,.16); line-height: 1;
}
/* icon tile — the cards were text-only and read as flat */
.num-card .ic {
  display: grid; place-items: center;
  width: 46px; aspect-ratio: 1; margin-bottom: 18px;
  border-radius: var(--r);
  background: rgba(65,95,255,.10); color: var(--accent);
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.num-card .ic svg { width: 22px; height: 22px; }
.num-card h3 { margin-bottom: 10px; }
.num-card p { font-size: .9rem; }

/* photo grid */
/* 4 columns for 4 photos — a 3-col grid stranded the fourth on its own row.
   Smaller cells also keep these low-res source images below native width. */
.photo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.photo { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm); }
.photo img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.photo figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 16px 12px;
  font-size: .78rem; font-weight: 600; color: #fff;
  background: linear-gradient(to top, rgba(20,23,43,.82), transparent);
}

/* reach */
.reach-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 4vw, 56px); align-items: center; }
.reach-grid h2 { margin-bottom: 16px; }
.state-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.state-list li {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 18px; border: 1px solid var(--line-d); border-radius: var(--r);
  font-size: .92rem; font-weight: 600; color: #fff;
  background: rgba(255,255,255,.05);
  transition: background-color .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease);
}
.state-list li:hover {
  background: rgba(255,255,255,.12); border-color: rgba(168,182,255,.5);
  transform: translateX(3px);
}
.s-dot {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: #a8b6ff; transition: transform .15s var(--ease);
}
.state-list li:hover .s-dot { transform: scale(1.5); }

/* HQ strip under the state grid */
.reach-hq {
  display: flex; align-items: center; gap: 15px;
  margin-top: 18px; padding: 18px 20px;
  border: 1px solid var(--line-d); border-radius: var(--r-lg);
  background: rgba(255,255,255,.05);
}
.hq-badge {
  flex: none; display: grid; place-items: center;
  width: 42px; aspect-ratio: 1; border-radius: 50%;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); color: #fff;
}
.hq-badge svg { width: 19px; height: 19px; }
.reach-hq strong { display: block; color: #fff; font-size: .92rem; font-weight: 600; }
.reach-hq span { font-size: .82rem; color: rgba(255,255,255,.72); }

/* ═══ site-wide craft pass ═══════════════════════════════ */

/* accent highlight on light and dark surfaces */
.hl-light { color: #a8b6ff; }

/* every section eyebrow gets the accent dash marker */
.eyebrow { display: flex; align-items: center; gap: 10px; }
.eyebrow::before {
  content: ""; width: 18px; height: 2px; flex: none;
  background: currentColor; border-radius: 2px; opacity: .9;
}
.sec-head.center .eyebrow, .lede.center .eyebrow { justify-content: center; }

/* reusable layered visual (mirrors the hero) */
.about-visual { position: relative; }
.v-plate {
  position: absolute; inset: auto auto -16px -16px;
  width: 58%; aspect-ratio: 1; z-index: 0;
  border-radius: var(--r-lg);
  background: linear-gradient(320deg, rgba(65,95,255,.14), rgba(65,95,255,0));
  border: 1px solid rgba(65,95,255,.18);
}
.about-fig { position: relative; z-index: 1; }

/* stats band: accent rule already there — add hover lift + tighter rhythm */
.stat { transition: transform .15s var(--ease); }
.stat:hover { transform: translateY(-3px); }

/* photos: subtle zoom on hover, contained by the frame */
.photo { overflow: hidden; }
.photo img { transition: transform .35s var(--ease); }
.photo:hover img { transform: scale(1.04); }

/* ── vision & mission ───────────────────────────────────── */
.sec-head.center { text-align: center; margin-inline: auto; }
.vision {
  max-width: 60ch; margin: 0 auto 48px; text-align: center;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.15rem, .95rem + .8vw, 1.6rem); line-height: 1.5;
  color: #fff; letter-spacing: -.015em;
  padding-top: 24px; border-top: 3px solid var(--accent);
}
.mission-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.mission {
  position: relative; overflow: hidden;
  padding: 26px 22px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line-d); border-radius: var(--r-lg);
  transition: background-color .15s var(--ease), transform .15s var(--ease);
}
.mission::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .18s var(--ease);
}
.mission:hover { background: rgba(255,255,255,.1); transform: translateY(-3px); }
.mission:hover::before { transform: scaleX(1); }
.mission h3 { color: #fff; font-size: 1rem; margin-bottom: 8px; }
.mission p { color: rgba(255,255,255,.8); font-size: .88rem; }

.values { margin-top: 40px; text-align: center; }
.values-label {
  display: block; margin-bottom: 16px;
  font-size: .78rem; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: #a8b6ff;
}
.values ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.values li {
  padding: 10px 22px; border-radius: 999px;
  border: 1px solid var(--line-d); background: rgba(255,255,255,.05);
  font-family: var(--display); font-weight: 600; font-size: .9rem; color: #fff;
}

/* ── journey timeline ───────────────────────────────────── */
/* list-style none: it is an <ol> for semantics, but the step dot is drawn by
   ::after — the browser markers were also rendering, hanging in the gutter */
.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: t; list-style: none; }
.timeline li { position: relative; padding-top: 30px; }
/* the connecting rule */
.timeline li::before {
  content: ""; position: absolute; top: 7px; left: 0; right: -24px; height: 2px;
  background: var(--line);
}
.timeline li:last-child::before { right: 0; }
.timeline li::after {
  content: ""; position: absolute; top: 1px; left: 0;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent); border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--accent);
}
.t-mark {
  display: inline-block; margin-bottom: 10px;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(65,95,255,.10); border: 1px solid rgba(65,95,255,.2);
  font-family: var(--display); font-weight: 700; font-size: .72rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
}
.timeline h3 { margin-bottom: 8px; }
.timeline p { font-size: .9rem; }

/* ── brand recognition ──────────────────────────────────── */
.award-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.award {
  padding: 30px 24px; text-align: center;
  background: var(--tint); border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: background-color .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease);
}
.award:hover { background: #fff; border-color: var(--accent); transform: translateY(-3px); }
.award-fig {
  display: block; margin-bottom: 12px;
  font-family: var(--display); font-weight: 800; font-size: 2.2rem; line-height: 1;
  color: var(--accent); letter-spacing: -.03em;
}
.award p { font-size: .9rem; }
.award cite { display: block; margin-top: 8px; font-size: .76rem; font-style: normal; color: var(--muted); }

/* ── CTA band ───────────────────────────────────────────────
   Full-strength vivo blue. The accent previously appeared only in
   small doses (eyebrows, numbers, buttons), which is what made the
   page read washed-out.
   ─────────────────────────────────────────────────────────── */
/* Photo banner under a heavy brand-tinted overlay, the pattern from the
   combinewill reference. The overlay is deliberately strong (~88%): it carries
   the brand colour AND masks the low resolution of the source photo. */
.cta {
  background-color: var(--accent);
  background-image:
    linear-gradient(rgba(20,25,70,.9) 0%, rgba(45,68,200,.86) 100%),
    url('assets/office-entrance.webp');
  background-size: auto, cover;
  background-position: center, center 42%;
  padding-block: clamp(52px, 9vw, 78px);
  text-align: center;
}
.cta-in { display: grid; justify-items: center; gap: 14px; }
.cta h2 { color: #fff; max-width: 24ch; }
/* Pure white, not .9 alpha: on #415fff that dropped to 4.26:1, under AA. */
.cta p { color: #fff; max-width: 52ch; }

/* contact */


.sec-head.center .sec-sub { margin-inline: auto; }

/* Dark detail panel beside the white form card — the two-tone pairing gives the
   section structure the old flat single-column stack didn't have. */
/* Sized to its contents rather than the full 1152px container. With the email
   gone there are only two short items left, and a full-width band left roughly
   half the card empty. 840px matches the 720px centred section heading above
   it, so the two read as a pair. */
.contact-panel {
  background-color: var(--brand);
  background-image: radial-gradient(at 15% 0%, rgba(255,255,255,.10) 0%, transparent 58%);
  border-radius: var(--r-lg);
  padding: 34px 38px;
  max-width: 840px;
  margin-inline: auto;
}
.contact-panel h3 {
  color: #fff; font-size: 1.05rem; margin-bottom: 24px;
  padding-bottom: 16px; border-bottom: 1px solid var(--line-d);
}
.info-list { display: grid; gap: 22px; }
/* two details since the email came off; a 3-column track left an empty
   third and pushed both items into the left two-thirds of the panel */
.contact-panel .info-list { grid-template-columns: repeat(2, 1fr); gap: 36px; }
.info-list li { display: flex; gap: 16px; align-items: flex-start; }
.badge {
  flex: none; display: grid; place-items: center;
  width: 44px; aspect-ratio: 1; border-radius: 50%;
  background: rgba(255,255,255,.10); color: #fff;
  border: 1px solid rgba(255,255,255,.16);
}
.badge svg { width: 20px; height: 20px; }
.info-list h4 {
  font-family: var(--display); font-size: .8rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: #a8b6ff; margin-bottom: 5px;
}
.info-list p { font-size: .9rem; line-height: 1.65; color: #fff; }
.info-list a { color: #fff; border-bottom: 1px solid rgba(255,255,255,.4); }
.info-list a:hover { border-color: #fff; }


/* ── footer ─────────────────────────────────────────────── */
.ftr {
  position: relative;
  background-color: #0b1024;          /* deeper than the bands, so it reads as the base layer */
  background-image:
    radial-gradient(at 12% 0%, rgba(65,95,255,.20) 0%, transparent 52%),
    radial-gradient(at 88% 100%, rgba(245,166,35,.07) 0%, transparent 50%);
  color: rgba(255,255,255,.62);
  font-size: .875rem;
}
/* thin gradient edge picking up the logo's blue → gold ribbons */
.ftr::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--accent) 0%, #6f86ff 45%, #f5a623 100%);
}
.ftr-top {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1.35fr;
  gap: 44px;
  padding-block: 72px 52px;
}
.ftr-about p { max-width: 40ch; line-height: 1.75; }

/* The full legal name is 37 characters: at 16px it wants 327px, but beside a
   52px mark the column only offers ~279px, so it broke across two lines. The
   lockup now stacks — mark above, name across the whole column — and the clamp
   keeps it on one line down to the tightest four-column case (~276px of column
   at a 1000px viewport, just above where the footer collapses to 3 columns). */
.ftr-brand { margin-bottom: 20px; }
.ftr-mark { width: 52px; aspect-ratio: 1; border-radius: 50%; object-fit: contain; margin-bottom: 14px; }
.ftr-name {
  font-family: var(--wordmark); font-weight: 700;
  font-size: clamp(.8rem, .5rem + .5vw, 1rem);
  color: #fff; line-height: 1.35; letter-spacing: -.015em;
  white-space: nowrap;
}

/* accent dash before each column heading */
.ftr-col h4 {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--display); font-size: .78rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: #fff; margin-bottom: 20px;
}
.ftr-col h4::before {
  content: ""; width: 16px; height: 2px; flex: none;
  background: var(--accent); border-radius: 2px;
}
.ftr-col ul { display: grid; gap: 11px; }
.ftr-col li { display: flex; align-items: center; gap: 10px; }
.ftr-col li::before {
  content: ""; width: 4px; height: 4px; flex: none; border-radius: 50%;
  background: rgba(255,255,255,.3);
  transition: background-color .15s var(--ease), transform .15s var(--ease);
}
.ftr-col li:hover::before { background: var(--accent); transform: scale(1.6); }
.ftr-col a {
  color: rgba(255,255,255,.62);
  transition: color .15s var(--ease), transform .15s var(--ease);
}
.ftr-col li:hover a { color: #fff; transform: translateX(3px); }

.ftr address { font-style: normal; line-height: 1.75; }
.ftr address a {
  display: inline-block; margin-top: 12px; color: #8fa3ff;
  border-bottom: 1px solid rgba(143,163,255,.35);
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.ftr address a:hover { color: #fff; border-color: #fff; }

.ftr-social { display: flex; gap: 10px; margin-top: 26px; }
.ftr-social a {
  display: grid; place-items: center; width: 40px; aspect-ratio: 1;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14); border-radius: var(--r);
  color: rgba(255,255,255,.72);
  transition: background-color .15s var(--ease), border-color .15s var(--ease),
              color .15s var(--ease), transform .15s var(--ease);
}
.ftr-social svg { width: 17px; height: 17px; }
.ftr-social a:hover {
  background: var(--accent); border-color: var(--accent); color: #fff;
  transform: translateY(-2px);
}

.ftr-bottom { border-top: 1px solid rgba(255,255,255,.09); }
.ftr-bottom-in {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px; padding-block: 22px;
  font-size: .8rem; color: rgba(255,255,255,.5);
}
.ftr-cin { letter-spacing: .06em; }

/* ── floating social rail ───────────────────────────────────
   Fixed to the right edge, vertically centred, label sliding out
   on hover. Shown only from 1320px up: the container is 1200px,
   so under that the free margin cannot clear the page content —
   the previous version of this rail used 1120px and overlapped
   by 14px. The footer row covers every smaller screen. */
.social-rail {
  position: fixed;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  z-index: 80;
  display: none;
  flex-direction: column;
  gap: 8px;
}
@media (min-width: 1320px) {
  .social-rail { display: flex; }
}

.social-rail a {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
  box-shadow: var(--sh-sm);
  transition: background .15s var(--ease), color .15s var(--ease),
              border-color .15s var(--ease), transform .15s var(--ease);
}
.social-rail a:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: translateX(-3px);
}
.social-rail svg { width: 16px; height: 16px; }

.social-rail span {
  position: absolute;
  right: calc(100% + 10px);
  padding: 5px 11px;
  border-radius: var(--r);
  background: var(--brand);
  color: #fff;
  font-size: .74rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(6px);
  pointer-events: none;
  transition: opacity .15s var(--ease), transform .15s var(--ease);
}
/* WhatsApp keeps its own brand green on hover. The others all go vivo blue,
   but this one is a "message us now" action rather than a profile link, and
   the green is what makes it read that way at icon size. */
.social-rail a.wa:hover,
.ftr-social a.wa:hover {
  background: #25d366;
  border-color: #25d366;
  color: #fff;
}

.social-rail a:hover span,
.social-rail a:focus-visible span { opacity: 1; transform: none; }

/* ── reveal (JS-gated so a blocked script can't blank the page) ── */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

/* -- responsive ------------------------------------------------------------
   Widest first:
     1199  hero measurement note (see below)
     1000  header collapses to a drawer; the 4-across grids halve
      860  the two-column page splits stack
      600  phone chrome - slimmer bar, paired stats, paired footer columns
      560  card grids drop to a single column
      400  narrow phones - tighter gutter
      339  Fold-class, the only width where the footer name may wrap
   Plus two queries that are about the device rather than the width:
   (hover: none) for touch, and a short-landscape one for a phone held sideways.
   ------------------------------------------------------------------------ */
/* The hero stacks earlier than everything else: below ~1200px the text column
   is too narrow for the display headline and it wraps from 2 lines to 4. */
@media (max-width: 1199px) {
  /* must clear the longest explicit line ("Distribution, Retail & Service" = 30ch) */
}

/* Header drawer. Re-measured after the Leadership link came out of the nav:
   logo 44 + gap 12 + the full legal name on one line 331 (Montserrat is wider
   than Poppins) + gap 24 + nav 494 + container padding 48 = 953px, so the
   inline nav now fits well below the old 1080 threshold. Switching at 1000
   leaves ~47px of headroom. Re-measure here if a nav item is ever added back -
   under the limit, the 37-character name wraps to two lines. */
@media (max-width: 1000px) {
  .nav-menu {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    padding: 8px var(--gut) 18px;
    box-shadow: var(--sh-md);
    display: none;
    /* a phone held sideways has ~360px of height: the drawer has to scroll
       inside itself rather than run off the bottom of the screen. dvh second
       so browsers without it keep the vh value; --hdr-h tracks the bar height,
       which the 600px block shrinks. */
    max-height: calc(100vh - var(--hdr-h));
    max-height: calc(100dvh - var(--hdr-h));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .hdr.open .nav-menu { display: flex; }
  .nav { flex-direction: column; gap: 0; }
  /* block, not inline: an inline <a> ignores vertical padding for hit-testing,
     so the tap target was the 23px text box rather than the 47px row */
  .nav a { display: block; padding-block: 13px; border-bottom: 1px solid var(--line); }
  .nav a:hover { border-bottom-color: var(--line); }
  .nav a:active { color: var(--accent); }
  .nav-cta { margin-top: 14px; padding-block: 13px; }
  .burger { display: flex; }
}

@media (max-width: 1000px) {
  :root { --pad: 60px; }

  .num-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 24px; }
  .stat:nth-child(3) { border-left: none; }
  .photo-grid { grid-template-columns: repeat(2, 1fr); }
  .mission-grid, .award-grid { grid-template-columns: repeat(2, 1fr); }
  /* timeline goes vertical: rule runs down the left instead of across */
  .timeline { grid-template-columns: 1fr; gap: 0; }
  .timeline li { padding: 0 0 28px 32px; }
  .timeline li::before { top: 8px; bottom: -8px; left: 6px; right: auto; width: 2px; height: auto; }
  .timeline li:last-child::before { display: none; }
  .timeline li::after { top: 3px; left: 0; }
  /* footer: brand spans the top, the three link columns sit under it */
  .ftr-top { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .ftr-about { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .about-grid, .reach-grid { grid-template-columns: 1fr; }
  .contact-panel .info-list { grid-template-columns: 1fr; gap: 22px; }
  .about-visual { order: -1; }
  .v-plate { display: none; }
}

/* -- phones -------------------------------------------------------------- */
@media (max-width: 600px) {
  /* Slimmer sticky bar. The 37-character legal name takes two lines at this
     width, which left a 72px header permanently covering 9% of an 812px screen. */
  .hdr-in { padding-block: 10px; gap: 12px; }
  .brand { gap: 10px; }
  .brand-mark { width: 38px; }
  .brand-name { font-size: .82rem; line-height: 1.2; }
  :root { --hdr-h: 61px; }
  section[id] { scroll-margin-top: 68px; }

  .hero-center { padding-block: clamp(44px, 11vw, 66px); }
  /* let the headline wrap naturally instead of honouring the desktop break */
  .hero h1 br { display: none; }
  .hero h1 { max-width: none; }
  .hero .lead { font-size: 1rem; }
  /* Two equal buttons on one row at any phone width. Left to flex-wrap they
     sat side by side above ~340px and stacked below it. */
  .hero .btn-row { width: 100%; gap: 10px; }
  .hero .btn-row .btn { flex: 1 1 0; min-width: 0; padding-inline: 14px; }

  /* Proof row and stats band pair up instead of running down the page: four
     full-width rows made the stats band 542px tall on a 375px screen. */
  .trust { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 14px; margin-top: 30px; padding-top: 22px; }
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 24px 14px; }
  .stat { padding-inline: 2px; }
  .stat + .stat { border-left: none; }
  .stat:nth-child(2n) { border-left: 1px solid var(--line-d); }
  .stat:nth-child(n + 3) { padding-top: 24px; border-top: 1px solid var(--line-d); }
  .stat-s { font-size: .76rem; }

  .vision { margin-bottom: 34px; padding-top: 20px; }
  .values { margin-top: 30px; }
  .num-card { padding: 26px 22px 28px; }
  .num { top: 22px; right: 22px; font-size: 1.75rem; }
  .reach-hq { margin-top: 16px; }

  /* footer: the two link navs sit side by side, brand and address span */
  .ftr-top { grid-template-columns: 1fr 1fr; gap: 30px 20px; padding-block: 44px 34px; }
  .ftr-about,
  .ftr-top > .ftr-col:last-child { grid-column: 1 / -1; }
  .ftr-bottom-in { justify-content: flex-start; }
  /* full-width column: the email would otherwise flow onto the last line of
     the address and run to the container edge */
  .ftr address a { display: block; }
}

@media (max-width: 560px) {
  :root { --pad: 48px; }
  /* .stat-grid deliberately stays 2 x 2 - see the 600px block above */
  .num-grid, .photo-grid, .mission-grid, .award-grid { grid-template-columns: 1fr; }
  .state-list { grid-template-columns: 1fr; }
  .spec > div { grid-template-columns: 1fr; gap: 2px; }
  .contact-panel { padding: 26px 22px; }
  .contact-panel h3 { margin-bottom: 20px; padding-bottom: 14px; }
}

/* Narrow phones. The gutter comes in so the 37-character footer name still
   fits on the one line it was asked to stay on. */
@media (max-width: 400px) {
  :root { --gut: 18px; }
  .trust strong { font-size: 1.2rem; }
  .trust span { font-size: .76rem; }
  .values li { padding: 9px 16px; font-size: .85rem; }
  .reach-hq { padding: 15px 16px; gap: 12px; }
  .info-list li { gap: 13px; }
  .badge { width: 40px; }
}

/* Fold-class handsets. Below this the name cannot hold one line at a legible
   size, so it is allowed to break rather than shrink into illegibility. */
@media (max-width: 339px) {
  .ftr-name { white-space: normal; }
}

/* A phone held sideways: ~360px of height, most of it wanted by the content. */
@media (max-height: 480px) and (orientation: landscape) {
  .hero-center { padding-block: 38px; }
  .trust { margin-top: 26px; padding-top: 18px; }
}

/* -- touch devices --------------------------------------------------------
   There is no pointer to leave, so :hover latches after a tap and the card
   stays lifted until something else is tapped. Everything that moves or
   recolours on hover is neutralised; the pointer-driven grid spotlight is
   already gated in app.js by (hover: hover) and (pointer: fine). */
@media (hover: none) {
  .num-card:hover,
  .mission:hover,
  .award:hover,
  .stat:hover,
  .state-list li:hover,
  .ftr-social a:hover,
  .social-rail a:hover,
  .photo:hover img,
  .ftr-col li:hover a { transform: none; }

  .num-card:hover::before,
  .mission:hover::before { transform: scaleX(0); }
  .num-card:hover .ic { background: rgba(65, 95, 255, .10); color: var(--accent); }
  .state-list li:hover .s-dot { transform: none; }
  .ftr-col li:hover::before { transform: none; }
  .arrow-link:hover span { transform: none; }
}

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

/* ── cursor spotlight on the grid ────────────────────────────
   A soft follower that lights the hairline grid under the
   pointer. app.js injects one per grid-bearing section, so the
   follower's grid can be kept in register with that section's
   own (background-position cancels out the element's offset).
   Movement is a transform; only the hovered section's element
   is ever touched. Coarse pointers and reduced-motion users
   never get one — app.js bails before creating any.
   ─────────────────────────────────────────────────────────── */
.has-spot { position: relative; overflow: hidden; }
/* the follower is a positioned sibling, so content needs to be
   lifted above it or the lines would draw over the copy */
.has-spot > .wrap { position: relative; z-index: 1; }

.grid-spot {
  position: absolute; top: 0; left: 0;
  width: 560px; height: 560px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .45s var(--ease);
  will-change: transform;
  /* same 84 x 48.5 honeycomb tile as the sections, in accent blue, so the
     follower lands exactly on their lines */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='48.5' viewBox='0 0 84 48.5'%3E%3Cg fill='none' stroke='%23415fff' stroke-opacity='.26' stroke-width='1'%3E%3Cpath d='M56 0 70 24.25 56 48.5 28 48.5 14 24.25 28 0'/%3E%3Cpath d='M0 24.25H14M70 24.25H84'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(circle at center, rgba(65,95,255,.10) 0%, transparent 60%);
  background-size: 84px 48.5px, 100% 100%;
  /* feathered edge, so the lit patch has no visible boundary */
  -webkit-mask-image: radial-gradient(circle at center, #000 0%, rgba(0,0,0,.72) 34%, rgba(0,0,0,.24) 56%, transparent 72%);
          mask-image: radial-gradient(circle at center, #000 0%, rgba(0,0,0,.72) 34%, rgba(0,0,0,.24) 56%, transparent 72%);
}
.grid-spot.on { opacity: 1; }