@import url("tokens.css");

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #ffffff;
  font-family: var(--font-body);
  color: var(--text-body);
}

a { color: var(--brand-accent-strong); text-decoration: none; }
a:hover { opacity: 0.75; }

img { max-width: 100%; }

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

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  line-height: 1;
  border-radius: var(--radius-pill);
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  white-space: nowrap;
}
.btn:hover { opacity: 1; }
.btn:active { transform: translateY(1px); }

.btn-lg { font-size: 17px; padding: 15px 28px; min-height: 52px; }
.btn-md { font-size: 15.5px; padding: 12px 22px; min-height: 46px; }
.btn-sm { font-size: 14px; padding: 8px 16px; min-height: 36px; }

.btn-primary {
  background: var(--brand-primary);
  color: var(--text-inverse);
  border-color: var(--brand-primary);
}
.btn-primary:hover { background: var(--brand-primary-hover); border-color: var(--brand-primary-hover); }

.btn-accent {
  background: var(--brand-accent);
  color: var(--anumana-dark-green);
  border-color: var(--brand-accent);
}
.btn-accent:hover { background: var(--brand-accent-strong); border-color: var(--brand-accent-strong); }

.btn-ghost-light {
  background: rgba(255,255,255,0.72);
  color: var(--text-heading);
}
.btn-ghost-dark {
  background: transparent;
  color: #ffffff;
  border-color: rgba(255,255,255,0.45);
}

/* ---------- Cards ---------- */
.card {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.card-hover:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }

.card-sm { padding: 16px; }
.card-lg { padding: 32px; }

.card-white { background: var(--surface-card); color: var(--text-body); border: 1px solid var(--border-subtle); }
.card-muted { background: var(--surface-muted); color: var(--text-body); }
.card-green { background: var(--anumana-light-green); color: var(--anumana-dark-green); }
.card-blue  { background: var(--anumana-light-blue); color: var(--anumana-dark-blue); }
.card-pink  { background: var(--anumana-light-pink); color: var(--anumana-dark-pink); }
.card-dark  { background: var(--anumana-dark-green); color: var(--text-inverse); }

/* ---------- Tags ---------- */
.tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: 13px;
  line-height: 1.2;
  border-radius: var(--radius-pill);
  padding: 5px 14px;
  white-space: nowrap;
}
.tag-blue   { background: var(--anumana-light-blue); color: var(--anumana-dark-blue); }
.tag-green  { background: var(--anumana-light-green); color: var(--anumana-dark-green); }
.tag-pink   { background: var(--anumana-light-pink); color: var(--anumana-dark-pink); }
.tag-purple { background: var(--anumana-light-purple); color: var(--anumana-dark-purple); }
.tag-amber  { background: var(--anumana-light-amber); color: var(--anumana-dark-amber); }
.tag-teal   { background: var(--anumana-light-teal); color: var(--anumana-dark-teal); }

/* ---------- Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-subtle);
}
.site-header .container {
  padding-top: 15px;
  padding-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.site-header .logo-link { display: flex; align-items: center; flex: none; }
/* The logo asset carries uneven whitespace (63px above the wordmark, 84px
   below, in a 255px canvas), so centring the image box leaves the visible
   wordmark sitting 4.1% of its height too high. Nudge it back down. The
   offset is a percentage of the image's own height, so it stays correct at
   whatever width the logo is set to. */
.site-header .logo-link img { width: 200px; transform: translateY(4.1%); }

.site-nav {
  display: flex;
  gap: 26px;
  align-items: center;
}
.site-nav a {
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: var(--fw-medium);
  color: var(--text-heading);
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  line-height: 1;
  white-space: nowrap;
}
.site-nav a[aria-current="page"] {
  border-bottom-color: var(--anumana-turquoise);
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
}
.nav-item.has-dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 10px;
}
.nav-dropdown {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  min-width: 190px;
  padding: 8px;
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md, 10px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.nav-item.is-open .nav-dropdown,
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-dropdown a {
  padding: 8px 10px;
  border-bottom: none !important;
}
.nav-dropdown a:hover {
  color: var(--anumana-turquoise);
}

.nav-cta { flex: none; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle svg { display: block; }

@media (max-width: 860px) {
  .site-nav { display: none; }
  .nav-cta { display: none; }
  .nav-toggle { display: block; }

  .site-nav.is-open {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    padding: 12px 24px 20px;
    border-bottom: 1px solid var(--border-subtle);
  }
  .site-nav.is-open a { padding: 8px 0; }
  .site-nav.is-open .nav-item { width: 100%; }
  .site-nav.is-open .nav-dropdown {
    position: static;
    box-shadow: none;
    border: none;
    padding: 0 0 0 14px;
    min-width: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease;
  }
  .site-nav.is-open .nav-item.is-open .nav-dropdown {
    max-height: 200px;
  }
}

/* ---------- Hero ---------- */
.hero-wrap {
  padding: 16px 16px 0;
  background: #ffffff;
}
.hero {
  background-image: url("../assets/gradients/gradient-2.webp");
  background-size: cover;
  background-position: center;
  border-radius: 20px;
  overflow: hidden;
  height: clamp(420px, 70vh, 640px);
  container-type: size;
  container-name: hero;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-inner {
  max-width: 940px;
  margin: 0 auto;
  padding: clamp(24px, 14cqh, 100px) 40px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 3cqh, 24px);
}
.eyebrow {
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--anumana-dark-teal);
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 12cqh, 78px);
  line-height: 1.0;
  letter-spacing: -0.025em;
  color: var(--text-heading);
  margin: 0;
  text-wrap: balance;
}
.hero p {
  font-family: var(--font-body);
  font-size: clamp(13px, 3.3cqh, 21px);
  line-height: 1.5;
  color: rgba(35,72,80,0.88);
  max-width: 640px;
  margin: 0;
}
.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 6px;
}

@media (max-width: 700px) {
  .hero { height: clamp(360px, 80vh, 480px); }
  .hero h1 { font-size: clamp(24px, 12cqh, 44px); }
  .hero p { font-size: clamp(13px, 3.3cqh, 17px); }
  .hero-inner { padding: clamp(24px, 14cqh, 64px) 24px; }
}

/* ---------- Client banner / marquee ---------- */
.client-banner {
  background: #ffffff;
  padding: 36px 0;
  overflow: hidden;
}
.client-banner::after {
  content: "";
  display: block;
  max-width: var(--container-max);
  margin: 32px auto 0;
  padding: 0 40px;
  border-bottom: 1px solid var(--border-subtle);
}
.client-banner .label {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  max-width: var(--container-max);
  margin: 0 auto 32px;
  padding: 0 40px;
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.marquee-mask {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  align-items: center;
  animation: anumana-marquee var(--marquee-duration, 28s) linear infinite;
}
.marquee-group {
  display: flex;
  flex: none;
  gap: 112px;
  align-items: center;
  padding-left: 112px;
}
/* Logos run in full brand colour. They are supplied whitespace-trimmed, so a
   single height would make wide wordmarks (freemans, asertis) dominate and
   stacked lockups (Office Depot, LSE) shrink. Heights below are tuned by
   aspect ratio to give each logo roughly equal presence in the strip. */
.marquee-track img {
  height: 48px;
  width: auto;
  max-width: 280px;
  object-fit: contain;
  flex: none;
}
.marquee-track img.logo-wide { height: 40px; }    /* ratio > 4:1  */
.marquee-track img.logo-stacked { height: 54px; } /* two-line lockups */
.marquee-track img.logo-compact { height: 60px; } /* near-square  */
/* Logos supplied as a solid filled tile (bluesource, journey) rather than an
   open wordmark. They are ~100% ink, so they read far heavier than a
   same-sized wordmark and have to sit smaller to carry equal weight. */
.marquee-track img.logo-tile { height: 44px; }
@keyframes anumana-marquee { from { transform: translateX(0); } to { transform: translateX(var(--marquee-shift, -50%)); } }

/* ---------- Section shared ---------- */
.section { background: #ffffff; }
.section-inner { max-width: var(--container-max); margin: 0 auto; padding: 96px 40px; }
.section-head {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.section-head h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 50px;
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--text-heading);
  margin: 0;
  text-wrap: balance;
}
.section-head p {
  font-family: var(--font-body);
  font-size: 18.5px;
  line-height: 1.6;
  color: var(--text-body);
  margin: 0;
}

@media (max-width: 700px) {
  .section-inner { padding: 56px 24px; }
  .section-head h2 { font-size: 32px; }
}

/* Three capabilities */
.capabilities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}
.capabilities-grid .card { display: flex; flex-direction: column; }
.cap-num { font-family: var(--font-display); font-size: 15px; font-weight: 500; margin-bottom: 14px; }
.capabilities-grid h3 { font-family: var(--font-display); font-weight: 500; font-size: 24px; line-height: 1.25; margin: 0 0 12px; min-height: calc(24px * 1.25 * 2); }
.capabilities-grid p { font-family: var(--font-body); font-size: 15.5px; line-height: 1.55; margin: 0; }

.capabilities-footer {
  text-align: center;
  margin-top: 44px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.capabilities-footer .headline { font-family: var(--font-display); font-weight: 500; font-size: 22px; color: var(--text-heading); }
/* "Trusted by ambitious UK businesses" and "This is our differentiator." share
   a face, weight and colour. Sizes differ deliberately: the banner label is
   uppercase with tracking, so it reads larger than the sub at the same px. */
.client-banner .label,
.capabilities-footer .sub {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--anumana-dark-purple);
}
.capabilities-footer .sub { font-size: 22px; }

@media (max-width: 860px) {
  .capabilities-grid { grid-template-columns: 1fr; }
  .capabilities-grid h3 { min-height: 0; }
}

/* Tech stack */
.section-muted-green { background: var(--anumana-light-green); }
.tech-stack-inner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.tech-stack-inner h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 34px;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--text-heading);
  margin: 0 0 20px;
  text-wrap: balance;
}
.tech-pills { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.tech-pill {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  color: var(--text-heading);
  background: #ffffff;
  border-radius: var(--radius-pill);
  padding: 12px 26px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.tech-pill:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

/* Client stories */
.section-muted { background: var(--surface-muted); }
.stories-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 44px;
  flex-wrap: wrap;
}
.stories-head .eyebrow-col { display: flex; flex-direction: column; gap: 18px; }
.stories-head .eyebrow-col .eyebrow { text-align: center; }
.headline-device {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 42px;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--text-heading);
  margin: 0;
}
.headline-device .accent { color: var(--anumana-turquoise); padding: 0 0.12em; }
.stories-head .all-link {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  color: var(--text-heading);
  border-bottom: 1.5px solid var(--border-strong);
  padding-bottom: 2px;
}

.stories-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.story-card { display: block; color: inherit; }
.story-photo {
  width: 100%;
  height: 180px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--anumana-light-green), var(--anumana-light-blue));
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(35,72,80,0.45);
  font-family: var(--font-body);
  font-size: 13px;
  text-align: center;
  padding: 12px;
}
/* Same swap as .photo-slot.has-photo: drop the caption padding and let the
   image fill the slot once real cover photography is dropped in. */
.story-photo.has-photo { padding: 0; overflow: hidden; }
.story-photo img { width: 100%; height: 100%; object-fit: cover; }
.story-body { padding: 20px 10px 10px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.story-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.story-body h3 { font-family: var(--font-display); font-weight: 500; font-size: 22px; line-height: 1.2; color: var(--text-heading); margin: 0; }
.story-stat { font-family: var(--font-body); font-size: 14.5px; font-weight: 600; color: var(--text-heading); }
.story-cta { font-family: var(--font-body); font-weight: 500; font-size: 15px; color: var(--brand-accent-strong); }

@media (max-width: 860px) {
  .stories-grid { grid-template-columns: 1fr; }
}

/* Rolling quotes */
.quotes-section { background: var(--anumana-dark-green); color: #ffffff; }
.quotes-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 96px 40px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  min-height: 120px;
}
.quotes-inner img { height: 38px; width: auto; display: block; }
.quote-text {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 31px;
  line-height: 1.32;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
  transition: opacity 0.25s var(--ease-out);
  min-height: 130px;
}
.quote-author {
  font-family: var(--font-body);
  font-size: 15px;
  color: rgba(255,255,255,0.72);
  transition: opacity 0.25s var(--ease-out);
}
.quote-dots { display: flex; gap: 12px; margin-top: 6px; }
.quote-dots button {
  width: 13px;
  height: 13px;
  border-radius: 999px;
  border: none;
  padding: 0;
  cursor: pointer;
  background: rgba(255,255,255,0.3);
  transition: background 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.quote-dots button.is-active {
  background: #45d6c6;
  transform: scale(1.15);
}

@media (max-width: 700px) {
  .quote-text { font-size: 22px; }
}

/* Positive impact */
.impact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.impact-photo {
  width: 100%;
  height: 200px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--anumana-light-blue), var(--anumana-light-pink));
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(35,72,80,0.45);
  font-family: var(--font-body);
  font-size: 13px;
  text-align: center;
  overflow: hidden;
  margin-bottom: 20px;
}
.impact-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}
.impact-photo-logo {
  background: var(--surface-muted);
  padding: 24px;
}
.impact-photo-logo img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 0;
}
.impact-card-body { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.impact-card-body .kicker {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--brand-accent-strong);
}
.impact-card-body h3 { font-family: var(--font-display); font-weight: 500; font-size: 26px; line-height: 1.15; color: var(--text-heading); margin: 0; }
.impact-card-body p { font-family: var(--font-body); font-size: 16px; line-height: 1.55; color: var(--text-body); margin: 0; }
.impact-card-body a { font-family: var(--font-body); font-weight: 500; font-size: 15.5px; color: var(--brand-accent-strong); }

@media (max-width: 860px) {
  .impact-grid { grid-template-columns: 1fr; }
}

.accreditations {
  margin-top: 56px;
  border-top: 1px solid rgba(35,72,80,0.14);
  padding-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.accreditations .label {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-muted);
}
.accreditations-row { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; justify-content: center; }
.accred-slot {
  width: 150px;
  height: 80px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 12px;
  text-align: center;
  padding: 6px;
}
.accred-slot img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* CTA */
.cta-section {
  background: var(--anumana-dark-green);
  color: #ffffff;
  position: relative;
  overflow: hidden;
}
.cta-section .bg-symbol {
  position: absolute;
  right: -60px;
  bottom: -80px;
  height: 340px;
  width: auto;
  opacity: 0.08;
}
.cta-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 96px 40px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  position: relative;
}
.cta-inner h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 50px;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}
.cta-inner p {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.55;
  color: rgba(255,255,255,0.75);
  max-width: 600px;
  margin: 0;
}
.cta-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

@media (max-width: 700px) {
  .cta-inner h2 { font-size: 34px; }
}

/* ---------- Page hero (About, etc.) ---------- */
.page-hero-wrap { padding: 16px 16px 0; background: #ffffff; }
.page-hero {
  background-image: url("../assets/gradients/gradient-2.webp");
  background-size: cover;
  background-position: center;
  border-radius: 20px;
  overflow: hidden;
}
.page-hero-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 88px 40px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.page-hero-inner p {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.55;
  color: rgba(35,72,80,0.85);
  max-width: 640px;
  margin: 0;
}
.headline-device-lg { font-size: 64px; line-height: 1.02; }

@media (max-width: 700px) {
  .page-hero-inner { padding: 56px 24px; }
  .headline-device-lg { font-size: 38px; }
}

/* Meaning of the name — its own strip directly under the Who we are hero.
   Mirrors that hero's inset rounded-card treatment (matching side padding
   and radius) so the two read as a stacked pair rather than two unrelated
   bands. */
.name-meaning-wrap { padding: 16px 16px 0; background: #ffffff; }
.name-meaning {
  background-image: url("../assets/gradients/gradient-1.webp");
  background-size: cover;
  background-position: center;
  border-radius: 20px;
  overflow: hidden;
}
.name-meaning blockquote {
  max-width: 860px;
  margin: 0 auto;
  padding: 52px 40px 56px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 36px;
  line-height: 1.35;
  color: var(--text-heading);
  text-wrap: pretty;
}
/* Oversized decorative quote marks. Drawn as pseudo-elements rather than
   typed into the markup so they stay out of the copy itself — <blockquote>
   already carries the quotation semantics. Held at partial opacity so they
   read across both the purple and green ends of the gradient. */
.name-meaning blockquote::before,
.name-meaning blockquote::after {
  display: block;
  font-family: var(--font-display);
  font-size: 80px;
  line-height: 0.8;
  color: rgba(35,72,80,0.28);
}
.name-meaning blockquote::before { content: "\201C"; margin-bottom: 14px; }
.name-meaning blockquote::after { content: "\201D"; margin-top: 18px; }

@media (max-width: 700px) {
  .name-meaning blockquote { font-size: 20px; padding: 36px 24px 40px; }
  .name-meaning blockquote::before,
  .name-meaning blockquote::after { font-size: 56px; }
}

/* Our story split */
.story-split { display: flex; gap: 80px; align-items: flex-start; }
.story-split-head { flex: 1; }
.story-split-head h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 40px;
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--text-heading);
  margin: 0;
  text-wrap: balance;
}
.story-split-body {
  flex: 1.15;
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.62;
  color: var(--text-body);
}
.story-split-body p { margin: 0; }

/* Legal content (privacy / cookie policy) */
.legal-content { max-width: 820px; margin: 0 auto; font-family: var(--font-body); font-size: 16px; line-height: 1.65; color: var(--text-body); }
.legal-content .updated { font-size: 14px; opacity: 0.7; margin: 0 0 32px; }
.legal-content h2 { font-family: var(--font-display); font-weight: 500; font-size: 26px; line-height: 1.25; color: var(--text-heading); margin: 40px 0 14px; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 { font-family: var(--font-display); font-weight: 500; font-size: 19px; line-height: 1.3; color: var(--text-heading); margin: 28px 0 10px; }
.legal-content p { margin: 0 0 16px; }
.legal-content ul { margin: 0 0 16px; padding-left: 22px; }
.legal-content li { margin-bottom: 8px; }
.legal-content a { color: var(--brand-accent-strong); }

@media (max-width: 860px) {
  .story-split { flex-direction: column; gap: 32px; }
}

/* Vision & mission */
.vm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.vm-card { display: flex; flex-direction: column; }
.vm-card .kicker {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--brand-accent-strong);
  margin-bottom: 14px;
}
.vm-card h3 { font-family: var(--font-display); font-weight: 500; font-size: 28px; line-height: 1.2; color: var(--text-heading); margin: 0 0 12px; }
.vm-card p { font-family: var(--font-body); font-size: 16px; line-height: 1.55; margin: 0; }

@media (max-width: 860px) {
  .vm-grid { grid-template-columns: 1fr; }
}

/* Values / ethos */
.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.value-item { display: flex; flex-direction: column; gap: 12px; }
/* The icon PNGs are pale-green knockout line art, so they keep the brand
   gradient tile as a backdrop rather than sitting on the page background. */
.value-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--gradient-symbol);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.value-icon img { width: 30px; height: 30px; object-fit: contain; }
/* Rotate through the dark palette so a row of four doesn't read as one block of
   identical marks. Dark tones only — the icon art is pale knockout line work. */
.values-grid .value-item:nth-child(4n+1) .value-icon { background: var(--anumana-dark-purple); }
.values-grid .value-item:nth-child(4n+2) .value-icon { background: var(--anumana-dark-teal); }
.values-grid .value-item:nth-child(4n+3) .value-icon { background: var(--anumana-dark-blue); }
.values-grid .value-item:nth-child(4n+4) .value-icon { background: var(--anumana-dark-pink); }
.value-item h3 { font-family: var(--font-display); font-weight: 500; font-size: 20px; color: var(--text-heading); margin: 6px 0 0; }
.value-item p { font-family: var(--font-body); font-size: 15px; line-height: 1.55; color: var(--text-body); margin: 0; }

@media (max-width: 860px) { .values-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .values-grid { grid-template-columns: 1fr; } }

/* Team & board */
.team-label {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 22px;
}
.team-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; }
.team-grid-sm { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.team-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; flex: 0 0 calc((100% - 2 * 28px) / 3); }
.team-card.is-sm { gap: 14px; flex-basis: calc((100% - 3 * 24px) / 4); }
.team-photo {
  width: 100%;
  height: 300px;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--anumana-light-green), var(--anumana-light-blue));
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(35,72,80,0.45);
  font-family: var(--font-body);
  font-size: 13px;
  text-align: center;
  padding: 12px;
}
.team-photo.is-sm { height: 280px; border-radius: 12px; }
.team-photo.has-photo { padding: 0; }
.team-photo img { width: 100%; height: 100%; object-fit: cover; }
.team-name { font-family: var(--font-display); font-weight: 500; font-size: 21px; color: var(--text-heading); }
.team-name.is-sm { font-size: 18px; }
.team-role { font-family: var(--font-body); font-size: 15px; color: var(--text-muted); margin-top: 3px; }
.team-role.is-sm { font-size: 14px; }

@media (max-width: 860px) {
  .team-card { flex-basis: calc((100% - 28px) / 2); }
  .team-card.is-sm { flex-basis: calc((100% - 24px) / 2); }
}
@media (max-width: 500px) {
  .team-card, .team-card.is-sm { flex-basis: 100%; }
}

/* ---------- Shared bits used across the inner pages ---------- */

/* Page-hero gradient variants (base .page-hero uses gradient-2). */
.page-hero-g1 { background-image: url("../assets/gradients/gradient-1.webp"); }
.page-hero-g3 { background-image: url("../assets/gradients/gradient-3.webp"); }

/* gradient-1 is mint/turquoise behind the headline, so the turquoise accent
   colon vanishes into it — darken it on this variant only. */
.page-hero-g1 .headline-device .accent { color: var(--anumana-dark-teal); }

/* Plain (non-Value:Unlocked) page-hero headline — Contact. */
.page-hero-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 62px;
  line-height: 1.02;
  letter-spacing: -0.022em;
  color: var(--text-heading);
  margin: 0;
  text-wrap: balance;
}
@media (max-width: 700px) { .page-hero-title { font-size: 36px; } }

/* Narrower content wrappers than .section-inner's 1240px. */
.section-inner-narrow { max-width: 1000px; }
.section-inner-md { max-width: 1160px; }

/* Clear the sticky header when an in-page anchor is followed. */
.section[id] { scroll-margin-top: 80px; }

/* Small uppercase label above a heading. */
.kicker {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--anumana-dark-teal);
}

/* Left-aligned variant of .section-head. */
.section-head-left {
  text-align: left;
  align-items: flex-start;
  max-width: 720px;
  margin: 0 0 48px;
}

/* Photo placeholder / frame. Height comes from the context class. */
.photo-slot {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--anumana-light-green), var(--anumana-light-blue));
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(35,72,80,0.45);
  font-family: var(--font-body);
  font-size: 13px;
  text-align: center;
  padding: 12px;
}
.photo-slot.has-photo { padding: 0; }
.photo-slot img { width: 100%; height: 100%; object-fit: cover; }

/* Portrait-orientation cover art in the site's landscape slots. object-fit:
   cover crops hard on the vertical, and the default centre position lands
   below the subject, so pull the visible band up towards the top third. */
.cover-portrait { object-position: center 28%; }

/* Competency chips (What we do, case studies). */
.pill-list { display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; }
.pill {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.3;
  color: var(--text-heading);
  background: var(--anumana-light-green);
  border-radius: var(--radius-pill);
  padding: 6px 13px;
}

/* Big-number stat row (client stories, Code Academy). */
.stats-row { display: flex; gap: 40px; flex-wrap: wrap; }
.stat-value { font-family: var(--font-display); font-weight: 500; font-size: 34px; line-height: 1; color: var(--text-heading); }
.stat-label { font-family: var(--font-body); font-size: 13px; color: var(--text-muted); margin-top: 5px; }
.stats-row-sm { gap: 36px; }
.stats-row-sm .stat-value { font-size: 30px; }
.stats-row-sm .stat-label { font-size: 12.5px; }

/* Equal-width columns instead of a ragged flex row — for stat sets whose
   labels are long enough to need to wrap (Code Academy). */
.stats-row-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 28px; width: 100%; }
.stats-row-grid .stat-label { line-height: 1.45; }
.stat-value sup { font-size: 0.45em; vertical-align: super; }
/* Scoped to .stats-row so this beats the surrounding body-copy rules
   (e.g. .academy-body p) on specificity rather than source order. */
.stats-row .stat-footnote {
  font-family: var(--font-body);
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-muted);
  max-width: none;
  margin: 0;
}
.stats-row-grid .stat-footnote { grid-column: 1 / -1; }
@media (max-width: 700px) { .stats-row-grid { grid-template-columns: 1fr 1fr; } }

/* Heading left, prose right — What we do intro. */
.split-intro { display: flex; gap: 80px; align-items: flex-start; margin-bottom: 56px; }
.split-intro-head { flex: 1; }
.split-intro-head .eyebrow { display: block; margin-bottom: 20px; }
.split-intro-head h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 42px;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--text-heading);
  margin: 0;
  text-wrap: balance;
}
.split-intro-body {
  flex: 1.15;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.62;
  color: var(--text-body);
  margin: 6px 0 0;
}
@media (max-width: 860px) {
  .split-intro { flex-direction: column; gap: 28px; margin-bottom: 40px; }
  .split-intro-head h2 { font-size: 30px; }
}

/* ---------- What we do ---------- */

/* The Anumana way — four numbered steps. */
.way-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.way-grid .card { display: flex; flex-direction: column; }
.way-num { font-family: var(--font-display); font-weight: 500; font-size: 15px; color: var(--brand-accent-strong); margin-bottom: 12px; }
.way-grid h3 { font-family: var(--font-display); font-weight: 500; font-size: 21px; line-height: 1.2; color: var(--text-heading); margin: 0 0 10px; }
.way-grid p { font-family: var(--font-body); font-size: 14.5px; line-height: 1.55; margin: 0; }

@media (max-width: 1000px) { .way-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .way-grid { grid-template-columns: 1fr; } }

/* Core capabilities — one wide card per capability. */
.cap-rows { display: flex; flex-direction: column; gap: 20px; }
.cap-row { display: flex; gap: 48px; align-items: flex-start; flex-wrap: wrap; }
.cap-mark { flex: none; width: 56px; height: 56px; border-radius: 12px; background: var(--gradient-symbol); }
.cap-mark-blue { background: var(--anumana-dark-blue); }
.cap-mark-dark { background: var(--anumana-dark-green); }
.cap-row-body { flex: 1; min-width: 280px; }
.cap-row-body .kicker { display: block; margin-bottom: 8px; }
.cap-row-body h3 { font-family: var(--font-display); font-weight: 500; font-size: 28px; line-height: 1.15; color: var(--text-heading); margin: 0 0 10px; }
.cap-row-body p { font-family: var(--font-body); font-size: 16px; line-height: 1.55; color: var(--text-body); margin: 0; max-width: 620px; }
.cap-row .pill-list { flex: none; width: 280px; }

@media (max-width: 1080px) {
  .cap-row { gap: 28px; }
  .cap-row .pill-list { width: 100%; }
}
@media (max-width: 700px) {
  .cap-row-body h3 { font-size: 23px; }
}

/* Why work with us. */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 56px; }
.why-grid h3 { font-family: var(--font-display); font-weight: 500; font-size: 22px; line-height: 1.2; color: var(--text-heading); margin: 0 0 10px; }
.why-grid p { font-family: var(--font-body); font-size: 15.5px; line-height: 1.55; color: var(--text-body); margin: 0; }

@media (max-width: 1000px) { .why-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 40px; } }
@media (max-width: 620px) { .why-grid { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- Client stories ---------- */

/* Featured story — photo one side, detail the other. */
.story-feature { display: flex; align-items: stretch; flex-wrap: wrap; }
.story-feature-photo { flex: 1; min-width: 320px; height: 420px; }
.story-feature-body {
  flex: 1;
  min-width: 320px;
  padding: 48px 44px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
  justify-content: center;
}
.story-feature-flag {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-accent-strong);
}
.story-feature-body h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--text-heading);
  margin: 0;
}
.story-feature-body p { font-family: var(--font-body); font-size: 16.5px; line-height: 1.55; color: var(--text-body); margin: 0; }
.story-feature-body .stats-row { margin: 4px 0; }
.story-feature-body .story-cta { font-size: 16px; }

@media (max-width: 900px) {
  .story-feature-photo { flex-basis: 100%; height: 240px; }
  .story-feature-body { padding: 28px 14px 12px; }
  .story-feature-body h2 { font-size: 27px; }
}

/* Two-up story tiles. The nested flex keeps both cards the same height
   however unevenly their headings wrap. */
.stories-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.stories-grid-2 .story-card { display: flex; }
.stories-grid-2 .story-card > .card { flex: 1; display: flex; flex-direction: column; }
.story-tile-photo { height: 220px; border-radius: 10px; }
.story-tile-body { padding: 24px 14px 12px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.story-tile-body h3 { font-family: var(--font-display); font-weight: 500; font-size: 26px; line-height: 1.15; color: var(--text-heading); margin: 0; }
.story-tile-body p { font-family: var(--font-body); font-size: 15.5px; line-height: 1.55; color: var(--text-body); margin: 0; }
.story-tile-body .stats-row { margin: 2px 0; }

@media (max-width: 860px) { .stories-grid-2 { grid-template-columns: 1fr; } }

/* ---------- Positive impact ---------- */

/* B Corp band. */
.bcorp-band { background: var(--anumana-dark-green); color: #ffffff; }
.bcorp-band .section-inner { display: flex; gap: 56px; align-items: center; flex-wrap: wrap; padding-top: 80px; padding-bottom: 80px; }
.bcorp-logo {
  flex: none;
  width: 150px;
  height: 150px;
  border-radius: 18px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.bcorp-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.bcorp-body { flex: 1; min-width: 320px; }
.bcorp-body .kicker { display: block; color: var(--anumana-turquoise); font-size: 14px; letter-spacing: 0.1em; margin-bottom: 16px; }
.bcorp-body h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 38px;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 14px;
  text-wrap: balance;
}
.bcorp-body p {
  font-family: var(--font-body);
  font-size: 17.5px;
  line-height: 1.6;
  color: rgba(255,255,255,0.78);
  margin: 0 0 20px;
  max-width: 720px;
}
.bcorp-body a { font-family: var(--font-body); font-weight: 500; font-size: 15.5px; color: var(--anumana-turquoise); }

@media (max-width: 700px) {
  .bcorp-band .section-inner { gap: 28px; }
  .bcorp-body h2 { font-size: 28px; }
}

/* Community / responsible business. */
.community-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.community-item { display: flex; flex-direction: column; gap: 16px; }
.community-item .photo-slot { height: 230px; border-radius: 14px; }
.community-item h3 { font-family: var(--font-display); font-weight: 500; font-size: 22px; line-height: 1.2; color: var(--text-heading); margin: 0; }
.community-item p { font-family: var(--font-body); font-size: 15.5px; line-height: 1.55; color: var(--text-body); margin: 0; }

@media (max-width: 900px) { .community-grid { grid-template-columns: 1fr; } }

/* Code Academy band. */
.academy-band .section-inner { display: flex; gap: 72px; align-items: center; flex-wrap: wrap; }
.academy-body { flex: 1; min-width: 320px; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.academy-body h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--text-heading);
  margin: 0;
  text-wrap: balance;
}
.academy-body p { font-family: var(--font-body); font-size: 17.5px; line-height: 1.6; color: rgba(35,72,80,0.85); margin: 0; max-width: 540px; }
.academy-photo { flex: none; width: 420px; max-width: 100%; height: 300px; border-radius: 16px; }

@media (max-width: 900px) {
  .academy-band .section-inner { gap: 32px; }
  .academy-body h2 { font-size: 30px; }
  .academy-photo { width: 100%; height: 240px; }
}

/* Impact report. */
.report-band .section-inner { display: flex; gap: 72px; align-items: center; flex-wrap: wrap; justify-content: center; }
/* Height tracks the cover artwork's A4-ish ratio so object-fit: cover has
   nothing to crop off a document cover. */
.report-cover { flex: none; width: 240px; height: 340px; border-radius: 8px; box-shadow: var(--shadow-md); }
.report-body { flex: 1; min-width: 320px; max-width: 560px; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.report-body h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--text-heading);
  margin: 0;
  text-wrap: balance;
}
.report-body p { font-family: var(--font-body); font-size: 17.5px; line-height: 1.6; color: var(--text-body); margin: 0; }

@media (max-width: 900px) {
  .report-band .section-inner { gap: 32px; }
  .report-body h2 { font-size: 30px; }
}

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: stretch; }

.contact-book {
  background: var(--anumana-dark-green);
  color: #ffffff;
  border-radius: 18px;
  padding: 48px 44px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
  overflow: hidden;
}
.contact-book .bg-symbol { position: absolute; right: -40px; bottom: -50px; height: 220px; width: auto; opacity: 0.08; }
.contact-book-head { position: relative; display: flex; flex-direction: column; gap: 8px; }
.contact-book-head .kicker { color: var(--anumana-turquoise); }
.contact-book-head h2 { font-family: var(--font-display); font-weight: 500; font-size: 32px; line-height: 1.12; margin: 0; }
.contact-book-head p { font-family: var(--font-body); font-size: 16px; line-height: 1.55; color: rgba(255,255,255,0.78); margin: 6px 0 0; }
.contact-book-foot { position: relative; display: flex; gap: 22px; align-items: center; margin-top: auto; flex-wrap: wrap; }
.contact-book-cta { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }

.contact-form-card {
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  padding: 44px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.contact-form-card h2 { font-family: var(--font-display); font-weight: 500; font-size: 32px; line-height: 1.12; color: var(--text-heading); margin: 0; }
.contact-form-card .lede { font-family: var(--font-body); font-size: 15.5px; line-height: 1.5; color: var(--text-muted); margin: 6px 0 0; }

.form-fields { display: flex; flex-direction: column; gap: 14px; }
.form-row { display: flex; gap: 14px; flex-wrap: wrap; }
.form-input,
.form-textarea {
  font-family: var(--font-body);
  font-size: 15.5px;
  color: var(--text-heading);
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 13px 15px;
  outline: none;
  width: 100%;
  transition: border-color var(--dur-base) var(--ease-out);
}
.form-row .form-input { flex: 1; min-width: 140px; width: auto; }
.form-textarea { resize: vertical; }
.form-input:focus,
.form-textarea:focus { border-color: var(--anumana-turquoise); }
.form-input::placeholder,
.form-textarea::placeholder { color: #9aa7a3; }
.form-status { font-family: var(--font-body); font-size: 14.5px; line-height: 1.5; color: var(--text-muted); margin: 0; }
.form-status.is-success { color: var(--brand-accent-strong); }
.form-status.is-error { color: #b4453a; }
.form-fields button[disabled] { opacity: 0.6; cursor: default; }

.contact-details { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.contact-detail .label {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.contact-detail .value,
.contact-detail a { font-family: var(--font-display); font-weight: 500; font-size: 21px; color: var(--text-heading); }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-book { padding: 32px 26px; }
  .contact-form-card { padding: 28px 24px; }
  .contact-form-card h2,
  .contact-book-head h2 { font-size: 26px; }
  .contact-details { grid-template-columns: 1fr; gap: 26px; }
}

/* ---------- Case study ---------- */
.case-hero {
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: flex-start;
  padding-top: 64px;
  padding-bottom: 40px;
}
.case-back { font-family: var(--font-body); font-weight: 500; font-size: 15px; color: var(--brand-accent-strong); }
.case-hero h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 52px;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--text-heading);
  margin: 0;
  text-wrap: balance;
}
.case-hero p { font-family: var(--font-body); font-size: 20px; line-height: 1.55; color: var(--text-body); margin: 0; max-width: 720px; }

.case-hero-media { padding-top: 8px; padding-bottom: 0; }
.case-hero-photo { height: 440px; border-radius: 18px; }

.case-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding-top: 48px;
  padding-bottom: 44px;
  border-bottom: 1px solid var(--border-subtle);
}
.case-meta .label {
  font-family: var(--font-body);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.case-meta .value { font-family: var(--font-display); font-weight: 500; font-size: 19px; color: var(--text-heading); }

.case-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding-top: 56px; padding-bottom: 56px; }
.case-stat { text-align: center; }
.case-stat .value { font-family: var(--font-display); font-weight: 500; font-size: 60px; line-height: 1; color: var(--text-heading); }
.case-stat .label { font-family: var(--font-body); font-size: 15px; line-height: 1.45; color: var(--text-muted); margin-top: 10px; }

.case-problem { display: flex; gap: 64px; align-items: flex-start; flex-wrap: wrap; padding-top: 88px; padding-bottom: 88px; }
.case-problem h2 { flex: none; width: 240px; font-family: var(--font-display); font-weight: 500; font-size: 30px; line-height: 1.15; color: var(--text-heading); margin: 0; }
.case-problem p { flex: 1; min-width: 300px; font-family: var(--font-body); font-size: 19px; line-height: 1.6; color: var(--text-body); margin: 0; }

.case-delivered h2 { font-family: var(--font-display); font-weight: 500; font-size: 34px; line-height: 1.12; color: var(--text-heading); margin: 0 0 40px; }
.case-steps { display: flex; flex-direction: column; }
.case-step { display: flex; gap: 40px; align-items: flex-start; padding: 28px 0; border-top: 1px solid var(--border-subtle); }
.case-step:last-child { border-bottom: 1px solid var(--border-subtle); }
.case-step-num { flex: none; width: 44px; font-family: var(--font-display); font-weight: 500; font-size: 22px; color: var(--brand-accent-strong); }
.case-step h3 { flex: none; width: 300px; font-family: var(--font-display); font-weight: 500; font-size: 21px; line-height: 1.25; color: var(--text-heading); margin: 0; }
.case-step p { flex: 1; font-family: var(--font-body); font-size: 16px; line-height: 1.55; color: var(--text-body); margin: 0; }
.case-delivered .pill-list { margin-top: 32px; }

.case-quote { background: var(--anumana-dark-green); color: #ffffff; }
.case-quote .section-inner { display: flex; flex-direction: column; gap: 26px; align-items: flex-start; padding-top: 88px; padding-bottom: 88px; }
.case-quote img { height: 34px; width: auto; display: block; }
.case-quote blockquote {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.4;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: pretty;
}
.case-quote .author { font-family: var(--font-body); font-size: 15px; color: rgba(255,255,255,0.72); }

.case-more h2 { font-family: var(--font-display); font-weight: 500; font-size: 28px; line-height: 1.2; color: var(--text-heading); margin: 0 0 32px; }
.case-more-photo { height: 180px; border-radius: 10px; }
.case-more-body { padding: 20px 12px 10px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.case-more-body h3 { font-family: var(--font-display); font-weight: 500; font-size: 21px; line-height: 1.2; color: var(--text-heading); margin: 0; }

.case-cta { background: var(--anumana-light-green); }
.case-cta .section-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding-top: 80px;
  padding-bottom: 80px;
}
.case-cta h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--text-heading);
  margin: 0;
  text-wrap: balance;
}
.case-cta p { font-family: var(--font-body); font-size: 18px; line-height: 1.55; color: rgba(35,72,80,0.85); max-width: 520px; margin: 0; }

@media (max-width: 900px) {
  .case-hero h1 { font-size: 34px; }
  .case-hero p { font-size: 17px; }
  .case-hero-photo { height: 240px; }
  .case-meta { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .case-stats { grid-template-columns: 1fr; gap: 36px; }
  .case-stat .value { font-size: 46px; }
  .case-problem { gap: 20px; padding-top: 56px; padding-bottom: 56px; }
  .case-problem h2 { width: 100%; }
  .case-problem p { font-size: 17px; }
  .case-delivered h2 { font-size: 26px; }
  .case-step { flex-wrap: wrap; gap: 8px 20px; }
  .case-step h3 { width: calc(100% - 64px); }
  .case-step p { flex-basis: 100%; }
  .case-quote blockquote { font-size: 21px; }
  .case-cta h2 { font-size: 30px; }
}

/* Accessible label for inputs that show a placeholder instead. */
.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;
}

/* ---------- Footer ---------- */
.site-footer { background: var(--anumana-dark-blue); color: #ffffff; }
.site-footer .container {
  padding: 64px 40px 40px;
  display: flex;
  gap: 56px;
  justify-content: space-between;
  flex-wrap: wrap;
}
.footer-brand {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 56px;
  min-width: 220px;
}
.footer-brand img { width: 126px; height: 40px; }
.footer-social {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: 16px;
}
.footer-links a { color: #ffffff; }
.footer-legal {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 340px;
  font-family: var(--font-body);
  font-size: 16px;
}
.footer-legal a { color: rgba(255,255,255,0.82); }
.footer-legal .fine-print {
  margin-top: 28px;
  font-size: 12.5px;
  line-height: 1.7;
  color: rgba(255,255,255,0.55);
}
.footer-legal .copyright {
  margin-top: 24px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.55);
}
/* The policy links and the B Corp mark sit side by side at the top of the
   legal column. The stacked links run to roughly the logo's height, so the
   two read as a matched pair. */
.footer-legal-top { display: flex; gap: 28px; align-items: flex-start; }
.footer-legal-links { display: flex; flex-direction: column; gap: 12px; }
.footer-bcorp { display: flex; flex: none; }
.footer-bcorp img {
  height: 100px;
  width: auto;
  object-fit: contain;
}