/* Inter Tight, self-hosted (variable, Latin), the fallback for machines without Helvetica Neue */
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/inter-tight-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Codegent round 4: the studio, rebuilt. */

:root {
  --rasp: #AB2D62;
  --rasp-tint: #CF8EAA;
  --grey: #E5E5E5;
  --black: #000;
  --ink: #1E1E1E;
  --white: #fff;
  --muted: #4a4a4a;
  --blue: #0A9BE0;
  --red: #EE3B22;
  --yellow: #FFE900;
  --green: #5FAE74;
  --dgrey: #333;

  --font: "Helvetica Neue", Helvetica, "Inter Tight", Arial, sans-serif;
  --gutter: clamp(16px, 4vw, 56px);
  --max: 1360px;
  --space: clamp(72px, 10vw, 152px);
  /* The deck's fine diagonal-line texture */
  --tex: repeating-linear-gradient(-45deg, rgba(0,0,0,.13) 0 1px, rgba(255,255,255,0) 1px 3px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--black);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, figure, blockquote { margin: 0; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); position: relative; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 20; background: var(--white); color: var(--black); padding: 10px 14px; font-weight: 700; }
.skip:focus { top: 12px; }

/* ---------- Shared type ---------- */
.label { font-size: 14px; font-weight: 700; letter-spacing: .02em; color: var(--rasp); margin-bottom: 18px; }
.label--onDark { color: var(--rasp-tint); }
.label--onRasp { color: var(--white); }
.h2 {
  font-size: clamp(38px, 5.6vw, 84px);
  font-weight: 800;
  line-height: .96;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.body { font-size: clamp(17px, 1.45vw, 21px); line-height: 1.5; max-width: 34em; margin-top: 24px; }
.section-title { font-size: clamp(54px, 10.5vw, 168px); font-weight: 800; letter-spacing: -.055em; line-height: .86; text-wrap: balance; }
.more {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 28px;
  font-weight: 700; font-size: 16px; text-decoration: none;
  border-bottom: 3px solid currentColor; padding-bottom: 3px;
}
.more::after { content: ""; width: 14px; height: 3px; background: currentColor; }
.more:hover { color: var(--rasp); }
.more--onDark:hover { color: var(--rasp-tint); }

/* The C mark, cropped into the top right corner as on the deck */
.cmark { position: absolute; pointer-events: none; z-index: 0; top: clamp(20px, 3vw, 44px); right: var(--gutter); width: clamp(72px, 12vw, 190px); height: auto; }
.cmark--dark { opacity: .28; width: clamp(64px, 9vw, 140px); }

/* ---------- The giant year device ---------- */
.year {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: end; gap: clamp(20px, 4vw, 64px);
}
.year__num {
  font-size: clamp(150px, 24vw, 360px);
  font-weight: 500;
  letter-spacing: -.065em;
  line-height: .74;
  margin-left: -.06em;
  font-variant-numeric: lining-nums;
}
.year__head { font-size: clamp(34px, 4.4vw, 66px); font-weight: 800; letter-spacing: -.045em; line-height: .98; text-wrap: balance; }
.year__line { font-size: clamp(18px, 1.7vw, 25px); line-height: 1.35; max-width: 27em; margin-top: 14px; text-wrap: pretty; }
.year__text { padding-bottom: .2em; }

/* ---------- Header ---------- */
.top { position: fixed; top: 0; left: 0; right: 0; z-index: 50; color: var(--white); background: var(--black); padding-top: env(safe-area-inset-top, 0px); }
:root { --top-h: 84px; }
[id] { scroll-margin-top: calc(var(--top-h) + 16px); }
.nav a[aria-current] { border-color: var(--rasp-tint); }
.top__in { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 24px; padding-bottom: 24px; }
.top__home { display: block; width: 34px; }
.top__home img { width: 100%; }
.nav { display: flex; gap: clamp(18px, 2.6vw, 38px); }
.nav a { text-decoration: none; font-weight: 700; font-size: 16px; letter-spacing: -.01em; padding: 6px 0; border-bottom: 2px solid transparent; }
.nav a:hover { border-color: var(--rasp-tint); }

/* ---------- 0. Cover ---------- */
.cover { background: var(--black); color: var(--white); padding: clamp(118px, 12vw, 176px) 0 clamp(40px, 5vw, 72px); }
.cover__mark img { width: 100%; height: auto; }
.cover__lede {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(24px, 5vw, 80px); align-items: end;
  margin-top: clamp(36px, 5vw, 80px);
}
.cover__statement { font-size: clamp(24px, 2.7vw, 42px); font-weight: 700; line-height: 1.1; letter-spacing: -.03em; max-width: 19em; text-wrap: balance; }
.cover__facts { display: grid; gap: 18px; }
.cover__facts li { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.4; color: #d6d6d6; border-top: 2px solid #3a3a3a; padding-top: 14px; }
.cover__facts b { display: block; color: var(--white); font-size: clamp(30px, 3.2vw, 50px); font-weight: 500; letter-spacing: -.05em; line-height: 1; margin-bottom: 6px; }
.contents { margin-top: clamp(48px, 6vw, 96px); }
.contents ol { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.contents a {
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
  height: 100%; min-height: 112px; padding: 14px 14px 16px;
  background: var(--grey); color: var(--black); text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.contents span { font-size: 14px; font-weight: 500; color: var(--muted); }
.contents b { font-size: clamp(17px, 1.4vw, 21px); letter-spacing: -.035em; line-height: 1.05; position: relative; padding-bottom: 12px; text-wrap: balance; }
.contents b::after { content: ""; position: absolute; left: 0; bottom: 0; width: 18px; height: 3px; background: currentColor; }
.contents a:hover, .contents a:focus-visible { background: var(--rasp); color: var(--white); }
.contents a:hover span, .contents a:focus-visible span { color: var(--white); }

/* ---------- 1. Three founders ---------- */
.hero { background: var(--rasp); color: var(--white); position: relative; padding: clamp(56px, 7vw, 112px) 0 clamp(56px, 7vw, 104px); overflow: hidden; }
.hero .wrap { z-index: 1; }
.kicker { font-size: clamp(15px, 1.3vw, 19px); font-weight: 700; margin-bottom: clamp(16px, 2vw, 28px); }
.hero__title { font-size: clamp(56px, 10.4vw, 168px); font-weight: 800; letter-spacing: -.055em; line-height: .88; max-width: 8.4em; text-wrap: balance; }
.founders { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 2vw, 28px); margin-top: clamp(40px, 5vw, 80px); }
.founder img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: var(--pos, 50% 35%); background: #8f2452; }
.founder__name { font-size: clamp(15px, 2.1vw, 32px); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; margin-top: clamp(10px, 1.4vw, 20px); }
.founder__role { font-size: clamp(13px, 1.1vw, 16px); line-height: 1.35; margin-top: 6px; }
.hero .year { margin-top: clamp(56px, 7vw, 112px); border-top: 2px solid rgba(255,255,255,.9); padding-top: clamp(24px, 3vw, 40px); }
.hero .year__text { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); align-items: end; }
.hero .year__line { margin-top: 0; }

/* ---------- Full-bleed photographs ---------- */
.bleed { background: var(--black); color: #cfcfcf; }
.bleed img { width: 100%; height: min(86svh, 66.6vw); object-fit: cover; object-position: 50% 45%; }
.bleed figcaption { font-size: 14px; padding-top: 12px; padding-bottom: 12px; }
.bleed--street img { object-position: 50% 60%; }

/* ---------- 3. Thirty staff ---------- */
.staff { background: var(--black); color: var(--white); position: relative; padding: clamp(48px, 6vw, 96px) 0 var(--space); overflow: hidden; }
.staff .wrap { z-index: 1; }
.staff__title { display: flex; align-items: baseline; gap: .18em; line-height: .8; font-weight: 400; }
.staff__num { color: var(--rasp-tint); font-size: clamp(130px, 19vw, 280px); letter-spacing: -.065em; font-weight: 500; font-variant-numeric: tabular-nums; min-width: 1.12em; }
.staff__word { font-size: clamp(40px, 5.6vw, 84px); letter-spacing: -.03em; }
.staff__lede { color: #d6d6d6; font-size: clamp(17px, 1.5vw, 21px); max-width: 32em; margin-top: clamp(20px, 2.4vw, 32px); }
.staff__grid { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); align-items: center; margin-top: clamp(48px, 6vw, 88px); }
.crowd { display: grid; grid-template-columns: repeat(10, 1fr); gap: clamp(14px, 2vw, 26px) clamp(8px, 1.4vw, 20px); }
.p { width: 100%; height: auto; aspect-ratio: 24 / 60; transition: opacity .25s ease; }
.p use { fill: currentColor; }
.p--dir { color: var(--rasp); }
.p--dev { color: var(--blue); }
.p--des { color: var(--red); }
.p--pm  { color: var(--yellow); }
.p--mkt { color: var(--green); }
.p--adm { color: var(--white); }
.legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
.legend__item { font-size: 15px; line-height: 1.2; color: var(--white); cursor: default; }
.legend__n { display: block; font-size: clamp(44px, 4.6vw, 68px); font-weight: 500; letter-spacing: -.05em; line-height: .9; margin-bottom: 6px; }
.legend__item[data-r="dir"] .legend__n { color: var(--rasp-tint); }
.legend__item[data-r="dev"] .legend__n { color: var(--blue); }
.legend__item[data-r="des"] .legend__n { color: var(--red); }
.legend__item[data-r="pm"]  .legend__n { color: var(--yellow); }
.legend__item[data-r="mkt"] .legend__n { color: var(--green); }
.legend__item[data-r="adm"] .legend__n { color: var(--white); }
.staff__grid:has(.legend__item[data-r="dir"]:hover) .p:not(.p--dir),
.staff__grid:has(.legend__item[data-r="dev"]:hover) .p:not(.p--dev),
.staff__grid:has(.legend__item[data-r="des"]:hover) .p:not(.p--des),
.staff__grid:has(.legend__item[data-r="pm"]:hover)  .p:not(.p--pm),
.staff__grid:has(.legend__item[data-r="mkt"]:hover) .p:not(.p--mkt),
.staff__grid:has(.legend__item[data-r="adm"]:hover) .p:not(.p--adm) { opacity: .16; }
.js .staff.is-armed .p:not(.p--dir) { opacity: 0; transform: translateY(18px) scale(.86); }
.js .staff.is-armed.is-in .p:not(.p--dir) {
  opacity: 1; transform: none;
  transition: opacity .4s ease, transform .5s cubic-bezier(.2,.9,.3,1.3);
  transition-delay: calc((var(--i) - 3) * 55ms);
}
.js .staff.is-armed.is-in .staff__grid:has(.legend__item:hover) .p { transition-delay: 0s; }

.faces { margin-top: clamp(56px, 7vw, 104px); border-top: 2px solid #3a3a3a; padding-top: clamp(24px, 3vw, 40px); }
.faces__grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: clamp(6px, .9vw, 12px); }
.faces__grid img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 30%; background: #222; filter: grayscale(1) contrast(1.05); transition: filter .3s ease; }
.faces__grid li:hover img { filter: none; }
.faces figcaption { font-size: 14px; color: #cfcfcf; margin-top: 14px; }

/* ---------- 4. The work: deck plates ---------- */
.work { background: var(--white); padding: var(--space) 0; }
.work__head .body { font-size: clamp(19px, 1.8vw, 26px); font-weight: 500; letter-spacing: -.01em; max-width: 30em; }

.plate { position: relative; }
.plate__stage { position: relative; overflow: hidden; container-type: inline-size; aspect-ratio: 4 / 3; background: var(--grey); }
.plate__img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.tex::after { content: ""; position: absolute; inset: 0; background: var(--tex); pointer-events: none; z-index: 1; }
.plabel { position: absolute; z-index: 2; top: 5cqi; right: 4cqi; width: 46cqi; font-size: clamp(19px, 5.6cqi, 60px); }
.label__box { background: rgba(229,229,229,.96); padding: .42em .6em .62em; }
.label__name { font-size: 1em; font-weight: 700; line-height: .98; letter-spacing: -.04em; color: var(--black); text-wrap: balance; }
.label__name::after { content: ""; display: block; width: .48em; height: max(3px, .065em); background: var(--black); margin-top: .34em; }
.tiles { display: flex; gap: .3em; margin-top: .3em; }
.tile { display: grid; place-items: center; width: 1.6em; height: 1.6em; background: rgba(229,229,229,.96); color: var(--black); }
.tile svg { width: 72%; height: 72%; fill: currentColor; }
.tile--app { font-size: .2em; width: 8em; height: 8em; font-weight: 800; letter-spacing: .02em; position: relative; z-index: 0; color: var(--white); }
.tile--app::after { content: ""; position: absolute; inset: 22%; background: var(--black); border-radius: .5em; z-index: -1; }
.tile--text { font-size: .4em; width: 4em; height: 4em; font-weight: 800; letter-spacing: -.02em; }
.tile--year { width: auto; padding: 0 .75em; font-weight: 500; }
.plate__note { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.4; margin-top: 14px; max-width: 30em; }
.plate__note strong { font-weight: 800; letter-spacing: -.01em; }

/* The hero plate: full bleed */
.plate--hero { margin-top: clamp(40px, 5vw, 80px); }
.plate--hero .plate__stage { aspect-ratio: 3 / 2; max-height: 88svh; width: 100%; background: var(--ink); }
.plate--hero .plabel { top: 4cqi; right: max(var(--gutter), calc((100cqi - var(--max)) / 2 + var(--gutter))); width: min(36cqi, 520px); font-size: clamp(30px, 4.4cqi, 64px); }
.spread { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 5vw, 80px); align-items: start; padding-top: clamp(28px, 4vw, 56px); }
.spread__kicker { font-size: 14px; font-weight: 700; color: var(--rasp); padding-bottom: 14px; margin-bottom: 18px; border-bottom: 3px solid var(--black); letter-spacing: .02em; }
.spread__big { font-size: clamp(88px, 11vw, 170px); font-weight: 500; letter-spacing: -.06em; line-height: .82; margin-left: -.04em; }
.spread__big span { display: block; font-size: clamp(20px, 1.9vw, 28px); font-weight: 700; letter-spacing: -.025em; line-height: 1.15; margin: .7em 0 0 .06em; max-width: 16em; }
.spread__line { font-size: clamp(17px, 1.45vw, 21px); line-height: 1.5; margin-top: 22px; max-width: 32em; }
.spread__media { max-width: 420px; justify-self: end; width: 100%; }
.spread__media img { width: 100%; }

.plates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 4vw, 64px) clamp(14px, 2vw, 28px); margin-top: clamp(40px, 5vw, 80px); }
.plate__stage--phone { background: var(--white); outline: 1px solid var(--grey); outline-offset: -1px; }
.plate__phone { position: absolute; left: 12%; top: 50%; transform: translateY(-50%); height: 92%; width: auto; max-width: none; }
.plabel--left { right: auto; left: 4cqi; }
.plate--hero .plabel--left { right: auto; left: max(var(--gutter), calc((100cqi - var(--max)) / 2 + var(--gutter))); }

.clients { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5; max-width: 40em; margin-top: clamp(48px, 6vw, 88px); }
.clients .more { margin-top: 0; margin-left: 10px; }

/* ---------- 5. Products ---------- */
.products { background: var(--grey); padding: var(--space) 0; }
.products__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: end; }
.products__head .body { margin-top: 0; }
.plates--products .plate__stage { background: var(--white); }
.plates--products .label__box, .plates--products .tile:not(.tile--app) { background: rgba(255,255,255,.96); }
.productlist { display: flex; flex-wrap: wrap; gap: 4px clamp(18px, 2.4vw, 40px); margin-top: clamp(56px, 7vw, 104px); border-top: 3px solid var(--black); padding-top: clamp(24px, 3vw, 40px); }
.productlist li { font-size: clamp(26px, 3.9vw, 60px); font-weight: 800; letter-spacing: -.045em; line-height: 1.12; white-space: nowrap; }
.productlist span { font-size: 13px; font-weight: 700; letter-spacing: 0; color: var(--muted); vertical-align: top; position: relative; top: .55em; margin-right: 6px; }
.productlist .is-sc { color: var(--rasp); }
.productlist__note { font-size: 16px; margin-top: 24px; max-width: 46em; }
.productlist__note .more { margin: 0 0 0 10px; }

/* ---------- 6. On the record ---------- */
.record { background: var(--rasp); color: var(--white); position: relative; padding: var(--space) 0; overflow: hidden; }
.record .wrap { z-index: 1; }
.record__list { margin-top: clamp(40px, 5vw, 80px); border-top: 2px solid rgba(255,255,255,.9); }
.record__item { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 7fr) minmax(0, 3fr); gap: clamp(16px, 3vw, 48px); align-items: start; padding: clamp(20px, 2.4vw, 32px) 0; border-bottom: 2px solid rgba(255,255,255,.35); }
.record__yr { font-size: clamp(40px, 5vw, 76px); font-weight: 500; letter-spacing: -.06em; line-height: .85; }
.record__name { font-size: clamp(22px, 2.5vw, 38px); font-weight: 800; letter-spacing: -.04em; line-height: 1.02; text-wrap: balance; }
.record__item p:not(.record__yr) { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.45; margin-top: 10px; max-width: 34em; }
.record__item a { font-weight: 700; white-space: nowrap; }
.record__item img { width: 100%; max-width: 360px; justify-self: end; box-shadow: 0 1px 0 rgba(0,0,0,.2); }

/* ---------- 7. Third Thursday ---------- */
.tt-intro { background: var(--black); color: var(--white); padding: var(--space) 0 clamp(40px, 5vw, 72px); border-top: 1px solid #222; }
.tt-intro .section-title { color: var(--white); }
.tt-intro__lede { font-size: clamp(19px, 2.1vw, 30px); line-height: 1.3; max-width: 25em; margin-top: clamp(24px, 3vw, 44px); color: #e6e6e6; }
.tt { background: var(--black); color: var(--white); padding: clamp(24px, 3vw, 48px) 0 var(--space); }
.tt__feature { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: end; }
.tt__player video { width: 100%; height: auto; aspect-ratio: 16 / 9; background: #111; }
.tt__player figcaption { font-size: 15px; color: #cfcfcf; margin-top: 12px; }
.tt__player strong { color: var(--white); }
.tt__quote p { font-size: clamp(26px, 2.9vw, 44px); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; text-wrap: balance; color: var(--rasp-tint); }
.tt__quote footer { font-size: 15px; line-height: 1.5; color: #cfcfcf; margin-top: 20px; max-width: 30em; }
.tt__quote a { color: var(--white); }
.tt__wall-title { font-size: 15px; font-weight: 700; margin: clamp(56px, 7vw, 104px) 0 18px; color: var(--white); }
.tt__hint { font-weight: 400; color: #bdbdbd; }
.tt__wall { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 22px 12px; }
.tt__end { grid-column: span 5; display: flex; align-items: flex-start; }
.tt__end p { font-size: clamp(22px, 2.4vw, 36px); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; color: var(--rasp-tint); max-width: 16em; padding-top: 4px; }
.tt__tile { display: block; text-decoration: none; }
.tt__tile img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; background: #222; filter: saturate(.85); transition: filter .2s ease, outline-color .2s ease; outline: 3px solid transparent; }
.tt__tile:hover img, .tt__tile:focus-visible img { filter: none; outline-color: var(--rasp-tint); }
.tt__tile:focus-visible { outline: none; }
.tt__when { display: block; font-size: 13px; font-weight: 700; margin-top: 8px; color: var(--white); }
.tt__cap { display: block; font-size: 13px; line-height: 1.35; color: #c4c4c4; margin-top: 2px; }

/* ---------- 8. Offices ---------- */
.rooms { background: var(--white); padding: var(--space) 0 clamp(56px, 7vw, 104px); }
.rooms__intro { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.4; margin-top: 16px; max-width: 34em; }
.rooms__grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(14px, 2vw, 28px); margin-top: clamp(40px, 5vw, 72px); align-items: end; }
.room img { width: 100%; object-fit: cover; background: var(--grey); }
.room--wide img { height: clamp(220px, 28vw, 400px); }
.room:not(.room--wide) img { aspect-ratio: 4 / 3; }
.room figcaption { font-size: 16px; line-height: 1.45; margin-top: 14px; max-width: 36em; min-height: 4.35em; }
.room figcaption strong, .bkk strong, .labs__grid strong, .moment strong { font-weight: 800; }

.opener { position: relative; padding: var(--space) 0; overflow: hidden; }
.opener .wrap { z-index: 1; }
.opener--rasp { background: var(--rasp); color: var(--white); }
.opener--grey { background: var(--grey); color: var(--black); }

.bkk { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) minmax(0, 4fr); gap: clamp(14px, 2vw, 28px); margin-top: clamp(48px, 6vw, 96px); align-items: start; }
.bkk img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.bkk figcaption { font-size: 15px; line-height: 1.45; margin-top: 12px; }

.merge { display: block; position: relative; width: 112px; height: 68px; margin-bottom: 22px; }
.merge i { position: absolute; top: 0; width: 68px; height: 68px; border-radius: 50%; }
.merge i:first-child { left: 0; background: var(--dgrey); }
.merge i:last-child { right: 0; background: var(--red); mix-blend-mode: multiply; }
.opener--grey .more { margin-top: 20px; }
.ost { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); gap: clamp(14px, 2vw, 28px); margin-top: clamp(48px, 6vw, 96px); align-items: end; }
.ost img { width: 100%; object-fit: cover; }
.ost__sign img { aspect-ratio: 3 / 4; }
.ost__floor img { aspect-ratio: 3 / 2; }
.ost figcaption { font-size: 15px; margin-top: 12px; color: #333; }

/* ---------- 9. Bylines ---------- */
.bylines { background: var(--white); padding: var(--space) 0; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr); gap: clamp(36px, 6vw, 104px); align-items: start; }
.names { font-size: clamp(21px, 2.3vw, 36px); font-weight: 800; letter-spacing: -.035em; line-height: 1.12; text-wrap: pretty; }
.names span { white-space: nowrap; margin-right: .32em; }
.names .f { color: var(--rasp); }
.names sup { font-size: .38em; font-weight: 700; letter-spacing: 0; color: var(--muted); vertical-align: top; position: relative; top: .25em; margin-left: .14em; }
.names .f sup { color: var(--rasp); }

/* ---------- 10. Culture ---------- */
.culture { background: var(--grey); position: relative; padding: var(--space) 0; overflow: hidden; }
.culture .h2 { max-width: 13em; }
.culture__by { margin-top: 16px; font-size: 16px; color: var(--muted); }
.moments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: dense; gap: clamp(28px, 3vw, 44px) clamp(14px, 2vw, 28px); margin-top: clamp(40px, 5vw, 80px); }
.moment img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: var(--pos, 50% 30%); background: #d4d4d4; }
.moment--tall { grid-row: span 2; display: flex; flex-direction: column; }
.moment--tall img { aspect-ratio: auto; flex: 1; min-height: 280px; }
.moment > p { font-size: 15px; line-height: 1.4; margin-top: 12px; max-width: 30em; }
.moment--type { padding: clamp(22px, 2.4vw, 36px); display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.moment--type > p { margin-top: 0; }
.moment__big { font-size: clamp(64px, 8vw, 128px) !important; font-weight: 500; letter-spacing: -.06em; line-height: .8; }
.moment--black .moment__big { font-size: clamp(40px, 4.6vw, 70px) !important; font-weight: 800; letter-spacing: -.045em; line-height: .95; }
.moment--rasp { background: var(--rasp); color: var(--white); }
.moment--black { background: var(--black); color: var(--white); }
.crew { margin-top: clamp(56px, 7vw, 104px); display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(14px, 2vw, 28px); align-items: end; }
.crew__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(6px, 1vw, 12px); }
.crew__grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.crew figcaption { font-size: 15px; line-height: 1.45; max-width: 22em; }

/* ---------- 11. Labs ---------- */
.labs { background: var(--black); color: var(--white); position: relative; padding: var(--space) 0; overflow: hidden; }
.labs .wrap { z-index: 1; }
.labs .year__line { color: #e0e0e0; }
.labs__lab { margin-top: clamp(48px, 6vw, 96px); }
.labs__lab img { width: 100%; }
.labs__lab figcaption, .labs__grid figcaption { font-size: 15px; color: #cfcfcf; margin-top: 12px; }
.labs__lab figcaption strong, .labs__grid figcaption strong { color: var(--white); }
.labs__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px) clamp(14px, 2vw, 28px); margin-top: clamp(28px, 3vw, 44px); align-items: start; }
.labs__weather { grid-column: span 5; }
.labs__cake { grid-column: span 4; }
.labs__f50 { grid-column: span 3; }
.labs__grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.labs__weather img { aspect-ratio: 16 / 9; }
.labs__f50 img { max-width: 360px; }
.labs__sc { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(20px, 4vw, 64px); align-items: center; border-top: 2px solid #3a3a3a; padding-top: clamp(24px, 3vw, 40px); margin-top: clamp(8px, 2vw, 24px); }
.labs__sc img { width: clamp(140px, 14vw, 200px); }
.labs__sc p { font-size: clamp(16px, 1.3vw, 19px); color: #d6d6d6; max-width: 38em; }
.labs__sc .more { margin-top: 0; }

/* ---------- 12. Close ---------- */
.close { position: relative; background: var(--black); color: var(--white); padding: clamp(120px, 16vw, 240px) 0; overflow: hidden; }
.close__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; opacity: .32; }
.close .wrap { z-index: 1; }
.close__quote { font-size: clamp(36px, 6.2vw, 100px); font-weight: 800; letter-spacing: -.05em; line-height: .96; max-width: 12em; text-wrap: balance; }
.close__by { font-size: 16px; color: #e0e0e0; margin-top: 28px; }
.close__by a { color: var(--white); }

/* ---------- Footer ---------- */
.foot { background: var(--black); color: var(--white); padding: 40px 0 48px; border-top: 1px solid #262626; }
.foot__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; }
.foot__mark { display: block; width: 150px; }
.foot__mark img { width: 100%; }
.foot__note { font-size: 14px; color: #cfcfcf; width: 100%; }

/* ---------- Tablet ---------- */
@media (max-width: 1080px) {
  .contents ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .staff__grid { grid-template-columns: 1fr; }
  .legend { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tt__feature { grid-template-columns: 1fr; align-items: start; }
  .tt__wall { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .tt__end { grid-column: span 1; }
  .tt__end p { font-size: 15px; letter-spacing: -.01em; }
  .split { grid-template-columns: 1fr; }
  .hero .year__text { grid-template-columns: 1fr; }
  .record__item { grid-template-columns: minmax(0, 2fr) minmax(0, 8fr); }
  .record__item img { grid-column: 2; justify-self: start; }
  .labs__sc { grid-template-columns: auto minmax(0, 1fr); }
  .labs__sc .more { grid-column: 2; justify-self: start; }
}

/* ---------- Phone ---------- */
@media (max-width: 720px) {
  body { font-size: 16px; }
  .top__in { padding-top: 18px; padding-bottom: 18px; }
  :root { --top-h: 66px; }
  .top__home { width: 28px; }
  .nav { gap: 16px; }
  .nav a { font-size: 15px; }
  .cover { padding-top: 92px; }
  .cover__lede { grid-template-columns: 1fr; gap: 28px; }
  .cover__statement { font-size: 24px; line-height: 1.12; }
  .contents ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .contents a { min-height: 96px; padding: 12px 12px 14px; }
  .contents b { font-size: 17px; }

  .cmark { width: 64px; }
  .kicker { max-width: calc(100% - 84px); }
  .founder__role { font-size: 12px; }
  .year { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .year__num { font-size: 46vw; }

  .bleed img { height: auto; aspect-ratio: 4 / 3; }

  .crowd { gap: 10px 5px; }
  .legend { gap: 22px 12px; }
  .legend__item { font-size: 13px; }
  .faces__grid { gap: 5px; }

  .plabel { font-size: clamp(19px, 7cqi, 30px); width: 62cqi; }
  .plate--hero .plate__stage { aspect-ratio: 4 / 5; max-height: none; }
  .plate--hero .plabel { width: 62cqi; font-size: 30px; right: 16px; top: 16px; }
  .plate--hero .plabel--left { left: 16px; right: auto; }
  .spread { grid-template-columns: 1fr; }
  .spread__media { justify-self: start; max-width: 300px; }
  .plates { grid-template-columns: 1fr; gap: 40px; }

  .products__head { grid-template-columns: 1fr; }
  .productlist li { font-size: 28px; }
  .productlist__note .more { margin: 14px 0 0; }
  .clients .more, .productlist__note .more { display: flex; width: max-content; margin: 14px 0 0; }

  .record__item { grid-template-columns: 1fr; gap: 10px; }
  .record__item img { grid-column: 1; max-width: 100%; }

  .tt__wall { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 8px; }
  .tt__end { display: none; }
  .tt__cap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tt__when { font-size: 12px; margin-top: 5px; }
  .tt__hint { display: block; }

  .rooms__grid { grid-template-columns: 1fr; gap: 32px; }
  .room--wide img, .room:not(.room--wide) img { height: auto; aspect-ratio: 3 / 2; }
  .room figcaption { min-height: 0; }
  .bkk { grid-template-columns: 1fr 1fr; gap: 28px 12px; }
  .bkk__c { grid-column: 1 / -1; }
  .bkk figcaption { font-size: 14px; }
  .ost { grid-template-columns: 1fr; }
  .ost__sign { max-width: 62%; }
  .merge { width: 92px; height: 56px; margin-bottom: 16px; }
  .merge i { width: 56px; height: 56px; }

  .moments { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  .moment--tall { grid-row: auto; grid-column: 1 / -1; }
  .moment--tall img { aspect-ratio: 4 / 3; min-height: 0; }
  .moment--type { grid-column: 1 / -1; gap: 18px; }
  .moment > p { font-size: 14px; }
  .crew { grid-template-columns: 1fr; }
  .moments > .moment:last-child { grid-column: 1 / -1; }
  .record .section-title { padding-right: 72px; }
  .plate__phone { left: 6%; height: 86%; }
  .crew__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .labs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .labs__weather { grid-column: 1 / -1; }
  .labs__cake, .labs__f50 { grid-column: span 1; }
  .labs__grid figcaption { font-size: 14px; }
  .labs__sc { grid-template-columns: 1fr; }
  .labs__sc .more { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
.ost__pano { grid-column: 1 / -1; }
.ost__pano img { aspect-ratio: 2400 / 951; }
.cover__accent { color: var(--rasp-tint); }

/* Old blog photos are small and soft, so they are shown as prints: a white border and a soft shadow */
.room img[src^="/media/"], .bkk img, .moment img[src^="/media/"] {
  padding: clamp(6px, .7vw, 10px); background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 10px 24px -12px rgba(0,0,0,.35);
  filter: contrast(1.04) saturate(.9);
}
.bkk img { background: #f4f1ec; }

.tt__media { position: relative; display: block; }
.tt__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.tt__media.is-playing video { opacity: 1; }
@media (hover: none) { .tt__hover { display: none; } }

/* Staff wall: London and Bangkok together, then every name */
.faces__count { background: var(--rasp); color: var(--white); padding: clamp(10px, 1.2vw, 18px); display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 3 / 4; }
.faces__count b { font-size: clamp(40px, 5vw, 76px); font-weight: 500; letter-spacing: -.06em; line-height: .85; }
.faces__count span { font-size: clamp(12px, 1vw, 14px); line-height: 1.3; }
.team { margin-top: clamp(48px, 6vw, 88px); border-top: 2px solid #3a3a3a; padding-top: clamp(24px, 3vw, 40px); }
.team__title { font-size: clamp(20px, 2vw, 28px); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; max-width: 24em; color: var(--white); }
.team__cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); margin-top: clamp(24px, 3vw, 40px); }
.team__head { font-size: 15px; font-weight: 800; color: var(--white); border-bottom: 1px solid #3a3a3a; padding-bottom: 8px; margin-bottom: 12px; }
.team__head span { color: var(--rasp-tint); font-weight: 500; margin-left: .3em; }
.team__list { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; line-height: 1.5; color: #c9c9c9; }
@media (max-width: 900px) {
  .faces__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .team__cols { grid-template-columns: 1fr; }
}

/* The Gherkin: the standout piece, with its film */
.gherkin { background: var(--black); color: var(--white); padding: var(--space) 0; }
.gherkin__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 72px); align-items: end; }
.gherkin__title { font-size: clamp(56px, 9vw, 150px); font-weight: 800; letter-spacing: -.055em; line-height: .88; text-wrap: balance; }
.gherkin__lede { font-size: clamp(18px, 1.6vw, 23px); line-height: 1.45; color: #d6d6d6; max-width: 30em; }
.gherkin__film { margin-top: clamp(40px, 5vw, 80px); }
.gherkin__film video { width: 100%; height: auto; aspect-ratio: 16 / 9; background: #111; display: block; }
.gherkin__film figcaption { font-size: 15px; color: #cfcfcf; margin-top: 12px; }
.gherkin__film strong { color: var(--white); }
.gherkin__body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 72px); margin-top: clamp(40px, 5vw, 72px); align-items: start; }
.gherkin__body > p { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; color: #d6d6d6; max-width: 36em; }
.gherkin__awards { display: grid; gap: 16px; }
.gherkin__awards li { border-top: 2px solid #3a3a3a; padding-top: 12px; font-size: 15px; line-height: 1.45; color: #cfcfcf; }
.gherkin__awards b { display: block; font-size: clamp(26px, 2.6vw, 40px); font-weight: 500; letter-spacing: -.045em; line-height: 1; color: var(--rasp-tint); margin-bottom: 6px; }
.gherkin__stills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1.2vw, 16px); margin: clamp(40px, 5vw, 72px) 0 28px; }
.gherkin__stills img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
@media (max-width: 900px) {
  .gherkin__head, .gherkin__body { grid-template-columns: 1fr; }
  .gherkin__stills { grid-template-columns: 1fr 1fr; }
  .gherkin__stills li:first-child { grid-column: 1 / -1; }
}
.plate--wide .plate__stage { aspect-ratio: 2400 / 855; }
@media (max-width: 720px) { .plate--wide .plate__stage { aspect-ratio: 4 / 3; } }

/* Thin Martian: the agency story in four steps */
.tm { background: var(--white); padding: var(--space) 0; }
.tm__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 36px); margin: clamp(32px, 4vw, 56px) 0 28px; }
.tm__steps li { border-top: 3px solid var(--black); padding-top: 14px; }
.tm__yr { font-size: clamp(48px, 5.6vw, 88px); font-weight: 500; letter-spacing: -.06em; line-height: .9; color: var(--rasp); margin-bottom: 14px; }
.tm__steps li > p:not(.tm__yr) { font-size: 16px; line-height: 1.5; max-width: 24em; }
.tm__steps strong { font-weight: 800; }
@media (max-width: 900px) { .tm__steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .tm__steps { grid-template-columns: 1fr; } }

/* Work plates: a Film tile, a wide plate, and the film playing in place of the still */
.tile--film { width: auto; display: flex; align-items: center; gap: .12em; padding: 0 .32em 0 .22em; background: var(--rasp); color: var(--white); text-decoration: none; }
.tile--film svg { width: .9em; height: .9em; }
.tile--film:hover, .tile--film:focus-visible { background: var(--black); }
.tile__word { font-size: .42em; font-weight: 800; letter-spacing: .01em; }
.plate--span { grid-column: 1 / -1; }
.plate--span .plate__stage { aspect-ratio: 2304 / 1024; }
.plate__film { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; z-index: 2; }
@media (max-width: 720px) { .plate--span .plate__stage { aspect-ratio: 4 / 3; } }
@media (min-width: 721px) { .plate--span .plabel { top: 2.5cqi; right: 2cqi; width: 23cqi; font-size: clamp(19px, 2.8cqi, 60px); } }

/* Inside pages: page heads, the About timeline, numbers and afterwards */
.pagehead { position: relative; overflow: hidden; padding: clamp(64px, 9vw, 144px) 0 clamp(56px, 7vw, 112px); }
.pagehead .wrap { position: relative; z-index: 1; }
.pagehead--rasp { background: var(--rasp); color: var(--white); }
.pagehead--dark { background: var(--black); color: var(--white); }
.pagehead__title { font-size: clamp(52px, 9.6vw, 156px); font-weight: 800; letter-spacing: -.055em; line-height: .88; max-width: 9em; text-wrap: balance; }
.pagehead__lede { font-size: clamp(19px, 1.9vw, 28px); font-weight: 500; letter-spacing: -.01em; line-height: 1.35; max-width: 30em; margin-top: clamp(24px, 3vw, 44px); }
.pagehead--dark .pagehead__lede { color: #d6d6d6; }
.hero__title--sub { font-size: clamp(44px, 7vw, 112px); }

.timeline { background: var(--white); padding: var(--space) 0; }
.timeline__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px) clamp(16px, 2.4vw, 36px); margin-top: clamp(32px, 4vw, 56px); }
.timeline__list li { border-top: 3px solid var(--black); padding-top: 14px; }
.timeline__yr { font-size: clamp(44px, 5vw, 80px); font-weight: 500; letter-spacing: -.06em; line-height: .9; color: var(--rasp); margin-bottom: 14px; }
.timeline__list li > p:not(.timeline__yr) { font-size: 16px; line-height: 1.5; max-width: 22em; }
.timeline__list strong { font-weight: 800; }

.numbers { background: var(--black); color: var(--white); padding: clamp(56px, 7vw, 112px) 0; }
.numbers__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); }
.numbers__list li { border-top: 2px solid #3a3a3a; padding-top: 14px; font-size: 15px; line-height: 1.45; color: #cfcfcf; }
.numbers__list b { display: block; font-size: clamp(56px, 7vw, 112px); font-weight: 500; letter-spacing: -.06em; line-height: .9; color: var(--white); margin-bottom: 12px; }

.after { background: var(--grey); padding: var(--space) 0; }
.after__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 72px); align-items: start; }
.after__body p { font-size: clamp(17px, 1.45vw, 21px); line-height: 1.55; max-width: 34em; }
.after__body p + p { margin-top: 1em; }
.after__body a:not(.more) { color: inherit; text-decoration: underline; text-underline-offset: .15em; }
.after__body .more { margin-top: 28px; }

@media (max-width: 1080px) {
  .timeline__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .numbers__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .timeline__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .after__in { grid-template-columns: 1fr; }
}
.pagehead .cmark { top: clamp(96px, 10vw, 150px); }

/* Products page: a logo stage for products with no screens, and a link under each plate */
.plate__stage--logo { background: var(--white); display: grid; place-items: center; }
.plate__logo { width: 46%; max-width: 280px; height: auto; }
.plate .more { margin-top: 14px; }
.products--page { padding-top: clamp(56px, 7vw, 104px); }
.pagehead__lede a { color: inherit; text-decoration: underline; text-underline-offset: .15em; }
@media (max-width: 520px) { .gherkin__title { font-size: 44px; } }
@media (max-width: 420px) { .section-title { font-size: 48px; } }

/* Products: ScreenCloud leads, then the other nine */
.sc { background: var(--black); color: var(--white); position: relative; overflow: hidden; padding: clamp(64px, 9vw, 144px) 0 var(--space); }
.sc .wrap { position: relative; z-index: 1; }
.sc .cmark { top: clamp(96px, 10vw, 150px); }
.sc__title { font-size: clamp(56px, 13vw, 220px); font-weight: 800; letter-spacing: -.06em; line-height: .84; }
.sc__intro { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(24px, 4vw, 72px); align-items: end; margin-top: clamp(28px, 3.4vw, 52px); }
.sc__lede { font-size: clamp(19px, 1.9vw, 28px); font-weight: 500; letter-spacing: -.01em; line-height: 1.35; max-width: 30em; color: #e0e0e0; }
.sc__intro .more { justify-self: start; }
.sc__lab { margin-top: clamp(40px, 5vw, 80px); }
.sc__lab img { width: 100%; height: auto; display: block; }
.sc figcaption { font-size: 15px; color: #cfcfcf; margin-top: 12px; }
.sc figcaption strong { color: var(--white); font-weight: 800; }
.sc__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); margin-top: clamp(48px, 6vw, 96px); }
.sc__steps li { border-top: 2px solid #3a3a3a; padding-top: 14px; }
.sc__yr { font-size: clamp(56px, 7vw, 112px); font-weight: 500; letter-spacing: -.06em; line-height: .9; color: var(--rasp-tint); margin-bottom: 14px; }
.sc__steps li > p:not(.sc__yr) { font-size: 16px; line-height: 1.5; color: #cfcfcf; max-width: 26em; }
.sc__steps strong { color: var(--white); font-weight: 800; }
.sc__pics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 24px); margin-top: clamp(40px, 5vw, 72px); }
.sc__pics img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.plates--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1080px) { .plates--three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .sc__intro, .sc__steps { grid-template-columns: 1fr; }
  .sc__pics { grid-template-columns: 1fr 1fr; }
  .sc__pics li:first-child { grid-column: 1 / -1; }
  .plates--three { grid-template-columns: 1fr; }
}