/* ORBIT: cinematic portfolio. Variance 8, motion 8, density 3.
   Native CSS extends the existing static site; no framework migration.
   Radii: buttons 999px, mockups/cards 20px, inputs 10px.
   Layers: artwork 0, content 1, navigation 10, progress 20, native dialog top layer. */
:root{color-scheme:dark;--bg:#0b0d14;--fg:#f8f9fd;--muted:#b5bbca;--line:#2d3446;--card:#131824;--blue:#3b82f6;--purple:#8b5cf6;--accent:#bacaff;--brand-gradient:linear-gradient(110deg,#2563d8,#7341d5);--surface:#101521;--ease:cubic-bezier(.16,1,.3,1)}
body.light{color-scheme:light;--bg:#f7f8fc;--fg:#121827;--muted:#535d70;--line:#d5daea;--card:#edf0f8;--surface:#f7f8fc;--accent:#5346a4}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:96px}body{margin:0;background:var(--bg);color:var(--fg);font-family:'Plus Jakarta Sans',Arial,sans-serif;font-size:16px;line-height:1.7;transition:background .35s,color .35s}body,main{overflow-x:clip}button,input,textarea{font:inherit}button,a,input,textarea{outline-offset:6px}a{color:inherit;text-decoration:none}button{cursor:pointer;color:inherit}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent)}[hidden]{display:none!important}.wrap{width:min(1360px,calc(100% - 112px));margin-inline:auto}
h1,h2,h3{line-height:1.12;letter-spacing:-.05em;font-weight:500;margin:0}h2{font-size:clamp(36px,4.1vw,60px)}h3{font-size:27px;letter-spacing:-.03em}p{margin:0 0 20px}.eyebrow{font-size:12px;font-weight:500;letter-spacing:.2em;color:var(--muted);margin:0 0 28px}.lead{color:var(--muted);font-size:19px;line-height:1.7;font-weight:400}.nav{height:80px;display:flex;align-items:center;gap:30px;position:relative;z-index:10}.brand{display:inline-flex;align-items:center;flex-shrink:0}.brandlogo{width:166px;height:auto;display:block;mix-blend-mode:normal}.light .brandlogo{filter:grayscale(1) invert(1);mix-blend-mode:multiply}.nav nav{display:flex;gap:32px;margin-left:auto;font-size:14px}.nav nav a{transition:color .25s}.nav nav a:hover{color:var(--accent)}
.primary,.outline{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:18px;min-height:50px;padding:13px 26px;border:1px solid transparent;border-radius:999px;background:linear-gradient(var(--button-surface,var(--bg)),var(--button-surface,var(--bg))) padding-box,var(--brand-gradient) border-box;color:var(--fg);font-size:14px;font-weight:600;white-space:nowrap;box-shadow:none;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s,color .25s}
.primary:before,.outline:before{content:'';position:absolute;inset:0;z-index:-1;background:var(--brand-gradient);border-radius:inherit;opacity:0;transform:translateY(104%);transition:transform .45s var(--ease),opacity .25s}
.primary:hover,.outline:hover,.primary:focus-visible,.outline:focus-visible{color:#fff;box-shadow:0 10px 28px #6048bd25;transform:translateY(-2px)}.primary:hover:before,.outline:hover:before,.primary:focus-visible:before,.outline:focus-visible:before{opacity:1;transform:translateY(0)}.primary:active,.outline:active{transform:scale(.98)}.navcta{min-height:44px;padding:10px 23px}.textlink{display:inline-flex;align-items:center;min-height:44px;border-bottom:1px solid var(--line);font-size:14px;transition:color .25s,border-color .25s}.textlink:hover{color:var(--accent);border-color:var(--accent)}
.theme{border:1px solid var(--line);background:var(--card);border-radius:999px;display:flex;align-items:center;padding:4px;gap:2px;min-height:44px;flex-shrink:0}.theme span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font-size:16px}.theme span:last-child,.light .theme span:first-child{background:var(--brand-gradient);color:#fff}.light .theme span:last-child{background:none;color:var(--fg)}
.hero{position:relative;isolation:isolate;min-height:660px;min-height:clamp(580px,calc(100svh - 80px),840px);display:flex;align-items:center;padding-block:70px 105px}.hero-inner{position:relative;z-index:1}.hero-copy{width:min(850px,76%)}.hero h1{font-size:clamp(48px,5.5vw,84px);line-height:1.1;letter-spacing:-.065em;margin:0 0 30px}.hero h1 span{color:#c3d0fc}.hero .lead{max-width:480px;margin:0}.hero .actions{display:flex;gap:28px;align-items:center;margin-top:34px}.hero-art{position:absolute;inset:-80px 0 -40px;z-index:0;pointer-events:none;overflow:hidden;mask-image:linear-gradient(180deg,transparent,#000 12%,#000 68%,transparent 100%)}.hero-art img{width:100%;height:100%;display:block;object-fit:cover;object-position:center 55%;opacity:.9}.hero:after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,var(--bg) 0%,#0b0d14d9 25%,#0b0d1460 52%,transparent 74%)}.light .hero-art{opacity:.35;mix-blend-mode:multiply}.light .hero:after{background:linear-gradient(90deg,var(--bg),#f7f8fcd9 28%,#f7f8fc60 60%,transparent)}.light .hero h1 span{color:#50489a}.hero .primary{--button-surface:#0b0d14}.light .hero .primary{--button-surface:#f7f8fc}
.proof{position:relative;z-index:1;margin-top:-28px;padding-bottom:36px;color:var(--muted);font-size:14px;display:flex;align-items:center;gap:28px}.proof p{margin:0;white-space:nowrap}.proof strong{font-weight:500;color:var(--fg)}.proof span{height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--line))}.proof span:last-child{background:linear-gradient(90deg,var(--line),transparent)}
.section{padding-top:110px;padding-bottom:24px;position:relative}.sectionhead{display:block;margin-bottom:58px}.sectionhead p{font-size:17px;color:var(--muted);margin:24px 0 0;max-width:560px}.sectionhead p br{display:none}#arbeiten{padding-top:95px}.projects{display:grid;grid-template-columns:1.22fr .88fr;align-items:start;gap:64px}.project{display:block;width:100%;text-align:left;background:none;padding:0;border:0;min-width:0;position:relative;perspective:1400px}.project:nth-child(2){margin-top:160px}.projectimage{position:relative;overflow:hidden;border:1px solid #818da249;border-radius:20px;background:var(--card);aspect-ratio:1.42;transform:rotateY(6deg) rotateZ(-2deg);box-shadow:0 34px 80px #03081855,0 1px 0 #ffffff20 inset;transition:transform .8s var(--ease),box-shadow .6s}.project:nth-child(2) .projectimage{aspect-ratio:.95;transform:rotateY(-7deg) rotateZ(3deg)}.light .projectimage{box-shadow:0 30px 65px #24365d23}.projectimage>img{display:block;width:100%;height:auto;transition:transform 1s var(--ease)}.project:hover .projectimage,.project:focus-visible .projectimage{transform:rotateY(0) rotateZ(0) translateY(-8px);box-shadow:0 40px 90px #2332713d}.project:hover .projectimage>img{transform:translateY(-18px)}.browserbar{height:34px;background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:center;position:relative;z-index:1;color:var(--muted)}.browserbar span{font-size:12px}.browserbar b{position:absolute;left:16px;top:15px;width:20px;height:3px;border-radius:3px;background:var(--muted);opacity:.5}.projecttitle{display:flex;justify-content:space-between;align-items:center;margin-top:32px}.projecttitle h3{font-size:31px}.project p{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:10px 0 0;color:var(--muted);font-size:14px}.project p span{font-size:12px;border-left:1px solid var(--line);padding-left:12px}.project:after{content:'Design ansehen';display:inline-block;margin-top:20px;font-size:14px;color:var(--accent);border-bottom:1px solid var(--line)}
.offer{padding-top:150px}.services{display:grid;grid-template-columns:1.2fr 1fr;gap:24px}.services article{position:relative;padding:40px;border-radius:20px;border:1px solid var(--line);background:var(--card);overflow:hidden}.services article:first-child{grid-row:span 2;min-height:390px;display:flex;flex-direction:column;justify-content:flex-end;background:radial-gradient(ellipse at 10% 0%,#3b82f621,transparent 75%),var(--card)}.services article:first-child h3{font-size:clamp(32px,3.2vw,46px);max-width:380px}.services article:nth-child(2){background:linear-gradient(135deg,#8b5cf60c,transparent),var(--card)}.services h3{margin-bottom:18px}.services p{color:var(--muted);font-size:16px;max-width:400px;margin:0}.services article:before{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(120deg,#3b82f608,#8b5cf61a);opacity:0;transition:opacity .5s}.services article:hover:before{opacity:1}.services article>*{position:relative}
.about{display:grid;grid-template-columns:1.1fr 1fr;gap:110px;padding-top:160px;padding-bottom:50px}.about .lead{font-size:22px;margin-top:24px}.about>div:last-child{padding-top:42px;max-width:520px;font-size:17px;color:var(--muted)}.about .textlink{color:var(--fg)}.process-heading{font-size:clamp(32px,3.8vw,52px);max-width:700px;margin-bottom:54px}.process{display:grid;grid-template-columns:repeat(3,1fr);gap:50px;padding-bottom:115px}.process article{border-top:1px solid var(--line);padding-top:30px}.process span{font-size:14px;color:var(--accent)}.process h3{font-size:25px;margin:22px 0 18px;max-width:360px}.process p{font-size:16px;color:var(--muted);margin:0;max-width:380px}
.configsection{padding:130px 0 90px;background:radial-gradient(ellipse at 75% 35%,#6352b115,transparent 65%);border:0}.configsection:before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,var(--bg),transparent 25%,transparent 75%,var(--bg))}.configsection>.wrap{position:relative;width:min(1120px,calc(100% - 112px))}.configsection .sectionhead{margin-bottom:45px}.steps{list-style:none;padding:0;margin:0 0 42px;display:flex;counter-reset:steps}.steps li{flex:1;padding-bottom:18px;border-bottom:1px solid var(--line);color:var(--muted);font-size:14px}.steps li:before{counter-increment:steps;content:'0' counter(steps);margin-right:12px;font-size:12px}.steps li.active{color:var(--accent);border-color:var(--accent)}#stepcontent{min-height:290px}#stepcontent h3{font-size:25px;margin-bottom:24px}.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.choice{position:relative;padding:26px;display:flex;flex-direction:column;gap:10px;border:1px solid var(--line);border-radius:20px;background:var(--bg);min-height:190px;cursor:pointer;transition:transform .35s var(--ease),border-color .3s}.choice:hover{transform:translateY(-4px);border-color:var(--accent)}.choice:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.choice input{width:20px;height:20px;align-self:flex-end;margin:0 0 15px;accent-color:var(--purple)}.choice strong{font-size:18px;font-weight:500;line-height:1.4}.choice small{color:var(--muted);font-size:14px;line-height:1.6}.budgets{margin-top:26px}.budgets p{margin-bottom:14px}.budgets label{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;min-height:44px;padding:9px 15px;margin:0 7px 10px 0;cursor:pointer;font-size:14px}.budgets input{accent-color:var(--purple)}.formfooter{border-top:1px solid var(--line);padding-top:25px;margin-top:24px;display:flex;align-items:center;justify-content:space-between;gap:16px}.formfooter>span{font-size:13px;color:var(--muted)}.fields{display:grid;grid-template-columns:1fr 1fr;gap:22px}.fields label{display:flex;flex-direction:column;gap:8px;font-size:14px}.fields label:last-child{grid-column:1/-1}input[type=text],input[type=email],textarea{width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--fg);font-size:16px}textarea{resize:vertical}.summary{font-size:14px;border:1px solid var(--line);padding:16px 20px;border-radius:20px;margin-bottom:24px;color:var(--muted)}#error{min-height:25px;color:#f29eaa;margin-top:16px}.light #error{color:#ad263d}.previewnote{font-size:14px;max-width:760px;color:var(--muted);margin:26px 0 0}footer{padding-block:48px;display:flex;justify-content:space-between;align-items:center;gap:24px}footer p,footer>span{font-size:13px;color:var(--muted);margin:0}dialog{width:min(1200px,92vw);max-height:92svh;margin:auto;padding:0;border:1px solid var(--line);border-radius:20px;background:var(--bg);color:var(--fg)}dialog::backdrop{background:#050710ce;backdrop-filter:blur(12px)}.dialogbar{position:sticky;top:0;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:18px;background:var(--bg);border-bottom:1px solid var(--line);padding:14px 20px;font-size:14px}dialog img{width:100%;display:block}.dialogbar .outline{min-height:42px}
.scroll-progress{position:fixed;inset:auto 0 0;height:3px;z-index:50;pointer-events:none;background:#bacaff20}
.scroll-progress-fill{display:block;width:100%;height:100%;background:var(--brand-gradient);transform-origin:left;transform:scaleX(0)}
.light .scroll-progress{background:#3b373320}
.intro-pending .scroll-progress{visibility:hidden}
@media(prefers-reduced-motion:no-preference){.hero .eyebrow{animation:enter .9s .05s both}.hero h1{animation:enter 1.1s .15s both}.hero .lead{animation:enter 1s .3s both}.hero .actions{animation:enter 1s .4s both}.hero-art img{animation:planet-drift 18s ease-in-out infinite;transform:translate3d(var(--orbit-x,0px),var(--orbit-y,0px),0);transition:translate 1s var(--ease)}.motion-pending{opacity:0;translate:0 40px}.motion-ready{opacity:1;translate:0 0;transition:opacity 1s var(--reveal-delay,0ms),translate 1.1s var(--ease) var(--reveal-delay,0ms)}@keyframes enter{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}@keyframes planet-drift{0%,100%{scale:1}50%{scale:1.055}}}
@supports(animation-timeline:scroll()){@media(prefers-reduced-motion:no-preference){.scroll-progress-fill{animation:reading-progress linear both;animation-timeline:scroll(root)}@keyframes reading-progress{to{transform:scaleX(1)}}}}
@supports(animation-timeline:view()){@media(min-width:1024px) and (prefers-reduced-motion:no-preference){.hero-art{animation:hero-depth linear both;animation-timeline:view();animation-range:exit 0% exit 100%}#arbeiten .projectimage{animation:mockup-arrive linear both;animation-timeline:view();animation-range:entry 0% entry 100%}@keyframes hero-depth{from{translate:0 0;opacity:1}to{translate:0 100px;opacity:.1}}@keyframes mockup-arrive{from{translate:0 70px}to{translate:0 0}}}}
@media(min-width:1700px){.hero h1{font-size:88px}.hero-art img{object-position:center 52%}}
@media(max-width:1100px){.wrap{width:calc(100% - 64px)}.nav{gap:20px}.nav nav{gap:22px}.hero h1{font-size:clamp(44px,5.5vw,66px)}.hero-copy{width:80%}.projects{gap:34px}.project:nth-child(2){margin-top:110px}.about{gap:60px}.services article{padding:30px}.configsection>.wrap{width:calc(100% - 64px)}}
@media(max-width:767px){.wrap{width:calc(100% - 40px)}.nav{height:76px;gap:12px}.brandlogo{width:148px}.nav nav,.navcta{display:none}.theme{margin-left:auto}.hero{min-height:690px;padding-top:42px;padding-bottom:290px;align-items:flex-start}.hero-copy{width:100%}.hero h1{font-size:clamp(36px,6.5vw,50px);line-height:1.14;letter-spacing:-.055em;margin-bottom:24px}.hero .eyebrow{font-size:11px;letter-spacing:.14em;margin-bottom:24px}.hero .lead{font-size:16px;max-width:420px}.hero .lead br{display:none}.hero .actions{gap:22px;flex-wrap:wrap;margin-top:26px}.hero-art{inset:200px -18% -20px;mask-image:linear-gradient(180deg,transparent,#000 28%,#000 72%,transparent)}.hero-art img{object-position:68% center;opacity:.85}.hero:after{background:linear-gradient(180deg,var(--bg) 10%,#0b0d14b0 34%,transparent 65%)}.light .hero:after{background:linear-gradient(180deg,var(--bg) 10%,#f7f8fcb0 34%,transparent 65%)}.proof{margin-top:-35px;padding-bottom:0;display:block;text-align:center}.proof p{white-space:normal;font-size:13px}.proof span{display:none}.section,#arbeiten{padding-top:76px}.sectionhead{margin-bottom:40px}h2{font-size:35px}.sectionhead p{font-size:16px;margin-top:20px}.projects{grid-template-columns:1fr;gap:52px}.project:nth-child(2){margin-top:0}.projectimage,.project:nth-child(2) .projectimage{transform:none;aspect-ratio:1.16}.project:hover .projectimage{transform:translateY(-4px)}.projecttitle{margin-top:22px}.projecttitle h3{font-size:27px}.project:after{margin-top:14px}.browserbar{height:30px}.browserbar span{font-size:11px}.services{grid-template-columns:1fr;gap:16px}.services article,.services article:first-child{grid-row:auto;min-height:0;padding:30px}.services article:first-child{min-height:250px}.services article:first-child h3{font-size:34px}.services h3{font-size:25px}.about{grid-template-columns:1fr;gap:20px;padding-bottom:0}.about>div:last-child{padding-top:0;font-size:16px}.about .lead{font-size:20px}.about .lead br{display:none}.process-heading{font-size:35px;margin-bottom:36px}.process{grid-template-columns:1fr;gap:34px;padding-bottom:40px}.process article{padding-top:22px}.process h3{margin:15px 0;font-size:24px}.process p{max-width:100%}.configsection{padding-top:85px;padding-bottom:50px}.configsection>.wrap{width:calc(100% - 40px)}.choices{grid-template-columns:1fr;gap:12px}.choice{min-height:112px;padding:20px 54px 20px 20px}.choice input{position:absolute;right:18px;top:22px;width:22px;height:22px}.choice strong{font-size:17px}.steps li{font-size:12px}.steps li:before{display:block;margin:0 0 8px}.fields{grid-template-columns:1fr;gap:16px}.formfooter{flex-wrap:wrap;gap:12px}.formfooter .primary,.formfooter .outline{padding:12px 18px;font-size:13px}.formfooter>span{font-size:12px}.previewnote{font-size:13px}footer{flex-wrap:wrap;padding-block:35px;gap:18px}footer p{width:100%;order:2}.dialogbar{padding:12px;align-items:flex-start;font-size:12px}.dialogbar .outline{font-size:12px;padding:8px 14px}.hero-art img{animation-duration:22s}}
@media(max-width:370px){.hero{min-height:660px}.hero h1{font-size:32px}.hero .actions{gap:15px}.hero .primary{padding:12px 20px}.formfooter>span{order:3;width:100%;text-align:center}.brandlogo{width:135px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.hero-art img{transform:none!important;scale:1!important}.motion-pending,.motion-ready{opacity:1;translate:none}.scroll-progress{display:block}}
@media(prefers-reduced-transparency:reduce){dialog::backdrop{backdrop-filter:none;background:#050710f5}}

/* Oblique browser mockups: retain the perspective on hover, never zoom the artwork. */
.projects{gap:76px;padding:18px 12px 30px}
.project{perspective:1800px}
.projectimage{transform:rotateX(calc(10deg + var(--tilt-y,0deg))) rotateY(calc(-17deg + var(--tilt-x,0deg))) rotateZ(-4deg);transform-origin:50% 50%;animation:none!important;transition:transform .65s var(--ease),box-shadow .5s;box-shadow:12px 35px 65px #03081866,0 1px 0 #ffffff22 inset}
.project:nth-child(2) .projectimage{transform:rotateX(calc(10deg + var(--tilt-y,0deg))) rotateY(calc(17deg + var(--tilt-x,0deg))) rotateZ(4deg)}
.project:hover .projectimage,.project:focus-visible .projectimage{transform:rotateX(calc(10deg + var(--tilt-y,0deg))) rotateY(calc(-17deg + var(--tilt-x,0deg))) rotateZ(-4deg) translateY(-5px)}
.project:nth-child(2):hover .projectimage,.project:nth-child(2):focus-visible .projectimage{transform:rotateX(calc(10deg + var(--tilt-y,0deg))) rotateY(calc(17deg + var(--tilt-x,0deg))) rotateZ(4deg) translateY(-5px)}
.projectimage>img,.project:hover .projectimage>img{transform:none;transition:none}
.browserbar{background:var(--surface);box-shadow:0 1px 0 #ffffff0b inset}
.about h2{font-size:clamp(34px,3.4vw,50px)}
@media(max-width:767px){.projects{padding:10px 6px 20px;gap:50px}.projectimage,.project:hover .projectimage,.project:focus-visible .projectimage{transform:rotateX(4deg) rotateY(-6deg) rotateZ(-2deg)}.project:nth-child(2) .projectimage,.project:nth-child(2):hover .projectimage,.project:nth-child(2):focus-visible .projectimage{transform:rotateX(4deg) rotateY(6deg) rotateZ(2deg)}.about h2{font-size:34px}}
@media(prefers-reduced-motion:reduce){.projectimage{transition:none}.project:hover .projectimage,.project:focus-visible .projectimage{transform:rotateX(10deg) rotateY(-17deg) rotateZ(-4deg)}.project:nth-child(2):hover .projectimage,.project:nth-child(2):focus-visible .projectimage{transform:rotateX(10deg) rotateY(17deg) rotateZ(4deg)}}

.project:nth-child(2) .projectimage{aspect-ratio:1.36}

/* The same brand gradient connects display typography and outlined CTAs. */
.gradient-text,.hero h1 .gradient-text,.light .hero h1 .gradient-text{background:var(--brand-gradient);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
@media(forced-colors:active){.gradient-text,.hero h1 .gradient-text,.light .hero h1 .gradient-text{background:none;color:CanvasText;-webkit-text-fill-color:CanvasText}}

/* Product mockups are photographed/generated devices, with real project designs on screen. */
.projects{grid-template-columns:1fr 1fr;gap:48px;padding:0;align-items:start}
.project:nth-child(2){margin-top:100px}
.projectimage.laptop-mockup,.project:nth-child(2) .projectimage.laptop-mockup{aspect-ratio:1.5;background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible;transform:translateY(0);animation:none!important;transition:transform .7s var(--ease)}
.projectimage.laptop-mockup>img{width:100%;height:100%;object-fit:contain;transform:none;filter:drop-shadow(0 28px 25px #00000025)}
.project:hover .projectimage.laptop-mockup,.project:focus-visible .projectimage.laptop-mockup,.project:nth-child(2):hover .projectimage.laptop-mockup,.project:nth-child(2):focus-visible .projectimage.laptop-mockup{transform:translateY(-8px) rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg));box-shadow:none}
.projecttitle{margin-top:18px}
@media(max-width:767px){.projects{grid-template-columns:1fr;gap:48px}.project:nth-child(2){margin-top:0}.projectimage.laptop-mockup,.project:nth-child(2) .projectimage.laptop-mockup{aspect-ratio:1.5;transform:none}.project:hover .projectimage.laptop-mockup,.project:focus-visible .projectimage.laptop-mockup,.project:nth-child(2):hover .projectimage.laptop-mockup,.project:nth-child(2):focus-visible .projectimage.laptop-mockup{transform:none}.projecttitle{margin-top:12px}}
@media(prefers-reduced-motion:reduce){.project:hover .projectimage.laptop-mockup,.project:focus-visible .projectimage.laptop-mockup,.project:nth-child(2):hover .projectimage.laptop-mockup,.project:nth-child(2):focus-visible .projectimage.laptop-mockup{transform:none}}

/* A shorter continuous story: hero, studio, work, workflow, contact. */
main{background:radial-gradient(ellipse 800px 600px at 86% 32%,#3b82f60b,transparent 75%),radial-gradient(ellipse 1000px 650px at 15% 69%,#8b5cf60b,transparent 78%)}
.section,#arbeiten{padding-top:78px;padding-bottom:10px}
.sectionhead{margin-bottom:35px}
.sectionhead h2{font-size:clamp(35px,3.8vw,54px)}
.sectionhead p{margin-top:18px}
.studio-summary{position:relative;margin-top:-15px;padding-block:32px 20px;display:grid;grid-template-columns:1.16fr 1fr;align-items:center;gap:80px}
.studio-metric{display:flex;align-items:center;gap:26px;min-width:0}
.studio-metric strong{font-size:clamp(100px,10.5vw,158px);font-weight:500;line-height:1;letter-spacing:-.075em;white-space:nowrap}
.studio-metric h2{font-size:clamp(22px,2.1vw,30px);letter-spacing:-.035em;line-height:1.35}
.studio-text h3{font-size:20px;line-height:1.4;margin-bottom:13px;letter-spacing:-.025em}
.studio-text p{color:var(--muted);font-size:16px;line-height:1.75;margin:0;max-width:440px}
.projects{gap:44px}
.project:nth-child(2){margin-top:55px}
.offer{padding-top:90px}
.website-timeline{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.website-timeline:before{content:'';position:absolute;top:23px;left:23px;right:23px;height:1px;background:var(--brand-gradient);opacity:.55}
.website-timeline li{position:relative;padding-right:30px}
.timeline-node{position:relative;display:grid;place-items:center;width:46px;height:46px;border:1px solid var(--line);border-radius:50%;background:var(--bg);font-size:12px;color:var(--accent);margin-bottom:23px}
.website-timeline h3{font-size:22px;letter-spacing:-.025em;margin-bottom:12px}
.website-timeline p{font-size:15px;line-height:1.65;color:var(--muted);margin:0;max-width:235px}
.configsection{padding-top:90px;padding-bottom:60px;background:transparent}
.configsection:before{display:none}
.configsection>.wrap{width:min(1120px,calc(100% - 112px))}
.motion-pending{opacity:.85;translate:0 10px}
.motion-ready{transition:opacity .65s,translate .8s var(--ease)}
/* Keep the existing cinematic composition; rotate it gently through pointer input. */
.hero{perspective:1800px}
.hero-inner{z-index:3;pointer-events:none}
.hero-copy>*{pointer-events:auto}
.hero-art{animation:none!important;translate:0 0!important}
.hero-art img{transform:rotateX(var(--planet-rx,0deg)) rotateY(var(--planet-ry,0deg)) rotateZ(var(--planet-rz,0deg));transform-origin:75% 52%;transition:transform .65s var(--ease),translate .65s var(--ease);user-select:none;-webkit-user-drag:none}
.hero.is-dragging .hero-art img{transition:transform .08s linear;animation-play-state:paused}
.planet-interface{position:absolute;z-index:2;right:0;top:8%;width:44%;height:80%;perspective:1000px}
.planet-drag{position:absolute;inset:0;background:transparent;border:0;border-radius:50%;padding:0;cursor:grab;touch-action:pan-y}
.planet-drag:active,.hero.is-dragging .planet-drag{cursor:grabbing}
.planet-drag:focus-visible{outline:1px solid var(--accent);outline-offset:-30px}
.planet-nav{position:absolute;inset:0;pointer-events:none;transform:rotateZ(var(--planet-rz,0deg));transform-origin:60% 50%;transition:transform .65s var(--ease)}
.planet-nav a{position:absolute;pointer-events:auto;font-size:12px;letter-spacing:.03em;line-height:1;min-height:40px;display:flex;align-items:center;gap:9px;padding:9px 13px 9px 10px;border:1px solid #c0ceff49;border-radius:999px;background:#0b0d14cc;color:#e6ecff;backdrop-filter:blur(8px);transition:background .25s,border-color .25s,transform .25s}
.planet-nav a:before{content:'';width:5px;height:5px;border-radius:50%;background:#b9caff;box-shadow:0 0 0 3px #c0ceff20}
.planet-nav a:nth-child(1){right:37%;top:19%}
.planet-nav a:nth-child(2){right:9%;top:48%}
.planet-nav a:nth-child(3){right:29%;top:78%}
.planet-nav a:hover,.planet-nav a:focus-visible{background:#263556e8;border-color:#c0ceff;transform:translateY(-2px)}
.light .planet-nav a{background:#f7f8fce8;border-color:#6963a780;color:#2f3154}.light .planet-nav a:before{background:#5346a4}.light .planet-nav a:hover{background:#e4e9fb}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:1100px){.studio-summary{gap:35px;grid-template-columns:1.1fr 1fr}.studio-metric{gap:20px}.studio-metric strong{font-size:110px}.studio-metric h2{font-size:23px}.website-timeline li{padding-right:20px}}
@media(max-width:767px){
 .section,#arbeiten{padding-top:56px}.sectionhead{margin-bottom:28px}.sectionhead h2{font-size:34px}
 .studio-summary{margin-top:-25px;grid-template-columns:1fr;padding-block:22px 0;gap:23px}.studio-metric{gap:22px}.studio-metric strong{font-size:104px}.studio-metric h2{font-size:25px}.studio-text h3{font-size:18px;margin-bottom:10px}.studio-text p{font-size:15px;max-width:100%}
 .projects{gap:38px}.project:nth-child(2){margin-top:0}.offer{padding-top:62px}
 .website-timeline{grid-template-columns:1fr;gap:24px}.website-timeline:before{top:23px;bottom:23px;left:22px;right:auto;width:1px;height:auto;background:var(--brand-gradient)}.website-timeline li{padding:0 0 0 70px;min-height:75px}.timeline-node{position:absolute;left:0;top:0;margin:0}.website-timeline h3{font-size:20px;margin:3px 0 8px}.website-timeline p{max-width:100%;font-size:15px}
 .configsection{padding-top:60px;padding-bottom:40px}.configsection>.wrap{width:calc(100% - 40px)}
 .planet-interface{display:none}.hero-art img{transform:none}
}
@media(prefers-reduced-motion:reduce){.hero-art img{transform:none!important}.planet-drag{cursor:default}.planet-nav{transform:none}.motion-pending,.motion-ready{opacity:1;translate:none}}
@media(prefers-reduced-transparency:reduce){.planet-nav a{background:#0b0d14;backdrop-filter:none}.light .planet-nav a{background:#f7f8fc}}

/* Warm daylight palette. Preserve ORBIT's blue-violet brand accent.
   Taste direction: studio portfolio, variance 8 / motion 7 / density 3.
   Coupled transforms make room for the planet without reflowing the page. */
body.light{--bg:#f0eae1;--fg:#3b3733;--muted:#696158;--line:#d6ccbf;--card:#e9e1d6;--surface:#f5efe7;--accent:#66549b;background:var(--bg)}
.light .brandlogo{filter:none;mix-blend-mode:multiply}
.light .nav{background:transparent;border-bottom:1px solid #d6ccbf70;gap:30px}
.light .nav nav a{color:#534b43}
.light .nav nav a:hover,.light .nav nav a:focus-visible{color:var(--accent)}
.light .theme{background:#e7ded2;border-color:#d6ccbf}
.light .theme span:last-child{color:var(--muted)}
.light .navcta,.light .hero .primary{--button-surface:var(--bg);box-shadow:none}
.light .navcta:hover,.light .navcta:focus-visible{color:#fff}
.light .hero-art{opacity:1;mix-blend-mode:multiply;mask-image:linear-gradient(180deg,transparent,#000 12%,#000 70%,transparent 100%)}
.light .hero-art img{opacity:1;filter:none;mix-blend-mode:normal}
.light .hero:after{background:linear-gradient(90deg,var(--bg) 0%,#f0eae1e8 17%,#f0eae144 40%,transparent 60%)}
.light .hero h1{color:var(--fg)}
.light .hero .lead{color:var(--muted)}
.light .textlink{color:#534b43;border-color:#b8aa99}
.light .textlink:hover{color:var(--accent);border-color:var(--accent)}
.light .studio-metric h2,.light .studio-text h3{color:var(--fg)}
.light .timeline-node{background:var(--bg);border-color:#cbbdab}
.light .planet-nav a{background:#f5efe7f5;border-color:#cbbdab;color:#534b43;box-shadow:0 3px 12px #65513c0a;backdrop-filter:none}
.light .planet-nav a:before{background:var(--accent);box-shadow:0 0 0 3px #66549b11}
.light .planet-nav a:hover,.light .planet-nav a:focus-visible{background:#e8ded1;border-color:#a397b4;color:#504568}
.light .projectimage.laptop-mockup>img{filter:drop-shadow(0 20px 20px #715a401a)}
.light .choice{background:var(--surface)}
.light input[type=text],.light input[type=email],.light textarea{background:var(--surface)}
.light main{background:radial-gradient(ellipse 900px 650px at 86% 32%,#d4bda61a,transparent 75%),radial-gradient(ellipse 1000px 650px at 15% 69%,#cfc3dc15,transparent 78%)}

/* Layered orbital hero: background / free planet / navigation share no matte.
   One stage transform couples the planet and labels; copy has a matching easing. */
.hero{--hero-ease:cubic-bezier(.22,1,.36,1);perspective:none}
.hero-space{position:absolute;inset:-80px 0 0;z-index:0;pointer-events:none;overflow:hidden;mask-image:linear-gradient(180deg,transparent 0%,#000 15%,#000 68%,transparent 100%)}
.hero-space img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;opacity:.85}
.light .hero-space img{opacity:1}
.hero:after{z-index:1;background:linear-gradient(90deg,#0b0d14ed 0%,#0b0d14c4 30%,#0b0d1433 57%,transparent 73%)}
.light .hero:after{background:linear-gradient(90deg,#f0eae1f5 0%,#f0eae1dc 28%,#f0eae166 48%,transparent 66%)}
.hero-inner{z-index:3}
.hero-copy{transform-origin:left center;transition:transform 1.05s var(--hero-ease);width:min(850px,76%)}
.hero h1{scale:1;transition:none}
.planet-interface{position:absolute;z-index:2;right:1%;top:50%;width:min(48vw,700px);height:auto;aspect-ratio:1;translate:0 -50%;perspective:1200px}
.planet-stage{position:absolute;inset:0;scale:.82;transform-origin:center;transition:scale 1.05s var(--hero-ease);pointer-events:none}
.hero .hero-art,.light .hero .hero-art{inset:0;z-index:0;mask-image:none;mix-blend-mode:normal;opacity:1;scale:1;translate:none!important;overflow:visible;animation:none!important;transform-origin:center}
.hero .hero-art img,.light .hero .hero-art img{width:100%;height:100%;object-fit:contain;object-position:center;opacity:1;mix-blend-mode:normal;animation:none;scale:1;filter:none;transform-origin:center;transform:rotateX(var(--planet-rx,0deg)) rotateY(var(--planet-ry,0deg)) rotateZ(var(--planet-rz,0deg));transition:transform .65s var(--ease)}
.hero.is-dragging .hero-art img{transition:transform .08s linear}
.planet-drag{inset:10% 4%;pointer-events:auto;z-index:1}
.planet-nav{inset:0;z-index:2;scale:1;transform-origin:center;transform:rotateZ(var(--planet-rz,0deg));transition:transform .65s var(--ease)}
.planet-nav a{font-size:13px;min-height:44px;padding:12px 17px;gap:10px;box-shadow:0 6px 25px #04071140}
.planet-nav a:nth-child(1){right:57%;top:19%}
.planet-nav a:nth-child(2){right:0;top:48%}
.planet-nav a:nth-child(3){right:25%;top:80%}
.light .planet-nav a{background:#f5efe7;border-color:#cbbdab;box-shadow:0 6px 25px #715a4026}
@media(min-width:768px){
 .hero{min-height:clamp(540px,76svh,740px);padding-block:56px 80px}
 .hero h1{font-size:clamp(42px,4.8vw,74px)}
}
@media(min-width:768px) and (prefers-reduced-motion:no-preference){
 .hero:has(.planet-interface :focus-visible) .planet-stage,.hero.is-dragging .planet-stage{scale:1}
 .hero:has(.planet-interface :focus-visible) .hero-copy,.hero.is-dragging .hero-copy{transform:scale(.9) translateX(-8px)}
}
@media(min-width:768px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .hero:has(.planet-interface:hover) .planet-stage{scale:1}
 .hero:has(.planet-interface:hover) .hero-copy{transform:scale(.9) translateX(-8px)}
}
/* The page keeps one palette, with subtle depth between the main chapters. */
.nav nav a{position:relative}
.nav nav a:after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--brand-gradient);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav nav a:hover:after,.nav nav a:focus-visible:after{transform:scaleX(1)}
.studio-summary{padding-block:38px 28px;isolation:isolate}
.studio-summary:before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);opacity:.5}
.studio-metric strong{background-size:150% 100%;background-position:0% 50%;transition:background-position 1s}
.studio-metric:hover strong{background-position:100% 50%}
.projecttitle h3{transition:translate .6s var(--ease),color .4s}
.project:hover .projecttitle h3,.project:focus-visible .projecttitle h3{translate:6px 0;color:var(--accent)}
.project:after{transition:color .3s,border-color .3s,translate .6s var(--ease)}
.project:hover:after,.project:focus-visible:after{border-color:var(--accent);translate:6px 0}
.website-timeline:before{transform-origin:left;transition:transform 1.4s var(--ease)}
.timeline-node{transition:background .5s,color .5s,border-color .5s,transform .6s var(--ease)}
.website-timeline li:hover .timeline-node{background:var(--brand-gradient);border-color:transparent;color:#fff;transform:translateY(-4px)}
.configsection{isolation:isolate}
.configsection:after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 75% 60%,#7358bc14,transparent 65%)}
.light .configsection:after{background:radial-gradient(ellipse at 75% 60%,#cab8aa28,transparent 65%)}
@media(prefers-reduced-motion:no-preference){
 .website-timeline.motion-pending:before{transform:scaleX(0)}
 .website-timeline.motion-ready:before{transform:scaleX(1)}
 .studio-metric.motion-pending{translate:0 22px;opacity:.6}
 .studio-text.motion-pending{translate:0 14px;opacity:.7}
 .studio-text.motion-ready{transition-delay:.12s}
}
@supports(animation-timeline:view()){
 @media(min-width:768px) and (prefers-reduced-motion:no-preference){
  .projectimage.laptop-mockup>img{animation:device-reveal linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
  .project:nth-child(2) .projectimage.laptop-mockup>img{animation-name:device-reveal-reverse}
  @keyframes device-reveal{from{translate:0 48px;rotate:-3deg}to{translate:0 0;rotate:0deg}}
  @keyframes device-reveal-reverse{from{translate:0 48px;rotate:3deg}to{translate:0 0;rotate:0deg}}
 }
}
@media(max-width:1100px) and (min-width:768px){.planet-interface{right:-3%;width:48vw}.planet-nav a{font-size:12px;padding:11px 13px}.hero-copy{width:80%}}
@media(max-width:767px){
 .light .nav{gap:12px}
 .hero{min-height:730px;padding-bottom:350px}
 .hero-copy{width:100%;transform:none}
 .hero-space{inset:0 0 0;mask-image:linear-gradient(180deg,transparent,#000 35%,#000 73%,transparent)}
 .hero-space img{object-position:65% center}
 .hero:after{background:linear-gradient(180deg,#0b0d14ed 0%,#0b0d14bf 30%,transparent 63%)}
 .light .hero:after{background:linear-gradient(180deg,#f0eae1f5 0%,#f0eae1c9 30%,transparent 63%)}
 .planet-interface{display:block;top:auto;bottom:0;right:50%;width:min(90vw,380px);height:auto;translate:50% 0;aspect-ratio:1}
 .planet-stage{scale:.93}
 .planet-drag{display:none}
 .planet-nav a{font-size:12px;min-height:48px;padding:12px 16px}
 .planet-nav a:nth-child(1){right:58%;top:16%}
 .planet-nav a:nth-child(2){right:0;top:44%}
 .planet-nav a:nth-child(3){right:20%;top:78%}
 .studio-summary{padding-block:28px 0}
 .website-timeline:before{transform-origin:top}
 .website-timeline.motion-pending:before{transform:scaleY(0)}
 .website-timeline.motion-ready:before{transform:scaleY(1)}
}
@media(prefers-reduced-motion:reduce){
 .hero-copy{transform:none!important}.planet-stage{scale:.82}.planet-nav{transform:none}
 .website-timeline:before{transform:none!important}.projecttitle h3,.project:after{translate:none!important}
 .website-timeline li:hover .timeline-node{transform:none}
}
/* ORBIT exhibition: broad project stages, oversized proof, an orbital route.
   Existing assets, brand, anchors and the project configurator stay in place. */
.studio-summary{min-height:380px;margin-top:0;padding-block:60px 45px;grid-template-columns:1.18fr 1fr;gap:75px;overflow:hidden}
.studio-summary:before{display:none}
.studio-orbit{position:absolute;width:85%;height:290px;left:-16%;top:35px;border:1px solid var(--line);border-radius:50%;rotate:-17deg;opacity:.45;pointer-events:none;z-index:-1}
.studio-metric{display:block}
.studio-metric strong{display:block;font-size:clamp(170px,20vw,280px);line-height:.83;letter-spacing:-.085em;margin-left:-12px}
.studio-metric h2{font-size:18px;line-height:1.5;letter-spacing:-.02em;margin:22px 0 0 12px}
.studio-metric h2 br:first-child{display:none}
.studio-metric h2 span{color:var(--muted);font-size:15px;font-weight:400}
.studio-text h3{font-size:clamp(37px,4.1vw,60px);line-height:1.12;letter-spacing:-.055em;margin-bottom:25px}
.studio-text p{max-width:420px;font-size:16px;line-height:1.8}
.work-gallery{padding-top:70px!important}
.work-gallery .sectionhead h2{font-size:clamp(48px,6.5vw,90px);letter-spacing:-.065em;line-height:1.02}
.work-gallery .sectionhead p{max-width:460px}
.projects{display:grid;grid-template-columns:1fr;gap:68px;padding-top:10px}
.project:nth-child(2){margin-top:0}
.project{display:block;perspective:1600px}
.project:after{display:none}
.project-scene{position:relative;height:clamp(380px,43vw,590px);isolation:isolate;overflow:visible;border:0;border-radius:0;background:radial-gradient(ellipse at 56% 50%,#bfa88820,transparent 70%);mask-image:none}
.project-ember .project-scene{background:radial-gradient(ellipse at 50% 40%,#a6516524,transparent 70%)}
.light .project-rks .project-scene{background:radial-gradient(ellipse at 56% 50%,#cdbd9e55,transparent 70%)}
.light .project-ember .project-scene{background:radial-gradient(ellipse at 50% 40%,#d4a1a440,transparent 70%)}
.project .projecttitle{position:absolute;left:1%;top:2%;z-index:0;margin:0;color:var(--fg);opacity:.18}
.project .projecttitle h3{font-size:clamp(120px,20vw,280px);font-weight:500;line-height:.85;letter-spacing:-.085em;translate:none}
.project-ember .projecttitle{left:auto;right:0;top:0}
.project-ember .projecttitle h3{font-size:clamp(100px,15vw,220px)}
.project-backdrop{position:absolute;z-index:1;right:6%;top:8%;width:31%;height:72%;overflow:hidden;border:1px solid var(--line);border-radius:12px;rotate:8deg;opacity:.72;box-shadow:0 25px 65px #03081833;transform:rotateY(-13deg);mask-image:linear-gradient(180deg,#000 60%,transparent);transition:translate 1s var(--ease),rotate 1s var(--ease)}
.project-backdrop img{width:100%;height:auto;display:block}
.project-ember .project-backdrop{right:auto;left:5%;top:12%;width:45%;rotate:-7deg;transform:rotateY(13deg)}
.project-ember .project-backdrop img{width:auto;height:100%;max-width:none}
.project .projectimage.laptop-mockup,.project:nth-child(2) .projectimage.laptop-mockup{position:absolute;z-index:2;left:-3%;bottom:-3%;width:72%;height:auto;aspect-ratio:1.5;transform:none;transition:transform .9s var(--ease)}
.project:nth-child(2) .projectimage.laptop-mockup{left:auto;right:-3%;width:72%}
.project .projectimage.laptop-mockup>img{filter:drop-shadow(0 35px 30px #00000038)}
.light .project .projectimage.laptop-mockup>img{filter:drop-shadow(0 30px 25px #715a4026)}
.project:hover .projectimage.laptop-mockup,.project:focus-visible .projectimage.laptop-mockup,.project:nth-child(2):hover .projectimage.laptop-mockup,.project:nth-child(2):focus-visible .projectimage.laptop-mockup{transform:translateY(-10px) rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg))}
.project:hover .project-backdrop,.project:focus-visible .project-backdrop{translate:0 -14px;rotate:5deg}
.project-ember:hover .project-backdrop,.project-ember:focus-visible .project-backdrop{rotate:-4deg}
.project:hover .projecttitle h3,.project:focus-visible .projecttitle h3{translate:none;color:var(--fg)}
.project-caption{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:40px;margin-top:48px;position:relative;z-index:3;padding-inline:12px}
.project-category{font-size:13px;color:var(--muted)}
.project .project-caption p{font-size:clamp(26px,3.2vw,42px);letter-spacing:-.045em;line-height:1.25;color:var(--fg);display:block;margin:14px 0 0}
.project-detail{justify-self:end;display:flex;flex-direction:column;align-items:flex-end;gap:17px;color:var(--muted);font-size:15px}
.project-open{font-size:14px;color:var(--accent);padding-block:5px;border-bottom:1px solid var(--line);transition:border-color .4s,color .4s}
.project:hover .project-open,.project:focus-visible .project-open{border-color:var(--accent)}
.offer{padding-top:110px!important}
.offer .sectionhead h2{font-size:clamp(40px,5vw,70px)}
.website-timeline{isolation:isolate;gap:25px;margin-top:45px;padding-bottom:30px;min-height:260px}
.website-timeline:before{top:23px;left:0;right:0;height:210px;background:none;border:1px solid var(--line);border-radius:50%;opacity:.8;z-index:-1;transform:none!important;transition:clip-path 1.6s var(--ease);clip-path:inset(0 0 0 0)}
.website-timeline li{padding:4px 8px 0;text-align:center}
.website-timeline li:first-child,.website-timeline li:last-child{padding-top:35px}
.timeline-node{margin:0 auto 22px;width:46px;height:46px;box-shadow:0 0 0 8px var(--bg)}
.website-timeline h3{font-size:clamp(19px,1.8vw,24px);margin-bottom:13px}
.website-timeline p{font-size:14px;max-width:240px;margin-inline:auto;padding:0 4px;background:var(--bg)}
.configsection{position:relative;padding-top:130px;padding-bottom:90px}
.configsection .sectionhead h2{font-size:clamp(44px,6.1vw,82px);line-height:1.06;letter-spacing:-.06em}
.configsection .sectionhead p{max-width:560px;margin-top:25px}
.configsection .sectionhead{margin-bottom:50px}
.contact-space{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;mask-image:linear-gradient(180deg,transparent,#000 40%,transparent 100%);opacity:.12}
.contact-space img{display:block;width:100%;height:100%;object-fit:cover;object-position:80% center}
.light .contact-space{opacity:.3;mix-blend-mode:multiply}
.configsection .choice{background:var(--surface);border-color:var(--line)}
.configsection:after{display:none}
@media(hover:hover) and (pointer:fine) and (min-width:768px){
 .project-detail>span:first-child{opacity:0;translate:0 8px;transition:opacity .5s,translate .7s var(--ease)}
 .project:hover .project-detail>span:first-child,.project:focus-visible .project-detail>span:first-child{opacity:1;translate:0 0}
}
@media(prefers-reduced-motion:no-preference){
 .website-timeline.motion-pending:before{clip-path:inset(0 100% 0 0)}
 .website-timeline.motion-ready:before{clip-path:inset(0 0 0 0)}
}
@supports(animation-timeline:view()){
 @media(min-width:768px) and (prefers-reduced-motion:no-preference){
  .project-backdrop{animation:project-layer linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  @keyframes project-layer{from{translate:0 35px}to{translate:0 -35px}}
 }
}
@media(max-width:1100px) and (min-width:768px){
 .studio-summary{gap:40px}.studio-text h3{font-size:42px}.studio-metric strong{font-size:200px}
 .project-caption{gap:24px}.project-detail{font-size:14px}
 .website-timeline{gap:12px}.website-timeline h3{font-size:19px}.website-timeline li{padding-inline:0}
}
@media(max-width:767px){
 .studio-summary{min-height:0;margin-top:0;padding-block:35px 20px;grid-template-columns:1fr;gap:35px;overflow:visible}
 .studio-orbit{width:115%;height:190px;left:-28%;top:12px}
 .studio-metric strong{font-size:180px;margin-left:-8px}.studio-metric h2{margin:16px 0 0;font-size:17px}.studio-metric h2 span{font-size:14px}
 .studio-text h3{font-size:38px;margin-bottom:18px}.studio-text p{font-size:15px;max-width:460px}
 .work-gallery{padding-top:50px!important}.work-gallery .sectionhead h2{font-size:49px}.work-gallery .sectionhead p{font-size:15px}
 .projects{gap:45px;padding-top:0}.project-scene{height:clamp(230px,68vw,460px);overflow:visible;mask-image:none}
 .project .projecttitle h3{font-size:120px}.project-ember .projecttitle h3{font-size:clamp(75px,20vw,130px)}
 .project-backdrop{right:0;top:15%;width:35%;height:68%;border-radius:8px;opacity:.65}
 .project-ember .project-backdrop{left:0;top:17%;width:42%;height:67%}
 .project .projectimage.laptop-mockup,.project:nth-child(2) .projectimage.laptop-mockup{width:82%;bottom:-2%;left:-3%;right:auto}
 .project:nth-child(2) .projectimage.laptop-mockup{left:auto;right:-3%}
 .project-caption{grid-template-columns:1fr;gap:15px;padding:0;margin-top:32px}
 .project-category{font-size:11px}.project .project-caption p{font-size:26px;margin-top:10px}
 .project-detail{justify-self:start;align-items:flex-start;gap:8px;font-size:14px}
 .project-detail>span:first-child{display:none}
 .offer{padding-top:65px!important}.offer .sectionhead h2{font-size:38px}
 .website-timeline{margin-top:30px;min-height:0;padding-bottom:0;gap:28px}
 .website-timeline:before{left:22px;top:23px;bottom:23px;right:auto;width:1px;height:auto;border:0;border-radius:0;background:var(--brand-gradient);clip-path:none!important}
 .website-timeline li,.website-timeline li:first-child,.website-timeline li:last-child{padding:0 0 0 70px;text-align:left}
 .timeline-node{margin:0;box-shadow:0 0 0 6px var(--bg)}
 .website-timeline h3{font-size:21px;margin:4px 0 8px}.website-timeline p{padding:0;max-width:100%;margin:0;font-size:15px;background:none}
 .configsection{padding-top:75px;padding-bottom:45px}.configsection .sectionhead h2{font-size:clamp(34px,8vw,48px)}.configsection .sectionhead p{font-size:15px;margin-top:20px}.configsection .sectionhead{margin-bottom:35px}
 .contact-space{opacity:.1}.light .contact-space{opacity:.2}
 .project:hover .projectimage.laptop-mockup,.project:focus-visible .projectimage.laptop-mockup,.project:nth-child(2):hover .projectimage.laptop-mockup,.project:nth-child(2):focus-visible .projectimage.laptop-mockup{transform:none}
}
@media(prefers-reduced-motion:reduce){
 .project-backdrop{animation:none!important;translate:none!important;transition:none!important}
 .project:hover .projectimage.laptop-mockup,.project:focus-visible .projectimage.laptop-mockup,.project:nth-child(2):hover .projectimage.laptop-mockup,.project:nth-child(2):focus-visible .projectimage.laptop-mockup{transform:none}
 .website-timeline:before{clip-path:none!important}.project-detail>span:first-child{translate:none}
}
/* A compact configurator, with a quiet introduction beside the decisions. */
.configsection{padding-top:100px;padding-bottom:65px}
.configsection>.wrap{width:min(1280px,calc(100% - 112px));display:grid;grid-template-columns:.8fr 1.25fr;gap:65px;align-items:start}
.configsection .sectionhead{position:sticky;top:110px;margin:0}
.configsection .sectionhead h2{font-size:clamp(38px,4.4vw,60px);line-height:1.09}
.configsection .sectionhead p{font-size:16px;max-width:330px;margin-top:24px}
.config-panel{min-width:0;padding-top:9px}
.config-panel .steps{margin-bottom:25px}
.config-panel .steps li{font-size:12px;padding-bottom:12px}
.config-panel .steps li:before{margin-right:7px}
.config-panel #stepcontent{min-height:0}
.config-panel #stepcontent h3{font-size:22px;letter-spacing:-.035em;margin-bottom:20px}
.config-panel .choices{grid-template-columns:1fr;gap:10px}
.config-panel .choice{display:grid;grid-template-columns:85px 1fr 22px;align-items:center;gap:18px;min-height:101px;padding:13px 18px 13px 10px;border-radius:16px;background:var(--surface)}
.config-panel .choice input{position:static;grid-column:3;grid-row:1;margin:0;align-self:center;width:20px;height:20px}
.choice-visual{grid-column:1;grid-row:1;height:70px;display:grid;place-items:center;overflow:hidden;background:radial-gradient(ellipse at center,#7c6cb61c,transparent 70%);border-radius:10px}
.choice-visual img{display:block;width:100%;height:100%;object-fit:contain;transition:transform .6s var(--ease)}
.choice-copy{grid-column:2;grid-row:1;display:flex;flex-direction:column;gap:5px}
.config-panel .choice strong{font-size:16px;line-height:1.4}
.config-panel .choice small{font-size:13px;line-height:1.5}
.config-panel .choice:hover{transform:translateY(-2px)}
.config-panel .choice:hover .choice-visual img{transform:translateY(-3px) rotate(-3deg)}
.config-panel .formfooter{margin-top:10px;padding-top:18px}
.config-panel #error{min-height:0;font-size:13px;margin:12px 0}
.config-panel .previewnote{font-size:12px;line-height:1.7;margin-top:20px}
.config-panel .budgets{margin-top:20px}
.config-panel .budgets p{font-size:14px;margin-bottom:10px}
.config-panel .budgets label{font-size:12px;padding:7px 11px;margin-bottom:8px}
.config-panel .fields{gap:15px}.config-panel .summary{font-size:13px;padding:14px 16px;margin-bottom:18px}
@media(max-width:1100px) and (min-width:768px){
 .configsection>.wrap{width:calc(100% - 64px);gap:35px;grid-template-columns:.8fr 1.25fr}
 .configsection .sectionhead h2{font-size:40px}
 .config-panel .choice{grid-template-columns:70px 1fr 20px;gap:12px;padding-right:12px}.choice-visual{height:65px}
 .config-panel .steps li:before{display:block;margin-bottom:3px}
}
@media(max-width:767px){
 .configsection{padding-top:70px;padding-bottom:40px}
 .configsection>.wrap{width:calc(100% - 40px);grid-template-columns:1fr;gap:25px}
 .configsection .sectionhead{position:static}.configsection .sectionhead h2{font-size:36px}
 .configsection .sectionhead p{font-size:15px;margin-top:17px;max-width:440px}
 .config-panel{padding-top:0}.config-panel .steps{margin-bottom:20px}.config-panel #stepcontent h3{font-size:21px}
 .config-panel .choice{grid-template-columns:65px 1fr 20px;gap:12px;padding:12px 13px 12px 8px;min-height:95px}
 .choice-visual{height:62px}.config-panel .choice strong{font-size:15px}.config-panel .choice small{font-size:12px}
 .config-panel .steps li:before{display:block;margin:0 0 5px}
 .config-panel .formfooter>span{font-size:11px}
}
@media(prefers-reduced-motion:reduce){.config-panel .choice:hover{transform:none}.config-panel .choice:hover .choice-visual img{transform:none}}

/* Goal illustrations only accompany the decisions they depict. */
.config-panel .choice-plain{grid-template-columns:1fr 22px;min-height:85px;padding:17px 19px}
.config-panel .choice-plain .choice-copy{grid-column:1}
.config-panel .choice-plain input{grid-column:2}
.config-panel .choice:not(.choice-plain){grid-template-columns:100px 1fr 22px;min-height:112px}
.config-panel .choice:not(.choice-plain) .choice-visual{height:88px;background:none;overflow:visible}
@media(max-width:767px){
 .config-panel .choice:not(.choice-plain){grid-template-columns:78px 1fr 20px;gap:12px;min-height:100px}
 .config-panel .choice:not(.choice-plain) .choice-visual{height:74px}
 .config-panel .choice-plain{grid-template-columns:1fr 20px;min-height:82px;padding:16px}
}

/* A sparse starfield across the whole page. Decorative and non-interactive. */
main{position:relative;isolation:isolate}
.page-stars{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;color:#d4dfff}
.space-star{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);background:currentColor;border-radius:50%;opacity:var(--star-opacity);box-shadow:0 0 5px #9aafff35}
.star-glint{background:none;border-radius:0;box-shadow:none}
.star-glint:before,.star-glint:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent,currentColor,transparent)}
.star-glint:before{left:calc(50% - .5px);width:1px}
.star-glint:after{top:calc(50% - .5px);height:1px;background:linear-gradient(90deg,transparent,currentColor,transparent)}
.light .page-stars{color:#9a8baa;opacity:.42}
@media(prefers-reduced-motion:no-preference){.star-glint{animation:star-shimmer 7s var(--glint-delay) ease-in-out infinite}@keyframes star-shimmer{0%,100%{opacity:.35}50%{opacity:.8}}}
@media(max-width:767px){.space-star:nth-child(3n){display:none}.star-glint{scale:.8}.page-stars{opacity:.7}.light .page-stars{opacity:.25}}

/* Continuous washed celestial wallpaper for daylight mode. */
body{position:relative;isolation:isolate}
body:before{opacity:0;transition:opacity 550ms cubic-bezier(.4,0,.2,1);content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(#f0eae166,#f0eae166),url('assets/orbit-sky-washed.webp') center / cover no-repeat}
body.light:before{opacity:1}
body.light{--muted:#534b43}
.light main{background:transparent}
.light .website-timeline p{background:transparent}
.light .contact-space{opacity:.15}
@media(max-width:767px){body.light:before{background-position:60% center}.light .contact-space{opacity:.1}}
/* Mobile art direction: natural flow, readable copy, touch-first controls.
   Desktop composition is retained; every mobile layer has reserved space. */
.mobile-menu{display:none}
@media(max-width:767px){
 html{scroll-padding-top:24px}
 body{font-size:16px;-webkit-text-size-adjust:100%}
 .wrap{width:calc(100% - 40px)}
 .nav{height:72px;gap:8px;align-items:center}
 .nav .brandlogo{width:128px}
 .nav .theme{margin-left:auto;min-height:44px;padding:3px;gap:0}
 .nav .theme span{width:28px;height:32px}
 .mobile-menu{display:block;position:static;flex-shrink:0}
 .mobile-menu summary{min-height:44px;min-width:56px;display:flex;align-items:center;justify-content:center;list-style:none;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-size:12px;cursor:pointer;padding:8px 11px}
 .mobile-menu summary::-webkit-details-marker{display:none}
 .mobile-menu summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
 .mobile-menu[open] summary{border-color:var(--accent);color:var(--accent)}
 .nav .mobile-menu nav{display:grid;position:absolute;top:calc(100% + 6px);right:0;width:min(320px,100%);margin:0;padding:10px;background:var(--surface);border:1px solid var(--line);border-radius:16px;gap:3px;box-shadow:0 18px 50px #00000022;z-index:12}
 .mobile-menu:not([open]) nav{display:none!important}
 .nav .mobile-menu nav a{min-height:48px;padding:12px 15px;display:flex;align-items:center;font-size:15px;border-radius:10px}
 .nav .mobile-menu nav a:after{display:none}
 .nav .mobile-menu nav a:hover,.nav .mobile-menu nav a:focus-visible{background:var(--card)}
 .nav .mobile-menu nav .mobile-project-link{background:var(--brand-gradient);color:#fff;margin-top:5px}
 .hero{display:grid;grid-template-columns:minmax(0,1fr);min-height:0;padding:30px 0 24px;gap:15px;align-items:start}
 .hero-inner{grid-row:1;min-width:0}
 .hero-copy{width:100%;transform:none!important}
 .hero h1{font-size:clamp(29px,8.6vw,44px);line-height:1.12;letter-spacing:-.06em;margin-bottom:22px}
 .hero .eyebrow{font-size:10px;letter-spacing:.14em;margin-bottom:20px}
 .hero .lead{font-size:16px;line-height:1.65;max-width:400px}
 .hero .lead br{display:initial}
 .hero .actions{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:12px;margin-top:23px;max-width:370px}
 .hero .primary{min-height:48px;padding:12px 16px;font-size:13px}
 .hero .textlink{min-height:48px;justify-content:center;text-align:center;font-size:13px}
 .planet-interface{position:relative;grid-row:2;top:auto;bottom:auto;right:auto;translate:none;width:min(calc(100% - 36px),360px);margin:0 auto;height:auto;aspect-ratio:1}
 .planet-stage{scale:.93}
 .planet-nav a{font-size:12px;min-height:48px;padding:12px 15px}
 .planet-nav a:nth-child(1){right:57%;top:16%}
 .planet-nav a:nth-child(2){right:1%;top:43%}
 .planet-nav a:nth-child(3){right:21%;top:79%}
 .hero-space{inset:0;mask-image:linear-gradient(180deg,transparent,#000 36%,#000 78%,transparent)}
 .hero:after{background:linear-gradient(180deg,#0b0d14eb 0%,#0b0d1499 32%,transparent 62%)}
 .light .hero:after{background:linear-gradient(180deg,#f0eae1eb 0%,#f0eae177 32%,transparent 62%)}
 .studio-summary{padding-block:26px 10px;gap:26px;margin-top:0}
 .studio-metric{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:22px}
 .studio-metric strong{font-size:clamp(112px,30vw,150px);line-height:.95;margin-left:-5px}
 .studio-metric h2{font-size:16px;line-height:1.55;margin:0;letter-spacing:-.025em}
 .studio-metric h2 br:first-child{display:block}
 .studio-metric h2 span{font-size:13px}
 .studio-text h3{font-size:clamp(32px,8vw,40px);line-height:1.13;margin-bottom:18px}
 .studio-text p{font-size:15px;line-height:1.8;max-width:520px}
 .studio-orbit{width:110%;left:-25%;top:0;height:160px;opacity:.35}
 .section{padding-top:60px;padding-bottom:0}
 .work-gallery{padding-top:56px!important}
 .work-gallery .sectionhead h2{font-size:clamp(40px,10.5vw,54px);line-height:1.04}
 .sectionhead p,.work-gallery .sectionhead p{font-size:15px;line-height:1.7;margin-top:18px}
 .sectionhead{margin-bottom:28px}
 .projects{gap:48px}
 .project-scene{height:clamp(215px,65vw,390px);overflow:visible;mask-image:none}
 .project .projecttitle h3{font-size:clamp(105px,29vw,160px)}
 .project-ember .projecttitle h3{font-size:clamp(64px,19vw,110px)}
 .project .projectimage.laptop-mockup,.project:nth-child(2) .projectimage.laptop-mockup{width:82%;bottom:-2%;aspect-ratio:1.5}
 .project-backdrop{height:69%;width:34%;right:1%;top:13%;opacity:.6}
 .project-ember .project-backdrop{left:1%;top:14%;width:42%;height:68%}
 .project-caption{margin-top:36px;gap:13px}
 .project-category{font-size:12px;line-height:1.6;display:block}
 .project .project-caption p{font-size:clamp(23px,6.2vw,29px);line-height:1.3;margin-top:10px}
 .project-open{display:inline-flex;align-items:center;min-height:44px;padding-block:8px;font-size:14px}
 .offer{padding-top:66px!important}
 .offer .sectionhead h2{font-size:clamp(33px,8.4vw,43px);line-height:1.12}
 .website-timeline{gap:25px;margin-top:28px}
 .website-timeline li,.website-timeline li:first-child,.website-timeline li:last-child{padding-left:65px;min-height:90px}
 .website-timeline h3{font-size:21px;margin:2px 0 8px}
 .website-timeline p{font-size:15px;line-height:1.7}
 .configsection{padding-top:65px;padding-bottom:40px}
 .configsection>.wrap{width:calc(100% - 40px);gap:26px}
 .configsection .sectionhead h2{font-size:clamp(29px,7.9vw,42px);line-height:1.14}
 .configsection .sectionhead p{line-height:1.7;font-size:15px;margin-top:18px}
 .config-panel .steps{margin-bottom:24px;gap:8px}
 .config-panel .steps li{min-width:0;font-size:12px;line-height:1.45;min-height:58px;padding-bottom:10px}
 .config-panel .steps li:before{font-size:11px;margin-bottom:6px}
 .config-panel #stepcontent h3{font-size:22px;line-height:1.35;scroll-margin-top:22px}
 .config-panel #stepcontent h3:focus{outline:none}
 .config-panel .choice:not(.choice-plain){grid-template-columns:68px minmax(0,1fr) 20px;gap:12px;padding:13px 12px 13px 8px;min-height:112px}
 .config-panel .choice:not(.choice-plain) .choice-visual{height:70px}
 .config-panel .choice-plain{grid-template-columns:minmax(0,1fr) 20px;min-height:98px;padding:17px}
 .config-panel .choice strong{font-size:16px;line-height:1.4}
 .config-panel .choice small{font-size:13px;line-height:1.6}
 .config-panel .choice-copy{min-width:0;gap:6px}
 .config-panel .budgets label{min-height:46px;font-size:13px;padding:9px 12px}
 .config-panel .budgets input{width:18px;height:18px}
 .config-panel .formfooter{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px;padding-top:18px}
 .config-panel .formfooter>span{grid-column:1/-1;grid-row:1;font-size:12px;order:initial;text-align:left;width:auto}
 .config-panel #back{grid-column:1;grid-row:2;min-height:48px}
 .config-panel #next{grid-column:2;grid-row:2;min-height:48px;padding:12px;font-size:13px}
 .config-panel #back[hidden]~#next{grid-column:1/-1}
 .config-panel:has(#next:not([hidden])) .formfooter #next{min-width:0}
 .config-panel .previewnote{font-size:12px;line-height:1.75;margin-top:19px}
 .config-panel .fields{gap:18px}.fields label{font-size:14px}
 .fields input,.fields textarea{font-size:16px;min-height:50px}
 .config-panel:has(.fields) .formfooter{grid-template-columns:auto minmax(0,1fr)}
 .config-panel:has(.fields) #back{padding:12px 15px}
 .config-panel:has(.fields) #next{font-size:12px;white-space:normal;line-height:1.35;min-height:50px}
 .summary{overflow-wrap:anywhere;line-height:1.7}
 footer{padding-block:32px max(25px,env(safe-area-inset-bottom));gap:15px}
 footer .brandlogo{width:128px}footer>span{font-size:11px}footer p{font-size:12px}
 dialog{width:calc(100% - 20px);max-height:calc(100dvh - 24px);border-radius:14px}
 .dialogbar{padding:12px;align-items:center;gap:10px}
 #viewtitle{font-size:11px;line-height:1.5;flex:1;min-width:0}
 .dialogbar .outline{min-height:44px;padding:10px 14px;font-size:12px;flex-shrink:0}
 .light .page-stars{opacity:.2}
}
@media(max-width:359px){
 .wrap,.configsection>.wrap{width:calc(100% - 32px)}
 .nav .brandlogo{width:115px}
 .hero h1{font-size:29px}
 .hero .primary,.hero .textlink{font-size:12px}
 .studio-metric{gap:16px}.studio-metric strong{font-size:108px}.studio-metric h2{font-size:15px}
 .studio-metric h2 span{font-size:12px}
 .config-panel .choice:not(.choice-plain){grid-template-columns:58px minmax(0,1fr) 20px;gap:10px}
 .config-panel .choice small{font-size:12px}.config-panel .choice strong{font-size:15px}
 .config-panel .steps li{font-size:11px}
}
@media(max-width:767px) and (prefers-reduced-motion:no-preference){
 .planet-stage{animation:mobile-orbit-float 9s ease-in-out infinite}
 @keyframes mobile-orbit-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
 .projectimage.laptop-mockup>img{animation:none}
}
@media(max-width:767px) and (prefers-reduced-motion:reduce){.planet-stage{animation:none;transform:none}}

/* A compact social editorial shelf with framed, gently tilted post artwork. */
.insights-section{padding-top:75px;padding-bottom:5px}
.insights-section .sectionhead{margin-bottom:12px}
.insights-section .sectionhead h2{font-size:clamp(35px,4vw,56px)}
.insights-section .sectionhead p{font-size:16px;max-width:520px}
.insights-track{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:36px 25px 30px;perspective:1600px;isolation:isolate}
.insights-track:before{content:'';position:absolute;inset:10% 8% 0;z-index:-1;background:radial-gradient(ellipse at center,#5e4c9220,transparent 70%);pointer-events:none}
.insight-card{border:0;background:none;padding:0;min-width:0;color:var(--fg);text-align:left;cursor:pointer}
.insight-frame{display:block;padding:5px;background:linear-gradient(135deg,#c3ccdc7a,#38425870 32%,#8793a75e);border:1px solid #a9b9de2f;border-radius:14px;transform:rotateY(8deg) rotateZ(-4deg);box-shadow:0 22px 40px #03081533;transition:transform .65s var(--ease),box-shadow .5s}
.insight-frame img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;border-radius:9px}
.insight-card:nth-child(2) .insight-frame{transform:translateY(-16px) rotateY(0) rotateZ(0)}
.insight-card:nth-child(3) .insight-frame{transform:rotateY(-8deg) rotateZ(4deg)}
.insight-card:hover .insight-frame,.insight-card:focus-visible .insight-frame{transform:translateY(-9px) rotateY(0) rotateZ(0);box-shadow:0 30px 55px #24356e35}
.insight-card:nth-child(2):hover .insight-frame,.insight-card:nth-child(2):focus-visible .insight-frame{transform:translateY(-24px)}
.insight-label{display:block;font-size:13px;margin:22px 0 0;color:var(--muted)}
.insights-tools{display:none}
.light .insight-frame{box-shadow:0 20px 40px #715a4029;background:linear-gradient(135deg,#fff8eee0,#b5aea1a0 32%,#efe7d7)}
@media(max-width:767px){
 .insights-section{padding-top:60px}
 .insights-section .sectionhead h2{font-size:34px}
 .insights-section .sectionhead p{font-size:15px}
 .insights-track{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:84%;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:14px;padding:28px 14px 26px;margin-inline:-14px;scrollbar-width:none;overscroll-behavior-x:contain;perspective:none}
 .insights-track::-webkit-scrollbar{display:none}
 .insight-card{scroll-snap-align:center}
 .insight-card .insight-frame,.insight-card:nth-child(2) .insight-frame,.insight-card:nth-child(3) .insight-frame{transform:rotateZ(-2deg);border-radius:12px}
 .insight-card:nth-child(2) .insight-frame{transform:rotateZ(2deg)}
 .insight-card:hover .insight-frame,.insight-card:focus-visible .insight-frame,.insight-card:nth-child(2):hover .insight-frame,.insight-card:nth-child(2):focus-visible .insight-frame{transform:rotateZ(0)}
 .insight-label{font-size:12px;margin-top:17px}
 .insights-tools{display:flex;justify-content:flex-end;gap:10px;margin-top:2px}
 .insights-tools .outline{min-height:44px;padding:10px 18px;font-size:12px}
 .insights-tools .outline:disabled{opacity:.35;cursor:default;pointer-events:none}
}
@media(prefers-reduced-motion:reduce){.insight-frame{transition:none}.insight-card:hover .insight-frame,.insight-card:focus-visible .insight-frame,.insight-card:nth-child(2):hover .insight-frame,.insight-card:nth-child(2):focus-visible .insight-frame{transform:none}}
/* Reserve the mobile slider's controls in normal flow, inside the viewport. */
@media(max-width:767px){
 .insights-section{overflow:visible;padding-bottom:24px}
 .insights-track{min-width:0;max-width:100%;margin-inline:0;padding:28px 12px 36px;grid-auto-columns:88%;scroll-padding-inline:12px}
 .insight-card{align-self:start;overflow:visible;height:auto}
 .insights-tools{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;min-height:70px;margin-top:8px;padding:6px 6px 16px;overflow:visible;isolation:isolate}
 .insights-tools .outline{width:100%;min-width:0;min-height:48px;padding:12px 16px;line-height:1.5}
}

.planet-nav a:nth-child(4){left:7%;right:auto;top:62%}
@media(max-width:767px){.planet-nav a:nth-child(4){left:0;right:auto;top:61%}}


/* Simple galaxy intro, sliding upward into the live page. */
.orbit-intro{display:none;position:fixed;inset:0;z-index:100;overflow:hidden;isolation:isolate;background:#0b0d14;touch-action:none}
.intro-pending .orbit-intro{display:block;will-change:transform}
.intro-pending .site-surface{transform:translateY(100vh);will-change:transform}
.intro-pending,.intro-pending body{overflow:hidden!important;overscroll-behavior:none}
.intro-galaxy{position:absolute;inset:-5%;width:110%;height:110%;object-fit:cover;object-position:60% center;opacity:.48;will-change:transform}
.intro-shade{position:absolute;inset:0;background:radial-gradient(ellipse at center,#0b0d1466 0%,#0b0d14a6 65%,#0b0d14e6 100%);pointer-events:none}
.intro-logo{position:absolute;inset:0;display:grid;place-items:center;opacity:0;will-change:transform,opacity;pointer-events:none}
.intro-logo img{display:block;width:min(350px,calc(100vw - 96px));height:auto;mix-blend-mode:normal;scale:.9;transform-origin:center}
.intro-skip{position:absolute;z-index:1;top:max(22px,env(safe-area-inset-top));right:max(24px,env(safe-area-inset-right));min-height:44px;padding:10px 18px;border:1px solid #adbadc50;border-radius:999px;background:#0b101de8;color:#edf1fb;font-size:13px;line-height:1.6}
.intro-skip:hover,.intro-skip:focus-visible{border-color:#c2d4ff;background:#202b43}
@media(max-width:767px){
 .intro-logo img{width:min(250px,calc(100vw - 80px))}
 .intro-galaxy{object-position:65% center}
 .intro-skip{top:max(15px,env(safe-area-inset-top));right:max(15px,env(safe-area-inset-right));font-size:12px;padding:10px 15px}
}
@media(prefers-reduced-motion:reduce){.orbit-intro{display:none!important}.intro-pending .site-surface{transform:none!important}}

/* Theme snapshots include imagery and the warm sky, keeping one coherent fade. */
.theme-transition::view-transition-old(root),.theme-transition::view-transition-new(root){animation-duration:620ms;animation-timing-function:cubic-bezier(.4,0,.2,1)}
.theme-transition *, .theme-transition *:before,.theme-transition *:after{transition:none!important}
[data-light-src]{transition:opacity 450ms cubic-bezier(.4,0,.2,1)}
.theme-fading [data-light-src]{opacity:0!important;transition-duration:160ms}
.nav,.config-panel,.choice,.theme,.planet-nav a,.mobile-menu nav{transition:background-color 550ms cubic-bezier(.4,0,.2,1),color 550ms cubic-bezier(.4,0,.2,1),border-color 550ms cubic-bezier(.4,0,.2,1)}
.intro-loader{position:absolute;left:50%;top:calc(50% + 75px);translate:-50% 0;width:104px;height:2px;border-radius:2px;overflow:hidden;background:#b5c7ef26;pointer-events:none}
.intro-loader span{display:block;width:100%;height:100%;background:linear-gradient(90deg,#6aaeff,#b191ff);transform:scaleX(0);transform-origin:left}

/* Legal pages remain directly reachable, including without JavaScript. */
.legal-links{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;font-size:13px}
footer .legal-links{width:100%;margin-top:10px}
.legal-links a{display:inline-flex;align-items:center;min-height:44px;color:var(--muted)}
.legal-links a:hover,.legal-links a:focus-visible{color:var(--fg);text-decoration:underline;text-underline-offset:5px}
.legal-back{margin-left:auto;display:inline-flex;align-items:center;min-height:44px;font-size:13px}
.legal-page .theme{margin-left:0}
.legal-content{max-width:920px;padding-block:65px 90px}
.legal-content h1{font-size:clamp(36px,6vw,66px);overflow-wrap:anywhere}
.legal-lead{margin-top:20px;color:var(--muted);font-size:19px}
.legal-content section{margin-top:48px}
.legal-content h2{font-size:24px;letter-spacing:-.025em;line-height:1.35;margin-bottom:18px}
.legal-content p{max-width:75ch;overflow-wrap:anywhere}
.legal-content p a{text-decoration:underline;text-underline-offset:4px}
.legal-content dl{display:grid;grid-template-columns:180px minmax(0,1fr);gap:16px 26px;margin-block:24px}
.legal-content dt{font-weight:600;font-size:14px}
.legal-content dd{margin:0;font-size:14px;overflow-wrap:anywhere}
.legal-pending{color:var(--accent)}
.legal-draft{padding:22px 24px;margin:32px 0;border-left:2px solid var(--accent);background:var(--card);border-radius:0 12px 12px 0}
.legal-draft strong{font-size:14px}.legal-draft p{font-size:14px;margin:8px 0 0;color:var(--muted)}
.legal-home{margin-top:50px}
@media(max-width:767px){.legal-content{padding-block:38px 60px}.legal-content dl{grid-template-columns:1fr;gap:5px}.legal-content dd{margin-bottom:17px}.legal-content h2{font-size:21px}.legal-links{gap:4px 20px}}
@media(max-width:480px){.legal-back{display:none}.legal-page .theme{margin-left:auto}}

/* Smaller devices leave breathing room around the project typography. */
.project .projectimage.laptop-mockup,.project:nth-child(2) .projectimage.laptop-mockup{width:57.6%}
footer.wrap{display:grid;grid-template-columns:auto 1fr auto;gap:24px 32px;align-items:center;border-top:1px solid var(--line);padding-block:36px}
footer .brandlogo{width:180px}
footer p{font-size:13px;line-height:1.5}
footer p span{display:block;color:var(--muted);font-size:12px;margin-top:3px}
footer .legal-links{width:auto;margin:0;justify-content:flex-end;gap:24px;flex-wrap:wrap;font-size:13px}
@media(max-width:767px){
 .project .projectimage.laptop-mockup,.project:nth-child(2) .projectimage.laptop-mockup{width:65.6%}
 footer.wrap{grid-template-columns:auto 1fr;gap:20px;padding-block:30px}
 footer .brandlogo{width:140px}
 footer p{width:auto;order:initial;font-size:12px;text-align:right}
 footer .legal-links{grid-column:1/-1;justify-content:flex-start;gap:10px 24px;border-top:1px solid var(--line);padding-top:14px;font-size:12px}
}