/* =============================================================
   PathMole Expert Lab: Global Stylesheet
   Brand: navy (#232C8E) + magenta (#EC008C) on white.
   All theme values live in :root, re-theme by editing variables only.
   Sections: 1 Variables · 2 Reset/Base · 3 Typography · 4 Layout ·
   5 Buttons · 6 Top bar · 7 Nav · 8 Hero · 9 Sections/Cards ·
   10 Case studies · 11 CTA band · 12 Footer · 13 Back-to-top ·
   14 Chatbot · 15 Forms/Map · 16 Reveal · 17 Responsive
   ============================================================= */

/* ---------- 1. Variables ---------- */
:root {
  /* BRAND: PathMole letterhead (confirm exact hex from logo vector) */
  --brand-navy:      #232C8E;
  --brand-navy-deep: #1A2270;
  --brand-pink:      #EC008C;
  --brand-pink-deep: #C1006F;

  /* INK / SURFACES */
  --ink-900: #14202B;
  --ink-600: #3B4A57;
  --ink-400: #7A8894;
  --line:    #E6E9F2;
  --surface: #FFFFFF;
  --bg-soft: #F5F7FB;

  /* SEMANTIC aliases: use these in components */
  --accent:      var(--brand-pink);
  --accent-deep: var(--brand-pink-deep);
  --heading:     var(--brand-navy);

  /* TYPE */
  --font-heading: 'Poppins', 'Segoe UI', sans-serif;
  --font-body:    'Inter', Arial, sans-serif;

  /* SHAPE / SPACING */
  --radius: 12px;
  --radius-lg: 20px;
  --maxw: 1160px;
  --shadow-sm: 0 2px 8px rgba(20, 32, 43, .06);
  --shadow-md: 0 12px 30px rgba(20, 32, 43, .10);
  --shadow-lg: 0 24px 60px rgba(26, 34, 112, .16);
  --ring: 0 0 0 3px rgba(236, 0, 140, .30);
}

/* ---------- 2. Reset / Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  color: var(--ink-600);
  background: var(--surface);
  line-height: 1.65;
  font-size: 1rem;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; height: auto; }
a { color: var(--accent); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--accent-deep); }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 6px; }

/* ---------- 3. Typography ---------- */
h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--heading); line-height: 1.2; font-weight: 600; }
h1 { font-size: clamp(2rem, 4.6vw, 3.2rem); font-weight: 700; letter-spacing: -.5px; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.35rem); letter-spacing: -.3px; }
h3 { font-size: 1.2rem; }
p  { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }
.eyebrow {
  display: inline-block; font-family: var(--font-heading); font-weight: 600;
  font-size: .78rem; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--accent); margin-bottom: .6rem;
}
.lead { font-size: 1.12rem; color: var(--ink-600); }
.text-navy { color: var(--brand-navy); }
.text-pink { color: var(--accent); }

/* ---------- 4. Layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem; }
.section { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.section--soft { background: var(--bg-soft); }
.section-head { max-width: 720px; margin: 0 auto 2.6rem; text-align: center; }
.section-head p { color: var(--ink-600); margin-top: .5rem; }
.grid { display: grid; gap: 1.5rem; }
.grid > * { min-width: 0; } /* let grid children shrink below content min-size (e.g. video intrinsic width) so single-column mobile never overflows */
.center { text-align: center; }

/* ---------- 5. Buttons ---------- */
.btn-primary, .btn-secondary, .btn-ghost {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-heading); font-weight: 600; font-size: .98rem;
  padding: .8rem 1.5rem; border-radius: 999px; transition: all .2s ease;
  white-space: nowrap; cursor: pointer;
}
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 8px 20px rgba(236,0,140,.28); }
.btn-primary:hover { background: var(--accent-deep); color: #fff; transform: translateY(-2px); }
.btn-secondary { background: #fff; color: var(--brand-navy); border: 2px solid var(--brand-navy); }
.btn-secondary:hover { background: var(--brand-navy); color: #fff; transform: translateY(-2px); }
.btn-ghost { color: var(--brand-navy); padding-left: 0; padding-right: 0; }
.btn-ghost:hover { color: var(--accent); gap: .75rem; }
.btn-primary.on-navy { background: #fff; color: var(--brand-navy); box-shadow: none; }
.btn-primary.on-navy:hover { background: var(--bg-soft); }
.btn-secondary.on-navy { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn-secondary.on-navy:hover { background: #fff; color: var(--brand-navy); }
.cta-pair { display: flex; flex-wrap: wrap; gap: .9rem; }

/* ---------- 6. Top bar ---------- */
.top-bar {
  position: sticky; top: 0; z-index: 101;
  background: linear-gradient(90deg, var(--brand-navy-deep) 0%, var(--brand-navy) 100%);
  color: rgba(255,255,255,.9); font-size: .85rem; border-bottom: 1px solid rgba(255,255,255,.08);
}
.top-bar a { color: rgba(255,255,255,.9); transition: color .2s ease; }
.top-bar a:hover { color: #fff; }
/* padding-block gives the row breathing room top and bottom: without it, when the
   utility bar wraps (e.g. the Call Now / WhatsApp pills drop to a second line on
   narrower laptops/tablets), that line sits flush against the bottom edge and visually
   touches the nav bar docked directly below. A tighter row-gap keeps the wrapped lines
   compact. Vertical padding only (padding-block) so .container's 1.25rem sides stay. */
.top-bar-inner { display: flex; align-items: center; gap: .45rem 1.3rem; min-height: 42px; flex-wrap: wrap; padding-block: .5rem; }
.top-bar-item { display: inline-flex; align-items: center; gap: .4rem; }
.top-bar-item.hours {
  color: rgba(255,255,255,.72); font-weight: 500; letter-spacing: .012em;
  font-variant-numeric: tabular-nums;
}
.top-bar-item.hours::before {
  content: ""; flex: none; width: 1em; height: 1em; opacity: .85;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5V12l3 1.8'/%3E%3C/svg%3E") center/contain no-repeat;
}
.top-bar-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .55rem; margin-left: auto; }
.top-bar-cta {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .4rem 1.05rem; border-radius: 999px; font-weight: 600; font-size: .78rem; letter-spacing: .01em;
  line-height: 1; color: #fff; border: 1px solid transparent; white-space: nowrap;
  transition: background .22s ease, border-color .22s ease, color .22s ease, transform .18s ease, box-shadow .22s ease, filter .22s ease;
}
.top-bar-cta:hover { transform: translateY(-1px); }
/* Call: frosted-glass pill that reads as primary on the navy bar */
.top-bar-cta:not(.wa):not(.top-bar-reports) {
  background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.32);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.top-bar-cta:not(.wa):not(.top-bar-reports):hover {
  background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 6px 16px -6px rgba(0,0,0,.45);
}
/* WhatsApp: brand green with soft glow */
.top-bar-cta.wa {
  background: linear-gradient(135deg, #2ED66B 0%, #17A64C 100%); color: #fff;
  border-color: rgba(255,255,255,.3);
  box-shadow: 0 5px 16px -6px rgba(37,211,102,.6), inset 0 1px 0 rgba(255,255,255,.28);
}
.top-bar-cta.wa::before {
  content: ""; flex: none; width: 1.05em; height: 1.05em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.29.173-1.414-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.885-9.885 9.885M20.52 3.449C18.24 1.245 15.24 0 12.045 0 5.463 0 .104 5.359.101 11.945c0 2.096.547 4.142 1.588 5.945L0 24l6.335-1.652a11.882 11.882 0 005.71 1.454h.005c6.582 0 11.941-5.359 11.944-11.945a11.86 11.86 0 00-3.495-8.406z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.top-bar-cta.wa:hover { color: #fff; filter: brightness(1.05); box-shadow: 0 8px 20px -6px rgba(37,211,102,.78), inset 0 1px 0 rgba(255,255,255,.32); }
/* Reports: magenta accent gradient pill. Self-contained button styling because the
   markup carries only `.top-bar-reports` (no `.top-bar-cta` base), so it must define
   its own shape/padding here or it renders as a flat coloured box. */
.top-bar-reports {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .42rem 1.1rem; border-radius: 999px; line-height: 1; white-space: nowrap;
  font-weight: 600; font-size: .78rem; letter-spacing: .015em;
  color: #fff; border: 1px solid rgba(255,255,255,.25);
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
  box-shadow: 0 4px 14px -5px rgba(236,0,140,.6), inset 0 1px 0 rgba(255,255,255,.22);
  transition: transform .18s ease, box-shadow .22s ease, filter .22s ease, border-color .22s ease;
}
.top-bar-reports:hover {
  color: #fff; transform: translateY(-1px); filter: brightness(1.06);
  border-color: rgba(255,255,255,.5);
  box-shadow: 0 8px 20px -6px rgba(236,0,140,.85), inset 0 1px 0 rgba(255,255,255,.3);
}
.top-bar-reports:active { transform: translateY(0); box-shadow: 0 3px 10px -5px rgba(236,0,140,.7); }

/* ---------- 7. Nav ---------- */
.site-nav {
  /* Dock flush beneath the sticky top bar. main.js measures the bar's real height into
     --topbar-h on every screen (and on resize/orientation/fonts-ready), so when the bar
     wraps taller than 42px the nav follows it instead of overlapping. 42px is the no-JS
     fallback (the bar's single-row height). */
  position: sticky; top: var(--topbar-h, 42px); z-index: 100;
  background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line); transition: box-shadow .25s ease, background .25s ease;
}
.site-nav.scrolled { background: rgba(255,255,255,.94); box-shadow: 0 6px 24px rgba(15,20,60,.09); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; min-height: 80px; transition: min-height .25s ease; }
.site-nav.scrolled .nav-inner { min-height: 70px; }
.nav-logo img { height: 58px; width: auto; transition: height .25s ease; }
.site-nav.scrolled .nav-logo img { height: 50px; }
/* Larger nav logo on laptops and up; phones/tablets unchanged (footer bump below) */
@media (min-width: 1024px) {
  .nav-logo img { height: 72px; }
  .site-nav.scrolled .nav-logo img { height: 62px; }
}
.nav-links { display: flex; align-items: center; gap: 1.6rem; }
.nav-links a {
  font-family: var(--font-heading); font-weight: 600; font-size: .82rem; letter-spacing: .6px;
  color: var(--brand-navy); text-transform: uppercase; position: relative; padding: .35rem .1rem;
  white-space: nowrap; transition: color .2s ease;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -3px; height: 2px; width: 0; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--brand-navy)); transition: width .25s ease;
}
.nav-links a:hover, .nav-links a.active { color: var(--accent); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
/* Tablets, small laptops and landscape phones (769–1023px): the full 7-link nav
   still shows here (the hamburger only kicks in at <=768px), so scale the link
   spacing and type fluidly to keep every label, including "PARTNER WITH US", on a
   single line beside the logo without crowding it. */
@media (min-width: 769px) and (max-width: 1023px) {
  .nav-links { gap: clamp(.8rem, 1.7vw, 1.5rem); }
  .nav-links a { font-size: clamp(.76rem, 1.35vw, .82rem); letter-spacing: .3px; }
}
.menu-toggle { display: none; width: 44px; height: 44px; color: var(--brand-navy); }
.menu-toggle svg { width: 28px; height: 28px; }
.mobile-menu { display: none; border-top: 1px solid var(--line); background: #fff; }
.mobile-menu ul { padding: .5rem 0; }
.mobile-menu a {
  display: block; padding: .85rem 1.25rem; font-family: var(--font-heading); font-weight: 600;
  font-size: .9rem; color: var(--brand-navy); border-bottom: 1px solid var(--bg-soft);
}
.mobile-menu a:hover { background: var(--bg-soft); color: var(--accent); }
.mobile-menu.open { display: block; }

/* ---------- 8. Hero ---------- */
.hero { position: relative; background: var(--brand-navy); color: #fff; overflow: hidden;
  display: flex; align-items: center; min-height: 86vh; min-height: 86dvh; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; }
/* Mobile-first: strong vertical scrim keeps full-width text readable over bright footage */
.hero-media-overlay { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(26,34,112,.86) 0%, rgba(26,34,112,.68) 50%, rgba(26,34,112,.84) 100%); }
@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } }
/* Portrait tablets (e.g. iPad 768): taller hero, but keep a balanced horizontal
   scrim so the right side of the video isn't washed out at this narrow width */
@media (min-width: 768px) {
  .hero { min-height: min(84vh, 760px); }
  .hero-media-overlay { background: linear-gradient(90deg, rgba(26,34,112,.92) 0%, rgba(26,34,112,.82) 50%, rgba(26,34,112,.62) 100%); }
}
/* Wide screens: lighter right side lets more of the equipment footage show.
   Also cap the hero shorter here, on laptops 84vh leaves a lot of empty navy
   below the copy and makes the page feel like a long scroll past the fold. */
@media (min-width: 1024px) {
  .hero { min-height: min(64vh, 560px); }
  /* Trim the hero's own vertical padding on desktop, the clamp() maxes at ~104px
     top+bottom, which is what pushed the hero past a single laptop screen. */
  .hero-inner { padding-block: clamp(2.25rem, 3.5vw, 3.5rem); }
  .hero-media-overlay { background: linear-gradient(90deg, rgba(26,34,112,.94) 0%, rgba(26,34,112,.8) 45%, rgba(35,44,142,.4) 100%); }
}
.hero::before { /* magenta diagonal accent (chevron motif) */
  content: ""; position: absolute; top: 0; right: 0; width: 42%; height: 100%;
  background: linear-gradient(135deg, var(--brand-pink) 0%, var(--brand-navy-deep) 78%);
  clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%); opacity: .55; pointer-events: none;
}
.hero::after { /* faint watermark ring */
  content: ""; position: absolute; right: -60px; bottom: -80px; width: 380px; height: 380px;
  border: 40px solid rgba(255,255,255,.05); border-radius: 50%; pointer-events: none;
}
/* padding-block only, keeps the container's horizontal gutter so hero text
   never sits flush against the screen edge on phones/tablets */
/* Full container width so the text block left-aligns with the nav/logo instead of
   being centered in the viewport; line length is capped on the elements below. */
.hero-inner { position: relative; z-index: 2; padding-block: clamp(3.5rem, 8vw, 6.5rem); text-align: left; }
.hero h1 { color: #fff; max-width: 720px; }
/* ── Hero accent colour ──────────────────────────────────────────────────
   The eyebrow + the highlighted phrase in the headline both use this ONE
   variable. To try a different colour, change the value below and refresh.
   Some options to paste in:
     #EC008C  brand magenta      #F5B301  gold / amber
     #37C6E0  cyan / sky         #35C79A  soft teal
     #FFC24B  warm honey         #FFFFFF  plain white
------------------------------------------------------------------------- */
.hero { --hero-accent: #4DA8FF; }
.hero .hero-eyebrow { color: var(--hero-accent); opacity: 1; text-shadow: 0 1px 8px rgba(10,14,45,.55); }
.hero h1 .text-pink { color: var(--hero-accent); text-shadow: 0 2px 14px rgba(10,14,45,.5); }
.hero .hero-sub { font-size: 1.15rem; color: rgba(255,255,255,.9); margin: 1.1rem 0 1.8rem; max-width: 600px; }
.hero .tagline { font-family: var(--font-heading); font-style: italic; color: #fff; font-weight: 500; opacity: .95; margin-top: 1.6rem; }
.hero .cta-pair .btn-primary { background: #fff; color: var(--brand-navy); box-shadow: var(--shadow-md); }
.hero .cta-pair .btn-primary:hover { background: var(--bg-soft); }
.hero .cta-pair .btn-secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.hero .cta-pair .btn-secondary:hover { background: #fff; color: var(--brand-navy); }

/* ---------- 9. Sections / Cards ---------- */
/* News strip */
.news-strip { position: relative; border-bottom: 1px solid var(--line); }
.news-strip-inner { display: flex; align-items: center; gap: 1rem; padding: .7rem 0; font-size: .9rem; }
.news-tag { display: inline-flex; align-items: center; gap: .3rem; vertical-align: middle; margin-right: .55rem;
  background: linear-gradient(100deg, var(--accent), var(--accent-deep)); color: #fff;
  font-family: var(--font-heading); font-weight: 600; font-size: .72rem; letter-spacing: .5px;
  text-transform: uppercase; padding: .5rem 1.5rem; transform-origin: center;
  clip-path: polygon(13% 20%, 33% 0%, 50% 20%, 67% 0%, 87% 20%, 100% 33%, 87% 50%, 100% 67%, 87% 80%, 67% 100%, 50% 80%, 33% 100%, 13% 80%, 0% 67%, 13% 50%, 0% 33%);
  animation: news-tag-pulse 2.4s ease-in-out infinite; }
.news-star { width: .9em; height: .9em; flex: none; animation: news-star-twinkle 2.4s ease-in-out infinite; }
@keyframes news-tag-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
@keyframes news-star-twinkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: .9; }
  50%      { transform: scale(1.25) rotate(15deg); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .news-tag, .news-star { animation: none; }
}
.news-text { flex: 1; min-width: 0; text-align: left; background: none; border: 0; cursor: pointer;
  font: inherit; color: var(--ink-900); padding: 0; line-height: 1.5; }
.news-copy { transition: opacity .4s ease; }
.news-text:hover .news-copy { color: var(--accent); }
.news-strip.is-swapping .news-copy { opacity: 0; }
.news-all { display: inline-flex; align-items: center; gap: .35rem; flex: none;
  font-family: var(--font-heading); font-weight: 600; font-size: .8rem; color: var(--brand-navy);
  background: #fff; border: 0; border-radius: 999px; cursor: pointer;
  padding: .4rem .95rem; white-space: nowrap;
  transition: color .2s ease, background .2s ease, box-shadow .2s ease; }
.news-all::after { content: "\2192"; transition: transform .2s ease; }
.news-all:hover, .news-all[aria-expanded="true"] { color: #fff; background: var(--accent);
  box-shadow: 0 4px 14px rgba(236, 0, 140, .28); }
.news-all:hover::after { transform: translateX(3px); }
/* "See all updates" popup (page-level modal) */
.news-modal[hidden] { display: none; }
.news-modal { position: fixed; inset: 0; z-index: 1200; display: flex;
  align-items: center; justify-content: center; padding: 1.2rem; }
.news-modal-backdrop { position: absolute; inset: 0; background: rgba(20, 32, 43, .55);
  backdrop-filter: blur(2px); animation: news-fade .2s ease; }
.news-modal-box { position: relative; width: 100%; max-width: 540px; max-height: 82vh; overflow-y: auto;
  background: #fff; border-radius: 16px; padding: 1.1rem 1.5rem 1.5rem;
  box-shadow: 0 30px 70px rgba(20, 32, 43, .3); animation: news-pop .22s ease; }
.news-modal-head { display: flex; align-items: center; gap: .8rem;
  border-bottom: 1px solid var(--line); padding-bottom: .7rem; margin-bottom: .3rem; }
.news-modal-x { margin-left: auto; background: none; border: 0; cursor: pointer;
  color: var(--ink-400); font-size: 1.6rem; line-height: 1; padding: 0 .2rem; }
.news-modal-x:hover { color: var(--ink-900); }
.news-panel-head { font-family: var(--font-heading); font-weight: 600; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .04em; color: var(--ink-400); margin: 0; }
#news-list { list-style: none; margin: .3rem 0 0; padding: 0; }
#news-list li { border-top: 1px solid var(--line); }
#news-list li:first-child { border-top: 0; }
#news-list li a { display: flex; align-items: baseline; gap: .8rem; margin: 0;
  padding: .85rem .7rem; border-radius: 10px; color: var(--ink-900); font-weight: 500; font-size: .92rem;
  transition: background .2s ease, color .2s ease; }
#news-list li a:hover { background: var(--bg-soft); color: var(--accent); }
#news-list .news-item-cta { margin-left: auto; font-family: var(--font-heading);
  font-weight: 600; font-size: .82rem; color: var(--accent); white-space: nowrap; transition: transform .2s ease; }
#news-list li a:hover .news-item-cta { transform: translateX(3px); }
@keyframes news-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes news-pop { from { opacity: 0; transform: translateY(12px) scale(.98); }
  to { opacity: 1; transform: none; } }
body.news-open { overflow: hidden; }
/* Announcement strip: responsive */
@media (max-width: 768px) {
  .news-strip-inner { gap: .55rem; padding: .6rem 0; font-size: .85rem; }
  .news-tag { padding: .45rem 1.2rem; font-size: .68rem; }
  .news-all { font-size: .78rem; }
}
@media (max-width: 600px) {
  /* [★ New + text] as one block on top, [See all updates] pill on its own line. */
  .news-strip-inner { flex-wrap: wrap; gap: .55rem; padding: .6rem 0; }
  .news-text { flex: 1 1 100%; font-size: .84rem; line-height: 1.5; }
  .news-all  { align-self: flex-start; }
  /* smaller "New" badge on phones */
  .news-tag { font-size: .6rem; padding: .34rem .85rem; margin-right: .45rem; }
}
@media (max-width: 480px) {
  .news-tag { font-size: .58rem; padding: .3rem .75rem; }
  .news-modal { padding: .9rem; align-items: flex-start; }
  /* Contain the popup and scroll the whole box; pin the header on top. */
  .news-modal-box { padding: 0 1.1rem 1.2rem; border-radius: 14px;
    max-height: min(70vh, 440px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .news-modal-head { position: sticky; top: 0; background: #fff; z-index: 1;
    margin-bottom: 0; padding-top: 1rem; }
  #news-list li a { flex-wrap: wrap; gap: .15rem .6rem; font-size: .88rem; }
  #news-list .news-item-cta { margin-left: auto; }
}

/* Card base: finish referenced from drarpangandhi.com's .blog-card (soft two-layer
   shadow, lift + deeper shadow on hover, a top accent bar that reveals on hover, and
   the title shifting to the accent). Re-skinned to PathMole's navy/magenta palette. */
.card {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.8rem;
  box-shadow: 0 1px 3px rgba(20, 32, 43, .06), 0 6px 20px rgba(20, 32, 43, .06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  height: 100%;
}
/* Top accent bar: hidden until hover, then wipes in as a magenta→navy gradient */
.card::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--brand-pink) 0%, var(--brand-navy) 100%);
  transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
}
.card:hover {
  transform: translateY(-4px); border-color: #D3DAEE;
  box-shadow: 0 4px 12px rgba(20, 32, 43, .10), 0 20px 48px rgba(26, 34, 112, .13);
}
.card:hover::after { transform: scaleX(1); }
.card h3 { transition: color .2s ease; }
.card:hover h3 { color: var(--brand-pink); }
/* Unified icon tile: a single magenta→navy gradient tile is used site-wide so every
   card icon reads the same (this replaces the old pale-pink base + the navy-tinted
   service variant, both of which made the tiles feel inconsistent page-to-page). */
.card-icon {
  width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand-pink) 0%, var(--brand-navy) 115%);
  color: #fff; margin-bottom: 1.1rem;
}
.card-icon svg { width: 28px; height: 28px; }
.card h3 { margin-bottom: .5rem; }
.card p { font-size: .96rem; }
.card .btn-ghost { margin-top: 1rem; }

/* Services (2–4 discipline cards) */
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Why section: the flat #F5F7FB band left white cards barely visible. Deepen the
   band and give the cards a defined navy-tinted edge/shadow. (Icon tiles now use the
   shared gradient defined on .card-icon above.) */
#why.section--soft { background: linear-gradient(180deg, #EDF0FA 0%, #E4EAF6 100%); }
#why .card { border-color: #D3DAEE; box-shadow: 0 10px 30px rgba(26, 34, 112, .09); }
#why .card:hover { box-shadow: 0 16px 40px rgba(26, 34, 112, .17); }

/* Philosophy headline: bigger, bolder, two-line with a magenta second line for impact */
#philosophy .philosophy-h2 {
  font-size: clamp(1.8rem, 3.9vw, 2.85rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.6px;
}
#philosophy .philosophy-h2 span { color: var(--accent); }
#philosophy .section-head p:first-of-type { font-size: 1.12rem; }

/* Trust bar */
.trust-bar { background: var(--brand-navy); color: #fff; }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; text-align: center; }
.trust-num { font-family: var(--font-heading); font-weight: 700; font-size: 2.2rem; color: #fff; }
.trust-label { font-size: .88rem; color: rgba(255,255,255,.8); }
.trust-note { text-align: center; color: rgba(255,255,255,.55); font-size: .8rem; margin-top: 1.6rem; }

/* Testimonials */
.quote-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.8rem; box-shadow: var(--shadow-sm); height: 100%; }
.quote-card p { font-size: 1.02rem; color: var(--ink-900); font-style: italic; }
.quote-mark { font-family: var(--font-heading); font-size: 2.6rem; color: var(--accent); line-height: 1; }
.quote-by { margin-top: 1rem; font-family: var(--font-heading); font-weight: 600; color: var(--brand-navy); font-style: normal; }
.quote-by span { display: block; font-weight: 400; font-size: .85rem; color: var(--ink-400); font-family: var(--font-body); }

/* ---------- 10. Case studies ---------- */
.case-grid { grid-template-columns: repeat(3, 1fr); }
.case-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .25s ease, box-shadow .25s ease; height: 100%; display: flex; flex-direction: column; }
.case-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.case-thumb { position: relative; aspect-ratio: 16/9; background: linear-gradient(135deg, var(--brand-navy), var(--brand-pink)); display: grid; place-items: center; color: rgba(255,255,255,.85); flex-shrink: 0; overflow: hidden; }
.case-body { padding: 1.4rem; display: flex; flex-direction: column; flex: 1; }
.case-tag { font-family: var(--font-heading); font-weight: 600; font-size: .72rem; letter-spacing: .5px; text-transform: uppercase; color: var(--accent); }
/* Fixed 2-line title block so every card aligns to the same height */
.case-body h3 { margin: .4rem 0 .5rem; font-size: 1.08rem; line-height: 1.3; min-height: 2.8em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Fixed 3-line teaser block: clamp long copy AND reserve the full height for short
   copy, so the meta line lands at the same spot and every card is identical. */
.case-body p { margin: 0; line-height: 1.5; height: 4.5em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.case-meta { margin-top: auto; padding-top: .9rem; font-size: .82rem; color: var(--ink-400); }
.case-thumb svg { color: rgba(255, 255, 255, .9); }
/* Photo/diagram banner inside the card thumb. All banners are landscape, so use
   `cover` to fill the 16:9 frame edge-to-edge, every card banner is then the exact
   same size, with only minor cropping. */
/* Absolutely positioned so a large source image can't grow the grid row and
   override the 16:9 aspect-ratio, every thumb is then the exact same height. */
.case-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

/* ---------- Case scroller (horizontal carousel) ---------- */
.case-scroller { position: relative; }
.case-scroller .scroller-track {
  display: flex; align-items: stretch; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; padding: .5rem .35rem 1rem; margin: 0 -.35rem;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.case-scroller .scroller-track::-webkit-scrollbar { display: none; }
.case-scroller .scroller-track > .case-card { flex: 0 0 clamp(260px, 31%, 340px); scroll-snap-align: start; }
/* Cards live in a horizontally scrolling track, so keep them visible regardless
   of the vertical scroll-reveal state (which would otherwise fade off-axis cards). */
.case-scroller .scroller-track > .case-card.reveal { opacity: 1; transform: none; }
.scroller-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line);
  background: #fff; color: var(--brand-navy); box-shadow: var(--shadow-md);
  display: grid; place-items: center; cursor: pointer;
  transition: background .2s ease, color .2s ease, opacity .2s ease;
}
.scroller-arrow svg { width: 22px; height: 22px; }
.scroller-arrow:hover { background: var(--brand-navy); color: #fff; }
.scroller-arrow.prev { left: -8px; }
.scroller-arrow.next { right: -8px; }
.scroller-arrow[disabled] { opacity: 0; pointer-events: none; }
@media (max-width: 900px) {
  .case-scroller .scroller-track > .case-card { flex-basis: 82%; }
  .scroller-arrow { display: none; }
}

/* Research & References: clickable reference cards + per-reference explainer pages */
.ref-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.ref-card p { color: var(--ink-600); }
.ref-more { margin-top: auto; padding-top: 1.05rem; font-weight: 600; font-size: .85rem; color: var(--brand-pink); display: inline-flex; align-items: center; gap: .4rem; transition: gap .2s ease; }
.ref-card:hover .ref-more { gap: .7rem; }
.ref-lead { display: flex; align-items: center; gap: 1.15rem; margin-bottom: 2rem; padding-bottom: 1.7rem; border-bottom: 1px solid var(--line); }
.ref-lead .card-icon { margin-bottom: 0; flex-shrink: 0; }
.ref-lead-text { margin: 0; font-size: 1.12rem; line-height: 1.55; font-weight: 500; color: var(--ink-900); }
/* Real photographic / diagram figure inside an explainer page */
.case-figure { margin: 2.2rem auto; max-width: 460px; text-align: center; }
.case-figure img { width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--line); box-shadow: var(--shadow-sm); display: block; }
.case-figure figcaption { margin-top: .8rem; font-size: .85rem; color: var(--ink-400); line-height: 1.55; text-align: left; }
/* Floated variant: article text wraps alongside the image */
.case-figure--float { float: right; max-width: 320px; margin: .4rem 0 1.2rem 1.9rem; }
/* Facility photo in the About "Our story" row */
.about-figure { margin: 0 auto; max-width: 420px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-md); background: #fff; transition: transform .3s ease, box-shadow .3s ease; }
.about-figure img { width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; display: block; transition: transform .6s ease; }
.about-figure:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.about-figure:hover img { transform: scale(1.05); }
.about-figure figcaption { padding: 1.4rem; font-size: .9rem; color: var(--ink-600); line-height: 1.6; }
.about-figure figcaption strong { color: var(--brand-navy); font-family: var(--font-heading); display: block; margin-bottom: .2rem; font-size: 1rem; }
.about-figure figcaption p { margin: 0; }
@media (max-width: 640px) { .case-figure--float { float: none; max-width: 420px; margin: 1.8rem auto; } }
/* Contain the float so the disclaimer and the next section clear it */
.ref-detail::after { content: ""; display: block; clear: both; }
.ref-detail .notice { clear: both; }
/* Premium decorative illustration floated alongside the Key points block */
.case-art { margin: 0; }
.case-art svg { width: 100%; height: auto; display: block; }
.case-art--float { float: right; width: 300px; max-width: 46%; margin: .3rem 0 1.4rem 2rem; }
@media (max-width: 640px) { .case-art--float { float: none; width: auto; max-width: 360px; margin: 1.4rem auto 1.8rem; } }
/* Alternating illustrated rows on each explainer page (text on one side, art on the other) */
.ref-row { display: grid; grid-template-columns: 1fr 1fr; gap: 2.8rem; align-items: center; margin: 2.6rem 0; }
.ref-row__art { min-width: 0; }
.ref-row__art svg { width: 100%; height: auto; max-width: 100%; display: block; border-radius: var(--radius-lg); background: var(--bg-soft); }
/* Real photo in place of an illustration inside a row's art cell */
.ref-row__art .case-figure { margin: 0; max-width: none; }
.ref-row__art .case-figure img { width: 100%; }
.ref-row__text h2 { font-size: 1.18rem; margin: 0 0 .6rem; padding: 0; border: 0; }
.ref-row__text p { margin: 0; color: var(--ink-600); }
@media (min-width: 768px) {
  /* flip the alternate row so the illustration sits on the opposite side */
  .ref-row--alt .ref-row__art { order: -1; }
}
@media (max-width: 767px) {
  /* stack the row and keep the illustration a centred, capped card */
  .ref-row { grid-template-columns: 1fr; gap: 1.3rem; margin: 2rem 0; }
  .ref-row__art { width: 100%; max-width: 380px; margin-inline: auto; }
}
.ref-detail h2 { font-size: 1.18rem; margin: 1.9rem 0 .55rem; }
.ref-detail h2:first-child { margin-top: 0; }
.ref-detail p { color: var(--ink-600); }
.ref-detail .tick-list { margin-top: .35rem; }

/* ---------- 11. CTA band ---------- */
.cta-band { position: relative; background: var(--brand-navy); color: #fff; overflow: hidden; }
.cta-band::before { content: ""; position: absolute; left: 0; bottom: 0; width: var(--line-fill, 45%); height: 6px; background: var(--accent); transition: width .08s linear; }
@media (prefers-reduced-motion: reduce) { .cta-band::before { width: 100%; transition: none; } }
.cta-band .container { position: relative; z-index: 2; text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.85); max-width: 560px; margin: .8rem auto 1.8rem; }
.cta-band .cta-pair { justify-content: center; }

/* ---------- 12. Footer ---------- */
.site-footer { background: var(--brand-navy-deep); color: rgba(255,255,255,.75); padding: 3.5rem 0 0; font-size: .92rem; }
.footer-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 2rem; padding-bottom: 2.5rem; }
.footer-brand img { height: 44px; width: auto; background: #fff; padding: .4rem .6rem; border-radius: 10px; margin-bottom: 1rem; }
@media (min-width: 1024px) { .footer-brand img { height: 56px; } }
/* Footer logo link: wraps the logo so it returns home like the nav logo. Tight,
   image-sized click target with a subtle hover lift (spacing moved off the img). */
.footer-logo { display: inline-block; margin-bottom: 1rem; border-radius: 10px; transition: opacity .2s ease, transform .2s ease; }
.footer-logo img { margin-bottom: 0; display: block; }
.footer-logo:hover { opacity: .92; transform: translateY(-1px); }
.footer-logo:focus-visible { outline: 2px solid var(--brand-pink); outline-offset: 3px; }
.footer-brand p { font-size: .88rem; color: rgba(255,255,255,.6); }
.footer-col h4 { color: #fff; font-size: .82rem; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 1rem; }
.footer-col a { display: block; color: rgba(255,255,255,.72); padding: .28rem 0; }
.footer-col a:hover { color: var(--accent); }
.footer-contact p { margin-bottom: .6rem; color: rgba(255,255,255,.72); }
/* Contact links sit inline with their icon (override the block link-list style above) */
.footer-contact a { display: inline; padding: 0; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding: 1.2rem 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.footer-copy { font-size: .84rem; color: rgba(255,255,255,.6); }
.footer-social { display: flex; gap: .8rem; }
.footer-social a { color: rgba(255,255,255,.7); }
.footer-social a:hover { color: var(--accent); }
.footer-social svg { width: 20px; height: 20px; }
.dev-credit { background: #12184f; text-align: center; padding: .7rem 1rem; font-size: .82rem; }
.dev-credit a { color: rgba(255,255,255,.7); }
.dev-credit a:hover { color: #fff; }

/* ---------- 13. Back-to-top ---------- */
.back-to-top {
  position: fixed; right: 20px; bottom: 90px; z-index: 90; width: 46px; height: 46px; border-radius: 50%;
  background: var(--brand-navy); color: #fff; display: grid; place-items: center; box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(10px); transition: all .25s ease;
}
.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--accent); }
.back-to-top svg { width: 22px; height: 22px; }

/* ---------- 13b. Floating "Back" button (previous page) ---------- */
.back-page {
  position: fixed; left: 22px; bottom: 24px; z-index: 90;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .62rem 1rem .62rem .82rem; border: 0; border-radius: 999px;
  font-family: var(--font-heading); font-weight: 600; font-size: .9rem; letter-spacing: .01em;
  color: #fff; text-decoration: none; cursor: pointer;
  background: linear-gradient(150deg, var(--brand-navy) 0%, var(--brand-navy-deep) 100%);
  box-shadow: 0 0 0 3px #fff, 0 10px 24px rgba(15,20,60,.28), 0 3px 8px rgba(15,20,60,.2);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .3s ease, transform .3s cubic-bezier(.2,.8,.2,1),
              box-shadow .25s ease, background .25s ease;
}
.back-page.show { opacity: 1; visibility: visible; transform: translateY(0); }
.back-page:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 0 3px #fff, 0 16px 30px rgba(15,20,60,.34), 0 5px 12px rgba(15,20,60,.24);
}
.back-page:hover .back-page-ico { transform: translateX(-3px); }
.back-page:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.back-page-ico { display: grid; place-items: center; width: 18px; height: 18px; transition: transform .25s ease; }
.back-page-ico svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) {
  .back-page, .back-page-ico { transition: none; }
  .back-page:hover, .back-page:hover .back-page-ico { transform: none; }
}
@media (max-width: 560px) {
  .back-page { left: 14px; bottom: 16px; padding: .55rem .85rem .55rem .72rem; font-size: .84rem; }
}

/* ---------- 14. Chatbot ---------- */
.chatbot-launcher {
  position: fixed; right: 22px; bottom: 22px; z-index: 95; width: 62px; height: 62px; border-radius: 18px;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(150deg, var(--brand-navy) 0%, var(--brand-navy-deep) 100%);
  /* white ring keeps the navy tile separated from any background (navy heroes, footer, CTA bands) */
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(35,44,142,.12),
              0 10px 24px rgba(15,20,60,.4), 0 3px 8px rgba(15,20,60,.28);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, filter .25s ease;
}
.chatbot-launcher:hover {
  transform: translateY(-3px) scale(1.05); filter: brightness(1.08);
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(35,44,142,.12),
              0 16px 34px rgba(15,20,60,.5), 0 4px 12px rgba(236,0,140,.3);
}
.chatbot-launcher:active { transform: translateY(-1px) scale(1.02); }
.chatbot-launcher .cb-ico { display: grid; place-items: center; }
.chatbot-launcher .cb-ico svg { width: 40px; height: 40px; }
/* soft attention halo behind the button */
.chatbot-launcher::before {
  content: ""; position: absolute; inset: 0; border-radius: 18px; pointer-events: none; z-index: -1;
  box-shadow: 0 0 0 0 rgba(236,0,140,.4); animation: cb-pulse 2.8s ease-out infinite;
}
.chatbot-launcher[aria-expanded="true"]::before { animation: none; }
@keyframes cb-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(236,0,140,.38); }
  70%  { box-shadow: 0 0 0 16px rgba(236,0,140,0); }
  100% { box-shadow: 0 0 0 0 rgba(236,0,140,0); }
}
/* live "online" status dot */
.chatbot-launcher .cb-badge {
  position: absolute; top: 5px; right: 5px; width: 13px; height: 13px; border-radius: 50%;
  background: #25D366; border: 2.5px solid #fff; box-shadow: 0 0 0 0 rgba(37,211,102,.55);
  animation: cb-live 2.4s ease-out infinite;
}
@keyframes cb-live {
  0%   { box-shadow: 0 0 0 0 rgba(37,211,102,.55); }
  70%  { box-shadow: 0 0 0 7px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}
/* "Ask us" tooltip: slides in on hover/focus */
.chatbot-launcher .cb-tip {
  position: absolute; right: calc(100% + 14px); top: 50%;
  transform: translateY(-50%) translateX(8px);
  background: var(--brand-navy); color: #fff; font-family: var(--font-heading); font-weight: 600;
  font-size: .82rem; letter-spacing: .01em; padding: .48rem .8rem; border-radius: 10px; white-space: nowrap;
  box-shadow: var(--shadow-md); opacity: 0; pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
.chatbot-launcher .cb-tip::after {
  content: ""; position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
  border: 6px solid transparent; border-left-color: var(--brand-navy);
}
.chatbot-launcher:hover .cb-tip,
.chatbot-launcher:focus-visible .cb-tip { opacity: 1; transform: translateY(-50%) translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .chatbot-launcher::before, .chatbot-launcher .cb-badge { animation: none; }
}
.chatbot-panel {
  position: fixed; right: 20px; bottom: 88px; z-index: 96; width: min(370px, calc(100vw - 40px));
  height: min(540px, calc(100vh - 130px)); background: #fff; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); display: none; flex-direction: column; overflow: hidden; border: 1px solid var(--line);
}
.chatbot-panel.open { display: flex; }
.chatbot-header { background: var(--brand-navy); color: #fff; padding: 1rem 1.2rem; display: flex; align-items: center; gap: .6rem; }
.chatbot-header .dot { width: 9px; height: 9px; border-radius: 50%; background: #25D366; }
.chatbot-header strong { font-family: var(--font-heading); font-size: .98rem; }
.chatbot-header small { display: block; font-size: .75rem; color: rgba(255,255,255,.7); }
.chatbot-close { margin-left: auto; color: rgba(255,255,255,.85); font-size: 1.4rem; line-height: 1; }
.chatbot-close:hover { color: #fff; }
.chatbot-body { flex: 1; overflow-y: auto; padding: 1.1rem; background: var(--bg-soft); }
.chat-msg { max-width: 85%; padding: .7rem .95rem; border-radius: 14px; margin-bottom: .7rem; font-size: .92rem; line-height: 1.5; white-space: pre-wrap; }
.chat-msg.bot { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 4px; color: var(--ink-900); }
.chat-msg.user { background: var(--brand-navy); color: #fff; margin-left: auto; border-bottom-right-radius: 4px; }
.chat-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: .2rem 0 1rem; }
.chat-chip {
  font-family: var(--font-heading); font-weight: 600; font-size: .82rem; padding: .45rem .85rem;
  border-radius: 999px; border: 1.5px solid var(--brand-navy); color: var(--brand-navy); background: #fff; transition: all .18s ease;
}
.chat-chip:hover { background: var(--brand-navy); color: #fff; }
.chat-chip.pink { border-color: var(--accent); color: var(--accent); }
.chat-chip.pink:hover { background: var(--accent); color: #fff; }
.chat-chip.wa { border-color: #25D366; color: #128C4B; }
.chat-chip.wa:hover { background: #25D366; color: #06331b; }
.chatbot-input { display: flex; gap: .5rem; padding: .8rem; border-top: 1px solid var(--line); background: #fff; }
.chatbot-input input { flex: 1; border: 1px solid var(--line); border-radius: 999px; padding: .6rem 1rem; font-family: inherit; font-size: .92rem; }
.chatbot-input input:focus { border-color: var(--accent); outline: none; }
.chatbot-input button { width: 42px; height: 42px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.chatbot-input button:hover { background: var(--accent-deep); }
.chatbot-input svg { width: 20px; height: 20px; }

/* ---------- 15. Forms / Map ---------- */
.form-grid { display: grid; gap: 1rem; }
.field label { display: block; font-family: var(--font-heading); font-weight: 600; font-size: .85rem; color: var(--brand-navy); margin-bottom: .35rem; }
.field input, .field select, .field textarea {
  width: 100%; border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1rem;
  font-family: inherit; font-size: .96rem; color: var(--ink-900); background: #fff; transition: border-color .2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); outline: none; box-shadow: var(--ring); }
.field textarea { min-height: 130px; resize: vertical; }
.form-note { font-size: .82rem; color: var(--ink-400); }
.form-status { display: none; padding: .8rem 1rem; border-radius: var(--radius); font-size: .9rem; margin-top: .5rem; }
.form-status.ok { display: block; background: rgba(37,211,102,.12); color: #0f7a3d; }
.form-status.err { display: block; background: rgba(236,0,140,.1); color: var(--accent-deep); }

/* ===== Enquiry-form polish (contact + partner): premium panel ===== */
.form-card {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: clamp(1.5rem, 3.2vw, 2.6rem); overflow: hidden;
  box-shadow: 0 30px 60px -28px rgba(20,32,43,.30), 0 6px 18px -12px rgba(20,32,43,.10);
}
.form-card::before { /* accent top bar */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, var(--brand-navy), var(--brand-pink));
}

/* branded form header */
.form-head {
  grid-column: 1 / -1; display: flex; align-items: center; gap: .95rem;
  margin-bottom: 1.5rem; padding-bottom: 1.35rem; border-bottom: 1px solid var(--line);
}
.form-head-ico {
  width: 48px; height: 48px; flex-shrink: 0; border-radius: 13px; display: grid; place-items: center;
  color: #fff; background: linear-gradient(135deg, var(--brand-pink), var(--brand-navy));
  box-shadow: 0 8px 18px -8px rgba(236,0,140,.6);
}
.form-head-ico svg { width: 24px; height: 24px; }
.form-head h3 { font-size: 1.18rem; margin: 0; }
.form-head p { font-size: .86rem; color: var(--ink-400); margin: .2rem 0 0; }

.form-grid--2col { grid-template-columns: 1fr 1fr; column-gap: 1.1rem; row-gap: 1.15rem; }
.form-grid--2col .col-full { grid-column: 1 / -1; }
.form-section-title {
  grid-column: 1 / -1; font-family: var(--font-heading); font-weight: 700;
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-navy);
  margin: .5rem 0 .1rem; padding-bottom: .55rem; border-bottom: 2px solid var(--line);
  display: flex; align-items: center; gap: .55rem;
}
.form-section-title::before { content: ""; width: 16px; height: 3px; border-radius: 2px; background: var(--accent); }
.form-section-title + .field, .form-section-title + .field + .field { margin-top: 0; }

/* inputs: filled, defined, refined focus */
.form-card .field label { font-size: .8rem; margin-bottom: .45rem; }
.form-card .field input, .form-card .field select, .form-card .field textarea {
  background-color: #F4F6FB; border: 1.5px solid #E4E8F3; border-radius: 12px; padding: .85rem 1rem;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.form-card .field input:hover, .form-card .field select:hover, .form-card .field textarea:hover { border-color: #ccd3e8; }
.form-card .field input:focus, .form-card .field select:focus, .form-card .field textarea:focus {
  background-color: #fff; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(236,0,140,.12); outline: none;
}
.field input::placeholder, .field textarea::placeholder { color: #9aa5b5; }
.field select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer; padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23232C8E' stroke-width='2.2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 15px;
}
.field select:required:invalid { color: #9aa5b5; } /* muted while placeholder selected */

.form-grid .btn-primary { justify-self: start; justify-content: center; margin-top: .6rem; }
.form-grid--2col .btn-primary { justify-self: center; padding: .95rem 2.8rem; font-size: 1rem; box-shadow: 0 14px 26px -12px rgba(236,0,140,.5); }
.form-grid--2col .form-note { text-align: center; max-width: 560px; margin: .2rem auto 0; }
.form-grid--2col .form-status { text-align: center; }
@media (max-width: 620px) {
  .form-grid--2col { grid-template-columns: 1fr; }
  .form-grid--2col .btn-primary { justify-self: stretch; width: 100%; }
}

.section-video { margin: 0 auto; max-width: 420px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-md); background: #fff; transition: transform .3s ease, box-shadow .3s ease; }
.section-video__player { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: center; background: #000; transition: transform .6s ease; }
.section-video:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.section-video:hover .section-video__player { transform: scale(1.04); }
.section-video__cap { padding: 1.4rem; }
.section-video__cap strong { color: var(--brand-navy); font-family: var(--font-heading); display: block; margin-bottom: .2rem; }
.section-video__cap p { margin: 0; }

.map-card { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); background: #fff; }
.map-card-head { background: linear-gradient(135deg, var(--brand-navy), var(--brand-pink)); height: 150px; display: grid; place-items: center; color: rgba(255,255,255,.9); font-family: var(--font-heading); font-weight: 600; }
.map-card-body { padding: 1.4rem; }
.map-card-body strong { color: var(--brand-navy); font-family: var(--font-heading); display: block; margin-bottom: .2rem; }
.map-card-sub { display: block; font-size: .86rem; color: var(--ink-400); margin-bottom: .7rem; }
.map-embed { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); background: #fff; }
.map-embed iframe { width: 100%; min-height: 340px; border: 0; display: block; filter: saturate(1.02); }

/* Contact map: a single premium stacked card that sits in the right column
   beside the enquiry form: interactive map on top, a compact footer row with the
   pin + business name and a directions button. */
.map-card-embed { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 18px 46px -22px rgba(26,34,112,.28); background: #fff; }
.map-card-embed .map-embed { border: 0; border-radius: 0; box-shadow: none; }
.map-card-embed .map-embed iframe { min-height: 300px; }

/* Right column stretches to the form's height; the map grows to fill the leftover
   space so both columns end on the same line. */
.contact-right { display: flex; flex-direction: column; }
.contact-right .map-card-embed { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 300px; }
.contact-right .map-card-embed .map-embed { flex: 1 1 auto; min-height: 0; }
.contact-right .map-card-embed .map-embed iframe { height: 100%; min-height: 240px; }
.map-info { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .9rem 1.2rem; padding: 1.2rem 1.3rem; background: linear-gradient(180deg, #fff 0%, #FAFBFF 100%); border-top: 1px solid var(--line); }
.map-info-text { flex: 1 1 260px; display: flex; flex-direction: column; gap: .4rem; }
.map-info .map-here { display: inline-flex; align-items: center; gap: .5rem; }
.map-info .map-here svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--accent); }
.map-info .map-here strong { color: var(--brand-navy); font-family: var(--font-heading); font-size: 1.02rem; }
.map-info p { margin: 0; font-size: .88rem; line-height: 1.55; color: var(--ink-400); }
.map-info .btn-secondary { flex-shrink: 0; }

/* Small intro line under a section heading */
.lead-sm { margin: .7rem 0 0; color: var(--ink-400); font-size: 1rem; line-height: 1.6; max-width: 46ch; }

.info-list { display: grid; gap: .9rem; }
.info-item { display: flex; gap: .9rem; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 1rem 1.1rem; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.info-item:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -18px rgba(26,34,112,.3); border-color: #D3DAEE; }
.info-item .card-icon { width: 44px; height: 44px; flex-shrink: 0; margin: 0; border-radius: 12px; }
.info-item .card-icon svg { width: 22px; height: 22px; }
.info-item strong { color: var(--brand-navy); font-family: var(--font-heading); }
.info-item a { color: var(--brand-navy); font-weight: 500; }
.info-item a:hover { color: var(--accent); }

/* Leadership cards: circular photo (or gradient initials placeholder) beside
   the name + title, bio below. Keeps both cards balanced until every doctor's
   real headshot arrives. */
.leader-card { padding: 2rem 2rem 1.9rem; }
.leader-card .leader-head { display: flex; align-items: center; gap: 1.15rem; padding-bottom: 1.2rem; margin-bottom: 1.2rem; border-bottom: 1px solid var(--line); }
.leader-photo { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; object-position: center top; flex-shrink: 0; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--line), 0 10px 26px -10px rgba(26,34,112,.45); }
.leader-photo--ph { display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--brand-pink) 0%, var(--brand-navy) 115%); color: #fff; font-family: var(--font-heading); font-weight: 700; font-size: 1.75rem; letter-spacing: .02em; }
/* Background-removed (transparent) portraits get a soft studio backdrop behind the
   figure so the circle reads like a framed headshot, matching the photographed ones. */
.leader-photo--fill { background: radial-gradient(78% 78% at 50% 44%, rgba(255,255,255,1) 0%, rgba(255,255,255,.8) 38%, rgba(255,255,255,.35) 62%, rgba(255,255,255,0) 86%), radial-gradient(125% 130% at 50% 14%, #CDD4E6 0%, #8892B2 100%); object-position: center bottom; }
.leader-card h3 { margin: 0 0 .4rem; font-size: 1.24rem; line-height: 1.2; }
.leader-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; }
.leader-tag { display: inline-block; font-size: .72rem; font-weight: 600; letter-spacing: .01em; color: var(--brand-navy); background: #F1F3FB; border: 1px solid var(--line); border-radius: 999px; padding: .28rem .62rem; line-height: 1.2; white-space: nowrap; }
.leader-card > p { font-size: .95rem; line-height: 1.66; color: var(--ink-600); margin: 0; }
.leader-points { margin-top: .9rem; }
.leader-points li { margin-bottom: .45rem; }
.leader-email { margin-top: 1.05rem; font-size: .9rem; font-weight: 600; color: var(--brand-pink); }
.leader-email a { color: var(--brand-navy); word-break: break-word; }
.leader-email a:hover { color: var(--brand-pink); }

/* Compact gradient badge for asymmetric text sections (About → Quality columns) so a
   plain two-column text block reads as a designed section, matching the card icon tiles. */
.mini-icon {
  width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand-pink) 0%, var(--brand-navy) 115%);
  color: #fff; margin-bottom: 1.1rem;
  box-shadow: 0 10px 24px -10px rgba(26, 34, 112, .5);
}
.mini-icon svg { width: 24px; height: 24px; }

/* Principle pills: turns an inline bold run ("Accuracy · Quality · …") into refined
   chips with a magenta→navy gradient dot, so the guiding principles read as a set. */
.principle-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: .1rem 0 1.1rem; padding: 0; list-style: none; }
.principle-chips li {
  display: inline-flex; align-items: center; gap: .48rem;
  font-size: .82rem; font-weight: 600; letter-spacing: .01em; color: var(--brand-navy);
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: .42rem .8rem; line-height: 1.2;
  box-shadow: 0 1px 2px rgba(20, 32, 43, .05);
}
.principle-chips li::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--brand-pink), var(--brand-navy));
}

/* "Technology is an enabler" line (About → Technology): kept as a plain centred note
   (no panel), just a touch more refined than a default caption. */
.enabler-note {
  max-width: 780px; margin: 1.8rem auto 0; text-align: center;
  font-size: 1.02rem; font-style: italic; line-height: 1.65; color: var(--ink-600);
}
.enabler-note em { font-style: italic; font-weight: 600; color: var(--brand-pink); }
.enabler-note strong { color: var(--brand-navy); font-weight: 600; font-style: normal; }

/* Page hero (inner pages): mirrors the homepage hero's depth so interior
   headers don't read flat: navy gradient base, a stronger magenta chevron, a
   faint watermark ring, and a magenta accent bar under the title for contrast. */
.page-hero { background: linear-gradient(120deg, var(--brand-navy-deep) 0%, var(--brand-navy) 58%, #2a34a8 100%); color: #fff; position: relative; overflow: hidden; }
.page-hero::before { /* magenta diagonal accent (chevron motif), matches .hero */
  content: ""; position: absolute; top: 0; right: 0; width: 42%; height: 100%;
  background: linear-gradient(135deg, var(--brand-pink) 0%, var(--brand-navy-deep) 80%);
  clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%); opacity: .5; pointer-events: none; }
.page-hero::after { /* faint watermark ring, echoing the homepage hero */
  content: ""; position: absolute; right: -50px; bottom: -70px; width: 300px; height: 300px;
  border: 34px solid rgba(255,255,255,.06); border-radius: 50%; pointer-events: none; }
.page-hero-inner { position: relative; z-index: 2; padding: clamp(2.5rem, 6vw, 4rem) 0; }
.page-hero h1 { color: #fff; }
.page-hero h1::after { /* magenta accent bar gives the title pop against the navy */
  content: ""; display: block; width: 66px; height: 4px; border-radius: 2px;
  background: var(--brand-pink); margin-top: 1rem; }
.page-hero p { color: rgba(255,255,255,.9); margin-top: 1rem; max-width: 640px; }
.breadcrumb { font-size: .82rem; color: rgba(255,255,255,.8); margin-bottom: .8rem; }
.breadcrumb a { color: rgba(255,255,255,.8); }
.breadcrumb a:hover { color: #fff; }

/* Test list (tests.html) */
.test-cat { margin-bottom: 3rem; }
.test-cat-head { display: flex; align-items: flex-start; gap: 1.05rem; margin-bottom: 1.5rem; padding-bottom: 1.15rem; border-bottom: 1px solid var(--line); }
.test-cat-icon { flex-shrink: 0; width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center; background: linear-gradient(135deg, var(--brand-pink) 0%, var(--brand-navy) 115%); color: #fff; box-shadow: 0 12px 26px -12px rgba(26, 34, 112, .55); }
.test-cat-icon svg { width: 27px; height: 27px; }
.test-cat-head h2 { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; margin: .1rem 0 .3rem; padding: 0; border: 0; }
.test-cat-head .count { font-size: .68rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; font-family: var(--font-body); color: var(--brand-pink); background: rgba(236, 0, 140, .08); padding: .24rem .62rem; border-radius: 999px; }
.test-cat-blurb { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--ink-600); max-width: 62ch; }
.test-card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.35rem 1.5rem 1.35rem 1.6rem; box-shadow: var(--shadow-sm); overflow: hidden; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.test-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--brand-pink), var(--brand-navy)); }
.test-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -18px rgba(26, 34, 112, .42); border-color: rgba(35, 44, 142, .22); }
.test-card h3 { font-size: 1.04rem; margin-bottom: .35rem; }
.test-card-head { display: flex; align-items: center; gap: .8rem; margin-bottom: .55rem; }
.test-card-head h3 { margin: 0; }
.test-card-icon { flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, var(--brand-pink) 0%, var(--brand-navy) 115%); color: #fff; box-shadow: 0 9px 20px -11px rgba(26, 34, 112, .55); transition: transform .18s ease; }
.test-card-icon svg { width: 22px; height: 22px; }
.test-card:hover .test-card-icon { transform: scale(1.06) rotate(-3deg); }
.test-card .test-info { font-size: .9rem; line-height: 1.55; color: var(--ink-600); }
.test-symptoms { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-top: 1rem; }
.test-symptoms-label { font-size: .64rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-400); margin-right: .1rem; }
.test-symptoms span:not(.test-symptoms-label) { font-size: .76rem; font-weight: 500; background: var(--bg-soft); color: var(--ink-600); padding: .26rem .7rem; border-radius: 999px; border: 1px solid var(--line); }
.notice { background: rgba(236,0,140,.06); border: 1px solid rgba(236,0,140,.2); border-radius: var(--radius); padding: 1.1rem 1.3rem; font-size: .92rem; color: var(--ink-900); }

/* Tick list: bulleted feature/service lists */
.tick-list { list-style: none; margin: 0; padding: 0; }
.tick-list li { position: relative; padding-left: 1.6rem; margin-bottom: .5rem; font-size: .95rem; color: var(--ink-600); line-height: 1.5; }
.tick-list li::before { content: ""; position: absolute; left: 0; top: .35em; width: .7rem; height: .4rem;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }

/* ---------- 16. Reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .about-figure, .about-figure img, .section-video, .section-video__player { transition: none; }
  .about-figure:hover, .section-video:hover { transform: none; }
  .about-figure:hover img, .section-video:hover .section-video__player { transform: none; }
}

/* ---------- 17. Responsive ---------- */
@media (max-width: 900px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .case-grid, .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .trust-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .nav-links { display: none; }
  .menu-toggle { display: grid; place-items: center; }
  .top-bar-item.hours { display: none; }
  /* Mobile: keep BOTH the utility bar and the nav pinned to the top. The top bar can
     wrap to a taller, variable height on phones, so the nav docks beneath it via
     --topbar-h, which main.js measures and keeps in sync on resize / orientation change.
     The 42px fallback covers the no-JS case. */
  .top-bar { position: sticky; top: 0; }
  .site-nav { top: var(--topbar-h, 42px); }
}
@media (max-width: 620px) {
  .grid-2, .grid-3, .grid-4, .case-grid { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: 1fr 1fr; }
  .footer-cols { grid-template-columns: 1fr; }
  .cta-pair { flex-direction: column; align-items: stretch; }
  .cta-pair .btn-primary, .cta-pair .btn-secondary { justify-content: center; }
  /* Let long labels wrap instead of overflowing the viewport on narrow phones
     (e.g. "Back to Case Studies & Research" at ~344px and below). nowrap here is
     the classic cause of a page that scrolls sideways on small screens. */
  .btn-primary, .btn-secondary, .btn-ghost { white-space: normal; }
  /* ---- Premium, responsive top bar on phones ----
     2x2 grid so all three action buttons are exactly equal in size (each fills a 1fr
     cell). Reading order (set with `order`): Call Now, Check Your Report, opening hours,
     WhatsApp. The actions wrapper is flattened (display:contents) so its buttons share
     the grid with the hours line; a long label wraps inside the fixed 40px pill height
     rather than resizing it. Phone number is dropped (Call dials it); main.js tracks the
     bar height into --topbar-h so the nav docks flush. */
  .top-bar-inner {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: clamp(.4rem, 2vw, .55rem); align-items: center;
    /* Gap ONLY, buttons keep their exact size (see .top-bar-cta min-height below).
       A little padding on top, a clearly larger band BELOW the 2x2 button grid, so the
       bottom pill row (Call Now / WhatsApp) has an obvious gap from the nav docked
       directly beneath it instead of sitting flush against it. */
    padding: .45rem 0 1rem;
  }
  .top-bar-item { display: none; }                          /* hide phone number */
  .top-bar-item.hours {
    order: 1; display: flex; align-items: center; justify-content: center; gap: .3rem;
    text-align: center; line-height: 1.2;
    font-size: clamp(.66rem, 2.8vw, .76rem); font-weight: 500; letter-spacing: .008em;
    color: rgba(255,255,255,.72);
  }
  .top-bar-actions { display: contents; }                   /* flatten: buttons join the grid */
  .top-bar-cta, .top-bar-reports {
    min-height: 32px; padding: 0 .5rem; justify-content: center; text-align: center;
    line-height: 1.1; font-size: clamp(.66rem, 2.9vw, .74rem); white-space: normal;
  }
  .top-bar-cta { order: 3; }                                /* Call Now  (bottom-left) */
  .top-bar-reports { order: 2; letter-spacing: .01em; }     /* Check Your Report (top-right) */
  .top-bar-cta.wa { order: 4; }                             /* WhatsApp  (bottom-right) */
  /* Hero on phones: a touch shorter, tighter padding, slightly smaller sub-copy.
     h1 is anchored to the 360px reference (~32px @360) and scales fluidly 320–620. */
  .hero { min-height: 78dvh; }
  .hero-inner { padding-block: 2.75rem; }
  .hero h1 { font-size: clamp(1.75rem, 8.9vw, 2.2rem); }
  .hero .hero-sub { font-size: 1.02rem; margin: .9rem 0 1.5rem; }
  .hero .tagline { margin-top: 1.2rem; }
}
@media (max-width: 430px) {
  /* Tighten gaps on small phones; clamp() already scales the labels fluidly, so just
     trim spacing and keep the pills a comfortable, even tap size. */
  .top-bar-inner { gap: .4rem; }
  .top-bar-cta, .top-bar-reports { min-height: 30px; padding: 0 .45rem; }
}
@media (max-width: 400px) {
  .container { padding: 0 1rem; }
  .hero .hero-sub { font-size: .98rem; }
  /* Slightly smaller buttons on very small phones so long labels
     (e.g. "Explore the Training Institute") don't force horizontal scroll. */
  .btn-primary, .btn-secondary { font-size: .9rem; padding: .7rem 1.15rem; text-align: center; }
  /* Ghost links must keep their flush-left, zero side-padding shape here: the
     shared selector above used to hand them 1.15rem of pill padding, which pushed
     the long "Back to Case Studies & Research" link past the screen edge at ~344px. */
  .btn-ghost { font-size: .9rem; padding-left: 0; padding-right: 0; }
}