/* Magnus Nieberle — 2026 / warm editorial system */
:root{
  --motion-ease:cubic-bezier(.22,.61,.36,1);
  --motion-soft:cubic-bezier(.16,1,.3,1);
  --motion-fast:260ms;
  --motion-base:520ms;
  --paper:#F0E9DE;
  --cream:#FAF8F2;
  --forest:#18372D;
  --clay:#A44931;
  --ochre:#7A5A20;
  --line:rgba(24,55,45,.18);
  --shadow:0 18px 50px rgba(24,55,45,.10);
  --radius:18px;
  --radius-sm:10px;
  --wrap:min(1180px,calc(100% - 40px));
  --sans:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --serif:Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--cream)}
body{margin:0;color:var(--forest);background:var(--cream);font-family:var(--sans);font-size:clamp(1rem,.96rem + .18vw,1.08rem);line-height:1.62;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration-thickness:.08em;text-underline-offset:.18em}
a:hover{color:var(--clay);text-decoration-color:var(--clay)}
a:focus-visible{color:var(--clay);text-decoration-color:var(--clay)}
button,input,select,textarea{font:inherit}
button,a,input,select,textarea{outline-offset:4px}
:focus-visible{outline:3px solid var(--ochre);outline-offset:4px}
::selection{background:var(--clay);color:var(--cream)}
.skip-link{position:fixed;left:12px;top:12px;z-index:999;padding:10px 14px;background:var(--forest);color:var(--cream);transform:translateY(-180%)}
.skip-link:focus{transform:none}
.wrap{width:var(--wrap);margin-inline:auto}
.section{padding:clamp(72px,10vw,144px) 0}
.section--paper{background:var(--paper)}
.section--forest{background:var(--forest);color:var(--cream)}
.kicker{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-weight:750;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--clay)}
.kicker::before{content:"";width:24px;height:2px;background:currentColor}
.section--forest .kicker{color:var(--cream)}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{letter-spacing:-.035em;line-height:.98}
h1{font-size:clamp(3.25rem,10vw,8.8rem);font-weight:760;margin-bottom:24px}
h2{font-size:clamp(2.35rem,6.3vw,5.6rem);font-weight:730;margin-bottom:22px}
h3{font-size:clamp(1.35rem,2.7vw,2.15rem);font-weight:720;margin-bottom:12px}
.serif{font-family:var(--serif);font-weight:400;font-style:italic;letter-spacing:-.025em}
.lead{font-size:clamp(1.22rem,2.2vw,1.7rem);line-height:1.42;max-width:44rem;color:rgba(24,55,45,.72)}
.section--forest .lead{color:rgba(250,248,242,.84)}
.small{font-size:.86rem;color:rgba(24,55,45,.72)}
.section--forest .small{color:rgba(250,248,242,.72)}
.rule{border:0;border-top:1px solid var(--line);margin:0}

/* Header */
.site-header{position:sticky;top:0;z-index:80;background:rgba(250,248,242,.96);border-bottom:1px solid transparent;transition:border-color var(--motion-fast) var(--motion-ease)}
.site-header.is-scrolled{border-bottom-color:var(--line)}
.nav{height:76px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:inline-flex;align-items:center;width:clamp(190px,22vw,270px);color:var(--forest)}
.brand img{width:100%;height:auto}
.nav-links{display:none;align-items:center;gap:22px;list-style:none;padding:0;margin:0}
.nav-links a{position:relative;font-size:.9rem;font-weight:700;text-decoration:none;padding:8px 0}
.nav-links a::after{content:"";position:absolute;left:0;bottom:2px;width:100%;height:2px;background:var(--clay);transform:scaleX(0);transform-origin:right;transition:transform var(--motion-fast) var(--motion-ease)}
.nav-links a:hover::after,.nav-links a:focus-visible::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.nav-cta{display:none}
.menu-btn{width:44px;height:44px;border:1px solid var(--forest);border-radius:999px;background:transparent;color:var(--forest);display:grid;place-items:center;cursor:pointer}
.menu-btn:hover{background:var(--forest);color:var(--cream)}
.menu-btn span,.menu-btn span::before{display:block;width:17px;height:2px;background:currentColor;content:"";transition:transform var(--motion-fast) var(--motion-ease)}
.menu-btn span::before{transform:translateY(5px)}
.menu-btn[aria-expanded="true"] span{transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] span::before{transform:rotate(90deg)}
.mobile-menu{position:fixed;inset:76px 0 0;z-index:75;background:var(--forest);color:var(--cream);padding:32px 20px 48px;visibility:hidden;opacity:0;transition:opacity 320ms var(--motion-ease),visibility 320ms var(--motion-ease);overflow:auto}
.mobile-menu.open{visibility:visible;opacity:1}
.mobile-menu nav{width:min(680px,100%);margin:auto}
.mobile-menu a{display:flex;justify-content:space-between;gap:20px;padding:18px 0;border-bottom:1px solid rgba(250,248,242,.18);font-size:clamp(1.7rem,7vw,3rem);font-weight:720;text-decoration:none}
.mobile-menu a:hover,.mobile-menu a:focus-visible{color:var(--cream)}
.mobile-meta{width:min(680px,100%);margin:36px auto 0;color:rgba(250,248,242,.76);font-size:.9rem}
body.menu-open{overflow:hidden}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:12px 20px;border:1px solid var(--forest);border-radius:999px;font-weight:750;text-decoration:none;cursor:pointer;transition:background-color 280ms var(--motion-ease),color 280ms var(--motion-ease),transform 360ms var(--motion-soft)}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:var(--forest);color:var(--cream)}
.btn--primary:hover,.btn--primary:focus-visible{background:var(--clay);border-color:var(--clay);color:var(--cream)}
.btn--secondary{background:transparent;color:var(--forest)}
.btn--secondary:hover,.btn--secondary:focus-visible{background:var(--paper)}
.btn--light{border-color:var(--cream);color:var(--cream);background:transparent}
.btn--light:hover,.btn--light:focus-visible{background:var(--cream);color:var(--forest)}
.text-link{display:inline-flex;align-items:center;gap:7px;font-weight:750;text-decoration-color:var(--clay)}
.text-link:hover,.text-link:focus-visible{color:var(--clay)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* Hero */
.hero{min-height:calc(100svh - 76px);display:grid;align-items:center;padding:clamp(54px,8vw,110px) 0;overflow:hidden;border-bottom:1px solid var(--line)}
.hero-grid{display:grid;gap:44px;align-items:end}
.hero-copy{max-width:900px}
.hero h1 strong{color:var(--clay);font-weight:760}
.hero .lead{max-width:52rem}
.hero-note{display:flex;gap:18px;align-items:flex-start;margin-top:34px;padding-top:20px;border-top:1px solid var(--line);max-width:620px}
.hero-note svg{width:42px;flex:0 0 42px;color:var(--ochre)}
.hero-card{position:relative;min-height:420px;background:var(--forest);color:var(--cream);border-radius:var(--radius);padding:clamp(22px,4vw,42px);overflow:hidden;box-shadow:var(--shadow)}
.hero-card::before{content:"MN";position:absolute;right:-.06em;bottom:-.20em;font-size:clamp(10rem,28vw,23rem);font-weight:850;line-height:.8;color:transparent;-webkit-text-stroke:1px rgba(250,248,242,.28);pointer-events:none}
.hero-card-top{display:flex;justify-content:space-between;gap:20px;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(250,248,242,.76)}
.hero-card h2{font-size:clamp(2rem,5vw,4.2rem);max-width:8ch;margin:80px 0 16px}
.hero-card p{max-width:26rem;color:rgba(250,248,242,.84)}
.hero-tags{position:absolute;left:clamp(22px,4vw,42px);bottom:clamp(22px,4vw,42px);display:flex;flex-wrap:wrap;gap:8px}
.pill{display:inline-flex;padding:7px 11px;border:1px solid rgba(250,248,242,.28);border-radius:999px;font-size:.75rem}

/* Proof */
.proof{background:var(--paper);border-bottom:1px solid var(--line)}
.proof-grid{display:grid;grid-template-columns:1fr;gap:0}
.proof-item{padding:24px 0;border-bottom:1px solid var(--line)}
.proof-item:last-child{border-bottom:0}
.proof-item b{display:block;font-size:1rem}
.proof-item span{font-size:.86rem;color:rgba(24,55,45,.72)}

/* Generic grids */
.section-head{display:grid;gap:16px;margin-bottom:clamp(36px,6vw,72px)}
.section-head p{max-width:55rem}
.grid-2,.grid-3,.grid-4{display:grid;gap:16px}
.card{border:1px solid var(--line);border-radius:var(--radius);background:var(--cream);padding:clamp(22px,3vw,34px)}
.card:hover{border-color:rgba(24,55,45,.42)}
.card .num{font-weight:800;font-size:.78rem;letter-spacing:.12em;color:var(--clay);margin-bottom:38px}
.card p{color:rgba(24,55,45,.72);margin-bottom:0}
.section--forest .card{background:transparent;border-color:rgba(250,248,242,.22)}
.section--forest .card p{color:rgba(250,248,242,.76)}
.feature-list{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.feature-list li{padding:6px 10px;border:1px solid var(--line);border-radius:999px;font-size:.78rem;color:rgba(24,55,45,.72)}
.section--forest .feature-list li{border-color:rgba(250,248,242,.25);color:rgba(250,248,242,.84)}

/* Services */
.service-card{min-height:330px;display:flex;flex-direction:column;justify-content:space-between}
.service-card .service-icon{width:48px;height:48px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-size:1.4rem;color:var(--clay)}

/* Portfolio */
.portfolio-list{display:grid;gap:18px}
.project{display:grid;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--cream)}
.project-visual{min-height:300px;background:var(--paper);padding:clamp(22px,4vw,48px);position:relative;overflow:hidden;display:flex;align-items:flex-end}
.project-visual .project-type{position:absolute;left:22px;top:22px;font-size:.74rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(24,55,45,.72)}
.project-mark{font-size:clamp(4rem,11vw,9rem);font-weight:850;line-height:.82;letter-spacing:-.08em;color:var(--forest)}
.project-mark em{font-family:var(--serif);font-weight:400;color:var(--clay)}
.project-lines{position:absolute;right:7%;top:15%;width:38%;height:55%;border:1px solid var(--forest);transform:rotate(4deg)}
.project-lines::before,.project-lines::after{content:"";position:absolute;border:1px solid var(--forest);inset:10%;transform:translate(14%,14%)}
.project-lines::after{inset:20%;transform:translate(28%,28%)}
.project-body{padding:clamp(24px,4vw,46px)}
.project-meta{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}
.project-meta span{padding:5px 9px;border:1px solid var(--line);border-radius:999px;font-size:.76rem;color:rgba(24,55,45,.72)}

/* Name bridge */
.name-bridge{height:180svh;background:var(--forest);color:var(--cream);position:relative}
.name-bridge-sticky{position:sticky;top:76px;height:calc(100svh - 76px);overflow:hidden;display:grid;place-items:center}
.name-outline{position:relative;z-index:3;margin:0;width:110%;text-align:center;font-size:clamp(5.5rem,19vw,17rem);font-weight:900;line-height:.75;letter-spacing:-.08em;color:transparent;-webkit-text-stroke:1px rgba(250,248,242,.6);pointer-events:none}
.bridge-panel{position:absolute;z-index:2;left:50%;top:50%;width:min(760px,82vw);padding:clamp(26px,4vw,48px);background:var(--clay);color:var(--cream);border-radius:var(--radius);transform:translate(-50%,-50%) scale(var(--bridge-scale,.82));opacity:var(--bridge-opacity,.18)}
.bridge-panel small{display:block;text-transform:uppercase;letter-spacing:.14em;font-weight:800;margin-bottom:12px}
.bridge-panel h2{font-size:clamp(2.2rem,7vw,5.6rem);margin-bottom:12px}
.bridge-progress{position:absolute;left:0;bottom:0;height:5px;background:var(--ochre);width:var(--bridge-width,0%)}

/* Process & packages */
.process-grid{counter-reset:step;display:grid;gap:0;border-top:1px solid var(--line)}
.step{display:grid;grid-template-columns:46px 1fr;gap:18px;padding:26px 0;border-bottom:1px solid var(--line)}
.step::before{counter-increment:step;content:counter(step,decimal-leading-zero);font-weight:800;color:var(--clay)}
.step p{color:rgba(24,55,45,.72);margin:0}
.package{display:flex;flex-direction:column;min-height:360px}
.package .eyeline{font-size:.76rem;text-transform:uppercase;letter-spacing:.13em;color:var(--clay);font-weight:800}
.package ul{padding-left:18px;color:rgba(24,55,45,.72)}
.package .text-link{margin-top:auto}
.micro-note{margin-top:20px;padding:18px;border-left:4px solid var(--ochre);background:var(--paper);font-size:.9rem}

/* About */
.about-grid{display:grid;gap:42px;align-items:start}
.portrait-stack{position:relative;min-height:570px}
.portrait-stack figure{position:absolute;margin:0;border-radius:var(--radius);overflow:hidden;border:8px solid var(--cream);box-shadow:var(--shadow)}
.portrait-stack img{width:100%;height:100%;object-fit:cover}
.portrait-now{width:66%;height:490px;left:0;top:0}
.portrait-youth{width:42%;height:330px;right:0;top:90px;transform:rotate(2deg)}
.portrait-child{width:38%;height:230px;right:12%;bottom:0;transform:rotate(-3deg)}
.about-copy p{color:rgba(24,55,45,.72)}
.signature{font-family:var(--serif);font-size:1.5rem;color:var(--forest)!important}
.bobo-note{margin-top:32px;padding:22px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper)}
.bobo-note strong{font-size:clamp(1.4rem,3vw,2rem)}

/* FAQ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:0}
.faq summary{list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:22px 0;font-weight:750;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.5rem;color:var(--clay)}
.faq details[open] summary::after{content:"–"}
.faq details p{max-width:760px;color:rgba(24,55,45,.72);padding:0 0 24px;margin:0}

/* Page hero */
.page-hero{padding:clamp(70px,10vw,140px) 0 clamp(54px,7vw,95px);background:var(--paper);border-bottom:1px solid var(--line)}
.page-hero h1{font-size:clamp(3.3rem,9vw,8rem);max-width:12ch}
.page-hero .lead{max-width:50rem}
.breadcrumb{display:flex;flex-wrap:wrap;gap:8px;font-size:.82rem;color:rgba(24,55,45,.72);margin-bottom:26px}
.breadcrumb a:hover,.breadcrumb a:focus-visible{color:var(--clay)}

/* Systems */
.system-band{display:grid;gap:18px}
.system-row{display:grid;gap:18px;padding:30px 0;border-top:1px solid var(--line)}
.system-row:last-child{border-bottom:1px solid var(--line)}
.system-index{font-size:.8rem;font-weight:800;color:var(--clay)}
.system-row p{color:rgba(24,55,45,.72);margin-bottom:0}

/* Showroom */
.style-switcher{display:grid;gap:24px}
.style-controls{display:flex;flex-wrap:wrap;gap:8px}
.style-controls button{border:1px solid var(--forest);background:transparent;color:var(--forest);border-radius:999px;padding:9px 13px;font-weight:750;cursor:pointer}
.style-controls button:hover,.style-controls button:focus-visible,.style-controls button[aria-pressed="true"]{background:var(--forest);color:var(--cream)}
.style-preview{min-height:420px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);padding:clamp(28px,6vw,72px);display:grid;align-content:center;position:relative;overflow:hidden}
.style-preview h3{font-size:clamp(3rem,8vw,7rem);max-width:8ch;transition:letter-spacing 420ms var(--motion-ease),transform 520ms var(--motion-soft),font-style 420ms var(--motion-ease)}
.style-preview p{max-width:30rem;color:rgba(24,55,45,.72)}
.style-preview[data-style="editorial"] h3{font-family:var(--serif);font-weight:400;font-style:italic}
.style-preview[data-style="modular"]{background:var(--cream);box-shadow:inset 0 0 0 10px var(--paper)}
.style-preview[data-style="modular"] h3{letter-spacing:-.07em;text-transform:uppercase}
.style-preview[data-style="handwerk"] h3{font-family:var(--serif);font-weight:400}
.style-preview[data-style="sport"] h3{font-style:italic;transform:skewX(-5deg);text-transform:uppercase}
.style-preview[data-style="quiet"] h3{font-size:clamp(2.7rem,6vw,5rem);letter-spacing:-.02em}
.style-preview[data-style="bold"] h3{font-size:clamp(4rem,10vw,9rem);text-transform:uppercase;letter-spacing:-.08em}
.motion-cabinet{height:360svh;background:var(--forest);color:var(--cream);position:relative}
.motion-sticky{position:sticky;top:76px;height:calc(100svh - 76px);display:grid;place-items:center;overflow:hidden}
.monitor{width:min(980px,92vw);aspect-ratio:16/9;border:10px solid var(--forest);border-radius:20px;background:var(--paper);position:relative;box-shadow:0 28px 80px rgba(0,0,0,.3);transform:perspective(1000px) rotateX(var(--monitor-x,0deg)) rotateY(var(--monitor-y,0deg)) scale(var(--monitor-scale,1))}
.monitor::after{content:"";position:absolute;left:50%;top:100%;width:18%;height:12%;background:var(--forest);transform:translateX(-50%);clip-path:polygon(35% 0,65% 0,80% 100%,20% 100%)}
.monitor-stage{position:absolute;inset:0;overflow:hidden;background:var(--paper);color:var(--forest)}
.motion-card{position:absolute;width:34%;aspect-ratio:4/5;border:1px solid var(--forest);background:var(--cream);padding:18px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 12px 30px rgba(24,55,45,.12);transition:none}
.motion-card b{font-size:clamp(1.1rem,2.4vw,2.2rem);line-height:1}
.mc1{left:10%;top:12%;transform:translateX(var(--c1x,0px)) rotate(var(--c1r,-5deg))}
.mc2{left:34%;top:20%;background:var(--clay);color:var(--cream);transform:translateY(var(--c2y,0px)) rotate(var(--c2r,3deg))}
.mc3{right:8%;top:10%;background:var(--forest);color:var(--cream);transform:translateX(var(--c3x,0px)) rotate(var(--c3r,6deg))}
.code-panel{position:absolute;left:5%;right:5%;bottom:6%;height:24%;border-top:1px solid var(--forest);display:flex;align-items:center;justify-content:space-between;gap:16px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:clamp(.55rem,1.2vw,.78rem)}
.code-panel span:last-child{font-family:var(--sans);font-size:clamp(.9rem,2vw,1.2rem);font-weight:800;color:var(--clay)}
.motion-caption{position:absolute;left:clamp(20px,4vw,60px);top:clamp(20px,4vw,60px);z-index:3;max-width:320px}
.motion-caption .kicker{color:var(--cream)}
.motion-caption h2{font-size:clamp(2rem,5vw,4.8rem)}
.motion-progress{position:absolute;right:24px;bottom:24px;z-index:4;font-size:.75rem;color:rgba(250,248,242,.76)}

/* Contact / inquiry */
.contact-grid{display:grid;gap:42px}
.contact-facts{display:grid;gap:14px;margin-top:30px}
.contact-fact{padding:18px 0;border-top:1px solid var(--line)}
.contact-fact b{display:block;font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;color:var(--clay)}
.form-shell{border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);padding:clamp(22px,4vw,42px)}
.form-grid{display:grid;gap:18px}
.field{display:grid;gap:7px}
.field label,.field legend{font-size:.82rem;font-weight:800}
.field input,.field select,.field textarea{width:100%;border:1px solid rgba(24,55,45,.34);border-radius:var(--radius-sm);background:var(--cream);color:var(--forest);padding:13px 14px}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--forest)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ochre)}
.field textarea{min-height:140px;resize:vertical}
.choice-grid{display:grid;gap:10px}
.choice{position:relative}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice label{display:block;height:100%;padding:18px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--cream);cursor:pointer}
.choice label:hover{border-color:var(--forest)}
.choice input:focus-visible+label{outline:3px solid var(--ochre);outline-offset:3px}
.choice input:checked+label{border-color:var(--clay);box-shadow:inset 0 0 0 2px var(--clay)}
.choice label b{display:block;margin-bottom:4px}
.choice label span{font-size:.82rem;color:rgba(24,55,45,.72)}
.form-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.form-status{min-height:1.5em;margin-top:14px;font-size:.86rem;color:rgba(24,55,45,.72)}
.inquiry-layout{display:grid;gap:24px;align-items:start}
.inquiry-steps{display:flex;gap:8px;margin-bottom:20px}
.inquiry-dot{height:5px;flex:1;background:rgba(24,55,45,.15)}
.inquiry-dot.active{background:var(--clay)}
.inquiry-step{display:none}
.inquiry-step.active{display:block}
.brief-card{position:sticky;top:96px;border-radius:var(--radius);background:var(--forest);color:var(--cream);padding:28px}
.brief-card h3{font-size:1.5rem}
.brief-card dl{margin:24px 0 0;display:grid;gap:14px}
.brief-card dt{font-size:.72rem;text-transform:uppercase;letter-spacing:.11em;color:rgba(250,248,242,.72)}
.brief-card dd{margin:3px 0 0;font-weight:700}

/* Legal */
.legal{max-width:820px}
.legal h2{font-size:clamp(1.8rem,4vw,3rem);margin-top:50px}
.legal h3{font-size:1.25rem;margin-top:30px;letter-spacing:-.01em;line-height:1.2}
.legal p,.legal li{color:rgba(24,55,45,.72)}
.notice{padding:20px;border:1px solid var(--clay);border-radius:var(--radius-sm);background:var(--paper);color:var(--forest)!important}

/* Footer */
.site-footer{background:var(--forest);color:var(--cream);padding:58px 0 26px}
.footer-grid{display:grid;gap:42px}
.footer-brand img{width:min(300px,80%);filter:brightness(0) invert(1)}
.footer-brand p{max-width:35rem;color:rgba(250,248,242,.76);margin:18px 0 0}
.footer-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
.footer-links h3{font-size:.75rem;text-transform:uppercase;letter-spacing:.13em;color:var(--cream);margin-bottom:12px}
.footer-links a{display:block;padding:4px 0;color:rgba(250,248,242,.82);text-decoration:none}
.footer-links a:hover,.footer-links a:focus-visible{color:var(--cream);text-decoration:underline}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:28px;margin-top:42px;border-top:1px solid rgba(250,248,242,.18);font-size:.78rem;color:rgba(250,248,242,.76)}

/* Reveal */
.reveal{opacity:0;transform:translateY(14px);transition:opacity 620ms var(--motion-ease),transform 680ms var(--motion-soft)}
.reveal.in{opacity:1;transform:none}

@media(min-width:700px){
  :root{--wrap:min(1180px,calc(100% - 72px))}
  .proof-grid{grid-template-columns:repeat(3,1fr)}
  .proof-item{padding:26px 24px;border-bottom:0;border-right:1px solid var(--line)}
  .proof-item:first-child{padding-left:0}.proof-item:last-child{border-right:0}
  .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .project{grid-template-columns:1.1fr .9fr;min-height:470px}
  .project:nth-child(even){grid-template-columns:.9fr 1.1fr}
  .project:nth-child(even) .project-visual{order:2}
  .system-row{grid-template-columns:70px minmax(220px,.7fr) 1.3fr;align-items:start}
  .contact-grid{grid-template-columns:.8fr 1.2fr}
  .choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{grid-template-columns:1.2fr .8fr}
}
@media(min-width:960px){
  .nav-links,.nav-cta{display:flex}.menu-btn{display:none}
  .hero-grid{grid-template-columns:1.2fr .8fr;gap:72px}
  .hero-copy h1{font-size:clamp(4rem,7.9vw,8.1rem)}
  .grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .about-grid{grid-template-columns:1fr .9fr;gap:80px}
  .inquiry-layout{grid-template-columns:1.25fr .75fr;gap:32px}
}
@media(max-width:699px){
  .name-outline{writing-mode:vertical-rl;transform:rotate(180deg);font-size:clamp(5rem,25vw,8rem);width:auto;height:110%;line-height:.72}
  .bridge-panel{width:78vw}
  .portrait-stack{min-height:520px}
  .portrait-now{width:72%;height:420px}.portrait-youth{width:44%;height:280px}.portrait-child{width:42%;height:200px}
  .motion-card{width:42%}.mc2{left:30%}.mc3{right:4%}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .bridge-panel{transform:translate(-50%,-50%) scale(1);opacity:1}
  .monitor{transform:none!important}
  .motion-card{transform:none!important}
}

/* IONOS inquiry transport */
.hp-field{position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important}
.form-shell.is-sending{opacity:.78;pointer-events:none}
.form-status.is-success{font-weight:700}
.form-status.is-error{font-weight:700;color:var(--clay)}

/* ==========================================================
   2026-08 — Agentur Editorial V2
   Inspired by the pacing of strong regional creative studios.
   Content, palette and functionality stay Magnus Nieberle.
   ========================================================== */

:root{
  --display-tracking:-.065em;
  --hard-shadow:10px 10px 0 var(--forest);
}

body{overflow-x:hidden}
.section{position:relative}
.section-head{align-items:end}
.section-head h2{font-size:clamp(2.8rem,7.4vw,7rem);letter-spacing:var(--display-tracking);max-width:10.5ch}
.section-head .lead{justify-self:start}
.kicker{letter-spacing:.17em}

/* Header — clear, editorial, not glassy */
.site-header{background:var(--cream);border-bottom:1px solid var(--line)}
.nav{height:82px}
.nav-links{gap:18px}
.nav-links a{font-size:.76rem;letter-spacing:.075em;text-transform:uppercase}
.nav-cta{min-height:44px;padding-inline:17px}
.mobile-menu{top:82px}

/* Hero — bolder agency entrance while retaining all copy */
.hero{min-height:calc(100svh - 82px);padding:clamp(50px,7vw,96px) 0 clamp(72px,9vw,130px);background:var(--paper);border-bottom:0;isolation:isolate}
.hero::before{content:"ALLGÄU · DESIGN · CODE · MARKE";position:absolute;right:14px;top:50%;z-index:-1;writing-mode:vertical-rl;transform:translateY(-50%);font-size:.66rem;letter-spacing:.28em;font-weight:850;color:rgba(24,55,45,.35)}
.hero-grid{align-items:center}
.hero-copy{position:relative;z-index:2}
.hero .kicker{margin-bottom:24px}
.hero h1{font-size:clamp(4.4rem,10.6vw,10.6rem);line-height:.79;letter-spacing:-.078em;max-width:9.5ch;margin-bottom:34px;text-wrap:balance}
.hero h1 strong{display:inline;color:var(--clay);font-family:var(--serif);font-weight:400;font-style:italic;letter-spacing:-.055em}
.hero .lead{font-size:clamp(1.15rem,1.55vw,1.48rem);max-width:45rem}
.hero-note{max-width:570px}
.hero-card{min-height:520px;border-radius:0;background:var(--forest);box-shadow:none;transform:rotate(1.4deg);border:1px solid var(--forest)}
.hero-card::after{content:"01";position:absolute;top:24px;right:28px;font-size:clamp(3rem,7vw,6rem);font-family:var(--serif);font-style:italic;color:var(--clay);line-height:1}
.hero-card::before{-webkit-text-stroke:1px rgba(250,248,242,.33);font-size:clamp(13rem,31vw,27rem)}
.hero-card h2{font-size:clamp(2.6rem,5vw,5.3rem);letter-spacing:-.06em;margin-top:112px}
.hero-card-top{padding-right:90px}
.hero-tags .pill{background:var(--cream);color:var(--forest);border-color:var(--cream)}

/* Proof rail — agency confidence + regional clarity */
.proof{background:var(--forest);color:var(--cream);border:0}
.proof-item{border-color:rgba(250,248,242,.18)}
.proof-item b{font-size:clamp(1.35rem,2vw,1.8rem);letter-spacing:-.035em}
.proof-item span{color:rgba(250,248,242,.72)}

/* Make the first content block feel like an editorial statement */
.hero + .proof + .section{background:var(--cream)}
.hero + .proof + .section .grid-4{counter-reset:feature}
.hero + .proof + .section .card{border:0;border-top:2px solid var(--forest);border-radius:0;padding:28px 0 12px;background:transparent}
.hero + .proof + .section .card .num{font-family:var(--serif);font-style:italic;font-size:2.2rem;font-weight:400;margin-bottom:52px}
.hero + .proof + .section .card h3{font-size:clamp(1.7rem,2.7vw,2.7rem);max-width:9ch}

/* Services — less SaaS grid, more designed poster wall */
#leistungen{overflow:hidden}
#leistungen::after{content:"MAKE IT USEFUL";position:absolute;right:-.18em;bottom:-.22em;font-size:clamp(6rem,18vw,18rem);font-weight:900;letter-spacing:-.08em;line-height:.75;color:transparent;-webkit-text-stroke:1px rgba(24,55,45,.12);pointer-events:none}
#leistungen .grid-3{position:relative;z-index:1}
.service-card{border-radius:0;min-height:380px;padding:30px;border:1px solid var(--forest);transition:transform var(--motion-fast) var(--motion-ease),background-color 360ms var(--motion-ease),color 360ms var(--motion-ease)}
.service-card:hover{transform:translateY(-6px);border-color:var(--forest)}
.service-card:nth-child(1),.service-card:nth-child(5){background:var(--forest);color:var(--cream)}
.service-card:nth-child(1) p,.service-card:nth-child(5) p{color:rgba(250,248,242,.76)}
.service-card:nth-child(1) .feature-list li,.service-card:nth-child(5) .feature-list li{border-color:rgba(250,248,242,.28);color:var(--cream)}
.service-card:nth-child(1) .service-icon,.service-card:nth-child(5) .service-icon{border-color:rgba(250,248,242,.45);color:var(--clay)}
.service-card:nth-child(3){background:var(--clay);color:var(--cream);border-color:var(--clay)}
.service-card:nth-child(3) p{color:rgba(250,248,242,.86)}
.service-card:nth-child(3) .feature-list li{border-color:rgba(250,248,242,.45);color:var(--cream)}
.service-card:nth-child(3) .service-icon{border-color:var(--cream);color:var(--cream)}
.service-card h3{font-size:clamp(1.8rem,3vw,3rem);letter-spacing:-.055em;max-width:8ch}
.service-card .service-icon{border-radius:0;font-family:var(--sans);font-weight:900;font-size:1rem}

/* Name bridge stays the signature motion device, made more graphic */
.name-bridge{height:210svh}
.name-outline{font-size:clamp(6.5rem,20vw,18rem);-webkit-text-stroke:1.5px rgba(250,248,242,.68)}
.bridge-panel{border-radius:0;box-shadow:18px 18px 0 rgba(0,0,0,.16)}
.bridge-panel h2{letter-spacing:-.065em;max-width:8ch}
.bridge-progress{height:9px;background:var(--cream)}

/* Work — Zwetschke-like emphasis on cases, fully Magnus-specific */
#referenzen{background:var(--cream);overflow:hidden}
#referenzen .portfolio-list{gap:0;border-top:1px solid var(--forest)}
#referenzen .project{min-height:610px;border:0;border-radius:0;border-bottom:1px solid var(--forest);background:transparent;transition:background-color 360ms var(--motion-ease),color 360ms var(--motion-ease)}
#referenzen .project-visual{min-height:460px;border-radius:0;background:var(--paper);border-right:1px solid var(--forest)}
#referenzen .project:nth-child(2n) .project-visual{background:var(--forest);color:var(--cream)}
#referenzen .project:nth-child(2n) .project-mark{color:var(--cream)}
#referenzen .project:nth-child(2n) .project-lines,#referenzen .project:nth-child(2n) .project-lines::before,#referenzen .project:nth-child(2n) .project-lines::after{border-color:var(--cream)}
#referenzen .project:nth-child(3) .project-visual{background:var(--clay)}
#referenzen .project:nth-child(3) .project-mark,#referenzen .project:nth-child(3) .project-type{color:var(--cream)}
#referenzen .project:nth-child(3) .project-mark em{color:var(--forest)}
#referenzen .project:nth-child(3) .project-lines,#referenzen .project:nth-child(3) .project-lines::before,#referenzen .project:nth-child(3) .project-lines::after{border-color:var(--cream)}
#referenzen .project-mark{font-size:clamp(5rem,12vw,10.5rem)}
#referenzen .project-body{display:flex;flex-direction:column;justify-content:center}
#referenzen .project-body h3{font-size:clamp(2.5rem,5vw,5rem);letter-spacing:-.065em;max-width:8ch}
#referenzen .project-body>p:not(.kicker){max-width:38rem;font-size:1.06rem}
#referenzen .project-meta span{border-radius:0}

/* Process — bolder numbered rhythm */
#prozess .process-grid{border-top:2px solid var(--forest)}
#prozess .step{grid-template-columns:clamp(62px,8vw,120px) 1fr;padding:38px 0}
#prozess .step::before{font-family:var(--serif);font-style:italic;font-size:clamp(2.3rem,5vw,5rem);font-weight:400;line-height:.75;color:var(--clay)}
#prozess .step h3{font-size:clamp(2rem,4vw,4rem);letter-spacing:-.055em}
#prozess .step p{max-width:42rem}

/* Packages / offer cards */
.package{border-radius:0;border:1px solid var(--forest);min-height:430px;position:relative;overflow:hidden}
.package::after{content:"↗";position:absolute;right:22px;bottom:16px;font-size:3.2rem;font-family:var(--serif);color:var(--clay);opacity:.42}
.package h3{font-size:clamp(2rem,3.8vw,3.6rem);letter-spacing:-.055em;max-width:8ch}
.package:hover{background:var(--paper);border-color:var(--forest)}

/* Forest statement — big copy, no tech gradients */
.section--forest .section-head h2{font-size:clamp(3.4rem,9vw,8.4rem);max-width:8ch}
.section--forest .grid-3 .card{border-radius:0;border-color:rgba(250,248,242,.28);min-height:250px}
.section--forest .grid-3 .card h3{font-size:clamp(1.8rem,3vw,3rem)}

/* Principles + about — more magazine / regional craft feel */
.about-grid{align-items:center}
.portrait-stack figure{border-radius:0;border-width:6px;box-shadow:none}
.portrait-now{transform:rotate(-1deg)}
.portrait-youth{transform:rotate(4deg)}
.portrait-child{transform:rotate(-6deg)}
.about-copy h2{font-size:clamp(3.2rem,7vw,6.6rem);letter-spacing:-.065em}
.bobo-note{border-radius:0;border:0;border-left:8px solid var(--clay);background:var(--forest);color:var(--cream);padding:28px}
.bobo-note strong{font-size:clamp(1.7rem,3.5vw,3rem);letter-spacing:-.04em}

/* FAQs + contact remain calm and usable */
.faq summary{font-size:clamp(1.05rem,1.6vw,1.3rem);padding:28px 0}
.contact-grid .section-head h2{max-width:9ch}
.form-shell{border-radius:0;border:1px solid var(--forest);background:var(--cream)}

/* Subpages — same visual language */
.page-hero{padding:clamp(72px,9vw,130px) 0 clamp(64px,8vw,110px);background:var(--paper);border-bottom:2px solid var(--forest);overflow:hidden;position:relative}
.page-hero::after{content:"MN";position:absolute;right:-.08em;bottom:-.28em;font-size:clamp(12rem,31vw,30rem);font-weight:900;line-height:.8;letter-spacing:-.1em;color:transparent;-webkit-text-stroke:1px rgba(24,55,45,.13);pointer-events:none}
.page-hero h1{font-size:clamp(4.2rem,10vw,9.8rem);letter-spacing:-.075em;line-height:.82;max-width:9ch;position:relative;z-index:1}
.page-hero .lead,.page-hero .breadcrumb{position:relative;z-index:1}

/* Systems become an editorial index */
.system-row{padding:42px 0;border-top:1px solid var(--forest)}
.system-row:last-child{border-bottom:1px solid var(--forest)}
.system-index{font-family:var(--serif);font-style:italic;font-size:clamp(2rem,4vw,4rem);font-weight:400;line-height:.85}
.system-row h2,.system-row h3{font-size:clamp(2rem,4.5vw,4.4rem);letter-spacing:-.06em}

/* Showroom — one intentionally expressive playground */
.style-controls{gap:0;border:1px solid var(--forest);width:max-content;max-width:100%}
.style-controls button{border:0;border-right:1px solid var(--forest);border-radius:0;padding:12px 16px;text-transform:uppercase;letter-spacing:.08em;font-size:.7rem}
.style-controls button:last-child{border-right:0}
.style-preview{border-radius:0;border:2px solid var(--forest);min-height:560px;box-shadow:14px 14px 0 var(--forest)}
.style-preview h3{letter-spacing:-.075em}
.motion-cabinet{background:var(--forest)}
.monitor{border-radius:4px;border-width:14px;box-shadow:20px 20px 0 rgba(0,0,0,.22)}
.motion-card{border-radius:0}
.motion-caption h2{letter-spacing:-.07em}

/* Inquiry tool — less form-like, more project configurator */
.inquiry-layout{gap:44px}
.form-shell .inquiry-steps{gap:5px}
.inquiry-dot{height:8px;background:var(--paper)}
.inquiry-dot.active{background:var(--clay)}
.inquiry-step>h2,.inquiry-step>h3{font-size:clamp(2rem,4.5vw,4.4rem);letter-spacing:-.06em;max-width:9ch}
.choice-grid{gap:8px}
.choice label{border-radius:0;border:1px solid var(--forest);padding:22px;min-height:112px}
.choice input:checked+label{background:var(--forest);color:var(--cream);box-shadow:none}
.choice input:checked+label span{color:rgba(250,248,242,.72)}
.brief-card{border-radius:0;background:var(--forest);border:1px solid var(--forest);box-shadow:12px 12px 0 var(--clay)}
.brief-card h3{font-size:clamp(2rem,3vw,3.2rem);letter-spacing:-.05em}

/* Footer — stronger end frame */
.site-footer{padding-top:80px}
.footer-brand p{font-size:1.02rem}
.footer-links h3{color:var(--clay)}

@media(min-width:700px){
  .section-head{grid-template-columns:minmax(0,1.2fr) minmax(280px,.7fr);gap:50px}
  #leistungen .grid-3{grid-template-columns:repeat(6,minmax(0,1fr))}
  #leistungen .service-card{grid-column:span 2}
  #leistungen .service-card:nth-child(1),#leistungen .service-card:nth-child(4){grid-column:span 3}
  #leistungen .service-card:nth-child(2),#leistungen .service-card:nth-child(3),#leistungen .service-card:nth-child(5),#leistungen .service-card:nth-child(6){grid-column:span 3}
  .style-preview{min-height:620px}
}

@media(min-width:960px){
  .hero-grid{grid-template-columns:minmax(0,1.28fr) minmax(350px,.72fr);gap:clamp(40px,5vw,80px)}
  #referenzen .project{grid-template-columns:minmax(0,1.35fr) minmax(340px,.65fr)}
  #referenzen .project:nth-child(even){grid-template-columns:minmax(340px,.65fr) minmax(0,1.35fr)}
  #referenzen .project:nth-child(even) .project-visual{order:2;border-right:0;border-left:1px solid var(--forest)}
  #referenzen .project-body{padding:clamp(46px,5vw,74px)}
}

@media(max-width:959px){
  .hero-card{transform:none;min-height:440px}
  .hero::before{display:none}
  .site-header .nav{height:76px}
  .mobile-menu{top:76px}
  .name-bridge-sticky,.motion-sticky{top:76px;height:calc(100svh - 76px)}
}

@media(max-width:699px){
  .hero h1{font-size:clamp(4rem,19vw,6.2rem);line-height:.82}
  .hero-card{min-height:410px;padding:26px}
  .hero-card h2{margin-top:84px;font-size:clamp(2.5rem,12vw,4.1rem)}
  .section-head h2{font-size:clamp(3.2rem,15vw,5rem)}
  #leistungen .grid-3{gap:10px}
  .service-card{min-height:330px}
  #referenzen .project{min-height:0}
  #referenzen .project-visual{min-height:360px;border-right:0;border-bottom:1px solid var(--forest)}
  #referenzen .project-body h3{font-size:clamp(2.6rem,12vw,4rem)}
  .page-hero h1{font-size:clamp(4rem,18vw,6rem)}
  .style-controls{width:100%;overflow-x:auto;flex-wrap:nowrap}
  .style-controls button{white-space:nowrap;flex:0 0 auto}
  .style-preview{min-height:480px;box-shadow:7px 7px 0 var(--forest)}
  .brief-card{box-shadow:7px 7px 0 var(--clay)}
}

@media(prefers-reduced-motion:reduce){
  .hero-card,.portrait-now,.portrait-youth,.portrait-child{transform:none!important}
  .service-card:hover{transform:none}
}

/* =========================================================
   MN MEDIA TIGER BRAND + INTERACTION LIBRARY
   ========================================================= */
.brand{width:auto;min-width:154px;gap:10px;text-decoration:none}
.brand:hover,.brand:focus-visible{color:var(--forest)}
.brand-symbol{width:44px;height:48px;object-fit:contain;flex:0 0 auto}
.brand-copy{display:flex;flex-direction:column;line-height:1;text-transform:uppercase}
.brand-copy strong{font-size:.96rem;letter-spacing:.19em;font-weight:900;white-space:nowrap}
.brand-copy small{margin-top:5px;font-size:.48rem;letter-spacing:.28em;font-weight:800;color:var(--clay);white-space:nowrap}
.footer-logo{width:min(190px,54vw);height:auto;margin-bottom:18px}
.hero-card::before{content:"MN MEDIA";font-size:clamp(5.5rem,14vw,11rem);right:-.15em;bottom:-.04em;letter-spacing:-.08em}
.showroom-hero{min-height:70svh;display:grid;align-items:center}

/* Live demos */
.demo-block{display:grid;gap:28px;padding:clamp(44px,7vw,88px) 0;border-top:1px solid var(--forest);align-items:center}
.demo-block:last-child{border-bottom:1px solid var(--forest)}
.demo-copy .num{margin:0 0 16px;font-size:.74rem;font-weight:850;letter-spacing:.14em;text-transform:uppercase;color:var(--clay)}
.demo-copy h3{font-size:clamp(2.2rem,5vw,4.7rem);letter-spacing:-.06em;max-width:10ch}
.demo-copy>p:not(.num){max-width:36rem;color:rgba(24,55,45,.74)}
.demo-dark{background:var(--forest);color:var(--cream);margin-inline:calc((100vw - 100%)/-2);padding-inline:max(20px,calc((100vw - min(1180px,calc(100% + 40px)))/2));border-color:rgba(250,248,242,.3)}
.demo-dark .demo-copy>p:not(.num){color:rgba(250,248,242,.78)}
.demo-dark .demo-copy .num{color:var(--cream)}
.code-snip{margin:26px 0 0;padding:18px 20px;max-width:39rem;overflow:auto;border:1px solid currentColor;background:transparent;color:inherit;font:600 .76rem/1.65 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap}
.demo-stage{position:relative;min-height:440px;border:1px solid var(--forest);background:var(--cream);overflow:hidden}
.stage-label{position:absolute;right:16px;bottom:14px;padding:6px 9px;background:var(--forest);color:var(--cream);font-size:.64rem;font-weight:850;letter-spacing:.13em;text-transform:uppercase}

/* 01 Organic reveal */
.organic-stage{display:grid;place-items:center;min-height:520px;background:var(--cream)}
.organic-shape{position:relative;width:min(78%,560px);aspect-ratio:4/5;overflow:hidden;clip-path:polygon(12% 7%,86% 0,96% 26%,84% 46%,96% 78%,73% 100%,30% 94%,7% 73%,15% 48%,2% 26%);transition:clip-path 820ms var(--motion-soft),transform 720ms var(--motion-soft);cursor:crosshair}
.organic-shape:hover,.organic-shape:focus-visible{clip-path:polygon(0 0,100% 0,100% 30%,92% 53%,100% 100%,65% 94%,39% 100%,0 84%,8% 55%,0 28%);transform:scale(1.025);outline:none}
.organic-shape img{width:100%;height:100%;object-fit:cover}
.hotspot{position:absolute;padding:7px 10px;background:var(--cream);border:1px solid var(--forest);font-size:.65rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;box-shadow:4px 4px 0 var(--clay)}
.hs1{left:12%;top:23%}.hs2{right:8%;top:50%}.hs3{left:31%;bottom:12%}

/* 02 Stacked gallery */
.stack-stage{min-height:540px;padding:44px 20px 74px;display:grid;place-items:center}
.stack-track{position:relative;width:min(760px,92%);height:390px;perspective:1100px}
.stack-card{position:absolute;left:50%;top:50%;width:min(440px,72vw);aspect-ratio:16/10;padding:0;border:0;background:var(--paper);overflow:hidden;cursor:pointer;transform-origin:center;transition:transform 700ms var(--motion-soft),opacity 520ms var(--motion-ease),filter 520ms var(--motion-ease);box-shadow:0 18px 42px rgba(24,55,45,.16)}
.stack-card img{width:100%;height:100%;object-fit:cover}
.stack-card span{position:absolute;left:12px;bottom:12px;background:var(--cream);border:1px solid var(--forest);padding:6px 9px;font-size:.68rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase}
.stack-card:focus-visible{outline:4px solid var(--ochre);outline-offset:4px}
.demo-arrows{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:flex;align-items:center;gap:14px}
.demo-arrows button{width:42px;height:42px;border:1px solid var(--forest);background:var(--cream);color:var(--forest);cursor:pointer;font-weight:900}
.demo-arrows button:hover,.demo-arrows button:focus-visible{background:var(--forest);color:var(--cream)}
.demo-arrows span{min-width:66px;text-align:center;font-size:.72rem;font-weight:850;letter-spacing:.08em}

/* 03 Background scene story */
.scene-story{position:relative;min-height:620px;overflow:hidden;border:1px solid rgba(250,248,242,.35);isolation:isolate}
.scene-bg{position:absolute;inset:0;z-index:-2}
.scene-bg::after{content:"";position:absolute;inset:0;background:rgba(24,55,45,.52)}
.scene-bg img{width:100%;height:100%;object-fit:cover;transition:opacity 420ms var(--motion-ease),transform 780ms var(--motion-soft)}
.scene-story:hover .scene-bg img{transform:scale(1.03)}
.scene-menu{display:flex;flex-direction:column;align-items:stretch;width:min(620px,90%);padding:clamp(40px,8vw,90px)}
.scene-menu button{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 0;border:0;border-bottom:1px solid rgba(250,248,242,.4);background:transparent;color:var(--cream);text-align:left;font-size:clamp(2rem,5vw,4.8rem);font-weight:800;letter-spacing:-.055em;cursor:pointer;opacity:.62;transition:opacity .2s ease,transform var(--motion-fast) var(--motion-ease)}
.scene-menu button:hover,.scene-menu button:focus-visible,.scene-menu button.is-active{opacity:1;transform:translateX(10px)}
.scene-menu button span{font-size:.7rem;letter-spacing:.15em}
.scene-caption{position:absolute;right:24px;bottom:20px;margin:0;color:var(--cream);font:italic 1.05rem var(--serif)}

/* 04 focus deck */
.deck-stage{min-height:560px;padding:54px 0 84px}
.deck-track{height:410px;position:relative;overflow:hidden;perspective:1200px}
.deck-card{position:absolute;left:50%;top:50%;width:min(330px,70vw);height:390px;overflow:hidden;background:var(--forest);color:var(--cream);border:1px solid var(--forest);transform-origin:center;transition:transform 680ms var(--motion-soft),filter 480ms var(--motion-ease),opacity 480ms var(--motion-ease);filter:grayscale(1);opacity:.42}
.deck-card.is-active{filter:none;opacity:1;z-index:5}
.deck-card img{width:100%;height:100%;object-fit:cover}
.deck-card>div{position:absolute;inset:auto 0 0;padding:22px;background:rgba(24,55,45,.88)}
.deck-card small{display:block;margin-bottom:5px;text-transform:uppercase;letter-spacing:.13em}
.deck-card b{font-size:1.5rem}
.deck-stage:focus-visible{outline:4px solid var(--ochre);outline-offset:5px}

/* 05 capsules */
.capsule-gallery{display:flex;gap:8px;min-height:470px;padding:16px;border:1px solid var(--forest);background:var(--cream);overflow:hidden}
.capsule{position:relative;min-width:58px;flex:1 1 0;border:0;padding:0;overflow:hidden;background:var(--paper);cursor:pointer;transition:flex 720ms var(--motion-soft)}
.capsule:hover,.capsule:focus-visible,.capsule.is-active{flex:7 1 0;outline:none}
.capsule:focus-visible{box-shadow:inset 0 0 0 4px var(--ochre)}
.capsule img{width:100%;height:100%;object-fit:cover}
.capsule::after{content:"";position:absolute;inset:0;background:rgba(24,55,45,.18)}
.capsule span{position:absolute;z-index:1;left:14px;bottom:16px;display:flex;flex-direction:column;color:var(--cream);text-align:left;white-space:nowrap;transform:rotate(-90deg) translateY(100%);transform-origin:left bottom;transition:transform 480ms var(--motion-soft)}
.capsule.is-active span,.capsule:hover span,.capsule:focus-visible span{transform:none}
.capsule b{font-size:1.2rem}.capsule small{font-size:.65rem;letter-spacing:.13em;text-transform:uppercase}

/* 06 panorama */
.panorama{display:flex;gap:4px;height:520px;border:1px solid rgba(250,248,242,.35);padding:4px}
.pano-item{position:relative;flex:1 1 0;min-width:42px;border:0;padding:0;overflow:hidden;background:var(--paper);cursor:pointer;transition:flex 700ms var(--motion-soft)}
.pano-item:hover,.pano-item:focus-visible,.pano-item.is-active{flex:6 1 0;outline:none}
.pano-item:focus-visible{box-shadow:inset 0 0 0 4px var(--ochre)}
.pano-item img{width:100%;height:100%;object-fit:cover;filter:saturate(.85);transition:transform 720ms var(--motion-soft),filter 420ms var(--motion-ease)}
.pano-item:hover img,.pano-item:focus-visible img,.pano-item.is-active img{transform:scale(1.035);filter:none}
.pano-item span{position:absolute;left:12px;bottom:12px;padding:5px 8px;background:var(--cream);color:var(--forest);font-size:.65rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}

/* 07 cursor trail */
.cursor-lab{position:relative;min-height:520px;border:1px solid var(--forest);overflow:hidden;background:var(--paper);cursor:none}
.cursor-copy{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;justify-items:center;text-align:center}
.cursor-copy img{width:130px;height:130px;object-fit:contain;margin-bottom:16px}
.cursor-copy strong{font-size:clamp(2.6rem,6vw,5.5rem);line-height:.86;letter-spacing:-.06em;text-transform:uppercase}
.cursor-copy span{margin-top:12px;font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;color:rgba(24,55,45,.7)}
.cursor-target{position:absolute;padding:9px 12px;border:1px solid var(--forest);background:var(--cream);font-size:.68rem;font-weight:850;letter-spacing:.1em;text-transform:uppercase}
.ct1{left:8%;top:14%}.ct2{right:10%;top:18%}.ct3{right:12%;bottom:14%}
.cursor-ring,.cursor-dot{position:absolute;left:0;top:0;pointer-events:none;z-index:8;transform:translate(-50%,-50%);will-change:transform}
.cursor-ring{width:48px;height:48px;border:3px solid var(--clay);border-radius:50%;mix-blend-mode:multiply}
.cursor-dot{width:9px;height:9px;border-radius:50%;background:var(--forest)}
.cursor-dot.d2{width:7px;height:7px;opacity:.8}.cursor-dot.d3{width:5px;height:5px;opacity:.6}.cursor-dot.d4{width:3px;height:3px;opacity:.45}

/* 08 site reel */
.site-reel{border:1px solid rgba(250,248,242,.35);background:var(--cream);color:var(--forest)}
.reel-toolbar{height:54px;display:flex;align-items:center;gap:7px;padding:0 14px;border-bottom:1px solid var(--forest)}
.reel-toolbar>span{width:9px;height:9px;border-radius:50%;background:var(--forest);opacity:.3}
.reel-toolbar nav{margin-left:auto;display:flex;gap:5px}
.reel-toolbar button{border:1px solid var(--forest);background:transparent;color:var(--forest);padding:5px 9px;cursor:pointer;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.reel-toolbar button:hover,.reel-toolbar button:focus-visible,.reel-toolbar button[aria-pressed="true"]{background:var(--forest);color:var(--cream)}
.reel-screen{position:relative;min-height:520px;overflow:hidden}
.reel-screen article{position:absolute;inset:0;opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity .35s ease,transform 480ms var(--motion-soft),visibility .35s ease}
.reel-screen article.is-active{opacity:1;visibility:visible;transform:none}
.reel-screen article img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.reel-screen article::after{content:"";position:absolute;inset:0;background:rgba(24,55,45,.33)}
.reel-screen article div{position:absolute;z-index:2;left:clamp(24px,5vw,60px);bottom:clamp(24px,5vw,60px);color:var(--cream)}
.reel-screen small{display:block;text-transform:uppercase;letter-spacing:.14em;margin-bottom:8px}
.reel-screen h4{margin:0;font-size:clamp(2.5rem,6vw,6rem);line-height:.87;letter-spacing:-.06em;max-width:8ch}

@media(min-width:860px){
  .demo-block{grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr);gap:clamp(44px,6vw,86px)}
  .demo-dark{grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr)}
  .brand-symbol{width:50px;height:52px}
  .brand-copy strong{font-size:1rem}
}
@media(max-width:859px){
  .demo-dark{margin-inline:-20px;padding-inline:20px}
  .stack-track{height:340px}
  .stack-card{width:min(390px,74vw)}
  .deck-track{height:370px}.deck-card{height:350px}
  .scene-story{min-height:540px}
  .scene-menu{padding:36px 24px}
}
@media(max-width:620px){
  .brand-copy strong{font-size:.82rem;letter-spacing:.14em}.brand-copy small{font-size:.4rem}
  .brand-symbol{width:38px;height:42px}.brand{min-width:130px;gap:7px}
  .organic-stage{min-height:430px}.organic-shape{width:82%}
  .stack-stage{min-height:450px;padding-inline:0}.stack-track{height:300px}.stack-card{width:74vw}
  .capsule-gallery{height:430px;min-height:430px;padding:7px;gap:4px}.capsule{min-width:34px}
  .panorama{height:430px}.pano-item{min-width:28px}
  .cursor-lab{min-height:420px;cursor:auto}.cursor-ring,.cursor-dot{display:none}
  .cursor-copy img{width:100px;height:100px}
  .reel-screen{min-height:430px}
}
@media(prefers-reduced-motion:reduce){
  .organic-shape,.stack-card,.deck-card,.capsule,.pano-item,.scene-bg img,.reel-screen article{transition:none!important}
  .cursor-ring,.cursor-dot{display:none!important}
  .cursor-lab{cursor:auto}
}
/* Specificity fixes for supplied tiger SVG */
.brand img.brand-symbol{width:44px;height:48px;object-fit:contain;flex:0 0 auto}
.footer-brand img.footer-logo{width:min(190px,54vw);height:auto;filter:brightness(0) invert(1)}
@media(min-width:860px){.brand img.brand-symbol{width:50px;height:52px}}
@media(max-width:620px){.brand img.brand-symbol{width:38px;height:42px}}

.logo-flight{position:fixed;left:0;top:0;width:10px;height:10px;pointer-events:none;z-index:140;opacity:0;will-change:left,top,width,height,opacity,transform;transform:translate3d(0,var(--flight-lift,0px),0);backface-visibility:hidden}
.logo-flight canvas,.logo-flight img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
.logo-flight-canvas{opacity:0;transform-origin:50% 78%;transform:rotate(var(--flight-rot,0deg)) scaleX(var(--flight-sx,1)) scaleY(var(--flight-sy,1));filter:drop-shadow(0 14px 26px rgba(24,55,45,.12));will-change:transform,filter,opacity}
.logo-flight-mark{opacity:0;transform-origin:50% 70%;transform:rotate(var(--flight-rot,0deg)) scaleX(var(--flight-sx,1)) scaleY(var(--flight-sy,1));filter:drop-shadow(0 14px 26px rgba(24,55,45,.12));will-change:transform,filter,opacity}
.logo-flight.is-video .logo-flight-canvas{opacity:1}
.logo-flight.is-video .logo-flight-mark{opacity:0}
.logo-flight.is-mark .logo-flight-canvas{opacity:0}
.logo-flight.is-mark .logo-flight-mark{opacity:1}
.brand-symbol[data-header-logo]{opacity:1;transform:none;transform-origin:center center;transition:opacity 420ms var(--motion-ease),transform 520ms var(--motion-soft)}
.hero-organic-brand{position:absolute;left:50%;bottom:-10px;transform:translateX(-50%);display:grid;gap:4px;justify-items:center;text-align:center;opacity:0;animation:mnFadeUp .7s 1.32s cubic-bezier(.2,.75,.2,1) forwards;white-space:nowrap}
.hero-organic-brand strong{font-size:clamp(1.1rem,1.5vw,1.36rem);letter-spacing:.34em;font-weight:900;color:var(--forest)}
.hero-organic-brand small{font-size:.76rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-weight:760}

/* =========================================================
   STEP 1 · CINEMATIC HOME INTRO
   inspired by the supplied interaction reference, built from scratch
   ========================================================= */
.hero-cinematic{
  --cin-p:0;
  position:relative;
  min-height:162svh;
  padding:0;
  border:0;
  background:var(--cream);
  overflow:visible;
}
.hero-cinematic-track{height:162svh;position:relative}
.hero-cinematic-stage{
  position:sticky;
  top:76px;
  height:calc(100svh - 76px);
  min-height:620px;
  overflow:hidden;
  background:var(--cream);
}
.hero-artboard{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:var(--cream);
  transform-origin:50% 50%;
  animation:mnArtboardEnter 2.2s var(--motion-soft) both;
}
.hero-cinematic-grid{
  position:relative;
  z-index:2;
  height:100%;
  display:grid;
  grid-template-columns:minmax(0,1.03fr) minmax(390px,.97fr);
  align-items:center;
  gap:clamp(34px,5.6vw,90px);
  padding-top:clamp(36px,5vh,64px);
  padding-bottom:clamp(54px,7vh,82px);
}
.hero-intro-copy{position:relative;z-index:4;align-self:center;padding-top:1vh}
.hero-intro-kicker{
  margin:0 0 clamp(22px,3vh,34px);
  overflow:hidden;
  color:var(--clay);
  font-size:.74rem;
  line-height:1;
  font-weight:850;
  letter-spacing:.18em;
}
.hero-intro-kicker span{display:block;transform:translateY(120%);animation:mnTextLift .92s .58s var(--motion-soft) forwards}
.hero-intro-title{margin:0;max-width:9.6ch;font-size:clamp(4.25rem,8.75vw,9.1rem);line-height:.82;letter-spacing:-.075em;text-wrap:balance}
.hero-line{display:block;overflow:hidden;padding:.08em 0 .09em;margin:-.08em 0}
.hero-line>span{display:block;transform:translateY(116%);animation:mnTextLift 1.02s .78s var(--motion-soft) forwards}
.hero-line--accent{color:var(--clay);font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.055em}
.hero-line--accent>span{animation-delay:.94s}
.hero-intro-bottom{max-width:46rem;opacity:0;transform:translateY(26px);animation:mnFadeUp .94s 1.2s var(--motion-soft) forwards}
.hero-intro-lead{font-size:clamp(1.08rem,1.45vw,1.38rem);line-height:1.58;color:var(--muted);max-width:44rem;margin:clamp(24px,3.8vh,42px) 0 0}
.hero-intro-actions{margin-top:28px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.hero-text-link{display:inline-flex;align-items:center;gap:12px;padding:12px 2px;border-bottom:1px solid currentColor;font-weight:800;color:var(--forest);text-decoration:none}
.hero-text-link:hover,.hero-text-link:focus-visible{color:var(--clay)}
.hero-text-link:focus-visible{outline:3px solid var(--ochre);outline-offset:6px}
.hero-organic-wrap{
  position:relative;
  width:min(100%,620px);
  height:min(70vh,670px);
  min-height:470px;
  justify-self:end;
  align-self:center;
  transform:translate3d(calc((1 - var(--cin-p))*32px),calc(var(--cin-p)*-4vh),0) scale(calc(.93 + var(--cin-p)*.04));
  transform-origin:60% 50%;
  perspective:1200px;
  will-change:transform;
}
.hero-logo-track{
  --cursor-x:0px;
  --cursor-y:0px;
  --cursor-rx:0deg;
  --cursor-ry:0deg;
  position:absolute;
  inset:0;
  z-index:2;
  transform:translate3d(var(--cursor-x),var(--cursor-y),0) rotateX(var(--cursor-rx)) rotateY(var(--cursor-ry));
  transform-style:preserve-3d;
  transform-origin:50% 50%;
  will-change:transform;
}
.hero-logo-track::after{
  content:"";
  position:absolute;
  inset:17% 15% 11%;
  border-radius:50%;
  background:rgba(164,73,49,.055);
  filter:blur(30px);
  opacity:var(--cursor-glow,0);
  transform:translate3d(0,0,-1px);
  pointer-events:none;
}
.hero-tiger-stage{position:absolute;left:50%;top:50%;width:min(100%,620px);aspect-ratio:1;height:auto;transform:translate(-50%,-50%);display:grid;place-items:center;outline:none;z-index:2}
.hero-tiger-stage:focus-visible{outline:2px solid var(--forest);outline-offset:14px}
.hero-sequence-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;opacity:0;z-index:4;filter:drop-shadow(0 24px 32px rgba(24,55,45,.11));will-change:opacity,transform;transition:opacity 560ms var(--motion-ease),transform 680ms var(--motion-soft)}
.hero-sequence-canvas.is-active{opacity:1}
.hero-sequence-canvas.is-leaving{opacity:0;transform:scale(.985)}
.hero-tiger-canvas{display:block;width:100%;height:100%;opacity:0;transform:translate3d(10%,0,0) scale(.72);animation:mnOrganicReveal 1.7s .18s var(--motion-soft) forwards;filter:drop-shadow(0 26px 34px rgba(24,55,45,.12));will-change:transform,opacity;z-index:3}.hero-tiger-canvas.is-ready{opacity:1}
.hero-organic-wrap.is-sequence-intro .hero-tiger-canvas,.hero-organic-wrap.is-sequence-intro .hero-organic-object--fallback{opacity:0!important}
.hero-organic-wrap.is-sequence-intro .hero-organic-brand,.hero-organic-wrap.is-sequence-intro .hero-orbit-note{opacity:0!important;animation-play-state:paused!important}
.hero-organic-wrap.is-sequence-complete .hero-organic-brand,.hero-organic-wrap.is-sequence-complete .hero-orbit-note{transition:opacity 620ms var(--motion-ease),transform 680ms var(--motion-soft)}
.hero-organic-object--fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:1;pointer-events:none;z-index:1}
.hero-organic-shadow{
  position:absolute;left:20%;right:9%;bottom:10%;height:8%;border-radius:50%;
  background:rgba(24,55,45,.12);filter:blur(18px);opacity:0;
  animation:mnShadowIn 1.1s 1.08s var(--motion-ease) forwards;
}
.hero-orbit-note{
  position:absolute;z-index:5;display:flex;align-items:center;gap:9px;
  padding:8px 13px;border:1px solid rgba(24,55,45,.45);background:var(--cream);
  border-radius:999px;font-size:.72rem;font-weight:760;letter-spacing:.04em;
  opacity:0;transform:translateY(12px);
  animation:mnMarkerIn .76s 1.36s var(--motion-soft) forwards;
}
.hero-orbit-note span{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:var(--forest);color:var(--cream);font-size:.62rem}
.hero-reticle{position:fixed;top:0;left:0;width:11px;height:11px;border:1px solid var(--forest);border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);opacity:0;transition:opacity 300ms var(--motion-ease);z-index:141}
.hero-reticle.is-on{opacity:1}
.hero-organic-wrap.is-cursor-live{cursor:none}
.hero-organic-wrap.is-cursor-live .hero-logo-track{transition:filter 420ms var(--motion-ease)}
.hero-organic-wrap.is-docking .hero-logo-track{transition:transform 420ms var(--motion-soft)}
.hero-organic-wrap.is-docking .hero-tiger-stage,.hero-organic-wrap.is-docking .hero-organic-brand,.hero-organic-wrap.is-docking .hero-organic-shadow,.hero-organic-wrap.is-docking .hero-orbit-note{animation:none!important}
.hero-tiger-stage,.hero-organic-brand,.hero-organic-shadow,.hero-orbit-note{transition:opacity 480ms var(--motion-ease),transform 560ms var(--motion-soft)}
.hero-orbit-note--one{top:18%;left:1%}
.hero-orbit-note--two{top:48%;right:-2%;animation-delay:1.48s}
.hero-orbit-note--three{bottom:15%;left:8%;animation-delay:1.61s}
.hero-cinematic-meta{
  position:absolute;z-index:6;left:clamp(20px,4vw,62px);right:clamp(20px,4vw,62px);bottom:18px;
  display:flex;justify-content:space-between;gap:20px;
  font-size:.65rem;text-transform:uppercase;letter-spacing:.17em;font-weight:800;color:rgba(24,55,45,.64);
  opacity:0;animation:mnFadeUp .78s 1.58s var(--motion-soft) forwards;
}
.hero-scroll-cue{position:absolute;z-index:6;right:25px;top:50%;display:flex;align-items:center;gap:9px;writing-mode:vertical-rl;text-transform:uppercase;font-size:.61rem;font-weight:850;letter-spacing:.19em;color:rgba(24,55,45,.58);opacity:calc(1 - var(--cin-p))}
.hero-scroll-cue i{width:1px;height:54px;background:var(--forest);position:relative;overflow:hidden}
.hero-scroll-cue i::after{content:"";position:absolute;inset:0;background:var(--clay);transform:translateY(-100%);animation:mnScrollLine 2.15s 1.9s cubic-bezier(.45,0,.55,1) infinite}
.hero-cinematic::after{
  content:"MN MEDIA";position:absolute;z-index:1;left:-.035em;top:calc(100svh + 8vh);
  font-size:clamp(7rem,20vw,19rem);font-weight:900;line-height:.74;letter-spacing:-.09em;
  color:transparent;-webkit-text-stroke:1px rgba(24,55,45,.13);pointer-events:none;
  transform:translateX(calc(var(--cin-p)*-5vw));
}
@keyframes mnArtboardEnter{
  0%{transform:scale(.87);box-shadow:0 24px 70px rgba(24,55,45,.10)}
  62%{transform:scale(.87);box-shadow:0 24px 70px rgba(24,55,45,.10)}
  100%{transform:scale(1);box-shadow:0 0 0 rgba(24,55,45,0)}
}
@keyframes mnOrganicReveal{
  0%{opacity:0;transform:translate3d(22%,0,0) scale(.66) rotate(5deg);clip-path:polygon(92% 0,100% 0,100% 100%,88% 100%,75% 68%,82% 26%)}
  18%{opacity:1}
  52%{clip-path:polygon(54% 0,100% 0,100% 100%,42% 100%,34% 68%,44% 28%)}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1) rotate(0);clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 62%,0 30%)}
}
@keyframes mnTextLift{to{transform:translateY(0)}}
@keyframes mnFadeUp{to{opacity:1;transform:translateY(0)}}
@keyframes mnMarkerIn{to{opacity:1;transform:translateY(0)}}
@keyframes mnShadowIn{to{opacity:1}}
@keyframes mnScrollLine{0%,20%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

@media (max-width:980px){
  .logo-flight{display:none!important}
  .hero-reticle{display:none!important}
  .brand-symbol[data-header-logo]{opacity:1!important;transform:none!important}
  .hero-logo-track{transform:none!important}
  .hero-cinematic{min-height:auto}
  .hero-cinematic-track{height:auto}
  .hero-cinematic-stage{position:relative;top:0;height:auto;min-height:calc(100svh - 76px)}
  .hero-artboard{position:relative;min-height:calc(100svh - 76px)}
  .hero-cinematic-grid{height:auto;min-height:calc(100svh - 76px);grid-template-columns:1fr;gap:10px;align-content:start;padding-top:46px;padding-bottom:74px}
  .hero-intro-copy{order:1}
  .hero-intro-title{font-size:clamp(3.7rem,15.2vw,6.7rem);max-width:10ch}
  .hero-intro-lead{font-size:1.03rem;max-width:38rem}
  .hero-organic-wrap{order:2;width:min(100%,560px);height:min(55vh,510px);min-height:390px;justify-self:center;margin-top:-24px;transform:none}
  .hero-orbit-note--one{top:18%;left:0}.hero-orbit-note--two{right:0}.hero-orbit-note--three{bottom:12%;left:4%}
  .hero-scroll-cue{display:none}
  .hero-cinematic::after{display:none}
}
@media (max-width:600px){
  .hero-cinematic-stage,.hero-artboard,.hero-cinematic-grid{min-height:calc(100svh - 68px)}
  .hero-cinematic-grid{padding-top:34px;padding-bottom:58px}
  .hero-intro-kicker{font-size:.61rem;letter-spacing:.13em;margin-bottom:18px}
  .hero-intro-title{font-size:clamp(3.18rem,15.8vw,5.3rem);line-height:.85;letter-spacing:-.068em}
  .hero-intro-lead{margin-top:22px;font-size:.98rem;line-height:1.5}
  .hero-intro-actions{margin-top:20px;gap:14px}
  .hero-organic-wrap{height:36vh;min-height:295px;margin-top:-12px}
  .hero-orbit-note{padding:6px 9px;font-size:.61rem}.hero-orbit-note span{width:20px;height:20px}
  .hero-orbit-note--one{top:15%;left:0}.hero-orbit-note--two{top:46%;right:-2%}.hero-orbit-note--three{bottom:8%;left:5%}
  .hero-cinematic-meta{display:none}
}
@media (prefers-reduced-motion:reduce){
  .logo-flight{display:none!important}
  .hero-reticle{display:none!important}
  .brand-symbol[data-header-logo]{opacity:1!important;transform:none!important}
  .hero-logo-track{transform:none!important}
  .hero-artboard,.hero-intro-kicker span,.hero-line>span,.hero-intro-bottom,.hero-tiger-canvas,.hero-organic-object,.hero-organic-shadow,.hero-orbit-note,.hero-cinematic-meta,.hero-organic-brand{animation:none!important;opacity:1!important;transform:none!important;clip-path:none!important}
  .hero-cinematic{min-height:auto}.hero-cinematic-track{height:auto}.hero-cinematic-stage{position:relative;top:0;height:auto}.hero-scroll-cue{display:none}
}

/* Step 1 tuning: keep the complete first message visible on common desktop heights */
@media (min-width:981px){
  .hero-intro-title{font-size:clamp(3.9rem,6.15vw,6.55rem);line-height:.86;max-width:11.2ch}
  .hero-cinematic-grid{grid-template-columns:minmax(0,1.06fr) minmax(390px,.94fr)}
  .hero-organic-wrap{height:min(69vh,660px);min-height:500px}
  .hero-intro-lead{margin-top:clamp(20px,2.8vh,32px)}
}
@media (min-width:981px){
  .hero-intro-title{font-size:clamp(3.75rem,4.75vw,5.15rem);line-height:.91;max-width:12.6ch}
  .hero-cinematic-grid{grid-template-columns:minmax(0,1.08fr) minmax(390px,.92fr)}
}
@media (min-width:981px){
  .hero-cinematic .hero-intro-title{font-size:clamp(3.75rem,4.75vw,5.15rem);line-height:.91;max-width:12.6ch;margin:0;letter-spacing:-.065em}
}

@media (prefers-reduced-motion:reduce){.hero-sequence-canvas{display:none!important}}

/* STEP 6 · motion polish */
.hero-sequence-canvas,.hero-tiger-canvas,.logo-flight,.logo-flight canvas,.motion-card,.monitor,.bridge-panel,.stack-card,.deck-card,.capsule,.pano-item,.reel-screen article{backface-visibility:hidden;transform-style:preserve-3d}
.hero-sequence-canvas,.hero-tiger-canvas,.logo-flight,.bridge-panel,.monitor,.motion-card{will-change:transform,opacity}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* STEP 7 · animated header tiger keeps watching across the page */
.brand{position:relative}
.header-tiger-canvas{position:absolute!important;left:0;top:50%;transform:translateY(-50%);display:block;opacity:0;pointer-events:none;z-index:3;transition:opacity 300ms var(--motion-ease)}
@media(max-width:980px){.header-tiger-canvas{display:none!important}}
@media(prefers-reduced-motion:reduce){.header-tiger-canvas{display:none!important}}

/* STEP 8 · clean global gaze: normal cursor, static header mark, no floating labels */
.hero-reticle,.hero-orbit-note,.header-tiger-canvas{display:none!important}
.hero-organic-wrap.is-cursor-live{cursor:auto!important}
.brand-symbol[data-header-logo]{opacity:1!important;transform:none!important}
.hero-tiger-canvas,.hero-sequence-canvas,.logo-flight{backface-visibility:hidden;transform-style:preserve-3d}


/* =========================================================
   STEP 10 · POSITIONING + EXPANDING SERVICES
   Monochrome opening → first restrained forest accent
   ========================================================= */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.mn-positioning{--pos:0;position:relative;background:#f7f6f1;color:#151615;border-top:1px solid rgba(17,18,16,.12)}
.mn-positioning-track{height:300svh;position:relative}
.mn-positioning-sticky{position:sticky;top:76px;height:calc(100svh - 76px);min-height:650px;overflow:hidden;display:grid;align-items:center;background:#f7f6f1}
.mn-positioning-stage{position:relative;height:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.34fr);grid-template-rows:auto 1fr auto;gap:20px 6vw;padding-top:clamp(34px,6vh,72px);padding-bottom:clamp(30px,5vh,58px)}
.mn-positioning-kicker{grid-column:1/-1;margin:0;font-size:.72rem;font-weight:850;letter-spacing:.18em;text-transform:uppercase;color:#686a67}
.mn-positioning-words{grid-column:1/2;grid-row:2;position:relative;align-self:center;height:min(59vh,610px)}
.mn-positioning-word{position:absolute;left:0;top:50%;width:100%;transform:translate3d(0,calc(-50% + 44px),0) scale(.965);opacity:.075;will-change:transform,opacity;transition:color .55s cubic-bezier(.2,.7,.2,1)}
.mn-positioning-word span{display:block;font-size:clamp(5rem,12.6vw,13rem);font-weight:900;line-height:.78;letter-spacing:-.085em;color:#121312;white-space:nowrap}
.mn-positioning-word--wide span{font-size:clamp(4rem,9.8vw,10.4rem);line-height:.79}
.mn-positioning-word small{display:block;margin-top:22px;font-size:clamp(.72rem,.9vw,.9rem);font-weight:760;letter-spacing:.13em;text-transform:uppercase;color:#737572}
.mn-positioning-word.is-current{color:#121312}
.mn-positioning-word.is-current span{color:currentColor}
.mn-positioning-word:nth-child(3).is-current{color:#18372D}
.mn-positioning-copy{grid-column:2;grid-row:2;align-self:end;margin:0 0 8vh;font-size:clamp(1rem,1.3vw,1.22rem);line-height:1.65;color:#5b5d59;max-width:31ch}
.mn-positioning-index{grid-column:1/-1;display:flex;align-items:center;gap:12px;font-size:.72rem;font-weight:850;letter-spacing:.16em;color:#696b68}
.mn-positioning-index i{display:block;width:74px;height:1px;background:#c4c5c0;position:relative;overflow:hidden}
.mn-positioning-index i::after{content:"";position:absolute;inset:0;background:#181918;transform-origin:left;transform:scaleX(var(--pos));transition:transform .06s linear}

.mn-proofbar{background:#151615;color:#f6f4ee;border-top:1px solid #292a28;border-bottom:1px solid #292a28}
.mn-proofbar-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.mn-proofbar-grid>div{padding:26px clamp(18px,3vw,42px);border-right:1px solid #343532;display:grid;gap:6px}
.mn-proofbar-grid>div:first-child{padding-left:0}.mn-proofbar-grid>div:last-child{border-right:0;padding-right:0}
.mn-proofbar strong{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase}.mn-proofbar span{font-size:.9rem;line-height:1.45;color:#b8bab5}

.mn-services{padding:clamp(88px,11vw,160px) 0;background:#ededE9;color:#161715;border-bottom:1px solid #d3d4cf}
.mn-services-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.55fr);gap:6vw;align-items:end;margin-bottom:clamp(42px,5vw,70px)}
.mn-services-head h2{margin:10px 0 0;font-size:clamp(3.3rem,7vw,7.8rem);line-height:.84;letter-spacing:-.065em;color:#171817}
.mn-services-head .lead{margin:0;color:#5d5f5b;max-width:43ch}
.mn-service-accordion{display:flex;gap:10px;height:min(68vh,650px);min-height:540px;width:100%;overflow:hidden}
.mn-service-panel{position:relative;flex:1 1 0;min-width:78px;overflow:hidden;border-radius:3px;background:#20211f;color:#f7f5ef;isolation:isolate;transition:flex 1.05s cubic-bezier(.16,.84,.18,1),transform .85s cubic-bezier(.16,.84,.18,1),filter .85s ease;filter:grayscale(1)}
.mn-service-panel::before{content:"";position:absolute;inset:0;background-image:linear-gradient(180deg,rgba(12,13,12,.08),rgba(12,13,12,.82)),var(--panel-image);background-size:cover;background-position:center;opacity:.36;transform:scale(1.055);transition:opacity .9s ease,transform 1.25s cubic-bezier(.16,.84,.18,1)}
.mn-service-panel::after{content:"";position:absolute;inset:0;background:#1a1b1a;opacity:.24;transition:opacity .8s ease}
.mn-service-panel.is-active{flex:7 1 0;filter:grayscale(.74)}
.mn-service-panel.is-active::before{opacity:.58;transform:scale(1)}
.mn-service-panel.is-active::after{opacity:.12}
.mn-service-panel:nth-child(3).is-active{box-shadow:inset 0 0 0 1px rgba(24,55,45,.28);filter:grayscale(.55)}
.mn-service-trigger{position:absolute;inset:0;z-index:4;border:0;background:transparent;color:inherit;cursor:pointer;padding:20px;display:flex;justify-content:space-between;align-items:flex-start;text-align:left}
.mn-service-trigger:focus-visible{outline:3px solid #18372D;outline-offset:-5px}
.mn-service-label{writing-mode:vertical-rl;transform:rotate(180deg);font-size:.78rem;line-height:1;text-transform:uppercase;letter-spacing:.18em;font-weight:850;white-space:nowrap;transition:opacity .35s ease}
.mn-service-arrow{font-size:1.35rem;line-height:1;transition:transform .6s cubic-bezier(.16,.84,.18,1)}
.mn-service-panel.is-active .mn-service-arrow{transform:rotate(45deg)}
.mn-service-panel.is-active .mn-service-label{opacity:.34}
.mn-service-body{position:absolute;z-index:3;left:clamp(35px,4vw,72px);right:clamp(35px,4vw,72px);bottom:clamp(32px,5vw,68px);max-width:720px;opacity:0;transform:translate3d(0,28px,0);pointer-events:none;transition:opacity .45s .05s ease,transform .72s cubic-bezier(.16,.84,.18,1)}
.mn-service-panel.is-active .mn-service-body{opacity:1;transform:none;pointer-events:auto;transition-delay:.26s}
.mn-service-eyebrow{margin:0 0 14px;font-size:.7rem;font-weight:850;letter-spacing:.16em;text-transform:uppercase;color:#d2d3cf}
.mn-service-body h3{margin:0;max-width:12ch;font-size:clamp(2rem,4.3vw,4.8rem);line-height:.91;letter-spacing:-.05em;color:#fff}
.mn-service-body>p:not(.mn-service-eyebrow){max-width:58ch;margin:20px 0 0;color:#d8d9d5;line-height:1.6;font-size:clamp(.95rem,1.15vw,1.08rem)}
.mn-service-body ul{display:flex;gap:8px;flex-wrap:wrap;list-style:none;padding:0;margin:22px 0}
.mn-service-body li{border:1px solid rgba(255,255,255,.3);padding:7px 10px;border-radius:999px;font-size:.72rem;color:#f5f4ef;background:rgba(0,0,0,.14)}
.mn-service-link{display:inline-flex;color:#fff;text-decoration:none;font-weight:800;border-bottom:1px solid rgba(255,255,255,.55);padding-bottom:5px}
.mn-service-link:hover{color:#d7d9d4;border-color:currentColor}.mn-service-link:focus-visible{outline:3px solid #f7f5ef;outline-offset:5px}
.mn-quality-line{margin-top:30px;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #c6c7c2;border-bottom:1px solid #c6c7c2}
.mn-quality-line span{padding:18px 10px;border-right:1px solid #c6c7c2;font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:#575955}.mn-quality-line span:first-child{padding-left:0}.mn-quality-line span:last-child{border-right:0}

@media (hover:hover){.mn-service-panel:not(.is-active):hover{flex:1.35 1 0;filter:grayscale(.9)}.mn-service-panel:not(.is-active):hover::before{opacity:.49}}
@media(max-width:900px){
  .mn-positioning-track{height:235svh}.mn-positioning-sticky{top:66px;height:calc(100svh - 66px);min-height:560px}.mn-positioning-stage{grid-template-columns:1fr;grid-template-rows:auto 1fr auto auto}.mn-positioning-words{grid-column:1;grid-row:2;height:54vh}.mn-positioning-copy{grid-column:1;grid-row:3;margin:0;max-width:47ch}.mn-positioning-index{grid-row:4}.mn-positioning-word span{font-size:clamp(3.4rem,15vw,7rem)}.mn-positioning-word--wide span{font-size:clamp(3rem,13vw,6rem)}
  .mn-proofbar-grid{grid-template-columns:1fr}.mn-proofbar-grid>div,.mn-proofbar-grid>div:first-child,.mn-proofbar-grid>div:last-child{padding:18px 0;border-right:0;border-bottom:1px solid #343532}.mn-proofbar-grid>div:last-child{border-bottom:0}
  .mn-services-head{grid-template-columns:1fr}.mn-service-accordion{height:auto;min-height:0;display:grid;gap:8px}.mn-service-panel,.mn-service-panel.is-active{min-width:0;min-height:84px;max-height:84px;flex:none;transition:max-height .9s cubic-bezier(.16,.84,.18,1)}.mn-service-panel.is-active{max-height:610px;min-height:500px}.mn-service-trigger{position:absolute;padding:22px}.mn-service-label{writing-mode:horizontal-tb;transform:none}.mn-service-body{left:24px;right:24px;bottom:28px}.mn-service-body h3{font-size:clamp(2rem,9vw,3.6rem)}.mn-quality-line{grid-template-columns:1fr 1fr}.mn-quality-line span:nth-child(2){border-right:0}.mn-quality-line span:nth-child(-n+2){border-bottom:1px solid #c6c7c2}
}
@media(max-width:560px){.mn-positioning-word span{font-size:clamp(3rem,14vw,5.2rem)}.mn-positioning-word--wide span{font-size:clamp(2.65rem,12.5vw,4.7rem)}.mn-services{padding:72px 0}.mn-service-panel.is-active{min-height:540px}.mn-service-body ul{display:none}.mn-quality-line{grid-template-columns:1fr}.mn-quality-line span,.mn-quality-line span:nth-child(2){border-right:0;border-bottom:1px solid #c6c7c2;padding:14px 0}.mn-quality-line span:last-child{border-bottom:0}}
@media(prefers-reduced-motion:reduce){.mn-positioning-word,.mn-service-panel,.mn-service-panel::before,.mn-service-body,.mn-service-arrow{transition:none!important}.mn-positioning-track{height:auto}.mn-positioning-sticky{position:relative;top:auto;height:auto;min-height:0}.mn-positioning-stage{height:auto;padding-block:80px}.mn-positioning-words{height:auto;display:grid;gap:28px}.mn-positioning-word{position:relative;top:auto;transform:none!important;opacity:1!important}.mn-positioning-word:nth-child(3){color:#18372D}}


/* =========================================================
   STEP 12 · VISIBILITY FIX + STARTPAGE EXPERIENCE
   ========================================================= */
/* old decorative poster word conflicted with the new accordion */
.mn-services#leistungen::after{display:none!important}

/* stronger, unmistakable positioning scroll scene */
.mn-positioning{background:#f3f1eb;overflow:clip}
.mn-positioning-track{height:330svh}
.mn-positioning-sticky{background:#f3f1eb;box-shadow:inset 0 1px 0 rgba(17,18,16,.12),inset 0 -1px 0 rgba(17,18,16,.12)}
.mn-positioning-stage{grid-template-columns:minmax(0,1fr) minmax(250px,.28fr);overflow:visible}
.mn-positioning-words{height:min(62vh,640px);overflow:visible}
.mn-positioning-word{opacity:.12;filter:none}
.mn-positioning-word span{font-size:clamp(4.6rem,10.8vw,11.5rem);letter-spacing:-.075em;white-space:nowrap;color:transparent;-webkit-text-stroke:1.4px rgba(18,19,18,.22);text-shadow:none}
.mn-positioning-word--wide span{font-size:clamp(3.7rem,8.25vw,8.8rem);line-height:.82}
.mn-positioning-word.is-current{opacity:1!important;z-index:3}
.mn-positioning-word.is-current span{color:#121312;-webkit-text-stroke:0 transparent}
.mn-positioning-word:nth-child(3).is-current span{color:#18372D}
.mn-positioning-word small{opacity:.55;transform:translateY(8px);transition:opacity .35s ease,transform .5s cubic-bezier(.16,.84,.18,1)}
.mn-positioning-word.is-current small{opacity:1;transform:none}
.mn-positioning-copy{align-self:center;margin:17vh 0 0;padding-left:22px;border-left:1px solid #b7b8b2}
.mn-positioning-index i{width:110px;height:2px}.mn-positioning-index i::after{transition:none}

/* accordion clipping fix */
.mn-services{overflow:visible!important}
.mn-service-accordion{height:clamp(580px,68vh,700px);min-height:580px;overflow:visible;gap:12px}
.mn-service-panel{min-width:74px;flex:1 1 0;contain:paint}
.mn-service-panel.is-active{flex:8.2 1 0}
.mn-service-body{left:clamp(28px,3.2vw,58px);right:clamp(28px,3.2vw,58px);bottom:clamp(28px,4vw,52px);max-width:min(680px,calc(100% - 64px))}
.mn-service-body h3{font-size:clamp(2.1rem,3.8vw,4.25rem);max-width:13ch}
@media(min-width:1200px){.mn-service-panel.is-active{flex:9 1 0}}

.mn-livecase{padding:clamp(90px,12vw,170px) 0;background:#faf8f2;color:#18372D}
.mn-livecase-head,.mn-slider-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.55fr);gap:6vw;align-items:end;margin-bottom:50px}
.mn-livecase-head h2,.mn-slider-head h2,.mn-tile-head h2,.mn-logo-copy h2{font-size:clamp(3.2rem,7vw,7.4rem);line-height:.84;letter-spacing:-.065em;margin:8px 0 0}
.mn-livecase-head .lead,.mn-slider-head .lead{margin:0;max-width:43ch}
.mn-livecase-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.5fr);gap:clamp(30px,5vw,70px);align-items:start}
.mn-browser{min-width:0;position:relative}.mn-browser-bar{height:48px;background:#151615;color:#f6f4ee;border-radius:14px 14px 0 0;display:grid;grid-template-columns:70px 1fr auto;align-items:center;padding:0 12px;gap:12px}.mn-browser-dots{display:flex;gap:6px}.mn-browser-dots i{width:9px;height:9px;border-radius:50%;background:#777}.mn-browser-dots i:nth-child(1){background:#a44931}.mn-browser-dots i:nth-child(2){background:#7a5a20}.mn-browser-dots i:nth-child(3){background:#5f7168}.mn-browser-address{font-size:.72rem;color:#c9cbc5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mn-browser-actions{display:flex;gap:4px}.mn-browser-actions button{border:1px solid #555;background:transparent;color:#ddd;font:inherit;font-size:.68rem;padding:6px 9px;border-radius:999px;cursor:pointer}.mn-browser-actions button.is-active{background:#f6f4ee;color:#151615;border-color:#f6f4ee}.mn-browser-actions button:focus-visible{outline:2px solid #f6f4ee;outline-offset:2px}.mn-browser-viewport{height:min(72vh,720px);min-height:520px;background:#deded8;border:1px solid #151615;border-top:0;overflow:hidden;display:grid;place-items:start center;transition:padding .65s cubic-bezier(.16,.84,.18,1)}.mn-browser-viewport iframe{width:100%;height:100%;border:0;background:white;transition:width .65s cubic-bezier(.16,.84,.18,1),border-radius .65s ease;box-shadow:none}.mn-browser.is-mobile .mn-browser-viewport{padding:22px}.mn-browser.is-mobile iframe{width:min(390px,100%);border-radius:20px;box-shadow:0 22px 60px rgba(0,0,0,.2)}.mn-browser-hint{position:absolute;right:14px;bottom:12px;background:#151615;color:#fff;padding:7px 10px;border-radius:999px;font-size:.68rem;margin:0;pointer-events:none}.mn-case-notes{position:sticky;top:120px;padding-top:12px}.mn-case-num{font-size:.7rem;font-weight:850;letter-spacing:.14em;text-transform:uppercase;color:#a44931}.mn-case-notes h3{font-size:clamp(2rem,3.6vw,4rem);line-height:.92;letter-spacing:-.05em;margin:16px 0 20px}.mn-case-notes>p:not(.mn-case-num){line-height:1.65;color:#5b665f}.mn-case-tags{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0}.mn-case-tags span{border:1px solid rgba(24,55,45,.35);padding:7px 10px;border-radius:999px;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em}

.mn-tile-section{padding:clamp(90px,11vw,155px) 0;background:#e7e6e1;color:#161715}.mn-tile-head{margin-bottom:44px}.mn-tiles{display:flex;gap:8px;height:410px;overflow:visible}.mn-tile{position:relative;flex:1 1 0;min-width:72px;background:#1a1b1a;color:#f7f5ef;padding:20px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;border:1px solid #333;transition:flex .95s cubic-bezier(.16,.84,.18,1),background .55s ease,transform .55s ease;cursor:default}.mn-tile:nth-child(3n){background:#2b2c29}.mn-tile.is-active{flex:5.4 1 0;background:#18372D}.mn-tile span{position:absolute;top:20px;left:18px;writing-mode:vertical-rl;transform:rotate(180deg);font-size:.7rem;font-weight:850;letter-spacing:.13em;text-transform:uppercase;transition:opacity .25s ease}.mn-tile strong,.mn-tile p{opacity:0;transform:translateY(16px);transition:opacity .4s ease,transform .55s cubic-bezier(.16,.84,.18,1);max-width:32ch}.mn-tile strong{font-size:clamp(1.5rem,2.7vw,3rem);line-height:.95}.mn-tile p{color:#d0d2cc;line-height:1.5}.mn-tile.is-active strong,.mn-tile.is-active p{opacity:1;transform:none;transition-delay:.24s}.mn-tile.is-active span{opacity:.28}.mn-tile:focus-visible{outline:3px solid #a44931;outline-offset:3px}

.mn-logo-show{background:#151615;color:#f7f5ef;padding:clamp(100px,13vw,180px) 0;overflow:hidden}.mn-logo-show-grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(400px,1.3fr);gap:7vw;align-items:center}.mn-logo-copy .kicker{color:#b8bab5}.mn-logo-copy p{max-width:46ch;color:#b8bab5;line-height:1.65}.mn-logo-stage{height:min(70vh,650px);min-height:480px;display:grid;place-items:center;position:relative}.mn-logo-slices{position:relative;width:min(78%,520px);aspect-ratio:1}.mn-logo-slices span{position:absolute;inset:0;background:url('assets/logo/mn-media-tiger-mark.svg') center/contain no-repeat;filter:brightness(0) invert(1);clip-path:inset(0 calc((4 - var(--i))*20%) 0 calc(var(--i)*20%));transform:translateX(calc((var(--i) - 2)*88px)) rotate(calc((var(--i) - 2)*4deg));opacity:.4;transition:transform 1.25s cubic-bezier(.16,.84,.18,1),opacity .8s ease}.mn-logo-show.is-in .mn-logo-slices span{transform:none;opacity:1}.mn-logo-word{position:absolute;bottom:7%;display:grid;text-align:center;gap:5px;opacity:0;transform:translateY(16px);transition:opacity .7s .7s ease,transform .8s .7s cubic-bezier(.16,.84,.18,1)}.mn-logo-show.is-in .mn-logo-word{opacity:1;transform:none}.mn-logo-word strong{font-size:1.15rem;letter-spacing:.35em}.mn-logo-word small{font-size:.68rem;letter-spacing:.23em;color:#b8bab5}

.mn-alpine{position:relative;background:#151615;color:#fff}.mn-alpine-track{height:390svh}.mn-alpine-sticky{position:sticky;top:0;height:100svh;overflow:hidden}.mn-alpine-media,.mn-alpine-media figure{position:absolute;inset:0;margin:0}.mn-alpine-media figure{opacity:0;transform:scale(1.1) translateY(3%);clip-path:inset(8% 7% 8% 7% round 12px);transition:none;will-change:opacity,transform,clip-path}.mn-alpine-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.78) contrast(1.02)}.mn-alpine-media:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,12,10,.78),rgba(10,12,10,.18) 60%,rgba(10,12,10,.08))}.mn-alpine-copy{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;pointer-events:none}.mn-alpine-copy .kicker{color:#e7e4dc}.mn-alpine-copy h2{font-size:clamp(5rem,13vw,13rem);line-height:.77;letter-spacing:-.08em;margin:16px 0;color:#fff}.mn-alpine-copy>p:not(.kicker){max-width:38ch;font-size:clamp(1rem,1.35vw,1.2rem);line-height:1.6}.mn-alpine-progress{width:min(420px,60vw);height:2px;background:rgba(255,255,255,.25);margin-top:28px;overflow:hidden}.mn-alpine-progress i{display:block;width:100%;height:100%;background:#fff;transform-origin:left;transform:scaleX(var(--alpine-p,0))}

.mn-project-slider{padding:clamp(100px,12vw,170px) 0;background:#faf8f2;overflow:hidden}.mn-slider{outline:none}.mn-slider-track{height:590px;position:relative;display:flex;align-items:center;justify-content:center;perspective:1100px}.mn-slide{position:absolute;width:min(390px,72vw);height:510px;background:#191a18;color:#fff;overflow:hidden;transform:var(--slide-transform,translateX(0) scale(1));opacity:var(--slide-opacity,1);filter:grayscale(var(--slide-gray,1));transition:transform .85s cubic-bezier(.16,.84,.18,1),opacity .7s ease,filter .7s ease;box-shadow:0 24px 55px rgba(0,0,0,.16)}.mn-slide.is-active{filter:grayscale(0);z-index:4}.mn-slide img{width:100%;height:70%;object-fit:cover}.mn-slide>div{padding:18px}.mn-slide span{font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:#c5c7c1}.mn-slide h3{font-size:1.55rem;margin:6px 0}.mn-slide p{font-size:.86rem;color:#c5c7c1;margin:0}.mn-slider-controls{display:flex;align-items:center;justify-content:center;gap:26px}.mn-slider-controls>div{display:flex;gap:12px;align-items:center;font-size:.72rem;font-weight:850;letter-spacing:.12em}.mn-slider-controls i{display:block;width:90px;height:1px;background:#bdbeb8;position:relative}.mn-slider-controls i:after{content:"";position:absolute;inset:0;background:#18372D;transform-origin:left;transform:scaleX(var(--slide-progress,.2));transition:transform .5s ease}.mn-slider-controls button{width:48px;height:48px;border:1px solid #18372D;background:transparent;color:#18372D;border-radius:50%;font-size:1.2rem;cursor:pointer}.mn-slider-controls button:hover{background:#18372D;color:#fff}.mn-slider-controls button:focus-visible{outline:3px solid #a44931;outline-offset:3px}

@media(max-width:980px){
 .mn-positioning-track{height:265svh}.mn-positioning-word span{font-size:clamp(3.5rem,13vw,7.2rem)}.mn-positioning-word--wide span{font-size:clamp(3rem,11vw,6.3rem)}.mn-positioning-copy{margin:0;padding-left:0;border-left:0}
 .mn-service-accordion{overflow:hidden;height:auto;min-height:0}.mn-service-panel,.mn-service-panel.is-active{min-width:0}.mn-livecase-head,.mn-slider-head{grid-template-columns:1fr}.mn-livecase-grid{grid-template-columns:1fr}.mn-case-notes{position:relative;top:auto}.mn-browser-viewport{min-height:480px;height:65vh}.mn-tiles{height:auto;display:grid;grid-template-columns:1fr 1fr}.mn-tile,.mn-tile.is-active{min-height:220px;min-width:0;flex:none}.mn-tile span{writing-mode:horizontal-tb;transform:none}.mn-tile strong,.mn-tile p{opacity:1;transform:none}.mn-logo-show-grid{grid-template-columns:1fr}.mn-logo-stage{min-height:400px;height:55vh}.mn-slide{width:min(340px,76vw)}
}
@media(max-width:620px){.mn-browser-bar{grid-template-columns:46px 1fr}.mn-browser-actions{display:none}.mn-browser-viewport{min-height:430px;height:61vh}.mn-tiles{grid-template-columns:1fr}.mn-tile,.mn-tile.is-active{min-height:190px}.mn-logo-stage{min-height:330px}.mn-alpine-copy h2{font-size:clamp(4rem,20vw,7.2rem)}.mn-slider-track{height:500px}.mn-slide{height:430px}.mn-slide img{height:67%}}
@media(prefers-reduced-motion:reduce){.mn-logo-slices span,.mn-logo-word,.mn-slide{transition:none!important}.mn-alpine-track{height:auto}.mn-alpine-sticky{position:relative;height:auto;min-height:75vh}.mn-alpine-media figure:first-child{opacity:1!important;transform:none!important;clip-path:none!important}.mn-alpine-media figure:not(:first-child){display:none}.mn-logo-show .mn-logo-slices span{transform:none;opacity:1}.mn-logo-show .mn-logo-word{opacity:1;transform:none}}


/* =========================================================
   STEP 13 · SIMPLE, ROBUST HERO / HEADER TRANSITION
   Cursor gaze at top only. No intro sequence, no jump sprites.
   ========================================================= */
.logo-flight,.hero-sequence-canvas{display:none!important}
.site-header{
  --header-reveal:0;
  position:fixed!important;inset:0 0 auto 0!important;top:0!important;width:100%;
  opacity:var(--header-reveal);transform:translate3d(0,var(--header-y,-18px),0);
  pointer-events:none;border-bottom-color:rgba(17,18,16,var(--header-border-alpha,0))!important;
  transition:none!important;will-change:opacity,transform;background-color;z-index:100;
}
.site-header.is-revealed{pointer-events:auto}
.site-header .nav{opacity:var(--header-reveal);transform:scale(var(--header-scale,.985));transform-origin:50% 0;will-change:opacity,transform}
.brand-symbol[data-header-logo]{opacity:1!important;transform:none!important}
.hero-cinematic-stage{top:0!important;height:100svh!important;min-height:650px}
.hero-cinematic-track{height:150svh}
.hero-cinematic{min-height:150svh}
.hero-artboard{animation:none!important;transform:none!important}
.hero-tiger-canvas{animation:none!important;transform:none!important;opacity:0;transition:opacity .22s ease}
.hero-tiger-canvas.is-ready{opacity:1}
.hero-organic-object--fallback{opacity:1}
.hero-logo-track{transition:none!important;will-change:opacity,transform}
.hero-organic-wrap.is-scrolled-away{pointer-events:none}
.hero-organic-shadow{animation:none!important;opacity:.75}
.hero-scroll-cue{opacity:calc(1 - min(1,var(--cin-p,0)))}
@media(max-width:980px){
  .site-header{position:fixed!important;opacity:var(--header-reveal)!important;transform:translate3d(0,var(--header-y,-14px),0)!important}
  .hero-cinematic-stage{min-height:100svh!important}
  .hero-cinematic-track,.hero-cinematic{height:auto;min-height:100svh}
  .hero-tiger-canvas{opacity:0}
  .hero-tiger-canvas.is-ready{opacity:1}
}
@media(prefers-reduced-motion:reduce){
  .site-header,.site-header .nav,.hero-logo-track{transition:none!important}
}
@media(max-width:959px){
  .site-header .nav-links,.site-header .nav-cta{display:none!important}
  .site-header .menu-btn{display:grid!important}
}


/* =========================================================
   STEP 14 · MN LOADER INTRO
   Slow silhouette → bottom-up ink fill → eye glint → interactive tiger.
   ========================================================= */
.hero-start-loader{
  position:absolute;left:50%;top:50%;height:96.5%;aspect-ratio:545/859;
  transform:translate(-50%,-50%);z-index:8;pointer-events:none;
  opacity:0;visibility:visible;animation:mnLoaderAppear 1.85s .48s cubic-bezier(.2,.72,.18,1) forwards;
  filter:drop-shadow(0 22px 28px rgba(20,18,15,.09));
  transition:opacity .48s cubic-bezier(.22,.72,.2,1),transform .58s cubic-bezier(.18,.8,.2,1);
}
.hero-start-loader__base,.hero-start-loader__fill{
  position:absolute;inset:0;
  -webkit-mask-image:url('assets/hero/tiger-static-v2.webp');mask-image:url('assets/hero/tiger-static-v2.webp');
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
}
.hero-start-loader__base{background:rgba(20,18,15,.115)}
.hero-start-loader__fill{
  background:linear-gradient(to top,#14120f 0 50%,rgba(20,18,15,.115) 50% 100%);
  background-size:100% 200%;background-repeat:no-repeat;background-position:0 200%;
  animation:mnLoaderFill 2.45s 2.82s cubic-bezier(.58,0,.38,1) forwards;
}
.hero-start-loader__eye{
  position:absolute;width:9%;height:9%;margin:-4.5% 0 0 -4.5%;border-radius:999px;
  background:radial-gradient(circle,rgba(255,214,156,1) 0%,#F0A95C 42%,transparent 70%);
  opacity:0;transform:scale(.4);filter:blur(.15px);
  animation:mnLoaderGlint .82s 5.18s cubic-bezier(.2,.7,.2,1) forwards;
}
.hero-start-loader__eye--left{left:34.34%;top:18.40%}
.hero-start-loader__eye--right{left:62.32%;top:18.40%}
.hero-organic-wrap:not(.is-loader-complete) .hero-tiger-canvas,
.hero-organic-wrap:not(.is-loader-complete) .hero-organic-object--fallback{opacity:0!important}
.hero-organic-wrap:not(.is-loader-complete) .hero-organic-shadow{opacity:0!important}
.hero-organic-wrap.is-loader-complete .hero-start-loader{opacity:0;transform:translate(-50%,-50%) scale(.985);visibility:hidden;transition:opacity .68s cubic-bezier(.22,.72,.2,1),transform .82s cubic-bezier(.18,.8,.2,1),visibility 0s .70s}
.hero-organic-wrap.is-loader-complete .hero-organic-shadow{opacity:.75!important}
.hero-organic-wrap.is-loader-complete .hero-tiger-canvas.is-ready{opacity:1!important;transition:opacity .78s cubic-bezier(.22,.72,.2,1)}
.hero-organic-wrap.is-loader-complete .hero-organic-object--fallback{transition:opacity .45s ease}
@keyframes mnLoaderAppear{0%,8%{opacity:0;transform:translate(-50%,-50%) scale(.985)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes mnLoaderFill{from{background-position:0 200%}to{background-position:0 0%}}
@keyframes mnLoaderGlint{0%{opacity:0;transform:scale(.35)}38%{opacity:1;transform:scale(1.04)}100%{opacity:0;transform:scale(.78)}}
@media(max-width:980px){.hero-start-loader{height:88.8%}}
@media(prefers-reduced-motion:reduce){
  .hero-start-loader{display:none!important}
  .hero-organic-wrap .hero-organic-object--fallback{opacity:1!important}
  .hero-organic-wrap .hero-organic-shadow{opacity:.75!important}
}


/* =========================================================
   STEP 16 · HOMEPAGE HARMONIZATION
   Projects → Why MN → Process → Routes → About
   ========================================================= */
.mn-slider-cta{display:flex;align-items:center;justify-content:space-between;gap:28px;margin-top:36px;padding-top:26px;border-top:1px solid rgba(24,55,45,.22)}
.mn-slider-cta p{margin:0;max-width:54ch;color:#646a65;line-height:1.55}

.mn-why{background:#151615;color:#f7f5ef;padding:clamp(110px,13vw,190px) 0 0;overflow:hidden}
.mn-why-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(420px,1.18fr);gap:clamp(55px,9vw,140px);align-items:start}
.mn-why-intro{position:sticky;top:130px;padding-bottom:90px}
.mn-why .kicker{color:#aeb1aa}.mn-why h2{font-size:clamp(3.5rem,7.2vw,8rem);line-height:.83;letter-spacing:-.068em;margin:12px 0 30px;color:#f7f5ef}
.mn-why .serif{color:#c1c4bd}.mn-why-intro .lead{color:#c5c8c0;max-width:48ch;line-height:1.65;margin-bottom:30px}
.mn-why .text-link{color:#f7f5ef;border-color:#777a74}.mn-why .text-link:hover{color:#d5d7d1}
.mn-why-list{border-top:1px solid #40423e}
.mn-why-item{display:grid;grid-template-columns:72px 1fr;gap:24px;padding:40px 0;border-bottom:1px solid #40423e}
.mn-why-item>span{font-size:.7rem;letter-spacing:.14em;color:#8f938b;font-weight:850;padding-top:7px}.mn-why-item h3{font-size:clamp(1.75rem,3vw,3.4rem);letter-spacing:-.045em;margin:0 0 12px;color:#f7f5ef}
.mn-why-item p{margin:0;max-width:58ch;color:#b8bbb4;line-height:1.62}
.mn-why-strip{margin-top:90px;border-top:1px solid #40423e;display:grid;grid-template-columns:repeat(4,1fr)}
.mn-why-strip span{padding:24px 10px;text-align:center;border-right:1px solid #40423e;font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;color:#aeb1aa}.mn-why-strip span:last-child{border-right:0}

.mn-process{background:#f1efe8;color:#18372D;padding:clamp(110px,13vw,180px) 0}
.mn-process-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.5fr);gap:7vw;align-items:end;margin-bottom:70px}.mn-process-head h2{font-size:clamp(3.4rem,7.3vw,8rem);line-height:.84;letter-spacing:-.068em;margin:10px 0 0}.mn-process-head .lead{margin:0;max-width:44ch}
.mn-process-grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #b7bab4}
.mn-process-rail{position:absolute;top:-1px;left:0;width:100%;height:2px;background:transparent;overflow:hidden}.mn-process-rail i{display:block;height:100%;width:100%;background:#18372D;transform:scaleX(var(--process-p,0));transform-origin:left}
.mn-process-step{padding:30px 28px 10px 0;min-height:300px;border-right:1px solid #c9cbc5;opacity:.42;transition:opacity .5s ease,transform .65s cubic-bezier(.16,.84,.18,1);transform:translateY(8px)}
.mn-process-step:last-child{border-right:0;padding-left:28px}.mn-process-step:not(:first-of-type){padding-left:28px}.mn-process-step.is-active{opacity:1;transform:none}
.mn-process-step>span{display:block;font-size:.68rem;font-weight:850;letter-spacing:.15em;margin-bottom:70px;color:#a44931}.mn-process-step small{text-transform:uppercase;letter-spacing:.13em;font-size:.66rem;font-weight:850;color:#777d77}.mn-process-step h3{font-size:clamp(1.7rem,2.6vw,3rem);letter-spacing:-.045em;margin:10px 0 14px}.mn-process-step p{color:#5d675f;line-height:1.6;margin:0;max-width:28ch}
.mn-process-note{margin-top:50px;padding-top:22px;border-top:1px solid #b7bab4;color:#626a64}

.mn-routes{background:#faf8f2;color:#18372D;padding:clamp(105px,12vw,170px) 0}
.mn-routes-head{max-width:900px;margin-bottom:54px}.mn-routes-head h2{font-size:clamp(3.5rem,7.2vw,7.8rem);line-height:.84;letter-spacing:-.068em;margin:10px 0 25px}.mn-routes-head .lead{max-width:54ch}
.mn-route-list{border-top:1px solid #b8bbb4}.mn-route{display:grid;grid-template-columns:minmax(150px,.3fr) minmax(220px,.5fr) minmax(280px,1fr) auto;gap:28px;align-items:center;padding:30px 0;border-bottom:1px solid #b8bbb4;color:#18372D;text-decoration:none;transition:padding .55s cubic-bezier(.16,.84,.18,1),background .35s ease}
.mn-route>span{font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;font-weight:850;color:#777d77}.mn-route h3{margin:0;font-size:clamp(1.7rem,2.7vw,3rem);letter-spacing:-.045em}.mn-route p{margin:0;color:#626b65;line-height:1.55}.mn-route b{font-size:.76rem;white-space:nowrap}
.mn-route:hover{padding-left:18px;padding-right:18px;background:#eceae3}.mn-route:focus-visible{outline:3px solid #a44931;outline-offset:4px;background:#eceae3}
.mn-routes .micro-note{margin-top:24px}

/* Move the personal-name bridge into the actual about transition */
.name-bridge{background:#f1efe8}
.name-bridge .bridge-panel small{letter-spacing:.14em;text-transform:uppercase}

/* Make About feel editorial rather than another generic card section */
#ueber-mich.section--paper{padding-top:clamp(120px,15vw,210px);padding-bottom:clamp(120px,15vw,210px)}
#ueber-mich .about-copy h2{font-size:clamp(3.3rem,6.6vw,7rem);line-height:.85;letter-spacing:-.06em}

@media(max-width:980px){
 .mn-why-grid{grid-template-columns:1fr}.mn-why-intro{position:relative;top:auto;padding-bottom:20px}.mn-why-strip{grid-template-columns:1fr 1fr}.mn-why-strip span:nth-child(2){border-right:0}.mn-why-strip span:nth-child(-n+2){border-bottom:1px solid #40423e}
 .mn-process-head{grid-template-columns:1fr}.mn-process-grid{grid-template-columns:1fr 1fr}.mn-process-step{border-bottom:1px solid #c9cbc5;min-height:260px}.mn-process-step:nth-child(2){border-right:0}.mn-process-step:last-child{border-bottom:0}
 .mn-route{grid-template-columns:1fr;gap:10px;padding:26px 0}.mn-route:hover{padding-left:12px;padding-right:12px}.mn-route p{max-width:55ch}.mn-slider-cta{align-items:flex-start;flex-direction:column}
}
@media(max-width:620px){
 .mn-why-strip{grid-template-columns:1fr}.mn-why-strip span{border-right:0;border-bottom:1px solid #40423e}.mn-why-strip span:last-child{border-bottom:0}.mn-why-item{grid-template-columns:45px 1fr;gap:12px;padding:30px 0}
 .mn-process-grid{grid-template-columns:1fr}.mn-process-step,.mn-process-step:not(:first-of-type),.mn-process-step:last-child{padding:28px 0;border-right:0;min-height:0}.mn-process-step>span{margin-bottom:26px}
}
@media(prefers-reduced-motion:reduce){.mn-process-step,.mn-route{transition:none!important}.mn-process-rail i{transform:scaleX(1)!important}.mn-process-step{opacity:1!important;transform:none!important}}

/* STEP 16 · mobile polish */
.mn-process-step{opacity:.84}
.mn-process-step.is-active{opacity:1}
@media(max-width:620px){
  .mn-why h2{font-size:clamp(2.65rem,11vw,4rem);line-height:.87;overflow-wrap:normal;word-break:normal}
  .mn-why-intro .lead{font-size:1.05rem}
  .mn-why{overflow:hidden}
  .mn-why-grid,.mn-why-intro,.mn-why-list,.mn-why-item{min-width:0}
  .mn-process-step{opacity:.9}
}


/* =========================================================
   STEP 17 · KORREKTUREN & FARBDRAMATURGIE
   1 Zielpalette vervollstaendigt
   2 Hero auf Schwarz/Grau/Creme zurueckgefuehrt
   3 Kontrast- und Kollisionsfehler behoben
   4 Mobile Hero und Positionierung eigenstaendig gesetzt
   5 Loader auf 3,5 s verkuerzt
   ========================================================= */

/* --- 1 · Zielpalette aus dem Briefing, plus das nie definierte --muted --- */
:root{
  --black:#111210;
  --grey:#747570;
  /* --grey ist der Briefing-Wert und bleibt so. Fuer kleine Schrift auf Creme
     liegt er mit 4,37 : 1 knapp unter WCAG AA, deshalb dieser Textton. */
  --grey-text:#6B6C67;
  --muted:rgba(17,18,16,.66);
}

/* --- 2 · Hero: der erste Bildschirm bleibt monochrom.
       Forest und Clay setzen erst spaeter ein. --- */
.hero-cinematic .hero-intro-kicker{color:var(--grey-text)}
.hero-cinematic .hero-intro-title{color:var(--black)}
.hero-cinematic .hero-line--accent{color:var(--grey)}
.hero-cinematic .hero-intro-lead{color:var(--muted)}
.hero-cinematic .hero-text-link{color:var(--black)}
.hero-cinematic .hero-text-link:hover,
.hero-cinematic .hero-text-link:focus-visible{color:var(--grey)}
.hero-cinematic .btn--primary{background:var(--black);border-color:var(--black);color:var(--cream)}
.hero-cinematic .btn--primary:hover,
.hero-cinematic .btn--primary:focus-visible{background:#2b2c29;border-color:#2b2c29}
.hero-cinematic-meta{color:var(--grey-text)}
.hero-scroll-cue{color:var(--grey-text)}
.hero-scroll-cue i{background:var(--black)}
.hero-scroll-cue i::after{background:var(--grey)}
.hero-cinematic::after{-webkit-text-stroke-color:rgba(17,18,16,.12)}
/* Der warme Schimmer hinter dem Tiger war der letzte Clay-Rest im Hero. */
.hero-logo-track::after{background:rgba(17,18,16,.05)}
.hero-organic-shadow{background:rgba(17,18,16,.13)}
.hero-tiger-canvas,
.hero-sequence-canvas{filter:drop-shadow(0 24px 32px rgba(17,18,16,.13))}

/* --- 3a · .about-copy p hat die Cream-Farbe der Notiz ueberschrieben.
       Ergebnis war Kontrast 1,0 : 1 - der Text war unsichtbar. --- */
.about-copy .bobo-note p{color:rgba(250,248,242,.86)}

/* --- 3b · Footer-Ueberschriften standen in Clay auf Forest (2,2 : 1). --- */
.site-footer .footer-links h3{color:rgba(250,248,242,.92)}

/* --- 3c · Kleine Labels lagen knapp unter 4,5 : 1. --- */
.mn-positioning-word small{color:#5f615d}
.mn-process-step small{color:#5b615b}

/* --- 4a · Mobile Hero: Text oben, Tiger fuellt exakt den Rest.
       Vorher lief der Tiger unter die Fensterkante. --- */
@media (max-width:980px){
  .hero-cinematic-grid{
    grid-template-rows:auto minmax(0,1fr);
    align-content:stretch;
    gap:clamp(6px,1.6vh,18px);
  }
  .hero-organic-wrap{
    order:2;width:100%;height:100%;min-height:0;max-height:none;
    margin-top:0;align-self:stretch;
  }
  .hero-tiger-stage{
    position:absolute;left:0;top:0;width:100%;height:100%;
    aspect-ratio:auto;transform:none;
  }
  /* Achtung: die Altregel .hero h1 (0,1,1) schlaegt .hero-intro-title (0,1,0).
     Deshalb hier mit .hero-cinematic davor - sonst greift mobil weiter 19vw. */
  .hero-cinematic .hero-intro-title{font-size:clamp(2.9rem,12vw,5rem);line-height:.87;max-width:none}
  .hero-intro-lead{margin-top:clamp(16px,2.4vh,26px)}
}
@media (max-width:600px){
  .hero-cinematic-grid{padding-top:26px;padding-bottom:26px}
  .hero-cinematic .hero-intro-title{font-size:clamp(2.35rem,11.4vw,3.9rem);line-height:.9;letter-spacing:-.055em;max-width:none}
  .hero-intro-lead{font-size:.94rem;line-height:1.46;margin-top:16px}
  .hero-intro-actions{margin-top:16px;gap:12px}
  .hero-organic-wrap{min-height:210px}
}

/* --- 4b · Die absolut positionierten Grosswoerter ragten mobil in den
       Fliesstext darunter. Jetzt sauber beschnitten. --- */
@media (max-width:980px){
  /* Zeile 1041 setzt .mn-positioning-stage ohne Media Query wieder auf zwei
     Spalten und hebelt damit die Mobilregel aus 900px aus. Hier zurueckgeholt:
     sonst quetschen sich Grosswoerter und Fliesstext in ~77px Breite. */
  .mn-positioning-stage{grid-template-columns:1fr;grid-template-rows:auto 1fr auto auto}
  .mn-positioning-words{grid-column:1;grid-row:2}
  .mn-positioning-copy{grid-column:1;grid-row:3;position:relative;z-index:2;background:#f7f6f1;max-width:none;padding-top:16px;margin:0}
  .mn-positioning-index{grid-column:1;grid-row:4}
  /* Nur vertikal beschneiden. overflow:hidden wuerde die nowrap-Woerter
     auch seitlich abschneiden. */
  .mn-positioning-words{clip-path:inset(0 -50vw)}
  .mn-positioning-word small{
    margin-top:14px;font-size:.66rem;letter-spacing:.09em;line-height:1.5;
  }
}

/* --- 4c · Slider: Nachbarkarten deutlicher zuruecknehmen, damit die
       aktive Karte wirklich im Fokus steht. --- */
.mn-slide:not(.is-active){opacity:.42;filter:grayscale(1) contrast(.94)}
.mn-slide.is-active{opacity:1;filter:none}

/* --- 5 · Loader: gleiche Dramaturgie, 3,5 s statt 6,2 s. --- */
.hero-start-loader{animation-duration:1.15s;animation-delay:.30s}
.hero-start-loader__fill{animation-duration:1.35s;animation-delay:1.45s}
.hero-start-loader__eye{animation-duration:.62s;animation-delay:2.78s}
/* Wiederkehrer in derselben Session sehen die Sequenz nicht noch einmal. */
.hero-cinematic.is-loader-skipped .hero-start-loader{display:none}

/* --- Hilfsklassen --- */
.noscript-note{
  margin:0 auto 40px;padding:20px 22px;border-left:4px solid var(--clay);
  background:var(--paper);color:var(--forest);
}
.noscript-note strong{display:block;margin-bottom:6px}
.noscript-note p{margin:0}
.form-privacy{
  margin:18px 0 0;font-size:.84rem;line-height:1.55;color:rgba(24,55,45,.74);max-width:60ch;
}

/* Die drei Einstiegs-Labels lagen bei 3,97 : 1. */
.mn-route > span,
.mn-route small{color:#5b615b}