@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');
:root { --ink:#111318; --muted:#69707d; --paper:#f7f5f0; --card:#fff; --accent:#d96b32; --accent-dark:#a94718; --line:rgba(17,19,24,.1); --shadow:0 20px 55px rgba(17,19,24,.12); --radius:24px; }
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:'DM Sans',Arial,sans-serif; background:var(--paper); color:var(--ink); line-height:1.65; }
body.dark-mode { --paper:#101216; --ink:#f4f1ea; --card:#171a20; --muted:#a8adb8; --line:rgba(255,255,255,.1); --shadow:0 20px 55px rgba(0,0,0,.35); }
a { color:inherit; } img { max-width:100%; display:block; } button { font:inherit; }
.site-nav { position:sticky; top:0; z-index:1000; background:rgba(247,245,240,.9); backdrop-filter:blur(16px); border-bottom:1px solid var(--line); }
body.dark-mode .site-nav { background:rgba(16,18,22,.9); }
.nav-inner { max-width:1180px; margin:auto; min-height:76px; padding:0 24px; display:flex; align-items:center; gap:28px; }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; font-weight:700; letter-spacing:-.02em; margin-right:auto; }
.brand img { width:48px; height:48px; object-fit:contain; } .brand span { max-width:180px; line-height:1.15; }
.nav-links { display:flex; align-items:center; gap:6px; }
.nav-links a { text-decoration:none; padding:10px 13px; border-radius:999px; font-weight:600; font-size:.92rem; }
.nav-links a:hover,.nav-links a.active { background:var(--ink); color:var(--paper); }
.nav-actions { display:flex; gap:8px; align-items:center; }
.icon-btn,.menu-btn { border:1px solid var(--line); background:var(--card); color:var(--ink); width:42px; height:42px; border-radius:50%; cursor:pointer; }
.menu-btn { display:none; border-radius:12px; }
.container { width:min(1180px,calc(100% - 48px)); margin:auto; }
.eyebrow { text-transform:uppercase; letter-spacing:.16em; font-size:.76rem; font-weight:700; color:var(--accent); }
h1,h2,h3 { line-height:1.1; letter-spacing:-.035em; } h1,h2 { font-family:'Playfair Display',Georgia,serif; }
.hero { min-height:calc(100vh - 76px); position:relative; display:grid; place-items:center; overflow:hidden; isolation:isolate; }
.hero-media { position:absolute; inset:0; z-index:-2; background:url('assets/plumber.jpg') center/cover no-repeat; transform:scale(1.04); }
.hero::after { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(8,10,14,.88),rgba(8,10,14,.42),rgba(8,10,14,.18)); }
.hero-content { width:min(1180px,calc(100% - 48px)); color:#fff; padding:90px 0; }
.hero h1 { font-size:clamp(3.3rem,8vw,7rem); max-width:820px; margin:16px 0 22px; }
.hero p { max-width:620px; font-size:clamp(1.05rem,2vw,1.3rem); color:rgba(255,255,255,.82); }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 20px; border-radius:999px; border:1px solid transparent; text-decoration:none; font-weight:700; cursor:pointer; transition:.25s ease; }
.btn-primary { background:var(--accent); color:#fff; } .btn-primary:hover { background:var(--accent-dark); transform:translateY(-2px); }
.btn-ghost { background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.3); } .btn-ghost:hover { background:#fff; color:#111; }
.section { padding:100px 0; } .section-head { display:flex; justify-content:space-between; gap:30px; align-items:end; margin-bottom:42px; }
.section-head h2 { font-size:clamp(2.2rem,5vw,4rem); max-width:700px; margin-top:10px; }
.section-head p { max-width:480px; color:var(--muted); }
.intro-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:stretch; }
.feature-card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.feature-card img { width:100%; height:420px; object-fit:cover; } .feature-copy { padding:28px; }
.feature-copy h3 { font-size:1.6rem; margin:8px 0 10px; } .feature-copy p { color:var(--muted); }
.mini-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; } .mini-grid img { height:198px; width:100%; object-fit:cover; border-radius:var(--radius); }
.statement { background:var(--ink); color:var(--paper); border-radius:var(--radius); padding:58px; } .statement h2 { font-size:clamp(2.4rem,5vw,4.6rem); max-width:850px; }
.statement p { color:rgba(255,255,255,.7); max-width:650px; margin-top:18px; }
.service-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.service-card { padding:30px; border:1px solid var(--line); border-radius:20px; background:var(--card); }
.service-number { color:var(--accent); font-weight:700; } .service-card h3 { margin:30px 0 10px; font-size:1.35rem; } .service-card p { color:var(--muted); }
.page-hero { padding:90px 0 55px; } .page-hero h1 { font-size:clamp(3rem,7vw,6rem); max-width:850px; margin:12px 0; } .page-hero p { max-width:700px; color:var(--muted); font-size:1.08rem; }
.filter-bar { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:28px; } .filter-btn { border:1px solid var(--line); background:var(--card); color:var(--ink); padding:10px 16px; border-radius:999px; cursor:pointer; font-weight:700; }
.filter-btn.active,.filter-btn:hover { background:var(--ink); color:var(--paper); }
.gallery { columns:3 280px; column-gap:18px; } .project-card { break-inside:avoid; margin:0 0 18px; position:relative; overflow:hidden; border-radius:20px; background:var(--card); border:1px solid var(--line); cursor:zoom-in; }
.project-card img { width:100%; height:auto; transition:transform .5s ease; } .project-card:hover img { transform:scale(1.045); }
.project-caption { padding:14px 16px; } .project-caption strong { display:block; } .project-caption span { color:var(--muted); font-size:.86rem; }
.lightbox { position:fixed; inset:0; z-index:2000; display:none; place-items:center; padding:28px; background:rgba(0,0,0,.9); } .lightbox.open { display:grid; }
.lightbox img { max-height:86vh; max-width:min(1100px,94vw); object-fit:contain; border-radius:14px; } .lightbox button { position:absolute; top:20px; right:24px; background:#fff; border:0; width:44px; height:44px; border-radius:50%; cursor:pointer; font-size:1.4rem; }
.about-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:55px; align-items:center; } .about-image { border-radius:30px; overflow:hidden; box-shadow:var(--shadow); } .about-image img { width:100%; height:580px; object-fit:cover; }
.copy h2 { font-size:clamp(2.4rem,5vw,4.4rem); margin:12px 0 20px; } .copy p { color:var(--muted); margin-bottom:18px; }
.reason-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; } .reason-card { padding:34px; background:var(--card); border:1px solid var(--line); border-radius:24px; }
.reason-card .icon { font-size:1.8rem; } .reason-card h3 { margin:20px 0 8px; font-size:1.4rem; } .reason-card p { color:var(--muted); }
.contact-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; } .contact-card { padding:38px; background:var(--card); border:1px solid var(--line); border-radius:24px; }
.contact-card h3 { font-size:1.5rem; margin:12px 0 8px; } .contact-card p { color:var(--muted); margin-bottom:22px; }
.footer { border-top:1px solid var(--line); padding:35px 0; margin-top:40px; } .footer-inner { display:flex; justify-content:space-between; gap:20px; color:var(--muted); font-size:.9rem; }
.reveal { opacity:0; transform:translateY(22px); transition:opacity .7s ease,transform .7s ease; } .reveal.visible { opacity:1; transform:none; }
@media(max-width:850px){
.nav-inner{padding:0 18px}.menu-btn{display:block}.nav-links{display:none;position:absolute;top:76px;left:12px;right:12px;padding:12px;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch}.nav-links.open{display:flex}.nav-links a{border-radius:12px}
.intro-grid,.about-grid{grid-template-columns:1fr}.service-grid{grid-template-columns:1fr}.contact-grid,.reason-grid{grid-template-columns:1fr}.section{padding:75px 0}.statement{padding:35px}.section-head{display:block}.section-head p{margin-top:15px}.mini-grid img{height:240px}.hero-content{padding:60px 0}
}
@media(max-width:520px){
.container,.hero-content{width:min(100% - 32px,1180px)} .brand span{display:none}.hero h1{font-size:3.2rem}.hero-actions .btn{width:100%}.mini-grid{grid-template-columns:1fr}.mini-grid img{height:260px}.footer-inner{display:block}.footer-inner p+p{margin-top:8px}
}