@font-face {
  font-family: Manrope;
  src: url("/fonts/manrope.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("/fonts/space-grotesk.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --navy: #0b1320;
  --panel: #111e2d;
  --text: #f5f3ec;
  --muted: #afbdcb;
  --mint: #41d9a1;
  --glint: #a0f1d4;
  --line: #2b3e50;
  --edge: #547988;
  --display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --mono: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  font: 460 16px/1.62 Manrope, "Segoe UI", system-ui, sans-serif;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height, 85px);
}
* { box-sizing: border-box; }
body { margin: 0; background: #0a121e; color: var(--text); }
body:has(dialog[open]) { overflow: hidden; }
a { color: inherit; text-decoration: none; }
a, button { -webkit-tap-highlight-color: transparent; }
button, input { font: inherit; }
img, video { display: block; max-width: 100%; }
img { object-fit: cover; }
img[hidden] { display: none; }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 5px; }
::selection { color: var(--navy); background: var(--mint); }
.shell { width: min(1184px, calc(100% - 96px)); margin-inline: auto; }
.skip { position: fixed; z-index: 5; top: 1rem; left: 1rem; padding: .6rem 1rem; background: var(--navy); transform: translateY(-160%); }
.skip:focus { transform: none; }
.masthead { position: sticky; inset-block-start: 0; z-index: 4; border-bottom: 1px solid #365062; background: var(--navy); box-shadow: 0 8px 24px #030b1550; }
.masthead::after { content: ""; position: absolute; inset: auto 0 -1px; height: 2px; background: linear-gradient(90deg, #338b79, var(--glint)); transform: scaleX(var(--page-progress, 0)); transform-origin: left; pointer-events: none; }
.nav { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; min-height: 82px; gap: clamp(12px, 2vw, 26px); }
.brand { display: block; justify-self: start; width: clamp(148px, 19vw, 208px); }
.brand img { width: 100%; height: auto; }
.timeline-nav { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; padding: 4px 4px 12px; width: min(100%, 496px); justify-self: center; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(180deg,#122031,#0b1522); }
.timeline-nav::before { content: ""; position: absolute; inset: auto 5px 3px; height: 4px; background: repeating-linear-gradient(90deg, #4b647c 0 1px, transparent 1px 9px) bottom / 100% 4px no-repeat; opacity: .8; }
.timeline-nav a, .socials a { color: var(--muted); font-size: .87rem; font-weight: 600; }
.timeline-nav a { display: grid; place-items: center; min-height: 31px; padding: .3rem .14rem; text-align: center; line-height: 1.2; border-radius: 4px; transition: background-color 160ms ease, color 160ms ease; }
.timeline-nav a:is(:hover, :focus-visible), .timeline-nav a[aria-current] { color: var(--text); background: #1d3540; }
.timeline-nav a[aria-current] { color: var(--mint); box-shadow: inset 0 0 0 1px #367660; }
.timeline-nav a:focus-visible { outline-offset: -1px; }
.nav-playhead { position: absolute; left: 0; bottom: 0; width: 1px; height: 11px; background: var(--mint); box-shadow: 0 0 9px #41d9a180; opacity: 0; pointer-events: none; transform: translateX(var(--nav-cursor, 0px)); transition: transform 210ms var(--ease-out), opacity 140ms ease; }
.nav-playhead::before { content: ""; position: absolute; inset: 0 auto auto -3px; width: 7px; height: 5px; background: var(--mint); clip-path: polygon(0 0,100% 0,100% 45%,50% 100%,0 45%); }
.timeline-nav[data-tracking] .nav-playhead { opacity: 1; }
.socials { display: flex; align-items: center; flex-wrap: wrap; }
.socials a:hover, .footer a:hover { color: var(--mint); }
.nav-contact { justify-self: end; border: 1px solid #477366; border-radius: 6px; padding: .57rem .9rem; font-size: .88rem; font-weight: 700; white-space: nowrap; background: #18363252; transition: border-color .2s, color .2s; }
.nav-contact:hover { border-color: var(--mint); color: var(--mint); }
.nav-contact span, .text-link span { color: var(--mint); margin-left: .28em; }
.nav-contact span, .button span, .text-link span { display: inline-block; transition: transform 180ms var(--ease-out); }
:is(.nav-contact, .button, .text-link):is(:hover, :focus-visible) span { transform: translateX(3px); }
.hero-stage { position: relative; isolation: isolate; overflow: clip; border-bottom: 1px solid var(--line); background: radial-gradient(ellipse at 73% 60%, #1a413e 0%, #132b3b 31%, transparent 66%), linear-gradient(115deg, #0a121e 30%, #0d1b2a); }
.hero-stage::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; background: linear-gradient(#70a7be1a 1px, transparent 1px), linear-gradient(90deg,#70a7be1a 1px,transparent 1px); background-size: 40px 40px; mask-image: radial-gradient(ellipse at 82% 48%, #000 16%, transparent 75%); }
.hero-signal { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.hero { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); column-gap: clamp(30px, 5vw, 80px); row-gap: 36px; align-items: center; min-height: min(660px, calc(100svh - 82px)); padding-block: clamp(68px, 8vw, 117px); }
.hero-copy { animation: cut-in 340ms var(--ease-out) both; }
.kicker { display: flex; align-items: center; gap: .85em; width: fit-content; max-width: 100%; padding: .55rem .75rem; border: 1px solid #43786c; border-radius: 5px; background: #17302e9c; color: #c4e7dc; font: 600 .67rem/1.4 var(--mono); letter-spacing: .12em; margin: 0 0 1.2rem; }
.signal, .record { display: inline-block; width: .55rem; aspect-ratio: 1; background: var(--mint); border-radius: 50%; box-shadow: 0 0 12px #41d9a157; }
.signal { flex: none; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-family: var(--display); line-height: 1.04; text-wrap: balance; }
h1 { font-size: clamp(3.8rem, 7.6vw, 7.4rem); font-weight: 700; letter-spacing: -.073em; }
h2 { font-size: clamp(2.8rem, 5.2vw, 5.1rem); font-weight: 700; letter-spacing: -.055em; }
h3 { font-size: clamp(1.26rem, 2vw, 1.72rem); font-weight: 650; letter-spacing: -.035em; }
.hero-tagline { margin-top: .72rem; color: #dce7eb; font: 550 clamp(1.38rem, 2.42vw, 2.4rem)/1.14 var(--display); letter-spacing: -.04em; }
.hero-tagline em, .vision-line { color: var(--glint); font: italic 400 clamp(1.8rem, 3.55vw, 3.35rem)/1.08 Georgia, serif; letter-spacing: -.054em; text-wrap: balance; }
.hero-tagline em { display: block; }
.vision-line { margin-top: 1.2rem; max-width: 17ch; }
.hero-description { max-width: 43ch; font-size: clamp(1rem, 1.38vw, 1.14rem); color: var(--muted); margin: 1.4rem 0 1.85rem; }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: .95rem 1.35rem; }
.button, .text-link { font-weight: 700; font-size: .86rem; }
.button { display: inline-flex; align-items: center; gap: 1.25em; min-height: 49px; padding: .76rem 1.12rem; border-radius: 6px; }
.primary { color: #081a16; background: linear-gradient(115deg, var(--glint), var(--mint)); border: 1px solid #b8f6dd68; box-shadow: 0 6px 24px #41d9a13d; transition: box-shadow .2s, transform .2s; }
.primary:is(:hover, :focus-visible) { box-shadow: 0 10px 30px #41d9a163; transform: translateY(-2px); }
.text-link { padding-block: .45em; border-bottom: 1px solid #4b786f; }
.text-link:hover { color: var(--mint); }
.edit-deck { min-width: 0; padding: 0 8px 8px; overflow: hidden; border: 1px solid var(--edge); border-radius: 15px; background: linear-gradient(155deg,#24394a,#101b2a 58%); box-shadow: 0 25px 80px #02070eb3, 0 0 0 7px #86b9bc10, inset 0 1px #d2ffff22; animation: cut-in 380ms 45ms var(--ease-out) both; }
.deck-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .35rem 1rem; padding: .72rem .52rem; font: 600 .68rem/1.3 var(--mono); letter-spacing: .1em; color: #dce9ef; }
.deck-project { border: 1px solid #536d7f; border-radius: 3px; padding: .24em .42em; color: #c6dadf; }
.record { width: .38rem; margin-right: .38em; vertical-align: .09em; }
.feature-screen, .project-screen { position: relative; display: block; overflow: hidden; isolation: isolate; aspect-ratio: 16 / 9; background: #18293b; }
.feature-screen img, .project-screen img { width: 100%; height: 100%; transition: transform 280ms var(--ease-out); }
.player-link:not(.is-missing):is(:hover, :focus-visible) img { transform: scale(1.045); }
.feature-screen { border-radius: 7px 7px 0 0; }
.feature-screen::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(transparent 52%,#07111cbd); pointer-events: none; }
.feature-screen:focus-visible, .project-link:focus-visible { outline-offset: -4px; }
.screen-corners { position: absolute; inset: 13px; background:
  linear-gradient(var(--text),var(--text)) left top / 12px 1px,
  linear-gradient(var(--text),var(--text)) left top / 1px 12px,
  linear-gradient(var(--text),var(--text)) right top / 12px 1px,
  linear-gradient(var(--text),var(--text)) right top / 1px 12px,
  linear-gradient(var(--text),var(--text)) left bottom / 12px 1px,
  linear-gradient(var(--text),var(--text)) left bottom / 1px 12px,
  linear-gradient(var(--text),var(--text)) right bottom / 12px 1px,
  linear-gradient(var(--text),var(--text)) right bottom / 1px 12px;
  background-repeat: no-repeat; opacity: .65; z-index: 1; pointer-events: none;
}
.feature-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 2; display: inline-flex; align-items: center; gap: .75em; padding: .82rem 1.16rem; border: 1px solid #bdf2dcac; border-radius: 100px; background: #0c2221e8; color: #e8fff6; font-weight: 760; font-size: .86rem; white-space: nowrap; box-shadow: 0 5px 28px #05121aaa; }
.feature-play .triangle { color: var(--glint); }
.feature-play, .play-icon { transition: background-color 150ms ease, color 150ms ease, scale 200ms var(--ease-out); }
.player-link:is(:hover, :focus-visible) :is(.feature-play, .play-icon) { scale: 1.1; }
.triangle { display: block; width: 0; height: 0; border-block: .32em solid transparent; border-left: .55em solid currentColor; }
.deck-timeline { position: relative; padding: .66rem .75rem .78rem; display: grid; gap: 5px; font: .58rem/1 var(--mono); color: var(--muted); border: 1px solid #2b4255; border-radius: 0 0 7px 7px; background: #091520; }
.time-scale { display: grid; grid-template-columns: repeat(3, 1fr) auto; align-items: center; margin: -3px 0 0 26px; letter-spacing: .05em; }
.time-scale button { justify-self: start; min-height: 24px; margin-left: -4px; padding: 4px; border: 0; border-radius: 2px; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; }
.time-scale button:not(:disabled) { cursor: pointer; }
.time-scale button:not(:disabled):is(:hover, :focus-visible) { color: var(--mint); background: #24463d; }
.time-scale button:focus-visible { outline-offset: 0; }
.time-scale button:disabled { opacity: .6; }
.track { display: grid; grid-template-columns: 20px 1fr; align-items: center; gap: 6px; }
.clips { display: grid; grid-template-columns: 1.08fr .6fr 1fr; gap: 3px; }
.clips i, .audio-wave { padding: .35em .55em; border: 1px solid #40766f; border-radius: 2px; background: #21564e; color: #ddf8eb; font-style: normal; white-space: nowrap; overflow: hidden; }
.graphics { grid-template-columns: 1.2fr 1fr; }
.graphics i { color: #d4e8f6; background: #243d57; border-color: #3b5671; }
.audio-wave { min-height: 10px; background: repeating-linear-gradient(90deg, #152e35 0 3px, #3a8d73 3px 4px, #1a4950 4px 6px, #2a6d61 6px 8px); border-color: #2b544f; }
.playhead { position: absolute; width: 1px; top: 30px; bottom: 7px; left: var(--cue-preview, var(--cue-position, 58%)); background: #70ffcd; box-shadow: 0 0 8px #41d9a175; pointer-events: none; transition: left 220ms var(--ease-out); }
.deck-timeline[data-cue="0"] { --cue-position: 46px; }
.deck-timeline[data-cue="4"] { --cue-position: calc(33.333% + 20px); }
.deck-timeline[data-cue="8"] { --cue-position: 66.667%; }
.deck-timeline:has([data-cue="0"]:is(:hover, :focus-visible):not(:disabled)) { --cue-preview: 46px; }
.deck-timeline:has([data-cue="4"]:is(:hover, :focus-visible):not(:disabled)) { --cue-preview: calc(33.333% + 20px); }
.deck-timeline:has([data-cue="8"]:is(:hover, :focus-visible):not(:disabled)) { --cue-preview: 66.667%; }
.playhead::before { content: ""; width: 7px; height: 6px; position: absolute; left: -3px; top: -3px; background: #70ffcd; clip-path: polygon(0 0,100% 0,100% 58%,50% 100%,0 58%); }
.section { padding-block: clamp(74px, 9vw, 128px); scroll-margin-top: .75rem; }
.section h2::before { content: ""; display: block; width: 47px; height: 7px; margin-bottom: .92rem; background: radial-gradient(circle at 3px center,var(--mint) 3px,transparent 3.6px), linear-gradient(90deg,var(--mint),#41d9a12e) 11px center / 35px 1px no-repeat; }
.in-view { animation: cut-in 320ms var(--ease-out) both; }
.project.in-view:nth-child(even), .testimonial.in-view:nth-child(even) { animation-delay: 35ms; }
@keyframes cut-in { from { opacity: .52; transform: translateY(13px); } }
.section-head { display: grid; grid-template-columns: 1.15fr .65fr; align-items: end; gap: 1.3rem clamp(24px, 6vw, 85px); margin-bottom: 2.15rem; padding-bottom: 1.6rem; border-bottom: 1px solid var(--line); }
.section-head > p, .about-copy > p, .contact-copy > p { max-width: 51ch; color: var(--muted); font-size: clamp(1rem, 1.45vw, 1.13rem); }
.section-head > p { max-width: 34ch; padding-bottom: .22rem; }
.work-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(16px, 2vw, 28px); }
.project { min-width: 0; background: linear-gradient(135deg,#162536,#101b29); border: 1px solid #3b5364; border-radius: 14px; overflow: hidden; box-shadow: 0 10px 35px #03091155; transition: translate 220ms var(--ease-out), border-color 180ms ease, box-shadow 180ms ease; }
.project-link { display: block; height: 100%; touch-action: manipulation; }
.project:has(.previewing, .player-link:not(.is-missing):is(:hover, :focus-visible)) { border-color: #62ad93; box-shadow: 0 14px 40px #02070e88, 0 0 0 1px #41d9a125; }
.project:has(.player-link:not(.is-missing):is(:hover, :focus-visible)) { translate: 0 -3px; }
.project-screen { margin: 6px 6px 0; border: 1px solid #46627176; border-radius: 9px; }
.project-screen::after { position: absolute; inset: 0; content: ""; background: linear-gradient(155deg,#0b132043,transparent 34%),linear-gradient(transparent 66%,#080f1b74); pointer-events: none; }
.card-preview { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; object-fit: cover; pointer-events: none; opacity: 0; transform: scale(1.045); transition: opacity 140ms ease; }
.previewing .card-preview { opacity: 1; }
.format, .play-icon { position: absolute; z-index: 1; display: grid; place-items: center; color: #ecfff8; background: #0b1c24ec; border: 1px solid #94c6bfaa; }
.format { inset: .75rem auto auto .75rem; font: .68rem/1 var(--mono); padding: .4rem .5rem; border-radius: 4px; }
.play-icon { inset: auto .85rem .85rem auto; width: 3rem; height: 3rem; border-radius: 50%; box-shadow: 0 4px 14px #01071191; }
.project-link:is(:hover, :focus-visible) .play-icon { background: var(--mint); color: var(--navy); }
.project-copy { display: flex; align-items: center; gap: 1rem; padding: clamp(15px, 2.1vw, 22px) clamp(16px, 2.5vw, 27px); }
.project-copy::after { content: ""; flex: 1 1 auto; min-width: 12px; height: 8px; background: linear-gradient(90deg,transparent,#63a69c65) center / 100% 1px no-repeat, radial-gradient(circle at calc(100% - 3px) 50%,#70c8af 2px,transparent 2.5px); }
.project-copy h3 { text-wrap: pretty; }
.portrait-project .project-screen { display: grid; place-items: center; background: #132330; }
.portrait-project .project-screen::before { position: absolute; z-index: -1; inset: 0; content: ""; background: radial-gradient(ellipse at center, transparent 13%, #08162188 80%), repeating-linear-gradient(90deg, transparent 0 30px, #9be8d21c 31px, transparent 32px); pointer-events: none; }
.portrait-project .project-screen::after { background: linear-gradient(transparent 60%,#08101982); }
.portrait-project .project-screen .reel-backdrop { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; opacity: .64; filter: blur(17px) saturate(.85); transform: scale(1.17); }
.portrait-project .project-screen :is(img:not(.reel-backdrop), .card-preview) { position: absolute; inset: 7% auto auto 50%; width: auto; height: 86%; aspect-ratio: 9 / 16; object-position: center; transform: translateX(-50%); border: 1px solid #90c9ca; border-radius: 7px; box-shadow: 0 6px 32px #000a; }
.portrait-project .project-link:not(.is-missing):is(:hover, :focus-visible) img:not(.reel-backdrop) { transform: translateX(-50%); }
.player-link.is-missing { cursor: default; }
.player-link.is-missing .play-icon, .player-link.is-missing .feature-play { display: none; }
.media-notice { position: absolute; z-index: 2; inset: 50% auto auto 50%; transform: translate(-50%,-50%); font-size: .85rem; text-align: center; color: var(--text); padding: .45rem .7rem; border-radius: 4px; background: var(--navy); }
.testimonials { border-block: 1px solid var(--line); background: radial-gradient(ellipse at 16% 0%, #1b3a42, transparent 58%), linear-gradient(120deg,#0d1928,#101d2b); }
.testimonial-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin-top: 2rem; }
.testimonial { padding: clamp(22px, 3.7vw, 44px); border: 1px solid #405b6a; border-radius: 14px; background: linear-gradient(150deg, #1b2c3c, #101a28 68%); box-shadow: 0 13px 32px #050d1768, inset 0 1px #d2ffff12; }
.testimonial > span { display: block; height: .72em; color: var(--glint); font: 3.7rem/1 Georgia, serif; }
.testimonial blockquote { margin: 0 0 1.3rem; font: 500 clamp(1.18rem, 2.2vw, 1.9rem)/1.25 var(--display); }
.testimonial figcaption { padding-top: .8rem; border-top: 1px solid var(--line); font-size: .88rem; }
.testimonial small { display: block; margin-top: .18rem; color: var(--muted); }
.about { display: grid; grid-template-columns: minmax(0,.74fr) minmax(0,1fr); gap: clamp(36px,9vw,122px); align-items: center; border-bottom: 1px solid var(--line); }
.about.no-portrait { grid-template-columns: 1fr; }
.portrait { position: relative; max-width: 405px; padding: 7px; border: 1px solid #507282; border-radius: 14px; overflow: hidden; background: linear-gradient(145deg,#274356,#0b1624); box-shadow: 0 18px 42px #0208108f, 12px 12px 0 -7px #244c53, 13px 13px 0 -7px #4b7b80; }
.portrait img { aspect-ratio: 5 / 5.2; width: 100%; height: auto; border-radius: 7px; object-position: 50% 32%; }
.portrait::after { content: ""; position: absolute; inset: 19px; border: 1px solid #dcfff66b; border-radius: 4px; mask: conic-gradient(#000 25%, transparent 0 50%, #000 0 75%, transparent 0) 50% / 100% 100% no-repeat; pointer-events: none; }
.about-copy > p { margin-top: 1.45rem; }
.contact { position: relative; isolation: isolate; overflow: clip; display: grid; grid-template-columns: 1fr .8fr; gap: 2rem clamp(28px, 6vw, 80px); align-items: end; margin-block: clamp(55px, 8vw, 104px); padding: clamp(32px, 6vw, 82px); border: 1px solid #5c9587; border-radius: 17px; background: radial-gradient(ellipse at 94% 112%, #26574a, transparent 66%), linear-gradient(120deg,#112637,#101c2b 64%); box-shadow: 0 18px 64px #02070e85, inset 0 1px #bdffe228; }
.contact::before { content: ""; position: absolute; z-index: -1; inset: 0 0 0 42%; background: repeating-radial-gradient(ellipse at 96% 100%, transparent 0 25px, #a8f6dd42 26px, transparent 27px 47px); mask-image: linear-gradient(125deg, transparent 21%, #000); pointer-events: none; }
.contact .actions { margin-top: 1.25rem; }
.socials { margin-top: 1.15rem; gap: .62rem; }
.socials a { padding: .38rem .64rem; border: 1px solid #6aa39566; border-radius: 4px; background: #0c25272b; }
.footer { border-top: 1px solid var(--line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: .85rem 1.5rem; align-items: center; padding-block: 1.4rem; }
.footer-name { color: var(--muted); font-size: .84rem; }
.footer-name span { color: var(--mint); }
dialog { color: var(--text); background: var(--navy); border: 1px solid #57717f; border-radius: 8px; width: min(94vw, 900px); padding: 0; max-height: 94dvh; }
dialog.is-portrait { width: min(94vw, 435px, calc((94dvh - 72px) * .5625)); min-width: min(94vw, 290px); }
dialog::backdrop { background: #040a12db; }
dialog[open] { animation: player-in 200ms var(--ease-out) both; }
dialog[open]::backdrop { animation: player-dim 160ms ease-out both; }
@keyframes player-in { from { opacity: 0; transform: translateY(9px) scale(.985); } }
@keyframes player-dim { from { opacity: 0; } }
.player-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem .8rem; }
.player-header h2 { font-size: 1rem; letter-spacing: -.025em; }
.player-header button { border: 0; background: none; color: var(--text); min-width: 48px; min-height: 48px; cursor: pointer; font-size: 1.5rem; }
dialog video { width: 100%; max-height: calc(94dvh - 64px); background: #000; }
.player-status { padding: .8rem 1rem; color: var(--muted); }
.player-status a { text-decoration: underline; color: var(--mint); }
@media (max-width: 1080px) {
  .shell { width: calc(100% - 64px); }
  .hero { column-gap: 31px; }
  h1 { font-size: clamp(3.5rem, 8.1vw, 5.45rem); }
}
@media (max-width: 750px) {
  :root { --header-height: 112px; }
  .shell { width: calc(100% - 40px); }
  .nav { grid-template-columns: 1fr auto; gap: .55rem 1rem; padding: .8rem 0 .55rem; }
  .timeline-nav { grid-row: 2; grid-column: 1 / -1; width: 100%; }
  .timeline-nav a { min-height: 34px; font-size: clamp(.68rem, 3vw, .86rem); }
  .hero { grid-template-columns: 1fr; min-height: 0; row-gap: 32px; padding-block: 52px 64px; }
  .hero-copy { max-width: 550px; }
  .hero-stage { background: radial-gradient(ellipse at 80% 72%, #1a3d3c, transparent 68%), #0d1a29; }
  .hero-stage::before { mask-image: radial-gradient(ellipse at 82% 72%, #000, transparent 78%); }
  .hero-signal { opacity: .7; }
  h1 { font-size: clamp(3.6rem, 10.7vw, 5.4rem); }
  .hero-description { margin: 1.2rem 0 1.4rem; }
  .section-head, .contact { grid-template-columns: 1fr; }
  .section-head { margin-bottom: 1.55rem; padding-bottom: 1.25rem; }
  .section { padding-block: 66px; }
  .about { grid-template-columns: minmax(125px,.64fr) 1fr; }
  .contact { padding: clamp(22px, 5.6vw, 44px); }
}
@media (max-width: 560px) {
  .work-grid, .testimonial-grid { grid-template-columns: 1fr; }
  .portrait-project .project-screen { aspect-ratio: 5 / 4; }
  .about { grid-template-columns: 1fr; }
  .about-copy { grid-row: 1; }
  .portrait { width: min(91%, 330px); margin-inline: auto; }
  .footer { align-items: flex-start; }
}
@media (max-width: 360px) {
  .shell { width: calc(100% - 30px); }
  h1 { font-size: 3.2rem; }
  .deck-top { font-size: .57rem; padding-inline: .6rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}