/* ============================================================
   ABBARES PHARMA — Home
   ============================================================ */
/* Self-hosted Fraunces (variable) — WOFF2 first (~45% smaller), TTF fallback */
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/Fraunces-Variable.woff2') format('woff2'),
       url('../fraunces-font-family/Fraunces-VariableFont_SOFTWONKopszwght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/Fraunces-Italic-Variable.woff2') format('woff2'),
       url('../fraunces-font-family/Fraunces-Italic-VariableFont_SOFTWONKopszwght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
/* Self-hosted Geist — static weights, WOFF2 first with OTF fallback */
@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-Light.woff2') format('woff2'),
       url('../Geist-Font/Geist-Light-BF6569491dc9c01.otf') format('opentype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-Regular.woff2') format('woff2'),
       url('../Geist-Font/Geist-Regular-BF6569491e3eff1.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-Medium.woff2') format('woff2'),
       url('../Geist-Font/Geist-Medium-BF6569491e1c281.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-SemiBold.woff2') format('woff2'),
       url('../Geist-Font/Geist-SemiBold-BF6569491e8c368.otf') format('opentype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-Bold.woff2') format('woff2'),
       url('../Geist-Font/Geist-Bold-BF6569491da5a14.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-Black.woff2') format('woff2'),
       url('../Geist-Font/Geist-Black-BF6569491cec591.otf') format('opentype');
  font-weight: 800 900; font-style: normal; font-display: swap;
}
:root {
  --grad-green: linear-gradient(90deg, #00BDBE 50%, #00AC7C 100%);
  --orange: rgba(246, 140, 49, 1);
  --blue: rgba(39, 55, 127, 1);
  --green-dot: rgba(0, 172, 124, 1);
  --navy-hero: #03132D;
  --navy-section: #012A58;
  --text-grey: #5A6478;
  --contact-bg: #EAECF6;
  --font-sans: 'Geist', -apple-system, sans-serif;
  --font-serif: 'Fraunces', Georgia, serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --container: 1300px;
  --radius-lg: 24px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body.nav-open { overflow: hidden; }
html, body { overflow-x: clip; }
body {
  font-family: var(--font-sans);
  color: var(--blue);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 40px;
}
.text-center { text-align: center; }
.text-white { color: #fff !important; }

/* ---------- Gradient italic accent ---------- */
.grad-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  background: var(--grad-green);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* background-clip:text only paints inside the box — extend it downward so
     italic descenders aren't cut off (negative margin keeps layout intact) */
  padding-bottom: 0.16em;
  margin-bottom: -0.16em;
  padding-right: .08em;
}
/* Fraunces is a variable font: at its default (text) optical size it looks
   like a plain slab. Force the display cut on large accents so headings get
   the distinctive high-contrast Fraunces look. */
.grad-italic,
.hero-title span,
.faq-title span,
.ct-title em,
.ct-off-title em,
.ty-title em,
.news-page .gradient-text {
  font-variation-settings: 'opsz' 144;
}

/* ---------- Section titles ---------- */
.section-title {
  font-size: clamp(34px, 4vw, 56px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--blue);
  margin: 22px 0 26px;
}
.section-title .grad-italic { font-size: 56px; }

/* ---------- Badge pill ---------- */
.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* font-family: var(--font-mono); */
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .14em;
  padding: 9px 20px;
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,.35);
  color: #fff;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(4px);
}
.badge-pill .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green-dot);
  flex-shrink: 0;
}
.badge-light {
  border: 1px solid rgba(240, 240, 240, 1);
  color: #012854;
  background: rgba(255, 255, 255, 0.7);
}
.badge-dark {
  border-color: rgba(255,255,255,.28);
  color: #E8EDF6;
  background: rgba(255,255,255,.05);
}

/* ---------- Mono label ---------- */
.mono-label {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 8px 8px 8px 19px;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.18); }
.btn-orange { background: var(--orange); color: #fff; }
.btn-white { background: #fff; color: #16264C; padding: 14px 28px; }
.btn-lg { padding: 8px 13px; font-size: 13px; }
.btn-lg.btn-white { padding: 9px 13px; }
.btn-block { width: 100%; justify-content: center; padding: 7px 20px; }
.btn-circle {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.btn-circle img { width: 16px; height: 16px; }
/* handshake icon on "Become a Distributor" (matches GP/Pharma page) */
.btn .hand {
  width: 20px; height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.btn .hand img { width: 16px; height: 16px; }

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 18px 0;
  transition: background .35s ease, box-shadow .35s ease, padding .35s ease;
}
.nav-inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 clamp(20px, 3vw, 40px);
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 24px);
}
.nav-brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.nav-logo { width: 48px; height: auto; }
.nav-logo-scrolled { width: 48px; height: auto; display: none; }
.navbar.scrolled .nav-logo { display: none; }
.navbar.scrolled .nav-logo-scrolled { display: block; }
.nav-brand-text {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .04em;
  color: #fff;
  transition: color .35s ease;
  white-space: nowrap;
}
.nav-links { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 34px); margin-left: auto; }
/* drawer-only elements — desktop never shows them */
.nav-cta-mobile, .nav-drawer-info, .nav-drawer-brand { display: none; }
.nav-link {
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .05em;
  color: #FCFAFA;
  text-transform: uppercase;
  transition: color .25s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.nav-link:hover { color: #fff; }
.nav-link.active { color: #fff; font-weight: 600; }
.nav-cta { flex-shrink: 0; }

/* --- scrolled state: white bar, dark links --- */
.navbar.scrolled {
  background: #fff;
  box-shadow: 0 4px 24px rgba(10, 25, 60, .10);
  padding: 12px 0;
}
.navbar.scrolled .nav-brand-text { color: #1B2A6B; }
.navbar.scrolled .nav-link { color: #3A4565; }
.navbar.scrolled .nav-link:hover { color: #12203F; }
.navbar.scrolled .nav-link.active { color: #12203F; }

.nav-toggle { display: none; background: none; border: none; cursor: pointer; z-index: 1070; position: relative; }
.nav-toggle span {
  display: block; width: 24px; height: 2px;
  background: #fff; margin: 5px 0;
  transition: transform .3s ease, opacity .2s ease, background .3s;
}
.navbar.scrolled .nav-toggle span { background: #12203F; }

/* --- Divisions dropdown (desktop) --- */
.nav-item-drop { position: relative; display: flex; align-items: center; }
.chev { transition: transform .25s ease; }
.nav-item-drop:hover .chev,
.nav-item-drop:focus-within .chev { transform: rotate(180deg); }
.nav-dropdown {
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  padding-top: 18px;
  visibility: hidden;
  pointer-events: none;
  z-index: 1000;
}
.nav-item-drop:hover .nav-dropdown,
.nav-item-drop:focus-within .nav-dropdown {
  visibility: visible;
  pointer-events: auto;
}
.nav-dropdown-inner {
  min-width: 260px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(10,25,60,.18);
  padding: 10px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease;
}
.nav-item-drop:hover .nav-dropdown-inner,
.nav-item-drop:focus-within .nav-dropdown-inner {
  opacity: 1;
  transform: translateY(0);
}
.nav-dropdown-link {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  border-radius: 10px;
  transition: background .2s ease;
}
.nav-dropdown-link:hover { background: rgba(27,42,107,.06); }
.nav-dropdown-title {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #12203F;
}
.nav-dropdown-desc {
  font-size: 12px;
  font-weight: 400;
  color: #5A6478;
  text-transform: none;
  letter-spacing: 0;
}

/* --- Divisions dropdown: single modern panel ---
   Icon tile + title/description per division, an arrow that slides in on
   hover, and the Pharma sub-divisions (Abbares / Almet) inline as chips
   under their parent — replaces the old detached side flyout. */
.nav-dropdown-inner { min-width: 320px; border-radius: 16px; }
.nav-dd-row { flex-direction: row; align-items: center; gap: 12px; }
.nav-dd-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.nav-dd-ico {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform .25s ease;
}
.nav-dd-ico svg { width: 19px; height: 19px; }
.nav-dd-ico--pharma  { background: rgba(246, 140, 49, .12); color: var(--orange); }
.nav-dd-ico--generic { background: rgba(0, 172, 124, .12);  color: var(--green-dot); }
.nav-dropdown-link:hover .nav-dd-ico { transform: scale(1.06); }
.nav-dd-arrow {
  flex-shrink: 0;
  color: var(--orange);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .22s ease, transform .22s ease;
}
.nav-dropdown-link:hover .nav-dd-arrow { opacity: 1; transform: translateX(0); }
/* sub-division chips, left-aligned with the parent's text (12 + 40 + 12) */
.nav-dd-subs { display: flex; gap: 8px; padding: 2px 14px 12px 66px; }
.nav-dd-sub {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #3A4565;
  padding: 7px 16px;
  border: 1px solid #E2E7F0;
  border-radius: 100px;
  background: #F7F9FC;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.nav-dd-sub:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  transform: translateY(-1px);
}
.nav-dd-divider { height: 1px; background: #EEF1F6; margin: 4px 12px 8px; }
/* Pharma Division row is a heading, not a link — no hover affordance */
.nav-dd-row--static { cursor: default; }
.nav-dd-row--static:hover { background: transparent; }
.nav-dd-row--static:hover .nav-dd-ico { transform: none; }
/* the chip of the sub-division page you're ON stays filled */
.nav-dd-sub.is-active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

/* ============================================================
   SUB-DIVISION (BRAND) PAGES — Abbares / Almet identity
   Each page carries its own accent colour so it's always obvious
   which sub-division you're looking at:
     Abbares = brand orange · Almet = brand teal-green
   ============================================================ */
.brand-abbares { --brand-accent: #F68C31; --brand-accent-soft: rgba(246, 140, 49, .12); }
.brand-almet   { --brand-accent: #00AC7C; --brand-accent-soft: rgba(0, 172, 124, .12); }

/* --- hero switcher: shows the current sub-division, jumps to the sibling --- */
.brand-hero { position: relative; overflow: hidden; }
.brand-switch {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 26px;
  flex-wrap: wrap;
}
.brand-switch-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  color: #6E7689;
}
.brand-switch-label .badge-dot { background: var(--brand-accent); }
.brand-switch-tabs {
  display: inline-flex;
  gap: 3px;
  background: #fff;
  border: 1px solid #E4E9F2;
  border-radius: 100px;
  padding: 4px;
  box-shadow: 0 6px 18px rgba(15, 30, 70, .06);
}
.brand-switch-tab {
  padding: 9px 24px;
  border-radius: 100px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #5A6478;
  transition: color .25s ease, background .25s ease, box-shadow .25s ease;
}
.brand-switch-tab:hover { color: var(--blue); background: #F3F6FB; }
.brand-switch-tab.is-active {
  background: var(--brand-accent);
  color: #fff;
  box-shadow: 0 6px 16px var(--brand-accent-soft);
}
.brand-switch-tab.is-active:hover { color: #fff; background: var(--brand-accent); }

/* --- giant animated wordmark across the hero background ---
   The text is painted with a gradient (background-clip: text) whose bright
   band sweeps through the letters on a loop — a slow "shine" highlight —
   while the whole word drifts gently up and down. Both run on compositable
   properties (background-position / transform) so they stay cheap. */
.brand-watermark {
  position: absolute;
  right: -10px;
  bottom: -28px;
  z-index: 0;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(90px, 15vw, 210px);
  line-height: 1;
  letter-spacing: -.04em;
  color: transparent;
  background: linear-gradient(105deg,
      var(--brand-accent) 0%,
      var(--brand-accent) 38%,
      #ffffff 50%,
      var(--brand-accent) 62%,
      var(--brand-accent) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: .09;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  white-space: nowrap;
  animation: brandShine 6.5s linear infinite,
             brandFloat 9s ease-in-out infinite;
  will-change: background-position, transform;
}
@keyframes brandShine {
  0%   { background-position: 180% 0; }
  100% { background-position: -80% 0; }
}
@keyframes brandFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
@media (prefers-reduced-motion: reduce) {
  .brand-watermark { animation: none; color: var(--brand-accent); background: none; -webkit-text-fill-color: currentColor; opacity: .07; }
}
.brand-hero .container { position: relative; z-index: 1; }

/* --- accent carried through the page --- */
.brand-page .division-body .mono-label { color: var(--brand-accent); font-weight: 600; }
.brand-cats-head { margin-bottom: 44px; }
.brand-cats-head .badge-pill .brand-dot { background: var(--brand-accent); }
.brand-cats-head .section-title { margin-bottom: 0; }

@media (max-width: 720px) {
  .brand-watermark { font-size: 90px; bottom: -14px; opacity: .06; }
  .brand-switch { gap: 10px; }
  .brand-switch-tabs { width: 100%; }
  .brand-switch-tab { flex: 1; text-align: center; padding: 9px 10px; }
}

/* --- Mobile slide-in overlay --- */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 14, 34, .55);
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease, visibility .4s ease;
  z-index: 1050;
}
.nav-overlay.open { opacity: 1; visibility: visible; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: var(--navy-hero);
  overflow: hidden;
  padding: 150px 0 120px;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center right;
  opacity: .9;
}
.hero-bg.hero-video {
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  max-width: none;
  transform: translate(-50%, -50%);
  object-fit: cover;
  object-position: center right;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(3,19,45,.92) 0%, rgba(3,19,45,.55) 55%, rgba(3,19,45,.25) 100%);
}
.hero-content { position: relative; z-index: 2; }
.hero-title {
  font-size: clamp(32px, 5.6vw, 72px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 28px 0 30px;
}
.hero-title .grad-italic { font-size: 1.02em; }
.hero-comma { margin-left: -0.15em; }

/* ============================================================
   Per-letter floating entrance animation for headings
   (hero fires on load; .anim-letters fire on scroll-into-view)
   ============================================================ */
.hero-title-anim .hl,
.anim-letters .hl {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.7em);
  filter: blur(4px);
  will-change: transform, opacity;
}
/* letters animate only once the heading is triggered (.run) */
.hero-title-anim.run .hl,
.anim-letters.run .hl {
  animation: heroLetterFloat 0.6s cubic-bezier(.2,.7,.3,1) forwards;
  animation-delay: var(--d, 0s);
}
/* word wrappers keep their letters together so wrapping only happens at
   real spaces between words (not mid-word between inline-block letters) */
.hero-title-anim .hl-word,
.anim-letters .hl-word { display: inline-block; white-space: nowrap; }

/* spaces stay inline and remain a normal line-break opportunity */
.hero-title-anim .hl-space,
.anim-letters .hl-space { display: inline; white-space: normal; opacity: 1; filter: none; transform: none; animation: none; }

/* Letter spans and word wrappers must not pick up accent styling from
   descendant selectors like `.faq-title span { color:green; font:italic serif }`
   (those selectors match our injected spans too). Reset them to the heading's
   own font/color; only the accent UNIT (.hl-unit) keeps its special look. */
.hero-title-anim .hl-word,
.anim-letters .hl-word,
.hero-title-anim .hl:not(.hl-unit),
.anim-letters .hl:not(.hl-unit) {
  color: inherit;
  font-style: normal;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  background: none;
  -webkit-text-fill-color: inherit;
}

/* split-animation letters inside a gradient unit need the same descender
   allowance as .grad-italic (each letter is its own clipped text box) */
.hero-title-anim .hl-unit,
.anim-letters .hl-unit,
.hero-title-anim .hl-unit .hl,
.anim-letters .hl-unit .hl {
  padding-bottom: 0.16em;
  margin-bottom: -0.16em;
}

@keyframes heroLetterFloat {
  0%   { opacity: 0; transform: translateY(0.7em); filter: blur(4px); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* before JS splits the title, hide it to avoid a flash of the full text */
.hero-title-anim.is-pending,
.anim-letters.is-pending { opacity: 0; }

/* reduced motion: show everything instantly, no split animation */
@media (prefers-reduced-motion: reduce) {
  .hero-title-anim .hl, .anim-letters .hl { animation: none; opacity: 1; transform: none; filter: none; }
  .hero-title-anim.is-pending, .anim-letters.is-pending { opacity: 1; }
}
.hero-sub {
  max-width: 640px;
  font-size: 17px;
  line-height: 1.75;
  color: rgba(233, 240, 250, 1);
  margin-bottom: 40px;
  font-weight: 400;
}
.hero-actions { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 58px; }
.hero-badges { display: flex; gap: 44px; flex-wrap: wrap; }
.hero-badge { display: flex; align-items: flex-start; gap: 10px; color: #fff; }
.hb-icon { color: rgba(255,255,255,.85); margin-top: 2px; }
.hero-badge strong { display: block; font-size: 13.5px; font-weight: 700; }
.hero-badge span { font-size: 13px; color: rgba(255,255,255,.65); }

.scroll-indicator {
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.scroll-text {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .05em;
  color: rgba(255,255,255,.75);
}
.scroll-line {
  width: 2px; height: 56px;
  background: linear-gradient(180deg, var(--orange), rgba(246,140,49,0));
  animation: scrollPulse 1.8s ease-in-out infinite;
}
/* pause the infinite animation when hero is out of view (perf) */
body.hero-offscreen .scroll-line { animation-play-state: paused; }
@keyframes scrollPulse {
  0%, 100% { transform: scaleY(1); opacity: 1; }
  50% { transform: scaleY(.55); opacity: .55; }
}

/* ============================================================
   ALL-PRODUCTS SEARCH RESULTS HERO — text-only variant of the
   Pharma/Generic division hero (no side image), full width.
   ============================================================ */
.hero-section.all-products-hero .hero-content { flex: 0 0 100%; max-width: 100%; text-align: center; }
.hero-section.all-products-hero .hero-badge { margin-left: auto; margin-right: auto; }
.hero-section.all-products-hero .hero-description { max-width: 640px; margin-left: auto; margin-right: auto; }
.hero-section.all-products-hero { padding-bottom: 70px; }

/* ============================================================
   PRODUCT SEARCH BAR (Division / Sub Division / Category / Product)
   ============================================================ */
.product-search-section {
  position: relative;
  z-index: 3;
  margin-top: -46px; /* float the pill over the hero's bottom edge */
}
/* text-align:center (rather than margin:0 auto) centers the bar, because the
   bar itself is inline-flex below — it shrink-wraps to its content instead
   of stretching full width, so short values never leave a dead gap before
   the Search button. */
.product-search-section .container { text-align: center; }
.product-search-bar {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border-radius: 100px;
  box-shadow: 0 20px 50px rgba(3, 19, 45, .16);
  padding: 6px 6px 6px 28px;
  max-width: 100%;
  text-align: left;
}
/* fields hug their own content (native <select>/<input> shrink to the text
   they hold) so the chevron sits right next to its own value, instead of
   every field being stretched to an equal column and the chevron drifting
   into empty space next to the FOLLOWING field's text. */
.psb-field {
  position: relative;
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
}
.psb-field:first-child { padding-left: 0; }
.psb-field label {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.psb-field select,
.psb-combo-input,
.psb-dd-trigger {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  outline: none;
  background: transparent;
  min-width: 0;
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  color: var(--blue);
  cursor: pointer;
  padding: 0;
  text-align: left;
}
/* a dropdown with nothing to pick (no categories for the chosen division, no
   products yet) is greyed out instead of opening onto an empty panel */
.psb-dd-trigger:disabled,
.psb-combo-input:disabled { opacity: .4; cursor: not-allowed; }
.psb-combo-input:disabled::placeholder { color: var(--blue); }
.psb-field:has(.psb-dd-trigger:disabled) .psb-chevron,
.psb-field:has(.psb-combo-input:disabled) .psb-chevron { opacity: .4; }
.psb-combo-input { cursor: text; width: 140px; max-width: 140px; }
.psb-combo-input::placeholder { color: var(--blue); opacity: .55; font-family: var(--font-sans); }
.psb-chevron {
  flex-shrink: 0;
  width: 8px; height: 8px;
  margin-top: -4px;
  border-right: 1.6px solid var(--green-dot);
  border-bottom: 1.6px solid var(--green-dot);
  transform: rotate(45deg);
  pointer-events: none;
}
.psb-divider { width: 1px; align-self: center; height: 32px; background: #E2E6EF; flex-shrink: 0; }
.psb-submit { flex-shrink: 0; padding-left: 18px; }
.psb-field--combo { position: relative; }
.psb-combo-panel {
  display: none;
  position: absolute;
  top: calc(100% + 16px);
  right: 0;
  width: 280px;
  max-width: 80vw;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(3, 19, 45, .18);
  max-height: 260px;
  overflow-y: auto;
  padding: 8px;
  z-index: 20;
}
.psb-combo-panel.is-open { display: block; }
.psb-combo-option {
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px;
  color: var(--blue);
  cursor: pointer;
  white-space: normal;
}
.psb-combo-option:hover { background: #F3F5FA; }
.psb-combo-panel.is-empty::after {
  content: 'No products found';
  display: block;
  padding: 10px 14px;
  color: var(--text-grey);
  font-size: 14px;
}
.psb-field select:disabled { opacity: .4; cursor: not-allowed; }

@media (max-width: 900px) {
  .product-search-section { margin-top: -20px; }
  .product-search-bar {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    border-radius: var(--radius-lg);
    padding: 16px;
    gap: 10px;
  }
  .psb-field {
    flex: 1 1 calc(50% - 5px);
    justify-content: space-between;
    padding: 12px 14px;
    background: #F6F7FB;
    border-radius: 12px;
  }
  .psb-field:first-child { padding-left: 14px; }
  .psb-field select,
  .psb-combo-input,
  .psb-dd-trigger { max-width: none; width: 100%; }
  .psb-combo-input { width: auto; }
  .psb-divider { display: none; }
  .psb-combo-panel { left: 0; right: 0; width: auto; max-width: none; }
  .psb-submit { flex: 1 1 100%; justify-content: center; margin-left: 0; padding-left: 8px; }
}

@media (max-width: 560px) {
  .psb-field { flex: 1 1 100%; }
}

/* Home page: the search pill sits dead centre on the bottom edge of the hero
   banner — horizontally centred, and pulled up by half its own height so the
   top half is on the navy banner and the bottom half on the white below.
   --psb-h is the pill's height; change it if the bar's padding changes.
   It lands where the hero's SCROLL indicator sits, so that steps aside here
   (delete the .scroll-indicator rule below to bring SCROLL back). */
.product-search-home {
  position: relative;
  z-index: 5;
  text-align: center;
  --psb-h: 58px;
}
.product-search-home .product-search-section {
  margin-top: calc(var(--psb-h) / -2);
  padding-bottom: 0;
}
.hero .scroll-indicator { display: none; }
@media (max-width: 900px) {
  /* the bar stacks into a taller box on small screens, so centre on that height */
  .product-search-home { --psb-h: 120px; }
}

/* ============================================================
   STATS
   ============================================================ */
.stats { padding: 60px 0; background: #fff; }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.stat {
  text-align: center;
  padding: 10px 20px;
  border-left: 1px solid #E2E6EF;
}
.stat:first-child { border-left: none; }
.stat h3 {
  font-size: clamp(40px, 3.6vw, 58px);
  font-weight: 500;
  color: #1C2E63;
  letter-spacing: -0.02em;
}
.stat p { margin-top: 10px; font-weight: 400; font-size: 18px; color: #0C121A99; }

/* ============================================================
   ABOUT
   ============================================================ */
.about { padding: 55px 0 110px; }
.about-head { text-align: center; }
.about-head .section-title { margin-bottom: 18px; }
.about-sub {
  font-size: 16px;
  line-height: 1.8;
  color: #565C67;
  margin-bottom: 32px;
}
.about-cards {
  margin-top: 64px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.about-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 585px;
  box-shadow: 0 18px 40px rgba(12, 28, 64, .14);
  transition: transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s ease, opacity .8s cubic-bezier(.2,.65,.3,1);
  will-change: transform;
}
/* staggered reveal: 2nd card cascades in slightly after the 1st */
.about-cards .about-card.reveal { transition-delay: 0s; }
.about-cards .about-card.reveal:nth-child(2) { transition-delay: .15s; }
.about-card:hover { transform: translateY(-8px); box-shadow: 0 30px 60px rgba(12, 28, 64, .24); }
.about-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.22,.61,.36,1); }
.about-card:hover img { transform: scale(1.07); }
.about-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,16,34,0) 30%, rgba(8,16,34,.72) 100%);
  transition: opacity .5s ease, background .5s ease;
}
.about-card:hover .about-card-overlay {
  background: linear-gradient(180deg, rgba(8,16,34,0) 18%, rgba(8,16,34,.82) 100%);
}
.about-card-text {
  position: absolute;
  left: 32px; bottom: 30px;
  color: #fff;
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.about-card:hover .about-card-text { transform: translateY(-6px); }
.about-card-text h4 { font-size: 28px; font-weight: 500; line-height: 1.25; margin-bottom: 10px; }
.about-card-text p {
  font-size: 16px; line-height: 1.55; color: #FCFAFA;
  opacity: .85;
  transition: opacity .5s ease, transform .5s ease;
}
.about-card:hover .about-card-text p { opacity: 1; }

/* ============================================================
   PRESENCE
   ============================================================ */
.presence {
  position: relative;
  background: var(--navy-section);
  padding: 110px 0;
  color: #fff;
  overflow: hidden;
}
.presence-grid {
  display: grid;
  grid-template-columns: minmax(0, 625px) 1fr;
  gap: 70px;
  align-items: center;
  min-height: 456px;      /* map (676px) minus section padding */
}
.presence-text { position: relative; z-index: 2; }
.presence-text .section-title { color: #fff; }
.presence-text p {
  font-size: 15.5px;
  line-height: 1.85;
  color: rgba(226, 235, 248, 1);
  margin-bottom: 22px;
}
@media (min-width: 1181px) {
  .presence-text p { max-width: 375px; }
  .footer-tagline {
    font-size: 28px;
    font-weight: 500;
    line-height: 1.55;
    max-width: 500px;
    margin-bottom: 36px;
    letter-spacing: -0.01em;
  }
}
/* map covers the full right side of the section, edge to edge */
.presence-map {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 62.5%;            /* 900 / 1440, same as the design */
  z-index: 1;
}
.presence-map img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.presence-map .india-map {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- animated map: pins pulse; on scroll-in they drop into place, labels fade --- */
.presence-map .map-pin,
.presence-map .map-label {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

/* pin: continuous gentle pulse (runs once dropped in) */
.presence-map .map-pin {
  animation: mapPinPulse 2.4s ease-in-out infinite;
  animation-delay: calc(1.1s + var(--pin) * 0.12s);
  will-change: transform;
}
@keyframes mapPinPulse {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-4px) scale(1.06); }
}

/* label: hidden until the section runs */
.presence-map .map-label {
  opacity: 0;
  transform: translateY(10px) scale(0.96);
}

/* before the section scrolls in: pins are lifted up & hidden (ready to drop) */
.presence.is-map-pending .presence-map .map-pin {
  opacity: 0;
  transform: translateY(-42px) scale(0.6);
  animation: none;
}
.presence.is-map-pending .presence-map .map-label {
  opacity: 0;
  transform: translateY(10px) scale(0.96);
}

/* when the section is in view: drop pins in (staggered), fade labels in */
.presence.map-run .presence-map .map-pin {
  animation: mapPinDrop 0.6s cubic-bezier(.34,1.56,.64,1) both,
             mapPinPulse 2.4s ease-in-out infinite;
  animation-delay: calc(var(--pin) * 0.13s),
                   calc(0.6s + var(--pin) * 0.13s);
}
.presence.map-run .presence-map .map-label {
  animation: mapLabelIn 0.5s ease forwards;
  animation-delay: calc(0.15s + var(--lab) * 0.1s);
}

@keyframes mapPinDrop {
  0%   { opacity: 0; transform: translateY(-42px) scale(0.6); }
  70%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes mapLabelIn {
  0%   { opacity: 0; transform: translateY(10px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .presence-map .map-pin,
  .presence-map .map-label { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   OFFERINGS / DIVISIONS
   ============================================================ */
.offerings { padding: 110px 0; }
.offerings .section-title { margin-bottom: 50px; }
.division-card {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 56px;
  align-items: center;
  background: #FFFFFF radial-gradient(62% 83% at 100% 0%, rgba(0, 102, 155, 0.2) 0%, rgba(0, 189, 190, 0.1) 45%, rgba(255, 255, 255, 0) 72%) no-repeat;
  border: 1px solid #EDF0F6;
  border-radius: 28px;
  padding: 30px;
  box-shadow: 0 22px 50px rgba(15, 30, 70, .07);
  margin-bottom: 36px;
}
.division-card--reverse {
  grid-template-columns: 1.05fr 1.2fr;
  background: #FFFFFF radial-gradient(62% 83% at 0% 0%, rgba(0, 102, 155, 0.2) 0%, rgba(0, 189, 190, 0.1) 45%, rgba(255, 255, 255, 0) 72%) no-repeat;
}
.division-media { border-radius: 18px; overflow: hidden; height: 420px; }
.division-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.division-card:hover .division-media img { transform: scale(1.04); }
.division-body h3 {
  font-size: clamp(30px, 2.6vw, 40px);
  font-weight: 700;
  color: #123B7A;
  margin: 16px 0 18px;
  letter-spacing: -0.01em;
}
.division-body > p {
  font-size: 16.5px;
  line-height: 1.7;
  color: #4A5670;
  margin-bottom: 15px;
}
.check-list { margin-bottom: 32px; }
.check-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16.5px;
  color: #2A3752;
  padding: 7px 0;
}
.check-ico {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #E3EDFB;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.check-ico img { width: 11px; height: 11px; }

/* Pharma division sub-divisions (Abbares / Almet) */
.sub-divisions { margin: -14px 0 30px; }
.sub-divisions-label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #7A8699;
  margin-bottom: 12px;
}
.sub-division-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.sub-division-card {
  position: relative;
  display: block;
  padding: 16px 18px;
  border: 1px solid #DCE6F5;
  border-left: 3px solid #123B7A;
  border-radius: 12px;
  background: #F7FAFE;
  overflow: hidden;
  transition: transform .3s cubic-bezier(.22,.61,.36,1),
              box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
/* the accent rail on the left grows from the bottom up on hover, turning the
   whole card orange-accented rather than just tinting the border */
.sub-division-card::before {
  content: "";
  position: absolute;
  left: -3px; bottom: 0;
  width: 3px; height: 0;
  background: var(--orange);
  transition: height .35s cubic-bezier(.22,.61,.36,1);
}
.sub-division-card:hover {
  transform: translateY(-4px);
  background: #fff;
  border-color: #C6D9F2;
  box-shadow: 0 14px 30px rgba(15, 30, 70, .13);
}
.sub-division-card:hover::before { height: 100%; }
.sub-division-card h4 {
  font-size: 17px;
  font-weight: 700;
  color: #123B7A;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
  transition: color .3s ease;
}
.sub-division-card:hover h4 { color: var(--orange); }
.sub-division-card p {
  font-size: 13.5px;
  line-height: 1.45;
  color: #5A6885;
  margin: 0;
  transition: color .3s ease;
}
.sub-division-card:hover p { color: #3E4C6B; }
@media (prefers-reduced-motion: reduce) {
  .sub-division-card,
  .sub-division-card::before,
  .sub-division-card h4,
  .sub-division-card p { transition: none; }
  .sub-division-card:hover { transform: none; }
}
@media (max-width: 520px) {
  .sub-division-cards { grid-template-columns: 1fr; }
}

/* ============================================================
   FEATURED PRODUCTS — horizontal scroll section
   ============================================================ */
.products-section {
  position: relative;
  background: var(--navy-section);
  /* card image height — the side arrows centre themselves on it */
  --product-img-h: 400px;
}
.products-inner {
  padding: 110px 0;
  overflow: hidden;
}
/* ---- fit the whole section in one screen ----
   As the viewport gets shorter, progressively shrink the section padding,
   the heading, the gap under it and the card image (--product-img-h drives
   both the image and the arrow position) so the badge at the top AND the
   product name/category at the bottom are visible without scrolling. */
@media (max-height: 1000px) {
  .products-inner { padding: 80px 0; }
  .products-head { margin-bottom: 32px; }
  .products-section { --product-img-h: 370px; }
}
@media (max-height: 860px) {
  .products-inner { padding: 60px 0; }
  .products-head { margin-bottom: 24px; }
  .products-section { --product-img-h: 320px; }
  .products-section .section-title { font-size: clamp(26px, 3vw, 40px); margin-top: 14px; }
  .products-section .section-title .grad-italic { font-size: 1.02em; }
  .products-section .product-meta { margin-top: 14px; }
}
@media (max-height: 740px) {
  .products-inner { padding: 44px 0; }
  .products-head { margin-bottom: 18px; }
  .products-section { --product-img-h: 270px; }
}
.products-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 54px;
}
.products-head .section-title { margin-bottom: 0; min-width: 0; }
.products-head-right {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
  margin-top: 8px;
}
.products-head-right .btn { flex-shrink: 0; }
/* prev / next nav buttons */
.products-nav { display: flex; gap: 10px; }
.products-nav-btn {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.08);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, transform .2s ease;
}
.products-nav-btn img { width: 16px; height: 16px; filter: brightness(0) invert(1); }
.products-nav-btn:hover { background: var(--orange); border-color: var(--orange); }
.products-nav-btn:active { transform: scale(.92); }
/* the header pair would duplicate the side arrows, so it stays hidden */
.products-head-right .products-nav { display: none; }

/* carousel shell — prev arrow, the card row, next arrow, side by side.
   The arrows sit outside the cards: one before the first product, one
   after the last, so nothing is covered up. */
.products-carousel {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  /* no outer inset — the arrows sit right at the container edge, with the
     spacing between arrow and cards coming from the flex gap alone */
  padding: 0;
}
.products-carousel .products-viewport { flex: 1 1 auto; min-width: 0; }
.products-arrow {
  flex: 0 0 auto;
  /* tighter circle: smaller button + larger chevron = less dead space
     between the icon and the ring */
  width: 42px; height: 42px;
  /* line the arrow up with the middle of the product image rather than the
     middle of the whole card (the name/category sit below the image) */
  margin-top: calc(var(--product-img-h) / 2 - 21px);
}
.products-arrow img { width: 18px; height: 18px; }

/* looping marquee viewport + track */
.products-viewport { overflow: hidden; }
.products-track {
  display: flex;
  gap: 28px;
  width: max-content;
  will-change: transform;
}
/* pause the auto-scroll while hovering the row */
.products-viewport:hover .products-track { animation-play-state: paused; }
.product-card {
  flex: 0 0 288px;
  width: 288px;
  display: block;      /* whole card is a link */
  color: inherit;
  cursor: pointer;
}
.product-img {
  background: linear-gradient(160deg, #F4F6F9 0%, #E9EDF2 100%);
  border-radius: 18px;
  height: var(--product-img-h);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
/* per-card image fit (data-fit on .product-img): the default placeholder is
   stretched to fill the card (fill); real product shots use contain/none so
   nothing is cropped, or cover to fill without distortion */
.product-img[data-fit="fill"] img { object-fit: fill; padding: 0; }
.product-img[data-fit="contain"] { background: #fff; }
.product-img[data-fit="contain"] img { object-fit: contain; padding: 18px; }
.product-img[data-fit="none"] { background: #fff; }
.product-img[data-fit="none"] img { object-fit: none; padding: 18px; }
.product-img[data-fit="cover"] img { object-fit: cover; padding: 0; }
.product-card:hover .product-img img { transform: scale(1.06); }
.product-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
}
/* the product name is the accent on the card — brand orange with an underline
   that sweeps in on hover, so it reads as a highlight instead of plain white */
.product-meta h4 {
  color: var(--orange);
  font-size: 19px;
  font-weight: 700;
  display: inline-block;
  position: relative;
  padding-bottom: 3px;
  transition: color .3s ease;
}
.product-meta h4::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s ease;
}
.product-card:hover .product-meta h4 { color: #FFA75A; }
.product-card:hover .product-meta h4::after { transform: scaleX(1); }
.product-meta > div > span { display: block; margin-top: 5px; font-size: 13.5px; color: #93A5C4; }
.product-arrow {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .3s ease;
}
.product-arrow img { width: 12px; height: 12px; filter: brightness(4); }
.product-arrow:hover { background: var(--orange); }
.products-mobile-top { display: none; }
.pm-viewall { width: 100%; justify-content: center; }

/* ============================================================
   CAPABILITIES
   ============================================================ */
.capabilities {
  position: relative;
  padding: 110px 0 130px;
  overflow: hidden;
  background: #101A14;
}
.capabilities-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
}
.capabilities-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(8, 14, 12, .62) 0%, rgba(8, 14, 12, .25) 55%, rgba(8, 14, 12, .05) 100%);
}
.capabilities-content { position: relative; z-index: 2; }
.capabilities .section-title { margin-bottom: 46px; }
.cap-grid {
  display: grid;
  grid-template-columns: repeat(2, 355px);
  gap: 24px;
}
.cap-card {
  border-radius: 20px;
  padding: 30px 28px;
  background: rgba(20, 26, 24, .18);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(14px);
}
.cap-card:hover { background: rgba(20,26,24,.55); transform: translateY(-4px); }
.cap-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--orange);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 46px;
}
.cap-icon img { width: 24px; height: 24px; }
.cap-card h4 { color: #fff; font-size: 19px; font-weight: 500; margin-bottom: 12px; }
.cap-card p { color: #FFFFFFBF; font-size: 14px; line-height: 1.6; }

/* ============================================================
   NEWS
   ============================================================ */
.news { padding: 110px 0; }
.news-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 54px;
}
.news-head .section-title { margin-bottom: 0; }
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.news-img {
  border-radius: 18px;
  overflow: hidden;
  height: 255px;
  margin-bottom: 24px;
}
.news-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.news-card:hover .news-img img { transform: scale(1.05); }
.news-meta {
  display: flex;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 13.6px;
  font-weight: 400;
  letter-spacing: .42px;
  color: #1E64F0;
  margin-bottom: 14px;
}
.news-card h4 {
  font-size: 24px;
  font-weight: 500;
  line-height: 26px;
  color: #012854;
  letter-spacing: -0.01em;
}

/* ============================================================
   COMMITMENT
   ============================================================ */
.commitment {
  position: relative;
  background: var(--navy-section);
  padding: 110px 0;
  overflow: hidden;
  text-align: center;
}
.commitment-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: .9;
}
.commitment-content { position: relative; z-index: 2; }
.commitment blockquote {
  /* Figma: tighter, smaller quote */
  margin: 26px auto 32px;
  font-size: clamp(30px, 3.3vw, 46px);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -0.015em;
  color: #fff;
  max-width: 860px;
}
.commitment blockquote .grad-italic { font-size: 1.02em; }
.commitment-credit { color: #FCFAFA; letter-spacing: .18em; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact {
  background: linear-gradient(136.76deg, #F2F2F9 0%, #FEFCFD 35%, #FEFCFD 71.49%, #D9DEF1 100%);
  padding: 120px 0;
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 100px;
  align-items: flex-start;
}
.contact-text .section-title { margin-bottom: 30px; }
.contact-text > p {
  font-size: 16.5px;
  line-height: 1.8;
  color: #0C121AA6;
  max-width: 520px;
  margin-bottom: 44px;
}
.contact-rows { display: flex; flex-direction: column; gap: 22px; }
.contact-row {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 16px;
  color: #2A3752;
  line-height: 1.5;
}
.contact-ico {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #1B2A6B;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1),
              background .3s ease,
              box-shadow .3s ease;
}
.contact-ico img {
  width: 16px; height: 16px; filter: brightness(6);
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}

/* soft glowing ring that fades in on hover */
.contact-ico::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(27, 42, 107, .35);
  opacity: 0;
  transition: box-shadow .4s ease, opacity .4s ease;
}

/* icon reacts whenever its row is hovered */
.contact-row:hover .contact-ico {
  transform: translateY(-4px) scale(1.08);
  background: #F7941D;
  box-shadow: 0 12px 22px rgba(247, 148, 29, .35);
}
.contact-row:hover .contact-ico img {
  transform: scale(1.12) rotate(-6deg);
}
.contact-row:hover .contact-ico::after {
  opacity: 1;
  box-shadow: 0 0 0 6px rgba(247, 148, 29, .18);
}

/* clickable rows: nudge text on hover too */
a.contact-row { text-decoration: none; transition: transform .3s ease, color .3s ease; }
a.contact-row:hover { transform: translateX(4px); color: #1B2A6B; }

@media (prefers-reduced-motion: reduce) {
  .contact-ico,
  .contact-ico img,
  .contact-ico::after,
  a.contact-row { transition: none; }
  .contact-row:hover .contact-ico,
  .contact-row:hover .contact-ico img,
  a.contact-row:hover { transform: none; }
}

/* ---------- Inquiry form card ---------- */
.inquiry-card {
  background: #FFFFFF01;
  border-radius: 26px;
  padding: 40px 30px 26px 40px;
  box-shadow: 0 30px 70px rgba(20, 35, 80, .12);
}
.inquiry-label { color: #8B93A8; letter-spacing: .28em; font-size: 12px; }
.inquiry-card h3 {
  font-size: 27px;
  font-weight: 700;
  color: #16264C;
  margin: 14px 0 30px;
  letter-spacing: -0.01em;
}
.form-success {
  background: #E5F7EF;
  border: 1px solid #9ADFC2;
  color: #0B7C52;
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 14.5px;
  margin-bottom: 24px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { margin-bottom: 16px; }
.form-group label {
    display: block;
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .18em;
    color: #6E7689;
    margin-bottom: 8px;
    word-spacing: -2.9px;
}

/* uniform vertical rhythm: empty error placeholders must not add height
   (.form-group prefix outranks the per-page .field-error blocks) */
.form-group .field-error:empty { display: none; }
.form-group input,
.form-group textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 15px;
  color: #16264C;
  padding: 15px 22px;
  border: 1px solid #DDE1EB;
  border-radius: 100px;
  outline: none;
  transition: border-color .25s ease, box-shadow .25s ease;
  background: #fff;
}
.form-group textarea { border-radius: 22px; resize: vertical; min-height: 110px; }
.form-group input::placeholder,
.form-group textarea::placeholder { color: #A6AEC0; }
.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(246, 140, 49, .12);
}
.chip-group { display: flex; gap: 7px; flex-wrap: wrap; }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.chip span {
  display: inline-block;
  padding: 9px 16px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: normal;
  color: #0C121A;
  border: 1px solid #DDE1EB;
  border-radius: 100px;
  cursor: pointer;
  transition: all .25s ease;
  background: #fff;
}
.chip input:checked + span {
  background: #1B2A6B;
  border-color: #1B2A6B;
  color: #fff;
}
.chip span:hover { border-color: #1B2A6B; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  position: relative;
  overflow: hidden;
  padding: 70px 0 0;
  background: #0E3B4E;
}
.footer-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
}
.footer-container {
  position: relative;
  z-index: 2;
  /* Figma: card spans the page minus 48px on each side */
  max-width: none;
  padding: 0 48px;
}
.footer-card {
  background: rgba(10, 22, 34, .45);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 28px;
  backdrop-filter: blur(5px);
  padding: 56px 56px 34px;
  color: #fff;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.2fr 1.6fr;
  gap: 60px;
  padding-bottom: 46px;
}
.footer-logo { width: 60px; margin-bottom: 28px; }
.footer-tagline {
  font-size: 27px;
  font-weight: 500;
  line-height: 1.55;
  max-width: 420px;
  margin-bottom: 36px;
  letter-spacing: -0.01em;
}
@media (max-width: 768px) {
  .footer-tagline { font-size: 23px; }
}
.footer h5 {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .08em;
  color: rgba(255,255,255,.92);
  margin-bottom: 16px;
}
.footer-contact a {
  display: block;
  font-size: 15px;
  color: rgba(255, 255, 255, 1);
  margin-bottom: 8px;
  transition: color .25s;
}
.footer-contact a:hover { color: #fff; }
.footer-contact { margin-bottom: 30px; }
.social-icons { display: flex; gap: 12px; }
.social-icons a {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #2563EB;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .25s ease, background .25s ease;
}
.social-icons a:hover { transform: translateY(-3px); background: var(--orange); }
.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  align-content: start;
  padding-top: 128px; /* aligns column headings with the tagline (past the logo) */
}
.footer-col a {
  display: block;
  font-size: 15.5px;
  color: rgba(255,255,255,.82);
  margin-bottom: 12px;
  transition: color .25s, transform .25s;
}
.footer-col a:hover { color: #fff; transform: translateX(3px); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,.14);
  padding-top: 26px;
  font-size: 12.5px;
  letter-spacing: .08em;
  color: #fff;
  text-transform: uppercase;
}
/* agency credit stands out */
.footer-bottom a {
  color: var(--orange);
  font-weight: 700;
  transition: color .25s ease;
}
.footer-bottom a:hover { color: #FFB067; text-decoration: underline; }
/* SVG so the wordmark always spans exactly the footer-card width,
   at any screen size (viewBox scales the text to 100% of the container) */
.footer-giant {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 75px;   /* Figma: ~90px visual gap between card and wordmark */
  overflow: visible;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}
.footer-giant text {
  fill: rgba(252,250,250,.8);
  font-weight: 400;
  /* Geist first: Arial doesn't exist on Android, and phones were substituting
     their own (often serif) font for the SVG text. Geist is self-hosted so the
     wordmark renders the same on every device. */
  font-family: 'Geist', Arial, Helvetica, sans-serif;
  letter-spacing: -0.08em;                    /* Figma: -12.8px @ 160px */
}

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.2,.65,.3,1), transform .8s cubic-bezier(.2,.65,.3,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1180px) {
  .cap-grid { grid-template-columns: repeat(2, 1fr); max-width: 760px; }
}
@media (max-width: 1180px) {
  .nav-cta { display: none; }
  .nav-toggle { display: block; margin-left: auto; }

  .nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.active span:nth-child(2) { opacity: 0; }
  .nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav-links {
    display: flex;
    position: fixed;
    top: 0; right: 0; bottom: 0;
    height: 100vh;
    width: min(84vw, 360px);
    flex-direction: column;
    align-items: flex-start;
    background: #fff;
    padding: 26px 26px 30px;
    gap: 0;
    box-shadow: -20px 0 50px rgba(10,25,60,.18);
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .4s cubic-bezier(.22,.68,0,1), visibility .4s;
    z-index: 1060;
  }
  .nav-links.open { transform: translateX(0); visibility: visible; }
  .nav-links .nav-link {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 2px;
    border-bottom: 1px solid #EDF0F6;
    color: #12203F;
    font-size: 14px;
    font-weight: 600;
  }
  .nav-links .nav-link.active { color: var(--orange); }
  .nav-links .nav-item-drop { flex-direction: column; align-items: flex-start; width: 100%; }
  .nav-links .nav-item-drop .nav-link { width: 100%; }
  .nav-links .nav-dropdown { display: none; }
  /* drawer footer: CTA button + contact details */
  .nav-cta-mobile {
    display: inline-flex;
    width: 100%;
    justify-content: center;
    margin-top: 28px;
  }
  .nav-drawer-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 22px;
  }
  .nav-drawer-info a {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    color: #35405A;
  }
  .ndi-ico {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
  }
  .nav-drawer-brand { display: block; margin-bottom: 18px; }
  .nav-drawer-brand img { height: 48px; width: auto; display: block; }
  .presence-grid, .contact-grid { grid-template-columns: 1fr; gap: 50px; }
  .presence-grid { min-height: 0; }
  .presence-map { position: static; width: 100%; height: auto; }
  .presence-map img,
  .presence-map .india-map { height: auto; object-fit: contain; }
  .division-card, .division-card--reverse { grid-template-columns: 1fr; }
  .division-card--reverse .division-body { order: 2; }
  .division-media { height: 320px; }
  .news-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  .footer-top { grid-template-columns: 1fr; gap: 40px; }
  .footer-container { padding: 0 16px; }
  .footer-bottom { justify-content: center; text-align: center; }
  .footer-bottom span { width: 100%; }
  .footer-cols { padding-top: 0; }
  .products-head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 720px) {
  .container { padding: 0 22px; }
  .section-title { font-size: 28px; }
  .section-title .grad-italic { font-size: 33px; }
  /* let the gradient-italic accent flow inline right after the preceding word
     (so it doesn't drop to its own line as an inline-block accent unit) */
  .section-title .grad-italic.hl-unit { display: inline; }
  .stats-grid { grid-template-columns: 1fr 1fr; row-gap: 0; }
  .stat:nth-child(3) { border-left: none; }
  /* divider under the first row (below 8+ and 150+), matching the vertical ones */
  .stat:nth-child(1),
  .stat:nth-child(2) { border-bottom: 1px solid #E2E6EF; padding-bottom: 30px; }
  .stat:nth-child(3),
  .stat:nth-child(4) { padding-top: 30px; }
  .about { padding: 60px 0 65px; }
  .about-cards { grid-template-columns: 1fr; }
  .about-card { height: 320px; }
  .cap-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .inquiry-card { padding: 32px 24px; }
  .footer-card { padding: 36px 26px 26px; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .hero-actions { flex-direction: column; flex-wrap: nowrap; gap: 12px; }
  .hero-actions .btn { width: 100%; justify-content: center; }

  /* Featured products on mobile: one product per screen, snap-to-card
     (JS switches to snap mode ≤720px). Nav arrows stay in the header;
     the view-all button drops under the row. */
  .products-inner { padding: 90px 0 70px; }
  .products-head { margin-bottom: 22px; }
  /* One card exactly fills the viewport. The width comes from a JS-set
     --pm-card var (the real .products-viewport width) because 100vw includes
     the scrollbar and overflows the padded container. */
  .products-track { gap: 44px; }
  .product-card { flex: 0 0 var(--pm-card, calc(100vw - 44px)); width: var(--pm-card, calc(100vw - 44px)); }
  .products-section { --product-img-h: 340px; }
  /* smaller arrows + tighter gap so the card keeps most of the screen */
  .products-carousel { gap: 12px; padding: 0; }
  .products-arrow { width: 38px; height: 38px; margin-top: calc(var(--product-img-h) / 2 - 19px); }
  /* let the row be swiped/dragged by touch without hijacking vertical scroll */
  .products-viewport { touch-action: pan-y; cursor: grab; }
  .products-viewport:active { cursor: grabbing; }
  /* header view-all hides; the one under the cards shows */
  /* both children are hidden on mobile (button moved above the slider, arrows
     below it) — hide the wrapper too so its flex gap stops padding the heading */
  .products-head-right { display: none; }
  .products-head-right .btn { display: none; }
  .products-head-right .products-nav { display: none; }
  .products-mobile-top { display: block; margin-bottom: 26px; }

  .commitment { padding: 90px 0; }
  .commitment blockquote { font-size: 24px; line-height: 1.32; margin: 24px auto 30px; }

  /* footer wordmark sits closer to the card on small screens */
  .footer-giant { margin-top: 26px; }
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */

/* --- inner pages: floating rounded white capsule navbar --- */
.navbar.nav-solid {
  background: transparent;
  box-shadow: none;
  padding: 22px 0;
}
.navbar.nav-solid .nav-inner {
  max-width: 1300px;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 12px 34px rgba(10, 25, 60, .12);
  padding: 9px 9px 9px 26px;
  transition: max-width .4s ease, border-radius .4s ease, box-shadow .4s ease, padding .4s ease;
}
/* on scroll the capsule expands into a full-width white bar */
.navbar.nav-solid.scrolled {
  background: #fff;
  box-shadow: 0 4px 24px rgba(10, 25, 60, .10);
  padding: 12px 0;
}
.navbar.nav-solid.scrolled .nav-inner {
  max-width: 100%;
  border-radius: 0;
  box-shadow: none;
  padding: 0 clamp(20px, 3vw, 40px);
}
.navbar.nav-solid .nav-brand-text { color: #1B2A6B; }
.navbar.nav-solid .nav-link { color: #3A4565; }
.navbar.nav-solid .nav-link:hover,
.navbar.nav-solid .nav-link.active { color: #12203F; }
.navbar.nav-solid .nav-logo { display: none; }
.navbar.nav-solid .nav-logo-scrolled { display: block; }
.navbar.nav-solid .nav-toggle span { background: #12203F; }

/* inner pages: keep the rounded capsule on mobile but give it more room so
   the brand text and hamburger aren't squeezed */
@media (max-width: 1180px) {
  .navbar.nav-solid .nav-inner {
    max-width: 94%;
    border-radius: 67px;
    box-shadow: 0 4px 24px rgba(10, 25, 60, .10);
  }
}

.btn-navy { background: var(--blue); color: #fff; }
.btn-ghost {
  background: transparent; color: #fff;
  border: 1px solid rgba(255,255,255,.45);
  padding: 14px 28px;
}

/* --- Hero --- */
.ab-hero {
  position: relative;
  padding: 170px 0 40px;
  text-align: center;
  overflow: hidden;
  background: url('../images/banner_about.min.webp') top center / 100% auto no-repeat;
}
/* translucent earth centered at the top, behind the heading */
.ab-hero::before {
  content: '';
  position: absolute;
  top: -159px;
  left: 50%;
  transform: translateX(-50%);
  width: 660px;
  height: 620px;
  background: url('../images/earth.min.webp') center top / contain no-repeat;
  pointer-events: none;
}
.ab-hero .container { position: relative; z-index: 1; }
.ab-hero h1 {
  font-size: clamp(38px, 4.8vw, 66px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--blue);
}
.ab-hero-sub {
  max-width: 600px;
  margin: 24px auto 34px;
  font-size: 16px;
  line-height: 1.85;
  color: #5A6478;
}
.ab-hero-actions { display: flex; gap: 16px; justify-content: center; margin-bottom: 78px; flex-wrap: wrap; }
.ab-hero-strip {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 26px;
  align-items: stretch;
  /* full-bleed: break out of the container */
  position: relative;
  left: 50%;
  width: calc(100vw - 56px);
  transform: translateX(-50%);
}
.strip-img {
  border-radius: 32px;
  overflow: hidden;
  height: 470px;
  box-shadow: 0 24px 50px rgba(10, 30, 70, .14);
}
.strip-img img { width: 100%; height: 100%; object-fit: cover; }

/* --- Story --- */
.ab-story { padding: 90px 0 30px; text-align: center; }
.ab-story .lead {
  max-width: 660px; margin: 0 auto;
  font-size: 15.5px; line-height: 1.85; color: #5A6478;
}
@media (max-width: 768px) {
  .ab-story { padding: 0px 0 30px; }
}

/* --- Timeline --- */
.ab-timeline { position: relative; max-width: 920px; margin: 80px auto 40px; }
.ab-timeline::before {
  content: '';
  position: absolute; left: 50%; top: 6px; bottom: 6px;
  width: 3px; background: #D1D1D1;
  transform: translateX(-50%);
}
/* animated progress line that fills as the user scrolls the timeline */
.tl-progress {
  position: absolute; left: 50%; top: 6px;
  width: 3px; height: 0;
  background: #27377F;
  transform: translateX(-50%);
  transition: height .25s linear;
  z-index: 1;
}
.tl-item { position: relative; width: 50%; padding: 30px 64px; }
.tl-item.right { left: 50%; text-align: left; }
.tl-item.left  { left: 0;   text-align: left; }
/* items stay visible at all times — the scroll animation drives only the
   progress line and the dot highlights (.in-view via observer) */
.tl-reveal { opacity: 1; }
.tl-dot {
  position: absolute; top: 38px;
  width: 13px; height: 13px; border-radius: 50%;
  background: #D1D1D1;
  box-shadow: 0 0 0 5px #E4ECF7;
  transform: scale(.7);
  transition: background .35s ease, transform .35s ease, box-shadow .35s ease;
  z-index: 2;
}
.tl-reveal.in-view .tl-dot {
  background: #27377F;
  transform: scale(1);
  box-shadow: 0 0 0 5px #E4ECF7;
}
.tl-item.right .tl-dot { left: -7px; }
.tl-item.left  .tl-dot { right: -7px; }
/* title + year on one row with a divider underneath (card style) */
.tl-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 2px solid #C0C0C0;
}
.tl-year {
  font-family: var(--font-mono);
  font-size: 14px; color: #8B97AC;
  flex-shrink: 0;
}
.tl-item h4 { font-size: 24px; font-weight: 700; color: var(--blue); margin: 0; }
.tl-item p  { font-size: 20px; line-height: 1.7; color: #565C67; max-width: 304px; margin: 0; }
/* left-side items keep the same left-to-right card layout */
.tl-item.left { text-align: left; }
.tl-item.left p { margin-left: 0; }

/* --- Vision / Mission collage --- */
.ab-vm { padding: 70px 0 110px; }
.vm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  /* 7 row-units: cards span 3 (fit the 20px text), side images span 4
     (a bit taller than the cards), centre image spans all 7.
     Everything tiles edge-to-edge -> no gaps, no clipped text. */
  grid-template-rows: repeat(7, 64px);
  grid-template-areas:
    "blue  tall  imgc"
    "blue  tall  imgc"
    "blue  tall  imgc"
    "imgd  tall  imgc"
    "imgd  tall  green"
    "imgd  tall  green"
    "imgd  tall  green";
  gap: 20px;
}
.vm-a { grid-area: blue; }   /* VISION card  (top-left)     */
.vm-b { grid-area: tall; }   /* tall centre image           */
.vm-c { grid-area: imgc; }   /* image        (top-right)    */
.vm-d { grid-area: imgd; }   /* image        (bottom-left)  */
.vm-e { grid-area: green; }  /* MISSION card (bottom-right) */
.vm-img { border-radius: 22px; overflow: hidden; }
.vm-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.vm-img:hover img { transform: scale(1.04); }
.vm-card {
  border-radius: 22px;
  padding: 26px 40px 26px 28px;
  color: #fff;
  display: flex; flex-direction: column; justify-content: center;
}
.vm-card .mono-label { color: rgba(255,255,255,.85); margin-bottom: 12px; letter-spacing: 2px; }
.vm-card p { font-size: 18px; line-height: 1.5; font-weight: 300; }
.vm-blue  { background: #2E6FDE; }
.vm-green { background: #1FA971; }

/* --- Core values --- */
.ab-values { position: relative; background: var(--navy-section); padding: 120px 0; color: #fff; overflow: hidden; }
/* concentric-ring pattern anchored to the left edge of the screen */
.ab-values::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 558px; height: 635px;
  transform: translateY(-50%);
  background: url('../images/what_we_stand_for_pattern.svg') left center / contain no-repeat;
  pointer-events: none;
  z-index: 0;
}
/* orange diamonds orbiting the ring pattern (same box as ::before) */
.values-orbits {
  position: absolute;
  left: 0; top: 50%;
  width: 558px; height: 635px;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 0;
}
.orbit {
  position: absolute;
  left: 55px; top: 317px;   /* ring centre inside the pattern box */
  border-radius: 50%;
  animation: orbitSpin linear infinite;
}
.orbit-outer {
  width: 630px; height: 630px;
  margin: -315px 0 0 -315px;
  animation-duration: 34s;
}
.orbit-inner {
  width: 514px; height: 514px;   /* matches the inner dashed ring (r≈257) */
  margin: -257px 0 0 -257px;
  animation-duration: 22s;
  animation-direction: reverse;
}
.orbit i {
  position: absolute;
  top: -5px; left: 50%;
  width: 10px; height: 10px;
  margin-left: -5px;
  background: #F7941D;
  border-radius: 1px;
  transform: rotate(45deg);
  box-shadow: 0 0 12px rgba(247, 148, 29, .85);
}
@keyframes orbitSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .orbit { animation: none; } }
@media (max-width: 720px) { .values-orbits { display: none; } }

.values-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: center; }
.values-left { position: relative; }
.values-left .badge-pill { position: relative; }
.values-left .section-title { position: relative; color: #fff; margin-bottom: 0; }
.values-list { display: grid; grid-template-columns: 1fr 1fr; gap: 46px 56px; }
.value-item { display: flex; flex-direction: column; }
.value-num {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 13px; letter-spacing: 1px;
  color: #F7941D;
  margin-bottom: 14px;
}
.value-diamond {
  width: 9px; height: 9px;
  background: #F7941D;
  transform: rotate(45deg);
  border-radius: 1px;
}
.value-item h5 { font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 10px; }
.value-item p { font-size: 14px; line-height: 1.65; color: rgba(226,235,248,.72); max-width: 260px; }

/* --- Why choose us --- */
.ab-why { position: relative; background: var(--navy-hero); padding: 120px 0; color: #fff; overflow: hidden; }
.ab-why-bg {
  position: absolute; top: 0; right: 0; bottom: 0; width: 58%;
  background-size: cover; background-position: center;
}
.ab-why-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--navy-hero) 0%, rgba(3,19,45,.55) 45%, rgba(3,19,45,.25) 100%);
}
.ab-why .container { position: relative; z-index: 2; }
.ab-why .section-title { color: #fff; }
.why-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 310px)); gap: 18px; margin-top: 44px; }
.why-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 18px;
  padding: 26px 24px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.why-ico {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--orange);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.why-ico img { width: 17px; height: 17px; }
.why-card h5 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.why-card p { font-size: 13px; line-height: 1.65; color: rgba(226,235,248,.72); }

/* --- Capabilities (about) --- */
.ab-caps {
  padding: 90px 0;
  text-align: center;
  background: url('../images/abt_expertise_bg.min.jpg') center / cover no-repeat, #F4F8FE;
}
.caps-box { padding: 0; }
.caps-head { padding-bottom: 40px; margin-bottom: 44px; }
.caps-head .badge-pill { margin: 0 auto 20px; }
.caps-head .section-title { margin-bottom: 20px; }
.ab-caps .lead { max-width: 594px; margin: 0 auto; font-size: 15px; line-height: 1.8; color: #5A6478; }
/* staggered (brick) layout: the second row starts at the half-point of
   the first-row cards. 4 equal columns, each card spans 2; the bottom
   row is shifted one column right so it begins at the mid-point of the
   first-row cards. */
.caps-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 48px; row-gap: 26px;
  max-width: 1200px;
  margin: 0;              /* Figma: brick grid anchored left, open space right */
  text-align: left;
}
/* each card spans 2 of the 5 columns. top row uses cols 1-2 & 3-4;
   bottom row is shifted right by half a card (one column) so it starts
   at the mid-point of the first-row cards: cols 2-3 & 4-5. */
.caps-grid .cap-card2:nth-child(1) { grid-column: 1 / span 2; grid-row: 1; }
.caps-grid .cap-card2:nth-child(2) { grid-column: 3 / span 2; grid-row: 1; }
.caps-grid .cap-card2:nth-child(3) { grid-column: 2 / span 2; grid-row: 2; }
.caps-grid .cap-card2:nth-child(4) { grid-column: 4 / span 2; grid-row: 2; }
.cap-card2 {
  /* glass card (Figma): translucent white + blur, equal size across the grid */
  background: rgba(255, 255, 255, .45);
  border: 1px solid rgba(255, 255, 255, .75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px -18px rgba(15, 30, 70, .18);
  border-radius: 16px;
  padding: 22px 30px;
  min-height: 227px;
  display: flex; flex-direction: column; align-items: flex-start;
  transition: transform .3s ease, box-shadow .3s ease;
}
.cap-card2:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(15, 30, 70, .08); }
.cap-ico2 {
  width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 17px; overflow: hidden;
}
.cap-ico2 img { width: 34px; height: 50px; border-radius: 12px; }
.cap-card2 h5 { font-size: 20px; font-weight: 700; color: #1E1E1F; margin-bottom: 10px; }
.cap-card2 p { font-size: 14px; line-height: 1.7; color: #1E1E1F; }

/* --- Team --- */
.ab-team { padding: 120px 0 90px; text-align: center; }
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 56px; }
.team-card { text-align: left; }
.team-photo { border-radius: 18px; overflow: hidden; height: 300px; background: #EEF3F9; }
.team-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.team-card:hover .team-photo img { transform: scale(1.05); }
.team-card h5 { font-size: 16.5px; font-weight: 700; color: var(--blue); margin: 15px 0 4px; }
.team-card span { font-size: 13px; color: #8B97AC; }

/* --- FAQ --- */
.ab-faq { padding: 40px 0 120px; }
.faq-grid { display: grid; grid-template-columns: 1fr 1.35fr; gap: 80px; align-items: start; }
.faq-left p { font-size: 15px; line-height: 1.8; color: #5A6478; }
.faq-item {
  border: 1px solid #E7ECF4;
  border-radius: 16px;
  background: #fff;
  margin-bottom: 14px;
  overflow: hidden;
  transition: background .3s ease;
}
.faq-item.open { background: #F5FAFD; }
.faq-q {
  width: 100%;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 21px 24px;
  background: none; border: none; cursor: pointer;
  font-family: var(--font-sans);
  font-size: 15.5px; font-weight: 600; text-align: left; color: var(--blue);
}
.faq-ico {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: var(--orange); color: #fff;
  font-size: 18px; font-weight: 500; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .3s ease;
}
.faq-item.open .faq-ico { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.faq-a p { padding: 0 60px 22px 24px; font-size: 14.5px; line-height: 1.75; color: #5A6478; }

/* --- CTA --- */
.ab-cta {
  position: relative;
  background:
    radial-gradient(60% 90% at 50% 120%, rgba(0,189,190,.25) 0%, rgba(1,42,88,0) 70%),
    var(--navy-section);
  padding: 130px 0;
  text-align: center;
  color: #fff;
  overflow: hidden;
}
.ab-cta .section-title { color: #fff; }
.ab-cta p { max-width: 560px; margin: 0 auto 38px; font-size: 15.5px; line-height: 1.85; color: rgba(226,235,248,.85); }
.ab-cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* --- About page responsive --- */
@media (max-width: 1180px) {
  .vm-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: "blue tall" "imgd tall" "imgc green";
    grid-auto-rows: 220px;
  }
  .values-grid { grid-template-columns: 1fr; gap: 50px; }
  .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 660px; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .faq-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 720px) {
  .ab-hero { padding: 140px 0 70px; }
  /* hero images -> swipeable, auto-scrolling slider on mobile */
  .ab-hero-strip {
    display: flex;
    grid-template-columns: none;
    gap: 16px;
    max-width: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;             /* Firefox / Chrome 121+ */
    padding: 4px 20px;
    /* keep the full-bleed break-out from the container */
    width: 100vw;
  }
  .vm-card p { font-size: 16px; line-height: 1.5; font-weight: 300; }
  .ab-hero-strip::-webkit-scrollbar { display: none; }  /* Chrome/Safari */
  .strip-img {
    flex: 0 0 82%;                     /* ~1 image per view, peek of next */
    scroll-snap-align: center;
    height: 380px;
  }
  /* white "Become a Distributor" button needs a border on the white page (mobile) */
  .ab-hero-actions .btn-white { border: 1px solid #D5DBE6; }
  /* timeline -> single left-rail column on mobile */
  .ab-timeline { margin: 40px 0 20px; }
  .ab-timeline::before { left: 7px; top: 8px; bottom: 8px; }
  .tl-progress { left: 7px; top: 8px; }
  .tl-item,
  .tl-item.left,
  .tl-item.right { width: 100%; left: 0; text-align: left; padding: 16px 0 16px 40px; }
  /* dot sits on the left rail for every item */
  .tl-item .tl-dot,
  .tl-item.left .tl-dot,
  .tl-item.right .tl-dot { left: 1px; right: auto; top: 28px; }
  /* reveal slides up (not sideways) on the single column */
  .tl-reveal.left,
  .tl-reveal.right { transform: translateY(24px); }
  .tl-reveal.in-view { transform: translateY(0); }
  .tl-head { gap: 12px; padding-bottom: 10px; margin-bottom: 10px; }
  .tl-item h4 { font-size: 19px; }
  .tl-item p { font-size: 15px; line-height: 1.6; max-width: 100%; }
  .tl-item.left p { margin-left: 0; }
  .vm-grid { grid-template-columns: 1fr; grid-template-rows: auto; grid-auto-rows: 220px; grid-template-areas: "blue" "tall" "imgc" "imgd" "green"; }
  .values-list { grid-template-columns: 1fr; }
  .ab-values::before { width: 340px; height: 560px; opacity: .55; }
  .why-grid { grid-template-columns: 1fr; }
  /* capabilities: one card per row, reset the staggered brick placement */
  .caps-grid { grid-template-columns: 1fr; gap: 18px; }
  .caps-grid .cap-card2:nth-child(1),
  .caps-grid .cap-card2:nth-child(2),
  .caps-grid .cap-card2:nth-child(3),
  .caps-grid .cap-card2:nth-child(4) { grid-column: auto; grid-row: auto; }
  .cap-card2 h5 br { display: none; }
  .team-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .team-photo { height: 220px; }
}

/* ============================================================
   BUTTON HOVER ANIMATIONS (additive only)
   ============================================================ */
.btn { position: relative; overflow: hidden; }

/* shine sweep */
.btn::before {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 55%; height: 100%;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-22deg);
  pointer-events: none;
  opacity: 0;
}
.btn:hover::before { animation: btn-shine .65s ease; }
@keyframes btn-shine {
  0%   { left: -80%; opacity: 1; }
  100% { left: 130%; opacity: 0; }
}

/* arrow circle: brightens and the arrow nudges up-right */
.btn-circle { transition: background .3s ease; }
.btn-circle img { transition: transform .3s ease; }
.btn:hover .btn-circle { background: rgba(255,255,255,.5); }
.btn:hover .btn-circle img { transform: translate(2px, -2px); }

/* hover: swap background & text colour per variant */
.btn { transition: background .3s ease, color .3s ease; }
.btn-orange:hover { background: var(--blue); color: #fff; }
.btn-white:hover { background: var(--orange); color: #fff; }
.btn-white:hover svg { stroke: #fff; }
.btn-white:hover .hand img,
.btn-white:hover .left-icon img { filter: brightness(0) invert(1); }
.btn-navy:hover { background: var(--orange); color: #fff; }
.btn-ghost:hover { background: #fff; color: #12203F; }

/* footer giant text: larger on mobile */
@media (max-width: 720px) {
  .footer-giant { font-size: 9vw; }
}

/* hero badges: mobile only */
@media (max-width: 720px) {
  .hero-badges { display: flex; gap: 10px; flex-wrap: wrap; }
  .stats { padding: 50px 0 0; }
  .mono-label { font-size: 12px; }
  .contact { padding: 60px 0; }
  .badge-pill { font-size: 10px; padding: 10px 12px; gap: 5px; }
}

/* ============================================================
   MOBILE MENU: overlay under drawer, staged animation, blue logo
   ============================================================ */
/* lift the whole header above the dark overlay while the menu is open,
   so the drawer stays clean white (no grey wash) */
body.nav-open .navbar { z-index: 1060; }
.nav-overlay { z-index: 1050; }

/* overlay fades in first (no delay)… */
.nav-overlay { transition: opacity .3s ease, visibility .3s ease; }

/* …then the drawer slides in slightly after; closing has no delay */
@media (max-width: 1180px) {
  .nav-links.open {
    transition-delay: .22s;
  }
}

/* blue logo while the mobile menu is open */
body.nav-open .nav-logo { display: none; }
body.nav-open .nav-logo-scrolled { display: block; }

/* --- mobile drawer: Divisions accordion --- */
@media (max-width: 1180px) {
  .nav-links .nav-dropdown {
    display: none;
    position: static;
    transform: none;
    padding-top: 0;
    visibility: visible;
    pointer-events: auto;
    width: 100%;
  }
  .nav-links .nav-item-drop.open .nav-dropdown { display: block; }
  .nav-links .nav-item-drop.open .nav-dropdown-inner {
    opacity: 1;
    transform: none;
    box-shadow: none;
    background: #F7F9FC;
    border-radius: 12px;
    min-width: 0;
    margin: 6px 0 10px;
    padding: 6px 14px;
  }
  .nav-links .nav-item-drop.open .nav-dropdown-link { padding: 10px 0; }
  .nav-links .nav-dropdown-title { font-size: 13.5px; }
  .nav-links .nav-dropdown-desc { font-size: 12px; }
  .nav-links .nav-item-drop.open .chev { transform: rotate(180deg); }

  /* drawer: the division rows keep their icons; the Abbares / Almet chips
     wrap onto their own line, indented to line up with the row text */
  .nav-links .nav-dropdown-inner { min-width: 0; }
  .nav-links .nav-dd-subs { padding: 0 10px 12px 62px; flex-wrap: wrap; }
  .nav-links .nav-dd-divider { margin: 2px 10px 6px; }
  /* hover-arrow is a mouse affordance — pointless in a touch drawer */
  .nav-links .nav-dd-arrow { display: none; }
}

/* mobile: let About heading & paragraph wrap naturally (ignore desktop <br>) */
@media (max-width: 720px) {
  .about-head .section-title br,
  .about-head .about-sub br { display: none; }
}

/* mobile: presence section — tighter spacing, map centered & fully visible */
@media (max-width: 720px) {
  .presence { padding: 70px 0 0px; }
  .presence-grid { gap: 34px; }
  .presence-map { display: none; }   /* hide the India map on mobile */
}

/* ============================================================
   MOBILE BUTTON FIXES (Galaxy Note 3 class devices, ≤720px)
   ============================================================ */
@media (max-width: 720px) {
  /* buttons must never get squeezed by flex parents */
  .btn { flex-shrink: 0; }

  /* news head: stack heading and button */
  .news-head { flex-direction: column; align-items: stretch; gap: 6px; }
  .news-head .btn { width: 100%; justify-content: center; margin-top: 18px; }

  /* products head CTA full width to match */
  .products-head .btn { width: 100%; justify-content: center; margin-top: 18px; }

  /* hero buttons: consistent height */
  .hero-actions .btn { min-height: 56px; }

  /* division / about CTAs: full width, centered */
  .division-body .btn, .about-head .btn { width: 100%; justify-content: center; margin-top: 14px; }
}

/* mobile: hide the native scrollbar on the products swiper (swipe still works) */
@media (max-width: 720px) {
  .products-viewport { scrollbar-width: none; }
  .products-viewport::-webkit-scrollbar { display: none; }
}

/* mobile: let the commitment quote wrap naturally (ignore desktop <br>) */
@media (max-width: 720px) {
  .commitment blockquote br { display: none; }
}

/* ============================================================
   NEWS PAGE  (scoped under .news-page so it doesn't collide with
   the homepage .hero / .news / .news-card styles)
   ============================================================ */
.news-page { background: #eef2fb; }
.news-page .container { width: 100%; max-width: 1270px; margin: 0 auto; padding: 0 40px; }

/* --- hero --- */
.news-page .hero {
  background: #EEF1FB url('../images/news-banner.min.jpg') center / cover no-repeat;
  padding: 140px 40px 80px;   /* top room for the fixed navbar */
  overflow: hidden;
  min-height: 0;              /* override the home hero's 100vh so the banner sizes to content */
  display: block;
}
.news-page .hero-content { display: flex; justify-content: center; }
.news-page .hero-badge {
  background: #FFFFFFB2;
  display: inline-flex;
  border-radius: 45px;
  padding: 8px 15px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.news-page .badge-dot { background: #00AC7C; height: 8px; width: 8px; border-radius: 50%; }
.news-page .hero-badge span { color: #012854; font-size: 12px; font-weight: 500; letter-spacing: 1px; }
.news-page .hero-title {
  color: rgba(39, 55, 127, 1);
  font-size: 56px;
  font-weight: 400;
  line-height: 1.1;
  text-align: center;
  margin: 0;
}
.news-page .gradient-text {
  background: linear-gradient(20deg, #01AD80, #01BDBE);
  font-size: 60px;
  font-weight: 400;
  font-family: 'Fraunces', serif;
  font-style: italic;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- news grid (self-contained, replaces Bootstrap row/col) --- */
.news-page .news { background: #fff; padding: 90px 0; overflow: hidden; }
.news-page .news .row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 8px;
}
.news-page .col-lg-4 { min-width: 0; }
.news-page .news-card {
  border: 1px solid #E6E8EC;
  width: 100%;
  height: 100%;
  padding: 32px 32px 28px;
  transition: .35s ease;
  display: flex;
  flex-direction: column;
  background: #fff;
}
.news-page .news-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .08);
  border-color: #d7dce7;
}
.news-page .news-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  letter-spacing: 2px;
  font-size: 12px;
  text-transform: uppercase;
}
.news-page .news-title span { color: #5F6269; font-size: 12px; font-weight: 400; }
.news-page .news-card p {
  font-size: 18px;
  line-height: 1.45;
  font-weight: 400;
  color: #1E2746;
  margin: 0 0 40px;
}
.news-page .news-title .dot {
  width: 4px; height: 4px;
  background: #7E8187;
  border-radius: 30%;
  flex-shrink: 0;
}
.news-page .btn-orange {
  align-self: flex-start;
  margin-top: auto;
  background: none;
  color: #F68C31;
  font-size: 14px;
  font-weight: 600;
  padding: 0;
  border-radius: 0;
}
.news-page .btn-orange .btn-text { text-decoration: underline; text-underline-offset: 4px; }
.news-page .btn-orange:hover { transform: none; box-shadow: none; background: none; color: #F68C31; }

/* --- news page responsive --- */
@media (max-width: 1024px) {
  .news-page .news .row { grid-template-columns: repeat(2, 1fr); }
  .news-page .hero-title { font-size: 44px; }
  .news-page .gradient-text { font-size: 46px; }
}
@media (max-width: 720px) {
  .news-page .hero { padding: 120px 22px 56px; }
  .news-page .container { padding: 0 22px; }
  .news-page .hero-title { font-size: 32px; }
  .news-page .gradient-text { font-size: 34px; }
  .news-page .news { padding: 56px 0; }
  .news-page .news .row { grid-template-columns: 1fr; gap: 18px; }
  .news-page .news-card { padding: 26px 24px 24px; }
  .news-page .news-card p { font-size: 16px; margin-bottom: 28px; }
}

/* ---- form validation feedback (shared: home inquiry form) ---- */
.inquiry-form .field-error {
    display: block;
    margin-top: 7px;
    font-family: var(--font-sans);
    font-size: 12.5px;
    color: #D93440;
    min-height: 16px;
}
.inquiry-form input.is-invalid,
.inquiry-form textarea.is-invalid {
    border-color: #D93440 !important;
}
.form-error-summary {
    background: #fdecea;
    color: #b3261e;
    border: 1px solid #f5c6c2;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 14px;
    margin-bottom: 18px;
}
.recaptcha-note {
    margin-top: 12px;
    font-size: 11.5px;
    color: #8a91a0;
    line-height: 1.5;
}
.recaptcha-note a { color: inherit; text-decoration: underline; }


/* ================= DIVISION PICKER MODAL (VIEW ALL PRODUCTS) ================= */
.dv-modal { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 24px 20px; }
.dv-modal[hidden] { display: none; }
.dv-modal-backdrop { position: absolute; inset: 0; background: rgba(3,19,45,.72); backdrop-filter: blur(3px); animation: dvFade .2s ease; }
.dv-modal-dialog {
  position: relative;
  width: min(880px, 100%);
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  background: #fff;
  border-radius: 18px;
  padding: 38px 34px 34px;
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
  animation: dvRise .24s cubic-bezier(.2,.7,.3,1);
}
.dv-modal-close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: #f1f3f7; color: #4a5265;
  font-size: 22px; line-height: 1; cursor: pointer;
  transition: background .18s, color .18s;
}
.dv-modal-close:hover { background: var(--orange); color: #fff; }
.dv-modal-title { margin: 0 0 6px; padding-right: 44px; font-size: clamp(22px, 2.6vw, 30px); color: var(--navy-hero); }
.dv-modal-sub { margin: 0 0 24px; color: #6b7280; font-size: 15px; }
.dv-modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* card: image fills it, text sits on top over a gradient scrim */
.dv-card {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 3 / 4;
  border-radius: 14px; text-decoration: none; color: #fff; background: #0d1b31;
  transition: transform .2s, box-shadow .2s;
}
.dv-card:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(3,19,45,.28); }
.dv-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s; }
.dv-card:hover .dv-card-img { transform: scale(1.06); }
.dv-card-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(3,19,45,.94) 0%, rgba(3,19,45,.78) 32%, rgba(3,19,45,.28) 60%, rgba(3,19,45,.08) 100%);
  transition: opacity .25s;
}
.dv-card:hover .dv-card-scrim { opacity: .92; }
.dv-card-body { position: absolute; left: 0; right: 0; bottom: 0; display: block; padding: 22px 20px 20px; }
.dv-card-name { display: block; font-weight: 700; font-size: 20px; color: #fff; margin-bottom: 6px; }
.dv-card-text { display: block; font-size: 13.5px; color: rgba(255,255,255,.82); line-height: 1.5; margin-bottom: 14px; }
.dv-card-cta {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12px; font-weight: 600; letter-spacing: .07em; color: #fff;
}
.dv-card-cta .btn-circle {
  width: 26px; height: 26px; border-radius: 50%; background: var(--orange);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .2s;
}
.dv-card:hover .dv-card-cta .btn-circle { transform: translate(2px,-2px); }
.dv-card-cta .btn-circle img { width: 11px; height: 11px; filter: brightness(0) invert(1); }

@keyframes dvFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes dvRise { from { opacity: 0; transform: translateY(18px) } to { opacity: 1; transform: none } }

body.dv-modal-open { overflow: hidden; }

@media (max-width: 720px) {
  .dv-modal { padding: 16px 14px; }
  .dv-modal-dialog { padding: 30px 18px 22px; border-radius: 14px; max-height: calc(100dvh - 32px); }
  .dv-modal-title { font-size: 21px; }
  .dv-modal-sub { margin-bottom: 18px; font-size: 14px; }
  .dv-modal-grid { grid-template-columns: 1fr; gap: 14px; }
  .dv-card { aspect-ratio: 16 / 10; }
  .dv-card-body { padding: 18px 16px 16px; }
  .dv-card-name { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .dv-modal-backdrop, .dv-modal-dialog { animation: none; }
  .dv-card, .dv-card-img, .dv-card-scrim, .dv-card-cta .btn-circle { transition: none; }
}

/* ---------- Home inquiry submit loader ---------- */
#homeInquirySubmit { position: relative; }
#homeInquirySubmit .btn-spinner {
  display: none;
  width: 20px;
  height: 20px;
  border: 2.5px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: home-spin .7s linear infinite;
}
#homeInquirySubmit.is-loading { pointer-events: none; opacity: .85; cursor: default; }
#homeInquirySubmit.is-loading .btn-label { opacity: .7; }
#homeInquirySubmit.is-loading .btn-circle { display: none; }
#homeInquirySubmit.is-loading .btn-spinner { display: inline-block; }

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

/* ---------- Generic form submit loader (class-based, works for every form) ----------
   Any submit button that has a .btn-spinner span and gets .is-loading added
   will show the spinner — no per-form ID CSS needed. */
.btn .btn-spinner {
  display: none;
  width: 20px;
  height: 20px;
  border: 2.5px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: home-spin .7s linear infinite;
  vertical-align: middle;
}
.btn.is-loading { position: relative; pointer-events: none; opacity: .85; cursor: default; }
.btn.is-loading .btn-label  { opacity: .7; }
.btn.is-loading .btn-circle { display: none; }
.btn.is-loading .btn-spinner { display: inline-block; }