/* Rowena Baulch portfolio
   Tokens pulled from the Figma Sites build (Desktop 1280 / Tablet 800 / Mobile 375). */

/* Neue Haas Grotesk. The @font-face rules only use local(), so the site uses a copy
   installed on the visitor's device and never serves font files. To show it to every
   visitor, add an Adobe Fonts web project (Creative Cloud) and link its kit in <head>;
   the kit's family names are already in --font below. Otherwise visitors get Helvetica Neue. */
@font-face {
  font-family: "Site Grotesk";
  src: local("Neue Haas Grotesk Text Pro"), local("NeueHaasGroteskText W01"), local("NHaasGroteskTXPro-55Rg");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Site Grotesk";
  src: local("Neue Haas Grotesk Text Pro Bold"), local("NeueHaasGroteskText W01 Bd"), local("NHaasGroteskTXPro-75Bd");
  font-weight: 700;
  font-style: normal;
}

:root {
  color-scheme: light;
  --ink: #000;
  --muted: #767676;          /* 4.54:1 on white */
  --cycle-idle: #c4c4c4;     /* inactive compvis words and dots, deliberately faint */
  --paper: #fff;
  --line: #000;
  --stroke: #949494;         /* pill outlines, 3.03:1 on white */
  --count-on-active: #c8c8c8;
  --placeholder: #eee;
  --divider-soft: #e3e3e3;
  --backdrop: rgba(0, 0, 0, .28);
  --shadow-panel: rgba(0, 0, 0, .12);
  --shadow-thumb: rgba(0, 0, 0, .16);
  --logo-filter: none;
  --threshold-paper: #f3f2ee;  /* the Threshold site's own background, behind its video thumbnail */
  --afterpay-ink: #181818;     /* the Afterpay B2B site's own background, behind its video thumbnail */

  --gutter: 16px;        /* page edge, nav, hero, dividers */
  --inset: 30px;         /* project rows sit further in */
  --gap: 20px;

  --font: "Site Grotesk", "neue-haas-grotesk-text", "neue-haas-grotesk-display", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Dark theme: set by the contrast toggle, or by the system when no choice is saved. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f2f2f2;
  --muted: #9a9a9a;          /* 6.71:1 on #111 */
  --cycle-idle: #4d4d4d;
  --paper: #111111;
  --line: #f2f2f2;
  --stroke: #636363;         /* 3.14:1 on #111 */
  --count-on-active: #5a5a5a;
  --placeholder: #222;
  --divider-soft: #2a2a2a;
  --backdrop: rgba(0, 0, 0, .6);
  --shadow-panel: rgba(0, 0, 0, .5);
  --shadow-thumb: rgba(0, 0, 0, .5);
  --logo-filter: invert(1);
}

body { transition: background-color .3s ease, color .3s ease; }
@media (prefers-reduced-motion: reduce) { body { transition: none; } }

.nav__end { display: flex; align-items: center; gap: 32px; }

/* Theme switch: a small outlined pill, same language as the filter pills. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px 0 9px;
  border: 1px solid var(--stroke);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.theme-toggle svg { flex: none; width: 16px; height: 16px; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
:root[data-theme="dark"] .theme-toggle svg { transform: rotate(180deg); }
.theme-toggle:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.theme-toggle:active { transform: scale(.97); }
.theme-toggle:focus { outline: none; }
.using-keyboard .theme-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (max-width: 600px) {
  .nav__end { gap: 20px; }
  .theme-toggle { padding: 0 8px; }
  .theme-toggle__label { display: none; }
}

.nav__logo img, .footer__marks img { filter: var(--logo-filter); }


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

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 45px; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.125;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

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

/* ---------- Nav ---------- */

/* Sticky: runs full width so content never shows in the gutters,
   with the divider line drawn inside the gutters. */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 45px;
  padding: 0 var(--gutter);
  background:
    linear-gradient(var(--line), var(--line)) no-repeat center bottom / calc(100% - var(--gutter) * 2) 1px,
    var(--paper);
  transition: background-color .3s ease;
}

.nav__logo img { width: 44px; height: 25px; }

.nav__links {
  display: flex;
  gap: 48px;
  margin: 0; padding: 0; list-style: none;
  font-size: 20px;
  line-height: 1;
  letter-spacing: -0.03em;
}

.nav__links { align-items: center; }
.nav__links a:hover { color: var(--muted); }
.nav__cta {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  -webkit-appearance: none;
  appearance: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  white-space: nowrap;
  cursor: pointer;
}
.nav__cta:hover { color: var(--muted); }
.nav__cta:focus { outline: none; }
.using-keyboard .nav__cta:focus-visible { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Hero ---------- */

/* Fills the first screen (minus the 45px nav), line centred in it. */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 45px);
  min-height: calc(100svh - 45px);
  margin: 0 var(--gutter);
  padding: 64px 0;
  border-bottom: 1px solid var(--line);
  text-align: center;
}

.hero h1,
.hero__line {
  max-width: 760px;
  margin: 0;
  font-size: 54px;
  font-weight: 400;
  line-height: 60px;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

/* The second statement is a paragraph, not a headline, so it runs 40% smaller
   than the h1 it follows. (17 Sep 2026.) */
.hero__line { font-size: 32px; line-height: 36px; }
/* The closing sentence stands on its own, a line's worth of space below the
   rest, so it lands as the point rather than as the end of a paragraph. */
.hero__line--last { margin-top: 36px; }

/* Portrait under the opening quote. Scrolling down draws on the face and it
   stays drawn on; scrolling up rubs it out. Both images are already circular
   with transparent corners, so they sit on either theme.
   The plain photo stays fully opaque as the base and only the doodled copy
   fades over it, so the scribbles appear and vanish while the face never
   flickers. Cross-fading both would let the page show through at the midpoint. */
.hero__portrait {
  position: relative;
  display: block;
  width: 132px;
  height: 132px;
  margin-top: 40px;
}
.hero__face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero__face--doodle { opacity: 0; transition: opacity .25s ease; }
.hero__portrait.is-doodle .hero__face--doodle { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero__face--doodle { transition: none; }
}

/* ---------- Tabs ---------- */

.tabs {
  display: flex;
  gap: 8px;
  margin: 40px var(--gutter) 0;
  font-size: 24px;
  line-height: 31px;
  letter-spacing: -0.03em;
}

.tabs a { color: var(--muted); padding-bottom: 2px; }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current="page"] { color: var(--ink); border-bottom: 1px solid var(--ink); }

/* ---------- Project rows ---------- */

.work { margin-top: 170px; }

.project {
  margin: 0 var(--gutter);
  padding: 0 calc(var(--inset) - var(--gutter)) 58px;
}

.project + .project {
  border-top: 1px solid var(--line);
  padding-top: 45px;
}

/* Image strip: loops sideways, like the Figma build. */
.strip {
  overflow: hidden;
}

.strip__track {
  display: flex;
  gap: var(--gap);
  width: max-content;
  animation: strip 60s linear infinite;
}

.project:nth-child(even) .strip__track { animation-duration: 70s; }
.strip:hover .strip__track { animation-play-state: paused; }

@keyframes strip {
  to { transform: translateX(calc(-50% - var(--gap) / 2)); }
}

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

.tile {
  flex: none;
  width: clamp(240px, 43.125vw, 720px);
  aspect-ratio: 552 / 445;
  object-fit: cover;
  border-radius: 12px;
  background: #000;
}

/* "How might we..." tiles are live text, not pictures of text. */
.tile--question {
  margin: 0;
  padding: 26px 24px;
  color: #fff;
  font-size: clamp(18px, 2.35vw, 40px);
  line-height: 1.4;
  letter-spacing: -0.02em;
}

.project__meta {
  display: grid;
  grid-template-columns: 68px 1fr minmax(0, 314px);
  gap: 0 var(--gap);
  margin-top: 16px;
}

.project__label { color: var(--muted); }

.project__title { margin: 0; font-size: 16px; font-weight: 700; line-height: 18px; }
.project__client { margin: 0; color: var(--muted); font-weight: 400; }

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 0; padding: 0; list-style: none;
}

/* Tags match the inactive filter pill. */
.tags li {
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  border: 1px solid var(--stroke);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.project__summary { margin: 0; }

.project__link {
  display: inline-block;
  margin-top: 30px;
  color: var(--muted);
}

.project__link span { display: inline-block; transition: transform .2s ease; }
.project__link:hover { color: var(--ink); }
.project__link:hover span { transform: translateX(4px); }

/* Whole row is clickable, but the visible link stays the real one. */
.project { position: relative; }
.project__link::after { content: ""; position: absolute; inset: 0; }

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

.footer {
  display: grid;
  grid-template-columns: 1fr minmax(0, 527px) 220px;
  gap: 0 var(--gap);
  margin-top: 0;
  padding: 30px var(--gutter) 100px;
  border-top: 1px solid var(--line);
  font-size: 20px;
  line-height: 1;
  letter-spacing: -0.03em;
}

.footer__marks img { width: 121px; height: 59px; }

.footer h2 {
  margin: 0 0 30px;
  font-size: inherit;
  font-weight: 400;
}

.footer p { margin: 0 0 10px; }
.footer__note { max-width: 360px; color: var(--muted); font-size: 16px; line-height: 1.3; letter-spacing: -0.01em; }
.footer__note span { display: block; color: var(--ink); }
.footer section + section { margin-top: 52px; }
.footer__col--right { padding-right: 20px; }
.footer a { text-decoration: underline; text-underline-offset: 3px; }
.footer a[href^="tel"], .footer a[href^="mailto"] { text-decoration: none; }

/* ---------- Tablet (800) ---------- */

@media (max-width: 1024px) {
  .hero h1, .hero__line { max-width: 640px; }
  .tile { width: 56vw; }
  .project__meta { grid-template-columns: 52px 1fr minmax(0, 290px); }
  .footer { grid-template-columns: 1fr 1fr; }
  .footer__marks { grid-column: 1 / -1; margin-bottom: 40px; }
}

/* ---------- Mobile (375) ---------- */

@media (max-width: 600px) {
  .nav__links { gap: 24px; font-size: 18px; }

  .hero h1, .hero__line { font-size: 34px; line-height: 39px; letter-spacing: -0.035em; }
  .hero__line { font-size: 20px; line-height: 23px; }
  .hero__line--last { margin-top: 23px; }
  .hero__portrait { width: 96px; height: 96px; margin-top: 28px; }
  .nav__links { gap: 16px; font-size: 16px; }

  .tabs { font-size: 20px; line-height: 26px; }
  .work { margin-top: 32px; }

  .project { padding-bottom: 44px; }
  .tile { width: 72vw; }

  .project__meta { grid-template-columns: 48px 1fr; }
  .project__meta > div:last-child { grid-column: 1 / -1; }
  .project__summary { margin-top: 30px; }

  .footer { grid-template-columns: 1fr; gap: 40px; }
  .footer__marks { margin-bottom: 0; }
}

/* =========================================================
   Grid homepage (v2): one image per project, filter by tag
   ========================================================= */

.filters {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  margin: 40px var(--gutter) 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.filters::-webkit-scrollbar { display: none; }
.filters li { flex: none; }

/* Pill filters. Inactive stroke (--stroke) is the lightest grey that meets
   WCAG 1.4.11 (3:1) against white. */
.filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 10px 16px;
  border: 1px solid var(--stroke);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.filter:hover { border-color: var(--ink); }
.filter[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.filter:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.filter__count { color: var(--muted); font-weight: 400; }
.filter[aria-pressed="true"] .filter__count { color: var(--count-on-active); }

.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 64px var(--gap);
  margin: 48px var(--gutter) 96px;
  padding: 0;
  list-style: none;
}

.grid, .grid li, .tags, .tags li { list-style: none; }
.grid li::marker, .tags li::marker { content: none; }

.card { position: relative; display: flex; flex-direction: column; }
.card[hidden] { display: none; }

.card__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  background: var(--placeholder);
  transition: opacity .2s ease;
}

.card:hover .card__img { opacity: .9; }

/* A card whose thumbnail is a video loop instead of a still. Recordings keep
   their own shape, sitting centred on the colour of the site they came from
   rather than being cropped to a landscape frame, in both themes. */
.card__media {
  position: relative;
  overflow: hidden;
  background: var(--media-bg, var(--placeholder));
}
.card__media--threshold { --media-bg: var(--threshold-paper); }
.card__media--afterpay  { --media-bg: var(--afterpay-ink); }
.card__video {
  position: absolute;
  inset: 0;
  margin: auto;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
}
/* Stands a portrait recording slightly taller than the card, so its top and
   bottom run just off the frame. Filling the card's width instead would crop
   away most of the screen and enlarge what was left until it looked soft. */
.card__video--fill {
  height: 110%;
  max-height: none;
  border-radius: 0;
}

.card__title { margin: 16px 0 0; font-size: 20px; font-weight: 400; line-height: 24px; letter-spacing: 0; }
.card__client { margin: 2px 0 0; color: var(--muted); font-size: 14px; line-height: 18px; font-weight: 400; }
.card__summary { margin: 12px 0 0; font-size: 14px; line-height: 20px; }
.card .tags { margin-top: 10px; gap: 4px; }

.card__link { display: inline-flex; align-items: center; gap: 2px; margin-top: 12px; color: var(--muted); font-size: 14px; align-self: flex-start; }
.card__link:hover { color: var(--ink); }
.card__link::after { content: ""; position: absolute; inset: 0; }

.grid__empty { margin: 48px var(--gutter); color: var(--muted); }

@media (max-width: 1024px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px var(--gap); }
}

@media (max-width: 800px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .filters { margin-right: 0; padding-right: var(--gutter); }
  .grid { grid-template-columns: 1fr; gap: 48px; margin-top: 32px; }
}


/* =========================================================
   compvis: "Case studies across phases". Hovering or tapping a stage slides its
   case study summary to the middle of the column at full opacity.
   Clicking the middle card, or "Full project", opens that case study page.
   ========================================================= */

/* Two columns: heading and cycle on the left, case study window on the right.
   The window runs the full height of the section, touching both dividers. */
.compvis {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  margin: 0 var(--gutter);
  border-bottom: 1px solid var(--line);
}

.compvis__head {
  grid-column: 1;
  grid-row: 1;
  padding-top: 64px;
}
.compvis__intro {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.3;
}
.compvis__title {
  margin: 0;
  font-size: 24px;
  font-weight: 400;
  line-height: 31px;
  letter-spacing: -0.02em;
}

.compvis__body { display: contents; }

/* Plain vertical list of the three competencies, in the same order as the
   case studies beside it. (Replaced the Figma cycle diagram on 15 Sep 2026.) */
.compvis__diagram {
  grid-column: 1;
  grid-row: 2;
  align-self: center;
  justify-self: center;
  margin: 40px 0 64px;
}
.compvis__stages {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.compvis__trigger {
  margin: 0;
  padding: 2px 0;
  border: 0;
  background: none;
  -webkit-appearance: none;
  appearance: none;
  color: var(--cycle-idle);
  font: inherit;
  font-size: 24px;
  line-height: 31px;
  letter-spacing: -0.02em;
  white-space: nowrap;
  cursor: pointer;
  transition: color .25s ease;
}
.compvis__stage.is-active .compvis__trigger,
.compvis__trigger:hover { color: var(--ink); }
.compvis__trigger:focus { outline: none; }
.using-keyboard .compvis__trigger:focus-visible { text-decoration: underline; text-underline-offset: 4px; }

/* Case study column: a fixed window, the active study slides to its middle. */
.compvis__viewport {
  grid-column: 2;
  grid-row: 1 / 3;
  position: relative;
  --window: 660px;
  --tile: 260px;
  height: var(--window);
  overflow-y: auto;
  overscroll-behavior-y: auto;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
}
.compvis__viewport::-webkit-scrollbar { display: none; }
.compvis__viewport:focus { outline: none; }
.using-keyboard .compvis__viewport:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.compvis__cards {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 69px;
  /* Room above the first and below the last study so each can reach the middle. */
  padding: calc((var(--window) - var(--tile)) / 2) 0;
}
.compvis__card {
  display: flex;
  align-items: flex-start;
  gap: 35px;
  opacity: .5;
  cursor: pointer;
  scroll-snap-align: center;
  transition: opacity .4s ease;
}
/* A dimmed study scrolls itself to the middle when clicked; the active one
   opens, so the whole card stays a pointer either way. */
.compvis__card.is-active { opacity: 1; }
.compvis__img {
  flex: none;
  width: 260px;
  height: 260px;
  border-radius: 12px;
  object-fit: cover;
  background: var(--placeholder);
}
/* Square frame holding the project's own thumbnail, the same picture that
   fronts it in All work, cropped to the square from its middle. */
.compvis__img--shot { overflow: hidden; }
.compvis__img--shot img { width: 100%; height: 100%; object-fit: cover; }
/* Simple icon tiles: outlined square, one Material Symbol (weight 200) per project */
.compvis__img--icon {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border: 1px solid var(--stroke);
  background: none;
}
.compvis__img--icon svg { width: 38%; height: 38%; fill: currentColor; }
.compvis__info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  min-height: 260px;
  max-width: 340px;
}
.compvis__skills { gap: 4px; margin-top: 2px; }
.compvis__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.compvis__text p { margin: 0; }
/* Hairline tag naming the competency a study belongs to. */
.compvis__text .compvis__pillar {
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0;
}
.compvis__name { margin: 0; color: var(--ink); font-size: 14px; font-weight: 400; line-height: 1.25; }
.compvis__more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  -webkit-appearance: none;
  appearance: none;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: color .2s ease;
}
.compvis__more .icon--arrow { width: 14px; height: 14px; }
.compvis__more:hover { color: var(--ink); }
.compvis__more:focus { outline: none; }
.using-keyboard .compvis__more:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.compvis__card:not(.is-active) .compvis__more { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .compvis__card { transition: none; }
}
/* Without JavaScript every case study shows at full strength. */
.compvis:not(.is-enhanced) .compvis__viewport { height: auto; }
.compvis:not(.is-enhanced) .compvis__cards { padding: 32px 0; }
.compvis:not(.is-enhanced) .compvis__card { opacity: 1; }

@media (max-width: 900px) {
  .compvis { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; }
  .compvis__diagram { grid-row: 2; margin: 32px 0; justify-self: start; }
  .compvis__stages { flex-direction: row; gap: 24px; }
  /* Case studies become a sideways swipe, each snapping to the centre. */
  .compvis__viewport {
    --card: min(78vw, 340px);
    grid-column: 1;
    grid-row: 3;
    height: auto;
    margin: 0 calc(var(--gutter) * -1);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    /* Snapping aligns to the scrollport, so hold it in from the page edge to
       keep each study in line with the heading above it. */
    scroll-padding-left: var(--gutter);
  }
  .compvis__cards {
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
    width: max-content;
    /* Each study starts at the page gutter, in line with the heading, the
       competencies and the All work section below. */
    padding: 0 var(--gutter) 48px;
  }
  .compvis__card { flex: 0 0 var(--card); flex-direction: column; gap: 16px; scroll-snap-align: start; }
  .compvis__img { width: 100%; height: auto; aspect-ratio: 1; }
  .compvis__info { min-height: 0; max-width: none; gap: 20px; }
}

/* =========================================================
   Icons: Material Symbols Outlined (weight 400), inlined as SVG.
   Every link that points somewhere else carries the arrow_outward icon.
   ========================================================= */

.icon { display: inline-block; width: 1em; height: 1em; fill: currentColor; flex: none; vertical-align: -0.125em; }
.icon--arrow { width: 1.1em; height: 1.1em; margin-left: 2px; transition: transform .2s ease; }
a:hover > .icon--arrow, button:hover > .icon--arrow { transform: translate(2px, -2px); }
.link { display: inline-flex; align-items: center; gap: 2px; }
.link:hover { color: var(--muted); }

/* =========================================================
   AI in practice: an accordion holding a process diagram,
   the workflows Ro has built, case study links and what an employer gets.
   ========================================================= */

.ai {
  margin: 0 var(--gutter);
  padding: 64px 0 48px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.ai__title { margin: 0; font-size: 24px; font-weight: 400; line-height: 31px; letter-spacing: -0.02em; }
.ai__toggle {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  -webkit-appearance: none;
  appearance: none;
  color: var(--ink);
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
}
/* The plus / minus sits centred against the heading and intro together. */
.ai__header { position: relative; padding-right: 64px; }
.ai__sign {
  position: absolute;
  top: 50%;
  right: 0;
  display: inline-flex;
  font-size: 32px;
  transform: translateY(-50%);
}
.ai__sign .icon { width: 1em; height: 1em; vertical-align: 0; }
.ai__toggle[aria-expanded="true"] .icon--add,
.ai__toggle[aria-expanded="false"] .icon--remove { display: none; }
.ai:not(.is-enhanced) .ai__sign { display: none; }
.ai__toggle:focus { outline: none; }
.using-keyboard .ai__toggle:focus-visible span:first-child { text-decoration: underline; text-underline-offset: 5px; }
.ai__intro { max-width: 640px; margin: 8px 0 0; color: var(--muted); font-size: 16px; line-height: 1.3; }

/* Open and close by animating the row height. */
.ai.is-enhanced .ai__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s cubic-bezier(.22, .75, .2, 1); }
.ai.is-enhanced.is-open .ai__panel { grid-template-rows: 1fr; }
.ai__panel-inner { min-height: 0; overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .ai.is-enhanced .ai__panel { transition: none; } }

.ai__subtitle { margin: 0; color: var(--muted); font-size: 14px; font-weight: 400; line-height: 1.25; }

/* Workflows grid */
.ai__toolkit { margin-top: 56px; }
.ai__tools {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
.ai__tools li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  border: 1px solid var(--divider-soft);
  border-radius: 12px;
}
.ai__tools li::marker, .ai__links li::marker { content: none; }
.ai__tool-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: var(--divider-soft);
  font-size: 22px;
}
.ai__tool-icon .icon { vertical-align: 0; }
.ai__tools h4 { margin: 0; font-size: 15px; font-weight: 400; line-height: 1.3; }
.ai__tools p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.35; }
.ai__tool-src { margin-top: auto; padding-top: 8px; color: var(--muted); font-size: 12px; }

/* Case study links */
.ai__examples { margin-top: 64px; }
.ai__links { margin: 12px 0 16px; padding: 0; list-style: none; border-top: 1px solid var(--divider-soft); }
.ai__links li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--divider-soft);
}
.ai__links a { font-size: 20px; line-height: 1.2; letter-spacing: -0.01em; }
.ai__links li > span { color: var(--muted); font-size: 14px; }


@media (max-width: 900px) {
  .ai__tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .ai { padding: 40px 0; }
  .ai__title { font-size: 20px; line-height: 26px; }
  .ai__sign { font-size: 28px; }
  .ai__tools { grid-template-columns: minmax(0, 1fr); }
  .ai__links a { font-size: 18px; }
}

/* All work heading, same treatment as the other section headings */
.work__head { margin: 0 var(--gutter); padding-top: 64px; }
.work__title { margin: 0; font-size: 24px; font-weight: 400; line-height: 31px; letter-spacing: -0.02em; }
.work__intro { max-width: 640px; margin: 8px 0 0; color: var(--muted); font-size: 16px; line-height: 1.3; }
@media (max-width: 600px) {
  .work__head { padding-top: 40px; }
  .work__title { font-size: 20px; line-height: 26px; }
}

/* =========================================================
   Work with me: intake form in a panel from the right.
   Sends by opening WhatsApp (wa.me) or the visitor's email app, prefilled.
   ========================================================= */

.intake {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(50vw, 720px);
  min-width: 520px;
  max-width: 100vw;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--paper);
  color: var(--ink);
  box-shadow: -24px 0 60px var(--shadow-panel);
  transform: translateX(100%);
  transition: transform .6s cubic-bezier(.22, .75, .2, 1);
}
.intake.is-open { transform: none; }
.intake:focus, .intake:focus-visible { outline: none; }
.intake::backdrop { background: rgba(0, 0, 0, .35); opacity: 0; transition: opacity .5s ease; }
.intake.is-open::backdrop { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .intake, .intake::backdrop { transition: none; } }

.intake__inner { height: 100%; overflow-y: auto; padding: 32px 40px 48px; }
.intake__close {
  position: sticky;
  top: 0;
  float: right;
  margin: -12px -8px 0 0;
  padding: 0 8px;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
}
.intake__close:focus { outline: none; }
.using-keyboard .intake__close:focus-visible { text-decoration: underline; }

.intake__eyebrow { margin: 0; color: var(--muted); font-size: 14px; }
.intake__title { margin: 8px 0 0; font-size: 32px; font-weight: 400; line-height: 1.15; letter-spacing: -0.02em; }
.intake__lede { max-width: 520px; margin: 12px 0 0; color: var(--muted); font-size: 16px; line-height: 1.35; }

.intake__form { display: flex; flex-direction: column; gap: 20px; margin-top: 36px; }
.intake__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.field__label { padding: 0; color: var(--ink); font-size: 14px; }
legend.field__label { margin-bottom: 8px; }
.field__opt { color: var(--muted); }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--stroke);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  line-height: 1.3;
}
.field textarea { resize: vertical; min-height: 120px; }
.field select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); }
.field textarea::placeholder { color: var(--muted); }

.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; cursor: pointer; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice span {
  display: inline-flex;
  padding: 9px 14px;
  border: 1px solid var(--stroke);
  border-radius: 999px;
  font-size: 14px;
  line-height: 1;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.choice input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.choice input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }

.intake__error { margin: 0; color: var(--ink); font-size: 14px; }
.intake__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.intake__send {
  padding: 14px 22px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.intake__send--alt { background: var(--paper); color: var(--ink); }
.intake__send:hover { opacity: .85; }
.intake__note { margin: 0; color: var(--muted); font-size: 12px; }
.intake__done { padding-top: 48px; }
.intake__done:focus { outline: none; }
.intake__done .intake__send { margin-top: 28px; }

@media (max-width: 800px) {
  .intake { width: 100vw; min-width: 0; }
}
@media (max-width: 600px) {
  .intake__inner { padding: 24px var(--gutter) 40px; }
  .intake__title { font-size: 26px; }
  .intake__row { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================
   Companies (styled after the live About page) and Beyond work
   ========================================================= */

.section-title { margin: 0; font-size: 24px; font-weight: 400; line-height: 31px; letter-spacing: -0.02em; }
.section-intro { max-width: 420px; margin: 8px 0 0; color: var(--muted); font-size: 16px; line-height: 1.3; }

.companies,
.beyond {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 40px var(--gap);
  margin: 0 var(--gutter);
  padding: 64px 0 80px;
  border-top: 1px solid var(--line);
}
/* Companies: heading on the left, roles in the right-hand column,
   each role in three columns: years, company and role, description. */
/* Same tracks as Beyond work and the footer, so the roles start in line with the photo. */
.companies { grid-template-columns: 1fr minmax(0, 527px) 220px; }
.companies__list { grid-column: 2 / 4; margin: 0; padding: 0; list-style: none; }
.companies__row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) minmax(0, 36ch);
  gap: var(--gap);
  padding: 20px 0 24px;
  border-top: 1px solid var(--stroke);
}
.companies__row:first-child { padding-top: 4px; border-top: 0; }
.companies__row::marker { content: none; }
.companies__years { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.25; }
.companies__name { margin: 0; font-size: 16px; font-weight: 400; line-height: 1.25; letter-spacing: -0.01em; }
.companies__name span { display: block; color: var(--muted); }
.companies__desc { max-width: 36ch; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }

/* Same column tracks as the footer so the photo lines up with the coordinates. */
.beyond { align-items: start; grid-template-columns: 1fr minmax(0, 527px) 220px; }
.beyond__copy { max-width: 420px; margin: 20px 0 0; color: var(--muted); font-size: 16px; line-height: 1.35; }
.beyond__img { width: min(100%, 372px); aspect-ratio: 1; height: auto; object-fit: cover; border-radius: 12px; grid-column: 2; justify-self: start; }

.footer__cta { font-size: inherit; letter-spacing: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Scroll reveal, matching the Figma site: fade up, 0.45s out-cubic after 0.15s, reversing on exit. */
.can-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s cubic-bezier(.215, .61, .355, 1), transform .6s cubic-bezier(.215, .61, .355, 1);
}
.can-reveal [data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition-duration: .45s;
  transition-delay: .15s;
}

@media (max-width: 1024px) {
  .beyond, .companies { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .companies__list { grid-column: 2; }
  .companies__row { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .companies__desc { grid-column: 2; }
}
@media (max-width: 800px) {
  .beyond { grid-template-columns: minmax(0, 1fr); }
  .beyond__img { justify-self: start; }
  .companies { grid-template-columns: minmax(0, 1fr); }
  .companies__list { grid-column: 1; }
  .companies__row { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .companies__desc { grid-column: 2; }
  .beyond__img { grid-column: 1; }
}
@media (max-width: 600px) {
  .companies, .beyond { padding: 40px 0 56px; }
  .section-title { font-size: 20px; line-height: 26px; }
  .companies__row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .companies__desc { grid-column: 1; }
}

/* =========================================================
   Case study pages (project*.html). Same column tracks as Companies,
   Beyond work and the footer: label on the left, content from column 2.
   ========================================================= */

.case__head,
.case__row,
.case__next {
  display: grid;
  grid-template-columns: 1fr minmax(0, 527px) 220px;
  gap: 24px var(--gap);
  margin: 0 var(--gutter);
}
.case__head { padding: 96px 0 56px; }
.case__head > * { grid-column: 1 / -1; }
.case__eyebrow { margin: 0; color: var(--muted); font-size: 14px; }
.case__title { max-width: 900px; margin: 0; font-size: 54px; font-weight: 400; line-height: 58px; letter-spacing: -0.03em; text-wrap: balance; }
.case__summary { max-width: 640px; margin: 0; color: var(--muted); font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; }

.case__facts {
  display: grid;
  grid-template-columns: 1fr minmax(0, 527px) 220px;
  gap: 24px var(--gap);
  margin: 24px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.case__facts > div:nth-child(1) { grid-column: 1; }
.case__facts > div:nth-child(2) { grid-column: 2; }
.case__facts > div:nth-child(3) { grid-column: 1 / -1; }
.case__facts dt { color: var(--muted); font-size: 14px; }
.case__facts dd { max-width: 420px; margin: 6px 0 0; font-size: 16px; line-height: 1.35; }
.case__facts .tags { margin-top: 0; }

.case__hero {
  display: block;
  width: auto;
  max-width: calc(100% - var(--gutter) * 2);
  height: auto;
  max-height: 88vh;
  margin: 0 auto;
  object-fit: contain;
  border-radius: 12px;
  background: var(--placeholder);
}

.case__row { padding: 64px 0; border-bottom: 1px solid var(--line); }
.case__row + .case__row, .case__hero + .case__row { border-top: 0; }
.case__row > .section-title { grid-column: 1; }
.case__row > :not(.section-title) { grid-column: 2 / -1; }
.case__lead { max-width: 640px; margin: 0; color: var(--muted); font-size: 24px; line-height: 1.3; letter-spacing: -0.02em; }
.case__lead--ink { color: var(--ink); }
.case__body { max-width: 560px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.4; }

.case__steps { max-width: 640px; margin: 0; padding: 0; list-style: none; }
.case__steps li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid var(--stroke);
  font-size: 16px;
  line-height: 1.4;
}
.case__steps li:first-child { padding-top: 0; border-top: 0; }
.case__steps li::marker { content: none; }
.case__num { color: var(--muted); font-size: 14px; line-height: 1.6; }

.case__gallery { display: flex; flex-direction: column; gap: 40px; }
.case__figure { margin: 0; }
.case__figure img { display: block; width: 100%; height: auto; object-fit: contain; border-radius: 12px; background: var(--placeholder); }
.case__figure figcaption { max-width: 480px; margin-top: 10px; color: var(--muted); font-size: 14px; line-height: 1.35; }

/* Journey flows: outlined boxes joined by arrows. Full page width on desktop
   (the steps need the room), caption back on the content column. */
.case__row > .case__flow { grid-column: 1 / -1; }
.case__flow { display: grid; grid-template-columns: subgrid; margin: 16px 0; }
.case__flow figcaption { grid-column: 1 / -1; margin-top: 10px; color: var(--muted); font-size: 14px; line-height: 1.35; text-align: center; }
.flow {
  --arrow-gap: 40px;
  grid-column: 1 / -1;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 16px var(--arrow-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.case__flow--shots .flow { grid-template-rows: auto auto; }
.case__flow--shots .flow__step { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 16px; }
.flow__box {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 132px;
  height: 100%;
  box-sizing: border-box;
  padding: 16px;
  border: 1px solid var(--stroke);
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.4;
}
.flow__text ul { margin: 6px 0 0; padding-left: 1.1em; }
.flow__text li + li { margin-top: 2px; }
.flow__arrow {
  position: absolute;
  top: 50%;
  left: calc(var(--arrow-gap) / -2);
  width: 20px;
  height: 20px;
  color: var(--muted);
  transform: translate(-50%, -50%);
}
.flow__shot { display: block; width: 100%; height: auto; border: 1px solid var(--stroke); border-radius: 8px; box-sizing: border-box; }

@media (max-width: 1024px) {
  .case__row > .case__flow { grid-column: 2; }
  .case__flow { display: block; }
  .flow { --arrow-gap: 40px; grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: var(--arrow-gap); }
  .case__flow--shots .flow__step { display: flex; flex-direction: column; gap: 12px; grid-row: auto; }
  .flow__box { min-height: 0; }
  .flow__arrow { top: calc(var(--arrow-gap) / -2); left: 50%; transform: translate(-50%, -50%) rotate(90deg); }
  .flow__shot { max-width: 320px; }
}
@media (max-width: 800px) {
  .case__row > .case__flow { grid-column: 1; }
}

.case__next { padding: 64px 0 96px; }
.case__next > * { grid-column: 1 / -1; }
.case__next-link { justify-self: start; font-size: 40px; line-height: 1.1; letter-spacing: -0.02em; }
.case__all { justify-self: start; color: var(--muted); font-size: 16px; }
.case__next-link:hover, .case__all:hover { color: var(--muted); }

@media (max-width: 1024px) {
  .case__head, .case__row, .case__next, .case__facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .case__row > :not(.section-title) { grid-column: 2; }
}
@media (max-width: 800px) {
  .case__row { grid-template-columns: minmax(0, 1fr); }
  .case__row > :not(.section-title), .case__row > .section-title { grid-column: 1; }
  .case__facts { grid-template-columns: minmax(0, 1fr); }
  .case__facts > div { grid-column: 1 !important; }
}
@media (max-width: 600px) {
  .case__head { padding: 48px 0 40px; }
  .case__title { font-size: 34px; line-height: 38px; }
  .case__summary { font-size: 18px; }
  .case__row { padding: 40px 0; gap: 16px; }
  .case__lead { font-size: 20px; }
  .case__next-link { font-size: 28px; }
}

@media (max-width: 600px) {
  .compvis__head { padding-top: 40px; }
  .compvis__title { font-size: 20px; line-height: 26px; }
  .compvis__stages { gap: 16px; }
  .compvis__trigger { font-size: 20px; line-height: 26px; }
}

/* ---------- Case study panel: slides in from the right, covers the right half ----------
   Opened from any project on the homepage. What fills it is the project page's
   own markup, fetched and dropped in, so there is one copy of each case study. */

/* Holding the page still behind the panel. The fixed body is what actually
   stops iOS scrolling the page underneath; the script puts the scroll
   position back when the panel closes. */
.has-drawer, .has-drawer body { overflow: hidden; }
.has-drawer body { position: fixed; left: 0; right: 0; width: 100%; }

.drawer { position: fixed; inset: 0; z-index: 100; }

.drawer__backdrop {
  position: absolute;
  inset: 0;
  background: var(--backdrop);
  opacity: 0;
  transition: opacity .5s ease;
  cursor: pointer;
}

.study {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(50vw, 960px);
  min-width: 560px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 32px 40px 64px;
  background: var(--paper);
  box-shadow: -24px 0 60px var(--shadow-panel);
  transform: translateX(100%);
  transition: transform .6s cubic-bezier(.22, .75, .2, 1);
}

.drawer.is-open .drawer__backdrop { opacity: 1; }
.drawer.is-open .study { transform: none; }
.drawer.is-closing .study { transition-duration: .45s; }
@media (prefers-reduced-motion: reduce) {
  .study, .drawer__backdrop { transition: none; }
}
.study:focus { outline: none; }

/* Content scrolls under the sticky close button, so it sits on its own patch
   of paper rather than on top of a sentence. */
.study__close {
  position: sticky;
  top: 0;
  z-index: 1;
  float: right;
  margin: -8px -12px 0 16px;
  padding: 4px 10px;
  border: 0;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
}
.study__close:hover { color: var(--muted); }
.study__close:focus { outline: none; }
.using-keyboard .study__close:focus-visible { color: var(--muted); text-decoration: underline; }

/* The page's three column tracks do not fit in half a screen, so every row
   stacks here: label first, then content. */
.study .case__head,
.study .case__row {
  display: block;
  margin: 0;
}
.study .case__head { padding: 0 0 32px; }
.study .case__title { margin-top: 12px; font-size: 34px; line-height: 38px; }
.study .case__summary { margin-top: 12px; font-size: 18px; }
.study .case__facts { display: block; margin-top: 28px; }
.study .case__facts > div + div { margin-top: 16px; }
.study .case__facts dd { max-width: none; }
.study .case__hero { max-width: 100%; max-height: none; }
.study .case__row { padding: 32px 0; }
.study .case__row > .section-title { margin-bottom: 16px; }
.study .case__lead { font-size: 20px; }
.study .case__flow { display: block; }
.study .flow {
  grid-auto-flow: row;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: none;
  gap: var(--arrow-gap);
}
.study .case__flow--shots .flow__step { display: flex; flex-direction: column; gap: 12px; grid-row: auto; }
/* Stacked steps would otherwise run the full width of the panel, putting a
   dozen words on a line. Capped near 46 characters, each line holds five to
   eight words, which is the length the rest of the site reads at. */
.study .flow { justify-items: center; }
.study .flow__step { width: 100%; max-width: 380px; }
.study .case__flow figcaption { text-align: center; }
/* Centred as a column, and centred inside each step too: the sentence, and
   the screen under it. */
.study .flow__box { min-height: 0; max-width: 380px; justify-content: center; text-align: center; }
.study .flow__shot { margin-inline: auto; }
.study .flow__arrow { top: calc(var(--arrow-gap) / -2); left: 50%; transform: translate(-50%, -50%) rotate(90deg); }
.study .flow__shot { max-width: 320px; margin-inline: auto; }
/* The way out to the full page, so a visitor can keep or share the link. */
.study__page { margin: 32px 0 0; font-size: 16px; }

@media (max-width: 800px) {
  .study { width: 100%; min-width: 0; padding: 24px 20px 56px; box-shadow: none; }
}
@media (max-width: 600px) {
  .study__close { font-size: 28px; }
  .study .case__title { font-size: 28px; line-height: 32px; }
}

.case__links { display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 16px 0 0; padding: 0; list-style: none; font-size: 16px; }
.case__gallery--trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px var(--gap); }
.case__gallery--pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px var(--gap); }
@media (max-width: 600px) {
  .case__gallery--trio,
  .case__gallery--pair { grid-template-columns: minmax(0, 1fr); }
}