:root { --black:#050506; --white:#f6f4ee; --paper:#f0ede6; --ink:#111113; --muted:rgba(246,244,238,.68); --paper-muted:rgba(17,17,19,.56); --line:rgba(246,244,238,.2); --paper-line:rgba(17,17,19,.16); --purple:#705cff; --lime:#d4ff45; --gutter:clamp(20px,2.8vw,46px); --ease:cubic-bezier(.2,.75,.2,1); }
html[data-theme="light"] .stage { --white:#111113; --muted:rgba(17,17,19,.62); --line:rgba(17,17,19,.2); } html[data-theme="light"] .stage-visual { filter:brightness(1.22) saturate(.72); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; background:#fff; } body { margin:0; color:var(--white); background:#fff; font-family:'Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif; font-size:16px; line-height:1.45; overflow-x:hidden; } body::before { content:""; position:fixed; inset:0; z-index:50; pointer-events:none; opacity:.03; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } a { color:inherit; text-decoration:none; } button { font:inherit; color:inherit; } :focus-visible { outline:2px solid var(--lime); outline-offset:4px; } .page-shell { width:min(calc(100% - 2 * var(--gutter)), 1460px); margin-inline:auto; } .skip-link { position:fixed; z-index:100; top:-70px; left:16px; padding:12px 16px; color:var(--ink); background:var(--lime); transition:top .2s ease; } .skip-link:focus { top:16px; }
.stage { position:relative; isolation:isolate; min-height:100svh; height:max(720px,100svh); overflow:hidden; background:var(--black); clip-path:inset(0 50% 0 50% round 999px); } .intro-ready .stage { animation:stage-reveal 4.8s cubic-bezier(.76,0,.18,1) .35s forwards; } .stage-visual { position:absolute; inset:0; z-index:-1; overflow:hidden; background:radial-gradient(circle at 58% 48%,#15102e 0,#07070c 45%,#020203 100%); } .stage-visual::before { content:""; position:absolute; inset:-15%; background:conic-gradient(from 32deg at 60% 50%,transparent 0deg,rgba(82,58,255,.2) 33deg,transparent 63deg,rgba(133,117,255,.22) 102deg,transparent 142deg,rgba(255,255,255,.09) 180deg,transparent 216deg,rgba(91,69,255,.25) 256deg,transparent 320deg); filter:blur(28px); animation:visual-drift 20s ease-in-out infinite alternate; } .stage-visual[data-tone="mori"] { background:radial-gradient(circle at 58% 48%,#34121b 0,#090709 46%,#020203 100%); } .stage-visual[data-tone="mori"]::before { background:conic-gradient(from 15deg at 56% 46%,transparent 0 30deg,rgba(255,99,102,.28) 62deg,transparent 98deg,rgba(255,200,168,.26) 140deg,transparent 210deg,rgba(255,90,117,.27) 260deg,transparent 320deg); } .stage-visual[data-tone="lumen"] { background:radial-gradient(circle at 58% 48%,#213417 0,#080b08 45%,#020303 100%); } .stage-visual[data-tone="lumen"]::before { background:conic-gradient(from 42deg at 56% 47%,transparent 0 30deg,rgba(188,255,70,.32) 62deg,transparent 98deg,rgba(203,255,157,.25) 140deg,transparent 210deg,rgba(106,205,63,.25) 260deg,transparent 320deg); } .stage-visual[data-tone="north"] { background:radial-gradient(circle at 58% 48%,#102b3f 0,#05090c 45%,#020203 100%); } .stage-visual[data-tone="north"]::before { background:conic-gradient(from 42deg at 56% 47%,transparent 0 30deg,rgba(63,194,255,.3) 62deg,transparent 98deg,rgba(152,233,255,.25) 140deg,transparent 210deg,rgba(42,106,255,.25) 260deg,transparent 320deg); } .stage-grid { position:absolute; inset:0; opacity:.16; background:linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px); background-size:clamp(42px,5vw,84px) clamp(42px,5vw,84px); transform:perspective(700px) rotateX(58deg) scale(1.35) translateY(19%); transform-origin:center bottom; mask-image:linear-gradient(to bottom,transparent 0,#000 42%,transparent 95%); } .stage-ribbon { position:absolute; border:clamp(15px,2.2vw,42px) solid rgba(147,132,255,.78); border-radius:clamp(90px,14vw,240px); filter:blur(4px); box-shadow:0 0 24px rgba(104,82,255,.75),inset 0 0 15px rgba(255,255,255,.6); opacity:.9; mix-blend-mode:screen; } .stage-ribbon::after { content:""; position:absolute; inset:-9px; border:3px solid rgba(255,255,255,.56); border-radius:inherit; filter:blur(4px); } .stage-ribbon-a { width:100%; height:94%; left:-42%; top:-18%; transform:rotate(-13deg); } .stage-ribbon-b { width:103%; height:65%; right:-42%; top:14%; transform:rotate(25deg); } .stage-ribbon-c { width:70%; height:117%; left:26%; bottom:-75%; transform:rotate(14deg); opacity:.55; } .stage-glow { position:absolute; inset:0; background:radial-gradient(ellipse at 50% 62%,transparent 0 33%,rgba(0,0,0,.7) 80%),linear-gradient(180deg,rgba(0,0,0,.32),transparent 30%,rgba(0,0,0,.35)); }
.stage-header { position:absolute; z-index:5; inset:0 var(--gutter) auto; height:74px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; } .menu-pill { display:flex; align-items:center; gap:9px; width:max-content; min-height:38px; padding:0 16px; border:1px solid rgba(255,255,255,.18); border-radius:999px; background:rgba(30,30,35,.6); backdrop-filter:blur(14px); font-size:12px; cursor:pointer; transition:background .3s ease,border-color .3s ease; } .menu-pill:hover { background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.4); } .menu-pill-icon { display:flex; flex-direction:column; gap:4px; width:14px; }.menu-pill-icon i { height:1px; background:currentColor; transition:transform .3s var(--ease); } .menu-pill[aria-expanded="true"] .menu-pill-icon i:first-child { transform:translateY(2.5px) rotate(45deg); }.menu-pill[aria-expanded="true"] .menu-pill-icon i:last-child { transform:translateY(-2.5px) rotate(-45deg); } .stage-logo { justify-self:center; font-size:19px; letter-spacing:-.06em; font-weight:600; } .stage-tools { justify-self:end; display:flex; align-items:center; gap:9px; } .world-clock { font:10px 'DM Mono',monospace; color:var(--muted); margin-right:8px; }.world-clock b { color:var(--white); font-weight:400; }.round-button { width:32px; height:32px; display:grid; place-items:center; border:0; border-radius:50%; background:rgba(255,255,255,.12); backdrop-filter:blur(14px); cursor:pointer; }.round-button:hover { background:rgba(255,255,255,.24); }.theme-button span { width:13px; height:13px; display:block; border-radius:50%; background:var(--white); box-shadow:5px 0 0 0 var(--black); }.mail-button { font-size:15px; }
.stage-intro { position:absolute; top:25%; right:16%; width:min(285px,24vw); }.stage-intro-text { margin:0; color:var(--muted); font-size:14px; line-height:1.45; }.case-rail { position:absolute; left:var(--gutter); bottom:31%; z-index:3; display:flex; flex-direction:column; align-items:flex-start; gap:7px; }.case-pill { min-height:34px; padding:0 16px; display:flex; align-items:center; border:1px solid rgba(255,255,255,.08); border-radius:999px; background:rgba(41,40,47,.8); backdrop-filter:blur(12px); color:var(--white); font-size:13px; white-space:nowrap; cursor:pointer; transition:background .35s var(--ease),color .35s ease,transform .35s var(--ease); }.case-pill:hover,.case-pill.is-active { color:var(--black); background:var(--white); transform:translateX(6px); }.case-pill-all { margin-top:3px; }.stage-title-wrap { position:absolute; z-index:2; left:34%; bottom:9.5%; }.stage-kicker { margin:0 0 14px; color:var(--muted); font:10px 'DM Mono',monospace; letter-spacing:.14em; }.stage-title-wrap h1 { margin:0; font-family:'Fraunces','Times New Roman',serif; font-size:clamp(70px,10.2vw,176px); line-height:.83; letter-spacing:-.08em; font-weight:400; }.stage-title-wrap h1 em { color:rgba(246,244,238,.86); font-style:normal; }.stage-status { position:absolute; z-index:2; right:var(--gutter); bottom:30px; display:flex; align-items:center; gap:10px; color:var(--muted); font:10px 'DM Mono',monospace; text-transform:uppercase; }.stage-status i { width:6px; height:6px; border-radius:50%; background:var(--white); }.stage-scroll { position:absolute; left:50%; bottom:26px; display:flex; align-items:center; gap:10px; color:var(--muted); font:9px 'DM Mono',monospace; letter-spacing:.1em; transform:translateX(-50%); }.stage-scroll i { width:36px; height:1px; background:var(--line); }
.site-menu { position:absolute; z-index:4; inset:0; display:grid; grid-template-columns:1.05fr .9fr 1fr; gap:clamp(22px,4vw,70px); padding:clamp(106px,12vh,160px) var(--gutter) 50px; color:var(--ink); background:var(--paper); opacity:0; visibility:hidden; transform:translateY(-12px); transition:opacity .45s ease,visibility .45s ease,transform .45s var(--ease); }.stage.menu-open .site-menu { opacity:1; visibility:visible; transform:none; }.menu-main { align-self:center; }.menu-label { margin:0 0 22px; color:var(--paper-muted); font:10px 'DM Mono',monospace; letter-spacing:.1em; text-transform:uppercase; }.menu-main nav { display:flex; flex-direction:column; align-items:flex-start; }.menu-main a { font-family:'Fraunces','Times New Roman',serif; font-size:clamp(34px,4vw,62px); line-height:1.05; letter-spacing:-.055em; }.menu-main a + a { margin-top:8px; }.menu-main a:hover { color:var(--purple); }.menu-image { position:relative; align-self:center; justify-self:center; width:min(100%,430px); height:min(70vh,680px); overflow:hidden; border-radius:8px; background:#07070c; }.menu-image-ribbon { position:absolute; width:180%; height:65%; top:7%; left:-38%; border:30px solid #6151e8; border-radius:50%; transform:rotate(29deg); box-shadow:0 0 28px #7768ff,inset 0 0 20px #e7e0ff; }.menu-image::after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 65% 18%,rgba(152,139,255,.32),transparent 36%),linear-gradient(160deg,transparent 20%,rgba(0,0,0,.65)); }.menu-image span { position:absolute; z-index:1; left:20px; bottom:20px; color:#fff; font:11px 'DM Mono',monospace; line-height:1.5; }.menu-news { align-self:center; display:flex; flex-direction:column; gap:10px; }.menu-news article { display:grid; gap:5px; padding:16px 0; border-top:1px solid var(--paper-line); }.menu-news time { color:var(--paper-muted); font:10px 'DM Mono',monospace; }.menu-news strong { max-width:280px; font-size:16px; font-weight:500; }
body.menu-active .stage-header { color:var(--ink); }body.menu-active .menu-pill { border-color:var(--paper-line); background:rgba(255,255,255,.16); }body.menu-active .round-button { background:rgba(17,17,19,.08); }body.menu-active .theme-button span { background:var(--ink); box-shadow:5px 0 0 0 var(--paper); }
.intro-section { display:grid; grid-template-columns:1fr 1.6fr; gap:clamp(40px,10vw,180px); padding-block:clamp(100px,15vw,220px); color:var(--ink); background:var(--paper); }.intro-label,.section-top { display:flex; justify-content:space-between; align-items:flex-start; color:var(--paper-muted); }.mono-label { font:10px 'DM Mono',monospace; letter-spacing:.1em; }.section-index { font:10px 'DM Mono',monospace; }.intro-body { max-width:920px; }.intro-body h2 { margin:0 0 40px; font-size:clamp(45px,7vw,110px); line-height:.9; letter-spacing:-.075em; font-weight:500; }.intro-body h2 span { color:var(--paper-muted); }.intro-body p { max-width:500px; margin-bottom:32px; color:var(--paper-muted); font-size:18px; }.line-link { display:inline-flex; align-items:center; gap:17px; padding-bottom:10px; border-bottom:1px solid var(--paper-line); font-size:14px; }.line-link b,.contact-link b { font-size:20px; font-weight:400; }.line-link:hover { color:var(--purple); border-color:var(--purple); }
.work-section { padding-block:clamp(100px,13vw,190px); color:var(--ink); background:var(--paper); }.work-list { margin-top:70px; border-top:1px solid var(--paper-line); }.work-row { display:grid; grid-template-columns:70px 1fr auto; align-items:center; gap:30px; min-height:135px; border-bottom:1px solid var(--paper-line); transition:padding .35s var(--ease); }.work-row:hover { padding-inline:16px; }.work-row-number { color:var(--paper-muted); font:11px 'DM Mono',monospace; }.work-row h3 { margin:0 0 4px; font-size:clamp(28px,3.3vw,52px); line-height:1; letter-spacing:-.06em; font-weight:500; }.work-row p { margin:0; color:var(--paper-muted); font-size:13px; }.work-row-arrow { font-size:26px; }.work-row:hover .work-row-arrow { color:var(--purple); transform:translate(5px,-5px); }
.services-section { color:var(--white); background:var(--black); padding-block:clamp(100px,14vw,210px); }.services-inner > h2 { margin:80px 0 100px; font-size:clamp(48px,7.5vw,120px); line-height:.9; letter-spacing:-.075em; font-weight:500; }.services-section .section-top { color:var(--muted); }.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); }.services-grid article { min-height:260px; padding:24px; background:var(--black); transition:background .35s ease,color .35s ease; }.services-grid article > span { color:var(--muted); font:10px 'DM Mono',monospace; }.services-grid h3 { margin-top:110px; margin-bottom:12px; font-size:32px; letter-spacing:-.05em; font-weight:500; }.services-grid p { margin:0; color:var(--muted); font-size:14px; }.services-grid article:hover { color:var(--ink); background:var(--lime); }.services-grid article:hover > span,.services-grid article:hover p { color:rgba(17,17,19,.64); }
.contact-section { padding-block:clamp(90px,13vw,180px); color:var(--ink); background:var(--paper); }.contact-card { position:relative; display:flex; min-height:460px; flex-direction:column; justify-content:space-between; padding:clamp(25px,4vw,58px); overflow:hidden; background:var(--lime); }.contact-card::after { content:""; position:absolute; width:56%; aspect-ratio:1; right:-17%; bottom:-58%; border:1px solid rgba(17,17,19,.32); border-radius:50%; box-shadow:0 0 0 42px transparent,0 0 0 43px rgba(17,17,19,.15),0 0 0 85px transparent,0 0 0 86px rgba(17,17,19,.15); }.contact-card h2 { position:relative; z-index:1; margin:80px 0 0; font-size:clamp(48px,7vw,112px); line-height:.86; letter-spacing:-.08em; font-weight:500; }.contact-link { position:relative; z-index:1; display:flex; width:max-content; align-items:center; gap:20px; padding-bottom:10px; border-bottom:1px solid rgba(17,17,19,.5); font-size:14px; }.site-footer { display:flex; justify-content:space-between; gap:25px; padding-block:26px 42px; color:var(--paper-muted); background:var(--paper); font:10px 'DM Mono',monospace; text-transform:uppercase; }
@keyframes visual-drift { from { transform:rotate(-2deg) scale(1); } to { transform:rotate(3deg) scale(1.06) translate(1%, -1%); } } @keyframes stage-reveal { 0% { clip-path:inset(0 50% 0 50% round 999px); } 72% { clip-path:inset(0 7% 0 7% round 36px); } 100% { clip-path:inset(0 0 0 0 round 0); } }
@media (max-width:967px) { .stage { height:100svh; min-height:650px; }.stage-intro { top:23%; right:var(--gutter); width:min(270px,42vw); }.stage-title-wrap { left:var(--gutter); bottom:14%; }.stage-title-wrap h1 { font-size:clamp(62px,11vw,120px); }.case-rail { bottom:28%; }.intro-section { grid-template-columns:1fr; gap:50px; }.services-inner > h2 { margin-top:60px; }.work-row { min-height:116px; }.contact-card { min-height:410px; } }
@media (max-width:620px) { :root { --gutter:20px; }.stage { min-height:690px; }.stage-header { height:65px; }.stage-logo { font-size:16px; }.world-clock { display:none; }.round-button { width:30px; height:30px; }.stage-intro { top:17%; right:var(--gutter); width:56%; }.stage-intro-text { font-size:12px; }.case-rail { left:var(--gutter); right:var(--gutter); bottom:28%; flex-direction:row; flex-wrap:nowrap; overflow-x:auto; padding-bottom:5px; scrollbar-width:none; }.case-rail::-webkit-scrollbar { display:none; }.case-pill { min-height:36px; padding-inline:14px; font-size:12px; }.case-pill:hover,.case-pill.is-active { transform:none; }.case-pill-all { margin-top:0; }.stage-title-wrap { left:var(--gutter); right:var(--gutter); bottom:10%; }.stage-kicker { margin-bottom:12px; }.stage-title-wrap h1 { font-size:clamp(57px,16.2vw,95px); }.stage-status { right:var(--gutter); bottom:25px; }.stage-scroll { display:none; }.stage-ribbon-a { left:-80%; width:180%; }.stage-ribbon-b { right:-95%; width:180%; }.stage-ribbon-c { left:0; bottom:-78%; width:130%; }.intro-section { padding-block:90px; }.intro-body h2 { font-size:clamp(47px,13.5vw,78px); }.intro-body p { font-size:16px; }.work-section { padding-block:90px; }.work-list { margin-top:50px; }.work-row { grid-template-columns:32px 1fr 20px; gap:12px; min-height:105px; }.work-row h3 { font-size:28px; }.work-row p { font-size:12px; line-height:1.35; }.services-section { padding-block:90px; }.services-inner > h2 { margin:55px 0 60px; font-size:clamp(48px,13.5vw,78px); }.services-grid { grid-template-columns:1fr; }.services-grid article { min-height:205px; }.services-grid h3 { margin-top:70px; }.contact-section { padding-block:90px; }.contact-card { min-height:450px; }.contact-card h2 { margin-top:62px; font-size:clamp(48px,13.5vw,78px); }.site-footer { flex-direction:column; align-items:flex-start; gap:10px; padding-bottom:28px; } }

/* Expanded menu: a light editorial board inspired by the reference layout. */
.menu-state-open { display:none; }
body.menu-active .menu-state-closed { display:none; }
body.menu-active .menu-state-open { display:inline; }
body.menu-active .menu-pill { min-width:76px; justify-content:center; }
.site-menu { --menu-card-width:30vw; --menu-card-offset-y:24px; --menu-card-height:calc(100svh - 128px); --menu-gutter:var(--gutter); z-index:4; grid-template-columns:minmax(0,1fr) var(--menu-card-width) minmax(0,1fr); grid-template-rows:minmax(0,1fr); align-items:center; align-content:stretch; justify-content:space-between; gap:clamp(20px,4vw,82px); padding:64px var(--menu-gutter); overflow:hidden; background:#f7f7f4; }
.menu-main { align-self:center; min-width:0; max-height:100%; overflow-y:auto; }
.menu-main nav { gap:8px; }
.menu-main a { color:#171719; font-family:'Fraunces','Times New Roman',serif; font-size:clamp(25px,2.35vw,38px); line-height:1.12; letter-spacing:-.045em; }
.menu-main a + a { margin-top:0; }
.menu-main a:hover { color:#6b5cff; }
.menu-cases { margin-top:48px; }
.menu-cases .menu-label { margin-bottom:12px; color:#77777a; }
.menu-cases > summary { list-style:none; pointer-events:none; }
.menu-cases > summary::-webkit-details-marker { display:none; }
.menu-case-list { display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.menu-case-list a { padding:6px 16px; border:1px solid transparent; border-radius:999px; color:#26262a; background:#ececea; font:15px/1.05 'Space Grotesk',sans-serif; letter-spacing:-.02em; transition:background .2s ease,border-color .2s ease,transform .2s ease; }
.menu-case-list a:hover,.menu-case-list a:focus-visible { border-color:#1b1b1d; background:#fff; transform:translateX(3px); }
.menu-image { grid-column:2; grid-row:1; width:var(--menu-card-width); height:var(--menu-card-height); min-height:0; transform:translateY(var(--menu-card-offset-y)); border-radius:7px; background:linear-gradient(154deg,#050513 0%,#11123f 44%,#06060d 68%,#0d0d25 100%); box-shadow:0 18px 40px rgba(30,30,40,.12); }
.menu-image-ribbon { width:185%; height:76%; top:7%; left:-44%; border-width:26px; border-color:#524ce0; box-shadow:0 0 28px #6d65ff,inset 0 0 18px #ddd8ff; opacity:.9; }
.menu-image-shine { position:absolute; inset:0; background:linear-gradient(155deg,transparent 35%,rgba(89,80,240,.25) 51%,transparent 67%),radial-gradient(circle at 78% 4%,rgba(137,128,255,.4),transparent 29%); mix-blend-mode:screen; }
.menu-image span { left:18px; bottom:18px; color:rgba(255,255,255,.72); }
.menu-news { grid-column:3; grid-row:1; align-self:center; justify-self:end; width:min(100%,270px); max-height:100%; overflow-y:auto; gap:8px; transform:translateX(18px); }
.menu-news .menu-label { margin-bottom:3px; color:#77777a; }
.menu-news article { position:relative; display:grid; grid-template-columns:1fr 72px; align-items:center; gap:10px; min-height:82px; padding:13px 10px 13px 13px; border:0; border-radius:8px; background:#edf1f4; box-shadow:none; }
.menu-news button { position:absolute; top:7px; right:9px; width:18px; height:18px; padding:0; border:0; color:#a9adb0; background:transparent; font-size:20px; line-height:18px; cursor:pointer; }
.menu-news-copy { min-width:0; padding-right:6px; }
.menu-news time { display:block; margin-bottom:7px; color:#34363a; font:11px/1 'DM Mono',monospace; }
.menu-news strong { display:block; max-width:none; color:#3f4246; font:12px/1.25 'Space Grotesk',sans-serif; }
.menu-news-thumb { width:72px; height:54px; border-radius:2px; background:#12131b; }
.thumb-one { background:linear-gradient(140deg,#ba8b65,#e1c3a0 42%,#2b1d19 43%,#111 74%); }
.thumb-two { display:grid; place-items:center; color:#fff; background:#1cc461; font:9px 'DM Mono',monospace; }
.thumb-three { background:linear-gradient(150deg,#a7b0bc,#28313e 43%,#7a8692 44%,#111923 70%); }
.thumb-four { background:linear-gradient(145deg,#d54b34 0 30%,#ebd7b0 30% 57%,#26234e 57%); }
.menu-image { transition:background .55s ease,box-shadow .55s ease; }
.menu-image-ribbon { transition:border-color .55s ease,box-shadow .55s ease,transform .55s ease; }
.menu-image[data-menu-preview="work"],.menu-image[data-menu-preview="default"] { background:linear-gradient(154deg,#050513 0%,#11123f 44%,#06060d 68%,#0d0d25 100%); }
.menu-image[data-menu-preview="services"] { background:radial-gradient(circle at 48% 26%,#1552d6 0 9%,transparent 10%),radial-gradient(circle at 68% 53%,#4d21c7 0 16%,transparent 17%),linear-gradient(150deg,#0a0a27,#05050c 70%); }
.menu-image[data-menu-preview="services"] .menu-image-ribbon { border-color:#3568ff; box-shadow:0 0 32px #426dff,inset 0 0 18px #d7e0ff; transform:rotate(18deg) scale(1.12); }
.menu-image[data-menu-preview="about"] { background:radial-gradient(circle at 30% 22%,#7c6fff 0 12%,transparent 13%),linear-gradient(140deg,#efece3 0 34%,#c4bba8 35% 64%,#171527 65%); }
.menu-image[data-menu-preview="about"] .menu-image-ribbon { border-color:#f4f0e7; box-shadow:0 0 26px rgba(255,255,255,.75),inset 0 0 18px #fff; transform:rotate(-18deg) scale(.9); }
.menu-image[data-menu-preview="contact"] { background:radial-gradient(circle at 70% 25%,#eecb71 0 12%,transparent 13%),linear-gradient(145deg,#162b2b,#0a1010 55%,#2d1816); }
.menu-image[data-menu-preview="contact"] .menu-image-ribbon { border-color:#f2a66d; box-shadow:0 0 30px #ffb37f,inset 0 0 16px #fff2d5; transform:rotate(42deg) scale(.78); }
.menu-image[data-menu-preview="atlas"] { background:radial-gradient(circle at 32% 24%,#4f5dff 0 8%,transparent 9%),linear-gradient(145deg,#11183e,#070710 60%,#241c4d); }
.menu-image[data-menu-preview="atlas"] .menu-image-ribbon { border-color:#7385ff; box-shadow:0 0 32px #6d7dff,inset 0 0 18px #e3e7ff; transform:rotate(31deg) scale(1.14); }
.menu-image[data-menu-preview="mori"] { background:radial-gradient(circle at 64% 30%,#f7b5a8 0 13%,transparent 14%),linear-gradient(145deg,#302526,#191c1d 52%,#73504c); }
.menu-image[data-menu-preview="mori"] .menu-image-ribbon { border-color:#f0b3a4; box-shadow:0 0 30px #f2c4bd,inset 0 0 16px #fff1ec; transform:rotate(-28deg) scale(.88); }
.menu-image[data-menu-preview="lumen"] { background:radial-gradient(circle at 40% 64%,#00c7ae 0 14%,transparent 15%),linear-gradient(145deg,#081f35,#092a30 58%,#061116); }
.menu-image[data-menu-preview="lumen"] .menu-image-ribbon { border-color:#37e0c4; box-shadow:0 0 30px #2de0c8,inset 0 0 16px #d5fff4; transform:rotate(12deg) scale(1.02); }
.menu-image[data-menu-preview="north"] { background:radial-gradient(circle at 68% 26%,#f6df76 0 12%,transparent 13%),linear-gradient(145deg,#28220e,#11100a 55%,#4b3512); }
.menu-image[data-menu-preview="north"] .menu-image-ribbon { border-color:#f3d85a; box-shadow:0 0 30px #f1d34e,inset 0 0 16px #fff4bd; transform:rotate(-8deg) scale(.96); }
body.menu-active .site-menu { opacity:1; visibility:visible; transform:none; }
.site-menu { position:fixed; z-index:20; background:transparent; }
body.menu-active { background:#000; }
body.menu-active .site-menu { background:transparent; }
html[data-menu-theme="dark"] body.menu-active,html[data-menu-theme="dark"] body.menu-active main { background:#000!important; }
html[data-menu-theme="light"] body.menu-active,html[data-menu-theme="light"] body.menu-active main { background:#fff!important; }
html[data-menu-theme="dark"] { background:#000; }
html[data-menu-theme="light"] { background:#fff; }
body.menu-active .site-menu { pointer-events:none; }
body.menu-active .menu-main,body.menu-active .menu-news { position:relative; z-index:30; pointer-events:auto; }
body.menu-active .menu-main a,body.menu-active .menu-case-list a { position:relative; z-index:31; pointer-events:auto; cursor:pointer; }
body.menu-active .menu-news button { position:absolute; z-index:31; pointer-events:auto; cursor:pointer; }
body.menu-active .menu-news article { grid-template-columns:minmax(0,1fr) 72px; align-items:center; }
body.menu-active .menu-news article { grid-template-areas:"copy thumb"; }
body.menu-active .menu-news-copy { grid-area:copy; align-self:center; padding-right:4px; }
body.menu-active .menu-news-thumb { grid-area:thumb; justify-self:end; align-self:center; }
body.menu-active .menu-news article[hidden] { display:none!important; }
body.menu-active .stage-frame { z-index:5; }
body.menu-active .stage-frame.menu-shrinking .stage-intro,
body.menu-active .stage-frame.menu-shrinking .case-rail,
body.menu-active .stage-frame.menu-shrinking .stage-title-wrap,
body.menu-active .stage-frame.menu-shrinking .stage-status,
body.menu-active .stage-frame.menu-shrinking .stage-scroll { opacity:0!important; visibility:hidden!important; pointer-events:none!important; animation:none!important; }
body.menu-closing .stage-intro,
body.menu-closing .case-rail,
body.menu-closing .stage-title-wrap,
body.menu-closing .stage-status,
body.menu-closing .stage-scroll { opacity:0!important; visibility:hidden!important; pointer-events:none!important; animation:none!important; }
body.menu-closing .menu-main,body.menu-closing .menu-news { pointer-events:none; }
.stage-logo { opacity:1; }
body.menu-active .stage-header { position:fixed; z-index:40; }
body.menu-active .menu-image { visibility:hidden; pointer-events:none; }
html[data-menu-theme="light"] body.menu-active { background:#fff; }
/* The surrounding page owns the theme fill; the menu overlay stays transparent. */
html[data-menu-theme="light"] .site-menu { color:#111113; background:transparent; }
html[data-menu-theme="dark"] .site-menu { color:#f7f7f4; background:transparent; }
body.menu-active .site-menu { background:transparent; }
/* Don't reintroduce an opaque overlay or its children when closing state is removed. */
body:not(.menu-active) .site-menu { animation:none; opacity:0; visibility:hidden; background:transparent; pointer-events:none; transition:none; }
html[data-menu-theme="dark"] body.menu-active .stage-header { color:#f7f7f4; }
html[data-menu-theme="light"] body.menu-active .stage-header { color:#111113; }
html[data-menu-theme="light"] body.menu-active .stage-logo .brand-word { color:#111113; }
html[data-menu-theme="dark"] .menu-main a { color:#f7f7f4; }
html[data-menu-theme="dark"] .menu-label,html[data-menu-theme="dark"] .menu-cases .menu-label { color:rgba(247,247,244,.52); }
html[data-menu-theme="dark"] .menu-case-list a { color:#f7f7f4; background:#222225; }
html[data-menu-theme="dark"] .menu-case-list a:hover,html[data-menu-theme="dark"] .menu-case-list a:focus-visible { color:#111113; background:#f7f7f4; }
html[data-menu-theme="dark"] .menu-news article { background:#171719; }
html[data-menu-theme="dark"] .menu-news time,html[data-menu-theme="dark"] .menu-news strong { color:#f7f7f4; }
.theme-toggle { display:grid; }
.theme-toggle .theme-glyph { width:16px; height:16px; display:grid; place-items:center; }
.theme-toggle .theme-icon { width:16px; height:16px; display:none; }
html[data-menu-theme="dark"] .theme-icon-sun { display:block; }
html[data-menu-theme="light"] .theme-icon-moon { display:block; }
body.menu-active .theme-toggle { background:rgba(17,17,19,.08); }
html[data-menu-theme="dark"] body.menu-active .theme-toggle { background:rgba(255,255,255,.12); }
@media (max-width:767px) {
  .site-menu { --menu-card-width:calc(100vw - 28px); --menu-card-offset-y:0px; --menu-card-height:30svh; --menu-gutter:14px; grid-template-columns:minmax(0,1fr); grid-template-rows:var(--menu-card-height) minmax(0,1fr) auto; gap:16px; padding:88px var(--menu-gutter) 12px; }
  .menu-image { grid-column:1; grid-row:1; order:0; align-self:start; }
  .menu-main { grid-column:1; grid-row:2; align-self:stretch; display:flex; flex-direction:column; min-height:0; }
  .menu-main nav { gap:0; }
  body.menu-active .menu-main nav a { min-height:32px; font-size:22px; line-height:1.4; letter-spacing:-.03em; }
  .menu-cases { order:-1; margin:0 0 6px; }
  .menu-cases > summary.menu-label { display:list-item; width:max-content; max-width:100%; margin:0; padding:0; min-height:32px; color:inherit; font:22px/1.4 'Fraunces','Times New Roman',serif; letter-spacing:-.03em; text-transform:none; pointer-events:auto; cursor:pointer; }
  .menu-cases > summary:hover,.menu-cases > summary:focus-visible { text-decoration:underline; text-underline-offset:4px; }
  .menu-case-list { padding:8px 0 12px; }
  .menu-news { grid-column:1; grid-row:3; order:0; display:flex; flex-direction:row; width:100%; max-height:none; min-width:0; gap:6px; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scrollbar-width:thin; padding-bottom:2px; transform:none; }
  .menu-news > .menu-label { display:none; }
  .menu-news article { flex:0 0 230px; min-width:0; }
  .menu-news-thumb { display:block; }
}
/* A fixed full-size scene behind an animated aperture: no scaling or stretching. */
.stage-frame {
  position:relative; width:100%; height:100vh; min-height:100svh; margin:0;
  overflow:hidden; background:var(--black); transform:none;
  clip-path:inset(0 0 0 0 round 0px);
  transition:clip-path .95s cubic-bezier(.76,0,.18,1);
  will-change:clip-path;
}
.stage-frame.menu-shrinking {
  clip-path:inset(var(--menu-inset-top) var(--menu-inset-right) var(--menu-inset-bottom) var(--menu-inset-left) round 8px);
}
.stage,.intro-ready .stage { width:100%; margin:0; clip-path:none; animation:none; }
.stage-header { position:fixed; z-index:40; }
body.menu-motion .stage-visual::before { animation-play-state:paused; }
.menu-main,.menu-news { transition:opacity .28s ease; }
body.menu-active .site-menu { transition:opacity .35s ease,visibility 0s; }
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.01ms!important; }
}
/* The SVG owns all glyph proportions; only its uniform display size changes. */
.stage-logo .brand-word { display:block; width:110px; height:auto; aspect-ratio:754 / 224; color:var(--white); }
@media (max-width:620px) { .stage-logo .brand-word { width:92px; } }
.language-toggle { min-width:58px; min-height:34px; padding:0 10px; border:1px solid transparent; border-radius:999px; color:var(--white); background:rgba(255,255,255,.07); font:11px 'DM Mono',monospace; cursor:pointer; transition:background .2s ease,color .2s ease,border-color .2s ease; }.language-toggle:hover,.language-toggle:focus-visible { color:var(--white); background:rgba(255,255,255,.035); border-color:var(--white); }.mail-button { position:relative; width:30px; min-width:30px; height:28px; min-height:28px; display:flex; align-items:center; justify-content:flex-end; padding:0 8px 0 0; overflow:hidden; border:1px solid transparent; border-radius:999px; background:rgba(255,255,255,.07); transition:width .68s cubic-bezier(.22,.8,.24,1),border-color .25s ease,background-color .25s ease; }.mail-icon { position:absolute; right:8px; top:50%; transform:translateY(-50%); display:block; width:14px; height:10px; border:1px solid currentColor; border-radius:2px; }.mail-icon::after,.mail-icon::before { content:""; position:absolute; top:2px; width:8px; height:1px; background:currentColor; }.mail-icon::before { left:0; transform:rotate(31deg); transform-origin:left center; }.mail-icon::after { right:0; transform:rotate(-31deg); transform-origin:right center; }.contact-tooltip { position:absolute; left:8px; top:50%; width:0; padding:0; overflow:hidden; color:var(--white); background:transparent; border-radius:0; font-size:11px; opacity:0; transform:translateY(-50%); pointer-events:none; transition:opacity .2s ease,width .68s cubic-bezier(.22,.8,.24,1); white-space:nowrap; }.mail-button:hover,.mail-button:focus-visible { width:104px; min-width:104px; border-color:var(--white); background:rgba(255,255,255,.035); }.mail-button:hover .contact-tooltip,.mail-button:focus-visible .contact-tooltip { width:70px; opacity:1; }
.stage-header,.case-rail { opacity:0; visibility:hidden; pointer-events:none; transition:opacity .45s ease,visibility 0s linear .45s; }
body.ui-ready .stage-header,body.ui-ready .case-rail { opacity:1; visibility:visible; pointer-events:auto; transition:opacity .45s ease; }
.stage-scroll,.stage-status { display:none!important; }
/* CSS fallback for browsers where the module timer is delayed or blocked. */
.stage-header,.case-rail { animation:ui-elements-reveal .45s ease 2.9s forwards; }
@keyframes ui-elements-reveal { 0% { opacity:0; visibility:hidden; } 1% { visibility:visible; } 100% { opacity:1; visibility:visible; pointer-events:auto; } }
/* Restore the home UI without restarting the first-visit reveal delay. */
body.ui-ready .stage-header,body.ui-ready .case-rail { animation:none; }
.stage-intro,.stage-title-wrap { transition:opacity .4s ease; }
@media (prefers-reduced-motion:reduce) {
  body.menu-active .stage-frame { transition:none!important; }
  body.menu-closing .menu-main,body.menu-closing .menu-news { transition:none; }
}
/* One pointer: activate the dot and hide native arrows together after mouse input. */
@media (max-width:620px) { .case-rail { left:var(--gutter); right:auto; bottom:28%; width:max-content; flex-direction:column; flex-wrap:nowrap; overflow:visible; padding-bottom:0; } .case-pill { flex:none; } }
.case-pill { border-color:rgba(255,255,255,.14); background:rgba(255,255,255,.08); }.case-pill:hover,.case-pill:focus-visible { color:var(--white); background:rgba(255,255,255,.035); border-color:var(--white); transform:none; }.case-pill.is-active { color:var(--white); background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.32); transform:none; }.menu-pill:hover { background:rgba(255,255,255,.035); border-color:var(--white); }.round-button:hover { background:rgba(255,255,255,.035); border:1px solid var(--white); }
.menu-pill,.language-toggle,.mail-button,.case-pill { border:1px solid rgba(255,255,255,.12); background:rgba(34,34,40,.72); box-shadow:inset 0 1px rgba(255,255,255,.08),0 8px 24px rgba(0,0,0,.16); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); transition:background-color .25s ease,border-color .25s ease,color .25s ease,box-shadow .25s ease; }
.menu-pill:hover,.menu-pill:focus-visible,.language-toggle:hover,.language-toggle:focus-visible,.mail-button:hover,.mail-button:focus-visible,.case-pill:hover,.case-pill:focus-visible { background:rgba(55,55,63,.78); border-color:rgba(255,255,255,.62); box-shadow:inset 0 1px rgba(255,255,255,.16),0 10px 28px rgba(0,0,0,.22); }
.case-pill.is-active { background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.35); }
.mail-button { width:98px!important; min-width:98px!important; padding-right:7px; clip-path:inset(0 0 0 68px round 999px); transition:clip-path 1.8s cubic-bezier(.4,0,.2,1),border-color .35s ease,background-color .35s ease; will-change:clip-path; }.mail-button:hover,.mail-button:focus-visible { width:98px!important; min-width:98px!important; clip-path:inset(0 0 0 0 round 999px); }.mail-icon { right:7px; }.contact-tooltip { left:7px; width:64px; transition:opacity .2s ease .2s; }.mail-button:hover .contact-tooltip,.mail-button:focus-visible .contact-tooltip { width:64px; }
.mail-button,.mail-button:hover,.mail-button:focus-visible { width:32px!important; min-width:32px!important; height:32px; min-height:32px; padding:0; clip-path:none!important; border:0; border-radius:50%; }
.mail-button .contact-tooltip { display:none!important; }
.mail-button .mail-icon { left:50%; right:auto; top:50%; transform:translate(-50%,-50%); }
.stage-canvas { position:absolute; z-index:0; inset:0; width:100%; height:100%; pointer-events:none; opacity:1; mix-blend-mode:screen; }
.stage-grid,.stage-ribbon,.stage-glow { z-index:1; }
.stage-visual:is([data-background="metal"],[data-background="folded-ribbon"]) { background:#03020a url('./assets/folded-ribbon-background.svg?v=20261007-97') var(--ribbon-fallback-left,center) var(--ribbon-fallback-top,center) / var(--ribbon-fallback-width,94%) var(--ribbon-fallback-height,110%) no-repeat; }
.stage-visual:is([data-background="metal"],[data-background="folded-ribbon"])::before { display:none; animation:none; }
.stage-visual:is([data-background="metal"],[data-background="folded-ribbon"]) .stage-canvas { mix-blend-mode:normal; opacity:0; }
.stage-visual[data-renderer="webgl"] .stage-canvas { opacity:1; }
.stage-visual:is([data-background="metal"],[data-background="folded-ribbon"])::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg,rgba(3,2,10,.28),transparent 24%,transparent 55%,rgba(3,2,10,.48)); }