:root{--ink:#0b1a28;--paper:#f3f5f0;--amber:#e8a855;--muted:#8d999c}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--ink);color:var(--paper);font-family:'DM Sans',Arial,sans-serif;font-size:16px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}a{color:inherit;text-decoration:none}button{font:inherit}a,button,summary{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #a383ff;outline-offset:7px}.skip{position:fixed;top:-60px;left:20px;background:var(--amber);color:var(--ink);z-index:99;padding:15px}.skip:focus{top:10px}header{height:100px;margin:0 4.4%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff25}.brand{display:flex;gap:10px;align-items:center;font-size:29px;font-weight:650;letter-spacing:-1.5px}.brand svg{width:36px;height:36px;color:var(--amber)}.brand>span{font-size:13px;align-self:flex-start;margin-top:7px;letter-spacing:0}nav{display:flex;gap:35px;font-size:14px}nav a{padding:12px 0;transition:color .2s}nav a:hover{color:var(--amber)}.nav-cta{font-size:14px;border-bottom:1px solid var(--amber);padding:12px 0}.nav-cta span{margin-left:28px;color:var(--amber)}.hero{padding:35px 4.4% 55px}.eyebrow,.section-label,.photo-top,.photo-caption,.work-count,.contact-top,.price-label{font-size:12px;letter-spacing:1.6px;font-weight:550}.eyebrow{display:flex;justify-content:space-between;color:#b7c2c3}.hero h1{font-size:clamp(48px,5.6vw,88px);line-height:1.08;letter-spacing:-.055em;font-weight:500;margin:60px 0 42px;max-width:78%}.hero h1>span{display:block}.outline{color:var(--paper)}.accent{color:var(--amber)}.hero-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;row-gap:22px;column-gap:30px}.hero-bottom p{line-height:1.55;margin:0;color:#c4cecf;flex:1 1 320px;min-width:260px;max-width:520px}.hero-bottom .pill{flex:0 0 auto;white-space:nowrap}.hero-bottom .scroll-cue{flex:0 0 auto}.pill{display:inline-flex;align-items:center;gap:40px;padding:19px 25px;border-radius:50px;background:var(--amber);color:var(--ink);font-size:15px;font-weight:600;transition:transform .25s,background .25s}.pill:hover{transform:translateY(-4px);background:#f6d9a8}.pill span{font-size:23px;line-height:1}.scroll-cue{font-size:11px;letter-spacing:1.2px;display:flex;align-items:center;gap:26px}.scroll-cue span{font-size:35px}.landscape{height:100vh;min-height:620px;padding:0 4.4%;overflow:hidden}.landscape-frame{position:relative;height:100%;overflow:hidden;transform-origin:50% 50%;will-change:transform}.landscape img{height:115%;width:100%;object-fit:cover;position:absolute;top:-7%;will-change:transform}.landscape-shade{position:absolute;inset:0;background:linear-gradient(180deg,#081a1630,#07181210 30%,#061712a6)}.photo-top{position:absolute;top:35px;left:35px;right:35px;display:flex;justify-content:space-between}.photo-title{position:absolute;bottom:100px;left:6%;font-size:clamp(50px,6.6vw,110px);line-height:1.05;letter-spacing:-.05em}.photo-title em{color:var(--amber);font-style:normal}.photo-caption{position:absolute;bottom:35px;left:6%}.section{padding:120px 6%;display:grid;grid-template-columns:1fr 2.35fr;gap:40px}.section-label{padding-top:12px;color:#a6b5b7}h2{font-size:clamp(38px,4.5vw,76px);line-height:1.1;font-weight:450;letter-spacing:-.05em;margin:0}h2 em{font-style:normal;color:var(--amber)}.muted{color:#8e9b9f}.intro-copy{display:grid;grid-template-columns:1.2fr 1fr;gap:50px;margin-top:40px;color:#b9c3c5;line-height:1.7;font-size:16px}.intro-copy p{margin:0}.work{height:230vh;background:var(--paper);color:var(--ink);position:relative}.work-sticky{height:100vh;min-height:650px;position:sticky;top:0;overflow:hidden;padding:55px 0 30px}.work-heading{margin:0 6% 34px;display:flex;align-items:flex-end;justify-content:space-between}.work-heading .section-label{color:#667574;margin-bottom:18px}.work h2{font-size:clamp(38px,4vw,66px)}.work h2 em{color:#677966}.work-count{font-size:11px;white-space:nowrap}.project-track{display:flex;gap:35px;padding:0 6%;width:max-content;will-change:transform}.project{width:min(66vw,920px);display:block}.project-image{height:min(48vh,510px);padding:35px 55px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}.mint{background:#cdd8cd}.lilac{background:#cec4df}.blue{background:#bacbd2}.project img{width:100%;max-height:100%;height:auto;object-fit:contain;box-shadow:0 18px 32px #18242725;transition:transform .5s}.project:hover img{transform:scale(1.035)}.project-open{position:absolute;right:18px;bottom:18px;border-radius:50%;background:var(--paper);width:46px;height:46px;display:grid;place-items:center;font-size:24px}.project-caption{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0}.project-caption h3{font-size:22px;letter-spacing:-.7px;margin:0;font-weight:550}.project-caption>span{font-size:10px;letter-spacing:.8px}.track-meter{height:2px;background:#0b171d25;margin:10px 6%}.track-meter span{display:block;width:33.33%;height:100%;background:var(--ink);transform-origin:left}.services{padding-top:130px;padding-bottom:140px}.service-list{margin-top:50px}.service-list details{border-top:1px solid #ffffff30}.service-list details:last-child{border-bottom:1px solid #ffffff30}.service-list summary{list-style:none;display:flex;align-items:center;gap:30px;font-size:clamp(23px,2.6vw,42px);letter-spacing:-1px;padding:27px 0;cursor:pointer}.service-list summary::-webkit-details-marker{display:none}.service-list summary>span{font-size:12px;color:var(--amber);letter-spacing:0}.service-list summary>b{margin-left:auto;font-weight:400;color:var(--amber);transition:transform .2s}.service-list details[open] summary>b{transform:rotate(45deg)}.service-list details p{line-height:1.7;max-width:590px;color:#b9c3c5;padding:0 50px 25px;margin:0}.process{padding:85px 6% 100px;background:var(--amber);color:var(--ink);overflow:hidden}.process .section-label{color:#5c4223}.process h2{margin-top:45px;font-size:clamp(55px,7vw,112px)}.process h2 span{color:#8a6530}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;margin-top:65px}.steps article{border-top:1px solid #1b361c55;padding-top:20px}.steps article>span{font-size:13px}.steps h3{margin:35px 0 14px;font-size:23px;font-weight:550;letter-spacing:-.5px}.steps p{line-height:1.6;margin:0;color:#4a3419}.pricing{padding-top:120px;padding-bottom:120px}.price-row{margin-top:50px;display:flex;align-items:center;justify-content:space-between;gap:30px}.price-label{color:#a6b5b7;font-size:11px}.price{font-size:clamp(48px,5vw,80px);letter-spacing:-4px;margin:10px 0}.price span{font-size:24px;letter-spacing:-1px}.light{background:var(--paper)}.price-note{border-top:1px solid #ffffff30;padding-top:25px;margin-top:30px;line-height:1.7;color:#a6b5b7;max-width:680px}.contact{background:var(--paper);color:var(--ink);padding:45px 6% 60px}.contact-top{display:flex;justify-content:space-between}.contact-title{font-size:clamp(62px,13vw,210px);font-weight:500;letter-spacing:-.07em;display:flex;align-items:center;justify-content:space-between;padding:42px 0;line-height:1.1;border-bottom:1px solid #0b171d40;transition:color .2s}.contact-title:hover{color:var(--amber)}.contact-title>span{font-size:clamp(20px,2vw,30px);width:clamp(46px,4.5vw,68px);height:clamp(46px,4.5vw,68px);flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border:1px solid currentColor;border-radius:50%;transition:transform .3s,background .2s,color .2s}.contact-title:hover>span{transform:translate(12px,-12px);background:var(--ink);color:var(--paper)}.contact-hint{display:block;font-size:12px;letter-spacing:.08em;color:#7c8a8d;margin-top:-6px}.contact-bottom{display:flex;justify-content:space-between;margin-top:35px;line-height:1.6}.contact-bottom p{margin:0;color:#52615d}.contact-bottom>div{display:flex;flex-direction:column;align-items:flex-end;font-size:21px}.contact-bottom a:hover{text-decoration:underline}footer{padding:35px 4.4%;display:flex;align-items:center;justify-content:space-between;gap:20px}footer>span{font-size:10px;letter-spacing:1px;color:#b4c1c1}footer button{background:none;border:1px solid #ffffff40;color:#c1cccc;border-radius:30px;padding:10px 14px;font-size:12px;cursor:pointer}body.motion-off *,body.motion-off *::before{scroll-behavior:auto!important;transition:none!important}.motion-off .work{height:auto}.motion-off .work-sticky{height:auto;position:static}.motion-off .project-track{width:auto;flex-wrap:wrap;transform:none!important}.motion-off .project{width:100%}.motion-off .track-meter{display:none}@media(min-width:1600px){.hero{padding-bottom:70px}.hero h1{margin-top:80px}}@media(max-width:800px){header{height:80px}nav{gap:18px}.brand{font-size:25px}.brand svg{width:30px}.nav-cta{font-size:12px}.nav-cta span{margin-left:10px}.hero h1{font-size:10.7vw;margin:55px 0 35px}.hero-bottom{gap:25px;flex-wrap:wrap}.hero-bottom p{font-size:15px}.scroll-cue{display:none}.eyebrow{font-size:10px;letter-spacing:1px}.landscape{height:75vh;min-height:460px}.photo-top{font-size:9px;left:20px;right:20px;top:20px}.section{grid-template-columns:1fr;padding:75px 6%;gap:30px}.intro-copy{gap:25px}.work{height:auto}.work-sticky{height:auto;position:relative;min-height:0;padding:55px 0}.work-count{display:none}.project-track{display:grid;gap:35px;width:auto;transform:none!important}.project{width:100%}.project-image{height:auto;min-height:250px;padding:25px}.project img{max-height:none}.project-caption{align-items:flex-start;flex-direction:column;gap:8px}.project-caption h3{font-size:23px}.track-meter{display:none}.steps{grid-template-columns:1fr 1fr;gap:35px}.process{padding:60px 6%}.price-row{flex-wrap:wrap}.contact-title{font-size:14vw;letter-spacing:-.065em}.contact-bottom>div{font-size:17px}.contact-top{font-size:9px;letter-spacing:.7px}footer{flex-wrap:wrap}footer>span{font-size:9px}.photo-title{bottom:85px}}@media(max-width:520px){nav{display:none}.hero{padding-top:25px;padding-bottom:40px}.hero h1{font-size:11vw;line-height:1.13;letter-spacing:-.065em;margin-top:45px}.hero-bottom{align-items:flex-start;gap:26px}.hero-bottom p br:last-of-type{display:none}.pill{font-size:14px;padding:16px 22px;gap:28px}.hero-bottom .pill{margin-top:5px}.eyebrow>span:last-child{font-size:8px;letter-spacing:.7px}.intro-copy{grid-template-columns:1fr;font-size:16px}.photo-title{font-size:48px}.photo-top{gap:20px;font-size:8px}.steps{gap:30px 20px}.steps h3{font-size:20px}.steps p{font-size:15px}.service-list summary{gap:20px;font-size:24px}.service-list details p{padding-left:34px;padding-right:0}.contact-bottom{flex-direction:column;gap:25px}.contact-bottom>div{align-items:flex-start}.contact-top{gap:20px;font-size:8px}footer .brand{width:100%}.project-image{min-height:180px;padding:20px}footer{padding:30px 6%}.price{letter-spacing:-2px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before{transition:none!important}.work{height:auto}.work-sticky{height:auto;position:relative}.project-track{width:auto;flex-wrap:wrap;transform:none!important}.project{width:100%}.track-meter{display:none}}
.terminal-section{padding:110px 6% 90px;background:#111f25;overflow:hidden}.terminal-intro{display:flex;justify-content:space-between;align-items:flex-end;gap:30px}.terminal-intro .section-label{margin-bottom:28px}.terminal-intro h2{font-size:clamp(38px,4.3vw,70px)}.terminal-intro>p{color:#a8b9bd;line-height:1.7;font-size:15px}.terminal-stage{perspective:1400px;padding:65px 0 30px}.terminal-window{max-width:1100px;margin:auto;background:#081216;border:1px solid #748f8a65;border-radius:12px;box-shadow:0 45px 90px #0005;overflow:hidden;transform-origin:50% 90%;will-change:transform}.terminal-bar{display:flex;align-items:center;gap:15px;background:#1a2c32;border-bottom:1px solid #56716a40;padding:17px 25px;font:13px ui-monospace,SFMono-Regular,Consolas,monospace}.terminal-symbol{font-size:19px;color:var(--amber)}.terminal-bar i{font-style:normal;color:#819a9d}.terminal-version{margin-left:auto;font-size:10px;letter-spacing:1.5px;color:var(--amber);display:inline-flex;align-items:center;gap:7px}.power-led{width:7px;height:7px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 0 rgba(232,168,85,.55);animation:power-pulse 2.2s ease-in-out infinite}@keyframes power-pulse{0%,100%{box-shadow:0 0 0 0 rgba(232,168,85,.55)}50%{box-shadow:0 0 0 6px rgba(232,168,85,0)}}.terminal-screen{height:330px;overflow:auto;padding:30px 35px;font:14px/1.8 ui-monospace,SFMono-Regular,Consolas,monospace;scrollbar-color:#58706b #081216}.terminal-screen p{margin:10px 0}.terminal-greeting{font-family:'DM Sans',Arial,sans-serif;font-size:60px;font-weight:550;letter-spacing:-4px;color:var(--amber);line-height:1.2;margin-bottom:20px}.terminal-greeting span{font-size:17px;vertical-align:top;letter-spacing:0;margin-left:4px}.term-dim{color:#8fa8ad}.term-green{color:var(--amber)}.term-error{color:#ffae9d}.terminal-result{white-space:pre-wrap;overflow-wrap:anywhere;margin-bottom:15px}.terminal-result a{border-bottom:1px solid #8fa8ad}.terminal-result svg{width:70px;height:70px;color:var(--amber)}#terminal-form{border-top:1px solid #36534f70;margin:0 30px;display:flex;align-items:center;gap:15px;padding:20px 0;font:14px ui-monospace,SFMono-Regular,Consolas,monospace}#terminal-form label{color:#c3d6d9;white-space:nowrap}#terminal-form label span{color:#82999e}#terminal-form label b{color:var(--amber);font-weight:400}#terminal-input{border:0;background:transparent;color:var(--paper);font:inherit;outline:none;min-width:0;flex:1;caret-color:var(--amber);padding:8px 0}#terminal-input:focus-visible{outline:1px solid #6f9260;outline-offset:4px}#terminal-form button{background:var(--amber);color:var(--ink);border:0;border-radius:5px;padding:7px 12px;cursor:pointer}.terminal-foot{display:flex;justify-content:space-between;background:#122329;padding:12px 25px;font:10px ui-monospace,monospace;letter-spacing:1px;color:#9ab0b4}.terminal-shortcuts{display:flex;gap:9px;flex-wrap:wrap;align-items:center;max-width:1100px;margin:15px auto 0;transition:opacity .35s ease}.terminal-shortcuts>span{font-size:10px;letter-spacing:1.2px;margin-right:13px;color:#9ab0b4}.terminal-shortcuts button{background:none;border:1px solid #526764;color:#c0cfca;border-radius:30px;padding:9px 13px;font:12px ui-monospace,monospace;cursor:pointer;transition:background .2s,color .2s}.terminal-shortcuts button:hover{background:var(--amber);color:var(--ink);border-color:var(--amber)}@media(max-width:800px){.terminal-section{padding:70px 6%}.terminal-intro{align-items:flex-start;flex-direction:column;gap:10px}.terminal-stage{padding-top:30px}.terminal-screen{padding:24px;height:320px}.terminal-greeting{font-size:45px}#terminal-form{margin:0 20px;font-size:12px;gap:8px}.terminal-intro p br{display:none}.terminal-shortcuts{gap:8px}.terminal-shortcuts button{font-size:12px}.terminal-foot{font-size:9px;padding:12px 20px}.tab-hint{display:none}#terminal-form label>span{display:none}.terminal-bar{padding:16px 20px}}.motion-off .terminal-window{transform:none!important}

/* Scroll travel is clipped at section edges without changing the document scroller. */
.hero,.section,.contact,.terminal-section{overflow:clip}
.scroll-element{will-change:translate,opacity}
.hero h1>span{width:fit-content}
.motion-off .scroll-element{translate:none!important;opacity:1!important}

/* One scroll-driven assembly, with a quiet page around it. */
.terminal-section{height:280svh;padding:0;overflow:visible;position:relative;background:#111f25}
.terminal-pin{position:sticky;top:0;height:100svh;padding:26px 6% 20px;display:flex;flex-direction:column;justify-content:center;overflow:clip}
.terminal-intro{align-items:center;gap:24px}
.terminal-intro .section-label{margin-bottom:14px;font-size:11px}
.terminal-intro h2{font-size:clamp(30px,3.8vw,58px)}
.terminal-intro>p{font-size:14px;margin:0}
.assembly-status{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:24px 0 12px;font:12px ui-monospace,monospace;letter-spacing:.08em;color:#a7b9b8}
#skip-assembly{background:none;border:0;border-bottom:1px solid #90a49b;color:var(--paper);padding:6px 0;font-size:13px;cursor:pointer;letter-spacing:0}
.terminal-stage{position:relative;perspective:1400px;padding:0;width:100%;max-width:1000px;margin:0 auto;isolation:isolate}
.terminal-window{position:relative;z-index:2;overflow:visible;border-radius:12px;transform-origin:center}
.terminal-bar{border-radius:12px 12px 0 0}
.terminal-foot{border-radius:0 0 12px 12px}
.terminal-screen{height:clamp(130px,28svh,290px);padding:22px 30px}
.terminal-greeting{font-size:42px;margin-bottom:12px}
#terminal-form{padding:10px 0}
.terminal-section:not(.assembly-ready) #terminal-output,.terminal-section:not(.assembly-ready) #terminal-form>*{visibility:hidden}
.terminal-shortcuts{width:100%;max-width:1000px;margin:16px auto 0;min-height:38px}
.assembly-parts{position:absolute;inset:0;z-index:1;pointer-events:none}
.hardware-part{position:absolute;width:30%;height:43%;background-image:url('../images/terminal-components.webp');background-size:300% 200%;background-repeat:no-repeat;will-change:transform,opacity}
.part-0{left:14%;top:10%;background-position:0 0}
.part-1{left:40%;top:17%;background-position:50% 0}
.part-2{left:56%;top:3%;background-position:100% 0}
.part-3{left:7%;top:53%;background-position:0 100%}
.part-4{left:35%;top:54%;background-position:50% 100%}
.part-5{left:62%;top:49%;background-position:100% 100%}
.boot-screen{position:absolute;inset:53px 1px 39px;z-index:3;background:#081216;padding:30px;pointer-events:none;color:var(--amber);font:14px/1.9 ui-monospace,monospace;transition:opacity .35s ease}
.boot-brand{font:500 38px 'DM Sans',sans-serif;letter-spacing:-2px}
.boot-brand>span{font-size:15px;vertical-align:top;margin-left:5px}
.boot-lines{margin-top:18px;max-width:530px}
.boot-lines>div{display:flex;justify-content:space-between;gap:12px;color:#a8b9b8}
.boot-lines b{font-weight:400;color:var(--amber)}
.boot-progress{height:2px;max-width:530px;background:#253a36;margin-top:20px}
.boot-progress>span{display:block;height:100%;background:var(--amber);transform-origin:left}
.assembly-static.terminal-section{height:auto}
.assembly-static .terminal-pin{position:relative;height:auto;min-height:680px;padding-top:60px;padding-bottom:60px}
.assembly-static .assembly-parts{display:none}
@media(max-width:800px){
 .terminal-section{height:260svh;padding:0}
 .terminal-pin{padding:20px 5%;justify-content:center}
 .terminal-intro{gap:8px}
 .terminal-intro h2{font-size:32px}
 .terminal-intro .section-label{font-size:10px;margin-bottom:9px}
 .terminal-intro>p{font-size:13px;line-height:1.4}
 .assembly-status{margin:15px 0 10px;font-size:10px;letter-spacing:0}
 #skip-assembly{font-size:12px}
 .terminal-stage{padding:0}
 .terminal-screen{height:clamp(140px,26svh,240px);padding:18px 20px;font-size:12px}
 .terminal-greeting{font-size:32px;letter-spacing:-2px}
 .terminal-shortcuts{gap:6px;margin-top:12px}
 .terminal-shortcuts>span{display:none}
 .terminal-shortcuts button{font-size:11px;padding:7px 10px}
 .boot-screen{inset:52px 1px 35px;padding:20px;font-size:11px}
 .boot-brand{font-size:30px}
 .boot-lines{margin-top:12px}
 .boot-progress{margin-top:12px}
 .assembly-static .terminal-pin{min-height:0}
}
@media(max-height:650px) and (min-width:801px){
 .terminal-intro h2{font-size:30px}.terminal-intro .section-label{margin-bottom:6px}
 .terminal-pin{padding-top:12px;padding-bottom:12px}.assembly-status{margin-top:10px}
 .terminal-screen{height:130px}.terminal-shortcuts{margin-top:8px}
 .boot-screen{padding:14px 25px}.boot-brand{font-size:24px}.boot-lines{margin-top:5px;font-size:12px}.boot-progress{margin-top:8px}
}
@media(max-height:540px) and (max-width:800px){
 .terminal-pin{padding:10px 5%}
 .terminal-intro h2{font-size:24px}
 .terminal-intro .section-label,.terminal-intro>p{display:none}
 .assembly-status{margin:8px 0;font-size:10px}
 .terminal-bar{padding:8px 16px}
 .terminal-screen{height:clamp(65px,20svh,100px);padding:10px 16px}
 .terminal-greeting{font-size:24px;margin-bottom:4px}
 #terminal-form{padding:5px 0}
 .terminal-foot{padding:7px 16px}
 .terminal-shortcuts{margin-top:8px;max-height:50px;overflow:auto;min-height:0}
 .boot-screen{inset:36px 1px 25px;padding:10px 16px}
 .boot-brand{font-size:20px}
 .boot-lines{margin-top:4px;font-size:10px;line-height:1.45}
 .boot-progress{margin-top:6px}
}
.hardware-part{width:clamp(90px,22vw,220px);height:auto;aspect-ratio:1;mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent),linear-gradient(to bottom,transparent,#000 6%,#000 94%,transparent);mask-composite:intersect}

.terminal-stage{flex:0 0 auto}
.assembly-actions{display:flex;gap:14px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
#replay-assembly{background:none;border:0;border-bottom:1px solid var(--amber);padding:6px 0;color:var(--amber);font:inherit;font-size:12px;cursor:pointer;letter-spacing:0}
@media(max-width:520px){.assembly-actions{gap:5px 10px;max-width:65%}#skip-assembly,#replay-assembly{font-size:11px}}

/* Use established transforms for the moving shell in WebKit. */
.terminal-pin{position:-webkit-sticky;position:sticky}
.assembly-static .terminal-pin{position:relative}
@media(prefers-reduced-motion:reduce){.terminal-window{transition:none!important}.power-led{animation:none;box-shadow:0 0 0 3px rgba(232,168,85,.35)}}
/* Matched hardware stays assembled behind the opaque display panel. */
.terminal-section{height:420svh}
.terminal-stage{perspective:1500px;max-width:980px}
.assembly-rig{position:relative;transform-style:preserve-3d;transform-origin:center}
.assembly-parts{inset:-10px;z-index:0;transform-style:preserve-3d}
.hardware-part{background-image:url('../images/terminal-assembly.webp');mask-image:none;mask-composite:add;aspect-ratio:auto;height:auto;will-change:transform;filter:drop-shadow(0 5px 5px #0008)}
.chassis{inset:0;width:auto;height:auto;z-index:0}
.board-mount{position:absolute;left:10%;top:18%;width:50%;height:61%;transform-style:preserve-3d}
.mainboard{inset:0;width:100%;height:100%;z-index:1}
.processor{left:39%;top:31%;width:21%;height:29%;z-index:2}
.memory{top:15%;width:8%;height:60%;z-index:2}
.memory-a{left:72%}.memory-b{left:83%}
.controller{left:66%;top:57%;width:24%;height:18%;z-index:1}
.ribbon{left:49%;top:58%;width:25%;height:21%;z-index:3}
.terminal-window{z-index:4;background:#081216!important;border:1px solid #52625b!important;box-shadow:0 28px 55px #0007!important;border-radius:6px;transform-style:preserve-3d;overflow:hidden;will-change:transform}
.terminal-window>*{translate:none!important}
.terminal-bar{border-radius:0}.terminal-foot{border-radius:0}
.bezel-parts{position:absolute;inset:-10px;pointer-events:none;z-index:6;transform-style:preserve-3d}
.bezel{position:absolute;background:linear-gradient(90deg,#28332e,#111a16 45%,#39433c);border:1px solid #526058;box-shadow:inset 0 1px 2px #82927950,0 3px 6px #0006;will-change:transform}
.bezel.top,.bezel.bottom{left:0;right:0;height:12px;border-radius:4px}
.bezel.top{top:0}.bezel.bottom{bottom:0}
.bezel.left,.bezel.right{top:10px;bottom:10px;width:12px;border-radius:3px}
.bezel.left{left:0}.bezel.right{right:0}
.boot-screen{z-index:5}
.assembly-static.terminal-section{height:auto}
@media(max-width:800px){.terminal-section{height:380svh}.terminal-stage{width:94%}.assembly-parts,.bezel-parts{inset:-7px}.bezel.top,.bezel.bottom{height:9px}.bezel.left,.bezel.right{width:9px;top:7px;bottom:7px}}

.chassis{background-size:292.571429% 278.260870%;background-position:2.967359% 19.359756%;}
.mainboard{background-size:304.761905% 276.010782%;background-position:57.073643% 19.295559%;}
.processor{background-size:527.835052% 364.412811%;background-position:93.815261% 22.880215%;}
.memory{background-size:1422.222222% 285.236769%;background-position:16.316527% 82.706767%;}
.ribbon{background-size:351.487414% 588.505747%;background-position:47.406733% 77.764706%;}
.controller{background-size:309.677419% 678.145695%;background-position:96.538462% 77.434135%;}
.board-mount{left:12%;top:11%;width:47%;height:78%}
.processor{left:33%;top:30%;width:22%;height:39%}
.memory{top:12%;width:7%;height:74%}.memory-a{left:72%}.memory-b{left:80%}
.controller{left:65%;top:57%;width:26%;height:23%}
.ribbon{left:54%;top:60%;width:19%;height:14%}

/* ==========================================================================
   Kodelig Ultra — additions on top of the original Astra export.
   Self-hosted font, mobile nav, contact modal, and the extra sections
   needed for parity with the rest of kodelig.no (trust strip, founder,
   dynamic pricing cards, standalone Tjenester/Priser/Prosjekter pages).
   ========================================================================== */

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/dm-sans-variable.woff2') format('woff2-variations'), url('../fonts/dm-sans-variable.woff2') format('woff2');
}

/* Reveal-on-scroll: hidden from the first paint only when JS is present
   (html.js is set in <head>), docked in with a short stagger per sibling
   (--i, set by main.js). Failsafe: if main.js never takes over
   (html.reveal-ready), everything is shown after 4 s. */
html.js .reveal { opacity: 0; translate: 0 26px; scale: .985; transition: opacity .7s cubic-bezier(.2,.8,.2,1) calc(var(--i, 0) * 80ms), translate .95s cubic-bezier(.16,1,.3,1) calc(var(--i, 0) * 80ms), scale .95s cubic-bezier(.16,1,.3,1) calc(var(--i, 0) * 80ms); }
html.js .reveal.is-visible { opacity: 1; translate: 0 0; scale: 1; }
html.js:not(.reveal-ready) .reveal { animation: kdlg-reveal-failsafe 1ms linear 4s forwards; }
@keyframes kdlg-reveal-failsafe { to { opacity: 1; translate: 0 0; scale: 1; } }
@media (prefers-reduced-motion: reduce) { html.js .reveal { opacity: 1; translate: none; scale: none; transition: none; animation: none; } }

/* ---- Force the assembled terminal screen to composite unambiguously in
   front of the hardware parts sharing its preserve-3d space — some WebKit
   builds resolve the render order differently than Chromium once every
   part's transform settles at the same resting depth, otherwise. ---- */
.terminal-window { isolation: isolate; }

/* ---- Sticky header, pinned in place on every page while scrolling ---- */
header { position: sticky; top: 0; z-index: 60; margin: 0; padding: 0 4.4%; background-color: var(--ink); background-image: url('../images/texture-dark.webp'); background-repeat: repeat; }
/* ---- Mobile nav (hamburger + slide-down panel) ---- */
.nav-toggle { display: none; background: none; border: 0; padding: 6px; color: var(--paper); cursor: pointer; }
.nav-toggle-icon { width: 26px; height: 26px; }
.nav-toggle-bar { transition: transform .25s, opacity .25s; transform-origin: center; }
.nav-toggle.is-open .nav-toggle-bar--top { transform: translateY(5px) rotate(45deg); }
.nav-toggle.is-open .nav-toggle-bar--mid { opacity: 0; }
.nav-toggle.is-open .nav-toggle-bar--bottom { transform: translateY(-5px) rotate(-45deg); }
.mobile-nav { display: flex; flex-direction: column; gap: 2px; overflow: hidden; max-height: 0; opacity: 0; transition: max-height .35s cubic-bezier(.16,1,.3,1), opacity .3s; }
.mobile-nav.is-open { max-height: 420px; opacity: 1; }
.mobile-nav a { padding: 15px 0; border-top: 1px solid #ffffff20; font-size: 17px; }
.mobile-nav a:hover { color: var(--amber); }
@media (max-width: 800px) {
  nav[aria-label="Hovedmeny"] { display: none; }
  .nav-toggle { display: block; }
  header { flex-wrap: wrap; height: auto; min-height: 80px; padding-top: 18px; padding-bottom: 18px; }
  .header-actions { display: flex; align-items: center; gap: 14px; }
  .mobile-nav-wrap { flex-basis: 100%; }
}
@media (min-width: 801px) { .nav-toggle, .mobile-nav-wrap { display: none; } }

/* ---- Trust strip ---- */
.trust-strip { padding: 60px 6%; background: #111f25; }
.trust-strip-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.trust-item { display: flex; gap: 14px; align-items: flex-start; }
.trust-icon { width: 26px; height: 26px; flex: none; color: var(--amber); }
.trust-item h3 { margin: 0 0 4px; font-size: 16px; font-weight: 600; letter-spacing: -.3px; }
.trust-item p { margin: 0; font-size: 13px; line-height: 1.5; color: #a6b5b7; }
@media (max-width: 800px) { .trust-strip-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .trust-strip-row { grid-template-columns: 1fr; } .trust-strip { padding: 45px 6%; } }

/* ---- Founder section ---- */
.founder { padding: 110px 6%; background: var(--paper); color: var(--ink); }
.founder-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.founder-media img { width: 100%; height: auto; border-radius: 10px; display: block; }
.founder-body .prose { line-height: 1.7; color: #4a5654; margin-top: 20px; max-width: 52ch; }
@media (max-width: 800px) { .founder-grid { grid-template-columns: 1fr; gap: 30px; } .founder { padding: 70px 6%; } }

/* ---- Pricing band (dynamic cards, replaces the single flat price block) ---- */
.pricing-band { padding: 110px 6%; }
.pricing-band-head { max-width: none; margin-bottom: 50px; }
.pricing-band-head .prose { color: #a6b5b7; line-height: 1.6; margin-top: 14px; }
.pricing-band-cards, .pricing-page-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.pricing-band-cards { max-width: 1000px; }
.price-card { border: 1px solid #ffffff25; border-radius: 14px; padding: 34px 28px; display: flex; flex-direction: column; gap: 14px; }
.price-card h3 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.4px; }
.price-card--headline { background: var(--amber); color: var(--ink); border-color: transparent; }
.price-amount { font-size: 28px; letter-spacing: -1px; margin: 0; }
.price-amount span { font-size: 15px; letter-spacing: 0; }
.price-desc { line-height: 1.6; font-size: 14.5px; white-space: pre-line; }
.price-card:not(.price-card--headline) .price-desc { color: #a6b5b7; }
.price-card--headline .price-desc { color: #22331a; }
.rebuild-graphic { margin-top: auto; color: #6b7f7a; }
.rebuild-graphic svg { width: 100%; height: auto; }
.rebuild-frame { stroke: currentColor; }
.rebuild-dot { fill: currentColor; opacity: .5; }
.rebuild-bar { fill: currentColor; opacity: .35; }
.rebuild-cta { fill: var(--amber); opacity: .8; }
.rebuild-wrench { color: var(--amber); fill: currentColor; }

/* ---- Standalone pages: Tjenester / Priser / Prosjekter ---- */
.page-hero { padding: 150px 6% 60px; }
.page-title { font-size: clamp(34px, 5vw, 62px); line-height: 1.1; letter-spacing: -.04em; font-weight: 500; margin: 0 0 20px; max-width: 18ch; }
.page-lede { font-size: 17px; line-height: 1.6; color: #a6b5b7; max-width: 62ch; margin: 0; }
.page-lede--on-dark { color: #93a4a2; }
.offerings--page { padding-top: 40px; }
.offering-grid { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.offering-card { border: 1px solid #ffffff25; border-radius: 14px; padding: 28px 22px; height: 100%; }
.offering-icon { width: 28px; height: 28px; color: var(--amber); margin-bottom: 18px; }
.offering-card h3 { margin: 0 0 10px; font-size: 19px; font-weight: 600; letter-spacing: -.3px; }
.offering-card p { margin: 0; font-size: 14px; line-height: 1.6; color: #a6b5b7; }
@media (max-width: 900px) { .offering-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .offering-grid { grid-template-columns: 1fr; } .page-hero { padding-top: 120px; } }

.process-list { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.process-num { font-size: 13px; }
@media (max-width: 800px) { .process-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .process-list { grid-template-columns: 1fr; } }

.showcase { padding: 110px 6%; background: var(--paper); color: var(--ink); }
.showcase--page { padding-top: 60px; padding-bottom: 60px; }
.showcase-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 34px; }
.showcase-grid { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.showcase-card { display: block; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 10px 26px #18242718; }
.showcase-media { aspect-ratio: 8 / 5; overflow: hidden; background: #dfe6e2; }
.showcase-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.showcase-media--empty { }
.showcase-card:hover .showcase-media img { transform: scale(1.04); }
.showcase-body { padding: 18px 20px 22px; }
.showcase-body h3 { margin: 0 0 6px; font-size: 18px; font-weight: 600; letter-spacing: -.3px; }
.showcase-tag { margin: 0; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #6b7f7a; }
.section-kicker { font-size: 12px; letter-spacing: 1.6px; font-weight: 550; color: #a6b5b7; margin: 0; }
.section-kicker--on-dark { color: #667574; }
.section-heading { font-size: clamp(30px, 3.5vw, 48px); line-height: 1.1; letter-spacing: -.04em; font-weight: 500; margin: 10px 0 0; }
.text-link { display: inline-flex; gap: 8px; font-size: 14px; margin-top: 18px; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.text-link--on-dark { color: var(--ink); }
@media (max-width: 900px) { .showcase-grid { grid-template-columns: 1fr 1fr; } .showcase-head { flex-direction: column; align-items: flex-start; } }
@media (max-width: 560px) { .showcase-grid { grid-template-columns: 1fr; } }

/* ---- Contact modal (styled like the terminal window elsewhere on the site) ---- */
.contact-modal { border: 0; padding: 0; background: transparent; max-width: 460px; width: min(92vw, 460px); border-radius: 12px; opacity: 0; transform: translateY(16px) scale(.98); transition: opacity .25s, transform .25s; }
.contact-modal::backdrop { background: #050a0dcc; opacity: 0; transition: opacity .25s; }
.contact-modal.is-open { opacity: 1; transform: none; }
.contact-modal.is-open::backdrop { opacity: 1; }
.contact-modal .term-window { background: #081216; border: 1px solid #52625b; border-radius: 12px; overflow: hidden; box-shadow: 0 30px 60px #0008; }
.contact-modal .term-bar, .demo-modal .term-bar { display: flex; align-items: center; gap: 8px; background: #1a2c32; padding: 14px 16px; border-bottom: 1px solid #56716a40; flex: none; }
.term-dot { width: 10px; height: 10px; border-radius: 50%; background: #445; }
.term-dot:nth-child(1) { background: #ff6159; }
.term-dot:nth-child(2) { background: #ffbd2e; }
.term-dot:nth-child(3) { background: #28c941; }
.term-title { margin-left: 8px; font: 12px ui-monospace, monospace; color: #a8b9bd; }
.term-close { margin-left: auto; background: none; border: 0; color: #a8b9bd; cursor: pointer; padding: 4px; }
.term-close svg { width: 18px; height: 18px; }
.contact-body { padding: 22px 24px 26px; }
.term-line { font: 13px ui-monospace, monospace; margin: 0 0 18px; }
.term-cmd { color: var(--amber); }
.term-field { margin-bottom: 14px; }
.term-field--block { margin-bottom: 18px; }
.term-field label { display: block; font-size: 12px; color: #a8b9bd; margin-bottom: 6px; }
.term-optional { color: #6b7f7a; }
.term-field input, .term-field textarea { width: 100%; background: #0d1a20; border: 1px solid #33474a; border-radius: 7px; color: var(--paper); font: 14px 'DM Sans', sans-serif; padding: 10px 12px; }
.term-field input:focus, .term-field textarea:focus { outline: 1px solid var(--amber); outline-offset: 1px; }
.contact-form-footer { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.term-submit { background: var(--amber); color: var(--ink); border: 0; border-radius: 30px; padding: 11px 22px; font-weight: 600; font-size: 14px; cursor: pointer; }
.contact-status { margin: 0; font-size: 13px; color: #a8b9bd; }
.contact-status[data-state="error"] { color: #ffae9d; }
.contact-status[data-state="loading"] { color: var(--amber); }
.contact-success { font: 13px ui-monospace, monospace; line-height: 1.8; }
.contact-success .term-ok { color: var(--amber); }
.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; }

/* ---- Contact title is a <button> (opens the modal) — the one clear contact CTA, reset to look like the original giant link ---- */
button.contact-title { background: none; border: 0; width: 100%; text-align: left; font-family: inherit; color: inherit; cursor: pointer; }

/* ---- Demo CTA attention cue, same "vrikk" (tilt-wiggle + glow burst) kodelig-premium uses on its header demo button: quiet most of the time, a brief nudge every ~5.5s so it stays noticeable without competing with the hero. ---- */
@media (prefers-reduced-motion: no-preference) {
  .js-open-demo { animation: kdlg-demo-wiggle 5.5s ease-in-out infinite; }
  .js-open-demo:hover, .js-open-demo:focus-visible { animation-play-state: paused; }
}
@keyframes kdlg-demo-wiggle {
  0%, 78% { transform: rotate(0deg); box-shadow: 0 0 0 0 rgba(232, 168, 85, 0); }
  81% { transform: rotate(-5deg); }
  84% { transform: rotate(5deg); box-shadow: 0 0 0 8px rgba(232, 168, 85, .4); }
  87% { transform: rotate(-3deg); }
  90%, 100% { transform: rotate(0deg); box-shadow: 0 0 0 12px rgba(232, 168, 85, 0); }
}

/* ---- Demo builder modal (iframe embed of /demo-bygger/), full-screen at every size ---- */
.demo-modal { border: 0; padding: 0; margin: auto; background: transparent; width: min(96vw, 1400px); height: min(94vh, 1000px); max-width: 96vw; max-height: 94vh; border-radius: 20px; opacity: 0; transform: translateY(12px) scale(.98); transition: opacity .25s, transform .25s; }
.demo-modal::backdrop { background: #050a0dcc; opacity: 0; transition: opacity .25s; }
.demo-modal.is-open { opacity: 1; transform: none; }
.demo-modal.is-open::backdrop { opacity: 1; }
.demo-window { height: 100%; display: flex; flex-direction: column; background: #081216; border-radius: 20px; overflow: hidden; box-shadow: 0 30px 70px #0009; }
.demo-frame-wrap { flex: 1; min-height: 0; }
.demo-frame { width: 100%; height: 100%; border: 0; background: #f3f5f0; }
@media (max-width: 560px) { .demo-modal { width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; border-radius: 0; } .demo-window { border-radius: 0; } }

/* ---- Terminal "logo" command beams reveal (same effect kodelig-premium uses) ---- */
.term-logo { position: relative; overflow: hidden; }
.term-logo-line span.is-beam { color: var(--paper); text-shadow: 0 0 6px rgba(243, 245, 240, .85), 0 0 14px rgba(232, 168, 85, .55); }
.term-logo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(243, 245, 240, .4) 50%, transparent 60%); transform: translateX(-120%); pointer-events: none; mix-blend-mode: overlay; }
.term-logo.is-lit::after { animation: term-logo-glint 1.1s ease-out 1; }
@keyframes term-logo-glint { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { .term-logo.is-lit::after { animation: none; } }

/* ---- Subtle background texture (same idea as kodelig-premium: a faint
   repeating grain under otherwise flat panels, own on-brand circuit motif
   instead of premium's topo lines). Left off the lime .process band and
   the terminal window itself, which should stay crisp/high-tech. ---- */
body { background-color: var(--ink); background-image: url('../images/texture-dark.webp'); background-repeat: repeat; }
.terminal-section, .trust-strip { background-image: url('../images/texture-dark.webp'); background-repeat: repeat; }
.work, .founder, .contact { background-image: url('../images/texture-light.webp'); background-repeat: repeat; }

/* ---- Footer contact row + clock ---- */
footer .tagline { text-transform: uppercase; }
.footer-contact { display: flex; gap: 8px 0; flex-wrap: wrap; padding: 0 4.4% 30px; font-size: 12px; color: #b4c1c1; margin-top: -10px; }
.footer-contact > *:not(:last-child)::after { content: "·"; margin: 0 11px; opacity: .6; }
.footer-contact a:hover { color: var(--amber); }

/* Pricing cards matching the Kodelig Explorer mockup. */
.pricing-band-cards,.pricing-page-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;max-width:1280px;margin-inline:auto}
.price-card{position:relative;min-width:0;padding:24px;border:0;border-radius:16px;background:var(--ink);color:var(--paper);box-shadow:0 20px 25px -5px #0003,0 8px 10px -6px #0003;gap:8px;font-family:'Plus Jakarta Sans','DM Sans',sans-serif}
.price-card-top{display:flex;align-items:center;justify-content:space-between;color:var(--amber);font:600 11px/14px 'JetBrains Mono',monospace;letter-spacing:1.32px}
.price-card-top svg{width:20px;height:20px;flex-shrink:0}
.price-card h3{font-size:20px;line-height:28px;letter-spacing:-.2px;font-weight:600}
.price-card .price-amount{display:flex;align-items:baseline;gap:4px;margin:8px 0;letter-spacing:0;white-space:nowrap}
.price-card .price-amount strong{font-size:28px;line-height:36px;letter-spacing:-.42px;color:var(--amber)}
.price-card .price-amount span{font:500 12px/16px 'JetBrains Mono',monospace;color:#a6b5b7}
.price-card .price-desc{font-size:13px;line-height:20px;letter-spacing:.13px;color:#a6b5b7}
.price-card .price-desc p{margin:0 0 12px}
.price-card .price-desc ul{list-style:none;padding:0;margin:0;color:var(--paper)}
.price-card .price-desc li{position:relative;padding-left:24px;margin:0 0 8px}
.price-card .price-desc li::before{content:'✓';position:absolute;left:0;top:3px;width:14px;height:14px;border:1px solid var(--amber);border-radius:50%;color:var(--amber);font-size:10px;line-height:12px;text-align:center}
.price-card .price-card-cta{display:block;margin-top:auto;transform:translateY(0);padding:10px 16px;border-radius:2px;background:#ffffff08;text-align:center;font-size:13px;line-height:20px;font-weight:500;transition:background .2s}
.price-card .price-desc{margin-bottom:8px}
.price-card .price-card-cta:hover{background:#ffffff15}
.price-card--featured{box-shadow:0 25px 50px -12px #0006}
.price-card-badge{position:absolute;top:-12px;right:16px;padding:2px 12px;border-radius:12px;background:var(--amber);color:var(--ink);font:700 11px/14px 'JetBrains Mono',monospace;letter-spacing:1.1px}
.price-card--featured .price-card-cta{background:var(--amber);color:var(--ink);font-weight:600;box-shadow:0 10px 15px -3px #e8a85533}
.price-card--featured .price-card-cta:hover{background:#f6d9a8}
@media(max-width:1100px){.pricing-band-cards,.pricing-page-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}}
@media(max-width:600px){.pricing-band-cards,.pricing-page-grid{grid-template-columns:minmax(0,1fr)}}

/* Compact homepage updates: existing imagery and terminal stay intact. */
.hero-demo{display:flex;flex:0 0 auto;flex-direction:column;align-items:flex-start;gap:10px;max-width:100%}
.hero-demo>span{font-size:12px;line-height:1.5;color:#a6b5b7;max-width:32ch}
.founder{padding-block:70px}
.founder-body h2{font-size:clamp(34px,3.4vw,54px)}
.founder-note{color:#4a5654;line-height:1.6;margin:14px 0 20px}
.founder-link,.contact-demo{display:inline-block;text-decoration:underline;text-underline-offset:5px;font-size:14px;line-height:1.6}
.project-summary{font-size:15px;line-height:1.55;max-width:65ch;margin:0 0 12px;color:#52615d}
.project-visit{font-size:13px;font-weight:600;display:inline-block;border-bottom:1px solid currentColor;padding-bottom:3px}
.work-heading .work-count:hover{text-decoration:underline}
.services.section{padding-block:75px}
.process{padding-block:65px}
.process h2{font-size:clamp(40px,5vw,76px);margin-top:28px}
.steps{margin-top:36px;gap:28px}.steps h3{margin-top:20px}
.pricing-band{padding-block:75px}
.contact-inline{padding-block:65px}
.contact-inline-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,80px);align-items:start}
.contact-person h2{font-size:clamp(48px,6vw,88px);margin:12px 0 20px}
.contact-person>p:not(.section-kicker){max-width:43ch;line-height:1.65;color:#52615d}
.contact-person address{display:flex;flex-direction:column;gap:7px;font-style:normal;line-height:1.5;margin:24px 0}
.contact-person address>span{color:#52615d;margin-bottom:6px}
.contact-person address a{width:fit-content;overflow-wrap:anywhere}
.contact-person address a:hover{text-decoration:underline}
.contact-fields-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.contact-services{border:0;padding:0;margin:0 0 18px;display:flex;gap:8px;flex-wrap:wrap;min-width:0}
.contact-services legend{font-size:12px;margin-bottom:10px}
.contact-services label{position:relative;cursor:pointer}
.contact-services input{position:absolute;opacity:0;width:1px;height:1px}
.contact-services span{display:block;padding:8px 11px;border:1px solid #33474a;border-radius:7px;font-size:12px;line-height:1.4}
.contact-services input:checked+span{background:var(--amber);border-color:var(--amber);color:var(--ink)}
.contact-services input:focus-visible+span{outline:2px solid var(--amber);outline-offset:3px}
.contact-inline .kodelig-contact-form{min-width:0;padding:26px;background:var(--ink);color:var(--paper);border-radius:14px}
.contact-inline .term-field textarea{resize:vertical;min-height:95px}
.contact-inline .contact-status:empty{display:none}
.contact-inline .term-submit{width:100%}
@media(max-width:800px){.contact-inline-grid{grid-template-columns:minmax(0,1fr)}.founder,.contact-inline{padding-block:50px}.services.section,.pricing-band,.process{padding-block:55px}}
@media(max-width:520px){.contact-fields-row{grid-template-columns:1fr;gap:0}.contact-inline .kodelig-contact-form{padding:20px}.hero-demo .pill{white-space:normal}.project-summary{font-size:14px}}

/* Proportion-preserving hardware, with a single fitted display surround. */
.assembly-parts{inset:auto;left:50%;top:50%;width:100%;height:auto;aspect-ratio:25/12;transform:translate(-50%,-50%)}
.hardware-part{background:none;mask:none;filter:none;overflow:visible}
.hardware-part>svg{display:block;width:100%;height:100%;overflow:visible}
.chassis{inset:0;width:100%;height:100%}
.board-mount{left:9%;top:12%;width:53%;height:auto;aspect-ratio:3/2}
.mainboard{inset:0;width:100%;height:100%}
.processor{left:18%;top:30%;width:24%;height:auto;aspect-ratio:1}
.memory{left:55%;width:36%;height:auto;aspect-ratio:26/5;transform-origin:center bottom}
.memory-a{top:30%}.memory-b{top:52%}
.controller{left:67%;top:64%;width:28%;height:auto;aspect-ratio:56/19}
.ribbon{left:56%;top:70%;width:17%;height:auto;aspect-ratio:25/7}
.terminal-window{border:1px solid #344147!important;border-radius:9px;box-shadow:0 18px 32px #0005!important}
.terminal-window::after{content:'';position:absolute;inset:0;z-index:8;pointer-events:none;border-radius:inherit;box-shadow:inset 0 1px 0 #c1c9c314,inset 0 0 10px #0004;background:linear-gradient(125deg,#e8ecea04,transparent 35%)}
.bezel-parts{inset:-5px;transform-style:preserve-3d}
.bezel-frame{inset:0;width:100%;height:100%;border:5px solid #242d32;border-top-color:#414b50;border-left-color:#354046;border-radius:14px;background:none;box-shadow:inset 0 0 0 1px #080e12,0 1px 0 1px #77818840,0 5px 8px #0005}
.power-led{animation:none;box-shadow:0 0 4px #e8a85555}
@media(max-width:800px){.bezel-parts{inset:-4px}.bezel-frame{border-width:4px;border-radius:13px}}

/* Shared surfaces and page rhythm. */
.price-card{background:rgba(11,26,40,.55);border:1px solid rgba(232,168,85,.23);box-shadow:0 10px 24px #0002;font-family:'DM Sans',Arial,sans-serif}
.price-card--featured{border-color:rgba(232,168,85,.6)}
.subpage .page-hero{padding:70px 6% 48px}
.page-breadcrumb{display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.06em;color:var(--amber);margin:0 0 26px}
.page-breadcrumb a{color:#a6b5b7}.page-breadcrumb a:hover{color:var(--paper)}
.subpage .page-title{max-width:20ch;font-size:clamp(42px,5.6vw,82px);font-weight:500;line-height:1.08;letter-spacing:-.05em;margin-bottom:24px}
.subpage--priser .page-title{max-width:none}
.subpage .page-lede{color:#a6b5b7;font-size:17px;line-height:1.65;max-width:65ch}
.subpage .page-lede p{margin:0 0 14px}
.subpage .offerings--page{display:block;padding-top:12px;padding-bottom:70px}
.subpage .offering-grid{margin:24px 0 0;padding:0;gap:16px;grid-template-columns:repeat(4,minmax(0,1fr))}
.subpage .offering-card{padding:26px 24px;border:1px solid #e8a8553b;background:#0b1a288c;border-radius:16px;display:flex;flex-direction:column;gap:14px;box-shadow:0 10px 24px #0002}
.subpage .offering-card h3{margin:0;font-size:21px;line-height:1.2;overflow-wrap:anywhere}
.subpage .offering-card p{font-size:15px;line-height:1.65;margin:0 0 8px}
.offering-link{font-size:13px;color:var(--amber);margin-top:auto;padding-top:10px}.offering-link:hover{text-decoration:underline}
.subpage .offering-icon{margin:0;width:25px;height:25px}
.subpage .pricing-band{padding-top:12px;padding-bottom:70px}
.subpage .showcase--page{padding:48px 6%;background-image:url('../images/texture-light.webp')}
.subpage .showcase--page+.showcase--page{padding-top:12px}
.showcase-heading{font-size:clamp(30px,3.2vw,48px);margin-bottom:14px}
.subpage .showcase--page .page-lede{color:#52615d}
.subpage .showcase-grid{padding:0;gap:24px;align-items:stretch}
.subpage .showcase-grid>li{min-width:0}
.subpage .showcase-card{height:100%;border:1px solid #0b1a2826;border-radius:14px;background:#f3f5f080;box-shadow:0 10px 22px #1824270d;display:flex;flex-direction:column}
.subpage .showcase-media{padding:18px;flex-shrink:0}
.subpage .showcase-media img{object-fit:contain}
.subpage .showcase-body{padding:24px;display:flex;flex-direction:column;flex:1;align-items:flex-start;gap:10px}
.subpage .showcase-body h3{font-size:23px;line-height:1.25;margin:0}
.subpage .showcase-summary{font-size:15px;line-height:1.65;color:#52615d;margin:0 0 10px}
.subpage .project-visit{margin-top:auto}
.page-contact{padding:60px 6%;display:flex;align-items:center;justify-content:space-between;gap:40px;border-top:1px solid #e8a85530}
.page-contact h2{font-size:clamp(32px,4vw,56px);margin:12px 0 16px}
.page-contact p:not(.section-kicker){color:#a6b5b7;line-height:1.6;max-width:50ch;margin:0}
.page-contact-actions{display:flex;flex-direction:column;align-items:center;flex-shrink:0;gap:18px}
.page-contact-actions .text-link{margin:0;animation:none}
@media(max-width:1100px){.subpage .offering-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:800px){.subpage .page-hero{padding-top:45px}.page-contact{align-items:flex-start;flex-direction:column;gap:25px}.page-contact-actions{align-items:flex-start}.subpage .showcase--page{padding-block:38px}}
@media(max-width:560px){.subpage .offering-grid{grid-template-columns:1fr}.subpage .page-title{font-size:42px}.subpage .showcase-body{padding:20px}}

/* Projects: a calm editorial grid instead of a horizontal gallery. */
.work{height:auto;background:var(--ink);background-image:url('../images/texture-dark.webp');color:var(--paper)}
.work-sticky{height:auto;min-height:0;position:relative;top:auto;padding:88px 0 96px;overflow:visible}
.work-heading{margin:0 6% 34px;align-items:end}
.work-heading .section-label{color:#a6b5b7;margin-bottom:14px}
.work h2{font-size:clamp(38px,4.8vw,68px);letter-spacing:-.05em}
.work h2 em{color:var(--amber)}
.work-count{color:var(--amber);font-size:11px;letter-spacing:1.1px}
.project-track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;width:auto;padding:0 6%;transform:none!important}
.project{width:auto;min-width:0;padding:0;border:1px solid #e8a85538;border-radius:14px;overflow:hidden;background:#0b1a28cc;box-shadow:0 16px 34px #0003;transition:transform .25s,border-color .25s,background .25s}
.project:hover{transform:translateY(-4px);border-color:#e8a85588;background:#102a3acc}
.project-image{height:220px;padding:22px;background:#172d38;position:relative}
.project-image.mint{background:#25483f}.project-image.lilac{background:#3e3850}.project-image.blue{background:#25424d}
.project img{width:100%;height:100%;object-fit:contain;box-shadow:0 12px 22px #0003}
.project-open{right:14px;bottom:14px;width:38px;height:38px;background:var(--amber);color:var(--ink);font-size:20px}
.project-caption{padding:20px 20px 6px;align-items:start;display:block}
.project-caption h3{font-size:21px;color:var(--paper);margin:0 0 7px;letter-spacing:-.3px}
.project-caption>span{color:var(--amber);font-size:10px;letter-spacing:1.1px}
.project-summary{padding:0 20px;margin:10px 0 0;color:#a6b5b7;font-size:14px;line-height:1.6}
.project-visit{margin:16px 20px 20px;color:var(--amber);font-size:12px}
.track-meter{display:none}
.subpage .showcase--page{background:var(--ink);background-image:url('../images/texture-dark.webp');color:var(--paper);padding-block:66px}
.subpage .showcase--page+.showcase--page{padding-top:18px}
.subpage .showcase-heading{color:var(--paper);font-size:clamp(30px,3.8vw,52px);letter-spacing:-.04em}
.subpage .showcase--page .page-lede{color:#a6b5b7}
.subpage .showcase-card{border:1px solid #e8a85538;background:#0b1a28cc;color:var(--paper);box-shadow:0 16px 34px #0003}
.subpage .showcase-card:hover{border-color:#e8a85588;background:#102a3acc;transform:translateY(-4px)}
.subpage .showcase-body h3{color:var(--paper)}
.subpage .showcase-tag{color:var(--amber)}
.subpage .showcase-summary{color:#a6b5b7}
.subpage .showcase-media.mint{background:#25483f}.subpage .showcase-media.lilac{background:#3e3850}.subpage .showcase-media.blue{background:#25424d}
@media(max-width:900px){.project-track{grid-template-columns:repeat(2,minmax(0,1fr))}.project-image{height:200px}}
@media(max-width:600px){.work-sticky{padding-block:60px}.work-heading{display:block}.work-count{display:inline-block;margin-top:18px}.project-track{grid-template-columns:1fr}.project-image{height:220px}}

/* Project presentation inspired by the redesign mockup: a large desktop
   screen with a smaller mobile companion, floating directly in the card. */
.project-image,.subpage .showcase-media{background:transparent!important;padding:12px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.project-scene{position:relative;width:100%;height:100%;min-height:190px;display:block}
.project-screen{position:absolute;overflow:hidden;background:#101a22;border:1px solid #52625b;border-radius:5px;box-shadow:0 18px 28px #06131c66;transition:transform .35s ease,box-shadow .35s ease}
.project-screen img{display:block!important;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover!important;box-shadow:none!important}
.project-screen--desktop{left:3%;top:11%;width:84%;height:76%;transform:rotate(-2deg)}
.project-screen--desktop::after{content:'';position:absolute;left:0;right:0;bottom:0;height:4px;background:#e8a85599;opacity:.7}
.project-screen--mobile{right:4%;bottom:4%;width:22%;height:64%;border-width:2px;border-radius:7px;transform:rotate(6deg);z-index:2}
.project-screen--mobile img{object-position:65% center}
.project-scene--1 .project-screen--desktop{transform:rotate(2deg);left:2%}
.project-scene--1 .project-screen--mobile{transform:rotate(-7deg);right:3%}
.project-scene--2 .project-screen--desktop{transform:rotate(-1deg);top:9%}
.project-scene--2 .project-screen--mobile{transform:rotate(5deg);bottom:3%}
.project:hover .project-screen--desktop,.showcase-card:hover .project-screen--desktop{transform:rotate(-1deg) translateY(-3px);box-shadow:0 24px 34px #06131c80}
.project:hover .project-screen--mobile,.showcase-card:hover .project-screen--mobile{transform:rotate(4deg) translateY(-4px);box-shadow:0 22px 30px #06131c80}
@media(max-width:900px){.project-scene{min-height:170px}}
@media(max-width:600px){.project-scene{min-height:185px}.project-screen--desktop{left:2%;width:85%;height:75%}.project-screen--mobile{width:22%;height:63%}}

/* Generated project scenes are complete photographs: let them fill the card. */
.project-image,.subpage .showcase-media{padding:0!important;background:transparent!important}
.project-image>img,.subpage .showcase-media>img{display:block!important;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover!important;box-shadow:none!important}

/* Project screens: real device proportions, layered with a small human tilt. */
.project-image,.subpage .showcase-media{background:transparent!important;padding:14px 12px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.device{position:relative;display:block;filter:drop-shadow(0 16px 14px #06131c55);transform-origin:50% 85%;transition:transform .35s ease,filter .35s ease}
.project:hover .device,.showcase-card:hover .device{filter:drop-shadow(0 22px 18px #06131c70)}
.device-screen{position:relative;overflow:hidden;background:#101a22;border:5px solid #17232b;box-shadow:inset 0 0 0 1px #8b989b55,0 0 0 1px #091118;border-radius:5px}
.device-screen img{display:block!important;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover!important;box-shadow:none!important}
.device--laptop{width:92%;transform:rotate(-3deg) translate(-2px,4px)}
.device--laptop .device-screen{aspect-ratio:16/10}
.device--laptop::after{content:'';position:absolute;left:-6%;right:-6%;bottom:-11px;height:12px;background:linear-gradient(#526067,#1d2930);border-radius:2px 2px 8px 8px;box-shadow:0 3px 0 #111b22}
.device--tablet{width:63%;transform:rotate(4deg) translate(5px,0)}
.device--tablet .device-screen{aspect-ratio:4/3;border-width:7px;border-radius:8px}
.device--tablet::before{content:'';position:absolute;inset:7px;border:1px solid #9aa6a955;border-radius:4px;pointer-events:none;z-index:2}
.device--phone{width:35%;transform:rotate(-6deg) translate(-3px,2px)}
.device--phone .device-screen{aspect-ratio:9/18;border-width:6px;border-radius:13px}
.device--phone::before{content:'';position:absolute;left:50%;top:7px;width:24%;height:3px;transform:translateX(-50%);border-radius:4px;background:#0a1218;z-index:2}
@media(max-width:900px){.device--laptop{width:90%}.device--tablet{width:61%}.device--phone{width:33%}}
@media(max-width:600px){.device--laptop{width:93%}.device--tablet{width:65%}.device--phone{width:38%}.device-screen{border-width:4px}}

/* Fixed site navigation, including during the terminal sequence. */
:root{--site-header-height:100px;--site-header-offset:0px}
body{padding-top:var(--site-header-height)}
body.admin-bar{--site-header-offset:32px}
body>header{position:fixed;top:var(--site-header-offset);left:0;right:0;z-index:60;isolation:isolate;border-bottom:1px solid #e8a85530}
html{scroll-padding-top:calc(var(--site-header-height) + var(--site-header-offset) + 20px)}
.terminal-pin{top:calc(var(--site-header-height) + var(--site-header-offset));height:calc(100svh - var(--site-header-height) - var(--site-header-offset))}
@media(max-width:800px){:root{--site-header-height:80px}}
@media(max-width:782px){body.admin-bar{--site-header-offset:46px}#wpadminbar{position:fixed}}
@media(max-height:760px){.terminal-pin{padding-top:12px;padding-bottom:12px}.terminal-intro h2{font-size:28px}.terminal-intro .section-label{margin-bottom:6px}.assembly-status{margin:10px 0}.terminal-screen{height:clamp(65px,19svh,145px)}.terminal-shortcuts{max-height:64px;overflow:auto;min-height:0;margin-top:8px}}


/* Keep Safari/iOS from adding native blue or grey button glyphs. */
button,input[type=submit],input[type=button]{-webkit-appearance:none;appearance:none;color:inherit;background-image:none;-webkit-tap-highlight-color:transparent}
button::-webkit-focus-inner{padding:0;border:0}
button{border-radius:0}
.term-submit,#terminal-form button,.pill,.nav-cta{appearance:none;-webkit-appearance:none}

/* Mobile: preserve the full generated project scene without cropping the desk setup. */
@media (max-width: 600px){
  .project-image,
  .subpage .showcase-media{
    height:auto!important;
    min-height:0!important;
    aspect-ratio:3 / 2;
  }
}

/* ---- Hero particle field (assets/js/main.js) ----
   Canvas sits behind every hero child via negative z-index inside the
   hero's own stacking context, so it never has to fight DOM order. The
   real h1 text stays fully in the DOM/accessibility tree at all times -
   .has-particles (toggled by JS, in sync with the particle crossfade) just
   switches its paint color to transparent; the transition lives on the
   permanent base rule (not scoped to .has-particles) so it animates the
   same way in both directions, and a JS failure or a prefers-reduced-
   motion visitor always sees the genuine heading with no transition ever
   applied at all. */
.hero{position:relative}
.hero-particles{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero h1 span{transition:color .5s ease}
.hero.has-particles h1 span{color:transparent!important}

/* ---- Contact heading particle rise (assets/js/main.js) ----
   Same safe pattern as the hero: real text stays in the DOM at all
   times, wrapped in one <span> only so its color can crossfade; the
   canvas sits on top of that (now invisible) text automatically since
   it's the only positioned child. */
.contact-person h2{position:relative}
.contact-heading-particles{position:absolute;inset:0;pointer-events:none}
.contact-person h2 span{transition:color .45s ease}
.contact-person h2.has-particles span{color:transparent!important}

/* ---- Founder photo particle wipe (assets/js/main.js) ----
   The real <img> stays in the DOM throughout - only its opacity
   crossfades once the particle wipe finishes, so alt text/SEO/no-JS are
   unaffected and a JS failure just leaves the real photo showing. */
.founder-media{position:relative}
.founder-particles{position:absolute;inset:0;pointer-events:none}
.founder-media img{transition:opacity .55s ease}
.founder-media.has-particles img{opacity:0}
.landscape-gl{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.2s ease}.gl-live .landscape-gl{opacity:1}.motion-off .landscape-gl{display:none!important}
.project{translate:0 var(--rise,0px)}

/* Three-dimensional project displays. */
.project-3d canvas{display:block;width:100%;height:100%;touch-action:pan-y}
.project-3d{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 50% 50%,#3b565b65,transparent 70%)}
.has-project-3d .project-3d{opacity:1}
.has-project-3d>img{opacity:0}
.has-project-3d .project-open{z-index:2}
.subpage .showcase-media[data-screen-desktop]{position:relative}.subpage .showcase-card:hover .has-project-3d>img{transform:none}
@media(prefers-reduced-motion:reduce){.project-3d{display:none}.has-project-3d>img{opacity:1}}

@media(prefers-reduced-motion:reduce){.landscape-gl{display:none!important}}

/* Keep the WebGL surface on one compositor layer and retire its photo
   only after a successful first frame. Context loss restores the photo. */
.landscape-gl{transform:translateZ(0);backface-visibility:hidden}
.gl-live>img{opacity:0;transition:opacity 1.2s ease}
.motion-off .gl-live>img{opacity:1}
@media(prefers-reduced-motion:reduce){.gl-live>img{opacity:1;transition:none}}

/* A social presence, with a digital home of your own. */
.digital-home{padding:90px 6%;background:#10232c;border-block:1px solid #b2c7c21f}
.digital-home-intro{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(30px,6vw,90px);max-width:1280px;margin:0 auto 48px;align-items:start}
.digital-home h2{font-size:clamp(36px,4.6vw,66px);font-weight:500;line-height:1.08;letter-spacing:-.04em;margin:0;max-width:11ch;text-wrap:balance}
.digital-home p{font-size:16px;line-height:1.8;color:#c0cdd0;margin:0 0 18px;max-width:68ch}
.digital-home-copy p:last-child,.digital-home-details p:last-child{margin-bottom:0}
.digital-home-comparison{max-width:1280px;margin:0 auto 52px}
.digital-home table{width:100%;border-collapse:collapse;table-layout:fixed;text-align:left}
.digital-home caption{text-align:left;font-size:18px;font-weight:500;color:var(--paper);padding-bottom:20px}
.digital-home thead th{font-size:20px;font-weight:500;line-height:1.4;vertical-align:bottom;padding:24px}
.digital-home thead td{width:21%}
.digital-home th,.digital-home td{overflow-wrap:break-word}
.digital-home tbody th{font-size:15px;font-weight:500;color:var(--paper);padding:22px 22px 22px 0;vertical-align:top}
.digital-home tbody td{font-size:15px;line-height:1.65;color:#b6c5ca;padding:22px 24px;vertical-align:top}
.digital-home tbody tr{border-top:1px solid #b2c7c226}
.digital-home tr>:last-child{background:#e8a8550c;color:#e0e7df}
.digital-home thead th:last-child{border-top:2px solid var(--amber);color:var(--amber)}
.digital-home-plus{display:block;font-size:32px;line-height:1;margin-bottom:12px}
.digital-home-mobile-label{display:none}
.digital-home-details{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,90px);max-width:1280px;margin:auto}
.digital-home h3,.digital-home h2.digital-home-subheading{font-size:clamp(23px,2.4vw,30px);font-weight:500;line-height:1.25;letter-spacing:-.02em;margin:0 0 22px;text-wrap:balance;max-width:28ch}
.digital-home p.digital-home-takeaway{max-width:1280px;margin:52px auto 0;padding-top:30px;border-top:1px solid #b2c7c226;font-size:clamp(24px,3vw,38px);line-height:1.4;color:var(--amber);letter-spacing:-.025em}
.digital-home-takeaway strong{font-weight:500}
@media(max-width:800px){.digital-home{padding-block:60px}.digital-home-intro{grid-template-columns:1fr;gap:26px}.digital-home h2{max-width:18ch}.digital-home-details{grid-template-columns:1fr}.digital-home thead td{width:23%}.digital-home thead th{font-size:17px;padding:18px}.digital-home tbody td{padding:18px;font-size:14px}}
@media(max-width:600px){.digital-home-intro{margin-bottom:34px}.digital-home table,.digital-home tbody{display:block}.digital-home caption{display:block;font-size:20px;line-height:1.4}.digital-home thead{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.digital-home tbody tr{display:grid;grid-template-columns:1fr 1fr;padding-top:18px}.digital-home tbody th{grid-column:1/-1;padding:0 0 14px;font-size:17px}.digital-home tbody td{padding:14px 12px 20px;font-size:14px}.digital-home tbody td:nth-child(2){padding-left:0}.digital-home-mobile-label{display:block;margin-bottom:10px;font-size:12px;font-weight:600;line-height:1.45;color:var(--paper)}.digital-home td:last-child .digital-home-mobile-label{color:var(--amber)}.digital-home p.digital-home-takeaway{margin-top:34px}}
/* Standalone guide uses the same hero, typography and textured surface as other subpages. */
.digital-home-page .digital-home{padding-top:12px;padding-bottom:70px;border:0;background:transparent}
.digital-home-page-link a{color:var(--amber);text-decoration:underline;text-underline-offset:4px}
.digital-home p.digital-home-page-link{max-width:1280px;margin:24px auto 0}

/* ==========================================================================
   Ultra 2.0 — finpuss (level 4: filmatisk, scrollstyrt, profesjonelt)
   ========================================================================== */

/* [hidden] must win over .mobile-nav's display:flex, or the closed menu's
   links stay in the tab order. */
.mobile-nav[hidden] { display: none; }

/* ---- Hero: the heading is transparent from the very first paint while the
   particles build it (html.motion-ok only, set in <head>), so it never
   shows finished for a moment first. Failsafe: the hold animation simply
   ends after 3.6 s, and main.js never hides text that is already showing. */
@keyframes kdlg-hero-hold { 0%, 100% { color: transparent; } }
html.motion-ok .hero h1 span { animation: kdlg-hero-hold 3.6s step-end; }
@keyframes kdlg-rise { from { opacity: 0; translate: 0 18px; } }
html.motion-ok .hero .eyebrow { animation: kdlg-rise .9s cubic-bezier(.2,.8,.2,1) .05s both; }
html.motion-ok .hero-bottom > * { animation: kdlg-rise 1s cubic-bezier(.2,.8,.2,1) both; }
html.motion-ok .hero-bottom > :nth-child(1) { animation-delay: .9s; }
html.motion-ok .hero-bottom > :nth-child(2) { animation-delay: 1.05s; }
html.motion-ok .hero-bottom > :nth-child(3) { animation-delay: 1.2s; }
@keyframes kdlg-cue { 0%, 100% { translate: 0 0; } 50% { translate: 0 6px; } }
html.motion-ok .scroll-cue span { display: inline-block; animation: kdlg-cue 2.4s ease-in-out 2s infinite; }

/* ---- Assembly: a pre-blurred contact shadow under each part. It spreads
   and lightens while the part is lifted (--lift, 1 -> 0, set per frame by
   main.js) and tightens as it lands. Only transform/opacity change, so the
   blur is rasterized once instead of re-filtering the SVG every frame. */
.hardware-part { isolation: isolate; }
.hardware-part::before { content: ''; position: absolute; inset: 3% 2%; z-index: -1; border-radius: 12px; background: #000; filter: blur(9px); pointer-events: none; opacity: calc(.55 - var(--lift, 0) * .3); transform: translate3d(0, calc(2px + var(--lift, 0) * 16px), 0) scale(calc(1 + var(--lift, 0) * .08)); will-change: transform, opacity; }
.chassis::before { inset: 2% 1%; border-radius: 26px; filter: blur(14px); }
.memory::before, .ribbon::before { inset: 20% 6%; filter: blur(6px); }
.ribbon::before { opacity: calc(.3 - var(--lift, 0) * .15); }
.boot-lines > div { transition: opacity .3s ease; }
.assembly-status { min-height: 1.5em; }
@media (prefers-reduced-motion: reduce) { .hardware-part::before { will-change: auto; } }

/* ---- Project displays: the WebGL layer crossfades over the pre-rendered
   poster (same pose), never a hard swap. */
.project-3d { transition: opacity .9s ease; }
.project-image > img, .subpage .showcase-media > img { transition: opacity .9s ease, transform .5s ease; }

/* ---- Accordion rows open with a real height transition where supported. */
.service-list details { interpolate-size: allow-keywords; }
.service-list details::details-content { height: 0; overflow: clip; transition: height .45s cubic-bezier(.2,.8,.2,1), content-visibility .45s allow-discrete; }
.service-list details[open]::details-content { height: auto; }
.service-list summary > b { transition: transform .35s cubic-bezier(.2,.8,.2,1); }
@media (prefers-reduced-motion: reduce) { .service-list details::details-content { transition: none; } }

/* ---- Subpage heroes: hand-drawn ridge (functions.php), traced in on load,
   with the peak's power LED and a slow ambient float. */
.page-hero { position: relative; isolation: isolate; overflow: clip; }
.page-hero-art { position: absolute; z-index: -1; right: -3%; top: 50%; width: min(42vw, 620px); height: auto; translate: 0 -42%; color: var(--amber); pointer-events: none; }
.pha-ridge { stroke: var(--amber); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; opacity: .55; }
.pha-ridge--far { stroke: #8fa8ad; stroke-width: 1.1; opacity: .3; }
.pha-contours { opacity: .14; }
.pha-led { fill: var(--amber); transform-box: fill-box; transform-origin: center; }
html.motion-ok .pha-ridge { stroke-dasharray: 1; stroke-dashoffset: 1; animation: pha-draw 2.6s cubic-bezier(.65,0,.35,1) .3s forwards; }
html.motion-ok .pha-ridge--far { animation-delay: .55s; animation-duration: 2.9s; }
html.motion-ok .pha-contours path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: pha-draw 3.4s cubic-bezier(.65,0,.35,1) .8s forwards; }
html.motion-ok .pha-led { opacity: 0; animation: pha-led-on .5s ease-out 2.5s forwards, pha-pulse 2.6s ease-in-out 3.1s infinite; }
html.motion-ok .page-hero-art { animation: pha-float 16s ease-in-out 3s infinite alternate; }
@keyframes pha-draw { to { stroke-dashoffset: 0; } }
@keyframes pha-led-on { to { opacity: 1; } }
@keyframes pha-pulse { 0%, 100% { scale: 1; } 50% { scale: 1.7; } }
@keyframes pha-float { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-18px, 8px, 0); } }
@keyframes kdlg-title { from { opacity: 0; translate: 0 .4em; } }
html.motion-ok .page-breadcrumb { animation: kdlg-rise .8s cubic-bezier(.2,.8,.2,1) .05s both; }
html.motion-ok .page-hero .page-title { animation: kdlg-title 1.05s cubic-bezier(.16,1,.3,1) .12s both; }
@media (max-width: 1200px) and (min-width: 801px) { .page-hero-art { opacity: .45; } }
@media (max-width: 800px) {
  .page-hero-art { top: auto; bottom: -6px; right: -18%; width: 108vw; translate: none; opacity: .3; }
}
@media (prefers-reduced-motion: reduce) {
  html .page-hero-art, html .pha-ridge, html .pha-contours path, html .pha-led, html .page-breadcrumb, html .page-hero .page-title,
  html .hero .eyebrow, html .hero-bottom > *, html .scroll-cue span, html .hero h1 span { animation: none !important; }
  html .pha-ridge, html .pha-contours path { stroke-dashoffset: 0 !important; }
  html .pha-led { opacity: 1 !important; }
}

/* ---- Vanlige sider (page.php): the page's own content as readable prose. */
.subpage--page .page-hero { padding-bottom: 36px; }
.page-prose { max-width: calc(70ch + 12%); padding: 0 6% 110px; color: #c4cecf; font-size: 17px; line-height: 1.75; }
.page-prose > :first-child { margin-top: 0; }
.page-prose p, .page-prose ul, .page-prose ol { margin: 0 0 1.15em; max-width: 70ch; }
.page-prose h2 { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.2; font-weight: 500; letter-spacing: -.03em; color: var(--paper); margin: 2.2em 0 .6em; }
.page-prose h3 { font-size: 20px; font-weight: 600; letter-spacing: -.01em; color: var(--paper); margin: 1.8em 0 .5em; }
.page-prose ul, .page-prose ol { padding-left: 1.3em; }
.page-prose li { margin-bottom: .55em; }
.page-prose li::marker { color: var(--amber); }
.page-prose a { color: var(--amber); text-decoration: underline; text-underline-offset: 4px; }
.page-prose a:hover { color: #f6d9a8; }
.page-prose strong, .page-prose b { color: var(--paper); font-weight: 600; }
.page-prose em { color: #a6b5b7; }
.page-prose img { max-width: 100%; height: auto; border-radius: 10px; }
@media (max-width: 560px) { .page-prose { font-size: 16px; padding-bottom: 80px; } }

/* Kickers on the light (paper) sections need a darker ink to pass AA. */
.founder .section-kicker, .contact .section-kicker { color: #4f5f5b; }