@font-face { font-family: "Clash Display"; src: url("/assets/fonts/ClashDisplay-Semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("/assets/fonts/Satoshi-Medium.woff2") format("woff2"); font-weight: 400 500; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("/assets/fonts/Satoshi-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --pad: 6.25vw;             /* 90px at 1440 wide */
  --display: "Clash Display", system-ui, sans-serif;
  --text: "Satoshi", system-ui, sans-serif;
  --fg: #fff;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0b0907; color: var(--fg); font-family: var(--text); -webkit-font-smoothing: antialiased; }
body.is-home { overflow: hidden; }
a { color: inherit; text-decoration: none; }
#scene { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; z-index: 0; }

/* header: name on the left, About on the right */
.top { position: fixed; z-index: 20; top: 35px; left: var(--pad); right: var(--pad); display: flex; justify-content: space-between; align-items: center;
  font: 700 14px/21px var(--text); letter-spacing: 2px; text-transform: uppercase; color: var(--ui, #fff); transition: color var(--ui-speed, 0s) cubic-bezier(.39,.575,.565,1); pointer-events: none; }
.top a { pointer-events: auto; }
.name { display: inline-flex; white-space: pre; }
.name span { display: inline-block; will-change: transform; }

/* the headline for the current section: centred between the header and the preview card */
.headlines { position: fixed; inset: 0; z-index: 10; overflow: hidden; pointer-events: none; }
.headline, .headline .layer { position: absolute; inset: 0; }
.headline .layer { padding-top: 52px; display: flex; align-items: center; justify-content: flex-start; }
.headline .wrap { width: 100%; padding: 0 var(--pad); }
.headline .title { margin-bottom: 0.91vw; font: 600 9.375vw/1em var(--display); }
.headline h1 { margin: 0; font: inherit; line-height: inherit; white-space: nowrap; }
.headline h1.outline { color: transparent; -webkit-text-stroke-width: 2px; }
.headline p { margin: 0; max-width: 580px; font: 400 20px/32px var(--text); }
.headline .cta { margin-top: 34px; display: inline-flex; align-items: center; gap: 12px; font: 700 16px/24px var(--text); letter-spacing: 2px; text-transform: uppercase; pointer-events: auto; }
.headline .cta svg { width: 17px; height: 14px; transition: transform .3s cubic-bezier(.4,0,.2,1); }
.headline .cta:hover svg { transform: translateX(5px); }
@media (max-width: 768px) { .headline .cta { font-size: 14px; } }
@media (min-width: 2001px) { .headline p { max-width: 700px; } .headline .cta { margin-top: 54px; font-size: 20px; } }

/* dots, one per section; on hover they open into the list of section names (fast navigation) */
.dots { position: fixed; z-index: 12; right: var(--pad); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: flex-end; justify-content: center; width: 35px; pointer-events: auto; }
.layer.fast .dots { width: auto; }
.fn-item { position: relative; padding: 5px 40px 5px 0; margin-right: -10px; white-space: nowrap; cursor: pointer; will-change: transform; transition-property: color, opacity; transition-timing-function: cubic-bezier(.39,.575,.565,1); }
.fn-label { font: 700 16px/24px var(--text); letter-spacing: 1px; text-transform: uppercase; visibility: hidden; }
.fn-bullet { position: absolute; top: 50%; right: 10px; min-width: 8px; height: 16px; border-radius: 4px; transform: translate3d(0,-50%,0); transition: background-color inherit; }
@media (min-width: 2001px) { .fn-item { padding: 8px 50px 8px 0; } .fn-bullet { height: 20px; } }
.fn-layer { position: absolute; inset: 0; z-index: 11; pointer-events: none; }
.layer.fast .fn-layer { pointer-events: auto; cursor: pointer; }
.layer .top { transition: opacity .35s cubic-bezier(.4,0,.4,1); }
.layer.fast .top { opacity: 0; }
.layer .headlines { transition: opacity .2s cubic-bezier(.4,0,.4,1) .1s; }
.layer.fast .headlines { opacity: 0; transition-delay: 0s; }

/* ---------- section pages ---------- */
body.is-page #scene { visibility: hidden; }
.page { --u: calc((100vw - 2 * var(--pad) + 45px) / 12); color: var(--ink); }
.page .hero { position: relative; height: 100vh; background: var(--hero); overflow: hidden; }
.page .hero-img { position: absolute; left: 50%; top: 50%; width: 46vw; aspect-ratio: 1366 / 844; object-fit: cover; transform: translate(-50%, -50%); }
.page .hero-title { position: absolute; left: var(--pad); top: calc(50% - 0.5 * 9.375vw + 18px); margin: 0; font: 600 9.375vw/1em var(--display); color: var(--hero-ink); white-space: nowrap; }
.page .down { position: absolute; left: 50%; bottom: 40px; width: 56px; height: 56px; margin-left: -28px; padding: 0; border: 0; background: none; color: var(--hero-ink); cursor: pointer; }
.page .down svg { width: 100%; height: 100%; display: block; }
.page .body { background: var(--body); padding-bottom: 0; }

/* the 12-column grid: 45 px gutters inside the page margins */
.block { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 45px; padding: 192px var(--pad) 0; }
.block.tight { padding-top: 96px; }
.block > * { grid-column: 2 / span 8; }
.c-0-12 { grid-column: 1 / span 12 !important; }
.c-1-8 { grid-column: 2 / span 8 !important; }
.c-1-6 { grid-column: 2 / span 6 !important; }
.c-1-4 { grid-column: 2 / span 4 !important; }
.c-1-10 { grid-column: 2 / span 10 !important; }
.c-5-6 { grid-column: 6 / span 6 !important; }
.c-7-4 { grid-column: 8 / span 4 !important; }
.c-8-4 { grid-column: 9 / span 4 !important; }
.c-1-3 { grid-column: 2 / span 3 !important; }
.c-4-3 { grid-column: 5 / span 3 !important; }
.c-7-3 { grid-column: 8 / span 3 !important; }

.label { margin: 0; font: 700 16px/24px var(--text); letter-spacing: 1px; text-transform: uppercase; }
.display { margin: 0; font: 600 80px/1.06 var(--display); }
.text { margin: 0; font: 400 20px/32px var(--text); }
.text a, .credit a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.caption { margin: 27px auto 0; max-width: 1043px; font: 400 14px/21px var(--text); text-align: center; grid-column: 1 / span 12 !important; }

.b-intro h2.display { margin-top: 15px; }
.b-intro .intro-row { grid-column: 1 / span 12 !important; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 45px; margin-top: 65px; }
.b-intro .facts { margin: 0; display: grid; row-gap: 45px; align-content: start; }
.b-intro .facts dd { margin: 10px 0 0; }
.b-title .label + .display { margin-top: 5px; }
.b-pairs { row-gap: 75px; }
.b-pairs .pair { grid-column: 1 / span 12 !important; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 45px; }
.pair-h { margin: 0; font: 700 24px/36px var(--text); }
.media { margin: 0; }
.media .frame { position: relative; width: 100%; overflow: hidden; background: rgba(127,127,127,.15); }
.media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.b-image { padding-left: 0; padding-right: 0; }
.bleed { grid-column: 1 / span 12 !important; margin: 0; }
.bleed img { display: block; width: 100%; height: auto; }
.bleed .caption { padding: 0 124px; }
.grid { grid-column: 1 / span 12 !important; margin: 0; display: grid; column-gap: 45px; row-gap: 45px; align-items: start; }
.grid.cols-2 { grid-template-columns: 1fr 1fr; }
.grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.grid img { display: block; width: 100%; height: auto; border-radius: 2px; }
.grid.phones img { border-radius: 18px; }
.grid.phones.cols-3 img:nth-child(3n+2) { margin-top: 200px; }
.grid.phones.cols-3 img:nth-child(3n+3) { margin-top: 400px; }
.grid-cap { margin-top: 26px; }
.b-slider { padding-left: 0; padding-right: 0; overflow: hidden; }
.slider { grid-column: 1 / span 12 !important; display: grid; row-gap: 44px; }
.slide-row { display: flex; gap: 45px; padding-left: calc(var(--pad) + 3 * var(--u)); will-change: transform; }
.slide-row[data-dir="-1"] { padding-left: 0; justify-content: flex-end; padding-right: calc(var(--pad) + 3 * var(--u)); }
.slide-row img { flex: 0 0 auto; width: calc(3 * var(--u) - 45px); aspect-ratio: 16 / 10; object-fit: cover; border-radius: 2px; }
.brand-col .label { margin-bottom: 37px; }
.specimen { display: block; width: 100%; height: auto; }
.swatch { height: 70px; border-radius: 4px; padding: 19px 18px; margin-bottom: 25px; font: 400 20px/32px var(--text); text-transform: uppercase; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.rule { border: 0; height: 1px; background: currentColor; opacity: .1; margin: 0; }
.credits { grid-column: 1 / span 12 !important; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 45px; row-gap: 45px; margin-top: 88px; }
.credit .text { margin-top: 10px; }
.index { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px 45px; }
.index ul { list-style: none; margin: 14px 0 0; padding: 0; font: 400 20px/32px var(--text); }
.index .count { opacity: .45; margin-left: 6px; }
.end-bar { margin-top: 192px; padding: 25px var(--pad); font: 400 14px/21px var(--text); text-align: center; cursor: pointer; }
.next { position: relative; display: block; height: 100vh; background: var(--next); overflow: hidden; color: var(--next-ink); }
.next .hero-title { color: var(--next-ink); }

/* ---------- mobile home (his values: header 58 px, +38 px when the screen is 625 px tall or more) ---------- */
.mhome { position: fixed; inset: 0; overflow: hidden; touch-action: pan-y; --head: 58px; --gap: 26px; --text-gap: 32px; }
@media (min-height: 625px) { .mhome { --gap: 38px; --text-gap: 82px; } }
@media (max-height: 459px) { .mhome { --text-gap: 20px; } }
.mhome .mbg { position: absolute; inset: 0; }
.mhome .track { position: absolute; top: 0; left: 4.6875vw; right: 4.6875vw; height: 100%; display: flex; will-change: transform; }
.mhome .slide { flex: 0 0 100%; position: relative; padding: 0 1.5625vw; cursor: pointer; }
.mhome .cardwrap { position: relative; margin-top: calc(var(--head) + var(--gap)); width: 100%; max-width: 68vh; margin-left: auto; margin-right: auto; }
.mhome .card { position: relative; width: 100%; aspect-ratio: 1366 / 844; overflow: hidden; background: #ccc; }
.mhome .card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: bottom center; }
.mhome .mtext { position: relative; margin: var(--text-gap) auto 0; max-width: 68vh; }
.mhome h1 { margin: 0; font: 600 15vmin/1.1em var(--display); white-space: nowrap; }
.mhome p { margin: 3.5vmin 0 0; max-width: 580px; font: 400 16px/25.6px var(--text); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 374px) { .mhome p { -webkit-line-clamp: 2; } }
.mhome .cta { margin-top: 15px; display: inline-flex; align-items: center; gap: 9px; font: 700 14px/21px var(--text); letter-spacing: 1px; text-transform: uppercase; }
.mhome .cta svg { width: 17px; height: 14px; }
.mhome .mdots { position: absolute; top: calc(var(--head) - 2px); left: 0; right: 0; display: flex; justify-content: center; z-index: 3; }
@media (min-height: 625px) { .mhome .mdots { top: calc(var(--head) + 5px); } }
.mhome .mdots i { position: relative; width: 12px; height: 5px; margin: 0 5px; border-radius: 4px; overflow: hidden; }
.mhome .mpreview-area { position: absolute; top: calc(var(--head) + var(--gap)); left: 6.25vw; right: 6.25vw; margin: 0 auto; max-width: calc(68vh - 3.125vw); pointer-events: none; z-index: 2; }
.mhome .mpreview-area::before { content: ""; display: block; padding-top: 61.78623719%; }
.mhome .mpreview { position: absolute; top: 100%; left: 0; right: 0; margin: calc(-16vmin - 8px) auto 0; width: calc(37.33vmin + 8px); height: calc(21.33vmin + 8px); border: 4px solid; border-radius: 4px; overflow: hidden; }
@media (min-height: 625px) { .mhome .mpreview { margin-top: -10.665vmin; } }
@media (min-width: 576px) { .mhome .mpreview { width: calc(33.597vmin + 8px); height: calc(19.197vmin + 8px); } }
.mhome .mstrip { position: absolute; inset: 0; display: flex; flex-flow: row nowrap; align-items: flex-start; will-change: transform; }
.mhome .mframes { position: relative; flex: 0 0 auto; width: 100%; height: 100%; }
.mhome .mframes img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- phones ---------- */
@media (max-width: 768px) {
  :root { --pad: 6.25vw; }
  .top { top: 19px; letter-spacing: 1px; }
  .page .hero-img { top: 96px; left: var(--pad); width: calc(100vw - 2 * var(--pad)); aspect-ratio: 1 / 0.95; transform: none; }
  .page .hero-title { top: auto; bottom: calc(100vh - 617px - 64px); font-size: 15vmin; line-height: 1.1em; }
  .page .down { bottom: 15px; }
  .block { display: block; padding: 88px var(--pad) 0; }
  .block.tight { padding-top: 44px; }
  .label { font-size: 14px; line-height: 21px; }
  .display { font-size: 40px; line-height: 45px; }
  .text { font-size: 16px; line-height: 25.6px; }
  .caption { margin-top: 16px; padding: 0 30px; font-size: 12px; line-height: 18px; }
  .b-intro h2.display { margin-top: 15px; }
  .b-intro .intro-row { display: block; margin-top: 30px; }
  .b-intro .facts { margin-top: 45px; row-gap: 32px; }
  .b-title .label + .display { margin-top: 15px; }
  .b-pairs .pair { display: block; }
  .b-pairs .pair + .pair { margin-top: 33px; }
  .pair-h { font-size: 20px; line-height: 30px; }
  .pair .text { margin-top: 10px; }
  .b-image { padding: 88px 0 0; }
  .b-image.tight { padding-top: 44px; }
  .bleed .caption { padding: 0 33px; }
  .grid { column-gap: 12px; row-gap: 12px; }
  .grid.cols-3 { grid-template-columns: 1fr 1fr; }
  .grid.phones.cols-3 img:nth-child(n) { margin-top: 0; }
  .grid.phones img { border-radius: 10px; }
  .b-slider { padding: 88px 0 0; }
  .slider { row-gap: 12px; }
  .slide-row { gap: 12px; padding-left: var(--pad); }
  .slide-row[data-dir="-1"] { padding-right: var(--pad); }
  .slide-row img { width: 42vw; }
  .brand-col + .brand-col { margin-top: 45px; }
  .brand-col .label { margin-bottom: 37px; }
  .swatch { font-size: 16px; line-height: 25.6px; padding: 22px 18px; }
  .credits { display: block; margin-top: 88px; }
  .credit + .credit { margin-top: 31px; }
  .index { grid-template-columns: 1fr; gap: 40px; }
  .index ul { font-size: 16px; line-height: 25.6px; columns: 2; column-gap: 12px; }
  .end-bar { margin-top: 88px; font-size: 12px; line-height: 18px; }
}

/* ---------- About ---------- */
body.is-about #scene { visibility: hidden; }
.about { background: #1c1c1c; color: #fff; --u: calc((100vw - 2 * var(--pad) + 45px) / 12); padding-bottom: 40px; }
.about .text a { color: inherit; }
.a-hero { position: relative; height: 100vh; min-height: 640px; }
.about-root { position: absolute; inset: 0; }
.a-dim { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.a-clip { position: absolute; inset: 0; background: #1c1c1c; overflow: hidden; }
.a-inner { will-change: transform, opacity; }
.a-photo { position: absolute; left: 0; top: 173px; width: calc(var(--pad) + 6 * var(--u) - 45px); }
.a-photo::before { content: ""; display: block; padding-top: 81.7%; }
.a-photo-wrap { position: absolute; top: 0; left: 0; width: 150%; height: 100%; overflow: hidden; }
.a-photo-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; }
.a-tl { display: block; white-space: nowrap; }
.a-ch { display: inline-block; }
.a-title { position: absolute; z-index: 2; left: calc(var(--pad) + 4.85 * var(--u)); top: 174px; margin: 0; font: 600 9.3vw/1em var(--display); }
.a-intro { position: absolute; left: calc(var(--pad) + 6.75 * var(--u)); top: 486px; width: 480px; max-width: calc(100vw - var(--pad) - (var(--pad) + 6.75 * var(--u))); }
.a-intro p { margin: 0; font: 700 24px/36px var(--text); }
.a-social { display: flex; gap: 80px; margin-top: 56px; }
.a-social a, .a-icons a { color: inherit; display: inline-block; }
.a-social svg { width: 21px; height: 20px; display: block; }
.a-block { padding: 192px var(--pad) 0; }
.a-block.tight { padding-top: 96px; }
.a-statement { margin-left: var(--u); max-width: calc(8 * var(--u) - 45px); }
.a-story { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 45px; }
.a-story .label { grid-column: 3 / span 2; }
.a-story .a-big { grid-column: 5 / span 6; }
.a-big { margin: 0; font: 700 24px/36px var(--text); }
.a-slides { padding-left: 0; padding-right: 0; }
.a-track { display: flex; gap: 45px; overflow-x: auto; padding: 0 var(--pad); scrollbar-width: none; cursor: grab; scroll-snap-type: x proximity; }
.a-track::-webkit-scrollbar { display: none; }
.a-track.dragging { cursor: grabbing; scroll-snap-type: none; }
.a-track figure { flex: 0 0 calc(6 * var(--u) - 45px); margin: 0; scroll-snap-align: start; }
.a-track img { display: block; width: 100%; aspect-ratio: 608 / 375; object-fit: cover; pointer-events: none; }
.a-track figure:first-child img { aspect-ratio: 1; object-position: 50% 22%; }
.a-track .caption { margin-top: 16px; text-align: left; max-width: none; }
.a-heart { display: flex; align-items: center; margin-top: 96px; color: #e04d3f; }
.a-heart i { flex: 1; height: 2px; background: #fff; opacity: .1; }
.a-heart span { width: 130px; display: flex; justify-content: center; }
.a-heart svg { width: 24px; height: 22px; }
.a-line { border: 0; height: 2px; background: #fff; opacity: .1; margin: 77px 0 0; }
.a-head { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 45px; margin-bottom: 96px; }
.a-head .pair-h { grid-column: 2 / span 4; }
.a-head .text { grid-column: 6 / span 6; }
.a-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 45px; }
.a-logo { height: 200px; display: flex; align-items: center; justify-content: center; }
.a-logo img { max-width: 70%; max-height: 60%; object-fit: contain; }
.a-tile p { margin: 0; padding: 9px 14px; min-height: 40px; background: rgba(0,0,0,.2); font: 400 14px/21px var(--text); }
.a-career { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 45px; row-gap: 45px; }
.a-job { grid-column: span 5; display: flex; gap: 40px; align-items: center; color: inherit; }
.a-job:nth-child(odd) { grid-column: 2 / span 5; }
.a-job:nth-child(even) { grid-column: 8 / span 5; }
.a-job img { flex: 0 0 160px; width: 160px; height: 160px; object-fit: cover; border-radius: 4px; }
.a-job .pair-h { margin-top: 5px; }
.a-where { margin-top: 9px; font: 400 14px/23.8px var(--text); opacity: .8; }
.a-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 45px; }
.a-card { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: var(--c); color: #fff; transition: background-color .3s; }
.a-card:hover { background: var(--c2); }
.a-card img { display: block; width: 100%; aspect-ratio: 281 / 176; object-fit: cover; }
.a-go { display: flex; align-items: center; justify-content: space-between; height: 60px; padding: 0 24px; font: 700 14px/21px var(--text); letter-spacing: 2px; text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,.12); }
.a-go svg { width: 22px; height: 22px; }
.a-meta { padding: 21px 24px 24px; min-height: 124px; }
.a-meta .label { font-size: 14px; line-height: 21px; display: block; }
.a-name { display: block; font: 700 20px/30px var(--text); }
.a-awards { margin-left: var(--u); max-width: calc(10 * var(--u) - 45px); }
.a-award { display: grid; grid-template-columns: 240px 1fr auto; column-gap: calc(4 * var(--u) - 240px); align-items: center; padding: 21px 0 22px; border-top: 1px solid rgba(255,255,255,.1); }
.a-award:first-child { border-top: 0; }
.a-award img { width: 240px; height: 240px; object-fit: cover; border-radius: 2px; }
.a-award-name { text-decoration: underline; text-underline-offset: 4px; }
.a-award-note { text-align: right; }
.a-contact { margin-top: 96px; margin-bottom: 0; }
.a-contact .text { grid-column: 6 / span 6; }
.a-icons { display: flex; justify-content: space-between; margin: 96px var(--u) 0; }
.a-icons svg { height: 32px; width: auto; display: block; }
.a-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 120px; padding: 0 var(--pad); font: 400 14px/21px var(--text); }
.a-foot span { display: flex; align-items: center; gap: 12px; }
.a-foot img { width: 56px; height: 56px; object-fit: contain; }

@media (max-width: 768px) {
  .a-hero { height: auto; min-height: 0; padding-top: 96px; }
  .a-photo { position: relative; top: 0; display: block; width: calc(100% + 6.25vw); margin-left: -6.25vw; }
  .a-hero { padding: 79px var(--pad) 0; }
  .a-title { position: static; margin: -0.6em var(--pad) 0; font-size: 18vw; }
  .a-intro { position: static; width: auto; max-width: none; margin: 30px var(--pad) 0; }
  .a-intro p { font-size: 20px; line-height: 30px; }
  .a-social { gap: 90px; margin-top: 32px; }
  .a-block { padding: 88px var(--pad) 0; }
  .a-block.tight { padding-top: 44px; }
  .a-statement { margin-left: 0; max-width: none; }
  .a-story { display: block; }
  .a-story .a-big { margin-top: 17px; }
  .a-big { font-size: 20px; line-height: 30px; }
  .a-slides { padding: 44px 0 0; }
  .a-track { gap: 12px; }
  .a-track figure { flex-basis: calc(100vw - 2 * var(--pad)); }
  .a-track .caption { padding: 0; }
  .a-heart { margin-top: 44px; }
  .a-line { margin-top: 60px; }
  .a-head { display: block; margin-bottom: 44px; }
  .a-head .text { margin-top: 10px; }
  .a-tiles { grid-template-columns: 1fr 1fr; gap: 12px; }
  .a-logo { height: 165px; }
  .a-tile p { font-size: 12px; line-height: 18px; padding: 10px 8px; min-height: 56px; }
  .a-career { display: block; }
  .a-job { gap: 20px; }
  .a-job + .a-job { margin-top: 32px; }
  .a-job img { flex-basis: 96px; width: 96px; height: 96px; }
  .a-job .pair-h { font-size: 18px; line-height: 26px; }
  .a-cards { grid-template-columns: 1fr; gap: 24px; }
  .a-awards { margin-left: 0; max-width: none; }
  .a-award { grid-template-columns: 96px 1fr; column-gap: 20px; }
  .a-award img { width: 96px; height: 96px; }
  .a-award-note { grid-column: 2; text-align: left; opacity: .7; }
  .a-contact { margin-top: 44px; }
  .a-icons { margin: 44px 0 0; }
  .a-foot { flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 88px; }
}

/* header variants */
.top .back { display: none; align-items: center; gap: 9px; }
.top .back svg { width: 17px; height: 14px; }
.top[data-kind="page"] .name, .top[data-kind="about"] .name { display: none; }
.top[data-kind="page"] .back, .top[data-kind="about"] .back, .top[data-kind="missing"] .back { display: inline-flex; }
.top .pill { padding: 6px 14px; border-radius: 20px; background: #e04d3f; color: #fff; font-size: 12px; letter-spacing: 1px; }
body.is-mhome #scene { visibility: hidden; }

.page .hero-title.outline { color: transparent; -webkit-text-stroke: 2px var(--hero-ink); pointer-events: none; }
.next .hero-title.outline { -webkit-text-stroke-color: var(--next-ink); }
/* a fade of the colour underneath keeps the fixed header readable over scrolling text */
body.is-page .top::before, body.is-about .top::before { content: ""; position: fixed; z-index: -1; left: 0; right: 0; top: 0; height: 96px; background: linear-gradient(var(--hdr, #1c1c1c) 35%, transparent); transition: background .3s; }
body.is-about { --hdr: #1c1c1c; }
.top { z-index: 30; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent, #f2c94c); outline-offset: 4px; }
/* a cut-out person stands in front of its panel and rises above it */
.person { position: absolute; transform: translateX(-50%); width: auto; pointer-events: none; z-index: 2; }
.page .hero-img { overflow: visible; }
.page .hero-img > img:first-child { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 768px) { .page .hero-img.has-person { aspect-ratio: 1366 / 844; top: 150px; } }

/* ---------- loader ---------- */
.loader { position: fixed; inset: 0; z-index: 100; overflow: hidden; background: var(--l-bg); color: var(--l-ink); cursor: wait; }
.l-bar { position: absolute; left: 0; bottom: 0; width: 5px; height: 0; background: var(--l-color); }
.l-wrap { padding: 0 var(--pad); }
.l-content { height: 100vh; padding: 40px 0; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; }
.l-name { position: relative; margin-bottom: 10px; font: 600 64px/1 var(--display); white-space: nowrap; }
.l-fill, .l-outline { white-space: nowrap; line-height: 1.15; }
.l-fill { position: absolute; inset: 0; color: var(--l-color); }
.l-outline { color: transparent; -webkit-text-stroke: 1.5px var(--l-color); }
.l-sub { font: 700 13px/1 var(--text); letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; }
.l-balloon { font: italic 400 13px/1.5em system-ui, sans-serif; padding: 15px; max-width: 317px; border-radius: 31.5px 31.5px 31.5px 0; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.05); }
@media (min-width: 769px) { .l-bar { width: 10px; } .l-content { padding: 70px 0; } .l-balloon { font-size: 15px; padding: 18px 25px; max-width: 370px; } }
@media (min-width: 2001px) { .l-content { padding: 90px 0; } .l-balloon { font-size: 18px; padding: 22px 30px; max-width: 450px; } }
.name .e1, .name .e2, .name span span { display: inline-block; }

/* ---------- page scrolling ---------- */
.scroll-root { position: absolute; inset: 0; overflow-x: hidden; pointer-events: auto; }
.scroll-root.native { overflow-y: scroll; -webkit-overflow-scrolling: touch; }
.scroll-root.virtual { overflow-y: hidden; }
.scroll-root.virtual > .scroll-wrap { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.scroll-root.virtual .scroll-content { pointer-events: auto; }
.scroll-root.virtual .scroll-content > * { will-change: transform; }
.scrollbar { position: fixed; z-index: 60; top: 0; right: 0; height: 100px; padding: 2px; mix-blend-mode: exclusion; opacity: 0; transition: opacity .1s ease-in-out; pointer-events: none; }
.scrollbar::before { content: ""; display: block; width: 7px; height: 100%; background: #696969; border-radius: 3.5px; }

/* ---------- page layers ---------- */
#view { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.layer { position: absolute; inset: 0; overflow: hidden; pointer-events: auto; }
.layer-body { position: absolute; inset: 0; }
.layer .top, .layer .headlines, .layer .dots, .layer .mhome { position: absolute; }
.layer-home { pointer-events: none; }
.layer-home .top, .layer-home .headlines .cta, .layer-home .dots { pointer-events: auto; }
.scroll-root.virtual > .scroll-wrap { position: absolute; }
.case { position: absolute; inset: 0; }
.c-hero { position: absolute; inset: 0; pointer-events: none; }
.c-hero .headlines, .c-title { position: absolute; inset: 0; }
.headline.only-title p, .headline.only-title .cta { visibility: hidden; }
.c-circle { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; height: 19.6vh; display: flex; align-items: flex-end; justify-content: center; pointer-events: none; }
.c-circle button { pointer-events: auto; padding: 15px; border: 0; background: none; cursor: pointer; color: var(--hero-ink); }
@media (min-width: 1025px) { .c-circle button { padding: 40px; } }
.c-circle svg { display: block; width: 56px; height: 56px; overflow: visible; }
.c-track { fill: transparent; stroke: var(--hero-ink); stroke-opacity: .3; stroke-width: 2; }
.c-ring { fill: none; stroke: var(--hero-ink); stroke-width: 2; stroke-dasharray: 170; transform: rotate(-90deg); transform-origin: 28px 28px; }
.c-arrow { fill: none; stroke: var(--accent); stroke-width: 2; transform-box: fill-box; }
.c-spacer { height: calc(100vh + 1px); }
.case .scroll-content .block { background: var(--body); }
.c-end .end-bar { margin: 0; padding: 25px var(--pad); font: italic 400 14px/1.5em var(--text); text-align: center; cursor: pointer; background: var(--body); color: var(--ink); }
@media (min-width: 2001px) { .c-end .end-bar { font-size: 17px; } }
.end-inner { position: relative; height: 100vh; cursor: pointer; overflow: hidden; }
.end-progress { position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 5px; background: var(--next); transform: translate3d(-100%,0,0); }
.end-title { position: absolute; inset: 0; }
.ink-trigger { display: none; }
/* back-home cover: slides in from the right, darkens, shows a line, lightens */
.c-cover { position: absolute; inset: 0; z-index: 8; display: flex; align-items: center; justify-content: center; font: 700 16px/1 var(--text); letter-spacing: 1px; text-transform: uppercase; pointer-events: none; }
@media (min-width: 2001px) { .c-cover { font-size: 20px; } }
.layer-home::after, .layer-mhome::after { content: ""; position: absolute; inset: 0; z-index: 50; background: var(--home-cover-color, transparent); opacity: var(--home-cover, 0); pointer-events: none; }
/* phone section hero */
.is-m .m-hero { position: absolute; inset: 0; padding: 0 4.6875vw; }
.m-hero .m-wrap { position: relative; height: 100%; max-width: 68vh; margin: 0 auto; }
.m-hero .cardwrap { position: relative; margin-top: 96px; padding: 0 1.5625vw; }
@media (max-height: 624px) { .m-hero .cardwrap { margin-top: 84px; } }
.m-box { position: relative; height: 0; padding-top: 98%; overflow: hidden; }
@media (max-height: 599px) { .m-box { padding-top: 90%; } }
.m-scale { position: absolute; top: 0; left: 0; width: 100%; transform-origin: top center; background: #ccc; }
.m-img { aspect-ratio: 1366 / 844; overflow: hidden; }
.m-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.2); transform-origin: bottom center; display: block; }
.m-title { position: absolute; left: 1.5625vw; font: 600 15vmin/1.1em var(--display); white-space: nowrap; }
.end-inner .m-hero { position: absolute; inset: 0; padding: 0 4.6875vw; }
.end-label { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px; text-align: center; font: italic 400 12px/1.5em var(--text); color: var(--next-ink); }
.end-label span { display: block; transition: opacity .2s ease-in-out, transform .2s ease-in-out; }
.end-label .b { position: absolute; left: 0; right: 0; bottom: 24px; opacity: 0; transform: translateY(-5px); }
.c-end.loading .end-label .a { opacity: 0; transform: translateY(5px); }
.c-end.loading .end-label .b { opacity: 1; transform: none; }

/* About: tiles open on hover (tap on touch): the colour fades in, the logo lifts, the line slides up */
.a-tiles { gap: 45px; }
.a-tile { position: relative; height: 200px; border-radius: 20px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.05); cursor: default; }
@media (min-width: 2001px) { .a-tile { height: 320px; } }
.a-tile-bg { position: absolute; inset: 0; background: var(--tile); opacity: 0; transition: opacity .45s cubic-bezier(.2,.8,.2,1); }
.a-tile-logo { position: relative; max-width: 70%; max-height: 50%; object-fit: contain; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.a-tile p { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 20px; min-height: 0; background: var(--bar); font: 400 14px/21px var(--text); transform: translateY(100%); transition: transform .45s cubic-bezier(.2,.8,.2,1); }
@media (hover: hover) { .a-tile:hover .a-tile-bg { opacity: 1; } .a-tile:hover .a-tile-logo { transform: translateY(-31px); } .a-tile:hover p { transform: none; } }
.a-tile.open .a-tile-bg { opacity: 1; } .a-tile.open .a-tile-logo { transform: translateY(-31px); } .a-tile.open p { transform: none; }
@media (max-width: 768px) { .a-tile { height: auto; aspect-ratio: 1; } .a-tile p { padding: 10px 5px; font-size: 12px; line-height: 18px; } .a-tiles { gap: 12px; } }
/* experience: two columns split by a faint line; the photo fades in over the logo on hover */
.a-career { position: relative; }
@media (min-width: 769px) { .a-career::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: rgba(255,255,255,.2); } }
.a-job-pic { position: relative; flex: 0 0 160px; width: 160px; height: 160px; border-radius: 20px; overflow: hidden; }
.a-job-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.a-job img.a-job-photo { opacity: 0; transition: opacity .3s cubic-bezier(.215,.61,.355,1); }
@media (hover: hover) { .a-job:hover .a-job-photo { opacity: 1; } }
@media (max-width: 768px) { .a-job-pic { flex-basis: 100px; width: 100px; height: 100px; } }
/* writing cards: the picture settles down and the arrow straightens on hover */
.a-card { position: relative; }
.a-card img { transform: translateY(-32px); margin-bottom: -32px; transition: transform .4s cubic-bezier(.645,.045,.355,1); }
.a-go svg { transform: rotate(-45deg); transition: transform .4s cubic-bezier(.645,.045,.355,1); }
@media (hover: hover) { .a-card:hover img { transform: none; } .a-card:hover .a-go svg { transform: none; } }
/* the heart beats: twice, then rests, every 1.5 s */
@keyframes beat { 0% { transform: scale(1); } 6% { transform: scale(1.1); } 12%, 18% { transform: scale(1); } 24% { transform: scale(1.15); } 32%, 100% { transform: scale(1); } }
.a-heart span svg { animation: beat 1.5s linear infinite; }
.a-heart { padding: 39px 0 42px; margin-top: 56px; }
/* social icons lift on hover */
.a-social a, .a-icons a { transition: transform .28s cubic-bezier(.215,.61,.355,1); }
@media (hover: hover) { .a-social a:hover, .a-icons a:hover { transform: translateY(-8px); } }
/* the footer mark floats */
@keyframes float2 { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(2px); } }
.a-foot img { animation: float2 2s ease-in-out infinite; }
/* email pill on About: hover offers to copy, click copies */
.top .pill { position: relative; display: inline-flex; align-items: center; height: 56px; padding: 0 16px; border-radius: 28px; font: 700 14px/1 var(--text); letter-spacing: 2px; overflow: hidden; background: #e04d3f; color: #fff; cursor: pointer; transition: background-color .28s cubic-bezier(.455,.03,.515,.955), color .28s; }
.top .pill .pl { display: block; transition: transform .28s cubic-bezier(.455,.03,.515,.955), opacity .28s; }
.top .pill .pl + .pl { position: absolute; left: 16px; right: 16px; text-align: center; transform: translateY(100%); opacity: 0; }
.top .pill[data-step="1"] { background: color-mix(in srgb, #e04d3f 80%, #000); }
.top .pill[data-step="1"] .pl:first-child, .top .pill[data-step="2"] .pl:first-child { transform: translateY(-100%); opacity: 0; }
.top .pill[data-step="1"] .pl.p1, .top .pill[data-step="2"] .pl.p2 { transform: none; opacity: 1; }
.top .pill[data-step="2"] { background: #fff; color: #e04d3f; }
@media (max-width: 768px) { .top .pill { height: 36px; padding: 0 6px; border-radius: 21px; letter-spacing: 1px; } .top .pill .pl + .pl { left: 6px; right: 6px; } }
/* section link pill: a 56 px circle in the section's colour that rises in while the page content is up; on hover it opens to its label */
.c-link { position: absolute; z-index: 6; right: 62px; bottom: 40px; display: flex; align-items: center; height: 56px; min-width: 56px; max-width: 56px; border-radius: 28px; background: var(--bg); color: var(--fg); overflow: hidden; transform: translateY(100px); transition: transform .45s cubic-bezier(.2,.9,.25,1.05), max-width .5s cubic-bezier(.3,1.25,.4,1); }
.c-link.on { transform: none; }
.c-link-label { flex: 0 0 auto; padding: 0 4px 0 24px; font: 700 16px/1 var(--text); letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; opacity: 0; transition: opacity .3s; }
.c-link-dot { position: absolute; right: 0; top: 0; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; }
.c-link-dot svg { width: 22px; height: 22px; transform: rotate(-45deg); transition: transform .45s cubic-bezier(.3,1.4,.4,1); }
@media (hover: hover) { .c-link:hover { max-width: 320px; padding-right: 56px; } .c-link:hover .c-link-label { opacity: 1; } .c-link:hover .c-link-dot svg { transform: none; } }
@media (max-width: 575px) { .c-link { right: 6.25vw; bottom: 6.25vw; } }
.hdr-strip { position: fixed; top: 0; left: 100%; width: 20px; height: 100vh; pointer-events: none; will-change: transform; }
.layer .hdr-strip { position: absolute; top: -35px; left: calc(100% + var(--pad)); }

.a-track { display: block; overflow: hidden; cursor: grab; scroll-snap-type: none; padding: 0 var(--pad); }
.a-rail { display: flex; gap: 45px; will-change: transform; }
.a-rail figure { flex: 0 0 calc(6 * var(--u) - 45px); margin: 0; }
.a-frame { border-radius: 4px; overflow: hidden; transition: transform .5s cubic-bezier(.25,.9,.3,1); }
.a-frame img { display: block; width: 100%; aspect-ratio: 608 / 375; object-fit: cover; transition: transform .5s cubic-bezier(.25,.9,.3,1); pointer-events: none; }
.a-rail figure:first-child .a-frame img { aspect-ratio: 1; object-position: 50% 22%; }
.a-rail figure.held .a-frame { transform: scale(.96); }
.a-rail figure.held .a-frame img { transform: scale(1.18); }
@media (max-width: 768px) { .a-rail { gap: 12px; } .a-rail figure { flex-basis: calc((100vw - 2 * var(--pad) - 12px) / 2); } }
@media (max-width: 575px) { .a-rail figure { flex-basis: calc(100vw - 2 * var(--pad)); } }
/* not found */
.missing { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; background: #0d0d0d; color: #fff; padding: 0 var(--pad); }
.missing-title { font: 600 15vw/1em var(--display); }
@media (min-width: 769px) { .missing-title { font-size: 11vw; } }
@media (min-width: 2001px) { .missing-title { font-size: 9vw; } }
.missing .text { margin: 40px 0 24px; }
.missing .cta { display: inline-flex; font: 700 16px/24px var(--text); letter-spacing: 2px; text-transform: uppercase; color: #fff; }
/* About on small screens: the header sits on a fade of the page colour so text scrolling under it stays clear */
@media (max-width: 768px) {
  .layer-about .top::before { content: ""; position: absolute; z-index: -1; left: calc(-1 * var(--pad)); right: calc(-1 * var(--pad)); top: -19px; height: 110px;
    background: linear-gradient(rgba(28,28,28,.9) 0%, rgba(28,28,28,.738) 19%, rgba(28,28,28,.541) 34%, rgba(28,28,28,.382) 47%, rgba(28,28,28,.278) 56.5%, rgba(28,28,28,.194) 65%, rgba(28,28,28,.126) 73%, rgba(28,28,28,.075) 80.2%, rgba(28,28,28,.042) 86.1%, rgba(28,28,28,.021) 91%, rgba(28,28,28,.008) 95.2%, rgba(28,28,28,.002) 98.2%, rgba(28,28,28,0) 100%); }
}