/* Pixelküste · restrained motion, clear routes and coastal glass. */
:root{--red:#ed002b;--ease:cubic-bezier(.22,1,.36,1)}
html{scroll-padding-top:122px;scrollbar-color:#708e9e #203541}
body{background:radial-gradient(ellipse at 4% 35%,#52708419,transparent 55%),var(--bg)}
button{color:inherit}button:disabled{cursor:default}
.site-header{background:#293f4ceb;transition:box-shadow .25s,background .25s}
.site-header.is-scrolled{background:#293f4cf5;box-shadow:0 8px 30px #0f263331}
.site-header:after{content:'';position:absolute;left:0;bottom:-1px;width:100%;height:2px;transform:scaleX(var(--scroll-progress,0));transform-origin:left;background:linear-gradient(90deg,#ed002b,#ff687f);opacity:.7;pointer-events:none}
.header-inner{min-height:98px}.brand .logo-emblem{width:70px;height:70px}.wordmark strong{font-size:34px}
.nav>a:not(.button){text-decoration:none;position:relative}
.nav>a:not(.button):after{content:'';height:2px;position:absolute;left:0;right:0;bottom:8px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.nav>a[aria-current]:after,.nav>a:not(.button):hover:after{transform:scaleX(1)}
.hand-underline{display:inline-block;vertical-align:baseline;line-height:inherit;white-space:nowrap;position:relative;isolation:auto}
.hand-underline:after{left:-1%;right:-1%;bottom:.025em;height:.065em;min-height:3px;transform:rotate(-1.2deg);z-index:0;pointer-events:none;border-radius:60% 35% 40% 20%}
.hero-copy h1{font-size:clamp(44px,5.05vw,72px);line-height:1.12}
.hero-copy{max-width:720px;width:59%}.hero-copy .eyebrow{font-size:10px;letter-spacing:2.5px}
.home-hero{min-height:610px}.hero-inner{min-height:610px}.hero-art img{object-position:70% 49%}
.hero-note{font-size:29px;right:22%;top:65px}.home-hero>.section-wave{height:60px}
.home-services{padding-top:14px;padding-bottom:36px}
.gateway,.gateway:nth-child(2){transform:none;transition:border-color .3s,box-shadow .3s}
.gateway{border-radius:30px 20px 30px 20px}.gateway>img{transition:transform .7s var(--ease)}
.gateway:hover,.gateway:focus-within{border-color:#a9c4cf80;box-shadow:0 3px 0 #accddb29 inset,0 14px 35px #10253226}
.gateway:hover>img,.gateway:focus-within>img{transform:scale(1.025)}
.button .icon,.text-link .icon{transition:transform .25s var(--ease)}
.button:hover .icon,.text-link:hover .icon{transform:translate(2px,-2px)}
.text-link:hover{color:#ff9baa;text-decoration-thickness:1px}
.button.primary:hover{background:#d60027;border-color:#d60027;box-shadow:0 8px 28px #ed002b26}
/* The full image height preserves hair, beard and shoulders; no zoom or painted line. */
.page-index .about-teaser{grid-template-columns:1.07fr 1fr;gap:64px;padding-block:60px 68px}
.page-index .portrait-frame{height:auto;width:100%;aspect-ratio:1.5;border-radius:32px 32px 66px 32px;overflow:hidden;isolation:isolate;box-shadow:0 22px 60px #132b352b}
.page-index .portrait-frame img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;transform:none}
.page-index .portrait-frame:before{display:none}
.portrait-frame:after{content:'';position:absolute;inset:48% 0 0;background:linear-gradient(transparent,#122a3b9c);pointer-events:none}
.portrait-frame figcaption{position:absolute;left:28px;right:20px;bottom:22px;z-index:2;font-size:15px;font-weight:700;line-height:1.4}
.portrait-frame figcaption span{font-size:12px;font-weight:400;display:block;color:#e5eef2;margin-top:3px}
.page-index .about-copy h2{font-size:clamp(36px,3.6vw,52px);white-space:normal}
.page-index .about-copy>p:not(.eyebrow){font-size:20px;line-height:1.5}
.page-index .about-copy>.pixels{opacity:.18;left:-48px}
.page-index .about-teaser>.section-wave{height:35px;bottom:0}
.personal-values{margin-top:30px}.personal-values>div{font-size:12px}.personal-values .icon{width:30px;height:30px}
.detail-hero.portrait-hero .detail-image{height:auto;aspect-ratio:4/5;max-width:440px;justify-self:end;border-radius:35px 35px 70px 35px}
.detail-hero.portrait-hero .detail-image>img{object-fit:contain;object-position:center;transform:none;border-radius:inherit}
.detail-hero.portrait-hero .detail-image:after{display:none}
.contact-portrait{height:220px;border-radius:24px;background:linear-gradient(120deg,#3b5665,#304a59)}
.contact-portrait img{width:43%;object-position:center top}
.contact-portrait figcaption{left:49%;right:18px}.contact-portrait strong{font-size:22px;hyphens:auto}
.channel{transition:background .25s,border-color .25s,padding .25s}
.channel:hover{background:#c6e1ee08;border-color:#b9d0da60;padding-left:8px;padding-right:8px}
.channel:first-of-type>.icon:first-child{color:#61d29a;width:28px;height:28px}
.channel:first-of-type:hover>.icon:first-child{filter:drop-shadow(0 0 6px #61d29a40)}
/* Porthole: fixed water behind a milky pane, a fine metal rim and quiet reflection. */
.about-personal{background:linear-gradient(115deg,#1d354028,#425e6d20);padding-block:70px}
.personal-grid{grid-template-columns:1fr .83fr;gap:85px}
.porthole{position:relative;isolation:isolate;aspect-ratio:1;width:100%;max-width:440px;justify-self:end;padding:18px;filter:drop-shadow(0 20px 28px #10242f4d)}
.porthole-rim{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 10deg,#2c4350 0deg,#8ca5b0 45deg,#d5e3e8 52deg,#627f8e 70deg,#304b5a 120deg,#172e3c 170deg,#a7bdc5 227deg,#4e6b7b 250deg,#d1e0e5 290deg,#2c4350 360deg);box-shadow:0 0 0 1px #abc3d14d,inset 0 2px 3px #e1edf065,inset 0 -4px 6px #0d233ab3}
.porthole-rim:after{content:'';position:absolute;inset:7px;border:1px solid #cee4ec4d;border-radius:50%;box-shadow:inset 0 0 0 3px #1b344054}
.porthole-rim i{position:absolute;left:calc(50% - 3px);top:calc(50% - 3px);width:6px;height:6px;background:linear-gradient(140deg,#c5d6de,#334d5b 75%);border-radius:50%;transform:rotate(calc(var(--bolt)*45deg)) translateY(calc(-1 * var(--porthole-radius,205px)));box-shadow:0 1px 2px #142c3b,0 -1px 1px #c3d8e17d}
.porthole-view{position:relative;width:100%;height:100%;border-radius:50%;overflow:hidden;background:#68828d;box-shadow:0 0 0 2px #142e3d,inset 0 0 15px #081e3470;isolation:isolate}
.porthole-water{position:absolute;inset:0;background:url('coast-photo-v4.webp') center 58%/cover no-repeat}
.porthole-water img{width:100%;height:100%;object-fit:cover;object-position:55% center}
.porthole-glass{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(126deg,#edf6ff28 0%,#e8f4ff14 24%,#fff4 25%,#fff0 26%,#fff0 54%,#edf9ff13 55%,#fff2 59%,#fff0 60%),radial-gradient(ellipse at var(--glint-x,28%) var(--glint-y,18%),#f2fbff36,transparent 56%),linear-gradient(#dceaf214,#bed9e211);backdrop-filter:blur(.65px);box-shadow:inset 0 0 25px #e9f8ff24,inset 0 0 6px #001d3190;pointer-events:none;transition:opacity .3s}
.porthole figcaption{position:absolute;left:18%;right:18%;bottom:15%;text-align:center;z-index:3;text-shadow:0 2px 14px #112e3e;font-size:12px;line-height:1.5}
.porthole figcaption span{display:block;color:#f0f8fb;font-size:12px;margin-bottom:5px}
.porthole figcaption strong{display:block;font-size:clamp(19px,2vw,27px);line-height:1.15}
.porthole-view:after{content:'';position:absolute;inset:55% 0 0;background:linear-gradient(transparent,#1438499c);z-index:1;pointer-events:none}
@media(min-width:961px) and (prefers-reduced-motion:no-preference){
 .porthole-water{background-attachment:fixed}
 .porthole-water img{opacity:0}
}
/* Progressive enhancement: no content is hidden until an observer is ready. */
.motion-ready [data-reveal]{transition:opacity .65s var(--ease),translate .65s var(--ease);transition-delay:var(--reveal-delay,0ms)}
.motion-ready [data-reveal].reveal-pending{opacity:0;translate:0 15px}
.service-nav a[aria-current="location"]{color:#fff;text-decoration-color:var(--red)}
.faq details,.service-question,.price-conditions{transition:border-color .25s,background .25s}
.faq details[open]{background:#e5f0f703;border-color:#8faebb66}
summary{list-style:none;position:relative;padding-right:35px}summary::-webkit-details-marker{display:none}
summary:after{content:'+';position:absolute;right:6px;top:50%;translate:0 -50%;font-size:25px;font-weight:400;color:var(--link);transition:transform .2s}
details[open]>summary:after{transform:rotate(45deg)}
@keyframes detail-entry{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:no-preference){details[open]>p{animation:detail-entry .25s var(--ease)}}
/* Project detail overlay keeps the page and scroll position in place. */
.project-preview{position:relative;isolation:isolate;width:100%;aspect-ratio:1.6;display:block;padding:0;border:1px solid #b2ced92a;border-radius:24px 18px 24px 18px;background:#344d5c;overflow:hidden;cursor:pointer;text-align:left;box-shadow:0 5px 20px #152c381a}
.project-preview>img{width:100%;height:100%;object-fit:cover;transition:transform .65s var(--ease),filter .4s}
.project-preview.product>img{object-fit:contain;background:#77949d;padding:25px}
.project-preview.logo>img{object-fit:contain;background:#1c303b;padding:32px}
.project-preview .project-motif{z-index:2;bottom:12px;right:12px;transition:opacity .2s}
.project-open{position:absolute;left:17px;bottom:16px;padding:9px 13px;background:#1e3444b8;border:1px solid #d3e9ef4d;backdrop-filter:blur(12px);border-radius:999px;display:flex;align-items:center;gap:14px;font-size:13px;opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s var(--ease);color:white}
.project-open .icon{width:16px;height:16px}
.project-preview:hover>img{transform:scale(1.025);filter:brightness(.91)}
.project-preview:hover .project-open,.project-preview:focus-visible .project-open{opacity:1;transform:none}
.project-preview:hover .project-motif,.project-preview:focus-visible .project-motif{opacity:0}
.project-card:hover .project-copy h3{color:#fff}
.project-dialog{padding:0;border:1px solid #9ebcc94d;border-radius:28px;background:#293f4c;color:var(--ink);width:min(960px,92vw);max-height:90dvh;overflow:auto;overscroll-behavior:contain;box-shadow:0 30px 100px #06192380}
.project-dialog::backdrop{background:#0c1f2be0;backdrop-filter:blur(8px)}
.project-dialog[open]{display:grid;grid-template-columns:.9fr 1.1fr}
.dialog-close{position:absolute;right:14px;top:14px;z-index:5;display:grid;place-items:center;border-radius:50%;width:42px;height:42px;border:1px solid #b4cad85c;background:#203642e6;color:#fff}
.dialog-close:hover{background:#3f5a6b}
.dialog-image{display:flex;align-items:center;background:#203642;min-height:400px;padding:24px}
.dialog-image>img{width:100%;height:auto;max-height:420px;object-fit:contain;border-radius:12px}
.dialog-copy{padding:44px 32px 32px}.dialog-copy .eyebrow{font-size:9px;letter-spacing:1.5px;margin:0 0 17px;gap:12px}.dialog-copy .eyebrow:after{width:30px}
.dialog-copy h2{font-size:36px;line-height:1.12;margin-bottom:18px}.dialog-copy .lead{font-size:17px;line-height:1.5}
.project-facts{margin:22px 0;font-size:14px;line-height:1.6}.project-facts dt{font-weight:700;color:var(--ink);margin-top:16px}.project-facts dd{margin:5px 0;color:var(--muted)}
.dialog-actions{display:flex;align-items:flex-start;flex-direction:column;gap:12px}.dialog-actions .button{font-size:14px;min-height:46px}.dialog-actions .text-link{font-size:13px;gap:10px}
.dialog-copy .asset-note{font-size:10px;line-height:1.6;margin-top:18px}
body.has-modal{overflow:hidden}
.form-result{width:100%;padding:23px;border:1px solid #9ed6c675;border-radius:18px;background:#1f46494d;line-height:1.5}
.form-result>strong{display:block;font-size:23px;margin-bottom:12px}.form-result p{color:#e5f1f4;font-size:16px}.form-result small{display:block;margin-top:14px;font-size:12px;color:#cae1e7}.form-result .text-link{border:0;background:none;font-size:14px;margin-top:10px;padding-inline:0}
.form-hint{font-size:12px}.form-context:empty{display:none}.contact-form input,.contact-form textarea,.contact-form select{transition:background .2s,border-color .2s,box-shadow .2s}
.contact-form input:hover,.contact-form textarea:hover,.contact-form select:hover{border-color:#9bbdce80}
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{box-shadow:0 0 0 5px #a9d7ea0c}
.legal-preview-note{padding:16px 18px;border-left:2px solid #e94561;border-radius:0 9px 9px 0;background:#47637336;font-size:13px!important;margin-bottom:28px!important;line-height:1.7!important}
.site-footer{background:#213844;padding-block:30px 20px;border-top:1px solid #94b4c11a}
.footer-wave{display:none}.footer-meta{display:none}.footer-inner{gap:35px}.footer-brand .logo-emblem{width:60px;height:60px}.footer-brand .wordmark strong{font-size:29px}.footer-brand .wordmark small{font-size:11px}
.prototype-note{font-size:10px;color:#afc4cf96;line-height:1.5;width:min(1280px,90%);margin:23px auto 0}
@view-transition{navigation:auto}
@media(prefers-reduced-motion:no-preference){::view-transition-old(root){animation-duration:.12s}::view-transition-new(root){animation-duration:.2s}}
@media(max-width:1150px){
 .nav{gap:19px;font-size:14px}.wordmark strong{font-size:30px}.brand .logo-emblem{width:65px;height:65px}
 .page-index .about-teaser{gap:45px}.page-index .about-copy>p:not(.eyebrow){font-size:18px}.personal-grid{gap:55px}
 .porthole{max-width:390px}.porthole-rim i{--porthole-radius:181px}
}
@media(max-width:960px){
 .header-inner{min-height:88px}.brand .logo-emblem{width:59px;height:59px}.wordmark strong{font-size:29px}.wordmark small{font-size:10px}
 .home-hero,.hero-inner{min-height:580px}.hero-copy{width:70%}.hero-copy h1{font-size:clamp(43px,5.5vw,53px)}
 .hero-art{left:15%;border-radius:0}.hero-note{display:none}
 .page-index .about-teaser{gap:35px}.page-index .about-copy h2{font-size:35px}.page-index .about-copy>p:not(.eyebrow){font-size:17px}
 .personal-values{gap:6px;margin-top:23px}.personal-values>div{font-size:11px}
 .personal-grid{gap:40px;grid-template-columns:1fr .85fr}.personal-grid h2{font-size:36px}.personal-grid p:not(.eyebrow){font-size:16px}
 .porthole{padding:15px;max-width:350px}.porthole-rim i{--porthole-radius:calc(var(--porthole-size,350px)/2 - 7px)}
 .nav.open>a:not(.button):after{bottom:7px;right:auto;width:32px}.contact-portrait strong{font-size:20px}
}
@media(max-width:700px){
 html{scroll-padding-top:95px}.header-inner{min-height:82px}.brand .logo-emblem{width:54px;height:54px}.wordmark strong{font-size:27px}.wordmark small{font-size:9px}
 .home-hero{min-height:0}.hero-inner{min-height:760px;padding-top:33px;padding-bottom:335px;align-items:flex-start}
 .hero-copy{width:100%}.hero-copy h1{font-size:clamp(38px,8.2vw,55px);line-height:1.12}.hero-copy .eyebrow{font-size:9px;letter-spacing:1.7px}
 .hero-intro{font-size:19px;margin-top:24px}.hero-actions{gap:10px;margin-top:24px}.hero-actions .button{font-size:13px;padding:12px 17px}
 .hero-art{height:390px;left:0;right:0;top:auto;bottom:0;width:100%;border-radius:0}.hero-art>img{object-position:75% 45%}
 .hero-art:after{background:linear-gradient(var(--bg),#293f4cc9 10%,#293f4c1a 35%,transparent 60%)}.home-hero>.section-wave{height:35px}.home-hero:after{display:none}
 .home-services{padding-top:15px}.gateway,.gateway:nth-child(2){border-radius:25px 17px 25px 17px}
 .page-index .about-teaser{display:flex;flex-direction:column;padding-block:40px 50px;gap:30px}
 .page-index .portrait-frame{width:100%;height:auto;aspect-ratio:1.35;border-radius:28px 28px 54px 28px}
 .portrait-frame figcaption{left:22px;bottom:20px;font-size:14px}.portrait-frame figcaption span{font-size:11px}
 .page-index .about-copy h2{font-size:39px}.page-index .about-copy>p:not(.eyebrow){font-size:18px}.page-index .about-copy>.pixels{left:auto;right:0;opacity:.11}
 .page-index .about-teaser>.section-wave{display:none}.personal-values{margin-top:25px;gap:10px}.personal-values>div{font-size:12px}
 .detail-hero.portrait-hero .detail-image{max-width:370px;width:100%;align-self:center;height:auto;aspect-ratio:4/5;border-radius:28px 28px 55px 28px}
 .personal-grid{grid-template-columns:1fr;gap:36px}.personal-grid h2{font-size:37px}.personal-grid p:not(.eyebrow){font-size:17px}.about-personal{padding-block:45px}
 .porthole{justify-self:center;width:100%;max-width:370px;padding:16px}.porthole figcaption{bottom:16%}.porthole figcaption strong{font-size:22px}
 .porthole-rim i{--porthole-radius:calc(var(--porthole-size,350px)/2 - 8px)}
 .contact-portrait{height:230px}.contact-portrait strong{font-size:23px}.channel strong{font-size:21px}
 .project-preview{aspect-ratio:1.6}.project-open{opacity:1;transform:none;font-size:12px;padding:8px 11px;bottom:13px;left:13px}
 .project-motif{display:none}.project-preview.logo>img{padding:30px}.project-dialog{width:92vw;max-height:88dvh;border-radius:22px}
 .project-dialog[open]{display:block}.dialog-image{min-height:0;padding:20px 40px;background:#203642}.dialog-image img{height:155px;object-fit:contain}
 .dialog-copy{padding:24px}.dialog-copy h2{font-size:31px}.dialog-copy .eyebrow{font-size:9px}.dialog-copy .lead{font-size:16px}.project-facts{font-size:14px}
 .dialog-close{width:38px;height:38px;top:10px;right:10px}.dialog-actions .button{min-height:46px}
 .site-footer{padding-top:27px}.footer-inner{gap:24px}.footer-brand .logo-emblem{width:56px;height:56px}.footer-brand .wordmark strong{font-size:27px}.site-footer nav{font-size:12px;gap:20px}
 .prototype-note{font-size:9px;margin-top:22px}.contact-cta>h2{font-size:37px}.legal-preview-note{font-size:12px!important}
}
@media(max-width:380px){
 .header-inner{min-height:77px}.brand .logo-emblem{width:48px;height:48px}.wordmark strong{font-size:24px}.wordmark small{font-size:9px}
 .hero-inner{min-height:810px}.hero-copy h1{font-size:38px}.hero-actions{flex-direction:column;align-items:flex-start}.hero-art{height:370px}.page-index .about-copy h2{font-size:34px}
 .porthole figcaption strong{font-size:20px}.porthole figcaption span{font-size:11px}.contact-portrait strong{font-size:21px}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}
 [data-reveal]{opacity:1!important;translate:0 0!important}.porthole-water{background-attachment:scroll}.porthole-water img{opacity:1}.gateway:hover>img,.project-preview:hover>img{transform:none}
 ::view-transition-old(root),::view-transition-new(root){animation:none!important}
}
@media print{.project-dialog,.project-open,.prototype-note,.porthole-rim,.porthole-glass{display:none!important}.project-preview{border:0}.porthole{filter:none}.porthole-water img{opacity:1}.motion-ready [data-reveal]{opacity:1;translate:0 0}.portrait-frame figcaption{display:none}}
/* Text decoration follows the word's baseline even when the heading wraps. */
.hand-underline{text-decoration-line:underline;text-decoration-color:var(--red);text-decoration-thickness:.065em;text-underline-offset:.12em;text-decoration-skip-ink:none}
.hand-underline:after{display:none}
.porthole-rim i{transform:rotate(calc(var(--bolt)*45deg)) translateY(calc(-1 * (var(--porthole-size,440px)/2 - 9px)))}
/* Explicit minimums prevent large images from widening their grid tracks. */
.detail-hero{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.detail-copy,.detail-image{min-width:0}
.detail-hero.portrait-hero .detail-image{width:100%}
.section-heading>div:first-child{flex:1;max-width:none}
.contact-portrait strong{hyphens:none;word-break:normal}
.site-footer nav{flex-wrap:nowrap}
.hero-actions .button{flex-shrink:0}
@media(max-width:700px){.hero-actions .button{white-space:nowrap}.site-footer nav{gap:20px}}
#ebene5 .project-preview.logo>img{background:#e1e8eb}
.project-dialog[data-project="ebene5"] .dialog-image{background:#e1e8eb}
.site-footer nav a{white-space:nowrap}