:root{--ink:#2f2724;--cream:#f7f2ed;--paper:#fffdfa;--nude:#dcc2b3;--clay:#6f2b2c;--rose:#eadbd2;--taupe:#cbbeb2;--taupe-light:#e5ddd5;--kobido:#6f2b2c;--drainage:#65695a;--madero:#b8996b;--line:rgba(47,39,36,.14)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:Manrope,sans-serif}
.nav{height:90px;padding:0 5vw;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid rgba(47,39,36,.09);position:sticky;top:0;background:rgba(229,221,213,.93);backdrop-filter:blur(16px);z-index:20}
.brand{display:flex;flex-direction:column;color:var(--ink);text-decoration:none;line-height:1}
.brand span{font-family:"Playfair Display",serif;font-size:22px;font-style:italic}
.brand strong{text-transform:uppercase;letter-spacing:.18em;font-size:10px;margin-top:7px}
.brand-logo{display:block;grid-column:2;grid-row:1;position:relative;width:244px;height:72px;overflow:hidden;border-radius:4px;background:#f3eee6}
.brand-logo img{width:100%;height:100%;display:block;object-fit:cover;filter:contrast(1.03) saturate(.9)}
.nav nav{grid-column:1;grid-row:1;display:flex;gap:24px;justify-self:start}
.nav-cta{grid-column:3;grid-row:1;justify-self:end}
.nav nav a,.secondary{color:var(--ink);text-decoration:none;font-size:13px}
.nav-cta,.primary{display:inline-flex;align-items:center;justify-content:center;padding:15px 24px;background:var(--clay);color:white;text-decoration:none;font-size:12px;text-transform:uppercase;letter-spacing:.11em;border-radius:100px}
.hero{min-height:720px;display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:5vw;padding:70px 7vw}
.hero-copy{max-width:680px}
.eyebrow{text-transform:uppercase;letter-spacing:.2em;font-size:11px;font-weight:600;color:var(--clay)}
h1,h2,h3{font-family:"Playfair Display",serif;font-weight:500}
h1{font-size:clamp(52px,6vw,88px);line-height:.99;margin:24px 0}
h1 em{color:var(--clay);font-weight:500}
.lead{font-size:18px;line-height:1.7;max-width:580px;color:#675954}
.actions{display:flex;align-items:center;gap:26px;margin:38px 0}
.secondary{border-bottom:1px solid var(--ink);padding:8px 0}
.proof{display:flex;gap:22px;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#776963}
.proof span:before{content:"·";color:var(--clay);margin-right:8px}
.hero-visual{position:relative;min-height:610px}
.arch{height:610px;border-radius:240px 240px 20px 20px;overflow:hidden}
.arch img,.experience-photo img{width:100%;height:100%;object-fit:cover}
.floating{position:absolute;bottom:38px;left:-45px;background:var(--paper);padding:24px 30px;box-shadow:0 20px 50px rgba(47,39,36,.14)}
.floating small,.floating strong{display:block}
.floating small{text-transform:uppercase;letter-spacing:.18em;font-size:9px}
.floating strong{font-family:"Playfair Display",serif;font-size:22px;margin-top:5px}
.intro{text-align:center;padding:120px 20vw}
.intro h2{font-size:clamp(36px,4vw,58px);line-height:1.14;margin:22px auto;max-width:900px}
.intro>p:last-child{max-width:700px;margin:auto;line-height:1.8;color:#71635d}
.founder{margin:0 5vw 130px;background:var(--taupe-light);display:grid;grid-template-columns:.82fr 1.18fr;min-height:720px;overflow:hidden}
.founder-portrait{position:relative;background:#48463f;padding:0}
.founder-frame{height:720px;border-radius:0;overflow:hidden;position:relative}
.founder-frame:after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.founder-frame img{width:100%;height:100%;object-fit:cover;object-position:center 23%}
.founder-signature{position:absolute;right:22px;bottom:38px;color:#fff;font-family:"Allura",cursive;font-size:86px;font-weight:400;line-height:1;transform:rotate(-4deg);text-shadow:0 4px 18px rgba(47,39,36,.42);z-index:2}
.founder-copy{padding:90px 9vw;display:flex;flex-direction:column;justify-content:center}
.founder-copy h2{font-size:clamp(42px,4.2vw,66px);line-height:1.08;margin:20px 0 30px}
.founder-copy>p{color:#71635d;line-height:1.8;font-size:14px;max-width:650px}
.founder-copy .founder-lead{font-family:"Playfair Display",serif;color:var(--ink);font-size:21px;line-height:1.55}
.founder-values{display:flex;gap:12px;margin:25px 0 34px}
.founder-values span{border:1px solid var(--line);border-radius:100px;padding:9px 16px;text-transform:uppercase;letter-spacing:.12em;font-size:9px}
.founder-copy .primary{align-self:flex-start}
.services{padding:0 5vw 130px;display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.service{position:relative}
.service>span{position:absolute;top:18px;left:18px;background:var(--paper);width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:10px;z-index:2}
.service-img{height:430px;background-size:cover;background-position:center}
.service-gallery{height:430px;display:grid;grid-template-columns:1.55fr 1fr;grid-template-rows:1fr 1fr;gap:5px;background:var(--kobido)}
.service-gallery img{width:100%;height:100%;object-fit:cover;display:block}
.service-gallery-main{grid-row:1 / 3}
.kobido-gallery img:first-child{object-position:center}
.kobido-gallery img:nth-child(2){object-position:center 42%}
.kobido-gallery img:nth-child(3){object-position:center 28%}
.drainage-gallery{background:var(--drainage)}
.drainage-gallery img:first-child{object-position:center 48%}
.drainage-gallery img:nth-child(2){object-position:center}
.drainage-gallery img:nth-child(3){object-position:center 54%}
.madero-gallery{background:var(--madero)}
.madero-gallery img:first-child{object-position:center 45%}
.madero-gallery img:nth-child(2){object-position:center}
.madero-gallery img:nth-child(3){object-position:center}
.drainage{background-image:url('https://images.unsplash.com/photo-1519823551278-64ac92734fb1?auto=format&fit=crop&w=900&q=85')}
.madero{background-image:url('https://images.unsplash.com/photo-1570172619644-dfd03ed5d881?auto=format&fit=crop&w=900&q=85')}
.kobido{background-image:url('https://images.unsplash.com/photo-1570172619644-dfd03ed5d881?auto=format&fit=crop&w=900&q=85');background-position:60% center}
.service h3{font-size:29px;margin:22px 0 12px}
.service p{color:#71635d;line-height:1.7;font-size:14px}
.service a{color:var(--ink);font-size:12px;text-decoration:none;border-bottom:1px solid var(--ink)}
.service-drainage{border-top:5px solid var(--drainage);padding-top:14px}
.service-drainage>span{background:var(--drainage);color:white}
.service-drainage h3,.service-drainage a{color:var(--drainage)}
.service-madero{border-top:5px solid var(--madero);padding-top:14px}
.service-madero>span{background:var(--madero);color:white}
.service-madero h3,.service-madero a{color:#8f7045}
.service-kobido{border-top:5px solid var(--kobido);padding-top:14px}
.service-kobido>span{background:var(--kobido);color:white}
.service-kobido h3,.service-kobido a{color:var(--kobido)}
.experience{background:var(--ink);color:var(--cream);display:grid;grid-template-columns:1fr 1fr;min-height:760px}
.experience-photo{min-height:680px}
.experience-copy{padding:100px 9vw}
.experience-copy h2{font-size:56px;margin:20px 0 50px}
.steps>div{display:grid;grid-template-columns:50px 1fr;border-top:1px solid rgba(255,255,255,.15);padding:22px 0}
.steps b{color:var(--nude);font-size:11px}
.steps span,.steps strong{display:block}
.steps span{color:#cfc3bd;font-size:13px;line-height:1.6}
.steps strong{color:white;font-family:"Playfair Display",serif;font-size:23px;margin-bottom:5px}
.dark{margin-top:35px;background:var(--nude);color:var(--ink)}
.quote{padding:130px 15vw;text-align:center;background:var(--rose)}
.quote p{font-family:"Playfair Display",serif;font-size:clamp(36px,5vw,67px);line-height:1.18;margin:0}
.contact{padding:110px 8vw;display:grid;grid-template-columns:1.2fr .8fr;gap:10vw;align-items:center}
.contact h2{font-size:55px;max-width:650px}
.contact-card{background:var(--paper);padding:45px}
.contact-card p{line-height:1.8}
.contact-card a:not(.primary){color:var(--ink)}
footer{background:#201a18;color:#cdbfb8;padding:55px 6vw;display:flex;justify-content:space-between;align-items:end;font-size:11px}
.footer-brand{color:#efe7df}
.footer-brand span{font-size:27px}
.footer-brand strong{color:#b8996b}
.mobile-book{display:none}
.reveal{opacity:0;transform:translateY(22px);transition:.75s ease}
.reveal.visible{opacity:1;transform:none}
@media(max-width:900px){.nav{grid-template-columns:1fr auto 1fr;padding:0 18px}.nav nav{display:none}
.brand-logo{width:210px;height:66px}
.hero{grid-template-columns:1fr;padding:55px 6vw}
.hero-visual{min-height:480px}
.arch{height:480px}
.floating{left:10px}
.proof{flex-wrap:wrap}
.intro{padding:90px 7vw}
.services{grid-template-columns:1fr}
.service-img{height:450px}
.experience{grid-template-columns:1fr}
.experience-copy{padding:80px 8vw}
.contact{grid-template-columns:1fr}
.contact h2{font-size:44px}
footer{flex-direction:column;align-items:flex-start;gap:22px}
.mobile-book{display:block;position:fixed;bottom:16px;left:16px;right:16px;background:var(--clay);color:white;text-align:center;padding:16px;text-decoration:none;text-transform:uppercase;letter-spacing:.15em;font-size:12px;z-index:30}
.nav-cta{display:none}
}
@media(max-width:900px){
.founder{margin:0 5vw 90px;grid-template-columns:1fr}
.founder-portrait{padding:0}
.founder-frame{height:680px}
.founder-signature{right:22px;bottom:30px;font-size:76px}
.founder-copy{padding:65px 8vw}
.founder-values{flex-wrap:wrap}
}
@media(max-width:520px){
.founder-portrait{padding:0}
.founder-frame{height:590px;border-radius:0}
.founder-signature{right:18px;bottom:24px;font-size:68px}
.founder-copy{padding:52px 7vw}
.founder-copy h2{font-size:39px}
.founder-copy .founder-lead{font-size:19px}
}