:root{--orange:#ff9a38;--ink:#000;--paper:#fff;--grey:#5a5a5a;--line:#e4e4e4;--soft:#fff4e8;
--head:"Chakra Petch",system-ui,sans-serif;--body:"Hanken Grotesk",system-ui,sans-serif}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:5rem}
body{font:400 1.0625rem/1.6 var(--body);color:var(--ink);background:var(--paper)}
h1,h2,h3{font-family:var(--head);line-height:1.1}
a{color:inherit}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:.6rem clamp(1rem,5vw,4rem);background:#fffffff2;backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.brand img{height:44px;display:block}
nav{display:flex;align-items:center;gap:1.75rem;font-weight:500}
nav a{text-decoration:none}nav a:not(.btn):hover{color:var(--orange)}
.menu-btn{display:none;font:500 1rem var(--body);background:none;border:2px solid var(--ink);padding:.4rem .9rem;cursor:pointer}
.btn{display:inline-block;font:700 1rem var(--head);background:var(--orange);color:var(--ink);border:2px solid var(--ink);padding:.85rem 1.5rem;text-decoration:none;cursor:pointer;clip-path:polygon(0 0,100% 0,100% 70%,92% 100%,0 100%);transition:background .2s}
.btn:hover{background:var(--ink);color:var(--orange)}
.btn.ghost{background:transparent}.btn.small{padding:.5rem 1.1rem;font-size:.95rem}
.hero{display:grid;grid-template-columns:1.1fr .9fr;min-height:calc(100vh - 62px);overflow:hidden}
.hero-text{padding:clamp(2rem,8vw,6rem) clamp(1rem,5vw,4rem);align-self:center}
.hero h1{font-size:clamp(2.4rem,5.2vw,4.4rem);font-weight:700;margin-bottom:1.25rem;max-width:14ch}
.hero p{max-width:46ch;color:var(--grey);font-size:1.15rem;margin-bottom:2rem}
.actions{display:flex;gap:1rem;flex-wrap:wrap}
.hero-shape{background:var(--orange);clip-path:polygon(22% 0,100% 0,100% 100%,0 100%);display:flex;flex-direction:column;justify-content:center;align-items:flex-end;padding:2rem clamp(1rem,5vw,4rem);animation:slide .9s cubic-bezier(.2,.7,.2,1) both}
.hero-shape span{font:700 clamp(2.2rem,5vw,4.5rem)/1.05 var(--head);color:var(--ink)}
.hero-shape span:nth-child(even){color:var(--paper)}
@keyframes slide{from{transform:translateX(30%)}}
.block{padding:clamp(3rem,8vw,6rem) clamp(1rem,5vw,4rem)}
.block h2{font-size:clamp(1.8rem,3.6vw,2.8rem);margin-bottom:2.5rem;max-width:22ch}
.services{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));border-top:3px solid var(--ink)}
.services li{padding:1.75rem 1.5rem 1.75rem 0;border-bottom:1px solid var(--line)}
.services h3{font-size:1.4rem;margin-bottom:.5rem}
.services li:hover h3{color:var(--orange)}
.services p,.process p{color:var(--grey);max-width:36ch}
.dark{background:var(--ink);color:var(--paper)}.dark p{color:#c9c9c9!important}
.process{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem}
.process li{border-left:4px solid var(--orange);padding-left:1rem}
.process h3{font-size:1.5rem;margin-bottom:.4rem;color:var(--orange)}
.about{display:grid;grid-template-columns:1fr 1fr;gap:3rem;background:var(--soft)}
.about h2{margin:0}.about p+p{margin-top:1rem}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:3rem}
.contact h2{margin-bottom:1rem}.details{margin-top:1.5rem;font-weight:500}
form{display:grid;gap:1rem}
label{display:grid;gap:.35rem;font-weight:500}
input,textarea{font:inherit;padding:.75rem;border:2px solid var(--ink);border-radius:0;background:var(--paper)}
input:focus,textarea:focus{outline:3px solid var(--orange);outline-offset:0}
form .btn{justify-self:start}
.msg{padding:.75rem 1rem;border-left:4px solid var(--ink);background:var(--soft)}.msg.error{border-color:#c0392b}
footer{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding:2rem clamp(1rem,5vw,4rem);border-top:1px solid var(--line);color:var(--grey)}
footer img{height:36px}
@media(max-width:820px){
.menu-btn{display:block}
nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;padding:1rem;background:var(--paper);border-bottom:1px solid var(--line)}
nav.open{display:flex}
.hero,.about,.contact{grid-template-columns:1fr}
.hero{min-height:0}.hero-shape{clip-path:polygon(0 12%,100% 0,100% 100%,0 100%);padding-top:4rem;align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.5rem}
.card{display:flex;flex-direction:column;text-decoration:none;border:2px solid var(--ink);background:var(--paper)}
.card:hover{border-color:var(--orange);box-shadow:6px 6px 0 var(--orange)}
.card img,.ph{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.ph{display:grid;place-items:center;background:var(--orange);font:700 4rem var(--head)}
.ph.big{aspect-ratio:1;font-size:8rem}
.card-body{padding:1rem 1.1rem 1.2rem;display:grid;gap:.4rem}
.card-body h3{font-size:1.25rem}.card-body p{color:var(--grey);font-size:.98rem}
.card-body strong{font-family:var(--head)}
.filters{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1rem}.filters input{flex:1;max-width:22rem}
.chips{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:2rem}
.chips a{padding:.3rem .9rem;border:2px solid var(--ink);text-decoration:none;font-weight:500}
.chips a.on,.chips a:hover{background:var(--orange)}
.pager{display:flex;gap:1.5rem;align-items:center;margin-top:2rem}
.more{margin-top:2rem}
.detail{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.gallery>img{width:100%;display:block;border:2px solid var(--ink)}
.thumbs{display:flex;gap:.6rem;margin-top:.8rem;flex-wrap:wrap}
.thumbs button{padding:0;border:2px solid var(--line);background:none;cursor:pointer;width:72px}
.thumbs button:hover{border-color:var(--orange)}.thumbs img{width:100%;display:block}
.info h1{font-size:clamp(2rem,4vw,3rem);margin:.5rem 0}
.info p{margin-bottom:1rem;max-width:60ch}.crumbs{font-size:.95rem;color:var(--grey)}
.price{font:700 1.6rem var(--head)}
.features{padding-left:1.2rem;margin:.5rem 0 1.5rem}.features li::marker{color:var(--orange)}
@media(max-width:820px){.detail{grid-template-columns:1fr}}