:root { --ink:#171816; --paper:#f3f0e8; --acid:#d8ff38; --coral:#f16f61; --sand:#d8d0c1; --line:rgba(23,24,22,.18); --display:'Arial Nova','Segoe UI',sans-serif; --serif:Georgia,'Times New Roman',serif; --mono:Consolas,'Courier New',monospace; --ease:cubic-bezier(.22,1,.36,1); --resize-dur:620ms; --modal-open-dur:650ms; }
:root { --floating-contact-width:120px; --floating-contact-right:clamp(18px,3vw,48px); --floating-contact-gap:28px; --floating-contact-safe-zone:calc(var(--floating-contact-width) + var(--floating-contact-right) + var(--floating-contact-gap)); }
.hero h1 { letter-spacing:-.061em; line-height:.82; } .hero h1 .hero-word-slot { display:inline-block; min-width:5.15em; } .hero h1 .hero-word { display:inline-block; min-width:0; letter-spacing:-.071em; } .hero h1 .hero-word:after { bottom:-.04em; } .hero h1 span { letter-spacing:-.073em; } .hero .scroll-cue { bottom:calc(max(18px,env(safe-area-inset-bottom)) + 72px); }
.wordmark { display:inline-flex; align-items:center; color:inherit; }
.brand-logo { display:block; width:86px; height:38px; flex:0 0 auto; color:inherit; background-color:currentColor; -webkit-mask-image:url('assets/sauberei-logo.svg'); mask-image:url('assets/sauberei-logo.svg'); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-size:100.24px 100.24px; mask-size:100.24px 100.24px; -webkit-mask-position:-10.23px -31.08px; mask-position:-10.23px -31.08px; }
.footer-meta .brand-logo { width:74px; height:33px; color:var(--paper); -webkit-mask-size:86.25px 86.25px; mask-size:86.25px 86.25px; -webkit-mask-position:-8.8px -26.74px; mask-position:-8.8px -26.74px; margin:0 0 7px; }
.service-controls { padding-right:max(0px,calc(var(--floating-contact-safe-zone) - clamp(18px,8vw,128px))); }
section.why { min-height:0; } .why-intro .why-copy { grid-column:auto; max-width:430px; margin-top:clamp(24px,2vw,28px); } .why-intro .why-copy p { font-size:clamp(20px,1.7vw,26px); line-height:1.15; } .why-intro .why-copy .text-link { margin-top:24px; }
section.process .process-list li { padding:0 !important; display:block; overflow:hidden; overflow:clip; isolation:isolate; } section.process .process-list li:hover { background:transparent; transform:none; } .process-step-inner { position:absolute; inset:0; padding:20px 22px 32px 0; display:flex; flex-direction:column; transition:background-color .4s var(--ease),transform .4s var(--ease); } .process-list li:not(:first-child) .process-step-inner { padding-left:22px; } .process-list li:is(:hover,:focus-visible) .process-step-inner { background:rgba(255,255,255,.23); transform:translateY(-12px); } .process-list li:focus-visible { outline:none; } .process-list li:focus-visible:after { content:''; position:absolute; z-index:2; pointer-events:none; inset:2px; box-shadow:inset 0 0 0 2px var(--ink); }
@media (max-width:760px) { section.process .process-list li .process-step-inner { padding:20px 0 25px; } section.process .process-list li:not(:first-child) .process-step-inner { padding-left:0; } }
@media (max-width:760px) { .why-intro .why-copy { margin-top:30px; } .why-intro .why-copy p { font-size:24px; } .why .order-board { margin:30px 0; } section.why { padding-bottom:106px; } }
@media (max-width:760px) { .hero .scroll-cue { bottom:calc(max(16px,env(safe-area-inset-bottom)) + 72px); } }
@media (max-width:760px) { :root { --floating-contact-gap:40px; } }
@media (max-width:760px) { .intro-tail { grid-template-columns:1fr; width:min(100%,354px); gap:22px; margin-left:0; }.intro-tail>p { font-size:15px; }.local-service-panel { width:min(100%,238px); min-height:126px; margin-left:auto; }.local-service-panel__scope { font-size:16px !important; } }
@media (min-width:761px) { .hero .hero-copy { padding:clamp(112px,15vh,170px) clamp(18px,8vw,128px) 42px; } .hero h1 { font-size:clamp(60px,10vw,170px); } }
* { box-sizing:border-box; } html { scroll-behavior:smooth; background:var(--ink); } body { margin:0; overflow-x:hidden; color:var(--ink); background:var(--paper); font-family:var(--display); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } body.modal-open { overflow:hidden; } button,input,textarea,select { font:inherit; } button,a { -webkit-tap-highlight-color:transparent; } button { cursor:pointer; } a { color:inherit; text-decoration:none; } :focus-visible { outline:2px solid var(--acid); outline-offset:5px; } .skip-link { position:fixed; z-index:100; left:14px; top:-50px; padding:10px 14px; background:var(--acid); color:var(--ink); font-size:13px; } .skip-link:focus { top:14px; }
.grain { pointer-events:none; position:fixed; z-index:90; inset:0; opacity:.085; mix-blend-mode:soft-light; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.85'/%3E%3C/svg%3E"); background-size:180px 180px; }
.site-header { color:#fff; position:fixed; z-index:30; left:0; right:0; top:0; height:76px; padding:19px clamp(18px,3vw,52px); display:flex; align-items:center; justify-content:space-between; transition:background-color .35s var(--ease), color .35s var(--ease), height .35s var(--ease), backdrop-filter .35s var(--ease); } .site-header.scrolled { height:64px; color:var(--ink); background:rgba(243,240,232,.82); backdrop-filter:blur(14px); box-shadow:0 7px 22px rgba(10,10,9,.06); } .wordmark { font-size:23px; font-weight:800; line-height:1; letter-spacing:-1.7px; } .wordmark span { font-size:8px; vertical-align:top; margin-left:1px; letter-spacing:0; } .desktop-nav { display:flex; gap:clamp(17px,2vw,34px); font-size:12px; font-weight:600; letter-spacing:.01em; } .desktop-nav a { position:relative; padding:10px 0; } .desktop-nav a:after { content:''; position:absolute; bottom:6px; left:0; right:0; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .32s var(--ease); } .desktop-nav a:hover:after,.desktop-nav a:focus-visible:after { transform:scaleX(1); transform-origin:left; }.menu-button { display:none; }
.hero { color:#fff; min-height:100svh; position:relative; isolation:isolate; overflow:hidden; background:#2d3026; } .hero-video { position:absolute; z-index:-2; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 46%; } .hero-shade { position:absolute; z-index:-1; inset:0; background:linear-gradient(90deg,rgba(12,13,11,.56) 0%,rgba(12,13,11,.24) 45%,rgba(12,13,11,.42) 100%),linear-gradient(0deg,rgba(10,10,9,.62),transparent 44%); } .hero-copy { min-height:100svh; padding:clamp(130px,18vh,200px) clamp(18px,8vw,128px) 42px; display:flex; flex-direction:column; justify-content:center; } .eyebrow { font:500 10px/1.1 var(--mono); letter-spacing:.08em; text-transform:uppercase; display:flex; align-items:center; gap:10px; margin:0 0 27px; } .eyebrow span { width:25px; height:1px; display:inline-block; background:currentColor; } .eyebrow.light { color:#fff; } h1,h2,h3,p { margin-top:0; } h1,h2 { text-wrap:balance; } h1 { max-width:1000px; margin:0; font-size:clamp(60px,10.4vw,176px); line-height:.8; letter-spacing:-.085em; font-weight:800; } h1 em { font-family:var(--serif); font-weight:600; letter-spacing:-.08em; position:relative; white-space:nowrap; } h1 em:after { content:''; position:absolute; height:.08em; background:var(--acid); bottom:.12em; left:-.04em; right:-.02em; z-index:-1; transform:scaleX(.98); transform-origin:left; animation:mark-in 1.1s .9s var(--ease) backwards; } h1 span { letter-spacing:-.1em; } .hero-bottom { margin-top:clamp(40px,8vh,90px); display:flex; align-items:end; gap:28px; max-width:650px; } .hero-bottom p { max-width:230px; margin:0; font-size:14px; line-height:1.4; color:rgba(255,255,255,.85); text-wrap:pretty; }.button { border:0; color:var(--ink); background:var(--acid); display:inline-flex; min-height:50px; align-items:center; justify-content:center; gap:28px; padding:0 19px; font-size:12px; font-weight:700; transition:transform .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease); } .button:hover { transform:translateY(-3px); } .button:active,.contact-trigger:active,.round-control:active { transform:scale(.96); } .button-light { color:#fff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.42); backdrop-filter:blur(5px); }.button-light:hover { background:var(--acid); color:var(--ink); border-color:var(--acid); }.button.dark { background:var(--ink); color:var(--paper); }.button.dark:hover { background:var(--coral); color:var(--ink); }.scroll-cue { position:absolute; bottom:25px; right:clamp(18px,3vw,52px); font:500 9px var(--mono); letter-spacing:.09em; text-transform:uppercase; display:flex; gap:10px; align-items:center; }.scroll-cue i { width:34px; height:1px; background:#fff; position:relative; overflow:hidden; }.scroll-cue i:after { content:''; position:absolute; inset:0; background:var(--acid); animation:scan 1.7s infinite; }
.section { padding:clamp(90px,13vw,190px) clamp(18px,8vw,128px); } .intro { min-height:86vh; background:var(--paper); position:relative; overflow:hidden; }.intro > * { position:relative; z-index:1; }.intro-title { max-width:1140px; font-weight:700; letter-spacing:-.067em; line-height:.91; font-size:clamp(42px,7vw,112px); margin:0; }.intro-title i,h2 i { font-family:var(--serif); font-weight:600; }.intro-tail { padding-top:clamp(45px,8vw,110px); margin-left:auto; margin-right:max(0px,calc(var(--floating-contact-safe-zone) - clamp(18px,8vw,128px))); width:min(100%,680px); display:grid; grid-template-columns:minmax(0,1fr) clamp(280px,22vw,310px); gap:clamp(28px,3vw,42px); align-items:end; }.intro-tail>p { font-size:17px; line-height:1.35; margin:0; text-wrap:pretty; }.local-service-panel-anchor,.local-service-panel-reveal { min-height:238px; }.local-service-panel-reveal { height:100%; }.local-service-panel { min-height:238px; height:100%; color:var(--paper); background:var(--ink); padding:21px 22px 19px; display:flex; flex-direction:column; justify-content:space-between; box-shadow:inset 1px 0 0 rgba(243,240,232,.16),inset -1px 0 0 rgba(243,240,232,.16),inset 0 1px 0 rgba(243,240,232,.16); }.local-service-panel__label { display:flex; align-items:center; gap:10px; padding-bottom:14px; border-bottom:1px solid rgba(243,240,232,.25); font:500 10px/1 var(--mono) !important; letter-spacing:.08em; text-transform:uppercase; }.local-service-panel__label span { width:28px; height:1px; background:var(--acid); }.local-service-panel__scope { font-size:clamp(23px,1.9vw,29px) !important; font-weight:700; letter-spacing:-.055em; line-height:.9 !important; }.local-service-panel__scope b { color:var(--acid); font-weight:500; }.local-service-panel__detail { color:rgba(243,240,232,.74); font:500 9px/1 var(--mono) !important; letter-spacing:.06em; text-transform:uppercase; }
.dark-section { color:var(--paper); background:var(--ink); }.services { min-height:105vh; overflow:hidden; }.section-head { display:grid; grid-template-columns:1fr minmax(190px,330px); gap:30px; align-items:end; }.section-head .eyebrow { grid-column:1/-1; }.section-head h2,.why h2,.process h2,.local h2,.faq h2,.closing h2 { font-size:clamp(48px,7.2vw,116px); letter-spacing:-.078em; line-height:.82; margin:0; font-weight:800; }.section-head>p:last-child { color:#b9b9b1; max-width:260px; line-height:1.35; margin:0; font-size:14px; }.service-stage { min-height:465px; margin-top:clamp(45px,7vw,100px); position:relative; perspective:1200px; }.service-card { position:absolute; top:0; left:0; right:0; min-height:465px; display:grid; grid-template-columns:.66fr 1.34fr; color:var(--ink); background:var(--acid); padding:clamp(24px,4vw,60px); overflow:hidden; transform-origin:50% 100%; transition:transform var(--resize-dur) var(--ease),filter var(--resize-dur) var(--ease),opacity var(--resize-dur) var(--ease),background-color var(--resize-dur) var(--ease); box-shadow:0 24px 65px rgba(0,0,0,.17); }.service-card:nth-child(2n) { background:var(--coral); }.service-card:nth-child(3n) { background:#ddd2c0; }.service-card.is-active { z-index:5; transform:translate3d(0,0,0); }.service-card.is-past { z-index:1; transform:translate3d(-2%,12%, -120px) scale(.93) rotate(-2deg); filter:brightness(.55) saturate(.55); opacity:.65; }.service-card.is-future { z-index:3; transform:translate3d(105%,0,0) rotate(4deg); opacity:0; pointer-events:none; }.service-number { font:500 13px var(--mono); }.service-card h3 { align-self:end; font-size:clamp(45px,6vw,92px); font-weight:800; letter-spacing:-.075em; line-height:.82; margin:0; max-width:640px; }.service-detail { align-self:end; border-left:1px solid rgba(23,24,22,.35); padding-left:24px; max-width:290px; }.service-detail p { font-size:18px; font-weight:600; line-height:1.1; margin-bottom:24px; }.service-detail small { display:block; font-size:13px; line-height:1.35; text-wrap:pretty; }.service-card button { position:absolute; inset:0; opacity:0; cursor:pointer; }.service-controls { display:flex; justify-content:flex-end; align-items:center; gap:15px; margin-top:22px; }.service-controls p { font:500 11px var(--mono); margin:0; }.round-control { width:45px; height:45px; border-radius:50%; border:1px solid rgba(255,255,255,.45); background:transparent; color:#fff; font-size:18px; transition:background-color .26s var(--ease), color .26s var(--ease),transform .26s var(--ease); }.round-control:hover { background:var(--acid); color:var(--ink); border-color:var(--acid); }
.why { min-height:100vh; background:var(--sand); display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(34px,7vw,120px); align-items:center; }.why-intro { align-self:start; }.order-board { position:relative; min-height:500px; overflow:hidden; background:#eee8dd; box-shadow:inset 0 0 0 1px rgba(23,24,22,.1); }.board-note,.board-caption { position:absolute; z-index:2; font:500 9px var(--mono); text-transform:uppercase; letter-spacing:.08em; }.board-note { left:20px; top:18px; }.board-caption { bottom:18px; right:20px; }.order-word { position:absolute; z-index:1; transition:transform .8s var(--ease); }.order-board.is-interactive .order-word__repel { will-change:transform; }.order-word__repel { display:inline-block; }.order-word__surface { display:inline-block; background:var(--ink); color:var(--paper); padding:9px 12px; font-size:clamp(14px,1.6vw,22px); font-weight:700; letter-spacing:-.04em; }.pos-1 { left:12%; top:22%; transform:rotate(-16deg) translate(-20px,20px); }.pos-2 { right:13%; top:17%; transform:rotate(21deg) translate(30px,-15px); }.pos-3 { left:38%; top:44%; transform:rotate(-9deg) translate(18px,24px); }.pos-4 { left:18%; top:67%; transform:rotate(17deg) translate(-26px,-8px); }.pos-5 { right:9%; top:69%; transform:rotate(-19deg) translate(20px,19px); }.order-board.is-seen .pos-1 { transform:rotate(0) translate(0); }.order-board.is-seen .pos-2 { transform:rotate(0) translate(0); }.order-board.is-seen .pos-3 { transform:rotate(0) translate(0); }.order-board.is-seen .pos-4 { transform:rotate(0) translate(0); }.order-board.is-seen .pos-5 { transform:rotate(0) translate(0); }.why-copy { grid-column:2; max-width:430px; }.why-copy p { font-size:clamp(21px,2.2vw,31px); letter-spacing:-.04em; line-height:1.02; font-weight:600; }.text-link { display:inline-flex; margin-top:30px; align-items:center; gap:16px; font-size:13px; font-weight:700; }
.accent-section { background:var(--acid); padding-bottom:0; overflow:hidden; }.process-top { display:flex; justify-content:space-between; align-items:end; gap:20px; }.process-list { display:grid; grid-template-columns:repeat(4,1fr); list-style:none; margin:clamp(80px,13vw,160px) 0 0; padding:0; border-top:1px solid var(--ink); }.process-list li { min-height:355px; padding:20px 22px 32px 0; border-right:1px solid var(--ink); position:relative; display:flex; flex-direction:column; transition:background-color .4s var(--ease),transform .4s var(--ease); }.process-list li:not(:first-child) { padding-left:22px; }.process-list li:last-child { border:0; }.process-list li:hover { background:rgba(255,255,255,.23); transform:translateY(-12px); }.process-list span { font:500 11px var(--mono); }.process-list h3 { font-size:clamp(24px,2.6vw,40px); letter-spacing:-.065em; line-height:.9; margin:auto 0 12px; }.process-list p { font-size:13px; line-height:1.35; margin:0; max-width:190px; }
.local { overflow:hidden; padding-bottom:0; }.local-grid { display:grid; grid-template-columns:1.3fr .7fr; align-items:end; gap:50px; }.local-grid>div { padding-bottom:20px; }.local-grid p { font-size:18px; line-height:1.35; text-wrap:pretty; margin-bottom:32px; }.local-tape { background:var(--coral); margin:clamp(65px,10vw,140px) calc(clamp(18px,8vw,128px) * -1) 0; padding:18px 0; font:800 clamp(26px,4vw,66px)/.9 var(--display); letter-spacing:-.06em; white-space:nowrap; transform:rotate(-2deg) scale(1.04); display:flex; justify-content:space-around; align-items:center; }
.faq { display:grid; grid-template-columns:.72fr 1.28fr; gap:clamp(45px,10vw,180px); }.faq-title p:last-child { color:#b9b9b1; max-width:260px; font-size:14px; line-height:1.35; margin-top:33px; }.faq-list { align-self:end; }.faq-item { border-top:1px solid rgba(243,240,232,.35); }.faq-item:last-child { border-bottom:1px solid rgba(243,240,232,.35); }.faq-question { color:var(--paper); background:none; border:0; padding:22px 0; width:100%; display:grid; grid-template-columns:43px 1fr 30px; align-items:center; gap:10px; text-align:left; font-size:clamp(17px,1.7vw,24px); font-weight:600; letter-spacing:-.035em; }.faq-question small { color:var(--acid); font:500 10px var(--mono); }.faq-question b { position:relative; width:25px; height:25px; border-radius:50%; border:1px solid rgba(243,240,232,.5); font-weight:400; font-size:19px; line-height:20px; text-align:center; transition:transform .35s var(--ease),background-color .35s var(--ease),color .35s var(--ease); }.faq-item.is-open .faq-question b { transform:rotate(45deg); background:var(--acid); color:var(--ink); border-color:var(--acid); }.faq-answer { display:grid; grid-template-rows:0fr; transition:grid-template-rows .42s var(--ease); }.faq-answer>div { overflow:hidden; }.faq-answer p { max-width:550px; margin:0; padding:0 10px 0 53px; color:#c3c1b9; font-size:14px; line-height:1.45; }.faq-item.is-open .faq-answer { grid-template-rows:1fr; }.faq-item.is-open .faq-answer p { padding-bottom:26px; }
.footer { overflow:hidden; color:var(--paper); background:var(--ink); padding:50px clamp(18px,3vw,52px) 24px; position:relative; }.footer-meta { position:relative; z-index:1; display:grid; grid-template-columns:1.3fr 1fr 1fr auto; gap:25px; padding-bottom:65px; font-size:12px; }.footer-meta p { font-size:17px; font-weight:700; margin-bottom:5px; }.footer-meta span { color:#b9b9b1; }.footer-meta .footer-action { position:relative; display:inline-flex; align-items:center; width:max-content; margin-bottom:8px; color:var(--paper); background:none; border:0; padding:0; font:inherit; line-height:inherit; text-align:left; }.footer-meta .footer-action:after { content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px; background:var(--acid); transform:scaleX(0); transform-origin:right; transition:transform .25s var(--ease),opacity .25s var(--ease); opacity:.86; pointer-events:none; }.footer-meta .footer-action:is(:hover,:focus-visible):after { transform:scaleX(1); transform-origin:left; opacity:1; }.footer-meta .footer-action:active:after { opacity:.7; }.footer-meta .footer-back-top { gap:7px; margin-bottom:0; font:500 10px var(--mono); text-transform:uppercase; letter-spacing:.08em; align-self:start; }.footer-meta .footer-back-top .ui-icon { transition:transform .25s var(--ease); }.footer-meta .footer-back-top:is(:hover,:focus-visible) .ui-icon { transform:translateY(-1px); }.footer-word { color:var(--acid); font-size:clamp(115px,20.5vw,395px); letter-spacing:-.125em; margin-left:-.065em; font-weight:900; line-height:.64; white-space:nowrap; user-select:none; }.copyright { position:relative; z-index:1; margin:55px 0 0; color:#aaa9a1; font:400 9px var(--mono); letter-spacing:.04em; }
.contact-trigger { position:fixed; z-index:40; bottom:max(18px,env(safe-area-inset-bottom)); right:clamp(18px,3vw,48px); min-width:120px; min-height:54px; border:0; background:var(--acid); color:var(--ink); padding:0 16px 0 21px; display:flex; align-items:center; justify-content:space-between; gap:20px; font-size:12px; font-weight:800; box-shadow:0 10px 24px rgba(0,0,0,.17); transition:transform .3s var(--ease),box-shadow .3s var(--ease); }.contact-trigger:hover { transform:translateY(-4px); box-shadow:0 16px 35px rgba(0,0,0,.22); }.contact-layer { visibility:hidden; position:fixed; z-index:60; inset:0; }.contact-layer.is-open { visibility:visible; }.contact-scrim { opacity:0; position:absolute; inset:0; background:rgba(15,15,13,.52); backdrop-filter:blur(3px); transition:opacity .45s var(--ease); }.contact-layer.is-open .contact-scrim { opacity:1; }.contact-panel { position:absolute; right:clamp(18px,3vw,48px); bottom:max(18px,env(safe-area-inset-bottom)); width:min(790px,calc(100vw - 36px)); max-height:calc(100svh - 36px); overflow:auto; color:var(--ink); background:var(--acid); transform:scale(.12); opacity:0; transform-origin:calc(100% - 66px) calc(100% - 27px); transition:transform var(--modal-open-dur) var(--ease),opacity .32s var(--ease); box-shadow:0 25px 85px rgba(0,0,0,.28); }.contact-layer.is-open .contact-panel { opacity:1; transform:scale(1); }.contact-content { padding:clamp(55px,7vw,90px); opacity:0; transform:translateY(24px); transition:opacity .38s .23s var(--ease),transform .45s .23s var(--ease); }.contact-layer.is-open .contact-content { opacity:1; transform:none; }.close-contact { position:absolute; z-index:2; right:20px; top:18px; color:var(--ink); background:none; border:0; font:500 11px var(--mono); display:flex; gap:8px; align-items:center; }.contact-panel h2 { font-size:clamp(36px,5vw,75px); letter-spacing:-.075em; line-height:.83; margin:0; }.contact-intro { margin:28px 0 35px; max-width:380px; font-size:15px; line-height:1.4; }.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }.form-grid > label:last-child { grid-column:1/-1; }.contact-panel label { font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; display:block; margin-bottom:18px; }.contact-panel input,.contact-panel select,.contact-panel textarea { color:var(--ink); width:100%; border:0; border-bottom:1px solid rgba(23,24,22,.52); border-radius:0; outline:0; padding:8px 0; background:transparent; font-size:15px; letter-spacing:0; text-transform:none; transition:border-color .2s var(--ease); }.contact-panel textarea { resize:vertical; min-height:65px; }.contact-panel input:focus,.contact-panel select:focus,.contact-panel textarea:focus { border-color:var(--ink); border-bottom-width:2px; }.checkbox { display:flex !important; align-items:flex-start; gap:10px; font:500 10px/1.35 var(--display) !important; text-transform:none !important; letter-spacing:0 !important; max-width:480px; }.checkbox input { width:15px; height:15px; flex:none; margin:0; accent-color:var(--ink); }.form-message { min-height:20px; font-size:12px; font-weight:600; margin:4px 0 14px; }.form-message.error { color:#8f1613; }.form-message.notice { color:#4b471a; }.form-submit { min-width:205px; }.contact-alternative { margin:26px 0 0; font-size:12px; }.contact-alternative a { text-decoration:underline; text-underline-offset:3px; }

/* Calm long-form legal reading layer; it reuses the existing modal mechanics without changing the page composition. */
.legal-layer { visibility:hidden; position:fixed; z-index:70; inset:0; }.legal-layer.is-open { visibility:visible; }.legal-scrim { opacity:0; position:absolute; inset:0; background:rgba(15,15,13,.56); backdrop-filter:blur(3px); transition:opacity .32s var(--ease); }.legal-layer.is-open .legal-scrim { opacity:1; }.legal-panel { position:absolute; top:18px; right:clamp(18px,3vw,48px); bottom:max(18px,env(safe-area-inset-bottom)); width:min(760px,calc(100vw - 36px)); overflow:auto; color:var(--ink); background:var(--paper); opacity:0; transform:translateY(20px); transition:opacity .3s var(--ease),transform .42s var(--ease); box-shadow:0 25px 85px rgba(0,0,0,.28); }.legal-layer.is-open .legal-panel { opacity:1; transform:none; }.close-legal { position:sticky; z-index:2; top:16px; float:right; margin:16px 20px 0 0; color:var(--ink); background:var(--paper); border:0; font:500 11px var(--mono); display:flex; gap:8px; align-items:center; }.legal-content { clear:both; max-width:650px; padding:clamp(44px,6vw,78px); }.legal-content .eyebrow { margin-bottom:22px; }.legal-content h2 { margin:0; font-size:clamp(42px,5.5vw,68px); letter-spacing:-.075em; line-height:.88; }.legal-intro { max-width:430px; margin:24px 0 8px; font-size:17px; line-height:1.35; }.legal-status { margin:0 0 46px; color:rgba(23,24,22,.62); font:500 10px var(--mono); letter-spacing:.06em; text-transform:uppercase; }.legal-content section { padding:23px 0; border-top:1px solid var(--line); }.legal-content h3 { margin:0 0 10px; font-size:18px; letter-spacing:-.04em; }.legal-content p { max-width:610px; margin:0; font-size:14px; line-height:1.55; }.legal-content a { text-decoration:underline; text-underline-offset:3px; }.legal-content a:hover { color:var(--coral); }
@media (max-width:760px) { .legal-panel { top:auto; right:0; bottom:0; width:100%; max-height:92svh; }.close-legal { top:0; margin:15px 17px 0 0; }.legal-content { padding:58px 22px 34px; }.legal-content h2 { font-size:48px; }.legal-intro { font-size:16px; }.legal-content section { padding:20px 0; }.legal-content p { font-size:14px; } }
@media (prefers-reduced-motion: reduce) { .legal-panel { transform:none; }.legal-layer:not(.is-open) { display:none; } }
@keyframes mark-in { from { transform:scaleX(0); } } @keyframes scan { 0% { transform:translateX(-110%); } 65%,100% { transform:translateX(110%); } }
@media (max-width:760px) { .grain { opacity:.05; } .site-header { height:65px; padding:17px 18px; }.desktop-nav { display:none; }.menu-button { display:flex; gap:9px; align-items:center; color:inherit; background:transparent; border:0; padding:8px 0; font-size:11px; font-weight:700; }.menu-button i,.menu-button:after { content:''; width:19px; height:1px; background:currentColor; display:block; transition:transform .3s var(--ease); }.menu-button i { position:relative; }.menu-button[aria-expanded='true'] i { transform:rotate(45deg); }.menu-button[aria-expanded='true']:after { transform:rotate(-45deg) translate(4px,-4px); }.mobile-menu { position:absolute; top:100%; left:0; right:0; color:var(--ink); background:var(--paper); padding:18px; box-shadow:0 16px 30px rgba(0,0,0,.12); }.mobile-menu[hidden] { display:none; }.mobile-menu a,.mobile-menu button { display:block; color:var(--ink); background:none; border:0; width:100%; padding:15px 0; border-bottom:1px solid var(--line); text-align:left; font-size:23px; font-weight:700; letter-spacing:-.04em; }.mobile-menu button { border:0; display:flex; justify-content:space-between; }.hero { min-height:100svh; }.hero-video { object-position:58% 50%; }.hero-copy { padding:120px 18px 75px; justify-content:flex-end; }.hero-copy .eyebrow { margin-bottom:25px; } h1 { font-size:clamp(58px,18vw,96px); line-height:.79; }.hero-bottom { flex-direction:column; align-items:flex-start; margin-top:40px; gap:20px; }.hero-bottom p { max-width:260px; }.scroll-cue { bottom:24px; }.section { padding:90px 18px; }.intro { min-height:auto; }.intro:after { font-size:350px; }.intro-title { font-size:clamp(42px,12.4vw,64px); }.intro-tail { grid-template-columns:1fr 75px; gap:15px; padding-top:55px; }.intro-tail p { font-size:15px; }.section-head { grid-template-columns:1fr; }.section-head h2,.why h2,.process h2,.local h2,.faq h2,.closing h2 { font-size:clamp(47px,13vw,70px); }.section-head>p:last-child { margin-top:12px; }.services { min-height:auto; padding-bottom:60px; }.service-stage { min-height:420px; margin-top:50px; }.service-card { min-height:420px; grid-template-columns:1fr; padding:25px; }.service-card h3 { font-size:clamp(45px,13vw,68px); }.service-detail { border-left:0; border-top:1px solid rgba(23,24,22,.35); padding:17px 0 0; max-width:none; }.service-detail p { margin-bottom:12px; font-size:17px; }.service-controls { justify-content:space-between; }.why { display:block; }.order-board { min-height:375px; margin:50px 0; }.why-copy { max-width:350px; }.why-copy p { font-size:24px; }.process { padding-bottom:0; }.process-top { display:block; }.process-top h2 { margin-top:32px; }.process-list { display:block; margin-top:65px; }.process-list li { min-height:190px; padding:20px 0 25px !important; border-right:0; border-bottom:1px solid var(--ink); }.process-list li:hover { transform:none; }.process-list h3 { margin:42px 0 10px; font-size:33px; }.local-grid { grid-template-columns:1fr; gap:36px; }.local-grid>div { padding:0; max-width:360px; }.local-tape { margin:75px -18px 0; }.faq { display:block; }.faq-title p:last-child { margin-bottom:50px; }.faq-question { grid-template-columns:34px 1fr 28px; font-size:18px; padding:19px 0; }.faq-answer p { padding-left:44px; }.closing { min-height:65svh; padding:100px 18px; }.footer { padding:40px 18px 20px; }.footer-meta { grid-template-columns:1fr 1fr; gap:30px 18px; padding-bottom:70px; }.footer-meta [data-back-top] { grid-column:1/-1; margin-top:10px; }.footer-word { font-size:25vw; }.contact-trigger { right:18px; bottom:max(16px,env(safe-area-inset-bottom)); min-width:112px; }.contact-panel { right:0; bottom:0; width:100%; max-height:92svh; transform-origin:calc(100% - 74px) 100%; }.contact-content { padding:64px 22px 32px; }.form-grid { grid-template-columns:1fr; gap:0; }.contact-panel h2 { font-size:43px; }.contact-intro { margin:20px 0 28px; }.close-contact { top:15px; right:17px; }.contact-scrim { backdrop-filter:blur(2px); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; }.grain { opacity:.045; }.hero-video { display:none; }.hero { background:linear-gradient(130deg,#23271b,#4a5733); }.hero-shade { background:linear-gradient(0deg,rgba(10,10,9,.62),transparent); } *,*:before,*:after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }.service-card.is-past,.service-card.is-future { display:none; }.service-card.is-active { position:relative; }.contact-panel { transform:scale(1); }.contact-layer:not(.is-open) { display:none; } }
@media (min-width:761px) and (max-height:820px) { .intro-tail { padding-top:clamp(45px,4vw,60px); } }
@media (max-width:760px) { .intro-tail { grid-template-columns:1fr; width:min(100%,354px); gap:22px; margin-left:0; margin-right:0; }.intro-tail>p { font-size:15px; }.local-service-panel-anchor,.local-service-panel-reveal { min-height:174px; }.local-service-panel { width:min(100%,286px); min-height:174px; margin-left:auto; padding:17px 18px 16px; }.local-service-panel__label { font-size:9px !important; padding-bottom:12px; }.local-service-panel__label span { width:24px; }.local-service-panel__scope { font-size:22px !important; }.local-service-panel__detail { font-size:8px !important; } }
@keyframes intro-panel-unfurl { 0% { clip-path:inset(100% 0 0 0); transform:translateY(8px); } 72% { clip-path:inset(0 0 0 0); transform:translateY(0); } 100% { clip-path:inset(0 0 0 0); transform:none; } }
@media (min-width:761px) { .intro { overflow:visible; z-index:1; }.intro-tail { position:static; grid-template-columns:minmax(0,1fr) clamp(280px,22vw,310px); }.local-service-panel-anchor { position:absolute; z-index:2; right:var(--floating-contact-safe-zone); bottom:0; width:clamp(280px,22vw,310px); height:238px; min-height:0; }.local-service-panel-reveal { position:absolute; inset:0; min-height:0; overflow:clip; }.local-service-panel-anchor.is-unfurl-ready .local-service-panel-reveal { clip-path:inset(100% 0 0 0); transform:translateY(8px); }.local-service-panel-anchor.is-unfurled .local-service-panel-reveal { animation:intro-panel-unfurl .84s cubic-bezier(.22,1,.36,1) forwards; }.local-service-panel { min-height:0; }.services { position:relative; z-index:0; } }
@media (max-width:760px) {
  :root { --floating-contact-width:118px; --floating-contact-right:max(18px,env(safe-area-inset-right)); --floating-contact-gap:37px; }

  /* The seam panel earns its scale by ending at the transition, not by adding empty mobile padding. */
  .intro { padding-bottom:0; }
  .intro-tail { padding-bottom:0; }

  /* The service stage may stage off-screen pages; its active text must still shrink inside its own panel. */
  .service-stage { overflow:clip; }
  .service-card,.service-card h3,.service-detail { min-inline-size:0; }
  .service-card h3 { max-inline-size:100%; font-size:clamp(42px,12vw,54px); letter-spacing:-.07em; overflow-wrap:anywhere; hyphens:auto; }
}

@media (max-width:359px) {
  .service-card { padding:22px; }
  .service-card h3 { font-size:clamp(40px,12vw,46px); }
  /* Keep the local conversion CTA physically clear of the persistent 118px contact control. */
  .local-grid .button { width:144px; min-width:0; padding-inline:12px; gap:9px; font-size:11px; white-space:nowrap; }
}

@media (max-width:760px) {
  .brand-logo { width:68px; height:30px; -webkit-mask-size:79.25px 79.25px; mask-size:79.25px 79.25px; -webkit-mask-position:-8.08px -24.57px; mask-position:-8.08px -24.57px; }
  .footer-meta .brand-logo { width:68px; height:30px; -webkit-mask-size:79.25px 79.25px; mask-size:79.25px 79.25px; -webkit-mask-position:-8.08px -24.57px; mask-position:-8.08px -24.57px; margin-bottom:7px; }
}

@media (max-width:760px) and (max-height:500px) {
  :root { --floating-contact-gap:48px; }
}

/* Mobile is a recomposition: shared dimensions keep every local layout inside a deliberate page frame. */
@media (max-width:760px) {
  :root {
    --mobile-gutter:clamp(18px,4.6vw,22px);
    --mobile-section-space:clamp(76px,18vw,90px);
    --mobile-contact-clearance:calc(var(--floating-contact-height,54px) + max(16px,env(safe-area-inset-bottom)) + 20px);
  }

  .site-header { padding-inline:var(--mobile-gutter); }
  .mobile-menu { padding-inline:var(--mobile-gutter); }
  .hero-copy,.section,.footer { padding-inline:var(--mobile-gutter); }
  .section { padding-block:var(--mobile-section-space); }
  .intro { padding-bottom:0; }
  .services { padding-bottom:60px; }
  .why { padding-bottom:106px; }
  .process { padding-bottom:0; }
  main [id] { scroll-margin-top:calc(65px + 16px); }
  .section :is(.section-head,.why-intro,.order-board,.local-grid,.faq-title,.faq-list),.hero-copy { min-width:0; max-width:100%; }

  /* A large final word can be complete without becoming a conventional small logo. */
  .footer { padding-bottom:calc(110px + env(safe-area-inset-bottom)); }
  .footer-meta { padding-bottom:28px; }
  .footer-word { margin-left:0; font-size:clamp(67px,21vw,90px); letter-spacing:-.12em; }
  .copyright { margin-top:8px; }
}

/* Short landscape needs its own vertical composition; it may scroll, but it must never crop the headline. */
@media (max-width:760px) and (max-height:500px) {
  .hero { min-height:480px; }
  .hero-copy { min-height:480px; padding-top:82px; padding-bottom:42px; justify-content:flex-start; }
  .hero-copy .eyebrow { margin-bottom:12px; }
  .hero h1 { font-size:clamp(50px,11.5vw,68px); line-height:.78; }
  .hero-bottom { flex-direction:row; align-items:flex-end; gap:18px; margin-top:18px; }
  .hero-bottom p { max-width:220px; font-size:13px; }
  .hero .scroll-cue { top:72px; right:var(--mobile-gutter); bottom:auto; }
  .order-board { min-height:300px; }
  .pos-4,.pos-5 { top:62%; }
  .pos-5 { right:12%; }
  .board-caption { right:calc(var(--floating-contact-safe-zone) + 12px); }
}

@media (min-width:761px) and (max-width:900px) {
  /* Preserve the approved tablet/desktop composition while giving the document enough terminal scroll room for fixed Kontakt. */
  .footer { padding-bottom:110px; }
}

/* Non-interactive trap field plus existing form-status palette. */
.honeypot { position:absolute !important; width:1px !important; height:1px !important; margin:-1px !important; padding:0 !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap !important; border:0 !important; pointer-events:none !important; }.form-message.success { color:#315f31; }
/* Footer credit is centered against the page, independently of the left copyright line. */
.footer-bottom { position:relative; z-index:1; min-height:1.2em; margin-top:55px; color:#aaa9a1; font:400 9px var(--mono); letter-spacing:.04em; }
.footer-bottom .copyright,.footer-credit { margin:0; color:inherit; font:inherit; letter-spacing:inherit; }
.footer-bottom .copyright { position:static; z-index:auto; }
.footer-credit { position:absolute; z-index:2; left:50%; top:0; transform:translateX(-50%); white-space:nowrap; }
.footer-credit a { display:inline-block; position:relative; pointer-events:auto; color:var(--acid); font-size:1.14em; font-weight:700; line-height:1; vertical-align:baseline; border-bottom:0; transition:color .25s var(--ease); }
.footer-credit a:after { content:''; position:absolute; left:0; right:0; bottom:-3px; height:1px; background:currentColor; pointer-events:none; transform:scaleX(1); transform-origin:left; transition:bottom .25s var(--ease),opacity .25s var(--ease); opacity:.78; }
.footer-word { pointer-events:none; }
.footer-credit a:hover,.footer-credit a:focus-visible { color:var(--acid); }
.footer-credit a:hover:after,.footer-credit a:focus-visible:after { bottom:-2px; opacity:1; }
@media (max-width:760px) {
  .footer-bottom { display:grid; gap:8px; min-height:0; padding-right:calc(var(--floating-contact-safe-zone) + 4px); }
  .footer-credit { position:relative; transform:none; white-space:normal; }
}