/* Bruno Zabala, rebuilt on the layout of iamrossmason.com. Clean-room: every value measured from screenshots, written here. */
@font-face { font-family: 'Grot'; src: url(fonts/InterTight-400-latin.woff2) format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2190-2199, U+2212, U+2215; }
@font-face { font-family: 'Grot'; src: url(fonts/InterTight-400-latin-ext.woff2) format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0100-024F, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Ital'; src: url(fonts/InstrumentSerif-Italic-latin.woff2) format('woff2'); font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: 'Ital'; src: url(fonts/InstrumentSerif-Italic-latin-ext.woff2) format('woff2'); font-style: italic; font-display: swap; unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: 'Black'; src: url(fonts/UnifrakturMaguntia-latin.woff2) format('woff2'); font-display: swap; }

:root {
  --bg: #ffffff; --text: #000000; --muted: #767676; --dim: .25;
  --panel: #b1684d; --ph: #e7e5e2; --ph-dark: #1c1c1c; --ph-text: #5e5e5e;
  --px: calc(100vw / 1440);
  --g: calc(var(--px) * 48);
  --base: calc(var(--px) * 17.28);
  --ease: cubic-bezier(.65, 0, .35, 1);
  --out: cubic-bezier(.16, 1, .3, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: clip; background: var(--bg); color: var(--text); font-family: 'Grot', 'Helvetica Neue', Arial, sans-serif; font-size: var(--base); line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: left; }
em, .it { font-family: 'Ital', Georgia, serif; font-style: italic; font-weight: 400; }
img { display: block; }
.dim { opacity: var(--dim); }
.up { text-transform: uppercase; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- placeholder (stand-in for Bruno's photos) ---------- */
.ph { position: relative; background: var(--ph); overflow: hidden; }
.ph figcaption { position: absolute; left: 10px; bottom: 8px; right: 10px; font-size: 11px; line-height: 1.3; color: var(--ph-text); font-family: 'Grot', sans-serif; letter-spacing: 0; text-transform: none; font-style: normal; pointer-events: none; }
.ph figcaption b { display: block; font-weight: 400; color: #3a3a3a; }
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dark .ph { background: var(--ph-dark); }
.dark .ph figcaption { color: #9a9a9a; }
.dark .ph figcaption b { color: #cfcfcf; }

/* ---------- header ---------- */
.hd { position: fixed; z-index: 50; left: 0; right: 0; top: 0; height: calc(var(--px) * 96); padding: calc(var(--px) * 34) var(--g) 0; display: flex; justify-content: space-between; align-items: flex-start; color: #fff; mix-blend-mode: difference; pointer-events: none; line-height: 1.5; }
.hd > * { pointer-events: auto; }
.hd__left { width: calc(var(--px) * 400); }
.hd__nav { position: absolute; left: 50%; transform: translateX(-50%); top: calc(var(--px) * 34); white-space: nowrap; }
.hd__nav a { transition: opacity .3s; }
.hd__nav a:not(.on) { opacity: var(--dim); }
.hd__nav a:not(.on):hover { opacity: 1; }
.hd__msg { border-bottom: 1px solid currentColor; padding-bottom: calc(var(--px) * 1); line-height: 1.5; color: #fff; }
.hd__menu { display: none; }
.mark { display: inline-flex; align-items: baseline; white-space: nowrap; line-height: 1; font-size: calc(var(--px) * 18.8); letter-spacing: -.02em; padding-top: calc(var(--px) * 2); }
.mark b { font-weight: 400; letter-spacing: -.03em; }
.mark em { font-size: 1.22em; letter-spacing: -.01em; }

/* ---------- big wordmark ---------- */
.wm { display: flex; align-items: baseline; white-space: nowrap; line-height: 1; user-select: none; }
.wm b { font-weight: 400; letter-spacing: -.045em; display: inline-block; }
.wm em { display: inline-block; letter-spacing: -.02em; font-size: 1.42em; transform-origin: left bottom; }
.wm .ch { display: inline-block; }
.wm-wrap { position: relative; height: calc(var(--px) * 168); }
.wm-wrap .wm { position: absolute; left: 0; top: 0; }

/* ---------- index: carousel ---------- */
.home { height: 100vh; height: 100svh; overflow: hidden; }
.car { position: absolute; z-index: 2; left: 0; right: 0; top: calc(var(--px) * 172); height: calc(var(--px) * 632); overflow: hidden; touch-action: pan-y; user-select: none; cursor: grab; }
.car.drag { cursor: grabbing; }
.card { position: absolute; top: calc(var(--px) * 12); left: 0; will-change: transform, width; }
.card__lab { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--px) * 99); transition: transform .5s var(--out); }
.card:hover .card__lab { transform: translateY(calc(var(--px) * -8)); }
.card.is-active:hover .card__lab { transform: none; }
.card__n { display: block; line-height: 1.5; }
.card__t { position: absolute; left: 0; right: calc(var(--px) * 12); top: calc(var(--px) * 50); font-size: 1em; font-weight: 400; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-bottom: .1em; }
.card__tag { position: absolute; left: 0; right: calc(var(--px) * 12); top: calc(var(--px) * 72); line-height: 1; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-bottom: .1em; }
.card__img { position: absolute; left: 0; top: calc(var(--px) * 99); width: 100%; z-index: 2; }
.card__img .ph { width: 100%; height: 100%; }
.card a { display: block; position: absolute; inset: 0; z-index: 3; }
.card.is-active .card__img { z-index: 4; }
.foot-row { position: absolute; left: var(--g); right: var(--g); top: calc(var(--px) * 647); display: flex; justify-content: space-between; line-height: 1.5; z-index: 1; }
.views a:not(.on) { opacity: var(--dim); transition: opacity .3s; }
.views a:not(.on):hover { opacity: 1; }
.clock .colon { display: inline-block; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: .2; } }
.home .wm-wrap { position: absolute; left: var(--g); right: var(--g); top: calc(var(--px) * 692); z-index: 1; }

/* ---------- index: list ---------- */
.list-prev { position: absolute; left: var(--g); top: calc(var(--px) * 115); width: calc(var(--px) * 176); height: calc(var(--px) * 220); }
.list-prev .ph { position: absolute; inset: 0; opacity: 0; transition: opacity .35s; }
.list-prev .ph.on { opacity: 1; }
.list-names { position: absolute; left: calc(var(--px) * 504); width: calc(var(--px) * 888); top: calc(var(--px) * 106); font-size: calc(var(--px) * 55.68); line-height: calc(var(--px) * 60); letter-spacing: -.01em; }
.list-names a { opacity: var(--dim); transition: opacity .3s; }
.list-names a.on { opacity: 1; }

/* ---------- intro ---------- */
.intro { position: fixed; inset: 0; z-index: 80; background: #fff; pointer-events: none; }
.intro-img { position: fixed; z-index: 90; overflow: hidden; }
.intro-mark { position: fixed; z-index: 88; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.intro-mark .wm { line-height: 1; }
.intro-img .ph { position: absolute; inset: 0; }
.ch-mask { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0 .03em .12em; margin: 0 -.03em -.12em; }
.ch-mask > span { display: inline-block; }

/* ---------- case ---------- */
.case-top { padding-top: calc(var(--px) * 144); text-align: center; }
.case-title { font-size: calc(var(--px) * 134.4); line-height: 1; font-weight: 400; text-transform: uppercase; letter-spacing: -.01em; padding: 0 var(--g); }
.case-year { display: block; font-size: calc(var(--px) * 96); line-height: 1; margin-top: calc(var(--px) * 20); }
.case-meta { position: relative; height: calc(var(--px) * 38); margin: calc(var(--px) * 144) 0 calc(var(--px) * 81); text-align: left; line-height: 1.1; }
.case-meta div { position: absolute; top: 0; }
.case-meta div:nth-child(1) { left: calc(var(--px) * 187); }
.case-meta div:nth-child(2) { left: calc(var(--px) * 940); }
.case-meta div:nth-child(3) { left: calc(var(--px) * 1182); max-width: calc(var(--px) * 240); }
.case-meta span { display: block; }
.case-meta span + span { text-transform: uppercase; }
.frame { margin: 0 var(--g); }
.frame--full .ph { width: 100%; aspect-ratio: 1344 / 756; }
.frame--inset { padding: 0 calc(var(--px) * 114); }
.frame--inset .ph { width: 100%; aspect-ratio: 1116 / 628; }
.frame--pair { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--px) * 24); }
.frame--pair .ph { aspect-ratio: 660 / 826; }
.case-body > * + * { margin-top: calc(var(--px) * 192); }
.case-body > .block + .frame, .case-body > .block + .block { margin-top: calc(var(--px) * 192); }
.case-body > .frame + .block { margin-top: calc(var(--px) * 114); }
.block { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: calc(var(--px) * 24); padding: 0 var(--g); }
.block__n { grid-column: 1 / 4; padding-top: calc(var(--px) * 30); line-height: 1.5; }
.st { grid-column: 4 / 12; font-size: calc(var(--px) * 67.2); line-height: 1; font-weight: 400; text-transform: uppercase; letter-spacing: -.01em; }
.st em { font-size: calc(var(--px) * 78.96); line-height: .9; text-transform: lowercase; letter-spacing: -.01em; }
.info { grid-column: 4 / 12; display: grid; grid-template-columns: repeat(8, 1fr); column-gap: calc(var(--px) * 24); margin-top: calc(var(--px) * 95); }
.info__h { grid-column: 1 / 4; font-size: 1em; font-weight: 400; text-transform: uppercase; line-height: 1.5; }
.info__b { grid-column: 4 / 8; line-height: 1.3; }
.info__b strong { display: block; font-weight: 400; margin-bottom: calc(var(--px) * 22); }
.info__b p { color: var(--muted); }
.info__b p + p { margin-top: calc(var(--px) * 22); }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--px) * 18) calc(var(--px) * 24); margin-top: calc(var(--px) * 34); }
.stats div span { display: block; }
.stats div span:first-child { font-size: calc(var(--px) * 40); line-height: 1.1; letter-spacing: -.01em; }
.stats div span + span { color: var(--muted); margin-top: 4px; }
.arrows { margin-top: calc(var(--px) * 34); }
.arrows h4 { font-weight: 400; text-transform: uppercase; margin-bottom: calc(var(--px) * 18); line-height: 1.5; }
.arrows li { list-style: none; position: relative; padding-left: 1.3em; line-height: 1.3; }
.arrows li + li { margin-top: calc(var(--px) * 6); }
.arrows li::before { content: '\2192'; position: absolute; left: 0; }
.ulink { border-bottom: 1px solid currentColor; display: inline-block; margin-top: calc(var(--px) * 30); line-height: 1.4; }
.next { text-align: center; padding-top: calc(var(--px) * 230); }
.next h3 { font-weight: 400; text-transform: uppercase; line-height: 1.5; }
.next h2 { font-size: calc(var(--px) * 67.2); line-height: 1; font-weight: 400; text-transform: uppercase; margin-top: calc(var(--px) * 96); padding: 0 var(--g); }
.next h4 { font-size: calc(var(--px) * 86.4); line-height: 1; font-weight: 400; }
.next .ph { width: calc(var(--px) * 660); height: calc(var(--px) * 396); margin: calc(var(--px) * 97) auto 0; }
.next a { display: block; }

/* reveal helpers */
.rv { opacity: 0; transform: translateY(30px); transition: opacity 1s var(--out), transform 1s var(--out); }
.rv.in { opacity: 1; transform: none; }

/* ---------- about ---------- */
.ab-hero { position: relative; height: calc(var(--px) * 804); }
.ab-h1 { position: absolute; left: var(--g); top: calc(var(--px) * 115); font-size: calc(var(--px) * 144); line-height: 1; font-weight: 400; text-transform: uppercase; letter-spacing: -.01em; }
.ab-h1 em { display: block; font-size: calc(var(--px) * 169.2); line-height: 1.2; text-transform: lowercase; margin-top: calc(var(--px) * -43); letter-spacing: -.015em; }
.ab-h2 { position: absolute; right: var(--g); top: calc(var(--px) * 588); font-size: calc(var(--px) * 144); line-height: calc(var(--px) * 130); font-weight: 400; text-transform: uppercase; text-align: right; letter-spacing: -.01em; }
.ab-h2 .row1 { display: flex; justify-content: flex-end; align-items: center; gap: calc(var(--px) * 23); }
.ab-h2 .ph { width: calc(var(--px) * 192); height: calc(var(--px) * 96); }
.ab-intro { position: absolute; left: var(--g); top: calc(var(--px) * 748); width: calc(var(--px) * 384); line-height: 1.5; }
.ab-wide { margin: 0 10px; will-change: transform; }
.ab-wide .ph { width: 100%; height: calc(var(--px) * 900); }
.ab-story { margin-top: calc(var(--px) * 247); }
.svc { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: calc(var(--px) * 24); padding: 0 var(--g); margin-top: calc(var(--px) * 313); }
.svc__l { grid-column: 1 / 7; position: relative; }
.svc__h { font-weight: 400; text-transform: uppercase; line-height: 1.5; }
.svc__list { margin-top: calc(var(--px) * 48); }
.svc__btn { display: block; font-size: calc(var(--px) * 67.2); line-height: 1; text-transform: uppercase; letter-spacing: -.01em; position: relative; }
.svc__btn + .svc__btn { margin-top: calc(var(--px) * 29); }
.svc__btn span { border-bottom: calc(var(--px) * 2) solid transparent; transition: border-color .3s; }
.svc__btn.on span { border-color: currentColor; }
.svc__btn sup { font-size: calc(var(--px) * 20.16); vertical-align: top; position: relative; top: 0; margin-left: calc(var(--px) * 6); line-height: 1; }
.svc__desc { position: absolute; left: 0; bottom: calc(var(--px) * 39); width: calc(var(--px) * 440); }
.svc__d { position: absolute; left: 0; bottom: 0; width: 100%; opacity: 0; transition: opacity .4s; pointer-events: none; }
.svc__d.on { opacity: 1; pointer-events: auto; }
.svc__d strong { display: block; font-weight: 400; margin-bottom: calc(var(--px) * 24); }
.svc__d p { color: var(--muted); }
.svc__r { grid-column: 7 / 13; position: relative; height: calc(var(--px) * 826); }
.svc__r .ph { position: absolute; inset: 0; opacity: 0; transition: opacity .5s; }
.svc__r .ph.on { opacity: 1; }
.ab-list { margin-top: calc(var(--px) * 311); }
.ab-list .st em { display: block; }
.ab-list .cols { grid-column: 4 / 9; display: grid; grid-template-columns: 1fr 1fr; column-gap: 0; margin-top: calc(var(--px) * 87); }
.ab-list .cols h4 { font-weight: 400; text-transform: uppercase; line-height: 1.5; margin-bottom: calc(var(--px) * 19); }
.ab-list .cols li { list-style: none; line-height: 1.5; padding-left: 1.3em; position: relative; }
.ab-list .cols li + li { margin-top: calc(var(--px) * 5); }
.ab-list .cols li::before { content: '\2192'; position: absolute; left: 0; }
.ab-list .lead { grid-column: 4 / 8; margin-top: calc(var(--px) * 73); line-height: 1.3; }
.ab-list .lead strong { display: block; font-weight: 400; margin-bottom: calc(var(--px) * 23); }
.ab-list .lead p { color: var(--muted); }
.cta { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: calc(var(--px) * 24); padding: 0 var(--g); margin-top: calc(var(--px) * 140); }
.cta .ph { grid-column: 1 / 7; height: calc(var(--px) * 1018); }
.cta__t { grid-column: 8 / 12; padding-top: calc(var(--px) * 192); }
.cta__t h2 { font-size: calc(var(--px) * 67.2); line-height: 1; font-weight: 400; text-transform: uppercase; letter-spacing: -.01em; }
.cta__t h2 em { font-size: calc(var(--px) * 78.96); line-height: .9; text-transform: lowercase; }
.cta__t p { color: var(--muted); line-height: 1.3; margin-top: calc(var(--px) * 67); width: calc(var(--px) * 385); }
.cta__t button { border-bottom: 1px solid currentColor; margin-top: calc(var(--px) * 58); line-height: 1.4; }
.ft { position: relative; padding: calc(var(--px) * 312) var(--g) calc(var(--px) * 48); }
.ft__row { display: flex; justify-content: space-between; line-height: 1.5; position: relative; }
.ft__row p { position: absolute; left: 50%; transform: translateX(-50%); }
.ft .wm-wrap { margin-top: calc(var(--px) * 29); }

/* ---------- lab ---------- */
body.dark { background: #000; color: #fff; }
.lab { height: 100vh; height: 100svh; overflow: hidden; position: relative; }
.lab h1 { position: absolute; left: calc(var(--px) * 59); right: calc(var(--px) * 59); top: calc(var(--px) * 96); font-family: 'Black', serif; font-weight: 400; text-transform: uppercase; font-size: calc(var(--px) * 236); line-height: calc(var(--px) * 248.4); white-space: nowrap; text-align: center; letter-spacing: -.01em; }
.lab__cap { position: absolute; left: var(--g); top: calc(var(--px) * 394); line-height: 1.5; }
.lab__cap span { display: block; margin-top: calc(var(--px) * 15); }
.strip { position: absolute; left: 0; right: 0; bottom: calc(var(--px) * 50); height: calc(var(--px) * 170); overflow: hidden; }
.strip__in { position: absolute; left: var(--g); bottom: 0; display: flex; align-items: flex-end; gap: calc(var(--px) * 23); will-change: transform; }
.strip button { position: relative; flex: none; height: calc(var(--px) * 115); transition: height .5s var(--out), width .5s var(--out); }
.strip button:hover, .strip button:focus-visible { height: calc(var(--px) * 160); }
.strip .ph { position: absolute; inset: 0; }
.strip .ph figcaption { font-size: 9px; left: 6px; bottom: 5px; }
.lightbox { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .55); opacity: 0; pointer-events: none; transition: opacity .4s; }
.lightbox.on { opacity: 1; pointer-events: auto; }
.lightbox .ph { width: min(70vw, 120vh); aspect-ratio: 16/9; max-height: 75vh; transform: scale(.94); transition: transform .6s var(--out); }
.lightbox.on .ph { transform: none; }
.lightbox figcaption { font-size: 13px !important; }

/* ---------- message panel ---------- */
.msg { position: fixed; inset: 0; z-index: 100; background: var(--panel); color: #000; transform: translateY(105%); border-radius: 50% 50% 0 0 / 8% 8% 0 0; transition: transform .9s var(--ease), border-radius .9s var(--ease); visibility: hidden; }
.msg.on { transform: none; border-radius: 0; visibility: visible; }
.msg__top { height: calc(var(--px) * 96); padding: calc(var(--px) * 34) var(--g) 0; display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid rgba(0, 0, 0, .2); }
.msg__close { border-bottom: 1px solid currentColor; line-height: 1.5; }
.msg__grid { display: grid; grid-template-columns: calc(var(--px) * 790) 1fr; height: calc(100% - var(--px) * 96); }
.msg__l { position: relative; padding: calc(var(--px) * 56) var(--g) 0; border-right: 1px solid rgba(0, 0, 0, .2); }
.msg__l h2 { font-size: calc(var(--px) * 67.2); line-height: calc(var(--px) * 70.56); font-weight: 400; text-transform: uppercase; letter-spacing: -.01em; }
.msg__l h2 em { font-size: calc(var(--px) * 78.96); text-transform: lowercase; line-height: .9; }
.msg__foot { position: absolute; left: var(--g); right: var(--g); bottom: calc(var(--px) * 40); display: flex; justify-content: space-between; align-items: flex-end; }
.msg__foot p { width: calc(var(--px) * 336); line-height: 1.5; }
.msg__foot ul { list-style: none; line-height: 1.5; }
.msg__foot li::before { content: '\2192\00a0'; }
.msg form { display: flex; flex-direction: column; height: 100%; }
.msg .row { display: flex; align-items: center; min-height: calc(var(--px) * 92); padding: 0 calc(var(--px) * 30) 0 calc(var(--px) * 48); border-bottom: 1px solid rgba(0, 0, 0, .2); gap: calc(var(--px) * 14); }
.msg .row label, .msg .row .lbl { width: calc(var(--px) * 77); flex: none; }
.msg .pill { background: #000; color: #fff; border-radius: 999px; padding: calc(var(--px) * 11) calc(var(--px) * 26); line-height: 1.5; }
.msg .copy { margin-left: auto; }
.msg input, .msg textarea { flex: 1; font: inherit; background: transparent; border: 0; color: #000; outline: none; }
.msg input::placeholder, .msg textarea::placeholder { color: rgba(0, 0, 0, .35); }
.msg .row--msg { flex: 1; align-items: flex-start; flex-direction: column; padding-top: calc(var(--px) * 32); gap: calc(var(--px) * 24); border-bottom: 0; }
.msg .row--msg textarea { width: 100%; resize: none; }
.msg .send { align-self: center; margin-bottom: calc(var(--px) * 46); width: calc(var(--px) * 336); height: calc(var(--px) * 78); background: #000; color: #fff; border-radius: 999px; text-align: center; transition: transform .4s var(--out); }
.msg .send:hover { transform: scale(1.03); }

/* ---------- phone menu ---------- */
.menu { position: fixed; inset: 0; z-index: 95; background: #000; color: #fff; display: none; }
.menu.on { display: block; }
.menu__top { display: flex; justify-content: space-between; padding: 25px 20px 0; }
.menu ul { list-style: none; position: absolute; left: 20px; bottom: 26px; }
.menu li { font-size: 60px; line-height: 62px; text-transform: uppercase; letter-spacing: -.01em; overflow: hidden; }
.menu li a, .menu li button { display: inline-block; color: #fff; opacity: .3; transform: translateY(100%); transition: transform .7s var(--out), opacity .3s; font-size: inherit; line-height: inherit; }
.menu li .on { opacity: 1; }
.menu li button { text-transform: uppercase; }
.menu.in li a, .menu.in li button { transform: none; }

/* page fade for transitions */
.pagefade { position: fixed; inset: 0; z-index: 85; background: #fff; pointer-events: none; opacity: 0; transition: opacity .5s; }
.dark .pagefade { background: #000; }
.pagefade.on { opacity: 1; }

/* =================== phone =================== */
@media (max-width: 767px) {
  :root { --px: calc(100vw / 390); --g: calc(var(--px) * 20); --base: 18px; }
  .hd { padding: calc(var(--px) * 25) var(--g) 0; height: 70px; }
  .hd__nav, .hd__msg { display: none; }
  .hd__menu { display: block; color: #fff; line-height: 1.5; }
  .hd__left { width: auto; }
  .mark { font-size: calc(var(--px) * 28.5); padding-top: 0; }
  /* index */
  .car { top: calc(var(--px) * 67); height: calc(var(--px) * 412); }
  .card__lab { height: calc(var(--px) * 51); }
  .card__n { display: none; }
  .card__t { top: 0; } .card__tag { top: calc(var(--px) * 23); }
  .card__img { top: calc(var(--px) * 51); }
  .foot-row { display: none; }
  .home .wm-wrap { top: auto; bottom: calc(var(--px) * 20); }
  .wm-wrap { height: auto; }
  .wm-wrap .wm { position: static; }
  .wm--stack { flex-direction: column; align-items: center; line-height: .85; }
  .wm--stack em { margin-top: calc(var(--px) * -6); }
  /* list */
  .list-prev { top: calc(var(--px) * 120); width: calc(var(--px) * 40); height: calc(var(--px) * 50); }
  .list-prev .ph figcaption { display: none; }
  .list-names { left: calc(var(--px) * 80); width: calc(var(--px) * 290); top: calc(var(--px) * 110); font-size: calc(var(--px) * 28); line-height: calc(var(--px) * 32); }
  /* case */
  .case-top { padding-top: calc(var(--px) * 110); }
  .case-title { font-size: calc(var(--px) * 60); line-height: 1; }
  .case-year { font-size: calc(var(--px) * 45); margin-top: calc(var(--px) * 10); }
  .case-meta { height: auto; margin: calc(var(--px) * 150) var(--g) calc(var(--px) * 30); display: grid; grid-template-columns: calc(var(--px) * 252) 1fr; row-gap: calc(var(--px) * 30); line-height: 1.1; }
  .case-meta div { position: static; max-width: none !important; }
  .case-meta div:nth-child(1) { grid-column: 1 / 3; }
  .frame.hero-frame { margin: 0; }
  .hero-frame .ph { aspect-ratio: 390 / 219; }
  .frame, .frame--inset { margin: 0 var(--g); padding: 0; }
  .frame--inset .ph, .frame--full .ph { aspect-ratio: 350 / 197; }
  .frame--pair { grid-template-columns: 1fr; gap: calc(var(--px) * 40); }
  .frame--pair .ph { aspect-ratio: 350 / 438; }
  .case-body > * + *, .case-body > .block + .frame, .case-body > .block + .block { margin-top: calc(var(--px) * 120); }
  .case-body > .frame + .block { margin-top: calc(var(--px) * 80); }
  .case-body > .frame + .frame { margin-top: calc(var(--px) * 40); }
  .block { display: block; }
  .block__n { padding-top: 0; }
  .st { margin-top: calc(var(--px) * 41); font-size: calc(var(--px) * 42.5); line-height: 1; }
  .st em { font-size: calc(var(--px) * 49.9); }
  .info { display: block; margin-top: calc(var(--px) * 50); }
  .info__b { margin-top: calc(var(--px) * 49); line-height: 1.3; }
  .info__b strong { margin-bottom: calc(var(--px) * 24); }
  .stats div span:first-child { font-size: calc(var(--px) * 32); }
  .next { padding-top: calc(var(--px) * 160); }
  .next h2 { font-size: calc(var(--px) * 60); margin-top: calc(var(--px) * 40); }
  .next h4 { font-size: calc(var(--px) * 45); }
  .next .ph { width: calc(var(--px) * 210); height: calc(var(--px) * 126); margin-top: calc(var(--px) * 50); }
  /* about */
  .ab-hero { height: auto; padding: calc(var(--px) * 119) var(--g) calc(var(--px) * 40); }
  .ab-h1, .ab-h2, .ab-intro { position: static; }
  .ab-h1 { font-size: calc(var(--px) * 48); }
  .ab-h1 em { font-size: calc(var(--px) * 56); margin-top: calc(var(--px) * -8); }
  .ab-h2 { text-align: left; font-size: calc(var(--px) * 48); line-height: calc(var(--px) * 52); margin-top: calc(var(--px) * 20); }
  .ab-h2 .row1 { flex-direction: column; align-items: flex-start; gap: calc(var(--px) * 22); }
  .ab-h2 .ph { width: calc(var(--px) * 198); height: calc(var(--px) * 100); }
  .ab-intro { width: auto; margin-top: calc(var(--px) * 22); line-height: 1.55; font-size: 15px; }
  .ab-wide { margin: 0; }
  .ab-wide .ph { height: calc(var(--px) * 540); }
  .ab-story { margin-top: calc(var(--px) * 120); }
  .svc { display: block; margin-top: calc(var(--px) * 120); }
  .svc__btn { font-size: calc(var(--px) * 30); }
  .svc__btn + .svc__btn { margin-top: calc(var(--px) * 16); }
  .svc__btn sup { font-size: 10px; }
  .svc__desc { position: relative; bottom: auto; width: auto; height: calc(var(--px) * 170); margin-top: calc(var(--px) * 60); }
  .svc__d { top: 0; bottom: auto; }
  .svc__r { height: calc(var(--px) * 438); margin-top: calc(var(--px) * 20); }
  .ab-list { margin-top: calc(var(--px) * 120); }
  .ab-list .cols { margin-top: calc(var(--px) * 50); }
  .ab-list .lead { margin-top: calc(var(--px) * 50); }
  .cta { display: block; margin-top: calc(var(--px) * 120); }
  .cta .ph { height: calc(var(--px) * 438); }
  .cta__t { padding-top: calc(var(--px) * 50); }
  .cta__t h2 { font-size: calc(var(--px) * 42.5); }
  .cta__t h2 em { font-size: calc(var(--px) * 49.9); }
  .cta__t p { width: auto; margin-top: calc(var(--px) * 30); }
  .cta__t button { margin-top: calc(var(--px) * 30); }
  .ft { padding-top: calc(var(--px) * 160); padding-bottom: calc(var(--px) * 20); }
  .ft__row { flex-wrap: wrap; font-size: 15px; }
  .ft__row p { position: static; transform: none; order: 3; width: 100%; text-align: center; margin-top: 10px; }
  /* lab */
  .lab h1 { left: calc(var(--px) * 21); right: calc(var(--px) * 21); top: calc(var(--px) * 100); font-size: calc(var(--px) * 62); line-height: 1.05; }
  .lab__cap { top: auto; bottom: calc(var(--px) * 20); }
  .strip { top: calc(var(--px) * 340); bottom: auto; height: calc(var(--px) * 190); }
  .strip__in { left: var(--g); top: calc(var(--px) * 27); bottom: auto; align-items: flex-start; gap: calc(var(--px) * 12); }
  .strip button { height: calc(var(--px) * 160); }
  .strip button:hover { height: calc(var(--px) * 160); }
  .lightbox .ph { width: 90vw; }
  /* message */
  .msg__top { padding: 25px 20px 0; height: 70px; }
  .msg__grid { display: block; overflow-y: auto; height: calc(100% - 70px); }
  .msg__l { border-right: 0; padding: 30px 20px 30px; border-bottom: 1px solid rgba(0, 0, 0, .2); }
  .msg__l h2 { font-size: 36px; line-height: 38px; }
  .msg__l h2 em { font-size: 42px; }
  .msg__foot { position: static; margin-top: 30px; flex-direction: column; align-items: flex-start; gap: 16px; font-size: 15px; }
  .msg__foot p { width: auto; }
  .msg .row { min-height: 64px; padding: 0 20px; }
  .msg .row label, .msg .row .lbl { width: 70px; }
  .msg .row--msg { min-height: 180px; padding-top: 20px; }
  .msg .send { width: calc(100% - 40px); height: 60px; margin: 20px auto 30px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
}