/* 5n2 studio · v2 (2026-09-29): mik design company's language in 5n2's own blue (준: "파란색 위주", round buttons,
   more UI motion). White page, black type, one accent (--blue), one typeface (Inter Tight). Structure comes from flat cells, hairline rules and daylight photographs meeting edge to
   edge; the grid is 12 columns and never drawn. The church is in the photographs and the words, not in graphics. */
@font-face { font-family: "Inter Tight"; src: url("/fonts/inter-tight.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Tight Fallback"; src: local("Arial"); size-adjust: 93%; ascent-override: 104%; descent-override: 26%; line-gap-override: 0%; }

:root {
  --blue: #1F47D6; --blue-hover: #2E58E8; --blue-tint: #EEF2FE; --navy: #0B1A3C; --ink: #000; --paper: #fff; --grey: #5f5f5f; --cell: #f2f2f2;
  --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-inout: cubic-bezier(.76, 0, .24, 1);
  --pad: clamp(20px, 2.4vw, 40px);
  --nav-h: clamp(64px, 7.3vw, 112px);
  --h1: clamp(2.35rem, 4.3vw, 4.25rem);
  --h2: clamp(2.6rem, 5.6vw, 5.5rem);
  --screen: min(56.25vw, 100svh);
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--paper); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1rem/1.45 "Inter Tight", "Inter Tight Fallback", system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ol, ul, dl, dd { margin: 0; padding: 0; }
ol, ul { list-style: none; }
h1, h2 { font-weight: 600; line-height: 1; letter-spacing: -.035em; text-wrap: balance; }
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: clamp(1.1rem, 1.35vw, 1.35rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.pill--blue:focus-visible, .contact :focus-visible { outline-color: #fff; outline-offset: 3px; }
.pill--blue:focus-visible { outline-color: var(--ink); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--pad); top: -100px; z-index: 10; background: var(--ink); color: #fff; padding: 12px 16px; }
.skip:focus { top: 12px; }

/* brand devices */
.nw { white-space: nowrap; }
/* the 5&2 mark in place of mik's red dot: shape from src/mark.mjs as a mask (layout.css), colour from here. Square box
   (four equal arms since 준's note), bottom on the baseline where a period would sit; about as wide as the old cross. */
.dot { display: inline-block; width: .42em; height: .42em; margin-left: .07em; background: var(--blue); }
.wordmark .dot--mark, .foot__mark .dot--mark { width: .41em; height: .41em; margin-left: .1em; }
.foot .dot { background: #8FB0FF; }
.amp { color: var(--blue); }
.arr { display: inline-block; margin-left: .35em; transition: transform .25s var(--ease); }
a:hover .arr { transform: translateX(.25em); }
.label { font-size: .72rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--grey); }
.label--accent { color: var(--blue); }
.label .amp { color: inherit; }
.photo { width: 100%; height: 100%; object-fit: cover; }
.cell { display: flex; }
.cell--white { background: var(--paper); color: var(--ink); }
/* pills: every button on the page. Hover lifts, a press sinks, the arrow slides; only transform and colour move. */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: .1em; min-height: 52px; padding: 0 clamp(20px, 1.8vw, 28px); border-radius: 999px; font-weight: 600; font-size: clamp(1rem, 1.15vw, 1.15rem); letter-spacing: -.01em; text-decoration: none; white-space: nowrap; transition: transform .35s var(--ease-out), background-color .25s ease, color .25s ease, box-shadow .35s var(--ease-out); }
.pill:hover { transform: translateY(-2px); }
.pill:active { transform: translateY(0) scale(.97); transition-duration: .1s; }
.pill--blue { background: var(--blue); color: #fff; box-shadow: 0 10px 24px -14px rgba(31, 71, 214, .9); }
.pill--blue:hover { background: var(--blue-hover); box-shadow: 0 16px 30px -14px rgba(31, 71, 214, .9); }
.pill--line { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.pill--line:hover { background: var(--blue-tint); color: var(--blue); box-shadow: inset 0 0 0 1.5px var(--blue); }
.pill--white { background: #fff; color: var(--blue); }
.pill--white:hover { background: var(--blue-tint); }
/* text links: the underline shrinks away to the right and grows back from the left on hover */
.link { position: relative; display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: clamp(1rem, 1.2vw, 1.2rem); text-decoration: none; }
.link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; background: currentColor; transform-origin: 100% 50%; transition: transform .45s var(--ease-inout); }
.link:hover { color: var(--blue); }
.link:hover::after { transform-origin: 0 50%; animation: underline .7s var(--ease-inout); }
@keyframes underline { 0% { transform: scaleX(1); transform-origin: 100% 50%; } 45% { transform: scaleX(0); transform-origin: 100% 50%; } 55% { transform: scaleX(0); transform-origin: 0 50%; } 100% { transform: scaleX(1); transform-origin: 0 50%; } }

/* wordmark: "5&2 studio" set in the house face, the ampersand red like the dot in mik. */
.wordmark { display: inline-flex; align-items: center; min-height: 44px; font-size: clamp(1.35rem, 2vw, 2rem); font-weight: 600; letter-spacing: -.04em; text-decoration: none; white-space: nowrap; }
.wm { font-weight: 700; }

/* ───────── hero: photograph behind, cells in front ───────── */
.hero { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: var(--nav-h) 1fr auto; height: var(--screen); min-height: 620px; overflow: hidden; }
.hero__photo { position: absolute; inset: 0; z-index: -1; }
.nav { grid-column: 1 / -1; grid-row: 1; display: flex; align-items: center; background: var(--paper); padding-left: calc(var(--pad) + env(safe-area-inset-left)); }
.nav__links { display: flex; gap: clamp(14px, 2.9vw, 52px); margin-left: clamp(24px, 5vw, 88px); font-size: clamp(1rem, 1.35vw, 1.3rem); font-weight: 500; }
.nav__links a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.nav__links a { position: relative; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px; background: var(--blue); transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s var(--ease-out); }
.nav__links a:hover { color: var(--blue); }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__cta { margin-left: auto; margin-right: var(--pad); }
.hero__text { grid-column: 1 / 7; grid-row: 3; flex-direction: column; align-items: stretch; justify-content: flex-end; padding: clamp(22px, 2vw, 34px) var(--pad) clamp(28px, 2.6vw, 44px) calc(var(--pad) + env(safe-area-inset-left)); font-weight: 400; letter-spacing: 0; }
.tagline { display: grid; gap: .18em; padding-bottom: clamp(14px, 1.4vw, 22px); margin-bottom: clamp(14px, 1.4vw, 22px); border-bottom: 1px solid var(--ink); font-size: clamp(.82rem, .95vw, .95rem); line-height: 1.5; color: #222; }
.tagline > span:first-child { font-weight: 600; font-size: 1.06em; color: var(--ink); }
.hero__body { margin-top: clamp(14px, 1.4vw, 22px); font-size: clamp(1rem, 1.25vw, 1.25rem); line-height: 1.35; max-width: 28em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(20px, 2vw, 30px); }

/* ───────── studio: a cover, photograph left, panel right ───────── */
.cover { display: grid; grid-template-columns: 7fr 5fr; min-height: var(--screen); border-top: 1px solid var(--ink); }
.cover__media { position: relative; min-height: 420px; overflow: hidden; }
.cover__media .photo { position: absolute; inset: 0; }
.cover__body { display: flex; flex-direction: column; justify-content: center; padding: clamp(40px, 5vw, 84px) var(--pad) clamp(40px, 5vw, 84px) clamp(24px, 4.4vw, 70px); }
.cover__body h2 { font-size: clamp(2.3rem, 4.2vw, 4.2rem); margin: clamp(14px, 1.6vw, 26px) 0 clamp(20px, 2.4vw, 38px); }
.cover__text { max-width: 30em; margin-bottom: clamp(22px, 2.6vw, 42px); font-size: clamp(1.05rem, 1.45vw, 1.45rem); line-height: 1.3; letter-spacing: -.012em; }
.rows { border-top: 1px solid var(--ink); }
.rows > div { display: grid; grid-template-columns: minmax(6em, 28%) 1fr; gap: 0 1rem; align-items: baseline; padding: clamp(12px, 1.3vw, 20px) 0; border-bottom: 1px solid var(--ink); }
.rows dt { font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.rows dd { font-size: clamp(1rem, 1.2vw, 1.2rem); line-height: 1.3; }

/* ───────── services: panel with a numbered index, photograph right ───────── */
.services { display: grid; grid-template-columns: 5fr 7fr; min-height: var(--screen); border-top: 1px solid var(--ink); }
.services__panel { display: flex; flex-direction: column; padding: clamp(40px, 4.6vw, 74px) 0 var(--pad); }
.services__head, .services__panel > .btn-row { margin-inline: calc(var(--pad) + env(safe-area-inset-left)) var(--pad); }
.services__panel h2 { margin-top: clamp(14px, 1.6vw, 26px); margin-bottom: clamp(24px, 2.4vw, 38px); }
.index { border-top: 1px solid var(--ink); margin-bottom: var(--pad); }
.index li { transition: background-color .3s ease; }
.index li:hover { background: var(--blue-tint); }
.index li:hover .index__n { transform: translateX(4px); }
.index__n { display: inline-block; transition: transform .35s var(--ease-out); }
.index li { display: grid; grid-template-columns: clamp(3.2rem, 5.6vw, 5.5rem) 1fr; align-items: start; padding: clamp(16px, 1.9vw, 30px) var(--pad) clamp(16px, 1.9vw, 30px) calc(var(--pad) + env(safe-area-inset-left)); border-bottom: 1px solid var(--ink); }
.index__n { font-size: clamp(1.1rem, 1.6vw, 1.6rem); font-weight: 600; letter-spacing: -.02em; color: var(--blue); }
.index p { margin-top: .25em; font-size: clamp(.95rem, 1.1vw, 1.1rem); color: var(--grey); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; }
.services__media { position: relative; min-height: 420px; overflow: hidden; }
.services__media .photo { position: absolute; inset: 0; }
.services__cta { position: absolute; right: var(--pad); bottom: var(--pad); z-index: 3; }

/* ───────── work: collage of real screens, then one row of projects ─────────
   The stage is sized in its own width (cqw). js/site.js writes --c (-1…1, 0 = centred on screen); every piece moves
   by it and its own depth, and at 0 they all sit level. */
#work { border-top: 1px solid var(--ink); }
.pieces { position: relative; overflow: clip; padding-top: clamp(64px, 7vw, 120px); }
.pieces__intro { position: relative; z-index: 2; display: grid; justify-items: center; gap: clamp(12px, 1.2vw, 20px); padding-inline: var(--pad); text-align: center; }
.pieces__line, .projects__line { font-size: clamp(1rem, 1.35vw, 1.35rem); line-height: 1.35; color: var(--grey); text-wrap: balance; }
.arr--down { transform: none; }
a:hover .arr--down { transform: translateY(.15em); }
.stage { --c: 0; position: relative; container-type: inline-size; margin-top: clamp(-150px, -8vw, -60px); }
.stage::before { content: ""; display: block; height: 72cqw; }
.piece { position: absolute; left: calc(var(--x) * 1cqw); top: calc(var(--y) * 1cqw); width: calc(var(--w) * 1cqw); display: grid; gap: .75cqw; align-content: start; color: var(--ink); text-decoration: none; transform: translate3d(0, calc(var(--c) * var(--d) * 8cqw), 0) rotate(calc(var(--c) * var(--r) * 1deg)); }
.piece .browser, .piece__phone, .piece--metric, .tile__shot .browser { box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .08); }
.piece__phone { display: block; padding: max(3px, .32cqw); border-radius: max(14px, 1.7cqw); background: var(--ink); }
.piece__phone img { width: 100%; border-radius: max(11px, 1.4cqw); }
.piece__cap { font-size: max(12px, .85cqw); line-height: 1.3; color: var(--grey); }
.piece__cap b { font-weight: 600; color: var(--ink); transition: color .2s; }
a.piece:hover .piece__cap b { color: var(--blue); }
.piece--metric { gap: .45cqw; padding: max(14px, 1.35cqw); border-radius: max(14px, 1.2cqw); }
.piece--accent { background: var(--blue); color: #fff; }
.piece--white { background: var(--paper); box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .55), inset 0 0 0 1px var(--ink); }
.piece__client { margin-bottom: .35cqw; font-size: max(11px, .7cqw); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.piece__value { font-size: max(34px, 3.7cqw); font-weight: 600; line-height: 1; letter-spacing: -.045em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.piece--white .piece__value { color: var(--blue); }
.piece__label { font-size: max(13px, 1cqw); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; text-wrap: balance; }
.piece__from, .piece__src { font-size: max(11px, .72cqw); line-height: 1.35; }
.piece__from .arr { margin: 0 .15em; transform: none; }
.piece__src { margin-top: .5cqw; padding-top: .6cqw; border-top: 1px solid currentColor; }
.piece--accent .piece__src { color: rgba(255, 255, 255, .82); }
.piece--white .piece__from, .piece--white .piece__src { color: var(--grey); }
.piece--white .piece__src { border-color: var(--ink); }

/* browser window around website screens (macOS chrome drawn in CSS, sized from its own width) */
.browser { container-type: inline-size; display: block; width: 100%; overflow: hidden; border-radius: 10px; background: #fff; }
.browser > img { display: block; width: 100%; height: auto; }
.browser__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: max(18px, 4.4cqi); padding: 0 max(8px, 2cqi); background: #ececef; border-bottom: 1px solid #d4d4da; }
.browser__dots { display: flex; gap: max(4px, .9cqi); }
.browser__dots span { width: max(6px, 1.3cqi); aspect-ratio: 1; border-radius: 50%; background: #ff5f57; }
.browser__dots span:nth-child(2) { background: #febc2e; }
.browser__dots span:nth-child(3) { background: #28c840; }
.browser__url { display: flex; align-items: center; justify-content: center; gap: .45em; width: 38cqi; height: max(12px, 2.9cqi); border-radius: max(4px, .9cqi); background: #dfdfe5; color: #4a4a52; font-size: max(7px, 1.45cqi); font-weight: 500; white-space: nowrap; overflow: hidden; }
.browser__lock { width: .8em; height: .95em; flex: none; opacity: .7; }

.projects { border-top: 1px solid var(--ink); padding: clamp(40px, 4.2vw, 68px) 0 clamp(56px, 6vw, 100px); }
.projects__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px; padding-inline: calc(var(--pad) + env(safe-area-inset-left)) var(--pad); }
.projects__intro { display: grid; gap: clamp(12px, 1.2vw, 20px); min-width: 0; }
.projects .projects__intro h2 { font-size: calc(var(--h2) * .75); }
.projects__arrows { display: flex; gap: 10px; }
.projects__arrows button { width: 48px; aspect-ratio: 1; border: 0; border-radius: 50%; background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); font: inherit; font-size: 1.05rem; font-weight: 600; line-height: 1; cursor: pointer; transition: transform .35s var(--ease-out), background-color .25s ease, color .25s ease, box-shadow .25s ease; }
.projects__arrows button:hover { background: var(--blue); color: #fff; box-shadow: none; transform: scale(1.06); }
.projects__arrows button:active { transform: scale(.94); }
.projects__arrows button[aria-disabled="true"] { color: #b5b5b5; background: var(--paper); box-shadow: inset 0 0 0 1.5px #d0d0d0; transform: none; cursor: default; }
.project-row { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(280px, 28.5vw, 520px); gap: clamp(16px, 2.2vw, 36px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); padding: clamp(28px, 3vw, 48px) var(--pad) 16px calc(var(--pad) + env(safe-area-inset-left)); scrollbar-width: none; }
.project-row::-webkit-scrollbar { display: none; }
.project-row:focus-visible { outline-offset: -3px; }
.tile { position: relative; display: grid; align-content: start; min-width: 0; scroll-snap-align: start; }
.tile__shot { display: block; transition: transform .5s var(--ease-out); }
.tile:hover .tile__shot { transform: translateY(-6px); }
.tile__shot .browser > img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; transition: transform .8s var(--ease-out); }
.tile:hover .tile__shot .browser > img { transform: scale(1.04); }
.tile__text { display: grid; gap: 8px; margin-top: clamp(18px, 1.8vw, 28px); padding-top: clamp(12px, 1.2vw, 18px); border-top: 1px solid var(--ink); }
.tile h3 { font-size: clamp(1.45rem, 2.1vw, 2.1rem); transition: color .2s; }
.tile:hover h3 { color: var(--blue); }
.tile__result { margin-top: 4px; font-size: clamp(1rem, 1.2vw, 1.2rem); font-weight: 600; color: var(--blue); }
.tile__quote { margin-top: 4px; font-size: clamp(1rem, 1.2vw, 1.2rem); line-height: 1.3; letter-spacing: -.01em; }
.tile__tag { display: inline-block; margin-right: .5em; padding: .3em .7em; border: 1px solid currentColor; border-radius: 999px; font-size: .62rem; line-height: 1; vertical-align: .1em; color: var(--ink); }
.tile__links { margin-top: 6px; }
.tile__more::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.projects__note { margin-top: clamp(16px, 1.6vw, 26px); padding-inline: calc(var(--pad) + env(safe-area-inset-left)) var(--pad); font-size: .8rem; line-height: 1.5; color: var(--grey); }

/* ───────── process: five photographs on one line of red nodes ───────── */
.process { border-top: 1px solid var(--ink); padding-bottom: clamp(40px, 4vw, 64px); }
.process__head { padding: clamp(36px, 3.2vw, 52px) var(--pad) clamp(24px, 2vw, 32px) calc(var(--pad) + env(safe-area-inset-left)); }
.process__head h2 { margin-top: clamp(12px, 1.4vw, 22px); }
.steps { display: grid; grid-template-columns: repeat(5, 1fr); }
.step .photo { aspect-ratio: 8 / 9; height: auto; }
.step__node { display: block; position: relative; height: 1px; margin: clamp(22px, 2.1vw, 34px) 0; background: var(--ink); }
.step:first-child .step__node { margin-left: var(--pad); }
.step:last-child .step__node { margin-right: var(--pad); }
.step__node::after { content: ""; position: absolute; left: 50%; top: 50%; width: clamp(16px, 1.5vw, 24px); aspect-ratio: 1; border-radius: 50%; background: var(--blue); transform: translate(-50%, -50%); }
.step__text { padding: 0 clamp(12px, 1.2vw, 20px) 0 var(--pad); }
.step__text h3 { margin: .2em 0 .35em; }
.step__text p { font-size: clamp(.95rem, 1.1vw, 1.1rem); line-height: 1.3; color: var(--grey); }

/* ───────── contact: a red panel and a photograph ───────── */
.contact { display: grid; grid-template-columns: 5fr 7fr; min-height: var(--screen); background: var(--blue); color: #fff; }
.contact__panel { display: flex; flex-direction: column; padding: clamp(40px, 4.6vw, 74px) var(--pad) clamp(40px, 4.6vw, 74px) calc(var(--pad) + env(safe-area-inset-left)); }
.contact .label { color: rgba(255, 255, 255, .85); }
.contact h2 { margin: clamp(14px, 1.6vw, 26px) 0 clamp(20px, 2vw, 32px); }
.contact h2 .dot { background: #fff; }
.contact__text { max-width: 26em; font-size: clamp(1.05rem, 1.35vw, 1.35rem); line-height: 1.35; }
.contact__links { display: grid; gap: 6px; margin-top: auto; padding-top: clamp(28px, 3vw, 48px); justify-items: start; }
.contact__links a:not(.cell) { display: inline-flex; align-items: center; min-height: 44px; font-size: clamp(1rem, 1.2vw, 1.2rem); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.contact__cta { margin-bottom: 10px; }
.contact__media { position: relative; min-height: 420px; overflow: hidden; }
.contact__media .photo { position: absolute; inset: 0; }

/* ───────── footer ───────── */
.foot { background: var(--navy); color: #fff; padding: clamp(48px, 6vw, 96px) var(--pad) calc(28px + env(safe-area-inset-bottom)) calc(var(--pad) + env(safe-area-inset-left)); }
.foot__top { display: grid; grid-template-columns: 5fr 4fr 3fr; align-items: end; gap: 24px; padding-bottom: clamp(28px, 3vw, 48px); border-bottom: 1px solid #25355c; }
.foot .amp { color: #8FB0FF; }
.foot__mark { font-size: clamp(2.6rem, 6vw, 5.5rem); font-weight: 700; letter-spacing: -.05em; line-height: .9; }
.foot__tag { display: grid; gap: .2em; font-size: .9rem; color: #c9d3ea; }
.foot__tag > span:first-child { color: #fff; font-weight: 600; }
.foot__links { display: grid; gap: 0; justify-items: end; }
.foot__links a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.foot__links a:hover { color: #8FB0FF; }
.foot__line { margin-top: 20px; font-size: .85rem; color: #c9d3ea; }
.foot__disclosure { margin-top: 8px; font-size: .78rem; color: #93a2c4; }

/* ───────── below 1024px: plain columns, photo first ───────── */
@media (max-width: 1023px) {
  .pieces__intro { justify-items: start; padding-inline: calc(var(--pad) + env(safe-area-inset-left)) var(--pad); text-align: left; }
  .stage { margin-top: clamp(28px, 4vw, 44px); padding: 0 var(--pad) 8px calc(var(--pad) + env(safe-area-inset-left)); columns: 3; column-gap: 16px; container-type: normal; }
  .stage::before { display: none; }
  .piece { position: static; width: auto; margin-bottom: 22px; gap: 8px; transform: none; break-inside: avoid; }
  .piece--wide { display: none; }
  .piece__cap { font-size: .78rem; }
  .piece__phone { padding: 4px; border-radius: 18px; }
  .piece__phone img { border-radius: 14px; }
  .piece--metric { gap: 6px; padding: 16px; }
  .piece__client { margin-bottom: 4px; font-size: .66rem; }
  .piece__value { font-size: 2.3rem; }
  .piece__label { font-size: .92rem; }
  .piece__from, .piece__src { font-size: .72rem; }
  .piece__src { margin-top: 6px; padding-top: 8px; }
}
@media (max-width: 820px) {
  :root { --screen: auto; --nav-h: 64px; }
  .hero { display: flex; flex-direction: column; height: auto; min-height: 0; overflow: visible; }
  .hero__photo { position: static; order: 1; aspect-ratio: 5 / 4; height: auto; z-index: 0; }
  .nav { order: 0; min-height: var(--nav-h); }
  .nav__links { display: none; }
  .hero__text { order: 2; }
  .hero__text { border-bottom: 1px solid var(--ink); }
  .cover, .services, .contact { display: block; }
  .cover__media, .services__media, .contact__media { min-height: 0; }
  .cover__media .photo, .services__media .photo, .contact__media .photo { position: static; aspect-ratio: 4 / 3; height: auto; }
  .cover__body { padding: 36px var(--pad) 44px; }
  .services__cta { right: 16px; bottom: 16px; }
  .steps { grid-template-columns: 1fr 1fr; row-gap: 28px; }
  .step:last-child { grid-column: 1 / -1; }
  .step .step__node { margin-inline: 0 !important; }
  .foot__top { grid-template-columns: 1fr; align-items: start; }
  .foot__links { justify-items: start; grid-auto-flow: column; justify-content: start; gap: 4px 18px; }
}
@media (max-width: 700px) {
  .stage { columns: 2; column-gap: 12px; }
  .piece { margin-bottom: 16px; }
  .piece__value { font-size: 2rem; }
  .projects__arrows { display: none; }
  .project-row { grid-auto-columns: 82vw; }
}
@media (max-width: 460px) { .nav__cta { min-height: 44px; padding-inline: 16px; font-size: .92rem; margin-right: 16px; } .wordmark { font-size: 1.3rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .piece { transform: none; } }

/* ───────── motion (준 2026-09-29: "UI animation 도 더") ─────────
   Entrance: the hero photograph settles from 1.06, the text cell rises, the buttons follow. CSS only, and every
   animation ends on the element's own state, so nothing can stay hidden.
   Reveals (js/site.js): only what starts below the first screen is armed; it is shown once its top passes 88% of the
   screen, and anything scrolled past or jumped over is shown too. Photographs: a blue curtain lifts off while the
   photograph settles from 1.1. Only opacity and transform move. */
@media (prefers-reduced-motion: no-preference) {
  .hero__photo { animation: settle 1.8s var(--ease-out) backwards; }
  .hero__text { animation: rise .9s var(--ease-out) .12s backwards; }
  .hero__actions .pill { animation: rise .8s var(--ease-out) .42s backwards; }
  .hero__actions .pill + .pill { animation-delay: .52s; }
  .nav__cta { animation: pop .7s var(--ease-out) .3s backwards; }

  .arm { opacity: 0; transform: translateY(28px); }
  .arm.in { opacity: 1; transform: none; transition: opacity .8s ease, transform 1s var(--ease-out); }
  .index li.arm:nth-child(2), .rows > div.arm:nth-child(2), .tile.arm:nth-child(2) { transition-delay: .08s; }
  .index li.arm:nth-child(3), .rows > div.arm:nth-child(3), .tile.arm:nth-child(3) { transition-delay: .16s; }
  .tile.arm:nth-child(4) { transition-delay: .24s; }

  [data-reveal="photo"].arm { opacity: 1; transform: none; isolation: isolate; }
  [data-reveal="photo"].arm::after { content: ""; position: absolute; inset: -1px; z-index: 2; background: var(--blue); transform-origin: 50% 0; pointer-events: none; }
  [data-reveal="photo"].arm.in::after { transform: scaleY(0); transition: transform 1.1s var(--ease-inout); }
  [data-reveal="photo"].arm .photo { transform: scale(1.1); }
  [data-reveal="photo"].arm.in .photo { transform: none; transition: transform 1.8s var(--ease-out) .1s; }
  [data-reveal="photo"].arm .services__cta { opacity: 0; }
  [data-reveal="photo"].arm.in .services__cta { opacity: 1; transition: opacity .5s ease .9s, transform .35s var(--ease-out), background-color .25s ease; }

  /* process: the photographs rise, the line draws from the left, then each dot lands in turn */
  [data-reveal="steps"].arm { opacity: 1; transform: none; }
  .arm .step .photo, .arm .step__text { opacity: 0; transform: translateY(24px); }
  .arm .step__node { transform: scaleX(0); transform-origin: 0 50%; }
  .arm .step__node::after { transform: translate(-50%, -50%) scale(0); }
  .in .step .photo, .in .step__text { opacity: 1; transform: none; transition: opacity .7s ease, transform .9s var(--ease-out); }
  .in .step__node { transform: none; transition: transform .5s linear; }
  .in .step__node::after { transform: translate(-50%, -50%) scale(1); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
  .in .step:nth-child(1) .photo { transition-delay: 0s; }        .in .step:nth-child(1) .step__node { transition-delay: .3s; }  .in .step:nth-child(1) .step__node::after { transition-delay: .55s; } .in .step:nth-child(1) .step__text { transition-delay: .6s; }
  .in .step:nth-child(2) .photo { transition-delay: .08s; }      .in .step:nth-child(2) .step__node { transition-delay: .8s; }  .in .step:nth-child(2) .step__node::after { transition-delay: 1.05s; } .in .step:nth-child(2) .step__text { transition-delay: 1.1s; }
  .in .step:nth-child(3) .photo { transition-delay: .16s; }      .in .step:nth-child(3) .step__node { transition-delay: 1.3s; } .in .step:nth-child(3) .step__node::after { transition-delay: 1.55s; } .in .step:nth-child(3) .step__text { transition-delay: 1.6s; }
  .in .step:nth-child(4) .photo { transition-delay: .24s; }      .in .step:nth-child(4) .step__node { transition-delay: 1.8s; } .in .step:nth-child(4) .step__node::after { transition-delay: 2.05s; } .in .step:nth-child(4) .step__text { transition-delay: 2.1s; }
  .in .step:nth-child(5) .photo { transition-delay: .32s; }      .in .step:nth-child(5) .step__node { transition-delay: 2.3s; } .in .step:nth-child(5) .step__node::after { transition-delay: 2.55s; } .in .step:nth-child(5) .step__text { transition-delay: 2.6s; }
}
@keyframes settle { from { transform: scale(1.06); } }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } }
@keyframes pop { from { opacity: 0; transform: scale(.85); } }