.site-header nav a.security-service-link { display:inline; }
/* latin-ext */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/dm-mono-400-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/dm-mono-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/dm-mono-500-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/dm-mono-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(assets/fonts/dm-sans-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(assets/fonts/dm-sans.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* Shared material and motion language. */
:root {
  --surface: #080e16;
  --ink: #edf3f8;
  --orange: #ed955d;
  --warm: var(--orange);
  --line: #8a9eb32e;
  --muted: #a2b1c1;
  --mono: 'DM Mono', monospace;
  --serif: 'DM Sans', sans-serif;
  --gutter: clamp(24px, 5.2vw, 100px);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-press: .12s;
  --dur-state: .22s;
  --dur-move: .6s;
  --dur-reveal: .9s;
  --dur-scene: 1.8s;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; color-scheme: dark; }
body { margin: 0; background: var(--surface); color: var(--ink); font-family: 'DM Sans', sans-serif; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3 { font-weight: 700; letter-spacing: -.06em; line-height: 1.02; }
em { font-family: inherit; font-style: normal; font-weight: inherit; }
::selection { background: var(--orange); color: #080e16; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 6px; }
.mono { font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .045em; text-transform: uppercase; line-height: 1.65; }
.section-shell { padding-inline: var(--gutter); max-width: 1800px; margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 20px; top: -100px; z-index: 100; background: var(--ink); color: var(--surface); padding: 12px 20px; }
.skip-link:focus { top: 20px; }

/* Solid navigation hardware, with no translucent paper layer. */
.site-header { position: fixed; inset: 0 0 auto; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px var(--gutter); background: #080e16; border-bottom: 1px solid transparent; transition: border-color var(--dur-state) var(--ease-out); }
.site-header.is-scrolled { border-color: var(--line); }
.brand-emblem { width:25px; height:25px; margin-right:9px; flex:none; vertical-align:-3px; }
.motion-label { white-space:nowrap; }
.wordmark { display: inline-flex; align-items: baseline; font-family: var(--mono); font-weight: 500; font-size: 25px; letter-spacing: -.08em; }
.brand-slash { display: inline-block; width: 4px; height: 14px; margin-left: 6px; background: var(--orange); transform: skewX(-18deg); }
.site-header nav { display: flex; gap: 34px; margin-left: auto; font-size: 12px; }
.site-header nav a { position: relative; }
.site-header nav a:after { content: ''; position: absolute; bottom: -6px; left: 0; width: 100%; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-state) var(--ease-out); }
.site-header nav a:hover:after, .site-header nav a[aria-current]:after { transform: scaleX(1); }
.site-header nav span { margin-left: 8px; }
.motion-toggle { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 4px; background: #131e2b; color: inherit; padding: 10px 13px; font-family: var(--mono); font-size: 9px; text-transform: uppercase; cursor: pointer; margin-left: 22px; transition: transform var(--dur-press) var(--ease-out); }
.motion-toggle:active { transform: scale(.97); }
.motion-toggle[hidden] { display: none; }
.toggle-light { width: 5px; height: 5px; background: var(--orange); }
.motion-toggle[aria-pressed=true] .toggle-light { background: var(--muted); }
.reading-progress { position: fixed; inset: 0 0 auto; height: 2px; z-index: 50; pointer-events: none; }
.reading-progress span { display: block; width: 100%; height: 100%; background: var(--orange); transform: scaleX(0); transform-origin: left; }

/* An illuminated, machined structure occupies the hero's depth. */
.hero { min-height: 900px; min-height: 100svh; max-width: none; position: relative; display: flex; flex-direction: column; padding-top: 145px; padding-bottom: 68px; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse at 78% 42%, #1b304647 0%, transparent 52%), linear-gradient(130deg, #080e16, #0e1928 65%, #070c13); }
.hero:before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(#91a8c306 1px, transparent 1px), linear-gradient(90deg, #91a8c306 1px, transparent 1px); background-size: 120px 120px; mask-image: linear-gradient(90deg, transparent 35%, #000); pointer-events: none; }
.hero-topline { display: flex; justify-content: space-between; position: relative; z-index: 2; color: var(--muted); }
.hero-topline>span:first-child { display: flex; align-items: center; gap: 12px; }
.signature-tick { display: inline-block; width: 18px; height: 2px; background: var(--orange); }
.hero-composition { position: relative; flex: 1; display: flex; align-items: center; min-height: 540px; }
.hero h1 { position: relative; z-index: 2; font-size: clamp(74px, 8.2vw, 148px); max-width: 100%; pointer-events: none; }
.hero h1 em { color: #9ab1c9; }
.headline-line { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.08em; }
.headline-line>span { display: block; }
.hero-frame { position: absolute; right: -1%; top: -10%; width: clamp(380px, 43vw, 730px); aspect-ratio: 640/680; pointer-events: none; }

.hero-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; position: relative; z-index: 3; padding-bottom: 42px; }
.hero-bottom>p { font-size: 16px; color: #bdcad7; }
.scroll-link { display: flex; align-items: center; gap: 14px; }
.scroll-line { height: 42px; width: 2px; background: var(--orange); margin-right: 6px; transform-origin: top; }
.scroll-link>span:last-child { font-size: 17px; }
.edition { color: var(--muted); text-align: right; font-size: 9px; }
.hero-index { position: absolute; left: var(--gutter); bottom: 28px; color: var(--muted); font-size: 9px; }

.story { background: radial-gradient(ellipse at 85% 45%, #18344966, transparent 60%), #09131f; color: var(--ink); position: relative; overflow: hidden; }
.story-stage { padding-top: 48px; padding-bottom: 36px; }
.story-top, .story-bottom { display: flex; justify-content: space-between; align-items: center; color: var(--muted); }
.story-top { padding-bottom: 32px; border-bottom: 1px solid var(--line); }
.story-layout { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 6vw; padding-block: 80px; }
.story-copy { position: relative; }
.story-step { margin-bottom: 70px; }
.story-step:last-child { margin-bottom: 0; }
.step-kicker { color: var(--orange); display: block; margin-bottom: 24px; }
.story-step h3 { font-size: clamp(54px, 5.7vw, 100px); margin-bottom: 30px; }
.story-step h3 em { color: #91b7cb; }
.story-step p { max-width: 400px; font-size: 17px; color: #b4c3d1; line-height: 1.65; }
.text-link { display: inline-flex; gap: 25px; margin-top: 24px; border-bottom: 2px solid var(--orange); padding-bottom: 10px; font-size: 10px; }
/* Unlabeled kinetic sculpture, with a still artwork as the baseline. */
.story-art { position:relative; width:100%; aspect-ratio:1; max-width:650px; justify-self:center; isolation:isolate; }
.story-art:before { content:''; position:absolute; inset:10%; background:radial-gradient(ellipse,#4963751f,transparent 65%); z-index:-1; }
.sculpture-poster,.sculpture-stage { position:absolute; inset:0; width:100%; height:100%; }
.sculpture-poster { object-fit:contain; transition:opacity var(--dur-state) var(--ease-out); }
.sculpture-stage { visibility:hidden; }.sculpture-stage canvas { display:block; width:100%; height:100%; pointer-events:none; }
.story-art.is-rendered .sculpture-stage { visibility:visible; }.story-art.is-rendered .sculpture-poster { opacity:0; }
.story-bottom { border-top: 1px solid var(--line); padding-top: 22px; font-size: 9px; gap: 36px; }
.story-track { width: 180px; height: 2px; background: var(--line); }
.story-track span { display: block; width: 100%; height: 100%; background: var(--orange); transform-origin: left; }
.story-animated .story-stage { height: 100svh; min-height: 720px; display: flex; flex-direction: column; }
.story-animated .story-layout { flex: 1; padding-block: 40px; }
.story-animated .story-copy { height: 420px; }
.story-animated .story-step { position: absolute; inset: 0; margin: 0; display: flex; flex-direction: column; justify-content: center; }
.story-animated .story-step:not(:first-child) { visibility: hidden; }
.story-animated .story-track span { transform: scaleX(0); }

/* The proof transition opens a deep blue architectural chamber. */
.work-heading { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 34px; min-height: 85svh; align-content: center; padding-top: 90px; padding-bottom: 100px; isolation: isolate; overflow: hidden; max-width: none; background: #0b1420; }
.work-heading>p, .work-heading h2 { z-index: 2; }
.work-heading>p.mono { grid-column: 1/-1; color: var(--muted); }
.work-heading h2 { font-size: clamp(80px,9.5vw,165px); grid-column: 1/-1; position: relative; width: max-content; max-width: 100%; }
.proof-line { display: block; }.proof-line em { color: #a5c5da; }
.proof-wash { position: absolute; inset: 0; background: linear-gradient(125deg,#132638,#173446 65%,#0c1a29); z-index: -1; clip-path: inset(0 100% 0 0); pointer-events: none; }
.work-intro { grid-column: 2; justify-self: end; align-self: end; font-size: 15px; padding-bottom: 10px; color: #c0d1df; line-height: 1.6; }
.proof-caption { position: absolute; bottom: 38px; left: var(--gutter); font-size: 9px; color: #b6c9d8; }

/* Project worlds use dense color, restrained light, and substantial frames. */
.case { --accent: #d8b77a; --scene-surface: #101918; position: relative; max-width: none; background: radial-gradient(ellipse at 85% 45%,#5269441a,transparent 60%),var(--scene-surface); padding-bottom: 65px; isolation: isolate; overflow: clip; }
.case-dagon { --accent: #74c7bc; --scene-surface: #09212a; }.case-stateroom { --accent: #9fbbd8; --scene-surface: #111b29; }.case-soul { --accent: #d4e784; --scene-surface: #172214; }
.case-top { position: relative; z-index: 3; display: flex; justify-content: space-between; padding-block: 28px; border-top: 1px solid var(--line); font-size: 10px; }
.case-top>span:first-child { display: flex; gap: 10px; align-items: center; }.case-top i { width: 6px; height: 6px; background: var(--accent); }.case-top>span:last-child { color: var(--muted); }
.case-body { display: grid; grid-template-columns: .9fr 1.1fr; gap: 6vw; align-items: center; position: relative; z-index: 2; min-height: 660px; padding-top: 12px; padding-bottom: 35px; }
.case-copy { padding-block: 28px; }.case-category { font-size: 9px; color: var(--muted); display: block; margin-bottom: 30px; }
.case-copy h3 { font-size: clamp(48px,5.1vw,88px); margin-bottom: 28px; }.case-copy h3 em { color: var(--accent); }
.case-copy p { max-width: 340px; font-size: 16px; color: #b8c7d0; line-height: 1.7; }
.project-link { display: inline-flex; align-items: center; gap: 24px; font-size: 14px; margin-top: 36px; font-weight: 500; }
.link-disc { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #91a4b54d; border-radius: 4px; background: #ffffff06; font-size: 20px; transition: background-color var(--dur-state) var(--ease-out), color var(--dur-state) var(--ease-out); }
.project-link:hover .link-disc { background: var(--accent); color: #080e16; }.project-link:active .link-disc { transform: scale(.95); }
.case-art { height: clamp(460px,43vw,720px); position: relative; overflow: hidden; border: 1px solid #7c98aa38; border-radius: 6px; display: grid; place-items: center; isolation: isolate; box-shadow: 0 35px 70px -25px #0009, inset 0 1px 0 #cadce333; }
.case-art:after { content: ''; position: absolute; inset: 0; z-index: 4; box-shadow: inset 0 1px 0 #ccdce340, inset 0 -1px 0 #0008; pointer-events: none; }
/* Objects sit in a lighting chamber rather than a framed illustration card. */
.art-inkwell { color: #d8b77a; }.art-dagon { color: #9dd8ca; }
.art-stateroom { color: #9bb9d3; }.art-soul { color: #d4e784; }
.case-number { position: absolute; left: -.035em; bottom: -.15em; font-size: clamp(230px,28vw,480px); line-height: 1; font-weight: 700; color: #9db4c407; z-index: 0; pointer-events: none; letter-spacing: -.08em; }
.case-meter { position: absolute; bottom: 5px; left: 0; right: 0; height: 2px; background: #8a9eb322; z-index: 3; }.case-meter span { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); }

.note { padding-top: 115px; padding-bottom: 130px; }.note>p { color: var(--muted); margin-bottom: 55px; }.note h2 { font-size: clamp(54px,7.2vw,125px); }.note h2>span { display: block; }.note h2 em { color: #8baac3; }
.note-bottom { display: flex; align-items: center; gap: 28px; margin-top: 60px; }.note-rule { width: 3px; height: 44px; flex: none; background: var(--orange); }.note-bottom>p { font-size: 14px; color: var(--muted); }.note-bottom>.mono { margin-left: auto; color: var(--muted); font-size: 9px; text-align: right; }
.contact { background: #102237; color: var(--ink); padding-block: 48px 80px; position: relative; overflow: hidden; }.contact-is-animated { background: var(--surface); }.contact-wash { position: absolute; inset: 0; background: linear-gradient(135deg,#173549,#101f32 60%,#0b1623); pointer-events: none; }.contact>.section-shell { position: relative; z-index: 1; }
.contact-top { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 24px; font-size: 10px; color: #b8cbd9; }.contact h2 { font-size: clamp(90px,12vw,210px); margin-block: 70px; position: relative; }.contact h2 em { color: #a6c4d7; }.contact-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; }.contact-bottom p { font-size: 15px; color: #b8cbd9; }
.contact-link { font-size: clamp(20px,2vw,32px); background: #e6edf2; color: #101c28; border-radius: 4px; padding: 18px 24px; display: flex; gap: 65px; font-weight: 600; letter-spacing: -.03em; transition: background-color var(--dur-state) var(--ease-out); }.contact-link:hover { background: var(--orange); }.contact-link span { transition: transform var(--dur-state) var(--ease-out); }.contact-link:hover span { transform: translate(4px,-4px); }
footer { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding-block: 38px; }footer>.mono { font-size: 9px; color: var(--muted); }footer>div { display: flex; gap: 26px; font-size: 9px!important; }footer a:hover { color: var(--orange); }
.chapter-curtain { position: fixed; inset: 0; z-index: 80; background: linear-gradient(125deg,#0b1420,#1b3346); color: var(--ink); display: flex; flex-direction: column; justify-content: center; padding: var(--gutter); visibility: hidden; transform: translateY(100%); pointer-events: none; }.curtain-index { color: #a2b8c9; font-size: 10px; margin-bottom: 35px; }.curtain-title { font-size: clamp(50px,9vw,145px); font-weight: 700; letter-spacing: -.06em; line-height: 1; }.curtain-rule { width: 120px; height: 3px; background: var(--orange); margin-top: 45px; }
.motion-off { scroll-behavior: auto; }.motion-off *, .motion-off *:before, .motion-off *:after { transition-duration: 0s!important; }
@keyframes hero-safety { to { opacity: 1; visibility: visible; transform: translate(0,0); } }
.motion-on .headline-line>span { animation: hero-safety .01s 2.5s forwards; }

@media(min-width:1800px) { .site-header { padding-inline: calc((100vw - 1800px)/2 + var(--gutter)); } }
@media(min-width:1001px) { .motion-on .case { min-height: 140svh; padding-bottom: 0; }.motion-on .case-body { position: sticky; top: 90px; height: calc(100svh - 130px); min-height: 600px; padding-top: 0; }.motion-on .case-art { height: min(76svh,760px); min-height: 480px; }.motion-on .case-top { height: 90px; } }
@media(max-width:1000px) {
  .site-header nav { gap: 20px; }.site-header nav a:nth-child(2) { display: none; }
  .hero-composition { min-height: 540px; align-items: flex-end; padding-bottom: 45px; }.hero h1 { font-size: clamp(70px,9.4vw,100px); }.hero-frame { right: calc(50% - 180px); top: -25px; width: 360px; }
  .story-layout { gap: 30px; }.story-step h3 { font-size: 56px; }.story-step p { font-size: 15px; }.story-animated .story-copy { height: 360px; }
  .work-heading { min-height: 700px; }.case-body { grid-template-columns: 1fr; gap: 35px; min-height: 560px; }.case-copy h3 { font-size: 46px; }.case-art { height: 470px; }.case-copy p { font-size: 14px; }
  .case-category { font-size: 8px; }
}
@media(max-width:700px) {
  :root { --gutter: 24px; }html { scroll-padding-top: 86px; }
  .site-header { padding-block: 18px; gap: 16px; }.wordmark { font-size: 23px; }.site-header nav { gap: 12px; font-size: 10px; }.site-header nav a:nth-child(3) { display: none; }.motion-toggle { margin-left: 0; padding: 8px 9px; font-size: 8px; gap: 5px; }
  .hero { padding-top: 112px; padding-bottom: 70px; min-height: 800px; min-height: 100svh; }.hero-topline { font-size: 9px; }.hero-topline>span:last-child { display: none; }.hero-composition { min-height: 510px; align-items: flex-end; padding-bottom: 55px; }.hero h1 { font-size: clamp(43px,10.1vw,68px); letter-spacing: -.06em; }.hero-frame { width: 355px; right: -30px; top: -35px; }
  .hero-bottom { padding-bottom: 16px; gap: 20px; align-items: center; }.hero-bottom>p { font-size: 13px; }.edition { display: none; }.scroll-link { font-size: 8px; gap: 8px; }.scroll-line { height: 32px; }.hero-index { font-size: 8px; }
  .story-stage { padding-top: 35px; padding-bottom: 28px; }.story-top { font-size: 9px; padding-bottom: 24px; }.story-layout { display: flex; flex-direction: column-reverse; gap: 46px; padding-block: 45px; }.story-art { width: 330px; max-width: 100%; flex: none; }.story-copy { width: 100%; }.story-step { margin-bottom: 55px; }.story-step h3 { font-size: clamp(44px,10vw,68px); margin-bottom: 22px; }.story-step p { font-size: 15px; max-width: 420px; }.step-kicker { font-size: 9px; margin-bottom: 16px; }.story-bottom { font-size: 8px; gap: 16px; }.story-track { width: 80px; }
  .work-heading { display: block; min-height: 620px; padding-top: 75px; padding-bottom: 95px; }.work-heading>p.mono { font-size: 9px; margin-bottom: 30px; }.work-heading h2 { font-size: clamp(57px,13vw,88px); margin-bottom: 28px; }.work-intro { font-size: 13px; }.proof-caption { font-size: 8px; bottom: 30px; }
  .case { padding-bottom: 55px; }.case-top { font-size: 8px; padding-block: 22px; gap: 8px; }.case-top>span:last-child { font-size: 7px; }.case-body { grid-template-columns: 1fr; gap: 30px; min-height: 0; padding-bottom: 30px; }.case-copy { padding-top: 18px; padding-bottom: 0; }.case-copy h3 { font-size: clamp(43px,10vw,62px); margin-bottom: 22px; }.case-category { font-size: 8px; margin-bottom: 20px; }.case-copy p { max-width: 420px; font-size: 14px; }.project-link { margin-top: 24px; }.case-art { height: 410px; }
  .case-number { font-size: 220px; bottom: 370px; left: auto; right: 10px; }
  .note { padding-top: 75px; padding-bottom: 80px; }.note>p { font-size: 9px; margin-bottom: 35px; }.note h2 { font-size: clamp(34px,8.4vw,58px); }.note-bottom { flex-wrap: wrap; margin-top: 35px; gap: 18px; }.note-rule { height: 30px; }.note-bottom>p { font-size: 12px; }.note-bottom>.mono { width: 100%; text-align: left; margin-left: 21px; font-size: 8px; }
  .contact { padding-block: 35px 45px; }.contact-top { font-size: 8px; }.contact-top>span:last-child { display: none; }.contact h2 { font-size: clamp(53px,13.6vw,92px); margin-block: 55px; }.contact-bottom { align-items: flex-start; flex-direction: column; gap: 30px; }.contact-bottom p { font-size: 13px; }.contact-link { font-size: 21px; gap: 55px; padding: 16px 20px; }
  footer { flex-wrap: wrap; padding-block: 28px; gap: 18px; }footer>.mono { font-size: 8px; }footer>div { width: 100%; justify-content: space-between; font-size: 8px!important; gap: 15px; }
}
@media(max-width:360px) { .hero h1 { font-size: 38px; }.hero-bottom { flex-direction: column; align-items: flex-start; gap: 18px; }.scroll-line { height: 20px; }.hero-composition { min-height: 470px; }.hero-frame { width: 310px; right: -40px; top: -15px; }.case-copy h3 { font-size: 40px; }.contact h2 { font-size: 46px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto; }*,*:before,*:after { animation-duration: .01ms!important; transition-duration: .01ms!important; } }

/* A cohesive collection of physical artifacts. */
.material-art { position:relative; isolation:isolate; }
.material-poster,.material-stage { position:absolute; inset:0; width:100%; height:100%; }
.material-poster { object-fit:contain; transition:opacity var(--dur-state) var(--ease-out); }
.material-stage { visibility:hidden; }.material-stage canvas { display:block; width:100%; height:100%; pointer-events:none; }
.material-art.has-material .material-stage { visibility:visible; }.material-art.has-material .material-poster { opacity:0; }
.hero h1 { font-size:clamp(74px,7.4vw,140px); }
.hero-frame { position:absolute; right:-4%; top:-9%; width:clamp(440px,46vw,790px); aspect-ratio:1; pointer-events:auto; }
.hero:before { background-size:180px 180px; opacity:.45; }
.hero { background:radial-gradient(ellipse at 80% 40%,#2f4a6150,transparent 55%),linear-gradient(120deg,#080e16,#0e1928 75%,#080e16); }
.hero-bottom { border-top:1px solid var(--line); padding-top:24px; }
.proof-art { position:absolute; width:56vw; max-width:900px; height:90%; right:-2%; top:3%; z-index:0; }
.work-heading h2 { font-size:clamp(80px,8vw,140px); }
.work-intro { grid-column:1; justify-self:start; }
.proof-wash { background:radial-gradient(ellipse at 76% 50%,#234d6766,transparent 60%),linear-gradient(125deg,#0c1a29,#132638); }
.case { max-width:none; background:radial-gradient(ellipse at 76% 45%,var(--scene-light),transparent 56%),var(--scene-surface); }
.case-inkwell { --scene-light:#65532942; }.case-dagon { --scene-light:#1c605c50; }
.case-stateroom { --scene-light:#38547460; }.case-soul { --scene-light:#50612842; }
.case-art { border:0; border-radius:0; box-shadow:none; background:none; overflow:visible; }
.case-art:after { inset:auto 10% 10%; height:10%; background:radial-gradient(ellipse,#0008,transparent 65%); box-shadow:none; z-index:-1; }
.case-top { border-top-color:#9baec229; }.case-copy { position:relative; z-index:2; }
.case-copy h3 { font-size:clamp(48px,5.5vw,95px); }
.link-disc { background:linear-gradient(135deg,#ffffff0b,#0004); border-color:#9ab4ca40; box-shadow:inset 0 1px 0 #cadce326,0 6px 14px #0003; }
.note { max-width:none; background:radial-gradient(ellipse at 85% 50%,#34485930,transparent 55%),#0a121d; }
.note-composition { display:grid; grid-template-columns:1.25fr .75fr; align-items:center; gap:3vw; }
.note h2 { font-size:clamp(52px,5.8vw,105px); }
.throughline-art { width:100%; aspect-ratio:1; }
.note-bottom { padding-top:30px; border-top:1px solid var(--line); }
.contact-wash { background:radial-gradient(ellipse at 80% 50%,#294f635e,transparent 60%),linear-gradient(135deg,#11283c,#0b1623); }
.contact-composition { position:relative; min-height:440px; display:flex; align-items:center; }
.contact h2 { font-size:clamp(74px,8.7vw,155px); position:relative; z-index:2; margin-block:80px; }
.contact-art { position:absolute; width:44%; aspect-ratio:1; right:-1%; top:50%; transform:translateY(-50%); }
.contact-bottom { border-top:1px solid var(--line); padding-top:30px; position:relative; z-index:3; }
.contact-link { background:linear-gradient(135deg,#d2e0e9,#a6bdcc); border:1px solid #d9e7ee; box-shadow:inset 0 1px 0 #fff7,0 8px 22px #0004; }
.site-header { background:linear-gradient(#0b1420,#080e16); }
.site-header.is-scrolled { box-shadow:0 8px 24px #0003,inset 0 -1px 0 #728da80d; }
footer { max-width:none; border-top:1px solid #7596ae33; background:linear-gradient(#0b1622,#080e16); }
@media(max-width:1000px) {
  .hero h1 { font-size:clamp(70px,9.4vw,100px); }.hero-frame { width:390px; right:calc(50% - 200px); top:-35px; }
  .proof-art { width:65%; height:70%; right:-10%; top:10%; opacity:.8; }
  .case-art { height:490px; }.case-copy h3 { font-size:55px; }
  .note-composition { grid-template-columns:1.3fr .7fr; gap:20px; }.note h2 { font-size:clamp(44px,6.2vw,65px); }
  .contact-composition { min-height:360px; }.contact h2 { font-size:clamp(68px,9vw,95px); }.contact-art { right:-8%; width:48%; opacity:.8; }
}
@media(max-width:700px) {
  .hero h1 { font-size:clamp(43px,10.1vw,68px); }.hero-frame { width:355px; right:-22px; top:-40px; }
  .hero-bottom { padding-top:22px; }.hero-composition { padding-bottom:38px; }
  .proof-art { width:380px; height:380px; right:-145px; top:195px; opacity:.7; }.work-heading h2 { font-size:clamp(57px,13vw,88px); }
  .case-art { height:390px; width:100%; }.case-copy h3 { font-size:clamp(43px,10vw,62px); }
  .note-composition { display:flex; flex-direction:column; align-items:flex-start; gap:0; }.note h2 { font-size:clamp(34px,8.4vw,58px); }.throughline-art { width:260px; height:260px; align-self:center; margin-top:15px; }.note-bottom { margin-top:15px; }
  .contact-composition { display:block; min-height:0; }.contact h2 { font-size:clamp(53px,13.6vw,92px); margin-block:42px 0; }.contact-art { position:relative; width:290px; height:290px; max-width:100%; right:auto; top:auto; transform:none; margin:0 auto; opacity:1; }.contact-bottom { padding-top:24px; }
}
@media(max-width:360px) { .hero h1 { font-size:38px; }.hero-frame { width:310px; right:-28px; top:-22px; }.case-copy h3 { font-size:40px; }.contact h2 { font-size:46px; } }
/* One stage carries the object and its light continuously through the page. */
.journey-backdrop { position:fixed; inset:0; z-index:0; pointer-events:none; background:radial-gradient(ellipse at 80% 47%,var(--journey-light,#33556a),transparent 65%),var(--journey-ground,#0b1521); opacity:.72; }
.journey-stage { position:fixed; inset:0; z-index:2; pointer-events:none; }
.journey-stage canvas { display:block; width:100%; height:100%; }
.journey-ready body { background:var(--journey-ground,#0b1521); }
.journey-ready main,.journey-ready footer { position:relative; z-index:1; }
.journey-ready .hero,.journey-ready .story,.journey-ready .work-heading,.journey-ready .case,.journey-ready .note,.journey-ready .contact,.journey-ready footer { background:transparent; }
.journey-ready .material-poster,.journey-ready .sculpture-poster,.journey-ready .material-stage,.journey-ready .sculpture-stage { visibility:hidden; }
.journey-ready .proof-wash,.journey-ready .contact-wash,.journey-ready .case-art:after { display:none; }
.journey-ready .case-top,.journey-ready .story-top,.journey-ready .story-bottom { border-color:transparent; }
.journey-ready .site-header { background:linear-gradient(var(--journey-ground,#0b1521),#0b1521f5); }
.journey-ready .work-heading { min-height:82svh; }
.journey-ready .case-number,.journey-ready .case-meter { display:none; }
.journey-ready .story-bottom { opacity:.65; }
.journey-ready .contact h2 { font-size:clamp(74px,8.1vw,145px); }
@media(min-width:1001px) {
  .journey-ready .case { min-height:125svh; }
  .journey-ready .case-body { height:calc(100svh - 130px); }
  .journey-ready .note h2 { font-size:clamp(52px,5.5vw,100px); }
}
@media(max-width:1000px) {
  .journey-ready { scroll-padding-top:var(--journey-ceiling,360px); }
  .journey-stage:before { content:''; position:absolute; inset:0 0 auto; height:var(--journey-ceiling,360px); background:linear-gradient(var(--journey-ground,#0b1521) 86%,transparent); pointer-events:auto; }
  .journey-stage canvas { position:relative; }
  .journey-backdrop { background:radial-gradient(ellipse at 50% 15%,var(--journey-light),transparent 75%),var(--journey-ground); }
  .journey-ready .material-art,.journey-ready .story-art { display:none; }
  .journey-ready .hero-composition { min-height:calc(100svh - 310px); }
  .journey-ready .hero h1 { font-size:clamp(43px,9vw,78px); }
  .journey-ready .hero-topline { position:relative; z-index:4; }
  .journey-ready .story-layout { display:block; padding-top:45px; }
  .journey-ready .story-stage { padding-bottom:60px; }
  .journey-ready .story-step { margin-bottom:85px; }
  .journey-ready .story-step h3 { font-size:clamp(42px,8vw,64px); }
  .journey-ready .work-heading { min-height:68svh; padding-top:75px; }
  .journey-ready .work-heading h2 { font-size:clamp(54px,10vw,82px); }
  .journey-ready .case { min-height:78svh; padding-bottom:90px; }
  .journey-ready .case-body { display:block; min-height:0; padding-top:30px; }
  .journey-ready .case-copy h3 { font-size:clamp(42px,8vw,65px); }
  .journey-ready .case-copy p { max-width:430px; }
  .journey-ready .note-composition { display:block; }
  .journey-ready .note { padding-block:70px 90px; }
  .journey-ready .note h2 { font-size:clamp(33px,7.7vw,64px); }
  .journey-ready .note-bottom { margin-top:45px; }
  .journey-ready .contact { min-height:calc(100svh - 100px); padding-bottom:90px; }
  .journey-ready .contact-composition { min-height:0; }
  .journey-ready .contact h2 { font-size:clamp(48px,10.8vw,85px); margin-block:65px; }
}
@media(max-width:360px) { .journey-ready .hero h1 { font-size:38px; }.journey-ready .case-copy h3 { font-size:40px; } }
@media(max-width:360px) {
  .site-header { gap:12px; }
  .site-header nav span { display:none; }
  .brand-emblem { width:21px; height:21px; margin-right:6px; }
}