/* ==========================================================================
   Base: layout, typography, components, utilities, responsive, interactions
   ========================================================================== */
/* ==========================================================================
   Layout
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-family-main);
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  text-wrap: var(--text-wrap-pretty);
}

a {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover,
a:focus-visible {
  color: var(--color-link-hover);
}

img {
  max-width: 100%;
  display: block;
}

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: var(--space-page-top) 0 var(--space-xl);
}

.page__header,
.page__main,
.page__footer {
  width: 97%;
  max-width: var(--max-width-wide);
  margin: 0 auto;
}

.page__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.page__footer {
  position: relative;
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  text-align: right;
}

.page__footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -50vw;
  width: 100vw;
  height: 1px;
  background: var(--border-subtle-color);
  pointer-events: none;
}

/* ==========================================================================
   Typography (base text styles)
   ========================================================================== */

/* Applied via components; tokens in :root */

/* Apply pretty wrapping across all tokenized text styles, including headings. */
h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: var(--text-wrap-pretty);
}

/* ==========================================================================
   Components
   ========================================================================== */

/* ----- Site header ----- */

.site-header {
  width: 97%;
  max-width: var(--max-width-wide);
  margin: 0 auto var(--space-header-title);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-md);
  position: relative;
  /* Above .menu (100) so brand + Menu stay clickable when overlay is open */
  z-index: 300;
  pointer-events: auto;
}

.site-header__left {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-sm) var(--space-md);
  font-size: var(--fs-display);
  font-weight: var(--fw-medium);
}

.menu-trigger {
  font-family: var(--font-family-main);
  font-size: var(--fs-display);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  -webkit-font-smoothing: antialiased;
  position: relative;
  z-index: 1;
}

.menu-trigger:hover,
.menu-trigger:focus-visible {
  color: var(--color-link);
  outline: none;
}

/* ----- Menu ----- */

.menu {
  position: fixed;
  inset: 0;
  z-index: 100; /* below .site-header (300) */
  background: var(--color-bg);
  padding: var(--space-page-top) 0 var(--space-xl);
  padding-inline: max(0px, env(safe-area-inset-left)) max(0px, env(safe-area-inset-right));
  overflow: auto;
  visibility: hidden;
  opacity: 0;
  transition: visibility var(--ease-default), opacity var(--ease-default);
}

.menu[aria-hidden="false"] {
  visibility: visible;
  opacity: 1;
}

.menu[hidden] {
  display: block !important;
}

.menu[hidden][aria-hidden="false"] {
  display: block !important;
}

.menu .menu__inner {
  /* Match .site-header / .page__header: same width band and max width as page content */
  width: 97%;
  max-width: var(--max-width-wide);
  margin: 0 auto;
  padding-top: var(--space-lg);
  box-sizing: border-box;
}

.menu .menu__inner--two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--space-xl);
  row-gap: var(--space-lg);
  align-items: start;
}

.menu__col {
  min-width: 0;
}

.menu__col .menu__heading {
  margin-top: 0;
}

.menu__link {
  display: block;
  font-size: var(--fs-heading);
  font-weight: var(--fw-medium);
  color: var(--color-link);
  text-decoration: none;
  border-bottom: var(--border-subtle);
  padding: var(--space-sm) 0;
}

.menu__link:hover,
.menu__link:focus-visible {
  border-bottom-color: var(--border-link-hover);
  outline: none;
}

.menu__heading {
  margin: var(--space-xl) 0 var(--space-sm);
  font-size: var(--fs-heading);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}

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

.menu__list .menu__link {
  font-size: var(--fs-display);
}

.site-header__brand,
.site-header__meta,
.site-header__time {
  color: var(--color-text);
}

a.site-header__brand {
  text-decoration: none;
  position: relative;
  z-index: 1;
}

a.site-header__brand:hover,
a.site-header__brand:focus-visible {
  color: var(--color-link);
  outline: none;
}

.site-header__meta::before,
.site-header__time::before {
  content: "·";
  margin-right: var(--space-md);
  color: var(--color-text);
}

.site-header__status {
  display: none;
}

.site-header__status-inner {
  position: relative;
  display: inline-block;
}

.site-header__status-default,
.site-header__status-hover {
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  font-weight: 400;
  
  display: inline-block;
  transition: opacity 0.25s ease;
}

.site-header__status-hover {
  position: absolute;
  left: 0;
  bottom: 0;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}

.site-header__status:hover .site-header__status-default,
.site-header__status:focus-visible .site-header__status-default {
  opacity: 0;
}

.site-header__status:hover .site-header__status-hover,
.site-header__status:focus-visible .site-header__status-hover {
  opacity: 1;
  pointer-events: auto;
}

/* ----- Page header / hero ----- */

.page__header {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 0;
  align-items: center;
  margin-bottom: var(--space-xxl);
}

.intro__eyebrow {
  margin: 0 0 var(--space-sm);
  font-size: var(--fs-hero);
  letter-spacing: 0.04em;
}

.intro__title {
  margin: 0;
  font-size: var(--fs-hero);
  font-weight: var(--fw-light);
  line-height: var(--line-height-tight);
  max-width: 36ch;
}

/* ----- Full-bleed border system ----- */

/* Row container that owns full-width horizontal rules (top seam between rows) */
.rule-section {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  border-top: var(--border-subtle);
}

/* Rows that explicitly suppress their top rule (e.g. first in a block) */
.rule-section--no-top {
  border-top: none;
}

/* Optional bottom rule for self-contained blocks (rare) */
.rule-section--with-bottom {
  border-bottom: var(--border-subtle);
}

.rule-section--no-bottom {
  border-bottom: none;
}

/* Centered content column within a full-bleed row – matches page content width (95%, max 1300px) */
.rule-section__inner {
  width: 95%;
  max-width: var(--max-width-wide);
  margin: 0 auto;
  padding: var(--space-section) var(--space-md);
  box-sizing: border-box;
}

/* Tighter vertical rhythm for rows that should feel more compact */
.rule-section--compact .rule-section__inner {
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
}

/* Rows that should have a tighter bottom seam (e.g. to meet a vertical rule) */
.rule-section--tight-bottom .rule-section__inner {
  padding-bottom: 0;
}

/* Rows that should have a tighter top (e.g. after skills so section shifts up) */
.rule-section--tight-top .rule-section__inner {
  padding-top: var(--space-md);
}

/* Grid containers that own vertical dividers for 2- and 3-col layouts */
.rule-grid--2,
.rule-grid--3 {
  position: relative;
  /* Default vertical rule extents; override via CSS variables on a row or grid */
  --vline-top: 0;
  --vline-bottom: 0;
}

.rule-grid--2::before,
.rule-grid--3::before,
.rule-grid--3::after {
  content: '';
  position: absolute;
  top: var(--vline-top);
  bottom: var(--vline-bottom);
  width: 0;
  border-left: var(--border-subtle);
  pointer-events: none;
}

/* 2-col: divider at 50% */
.rule-grid--2::before {
  left: 50%;
}

/* 3-col: dividers at column boundaries (1fr + 1.25fr + 1fr = 3.25fr) */
.rule-grid--3::before {
  left: calc(100% / 3.25);
}

.rule-grid--3::after {
  left: calc(100% * 2.25 / 3.25);
}

/* Impact grid: second vertical (col 2–3) uses --vline-after-top/--vline-after-bottom; must override base top/bottom */
.case-study-row--impact .case-study__impact-grid.rule-grid--3::after {
  top: var(--vline-after-top, var(--vline-top)) !important;
  bottom: var(--vline-after-bottom, var(--vline-bottom)) !important;
}

/* Allow grids to explicitly turn off vertical lines */
.rule-grid--no-verticals::before,
.rule-grid--no-verticals::after {
  display: none;
}

/* Grids whose vertical dividers should reach the section borders */
.rule-grid--extend.rule-grid--2,
.rule-grid--extend.rule-grid--3 {
  --vline-top: calc(-1 * var(--space-section) + 1px);
  --vline-bottom: calc(-1 * var(--space-section));
}

/* In tight-bottom rows, don't let extended grids overshoot the bottom border */
.rule-section--tight-bottom .rule-grid--extend.rule-grid--2,
.rule-section--tight-bottom .rule-grid--extend.rule-grid--3 {
  --vline-bottom: 0;
}

/* Case study: when a section title sits above the grid, extend vertical up to meet top border */
.case-study__section-title + .panel.rule-grid--extend.rule-grid--2,
.case-study__section-title + .panel.rule-grid--extend.rule-grid--3 {
  --vline-top: calc(-1 * var(--space-section) - 48px + 1px);
}

/* Case study: in no-top sections (e.g. Product Goals / Design Principles),
   keep verticals within the panel so they don't overlap the previous row's border */
.case-study__section--no-top .rule-grid--extend.rule-grid--2,
.case-study__section--no-top .rule-grid--extend.rule-grid--3 {
  --vline-top: 0;
}

/* Grids whose vertical dividers should only extend to the bottom border */
.rule-grid--extend-bottom.rule-grid--2,
.rule-grid--extend-bottom.rule-grid--3 {
  --vline-bottom: 0;
}

/* Rows with less bottom padding (e.g. skills to balance top/bottom) */
.rule-section--less-bottom .rule-section__inner {
  padding-bottom: var(--space-md);
}

/* Homepage: control spacing with a tuned default vertical rhythm */
.page:not(.case-study) .rule-section__inner {
  padding-top: var(--row-pad-top, var(--space-7));
  padding-bottom: var(--row-pad-bottom, var(--space-7));
}

.page:not(.case-study) .panel {
  padding-top: 0;
  padding-bottom: 0;
}

/* Homepage: add a bit of breathing room between the skills rule and its text */
.page:not(.case-study) .panel--skills {
  padding-top: 0;
  margin-top: 0;
}

/* Override default .panel:last-of-type padding on homepage so grids can sit on the border */
.page:not(.case-study) .panel:last-of-type {
  padding-bottom: 0;
}

/* Homepage: remove bottom margin on the last body text in stacked and final grid rows
   so the grid container reaches the row's bottom border and vertical dividers can meet it */
.page:not(.case-study) .panel--stacked__grid .panel__body:last-child {
  margin-bottom: var(--space-sm);
}

/* But in the tight-bottom homepage row (workshops/learning), make the bottom as tight as possible */
.page:not(.case-study) .rule-section--tight-bottom .panel--stacked__grid .panel__body:last-child {
  margin-bottom: 0;
}

.page:not(.case-study) .panel.panel--grid:last-child .panel__body:last-child {
  margin-bottom: 0;
}

/* Homepage last section verticals: controlled in per-section block (Row 6) */

/* ==========================================================================
   Homepage row spacing controls
   --------------------------------------------------------------------------
   Edit ONLY the custom properties below to tweak top/bottom spacing
   (and, if desired, vertical rule height) for each homepage section.
   ========================================================================== */

.page:not(.case-study) .panel--stacked .panel__item:first-child {
  padding-bottom: var(--space-section);
}

/* ----- Panels ----- */

.panel__label:has(img) {
  margin-bottom: var(--space-4);
}

.panel {
  position: relative;
  padding-top: var(--space-lg);
}

.panel:last-of-type {
  padding-bottom: var(--space-lg);
}

.panel--grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 0;
  row-gap: var(--space-lg);
  position: relative;
}

.panel--grid .panel__item:first-child {
  padding-right: var(--space-xl);
}

.panel--grid .panel__item:not(:first-child) {
  padding-left: var(--space-xl);
}

.panel--spacious {
  padding-top: var(--space-xxl);
}

.panel--stacked .panel__item:first-child {
  padding-bottom: var(--space-lg);
}

.panel--stacked__divider {
  position: relative;
  margin-bottom: var(--space-lg);
}

.panel--stacked__divider::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -50vw;
  width: 100vw;
  height: 2px;
  background: var(--border-subtle-color);
  pointer-events: none;
}

.panel--stacked__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 0;
  position: relative;
}

/* Extend stacked vertical divider up to meet the internal horizontal rule */
.panel--stacked__grid.rule-grid--2 {
  --vline-top: calc(-1 * var(--space-lg));
}

.panel--stacked__grid .panel__item:first-child {
  padding-right: var(--space-xl);
}

.panel--stacked__grid .panel__item:not(:first-child) {
  padding-left: var(--space-xl);
}

.panel__item--full {
  max-width: 120ch;
}

.panel__item--narrow {
  max-width: 85ch;
}

.panel__label {
  margin: 0 0 var(--space-sm);
  font-size: var(--fs-heading);
  font-weight: var(--fw-semibold);
}

.panel__body {
  margin: 0 0 var(--space-sm);
  font-size: var(--fs-display);
  font-weight: var(--fw-medium);
  line-height: var(--line-height-body);
}

.panel__body strong {
  font-weight: var(--fw-semibold);
}

.panel__meta {
  margin: 0;
  font-size: var(--fs-display);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  line-height: var(--line-height-body);
}

.panel__list {
  margin: 0;
  padding-left: 1.1em;
  font-size: var(--fs-display);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  line-height: var(--line-height-body);
}

.panel__list--no-bullets {
  list-style: none;
  padding-left: 0;
}

.panel__list--stacked li + li {
  margin-top: 1em;
}

.panel__prompt {
  margin: 0;
  font-size: var(--fs-heading);
  font-weight: var(--fw-semibold);
}

.panel--grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  position: relative;
}

.panel--grid-3 > .panel__label:first-child {
  grid-column: 1 / -1;
  margin-bottom: var(--space-sm);
}

.panel--grid-3__items {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr);
  column-gap: 0;
  row-gap: var(--space-lg);
  position: relative;
}

.panel--grid-3__items .panel__item:nth-child(1) {
  padding-right: var(--space-xl);
}

.panel--grid-3__items .panel__item:nth-child(2) {
  padding-left: var(--space-xl);
  padding-right: var(--space-xl);
}

.panel--grid-3__items .panel__item:nth-child(3) {
  padding-left: var(--space-xl);
}

.panel--skills .panel__item {
  min-height: 7rem;
}

/* ----- Footer ----- */

.footer__text {
  margin: 0;
  font-size: var(--fs-footer);
  font-weight: var(--fw-medium);
}

.footer__link {
  color: var(--color-link);
  text-decoration: none;
  border-bottom: var(--border-link);
}

.footer__link:hover,
.footer__link:focus-visible {
  border-bottom-color: var(--border-link-hover);
}

/* ----- Case study ----- */

.case-study {
  padding-top: var(--space-page-top);
}

.case-study .page__main {
  gap: var(--space-xxl);
}

/* Case study: header & hero */
.case-study__header {
  margin-bottom: 0;
  row-gap: 0;
}

.case-study__title {
  margin: 0 0 var(--space-sm);
  font-size: var(--fs-hero);
  font-weight: var(--fw-semibold);
  line-height: var(--line-height-tight);
}

.case-study__subtitle {
  margin: 0 0 var(--space-md);
  font-size: var(--fs-display);
  font-weight: var(--fw-regular);
  color: var(--color-text);
}

.case-study__title-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-sm);
  margin-bottom: var(--space-6);
}

.case-study__title-row .case-study__subtitle {
  margin: 0;
}

.case-study__meta-label {
  flex-shrink: 0;
}

.case-study__overview {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-display);
  font-weight: var(--fw-medium);
  line-height: var(--line-height-body);
  max-width: 70ch; 
}

.case-study__hero-img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-block);
  background: var(--bg-placeholder);
  margin-top: var(--space-4);
  margin-bottom: 0;
  display: block;
  vertical-align: top;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.case-study__hero-two-col {
  margin-top: var(--space-4);
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 0px;
  align-items: start;
  max-width: 100%;
}

.case-study__hero-two-col .case-study__hero-figure {
  min-width: 0;
  width: 60%;
  justify-self: center;
}

/* Pull hero figures toward the centre so the gap between them is smaller
   without changing their rendered size. */
.case-study__hero-two-col .case-study__hero-figure:first-child {
  justify-self: end;
}

.case-study__hero-two-col .case-study__hero-figure:last-child {
  justify-self: start;
}

.case-study__hero-two-col .case-study__hero-figure .case-study__hero-img {
  margin-top: 0;
  width: 100%;
}

.case-study__hero-two-col .case-study__img-caption {
  margin-top: var(--space-2);
  text-align: center;
}

.case-study__header + .case-study__img-caption {
  margin-bottom: var(--space-lg);
}

.case-study__header + .page__main {
  padding-top: var(--space-8);
}

/* Case study: sections & section title */
.case-study__section {
  padding-top: var(--space-lg);
  position: relative;
}

.page__main > .case-study__section:last-child {
  padding-top: var(--space-sm);
  padding-bottom: 0;
}

.case-study__section--no-top {
  padding-top: 0;
}

/* Case study: section spacing driven by --row-pad-top / --row-pad-bottom (see Case study row spacing block below) */
.case-study .rule-section__inner {
  padding-top: var(--row-pad-top, var(--space-section));
  padding-bottom: var(--row-pad-bottom, var(--space-section));
}

/* Tighter section (e.g. mobile videos): defaults; overridable via row class */
.case-study__section--tight .rule-section__inner {
  padding-top: var(--row-pad-top, var(--space-6));
  padding-bottom: var(--row-pad-bottom, var(--space-6));
}

/* No-top sections (e.g. Key Research, Role & Collaboration): add breathing room above/below titles */
.case-study__section--no-top .case-study__section-title {
  margin-top: var(--space-md);
  margin-bottom: var(--space-sm);
}

.case-study__section:has(.case-study__goals-grid),
.case-study__section:has(.final-designs),
.case-study__section:has(.case-study__impact-grid) {
  padding-top: 0;
}

/* Project Details section: use row vars so Case study row spacing block can override */
.case-study__section:has(.case-study__details) {
  padding-top: var(--row-pad-top, var(--space-section));
  padding-bottom: var(--row-pad-bottom, var(--space-section));
}


/* (Impact ::after top/bottom overridden earlier with !important so --vline-after-* apply) */

.case-study__section-title {
  margin: 0 0 var(--space-md);
  font-size: var(--fs-heading);
  font-weight: var(--fw-semibold);
}

.case-study__section-title:has(+ .panel) {
  margin-bottom: 0;
}

.case-study__section-title + .panel {
  border-top: none;
  padding-top: var(--space-5);
}

.case-study__section-title--eyebrow {
  font-size: var(--fs-display);
  font-weight: var(--fw-semibold);
  display: block;
  margin-bottom: var(--space-1);
}

/* Align right column (image) with section title */
.case-study__section-title + .panel .panel__item:nth-child(2) {
  margin-top: calc(-1 * (var(--space-5) + var(--fs-heading)));
}

/* Case study: project details grid */
.case-study__details {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr);
  column-gap: 0;
  row-gap: var(--space-lg);
  position: relative;
}

.case-study__detail {
  padding-right: var(--space-xl);
}

.case-study__details .case-study__detail:nth-child(2) {
  padding-left: var(--space-xl);
  padding-right: var(--space-xl);
}

.case-study__details .case-study__detail:nth-child(3) {
  padding-left: var(--space-xl);
  padding-right: 0;
}

.case-study__detail-title {
  margin: 0 0 var(--space-sm);
  font-size: var(--fs-heading);
  font-weight: var(--fw-semibold);
}

.case-study__detail-body {
  margin: 0 0 var(--space-sm);
  font-size: var(--fs-display);
  font-weight: var(--fw-medium);
  line-height: var(--line-height-body);
}

.case-study__detail-body--subsection {
  /* top | horizontal | bottom */
  margin: var(--space-11) 0 var(--space-6);
}

.case-study__detail-body--subsection-tight {
  margin-top: var(--space-4);
}

.case-study__detail-list {
  margin: 0;
  padding-left: 1.1em;
  list-style-type: square;
  font-size: var(--fs-display);
  font-weight: var(--fw-medium);
  line-height: var(--line-height-body);
}

.case-study__detail-list li::marker {
  font-size: 0.65em;
}

.case-study__detail-list.case-study__detail-list--no-bullets {
  list-style: none;
  padding-left: 0;
}

/* Case study: research grid & quotes */
.case-study__research-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 0;
  row-gap: var(--space-lg);
  position: relative;
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-md);
}

.case-study__research-column:first-child {
  padding-right: var(--space-xl);
}

.case-study__research-column:last-child {
  padding-left: var(--space-xl);
}

.case-study__quote-block {
  padding-inline: var(--space-md);
  margin-top: calc(-1 * var(--space-md));
}

.case-study__quote-mark {
  display: block;
  font-size: 120px;
  line-height: 0.7;
  margin-top: 0;
  margin-bottom: 0;
}

.case-study__quote-text {
  margin: -24px 0 var(--space-sm);
  font-size: 28px;
  font-weight: var(--fw-medium);
  line-height: var(--line-height-body);
}

.case-study__quote-attribution {
  margin: 0;
  font-size: var(--fs-caption);
  font-style: italic;
  color: var(--color-muted);
}

/* Case study: two-col layout & images */
.case-study__two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-xl);
  row-gap: var(--space-md);
}

.case-study__two-col--asymmetric {
  grid-template-columns: 2fr 1fr;
}

.case-study__two-col--centered {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 192px;
}

.case-study__img-block {
  width: 90%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-block);
}

.case-study__img-block--video {
  width: 320px;
  height: auto;
  aspect-ratio: auto;
  display: block;
  object-fit: contain;
  vertical-align: top;
  transform: translateZ(0);
  backface-visibility: hidden;
  clip-path: inset(0 0 1px 0);
}

.case-study__img-block--hero {
  aspect-ratio: 16 / 9;
}

.case-study__img-caption {
  margin-top: var(--space-2);
  font-size: var(--fs-caption);
  text-align: center;
  font-weight: var(--fw-regular);
  color: var(--color-text);
}

.case-study__img--support {
  width: 90%;
  height: auto;
  display: block;
  margin-inline: auto;
}

.case-study__img--desaturated {
  filter: saturate(0.2) !important;
}

.case-study__img--bordered {
  border: var(--border-subtle);
  border-radius: var(--radius-block);
}

.case-study__img--radius-16 {
  border-radius: 16px;
}

.case-study__overview + .case-study__overview,
.case-study__body-top {
  margin-top: var(--space-md);
}

/* Case study: goals grid & four-col phases */
.case-study__goals-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-xl);
  row-gap: var(--space-lg);
}

.case-study__four-col {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  column-gap: max(24px, 2vw);
  row-gap: var(--space-sm);
  width: 100%;
  position: relative;
}

.case-study__four-col .case-study__phase {
  padding-left: var(--space-sm);
  padding-right: var(--space-sm);
}

/* Align first column with section title; align fourth column with main’s right edge */
.case-study__four-col .case-study__phase:first-child {
  padding-left: 0;
}

.case-study__four-col .case-study__phase:last-child {
  padding-right: 0;
}

.case-study__four-col .case-study__phase:nth-child(n + 2) {
  border-left: var(--border-subtle);
}

/* Role & Collaboration (no-top section with four-col): no vertical dividers, add spacing below */
.case-study__section--no-top .case-study__four-col .case-study__phase:nth-child(n + 2) {
  border-left: none;
}

.case-study__section--no-top:has(.case-study__four-col) {
  padding-bottom: var(--space-lg);
}

.case-study__phase {
  padding-right: var(--space-md);
}

.case-study__phase-title {
  margin: 0 0 var(--space-sm);
  font-size: var(--fs-display);
  font-weight: var(--fw-semibold);
}

.case-study__phase-list {
  margin: 0;
  padding-left: 1.1em;
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  line-height: var(--line-height-body);
}

/* Process Highlights: tabbed content (Discovery, Define, Build, Launch) */
.case-study-row--process .case-study__section-title {
  --row-pad-top: var(--space-4);
  --row-pad-bottom: var(--space-section);
}

.process-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-xl);
  margin-top: var(--space-md);
  margin-bottom: 0;
  width: 100%;
  padding: 0;
  box-sizing: border-box;
}

.process-tabs__btn {
  appearance: none;
  display: block;
  position: relative;
  overflow: visible;
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  padding: var(--space-2) 0;
  font: inherit;
  font-size: 32px;
  font-weight: var(--fw-medium);
  color: var(--color-text);
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  text-align: left;
  transition: background-color var(--ease-default), color var(--ease-default), border-color var(--ease-default);
  opacity: 0.7;
}

/* Arrows between tabs (sits in the flex gap; system font for reliable → glyph) */
.process-tabs__btn:not(:last-child)::after {
  content: '\2192';
  position: absolute;
  top: 50%;
  left: calc(100% + var(--space-sm));
  transform: translateY(-50%);
  z-index: 2;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1.125rem;
  font-weight: var(--fw-regular);
  color: var(--color-text);
  line-height: 1;
  pointer-events: none;
}

.process-tabs__btn:hover:not(.process-tabs__btn--active) {
  color: var(--color-link-hover);
}

.process-tabs__btn--active {
  background: transparent;
  border-bottom: var(--border-subtle);
  cursor: default;
  opacity: 1;
}

.process-panels {
  display: grid;
  min-height: 0;
}

/* Content frame below tabs — add class `process-panels--framed` to the same element as `process-panels` to show */
.process-panels.process-panels--framed {
  margin-top: var(--space-md);
  border: var(--border-subtle);
  box-sizing: border-box;
}

.process-panels > .process-panel {
  grid-area: 1 / 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.process-panels > .process-panel.process-panel--active {
  opacity: 1;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .process-panels > .process-panel {
    transition: none;
  }
}

.process-panel {
  padding-top: var(--space-8);
  padding-bottom: var(--space-4);
  border-top: none;
  margin-top: 0;
  background: var(--color-bg);
}

.process-panel__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: var(--space-xl);
  row-gap: var(--space-md);
}

.process-panel__text {
  min-width: 0;
  padding-left: var(--space-10);
  padding-right: var(--space-8);
  grid-column: span 2;
}

.process-panel__text .case-study__detail-list {
  margin: 0;
}

.process-panel__text .case-study__detail-list--no-bullets {
  font-size: 20px;
}

.process-panel__img {
  margin: 0;
  min-width: 0;
  grid-column: span 2;
  padding-right: var(--space-6);
}

.process-panel__img img {
  width: 90%;
  height: auto;
  border-radius: var(--radius-block);
}

.process-panel__img .case-study__img-caption {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Case study: exploration section (full-width background with grid) */
.case-study__section--exploration {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
}

/* More top spacing for Exploration and Final Designs */
.case-study__section--more-top .rule-section__inner {
  padding-top: var(--row-pad-top, var(--space-section));
}

.case-study__section--exploration.case-study__section--more-top .case-study__exploration-inner {
  padding-top: var(--row-pad-top, var(--space-section));
}

.case-study__section--exploration .case-study__exploration-inner {
  position: relative;
  z-index: 1;
  width: 95%;
  max-width: var(--max-width-wide);
  margin: 0 auto;
  padding-inline: var(--space-md);
  box-sizing: border-box;
}

.case-study__exploration-inner > .case-study__detail-body {
  margin-bottom: var(--space-md);
}

.case-study__exploration-bg {
  position: absolute;
  inset: 0;
  background-image: url("images/playlists/grid-tile.svg");
  background-size: 60px 60px;
  background-position: 0 0;
  background-repeat: repeat;
  pointer-events: none;
}

/* Exploration sketches: horizontal scroll carousel (full viewport width, breaks out of inner column) */
.case-study__exploration-grid {
  display: flex;
  gap: var(--space-md);
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  box-sizing: border-box;
  padding-inline: max(
    calc((100vw - var(--max-width-wide)) / 2 + var(--space-md)),
    calc(2.5vw + var(--space-md))
  );
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-padding-inline: max(
    calc((100vw - var(--max-width-wide)) / 2 + var(--space-md)),
    calc(2.5vw + var(--space-md))
  );
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--space-6);
  margin-bottom: var(--space-xxl);
}

/* Exploration carousel cards */
.case-study__exploration-grid figure:has(img) {
  display: flex;
  flex-direction: column;
  flex: 0 0 clamp(260px, 34vw, 420px);
  margin: 0;
  aspect-ratio: auto;
  min-width: 0;
  scroll-snap-align: start;
}

.case-study__exploration-grid figure:has(img) img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  opacity: 0.8;
}

.case-study__exploration-grid figure:has(img) .case-study__img-caption {
  font-size: var(--fs-caption);
  margin-top: var(--space-sm);
  flex-shrink: 0;
  opacity: 1;
  text-align: left;
}

.case-study__exploration-label {
  margin: var(--space-sm) 0 0;
  font-size: var(--fs-display);
  font-weight: var(--fw-regular);
}

/* Case study: final designs (centred image with left/right annotations).
   Position each annotation vertically with --annotation-y (percentage from top of image):
   e.g. style="--annotation-y: 20%;" places the annotation centre at 20% from the top. */
.final-designs {
  display: grid;
  grid-template-columns: minmax(0, 200px) 1fr minmax(0, 200px);
  align-items: stretch;
  column-gap: 16px;
  margin-top: var(--space-4);
}

/* Mobile Foundations Focus Area 3: tighten annotation-to-image spacing for this one block */
.final-designs--focus3-tight {
  grid-template-columns: minmax(0, 160px) 1fr minmax(0, 160px);
  column-gap: 0;
}

.final-designs--focus3-tight .final-designs__annotations--left {
  margin-right: -12px;
}

.final-designs--focus3-tight .final-designs__annotations--right {
  margin-left: -12px;
}

.final-designs--images-only {
  grid-template-columns: 1fr;
}

.final-designs__image-wrap {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-width: 0;
  width: 100%;
}

.final-designs__image-wrap > figure {
  flex: 0 0 50%;
  max-width: 50%;
}

/* Normalise width of paired images in Mobile Foundations focus areas */
.case-study__image-pair {
  max-width: min(720px, 100%);
  margin-inline: auto;
}

/* Case study image block: optional 2-col (image + text) and 4-col (annotations + 3 images) rows */
.case-study__image-block {
  margin-top: var(--space-4);
  display: grid;
  row-gap: var(--space-4);
}

.case-study__image-block-row--two {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  column-gap: var(--space-4);
  align-items: start;
}

.case-study__image-block-row--three-plus-annotations {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr minmax(0, 160px);
  column-gap: var(--space-5);
  align-items: start;
}

.case-study__image-block-annotations--pull-left {
  margin-left: calc(-1 * var(--space-2));
}

.case-study__image-block-annotations {
  position: relative;
  height: 500px;

}

.case-study__image-block-annotations .final-designs__annotation {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--annotation-y, 0);
  transform: translateY(-50%);
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: stretch;
  max-width: 100%;
}

.case-study__image-block-annotations .final-designs__annotation-text {
  margin: 0;
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  line-height: var(--line-height-body);
}

.case-study__image-block-figure {
  margin: 0;
  width: 100%;
  margin-bottom: var(--space-12)
}

.case-study__image-block-figure--centred {
  width: 60%;
  margin-inline: auto;
}

.case-study__image-block-figure--full {
  width: 100%;
}

@media (max-width: 720px) {
  .case-study__image-block-row--two,
  .case-study__image-block-row--three-plus-annotations {
    grid-template-columns: 1fr;
    row-gap: var(--space-3);
    column-gap: var(--space-8);
  }
}

.final-designs__annotations {
  position: relative;
  height: 100%;
  min-height: 120px;
  min-width: 120px; /* so auto-sized grid column doesn’t collapse (content is absolute) */
}

.final-designs__annotation {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--annotation-y, 0);
  transform: translateY(-50%);
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: stretch;
  max-width: 100%;
}

/* annotations--left: in col 3, RIGHT of image. Pipe on left of text (pipe | text → image) */
.final-designs__annotations--left .final-designs__annotation {
  flex-direction: row;
  text-align: left;
  justify-content: flex-start; /* pull pipe + text toward the image */
}

.final-designs__annotations--left .final-designs__annotation-pipe {
  order: 0;
}

.final-designs__annotations--left .final-designs__annotation-text {
  order: 1;
}

/* Visually tighten gap between pipes and central image on both sides
   by allowing annotations to overlap the grid column gap slightly. */
.final-designs__annotations--left {
  margin-right: 0;
}

/* annotations--right: in col 1, LEFT of image. Pipe on right of text (text | pipe → image) */
.final-designs__annotations--right .final-designs__annotation {
  flex-direction: row;
  justify-content: flex-end; /* pull text + pipe toward the image */
}

.final-designs__annotations--right .final-designs__annotation-text {
  order: 0;
}

.final-designs__annotations--right .final-designs__annotation-pipe {
  order: 1;
}

.final-designs__annotations--right {
  margin-left: 0;
}

.final-designs__annotations--right .final-designs__annotation-text {
  text-align: left;
}

.final-designs__annotations--pull-right {
  margin-right: calc(-1 * var(--space-4));
}

.final-designs__annotations--pull-left {
  margin-left: calc(-1 * var(--space-4));
}

.final-designs__annotation-pipe {
  flex: 0 0 1.5px;
  width: 1px;
  min-height: 1.5em;
  align-self: stretch;
  background: currentColor;
  opacity: 0.8;
  border-radius: 0px;
}

.final-designs__annotation-text {
  margin: 0;
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  line-height: var(--line-height-body);
  min-width: 100px;
  overflow-wrap: break-word;
}

.final-designs__annotation-text strong {
  font-weight: var(--fw-semibold);
}

/* Case study: Principles callout */
.case-study__principles-grid {
  margin-top: var(--space-4);
}

.case-study__detail-body--display {
  font-size: var(--fs-display-xl);
  font-weight: var(--fw-regular);
  line-height: var(--line-height-tight);
  margin-bottom: var(--space-10);
}

/* Case study: impact grid */
.case-study__impact-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 0;
}

/* Show vertical rule between col 2 and col 3 (position follows 1.25fr middle track) */

.case-study__impact-intro {
  position: relative;
  grid-column: 1;
  padding: var(--space-4);
}

/* Impact headline: spans cols 2–3; draws the full-width rule between rows */
.case-study__impact-tile--headline {
  position: relative;
  grid-column: 2 / 4;
  padding: var(--space-4);
  gap: 0;
  border-right: none;
}

/* Full-bleed: headline is only 2/3 of container so use wider line + larger negative margin to reach viewport edge */
.case-study__impact-tile--headline::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -100vw;
  width: 200vw;
  height: 1px;
  background: var(--border-subtle-color);
  pointer-events: none;
}

.case-study__impact-tile {
  position: relative;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-sm);
  min-height: 0;
}

/* Stat row: top-align so the first line of .case-study__impact-tile-text lines up across columns */
.case-study__impact-tile:not(.case-study__impact-tile--headline) {
  justify-content: flex-start;
  /* Extra space below the headline row rule / tile top rules */
  padding-top: calc(var(--space-4) + var(--space-3));
}

.case-study__impact-grid > .case-study__impact-tile:last-child {
  border-right: none;
}

.case-study__impact-tile-text {
  margin: 0;
  font-size: var(--fs-display);
  font-weight: var(--fw-medium);
  line-height: var(--line-height-body);
  color: var(--color-text);
}

.case-study__impact-tile-support {
  margin: 0;
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  line-height: var(--line-height-body);
  color: var(--color-text);
}

.case-study__impact-tile--headline .case-study__impact-tile-text {
  font-size: var(--fs-display);
  font-weight: var(--fw-medium);
  line-height: var(--line-height-body);
}

.case-study__impact-stat {
  margin: -20px 0 0;
  padding-left: 24px;
  font-size: 128px;
  line-height: 1;
  color: var(--color-text);
  margin-bottom: -20px;
}

.case-study__impact-symbol {
  font-size: 40px;
  font-weight: var(--fw-medium);
  margin: 0 -24px;
  display: inline-block;
  vertical-align: middle;
}

.case-study__impact-symbol--bottom {
  vertical-align: baseline;
}

.case-study__impact-number {
  font-size: 128px;
  font-weight: 300;
}

.case-study__impact-tile--headline .case-study__impact-tile-support {
  margin-top: 0;
}

.case-study__impact-date {
  margin: 0 0 var(--space-md);
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  line-height: var(--line-height-body);
  color: var(--color-text);
}

/* ==========================================================================
   Utilities
   ========================================================================== */

.u-mb-0 { margin-bottom: 0; }
.u-list-none { list-style: none; margin: 0; padding: 0; }
.u-text-display { font-size: var(--fs-display); font-weight: var(--fw-medium); line-height: var(--line-height-body); }
.u-text-muted { color: var(--color-muted); }

/* ==========================================================================
   Responsive (720px = --breakpoint-md)
   ========================================================================== */

@media (max-width: 720px) {
  /* Mobile typography – smaller headings, display, footer, caption */
  :root {
    --fs-heading: 28px;
    --fs-display: 20px;
    --fs-footer: 20px;
    --fs-caption: 14px;
  }

  /* Page layout – 24px horizontal margin (rules remain full-bleed) */
  .page {
    padding-inline: var(--space-3);
  }

  .page__header {
    grid-template-columns: 1fr;
    row-gap: var(--space-md);
  }

  /* Hero typography – scale down for mobile */
  .intro__eyebrow,
  .intro__title {
    font-size: 36px;
  }

  /* Learning page: masonry – single column, full viewport width, centred */
  .page--learning .learning-row--gallery .rule-section__inner {
    width: 100%;
    max-width: none;
    padding-inline: 0;
  }

  .page--learning .learning-masonry,
  .learning-masonry {
    grid-template-columns: 1fr !important;
    justify-items: center;
  }

  /* Single column: reset desktop grid-column so all items flow in one column (avoids missing/overlap) */
  .page--learning .learning-masonry > .learning-masonry__item,
  .page--learning .learning-masonry > .learning-masonry__item--wide,
  .page--learning .learning-masonry > .learning-masonry__item--full,
  .page--learning .learning-masonry > .learning-masonry__row {
    grid-column: 1;
  }

  .page--learning .learning-masonry__item,
  .page--learning .learning-masonry__item--wide,
  .page--learning .learning-masonry__item--full {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .page--learning .learning-masonry__item img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    margin-inline: auto;
  }

  .page--learning .learning-masonry__row {
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
  }

  .page--learning .learning-masonry__row .learning-masonry__item {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .page--learning .learning-masonry__row .learning-masonry__item img {
    margin-inline: auto;
  }

  .intro__eyebrow {
    margin: 0;
  }

  .intro__title {
    max-width: 100%;
  }

  /* Site header – hide location & time; brand + Menu span full width on one line */
  .site-header {
    padding-inline: var(--space-sm);
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
  }

  .site-header__meta,
  .site-header__time {
    display: none;
  }

  .site-header__left {
    font-size: 18px;
    flex: 1;
    min-width: 0;
  }

  .menu-trigger {
    font-size: 18px;
  }

  /* Fixed menu: mirror .page padding + .site-header inner padding so column 1 aligns with header */
  .menu {
    padding-inline: max(var(--space-3), env(safe-area-inset-left))
      max(var(--space-3), env(safe-area-inset-right));
  }

  .menu .menu__inner {
    width: 100%;
    max-width: none;
    padding-inline: var(--space-sm);
  }

  .menu .menu__inner--two-col {
    grid-template-columns: 1fr;
  }

  /* Reduce spacing around hero */
  .site-header {
    margin-bottom: var(--space-4);
  }

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

  /* Panels */
  .panel--grid {
    grid-template-columns: 1fr;
  }

  .panel--grid .panel__item:first-child {
    padding-right: 0;
  }

  .panel--grid .panel__item:not(:first-child) {
    padding-left: 0;
    padding-top: var(--space-lg);
    position: relative;
  }

  .panel--grid .panel__item:not(:first-child)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -50vw;
    width: 100vw;
    height: 1px;
    background: var(--border-subtle-color);
    pointer-events: none;
  }

  .panel--stacked__grid {
    grid-template-columns: 1fr;
  }

  .panel--stacked__grid::after {
    display: none;
  }

  .panel--stacked__grid .panel__item:first-child {
    padding-right: 0;
    padding-bottom: var(--space-md);
  }

  .panel--stacked__grid .panel__item:not(:first-child) {
    padding-left: 0;
    padding-top: var(--space-lg);
    margin-bottom: var(--space-lg);
    position: relative;
  }

  .panel--stacked__grid .panel__item:not(:first-child)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -50vw;
    width: 100vw;
    height: 1px;
    background: var(--border-subtle-color);
    pointer-events: none;
  }

  .panel--grid-3 {
    grid-template-columns: 1fr;
  }

  .panel--grid-3__items {
    grid-template-columns: 1fr;
  }

  .panel--grid-3__items .panel__item:nth-child(1),
  .panel--grid-3__items .panel__item:nth-child(2),
  .panel--grid-3__items .panel__item:nth-child(3) {
    padding-left: 0;
    padding-right: 0;
  }

  /* Case study: mobile-only spacing */
  .case-study__header + .page__main {
    padding-top: 0;
  }

  .case-study-row--details {
    --row-pad-top: var(--space-4);
    --row-pad-bottom: var(--space-4);
  }

  .case-study-row--mobile-videos {
    margin-top: calc(-1 * var(--space-6));
  }

  .case-study-row--mobile-videos .rule-section__inner {
    padding-top: 0;
    padding-bottom: var(--space-2);
  }

  /* Tighten spacing between content and horizontal rules across most case study sections (leave Process row at default) */
  .case-study-row--problem .rule-section__inner,
  .case-study-row--research .rule-section__inner,
  .case-study-row--goals .rule-section__inner,
  .case-study-row--exploration .case-study__exploration-inner,
  .case-study-row--final-designs .rule-section__inner,
  .case-study-row--impact .rule-section__inner,
  .case-study-row--whats-next .rule-section__inner {
    padding-top: var(--space-4);
  }

  /* Tighter bottom spacing (preserve tight-bottom where it exists; leave Process row at default) */
  .case-study-row--problem .rule-section__inner,
  .case-study-row--goals .rule-section__inner,
  .case-study-row--exploration .case-study__exploration-inner {
    padding-bottom: var(--space-1);
  }

  /* Final Designs: extra bottom padding so last annotation clears the rule below (Impact pulls up) */
  .case-study-row--final-designs .rule-section__inner {
    padding-bottom: calc(var(--space-4) + var(--space-10));
  }

  /* Problem section: reduce gap between list and Support image, and around image */
  .case-study-row--problem .panel--grid {
    row-gap: var(--space-3);
  }

  .case-study-row--problem .panel--grid .panel__item:not(:first-child) {
    padding-top: var(--space-3);
  }

  .case-study-row--problem .rule-section__inner {
    padding-bottom: var(--space-1);
  }

  .case-study-row--problem .panel.panel--grid {
    padding-bottom: var(--space-1);
  }

  .case-study-row--problem .case-study__img-caption {
    margin-top: var(--space-2);
  }

  /* Problem section: Support image full-width on mobile, auto height */
  .case-study-row--problem figure:has(.case-study__img--support) {
    margin-inline: calc(-1 * var(--space-3));
    width: calc(100% + 2 * var(--space-3));
    max-width: 100vw;
  }

  .case-study-row--problem .case-study__img--support {
    width: 100%;
    height: auto;
    margin-inline: 0;
  }

  /* Problem section: pull up toward rule above (like mobile-videos) */
  .case-study-row--problem {
    margin-top: calc(-1 * var(--space-6));
  }

  /* Research: less pull-up (spacing above Key Research Insight was too tight) */
  .case-study-row--research {
    margin-top: calc(-1 * var(--space-2));
  }

  .case-study-row--research .case-study__research-grid {
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-2);
  }

  /* Goals: reduce spacing around rules */
  .case-study-row--goals .rule-section__inner {
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
  }

  .case-study-row--principles .rule-section__inner {
    padding-top: var(--space-6);
  }

  .case-study-row--goals .panel--grid .panel__item:not(:first-child) {
    padding-top: var(--space-5);
  }

  /* Goals, final-designs: pull up toward rule above */
  .case-study-row--goals,
  .case-study-row--final-designs {
    margin-top: calc(-1 * var(--space-6));
  }

  /* Exploration: pull up toward rule above */
  .case-study-row--exploration {
    margin-top: calc(-1 * var(--space-6));
  }

  /* Impact: more pull-up (spacing above was too big) */
  .case-study-row--impact {
    margin-top: calc(-1 * var(--space-10));
  }

  .case-study-row--impact .rule-section__inner {
    padding-top: 0px;
    padding-bottom: var(--space-6);
  }

  .case-study-row--whats-next {
    margin-top: calc(-1 * var(--space-6));
  }

  /* Case study: header & title */
  .case-study__title {
    font-size: 36px;
    margin-bottom: 0px;
  }

  .case-study__title-row {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 0px;
  }

  .case-study__hero-img {
    margin-top: -24px;
  }

  .case-study__section-title + .panel .panel__item:nth-child(2) {
    margin-top: 0;
  }

  /* Process Highlights: content stacks on mobile; tab row wraps with tighter gap */
  .process-tabs {
    gap: var(--space-md);
  }

  .process-panel__grid {
    grid-template-columns: 1fr;
    row-gap: var(--space-4);
  }

  .process-panel__text {
    order: 1;
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }

  .process-panel__img {
    order: 2;
    padding-right: 0;
    text-align: center;
  }

  .process-panel__img img {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .process-panel__img .case-study__img-caption {
    width: 100%;
  }

  .process-tabs__btn {
    padding: var(--space-1) 0;
    font-size: var(--fs-caption);
  }

  .process-tabs__btn--active {
    padding-bottom: var(--space-1);
  }

  .process-panel__text .case-study__detail-list--no-bullets {
    font-size: 18px;
  }

  .process-panel {
    padding-top: var(--space-2);
    padding-bottom: var(--space-3);
  }

  /* Let the panel container shrink-wrap the active panel on mobile.
     We drop the overlapping grid/opacity trick here and just toggle display. */
  .process-panels {
    display: block;
  }

  .process-panels > .process-panel {
    grid-area: auto;
    opacity: 1;
    pointer-events: auto;
    transition: none;
    display: none;
  }

  .process-panels > .process-panel.process-panel--active {
    display: block;
  }

  /* Case study: details grid */
  .case-study__details {
    grid-template-columns: 1fr;
    row-gap: 24px;
  }

  .case-study__detail,
  .case-study__details .case-study__detail:nth-child(2),
  .case-study__details .case-study__detail:nth-child(3) {
    padding-left: 0;
    padding-right: 0;
  }

  /* Case study: research grid */
  .case-study__research-grid {
    grid-template-columns: 1fr;
  }

  .case-study__research-column:first-child,
  .case-study__research-column:last-child {
    padding-left: 0;
    padding-right: 0;
  }

  /* Case study: two-col, goals, four-col */
  .case-study__goals-grid,
  .case-study__four-col {
    grid-template-columns: 1fr;
  }

  .case-study__four-col .case-study__phase:nth-child(n + 2) {
    border-left: none;
    padding-left: 0;
  }

  .case-study__phase {
    padding-left: 0;
    padding-right: 0;
  }

  .case-study__two-col,
  .case-study__two-col--asymmetric {
    grid-template-columns: 1fr;
  }

  /* Mobile videos – reduce gap from 192px */
  .case-study__two-col--centered {
    gap: var(--space-4);
    flex-direction: column;
    align-items: center;
  }

  .case-study__img-block--video {
    max-width: 100%;
    min-height: 200px;
  }

  /* Case study: quote and impact – scale down large typography */
  .case-study__quote-block {
    margin-top: calc(-1 * var(--space-sm));
  }

  .case-study__quote-mark {
    font-size: 64px;
  }

  .case-study__quote-text {
    font-size: 22px;
    margin-top: calc(-1 * var(--space-sm));
  }

  .case-study__impact-stat,
  .case-study__impact-number {
    font-size: 64px;
  }

  .case-study__impact-stat {
    padding-left: 16px;
  }

  .case-study__impact-symbol {
    font-size: 24px;
    margin-inline: -16px;
  }

  /* Case study: exploration carousel */
  .case-study__exploration-grid {
    gap: var(--space-sm);
    padding-inline: calc(2.5vw + var(--space-3));
    scroll-padding-inline: calc(2.5vw + var(--space-3));
  }

  .case-study__exploration-grid figure:has(img) {
    flex-basis: min(84vw, 340px);
  }

  .case-study__section--exploration .case-study__exploration-inner {
    padding-inline: var(--space-3);
  }

  /* Case study: final designs */
  .final-designs {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-auto-rows: auto;
  }

  /* Flatten annotation wrappers so annotations can be reordered with image */
  .final-designs__annotations {
    display: contents;
    padding-top: 0;
  }

  .final-designs__annotation {
    position: static;
    transform: none;
    margin-bottom: var(--space-md);
  }

  /* Hide pipes on mobile */
  .final-designs__annotation-pipe {
    display: none;
  }

  /* Image first, then annotations in numerical order 1–6 */
  .final-designs__image-wrap {
    order: 0;
  }

  .final-designs__annotations--right .final-designs__annotation:nth-child(1) {
    order: 1;
    padding-top: var(--space-md);
  }

  .final-designs__annotations--left .final-designs__annotation:nth-child(1) {
    order: 2;
  }

  .final-designs__annotations--left .final-designs__annotation:nth-child(2) {
    order: 3;
  }

  .final-designs__annotations--right .final-designs__annotation:nth-child(2) {
    order: 4;
  }

  .final-designs__annotations--left .final-designs__annotation:nth-child(3) {
    order: 5;
  }

  .final-designs__annotations--right .final-designs__annotation:nth-child(3) {
    order: 6;
  }

  /* Case study: impact grid – align with page like other sections (remove extra tile padding) */
  .case-study__impact-grid {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .case-study__impact-tile--headline {
    grid-column: 1;
  }

  /* Remove horizontal padding from impact tiles so content aligns with rule-section__inner like Problem/What's Next */
  .case-study__impact-intro,
  .case-study__impact-tile,
  .case-study__impact-tile--headline {
    padding-left: 0;
    padding-right: 0;
  }

  /* Reduce spacing between impact intro and first tile */
  .case-study__impact-intro {
    padding-top: var(--space-1);
    padding-bottom: var(--space-2);
  }

  .case-study__impact-tile--headline {
    padding-top: var(--space-4);
  }

  /* Horizontal rules between each impact section */
  .case-study__impact-tile--headline,
  .case-study__impact-tile {
    position: relative;
  }

  /* Hide headline ::after on mobile – it stacked with tile ::before causing 2px */
  .case-study__impact-tile--headline::after {
    display: none;
  }

  .case-study__impact-tile--headline::before,
  .case-study__impact-grid > .case-study__impact-tile:nth-child(n+3)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -50vw;
    width: 100vw;
    height: 1px;
    background: var(--border-subtle-color);
    pointer-events: none;
  }

  /* Hide vertical dividers from rule-grid on small screens */
  .rule-grid--2,
  .rule-grid--3 {
    grid-template-columns: 1fr;
  }

  .rule-grid--2::before,
  .rule-grid--3::before,
  .rule-grid--3::after {
    display: none;
  }

  /* Section padding – 24px horizontal to align with page margin */
  .rule-section__inner {
    padding-inline: var(--space-3);
  }

  /* Learning gallery: full viewport width on mobile (override section padding) */
  .page--learning .learning-row--gallery .rule-section__inner {
    width: 100%;
    max-width: none;
    padding-inline: 0;
  }

  .page--learning .learning-row--gallery .panel,
  .page--learning .learning-row--gallery .panel__item--full {
    max-width: none;
  }

  /* Homepage mobile: horizontal rules between all stacked sections */
  .page:not(.case-study) .rule-section--no-top {
    border-top: var(--border-subtle);
  }

  /* Avoid duplicate rule when previous section already has bottom border */
  .page:not(.case-study) .rule-section--with-bottom + .rule-section--no-top {
    border-top: none;
  }

  /* Homepage rows – soften negative margins that pull sections together */
  .home-row--workshops {
    margin-bottom: 0;
  }

  .home-row--learning .panel--stacked__grid .panel__item:not(:first-child) {
    margin-bottom: var(--space-4);
  }

  /* Skills panel – reduce min-height and spacing between lists when stacked */
  .panel--skills .panel__item {
    min-height: 0;
  }

  .panel--skills .panel--grid-3__items {
    row-gap: var(--space-4);
  }

  /* Footer: mobile-only spacing and alignment */
  .page__footer {
    padding-top: var(--space-lg);
    text-align: left;
  }

  .case-study .page__footer {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
  }

  /* Footer: line break before "Feel free to say hi" */
  .footer__line-break {
    display: block;
  }

  /* Learning page mobile: simplify gallery to a single-column block layout */
  .page--learning .learning-masonry {
    display: block !important;
  }

  .page--learning .learning-masonry__row {
    display: block !important;
    width: 100%;
  }

  .page--learning .learning-masonry > .learning-masonry__item,
  .page--learning .learning-masonry > .learning-masonry__item--wide,
  .page--learning .learning-masonry > .learning-masonry__item--full,
  .page--learning .learning-masonry > .learning-masonry__row {
    grid-column: auto !important;
  }

  .page--learning .learning-masonry__item,
  .page--learning .learning-masonry__row .learning-masonry__item {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 0 var(--space-2);
    box-sizing: border-box;
  }

  .page--learning .learning-masonry__item img,
  .page--learning .learning-masonry__row .learning-masonry__item img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
  }
}

/* Hero two-col: stack only on very narrow screens (< 520px) */
@media (max-width: 520px) {
  .case-study__hero-two-col {
    grid-template-columns: 1fr;
    column-gap: 0;
    gap: var(--space-4);
  }
}

/* ==========================================================================
   Intentional interactions — scroll reveal, link underline, intro, panel hover
   Senior-design polish; respects prefers-reduced-motion.
   ========================================================================== */

/* Scroll reveal: sections fade/slide up when they enter view (only when .js-reveal) */
html.js-reveal .rule-section {
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

html.js-reveal .rule-section:not(.in-view) {
  opacity: 0;
  transform: translateY(14px);
}

html.js-reveal .rule-section.in-view {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html.js-reveal .rule-section,
  html.js-reveal .rule-section:not(.in-view),
  html.js-reveal .rule-section.in-view {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* (Animated link underline removed so all links use default underline) */

/* Intro entrance: hero fades in on load (only when JS will run the animation) */
html.js-intro-animate .intro .intro__eyebrow,
html.js-intro-animate .intro .intro__title {
  transition: opacity 0.5s ease-out;
}

html.js-intro-animate .intro:not(.intro--ready) .intro__eyebrow,
html.js-intro-animate .intro:not(.intro--ready) .intro__title {
  opacity: 0;
}

.intro.intro--ready .intro__eyebrow {
  opacity: 1;
}

.intro.intro--ready .intro__title {
  opacity: 1;
  transition-delay: 0.12s;
}

@media (prefers-reduced-motion: reduce) {
  html.js-intro-animate .intro .intro__eyebrow,
  html.js-intro-animate .intro .intro__title {
    opacity: 1;
    transition: none;
  }
}

/* Menu open: stagger link appearance (only when stagger classes are present) */
.menu.menu--stagger-ready .menu__link,
.menu.menu--stagger-ready .menu__heading {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.menu.menu--stagger-ready.menu--stagger-visible .menu__link,
.menu.menu--stagger-ready.menu--stagger-visible .menu__heading {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(0.05s * (var(--stagger-i, 0)));
}

@media (prefers-reduced-motion: reduce) {
  .menu.menu--stagger-ready .menu__link,
  .menu.menu--stagger-ready .menu__heading,
  .menu.menu--stagger-ready.menu--stagger-visible .menu__link,
  .menu.menu--stagger-ready.menu--stagger-visible .menu__heading {
    opacity: 1;
    transform: none;
    transition: none;
  }
}