/* =========================================================
   THEME LAYER — dark, quiet, light type (inspired by the
   "AI & Data Science Consulting" Dribbble shot),
   in the Acuitas navy / teal / blue colours.
   Loaded after main.css. Delete the <link> in header.php
   to go back to the old look.
   ========================================================= */

:root {
  --ink:       #061226;   /* deepest navy background */
  --ink-2:     #0B1F3A;   /* Acuitas navy */
  --steel:     #0D9B8A;   /* Acuitas teal */
  --mist:      #9FB3C8;   /* muted label text */
  --ember:     #C8962A;   /* Acuitas gold, rare accent */
  --line:      #E6E9ED;
  --radius:    10px;
  --radius-lg: 14px;
  --shadow-sm: none;
  --shadow:    0 10px 30px rgba(6,18,38,.08);
  --shadow-lg: 0 24px 60px rgba(6,18,38,.18);
}

body { font-family: var(--font-sans); font-weight: 400; color: var(--text); letter-spacing: -.005em; }

/* ── Type: light, tight, no heavy serif ── */
h1, h2, h3, h4, h5,
.section-title, .offer-title, .post-title, .report-title, .hp-name, .door-text strong,
.stat-num, .stat-number, .logo-text, .vf-word { font-family: var(--font-sans); font-weight: 400; }
h1, .section-title, .offer-title, .hero h1 { letter-spacing: -.025em; line-height: 1.1; }
.section-title { font-size: clamp(1.8rem, 3.4vw, 2.5rem); }
.offer-title  { font-size: clamp(1.9rem, 4vw, 2.9rem); }
.stat-num     { font-weight: 300; letter-spacing: -.02em; }
strong, b { font-weight: 500; }

/* Second-tone words (".horizon"): muted blue-grey, a slow sheen instead of a rainbow */
.horizon { background-image: linear-gradient(90deg, var(--teal), var(--blue-light), var(--teal-light), var(--teal)); }
.hero .horizon, .page-hero .horizon { background-image: linear-gradient(90deg, var(--teal-light), #7FC4FF, #5EEAD4, var(--teal-light)); }

/* Small labels: quiet grey, sentence case, no rule */
.section-label { font-size: .78rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--mist); }
.section-label::before { display: none; }
.page-hero .section-label, .hero .section-label { color: var(--mist); }

/* ── Buttons: thin pills ── */
.btn { padding: 10px 22px; font-size: .86rem; font-weight: 500; border-width: 1px; letter-spacing: 0; }
.btn-primary { background: var(--ink-2); color: #fff; }
.btn-primary:hover { background: var(--blue); box-shadow: none; transform: none; }
.btn-outline { color: var(--ink-2); border-color: #CDD3DA; }
.btn-outline:hover { background: var(--ink-2); border-color: var(--ink-2); color: #fff; }
.btn-teal { background: var(--ink-2); }
.btn-teal:hover { background: var(--blue); }
.btn-white { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.28); backdrop-filter: blur(6px); }
.btn-white:hover { background: rgba(255,255,255,.16); color: #fff; }

/* ── Navbar: dark glass ── */
.navbar { background: rgba(6,18,38,.97); border-bottom: 1px solid rgba(255,255,255,.06); box-shadow: none; backdrop-filter: blur(14px) saturate(140%); }
.navbar.scrolled { box-shadow: 0 1px 0 rgba(255,255,255,.06); }

/* When a page opens with a dark hero, the bar floats over it: see-through at the top,
   solid navy once you scroll (main.js adds .scrolled after 20px). */
body:has(> .navbar + .hero, > .navbar + .page-hero) .navbar {
  margin-bottom: -69px;                       /* bar height: the hero slides up under it */
  background: rgba(6,18,38,.18);
  border-bottom-color: rgba(255,255,255,.08);
  backdrop-filter: blur(6px);
  transition: background .35s ease, border-color .35s ease, backdrop-filter .35s ease, box-shadow .35s ease;
}
body:has(> .navbar + .hero, > .navbar + .page-hero) .navbar.scrolled {
  background: rgba(6,18,38,.96);
  border-bottom-color: rgba(255,255,255,.06);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
}
.navbar + .hero      { padding-top: 69px; }
.navbar + .page-hero { padding-top: 149px; }
@media (prefers-reduced-motion: reduce) { .navbar { transition: none !important; } }
/* Logos are made by tools/logo-build.ps1 from the brand files in uploads/brand/ */
.logo-text { color: #fff; }
/* Nav logo: "ACUITAS" in white (uploads/logo-nav-white.png, no "HEALTH ANALYTICS").
   On hover or focus the same word with a teal arrow (uploads/logo-nav.png, same canvas) fades in on top,
   so only the arrow in the A changes colour. */
.logo-tick { position: relative; }
.logo-tick .logo-img { height: 30px; width: auto; }
.logo-tick .logo-tick-on { position: absolute; left: 0; top: 50%; transform: translateY(-50%); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.logo-tick:is(:hover, :focus-visible) .logo-tick-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .logo-tick .logo-tick-on { transition: none !important; } }
.nav-links a { font-size: .84rem; font-weight: 400; color: rgba(255,255,255,.72); }
.nav-links a:hover, .nav-links a.active { color: #fff; background: rgba(255,255,255,.07); }
.nav-links a.nav-highlight { color: #fff; background: rgba(13,155,138,.14); border: 1px solid rgba(13,155,138,.38); font-weight: 400; }
.nav-links a.nav-highlight:hover, .nav-links a.nav-highlight.active { background: rgba(13,155,138,.26); border-color: rgba(13,155,138,.6); color: #fff; }
.nav-cta { background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.28); font-weight: 400 !important; }
.nav-cta:hover { background: rgba(255,255,255,.16) !important; }
.nav-dropdown .dropdown-menu { background: #0B1F3A; border-color: rgba(255,255,255,.08); box-shadow: 0 20px 50px rgba(0,0,0,.45); }
.dropdown-menu li a { color: rgba(255,255,255,.72); }
.dropdown-menu li a:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-toggle span { background: #fff; }
@media (max-width: 900px) { .nav-links { background: #0B1F3A; } }

/* ── Hero + inner page hero: near-black with a low blue glow ── */
.hero, .page-hero {
  background:
    radial-gradient(ellipse 75% 55% at 50% 108%, rgba(26,95,168,.55) 0%, rgba(19,46,82,.22) 45%, transparent 75%),
    radial-gradient(ellipse 40% 35% at 15% 85%, rgba(13,155,138,.25) 0%, transparent 70%),
    linear-gradient(180deg, var(--ink) 0%, #0A1A33 60%, #0F2A4C 100%);
}
.hero::before, .page-hero::before { background: none; }
.hero-grid { display: none; }
.hero-aurora i { opacity: .28; filter: blur(90px); }
.hero-net { opacity: .55; }
.hero h1 { font-weight: 400; }

/* Glass bits inside the hero: thinner, calmer */
.hero-panel { border-radius: 16px; background: linear-gradient(170deg, rgba(13,155,138,.16), rgba(255,255,255,.03)); border-color: rgba(255,255,255,.12); }
.hp-live, .fc-label, .door-kicker, .hp-sub { font-weight: 500; letter-spacing: .4px; }
.hp-name { font-weight: 400; }
.hp-figs strong { font-weight: 300; }
.door { border-radius: 14px; background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); }
.door:hover, .door:focus-visible { background: rgba(255,255,255,.08); }
.door-ph:hover, .door-hc:hover { border-color: rgba(18,181,162,.5); }
.door-ph .door-icon, .door-hc .door-icon { background: rgba(255,255,255,.06); color: #7FD8CC; border: 1px solid rgba(255,255,255,.1); }
.float-card { border-radius: 12px; background: rgba(252,252,253,.96); }
.hero-strip { background: rgba(255,255,255,.03); border-top-color: rgba(255,255,255,.08); backdrop-filter: blur(6px); }
.stat-list li { border-right-color: rgba(255,255,255,.08); }
.stat-lbl { font-weight: 400; letter-spacing: .4px; text-transform: none; font-size: .78rem; color: var(--mist); }

/* ── Sections: white and soft grey, so bands still look apart ── */
.section-light, .band-co { background: var(--off-white); }
.band-offer { background: #FFFFFF; }
.band-care  { background: var(--off-white); }
.band-lib   { background: #FFFFFF; }
.band-cov   { background: var(--off-white); }
.band-blog  { background: #FFFFFF; }
.band-co    { border-color: var(--line); }
.band-blog .post { border-color: var(--line); }

/* ── Cards: hairline borders, soft corners ── */
.report-card, .filter-box, .map-card, .growth-card, .post, .offer-card, .lib-card, .bento-card, .quote, .service-card, .ph-card {
  border-color: var(--line) !important; box-shadow: none;
}
.report-card:hover, .post:hover, .lib-card:hover { box-shadow: var(--shadow); }
.tag-cat, .post-date { font-weight: 500; letter-spacing: .3px; }

/* ── Footer: deepest ink ── */
.footer { background: var(--ink); color: rgba(255,255,255,.7); }
.footer-contact i { color: var(--steel); }

/* Reports sits at the far right: open its menu leftwards so it stays on screen */
.nav-dropdown.nav-end .dropdown-menu { left: auto; right: 0; }
.nav-links .nav-end { margin-left: 6px; }

/* Hero bubbles (index.php): two cards on the chart's sides, top-left and bottom-right.
   Each is 232px wide and sits 58px past the panel edge, so about 75% of it overlaps the chart.
   They pop in and out (JS toggles .fc-hide), so the chart underneath is regularly in full view.
   .hero-panel-wrap holds the panel and both bubbles, so they track the panel's real size. */
.hero-visual { padding-top: 24px; }
.hero-panel-wrap { position: relative; margin-bottom: 22px; }
.hero-visual .hero-search { margin-top: 0; }
.fc-bubble { width: 232px; min-width: 0; max-width: none; padding: 10px 14px 10px 10px; gap: 10px; border-radius: 14px; z-index: 3;
  animation: none;                                       /* no bobbing: the pop is the motion */
  transform-origin: center; transition: opacity .35s ease, transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease; }
.fc-bubble.fc-hide { opacity: 0; transform: scale(.82) translateY(8px); pointer-events: none; transition: opacity .3s ease, transform .3s ease; }
.fc-bubble strong { font-size: .82rem; }
.fc-bubble .fc-sub { font-size: .66rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 160px; }
/* One bubble; JS moves it to a random spot on the chart's sides each time it pops back in */
.fc-solo { top: 74px; left: -58px; right: auto; bottom: auto; transform-origin: left center; }
.fc-bubble .fc-logos img { width: 24px; height: 24px; margin-left: -6px; }
.fc-bubble .fc-logos img:first-child { margin-left: 0; }
.fc-logos[hidden], .fc-stat-icon[hidden], .fc-stat-icon [hidden] { display: none; }
.fc-stat-icon { width: 32px; height: 32px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: linear-gradient(135deg, rgba(13,155,138,.14), rgba(26,95,168,.14)); color: var(--teal); font-size: .9rem; overflow: hidden; }
.fc-stat-icon img { width: 100%; height: 100%; object-fit: contain; background: #fff; padding: 3px; }
.fc-stat { min-width: 0; }
.fc-stat strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
@media (prefers-reduced-motion: reduce) { .fc-bubble, .fc-bubble.fc-hide { transition: none; } }
/* ───────────── Blog page ───────────── */
.blog-hero-sub { color: rgba(255,255,255,.7); max-width: 560px; margin: 0; font-size: 1.02rem; }
.blog-topics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.blog-topics a { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 50px; font-size: .84rem;
  color: rgba(255,255,255,.78); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); transition: background .25s ease, border-color .25s ease; }
.blog-topics a span { font-size: .7rem; color: rgba(255,255,255,.5); }
.blog-topics a:hover { color: #fff; background: rgba(255,255,255,.1); }
.blog-topics a[aria-current] { color: #fff; background: rgba(13,155,138,.22); border-color: rgba(18,181,162,.55); }
.blog-topics a[aria-current] span { color: #A7F0E6; }

.blog-kicker { font-size: .72rem; font-weight: 500; letter-spacing: .4px; text-transform: uppercase; color: var(--teal); }
.blog-meta-line { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; font-size: .78rem; color: var(--text-muted); }
.blog-meta-line i { margin-right: 4px; opacity: .7; }

/* Featured story: image left, text right */
.blog-lead { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); margin-bottom: 28px; background: #fff; }
.blog-lead .post-img-link { aspect-ratio: 16 / 10; }
.blog-lead .post-body { padding: 36px 40px; justify-content: center; gap: 14px; }
.blog-lead .post-title { font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.2; }
.blog-lead .post-excerpt { -webkit-line-clamp: 5; font-size: .98rem; }

/* The rest: three-up cards */
.blog-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.blog-item { flex-direction: column; background: #fff; }
.blog-item .post-img-link { aspect-ratio: 16 / 10; }
.blog-item .post-body { flex: 1; }
.blog-item .post-title { font-size: 1.12rem; }
.blog-item .blog-meta-line { margin-top: auto; padding-top: 6px; }

/* Bridge to reports */
.blog-cta { margin-top: 56px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding: 36px 40px; border-radius: var(--radius-lg); color: #fff;
  background: radial-gradient(ellipse 60% 90% at 100% 100%, rgba(13,155,138,.35), transparent 70%), linear-gradient(135deg, var(--ink), var(--navy-mid)); }
.blog-cta h2 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin: 4px 0 6px; color: #fff; }
.blog-cta p { margin: 0; color: rgba(255,255,255,.7); font-size: .92rem; }

@media (max-width: 960px) {
  .blog-lead { grid-template-columns: 1fr; }
  .blog-lead .post-body { padding: 26px 24px; }
  .blog-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) { .blog-list { grid-template-columns: 1fr; } .blog-cta { padding: 28px 24px; } }

/* ───────────── Public Health + Health Care listing pages ───────────── */
.offer-hero-sub { color: rgba(255,255,255,.7); max-width: 600px; margin: 0; font-size: 1.02rem; }
.offer-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; max-width: 980px; }
.offer-jump a { padding: 7px 14px; border-radius: 50px; font-size: .82rem; color: rgba(255,255,255,.78);
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); transition: background .25s ease, border-color .25s ease, color .25s ease; }
.offer-jump a:hover, .offer-jump a:focus-visible { color: #fff; background: rgba(13,155,138,.2); border-color: rgba(18,181,162,.5); }

/* One row per service, image and text swap sides each row */
.offer-rows .container { display: grid; gap: 88px; }
.offer-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 64px; align-items: center; scroll-margin-top: 110px; }
.offer-row.flip .offer-row-media { order: 2; }
.offer-row-media { display: block; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; background: var(--navy); box-shadow: var(--shadow); }
.offer-row-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
.offer-row:hover .offer-row-media img { transform: scale(1.04); }
.offer-row-empty { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; font-size: 3rem; color: rgba(255,255,255,.3);
  background: linear-gradient(135deg, var(--navy), var(--blue)); }
.offer-row-body h2 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); line-height: 1.15; letter-spacing: -.02em; margin: 2px 0 14px; }
.offer-row-body h2 a { color: var(--navy); }
.offer-row-body h2 a:hover { color: var(--teal); }
.offer-row-body p { color: var(--text-muted); font-size: 1rem; line-height: 1.75; margin: 0 0 24px; max-width: 520px; }
.offer-row-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Closing band */
.offer-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 36px 40px;
  border-radius: var(--radius-lg); color: #fff;
  background: radial-gradient(ellipse 60% 90% at 100% 100%, rgba(13,155,138,.35), transparent 70%), linear-gradient(135deg, var(--ink), var(--navy-mid)); }
.offer-cta h2 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin: 4px 0 6px; color: #fff; }
.offer-cta p { margin: 0; color: rgba(255,255,255,.7); font-size: .92rem; }
.offer-cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 900px) {
  .offer-rows .container { gap: 56px; }
  .offer-row { grid-template-columns: 1fr; gap: 24px; }
  .offer-row.flip .offer-row-media { order: 0; }
}
@media (prefers-reduced-motion: reduce) { .offer-row-media img { transition: none; } }

/* Dropdowns: the menu sits 8px below its link. An invisible bridge fills that gap,
   so the menu stays open while the cursor moves down to it. Keyboard users get it on focus. */
.nav-dropdown .dropdown-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav-dropdown:focus-within .dropdown-menu { display: block; }

/* ───────────── Knowledge pages: FAQ, Glossary, How we estimate, Sample, Markets, Companies ───────────── */
.kb-body { max-width: 1040px; }
.kb-h2 { font-size: 1.35rem; color: var(--navy); margin: 40px 0 16px; letter-spacing: -.01em; scroll-margin-top: 110px; }
.kb-h2:first-child { margin-top: 0; }
.kb-card-title { font-size: 1.05rem; color: var(--navy); margin: 0 0 6px; display: flex; align-items: center; gap: 8px; }
.kb-card-title .fa { color: var(--teal); }
.kb-sub { font-size: .9rem; color: var(--navy); margin: 22px 0 0; }
.kb-note { font-size: .84rem; color: var(--text-muted); }
.notice { background: #FFF7E6; border: 1px solid #F4DDA6; color: #6B5317; padding: 12px 16px; border-radius: var(--radius); margin-bottom: 24px; }

.kpi-row { list-style: none; margin: 0 0 36px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.kpi-row li { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px 20px; }
.kpi-row strong { display: block; font-size: 1.7rem; font-weight: 300; color: var(--navy); line-height: 1.1; letter-spacing: -.02em; }
.kpi-row span { font-size: .78rem; color: var(--text-muted); }

/* How we estimate */
.kb-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.kb-steps article { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; }
.kb-steps h2 { font-size: 1.1rem; color: var(--navy); margin: 12px 0 8px; }
.kb-steps p { color: var(--text-muted); font-size: .94rem; margin: 0 0 8px; }
.kb-step-ico { width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(13,155,138,.14), rgba(26,95,168,.14)); color: var(--teal); }
.kb-formula { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .86rem !important; color: var(--navy) !important;
  background: var(--off-white); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.kb-example { margin-top: 28px; padding: 28px; border-radius: var(--radius-lg); background: var(--off-white); border: 1px solid var(--line); }
.kb-example h2 { font-size: 1.3rem; color: var(--navy); margin: 4px 0 14px; }
.kb-table { border-collapse: collapse; margin-bottom: 10px; min-width: 320px; }
.kb-table th, .kb-table td { text-align: left; padding: 8px 18px 8px 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.kb-table th { font-weight: 400; color: var(--text-muted); }
.kb-table td { color: var(--navy); font-weight: 500; font-variant-numeric: tabular-nums; }
.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.check-list li { position: relative; padding: 12px 16px 12px 44px; background: #fff; border: 1px solid var(--line); border-radius: 10px; color: var(--text-muted); font-size: .92rem; }
.check-list li::before { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; left: 16px; top: 13px; color: var(--teal); }
.check-list strong { display: block; color: var(--navy); font-weight: 500; }

/* Glossary */
.kb-search { margin-top: 24px; max-width: 420px; }
.kb-search input { width: 100%; padding: 12px 18px; border-radius: 50px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: #fff; font: inherit; }
.kb-search input::placeholder { color: rgba(255,255,255,.55); }
.gloss { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.gloss-item { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; scroll-margin-top: 110px; }
.gloss-item:target { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(13,155,138,.15); }
.gloss dt { font-weight: 500; color: var(--navy); margin-bottom: 4px; }
.gloss dd { margin: 0; color: var(--text-muted); font-size: .9rem; line-height: 1.6; }

/* FAQ */
.faq { display: grid; gap: 10px; }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 20px; color: var(--navy); font-weight: 500; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .fa { color: var(--teal); transition: transform .25s ease; }
.faq-item[open] summary .fa { transform: rotate(45deg); }
.faq-item summary:focus-visible { outline: 3px solid var(--teal-light); outline-offset: 2px; border-radius: 12px; }
.faq-a { padding: 0 20px 18px; color: var(--text-muted); font-size: .94rem; line-height: 1.7; }

/* Sample */
.sample-grid { gap: 48px; align-items: start; }
.sample-report { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; }
.sample-report h2 { font-size: 1.25rem; color: var(--navy); margin: 4px 0 10px; }
.sample-report p { color: var(--text-muted); font-size: .92rem; }

/* Markets + Companies */
.geo-grid, .co-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.geo-tile, .co-tile { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; background: #fff; border: 1px solid var(--line); border-radius: 12px; color: var(--navy);
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease; }
.geo-tile:hover, .co-tile:hover, .geo-tile:focus-visible, .co-tile:focus-visible { border-color: var(--teal); transform: translateY(-2px); box-shadow: var(--shadow); color: var(--navy); }
.geo-tile .fa-globe { color: var(--teal); font-size: 1.1rem; }
.geo-tile .flag { width: 24px; height: 18px; }
.geo-tile strong, .co-tile strong { font-weight: 500; }
.geo-tile span, .co-tile span { font-size: .78rem; color: var(--text-muted); }
.co-tile img, .co-initial { width: 36px; height: 36px; border-radius: 8px; object-fit: contain; background: #fff; border: 1px solid var(--line); margin-bottom: 4px; }
.co-initial { display: inline-flex; align-items: center; justify-content: center; color: var(--teal); font-weight: 600; }
.geo-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.growth-vals { grid-column: 1 / -1; font-size: .72rem; color: var(--text-muted); }
.cat-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.cat-list li { border-bottom: 1px solid var(--line); padding: 8px 0; }
.cat-list a { display: flex; justify-content: space-between; gap: 12px; color: var(--navy); }
.cat-list a span { color: var(--text-muted); font-size: .84rem; }
.cat-list em { display: block; font-style: normal; font-size: .78rem; color: var(--teal); margin-top: 2px; }
.bar-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.bar-list li { display: grid; grid-template-columns: 150px 1fr 44px; align-items: center; gap: 10px; font-size: .84rem; color: var(--navy); }
.bar-list b { height: 8px; border-radius: 4px; background: var(--gray-100); position: relative; overflow: hidden; }
.bar-list b::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 4px; background: linear-gradient(90deg, var(--teal), var(--blue-light)); }
.bar-list em { font-style: normal; text-align: right; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.mini-reports { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mini-reports a { display: flex; gap: 10px; align-items: center; padding: 12px 16px; background: #fff; border: 1px solid var(--line); border-radius: 10px; color: var(--navy); font-size: .92rem; }
.mini-reports a:hover { border-color: var(--teal); }
.mini-reports .tag-cat { flex-shrink: 0; font-size: .66rem; }
.geo-title .flag { width: 44px; height: 33px; vertical-align: middle; border-radius: 4px; }
.co-hero { display: flex; align-items: center; gap: 22px; }
.co-hero-logo { width: 84px; height: 84px; border-radius: 18px; background: #fff; padding: 10px; object-fit: contain; flex-shrink: 0; }
.az-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 36px 0 8px; }
.az-nav a { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: #fff; border: 1px solid var(--line); color: var(--navy); font-size: .84rem; }
.az-nav a:hover { border-color: var(--teal); color: var(--teal); }
.az-letter { font-size: 1.2rem; color: var(--teal); margin: 28px 0 10px; scroll-margin-top: 110px; }
.az-list { list-style: none; margin: 0; padding: 0; columns: 3 240px; column-gap: 28px; }
.az-list li { break-inside: avoid; padding: 4px 0; }
.az-list a { color: var(--navy); font-size: .9rem; }
.az-list a span { color: var(--text-muted); font-size: .74rem; margin-left: 4px; }

/* Header "Consult us" button */
.nav-links a.nav-consult { background: var(--teal); color: #fff; border-radius: 50px; padding: 8px 18px; font-weight: 500; margin-left: 4px; }
.nav-links a.nav-consult:hover, .nav-links a.nav-consult.active { background: var(--teal-light); color: #fff; }
/* Homepage hero actions */
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; position: relative; z-index: 2; }
.hero-actions .btn-consult { background: var(--teal); color: #fff; }
.hero-actions .btn-consult:hover { background: var(--teal-light); color: #fff; }

@media (max-width: 860px) {
  .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kb-steps, .gloss, .geo-cols { grid-template-columns: 1fr; }
  .bar-list li { grid-template-columns: 110px 1fr 40px; }
  .co-hero { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .geo-tile, .co-tile, .faq-item summary .fa { transition: none; } }

/* Report catalogue in "pick a report for your free sample" mode */
.btn-consult { background: var(--teal); color: #fff; }
.btn-consult:hover { background: var(--teal-light); color: #fff; }
.sample-pick { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 18px; margin-bottom: 16px;
  border-radius: var(--radius-lg); background: rgba(13,155,138,.08); border: 1px solid rgba(13,155,138,.35); color: var(--navy); }
.sample-pick > .fa { font-size: 1.3rem; color: var(--teal); }
.sample-pick div { flex: 1; min-width: 220px; }
.sample-pick strong { display: block; font-weight: 500; }
.sample-pick span { font-size: .86rem; color: var(--text-muted); }
.sample-pick-x { font-size: .84rem; color: var(--text-muted); text-decoration: underline; }

/* Nav "Consult us": arrow nudges on hover, like the hero buttons */
.nav-links a.nav-consult { display: inline-flex; align-items: center; gap: 8px; }
.nav-links a.nav-consult .fa-arrow-right { font-size: .78rem; transition: transform .25s ease; }
.nav-links a.nav-consult:hover .fa-arrow-right { transform: translateX(3px); }

/* ───────────── Contact page ───────────── */
.intent-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 30px; max-width: 980px; }
.intent { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 14px; color: #fff;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(6px);
  transition: background .25s ease, border-color .25s ease, transform .25s ease; }
.intent:hover, .intent:focus-visible { color: #fff; background: rgba(255,255,255,.1); border-color: rgba(18,181,162,.5); transform: translateY(-2px); }
.intent strong { display: block; font-weight: 500; }
.intent small { display: block; font-size: .76rem; color: rgba(255,255,255,.65); }
.intent-go { margin-left: auto; opacity: .6; transition: transform .25s ease, opacity .25s ease; }
.intent:hover .intent-go { transform: translateX(4px); opacity: 1; }
.intent-ico { width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(18,181,162,.16); color: #7FD8CC; }

.contact-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 32px; align-items: start; }
.contact-side { display: grid; gap: 18px; }
.contact-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px 24px; }
.contact-card h2 { font-size: 1.05rem; color: var(--navy); margin: 0 0 14px; }
.contact-line { display: flex; align-items: center; gap: 14px; padding: 10px 0; color: var(--navy); border-top: 1px solid var(--line); }
.contact-line:first-of-type { border-top: 0; }
.contact-line small { display: block; font-size: .72rem; color: var(--text-muted); }
.contact-line .intent-ico, .quick-links .fa { background: rgba(13,155,138,.1); color: var(--teal); }
.contact-line:hover { color: var(--teal); }
.quick-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.quick-links a { display: grid; grid-template-columns: 32px 1fr; column-gap: 12px; align-items: center; padding: 8px 6px; border-radius: 10px; color: var(--navy); font-weight: 500; }
.quick-links a:hover { background: var(--off-white); color: var(--teal); }
.quick-links .fa { grid-row: span 2; width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; }
.quick-links span { grid-column: 2; font-size: .76rem; font-weight: 400; color: var(--text-muted); }
.contact-grid .contact-form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); }

@media (max-width: 900px) {
  .intent-row, .contact-grid { grid-template-columns: 1fr; }
  .contact-grid .contact-form { order: -1; }   /* phones: the form first */
}
@media (prefers-reduced-motion: reduce) { .intent, .intent-go, .nav-links a.nav-consult .fa-arrow-right { transition: none; } }

/* ───────────── About page ───────────── */
.about-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.about-text { line-height: 1.85; color: var(--text); }
.about-text h2, .about-text h3, .about-text h4 { color: var(--navy); margin: 28px 0 10px; }
.about-img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow); position: sticky; top: 100px; }
.about-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 44px; }
/* The "intent" cards are built for dark heroes; on white they take the navy look */
.about-side { background: linear-gradient(135deg, var(--ink), var(--navy-mid)); border-color: transparent; }
.about-side:hover, .about-side:focus-visible { background: linear-gradient(135deg, var(--navy), var(--navy-mid)); }
@media (max-width: 900px) { .about-grid, .about-sides { grid-template-columns: 1fr; } .about-img { position: static; } }
.team-line { font-size: .88rem; color: var(--text-muted); margin-top: 12px; line-height: 1.65; font-style: italic; }

/* Newsletter signup (blog) */
.newsletter { position: relative; margin-top: 48px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: center;
  padding: 30px 34px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.section-sm .newsletter { margin-top: 0; }
.newsletter-copy { display: flex; gap: 16px; align-items: flex-start; }
.newsletter-ico { width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(13,155,138,.14), rgba(26,95,168,.14)); color: var(--teal); font-size: 1.15rem; }
.newsletter h2 { font-size: 1.25rem; color: var(--navy); margin: 0 0 4px; }
.newsletter p { margin: 0; color: var(--text-muted); font-size: .9rem; }
.newsletter-row { display: flex; gap: 8px; }
.newsletter-row input { flex: 1; min-width: 0; padding: 12px 18px; border-radius: 50px; border: 1px solid var(--gray-200); font: inherit; background: var(--off-white); }
.newsletter-row input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(13,155,138,.15); background: #fff; }
.newsletter-msg { min-height: 1.2em; margin-top: 8px !important; font-size: .84rem; }
.newsletter-msg.is-ok { color: var(--teal); }
.newsletter-msg.is-error { color: #C0392B; }
@media (max-width: 860px) { .newsletter { grid-template-columns: 1fr; padding: 24px; } }
@media (max-width: 480px) { .newsletter-row { flex-direction: column; } }
/* Line of text, then the Consult us button under it */
.hero-actions { flex-direction: column; align-items: flex-start; gap: 14px; max-width: 600px; }
.hero-ask { margin: 0; color: rgba(255,255,255,.75); font-size: .95rem; line-height: 1.5; }

/* ───────────── Small labels everywhere: the theme's quiet style ─────────────
   Same look as "Research Coverage": small, sentence case, no letter-spacing, muted colour.
   On light backgrounds they use --text-muted; on dark ones the soft --mist. */
.filter-box h2, .side-box h2, .growth-card h3, .side-growth h4, .tracked-title,
.kpi-label, .dash-eyebrow, .lib-growth-label, .stat-label, .blog-tag, .blog-kicker,
.post-date, .fc-label, .growth-box h2, .kb-card-title {
  text-transform: none; letter-spacing: 0; font-weight: 500; font-size: .9rem; color: var(--gray-600);
}
.footer-col h4, .hero-stat-label, .hp-live, .hp-sub, .door-kicker, .stat-lbl {
  text-transform: none; letter-spacing: 0; font-weight: 500; font-size: .88rem; color: #C3D1E0;
}
/* The section eyebrows ("Research Coverage", "What we offer", …): same size, readable contrast.
   --mist on white was too faint (about 2:1); gray-600 is about 7:1. */
.section-label { font-size: .9rem; font-weight: 500; color: var(--gray-600); }
.page-hero .section-label, .hero .section-label, .offer-cta .section-label, .blog-cta .section-label { color: #C3D1E0; }
/* Labels that are chips or carry a colour cue keep their colour, only lose the shouting */
.tag-cat { text-transform: none; letter-spacing: 0; font-weight: 500; }
.hp-live { color: #7FD8CC; }
.post-date { background: transparent; padding: 0; }
.blog-kicker { color: var(--teal); }
/* Card headings that were labels keep a small icon beside them */
.growth-card h3 .fa, .filter-box h2 .fa, .kb-card-title .fa { color: var(--teal); margin-right: 4px; }
.footer-col h4 { font-size: .9rem; margin-bottom: 14px; color: #fff; }

/* ───────────── Buy page + related reports ───────────── */
.buy-steps { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; color: #C3D1E0; font-size: .92rem; }
.buy-steps li { display: inline-flex; align-items: center; gap: 10px; }
.buy-steps span { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(18,181,162,.18); color: #7FD8CC; font-size: .8rem; font-weight: 600; }
.buy-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 32px; align-items: start; }
.buy-summary { display: grid; gap: 18px; position: sticky; top: 100px; }
.buy-name { font-size: 1.05rem; color: var(--navy); margin: 0 0 12px; line-height: 1.35; }
.buy-table { width: 100%; min-width: 0; }
.buy-price { display: flex; align-items: baseline; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.buy-price strong { font-size: 2rem; font-weight: 400; color: var(--navy); letter-spacing: -.02em; }
.buy-price span { font-size: .84rem; color: var(--gray-600); }
.buy-grid .contact-form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.kw-chips li span { display: inline-block; padding: 4px 10px; border-radius: 6px; background: var(--off-white); font-size: .78rem; color: var(--gray-600); }

.side-card { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px 22px; background: #fff; }
.side-card-title { font-size: .9rem; font-weight: 500; color: var(--gray-600); margin: 0 0 12px; }
.rel-geo { border: 0; padding: 0; margin: 0 0 10px; }
.rel-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.rel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rel-card { display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; }
.rel-card h3 { font-size: 1.02rem; line-height: 1.35; margin: 0; }
.rel-card h3 a { color: var(--navy); }
.rel-card h3 a:hover { color: var(--teal); }
.rel-card p { margin: 0; font-size: .82rem; color: var(--gray-600); }
.rel-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 12px; }
.rel-actions .btn { padding: 8px 16px; font-size: .82rem; }
@media (max-width: 960px) { .buy-grid { grid-template-columns: 1fr; } .buy-summary { position: static; } .rel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .rel-grid { grid-template-columns: 1fr; } }

/* ───────────── Report text tabs: Summary, Table of Contents, Segmentation ───────────── */
.rc-body { color: var(--text); font-size: 1rem; line-height: 1.8; max-width: 760px; }
.rc-body > p:first-child strong:only-child { display: block; font-size: 1.12rem; font-weight: 500; line-height: 1.55; color: var(--navy);
  padding: 16px 20px; border-left: 3px solid var(--teal); background: var(--off-white); border-radius: 0 var(--radius) var(--radius) 0; }
.rc-body h2, .rc-body h3, .rc-body h4 { color: var(--navy); font-weight: 500; letter-spacing: -.01em; line-height: 1.3; }
.rc-body h2 { font-size: 1.45rem; margin: 36px 0 12px; }
/* Company names in report text: link to the profile, small logo in front */
.rc-body a.co-link { color: var(--blue); font-weight: 500; text-decoration: underline; text-decoration-color: rgba(26,95,168,.3); text-underline-offset: 3px; white-space: nowrap; }
.rc-body a.co-link:hover, .rc-body a.co-link:focus-visible { text-decoration-color: currentColor; }
.rc-body img.co-logo { display: inline-block; width: 16px; height: 16px; max-width: none; margin: 0 5px 0 0; object-fit: contain; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 1px var(--gray-200); vertical-align: -3px; }
/* A list made only of company links (the "Key Players" list) shows as chips */
.rc-body ul:has(> li > a.co-link:only-child) { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rc-body ul:has(> li > a.co-link:only-child) > li { margin: 0; padding: 0; }
.rc-body ul:has(> li > a.co-link:only-child) > li::before { content: none; }
.rc-body li > a.co-link:only-child { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 6px; border: 1px solid var(--gray-200); border-radius: 50px; background: var(--white); color: var(--gray-600); text-decoration: none; font-size: .88rem; line-height: 1.4; }
.rc-body li > a.co-link:only-child:hover, .rc-body li > a.co-link:only-child:focus-visible { border-color: var(--blue); color: var(--blue); }
.rc-body li > a.co-link:only-child img.co-logo { width: 22px; height: 22px; margin: 0; vertical-align: 0; }
/* No logo: first letter in a circle, like .company-initial in the Key Players tab */
.rc-body .co-initial { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-right: 5px; border-radius: 50%; background: var(--gray-100); color: var(--navy); font-size: .62rem; font-weight: 700; line-height: 1; vertical-align: -2px; }
.rc-body li > a.co-link:only-child .co-initial { width: 22px; height: 22px; margin: 0; font-size: .72rem; vertical-align: 0; }
.rc-body h3 { font-size: 1.25rem; margin: 32px 0 10px; }
.rc-body h4 { font-size: 1.05rem; margin: 24px 0 8px; }
.rc-body p { margin: 0 0 14px; }
.rc-body ul, .rc-body ol { margin: 0 0 16px; padding-left: 22px; }
.rc-body li { margin-bottom: 6px; }
.rc-body li p { margin: 0; }
.rc-body li::marker { color: var(--teal); }
.rc-body strong { font-weight: 600; color: var(--navy); }

/* Table of contents: numbered sections in two columns */
.toc-list { list-style: none; padding: 0; margin: 0; columns: 2 320px; column-gap: 28px; max-width: none; }
.rc-body:has(.toc-list) { max-width: none; }
.toc-sec { break-inside: avoid; margin: 0 0 18px; padding: 16px 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.toc-sec h3 { font-size: 1rem; margin: 0 0 8px; display: flex; gap: 10px; align-items: baseline; }
.toc-sec h3 .toc-num { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; border-radius: 8px;
  background: rgba(13,155,138,.12); color: var(--teal); font-size: .82rem; font-weight: 600; }
.toc-sec ul { list-style: none; padding: 0; margin: 0; }
.toc-sec li { font-size: .9rem; color: var(--gray-600); line-height: 1.5; padding: 5px 0; border-top: 1px solid var(--gray-100); margin: 0; }
.toc-sec li:first-child { border-top: 0; }
.toc-sec li .toc-num { display: inline-block; min-width: 38px; color: var(--gray-400); font-variant-numeric: tabular-nums; font-size: .82rem; }
.toc-sec li.toc-l3 { padding-left: 38px; font-size: .86rem; }
.toc-sec li small { display: block; padding-left: 38px; font-size: .78rem; color: var(--gray-400); }

/* Segmentation: one card per dimension */
.rc-body:has(.seg-grid) { max-width: none; }
.seg-intro { max-width: 760px; color: var(--gray-600); }
.seg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.seg-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px 18px; }
.seg-card h3 { font-size: 1rem; margin: 0 0 10px; color: var(--navy); }
.seg-card ul { list-style: none; padding: 0; margin: 0; }
.seg-card li { position: relative; padding: 5px 0 5px 18px; font-size: .9rem; color: var(--gray-600); line-height: 1.45; margin: 0; }
.seg-card li::before { content: ''; position: absolute; left: 2px; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
.seg-card li small { display: block; font-size: .78rem; color: var(--gray-400); margin-top: 2px; }

/* ═══════════════════ Speed (2026-11-08) ═══════════════════
   The home page lagged because the browser had to redraw large blurred shapes on every frame:
   three 760px glows with blur(90px) moving behind the hero, and "frosted glass" boxes
   (backdrop-filter) on top of them that had to re-blur whatever moved underneath.
   The glows are soft gradients already, so they need no blur; the glass boxes get a solid tint. */
.hero-aurora i { filter: none; mix-blend-mode: normal; will-change: transform; }
.hero-aurora i:nth-child(1) { background: radial-gradient(circle, rgba(13,155,138,.55), rgba(13,155,138,.18) 35%, transparent 68%); }
.hero-aurora i:nth-child(2) { background: radial-gradient(circle, rgba(43,124,211,.5), rgba(43,124,211,.16) 35%, transparent 68%); }
.hero-aurora i:nth-child(3) { background: radial-gradient(circle, rgba(94,234,212,.35), rgba(94,234,212,.12) 35%, transparent 68%); }
.navbar, .navbar.scrolled,
body:has(> .navbar + .hero, > .navbar + .page-hero) .navbar,
body:has(> .navbar + .hero, > .navbar + .page-hero) .navbar.scrolled { backdrop-filter: none; -webkit-backdrop-filter: none; }
body:has(> .navbar + .hero, > .navbar + .page-hero) .navbar { transition: background .35s ease, border-color .35s ease, box-shadow .35s ease; }
.hero-strip, .care-link, .hero-chips li, .hero-panel, .float-card, .door, .btn-white, .intent { backdrop-filter: none; -webkit-backdrop-filter: none; }
.hero-panel { background-color: rgba(10,26,48,.86); }
.hero-chips li, .door, .intent, .btn-white { background-color: rgba(255,255,255,.08); }
.float-card { will-change: transform; }
/* These two repainted text and a dot on every frame (background-position and box-shadow
   cannot be handed to the graphics card). The gradient words stay; they just hold still. */
.horizon { animation: none; background-position: 0% 50%; }
.hp-live i { animation: none; box-shadow: 0 0 0 3px rgba(94,234,212,.25); }

/* ═══ Home page: Data playground teaser (includes/playground-teaser.php). Dark in both themes (.keep-dark). ═══ */
.pg-teaser { position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(900px 400px at 85% 10%, rgba(13,155,138,.28), transparent 60%),
              radial-gradient(700px 380px at 0% 100%, rgba(26,95,168,.30), transparent 60%), #071528; }
.pg-teaser-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: center; }
.pg-teaser .section-label { color: #7EE8D7; }
.pg-teaser .offer-title { color: #fff; }
.pg-teaser-copy > p { color: rgba(255,255,255,.75); font-size: 1rem; line-height: 1.65; margin: 14px 0 20px; max-width: 520px; }
.pg-teaser-topics { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 26px; }
.pg-teaser-topics a { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 50px; font-size: .82rem;
  color: rgba(255,255,255,.88); border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.04); transition: background .15s, border-color .15s; }
.pg-teaser-topics a i { color: #3FD3BF; font-size: .78rem; }
.pg-teaser-topics a:hover, .pg-teaser-topics a:focus-visible { background: rgba(63,211,191,.14); border-color: #3FD3BF; color: #fff; }
.pg-teaser-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.pg-teaser-link { color: #7EE8D7; font-weight: 500; font-size: .92rem; }
.pg-teaser-link:hover { color: #fff; }

.pg-teaser-board { padding: 16px; border-radius: 20px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 30px 70px rgba(0,0,0,.35); }
.pg-teaser-bar { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px 12px; font-size: .78rem; color: rgba(255,255,255,.7); }
.pg-teaser-bar i.fa { color: #3FD3BF; margin-right: 5px; }
.pg-teaser-live { display: inline-flex; align-items: center; gap: 6px; }
.pg-teaser-live i { width: 7px; height: 7px; border-radius: 50%; background: #3FD3BF; box-shadow: 0 0 0 4px rgba(63,211,191,.18); }
.pg-teaser-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pg-teaser-tile, .pg-teaser-rank { display: grid; gap: 2px; padding: 12px 12px 8px; border-radius: 14px; color: #fff;
  background: rgba(7,21,40,.65); border: 1px solid rgba(255,255,255,.10); transition: border-color .15s, transform .15s; }
.pg-teaser-tile:hover, .pg-teaser-rank:hover, .pg-teaser-tile:focus-visible, .pg-teaser-rank:focus-visible { border-color: #3FD3BF; color: #fff; transform: translateY(-2px); }
.pg-teaser-tname { font-size: .72rem; color: rgba(255,255,255,.7); line-height: 1.35; min-height: 2.7em; }
.pg-teaser-tname i { color: #3FD3BF; margin-right: 3px; }
.pg-teaser-tile strong { font-size: 1.7rem; font-weight: 500; letter-spacing: -.02em; line-height: 1.1; }
.pg-teaser-unit { font-size: .66rem; color: rgba(255,255,255,.55); }
.pg-teaser-ch { font-size: .7rem; font-weight: 600; }
.pg-teaser-ch.is-up { color: #3FD3BF; } .pg-teaser-ch.is-down { color: #FF8A80; }
.pg-teaser-tile svg { width: 100%; height: 40px; margin-top: 6px; }
.pg-teaser-area { fill: rgba(63,211,191,.16); }
.pg-teaser-line { fill: none; stroke: #3FD3BF; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pg-teaser-rank { margin-top: 10px; padding-bottom: 12px; }
.pg-teaser-rank .pg-teaser-tname { min-height: 0; margin-bottom: 6px; }
.pg-teaser-rank ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.pg-teaser-rank li { display: grid; grid-template-columns: minmax(0, 150px) 1fr 70px; align-items: center; gap: 10px; font-size: .8rem; }
.pg-teaser-place { display: flex; align-items: center; gap: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-teaser-place .flag { width: 18px; height: 13px; }
.pg-teaser-barwrap { height: 8px; border-radius: 6px; background: rgba(255,255,255,.08); overflow: hidden; }
.pg-teaser-barwrap span { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #16807A, #3FD3BF); }
.pg-teaser-val { text-align: right; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.85); }
@media (max-width: 980px) { .pg-teaser-grid { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 560px) { .pg-teaser-tiles { grid-template-columns: 1fr; } .pg-teaser-rank li { grid-template-columns: minmax(0, 1fr) 70px 60px; } }
@media (prefers-reduced-motion: reduce) { .pg-teaser-tile, .pg-teaser-rank, .pg-teaser-topics a { transition: none; transform: none !important; } }

/* ═══ Hero carousel: "Market reports" / "Health data" switch above the panel (index.php) ═══ */
.hero-switch { position: relative; display: flex; width: fit-content; gap: 4px; padding: 4px; margin: 0 auto 14px; border-radius: 12px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }   /* centred over the panel */
.hero-switch [role=tab] { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border: 0; border-radius: 9px; cursor: pointer;
  background: none; color: rgba(255,255,255,.7); font: inherit; font-size: .82rem; font-weight: 500; transition: background .2s, color .2s; }
.hero-switch [role=tab] i { font-size: .76rem; }
.hero-switch [role=tab]:hover { color: #fff; }
.hero-switch [role=tab][aria-selected="true"] { background: rgba(63,211,191,.18); color: #fff; box-shadow: inset 0 0 0 1px rgba(63,211,191,.45); }
.hero-switch [role=tab]:focus-visible { outline: 2px solid #3FD3BF; outline-offset: 2px; }
.hero-panel[hidden] { display: none; }
.hero-panel.slide-in { animation: hero-slide-in .45s cubic-bezier(.2,.8,.2,1) both; }
@keyframes hero-slide-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
/* Health data slide: blue accents so it reads as a different view */
.hero-data .hp-live i { background: #82B4F0; box-shadow: 0 0 0 4px rgba(130,180,240,.2); }
.hero-data .hp-figs strong { color: #A3C8F5; }
.hero-data .hp-figs span { font-size: .72rem; }
.hero-data .hp-dots i.on { background: #82B4F0; }
.hd-open { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: .78rem; font-weight: 500; color: #A3C8F5; }
.hd-open:hover { color: #fff; }
@media (prefers-reduced-motion: reduce) { .hero-panel.slide-in { animation: none; } .hero-switch [role=tab] { transition: none; } }

/* ═══ Page pop-up in the bottom corner (includes/nudge.php, js/main.js) ═══ */
.nudge { position: fixed; right: 20px; bottom: 20px; z-index: 1500; width: min(370px, calc(100vw - 32px)); padding: 18px 18px 14px;
  background: #fff; color: var(--text); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 60px rgba(11,31,58,.25);
  opacity: 0; transform: translateY(16px); transition: opacity .25s ease, transform .25s ease; }
.nudge.is-in { opacity: 1; transform: none; }
.nudge[hidden] { display: none; }
.nudge-x { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border: 0; border-radius: 8px; background: none; color: var(--text-muted); cursor: pointer; }
.nudge-x:hover { background: var(--gray-100); color: var(--text); }
.nudge-x:focus-visible, .nudge a:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.nudge-head { display: flex; gap: 12px; padding-right: 26px; margin-bottom: 14px; }
.nudge-ic { width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  color: var(--teal); background: rgba(13,155,138,.12); font-size: .95rem; }
.nudge-head h2 { margin: 0 0 3px; font-size: 1rem; font-weight: 600; color: var(--navy); letter-spacing: 0; line-height: 1.3; }
.nudge-head p { margin: 0; font-size: .82rem; line-height: 1.45; color: var(--text-muted); }
.nudge-main { width: 100%; justify-content: center; gap: 8px; padding: 10px 16px; font-size: .88rem; }
.nudge .newsletter-row input { padding: 9px 14px; font-size: .86rem; }
.nudge .newsletter-row .btn { padding: 9px 16px; font-size: .84rem; }
.nudge .newsletter-msg { margin-top: 6px !important; font-size: .78rem; min-height: 0; }
.nudge .newsletter-msg:empty { display: none; }
.nudge-links { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: .8rem; }
.nudge-links a { color: var(--teal); font-weight: 500; }
.nudge-links i { margin-right: 4px; font-size: .74rem; }
html[data-theme="dark"] .nudge { background: #0F1A2B; border-color: var(--line); box-shadow: 0 24px 60px rgba(0,0,0,.6); }
html[data-theme="dark"] .nudge-head h2 { color: var(--text); }
html[data-theme="dark"] .nudge .newsletter-row input { background: #0B1424; border-color: var(--line); color: var(--text); }
@media (max-width: 480px) { .nudge { right: 8px; bottom: 8px; } }
@media (prefers-reduced-motion: reduce) { .nudge { transition: none; transform: none; } }

/* Hero carousel: both slides share one grid cell, so the box is always as tall as the taller slide
   and nothing below it moves when they switch. The slide not showing keeps its space but is invisible
   (visibility also takes it out of the tab order and screen readers). The chart grows to fill. */
.hero-panel-wrap:has(> #heroData) { display: grid; }
.hero-panel-wrap:has(> #heroData) > .hero-panel { grid-area: 1 / 1; display: flex; flex-direction: column; }
.hero-panel-wrap:has(> #heroData) > .hero-panel[hidden] { display: flex; visibility: hidden; }
.hero-panel-wrap:has(> #heroData) .hp-chart { flex: 1 1 110px; min-height: 110px; }
/* Market names are kept to two lines so the panel never changes height while it cycles */
.hp-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }

/* Nav: Dashboard link before Reports, with a small globe in the brand teal */
.nav-links a.nav-dash i { color: #3FD3BF; margin-right: 3px; font-size: .78rem; }
/* Home pop-up: a 2×2 menu of places to go */
.nudge-choices { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.nudge-choices a { display: flex; align-items: flex-start; gap: 9px; height: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 12px;
  color: var(--text); transition: border-color .15s, background .15s; }
.nudge-choices a:hover, .nudge-choices a:focus-visible { border-color: var(--teal); background: rgba(13,155,138,.06); color: var(--text); }
.nudge-choices i { margin-top: 2px; color: var(--teal); font-size: .9rem; width: 16px; text-align: center; }
.nudge-choices span { display: grid; gap: 1px; min-width: 0; }
.nudge-choices strong { font-size: .82rem; font-weight: 600; line-height: 1.3; color: var(--navy); }
.nudge-choices small { font-size: .7rem; color: var(--text-muted); line-height: 1.35; }
html[data-theme="dark"] .nudge-choices strong { color: var(--text); }
@media (prefers-reduced-motion: reduce) { .nudge-choices a { transition: none; } }

/* Footer logo: larger (the file is 4x size, so it stays sharp) */
.footer-logo-img { height: 72px; margin-bottom: 18px; }
@media (max-width: 600px) { .footer-logo-img { height: 60px; } }

/* Hero: a short "who we are" above the question and the Consult us button */
.hero-about { padding: 14px 16px; border-left: 2px solid #3FD3BF; background: rgba(255,255,255,.04); border-radius: 0 12px 12px 0; }
.hero-about p { margin: 0 0 10px; color: rgba(255,255,255,.82); font-size: .95rem; line-height: 1.6; }
.hero-about strong { color: #fff; font-weight: 600; }
.hero-about-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; font-size: .8rem; color: rgba(255,255,255,.7); }
.hero-about-tags i { color: #3FD3BF; margin-right: 4px; font-size: .74rem; }
.hero-about-tags a { color: #7EE8D7; font-weight: 500; }
.hero-about-tags a:hover { color: #fff; }
.hero-about-tags a .fa-arrow-right { margin: 0 0 0 4px; color: inherit; }