:root{--ink:#eef3ff;--muted:rgba(226,235,255,.62);--line:rgba(143,176,255,.2);--blue:#557cff;--deep:#020619;--serif:'Fraunces',Georgia,serif;--mono:'IBM Plex Mono',monospace;--ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:#557cff #020619}
body{min-height:100vh;background:#020619;color:var(--ink);font-family:var(--serif);overflow-x:hidden;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;z-index:-3;background:radial-gradient(circle at 76% 14%,rgba(45,82,173,.25),transparent 24%),radial-gradient(circle at 12% 78%,rgba(28,64,151,.2),transparent 29%),radial-gradient(circle at 49% 46%,rgba(19,48,111,.25),transparent 43%),linear-gradient(148deg,#091944,#040d29 52%,#020619)}
body::after{content:"";position:fixed;inset:-18%;z-index:-2;background:radial-gradient(circle at 19% 26%,rgba(115,145,224,.12),transparent 17%),radial-gradient(circle at 81% 64%,rgba(60,96,188,.14),transparent 23%),linear-gradient(112deg,transparent 24%,rgba(91,123,207,.045) 45%,transparent 66%);filter:blur(52px);mix-blend-mode:screen;animation:nebulaDrift 18s ease-in-out infinite alternate;pointer-events:none}
@keyframes nebulaDrift{to{transform:translate3d(3%,-2%,0) scale(1.08);opacity:.58}}
a{color:inherit;text-decoration:none}
button{font:inherit}
::selection{background:var(--blue);color:white}
#stars{position:fixed;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
.noise{position:fixed;inset:-80px;z-index:90;pointer-events:none;opacity:.028;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.top{position:fixed;left:0;right:0;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:1.4rem 3vw;background:linear-gradient(#020619,transparent);font:500 .62rem/1 var(--mono);letter-spacing:.22em;text-transform:uppercase}
.brand{display:flex;align-items:center;font-family:var(--serif);font-size:1rem;font-style:italic;font-weight:570;letter-spacing:-.03em;text-transform:none;color:#fff}
.top nav{display:flex;gap:2rem;color:var(--muted)}.top nav a{position:relative;transition:color .28s ease}.top nav a::after{content:"";position:absolute;left:0;right:.22em;bottom:-.55rem;height:1px;background:#8facff;transform:scaleX(0);transform-origin:right;transition:transform .42s var(--ease)}.top nav a:hover,.top nav a.on{color:white}.top nav a:hover::after,.top nav a.on::after{transform:scaleX(1);transform-origin:left}
.back{display:inline-flex;align-items:center;gap:.75rem;color:var(--muted)}.back span{transition:transform .35s var(--ease)}.back:hover{color:white}.back:hover span{transform:translateX(-5px)}
.mobile-menu-toggle,.mobile-journey{display:none}
.page{opacity:.58;transform:translate3d(14px,0,0) scale(.997);filter:blur(2px);transition:opacity .52s ease,transform .68s var(--ease),filter .48s ease}body.ready .page{opacity:1;transform:none;filter:none}body.leaving .page{opacity:.72;transform:translate3d(-18px,0,0) scale(1.006);filter:blur(1.5px);transition:opacity .26s ease,transform .3s var(--ease),filter .25s ease}
.hero{min-height:100svh;display:grid;align-items:center;padding:9rem max(6vw,2rem) 5rem;position:relative}
.hero-grid{width:min(1500px,100%);margin:auto;display:grid;grid-template-columns:minmax(0,.8fr) minmax(420px,1.2fr);align-items:center;gap:clamp(3rem,7vw,9rem)}
.eyebrow,.mono{font-family:var(--mono);font-size:.58rem;line-height:1.8;letter-spacing:.3em;text-transform:uppercase}.eyebrow{color:#8facff}
.hero h1{font-size:clamp(4.2rem,8vw,9rem);font-weight:500;letter-spacing:-.055em;line-height:.78;margin:1.5rem 0 2rem}.hero h1 em{display:block;color:#86a4ff;font-weight:430}
.lead{max-width:48ch;color:var(--muted);font-size:clamp(1rem,1.3vw,1.3rem);line-height:1.65}
.meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem 2rem;margin-top:2.5rem;padding-top:1.4rem;border-top:1px solid var(--line);font:400 .54rem/1.7 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}.meta b{display:block;color:white;font-weight:500}
.player{position:relative;aspect-ratio:16/9;padding:8px;border:1px solid rgba(143,176,255,.3);border-radius:12px;background:rgba(8,20,54,.7);box-shadow:0 3rem 10rem rgba(0,0,0,.55),0 0 90px rgba(64,104,255,.18);transform:perspective(1200px) rotateY(-4deg);transition:transform .9s var(--ease),border-color .4s;overflow:hidden}.player:hover{transform:perspective(1200px) rotateY(0) scale(1.015);border-color:rgba(143,176,255,.68)}
.player.is-portrait{width:min(100%,430px);aspect-ratio:9/16;justify-self:center}
.player video,.player img{width:100%;height:100%;display:block;object-fit:cover;border-radius:7px;background:#02040c}.fullscreen-canvas{display:none}.video-overlay{position:fixed;inset:0;z-index:130;display:none;width:100vw;height:100dvh;background:#000}.video-overlay.active{display:block}.video-overlay .fullscreen-canvas.active{display:block;width:100%;height:100%}.overlay-controls{position:absolute;z-index:2;right:max(1.25rem,env(safe-area-inset-right));bottom:max(1.25rem,env(safe-area-inset-bottom));display:flex;gap:.55rem}.overlay-controls button{min-height:42px;border:1px solid rgba(255,255,255,.42);border-radius:99px;background:rgba(3,8,25,.75);color:#fff;padding:.75rem 1rem;font:500 .5rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;backdrop-filter:blur(10px)}.overlay-controls button:hover{border-color:#fff;background:rgba(37,76,190,.82)}.player-expanded{overflow:hidden}.player-controls{position:absolute;z-index:2;left:1.5rem;right:1.5rem;bottom:1.4rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;font:500 .5rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;text-shadow:0 2px 10px #000}.player-control-actions{display:flex;gap:.55rem}.player-controls button{min-height:42px;border:1px solid rgba(255,255,255,.35);border-radius:99px;background:rgba(3,8,25,.7);color:white;padding:.75rem 1rem;cursor:pointer;backdrop-filter:blur(10px)}.player-controls button:hover{border-color:#fff;background:rgba(37,76,190,.8)}
.scroll-cue{position:absolute;bottom:2.5rem;left:6vw;display:flex;gap:1rem;align-items:center;color:var(--muted);font:400 .52rem/1 var(--mono);letter-spacing:.24em;text-transform:uppercase}.scroll-cue i{width:54px;height:1px;background:var(--blue)}
.section{padding:clamp(6rem,12vw,12rem) max(6vw,2rem);border-top:1px solid rgba(143,176,255,.1)}
.section-inner{width:min(1320px,100%);margin:auto}.section h2{font-size:clamp(3rem,6vw,6.8rem);font-weight:480;line-height:.88;letter-spacing:-.045em}.section h2 em{color:#8facff;font-weight:420}
.story-grid{display:grid;grid-template-columns:.65fr 1.35fr;gap:clamp(3rem,10vw,11rem);align-items:start}.story-copy{font-size:clamp(1.15rem,1.65vw,1.65rem);line-height:1.55;color:rgba(238,243,255,.82)}.project-external{margin-top:2rem}.project-external .button{color:#fff;background:rgba(61,99,222,.2)}
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:4rem}.fact{background:rgba(3,10,32,.88);padding:2rem}.fact h3{font:500 .56rem/1.5 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:#8facff}.fact p{margin-top:.8rem;color:var(--muted);line-height:1.65}
.next{display:grid;grid-template-columns:1fr auto;align-items:end;gap:2rem}.next h2{max-width:10ch}.button{display:inline-flex;align-items:center;justify-content:center;gap:.8rem;border:1px solid rgba(143,176,255,.38);border-radius:99px;padding:1rem 1.4rem;font:500 .56rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;transition:background .3s,border-color .3s,transform .3s var(--ease)}.button:hover{background:var(--blue);border-color:var(--blue);transform:translateY(-3px)}
.work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.4rem,3vw,3rem);margin-top:5rem}.work-card{position:relative;min-height:32vw;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#06112e}.work-card img,.work-card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease),filter .6s;background:radial-gradient(circle at 55% 42%,#183276,#03091f 70%)}.work-card::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 20%,rgba(2,6,25,.93))}.work-card-copy{position:absolute;z-index:2;left:2rem;right:2rem;bottom:2rem}.work-card h2{font-size:clamp(2.3rem,4vw,4.8rem)}.work-card p{margin-top:.7rem;color:var(--muted);font:400 .54rem/1.6 var(--mono);letter-spacing:.17em;text-transform:uppercase}.work-card:hover img,.work-card:hover video{transform:scale(1.06);filter:saturate(1.12)}
.work-grid.has-single-tail .work-card:last-child{grid-column:1/-1;min-height:38vw}
.director-portrait{position:relative;max-width:480px;margin:auto}.director-portrait::before{content:"";position:absolute;inset:18px -18px -18px 18px;border:1px solid rgba(143,176,255,.36);border-radius:20px}.director-portrait img{position:relative;width:100%;display:block;border-radius:20px;box-shadow:0 3rem 8rem rgba(0,0,0,.5)}
.principles,.services{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:5rem}.principle,.service{position:relative;background:rgba(3,10,32,.92);padding:clamp(2rem,4vw,4.5rem);min-height:330px;overflow:hidden}.principle::after,.service::after{content:"";position:absolute;width:230px;aspect-ratio:1;border:1px solid rgba(143,176,255,.1);border-radius:50%;right:-90px;top:-110px;transition:transform .8s var(--ease)}.principle:hover::after,.service:hover::after{transform:scale(1.4)}.principle h3,.service h3{font-size:clamp(1.8rem,3vw,3.3rem);font-weight:500;line-height:1}.principle p,.service p{margin-top:1.4rem;max-width:42ch;color:var(--muted);line-height:1.7}
.contact-page .hero-grid{grid-template-columns:1fr}.contact-page h1{max-width:11ch}.contact-page h1 em{font-family:var(--serif);font-weight:430}.mail{display:inline-block;margin-top:3rem;font-size:clamp(1.5rem,4vw,4.5rem);font-style:italic;color:#92adff;border-bottom:1px solid currentColor}.contact-links{display:flex;flex-wrap:wrap;gap:1rem;margin-top:3rem}
.reveal{opacity:0;transform:translateY(35px);transition:opacity .8s ease,transform 1s var(--ease)}.reveal.in{opacity:1;transform:none}
.transition{position:fixed;left:-42vw;top:-18vh;width:42vw;height:136vh;z-index:100;visibility:hidden;pointer-events:none;opacity:0;background:linear-gradient(90deg,transparent 0%,rgba(86,125,255,.04) 25%,rgba(126,158,255,.26) 46%,rgba(238,244,255,.94) 50%,rgba(126,158,255,.24) 54%,transparent 100%);filter:blur(2px);transform:skewX(-9deg);will-change:transform,opacity}.transition.on{visibility:visible;animation:lightDepart .32s cubic-bezier(.4,0,.2,1) both}.transition.arrive{visibility:visible;animation:lightArrive .38s cubic-bezier(.4,0,.2,1) both}@keyframes lightDepart{0%{opacity:0;transform:translateX(0) skewX(-9deg)}16%{opacity:1}100%{opacity:1;transform:translateX(71vw) skewX(-9deg)}}@keyframes lightArrive{0%{opacity:1;transform:translateX(71vw) skewX(-9deg)}82%{opacity:1}100%{opacity:0;transform:translateX(184vw) skewX(-9deg)}}
footer{display:flex;justify-content:space-between;gap:2rem;padding:2.2rem 3vw;border-top:1px solid var(--line);color:var(--muted);font:400 .5rem/1.6 var(--mono);letter-spacing:.18em;text-transform:uppercase}
.footer-social{display:flex;gap:1.2rem}.footer-social a{transition:color .25s}.footer-social a:hover{color:#8facff}
.reviews-page .hero{min-height:auto;padding-bottom:7rem}.reviews-page .hero-grid{grid-template-columns:1fr!important}.reviews-page .lead{max-width:58ch}
.reviews-page-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:4rem}
.reviews-empty{grid-column:1/-1;padding:clamp(2rem,5vw,5rem);border:1px solid var(--line);border-radius:18px;background:rgba(5,14,40,.62);text-align:center}.reviews-empty h2{max-width:20ch;margin:1rem auto 0;font-size:clamp(1.8rem,3vw,3rem);line-height:1.05}
.review-full-card{position:relative;display:flex;min-height:360px;flex-direction:column;padding:clamp(1.5rem,2.6vw,2.5rem);overflow:hidden;border:1px solid rgba(143,176,255,.24);border-radius:18px;background:linear-gradient(145deg,rgba(15,31,73,.92),rgba(5,12,34,.8));box-shadow:0 2.5rem 7rem rgba(0,0,0,.25);transition:transform .45s var(--ease),border-color .35s,box-shadow .4s}
.review-full-card::before{content:'“';position:absolute;right:1.1rem;top:-1.6rem;font:italic 300 9rem/1 var(--serif);color:rgba(122,156,255,.08);pointer-events:none}
.review-full-card:hover,.review-full-card.requested{transform:translateY(-6px);border-color:rgba(143,176,255,.68);box-shadow:0 3.5rem 9rem rgba(0,0,0,.38),0 0 3rem rgba(67,104,224,.12)}
.review-number{font:500 .5rem/1 var(--mono);letter-spacing:.2em;color:#8facff}.review-full-card blockquote{position:relative;margin:2.25rem 0 2.6rem;font-size:clamp(1.12rem,1.65vw,1.55rem);line-height:1.55;color:#f0f4ff;overflow-wrap:anywhere;word-break:break-word}
.review-full-person{display:flex;align-items:center;gap:1rem;margin-top:auto}.review-full-person img,.review-full-avatar{width:58px;height:58px;flex:0 0 58px;min-width:58px;min-height:58px;border-radius:50%;object-fit:cover;aspect-ratio:1/1;border:1px solid rgba(143,176,255,.38);background:rgba(255,255,255,.06)}.review-full-avatar{display:grid;place-items:center;border:1px solid rgba(143,176,255,.38);background:rgba(85,124,255,.14);font:600 .72rem var(--mono);color:#d3ddff}.review-full-person h2{font-size:1.05rem;font-weight:600}.review-full-person p{margin-top:.35rem;font:400 .48rem/1.55 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.journal-hero{min-height:100vh}.journal-index{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:4rem;background:var(--line);border:1px solid var(--line)}.journal-index-card{display:block;min-height:260px;padding:2rem;background:#07112e;transition:background .38s ease,transform .5s var(--ease)}.journal-index-card:hover{background:#0b1b46;transform:translateY(-3px)}.journal-index-card:active{transform:translateY(0) scale(.995)}.journal-index-card>p{font:500 .52rem var(--mono);letter-spacing:.18em;text-transform:uppercase;color:#8facff}.journal-index-card h2{margin-top:2rem;font-size:2.2rem;font-weight:520}.journal-index-card span{display:block;margin-top:1rem;max-width:46ch;color:var(--muted);line-height:1.7}.journal-empty{padding:3rem;color:var(--muted)}.journal-article{max-width:980px;margin:0 auto;padding:11rem 3vw 8rem}.journal-article header h1{margin:1rem 0 2.25rem;font-size:clamp(4rem,9vw,8.5rem);font-weight:520;line-height:1;letter-spacing:-.045em}.journal-article header .lead{position:relative;z-index:1;max-width:58ch;margin:0}.journal-cover{width:100%;max-height:620px;object-fit:cover;margin:4rem 0;border-radius:12px}.journal-body{max-width:720px;margin:4rem auto;font-size:1.15rem;line-height:1.9;color:rgba(233,239,255,.82)}.journal-body p+p{margin-top:1.8rem}

/* Clean editorial motion: no handwritten annotations or light-swipe effects. */
.page{opacity:0;transform:translate3d(0,18px,0);filter:none;transition:opacity .58s ease,transform .72s var(--ease)}body.ready .page{opacity:1;transform:none;filter:none}body.leaving .page{opacity:0;transform:translate3d(0,-10px,0);filter:none;transition:opacity .24s ease,transform .3s ease}
.transition{inset:0;left:0;top:0;width:auto;height:auto;visibility:hidden;opacity:0;background:rgba(2,6,25,.94);filter:none;transform:none;will-change:opacity}.transition.on{visibility:visible;animation:cleanDepart .3s ease both}.transition.arrive{visibility:visible;animation:cleanArrive .46s ease both}@keyframes cleanDepart{from{opacity:0}to{opacity:1}}@keyframes cleanArrive{from{opacity:1}to{opacity:0}}
.button{transition:color .28s ease,background .35s ease,border-color .35s ease,transform .45s var(--ease),box-shadow .45s ease}.button:hover{transform:translateY(-2px);box-shadow:0 14px 42px rgba(60,101,255,.24)}.button:active{transform:translateY(0) scale(.985)}
@media(max-width:900px){.top{padding:1.1rem}.top nav{display:none}.hero{padding:7rem 1.2rem 5rem;min-height:auto}.hero-grid{grid-template-columns:1fr;gap:3rem}.hero h1{font-size:clamp(3.6rem,18vw,6rem)}.player{transform:none}.meta{grid-template-columns:1fr 1fr}.scroll-cue{display:none}.section{padding:6rem 1.2rem}.story-grid{grid-template-columns:1fr;gap:2.5rem}.facts,.principles,.services,.work-grid,.journal-index{grid-template-columns:1fr}.work-card,.work-grid.has-single-tail .work-card:last-child{min-height:72vw;grid-column:auto}.next{grid-template-columns:1fr;align-items:start}.principle,.service{min-height:260px;padding:2rem}.director-portrait{max-width:74vw}.journal-article{padding:8rem 1.2rem 5rem}footer{display:block;padding:2rem 1.2rem}footer span{display:block;margin-top:.5rem}.footer-social{display:flex;flex-wrap:wrap}}
/* Image-led journal and article reading experience. */
.journal-shell{grid-template-columns:1fr!important}
.journal-index{gap:1px}
.journal-index-card{min-height:0;padding:0;overflow:hidden;display:grid;grid-template-rows:auto 1fr;background:#07112e}
.journal-index-card figure{aspect-ratio:16/9;overflow:hidden;background:#03091f}
.journal-index-card figure img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .8s var(--ease),filter .6s ease;filter:saturate(.78) contrast(1.06)}
.journal-index-card:hover figure img{transform:scale(1.045);filter:saturate(1) contrast(1.04)}
.journal-card-copy{padding:clamp(1.35rem,2.4vw,2.2rem);display:flex;flex-direction:column;align-items:flex-start}
.journal-index-card .journal-card-copy>p{font:500 .5rem/1.6 var(--mono);letter-spacing:.17em;text-transform:uppercase;color:#8facff}
.journal-index-card .journal-card-copy h2{margin-top:1.25rem;font-size:clamp(1.8rem,2.8vw,2.8rem);line-height:1.02}
.journal-index-card .journal-card-copy span{margin-top:.9rem}
.journal-index-card .journal-card-copy b{margin-top:auto;padding-top:1.5rem;font:500 .5rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#9ab3ff}
.journal-index-card.featured{grid-column:1/-1;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);grid-template-rows:1fr}
.journal-index-card.featured figure{aspect-ratio:auto;min-height:430px}
.journal-index-card.featured .journal-card-copy{justify-content:center}
.journal-cover-wrap{margin:4rem 0 0}
.journal-cover{width:100%;max-height:620px;aspect-ratio:3/2;object-fit:cover;margin:0;border-radius:14px;box-shadow:0 3rem 9rem rgba(0,0,0,.38)}
.journal-cover-wrap figcaption{margin-top:.8rem;font:400 .46rem/1.7 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(226,235,255,.45);text-align:right}
.journal-cover-wrap figcaption a:hover{color:#9ab3ff}
.article-meta{display:flex;gap:1.2rem;margin-top:1.6rem;font:500 .5rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#8facff}
.article-meta span+span{padding-left:1.2rem;border-left:1px solid var(--line)}
.article-meta a{color:inherit;transition:color .25s}.article-meta a:hover{color:#fff}
.journal-body h2{margin:3.5rem 0 1rem;font-size:clamp(2rem,4vw,3.35rem);font-weight:500;line-height:1;letter-spacing:-.025em;color:#f4f7ff}
.journal-body h3{margin:2.4rem 0 .75rem;font:600 .66rem/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#9ab3ff}
.journal-body a{color:#a8bdff;text-decoration:underline;text-decoration-color:rgba(168,189,255,.42);text-underline-offset:.22em;transition:color .25s ease,text-decoration-color .25s ease}.journal-body a:hover{color:#fff;text-decoration-color:#fff}
.journal-body ul{margin:1.5rem 0 2rem;padding-left:1.25rem;display:grid;gap:.75rem;color:rgba(233,239,255,.82)}
.journal-body li::marker{color:#86a4ff}
.journal-body blockquote{margin:2.8rem 0;padding:1.5rem 1.7rem;border-left:2px solid #6f91ff;background:linear-gradient(90deg,rgba(73,107,211,.13),transparent);font-size:1.22rem;line-height:1.65;color:#f0f4ff}
.article-figure{width:min(920px,calc(100vw - 2rem));margin:3.5rem 0 3.8rem 50%;transform:translateX(-50%)}
.article-figure img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:14px;box-shadow:0 2.4rem 7rem rgba(0,0,0,.32)}
.article-figure figcaption{max-width:70ch;margin:.85rem auto 0;font:400 .48rem/1.7 var(--mono);letter-spacing:.11em;text-transform:uppercase;text-align:center;color:rgba(226,235,255,.5)}
.article-cta{max-width:760px;margin:5rem auto 3rem;padding:clamp(1.6rem,4vw,3.2rem);border:1px solid rgba(143,176,255,.28);border-radius:18px;background:linear-gradient(145deg,rgba(14,30,73,.85),rgba(5,12,34,.75))}
.article-cta h2{margin:1rem 0 1.8rem;font-size:clamp(2rem,4.8vw,4rem);font-weight:500;line-height:.98}
.back-to-journal{margin-top:1rem}

@media(max-width:900px){
  .top{padding:.75rem 1rem .65rem;display:flex;flex-wrap:wrap;gap:.35rem;background:rgba(2,6,25,.86);backdrop-filter:blur(16px);border-bottom:1px solid rgba(143,176,255,.12)}
  .brand,.back{min-height:42px}.back{padding:.45rem 0}
  .top nav{order:3;width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem;overflow:visible;padding:.25rem 0 .1rem}
  .top nav::-webkit-scrollbar{display:none}
  .top nav a{min-width:0;min-height:38px;display:flex;align-items:center;justify-content:center;padding:.52rem .3rem;border:1px solid rgba(143,176,255,.17);border-radius:99px;background:rgba(10,25,63,.55);color:rgba(233,239,255,.74);font-size:.48rem;letter-spacing:.14em}
  .top nav a.on{background:#315ef3;border-color:#557cff;color:#fff}
  .top nav a::after{display:none}
  .hero{padding-top:12.5rem}
  .hero h1{font-size:clamp(3.35rem,16vw,5.6rem);line-height:.84}
  .lead{font-size:1rem;line-height:1.62}
  .button{min-height:48px;padding:1rem 1.25rem}
  .reviews-page .hero{padding:12.5rem 1rem 5rem}.reviews-page-grid{grid-template-columns:1fr;gap:.8rem;margin-top:2.75rem}.review-full-card{min-height:0;padding:1.5rem}.review-full-card blockquote{margin:1.8rem 0 2.1rem;font-size:1.08rem}.review-full-person p{font-size:.43rem}
  .work-card-copy{left:1.2rem;right:1.2rem;bottom:1.25rem}
  .journal-hero{padding-left:1rem;padding-right:1rem}
  .journal-index{margin-top:2.75rem;gap:.8rem;background:transparent;border:0}
  .journal-index-card,.journal-index-card.featured{display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr;border:1px solid rgba(143,176,255,.2);border-radius:14px}
  .journal-index-card figure,.journal-index-card.featured figure{aspect-ratio:16/10;min-height:0}
  .journal-card-copy{padding:1.25rem}
  .journal-index-card .journal-card-copy h2{font-size:1.75rem;margin-top:.85rem}
  .journal-index-card .journal-card-copy span{font-size:.88rem;line-height:1.55}
  .journal-index-card .journal-card-copy b{padding-top:1.2rem}
  .journal-article{padding:12.5rem 1rem 5rem}
  .journal-article header h1{margin-bottom:1.5rem;font-size:clamp(3rem,13vw,5rem);line-height:1.02;letter-spacing:-.035em}
  .article-meta{flex-wrap:wrap;line-height:1.5}
  .journal-cover-wrap{margin-top:2.5rem}
  .journal-cover{aspect-ratio:4/3;border-radius:10px}
  .journal-cover-wrap figcaption{text-align:left;font-size:.42rem}
  .journal-body{margin:2.8rem auto;font-size:1rem;line-height:1.82}
  .journal-body h2{margin-top:2.8rem;font-size:2rem}
  .journal-body blockquote{margin:2.2rem 0;padding:1.2rem 1.1rem;font-size:1.05rem}
  .article-figure{width:calc(100vw - 2rem);margin-top:2.4rem;margin-bottom:2.7rem}
  .article-figure img{border-radius:10px}
  .article-figure figcaption{text-align:left;font-size:.42rem}
  .article-cta{margin-top:3.5rem}
  footer{padding-bottom:calc(2rem + env(safe-area-inset-bottom))}
}
@media(max-width:1180px) and (min-width:901px){
  .top{padding:1.15rem 2rem}.top nav{gap:clamp(.9rem,1.7vw,1.45rem)}
  .hero{min-height:auto;padding:8rem max(5vw,2rem) 6rem}
  .hero-grid{grid-template-columns:1fr;gap:3.5rem}
  .hero-grid>.player{width:min(920px,100%);margin-inline:auto;transform:none}
  .hero h1{max-width:11ch;font-size:clamp(4.6rem,10vw,7.4rem);line-height:.82}
  .scroll-cue{display:none}
}
@media(min-width:1181px){
  body[data-page="project"] .hero h1{max-width:100%;font-size:clamp(4.8rem,5.6vw,7.1rem)}
}
@media(max-width:600px){
  body[data-page="project"] .hero h1{font-size:clamp(2.65rem,13vw,4.5rem);overflow-wrap:break-word}
  .next,.next>div{min-width:0}.next h2{max-width:100%;overflow-wrap:anywhere}
  .player-controls{left:.65rem;right:.65rem;bottom:.65rem}
  .player-controls>span{display:none}
  .player-control-actions{width:100%;justify-content:flex-end;gap:.4rem}
  .player-controls button{min-height:40px;padding:.65rem .8rem;font-size:.46rem;letter-spacing:.12em}
  .work-card h2{font-size:clamp(1.9rem,10vw,3rem);overflow-wrap:anywhere}
}
@media(max-width:360px){
  .top{padding-inline:.7rem}.brand,.back{font-size:.48rem;letter-spacing:.14em}
  .top nav{gap:.3rem}.top nav a{font-size:.43rem;letter-spacing:.1em}
  .hero,.section{padding-left:.9rem;padding-right:.9rem}
  .hero h1{font-size:clamp(3rem,15vw,4.2rem)}
  .meta{gap:.9rem}.mail{font-size:1.3rem}
}
@media(max-width:420px){.top{font-size:.54rem}.top nav a{padding:.5rem .2rem}.meta{grid-template-columns:1fr}.contact-links .button{width:100%}}

/* Compact, readable navigation for phone and portrait tablet layouts. */
@media(max-width:1180px){
  .top{
    top:max(.65rem,env(safe-area-inset-top));left:.7rem;right:.7rem;
    padding:.68rem .72rem;display:flex;flex-wrap:nowrap;gap:.75rem;
    border:1px solid rgba(143,176,255,.18);border-radius:14px;
    background:rgba(2,6,25,.9);box-shadow:0 12px 36px rgba(1,5,18,.24);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)
  }
  .brand{min-height:40px;font-size:.94rem;letter-spacing:-.02em}
  .back{display:none}
  .mobile-menu-toggle{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:70px;min-height:40px;margin-left:auto;padding:.65rem .8rem;
    border:1px solid rgba(225,234,255,.72);border-radius:999px;
    background:transparent;color:#f2f6ff;
    font:700 .55rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;cursor:pointer
  }
  .top nav{
    position:absolute;top:calc(100% + .5rem);left:0;right:0;
    order:initial;width:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.45rem;padding:.6rem;border:1px solid rgba(143,176,255,.18);
    border-radius:14px;background:rgba(2,6,25,.98);
    box-shadow:0 18px 42px rgba(1,5,18,.3);
    opacity:0;visibility:hidden;transform:translateY(-8px);pointer-events:none;
    transition:opacity .2s ease,transform .2s ease,visibility .2s;
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)
  }
  .top.menu-open nav{opacity:1;visibility:visible;transform:none;pointer-events:auto}
  .top nav a{
    min-width:0;min-height:44px;padding:.65rem .5rem;border-radius:10px;
    font-size:.58rem;letter-spacing:.14em;background:rgba(10,25,63,.6)
  }
  .top nav a.on{background:#315ef3;border-color:#557cff}
  .top nav .mobile-journey{display:flex}
  .hero{padding-top:7.7rem}
  .journal-article{padding-top:7.7rem}
}
@media(max-width:420px){
  .top{padding:.62rem .65rem}
  .brand{font-size:.88rem;letter-spacing:-.02em}
  .top nav a{font-size:.54rem;padding:.62rem .4rem}
  .hero{padding-top:7.25rem}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}.reveal,.page{opacity:1;transform:none}}

/* Phone performance and touch UX: preserve the visual system, remove costly effects. */
@media(max-width:900px){
  html{scroll-behavior:auto}
  body::after,#stars,.noise{display:none!important}
  body::before{position:absolute;background:linear-gradient(148deg,#091944,#040d29 52%,#020619)}
  .top,.top nav,.player-controls button,.overlay-controls button{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .top{background:rgba(2,6,25,.97);box-shadow:0 10px 30px rgba(0,0,0,.24)}
  .page{opacity:1;transform:none;transition:none}
  body.leaving .page{opacity:1;transform:none}
  .transition{display:none!important}
  .hero{padding-bottom:4rem}
  .hero-grid{gap:2.25rem}
  .hero h1{margin:1.15rem 0 1.35rem}
  .meta{margin-top:1.8rem;padding-top:1.1rem}
  .player{width:100%;max-width:100%;padding:5px;border-radius:10px;box-shadow:0 1.5rem 4rem rgba(0,0,0,.4)}
  .player.is-portrait{width:min(82vw,390px)}
  .section{padding-top:4.8rem;padding-bottom:4.8rem;content-visibility:auto;contain-intrinsic-size:680px}
  .facts{margin-top:2.5rem;gap:.65rem;background:transparent;border:0}
  .fact{padding:1.35rem;border:1px solid var(--line);border-radius:12px}
  .work-grid{margin-top:2.75rem;gap:1rem}
  .work-card,.work-grid.has-single-tail .work-card:last-child{min-height:68vw;border-radius:12px;content-visibility:auto;contain-intrinsic-size:260px}
  .work-card img,.work-card video{transition:none}
  .principles,.services{margin-top:2.75rem;gap:.75rem;background:transparent;border:0}
  .principle,.service{min-height:0;padding:1.5rem;border:1px solid var(--line);border-radius:12px}
  .principle::after,.service::after{display:none}
  .journal-hero{min-height:auto}
  .journal-body{overflow-wrap:anywhere}
  .review-full-card,.journal-index-card,.article-cta{box-shadow:none}
}
@media(hover:none) and (pointer:coarse){
  .player:hover,.work-card:hover img,.work-card:hover video,.journal-index-card:hover,.journal-index-card:hover figure img,.review-full-card:hover,.button:hover{transform:none;filter:none}
}
