/* =====================================================================
   ElevateEx — Shared Stylesheet
   Premium executive advisory redesign
   Brand colors are unchanged from the original site; everything else
   (type, spacing, structure, motion) has been rebuilt.

   CONTENTS
     1.  Reset
     2.  Brand tokens
     3.  Typography scale
     4.  Layout primitives
     5.  Reveal-on-scroll
     6.  Header
     7.  Hero
     8.  Impact Cases            (case cards + modal)
     9.  Buttons
     10. Services cards
     11. Advisory — Approach grid
     12. About Bart page
     13. CTA band
     14. Footer
     15. Responsive — Tablet     (<=1024px)
     16. Responsive — Impact cases (<=900px)
     17. Responsive — Mobile     (<=768px)
   ===================================================================== */

/* =====================================================================
   1. Reset
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =====================================================================
   2. Brand tokens (colors preserved from original palette)
   ===================================================================== */
:root {
  /* Brand palette — unchanged */
  --navy:        #004587;
  --navy-deep:   #14304F;
  --blue:        #009BDF;
  --blue-mid:    #4F81BD;
  --blue-hover:  #3584E7;
  --blue-light:  #E3F5FC;

  /* Neutrals, refined for an editorial reading experience */
  --ink:         #1C2530;
  --ink-soft:    #45505E;
  --ink-faint:   #7C8797;
  --paper:       #FFFFFF;
  --paper-alt:   #F6F8FA;
  --border:      #E1E6ED;
  --border-soft: #EDF1F5;
  --border-strong: #CDD5DF;

  /* Type */
  --font-display: 'Newsreader', 'Iowan Old Style', 'Georgia', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Layout */
  --max-width:   1160px;
  --max-width-narrow: 760px;
  --header-h:    78px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  line-height: 1.7;
  background: var(--paper);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--blue); }

::selection { background: var(--blue-light); color: var(--navy-deep); }

/* =====================================================================
   3. Typography scale
   ===================================================================== */
h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--navy-deep);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--blue-mid);
  margin-bottom: 1rem;
}

.eyebrow::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 1.5px;
  background: var(--blue);
}

.section-title {
  font-size: clamp(1.7rem, 2.4vw, 2.15rem);
  font-weight: 500;
  color: var(--navy-deep);
  margin-bottom: 1.1rem;
  line-height: 1.22;
}

.section-intro {
  font-size: 1.08rem;
  color: var(--ink-soft);
  margin-bottom: 2.75rem;
  line-height: 1.8;
}

/* =====================================================================
   4. Layout primitives
   ===================================================================== */
section { padding: 5.5rem 1.75rem; }
section.tight { padding: 3.75rem 1.75rem; }
section.alt-bg { background: var(--paper-alt); }

.section-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =====================================================================
   5. Reveal-on-scroll (restrained, single style, used sitewide)
   ===================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-group > * { transition-delay: calc(var(--i, 0) * 70ms); }

/* =====================================================================
   6. Header
   ===================================================================== */
header {
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--border-soft);
}

.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  gap: 1.5rem;
}
 
.logo {
  display: inline-flex;
  align-items: center;
  margin-left: 0;
  padding-left: 0;
}
.logo img {
  height: 32px;
  width: auto;
}

.nav-toggle { display: none; }

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  padding: 0.5rem;
  margin: -0.5rem -0.5rem -0.5rem 0;
}

.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--navy-deep);
  border-radius: 2px;
  transition: transform 0.25s var(--ease), opacity 0.2s ease;
}

.nav-row {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  flex: 1;
  justify-content: flex-end;
  height: 100%;
  padding: 0;
  background: transparent;
}
  
nav {
  display: flex;
  align-items: center;
  height: 100%;
}
  
nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  height: 100%;
}
  
nav ul li {
  display: flex;
  align-items: center;
}
 
nav ul li a {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 0.18rem 0.1rem 0.34rem;
  margin: 0 0.2rem;
  white-space: nowrap;
  transition: color 0.2s ease;
}

nav ul li a:not(.nav-cta)::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.2s ease;
}

nav ul li a:not(.nav-cta):hover,
nav ul li a:not(.nav-cta).active {
  color: var(--navy-deep);
}

nav ul li a:not(.nav-cta):hover::before,
nav ul li a:not(.nav-cta).active::before {
  transform: scaleX(1);
}

/* --- nav CTA --- */
.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1.5px solid var(--navy);
  color: var(--navy-deep);
  background: transparent;
  height: 38px;
  padding: 0 1rem;
  border-radius: 3px;
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease,
              transform 0.15s ease, box-shadow 0.2s ease;
}

.nav-cta:hover,
.nav-cta:focus-visible {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  outline: none;
}

/* =====================================================================
   7. Hero
   ===================================================================== */
.hero {
  position: relative;
  color: #fff;
  padding: 6.5rem 1.75rem 5.5rem;
  isolation: isolate;
  overflow: hidden;
}

/* Photo layer — desaturated for an editorial, timeless tone */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  filter: grayscale(40%) contrast(1.05) brightness(0.97);
}

/* Color wash on top of the photo */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(115deg, rgba(20,48,79,0.93) 10%, rgba(20,48,79,0.74) 45%, rgba(31,73,125,0.58) 100%);
}

.hero--home::after   { background-image: url('assets/hero-home.jpg'); }
.hero--advisory::after { background-image: url('assets/hero-advisory.jpg'); }

/* --- Full-height landing variant (home page) --- */
.hero--landing {
  min-height: 520px;
  display: flex;
  align-items: center;
  padding: 4rem 1.75rem;
}

.hero--landing .hero-inner,
.hero--impact .hero-inner {
  width: min(100%, var(--max-width));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Cap text content width while keeping left-edge aligned with page grid */
.hero--landing h1,
.hero--landing .hero-inner > p,
.hero--landing .hero-actions { max-width: 730px; }

.hero--landing .hero-inner {
  width: min(100%, var(--max-width));
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero--landing .eyebrow {
  color: #B9D9F2;
  margin-bottom: 1.5rem;
}
.hero--landing .eyebrow::before { background: #B9D9F2; }

.hero--landing h1 {
  font-size: clamp(2rem, 3.6vw, 2.85rem);
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-top: 2.5rem;
  flex-wrap: wrap;
}

.hero-link {
  color: #fff;
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  border-bottom: 1px solid rgba(255,255,255,0.4);
  padding-bottom: 2px;
  transition: border-color 0.2s ease, opacity 0.2s ease;
}
.hero-link:hover { border-color: #fff; }

/* --- Slim credentials strip beneath the landing hero --- */
.credentials-strip {
  border-bottom: 1px solid var(--border);
}
.credentials-strip .section-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}
.credentials-strip .credential {
  flex: 1 1 0;
  min-width: 220px;
  padding: 2.2rem 2rem;
  border-left: 1px solid var(--border);
}
.credentials-strip .credential:first-child { border-left: none; padding-left: 0; }
.credentials-strip .credential p {
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.6;
}
.credentials-strip .credential strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--navy-deep);
  margin-bottom: 0.3rem;
}

.hero-inner {
  width: min(100%, var(--max-width));
  margin: 0 auto;
}

.hero .eyebrow {
  color: #B9D9F2;
}
.hero .eyebrow::before { background: #B9D9F2; }

.hero h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.1rem, 4.4vw, 3.35rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: #fff;
}

.hero h1 em {
  font-style: italic;
  color: #A9D6F5;
}

.hero p {
  font-family: var(--font-body);
  font-size: 1.1rem;
  max-width: 620px;
  margin-top: 1.5rem;
  color: rgba(255,255,255,0.86);
  line-height: 1.8;
}

.hero-rule {
  width: 56px;
  height: 2px;
  background: var(--blue);
  margin: 1.75rem 0 0;
}

/* =====================================================================
   8. Impact Cases
   ===================================================================== */
/* Advisory hero typography and spacing, but photo-free: a layered gradient with
   a soft light source and fine ascending hairlines carry the depth instead. */
.hero--impact {
  background:
    radial-gradient(120% 140% at 82% 18%, rgba(0,155,223,0.30) 0%, rgba(0,155,223,0) 58%),
    linear-gradient(115deg, #12293F 0%, #1B3E63 46%, #26537F 100%);
}

/* Ascending hairlines — a restrained nod to growth, kept near-invisible.
   122deg = 180 - 58, the vertical mirror of the original angle, so the lines
   rise toward the top-right at the same steepness and 26px spacing. */
.hero--impact::after {
  background-image: repeating-linear-gradient(
    122deg,
    rgba(255,255,255,0.05) 0px,
    rgba(255,255,255,0.05) 1px,
    rgba(255,255,255,0) 1px,
    rgba(255,255,255,0) 26px
  );
  filter: none;
}

/* Vignette to keep the headline edge dense and legible */
.hero--impact::before {
  background:
    linear-gradient(100deg, rgba(12,28,45,0.72) 0%, rgba(12,28,45,0.28) 42%, rgba(12,28,45,0) 72%);
}

.hero--impact .hero-inner {
  max-width: var(--max-width);
}

.hero--impact h1 { max-width: 860px; }

/* --- Framing rail between hero and cases --- */
.impact-intro {
  padding: 4.25rem 1.75rem 0;
}

.impact-intro__copy {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-bottom: 2.25rem;
  /* border-bottom: 1px solid var(--border); */
}

.impact-intro .eyebrow { margin-bottom: 0.9rem; }

.impact-intro__note {
  color: var(--ink-soft);
  font-size: 1.05rem;
  line-height: 1.85;
  margin: 0;
}

.impact-grid-section {
  padding: 3rem 1.75rem 5.5rem;
}

.client-logos {
  background: #f4f4f4;
  /* border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft); */
  overflow: hidden;
  padding: 0;
  width: 100%;
}

.client-logos__viewport {
  max-width: var(--max-width);
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  padding: 0.85rem 0 0.95rem;
  mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent);
}

.client-logos__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: client-logo-scroll 32s linear infinite;
}

.client-logos:hover .client-logos__track {
  animation-play-state: paused;
}

.client-logos__group {
  display: flex;
  align-items: center;
  gap: 3.5rem;
  padding-right: 3.5rem;
  flex-shrink: 0;
}

.client-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  flex-shrink: 0;
  filter: grayscale(1);
  opacity: 0.72;
  transition: opacity 0.2s var(--ease), filter 0.2s var(--ease);
}

.client-logo:hover {
  opacity: 1;
  filter: grayscale(0.2);
}

.client-logo img {
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Merck */
.client-logo--merck {
  width: 180px;
}
.client-logo--merck img {
  max-height: 65px;
  max-width: 175px;
}

/* Bain & Co */
.client-logo--bain {
  width: 210px;
}
.client-logo--bain img {
  max-height: 44px;
  max-width: 200px;
}

/* WEF */
.client-logo--wef {
  width: 100px;
}
.client-logo--wef img {
  max-height: 40px;
}

/* BACHEM */
.client-logo--bachem {
  width: 110px;
}
.client-logo--bachem img {
  max-height: 34px;
}

/* CESMII */
.client-logo--cesmii {
  width: 120px;
}
.client-logo--cesmii span {
  display: inline-block;
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: rgba(28, 37, 48, 0.76);
  line-height: 1;
  white-space: nowrap;
}

/* Tulip */
.client-logo--tulip {
  width: 110px;
}
.client-logo--tulip span {
  display: inline-block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 1.85rem;
  letter-spacing: -0.07em;
  color: rgba(28, 37, 48, 0.76);
  line-height: 1;
  white-space: nowrap;
}

/* Executive Platforms */
.client-logo--executive-platforms {
  width: 200px;
  height: 50px;
}
.client-logo--executive-platforms span {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(28, 37, 48, 0.72);
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
}

@keyframes client-logo-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .client-logos__track { animation: none; }
}

.case-stack {
  max-width: var(--max-width);
  margin: 0 auto;
}

/* --- Per-brand logo calibration (single source of truth) ---
   The logo files differ wildly in native proportion and ink density (Bain is
   9.0:1, WEF is 1.6:1), so a single uniform size is impossible — each brand is
   calibrated to read at a consistent visual weight. These tokens are consumed
   by the mini tiles and by the modal header, so a new case only needs one line
   added here. Values not overridden fall back to the defaults below. */
[data-case], [data-logo] {
  --logo-w: 155px;      /* tile, desktop */
  --logo-h: 46px;
  --logo-w-sm: 138px;   /* tile, <= 768px */
  --logo-h-sm: 40px;
  --logo-modal-h: 58px; /* modal header */
}

[data-case="bain-and-co"], [data-logo="bain-and-co"] {
  --logo-w: 172px; --logo-h: 28px; --logo-w-sm: 158px; --logo-h-sm: 26px; --logo-modal-h: 24px;
}
[data-case="world-economic-forum"], [data-logo="world-economic-forum"] {
  --logo-w: 108px; --logo-h: 52px; --logo-w-sm: 96px;  --logo-h-sm: 46px; --logo-modal-h: 66px;
}
[data-case="bachem"], [data-logo="bachem"] {
  --logo-w: 128px; --logo-h: 25px; --logo-w-sm: 116px; --logo-h-sm: 23px; --logo-modal-h: 34px;
}
[data-case="schneider-electric"], [data-logo="schneider-electric"] {
  --logo-w: 148px; --logo-h: 44px; --logo-w-sm: 134px; --logo-h-sm: 40px; --logo-modal-h: 50px;
}

/* --- Shared card chrome (featured + supporting cases) --- */
.case-card {
  position: relative;
  text-align: left;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.28s var(--ease), box-shadow 0.28s var(--ease), transform 0.28s var(--ease);
}

/* Accent rule that draws across the top edge on hover */
.case-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s var(--ease);
  z-index: 2;
}

@media (hover: hover) and (pointer: fine) {
  .case-card:hover {
    border-color: var(--border-strong);
    box-shadow: 0 18px 40px -22px rgba(12, 32, 56, 0.42);
    transform: translateY(-4px);
  }
  .case-card:hover::before { transform: scaleX(1); }
}

.case-card:focus-visible {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-light);
}
.case-card:focus-visible::before { transform: scaleX(1); }

/* Titles are sentences rather than single words, so the leading opens up a
   little and the measure is capped to keep the line breaks even. */
.case-card__title {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin: 0 0 0.8rem;
}

.case-card__desc {
  color: var(--ink-soft);
  line-height: 1.78;
  margin: 0 0 1.6rem;
}

.case-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
}

.case-card__cta span[aria-hidden="true"] {
  display: inline-block;
  transition: transform 0.25s var(--ease);
}

.case-card:hover .case-card__cta span[aria-hidden="true"],
.case-card:focus-visible .case-card__cta span[aria-hidden="true"] {
  transform: translateX(4px);
}

/* --- Featured case --- */
.case-card--feature {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  align-items: stretch;
  width: 100%;
  margin-bottom: 1.5rem;
}

.case-card--feature .case-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3.25rem 2.75rem;
  background: linear-gradient(160deg, var(--paper-alt) 0%, #E9F1F8 100%);
  border-right: 1px solid var(--border-soft);
}

/* max-* alone cannot scale an image up, so the featured logo gets an explicit
   height and lets width follow its intrinsic ratio. */
.case-card--feature .case-card__logo img {
  width: auto;
  height: 112px;
  max-width: 300px;
  object-fit: contain;
}

.case-card--feature .case-card__body { padding: 3.25rem 3rem 3rem; }
.case-card--feature .case-card__title { font-size: clamp(1.45rem, 2.3vw, 1.85rem); max-width: 16em; }
.case-card--feature .case-card__desc { font-size: 1.06rem; max-width: 620px; }

/* --- Supporting 2x2 grid --- */
.case-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

.case-card--mini {
  display: flex;
  flex-direction: column;
  padding: 2rem 2rem 1.75rem;
}

.case-card--mini .case-card__media {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  height: 52px;
  padding-bottom: 1.4rem;
  margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--border-soft);
}

/* Body fills the remaining height so the CTA can pin to the foot, keeping the
   cards in a row level even when titles run to different line counts. */
.case-card--mini .case-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.case-card--mini .case-card__logo { display: flex; align-items: center; height: 100%; }

.case-card--mini .case-card__logo img {
  width: auto;
  max-width: var(--logo-w);
  max-height: var(--logo-h);
  object-fit: contain;
}

.case-card__index {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--border-strong);
  line-height: 1;
  flex-shrink: 0;
}

.case-card--mini .case-card__title {
  font-size: 1.24rem;
  margin-bottom: 0.7rem;
}

.case-card--mini .case-card__desc {
  font-size: 0.88rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.case-card--mini .case-card__cta { margin-top: auto; }

.reveal-group .case-card { transition-delay: calc(var(--i, 0) * 80ms); }

.impact-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.impact-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.impact-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 19, 33, 0.74);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.impact-modal__panel {
  position: relative;
  width: min(780px, 100%);
  max-height: min(86vh, 900px);
  overflow: auto;
  background: linear-gradient(145deg, rgba(255,255,255,0.96), rgba(246,248,250,0.97));
  border: 1px solid rgba(255,255,255,0.65);
  border-radius: 6px;
  box-shadow: 0 12px 30px rgba(4, 12, 24, 0.16);
  padding: 2rem;
  z-index: 1;
}

.impact-modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: rgba(31,73,125,0.05);
  color: var(--navy-deep);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.impact-modal__close:hover,
.impact-modal__close:focus-visible {
  background: rgba(31,73,125,0.12);
  border-color: var(--border-strong);
  outline: none;
}

.impact-modal__content {
  display: grid;
  gap: 1.4rem;
}

/* The header now carries the rule that used to sit under the lede, so the
   separation between the title block and the sections is preserved. */
.impact-modal__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.1rem;
  padding-bottom: 1.35rem;
  border-bottom: 1px solid var(--border-strong);
}

/* max-* alone cannot scale an image up (the WEF mark is only 102x63 natively), so
   each logo gets an explicit height and lets the width follow its intrinsic
   ratio. Heights come from the per-brand tokens in the Impact Cases section. */
.impact-modal__logo {
  display: block;
  width: auto;
  height: var(--logo-modal-h);
  object-fit: contain;
  flex-shrink: 0;
}

/* The header is a flex column, so the heading is stretched to fill the panel
   rather than shrink-wrapping to its text. */
.impact-modal__content h3 {
  align-self: stretch;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2vw, 1.62rem);
  line-height: 1.28;
  color: var(--navy-deep);
  margin: 0;
}
 
 
.impact-modal__sections {
  display: grid;
  gap: 1.3rem;
}
 
.impact-modal__section {
  padding-left: 1rem;
  border-left: 2px solid var(--blue);
}
 
.impact-modal__section h4 {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 0.5rem;
}
 
.impact-modal__section p {
  color: var(--ink-soft);
  line-height: 1.8;
  margin: 0;
}


body.modal-open,
body.nav-open {
  overflow: hidden;
}

/* =====================================================================
   9. Buttons
   ===================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--navy);
  color: #fff;
  padding: 0.85rem 1.9rem;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  border: 1.5px solid var(--navy);
  transition: background 0.22s var(--ease), color 0.22s var(--ease), transform 0.15s ease, box-shadow 0.22s ease;
}
.btn:hover, .btn:focus-visible {
  background: var(--blue-hover);
  border-color: var(--blue-hover);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.18);
  outline: none;
}

.btn-ghost {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.55);
}
.btn-ghost:hover, .btn-ghost:focus-visible {
  background: rgba(255,255,255,0.12);
  border-color: #fff;
  color: #fff;
}

/* =====================================================================
   10. Services cards
   ===================================================================== */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}

.card {
  background: #fff;
  padding: 2.25rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.card__number {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 0.15rem;
}

.card > p.card__number {
  color: var(--blue);
}

.card h3 {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--navy-deep);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.35rem;
  padding-bottom: 0.9rem;
  border-bottom: 1.5px solid var(--blue-light);
}

.card p {
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.75;
}

/* =====================================================================
   11. Advisory — Approach grid
   ===================================================================== */
.approach-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}

.approach-item {
  background: #fff;
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 1.25rem;
}

.approach-icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.approach-icon svg {
  width: 30px;
  height: 30px;
  fill: var(--navy);
}

.approach-icon img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(20%) sepia(100%) saturate(450%) hue-rotate(196deg) brightness(82%);
}

.approach-item p {
  font-size: 0.97rem;
  line-height: 1.75;
  color: var(--ink-soft);
}

.approach-item p strong { color: var(--ink); font-weight: 600; }

/* =====================================================================
   12. About Bart page
   ===================================================================== */
.about-hero {
  position: relative;
  padding: 5rem 1.75rem 4rem;
  background:
   linear-gradient(115deg, rgba(20,48,79,0.96) 10%, rgba(20,48,79,0.76) 45%, rgba(31,73,125,0.58) 100%),
   url('assets/Bart_Presentation.jpeg') center 28% / cover no-repeat;
  color: #fff;
  isolation: isolate;
  overflow: hidden;
}

.about-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('assets/Bart_Presentation.jpeg') center 28% / cover no-repeat;
  filter: grayscale(100%) contrast(1.05) brightness(0.95);
  transform: scale(1.02);
  z-index: -2;
}

.about-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
   linear-gradient(115deg, rgba(20,48,79,0.96) 10%, rgba(20,48,79,0.76) 45%, rgba(31,73,125,0.58) 100%);
  z-index: -1;
}

.about-hero .section-inner {
  display: flex;
  justify-content: flex-start;
}

.about-hero-card {
  width: 100%;
  max-width: var(--max-width);
  padding: clamp(1.75rem, 3vw, 2.75rem);
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 18px;
  box-shadow: 0 24px 45px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.about-hero .eyebrow {
  color: #B9D9F2;
  margin-bottom: 1.1rem;
}

.about-hero .eyebrow::before { background: #B9D9F2; }

.about-hero h1 {
  font-size: clamp(2.2rem, 3.2vw, 3rem);
  color: #fff;
  margin-bottom: 0.65rem;
}

.about-hero .role {
  color: #DCEEF9;
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 1rem;
}

.about-hero p {
  color: rgba(255,255,255,0.9);
  line-height: 1.85;
  font-size: 1.02rem;
}

.about-content .section-inner {
  max-width: var(--max-width);
}

.about-body {
  width: 100%;
  max-width: var(--max-width);
}

.about-body p {
  margin-bottom: 1.5rem;
  line-height: 1.9;
  color: var(--ink);
  font-size: 1rem;
}

.about-body h2 {
  font-size: 1.35rem;
  color: var(--navy);
  margin: 3rem 0 1.1rem;
  padding-top: 0.5rem;
}

.awards-list {
  list-style: none;
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
  width: 100%;
  max-width: var(--max-width);
}

.awards-list li {
  padding: 1.1rem 0 1.1rem 1.7rem;
  position: relative;
  border-bottom: 1px solid var(--border);
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--ink);
}

.awards-list li:first-child { border-top: 1px solid var(--border); }

.awards-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.35rem;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid var(--navy-deep);
}

.awards-list li strong { color: var(--navy); font-weight: 600; }

/* =====================================================================
   13. CTA band
   ===================================================================== */
.cta-band {
  background: var(--navy-deep);
  color: #fff;
  text-align: left;
  padding: 4rem 1.75rem;
}
.cta-band .section-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.cta-band h2 {
  color: #fff;
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  margin-bottom: 0.5rem;
}
.cta-band p {
  color: rgba(255,255,255,0.72);
  max-width: 460px;
  font-size: 1rem;
  line-height: 1.7;
}
.cta-band .cta-text { max-width: 560px; }

/* =====================================================================
   14. Footer
   ===================================================================== */
footer {
  background: var(--navy-deep);
  color: rgba(255,255,255,0.6);
  padding: 1rem 1.75rem 2.5rem;
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
}

.footer-icons {
  display: flex;
  justify-content: center;
  gap: 0.85rem;
}

.footer-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 50%;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.footer-icons a:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  transform: translateY(-2px);
}

.footer-icons svg { width: 16px; height: 16px; fill: currentColor; }

footer .fine-print {
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.45);
}

/* =====================================================================
   15. Responsive — Tablet
   ===================================================================== */
@media (max-width: 1024px) {
  .approach-grid { grid-template-columns: 1fr 1fr; }
}

/* =====================================================================
   16. Responsive — Impact cases
   ===================================================================== */
@media (max-width: 900px) {
  .case-card--feature { grid-template-columns: 1fr; }
  .case-card--feature .case-card__media {
    justify-content: flex-start;
    border-right: none;
    border-bottom: 1px solid var(--border-soft);
    padding: 1.75rem;
  }
  .case-card--feature .case-card__logo img { height: 62px; max-width: 200px; }
  .case-card--feature .case-card__body { padding: 2rem 1.75rem 1.75rem; }
  .case-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   17. Responsive — Mobile
   ===================================================================== */
@media (max-width: 768px) {

  .header-inner {
    position: relative;
    padding: 0 1.25rem;
  }
  .logo { flex: 1 1 auto; }
  .logo img { height: 28px; }
  .case-card--feature .case-card__title { font-size: 1.42rem; }
  .case-card--mini { padding: 1.7rem 1.5rem 1.5rem; }
  .case-card--mini .case-card__title { font-size: 1.14rem; }
  .case-card--mini .case-card__logo img {
    max-width: var(--logo-w-sm);
    max-height: var(--logo-h-sm);
  }
  .impact-modal__panel { padding: 1.5rem; }
  .hamburger {
    display: flex;
    margin-left: auto;
    margin-right: 0;
    padding: 0.55rem;
    z-index: 12;
  }

  .nav-row {
    gap: 0;
    flex: 0 0 auto;
  }

  nav {
    display: none;
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(100dvh - var(--header-h));
    background: #fff;
    overflow-y: auto;
    z-index: 20;
    padding: 1.25rem 1.25rem 2rem;
  }

  .nav-toggle:checked ~ .nav-row nav { display: flex; }

  nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: min(100%, 420px);
    margin: 0 auto;
    padding: 0;
  }

  nav ul li {
    width: 100%;
    border-bottom: 1px solid var(--border-soft);
  }

  nav ul li:last-child {
    border-bottom: none;
  }

  nav ul li a {
    display: block;
    padding: 1.05rem 0;
    font-size: 1rem;
    color: var(--navy-deep);
    font-weight: 600;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    position: relative;
  }
  nav ul li a:not(.nav-cta)::before { display: none; }
  nav ul li a:not(.nav-cta):hover,
  nav ul li a:not(.nav-cta).active {
    color: var(--navy);
    background: transparent;
  }

  nav ul li a:not(.nav-cta).active {
    color: var(--blue);
  }

  .nav-cta {
    display: inline-flex;
    justify-content: center;
    margin-top: 0.9rem;
    padding: 0.8rem 1rem;
    font-size: 0.9rem;
    color: var(--navy-deep);
    border-color: var(--navy);
    background: transparent;
    border-radius: 0;
    border: 1px solid var(--navy);
  }
  .nav-cta:hover,
  .nav-cta:focus-visible {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
  }

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

  /* Hero */
  .hero { padding: 4rem 1.25rem 3.25rem; }
  .hero--landing {
    min-height: auto;
    padding: 3.5rem 1.25rem 3rem;
  }
  .hero-actions { gap: 1.25rem; }

  .credentials-strip .section-inner { flex-direction: column; }
  .credentials-strip .credential {
    border-left: none;
    border-top: 1px solid var(--border);
    padding: 1.5rem 0;
  }
  .credentials-strip .credential:first-child { border-top: none; padding-top: 0; }

  /* Sections */
  section { padding: 3.5rem 1.25rem; }
  section.tight { padding: 2.75rem 1.25rem; }
  .section-intro { margin-bottom: 2rem; }

  /* Cards / approach */
  .cards { grid-template-columns: 1fr; }
  .approach-grid { grid-template-columns: 1fr; }
  .approach-item { text-align: left; }

  /* About Bart */
  .about-body { margin-left: 0; max-width: none; }

  .awards-list li { font-size: 0.92rem; padding-left: 1.5rem; }

  .cta-band .section-inner { flex-direction: column; text-align: center; align-items: center; }
  .cta-band .cta-text { text-align: center; }
}

@media (max-width: 400px) {
  .hero h1 { font-size: 1.85rem; }
}