/* ==========================================================================
   Assisi Care — main stylesheet
   --------------------------------------------------------------------------
   How this file is organised:
    1. Design tokens (colours, fonts, spacing) — change the brand here
    2. Base / reset
    3. Typography
    4. Layout helpers
    5. Buttons and links
    6. Header, navigation and mobile menu
    7. Hero sections
    8. Page components (cards, steps, stats, pipeline, team, news …)
    9. Forms
   10. Footer
   11. Utilities and accessibility
   ========================================================================== */


/* 1. DESIGN TOKENS
   ========================================================================== */
:root {
  /* Brand colours (taken from the Assisi Care logo) */
  --navy: #1B3A4B;          /* headings, main text accents          */
  --navy-deep: #132A37;     /* dark sections: hero, footer, CTA band */
  --terracotta: #C0705F;    /* graphics on light backgrounds         */
  --terracotta-dark: #9A4F42; /* buttons + links on light backgrounds (passes WCAG AA on cream, sand and white) */
  --terracotta-light: #D98A76; /* accents on dark backgrounds         */
  --cream: #F7F3EE;         /* page background                       */
  --sand: #EFE8DF;          /* alternate section background          */
  --white: #FFFFFF;         /* cards                                 */
  --slate: #4D6470;         /* secondary text                        */
  --ink: #22323C;           /* body text                             */
  --line: #DED6CB;          /* borders and dividers                  */
  --line-dark: rgba(247, 243, 238, 0.16); /* borders on dark sections */
  --error: #A33A2C;
  --success: #2E6B4F;

  /* Fonts (loaded from Google Fonts in each page's <head>) */
  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-body: "Work Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Other */
  --radius: 8px;
  --radius-lg: 14px;
  --shadow: 0 1px 2px rgba(19, 42, 55, 0.06), 0 8px 24px rgba(19, 42, 55, 0.08);
  --container: 1180px;
  --header-height: 76px;
  --transition: 180ms ease;
}


/* 2. BASE / RESET
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Keeps anchor targets from hiding under the sticky header */
  scroll-padding-top: calc(var(--header-height) + 1rem);
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem; /* 17px */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

/* While the mobile menu is open, stop the page behind it from scrolling */
body.menu-open {
  overflow: hidden;
}

main:focus {
  outline: none;
}


/* 3. TYPOGRAPHY
   ========================================================================== */
h1,
h2,
h3,
h4 {
  margin: 0 0 var(--space-4);
  color: var(--navy);
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.005em;
}

h1 { font-size: clamp(2.5rem, 6vw, 4rem); }
h2 { font-size: clamp(2rem, 4.2vw, 2.75rem); }
h3 { font-size: clamp(1.45rem, 2.4vw, 1.75rem); }

/* Small headings use the sans font so they stay crisp at small sizes */
h4 {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0;
}

p {
  margin: 0 0 var(--space-4);
}

ul,
ol {
  margin: 0 0 var(--space-4);
  padding-left: 1.25rem;
}

strong {
  font-weight: 600;
}

/* Small uppercase label above headings, echoing the logo's tagline */
.eyebrow {
  display: inline-block;
  margin-bottom: var(--space-3);
  color: var(--terracotta-dark);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.lead {
  font-size: clamp(1.125rem, 2vw, 1.3rem);
  line-height: 1.6;
  color: var(--slate);
  max-width: 44rem;
}

.muted {
  color: var(--slate);
}

.small {
  font-size: 0.875rem;
}

.mono {
  font-family: var(--font-mono);
}


/* 4. LAYOUT HELPERS
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-4); /* 16px gutter on phones */
}

.section {
  padding-block: var(--space-8);
}

.section--alt {
  background: var(--sand);
}

/* Dark sections: flip the text colours */
.section--dark {
  background: var(--navy-deep);
  color: rgba(247, 243, 238, 0.86);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 {
  color: var(--cream);
}

.section--dark .eyebrow {
  color: var(--terracotta-light);
}

.section--dark .lead,
.section--dark .muted {
  color: rgba(247, 243, 238, 0.78);
}

/* Heading block at the top of a section */
.section-header {
  max-width: 46rem;
  margin-bottom: var(--space-7);
}

.section-header--center {
  margin-inline: auto;
  text-align: center;
}

.section-header--center .lead {
  margin-inline: auto;
}

/* Simple responsive grids: 1 column on phones, more on larger screens */
.grid {
  display: grid;
  gap: var(--space-5);
}

/* Two columns of text + image */
.split {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}

.split__media img {
  width: 100%;
  border-radius: var(--radius-lg);
}

.section-footer {
  margin-top: var(--space-6);
}

@media (min-width: 640px) {
  .grid--2,
  .grid--3,
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  .container { padding-inline: var(--space-6); }
  .section { padding-block: var(--space-9); }
}

@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .split { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  /* Put the image first on alternate rows */
  .split--reverse .split__media { order: -1; }
}


/* 5. BUTTONS AND LINKS
   ========================================================================== */
a {
  color: var(--terracotta-dark);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

a:hover {
  color: var(--navy);
}

.section--dark a:not(.btn) {
  color: var(--terracotta-light);
}

.section--dark a:not(.btn):hover {
  color: var(--cream);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px; /* comfortable tap target */
  padding: 0.75rem 1.5rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

/* Main call to action: terracotta */
.btn--primary {
  background: var(--terracotta-dark);
  color: var(--white);
}

.btn--primary:hover {
  background: var(--navy);
  color: var(--white);
}

/* Secondary call to action: outlined */
.btn--secondary {
  border-color: var(--navy);
  background: transparent;
  color: var(--navy);
}

.btn--secondary:hover {
  background: var(--navy);
  color: var(--white);
}

/* Outlined button for dark backgrounds */
.btn--light {
  border-color: rgba(247, 243, 238, 0.6);
  background: transparent;
  color: var(--cream);
}

.btn--light:hover {
  border-color: var(--cream);
  background: var(--cream);
  color: var(--navy-deep);
}

.section--dark .btn--primary:hover {
  background: var(--cream);
  color: var(--navy-deep);
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Text link with an arrow, e.g. "Learn more →" */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 600;
  text-decoration: none;
}

.link-arrow::after {
  content: "\2192";
  transition: transform var(--transition);
}

.link-arrow:hover::after {
  transform: translateX(4px);
}


/* 6. HEADER, NAVIGATION AND MOBILE MENU
   ========================================================================== */
.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 1000;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  background: var(--navy-deep);
  color: var(--cream);
  font-weight: 600;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
  color: var(--cream);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247, 243, 238, 0.96);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--transition), border-color var(--transition);
}

/* Added by JavaScript once the page is scrolled */
.site-header.is-scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 4px 18px rgba(19, 42, 55, 0.06);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-height);
}

.brand {
  display: inline-flex;
  flex-shrink: 0;
}

.brand img {
  width: auto;
  height: 42px;
}

/* --- Hamburger button (phones and tablets) --- */
.menu-toggle {
  display: none; /* shown by JavaScript-enabled mobile layout below */
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--navy);
  font: 600 0.9375rem var(--font-body);
  cursor: pointer;
}

/* Three lines drawn with one span + two pseudo-elements */
.menu-toggle__bars,
.menu-toggle__bars::before,
.menu-toggle__bars::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--transition), background-color var(--transition);
}

.menu-toggle__bars {
  position: relative;
}

.menu-toggle__bars::before,
.menu-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.menu-toggle__bars::before { top: -6px; }
.menu-toggle__bars::after { top: 6px; }

/* Turn the lines into an "X" when the menu is open */
.menu-toggle[aria-expanded="true"] .menu-toggle__bars { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

/* --- Navigation list --- */
.nav-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-item {
  position: relative;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--navy);
  font: 500 1rem var(--font-body);
  text-decoration: none;
  cursor: pointer;
}

.nav-link:hover {
  background: rgba(27, 58, 75, 0.06);
  color: var(--navy);
}

/* Marks the page you are on */
.nav-link[aria-current="page"],
.nav-link.is-current {
  color: var(--terracotta-dark);
}

.nav-link[aria-current="page"]::after,
.nav-link.is-current::after {
  content: "";
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: 6px;
  height: 2px;
  background: var(--terracotta);
}

.chevron {
  width: 12px;
  height: 12px;
  transition: transform var(--transition);
}

.submenu-toggle[aria-expanded="true"] .chevron {
  transform: rotate(180deg);
}

/* --- Dropdown menus --- */
.submenu {
  margin: 0;
  padding: var(--space-2);
  list-style: none;
}

.submenu a {
  display: block;
  padding: var(--space-3);
  border-radius: var(--radius);
  color: var(--navy);
  text-decoration: none;
  line-height: 1.35;
}

.submenu a:hover {
  background: var(--cream);
}

.submenu a strong {
  display: block;
  font-weight: 600;
}

.submenu a span {
  display: block;
  margin-top: 2px;
  color: var(--slate);
  font-size: 0.875rem;
}

.submenu a[aria-current="page"] strong {
  color: var(--terracotta-dark);
}

.nav-item--cta {
  margin-left: var(--space-3);
}

/* Desktop dropdown panels */
@media (min-width: 1024px) {
  .submenu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 290px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: var(--shadow);
  }

  /* With JavaScript, dropdowns start closed and open on click.
     Without JavaScript, they open on hover or keyboard focus instead. */
  .js .submenu[hidden] {
    display: none;
  }

  .no-js .submenu {
    display: none;
  }

  .no-js .has-submenu:hover .submenu,
  .no-js .has-submenu:focus-within .submenu {
    display: block;
  }
}

/* Phones and tablets: collapse the navigation behind the hamburger button.
   This only happens when JavaScript is running; without it the links
   simply wrap onto extra lines so they are always reachable. */
@media (max-width: 1023.98px) {
  .js .menu-toggle {
    display: inline-flex;
  }

  .js .site-nav {
    position: fixed;
    inset: var(--header-height) 0 0 0;
    z-index: 99;
    display: none;
    overflow-y: auto;
    padding: var(--space-4) var(--space-4) var(--space-7);
    background: var(--cream);
    border-top: 1px solid var(--line);
  }

  .js .site-nav.is-open {
    display: block;
  }

  .js .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .js .nav-item {
    border-bottom: 1px solid var(--line);
  }

  .js .nav-link {
    justify-content: space-between;
    width: 100%;
    min-height: 56px;
    padding: 0 var(--space-2);
    font-size: 1.125rem;
  }

  .js .nav-link[aria-current="page"]::after,
  .js .nav-link.is-current::after {
    display: none;
  }

  /* Dropdowns become accordions */
  .js .submenu {
    padding: 0 0 var(--space-3) var(--space-3);
  }

  .js .submenu[hidden] {
    display: none;
  }

  .js .nav-item--cta {
    margin: var(--space-5) 0 0;
    border-bottom: 0;
  }

  .js .nav-item--cta .btn {
    width: 100%;
  }

  /* No-JavaScript fallback: show everything in a simple wrapped list */
  .no-js .header-inner {
    flex-wrap: wrap;
    padding-block: var(--space-3);
  }

  .no-js .submenu {
    display: block;
    padding: 0 0 0 var(--space-3);
  }
}


/* 7. HERO SECTIONS
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-8);
}

.hero__inner {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}

.hero h1 {
  margin-bottom: var(--space-5);
}

.hero .lead {
  margin-bottom: var(--space-6);
}

.hero__note {
  margin: var(--space-5) 0 0;
  color: rgba(247, 243, 238, 0.66);
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero__art {
  max-width: 420px;
  margin-inline: auto;
}

@media (min-width: 1024px) {
  .hero { padding-block: var(--space-9); }
  .hero__inner { grid-template-columns: 1.15fr 0.85fr; }
  .hero__art { max-width: none; }
}

/* Smaller hero used at the top of inner pages */
.page-hero {
  padding-block: var(--space-7) var(--space-8);
}

.page-hero h1 {
  max-width: 18ch;
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-6);
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
}

.breadcrumbs li:not(:last-child)::after {
  content: "/";
  margin-left: var(--space-2);
  opacity: 0.5;
}

.breadcrumbs [aria-current="page"] {
  opacity: 0.8;
}


/* 8. PAGE COMPONENTS
   ========================================================================== */

/* --- Card --- */
.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
}

.card h3 {
  margin-bottom: var(--space-3);
}

.card p:last-child {
  margin-bottom: 0;
}

.card .link-arrow {
  margin-top: auto;
  padding-top: var(--space-3);
}

.card__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--space-5);
  border-radius: 50%;
  background: var(--cream);
  color: var(--terracotta-dark);
}

.card__icon svg {
  width: 26px;
  height: 26px;
}

.section--dark .card {
  border-color: var(--line-dark);
  background: rgba(247, 243, 238, 0.04);
}

.section--dark .card__icon {
  background: rgba(217, 138, 118, 0.14);
  color: var(--terracotta-light);
}

/* --- Numbered problem statements --- */
.point {
  padding-top: var(--space-5);
  border-top: 2px solid var(--navy);
}

.point__number {
  display: block;
  margin-bottom: var(--space-3);
  color: var(--terracotta-dark);
  font-family: var(--font-mono);
  font-size: 0.875rem;
}

/* --- Three-step mechanism diagram --- */
.steps {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.step {
  position: relative;
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  counter-increment: step;
}

.step::before {
  content: "0" counter(step);
  display: block;
  margin-bottom: var(--space-4);
  color: var(--terracotta-dark);
  font-family: var(--font-mono);
  font-size: 0.875rem;
}

.step__figure {
  height: 88px;
  margin-bottom: var(--space-4);
}

.step__figure svg {
  width: auto;
  height: 100%;
}

.step h3 {
  font-size: 1.5rem;
}

.step p {
  margin: 0;
  color: var(--slate);
}

@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(3, 1fr); }

  /* Arrow between steps on wide screens */
  .step:not(:last-child)::after {
    content: "\2192";
    position: absolute;
    top: 50%;
    right: -1.05rem;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--navy);
    color: var(--cream);
    font-size: 0.875rem;
    transform: translateY(-50%);
  }
}

/* --- Evidence / statistic tiles --- */
.stat {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid var(--line);
}

.stat__value {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--navy);
  font-family: var(--font-display);
  font-size: 3.25rem;
  font-weight: 600;
  line-height: 1;
}

.stat__label {
  margin: 0;
  color: var(--slate);
}

/* Highlights content that must be replaced before launch */
.placeholder-flag {
  display: inline-block;
  margin-top: var(--space-3);
  padding: 2px 8px;
  border: 1px dashed var(--terracotta);
  border-radius: 4px;
  color: var(--terracotta-dark);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.section--dark .placeholder-flag {
  border-color: var(--terracotta-light);
  color: var(--terracotta-light);
}

.footnote {
  margin-top: var(--space-5);
  color: var(--slate);
  font-size: 0.875rem;
}

/* --- Development pipeline --- */
.pipeline {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pipeline__stage {
  position: relative;
  padding: 0 0 var(--space-6) var(--space-7);
}

/* Vertical line on phones */
.pipeline__stage::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 0;
  left: 11px;
  width: 2px;
  background: var(--line-dark);
}

.pipeline__stage:last-child::before {
  display: none;
}

/* The dot for each stage */
.pipeline__dot {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(247, 243, 238, 0.4);
  border-radius: 50%;
  background: var(--navy-deep);
}

.pipeline__stage--done .pipeline__dot {
  border-color: var(--terracotta-light);
  background: var(--terracotta-light);
}

.pipeline__stage--current .pipeline__dot {
  border-color: var(--terracotta-light);
  box-shadow: 0 0 0 6px rgba(217, 138, 118, 0.22);
  background: var(--navy-deep);
}

.pipeline__stage h3 {
  margin-bottom: var(--space-1);
  font-family: var(--font-body);
  font-size: 1.0625rem;
}

.pipeline__stage p {
  margin: 0;
  font-size: 0.9375rem;
}

.pipeline__badge {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--terracotta-light);
  color: var(--navy-deep);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* Horizontal timeline on wide screens */
@media (min-width: 900px) {
  .pipeline { grid-template-columns: repeat(5, 1fr); }

  .pipeline__stage {
    padding: var(--space-7) var(--space-4) 0 0;
  }

  .pipeline__stage::before {
    top: 11px;
    bottom: auto;
    left: 22px;
    right: 0;
    width: auto;
    height: 2px;
  }

  .pipeline__stage:last-child::before {
    display: none;
  }

  .pipeline__dot {
    top: 2px;
    left: 0;
  }
}

/* --- Team --- */
.person {
  text-align: left;
}

.person img {
  width: 100%;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-lg);
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.person h3 {
  margin-bottom: var(--space-1);
  font-size: 1.5rem;
}

.person__role {
  margin-bottom: var(--space-2);
  color: var(--terracotta-dark);
  font-weight: 500;
}

.person p {
  color: var(--slate);
  font-size: 0.9375rem;
}

/* --- Partner logo strip --- */
.logo-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}

.logo-strip li {
  display: grid;
  place-items: center;
  min-height: 84px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--slate);
  font-size: 0.875rem;
}

@media (min-width: 768px) {
  .logo-strip { grid-template-columns: repeat(4, 1fr); }
}

/* --- News cards --- */
.news-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
}

.news-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.news-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--space-5);
}

.news-card h3 {
  font-size: 1.5rem;
}

.news-card h3 a {
  color: var(--navy);
  text-decoration: none;
}

.news-card h3 a:hover {
  text-decoration: underline;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  color: var(--slate);
  font-size: 0.8125rem;
}

.tag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--cream);
  color: var(--navy);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Full news posts on the News page */
.post {
  padding-block: var(--space-6);
  border-top: 1px solid var(--line);
}

.post:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.post h2 {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
}

/* --- Call-to-action band --- */
.cta-band {
  text-align: center;
}

.cta-band h2 {
  max-width: 20ch;
  margin-inline: auto;
}

.cta-band .lead {
  margin-inline: auto;
  margin-bottom: var(--space-6);
}

.cta-band .btn-group {
  justify-content: center;
}

/* --- Check-mark list --- */
.check-list {
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
}

.check-list li {
  position: relative;
  margin-bottom: var(--space-3);
  padding-left: 1.9rem;
}

.check-list li::before {
  content: "";
  position: absolute;
  top: 0.45em;
  left: 0;
  width: 1.05rem;
  height: 0.6rem;
  border-left: 2px solid var(--terracotta);
  border-bottom: 2px solid var(--terracotta);
  transform: rotate(-45deg) scale(0.8);
}

/* --- Service blocks --- */
.service + .service {
  margin-top: var(--space-9);
}

.service__deliverables {
  padding: var(--space-5);
  border-left: 3px solid var(--terracotta);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--white);
}

.service__deliverables h3 {
  margin-bottom: var(--space-2);
  font-family: var(--font-body);
  font-size: 1.0625rem;
}

.service__deliverables p {
  margin: 0;
  color: var(--slate);
}

/* --- Publications list and filter --- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.filter-btn {
  min-height: 44px;
  padding: 0 var(--space-5);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--navy);
  font: 500 0.9375rem var(--font-body);
  cursor: pointer;
}

.filter-btn:hover {
  border-color: var(--navy);
}

.filter-btn[aria-pressed="true"] {
  border-color: var(--navy);
  background: var(--navy);
  color: var(--white);
}

.pub-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pub {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-5);
  border-top: 1px solid var(--line);
}

.pub h3 {
  margin: 0;
  font-size: 1.5rem;
}

.pub p {
  margin: 0;
  color: var(--slate);
}

/* --- Prose (legal pages and long text) --- */
.prose {
  max-width: 46rem;
}

.prose h2 {
  margin-top: var(--space-7);
  font-size: 1.9rem;
}

/* --- Info box / notice --- */
.notice {
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-left: 4px solid var(--terracotta);
  border-radius: var(--radius);
  background: var(--white);
}

.notice p:last-child {
  margin-bottom: 0;
}


/* 9. FORMS
   ========================================================================== */
.form {
  display: grid;
  gap: var(--space-5);
}

.form-row {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 640px) {
  .form-row { grid-template-columns: 1fr 1fr; }
}

.field label,
.field legend {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--navy);
  font-weight: 600;
}

.field .optional {
  color: var(--slate);
  font-weight: 400;
}

input[type="text"],
input[type="email"],
select,
textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.9rem;
  border: 1px solid #B9AFA3;
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font: 1rem var(--font-body); /* 16px stops iPhones zooming in */
}

textarea {
  min-height: 160px;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--navy);
  outline: 3px solid rgba(192, 112, 95, 0.35);
  outline-offset: 0;
}

/* Fields marked invalid by JavaScript */
[aria-invalid="true"] {
  border-color: var(--error);
}

.field-error {
  margin: var(--space-2) 0 0;
  color: var(--error);
  font-size: 0.875rem;
  font-weight: 500;
}

.field-error:empty {
  display: none;
}

.field .checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 400;
}

.checkbox input {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  accent-color: var(--navy);
}

/* Hidden field that catches spam bots */
.hp-field {
  position: absolute;
  left: -9999px;
}

.form-status {
  padding: var(--space-4);
  border-radius: var(--radius);
  font-weight: 500;
}

.form-status:empty {
  display: none;
}

.form-status--success {
  background: #E6F0EA;
  color: var(--success);
}

.form-status--error {
  background: #F6E4E0;
  color: var(--error);
}

.form-status--info {
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--navy);
}

/* Contact page layout: form + sidebar */
.contact-layout {
  display: grid;
  gap: var(--space-7);
}

@media (min-width: 1024px) {
  .contact-layout { grid-template-columns: 1.6fr 1fr; }
}

.contact-details {
  margin: 0;
}

.contact-details dt {
  margin-top: var(--space-5);
  color: var(--navy);
  font-weight: 600;
}

.contact-details dt:first-child {
  margin-top: 0;
}

.contact-details dd {
  margin: var(--space-1) 0 0;
  color: var(--slate);
}

/* Newsletter form (footer and News page) */
.newsletter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.newsletter input {
  flex: 1 1 200px;
}


/* 10. FOOTER
   ========================================================================== */
.site-footer {
  padding-block: var(--space-8) var(--space-6);
  background: var(--navy-deep);
  color: rgba(247, 243, 238, 0.78);
  font-size: 0.9375rem;
}

.footer-grid {
  display: grid;
  gap: var(--space-7);
}

@media (min-width: 768px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.4fr; }
}

.footer-brand img {
  width: 240px;
  margin-bottom: var(--space-4);
}

.site-footer h2 {
  margin-bottom: var(--space-4);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.footer-links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-links li {
  margin-bottom: var(--space-2);
}

.site-footer a {
  color: rgba(247, 243, 238, 0.86);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--terracotta-light);
  text-decoration: underline;
}

.site-footer label {
  display: block;
  margin-bottom: var(--space-2);
}

.site-footer .form-status--info {
  background: rgba(247, 243, 238, 0.08);
  border-color: var(--line-dark);
  color: var(--cream);
}

.site-footer .btn--primary:hover {
  background: var(--cream);
  color: var(--navy-deep);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line-dark);
  font-size: 0.8125rem;
}

.footer-bottom ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.disclaimer {
  flex-basis: 100%;
  margin: 0;
  color: rgba(247, 243, 238, 0.62);
}


/* 11. UTILITIES AND ACCESSIBILITY
   ========================================================================== */

/* Clear focus ring for keyboard users */
:focus-visible {
  outline: 3px solid var(--terracotta);
  outline-offset: 3px;
}

.section--dark :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--terracotta-light);
}

/* Hide text visually but keep it for screen readers */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.center {
  text-align: center;
}

/* A smaller heading size, e.g. for sidebars */
.h-small {
  font-size: 1.75rem;
}

.mb-0 { margin-bottom: 0; }

/* Respect visitors who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}