/* ─────────────────────────────────────────────
   TOKENS
───────────────────────────────────────────── */
:root {
  /* Colors */
  --color-black:   #000000;
  --color-white:   #ffffff;
  --color-gray:    #7b8188;
  --color-divider-muted: #e1e3e5;
  --color-accent:  var(--color-gray);
  --color-accent-faded: var(--color-gray);
  --color-nav-bg:  var(--color-bg-default);
  --color-nav-ink: var(--color-black);
  --page-surface: var(--color-bg-default);
  --nav-surface: var(--page-surface, var(--color-nav-bg));
  --nav-divider-color: transparent;
  --nav-logo-filter: none;

  /* Semantic color roles - aliases only until applied by components */
  --color-bg-default: var(--color-white);
  --color-bg-inverse: var(--color-black);
  --color-text-default: var(--color-black);
  --color-text-muted: var(--color-gray);
  --color-text-inverse: var(--color-white);
  --color-border-default: var(--color-black);
  --color-border-muted: var(--color-divider-muted);
  --color-border-inverse: var(--color-white);

  /* Fonts */
  --font-mono:     'Space Mono', monospace;
  --font-sans:     'Open Sans', sans-serif;

  /* Type scale */
  --text-xs:    16px;
  --text-body:  28px;
  --text-sm:    24px;
  --text-md:    32px;
  --text-lg:    48px;

  /* Type roles - aliases only until applied by components */
  --type-display-size: 56px;
  --type-page-title-size: var(--text-lg);
  --type-section-title-size: 36px;
  --type-card-title-size: var(--text-md);
  --type-body-main-size: var(--text-body);
  --type-body-supporting-size: 22px;
  --type-annotation-size: 16px;
  --type-tag-size: 14px;

  /* Layout */
  --layout-page-max: 1920px;
  --layout-grid-columns: 12;
  --layout-page-margin: 15px;
  --layout-grid-gutter: 72px;
  --layout-grid-gutter-tight: 42px;
  --layout-editorial-gutter: 30px;
  --layout-gap-base: 20px;
  --layout-gap-split-top: 30px;
  --layout-gap-split-bottom: 70px;
  --layout-gap-editorial-row: 80px;
  --layout-gap-text-default: 12px;
  --layout-gap-content: 24px;
  --layout-gap-component: 40px;
  --layout-gap-section: 64px;
  --layout-gap-section-spacious: 96px;
  --layout-gap-card-inner: 24px;
  --layout-gap-card-stack: 16px;
  --layout-gap-title-body: 12px;
  --layout-gap-body-cta: 24px;
  --layout-measure-body: 680px;
  --layout-measure-body-wide: 860px;
  --layout-measure-caption: 520px;

  /* Spacing */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 96px;
  --space-page:  var(--layout-page-margin);
  --space-gap:   var(--layout-gap-base);
  --space-split-top: var(--layout-gap-split-top);
  --space-split-bottom: var(--layout-gap-split-bottom);
  --space-columns: var(--layout-grid-gutter);
  --space-columns-tight: var(--layout-grid-gutter-tight);
  --space-stack-xs: var(--space-1);
  --space-stack-sm: var(--space-2);
  --space-stack-md: var(--space-gap);
  --space-stack-lg: 28px;
  --space-stack-xl: 32px;
  --space-stack-2xl: var(--space-4);
  --space-stack-display: 50px;
  --space-stack-media: 18px;
  --space-inline-control: 12px;
  --space-chip-inline: 10px;
  --space-chip-block: 7px;
  --space-editorial-columns: var(--layout-editorial-gutter);
  --space-editorial-row: var(--layout-gap-editorial-row);
  --space-label-stack: 3px;
  --space-tab-inline: 18px;
  --space-tab-block: 12px;

  /* Semantic spacing relationships - defined globally, applied only when opted in */
  --space-text-tight: var(--space-1);
  --space-text-default: var(--layout-gap-text-default);
  --space-text-loose: var(--space-2);
  --space-content-group: var(--layout-gap-content);
  --space-component-group: var(--layout-gap-component);
  --space-section-default: var(--layout-gap-section);
  --space-section-spacious: var(--layout-gap-section-spacious);
  --space-card-inner: var(--layout-gap-card-inner);
  --space-card-stack: var(--layout-gap-card-stack);
  --space-card-section: var(--space-4);
  --space-media-caption: 12px;
  --space-label-value: 4px;
  --space-title-body: var(--layout-gap-title-body);
  --space-body-cta: var(--layout-gap-body-cta);

  /* Readable measures */
  --measure-body: var(--layout-measure-body);
  --measure-body-wide: var(--layout-measure-body-wide);
  --measure-caption: var(--layout-measure-caption);

  /* Letter-spacing */
  --tracking-tight:   -0.05em;
  --tracking-normal:  -0.03em;
  --tracking-loose:   -0.02em;

  /* Borders */
  --border-default:  1px solid var(--color-black);
  --border-light:    0.5px solid var(--color-gray);
  --border-muted: 1px solid var(--color-border-muted);
  --border-inverse-muted: 1px solid var(--color-border-inverse);
  --button-divider-on-light: var(--color-divider-muted);
  --button-divider-on-dark: var(--color-white);
  --button-divider-color: var(--button-divider-on-light);

  /* Motion — durations */
  --dur-fast:    160ms;
  --dur-base:    240ms;
  --dur-reveal:  480ms;
  --dur-slow:    640ms;
  --dur-hero-assemble: 1000ms;

  /* Motion — easings */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.25, 0.1,  0.25, 1);
  --ease-out:    cubic-bezier(0.0,  0.0,  0.2,  1);
  --ease-enter: cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0.0, 1, 1);
  --ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1);

  /* Z-index */
  --z-nav:  10000;
}

/* ─────────────────────────────────────────────
   RESET & BASE
───────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

[hidden] {
  display: none !important;
}

body *, body *::before, body *::after {
  border-radius: 0 !important;
}

html {
  font-size: 16px;
  overflow-x: clip;
}

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

body {
  --page-surface: var(--color-bg-default);
  --nav-surface: var(--page-surface);
  --color-nav-ink: var(--color-text-default);
  --nav-divider-color: rgba(0, 0, 0, 0.14);
  --nav-logo-filter: none;
  background-color: var(--color-white);
  color: var(--color-black);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

.page-work,
.page-anchor-v2,
.page-weave-v2 {
  --page-surface: var(--color-bg-inverse);
  --nav-surface: var(--page-surface);
  --color-nav-ink: var(--color-text-inverse);
  --nav-divider-color: rgba(255, 255, 255, 0.16);
  --nav-logo-filter: invert(1);
}

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

ul {
  list-style: none;
}

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

main {
  display: flex;
  flex-direction: column;
  gap: var(--space-gap);
}

/* ─────────────────────────────────────────────
   TYPE UTILITIES
───────────────────────────────────────────── */
.type-display {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 500;
  font-size: 56px;
  line-height: 0.95;
  letter-spacing: var(--tracking-tight);
  color: var(--color-black);
}

.type-h1 {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 500;
  font-size: 48px;
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--color-black);
}

.type-h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: 36px;
  line-height: 1;
  letter-spacing: var(--tracking-normal);
  color: var(--color-black);
}

.type-h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 1;
  letter-spacing: var(--tracking-normal);
  color: var(--color-black);
}

.type-body-lg {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 32px;
  line-height: 1;
  letter-spacing: var(--tracking-loose);
  color: var(--color-black);
}

.type-body-md {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 22px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--color-black);
}

.type-body-sm {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--color-black);
}

.type-meta-label,
.type-meta-value {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: var(--tracking-normal);
  color: currentColor;
}

.type-meta-tag {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0;
}

.type-tab {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.1;
  letter-spacing: 0;
  color: currentColor;
}

.type-nav {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 28px;
  line-height: 0.9;
  letter-spacing: var(--tracking-normal);
  color: var(--color-black);
}

.type-footer-social {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 28px;
  line-height: 1;
  letter-spacing: var(--tracking-normal);
  color: var(--color-black);
}

.type-footer-meta {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
  letter-spacing: var(--tracking-normal);
  color: currentColor;
}

.type-cta {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--color-black);
}

.type-ui-control {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0;
}

.type-title-section {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: var(--type-section-title-size);
  line-height: 1;
  letter-spacing: var(--tracking-normal);
  color: var(--color-text-default);
}

.type-title-card {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: var(--type-card-title-size);
  line-height: 1;
  letter-spacing: var(--tracking-normal);
  color: var(--color-text-default);
}

.type-body-main {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--type-body-main-size);
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--color-text-default);
}

.type-body-supporting {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--type-body-supporting-size);
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--color-text-default);
}

.type-annotation {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--type-annotation-size);
  line-height: 1.2;
  letter-spacing: var(--tracking-normal);
  color: var(--color-text-default);
}

.type-tag {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--type-tag-size);
  line-height: 1;
  letter-spacing: 0;
  color: var(--color-text-default);
}

/* ─────────────────────────────────────────────
   SPACING UTILITIES
   Dormant until classes are explicitly added.
───────────────────────────────────────────── */
.text-stack,
.content-stack,
.component-stack,
.section-stack {
  display: flex;
  flex-direction: column;
}

.text-stack {
  gap: var(--space-text-default);
}

.text-stack--tight {
  gap: var(--space-text-tight);
}

.text-stack--loose {
  gap: var(--space-text-loose);
}

.content-stack {
  gap: var(--space-content-group);
}

.component-stack {
  gap: var(--space-component-group);
}

.section-stack {
  gap: var(--space-section-default);
}

.section-stack--spacious {
  gap: var(--space-section-spacious);
}

.measure-body {
  max-width: var(--measure-body);
}

.measure-body-wide {
  max-width: var(--measure-body-wide);
}

.measure-caption {
  max-width: var(--measure-caption);
}

.card-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-card-stack);
}

.label-value-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-label-value);
}

.title-body-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-title-body);
}

/* ─────────────────────────────────────────────
   SHARED PATTERNS
───────────────────────────────────────────── */
.experience,
.ethos,
.timeline,
.case-overview,
.case-video-section,
.case-video-grid,
.case-text-section,
.case-features,
.case-research,
.case-takeaway {
  padding: var(--space-split-top) var(--space-page) var(--space-split-bottom);
}

.experience,
.case-overview__content,
.case-features__content,
.case-research__content,
.case-takeaway__content,
.case-video-section__content,
.case-video-grid__content,
.case-text-section__content {
  column-gap: var(--space-columns);
}

.type-h2,
.experience__heading,
.ethos__heading,
.timeline__heading,
.case-overview__heading,
.case-features__heading,
.case-research__heading,
.case-takeaway__heading,
.case-video-section__heading,
.case-video-grid__heading,
.case-text-section__heading {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: var(--text-lg);
  line-height: 1;
  letter-spacing: var(--tracking-normal);
  color: var(--color-black);
  white-space: nowrap;
}

.type-h3,
.timeline__role,
.project-entry__title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: var(--text-md);
  line-height: 1;
  letter-spacing: var(--tracking-normal);
  color: var(--color-black);
}

.type-body-md,
.experience__body,
.ethos__body,
.case-overview__body,
.case-video-section__body,
.case-video-grid__caption,
.case-text-section__body-text,
.case-features__body,
.case-research__body,
.case-takeaway__body-text {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--text-body);
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--color-black);
}

.type-meta-label,
.type-meta-value,
.case-overview__stack-label,
.case-breadcrumb,
.page-work .work-cinema__meta {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--text-xs);
  line-height: 1.2;
  letter-spacing: var(--tracking-normal);
}

.project-entry__desc {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--color-black);
}

.type-meta-tag,
.project-rail__chip {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0;
  color: var(--color-text-default);
}

.type-tab,
.case-features__tab {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: clamp(16px, 1.1vw, 18px);
  line-height: 1.1;
}

.type-nav,
.nav__link,
.nav__logo-mark {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-body);
  line-height: 0.9;
  letter-spacing: var(--tracking-normal);
  color: var(--color-black);
}

.type-footer-heading,
.contact-footer__headline {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--type-section-title-size);
  line-height: 1.08;
  letter-spacing: 0;
}

.type-footer-social,
.footer__social-link {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-body);
  line-height: 1;
  letter-spacing: var(--tracking-normal);
  color: var(--color-black);
}

.type-footer-meta,
.footer__copy {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--text-xs);
  line-height: 1;
  letter-spacing: var(--tracking-normal);
  color: currentColor;
}

.type-cta,
.text-link {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: var(--text-sm);
  line-height: 1.1;
  letter-spacing: 0;
}

.type-ui-control {
  font-family: var(--font-mono);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}

/* ─────────────────────────────────────────────
   COMPONENT PATTERNS
───────────────────────────────────────────── */
.experience__text-block,
.case-research__text,
.case-text-section__body,
.case-takeaway__body,
.case-features__active {
  display: flex;
  flex-direction: column;
  gap: var(--space-stack-md);
}

.project-rail__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: flex-start;
}

.project-rail__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-chip-block) var(--space-chip-inline);
  background: var(--color-black);
  color: var(--color-white);
  white-space: nowrap;
}

.case-features__tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-tab-block) var(--space-tab-inline);
  align-items: center;
  padding-bottom: var(--space-stack-sm);
  border-bottom: var(--border-light);
  overflow-x: auto;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 18px var(--space-page);
  border: var(--border-light);
  white-space: nowrap;
}

.experience__image-wrap,
.ethos__image-wrap,
.case-hero-img__wrap,
.project-entry__media,
.page-work .work-cinema__media,
.case-video,
.case-features__pane-img {
  position: relative;
  overflow: hidden;
}

.experience__image,
.ethos__image,
.case-hero-img__image,
.project-entry__image,
.project-entry__video,
.page-work .work-cinema__image,
.page-work .work-cinema__video,
.case-features__pane-img img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.project-editorial-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--space-editorial-columns);
  align-items: flex-start;
}

.project-entry {
  min-width: 0;
  padding-bottom: var(--space-editorial-row);
}

.project-entry__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-stack-md);
  color: inherit;
  text-decoration: none;
}

.project-entry__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-label-stack);
  min-width: 0;
  max-width: none;
}

/* ─────────────────────────────────────────────
   FOCUS
───────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* ─────────────────────────────────────────────
   SKIP LINK
───────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-page);
  z-index: 200;
  padding: 8px 16px;
  background: var(--color-black);
  color: var(--color-white);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  transition: top var(--dur-base) var(--ease-smooth);
}

.skip-link:focus {
  top: var(--space-page);
}

/* ─────────────────────────────────────────────
   CUSTOM CURSOR
───────────────────────────────────────────── */
.custom-cursor {
  display: none;
}

@media (min-width: 1024px) and (pointer: fine) {
  html.custom-cursor-enabled,
  html.custom-cursor-enabled * {
    cursor: none !important;
  }

  .custom-cursor {
    position: fixed;
    left: 0;
    top: 0;
    z-index: calc(var(--z-nav) + 20);
    display: flex;
    align-items: center;
    width: clamp(60px, 6.25vw, 120px);
    height: clamp(60px, 6.25vw, 120px);
    border-radius: 999px !important;
    background-color: #ffffff;
    color: #ffffff;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.3);
    transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .mix-blend-difference {
    mix-blend-mode: difference;
  }

  .custom-cursor_active_yes {
    opacity: 1;
  }

  .custom-cursor.custom-cursor_has-message {
    mix-blend-mode: normal;
  }

  .custom-cursor__message {
    flex-grow: 1;
    font-family: var(--font-mono);
    font-size: clamp(10px, 0.75vw, 14px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.03em;
    text-align: center;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 300ms ease;
  }

  .custom-cursor_hover {
    transform: translate(-50%, -50%) scale(0.625);
  }

  .custom-cursor_hover.custom-cursor_has-message {
    transform: translate(-50%, -50%);
  }

  .custom-cursor_hover .custom-cursor__message {
    opacity: 1;
  }
}

.page-transition-fill,
.page-transition-reveal {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-nav) + 40);
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .page-transition-fill,
  .page-transition-reveal {
    display: none;
  }
}

/* ─────────────────────────────────────────────
   NAV
───────────────────────────────────────────── */
.nav {
  --nav-surface: var(--color-bg-default);
  --color-nav-ink: var(--color-text-default);
  --nav-active-ink: var(--color-gray);
  --nav-divider-color: rgba(0, 0, 0, 0.14);
  --nav-logo-filter: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  padding: var(--space-page);
  min-height: max(calc(var(--space-page) * 2 + 23px), calc(var(--space-page) * 2 + 1.1em));
  background: var(--nav-surface);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  overflow: visible;
  transform: translateY(0);
  transition: transform 220ms ease;
  will-change: transform;
}

.nav.nav--scroll-hidden {
  transform: translateY(calc(-100% - 12px));
}

.nav.nav--hover-revealed {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .nav {
    transition: none;
  }
}

.nav--on-light {
  --nav-surface: var(--color-bg-default);
  --color-nav-ink: var(--color-text-default);
  --nav-active-ink: var(--color-gray);
  --nav-divider-color: transparent;
  --nav-logo-filter: none;
}

.nav--on-dark {
  --nav-surface: #000000;
  --color-nav-ink: var(--color-text-inverse);
  --nav-active-ink: var(--color-gray);
  --nav-divider-color: transparent;
  --nav-logo-filter: invert(1);
}

.page-anchor-v2 .nav,
.page-weave-v2 .nav,
.page-rehand-v2 .nav {
  --nav-surface: var(--color-bg-inverse);
  --color-nav-ink: var(--color-text-inverse);
  --nav-divider-color: transparent;
  --nav-logo-filter: invert(1);
}

.nav__col {
  display: flex;
}

.nav__col--left {
  align-items: flex-start;
}

.nav__col--right {
  position: static;
  flex-direction: row;
  align-items: flex-start;
  flex: 0 0 auto;
  gap: var(--space-component-group);
  padding: 0;
  background: var(--nav-surface);
}

.nav__logo {
  display: inline-flex;
  width: auto;
  flex: 0 0 auto;
  align-items: center;
  margin-top: 0;
  background: var(--nav-surface);
  color: var(--color-nav-ink);
  text-decoration: none;
}

.nav__logo-mark {
  display: block;
  color: var(--color-nav-ink);
  white-space: nowrap;
}

.nav__link {
  position: static;
  display: block;
  font-style: normal;
  background: var(--nav-surface);
  color: var(--color-nav-ink);
  white-space: nowrap;
  transition: opacity 0.18s var(--ease-smooth);
}

.nav__link:hover {
  opacity: 0.56;
}

.nav__link--active {
  color: var(--nav-active-ink);
  opacity: 1;
}

.nav .nav__link.nav__link--active,
.nav .nav__link.nav__link--active[aria-current="page"] {
  color: var(--nav-active-ink) !important;
}

.nav__link:not(.nav__link--active) {
  color: var(--color-nav-ink);
  opacity: 1;
}

.nav__link--active:hover {
  opacity: 1;
}

.nav__link:not(.nav__link--active):hover {
  opacity: 0.45;
}

html.custom-cursor-enabled .nav__link:hover,
html.custom-cursor-enabled .nav__link--active:hover,
html.custom-cursor-enabled .nav__link:not(.nav__link--active):hover {
  opacity: 1;
}

/* ─────────────────────────────────────────────
   NAV SPACER
───────────────────────────────────────────── */
.nav-spacer {
  height: 136px;
  width: 100%;
}

/* ─────────────────────────────────────────────
   HERO
───────────────────────────────────────────── */
.hero {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-page) var(--space-page) 0;
  min-height: 75svh;
}

.hero__content {
  display: flex;
  flex-direction: column;
  padding-bottom: var(--space-section-default);
}

.hero__heading {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 500;
  font-size: 64px;
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--color-black);
  max-width: 1000px;
}


.hero--about {
  min-height: 100svh;
  border-bottom: var(--border-default);
}

.hero--about .hero__content {
  padding-bottom: var(--space-section-default);
}

.hero--ai-code {
  min-height: 100svh;
  border-bottom: var(--border-default);
}

.hero--work,
.hero--archive {
  min-height: 100svh;
  border-bottom: var(--border-default);
}

.hero--home .hero__heading {
  max-width: 1100px;
}

.hero--home,
.hero--about,
.hero--ai-code,
.hero--archive {
  background: var(--color-white);
  position: relative;
  min-height: 100svh;
  overflow: hidden;
}

.hero--home .hero__content,
.hero--about .hero__content,
.hero--ai-code .hero__content,
.hero--archive .hero__content {
  position: relative;
  z-index: 1;
}

.page-home .hero__heading[data-hero-letter-animation] {
  position: relative;
  perspective: 1000px;
  transform-style: preserve-3d;
}

.page-home .home-hero-word {
  display: inline-block;
  white-space: nowrap;
  transform-style: preserve-3d;
}

.page-home .home-hero-char {
  backface-visibility: hidden;
  color: var(--color-black);
  display: inline-block;
  pointer-events: none;
  transform-origin: 50% 56%;
  transform-style: preserve-3d;
  will-change: transform, opacity, filter;
}

@media (prefers-reduced-motion: reduce) {
  .page-home .home-hero-char {
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

.hero__sub {
  width: 100%;
  max-width: var(--measure-body-wide);
}

.hero__sub--link {
  color: var(--color-black);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hero__sub--link:hover {
  color: var(--color-accent);
}

/* ─────────────────────────────────────────────
   INTRO HOME
───────────────────────────────────────────── */
.page-intro {
  --intro-bg: var(--color-white);
  --page-surface: var(--intro-bg);
  background: var(--intro-bg);
  color: var(--color-text-default);
}

.page-intro .nav,
.page-intro .nav__col--right,
.page-intro .nav__logo,
.page-intro .nav__link,
.page-intro .nav__logo-mark {
  --color-nav-ink: var(--color-black);
  --nav-surface: var(--intro-bg);
  background: var(--intro-bg);
  color: var(--color-nav-ink);
}

body.page-intro .nav,
body.page-intro .nav__logo,
body.page-intro .nav__logo-mark,
body.page-intro .nav .nav__link,
body.page-intro .nav .nav__link.nav__link--active,
body.page-intro .nav .nav__link.nav__link--active[aria-current="page"] {
  color: var(--color-black) !important;
  opacity: 1 !important;
}

.intro-home {
  min-height: 100svh;
  gap: 0;
  background: var(--intro-bg);
}

.page-intro[data-lenis-page="home"] .intro-home {
  background: var(--intro-bg);
}

.intro-home__section {
  display: grid;
  grid-template-columns: repeat(var(--layout-grid-columns), minmax(0, 1fr));
  grid-template-rows: minmax(140px, 1fr) auto;
  column-gap: var(--space-columns);
  min-height: 100svh;
  padding: calc(var(--nav-height, 72px) + var(--space-section-default)) var(--space-page) var(--space-page);
}

.intro-home__statement {
  grid-column: 3 / -1;
  align-self: center;
  max-width: var(--measure-body-wide);
  transform: translateY(-4svh);
}

.intro-home__heading {
  color: var(--color-text-default);
  text-wrap: balance;
}

.intro-home__heading a {
  color: inherit;
  text-decoration: none;
}

.intro-home__heading a:hover,
.intro-home__heading a:focus-visible {
  color: inherit;
}

.intro-home__meta {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(var(--layout-grid-columns), minmax(0, 1fr));
  column-gap: var(--space-columns);
  align-items: end;
  color: var(--color-text-default);
}

.intro-home .type-footer-meta {
  color: var(--color-black) !important;
}

.intro-home__social {
  grid-column: 1 / span 5;
  color: var(--color-black);
}

.intro-home__social a {
  color: var(--color-black) !important;
  text-decoration: none;
}

.intro-home__social a:hover,
.intro-home__social a:focus-visible {
  color: inherit;
}

.intro-home__copyright {
  grid-column: 7 / -1;
  justify-self: end;
  text-align: right;
  color: var(--color-black) !important;
  white-space: nowrap;
}

/* ─────────────────────────────────────────────
   ABOUT — GARRI STUDY
───────────────────────────────────────────── */
.page-about-garri {
  --page-surface: var(--color-white);
  --nav-surface: var(--page-surface);
  --color-nav-ink: var(--color-black);
  background: var(--page-surface);
  color: var(--color-text-default);
}

.page-about-garri .nav,
.page-about-garri .nav__col--right,
.page-about-garri .nav__logo,
.page-about-garri .nav__link,
.page-about-garri .nav__logo-mark {
  --color-nav-ink: var(--color-black);
  --nav-surface: var(--page-surface);
  background: var(--page-surface);
  color: var(--color-nav-ink);
}

.page-about-garri .nav .nav__link.nav__link--active,
.page-about-garri .nav .nav__link.nav__link--active[aria-current="page"] {
  color: var(--color-gray) !important;
}

.page-about-garri .footer {
  border-top: 0;
}

.about-garri {
  background: var(--page-surface);
  color: var(--color-text-default);
}

.about-garri__intro,
.about-garri__body,
.about-garri__details {
  display: grid;
  grid-template-columns: repeat(var(--layout-grid-columns), minmax(0, 1fr));
  column-gap: var(--space-columns);
  padding-left: var(--space-page);
  padding-right: var(--space-page);
}

.about-garri__intro {
  min-height: 100svh;
  align-items: center;
  padding-top: calc(var(--nav-height, 72px) + var(--space-section-default));
  padding-bottom: var(--space-section-default);
}

.about-garri__media {
  grid-column: 1 / span 4;
  align-self: center;
  height: min(70svh, 820px);
  min-height: 520px;
  overflow: hidden;
  background: var(--color-accent-faded);
}

.about-garri__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}

.about-garri__lead-wrap {
  grid-column: 5 / -1;
  align-self: center;
  min-width: 0;
}

.about-garri__lead {
  max-width: 11.5em;
  font-family: var(--font-sans);
  font-size: var(--type-display-size);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0;
  color: var(--color-text-default);
  overflow-wrap: break-word;
}

.about-garri__body {
  padding-top: var(--space-section-spacious);
  padding-bottom: var(--space-section-spacious);
}

.about-garri__body-spacer {
  grid-column: 1 / span 4;
}

.about-garri__copy {
  grid-column: 5 / -1;
  max-width: 980px;
  min-width: 0;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--color-text-default);
}

.about-garri__copy p + p {
  margin-top: 1em;
}

.about-garri__details {
  padding-top: var(--space-section-default);
  padding-bottom: var(--space-section-spacious);
}

.about-garri__detail {
  border-top: var(--border-muted);
  padding-top: var(--space-stack-sm);
  min-width: 0;
  font-family: var(--font-sans);
  font-size: var(--type-body-supporting-size);
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--color-text-default);
}

.about-garri__detail:nth-child(1) {
  grid-column: 1 / span 4;
}

.about-garri__detail:nth-child(2) {
  grid-column: 5 / span 4;
}

.about-garri__detail:nth-child(3) {
  grid-column: 9 / -1;
}

.about-garri__eyebrow {
  margin-bottom: var(--space-text-default);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  color: var(--color-text-default);
}

.about-experience {
  min-height: 100svh;
}

.about-experience__section {
  display: grid;
  grid-template-columns: repeat(var(--layout-grid-columns), minmax(0, 1fr));
  column-gap: var(--space-editorial-columns);
  min-height: 100svh;
  align-items: start;
  padding: calc(var(--nav-height, 72px) + var(--space-section-spacious)) var(--space-page) var(--space-section-spacious);
}

.about-experience__media {
  grid-column: 1 / span 4;
  align-self: start;
  position: relative;
  width: 100%;
  max-width: 420px;
  overflow: hidden;
  background: transparent;
  --about-reveal-x: 50%;
  --about-reveal-y: 50%;
  --about-reveal-radius: clamp(9px, 0.9375vw, 18px);
}

.about-experience__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: 50% 100%;
}

.about-experience__base-image {
  position: relative;
  z-index: 1;
}

.about-experience__media .about-experience__reveal-image {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  object-fit: cover;
  object-position: 50% 50%;
  transition: opacity 140ms ease;
  -webkit-mask-image: radial-gradient(circle var(--about-reveal-radius) at var(--about-reveal-x) var(--about-reveal-y), #000 99.5%, transparent 100%);
  mask-image: radial-gradient(circle var(--about-reveal-radius) at var(--about-reveal-x) var(--about-reveal-y), #000 99.5%, transparent 100%);
}

.about-experience__media.is-revealing .about-experience__reveal-image {
  opacity: 1;
}

.about-experience__content {
  grid-column: 5 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--space-content-group);
  min-width: 0;
  align-self: start;
  padding-top: var(--space-section-default);
}

.about-experience__copy {
  max-width: var(--measure-body-wide);
  font-family: var(--font-sans);
  letter-spacing: 0;
  color: var(--color-text-default);
}

.about-experience__copy h2 {
  font-family: var(--font-sans);
  font-size: var(--type-body-main-size);
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: 0;
  color: var(--color-text-default);
}

.about-experience__copy h2 + h2 {
  margin-top: var(--space-text-loose);
}

.about-credentials {
  display: grid;
  grid-template-columns: repeat(var(--layout-grid-columns), minmax(0, 1fr));
  column-gap: var(--space-editorial-columns);
  row-gap: var(--space-content-group);
  padding: 0 var(--space-page) var(--space-section-spacious);
}

.about-credentials__group {
  grid-column: 5 / -1;
  display: grid;
  grid-template-columns: minmax(120px, 0.28fr) minmax(0, 1fr);
  column-gap: var(--space-editorial-columns);
  align-items: baseline;
  max-width: var(--measure-body-wide);
  padding-top: var(--space-text-default);
  border-top: 1px solid var(--color-border-muted);
}

.about-credentials__label {
  margin: 0;
  color: var(--color-text-default);
}

.about-credentials__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-label-value);
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-credentials__item {
  margin: 0;
  color: var(--color-text-default);
}

/* ─────────────────────────────────────────────
   EXPERIENCE SECTION
───────────────────────────────────────────── */
.experience {
  display: flex;
  gap: var(--space-columns);
  align-items: flex-start;
  border-top: var(--border-default);
}

.experience__left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-stack-display);
  align-self: stretch;
}

.experience__image-wrap {
  flex: 1;
  height: 680px;
}

.page-home .experience__image-wrap {
  height: 860px;
}

.experience__image {
}

.experience--home-approach {
  border-top: none;
}

body[data-lenis-page="home"] .experience {
  border-top: none;
}

body[data-lenis-page="home"] .hero--home {
  border-bottom: none;
}

body[data-lenis-page="home"] main {
  background: var(--color-white);
}

body[data-lenis-page="home"] main > .experience.section-editorial:not(.experience--home-approach) .experience__image-wrap {
  height: 800px;
}

body[data-lenis-page="home"] main > .experience.section-editorial:not(.experience--home-approach) .section-editorial__panel {
  gap: var(--space-3);
  padding: var(--space-2) 0;
}

body[data-lenis-page="home"] .experience--home-approach .experience__image-wrap {
  height: 800px;
}

body[data-lenis-page="home"] .experience--home-approach .section-editorial__panel {
  gap: var(--space-3);
  padding: var(--space-2) 0;
}

body[data-lenis-page="about"] .ethos.section-editorial .ethos__image-wrap {
  height: 800px;
}

body[data-lenis-page="about"] .ethos.section-editorial .section-editorial__panel {
  gap: var(--space-3);
  padding: var(--space-2) 0;
}

body[data-lenis-page="about"] .about-home-section {
  border-top: none;
}

body[data-lenis-page="about"] .about-home-section .experience__image-wrap {
  height: 800px;
}

body[data-lenis-page="about"] .about-home-section .section-editorial__panel {
  gap: var(--space-3);
  padding: var(--space-2) 0;
}

.section-editorial {
  background: var(--color-white);
  margin-top: var(--space-section-spacious);
  margin-bottom: var(--space-section-spacious);
}

.section-editorial__panel {
  justify-content: space-between;
  gap: var(--space-component-group);
  padding: var(--space-card-inner) 0;
  position: relative;
  display: flex;
  flex-direction: column;
}

.section-editorial__panel::before,
.section-editorial__panel::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 0.5px;
  background: rgba(0, 0, 0, 0.18);
}

.section-editorial__panel::before {
  top: 0;
}

.section-editorial__panel::after {
  bottom: 0;
}

.section-editorial__header,
.section-editorial .ethos__content > .section-editorial__header {
  gap: 0;
}

.section-editorial .experience__heading,
.section-editorial .ethos__heading {
  color: var(--color-black);
}

.section-editorial__copy,
.section-editorial .ethos__content > .section-editorial__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-body-cta);
}

.section-editorial__body,
.section-editorial .ethos__body,
.section-editorial .experience__body {
  max-width: var(--measure-body);
  color: var(--color-black);
}

.section-editorial__cta.text-link,
.case-takeaway__cta.text-link {
  --button-divider-color: var(--button-divider-on-light);
  width: 100%;
  min-width: 0;
  margin-top: 0;
  padding: var(--space-title-body) 0;
  border: 0;
  border-top: 0.5px solid var(--button-divider-color);
  border-bottom: 0.5px solid var(--button-divider-color);
  justify-content: space-between;
}

.section-editorial__cta.text-link:hover,
.case-takeaway__cta.text-link:hover {
  background-color: transparent;
}

.text-link--split-arrow {
  align-items: center;
}

.text-link--split-arrow.text-link--on-light {
  color: var(--color-black);
}

.text-link--split-arrow.text-link--on-dark {
  color: var(--color-white);
}

.text-link--split-arrow.text-link--on-light:hover,
.text-link--split-arrow.text-link--on-light:focus-visible {
  color: var(--color-black);
}

.text-link--split-arrow.text-link--on-dark:hover,
.text-link--split-arrow.text-link--on-dark:focus-visible {
  color: var(--color-white);
}

.section-editorial__cta.text-link.text-link--on-light,
.case-takeaway__cta.text-link.text-link--on-light {
  --button-divider-color: var(--button-divider-on-light);
  border-top-color: var(--button-divider-color);
  border-bottom-color: var(--button-divider-color);
}

.section-editorial__cta.text-link.text-link--on-dark,
.case-takeaway__cta.text-link.text-link--on-dark {
  --button-divider-color: var(--button-divider-on-dark);
  border-top-color: var(--button-divider-color);
  border-bottom-color: var(--button-divider-color);
}

.section-editorial__cta.text-link.text-link--on-light:hover,
.case-takeaway__cta.text-link.text-link--on-light:hover {
  border-top-color: var(--button-divider-color);
  border-bottom-color: var(--button-divider-color);
}

.section-editorial__cta.text-link.text-link--on-dark:hover,
.case-takeaway__cta.text-link.text-link--on-dark:hover {
  border-top-color: var(--button-divider-color);
  border-bottom-color: var(--button-divider-color);
}

.text-link__split-arrow {
  position: relative;
  width: 21px;
  height: 21px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.text-link__split-arrow-half {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 10.5px;
  transition: transform var(--dur-fast) var(--ease-smooth);
}

.text-link--split-arrow.text-link--on-light .text-link__split-arrow-half {
  background: var(--color-black);
}

.text-link--split-arrow.text-link--on-dark .text-link__split-arrow-half {
  background: var(--color-white);
}

.text-link__split-arrow-half--left {
  left: 0;
}

.text-link__split-arrow-half--right {
  right: 0;
}

.text-link__split-arrow-glyph {
  position: relative;
  z-index: 1;
  width: 13px;
  height: 13px;
  display: block;
}

.text-link--split-arrow.text-link--on-light .text-link__split-arrow-glyph {
  filter: brightness(0) invert(1);
}

.text-link--split-arrow.text-link--on-dark .text-link__split-arrow-glyph {
  filter: none;
}

.text-link--split-arrow:hover .text-link__split-arrow-half--left,
.text-link--split-arrow:focus-visible .text-link__split-arrow-half--left {
  transform: translateY(-3px);
}

.text-link--split-arrow:hover .text-link__split-arrow-half--right,
.text-link--split-arrow:focus-visible .text-link__split-arrow-half--right {
  transform: translateY(3px);
}

.section-editorial__cta.text-link > img,
.section-editorial__cta.text-link:hover > img,
.case-takeaway__cta.text-link > img,
.case-takeaway__cta.text-link:hover > img {
  width: 21px;
  height: 21px;
  padding: 4px;
  background: var(--color-black);
  filter: none;
  transform: none;
}

.section-editorial .grain-canvas {
  opacity: 0.28;
}

/* ─────────────────────────────────────────────
   TEXT LINK BUTTON
───────────────────────────────────────────── */
.text-link {
  color: var(--color-black);
  background-color: transparent;
  width: 280px;
  transition: background-color var(--dur-fast) var(--ease-smooth),
              border-color     var(--dur-fast) var(--ease-smooth),
              color            var(--dur-fast) var(--ease-smooth);
}

.text-link:hover {
  background-color: var(--color-accent);
  border-color: var(--color-black);
  color: var(--color-white);
}

.text-link span {
  flex-shrink: 0;
}

.text-link > img {
  flex-shrink: 0;
  width: 1.1em;
  height: 1.1em;
  display: block;
  transform: translateX(0) scale(1);
  transform-origin: center;
  transition: filter    var(--dur-fast) var(--ease-smooth),
              transform 0.4s            var(--ease-smooth);
}

.text-link:hover > img {
  filter: invert(1);
  transform: translateX(5px) scale(1.15);
}

.text-link--disabled,
.text-link--disabled:hover {
  color: currentColor;
  background-color: transparent;
  border-color: currentColor;
  cursor: default;
  pointer-events: none;
}

.section-editorial__cta.text-link.text-link--disabled,
.section-editorial__cta.text-link.text-link--disabled:hover,
.case-takeaway__cta.text-link.text-link--disabled,
.case-takeaway__cta.text-link.text-link--disabled:hover {
  border-color: var(--button-divider-color);
}

.text-link:focus-visible {
  outline-offset: -3px;
}



/* ─────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────── */
.footer {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 100px var(--space-page) var(--space-page);
  border-top: var(--border-default);
  max-width: 1920px;
  width: 100%;
}

.footer__social {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 80px;
}
.footer__social-link { transition: color var(--dur-fast) var(--ease-smooth); }

.footer__social-link:hover {
  color: var(--color-accent);
}

.footer__wordmark {
  width: 100%;
  aspect-ratio: 54 / 15;
}

.footer__wordmark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left;
}

.footer__copy { margin-bottom: 20px; display: flex; align-items: center; gap: 0.35em; }

.footer__copy-icon {
  display: block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

.contact-footer.footer {
  display: block;
  max-width: none;
  padding: 0;
  border-top: 0.5px solid #ffffff;
  background: #000000;
  color: var(--color-text-inverse);
}

.contact-footer .type-footer-heading,
.contact-footer .type-footer-social,
.contact-footer .type-footer-meta,
.contact-footer .footer__social-link,
.contact-footer__headline,
.contact-footer__link-title,
.contact-footer__link-meta,
.contact-footer__copyright {
  color: var(--color-white) !important;
}

.contact-footer__inner {
  display: grid;
  grid-template-columns: repeat(var(--layout-grid-columns), minmax(0, 1fr));
  column-gap: var(--space-editorial-columns);
  row-gap: 72px;
  padding: 64px var(--space-page);
}

.contact-footer__headline {
  grid-column: 5 / -1;
  max-width: 760px;
  color: var(--color-text-inverse);
}

.contact-footer__links {
  grid-column: 5 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px var(--space-editorial-columns);
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-footer__link {
  display: inline-flex;
  flex-direction: column;
  gap: 8px;
  color: inherit;
  text-decoration: none;
}

.contact-footer__link-title {
  color: var(--color-text-inverse);
}

.contact-footer__link:hover .contact-footer__link-title,
.contact-footer__link:focus-visible .contact-footer__link-title {
  color: var(--color-text-inverse);
}

.contact-footer__link-meta {
  line-height: 1.2;
  color: var(--color-text-inverse) !important;
  opacity: 0.65;
}

.contact-footer__copyright {
  grid-column: -3 / -1;
  align-self: end;
  margin: 0;
  line-height: 1;
  color: var(--color-text-inverse) !important;
  opacity: 0.65;
  text-align: right;
}

@media (max-width: 820px) {
  .contact-footer__inner {
    display: flex;
    flex-direction: column;
    gap: 56px;
    padding: 56px var(--space-page) 48px;
  }

  .contact-footer__headline {
    max-width: none;
    font-size: clamp(40px, 12vw, 56px);
  }

  .contact-footer__links {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .contact-footer__copyright {
    text-align: left;
  }
}


/* ─────────────────────────────────────────────
   ABOUT — ETHOS
───────────────────────────────────────────── */
.ethos {
  display: flex;
  gap: var(--space-columns-tight);
  align-items: stretch;
}

.ethos--free-time {
  border-top: var(--border-default);
}

.ethos--free-time .ethos__image-wrap {
  order: 2;
}

.ethos--free-time .ethos__content {
  order: 1;
}

.ethos__image-wrap {
  flex: 1 1 0;
  min-width: 0;
  height: 860px;
}

.grain-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0.45;
  z-index: 1;
}

.ethos__image {
  object-position: center;
}

.ethos__content {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-gap);
}

.ethos__body {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--text-body);
  line-height: 1.21;
  color: var(--color-black);
}

/* ─────────────────────────────────────────────
   ABOUT — SVA
───────────────────────────────────────────── */
.sva {
  display: flex;
  height: 44.9375rem;
  padding: 5rem 4rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  align-self: stretch;
}

.sva__row {
  display: flex;
  gap: 32px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex-shrink: 0;
}

.sva__logo {
  width: 117px;
  height: 114px;
  flex-shrink: 0;
  object-fit: cover;
}

.sva__text {
  flex: 0 1 auto;
  max-width: 42rem;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-md);
  line-height: 1;
  letter-spacing: var(--tracking-loose);
  color: var(--color-black);
  text-align: center;
}

.sva__text a {
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-smooth);
}

.sva__text a:hover {
  color: var(--color-accent);
}

.sva--dark {
  background: var(--color-white);
}

.sva--dark .sva__text {
  color: var(--color-black);
}

.sva--dark .sva__text a {
  color: var(--color-black);
}

.sva--dark .sva__text a:hover {
  color: var(--color-accent);
}

body[data-lenis-page="about"] .ethos--free-time {
  border-top: none;
}

body[data-lenis-page="about"] .hero--about {
  border-bottom: none;
}

body[data-lenis-page="about"] .timeline {
  border-top: none;
}

body[data-lenis-page="work"] .hero--work {
  border-bottom: none;
}

body[data-lenis-page="ai-code"] .hero--ai-code {
  border-bottom: none;
}

body[data-lenis-page="archive"] .hero--archive {
  border-bottom: none;
}

/* ─────────────────────────────────────────────
   ABOUT — TIMELINE
───────────────────────────────────────────── */
.timeline { border-top: var(--border-default); }

.timeline__content {
  display: flex;
  align-items: flex-start;
}

.timeline__heading { flex: 1; }

.timeline__list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 25px;
  padding-top: 10px;
}

.timeline__divider {
  border: none;
  border-top: var(--border-default);
  margin: 0;
}

.timeline__item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.timeline__item-left {
  flex: 1;
  max-width: 305px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.timeline__item-left--full {
  max-width: 100%;
}

.timeline__company {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--text-sm);
  line-height: 1.21;
  color: var(--color-black);
  transition: color var(--dur-fast) var(--ease-smooth);
}

.timeline__company:hover {
  color: var(--color-accent);
}

.timeline__date {
  flex: 1;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--text-sm);
  line-height: 1.21;
  text-align: right;
  color: var(--color-black);
}

.timeline__clients {
  list-style: disc;
  padding-left: 1.2em;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--text-sm);
  line-height: 1.21;
  color: var(--color-black);
}

.timeline__clients a {
  transition: color var(--dur-fast) var(--ease-smooth);
}

.timeline__clients a:hover {
  color: var(--color-accent);
}

/* ─────────────────────────────────────────────
   AI + CODE
───────────────────────────────────────────── */
.project-editorial-section {
  padding: var(--space-section-default) var(--space-page);
  border-top: none;
  background: var(--color-black);
}

.page-ai-code .project-editorial-section {
  color: var(--color-white);
}

.project-entry__link.is-static {
  cursor: default;
}

.project-entry__link:focus-visible {
  outline: 2px solid var(--color-gray);
  outline-offset: 6px;
}

.project-entry__media {
  background: rgba(255, 255, 255, 0.08);
}

.project-entry--grid .project-entry__media {
  aspect-ratio: 462.99 / 308.66;
}

.project-entry__image,
.project-entry__video {
  transition: opacity 160ms var(--ease-smooth);
  opacity: 1;
}

.project-entry__link:hover .project-entry__image,
.project-entry__link:focus-visible .project-entry__image,
.project-entry__link:hover .project-entry__video,
.project-entry__link:focus-visible .project-entry__video {
  opacity: 0.94;
}

.project-editorial-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 0;
  row-gap: 0;
  background: var(--color-black);
}

.project-entry {
  --button-divider-color: var(--button-divider-on-light);
  padding: var(--space-card-inner);
  position: relative;
}

.project-editorial-section .project-entry,
.case-v2-related .project-entry {
  --button-divider-color: var(--button-divider-on-dark);
}

.project-entry:not(:nth-child(3n))::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 0.5px;
  background: var(--button-divider-color);
}

.project-entry__link {
  gap: var(--space-card-stack);
  color: var(--color-white);
}

.project-entry__text {
  gap: var(--space-card-stack);
}

.project-entry__title-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  padding-right: 42px;
}

.project-entry__title {
  color: var(--color-white);
  max-width: none;
}

.project-entry__arrow {
  position: absolute;
  top: 1px;
  right: 0;
  width: 21px;
  height: 21px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.project-entry__link:hover .project-entry__arrow .text-link__split-arrow-half--left,
.project-entry__link:focus-visible .project-entry__arrow .text-link__split-arrow-half--left {
  transform: translateY(-3px);
}

.project-entry__link:hover .project-entry__arrow .text-link__split-arrow-half--right,
.project-entry__link:focus-visible .project-entry__arrow .text-link__split-arrow-half--right {
  transform: translateY(3px);
}

.project-entry__divider {
  width: 100%;
  height: 1px;
  margin-top: 0;
  background: var(--button-divider-color);
}

.page-ai-code .project-entry__divider {
  margin-top: 0;
}

.project-entry__desc {
  padding-top: 0;
  color: var(--color-white);
  max-width: var(--measure-body);
}

.page-ai-code .project-entry__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-text-tight);
  padding-top: 0;
  color: var(--color-text-default);
  line-height: 1.2;
  letter-spacing: 0.074px;
}

.page-ai-code .project-entry__meta-sep {
  color: currentColor;
}

.page-ai-code .project-entry__meta-part {
  white-space: nowrap;
}

.page-ai-code .project-entry__link:hover .project-entry__arrow .text-link__split-arrow-half--left,
.page-ai-code .project-entry__link:focus-visible .project-entry__arrow .text-link__split-arrow-half--left {
  transform: translateY(-3px);
}

.page-ai-code .project-entry__link:hover .project-entry__arrow .text-link__split-arrow-half--right,
.page-ai-code .project-entry__link:focus-visible .project-entry__arrow .text-link__split-arrow-half--right {
  transform: translateY(3px);
}

html:has(body.page-ai-code),
html:has(body.page-work) {
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

html:has(body.page-archive) {
  scroll-behavior: smooth;
}

.page-ai-code {
  --page-surface: var(--color-bg-default);
  --nav-surface: var(--page-surface);
  --color-nav-ink: var(--color-text-default);
  --nav-divider-color: rgba(0, 0, 0, 0.14);
  --nav-logo-filter: none;
  background: var(--color-bg-default);
  color: var(--color-text-default);
}

.page-ai-code main {
  gap: 0;
}

.page-ai-code .hero--ai-code,
.page-ai-code .studio-project-snap {
  min-height: 100svh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.page-ai-code .contact-footer {
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}

.page-ai-code .project-editorial-section.studio-snap-list {
  padding: 0;
  background: var(--color-bg-default);
  color: var(--color-text-default);
}

.page-ai-code .studio-snap-list {
  display: block;
}

.studio-project-snap {
  display: grid;
  grid-template-columns: repeat(var(--layout-grid-columns), minmax(0, 1fr));
  column-gap: var(--space-editorial-columns);
  align-items: start;
  padding: calc(var(--nav-height, 72px) + var(--space-section-default)) var(--space-page) var(--space-section-default);
  background: var(--color-bg-default);
  color: var(--color-text-default);
}

.studio-project-snap__content {
  grid-column: 1 / 4;
  display: flex;
  flex-direction: column;
  gap: var(--space-content-group);
  min-width: 0;
}

.studio-project-snap__title-link,
.studio-project-snap__media-link {
  color: inherit;
  text-decoration: none;
}

.studio-project-snap__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-text-default);
}

.studio-project-snap__title {
  color: var(--color-text-default);
  margin: 0;
}

.studio-project-snap__desc {
  max-width: var(--measure-caption);
  color: var(--color-text-default);
  margin: 0;
}

.studio-project-snap__meta {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-border-muted);
}

.studio-project-snap__meta-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.42fr) minmax(0, 1fr);
  column-gap: var(--space-text-default);
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border-muted);
}

.studio-project-snap__meta-label,
.studio-project-snap__meta-value {
  color: var(--color-text-default);
}

.studio-project-snap__meta-value {
  margin: 0;
}

.studio-project-snap__meta-row--tech-stack .studio-project-snap__meta-value {
  white-space: nowrap;
}

.studio-project-snap__meta-row--tech-stack .studio-project-snap__meta-label {
  white-space: nowrap;
}

.studio-project-snap__media-link {
  grid-column: 4 / 12;
  display: block;
  width: calc(100% + var(--space-columns-tight));
  min-width: 0;
}

.studio-project-snap__media {
  width: 100%;
  height: min(62svh, 620px);
  min-height: 420px;
  overflow: hidden;
  border-radius: 12px !important;
  background: rgba(0, 0, 0, 0.06);
}

.studio-project-snap__image,
.studio-project-snap__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 160ms var(--ease-smooth), transform 220ms var(--ease-smooth);
}

a.studio-project-snap__media-link:hover .studio-project-snap__image,
a.studio-project-snap__media-link:focus-visible .studio-project-snap__image,
a.studio-project-snap__media-link:hover .studio-project-snap__video,
a.studio-project-snap__media-link:focus-visible .studio-project-snap__video {
  opacity: 0.94;
}

.studio-pagination {
  position: fixed;
  right: var(--space-page);
  top: 50%;
  z-index: calc(var(--z-nav) - 1);
  display: flex;
  flex-direction: column;
  gap: var(--space-text-default);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-50%);
  transition: opacity 160ms var(--ease-smooth), visibility 160ms var(--ease-smooth);
}

.studio-pagination.is-visible {
  opacity: 1;
  visibility: visible;
}

.studio-pagination__dot {
  width: 10px;
  height: 10px;
  aspect-ratio: 1;
  flex: 0 0 10px;
  display: block;
  padding: 0;
  border: 0;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 50% !important;
  background: var(--color-gray);
  cursor: pointer;
  overflow: hidden;
}

.studio-pagination__dot.is-active {
  background: var(--color-text-default);
}

.studio-pagination__dot:focus-visible {
  outline: 1px solid var(--color-text-default);
  outline-offset: 3px;
}

/* ─────────────────────────────────────────────
   ARCHIVE
───────────────────────────────────────────── */
.page-archive {
  --page-surface: var(--color-bg-default);
  --nav-surface: var(--page-surface);
  --color-nav-ink: var(--color-text-default);
  background: var(--color-bg-default);
  color: var(--color-text-default);
}

.archive-list {
  padding: 0 var(--space-page) var(--space-section-spacious);
}

.archive-list--count-1 {
  display: block;
}

.archive-list--count-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-editorial-columns);
  align-items: start;
}

.archive-list--count-many {
  column-count: 3;
  column-gap: var(--space-editorial-columns);
}

.archive-card {
  display: block;
  width: 100%;
  margin: 0 0 var(--space-section-default);
  break-inside: avoid;
  page-break-inside: avoid;
  color: inherit;
  text-decoration: none;
}

.archive-card--static {
  cursor: default;
}

.archive-card__media {
  width: 100%;
  margin: 0 0 var(--space-card-stack);
  overflow: hidden;
  border: 1px solid var(--color-border-muted);
  background: rgba(0, 0, 0, 0.04);
}

.archive-card__media:has(.archive-card__embed),
.archive-card__media:has(.archive-card__video) {
  aspect-ratio: 16 / 9;
}

.archive-card__image,
.archive-card__video,
.archive-card__embed {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  border: 0;
}

.archive-card__video,
.archive-card__embed {
  height: 100%;
}

.archive-card__content {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.archive-card__tag,
.archive-card__title {
  margin: 0;
  color: var(--color-text-default);
}

.archive-card__tag {
  color: var(--color-text-muted);
}

.archive-card__title {
  color: var(--color-text-default);
}

.archive-card__title-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

@media (max-width: 1100px) {
  .archive-list--count-many {
    column-count: 2;
  }
}

@media (max-width: 820px) {
  .archive-list--count-2 {
    grid-template-columns: 1fr;
  }

  .archive-list--count-many {
    column-count: 1;
  }
}


/* ─────────────────────────────────────────────
   WORK CARDS
───────────────────────────────────────────── */
.page-work .work-cinema {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 var(--space-page);
}

.page-work .work-cinema__project {
  min-height: 100svh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  align-items: center;
  padding: calc(var(--nav-height, 72px) + var(--space-section-default)) 0 var(--space-section-default);
}

.page-work .hero--work {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.page-work .contact-footer {
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}

.page-work .work-cinema__link {
  position: relative;
  display: block;
  width: 100%;
  height: clamp(560px, calc(100svh - var(--nav-height, 72px) - var(--space-section-default) - var(--space-section-default)), 860px);
  color: var(--color-text-inverse);
  background: var(--color-bg-inverse);
  border-radius: 12px !important;
  overflow: hidden;
}

.page-work .work-cinema__link--static {
  cursor: default;
}

.page-work .work-cinema__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--color-black);
}

.page-work .work-cinema__image,
.page-work .work-cinema__video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1);
  transition: transform 220ms var(--ease-smooth), opacity 220ms var(--ease-smooth);
}

.page-work .work-cinema__project:first-child .work-cinema__image {
  object-position: center 62%;
}

.page-work .work-cinema__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.3) 44%, rgba(0, 0, 0, 0.72) 100%);
  pointer-events: none;
}

.page-work .work-cinema__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100%;
  gap: var(--space-inline-control);
  padding: var(--space-card-inner);
  max-width: 44rem;
  transition: transform 220ms var(--ease-smooth), opacity 220ms var(--ease-smooth);
}

.page-work .work-cinema__project--right .work-cinema__content {
  margin-left: auto;
  text-align: right;
  align-items: flex-end;
}

.page-work .work-cinema__meta {
  line-height: 1.4;
  color: var(--color-text-inverse) !important;
}

.page-work .work-cinema__title {
  color: var(--color-text-inverse) !important;
}

.page-work .work-cinema__desc {
  max-width: 40rem;
  color: var(--color-text-inverse) !important;
}

.page-work .work-cinema__project--right .work-cinema__desc {
  margin-left: auto;
}

.page-work a.work-cinema__link:hover .work-cinema__image,
.page-work a.work-cinema__link:hover .work-cinema__video,
.page-work a.work-cinema__link:focus-visible .work-cinema__image,
.page-work a.work-cinema__link:focus-visible .work-cinema__video {
  transform: scale(1.02);
}

.page-work a.work-cinema__link:hover .work-cinema__content,
.page-work a.work-cinema__link:focus-visible .work-cinema__content {
  transform: translateY(-4px);
}

.page-work a.work-cinema__link:focus-visible {
  outline: 2px solid var(--color-text-inverse);
  outline-offset: -8px;
}

@media (max-width: 900px) {
  .page-work .work-cinema__link {
    height: clamp(420px, 68svh, 620px);
  }
}

/* ─────────────────────────────────────────────
   CASE STUDIES
───────────────────────────────────────────── */
.hero--anchor,
.hero--weave {
  min-height: 100svh;
  border-bottom: var(--border-default);
}

.page-weave .hero--weave {
  border-bottom: none;
}

.hero--anchor .hero__content,
.hero--weave .hero__content { gap: var(--space-stack-media); padding-bottom: 60px; }

.hero--anchor .hero__sub,
.hero--weave .hero__sub { max-width: 720px; }

.page-weave .hero--weave .hero__sub {
  font-family: var(--font-sans);
  font-size: 24px;
  line-height: 1.36;
  letter-spacing: 0;
  font-weight: 300;
  max-width: 760px;
}

.hero__spacer--case {
  height: clamp(72px, 16vh, 220px);
}

.case-breadcrumb {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--text-xs);
  color: currentColor;
  letter-spacing: var(--tracking-normal);
  transition: color var(--dur-fast) var(--ease-smooth);
}

.case-breadcrumb:hover {
  color: var(--color-accent);
}

.case-hero-img {
  padding: 0 var(--space-page);
}

.case-hero-video {
  padding: 0;
}

.case-hero-video__wrap {
  max-width: none;
}

.case-hero-video__wrap.case-video {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  border: 0;
}

.case-hero-img__wrap {
  max-height: 640px;
}

.case-hero-img__image {
  object-position: top center;
}

.case-overview {
  border-top: var(--border-default);
  min-height: 75svh;
  box-sizing: border-box;
}

.page-weave .case-overview {
  border-top: none;
}

.case-overview,
.case-video-section,
.case-video-grid,
.case-text-section,
.case-features,
.case-research,
.case-takeaway {
}

.case-overview,
.case-features__content,
.case-research__content,
.case-takeaway__content,
.case-video-section__content,
.case-video-grid__content,
.case-text-section__content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: flex-start;
  width: 100%;
}

.case-overview__left {
  min-width: 0;
  max-width: 42rem;
  justify-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--space-stack-md);
}

.case-overview__right {
  min-width: 0;
  max-width: 36rem;
  justify-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--space-stack-sm);
  padding-top: 0;
}

.case-overview__stack-label {
  color: currentColor;
  line-height: 1;
}

.case-video-section,
.case-video-grid,
.case-text-section {
  border-top: var(--border-default);
  min-height: 75svh;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
}

.case-video-section__left,
.case-video-grid__left,
.case-text-section__left {
  min-width: 0;
  justify-self: start;
}

.case-video-section__right,
.case-video-grid__right,
.case-text-section__right {
  min-width: 0;
  max-width: 42rem;
  justify-self: start;
}

.case-video-section__right,
.case-text-section__right {
  display: flex;
  flex-direction: column;
  gap: var(--space-stack-lg);
}

.case-video-grid__right {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.case-video-section__body,
.case-text-section__body {
  max-width: 38rem;
}

.page-weave .case-overview__body,
.page-weave .case-video-section__body,
.page-weave .case-video-grid__caption,
.page-weave .case-text-section__body-text,
.page-weave .case-takeaway__body-text {
  letter-spacing: 0;
  max-width: 38rem;
}

.case-video {
  width: 100%;
  max-width: 40rem;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(0, 0, 0, 0.14);
  background: var(--color-white);
}

.case-video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.page-weave .case-video-section--how .case-video-section__right {
  max-width: 48rem;
}

.page-weave .case-video-section--how {
  border-top: none;
}

.page-weave .case-video--vertical {
  width: 100%;
  aspect-ratio: 9 / 16;
  max-width: none;
  background: #000;
}

.page-weave .case-video--vertical video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  background: #000;
}

.case-takeaway__cta.text-link span {
  flex-shrink: 1;
  min-width: 0;
}

.case-video__empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  color: currentColor;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-normal);
}

.case-features {
  border-top: var(--border-default);
  min-height: 75svh;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
}

.case-features__content {
}

.case-features__left {
  min-width: 0;
  justify-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--space-stack-xl);
}

.case-features__right {
  min-width: 0;
  max-width: 42rem;
  justify-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--space-stack-lg);
}

.case-features__tab {
  display: inline-flex;
  align-items: center;
  padding: 0;
  background: none;
  border: 0;
  color: currentColor;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  flex: 0 0 auto;
  transition:
    color var(--dur-fast) var(--ease-smooth),
    opacity var(--dur-fast) var(--ease-smooth);
}

.case-features__tab:hover,
.case-features__tab.is-active {
  color: var(--color-black);
}

.case-features__tab.is-active {
  font-weight: 600;
}

.case-features__tab:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

.case-features__display {
  display: flex;
  flex-direction: column;
  gap: var(--space-stack-lg);
}

.case-features__panes {
  order: 2;
  width: 100%;
  max-width: 40rem;
}

.case-features__pane {
  display: none;
  width: 100%;
}

.case-features__pane.is-active {
  display: block;
}

.case-features__active { order: 1; }

.case-features__body {
  max-width: 38rem;
}

.case-features__pane-img {
  width: 100%;
  max-width: 40rem;
}

.case-features__pane-img img {
  max-height: 520px;
  height: 520px;
  border: 1px solid rgba(0, 0, 0, 0.14);
}

.page-anchor .case-features {
  min-height: 85svh;
}

.page-anchor .case-features__right {
  max-width: 48rem;
}

.page-anchor .case-features__display {
  gap: var(--space-4);
}

.page-anchor .case-features__body {
  max-width: 30rem;
}

.page-anchor .case-features__panes,
.page-anchor .case-features__pane-img {
  max-width: 48rem;
}

.page-anchor .case-features__pane-img img {
  max-height: 620px;
  height: 620px;
}

.case-research {
  border-top: var(--border-default);
  min-height: 75svh;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
}

.case-research__content {
}

.case-research__left {
  min-width: 0;
  justify-self: start;
}

.case-research__right {
  min-width: 0;
  max-width: 42rem;
  justify-self: start;
}

.case-research__body { flex: 1; }

.page-weave .case-video-grid__left {
  max-width: 28rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-stack-md);
}

.page-weave .case-video-grid__caption {
  max-width: 28rem;
}

.page-weave .case-clip-slider {
  width: 100%;
}

.page-weave .case-clip-slider__viewport {
  position: relative;
  width: 100%;
}

.page-weave .case-clip-slider__window {
  overflow: hidden;
  width: 100%;
}

.page-weave .case-clip-slider__track {
  display: flex;
  width: 100%;
  transition: transform var(--dur-med) var(--ease-smooth);
  will-change: transform;
}

.page-weave .case-clip-slider__slide {
  flex: 0 0 100%;
  min-width: 0;
}

.page-weave .case-clip-slider__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 0;
  background: rgba(255, 255, 255, 0.9);
  color: var(--color-black);
  cursor: pointer;
  z-index: 2;
  transition:
    opacity var(--dur-fast) var(--ease-smooth),
    background var(--dur-fast) var(--ease-smooth);
}

.page-weave .case-clip-slider__nav:hover:not(:disabled) {
  background: var(--color-white);
}

.page-weave .case-clip-slider__nav:disabled {
  opacity: 0.35;
  cursor: default;
}

.page-weave .case-clip-slider__nav--prev {
  left: var(--space-2);
}

.page-weave .case-clip-slider__nav--next {
  right: var(--space-2);
}

.page-weave .case-clip-slider__mute {
  position: absolute;
  right: var(--space-2);
  bottom: var(--space-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  height: 40px;
  padding: 0 var(--space-2);
  border: 0;
  background: rgba(255, 255, 255, 0.9);
  color: var(--color-black);
  cursor: pointer;
  z-index: 2;
  transition:
    opacity var(--dur-fast) var(--ease-smooth),
    background var(--dur-fast) var(--ease-smooth);
}

.page-weave .case-clip-slider__mute:hover {
  background: var(--color-white);
}

@media (max-width: 820px) {
  .page-weave .case-clip-slider__nav {
    width: 44px;
    height: 44px;
  }

  .page-weave .case-clip-slider__mute {
    min-width: 88px;
    height: 36px;
  }
}

/* ─────────────────────────────────────────────
   WEAVE V2
───────────────────────────────────────────── */
:is(.page-case-v2, .page-weave-v2) .hero--case-v2 {
  border-bottom: none;
  padding-top: 0;
  min-height: 58svh;
}

:is(.page-case-v2, .page-weave-v2) .hero--case-v2 .hero__content {
  gap: var(--space-title-body);
  padding-top: var(--space-content-group);
  padding-bottom: var(--space-section-default);
}

:is(.page-case-v2, .page-weave-v2) .case-v2-hero__media {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  aspect-ratio: 1512 / 500;
}

:is(.page-case-v2, .page-weave-v2) .case-v2-hero__meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

:is(.page-case-v2, .page-weave-v2) .case-v2-hero__nav {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1);
}

:is(.page-case-v2, .page-weave-v2) .case-v2-media-frame {
  position: relative;
  overflow: hidden;
}

:is(.page-case-v2, .page-weave-v2) .case-v2-media-frame iframe,
:is(.page-case-v2, .page-weave-v2) .case-v2-media-frame img,
:is(.page-case-v2, .page-weave-v2) .case-v2-media-frame video {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

:is(.page-case-v2, .page-weave-v2) .case-v2-media-frame img,
:is(.page-case-v2, .page-weave-v2) .case-v2-media-frame video {
  object-fit: cover;
}

:is(.page-case-v2, .page-weave-v2) .case-v2-media-toggle {
  position: absolute;
  right: var(--space-2);
  bottom: var(--space-2);
  z-index: 2;
  min-width: 0;
  padding: 10px 12px;
  border: 0;
  cursor: pointer;
}

:is(.page-case-v2, .page-weave-v2) .case-v2-story,
:is(.page-case-v2, .page-weave-v2) .case-v2-related {
  padding: var(--space-section-default) var(--space-page);
}

:is(.page-case-v2, .page-weave-v2) .case-v2-story-sequence {
  display: flex;
  flex-direction: column;
}

:is(.page-case-v2, .page-weave-v2) .case-v2-story__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-content-group);
  width: 100%;
}

:is(.page-case-v2, .page-weave-v2) .case-v2-story__media {
  aspect-ratio: 16 / 9;
}

:is(.page-case-v2, .page-weave-v2) .case-v2-story__chips {
  margin-top: var(--space-text-loose);
}

:is(.page-case-v2, .page-weave-v2) .case-v2-impact {
  padding: 0 var(--space-page);
}

:is(.page-case-v2, .page-weave-v2) .case-v2-impact__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--space-title-body);
  width: 100%;
  padding-top: var(--space-section-default);
  padding-bottom: var(--space-section-default);
}

:is(.page-case-v2, .page-weave-v2) .case-v2-impact__cta.section-editorial__cta.text-link {
  width: 100%;
  margin-top: var(--space-body-cta);
}

:is(.page-case-v2, .page-weave-v2) .case-v2-related {
  padding-top: var(--space-section-default);
}

:is(.page-case-v2, .page-weave-v2) .case-v2-related__header {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: var(--space-content-group);
  margin-bottom: var(--space-component-group);
}

:is(.page-case-v2, .page-weave-v2) .case-v2-related__all {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-transform: none;
}

:is(.page-case-v2, .page-weave-v2) .case-v2-related__icon {
  width: 40px;
  height: 20px;
  display: block;
  flex: 0 0 auto;
  transform: rotate(180deg);
}

:is(.page-case-v2, .page-weave-v2) .case-v2-related__all-label {
  display: block;
  white-space: nowrap;
}

.case-v2-related .project-editorial-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.case-v2-related .project-entry:not(:nth-child(3n))::after,
.case-v2-related .project-entry:nth-child(odd)::after {
  display: none;
}

.case-v2-related .project-entry__divider {
  display: block;
  margin-top: 0;
  background: var(--button-divider-color);
}

.case-v2-related .project-entry__title {
  color: var(--color-white);
}

.case-v2-related .project-entry__desc {
  color: var(--color-white);
}

.case-v2-related .project-entry__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-text-tight);
  padding-top: 0;
  color: var(--color-white);
  line-height: 1.2;
  letter-spacing: 0.074px;
}

.case-v2-related .project-entry__meta-sep {
  color: currentColor;
}

.page-anchor-v2 main {
  background: var(--color-black);
}

.page-anchor-v2 .hero--case-v2 {
  background: var(--color-black);
  color: var(--color-white);
}

.page-anchor-v2 .case-v2-hero__media {
  background: var(--color-black);
}

.page-anchor-v2 .case-v2-hero__label,
.page-anchor-v2 .case-v2-nav__sep,
.page-anchor-v2 .hero--case-v2 .case-breadcrumb,
.page-anchor-v2 .hero--case-v2 .hero__heading,
.page-anchor-v2 .hero--case-v2 .hero__sub,
.page-anchor-v2 .type-h1,
.page-anchor-v2 .type-body-lg,
.page-anchor-v2 .type-h2 {
  color: var(--color-white);
}

.page-anchor-v2 .hero--case-v2 .hero__sub {
  max-width: var(--measure-body);
}

.page-anchor-v2 .case-v2-media-frame {
  background: var(--color-black);
}

.page-anchor-v2 .case-v2-media-toggle {
  background: rgba(0, 0, 0, 0.78);
  color: var(--color-white);
}

.page-anchor-v2 .case-v2-story,
.page-anchor-v2 .case-v2-related {
  border-top: none;
}

.page-anchor-v2 .case-v2-story__chip {
  background: var(--color-white);
  color: var(--color-black);
}

.page-anchor-v2 .case-v2-story__text,
.page-anchor-v2 .case-v2-impact__value,
.page-anchor-v2 .case-v2-impact__label,
.page-anchor-v2 .case-v2-related__all {
  color: var(--color-white);
}

.page-anchor-v2 .case-v2-story__text {
  max-width: var(--measure-body);
}

.page-anchor-v2 .case-v2-impact {
  background: var(--color-black);
  color: var(--color-white);
}

.page-anchor-v2 .case-v2-impact__content {
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.page-anchor-v2 .case-v2-impact__label {
  max-width: var(--measure-body);
  color: var(--color-white);
}

.page-anchor-v2 .project-entry__link {
  color: var(--color-white);
}

.page-anchor-v2 .case-v2-related__icon {
  filter: brightness(0) invert(1);
}

@media (max-width: 960px) {
  .page-case-v2 .case-v2-hero__meta-row,
  .page-case-v2 .case-v2-related__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .page-case-v2 .case-v2-hero__nav {
    justify-content: flex-start;
  }
}

@media (max-width: 820px) {
  .page-case-v2 .case-v2-related .project-editorial-grid {
    grid-template-columns: 1fr;
  }

  .page-case-v2 .case-v2-related .project-entry:nth-child(odd)::after {
    display: none;
  }
}

.page-weave-v2 main {
  background: var(--color-black);
}

.page-weave-v2 .hero--case-v2 {
  border-bottom: none;
  background: var(--color-black);
  color: var(--color-white);
  min-height: 64svh;
}

.page-weave-v2 .hero--case-v2 .hero__content {
  gap: var(--space-title-body);
  padding-top: var(--space-content-group);
  padding-bottom: var(--space-section-default);
}

.page-weave-v2 .case-v2-hero__media {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  aspect-ratio: 1512 / 500;
  background: var(--color-black);
}

.page-weave-v2 .case-v2-hero__meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.page-weave-v2 .case-v2-hero__nav {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1);
}

.page-weave-v2 .case-v2-hero__label,
.page-weave-v2 .case-v2-nav__sep,
.page-weave-v2 .hero--case-v2 .case-breadcrumb,
.page-weave-v2 .hero--case-v2 .hero__heading {
  color: var(--color-white);
}

.page-weave-v2 .hero--case-v2 .hero__sub {
  color: var(--color-white);
  max-width: var(--measure-body);
}

.page-weave-v2 .type-h1,
.page-weave-v2 .type-body-md,
.page-weave-v2 .type-h2 {
  color: var(--color-white);
}

.page-weave-v2 .case-v2-media-frame {
  position: relative;
  overflow: hidden;
  background: var(--color-black);
}

.page-weave-v2 .case-v2-media-frame iframe,
.page-weave-v2 .case-v2-media-frame img,
.page-weave-v2 .case-v2-media-frame video {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

.page-weave-v2 .case-v2-media-frame img {
  object-fit: cover;
}

.page-weave-v2 .case-v2-media-frame video {
  object-fit: cover;
  background: var(--color-black);
}

.page-weave-v2 .case-v2-media-toggle {
  position: absolute;
  right: var(--space-2);
  bottom: var(--space-2);
  z-index: 2;
  min-width: 0;
  padding: 10px 12px;
  border: 0;
  background: rgba(0, 0, 0, 0.78);
  color: var(--color-white);
  cursor: pointer;
}

.page-weave-v2 .case-v2-story,
.page-weave-v2 .case-v2-related {
  border-top: none;
  padding: var(--space-section-default) var(--space-page);
}

.page-weave-v2 .case-v2-story-sequence {
  display: flex;
  flex-direction: column;
}

.page-weave-v2 .case-v2-story-sequence > .case-v2-story:first-child {
  padding-top: var(--space-section-default);
}

.page-weave-v2 .case-v2-story__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-content-group);
  width: 100%;
}

.page-weave-v2 .case-v2-story__media {
  aspect-ratio: 16 / 9;
}

.page-weave-v2 .case-v2-story__text {
  color: var(--color-white);
  max-width: var(--measure-body);
}

.page-weave-v2 .case-v2-story__chips {
  margin-top: var(--space-text-loose);
}

.page-weave-v2 .case-v2-story__chip {
  background: var(--color-white);
  color: var(--color-black);
}

.page-weave-v2 .case-v2-impact {
  background: var(--color-black);
  color: var(--color-white);
  padding: 0 var(--space-page);
}

.page-weave-v2 .case-v2-impact__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--space-title-body);
  width: 100%;
  padding-top: var(--space-section-default);
  padding-bottom: var(--space-section-default);
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.page-weave-v2 .case-v2-impact__value,
.page-weave-v2 .case-v2-impact__label {
  color: var(--color-white);
}

.page-weave-v2 .case-v2-impact__label {
  max-width: var(--measure-body);
  color: var(--color-white);
}

.page-weave-v2 .case-v2-impact__cta.section-editorial__cta.text-link {
  width: 100%;
  margin-top: var(--space-body-cta);
}

.page-weave-v2 .case-v2-related {
  padding-top: var(--space-section-default);
}

.page-weave-v2 .case-v2-related__header {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: var(--space-content-group);
  margin-bottom: var(--space-component-group);
}

.page-weave-v2 .case-v2-related__all {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-white);
  text-transform: none;
}

.page-weave-v2 .case-v2-related__icon {
  width: 40px;
  height: 20px;
  display: block;
  flex: 0 0 auto;
  transform: rotate(180deg);
  filter: brightness(0) invert(1);
}

.page-weave-v2 .case-v2-related__all-label {
  display: block;
  white-space: nowrap;
}

.case-v2-related.project-editorial-section {
  padding: var(--space-section-default) var(--space-page);
}

@media (max-width: 960px) {
  .page-weave-v2 .case-v2-hero__meta-row,
  .page-weave-v2 .case-v2-related__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .page-weave-v2 .case-v2-hero__nav {
    justify-content: flex-start;
  }
}

@media (max-width: 820px) {
  .page-weave-v2 .case-v2-related .project-editorial-grid {
    grid-template-columns: 1fr;
  }

  .page-weave-v2 .case-v2-related .project-entry:nth-child(odd)::after {
    display: none;
  }
}

/* ─────────────────────────────────────────────
   RER CASE STUDY
───────────────────────────────────────────── */
.page-rer main {
  gap: 0;
}

.page-rer .rer-main {
  background: var(--color-white);
}

.page-rer .rer-shell {
  width: 100%;
  margin: 0 auto;
  padding-left: var(--space-page);
  padding-right: var(--space-page);
}

.page-rer .hero--case-v2 {
  border-bottom: var(--border-default);
  min-height: 58svh;
  background: var(--color-black);
  color: var(--color-white);
  justify-content: flex-start;
}

.page-rer .hero--case-v2 .hero__content {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(280px, 0.78fr);
  grid-template-areas:
    "breadcrumb meta"
    "title meta"
    "intro meta";
  column-gap: var(--space-columns);
  row-gap: var(--space-title-body);
  padding-top: var(--space-content-group);
  padding-bottom: var(--space-section-default);
  flex: 1 0 auto;
  justify-content: flex-start;
  align-items: start;
}

.page-rer .case-v2-hero__media {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  aspect-ratio: 1512 / 500;
  background: var(--color-black);
}

.page-rer .case-v2-media-frame {
  position: relative;
  overflow: hidden;
}

.page-rer .case-v2-media-frame img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.page-rer .case-v2-hero__meta-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2);
  grid-area: breadcrumb;
}

.page-rer .case-v2-hero__label,
.page-rer .hero--case-v2 .case-breadcrumb,
.page-rer .hero--case-v2 .hero__heading,
.page-rer .hero--case-v2 .hero__sub,
.page-rer .rer-meta__label,
.page-rer .rer-meta__value,
.page-rer .rer-meta__value a {
  color: var(--color-white);
}

.page-rer .hero--case-v2 .hero__heading {
  grid-area: title;
  max-width: 14ch;
}

.page-rer .hero--case-v2 .hero__sub {
  grid-area: intro;
  max-width: var(--measure-body);
}

.page-rer .rer-meta {
  display: grid;
  grid-area: meta;
  grid-template-columns: 1fr;
  gap: var(--space-content-group);
  max-width: 100%;
  align-self: start;
  justify-self: stretch;
  padding-top: var(--space-section-default);
}

.page-rer .rer-meta__item {
  display: grid;
  gap: var(--space-label-value);
  align-content: start;
}

.page-rer .rer-meta__item:nth-child(1) {
  order: 3;
}

.page-rer .rer-meta__item:nth-child(2) {
  order: 1;
}

.page-rer .rer-meta__item:nth-child(3) {
  order: 2;
}

.page-rer .rer-meta__label {
  display: block;
  min-height: 0;
}

.page-rer .rer-meta__value {
  max-width: var(--measure-caption);
}

.page-rer .rer-meta__value a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-rer .rer-summary,
.page-rer .rer-text-list,
.page-rer .rer-media-section,
.page-rer .rer-role-section,
.page-rer .rer-report,
.page-rer .rer-iteration-intro,
.page-rer .rer-iteration-block {
  padding-top: var(--space-section-default);
  padding-bottom: var(--space-section-default);
}

.page-rer .rer-summary {
  box-sizing: border-box;
  border-top: var(--border-default);
  border-bottom: var(--border-default);
  background: var(--color-white);
  color: var(--color-black);
  display: flex;
  align-items: center;
  padding-bottom: var(--space-section-default);
}

.page-rer .rer-summary > .rer-shell {
  width: 100%;
}

.page-rer .rer-section-title {
  margin-bottom: var(--space-4);
  font-size: calc(var(--text-lg) + 4px);
}

.page-rer .rer-section-title--small {
  font-size: var(--text-body);
  line-height: 1.2;
}

.page-rer .rer-summary__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  column-gap: var(--space-section-default);
  row-gap: var(--space-content-group);
  align-items: start;
}

.page-rer .rer-summary__left {
  max-width: var(--measure-body-wide);
  display: grid;
  gap: var(--space-title-body);
}

.page-rer .rer-process-panel {
  display: grid;
  gap: var(--space-title-body);
  padding-top: calc(var(--text-lg) + 4px + var(--space-title-body));
}

.page-rer .rer-process-panel__label {
  color: var(--color-black);
  text-transform: uppercase;
  margin: 0;
}

.page-rer .rer-process-timeline {
  position: relative;
  display: grid;
  gap: var(--space-content-group);
  padding-left: 0;
}

.page-rer .rer-process-timeline::before {
  content: none;
}

.page-rer .rer-process-step {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--space-2);
  align-items: baseline;
  position: relative;
}

.page-rer .rer-process-step__content {
  display: grid;
  gap: var(--space-label-value);
}

.page-rer .rer-process-step__number {
  justify-self: center;
  align-self: baseline;
  color: var(--color-black);
  margin: 0;
}

.page-rer .rer-process-step__title {
  margin: 0;
  color: var(--color-black);
  font-weight: 500;
}

.page-rer .rer-process-step__copy {
  margin: 0;
  color: var(--color-black);
}

.page-rer .rer-summary .rer-section-title,
.page-rer .rer-summary .rer-summary__copy,
.page-rer .rer-summary .rer-summary__copy p {
  color: var(--color-black);
}

.page-rer .rer-summary .rer-section-title {
  margin-bottom: 0;
}

.page-rer .rer-summary__copy,
.page-rer .rer-section-copy__body,
.page-rer .rer-insight-card__body,
.page-rer .rer-compare-card__caption {}

.page-rer .rer-summary__copy,
.page-rer .rer-section-copy__body--stack,
.page-rer .rer-iteration-intro__copy,
.page-rer .rer-band__takeaway-copy {
  display: grid;
  gap: var(--space-content-group);
}

.page-rer .rer-summary__copy {
  gap: var(--space-title-body);
}

.page-rer .rer-phase-content {
  background: var(--color-white);
  padding-top: var(--space-content-group);
}

.page-rer .rer-phase-content__layout {
  display: grid;
  grid-template-columns: 192px minmax(0, 1fr);
  column-gap: var(--space-component-group);
  align-items: stretch;
  padding-bottom: 150px;
}

.page-rer .rer-phase-nav {
  min-width: 0;
  align-self: start;
  position: sticky;
  top: calc(var(--space-page) * 2 + 40px);
  height: fit-content;
}

.page-rer .rer-phase-nav__inner {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-split-top);
}

.page-rer .rer-phase-nav__label {
  margin: 0;
  color: currentColor;
  text-transform: uppercase;
}

.page-rer .rer-phase-nav__list {
  display: grid;
  gap: var(--space-1);
}

.page-rer .rer-phase-nav__link {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  color: currentColor;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-smooth);
}

.page-rer .rer-phase-nav__link:hover,
.page-rer .rer-phase-nav__link.is-active {
  color: var(--color-black);
  font-weight: 700;
}

.page-rer .rer-phase-main {
  min-width: 0;
}

.page-rer .rer-phase-section {
  display: grid;
  gap: var(--space-content-group);
  padding-top: var(--space-component-group);
  padding-bottom: var(--space-section-spacious);
  border-top: var(--border-default);
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: none;
  will-change: auto;
}

.page-rer .rer-phase-section[data-rer-phase-placeholder] {
  gap: var(--space-text-tight);
  padding-top: var(--space-content-group);
  padding-bottom: var(--space-content-group);
}

.page-rer .rer-phase-heading {
  display: grid;
  gap: var(--space-1);
}

.page-rer .rer-phase-heading__meta {
  margin: 0;
  color: currentColor;
  text-transform: uppercase;
}

.page-rer #rer-phase-interaction-design > .rer-phase-heading .rer-section-title {
  font-size: calc(var(--text-lg) + 4px);
}

.page-rer .rer-phase-subsection,
.page-rer .rer-phase-role,
.page-rer .rer-phase-role-stack {
  display: grid;
}

.page-rer .rer-phase-subsection,
.page-rer .rer-phase-role {
  gap: var(--space-card-stack);
}

.page-rer .rer-phase-subsection--compact {
  gap: var(--space-1);
}

.page-rer #rer-phase-discovery > .rer-phase-subsection {
  margin-top: var(--space-2);
}

.page-rer .rer-phase-role-stack {
  gap: var(--space-content-group);
}

.page-rer .rer-phase-block {
  margin-top: 0;
}

.page-rer .rer-phase-block--compact {
  margin-top: 0;
}

.page-rer .rer-phase-block--default {
  margin-top: 0;
}

.page-rer .rer-phase-block--spacious {
  margin-top: var(--space-content-group);
}

.page-rer .rer-phase-section .rer-band__title {
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: clamp(16px, 1.1vw, 18px);
  line-height: 1.1;
  letter-spacing: 0;
  color: currentColor;
}

.page-rer .rer-phase-section .rer-band__subtitle {
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: clamp(16px, 1.1vw, 18px);
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--color-black);
  max-width: 32rem;
}

.page-rer .rer-phase-section .rer-section-title {
  margin-bottom: 0;
}

.page-rer .rer-phase-section .rer-section-copy {
  margin-bottom: 0;
}

.page-rer .rer-phase-section .rer-action-cards {
  margin-bottom: 0;
}

.page-rer .rer-band {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: var(--color-black);
  color: var(--color-white);
}

.page-rer .rer-band__content {
  min-height: clamp(300px, 48svh, 720px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-title-body);
}

.page-rer .rer-band__title,
.page-rer .rer-band__subtitle {
  color: var(--color-white);
}

.page-rer .rer-band__subtitle {
  max-width: 24ch;
  line-height: 1.08;
}

.page-rer .rer-band:not(.rer-band--takeaway) {
  width: auto;
  margin-left: 0;
  background: var(--color-white);
  color: var(--color-black);
}

.page-rer .rer-band:not(.rer-band--takeaway) .rer-band__content {
  min-height: auto;
  padding-top: var(--space-split-top);
  padding-bottom: var(--space-split-bottom);
  justify-content: flex-start;
  gap: var(--space-title-body);
}

.page-rer .rer-band:not(.rer-band--takeaway) .rer-band__title,
.page-rer .rer-band:not(.rer-band--takeaway) .rer-band__subtitle {
  color: var(--color-black);
}

.page-rer .rer-band--takeaway {
  background: rgba(0, 0, 0, 0.95);
}

.page-rer .rer-band__content--takeaway {
  min-height: clamp(280px, 42svh, 620px);
}

.page-rer .rer-band__takeaway-copy {
  max-width: var(--measure-body-wide);
}

.page-rer .rer-band__takeaway-copy p {
  color: var(--color-white);
}

.page-rer .rer-summary__copy,
.page-rer .rer-section-copy__body,
.page-rer .rer-text-list__lead {
  max-width: var(--measure-body-wide);
}

.page-rer .rer-text-list__lead,
.page-rer .rer-iteration-intro__copy {
  max-width: var(--measure-body-wide);
}

.page-rer .rer-insight-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--space-columns);
  row-gap: var(--space-component-group);
  align-items: start;
}

.page-rer .rer-insight-grid--spacious {
  padding-top: var(--space-6);
}

.page-rer .rer-insight-list {
  display: grid;
  gap: var(--space-card-stack);
}

.page-rer .rer-insight-list--three {
  gap: var(--space-content-group);
}

.page-rer .rer-insight-list--connected {
  position: relative;
  gap: var(--space-card-stack);
}

.page-rer .rer-insight-list--connected::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(0.92 / (0.92 + 1.08) * 100%);
  width: 1px;
  background: rgba(0, 0, 0, 0.08);
  transform: translateX(calc(var(--space-3) / 2));
}

.page-rer .rer-insight-card {
  background: var(--color-white);
  border: 0;
  border-radius: 0 !important;
  padding: var(--space-card-inner);
}

.page-rer .rer-insight-card--connected {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  column-gap: var(--space-component-group);
  align-items: start;
}

.page-rer .rer-insight-card__content {
  min-width: 0;
}

.page-rer .rer-insight-card__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-text-tight);
  margin-bottom: var(--space-text-tight);
}

.page-rer .rer-insight-card__index {
  display: inline-block;
  min-width: 28px;
  margin: 0;
  color: currentColor;
  line-height: 1;
}

.page-rer .rer-insight-card__title {
  margin: 0;
  font-weight: 500;
}

.page-rer .rer-insight-connection {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-text-tight);
  align-items: start;
  min-width: 0;
  padding-left: var(--space-content-group);
}

.page-rer .rer-insight-connection__arrow {
  display: inline-block;
  color: currentColor;
  line-height: 1;
}

.page-rer .rer-insight-connection__text {
  margin: 0;
  color: var(--color-black);
}

.page-rer .rer-marker {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-top: 7px;
  flex: 0 0 auto;
  background: var(--color-black);
}

.page-rer .rer-marker--dot {
  border-radius: 0 !important;
}

.page-rer .rer-marker--diamond {
  transform: rotate(45deg);
}

.page-rer .rer-marker--triangle {
  width: 0;
  height: 0;
  background: transparent;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 14px solid var(--color-black);
}

.page-rer .rer-section-copy {
  display: grid;
  gap: var(--space-title-body);
  margin-bottom: 0;
}

.page-rer .rer-section-copy__body {
  max-width: var(--measure-body-wide);
}

.page-rer .rer-action-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-card-stack);
  margin-bottom: 0;
}

.page-rer .rer-action-card {
  min-height: 132px;
  padding: var(--space-card-inner);
  border: var(--border-muted);
  background: var(--color-white);
  border-radius: 0 !important;
  display: flex;
  align-items: flex-start;
  box-shadow: none;
}

.page-rer .rer-media-frame {
  border: var(--border-muted);
  background: var(--color-white);
  overflow: hidden;
  border-radius: 0 !important;
  box-shadow: none;
  margin-top: var(--space-content-group);
  margin-bottom: var(--space-content-group);
}

.page-rer .rer-phase-block-pair {
  display: grid;
  gap: var(--space-text-loose);
}

.page-rer .rer-phase-block-pair > .rer-phase-block {
  margin-top: 0;
}

.page-rer .rer-phase-block-pair > .rer-media-frame {
  margin-top: 0;
  margin-bottom: 0;
}

.page-rer .rer-media-frame img {
  width: 100%;
  height: auto;
  display: block;
}

.page-rer .rer-media-frame--tall img {
  width: 100%;
}

.page-rer .rer-iteration-block {
  padding-top: 0;
}

.page-rer .rer-chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-text-tight);
  margin-bottom: var(--space-title-body);
}

.page-rer .rer-chip-row__label {
  color: currentColor;
}

.page-rer .rer-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 14px;
  border-radius: 0 !important;
  border: var(--border-muted);
  background: var(--color-white);
  color: var(--color-black);
}

.page-rer .rer-compare-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-content-group);
  margin-top: var(--space-content-group);
  margin-bottom: var(--space-content-group);
}

.page-rer .rer-compare-card {
  display: grid;
  gap: var(--space-text-tight);
}

.page-rer .rer-media-frame--compact img {
  aspect-ratio: 676 / 348;
  object-fit: contain;
  background: var(--color-white);
}

.page-rer .rer-compare-card__caption {
  color: var(--color-black);
}

@media (max-width: 1100px) {
  .page-rer .hero--case-v2 .hero__content {
    grid-template-columns: 1fr;
    grid-template-areas:
      "breadcrumb"
      "title"
      "intro"
      "meta";
    column-gap: 0;
  }

  .page-rer .hero--case-v2 .hero__sub,
  .page-rer .rer-meta__value {
    max-width: none;
  }

  .page-rer .rer-meta {
    justify-self: start;
    align-self: start;
  }

  .page-rer .rer-phase-content__layout {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .page-rer .rer-phase-nav__inner {
    padding-top: var(--space-split-top);
  }

  .page-rer .rer-phase-nav {
    position: static;
    top: auto;
    height: auto;
  }

  .page-rer .rer-phase-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
  }

  .page-rer .rer-summary__layout {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .page-rer .rer-insight-card--connected {
    grid-template-columns: 1fr;
    row-gap: var(--space-1);
  }

  .page-rer .rer-insight-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .page-rer .rer-meta {
    grid-template-columns: 1fr;
  }

  .page-rer .rer-action-cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .page-rer .rer-summary,
  .page-rer .rer-text-list,
  .page-rer .rer-media-section,
  .page-rer .rer-role-section,
  .page-rer .rer-report,
  .page-rer .rer-iteration-intro,
  .page-rer .rer-iteration-block {
    padding-top: var(--space-split-top);
    padding-bottom: var(--space-split-bottom);
  }

  .page-rer .rer-band__content,
  .page-rer .rer-band__content--takeaway {
    min-height: 360px;
  }

  .page-rer .rer-phase-section {
    gap: var(--space-3);
  }

  .page-rer .rer-compare-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-rer .rer-phase-section {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }
}

@media (max-width: 640px) {
  .page-rer .rer-hero__intro,
  .page-rer .rer-text-list__lead,
  .page-rer .rer-iteration-intro__copy,
  .page-rer .rer-band__subtitle,
  .page-rer .rer-band__takeaway-copy p {
    font-size: 24px;
  }

  .page-rer .rer-insight-card,
  .page-rer .rer-action-card {
    padding: var(--space-2);
  }
}

.page-rer {
  --page-surface: var(--color-bg-default);
  --nav-surface: var(--page-surface);
  --color-nav-ink: var(--color-text-default);
  --nav-divider-color: var(--color-border-muted);
  --nav-logo-filter: none;
  --rer-radius: 8px;
  --rer-surface: color-mix(in srgb, var(--color-bg-inverse) 3.5%, var(--color-bg-default));
  --rer-surface-strong: color-mix(in srgb, var(--color-bg-inverse) 6.5%, var(--color-bg-default));
  --rer-border: var(--border-muted);
  --rer-muted: var(--color-text-muted);
  --rer-soft: var(--color-text-muted);
  --rer-success: #35a96f;
  --rer-warning: #d88a22;
  --rer-danger: #d44842;
  --rer-nav-min: calc(var(--space-section-spacious) + var(--space-component-group) + var(--space-text-loose));
  --rer-nav-max: calc(var(--space-section-spacious) * 2);
  --rer-nav-dot: calc(var(--space-1) - 2px);
  --rer-nav-rule-width: 2px;
  --rer-hero-media-min: calc(var(--space-section-spacious) * 2 + var(--space-content-group));
  --rer-hero-media-max: calc(var(--space-section-spacious) * 4);
  --rer-placeholder-min: calc(var(--space-section-spacious) * 2);
  --rer-annotation-width: calc(var(--space-section-spacious) * 2 + var(--space-content-group));
  --rer-annotation-offset: var(--space-content-group);
  --rer-annotation-line: var(--space-section-default);
  --rer-annotation-line-short: var(--space-component-group);
  --rer-progress-label-min: calc(var(--space-section-spacious) * 2);
  --rer-progress-label-max: calc(var(--space-section-spacious) * 3);
  --rer-progress-score-min: calc(var(--space-section-spacious) + var(--space-text-loose));
  --rer-progress-height: calc(var(--space-1) - 2px);
  --rer-status-rule-width: 3px;
  background: var(--color-white);
  color: var(--color-black);
}

.page-rer .rer-main {
  background: var(--color-white);
}

.page-rer .rer-layout {
  display: grid;
  grid-template-columns: minmax(var(--rer-nav-min), var(--rer-nav-max)) minmax(0, 1fr);
  gap: var(--space-section-default);
  width: 100%;
  max-width: var(--layout-page-max);
  margin: 0 auto;
  padding: calc(var(--nav-height, 86px) + var(--space-section-default)) var(--space-page) 0;
}

.page-rer .rer-side-nav {
  position: relative;
  min-width: 0;
}

.page-rer .rer-side-nav__inner {
  position: sticky;
  top: calc(var(--nav-height, 86px) + var(--space-content-group));
  display: grid;
  gap: var(--space-text-loose);
  padding-top: calc(var(--space-section-spacious) * 3);
}

.page-rer .rer-side-nav__label,
.page-rer .rer-section__kicker,
.page-rer .rer-hero__meta-label,
.page-rer .rer-info-card__label {
  color: var(--rer-soft);
}

.page-rer .rer-side-nav__list {
  display: grid;
  gap: var(--space-text-tight);
}

.page-rer .rer-side-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  color: var(--rer-muted);
  text-decoration: none;
  line-height: 1.1;
  transition: color var(--dur-fast) var(--ease-smooth);
}

.page-rer .rer-side-nav__link::before {
  content: '';
  width: var(--rer-nav-dot);
  height: var(--rer-nav-dot);
  margin-right: var(--space-text-tight);
  border-radius: 50% !important;
  background: var(--color-border-muted);
}

.page-rer .rer-side-nav__link::after {
  content: '';
  position: absolute;
  left: calc(var(--space-text-loose) * -1);
  top: 50%;
  width: var(--rer-nav-rule-width);
  height: var(--space-3);
  background: transparent;
  transform: translateY(-50%);
}

.page-rer .rer-side-nav__link:hover,
.page-rer .rer-side-nav__link.is-active {
  color: var(--color-black);
  font-weight: 600;
}

.page-rer .rer-side-nav__link.is-active::before,
.page-rer .rer-side-nav__link:hover::before {
  background: var(--color-black);
}

.page-rer .rer-side-nav__link.is-active::after {
  background: var(--color-black);
}

.page-rer .rer-page {
  min-width: 0;
}

.page-rer .rer-hero,
.page-rer .rer-section {
  border-bottom: var(--rer-border);
}

.page-rer .rer-hero {
  display: grid;
  gap: var(--space-content-group);
  padding-bottom: var(--space-section-default);
}

.page-rer .rer-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-content-group) var(--space-component-group);
}

.page-rer .rer-hero__meta-item {
  display: grid;
  gap: var(--space-label-value);
}

.page-rer .rer-hero__meta-label,
.page-rer .rer-hero__meta-value {
  margin: 0;
}

.page-rer .rer-hero__meta-value {
  color: var(--rer-muted);
}

.page-rer .rer-hero__title {
  max-width: 34ch;
  margin: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.page-rer .rer-hero__intro {
  max-width: var(--measure-body-wide);
  margin: 0;
  color: var(--color-text-default);
}

.page-rer .rer-hero__media {
  min-height: clamp(var(--rer-hero-media-min), 28vw, var(--rer-hero-media-max));
}

.page-rer .rer-section {
  display: grid;
  gap: var(--space-content-group);
  padding: var(--space-section-default) 0;
  scroll-margin-top: calc(var(--nav-height, 86px) + var(--space-content-group));
}

.page-rer .rer-section__header {
  display: grid;
  gap: var(--space-title-body);
}

.page-rer .rer-section__kicker,
.page-rer .rer-section__title,
.page-rer .rer-section__intro {
  margin: 0;
}

.page-rer .rer-section__title {
  max-width: 32ch;
  white-space: normal;
  overflow-wrap: anywhere;
}

.page-rer .rer-section__intro {
  max-width: var(--measure-body-wide);
  color: var(--color-text-default);
}

.page-rer .rer-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-card-stack);
}

.page-rer .rer-card-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.page-rer .rer-info-card,
.page-rer .rer-metric,
.page-rer .rer-participant,
.page-rer .rer-critical-finding,
.page-rer .rer-quote {
  background: var(--rer-surface);
  border: var(--rer-border);
  border-radius: var(--rer-radius) !important;
}

.page-rer .rer-info-card {
  display: grid;
  gap: var(--space-text-default);
  min-height: calc(var(--space-section-default) * 2);
  padding: var(--space-card-inner);
}

.page-rer .rer-info-card__label,
.page-rer .rer-info-card__text {
  margin: 0;
}

.page-rer .rer-info-card__text,
.page-rer .rer-copy {
  color: var(--color-text-default);
}

.page-rer .rer-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-card-stack);
}

.page-rer .rer-metric {
  display: grid;
  gap: var(--space-label-value);
  min-height: calc((var(--space-component-group) * 2) + var(--space-1));
  padding: var(--space-card-inner);
  place-items: center;
  text-align: center;
}

.page-rer .rer-metric__value {
  margin: 0;
}

.page-rer .rer-metric__label {
  margin: 0;
  color: var(--rer-muted);
}

.page-rer .rer-media-block {
  display: grid;
  gap: var(--space-media-caption);
  margin: 0;
}

.page-rer .rer-media-block img,
.page-rer .rer-media-placeholder {
  display: block;
  width: 100%;
  border: var(--rer-border);
  border-radius: var(--rer-radius) !important;
  background: var(--rer-surface);
}

.page-rer .rer-media-block img {
  height: auto;
}

.page-rer .rer-media-placeholder {
  min-height: var(--rer-placeholder-min);
  display: grid;
  place-items: center;
  color: var(--rer-soft);
}

.page-rer .rer-media-caption {
  margin: 0;
  color: var(--rer-soft);
}

.page-rer .rer-role-tabs {
  display: grid;
  gap: var(--space-content-group);
}

.page-rer .rer-role-tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-text-tight);
}

.page-rer .rer-role-tab {
  border: var(--rer-border);
  border-radius: var(--rer-radius) !important;
  background: var(--rer-surface);
  color: var(--rer-muted);
  cursor: pointer;
  padding: var(--space-chip-block) var(--space-tab-inline);
  transition: background var(--dur-fast) var(--ease-smooth), color var(--dur-fast) var(--ease-smooth), border-color var(--dur-fast) var(--ease-smooth);
}

.page-rer .rer-role-tab:hover,
.page-rer .rer-role-tab.is-active {
  border-color: var(--color-black);
  background: var(--color-black);
  color: var(--color-white);
}

.page-rer .rer-role-panel {
  display: grid;
  gap: var(--space-content-group);
}

.page-rer .rer-role-panel__copy {
  display: grid;
  gap: var(--space-title-body);
  max-width: var(--measure-body-wide);
}

.page-rer .rer-role-panel__title,
.page-rer .rer-role-panel__body {
  margin: 0;
}

.page-rer .rer-role-panel__body {
  color: var(--rer-muted);
}

.page-rer .rer-annotation-stage {
  position: relative;
  padding: var(--space-component-group);
  border: var(--rer-border);
  border-radius: var(--rer-radius) !important;
  background: var(--rer-surface);
  overflow: hidden;
}

.page-rer .rer-annotation-stage__media {
  position: relative;
  z-index: 1;
  max-width: 72%;
  margin: 0 auto;
}

.page-rer .rer-annotation-stage__media img {
  max-height: calc(var(--space-section-spacious) * 6);
  object-fit: contain;
  background: var(--color-white);
}

.page-rer .rer-annotation {
  position: absolute;
  z-index: 2;
  width: min(var(--rer-annotation-width), 28%);
  padding: var(--space-card-stack);
  border: var(--rer-border);
  border-radius: var(--rer-radius) !important;
  background: var(--color-bg-default);
}

.page-rer .rer-annotation::after {
  content: '';
  position: absolute;
  height: 1px;
  background: var(--color-border-muted);
}

.page-rer .rer-annotation--left {
  left: var(--rer-annotation-offset);
  top: 32%;
}

.page-rer .rer-annotation--left::after {
  left: 100%;
  top: 50%;
  width: var(--rer-annotation-line);
}

.page-rer .rer-annotation--right {
  right: var(--rer-annotation-offset);
  top: 32%;
}

.page-rer .rer-annotation--right::after {
  right: 100%;
  top: 50%;
  width: var(--rer-annotation-line);
}

.page-rer .rer-annotation--bottom {
  left: 50%;
  bottom: var(--rer-annotation-offset);
  transform: translateX(-50%);
}

.page-rer .rer-annotation--bottom::after {
  left: 50%;
  bottom: 100%;
  width: 1px;
  height: var(--rer-annotation-line-short);
}

.page-rer .rer-annotation__title,
.page-rer .rer-annotation__text {
  margin: 0;
}

.page-rer .rer-annotation__title {
  font-weight: 600;
}

.page-rer .rer-annotation__text {
  margin-top: var(--space-label-value);
  color: var(--rer-muted);
}

.page-rer .rer-participants {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-card-stack);
}

.page-rer .rer-participant {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-text-default);
  align-items: center;
  padding: var(--space-card-inner);
}

.page-rer .rer-participant__initial {
  display: grid;
  width: var(--space-content-group);
  height: var(--space-content-group);
  place-items: center;
  border-radius: 50% !important;
  background: var(--color-black);
  color: var(--color-white);
  font-weight: 600;
}

.page-rer .rer-participant__name,
.page-rer .rer-participant__role {
  margin: 0;
}

.page-rer .rer-participant__name {
  font-weight: 600;
}

.page-rer .rer-participant__role {
  color: var(--rer-muted);
}

.page-rer .rer-subhead {
  margin: var(--space-text-default) 0 0;
}

.page-rer .rer-progress-list {
  display: grid;
  gap: var(--space-text-loose);
}

.page-rer .rer-progress-row {
  display: grid;
  grid-template-columns: minmax(var(--rer-progress-label-min), var(--rer-progress-label-max)) minmax(0, 1fr) minmax(var(--rer-progress-score-min), auto);
  gap: var(--space-content-group);
  align-items: center;
}

.page-rer .rer-progress-row__label,
.page-rer .rer-progress-row__score {
  margin: 0;
  color: var(--rer-muted);
}

.page-rer .rer-progress-row__score {
  display: inline-flex;
  justify-content: flex-end;
  gap: var(--space-text-loose);
  color: var(--color-black);
  font-weight: 600;
}

.page-rer .rer-progress-row__score span {
  color: var(--rer-soft);
  font-weight: 400;
}

.page-rer .rer-progress-row__track {
  height: var(--rer-progress-height);
  overflow: hidden;
  border-radius: var(--space-section-spacious) !important;
  background: var(--rer-surface-strong);
}

.page-rer .rer-progress-row__fill {
  display: block;
  height: 100%;
  border-radius: inherit !important;
  background: var(--rer-success);
}

.page-rer .rer-progress-row.is-mid .rer-progress-row__fill {
  background: var(--rer-warning);
}

.page-rer .rer-progress-row.is-low .rer-progress-row__fill {
  background: var(--rer-danger);
}

.page-rer .rer-progress-list--compact .rer-progress-row__fill {
  background: var(--color-black);
}

.page-rer .rer-finding-list {
  display: grid;
  gap: var(--space-card-stack);
}

.page-rer .rer-critical-finding {
  position: relative;
  display: grid;
  gap: var(--space-text-default);
  padding: var(--space-card-inner);
  border-color: color-mix(in srgb, var(--rer-danger) 36%, var(--color-border-muted));
  background: color-mix(in srgb, var(--rer-danger) 8%, var(--color-bg-default));
}

.page-rer .rer-critical-finding::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--rer-status-rule-width);
  background: var(--rer-danger);
}

.page-rer .rer-critical-finding__tag {
  width: fit-content;
  margin: 0;
  padding: var(--space-chip-block) var(--space-chip-inline);
  border-radius: var(--rer-radius) !important;
  background: var(--rer-danger);
  color: var(--color-white);
  font-weight: 600;
  line-height: 1;
}

.page-rer .rer-critical-finding__title,
.page-rer .rer-critical-finding__text {
  margin: 0;
}

.page-rer .rer-critical-finding__text {
  color: var(--rer-muted);
}

.page-rer .rer-emphasis-line {
  margin: 0;
  color: var(--color-black);
  font-weight: 500;
}

.page-rer .rer-quote {
  position: relative;
  margin: 0;
  padding: var(--space-card-inner);
}

.page-rer .rer-quote::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--rer-status-rule-width);
  background: var(--color-black);
}

.page-rer .rer-quote__text {
  margin: 0;
  color: var(--rer-muted);
}

@media (max-width: 1180px) {
  .page-rer .rer-layout {
    grid-template-columns: 1fr;
    gap: var(--space-content-group);
  }

  .page-rer .rer-side-nav__inner {
    position: static;
    padding-top: 0;
  }

  .page-rer .rer-side-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-text-tight) var(--space-text-loose);
  }

  .page-rer .rer-side-nav__link::after {
    content: none;
  }
}

@media (max-width: 820px) {
  .page-rer .rer-layout {
    padding-top: calc(var(--nav-height, 76px) + var(--space-content-group));
  }

  .page-rer .rer-hero {
    padding-bottom: var(--space-component-group);
  }

  .page-rer .rer-section {
    padding: var(--space-component-group) 0;
  }

  .page-rer .rer-card-grid,
  .page-rer .rer-card-grid--two,
  .page-rer .rer-metrics,
  .page-rer .rer-participants {
    grid-template-columns: 1fr;
  }

  .page-rer .rer-annotation-stage {
    padding: var(--space-card-stack);
  }

  .page-rer .rer-annotation-stage__media {
    max-width: 100%;
  }

  .page-rer .rer-annotation {
    position: static;
    width: auto;
    margin-top: var(--space-text-default);
    transform: none;
  }

  .page-rer .rer-annotation::after {
    content: none;
  }

  .page-rer .rer-progress-row {
    grid-template-columns: 1fr;
    gap: var(--space-text-tight);
  }

  .page-rer .rer-progress-row__score {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .page-rer .rer-hero__intro,
  .page-rer .rer-section__intro,
  .page-rer .rer-copy,
  .page-rer .rer-info-card__text,
  .page-rer .rer-quote__text {
    font-size: var(--text-xs);
  }
}

.case-takeaway {
  border-top: var(--border-default);
  min-height: 75svh;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
}

.case-takeaway__content {
}

.case-takeaway__left {
  min-width: 0;
  justify-self: start;
}

.case-takeaway__right {
  min-width: 0;
  max-width: 42rem;
  justify-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--space-stack-2xl);
}

.case-takeaway__cta {
  align-self: flex-start;
}

.page-anchor .case-takeaway__right {
  gap: var(--space-6);
}

/* ─────────────────────────────────────────────
   HOME FEED
───────────────────────────────────────────── */
.page-home-feed {
  --home-feed-bg: #ffffff;
  background: var(--home-feed-bg);
  color: var(--color-text-default);
}

.page-home-feed .home-feed-main {
  background: var(--home-feed-bg);
}

.page-home-feed .nav {
  --nav-surface: var(--home-feed-bg);
  --color-nav-ink: var(--color-text-default);
  --nav-logo-filter: none;
}

.page-home-feed .nav,
.page-home-feed .nav__col--right,
.page-home-feed .nav__logo,
.page-home-feed .nav__link {
  background: var(--nav-surface);
  color: var(--color-nav-ink);
}

.page-home-feed .home-feed-hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  padding: var(--space-page) var(--space-page) 0;
  background: var(--home-feed-bg);
}

.page-home-feed .home-feed-hero__inner {
  width: 100%;
  padding-bottom: var(--space-section-default);
}

.page-home-feed .home-feed-hero__heading {
  max-width: 1000px;
  color: var(--color-text-default);
}

.page-home-feed .about-home-section {
  border-top: none;
  margin-top: 0;
  background: var(--home-feed-bg);
}

.page-home-feed .about-home-section .experience__image-wrap {
  height: 800px;
}

.page-home-feed .about-home-section .section-editorial__panel {
  gap: var(--space-3);
  padding: var(--space-2) 0;
}

.page-home-feed .home-feed-section {
  scroll-margin-top: calc(var(--nav-height, 96px) + 56px);
  padding: var(--space-split-top) var(--space-page) var(--space-split-bottom);
  background: var(--home-feed-bg);
}

.page-home-feed .home-feed-card__meta,
.page-home-feed .home-feed-interlude__eyebrow {
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.25;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-text-default);
}

.page-home-feed .home-feed-list,
.page-home-feed .home-feed-about {
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-section-spacious) + var(--space-section-default));
}

.page-home-feed .home-feed-section--work .home-feed-list {
  gap: var(--space-section-default);
}

.page-home-feed .home-feed-section--studio {
  background: var(--home-feed-bg);
  padding: var(--space-section-default) var(--space-page);
}

.page-home-feed .home-feed-section--studio .project-editorial-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 0;
  row-gap: 0;
  background: var(--home-feed-bg);
}

.page-home-feed .home-feed-section--studio .project-entry {
  --button-divider-color: var(--button-divider-on-light);
}

.page-home-feed .home-feed-section--studio .project-entry__link {
  color: var(--color-text-default);
}

.page-home-feed .home-feed-section--studio .project-entry__title,
.page-home-feed .home-feed-section--studio .project-entry__desc {
  color: var(--color-text-default);
}

.page-home-feed .home-feed-section--studio .project-entry__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-text-tight);
  padding-top: 0;
  color: var(--color-text-default);
  line-height: 1.2;
  letter-spacing: 0.074px;
}

.page-home-feed .home-feed-section--studio .project-entry__meta-sep {
  color: currentColor;
}

.page-home-feed .home-feed-section--studio .project-entry__link:hover .project-entry__arrow .text-link__split-arrow-half--left,
.page-home-feed .home-feed-section--studio .project-entry__link:focus-visible .project-entry__arrow .text-link__split-arrow-half--left {
  transform: translateY(-3px);
}

.page-home-feed .home-feed-section--studio .project-entry__link:hover .project-entry__arrow .text-link__split-arrow-half--right,
.page-home-feed .home-feed-section--studio .project-entry__link:focus-visible .project-entry__arrow .text-link__split-arrow-half--right {
  transform: translateY(3px);
}

.page-home-feed .home-feed-work-card {
  position: relative;
  min-height: 720px;
  border-top: 0;
}

.page-home-feed .home-feed-work-card .work-cinema__link {
  position: relative;
  display: block;
  min-height: 720px;
  color: var(--color-text-inverse);
  overflow: hidden;
  background: var(--color-bg-inverse);
}

.page-home-feed .home-feed-work-card .work-cinema__link--static {
  cursor: default;
}

.page-home-feed .home-feed-work-card .work-cinema__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--color-bg-inverse);
}

.page-home-feed .home-feed-work-card .work-cinema__image,
.page-home-feed .home-feed-work-card .work-cinema__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 220ms var(--ease-smooth), opacity 220ms var(--ease-smooth);
}

.page-home-feed .home-feed-work-card:first-child .work-cinema__image {
  object-position: center 62%;
}

.page-home-feed .home-feed-work-card .work-cinema__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.12) 0%,
    rgba(0, 0, 0, 0.3) 44%,
    rgba(0, 0, 0, 0.72) 100%
  );
  pointer-events: none;
}

.page-home-feed .home-feed-work-card .work-cinema__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 720px;
  gap: var(--space-inline-control);
  padding: 0 var(--space-page) var(--space-4);
  max-width: 44rem;
  color: var(--color-text-inverse);
  transition: transform 220ms var(--ease-smooth), opacity 220ms var(--ease-smooth);
}

.page-home-feed .home-feed-work-card.work-cinema__project--right .work-cinema__content {
  margin-left: auto;
  text-align: right;
  align-items: flex-end;
}

.page-home-feed .home-feed-work-card .work-cinema__meta,
.page-home-feed .home-feed-work-card .work-cinema__title,
.page-home-feed .home-feed-work-card .work-cinema__desc {
  color: var(--color-text-inverse);
}

.page-home-feed .home-feed-work-card .work-cinema__meta {
  line-height: 1.4;
}

.page-home-feed .home-feed-work-card .work-cinema__title {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: clamp(52px, 7vw, 96px);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: var(--tracking-tight);
}

.page-home-feed .home-feed-work-card .work-cinema__desc {
  max-width: 40rem;
}

.page-home-feed .home-feed-work-card.work-cinema__project--right .work-cinema__desc {
  margin-left: auto;
}

.page-home-feed .home-feed-work-card a.work-cinema__link:hover .work-cinema__image,
.page-home-feed .home-feed-work-card a.work-cinema__link:hover .work-cinema__video,
.page-home-feed .home-feed-work-card a.work-cinema__link:focus-visible .work-cinema__image,
.page-home-feed .home-feed-work-card a.work-cinema__link:focus-visible .work-cinema__video {
  transform: scale(1.02);
}

.page-home-feed .home-feed-work-card a.work-cinema__link:hover .work-cinema__content,
.page-home-feed .home-feed-work-card a.work-cinema__link:focus-visible .work-cinema__content {
  transform: translateY(-4px);
}

.page-home-feed .home-feed-work-card a.work-cinema__link:focus-visible {
  outline: 2px solid var(--color-text-inverse);
  outline-offset: -10px;
}

.page-home-feed .home-feed-card.section-editorial {
  display: flex;
  gap: var(--space-columns);
  margin: 0;
  border-top: 0;
  align-items: stretch;
  background: var(--home-feed-bg);
}

.page-home-feed .home-feed-card__media,
.page-home-feed .home-feed-card__text {
  flex: 1 1 0;
  min-width: 0;
}

.page-home-feed .home-feed-card--media-right .home-feed-card__media {
  order: 2;
}

.page-home-feed .home-feed-card--media-right .home-feed-card__text {
  order: 1;
}

.page-home-feed .home-feed-card__media {
  height: 800px;
}

.page-home-feed .home-feed-card__media-inner {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--color-bg-inverse);
}

.page-home-feed .home-feed-card__image,
.page-home-feed .home-feed-card__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 260ms var(--ease-smooth), opacity 220ms var(--ease-smooth);
}

.page-home-feed .home-feed-card__text {
  gap: var(--space-3);
  padding: var(--space-2) 0;
  overflow: hidden;
}

.page-home-feed .home-feed-card--media-right .home-feed-card__text {
  padding: var(--space-2) 0;
}

.page-home-feed .home-feed-card__title {
  max-width: var(--measure-body);
  width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  color: var(--color-text-default);
}

.page-home-feed .home-feed-card__desc {
  max-width: var(--measure-body);
  color: var(--color-text-default);
}

.page-home-feed .home-feed-card__desc--stacked {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.page-home-feed .home-feed-cta {
  --button-divider-color: var(--button-divider-on-light);
  width: 100%;
  margin-top: 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: var(--space-title-body) 0;
  border: 0;
  border-top: 0.5px solid var(--button-divider-color);
  border-bottom: 0.5px solid var(--button-divider-color);
  color: var(--color-text-default);
}

.page-home-feed .home-feed-card a.home-feed-cta:hover + .home-feed-card__image,
.page-home-feed .home-feed-card:has(a.home-feed-cta:hover) .home-feed-card__image,
.page-home-feed .home-feed-card:has(a.home-feed-cta:focus-visible) .home-feed-card__image,
.page-home-feed .home-feed-card:has(a.home-feed-cta:hover) .home-feed-card__video,
.page-home-feed .home-feed-card:has(a.home-feed-cta:focus-visible) .home-feed-card__video {
  transform: scale(1.015);
  opacity: 0.96;
}

.page-home-feed .home-feed-interlude {
  position: relative;
  height: 500px;
  min-height: 500px;
  overflow: hidden;
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
}

.page-home-feed .home-feed-interlude__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-home-feed .home-feed-interlude::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.48) 100%);
}

.page-home-feed .home-feed-interlude__content {
  position: relative;
  z-index: 1;
  height: 500px;
  min-height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  padding: 0 var(--space-page) var(--space-split-bottom);
}

.page-home-feed .home-feed-interlude__eyebrow {
  color: var(--color-white);
}

.page-home-feed .home-feed-interlude__title {
  max-width: 820px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 64px;
  line-height: 0.98;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--color-text-inverse);
}

@media (max-width: 1100px) {
  .page-home-feed .home-feed-card.section-editorial {
    gap: var(--space-columns-tight);
  }
}

@media (max-width: 820px) {
  .page-home-feed .home-feed-hero {
    padding-bottom: 54px;
  }

  .page-home-feed .home-feed-interlude__title {
    font-size: 42px;
    line-height: 1.02;
  }

  .page-home-feed .home-feed-section {
    padding: var(--space-split-top) var(--space-page) var(--space-split-bottom);
  }

  .page-home-feed .about-home-section .experience__image-wrap {
    height: 560px;
  }

  .page-home-feed .home-feed-list,
  .page-home-feed .home-feed-about {
    gap: var(--space-section-spacious);
  }

  .page-home-feed .home-feed-section--work .home-feed-list {
    gap: var(--space-section-default);
  }

  .page-home-feed .home-feed-section--studio .project-editorial-grid {
    grid-template-columns: 1fr;
  }

  .page-home-feed .home-feed-section--studio .project-entry:not(:nth-child(3n))::after {
    display: none;
  }

  .page-home-feed .home-feed-work-card,
  .page-home-feed .home-feed-work-card .work-cinema__link,
  .page-home-feed .home-feed-work-card .work-cinema__content {
    min-height: 560px;
  }

  .page-home-feed .home-feed-work-card .work-cinema__content {
    padding-bottom: var(--space-3);
  }

  .page-home-feed .home-feed-card.section-editorial {
    flex-direction: column;
    gap: var(--space-3);
  }

  .page-home-feed .home-feed-card--media-right .home-feed-card__media,
  .page-home-feed .home-feed-card--media-right .home-feed-card__text {
    order: initial;
  }

  .page-home-feed .home-feed-card__media {
    width: 100%;
    height: 560px;
  }

  .page-home-feed .home-feed-card__text,
  .page-home-feed .home-feed-card--media-right .home-feed-card__text {
    padding: var(--space-2) 0;
  }

  .page-home-feed .home-feed-cta {
    margin-top: 0;
  }

  .page-home-feed .home-feed-interlude,
  .page-home-feed .home-feed-interlude__content {
    min-height: 500px;
  }

  .page-home-feed .home-feed-interlude__content {
    padding: 0 var(--space-page) var(--space-split-bottom);
  }
}

/* ─────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────── */
@media (max-width: 1280px) {
  .ethos {
    flex-direction: column;
    padding-top: 30px;
    padding-bottom: 70px;
  }

  .ethos__content {
    order: 1;
    min-width: 0;
  }

  .ethos__image-wrap {
    order: 2;
    width: 100%;
    height: 760px;
  }
  .project-editorial-grid { grid-template-columns: 1fr; }

  .project-entry {
    padding: 21px 0;
  }

  .project-entry:not(:nth-child(3n))::after {
    display: none;
  }

  .project-entry + .project-entry::before {
    content: "";
    position: absolute;
    top: -0.5px;
    left: 0;
    right: 0;
    height: 0.5px;
    background: var(--button-divider-color);
  }

}

@media (max-width: 1100px) {
  :root {
    --text-body: 24px;
    --text-sm: 20px;
    --text-md: 28px;
    --text-lg: 40px;
    --space-page: 20px;
    --space-gap: 18px;
  }

  .type-display {
    font-size: 48px;
  }

  .nav {
    padding: 0 var(--space-page);
  }

  .nav-spacer {
    height: 96px;
  }

  .hero {
    min-height: 75svh;
  }

  .hero--anchor,
  .hero--weave {
    min-height: 100svh;
  }

  .hero__content {
    gap: 56px;
    padding-bottom: 30px;
  }

  .hero--about .hero__heading {
    font-size: 52px;
  }

  .hero--home,
  .hero--about,
  .hero--work,
  .hero--ai-code,
  .hero--archive {
    min-height: 100svh;
  }

  .experience {
    gap: 40px;
    align-items: stretch;
  }

  .experience__left {
    gap: 36px;
  }

  .experience__image-wrap {
    height: 620px;
  }

  .page-home .experience__image-wrap {
    height: 760px;
  }

  body[data-lenis-page="about"] .about-home-section .experience__image-wrap {
    height: 760px;
  }

  .ethos {
    gap: 28px;
  }

  .sva {
    height: auto;
    padding: 64px var(--space-page);
  }

  .sva__row {
    align-items: flex-start;
  }

  .sva__text {
    line-height: 1.2;
  }

  .timeline__content {
    gap: 48px;
  }

  .timeline__item-left {
    max-width: 420px;
  }

  .footer {
    gap: 88px;
    padding-top: 72px;
  }

}

@media (max-width: 820px) {
  :root {
    --text-xs: 14px;
    --text-body: 21px;
    --text-sm: 18px;
    --text-md: 24px;
    --text-lg: 34px;
    --space-page: 16px;
    --space-gap: 16px;
  }

  .type-display {
    font-size: 40px;
  }

  .nav {
    padding: 12px var(--space-page);
  }

  .nav__link,
  .nav__logo-mark {
    font-size: var(--text-xs);
    line-height: 1;
  }

  .nav-spacer {
    height: 128px;
  }

  .hero {
    min-height: 75svh;
    padding-top: 8px;
  }

  .hero--anchor,
  .hero--weave {
    min-height: 100svh;
  }

  .hero__content {
    gap: 40px;
    padding-top: 0;
    padding-bottom: 30px;
  }

  .hero__heading,
  .hero--about .hero__heading {
    max-width: none;
    font-size: var(--text-lg);
    line-height: 1.05;
  }

  .hero--home,
  .hero--about,
  .hero--work,
  .hero--ai-code,
  .hero--archive {
    min-height: 100svh;
  }

  .hero__sub {
    max-width: 34rem;
  }

  .intro-home__section {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(120px, 1fr) auto;
    row-gap: var(--space-section-default);
    padding-top: calc(var(--nav-height, 64px) + var(--space-section-default));
  }

  .intro-home__statement,
  .intro-home__meta,
  .intro-home__social,
  .intro-home__copyright {
    grid-column: 1;
  }

  .intro-home__meta {
    grid-template-columns: 1fr;
    row-gap: var(--space-text-tight);
  }

  .intro-home__copyright {
    justify-self: start;
    text-align: left;
    white-space: normal;
  }

  .experience,
  .ethos,
  .timeline__content,
  .sva__row {
    flex-direction: column;
  }

  .experience {
    padding-top: 30px;
    padding-bottom: 70px;
  }

  .experience__image-wrap,
  .ethos__image-wrap {
    width: 100%;
    height: 560px;
  }

  .page-home .experience__image-wrap {
    height: 560px;
  }

  body[data-lenis-page="about"] .about-home-section .experience__image-wrap {
    height: 560px;
  }

  .text-link {
    width: fit-content;
    min-width: 170px;
  }

  .sva {
    padding-top: 48px;
    padding-bottom: 48px;
    align-items: flex-start;
  }

  .sva__logo {
    width: 96px;
    height: auto;
  }

  .timeline {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .timeline__list {
    width: 100%;
    gap: 20px;
  }

  .timeline__item,
  .timeline__item-left {
    gap: 10px;
  }

  .timeline__item {
    flex-direction: column;
  }

  .timeline__item-left,
  .timeline__item-left--full,
  .timeline__date {
    max-width: none;
    width: 100%;
  }

  .timeline__date {
    text-align: left;
  }

  .footer {
    gap: 56px;
    padding-top: 56px;
  }

  .footer__social-link {
    font-size: var(--text-sm);
  }

  /* Anchor case study — 820px */
  .case-hero-img { padding: 0; }
  .case-hero-img__wrap { max-height: 420px; }
  .case-overview,
  .case-features__content,
  .case-research__content,
  .case-takeaway__content,
  .case-video-section__content,
  .case-video-grid__content,
  .case-text-section__content {
    grid-template-columns: 1fr;
    row-gap: 24px;
  }
  .case-overview__right { padding-top: 0; }
  .case-features__right { gap: 24px; }
  .case-features__tabs { gap: 12px 18px; }
}

@media (max-width: 540px) {
  :root {
    --text-body: 18px;
    --text-sm: 16px;
    --text-md: 20px;
    --text-lg: 29px;
    --space-page: 14px;
    --mobile-nav-size: clamp(16px, 4.45vw, 18px);
    --mobile-nav-gap: clamp(10px, 3.2vw, 14px);
    --mobile-intro-size: clamp(24px, 6.8vw, 30px);
    --mobile-page-heading-size: var(--mobile-intro-size);
    --mobile-body-readable-size: clamp(16px, 4.35vw, 18px);
    --mobile-footer-heading-size: clamp(20px, 5.4vw, 23px);
    --mobile-work-card-height: clamp(600px, 82svh, 740px);
  }

  .type-display {
    font-size: 36px;
  }

  .nav {
    align-items: center;
    min-height: calc(env(safe-area-inset-top, 0px) + 56px);
    padding: calc(env(safe-area-inset-top, 0px) + 13px) var(--space-page) 13px;
  }

  .nav__col {
    align-items: center;
  }

  .nav__col--right {
    gap: var(--mobile-nav-gap);
  }

  .nav .nav__link,
  .nav .nav__logo-mark {
    font-size: var(--mobile-nav-size) !important;
    line-height: 1 !important;
  }

  .nav-spacer {
    height: 118px;
  }

  .hero__content {
    gap: 28px;
    padding-bottom: 30px;
  }

  .page-work .hero--work,
  .page-ai-code .hero--ai-code,
  .page-archive .hero--archive {
    min-height: auto;
    justify-content: flex-start;
    padding: calc(var(--nav-height, 64px) + var(--space-component-group)) var(--space-page) var(--space-content-group);
  }

  .page-work .hero--work .hero__content,
  .page-ai-code .hero--ai-code .hero__content,
  .page-archive .hero--archive .hero__content {
    padding-bottom: 0;
  }

  body.page-work .hero.hero--work .hero__heading,
  body.page-ai-code .hero.hero--ai-code .hero__heading,
  body.page-archive .hero.hero--archive .hero__heading {
    font-size: var(--mobile-page-heading-size) !important;
    line-height: 1.05 !important;
    max-width: 100%;
    width: 100%;
  }

  body.page-intro .intro-home__heading {
    font-size: var(--mobile-intro-size) !important;
    line-height: 1.08 !important;
  }

  .intro-home__statement {
    max-width: 100%;
    transform: translateY(-2svh);
  }

  .experience,
  .ethos,
  .timeline,
  .footer {
    padding-left: var(--space-page);
    padding-right: var(--space-page);
  }

  .experience__left {
    gap: 28px;
  }

  .experience__image-wrap,
  .ethos__image-wrap {
    height: 320px;
  }

  .ethos {
    gap: 20px;
  }

  .sva {
    padding-left: var(--space-page);
    padding-right: var(--space-page);
  }

  .sva__text {
    font-size: 18px;
  }

  .timeline__role {
    line-height: 1.15;
  }

  .timeline__company,
  .timeline__date,
  .timeline__clients {
    font-size: 16px;
  }

  .footer {
    gap: 40px;
    padding-top: 40px;
  }

  .footer__social-link {
    font-size: 18px;
  }

  .project-entry__title {
    font-size: clamp(28px, 8.5vw, 40px);
    line-height: 1.18;
    letter-spacing: -0.9px;
  }

  .project-entry__desc {
    font-size: 15px;
  }

  .page-work .work-cinema__project {
    padding: var(--space-content-group) 0 var(--space-section-default);
  }

  .page-work .work-cinema__link {
    height: var(--mobile-work-card-height);
  }

  .page-work .work-cinema__content {
    padding: var(--space-card-inner);
  }

  html:has(body.page-ai-code),
  html:has(body.page-work) {
    scroll-snap-type: none;
  }

  .page-ai-code .hero--ai-code,
  .page-ai-code .studio-project-snap,
  .page-archive .hero--archive,
  .page-work .hero--work,
  .page-work .work-cinema__project {
    min-height: auto;
    scroll-snap-align: none;
  }

  .page-ai-code .contact-footer,
  .page-work .contact-footer {
    scroll-snap-align: none;
  }

  .studio-project-snap {
    display: flex;
    flex-direction: column;
    gap: var(--space-content-group);
    padding: var(--space-content-group) var(--space-page) calc(var(--space-section-default) + env(safe-area-inset-bottom, 0px));
  }

  .studio-project-snap__content {
    width: 100%;
    order: 2;
  }

  .studio-project-snap__media-link {
    width: 100%;
    order: 1;
  }

  .studio-pagination {
    display: none;
  }

  .studio-project-snap__media {
    min-height: 0;
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .studio-project-snap__meta-row {
    grid-template-columns: 96px minmax(0, 1fr);
  }

  /* Anchor case study — 540px */
  .case-hero-img__wrap { max-height: 280px; }
}

@media (max-width: 1100px) {
  .about-experience__section {
    column-gap: var(--space-editorial-columns);
  }

  .about-experience__media {
    grid-column: 1 / span 4;
  }

  .about-experience__content {
    grid-column: 5 / -1;
  }

  .about-credentials__group {
    grid-column: 5 / -1;
  }

  .about-garri__intro,
  .about-garri__body,
  .about-garri__details {
    column-gap: var(--space-columns-tight);
  }

  .about-garri__lead {
    font-size: var(--text-lg);
  }

  .about-garri__copy {
    font-size: 28px;
  }
}

@media (max-width: 820px) {
  .about-experience__section {
    grid-template-columns: 1fr;
    row-gap: var(--space-section-default);
    align-items: start;
    min-height: auto;
    padding-top: calc(var(--nav-height, 64px) + var(--space-section-default));
  }

  .about-experience__media,
  .about-experience__content {
    grid-column: 1;
  }

  .about-credentials {
    grid-template-columns: 1fr;
  }

  .about-credentials__group {
    grid-column: 1;
    grid-template-columns: 1fr;
    row-gap: var(--space-text-default);
  }

  .about-experience__media {
    width: 100%;
    max-width: 320px;
    height: auto;
    min-height: 0;
  }

  .about-experience__content {
    gap: var(--space-content-group);
    padding-top: 0;
  }

  .about-experience__copy {
    max-width: none;
    font-size: var(--text-sm);
    line-height: 1.35;
  }

  .about-garri__intro,
  .about-garri__body,
  .about-garri__details {
    grid-template-columns: 1fr;
    row-gap: var(--space-section-default);
  }

  .about-garri__intro {
    align-items: start;
    min-height: auto;
    padding-top: calc(var(--nav-height, 64px) + var(--space-section-default));
  }

  .about-garri__media,
  .about-garri__lead-wrap,
  .about-garri__body-spacer,
  .about-garri__copy,
  .about-garri__detail:nth-child(1),
  .about-garri__detail:nth-child(2),
  .about-garri__detail:nth-child(3) {
    grid-column: 1;
  }

  .about-garri__media {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 5;
  }

  .about-garri__lead {
    max-width: none;
    font-size: var(--text-lg);
    line-height: 1.05;
  }

  .about-garri__body {
    padding-top: var(--space-section-default);
    padding-bottom: var(--space-section-default);
  }

  .about-garri__body-spacer {
    display: none;
  }

  .about-garri__copy {
    max-width: none;
    font-size: var(--text-sm);
    line-height: 1.25;
  }

  .about-garri__details {
    padding-top: var(--space-section-default);
  }

  .about-garri__detail {
    font-size: var(--text-sm);
  }
}

@media (max-width: 540px) {
  .about-experience__content {
    width: 100%;
    max-width: 360px;
  }

  .about-credentials {
    width: 100%;
    max-width: 360px;
  }

  .about-experience__copy {
    font-size: 18px;
  }

  body.page-about-garri .about-experience__copy h2 {
    font-size: var(--mobile-body-readable-size) !important;
    line-height: 1.24 !important;
  }

  .contact-footer .contact-footer__headline {
    font-size: var(--mobile-footer-heading-size) !important;
    line-height: 1.12 !important;
  }

  .about-garri__lead-wrap,
  .about-garri__copy,
  .about-garri__detail {
    width: 100%;
    max-width: 360px;
  }

  .about-garri__lead {
    font-size: var(--text-md);
  }

  .about-garri__copy,
  .about-garri__detail {
    font-size: 18px;
  }
}


/* ─────────────────────────────────────────────
   INCLUSIVE DESIGN CASE STUDY
   Figma node 20:38 is the source of truth for this draft page.
───────────────────────────────────────────── */
.page-inclusive-design {
  --page-surface: #ffffff;
  background: #ffffff;
  color: #000000;
}

.page-inclusive-design .nav,
.page-inclusive-design .nav__col--right,
.page-inclusive-design .nav__logo,
.page-inclusive-design .nav__link {
  --nav-surface: transparent;
  --color-nav-ink: var(--color-text-inverse);
  --nav-active-ink: rgba(255, 255, 255, 0.86);
  --nav-logo-filter: invert(1);
  background: transparent;
}

.page-inclusive-design .nav {
  --nav-divider-color: transparent;
}

.page-inclusive-design .nav.nav--inclusive-hero,
.page-inclusive-design .nav.nav--inclusive-hero .nav__col--right,
.page-inclusive-design .nav.nav--inclusive-hero .nav__logo,
.page-inclusive-design .nav.nav--inclusive-hero .nav__link {
  --nav-surface: transparent;
  --color-nav-ink: var(--color-text-inverse);
  --nav-active-ink: rgba(255, 255, 255, 0.86);
  --nav-logo-filter: invert(1);
  background: transparent;
}

.page-inclusive-design .nav.nav--inclusive-past-hero,
.page-inclusive-design .nav.nav--inclusive-past-hero .nav__col--right,
.page-inclusive-design .nav.nav--inclusive-past-hero .nav__logo,
.page-inclusive-design .nav.nav--inclusive-past-hero .nav__link {
  --nav-surface: var(--color-bg-default);
  --color-nav-ink: var(--color-text-default);
  --nav-active-ink: var(--color-gray);
  --nav-logo-filter: none;
  background: var(--nav-surface);
}

.page-inclusive-design .inclusive-design-main {
  width: 100%;
  max-width: none;
  display: block;
  gap: 0;
  background: #ffffff;
}

.page-inclusive-design .inclusive-hero {
  position: relative;
  width: 100%;
  max-width: none;
  height: 871px;
  min-height: 871px;
  overflow: clip;
  background-image: radial-gradient(
    356.7px 178.62px at 92.97% -12.27%,
    rgba(109, 208, 215, 1) 0%,
    rgba(87, 169, 233, 1) 50%,
    rgba(65, 130, 251, 1) 100%
  );
}

.page-inclusive-design .inclusive-hero__content {
  position: absolute;
  top: 50%;
  left: 55px;
  width: calc(100% - 110px);
  max-width: 1402px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  transform: translateY(-50%);
  color: #ffffff;
  text-align: center;
  word-break: break-word;
}

.page-inclusive-design .inclusive-hero__eyebrow,
.page-inclusive-design .inclusive-hero__title {
  margin: 0;
  color: #ffffff;
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-variation-settings: "wdth" 100;
}

.page-inclusive-design .inclusive-hero__eyebrow {
  width: 100%;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.15;
}

.page-inclusive-design .inclusive-hero__title {
  width: 100%;
  font-size: 79.413px;
  font-weight: 590;
  line-height: 1;
  letter-spacing: 0;
  text-shadow: 3.303px 3.303px 20.642px rgba(0, 0, 0, 0.1);
}

.page-inclusive-design .inclusive-hero__title span {
  display: block;
}

.page-inclusive-design .inclusive-overview {
  width: 100%;
  max-width: none;
  min-height: 792px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 119px 66px;
  box-sizing: border-box;
  background: #ffffff;
}

.page-inclusive-design .inclusive-overview__grid {
  width: 100%;
  max-width: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 54px 50px;
  justify-content: stretch;
}

.page-inclusive-design .inclusive-overview-card {
  width: 100%;
  min-height: 250px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 7px;
  padding: 48px 86.51px;
  border-radius: 43.255px !important;
  background: #ffffff;
  color: rgba(0, 0, 0, 0.8);
  box-shadow: 0 5.767px 10.814px rgba(0, 0, 0, 0.1);
}

.page-inclusive-design .inclusive-overview-card__title,
.page-inclusive-design .inclusive-overview-card__body {
  width: 100%;
  margin: 0;
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-variation-settings: "wdth" 100;
  color: inherit;
}

.page-inclusive-design .inclusive-overview-card__title {
  font-size: 24px;
  line-height: 1.15;
  font-weight: 700;
}

.page-inclusive-design .inclusive-overview-card__body {
  font-size: 20px;
  line-height: 1.15;
  font-weight: 400;
}

.page-inclusive-design .inclusive-video-section {
  width: 100%;
  max-width: none;
  background: #ffffff;
}

.page-inclusive-design .inclusive-video-frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1509 / 852;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: #000000;
}

.page-inclusive-design .inclusive-video-frame__media {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  object-position: center;
  background: #000000;
}

.page-inclusive-design .case-v2-media-toggle {
  position: absolute;
  right: var(--space-2);
  bottom: var(--space-2);
  z-index: 2;
  min-width: 0;
  padding: 10px 12px;
  border: 0;
  background: rgba(0, 0, 0, 0.78);
  color: var(--color-white);
  cursor: pointer;
}

.page-inclusive-design .case-v2-media-toggle:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 3px;
}

.page-inclusive-design .inclusive-process {
  width: 100%;
  max-width: none;
  min-height: 1051px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 64px;
  padding: 0 64px;
  box-sizing: border-box;
  background: #ffffff;
  color: #000000;
}

.page-inclusive-design .inclusive-process__title {
  margin: 0;
  flex: 0 0 auto;
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: 80px;
  line-height: 1.15;
  font-weight: 590;
  letter-spacing: 0;
  font-variation-settings: "wdth" 100;
  color: #000000;
  white-space: nowrap;
}

.page-inclusive-design .inclusive-process__list {
  width: 669px;
  flex: 0 0 669px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 22px;
}

.page-inclusive-design .inclusive-process-card {
  width: 100%;
  height: 150px;
  display: flex;
  align-items: center;
  padding: 0 60px;
  box-sizing: border-box;
  border-radius: 30px !important;
  background: #ffffff;
  box-shadow: 0 4px 7.5px rgba(0, 0, 0, 0.1);
}

.page-inclusive-design .inclusive-process-card__title {
  margin: 0;
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: 24px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: 0;
  font-variation-settings: "wdth" 100;
  color: rgba(0, 0, 0, 0.8);
  white-space: nowrap;
}

.page-inclusive-design .inclusive-research-findings {
  width: 100%;
  max-width: none;
  min-height: 773px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 83px;
  padding: 72px 64px;
  box-sizing: border-box;
  background: #ffffff;
  color: #000000;
}

.page-inclusive-design .inclusive-research-findings__title {
  width: 100%;
  margin: 0;
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: 48px;
  line-height: 1.15;
  font-weight: 590;
  letter-spacing: 0;
  text-align: center;
  font-variation-settings: "wdth" 100;
  color: #000000;
}

.page-inclusive-design .inclusive-research-findings__grid {
  width: 100%;
  height: 480.129px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 47px 45px;
}

.page-inclusive-design .inclusive-research-finding-card {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 86.51px;
  box-sizing: border-box;
  border-radius: 43.255px !important;
  background: #ffffff;
  box-shadow: 0 5.767px 10.814px rgba(0, 0, 0, 0.1);
}

.page-inclusive-design .inclusive-research-finding-card__title {
  width: 100%;
  max-width: none;
  margin: 0;
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: 24px;
  line-height: 1.15;
  font-weight: 590;
  letter-spacing: 0;
  font-variation-settings: "wdth" 100;
  color: rgba(0, 0, 0, 0.8);
}

.page-inclusive-design .inclusive-problem-statement {
  position: relative;
  width: 100%;
  max-width: none;
  height: 871px;
  min-height: 871px;
  overflow: clip;
  background-image: radial-gradient(
    182.45px 180.78px at 92.97% -12.27%,
    rgba(109, 208, 215, 1) 0%,
    rgba(87, 169, 233, 1) 50%,
    rgba(65, 130, 251, 1) 100%
  );
}

.page-inclusive-design .inclusive-problem-statement__content {
  position: absolute;
  top: 50%;
  left: 56px;
  width: calc(100% - 112px);
  max-width: 1402px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  transform: translateY(-50%);
  color: #ffffff;
  text-align: center;
  word-break: break-word;
}

.page-inclusive-design .inclusive-problem-statement__eyebrow,
.page-inclusive-design .inclusive-problem-statement__text {
  width: 100%;
  margin: 0;
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-variation-settings: "wdth" 100;
  color: #ffffff;
}

.page-inclusive-design .inclusive-problem-statement__eyebrow {
  font-size: 28px;
  line-height: 1.15;
  font-weight: 500;
}

.page-inclusive-design .inclusive-problem-statement__text {
  font-size: 64px;
  line-height: 1;
  font-weight: 590;
  letter-spacing: 0;
  text-shadow: 3.303px 3.303px 20.642px rgba(0, 0, 0, 0.1);
}

.page-inclusive-design .inclusive-talk-intro {
  width: 100%;
  max-width: none;
  min-height: 803px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 72px 90px;
  box-sizing: border-box;
  background: #ffffff;
  color: #000000;
}

.page-inclusive-design .inclusive-talk-intro__title {
  width: 100%;
  max-width: 1332px;
  margin: 0;
  color: #000000;
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: 101.71px;
  line-height: 1.15;
  font-weight: 590;
  letter-spacing: 0;
  text-align: center;
  font-variation-settings: "wdth" 100;
  word-break: break-word;
}

.page-inclusive-design .inclusive-expert-insight {
  width: 100%;
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 72px 90px 110px;
  box-sizing: border-box;
  background: #ffffff;
  color: #000000;
}

.page-inclusive-design .inclusive-expert-insight__quote {
  position: relative;
  width: 100%;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.page-inclusive-design .inclusive-expert-insight__quote-text {
  width: calc(100% - 120px);
  margin: 0;
  color: rgba(0, 0, 0, 0.8);
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: 28px;
  line-height: 1.25;
  font-weight: 590;
  letter-spacing: 0;
  text-align: left;
  font-variation-settings: "wdth" 100;
  word-break: break-word;
}

.page-inclusive-design .inclusive-expert-insight__quote-mark {
  position: absolute;
  color: rgba(0, 0, 0, 0.8);
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: 124px;
  line-height: 1;
  font-weight: 400;
  font-variation-settings: "wdth" 100;
}

.page-inclusive-design .inclusive-expert-insight__quote-mark--open {
  left: 0;
  top: 0;
}

.page-inclusive-design .inclusive-expert-insight__quote-mark--close {
  right: 0;
  bottom: 0;
}

.page-inclusive-design .inclusive-expert-insight__detail {
  width: 100%;
  min-height: 600px;
  display: grid;
  grid-template-columns: minmax(280px, 458px) minmax(0, 700px);
  gap: 50px;
  align-items: start;
  justify-content: space-between;
  box-sizing: border-box;
}

.page-inclusive-design .inclusive-expert-insight__person {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10.2px;
  width: 458px;
  max-width: 100%;
  padding-left: 50px;
  box-sizing: border-box;
}

.page-inclusive-design .inclusive-expert-insight__avatar {
  width: 94px;
  height: 94px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 999px !important;
  background: #ffffff;
  box-shadow: 0 5.767px 10.814px rgba(0, 0, 0, 0.1);
}

.page-inclusive-design .inclusive-expert-insight__avatar img {
  display: block;
  width: 74px;
  height: 90px;
  object-fit: cover;
  object-position: center top;
}

.page-inclusive-design .inclusive-expert-insight__person-copy {
  min-width: 0;
  color: #000000;
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: 24.479px;
  line-height: 1.15;
  font-weight: 590;
  font-variation-settings: "wdth" 100;
  word-break: break-word;
}

.page-inclusive-design .inclusive-expert-insight__person-name,
.page-inclusive-design .inclusive-expert-insight__person-role {
  margin: 0;
}

.page-inclusive-design .inclusive-expert-insight__person-role {
  color: rgba(0, 0, 0, 0.56);
  white-space: nowrap;
}

.page-inclusive-design .inclusive-expert-insight__cards {
  width: 700px;
  max-width: 100%;
  min-height: 600px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 30px;
}

.page-inclusive-design .inclusive-expert-card {
  width: 100%;
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  padding: 96.603px 86.51px;
  box-sizing: border-box;
  border-radius: 43.255px !important;
  background: #ffffff;
  color: rgba(0, 0, 0, 0.8);
  box-shadow: 0 5.767px 10.814px rgba(0, 0, 0, 0.1);
}

.page-inclusive-design .inclusive-expert-card__title,
.page-inclusive-design .inclusive-expert-card__body {
  width: 100%;
  margin: 0;
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.15;
  letter-spacing: 0;
  font-variation-settings: "wdth" 100;
}

.page-inclusive-design .inclusive-expert-card__title {
  font-size: 24px;
  font-weight: 700;
}

.page-inclusive-design .inclusive-expert-card__body {
  font-size: 20px;
  font-weight: 400;
}

.page-inclusive-design .inclusive-ai-engineer-insight {
  width: 100%;
  max-width: none;
  padding: 72px 90px 110px;
  box-sizing: border-box;
  background: #ffffff;
  color: #000000;
}

.page-inclusive-design .inclusive-ai-engineer-insight .inclusive-expert-insight__detail {
  grid-template-columns: minmax(280px, 451px) minmax(0, 826px);
}

.page-inclusive-design .inclusive-ai-engineer-insight .inclusive-expert-insight__cards {
  width: 826px;
  align-items: flex-end;
}

.page-inclusive-design .inclusive-ai-engineer-insight .inclusive-expert-card {
  width: 700px;
  max-width: 100%;
  flex: 1 1 0;
}

.page-inclusive-design .inclusive-expert-insight__avatar--bill img {
  width: 74px;
  height: 99px;
}

.page-inclusive-design .inclusive-social-work-insight {
  width: 100%;
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: 56px;
  padding: 72px 90px 110px;
  box-sizing: border-box;
  background: #ffffff;
  color: #000000;
}

.page-inclusive-design .inclusive-social-work-insight .inclusive-expert-insight__detail {
  grid-template-columns: minmax(280px, 525px) minmax(0, 752px);
}

.page-inclusive-design .inclusive-social-work-insight .inclusive-expert-insight__cards {
  width: 752px;
  align-items: flex-end;
}

.page-inclusive-design .inclusive-social-work-insight .inclusive-expert-card {
  width: 700px;
  max-width: 100%;
  flex: 1 1 0;
}

.page-inclusive-design .inclusive-social-work-insight .inclusive-expert-insight__quote {
  align-items: flex-start;
  padding-top: 64px;
}

.page-inclusive-design .inclusive-social-work-insight .inclusive-expert-insight__quote-mark--close {
  right: 74px;
}

.page-inclusive-design .inclusive-expert-insight__avatar--lauri img {
  width: 74px;
  height: 101px;
}

.page-inclusive-design .inclusive-post-therapy-map {
  --inclusive-post-map-scale: 1;
  width: 100%;
  max-width: none;
  padding: 0;
  overflow: clip;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: calc(934px * var(--inclusive-post-map-scale));
  background: #ffffff;
  color: #000000;
}

.page-inclusive-design .inclusive-post-therapy-map__stage {
  position: relative;
  width: 1512px;
  min-width: 1512px;
  height: 934px;
  flex: 0 0 1512px;
  margin: 0;
  transform: scale(var(--inclusive-post-map-scale));
  transform-origin: top center;
  color: rgba(0, 0, 0, 0.8);
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-variation-settings: "wdth" 100;
}

.page-inclusive-design .inclusive-post-therapy-map__person {
  position: absolute;
  left: 245px;
  top: 0;
  width: 196px;
  height: 292.068px;
  text-align: center;
  z-index: 2;
}

.page-inclusive-design .inclusive-post-therapy-map__avatar {
  position: absolute;
  left: 61px;
  top: 106px;
  width: 74px;
  height: 99px;
  margin: 0;
}

.page-inclusive-design .inclusive-post-therapy-map__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.page-inclusive-design .inclusive-post-therapy-map__person-copy {
  position: absolute;
  left: 0;
  top: 213px;
  width: 196px;
  font-size: 24px;
  line-height: 1.15;
  font-weight: 590;
  letter-spacing: 0;
  text-align: center;
}

.page-inclusive-design .inclusive-post-therapy-map__name,
.page-inclusive-design .inclusive-post-therapy-map__role {
  margin: 0;
}

.page-inclusive-design .inclusive-post-therapy-map__name {
  font-weight: 590;
}

.page-inclusive-design .inclusive-post-therapy-map__role {
  opacity: 0.56;
}

.page-inclusive-design .inclusive-post-therapy-map__panel,
.page-inclusive-design .inclusive-post-therapy-map__prompt,
.page-inclusive-design .inclusive-post-therapy-map__right-labels span,
.page-inclusive-design .inclusive-post-therapy-map__small-card {
  box-sizing: border-box;
  background: #ffffff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.page-inclusive-design .inclusive-post-therapy-map__panel {
  position: absolute;
  left: 28.35px;
  width: 655.2px;
  border-radius: 30px !important;
  z-index: 1;
}

.page-inclusive-design .inclusive-post-therapy-map__panel--feelings {
  top: 368px;
  height: 164px;
  padding: 0;
}

.page-inclusive-design .inclusive-post-therapy-map__panel--timeline {
  top: 549px;
  height: 361px;
  padding: 0;
  overflow: visible;
}

.page-inclusive-design .inclusive-post-therapy-map__line {
  position: absolute;
  left: -29.35px;
  top: 76px;
  width: 1483.65px;
  height: 1.82854px;
  max-width: none;
  display: block;
  z-index: 0;
  pointer-events: none;
}

.page-inclusive-design .inclusive-post-therapy-map__label,
.page-inclusive-design .inclusive-post-therapy-map__panel > p {
  position: absolute;
  z-index: 1;
  margin: 0;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: 0;
}

.page-inclusive-design .inclusive-post-therapy-map__label {
  font-weight: 700;
}

.page-inclusive-design .inclusive-post-therapy-map__panel p {
  font-weight: 400;
}

.page-inclusive-design .inclusive-post-therapy-map__panel--feelings .inclusive-post-therapy-map__label {
  left: 28px;
  top: 44px;
  width: 117px;
}

.page-inclusive-design .inclusive-post-therapy-map__feeling--one {
  left: 194px;
  top: 43px;
  width: 174.038px;
}

.page-inclusive-design .inclusive-post-therapy-map__feeling--two {
  left: 410px;
  top: 43px;
  width: 196.875px;
}

.page-inclusive-design .inclusive-post-therapy-map__panel--timeline .inclusive-post-therapy-map__label {
  left: 28px;
  top: 29px;
  width: 107px;
}

.page-inclusive-design .inclusive-post-therapy-map__timeline-item {
  position: absolute;
  z-index: 1;
}

.page-inclusive-design .inclusive-post-therapy-map__timeline-item--first {
  left: 160px;
  top: 29px;
  width: 130px;
}

.page-inclusive-design .inclusive-post-therapy-map__timeline-item--second {
  left: 310px;
  top: 29px;
  width: 315.787px;
}

.page-inclusive-design .inclusive-post-therapy-map__year,
.page-inclusive-design .inclusive-post-therapy-map__event,
.page-inclusive-design .inclusive-post-therapy-map__event-detail,
.page-inclusive-design .inclusive-post-therapy-map__note {
  margin: 0;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: 0;
}

.page-inclusive-design .inclusive-post-therapy-map__year,
.page-inclusive-design .inclusive-post-therapy-map__event {
  font-weight: 590;
}

.page-inclusive-design .inclusive-post-therapy-map__panel .inclusive-post-therapy-map__year,
.page-inclusive-design .inclusive-post-therapy-map__panel .inclusive-post-therapy-map__event {
  font-size: 22px;
  font-weight: 590;
}

.page-inclusive-design .inclusive-post-therapy-map__event {
  margin-top: 38px;
}

.page-inclusive-design .inclusive-post-therapy-map__event-detail {
  margin-top: 4px;
  font-size: 20px;
  font-weight: 400;
}

.page-inclusive-design .inclusive-post-therapy-map__panel .inclusive-post-therapy-map__event-detail {
  font-size: 20px;
  font-weight: 400;
}

.page-inclusive-design .inclusive-post-therapy-map__event-detail--final {
  width: 268px;
  margin-top: 4px;
}

.page-inclusive-design .inclusive-post-therapy-map__note {
  width: 253px;
  margin-top: 24px;
  font-weight: 400;
}

.page-inclusive-design .inclusive-post-therapy-map__panel .inclusive-post-therapy-map__note {
  font-size: 22px;
  font-weight: 400;
}

.page-inclusive-design .inclusive-post-therapy-map__prompt {
  position: absolute;
  left: 726px;
  top: 99px;
  width: 761px;
  height: 69px;
  display: flex;
  align-items: center;
  padding: 10px 34px;
  border-radius: 22px !important;
  z-index: 2;
}

.page-inclusive-design .inclusive-post-therapy-map__prompt p {
  margin: 0;
  font-size: 22px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: 0;
}

.page-inclusive-design .inclusive-post-therapy-map__right-labels {
  position: absolute;
  left: 726px;
  top: 203px;
  width: 761px;
  display: grid;
  grid-template-columns: 205px 270px 237.676px;
  gap: 24.162px;
  z-index: 2;
}

.page-inclusive-design .inclusive-post-therapy-map__right-labels span {
  width: max-content;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  padding: 10px 34px;
  border-radius: 30px !important;
  font-size: 22px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
}

.page-inclusive-design .inclusive-post-therapy-map__right-grid {
  position: absolute;
  left: 726px;
  top: 273px;
  width: 761px;
  display: grid;
  grid-template-columns: 205px 270px 237.676px;
  gap: 24.162px;
  align-items: start;
  z-index: 2;
}

.page-inclusive-design .inclusive-post-therapy-map__small-card {
  min-height: 264px;
  padding: 34px 28px;
  border-radius: 30px !important;
  font-size: 22px;
  line-height: 1.15;
  font-weight: 400;
  letter-spacing: 0;
}

.page-inclusive-design .inclusive-post-therapy-map__small-card--goal {
  min-height: 319px;
  padding: 30px 34px;
}

.page-inclusive-design .inclusive-post-therapy-map__small-card ol,
.page-inclusive-design .inclusive-post-therapy-map__small-card p {
  margin: 0;
}

.page-inclusive-design .inclusive-post-therapy-map__small-card ol {
  padding-left: 31px;
}

.page-inclusive-design .inclusive-post-therapy-map__nowrap {
  white-space: nowrap;
}

.page-inclusive-design .inclusive-post-therapy-map__small-card li + li,
.page-inclusive-design .inclusive-post-therapy-map__small-card p + p {
  margin-top: 42px;
}

.page-inclusive-design .inclusive-post-therapy-map__small-card--motives p + p {
  margin-top: 24px;
}

.page-inclusive-design .inclusive-post-therapy-map__title {
  position: absolute;
  left: 726px;
  top: 578px;
  width: 248px;
  margin: 0;
  color: rgba(0, 0, 0, 0.8);
  font-size: 35.658px;
  line-height: 1.15;
  font-weight: 590;
  letter-spacing: 0;
  z-index: 2;
}

.page-inclusive-design .inclusive-post-therapy-map__quote {
  position: absolute;
  left: 726px;
  top: 650px;
  width: 761px;
  height: 277px;
  min-height: 0;
  margin: 0;
  color: rgba(0, 0, 0, 0.8);
  z-index: 2;
}

.page-inclusive-design .inclusive-post-therapy-map__quote blockquote {
  position: absolute;
  left: 58.68px;
  top: 5px;
  width: 702.318px;
  margin: 0;
  font-size: 36px;
  line-height: 1.25;
  font-weight: 590;
  letter-spacing: 0;
  font-variation-settings: "wdth" 100;
}

.page-inclusive-design .inclusive-post-therapy-map__quote-mark {
  position: absolute;
  margin: 0;
  font-size: 120px;
  line-height: 1.25;
  font-weight: 400;
  letter-spacing: 0;
  font-variation-settings: "wdth" 100;
}

.page-inclusive-design .inclusive-post-therapy-map__quote-mark--open {
  left: 0;
  top: 0;
}

.page-inclusive-design .inclusive-post-therapy-map__quote-mark--close {
  left: 693.83px;
  top: 112px;
}

.page-inclusive-design .inclusive-design-principles {
  width: 100%;
  max-width: none;
  min-height: 787px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 65px;
  padding: 72px 90px 110px;
  box-sizing: border-box;
  background: #ffffff;
  color: #000000;
}

.page-inclusive-design .inclusive-design-principles__title {
  width: 100%;
  margin: 0;
  color: #000000;
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: 57.877px;
  line-height: 1.15;
  font-weight: 590;
  letter-spacing: 0;
  text-align: center;
  font-variation-settings: "wdth" 100;
  word-break: break-word;
}

.page-inclusive-design .inclusive-design-principles__grid {
  width: 100%;
  max-width: 1335px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 650px));
  gap: 31px 35px;
  justify-content: center;
}

.page-inclusive-design .inclusive-design-principle-card {
  width: 100%;
  min-height: 303px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 13.118px;
  padding: 42px 26.237px 42px 37.481px;
  box-sizing: border-box;
  border-radius: 35px !important;
  background: #ffffff;
  color: rgba(0, 0, 0, 0.8);
  box-shadow: 0 3.748px 7.028px rgba(0, 0, 0, 0.1);
}

.page-inclusive-design .inclusive-design-principle-card--agency {
  border-radius: 45px !important;
}

.page-inclusive-design .inclusive-design-principle-card__icon {
  display: block;
  object-fit: contain;
  object-position: center;
  flex: 0 0 auto;
}

.page-inclusive-design .inclusive-design-principle-card__icon--augment {
  width: 34.996px;
  height: 43.566px;
}

.page-inclusive-design .inclusive-design-principle-card__icon--heart-one {
  width: 33.611px;
  height: 32.123px;
}

.page-inclusive-design .inclusive-design-principle-card__icon--heart-two {
  width: 37.758px;
  height: 36.086px;
}

.page-inclusive-design .inclusive-design-principle-card__icon--heart-three {
  width: 35.684px;
  height: 34.105px;
}

.page-inclusive-design .inclusive-design-principle-card__copy {
  width: 100%;
  margin: 0;
  color: inherit;
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.2;
  letter-spacing: 0;
  font-variation-settings: "wdth" 100;
  word-break: break-word;
}

.page-inclusive-design .inclusive-design-principle-card__title,
.page-inclusive-design .inclusive-design-principle-card__body {
  margin: 0;
  line-height: inherit;
  letter-spacing: inherit;
}

.page-inclusive-design .inclusive-design-principle-card__title {
  font-size: 28px;
  font-weight: 700;
}

.page-inclusive-design .inclusive-design-principle-card__body {
  font-size: 24px;
  font-weight: 400;
}

.page-inclusive-design .inclusive-refined-problem {
  position: relative;
  width: 100%;
  max-width: none;
  height: 871px;
  min-height: 871px;
  overflow: clip;
  background-image: radial-gradient(
    171.1px 179.9px at 92.97% -12.27%,
    rgba(109, 208, 215, 1) 0%,
    rgba(87, 169, 233, 1) 50%,
    rgba(65, 130, 251, 1) 100%
  );
}

.page-inclusive-design .inclusive-refined-problem__content {
  position: absolute;
  top: 50%;
  left: 54px;
  width: calc(100% - 108px);
  max-width: 1402px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  transform: translateY(-50%);
  color: #ffffff;
  text-align: center;
  word-break: break-word;
}

.page-inclusive-design .inclusive-refined-problem__eyebrow,
.page-inclusive-design .inclusive-refined-problem__text {
  width: 100%;
  margin: 0;
  color: #ffffff;
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-variation-settings: "wdth" 100;
}

.page-inclusive-design .inclusive-refined-problem__eyebrow {
  font-size: 28px;
  line-height: 1.15;
  font-weight: 500;
}

.page-inclusive-design .inclusive-refined-problem__text {
  font-size: 64px;
  line-height: 1;
  font-weight: 590;
  letter-spacing: 0;
  text-shadow: 3.303px 3.303px 20.642px rgba(0, 0, 0, 0.1);
}

.page-inclusive-design .inclusive-codesigner {
  width: 100%;
  max-width: none;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 64px;
  padding: 0 90px;
  box-sizing: border-box;
  background: #ffffff;
  color: #000000;
}

.page-inclusive-design .inclusive-codesigner__title {
  flex: 0 1 auto;
  margin: 0;
  color: #000000;
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: 101.71px;
  line-height: 1.15;
  font-weight: 590;
  letter-spacing: 0;
  white-space: nowrap;
  font-variation-settings: "wdth" 100;
}

.page-inclusive-design .inclusive-codesigner__person {
  width: 342px;
  flex: 0 0 342px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 43px;
}

.page-inclusive-design .inclusive-codesigner__avatar {
  width: 165.932px;
  height: 202.107px;
  margin: 0 0 0 18.93px;
}

.page-inclusive-design .inclusive-codesigner__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.page-inclusive-design .inclusive-codesigner__copy {
  width: 100%;
  margin: 0;
  color: #000000;
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.15;
  font-weight: 590;
  text-align: center;
  font-variation-settings: "wdth" 100;
}

.page-inclusive-design .inclusive-codesigner__name,
.page-inclusive-design .inclusive-codesigner__role {
  margin: 0;
  letter-spacing: 0;
}

.page-inclusive-design .inclusive-codesigner__name {
  font-size: 36px;
}

.page-inclusive-design .inclusive-codesigner__role {
  color: rgba(0, 0, 0, 0.56);
  font-size: 27.146px;
}

.page-inclusive-design .inclusive-therapist-journey {
  width: 100%;
  max-width: none;
  padding: 72px 51px 110px;
  box-sizing: border-box;
  background: #ffffff;
  color: #000000;
}

.page-inclusive-design .inclusive-therapist-journey__inner {
  width: 100%;
  max-width: 1407px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 39px;
}

.page-inclusive-design .inclusive-therapist-journey__intro {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
}

.page-inclusive-design .inclusive-therapist-journey__title,
.page-inclusive-design .inclusive-therapist-journey__description {
  margin: 0;
  color: rgba(0, 0, 0, 0.78);
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-variation-settings: "wdth" 100;
  word-break: break-word;
}

.page-inclusive-design .inclusive-therapist-journey__title {
  width: 697px;
  max-width: 100%;
  font-size: 40px;
  line-height: 1.15;
  font-weight: 590;
}

.page-inclusive-design .inclusive-therapist-journey__description {
  width: 100%;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 400;
}

.page-inclusive-design .inclusive-therapist-journey__map {
  width: 100%;
  margin: 0;
  aspect-ratio: 1407 / 783;
  overflow: hidden;
  border-radius: 40px !important;
  background: #ffffff;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.25);
}

.page-inclusive-design .inclusive-therapist-journey__map img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.page-inclusive-design .inclusive-therapist-journey__analysis {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 547fr) minmax(0, 795fr);
  gap: 28px;
  align-items: start;
}

.page-inclusive-design .inclusive-therapist-journey__column {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.page-inclusive-design .inclusive-therapist-journey__column--before {
  gap: 25px;
}

.page-inclusive-design .inclusive-therapist-journey__column--between {
  gap: 23px;
}

.page-inclusive-design .inclusive-therapist-journey__column-title {
  width: 100%;
  margin: 0;
  color: #000000;
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: 33.519px;
  line-height: 1.15;
  font-weight: 590;
  letter-spacing: 0;
  font-variation-settings: "wdth" 100;
  word-break: break-word;
}

.page-inclusive-design .inclusive-therapist-journey__between-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 27px 17px;
}

.page-inclusive-design .inclusive-journey-note {
  width: 100%;
  min-height: 312px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 40px 48px;
  box-sizing: border-box;
  border-radius: 25.27px !important;
  color: #000000;
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: 24px;
  line-height: 1.15;
  font-weight: 400;
  letter-spacing: 0;
  font-variation-settings: "wdth" 100;
  box-shadow: 0 3.369px 21.059px rgba(0, 0, 0, 0.05);
  word-break: break-word;
}

.page-inclusive-design .inclusive-journey-note--warm {
  background: rgba(212, 105, 59, 0.11);
}

.page-inclusive-design .inclusive-journey-note--cool {
  background: rgba(12, 140, 233, 0.11);
}

.page-inclusive-design .inclusive-journey-note--wide {
  grid-column: 1 / -1;
}

.page-inclusive-design .inclusive-journey-note p,
.page-inclusive-design .inclusive-journey-note ul {
  margin: 0;
}

.page-inclusive-design .inclusive-journey-note ul {
  padding-left: 1.15em;
  line-height: 1.4;
}

.page-inclusive-design .inclusive-journey-note li + li {
  margin-top: 0;
}

.page-inclusive-design .inclusive-gradient-panel {
  position: relative;
  width: 100%;
  max-width: none;
  height: 89.337748vw;
  overflow: clip;
  background: #4182fb;
}

.page-inclusive-design .inclusive-gradient-panel__background {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.page-inclusive-design .inclusive-gradient-panel__card {
  position: absolute;
  z-index: 1;
  width: 36.423841%;
  height: 11.489993%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.589404vw 2.251656vw;
  box-sizing: border-box;
  border-radius: 2.649007vw !important;
  color: rgba(0, 0, 0, 0.8);
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(14px, 1.589404vw, 24px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: 0;
  font-variation-settings: "wdth" 100;
  word-break: break-word;
}

.page-inclusive-design .inclusive-gradient-panel__card p {
  width: 100%;
  margin: 0;
}

.page-inclusive-design .inclusive-gradient-panel__card--top {
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0.264901vw 0.993377vw rgba(0, 0, 0, 0.1);
}

.page-inclusive-design .inclusive-gradient-panel__card--hmw {
  background: #ffffff;
  box-shadow: 0 0.264901vw 0.496689vw rgba(0, 0, 0, 0.1);
}

.page-inclusive-design .inclusive-gradient-panel__card--left-top {
  left: 9.337748%;
  top: 13.046701%;
}

.page-inclusive-design .inclusive-gradient-panel__card--left-bottom {
  left: 9.337748%;
  top: 25.13%;
}

.page-inclusive-design .inclusive-gradient-panel__card--right-top {
  left: 50%;
  top: 62.416605%;
}

.page-inclusive-design .inclusive-gradient-panel__card--right-bottom {
  left: 50%;
  top: 74.5%;
}

.page-inclusive-design .inclusive-gradient-panel__statement {
  position: absolute;
  z-index: 1;
  top: calc(50% + 1px);
  left: 50%;
  width: 87.682119%;
  display: block;
  margin: 0;
  transform: translate(-50%, -50%);
  color: #ffffff;
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(24px, 2.999338vw, 45.29px);
  line-height: 1.25;
  font-weight: 590;
  letter-spacing: 0;
  text-align: center;
  font-variation-settings: "wdth" 100;
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
}

.page-inclusive-design .inclusive-gradient-panel__statement-emphasis {
  display: inline;
  color: #ffffff;
}

.page-inclusive-design .inclusive-gradient-panel__statement-muted {
  display: inline;
  color: rgba(0, 0, 0, 0.2);
}

.page-inclusive-design .inclusive-gradient-panel__arrow {
  position: absolute;
  z-index: 1;
  width: 4.039735vw;
  height: 1.46304vw;
  overflow: visible;
  pointer-events: none;
}

.page-inclusive-design .inclusive-gradient-panel__arrow path {
  fill: rgba(0, 0, 0, 0.5);
}

.page-inclusive-design .inclusive-gradient-panel__arrow--up {
  left: 27.549669%;
  top: 39.733136%;
  transform: rotate(-90deg);
  transform-origin: center;
}

.page-inclusive-design .inclusive-gradient-panel__arrow--down {
  left: 66.953642%;
  top: 58.4%;
  transform: rotate(90deg);
  transform-origin: center;
}

.page-inclusive-design .inclusive-collecting-info {
  --inclusive-collecting-pad-y: clamp(48px, 5.291005vw, 80px);
  width: 100%;
  max-width: none;
  height: calc(58.531746vw + (var(--inclusive-collecting-pad-y) * 2));
  padding-block: var(--inclusive-collecting-pad-y);
  box-sizing: border-box;
  overflow: hidden;
  background: #ffffff;
  color: #000000;
}

.page-inclusive-design .inclusive-collecting-info__stage {
  position: relative;
  width: 95.568783%;
  height: 100%;
  margin: 0 auto;
}

.page-inclusive-design .inclusive-collecting-info__intro {
  position: absolute;
  left: 0;
  top: 7.683616%;
  z-index: 2;
  width: 45.536332%;
  margin: 0;
}

.page-inclusive-design .inclusive-collecting-info__title,
.page-inclusive-design .inclusive-collecting-info__body {
  margin: 0;
  color: #000000;
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-variation-settings: "wdth" 100;
  letter-spacing: 0;
  word-break: normal;
}

.page-inclusive-design .inclusive-collecting-info__title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-weight: 590;
  line-height: 1.15;
}

.page-inclusive-design .inclusive-collecting-info__title-kicker {
  font-size: clamp(20px, 2.380952vw, 36px);
}

.page-inclusive-design .inclusive-collecting-info__title-main {
  font-size: clamp(32px, 3.754233vw, 56.764px);
}

.page-inclusive-design .inclusive-collecting-info__body {
  width: 100%;
  margin-top: 25px;
  font-size: clamp(18px, 1.851852vw, 28px);
  line-height: 1.15;
  font-weight: 400;
}

.page-inclusive-design .inclusive-collecting-info__diagram {
  position: absolute;
  left: 0;
  top: 46.214689%;
  z-index: 1;
  width: 48.581315%;
  height: 50.960452%;
}

.page-inclusive-design .inclusive-collecting-info__diagram-block {
  position: absolute;
  left: 0;
  width: 100%;
  display: block;
  object-fit: fill;
}

.page-inclusive-design .inclusive-collecting-info__diagram-block--therapist {
  top: 0;
  height: 50.554324%;
}

.page-inclusive-design .inclusive-collecting-info__diagram-block--client {
  top: 50.554324%;
  height: 49.445676%;
}

.page-inclusive-design .inclusive-collecting-info__diagram-label {
  position: absolute;
  z-index: 2;
  margin: 0;
  color: #000000;
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(10px, 0.996362vw, 15.065px);
  line-height: 1.15;
  font-weight: 590;
  font-variation-settings: "wdth" 100;
  letter-spacing: 0;
  white-space: nowrap;
}

.page-inclusive-design .inclusive-collecting-info__diagram-label--therapist {
  left: 3.560141%;
  top: 3.750347%;
}

.page-inclusive-design .inclusive-collecting-info__diagram-label--client {
  left: 3.525641%;
  top: 54.507778%;
}

.page-inclusive-design .inclusive-collecting-info__pill {
  position: absolute;
  left: 13.675214%;
  top: 62.971175%;
  z-index: 3;
  width: 182px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 16px;
  box-sizing: border-box;
  border-radius: 26px !important;
  background: #ffffff;
  box-shadow: 1.076px 2.152px 4.035px rgba(0, 0, 0, 0.2);
}

.page-inclusive-design .inclusive-collecting-info__pill-icon {
  color: #1e1e1e;
  font-family: Inter, "SF Pro Display", sans-serif;
  font-size: 19px;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: -0.5456px;
  white-space: nowrap;
}

.page-inclusive-design .inclusive-collecting-info__pill-text {
  width: 82px;
  color: rgba(0, 0, 0, 0.8);
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  line-height: 1.25;
  font-weight: 700;
  text-align: center;
  font-variation-settings: "wdth" 100;
}

.page-inclusive-design .inclusive-collecting-info__hmw {
  position: absolute;
  left: 29.550173%;
  top: 82.485876%;
  z-index: 4;
  width: 38.062284%;
  height: 17.514124%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.587302vw 2.248677vw;
  box-sizing: border-box;
  border-radius: 2.645503vw !important;
  background: #ffffff;
  box-shadow: 0 0.26455vw 0.496032vw rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.8);
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(14px, 1.322751vw, 20px);
  line-height: 1.15;
  font-weight: 700;
  font-variation-settings: "wdth" 100;
  letter-spacing: 0;
  word-break: break-word;
}

.page-inclusive-design .inclusive-collecting-info__hmw p {
  width: 100%;
  margin: 0;
}

.page-inclusive-design .inclusive-phone-mockup {
  position: relative;
  overflow: visible;
}

.page-inclusive-design .inclusive-collecting-info__phone {
  position: absolute;
  left: 70.17301%;
  top: 0;
  z-index: 3;
  width: 29.82699%;
  height: 100%;
}

.page-inclusive-design .inclusive-phone-mockup__frame-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.page-inclusive-design .inclusive-phone-mockup__screen {
  position: absolute;
  left: 4.404897%;
  top: 1.882504%;
  z-index: 2;
  width: 91.112828%;
  height: 96.234945%;
  overflow: hidden;
  border-radius: 8.8% / 4.1% !important;
}

.page-inclusive-design .inclusive-phone-mockup__screen-media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-inclusive-design .inclusive-collecting-info--phone-left .inclusive-collecting-info__phone {
  left: 0;
  top: 0;
}

.page-inclusive-design .inclusive-collecting-info--phone-left .inclusive-collecting-info__intro {
  left: 39.520548%;
  top: 5.307471%;
  width: 46.506849%;
}

.page-inclusive-design .inclusive-collecting-info--phone-left .inclusive-collecting-info__diagram {
  left: 39.520548%;
  top: 43.82699%;
  width: 48.082192%;
  height: 50.960452%;
}

.page-inclusive-design .inclusive-collecting-info--phone-left .inclusive-collecting-info__pill {
  left: 21.937322%;
  top: 43.902439%;
}

.page-inclusive-design .inclusive-collecting-info--phone-left .inclusive-collecting-info__pill--wide {
  width: 199px;
  height: 52px;
}

.page-inclusive-design .inclusive-collecting-info--phone-left .inclusive-collecting-info__pill--wide .inclusive-collecting-info__pill-text {
  width: 128px;
}

.page-inclusive-design .inclusive-collecting-info--phone-left .inclusive-collecting-info__hmw {
  left: 63.561644%;
  top: 82.485876%;
  width: 37.671233%;
  height: 17.514124%;
}

.page-inclusive-design .inclusive-between-sessions-panel {
  position: relative;
  width: 100%;
  max-width: none;
  height: 59.403974vw;
  overflow: clip;
  background:
    radial-gradient(120% 110% at 93% -12%, rgba(109, 208, 215, 1) 0%, rgba(87, 169, 233, 1) 50%, rgba(65, 130, 251, 1) 100%),
    #4182fb;
  color: #000000;
}

.page-inclusive-design .inclusive-between-sessions-panel__statement {
  position: absolute;
  left: 50%;
  top: 17.056856%;
  width: 87.682119%;
  min-height: 23.076923%;
  margin: 0;
  transform: translateX(-50%);
  color: #ffffff;
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(24px, 2.999338vw, 45.29px);
  line-height: 1.25;
  font-weight: 590;
  letter-spacing: 0;
  text-align: center;
  font-variation-settings: "wdth" 100;
  word-break: normal;
}

.page-inclusive-design .inclusive-between-sessions-panel__statement-emphasis {
  color: #ffffff;
}

.page-inclusive-design .inclusive-between-sessions-panel__statement-muted {
  color: rgba(0, 0, 0, 0.2);
}

.page-inclusive-design .inclusive-between-sessions-panel__arrow {
  position: absolute;
  left: 66.953642%;
  top: 37.904125%;
  width: 4.139073%;
  height: 1.46304vw;
  transform: rotate(90deg);
  transform-origin: center;
  pointer-events: none;
}

.page-inclusive-design .inclusive-between-sessions-panel__card {
  position: absolute;
  left: 50%;
  width: 36.423841%;
  height: 17.279822%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.589404vw 2.251656vw;
  box-sizing: border-box;
  border-radius: 2.649007vw !important;
  color: rgba(0, 0, 0, 0.8);
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(16px, 1.589404vw, 24px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: 0;
  font-variation-settings: "wdth" 100;
  word-break: break-word;
}

.page-inclusive-design .inclusive-between-sessions-panel__card p {
  width: 100%;
  margin: 0;
}

.page-inclusive-design .inclusive-between-sessions-panel__card--top {
  top: 47.157191%;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0.264901vw 0.993377vw rgba(0, 0, 0, 0.1);
}

.page-inclusive-design .inclusive-between-sessions-panel__card--hmw {
  top: 65.663322%;
  background: #ffffff;
  box-shadow: 0 0.264901vw 0.496689vw rgba(0, 0, 0, 0.1);
}

.page-inclusive-design .inclusive-nudging {
  --inclusive-nudging-pad-y: clamp(48px, 5.291005vw, 80px);
  width: 100%;
  max-width: none;
  height: calc(58.531746vw + (var(--inclusive-nudging-pad-y) * 2));
  padding-block: var(--inclusive-nudging-pad-y);
  box-sizing: border-box;
  overflow: hidden;
  background: #ffffff;
  color: #000000;
}

.page-inclusive-design .inclusive-nudging__stage {
  position: relative;
  width: 96.362434%;
  height: 100%;
  margin: 0 auto;
}

.page-inclusive-design .inclusive-nudging__content {
  position: absolute;
  left: 0;
  top: 0;
  width: 61.839396%;
  height: 94.689266%;
}

.page-inclusive-design .inclusive-nudging__intro {
  position: absolute;
  left: 0;
  top: 0;
  width: 73.029967%;
  height: 35.799523%;
  margin: 0;
}

.page-inclusive-design .inclusive-nudging__title,
.page-inclusive-design .inclusive-nudging__body {
  margin: 0;
  color: #000000;
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-variation-settings: "wdth" 100;
  letter-spacing: 0;
  word-break: normal;
}

.page-inclusive-design .inclusive-nudging__title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-weight: 590;
  line-height: 1.15;
  white-space: nowrap;
}

.page-inclusive-design .inclusive-nudging__title-kicker {
  font-size: clamp(20px, 2.380952vw, 36px);
}

.page-inclusive-design .inclusive-nudging__title-main {
  font-size: clamp(32px, 3.754233vw, 56.764px);
}

.page-inclusive-design .inclusive-nudging__body {
  width: 100%;
  margin-top: 25px;
  font-size: clamp(18px, 1.851852vw, 28px);
  line-height: 1.15;
  font-weight: 400;
}

.page-inclusive-design .inclusive-nudging__diagram-wrap {
  position: absolute;
  left: 0;
  top: 38.902148%;
  width: 100%;
  height: auto;
  aspect-ratio: 929 / 542;
}

.page-inclusive-design .inclusive-nudging__diagram-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.page-inclusive-design .inclusive-nudging__diagram {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.page-inclusive-design .inclusive-nudging__diagram-block {
  position: absolute;
  display: block;
  object-fit: fill;
}

.page-inclusive-design .inclusive-nudging__diagram-block--therapist {
  left: 2.184714%;
  top: 0;
  width: 64.629602%;
  height: 46.471165%;
}

.page-inclusive-design .inclusive-nudging__diagram-block--client {
  left: 2.184714%;
  top: 39.526802%;
  width: 64.629602%;
  height: 45.362107%;
}

.page-inclusive-design .inclusive-nudging__diagram-label {
  position: absolute;
  z-index: 3;
  margin: 0;
  color: #000000;
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(10px, 0.987632vw, 14.933px);
  line-height: 1.15;
  font-weight: 590;
  font-variation-settings: "wdth" 100;
  letter-spacing: 0;
  white-space: nowrap;
}

.page-inclusive-design .inclusive-nudging__diagram-label--therapist {
  left: 6.218514%;
  top: 4.2%;
}

.page-inclusive-design .inclusive-nudging__diagram-label--client {
  left: 6.193757%;
  top: 44.645102%;
}

.page-inclusive-design .inclusive-nudging__arrows {
  position: absolute;
  left: 21.090905%;
  top: 18.863469%;
  z-index: 2;
  display: block;
  width: 35.864585%;
  aspect-ratio: 333.182 / 212.833;
  height: auto;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.page-inclusive-design .inclusive-nudging__arrow {
  position: absolute;
  z-index: 1;
  display: block;
  opacity: 0.36;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.page-inclusive-design .inclusive-nudging__arrow--left {
  left: 21.194833%;
  top: 20.196248%;
  width: 6.461787%;
  height: 38.043623%;
}

.page-inclusive-design .inclusive-nudging__arrow-loop-frame {
  position: absolute;
  left: 41.331539%;
  top: 20.137579%;
  z-index: 1;
  width: 7.282347%;
  height: 41%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.page-inclusive-design .inclusive-nudging__arrow-loop-rotator {
  position: relative;
  width: 302.345793%;
  height: 33.073247%;
  flex: 0 0 auto;
  transform: rotate(90deg);
}

.page-inclusive-design .inclusive-nudging__arrow-loop-node {
  position: relative;
  width: 100%;
  height: 100%;
}

.page-inclusive-design .inclusive-nudging__arrow--loop {
  position: absolute;
  inset: -10.37% -0.47% 0 -0.47%;
  width: auto;
  height: auto;
  max-width: none;
}

.page-inclusive-design .inclusive-nudging__arrow--right {
  left: 50.391819%;
  top: 20.196248%;
  width: 6.461787%;
  height: 38.043623%;
}

.page-inclusive-design .inclusive-nudging__pill {
  position: absolute;
  z-index: 4;
  min-width: 95px;
  min-height: 39px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5.333px;
  padding: 13.333px 21.333px;
  box-sizing: border-box;
  border-radius: 16px !important;
  background: #ffffff;
  box-shadow: 1.067px 2.133px 4px rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.8);
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: 11.733px;
  line-height: 1.25;
  font-weight: 700;
  text-align: center;
  font-variation-settings: "wdth" 100;
  white-space: nowrap;
}

.page-inclusive-design .inclusive-nudging__pill--mood {
  left: 14.1507%;
  top: 58.005545%;
}

.page-inclusive-design .inclusive-nudging__pill--nudges {
  left: 42.323999%;
  top: 58.005545%;
}

.page-inclusive-design .inclusive-nudging__pill--planning {
  left: 27.759957%;
  top: 16.321627%;
}

.page-inclusive-design .inclusive-nudging__pill-icon {
  color: #1e1e1e;
  font-family: Inter, "SF Pro Display", sans-serif;
  font-size: 24.8px;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: -0.5456px;
}

.page-inclusive-design .inclusive-nudging__hmw {
  position: absolute;
  left: 41.334769%;
  top: 69%;
  z-index: 5;
  width: 59.202368%;
  height: 28.650647%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 34px;
  box-sizing: border-box;
  border-radius: 40px !important;
  background: #ffffff;
  box-shadow: 0 4px 7.5px rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.8);
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(14px, 1.322751vw, 20px);
  line-height: 1.15;
  font-weight: 700;
  font-variation-settings: "wdth" 100;
  letter-spacing: 0;
  word-break: break-word;
}

.page-inclusive-design .inclusive-nudging__hmw p {
  width: 100%;
  margin: 0;
}

.page-inclusive-design .inclusive-nudging__phone {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 3;
  width: 29.604187%;
  height: 100%;
}

.page-inclusive-design .inclusive-recoloring {
  --inclusive-recoloring-pad-y: clamp(48px, 5.291005vw, 80px);
  width: 100%;
  max-width: none;
  height: calc(58.531746vw + (var(--inclusive-recoloring-pad-y) * 2));
  padding-block: var(--inclusive-recoloring-pad-y);
  box-sizing: border-box;
  overflow: hidden;
  background: #ffffff;
  color: #000000;
}

.page-inclusive-design .inclusive-recoloring__stage {
  position: relative;
  width: 96.362434%;
  height: 100%;
  margin: 0 auto;
}

.page-inclusive-design .inclusive-recoloring__phone {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  width: 29.604187%;
  height: 100%;
}

.page-inclusive-design .inclusive-recoloring__intro {
  position: absolute;
  left: 39.520548%;
  top: 0.225904%;
  z-index: 2;
  width: 52.534613%;
  margin: 0;
}

.page-inclusive-design .inclusive-recoloring__title,
.page-inclusive-design .inclusive-recoloring__body {
  margin: 0;
  color: #000000;
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-variation-settings: "wdth" 100;
  letter-spacing: 0;
  word-break: normal;
}

.page-inclusive-design .inclusive-recoloring__title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-weight: 590;
  line-height: 1.15;
  white-space: nowrap;
}

.page-inclusive-design .inclusive-recoloring__title-kicker {
  font-size: clamp(20px, 2.380952vw, 36px);
}

.page-inclusive-design .inclusive-recoloring__title-main {
  font-size: clamp(32px, 3.754233vw, 56.764px);
}

.page-inclusive-design .inclusive-recoloring__body {
  width: 94.908616%;
  margin-top: 25px;
  font-size: clamp(18px, 1.851852vw, 28px);
  line-height: 1.15;
  font-weight: 400;
}

.page-inclusive-design .inclusive-recoloring__diagram {
  position: absolute;
  left: 39.520548%;
  top: 36.822785%;
  z-index: 1;
  width: 39.451679%;
  height: 50.378958%;
}

.page-inclusive-design .inclusive-recoloring__diagram-block {
  position: absolute;
  left: -2.21%;
  width: 104.42%;
  display: block;
  object-fit: fill;
  max-width: none;
}

.page-inclusive-design .inclusive-recoloring__diagram-block--therapist {
  top: -2.280269%;
  height: 56.373319%;
}

.page-inclusive-design .inclusive-recoloring__diagram-block--client {
  top: 47.945291%;
  height: 55.024663%;
}

.page-inclusive-design .inclusive-recoloring__diagram-label {
  position: absolute;
  z-index: 2;
  margin: 0;
  color: #000000;
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(10px, 0.987632vw, 14.933px);
  line-height: 1.15;
  font-weight: 590;
  font-variation-settings: "wdth" 100;
  letter-spacing: 0;
  white-space: nowrap;
}

.page-inclusive-design .inclusive-recoloring__diagram-label--therapist {
  left: 6.218514%;
  top: 4.2%;
}

.page-inclusive-design .inclusive-recoloring__diagram-label--client {
  left: 6.193757%;
  top: 55.2%;
}

.page-inclusive-design .inclusive-recoloring__pill {
  position: absolute;
  left: 70.434783%;
  top: 25.336323%;
  z-index: 3;
  width: 151px;
  height: 39px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5.333px;
  padding: 13.333px 21.333px;
  box-sizing: border-box;
  border-radius: 16px !important;
  background: #ffffff;
  box-shadow: 1.067px 2.133px 4px rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.8);
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: 11.733px;
  line-height: 1.25;
  font-weight: 700;
  text-align: center;
  font-variation-settings: "wdth" 100;
  white-space: nowrap;
}

.page-inclusive-design .inclusive-recoloring__pill-icon {
  color: #1e1e1e;
  font-family: Inter, "SF Pro Display", sans-serif;
  font-size: 24.8px;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: -0.5456px;
}

.page-inclusive-design .inclusive-recoloring__pill-text {
  opacity: 0.8;
}

.page-inclusive-design .inclusive-recoloring__hmw {
  position: absolute;
  left: 63.628199%;
  top: 77.374506%;
  z-index: 4;
  width: 37.73911%;
  height: 17.508471%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 34px;
  box-sizing: border-box;
  border-radius: 40px !important;
  background: #ffffff;
  box-shadow: 0 4px 7.5px rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.8);
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(14px, 1.322751vw, 20px);
  line-height: 1.15;
  font-weight: 700;
  font-variation-settings: "wdth" 100;
  letter-spacing: 0;
  word-break: break-word;
}

.page-inclusive-design .inclusive-recoloring__hmw p {
  width: 100%;
  margin: 0;
}

.page-inclusive-design .inclusive-closing-reflection {
  position: relative;
  width: 100%;
  max-width: none;
  height: 59.403974vw;
  min-height: 620px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: clip;
  background-image: radial-gradient(
    356.7px 178.62px at 92.97% -12.27%,
    rgba(109, 208, 215, 1) 0%,
    rgba(87, 169, 233, 1) 50%,
    rgba(65, 130, 251, 1) 100%
  );
  color: #ffffff;
}

.page-inclusive-design .inclusive-closing-reflection__content {
  width: calc(100% - 108px);
  max-width: 1402px;
  margin: 0 auto;
  color: #ffffff;
  text-align: center;
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-variation-settings: "wdth" 100;
  text-shadow: 3.303px 3.303px 20.642px rgba(0, 0, 0, 0.1);
}

.page-inclusive-design .inclusive-closing-reflection__title,
.page-inclusive-design .inclusive-closing-reflection__body {
  margin: 0;
  color: inherit;
  font-weight: 590;
  line-height: 1;
  letter-spacing: 0;
  word-break: break-word;
}

.page-inclusive-design .inclusive-closing-reflection__title {
  font-size: 64px;
}

.page-inclusive-design .inclusive-closing-reflection__body {
  max-width: 1350px;
  margin: 48px auto 0;
  font-size: 38px;
  font-weight: 400;
}

@media (max-width: 900px) {
  .page-inclusive-design .inclusive-collecting-info {
    height: auto;
    padding: 72px 24px;
    box-sizing: border-box;
  }

  .page-inclusive-design .inclusive-collecting-info__stage {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  .page-inclusive-design .inclusive-collecting-info__intro,
  .page-inclusive-design .inclusive-collecting-info__diagram,
  .page-inclusive-design .inclusive-collecting-info__hmw,
  .page-inclusive-design .inclusive-collecting-info__phone {
    position: relative;
    inset: auto;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
  }

  .page-inclusive-design .inclusive-collecting-info__intro {
    max-width: 680px;
  }

  .page-inclusive-design .inclusive-collecting-info__title-kicker {
    font-size: 30px;
  }

  .page-inclusive-design .inclusive-collecting-info__title-main {
    font-size: 44px;
  }

  .page-inclusive-design .inclusive-collecting-info__body {
    font-size: 24px;
  }

  .page-inclusive-design .inclusive-collecting-info__diagram {
    aspect-ratio: 702 / 451;
    max-width: 702px;
  }

  .page-inclusive-design .inclusive-collecting-info__pill {
    gap: 6px;
    padding: 12px 18px;
    border-radius: 28px !important;
  }

  .page-inclusive-design .inclusive-collecting-info__pill-icon {
    font-size: 22px;
  }

  .page-inclusive-design .inclusive-collecting-info__pill-text {
    font-size: 12px;
  }

  .page-inclusive-design .inclusive-collecting-info__hmw {
    min-height: 155px;
    padding: 24px 34px;
    border-radius: 36px !important;
    font-size: 20px;
  }

  .page-inclusive-design .inclusive-collecting-info__phone {
    width: min(100%, 431px);
    aspect-ratio: 431 / 885;
    align-self: center;
  }

  .page-inclusive-design .inclusive-collecting-info--phone-left .inclusive-collecting-info__intro,
  .page-inclusive-design .inclusive-collecting-info--phone-left .inclusive-collecting-info__diagram,
  .page-inclusive-design .inclusive-collecting-info--phone-left .inclusive-collecting-info__hmw,
  .page-inclusive-design .inclusive-collecting-info--phone-left .inclusive-collecting-info__phone {
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
  }

  .page-inclusive-design .inclusive-collecting-info--phone-left .inclusive-collecting-info__phone {
    width: min(100%, 431px);
  }

  .page-inclusive-design .inclusive-between-sessions-panel {
    min-height: 760px;
    height: auto;
    padding: 96px 24px;
    box-sizing: border-box;
    overflow: hidden;
  }

  .page-inclusive-design .inclusive-between-sessions-panel__statement,
  .page-inclusive-design .inclusive-between-sessions-panel__arrow,
  .page-inclusive-design .inclusive-between-sessions-panel__card {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    transform: none;
  }

  .page-inclusive-design .inclusive-between-sessions-panel__statement {
    min-height: 0;
    max-width: 920px;
    margin: 0 auto;
    font-size: 34px;
  }

  .page-inclusive-design .inclusive-between-sessions-panel__arrow {
    display: block;
    width: 60px;
    height: 22px;
    margin: 28px auto 18px;
    transform: rotate(90deg);
  }

  .page-inclusive-design .inclusive-between-sessions-panel__card {
    max-width: 550px;
    min-height: 155px;
    margin-left: auto;
    margin-right: auto;
    padding: 24px 34px;
    border-radius: 36px !important;
    font-size: 21px;
  }

  .page-inclusive-design .inclusive-between-sessions-panel__card--hmw {
    margin-top: 12px;
  }

  .page-inclusive-design .inclusive-nudging {
    height: auto;
    padding: 72px 24px;
    box-sizing: border-box;
  }

  .page-inclusive-design .inclusive-nudging__stage {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  .page-inclusive-design .inclusive-nudging__content,
  .page-inclusive-design .inclusive-nudging__intro,
  .page-inclusive-design .inclusive-nudging__diagram-wrap,
  .page-inclusive-design .inclusive-nudging__phone {
    position: relative;
    inset: auto;
    left: auto;
    right: auto;
    top: auto;
    width: 100%;
    height: auto;
  }

  .page-inclusive-design .inclusive-nudging__content {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  .page-inclusive-design .inclusive-nudging__intro {
    max-width: 680px;
  }

  .page-inclusive-design .inclusive-nudging__title-kicker {
    font-size: 30px;
  }

  .page-inclusive-design .inclusive-nudging__title-main {
    font-size: 44px;
  }

  .page-inclusive-design .inclusive-nudging__body {
    font-size: 24px;
  }

  .page-inclusive-design .inclusive-nudging__diagram-wrap {
    max-width: 901px;
    aspect-ratio: 929 / 542;
  }

  .page-inclusive-design .inclusive-nudging__phone {
    width: min(100%, 431px);
    aspect-ratio: 431 / 885;
    align-self: center;
  }

  .page-inclusive-design .inclusive-recoloring {
    height: auto;
    padding: 72px 24px;
    box-sizing: border-box;
  }

  .page-inclusive-design .inclusive-recoloring__stage {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  .page-inclusive-design .inclusive-recoloring__phone,
  .page-inclusive-design .inclusive-recoloring__intro,
  .page-inclusive-design .inclusive-recoloring__diagram,
  .page-inclusive-design .inclusive-recoloring__hmw {
    position: relative;
    inset: auto;
    left: auto;
    right: auto;
    top: auto;
    width: 100%;
    height: auto;
  }

  .page-inclusive-design .inclusive-recoloring__phone {
    width: min(100%, 431px);
    aspect-ratio: 431 / 885;
    align-self: center;
    order: 2;
  }

  .page-inclusive-design .inclusive-recoloring__intro {
    max-width: 760px;
    order: 1;
  }

  .page-inclusive-design .inclusive-recoloring__title-kicker {
    font-size: 30px;
  }

  .page-inclusive-design .inclusive-recoloring__title-main {
    font-size: 44px;
  }

  .page-inclusive-design .inclusive-recoloring__body {
    width: 100%;
    font-size: 24px;
  }

  .page-inclusive-design .inclusive-recoloring__diagram {
    max-width: 575px;
    aspect-ratio: 575 / 446;
    order: 3;
  }

  .page-inclusive-design .inclusive-recoloring__hmw {
    min-height: 155px;
    padding: 24px 34px;
    border-radius: 36px !important;
    font-size: 20px;
    order: 4;
  }

  .page-inclusive-design .inclusive-closing-reflection {
    height: auto;
    min-height: 620px;
    padding: 96px 24px;
    box-sizing: border-box;
  }

  .page-inclusive-design .inclusive-closing-reflection__content {
    width: 100%;
  }

  .page-inclusive-design .inclusive-closing-reflection__title {
    font-size: 44px;
  }

  .page-inclusive-design .inclusive-closing-reflection__body {
    margin-top: 36px;
    font-size: 32px;
  }
}

@media (max-width: 540px) {
  .page-inclusive-design .inclusive-collecting-info {
    padding: 54px 18px;
  }

  .page-inclusive-design .inclusive-collecting-info__stage {
    gap: 24px;
  }

  .page-inclusive-design .inclusive-collecting-info__title-kicker {
    font-size: 24px;
  }

  .page-inclusive-design .inclusive-collecting-info__title-main {
    font-size: 34px;
  }

  .page-inclusive-design .inclusive-collecting-info__body {
    margin-top: 18px;
    font-size: 19px;
  }

  .page-inclusive-design .inclusive-collecting-info__diagram-label {
    font-size: 10px;
  }

  .page-inclusive-design .inclusive-collecting-info__pill {
    width: 34%;
    min-width: 128px;
    padding: 8px 12px;
  }

  .page-inclusive-design .inclusive-collecting-info__pill-icon {
    font-size: 18px;
  }

  .page-inclusive-design .inclusive-collecting-info__pill-text {
    font-size: 10px;
  }

  .page-inclusive-design .inclusive-collecting-info__hmw {
    min-height: 132px;
    padding: 22px 24px;
    border-radius: 28px !important;
    font-size: 17px;
  }

  .page-inclusive-design .inclusive-between-sessions-panel {
    min-height: 620px;
    padding: 72px 18px;
  }

  .page-inclusive-design .inclusive-between-sessions-panel__statement {
    font-size: 25px;
  }

  .page-inclusive-design .inclusive-between-sessions-panel__card {
    min-height: 132px;
    padding: 22px 24px;
    border-radius: 28px !important;
    font-size: 17px;
  }

  .page-inclusive-design .inclusive-nudging {
    padding: 54px 18px;
  }

  .page-inclusive-design .inclusive-nudging__stage,
  .page-inclusive-design .inclusive-nudging__content {
    gap: 24px;
  }

  .page-inclusive-design .inclusive-nudging__title-kicker {
    font-size: 24px;
  }

  .page-inclusive-design .inclusive-nudging__title-main {
    font-size: 34px;
  }

  .page-inclusive-design .inclusive-nudging__body {
    margin-top: 18px;
    font-size: 19px;
  }

  .page-inclusive-design .inclusive-nudging__diagram-label {
    font-size: 10px;
  }

  .page-inclusive-design .inclusive-nudging__pill {
    min-width: 78px;
    min-height: 30px;
    padding: 8px 12px;
    border-radius: 12px !important;
    font-size: 9px;
  }

  .page-inclusive-design .inclusive-nudging__pill-icon {
    font-size: 18px;
  }

  .page-inclusive-design .inclusive-nudging__hmw {
    padding: 22px 24px;
    border-radius: 28px !important;
    font-size: 15px;
  }

  .page-inclusive-design .inclusive-recoloring {
    padding: 54px 18px;
  }

  .page-inclusive-design .inclusive-recoloring__stage {
    gap: 24px;
  }

  .page-inclusive-design .inclusive-recoloring__title-kicker {
    font-size: 24px;
  }

  .page-inclusive-design .inclusive-recoloring__title-main {
    font-size: 34px;
  }

  .page-inclusive-design .inclusive-recoloring__body {
    margin-top: 18px;
    font-size: 19px;
  }

  .page-inclusive-design .inclusive-recoloring__diagram-label {
    font-size: 10px;
  }

  .page-inclusive-design .inclusive-recoloring__pill {
    width: 30%;
    min-width: 118px;
    height: 30px;
    padding: 8px 12px;
    border-radius: 12px !important;
    font-size: 9px;
  }

  .page-inclusive-design .inclusive-recoloring__pill-icon {
    font-size: 18px;
  }

  .page-inclusive-design .inclusive-recoloring__hmw {
    min-height: 132px;
    padding: 22px 24px;
    border-radius: 28px !important;
    font-size: 15px;
  }

  .page-inclusive-design .inclusive-closing-reflection {
    min-height: 560px;
    padding: 72px 18px;
  }

  .page-inclusive-design .inclusive-closing-reflection__title {
    font-size: 32px;
  }

  .page-inclusive-design .inclusive-closing-reflection__body {
    margin-top: 28px;
    font-size: 24px;
  }
}

@media (max-width: 900px) {
  .page-inclusive-design .inclusive-hero {
    height: 72svh;
    min-height: 620px;
  }

  .page-inclusive-design .inclusive-hero__content {
    left: 24px;
    width: calc(100% - 48px);
    gap: 24px;
  }

  .page-inclusive-design .inclusive-hero__eyebrow {
    font-size: 24px;
  }

  .page-inclusive-design .inclusive-hero__title {
    font-size: 52px;
  }

  .page-inclusive-design .inclusive-overview {
    min-height: auto;
    padding: 72px 24px;
  }

  .page-inclusive-design .inclusive-overview__grid {
    grid-template-columns: 1fr;
    max-width: none;
    gap: 28px;
  }

  .page-inclusive-design .inclusive-overview-card {
    min-height: 230px;
    padding: 42px 52px;
    border-radius: 32px !important;
  }

  .page-inclusive-design .inclusive-process {
    min-height: auto;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 42px;
    padding: 72px 24px;
  }

  .page-inclusive-design .inclusive-process__title {
    font-size: 80px;
    white-space: normal;
  }

  .page-inclusive-design .inclusive-process__list {
    width: 100%;
    max-width: none;
    flex-basis: auto;
    gap: 18px;
  }

  .page-inclusive-design .inclusive-process-card {
    height: 132px;
    padding: 0 44px;
    border-radius: 28px !important;
  }

  .page-inclusive-design .inclusive-process-card__title {
    white-space: normal;
  }

  .page-inclusive-design .inclusive-research-findings {
    min-height: auto;
    gap: 48px;
    padding: 72px 24px;
  }

  .page-inclusive-design .inclusive-research-findings__title {
    font-size: 48px;
  }

  .page-inclusive-design .inclusive-research-findings__grid {
    height: auto;
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 28px;
    max-width: none;
  }

  .page-inclusive-design .inclusive-research-finding-card {
    min-height: 190px;
    padding: 42px 52px;
    border-radius: 32px !important;
  }

  .page-inclusive-design .inclusive-research-finding-card__title {
    max-width: none;
    font-size: 24px;
  }

  .page-inclusive-design .inclusive-problem-statement {
    height: 72svh;
    min-height: 620px;
  }

  .page-inclusive-design .inclusive-problem-statement__content {
    left: 24px;
    width: calc(100% - 48px);
    gap: 24px;
  }

  .page-inclusive-design .inclusive-problem-statement__eyebrow {
    font-size: 24px;
  }

  .page-inclusive-design .inclusive-problem-statement__text {
    font-size: 42px;
  }

  .page-inclusive-design .inclusive-talk-intro {
    padding: 72px 24px;
  }

  .page-inclusive-design .inclusive-expert-insight {
    gap: 40px;
    padding: 72px 24px;
  }

  .page-inclusive-design .inclusive-expert-insight__quote {
    min-height: 220px;
  }

  .page-inclusive-design .inclusive-expert-insight__quote-text {
    width: calc(100% - 88px);
    font-size: 32px;
  }

  .page-inclusive-design .inclusive-expert-insight__quote-mark {
    font-size: 112px;
  }

  .page-inclusive-design .inclusive-expert-insight__detail {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .page-inclusive-design .inclusive-expert-insight__person {
    align-self: flex-start;
    width: 100%;
    padding-left: 0;
    justify-content: flex-start;
  }

  .page-inclusive-design .inclusive-expert-insight__cards {
    width: 100%;
    min-height: auto;
  }

  .page-inclusive-design .inclusive-expert-card {
    min-height: 220px;
    padding: 42px 52px;
    border-radius: 32px !important;
  }

  .page-inclusive-design .inclusive-codesigner {
    min-height: 100svh;
    gap: 40px;
    padding: 0 24px;
  }

  .page-inclusive-design .inclusive-codesigner__title {
    font-size: 72px;
  }

  .page-inclusive-design .inclusive-ai-engineer-insight {
    padding: 72px 24px;
  }

  .page-inclusive-design .inclusive-ai-engineer-insight .inclusive-expert-insight__detail {
    grid-template-columns: 1fr;
  }

  .page-inclusive-design .inclusive-ai-engineer-insight .inclusive-expert-insight__cards,
  .page-inclusive-design .inclusive-ai-engineer-insight .inclusive-expert-card {
    width: 100%;
  }

  .page-inclusive-design .inclusive-social-work-insight {
    gap: 40px;
    padding: 72px 24px;
  }

  .page-inclusive-design .inclusive-social-work-insight .inclusive-expert-insight__detail {
    grid-template-columns: 1fr;
  }

  .page-inclusive-design .inclusive-social-work-insight .inclusive-expert-insight__cards,
  .page-inclusive-design .inclusive-social-work-insight .inclusive-expert-card {
    width: 100%;
  }

  .page-inclusive-design .inclusive-social-work-insight .inclusive-expert-insight__quote {
    padding-top: 35px;
  }

  .page-inclusive-design .inclusive-social-work-insight .inclusive-expert-insight__quote-mark--close {
    right: 44px;
  }

  .page-inclusive-design .inclusive-design-principles {
    gap: 48px;
    padding: 72px 24px;
  }

  .page-inclusive-design .inclusive-design-principles__title {
    font-size: 48px;
  }

  .page-inclusive-design .inclusive-design-principles__grid {
    grid-template-columns: 1fr;
    max-width: none;
    gap: 28px;
  }

  .page-inclusive-design .inclusive-design-principle-card {
    min-height: 270px;
    padding: 42px 52px;
    border-radius: 32px !important;
  }

  .page-inclusive-design .inclusive-design-principle-card__copy {
    font-size: 28px;
  }

  .page-inclusive-design .inclusive-refined-problem {
    height: 72svh;
    min-height: 620px;
  }

  .page-inclusive-design .inclusive-refined-problem__content {
    left: 24px;
    width: calc(100% - 48px);
    gap: 24px;
  }

  .page-inclusive-design .inclusive-refined-problem__eyebrow {
    font-size: 24px;
  }

  .page-inclusive-design .inclusive-refined-problem__text {
    font-size: 42px;
  }

  .page-inclusive-design .inclusive-therapist-journey {
    padding: 72px 24px;
  }

  .page-inclusive-design .inclusive-therapist-journey__title {
    font-size: 40px;
  }

  .page-inclusive-design .inclusive-therapist-journey__description,
  .page-inclusive-design .inclusive-journey-note {
    font-size: 24px;
  }

  .page-inclusive-design .inclusive-therapist-journey__analysis {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .page-inclusive-design .inclusive-journey-note {
    min-height: 220px;
    padding: 42px 52px;
  }
}

@media (max-width: 540px) {
  .page-inclusive-design .inclusive-hero {
    min-height: 560px;
  }

  .page-inclusive-design .inclusive-hero__content {
    left: 18px;
    width: calc(100% - 36px);
    gap: 20px;
  }

  .page-inclusive-design .inclusive-hero__eyebrow {
    font-size: 18px;
  }

  .page-inclusive-design .inclusive-hero__title {
    font-size: 38px;
  }

  .page-inclusive-design .inclusive-overview {
    padding: 48px 18px;
  }

  .page-inclusive-design .inclusive-overview__grid {
    gap: 20px;
  }

  .page-inclusive-design .inclusive-overview-card {
    min-height: 220px;
    padding: 34px 28px;
    border-radius: 26px !important;
  }

  .page-inclusive-design .inclusive-overview-card__title {
    font-size: 21px;
  }

  .page-inclusive-design .inclusive-overview-card__body {
    font-size: 17px;
  }

  .page-inclusive-design .inclusive-process {
    gap: 28px;
    padding: 54px 18px;
  }

  .page-inclusive-design .inclusive-process__title {
    font-size: 80px;
  }

  .page-inclusive-design .inclusive-process__list {
    gap: 14px;
  }

  .page-inclusive-design .inclusive-process-card {
    height: 112px;
    padding: 0 28px;
    border-radius: 24px !important;
  }

  .page-inclusive-design .inclusive-process-card__title {
    font-size: 19px;
  }

  .page-inclusive-design .inclusive-research-findings {
    gap: 34px;
    padding: 54px 18px;
  }

  .page-inclusive-design .inclusive-research-findings__title {
    font-size: 48px;
  }

  .page-inclusive-design .inclusive-research-findings__grid {
    gap: 20px;
  }

  .page-inclusive-design .inclusive-research-finding-card {
    min-height: 160px;
    padding: 34px 28px;
    border-radius: 26px !important;
  }

  .page-inclusive-design .inclusive-research-finding-card__title {
    font-size: 24px;
  }

  .page-inclusive-design .inclusive-problem-statement {
    min-height: 560px;
  }

  .page-inclusive-design .inclusive-problem-statement__content {
    left: 18px;
    width: calc(100% - 36px);
    gap: 20px;
  }

  .page-inclusive-design .inclusive-problem-statement__eyebrow {
    font-size: 18px;
  }

  .page-inclusive-design .inclusive-problem-statement__text {
    font-size: 29px;
  }

  .page-inclusive-design .inclusive-talk-intro {
    padding: 54px 18px;
  }

  .page-inclusive-design .inclusive-expert-insight {
    gap: 30px;
    padding: 54px 18px;
  }

  .page-inclusive-design .inclusive-expert-insight__quote {
    min-height: 190px;
  }

  .page-inclusive-design .inclusive-expert-insight__quote-text {
    width: calc(100% - 58px);
    font-size: 32px;
  }

  .page-inclusive-design .inclusive-expert-insight__quote-mark {
    font-size: 74px;
  }

  .page-inclusive-design .inclusive-expert-insight__person-copy {
    font-size: 20px;
  }

  .page-inclusive-design .inclusive-expert-insight__avatar {
    width: 82px;
    height: 82px;
  }

  .page-inclusive-design .inclusive-expert-insight__avatar img {
    width: 65px;
    height: 79px;
  }

  .page-inclusive-design .inclusive-expert-card {
    min-height: 190px;
    padding: 34px 28px;
    border-radius: 26px !important;
  }

  .page-inclusive-design .inclusive-expert-card__title {
    font-size: 21px;
  }

  .page-inclusive-design .inclusive-expert-card__body {
    font-size: 17px;
  }

  .page-inclusive-design .inclusive-ai-engineer-insight {
    padding: 54px 18px;
  }

  .page-inclusive-design .inclusive-social-work-insight {
    gap: 30px;
    padding: 54px 18px;
  }

  .page-inclusive-design .inclusive-social-work-insight .inclusive-expert-insight__quote {
    padding-top: 35px;
  }

  .page-inclusive-design .inclusive-social-work-insight .inclusive-expert-insight__quote-mark--close {
    right: 29px;
  }

  .page-inclusive-design .inclusive-design-principles {
    gap: 34px;
    padding: 54px 18px;
  }

  .page-inclusive-design .inclusive-design-principles__title {
    font-size: 38px;
  }

  .page-inclusive-design .inclusive-design-principles__grid {
    gap: 20px;
  }

  .page-inclusive-design .inclusive-design-principle-card {
    min-height: 250px;
    padding: 34px 28px;
    border-radius: 26px !important;
  }

  .page-inclusive-design .inclusive-design-principle-card__copy {
    font-size: 24px;
  }

  .page-inclusive-design .inclusive-refined-problem {
    min-height: 560px;
  }

  .page-inclusive-design .inclusive-refined-problem__content {
    left: 18px;
    width: calc(100% - 36px);
    gap: 20px;
  }

  .page-inclusive-design .inclusive-refined-problem__eyebrow {
    font-size: 18px;
  }

  .page-inclusive-design .inclusive-refined-problem__text {
    font-size: 29px;
  }

  .page-inclusive-design .inclusive-codesigner {
    min-height: 100svh;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;
    padding: 54px 18px;
  }

  .page-inclusive-design .inclusive-codesigner__title {
    font-size: 52px;
    white-space: normal;
  }

  .page-inclusive-design .inclusive-codesigner__person {
    width: 100%;
    flex-basis: auto;
    align-items: center;
  }

  .page-inclusive-design .inclusive-codesigner__avatar {
    margin-left: 0;
  }

  .page-inclusive-design .inclusive-therapist-journey {
    padding: 54px 18px;
  }

  .page-inclusive-design .inclusive-therapist-journey__inner {
    gap: 28px;
  }

  .page-inclusive-design .inclusive-therapist-journey__title {
    font-size: 32px;
  }

  .page-inclusive-design .inclusive-therapist-journey__description,
  .page-inclusive-design .inclusive-journey-note {
    font-size: 20px;
  }

  .page-inclusive-design .inclusive-therapist-journey__column-title {
    font-size: 26px;
  }

  .page-inclusive-design .inclusive-therapist-journey__between-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .page-inclusive-design .inclusive-journey-note--wide {
    grid-column: auto;
  }

  .page-inclusive-design .inclusive-journey-note {
    min-height: 180px;
    padding: 34px 28px;
  }
}


/* ─────────────────────────────────────────────
   REDUCED MOTION
   Target decorative animation classes only —
   leaves :focus-visible and functional motion intact.
───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .nav__link,
  .nav__logo,
  .nav__col--right,
  .footer__social-link,
  .text-link,
  .text-link img,
  .sva__text a,
  .timeline__company,
  .timeline__clients a,
  .case-breadcrumb {
    transition-duration: 0.01ms !important;
    animation-duration:  0.01ms !important;
  }
}