:root{color-scheme:dark;--bg:#141414;--surface:#1b1b1b;--text:#ededed;--muted:#aaa;--line:#363636}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:25px}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.65 'Inter',Arial,sans-serif}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}a:focus-visible{outline:2px solid #fff;outline-offset:5px}.wrap{width:min(1160px,calc(100% - 80px));margin:auto}.skip{position:absolute;top:-100px;z-index:99;background:#222;padding:15px}.skip:focus{top:0}.header{height:104px;display:flex;align-items:center;justify-content:space-between;gap:25px}.brand img{width:82px;height:82px;object-fit:contain}nav{display:flex;gap:32px;font-size:14px}nav a,.header-phone{color:#ccc}nav a:hover,.header-phone:hover{color:white}.header-phone{font-size:14px}.hero{position:relative;min-height:560px;color:#fff;background:#222;overflow:hidden}.hero>img{position:absolute;width:100%;height:100%;object-fit:cover;object-position:50% 55%}.shade{position:absolute;inset:0;background:linear-gradient(90deg,#000b,#0007 45%,#0001)}.hero-content{position:relative;padding-top:100px;padding-bottom:100px}.eyebrow{font-size:12px;font-weight:700;letter-spacing:.13em;margin:0 0 25px;color:#ccc}h1{font-size:clamp(40px,4.8vw,64px);line-height:1.12;letter-spacing:-.035em;font-weight:700;margin:0 0 24px}h2{font-size:clamp(28px,3vw,40px);line-height:1.2;letter-spacing:-.03em;font-weight:700;margin:0 0 24px}.hero-content>p:not(.eyebrow){font-size:17px;color:#ddd}.actions{display:flex;gap:25px;align-items:center;flex-wrap:wrap;margin-top:30px}.button{display:inline-flex;align-items:center;justify-content:center;gap:11px;min-height:52px;padding:14px 20px;font-size:14px;border:1px solid #888;background:#252525;color:white}.button:hover{background:#383838;border-color:white}.button svg,.floating-wa svg{width:23px;height:23px;flex-shrink:0}.hero-link{font-size:14px;text-decoration:underline;text-underline-offset:6px}.section{padding-top:80px;padding-bottom:80px}.section-heading{margin-bottom:45px}.section-heading h2{margin:0}.project-group{margin:0 0 55px}.project-group:last-child{margin-bottom:0}.project-group>h3{font-size:16px;font-weight:700;color:#c9c9c9;margin:0 0 17px;padding-top:20px;border-top:1px solid var(--line)}.project-grid{display:grid;gap:14px}.project-grid.pair{grid-template-columns:repeat(2,minmax(0,1fr))}.project-grid.multi{grid-template-columns:repeat(6,minmax(0,1fr))}.multi .project{grid-column:span 2}.multi .project:nth-child(n+4){grid-column:span 3}.project{margin:0;min-width:0}.project a{display:block;background:#222}.project img{width:100%;height:350px;object-fit:cover}.multi .project:nth-child(n+4) img{height:420px}.pair img{height:360px}.single{max-width:760px}.single img{width:100%;height:auto;max-height:650px;object-fit:contain;object-position:left}.project a:hover{opacity:.9}.services{padding:65px 0;background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.service-layout{display:grid;grid-template-columns:.8fr 1.3fr;gap:80px}.service-intro p{color:var(--muted)}.service-list article{border-top:1px solid var(--line);padding:20px 0}.service-list article:first-child{border-top:0;padding-top:0}.service-list h3{font-size:19px;line-height:1.35;font-weight:700;margin:0 0 8px}.service-list p{color:var(--muted);margin:0;font-size:16px}.about{display:grid;grid-template-columns:1fr 1.2fr;gap:70px}.about-copy{color:var(--muted)}.about-copy p{margin-top:0}.text-link{display:inline-block;font-size:14px;color:#ddd;border-bottom:1px solid #777;padding-bottom:4px;margin-top:10px}.contact{background:var(--surface);border-top:1px solid var(--line);padding:65px 0}.contact .button{margin-top:6px}.contact-grid{display:grid;grid-template-columns:1fr 1.4fr 1fr;border-top:1px solid var(--line);margin-top:40px;padding-top:26px;gap:30px}.contact-grid span{font-size:12px;letter-spacing:.07em;color:var(--muted);display:block;margin-bottom:8px}.contact-grid a{font-size:16px;overflow-wrap:anywhere}.contact-grid p{margin:0;color:#ccc}.contact-grid a:hover{text-decoration:underline}footer{display:flex;justify-content:space-between;gap:25px;padding-top:25px;padding-bottom:100px;font-size:13px;color:var(--muted)}.floating-wa{position:fixed;right:24px;bottom:24px;z-index:20;display:flex;align-items:center;gap:10px;background:#292929;color:#fff;border:1px solid #aaa;border-radius:4px;padding:14px 19px;font-size:15px;min-height:54px;box-shadow:0 3px 18px #0005}.floating-wa:hover{background:#444}@media(max-width:950px){.wrap{width:calc(100% - 44px)}.header-phone{display:none}.service-layout{gap:40px}.project img{height:280px}.multi .project:nth-child(n+4) img{height:330px}.about{gap:35px}.contact-grid{grid-template-columns:1fr 1fr}}@media(max-width:600px){.wrap{width:calc(100% - 36px)}.header{height:86px;gap:12px}.brand img{width:66px;height:66px}nav{gap:15px;font-size:13px}.hero{min-height:500px}.hero-content{padding-top:80px;padding-bottom:65px}h1{font-size:42px}.hero-content>p:not(.eyebrow){font-size:16px;max-width:280px}.hero>img{object-position:65% center}.shade{background:#0008}.actions{gap:22px}.button{font-size:14px;padding:14px 16px}.section{padding-top:50px;padding-bottom:50px}.section-heading{margin-bottom:30px}.project-group{margin-bottom:35px}.project-grid.multi{grid-template-columns:repeat(2,minmax(0,1fr))}.multi .project,.multi .project:nth-child(n+4){grid-column:auto}.multi .project:first-child{grid-column:span 2}.project-grid{gap:10px}.project img,.multi .project:nth-child(n+4) img{height:240px}.multi .project:first-child img{height:380px}.project-grid.pair{grid-template-columns:1fr}.pair img{height:auto}.single img{height:auto;max-height:560px}.services,.contact{padding:45px 0}.service-layout,.about{grid-template-columns:1fr;gap:22px}.contact-grid{grid-template-columns:1fr;gap:22px;margin-top:30px}footer{flex-direction:column;gap:8px;padding-bottom:105px}.floating-wa{right:16px;bottom:max(16px,env(safe-area-inset-bottom));padding:12px 17px}}@media(max-width:360px){nav{gap:10px;font-size:12px}h1{font-size:36px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Original image proportions and an in-page viewer. */
.header{height:auto;min-height:215px;display:grid;grid-template-columns:1fr 240px 1fr;gap:28px}.brand{grid-column:2;grid-row:1;justify-self:center;isolation:isolate}.brand img{width:220px;height:220px;filter:grayscale(1) invert(1);mix-blend-mode:screen}nav{grid-column:1;grid-row:1;gap:22px}.header-phone{grid-column:3;grid-row:1;text-align:right}.project-grid{align-items:start}.project-grid.single{max-width:560px}.photo-open{appearance:none;display:block;width:100%;border:0;padding:0;background:none;color:inherit;cursor:zoom-in;font:inherit}.photo-open:focus-visible,.photo-close:focus-visible{outline:2px solid white;outline-offset:5px}.project-grid .project img,.project-grid.multi .project:nth-child(n) img{display:block;width:100%;height:auto;max-height:none;object-fit:initial;object-position:initial}.project-grid.multi{grid-template-columns:repeat(6,minmax(0,1fr))}.project-grid.multi .project{grid-column:span 2}.project-grid.multi .project:nth-child(n+4){grid-column:span 3}.photo-open:hover{opacity:.95}.photo-viewing{overflow:hidden}.photo-viewer{padding:70px 20px 24px;border:0;background:transparent;color:white;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;overflow:hidden}.photo-viewer::backdrop{background:rgba(0,0,0,.94)}.photo-stage{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative}.photo-large{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}.photo-close{position:absolute;top:16px;right:22px;z-index:1;display:flex;align-items:center;gap:15px;padding:8px 13px;min-height:44px;border:1px solid #777;background:#252525;color:#fff;cursor:pointer;font:700 14px 'Inter',Arial,sans-serif}.photo-close span{font-size:26px;line-height:1}.photo-status{position:absolute;bottom:0;left:50%;transform:translateX(-50%);max-width:90%;padding:8px 14px;background:#222e;font-size:14px;text-align:center}.photo-status[hidden]{display:none}@media(max-width:950px){.header{grid-template-columns:1fr;gap:0;padding-bottom:22px}.brand{grid-column:1;grid-row:1}.brand img{width:200px;height:200px}nav{grid-column:1;grid-row:2;justify-content:center;gap:30px}.header-phone{display:none}}@media(max-width:600px){.header{min-height:0;padding-bottom:20px}.brand img{width:190px;height:190px}nav{font-size:14px;gap:25px}.project-grid.multi{grid-template-columns:repeat(2,minmax(0,1fr))}.project-grid.multi .project,.project-grid.multi .project:nth-child(n+4){grid-column:auto}.project-grid.multi .project:first-child{grid-column:span 2}.photo-viewer{padding:66px 10px 14px}.photo-close{right:12px;top:12px}.photo-status{font-size:13px}}
/* Compact thumbnails; full images are shown only in the viewer. */
.brand{background:var(--bg)}
.project-grid.multi,.project-grid.pair,.project-grid.single{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));max-width:none;gap:20px;align-items:start}
.project-grid.multi .project,.project-grid.multi .project:nth-child(n+4),.project-grid.multi .project:first-child{grid-column:auto}
.photo-open{width:fit-content;max-width:100%}
.project-grid .project img,.project-grid.multi .project:nth-child(n) img{width:auto;height:auto;max-width:100%;max-height:220px;object-fit:contain}
@media(max-width:600px){.project-grid.multi,.project-grid.pair,.project-grid.single{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.project-grid .project img,.project-grid.multi .project:nth-child(n) img{max-height:180px}}
/* Quiet header typography, clean logo background, compact project index. */
.brand img{filter:grayscale(1) invert(1) contrast(1.6);mix-blend-mode:screen}
.header nav{font-family:'Inter',Arial,sans-serif;font-size:18px;letter-spacing:.015em;gap:26px}
.header-phone{font-family:'Inter',Arial,sans-serif;font-size:22px;letter-spacing:.035em;font-variant-numeric:tabular-nums;color:#eee}
#arbeiten{padding-top:48px;padding-bottom:48px}#arbeiten .section-heading{margin-bottom:24px}
.project-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 30px}
.project-group,.project-group:last-child{margin:0;min-width:0}
.project-group>h3{border:0;padding:0;margin:0 0 10px;font-size:15px;color:#ccc}
.project-grid.multi,.project-grid.pair,.project-grid.single{display:block}
.project[hidden]{display:none!important}
.project-grid .photo-open{width:100%;text-align:left}
.project-grid .project img,.project-grid.multi .project:nth-child(n) img{width:auto;height:150px;max-width:100%;max-height:150px;object-fit:contain}
.project-count{display:block;font-size:12px;color:#aaa;padding-top:9px;font-weight:700}
.photo-prev,.photo-next{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:46px;height:54px;border:1px solid #777;background:#202020e8;color:white;font-size:36px;cursor:pointer}
.photo-prev{left:14px}.photo-next{right:14px}.photo-prev[hidden],.photo-next[hidden]{display:none}
.photo-counter{position:absolute;top:20px;left:22px;margin:0;font-size:15px;color:#ddd;z-index:2}
.photo-prev:focus-visible,.photo-next:focus-visible{outline:2px solid white;outline-offset:3px}
.photo-stage{padding:0 45px}
@media(max-width:950px){.header nav{font-size:18px;gap:30px}.project-groups{gap:25px 20px}}
@media(max-width:600px){.header nav{font-size:17px;gap:24px}.project-groups{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}.project-group>h3{font-size:14px;min-height:42px}.project-grid .project img,.project-grid.multi .project:nth-child(n) img{height:125px;max-height:125px}.photo-stage{padding:0 23px}.photo-prev,.photo-next{width:36px;height:48px}.photo-prev{left:4px}.photo-next{right:4px}}
/* Bold serif lettering echoes the HAUS SERVICE wordmark. */

.header{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:0;min-height:0;padding:8px 0 24px}
.header .brand{display:block;flex:none;margin:0 auto}
.header .brand img{width:190px;height:190px}
.header nav{display:flex;justify-content:center;align-items:center;gap:42px;margin-top:0;font-family:'Inter',Arial,sans-serif;font-weight:700;font-size:16px;line-height:1.5;letter-spacing:.07em;text-transform:uppercase;text-align:center}
.header nav a{color:#e6e6e6;padding:8px 0;border-bottom:1px solid transparent}
.header nav a:hover{color:#fff;border-bottom-color:#999}
h1,h2,h3{font-family:'Inter',Arial,sans-serif;font-weight:700}
h1{font-size:clamp(34px,4.1vw,55px);line-height:1.2;letter-spacing:.015em}
h2{font-size:clamp(25px,2.7vw,35px);line-height:1.3;letter-spacing:.045em;text-transform:uppercase}
.project-group>h3{font-family:'Inter',Arial,sans-serif;font-weight:700;font-size:14px;line-height:1.5;letter-spacing:.055em;text-transform:uppercase;color:#e5e5e5;min-height:42px}
.service-list h3{font-size:17px;line-height:1.5;font-weight:700;letter-spacing:.025em;text-transform:uppercase}
.about-title h2{font-size:clamp(23px,2.3vw,30px)}
.section-logo{width:240px;max-width:100%;margin:25px 0 0;isolation:isolate}
.section-logo img{width:100%;height:auto;filter:grayscale(1) invert(1) contrast(1.6);mix-blend-mode:screen}
.service-intro .section-logo{background:var(--surface)}
.about-title .section-logo{background:var(--bg);width:185px;margin-top:12px}
@media(max-width:950px){.header nav{font-size:15px;gap:36px}.section-logo{width:210px}.service-layout{grid-template-columns:.8fr 1.3fr}}
@media(max-width:600px){.header{padding:6px 0 18px}.header .brand img{width:170px;height:170px}.header nav{gap:18px;font-size:12px;letter-spacing:.04em}.hero h1{font-size:34px}.project-group>h3{font-size:12px;letter-spacing:.03em;min-height:40px}.service-layout{grid-template-columns:1fr}.section-logo{width:160px;margin-top:12px}.about-title .section-logo{width:145px}.service-list h3{font-size:16px}.service-intro,.about-title{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px}.service-intro h2,.about-title h2{flex-basis:100%;margin-bottom:0}.service-intro>p{flex:1;min-width:120px}.section-logo{flex:none}.about-title .section-logo{margin-top:0}}
@media(max-width:360px){.header nav{gap:13px;font-size:11px}}

body{font-family:"Inter",Arial,sans-serif;font-weight:700}button,a,nav,h1,h2,h3,p,span,small{font-family:inherit}h1,h2,h3,.header nav,.project-group>h3,.service-list h3,.header-phone{font-family:"Inter",Arial,sans-serif;font-weight:700;letter-spacing:0}h1{letter-spacing:-.035em}h2{letter-spacing:-.025em}.header nav{letter-spacing:.015em}.project-count,.contact-grid span,footer{font-weight:700}

/* Use actual alpha transparency, independent of the surrounding surface. */
.logo-filter-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.header .brand,.service-intro .section-logo,.about-title .section-logo{background:transparent;isolation:auto}
.header .brand img,.section-logo img{filter:url("#logo-transparency");-webkit-filter:url("#logo-transparency");mix-blend-mode:normal;background:transparent}
/* Center both requested title-and-logo columns at every viewport size. */
.service-intro,.about-title{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;gap:0}
.service-intro>h2,.about-title>h2{width:100%;flex:0 0 auto}
.service-intro>p{flex:0 0 auto;min-width:0;max-width:100%;margin-left:auto;margin-right:auto}
.service-intro .section-logo,.about-title .section-logo{flex:0 0 auto;margin-left:auto;margin-right:auto}

/* Clip only empty outer pixels to suppress mobile filter-edge seams. */
.header .brand img,.section-logo img{clip-path:inset(2px);-webkit-clip-path:inset(2px);border:0;outline:0;box-shadow:none}