/* Bruno Zabala: recreation of the Dennis Snellenberg portfolio layout (clean-room). */
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 300 600; font-display: swap; src: url(fonts/inter-tight-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 300 600; font-display: swap; src: url(fonts/inter-tight-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --dark: #1c1d20;
  --dark-2: #141517;
  --white: #ffffff;
  --grey-hero: #999d9e;
  --light: #e9eaeb;
  --blue: #455ce9;
  --blue-2: #334bd3;
  --line: rgba(28, 29, 32, .175);
  --line-w: rgba(255, 255, 255, .2);
  --muted: rgba(28, 29, 32, .5);
  --ph: #d3d5d6;
  --ph-ink: rgba(28, 29, 32, .55);
  --gutter: 8vw;          /* outer line inset (115px at 1440) */
  --inner: 16vw;          /* text inset (230px at 1440) */
  --edge: 3vw;            /* header and bottom bar inset (43px at 1440) */
  --ease: cubic-bezier(.7, 0, .3, 1);
  --ease-out: cubic-bezier(.36, 0, .66, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: max(16px, 1.2vw); -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { font-family: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif; font-weight: 400; color: var(--dark); background: var(--white); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4, h5 { font-weight: 400; font-size: inherit; }
.label { font-size: .6em; text-transform: uppercase; letter-spacing: .05em; line-height: 1.065; opacity: .5; }
.dark .label, .label.on-dark { opacity: .5; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* ---------- placeholder image frame ---------- */
.ph { position: relative; background: var(--ph); overflow: hidden; display: block; }
.ph .ph-t { position: absolute; left: .9em; bottom: .8em; right: .9em; font-size: .62rem; line-height: 1.35; color: var(--ph-ink); letter-spacing: .01em; }
.ph .ph-t b { display: block; font-weight: 500; }
.ph.has-img { background-size: cover; background-position: center; }
.ph.has-img .ph-t { display: none; }

/* ---------- loader + page transition ---------- */
.curtain { position: fixed; inset: 0; z-index: 900; pointer-events: none; }
.curtain-panel { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--dark-2); transform: translateY(0); }
.curtain-panel::after { content: ''; position: absolute; left: -10%; width: 120%; top: calc(100% - 1px); height: 0; background: var(--dark-2); border-radius: 0 0 50% 50%; }
.curtain-panel.curve-top::before { content: ''; position: absolute; left: -10%; width: 120%; bottom: calc(100% - 1px); height: var(--curve, 0px); background: var(--dark-2); border-radius: 50% 50% 0 0; }
.curtain-panel::after { height: var(--curve-b, 0px); }
.curtain-word { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 3.125rem; line-height: 1.065; display: flex; align-items: center; gap: .35em; white-space: nowrap; }
.curtain-word::before { content: ''; width: .2em; height: .2em; border-radius: 50%; background: #fff; display: inline-block; }
html.no-curtain .curtain { display: none; }

/* ---------- header ---------- */
.header { position: absolute; top: 0; left: 0; width: 100%; z-index: 50; padding: 1.85rem var(--edge); display: flex; justify-content: space-between; align-items: flex-start; color: var(--dark); }
.header.on-image { color: #fff; }
.logo { display: flex; align-items: center; white-space: nowrap; overflow: hidden; cursor: pointer; }
.logo .c { display: inline-block; transition: transform .7s var(--ease); margin-right: .2em; }
.logo:hover .c { transform: rotate(360deg); }
.logo .roll { display: inline-flex; position: relative; overflow: hidden; }
.logo .roll-a { display: inline-block; transition: transform .7s var(--ease), opacity .7s var(--ease); margin-right: .25em; }
.logo .roll-name { display: inline-block; transition: transform .7s var(--ease); }
.logo .roll-b { display: inline-block; position: absolute; left: 100%; transition: transform .7s var(--ease); padding-left: .25em; }
.logo:hover .roll-a { transform: translateX(-110%); }
.logo .wrap { display: inline-flex; overflow: hidden; }
.logo .slide { display: inline-flex; transition: transform .7s var(--ease); }
.logo:hover .slide { transform: translateX(var(--shift, -3.5em)); }
.nav { display: flex; gap: 0; }
.nav a { position: relative; padding: 0 1.25em; display: inline-block; }
.nav a:last-child { padding-right: 0; }
.nav a::after { content: ''; position: absolute; left: 50%; bottom: -.75em; width: .3em; height: .3em; margin-left: -.15em; border-radius: 50%; background: currentColor; transform: scale(0); transition: transform .25s var(--ease-out); }
.nav a:last-child::after { left: calc(50% + .625em); }
.nav a:hover::after, .nav a.active::after { transform: scale(1); }
.nav a .mag-in { display: inline-block; }
.menu-link-m { display: none; align-items: center; gap: .55em; }
.menu-link-m::before { content: ''; width: .3em; height: .3em; border-radius: 50%; background: currentColor; }

/* ---------- burger + menu ---------- */
.burger { position: fixed; top: 1.7rem; right: 1.7rem; width: 4.6rem; height: 4.6rem; border-radius: 50%; background: var(--dark); z-index: 820; transform: scale(0); transition: transform .4s var(--ease-out), background-color .3s; display: grid; place-items: center; overflow: hidden; }
.burger.show { transform: scale(1); }
.burger::before { content: ''; position: absolute; left: -10%; width: 120%; height: 150%; top: 100%; background: var(--blue); border-radius: 50%; transition: top .5s var(--ease); }
.burger:hover::before, .menu-open .burger::before { top: -25%; }
.menu-open .burger.dark-ring { box-shadow: none; }
.burger .bars { position: relative; width: 1.45rem; height: .5rem; z-index: 1; }
.burger .bars i { position: absolute; left: 0; width: 100%; height: 1px; background: #fff; transition: transform .4s var(--ease), top .4s var(--ease); }
.burger .bars i:first-child { top: 0; }
.burger .bars i:last-child { top: 100%; }
.menu-open .burger .bars i:first-child { top: 50%; transform: rotate(45deg); }
.menu-open .burger .bars i:last-child { top: 50%; transform: rotate(-45deg); }
.burger.on-dark { box-shadow: 0 0 0 1px var(--line-w); }
.menu-shade { position: fixed; inset: 0; background: rgba(0, 0, 0, .1); backdrop-filter: none; z-index: 800; opacity: 0; pointer-events: none; transition: opacity .6s var(--ease); }
.menu-shade::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(28,29,32,.0) 50%, rgba(28,29,32,.18)); }
.menu-open .menu-shade { opacity: 1; pointer-events: auto; }
.menu { position: fixed; top: 0; right: 0; height: 100%; width: 37.5vw; min-width: 30rem; background: var(--dark); color: #fff; z-index: 810; transform: translateX(calc(100% + 12vw)); transition: transform .8s var(--ease); display: flex; flex-direction: column; justify-content: space-between; padding: 7.8rem 7.6vw 5.6rem 7vw; }
.menu-open .menu { transform: translateX(0); }
.menu::before { content: ''; position: absolute; top: -10%; right: calc(100% - 1px); height: 120%; width: 12vw; background: var(--dark); border-radius: 0 100% 100% 0 / 0 50% 50% 0; transform-origin: right; transform: scaleX(1); transition: transform .8s var(--ease); clip-path: none; }
.menu::before { border-radius: 100% 0 0 100% / 50% 0 0 50%; right: calc(100% - 1px); }
.menu-open .menu::before { transform: scaleX(0); }
.menu .label { padding-bottom: 2.1rem; border-bottom: 1px solid var(--line-w); opacity: .5; }
.menu nav { margin-top: 3.4rem; display: flex; flex-direction: column; }
.menu nav a { font-size: 3.5rem; line-height: 1.4; position: relative; display: inline-flex; align-items: center; width: max-content; }
.menu nav a::before { content: ''; position: absolute; left: -2.2rem; top: 50%; width: .65rem; height: .65rem; margin-top: -.33rem; border-radius: 50%; background: #fff; transform: scale(0); transition: transform .25s var(--ease-out); }
.menu nav a:hover::before, .menu nav a.active::before { transform: scale(1); }
.menu .socials { display: flex; gap: 1.6rem; font-size: .85rem; }
.menu .socials-wrap .label { border: 0; padding-bottom: 1.2rem; }

/* ---------- magnetic + fill buttons ---------- */
.mag { display: inline-block; will-change: transform; }
.mag.btn-round, .mag.burger { display: grid; }
.mag.pill { display: inline-flex; }
.btn-round { position: relative; width: 10rem; height: 10rem; border-radius: 50%; background: var(--dark); color: #fff; display: grid; place-items: center; overflow: hidden; isolation: isolate; }
.btn-round.blue { background: var(--blue); }
.btn-fill { position: relative; overflow: hidden; isolation: isolate; }
.btn-fill::before { content: ''; position: absolute; left: -25%; width: 150%; height: 200%; top: 101%; border-radius: 50%; background: var(--blue); z-index: -1; transition: top .6s var(--ease); }
.btn-round.blue.btn-fill::before { background: var(--blue-2); }
.btn-fill:hover::before { top: -50%; }
.btn-fill:hover { color: #fff; }
.btn-fill .t { position: relative; display: inline-flex; align-items: flex-start; gap: .2em; }
.pill { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 999px; padding: 1.15em 2.4em; white-space: nowrap; line-height: 1.6; }
.pill.dark-pill { background: var(--dark); color: #fff; border-color: var(--dark); }
.dark .pill, .pill.on-dark { border-color: var(--line-w); }
.pill sup, .btn-fill sup { font-size: .7em; line-height: 1; margin-left: .15em; position: relative; top: -.15em; opacity: .7; }

/* ---------- hero ---------- */
.hero { position: relative; height: 100vh; min-height: 36rem; overflow: hidden; background: var(--grey-hero); color: #fff; }
.hero-inner { position: absolute; inset: 0; }
.hero-portrait { position: absolute; left: 23.6%; width: 45.2%; top: 6.7%; bottom: 0; background: #8f9394; }
.hero-portrait .ph-t { color: rgba(255,255,255,.7); left: 1.2em; bottom: 14.5em; font-size: .7rem; }
.located { position: absolute; left: 0; top: 44.3%; display: flex; align-items: center; gap: 2.2rem; background: var(--dark); color: #fff; border-radius: 0 999px 999px 0; padding: 1.15rem 1rem 1.15rem var(--edge); line-height: 1.2; }
.located .globe { width: 4.05rem; height: 4.05rem; border-radius: 50%; background: var(--grey-hero); display: grid; place-items: center; }
.globe svg { width: 2.1rem; height: 2.1rem; }
.globe svg .spin { animation: globe 6s linear infinite; transform-origin: center; transform-box: fill-box; }
@keyframes globe { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.hero-role { position: absolute; left: 70.75%; top: 35.6%; font-size: 1.9167rem; line-height: 1.4; white-space: nowrap; }
.hero-role .arrow { width: 1.1rem; height: 1.1rem; display: block; margin-bottom: 3.4rem; margin-left: .1rem; }
.hero-role .arrow svg { width: 100%; height: 100%; display: block; }
.hero-globe-m { display: none; }
.marquee { position: absolute; left: 0; bottom: 6vh; white-space: nowrap; font-size: 12.5rem; line-height: 1; letter-spacing: -.01em; pointer-events: none; }
.marquee-track { display: flex; will-change: transform; }
.marquee-track span { display: inline-block; padding-right: .35em; }

/* ---------- home intro ---------- */
.intro { position: relative; padding: 15vw var(--inner) 0; display: grid; grid-template-columns: 1fr 14rem; column-gap: 6.4vw; }
.intro .big { font-size: 1.9167rem; line-height: 1.45; max-width: 36.5rem; }
.intro .small { line-height: 1.66; max-width: 14rem; }
.intro .about-btn { margin-top: 2.2rem; }
.section-label { padding: 1.6rem var(--inner) 2.8rem; }

/* ---------- work list ---------- */
.work-list { margin: 0 var(--gutter); }
.work-row { position: relative; display: grid; grid-template-columns: 1fr 13.5rem; align-items: center; border-top: 1px solid var(--line); padding: 0 calc(var(--inner) - var(--gutter)); height: 12rem; transition: opacity .4s; }
.work-row:last-child { border-bottom: 1px solid var(--line); }
.work-row h3 { font-size: 4.375rem; line-height: 1; letter-spacing: -.01em; transition: transform .4s var(--ease-out), opacity .4s var(--ease-out); white-space: nowrap; }
.work-row .kind { transition: transform .4s var(--ease-out), opacity .4s var(--ease-out); padding-top: .4em; }
.work-row:hover h3 { transform: translateX(-1rem); opacity: .3; }
.work-row:hover .kind { transform: translateX(.6rem); opacity: .3; }
.more-wrap { display: flex; justify-content: center; padding: 7rem 0 9.6rem; }
.only-m { display: none; }

/* hover preview (desktop) */
.preview { position: fixed; left: 0; top: 0; width: 23rem; height: 23rem; pointer-events: none; z-index: 60; transform: translate(-50%, -50%) scale(0); overflow: hidden; }
.preview-slider { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: top .5s var(--ease); }
.preview-slide { width: 100%; height: 100%; display: grid; place-items: center; }
.preview-slide .ph { width: 80%; height: 50%; }
.cursor { position: fixed; left: 0; top: 0; width: 4.6rem; height: 4.6rem; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font-size: .95rem; pointer-events: none; z-index: 61; transform: translate(-50%, -50%) scale(0); }

/* ---------- footer ---------- */
.wrap-white { position: relative; background: var(--white); z-index: 2; }
.curve { position: absolute; left: 0; width: 100%; top: 100%; height: 10vw; overflow: hidden; pointer-events: none; }
.curve::before { content: ''; position: absolute; left: -25%; width: 150%; height: 750%; bottom: 0; background: var(--white); border-radius: 50%; }
.footer { position: relative; background: var(--dark); color: #fff; overflow: hidden; z-index: 1; }
.footer-inner { padding: 11.6rem var(--inner) 0; }
.footer h2 { font-size: 5.104rem; line-height: 1.065; letter-spacing: -.01em; }
.footer h2 .row1 { display: flex; align-items: center; gap: 1.8rem; }
.avatar { width: 4.35rem; height: 4.35rem; border-radius: 50%; flex: none; }
.avatar .ph-t { display: none; }
.footer .arrow-dl { position: absolute; right: calc(var(--inner) + .3rem); top: 1.45rem; width: 1.1rem; height: 1.1rem; }
.footer-head { position: relative; }
.footer-line { position: relative; border-bottom: 1px solid var(--line-w); margin-top: 5.6rem; height: 0; }
.footer-line .mag-cta { position: absolute; right: 5rem; top: 0; transform: translateY(-50%); }
.footer-line .mag-cta > .mag { transform: none; }
.footer-cta { position: absolute; right: 5rem; top: -5rem; }
.contact-pills { display: flex; gap: .65rem; margin-top: 5.2rem; }
.contact-pills .pill { padding: 1.5em 2.5em; }
.bottom-bar { display: flex; justify-content: space-between; align-items: flex-end; padding: 8.6rem var(--edge) 1.9rem; font-size: .85rem; }
.bottom-bar .group { display: flex; gap: 2.4rem; }
.bottom-bar .label { font-size: .705rem; display: block; padding-bottom: 1.15rem; }
.bottom-bar .socials { display: flex; gap: 1.55rem; }
.bottom-bar .socials a, .menu .socials a { position: relative; }
.bottom-bar .socials a::after, .menu .socials a::after { content: ''; position: absolute; left: 0; bottom: -.1em; height: 1px; width: 100%; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease); }
.bottom-bar .socials a:hover::after, .menu .socials a:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- inner page heads (work, case, about) ---------- */
.page-head { padding: 15.2rem var(--inner) 0; }
.page-head h1 { font-size: 5.104rem; line-height: 1.065; letter-spacing: -.01em; max-width: 13em; }
.filters { display: flex; justify-content: space-between; align-items: center; padding: 4.85rem calc(var(--inner) - .25rem) 0; }
.filters .pills { display: flex; gap: .55rem; }
.filters .pill { padding: 1.15em 2.5em; }
.filters .pill.active { background: var(--dark); color: #fff; border-color: var(--dark); }
.view-toggle { display: flex; gap: .55rem; }
.view-toggle button { width: 4.2rem; height: 4.2rem; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; }
.view-toggle button.active { background: var(--dark); color: #fff; border-color: var(--dark); }
.view-toggle svg { width: 1.2rem; height: 1.2rem; }
.table-head { display: grid; grid-template-columns: 2.4fr 1.4fr 1.7fr .5fr; padding: 6.6rem var(--inner) 2.65rem; }
.table-head span:last-child { text-align: right; }
.table { margin: 0 var(--gutter); }
.trow { display: grid; grid-template-columns: 2.4fr 1.4fr 1.7fr .5fr; align-items: center; border-top: 1px solid var(--line); padding: 0 calc(var(--inner) - var(--gutter)); height: 6.3rem; }
.trow:last-child { border-bottom: 1px solid var(--line); }
.trow h3 { font-size: 1.9167rem; line-height: 1; transition: transform .4s var(--ease-out), opacity .4s var(--ease-out); }
.trow > span { transition: transform .4s var(--ease-out), opacity .4s var(--ease-out); }
.trow > span:last-child { text-align: right; }
.trow[style] > span:last-child { text-align: left; }
.trow:hover h3 { transform: translateX(-.8rem); opacity: .3; }
.trow:hover > span { opacity: .3; }
.trow.hide, .card.hide { display: none; }
.grid { display: none; grid-template-columns: 1fr 1fr; gap: 6rem 4rem; padding: 6.6rem var(--inner) 0; }
.view-grid .grid { display: grid; }
.view-grid .table, .view-grid .table-head { display: none; }
.card .frame { aspect-ratio: 1 / .95; display: grid; place-items: center; background: #e3e4e5; overflow: hidden; }
.card .frame .ph { width: 76%; height: 54%; transition: transform .6s var(--ease); }
.card:hover .frame .ph { transform: scale(1.04); }
.card h3 { font-size: 2.85rem; line-height: 1.1; margin-top: 2rem; padding-bottom: 1.6rem; border-bottom: 1px solid var(--line); }
.card .meta { display: flex; justify-content: space-between; padding-top: 1.4rem; }
.archive-wrap { display: flex; justify-content: center; padding: 6.6rem 0 9.6rem; }

/* case page */
.case-head h1 { font-size: 5.104rem; }
.case-meta { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 3.7rem; padding: 6.7rem var(--inner) 0; }
.case-meta .label { display: block; padding-bottom: 1.75rem; border-bottom: 1px solid var(--line); }
.case-meta p { padding-top: 1.75rem; line-height: 1.6; }
.case-cover-wrap { position: relative; margin: 8.3rem var(--gutter) 0; }
.case-cover-wrap .mag-cta { position: absolute; right: 5rem; top: 0; transform: translateY(-50%); z-index: 3; }
.case-cover { height: 47vw; overflow: hidden; }
.case-cover .ph { width: 100%; height: 118%; }
.case-intro { display: grid; grid-template-columns: 1fr 14rem; column-gap: 6.4vw; padding: 11rem var(--inner) 0; }
.case-intro .big { font-size: 1.9167rem; line-height: 1.45; }
.case-intro .small p + p { margin-top: 1.1rem; }
.grey-band { background: var(--light); margin-top: 11rem; padding: 10rem var(--inner) 10rem; }
.grey-band h2 { font-size: 3.4rem; line-height: 1.1; margin-bottom: 6rem; }
.cols3 { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 3.7rem; row-gap: 5rem; }
.cols3 .n { display: block; font-size: .6rem; opacity: .5; padding-bottom: 1.75rem; border-bottom: 1px solid var(--line); }
.cols3 h3 { font-size: 1.9167rem; line-height: 1.2; margin: 2.6rem 0 1.6rem; }
.cols3 p { font-size: .85rem; line-height: 1.66; max-width: 22em; }
.list-block { padding: 10rem 0 0; }
.list-block .label { display: block; padding: 0 var(--inner) 2.65rem; }
.case-photos { background: var(--light); padding: 9rem var(--gutter); display: grid; gap: 9rem; margin-top: 10rem; }
.case-photos .ph { width: 72%; margin: 0 auto; }
.case-photos .ph.tall { width: 34%; }
.carry { padding: 10rem calc(var(--inner) + 18vw) 0 var(--inner); font-size: 1.9167rem; line-height: 1.45; }
.carry .label { display: block; font-size: .6rem; margin-bottom: 2rem; }
.next-case { text-align: center; padding: 14rem 0 0; }
.next-case .label { opacity: 1; font-size: .85rem; text-transform: none; letter-spacing: 0; display: block; margin-bottom: 2rem; }
.next-case h2 { font-size: 5.104rem; line-height: 1.065; }
.next-case .next-line { margin: 4rem var(--inner) 0; border-bottom: 1px solid var(--line-w); position: relative; }
.next-case .next-thumb { width: 11.5rem; height: 6.6rem; margin: 0 auto; transform: translateY(-50%); }
.next-case .next-thumb .ph { width: 100%; height: 100%; }
.next-case .next-thumb .ph-t { font-size: .5rem; left: .5em; bottom: .4em; }
.next-case .pill { margin-top: 3rem; }

/* about page */
.about-line { position: relative; margin: 5.6rem var(--inner) 0; border-bottom: 1px solid var(--line); }
.about-line .mag-cta { position: absolute; right: 5rem; top: 0; transform: translateY(-50%); }
.about-line .btn-round { background: var(--blue); }
.about-line .globe svg { width: 3rem; height: 3rem; }
.about-body { display: grid; grid-template-columns: var(--inner) 15.3rem 1fr; padding: 8.2rem var(--gutter) 0 0; column-gap: 0; }
.about-body .arrow { justify-self: center; width: 1.3rem; height: 1.3rem; margin-top: .3rem; }
.about-body .txt { padding-right: 2.5rem; line-height: 1.66; }
.about-body .txt .soft { margin-top: 1.9rem; opacity: .5; }
.about-photo { height: 50vw; margin-left: 2.4rem; overflow: hidden; }
.about-photo .ph { width: 100%; height: 115%; }
.study { display: grid; grid-template-columns: 1fr 1fr; column-gap: 4rem; align-items: center; padding: 12rem var(--inner) 12rem; }
.study .ph { aspect-ratio: .82; width: 70%; justify-self: end; }
.study h2 { font-size: 1.9167rem; line-height: 1.25; margin-bottom: 1.8rem; }
.study p { font-size: .85rem; line-height: 1.66; max-width: 24em; }
.study .stamp { width: 3.6rem; height: 3.6rem; border-radius: 50%; border: 1px dashed var(--line); display: grid; place-items: center; font-size: .6rem; margin-bottom: 2.4rem; }

/* contact page */
body[data-page=contact] { background: var(--dark); color: #fff; }
.contact-wrap { padding: 15.2rem var(--inner) 0; display: grid; grid-template-columns: 1fr 14rem; column-gap: 6rem; }
.contact-wrap h1 { font-size: 5.104rem; line-height: 1.065; letter-spacing: -.01em; }
.contact-side .avatar { width: 8.4rem; height: 8.4rem; margin-top: .8rem; }
.contact-side .arrow-dl { width: 1.1rem; height: 1.1rem; margin: 4.6rem 0 0; display: block; }
.contact-side dl { margin-top: 5.4rem; font-size: .85rem; line-height: 1.6; }
.contact-side dt { margin: 0 0 1.1rem; }
.contact-side dd { margin-bottom: 2.6rem; }
.form { margin-top: 5.4rem; border-top: 1px solid var(--line-w); }
.field { display: grid; grid-template-columns: 3.6rem 1fr; padding: 2.7rem 0 2.3rem; border-bottom: 1px solid var(--line-w); }
.field .n { font-size: .6rem; opacity: .5; padding-top: .5rem; }
.field label { display: block; font-size: 1.4rem; line-height: 1.3; }
.field input, .field textarea { display: block; width: 100%; background: none; border: 0; color: #fff; font: inherit; font-size: 1.4rem; line-height: 1.3; margin-top: 1rem; resize: none; outline: 0; }
.field input::placeholder, .field textarea::placeholder { color: rgba(255,255,255,.3); }
.send { position: relative; height: 0; margin-top: 0; }
.send .mag-cta { position: absolute; right: 5rem; top: 0; transform: translateY(-50%); }
.form-note { font-size: .85rem; opacity: .5; padding: 8rem 0 0 3.6rem; }

/* ---------- phone (reference's own mobile layout) ---------- */
@media (max-width: 540px) {
  html { font-size: 16px; }
  :root { --gutter: 1.25rem; --inner: 1.25rem; --edge: 1.25rem; }
  .header { padding: 2.05rem 1.25rem; }
  .nav { display: none; }
  .menu-link-m { display: inline-flex; }
  .burger { top: 1.2rem; right: 1.2rem; width: 3.3rem; height: 3.3rem; }
  .burger .bars { width: 1.15rem; height: .4rem; }
  .menu { width: 100%; min-width: 0; padding: 6.6rem 1.25rem 2.6rem; }
  .menu nav { margin-top: 2.6rem; }
  .menu nav a { font-size: 2.84rem; }
  .menu nav a::before { left: auto; right: -9.5rem; }
  .menu .socials { font-size: 1rem; }
  .menu .socials-wrap { border-top: 1px solid var(--line-w); padding-top: 1.8rem; }
  .curtain-word { font-size: 2.4375rem; }
  .hero-portrait { left: 0; width: 100%; top: 0; }
  .hero-portrait .ph-t { bottom: auto; top: 6.5rem; left: 1.25rem; }
  .located { display: none; }
  .hero-role { left: 1.25rem; top: auto; bottom: 2.6rem; font-size: 1.55rem; }
  .hero-role .arrow { margin-bottom: 2.6rem; }
  .hero-globe-m { display: grid; position: absolute; right: 1.25rem; bottom: 2.9rem; width: 2.2rem; height: 2.2rem; }
  .hero-globe-m svg { width: 100%; height: 100%; }
  .marquee { font-size: 9rem; bottom: auto; top: 56.4%; }
  .intro { display: block; padding: 6rem 1.25rem 0; }
  .intro .big { font-size: 1.55rem; }
  .intro .small { margin-top: 2.6rem; }
  .intro .about-btn { display: flex; justify-content: flex-end; margin-top: -2rem; margin-right: 2rem; }
  .btn-round { width: 9rem; height: 9rem; }
  .section-label { display: none; }
  .work-list { margin: 5rem 1.25rem 0; }
  .work-row { display: block; height: auto; border: 0 !important; padding: 0 0 5.6rem; }
  .work-row h3 { font-size: 1.97rem; margin-top: 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); white-space: normal; }
  .work-row .kind { padding-top: 1.25rem; display: flex; justify-content: space-between; }
  .work-row:hover h3, .work-row:hover .kind { transform: none; opacity: 1; }
  .work-row.m-hide { display: none; }
  .only-m { display: block; }
  .work-row .frame { aspect-ratio: 1; display: grid; place-items: center; background: #e3e4e5; }
  .work-row .frame .ph { width: 78%; height: 54%; }
  .more-wrap { padding: 1rem 0 7rem; }
  .preview, .cursor { display: none; }
  .curve { height: 20vw; }
  .footer-inner { padding: 7rem 1.25rem 0; }
  .footer h2 { font-size: 2.84rem; }
  .footer h2 .row1 { gap: .9rem; }
  .avatar { width: 2.4rem; height: 2.4rem; }
  .footer .arrow-dl { right: .3rem; top: auto; bottom: .2rem; }
  .footer-line { margin-top: 4.4rem; }
  .footer-line .mag-cta { right: 1.5rem; }
  .contact-pills { flex-direction: column; margin-top: 7.6rem; }
  .contact-pills .pill { padding: 1.05em 1em; }
  .bottom-bar { display: grid; grid-template-columns: 1fr; padding: 4.6rem 1.25rem 2rem; font-size: 1rem; gap: 0; }
  .bottom-bar .soc-group { order: -1; padding-bottom: 1.9rem; border-bottom: 1px solid var(--line-w); margin-bottom: 1.9rem; }
  .bottom-bar .group { justify-content: space-between; }
  .bottom-bar .label { font-size: .6rem; }
  .page-head { padding: 11.4rem 1.25rem 0; }
  .page-head h1, .case-head h1, .contact-wrap h1 { font-size: 2.84rem; }
  .filters { padding: 3rem 1.25rem 0; }
  .filters .pill { padding: 1em 1.4em; }
  .view-toggle { display: none; }
  .table-head, .table { display: none; }
  .grid { display: grid; grid-template-columns: 1fr; gap: 4.6rem; padding: 3.6rem 1.25rem 0; }
  .card .frame { aspect-ratio: 1; }
  .card h3 { font-size: 1.97rem; margin-top: 1.5rem; padding-bottom: 1.25rem; }
  .case-meta { grid-template-columns: 1fr; row-gap: 2.4rem; padding: 3.6rem 1.25rem 0; }
  .case-cover-wrap { margin: 7rem 0 0; }
  .case-cover-wrap .mag-cta { right: 1.5rem; }
  .case-cover { height: 110vw; }
  .case-intro { display: block; padding: 6rem 1.25rem 0; }
  .case-intro .big { font-size: 1.55rem; }
  .case-intro .small { margin-top: 2.4rem; }
  .grey-band { padding: 6rem 1.25rem; margin-top: 6rem; }
  .grey-band h2 { font-size: 2.2rem; margin-bottom: 3rem; }
  .cols3 { grid-template-columns: 1fr; row-gap: 3rem; }
  .cols3 h3 { margin-top: 1.6rem; }
  .list-block { padding-top: 6rem; }
  .list-block .table, .list-block .table-head { display: block; }
  .list-block .table { margin: 0 1.25rem; }
  .list-block .table-head { display: none; }
  .list-block .trow { display: block; height: auto; padding: 1.6rem 0; }
  .list-block .trow h3 { font-size: 1.4rem; line-height: 1.2; margin-bottom: .5rem; }
  .list-block .trow > span { display: inline; font-size: .9rem; }
  .list-block .trow > span:not(:last-child)::after { content: ' · '; }
  .case-photos { padding: 4rem 1.25rem; gap: 4rem; margin-top: 6rem; }
  .case-photos .ph, .case-photos .ph.tall { width: 100%; }
  .carry { padding: 6rem 1.25rem 0; font-size: 1.55rem; }
  .next-case { padding-top: 7rem; }
  .next-case h2 { font-size: 2.84rem; }
  .next-case .next-line { margin: 6.5rem 1.25rem 0; }
  .about-line { margin: 8rem 1.25rem 0; }
  .about-line .mag-cta { right: 1.5rem; }
  .about-body { display: block; padding: 7.6rem 1.25rem 0; }
  .about-body .arrow { display: block; margin-bottom: 2rem; }
  .about-photo { margin: 4rem 0 0; height: 125vw; }
  .study { display: block; padding: 7rem 1.25rem; }
  .study .ph { width: 100%; margin-bottom: 3.6rem; }
  .contact-wrap { display: block; padding: 9rem 1.25rem 0; }
  .contact-side { display: none; }
  .field { grid-template-columns: 2.4rem 1fr; }
  .field label, .field input, .field textarea { font-size: 1.15rem; }
  .send .mag-cta { right: 1.5rem; }
  .form-note { padding: 7rem 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}