/* ==========================================================================
   StratBIC — Strategy & Business Intelligence Consulting
   Shared stylesheet — Brand system: Navy / Gold / Teal / Charcoal
   ========================================================================== */

/* ---- Fonts (local Carlito, metrically compatible with Calibri) ---------- */
@font-face {
  font-family: 'Carlito';
  src: url('../fonts/Carlito-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Carlito';
  src: url('../fonts/Carlito-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Carlito';
  src: url('../fonts/Carlito-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Carlito';
  src: url('../fonts/Carlito-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ---- Design tokens -------------------------------------------------------*/
:root {
  --navy: #0C2D48;
  --navy-light: #123A5E;
  --gold: #C8962E;
  --gold-light: #E0B15A;
  --teal: #00B0BD;
  --charcoal: #1A1A1A;
  --mid-grey: #6B6B6B;
  --light-grey: #CCCCCC;
  --pale-grey: #F4F5F6;
  --white: #FFFFFF;

  --font-base: Calibri, Carlito, Arial, sans-serif;

  --container-w: 1140px;
  --radius: 3px;
  --shadow-sm: 0 2px 10px rgba(12, 45, 72, 0.08);
  --shadow-md: 0 8px 30px rgba(12, 45, 72, 0.12);
  --transition: 0.2s ease;
}

/* ---- Reset ---------------------------------------------------------------*/
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

html, body {
  width: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--font-base);
  color: var(--charcoal);
  background: var(--white);
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

.container {
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- Typography ----------------------------------------------------------*/
h1, h2, h3, h4 {
  font-family: var(--font-base);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.2;
}

h1 { font-size: 2.6rem; letter-spacing: -0.01em; }
h2 { font-size: 1.9rem; }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.05rem; }

p { color: var(--charcoal); }

.lede {
  font-size: 1.2rem;
  color: var(--mid-grey);
  line-height: 1.6;
}

.kicker {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}

/* Small in-card label linking a Mission/Vision/Values card back to the
   StratBIC credo ("Understanding Deeper. Seeing Further. Deciding Smarter.") */
.credo-tag {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 10px;
}

.section-head {
  max-width: 700px;
  margin-bottom: 48px;
}
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

.rule {
  width: 60px;
  height: 3px;
  background: var(--gold);
  border: none;
  margin: 18px 0 0;
}
.rule.center { margin-left: auto; margin-right: auto; }

.rule-thin {
  border: none;
  border-top: 1px solid var(--light-grey);
  margin: 0;
}

/* ---- Buttons ---------------------------------------------------------- */
.btn {
  display: inline-block;
  padding: 14px 30px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  border-radius: var(--radius);
  border: 2px solid transparent;
  transition: all var(--transition);
}
.btn-primary {
  background: var(--gold);
  color: var(--navy);
}
.btn-primary:hover { background: var(--gold-light); transform: translateY(-1px); }

.btn-outline {
  border-color: var(--white);
  color: var(--white);
  background: transparent;
}
.btn-outline:hover { background: rgba(255,255,255,0.1); }

.btn-outline-navy {
  border-color: var(--navy);
  color: var(--navy);
  background: transparent;
}
.btn-outline-navy:hover { background: var(--navy); color: var(--white); }

/* ---- Header / Nav ------------------------------------------------------*/
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--light-grey);
}

.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand img {
  height: 40px;
  width: auto;
}
.brand-word {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.01em;
  line-height: 1;
}
.brand-word span { color: var(--teal); }
.brand-tagline-mini {
  display: none;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--mid-grey);
  text-transform: uppercase;
  margin-top: 2px;
}
/* Header keeps the wordmark compact by default (icon + "StratBIC" only);
   the full tagline only reappears once there's generous width to spare,
   so the nav never has to compete with it for room. The tagline is always
   shown in the footer regardless of width (see .footer-brand). */
@media (min-width: 1240px) {
  .site-header .brand-tagline-mini { display: block; }
}

.nav-main {
  display: flex;
  align-items: center;
  gap: 18px;
}

.nav-links {
  display: flex;
  gap: 16px;
}
.nav-links a {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--navy);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: border-color var(--transition), color var(--transition);
}
.nav-links a:hover,
.nav-links a.active {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}
.lang-switch a { color: var(--mid-grey); padding: 4px 2px; }
.lang-switch a.active { color: var(--navy); }
.lang-switch a:hover { color: var(--gold); }
.lang-switch .sep { color: var(--light-grey); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  padding: 0;
}
.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--navy);
  transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- Nav dropdown (Practices / Expertises) -------------------------------
   Consolidates Services, Mining, AI for Business Transformation and
   Training into a single "Practices" menu so the top-level nav stays at
   the same 7-item width as v5, even though 3 new practice areas were
   added. Desktop: hover/focus reveals the menu. Mobile (<=900px, see the
   existing nav breakpoint below): the menu is always expanded inline,
   indented, consistent with the rest of the stacked mobile nav. */
.nav-dropdown { position: relative; }
.nav-dropdown-trigger { display: inline-flex; align-items: center; gap: 4px; }
.nav-dropdown-trigger .caret { font-size: 0.65em; position: relative; top: 1px; }
.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: var(--white);
  border: 1px solid var(--light-grey);
  border-radius: 8px;
  box-shadow: 0 14px 32px rgba(12, 45, 72, 0.16);
  padding: 8px;
  min-width: 270px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index: 200;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown.is-open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown-menu a {
  padding: 10px 12px !important;
  border-bottom: none !important;
  border-radius: 5px;
  white-space: nowrap;
  color: var(--navy);
  font-size: 0.86rem;
}
.nav-dropdown-menu a:hover,
.nav-dropdown-menu a.active {
  background: var(--pale-grey);
  color: var(--gold);
  border-bottom: none !important;
}

/* ---- Hero ----------------------------------------------------------------*/
.hero {
  background: linear-gradient(135deg, var(--navy) 0%, #0a2440 55%, #082035 100%);
  color: var(--white);
  padding: 100px 0 90px;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  right: -120px;
  top: -120px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  border: 1px solid rgba(200,150,46,0.25);
}
.hero::before {
  content: "";
  position: absolute;
  right: -40px;
  top: 60px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  border: 1px solid rgba(0,176,189,0.18);
}
.hero .container { position: relative; z-index: 2; }
.hero .kicker { color: var(--gold-light); }
.hero h1 {
  color: var(--white);
  max-width: 780px;
  margin-bottom: 20px;
}
.hero p.lede {
  color: rgba(255,255,255,0.78);
  max-width: 620px;
  margin-bottom: 34px;
}
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }

.page-hero {
  background: var(--navy);
  color: var(--white);
  padding: 64px 0 56px;
}
.page-hero .kicker { color: var(--gold-light); }
.page-hero h1 { color: var(--white); margin-bottom: 10px; }
.page-hero p { color: rgba(255,255,255,0.75); max-width: 640px; }

/* ---- Sections --------------------------------------------------------- */
section { padding: 84px 0; }
.section-alt { background: var(--pale-grey); }
.section-navy { background: var(--navy); color: var(--white); }
.section-navy h2, .section-navy h3 { color: var(--white); }
.section-navy p { color: rgba(255,255,255,0.78); }
.section-tight { padding: 56px 0; }

/* ---- Practice-area / stat 4-up grid ------------------------------------ */
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.pillar-card {
  background: var(--white);
  border: 1px solid var(--light-grey);
  border-radius: var(--radius);
  padding: 30px 26px;
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
  break-inside: avoid;
  page-break-inside: avoid;
}
.pillar-card:hover {
  box-shadow: var(--shadow-md);
  border-color: transparent;
  transform: translateY(-3px);
}
.pillar-num {
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
}
.pillar-card h3 { margin-bottom: 10px; }
.pillar-card p { color: var(--mid-grey); font-size: 0.96rem; }

/* practice area mini-cards on homepage */
.practice-card {
  text-align: center;
  padding: 34px 20px;
  border: 1px solid var(--light-grey);
  border-radius: var(--radius);
  background: var(--white);
  break-inside: avoid;
  page-break-inside: avoid;
}
.practice-card .icon-mark {
  width: 52px;
  height: 52px;
  margin: 0 auto 18px;
  border-radius: 50%;
  border: 2px solid var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal);
  font-weight: 700;
  font-size: 1.1rem;
}
.practice-card h4 { color: var(--navy); }
a.practice-card { display: block; text-decoration: none; color: inherit; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
a.practice-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(12,45,72,0.10); border-color: var(--teal); }

/* ---- Methodology grid (7 principles) ------------------------------------*/
.method-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  background: var(--light-grey);
  border: 1px solid var(--light-grey);
}
.method-item {
  background: var(--white);
  padding: 32px 30px;
  break-inside: avoid;
  page-break-inside: avoid;
}
.method-item .pillar-num { color: var(--teal); }
.method-item h3 { margin-bottom: 10px; }
.method-item p { color: var(--mid-grey); font-size: 0.95rem; }

/* ---- Services list ------------------------------------------------------*/
.service-group {
  padding: 40px 0;
}
.service-group + .service-group {
  border-top: 1px solid var(--light-grey);
}
.service-group-head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 22px;
}
.service-group-num {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--gold);
  min-width: 44px;
}
.service-list {
  display: grid;
  gap: 16px;
}
.service-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  color: var(--charcoal);
  font-size: 1rem;
  break-inside: avoid;
  page-break-inside: avoid;
}
.service-list li::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 8px;
  background: var(--teal);
  border-radius: 50%;
}

/* ---- Founder / bio -------------------------------------------------------*/
/* Flexbox (not Grid) deliberately: some renderers mis-handle align-items:start
   on Grid rows and stretch fixed-size children to the row's implicit height.
   Flex with align-items:flex-start avoids that entirely and is at least as
   broadly supported. */
.founder-block {
  display: flex;
  align-items: flex-start;
  gap: 44px;
}
.founder-block > *:last-child {
  flex: 1 1 auto;
  min-width: 0;
}
.founder-mark {
  flex: none;
  width: 220px;
  height: 220px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 34px;
  break-inside: avoid;
  page-break-inside: avoid;
}
.founder-mark img { width: 100%; height: auto; }
.founder-name { margin-bottom: 4px; }
.founder-title { color: var(--gold); font-weight: 700; font-size: 0.95rem; margin-bottom: 14px; }
.founder-creds {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.cred-chip {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--navy);
  border: 1px solid var(--light-grey);
  border-radius: 20px;
  padding: 6px 14px;
}

/* ---- Placeholder card -----------------------------------------------------*/
.placeholder-card {
  border: 1.5px dashed var(--light-grey);
  background: var(--pale-grey);
  border-radius: var(--radius);
  padding: 40px;
  text-align: center;
  color: var(--mid-grey);
  font-style: italic;
}

/* ---- Stats strip ----------------------------------------------------------*/
.stat {
  text-align: center;
}
.stat .pillar-num {
  font-size: 2.8rem;
  color: var(--gold-light);
}
.stat p { color: rgba(255,255,255,0.7); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05em; }

/* ---- Contact -------------------------------------------------------------*/
.contact-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
}
.contact-info-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px 0;
  border-bottom: 1px solid var(--light-grey);
  break-inside: avoid;
  page-break-inside: avoid;
}
.contact-info-item:first-child { padding-top: 0; }
.contact-info-item .ico {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.contact-info-item h4 { margin-bottom: 4px; }
.contact-info-item a, .contact-info-item p { color: var(--mid-grey); font-size: 0.96rem; }
.contact-info-item a:hover { color: var(--gold); }

.form-field {
  margin-bottom: 20px;
}
.form-field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 6px;
}
.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--light-grey);
  border-radius: var(--radius);
  font-family: var(--font-base);
  font-size: 0.98rem;
  color: var(--charcoal);
  background: var(--white);
}
.form-field select { cursor: pointer; }
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--teal);
}
.form-note {
  font-size: 0.82rem;
  color: var(--mid-grey);
  margin-top: 14px;
  line-height: 1.5;
}
.form-success {
  display: none;
  background: var(--pale-grey);
  border: 1px solid var(--teal);
  border-radius: var(--radius);
  padding: 16px 18px;
  color: var(--navy);
  font-size: 0.92rem;
  margin-bottom: 20px;
}
.form-success.is-visible { display: block; }

/* ---- FAQ accordion (native <details>/<summary>, no JS required) --------- */
.faq-list {
  max-width: 760px;
  margin: 0 auto;
}
.faq-item {
  border-bottom: 1px solid var(--light-grey);
  padding: 20px 0;
}
.faq-item:first-child { padding-top: 0; }
.faq-item summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--navy);
  list-style: none;
  position: relative;
  padding-right: 34px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: -2px;
  color: var(--gold);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1;
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item summary:hover { color: var(--gold); }
.faq-item p {
  margin-top: 12px;
  color: var(--mid-grey);
  font-size: 0.96rem;
  max-width: 680px;
}

/* ---- Coming-soon article / insight card ---------------------------------
   Reuses .placeholder-card's dashed border + italic voice for the card
   shell, adds a non-italic heading block on top so the future-article
   title reads clearly while the "not published yet" framing stays. */
.insight-card { text-align: left; }
.insight-card .insight-date {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
  font-style: normal;
  margin-bottom: 10px;
}
.insight-card h3 {
  font-style: normal;
  color: var(--navy);
  margin-bottom: 8px;
}
.insight-card .btn-disabled {
  display: inline-block;
  margin-top: 16px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--light-grey);
  border: 1.5px dashed var(--light-grey);
  border-radius: var(--radius);
  padding: 8px 16px;
  font-style: normal;
}

/* ---- CTA band -------------------------------------------------------------*/
.cta-band {
  background: var(--navy);
  color: var(--white);
  padding: 64px 0;
  text-align: center;
}
.cta-band h2 { color: var(--white); margin-bottom: 14px; }
.cta-band p { color: rgba(255,255,255,0.75); max-width: 560px; margin: 0 auto 30px; }

/* ---- Footer ----------------------------------------------------------- */
.site-footer {
  background: var(--navy);
  color: rgba(255,255,255,0.7);
  padding: 60px 0 26px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.9fr 0.9fr 0.9fr 0.9fr;
  gap: 32px;
  padding-bottom: 40px;
}
.footer-brand .brand-word { color: var(--white); }
.footer-brand .brand-tagline-mini { display: block; color: rgba(255,255,255,0.55); }
.footer-brand p { margin-top: 16px; color: rgba(255,255,255,0.6); font-size: 0.9rem; max-width: 320px; }
.footer-col h4 { color: var(--white); font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 16px; }
.footer-col ul { display: grid; gap: 10px; }
.footer-col a { font-size: 0.92rem; color: rgba(255,255,255,0.68); transition: color var(--transition); }
.footer-col a:hover { color: var(--gold-light); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.5);
}
.footer-bottom .lang-switch a { color: rgba(255,255,255,0.55); }
.footer-bottom .lang-switch a.active { color: var(--gold-light); }

/* ---- Splash (root index) ----------------------------------------------- */
.splash {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--navy) 0%, #0a2440 60%, #082035 100%);
  color: var(--white);
  text-align: center;
  padding: 40px 20px;
}
.splash-box img { margin: 0 auto 22px; height: 64px; width: auto; }
.splash-box h1 { color: var(--white); font-size: 1.6rem; margin-bottom: 10px; }
.splash-box p { color: rgba(255,255,255,0.7); margin-bottom: 28px; }
.splash-links { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.splash-links a {
  border: 2px solid var(--gold);
  color: var(--white);
  padding: 12px 26px;
  border-radius: var(--radius);
  font-weight: 700;
  transition: all var(--transition);
}
.splash-links a:hover { background: var(--gold); color: var(--navy); }

/* ---- Utility ------------------------------------------------------------*/
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

/* ==========================================================================
   Responsive — mobile-first breakpoints
   ========================================================================== */
@media (max-width: 991px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .method-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
  h1 { font-size: 2.2rem; }
  .hero { padding: 76px 0 70px; }
}

/* Nav-wrap never wraps to a second line at desktop widths — the base
   .nav-links / .lang-switch sizing above (16px gaps, 0.86rem links) is
   already compact enough to fit the nav-links + logo + language switch
   within the desktop range without a special-case band. */
.nav-wrap { flex-wrap: nowrap; }

/* The nav grew from five to seven links in v5 (Case Studies / Insights
   added). Seven links no longer reliably fit beside the logo + language
   switch at narrow desktop / tablet widths, so the hamburger breakpoint
   for navigation specifically is raised to 900px — separate from the
   768px breakpoint used for content reflow (grids, hero, founder block)
   below, which stays where it was tuned for those components. */
@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .nav-main {
    position: fixed;
    top: 69px;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--white);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 20px 24px 40px;
    transform: translateX(100%);
    transition: transform var(--transition);
    overflow-y: auto;
    z-index: 99;
  }
  .nav-main.is-open { transform: translateX(0); }
  .nav-links {
    flex-direction: column;
    gap: 0;
    width: 100%;
  }
  .nav-links a {
    width: 100%;
    padding: 16px 0;
    border-bottom: 1px solid var(--light-grey);
  }
  .lang-switch { margin-top: 20px; font-size: 1rem; }
  .nav-dropdown-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    box-shadow: none;
    border: none;
    border-radius: 0;
    background: var(--pale-grey);
    padding: 4px 0 4px 20px;
    margin: 0 0 4px;
    min-width: 0;
  }
  .nav-dropdown-menu a { padding: 12px 0 !important; border-bottom: 1px solid var(--light-grey) !important; font-size: 0.9rem; }
  .nav-dropdown-trigger .caret { display: none; }
}

@media (max-width: 767px) {
  section { padding: 56px 0; }
  h1 { font-size: 1.9rem; }
  h2 { font-size: 1.5rem; }

  .hero { padding: 56px 0 50px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { text-align: center; }

  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .founder-block { flex-direction: column; }
  .founder-mark { width: 180px; height: 180px; max-width: 180px; margin: 0 auto; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .service-group-head { gap: 12px; }
}

@media (max-width: 480px) {
  .brand-word { font-size: 1.15rem; }
  .brand img { height: 34px; }
  h1 { font-size: 1.6rem; }
}

/* ==========================================================================
   Programme-detail field grid (Training & Professional Development practice)
   Flexbox label/value rows — deliberately not CSS Grid, for the same
   pixel-precision reasons documented on .founder-block above and to keep
   this renderable in WeasyPrint.
   ========================================================================== */
.field-grid {
  border: 1px solid var(--light-grey);
  border-radius: var(--radius);
  overflow: hidden;
}
.field-row {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--light-grey);
  break-inside: avoid;
  page-break-inside: avoid;
}
.field-row:last-child { border-bottom: none; }
.field-row:nth-child(odd) { background: var(--pale-grey); }
.field-label {
  flex: 0 0 260px;
  padding: 18px 24px;
  font-weight: 700;
  font-size: 0.84rem;
  letter-spacing: 0.02em;
  color: var(--navy);
}
.field-value {
  flex: 1 1 320px;
  padding: 18px 24px;
  color: var(--charcoal);
  font-size: 0.96rem;
}
.field-value p + p { margin-top: 8px; }

/* Small label used above a programme title to signal the parent practice
   ("Training — Leadership Programme") — reuses kicker sizing/weight. */
.breadcrumb-tag {
  display: block;
  font-size: 0.82rem;
  margin-bottom: 8px;
}
.breadcrumb-tag a { color: var(--gold-light); font-weight: 700; }
.breadcrumb-tag a:hover { text-decoration: underline; }
.breadcrumb-tag span.sep { color: rgba(255,255,255,0.5); margin: 0 6px; }
.breadcrumb-tag span.current { color: rgba(255,255,255,0.75); }

/* Explicit "illustrative example, not a commitment" note above evaluation
   metrics / example lists. */
.example-note {
  font-size: 0.82rem;
  font-style: italic;
  color: var(--mid-grey);
  margin-bottom: 18px;
}

@media (max-width: 767px) {
  .field-label { flex: 1 1 100%; padding-bottom: 2px; }
  .field-value { flex: 1 1 100%; padding-top: 0; }
}

/* ==========================================================================
   AI-Enabled Value block (AI for Business Transformation practice)
   A clearly-marked callout inserted into sibling practice pages to flag
   where an AI lens can selectively add value to that specific service.
   Teal left-border accent, consistent with .credo-tag's teal kicker
   language, on a pale card so it reads as an inserted annotation rather
   than native page content.
   ========================================================================== */
.ai-value-block {
  background: var(--pale-grey);
  border: 1px solid var(--light-grey);
  border-left: 4px solid var(--teal);
  border-radius: var(--radius);
  padding: 32px 32px 28px;
  break-inside: avoid;
  page-break-inside: avoid;
}
.ai-value-kicker {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 10px;
}
.ai-value-block h3 { margin-bottom: 10px; }
.ai-value-block > p.lede { margin-bottom: 20px; }
.ai-value-block .field-grid { background: var(--white); }