/* ==========================================================================
   Sarah Holman — Product Designer
   Single stylesheet. Tokens below are the source of truth (DESIGN_SYSTEM.md).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Color */
  --white: #ffffff;
  --grey-light: #f4f4f4;
  --grey-dark: #838383;
  --black-light: #1b1b1b;
  --black: #121212;
  --accent: #963fe9;
  --accent-blue: #3b5bf0;
  --accent-sky: #4da6e0;
  --accent-orange: #e8620f;

  /* Semantic aliases */
  --bg: var(--black);
  --text: var(--white);
  --muted: var(--grey-dark);
  --line: var(--black-light);
  --surface-dark: var(--black-light);
  --surface-light: var(--grey-light);

  /* Type */
  --font: 'Plus Jakarta Sans', Arial, sans-serif;

  --h1: clamp(2.5rem, 9vw, 5rem);
  /* Hero name stack runs larger than the base h1. */
  --h1-display: clamp(2.75rem, 6.25vw, 5.75rem);
  --h2: clamp(2rem, 6vw, 4.1rem);
  --h3: clamp(1.75rem, 4.5vw, 3.2rem);
  --h4: clamp(1.5rem, 3.5vw, 2.3rem);

  --p1: 1.6rem;
  --p2: 1.4rem;
  --p3: 1.2rem;

  --lh-heading: 1.4em;
  --lh-body: 1.5em;
  --ls-heading: -0.03em;
  --ls-body: 0.01em;

  --weight-display: 700;
  --weight-emphasis: 700;
  --weight-heading: 700;
  --weight-body: 600;
  --weight-prose: 400;

  /* Layout */
  --gutter: max(7vw, 32px);
  --measure: 1170px;
  --radius: 8px;
  --portrait-w: min(38vw, 485px);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

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

/* The full-bleed blocks use width:100vw, which includes the scrollbar and can
   therefore overflow by a few pixels. clip contains it without creating a
   scroll container (unlike hidden, which would break position:sticky). */
html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

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

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

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

.skip { position: absolute; left: -999px; }

.skip:focus {
  left: 20px;
  top: 20px;
  z-index: 5;
  background: var(--white);
  color: var(--black);
  padding: 10px;
}

/* --------------------------------------------------------------------------
   3. Type scale
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-weight: var(--weight-heading);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  margin: 0;
}

h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
h4 { font-size: var(--h4); }

p, blockquote {
  margin: 0;
  font-size: var(--p1);
  font-weight: var(--weight-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

small { font-size: var(--p3); }


/* --------------------------------------------------------------------------
   3b. Motion
   One easing curve and one distance, used everywhere. --d staggers an item
   within its group. Everything here is opt-in via a class, so a page with no
   motion classes behaves exactly as before.
   -------------------------------------------------------------------------- */

:root {
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --rise: 20px;
}

/* Fine film grain over the whole page. Sits above content but ignores input. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.038;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

/* Above the fold: play on load. */
.lift {
  opacity: 0;
  animation: lift 1050ms var(--ease-out) both;
  animation-delay: var(--d, 0ms);
}

@keyframes lift {
  from { opacity: 0; transform: translateY(var(--rise)); }
  to   { opacity: 1; transform: none; }
}

/* The portrait settles rather than rises. */
.portrait.lift {
  animation: settle 1400ms var(--ease-out) both;
}

@keyframes settle {
  from { opacity: 0; transform: scale(1.06); }
  to   { opacity: 1; transform: none; }
}

/* Below the fold: play when scrolled into view, once.
   Gated on .js (set by an inline script in <head>) so that with JavaScript
   disabled the content is simply visible rather than stuck at opacity 0. */
.js .reveal {
  opacity: 0;
  transform: translateY(var(--rise));
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
  transition-delay: var(--d, 0ms);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Experience hairlines draw across as the row arrives. */
.roles > div.reveal { position: relative; }

.roles > div.reveal::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--white);
  opacity: 0.16;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1100ms var(--ease-out);
  transition-delay: var(--d, 0ms);
}

.roles > div.reveal.is-visible::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  body::after { display: none; }

  .lift,
  .portrait.lift { animation: none; opacity: 1; }

  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .roles > div.reveal::after { display: none; }

  .case-next .arrow { transition: color 220ms ease; }

  .case-next a:hover .prev-arrow,
  .case-next a:hover .next-arrow { transform: none; }
}

/* --------------------------------------------------------------------------
   4. Header
   -------------------------------------------------------------------------- */

header {
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--bg);
}

nav {
  display: flex;
  gap: 31px;
  font-size: 19px;
  font-weight: 400;
}

nav a:hover,
nav .active {
  text-decoration: underline;
  text-underline-offset: 5px;
}

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */

.hero { padding: 24px var(--gutter) 310px; }

.hero-stage {
  display: grid;
  grid-template-columns: 1fr var(--portrait-w) 1fr;
  align-items: center;
  gap: 24px;
  width: 100vw;
  margin: 0 calc(50% - 50vw) 42px;
}

.hero-label {
  color: var(--muted);
  font-size: 21px;
  font-weight: var(--weight-prose);
  text-align: center;
}

.hero h1 {
  max-width: min(1240px, 84vw);
  margin: 0 auto;
  font-size: var(--h1-display);
  line-height: 1.35em;
  text-align: center;
  text-wrap: balance;
}

.hero h1 strong {
  display: block;
  font-weight: var(--weight-display);
}

.hero h1 strong:last-child,
.hero h1 strong:last-child i {
  color: var(--muted);
  font-style: normal;
}

.intro {
  max-width: min(1240px, 84vw);
  margin: 270px auto 0;
  text-align: center;
  font-size: clamp(2.25rem, 3.4vw, 2.625rem);
  font-weight: var(--weight-prose);
  line-height: 1.35em;
  letter-spacing: var(--ls-heading);
}

.intro b { font-weight: var(--weight-emphasis); }

/* Portrait */

.portrait {
  width: 100%;
  aspect-ratio: 1 / 1.08;
  border-radius: 9px;
  overflow: hidden;
  background: var(--surface-dark);
}

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

/* --------------------------------------------------------------------------
   6. Section shell
   -------------------------------------------------------------------------- */

.projects,
.experience,
.testimonials {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: 32px;
}

/* --------------------------------------------------------------------------
   7. Projects
   -------------------------------------------------------------------------- */

.projects {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 28px;
  row-gap: 78px;
  padding-bottom: 175px;
}

.projects > h2 { grid-column: 1 / -1; margin-bottom: 0; }

.project-info { padding-top: 22px; }

.project-info h3 {
  font-size: var(--h4);
  font-weight: var(--weight-heading);
}

.project-info p {
  margin-top: 10.5px;
  font-size: var(--p3);
  color: var(--muted);
}

/* Project artwork cards */

.art {
  aspect-ratio: 1.5 / 1;
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  background: var(--surface-dark);
  color: var(--white);
}

.art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(0.2, 0, 0.2, 1);
}

/* Hover: the cover eases forward behind a soft scrim, and an arrow slides
   out of the project title. */
.art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--black);
  opacity: 0;
  transition: opacity 400ms ease;
}

.project:hover .art img,
.project:focus-visible .art img { transform: scale(1.045); }

.project:hover .art::after,
.project:focus-visible .art::after { opacity: 0.2; }

.project-info h3::after {
  content: '→';
  display: inline-block;
  margin-left: 0.3em;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 300ms ease, transform 300ms ease;
}

.project:hover .project-info h3::after,
.project:focus-visible .project-info h3::after {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .art img,
  .art::after,
  .project-info h3::after { transition: opacity 200ms ease; }

  .project:hover .art img,
  .project:focus-visible .art img { transform: none; }

  .project:hover .project-info h3::after,
  .project:focus-visible .project-info h3::after { transform: none; }
}

/* --------------------------------------------------------------------------
   8. Experience
   -------------------------------------------------------------------------- */

.experience { padding-bottom: 163px; }

.experience h2,
.testimonials h2 { margin-bottom: 49px; }

.roles { border-top: 1px solid var(--line); }

.roles > div {
  min-height: 110px;
  display: grid;
  grid-template-columns: 25% 1fr;
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.roles p {
  font-size: var(--p2);
  color: var(--muted);
}

.roles h3 {
  font-size: clamp(1.75rem, 4vw, 2.9rem);
  font-weight: var(--weight-heading);
}

/* --------------------------------------------------------------------------
   9. Testimonials
   -------------------------------------------------------------------------- */

.testimonials { padding-bottom: 180px; }

.testimonials article {
  display: grid;
  grid-template-columns: 25% 1fr;
  padding: 27px 0 42px;
  border-top: 1px solid var(--line);
}

.testimonials article:last-child { border-bottom: 1px solid var(--line); }

.testimonials article p { font-size: var(--p2); }

.testimonials small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
}

.testimonials blockquote {
  font-size: var(--p1);
  font-weight: var(--weight-prose);
  line-height: 1.4em;
}

/* --------------------------------------------------------------------------
   10. Footer
   -------------------------------------------------------------------------- */

footer {
  position: relative;
  min-height: 415px;
  padding: 51px var(--gutter) 33px;
  background: var(--surface-light);
  color: var(--black-light);
}

footer > p,
.contact-link {
  font-size: clamp(1.6rem, 2.3vw, 2.4rem);
  font-weight: var(--weight-heading);
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-heading);
}

footer > p { color: var(--grey-dark); }

.contact-link {
  color: var(--black-light);
  border-bottom: 2px solid;
}

.contact-link span {
  font-size: 0.85em;
  margin-left: 10px;
}

.footer-bottom {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 33px;
  display: flex;
  justify-content: space-between;
  align-items: end;
  font-size: 0.9375rem;
}

.footer-bottom div { display: flex; gap: 27px; }

/* Explicit, not inherited: the global `p` rule outranks an inherited size. */
.footer-bottom p {
  font-size: 0.8125rem;
  color: var(--grey-dark);
}

.footer-bottom a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   11. Text highlight
   Wipes a purple marker across the phrase when it scrolls into view.
   Markup: <span class="hl">phrase</span>
   -------------------------------------------------------------------------- */

.hl {
  --hl-color: var(--accent);
  padding: 0.08em 0.1em;
  background-image: linear-gradient(var(--hl-color), var(--hl-color));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: background-size 700ms cubic-bezier(0.33, 0, 0.2, 1);
}

.hl.sky { --hl-color: var(--accent-sky); }
.hl.blue { --hl-color: var(--accent-blue); }
.hl.orange { --hl-color: var(--accent-orange); }

.hl.is-lit { background-size: 100% 100%; }

/* No IntersectionObserver, or motion turned down: show it already filled. */
.hl.is-static { background-size: 100% 100%; }

@media (prefers-reduced-motion: reduce) {
  .hl { transition: none; background-size: 100% 100%; }
}

/* --------------------------------------------------------------------------
   12. Case study pages
   -------------------------------------------------------------------------- */

/* Case pages use a percentage gutter rather than a fixed measure, so the
   content keeps hugging the left edge on wide screens. 10.5vw matches the
   original Squarespace layout. */
.case {
  max-width: 1800px;
  margin-inline: auto;
  padding-inline: min(10.5vw, 190px);
}

/* Small grey section labels: INTRODUCTION, ROLE, OUTCOMES, ... */
.case-label {
  font-size: var(--p3);
  color: var(--muted);
  margin-bottom: 12px;
}

/* Header block */

.case-head { padding-top: 80px; }

.case-eyebrow {
  font-size: var(--p3);
  color: var(--muted);
}

.case-head h1 {
  margin: 26px 0 0;
  font-size: var(--h4);
  font-weight: var(--weight-emphasis);
  line-height: 1.15em;
}

.case-rule {
  height: 1px;
  border: 0;
  margin: 14px 0 10px;
  background: var(--muted);
}

.case-meta {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: normal;
}

/* Full-bleed hero */

.case-hero {
  width: 100vw;
  margin: 96px calc(50% - 50vw) 0;
}

/* 16:9 by default; set --ar on the wrapper for a hero with its own shape,
   which then fits without cropping. */
.case-hero img {
  width: 100%;
  aspect-ratio: var(--ar, 16 / 9);
  object-fit: cover;
  object-position: center;
}

/* Intro: wide copy column, narrow meta column */

.case-intro {
  display: grid;
  grid-template-columns: 59% 1fr;
  column-gap: 9.7%;
  padding-top: 108px;
}

.case-body p { font-size: var(--p3); }

.case-body p + p { margin-top: 1.5em; }

.case-facts p:not(.case-label) { font-size: var(--p3); }

/* Stat row */

.case-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 69px;
  padding-top: 96px;
  text-align: center;
}

.case-stats > .case-label {
  grid-column: 1 / -1;
  text-align: left;
  margin-bottom: 0;
}

.case-stat {
  display: grid;
  place-content: center;
  aspect-ratio: 1.8 / 1;
  padding: 24px;
  border-radius: 16px;
  background: var(--surface-dark);
}

.case-stat b {
  display: block;
  font-size: var(--h4);
  font-weight: var(--weight-emphasis);
  line-height: 1.15em;
}

.case-stat p {
  margin-top: 14px;
  font-size: var(--p3);
}

.case-footnote {
  margin-top: 14px;
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
}

/* Press */

.case-press {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 69px;
  padding-top: 120px;
}

.case-press > .case-label {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

.case-press a { display: block; align-self: start; }

/* Fixed-ratio frame. The image fills it at height:100%, so its own
   dimensions can never drive the card height. */
.case-shot {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
  background: var(--surface-dark);
}

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

.case-press p {
  margin-top: 24px;
  font-size: var(--p3);
}

.case-press a:hover p { text-decoration: underline; }

/* Intro variant with two meta columns (role + timeline) */

.case-intro.has-two-facts { grid-template-columns: 49.5% 18.5% 22%; column-gap: 5.5%; }

/* Media frames. Every image sits in a ratio-locked figure so the card height
   never depends on the file's own dimensions — set --ar per figure. */

.case-figure {
  margin: 0;
  aspect-ratio: var(--ar, 16 / 9);
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  border-radius: 12px;
  background: var(--surface-dark);
}

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

/* Full-width figure sitting on its own row within a section */
.case-wide { margin-top: 52px; }

/* Contained screenshots read better whole than cropped. */
.case-figure.fit { background: none; }
.case-figure.fit img { object-fit: contain; }

/* One square surface holding a whole group of screenshots. The figures
   inside stay transparent — the panel is the only background. */
/* Square target, but allowed to grow rather than crop if the screenshots
   inside are taller than the square. */
.case-media-panel {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  min-width: 0;
  padding: 8%;
  border-radius: 16px;
  background: var(--surface-dark);
}

.case-media-panel .case-pair { width: 100%; }

/* Alternating feature blocks */

.case-features {
  display: grid;
  row-gap: 44px;
  padding-top: 120px;
}

.case-feature {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1%;
  align-items: center;
}

/* Every panel is the same size. The device is contained inside it, so a
   laptop fills the width and a phone fills the height — which is what keeps
   the mockups reading at a consistent scale. */
.case-panel {
  display: grid;
  /* stretch, not center — the image box must fill the content box exactly so
     object-fit has a definite area to letterbox the device inside. */
  place-items: stretch;
  margin: 0;
  aspect-ratio: 493 / 430;
  /* Grid items default to min-height:auto, which lets tall content override
     aspect-ratio. Pinning it to 0 keeps the panel the size we asked for. */
  min-height: 0;
  min-width: 0;
  padding: 6%;
  border-radius: 16px;
  background: var(--surface-dark);
}

.case-panel img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
}

.case-feature-text { padding-inline: 8%; }

.case-feature h2 {
  font-size: var(--h4);
  font-weight: var(--weight-emphasis);
  line-height: 1.15em;
}

.case-feature p {
  margin-top: 22px;
  font-size: var(--p3);
}

/* Alternate sides; the copy aligns toward its panel. */
.case-feature:nth-child(even) .case-panel { order: 2; }

.case-feature:nth-child(even) .case-feature-text {
  order: 1;
  text-align: right;
}

/* Generic section: heading + lede */

.case-section { padding-top: 150px; }

.case-section > h2 {
  font-size: var(--h3);
  font-weight: var(--weight-emphasis);
}

.case-section > h3 {
  margin-top: 90px;
  font-size: var(--h4);
  font-weight: var(--weight-emphasis);
}

/* Body copy sitting under a section heading is grey; the headings stay white. */
.case-section p,
.case-feature p {
  color: var(--muted);
}

/* Emphasis inside grey copy comes back up to full white. */
.case-section p b,
.case-section p em {
  color: var(--text);
}

.case-section p {
  max-width: 89%;
  margin-top: 22px;
  font-size: var(--p3);
}

/* Media rows */

.case-row {
  display: grid;
  gap: 5.5%;
  margin-top: 48px;
}

.case-row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.case-row.wide-left { grid-template-columns: 50.5% 1fr; align-items: start; }

.case-row p { max-width: none; margin-top: 0; }

/* Centred hero that stops short of the page edges. It isn't full-bleed, so
   the image keeps its own proportions — no ratio to match, nothing to crop. */
.case-hero.inset {
  width: auto;
  max-width: 66%;
  margin: 96px auto 0;
}

.case-hero.inset img {
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}

/* Numbered results list */
.case-ordered {
  display: grid;
  gap: 30px;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: case-item;
}

.case-ordered li {
  position: relative;
  padding-left: 2.2em;
  font-size: var(--p2);
  font-weight: var(--weight-body);
  line-height: var(--lh-body);
  color: var(--muted);
}

.case-ordered li::before {
  counter-increment: case-item;
  content: counter(case-item) ".";
  position: absolute;
  left: 0;
  color: var(--text);
}

/* Expandable engagement phases */
.case-accordion {
  display: grid;
  gap: 14px;
  margin-top: 44px;
}

.case-accordion details {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-dark);
}

.case-accordion summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 22px 26px;
  cursor: pointer;
  font-size: var(--p2);
  font-weight: var(--weight-body);
  list-style: none;
}

.case-accordion summary::-webkit-details-marker { display: none; }

.case-accordion summary::after {
  content: '+';
  font-size: 1.4em;
  line-height: 1;
  color: var(--muted);
}

.case-accordion details[open] summary::after { content: '–'; }

.case-accordion .panel { padding: 0 26px 28px; }

.case-accordion h3 {
  margin-bottom: 12px;
  font-size: var(--p3);
  font-weight: var(--weight-emphasis);
}

.case-accordion .case-bullets + h3 { margin-top: 28px; }

/* Two captioned stacks of screenshots */
.case-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7%;
  margin-top: 44px;
}

.case-columns h3 {
  margin-bottom: 26px;
  font-size: var(--p2);
  font-weight: var(--weight-body);
}

.case-columns .stack { display: grid; gap: 52px; }

/* Numbered contribution columns */
.case-numbers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5.5%;
  margin-top: 60px;
}

.case-numbers p { max-width: none; margin-top: 0; }

/* Specificity deliberately above `.case-section p`, which would otherwise
   recolour and resize the digit. Do not lower it. */
.case-section .case-numbers p.case-badge {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  max-width: none;
  margin: 0 0 28px;
  border-radius: 50%;
  background: var(--white);
  color: var(--black);
  font-size: var(--p1);
  font-weight: var(--weight-emphasis);
  line-height: 1;
}

/* White kicker sitting above a section heading */
.case-kicker {
  margin-bottom: 12px;
  font-size: var(--p2);
}

.case-section > .case-kicker { margin-top: 90px; }
.case-section > .case-kicker:first-child { margin-top: 0; }

/* Two figures side by side inside one grid cell */
.case-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 8%;
}

/* Milestone columns */
.case-milestones {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5.5%;
  margin-top: 52px;
}

.case-milestones h3 {
  margin-top: 0;
  font-size: var(--h4);
  font-weight: var(--weight-emphasis);
  line-height: 1.15em;
}

.case-milestones p { max-width: none; }

/* Bulleted results */
.case-bullets {
  display: grid;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.case-bullets li {
  position: relative;
  padding-left: 1.1em;
  font-size: var(--p3);
  font-weight: var(--weight-body);
  line-height: var(--lh-body);
  color: var(--muted);
}

.case-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--muted);
}

.case-bullets b { color: var(--text); }

/* Insight callout */

/* Insight sitting on its own surface. Flex with a fixed gap keeps the icon
   tight to the copy — a percentage column would drift them apart as the
   container widens. */
.case-callout {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  margin-top: 70px;
  padding: 32px 36px;
  border-radius: 16px;
  background: var(--surface-dark);
}

.case-callout .emoji {
  flex: none;
  margin: 0;
  font-size: var(--h4);
  line-height: 1.1;
}

.case-callout p { max-width: none; margin-top: 0; }

/* Persona columns */

.case-personas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5.5%;
  margin-top: 56px;
}

.case-persona img { width: 97px; height: 97px; }

.case-persona h4 {
  margin-top: 26px;
  font-size: var(--p2);
  font-weight: var(--weight-body);
}

.case-persona p { max-width: none; margin-top: 14px; }

/* Phone screenshot groups */

.case-screens {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5.5%;
  margin-top: 60px;
}

.case-screens > div { min-width: 0; }

.case-screens h3 {
  margin-bottom: 26px;
  font-size: var(--p2);
  font-weight: var(--weight-body);
}

.case-screens .pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12%;
  align-items: start;
}

/* Closing note + next project */

.case-note-wrap { padding-top: 150px; }

.case-note {
  padding: 46px 32px;
  border-radius: 16px;
  background: var(--accent);
  text-align: center;
  font-size: var(--h4);
  font-weight: var(--weight-emphasis);
  line-height: 1.15em;
  letter-spacing: var(--ls-heading);
}

/* Quieter banner variant: body-size copy on blue, for a closing statement
   rather than a call to action. */
.case-note.calm {
  padding: 64px 8%;
  border-radius: 20px;
  background: var(--accent-blue);
  font-size: var(--p1);
  font-weight: var(--weight-body);
  line-height: 1.4em;
  letter-spacing: var(--ls-body);
}

/* padding-block, not the padding shorthand — the shorthand would wipe out
   the gutter that .case sets with padding-inline. */
.case-next {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  padding-block: 150px 175px;
  text-align: right;
}

.case-next.single { justify-content: flex-end; }

.case-next .prev { text-align: left; }

.case-next .case-label { margin-bottom: 4px; }

.case-next h2 {
  display: flex;
  align-items: center;
  gap: 0.3em;
  justify-content: flex-end;
  font-size: var(--h3);
}

.case-next .prev h2 { justify-content: flex-start; }

.case-next .arrow {
  color: var(--muted);
  transition: transform 220ms ease, color 220ms ease;
}

.case-next a:hover .arrow { color: var(--text); }
.case-next a:hover .prev-arrow { transform: translateX(-6px); }
.case-next a:hover .next-arrow { transform: translateX(6px); }

.case-next a:hover h2 span:not(.arrow) {
  text-decoration: underline;
  text-underline-offset: 6px;
}

/* --------------------------------------------------------------------------
   13. Small screens
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Tablets and narrow laptops (701–1000px)
   Three-up grids become two-up, and the widest asymmetric splits even out.
   Below 701px everything collapses to a single column in the block after this.
   -------------------------------------------------------------------------- */

@media (min-width: 701px) and (max-width: 1000px) {
  .case-row.three,
  .case-milestones,
  .case-numbers,
  .case-personas,
  .case-stats,
  .case-press { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .case-stats,
  .case-press { gap: 40px; }

  .case-row.three,
  .case-milestones,
  .case-numbers,
  .case-personas { gap: 7%; }

  /* Wide asymmetric splits get too lopsided at this width. */
  .case-intro,
  .case-row.wide-left { grid-template-columns: 1fr 1fr; }

  .case-intro.has-two-facts { grid-template-columns: 1fr 1fr; row-gap: 44px; }
  .case-intro.has-two-facts .case-body { grid-column: 1 / -1; }

  /* Feature rows stack so the device panels keep a usable size. */
  .case-feature { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .case-feature-text { padding-inline: 0; }
  .case-feature:nth-child(even) .case-panel,
  .case-feature:nth-child(even) .case-feature-text { order: 0; text-align: left; }

  .case-hero.inset { max-width: 84%; }
}

@media (max-width: 700px) {
  :root {
    --gutter: 22px;
    --portrait-w: 75vw;
  }

  header { height: 68px; }
  nav { font-size: 17px; }

  .hero { padding: 35px var(--gutter) 180px; }
  .hero-stage { gap: 10px; margin-bottom: 30px; }
  .hero-label { font-size: 11px; }
  .intro { margin-top: 160px; }

  .projects,
  .experience,
  .testimonials { padding-inline: var(--gutter); }

  .projects {
    display: block;
    padding-bottom: 100px;
  }

  .projects > h2 { margin-bottom: 45px; }
  .project { display: block; margin-bottom: 61px; }

  .experience { padding-bottom: 100px; }
  .roles > div { min-height: 93px; grid-template-columns: 43% 1fr; }

  .testimonials {
    padding-bottom: 100px;
  }

  .testimonials article { display: block; padding: 22px 0 32px; }
  .testimonials blockquote { margin-top: 26px; }

  footer { min-height: 350px; padding: 39px var(--gutter); }
  .footer-bottom { bottom: 25px; }
  .footer-bottom div { gap: 15px; }


  .case { padding-inline: var(--gutter); }
  .case-head { padding-top: 40px; }

  .case-meta {
    display: block;
    font-size: 0.75rem;
  }

  .case-meta span + span { display: block; margin-top: 6px; color: var(--muted); }

  .case-hero { margin-top: 56px; }

  .case-intro {
    display: block;
    padding-top: 64px;
  }

  .case-facts { margin-top: 48px; }

  .case-stats,
  .case-press {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    padding-top: 72px;
  }

  .case-stats { text-align: left; }
  .case-stat { aspect-ratio: auto; padding: 40px 28px; }

  .case-intro.has-two-facts { grid-template-columns: minmax(0, 1fr); }
  .case-intro.has-two-facts .case-facts { margin-top: 40px; }

  .case-features {
    row-gap: 56px;
    padding-top: 72px;
  }

  .case-feature {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 28px;
  }

  .case-feature-text { padding-inline: 0; }

  /* Panel always first, copy always left-aligned, on one column. */
  .case-feature:nth-child(even) .case-panel { order: 0; }

  .case-feature:nth-child(even) .case-feature-text {
    order: 0;
    text-align: left;
  }

  .case-section { padding-top: 80px; }
  .case-section > h3 { margin-top: 56px; }
  .case-section p { max-width: none; }

  .case-row.three,
  .case-row.wide-left { grid-template-columns: minmax(0, 1fr); gap: 32px; }

  .case-milestones,
  .case-numbers { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .case-hero.inset { max-width: none; margin-top: 56px; }
  .case-section .case-numbers p.case-badge { margin-bottom: 18px; }

  .case-columns { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .case-columns .stack { gap: 32px; }
  .case-accordion summary { padding: 18px 20px; }
  .case-accordion .panel { padding: 0 20px 22px; }
  .case-pair { gap: 6%; }
  .case-media-panel { aspect-ratio: auto; padding: 28px 22px; }
  .case-section > .case-kicker { margin-top: 56px; }

  .case-callout { gap: 16px; padding: 24px 22px; margin-top: 48px; }
  .case-personas { grid-template-columns: minmax(0, 1fr); gap: 44px; }

  .case-screens { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .case-screens .pair { gap: 8%; }

  .case-note-wrap { padding-top: 80px; }
  .case-note { padding: 32px 22px; }
  .case-note.calm { padding: 36px 24px; }

  .case-next { padding-block: 90px 100px; gap: 20px; }
  .case-next h2 { font-size: var(--h4); gap: 0.25em; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}