/* Nordlink — original identity, cinematic scroll extension requested 2026-11-13. */
@import url('tokens.css');
:root{--petrol:#004358;--deep:#002a37;--night:#001b24;--cream:#f0f0df;--mint:#b8e3cc;--line:#779d9e;--clear:transparent;--font-display:"Chakra Petch",sans-serif;--font-body:"IBM Plex Sans",sans-serif;--container:1440px}
*{box-sizing:border-box}html,body{margin:0;overflow-x:clip}html{scroll-behavior:smooth;scroll-padding-top:100px;scrollbar-color:var(--mint) var(--deep)}body{background:var(--night);color:var(--cream);font-family:var(--font-body);font-size:17px;line-height:1.55}::selection{background:var(--mint);color:var(--night)}a{color:inherit;text-underline-offset:6px}button,input,select,textarea{font:inherit}button,a,select,textarea{-webkit-tap-highlight-color:var(--clear)}button,a{touch-action:manipulation}a:focus-visible,button:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--mint);outline-offset:7px}button{cursor:pointer}button:disabled{opacity:.6;cursor:default}[hidden]{display:none!important}.container{max-width:var(--container);margin:auto;padding-inline:5%}.masthead{position:absolute;inset:0 0 auto;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:30px 5%;max-width:1600px;margin:auto;gap:30px}.wordmark{width:180px;height:auto;display:block}.masthead nav{display:flex;align-items:center;gap:28px;font-size:14px}.masthead a{text-decoration:none}.masthead a:hover,.text-link:hover{color:var(--mint)}#motion{background:none;border:1px solid var(--line);color:var(--cream);padding:9px 14px;border-radius:30px;font-size:13px}.skip{position:fixed;z-index:100;top:10px;left:10px;transform:translateY(-200%);background:var(--cream);color:var(--night);padding:12px}.skip:focus{transform:none}
h1,h2{font-family:var(--font-display);font-weight:600;line-height:.94;letter-spacing:-.035em;margin:0;overflow-wrap:break-word;min-width:0}h1{font-size:clamp(4rem,9.8vw,9rem)}h2{font-size:clamp(2.5rem,5.7vw,5.6rem)}p{max-width:50ch}.button{display:inline-block;background:var(--cream);color:var(--night);padding:16px 28px;border:1px solid var(--cream);border-radius:3px;text-decoration:none;font-weight:500;transition:background .2s,transform .2s}.button:hover{background:var(--mint);transform:translateY(-2px)}.button:active{transform:translateY(1px)}
.opening{position:relative;background:var(--petrol)}.opening-stage{min-height:800px;height:100svh;max-height:1400px;position:relative;display:flex;align-items:center;overflow:clip}.hero-copy{position:relative;z-index:2;margin:auto;width:min(90%,1440px);padding:110px 0 80px}.hero-copy p{max-width:360px;margin:26px 0}.portal-art{position:absolute;inset:0;overflow:clip}.portal-symbol{position:absolute;width:min(70%,1000px);height:auto;right:-4%;top:50%;transform:translateY(-50%) rotate(-12deg);opacity:.3}.orbit{position:absolute;width:80%;aspect-ratio:1;border:1px solid var(--line);border-radius:50%;right:-20%;top:-15%;opacity:.45}.orbit-b{width:110%;right:-35%;top:-40%}.scroll-cue{position:absolute;bottom:28px;left:5%;right:5%;display:flex;justify-content:space-between;text-decoration:none;font-size:13px;z-index:3}.scroll-cue span{font-size:25px}
.chapter{position:relative}.chapter-stage{position:relative;min-height:800px;height:100svh;overflow:clip;display:flex;align-items:center}.chapter-it{background:var(--night)}.chapter-medien{background:var(--cream);color:var(--petrol)}.chapter-ki{background:var(--petrol)}.scene{position:absolute;inset:0;overflow:clip}.scene-word{position:absolute;left:3%;top:1%;font-family:var(--font-display);font-weight:600;font-size:clamp(9rem,28vw,28rem);line-height:1;letter-spacing:-.04em;opacity:.12;white-space:nowrap}.chapter-copy{position:relative;z-index:2;width:min(90%,1440px);margin:auto;padding-top:140px}.chapter-copy h2{max-width:800px}.chapter-copy p{max-width:410px;margin:30px 0;font-size:18px}.text-link{font-size:15px}.chapter-nav{position:absolute;bottom:32px;left:5%;display:flex;gap:32px;z-index:3;font-size:14px}.chapter-nav a{text-decoration:none;opacity:.6}.chapter-nav [aria-current]{opacity:1;text-decoration:underline}.scene-object{position:absolute;right:4%;top:24%;width:44%;height:64%;perspective:900px}.connection{position:absolute;inset:10% 15%;border:2px solid var(--mint);border-radius:18%;transform:rotate(-35deg) rotateY(-30deg)}.connection-1{transform:translate(18px,18px) rotate(-35deg) rotateY(-30deg);opacity:.75}.connection-2{transform:translate(36px,36px) rotate(-35deg) rotateY(-30deg);opacity:.55}.connection-3{transform:translate(54px,54px) rotate(-35deg) rotateY(-30deg);opacity:.35}.connection-4{transform:translate(72px,72px) rotate(-35deg) rotateY(-30deg);opacity:.2}.frame{position:absolute;inset:12% 3%;border:2px solid var(--petrol);background:var(--petrol);transform:rotate(-12deg);display:grid;place-items:center}.frame img{width:50%;height:auto}.frame-0{transform:translate(-40px,-35px) rotate(-20deg);opacity:.2}.frame-1{transform:translate(-20px,-15px) rotate(-16deg);opacity:.4}.flow{position:absolute;width:70%;height:30%;border:2px solid var(--mint);border-radius:50%;top:10%;left:15%;transform:rotate(-25deg)}.flow-1{top:18%;opacity:.85}.flow-2{top:26%;opacity:.7}.flow-3{top:34%;opacity:.55}.flow-4{top:42%;opacity:.4}.flow-5{top:50%;opacity:.25}.flow-6{top:58%;opacity:.1}
.scroll-active .opening{height:190svh}.scroll-active .opening-stage,.scroll-active .chapter-stage{position:sticky;top:0;max-height:none}.scroll-active .chapter{height:180svh}.together{background:var(--mint);color:var(--night);padding:150px 0}.together h2{max-width:1100px;margin-bottom:45px}.together p{margin-left:auto;max-width:620px;font-size:21px}.brief{padding-block:130px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px}.brief h2{font-size:clamp(2.5rem,5vw,4.5rem)}form{display:grid;gap:14px}label{font-size:15px}select,textarea{background:var(--deep);border:1px solid var(--line);color:var(--cream);padding:16px;max-width:100%;width:100%;border-radius:3px;caret-color:var(--mint)}textarea{min-height:160px;resize:vertical}textarea::placeholder{color:var(--mint)}form .button{margin-top:10px;justify-self:start}.form-note,#result{font-size:13px;margin:0}footer{padding-block:45px 65px;display:flex;justify-content:space-between;align-items:center;gap:25px;border-top:1px solid var(--line);font-size:14px}.intro{position:fixed;inset:0;background:var(--night);z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;animation:intro-away .35s ease 1.05s forwards;pointer-events:none}.intro img{animation:logo-in .8s cubic-bezier(.16,1,.3,1) both}.intro-line{width:100px;height:2px;background:var(--mint);transform-origin:left;animation:load-line 1s ease both}.intro button{pointer-events:auto;background:none;border:0;color:var(--cream);font-size:13px;padding:15px}@keyframes logo-in{from{transform:scale(.75);opacity:0}to{transform:scale(1);opacity:1}}@keyframes load-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes intro-away{to{opacity:0;visibility:hidden}}
@media(min-width:1600px){.chapter-copy,.hero-copy{padding-inline:30px}.scene-object{right:12%;width:36%}}
@media(max-width:700px){.masthead{padding:22px 6%;gap:15px;align-items:flex-start}.wordmark{width:130px}.masthead nav{gap:15px;flex-wrap:wrap;justify-content:flex-end;font-size:12px;max-width:205px}#motion{font-size:11px;padding:5px 10px}.opening-stage,.chapter-stage{min-height:700px}.hero-copy{padding-top:180px;width:88%}h1{font-size:clamp(3.2rem,12.4vw,5.5rem)}.hero-copy p{max-width:285px;font-size:16px}.portal-symbol{width:115%;right:-37%;top:35%;opacity:.2}.orbit{width:150%;right:-80%;top:10%}.scroll-cue{left:6%;right:6%}.chapter-copy{width:88%;padding-top:180px}.chapter-copy h2{font-size:clamp(2.4rem,9.1vw,4rem)}.chapter-copy p{font-size:16px;max-width:33ch}.scene-word{top:7%;left:5%;font-size:25vw;opacity:.25}.scene-object{width:75%;height:45%;right:-20%;top:21%;opacity:.2}.chapter-nav{left:6%}.together{padding:95px 0}.together h2{font-size:clamp(2.2rem,8vw,3.5rem)}.together p{font-size:18px}.brief{grid-template-columns:minmax(0,1fr);gap:35px;padding-block:90px}footer{flex-direction:column;align-items:flex-start}.scroll-active .opening{height:160svh}.scroll-active .chapter{height:155svh}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.intro{display:none!important}.scroll-active .opening,.scroll-active .chapter{height:auto}.scroll-active .opening-stage,.scroll-active .chapter-stage{position:relative}}
/* All chapter labels retain readable contrast; the underline marks the active chapter. */
.chapter-nav a{opacity:1}

/* Mobile: native continuous scrolling; depth lives in artwork, not text.
   Avoid sticky handoffs and long pinned tracks on short/touch viewports. */
@media(max-width:700px){
 html{scroll-behavior:auto;scroll-padding-top:24px}
 .scroll-active .opening,.scroll-active .chapter{height:auto}
 .scroll-active .opening-stage,.scroll-active .chapter-stage{position:relative;top:auto;height:auto;max-height:none}
 .opening-stage,.chapter-stage{height:auto;min-height:max(620px,100svh)}
 .hero-copy{padding-block:160px 130px}
 .chapter-copy{padding-block:180px 120px}
 .chapter-nav{bottom:24px;gap:20px}
 .chapter-nav a{display:inline-flex;align-items:center;min-height:44px;padding-inline:6px}
 .scene-object{perspective:none}
 .portal-symbol,.scene-object{will-change:transform}
 .scroll-cue{bottom:24px}
}
@media(max-width:700px){h1{font-size:clamp(2.2rem,12.1vw,5.5rem)}}
@media(prefers-reduced-motion:reduce){.scene-object,.scene-word,.chapter-copy,.hero-copy{transform:none!important}.hero-copy{opacity:1!important}.portal-symbol{transform:translateY(-50%) rotate(-12deg)!important}}

/* Each service now has a full scroll act, on both desktop and touch. */
.scroll-active .chapter{--act-height:max(800px,100svh);height:calc(var(--act-height)*2.25)}
.scroll-active .chapter-stage{position:sticky;top:0;height:var(--act-height);min-height:0}
.scene-object{transform-origin:center;isolation:isolate}
.chapter-ki .flow{top:30%;height:40%}
@media(max-width:700px){
 .scroll-active .opening{--act-height:max(680px,100svh);height:calc(var(--act-height)*1.65)}
 .scroll-active .opening-stage{position:sticky;top:0;height:var(--act-height);min-height:0}
 .scroll-active .chapter{--act-height:max(760px,100svh);height:calc(var(--act-height)*2.05)}
 .scroll-active .chapter-stage{position:sticky;top:0;height:var(--act-height);min-height:0}
 .chapter-stage{min-height:760px}
 .chapter-copy{align-self:flex-end;padding-block:0 110px;margin-bottom:0}
 .chapter-copy h2{font-size:clamp(2rem,8.6vw,3.6rem)}
 .chapter-copy p{margin:22px 0;font-size:16px}
 .scene-word{font-size:24vw;top:3%;opacity:.18}
 .scene-object{width:66%;height:27%;right:17%;top:15%;opacity:.85}
 .frame{inset:5% 10%}
 .scene-it .scene-object{height:26%;top:14%}
 .scene-ki .scene-object{height:30%;top:12%}
}
@media(prefers-reduced-motion:reduce){
 .scroll-active .opening,.scroll-active .chapter{height:auto}
 .scroll-active .opening-stage,.scroll-active .chapter-stage{position:relative;height:auto}
 .connection,.frame,.flow{transform:none!important}
}
@media(min-width:701px){.scene-medien .scene-object{right:0;width:35%}}

/* Supplied longer copy: retain clear space for the scroll artwork. */
.hero-copy p{max-width:440px}
.chapter-copy h2{font-size:clamp(2.4rem,4.5vw,4.5rem);max-width:650px;line-height:1.05}
.chapter-copy p{max-width:480px}
@media(min-width:701px){.chapter-copy h2,.chapter-copy p{max-width:48%}}
@media(max-width:700px){
 .chapter-copy h2{font-size:clamp(1.8rem,7.8vw,2.8rem)}
 .scroll-active .chapter{--act-height:max(900px,100svh)}
 .chapter-stage{min-height:900px}
 .scene-object{height:22%;top:13%}
 .scene-it .scene-object{height:22%;top:12%}
 .scene-ki .scene-object{height:24%;top:10%}
 .chapter-copy{padding-bottom:110px}
 .chapter-copy p{font-size:16px;line-height:1.55}
 .hero-copy p{max-width:34ch}
}