/* ============================================================
   Studio Nāz — Portfolio
   ============================================================ */

/* ---------- Reset & base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

/* Force light mode for now — override dark-mode tokens.
   Re-enable by removing this block. */
:root,
[data-theme="dark"] {
  --color-midnight-ink: #191818 !important;
  --color-pressed-linen: #efede7 !important;
  --color-parchment-cream: #f7f7f2 !important;
  --color-weathered-stone: #e1dcd5 !important;
  --surface-lift: #efede7 !important;
  --surface-depth: #e1dcd5 !important;
  --surface-canvas: #f7f7f2 !important;
  color-scheme: light;
}

body {
  font-family: var(--font-plex-sans-counsel);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-midnight-ink);
  background: var(--color-parchment-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

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

button {
  font-family: inherit;
  cursor: pointer;
}

/* ---------- Layout primitives ---------- */
.container {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding-inline: var(--spacing-32);
}

/* ---------- Typography utilities ---------- */
.eyebrow {
  font-family: var(--font-plex-mono-eyebrow);
  font-size: var(--text-label);
  line-height: var(--leading-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-midnight-ink);
  font-weight: 400;
}

.serif {
  font-family: var(--font-plex-serif-editorial);
  font-weight: 400;
}

em,
.italic {
  font-style: italic;
}

/* ---------- Tag pill ---------- */
.tag {
  display: inline-flex;
  /* width: fit-content prevents stretching when used as a flex child in a
     column layout, while still respecting the parent's align-items value
     (so it can still be centered, e.g. in the Outcomes header). */
  width: fit-content;
  align-items: center;
  gap: var(--spacing-8);
  padding: var(--spacing-4) var(--spacing-12);
  border-radius: var(--radius-tags);
  background: var(--color-pressed-linen);
  font-family: var(--font-plex-mono-eyebrow);
  font-size: var(--text-label);
  line-height: var(--leading-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-midnight-ink);
}

.tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-midnight-ink);
}

/* Variant: hide the leading dot (used on the polaroid "Read Now" tag) */
.tag--no-dot::before {
  display: none;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  padding: var(--spacing-12) var(--spacing-24);
  border-radius: var(--radius-buttons);
  font-family: var(--font-plex-sans-counsel);
  font-size: var(--text-body);
  font-weight: 500;
  line-height: 1.5;
  border: 1px solid transparent;
  transition: background var(--duration-ui-default) var(--easing-ui-default),
              color var(--duration-ui-default) var(--easing-ui-default),
              border-color var(--duration-ui-default) var(--easing-ui-default);
  cursor: pointer;
  white-space: nowrap;
}

.btn--primary {
  background: var(--color-midnight-ink);
  color: var(--color-parchment-cream);
  box-shadow: var(--shadow-button-bevel);
}

.btn--primary:hover {
  background: var(--color-obsidian-shade);
}

.btn--secondary {
  background: transparent;
  color: var(--color-midnight-ink);
  border-color: transparent;
}

.btn--secondary:hover {
  background: var(--color-pressed-linen);
}

.btn--sm {
  padding: var(--spacing-8) var(--spacing-16);
  font-size: var(--text-body-sm);
}

/* ============================================================
   NAVIGATION
   ============================================================ */

/* ----------------------------------------------------------------
   TEMP: hide the center nav links (About, Services, Case Studies,
   Journal) and the mobile hamburger while those pages don't have
   content yet. The brand and "Book a Call" CTA remain. To restore,
   delete this block.
   ---------------------------------------------------------------- */
.nav__links,
.nav__hamburger {
  display: none !important;
}

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-parchment-cream);
}

.nav__inner {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: var(--spacing-20) var(--spacing-32);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
}

.nav__left {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  color: var(--color-midnight-ink);
  /* Subtle fade on hover so the logo still feels like a tap target */
  transition: opacity var(--duration-ui-default) var(--easing-ui-default);
}

.nav__brand:hover {
  opacity: 0.72;
}

.nav__brand-logo {
  display: block;
  width: 107px;
  height: auto;
}

/* ---- Center links: pill hover (transparent → dark, text inverts) ---- */
.nav__links {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

.nav__link {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-8) var(--spacing-12);
  border: 1px solid transparent;
  border-radius: var(--radius-buttons);
  font-family: var(--font-plex-sans-counsel);
  font-size: var(--text-body-sm);
  font-weight: 600;
  line-height: 1.143;        /* 16px on 14px */
  color: var(--color-midnight-ink);
  background: transparent;
  transition:
    background-color var(--duration-ui-default) var(--easing-ui-default),
    border-color var(--duration-ui-default) var(--easing-ui-default),
    color var(--duration-ui-default) var(--easing-ui-default);
}

.nav__link:hover,
.nav__link:focus-visible {
  background: rgba(25, 24, 24, 0.88);
  border-color: rgba(25, 24, 24, 0.88);
  color: var(--color-parchment-cream);
  outline: none;
}

/* "Active" page styling — apply by adding .is-active to the current page's link */
.nav__link.is-active {
  background: var(--color-pressed-linen);
  border-color: rgba(25, 24, 24, 0.08);
}

/* ---- Right-side CTA ---- */
.nav__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-4);
  padding: var(--spacing-8) var(--spacing-12);
  border: 1px solid rgba(247, 247, 242, 0.08);
  border-radius: var(--radius-buttons);
  background: var(--color-midnight-ink);
  color: var(--color-parchment-cream);
  font-family: var(--font-plex-sans-counsel);
  font-size: var(--text-body-sm);
  font-weight: 500;
  line-height: 1.143;
  box-shadow: var(--shadow-button-bevel);
  transition: background-color var(--duration-ui-default) var(--easing-ui-default);
}

.nav__cta:hover,
.nav__cta:focus-visible {
  background: rgba(25, 24, 24, 0.88);
  outline: none;
}

.nav__cta-label {
  display: inline-block;
}

/* ---- Hamburger (mobile only) ---- */
.nav__hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(25, 24, 24, 0.16);
  border-radius: var(--radius-buttons-pill);
  background: transparent;
  color: var(--color-midnight-ink);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  transition: background-color var(--duration-ui-default) var(--easing-ui-default);
}

.nav__hamburger:hover {
  background: rgba(25, 24, 24, 0.06);
}

.nav__hamburger-icon--close {
  display: none;
}

.nav[data-mobile-open="true"] .nav__hamburger-icon--open {
  display: none;
}

.nav[data-mobile-open="true"] .nav__hamburger-icon--close {
  display: block;
}

/* ---- Mobile menu panel ---- */
.nav__mobile {
  background: var(--color-parchment-cream);
  border-top: 1px solid rgba(25, 24, 24, 0.08);
  overflow: hidden;
}

.nav__mobile[hidden] {
  display: none;
}

.nav__mobile-list {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: var(--spacing-16) var(--spacing-20);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.nav__mobile-list a {
  padding: var(--spacing-12) var(--spacing-12);
  border-radius: var(--radius-buttons);
  font-family: var(--font-plex-sans-counsel);
  font-size: var(--text-body);
  font-weight: 500;
  color: var(--color-midnight-ink);
  transition: background-color var(--duration-ui-default) var(--easing-ui-default);
}

.nav__mobile-list a:hover,
.nav__mobile-list a:focus-visible {
  background: var(--color-pressed-linen);
  outline: none;
}

.nav__mobile-cta {
  margin-top: var(--spacing-8);
  background: var(--color-midnight-ink) !important;
  color: var(--color-parchment-cream) !important;
  text-align: center;
  justify-content: center;
  display: inline-flex !important;
  align-items: center;
  box-shadow: var(--shadow-button-bevel);
}

/* ---- Breakpoints ---- */
@media (max-width: 991px) {
  .nav__links {
    display: none;
  }
  .nav__hamburger {
    display: inline-flex;
  }
}

@media (max-width: 767px) {
  .nav__inner {
    padding: var(--spacing-16) var(--spacing-20);
  }
  .nav__brand-logo {
    width: 94px;
  }
  .nav__cta {
    padding: var(--spacing-8) 10px;
    font-size: 13px;
  }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  background: var(--color-parchment-cream);
}

/* ---- Entrance animation ----
   Editorial progressive load: the photo reveals top-down with a
   gentle scale settle (like a poster unfurling), the polaroid card
   rises in after, and the left-side text/CTAs fade up in a soft
   stagger. Driven entirely by CSS — runs once on page load. */

@keyframes hero-image-reveal {
  from {
    clip-path: inset(0 0 100% 0);
    transform: scale(1.06);
  }
  to {
    clip-path: inset(0 0 0 0);
    transform: scale(1);
  }
}

@keyframes hero-polaroid-rise {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes hero-text-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Photo: 1.4s top-down reveal + scale settle */
.hero__portrait-img {
  animation: hero-image-reveal 1400ms cubic-bezier(0.7, 0, 0.2, 1) both;
  will-change: clip-path, transform;
}

/* Polaroid: rises in once the photo is mostly there */
.polaroid-wrap {
  animation: hero-polaroid-rise 900ms cubic-bezier(0.34, 1.2, 0.4, 1) 1000ms both;
  will-change: opacity, transform;
}

/* Left side: tag → copy → CTAs, each 700ms fade-up with stagger */
.hero__left > * {
  animation: hero-text-rise 700ms cubic-bezier(0.2, 0, 0.2, 1) both;
  will-change: opacity, transform;
}
.hero__left > *:nth-child(1) { animation-delay: 100ms; }
.hero__left > *:nth-child(2) { animation-delay: 250ms; }
.hero__left > *:nth-child(3) { animation-delay: 450ms; }

@media (prefers-reduced-motion: reduce) {
  .hero__portrait-img,
  .polaroid-wrap,
  .hero__left > * {
    animation: none;
  }
}

.hero__inner {
  max-width: var(--page-max-width);
  margin: 0 auto;
  /* Top padding reduced from 120px → 20px to tighten the hero against the nav */
  padding: var(--spacing-20) var(--spacing-32) var(--spacing-32);
  display: grid;
  /* Proportional columns (≈ 564:680 from the Figma) so both sides scale
     with viewport. The right portrait used to be a fixed 680px which made
     it appear static — now it grows/shrinks fluidly. */
  grid-template-columns: minmax(0, 564fr) minmax(0, 680fr);
  gap: clamp(48px, 9vw, 132px);
  /* Stretch columns so the left one fills the right column's height,
     then center its content vertically (right column stays pinned to top
     via align-self below). */
  align-items: stretch;
  min-height: calc(100vh - 72px);
}

.hero__left {
  /* Center the left column itself within the grid row (which is sized by
     the right column's 928px portrait). No internal justify-content needed. */
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-32);
  max-width: 564px;
}

.hero__right {
  align-self: start;
}

.hero__copy {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
}

.hero__headline {
  font-family: var(--font-plex-serif-editorial);
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--color-midnight-ink);
  margin: 0;
  display: flex;
  flex-direction: column;
}

.hero__headline-static {
  display: block;
}

.hero__rotator {
  display: block;
  /* Item height and reveal window match (both 80px), giving italic
     descenders ~8px of vertical breathing room around the text so
     nothing gets clipped, while the precise item-height step keeps
     consecutive frames from bleeding into each other. */
  height: 80px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.hero__rotator-track {
  display: flex;
  flex-direction: column;
  transition: transform 600ms cubic-bezier(0.65, 0, 0.35, 1);
  will-change: transform;
}

.hero__rotator-item {
  display: flex;
  align-items: center;
  font-style: italic;
  font-size: var(--text-display);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  height: 80px;
  flex: 0 0 80px;
}

.hero__body {
  font-family: var(--font-plex-sans-counsel);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-midnight-ink);
  margin: 0;
  max-width: 564px;
  opacity: 0.88;
}

.hero__cta {
  display: flex;
  gap: var(--spacing-8);
}

.hero__btn-outline {
  border-color: rgba(25, 24, 24, 0.16);
}

/* ---- Right column: image wrap (template's .image-wrap-home-a) ----
   Used to be fixed 680×928 — now uses aspect-ratio so the portrait
   scales fluidly with its grid column. Also a CSS container so the
   polaroid inside can size itself proportionally via cqi units. */
.hero__right {
  position: relative;
  width: 100%;
  aspect-ratio: 680 / 928;
  border-radius: var(--radius-cards);
  overflow: hidden;
  container-type: inline-size;
}

.hero__portrait-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ---- Polaroid notch wrapper ----
   A page-colored padded box that "cuts" into the photo to create
   visual breathing room around the polaroid card. Two SVG decorators
   add the inverse-rounded outer corners. */
.polaroid-wrap {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 8px 0 0 8px;
  background: var(--color-parchment-cream);
  border-top-left-radius: var(--radius-cards);
}

.polaroid-corner {
  position: absolute;
  width: 24px;
  height: 24px;
  color: var(--color-parchment-cream);
  pointer-events: none;
}

.polaroid-corner--left {
  /* Sits to the left of the wrapper, flush with its bottom edge.
     The +2px / -2px offsets create a 2px overlap so the curves
     join the wrapper without a hairline gap. */
  bottom: -2px;
  left: 2px;
  transform: translateX(-100%);
}

.polaroid-corner--top {
  /* Sits above the wrapper, flush with its right edge */
  top: 2px;
  right: -2px;
  transform: translateY(-100%);
}

/* ---- Polaroid card ----
   Sized fluidly off the hero portrait via container queries
   (cqi = 1% of the container's inline size, i.e. .hero__right's width).
   At Figma reference width (680px) the card is 388px = 57.06%, so
   57cqi keeps the same ratio at every viewport — including ultrawide.
   max() floors at 260px so it stays readable on narrow screens. */
.polaroid {
  position: relative;
  width: max(260px, 57cqi);
  aspect-ratio: 388 / 120;
  height: auto;
  background: var(--color-pressed-linen);
  border-radius: var(--radius-cards);
  padding: var(--spacing-12);
  display: flex;
  gap: var(--spacing-16);
  backdrop-filter: blur(8px);
  transition: background var(--duration-ui-default) var(--easing-ui-default);
}

.polaroid:hover {
  background: var(--color-weathered-stone);
}

.polaroid__image {
  /* Square thumbnail fills the polaroid's inner height so it scales
     down proportionally as the card shrinks. */
  height: 100%;
  aspect-ratio: 1 / 1;
  width: auto;
  flex-shrink: 0;
  border-radius: var(--radius-cards);
  overflow: hidden;
  background: var(--color-weathered-stone);
}

.polaroid__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.polaroid__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}

.polaroid__title {
  font-family: var(--font-plex-sans-counsel);
  font-size: var(--text-body);   /* 16px */
  font-weight: 500;
  line-height: var(--leading-body);
  color: var(--color-midnight-ink);
  margin: 0;
}

.polaroid__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tag--depth {
  background: var(--color-weathered-stone);
}

.polaroid__arrow {
  color: var(--color-midnight-ink);
  transition: transform var(--duration-ui-default) var(--easing-ui-default);
}

.polaroid:hover .polaroid__arrow {
  transform: translate(2px, -2px);
}

/* ---- Hero responsive ---- */
@media (max-width: 991px) {
  .hero__inner {
    grid-template-columns: 1fr;
    gap: var(--spacing-64);
    padding-top: var(--spacing-64);
    min-height: auto;
  }
  .hero__right {
    /* Keep aspect ratio, but allow the column to cap so the portrait
       doesn't blow up at tablet widths. */
    max-width: 680px;
    margin: 0 auto;
  }
  .hero__headline {
    font-size: var(--text-display-sm);
    line-height: var(--leading-display-sm);
  }
  .hero__rotator,
  .hero__rotator-item {
    height: 60px;
    line-height: 52px;
    flex-basis: 60px;
  }
  .hero__rotator-item {
    font-size: var(--text-display-sm);
  }
}

@media (max-width: 600px) {
  .hero__inner {
    padding: var(--spacing-48) var(--spacing-20);
  }
  .hero__headline {
    font-size: var(--text-heading-lg);
    line-height: var(--leading-heading-lg);
  }
  .hero__rotator,
  .hero__rotator-item {
    height: 50px;
    line-height: 40px;
    flex-basis: 50px;
  }
  .hero__rotator-item {
    font-size: var(--text-heading-lg);
  }
}

/* ============================================================
   SECTION-LEVEL REVEAL ANIMATION
   Fade up + un-blur as each section enters the viewport.
   ============================================================ */
.reveal {
  opacity: 0;
  filter: blur(12px);
  transform: translateY(12px);
  transition:
    opacity 700ms ease-out,
    filter 700ms ease-out,
    transform 700ms ease-out;
  will-change: opacity, filter, transform;
}

.reveal.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   HERO — logos cluster (lives inside hero__copy)
   ============================================================ */
.hero__logos {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  width: 100%;
}

/* ---- Logo marquee ---- */
.logo-strip {
  position: relative;
  height: 80px;
  overflow: hidden;
  width: 100%;
}

.logo-strip__track {
  display: flex;
  align-items: center;
  gap: var(--spacing-80);
  height: 100%;
  width: max-content;
  animation: marquee 38s linear infinite;
}

.logo-strip__item {
  display: inline-flex;
  align-items: center;
  height: 100%;
  flex-shrink: 0;
}

/* Real client logos — muted monochrome treatment so brand colors
   don't clash with the parchment palette. Heights tuned per-logo so
   they sit on a consistent visual baseline (Figma proportions). */
.logo-strip__img {
  display: block;
  width: auto;
  filter: grayscale(1);
  opacity: 0.55;
  user-select: none;
}

.logo-strip__img--centerfield { height: 30px; }
.logo-strip__img--oracle      { height: 16px; }
.logo-strip__img--blubinder   { height: 19px; }
.logo-strip__img--bluekai     { height: 24px; }
.logo-strip__img--addthis     { height: 22px; }
.logo-strip__img--clover      { height: 26px; }
.logo-strip__img--cureate     { height: 18px; }

.logo-strip__fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  pointer-events: none;
  z-index: 1;
}

.logo-strip__fade--left {
  left: 0;
  background: linear-gradient(to right, var(--color-parchment-cream) 0%, rgba(247, 247, 242, 0) 100%);
}

.logo-strip__fade--right {
  right: 0;
  background: linear-gradient(to left, var(--color-parchment-cream) 0%, rgba(247, 247, 242, 0) 100%);
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .logo-strip__track { animation: none; }
}

/* ============================================================
   SELECTED CASE STUDIES (3-card grid)
   ============================================================ */
.case-studies {
  background: var(--color-parchment-cream);
}

.case-studies__inner {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: var(--spacing-120) var(--spacing-32);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-64);
}

.case-studies__header {
  width: 100%;
  max-width: 680px;
  text-align: center;
}

.case-studies__title {
  font-family: var(--font-plex-serif-editorial);
  font-size: var(--text-display-sm);
  line-height: var(--leading-display-sm);
  letter-spacing: var(--tracking-display-sm);
  color: var(--color-midnight-ink);
  margin: 0;
}

.case-studies__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-16);
  width: 100%;
  max-width: 1376px;
}

/* ---- Individual card ---- */
.case-card {
  display: flex;
  flex-direction: column;
  gap: 25px;
  padding: var(--spacing-24);
  background: var(--color-pressed-linen);
  border-radius: var(--radius-cards);
  color: var(--color-midnight-ink);
  transition:
    background-color var(--duration-ui-default) var(--easing-ui-default),
    transform var(--duration-ui-default) var(--easing-ui-default);
}

.case-card:hover {
  background: var(--color-weathered-stone);
}

.case-card__image,
.case-card__media {
  position: relative;
  /* 16:9 matches the source videos so they sit edge-to-edge without
     being cropped by object-fit:cover. */
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: var(--radius-cards);
  background: var(--color-weathered-stone);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Video poster + autoplay loop, or static hero image, fills the
   card media well with the same positioning. */
.case-card__video,
.case-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hover-reveal "View Case Study" pill button */
.case-card__hover-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-4);
  padding: var(--spacing-8) var(--spacing-12);
  border-radius: var(--radius-buttons);
  background: rgba(25, 24, 24, 0.88);
  border: 1px solid rgba(247, 247, 242, 0.08);
  color: var(--color-parchment-cream);
  font-family: var(--font-plex-sans-counsel);
  font-size: var(--text-body-sm);
  font-weight: 500;
  line-height: 1.143;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity var(--duration-ui-default) var(--easing-ui-default),
    transform var(--duration-ui-default) var(--easing-ui-default);
  pointer-events: none;
  box-shadow: var(--shadow-button-bevel);
}

.case-card:hover .case-card__hover-cta,
.case-card:focus-visible .case-card__hover-cta {
  opacity: 1;
  transform: translateY(0);
}

.case-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.case-card__title {
  font-family: var(--font-plex-sans-counsel);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: var(--leading-body);
  color: var(--color-midnight-ink);
  margin: 0;
}

.case-card__desc {
  font-family: var(--font-plex-sans-counsel);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  color: rgba(25, 24, 24, 0.48);
  margin: 0;
}

.case-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-4);
  padding-top: var(--spacing-8);
}

.case-tag {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-8) var(--spacing-12);
  border-radius: var(--radius-buttons);
  background: var(--color-weathered-stone);
  font-family: var(--font-plex-mono-eyebrow);
  font-size: var(--text-caption);   /* 10px */
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: capitalize;
  color: var(--color-midnight-ink);
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(247, 247, 242, 0.16),
    inset 0 -1px 0 rgba(247, 247, 242, 0.08);
}

/* Card surface step-up so the inner tag still reads on hover */
.case-card:hover .case-tag {
  background: var(--color-pressed-linen);
}

/* Responsive */
@media (max-width: 700px) {
  .case-studies__inner {
    padding: var(--spacing-64) var(--spacing-20);
    gap: var(--spacing-48);
  }
  .case-studies__title {
    font-size: var(--text-heading);
    line-height: var(--leading-heading);
  }
  .case-studies__grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   CASE STUDY DETAIL PAGE
   Mixed-width layout: 680px text column for prose, 1376px wide
   blocks for image rows and full-bleed illustrations.
   ============================================================ */
.cs {
  background: var(--color-parchment-cream);
  padding-top: var(--spacing-80);
}

/* ---- Header (centered title + pills) ---- */
.cs__head {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 var(--spacing-32);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-24);
  text-align: center;
}

.cs__title {
  font-family: var(--font-plex-serif-editorial);
  font-size: var(--text-display-sm);   /* 48 */
  line-height: var(--leading-display-sm);
  letter-spacing: var(--tracking-display-sm);
  color: var(--color-midnight-ink);
  margin: 0;
}

.cs__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-4);
  justify-content: center;
  padding-top: var(--spacing-8);
}

/* ---- Hero video / image ---- */
.cs__hero {
  max-width: 1376px;
  margin: var(--spacing-64) auto 0;
  padding: 0 var(--spacing-32);
}

.cs__hero-video,
.cs__hero-image {
  display: block;
  width: 100%;
  aspect-ratio: 1144 / 612;
  border-radius: var(--radius-cards-large);
  background: #1e1c1b; /* keeps the hero feeling solid before the media loads */
  object-fit: cover;
}

/* ---- Body (680px text column) ---- */
.cs__body {
  max-width: 680px;
  margin: 0 auto;
  padding: var(--spacing-64) var(--spacing-32) 0;
}

.cs__body + .cs__body {
  padding-top: var(--spacing-48);
}

/* Meta row at the top of the body */
.cs__meta {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-24);
  margin: 0 0 var(--spacing-64);
  padding-bottom: var(--spacing-32);
  border-bottom: 1px solid rgba(25, 24, 24, 0.08);
  flex-wrap: wrap;
}

.cs__meta-item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}

.cs__meta dt {
  font-family: var(--font-plex-mono-eyebrow);
  font-size: var(--text-label);        /* 12px */
  line-height: 16px;
  letter-spacing: 0.75px;
  text-transform: uppercase;
  color: rgba(25, 24, 24, 0.64);
  margin: 0;
}

.cs__meta dd {
  font-family: var(--font-plex-sans-counsel);
  font-size: var(--text-body-sm);      /* 14 */
  line-height: var(--leading-body-sm);
  color: var(--color-midnight-ink);
  margin: 0;
}

/* Sections */
.cs__section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
  margin-bottom: var(--spacing-64);
}

.cs__section:last-child {
  margin-bottom: 0;
}

.cs__h {
  font-family: var(--font-plex-serif-editorial);
  font-size: 28px;
  line-height: 32px;
  letter-spacing: -0.5px;
  color: var(--color-midnight-ink);
  margin: 0;
}

.cs__h--small {
  font-size: var(--text-heading-sm);   /* 24 */
  line-height: 28px;
}

.cs__lede {
  font-family: var(--font-plex-sans-counsel);
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
  color: var(--color-midnight-ink);
  margin: 0;
}

.cs__subhead {
  font-family: var(--font-plex-sans-counsel);
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
  color: var(--color-midnight-ink);
  margin: 0;
}

.cs__body p {
  font-family: var(--font-plex-sans-counsel);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: rgba(25, 24, 24, 0.64);
  margin: 0;
}

.cs__body p em {
  font-style: italic;
}

.cs__body ul,
.cs__body ol {
  margin: 0;
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}

.cs__body li {
  font-family: var(--font-plex-sans-counsel);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: rgba(25, 24, 24, 0.64);
}

/* Numbered list with bold lead-in (Section 5 of the AI Velocity case) */
.cs__ol {
  list-style: decimal;
}

.cs__ol li {
  padding-left: 4px;
}

.cs__ol li strong {
  color: var(--color-midnight-ink);
  font-weight: 600;
}

/* Inline link button within a section (e.g., "2025 Team Training Figma") */
.cs__btn {
  align-self: flex-start;
  border: 1px solid rgba(25, 24, 24, 0.16);
}

/* ---- Outcomes section (stats grid + pull quote + closing copy) ---- */
.cs__stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-48);
  padding: var(--spacing-48) 0;
  border-top: 1px solid rgba(25, 24, 24, 0.08);
  border-bottom: 1px solid rgba(25, 24, 24, 0.08);
}

.cs__stat-figure {
  font-family: var(--font-plex-serif-editorial);
  font-size: var(--text-heading-sm);   /* 24 — matches pull-quote */
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
  font-weight: 600;
  color: var(--color-midnight-ink);
  margin: 0 0 var(--spacing-16);
}

.cs__stat-label {
  font-family: var(--font-plex-sans-counsel);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  color: rgba(25, 24, 24, 0.64);
  margin: 0;
}

.cs__quote-block {
  margin: var(--spacing-24) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}

.cs__quote-block p {
  font-family: var(--font-plex-serif-editorial);
  font-size: var(--text-heading-sm);   /* 24 */
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
  color: var(--color-midnight-ink);
  margin: 0;
}

.cs__quote-block p::before { content: "\201C"; }
.cs__quote-block p::after  { content: "\201D"; }

.cs__quote-block footer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--spacing-8);
  font-family: var(--font-plex-sans-counsel);
  font-size: var(--text-body-sm);
  color: rgba(25, 24, 24, 0.64);
}

.cs__quote-name {
  font-weight: 500;
  color: var(--color-midnight-ink);
}

.cs__quote-role::before {
  content: "·";
  margin-right: var(--spacing-8);
  color: rgba(25, 24, 24, 0.4);
}

/* Meta row: allow link styling inside dd to inherit but remain underlined */
.cs__meta dd a {
  color: inherit;
  border-bottom: 1px solid rgba(25, 24, 24, 0.32);
  transition: border-color var(--duration-ui-default) var(--easing-ui-default);
}

.cs__meta dd a:hover {
  border-bottom-color: var(--color-midnight-ink);
}

/* ---- Wide blocks (1376px max) ----
   Same rhythm as the Oracle Redwood case study: margin-top only,
   no margin-bottom. The .cs__body's own padding-top supplies the
   gap to whatever follows, giving a clean 64px rhythm everywhere. */
.cs__wide {
  max-width: 1376px;
  margin: var(--spacing-64) auto 0;
  padding: 0 var(--spacing-32);
}

.cs__wide--stack {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-64);
}

/* Two-card row — Figma sizes each card at 450px wide and centers
   the row, so the 400×300 source images render close to 1:1 instead
   of being upscaled to a stretched full-row card. */
.cs__cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-16);
}

.cs__card {
  background: var(--color-pressed-linen);
  padding: var(--spacing-24);
  border-radius: var(--radius-cards);
  display: flex;
  flex-direction: column;
  gap: 25px;
  margin: 0;
  flex: 0 1 450px;
}

.cs__card-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-cards);
  background: var(--color-weathered-stone);
  overflow: hidden;
  box-shadow: inset 0 0 8px 0 rgba(0, 0, 0, 0.1);
}

.cs__card-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cs__card figcaption {
  font-family: var(--font-plex-sans-counsel);
  font-size: var(--text-body);
  color: var(--color-midnight-ink);
}

/* Component-row illustrations — sized at 916px wide and centered
   inside a parent .cs__wide wrapper. Rounded corners live on the
   img so a figcaption can sit below without being clipped. */
.cs__illustration {
  margin: 0 auto;
  width: 100%;
  max-width: 916px;
}

.cs__illustration img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-cards-large);
}

/* Framed illustration variant: locks the media to a 938×528 frame
   so a sequence of pillar visuals (video + images) share an exact
   footprint. Caption sits centered below in a mono eyebrow style. */
.cs__illustration--framed {
  max-width: 938px;
}

.cs__illustration--framed img {
  display: block;
  width: 100%;
  aspect-ratio: 938 / 528;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-cards-large);
  background: var(--color-pressed-linen);
}

/* Videos in the framed stack render at their source aspect so the
   UI doesn't get clipped — same approach as .cs__illustration-video
   elsewhere on the site. Squared corners + hairline edge keep them
   visually distinct from the rounded image frames around them. */
.cs__illustration--framed video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  border: 1px solid rgba(25, 24, 24, 0.08);
  background: var(--color-pressed-linen);
}

.cs__illustration figcaption {
  font-family: var(--font-plex-mono-eyebrow);
  font-size: 10px;
  letter-spacing: 0.75px;
  text-transform: uppercase;
  color: rgba(25, 24, 24, 0.64);
  text-align: center;
  margin-top: var(--spacing-16);
}

/* ---- Inline logo strip inside a body section (no rounded corners,
   no card wrapper — sits flush with surrounding paragraphs). ---- */
.cs__inline-logos {
  display: block;
  width: 100%;
  height: auto;
  margin-top: var(--spacing-8);
}

/* ---- 3-up customer-quote cards. Parchment well, serif quote,
   attribution at the bottom. Used on Oracle Unification to show
   converging research voices across roles. ---- */
.cs__quotes {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-16);
}

.cs__quote-card {
  background: var(--color-pressed-linen);
  border-radius: var(--radius-cards);
  padding: var(--spacing-32);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--spacing-24);
  min-height: 280px;
}

.cs__quote-card-body {
  font-family: var(--font-plex-serif-editorial);
  font-size: var(--text-heading-sm);   /* 24 */
  line-height: 32px;
  letter-spacing: -0.5px;
  color: var(--color-midnight-ink);
  margin: 0;
}

.cs__quote-card-footer {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-plex-sans-counsel);
  font-size: var(--text-body);
}

.cs__quote-card-name {
  font-weight: 600;
  color: var(--color-midnight-ink);
}

.cs__quote-card-role {
  color: rgba(25, 24, 24, 0.64);
}

@media (max-width: 992px) {
  .cs__quotes {
    grid-template-columns: 1fr;
  }
  .cs__quote-card {
    min-height: 0;
  }
}

/* ---- Featured outcomes section (Oracle Unification).
   Full-width well, centered tag + headline, then a row of 4 stats
   divided by dashed left rules. Distinct from the simpler outcomes
   block on AI Velocity / GatherAI. ---- */
.cs__outcomes-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-24);
  text-align: center;
  padding: var(--spacing-64) 0;
}

.cs__outcomes-tag {
  display: inline-flex;
  align-items: center;
  background: var(--color-midnight-ink);
  color: rgba(247, 247, 242, 0.88);
  font-family: var(--font-plex-mono-eyebrow);
  font-size: 10px;
  letter-spacing: 0.75px;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 16px;
}

.cs__outcomes-headline {
  font-family: var(--font-plex-serif-editorial);
  font-size: 48px;
  line-height: 48px;
  letter-spacing: -2px;
  color: var(--color-midnight-ink);
  margin: 0;
  max-width: 680px;
}

.cs__outcomes-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  max-width: 1080px;
  margin-top: var(--spacing-32);
}

.cs__outcomes-stat {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  padding: 0 var(--spacing-24);
  border-left: 1px dashed rgba(25, 24, 24, 0.48);
  text-align: left;
}

.cs__outcomes-stat:first-child {
  border-left: none;
}

.cs__outcomes-figure {
  font-family: var(--font-plex-serif-editorial);
  font-size: 48px;
  line-height: 48px;
  letter-spacing: -2px;
  color: var(--color-midnight-ink);
  margin: 0;
}

.cs__outcomes-label {
  font-family: var(--font-plex-sans-counsel);
  font-size: var(--text-body-sm);
  line-height: 20px;
  letter-spacing: 0.75px;
  text-transform: uppercase;
  color: rgba(25, 24, 24, 0.64);
  margin: 0;
}

@media (max-width: 992px) {
  .cs__outcomes-headline {
    font-size: 36px;
    line-height: 40px;
  }
  .cs__outcomes-stats {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-32) 0;
  }
  .cs__outcomes-stat:nth-child(3) {
    border-left: none;
  }
}

@media (max-width: 600px) {
  .cs__outcomes-stats {
    grid-template-columns: 1fr;
  }
  .cs__outcomes-stat {
    border-left: none;
    border-top: 1px dashed rgba(25, 24, 24, 0.48);
    padding: var(--spacing-24) 0 0;
  }
  .cs__outcomes-stat:first-child {
    border-top: none;
    padding-top: 0;
  }
}


/* Videos: square corners + hairline stroke (same 1px @ 8% black used
   on other media wells like .services__media). Visual distinction
   from still-image illustrations. */
.cs__illustration-video {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(25, 24, 24, 0.08);
}

/* Figma / interactive embeds — wrapper sets the 16:9 box via the
   padding-bottom trick (more reliable than aspect-ratio on iframes,
   which some embeds override with their own sizing). The iframe is
   absolutely positioned to fill the wrapper. */
.cs__illustration-embed-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;          /* 9 / 16 = 56.25% */
  border: 1px solid rgba(25, 24, 24, 0.08);
  background: var(--color-pressed-linen);
}

.cs__illustration-embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.cs__illustration figcaption {
  margin-top: var(--spacing-12);
  font-family: var(--font-plex-mono-eyebrow);
  font-size: var(--text-caption);     /* 10px */
  line-height: 1.6;
  letter-spacing: 0.75px;
  text-transform: uppercase;
  color: rgba(25, 24, 24, 0.55);
  text-align: center;
}

/* Responsive */
@media (max-width: 991px) {
  .cs__meta {
    gap: var(--spacing-32) var(--spacing-24);
  }
}

@media (max-width: 700px) {
  .cs {
    padding-top: var(--spacing-48);
  }
  .cs__head,
  .cs__hero,
  .cs__body,
  .cs__wide {
    padding-left: var(--spacing-20);
    padding-right: var(--spacing-20);
  }
  .cs__title {
    font-size: var(--text-heading);
    line-height: var(--leading-heading);
  }
  .cs__h {
    font-size: var(--text-heading-sm);
    line-height: var(--leading-heading-sm);
  }
  .cs__cards {
    grid-template-columns: 1fr;
  }
  .cs__meta {
    flex-direction: column;
    gap: var(--spacing-16);
  }
  .cs__stats-row {
    grid-template-columns: 1fr;
    gap: var(--spacing-32);
  }
}

/* ============================================================
   PLACEHOLDER PAGE LAYOUT
   Used for case study detail pages that don't yet have content.
   ============================================================ */
.placeholder {
  min-height: calc(100vh - 72px);
  background: var(--color-parchment-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-80) var(--spacing-32);
}

.placeholder__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-24);
  max-width: 680px;
  text-align: center;
}

.placeholder__title {
  font-family: var(--font-plex-serif-editorial);
  font-size: var(--text-display-sm);
  line-height: var(--leading-display-sm);
  letter-spacing: var(--tracking-display-sm);
  color: var(--color-midnight-ink);
  margin: 0;
}

.placeholder__body {
  font-family: var(--font-plex-sans-counsel);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: rgba(25, 24, 24, 0.64);
  margin: 0;
  max-width: 540px;
}

.placeholder__back {
  margin-top: var(--spacing-16);
  border: 1px solid rgba(25, 24, 24, 0.16);
}

@media (max-width: 600px) {
  .placeholder {
    padding: var(--spacing-64) var(--spacing-20);
  }
  .placeholder__title {
    font-size: var(--text-heading);
    line-height: var(--leading-heading);
  }
}

/* ============================================================
   FOOTER (closing CTA "Here's how we begin" + copyright)
   Two side-by-side cards on parchment: dark book-a-call card and
   warm-gradient AI design sprint card.
   ============================================================ */
.footer {
  background: var(--color-parchment-cream);
}

.footer__inner {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: var(--spacing-120) var(--spacing-32) var(--spacing-80);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-64);
}

.footer__header {
  width: 100%;
}

.footer__heading {
  font-family: var(--font-plex-serif-editorial);
  font-size: var(--text-display-sm);   /* 48px */
  line-height: var(--leading-display-sm);
  letter-spacing: var(--tracking-display-sm);
  color: var(--color-midnight-ink);
  margin: 0;
}

/* ---- Two-card grid ---- */
.footer__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-16);
  width: 100%;
}

.footer__card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 480px;
  padding: var(--spacing-32);
  border-radius: var(--radius-cards-large);
  overflow: hidden;
  color: rgba(247, 247, 242, 0.88);
  transition:
    transform var(--duration-ui-default) var(--easing-ui-default),
    box-shadow var(--duration-ui-default) var(--easing-ui-default);
}

.footer__card:hover,
.footer__card:focus-visible {
  transform: translateY(-2px);
  outline: none;
}

.footer__card--dark {
  background: #191818;
}

/* Warm peach → coral wash approximating the Figma's CTA image */
.footer__card--warm {
  background:
    radial-gradient(60% 70% at 78% 32%, rgba(247, 195, 152, 0.85), transparent 70%),
    radial-gradient(80% 90% at 62% 68%, rgba(194, 75, 56, 0.55), transparent 75%),
    radial-gradient(50% 60% at 18% 90%, rgba(214, 130, 88, 0.55), transparent 70%),
    linear-gradient(135deg, #f6d4b6 0%, #df8a64 50%, #b13e36 100%);
}

/* Top cluster: icon + title */
.footer__card-top {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  max-width: 416px;
}

.footer__card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: rgba(247, 247, 242, 0.88);
}

.footer__card-icon svg {
  width: 100%;
  height: 100%;
}

.footer__card-title {
  font-family: var(--font-plex-serif-editorial);
  font-size: var(--text-heading);     /* 32px */
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-parchment-cream);
  margin: 0;
}

/* Bottom cluster: body + button */
.footer__card-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-24);
  width: 100%;
}

.footer__card-body {
  flex: 1;
  font-family: var(--font-plex-sans-counsel);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: rgba(247, 247, 242, 0.88);
  margin: 0;
  max-width: 416px;
}

.footer__card-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  padding: var(--spacing-12) var(--spacing-12) var(--spacing-12) var(--spacing-16);
  border-radius: var(--radius-buttons);
  background: var(--color-parchment-cream);
  border: 1px solid rgba(25, 24, 24, 0.08);
  font-family: var(--font-plex-sans-counsel);
  font-size: var(--text-body);
  font-weight: 500;
  color: var(--color-midnight-ink);
  flex-shrink: 0;
  white-space: nowrap;
  box-shadow: var(--shadow-button-bevel);
  transition: background-color var(--duration-ui-default) var(--easing-ui-default);
}

.footer__card:hover .footer__card-btn,
.footer__card:focus-visible .footer__card-btn {
  background: rgba(247, 247, 242, 0.92);
}

/* Copyright line */
.footer__copyright {
  font-family: var(--font-plex-sans-counsel);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  color: rgba(25, 24, 24, 0.64);
  margin: 0;
}

.footer__sparkle {
  display: inline-block;
  margin: 0 var(--spacing-4);
  color: rgba(25, 24, 24, 0.48);
}

/* ---- Responsive ---- */
@media (max-width: 991px) {
  .footer__cards {
    grid-template-columns: 1fr;
  }
  .footer__card {
    height: auto;
    min-height: 420px;
    gap: var(--spacing-32);
  }
}

@media (max-width: 600px) {
  .footer__inner {
    padding: var(--spacing-64) var(--spacing-20) var(--spacing-48);
    gap: var(--spacing-48);
  }
  .footer__heading {
    font-size: var(--text-heading);
    line-height: var(--leading-heading);
  }
  .footer__card {
    padding: var(--spacing-24);
  }
  .footer__card-title {
    font-size: var(--text-heading-sm);
    line-height: var(--leading-heading-sm);
  }
  .footer__card-bottom {
    flex-direction: column;
    align-items: stretch;
  }
  .footer__card-btn {
    justify-content: center;
  }
}

/* ============================================================
   SECTION 3 — SERVICES (Discovery Audit list)
   ============================================================ */
.services {
  background: var(--color-parchment-cream);
}

.services__inner {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: var(--spacing-120) var(--spacing-32);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-80);
}

.services__title {
  font-family: var(--font-plex-serif-editorial);
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-midnight-ink);
  margin: 0;
  max-width: 680px;
}

.services__content {
  display: grid;
  grid-template-columns: 680px 1fr;
  gap: 132px;
  /* Stretch columns so the list fills the image's height,
     then space rows evenly inside it. */
  align-items: stretch;
}

.services__media {
  border-radius: var(--radius-cards);
  overflow: hidden;
  aspect-ratio: 680 / 408;
  border: 1px solid rgba(25, 24, 24, 0.08);
}

.services__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.services__list {
  margin: 0;
  display: flex;
  flex-direction: column;
  /* Distribute rows so the list spans the full image height */
  justify-content: space-between;
  height: 100%;
}

.services__row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--spacing-20);
  padding: var(--spacing-24) 0;
  border-top: 1px solid rgba(25, 24, 24, 0.16);
}

.services__row:last-child {
  border-bottom: 1px solid rgba(25, 24, 24, 0.16);
}

.services__name {
  font-family: var(--font-plex-sans-counsel);
  font-size: var(--text-body);
  font-weight: 500;
  color: var(--color-midnight-ink);
  margin: 0;
}

.services__desc {
  font-family: var(--font-plex-sans-counsel);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: rgba(25, 24, 24, 0.64);
  margin: 0;
}

@media (max-width: 1199px) {
  .services__content {
    grid-template-columns: 1fr;
    gap: var(--spacing-48);
  }
  .services__media {
    width: 100%;
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 600px) {
  .services__inner {
    padding: var(--spacing-64) var(--spacing-20);
    gap: var(--spacing-48);
  }
  .services__title {
    font-size: var(--text-heading-sm);
    line-height: var(--leading-heading-sm);
  }
  .services__row {
    grid-template-columns: 1fr;
    gap: var(--spacing-8);
  }
}

/* ============================================================
   SHARED — Icon box (used by approach + outcomes feature cards)
   ============================================================ */
.icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-cards);
  background: var(--color-weathered-stone);
  color: var(--color-midnight-ink);
  flex-shrink: 0;
  box-shadow:
    inset 0 1px 0 rgba(247, 247, 242, 0.16),
    inset 0 -1px 0 rgba(247, 247, 242, 0.08);
}

/* SVG icons loaded via <img> inside an .icon-box */
.icon-box__svg {
  display: block;
  width: 24px;
  height: 24px;
}

/* ============================================================
   SECTION 4 — APPROACH (best brands scale with structure and taste)
   ============================================================ */
.approach {
  background: linear-gradient(
    to bottom,
    rgba(247, 247, 242, 0) 0%,
    var(--color-pressed-linen) 100%
  );
}

.approach__inner {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: var(--spacing-120) var(--spacing-32);
  display: grid;
  /* Proportional columns so the right-side texture scales fluidly with
     the viewport instead of being pinned to a fixed 680px column. */
  grid-template-columns: minmax(0, 564fr) minmax(0, 680fr);
  gap: clamp(48px, 9vw, 132px);
  align-items: center;
}

.approach__copy {
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.approach__intro {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
}

.approach__title {
  font-family: var(--font-plex-serif-editorial);
  font-size: var(--text-heading-lg);
  line-height: var(--leading-heading-lg);
  letter-spacing: var(--tracking-heading-lg);
  color: var(--color-midnight-ink);
  margin: 0;
  max-width: 564px;
}

.approach__body {
  font-family: var(--font-plex-sans-counsel);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-midnight-ink);
  margin: 0;
  max-width: 564px;
  opacity: 0.88;
}

.approach__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-32) var(--spacing-16);
}

.approach__feature {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
}

.approach__feature-title {
  font-family: var(--font-plex-sans-counsel);
  font-size: var(--text-body);
  font-weight: 500;
  line-height: var(--leading-body);
  color: var(--color-midnight-ink);
  margin: 0 0 var(--spacing-8);
}

.approach__feature-desc {
  font-family: var(--font-plex-sans-counsel);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  color: rgba(25, 24, 24, 0.64);
  margin: 0;
}

/* ---- Decorative texture + phase-selector mockup ---- */
.approach__visual {
  position: relative;
  width: 100%;
  /* Height is driven by the image's natural aspect ratio.
     No background or overflow:hidden — the image has its own
     notched silhouette with transparent surroundings. */
}

.approach__visual-img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  -webkit-user-select: none;
          user-select: none;
}

.phase-picker {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 228px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}

.phase-picker__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-12) var(--spacing-16);
  border-radius: 8px;
  background: rgba(239, 237, 231, 0.64);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  font-family: var(--font-plex-sans-counsel);
  font-size: var(--text-body);
  font-weight: 500;
  color: var(--color-midnight-ink);
  box-shadow:
    inset 0 1px 0 rgba(247, 247, 242, 0.16),
    inset 0 -1px 0 rgba(247, 247, 242, 0.08);
}

.phase-picker__menu {
  padding: var(--spacing-8);
  border-radius: 8px;
  background: rgba(239, 237, 231, 0.64);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  box-shadow:
    inset 0 1px 0 rgba(247, 247, 242, 0.16),
    inset 0 -1px 0 rgba(247, 247, 242, 0.08);
}

.phase-picker__option {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  padding: var(--spacing-8) var(--spacing-12);
  border-radius: 8px;
  font-family: var(--font-plex-sans-counsel);
  font-size: var(--text-body);
  color: var(--color-midnight-ink);
}

.phase-picker__option--active {
  background: var(--color-pressed-linen);
}

.phase-picker__cursor {
  position: absolute;
  right: -10px;
  bottom: -16px;
  color: var(--color-midnight-ink);
}

@media (max-width: 1199px) {
  .approach__inner {
    grid-template-columns: 1fr;
    gap: var(--spacing-64);
  }
  .approach__visual {
    max-width: 680px;
    margin: 0 auto;
  }
}

@media (max-width: 600px) {
  .approach__inner {
    padding: var(--spacing-64) var(--spacing-20);
  }
  .approach__title {
    font-size: var(--text-heading);
    line-height: var(--leading-heading);
  }
  .approach__grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-24);
  }
}

/* ============================================================
   SECTION 5 — OUTCOMES (centered header + 3x2 cards)
   ============================================================ */
.outcomes {
  background: var(--color-parchment-cream);
}

.outcomes__inner {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: var(--spacing-120) var(--spacing-32);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-64);
}

.outcomes__header {
  max-width: 680px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-24);
  text-align: center;
}

.outcomes__title {
  font-family: var(--font-plex-serif-editorial);
  font-size: var(--text-display-sm);
  line-height: var(--leading-display-sm);
  letter-spacing: var(--tracking-display-sm);
  color: var(--color-midnight-ink);
  margin: 0;
}

.outcomes__cta {
  border: 1px solid rgba(25, 24, 24, 0.16);
}

.outcomes__grid {
  display: grid;
  grid-template-columns: repeat(3, 332px);
  gap: var(--spacing-16);
  justify-content: center;
  width: 100%;
  max-width: 1028px;
}

.outcome-card {
  background: var(--color-pressed-linen);
  border-radius: var(--radius-cards-large);
  padding: var(--spacing-32);
  display: flex;
  flex-direction: column;
  /* Icons removed — tight 8px gap between title and description per Figma */
  gap: var(--spacing-8);
}

.outcome-card h3 {
  font-family: var(--font-plex-sans-counsel);
  font-size: var(--text-body);
  font-weight: 500;
  line-height: var(--leading-body);
  color: var(--color-midnight-ink);
  margin: 0;
}

.outcome-card p {
  font-family: var(--font-plex-sans-counsel);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  color: rgba(25, 24, 24, 0.64);
  margin: 0;
}

@media (max-width: 1100px) {
  .outcomes__grid {
    grid-template-columns: repeat(2, minmax(0, 332px));
  }
}

@media (max-width: 700px) {
  .outcomes__inner {
    padding: var(--spacing-64) var(--spacing-20);
  }
  .outcomes__title {
    font-size: var(--text-heading);
    line-height: var(--leading-heading);
  }
  .outcomes__grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   SECTION 6 — CASE STUDY (full-bleed image + stats footer)
   ============================================================ */
.case {
  /* Match the page canvas so the dark image + stone footer read as
     a single inset card on parchment, not a three-tone stack. */
  background: var(--color-parchment-cream);
}

.case__inner {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: var(--spacing-80) var(--spacing-32);
}

.case__hero {
  position: relative;
  width: 100%;
  height: 612px;
  border-top-left-radius: var(--radius-cards-large);
  border-top-right-radius: var(--radius-cards-large);
  overflow: hidden;
  isolation: isolate;
}

.case__hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.case__hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(25, 24, 24, 0.85) 0%, rgba(25, 24, 24, 0.2) 60%, rgba(25, 24, 24, 0) 100%);
  z-index: 2;
}

.case__hero-top,
.case__hero-bottom {
  position: relative;
  z-index: 3;
  padding: var(--spacing-32);
}

.case__hero-top {
  display: flex;
  justify-content: flex-start;
}

.case__logo {
  display: block;
  height: 31px;            /* +10% from 28px */
  width: auto;
  /* Invert the dark SVG to light + soften so it reads on the dark hero */
  filter: brightness(0) invert(1);
  opacity: 0.7;
}

/* Bottom row inside the dark image: testimonial on left, stats on right.
   Same flex pattern as the stone footer below so their columns align. */
.case__hero-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-32);
}

.case__testimonial {
  flex: 1 1 0;
  max-width: 680px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-32);
}

.case__quote {
  font-family: var(--font-plex-serif-editorial);
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-parchment-cream);
  margin: 0;
}

.case__attribution-name {
  font-family: var(--font-plex-sans-counsel);
  font-size: var(--text-body);
  font-weight: 500;
  color: rgba(247, 247, 242, 0.88);
  margin: 0;
}

.case__attribution-title {
  font-family: var(--font-plex-sans-counsel);
  font-size: var(--text-body);
  color: rgba(247, 247, 242, 0.64);
  margin: 0;
}

.case__stats {
  flex: 0 0 auto;
  width: 454px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.case__stat-figure {
  font-family: var(--font-plex-serif-editorial);
  font-size: var(--text-display-sm);
  line-height: var(--leading-display-sm);
  letter-spacing: var(--tracking-display-sm);
  color: var(--color-parchment-cream);
  margin: 0 0 var(--spacing-12);
}

.case__stat-label {
  font-family: var(--font-plex-sans-counsel);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  color: rgba(247, 247, 242, 0.64);
  margin: 0;
}

.case__footer {
  background: var(--color-weathered-stone);
  border-bottom-left-radius: var(--radius-cards-large);
  border-bottom-right-radius: var(--radius-cards-large);
  padding: var(--spacing-32);
  /* Same flex pattern as .case__hero-bottom: left content + right
     content with the same widths, so columns align vertically. */
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-32);
}

.case__footer-title {
  flex: 1 1 0;
  max-width: 680px;
  font-family: var(--font-plex-serif-editorial);
  font-size: var(--text-heading-lg);
  line-height: var(--leading-heading-lg);
  letter-spacing: var(--tracking-heading-lg);
  color: var(--color-midnight-ink);
  margin: 0;
}

.case__footer-right {
  flex: 0 0 auto;
  width: 454px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
}

.case__footer-body {
  font-family: var(--font-plex-sans-counsel);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-midnight-ink);
  margin: 0;
}

.case__footer-right .btn {
  align-self: flex-start;
  border: 1px solid rgba(25, 24, 24, 0.16);
}

@media (max-width: 991px) {
  .case__hero {
    height: auto;
    min-height: 540px;
  }
  .case__hero-bottom {
    position: relative;
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-24);
    padding-top: 240px;
  }
  .case__testimonial,
  .case__stats {
    width: auto;
    max-width: none;
  }
  .case__footer {
    flex-direction: column;
    gap: var(--spacing-24);
  }
  .case__footer-title,
  .case__footer-right {
    width: auto;
    max-width: none;
  }
}

@media (max-width: 600px) {
  .case__inner {
    padding: var(--spacing-48) var(--spacing-20);
  }
  .case__quote {
    font-size: var(--text-heading-sm);
    line-height: var(--leading-heading-sm);
  }
  .case__stat-figure {
    font-size: var(--text-heading-lg);
    line-height: var(--leading-heading-lg);
  }
  .case__footer-title {
    font-size: var(--text-heading);
    line-height: var(--leading-heading);
  }
  .case__stats {
    grid-template-columns: 1fr;
  }
}