@font-face{font-family:Manrope;src:url('/assets/fonts/manrope-regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Manrope;src:url('/assets/fonts/manrope-bold.ttf') format('truetype');font-style:normal;font-weight:600 800;font-display:swap}
:root{--paper:#f4f2ea;--ink:#242821;--muted:#686b62;--accent:#d74226;--line:#d8d8cf;--pad:clamp(22px,4.2vw,84px);--ease:cubic-bezier(.22,.68,0,1.02)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:28px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Manrope,Arial,sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
body,button,a{-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
button,a{touch-action:manipulation}
button{cursor:pointer}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:6px}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,figure{margin:0}
h1,h2,h3{font-weight:400}
::selection{background:var(--accent);color:#fff}
[hidden]{display:none!important}
.icon{width:20px;height:20px;display:inline-block;flex:none;vertical-align:middle;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:square;stroke-linejoin:miter}
.skip-link{position:fixed;left:20px;top:-100px;z-index:99;padding:12px 20px;background:var(--ink);color:var(--paper)}
.skip-link:focus{top:12px}
.site-header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:27px var(--pad);font-size:12px}
.brand{display:inline-flex;align-items:center;gap:12px;font-weight:700;letter-spacing:-.04em;font-size:16px;line-height:1}
.brand-symbol{width:42px;height:28px;color:var(--accent);flex-shrink:0}
.site-header nav{display:flex;align-items:center;gap:38px}
.site-header nav a{min-height:32px;display:inline-flex;align-items:center;gap:8px}
.site-header nav a:hover{color:var(--accent)}
.nav-count{font-size:9px;align-self:flex-start;margin-top:3px;color:var(--muted)}
.site-header nav a:last-child .icon{width:16px}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:10px;font-weight:700;line-height:1.5}
.serif{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:400;letter-spacing:-.065em}
.hero{padding:12px var(--pad) 0;overflow:hidden}
.hero-topline,.hero-foot{display:flex;justify-content:space-between;gap:16px;font-size:10px;letter-spacing:.025em}
.hero-topline{border-top:1px solid var(--line);padding-top:20px}
.hero-wordmark{font-size:clamp(44px,12.9vw,260px);font-weight:700;letter-spacing:-.07em;line-height:1.15;white-space:nowrap;position:relative;margin:6px 0 4px}
.hero-wordmark>span:first-child{font-weight:400}
.wordmark-dot{display:inline-block;width:.07em;height:.07em;border-radius:50%;background:var(--accent);margin-left:.07em}
.hero-content{display:grid;grid-template-columns:1fr 1.35fr;gap:6vw;align-items:center;padding:12px 0 48px}
.hero-intro{padding-bottom:12px}
.hero-intro .eyebrow{display:flex;align-items:center;gap:8px;margin-bottom:20px}
.small-cross{display:inline-flex;color:var(--accent)}
.small-cross .icon{width:24px;height:24px}
.hero-intro h2{font-size:clamp(36px,3.75vw,70px);line-height:1.06;letter-spacing:-.065em}
.hero-intro>p:not(.eyebrow){max-width:345px;font-size:13px;line-height:1.8;color:var(--muted);margin-top:24px}
.text-link{display:inline-flex;align-items:center;gap:24px;font-size:12px;font-weight:700;margin-top:28px}
.round-arrow{display:inline-flex;align-items:center;justify-content:center;width:39px;height:39px;border:1px solid currentColor;border-radius:50%;transition:background .25s,color .25s,transform .3s var(--ease)}
a:hover .round-arrow{background:var(--accent);border-color:var(--accent);color:white;transform:rotate(-8deg)}
.product-preview{min-width:0}
.preview-stage{background:#e5e8dc;position:relative;aspect-ratio:1.8;isolation:isolate;overflow:hidden}
.preview-stage::before{content:'';position:absolute;width:90%;aspect-ratio:1;border:1px solid #c7cdbb;border-radius:50%;top:-65%;right:-16%;z-index:-1}
.preview-panel{height:100%;display:flex;flex-direction:column;justify-content:center;padding:18px 30px;position:relative}
.preview-label{display:flex;justify-content:space-between;align-items:center;font-size:10px;gap:12px;margin-bottom:20px}
.preview-label>span:first-child{font-weight:700;font-size:18px;letter-spacing:-.05em}
.preview-label>span:last-child{color:#59624f}
.preview-panel img{width:100%;min-height:0;max-height:74%;object-fit:contain;transform:rotate(-2deg);border-radius:10px;transition:transform .6s var(--ease)}
.preview-panel:hover img{transform:rotate(0deg) translateY(-3px)}
.preview-note{display:flex;flex-shrink:0;justify-content:space-between;align-items:center;font-size:9px;margin-top:20px;letter-spacing:.02em}
.preview-panel-water{background:#dae8e7}
.preview-panel-water img{max-height:220px;object-fit:cover;object-position:bottom;border-radius:3px;transform:rotate(2deg)}
.preview-panel-water .preview-label>span:last-child{color:#385f66}
.preview-controls{display:flex;gap:23px;align-items:center;padding-top:14px}
.preview-controls button{padding:5px 0;border:0;background:none;font-size:11px;border-bottom:2px solid transparent;color:var(--muted)}
.preview-controls button span{font-size:9px;margin-right:4px}
.preview-controls button[aria-pressed="true"]{color:var(--ink);border-color:var(--accent)}
.preview-controls button:hover{color:var(--accent)}
.preview-hint{margin-left:auto;font-size:9px;display:flex;align-items:center;gap:8px;color:var(--muted)}
.preview-hint .icon{width:14px}
.hero-foot{padding:18px 0;border-top:1px solid var(--line);color:var(--muted);align-items:center}
.hero-foot a{display:inline-flex;gap:10px;align-items:center}
.hero-foot .icon{width:14px}
.work-section{padding:104px var(--pad) 108px}
.section-heading{display:grid;grid-template-columns:1fr 1.45fr .8fr;gap:26px;align-items:end;padding-bottom:48px}
.section-heading>.eyebrow{align-self:start;padding-top:8px}
.section-heading h2{font-size:clamp(38px,4.1vw,76px);letter-spacing:-.065em;line-height:1.06}
.section-heading>p:last-child{font-size:12px;color:var(--muted);justify-self:end}
.product-feature{display:grid;grid-template-columns:1fr 1.35fr;min-height:535px;margin-bottom:24px;overflow:hidden}
.feature-copy{padding:42px clamp(25px,3vw,60px);display:flex;flex-direction:column;align-items:flex-start}
.wertify-feature{background:#e4e9df;color:#233b30}
.product-category{font-size:10px;display:flex;align-items:center;justify-content:space-between;width:100%;gap:14px;margin-bottom:47px}
.status{display:inline-flex;gap:7px;align-items:center}
.status i{width:5px;height:5px;background:currentColor;border-radius:50%}
.feature-copy h3{font-size:clamp(48px,5.5vw,100px);letter-spacing:-.08em;line-height:1.05}
.product-dot{color:#537953}
.feature-promise{font-size:clamp(20px,1.8vw,30px);line-height:1.4;letter-spacing:-.04em;margin-top:20px}
.feature-description{font-size:12px;line-height:1.85;max-width:345px;margin-top:17px;opacity:.8}
.feature-links{display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin:26px 0 30px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:24px;background:var(--ink);color:var(--paper);padding:13px 18px;font-size:11px;border:1px solid transparent;transition:background .25s,transform .25s}
.button:hover{background:var(--accent);transform:translateY(-2px)}
.button .icon{width:17px;height:17px}
.quiet-link{display:inline-flex;gap:8px;align-items:center;font-size:11px;border-bottom:1px solid currentColor;padding-bottom:3px}
.quiet-link .icon{width:13px;height:13px}
.quiet-link:hover{opacity:.65}
.feature-bottom{font-size:9px;letter-spacing:.02em;margin-top:auto;opacity:.7}
.feature-visual{position:relative;min-width:0;height:535px;overflow:hidden;display:flex;align-items:center;isolation:isolate}
.visual-wertify{background:#284f3c;padding:82px 0 60px 42px}
.visual-caption{position:absolute;left:30px;top:30px;color:inherit;font-size:10px;letter-spacing:.04em;z-index:2}
.visual-wertify .visual-caption{color:#e5ede2}
.product-window{border-radius:8px;overflow:hidden;background:white;box-shadow:0 30px 65px -20px #00120b70;transform:rotate(-4deg);width:108%;flex-shrink:0;position:relative;z-index:1;transition:transform .7s var(--ease)}
.feature-visual:hover .product-window{transform:rotate(-1deg) translateX(-12px)}
.window-top{display:flex;justify-content:space-between;gap:12px;align-items:center;background:#fff;color:#838a83;border-bottom:1px solid #eeeeea;padding:9px 13px;font-size:8px}
.window-top .icon{width:11px;height:11px}
.window-dots{display:flex;gap:3px}
.window-dots i{width:4px;height:4px;border-radius:50%;background:#bfc7bf}
.product-window img{width:100%}
.visual-index{position:absolute;right:22px;bottom:-25px;font-size:180px;font-weight:700;letter-spacing:-.09em;color:#dae3d422;z-index:0;line-height:1}
.seepegel-feature{background:#e1edef;color:#213e4a}
.seepegel-feature .product-dot{color:#518da4}
.visual-seepegel{background:#a3bfcc;padding:82px 80px 40px 32px}
.map-preview{width:115%;flex-shrink:0;transform:rotate(-5deg) translateX(-70px);border:7px solid #eef3f1;border-radius:5px;box-shadow:0 20px 40px #24374620;transition:transform .7s var(--ease)}
.visual-seepegel:hover .map-preview{transform:rotate(-2deg) translateX(-65px)}
.phone-preview{position:absolute;width:28%;max-width:200px;right:5%;top:21%;padding:5px;background:#182b33;border-radius:22px;box-shadow:0 22px 48px #0d283b40;transform:rotate(6deg);transition:transform .7s var(--ease)}
.phone-preview img{border-radius:18px}
.visual-seepegel:hover .phone-preview{transform:rotate(2deg) translateY(-9px)}
.visual-seepegel .visual-index{color:#f0f7f230}
.workify-teaser{display:grid;grid-template-columns:1fr 1.1fr 1.2fr auto;gap:24px;align-items:center;border-bottom:1px solid var(--line);border-top:1px solid var(--line);padding:42px 0;margin-top:43px}
.workify-teaser h3{font-size:45px;letter-spacing:-.065em}
.workify-teaser h3>span{color:var(--accent)}
.workify-teaser>p{font-size:12px;color:var(--muted)}
.workify-teaser .round-arrow{width:47px;height:47px}
.studio{background:#242c25;color:#f4f2ea;padding:100px var(--pad);display:grid;grid-template-columns:1fr 2.2fr;gap:60px}
.studio-heading{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start}
.studio-heading>.eyebrow{color:#aebba9}
.studio-star{display:flex;color:#e65c3e}
.studio-star .icon{width:150px;height:150px;stroke-width:1.3}
.studio-copy h2{font-size:clamp(40px,5.4vw,95px);line-height:1.1;letter-spacing:-.065em}
.studio-copy h2 .serif{color:#becab6}
.studio-details{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:40px;font-size:13px;color:#bbc3b7;max-width:760px}
.founder{display:flex;align-items:center;gap:16px;border-top:1px solid #ffffff25;margin-top:40px;padding-top:24px}
.founder-monogram{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:#3f4b3e;font-size:19px;letter-spacing:-.08em}
.founder>div{display:flex;flex-direction:column;font-size:12px}
.founder>div>span{font-size:10px;color:#aebba9}
.founder strong{font-weight:400}
.founder-place{font-size:10px;margin-left:auto;color:#aebba9}
.contact{padding:70px var(--pad) 0}
.contact-top,.contact-bottom{display:flex;justify-content:space-between;gap:20px;align-items:center}
.contact-top>p:last-child{font-size:11px;color:var(--muted)}
.contact h2{font-size:clamp(42px,6.8vw,130px);line-height:1.12;letter-spacing:-.065em;margin:55px 0 48px}
.contact h2>a{color:var(--accent);display:inline-flex;align-items:center;gap:25px}
.hello-arrow{display:inline-flex}
.hello-arrow .icon{width:clamp(30px,5vw,80px);height:clamp(30px,5vw,80px);stroke-width:1;transition:transform .3s var(--ease)}
.contact h2>a:hover .icon{transform:translate(8px,-8px)}
.contact-bottom{padding-bottom:38px;border-bottom:1px solid var(--line);font-size:12px}
.contact-bottom>a{display:flex;align-items:center;gap:14px}
.contact-bottom>span{display:flex;align-items:center;gap:10px}
.swiss-cross{background:var(--accent);color:white;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center}
.swiss-cross .icon{width:12px;height:12px;stroke-width:3}
.site-footer{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:28px var(--pad);font-size:10px;color:var(--muted)}
.site-footer .brand{font-size:13px;color:var(--ink)}
.site-footer .brand-symbol{width:34px}
.site-footer>div{display:flex;align-items:center;gap:23px}
.site-footer a:hover{color:var(--accent)}
.to-top{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px}
.to-top .icon{width:15px}
.js-motion .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js-motion .reveal.is-visible{opacity:1;transform:none}
.hero-wordmark{animation:wordmark-in .85s var(--ease) both}
.hero-content{animation:content-in .8s var(--ease) .15s both}
.preview-panel.is-entering{animation:preview-in .5s var(--ease) both}
@keyframes wordmark-in{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:none}}
@keyframes content-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes preview-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(min-width:1700px){.hero-content{gap:8vw;padding-top:26px;padding-bottom:60px}.preview-panel{padding:28px 45px}.preview-panel-water img{max-height:340px}.hero-intro>p:not(.eyebrow){font-size:16px;max-width:410px}.preview-label{font-size:12px}.preview-label>span:first-child{font-size:24px}.preview-note{font-size:11px}.hero-intro h2{font-size:4vw}}
@media(max-width:1050px){.hero-content{gap:4vw}.hero-intro h2{font-size:3.8vw}.preview-panel{padding:16px}.preview-label{margin-bottom:14px}.preview-note{margin-top:14px}.preview-hint{display:none}.section-heading{grid-template-columns:.8fr 1.5fr}.section-heading>p:last-child{display:none}.product-feature{grid-template-columns:1fr 1.1fr}.feature-copy{padding:30px}.product-category{margin-bottom:35px}.feature-links{gap:15px}.visual-seepegel{padding-right:35px}.phone-preview{width:34%;right:4%;top:27%}.workify-teaser{grid-template-columns:.7fr 1fr 1fr auto}.studio{gap:35px}.site-footer>p{display:none}}
@media(max-width:720px){
.site-header{padding:22px var(--pad);gap:12px}.brand{font-size:13px;gap:8px}.brand-symbol{width:33px;height:23px}.site-header nav{gap:18px;font-size:10px}.site-header nav>a:nth-child(2){display:none}.nav-count{display:none}.site-header nav a:last-child .icon{width:13px}
.hero{padding-top:0}.hero-topline{font-size:8px;padding-top:14px;gap:12px}.hero-wordmark{font-size:10.9vw;margin:12px 0 20px;line-height:1.3;letter-spacing:-.085em}
.hero-content{grid-template-columns:1fr;gap:24px;padding:0 0 28px}.hero-intro{padding-bottom:0}.hero-intro .eyebrow{font-size:9px;margin-bottom:14px}.hero-intro h2{font-size:clamp(38px,9.5vw,65px)}.hero-intro>p:not(.eyebrow){margin-top:15px;font-size:12px;max-width:340px;line-height:1.65}.text-link{margin-top:16px;font-size:11px;gap:20px}.round-arrow{width:32px;height:32px}.round-arrow .icon{width:16px}
.preview-stage{aspect-ratio:1.68}.preview-panel{padding:12px 18px}.preview-label{margin-bottom:13px;font-size:8px}.preview-label>span:first-child{font-size:14px}.preview-note{font-size:8px;margin-top:13px}.preview-note .icon{width:12px}.preview-panel-water img{max-height:145px}.preview-controls{padding-top:9px;gap:23px}.preview-controls button{font-size:10px}.preview-controls .preview-hint{display:flex;font-size:8px}
.hero-foot{font-size:8px;padding:13px 0;gap:10px}
.work-section{padding-top:65px;padding-bottom:65px}.section-heading{display:block;padding-bottom:28px}.section-heading>.eyebrow{margin-bottom:22px}.section-heading h2{font-size:42px}.product-feature{grid-template-columns:1fr;min-height:0;margin-bottom:22px}.feature-copy{padding:27px 25px 28px}.product-category{margin-bottom:25px;font-size:9px}.feature-copy h3{font-size:60px}.feature-promise{font-size:22px;margin-top:13px}.feature-description{font-size:12px;margin-top:13px}.feature-links{margin-top:20px;margin-bottom:24px;gap:20px}.feature-bottom{font-size:8px}.feature-visual{min-height:310px}.visual-wertify{padding:65px 0 28px 22px}.visual-caption{left:25px;top:22px;font-size:9px}.product-window{width:102%}.visual-index{font-size:125px;bottom:-18px}.visual-seepegel{padding:65px 35px 28px 22px;min-height:340px}.map-preview{width:115%;transform:rotate(-5deg) translateX(-35px)}.visual-seepegel:hover .map-preview{transform:rotate(-2deg) translateX(-30px)}.phone-preview{width:30%;max-width:155px;top:20%;right:7%;border-radius:16px;padding:4px}.phone-preview img{border-radius:12px}
.workify-teaser{grid-template-columns:1fr auto;gap:12px;padding:28px 0;margin-top:35px}.workify-teaser>.eyebrow{grid-column:1/-1;font-size:9px}.workify-teaser h3{font-size:42px}.workify-teaser>p{grid-column:1;grid-row:3;font-size:11px}.workify-teaser>.round-arrow{grid-row:2/4;grid-column:2;width:44px;height:44px}
.studio{grid-template-columns:1fr;padding:50px var(--pad);gap:30px}.studio-heading{flex-direction:row;align-items:center}.studio-star .icon{width:46px;height:46px}.studio-copy h2{font-size:43px}.studio-details{grid-template-columns:1fr;gap:18px;margin-top:28px;font-size:12px}.founder{margin-top:28px;gap:12px}.founder-place{font-size:8px}
.contact{padding-top:45px}.contact-top>p:last-child{display:none}.contact h2{font-size:10.1vw;margin-top:32px;margin-bottom:30px}.contact h2>a{gap:12px}.contact-bottom{align-items:flex-start;font-size:10px;gap:18px;padding-bottom:27px}.contact-bottom .icon{width:14px}.contact-bottom>span{font-size:9px}.site-footer{flex-wrap:wrap;gap:16px;padding-top:20px;padding-bottom:20px}.site-footer>div{gap:18px;font-size:9px;width:100%}.site-footer .to-top{margin-left:auto}
}
@media(min-width:721px) and (max-height:800px){.hero-wordmark{font-size:11.8vw;line-height:1.1}.hero-content{padding-bottom:25px}.preview-stage{aspect-ratio:2}.hero-intro .eyebrow{margin-bottom:14px}.hero-intro>p:not(.eyebrow){margin-top:16px}.text-link{margin-top:18px}}
@media(max-width:720px){.hero-wordmark{font-size:12.25vw;letter-spacing:-.07em}.preview-stage{aspect-ratio:1.4}.preview-panel img{max-height:74%}.preview-label{flex-shrink:0;margin-bottom:12px}.preview-note{margin-top:12px}.feature-visual{height:auto}.preview-panel-water img{max-height:74%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.js-motion .reveal{opacity:1;transform:none}}