/* landing4you storefront · Explore surface, editorial gallery */
:root{--forest:#205443;--deep:#1a3232;--cream:#f8f7f1;--pale:#eeeee8;--hairline:#dcded7}
body:has(.hub-hero){background:var(--cream);color:var(--deep);font-family:'DM Sans',Arial,sans-serif}
body:has(.hub-hero) .wordmark{font-size:clamp(28px,3vw,40px);letter-spacing:-.095em;display:inline-flex;align-items:center;gap:0}
.site-header .brand-symbol{display:block;flex:none;width:42px;height:42px;object-fit:contain;mix-blend-mode:multiply;margin-right:8px}
body:has(.hub-hero) .wordmark span{color:#87a44e}
.site-header{height:82px;background:var(--cream);border:0;padding:0 clamp(25px,5.5vw,92px);position:relative;z-index:10}
.site-header .header-links{gap:clamp(24px,4vw,52px)}.site-header .header-links a{font-size:14px;font-weight:500}
.hand-note,.about-note{font:italic 16px Georgia,serif;transform:rotate(-7deg);line-height:1.15;position:relative}
.hand-note:after{content:'';display:block;width:80%;border-bottom:3px solid #9cae53;transform:rotate(-4deg);margin-top:7px}
.menu-toggle{display:none}
.hub-hero{min-height:550px;display:grid;grid-template-columns:43% 57%;background:#efeee8;overflow:hidden}
.hub-copy{padding:clamp(60px,8vw,122px) 2vw clamp(50px,6vw,90px) clamp(25px,5.5vw,92px);position:relative;z-index:2}
.hub-copy h1,.gallery h2,.steps h2,.about-block h2,.contact-block h2{font-family:Georgia,'Times New Roman',serif;letter-spacing:-.043em;font-weight:600}
.hub-copy h1{font-size:clamp(51px,4.55vw,82px);line-height:1.04;max-width:730px;margin:20px 0 18px}
.hub-copy p{font-size:clamp(17px,1.3vw,20px);line-height:1.42;color:var(--deep);margin:0}
.hub-copy .btn{margin-top:29px;gap:28px}
body:has(.hub-hero) .btn{background:var(--forest);border-color:var(--forest);border-radius:5px;font-weight:600}
body:has(.hub-hero) .btn:hover{background:#133d32}
.hub-art{min-height:550px;background:transparent;border:0;position:relative;overflow:hidden}
.mockup{position:absolute;width:45%;height:460px;background:white;padding:7px 7px 0;box-shadow:0 16px 35px #1f343127;overflow:hidden;border-radius:3px}
.mockup img{display:block;width:100%;height:auto}
.mockup-cafe{left:2%;top:122px;transform:rotate(-9deg);z-index:1}
.mockup-restaurant{left:28%;top:34px;width:47%;height:530px;z-index:3}
.mockup-barber{left:66%;top:118px;transform:rotate(10deg);z-index:2}
.wrap{max-width:1800px;padding-left:clamp(25px,5.5vw,92px);padding-right:clamp(25px,5.5vw,92px)}
.gallery{padding-top:68px;padding-bottom:86px}
.gallery-top{display:flex;justify-content:space-between;align-items:end;gap:35px;margin-bottom:28px}
.gallery h2{font-size:clamp(34px,3.1vw,52px);line-height:1.1;margin:13px 0 8px}
.gallery-top p{font-size:14px;color:#52605b;margin:0;line-height:1.5}
.filters{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;max-width:560px;padding:0;overflow:visible}
.filter{border-radius:50px;border:1px solid var(--hairline);background:transparent;font-size:12px;min-height:38px;padding:7px 16px;color:var(--deep)}
.filter[aria-pressed=true]{background:var(--deep);border-color:var(--deep);color:white}
.sr-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.gallery-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;margin-top:35px}
.tile{background:#fff;border:1px solid #e9e9e3;border-radius:6px;box-shadow:0 3px 11px #283b3320;padding:8px;overflow:hidden}
.tile[hidden]{display:none!important}
.tile-preview{height:auto;aspect-ratio:1.8/1;overflow:hidden;border-radius:3px;transform:none!important}
.tile-preview .preview-image{width:100%;height:100%;object-fit:cover;object-position:center top}
.tile-meta{margin:12px 4px 7px;display:block}
.tile-meta h3{font:700 clamp(12px,1.12vw,17px) 'DM Sans',sans-serif;letter-spacing:-.02em;line-height:1.25}
.tile-meta span{border:0;padding:0;font:500 11px 'DM Sans',sans-serif;color:#687570;display:block;margin-top:4px}
.tile-actions{display:grid;gap:6px;margin:0 3px 3px}
.tile-actions a{min-height:35px;border-radius:4px;text-decoration:none;display:flex;align-items:center;justify-content:center;text-align:center;padding:7px 5px;font:600 11px 'DM Sans',sans-serif}
.tile-actions a:first-child{border:1px solid #abc1b8;color:var(--deep)}
.tile-actions a:last-child{background:var(--forest);color:white}
.tile-actions a:hover{filter:brightness(.9)}
.show-all{display:none}
.steps{background:#f0f0eb;color:var(--deep);padding:58px 0 65px}
.steps-inner{display:grid;grid-template-columns:27% 1fr;gap:36px}
.steps h2{font-size:clamp(33px,2.8vw,47px);line-height:1.07;margin:13px 0}
.steps-grid{gap:32px}.step{border:0;min-height:0;padding-top:0}
.step-num{background:var(--deep);color:white;border-radius:50%;width:39px;height:39px;display:inline-grid;place-items:center;font:600 15px 'DM Sans',sans-serif}
.step-icon{font-size:32px;margin-left:14px;vertical-align:middle;font-family:Georgia,serif;font-weight:400}
.step h3{font:600 clamp(19px,1.5vw,25px)/1.15 Georgia,serif;letter-spacing:-.02em;margin:18px 0 8px}
.step p{color:#51625c;font-size:14px;line-height:1.55;margin:0}
.about-block{padding-top:65px;padding-bottom:65px;display:grid;grid-template-columns:28% 1fr 18%;align-items:center;gap:5vw}
.portrait-block{height:390px;background:#b9b9b9;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;overflow:hidden}
.portrait-block img{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom}
.portrait-block>span{font:600 94px Georgia,serif;letter-spacing:-.13em;color:#2c5544;opacity:.8}
.portrait-block small{position:absolute;bottom:11px;left:16px;right:16px;font-size:10px;color:#365345;text-align:center}
.about-block h2{font-size:clamp(37px,3vw,52px);margin:6px 0 11px}
.about-block p{font-size:15px;max-width:650px;line-height:1.62}
.about-block small{font-size:11px;margin-top:10px}
.about-note{justify-self:center}
.faq-block{padding-top:58px;padding-bottom:65px;border-top:1px solid var(--hairline)}
.faq-block h2{font:600 clamp(30px,2.8vw,44px)/1.15 Georgia,serif;letter-spacing:-.035em;margin:10px 0 24px}
.faq-list{max-width:850px}
.faq-list details{border-top:1px solid #b8c4ba}
.faq-list details:last-child{border-bottom:1px solid #b8c4ba}
.faq-list summary{cursor:pointer;min-height:56px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-weight:600;padding:12px 4px;list-style:none}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:'+';font-size:26px;font-weight:400;line-height:1}
.faq-list details[open] summary::after{content:'−'}
.faq-list summary:focus-visible{outline:3px solid #95b955;outline-offset:2px}
.faq-list p{margin:0;padding:0 28px 18px 4px;line-height:1.6;color:#43584d;font-size:14px}
.contact-block{padding:34px 0;background:#e9ede5}
.contact-inner{display:grid;grid-template-columns:1fr 1.1fr;align-items:center;gap:30px}
.contact-block h2{font-size:clamp(30px,2.5vw,43px);margin:7px 0 10px}
.contact-block p{font-size:14px;margin:5px 0;line-height:1.4}
.contact-actions{margin:0;display:grid;grid-template-columns:1fr;gap:10px}
.contact-actions .btn{background:var(--forest);color:white;min-height:48px;font-size:13px;text-align:center;margin:0}
.contact-actions small{color:#65746c;font-size:11px}
.contact-design{margin:0;font-weight:600;color:var(--forest)}
.contact-field{display:grid;gap:6px;font-size:13px;font-weight:600;color:var(--deep)}
.contact-field input,.contact-field textarea{width:100%;box-sizing:border-box;border:1px solid #b7c5bb;border-radius:5px;background:#fff;color:var(--deep);font:inherit;font-weight:400;font-size:16px;padding:12px;min-height:48px}
.contact-field textarea{resize:vertical;min-height:86px}
.contact-field :is(input,textarea):focus-visible{outline:3px solid #95b955;outline-offset:2px}
.contact-email{justify-self:start;font-size:13px;color:var(--forest);text-underline-offset:3px;padding:8px 0}
.site-footer{background:var(--deep);color:#e9ece6;padding:22px clamp(25px,5.5vw,92px);align-items:center}
.site-footer .wordmark{font-size:25px!important;color:white;text-decoration:none}
.site-footer nav{display:flex;gap:30px}.site-footer nav a{text-decoration:none;font-size:12px}.site-footer small{font-size:10px;color:#b7c6bd}
@media(max-width:1150px){.gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.gallery-top{align-items:start;flex-direction:column}.filters{justify-content:flex-start;max-width:100%}.steps-inner{grid-template-columns:1fr}.hub-hero{grid-template-columns:48% 52%}.hub-copy h1{font-size:clamp(47px,5.2vw,68px)}}
@media(max-width:700px){.site-header .brand-symbol{width:32px;height:32px}.site-header{height:76px;padding:0 22px}.site-header .wordmark{font-size:30px!important}.hand-note{display:none}.menu-toggle{display:flex;flex-direction:column;align-items:center;justify-content:center;width:48px;height:48px;gap:5px;border:0;background:transparent;cursor:pointer}.menu-toggle span{width:26px;height:2px;background:var(--deep)}.site-header .header-links{display:none;position:absolute;top:76px;left:0;right:0;background:var(--cream);border-top:1px solid var(--hairline);box-shadow:0 10px 17px #172f2226;padding:12px 22px 20px;flex-direction:column;align-items:stretch;gap:0}.site-header .header-links.open{display:flex}.site-header .header-links a{min-height:48px;display:flex;align-items:center;font-size:16px}.hub-hero{display:flex;flex-direction:column;min-height:0}.hub-copy{padding:45px 22px 22px}.hub-copy h1{font-size:clamp(43px,9.2vw,65px);line-height:1.03;margin:12px 0 16px}.hub-copy p{font-size:17px}.hub-copy .btn{margin-top:23px}.hub-art{min-height:225px;max-height:280px;width:100%}.mockup{height:320px;padding:4px}.mockup-cafe{top:50px;left:5%;width:42%}.mockup-restaurant{top:5px;left:30%;width:44%;height:350px}.mockup-barber{top:49px;left:69%;width:39%}.wrap{padding-left:22px;padding-right:22px}.gallery{padding-top:44px;padding-bottom:50px}.gallery-top{margin-bottom:0;gap:21px}.gallery h2{font-size:33px;margin:9px 0 5px}.gallery-top p{font-size:14px}.filters{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));width:100%;gap:7px;overflow:visible}.filter{min-width:0;padding:5px 1px;font-size:10px;min-height:44px}.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:21px}.tile{padding:5px}.tile-preview{aspect-ratio:1.55/1}.tile-meta{margin:9px 4px 7px}.tile-meta h3{font-size:13px}.tile-meta span{font-size:10px}.tile-actions{gap:5px;margin:0 2px 2px}.tile-actions a{min-height:44px;font-size:10px;line-height:1.15;padding:6px 3px}.show-all{display:block;margin:22px auto 0;background:transparent;border:1px solid var(--hairline);border-radius:8px;color:var(--deep);padding:12px 24px;min-height:44px;font-size:13px;text-decoration:underline;cursor:pointer}.show-all[hidden]{display:none}.steps{padding:46px 0}.steps h2{font-size:36px;max-width:450px}.steps-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.step-num{width:35px;height:35px}.step-icon{font-size:23px;margin-left:5px}.step h3{font-size:18px}.step p{font-size:12px}.about-block{padding-top:42px;padding-bottom:40px;grid-template-columns:32% 1fr;gap:17px}.portrait-block{height:180px}.portrait-block>span{font-size:55px}.portrait-block small{font-size:9px}.about-copy .eyebrow{font-size:9px}.about-block h2{font-size:30px}.about-block p{font-size:12px;line-height:1.5}.about-block small{font-size:10px}.about-note{display:none}.contact-block{background:var(--cream);padding:0 0 32px}.contact-inner{background:var(--deep);color:white;border-radius:9px;margin:0 22px;width:calc(100% - 44px);padding:25px;grid-template-columns:1fr;gap:15px}.contact-block h2{font-size:29px}.contact-block p{font-size:13px}.contact-inner .eyebrow{color:#b7c9bb}.contact-actions{grid-template-columns:1fr}.contact-actions .btn{min-height:46px}.contact-actions .btn:first-child{background:#bde97c;color:var(--deep);border-color:#bde97c}.contact-actions .btn-outline{color:white!important;border-color:white!important}.contact-actions small{color:#c3cfc5}.copy-request{color:white}.site-footer{background:var(--cream);color:var(--deep);padding:25px 22px;gap:16px}.site-footer .wordmark{color:var(--deep)}.site-footer nav{gap:12px}.site-footer nav a{font-size:11px}.site-footer small{width:100%;font-size:9px;color:#59665f}}
@media(max-width:390px){.site-header .wordmark{font-size:26px!important}.site-header .brand-symbol{width:28px;height:28px;margin-right:5px}.gallery-grid{gap:8px}.filter{font-size:9px}.tile-meta h3{font-size:12px}.steps-grid{gap:8px}.step h3{font-size:16px}.step p{font-size:11px}.about-block{grid-template-columns:1fr}.portrait-block{height:140px}.portrait-block small{font-size:10px}}
@media(max-width:700px){.about-block{grid-template-columns:1fr;gap:22px}.portrait-block{width:min(100%,310px);height:350px;margin-inline:auto}.portrait-block img{object-fit:contain;object-position:center bottom}.filters .filter[data-filter="Alle"]{order:1;grid-column:1/-1;justify-self:center;min-width:110px;padding-inline:18px}}
@media(prefers-reduced-motion:reduce){.mockup{transition:none}}