:root {
  --ink: #0a0a0b;
  --ink-soft: #111114;
  --paper: #f3f0e9;
  --muted: rgba(243, 240, 233, 0.64);
  --soft: rgba(243, 240, 233, 0.42);
  --line: rgba(243, 240, 233, 0.16);
  --line-soft: rgba(243, 240, 233, 0.09);
  --warm: #c6a978;
  --warm-soft: rgba(198, 169, 120, 0.2);
  --display: "SUIT Variable", "Pretendard Variable", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
  --sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
  --mono: "DM Mono", "SFMono-Regular", Consolas, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; font-synthesis: none; }
html { background: var(--ink); scroll-behavior: smooth; overflow-x: clip; }
body { min-width: 320px; margin: 0; overflow-x: hidden; background: var(--ink); color: var(--paper); color-scheme: dark; font-family: var(--sans); -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; }
body, button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { border: 0; color: inherit; background: none; cursor: pointer; font: inherit; }
:focus-visible { outline: 2px solid var(--warm); outline-offset: 5px; }

.skip-link { position: fixed; top: 1rem; left: 50%; z-index: 100; padding: 0.7rem 1rem; background: var(--paper); color: var(--ink); transform: translate(-50%, -180%); transition: transform 240ms var(--ease); }
.skip-link:focus { transform: translate(-50%, 0); }
.site-shell { position: relative; isolation: isolate; overflow: clip; background: var(--ink); }

.site-header { position: fixed; z-index: 40; top: 0; right: 0; left: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 76px; padding: 0 clamp(1.25rem, 5.6vw, 5rem); background: linear-gradient(180deg, rgba(10, 10, 11, 0.92), rgba(10, 10, 11, 0.52) 70%, transparent); }
.wordmark { display: inline-flex; min-height: 44px; align-items: center; gap: 0.65rem; font-family: var(--display); font-size: 1.05rem; font-weight: 750; letter-spacing: -0.08em; line-height: 1; }
.wordmark-mark { display: block; width: 28px; height: 28px; flex: 0 0 28px; padding: 3px; border-radius: 8px; background: rgba(247, 247, 244, 0.96); object-fit: contain; }
.wordmark-copy { display: inline-flex; align-items: baseline; gap: 0.5rem; }
.wordmark-copy small { color: var(--soft); font-family: var(--mono); font-size: 0.48rem; font-weight: 400; letter-spacing: 0.08em; }
.site-header nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.1rem); }
.site-header nav a { position: relative; display: inline-flex; min-height: 44px; align-items: center; color: var(--soft); font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.1em; transition: color 220ms ease; }
.site-header nav a::after { position: absolute; right: 0; bottom: 6px; left: 0; height: 1px; background: var(--warm); content: ""; transform: scaleX(0); transform-origin: left; transition: transform 280ms var(--ease); }
.site-header nav a:hover, .site-header nav a[aria-current="page"] { color: var(--paper); }
.site-header nav a:hover::after, .site-header nav a[aria-current="page"]::after { transform: scaleX(1); }
.header-actions { justify-self: end; display: flex; align-items: center; gap: clamp(0.85rem, 1.7vw, 1.5rem); }
.header-meta { color: rgba(243, 240, 233, 0.38); font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.08em; white-space: nowrap; }
.header-cta { display: inline-flex; min-height: 44px; align-items: center; padding: 0 0 6px; border-bottom: 1px solid var(--warm); color: var(--paper); font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.05em; white-space: nowrap; transition: color 220ms ease, border-color 220ms ease; }
.header-cta:hover { border-color: var(--paper); color: var(--warm); }
.menu-toggle, .site-header .mobile-nav { display: none; }

.site-main { position: relative; z-index: 2; }
.hero-section { position: relative; min-height: max(720px, 100svh); display: flex; align-items: center; overflow: clip; padding: 9rem clamp(1.25rem, 7vw, 7.5rem) 5rem; }
.world-layer { position: absolute; z-index: -2; inset: 0; overflow: hidden; background: radial-gradient(circle at 68% 35%, rgba(198, 169, 120, 0.12), transparent 25%), var(--ink); opacity: 0.64; pointer-events: none; }
.world-layer canvas { display: block; width: 100%; height: 100%; }
.world-scrim { position: absolute; z-index: -1; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(10, 10, 11, 0.95) 0%, rgba(10, 10, 11, 0.72) 37%, rgba(10, 10, 11, 0.25) 72%, rgba(10, 10, 11, 0.65) 100%), linear-gradient(180deg, rgba(10, 10, 11, 0.34), transparent 35%, rgba(10, 10, 11, 0.75) 100%); }
.hero-grid { width: min(1240px, 100%); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(22rem, 0.74fr); align-items: center; gap: clamp(3rem, 9vw, 9rem); }
.hero-copy { max-width: 42rem; }
.eyebrow, .section-index, .section-more, .hero-foot, .hero-tags, .frame-card__top, .frame-card__bottom, .work-card__meta, .spec-board, .process-step > small, .contact-foot, .inquiry-template > span { font-family: var(--mono); letter-spacing: 0.08em; }
.eyebrow, .section-index { display: block; color: var(--warm); font-size: 0.6rem; }
.hero-copy h1 { max-width: 10ch; margin: 1.6rem 0 1.5rem; font-family: var(--display); font-size: clamp(3.8rem, 7.7vw, 7.8rem); font-weight: 650; letter-spacing: -0.13em; line-height: 0.91; word-break: keep-all; }
.hero-copy h1 em, .content-section h2 em, .contact-section h2 em { color: var(--warm); font-style: normal; }
.hero-lede { max-width: 33rem; margin: 0; color: var(--muted); font-size: clamp(0.95rem, 1.35vw, 1.1rem); line-height: 1.9; word-break: keep-all; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.45rem; margin-top: 2.1rem; }
.button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; gap: 0.8rem; padding: 0 1.2rem; border: 1px solid transparent; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.04em; transition: background 220ms ease, color 220ms ease, border-color 220ms ease, transform 220ms var(--ease); }
.button span, .text-link span, .contact-mail span, .section-more span, .mobile-cta span { color: var(--warm); font-size: 1rem; transition: transform 220ms var(--ease); }
.button:hover, .button:focus-visible { transform: translateY(-2px); }
.button:hover span, .text-link:hover span, .contact-mail:hover span, .section-more:hover span, .mobile-cta:hover span { transform: translate(0.18rem, -0.18rem); }
.button--solid { background: var(--paper); color: var(--ink); }
.button--solid span { color: var(--ink); }
.button--solid:hover, .button--solid:focus-visible { background: var(--warm); }
.text-link { display: inline-flex; min-height: 44px; align-items: center; gap: 0.55rem; color: var(--paper); font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.04em; transition: color 220ms ease; }
.text-link:hover { color: var(--warm); }
.text-link span { font-size: 0.9rem; }
.hero-tags { display: flex; flex-wrap: wrap; gap: 0.55rem 1rem; margin: 3.2rem 0 0; padding: 0; list-style: none; color: rgba(243, 240, 233, 0.46); font-size: 0.53rem; }
.hero-tags li + li::before { margin-right: 1rem; color: var(--warm); content: "/"; }
.hero-proof { width: min(100%, 31rem); justify-self: end; }
.frame-card { position: relative; padding: 0.9rem; border: 1px solid rgba(243, 240, 233, 0.26); background: rgba(10, 10, 11, 0.58); box-shadow: 1.2rem 1.2rem 0 rgba(10, 10, 11, 0.24); }
.frame-card::before { position: absolute; z-index: -1; top: 1.15rem; right: -0.75rem; bottom: -0.75rem; left: 1.15rem; border: 1px solid rgba(198, 169, 120, 0.22); content: ""; }
.frame-card__top, .frame-card__bottom { display: flex; justify-content: space-between; gap: 1rem; color: var(--soft); font-size: 0.52rem; line-height: 1.5; }
.frame-card__top { padding: 0.25rem 0.25rem 0.85rem; }
.frame-card__bottom { align-items: flex-start; padding: 0.85rem 0.25rem 0.25rem; }
.frame-card__bottom > span:last-child { max-width: 15rem; text-align: right; }
.frame-card__title { color: var(--paper); font-family: var(--display); font-size: 1.1rem; font-weight: 550; letter-spacing: -0.05em; }
.signal-art { position: relative; overflow: hidden; background: #151518; }
.signal-art--hero { aspect-ratio: 16 / 10; border: 1px solid rgba(243, 240, 233, 0.12); background: radial-gradient(circle at 30% 48%, rgba(198, 169, 120, 0.18), transparent 24%), linear-gradient(135deg, #111114, #1a1715 52%, #0e0e10); }
.signal-art--hero::before, .signal-art--hero::after { position: absolute; content: ""; }
.signal-art--hero::before { inset: 12%; border: 1px solid rgba(243, 240, 233, 0.18); transform: skewX(-19deg); }
.signal-art--hero::after { top: 10%; bottom: 10%; left: 56%; width: 1px; background: var(--warm); opacity: 0.75; }
.signal-art--hero span { position: absolute; display: block; height: 1px; background: var(--paper); opacity: 0.58; transform-origin: left center; }
.signal-art--hero span:nth-child(1) { top: 38%; left: 13%; width: 58%; transform: rotate(-20deg); }
.signal-art--hero span:nth-child(2) { top: 61%; left: 22%; width: 56%; background: var(--warm); transform: rotate(17deg); }
.signal-art--hero span:nth-child(3) { top: 51%; left: 28%; width: 35%; opacity: 0.22; transform: rotate(-4deg); }
.signal-art--hero i { position: absolute; top: 33%; left: 22%; width: 16%; aspect-ratio: 1; border: 1px solid var(--warm); border-radius: 50%; box-shadow: 0 0 0 0.7rem rgba(198, 169, 120, 0.08), 0 0 0 1.4rem rgba(198, 169, 120, 0.04); }
.hero-proof__note { margin: 1.3rem 0 0; color: var(--soft); font-size: 0.74rem; line-height: 1.75; }
.hero-foot { position: absolute; right: clamp(1.25rem, 7vw, 7.5rem); bottom: 2rem; left: clamp(1.25rem, 7vw, 7.5rem); display: flex; justify-content: space-between; color: rgba(243, 240, 233, 0.34); font-size: 0.54rem; }
.intro-rail { width: min(1240px, calc(100% - clamp(2.5rem, 14vw, 15rem))); margin: 0 auto; display: grid; grid-template-columns: 1fr minmax(18rem, 0.68fr); gap: 2rem; padding: 1.5rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--soft); }
.intro-rail > span { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.09em; }
.intro-rail p { max-width: 29rem; margin: 0; color: var(--muted); font-size: 0.83rem; line-height: 1.7; }

.content-section { width: min(1240px, calc(100% - clamp(2.5rem, 14vw, 15rem))); margin: 0 auto; padding: clamp(7rem, 12vw, 11rem) 0; border-bottom: 1px solid var(--line); }
.section-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.66fr); align-items: end; gap: clamp(2rem, 7vw, 7rem); margin-bottom: 4.4rem; }
.section-heading h2 { max-width: 12ch; margin: 1.2rem 0 0; font-family: var(--display); font-size: clamp(3.1rem, 6.2vw, 6.8rem); font-weight: 620; letter-spacing: -0.13em; line-height: 0.92; }
.section-heading > p { max-width: 31rem; margin: 0; color: var(--muted); font-size: 0.95rem; line-height: 1.9; word-break: keep-all; }
.service-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); background: var(--line); }
.service-card { min-height: 15.5rem; display: flex; flex-direction: column; padding: 1.35rem; background: var(--ink-soft); transition: background 260ms ease, color 260ms ease; }
.service-card:nth-child(-n + 2) { grid-column: span 3; }
.service-card:nth-child(n + 3) { grid-column: span 2; }
.service-card:hover, .service-card:focus-visible { background: #1b1b1f; }
.service-card__number { color: var(--warm); font-family: var(--mono); font-size: 0.58rem; }
.service-card h3 { max-width: 15ch; margin: 4.4rem 0 0.75rem; font-family: var(--display); font-size: clamp(1.15rem, 1.8vw, 1.55rem); font-weight: 600; letter-spacing: -0.07em; line-height: 1.15; }
.service-card p { max-width: 25rem; margin: 0; color: var(--muted); font-size: 0.82rem; line-height: 1.75; }
.service-card__link { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: auto; padding-top: 1.7rem; color: var(--warm); font-family: var(--mono); font-size: 0.57rem; letter-spacing: 0.03em; }
.work-section { padding-bottom: 9rem; }
.work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.1rem, 2.3vw, 2.25rem); }
.work-card { min-width: 0; }
.work-art { position: relative; aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: 1.25rem; border: 1px solid var(--line); background: #151518; }
.work-art::before, .work-art::after { position: absolute; content: ""; }
.work-art::before { inset: 9%; border: 1px solid rgba(243, 240, 233, 0.14); }
.work-art::after { right: 9%; bottom: 11%; left: 9%; height: 1px; background: rgba(243, 240, 233, 0.2); }
.work-art > span { position: absolute; z-index: 2; top: 1rem; left: 1rem; color: rgba(243, 240, 233, 0.54); font-family: var(--mono); font-size: 0.52rem; letter-spacing: 0.1em; }
.work-art > i, .work-art > b { position: absolute; display: block; }
.work-art--optics { background: radial-gradient(circle at 30% 55%, rgba(198, 169, 120, 0.18), transparent 26%), #151518; }
.work-art--optics > i { top: 27%; left: 19%; width: 25%; aspect-ratio: 1; border: 1px solid var(--warm); border-radius: 50%; box-shadow: 0 0 0 0.8rem rgba(198, 169, 120, 0.08), 0 0 0 1.6rem rgba(198, 169, 120, 0.04); }
.work-art--optics > b { top: 49%; right: 15%; width: 35%; height: 1px; background: var(--paper); opacity: 0.7; transform: rotate(-27deg); transform-origin: right center; }
.work-art--sound { background: linear-gradient(135deg, rgba(130, 156, 173, 0.1), transparent 60%), #12171b; }
.work-art--sound > i { top: 48%; left: 13%; width: 74%; height: 19%; border-top: 1px solid var(--paper); border-bottom: 1px solid rgba(243, 240, 233, 0.3); border-radius: 50%; transform: skewX(-18deg); }
.work-art--sound > b { top: 36%; left: 24%; width: 52%; height: 25%; border-top: 1px solid var(--warm); border-bottom: 1px solid rgba(198, 169, 120, 0.3); border-radius: 50%; transform: skewX(18deg); }
.work-art--motion { background: linear-gradient(135deg, rgba(198, 169, 120, 0.12), transparent 48%), #181513; }
.work-art--motion > i { top: 27%; left: 18%; width: 36%; aspect-ratio: 1; border: 1px solid var(--warm); transform: rotate(-18deg); }
.work-art--motion > b { right: 15%; bottom: 26%; width: 46%; height: 1px; background: var(--paper); box-shadow: -1.2rem -0.7rem 0 rgba(243, 240, 233, 0.4), -2.4rem -1.4rem 0 rgba(243, 240, 233, 0.17); transform: rotate(-18deg); transform-origin: right center; }
.work-card__meta { display: flex; justify-content: space-between; gap: 1rem; color: var(--soft); font-size: 0.52rem; }
.work-card h3 { margin: 0.85rem 0 0.55rem; font-family: var(--display); font-size: 1.6rem; font-weight: 600; letter-spacing: -0.07em; }
.work-card > p { max-width: 24rem; min-height: 3.2rem; margin: 0; color: var(--muted); font-size: 0.84rem; line-height: 1.75; }
.work-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin: 1.6rem 0 0; padding-top: 0.85rem; border-top: 1px solid var(--line); }
.work-card dl div { display: grid; gap: 0.35rem; }
.work-card dt { color: var(--warm); font-family: var(--mono); font-size: 0.5rem; }
.work-card dd { margin: 0; color: var(--soft); font-size: 0.68rem; line-height: 1.5; }

.process-section { max-width: 1240px; }
.process-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.process-step { min-height: 18rem; display: flex; flex-direction: column; padding: 1.25rem 1.25rem 1.4rem 0; border-right: 1px solid var(--line); }
.process-step + .process-step { padding-left: 1.25rem; }
.process-step:last-child { border-right: 0; }
.process-step > span { color: var(--warm); font-family: var(--mono); font-size: 0.58rem; }
.process-step h3 { margin: 4.3rem 0 0.75rem; font-family: var(--display); font-size: 1.35rem; font-weight: 600; letter-spacing: -0.06em; }
.process-step p { margin: 0; padding-right: 1rem; color: var(--muted); font-size: 0.82rem; line-height: 1.8; word-break: keep-all; }
.process-step > small { display: block; margin-top: auto; padding-top: 1.3rem; color: var(--soft); font-size: 0.5rem; }
.craft-grid, .about-grid, .contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.84fr); align-items: start; gap: clamp(3rem, 10vw, 10rem); }
.craft-section .section-heading, .about-section .section-heading { display: block; margin: 0; }
.craft-section .section-heading > p { margin-top: 2rem; }
.craft-section .text-link { margin-top: 1.3rem; }
.spec-board { margin-top: 1.8rem; border-top: 1px solid var(--line); }
.spec-board__head, .spec-row { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 1.5rem; border-bottom: 1px solid var(--line); }
.spec-board__head { grid-template-columns: 1fr auto; padding: 0 0 0.9rem; color: var(--soft); font-size: 0.52rem; }
.spec-row { padding: 1.15rem 0; color: var(--muted); font-family: var(--sans); font-size: 0.84rem; letter-spacing: 0; line-height: 1.5; }
.spec-row strong { color: var(--warm); font-family: var(--mono); font-size: 0.52rem; font-weight: 400; letter-spacing: 0.08em; }
.guide-cluster-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); background: var(--line); }
.guide-cluster { min-height: 14rem; display: flex; flex-direction: column; padding: 1.3rem; background: var(--ink-soft); transition: background 240ms ease; }
.guide-cluster:hover, .guide-cluster:focus-visible { background: #1b1b1f; }
.guide-cluster > span { color: var(--warm); font-family: var(--mono); font-size: 0.52rem; }
.guide-cluster h3 { margin: 3rem 0 0.7rem; font-family: var(--display); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.06em; }
.guide-cluster p { margin: 0; color: var(--muted); font-size: 0.8rem; line-height: 1.75; }
.guide-cluster b { margin-top: auto; padding-top: 1.25rem; color: var(--warm); font-family: var(--mono); font-size: 0.56rem; font-weight: 400; }
.section-more { display: inline-flex; align-items: center; gap: 0.55rem; margin-top: 2rem; color: var(--paper); font-size: 0.6rem; transition: color 220ms ease; }
.section-more:hover { color: var(--warm); }
.about-copy { padding-top: 0.3rem; }
.about-copy p { max-width: 35rem; margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.95; word-break: keep-all; }
.about-copy p + p { margin-top: 1.5rem; }
.faq-section { padding-bottom: clamp(7rem, 11vw, 10rem); }
.faq-list { max-width: 54rem; margin-left: auto; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { position: relative; display: flex; min-height: 4.5rem; align-items: center; padding: 0 3rem 0 0; color: var(--paper); cursor: pointer; font-family: var(--display); font-size: 1.1rem; font-weight: 550; letter-spacing: -0.05em; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { position: absolute; right: 0; color: var(--warm); content: "+"; font-family: var(--mono); font-size: 1.1rem; font-weight: 400; transition: transform 220ms var(--ease); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { max-width: 42rem; margin: -0.2rem 0 1.5rem; color: var(--muted); font-size: 0.88rem; line-height: 1.85; }
.contact-section { width: min(1240px, calc(100% - clamp(2.5rem, 14vw, 15rem))); margin: 0 auto; padding: clamp(7rem, 13vw, 12rem) 0 3rem; }
.contact-section h2 { max-width: 10ch; margin: 1.2rem 0 0; font-family: var(--display); font-size: clamp(3.5rem, 7.4vw, 7.8rem); font-weight: 620; letter-spacing: -0.14em; line-height: 0.9; }
.contact-panel { max-width: 31rem; padding-top: 0.6rem; }
.contact-panel > p { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.9; word-break: keep-all; }
.contact-mail { display: inline-flex; min-height: 54px; align-items: center; gap: 0.65rem; margin-top: 2rem; padding-bottom: 0.55rem; border-bottom: 1px solid var(--warm); color: var(--paper); font-family: var(--mono); font-size: clamp(0.9rem, 1.8vw, 1.15rem); letter-spacing: -0.03em; transition: color 220ms ease, border-color 220ms ease; }
.contact-mail:hover { color: var(--warm); border-color: var(--paper); }
.inquiry-template { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.inquiry-template > span { color: var(--warm); font-size: 0.52rem; }
.inquiry-template p { margin: 0.7rem 0 0; color: var(--soft); font-family: var(--mono); font-size: 0.62rem; line-height: 1.7; }
.contact-foot { display: flex; justify-content: space-between; gap: 1.5rem; margin-top: 8rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--soft); font-size: 0.52rem; }
.site-footer { width: min(1240px, calc(100% - clamp(2.5rem, 14vw, 15rem))); margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2rem; padding: 1.5rem 0 3rem; color: var(--soft); }
.wordmark--footer { color: var(--paper); font-size: 0.95rem; }
.site-footer nav { display: flex; gap: 1.3rem; }
.site-footer nav a, .footer-email { min-height: 38px; display: inline-flex; align-items: center; color: var(--soft); font-family: var(--mono); font-size: 0.54rem; letter-spacing: 0.07em; transition: color 220ms ease; }
.site-footer nav a:hover, .footer-email:hover { color: var(--warm); }
.footer-email { justify-self: end; }
.mobile-cta { display: none; }

.error-page { width: min(100% - 3rem, 960px); min-height: 100svh; display: flex; margin: 0 auto; flex-direction: column; justify-content: center; padding: 6rem 0; }
.error-page h1 { max-width: 12ch; margin: 1.8rem 0 1.4rem; font-family: var(--display); font-size: clamp(3.5rem, 10vw, 7rem); font-weight: 680; line-height: 0.94; letter-spacing: -0.1em; }
.error-page h1 em { color: var(--warm); font-style: normal; }
.error-page > p:not(.fallback-kicker) { max-width: 30rem; color: var(--muted); font-size: 1rem; line-height: 1.8; }
.fallback-kicker { color: var(--warm); font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.11em; }
.fallback-link { display: inline-flex; min-height: 44px; align-items: center; margin-top: 0.8rem; color: var(--warm); font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.05em; }

html.js .reveal { opacity: 0; transform: translateY(1.1rem); transition: opacity 650ms ease, transform 850ms var(--ease); }
html.js .reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 1050px) {
  .header-meta { display: none; }
  .hero-grid { gap: 3rem; }
  .content-section, .contact-section, .site-footer { width: min(100% - 5rem, 1240px); }
  .intro-rail { width: min(100% - 5rem, 1240px); }
}

@media (max-width: 760px) {
  html { scroll-behavior: smooth; }
  .site-header { grid-template-columns: 1fr auto; height: 64px; padding: 0 1.25rem; }
  .site-header > .desktop-nav { display: none; }
  .wordmark { font-size: 1rem; }
  .wordmark-copy small { display: none; }
  .header-actions { gap: 0.75rem; }
  .header-cta { display: none; }
  .menu-toggle { display: inline-flex; min-height: 44px; align-items: center; color: var(--paper); font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.08em; }
  .mobile-nav { position: fixed; top: 64px; right: 1rem; left: 1rem; display: grid !important; gap: 0 !important; max-height: 0; overflow: hidden; padding: 0 1rem; background: rgba(17, 17, 20, 0.98); border: 1px solid transparent; opacity: 0; pointer-events: none; transform: translateY(-0.5rem); transition: max-height 330ms var(--ease), opacity 220ms ease, transform 330ms var(--ease), border-color 330ms ease; }
  .mobile-nav.is-open { max-height: 24rem; padding-top: 0.35rem; padding-bottom: 0.35rem; border-color: var(--line); opacity: 1; pointer-events: auto; transform: none; }
  .mobile-nav a { min-height: 48px !important; border-bottom: 1px solid var(--line-soft); }
  .mobile-nav a:last-child { border-bottom: 0; }
  .mobile-nav__cta { color: var(--warm) !important; }
  .hero-section { min-height: max(760px, 100svh); align-items: flex-start; padding: 8.8rem 1.25rem 5rem; }
  .world-layer { opacity: 0.3; }
  .world-scrim { background: linear-gradient(180deg, rgba(10, 10, 11, 0.72), rgba(10, 10, 11, 0.88)); }
  .hero-grid { display: block; }
  .hero-copy h1 { max-width: 9ch; margin-top: 1.35rem; font-size: clamp(3.15rem, 15.5vw, 5.2rem); }
  .hero-lede { font-size: 0.9rem; line-height: 1.82; }
  .hero-actions { display: grid; gap: 0.8rem; justify-items: start; margin-top: 1.8rem; }
  .hero-tags { margin-top: 2.35rem; line-height: 1.8; }
  .hero-proof { width: min(100%, 29rem); margin-top: 4rem; }
  .frame-card__top, .frame-card__bottom { font-size: 0.47rem; }
  .frame-card__bottom > span:last-child { max-width: 12rem; }
  .hero-proof__note { font-size: 0.68rem; }
  .hero-foot { right: 1.25rem; bottom: 1.35rem; left: 1.25rem; font-size: 0.48rem; }
  .intro-rail, .content-section, .contact-section, .site-footer { width: min(100% - 2.5rem, 1240px); }
  .intro-rail { display: block; padding: 1.25rem 0; }
  .intro-rail p { margin-top: 0.65rem; font-size: 0.78rem; }
  .content-section { padding: 5.5rem 0; }
  .section-heading, .craft-grid, .about-grid, .contact-grid { display: block; }
  .section-heading { margin-bottom: 2.7rem; }
  .section-heading h2 { margin-top: 1rem; font-size: clamp(2.9rem, 14.5vw, 5.1rem); }
  .section-heading > p { margin-top: 1.65rem; font-size: 0.86rem; line-height: 1.85; }
  .service-grid { display: block; }
  .service-card, .service-card:nth-child(-n + 2), .service-card:nth-child(n + 3) { min-height: 14.2rem; display: flex; grid-column: auto; border-bottom: 1px solid var(--line); }
  .service-card h3 { margin-top: 3rem; font-size: 1.35rem; }
  .work-grid { display: block; }
  .work-card + .work-card { margin-top: 3.7rem; }
  .work-card > p { min-height: 0; }
  .process-list { display: block; }
  .process-step, .process-step + .process-step { min-height: 0; padding: 1.1rem 0 1.35rem; border-right: 0; border-bottom: 1px solid var(--line); }
  .process-step h3 { margin-top: 2.1rem; }
  .process-step p { padding-right: 0; }
  .craft-grid .section-heading { margin-bottom: 2.5rem; }
  .spec-board { margin-top: 0; }
  .spec-board__head, .spec-row { grid-template-columns: 5.2rem minmax(0, 1fr); gap: 0.8rem; }
  .spec-board__head { grid-template-columns: 1fr auto; }
  .spec-row { font-size: 0.76rem; }
  .guide-cluster-grid { display: block; }
  .guide-cluster { min-height: 12rem; border-bottom: 1px solid var(--line); }
  .guide-cluster h3 { margin-top: 2.5rem; }
  .about-copy { padding-top: 0; }
  .about-copy p { font-size: 0.88rem; line-height: 1.85; }
  .faq-item summary { min-height: 4.2rem; font-size: 0.98rem; line-height: 1.35; }
  .faq-item p { font-size: 0.82rem; line-height: 1.8; }
  .contact-section { padding: 5.5rem 0 8.5rem; }
  .contact-section h2 { font-size: clamp(3.2rem, 15.5vw, 5.6rem); }
  .contact-panel { margin-top: 3rem; }
  .contact-panel > p { font-size: 0.88rem; line-height: 1.85; }
  .contact-mail { font-size: 0.9rem; }
  .contact-foot { display: block; margin-top: 5rem; font-size: 0.48rem; line-height: 1.8; }
  .contact-foot span + span { display: block; margin-top: 0.45rem; }
  .site-footer { display: block; padding-bottom: 5.5rem; }
  .site-footer nav { flex-wrap: wrap; gap: 0.2rem 1rem; margin-top: 1.5rem; }
  .footer-email { margin-top: 1.1rem; }
  .mobile-cta { position: fixed; z-index: 35; right: 0; bottom: 0; left: 0; display: block; padding: 0.65rem 1.25rem calc(0.65rem + env(safe-area-inset-bottom)); background: rgba(10, 10, 11, 0.92); border-top: 1px solid var(--line); backdrop-filter: blur(12px); }
  .mobile-cta a { min-height: 48px; display: flex; align-items: center; justify-content: space-between; color: var(--paper); font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.04em; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  .site-header nav a::after, .button, .button span, .text-link span, .contact-mail span, .section-more span, .mobile-cta span, .mobile-nav { transition-duration: 0.001ms; }
}