/* Alexandra Hawley — portfolio
   Source of truth: Paper file "Alexandra Hawley — Portfolio", page "02 — Resolved: Editorial".
   Tokens mirror the Paper tokens one-to-one. Desktop values are authored at 1440 and scale by vw down to 1024. */

:root {
  --bone: #EEEAE3;
  --ink: #161512;
  --stone: #5E5A52;
  --plaster: #DAD4CA;
  --moss: #3E4A2F;
  --night: #12100D;
  --paper: #FFFFFF;
  --night-text: #ECE6DC;
  --night-muted: #9A9286;

  --font-display: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --text-micro: 11px;
  --text-small: 13px;
  --tracking-mast: -0.055em;
  --tracking-tight: -0.045em;
  --tracking-label: 0.04em;

  --gutter: 40px;
  --gap: 24px;
  --section-gap: clamp(120px, 13.9vw, 200px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 64px; }
body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, p, figure, dl, dd, ul { margin: 0; padding: 0; }
ul { list-style: none; }

:focus-visible { outline: 2px solid var(--moss); outline-offset: 3px; }
.u, .contact-email, .about-text a { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--moss); }
.mono { font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.muted { color: var(--stone); }
.small { font-size: var(--text-small); line-height: 19px; }
.m-only { display: none !important; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 50; background: var(--ink); color: var(--bone); padding: 10px 14px; font-size: var(--text-small); }
.skip:focus { top: 12px; }

/* Content never grows past the 1440 artboard; the bone ground runs full-bleed. */
.intro, .section, .foot { max-width: 1440px; margin-inline: auto; }

/* ───────── Top nav (in flow) ───────── */
.topnav {
  grid-area: nav;
  display: grid; grid-template-columns: 340px 1fr auto; align-items: baseline;
  padding: 22px var(--gutter); font-size: var(--text-small);
}
.topnav-name { font-weight: 500; }
.topnav-role { color: var(--stone); }
.topnav-links { display: flex; gap: 28px; }
.topnav-mono, .topnav-menu { display: none; }

/* ───────── Sticky bar ───────── */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: grid; grid-template-columns: 340px 1fr auto; align-items: baseline;
  padding: 16px var(--gutter); background: var(--bone); border-bottom: 1px solid var(--ink);
  font-size: var(--text-small);
  transform: translateY(-101%); transition: transform .35s var(--ease);
}
.bar.is-shown { transform: none; }
.bar-name { font-weight: 700; font-size: 18px; letter-spacing: -0.03em; }
.bar-section { color: var(--stone); }
.bar-links { display: flex; gap: 28px; }
.bar-links a.is-active { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--moss); text-decoration-thickness: 2px; }
.bar-menu { display: none; }

/* ───────── Intro ───────── */
.intro {
  display: grid;
  grid-template-columns: var(--gutter) min(37.5vw, 540px) var(--gap) 1fr var(--gutter);
  grid-template-areas:
    "nav   nav   nav  nav   nav"
    "name  name  name name  name"
    "deck  deck  deck deck  deck"
    ".     media .    aside .";
}
.intro-name {
  grid-area: name;
  padding: 36px 34px 0;
  font-weight: 700; font-size: min(11.2vw, 164px); line-height: .87; letter-spacing: var(--tracking-mast);
  white-space: nowrap;
}
.intro-deck {
  grid-area: deck;
  display: grid; grid-template-columns: 340px 340px 1fr auto; align-items: end;
  margin: 24px var(--gutter) 24px; padding-bottom: 14px; border-bottom: 1px solid var(--ink);
  font-size: var(--text-small); line-height: 19px;
}
.intro-media { grid-area: media; position: relative; aspect-ratio: 9 / 16; background: var(--plaster) url("media/hero-byera-poster-720.webp") center / cover; overflow: hidden; }
.hero-video { width: 100%; height: 100%; object-fit: cover; }
.intro-media figcaption { position: absolute; left: 16px; bottom: 14px; color: var(--paper); }
.intro-aside { grid-area: aside; display: flex; flex-direction: column; gap: 40px; padding-top: clamp(96px, 16.7vw, 240px); }
.statement { font-family: var(--font-serif); font-size: clamp(34px, 3.61vw, 52px); line-height: 1.04; letter-spacing: -0.015em; max-width: 12.2em; }
.intro-links { display: flex; gap: 28px; font-size: 15px; }
.intro-links a { text-underline-offset: 5px; }
.intro-feature { display: flex; gap: var(--gap); align-items: flex-end; padding-top: 40px; }
.intro-feature { margin: 0; }
.feature-media { display: block; width: min(19.5vw, 280px); aspect-ratio: 3 / 4; overflow: hidden; background: var(--plaster); }
.feature-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
@media (hover: hover) { .feature-media:hover img { transform: scale(1.015); } }
.feature-cap { display: flex; flex-direction: column; gap: 4px; font-size: var(--text-small); line-height: 19px; }
.feature-cap b { font-weight: 500; }
.feature-cap span { color: var(--stone); }
.feature-cap a { padding-top: 10px; }
.intro-actions { grid-area: actions; }

/* ───────── Sections ───────── */
.section { padding: var(--section-gap) var(--gutter) 0; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 18px; border-bottom: 1px solid var(--ink); }
.section-head h2 { font-weight: 700; font-size: 64px; line-height: .94; letter-spacing: var(--tracking-tight); }

/* Work */
.work-body {
  display: grid; grid-template-columns: 240fr 360fr 260fr 428fr; gap: var(--gap);
  padding-top: 28px; align-items: start;
}
.work-lead { display: none; }
.work-rail { display: flex; flex-direction: column; gap: 18px; font-size: var(--text-small); line-height: 19px; position: sticky; top: 88px; }
.work-rail .mono { line-height: 18px; padding-top: 14px; }
.work-col { display: flex; flex-direction: column; gap: 56px; }
.col-b { padding-top: 16.67vw; }
.col-c { padding-top: 6.1vw; }

.tile { display: flex; flex-direction: column; gap: 10px; }
.tile-media {
  position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; overflow: hidden;
  background: var(--plaster); text-align: left;
}
.tile-media img, .tile-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile-media img { transition: transform 1.2s var(--ease); }
.tile-media video { opacity: 0; transition: opacity .4s var(--ease); }
.tile-media.is-previewing video { opacity: 1; }
.tile-hint { position: absolute; left: 14px; bottom: 12px; color: var(--paper); opacity: 0; transition: opacity .3s var(--ease); z-index: 1; }
.tile-media.is-previewing .tile-hint, .tile-media:focus-visible .tile-hint { opacity: 1; }
@media (hover: hover) { .tile-media:hover img { transform: scale(1.015); } }
.tile-cap { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: baseline; font-size: var(--text-small); line-height: 19px; }
.tile-cap .n, .tile-cap .d { color: var(--stone); }
.tile-cap b { font-weight: 500; }
.tile-cap .cat { color: var(--stone); }

/* Modeling */
.modeling-body { display: grid; grid-template-columns: 240px 1fr; gap: var(--gap); padding-top: 28px; align-items: start; }
.stats { line-height: 24px; }
.stats-agency { color: var(--stone); line-height: 18px; padding-bottom: 12px; }
.stats dl div { display: flex; gap: 8px; }
.stats dt::after { content: ""; }
.mod-grid { display: grid; grid-template-columns: 420fr 320fr 400fr; gap: var(--gap); align-items: start; }
.mod-col { display: flex; flex-direction: column; gap: 48px; }
.mod-col-b { padding-top: 12.5vw; }
.mod-col-c { padding-top: 4.4vw; }
.mod { display: flex; flex-direction: column; gap: 10px; }
.mod-media { position: relative; display: block; overflow: hidden; background: var(--plaster); }
.mod-media img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; transition: transform 1.2s var(--ease); }
.mod-media .tile-hint { color: var(--paper); text-shadow: 0 1px 8px rgba(0, 0, 0, .35); }
@media (hover: hover) { .mod-media:hover img { transform: scale(1.015); } .mod-media:hover .tile-hint { opacity: 1; } }
.mod-media:focus-visible .tile-hint { opacity: 1; }
.mod figcaption { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; color: var(--stone); }
.mod figcaption a { color: var(--ink); text-transform: none; letter-spacing: 0; font-family: var(--font-display); font-size: var(--text-small); }
.mod figcaption a b { font-weight: 500; }
.mod figcaption a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Hero: whole loop is a play button for the full BY:ERA film */
.hero-play { position: absolute; inset: 0; width: 100%; z-index: 1; cursor: pointer; }
.hero-play .tile-hint { left: 16px; bottom: 14px; }
@media (hover: hover) { .hero-play:hover .tile-hint { opacity: 1; } }
.hero-play:focus-visible .tile-hint { opacity: 1; }
.feature-cap a b { font-weight: 500; }

/* ───────── Shoot viewer ───────── */
.viewer { position: fixed; inset: 0; z-index: 60; background: var(--night); color: var(--night-text); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; animation: fade .25s var(--ease); }
.viewer[hidden] { display: none; }
.viewer-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 28px 40px 16px; }
.viewer-title h2 { font-weight: 700; font-size: 40px; line-height: 1; letter-spacing: var(--tracking-tight); }
.viewer-title p { color: var(--night-muted); padding-top: 10px; }
.viewer-actions { display: flex; gap: 24px; align-items: center; font-size: var(--text-small); }
.viewer-actions button, .viewer-actions a { min-height: 44px; display: inline-flex; align-items: center; }
.viewer-stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 0 88px; }
.viewer-stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; cursor: pointer; user-select: none; }
.viewer-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 64px; height: 64px; font-size: 22px; color: var(--night-text); }
.viewer-arrow[data-v-prev] { left: 16px; }
.viewer-arrow[data-v-next] { right: 16px; }
.viewer-foot { display: flex; align-items: center; gap: 24px; padding: 16px 40px 24px; }
.viewer-foot .mono { color: var(--night-muted); flex-shrink: 0; width: 64px; }
.viewer-thumbs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
.viewer-thumbs::-webkit-scrollbar { display: none; }
.viewer-thumbs button { flex: 0 0 auto; width: 44px; height: 58px; opacity: .45; transition: opacity .2s var(--ease); }
.viewer-thumbs button[aria-current=true], .viewer-thumbs button:hover { opacity: 1; }
.viewer-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.viewer :focus-visible { outline-color: var(--night-text); }

/* Row sections: label rail + body */
.row { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--gap); align-items: start; }
.row-label { font-size: var(--text-small); font-weight: 400; padding-top: 12px; line-height: 19px; }
.clients .row-body { border-top: 1px solid var(--ink); }
.client-list li { font-weight: 700; font-size: 64px; line-height: 76px; letter-spacing: var(--tracking-tight); border-bottom: 1px solid var(--plaster); }
.client-list a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.client-list a:hover { text-decoration: none; }
.client-list a:hover > span:first-child { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; text-decoration-color: var(--moss); }
.client-kind { color: var(--stone); font-weight: 400; letter-spacing: var(--tracking-label); }
.client-brands { display: grid; grid-template-columns: 180px 1fr; gap: var(--gap); padding-top: 24px; font-size: var(--text-small); line-height: 19px; }
.about-text { font-family: var(--font-serif); font-size: clamp(30px, 2.78vw, 40px); line-height: 1.15; letter-spacing: -0.012em; max-width: 22em; }
.audience { padding-top: 160px; }
.figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.figures > div { display: flex; flex-direction: column; gap: 6px; padding: 18px 24px 0; border-left: 1px solid var(--plaster); min-width: 0; }
.figures > div:first-child { padding-left: 0; border-left: 0; }
.figures dt { order: 2; font-size: var(--text-small); }
.figures dd { order: 1; font-weight: 700; font-size: 56px; line-height: 1; letter-spacing: var(--tracking-tight); }
.figures dd.note { order: 3; font-weight: 400; font-size: var(--text-micro); letter-spacing: var(--tracking-label); }
.figures dd.tbd { color: var(--stone); font-size: clamp(12px, 1.2vw, 17px); letter-spacing: 0; font-family: var(--font-mono); padding: 18px 0 12px; overflow-wrap: anywhere; }
.figures-detail { padding-top: 28px; line-height: 18px; max-width: 60em; }
.services-body { display: grid; grid-template-columns: 1fr 1fr 300px; gap: var(--gap); border-top: 1px solid var(--ink); padding-top: 18px; }
.services-body li { font-size: 22px; line-height: 36px; letter-spacing: -0.01em; }

/* Contact */
.contact-title { font-weight: 700; font-size: min(11.2vw, 164px); line-height: .87; letter-spacing: var(--tracking-mast); padding-bottom: 18px; }
.contact-body { display: grid; grid-template-columns: 560fr 776fr; gap: var(--gap); border-top: 1px solid var(--ink); padding-top: 24px; }
.contact-direct { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.contact-email { font-family: var(--font-serif); font-size: clamp(34px, 3.61vw, 52px); line-height: 1.08; letter-spacing: -0.015em; text-underline-offset: 8px; word-break: break-word; }
.brief { display: flex; flex-direction: column; }
.brief-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.brief label { display: flex; flex-direction: column; border-bottom: 1px solid var(--ink); padding-top: 14px; }
.brief label span { font-size: 13px; color: var(--stone); }
.brief input, .brief textarea {
  font: inherit; font-size: 16px; color: var(--ink); background: transparent; border: 0; border-radius: 0;
  padding: 6px 0 12px; resize: vertical; -webkit-appearance: none; appearance: none;
}
.brief input:focus, .brief textarea:focus { outline: none; }
.brief label:focus-within { border-bottom-color: var(--moss); box-shadow: 0 1px 0 var(--moss); }
.brief .is-invalid { border-bottom-color: #8A2B1E; }
.brief-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 18px; }
.btn { display: inline-flex; justify-content: center; align-items: center; min-height: 48px; padding: 0 28px; font-size: var(--text-small); }
.btn-solid { background: var(--ink); color: var(--bone); }
.btn-solid:hover { background: #000; text-decoration: none; }
.btn-line { border: 1px solid var(--ink); }

.foot { display: grid; grid-template-columns: 340px 1fr auto; padding: 160px var(--gutter) 32px; font-size: var(--text-small); }
.foot-links { display: flex; gap: 28px; }

/* ───────── Menu (mobile) ───────── */
.menu { position: fixed; inset: 0; z-index: 40; background: var(--ink); color: var(--bone); display: flex; flex-direction: column; padding: max(18px, env(safe-area-inset-top)) 16px max(28px, env(safe-area-inset-bottom)); }
.menu[hidden] { display: none; }
.menu-top { display: flex; justify-content: space-between; align-items: center; font-size: 14px; min-height: 44px; }
.menu-top span { font-weight: 500; }
.menu-top button { min-height: 44px; padding: 0 0 0 16px; }
.menu-links { display: flex; flex-direction: column; padding-top: 56px; }
.menu-links a { font-weight: 700; font-size: 52px; line-height: 62px; letter-spacing: var(--tracking-tight); }
.menu-foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: #B9B2A6; }
.menu-email { font-family: var(--font-serif); font-size: 26px; color: var(--bone); padding-bottom: 8px; word-break: break-word; }

/* ───────── Player ───────── */
.player {
  position: fixed; inset: 0; z-index: 60; background: var(--night); color: var(--night-text);
  display: grid; grid-template-columns: 380px 1fr 380px; gap: 40px; padding: 40px;
  animation: fade .25s var(--ease);
}
.player[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } }
.player-meta { display: flex; flex-direction: column; justify-content: space-between; }
.player-count { color: var(--night-muted); }
.player-copy { display: flex; flex-direction: column; gap: 18px; }
.player-copy h2 { font-weight: 700; font-size: 56px; line-height: .96; letter-spacing: var(--tracking-tight); }
.player-line { font-family: var(--font-serif); font-size: 26px; line-height: 1.15; }
.player-facts { color: var(--night-muted); line-height: 18px; padding-top: 6px; }
.player-nav { display: flex; gap: 24px; font-size: var(--text-small); }
.player-nav button, .player-close button, .player-controls button { min-height: 44px; }
.player-stage { display: flex; flex-direction: column; align-items: center; gap: 10px; min-height: 0; }
.player-stage video { height: calc(100vh - 80px - 54px); height: calc(100svh - 80px - 54px); aspect-ratio: 9 / 16; max-width: 100%; object-fit: cover; background: var(--night); }
.player-controls { display: flex; align-items: center; gap: 16px; width: min(100%, calc((100svh - 134px) * 9 / 16)); font-size: var(--text-small); }
.player-controls [data-p-toggle] { width: 48px; text-align: left; }
.player-controls input[type=range] { flex: 1; min-width: 0; -webkit-appearance: none; appearance: none; height: 24px; background: transparent; }
.player-controls input[type=range]::-webkit-slider-runnable-track { height: 1px; background: #4A443C; }
.player-controls input[type=range]::-moz-range-track { height: 1px; background: #4A443C; }
.player-controls input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 10px; border-radius: 50%; background: var(--night-text); margin-top: -4.5px; }
.player-controls input[type=range]::-moz-range-thumb { width: 10px; height: 10px; border: 0; border-radius: 50%; background: var(--night-text); }
.player-time { color: var(--night-muted); min-width: 84px; text-align: right; }
.player-sound { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.player-sound i { width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--night-muted); }
.player-sound[aria-pressed=true] i { background: #9DB07F; border-color: #9DB07F; }
.player-close { display: flex; justify-content: flex-end; align-items: flex-start; font-size: var(--text-small); }
.player-mobile-meta { display: none; }
.player :focus-visible { outline-color: var(--night-text); }

/* ───────── Tablet: 768–1023 ───────── */
@media (max-width: 1023px) {
  :root { --gutter: 28px; }
  .topnav { grid-template-columns: 1fr auto; }
  .topnav-role { display: none; }
  .intro-name { padding-inline: calc(var(--gutter) - 5px); }
  .intro-deck { grid-template-columns: 1fr 1fr 1fr; }
  .intro-deck .mono { display: none; }
  .work-body { grid-template-columns: 1fr 1fr 1fr; }
  .work-rail { grid-column: 1 / -1; position: static; flex-direction: row; gap: var(--gap); }
  .work-rail > * { flex: 1; }
  .work-rail .mono { padding-top: 0; }
  .col-b { padding-top: 18vw; }
  .col-c { padding-top: 8vw; }
  .mod-col { gap: 32px; }
  .row, .modeling-body { grid-template-columns: 1fr; }
  .stats dl { display: flex; flex-wrap: wrap; column-gap: 20px; }
  .services-body { grid-template-columns: 1fr 1fr; }
  .services-body p { grid-column: 1 / -1; }
  .figures { grid-template-columns: repeat(2, 1fr); }
  .figures > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .figures > div { padding-bottom: 18px; }
  .figures-detail { grid-template-columns: 1fr 1fr; }
  .contact-body { grid-template-columns: 1fr; gap: 48px; }
  .player { grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; gap: 20px; padding: 24px; }
  .player-meta { grid-column: 1; grid-row: 1; gap: 12px; }
  .player-copy h2 { font-size: 36px; }
  .player-line { display: none; }
  .player-close { grid-column: 2; grid-row: 1; }
  .player-stage { grid-column: 1 / -1; grid-row: 2; }
  .player-stage video { height: calc(100svh - 250px); }
  .player-controls { width: min(100%, calc((100svh - 250px) * 9 / 16)); }
  .foot { grid-template-columns: 1fr; gap: 10px; }
}

/* ───────── Mobile: < 768 ───────── */
@media (max-width: 767px) {
  :root { --gutter: 16px; --gap: 10px; --section-gap: 72px; }
  html { scroll-padding-top: 56px; }
  .d-only { display: none !important; }
  .m-only { display: revert !important; }
  a.m-only, button.m-only { display: inline-flex !important; }

  /* Intro: loop is full-bleed with name over it */
  .intro {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto auto auto auto;
    grid-template-areas: "nav" "." "name" "deck" "actions" "aside";
  }
  .intro-media { grid-row: 1 / 5; grid-column: 1; aspect-ratio: auto; height: calc(100svh - 56px); min-height: 560px; max-height: 900px; }
  .intro-media::after { content: ""; position: absolute; inset: 0; background: rgba(18, 16, 13, .16); pointer-events: none; }
  .intro-media figcaption { display: none; }
  .topnav, .intro-name, .intro-deck { position: relative; z-index: 1; color: var(--paper); }
  .topnav { grid-template-columns: 1fr auto; padding: max(14px, env(safe-area-inset-top)) 16px 0; font-size: 14px; }
  .topnav-name, .topnav-role, .topnav-links { display: none; }
  .topnav-mono { display: block; font-weight: 500; align-self: center; }
  .topnav-menu { display: block; min-height: 44px; padding-left: 16px; }
  .intro-name { font-size: min(15.4vw, 72px); line-height: .9; white-space: normal; padding: 0 16px; max-width: 6.5em; }
  .intro-deck { grid-template-columns: 1fr auto; margin: 12px 16px 0; padding-bottom: 18px; border: 0; font-size: 13px; line-height: 18px; }
  .intro-deck span:nth-child(2) { text-align: right; }
  .intro-actions { display: grid !important; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--ink); font-size: 15px; }
  .intro-actions a { padding: 17px 16px; min-height: 56px; display: flex; align-items: center; }
  .intro-actions a:first-child { border-right: 1px solid var(--ink); }
  .intro-aside { padding: 44px 16px 0; gap: 0; }
  .statement { font-size: 32px; line-height: 34px; max-width: none; }

  .bar { grid-template-columns: 1fr auto; padding: 12px 16px; padding-top: max(12px, env(safe-area-inset-top)); }
  .bar-section, .bar-links { display: none; }
  .bar-name { font-size: 16px; }
  .bar-menu { display: block; min-height: 32px; font-size: 14px; }

  .section-head h2 { font-size: 36px; line-height: 1; }
  .section-head { padding-bottom: 10px; }

  /* Work: lead tile, then 2-column stagger */
  .work-body { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; padding-top: 16px; padding-bottom: 64px; }
  .work-rail { display: none; }
  .work-lead { display: block; grid-column: 1 / -1; padding-bottom: 28px; }
  .work-col { gap: 24px; padding-top: 0; }
  .col-b { transform: translateY(64px); }
  .col-c { display: none; }
  .tile-cap { grid-template-columns: 1fr auto; gap: 0 8px; align-items: end; font-size: 12px; line-height: 16px; }
  .tile-cap .n, .tile-cap .dash { display: none; }
  .tile-cap .t { display: flex; flex-direction: column; }
  .work-lead .tile-cap { grid-template-columns: 20px 1fr auto; gap: 8px; font-size: 13px; }
  .work-lead .tile-cap .n { display: block; }
  .work-lead .tile-cap .t { display: block; }
  .work-lead .tile-cap .dash { display: inline; }
  .tile-play { position: absolute; left: 12px; bottom: 12px; z-index: 1; background: var(--bone); color: var(--ink); padding: 8px 12px; font-size: 13px; }

  /* Modeling: swipe strip */
  .modeling { padding-right: 0; }
  .modeling .section-head { margin-right: 16px; }
  .modeling-body { display: flex; flex-direction: column-reverse; align-items: stretch; gap: 14px; padding-top: 14px; }
  .mod-grid { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding-right: 16px; scrollbar-width: none; }
  .mod-grid::-webkit-scrollbar { display: none; }
  .mod-col { display: contents; }
  .mod { flex: 0 0 72%; scroll-snap-align: start; gap: 8px; }
  .mod figcaption { grid-template-columns: 1fr auto; font-size: 10px; }
  .mod figcaption > span:first-child { display: none; }
  .mod-media .tile-hint { opacity: 1; font-size: 10px; }
  .viewer-top { padding: max(14px, env(safe-area-inset-top)) 16px 10px; }
  .viewer-title h2 { font-size: 26px; }
  .viewer-title p { padding-top: 6px; font-size: 10px; }
  .viewer-actions { gap: 14px; }
  .viewer-stage { padding: 0; }
  .viewer-arrow { display: none; }
  .viewer-foot { padding: 10px 16px max(18px, env(safe-area-inset-bottom)); gap: 12px; }
  .viewer-foot .mono { width: 52px; }
  .viewer-thumbs button { width: 36px; height: 48px; }
  .stats { padding-right: 16px; }
  .stats-agency { padding-bottom: 6px; }
  .stats dl { display: flex; flex-wrap: wrap; column-gap: 14px; line-height: 20px; }

  .row { gap: 10px; }
  .row-label { padding-top: 0; }
  .client-list li { font-size: 36px; line-height: 48px; }
  .client-brands { grid-template-columns: 1fr; gap: 2px; padding-top: 14px; }
  .about-text { font-size: 26px; line-height: 31px; }
  .audience { padding-top: 72px; }
  .figures dd { font-size: 40px; }
  .figures dd.tbd { font-size: 12px; padding: 10px 0 6px; word-break: break-all; }
  .figures > div { padding: 14px 0 14px 14px; }
  .figures > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .figures > div:nth-child(n+3) { border-top: 1px solid var(--plaster); }
  .figures-detail { grid-template-columns: 1fr; gap: 4px; padding-top: 16px; }
  .services-body { grid-template-columns: 1fr; gap: 0; padding-top: 10px; }
  .services-body li { font-size: 20px; line-height: 29px; }
  .services-body p { padding-top: 12px; }

  .contact { padding-top: 88px; }
  .contact-title { font-size: 52px; line-height: .92; padding-bottom: 14px; }
  .contact-body { gap: 28px; padding-top: 14px; }
  .contact-email { font-size: 28px; line-height: 32px; text-underline-offset: 6px; }
  .contact-direct { align-items: stretch; gap: 10px; }
  .contact-direct .btn { width: 100%; min-height: 52px; font-size: 15px; }
  .contact-direct p { padding-top: 6px; }
  .brief.is-collapsed { display: none; }
  .brief-row { grid-template-columns: 1fr; gap: 0; }
  .brief-foot { flex-direction: column; align-items: stretch; }
  .brief-foot .btn { width: 100%; min-height: 52px; }

  .foot { padding: 72px 16px max(40px, env(safe-area-inset-bottom)); font-size: 12px; color: var(--stone); }
  .foot-links { flex-wrap: wrap; gap: 16px; }

  /* Player: full screen, controls in a bottom panel */
  .player { display: flex; flex-direction: column; padding: 0; gap: 0; }
  .player[hidden] { display: none; }
  .player-meta { display: none; }
  .player-stage { flex: 1; gap: 0; align-items: stretch; }
  .player-stage video { flex: 1; width: 100%; height: auto; min-height: 0; aspect-ratio: auto; }
  .player-controls { width: auto; padding: 12px 16px 4px; gap: 12px; }
  .player-time { min-width: 0; }
  .player-mobile-meta { display: flex; justify-content: space-between; align-items: flex-end; padding: 6px 16px max(22px, env(safe-area-inset-bottom)); }
  .player-mobile-meta div { display: flex; flex-direction: column; gap: 2px; }
  .player-mobile-meta b { font-size: 22px; letter-spacing: -0.03em; }
  .player-mobile-meta span { font-size: 13px; color: var(--night-muted); }
  .player-mobile-meta button { font-size: 13px; min-height: 44px; }
  .player-close { position: absolute; top: max(12px, env(safe-area-inset-top)); right: 12px; }
  .player-close button { background: rgba(18, 16, 13, .55); padding: 0 14px; }
}

/* ───────── Reduced motion ───────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .tile-media:hover img { transform: none; }
}