:root {
  --bg: #121212;
  --surface: #1a1a1a;
  --surface-raised: #202020;
  --text: #f4f0ea;
  --muted: #aaa39a;
  --faint: #746f69;
  --accent: #c98a4b;
  --line: rgba(244, 240, 234, 0.14);
  --display: "Fraunces", Georgia, serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --type-h1: 5rem;
  --type-h2: 3.5rem;
  --type-h3: 2rem;
  --type-body: 1rem;
  --type-body-large: 1.125rem;
  --type-caption: 0.8125rem;
  --content: 70rem;
  --wide: 96rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--body); font-size: var(--type-body); letter-spacing: -0.02em; line-height: 1.6; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.skip-link { position: fixed; z-index: 10; top: 1rem; left: 1rem; padding: 0.7rem 1rem; background: var(--accent); color: #17120e; transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }
.site-header { position: sticky; z-index: 5; top: 0; border-bottom: 1px solid var(--line); background: rgba(18, 18, 18, 0.94); backdrop-filter: blur(12px); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; width: min(calc(100% - 3rem), var(--wide)); min-height: 5rem; margin: 0 auto; }
.wordmark { font-family: var(--display); font-size: 1.25rem; font-weight: 600; text-decoration: none; }
.site-nav__list, .mobile-nav__list { display: flex; gap: 1.5rem; align-items: center; margin: 0; padding: 0; list-style: none; }
.site-nav a, .mobile-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); font-size: 0.78rem; letter-spacing: 0.08em; text-decoration: none; text-transform: uppercase; }
.site-nav a:hover, .mobile-nav a:hover { color: var(--text); }
.nav-toggle { display: none; min-width: 44px; min-height: 44px; border: 1px solid var(--line); border-radius: 999px; padding: 0.55rem 0.8rem; background: transparent; color: var(--text); font: inherit; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; }
.mobile-nav { display: none; }
.mobile-nav[hidden] { display: none; }
.page-main { width: min(calc(100% - 3rem), var(--wide)); margin: 0 auto; }
.case-hero { max-width: var(--content); padding: clamp(5rem, 12vw, 11rem) 0 clamp(4rem, 9vw, 8rem); }
.eyebrow { margin: 0 0 1.25rem; color: var(--accent); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.case-hero h1 { max-width: 16ch; margin: 0; font-family: var(--display); font-size: clamp(3.3rem, 8vw, 8rem); font-weight: 500; letter-spacing: -0.055em; line-height: 0.98; text-wrap: balance; }
.page-main h1, .page-main h2, .page-main h3 { text-wrap: balance; }
.case-hero__summary { max-width: 42rem; margin: 2rem 0 0; color: var(--muted); font-size: clamp(1.1rem, 1.8vw, 1.45rem); line-height: 1.45; }
.case-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; max-width: 42rem; margin-top: 3rem; }
.case-meta__item { border-top: 1px solid var(--line); padding-top: 0.8rem; }
.case-meta__label { display: block; margin-bottom: 0.35rem; color: var(--faint); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; }
.case-meta__value { color: var(--text); }
.case-section { border-top: 1px solid var(--line); padding: clamp(3rem, 7vw, 7rem) 0; }
.case-section__inner { display: grid; grid-template-columns: minmax(10rem, 0.35fr) minmax(0, 1fr); gap: clamp(2rem, 7vw, 8rem); max-width: var(--content); }
.case-section h2 { margin: 0; font-family: var(--display); font-size: clamp(2rem, 4vw, 4rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1; text-wrap: balance; }
.case-section p { max-width: 60ch; margin: 0; color: var(--muted); font-size: 1.05rem; }
.case-notice { background: var(--surface); }
.case-notice p + p { margin-top: 1rem; }
.back-link, .contact-link { display: inline-flex; align-items: center; min-height: 44px; gap: 0.5rem; color: var(--text); font-size: 0.8rem; letter-spacing: 0.08em; text-decoration: none; text-transform: uppercase; }
.back-link { margin-bottom: clamp(3rem, 8vw, 7rem); color: var(--muted); }
.back-link:hover, .contact-link:hover { color: var(--accent); }
.case-footer { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--line); padding: 2rem 0 4rem; }
.case-footer small { color: var(--faint); }

@media (max-width: 63.99rem) {
  .site-nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .mobile-nav { display: block; max-height: calc(100svh - 4.5rem); overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--line); padding: 1rem 1.5rem 1.5rem; }
  .mobile-nav__list { display: grid; gap: 1rem; align-items: start; }
}
@media (scripting: none) and (max-width: 63.99rem) {
  .site-nav { display: block; }
  .site-nav__list { flex-wrap: wrap; gap: 0.25rem 1rem; }
  .nav-toggle { display: none; }
}
@media (max-width: 47.99rem) {
  .site-header__inner, .page-main { width: min(calc(100% - 2rem), var(--wide)); }
  .site-header__inner { min-height: 4.5rem; }
  .case-hero { padding-top: 4rem; }
  .case-meta { grid-template-columns: 1fr; }
  .case-section__inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .case-footer { display: grid; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ========================================================================
   Shared case-study presentation pass
   Keeps each project's story and palette distinct while giving the routes
   one consistent editorial rhythm for media, captions and project handoff.
   This shared layer lives before the staging build's excluded-project blocks
   so included routes retain the same presentation in dist/.
   ======================================================================== */

.page-main figure[class*="-media"] {
  overflow: hidden;
}

.page-main figure[class*="-media"] img {
  display: block;
  width: 100%;
  height: auto;
}

.page-main figure[class*="-media"] figcaption {
  max-width: 72ch;
  text-wrap: pretty;
}

.page-main nav[aria-label="Project navigation"] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(4rem, 9vw, 9rem);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.page-main nav[aria-label="Project navigation"] a {
  display: grid;
  min-height: clamp(8rem, 14vw, 12rem);
  align-content: space-between;
  gap: 1rem;
  padding: clamp(1.5rem, 3vw, 3rem) clamp(1rem, 3vw, 3rem);
  color: var(--text);
  text-decoration: none;
  transition: background-color 180ms ease, transform 180ms ease;
}

.page-main nav[aria-label="Project navigation"] a + a {
  border-left: 1px solid var(--line);
  padding-left: clamp(1.25rem, 5vw, 5rem);
  text-align: right;
}

.page-main nav[aria-label="Project navigation"] span {
  color: var(--faint);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.page-main nav[aria-label="Project navigation"] strong {
  max-width: 16ch;
  font-family: var(--display);
  font-size: clamp(1.7rem, 3vw, 3rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.05;
  transition: transform 180ms ease;
}

.page-main nav[aria-label="Project navigation"] a:hover,
.page-main nav[aria-label="Project navigation"] a:focus-visible {
  background: rgba(244, 240, 234, 0.045);
}

.page-main nav[aria-label="Project navigation"] a:hover strong {
  transform: translateX(0.15rem);
}

.page-main nav[aria-label="Project navigation"] a:focus-visible {
  outline-offset: -0.35rem;
}

@media (prefers-reduced-motion: reduce) {
  .page-main nav[aria-label="Project navigation"] a,
  .page-main nav[aria-label="Project navigation"] strong {
    transition: none;
  }

  .page-main nav[aria-label="Project navigation"] a:hover strong {
    transform: none;
  }
}

@media (max-width: 47.99rem) {
  .page-main nav[aria-label="Project navigation"] {
    grid-template-columns: 1fr;
  }

  .page-main nav[aria-label="Project navigation"] a {
    min-height: 8rem;
    padding: 1.5rem 0 1.75rem;
    text-align: left;
  }

  .page-main nav[aria-label="Project navigation"] a + a {
    border-top: 1px solid var(--line);
    border-left: 0;
    padding-left: 0;
    text-align: left;
  }
}

/* ========================================================================
   Keryg case study — scoped editorial extension
   ========================================================================== */

.keryg-case {
  --keryg-paper: #eeeae1;
  --keryg-ink: #173927;
  --keryg-soft-ink: #536158;
  --keryg-rule: rgba(238, 234, 225, 0.18);
}

.keryg-hero { padding: clamp(4rem, 10vw, 9rem) 0 0; }
.keryg-hero .back-link { margin-bottom: clamp(3.5rem, 8vw, 8rem); }
.keryg-hero__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(20rem, 1.1fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); max-width: none; }
.keryg-hero__copy { min-width: 0; }
.keryg-project-name { margin: 0 0 1rem; font-family: var(--display); font-size: clamp(1.5rem, 2.4vw, 2.4rem); font-weight: 500; letter-spacing: -0.03em; }
.keryg-hero h1 { max-width: 12ch; margin: 0; font-family: var(--display); font-size: clamp(3rem, 5.4vw, 5.5rem); font-weight: 500; letter-spacing: -0.055em; line-height: 0.98; }
.keryg-hero__summary { max-width: 47rem; margin-top: clamp(1.5rem, 3vw, 2.5rem); font-size: clamp(1.1rem, 1.7vw, 1.35rem); }
.keryg-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; margin-top: 2.25rem; color: var(--faint); font-size: 0.78rem; }
.keryg-button { display: inline-flex; align-items: center; gap: 0.75rem; width: fit-content; border: 1px solid var(--accent); border-radius: 999px; padding: 0.85rem 1.1rem; background: var(--accent); color: #17120e; font-size: 0.78rem; letter-spacing: 0.06em; text-decoration: none; text-transform: uppercase; }
.keryg-button:hover { border-color: var(--text); background: var(--text); }
.keryg-button--light { border-color: var(--keryg-paper); background: var(--keryg-paper); }
.keryg-media { margin: 0; }
.keryg-media img { display: block; width: 100%; height: auto; }
.keryg-media__viewport {
  height: clamp(20rem, 72vh, 48rem);
  height: clamp(20rem, 72svh, 48rem);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: auto;
  scrollbar-color: rgba(23, 57, 39, 0.5) rgba(23, 57, 39, 0.08);
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.keryg-media__viewport:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.keryg-media__viewport::-webkit-scrollbar { width: 0.6rem; }
.keryg-media__viewport::-webkit-scrollbar-track { background: rgba(23, 57, 39, 0.08); }
.keryg-media__viewport::-webkit-scrollbar-thumb { border: 2px solid var(--keryg-paper); border-radius: 999px; background: rgba(23, 57, 39, 0.5); }
.keryg-media--hero { min-width: 0; border: 1px solid var(--keryg-rule); background: var(--keryg-paper); color: var(--keryg-ink); }
.keryg-media--hero .keryg-media__viewport { position: relative; height: auto; aspect-ratio: 1 / 1.08; overflow: hidden; }
.keryg-media--hero img { width: 100%; height: 100%; object-fit: cover; object-position: center 6%; }
.keryg-media__expand, .trosyn-media__expand, .stronghill-media__expand, .hoffmans-media__expand, .stretch-media__expand, .carolina-media__expand, .meals-media__expand,
.case-image-lightbox__close { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 2.75rem; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 999px; padding: 0.7rem 1rem; background: rgba(17, 17, 17, 0.82); color: #fff; font: inherit; font-size: 0.78rem; cursor: pointer; }
.keryg-media__expand, .trosyn-media__expand, .stronghill-media__expand, .hoffmans-media__expand, .stretch-media__expand, .carolina-media__expand, .meals-media__expand { position: absolute; top: 1rem; right: 1rem; backdrop-filter: blur(8px); }
.keryg-media__expand:hover, .trosyn-media__expand:hover, .stronghill-media__expand:hover, .hoffmans-media__expand:hover, .stretch-media__expand:hover, .carolina-media__expand:hover, .meals-media__expand:hover, .quest-media__expand:hover, [data-image-expand]:hover, .case-image-lightbox__close:hover { background: var(--accent); color: #17120e; }
.keryg-media__expand:focus-visible, .trosyn-media__expand:focus-visible, .stronghill-media__expand:focus-visible, .hoffmans-media__expand:focus-visible, .stretch-media__expand:focus-visible, .carolina-media__expand:focus-visible, .meals-media__expand:focus-visible, .quest-media__expand:focus-visible, [data-image-expand]:focus-visible, .case-image-lightbox__close:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.keryg-media figcaption { padding: 0.85rem 1rem 1rem; color: var(--faint); font-size: 0.72rem; line-height: 1.5; }
.keryg-media__hint { display: block; margin-bottom: 0.35rem; color: var(--text); font-size: 0.65rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.keryg-media--hero figcaption, .keryg-media--portrait figcaption { background: var(--surface); }

.case-image-lightbox { position: fixed; inset: 0; width: 100%; max-width: none; height: 100vh; height: 100dvh; max-height: none; margin: 0; border: 0; padding: clamp(0.75rem, 2vw, 2rem); background: var(--bg); color: var(--text); }
.case-image-lightbox::backdrop { background: rgba(0, 0, 0, 0.9); }
.case-image-lightbox[open] { display: grid; }
.case-image-lightbox__inner { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
.case-image-lightbox__header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 0.75rem; }
.case-image-lightbox__header p { margin: 0; color: var(--muted); font-size: 0.9rem; }
.case-image-lightbox__viewport { min-height: 0; overflow: auto; overscroll-behavior: auto; scrollbar-color: rgba(238, 234, 225, 0.55) rgba(238, 234, 225, 0.08); scrollbar-width: thin; }
.case-image-lightbox__viewport:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.case-image-lightbox__viewport img { display: block; width: min(100%, 90rem); height: auto; margin: 0 auto; }

.keryg-section { border-top: 1px solid var(--keryg-rule); padding: clamp(5rem, 10vw, 10rem) 0; }
.keryg-overview { padding-block: clamp(3.5rem, 6vw, 6rem); }
.keryg-section__grid { display: grid; grid-template-columns: minmax(14rem, 0.42fr) minmax(0, 1fr); gap: clamp(3rem, 7vw, 8rem); max-width: none; padding-inline: clamp(1rem, 2vw, 2rem); }
.keryg-section__intro { max-width: 58rem; }
.keryg-section__intro,
.keryg-architecture__map,
.keryg-modes__list,
.keryg-responsive__notes { padding-inline: clamp(1rem, 2vw, 2rem); }
.keryg-section__label { margin: 0 0 1.5rem; color: var(--accent); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.keryg-section h2 { max-width: 18ch; margin: 0; font-family: var(--display); font-size: clamp(2.5rem, 5vw, 5.5rem); font-weight: 500; letter-spacing: -0.04em; line-height: 0.98; }
.keryg-section__lede { max-width: 38rem; margin: 2rem 0 0; color: var(--muted); font-size: clamp(1.05rem, 1.5vw, 1.25rem); }
.keryg-prose { max-width: 52rem; }
.keryg-prose > p { margin: 0; color: var(--muted); font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.55; }
.keryg-prose > p + p { margin-top: 1.25rem; }
.keryg-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; margin: clamp(2.5rem, 5vw, 4rem) 0 0; }
.keryg-facts div { border-top: 1px solid var(--keryg-rule); padding-top: 0.8rem; }
.keryg-facts dt { margin-bottom: 0.25rem; color: var(--faint); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; }
.keryg-facts dd { margin: 0; color: var(--text); font-size: 0.9rem; }
.keryg-tension-list { margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding: 0; list-style: none; }
.keryg-tension-list li { display: grid; grid-template-columns: minmax(12rem, 0.75fr) minmax(0, 1fr); gap: 1.5rem; border-top: 1px solid var(--keryg-rule); padding: 1rem 0; }
.keryg-tension-list span { color: var(--text); }
.keryg-tension-list small { color: var(--faint); font-size: 0.85rem; }

.keryg-architecture__map { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(3.5rem, 7vw, 7rem); border-top: 1px solid var(--keryg-rule); border-bottom: 1px solid var(--keryg-rule); }
.keryg-architecture__item { position: relative; min-height: 16rem; padding: 1.5rem 1.5rem 2rem 0; }
.keryg-architecture__item + .keryg-architecture__item { border-left: 1px solid var(--keryg-rule); padding-left: 1.5rem; }
.keryg-number { display: block; color: var(--accent); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.keryg-architecture__item h3, .keryg-modes__list h3, .keryg-decision-list h3 { margin: 3rem 0 0.75rem; font-family: var(--display); font-size: clamp(1.45rem, 2.2vw, 2.4rem); font-weight: 500; line-height: 1; }
.keryg-architecture__item p, .keryg-modes__list p { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.55; }

.keryg-experience { display: grid; grid-template-columns: minmax(15rem, 0.6fr) minmax(0, 1.4fr); gap: clamp(2.5rem, 8vw, 10rem); align-items: start; }
.keryg-experience__copy { position: sticky; top: 8rem; max-width: 30rem; }
.keryg-experience__copy h2 { margin-bottom: 2rem; }
.keryg-experience__copy > p { margin: 0; color: var(--muted); font-size: 1.05rem; }
.keryg-experience__copy > p + p { margin-top: 1rem; }
.keryg-media--portrait { max-width: 64rem; overflow: hidden; border: 1px solid rgba(238, 234, 225, 0.14); background: var(--keryg-paper); }
.keryg-media--portrait img { object-fit: contain; }
.keryg-experience--reverse .keryg-experience__copy { order: 2; }
.keryg-experience--reverse .keryg-media { order: 1; }

.keryg-modes__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: clamp(3.5rem, 7vw, 7rem); background: var(--keryg-rule); }
.keryg-modes__list article { min-height: 19rem; padding: 1.5rem; background: var(--bg); }
.keryg-modes__list h3 { margin-top: 4rem; }
.keryg-evidence-note { max-width: 42rem; margin: 1.5rem 0 0; color: var(--faint); font-size: 0.82rem; }
.keryg-responsive__notes { margin-top: 2.5rem; }
.keryg-responsive__notes div { display: grid; grid-template-columns: minmax(11rem, 0.7fr) minmax(0, 1fr); gap: 1.5rem; border-top: 1px solid var(--keryg-rule); padding: 1rem 0; }
.keryg-responsive__notes span { color: var(--text); }
.keryg-responsive__notes p { margin: 0; color: var(--faint); font-size: 0.9rem; }

.keryg-decision-list { max-width: 62rem; margin: clamp(3rem, 7vw, 7rem) 0 0 auto; padding: 0; list-style: none; }
.keryg-decision-list li { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: 1.5rem; border-top: 1px solid var(--keryg-rule); padding: 1.5rem 0 1.75rem; }
.keryg-decision-list li > span { color: var(--accent); font-size: 0.72rem; letter-spacing: 0.1em; }
.keryg-decision-list h3 { margin: 0 0 0.5rem; }
.keryg-decision-list p { max-width: 38rem; margin: 0; color: var(--muted); }
.keryg-takeaway { background: var(--surface); }
.keryg-takeaway__inner { display: grid; grid-template-columns: minmax(16rem, 0.9fr) minmax(0, 1fr); column-gap: clamp(3rem, 8vw, 10rem); max-width: none; padding-inline: clamp(1rem, 2vw, 2rem); }
.keryg-takeaway__inner > .keryg-section__label { grid-column: 1 / -1; }
.keryg-takeaway h2 { max-width: 16ch; }
.keryg-takeaway p:last-child { align-self: end; max-width: 46rem; margin: 0; color: var(--muted); font-size: 1.1rem; line-height: 1.55; }
.keryg-project-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--keryg-rule); }
.keryg-project-nav a { display: grid; gap: 0.6rem; padding: 2rem 0 2.5rem; color: var(--text); text-decoration: none; }
.keryg-project-nav a + a { border-left: 1px solid var(--keryg-rule); padding-left: clamp(1.5rem, 5vw, 5rem); text-align: right; }
.keryg-project-nav span { color: var(--faint); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; }
.keryg-project-nav strong { font-family: var(--display); font-size: clamp(1.7rem, 3vw, 3rem); font-weight: 500; }
.keryg-project-nav a:hover strong { color: var(--accent); }
.keryg-cta { margin-top: clamp(5rem, 10vw, 10rem); padding: clamp(3rem, 7vw, 7rem); background: var(--keryg-paper); color: var(--keryg-ink); }
.keryg-cta .keryg-section__label { color: #9e612e; }
.keryg-cta h2 { max-width: 14ch; margin: 0; color: var(--keryg-ink); }
.keryg-cta > p:not(.keryg-section__label) { max-width: 30rem; margin: 1.5rem 0 2rem; color: var(--keryg-soft-ink); font-size: 1.1rem; }

@media (max-width: 63.99rem) {
  .keryg-architecture__map, .keryg-modes__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .keryg-takeaway__inner { grid-template-columns: 1fr; row-gap: 2rem; }
  .keryg-takeaway__inner > .keryg-section__label { grid-column: auto; }
  .keryg-takeaway p:last-child { margin-top: 0; }
}
@media (max-width: 47.99rem) {
  .keryg-hero h1 { max-width: 11ch; }
  .keryg-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
  .keryg-media--hero .keryg-media__viewport { aspect-ratio: 1.2 / 1; }
  .keryg-hero__actions { align-items: flex-start; flex-direction: column; }
  .keryg-section__grid, .keryg-experience { grid-template-columns: 1fr; gap: 2rem; }
  .keryg-section h2 { max-width: 12ch; }
  .keryg-facts { grid-template-columns: 1fr; }
  .keryg-tension-list li, .keryg-responsive__notes div { grid-template-columns: 1fr; gap: 0.35rem; }
  .keryg-architecture__map, .keryg-modes__list { grid-template-columns: 1fr; }
  .keryg-architecture__item { min-height: auto; padding: 1.5rem 0 2rem; }
  .keryg-architecture__item + .keryg-architecture__item { border-top: 1px solid var(--keryg-rule); border-left: 0; padding-left: 0; }
  .keryg-architecture__item h3 { margin-top: 2.5rem; }
  .keryg-experience__copy { position: static; }
  .keryg-experience--reverse .keryg-experience__copy, .keryg-experience--reverse .keryg-media { order: initial; }
  .keryg-modes__list { gap: 1px; }
  .keryg-modes__list article { min-height: auto; }
  .keryg-modes__list h3 { margin-top: 2.5rem; }
  .keryg-decision-list { margin-left: 0; }
  .keryg-project-nav { grid-template-columns: 1fr; }
  .keryg-project-nav a + a { border-top: 1px solid var(--keryg-rule); border-left: 0; padding-left: 0; text-align: left; }
  .keryg-cta { padding: 3rem 1.5rem; }
}

/* ========================================================================== 
   Trosyn AI case study — scoped editorial extension
   ========================================================================== */

.trosyn-case {
  --trosyn-rule: rgba(244, 240, 234, 0.16);
  --trosyn-green: #19463d;
  --trosyn-green-soft: #28665a;
  --trosyn-paper: #edf1eb;
  --trosyn-ink: #173b35;
}

.trosyn-hero { padding: clamp(4rem, 10vw, 9rem) 0 0; }
.trosyn-hero .back-link { margin-bottom: clamp(3.5rem, 8vw, 8rem); }
.trosyn-hero__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(20rem, 1.1fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); max-width: none; }
.trosyn-hero__copy { min-width: 0; }
.trosyn-project-name { margin: 0 0 1rem; font-family: var(--display); font-size: clamp(1.5rem, 2.4vw, 2.4rem); font-weight: 500; letter-spacing: -0.03em; }
.trosyn-hero h1 { max-width: 14ch; margin: 0; font-family: var(--display); font-size: clamp(3rem, 7vw, 7.25rem); font-weight: 500; letter-spacing: -0.055em; line-height: 0.98; }
.trosyn-hero__summary { max-width: 48rem; margin: clamp(1.5rem, 3vw, 2.5rem) 0 0; color: var(--muted); font-size: clamp(1.1rem, 1.7vw, 1.35rem); line-height: 1.5; }
.trosyn-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; margin-top: 2.25rem; color: var(--faint); font-size: 0.78rem; }
.trosyn-button { display: inline-flex; align-items: center; gap: 0.75rem; width: fit-content; border: 1px solid var(--accent); border-radius: 999px; padding: 0.85rem 1.1rem; background: var(--accent); color: #17120e; font-size: 0.78rem; letter-spacing: 0.06em; text-decoration: none; text-transform: uppercase; }
.trosyn-button:hover { border-color: var(--text); background: var(--text); }
.trosyn-button--light { border-color: var(--trosyn-paper); background: var(--trosyn-paper); color: var(--trosyn-ink); }
.trosyn-media { margin: 0; }
.trosyn-media img { display: block; width: 100%; height: auto; }
.trosyn-media--hero { min-width: 0; border: 1px solid var(--trosyn-rule); background: #006258; }
.trosyn-media__viewport { position: relative; aspect-ratio: 1 / 1.08; overflow: hidden; }
.trosyn-media__viewport img { width: 100%; height: 100%; object-fit: cover; object-position: center 8%; }
.trosyn-media figcaption { padding: 0.85rem 1rem 1rem; background: var(--surface); color: var(--faint); font-size: 0.72rem; line-height: 1.5; }

.trosyn-section { border-top: 1px solid var(--trosyn-rule); padding: clamp(5rem, 10vw, 10rem) 0; }
.trosyn-overview { padding-block: clamp(3.5rem, 6vw, 6rem); }
.trosyn-section__grid { display: grid; grid-template-columns: minmax(14rem, 0.42fr) minmax(0, 1fr); gap: clamp(3rem, 7vw, 8rem); max-width: none; padding-inline: clamp(1rem, 2vw, 2rem); }
.trosyn-section__intro,
.trosyn-translation-grid,
.trosyn-story-map,
.trosyn-modes,
.trosyn-workflow-grid,
.trosyn-visual-principles { padding-inline: clamp(1rem, 2vw, 2rem); }
.trosyn-section__intro { max-width: 55rem; }
.trosyn-section__label { margin: 0 0 1.5rem; color: var(--accent); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.trosyn-section h2 { max-width: 17ch; margin: 0; font-family: var(--display); font-size: clamp(2.45rem, 5vw, 5.4rem); font-weight: 500; letter-spacing: -0.04em; line-height: 0.98; }
.trosyn-section__lede { max-width: 41rem; margin: 2rem 0 0; color: var(--muted); font-size: clamp(1.05rem, 1.5vw, 1.25rem); }
.trosyn-prose { max-width: 52rem; }
.trosyn-prose > p { margin: 0; color: var(--muted); font-size: clamp(1.05rem, 1.4vw, 1.2rem); }
.trosyn-prose > p + p { margin-top: 1.25rem; }
.trosyn-prose a { color: var(--text); text-decoration-color: var(--accent); text-underline-offset: 0.2em; }
.trosyn-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; margin: clamp(2.5rem, 5vw, 4rem) 0 0; }
.trosyn-facts div { border-top: 1px solid var(--trosyn-rule); padding-top: 0.8rem; }
.trosyn-facts dt { margin-bottom: 0.25rem; color: var(--faint); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; }
.trosyn-facts dd { margin: 0; color: var(--text); font-size: 0.9rem; }
.trosyn-evidence-note { max-width: 42rem; margin: 1.5rem 0 0 !important; color: var(--faint) !important; font-size: 0.82rem !important; line-height: 1.55; }

.trosyn-problem { background: var(--surface); }
.trosyn-problem-list { margin-top: clamp(2.5rem, 5vw, 4rem); }
.trosyn-problem-list > div { display: grid; grid-template-columns: 2.5rem minmax(9rem, 0.6fr) minmax(0, 1fr); gap: clamp(1rem, 2vw, 2rem); align-items: start; border-top: 1px solid var(--trosyn-rule); padding: 1rem 0; }
.trosyn-problem-list span, .trosyn-problem-list h3 { color: var(--accent); }
.trosyn-problem-list span { font-size: 0.7rem; letter-spacing: 0.1em; }
.trosyn-problem-list h3 { margin: 0; font-family: var(--display); font-size: 1.5rem; font-weight: 500; line-height: 1; }
.trosyn-problem-list p { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.55; }

.trosyn-translation-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: clamp(3.5rem, 7vw, 7rem); background: var(--trosyn-rule); }
.trosyn-translation-grid article { min-height: 17rem; padding: 1.5rem; background: var(--bg); }
.trosyn-translation-grid span, .trosyn-number { display: block; color: var(--accent); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.trosyn-translation-grid strong { display: block; margin-top: 3rem; color: var(--text); font-family: var(--display); font-size: 2rem; font-weight: 500; }
.trosyn-translation-grid p { margin: 0.75rem 0 0; color: var(--muted); font-size: 0.92rem; line-height: 1.55; }

.trosyn-story-map { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: clamp(3.5rem, 7vw, 7rem) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--trosyn-rule); border-bottom: 1px solid var(--trosyn-rule); }
.trosyn-story-map li { min-height: 17rem; padding: 1.5rem 1.5rem 2rem 0; }
.trosyn-story-map li + li { border-left: 1px solid var(--trosyn-rule); padding-left: 1.5rem; }
.trosyn-story-map span { color: var(--accent); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; }
.trosyn-story-map h3, .trosyn-modes h3, .trosyn-visual-principles h3 { margin: 3rem 0 0.75rem; font-family: var(--display); font-size: clamp(1.45rem, 2.2vw, 2.4rem); font-weight: 500; line-height: 1; }
.trosyn-story-map p, .trosyn-modes p, .trosyn-visual-principles p { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.55; }

.trosyn-control { background: var(--trosyn-green); }
.trosyn-control h2, .trosyn-control .trosyn-prose > p { color: var(--trosyn-paper); }
.trosyn-control .trosyn-prose > p { color: rgba(237, 241, 235, 0.78); }
.trosyn-control-notes { margin-top: 2.5rem; }
.trosyn-control-notes > div, .trosyn-responsive-notes > div { display: grid; grid-template-columns: minmax(10rem, 0.7fr) minmax(0, 1fr); gap: 1.5rem; border-top: 1px solid rgba(237, 241, 235, 0.22); padding: 1rem 0; }
.trosyn-control-notes span, .trosyn-responsive-notes span { color: var(--trosyn-paper); }
.trosyn-control-notes p, .trosyn-responsive-notes p { margin: 0; color: rgba(237, 241, 235, 0.72); font-size: 0.92rem; }

.trosyn-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: clamp(3.5rem, 7vw, 7rem); background: var(--trosyn-rule); }
.trosyn-modes article { min-height: 22rem; padding: 1.5rem; background: var(--bg); }
.trosyn-modes h3 { margin-top: 4rem; }
.trosyn-modes .trosyn-mode--roadmap { background: var(--surface); }
.trosyn-mode--roadmap .trosyn-number { color: #e1ad70; }

.trosyn-workflow-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 2.5rem; background: var(--trosyn-rule); }
.trosyn-workflow-grid article { min-height: 10rem; padding: 1.25rem; background: var(--bg); }
.trosyn-workflow-grid span { color: var(--accent); font-family: var(--display); font-size: 1.5rem; }
.trosyn-workflow-grid p { margin: 1.5rem 0 0; color: var(--muted); font-size: 0.9rem; line-height: 1.55; }

.trosyn-visual { background: var(--surface); }
.trosyn-visual-principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: clamp(3.5rem, 7vw, 7rem); background: var(--trosyn-rule); }
.trosyn-visual-principles > div { min-height: 17rem; padding: 1.5rem; background: var(--surface); }
.trosyn-visual-principles span { color: var(--accent); font-size: 0.7rem; letter-spacing: 0.1em; }
.trosyn-visual-principles h3 { margin-top: 3rem; }

.trosyn-responsive-notes { margin-top: 2.5rem; }
.trosyn-responsive-notes > div { border-color: var(--trosyn-rule); }
.trosyn-responsive-notes span { color: var(--text); }
.trosyn-responsive-notes p { color: var(--faint); }

.trosyn-decision-list { max-width: 64rem; margin: clamp(3rem, 7vw, 7rem) 0 0 auto; padding: 0; list-style: none; }
.trosyn-decision-list li { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: 1.5rem; border-top: 1px solid var(--trosyn-rule); padding: 1.5rem 0 1.75rem; }
.trosyn-decision-list li > span { color: var(--accent); font-size: 0.72rem; letter-spacing: 0.1em; }
.trosyn-decision-list h3 { margin: 0 0 0.5rem; font-family: var(--display); font-size: clamp(1.5rem, 2.4vw, 2.5rem); font-weight: 500; line-height: 1; }
.trosyn-decision-list p { max-width: 40rem; margin: 0; color: var(--muted); }
.trosyn-takeaway { background: var(--trosyn-paper); color: var(--trosyn-ink); }
.trosyn-takeaway__inner {
  display: grid;
  grid-template-columns: minmax(16rem, 0.9fr) minmax(0, 1fr);
  column-gap: clamp(3rem, 8vw, 10rem);
  max-width: none;
  padding-inline: clamp(1rem, 2vw, 2rem);
}
.trosyn-takeaway__inner > .trosyn-section__label { grid-column: 1 / -1; }
.trosyn-takeaway .trosyn-section__label { color: #9e612e; }
.trosyn-takeaway h2 { max-width: 15ch; color: var(--trosyn-ink); }
.trosyn-takeaway p:last-child { align-self: end; max-width: 43rem; margin: 0; color: #53665f; font-size: 1.1rem; }
.trosyn-project-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--trosyn-rule); }
.trosyn-project-nav a { display: grid; gap: 0.6rem; padding: 2rem 0 2.5rem; color: var(--text); text-decoration: none; }
.trosyn-project-nav a + a { border-left: 1px solid var(--trosyn-rule); padding-left: clamp(1.5rem, 5vw, 5rem); text-align: right; }
.trosyn-project-nav span { color: var(--faint); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; }
.trosyn-project-nav strong { font-family: var(--display); font-size: clamp(1.7rem, 3vw, 3rem); font-weight: 500; }
.trosyn-project-nav a:hover strong { color: var(--accent); }
.trosyn-work-link { display: block; border-top: 1px solid var(--trosyn-rule); padding: 1.25rem 0; color: var(--muted); font-size: 0.78rem; letter-spacing: 0.08em; text-decoration: none; text-transform: uppercase; }
.trosyn-work-link:hover { color: var(--accent); }
.trosyn-cta { margin-top: clamp(5rem, 10vw, 10rem); padding: clamp(3rem, 7vw, 7rem); background: var(--trosyn-green); color: var(--trosyn-paper); }
.trosyn-cta .trosyn-section__label { color: #e1ad70; }
.trosyn-cta h2 { max-width: 14ch; margin: 0; color: var(--trosyn-paper); }
.trosyn-cta > p:not(.trosyn-section__label) { max-width: 30rem; margin: 1.5rem 0 2rem; color: rgba(237, 241, 235, 0.78); font-size: 1.1rem; }

@media (max-width: 63.99rem) {
  .trosyn-story-map { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .trosyn-story-map li:nth-child(4) { border-top: 1px solid var(--trosyn-rule); border-left: 0; padding-left: 0; }
  .trosyn-story-map li:nth-child(5) { border-top: 1px solid var(--trosyn-rule); }
  .trosyn-takeaway__inner { grid-template-columns: 1fr; row-gap: 2rem; }
  .trosyn-takeaway__inner > .trosyn-section__label { grid-column: auto; }
  .trosyn-takeaway p:last-child { margin-top: 0; }
}

@media (max-width: 47.99rem) {
  .trosyn-overview { padding-block: 3rem; }
  .trosyn-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
  .trosyn-media__viewport { aspect-ratio: 1.2 / 1; }
  .trosyn-hero h1 { max-width: 11ch; }
  .trosyn-hero__actions { align-items: flex-start; flex-direction: column; }
  .trosyn-section__grid { grid-template-columns: 1fr; gap: 2rem; }
  .trosyn-section h2 { max-width: 12ch; }
  .trosyn-facts { grid-template-columns: 1fr; }
  .trosyn-problem-list > div { grid-template-columns: 2rem 1fr; gap: 0.75rem; }
  .trosyn-problem-list p { grid-column: 2; }
  .trosyn-translation-grid, .trosyn-modes, .trosyn-visual-principles { grid-template-columns: 1fr; }
  .trosyn-translation-grid article, .trosyn-modes article, .trosyn-visual-principles > div { min-height: auto; }
  .trosyn-translation-grid strong { margin-top: 2rem; }
  .trosyn-story-map { grid-template-columns: 1fr; }
  .trosyn-story-map li { min-height: auto; padding: 1.5rem 0 2rem; }
  .trosyn-story-map li + li, .trosyn-story-map li:nth-child(4), .trosyn-story-map li:nth-child(5) { border-top: 1px solid var(--trosyn-rule); border-left: 0; padding-left: 0; }
  .trosyn-story-map h3 { margin-top: 2.5rem; }
  .trosyn-control-notes > div, .trosyn-responsive-notes > div { grid-template-columns: 1fr; gap: 0.35rem; }
  .trosyn-workflow-grid { grid-template-columns: 1fr; }
  .trosyn-visual-principles h3 { margin-top: 2.5rem; }
  .trosyn-decision-list { margin-left: 0; }
  .trosyn-project-nav { grid-template-columns: 1fr; }
  .trosyn-project-nav a + a { border-top: 1px solid var(--trosyn-rule); border-left: 0; padding-left: 0; text-align: left; }
  .trosyn-cta { padding: 3rem 1.5rem; }
}

/* ==========================================================================
   ROPTIA case study — scoped concept-to-platform extension
   ========================================================================== */

.roptia-case {
  --roptia-rule: rgba(244, 240, 234, 0.16);
  --roptia-blue: #b9c9f4;
  --roptia-blue-strong: #536fb7;
  --roptia-paper: #edf0f4;
  --roptia-ink: #17213a;
}

.roptia-hero { padding: clamp(4rem, 10vw, 9rem) 0 0; }
.roptia-hero .back-link { margin-bottom: clamp(3.5rem, 8vw, 8rem); }
.roptia-hero__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(20rem, 1.1fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); max-width: none; }
.roptia-hero__copy { min-width: 0; }
.roptia-project-name { margin: 0 0 1rem; font-family: var(--display); font-size: clamp(1.5rem, 2.4vw, 2.4rem); font-weight: 500; letter-spacing: -0.03em; }
.roptia-hero h1 { max-width: 14ch; margin: 0; font-family: var(--display); font-size: clamp(3rem, 7vw, 7.25rem); font-weight: 500; letter-spacing: -0.055em; line-height: 0.98; }
.roptia-hero__summary { max-width: 49rem; margin: clamp(1.5rem, 3vw, 2.5rem) 0 0; color: var(--muted); font-size: clamp(1.1rem, 1.7vw, 1.35rem); line-height: 1.5; }
.roptia-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; margin-top: 2.25rem; color: var(--faint); font-size: 0.78rem; }
.roptia-button { display: inline-flex; align-items: center; gap: 0.75rem; width: fit-content; border: 1px solid var(--accent); border-radius: 999px; padding: 0.85rem 1.1rem; background: var(--accent); color: #17120e; font-size: 0.78rem; letter-spacing: 0.06em; text-decoration: none; text-transform: uppercase; }
.roptia-button:hover { border-color: var(--text); background: var(--text); }
.roptia-button--light { border-color: var(--roptia-paper); background: var(--roptia-paper); color: var(--roptia-ink); }
.roptia-media { margin: 0; }
.roptia-media img { display: block; width: 100%; height: auto; }
.roptia-media--hero { min-width: 0; border: 1px solid var(--roptia-rule); background: var(--roptia-paper); }
.roptia-media__viewport { position: relative; aspect-ratio: 1.2 / 1; overflow: hidden; }
.roptia-media__viewport img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.roptia-media--archive img { object-fit: contain; }
.roptia-media figcaption { padding: 0.85rem 1rem 1rem; background: var(--surface); color: var(--faint); font-size: 0.72rem; line-height: 1.55; }

.roptia-section { border-top: 1px solid var(--roptia-rule); padding: clamp(5rem, 10vw, 10rem) 0; }
.roptia-overview { padding-block: clamp(3.5rem, 6vw, 6rem); }
.roptia-section__grid { display: grid; grid-template-columns: minmax(14rem, 0.42fr) minmax(0, 1fr); gap: clamp(3rem, 7vw, 8rem); max-width: none; padding-inline: clamp(1rem, 2vw, 2rem); }
.roptia-section__intro { max-width: 58rem; }
.roptia-section__intro,
.roptia-ia-map,
.roptia-comparison,
.roptia-experience,
.roptia-connected-grid { padding-inline: clamp(1rem, 2vw, 2rem); }
.roptia-section__label { margin: 0 0 1.5rem; color: var(--accent); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.roptia-section h2 { max-width: 17ch; margin: 0; font-family: var(--display); font-size: clamp(2.45rem, 5vw, 5.4rem); font-weight: 500; letter-spacing: -0.04em; line-height: 0.98; }
.roptia-section__lede { max-width: 43rem; margin: 2rem 0 0; color: var(--muted); font-size: clamp(1.05rem, 1.5vw, 1.25rem); }
.roptia-prose { max-width: 52rem; }
.roptia-prose > p { margin: 0; color: var(--muted); font-size: clamp(1.05rem, 1.4vw, 1.2rem); }
.roptia-prose > p + p { margin-top: 1.25rem; }
.roptia-prose a { color: var(--text); text-decoration-color: var(--accent); text-underline-offset: 0.2em; }
.roptia-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; margin: clamp(2.5rem, 5vw, 4rem) 0 0; }
.roptia-facts div { border-top: 1px solid var(--roptia-rule); padding-top: 0.8rem; }
.roptia-facts dt { margin-bottom: 0.25rem; color: var(--faint); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; }
.roptia-facts dd { margin: 0; color: var(--text); font-size: 0.9rem; }
.roptia-concept { background: var(--surface); }
.roptia-media--archive { max-width: 88rem; margin: clamp(3.5rem, 7vw, 7rem) auto 0; border: 1px solid var(--roptia-rule); background: var(--roptia-paper); }
.roptia-challenge-list { margin-top: clamp(2.5rem, 5vw, 4rem); }
.roptia-challenge-list > div { display: grid; grid-template-columns: 2.5rem minmax(9rem, 0.65fr) minmax(0, 1fr); gap: 1rem; align-items: start; border-top: 1px solid var(--roptia-rule); padding: 1rem 0; }
.roptia-challenge-list span { color: var(--accent); font-size: 0.7rem; letter-spacing: 0.1em; }
.roptia-challenge-list h3 { margin: 0; color: var(--text); font-family: var(--display); font-size: 1.5rem; font-weight: 500; line-height: 1; }
.roptia-challenge-list p { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.55; }
.roptia-evidence-note { max-width: 44rem; margin: 1.5rem 0 0 !important; color: var(--faint) !important; font-size: 0.82rem !important; line-height: 1.55; }
.roptia-ia-map { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: clamp(3.5rem, 7vw, 7rem) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--roptia-rule); border-bottom: 1px solid var(--roptia-rule); }
.roptia-ia-map li { min-height: 17rem; padding: 1.5rem 1.5rem 2rem 0; }
.roptia-ia-map li + li { border-left: 1px solid var(--roptia-rule); padding-left: 1.5rem; }
.roptia-ia-map span, .roptia-decision-list > li > span { color: var(--accent); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; }
.roptia-ia-map h3, .roptia-connected-grid span { margin: 3rem 0 0.75rem; color: var(--text); font-family: var(--display); font-size: clamp(1.5rem, 2.3vw, 2.5rem); font-weight: 500; line-height: 1; }
.roptia-ia-map p, .roptia-connected-grid p { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.55; }
.roptia-comparison { display: grid; grid-template-columns: minmax(0, 1fr) 3rem minmax(0, 1fr); gap: clamp(1rem, 3vw, 3rem); align-items: center; margin-top: clamp(3.5rem, 7vw, 7rem); }
.roptia-comparison__item { min-width: 0; margin: 0; }
.roptia-comparison__item img { display: block; width: 100%; height: auto; border: 1px solid var(--roptia-rule); background: var(--roptia-paper); }
.roptia-comparison__tag { margin-bottom: 0.8rem; color: var(--roptia-blue); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.roptia-comparison__item figcaption { padding-top: 0.8rem; color: var(--faint); font-size: 0.78rem; }
.roptia-comparison__arrow { color: var(--accent); font-family: var(--display); font-size: 2rem; text-align: center; }
.roptia-experience { display: grid; grid-template-columns: minmax(15rem, 0.62fr) minmax(0, 1.38fr); gap: clamp(2.5rem, 8vw, 10rem); align-items: start; }
.roptia-experience__copy { max-width: 30rem; }
.roptia-experience__copy h2 { margin-top: 0; }
.roptia-service-list, .roptia-responsive-notes { margin-top: clamp(2.5rem, 5vw, 4rem); }
.roptia-service-list > div, .roptia-responsive-notes > div { display: grid; grid-template-columns: minmax(9rem, 0.6fr) minmax(0, 1fr); gap: 1.5rem; border-top: 1px solid var(--roptia-rule); padding: 1rem 0; }
.roptia-service-list span, .roptia-responsive-notes span { color: var(--text); }
.roptia-service-list p, .roptia-responsive-notes p { margin: 0; color: var(--faint); font-size: 0.9rem; }
.roptia-connected-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: clamp(3.5rem, 7vw, 7rem); background: var(--roptia-rule); }
.roptia-connected-grid article { min-height: 16rem; padding: 1.5rem; background: var(--bg); }
.roptia-connected-grid span { display: block; margin-top: 0; }
.roptia-decision-list { max-width: 64rem; margin: clamp(3rem, 7vw, 7rem) 0 0 auto; padding: 0; list-style: none; }
.roptia-decision-list li { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: 1.5rem; border-top: 1px solid var(--roptia-rule); padding: 1.5rem 0 1.75rem; }
.roptia-decision-list h3 { margin: 0 0 0.5rem; color: var(--text); font-family: var(--display); font-size: clamp(1.5rem, 2.4vw, 2.5rem); font-weight: 500; line-height: 1; }
.roptia-decision-list p { max-width: 40rem; margin: 0; color: var(--muted); }
.roptia-takeaway { background: var(--roptia-paper); color: var(--roptia-ink); }
.roptia-takeaway__inner {
  display: grid;
  grid-template-columns: minmax(16rem, 0.9fr) minmax(0, 1fr);
  column-gap: clamp(3rem, 8vw, 10rem);
  max-width: none;
  padding-inline: clamp(1rem, 2vw, 2rem);
}
.roptia-takeaway__inner > .roptia-section__label { grid-column: 1 / -1; }
.roptia-takeaway .roptia-section__label { color: #9e612e; }
.roptia-takeaway h2 { max-width: 16ch; color: var(--roptia-ink); }
.roptia-takeaway p:last-child { align-self: end; max-width: 46rem; margin: 0; color: #536176; font-size: 1.1rem; }
.roptia-project-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--roptia-rule); }
.roptia-project-nav a { display: grid; gap: 0.6rem; padding: 2rem 0 2.5rem; color: var(--text); text-decoration: none; }
.roptia-project-nav a + a { border-left: 1px solid var(--roptia-rule); padding-left: clamp(1.5rem, 5vw, 5rem); text-align: right; }
.roptia-project-nav span { color: var(--faint); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; }
.roptia-project-nav strong { font-family: var(--display); font-size: clamp(1.7rem, 3vw, 3rem); font-weight: 500; }
.roptia-project-nav a:hover strong, .roptia-work-link:hover { color: var(--accent); }
.roptia-work-link { display: block; border-top: 1px solid var(--roptia-rule); padding: 1.25rem 0; color: var(--muted); font-size: 0.78rem; letter-spacing: 0.08em; text-decoration: none; text-transform: uppercase; }
.roptia-cta { margin-top: clamp(5rem, 10vw, 10rem); padding: clamp(3rem, 7vw, 7rem); background: var(--roptia-blue-strong); color: var(--roptia-paper); }
.roptia-cta .roptia-section__label { color: #f1c486; }
.roptia-cta h2 { max-width: 15ch; margin: 0; color: var(--roptia-paper); }
.roptia-cta > p:not(.roptia-section__label) { max-width: 32rem; margin: 1.5rem 0 2rem; color: rgba(237, 240, 244, 0.82); font-size: 1.1rem; }

/* ROPTIA typography aligned with the portfolio scale; content and evidence unchanged. */
.roptia-case {
  --type-caption: 1rem;
}

.roptia-case .roptia-hero h1 {
  font-size: 5rem;
  font-weight: 600;
  letter-spacing: -0.06em;
  line-height: 1.08;
}

.roptia-case .roptia-section h2,
.roptia-case .roptia-cta h2 {
  font-size: 3.5rem;
  font-weight: 600;
  letter-spacing: -0.06em;
  line-height: 1.08;
}

.roptia-case .roptia-challenge-list h3,
.roptia-case .roptia-ia-map h3,
.roptia-case .roptia-decision-list h3,
.roptia-case .roptia-connected-grid span {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.06em;
  line-height: 1.1;
}

.roptia-case .roptia-section__label,
.roptia-case .roptia-facts dt,
.roptia-case .roptia-challenge-list span,
.roptia-case .roptia-ia-map span,
.roptia-case .roptia-decision-list > li > span,
.roptia-case .roptia-comparison__tag,
.roptia-case .roptia-project-nav span {
  font-size: 1rem;
  letter-spacing: 0.01em;
}

.roptia-case .roptia-project-name {
  font-weight: 600;
  letter-spacing: -0.06em;
}

.roptia-case .roptia-hero__summary,
.roptia-case .roptia-section__lede,
.roptia-case .roptia-prose > p,
.roptia-case .roptia-challenge-list p,
.roptia-case .roptia-ia-map p,
.roptia-case .roptia-connected-grid p,
.roptia-case .roptia-decision-list p,
.roptia-case .roptia-service-list p,
.roptia-case .roptia-responsive-notes p,
.roptia-case .roptia-evidence-note,
.roptia-case .roptia-takeaway p:last-child,
.roptia-case .roptia-cta > p:not(.roptia-section__label),
.roptia-case .roptia-media figcaption,
.roptia-case .roptia-comparison__item figcaption {
  font-size: 1rem;
  line-height: 1.55;
  letter-spacing: -0.02em;
}

.roptia-case .roptia-hero__summary,
.roptia-case .roptia-section__lede,
.roptia-case .roptia-takeaway p:last-child,
.roptia-case .roptia-cta > p:not(.roptia-section__label) {
  font-size: clamp(1rem, 1.5vw, 1.25rem);
}

.roptia-case .roptia-facts dd {
  font-size: 1.125rem;
  line-height: 1.5;
}

.roptia-case .roptia-button,
.roptia-case .roptia-media__expand,
.roptia-case .case-image-lightbox__close,
.roptia-case .case-image-lightbox__header p,
.roptia-case .back-link,
.roptia-case .contact-link,
.roptia-case .roptia-work-link {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.roptia-case .roptia-hero__actions > span {
  font-size: 1rem;
}

.roptia-case .roptia-hero__summary,
.roptia-case .roptia-section__lede,
.roptia-case .roptia-prose,
.roptia-case .roptia-challenge-list p,
.roptia-case .roptia-ia-map p,
.roptia-case .roptia-connected-grid p,
.roptia-case .roptia-decision-list p,
.roptia-case .roptia-evidence-note,
.roptia-case .roptia-takeaway p:last-child,
.roptia-case .roptia-cta > p:not(.roptia-section__label) {
  max-width: 60ch;
}

@media (max-width: 63.99rem) {
  .roptia-case .roptia-hero h1 { font-size: 4rem; }
}

@media (max-width: 63.99rem) {
  .roptia-ia-map, .roptia-connected-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .roptia-ia-map li:nth-child(3), .roptia-ia-map li:nth-child(4) { border-top: 1px solid var(--roptia-rule); }
  .roptia-ia-map li:nth-child(3) { border-left: 0; padding-left: 0; }
  .roptia-ia-map li:nth-child(4) { padding-left: 1.5rem; }
  .roptia-takeaway__inner { grid-template-columns: 1fr; row-gap: 2rem; }
  .roptia-takeaway__inner > .roptia-section__label { grid-column: auto; }
  .roptia-takeaway p:last-child { margin-top: 0; }
}

/* BBX Capital typography aligned with the portfolio scale; retain approved narrative and evidence. */
.bbx-case {
  --type-caption: 1rem;
}

.bbx-case .bbx-hero h1 {
  font-size: 5rem;
  font-weight: 600;
  letter-spacing: -0.06em;
  line-height: 1.08;
}

.bbx-case .bbx-section h2,
.bbx-case .bbx-cta h2 {
  font-size: 3.5rem;
  font-weight: 600;
  letter-spacing: -0.06em;
  line-height: 1.08;
}

.bbx-case .bbx-challenge-list h3,
.bbx-case .bbx-architecture__map h3,
.bbx-case .bbx-visual-principles h3,
.bbx-case .bbx-decision-list h3 {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.06em;
  line-height: 1.1;
}

.bbx-case .bbx-section__label,
.bbx-case .bbx-facts dt,
.bbx-case .bbx-challenge-list span,
.bbx-case .bbx-architecture__map span,
.bbx-case .bbx-visual-principles span,
.bbx-case .bbx-decision-list > li > span,
.bbx-case .bbx-project-nav span,
.bbx-case .bbx-responsive-notes span,
.bbx-case .bbx-comparison__tag {
  font-size: 1rem;
  letter-spacing: 0.01em;
}

.bbx-case .bbx-project-name {
  font-weight: 600;
  letter-spacing: -0.06em;
}

.bbx-case .bbx-hero__summary,
.bbx-case .bbx-section__lede,
.bbx-case .bbx-prose > p,
.bbx-case .bbx-challenge-list p,
.bbx-case .bbx-architecture__map p,
.bbx-case .bbx-visual-principles p,
.bbx-case .bbx-responsive-notes p,
.bbx-case .bbx-decision-list p,
.bbx-case .bbx-evidence-note,
.bbx-case .bbx-takeaway p:last-child,
.bbx-case .bbx-cta > p:not(.bbx-section__label),
.bbx-case .bbx-media figcaption,
.bbx-case .bbx-comparison__item figcaption {
  font-size: 1rem;
  line-height: 1.55;
  letter-spacing: -0.02em;
}

.bbx-case .bbx-hero__summary,
.bbx-case .bbx-section__lede,
.bbx-case .bbx-takeaway p:last-child,
.bbx-case .bbx-cta > p:not(.bbx-section__label) {
  font-size: clamp(1rem, 1.5vw, 1.25rem);
}

.bbx-case .bbx-facts dd {
  font-size: 1.125rem;
  line-height: 1.5;
}

.bbx-case .bbx-button,
.bbx-case .bbx-media__expand,
.bbx-case .case-image-lightbox__close,
.bbx-case .case-image-lightbox__header p,
.bbx-case .back-link,
.bbx-case .contact-link,
.bbx-case .bbx-work-link {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.bbx-case .bbx-hero__actions > span {
  font-size: 1rem;
}

.bbx-case .bbx-hero__summary,
.bbx-case .bbx-section__lede,
.bbx-case .bbx-prose,
.bbx-case .bbx-challenge-list p,
.bbx-case .bbx-architecture__map p,
.bbx-case .bbx-visual-principles p,
.bbx-case .bbx-responsive-notes p,
.bbx-case .bbx-decision-list p,
.bbx-case .bbx-evidence-note,
.bbx-case .bbx-takeaway p:last-child,
.bbx-case .bbx-cta > p:not(.bbx-section__label) {
  max-width: 60ch;
}

@media (max-width: 63.99rem) {
  .bbx-case .bbx-hero h1 { font-size: 4rem; }
}

@media (max-width: 47.99rem) {
  .bbx-case .bbx-hero h1 { font-size: 2.75rem; line-height: 1.1; }
  .bbx-case .bbx-section h2,
  .bbx-case .bbx-cta h2 { font-size: 2.75rem; line-height: 1.1; }
  .bbx-case .bbx-challenge-list h3,
  .bbx-case .bbx-architecture__map h3,
  .bbx-case .bbx-visual-principles h3,
  .bbx-case .bbx-decision-list h3 { font-size: 1.75rem; }
}

@media (max-width: 47.99rem) {
  .roptia-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
  .roptia-media__viewport { aspect-ratio: 1.2 / 1; }
  .roptia-hero h1 { max-width: 11ch; }
  .roptia-hero__actions { align-items: flex-start; flex-direction: column; }
  .roptia-section__grid, .roptia-experience { grid-template-columns: 1fr; gap: 2rem; }
  .roptia-section h2 { max-width: 12ch; }
  .roptia-facts { grid-template-columns: 1fr; }
  .roptia-challenge-list > div { grid-template-columns: 2rem 1fr; gap: 0.75rem; }
  .roptia-challenge-list p { grid-column: 2; }
  .roptia-ia-map, .roptia-connected-grid { grid-template-columns: 1fr; }
  .roptia-ia-map li { min-height: auto; padding: 1.5rem 0 2rem; }
  .roptia-ia-map li + li, .roptia-ia-map li:nth-child(3), .roptia-ia-map li:nth-child(4) { border-top: 1px solid var(--roptia-rule); border-left: 0; padding-left: 0; }
  .roptia-ia-map h3 { margin-top: 2.5rem; }
  .roptia-comparison { grid-template-columns: 1fr; gap: 1rem; }
  .roptia-comparison__arrow { transform: rotate(90deg); }
  .roptia-service-list > div, .roptia-responsive-notes > div { grid-template-columns: 1fr; gap: 0.35rem; }
  .roptia-connected-grid article { min-height: auto; }
  .roptia-decision-list { margin-left: 0; }
  .roptia-project-nav { grid-template-columns: 1fr; }
  .roptia-project-nav a + a { border-top: 1px solid var(--roptia-rule); border-left: 0; padding-left: 0; text-align: left; }
  .roptia-cta { padding: 3rem 1.5rem; }
  .roptia-case .roptia-hero h1 { font-size: 2.75rem; line-height: 1.1; }
  .roptia-case .roptia-section h2,
  .roptia-case .roptia-cta h2 { font-size: 2.75rem; line-height: 1.1; }
  .roptia-case .roptia-challenge-list h3,
  .roptia-case .roptia-ia-map h3,
  .roptia-case .roptia-decision-list h3,
  .roptia-case .roptia-connected-grid span { font-size: 1.75rem; }
}

/* ============================================================================
   BBX Capital case study — scoped redesign-story extension
   ============================================================================ */

.bbx-case { --bbx-rule: rgba(244, 240, 234, 0.16); --bbx-blue: #b9c8f0; --bbx-blue-strong: #536eaf; --bbx-paper: #edf0f4; --bbx-ink: #17213a; }
.bbx-hero { padding: clamp(4rem, 10vw, 9rem) 0 0; }
.bbx-hero .back-link { margin-bottom: clamp(3.5rem, 8vw, 8rem); }
.bbx-hero__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(20rem, 1.1fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); max-width: none; }
.bbx-hero__copy { min-width: 0; }
.bbx-project-name { margin: 0 0 1rem; font-family: var(--display); font-size: clamp(1.5rem, 2.4vw, 2.4rem); font-weight: 500; letter-spacing: -0.03em; }
.bbx-hero h1 { max-width: 14ch; margin: 0; font-family: var(--display); font-size: clamp(3rem, 7vw, 7.25rem); font-weight: 500; letter-spacing: -0.055em; line-height: 0.98; }
.bbx-hero__summary { max-width: 49rem; margin: clamp(1.5rem, 3vw, 2.5rem) 0 0; color: var(--muted); font-size: clamp(1.1rem, 1.7vw, 1.35rem); line-height: 1.5; }
.bbx-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; margin-top: 2.25rem; color: var(--faint); font-size: 0.78rem; }
.bbx-button { display: inline-flex; align-items: center; gap: 0.75rem; width: fit-content; border: 1px solid var(--accent); border-radius: 999px; padding: 0.85rem 1.1rem; background: var(--accent); color: #17120e; font-size: 0.78rem; letter-spacing: 0.06em; text-decoration: none; text-transform: uppercase; }
.bbx-button:hover { border-color: var(--text); background: var(--text); }
.bbx-button--light { border-color: var(--bbx-paper); background: var(--bbx-paper); color: var(--bbx-ink); }
.bbx-media { margin: 0; }
.bbx-media img { display: block; width: 100%; height: auto; }
.bbx-media--hero { min-width: 0; border: 1px solid var(--bbx-rule); background: var(--bbx-paper); }
.bbx-media__viewport { position: relative; aspect-ratio: 1.35 / 1; overflow: hidden; }
.bbx-media__viewport img { width: 100%; height: 100%; object-fit: cover; object-position: center 44%; }
.bbx-media--archive img { object-fit: contain; }
.bbx-media figcaption { padding: 0.85rem 1rem 1rem; background: var(--surface); color: var(--faint); font-size: 0.72rem; line-height: 1.55; }
.bbx-media figcaption a, .bbx-prose a { color: var(--text); text-decoration-color: var(--accent); text-underline-offset: 0.2em; }
.bbx-section { border-top: 1px solid var(--bbx-rule); padding: clamp(5rem, 10vw, 10rem) 0; }
.bbx-overview { padding-block: clamp(3.5rem, 6vw, 6rem); }
.bbx-section__grid { display: grid; grid-template-columns: minmax(14rem, 0.42fr) minmax(0, 1fr); gap: clamp(3rem, 7vw, 8rem); max-width: none; padding-inline: clamp(1rem, 2vw, 2rem); }
.bbx-section__intro { max-width: 58rem; }
.bbx-section__intro,
.bbx-architecture__map,
.bbx-comparison { padding-inline: clamp(1rem, 2vw, 2rem); }
.bbx-section__label { margin: 0 0 1.5rem; color: var(--accent); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.bbx-section h2 { max-width: 17ch; margin: 0; font-family: var(--display); font-size: clamp(2.45rem, 5vw, 5.4rem); font-weight: 500; letter-spacing: -0.04em; line-height: 0.98; }
.bbx-section__lede { max-width: 43rem; margin: 2rem 0 0; color: var(--muted); font-size: clamp(1.05rem, 1.5vw, 1.25rem); }
.bbx-prose { max-width: 52rem; }
.bbx-prose > p { margin: 0; color: var(--muted); font-size: clamp(1.05rem, 1.4vw, 1.2rem); }
.bbx-prose > p + p { margin-top: 1.25rem; }
.bbx-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; margin: clamp(2.5rem, 5vw, 4rem) 0 0; }
.bbx-facts div { border-top: 1px solid var(--bbx-rule); padding-top: 0.8rem; }
.bbx-facts dt { margin-bottom: 0.25rem; color: var(--faint); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; }
.bbx-facts dd { margin: 0; color: var(--text); font-size: 0.9rem; }
.bbx-original, .bbx-visual { background: var(--surface); }
.bbx-media--archive { max-width: 88rem; margin: clamp(3.5rem, 7vw, 7rem) auto 0; border: 1px solid var(--bbx-rule); background: var(--bbx-paper); }
.bbx-media--archive figcaption strong { color: var(--text); }
.bbx-challenge-list { margin-top: clamp(2.5rem, 5vw, 4rem); }
.bbx-challenge-list > div { display: grid; grid-template-columns: 2.5rem minmax(10rem, 0.7fr) minmax(0, 1fr); gap: 1rem; align-items: start; border-top: 1px solid var(--bbx-rule); padding: 1rem 0; }
.bbx-challenge-list span { color: var(--accent); font-size: 0.7rem; letter-spacing: 0.1em; }
.bbx-challenge-list h3 { margin: 0; color: var(--text); font-family: var(--display); font-size: 1.5rem; font-weight: 500; line-height: 1; }
.bbx-challenge-list p { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.55; }
.bbx-evidence-note { max-width: 48rem; margin: 1.5rem 0 0 !important; color: var(--faint) !important; font-size: 0.82rem !important; line-height: 1.55; }
.bbx-architecture__map { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: clamp(3.5rem, 7vw, 7rem) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--bbx-rule); border-bottom: 1px solid var(--bbx-rule); }
.bbx-architecture__map li { min-height: 17rem; padding: 1.5rem 1.5rem 2rem 0; }
.bbx-architecture__map li + li { border-left: 1px solid var(--bbx-rule); padding-left: 1.5rem; }
.bbx-architecture__map span, .bbx-visual-principles span, .bbx-decision-list > li > span { color: var(--accent); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; }
.bbx-architecture__map h3, .bbx-visual-principles h3 { margin: 3rem 0 0.75rem; color: var(--text); font-family: var(--display); font-size: clamp(1.5rem, 2.3vw, 2.5rem); font-weight: 500; line-height: 1; }
.bbx-architecture__map p, .bbx-visual-principles p { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.55; }
.bbx-comparison { display: grid; grid-template-columns: minmax(0, 1fr) 3rem minmax(0, 1fr); gap: clamp(1rem, 3vw, 3rem); align-items: center; margin-top: clamp(3.5rem, 7vw, 7rem); }
.bbx-comparison__item { min-width: 0; margin: 0; }
.bbx-comparison__item img { display: block; width: 100%; height: auto; border: 1px solid var(--bbx-rule); background: var(--bbx-paper); }
.bbx-comparison__tag { margin: 0 0 0.8rem; color: var(--bbx-blue); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.bbx-comparison__item figcaption { padding-top: 0.8rem; color: var(--faint); font-size: 0.78rem; }
.bbx-comparison__arrow { color: var(--accent); font-family: var(--display); font-size: 2rem; text-align: center; }
.bbx-visual-principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: clamp(3.5rem, 7vw, 7rem); background: var(--bbx-rule); }
.bbx-visual-principles > div { min-height: 17rem; padding: 1.5rem; background: var(--surface); }
.bbx-visual-principles h3 { margin-top: 3rem; }
.bbx-responsive-notes { margin-top: 2.5rem; }
.bbx-responsive-notes > div { display: grid; grid-template-columns: minmax(10rem, 0.7fr) minmax(0, 1fr); gap: 1.5rem; border-top: 1px solid var(--bbx-rule); padding: 1rem 0; }
.bbx-responsive-notes span { color: var(--text); }
.bbx-responsive-notes p { margin: 0; color: var(--faint); font-size: 0.92rem; }
.bbx-decision-list { max-width: 64rem; margin: clamp(3rem, 7vw, 7rem) 0 0 auto; padding: 0; list-style: none; }
.bbx-decision-list li { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: 1.5rem; border-top: 1px solid var(--bbx-rule); padding: 1.5rem 0 1.75rem; }
.bbx-decision-list h3 { margin: 0 0 0.5rem; color: var(--text); font-family: var(--display); font-size: clamp(1.5rem, 2.4vw, 2.5rem); font-weight: 500; line-height: 1; }
.bbx-decision-list p { max-width: 42rem; margin: 0; color: var(--muted); }
.bbx-takeaway { background: var(--bbx-paper); color: var(--bbx-ink); }
.bbx-takeaway__inner {
  display: grid;
  grid-template-columns: minmax(16rem, 0.9fr) minmax(0, 1fr);
  column-gap: clamp(3rem, 8vw, 10rem);
  max-width: none;
  padding-inline: clamp(1rem, 2vw, 2rem);
}
.bbx-takeaway__inner > .bbx-section__label { grid-column: 1 / -1; }
.bbx-takeaway .bbx-section__label { color: #9e612e; }
.bbx-takeaway h2 { max-width: 16ch; color: var(--bbx-ink); }
.bbx-takeaway p:last-child { align-self: end; max-width: 46rem; margin: 0; color: #536176; font-size: 1.1rem; }
.bbx-project-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--bbx-rule); }
.bbx-project-nav a { display: grid; gap: 0.6rem; padding: 2rem 0 2.5rem; color: var(--text); text-decoration: none; }
.bbx-project-nav a + a { border-left: 1px solid var(--bbx-rule); padding-left: clamp(1.5rem, 5vw, 5rem); text-align: right; }
.bbx-project-nav span { color: var(--faint); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; }
.bbx-project-nav strong { font-family: var(--display); font-size: clamp(1.7rem, 3vw, 3rem); font-weight: 500; }
.bbx-project-nav a:hover strong, .bbx-work-link:hover { color: var(--accent); }
.bbx-work-link { display: block; border-top: 1px solid var(--bbx-rule); padding: 1.25rem 0; color: var(--muted); font-size: 0.78rem; letter-spacing: 0.08em; text-decoration: none; text-transform: uppercase; }
.bbx-cta { margin-top: clamp(5rem, 10vw, 10rem); padding: clamp(3rem, 7vw, 7rem); background: var(--bbx-blue-strong); color: var(--bbx-paper); }
.bbx-cta .bbx-section__label { color: #f1c486; }
.bbx-cta h2 { max-width: 15ch; margin: 0; color: var(--bbx-paper); }
.bbx-cta > p:not(.bbx-section__label) { max-width: 32rem; margin: 1.5rem 0 2rem; color: rgba(237, 240, 244, 0.82); font-size: 1.1rem; }

@media (max-width: 63.99rem) {
  .bbx-architecture__map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bbx-architecture__map li:nth-child(3), .bbx-architecture__map li:nth-child(4) { border-top: 1px solid var(--bbx-rule); }
  .bbx-architecture__map li:nth-child(3) { border-left: 0; padding-left: 0; }
  .bbx-architecture__map li:nth-child(4) { padding-left: 1.5rem; }
  .bbx-takeaway__inner { grid-template-columns: 1fr; row-gap: 2rem; }
  .bbx-takeaway__inner > .bbx-section__label { grid-column: auto; }
  .bbx-takeaway p:last-child { margin-top: 0; }
}
@media (max-width: 47.99rem) {
  .bbx-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
  .bbx-media__viewport { aspect-ratio: 1.35 / 1; }
  .bbx-hero h1 { max-width: 11ch; }
  .bbx-hero__actions { align-items: flex-start; flex-direction: column; }
  .bbx-section__grid { grid-template-columns: 1fr; gap: 2rem; }
  .bbx-section h2 { max-width: 12ch; }
  .bbx-facts { grid-template-columns: 1fr; }
  .bbx-challenge-list > div { grid-template-columns: 2rem 1fr; gap: 0.75rem; }
  .bbx-challenge-list p { grid-column: 2; }
  .bbx-architecture__map, .bbx-visual-principles { grid-template-columns: 1fr; }
  .bbx-architecture__map li { min-height: auto; padding: 1.5rem 0 2rem; }
  .bbx-architecture__map li + li, .bbx-architecture__map li:nth-child(3), .bbx-architecture__map li:nth-child(4) { border-top: 1px solid var(--bbx-rule); border-left: 0; padding-left: 0; }
  .bbx-architecture__map h3 { margin-top: 2.5rem; }
  .bbx-comparison { grid-template-columns: 1fr; gap: 1rem; }
  .bbx-comparison__arrow { transform: rotate(90deg); }
  .bbx-visual-principles > div { min-height: auto; }
  .bbx-visual-principles h3 { margin-top: 2.5rem; }
  .bbx-responsive-notes > div { grid-template-columns: 1fr; gap: 0.35rem; }
  .bbx-decision-list { margin-left: 0; }
  .bbx-project-nav { grid-template-columns: 1fr; }
  .bbx-project-nav a + a { border-top: 1px solid var(--bbx-rule); border-left: 0; padding-left: 0; text-align: left; }
  .bbx-cta { padding: 3rem 1.5rem; }
}

/* Stronghill Capital case study: commercial-lending redesign narrative. */
.stronghill-case { --stronghill-rule: rgba(244, 240, 234, 0.16); --stronghill-blue: #9eb8d9; --stronghill-paper: #e9eef1; --stronghill-ink: #172535; }
.stronghill-hero { padding: clamp(4rem, 10vw, 9rem) 0 0; }
.stronghill-hero .back-link { margin-bottom: clamp(3.5rem, 8vw, 8rem); }
.stronghill-hero__grid { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(20rem, 1.08fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.stronghill-hero__copy, .stronghill-media--hero { min-width: 0; }
.stronghill-project-name { margin: 0 0 1rem; font-family: var(--display); font-size: clamp(1.5rem, 2.4vw, 2.4rem); font-weight: 500; letter-spacing: -0.03em; }
.stronghill-hero h1 { max-width: 14ch; margin: 0; font-family: var(--display); font-size: clamp(3rem, 7vw, 7.25rem); font-weight: 500; letter-spacing: -0.055em; line-height: 0.98; }
.stronghill-hero__summary { max-width: 49rem; margin: clamp(1.5rem, 3vw, 2.5rem) 0 0; color: var(--muted); font-size: clamp(1.1rem, 1.7vw, 1.35rem); line-height: 1.5; }
.stronghill-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; margin-top: 2.25rem; color: var(--faint); font-size: 0.78rem; }
.stronghill-button { display: inline-flex; align-items: center; gap: 0.75rem; width: fit-content; border: 1px solid var(--accent); border-radius: 999px; padding: 0.85rem 1.1rem; background: var(--accent); color: #17120e; font-size: 0.78rem; letter-spacing: 0.06em; text-decoration: none; }
.stronghill-button:hover { border-color: var(--text); background: var(--text); }
.stronghill-button--light { border-color: var(--stronghill-paper); background: var(--stronghill-paper); color: var(--stronghill-ink); }
.stronghill-media { margin: 0; }
.stronghill-media img { display: block; width: 100%; height: auto; }
.stronghill-media--hero { border: 1px solid var(--stronghill-rule); background: var(--stronghill-paper); }
.stronghill-media__viewport { position: relative; aspect-ratio: 1.35 / 1; overflow: hidden; background: var(--stronghill-paper); }
.stronghill-media__viewport img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.stronghill-media--hero img, .stronghill-media--archive img { object-fit: contain; }
.stronghill-media figcaption { padding: 0.85rem 1rem 1rem; background: var(--surface); color: var(--faint); font-size: 0.72rem; line-height: 1.55; }
.stronghill-media figcaption a, .stronghill-prose a { color: var(--text); text-decoration-color: var(--accent); text-underline-offset: 0.2em; }
.stronghill-section { border-top: 1px solid var(--stronghill-rule); padding: clamp(5rem, 10vw, 10rem) 0; }
.stronghill-overview { padding-block: clamp(3.5rem, 6vw, 6rem); }
.stronghill-section__grid { display: grid; grid-template-columns: minmax(14rem, 0.42fr) minmax(0, 1fr); gap: clamp(3rem, 7vw, 8rem); max-width: none; padding-inline: clamp(1rem, 2vw, 2rem); }
.stronghill-section__intro { max-width: 58rem; }
.stronghill-section__intro,
.stronghill-path-map,
.stronghill-comparison { padding-inline: clamp(1rem, 2vw, 2rem); }
.stronghill-section__label { margin: 0 0 1.5rem; color: var(--accent); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.stronghill-section h2 { max-width: 17ch; margin: 0; font-family: var(--display); font-size: clamp(2.45rem, 5vw, 5.4rem); font-weight: 500; letter-spacing: -0.04em; line-height: 0.98; }
.stronghill-section__lede { max-width: 43rem; margin: 2rem 0 0; color: var(--muted); font-size: clamp(1.05rem, 1.5vw, 1.25rem); }
.stronghill-prose { max-width: 52rem; }
.stronghill-prose > p { margin: 0; color: var(--muted); font-size: clamp(1.05rem, 1.4vw, 1.2rem); }
.stronghill-prose > p + p { margin-top: 1.25rem; }
.stronghill-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; margin: clamp(2.5rem, 5vw, 4rem) 0 0; }
.stronghill-facts div { border-top: 1px solid var(--stronghill-rule); padding-top: 0.8rem; }
.stronghill-facts dt { margin-bottom: 0.25rem; color: var(--faint); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; }
.stronghill-facts dd { margin: 0; color: var(--text); font-size: 0.9rem; }
.stronghill-original, .stronghill-visual { background: var(--surface); }
.stronghill-media--archive { max-width: 88rem; margin: clamp(3.5rem, 7vw, 7rem) auto 0; border: 1px solid var(--stronghill-rule); background: var(--stronghill-paper); }
.stronghill-media figcaption strong { color: var(--text); }
.stronghill-challenge-list { margin-top: clamp(2.5rem, 5vw, 4rem); }
.stronghill-challenge-list > div { display: grid; grid-template-columns: 2.5rem minmax(10rem, 0.7fr) minmax(0, 1fr); gap: 1rem; align-items: start; border-top: 1px solid var(--stronghill-rule); padding: 1rem 0; }
.stronghill-challenge-list span, .stronghill-path-map span, .stronghill-visual-principles span, .stronghill-hierarchy-notes span, .stronghill-responsive-notes span { color: var(--accent); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; }
.stronghill-challenge-list h3, .stronghill-visual-principles h3 { margin: 0; color: var(--text); font-family: var(--display); font-size: 1.5rem; font-weight: 500; line-height: 1; }
.stronghill-challenge-list p, .stronghill-visual-principles p { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.55; }
.stronghill-path-map { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: clamp(3.5rem, 7vw, 7rem) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--stronghill-rule); border-bottom: 1px solid var(--stronghill-rule); }
.stronghill-path-map li { min-height: 17rem; padding: 1rem 1.5rem 2rem 0; }
.stronghill-path-map li + li { border-left: 1px solid var(--stronghill-rule); padding-left: 1.5rem; }
.stronghill-path-map h3 { margin: 4rem 0 0.75rem; color: var(--text); font-family: var(--display); font-size: clamp(1.5rem, 2.3vw, 2.5rem); font-weight: 500; line-height: 1; }
.stronghill-path-map p, .stronghill-hierarchy-notes p, .stronghill-responsive-notes p { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.55; }
.stronghill-hierarchy-notes, .stronghill-responsive-notes { margin-top: clamp(2.5rem, 5vw, 4rem); }
.stronghill-hierarchy-notes > div, .stronghill-responsive-notes > div { display: grid; grid-template-columns: minmax(10rem, 0.7fr) minmax(0, 1fr); gap: 1.5rem; border-top: 1px solid var(--stronghill-rule); padding: 1rem 0; }
.stronghill-comparison { display: grid; grid-template-columns: minmax(0, 1fr) 3rem minmax(0, 1fr); gap: clamp(1rem, 3vw, 3rem); align-items: center; margin-top: clamp(3.5rem, 7vw, 7rem); }
.stronghill-comparison__item { min-width: 0; margin: 0; }
.stronghill-comparison__item img { display: block; width: 100%; height: auto; border: 1px solid var(--stronghill-rule); background: var(--stronghill-paper); }
.stronghill-comparison__tag { margin-bottom: 0.8rem; color: var(--stronghill-blue); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.stronghill-comparison__item figcaption { padding-top: 0.8rem; color: var(--faint); font-size: 0.78rem; }
.stronghill-comparison__arrow { color: var(--accent); font-family: var(--display); font-size: 2rem; text-align: center; }
.stronghill-evidence-note { max-width: 48rem; margin: 1.5rem 0 0 !important; color: var(--faint) !important; font-size: 0.82rem !important; line-height: 1.55; }
.stronghill-visual-principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: clamp(3.5rem, 7vw, 7rem); background: var(--stronghill-rule); }
.stronghill-visual-principles > div { min-height: 16rem; padding: 1.5rem; background: var(--surface); }
.stronghill-visual-principles h3 { margin-top: 3.5rem; }
.stronghill-decision-list { max-width: 64rem; margin: clamp(3rem, 7vw, 7rem) 0 0 auto; padding: 0; list-style: none; }
.stronghill-decision-list li { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: 1.5rem; border-top: 1px solid var(--stronghill-rule); padding: 1.5rem 0 1.75rem; }
.stronghill-decision-list li > span { color: var(--accent); font-size: 0.7rem; letter-spacing: 0.1em; }
.stronghill-decision-list h3 { margin: 0 0 0.5rem; color: var(--text); font-family: var(--display); font-size: clamp(1.5rem, 2.4vw, 2.5rem); font-weight: 500; line-height: 1; }
.stronghill-decision-list p { max-width: 40rem; margin: 0; color: var(--muted); }
.stronghill-takeaway { background: var(--stronghill-paper); color: var(--stronghill-ink); }
.stronghill-takeaway__inner {
  display: grid;
  grid-template-columns: minmax(16rem, 0.9fr) minmax(0, 1fr);
  column-gap: clamp(3rem, 8vw, 10rem);
  max-width: none;
  padding-inline: clamp(1rem, 2vw, 2rem);
}
.stronghill-takeaway__inner > .stronghill-section__label { grid-column: 1 / -1; }
.stronghill-takeaway .stronghill-section__label { color: #9e612e; }
.stronghill-takeaway h2 { max-width: 16ch; color: var(--stronghill-ink); }
.stronghill-takeaway p:last-child { align-self: end; max-width: 46rem; margin: 0; color: #536176; font-size: 1.1rem; }
.stronghill-project-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--stronghill-rule); }
.stronghill-project-nav a { display: grid; gap: 0.6rem; padding: 2rem 0 2.5rem; color: var(--text); text-decoration: none; }
.stronghill-project-nav a + a { border-left: 1px solid var(--stronghill-rule); padding-left: clamp(1.5rem, 5vw, 5rem); text-align: right; }
.stronghill-project-nav span { color: var(--faint); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; }
.stronghill-project-nav strong { font-family: var(--display); font-size: clamp(1.7rem, 3vw, 3rem); font-weight: 500; }
.stronghill-project-nav a:hover strong, .stronghill-work-link:hover { color: var(--accent); }
.stronghill-work-link { display: block; border-top: 1px solid var(--stronghill-rule); padding: 1.25rem 0; color: var(--muted); font-size: 0.78rem; letter-spacing: 0.08em; text-decoration: none; text-transform: uppercase; }
.stronghill-cta { margin-top: clamp(5rem, 10vw, 10rem); padding: clamp(3rem, 7vw, 7rem); background: #21374d; color: var(--stronghill-paper); }
.stronghill-cta .stronghill-section__label { color: #f1c486; }
.stronghill-cta h2 { max-width: 15ch; margin: 0; color: var(--stronghill-paper); font-family: var(--display); font-size: clamp(2.45rem, 5vw, 5.4rem); font-weight: 500; letter-spacing: -0.04em; line-height: 0.98; }
.stronghill-cta > p:not(.stronghill-section__label) { max-width: 32rem; margin: 1.5rem 0 2rem; color: rgba(237, 240, 244, 0.82); font-size: 1.1rem; }

@media (max-width: 63.99rem) {
  .stronghill-path-map, .stronghill-visual-principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stronghill-path-map li:nth-child(3), .stronghill-path-map li:nth-child(4) { border-top: 1px solid var(--stronghill-rule); }
  .stronghill-path-map li:nth-child(3) { border-left: 0; padding-left: 0; }
  .stronghill-path-map li:nth-child(4) { padding-left: 1.5rem; }
  .stronghill-takeaway__inner { grid-template-columns: 1fr; row-gap: 2rem; }
  .stronghill-takeaway__inner > .stronghill-section__label { grid-column: auto; }
  .stronghill-takeaway p:last-child { margin-top: 0; }
}
@media (max-width: 47.99rem) {
  .stronghill-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
  .stronghill-hero h1 { max-width: 11ch; }
  .stronghill-hero__actions { align-items: flex-start; flex-direction: column; }
  .stronghill-section__grid { grid-template-columns: 1fr; gap: 2rem; }
  .stronghill-section h2 { max-width: 12ch; }
  .stronghill-facts { grid-template-columns: 1fr; }
  .stronghill-challenge-list > div { grid-template-columns: 2rem 1fr; gap: 0.75rem; }
  .stronghill-challenge-list p { grid-column: 2; }
  .stronghill-path-map, .stronghill-visual-principles { grid-template-columns: 1fr; }
  .stronghill-path-map li { min-height: auto; padding: 1.5rem 0 2rem; }
  .stronghill-path-map li + li, .stronghill-path-map li:nth-child(3), .stronghill-path-map li:nth-child(4) { border-top: 1px solid var(--stronghill-rule); border-left: 0; padding-left: 0; }
  .stronghill-path-map h3 { margin-top: 2.5rem; }
  .stronghill-comparison { grid-template-columns: 1fr; gap: 1rem; }
  .stronghill-comparison__arrow { transform: rotate(90deg); }
  .stronghill-visual-principles > div { min-height: auto; }
  .stronghill-visual-principles h3 { margin-top: 2.5rem; }
  .stronghill-hierarchy-notes > div, .stronghill-responsive-notes > div { grid-template-columns: 1fr; gap: 0.35rem; }
  .stronghill-decision-list { margin-left: 0; }
  .stronghill-project-nav { grid-template-columns: 1fr; }
  .stronghill-project-nav a + a { border-top: 1px solid var(--stronghill-rule); border-left: 0; padding-left: 0; text-align: left; }
  .stronghill-cta { padding: 3rem 1.5rem; }
}

/* Hoffman's Chocolates case study: warmer e-commerce redesign narrative. */
.hoffmans-case { --hoffmans-rule: rgba(244, 240, 234, 0.16); --hoffmans-blue: #8ed5e7; --hoffmans-paper: #f1ece5; --hoffmans-ink: #3a2118; }
.hoffmans-hero { padding: clamp(4rem, 10vw, 9rem) 0 0; }
.hoffmans-hero .back-link { margin-bottom: clamp(3.5rem, 8vw, 8rem); }
.hoffmans-hero__grid { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(20rem, 1.08fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.hoffmans-hero__copy, .hoffmans-media--hero { min-width: 0; }
.hoffmans-project-name { margin: 0 0 1rem; font-family: var(--display); font-size: clamp(1.5rem, 2.4vw, 2.4rem); font-weight: 500; letter-spacing: -0.03em; }
.hoffmans-hero h1 { max-width: 14ch; margin: 0; font-family: var(--display); font-size: clamp(3rem, 7vw, 7.25rem); font-weight: 500; letter-spacing: -0.055em; line-height: 0.98; }
.hoffmans-hero__summary { max-width: 49rem; margin: clamp(1.5rem, 3vw, 2.5rem) 0 0; color: var(--muted); font-size: clamp(1.1rem, 1.7vw, 1.35rem); line-height: 1.5; }
.hoffmans-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; margin-top: 2.25rem; color: var(--faint); font-size: 0.78rem; }
.hoffmans-button { display: inline-flex; align-items: center; gap: 0.75rem; width: fit-content; border: 1px solid var(--accent); border-radius: 999px; padding: 0.85rem 1.1rem; background: var(--accent); color: #17120e; font-size: 0.78rem; letter-spacing: 0.06em; text-decoration: none; }
.hoffmans-button:hover { border-color: var(--text); background: var(--text); }
.hoffmans-button--light { border-color: var(--hoffmans-paper); background: var(--hoffmans-paper); color: var(--hoffmans-ink); }
.hoffmans-media { margin: 0; }
.hoffmans-media img { display: block; width: 100%; height: auto; }
.hoffmans-media--hero { border: 1px solid var(--hoffmans-rule); background: var(--hoffmans-paper); }
.hoffmans-media__viewport { position: relative; aspect-ratio: 1.35 / 1; overflow: hidden; background: var(--hoffmans-paper); }
.hoffmans-media__viewport img { width: 100%; height: 100%; object-fit: cover; object-position: center 34%; }
.hoffmans-media--hero img, .hoffmans-media--archive img { object-fit: contain; }
.hoffmans-media figcaption { padding: 0.85rem 1rem 1rem; background: var(--surface); color: var(--faint); font-size: 0.72rem; line-height: 1.55; }
.hoffmans-media figcaption a, .hoffmans-prose a { color: var(--text); text-decoration-color: var(--accent); text-underline-offset: 0.2em; }
.hoffmans-section { border-top: 1px solid var(--hoffmans-rule); padding: clamp(5rem, 10vw, 10rem) 0; }
.hoffmans-overview { padding-block: clamp(3.5rem, 6vw, 6rem); }
.hoffmans-section__grid { display: grid; grid-template-columns: minmax(14rem, 0.42fr) minmax(0, 1fr); gap: clamp(3rem, 7vw, 8rem); max-width: none; padding-inline: clamp(1rem, 2vw, 2rem); }
.hoffmans-section__intro { max-width: 58rem; }
.hoffmans-section__intro,
.hoffmans-path-map,
.hoffmans-comparison { padding-inline: clamp(1rem, 2vw, 2rem); }
.hoffmans-section__label { margin: 0 0 1.5rem; color: var(--accent); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.hoffmans-section h2 { max-width: 17ch; margin: 0; font-family: var(--display); font-size: clamp(2.45rem, 5vw, 5.4rem); font-weight: 500; letter-spacing: -0.04em; line-height: 0.98; }
.hoffmans-section__lede { max-width: 43rem; margin: 2rem 0 0; color: var(--muted); font-size: clamp(1.05rem, 1.5vw, 1.25rem); }
.hoffmans-prose { max-width: 52rem; }
.hoffmans-prose > p { margin: 0; color: var(--muted); font-size: clamp(1.05rem, 1.4vw, 1.2rem); }
.hoffmans-prose > p + p { margin-top: 1.25rem; }
.hoffmans-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; margin: clamp(2.5rem, 5vw, 4rem) 0 0; }
.hoffmans-facts div { border-top: 1px solid var(--hoffmans-rule); padding-top: 0.8rem; }
.hoffmans-facts dt { margin-bottom: 0.25rem; color: var(--faint); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; }
.hoffmans-facts dd { margin: 0; color: var(--text); font-size: 0.9rem; }
.hoffmans-original, .hoffmans-visual { background: var(--surface); }
.hoffmans-media--archive { max-width: 88rem; margin: clamp(3.5rem, 7vw, 7rem) auto 0; border: 1px solid var(--hoffmans-rule); background: var(--hoffmans-paper); }
.hoffmans-media figcaption strong { color: var(--text); }
.hoffmans-challenge-list { margin-top: clamp(2.5rem, 5vw, 4rem); }
.hoffmans-challenge-list > div { display: grid; grid-template-columns: 2.5rem minmax(10rem, 0.7fr) minmax(0, 1fr); gap: 1rem; align-items: start; border-top: 1px solid var(--hoffmans-rule); padding: 1rem 0; }
.hoffmans-challenge-list span, .hoffmans-path-map span, .hoffmans-visual-principles span, .hoffmans-responsive-notes span { color: var(--accent); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; }
.hoffmans-challenge-list h3, .hoffmans-visual-principles h3 { margin: 0; color: var(--text); font-family: var(--display); font-size: 1.5rem; font-weight: 500; line-height: 1; }
.hoffmans-challenge-list p, .hoffmans-visual-principles p { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.55; }
.hoffmans-path-map { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: clamp(3.5rem, 7vw, 7rem) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--hoffmans-rule); border-bottom: 1px solid var(--hoffmans-rule); }
.hoffmans-path-map li { min-height: 17rem; padding: 1rem 1.5rem 2rem 0; }
.hoffmans-path-map li + li { border-left: 1px solid var(--hoffmans-rule); padding-left: 1.5rem; }
.hoffmans-path-map h3 { margin: 4rem 0 0.75rem; color: var(--text); font-family: var(--display); font-size: clamp(1.5rem, 2.3vw, 2.5rem); font-weight: 500; line-height: 1; }
.hoffmans-path-map p { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.55; }
.hoffmans-comparison { display: grid; grid-template-columns: minmax(0, 1fr) 3rem minmax(0, 1fr); gap: clamp(1rem, 3vw, 3rem); align-items: center; margin-top: clamp(3.5rem, 7vw, 7rem); }
.hoffmans-comparison__item { min-width: 0; margin: 0; }
.hoffmans-comparison__item img { display: block; width: 100%; height: auto; border: 1px solid var(--hoffmans-rule); background: var(--hoffmans-paper); }
.hoffmans-comparison__tag { margin: 0 0 0.8rem; color: var(--hoffmans-blue); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.hoffmans-comparison__item figcaption { padding-top: 0.8rem; color: var(--faint); font-size: 0.78rem; }
.hoffmans-comparison__arrow { color: var(--accent); font-family: var(--display); font-size: 2rem; text-align: center; }
.hoffmans-evidence-note { max-width: 48rem; margin: 1.5rem 0 0 !important; color: var(--faint) !important; font-size: 0.82rem !important; line-height: 1.55; }
.hoffmans-discovery-grid, .hoffmans-visual-principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: clamp(3.5rem, 7vw, 7rem); background: var(--hoffmans-rule); }
.hoffmans-discovery-grid > div, .hoffmans-visual-principles > div { min-height: 16rem; padding: 1.5rem; background: var(--surface); }
.hoffmans-discovery-grid h3, .hoffmans-visual-principles h3 { margin: 3.5rem 0 0.75rem; color: var(--text); font-family: var(--display); font-size: 1.7rem; font-weight: 500; line-height: 1; }
.hoffmans-discovery-grid p, .hoffmans-visual-principles p { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.55; }
.hoffmans-responsive-notes { margin-top: clamp(2.5rem, 5vw, 4rem); }
.hoffmans-responsive-notes > div { display: grid; grid-template-columns: minmax(10rem, 0.7fr) minmax(0, 1fr); gap: 1.5rem; border-top: 1px solid var(--hoffmans-rule); padding: 1rem 0; }
.hoffmans-responsive-notes p { margin: 0; color: var(--faint); font-size: 0.92rem; }
.hoffmans-decision-list { max-width: 64rem; margin: clamp(3rem, 7vw, 7rem) 0 0 auto; padding: 0; list-style: none; }
.hoffmans-decision-list li { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: 1.5rem; border-top: 1px solid var(--hoffmans-rule); padding: 1.5rem 0 1.75rem; }
.hoffmans-decision-list li > span { color: var(--accent); font-size: 0.7rem; letter-spacing: 0.1em; }
.hoffmans-decision-list h3 { margin: 0 0 0.5rem; color: var(--text); font-family: var(--display); font-size: clamp(1.5rem, 2.4vw, 2.5rem); font-weight: 500; line-height: 1; }
.hoffmans-decision-list p { max-width: 42rem; margin: 0; color: var(--muted); }
.hoffmans-takeaway { background: var(--hoffmans-paper); color: var(--hoffmans-ink); }
.hoffmans-takeaway__inner {
  display: grid;
  grid-template-columns: minmax(16rem, 0.9fr) minmax(0, 1fr);
  column-gap: clamp(3rem, 8vw, 10rem);
  max-width: none;
  padding-inline: clamp(1rem, 2vw, 2rem);
}
.hoffmans-takeaway__inner > .hoffmans-section__label { grid-column: 1 / -1; }
.hoffmans-takeaway .hoffmans-section__label { color: #9e612e; }
.hoffmans-takeaway h2 { max-width: 16ch; color: var(--hoffmans-ink); }
.hoffmans-takeaway p:last-child { align-self: end; max-width: 46rem; margin: 0; color: #6f554a; font-size: 1.1rem; }
.hoffmans-project-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--hoffmans-rule); }
.hoffmans-project-nav a { display: grid; gap: 0.6rem; padding: 2rem 0 2.5rem; color: var(--text); text-decoration: none; }
.hoffmans-project-nav a + a { border-left: 1px solid var(--hoffmans-rule); padding-left: clamp(1.5rem, 5vw, 5rem); text-align: right; }
.hoffmans-project-nav span { color: var(--faint); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; }
.hoffmans-project-nav strong { font-family: var(--display); font-size: clamp(1.7rem, 3vw, 3rem); font-weight: 500; }
.hoffmans-project-nav a:hover strong, .hoffmans-work-link:hover { color: var(--accent); }
.hoffmans-work-link { display: block; border-top: 1px solid var(--hoffmans-rule); padding: 1.25rem 0; color: var(--muted); font-size: 0.78rem; letter-spacing: 0.08em; text-decoration: none; text-transform: uppercase; }
.hoffmans-cta { margin-top: clamp(5rem, 10vw, 10rem); padding: clamp(3rem, 7vw, 7rem); background: #5a2f20; color: var(--hoffmans-paper); }
.hoffmans-cta .hoffmans-section__label { color: #f1c486; }
.hoffmans-cta h2 { max-width: 15ch; margin: 0; color: var(--hoffmans-paper); font-family: var(--display); font-size: clamp(2.45rem, 5vw, 5.4rem); font-weight: 500; letter-spacing: -0.04em; line-height: 0.98; }
.hoffmans-cta > p:not(.hoffmans-section__label) { max-width: 32rem; margin: 1.5rem 0 2rem; color: rgba(241, 236, 229, 0.82); font-size: 1.1rem; }

@media (max-width: 63.99rem) {
  .hoffmans-path-map, .hoffmans-discovery-grid, .hoffmans-visual-principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hoffmans-path-map li:nth-child(3), .hoffmans-path-map li:nth-child(4) { border-top: 1px solid var(--hoffmans-rule); }
  .hoffmans-path-map li:nth-child(3) { border-left: 0; padding-left: 0; }
  .hoffmans-path-map li:nth-child(4) { padding-left: 1.5rem; }
  .hoffmans-takeaway__inner { grid-template-columns: 1fr; row-gap: 2rem; }
  .hoffmans-takeaway__inner > .hoffmans-section__label { grid-column: auto; }
  .hoffmans-takeaway p:last-child { margin-top: 0; }
}
@media (max-width: 47.99rem) {
  .hoffmans-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
  .hoffmans-hero h1 { max-width: 11ch; }
  .hoffmans-hero__actions { align-items: flex-start; flex-direction: column; }
  .hoffmans-section__grid { grid-template-columns: 1fr; gap: 2rem; }
  .hoffmans-section h2 { max-width: 12ch; }
  .hoffmans-facts { grid-template-columns: 1fr; }
  .hoffmans-challenge-list > div { grid-template-columns: 2rem 1fr; gap: 0.75rem; }
  .hoffmans-challenge-list p { grid-column: 2; }
  .hoffmans-path-map, .hoffmans-discovery-grid, .hoffmans-visual-principles { grid-template-columns: 1fr; }
  .hoffmans-path-map li { min-height: auto; padding: 1.5rem 0 2rem; }
  .hoffmans-path-map li + li, .hoffmans-path-map li:nth-child(3), .hoffmans-path-map li:nth-child(4) { border-top: 1px solid var(--hoffmans-rule); border-left: 0; padding-left: 0; }
  .hoffmans-path-map h3 { margin-top: 2.5rem; }
  .hoffmans-comparison { grid-template-columns: 1fr; gap: 1rem; }
  .hoffmans-comparison__arrow { transform: rotate(90deg); }
  .hoffmans-discovery-grid > div, .hoffmans-visual-principles > div { min-height: auto; }
  .hoffmans-discovery-grid h3, .hoffmans-visual-principles h3 { margin-top: 2.5rem; }
  .hoffmans-responsive-notes > div { grid-template-columns: 1fr; gap: 0.35rem; }
  .hoffmans-decision-list { margin-left: 0; }
  .hoffmans-project-nav { grid-template-columns: 1fr; }
  .hoffmans-project-nav a + a { border-top: 1px solid var(--hoffmans-rule); border-left: 0; padding-left: 0; text-align: left; }
  .hoffmans-cta { padding: 3rem 1.5rem; }
}

/* ============================================================================
   Stretch Zone case study — scoped service-redesign narrative.
   ============================================================================ */

.stretch-case { --stretch-rule: rgba(244, 240, 234, 0.16); --stretch-blue: #86c9e8; --stretch-yellow: #dfd000; --stretch-paper: #eef0ea; --stretch-ink: #0b2b3e; }
.stretch-hero { padding: clamp(4rem, 10vw, 9rem) 0 0; }
.stretch-hero .back-link { margin-bottom: clamp(3.5rem, 8vw, 8rem); }
.stretch-hero__grid { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(20rem, 1.08fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.stretch-hero__copy, .stretch-media--hero { min-width: 0; }
.stretch-project-name { margin: 0 0 0.75rem; font-family: var(--display); font-size: clamp(1.5rem, 2.4vw, 2.4rem); font-weight: 500; letter-spacing: -0.03em; }
.stretch-kicker { margin: 0 0 1rem; color: var(--stretch-blue); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.stretch-hero h1 { max-width: 14ch; margin: 0; font-family: var(--display); font-size: clamp(3rem, 7vw, 7.25rem); font-weight: 500; letter-spacing: -0.055em; line-height: 0.98; }
.stretch-hero__summary { max-width: 49rem; margin: clamp(1.5rem, 3vw, 2.5rem) 0 0; color: var(--muted); font-size: clamp(1.1rem, 1.7vw, 1.35rem); line-height: 1.5; }
.stretch-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; margin-top: 2.25rem; color: var(--faint); font-size: 0.78rem; }
.stretch-button { display: inline-flex; align-items: center; gap: 0.75rem; width: fit-content; border: 1px solid var(--stretch-yellow); border-radius: 999px; padding: 0.85rem 1.1rem; background: var(--stretch-yellow); color: #13232b; font-size: 0.78rem; letter-spacing: 0.06em; text-decoration: none; text-transform: uppercase; }
.stretch-button:hover { border-color: var(--text); background: var(--text); }
.stretch-button--light { border-color: var(--stretch-paper); background: var(--stretch-paper); color: var(--stretch-ink); }
.stretch-media { margin: 0; }
.stretch-media img { display: block; width: 100%; height: auto; }
.stretch-media--hero { border: 1px solid var(--stretch-rule); background: var(--stretch-paper); }
.stretch-media__viewport { position: relative; aspect-ratio: 1.35 / 1; overflow: hidden; background: var(--stretch-paper); }
.stretch-media__viewport img { width: 100%; height: 100%; object-fit: cover; object-position: center 32%; }
.stretch-media--hero img, .stretch-media--archive img { object-fit: contain; }
.stretch-media figcaption { padding: 0.85rem 1rem 1rem; background: var(--surface); color: var(--faint); font-size: 0.72rem; line-height: 1.55; }
.stretch-media figcaption strong { color: var(--text); }
.stretch-media figcaption a, .stretch-prose a { color: var(--text); text-decoration-color: var(--stretch-yellow); text-underline-offset: 0.2em; }
.stretch-section { border-top: 1px solid var(--stretch-rule); padding: clamp(5rem, 10vw, 10rem) 0; }
.stretch-overview { padding-block: clamp(3.5rem, 6vw, 6rem); }
.stretch-section__grid { display: grid; grid-template-columns: minmax(14rem, 0.42fr) minmax(0, 1fr); gap: clamp(3rem, 7vw, 8rem); max-width: none; padding-inline: clamp(1rem, 2vw, 2rem); }
.stretch-section__intro { max-width: 58rem; }
.stretch-section__intro,
.stretch-path-map,
.stretch-comparison,
.stretch-service-notes,
.stretch-location-grid,
.stretch-visual-principles { padding-inline: clamp(1rem, 2vw, 2rem); }
.stretch-section__label { margin: 0 0 1.5rem; color: var(--stretch-blue); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.stretch-section h2 { max-width: 17ch; margin: 0; font-family: var(--display); font-size: clamp(2.45rem, 5vw, 5.4rem); font-weight: 500; letter-spacing: -0.04em; line-height: 0.98; }
.stretch-section__lede { max-width: 43rem; margin: 2rem 0 0; color: var(--muted); font-size: clamp(1.05rem, 1.5vw, 1.25rem); }
.stretch-prose { max-width: 52rem; }
.stretch-prose > p { margin: 0; color: var(--muted); font-size: clamp(1.05rem, 1.4vw, 1.2rem); }
.stretch-prose > p + p { margin-top: 1.25rem; }
.stretch-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; margin: clamp(2.5rem, 5vw, 4rem) 0 0; }
.stretch-facts div { border-top: 1px solid var(--stretch-rule); padding-top: 0.8rem; }
.stretch-facts dt { margin-bottom: 0.25rem; color: var(--faint); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; }
.stretch-facts dd { margin: 0; color: var(--text); font-size: 0.9rem; }
.stretch-original, .stretch-visual { background: var(--surface); }
.stretch-media--archive { max-width: 88rem; margin: clamp(3.5rem, 7vw, 7rem) auto 0; border: 1px solid var(--stretch-rule); background: var(--stretch-paper); }
.stretch-challenge-list { margin-top: clamp(2.5rem, 5vw, 4rem); }
.stretch-challenge-list > div { display: grid; grid-template-columns: 2.5rem minmax(12rem, 0.7fr) minmax(0, 1fr); gap: 1rem; align-items: start; border-top: 1px solid var(--stretch-rule); padding: 1rem 0; }
.stretch-challenge-list span, .stretch-path-map span, .stretch-service-notes span, .stretch-location-grid span, .stretch-visual-principles span, .stretch-responsive-notes span { color: var(--stretch-yellow); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.stretch-challenge-list h3, .stretch-service-notes h3, .stretch-location-grid h3, .stretch-visual-principles h3 { margin: 0; color: var(--text); font-family: var(--display); font-size: 1.5rem; font-weight: 500; line-height: 1; }
.stretch-challenge-list p, .stretch-service-notes p, .stretch-location-grid p, .stretch-visual-principles p { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.55; }
.stretch-path-map { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: clamp(3.5rem, 7vw, 7rem) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--stretch-rule); border-bottom: 1px solid var(--stretch-rule); }
.stretch-path-map li { min-height: 17rem; padding: 1rem 1.5rem 2rem 0; }
.stretch-path-map li + li { border-left: 1px solid var(--stretch-rule); padding-left: 1.5rem; }
.stretch-path-map h3 { margin: 4rem 0 0.75rem; color: var(--text); font-family: var(--display); font-size: clamp(1.5rem, 2.3vw, 2.5rem); font-weight: 500; line-height: 1; }
.stretch-path-map p { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.55; }
.stretch-evidence-note { max-width: 48rem; margin: 1.5rem 0 0 !important; color: var(--faint) !important; font-size: 0.82rem !important; line-height: 1.55; }
.stretch-progression { background: #13232b; }
.stretch-comparison { display: grid; grid-template-columns: minmax(0, 1fr) 3rem minmax(0, 1fr); gap: clamp(1rem, 3vw, 3rem); align-items: center; margin-top: clamp(3.5rem, 7vw, 7rem); }
.stretch-comparison__item { min-width: 0; margin: 0; }
.stretch-comparison__item img { display: block; width: 100%; height: auto; border: 1px solid var(--stretch-rule); background: var(--stretch-paper); }
.stretch-comparison__tag { margin: 0 0 0.8rem; color: var(--stretch-yellow); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.stretch-comparison__item figcaption { padding-top: 0.8rem; color: var(--faint); font-size: 0.78rem; }
.stretch-comparison__arrow { color: var(--stretch-yellow); font-family: var(--display); font-size: 2rem; text-align: center; }
.stretch-service-notes, .stretch-location-grid, .stretch-visual-principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: clamp(3.5rem, 7vw, 7rem); background: var(--stretch-rule); }
.stretch-service-notes > div, .stretch-location-grid > div, .stretch-visual-principles > div { min-height: 16rem; padding: 1.5rem; background: var(--surface); }
.stretch-service-notes h3, .stretch-location-grid h3, .stretch-visual-principles h3 { margin-top: 3.5rem; }
.stretch-responsive-notes { margin-top: 2.5rem; }
.stretch-responsive-notes > div { display: grid; grid-template-columns: minmax(10rem, 0.7fr) minmax(0, 1fr); gap: 1.5rem; border-top: 1px solid var(--stretch-rule); padding: 1rem 0; }
.stretch-responsive-notes p { margin: 0; color: var(--faint); font-size: 0.92rem; }
.stretch-decision-list { max-width: 64rem; margin: clamp(3rem, 7vw, 7rem) 0 0 auto; padding: 0; list-style: none; }
.stretch-decision-list li { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: 1.5rem; border-top: 1px solid var(--stretch-rule); padding: 1.5rem 0 1.75rem; }
.stretch-decision-list li > span { color: var(--stretch-yellow); font-size: 0.7rem; letter-spacing: 0.1em; }
.stretch-decision-list h3 { margin: 0 0 0.5rem; color: var(--text); font-family: var(--display); font-size: clamp(1.5rem, 2.4vw, 2.5rem); font-weight: 500; line-height: 1; }
.stretch-decision-list p { max-width: 42rem; margin: 0; color: var(--muted); }
.stretch-takeaway { background: var(--stretch-paper); color: var(--stretch-ink); }
.stretch-takeaway__inner {
  display: grid;
  grid-template-columns: minmax(16rem, 0.9fr) minmax(0, 1fr);
  column-gap: clamp(3rem, 8vw, 10rem);
  max-width: none;
  padding-inline: clamp(1rem, 2vw, 2rem);
}
.stretch-takeaway__inner > .stretch-section__label { grid-column: 1 / -1; }
.stretch-takeaway .stretch-section__label { color: #9e612e; }
.stretch-takeaway h2 { max-width: 16ch; color: var(--stretch-ink); }
.stretch-takeaway p:last-child { align-self: end; max-width: 46rem; margin: 0; color: #536176; font-size: 1.1rem; }
.stretch-project-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--stretch-rule); }
.stretch-project-nav a { display: grid; gap: 0.6rem; padding: 2rem 0 2.5rem; color: var(--text); text-decoration: none; }
.stretch-project-nav a + a { border-left: 1px solid var(--stretch-rule); padding-left: clamp(1.5rem, 5vw, 5rem); text-align: right; }
.stretch-project-nav span { color: var(--faint); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; }
.stretch-project-nav strong { font-family: var(--display); font-size: clamp(1.7rem, 3vw, 3rem); font-weight: 500; }
.stretch-project-nav a:hover strong, .stretch-work-link:hover { color: var(--stretch-yellow); }
.stretch-work-link { display: block; border-top: 1px solid var(--stretch-rule); padding: 1.25rem 0; color: var(--muted); font-size: 0.78rem; letter-spacing: 0.08em; text-decoration: none; text-transform: uppercase; }
.stretch-cta { margin-top: clamp(5rem, 10vw, 10rem); padding: clamp(3rem, 7vw, 7rem); background: var(--stretch-blue); color: var(--stretch-ink); }
.stretch-cta .stretch-section__label { color: var(--stretch-ink); }
.stretch-cta h2 { max-width: 15ch; margin: 0; color: var(--stretch-ink); font-family: var(--display); font-size: clamp(2.45rem, 5vw, 5.4rem); font-weight: 500; letter-spacing: -0.04em; line-height: 0.98; }
.stretch-cta > p:not(.stretch-section__label) { max-width: 32rem; margin: 1.5rem 0 2rem; color: rgba(11, 43, 62, 0.78); font-size: 1.1rem; }

@media (max-width: 63.99rem) {
  .stretch-path-map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stretch-path-map li:nth-child(3), .stretch-path-map li:nth-child(4) { border-top: 1px solid var(--stretch-rule); }
  .stretch-path-map li:nth-child(3) { border-left: 0; padding-left: 0; }
  .stretch-path-map li:nth-child(4) { padding-left: 1.5rem; }
  .stretch-takeaway__inner { grid-template-columns: 1fr; row-gap: 2rem; }
  .stretch-takeaway__inner > .stretch-section__label { grid-column: auto; }
  .stretch-takeaway p:last-child { margin-top: 0; }
}
@media (max-width: 47.99rem) {
  .stretch-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
  .stretch-hero h1 { max-width: 11ch; }
  .stretch-hero__actions { align-items: flex-start; flex-direction: column; }
  .stretch-section__grid { grid-template-columns: 1fr; gap: 2rem; }
  .stretch-section h2 { max-width: 12ch; }
  .stretch-facts { grid-template-columns: 1fr; }
  .stretch-challenge-list > div { grid-template-columns: 2rem 1fr; gap: 0.75rem; }
  .stretch-challenge-list p { grid-column: 2; }
  .stretch-path-map, .stretch-service-notes, .stretch-location-grid, .stretch-visual-principles { grid-template-columns: 1fr; }
  .stretch-path-map li { min-height: auto; padding: 1.5rem 0 2rem; }
  .stretch-path-map li + li, .stretch-path-map li:nth-child(3), .stretch-path-map li:nth-child(4) { border-top: 1px solid var(--stretch-rule); border-left: 0; padding-left: 0; }
  .stretch-path-map h3 { margin-top: 2.5rem; }
  .stretch-comparison { grid-template-columns: 1fr; gap: 1rem; }
  .stretch-comparison__arrow { transform: rotate(90deg); }
  .stretch-service-notes > div, .stretch-location-grid > div, .stretch-visual-principles > div { min-height: auto; }
  .stretch-service-notes h3, .stretch-location-grid h3, .stretch-visual-principles h3 { margin-top: 2.5rem; }
  .stretch-responsive-notes > div { grid-template-columns: 1fr; gap: 0.35rem; }
  .stretch-decision-list { margin-left: 0; }
  .stretch-project-nav { grid-template-columns: 1fr; }
  .stretch-project-nav a + a { border-top: 1px solid var(--stretch-rule); border-left: 0; padding-left: 0; text-align: left; }
  .stretch-cta { padding: 3rem 1.5rem; }
}

/* ==========================================================================
   Carolina Skiff case study — scoped marine catalogue narrative.
   ========================================================================== */

.carolina-case { --carolina-rule: rgba(244, 240, 234, 0.16); --carolina-sea: #78c4d8; --carolina-sand: #d9b25f; --carolina-paper: #eef0ea; --carolina-ink: #102f3b; }
.carolina-hero { padding: clamp(4rem, 10vw, 9rem) 0 0; }
.carolina-hero .back-link { margin-bottom: clamp(3.5rem, 8vw, 8rem); }
.carolina-hero__grid { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(20rem, 1.08fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.carolina-hero__copy, .carolina-media--hero { min-width: 0; }
.carolina-project-name { margin: 0 0 0.75rem; font-family: var(--display); font-size: clamp(1.5rem, 2.4vw, 2.4rem); font-weight: 500; letter-spacing: -0.03em; }
.carolina-kicker { margin: 0 0 1rem; color: var(--carolina-sea); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.carolina-hero h1 { max-width: 15ch; margin: 0; font-family: var(--display); font-size: clamp(3rem, 7vw, 7.25rem); font-weight: 500; letter-spacing: -0.055em; line-height: 0.98; }
.carolina-hero__summary { max-width: 50rem; margin: clamp(1.5rem, 3vw, 2.5rem) 0 0; color: var(--muted); font-size: clamp(1.1rem, 1.7vw, 1.35rem); line-height: 1.5; }
.carolina-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; margin-top: 2.25rem; color: var(--faint); font-size: 0.78rem; }
.carolina-button { display: inline-flex; align-items: center; gap: 0.75rem; width: fit-content; border: 1px solid var(--carolina-sand); border-radius: 999px; padding: 0.85rem 1.1rem; background: var(--carolina-sand); color: #172831; font-size: 0.78rem; letter-spacing: 0.06em; text-decoration: none; text-transform: uppercase; }
.carolina-button:hover { border-color: var(--text); background: var(--text); color: var(--bg); }
.carolina-button--light { border-color: var(--carolina-paper); background: var(--carolina-paper); color: var(--carolina-ink); }
.carolina-media { margin: 0; }
.carolina-media img { display: block; width: 100%; height: auto; }
.carolina-media--hero { border: 1px solid var(--carolina-rule); background: var(--carolina-paper); }
.carolina-media__viewport { position: relative; aspect-ratio: 1.35 / 1; overflow: hidden; background: var(--carolina-paper); }
.carolina-media__viewport img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }
.carolina-media--archive img { object-fit: contain; }
.carolina-media figcaption { padding: 0.85rem 1rem 1rem; background: var(--surface); color: var(--faint); font-size: 0.72rem; line-height: 1.55; }
.carolina-media figcaption strong { color: var(--text); }
.carolina-media figcaption a, .carolina-prose a { color: var(--text); text-decoration-color: var(--carolina-sand); text-underline-offset: 0.2em; }
.carolina-section { border-top: 1px solid var(--carolina-rule); padding: clamp(5rem, 10vw, 10rem) 0; }
.carolina-overview { padding-block: clamp(3.5rem, 6vw, 6rem); }
.carolina-section__grid { display: grid; grid-template-columns: minmax(14rem, 0.42fr) minmax(0, 1fr); gap: clamp(3rem, 7vw, 8rem); max-width: none; padding-inline: clamp(1rem, 2vw, 2rem); }
.carolina-section__intro { max-width: 58rem; }
.carolina-section__intro,
.carolina-path-map,
.carolina-comparison,
.carolina-discovery-grid,
.carolina-detail-notes,
.carolina-visual-principles { padding-inline: clamp(1rem, 2vw, 2rem); }
.carolina-section__label { margin: 0 0 1.5rem; color: var(--carolina-sea); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.carolina-section h2 { max-width: 17ch; margin: 0; font-family: var(--display); font-size: clamp(2.45rem, 5vw, 5.4rem); font-weight: 500; letter-spacing: -0.04em; line-height: 0.98; }
.carolina-section__lede { max-width: 44rem; margin: 2rem 0 0; color: var(--muted); font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.5; }
.carolina-prose { max-width: 52rem; }
.carolina-prose > p { margin: 0; color: var(--muted); font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.55; }
.carolina-prose > p + p { margin-top: 1.25rem; }
.carolina-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; margin: clamp(2.5rem, 5vw, 4rem) 0 0; }
.carolina-facts div { border-top: 1px solid var(--carolina-rule); padding-top: 0.8rem; }
.carolina-facts dt { margin-bottom: 0.25rem; color: var(--faint); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; }
.carolina-facts dd { margin: 0; color: var(--text); font-size: 0.9rem; }
.carolina-original, .carolina-visual { background: var(--surface); }
.carolina-media--archive { max-width: 88rem; margin: clamp(3.5rem, 7vw, 7rem) auto 0; border: 1px solid var(--carolina-rule); background: var(--carolina-paper); }
.carolina-challenge-list { margin-top: clamp(2.5rem, 5vw, 4rem); }
.carolina-challenge-list > div { display: grid; grid-template-columns: 2.5rem minmax(12rem, 0.7fr) minmax(0, 1fr); gap: 1rem; align-items: start; border-top: 1px solid var(--carolina-rule); padding: 1rem 0; }
.carolina-challenge-list span, .carolina-path-map span, .carolina-detail-notes span, .carolina-visual-principles span, .carolina-responsive-notes span { color: var(--carolina-sand); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.carolina-challenge-list h3, .carolina-detail-notes h3, .carolina-visual-principles h3 { margin: 0; color: var(--text); font-family: var(--display); font-size: 1.5rem; font-weight: 500; line-height: 1; }
.carolina-challenge-list p, .carolina-detail-notes p, .carolina-visual-principles p { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.55; }
.carolina-path-map { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: clamp(3.5rem, 7vw, 7rem) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--carolina-rule); border-bottom: 1px solid var(--carolina-rule); }
.carolina-path-map li { min-height: 17rem; padding: 1rem 1.5rem 2rem 0; }
.carolina-path-map li + li { border-left: 1px solid var(--carolina-rule); padding-left: 1.5rem; }
.carolina-path-map h3 { margin: 4rem 0 0.75rem; color: var(--text); font-family: var(--display); font-size: clamp(1.5rem, 2.3vw, 2.5rem); font-weight: 500; line-height: 1; }
.carolina-path-map p { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.55; }
.carolina-progression { background: #102f3b; }
.carolina-comparison { display: grid; grid-template-columns: minmax(0, 1fr) 3rem minmax(0, 1fr); gap: clamp(1rem, 3vw, 3rem); align-items: center; margin-top: clamp(3.5rem, 7vw, 7rem); }
.carolina-comparison__item { min-width: 0; margin: 0; }
.carolina-comparison__item img { display: block; width: 100%; height: auto; border: 1px solid var(--carolina-rule); background: var(--carolina-paper); }
.carolina-comparison__tag { margin: 0 0 0.8rem; color: var(--carolina-sand); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.carolina-comparison__item figcaption { padding-top: 0.8rem; color: var(--faint); font-size: 0.78rem; line-height: 1.5; }
.carolina-comparison__arrow { color: var(--carolina-sand); font-family: var(--display); font-size: 2rem; text-align: center; }
.carolina-evidence-note { max-width: 48rem; margin: 1.5rem 0 0 !important; color: var(--faint) !important; font-size: 0.82rem !important; line-height: 1.55; }
.carolina-discovery-grid, .carolina-detail-notes, .carolina-visual-principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: clamp(3.5rem, 7vw, 7rem); background: var(--carolina-rule); }
.carolina-discovery-grid > div, .carolina-detail-notes > div, .carolina-visual-principles > div { min-height: 16rem; padding: 1.5rem; background: var(--surface); }
.carolina-discovery-grid span, .carolina-detail-notes span, .carolina-visual-principles span { color: var(--carolina-sand); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.carolina-discovery-grid h3, .carolina-visual-principles h3 { margin: 3.5rem 0 0.75rem; color: var(--text); font-family: var(--display); font-size: 1.7rem; font-weight: 500; line-height: 1; }
.carolina-discovery-grid p, .carolina-visual-principles p { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.55; }
.carolina-detail-notes { margin-top: clamp(2.5rem, 5vw, 4rem); }
.carolina-detail-notes > div { min-height: auto; padding: 1rem 0; background: transparent; }
.carolina-detail-notes > div + div { border-top: 1px solid var(--carolina-rule); }
.carolina-detail-notes p { margin-top: 0.45rem; }
.carolina-boundary { margin-top: 2rem !important; color: var(--faint) !important; font-size: 0.86rem !important; }
.carolina-responsive-notes { margin-top: 2.5rem; }
.carolina-responsive-notes > div { display: grid; grid-template-columns: minmax(10rem, 0.7fr) minmax(0, 1fr); gap: 1.5rem; border-top: 1px solid var(--carolina-rule); padding: 1rem 0; }
.carolina-responsive-notes p { margin: 0; color: var(--faint); font-size: 0.92rem; line-height: 1.5; }
.carolina-decision-list { max-width: 64rem; margin: clamp(3rem, 7vw, 7rem) 0 0 auto; padding: 0; list-style: none; }
.carolina-decision-list li { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: 1.5rem; border-top: 1px solid var(--carolina-rule); padding: 1.5rem 0 1.75rem; }
.carolina-decision-list li > span { color: var(--carolina-sand); font-size: 0.7rem; letter-spacing: 0.1em; }
.carolina-decision-list h3 { margin: 0 0 0.5rem; color: var(--text); font-family: var(--display); font-size: clamp(1.5rem, 2.4vw, 2.5rem); font-weight: 500; line-height: 1; }
.carolina-decision-list p { max-width: 42rem; margin: 0; color: var(--muted); line-height: 1.55; }
.carolina-takeaway { background: var(--carolina-paper); color: var(--carolina-ink); }
.carolina-takeaway__inner {
  display: grid;
  grid-template-columns: minmax(16rem, 0.9fr) minmax(0, 1fr);
  column-gap: clamp(3rem, 8vw, 10rem);
  max-width: none;
  padding-inline: clamp(1rem, 2vw, 2rem);
}
.carolina-takeaway__inner > .carolina-section__label { grid-column: 1 / -1; }
.carolina-takeaway .carolina-section__label { color: #9e612e; }
.carolina-takeaway h2 { max-width: 16ch; color: var(--carolina-ink); }
.carolina-takeaway p:last-child { align-self: end; max-width: 46rem; margin: 0; color: #536176; font-size: 1.1rem; line-height: 1.55; }
.carolina-project-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--carolina-rule); }
.carolina-project-nav a { display: grid; gap: 0.6rem; padding: 2rem 0 2.5rem; color: var(--text); text-decoration: none; }
.carolina-project-nav a + a { border-left: 1px solid var(--carolina-rule); padding-left: clamp(1.5rem, 5vw, 5rem); text-align: right; }
.carolina-project-nav span { color: var(--faint); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; }
.carolina-project-nav strong { font-family: var(--display); font-size: clamp(1.7rem, 3vw, 3rem); font-weight: 500; }
.carolina-project-nav a:hover strong, .carolina-work-link:hover { color: var(--carolina-sand); }
.carolina-work-link { display: block; border-top: 1px solid var(--carolina-rule); padding: 1.25rem 0; color: var(--muted); font-size: 0.78rem; letter-spacing: 0.08em; text-decoration: none; text-transform: uppercase; }
.carolina-cta { margin-top: clamp(5rem, 10vw, 10rem); padding: clamp(3rem, 7vw, 7rem); background: var(--carolina-sea); color: var(--carolina-ink); }
.carolina-cta .carolina-section__label { color: var(--carolina-ink); }
.carolina-cta h2 { max-width: 15ch; margin: 0; color: var(--carolina-ink); font-family: var(--display); font-size: clamp(2.45rem, 5vw, 5.4rem); font-weight: 500; letter-spacing: -0.04em; line-height: 0.98; }
.carolina-cta > p:not(.carolina-section__label) { max-width: 32rem; margin: 1.5rem 0 2rem; color: rgba(16, 47, 59, 0.78); font-size: 1.1rem; line-height: 1.55; }

@media (max-width: 63.99rem) {
  .carolina-path-map, .carolina-discovery-grid, .carolina-visual-principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .carolina-path-map li:nth-child(3), .carolina-path-map li:nth-child(4) { border-top: 1px solid var(--carolina-rule); }
  .carolina-path-map li:nth-child(3) { border-left: 0; padding-left: 0; }
  .carolina-path-map li:nth-child(4) { padding-left: 1.5rem; }
  .carolina-takeaway__inner { grid-template-columns: 1fr; row-gap: 2rem; }
  .carolina-takeaway__inner > .carolina-section__label { grid-column: auto; }
  .carolina-takeaway p:last-child { margin-top: 0; }
}
@media (max-width: 47.99rem) {
  .carolina-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
  .carolina-hero h1 { max-width: 11ch; }
  .carolina-hero__actions { align-items: flex-start; flex-direction: column; }
  .carolina-section__grid { grid-template-columns: 1fr; gap: 2rem; }
  .carolina-section h2 { max-width: 12ch; }
  .carolina-facts { grid-template-columns: 1fr; }
  .carolina-challenge-list > div { grid-template-columns: 2rem 1fr; gap: 0.75rem; }
  .carolina-challenge-list p { grid-column: 2; }
  .carolina-path-map, .carolina-discovery-grid, .carolina-detail-notes, .carolina-visual-principles { grid-template-columns: 1fr; }
  .carolina-path-map li { min-height: auto; padding: 1.5rem 0 2rem; }
  .carolina-path-map li + li, .carolina-path-map li:nth-child(3), .carolina-path-map li:nth-child(4) { border-top: 1px solid var(--carolina-rule); border-left: 0; padding-left: 0; }
  .carolina-path-map h3 { margin-top: 2.5rem; }
  .carolina-comparison { grid-template-columns: 1fr; gap: 1rem; }
  .carolina-comparison__arrow { transform: rotate(90deg); }
  .carolina-discovery-grid > div, .carolina-visual-principles > div { min-height: auto; }
  .carolina-discovery-grid h3, .carolina-visual-principles h3 { margin-top: 2.5rem; }
  .carolina-responsive-notes > div { grid-template-columns: 1fr; gap: 0.35rem; }
  .carolina-decision-list { margin-left: 0; }
  .carolina-project-nav { grid-template-columns: 1fr; }
  .carolina-project-nav a + a { border-top: 1px solid var(--carolina-rule); border-left: 0; padding-left: 0; text-align: left; }
  .carolina-cta { padding: 3rem 1.5rem; }
}

/* ==========================================================================
   Meals of Hope case study — scoped nonprofit participation narrative.
   ========================================================================== */

.meals-case { --meals-rule: rgba(244, 240, 234, 0.16); --meals-teal: #69b9b0; --meals-lilac: #c29bca; --meals-paper: #f2eee7; --meals-ink: #291239; }
.meals-hero { padding: clamp(4rem, 10vw, 9rem) 0 0; }
.meals-hero .back-link { margin-bottom: clamp(3.5rem, 8vw, 8rem); }
.meals-hero__grid { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(20rem, 1.08fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.meals-hero__copy, .meals-media--hero { min-width: 0; }
.meals-project-name { margin: 0 0 0.75rem; font-family: var(--display); font-size: clamp(1.5rem, 2.4vw, 2.4rem); font-weight: 500; letter-spacing: -0.03em; }
.meals-kicker { margin: 0 0 1rem; color: var(--meals-teal); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.meals-hero h1 { max-width: 15ch; margin: 0; font-family: var(--display); font-size: clamp(3rem, 7vw, 7.25rem); font-weight: 500; letter-spacing: -0.055em; line-height: 0.98; }
.meals-hero__summary { max-width: 50rem; margin: clamp(1.5rem, 3vw, 2.5rem) 0 0; color: var(--muted); font-size: clamp(1.1rem, 1.7vw, 1.35rem); line-height: 1.5; }
.meals-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; margin-top: 2.25rem; color: var(--faint); font-size: 0.78rem; }
.meals-button { display: inline-flex; align-items: center; gap: 0.75rem; width: fit-content; border: 1px solid var(--meals-lilac); border-radius: 999px; padding: 0.85rem 1.1rem; background: var(--meals-lilac); color: var(--meals-ink); font-size: 0.78rem; letter-spacing: 0.06em; text-decoration: none; text-transform: uppercase; }
.meals-button:hover { border-color: var(--text); background: var(--text); color: var(--bg); }
.meals-button--light { border-color: var(--meals-paper); background: var(--meals-paper); color: var(--meals-ink); }
.meals-media { margin: 0; }
.meals-media img { display: block; width: 100%; height: auto; }
.meals-media--hero { border: 1px solid var(--meals-rule); background: var(--meals-paper); }
.meals-media__viewport { position: relative; aspect-ratio: 1.35 / 1; overflow: hidden; background: var(--meals-paper); }
.meals-media__viewport img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.meals-media--archive img { object-fit: contain; }
.meals-media figcaption { padding: 0.85rem 1rem 1rem; background: var(--surface); color: var(--faint); font-size: 0.72rem; line-height: 1.55; }
.meals-media figcaption strong { color: var(--text); }
.meals-media figcaption a, .meals-prose a { color: var(--text); text-decoration-color: var(--meals-lilac); text-underline-offset: 0.2em; }
.meals-section { border-top: 1px solid var(--meals-rule); padding: clamp(5rem, 10vw, 10rem) 0; }
.meals-overview { padding-block: clamp(3.5rem, 6vw, 6rem); }
.meals-section__grid { display: grid; grid-template-columns: minmax(14rem, 0.42fr) minmax(0, 1fr); gap: clamp(3rem, 7vw, 8rem); max-width: none; padding-inline: clamp(1rem, 2vw, 2rem); }
.meals-section__intro { max-width: 58rem; }
.meals-section__intro,
.meals-path-map,
.meals-comparison,
.meals-programme-grid,
.meals-visual-principles { padding-inline: clamp(1rem, 2vw, 2rem); }
.meals-section__label { margin: 0 0 1.5rem; color: var(--meals-teal); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.meals-section h2 { max-width: 17ch; margin: 0; font-family: var(--display); font-size: clamp(2.45rem, 5vw, 5.4rem); font-weight: 500; letter-spacing: -0.04em; line-height: 0.98; }
.meals-section__lede { max-width: 44rem; margin: 2rem 0 0; color: var(--muted); font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.5; }
.meals-prose { max-width: 52rem; }
.meals-prose > p { margin: 0; color: var(--muted); font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.55; }
.meals-prose > p + p { margin-top: 1.25rem; }
.meals-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; margin: clamp(2.5rem, 5vw, 4rem) 0 0; }
.meals-facts div { border-top: 1px solid var(--meals-rule); padding-top: 0.8rem; }
.meals-facts dt { margin-bottom: 0.25rem; color: var(--faint); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; }
.meals-facts dd { margin: 0; color: var(--text); font-size: 0.9rem; }
.meals-original, .meals-visual { background: var(--surface); }
.meals-media--archive { max-width: 88rem; margin: clamp(3.5rem, 7vw, 7rem) auto 0; border: 1px solid var(--meals-rule); background: var(--meals-paper); }
.meals-challenge-list { margin-top: clamp(2.5rem, 5vw, 4rem); }
.meals-challenge-list > div { display: grid; grid-template-columns: 2.5rem minmax(12rem, 0.7fr) minmax(0, 1fr); gap: 1rem; align-items: start; border-top: 1px solid var(--meals-rule); padding: 1rem 0; }
.meals-challenge-list span, .meals-path-map span, .meals-action-list span, .meals-visual-principles span, .meals-responsive-notes span { color: var(--meals-lilac); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.meals-challenge-list h3, .meals-visual-principles h3 { margin: 0; color: var(--text); font-family: var(--display); font-size: 1.5rem; font-weight: 500; line-height: 1; }
.meals-challenge-list p, .meals-visual-principles p { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.55; }
.meals-path-map { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: clamp(3.5rem, 7vw, 7rem) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--meals-rule); border-bottom: 1px solid var(--meals-rule); }
.meals-path-map li { min-height: 17rem; padding: 1rem 1.5rem 2rem 0; }
.meals-path-map li + li { border-left: 1px solid var(--meals-rule); padding-left: 1.5rem; }
.meals-path-map h3 { margin: 4rem 0 0.75rem; color: var(--text); font-family: var(--display); font-size: clamp(1.5rem, 2.3vw, 2.5rem); font-weight: 500; line-height: 1; }
.meals-path-map p { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.55; }
.meals-progression { background: var(--meals-ink); }
.meals-comparison { display: grid; grid-template-columns: minmax(0, 1fr) 3rem minmax(0, 1fr); gap: clamp(1rem, 3vw, 3rem); align-items: center; margin-top: clamp(3.5rem, 7vw, 7rem); }
.meals-comparison__item { min-width: 0; margin: 0; }
.meals-comparison__item img { display: block; width: 100%; height: auto; border: 1px solid var(--meals-rule); background: var(--meals-paper); }
.meals-comparison__tag { margin: 0 0 0.8rem; color: var(--meals-lilac); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.meals-comparison__item figcaption { padding-top: 0.8rem; color: var(--faint); font-size: 0.78rem; line-height: 1.5; }
.meals-comparison__arrow { color: var(--meals-lilac); font-family: var(--display); font-size: 2rem; text-align: center; }
.meals-evidence-note { max-width: 48rem; margin: 1.5rem 0 0 !important; color: var(--faint) !important; font-size: 0.82rem !important; line-height: 1.55; }
.meals-note { margin-top: 2.5rem; border-left: 2px solid var(--meals-teal); padding-left: 1rem; }
.meals-note span { color: var(--meals-teal); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.meals-note p { margin: 0.55rem 0 0; color: var(--faint); font-size: 0.9rem; line-height: 1.55; }
.meals-programme-grid, .meals-visual-principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: clamp(3.5rem, 7vw, 7rem); background: var(--meals-rule); }
.meals-programme-grid > div, .meals-visual-principles > div { min-height: 16rem; padding: 1.5rem; background: var(--surface); }
.meals-programme-grid span, .meals-visual-principles span { color: var(--meals-lilac); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.meals-programme-grid h3, .meals-visual-principles h3 { margin: 3.5rem 0 0.75rem; color: var(--text); font-family: var(--display); font-size: 1.7rem; font-weight: 500; line-height: 1; }
.meals-programme-grid p, .meals-visual-principles p { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.55; }
.meals-action-list { margin-top: 2.5rem; }
.meals-action-list > div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 1rem; border-top: 1px solid var(--meals-rule); padding: 1rem 0; }
.meals-action-list p { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.5; }
.meals-boundary { margin-top: 2rem !important; color: var(--faint) !important; font-size: 0.86rem !important; }
.meals-responsive-notes { margin-top: 2.5rem; }
.meals-responsive-notes > div { display: grid; grid-template-columns: minmax(10rem, 0.7fr) minmax(0, 1fr); gap: 1.5rem; border-top: 1px solid var(--meals-rule); padding: 1rem 0; }
.meals-responsive-notes p { margin: 0; color: var(--faint); font-size: 0.92rem; line-height: 1.5; }
.meals-decision-list { max-width: 64rem; margin: clamp(3rem, 7vw, 7rem) 0 0 auto; padding: 0; list-style: none; }
.meals-decision-list li { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: 1.5rem; border-top: 1px solid var(--meals-rule); padding: 1.5rem 0 1.75rem; }
.meals-decision-list li > span { color: var(--meals-lilac); font-size: 0.7rem; letter-spacing: 0.1em; }
.meals-decision-list h3 { margin: 0 0 0.5rem; color: var(--text); font-family: var(--display); font-size: clamp(1.5rem, 2.4vw, 2.5rem); font-weight: 500; line-height: 1; }
.meals-decision-list p { max-width: 42rem; margin: 0; color: var(--muted); line-height: 1.55; }
.meals-takeaway { background: var(--meals-paper); color: var(--meals-ink); }
.meals-takeaway__inner {
  display: grid;
  grid-template-columns: minmax(16rem, 0.9fr) minmax(0, 1fr);
  column-gap: clamp(3rem, 8vw, 10rem);
  max-width: none;
  padding-inline: clamp(1rem, 2vw, 2rem);
}
.meals-takeaway__inner > .meals-section__label { grid-column: 1 / -1; }
.meals-takeaway .meals-section__label { color: #9e612e; }
.meals-takeaway h2 { max-width: 16ch; color: var(--meals-ink); }
.meals-takeaway p:last-child { align-self: end; max-width: 46rem; margin: 0; color: #536176; font-size: 1.1rem; line-height: 1.55; }
.meals-project-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--meals-rule); }
.meals-project-nav a { display: grid; gap: 0.6rem; padding: 2rem 0 2.5rem; color: var(--text); text-decoration: none; }
.meals-project-nav a + a { border-left: 1px solid var(--meals-rule); padding-left: clamp(1.5rem, 5vw, 5rem); text-align: right; }
.meals-project-nav span { color: var(--faint); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; }
.meals-project-nav strong { font-family: var(--display); font-size: clamp(1.7rem, 3vw, 3rem); font-weight: 500; }
.meals-project-nav a:hover strong, .meals-work-link:hover { color: var(--meals-lilac); }
.meals-work-link { display: block; border-top: 1px solid var(--meals-rule); padding: 1.25rem 0; color: var(--muted); font-size: 0.78rem; letter-spacing: 0.08em; text-decoration: none; text-transform: uppercase; }
.meals-cta { margin-top: clamp(5rem, 10vw, 10rem); padding: clamp(3rem, 7vw, 7rem); background: var(--meals-teal); color: var(--meals-ink); }
.meals-cta .meals-section__label { color: var(--meals-ink); }
.meals-cta h2 { max-width: 15ch; margin: 0; color: var(--meals-ink); font-family: var(--display); font-size: clamp(2.45rem, 5vw, 5.4rem); font-weight: 500; letter-spacing: -0.04em; line-height: 0.98; }
.meals-cta > p:not(.meals-section__label) { max-width: 32rem; margin: 1.5rem 0 2rem; color: rgba(41, 18, 57, 0.78); font-size: 1.1rem; line-height: 1.55; }

@media (max-width: 63.99rem) {
  .meals-path-map, .meals-programme-grid, .meals-visual-principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .meals-path-map li:nth-child(3), .meals-path-map li:nth-child(4) { border-top: 1px solid var(--meals-rule); }
  .meals-path-map li:nth-child(3) { border-left: 0; padding-left: 0; }
  .meals-path-map li:nth-child(4) { padding-left: 1.5rem; }
  .meals-takeaway__inner { grid-template-columns: 1fr; row-gap: 2rem; }
  .meals-takeaway__inner > .meals-section__label { grid-column: auto; }
  .meals-takeaway p:last-child { margin-top: 0; }
}
@media (max-width: 47.99rem) {
  .meals-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
  .meals-hero h1 { max-width: 11ch; }
  .meals-hero__actions { align-items: flex-start; flex-direction: column; }
  .meals-section__grid { grid-template-columns: 1fr; gap: 2rem; }
  .meals-section h2 { max-width: 12ch; }
  .meals-facts { grid-template-columns: 1fr; }
  .meals-challenge-list > div { grid-template-columns: 2rem 1fr; gap: 0.75rem; }
  .meals-challenge-list p { grid-column: 2; }
  .meals-path-map, .meals-programme-grid, .meals-visual-principles { grid-template-columns: 1fr; }
  .meals-path-map li { min-height: auto; padding: 1.5rem 0 2rem; }
  .meals-path-map li + li, .meals-path-map li:nth-child(3), .meals-path-map li:nth-child(4) { border-top: 1px solid var(--meals-rule); border-left: 0; padding-left: 0; }
  .meals-path-map h3 { margin-top: 2.5rem; }
  .meals-comparison { grid-template-columns: 1fr; gap: 1rem; }
  .meals-comparison__arrow { transform: rotate(90deg); }
  .meals-programme-grid > div, .meals-visual-principles > div { min-height: auto; }
  .meals-programme-grid h3, .meals-visual-principles h3 { margin-top: 2.5rem; }
  .meals-action-list > div, .meals-responsive-notes > div { grid-template-columns: 1fr; gap: 0.35rem; }
  .meals-decision-list { margin-left: 0; }
  .meals-project-nav { grid-template-columns: 1fr; }
  .meals-project-nav a + a { border-top: 1px solid var(--meals-rule); border-left: 0; padding-left: 0; text-align: left; }
  .meals-cta { padding: 3rem 1.5rem; }
}