/* DOONT — main stylesheet
   Desktop reproduces the 1440px Figma frames: 1 design px = var(--u). */

@font-face { font-family: 'IBM Plex Mono'; src: url(../fonts/IBMPlexMono-Light.woff2) format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url(../fonts/IBMPlexMono-Regular.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url(../fonts/IBMPlexMono-Medium.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url(../fonts/IBMPlexMono-SemiBold.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url(../fonts/IBMPlexMono-Bold.woff2) format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --vw: 100vw;
  --u: calc(var(--vw) / 1440);
  --fu: max(var(--u), 0.8px);          /* font unit: never shrink text below ~80% */
  --bg: #F7F6F2;
  --ink: #1A110C;
  --grey: #969696;
  --grey-2: #6B6B6B;
  --grey-3: #A1A1A1;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { display: block; max-width: none; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a, button { transition: opacity .25s ease; }
a:hover { opacity: .6; }
a.el-link:hover, a.wcard:hover, a.jcard:hover { opacity: 1; }
.ul { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: from-font; }

/* ---------------------------------------------------------------- nav */
.nav { position: absolute; z-index: 10; top: 0; left: 0; width: 100%; height: calc(51 * var(--u)); font-size: calc(9 * var(--fu)); letter-spacing: .06em; line-height: 1.3; }
.nav--light { color: #fff; }
.nav--dark { color: var(--ink); }
.nav__logo { position: absolute; left: calc(213 * var(--u)); top: calc(22.2 * var(--u)); }
.nav__logo img { width: calc(68 * var(--u)); min-width: 54px; height: auto; }
.nav__links { position: absolute; left: calc(653.5 * var(--u)); top: calc(19.8 * var(--u)); display: flex; gap: calc(16 * var(--u)); }
.nav__lang { position: absolute; left: calc(1147.6 * var(--u)); top: calc(19.8 * var(--u)); display: flex; white-space: pre; letter-spacing: .02em; }
.nav__lang a:not([aria-current]) { opacity: 1; }
.nav__lang span { padding-left: 1ch; }
.nav__toggle { display: none; }

/* ---------------------------------------------------------------- hero */
.hero { position: relative; height: calc(917 * var(--u)); overflow: hidden; color: #fff; background: #111; }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__video::-webkit-media-controls { display: none !important; }
.hero:has(.hero__video)::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .14); pointer-events: none; }
.hero__logo, .hero__tag, .hero__cities { z-index: 1; }
.hero__logo { position: absolute; left: calc(252.2 * var(--u)); top: calc(432.8 * var(--u)); width: calc(175.5 * var(--u)); height: auto; }
.hero__tag { position: absolute; left: calc(968.6 * var(--u)); top: calc(475.5 * var(--u)); font-size: calc(11.2 * var(--fu)); letter-spacing: .016em; line-height: 1.3; }
.hero__cities { position: absolute; left: 0; width: 100%; top: calc(775 * var(--u)); text-align: center; font-size: calc(10 * var(--fu)); letter-spacing: .03em; line-height: 1.3; }

/* ---------------------------------------------------------------- band layout (desktop) */
main { display: flow-root; }
.band { position: relative; height: calc(var(--h) * var(--u)); margin-top: calc(var(--mt) * var(--u)); }
.band-end { margin-top: calc(var(--mt) * var(--u)); }
.el { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); }
.im, .el-link { width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); object-fit: cover; background: #e9e7e1; }
.el-link img { width: 100%; height: 100%; object-fit: cover; }
.ln { width: calc(var(--w) * var(--u)); height: max(0.5px, calc(var(--h) * var(--u))); }
.tx { font-size: calc(var(--fs) * var(--fu)); line-height: calc(var(--lh) * var(--fu)); letter-spacing: calc(var(--ls, 0) * var(--fu)); width: calc(var(--w) * var(--u)); }
.tx p + p { margin-top: calc(var(--pg, 0) * var(--fu)); }
.tx.big { font-size: calc(var(--fs) * var(--u)); line-height: calc(var(--lh) * var(--u)); letter-spacing: calc(var(--ls, 0) * var(--u)); }
.nw { white-space: nowrap; }
.ac { text-align: center; }
.aj { text-align: justify; }
.brk { display: inline-flex; }
.brk > span:nth-child(2) { margin-left: calc(var(--gl) * var(--u)); margin-right: calc(var(--gr) * var(--u)); }
.ast { position: absolute; left: calc(var(--ax) * var(--u)); top: calc(var(--ay) * var(--u)); font-size: calc(var(--as) * var(--u)); line-height: 1.3; letter-spacing: 0; }
.spread { display: flex; justify-content: space-between; }
.ast-i { font-size: .46em; vertical-align: .9em; letter-spacing: 0; margin-left: .04em; }
.pre p { white-space: pre-line; }
.pre { white-space: normal; }
.pre.nw p { white-space: pre; }
.map, .mark { background: none; object-fit: contain; }
.raw { width: 100%; left: 0; }

/* home: journal cards */
.jcards { position: relative; width: 100%; height: calc(532 * var(--u)); }
.jcard { position: absolute; left: calc(var(--x) * var(--u)); top: 0; width: calc(298.6 * var(--u)); display: block; }
.jcard img { width: 100%; height: calc(441.1 * var(--u)); object-fit: cover; }
.jcard__rule { position: absolute; left: 0; right: 0; top: calc(450.7 * var(--u)); height: .5px; background: #7E7E7E; }
.jcard__date { position: absolute; left: 0; top: calc(465.9 * var(--u)); font-size: calc(10 * var(--fu)); line-height: 1.3; color: var(--grey-2); white-space: nowrap; }
.jcard__title { position: absolute; left: 0; top: calc(494.5 * var(--u)); font-size: calc(14.4 * var(--fu)); line-height: calc(20 * var(--fu)); white-space: nowrap; }
.jcard:hover img, .el-link:not(.has-hov):hover img, .wcard:hover img { opacity: .88; }
.el-link.has-hov { overflow: hidden; }
.el-link .hov { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease; }
@media (hover: hover) { .el-link.has-hov:hover .hov { opacity: 1; } }
.jcard img, .el-link img, .wcard img { transition: opacity .3s ease; }

/* ---------------------------------------------------------------- works */
.whead { position: relative; height: calc(552 * var(--u)); }
.whead__title { position: absolute; margin: 0; left: calc(78.25 * var(--u)); top: calc(268.25 * var(--u)); font-weight: 400; font-size: calc(150 * var(--u)); line-height: 1; letter-spacing: -0.063em; }
.whead__count { position: absolute; left: calc(100% + 20.3 * var(--u)); top: calc(25.55 * var(--u)); font-size: calc(12 * var(--fu)); line-height: 1.3; letter-spacing: 0; white-space: nowrap; }
.whead__filters { position: absolute; left: calc(84 * var(--u)); top: calc(438.25 * var(--u)); display: flex; gap: calc(20 * var(--u)); font-size: calc(10 * var(--fu)); line-height: 1.3; letter-spacing: .02em; }
.whead__filters button { color: var(--grey-3); }
.whead__filters button.is-on { color: var(--ink); }
.whead__intro { position: absolute; left: calc(1064 * var(--u)); top: calc(413.4 * var(--u)); font-size: calc(12 * var(--fu)); line-height: calc(15 * var(--fu)); }
.wgrid { display: grid; grid-template-columns: repeat(3, calc(458 * var(--u))); column-gap: calc(23 * var(--u)); row-gap: calc(31.2 * var(--u)); align-items: start; padding: 0 calc(10 * var(--u)); margin-bottom: calc(310.2 * var(--u)); }
.wcard { display: block; }
.wcard img { width: 100%; height: calc(var(--h) * var(--u)); object-fit: cover; background: #e9e7e1; }
.wcard__cap { display: flex; margin-top: calc(5.2 * var(--u)); line-height: 1.3; white-space: nowrap; }
.wcard__n { font-size: calc(10 * var(--fu)); letter-spacing: .13em; width: calc(47 * var(--u)); padding-top: calc(1.5 * var(--u)); }
.wcard__name { font-size: calc(12 * var(--fu)); color: #000; }
.wcard.is-hidden { display: none; }

/* ---------------------------------------------------------------- footer */
.foot { position: relative; height: calc(696 * var(--u)); overflow: hidden; font-size: calc(9.7 * var(--fu)); line-height: 1.3; color: var(--ink); }
.foot--line::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: .5px; background: #525252; transform: translateY(calc(-77.5 * var(--u))); }
.foot--line { overflow: visible; }
.foot__cities { position: absolute; left: calc((55 + var(--dx)) * var(--u)); top: calc(44.1 * var(--u)); }
.foot__copy { position: absolute; right: calc((46.6 - var(--dx)) * var(--u)); top: calc(44.1 * var(--u)); }
.foot__cols { position: absolute; top: calc(241.9 * var(--u)); left: 0; width: 100%; line-height: calc(27 * var(--u)); }
.foot__col { position: absolute; top: 0; display: flex; flex-direction: column; white-space: nowrap; }
.foot__col--1 { left: calc((55 + var(--dx)) * var(--u)); }
.foot__col--2 { left: calc((325 + var(--dx)) * var(--u)); }
.foot__col--3 { left: calc((619 + var(--dx)) * var(--u)); }
.foot__col--4 { left: calc((983 + var(--dx)) * var(--u)); }
.foot__lbl { color: var(--grey); }
.foot__clock { font-size: calc(13 * var(--fu)); letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.foot__logo { position: absolute; left: calc(3.5 * var(--u)); top: calc(489 * var(--u)); width: calc(723.5 * var(--u)); height: auto; }
.foot__oon { position: absolute; right: calc((45.9 - var(--dx)) * var(--u)); top: calc(638 * var(--u)); color: #8E8E8E; }
.foot { overflow: clip; }
.foot--line { overflow: visible; }
.foot--line .foot__logo { clip-path: inset(0 0 calc(-1 * var(--u)) 0); }

/* ================================================================ templates (content-driven) */
.tpl main { padding-bottom: calc(77.5 * var(--u)); }
.b { font-weight: 600; }

/* ---- project page */
.pj { position: relative; font-size: calc(12 * var(--fu)); line-height: calc(14.7 * var(--fu)); }
.pj p { margin: 0; }
.pj-im { display: block; object-fit: cover; background: #e9e7e1; }
.pj-head { position: relative; height: calc(453 * var(--u)); }
.pj-title { position: absolute; left: calc(30 * var(--u)); top: calc(122.5 * var(--u)); margin: 0; font-weight: 400; font-size: calc(120 * var(--u)); line-height: 1; letter-spacing: calc(-11 * var(--u)); white-space: nowrap; }
.pj-title--long { top: calc(132 * var(--u)); font-size: calc(100 * var(--u)); }
.pj-meta__c { position: absolute; top: calc(319.7 * var(--u)); display: flex; flex-direction: column; white-space: nowrap; }
.pj-meta__c--0 { left: calc(46.5 * var(--u)); } .pj-meta__c--1 { left: calc(334.5 * var(--u)); }
.pj-meta__c--2 { left: calc(533.3 * var(--u)); } .pj-meta__c--3 { left: calc(793.4 * var(--u)); }
.pj-meta__l { color: var(--grey); line-height: calc(15.6 * var(--fu)); }
.pj-meta__v { margin-top: calc(23.05 * var(--u)); line-height: calc(12.3 * var(--fu)); }
.pj-hero { position: relative; height: calc(1199 * var(--u)); }
.pj-hero__im { position: absolute; left: calc(12 * var(--u)); top: 0; width: calc(970 * var(--u)); height: 100%; }
.pj-about { position: absolute; left: calc(1003.7 * var(--u)); top: calc(3.1 * var(--u)); width: calc(395 * var(--u)); }
.pj-about p + p { margin-top: calc(14.6 * var(--fu)); }
.pj-lbl { color: var(--grey); }
.pj-wide { margin: calc(8.4 * var(--u)) 0 0 calc(12 * var(--u)); width: calc(1417 * var(--u)); height: calc(745.6 * var(--u)); }
.pj-more { position: relative; min-height: calc(var(--more-h, 240.4) * var(--u)); }
.pj-more__lbl { position: absolute; left: calc(59.9 * var(--u)); top: calc(var(--more-lbl, 64) * var(--u)); font-size: calc(15 * var(--fu)); line-height: 1.3; color: #AAAAAA; }
.pj-more__tx { position: relative; margin-left: calc(var(--more-x, 866.5) * var(--u)); padding: calc(var(--more-pt, 70.1) * var(--u)) 0 calc(60 * var(--u)); width: calc(var(--more-w, 522) * var(--u)); text-align: var(--more-ta, justify); }
.pj-more__tx p + p, .pj-story__tx p + p { margin-top: calc(14.7 * var(--fu)); }
.pj-grid { display: grid; grid-template-columns: calc(703 * var(--u)) calc(704 * var(--u)); column-gap: calc(9 * var(--u)); row-gap: calc(10 * var(--u)); margin-left: calc(12 * var(--u)); }
.pj-grid .pj-im { width: 100%; height: calc(467.5 * var(--u)); }
.pj-story { display: flex; align-items: center; min-height: calc(var(--story-h, 470) * var(--u)); }
.pj-story--top { align-items: flex-start; }
.pj-story--top .pj-story__tx { padding: calc(var(--story-pt) * var(--u)) 0 0; transform: none; }
.pj-story__tx { margin-left: calc(var(--story-x, 53) * var(--u)); width: calc(var(--story-w, 410) * var(--u)); padding: calc(40 * var(--u)) 0; transform: translateY(calc(-6.5 * var(--u))); }
.pj-verts { display: grid; grid-template-columns: calc(464 * var(--u)) calc(466 * var(--u)) calc(466 * var(--u)); column-gap: calc(9 * var(--u)); margin-left: calc(14 * var(--u)); }
.pj-verts .pj-im { width: 100%; height: calc(699 * var(--u)); }
.pj-pair { display: grid; grid-template-columns: calc(702 * var(--u)) calc(702 * var(--u)); column-gap: calc(13 * var(--u)); margin: calc(10 * var(--u)) 0 0 calc(11 * var(--u)); }
.pj-pair .pj-im { width: 100%; height: calc(470 * var(--u)); }
.pj-grid.pj-one, .pj-pair.pj-one { grid-template-columns: calc(1417 * var(--u)); margin-left: calc(12 * var(--u)); }
.pj-pair.pj-one { margin-top: 0; }
.pj-one .pj-im { height: calc(745.6 * var(--u)); }
.pj-credits { position: relative; min-height: calc(var(--cred-h, 393) * var(--u)); line-height: calc(17 * var(--fu)); }
.pj-cr1 { position: absolute; left: calc(var(--cr1-x, 62.2) * var(--u)); top: calc(var(--cr1-top, 113.9) * var(--u)); width: calc(800 * var(--u)); }
.pj-cr2 { position: absolute; left: calc(var(--cr2-x, 934.2) * var(--u)); top: calc(var(--cr2-top, 136.9) * var(--u)); width: calc(min(480, 1428 - var(--cr2-x, 934.2)) * var(--u)); }
.pj-cr2 p + p { margin-top: calc(17 * var(--fu)); }
.pj .pj-arch { margin-top: calc(var(--arch-mt, 43) * var(--fu)); }
.cr-l { font-weight: 300; }
.cr-v, .cr-name { font-weight: 400; }
.pj-final { margin-left: calc(12 * var(--u)); width: calc(1416 * var(--u)); height: calc(571 * var(--u)); }
.pj-notes { min-height: calc(var(--notes-h, 156.5) * var(--u)); padding: calc(64.8 * var(--u)) 0 calc(20 * var(--u)) calc(62.2 * var(--u)); line-height: calc(17 * var(--fu)); }
.pj-notes:empty { padding: 0; }
.pj-final--more { margin-top: calc(24 * var(--u)); }
.pj-closing { margin-top: 0; }

/* ---- journal */
.jhead { position: relative; height: calc(476.5 * var(--u)); }
.jhead__title { position: absolute; margin: 0; left: calc(53.4 * var(--u)); top: calc(268.25 * var(--u)); font-weight: 400; font-size: calc(150 * var(--u)); line-height: 1; letter-spacing: calc(-9.46 * var(--u)); }
.jlist { padding: 0 calc(28 * var(--u)); }
.jrow { position: relative; border-bottom: .5px solid #8A8A8A; }
.jrow--pair { min-height: calc(1239 * var(--u)); }
.jrow--full { min-height: calc(1050 * var(--u)); }
.jrow--center { min-height: calc(1274 * var(--u)); }
.jrow--pair { display: grid; grid-template-columns: calc(663 * var(--u)) calc(664 * var(--u)); column-gap: calc(58 * var(--u)); padding: calc(40.5 * var(--u)) 0 calc(55.15 * var(--u)); }
.jrow--pair::before { content: ''; position: absolute; top: 0; bottom: 0; left: calc(691.5 * var(--u)); width: .5px; background: #8A8A8A; }
.jrow--full { padding: calc(38.5 * var(--u)) 0 calc(28.35 * var(--u)); }
.jrow--center { padding: calc(52.5 * var(--u)) 0 calc(51.15 * var(--u)); }
.je--center { width: calc(664 * var(--u)); margin-left: calc(360 * var(--u)); }
.je-im { display: block; width: 100%; object-fit: cover; background: #e9e7e1; }
.je-im--landscape { height: calc(523 * var(--u)); }
.je-im--portrait { height: calc(784 * var(--u)); }
.je--full .je-im { height: calc(593 * var(--u)); }
.je-meta { display: flex; justify-content: space-between; margin-top: calc(33.45 * var(--u)); font-size: calc(10 * var(--fu)); line-height: calc(13 * var(--fu)); letter-spacing: .13em; }
.je-title { display: flex; align-items: center; min-height: calc(58.6 * var(--fu)); margin: calc(22.5 * var(--u)) 0 0; font-weight: 400; font-size: calc(21.8 * var(--fu)); line-height: calc(29.3 * var(--fu)); }
.je-body { margin-top: calc(25.3 * var(--u)); font-size: calc(11.8 * var(--fu)); line-height: calc(14.7 * var(--fu)); text-align: justify; }
.je-body p + p { margin-top: calc(14.7 * var(--fu)); }
.je-links { margin: calc(111.2 * var(--u)) 0 0; font-size: calc(12 * var(--fu)); line-height: calc(14.7 * var(--fu)); color: var(--grey); }
.je-links a { color: inherit; }
.pg-journal .foot { margin-top: calc(43.5 * var(--u)); }
.wcard__im { display: block; width: 100%; height: auto; background: #e9e7e1; }

/* ================================================================ MOBILE (≤ 900px)
   The desktop canvas (absolute bands) becomes a single reading column.
   Gutters: 12px for photos, 16px for text. */
@media (max-width: 900px) {
  :root { --g: 16px; --gi: 12px; }
  body { font-size: 13px; }

  /* ---- nav + menu */
  .nav { position: absolute; height: 56px; font-size: 11px; }
  .nav__logo { left: var(--g); top: 22px; }
  .nav__logo img { width: 78px; min-width: 0; }
  .nav__toggle { display: block; position: absolute; right: 8px; top: 12px; width: 40px; height: 32px; z-index: 30; }
  .nav__toggle span { position: absolute; left: 10px; right: 10px; height: 1px; background: currentColor; transition: transform .3s ease, top .3s ease; }
  .nav__toggle span:first-child { top: 12px; }
  .nav__toggle span:last-child { top: 19px; }
  .nav__links, .nav__lang { display: none; }
  body.menu-open { overflow: hidden; }
  body.menu-open .nav { position: fixed; inset: 0; height: 100dvh; background: var(--bg); color: var(--ink); z-index: 100; }
  body.menu-open .nav__logo img { filter: brightness(0); }
  body.menu-open .nav__toggle span:first-child { top: 15.5px; transform: rotate(45deg); }
  body.menu-open .nav__toggle span:last-child { top: 15.5px; transform: rotate(-45deg); }
  body.menu-open .nav__links { display: flex; flex-direction: column; gap: 6px; left: var(--g); top: 110px; font-size: 40px; letter-spacing: -0.04em; line-height: 1.15; }
  body.menu-open .nav__lang { display: flex; left: var(--g); top: auto; bottom: 32px; font-size: 13px; }

  /* ---- hero */
  .hero { height: 88svh; min-height: 480px; }
  .hero__logo { left: var(--g); top: 50%; bottom: auto; width: 30vw; max-width: 150px; transform: translateY(-50%); }
  .hero__tag { left: auto; right: var(--g); width: auto; max-width: 52vw; top: 50%; bottom: auto; transform: translateY(-50%); text-align: right; font-size: 8.5px; letter-spacing: .04em; }
  .hero__cities { left: 0; width: 100%; top: auto; bottom: 28px; text-align: center; font-size: 8.5px; letter-spacing: .04em; }
  .hero--studio { height: 62svh; min-height: 360px; }

  /* ---- generic bands (Home, Studio) */
  .band { height: auto !important; display: flex; flex-direction: column; gap: 14px;
          margin-top: clamp(28px, calc(var(--mt) * 0.32px), 96px); padding: 0 var(--g); }
  .band-end { margin-top: 72px; }
  .el { position: relative; left: auto !important; top: auto !important; }
  .im, .el-link { width: auto !important; height: auto !important; margin: 0 calc(var(--gi) - var(--g)); }
  .el-link img, .im { width: 100%; height: auto; }
  .el-link .hov { display: none; }
  .el-link { display: block; }
  .ln { width: 100% !important; height: .5px !important; }
  .ln-v { display: none; }
  .tx { width: auto !important; font-size: clamp(12px, calc(var(--fs) * 1.08px), 14px); line-height: calc(var(--lh) / var(--fs));
        letter-spacing: calc(var(--ls, 0) / var(--fs) * 1em); white-space: normal; }
  .tx p + p { margin-top: calc(var(--pg, 0) / var(--fs) * 1em); }
  .tx.big { font-size: min(calc(var(--fs) * 0.45px), 17.5vw); line-height: 1; letter-spacing: calc(var(--ls, 0) / var(--fs) * 1em); white-space: normal; }
  .aj { text-align: left; }
  .nw, .pre.nw p { white-space: normal; }
  .ast { position: static; font-size: .46em; vertical-align: .9em; line-height: 0; }
  .tx.big p { display: inline; }
  .spread { width: 100%; }
  .brk > span:nth-child(2) { margin: 0 1.6ch; }
  .map { margin: 0 calc(var(--gi) - var(--g)); }
  .mark { width: 22px !important; }

  /* home: featured projects — identical rhythm between projects */
  .band.b-proj { gap: 0; margin-top: 0; }
  .band.b-proj + .band.b-proj { margin-top: 0; }
  .b-proj .el-link { margin-top: 44px; }
  .b-proj .tx { margin-top: 10px; }
  .band.b-proj:first-of-type .el-link:first-child { margin-top: 0; }

  .band.b-all { margin-top: 56px; }
  .band.b-all, .band.b-btn { align-items: center; }
  .pg-home .band.b-all .tx, .pg-home .band.b-btn .tx { text-align: center; }
  .band.b-sec { margin-top: 150px; }
  .band.b-sec .tx + .tx { margin-top: 10px; }
  .band.b-sub { margin-top: 18px; }
  /* What we do + Recognition: centred on mobile */
  .band.b-sec.b-c, .band.b-sub { align-items: center; text-align: center; }
  .pg-home .band.b-sec.b-c .tx, .pg-home .band.b-sub .tx { text-align: center; }
  /* What we do styled like Recognition */
  .pg-home .lab-wwd { color: var(--ink) !important; }
  .pg-home .tx.svc { text-transform: uppercase; color: #8F8F8F !important; font-weight: 400 !important;
                     font-size: min(12.1px, calc((100vw - 32px) / 29)); letter-spacing: .11em; line-height: 1.68; }
  .pg-home .tx.svc p { white-space: pre; }  /* one service per line, never a widow */
  .tx p, .pj p, .je-body p, .je-title, .ct-intro { text-wrap: pretty; }

  /* home: about, captions, journal cards */
  .pg-home .about { text-align: left; }
  .raw { margin: 0 calc(var(--gi) - var(--g)); }
  .jcards { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 28px 10px; }
  .jcard { position: relative; left: auto; width: auto; }
  .jcard img { height: auto; aspect-ratio: 299 / 441; }
  .jcard__rule, .jcard__date, .jcard__title { position: static; display: block; }
  .jcard__rule { margin-top: 8px; }
  .jcard__date { margin-top: 10px; font-size: 10px; }
  .jcard__title { margin-top: 8px; font-size: 13px; line-height: 1.35; white-space: normal; }

  /* ---- works */
  .whead { height: auto; padding: 120px var(--g) 40px; }
  .whead__title { position: relative; left: auto; top: auto; display: inline-block; font-size: 22vw; }
  .whead__count { left: calc(100% + 6px); top: 4px; font-size: 11px; }
  .whead__filters { position: static; margin-top: 18px; flex-wrap: wrap; gap: 8px 18px; font-size: 11px; }
  .whead__intro { position: static; margin-top: 28px; font-size: 13px; line-height: 1.35; }
  .whead__intro br { display: none; }
  .wgrid { column-gap: 10px; row-gap: 30px; padding: 0 var(--gi); margin-bottom: 96px; }
  .wcard__im { aspect-ratio: 4 / 5; height: auto; object-fit: cover; }
  .wcard__cap { margin-top: 6px; white-space: normal; }
  .wcard__n { width: auto; margin-right: 8px; font-size: 10px; padding-top: 1px; }
  .wcard__name { font-size: 12px; }

  /* ---- project page */
  .tpl main { padding-bottom: 0; }
  .pj { font-size: 13px; line-height: 1.4; }
  .pj-head { height: auto; padding: 110px var(--g) 36px; }
  .pj-title { position: static; font-size: min(17vw, 84px); letter-spacing: -0.08em; white-space: normal; line-height: .95; }
  .pj-title--long { font-size: min(12.5vw, 64px); }
  .pj-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 16px; margin-top: 34px; }
  .pj-meta__c { position: static; white-space: normal; }
  .pj-meta__l, .pj-meta__v { line-height: 1.35; }
  .pj-meta__v { margin-top: 4px; }
  .pj-hero { height: auto; display: flex; flex-direction: column; }
  .pj-hero__im { position: static; height: auto; aspect-ratio: 970 / 1199; margin: 0 var(--gi); }
  .pj-hero__im, .pj-wide, .pj-final { width: calc(100% - 2 * var(--gi)); }
  .pj-grid, .pj-verts, .pj-pair, .wgrid { grid-template-columns: minmax(0, 1fr); }
  .wgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pj-grid .pj-im, .pj-verts .pj-im, .pj-pair .pj-im, .je-im, .wcard__im { width: 100%; max-width: 100%; }
  .el img, .jcard img { max-width: 100%; }
  .pj-about { position: static; width: auto; padding: 26px var(--g) 0; }
  .pj-about p + p { margin-top: 1em; }
  .pj-wide { height: auto; aspect-ratio: 1417 / 746; margin: 40px var(--gi) 0; }
  .pj-more { min-height: 0; padding: 40px var(--g) 0; }
  .pj-more__lbl { position: static; font-size: 14px; }
  .pj-more__tx { margin: 14px 0 0; padding: 0; width: auto; text-align: left; }
  .pj-grid { row-gap: 10px; margin: 40px var(--gi) 0; }
  .pj-grid .pj-im, .pj-pair .pj-im { height: auto; aspect-ratio: 703 / 468; }
  .pj-story { min-height: 0; display: block; padding: 40px var(--g) 0; }
  .pj-story__tx { margin: 0; width: auto; padding: 0; transform: none; }
  .pj-verts { row-gap: 10px; margin: 40px var(--gi) 0; }
  .pj-verts .pj-im { height: auto; aspect-ratio: 466 / 699; }
  .pj-pair { row-gap: 10px; margin: 10px var(--gi) 0; }
  .pj-one .pj-im { height: auto; aspect-ratio: 1417 / 746; }
  .pj-grid.pj-one, .pj-pair.pj-one { grid-template-columns: minmax(0, 1fr); margin-left: var(--gi); }
  .pj-story + .pj-pair { margin-top: 40px; }
  .pj-story--top .pj-story__tx { padding: 0; }
  .pj-credits { min-height: 0; padding: 48px var(--g) 0; line-height: 1.5; }
  .pj-cr1, .pj-cr2 { position: static; width: auto; }
  .pj-cr2 { margin-top: 1.5em; }
  .pj-cr2 p + p { margin-top: 1.5em; }
  .pj .pj-arch { margin-top: 1.5em; }
  .pj-final { height: auto; aspect-ratio: 1416 / 571; margin: 48px var(--gi) 0; }
  .pj-final--more { margin-top: 10px; }
  .pj-credits + .pj-closing { margin-top: 48px; }
  .pj-notes { min-height: 0; padding: 28px var(--g) 64px; line-height: 1.5; }

  /* ---- journal */
  .jhead { height: auto; padding: 120px var(--g) 30px; }
  .jhead__title { position: static; font-size: 19vw; letter-spacing: -0.063em; }
  .jlist { padding: 0 var(--gi); }
  .jrow, .jrow--pair, .jrow--full, .jrow--center { display: block; min-height: 0; padding: 0; border-bottom: 0; }
  .jrow--pair::before { display: none; }
  .je, .je--center { width: auto; margin: 0; padding: 28px 0 36px; border-bottom: .5px solid #8A8A8A; }
  .je-im, .je-im--landscape, .je-im--portrait, .je--full .je-im { height: auto; }
  .je-im--landscape { aspect-ratio: 663 / 523; }
  .je-im--portrait { aspect-ratio: 664 / 784; }
  .je--full .je-im { aspect-ratio: 1384 / 593; }
  .je-meta { margin-top: 16px; font-size: 10px; padding: 0 4px; }
  .je-title { min-height: 0; display: block; margin-top: 14px; font-size: 20px; line-height: 1.3; padding: 0 4px; }
  .je-body { margin-top: 14px; font-size: 13px; line-height: 1.45; text-align: left; padding: 0 4px; }
  .je-links { margin-top: 22px; font-size: 12px; line-height: 1.5; padding: 0 4px; }
  .pg-journal .foot { margin-top: 0; }

  /* ---- footer */
  .foot { height: auto; min-height: 100svh; display: flex; flex-direction: column; overflow: hidden;
          padding: 56px var(--g) 0; font-size: 11px; line-height: 1.5; }
  .foot__cols { flex: 1 0 auto; align-content: center; }
  .foot--line::before { transform: none; }
  .foot__cities, .foot__copy, .foot__cols, .foot__col, .foot__logo, .foot__oon { position: static; }
  .foot__copy { margin-top: 6px; }
  .foot__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 16px; margin: 72px 0; line-height: 1.8; }
  .foot__col--4 { grid-column: 1 / -1; white-space: normal; }
  .foot__clock { font-size: 15px; }
  .foot__col--4 span, .foot__col--4 a { white-space: normal; }
  .foot__oon { display: block; margin-top: 0; order: 3; }
  .foot__logo { display: block; order: 4; width: calc(100% + 2 * var(--g) - 6px); max-width: none; margin: 40px 0 0 calc(3px - var(--g)); }
  .foot__cities { order: 0; } .foot__copy { order: 1; } .foot__cols { order: 2; }
}

/* ================================================================ ENHANCEMENTS (no layout changes) */

/* ---- page transitions (Chrome/Edge/Safari 18+; others just navigate) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; animation-timing-function: ease; }
::view-transition-group(*) { animation-duration: .6s; animation-timing-function: cubic-bezier(.3, .7, .2, 1); }

/* ---- reveal on scroll (only when JS is running) */
.rv-on .rv { opacity: 0; transform: translateY(18px); transition: opacity .9s ease, transform 1s cubic-bezier(.2, .6, .2, 1); }
.rv-on .rv.in { opacity: 1; transform: none; }

/* ---- works: second photo on hover */
.wcard__media { position: relative; display: block; overflow: hidden; }
.wcard .hov { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease; }
@media (hover: hover) { .wcard.has-hov:hover .hov { opacity: 1; } .wcard.has-hov:hover img { opacity: 1; } }

/* ---- project: next project */
.pj-next { padding: 0 calc(62.2 * var(--u)) calc(40 * var(--u)); }
.pj-next__a { display: grid; grid-template-columns: 1fr calc(343 * var(--u)); column-gap: calc(40 * var(--u)); align-items: end; border-top: .5px solid #8A8A8A; padding-top: calc(28 * var(--u)); }
.pj-next__lbl { grid-column: 1; align-self: start; color: var(--grey); font-size: calc(12 * var(--fu)); letter-spacing: .04em; }
.pj-next__name { grid-column: 1; font-size: calc(72 * var(--u)); line-height: 1; letter-spacing: -0.07em; }
.pj-next__im { grid-column: 2; grid-row: 1 / span 2; width: 100%; aspect-ratio: 458 / 489; object-fit: cover; display: block; background: #e9e7e1; transition: opacity .3s; }
a.pj-next__a:hover { opacity: 1; }
a.pj-next__a:hover .pj-next__im { opacity: .85; }
.pj .pj-im { cursor: zoom-in; }

/* ---- lightbox */
.lb { position: fixed; inset: 0; z-index: 200; background: rgba(17, 17, 17, .97); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .3s ease; }
.lb.is-open { opacity: 1; }
.lb__img { max-width: calc(100vw - 160px); max-height: calc(100vh - 120px); object-fit: contain; user-select: none; }
.lb button { position: absolute; color: #F7F6F2; font: inherit; font-size: 12px; letter-spacing: .08em; padding: 14px; }
.lb__close { top: 12px; right: 16px; }
.lb__prev { left: 8px; top: 50%; transform: translateY(-50%); font-size: 22px !important; }
.lb__next { right: 8px; top: 50%; transform: translateY(-50%); font-size: 22px !important; }
.lb__count { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: #F7F6F2; font-size: 11px; letter-spacing: .08em; }
body.lb-open { overflow: hidden; }

/* ---- studio: interactive map */
.mapwrap { width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); }
.mapwrap .map { display: block; width: 100%; height: 100%; }
.map-pin { position: absolute; width: 0; height: 0; }
.map-pin__b { position: absolute; left: calc(-16 * var(--u)); top: calc(-16 * var(--u)); width: calc(32 * var(--u)); height: calc(32 * var(--u)); min-width: 28px; min-height: 28px; border-radius: 50%; cursor: pointer; }
.map-pin__b::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: .5px solid var(--ink); opacity: 0; transform: scale(.8); transition: opacity .3s, transform .3s; }
.map-pin__b:hover::after, .map-pin.is-open .map-pin__b::after { opacity: 1; transform: scale(1); }
.map-pop { position: absolute; left: calc(26 * var(--u)); top: calc(22 * var(--u)); z-index: 5; min-width: 210px; max-width: 260px; padding: 14px 16px; background: var(--bg); border: .5px solid #8A8A8A;
           font-size: 11px; line-height: 1.7; letter-spacing: .02em; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .25s, transform .25s, visibility .25s; }
.map-pop--l { left: auto; right: calc(26 * var(--u)); }
.map-pin.is-open .map-pop { opacity: 1; visibility: visible; transform: none; }
@media (hover: hover) { .map-pin:hover .map-pop { opacity: 1; visibility: visible; transform: none; } }
.map-pop__t { margin: 0 0 6px; }
.map-pop__t span { color: var(--grey); }
.map-pop ul { list-style: none; margin: 0; padding: 0; }
.map-pop--wide { min-width: 300px; max-width: 340px; }
.map-pop--wide ul { columns: 2; column-gap: 18px; }
.map-pop a:hover { opacity: .6; }

/* ---- contact */
.foot__lbl--a { color: var(--grey); }
.ct { padding: calc(268 * var(--u)) calc(78 * var(--u)) calc(160 * var(--u)); }
.ct-title { margin: 0; font-weight: 400; font-size: calc(150 * var(--u)); line-height: 1; letter-spacing: -0.063em; }
.ct-intro { margin: calc(40 * var(--u)) 0 0 calc(6 * var(--u)); max-width: 46ch; font-size: calc(12 * var(--fu)); line-height: 1.5; }
.ct-form { display: grid; grid-template-columns: 1fr 1fr; gap: calc(34 * var(--u)) calc(40 * var(--u)); margin: calc(90 * var(--u)) 0 0 calc(6 * var(--u)); max-width: calc(900 * var(--u)); font-size: calc(12 * var(--fu)); }
.ct-f { display: flex; flex-direction: column; gap: 8px; }
.ct-f span { color: var(--grey); }
.ct-f--wide { grid-column: 1 / -1; }
.ct-f input, .ct-f select, .ct-f textarea { font: inherit; color: var(--ink); background: transparent; border: 0; border-bottom: .5px solid #8A8A8A; padding: 6px 0 8px; border-radius: 0; outline: none; }
.ct-f select { appearance: none; -webkit-appearance: none; }
.ct-f textarea { resize: vertical; }
.ct-f input:focus, .ct-f select:focus, .ct-f textarea:focus { border-bottom-color: var(--ink); }
.ct-hp { position: absolute; left: -9999px; }
.ct-send { grid-column: 1 / -1; justify-self: start; letter-spacing: .04em; padding: 4px 0; }
.ct-send:hover { opacity: .6; }
.ct-local { grid-column: 1 / -1; color: var(--grey); margin: 0; }
.ct-back { color: var(--grey); }
.ct--thanks .ct-intro { margin-bottom: calc(40 * var(--u)); }

@media (max-width: 900px) {
  .pj-next { padding: 56px var(--g) 48px; }
  .pj-next__a { grid-template-columns: 1fr 34vw; column-gap: 16px; padding-top: 20px; }
  .pj-next__lbl { font-size: 10px; }
  .pj-next__name { font-size: 9vw; }
  .lb__img { max-width: 100vw; max-height: calc(100svh - 120px); }
  .lb__prev, .lb__next { display: none; }
  .mapwrap { width: auto !important; height: auto !important; margin: 0 calc(var(--gi) - var(--g)); position: relative; }
  .mapwrap .map { height: auto; }
  .map-pop { min-width: 170px; font-size: 10px; padding: 10px 12px; }
  .ct { padding: 120px var(--g) 96px; }
  .ct-title { font-size: 18vw; }
  .ct-intro, .ct-form { margin-left: 0; font-size: 13px; }
  .ct-form { grid-template-columns: 1fr; gap: 26px; margin-top: 48px; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .rv-on .rv { opacity: 1; transform: none; transition: none; }
}

/* ------------------------------------------------------------------ header search */
.nav__search { position: absolute; left: calc(1116.6 * var(--u)); top: calc(21.3 * var(--u)); width: calc(9 * var(--fu)); height: calc(9 * var(--fu)); padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.nav__search svg { display: block; width: 100%; height: 100%; overflow: visible; }
.nav__search:hover, .nav__mail:hover { opacity: .6; }
.nav__mail { position: absolute; left: calc(1094 * var(--u)); top: calc(22.05 * var(--u)); width: calc(11.4 * var(--fu)); height: calc(7.9 * var(--fu)); color: inherit; }
.nav__mail svg { display: block; width: 100%; height: 100%; overflow: visible; }
.nav__lang::before { content: ''; position: absolute; left: calc(-11 * var(--u)); top: 50%; width: 0; height: calc(10 * var(--fu)); border-left: .5px solid currentColor; opacity: .5; transform: translateY(-50%); }
.srch { position: fixed; inset: 0; z-index: 200; display: none; overflow-y: auto; background: var(--bg); color: var(--ink);
  padding: calc(120 * var(--u)) calc(213 * var(--u)) calc(80 * var(--u)); }
.srch.is-open { display: block; animation: srch-in .25s ease; }
@keyframes srch-in { from { opacity: 0; } to { opacity: 1; } }
body.srch-open { overflow: hidden; }
.srch__x { position: absolute; left: calc(1147.6 * var(--u)); top: calc(19.8 * var(--u)); padding: 0; border: 0; background: none; color: inherit; cursor: pointer;
  font: inherit; font-size: calc(9 * var(--fu)); letter-spacing: .06em; line-height: 1.3; }
.srch__x:hover { opacity: .6; }
.srch__bar { display: flex; align-items: center; gap: calc(14 * var(--u)); padding: 0 0 calc(14 * var(--u)); border-bottom: .5px solid #8A8A8A; cursor: text; }
.srch__bar svg { flex: none; width: calc(15 * var(--fu)); height: calc(15 * var(--fu)); overflow: visible; }
.srch__in { display: block; flex: 1; min-width: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--ink);
  font: inherit; font-size: calc(20 * var(--fu)); line-height: 1.25; letter-spacing: -0.02em; outline: none; -webkit-appearance: none; appearance: none; }
.srch__in::placeholder { color: var(--grey-3); }
.srch__in::-webkit-search-cancel-button { display: none; }
.srch__res { list-style: none; margin: calc(28 * var(--u)) 0 0; padding: 0; }
.srch__a { display: grid; grid-template-columns: calc(130 * var(--u)) 1fr; column-gap: calc(20 * var(--u)); align-items: baseline;
  padding: calc(14 * var(--u)) 0; border-bottom: .5px solid #D9D7D1; }
.srch__k { grid-row: 1 / span 2; font-size: calc(10 * var(--fu)); letter-spacing: .06em; color: var(--grey); }
.srch__t { font-size: calc(20 * var(--fu)); line-height: 1.25; letter-spacing: -0.02em; }
.srch__m { grid-column: 2; margin-top: 4px; font-size: calc(11 * var(--fu)); color: var(--grey-2); }
.srch__a:hover, .srch__a.is-sel { opacity: 1; }
.srch__a:hover .srch__t, .srch__a.is-sel .srch__t { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: .5px; }
.srch__none { padding: calc(14 * var(--u)) 0; color: var(--grey); font-size: calc(12 * var(--fu)); }
@media (max-width: 900px) {
  .nav__search { left: auto; right: 52px; top: 20px; width: 15px; height: 15px; }
  .nav__mail { left: auto; right: 82px; top: 23.5px; width: 17px; height: 12px; }
  body.menu-open .nav__search, body.menu-open .nav__mail { display: none; }
  .nav__lang::before { display: none; }
  .srch { padding: 96px var(--g) 48px; }
  .srch__x { left: auto; right: var(--g); top: 24px; font-size: 11px; }
  .srch__bar { gap: 10px; padding-bottom: 12px; }
  .srch__bar svg { width: 14px; height: 14px; }
  .srch__in { font-size: 18px; }
  .srch__res { margin-top: 16px; }
  .srch__a { grid-template-columns: 1fr; padding: 14px 0; }
  .srch__k { grid-row: auto; margin-bottom: 4px; font-size: 10px; }
  .srch__t { font-size: 18px; }
  .srch__m { grid-column: 1; font-size: 11px; }
  .srch__none { padding: 14px 0; font-size: 12px; }
}

/* ------------------------------------------------------------------ studio services */
.band.b-svx { height: auto; }
.el.svx-wrap { position: relative; left: 0; top: 0; width: 100%; }
.svx__cta { display: table; margin: calc(40 * var(--u)) auto 0; font-size: calc(12 * var(--fu)); letter-spacing: .06em; }
.svx__cta:hover { opacity: 1; text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: .5px; }
@media (max-width: 900px) { .svx__cta { margin-top: 56px; font-size: 12px; } }

.svb { margin: 0 calc(22 * var(--u)) 0 calc(88 * var(--u)); border-bottom: .5px solid #8A8A8A; }
.svb__row { border-top: .5px solid #8A8A8A; }
.svb__head { display: grid; grid-template-columns: calc(90 * var(--u)) 1fr auto; align-items: center; width: 100%; padding: calc(26 * var(--u)) 0;
  border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.svb__n { font-size: calc(10 * var(--fu)); letter-spacing: .06em; color: var(--grey); }
.svb__t { font-size: calc(56 * var(--u)); line-height: 1; letter-spacing: -0.065em; color: #B5B3AE; transition: color .5s ease; }
.svb__row.is-open .svb__t, .svb__head:hover .svb__t { color: var(--ink); }
.svb__pm { position: relative; width: calc(14 * var(--fu)); height: calc(14 * var(--fu)); margin-right: calc(4 * var(--u)); }
.svb__pm::before, .svb__pm::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; transition: transform .5s ease; }
.svb__pm::after { transform: rotate(90deg); }
.svb__row.is-open .svb__pm::after { transform: rotate(0deg); }
.svb__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s cubic-bezier(.2,.7,.2,1); }
.svb__row.is-open .svb__body { grid-template-rows: 1fr; }
.svb__in { min-height: 0; overflow: hidden; display: grid; grid-template-columns: calc(90 * var(--u)) calc(520 * var(--u)) 1fr calc(520 * var(--u)); }
.svb__txt { grid-column: 2; padding-bottom: calc(40 * var(--u)); opacity: 0; transition: opacity .4s ease; }
.svb__im { grid-column: 4; width: 100%; height: calc(340 * var(--u)); object-fit: cover; margin-bottom: calc(40 * var(--u)); background: #e9e7e1;
  opacity: 0; transform: scale(1.03); transition: opacity .6s ease, transform 1.2s cubic-bezier(.2,.7,.2,1); }
.svb__row.is-open .svb__txt { opacity: 1; transition-delay: .2s; }
.svb__row.is-open .svb__im { opacity: 1; transform: none; transition-delay: .15s; }
.svb__claim { font-size: calc(17 * var(--fu)); line-height: 1.4; letter-spacing: -0.01em; }
.svb__sub { margin: calc(26 * var(--u)) 0 0; padding: 0; list-style: none; border-top: .5px solid #D9D7D1; }
.svb__sub li { padding: calc(9 * var(--u)) 0; border-bottom: .5px solid #D9D7D1; font-size: calc(11 * var(--fu)); letter-spacing: .02em; color: var(--grey-2);
  opacity: 0; transform: translateY(6px); transition: opacity .4s ease, transform .5s ease; }
.svb__row.is-open .svb__sub li { opacity: 1; transform: none; transition-delay: calc(.3s + var(--i) * 60ms); }
.svb__see { margin-top: calc(22 * var(--u)); font-size: calc(11 * var(--fu)); color: var(--grey-2); }
@media (prefers-reduced-motion: reduce) {
  .svb__body, .svb__txt, .svb__im, .svb__sub li, .svb__pm::after { transition: none; }
}
@media (max-width: 900px) {
  .svb { margin: 0; }
  .svb__head { grid-template-columns: 34px 1fr auto; padding: 20px 0; }
  .svb__n { font-size: 10px; }
  .svb__t { font-size: 22px; letter-spacing: -0.05em; line-height: 1.1; padding-right: 12px; }
  .svb__pm { width: 13px; height: 13px; margin-right: 2px; }
  .svb__in { display: block; }
  .svb__txt { padding: 0 0 22px; }
  .svb__im { display: block; height: auto; aspect-ratio: 4 / 3; margin: 0 0 22px; }
  .svb__claim { font-size: 15px; }
  .svb__sub { margin-top: 16px; }
  .svb__sub li { padding: 9px 0; font-size: 11px; }
  .svb__see { margin-top: 14px; font-size: 11px; }
}

/* ================================================================ MOBILE POLISH (Oct 2026) */
.pic { display: contents; }
@media (max-width: 900px) {
  /* ---- Studio: vertical photos, more air, readable text */
  .hero--studio { height: 78svh; }
  .pg-studio .band { margin-top: clamp(44px, calc(var(--mt) * 0.42px), 128px); gap: 18px; }
  .pg-studio .tx:not(.big) { line-height: 1.6; }
  .pg-studio .tx.big + .tx { margin-top: 6px; }
  .pg-studio .band .im + .tx { margin-top: 2px; }
  .pg-studio .band.b-svx { margin-top: 40px; }
  /* services rows: clearer once a row is open */
  .svb__head { padding: 22px 0; }
  .svb__in { padding: 4px 0 0; }
  .svb__txt { padding: 0 0 30px; }
  .svb__claim { font-size: 15px; line-height: 1.5; }
  .svb__sub { margin-top: 24px; }
  .svb__sub li { padding: 11px 0; font-size: 11.5px; }
  .svb__see { margin-top: 20px; font-size: 11.5px; line-height: 1.6; }
  .svb__im { margin: 0 0 32px; width: 100%; }
  .svx__cta { margin-top: 48px; }

  /* ---- Project pages: room between text and photos */
  .pj-about { padding-top: 32px; }
  .pj-wide { margin-top: 48px; }
  .pj-more { padding-top: 56px; }
  .pj-more__tx { margin-top: 18px; }
  .pj-grid { margin-top: 48px; }
  .pj-story { padding-top: 56px; }
  .pj-story__tx p + p, .pj-more__tx p + p { margin-top: 1.1em; }
  .pj-verts, .pj-story + .pj-pair { margin-top: 48px; }
  .pj-credits { padding-top: 64px; }
  .pj-final { margin-top: 56px; }
  .pj-credits + .pj-closing { margin-top: 56px; }
  .pj-notes { padding-top: 32px; }

  /* ---- Journal: same rhythm as desktop (image → date → title → text → links) */
  .je, .je--center { padding: 32px 0 52px; }
  .je-meta { margin-top: 24px; }
  .je-title { margin-top: 26px; }
  .je-body { margin-top: 24px; line-height: 1.55; }
  .je-body p + p { margin-top: 1.1em; }
  .je-links { margin-top: 36px; }

  /* ---- Footer: exactly one screen, everything visible, with air */
  .foot { height: 100svh; min-height: 560px; padding: 32px var(--g) 0; justify-content: space-between; }
  .foot__cols { flex: 1 1 auto; margin: 0; padding: 36px 0; align-content: center; gap: 30px 16px; line-height: 1.75; }
  .foot__oon { margin-top: 0; }
  .foot__logo { margin-top: 18px; }
}
@media (max-width: 900px) {
  /* ---- Studio, top to bottom */
  .pg-studio .mark, .pg-studio .band.b-hide-m { display: none; }
  .pg-studio .tx.m-intro { font-size: 11px; line-height: 1.8; letter-spacing: .03em; text-align: center; text-wrap: balance; max-width: 330px; margin: 0 auto; }
  .pg-studio .band:has(> .m-intro) { margin-top: 64px; }
  .pg-studio .tx.m-ih { font-size: 9px; letter-spacing: .14em; }
  .pg-studio .tx.m-ih .spread { justify-content: center; gap: 1.4em; }
  .pg-studio .band:has(> .m-ih) { align-items: center; }
  .pg-studio .band.b-row { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 3.6vw; }
  .pg-studio .band.b-row--c { justify-content: center; }
  .pg-studio .band.b-row > .tx.big { width: auto !important; font-size: min(14.5vw, 64px); }
  .pg-studio .band.b-row > .tx:not(.big) { flex-basis: 100%; margin-top: 14px; }
  .pg-studio .tx.m-each { margin-top: 36px; padding-top: 28px; border-top: .5px solid #D9D7D1; }
  .pg-studio .tx.m-each p, .pg-studio .tx.m-quote p { white-space: normal; }
  .pg-studio .tx.m-dnatx { margin-top: 40px; }
  .pg-studio .tx.m-quote, .pg-studio .tx.m-quote p { text-align: center; }
  .pg-studio .tx.m-quote { line-height: 1.7; }
  .pg-studio .band.b-where { margin-top: 128px; }
  .pg-studio .band.b-teamt { margin-top: 112px; }
  .pg-studio .band.b-svct { margin-top: 112px; }
  .pg-studio .tx.m-hq, .pg-studio .tx.m-hq p { text-align: center; }
  .pg-studio .band.b-team + .band:has(> .ln:only-child) { display: none; }
  .pg-studio .foot--line::before { display: none; }
  .svb__claim { font-size: 13px; line-height: 1.55; color: var(--grey-2); }
}
.m-only { display: none; }
@media (max-width: 900px) {
  .d-only, .d-br { display: none; }
  .m-only { display: inline; }
  /* Studio intro: sentence case, same format as the Home intro */
  .pg-studio .tx.m-intro { font-size: 12.5px; line-height: 1.42; letter-spacing: 0; text-align: center; text-wrap: balance; max-width: none; margin: 0; }
  .pg-studio .tx.m-intro .m-only { font-weight: 300; }
  .pg-studio .tx.m-each { display: none; }
  .pg-studio .tx.m-quote { text-wrap: balance; }
  .pg-studio .tx.m-quote p { white-space: normal; }
}
@media (max-width: 900px) {
  /* OON x DOONT texts + "Each studio…": one centred block, same size */
  .pg-studio .tx.m-oontx, .pg-studio .tx.m-each { display: block; font-size: 12.5px; line-height: 1.45; letter-spacing: 0; text-align: center; text-wrap: balance; }
  .pg-studio .tx.m-oontx p, .pg-studio .tx.m-each p { white-space: normal; text-align: center; }
  .pg-studio .tx.m-oontx p + p { margin-top: 14px; }
  .pg-studio .tx.m-each { margin-top: 26px; padding-top: 0; border-top: 0; }
  .pg-studio .band:has(> .m-oontx) { align-items: center; }
}
@media (max-width: 900px) {
  /* OON / DOONT on the left (four lines), "Each studio…" on the right, same height */
  .pg-studio .band:has(> .m-oontx) { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 18px; }
  .pg-studio .tx.m-oontx, .pg-studio .tx.m-each { font-size: 10.5px; line-height: 1.45; text-wrap: wrap; }
  .pg-studio .tx.m-oontx { flex: none; text-align: left; }
  .pg-studio .tx.m-oontx p { white-space: nowrap; text-align: left; }
  .pg-studio .tx.m-oontx p + p { margin-top: 12px; }
  .pg-studio .tx.m-each { flex: 1 1 auto; min-width: 0; margin-top: 0; text-align: right; }
  .pg-studio .tx.m-each p { text-align: right; }
}
@media (max-width: 900px) {
  /* "Each studio…" flows in ~4 lines next to OON / DOONT */
  .pg-studio .band:has(> .m-oontx) { gap: 14px; }
  .pg-studio .tx.m-oontx, .pg-studio .tx.m-each { font-size: 9px; line-height: 1.55; }
  .pg-studio .tx.m-oontx p + p { margin-top: 11px; }
}
@media (max-width: 900px) {
  /* photo captions: smaller and lighter than the body text */
  .pg-studio .tx.m-cap { font-size: 10px; line-height: 1.5; color: var(--grey-2) !important; }
  .pg-studio .tx.m-cap .c-g, .pg-studio .tx.m-cap span { color: inherit !important; }
}
@media (max-width: 900px) {
  /* OON (left) and DOONT (right): two lines each, aligned on opposite sides */
  .pg-studio .tx.m-each { display: none; }
  .pg-studio .band:has(> .m-oontx) { display: block; }
  .pg-studio .tx.m-oontx { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; width: 100% !important;
                            font-size: 9.5px; line-height: 1.35; }
  .pg-studio .tx.m-oontx p { white-space: normal; max-width: 50%; }
  .pg-studio .tx.m-oontx p + p { margin-top: 0; text-align: right; }
}
@media (max-width: 900px) {
  /* "OON  x  DOONT": the x sits in the middle, same gap on both sides */
  .pg-studio .band.b-row--c > .tx.big .spread { display: inline-flex; gap: 0; }
  .pg-studio .band.b-row--c > .tx.big .spread > span + span { margin-left: 3.6vw; }
}
@media (max-width: 900px) {
  .pg-studio .tx.m-oontx p { white-space: nowrap; }
}
@media (max-width: 900px) {
  /* Home: {ABOUT} and its paragraph centred, same leading as the Studio intro */
  .pg-home .band:has(> .lab-c) { align-items: center; }
  .pg-home .tx.about, .pg-home .tx.about p { text-align: center; }
  .pg-home .tx.about { font-size: 12.5px; line-height: 1.42; text-wrap: balance; }
}