/* ==========================================================================
   Malta Vision 2050 — Design System
   4px base grid · Custom CSS only · WCAG 2.1 AA
   ========================================================================== */

:root {
  /* Colour palette — Figma design tokens */
  --color-black: #000000;
  --color-body: #495057;          /* Dark grey */
  --color-white: #FFFFFF;
  --color-red: #C10016;
  --color-red-hover: #AD0002;
  --color-red-footer: #D40D23;
  --color-red-footer-hover: #C10016;
  --color-bg-light: #F8FBFF;      /* Light blue */
  --color-divider: #E4E5E6;       /* Medium grey */
  --color-footer-bg: #0B1F3B;
  --color-focus: #2563eb;

  /* Typography */
  --font-heading: "Geist", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Layout */
  --max-width: 1200px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Effects */
  --shadow-card: 0 4px 20px 0 rgba(1, 13, 18, 0.05);
  --shadow-header: 0 4px 10px 0 rgba(1, 13, 18, 0.05);
}

/* ============ Reset / base ============ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: var(--color-body);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  font-size: inherit;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: inherit;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

p {
  margin: 0 0 16px;
}
p:last-child {
  margin-bottom: 0;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 300;
  color: var(--color-black);
  margin: 0 0 16px;
  line-height: 1.2;
  letter-spacing: 0;
}

/* ============ Accessibility helpers ============ */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 8px;
  top: -64px;
  background: var(--color-black);
  color: var(--color-white);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  z-index: 1000;
  font-weight: 500;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 8px;
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ============ Utilities ============ */
.bg-white       { background: var(--color-white); }
.bg-light-blue  { background: var(--color-bg-light); }
.bg-dark-blue   { background: var(--color-footer-bg); }

.text-red     { color: var(--color-red); }
.text-white   { color: var(--color-white); }
.text-body    { color: var(--color-body); font-size: 16px; line-height: 1.4; font-weight: 300; }
.text-heading { color: var(--color-black); }
.text-body--lead,
.text-intro { color: var(--color-black); font-size: 20px; line-height: 1.4; font-weight: 500; }
@media (max-width: 640px) {
  .text-body--lead,
  .text-intro { font-size: 18px; }
}

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

.section-pad {
  padding: 80px 0;
}
/* Narrower-screen overrides for .section-pad live below the 1100px block
   further down (around the typography media queries) so the cascade goes
   80px → 60px (≤1100px) → 48px (≤959px) without later rules clobbering. */

.grid-2col,
.grid-3col,
.grid-4col {
  display: grid;
  gap: 32px;
}
.grid-2col { grid-template-columns: repeat(2, 1fr); gap: 64px; }
@media (max-width: 768px) {
  .grid-2col { gap: 32px; }
}
.grid-3col { grid-template-columns: repeat(3, 1fr); }
.grid-4col { grid-template-columns: repeat(4, 1fr); gap: 24px; }

.grid-2col--align-top { align-items: start; }

@media (max-width: 960px) {
  .grid-3col,
  .grid-4col { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 959px) {
  .grid-2col { grid-template-columns: 1fr; }
  /* When the 2-col layout stacks, constrain each column to 600px and centre.
     The double-class selector raises specificity above .intro__heading and
     .section-head__left which set margin: 0 elsewhere. */
  .grid-2col.grid-2col > * {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
  /* intro__body uses align-items: flex-start on desktop, which shrinks the
     paragraph to its content width. Stretch them once stacked so they use
     the full 600px column. */
  .grid-2col .intro__body { align-items: stretch; }
  /* Planning for Generations: image-first in source for desktop layout,
     but should appear after the text once stacked. */
  #planning-for-generations .grid-2col > div:first-child { order: 2; }
}
@media (max-width: 640px) {
  .grid-3col,
  .grid-4col { grid-template-columns: 1fr; }
}

.divider {
  border-top: 1px solid var(--color-divider);
  height: 0;
}

.icon-accent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-bottom: 16px;
  color: var(--color-red);
}

/* Section title: red brand mark fixed at a single intrinsic size,
   top-aligned with the heading. Because size never scales with the
   heading, the icon reads taller than a 1-line title, ~equal to a
   2-line title, and shorter than 3+-line titles. */
.section-title {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 24px;
}
.section-title__icon {
  flex-shrink: 0;
  display: block;
  width: 55px;
  height: 132px;
}
/* .section-title__icon size overrides live below the 1100px block (in the
   768px media query) so the cascade goes 55x132 → 42x100 (≤1100px) → 31x76
   (≤768px) without later rules clobbering. */
/* Headings inside section-title use a tight line-height so the
   top-aligned icon sits flush with the cap-top of the first line.
   Title font (55px desktop / 32px mobile) is smaller than the icon
   height (132/76), so 1-line titles read shorter than the icon,
   2-line titles ~match it, and 3+-line titles exceed it. */
.section-title > .h-display,
.section-title > .h-section {
  margin: 0;
  font-size: 55px;
  line-height: 1;
  font-weight: 300;
}
@media (max-width: 1100px) {
  .section-title > .h-display,
  .section-title > .h-section {
    font-size: 42px;
  }
  .section-title__icon { width: 42px; height: 100px; }
}
@media (max-width: 768px) {
  .section-title > .h-display,
  .section-title > .h-section {
    font-size: 32px;
  }
  .section-title { gap: 12px; }
  .section-title__icon { width: 31px; height: 76px; }
}

/* ============ Typography scale ============ */
.h-display {
  font-size: 55px;
  line-height: 1.2;
  font-weight: 300;
  letter-spacing: 0;
}
.h-section {
  font-size: 55px;
  line-height: 1.2;
  font-weight: 300;
  letter-spacing: 0;
}
.h-card {
  font-family: var(--font-heading);
  font-size: 22px;
  line-height: 1.2;
  font-weight: 300;
  letter-spacing: 0;
  color: var(--color-black);
  margin: 0;
}
@media (max-width: 1100px) {
  .h-display, .h-section { font-size: 42px; }
  .grid-2col { gap: 48px; }
  .section-pad { padding: 60px 0; }
}
@media (max-width: 959px) {
  .section-pad { padding: 48px 0; }
}
@media (max-width: 768px) {
  .h-display, .h-section { font-size: 32px; }
  .h-card { font-size: 20px; }
}

/* ============ Buttons ============ */
/* Primary pill button (Figma): h44 px24 py10 gap12 rounded25 DM Sans Medium 16 uppercase */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 44px;
  padding: 10px 24px;
  border-radius: 25px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
  text-decoration: none;
  white-space: nowrap;
}

.btn__arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}
.btn:hover .btn__arrow,
.btn:focus-visible .btn__arrow {
  transform: translateX(4px);
}

.btn-primary {
  background: var(--color-red);
  color: var(--color-white);
}
.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--color-red-hover);
  color: var(--color-white);
}

.btn-primary--footer {
  background: var(--color-red-footer);
}
.btn-primary--footer:hover,
.btn-primary--footer:focus-visible {
  background: var(--color-red-footer-hover);
}

.btn-outline {
  background: transparent;
  color: var(--color-red);
  border: 1px solid var(--color-red);
}
.btn-outline:hover,
.btn-outline:focus-visible {
  background: var(--color-red);
  color: var(--color-white);
}

/* Underlined text-link button (Figma): h44 py10 gap16 border-bottom 1px black,
   DM Sans Medium 16 uppercase black, arrow icon 24×24 */
.btn-link {
  height: 44px;
  padding: 10px 0;
  gap: 16px;
  border-radius: 0;
  border-bottom: 1px solid var(--color-black);
  color: var(--color-black);
  background: transparent;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0;
}
/* .btn-link__text is a styling hook; underline comes from border-bottom on the button itself. */
.btn-link:hover,
.btn-link:focus-visible {
  color: var(--color-red);
  border-bottom-color: var(--color-red);
}

/* ============ Header / Nav ============ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-white);
  box-shadow: var(--shadow-header);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px;
  gap: 24px;
}
@media (max-width: 1180px) {
  .site-header__inner { padding: 16px; }
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-black);
  font-family: var(--font-heading);
}
.brand__logo {
  display: block;
  height: auto;
  width: 100%;
  max-width: 240px;
}
.brand__mark { flex-shrink: 0; }
.brand__text {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.02em;
}
.brand__name { font-weight: 500; }
.brand__year {
  color: var(--color-red);
  font-weight: 500;
  letter-spacing: 0.04em;
}
.brand--inverse,
.brand--inverse .brand__text {
  color: var(--color-white);
}

.primary-nav__list {
  display: flex;
  align-items: center;
  gap: 12px;
}
.primary-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 8px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-body);
  text-transform: uppercase;
  letter-spacing: 0;
  transition: color 0.2s ease;
}
.primary-nav__link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  width: 50%;
  max-width: 64px;
  height: 2px;
  background: var(--color-red);
  transition: transform 0.2s ease;
}
.primary-nav__link:hover,
.primary-nav__link:focus-visible,
.primary-nav__link[aria-current="page"] {
  color: var(--color-red);
}
.primary-nav__link:hover::after,
.primary-nav__link:focus-visible::after,
.primary-nav__link[aria-current="page"]::after {
  transform: translateX(-50%) scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
  .primary-nav__link, .primary-nav__link::after { transition: none; }
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: var(--radius-sm);
}
.nav-toggle__bar {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-black);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 1180px) {
  .nav-toggle { display: inline-flex; }

  .primary-nav {
    position: absolute;
    top: 100%;
    left: auto;
    right: 0;
    width: 100%;
    max-width: 500px;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-divider);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.05);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .primary-nav.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .primary-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 16px 24px 24px;
  }
  .primary-nav__list li {
    border-bottom: 1px solid var(--color-divider);
  }
  .primary-nav__list li:nth-last-child(2),
  .primary-nav__list li:last-child {
    border-bottom: 0;
  }
  .primary-nav__list li:last-child {
    padding-top: 16px;
  }
  .primary-nav__link {
    display: block;
    padding: 16px 0;
  }
  /* Disable the desktop centered red underline on mobile */
  .primary-nav__link::after { content: none; }
  .primary-nav__list .btn { justify-content: center; align-self: flex-start; }
}

/* ============ Hero ============
   Generic hero used on every page. Always renders with a 16/9 aspect
   ratio and an elliptical curve clipped from the bottom edge. The
   `.hero__overlay`, `.hero__inner` and `.hero__title` are all
   optional — pages without text just use `.hero` + `.hero__image`. */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: auto 21 / 9;
  clip-path: ellipse(130% 100% at 50% 0%);
}
@media (min-width: 1400px) {
  .hero { aspect-ratio: auto 3 / 1; }
}
.hero--video {
  aspect-ratio: 21 / 9;
}
@media (min-width: 1400px) {
  .hero--video { aspect-ratio: 21 / 9; }
}
@media (max-width: 540px) {
  .hero.hero--video { aspect-ratio: 16 / 9; }
}
.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
@media (min-width: 541px) {
  .hero__video { object-position: center 58%; }
}
.hero__fallback {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
  .hero__fallback { display: block; }
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: -1;
}
.hero__inner {
  height: 100%;
  display: flex;
  align-items: flex-end;
  padding-bottom: 5%;
}
.hero__title {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 90px;
  line-height: 1.1;
  color: var(--color-white);
  margin: 0;
  max-width: 720px;
}
@media (max-width: 1100px) {
  .hero__title { font-size: 68px; }
}
@media (max-width: 768px) {
  .hero__title { font-size: 48px; }
}
@media (max-width: 540px) {
  .hero { aspect-ratio: 3 / 4; }
  .hero__inner {
    padding: 16px;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .hero__title {
    font-size: 40px;
    max-width: 300px;
    margin: 0 auto;
  }
  .hero__title br { display: none; }
}

/* ============ News page hero ============ */
/* Solid dark-blue hero — no background image, no fixed aspect-ratio.
   Same elliptical bottom clip as .hero; z-index:1 ensures the curved
   edge renders above the articles section below. */
.news-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--color-footer-bg);
  clip-path: ellipse(130% 100% at 50% 0%);
  z-index: 1;
  padding: 80px 0;
}
.news-hero__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.news-hero .section-title { margin-bottom: 0; }
.news-hero .h-section { color: var(--color-white); }
.news-hero__body {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.8);
  max-width: 650px;
  margin: 0;
}
@media (max-width: 1100px) {
  .news-hero { padding: 60px 0; }
}
@media (max-width: 768px) {
  .news-hero { padding: 48px 0 64px; }
}

/* ============ News articles section ============ */
/* Slides 80px under the news-hero's elliptical curve; extra
   top-padding keeps card content well below the clipped area. */
.news-articles {
  background: var(--color-bg-light);
  padding: 160px 0 80px;
  margin-top: -80px;
  position: relative;
  z-index: 0;
}
@media (max-width: 1100px) {
  .news-articles { padding-top: 140px; padding-bottom: 60px; }
}
@media (max-width: 768px) {
  .news-articles { padding-top: 128px; padding-bottom: 48px; }
}

/* ============ Section heads ============ */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.section-head__left { max-width: 572px; margin: 0; }
.section-head__cta { flex-shrink: 0; }
.section-intro { max-width: 792px; margin-bottom: 48px; }
.intro__heading { margin: 0; }
.intro__body { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.intro__body > p { margin: 0; }

@media (max-width: 640px) {
  .section-head { flex-direction: column; }
  .section-head__cta { width: 100%; justify-content: center; }
  /* Projects of National Interest: on mobile show title → intro → button → carousel */
  #projects-national-interest > .container { display: flex; flex-direction: column; }
  #projects-national-interest .section-head { display: contents; }
  #projects-national-interest .section-head__left { order: 1; }
  #projects-national-interest .section-intro { order: 2; margin-bottom: 24px; }
  #projects-national-interest .section-head__cta { order: 3; margin-bottom: 32px; width: auto; align-self: flex-start; }
  #projects-national-interest .carousel { order: 4; }
}

/* ============ Intro ============ */
.intro__heading .h-display { margin-bottom: 0; }

/* ============ Cards ============ */
/* Card matches Figma "Project card": white bg, rounded 16 (12 mobile),
   overflow:hidden, drop shadow. Image fills top of card (top corners
   inherit card radius via overflow). Category tag pills sit top-right
   over the image. The 44×44 red round CTA pill sits bottom-right of
   the image, overlapping the image/body boundary by ~22px. Stretched
   link on the title makes the whole card clickable; the CTA stays an
   independently focusable target via z-index. */
.card {
  position: relative;
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px 0 rgba(1, 13, 18, 0.08);
}
@media (max-width: 640px) {
  .card { border-radius: 12px; }
}
.card__title-link {
  color: inherit;
  text-decoration: none;
}
.card__title-link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.card__title-link:hover {
  color: var(--color-red);
}
.card__title-link:focus-visible {
  outline: none;
}
.card:focus-within {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
}

.card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: visible;
  background: var(--color-bg-light);
}
.card__media > img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  clip-path: ellipse(130% 100% at 50% 0%);
}

/* Category pills, top-right of image */
.card__tags {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: calc(100% - 16px);
  z-index: 2;
  pointer-events: none;
}
.card__tag {
  display: inline-flex;
  align-items: center;
  height: 25px;
  padding: 0 12px;
  background: var(--color-white);
  border-radius: 15px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-body);
  white-space: nowrap;
}

.card__body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}
.card__title {
  font-family: var(--font-heading);
  font-size: 22px;
  line-height: 1.2;
  font-weight: 300;
  letter-spacing: 0;
  margin: 0;
  color: var(--color-black);
}
.card__text {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4;
  font-weight: 300;
  color: var(--color-body);
  margin: 0;
}
@media (max-width: 640px) {
  .card__title { font-size: 20px; }
}

/* ============ Key Documents section ============ */
.key-documents {
  background: var(--color-white);
  padding: 80px 0;
}
.key-documents__header {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 800px;
  margin-bottom: 48px;
}
.key-documents .section-title { margin-bottom: 0; }
.key-documents__intro {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.4;
  color: var(--color-body);
  margin: 0;
}
.doc-cards {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.doc-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--color-white);
  border: 1px solid #e4e5e6;
  border-radius: var(--radius-lg);
  padding: 16px;
  flex: 1;
  min-width: min(300px, 100%);
  max-width: 384px;
}
.doc-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  align-self: stretch;
}
.doc-card__title {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 300;
  line-height: 1.4;
  color: var(--color-black);
  margin: 0;
}
.doc-card__text {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.4;
  color: var(--color-body);
  margin: 0;
  flex: 1;
}
.doc-card__dl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--color-red);
  color: var(--color-white);
  transition: background 0.2s ease;
}
.doc-card__dl:hover,
.doc-card__dl:focus-visible {
  background: var(--color-red-hover);
  color: var(--color-white);
}
@media (max-width: 1100px) {
  .key-documents { padding: 60px 0; }
}
@media (max-width: 768px) {
  .key-documents { padding: 48px 0; }
  .doc-card { max-width: 100%; }
}

/* Article card — small date label */
.article-date {
  display: block;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.4;
  color: rgba(73, 80, 87, 0.8);
}

/* Article card — "READ ARTICLE →" underline-only CTA.
   z-index:2 keeps it above the .card__title-link::before stretch layer.
   margin-top:auto pins it to the bottom of the flex column when inside
   a .card__body (same pattern as .card__status on project cards). */
.card__body .btn-read {
  margin-top: auto;
}
.btn-read {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-black);
  text-decoration: none;
  padding-bottom: 10px;
  border-bottom: 1px solid currentColor;
  transition: color 0.2s ease;
  position: relative;
  z-index: 2;
}
.btn-read:hover,
.btn-read:focus-visible {
  color: var(--color-red);
}

/* Circular red arrow CTA pinned to the bottom-right of the image,
   straddling the image/body boundary (translateY 50% pulls half of the
   button below the image). pointer-events on tags don't block this. */
.card__cta {
  position: absolute;
  right: 24px;
  bottom: 10px;
  transform: translateY(50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--color-red);
  color: var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  transition: background 0.2s ease, transform 0.2s ease;
}
.card__cta > span {
  display: inline-block;
  transform: rotate(-45deg);
}
.card__cta:hover,
.card__cta:focus-visible {
  background: var(--color-red-hover);
  color: var(--color-white);
  transform: translateY(50%) translateX(2px);
}

/* ============ Card status bar (projects listing page) ============
   Drop .card__status at the end of .card__body for any card that
   needs an approval progress bar. Fill width and colour are encoded
   in a single modifier class — no inline styles required. */
.card__status {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
}
.card__progress {
  position: relative;
  height: 4px;
  background: var(--color-divider);
  border-radius: 2px;
  overflow: hidden;
}
.card__progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 2px;
}
.card__progress-fill--green-100 {
  width: 100%;
  background: #5BA300;
}
.card__progress-fill--orange-85 {
  width: 85%;
  background: #D38200;
}
.card__progress-fill--orange-70 {
  width: 70%;
  background: #D38200;
}
.card__progress-fill--orange-75 {
  width: 75%;
  background: #EB6813;
}
.card__progress-fill--orange-50 {
  width: 50%;
  background: #8B4500;
}
.card__progress-fill--yellow-25 {
  width: 25%;
  background: #F9C100;
}
.project-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 2rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #1a2744;
  text-decoration: none;
}
.project-back-link:hover,
.project-back-link:focus-visible {
  text-decoration: underline;
}
.card__status-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--color-body);
}
.card__status-meta > :last-child {
  text-align: right;
}

/* ============ Projects listing page ============ */
/* 3-col responsive grid for the <ul> of project cards */
.cards-grid {
  list-style: none;
  margin: 0;
  padding: 4px 0 4px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}
@media (max-width: 960px) {
  .cards-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .cards-grid { grid-template-columns: 1fr; }
}
/* Cards inside the listing grid stretch to fill equal heights */
.cards-grid > .card { height: 100%; }

/* ============ Carousel ============ */
/* Horizontal scroll-snap carousel at every breakpoint. Card width is
   driven by --cards-per-view so a partial card always peeks at the
   right edge to signal more content. */
.carousel { position: relative; }
.carousel:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}
.carousel__track {
  list-style: none;
  padding: 4px 0 16px;
  margin: 0;
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  --cards-per-view: 3.25;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > .card {
  flex: 0 0 calc((100% - (var(--cards-per-view) - 1) * 24px) / var(--cards-per-view));
  scroll-snap-align: start;
}
@media (max-width: 960px) {
  .carousel__track { --cards-per-view: 1.8; gap: 16px; }
  .carousel__track > .card {
    flex-basis: calc((100% - (var(--cards-per-view) - 1) * 16px) / var(--cards-per-view));
  }
}
@media (max-width: 640px) {
  .carousel__track { --cards-per-view: 1.15; }
}
@media (prefers-reduced-motion: reduce) {
  .carousel__track { scroll-behavior: auto; }
}

/* Slider controls (Figma): icon-only arrows, then a row of pill dots.
   Active dot = 36×5 #495057, inactive = 8×5 rgba(73,80,87,0.4). */
.carousel__controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  margin-top: 24px;
}
.carousel__btn {
  width: 24px;
  height: 24px;
  border: 0;
  background: transparent;
  color: var(--color-body);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  transition: color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
.carousel__btn:hover:not([disabled]),
.carousel__btn:focus-visible {
  color: var(--color-red);
  transform: translateX(2px);
}
.carousel__btn[data-carousel-prev]:hover:not([disabled]),
.carousel__btn[data-carousel-prev]:focus-visible {
  transform: translateX(-2px);
}
.carousel__btn[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}

.carousel__dots {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.carousel__dot {
  width: 8px;
  height: 5px;
  border-radius: 3px;
  background: rgba(73, 80, 87, 0.4);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background 0.25s ease, width 0.3s ease;
}
.carousel__dot:hover,
.carousel__dot:focus-visible {
  background: var(--color-body);
}
.carousel__dot[aria-current="true"] {
  background: var(--color-body);
  width: 36px;
}

/* ============ Bleed image (Figma: 568×320 rounded-16) ============ */
.bleed-image {
  width: 100%;
  height: auto;
  aspect-ratio: 568 / 320;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

/* ============ Mission statement (Figma: Geist 50/1.2 max-width 900) ============ */
.mission {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 50px;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
  color: var(--color-black);
  max-width: 900px;
  margin: 0 auto;
}
@media (max-width: 1100px) {
  .mission { font-size: 38px; max-width: 640px; }
}
@media (max-width: 768px) {
  .mission { font-size: 28px; max-width: 510px; }
}

/* ============ Pillars (Figma: number+title both Geist 22, 1px divider) ============ */
.pillars {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.pillar {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 24px;
  padding: 24px 0 0;
  border-top: 1px solid var(--color-divider);
  align-items: start;
}
.pillar:first-child { border-top: 0; padding-top: 0; }
.pillar > * {
  transition: transform 0.2s ease;
}
.pillar__num {
  font-family: var(--font-heading);
  font-size: 22px;
  line-height: 1.2;
  font-weight: 300;
  color: var(--color-black);
  transition: color 0.2s ease, transform 0.2s ease;
}
.pillar:hover > * { transform: translateX(16px); }
.pillar:hover .pillar__num { color: var(--color-red); }
.pillar:hover .pillar__text { color: var(--color-black); }
@media (prefers-reduced-motion: reduce) {
  .pillar > *, .pillar__num, .pillar__text { transition: none; }
  .pillar:hover > * { transform: none; }
}
.pillar__title {
  font-family: var(--font-heading);
  font-size: 22px;
  line-height: 1.2;
  font-weight: 300;
  letter-spacing: 0;
  margin: 0 0 12px;
  color: var(--color-black);
}
.pillar__text {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4;
  font-weight: 300;
  margin: 0;
  color: var(--color-body);
  transition: color 0.2s ease;
}

/* ============ CTA Band ============ */
/* Curved top edge: elliptical radii (50% horizontal, fixed vertical) make
   each top corner span half the width, so the two corner arcs meet in the
   middle and form one continuous wide arc across the entire top edge. */
#footer-cta.cta-band {
  clip-path: ellipse(110% 100% at 50% 100%);
}

/* Extra breathing room before the arch overlap on the projects page. */
#selection-criteria {
  padding-bottom: 160px;
}
@media (max-width: 1100px) {
  #selection-criteria { padding-bottom: 140px; }
}
@media (max-width: 959px) {
  #selection-criteria { padding-bottom: 128px; }
}

/* When the CTA band directly follows the light-blue criteria section
   (projects page only), pull it up so the arch overlaps the section above. */
#selection-criteria + #footer-cta.cta-band {
  margin-top: -80px;
  padding-top: 160px;
}
@media (max-width: 1100px) {
  #selection-criteria + #footer-cta.cta-band {
    margin-top: -60px;
    padding-top: 120px;
  }
}
@media (max-width: 959px) {
  #selection-criteria + #footer-cta.cta-band {
    margin-top: -48px;
    padding-top: 96px;
  }
}

.cta-band__inner {
  text-align: center;
  max-width: 608px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.cta-band__title {
  font-family: var(--font-heading);
  font-size: 55px;
  line-height: 1.2;
  font-weight: 300;
  letter-spacing: 0;
  margin: 0;
  color: var(--color-white);
}
.cta-band__text {
  color: var(--color-white);
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 300;
}
.cta-band__inner > .btn { margin-top: 8px; }
@media (max-width: 640px) {
  .cta-band__title { font-size: 32px; }
}

/* ============ Footer ============ */
.site-footer {
  color: var(--color-white);
  padding: 0 0 40px;
}
.site-footer__top-divider {
  border-top: 1px solid var(--color-body);
  margin-bottom: 24px;
}
.site-footer__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.site-footer__row + .site-footer__row {
  margin-top: 24px;
}
.site-footer__nav ul {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.site-footer__nav a,
.site-footer__copy {
  color: var(--color-white);
  font-family: var(--font-body);
}
.site-footer__nav a {
  font-size: 16px;
  line-height: 1.4;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0;
}
.site-footer__nav a:hover,
.site-footer__nav a:focus-visible {
  color: var(--color-red-footer);
}
.site-footer__row--small {
  font-size: 14px;
}
.site-footer__copy {
  font-size: 14px;
  line-height: 1.4;
  font-weight: 300;
  margin: 0;
  color: var(--color-white);
}
.site-footer__legal {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.site-footer__legal a {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.4;
  font-weight: 300;
  color: var(--color-white);
  text-transform: none;
  letter-spacing: 0;
}
.site-footer__legal a:hover,
.site-footer__legal a:focus-visible {
  color: var(--color-red-footer);
}

@media (max-width: 640px) {
  .site-footer__row { flex-direction: column; align-items: flex-start; }
  .site-footer__nav ul { flex-direction: column; gap: 12px; }
}

/* ============ Contact form ============ */
.contact {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 959px) {
  .contact {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .contact__intro,
  .form-card {
    max-width: 600px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}
.contact__intro .section-title { align-items: center; }
.contact__intro .h-display { margin-bottom: 0; }
.contact__intro-body { display: flex; flex-direction: column; gap: 12px; }

.form-card {
  background: #f8fbff;
  border-radius: 24px;
  padding: 36px;
  box-shadow: 0 4px 10px rgba(1, 13, 18, 0.05);
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.form-card__title {
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 300;
  line-height: 1.2;
  color: var(--color-black);
  margin: 0;
}
@media (max-width: 959px) {
  .form-card__title { font-size: 26px; }
  .form-card { padding: 24px; border-radius: 20px; }
}

.form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.form__row {
  display: flex;
  gap: 16px;
}
.form__row .form__field {
  flex: 1;
  min-width: 0;
}
.form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form__label {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-black);
}
.form__label span[aria-hidden] {
  color: var(--color-red);
}
.form__input {
  font-family: inherit;
  font-size: 16px;
  line-height: 1.4;
  padding: 11px 12px;
  border: 1px solid #8B8F9D;
  border-radius: 8px;
  background: var(--color-white);
  color: var(--color-black);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
  height: 44px;
}
.form__input:focus {
  outline: none;
  border-color: var(--color-footer-bg);
  box-shadow: 0 0 0 0.25rem rgba(11, 31, 59, 0.25);
}
.form__input--textarea {
  resize: vertical;
  min-height: 160px;
  height: auto;
}
.form__input--select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23555' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
  cursor: pointer;
}
@media (max-width: 959px) {
  .form__row { flex-direction: column; }
}
.form__error {
  display: block;
  color: var(--color-red);
  font-size: 15px;
  line-height: 20px;
  margin: 0;
}
.form__input[aria-invalid="true"] {
  border-color: #ff0000;
}
.form__input[aria-invalid="true"]:focus {
  outline: none;
  border-color: #ff0000;
  box-shadow: 0 0 0 0.25rem rgba(255, 0, 0, 0.25);
}
.form__submit { align-self: flex-start; margin-top: 8px; min-width: 240px; justify-content: center; }
.form__status {
  margin: 0;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 16px;
  line-height: 20px;
}
.form__status[data-state="success"] {
  background: #E8F6EE;
  color: #166534;
  border: 1px solid #BBE5CB;
}
.form__status[data-state="error"] {
  background: #FCEAEC;
  color: #8B0510;
  border: 1px solid #F2BFC4;
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */

/* ---------- Section title centred variant ---------- */
.section-title--center {
  justify-content: center;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 24px;
}
.section-title--center + .text-body {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 48px;
  color: var(--color-body);
}
/* On mobile, centred section titles become left-aligned per Figma. */
@media (max-width: 640px) {
  .section-title--center { justify-content: flex-start; }
  .section-title--center + .text-body { text-align: left; }
}

.collaboration__intro,
.tracking__intro {
  margin-top: 16px;
  color: var(--color-body);
}

/* ---------- Stats grid (2x2) ---------- */
.stats-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.stat-card {
  background: var(--color-bg-light);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  min-height: 140px;
}
.stat-card__num {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 55px;
  line-height: 1.2;
  color: var(--color-black);
}
.stat-card__title {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 22px;
  line-height: 1.2;
  color: var(--color-black);
}
.stat-card__label {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-body);
}
.stat-card__label--mixed {
  text-transform: none;
  font-weight: 300;
  font-size: 16px;
}
@media (max-width: 1100px) {
  .stat-card__num { font-size: 44px; }
}
/* Stats stay 2x2 on mobile per Figma. Shrink padding + numbers to fit. */
@media (max-width: 640px) {
  .stats-grid { gap: 16px; }
  .stat-card {
    padding: 16px 12px;
    min-height: 0;
    gap: 12px;
  }
  .stat-card__num { font-size: 32px; }
}

/* ---------- The Four Strategic Pillars (tabs) ---------- */
.pillars-tabs__intro {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 48px;
  color: var(--color-body);
}
.pillars-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 24px;
  row-gap: 32px;
}
.pillar-card {
  grid-row: 1;
  position: relative; /* anchor for the active card's chevron notch */
  appearance: none;
  -webkit-appearance: none;
  text-align: left;
  font: inherit;
  cursor: pointer;
  background: var(--color-white);
  color: var(--color-black);
  border: 0;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  min-height: 308px;
  transition: background 0.2s ease, color 0.2s ease;
}
/* Chevron notch on the active card, sitting on top of the panel's red border */
.pillar-card.is-active::after {
  content: "";
  display: block;
  height: 20px;
  width: 20px;
  background-color: white;
  border-top: 2px solid var(--color-red);
  border-right: 2px solid var(--color-red);
  position: absolute;
  top: calc(100% + 23px);
  z-index: 2;
  rotate: -45deg;
  left: calc(50% - 10px);
}
.pillar-card:hover,
.pillar-card:focus-visible,
.pillar-card.is-active {
  background: var(--color-red);
  color: var(--color-white);
}
.pillar-card__icon {
  color: inherit;
  display: inline-block;
  width: 36px;
  height: 36px;
  position: relative;
}
.pillar-card__icon img {
  display: block;
  width: 100%;
  height: 100%;
}
/* Show the white-on-red icon when the card is hovered, focused, or active. */
.pillar-card__icon-active { display: none; }
.pillar-card:hover .pillar-card__icon-default,
.pillar-card:focus-visible .pillar-card__icon-default,
.pillar-card.is-active .pillar-card__icon-default { display: none; }
.pillar-card:hover .pillar-card__icon-active,
.pillar-card:focus-visible .pillar-card__icon-active,
.pillar-card.is-active .pillar-card__icon-active { display: block; }
.pillar-card__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 0 0;
}
.pillar-card__title {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 22px;
  line-height: 1.2;
  color: inherit;
}
.pillar-card__text {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.4;
  color: var(--color-body);
}
.pillar-card:hover .pillar-card__text,
.pillar-card:focus-visible .pillar-card__text,
.pillar-card.is-active .pillar-card__text {
  color: var(--color-white);
}
.pillar-card__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.4;
  text-transform: uppercase;
  color: inherit;
}
.pillar-card__more-arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}
/* Hide "Show more" on the active card */
.pillar-card.is-active .pillar-card__more { display: none; }

/* Active panel container — chevron notch is rendered by the active card's
   ::after (see .pillar-card.is-active::after above), so the panel itself
   stays a plain rounded rectangle with a red border. */
.pillar-panel {
  grid-row: 2;
  grid-column: 1 / -1;
  position: relative;
  background: var(--color-white);
  border: 2px solid var(--color-red);
  border-radius: 16px;
  padding: 24px;
  filter: drop-shadow(0 4px 10px rgba(1, 13, 18, 0.05));
}
.pillar-panel[hidden] { display: none; }

.pillar-panel__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 64px;
  row-gap: 0;
}
.pillar-item {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 24px;
  align-items: start;
  padding: 20px 0;
  border-top: 1px solid var(--color-divider);
}
/* First row (top two items) — no border above */
.pillar-item:nth-child(1),
.pillar-item:nth-child(2) {
  border-top: 0;
  padding-top: 0;
}
.pillar-item__num {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 22px;
  line-height: 1.2;
  color: var(--color-black);
}
.pillar-item__title {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 22px;
  line-height: 1.2;
  margin: 0 0 12px;
  color: var(--color-black);
}
.pillar-item__text {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.4;
  margin: 0;
  color: var(--color-body);
}
.pillar-panel__placeholder {
  font-family: var(--font-body);
  font-weight: 300;
  font-style: italic;
  color: var(--color-body);
  margin: 0;
  text-align: center;
  padding: 24px 0;
}

/* Responsive: mobile — single-column accordion (each panel under its card).
   Skips the previous tablet 2x2 step so the layout drops straight from 4-col
   desktop to 1-col mobile at 959px.
   Cards & panels are direct grid items of .pillars-tabs (no display:contents,
   so the role="tablist" semantics on .pillars-tabs are preserved). */
@media (max-width: 959px) {
  .pillars-tabs {
    grid-template-columns: 1fr;
    row-gap: 16px;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
  }
  .pillar-card { grid-row: auto; min-height: 0; }
  .pillar-panel { grid-row: auto; }
  .pillar-panel.is-active { margin-top: 13px; }
  .pillar-card.is-active:after {
    content: "";
    display: block;
    height: 20px;
    width: 20px;
    background-color: white;
    border-top: 2px solid var(--color-red);
    border-right: 2px solid var(--color-red);
    position: absolute;
    top: calc(100% + 20px);
    z-index: 2;
    rotate: -45deg;
    left: calc(50% - 10px);
  }
  .pillar-panel__grid { grid-template-columns: 1fr; column-gap: 0; }
  .pillar-item:nth-child(2) { border-top: 1px solid var(--color-divider); padding-top: 20px; }
  /* Order: card N → panel N → card N+1 → panel N+1 ... */
  .pillar-card[data-pillar="0"] { order: 0; }
  .pillar-panel[data-panel="0"] { order: 1; }
  .pillar-card[data-pillar="1"] { order: 2; }
  .pillar-panel[data-panel="1"] { order: 3; }
  .pillar-card[data-pillar="2"] { order: 4; }
  .pillar-panel[data-panel="2"] { order: 5; }
  .pillar-card[data-pillar="3"] { order: 6; }
  .pillar-panel[data-panel="3"] { order: 7; }
}

/* ---------- Milestones stack (timeline + cards) ---------- */
.milestones-stack {
  margin: 0 auto;
  max-width: 1094px;
}
@media (max-width: 1100px) {
  /* Mobile/tablet: timeline column on left, milestone cards stacked on right.
     Timeline is taller than the cards stack so 2050 sits in the empty space below
     the last card (matches Figma where all 3 cards belong to the 2035 milestone). */
  .milestones-stack {
    display: flex;
    align-items: stretch;
    gap: 16px;
    max-width: 400px;
  }
  .milestones-stack .timeline { flex: 0 0 auto; margin: 0; display: flex; }
  .milestones-stack .milestones-grid {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    /* Reserve room above the first card for the 2025 marker and below the last
       card for the 2050 marker on the timeline column. */
    padding-top: 120px;
    padding-bottom: 140px;
  }
}

/* ---------- Timeline ---------- */
.timeline {
  margin: 0 auto 48px;
  max-width: 1094px;
}
/* Default: show desktop horizontal, hide mobile vertical */
.timeline__vertical { display: none; }
.timeline__labels {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 55px;
  line-height: 1.2;
}
.timeline__label--past { color: rgba(73, 80, 87, 0.5); }
.timeline__label--mid,
.timeline__label--end { color: var(--color-red); }
.timeline__track {
  position: relative;
  height: 48px;
  margin-top: 8px;
}
.timeline__line {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  background: rgba(73, 80, 87, 0.3);
  transform: translateY(-50%);
}
.timeline__dot {
  position: absolute;
  top: 50%;
  border-radius: 50%;
  background: var(--color-red);
  transform: translate(-50%, -50%);
}
/* Grey starting dot at 2025 — 16px solid grey */
.timeline__dot--past {
  left: 0;
  width: 16px;
  height: 16px;
  background: rgba(73, 80, 87, 0.5);
}
/* Mid dot (2035) — 20px red core + 32px light-red halo */
.timeline__dot--mid {
  left: 50%;
  width: 20px;
  height: 20px;
  box-shadow: 0 0 0 6px rgba(193, 0, 22, 0.18);
}
/* End dot (2050) — 12px red core + 24/36/48px concentric halos */
.timeline__dot--end {
  left: 100%;
  width: 12px;
  height: 12px;
  box-shadow:
    0 0 0 6px rgba(193, 0, 22, 0.28),
    0 0 0 12px rgba(193, 0, 22, 0.16),
    0 0 0 18px rgba(193, 0, 22, 0.08);
}
@media (max-width: 768px) {
  .timeline__labels { font-size: 32px; }
  .timeline__track { height: 32px; }
}

/* Mobile vertical timeline: 2025 top, 2035 middle, 2050 bottom; lines stretch to fill */
@media (max-width: 1100px) {
  .timeline__horizontal { display: none; }
  .timeline__vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: 32px;
    line-height: 1.2;
    flex: 1 1 auto;
    min-height: 480px;
    padding: 4px 0;
  }
  .timeline__v-stop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }
  .timeline__vertical .timeline__label { text-align: center; }
  /* In the vertical layout, dots are static (not absolutely positioned). */
  .timeline__vertical .timeline__dot {
    position: static;
    transform: none;
    flex-shrink: 0;
  }
  .timeline__vertical .timeline__dot--past {
    width: 12px; height: 12px;
    background: rgba(73, 80, 87, 0.5);
    box-shadow: none;
  }
  .timeline__vertical .timeline__dot--mid {
    width: 16px; height: 16px;
    background: var(--color-red);
    box-shadow: 0 0 0 8px rgba(193, 0, 22, 0.18);
    /* Reserve space for the halo so it doesn't get clipped by neighbours. */
    margin: 8px 0;
  }
  .timeline__vertical .timeline__dot--end {
    width: 16px; height: 16px;
    background: var(--color-red);
    box-shadow:
      0 0 0 8px rgba(193, 0, 22, 0.32),
      0 0 0 16px rgba(193, 0, 22, 0.18),
      0 0 0 28px rgba(193, 0, 22, 0.08);
    margin: 28px 0 16px;
  }
  /* Vertical connecting lines stretch to fill space between stops. */
  .timeline__line-v {
    display: block;
    width: 1px;
    flex: 1 1 auto;
    min-height: 64px;
    background: rgba(73, 80, 87, 0.3);
  }
}

/* ============================================================
   Project Detail Pages  (.page-project)
   ============================================================ */

/* In-page sticky secondary navigation bar */
.project-subnav {
  position: sticky;
  top: 96px;          /* sits flush under the 96px main header */
  z-index: 90;        /* below header (z-100) */
  background: var(--color-bg-light);
  border-bottom: 1px solid var(--color-divider);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.project-subnav::-webkit-scrollbar { display: none; }

.project-subnav__inner {
  display: flex;
  align-items: stretch;
  height: 64px;
  padding: 0 120px;
  min-width: max-content;
}

.project-subnav__tab {
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--color-body);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.project-subnav__tab:hover { color: var(--color-black); }
.project-subnav__tab.is-active {
  color: var(--color-red);
  border-bottom-color: var(--color-red);
}
.project-subnav__tab:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: -2px;
  border-radius: 2px;
}

/* ---- Tab panels (left column) ---- */
.project-panels {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;              /* spacing controlled entirely by margin-bottom on children */
}
.project-panel {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 24px; /* desc → meta: 24px gap (Figma content-group gap) */
}
.project-panel[hidden] { display: none; }
/* .section-title has a global margin-bottom:24px; cancel it inside panels
   since the panel's own gap:24px already handles title→desc spacing */
.project-panel .section-title { margin-bottom: 0; }

/* ---- Key features list ---- */
.project-features-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.project-features-item {
  padding-left: 20px;
  position: relative;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-body);
}
.project-features-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-red);
}

/* ---- Status badge ---- */
.project-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-black);
  background: rgba(91, 163, 0, 0.25);
  border: 1px solid #5BA300;
  border-radius: 100px;
  padding: 6px 16px;
}
.project-status-badge__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #5BA300;
  flex-shrink: 0;
}
.project-status-badge--orange {
  background: rgba(235, 104, 19, 0.25);
  border-color: #EB6813;
}
.project-status-badge--orange .project-status-badge__dot {
  background: #EB6813;
}
.project-status-badge--yellow {
  background: rgba(249, 193, 0, 0.25);
  border-color: #F9C100;
}
.project-status-badge--yellow .project-status-badge__dot {
  background: #F9C100;
}

/* ---- Status & timeline list ---- */
.project-timeline-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.project-timeline-item {
  display: flex;
  gap: 24px;
  padding: 20px 0;
  border-top: 1px solid var(--color-divider);
}
.project-timeline-item:last-child { border-bottom: 1px solid var(--color-divider); }
.project-timeline-item__year {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--color-red);
  flex-shrink: 0;
  width: 48px;
  padding-top: 2px;
}
.project-timeline-item strong {
  display: block;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-black);
  margin-bottom: 4px;
}
.project-timeline-item p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-body);
  margin: 0;
}

/* ---- Overview layout (flex row — panels left, gallery right) ---- */

/* Project overview section: match Figma (pt-48 pb-80) */
.page-project .project-section.section-pad {
  padding: 48px 0 80px;
}

/* ---- Overview: CSS Grid — panels (row 1) + bottom (row 2) in col 1,
        gallery spans both rows in col 2. DOM order drives mobile layout. ---- */
.project-overview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  column-gap: 64px;
  row-gap: 0;            /* vertical rhythm handled by margins inside each col */
}
.project-panels {
  grid-column: 1;
  grid-row: 1;
}
.project-bottom {
  grid-column: 1;
  grid-row: 2;
}
.project-gallery {
  grid-column: 2;
  grid-row: 1 / 3;       /* spans both content rows */
  min-width: 0;
}
@media (min-width: 960px) {
  .project-gallery {
    margin-top: 80px;
  }
}

/* Category tag: dash line + uppercase label */
.project-category {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.project-category__line {
  display: block;
  width: 48px;
  height: 1px;
  background: var(--color-black);
  flex-shrink: 0;
}
.project-category__label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-black);
}

/* Description paragraphs */
.project-desc__p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4;
  font-weight: 300;
  color: var(--color-body);
  margin: 0;
}
.project-desc__p + .project-desc__p { margin-top: 12px; }

/* Meta grid: Endorsing Body | Project Leader */
.project-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 48px;
}
.project-meta-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.project-meta-item__label {
  font-family: var(--font-heading);
  font-size: 22px;
  line-height: 1.4;
  font-weight: 300;
  color: var(--color-black);
  margin: 0;
  padding-left: 8px;
  border-left: 2px solid var(--color-red);
}
.project-meta-item__value {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4;
  font-weight: 300;
  color: var(--color-body);
  margin: 0;
}


/* ---- Image gallery ---- */
.project-gallery {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.project-gallery__viewport {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #d9d9d9;
}
.project-gallery__track {
  display: flex;
  width: 100%;
  height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  transition: transform 0.35s ease;
}
.project-gallery__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
}
.project-gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.project-gallery__video {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

/* Gallery controls: prev | dots | next */
.project-gallery__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.project-gallery[data-slide-count="1"] .project-gallery__controls {
  display: none;  /* hide controls when only one image */
}
.project-gallery__arrow {
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--color-body);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease;
  border-radius: 4px;
}
.project-gallery__arrow:hover  { color: var(--color-black); }
.project-gallery__arrow:disabled { opacity: 0.3; cursor: default; }
.project-gallery__arrow:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 2px;
}
.project-gallery__dots {
  display: flex;
  align-items: center;
  gap: 8px;
}
.project-gallery__dot {
  height: 5px;
  width: 8px;
  border-radius: 3px;
  background: rgba(73, 80, 87, 0.4);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: width 0.2s ease, background 0.2s ease;
}
.project-gallery__dot.is-active {
  width: 36px;
  background: var(--color-body);
}
.project-gallery__dot:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 2px;
}


/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .project-subnav__inner { padding: 0 40px; }
}

@media (max-width: 959px) {
  .project-subnav { top: 80px; }   /* mobile header ~80px */
  .project-subnav__inner { height: 50px; padding: 0 24px; }
  .project-overview {
    display: flex;
    flex-direction: column;  /* DOM order: panels → gallery → bottom */
    gap: 24px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }
  /* cancel panel's desktop margin-bottom — the flex gap handles column spacing */
  .project-panel { margin-bottom: 0; }
  /* meta-grid spacing on mobile uses the flex gap above, not an inner margin */
  .project-meta-grid { margin-bottom: 32px; }

  .project-meta-grid { grid-template-columns: 1fr; gap: 16px; }
  .project-meta-item__label { font-size: 20px; }

  .project-gallery__viewport { border-radius: 12px; }
}

@media (max-width: 640px) {
  .project-subnav__inner { padding: 0 16px; }
  .project-meta-grid { margin-bottom: 32px; }
}

/* ---------- Milestones grid (3 cards) ---------- */
.milestones-grid {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 800px;
}
.stat-card--milestone {
  text-align: left;
}
@media (max-width: 1100px) {
  .milestones-grid { grid-template-columns: 1fr; gap: 16px; }
  /* In the mobile two-column layout, milestone cards become more compact. */
  .stat-card--milestone {
    background: var(--color-bg-light);
    border-radius: 12px;
    padding: 16px;
    min-height: 0;
    text-align: center;
  }
  .stat-card--milestone .stat-card__title { font-size: 20px; }
}

/* ============================================================
   Single article page
   ============================================================ */

/* 1. Header — two-column (text | image) on bg-light-blue */
.article-header { padding: 48px 0; }
.article-header__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.article-header__text { display: flex; flex-direction: column; gap: 24px; }
.article-header__title {
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 300;
  line-height: 1.2;
  color: var(--color-black);
  margin: 0;
}
.article-header__lead {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--color-body);
  margin: 0;
}
.article-header__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
  display: block;
}

/* 2. Meta row — calendar & clock icons are red */
.article-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.article-meta__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 300;
  color: var(--color-body);
  white-space: nowrap;
}
.article-meta__item svg { color: var(--color-red); flex-shrink: 0; }
.article-meta__divider {
  width: 1px;
  height: 20px;
  background: currentColor;
  opacity: 0.3;
  flex-shrink: 0;
}

/* 3. Article body — white bg, two-column layout (content | sidebar) */
.article-body { padding: 48px 0 80px; }
.article-body__inner { display: flex; gap: 64px; align-items: flex-start; }

/* Left column: article content */
.article-body__content {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Section wrapper for standard articles */
.article-section { display: flex; flex-direction: column; gap: 16px; }

/* Shared heading/text styles */
.article-section h2,
.article-qa-item__q {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 300;
  line-height: 1.4;
  color: var(--color-black);
  margin: 0;
}
.article-section p,
.article-qa-item__a {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.4;
  color: var(--color-body);
  margin: 0;
}
.article-body__content strong { font-weight: 500; color: var(--color-black); }
.article-body__content ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.article-body__content li {
  position: relative;
  padding-left: 20px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.4;
  color: var(--color-body);
}
.article-body__content li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-red);
}

/* Q&A item (article 1) */
.article-qa-item { display: flex; flex-direction: column; gap: 24px; }

/* Horizontal rule between Q&A items / sections */
.article-divider { border: none; border-top: 1px solid #dee2e6; margin: 0; }

/* 4. Right sidebar */
.article-sidebar {
  width: 387px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.article-sidebar__section { display: flex; flex-direction: column; gap: 24px; }
.article-sidebar__heading {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 300;
  line-height: 1.4;
  color: var(--color-black);
  margin: 0;
}

/* Compact sidebar cards */
.sidebar-cards { display: flex; flex-direction: column; }
.sidebar-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
}
.sidebar-card + .sidebar-card { border-top: 1px solid #dee2e6; }
.sidebar-card__img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #e4e5e6;
  flex-shrink: 0;
  display: block;
}
.sidebar-card__title {
  flex: 1;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.2;
  color: var(--color-black);
  text-decoration: none;
}
.sidebar-card__title:hover { color: var(--color-red); }
.sidebar-card__title:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 2px;
  border-radius: 2px;
}
.sidebar-card__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-red);
  color: #fff;
  flex-shrink: 0;
  text-decoration: none;
  transition: opacity 0.15s ease;
}
.article-body__content .btn { align-self: flex-start; }
.sidebar-card__arrow svg { rotate: -45deg; }
.sidebar-card__arrow:hover { opacity: 0.85; }
.sidebar-card__arrow:focus-visible { outline: 2px solid var(--color-red); outline-offset: 2px; }

/* 5. Responsive */
@media (max-width: 960px) {
  .article-header__inner { grid-template-columns: 1fr; gap: 32px; }
  .article-header__title { font-size: 32px; }
  .article-body__inner { flex-direction: column; }
  .article-sidebar { width: 100%; }
}
@media (max-width: 640px) {
  .article-header { padding: 32px 0; }
  .article-header__title { font-size: 26px; }
  .article-body { padding: 40px 0 60px; }
  .article-meta { gap: 12px; }
  .article-meta__item { font-size: 14px; }
}

/* ============================================================
   LEGAL PAGES
   ============================================================ */
.legal-prose {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.legal-prose__title {
  font-family: var(--font-heading);
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 500;
  line-height: 1.15;
  color: var(--color-black);
  margin-bottom: 40px;
}
.legal-prose__heading {
  font-family: var(--font-heading);
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 500;
  color: var(--color-black);
  margin-top: 48px;
  margin-bottom: 20px;
}
.legal-prose .text-body {
  margin-bottom: 20px;
  line-height: 1.75;
}
.legal-prose__subheading {
  font-family: var(--font-heading);
  font-size: clamp(17px, 2.5vw, 20px);
  font-weight: 500;
  color: var(--color-black);
  margin-top: 36px;
  margin-bottom: 16px;
}
.legal-prose__list {
  margin: 0 0 20px 0;
  padding-left: 24px;
  line-height: 1.75;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-body);
}
.legal-prose__list li {
  margin-bottom: 10px;
}
.legal-prose__list--alpha {
  list-style-type: lower-alpha;
}
.legal-prose__table-wrap {
  overflow-x: auto;
  margin: 24px 0 32px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}
.legal-prose__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-body);
}
.legal-prose__table th,
.legal-prose__table td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: top;
}
.legal-prose__table thead th {
  background: #f9fafb;
  font-weight: 600;
  color: var(--color-black);
  font-size: 14px;
}
.legal-prose__table tbody tr:last-child td {
  border-bottom: 0;
}
.legal-prose__table tbody tr:nth-child(even) td {
  background: #fcfcfc;
}
.legal-prose__table a {
  color: var(--color-red);
  text-decoration: underline;
}
.legal-prose__table-sub {
  font-weight: 400;
  font-size: 13px;
  color: var(--color-body);
}
.legal-prose a {
  color: var(--color-red);
  text-decoration: underline;
}
.legal-prose a:hover {
  text-decoration: none;
}
.legal-prose__allrights {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border, #e5e7eb);
}
.legal-prose__count {
  font-weight: 400;
  font-size: 0.85em;
  color: var(--color-body);
}
.legal-prose code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 13px;
  background: #f3f4f6;
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--color-black);
}