/* ==========================================================================
   Room Twenty Two — roomtwentytwo.com.au
   APPROVED: six palette values, type roles, v2 logo files (Brand Style PDF).
   PROPOSED: all sizes, spacing, breakpoints, timings and the light theme mapping.
   ========================================================================== */

/* ---------- Typefaces (studio WOFF2 files; Manrope OFL) ---------- */
@font-face { font-family: "R22 Aeonik Pro"; src: url("../assets/fonts/AeonikPro-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "R22 Aeonik Pro"; src: url("../assets/fonts/AeonikPro-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "R22 Manrope"; src: url("../assets/fonts/Manrope-Variable.woff") format("woff"); font-weight: 200 800; font-style: normal; font-display: swap; }

/* ---------- Theme tokens: dark is the default (Living Brand Guidelines) ---------- */
:root {
  --orange: #FE5918;
  --bg: #000000;
  --fg: #F4F3EF;
  --fg-2: #B7B7B7;
  --fg-3: #767676;
  --line: #1A1A1A;
  --line-strong: #767676;
  --veil-soft: rgba(0, 0, 0, .45);
  --accent-ink: #FE5918;          /* orange as small text: 6.7:1 on black */
  --placeholder: #0B0B0B;
  color-scheme: dark;

  --font-head: "R22 Aeonik Pro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-body: "R22 Manrope", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --gutter: clamp(1.25rem, 4.5vw, 4rem);
  --max: 82rem;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}
/* Light: a warm-white editorial canvas. Room Orange is ~2.9:1 on warm white, so
   small orange text switches to black; orange stays for marks, dashes and arrows. */
[data-theme="light"] {
  --bg: #F4F3EF;
  --fg: #000000;
  --fg-2: #3F3F3E;
  --fg-3: #5E5E5D;
  --line: rgba(0, 0, 0, .14);
  --line-strong: #767676;
  --veil-soft: rgba(244, 243, 239, .6);
  --accent-ink: #000000;
  --placeholder: #E9E8E3;
  color-scheme: light;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 400 1rem/1.6 var(--font-body);
  font-synthesis: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, figure, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; border-radius: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--gutter); top: -4rem; z-index: 10; padding: .75rem 1rem; background: var(--orange); color: #000; font-weight: 600; text-decoration: none; border-radius: .5rem; }
.skip:focus { top: 1rem; }
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }
[data-theme="dark"] .rule, :root:not([data-theme]) .rule { border-top-color: #222; }

/* Small label: slight positive tracking */
.label { font: 500 .75rem/1.4 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }

/* Arrow link — text in fg (black/white), arrow in orange */
.arrow-link {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px;
  font: 500 1rem/1.3 var(--font-body); letter-spacing: .01em;
  color: var(--accent-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .35em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: text-decoration-color .2s ease;
}
.arrow-link svg { width: 1.05em; height: 1.05em; flex: none; color: var(--orange); transition: transform .35s var(--ease-out); }
.arrow-link:hover { text-decoration-color: currentColor; }
.arrow-link:hover svg { transform: translate(2px, -2px); }

/* ---------- Header ---------- */
.site-header { position: relative; z-index: 5; }
.site-header__bar { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 5.5rem; padding-block: 1rem; }
.brand { display: block; flex: none; width: clamp(8.5rem, 7rem + 4vw, 10.5rem); }
.brand img { width: 100%; height: auto; }
.brand__light, [data-theme="light"] .brand__dark { display: none; }
[data-theme="light"] .brand__light { display: block; }
.site-header__right { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.25rem); }
.nav ul { display: flex; gap: clamp(1rem, 2.2vw, 2.25rem); }
.nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  font: 500 .9375rem/1 var(--font-body); letter-spacing: .015em; text-decoration: none; color: var(--fg);
  background: linear-gradient(var(--orange), var(--orange)) 0 calc(50% + .8em) / 0 1px no-repeat;
  transition: background-size .35s var(--ease-out);
}
.nav a:hover, .nav a[aria-current="page"] { background-size: 100% 1px; }

/* Theme switch — ported unchanged from the Living Brand Guidelines */
.theme-switch { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 .75rem 0 .6rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--veil-soft); color: var(--fg); font: 500 .8125rem/1 var(--font-body); letter-spacing: .02em; cursor: pointer; }
.theme-switch:hover { border-color: var(--fg); }
.theme-switch__icon { width: 18px; height: 18px; display: block; color: var(--orange); }
.theme-switch__icon svg { width: 100%; height: 100%; overflow: visible; }
.theme-switch .ts-sun, .theme-switch .ts-moon { transition: opacity .4s var(--ease-out), transform .6s var(--ease-out); transform-origin: 12px 12px; }
[data-theme="dark"] .theme-switch .ts-sun, :root:not([data-theme]) .theme-switch .ts-sun { opacity: 0; transform: rotate(-90deg) scale(.5); }
[data-theme="light"] .theme-switch .ts-moon { opacity: 0; transform: rotate(90deg) scale(.5); }
@media (max-width: 760px) { .theme-switch__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .theme-switch { padding: 0; width: 44px; justify-content: center; } }
.is-theming, .is-theming *, .is-theming *::before, .is-theming *::after {
  transition: background-color .55s var(--ease-out), color .55s var(--ease-out), border-color .55s var(--ease-out), fill .55s var(--ease-out), stroke .55s var(--ease-out), opacity .55s var(--ease-out) !important;
}

/* Mobile header: logo + switch on one row, navigation on its own row */
@media (max-width: 760px) {
  .site-header__bar { flex-wrap: wrap; row-gap: .25rem; min-height: 0; padding-block: 1.25rem .5rem; }
  .site-header__right { display: contents; }
  .theme-switch { order: 2; }
  .nav { order: 3; flex-basis: 100%; }
  .nav ul { justify-content: space-between; gap: .5rem; }
  .nav a { font-size: .9375rem; }
}

/* ---------- Studio introduction ---------- */
.intro { padding-block: clamp(4.5rem, 3rem + 9vw, 11rem) clamp(4rem, 2.5rem + 7vw, 9rem); }
.intro__title {
  max-width: 21em;
  font: 700 clamp(2rem, 1.25rem + 3.1vw, 3.75rem)/1.08 var(--font-head);
  letter-spacing: .005em;
  text-wrap: balance;
}
.intro__title span { display: block; font-weight: 400; letter-spacing: 0; color: var(--fg-2); margin-top: .2em; }
.intro__body {
  max-width: 34rem; margin-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem);
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.6; color: var(--fg-2);
}

/* ---------- Selected work ---------- */
.work__head { display: flex; justify-content: space-between; align-items: baseline; padding-block: 1.5rem; }
.project { border-top: 1px solid var(--line); }
[data-theme="dark"] .project, :root:not([data-theme]) .project { border-top-color: #222; }
.project__inner {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1.25rem, 3vw, 3rem); row-gap: 1.75rem;
  align-items: center; padding-block: clamp(2.5rem, 1.5rem + 4vw, 5.5rem);
}
.project__media { grid-column: 1 / span 7; grid-row: 1; position: relative; display: block; overflow: hidden; border-radius: .25rem; background: var(--placeholder); }
.project__media img { width: 100%; height: auto; transition: transform 1.1s var(--ease-out); }
/* Image and link respond together: hovering either one moves both */
a.project__media:hover img, .project:has(.project__link:hover) .project__media img { transform: scale(1.015); }
.project:has(a.project__media:hover) .project__link { text-decoration-color: currentColor; }
.project:has(a.project__media:hover) .project__link svg { transform: translate(2px, -2px); }
.project__text { grid-column: 9 / span 4; grid-row: 1; }
.project--flip .project__media { grid-column: 6 / span 7; }
.project--flip .project__text { grid-column: 1 / span 4; }
/* Taller artwork gets a narrower column so the rhythm stays even */
.project--tall .project__media { grid-column: 2 / span 5; }
.project--tall .project__text { grid-column: 8 / span 4; }

.project__index { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.5rem; }
.project__index::before { content: ""; width: 1.5rem; height: 2px; background: var(--orange); }
.project__brand { font: 500 .8125rem/1.4 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-2); }
.project__title { margin-top: .5rem; font: 700 clamp(1.625rem, 1.2rem + 1.5vw, 2.375rem)/1.12 var(--font-head); letter-spacing: .005em; text-wrap: balance; }
.project__desc { margin-top: 1rem; max-width: 30rem; color: var(--fg-2); font-size: 1rem; line-height: 1.65; }
.project__credit { margin-top: 1rem; font-size: .8125rem; line-height: 1.5; letter-spacing: .01em; color: var(--fg-3); }
.project__link { margin-top: 1.25rem; }

/* Temporary placeholder — always labelled */
.placeholder {
  position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; text-align: center;
  background: var(--placeholder); border: 1px dashed var(--line-strong); border-radius: .25rem; padding: 1.5rem;
}
.placeholder__tag { position: absolute; left: .75rem; top: .75rem; padding: .25rem .6rem; border-radius: 999px; border: 1px solid var(--line-strong); font: 500 .6875rem/1.4 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); }
.placeholder__text { font: 400 1.125rem/1.3 var(--font-head); color: var(--fg-2); }
.placeholder__text small { display: block; margin-top: .35rem; font: 400 .8125rem/1.4 var(--font-body); color: var(--fg-3); }

@media (max-width: 860px) {
  .project__inner, .project--flip .project__inner, .project--tall .project__inner { grid-template-columns: minmax(0, 1fr); }
  .project__media, .project__text,
  .project--flip .project__media, .project--flip .project__text,
  .project--tall .project__media, .project--tall .project__text { grid-column: 1; grid-row: auto; }
  .project--tall .project__media { max-width: 30rem; }
  .project__index { margin-bottom: 1rem; }
}

/* ---------- Capabilities invitation ---------- */
.caps { border-top: 1px solid var(--line); }
[data-theme="dark"] .caps, :root:not([data-theme]) .caps { border-top-color: #222; }
.caps__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1.25rem, 3vw, 3rem); row-gap: 3rem; align-items: center; padding-block: clamp(4.5rem, 3rem + 7vw, 9rem); }
.caps__copy { grid-column: 1 / span 5; }
.caps__title { margin-top: 1.25rem; font: 700 clamp(2rem, 1.3rem + 2.6vw, 3.375rem)/1.08 var(--font-head); letter-spacing: .005em; text-wrap: balance; }
.caps__body { margin-top: 1.5rem; max-width: 28rem; font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); color: var(--fg-2); }
.caps__link { margin-top: 1.75rem; }
.caps__link.arrow-link { font-size: 1.0625rem; }
.formats { grid-column: 7 / span 6; }
@media (max-width: 860px) { .caps__inner { grid-template-columns: minmax(0, 1fr); } .caps__copy, .formats { grid-column: 1; } }

.formats__stage { position: relative; aspect-ratio: 3 / 2; }
.formats__svg { width: 100%; height: 100%; overflow: visible; }
.formats__svg rect { fill: none; stroke: var(--line-strong); stroke-width: 1; vector-effect: non-scaling-stroke; transition: stroke .5s ease, opacity .5s ease; }
.formats__svg rect.is-on { stroke: var(--orange); stroke-width: 2; }
.formats.is-cycling .formats__svg rect:not(.is-on) { opacity: .55; }
.formats__meta { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.25rem; min-height: 44px; }
.formats__now { font: 400 1.0625rem/1.3 var(--font-head); letter-spacing: .01em; }
.formats__now small { display: block; margin-top: .2rem; font: 400 .8125rem/1.4 var(--font-body); color: var(--fg-3); }
.formats__list { display: none; margin-top: 1rem; columns: 2; column-gap: 1.5rem; font-size: .875rem; color: var(--fg-2); }
.formats__list li { padding: .2rem 0; break-inside: avoid; }
.formats__caption { margin-top: 1rem; font-size: .8125rem; color: var(--fg-3); }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--fg); cursor: pointer; }
.icon-btn:hover { border-color: var(--fg); }
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn .i-play, .icon-btn[aria-pressed="true"] .i-pause { display: none; }
.icon-btn[aria-pressed="true"] .i-play { display: block; }
/* Without JS or with reduced motion: show every format as a list, no cycling */
.no-js .formats__list, .formats.is-static .formats__list { display: block; }
.no-js .formats__meta, .formats.is-static .formats__meta { display: none; }

/* ---------- Contact ---------- */
.contact { border-top: 1px solid var(--line); }
[data-theme="dark"] .contact, :root:not([data-theme]) .contact { border-top-color: #222; }
.contact__inner { padding-block: clamp(4.5rem, 3rem + 7vw, 9rem); }
.contact__title { margin-top: 1.25rem; max-width: 14em; font: 700 clamp(2.25rem, 1.3rem + 3.8vw, 4.75rem)/1.04 var(--font-head); letter-spacing: .005em; text-wrap: balance; }
.contact__body { margin-top: 1.5rem; max-width: 32rem; font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); color: var(--fg-2); }
.contact__lines { display: flex; flex-wrap: wrap; gap: .75rem clamp(2rem, 5vw, 4rem); margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
.contact__line { display: block; max-width: 100%; overflow-wrap: anywhere; font: 400 clamp(1.125rem, .9rem + 1.1vw, 1.75rem)/1.2 var(--font-head); letter-spacing: .005em; text-decoration: none; padding-block: .5rem; border-bottom: 1px solid var(--line-strong); transition: border-color .25s ease; }
.contact__line:hover { border-bottom-color: var(--orange); }
.contact__line span { display: block; margin-bottom: .35rem; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); }
[data-theme="dark"] .site-footer, :root:not([data-theme]) .site-footer { border-top-color: #222; }
.site-footer__inner { display: grid; grid-template-columns: auto 1fr; gap: 2rem clamp(2rem, 5vw, 5rem); padding-block: 3rem 2.5rem; }
.site-footer__mark { width: 2.75rem; }
.site-footer__cols { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2rem clamp(2rem, 5vw, 5rem); }
.site-footer h2 { margin-bottom: .75rem; }
.site-footer li a { display: inline-flex; align-items: center; gap: .35rem; min-height: 36px; font-size: .9375rem; text-decoration: none; color: var(--fg-2); }
.site-footer li a:hover { color: var(--fg); }
.site-footer li a svg { width: .9em; height: .9em; color: var(--orange); }
.site-footer__legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: .8125rem; color: var(--fg-3); letter-spacing: .01em; }
[data-theme="dark"] .site-footer__legal, :root:not([data-theme]) .site-footer__legal { border-top-color: #222; }
@media (max-width: 640px) { .site-footer__inner { grid-template-columns: minmax(0, 1fr); } .site-footer__cols { justify-content: flex-start; } }

/* ---------- Studio (holding page) ---------- */
.page-intro { padding-block: clamp(4rem, 3rem + 7vw, 9rem); }
.page-intro h1 { margin-top: 1.25rem; max-width: 18em; font: 700 clamp(2rem, 1.3rem + 2.8vw, 3.5rem)/1.1 var(--font-head); letter-spacing: .005em; text-wrap: balance; }
.page-intro p { margin-top: 1.5rem; max-width: 34rem; color: var(--fg-2); font-size: 1.125rem; }
.ph-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1.25rem; padding-bottom: clamp(4rem, 3rem + 5vw, 7rem); }

/* ---------- Reveal (progressive enhancement) ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}
@media (forced-colors: active) {
  .theme-switch, .icon-btn, .placeholder { border-color: ButtonText; }
  .project__index::before { background: CanvasText; }
}

/* ---------- Project pages ---------- */
.case__intro { padding-block: clamp(3.5rem, 2.5rem + 5vw, 7rem) clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.case__back { color: var(--fg-3); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.case__back::before { content: "←"; margin-right: .5rem; color: var(--orange); }
.case__back:hover { color: var(--fg); }
.case__brand { margin-top: 1.5rem; }
.case__title { margin-top: .5rem; max-width: 16em; font: 700 clamp(2.25rem, 1.4rem + 3.4vw, 4.25rem)/1.05 var(--font-head); letter-spacing: .005em; text-wrap: balance; }
.case__lede { margin-top: 1.5rem; max-width: 40rem; font: 400 clamp(1.1875rem, 1rem + .7vw, 1.5rem)/1.45 var(--font-head); color: var(--fg-2); }
.case__meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 1.5rem clamp(1.5rem, 3vw, 3rem); margin: clamp(2.5rem, 2rem + 2vw, 3.5rem) 0 0; padding-top: 1.5rem; border-top: 1px solid var(--line); }
[data-theme="dark"] .case__meta, :root:not([data-theme]) .case__meta { border-top-color: #222; }
.case__meta dd { margin: .4rem 0 0; font-size: 1rem; line-height: 1.5; }
.case__media { aspect-ratio: 16 / 8; }
.case__body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1.25rem, 3vw, 3rem); row-gap: 2.5rem; padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
.case__section { grid-column: span 6; }
.case__section .label { margin-bottom: 1rem; }
.case__list li { position: relative; padding: .85rem 0 .85rem 1.5rem; border-top: 1px solid var(--line); font-size: clamp(1rem, .97rem + .15vw, 1.0625rem); line-height: 1.6; }
[data-theme="dark"] .case__list li, :root:not([data-theme]) .case__list li { border-top-color: #222; }
.case__list li::before { content: ""; position: absolute; left: 0; top: 1.55rem; width: .6rem; height: 2px; background: var(--orange); }
.case__tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.tag { padding: .3rem .8rem; border: 1px solid var(--line-strong); border-radius: 999px; font-size: .875rem; line-height: 1.5; letter-spacing: .01em; color: var(--fg); }
.case__next { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem); border-top: 1px solid var(--line); }
[data-theme="dark"] .case__next, :root:not([data-theme]) .case__next { border-top-color: #222; }
.case__next-link { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; margin-top: 1rem; text-decoration: none; font: 700 clamp(1.75rem, 1.2rem + 2.2vw, 3rem)/1.1 var(--font-head); letter-spacing: .005em; }
.case__next-link .project__brand { flex-basis: 100%; font-weight: 500; }
.case__next-link svg { width: .7em; height: .7em; color: var(--orange); transition: transform .35s var(--ease-out); align-self: center; }
.case__next-link:hover svg { transform: translate(3px, -3px); }
@media (max-width: 860px) { .case__body { grid-template-columns: minmax(0, 1fr); } .case__section { grid-column: 1; } .case__media { aspect-ratio: 4 / 3; } }

/* ---------- Work index ---------- */
.work__all { text-decoration: none; color: var(--fg-2); display: inline-flex; align-items: center; min-height: 44px; }
.work__all:hover { color: var(--fg); }
.work__foot { padding-block: 1.5rem clamp(2.5rem, 2rem + 3vw, 4.5rem); border-top: 1px solid var(--line); }
[data-theme="dark"] .work__foot, :root:not([data-theme]) .work__foot { border-top-color: #222; }
.work-intro { padding-bottom: clamp(2rem, 1.5rem + 2.5vw, 4rem); }
.work-grid-wrap .work__head { border-bottom: 1px solid var(--line); }
[data-theme="dark"] .work-grid-wrap .work__head, :root:not([data-theme]) .work-grid-wrap .work__head { border-bottom-color: #222; }
.work-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(3.5rem, 2.5rem + 3vw, 6rem) clamp(1.25rem, 3vw, 3rem); padding-block: clamp(2.5rem, 2rem + 2vw, 3.5rem) clamp(4.5rem, 3rem + 5vw, 8rem); }
.work-card { display: flex; flex-direction: column; min-width: 0; }
.work-card__link { display: block; text-decoration: none; color: inherit; }
.work-card__link:focus-visible { outline-offset: 6px; }
.work-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: .25rem; background: var(--placeholder); }
.work-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.work-card__media--contain img { object-fit: contain; }
.work-card__media .placeholder { height: 100%; aspect-ratio: auto; border-radius: .25rem; }
.work-card__link:hover .work-card__media img { transform: scale(1.015); }
.work-card__head { padding-top: 1.5rem; }
.work-card .project__index { margin-bottom: 1rem; }
.work-card__brand { margin-top: 0; }
.work-card__title { margin-top: .35rem; font: 700 clamp(1.5rem, 1.15rem + 1.1vw, 2.125rem)/1.12 var(--font-head); letter-spacing: .005em; text-wrap: balance; }
.work-card__title svg { display: inline-block; width: .55em; height: .55em; margin-left: .2em; color: var(--orange); vertical-align: .08em; transition: transform .35s var(--ease-out); }
.work-card__link:hover .work-card__title svg { transform: translate(2px, -2px); }
.work-card__body { margin-top: .75rem; }
.work-card__summary { max-width: 34rem; color: var(--fg-2); line-height: 1.6; }
.work-card__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.work-card__tags li { padding: .2rem .7rem; border: 1px solid var(--line-strong); border-radius: 999px; font-size: .8125rem; line-height: 1.5; letter-spacing: .01em; color: var(--fg-2); }

/* Featured first project: full width, title and summary side by side */
.work-card--feature { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1.25rem, 3vw, 3rem); }
.work-card--feature .work-card__link { display: contents; }
.work-card--feature .work-card__media { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.work-card--feature .work-card__head { grid-column: 1 / span 6; padding-top: 1.75rem; }
.work-card--feature .work-card__title { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.25rem); line-height: 1.05; }
.work-card--feature .work-card__body { grid-column: 8 / span 5; align-self: end; margin-top: 0; padding-top: 1.75rem; }
.work-card--feature .work-card__summary { font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); }
.work-card--feature:has(.work-card__link:hover) .work-card__media img { transform: scale(1.01); }

/* Second-row cards sit in step with each other */
.work-grid > .work-card:nth-child(even):not(.work-card--feature) { }

@media (max-width: 860px) {
  .work-card--feature { display: flex; }
  .work-card--feature .work-card__link { display: block; }
  .work-card--feature .work-card__body { padding-top: 0; margin-top: .75rem; }
}
@media (max-width: 760px) { .work-grid { grid-template-columns: minmax(0, 1fr); } .work-card--feature .work-card__media { aspect-ratio: 16 / 10; } }
@media (prefers-reduced-motion: no-preference) {
  .js .work-grid > .work-card:nth-child(odd):not(:first-child)[data-reveal] { transition-delay: .08s; }
}

/* ==========================================================================
   Editorial case study (BOSS Coffee first): curated visual archive
   ========================================================================== */
.cs-open { padding-block: clamp(3rem, 2rem + 4vw, 6rem) clamp(2rem, 1.5rem + 2.5vw, 3.5rem); }
.cs-kicker { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; margin-top: 1.75rem; }
.cs-kicker .project__brand { color: var(--fg); }
.cs-kicker__meta { font-size: .875rem; letter-spacing: .01em; color: var(--fg-3); }
.cs-title { margin-top: .75rem; max-width: 13em; font: 700 clamp(2.5rem, 1.3rem + 5vw, 6rem)/1.0 var(--font-head); letter-spacing: .005em; text-wrap: balance; }

.cs-hero { width: 100%; max-width: 120rem; margin-inline: auto; padding-inline: clamp(0rem, 2vw, 2rem); }
.cs-hero .cs-cap { padding-inline: var(--gutter); }

.cs-fig { margin: 0; min-width: 0; }
.cs-media { position: relative; overflow: hidden; border-radius: .25rem; background: #0b0b0b; }
.cs-fig--hero .cs-media { border-radius: 0; }
.cs-media img, .cs-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.cs-cap { display: flex; flex-wrap: wrap; gap: .15rem .6rem; margin-top: .75rem; font-size: .8125rem; line-height: 1.45; letter-spacing: .01em; color: var(--fg-3); }
.cs-cap span { color: var(--fg-2); font-weight: 500; }

.cs-vbtn { position: absolute; right: .75rem; bottom: .75rem; display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(244,243,239,.45); border-radius: 999px; background: rgba(0,0,0,.45); color: #F4F3EF; cursor: pointer; opacity: 0; transition: opacity .25s ease, border-color .2s ease; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.cs-vbtn svg { width: 16px; height: 16px; }
.cs-vbtn .i-play, .cs-vbtn[aria-pressed="true"] .i-pause { display: none; }
.cs-vbtn[aria-pressed="true"] .i-play { display: block; }
.cs-media:hover .cs-vbtn, .cs-vbtn:focus-visible, .cs-vbtn[aria-pressed="true"] { opacity: 1; }
.cs-vbtn:hover { border-color: #F4F3EF; }
@media (hover: none) { .cs-vbtn { opacity: .85; } }

.cs-intro { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1.25rem, 3vw, 3rem); row-gap: 2rem; padding-block: clamp(3.5rem, 2.5rem + 4vw, 7rem) clamp(3rem, 2rem + 4vw, 6rem); }
.cs-lede { grid-column: 1 / span 7; font: 400 clamp(1.375rem, 1.1rem + 1.1vw, 2.125rem)/1.3 var(--font-head); letter-spacing: 0; text-wrap: pretty; }
.cs-intro__body { grid-column: 9 / span 4; align-self: end; color: var(--fg-2); }
.cs-meta { grid-column: 1 / -1; margin-top: clamp(1rem, 2vw, 2rem); }
.cs-intro__text { grid-column: 1 / span 9; }
.cs-intro__text .cs-lede { max-width: 30em; }
.cs-intro__more { margin-top: clamp(1.25rem, 1rem + 1vw, 2rem); max-width: 38rem; font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); line-height: 1.6; color: var(--fg-2); text-wrap: pretty; }

.cs-archive { padding-bottom: clamp(3rem, 2rem + 4vw, 6rem); }
.cs-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1.25rem, 3vw, 3rem); row-gap: 1.25rem; padding-block: clamp(3.5rem, 2.5rem + 4vw, 7rem) clamp(2.5rem, 2rem + 3vw, 4.5rem); border-top: 1px solid var(--line); }
[data-theme="dark"] .cs-head, :root:not([data-theme]) .cs-head { border-top-color: #222; }
.cs-head .label { grid-column: 1 / -1; }
.cs-h2 { grid-column: 1 / span 6; font: 700 clamp(2rem, 1.3rem + 2.6vw, 3.5rem)/1.05 var(--font-head); letter-spacing: .005em; text-wrap: balance; }
.cs-head__body { grid-column: 8 / span 5; display: grid; gap: 1rem; color: var(--fg-2); }

.cs-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2.5vw, 2.5rem); row-gap: 2.5rem; align-items: start; margin-top: clamp(3rem, 2rem + 4vw, 6.5rem); }
.cs-row .span-3 { grid-column: span 3; } .cs-row .span-4 { grid-column: span 4; } .cs-row .span-5 { grid-column: span 5; }
.cs-row .span-7 { grid-column: span 7; } .cs-row .span-8 { grid-column: span 8; } .cs-row .span-10 { grid-column: span 10; }
.cs-row .push-1 { grid-column-end: span 3; grid-column-start: 10; } .cs-row .push-2 { grid-column: 3 / span 10; }
.cs-row .drop { align-self: end; }
.cs-row--screens { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: calc(62rem + 2 * var(--gutter)); }
.cs-row--screens > .cs-fig { grid-column: auto !important; }
.cs-row--ambition .span-3.drop { margin-bottom: 2.25rem; }
.cs-row--screens { column-gap: clamp(.75rem, 1.5vw, 1.5rem); }
.cs-row--set { column-gap: clamp(.75rem, 1.5vw, 1.5rem); }
.cs-row--summer { align-items: end; }

.cs-bleed { margin-top: clamp(3rem, 2rem + 4vw, 6.5rem); }
.cs-bleed .cs-media { border-radius: 0; }
.cs-bleed .cs-cap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.cs-bleed--band .cs-media { aspect-ratio: 3000 / 981; }

/* Production at scale */
.cs-scale { padding-block: clamp(4rem, 3rem + 5vw, 8rem); border-top: 1px solid var(--line); }
[data-theme="dark"] .cs-scale, :root:not([data-theme]) .cs-scale { border-top-color: #222; }
.cs-scale__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1.25rem, 3vw, 3rem); row-gap: 1.5rem; align-items: end; padding-bottom: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.cs-scale__head .label { grid-column: 1 / -1; }
.cs-scale__num { grid-column: 1 / span 7; display: flex; align-items: flex-start; font: 700 clamp(5rem, 2rem + 13vw, 13.5rem)/.82 var(--font-head); letter-spacing: 0; }
.cs-scale__num em { font-style: normal; color: var(--orange); font-size: .55em; line-height: 1; margin-left: .04em; }
.cs-scale__copy { grid-column: 8 / span 5; display: grid; gap: 1rem; color: var(--fg-2); }
.cs-scale__lead { font: 400 clamp(1.125rem, 1rem + .5vw, 1.375rem)/1.4 var(--font-head); color: var(--fg); }

/* Format wall: justified rows at true proportions */
.fw { display: flex; flex-wrap: wrap; gap: clamp(.375rem, .8vw, .75rem); }
.fw::after { content: ""; flex-grow: 999; }
.fw-tile { --h: clamp(3.75rem, 1.5rem + 6vw, 8rem); position: relative; flex: var(--r) 1 calc(var(--r) * var(--h)); }
.fw-tile img { display: block; width: 100%; height: auto; aspect-ratio: var(--r); object-fit: cover; border-radius: 2px; background: #0b0b0b; }
.fw-label { display: block; margin-top: .35rem; font-size: .6875rem; line-height: 1.3; letter-spacing: .04em; color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.js .fw-tile { opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); transition-delay: calc(var(--i, 0) * 35ms); }
.js .fw.is-in .fw-tile { opacity: 1; transform: none; }
.cs-note { margin-top: 1.5rem; font-size: .8125rem; color: var(--fg-3); }

/* Contribution + legal */
.cs-contrib { padding-block: clamp(3.5rem, 2.5rem + 4vw, 7rem); border-top: 1px solid var(--line); }
[data-theme="dark"] .cs-contrib, :root:not([data-theme]) .cs-contrib { border-top-color: #222; }
.cs-disciplines { display: flex; flex-wrap: wrap; gap: .1em 0; margin-top: 1.25rem; max-width: 22em; font: 400 clamp(1.75rem, 1.1rem + 2.6vw, 3.5rem)/1.15 var(--font-head); letter-spacing: 0; }
.cs-disciplines li:not(:last-child)::after { content: "/"; margin: 0 .3em; color: var(--orange); }
.cs-credit { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); max-width: 40rem; color: var(--fg-2); }
.cs-credit strong { color: var(--fg); font-weight: 600; }
.cs-legal { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); padding-top: 1rem; max-width: 46rem; border-top: 1px solid var(--line); font-size: .75rem; line-height: 1.55; letter-spacing: .01em; color: var(--fg-3); }
[data-theme="dark"] .cs-legal, :root:not([data-theme]) .cs-legal { border-top-color: #222; }

@media (max-width: 860px) {
  .cs-intro, .cs-head, .cs-scale__head { grid-template-columns: minmax(0, 1fr); }
  .cs-lede, .cs-intro__body, .cs-intro__text, .cs-h2, .cs-head__body, .cs-scale__num, .cs-scale__copy { grid-column: 1; }
  .cs-row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
  .cs-row > .cs-fig { grid-column: 1 / -1 !important; }
  .cs-row--screens > .cs-fig, .cs-row--set > .cs-fig { grid-column: auto !important; }
  .cs-row--ambition .span-3.drop { margin-bottom: 0; grid-column: 1 / -1 !important; max-width: 60%; }
  .cs-row--move > .cs-fig:first-child { max-width: 60%; }
}
@media (prefers-reduced-motion: reduce) { .js .fw-tile { opacity: 1; transform: none; } }

/* ---------- Case study v3: hero overlay, chapters, stats, sizes, carousel ---------- */
.cs-hero2 { position: relative; min-height: clamp(34rem, 88vh, 60rem); display: flex; align-items: flex-end; overflow: hidden; color: #F4F3EF; background: #000; }
.cs-hero2__media { position: absolute; inset: 0; }
.cs-hero2__media img { width: 100%; height: 100%; object-fit: cover; object-position: 0% 50%; }
.cs-hero2__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.35) 38%, rgba(0,0,0,0) 62%), linear-gradient(0deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,0) 45%); }
.cs-hero2__text { position: relative; padding-block: 2rem clamp(3rem, 2rem + 4vw, 6rem); }
.cs-hero2 .case__back, .cs-hero2 .cs-kicker__meta { color: rgba(244,243,239,.75); }
.cs-hero2 .cs-kicker .project__brand { color: #F4F3EF; }
.cs-hero2 .cs-title { color: #F4F3EF; max-width: 10em; }
.cs-hero2 .cs-title--brand { margin-top: 1.25rem; max-width: none; font-size: clamp(3rem, 1.4rem + 7vw, 8rem); line-height: .95; }
.cs-subtitle { margin-top: clamp(.75rem, .5rem + .8vw, 1.25rem); max-width: 22em; font: 400 clamp(1.25rem, 1rem + 1vw, 2rem)/1.25 var(--font-head); letter-spacing: 0; color: rgba(244,243,239,.88); text-wrap: balance; }
@media (max-width: 760px) { .cs-hero2__media img { object-position: 32% 50%; } .cs-hero2 { min-height: 34rem; } }

.cs-chapter { color: var(--orange); margin-right: .6rem; }
.cs-head--tight { padding-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.cs-behind { border-top: 1px solid var(--line); }
[data-theme="dark"] .cs-behind, :root:not([data-theme]) .cs-behind { border-top-color: #222; }
.cs-behind .cs-head { border-top: 0; }

.cs-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem clamp(1.25rem, 3vw, 3rem); margin: 0; padding-block: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-block: 1px solid var(--line); }
[data-theme="dark"] .cs-stats, :root:not([data-theme]) .cs-stats { border-color: #222; }
.cs-stats div { display: flex; flex-direction: column-reverse; gap: .5rem; }
.cs-stats dt { font-size: .875rem; letter-spacing: .01em; color: var(--fg-2); }
.cs-stats dd { margin: 0; font: 700 clamp(3rem, 1.5rem + 5vw, 6.5rem)/.9 var(--font-head); letter-spacing: 0; }
.cs-stats div:first-child dd { color: var(--fg); }

.cs-twocol { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1.25rem, 3vw, 3rem); row-gap: 2.5rem; padding-block: clamp(3rem, 2rem + 3vw, 5rem); }
.cs-twocol > :first-child { grid-column: 1 / span 5; }
.cs-twocol > :last-child { grid-column: 7 / span 6; }
.cs-twocol h3 { margin-bottom: 1.25rem; }
.cs-challenges li { position: relative; padding: .7rem 0 .7rem 1.5rem; border-top: 1px solid var(--line); font: 400 clamp(1.0625rem, 1rem + .3vw, 1.25rem)/1.35 var(--font-head); }
[data-theme="dark"] .cs-challenges li, :root:not([data-theme]) .cs-challenges li { border-top-color: #222; }
.cs-challenges li::before { content: ""; position: absolute; left: 0; top: 1.35rem; width: .6rem; height: 2px; background: var(--orange); }
.cs-approach { font: 400 clamp(1.375rem, 1.1rem + 1vw, 2rem)/1.3 var(--font-head); text-wrap: pretty; }
.cs-approach__sub { margin-top: 1.25rem; max-width: 34rem; color: var(--fg-2); }

.cs-shapes { padding-bottom: clamp(4rem, 3rem + 4vw, 7rem); }
.cs-shapes__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1.25rem, 3vw, 3rem); align-items: end; padding-block: clamp(1rem, 2vw, 2rem) clamp(1.5rem, 1rem + 2vw, 2.5rem); border-top: 1px solid var(--line); padding-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
[data-theme="dark"] .cs-shapes__head, :root:not([data-theme]) .cs-shapes__head { border-top-color: #222; }
.cs-h3 { grid-column: 1 / span 6; font: 700 clamp(1.75rem, 1.2rem + 2vw, 2.75rem)/1.08 var(--font-head); letter-spacing: .005em; text-wrap: balance; }
.cs-shapes__head p { grid-column: 8 / span 5; color: var(--fg-2); }

/* Format selector: four curated executions, shown uncropped at their true proportion */
.fm-controls { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem clamp(2rem, 5vw, 5rem); margin-bottom: clamp(1.25rem, 1rem + 1vw, 2rem); }
.fm-group { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.fm-label { color: var(--fg-3); }
.fm-opts { display: flex; flex-wrap: wrap; gap: 0 clamp(1rem, 2vw, 1.75rem); }
.fm-opt { position: relative; display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: 0; border: 0; background: none; color: var(--fg-3); font: 700 clamp(1rem, .92rem + .3vw, 1.1875rem)/1.1 var(--font-head); letter-spacing: .01em; cursor: pointer; transition: color .2s ease; }
.fm-opt::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease-out); }
.fm-opt:hover { color: var(--fg-2); }
.fm-opt[aria-pressed="true"] { color: var(--fg); }
.fm-opt[aria-pressed="true"]::after { transform: scaleX(1); }
.fm-glyph { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; }
.fm-glyph i { display: block; width: calc(min(1, var(--r)) * 1.15rem); height: calc(min(1, 1 / var(--r)) * 1.15rem); border: 1.5px solid currentColor; border-radius: 2px; }
.fm-opt[aria-pressed="true"] .fm-glyph i { border-color: var(--orange); }
.fm-stage { transition: height .55s var(--ease-out); position: relative; height: clamp(20rem, 8rem + 30vw, 34rem); display: grid; place-items: center; border-radius: .25rem; background: radial-gradient(ellipse at center, #111 0%, #050505 70%); overflow: hidden; }
[data-theme="light"] .fm-stage { background: #E9E8E3; }
.fm-frame { position: relative; width: 60%; aspect-ratio: 16 / 9; border-radius: 2px; overflow: hidden; background: #0b0b0b; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); transition: width .55s var(--ease-out), height .55s var(--ease-out), opacity .25s ease; }
.fm-frame.is-swapping { opacity: 0; }
.fm-frame img { display: block; width: 100%; height: 100%; object-fit: contain; }
.fm-cap { margin-top: .75rem; font-size: .8125rem; letter-spacing: .01em; color: var(--fg-3); }
@media (max-width: 760px) {
  .fm-controls { flex-direction: column; align-items: stretch; gap: .75rem; }
  .fm-opts { gap: 0 1.1rem; }
  .cs-stats dd { font-size: clamp(2.25rem, 1rem + 7vw, 3.5rem); }
}
@media (prefers-reduced-motion: reduce) { .fm-stage, .fm-frame, .fm-opt::after { transition: none; } }

/* Case study: tighter, image-led rhythm on phones */
@media (max-width: 760px) {
  .cs-intro { padding-block: 2.5rem 2.25rem; row-gap: 1.5rem; }
  .cs-head { padding-block: 2.75rem 1.5rem; row-gap: .75rem; }
  .cs-stats { padding-block: 1.25rem; }
  .cs-process { padding-block: 2rem 2.5rem; row-gap: 1.5rem; }
  .cs-process .cs-approach { font-size: 1.25rem; line-height: 1.35; }
  .cs-shapes { padding-bottom: 3rem; }
  .cs-shapes__head { padding-block: 2.25rem 1.25rem; }
  .fm-controls { gap: .5rem; margin-bottom: 1rem; }
  .fm-stage { margin-inline: calc(-1 * var(--gutter)); height: auto; min-height: 0; border-radius: 0; }
  .fm-frame { border-radius: 0; box-shadow: none; }
  .fm-cap { margin-top: .6rem; }
  .cs-row { margin-top: 2rem; }
  .cs-world { padding-bottom: 3rem; }
  .cs-contrib { padding-block: 2.75rem; }
}

.cs-credit { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); max-width: 40rem; color: var(--fg-2); }
.cs-credit strong { color: var(--fg); font-weight: 600; }
.cs-legal { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); padding-top: 1rem; max-width: 46rem; border-top: 1px solid var(--line); font-size: .75rem; line-height: 1.55; letter-spacing: .01em; color: var(--fg-3); }
[data-theme="dark"] .cs-legal, :root:not([data-theme]) .cs-legal { border-top-color: #222; }

@media (max-width: 860px) {
  .cs-intro, .cs-head, .cs-scale__head { grid-template-columns: minmax(0, 1fr); }
  .cs-lede, .cs-intro__body, .cs-intro__text, .cs-h2, .cs-head__body, .cs-scale__num, .cs-scale__copy { grid-column: 1; }
  .cs-row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
  .cs-row > .cs-fig { grid-column: 1 / -1 !important; }
  .cs-row--screens > .cs-fig, .cs-row--set > .cs-fig { grid-column: auto !important; }
  .cs-row--ambition .span-3.drop { margin-bottom: 0; grid-column: 1 / -1 !important; max-width: 60%; }
  .cs-row--move > .cs-fig:first-child { max-width: 60%; }
}
@media (prefers-reduced-motion: reduce) { .js .fw-tile { opacity: 1; transform: none; } }

/* ---------- Case study v3: hero overlay, chapters, stats, sizes, carousel ---------- */
.cs-hero2 { position: relative; min-height: clamp(34rem, 88vh, 60rem); display: flex; align-items: flex-end; overflow: hidden; color: #F4F3EF; background: #000; }
.cs-hero2__media { position: absolute; inset: 0; }
.cs-hero2__media img { width: 100%; height: 100%; object-fit: cover; object-position: 0% 50%; }
.cs-hero2__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.35) 38%, rgba(0,0,0,0) 62%), linear-gradient(0deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,0) 45%); }
.cs-hero2__text { position: relative; padding-block: 2rem clamp(3rem, 2rem + 4vw, 6rem); }
.cs-hero2 .case__back, .cs-hero2 .cs-kicker__meta { color: rgba(244,243,239,.75); }
.cs-hero2 .cs-kicker .project__brand { color: #F4F3EF; }
.cs-hero2 .cs-title { color: #F4F3EF; max-width: 10em; }
.cs-hero2 .cs-title--brand { margin-top: 1.25rem; max-width: none; font-size: clamp(3rem, 1.4rem + 7vw, 8rem); line-height: .95; }
.cs-subtitle { margin-top: clamp(.75rem, .5rem + .8vw, 1.25rem); max-width: 22em; font: 400 clamp(1.25rem, 1rem + 1vw, 2rem)/1.25 var(--font-head); letter-spacing: 0; color: rgba(244,243,239,.88); text-wrap: balance; }
@media (max-width: 760px) { .cs-hero2__media img { object-position: 32% 50%; } .cs-hero2 { min-height: 34rem; } }

.cs-chapter { color: var(--orange); margin-right: .6rem; }
.cs-head--tight { padding-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.cs-behind { border-top: 1px solid var(--line); }
[data-theme="dark"] .cs-behind, :root:not([data-theme]) .cs-behind { border-top-color: #222; }
.cs-behind .cs-head { border-top: 0; }

.cs-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem clamp(1.25rem, 3vw, 3rem); margin: 0; padding-block: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-block: 1px solid var(--line); }
[data-theme="dark"] .cs-stats, :root:not([data-theme]) .cs-stats { border-color: #222; }
.cs-stats div { display: flex; flex-direction: column-reverse; gap: .5rem; }
.cs-stats dt { font-size: .875rem; letter-spacing: .01em; color: var(--fg-2); }
.cs-stats dd { margin: 0; font: 700 clamp(3rem, 1.5rem + 5vw, 6.5rem)/.9 var(--font-head); letter-spacing: 0; }
.cs-stats div:first-child dd { color: var(--fg); }

.cs-twocol { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1.25rem, 3vw, 3rem); row-gap: 2.5rem; padding-block: clamp(3rem, 2rem + 3vw, 5rem); }
.cs-twocol > :first-child { grid-column: 1 / span 5; }
.cs-twocol > :last-child { grid-column: 7 / span 6; }
.cs-twocol h3 { margin-bottom: 1.25rem; }
.cs-process { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1.25rem, 3vw, 3rem); row-gap: 2rem; align-items: center; padding-block: clamp(3rem, 2rem + 3vw, 5rem); }
.cs-process .cs-approach { grid-column: 1 / span 7; }
.cs-process .cs-cans { grid-column: 10 / span 3; }
.cs-challenges li { position: relative; padding: .7rem 0 .7rem 1.5rem; border-top: 1px solid var(--line); font: 400 clamp(1.0625rem, 1rem + .3vw, 1.25rem)/1.35 var(--font-head); }
[data-theme="dark"] .cs-challenges li, :root:not([data-theme]) .cs-challenges li { border-top-color: #222; }
.cs-challenges li::before { content: ""; position: absolute; left: 0; top: 1.35rem; width: .6rem; height: 2px; background: var(--orange); }
.cs-approach { font: 400 clamp(1.375rem, 1.1rem + 1vw, 2rem)/1.3 var(--font-head); text-wrap: pretty; }
.cs-approach__sub { margin-top: 1.25rem; max-width: 34rem; color: var(--fg-2); }

.cs-shapes { padding-bottom: clamp(4rem, 3rem + 4vw, 7rem); }
.cs-shapes__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1.25rem, 3vw, 3rem); align-items: end; padding-block: clamp(1rem, 2vw, 2rem) clamp(1.5rem, 1rem + 2vw, 2.5rem); border-top: 1px solid var(--line); padding-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
[data-theme="dark"] .cs-shapes__head, :root:not([data-theme]) .cs-shapes__head { border-top-color: #222; }
.cs-h3 { grid-column: 1 / span 6; font: 700 clamp(1.75rem, 1.2rem + 2vw, 2.75rem)/1.08 var(--font-head); letter-spacing: .005em; text-wrap: balance; }
.cs-shapes__head p { grid-column: 8 / span 5; color: var(--fg-2); }

/* Sizes viewer */
.sz-stage { position: relative; height: clamp(16rem, 6rem + 30vw, 32rem); display: grid; place-items: center; border-radius: .25rem; background: radial-gradient(ellipse at center, #111 0%, #050505 70%); }
[data-theme="light"] .sz-stage { background: #E9E8E3; }
.sz-frame { position: relative; height: 86%; max-width: 92%; overflow: hidden; border-radius: 2px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); transition: aspect-ratio .6s var(--ease-out), height .6s var(--ease-out); }
.sz-frame img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity .35s ease; }
.sz-frame.is-wide { height: auto; width: 92%; }
.sz-frame.is-swapping img { opacity: 0; }
.sz-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1rem .5rem; }
.sz-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; }
.sz-meta strong { font: 700 clamp(1.25rem, 1rem + .8vw, 1.75rem)/1.1 var(--font-head); letter-spacing: .01em; }
.sz-meta span { font-size: .875rem; color: var(--fg-3); }
.sz-step { display: flex; align-items: center; gap: .5rem; }
.sz-count { min-width: 4.5em; text-align: center; font-size: .8125rem; letter-spacing: .04em; color: var(--fg-3); }
.sz-line { position: relative; --k: .11; display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem .5rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
[data-theme="dark"] .sz-line, :root:not([data-theme]) .sz-line { border-top-color: #222; }
.sz-tile { position: relative; display: block; padding: 0; width: calc(var(--w) * var(--k) * 1px); height: calc(var(--h) * var(--k) * 1px); border: 0; border-radius: 2px; background: #111; cursor: pointer; outline-offset: 3px; opacity: .55; transition: opacity .25s ease, transform .25s var(--ease-out); }
.sz-tile img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }
.sz-tile:hover { opacity: .9; }
.sz-tile[aria-pressed="true"] { opacity: 1; outline: 2px solid var(--orange); }
@media (max-width: 760px) {
  .sz-line { --k: .085; flex-wrap: nowrap; overflow-x: auto; padding-bottom: .75rem; scrollbar-width: thin; }
  .sz-tile { flex: none; }
  .cs-stats dd { font-size: clamp(2.25rem, 1rem + 7vw, 3.5rem); }
}

/* In-situ carousel */
.cs-world { padding-bottom: clamp(4rem, 3rem + 4vw, 7rem); border-top: 1px solid var(--line); }
[data-theme="dark"] .cs-world, :root:not([data-theme]) .cs-world { border-top-color: #222; }
.cs-world .cs-head { border-top: 0; }
.cr-stage { position: relative; }
.cr-slide { margin: 0; }
.cr-slide img { display: block; width: 100%; height: clamp(18rem, 8rem + 36vw, 44rem); object-fit: contain; background: #050505; border-radius: .25rem; }
[data-theme="light"] .cr-slide img { background: #E9E8E3; }
.cr-slide.is-on { animation: crIn .5s var(--ease-out); }
@keyframes crIn { from { opacity: 0; } to { opacity: 1; } }
.cr-nav { display: flex; align-items: center; gap: .75rem; margin-top: 1rem; }
.cr-dots { display: flex; gap: .25rem; }
.cr-dot { width: 28px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer; }
.cr-dot::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--line-strong); transition: background .2s ease, width .3s var(--ease-out); }
.cr-dot[aria-pressed="true"]::before { width: 22px; background: var(--orange); }
.cr-count { margin-left: auto; font-size: .8125rem; letter-spacing: .04em; color: var(--fg-3); }

@media (max-width: 860px) {
  .cs-twocol { grid-template-columns: minmax(0, 1fr); }
  .cs-twocol > :first-child, .cs-twocol > :last-child { grid-column: 1; }
  .cs-process { grid-template-columns: minmax(0, 1fr); }
  .cs-process .cs-approach, .cs-process .cs-cans { grid-column: 1; }
  .cs-process .cs-cans { width: min(78%, 22rem); }
  .cs-shapes__head { grid-template-columns: minmax(0, 1fr); row-gap: 1rem; }
  .cs-h3, .cs-shapes__head p { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) { .cr-slide.is-on { animation: none; } }