:root {
  color-scheme: dark;
  --bg: #050505;
  --surface: #111111;
  --surface-light: #171717;
  --text: #f4f4f2;
  --muted: #a0a0a0;
  --line: #292929;
  --container: 1080px;
  --radius: 18px;
  --chip-radius: 8px;
  --font: "Inter", sans-serif;
  --display: "Space Grotesk", sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f4f0;
  --surface: #ffffff;
  --surface-light: #ecece7;
  --text: #151515;
  --muted: #62625e;
  --line: #d6d6d0;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  transition: color .35s, background .35s;
}
body.modal-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
::selection { color: #050505; background: #fff; }

.container { width: min(calc(100% - 40px), var(--container)); margin: 0 auto; }
.skip-link { position: fixed; z-index: 1000; top: 10px; left: 10px; padding: 10px 16px; border-radius: 999px; background: #fff; color: #050505; transform: translateY(-150%); }
.skip-link:focus { transform: none; }

.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  background: rgba(5, 5, 5, .88);
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(14px);
  transition: border-color .25s, background .35s;
}
.header.is-scrolled { border-color: var(--line); }
.header-inner { height: 72px; display: flex; align-items: center; justify-content: space-between; }
.logo { font: 700 20px/1 var(--display); letter-spacing: -.025em; }
.logo span { color: #8d8d8d; }
.nav { display: flex; align-items: center; gap: 30px; }
.nav a { position: relative; color: #b5b5b5; font-size: 13px; transition: color .2s, background .2s, border-color .2s; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 1px; background: #f2f2ee; transform: scaleX(0); transform-origin: center; transition: transform .25s var(--ease); }
.nav a:hover { color: #fff; }
.nav a.is-active { color: #fff; }
.nav a.is-active::after { transform: scaleX(1); }
.nav .nav-contact { padding: 9px 17px; border: 1px solid #3a3a3a; border-radius: 999px; color: #fff; background: var(--surface); }
.nav .nav-contact::after { display: none; }
.nav .nav-contact.is-active { border-color: #5a5a5a; background: #1c1c1c; }
.theme-toggle { position: relative; width: 38px; height: 38px; flex: 0 0 38px; margin-left: -20px; padding: 0; display: grid; place-items: center; overflow: hidden; isolation: isolate; border: 1px solid #3a3a3a; border-radius: 50%; color: #e8e8e4; background: var(--surface); cursor: pointer; transform: translate3d(0, 0, 0); backface-visibility: hidden; transition: color .3s, background .3s, border-color .3s; }
.theme-toggle:hover { border-color: #5b5b5b; background: var(--surface-light); }
.theme-toggle:focus-visible { outline: 0; box-shadow: 0 0 0 4px rgba(255,255,255,.1); }
.theme-icon { position: relative; z-index: 1; grid-area: 1 / 1; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; transform: translate3d(0, 0, 0) rotate(0deg); transform-box: view-box; transform-origin: center; backface-visibility: hidden; will-change: opacity, transform; transition: opacity .3s, transform .4s var(--ease); }
.theme-icon-fill { fill: currentColor; stroke: none; }
.theme-icon-sun { opacity: 1; }
.theme-icon-moon { opacity: 0; }
.theme-toggle:hover .theme-icon-sun { transform: translate3d(0, 0, 0) rotate(24deg); }
.theme-toggle:hover .theme-icon-moon { transform: translate3d(0, 0, 0) rotate(-12deg); }
:root[data-theme="light"] .theme-icon-sun { opacity: 0; }
:root[data-theme="light"] .theme-icon-moon { opacity: 1; }
.menu-button { display: none; padding: 9px 14px; border: 1px solid #333; border-radius: 999px; background: #111; cursor: pointer; }

.hero { min-height: 620px; padding: 118px 0 68px; border-bottom: 1px solid var(--line); }
.hero-inner { position: relative; }
.code-line { min-height: 20px; margin-bottom: 38px; display: inline-flex; align-items: center; gap: 2px; color: #777; font: 12px/1.6 monospace; vertical-align: top; }
.code-line span { color: #d0d0d0; }
.code-line i { width: 7px; height: 14px; display: inline-block; background: #d0d0d0; opacity: .8; animation: caret-blink 1s steps(2, start) infinite; }
.hero-content { max-width: 730px; }
.status { margin: 0 0 20px; display: flex; align-items: center; gap: 9px; color: #8c8c8c; font-size: 12px; }
.status i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: #d7d7d7; box-shadow: 0 0 10px rgba(255,255,255,.5); animation: status-dot 2s var(--ease) infinite; }
.status i::after { content: ""; position: absolute; inset: -5px; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; animation: status-ring 2s var(--ease) infinite; }
.hero h1 { margin: 0; font: 700 clamp(68px, 10vw, 132px)/.9 var(--display); letter-spacing: -.025em; }
.hero-role { margin: 28px 0 0; font: 600 clamp(20px, 3vw, 32px)/1.25 var(--font); letter-spacing: 0; }
.hero-text { max-width: 620px; margin: 22px 0 0; color: var(--muted); font-size: 16px; }
.hero-actions { margin-top: 34px; display: flex; gap: 10px; flex-wrap: wrap; }
.button {
  min-height: 48px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #383838;
  border-radius: 999px;
  background: var(--surface);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .25s var(--ease), background .25s, border-color .25s;
}
.button:hover { transform: translateY(-2px); background: #1d1d1d; border-color: #555; }
.button-primary { color: #090909; background: #f1f1ee; border-color: #f1f1ee; }
.button-primary:hover { background: #d7d7d3; border-color: #d7d7d3; }
.scroll-link { position: absolute; right: 0; bottom: 0; min-height: 48px; padding: 5px 5px 5px 18px; display: inline-flex; align-items: center; gap: 14px; border: 1px solid #333; border-radius: 999px; color: #8f8f8f; background: #0b0b0b; font-size: 12px; font-weight: 600; overflow: hidden; transition: color .3s, border-color .3s, background .3s, transform .3s var(--ease); }
.scroll-link::before { content: ""; position: absolute; inset: 0; background: #171717; transform: translateX(-102%); transition: transform .4s var(--ease); }
.scroll-link span, .scroll-link i { position: relative; z-index: 1; }
.scroll-link i { width: 36px; height: 36px; padding: 0; display: grid; place-items: center; line-height: 0; border-radius: 50%; color: #080808; background: #e8e8e4; }
.scroll-link svg { width: 18px; height: 18px; position: relative; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--ease); }
.scroll-link:hover { color: #fff; border-color: #505050; transform: translateY(-3px); }
.scroll-link:hover::before { transform: none; }
.scroll-link:hover svg { animation: arrow-down .7s var(--ease); }
@keyframes caret-blink { 50% { opacity: 0; } }
@keyframes status-dot { 50% { transform: scale(1.18); box-shadow: 0 0 16px rgba(255,255,255,.65); } }
@keyframes status-ring { 0% { transform: scale(.7); opacity: .75; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes arrow-down { 49% { transform: translateY(13px); opacity: 0; } 50% { transform: translateY(-13px); opacity: 0; } 100% { transform: none; opacity: 1; } }

.section { padding: 82px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 73px; }
.section-heading { margin-bottom: 38px; display: flex; align-items: baseline; gap: 22px; }
.section-heading span { color: #666; font: 11px var(--display); }
.section-heading h2 { margin: 0; font: 700 clamp(36px, 5vw, 54px)/1.05 var(--font); letter-spacing: -.025em; }

.about-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 11%; align-items: start; }
.about-lead { max-width: 470px; margin: 0; font: 600 clamp(26px, 4vw, 43px)/1.18 var(--font); letter-spacing: -.01em; }
.about-copy { max-width: 470px; color: var(--muted); }
.about-copy p { margin: 0 0 20px; }

.services-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.service-row { --mx: 50%; --my: 50%; position: relative; isolation: isolate; overflow: hidden; min-height: 282px; padding: 24px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); transition: transform .35s var(--ease), border-color .3s, background .3s, box-shadow .35s; }
.service-row::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: 0; background: radial-gradient(260px circle at var(--mx) var(--my), rgba(255,255,255,.12), transparent 68%); transition: opacity .35s; }
.service-row:hover { border-color: #4a4a4a; background: var(--surface-light); box-shadow: 0 18px 50px rgba(0,0,0,.35); }
.service-row:hover::before { opacity: 1; }
.service-number { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #3b3b3b; border-radius: 12px; color: #bdbdbd; font: 600 11px/1 var(--display); transition: color .35s, background .35s, transform .45s var(--ease); }
.service-number svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.service-row:hover .service-number { color: #0b0b0b; background: #e8e8e4; transform: rotate(-8deg) scale(1.08); }
.service-row > div { margin-top: 32px; }
.service-row h3 { margin: 0; font: 600 23px/1.15 var(--font); letter-spacing: -.01em; }
.service-row p { margin: 13px 0 0; color: #929292; font-size: 14px; line-height: 1.6; }
.service-row b { align-self: flex-start; margin-top: auto; padding: 6px 11px; border: 1px solid #303030; border-radius: var(--chip-radius); color: #bdbdbd; background: #0b0b0b; font-size: 10.5px; font-weight: 600; line-height: 1.3; white-space: nowrap; }

.skills-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.skill-card { position: relative; min-height: 238px; }
.skill-card-surface { isolation: isolate; contain: paint; overflow: hidden; min-height: inherit; height: 100%; padding: 24px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); transform: translate3d(0, 0, 0); backface-visibility: hidden; will-change: transform; transition: transform .34s var(--ease), border-color .3s, background .3s; }
.skill-icon { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #3b3b3b; border-radius: 12px; color: #bdbdbd; transition: color .35s, background .35s, transform .45s var(--ease); }
.skill-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.skill-card:hover .skill-icon { color: #0b0b0b; background: #e8e8e4; transform: rotate(-8deg) scale(1.08); }
.skill-card h3 { margin: 64px 0 12px; font: 600 22px/1.15 var(--display); letter-spacing: -.01em; }
.skill-card p { margin: 0; color: #929292; font-size: 14px; line-height: 1.6; }
.tags { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.tags span { padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--chip-radius); color: #8e8e8e; background: #0b0b0b; font-size: 12px; transform: translate3d(0, 0, 0); backface-visibility: hidden; will-change: transform; transition: transform .25s var(--ease), color .25s, border-color .25s, background .25s; }
.tags span:hover { transform: translate3d(0, -3px, 0); color: #ecece8; border-color: #484848; background: #171717; }

.projects-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.project-pair { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.project-card { position: relative; min-width: 0; cursor: pointer; }
.project-card-surface { position: relative; overflow: hidden; overflow: clip; clip-path: inset(0 round var(--radius)); height: 100%; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); transform: translate3d(0, 0, 0); backface-visibility: hidden; will-change: transform; -webkit-mask-image: -webkit-radial-gradient(white, black); transition: transform .34s var(--ease), border-color .3s, box-shadow .34s var(--ease); }
.project-card:hover .project-card-surface { border-color: #4b4b4b; box-shadow: 0 24px 65px rgba(0,0,0,.4); }
.project-card:focus-visible { outline: 0; }
.project-card:focus-visible .project-card-surface { border-color: #ecece8; box-shadow: 0 0 0 4px rgba(255,255,255,.08), 0 24px 65px rgba(0,0,0,.4); }
.project-wide { grid-column: 1 / -1; }
.project-wide .project-card-surface { display: grid; grid-template-columns: .85fr 1.15fr; }
.project-cover { position: relative; min-height: 230px; overflow: hidden; background: #181818; border-bottom: 1px solid var(--line); border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0; clip-path: inset(0 round calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0); }
.project-wide .project-cover { min-height: 100%; border-right: 1px solid var(--line); border-bottom: 0; border-radius: calc(var(--radius) - 1px) 0 0 calc(var(--radius) - 1px); clip-path: inset(0 round calc(var(--radius) - 1px) 0 0 calc(var(--radius) - 1px)); }
.project-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.12), transparent 62%); transform: translateX(-130%); transition: transform .75s var(--ease); }
.project-card:hover .project-cover::after { transform: translateX(130%); }
.project-cover img { width: 100%; height: 100%; position: absolute; inset: 0; display: block; object-fit: cover; border-radius: inherit; filter: saturate(.72) brightness(.82); transition: transform .75s var(--ease), filter .55s; }
.project-card:hover .project-cover img { transform: scale(1.055); filter: saturate(.95) brightness(.95); }
.cover-label { position: absolute; z-index: 2; right: 14px; bottom: 12px; padding: 6px 10px; border: 1px solid rgba(255,255,255,.16); border-radius: var(--chip-radius); color: #d0d0d0; background: rgba(5,5,5,.6); backdrop-filter: blur(8px); font: 8px var(--display); text-transform: uppercase; letter-spacing: .08em; }
.project-body { padding: 28px; display: flex; flex: 1; flex-direction: column; }
.project-topline { display: flex; justify-content: space-between; color: #696969; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.project-body h3 { margin: 22px 0 13px; font: 600 30px/1.15 var(--display); letter-spacing: -.01em; }
.project-body p { margin: 0; color: #9b9b9b; font-size: 15px; }
.project-body ul { margin: 25px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; list-style: none; }
.project-body li { padding: 6px 11px; border: 1px solid #303030; border-radius: var(--chip-radius); color: #898989; font-size: 11px; }
.project-hint { margin-top: auto; padding-top: 22px; display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; color: #d8d8d4; font-size: 13px; font-weight: 600; transition: color .3s; }
.project-hint svg { width: 15px; height: 15px; flex: 0 0 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.project-card:hover .project-hint { color: #fff; }
.project-card:hover .project-hint svg { transform: translate3d(2px, -2px, 0); }

.project-modal[hidden] { display: none; }
.project-modal { position: fixed; inset: 0; z-index: 500; padding: 24px; display: grid; place-items: center; }
.modal-backdrop { position: absolute; inset: 0; border: 0; background: rgba(0,0,0,.72); backdrop-filter: blur(12px); cursor: pointer; }
.modal-dialog { position: relative; z-index: 1; width: min(1120px, 100%); max-height: min(860px, calc(100vh - 48px)); overflow: auto; display: grid; grid-template-columns: .78fr 1.22fr; gap: 24px; padding: 28px; border: 1px solid #383838; border-radius: 28px; background: linear-gradient(135deg, rgba(23,23,23,.98), rgba(8,8,8,.98)); box-shadow: 0 40px 120px rgba(0,0,0,.65); backface-visibility: hidden; will-change: opacity; animation: project-modal-in .3s var(--ease) both; }
.modal-close { position: sticky; top: 0; z-index: 5; grid-column: 1 / -1; justify-self: end; width: 42px; height: 42px; margin: -8px -8px -34px 0; padding: 0; display: grid; place-items: center; border: 1px solid #3a3a3a; border-radius: 50%; background: #121212; cursor: pointer; transition: transform .25s var(--ease), background .25s, border-color .25s; }
.modal-close:hover { transform: rotate(90deg); background: #1f1f1f; border-color: #555; }
.modal-close svg { width: 16px; height: 16px; display: block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.modal-copy { align-self: start; padding-top: 28px; }
.modal-kicker { margin: 0 0 14px; color: #777; font: 11px var(--display); text-transform: uppercase; letter-spacing: .12em; }
.modal-copy h2 { margin: 0; font: 700 clamp(38px, 5vw, 64px)/.95 var(--display); letter-spacing: -.025em; }
.modal-copy p[id] { margin: 22px 0 0; color: #a0a0a0; font-size: 15px; }
.modal-actions { width: min(100%, 250px); margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.modal-actions .button { width: 100%; min-width: 0; min-height: 42px; padding: 0 12px; gap: 5px; font-size: 13px; white-space: nowrap; }
.modal-actions .button svg { width: 14px; height: 14px; flex: 0 0 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transform: translate3d(0, 1px, 0); transition: transform .3s var(--ease); }
.modal-actions .button:hover svg { transform: translate3d(2px, 0, 0); }
.modal-meta { margin-top: 24px; display: grid; gap: 8px; }
.modal-meta-item { padding: 12px 13px; display: grid; gap: 10px; border: 1px solid #303030; border-radius: 16px; background: rgba(255,255,255,.025); }
.modal-meta-label { color: #777; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.modal-meta-item b { color: #efefea; font-size: 13px; line-height: 1.35; }
.modal-stack-list { display: flex; flex-wrap: wrap; gap: 6px; }
.modal-stack-chip { padding: 7px 10px; border: 1px solid #3d3d3d; border-radius: var(--chip-radius); color: #e7e7e2; background: #171717; font-size: 12px; font-weight: 700; line-height: 1; }
.modal-facts { margin: 28px 0 0; padding: 0; display: grid; gap: 10px; list-style: none; }
.modal-facts li { padding-left: 18px; position: relative; color: #c9c9c5; font-size: 13px; }
.modal-facts li::before { content: ""; position: absolute; top: .75em; left: 0; width: 6px; height: 6px; border-radius: 50%; background: #d9d9d5; box-shadow: 0 0 12px rgba(255,255,255,.35); }
.modal-gallery { min-width: 0; min-height: 0; align-self: stretch; padding-top: 28px; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 12px; }
.modal-stage { position: relative; min-height: clamp(390px, 42vw, 520px); overflow: hidden; border: 1px solid #303030; border-radius: 22px; background: #080808; box-shadow: 0 24px 58px rgba(0,0,0,.4); isolation: isolate; }
.modal-stage-open { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; overflow: hidden; border: 0; background: #080808; cursor: zoom-in; }
.modal-stage-open::after { content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.045); }
.modal-stage-open:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px #e8e8e4; }
.modal-stage-image { position: absolute; z-index: 1; top: 50%; left: 50%; width: auto; height: auto; max-width: calc(100% - 36px); max-height: calc(100% - 36px); display: block; border: 1px solid rgba(255,255,255,.13); border-radius: 14px; object-fit: contain; filter: saturate(.98) brightness(.98) drop-shadow(0 22px 38px rgba(0,0,0,.48)); transform: translate(-50%, -50%); }
.modal-stage-image.is-changing { animation: gallery-image-in .42s var(--ease); }
.modal-stage-nav { position: absolute; z-index: 4; top: 50%; width: 42px; height: 42px; padding: 0; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; color: #f0f0ec; background: rgba(8,8,8,.72); backdrop-filter: blur(12px); cursor: pointer; transform: translateY(-50%); transition: transform .25s var(--ease), background .25s, border-color .25s, opacity .25s; }
.modal-stage-prev { left: 14px; }
.modal-stage-next { right: 14px; }
.modal-stage-nav:hover { border-color: rgba(255,255,255,.38); background: rgba(28,28,28,.9); transform: translateY(-50%) scale(1.06); }
.modal-stage-nav:focus-visible { outline: 0; border-color: #eee; box-shadow: 0 0 0 4px rgba(255,255,255,.1); }
.modal-stage-nav svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.modal-stage-meta { position: absolute; z-index: 4; right: 14px; bottom: 14px; left: 14px; pointer-events: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.modal-stage-caption, .modal-stage-counter { padding: 7px 10px; border: 1px solid rgba(255,255,255,.13); border-radius: 999px; color: #e7e7e2; background: rgba(5,5,5,.68); backdrop-filter: blur(10px); font: 10px/1 var(--font); box-shadow: 0 9px 24px rgba(0,0,0,.26); }
.modal-stage-counter { color: #aaa; font-variant-numeric: tabular-nums; }
.modal-thumbnails { min-width: 0; display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-inline: contain; padding: 2px 2px 5px; scrollbar-width: thin; scrollbar-color: #444 transparent; }
.modal-thumbnail { width: 78px; height: 56px; flex: 0 0 78px; padding: 4px; overflow: hidden; border: 1px solid #303030; border-radius: 12px; background: #0a0a0a; opacity: .6; cursor: pointer; transform: translateY(0); transition: opacity .25s, transform .3s var(--ease), border-color .25s, background .25s; }
.modal-thumbnail img { width: 100%; height: 100%; display: block; border-radius: 7px; object-fit: contain; filter: saturate(.82) brightness(.9); transition: filter .25s; }
.modal-thumbnail:hover { opacity: .78; border-color: #555; transform: translateY(-2px); }
.modal-thumbnail.is-active { opacity: 1; border-color: #d8d8d3; background: #171717; transform: translateY(-2px); }
.modal-thumbnail.is-active img { filter: saturate(1) brightness(1); }
.modal-thumbnail:focus-visible { outline: 0; border-color: #eee; box-shadow: 0 0 0 3px rgba(255,255,255,.1); }
@keyframes gallery-image-in { from { opacity: .28; transform: translate(-50%, -50%) scale(.985); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes project-modal-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes field-error-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.order-modal[hidden] { display: none; }
.order-modal { position: fixed; inset: 0; z-index: 600; padding: 18px; display: grid; place-items: center; }
.order-backdrop { position: absolute; inset: 0; border: 0; background: rgba(0,0,0,.72); backdrop-filter: blur(12px); cursor: pointer; }
.order-dialog { position: relative; z-index: 1; width: min(560px, 100%); max-height: calc(100vh - 36px); overflow: auto; padding: 28px; border: 1px solid #383838; border-radius: 28px; background: linear-gradient(135deg, rgba(23,23,23,.98), rgba(8,8,8,.98)); box-shadow: 0 40px 120px rgba(0,0,0,.65); scrollbar-width: thin; scrollbar-color: #444 transparent; animation: modal-in .35s var(--ease); }
.order-close { position: absolute; top: 18px; right: 18px; width: 42px; height: 42px; padding: 0; display: grid; place-items: center; line-height: 0; border: 1px solid #3a3a3a; border-radius: 50%; background: #121212; cursor: pointer; transition: transform .25s var(--ease), background .25s, border-color .25s; }
.order-close:hover { transform: rotate(90deg); background: #1f1f1f; border-color: #555; }
.order-close svg { width: 16px; height: 16px; display: block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.order-head { padding-right: 54px; }
.order-head h2 { margin: 0; font: 700 clamp(34px, 5vw, 48px)/.98 var(--font); letter-spacing: -.025em; }
.order-head p { margin: 16px 0 0; color: #a0a0a0; font-size: 15px; line-height: 1.55; }
.order-form { margin-top: 28px; display: grid; gap: 17px; }
.order-form label { position: relative; display: grid; gap: 8px; color: #b8b8b8; font-size: 12px; font-weight: 600; pointer-events: none; transition: color .25s; }
.order-form label:focus-within { color: #efefea; }
.order-form label.has-error { color: #f0b6a8; }
.order-form input,
.order-form textarea { width: 100%; border: 1px solid #444; border-radius: 12px; background: #202020; color: #f4f4f2; font: 600 14px/1.45 var(--font); outline: 0; pointer-events: auto; transition: border-color .25s, background .25s, box-shadow .25s, transform .25s var(--ease); }
.order-form input { min-height: 45px; padding: 0 13px; }
.order-form textarea { min-height: 120px; max-height: 220px; padding: 12px 13px; resize: none; }
.order-form input::placeholder,
.order-form textarea::placeholder { color: #777; }
.order-form input:focus,
.order-form textarea:focus { border-color: #777; background: #242424; box-shadow: 0 0 0 2px rgba(255,255,255,.06), 0 16px 38px rgba(0,0,0,.22); transform: translateY(-1px); }
.order-form input.is-filled,
.order-form textarea.is-filled { border-color: #d2d2cc; background: #242424; box-shadow: 0 0 0 2px rgba(255,255,255,.11), inset 0 0 0 1px rgba(255,255,255,.055); }
.order-form input.is-invalid,
.order-form textarea.is-invalid { border-color: #e0694f; background: #241d1b; box-shadow: 0 0 0 2px rgba(224,105,79,.1); }
.field-error { width: fit-content; max-width: 100%; padding: 7px 10px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(224,105,79,.26); border-radius: 999px; color: #f0b6a8; background: rgba(224,105,79,.08); font-size: 11px; font-weight: 700; line-height: 1.2; animation: field-error-in .22s var(--ease); }
.field-error::before { content: ""; width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: #e0694f; box-shadow: 0 0 12px rgba(224,105,79,.55); }
.order-submit { position: relative; top: 6px; min-height: 48px; border: 1px solid #5a5a5a; border-radius: 999px; background: #303030; color: #fff; font-weight: 700; cursor: pointer; box-shadow: inset 0 -3px 0 rgba(255,255,255,.08), 0 14px 34px rgba(0,0,0,.28); transition: transform .25s var(--ease), background .25s, border-color .25s; }
.order-submit:hover { transform: translateY(-2px); background: #3a3a3a; border-color: #777; }
.order-form.is-ready .order-submit { border-color: #f1f1ee; color: #080808; background: #f1f1ee; box-shadow: inset 0 -3px 0 rgba(0,0,0,.08), 0 18px 42px rgba(255,255,255,.08); }
.order-form.is-ready .order-submit:hover { background: #d7d7d3; border-color: #d7d7d3; }
.order-success-icon { width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid #474747; border-radius: 50%; color: #080808; background: #f1f1ee; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.order-success-icon svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.success-modal[hidden] { display: none; }
.success-modal { position: fixed; inset: 0; z-index: 650; padding: 18px; display: grid; place-items: center; }
.success-backdrop { position: absolute; inset: 0; border: 0; background: rgba(0,0,0,.72); backdrop-filter: blur(12px); cursor: pointer; }
.success-dialog { position: relative; z-index: 1; width: min(430px, 100%); padding: 42px 30px 28px; display: grid; justify-items: center; gap: 16px; border: 1px solid #383838; border-radius: 28px; background: linear-gradient(135deg, rgba(23,23,23,.98), rgba(8,8,8,.98)); box-shadow: 0 40px 120px rgba(0,0,0,.65); text-align: center; animation: modal-in .35s var(--ease); }
.success-dialog h2 { margin: 4px 0 0; font: 700 36px/.98 var(--font); letter-spacing: -.02em; }
.success-dialog p { max-width: 330px; margin: 0; color: #a0a0a0; font-size: 14px; line-height: 1.55; }
.success-dialog .button { margin-top: 2px; min-width: 150px; }

.shot-viewer[hidden] { display: none; }
.shot-viewer { position: fixed; inset: 0; z-index: 700; padding: 24px; display: grid; place-items: center; }
.shot-viewer-backdrop { position: absolute; inset: 0; border: 0; background: rgba(0,0,0,.82); backdrop-filter: blur(14px); cursor: zoom-out; }
.shot-viewer-dialog { position: relative; z-index: 1; width: min(1040px, 100%); max-height: calc(100vh - 48px); display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; align-items: center; gap: 14px; animation: modal-in .28s var(--ease); }
.shot-viewer-frame { min-width: 0; max-height: calc(100vh - 48px); margin: 0; display: grid; place-items: center; gap: 12px; }
.shot-viewer-frame img { max-width: 100%; max-height: calc(100vh - 98px); display: block; border: 1px solid #343434; border-radius: 24px; background: #050505; object-fit: contain; box-shadow: 0 34px 110px rgba(0,0,0,.62); }
.shot-viewer-frame figcaption { color: #c9c9c5; font-size: 12px; text-align: center; }
.shot-viewer-close, .shot-viewer-nav { border: 1px solid #3a3a3a; background: #121212; color: #f3f3ef; cursor: pointer; transition: transform .25s var(--ease), background .25s, border-color .25s; }
.shot-viewer-close { position: absolute; right: 0; top: 0; z-index: 3; width: 42px; height: 42px; padding: 0; display: grid; place-items: center; border-radius: 50%; }
.shot-viewer-close:hover { transform: rotate(90deg); background: #1f1f1f; border-color: #555; }
.shot-viewer-close svg { width: 16px; height: 16px; display: block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.shot-viewer-nav { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; }
.shot-viewer-nav svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.shot-viewer-nav:hover { background: #1f1f1f; border-color: #555; }

.contact { padding-bottom: 34px; border-bottom: 0; }
.contact-main { --mx: 50%; --my: 50%; position: relative; overflow: hidden; padding: 42px; display: grid; grid-template-columns: 1.2fr .8fr; gap: 60px; align-items: end; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); transition: border-color .35s, box-shadow .35s; }
.contact-main::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(360px circle at var(--mx) var(--my), rgba(255,255,255,.07), transparent 70%); transition: opacity .35s; }
.contact-main:hover { border-color: #404040; box-shadow: 0 24px 70px rgba(0,0,0,.34); }
.contact-main:hover::before { opacity: 1; }
.contact-main > * { position: relative; z-index: 1; }
.contact-main h3 { margin: 0; font: 600 clamp(34px, 5vw, 58px)/1.05 var(--font); letter-spacing: -.02em; }
.contact-main p { margin: 20px 0 0; color: #8d8d8d; font-size: 14px; }
.contact-links { max-width: 100%; display: inline-grid; grid-template-columns: minmax(0, max-content); justify-self: end; gap: 9px; }
.contact-button { width: 100%; max-width: 100%; min-height: 50px; padding: 0 16px 0 17px; display: inline-flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid #383838; border-radius: 999px; background: #191919; font-size: 13px; transform: translate3d(0, 0, 0); backface-visibility: hidden; will-change: transform; transition: background .25s, transform .3s var(--ease); }
.contact-button:hover { background: #242424; transform: translate3d(3px, 0, 0); }
.contact-label { min-width: 0; display: flex; align-items: center; gap: 10px; }
.contact-label > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-label svg { width: 17px; height: 17px; flex: 0 0 17px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.contact-button:hover .contact-label svg { transform: scale(1.12) rotate(-4deg); }
.contact-arrow { width: 21px; height: 21px; flex: 0 0 21px; display: grid; place-items: center; color: #b7b7b3; transform: translate3d(0, 0, 0); backface-visibility: hidden; will-change: transform; transition: color .28s, transform .3s var(--ease); }
.contact-arrow svg { width: 18px; height: 18px; display: block; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.contact-button:hover .contact-arrow { color: #fff; transform: translate3d(3px, -3px, 0); }
.footer { margin-top: 58px; padding-top: 22px; display: flex; justify-content: space-between; border-top: 1px solid var(--line); color: #686868; font-size: 12px; }
.footer a { color: #a0a0a0; }

:root[data-theme="light"] ::selection { color: #fff; background: #171717; }
:root[data-theme="light"] .header { background: rgba(244,244,240,.9); }
:root[data-theme="light"] .logo span { color: #70706c; }
:root[data-theme="light"] .nav a { color: #60605c; }
:root[data-theme="light"] .nav a:hover,
:root[data-theme="light"] .nav a.is-active { color: #151515; }
:root[data-theme="light"] .nav a::after { background: #151515; }
:root[data-theme="light"] .nav .nav-contact { color: #151515; border-color: #c9c9c3; background: #fff; }
:root[data-theme="light"] .nav .nav-contact:hover,
:root[data-theme="light"] .nav .nav-contact.is-active { border-color: #a7a7a1; background: #e9e9e4; }
:root[data-theme="light"] .theme-toggle { color: #343432; border-color: #c9c9c3; background: #fff; }
:root[data-theme="light"] .theme-toggle:hover { border-color: #aaa9a3; background: #e9e9e4; }
:root[data-theme="light"] .theme-toggle:focus-visible { box-shadow: 0 0 0 4px rgba(0,0,0,.09); }
:root[data-theme="light"] .menu-button { color: #242422; border-color: #cacac4; background: #fff; }
:root[data-theme="light"] .menu-button i { background: #6c6c68; }
:root[data-theme="light"] .code-line { color: #73736e; }
:root[data-theme="light"] .code-line span { color: #292927; }
:root[data-theme="light"] .code-line i { background: #292927; }
:root[data-theme="light"] .status { color: #666662; }
:root[data-theme="light"] .status i { background: #4d4d49; box-shadow: 0 0 10px rgba(0,0,0,.22); }
:root[data-theme="light"] .status i::after { border-color: rgba(0,0,0,.22); }
:root[data-theme="light"] .button { color: #20201e; border-color: #cacac4; background: #fff; }
:root[data-theme="light"] .button:hover { border-color: #adada7; background: #e8e8e3; }
:root[data-theme="light"] .button-primary { color: #fff; border-color: #171717; background: #171717; }
:root[data-theme="light"] .button-primary:hover { border-color: #30302e; background: #30302e; }
:root[data-theme="light"] .scroll-link { color: #62625e; border-color: #c9c9c3; background: #fff; }
:root[data-theme="light"] .scroll-link::before { background: #e7e7e2; }
:root[data-theme="light"] .scroll-link i { color: #fff; background: #20201e; }
:root[data-theme="light"] .scroll-link:hover { color: #171717; border-color: #a8a8a2; background: #fff; }
:root[data-theme="light"] .section-heading span { color: #777772; }
:root[data-theme="light"] .service-row::before { background: radial-gradient(260px circle at var(--mx) var(--my), rgba(0,0,0,.07), transparent 68%); }
:root[data-theme="light"] .service-row:hover { border-color: #b9b9b3; box-shadow: 0 18px 45px rgba(0,0,0,.1); }
:root[data-theme="light"] .skill-card:hover .skill-card-surface { border-color: #b9b9b3; }
:root[data-theme="light"] .service-number,
:root[data-theme="light"] .skill-icon { color: #575753; border-color: #c8c8c2; }
:root[data-theme="light"] .service-row:hover .service-number,
:root[data-theme="light"] .skill-card:hover .skill-icon { color: #fff; background: #242422; }
:root[data-theme="light"] .service-row p,
:root[data-theme="light"] .skill-card p { color: #62625e; }
:root[data-theme="light"] .service-row b,
:root[data-theme="light"] .tags span { color: #565652; border-color: #d0d0ca; background: #f8f8f5; }
:root[data-theme="light"] .tags span:hover { color: #171717; border-color: #aaa9a3; background: #e8e8e3; }
:root[data-theme="light"] .project-card:hover .project-card-surface { border-color: #b5b5af; box-shadow: 0 24px 55px rgba(0,0,0,.12); }
:root[data-theme="light"] .project-card:focus-visible .project-card-surface { border-color: #33332f; box-shadow: 0 0 0 4px rgba(0,0,0,.08), 0 24px 55px rgba(0,0,0,.12); }
:root[data-theme="light"] .project-topline { color: #777772; }
:root[data-theme="light"] .project-body p { color: #5f5f5b; }
:root[data-theme="light"] .project-body li { color: #5b5b57; border-color: #d0d0ca; background: #f8f8f5; }
:root[data-theme="light"] .project-hint { color: #353531; }
:root[data-theme="light"] .project-card:hover .project-hint { color: #111; }
:root[data-theme="light"] .modal-dialog,
:root[data-theme="light"] .order-dialog,
:root[data-theme="light"] .success-dialog { color: #171717; border-color: #d0d0ca; background: linear-gradient(135deg, rgba(255,255,255,.99), rgba(241,241,236,.99)); box-shadow: 0 40px 110px rgba(0,0,0,.22); }
:root[data-theme="light"] .modal-close,
:root[data-theme="light"] .order-close { color: #252523; border-color: #c9c9c3; background: #fff; }
:root[data-theme="light"] .modal-close:hover,
:root[data-theme="light"] .order-close:hover { border-color: #aaa9a3; background: #e7e7e2; }
:root[data-theme="light"] .modal-kicker,
:root[data-theme="light"] .modal-meta-label { color: #71716d; }
:root[data-theme="light"] .modal-copy p[id],
:root[data-theme="light"] .order-head p,
:root[data-theme="light"] .success-dialog p { color: #62625e; }
:root[data-theme="light"] .modal-meta-item { border-color: #d2d2cc; background: rgba(0,0,0,.025); }
:root[data-theme="light"] .modal-meta-item b { color: #292927; }
:root[data-theme="light"] .modal-stack-chip { color: #343431; border-color: #cacac4; background: #edede8; }
:root[data-theme="light"] .modal-facts li { color: #4f4f4b; }
:root[data-theme="light"] .modal-facts li::before { background: #4a4a46; box-shadow: none; }
:root[data-theme="light"] .order-form label { color: #5d5d59; }
:root[data-theme="light"] .order-form label:focus-within { color: #20201e; }
:root[data-theme="light"] .order-form label.has-error { color: #a64834; }
:root[data-theme="light"] .order-form input,
:root[data-theme="light"] .order-form textarea { color: #1e1e1c; border-color: #c5c5bf; background: #fff; }
:root[data-theme="light"] .order-form input::placeholder,
:root[data-theme="light"] .order-form textarea::placeholder { color: #858580; }
:root[data-theme="light"] .order-form input:focus,
:root[data-theme="light"] .order-form textarea:focus { border-color: #8c8c87; background: #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.05), 0 16px 34px rgba(0,0,0,.08); }
:root[data-theme="light"] .order-form input.is-filled,
:root[data-theme="light"] .order-form textarea.is-filled { border-color: #777772; background: #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.06); }
:root[data-theme="light"] .order-form input.is-invalid,
:root[data-theme="light"] .order-form textarea.is-invalid { border-color: #d46850; background: #fff4f1; box-shadow: 0 0 0 2px rgba(212,104,80,.1); }
:root[data-theme="light"] .field-error { color: #9f432f; background: #fff1ed; }
:root[data-theme="light"] .order-submit { color: #fff; border-color: #50504c; background: #50504c; box-shadow: inset 0 -3px 0 rgba(0,0,0,.12), 0 14px 30px rgba(0,0,0,.14); }
:root[data-theme="light"] .order-submit:hover { border-color: #333330; background: #333330; }
:root[data-theme="light"] .order-form.is-ready .order-submit { color: #fff; border-color: #171717; background: #171717; box-shadow: inset 0 -3px 0 rgba(255,255,255,.08), 0 18px 36px rgba(0,0,0,.15); }
:root[data-theme="light"] .order-form.is-ready .order-submit:hover { border-color: #30302e; background: #30302e; }
:root[data-theme="light"] .contact-main::before { background: radial-gradient(360px circle at var(--mx) var(--my), rgba(0,0,0,.06), transparent 70%); }
:root[data-theme="light"] .contact-main:hover { border-color: #b9b9b3; box-shadow: 0 24px 60px rgba(0,0,0,.1); }
:root[data-theme="light"] .contact-main p { color: #62625e; }
:root[data-theme="light"] .contact-button { color: #252523; border-color: #cacac4; background: #f8f8f5; }
:root[data-theme="light"] .contact-button:hover { background: #e7e7e2; }
:root[data-theme="light"] .contact-arrow { color: #53534f; }
:root[data-theme="light"] .contact-button:hover .contact-arrow { color: #151515; }
:root[data-theme="light"] .footer { color: #777772; }
:root[data-theme="light"] .footer a { color: #4c4c48; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .65s var(--ease), transform .65s var(--ease); }
.reveal.is-visible { opacity: 1; transform: translate3d(0, 0, 0); }
.skill-card.reveal.is-visible { backface-visibility: hidden; will-change: opacity, transform; }
.project-card.reveal.is-visible,
.service-row.reveal.is-visible { backface-visibility: hidden; will-change: transform; transition: opacity .65s var(--ease), transform .34s var(--ease), border-color .3s, background .3s, box-shadow .34s var(--ease); }

@media (hover: hover) and (pointer: fine) {
  .skill-card.reveal.is-visible:hover .skill-card-surface { border-color: #4a4a4a; background: var(--surface-light); transform: translate3d(0, -8px, 0); }
  .project-card.reveal.is-visible:hover .project-card-surface,
  .service-row.reveal.is-visible:hover { transform: translate3d(0, -8px, 0); }
}

@media (max-width: 900px) {
  .skills-grid { grid-template-columns: 1fr 1fr; }
  .services-list { grid-template-columns: 1fr; }
  .service-row { min-height: 230px; }
  .project-wide { display: block; }
  .project-wide .project-card-surface { display: block; }
  .project-wide .project-cover { min-height: 230px; border-right: 0; border-bottom: 1px solid var(--line); border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0; clip-path: inset(0 round calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0); }
  .contact-main { grid-template-columns: 1fr; }
  .modal-dialog { grid-template-columns: 1fr; }
  .modal-gallery { height: auto; min-height: 0; padding-top: 10px; }
  .modal-stage { height: min(560px, 68svh); min-height: 440px; }
  .modal-stage.is-wide { height: clamp(300px, 50vw, 420px); min-height: 0; }
  .modal-stage.is-square { height: clamp(360px, 62vw, 500px); min-height: 0; }
  .shot-viewer-dialog { grid-template-columns: 44px minmax(0, 1fr) 44px; }
  .shot-viewer-nav { width: 44px; height: 44px; }
}

@media (max-width: 680px) {
  .container { width: min(calc(100% - 32px), var(--container)); }
  .header-inner { height: 64px; }
  .section { scroll-margin-top: 65px; }
  .menu-button { display: flex; align-items: center; gap: 9px; }
  .menu-button i { width: 6px; height: 6px; border-radius: 50%; background: #aaa; }
  .nav { position: fixed; inset: 64px 0 auto; padding: 16px; display: grid; gap: 8px; background: #080808; border-bottom: 1px solid var(--line); transform: translateY(-130%); opacity: 0; pointer-events: none; transition: transform .35s var(--ease), opacity .25s; }
  .nav.is-open { transform: none; opacity: 1; pointer-events: auto; }
  .nav a { padding: 13px 16px; border-radius: 12px; background: #111; }
  .nav a::after { display: none; }
  .nav a.is-active { background: #1c1c1c; }
  .nav .nav-contact {
    justify-self: center;
    margin-top: 8px;
    padding: 11px 22px;
    border: 1px solid #3a3a3a;
    border-radius: 999px;
    background: var(--surface);
    color: #fff;
    box-shadow: 0 12px 34px rgba(0,0,0,.22);
  }
  .nav .nav-contact:hover,
  .nav .nav-contact.is-active {
    border-color: #555;
    background: #1d1d1d;
  }
  .theme-toggle { justify-self: center; margin-left: 0; }
  :root[data-theme="light"] .nav { background: #f4f4f0; }
  :root[data-theme="light"] .nav a { background: #fff; }
  :root[data-theme="light"] .nav a.is-active { background: #e7e7e2; }
  .hero { min-height: 610px; padding: 94px 0 58px; }
  .code-line { margin-bottom: 30px; font-size: 10px; }
  .hero h1 { font-size: clamp(66px, 23vw, 100px); }
  .hero-role { font-size: 21px; }
  .hero-text { font-size: 14px; }
  .scroll-link { position: static; margin-top: 28px; }
  .scroll-link::before { display: none; }
  .scroll-link:hover { color: #8f8f8f; border-color: #333; background: #0b0b0b; transform: none; }
  .scroll-link:hover svg { animation: none; transform: translateY(2px); }
  .section { padding: 62px 0; }
  .section-heading { margin-bottom: 30px; gap: 14px; }
  .about-layout { grid-template-columns: 1fr; gap: 34px; }
  .about-lead { font-size: 30px; }
  .service-row { min-height: auto; padding: 24px; display: flex; flex-direction: column; }
  .service-row:hover, .service-row.reveal.is-visible:hover { transform: none; }
  .service-row > div { margin-top: 38px; }
  .service-row h3 { font-size: 23px; }
  .service-row p { margin-top: 10px; font-size: 14px; line-height: 1.55; }
  .service-row b { margin-top: 24px; }
  .skills-grid, .projects-grid, .project-pair { grid-template-columns: 1fr; }
  .project-wide { grid-column: auto; }
  .skill-card { min-height: 220px; }
  .contact-main { padding: 27px 20px; gap: 38px; border-radius: var(--radius); }
  .contact-main h3 { font-size: 38px; }
  .contact-links { justify-self: start; }
  .project-modal { padding: 12px; }
  .modal-dialog { max-height: calc(100vh - 24px); padding: 20px; border-radius: 22px; }
  .modal-close { margin: -6px -6px -24px 0; }
  .modal-copy { padding-top: 20px; }
  .modal-actions { width: min(100%, 250px); gap: 8px; }
  .modal-gallery { height: auto; min-height: 0; padding-top: 18px; gap: 10px; }
  .modal-stage { height: min(460px, 58svh); min-height: 390px; border-radius: 17px; }
  .modal-stage.is-wide { height: clamp(240px, 78vw, 320px); min-height: 0; }
  .modal-stage.is-square { height: clamp(300px, 86vw, 380px); min-height: 0; }
  .modal-stage-image { max-width: calc(100% - 24px); max-height: calc(100% - 24px); border-radius: 10px; }
  .modal-stage-nav { width: 38px; height: 38px; }
  .modal-stage-prev { left: 9px; }
  .modal-stage-next { right: 9px; }
  .modal-stage-meta { right: 9px; bottom: 9px; left: 9px; }
  .modal-thumbnail { width: 70px; height: 52px; flex-basis: 70px; }
  .order-modal { padding: 12px; }
  .order-dialog { padding: 28px 20px 20px; border-radius: 20px; }
  .order-head h2 { font-size: 24px; }
  .order-form { gap: 15px; }
  .order-submit { top: 3px; }
  .shot-viewer { padding: 12px; }
  .shot-viewer-dialog { max-height: calc(100vh - 24px); grid-template-columns: 1fr; gap: 12px; }
  .shot-viewer-frame { max-height: calc(100vh - 24px); }
  .shot-viewer-frame img { max-height: calc(100vh - 112px); border-radius: 18px; }
  .shot-viewer-close { right: 8px; top: 8px; }
  .shot-viewer-nav { position: absolute; z-index: 4; top: 50%; width: 42px; height: 42px; background: rgba(18,18,18,.78); backdrop-filter: blur(8px); }
  .shot-viewer-nav svg { width: 20px; height: 20px; }
  .shot-viewer-prev { left: 8px; }
  .shot-viewer-next { right: 8px; }
  .footer { margin-top: 58px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}