/* ── Inter, self-hosted (variable, 300-700) ──────────────────────────────
   Was loaded render-blocking from fonts.googleapis.com. Serving it from our
   own origin removes two DNS lookups, two TLS handshakes and a third-party
   stylesheet from the critical path, which is worth most on the high-latency
   mobile networks our target markets use. Subsets: latin, latin-ext,
   vietnamese (Vietnam is a named market). Browsers fetch only what the page
   actually needs, so an English page downloads the 48 KB latin file alone. */
@font-face {
  font-family: 'Noto Sans Arabic';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/noto-sans-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/inter-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* ── Reset & base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #0a0a0a;
  --bg-alt:    #111111;
  --surface:   #1a1a1a;
  --border:    rgba(255,255,255,0.08);
  --text:      #e8e8e8;
  --muted:     #888888;
  --accent:    #4ecdc4;
  --accent-dk: #3ab5ac;
  --white:     #ffffff;
  --radius:    12px;
  --max-w:     1200px;
  --nav-h:     82px;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', 'Noto Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

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

/* ── Typography ── */
h1 { font-size: clamp(3.2rem, 5.5vw, 5.2rem); font-weight: 700; line-height: 1.08; color: var(--white); }
h2 { font-size: clamp(2.4rem, 4vw, 3.4rem); font-weight: 700; line-height: 1.12; color: var(--white); }
h3 { font-size: 1.35rem; font-weight: 600; color: var(--white); margin-bottom: 0.6rem; }
h4 { font-size: 1.15rem; font-weight: 600; color: var(--white); margin-bottom: 0.5rem; }
h5 { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 1rem; }
p { color: var(--text); margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

/* ── Layout helpers ── */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
.section { padding: 130px 0; }
.section-alt { background: var(--bg-alt); }
.section-intro { margin-bottom: 60px; }
.section-intro h2 { margin-top: 0.4rem; }
.text-center { text-align: center; }

.section-label {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.75rem;
}

/* ── Buttons ── */
.btn {
  display: inline-block;
  padding: 13px 32px;
  border-radius: 6px;
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  white-space: nowrap;
}
.btn-primary {
  background: var(--accent);
  color: #0a0a0a;
}
.btn-primary:hover { background: var(--accent-dk); }
.btn-outline {
  border: 1.5px solid var(--accent);
  color: var(--accent);
  margin-top: 1.5rem;
}
.btn-outline:hover { background: var(--accent); color: #0a0a0a; }

/* ── NAV ── */
.nav-wrapper {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: background 0.3s, backdrop-filter 0.3s, box-shadow 0.3s;
}
.nav-wrapper.scrolled {
  background: rgba(10,10,10,0.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--border);
}
.nav {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-logo img { height: 44px; width: auto; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 40px;
}
.nav-links a {
  font-size: 1.05rem;
  font-weight: 500;
  color: rgba(255,255,255,0.75);
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--white); }
.nav-links .nav-cta {
  background: var(--accent);
  color: #0a0a0a;
  padding: 8px 20px;
  border-radius: 6px;
  font-weight: 600;
}
.nav-links .nav-cta:hover { background: var(--accent-dk); }
.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--white);
  font-size: 1.5rem;
  cursor: pointer;
  position: relative;
}
/* The button's box IS the glyph: 21x29, under the 44px minimum touch target,
   on every page and in mobile-heavy markets. Extend the HIT AREA with a
   centred pseudo-element rather than resizing the button, so the glyph does
   not move (it is the last flex item in a space-between nav, so growing it
   would shift it left) and RTL needs no directional override. */
.nav-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
}

/* ── HERO ── */
.hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background-image: url("images/hero-radcam.webp");
  background-size: cover;
  background-position: center 70%;
  background-color: var(--bg);
  transform: scale(1.03);
  transition: transform 12s ease-out;
}
/* Smaller hero source on narrow viewports: cuts ~180KB off mobile LCP */
@media (max-width: 900px) {
  .hero-bg { background-image: url("images/hero-radcam-sm.webp"); }
}
.hero:hover .hero-bg { transform: scale(1); }
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.35) 0%,
    rgba(0,0,0,0.55) 60%,
    rgba(10,10,10,1) 100%
  );
}
.hero-content {
  position: relative;
  z-index: 1;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
  padding-top: var(--nav-h);
}
.hero-eyebrow {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}
.hero h1 { margin-bottom: 1.2rem; max-width: 700px; }
.hero-sub {
  font-size: 1.35rem;
  color: rgba(255,255,255,0.72);
  max-width: 620px;
  margin-bottom: 2.5rem;
}

/* ── ACCREDITATION STRIP ── */
.accred-strip {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 36px 0;
}
.accred-inner {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}
.accred-label {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.accred-badges {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
.accred-badge {
  display: flex;
  align-items: center;
  gap: 12px;
}
.accred-badge svg {
  width: 28px;
  height: 28px;
  color: var(--accent);
  flex-shrink: 0;
}
.accred-badge strong {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.04em;
  line-height: 1.2;
}
.accred-badge span {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.4;
}
.accred-divider {
  width: 1px;
  height: 36px;
  background: var(--border);
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .accred-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
  .accred-divider { width: 40px; height: 1px; }
}

/* ── SPLIT sections ── */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: center;
}
.split-reverse .split-media { order: -1; }
.split-text h2 { margin-top: 0.4rem; margin-bottom: 1.5rem; }
.split-text p { color: rgba(255,255,255,0.65); }

/* ── 2×2 Image grid ── */
.image-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.image-grid-item {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 1/1;
  background: var(--surface);
}
.image-grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.image-grid-item:hover img { transform: scale(1.04); }

/* ── Single media ── */
.split-media-single { display: flex; justify-content: center; }
.rounded-img {
  width: 100%;
  max-width: 520px;
  border-radius: var(--radius);
  object-fit: cover;
  aspect-ratio: 4/3;
}

/* ── Feature cards ── */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px 28px;
  transition: border-color 0.2s, transform 0.2s;
}
.card:hover {
  border-color: rgba(78,205,196,0.3);
  transform: translateY(-4px);
}
.card-icon {
  width: 44px;
  height: 44px;
  color: var(--accent);
  margin-bottom: 1.2rem;
}
.card-icon svg { width: 100%; height: 100%; }
.card p { font-size: 1rem; color: rgba(255,255,255,0.6); }

/* ── Contact section ── */
.contact-section { background: var(--bg); }
.contact-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.contact-text h2 { margin-top: 0.4rem; margin-bottom: 1rem; }
.contact-text p { color: rgba(255,255,255,0.6); margin-bottom: 1.5rem; }
.contact-email {
  display: inline-block;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--accent);
  transition: color 0.2s;
}
.contact-email:hover { color: var(--accent-dk); }
.contact-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px;
}
.contact-card h4 { margin-bottom: 0.75rem; }
.contact-card p { color: rgba(255,255,255,0.6); margin-bottom: 1.5rem; }

/* ── FOOTER ── */
.footer {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  overflow: hidden;
  position: relative;
}
.footer-skyline {
  width: 100%;
  background: var(--bg);
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  padding: 0 24px;
  opacity: 0.4;
  pointer-events: none;
  margin: 0;
  line-height: 0;   /* removes any inline gap below the img */
}
.footer-skyline img {
  max-width: 420px;
  width: 36%;
  display: block;
  object-fit: contain;
  vertical-align: bottom;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: 60px;
  padding-top: 48px;
  padding-bottom: 48px;
}
.footer-logo { height: 32px; width: auto; margin-bottom: 1rem; }
.footer-left p { font-size: 0.95rem; color: var(--muted); }
.footer-links a, .footer-contact a {
  display: block;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.55);
  margin-bottom: 0.6rem;
  transition: color 0.2s;
}
.footer-links a:hover, .footer-contact a:hover { color: var(--accent); }
.footer-bottom {
  border-top: 1px solid var(--border);
  padding: 20px 0;
}
.footer-bottom p {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0;
}

/* ── HERO STATS BAR ── */
.hero-stats-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 0;
  background: rgba(10,10,10,0.75);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255,255,255,0.08);
}
.hero-stat {
  flex: 1;
  max-width: 260px;
  padding: 20px 24px;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,0.08);
}
.hero-stat:last-child { border-right: none; }
.hero-stat strong {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.02em;
  line-height: 1.3;
  margin-top: 3px;
  /* Was nowrap, which CLIPPED the long "Serving" value and silently hid the last
     region below ~1000px. The other three values are short enough never to wrap. */
  white-space: normal;
  text-wrap: balance;
}
/* The "Serving" value carries a region list and needs more room than a 2-word stat. */
.hero-stat:last-child { max-width: 330px; }
.hero-stat span {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  white-space: nowrap;
}

/* ── SECTION HEADER ── */
.section-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 72px;
}
.section-header h2 { margin-top: 0.4rem; }
.section-sub {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.55);
  margin-top: 0.75rem;
}

/* ── SERVICE CARDS ── */
.service-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.service-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.25s, transform 0.25s;
  cursor: pointer;
  min-width: 0;
}
.service-card:hover {
  border-color: rgba(78,205,196,0.35);
}
.service-card-img {
  height: 208px;
  overflow: hidden;
  background: var(--bg-alt);
  flex-shrink: 0;
}
.service-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* No zoom: the reveal panel covers the image on hover, so it was motion
   nobody could see, and the card itself is deliberately still. */
.service-card-body {
  padding: 18px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.service-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(78,205,196,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  flex-shrink: 0;
}
.service-card-icon svg {
  width: 20px;
  height: 20px;
  color: var(--accent);
}
.service-card-body h3 { margin-bottom: 0; font-size: 1.2rem; }
.service-card-body p { color: rgba(255,255,255,0.6); font-size: 0.92rem; flex: 1; line-height: 1.6; }
.service-card-link {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.02em;
}

/* ── TRAINING TEASER (home page) ── */
.training-teaser {
  margin-top: 36px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 40px 48px;
}
.training-teaser-inner {
  display: flex;
  align-items: center;
  gap: 48px;
}
.training-teaser-text {
  flex: 1;
}
.training-teaser-text h3 {
  font-size: 1.5rem;
  margin-top: 0.4rem;
  margin-bottom: 0.6rem;
}
.training-teaser-text p {
  color: rgba(255,255,255,0.6);
  font-size: 1rem;
  line-height: 1.65;
  margin: 0;
}
.training-teaser-text p + p { margin-top: 0.9rem; }
.training-teaser-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}
.training-teaser-actions .btn {
  white-space: nowrap;
  text-align: center;
}
@media (max-width: 900px) {
  .training-teaser { padding: 28px 24px; }
  .training-teaser-inner { flex-direction: column; align-items: flex-start; gap: 24px; }
}

/* ── FAQ ── */
.faq-section { background: var(--bg); }
.faq-list {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.faq-item {
  border-bottom: 1px solid var(--border);
}
.faq-item:first-child {
  border-top: 1px solid var(--border);
}
.faq-question {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 0;
  cursor: pointer;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--white);
  gap: 16px;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after {
  content: '+';
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--accent);
  flex-shrink: 0;
  line-height: 1;
  transition: transform 0.2s ease;
}
details[open] .faq-question::after {
  content: '−';
}
.faq-answer {
  padding: 0 0 22px;
  color: var(--muted);
  font-size: 0.97rem;
  line-height: 1.75;
  max-width: 720px;
}

/* ── CTA BANNER ── */
.cta-banner {
  background: linear-gradient(135deg, rgba(78,205,196,0.12) 0%, rgba(78,205,196,0.04) 100%);
  border-top: 1px solid rgba(78,205,196,0.2);
  border-bottom: 1px solid rgba(78,205,196,0.2);
  padding: 100px 0;
}
.cta-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.cta-banner h2 { margin-bottom: 0.5rem; }
.cta-banner p { color: rgba(255,255,255,0.6); margin: 0; }

/* ── PAGE BANNER (inner pages) ── */
.page-banner {
  padding: calc(var(--nav-h) + 72px) 0 72px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
}
.page-banner-label {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.75rem;
}
.page-banner h1 {
  font-size: clamp(2.2rem, 4vw, 3rem);
  margin-bottom: 1rem;
}
.page-banner p {
  font-size: 1.2rem;
  color: rgba(255,255,255,0.6);
  max-width: 580px;
}

/* ── SERVICE DETAIL (services page) ── */
.service-detail {
  scroll-margin-top: calc(var(--nav-h) + 20px);
}
.service-detail + .service-detail {
  border-top: 1px solid var(--border);
}
.service-list {
  list-style: none;
  margin: 1.5rem 0;
}
.service-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 0.65rem;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.65);
}
.service-list li::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: 9px;
  flex-shrink: 0;
}

/* ── TEAM / BIO CARDS ── */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin-top: 48px;
}
.bio-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px 32px;
}
.bio-card h3 { margin-bottom: 0.2rem; }
.bio-card .bio-title {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.2rem;
}
.bio-card p { color: rgba(255,255,255,0.6); font-size: 0.95rem; }
.bio-creds {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 1.2rem;
}
.bio-cred-tag {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 4px 12px;
  border-radius: 20px;
  background: rgba(78,205,196,0.1);
  border: 1px solid rgba(78,205,196,0.25);
  color: var(--accent);
}

/* ── VALUES / ICON ROWS ── */
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

/* ── CONTACT FORM ── */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
  align-items: start;
}
.contact-info h2 { margin-top: 0.4rem; margin-bottom: 1rem; }
.contact-info p { color: rgba(255,255,255,0.6); }
.contact-info-block {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.contact-info-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(78,205,196,0.1);
  border: 1px solid rgba(78,205,196,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-info-icon svg {
  width: 20px;
  height: 20px;
  color: var(--accent);
}
.contact-info-item h5 {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  margin-bottom: 0.2rem;
}
.contact-info-item p { margin: 0; font-size: 0.95rem; color: rgba(255,255,255,0.65); }
.contact-info-item a { color: var(--accent); transition: color 0.2s; }
.contact-info-item a:hover { color: var(--accent-dk); }

.contact-form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 44px 40px;
}
.contact-form-card h3 { margin-bottom: 1.5rem; }
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-group {
  margin-bottom: 20px;
}
.form-group label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--text);
  transition: border-color 0.2s;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
.form-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%23888888' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  padding-right: 36px;
}
.form-group select option { background: var(--surface); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--accent);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--muted); opacity: 0.6; }
.form-group textarea { resize: vertical; min-height: 120px; }
.form-submit { margin-top: 8px; width: 100%; text-align: center; padding: 15px; font-size: 1rem; }
.form-notice {
  font-size: 0.8rem;
  color: var(--muted);
  text-align: center;
  margin-top: 12px;
}
.form-success {
  display: none;
  text-align: center;
  padding: 24px;
  color: var(--accent);
  font-weight: 600;
}
/* honeypot */
.hp-field { display: none !important; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .split, .split-reverse { grid-template-columns: 1fr; gap: 48px; }
  .split-reverse { direction: ltr; }
  .cards { grid-template-columns: 1fr; gap: 16px; }
  .contact-inner { grid-template-columns: 1fr; gap: 40px; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer-left { grid-column: 1 / -1; }
  .service-cards { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .cta-banner-inner { flex-direction: column; text-align: center; }
  .contact-grid { grid-template-columns: 1fr; gap: 48px; }
  .team-grid { grid-template-columns: 1fr; gap: 24px; }
  .values-grid { grid-template-columns: 1fr; gap: 16px; }
  .contact-form-card { padding: 32px 24px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .hero-stats-bar { display: none; }
}

@media (max-width: 640px) {
  .section { padding: 72px 0; }
  .nav-links {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    position: absolute;
    top: var(--nav-h);
    left: 0; right: 0;
    background: rgba(10,10,10,0.97);
    padding: 16px 24px 24px;
    border-bottom: 1px solid var(--border);
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 0; width: 100%; border-bottom: 1px solid var(--border); }
  .nav-links .nav-cta { background: none; padding: 12px 0; color: var(--accent); border-bottom: none; }
  .nav-toggle { display: block; }
  .footer-inner { grid-template-columns: 1fr; gap: 28px; }
  .footer-left { grid-column: auto; }
  .footer-skyline img { width: 65%; max-width: 260px; }
  .service-cards { grid-template-columns: 1fr; gap: 16px; }
  .training-teaser-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
  /* nowrap on this label forced a 452px document on a 375px viewport */
  .accred-label { white-space: normal; text-align: center; }
  /* .btn is nowrap by default; translated labels run 20-30% longer than the
     English and pushed the document to 538px on a 375px viewport. */
  .btn { white-space: normal; }
  /* .training-teaser-actions .btn is (0,2,0) and outranks the .btn reset above,
     so those two buttons kept nowrap at mobile. A media query adds no
     specificity, so the reset has to be restated at the same weight. */
  .training-teaser-actions .btn { white-space: normal; }
}


/* ── Governance / pilot additions ── */
.cards-four { grid-template-columns: repeat(4, 1fr); }
.pilot-panel {
  display: grid;
  grid-template-columns: 1.35fr 0.9fr;
  gap: 48px;
  align-items: stretch;
  background: linear-gradient(135deg, rgba(78,205,196,0.12), rgba(255,255,255,0.025));
  border: 1px solid rgba(78,205,196,0.22);
  border-radius: var(--radius);
  padding: 52px;
}
.pilot-copy p { color: rgba(255,255,255,0.68); }
.pilot-steps {
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: center;
}
.pilot-steps div {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 14px;
  align-items: center;
  background: rgba(10,10,10,0.45);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
}
.pilot-steps strong {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #0a0a0a;
}
.pilot-steps span { color: rgba(255,255,255,0.78); font-weight: 600; }
.stage-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.stage-strip div {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(10,10,10,0.45);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px;
}
.stage-strip strong {
  width: 34px; height: 34px;
  flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #0a0a0a;
}
.stage-strip span { color: rgba(255,255,255,0.78); font-weight: 600; }
@media (max-width: 1100px) { .stage-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .stage-strip { grid-template-columns: 1fr; } }
.evidence-card {
  background: var(--surface);
  border: 1px solid rgba(78,205,196,0.22);
  border-radius: var(--radius);
  padding: 36px 32px;
}
.evidence-card h3 { margin-bottom: 1.2rem; }
.check-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.check-list li { position: relative; padding-left: 28px; color: rgba(255,255,255,0.68); }
.check-list li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 700; }
.narrow { max-width: 860px; }
.legal-content h2 { margin-bottom: 1.2rem; }
.legal-content h3 { margin-top: 2rem; }
.legal-content a { color: var(--accent); }
/* 404 sitemap-style link list */
.link-list { list-style: disc; padding-left: 1.25rem; margin: 1.2rem 0 2rem; }
.link-list li { margin-bottom: 0.6rem; color: var(--muted); }
.link-list a { color: var(--accent); font-weight: 500; }
.footer-legal-note, .footer-small { font-size: 0.82rem !important; color: rgba(255,255,255,0.45) !important; margin-top: 1rem !important; }
.sleek-form-card {
  background: linear-gradient(180deg, rgba(26,26,26,1), rgba(13,13,13,1));
  box-shadow: 0 24px 80px rgba(0,0,0,0.32);
  border-color: rgba(78,205,196,0.18);
}
.form-card-header { margin-bottom: 28px; }
.form-card-header h3 { margin-bottom: .4rem; }
.form-card-header p { color: rgba(255,255,255,0.58); margin: 0; }
.form-group label span { color: var(--accent); }
.form-notice a { color: var(--accent); }
.privacy-check {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  margin: 8px 0 20px;
  color: rgba(255,255,255,0.62);
  font-size: 0.86rem;
  line-height: 1.5;
}
.privacy-check input { margin-top: 4px; accent-color: var(--accent); }
.privacy-check a { color: var(--accent); }
@media (max-width: 1100px) { .cards-four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
  .pilot-panel { grid-template-columns: 1fr; padding: 36px 28px; }
}
@media (max-width: 640px) {
  .hero h1 { font-size: clamp(2.65rem, 12vw, 3.25rem); }
  .hero-eyebrow { font-size: 0.75rem; letter-spacing: 0.1em; }
  .hero-sub { font-size: 1.08rem; margin-bottom: 1.8rem; }
  .cards-four { grid-template-columns: 1fr; }
  .pilot-panel { padding: 28px 20px; }
  .pilot-steps div { grid-template-columns: 40px 1fr; }
}

/* ── Governance domains: grouped lists (replaced the 8-box card grid) ── */
.gov-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 44px 64px; }
.def-list { list-style: none; display: flex; flex-direction: column; gap: 20px; }
.def-list li { padding-left: 18px; border-left: 2px solid rgba(78,205,196,0.28); }
.def-list strong { display: block; color: #fff; font-weight: 600; font-size: 1rem; margin-bottom: 5px; }
.def-list span { display: block; color: rgba(255,255,255,0.6); font-size: 0.95rem; line-height: 1.7; }
@media (max-width: 900px) { .gov-groups { grid-template-columns: 1fr; gap: 40px; } }


/* ── RTL (Arabic pages) ─────────────────────────────────────────────────
   Scoped to [dir="rtl"] so none of this can reach an LTR page. Flex and grid
   mirror themselves from the dir attribute; only the hand-written directional
   offsets below need restating. */
[dir="rtl"] .def-list li {
  padding-left: 0;
  padding-right: 18px;
  border-left: none;
  border-right: 2px solid rgba(78,205,196,0.28);
}
[dir="rtl"] .check-list li { padding-left: 0; padding-right: 28px; }
[dir="rtl"] .check-list li::before { left: auto; right: 0; }
[dir="rtl"] .link-list { padding-left: 0; padding-right: 1.25rem; }
[dir="rtl"] .training-teaser { border-left: none; border-right: 3px solid var(--accent); }
[dir="rtl"] .hero-stat { border-right: none; border-left: 1px solid rgba(255,255,255,0.08); }
[dir="rtl"] .hero-stat:last-child { border-left: none; }
/* Latin runs (SCMR, DICOM, CAD-RADS, Oxcardio) inside Arabic prose */
[dir="rtl"] .lang-en { unicode-bidi: isolate; direction: ltr; }
/* Arabic renders taller than Latin at the same size; give it room */
[dir="rtl"] { line-height: 1.85; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { line-height: 1.4; }
[dir="rtl"] .page-banner-label, [dir="rtl"] .section-label { letter-spacing: 0; }
/* Language switcher on the English page carries Arabic glyphs. Render it with
   whatever Arabic face the OS already has, so that page never downloads the
   166 KB Noto webfont for a single link. */
.lang-switch { font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; }


/* ── Cookie consent banner ──────────────────────────────────────────────
   GA4 is not loaded at all until Accept is pressed (see cookies.js), so this
   bar is the actual gate, not a notice about one.
   The two buttons sit in a FIXED-WIDTH grid of two equal columns, so they are
   identical regardless of label length. That matters here: Decline/Accept
   differ in English and far more in Arabic, French and Indonesian. */
.cookie-banner {
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 9999;
  max-width: 880px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 28px;
  padding: 16px 20px;
  /* Near-opaque so the panel stays legible over the busy hero even where
     the panel never depends on backdrop-filter, which is patchy on older
     Android in our markets AND forces a separate compositing layer that some
     renderers get wrong. At this opacity a blur adds nothing, so there is none. */
  background: rgba(16,16,16,0.985);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 10px;
  box-shadow: 0 16px 44px rgba(0,0,0,0.5);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.32s ease, transform 0.32s cubic-bezier(0.22,0.61,0.36,1);
}
.cookie-banner.is-in { opacity: 1; transform: translateY(0); }
.cookie-text { min-width: 0; }
.cookie-head {
  margin: 0 0 3px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--white);
  letter-spacing: 0.01em;
}
.cookie-text p:last-child {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.6);
  max-width: 66ch;
}
.cookie-banner a { color: var(--accent); text-decoration: none; }
.cookie-banner a:hover { text-decoration: underline; }

/* Fixed width + two equal columns = two identical buttons in every language. */
.cookie-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  width: 232px;
}
/* Rectangular, black, mint on hover. Both actions share one look: equal
   prominence for accept and decline is the pattern regulators prefer, and it
   avoids nudging the visitor toward accepting. */
.cookie-actions .btn {
  width: 100%;
  /* .btn-outline carries margin-top: 1.5rem for prose use; unset it here or it
     sets the grid row height and the two buttons stop matching. */
  margin: 0;
  align-self: stretch;
  padding: 9px 6px;
  font-size: 0.8rem;
  line-height: 1.2;
  border-radius: 4px;
  white-space: nowrap;
  background: #0d0d0d;
  color: rgba(255,255,255,0.88);
  border: 1px solid rgba(255,255,255,0.16);
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.cookie-actions .btn:hover,
.cookie-actions .btn:focus-visible {
  background: var(--accent);
  color: #0a0a0a;
  border-color: var(--accent);
}
.cookie-actions .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 860px) {
  .cookie-banner { grid-template-columns: 1fr; gap: 20px; }
  .cookie-actions { width: 100%; }
}
@media (max-width: 640px) {
  .cookie-banner { left: 10px; right: 10px; bottom: 10px; padding: 14px 16px; gap: 14px; }
  .cookie-text p:last-child { font-size: 0.76rem; }
  /* Desktop is deliberately compact, but a touch target should stay ~44px. */
  .cookie-actions .btn { padding: 14px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .cookie-banner { transition: none; opacity: 1; transform: none; }
}

/* ── Nav: burger from 1080px, not 640px ───────────────────────────────────
   Added 2026-09-02, with the CMRplan nav item.

   Between 641px and ~1080px the horizontal nav had more items than fit, and
   the links wrapped underneath the logo. Measured before any change was made:
   the TRANSLATED navs were ALREADY broken — fr and id below 1024px, ar below
   830px — because they carry an extra "English" switcher. Adding a sixth item
   to the English nav broke English below 950px as well.

   Raising the burger breakpoint fixes both the new case and the pre-existing
   one. These rules duplicate only the NAV half of the 640px block above; that
   block still owns the phone layout for everything else, and re-applying these
   below 640px is harmless because they are identical. */
@media (max-width: 1080px) {
  .nav-links {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    position: absolute;
    top: var(--nav-h);
    left: 0; right: 0;
    background: rgba(10,10,10,0.97);
    padding: 16px 24px 24px;
    border-bottom: 1px solid var(--border);
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 0; width: 100%; border-bottom: 1px solid var(--border); }
  .nav-links .nav-cta { background: none; padding: 12px 0; color: var(--accent); border-bottom: none; }
  .nav-toggle { display: block; }
}

/* ── Service cards: title by default, detail slides up on hover ────────────
   Added 2026-09-03. The <p> and the link moved inside .service-card-img as an
   overlay panel, so the card shows image + title at rest and the detail rises
   over the image on hover.

   NO LAYOUT SHIFT BY CONSTRUCTION: the panel is absolutely positioned inside
   the fixed 160px image box, so the card's height never changes and the grid
   row cannot resize when one card is hovered.

   Curve is the site's existing cubic-bezier(0.22,0.61,0.36,1), not a new one. */

.service-card-reveal { padding: 0 28px 28px; }
.service-card-reveal p { margin: 0; }

@media (hover: hover) and (pointer: fine) {
  /* Pointer devices only. On touch the panel stays in normal flow below the
     title and every card reads in full, because a tap cannot hover and the
     descriptions are the substance of the section. */
  .service-card-img { position: relative; }

  .service-card-reveal {
    position: absolute;
    inset: 0;
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.8rem;
    background: rgba(10, 10, 10, 0.9);
    transform: translateY(100%);
    opacity: 0;
    transition: transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1),
                opacity   180ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .service-card-reveal p {
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.92rem;
    line-height: 1.6;
  }
  .service-card-reveal .service-card-link { margin-top: 0; }

  .service-card:hover .service-card-reveal,
  .service-card:focus-visible .service-card-reveal {
    transform: translateY(0);
    opacity: 1;
  }
  /* The card is the <a>, so keyboard focus reveals the panel too. */
  .service-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  /* Keep the reveal legible, drop the movement. */
  .service-card-reveal { transition: opacity 160ms ease; transform: none; }
  .service-card:hover .service-card-reveal,
  .service-card:focus-visible .service-card-reveal { transform: none; }
  .service-card:hover { transform: none; }
  .service-card:hover .service-card-img img { transform: none; }
}

/* ── Regional page banners with a photograph ────────────────────────────────
   Only the four regional pages and their translations use this. Every other
   inner page keeps the plain var(--bg-alt) banner, so about / governance /
   services / faq / contact / privacy / terms are untouched.

   The image is a CSS background, not an <img>: it is decorative, the h1 beside
   it already names the region, so it correctly carries no alt text.

   URLs here resolve against style.css at the web root, which is why the same
   rules work for /ar/, /fr/ and /id/ without the root-absolute path juggling
   those pages need in their markup. */
.page-banner-media {
  position: relative;
  overflow: hidden;
}
.page-banner-media::before,
.page-banner-media::after {
  content: "";
  position: absolute;
  inset: 0;
}
.page-banner-media::before {
  background-size: cover;
  background-position: center 55%;
  background-color: var(--bg-alt);
}
/* Close to .hero-overlay, with one deliberate difference: the first stop is
   much darker. The nav sits over this banner and the logo is white, and these
   skylines have pale sky exactly where the logo lands. The hero can start at
   0.35 because its star-trail image is nearly black to begin with. */
.page-banner-media::after {
  background: linear-gradient(
    to bottom,
    rgba(10,10,10,0.80) 0%,
    rgba(10,10,10,0.52) 26%,
    rgba(10,10,10,0.66) 62%,
    rgba(10,10,10,0.96) 100%
  );
}
.page-banner-media > .container {
  position: relative;
  z-index: 1;
}
.pb-africa::before         { background-image: url("images/region-africa.webp"); }
.pb-middle-east::before    { background-image: url("images/region-middle-east.webp"); }
.pb-southeast-asia::before { background-image: url("images/region-southeast-asia.webp"); }
.pb-europe::before         { background-image: url("images/region-europe.webp"); }
.pb-contact::before        { background-image: url("images/banner-contact.webp"); }
/* Narrow viewports take the smaller source, matching the hero convention. */
@media (max-width: 900px) {
  .pb-africa::before         { background-image: url("images/region-africa-sm.webp"); }
  .pb-middle-east::before    { background-image: url("images/region-middle-east-sm.webp"); }
  .pb-southeast-asia::before { background-image: url("images/region-southeast-asia-sm.webp"); }
  .pb-europe::before         { background-image: url("images/region-europe-sm.webp"); }
  .pb-contact::before        { background-image: url("images/banner-contact-sm.webp"); }
}
/* The banner paragraph is rgba(255,255,255,0.6), which is fine over the flat
   var(--bg-alt) banner but measures 3.8:1 on the brightest patches of a
   photograph, under the 4.5:1 floor. Lifted only where an image sits behind
   it; every other page keeps 0.6. Measured worst case goes 3.76 -> 5.11:1. */
.page-banner-media p { color: rgba(255,255,255,0.78); }

/* ── Onboarding flow (governance.html) ──────────────────────────────────────
   A five stage sequence drawn as connected nodes. Deliberately real text in an
   <ol>, not an image: it is readable by a screen reader, needs no payload on
   the mobile networks these markets use, and reflows instead of scaling down.
   Physical properties match the rest of this file; governance.html is English
   only, so if it is ever translated this needs an entry in the [dir="rtl"]
   block at the end, like .def-list and .check-list. */
.flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 30px;
}
.flow li {
  position: relative;
  padding-left: 58px;
}
.flow-n {
  position: absolute;
  left: 0;
  top: 0;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-weight: 600;
  font-size: 0.95rem;
  z-index: 1;
}
/* The connector runs node to node, so it is suppressed on the last item. */
.flow li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 38px;
  bottom: -30px;
  width: 1px;
  background: linear-gradient(var(--accent), var(--border));
  opacity: 0.55;
}
.flow strong {
  display: block;
  color: var(--white);
  margin-bottom: 5px;
}
.flow-d {
  display: block;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.92rem;
  line-height: 1.65;
}
/* Above 900px the sequence reads left to right, so the connector turns with
   it. The node sits above the label rather than beside it. */
@media (min-width: 900px) {
  .flow {
    grid-template-columns: repeat(5, 1fr);
    gap: 26px;
  }
  .flow li {
    padding-left: 0;
    padding-top: 56px;
  }
  .flow li:not(:last-child)::before {
    left: 38px;
    right: -26px;
    top: 19px;
    bottom: auto;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, var(--accent), var(--border));
  }
}

/* ── Service development repositioning (2026-09-06) ─────────────────────────
   The homepage now leads with three consultancy tiers and reporting follows.
   Everything below is additive: no existing rule was changed. */

/* Tier cards (services.html, service development section). Same surface, hairline and radius as .card; the
   foot is pinned to the bottom so the three cards' price lines align. */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tier {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px 28px;
  transition: border-color 0.2s;
}
.tier:hover { border-color: rgba(78,205,196,0.3); }
.tier-n {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.7rem;
}
.tier h3 { margin-bottom: 0.7rem; }
.tier p { color: rgba(255,255,255,0.6); font-size: 0.97rem; }
.tier-foot {
  margin-top: auto;
  padding-top: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.tier-price { font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.tier-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.tier-links a { font-size: 0.92rem; font-weight: 600; color: var(--accent); transition: color 0.2s; }
.tier-links a:hover { color: var(--accent-dk); }
.tiers-more { text-align: center; margin-top: 40px; }
.tiers-more a { color: var(--accent); font-weight: 600; }
@media (max-width: 900px) { .tiers { grid-template-columns: 1fr; gap: 16px; } }

/* Tier detail (cmr-service-development.html): the at-a-glance card beside a
   long text column would drift to the vertical middle under .split's
   align-items: center, so it starts at the top and stays in view. */
.tier-detail .evidence-card { align-self: start; position: sticky; top: calc(var(--nav-h) + 24px); }
.tier-detail .evidence-card .section-label { margin-bottom: 1.1rem; }
.tier-detail .def-list { gap: 16px; }

/* The three-stage overview reuses the governance flow at three columns. */
@media (min-width: 900px) { .flow-3 { grid-template-columns: repeat(3, 1fr); } }

/* Team roles on about.html: a third bio-card, so the grid takes three. */
.team-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .team-grid-3 { grid-template-columns: 1fr; } }

/* Inline links inside prose columns and page banners were unstyled. */
.split-text p a, .page-banner p a, .section-sub a { color: var(--accent); }
.flow-d a, .cta-banner p a { color: var(--accent); }

/* ── Services page: three pillars (2026-09-08) ────────────────────────────────
   services.html is grouped as Reporting / Service development / Education and
   training. A band of three cards under the banner names the pillars and links
   into them; each group opens with a .pillar-intro heading. Additive only. */
.pillars-band { padding: 96px 0; }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pillar {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px 28px;
  transition: border-color 0.2s;
}
.pillar:hover { border-color: rgba(78,205,196,0.3); }
.pillar-n {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 0.7rem;
}
.pillar h3 { margin-bottom: 0.5rem; font-size: 1.45rem; }
.pillar h3 a { color: var(--white); transition: color 0.2s; }
.pillar h3 a:hover { color: var(--accent); }
.pillar p { color: rgba(255,255,255,0.6); font-size: 0.97rem; }
.pillar-links {
  list-style: none;
  margin: 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.pillar-links a { font-size: 0.92rem; font-weight: 600; color: var(--accent); transition: color 0.2s; }
.pillar-links a:hover { color: var(--accent-dk); }
@media (max-width: 900px) { .pillars { grid-template-columns: 1fr; gap: 16px; } .pillars-band { padding: 72px 0; } }

/* Group heading: sits directly on top of its first section, which loses its
   top padding and hairline so the two read as one block. */
.pillar-intro { padding-bottom: 0; scroll-margin-top: calc(var(--nav-h) + 20px); }
.pillar-intro h2 { font-size: clamp(2.6rem, 4.6vw, 4rem); margin-top: 0.2rem; }
.pillar-intro .section-sub { max-width: 640px; }
.service-detail + .pillar-intro { border-top: 1px solid var(--border); }
.pillar-intro + .service-detail { padding-top: 72px; border-top: 0; }

/* Homepage: the three reporting cards fill the first row. The second row opens
   with a short "We also offer" note in the first column, then the service
   development and education cards, so reporting reads as the business and the
   other two pillars as what it also does. */
.service-cards-note {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px 32px 8px 0;
  min-width: 0;
}
.service-cards-note .section-label { margin-bottom: 0.6rem; }
.service-cards-note p:last-child { margin: 0; color: rgba(255,255,255,0.6); font-size: 1.02rem; line-height: 1.65; }
@media (max-width: 640px) { .service-cards-note { padding: 24px 4px 8px; } }

/* Contact form: the service list is grouped by pillar. */
.form-group select optgroup { background: var(--surface); color: var(--muted); font-style: normal; font-weight: 600; }