/* ==========================================================================
   Desine Studio
   Tokens, components and responsive rules per design_handoff STYLE_GUIDE.md
   Designed breakpoints: 1280px desktop, 390px mobile. Everything between is
   interpolated with clamp() and three collapse points (1000 / 900 / 700 / 600).
   ========================================================================== */

/* 1. Tokens
   ========================================================================== */

:root {
  /* Color */
  --bg: #fbfaf8;
  --bg-hover: #f3f1ec;
  --ink: #111;
  --ink-2: #333;
  --ink-3: #666;
  --muted: #888;
  --muted-2: #999;
  --rule: #ddd;
  --rule-strong: #111;
  --ph-a: #f3f1ec;
  --ph-b: #ece9e2;

  /* Families */
  --sans: 'Archivo', Helvetica, Arial, sans-serif;
  --serif: 'Newsreader', Georgia, serif;
  --mono: ui-monospace, Menlo, Consolas, monospace;

  /* Horizontal page padding: 55px desktop, 21px mobile */
  --pad: 55px;

  /* Type scale — clamp() interpolates the two designed breakpoints.
     Upper bounds are the 1280px desktop values and cap above 1280. */
  --fs-h1: clamp(48px, 8.6vw, 110px);
  --fs-display: clamp(32px, 4.3vw, 55px);
  --fs-stat: clamp(38px, 4.3vw, 55px);
  --fs-name: clamp(26px, 2.66vw, 34px);
  --fs-pull: clamp(24px, 2.66vw, 34px);
  --fs-title: clamp(18px, 1.64vw, 21px);
  --fs-lead: clamp(17px, 1.64vw, 21px);
  --fs-body: clamp(15px, 1.25vw, 16px);
  --fs-caption: 14px;
  --fs-label: 13px;
  --fs-label-sm: 13px;
}

/* Only 1280 and 390 were designed; page padding steps down the spacing scale
   in between rather than jumping 55 → 21 at one breakpoint. */
@media (max-width: 900px) {
  :root { --pad: 34px; }
}

@media (max-width: 600px) {
  :root {
    --pad: 21px;
    --fs-label-sm: 12px;
  }
}

/* 2. Base
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.618;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.menu-open { overflow: hidden; }

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

h1, h2, h3, h4, p { margin: 0; font-size: inherit; font-weight: inherit; }

ul { margin: 0; padding: 0; list-style: none; }

a {
  color: var(--ink);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover { color: #555; }

/* Hairline that wipes in from the left on hover, 0.5s.
   Applied to nav and inline text links. The components with their own designed
   hover states keep them: ledger rows fill #f3f1ec, big link rows go #888, and
   the CTA link's 2px rule is part of the component, not a hover. */
.site-nav a,
.mobile-menu__close,
.backlink a,
.site-footer a,
.strip__value a,
.underline-hover {
  position: relative;
}

.site-nav a::after,
.mobile-menu__close::after,
.backlink a::after,
.site-footer a::after,
.strip__value a::after,
.underline-hover::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s ease;
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after,
.mobile-menu__close:hover::after,
.backlink a:hover::after,
.backlink a:focus-visible::after,
.site-footer a:hover::after,
.site-footer a:focus-visible::after,
.strip__value a:hover::after,
.strip__value a:focus-visible::after,
.underline-hover:hover::after,
.underline-hover:focus-visible::after {
  transform: scaleX(1);
}

/* Inline links sit tighter to their text than the uppercase nav does */
.strip__value a::after,
.site-footer a::after,
.underline-hover::after { bottom: -2px; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 13px 21px;
  background: var(--bg);
  border: 1px solid var(--ink);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}

.skip-link:focus { left: 8px; top: 8px; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 3. Shared text roles
   ========================================================================== */

.eyebrow {
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.4;
}

.lead {
  font-size: var(--fs-lead);
  font-weight: 300;
  line-height: 1.618;
  color: var(--ink-2);
}

.body-copy {
  max-width: 610px;
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.618;
  color: var(--ink-2);
}

.pull {
  max-width: 760px;
  font-size: var(--fs-pull);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/* Layout helpers: full-bleed sections with page padding, or inset rules */
.inset {
  margin-left: var(--pad);
  margin-right: var(--pad);
}

/* Column blocks whose cells carry vertical #ddd dividers keep clear of whatever
   rule comes next, so a divider never runs into a horizontal rule at a
   T-junction. The gap matches the space above these blocks and steps at 600
   with the rest of the spacing scale.

   .strip--ruled is excluded on purpose: the case-study meta strips close with
   their own #ddd border, so their dividers meet that rule by design. */
.cols3,
.stats,
.strip:not(.strip--ruled) {
  margin-bottom: 34px;
}

@media (max-width: 600px) {
  .cols3,
  .stats,
  .strip:not(.strip--ruled) {
    margin-bottom: 21px;
  }
}

/* 4. Motion
   ========================================================================== */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.reveal { animation: fadeUp 0.7s ease both; }
.reveal-1 { animation-delay: 0.1s; }
.reveal-2 { animation-delay: 0.2s; }
.reveal-3 { animation-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0s !important;
    transition-duration: 0.001ms !important;
  }
}

/* 5. Header (sticky, docking)
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 21px;
  padding: 21px var(--pad);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: padding 0.35s ease, background-color 0.35s ease, border-color 0.35s ease;
}

.site-header__logo {
  display: block;
  line-height: 0;
}

.site-header__logo img {
  height: 44px;
  width: auto;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.site-header.is-docked {
  padding: 13px var(--pad);
  background: rgba(251, 250, 248, 0.96);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-bottom-color: var(--rule);
}

.site-header.is-docked .site-header__logo img {
  opacity: 1;
  transform: none;
}

.site-nav {
  display: flex;
  gap: 34px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.menu-toggle {
  display: none;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

@media (max-width: 820px) {
  .site-nav { gap: 21px; }
}

/* Mobile: header is always docked, nav becomes a Menu toggle */
@media (max-width: 600px) {
  .site-header,
  .site-header.is-docked {
    padding: 13px var(--pad);
    background: rgba(251, 250, 248, 0.96);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-bottom-color: var(--rule);
  }

  .site-header__logo img {
    height: 34px;
    opacity: 1;
    transform: none;
  }

  .site-nav { display: none; }
  .menu-toggle { display: block; }
}

/* Mobile menu overlay.
   NOT IN THE DESIGN HANDOFF — the open Menu state was never designed.
   Built from existing tokens only; replace when the overlay is designed. */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  padding: 13px var(--pad) 34px;
  background: var(--bg);
  overflow-y: auto;
}

.mobile-menu[hidden] { display: none; }

.mobile-menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 21px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--rule);
}

.mobile-menu__top img { height: 34px; width: auto; }

.mobile-menu__close {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.mobile-menu__links {
  display: flex;
  flex-direction: column;
  margin-top: 21px;
}

.mobile-menu__links a {
  padding: 18px 0;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.01em;
  border-bottom: 1px solid var(--rule);
}

.mobile-menu__links a:last-child { border-bottom-color: var(--rule-strong); }

.mobile-menu__foot {
  margin-top: auto;
  padding-top: 34px;
  font-size: var(--fs-label-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
}

/* 6. Hero (home)
   ========================================================================== */

.hero {
  padding: 34px var(--pad) 89px;
  border-bottom: 1px solid var(--rule-strong);
}

.hero__title {
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: 55px;
  align-items: end;
  margin-top: 55px;
}

.hero__col {
  display: flex;
  flex-direction: column;
  gap: 34px;
  align-items: flex-start;
}

.hero__intro { max-width: 610px; }

.hero__logo {
  width: 440px;
  height: auto;
  justify-self: end;
  margin-top: 34px;
}

@media (max-width: 1000px) {
  .hero { padding-bottom: 55px; }
  .hero__grid {
    grid-template-columns: 1fr;
    gap: 34px;
    margin-top: 42px;
  }
  .hero__logo {
    width: min(380px, 60%);
    justify-self: start;
    margin-top: 0;
  }
}

@media (max-width: 600px) {
  .hero { padding: 34px var(--pad) 55px; }
  .hero__title { line-height: 1.05; letter-spacing: -0.03em; }
  .hero__grid { margin-top: 26px; gap: 26px; }
  /* The mobile design drops the oversized hero logo — the docked
     header logo carries the mark instead. */
  .hero__logo { display: none; }
}

/* 7. Title block (services / case study / studio)
   ========================================================================== */

.title-block {
  padding: 34px var(--pad) 55px;
  border-bottom: 1px solid var(--rule-strong);
}

.title-block__eyebrow { display: block; margin-bottom: 21px; }

.title-block__title {
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.title-block__lead {
  margin-top: 34px;
  max-width: 680px;
}

/* Case-study titles are a step smaller on mobile (44px in option 9b,
   against 48px for home and services). */
.title-block--case .title-block__title { font-size: clamp(44px, 8.6vw, 110px); }

.backlink { padding: 21px var(--pad) 0; }

.backlink a {
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.backlink a:hover { color: var(--ink); }

@media (max-width: 600px) {
  .title-block { padding: 26px var(--pad) 34px; }
  .title-block__eyebrow { margin-bottom: 13px; }
  .title-block__title { line-height: 1.05; letter-spacing: -0.03em; }
  .title-block__lead { margin-top: 21px; }
}

/* 8. CTA link (inline)
   ========================================================================== */

.cta {
  align-self: flex-start;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 6px;
}

.cta:hover { color: #555; border-bottom-color: #555; }

@media (max-width: 600px) {
  .cta { font-size: 15px; }
}

/* 9. "Worked with" strip
   ========================================================================== */

.clients {
  display: flex;
  align-items: center;
  gap: 55px;
  padding: 26px var(--pad);
  border-bottom: 1px solid var(--rule);
}

.clients__label {
  font-size: var(--fs-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-2);
  white-space: nowrap;
}

/* Seven real brand names are far wider than the design file's five short ones,
   so this wraps to two lines at most widths. Row gap is tightened to 13px —
   inheriting the 42px column gap vertically left the two lines looking
   unrelated to each other. */
.clients__list {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 13px 42px;
}

/* Each wordmark is typeset, not an image — no third-party logo files, so
   nothing here implies an endorsement or reproduces anyone's trade dress.
   Treatments vary per name the way the design file did, but stay within
   Archivo / Newsreader / mono. */
.mark--mtv { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.mark--hancock { font-family: var(--serif); font-style: italic; font-size: 19px; }
.mark--farmers { font-size: 13px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; }
.mark--metlife { font-size: 16px; font-weight: 400; letter-spacing: 0.02em; }
.mark--fidelity { font-size: 17px; font-weight: 300; letter-spacing: 0.02em; }
.mark--mercedes { font-size: 15px; font-weight: 300; letter-spacing: 0.16em; text-transform: uppercase; }
.mark--jlr { font-size: 16px; font-weight: 400; letter-spacing: 0.04em; }
.mark--nissan { font-size: 15px; font-weight: 500; letter-spacing: 0.01em; }

@media (max-width: 900px) {
  .clients { gap: 34px; }
  .clients__list { gap: 13px 26px; }
}

@media (max-width: 600px) {
  .clients {
    flex-direction: column;
    align-items: flex-start;
    gap: 13px;
    padding: 21px var(--pad);
  }
  .clients__list { gap: 13px 21px; }
  .mark--mtv { font-size: 16px; }
  .mark--hancock { font-size: 17px; }
  .mark--farmers { font-size: 12px; letter-spacing: 0.18em; }
  .mark--metlife { font-size: 15px; }
  .mark--fidelity { font-size: 16px; }
  .mark--mercedes { font-size: 13px; letter-spacing: 0.12em; }
  .mark--jlr { font-size: 15px; }
  .mark--nissan { font-size: 14px; }
}

/* 10. Work ledger (home)
   ========================================================================== */

.ledger { padding: 0 var(--pad); }

.ledger__label {
  padding: 21px 0 13px;
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.work-row {
  position: relative;
  display: grid;
  grid-template-columns: 55px 340px 1fr 140px 34px;
  grid-template-areas: 'num name desc tag arrow';
  align-items: baseline;
  gap: 21px;
  padding: 26px 0;
  border-top: 1px solid var(--rule);
}

.work-row:last-of-type { border-bottom: 1px solid var(--rule-strong); }

/* The hover fill bleeds out to the page edges so it never crops tight against
   the number and the arrow. It is a pseudo-element rather than the row's own
   background so the hairlines stay on the 55px grid with every other rule.
   Absolutely positioned, so it is not a grid item. */
.work-row::before {
  content: '';
  position: absolute;
  inset: 0 calc(-1 * var(--pad));
  z-index: -1;
  background: var(--bg-hover);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.work-row:hover::before { opacity: 1; }

.work-row:hover { color: var(--ink); }

.work-row__num {
  grid-area: num;
  font-size: var(--fs-label);
  color: var(--muted);
}

.work-row__name {
  grid-area: name;
  font-size: var(--fs-name);
  font-weight: 400;
  letter-spacing: -0.01em;
}

.work-row__desc {
  grid-area: desc;
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.618;
  color: var(--ink-3);
}

/* Category over year. Two lines of the same 13px uppercase label, so the cell
   reads as one meta block rather than two competing values. */
.work-row__tag {
  grid-area: tag;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.work-row__year { color: var(--muted-2); }

.work-row__arrow {
  grid-area: arrow;
  justify-self: end;
  font-size: 21px;
}

@media (max-width: 1100px) {
  .work-row { grid-template-columns: 42px 260px 1fr 120px 26px; gap: 13px; }
}

/* Stacked card layout, per mobile option 9a */
@media (max-width: 900px) {
  .work-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      'num tag'
      'name arrow'
      'desc desc';
    gap: 8px;
    padding: 21px 0;
  }
  /* Category and year sit side by side in the stacked card's meta row —
     vertically they would push the name too far down. They wrap as whole
     phrases rather than mid-token ("SAAS /" over "PRODUCT"), so each stays
     nowrap and the flex row is what breaks. */
  .work-row__tag {
    justify-self: end;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px 13px;
  }
  .work-row__cat,
  .work-row__year { white-space: nowrap; }
  .work-row__arrow { font-size: 19px; }
}

/* 11. Info / meta strip (4-col)
   ========================================================================== */

.strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.strip--ruled { border-bottom: 1px solid var(--rule); }
.strip--spaced { margin-top: 55px; }

.strip__cell {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px 21px 34px;
  border-right: 1px solid var(--rule);
}

.strip__cell:first-child { padding-left: 0; }
.strip__cell:last-child { padding-right: 0; border-right: 0; }

.strip__label {
  font-size: var(--fs-label-sm);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.strip__value {
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.618;
  color: var(--ink-2);
}

/* 4-col → 2-col, per mobile options 9a / 9b */
@media (max-width: 700px) {
  .strip { grid-template-columns: 1fr 1fr; }
  .strip__cell {
    padding: 21px 13px 26px 0;
    border-right: 1px solid var(--rule);
  }
  .strip__cell:nth-child(2n) {
    padding: 21px 0 26px 13px;
    border-right: 0;
  }
  .strip__cell:nth-child(-n + 2) { border-bottom: 1px solid var(--rule); }
}

/* 12. Three-column strip (engagement models)
   ========================================================================== */

/* Wrapper used when the columns need an introductory line above them. It carries
   the page inset so .cols3 keeps its own shared bottom margin. The intro sits at
   lead size but stays light (300) against the columns' medium (500) titles —
   they are the same 21px, so weight and line length do the separating. */
.engagements__intro {
  max-width: 680px;
  margin-bottom: 34px;
}

@media (max-width: 600px) {
  .engagements__intro { margin-bottom: 21px; }
}

/* No rule of its own, top or bottom. The preceding section already closes with
   a #111 rule, and a second one 45px below it read as a doubled line rather
   than as structure. The columns sit inside their neighbours' rules instead.
   The bottom margin that keeps the cells' dividers clear of the next rule is
   shared with the other divider blocks — see "Layout helpers" in section 3. */
.cols3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.cols3__cell {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 34px 21px 42px;
  border-right: 1px solid var(--rule);
}

.cols3__cell:first-child { padding-left: 0; }
.cols3__cell:last-child { padding-right: 0; border-right: 0; }

.cols3__title {
  font-size: var(--fs-title);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.cols3__text {
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.618;
  color: var(--ink-2);
}

@media (max-width: 700px) {
  .cols3 { grid-template-columns: 1fr; }
  .cols3__cell {
    gap: 6px;
    padding: 21px 0;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }
  .cols3__cell:first-child { padding-left: 0; }
  .cols3__cell:last-child { padding-right: 0; border-bottom: 0; }
}

/* 13. Stat strip (3-col)
   ========================================================================== */

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--rule-strong);
}

/* Two real results beat three padded ones. Same divider pattern, wider cells. */
.stats--two { grid-template-columns: repeat(2, 1fr); }

.stats__cell {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 34px 21px 42px;
  border-right: 1px solid var(--rule);
}

.stats__cell:first-child { padding-left: 0; }
.stats__cell:last-child { padding-right: 0; border-right: 0; }

.stats__num {
  font-size: var(--fs-stat);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
}

.stats__caption {
  font-size: var(--fs-caption);
  font-weight: 300;
  line-height: 1.5;
  color: var(--muted);
}

/* 3-col → single-column rows, stat left, per mobile option 9b */
@media (max-width: 700px) {
  .stats { grid-template-columns: 1fr; }
  .stats__cell {
    flex-direction: row;
    align-items: baseline;
    gap: 13px;
    padding: 21px 0;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }
  .stats__cell:last-child { padding-right: 0; border-bottom: 0; }
  .stats__num { min-width: 110px; }
}

/* 14. Sidebar-label section + numbered process rows
   ========================================================================== */

.split {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 55px;
  padding: 89px var(--pad) 55px;
}

.split--tight { padding-bottom: 34px; }

.split__body {
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.process-row {
  display: grid;
  grid-template-columns: 55px 280px 1fr;
  grid-template-areas: 'num title desc';
  align-items: baseline;
  gap: 21px;
  padding: 26px 0;
  border-top: 1px solid var(--rule);
}

.process-row:last-child { border-bottom: 1px solid var(--rule-strong); }

.process-row__num {
  grid-area: num;
  font-size: var(--fs-label);
  color: var(--muted);
}

.process-row__title {
  grid-area: title;
  font-size: var(--fs-title);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.process-row__desc {
  grid-area: desc;
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.618;
  color: var(--ink-3);
}

@media (max-width: 1000px) {
  .process-row { grid-template-columns: 42px 220px 1fr; gap: 13px; }
}

@media (max-width: 900px) {
  /* Sidebar label moves above its content */
  .split {
    grid-template-columns: 1fr;
    gap: 21px;
    padding: 55px var(--pad) 34px;
  }
  .split__body { gap: 21px; }

  /* Number sits inline beside the title (option 9c) */
  .process-row {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      'num title'
      'desc desc';
    gap: 6px 13px;
    padding: 18px 0;
  }

  /* Case-study variant stacks the number above the title (option 9b) */
  .split--stacked-num .process-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      'num'
      'title'
      'desc';
    gap: 8px;
  }
}

@media (max-width: 600px) {
  .split { padding: 42px var(--pad) 21px; }
}

/* 15. Services ledger
   ========================================================================== */

.svc-row {
  display: grid;
  grid-template-columns: 55px 340px 1fr;
  grid-template-areas: 'num name body';
  gap: 21px;
  padding: 42px 0;
  border-bottom: 1px solid var(--rule);
}

.svc-row:last-child { border-bottom-color: var(--rule-strong); }

.svc-row__num {
  grid-area: num;
  padding-top: 8px;
  font-size: var(--fs-label);
  color: var(--muted);
}

.svc-row__name {
  grid-area: name;
  font-size: var(--fs-name);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.svc-row__body {
  grid-area: body;
  display: flex;
  flex-direction: column;
  gap: 21px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chips li {
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  border: 1px solid var(--rule);
  padding: 6px 13px;
}

@media (max-width: 1000px) {
  .svc-row { grid-template-columns: 42px 240px 1fr; gap: 13px; }
}

@media (max-width: 900px) {
  .svc-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      'name num'
      'body body';
    gap: 13px;
    padding: 26px 0;
  }
  .svc-row__num { padding-top: 0; justify-self: end; }
  .svc-row__body { gap: 13px; }
  .chips { gap: 6px; }
  .chips li { font-size: 12px; padding: 5px 10px; }
}

/* 16. Pull quote
   ========================================================================== */

.quote {
  padding: 55px var(--pad);
  text-align: center;
}

.quote__text {
  margin: 0 auto;
  max-width: 820px;
  font-family: var(--serif);
  font-size: var(--fs-pull);
  font-style: italic;
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: -0.005em;
  font-optical-sizing: auto;
  text-wrap: balance;
}

.quote__attr {
  margin-top: 21px;
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (max-width: 600px) {
  .quote { padding: 34px var(--pad); }
  .quote__attr { margin-top: 13px; font-size: 12px; }
}

/* 17. Big link row (next case study / say hello)
   ========================================================================== */

.big-link {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 21px;
  padding: 42px 0;
  border-top: 1px solid var(--rule-strong);
}

.big-link__label {
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.big-link__title {
  font-size: var(--fs-display);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
  text-align: right;
}

.big-link:hover,
.big-link:hover .big-link__label,
.big-link:hover .big-link__title { color: var(--muted); }

@media (max-width: 600px) {
  .big-link {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 26px 0 34px;
  }
  .big-link__title { letter-spacing: -0.02em; text-align: left; }
}

/* 18. Image placeholders
   ========================================================================== */

.ph {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 21px;
  background: repeating-linear-gradient(
    -45deg,
    var(--ph-a),
    var(--ph-a) 12px,
    var(--ph-b) 12px,
    var(--ph-b) 24px
  );
  border: 1px solid var(--rule);
}

.ph__label,
.ph-text {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--rule);
  padding: 8px 13px;
  text-align: center;
}

/* Inline copy placeholder — same convention as the striped image blocks,
   for case studies whose text has not been written yet. */
.ph-text {
  display: block;
  text-align: left;
  border-style: dashed;
  max-width: 610px;
}

.title-block .ph-text { margin-top: 21px; }

/* An unwritten pull quote keeps the placeholder voice, not Newsreader italic */
.quote__text.ph-text {
  display: inline-block;
  font-family: var(--mono);
  font-size: 13px;
  font-style: normal;
}

.ph--hero { height: 560px; }
.ph--pair { height: 400px; }

/* Real screenshots. They take the placeholder's exact geometry so swapping one
   in never changes the page rhythm, and they keep the 1px #ddd frame the style
   guide asks for. Source shots vary from 0.48 to 1.83 in aspect, so they are
   cropped from the top: for UI, the top of a screen carries the most meaning. */
.shot {
  display: block;
  width: 100%;
  object-fit: cover;
  object-position: top center;
  background: var(--ph-a);
  border: 1px solid var(--rule);
}

.shot--hero { height: 560px; }
.shot--pair { height: 400px; }

/* A screenshot pre-cropped to the hero's exact 2.0893 ratio keeps its natural
   height rather than filling a fixed-height box. At 1170 wide that computes to
   the designed 560px, so desktop is unchanged; at narrower widths it scales down
   whole instead of being cropped up to 31% on the sides. On a photograph that
   crop takes margin, but on a UI screenshot it takes the content — at phone
   width it was cutting off the lead stat on one edge and a whole panel on the
   other. Two classes deep so it beats .shot--hero inside the media queries. */
.shot.shot--fit { height: auto; }

.ph-frame {
  padding: 34px var(--pad) 0;
}

/* Caption under a real image — the placeholder's monospace label has no place
   once there is a real shot, so captions use the stat-caption role instead. */
.shot-caption {
  display: block;
  margin-top: 13px;
  max-width: 610px;
  font-size: var(--fs-caption);
  line-height: 1.5;
  font-weight: 300;
  color: var(--muted);
}

.pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px;
  padding: 0 var(--pad);
}

@media (max-width: 900px) {
  .ph--hero,
  .shot--hero { height: 380px; }
  .ph--pair,
  .shot--pair { height: 300px; }
}

@media (max-width: 700px) {
  .pair { grid-template-columns: 1fr; gap: 13px; }
}

@media (max-width: 600px) {
  .ph-frame { padding: 21px var(--pad) 0; }
  .ph--hero,
  .shot--hero { height: 240px; }
  .ph--pair,
  .shot--pair { height: 200px; }
  .ph__label,
  .ph-text { font-size: 12px; padding: 6px 10px; }
}

/* 19. Footer
   ========================================================================== */

.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 13px;
  padding: 21px var(--pad) 26px;
  border-top: 1px solid var(--rule);
  font-size: var(--fs-label-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.site-footer a { color: var(--muted-2); }
.site-footer a:hover { color: var(--ink); }

@media (max-width: 600px) {
  .site-footer {
    padding: 18px var(--pad) 24px;
    letter-spacing: 0.14em;
  }
}

/* 20. Error page
   ========================================================================== */

.error-block {
  padding: 89px var(--pad);
  border-bottom: 1px solid var(--rule-strong);
}

.error-block .cta { margin-top: 34px; display: inline-block; }

@media (max-width: 600px) {
  .error-block { padding: 55px var(--pad); }
}

/* 21. Prose + contact actions
   ==========================================================================
   Two additions the handoff had no component for: the Studio page's running
   body copy, and the Contact page's booking CTA. Both are built only from the
   existing type roles and the 8/13/21/34/55 spacing scale. */

.prose {
  display: flex;
  flex-direction: column;
  gap: 21px;
  padding: 55px var(--pad);
  border-bottom: 1px solid var(--rule);
}

.prose p { max-width: 680px; }

.contact-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 34px;
  padding: 55px var(--pad) 89px;
  border-bottom: 1px solid var(--rule-strong);
}

/* The booking link is the page's one job, so it gets display scale rather than
   the 16px inline CTA treatment. */
.contact-actions .cta {
  font-size: 21px;
  letter-spacing: 0.1em;
}

@media (max-width: 600px) {
  .prose { gap: 18px; padding: 34px var(--pad); }
  .contact-actions {
    gap: 26px;
    padding: 34px var(--pad) 55px;
  }
  .contact-actions .cta { font-size: 17px; }
}