:root { --navy:#062b55; --ivory:#f7f6ed; --copper:#c33f49; --sky:#68b9dc; --ink:#17202a; --muted:#63707b; --line:#d8d3c9; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:#fff; font-family:Arial,Helvetica,sans-serif; }
a { color:inherit; text-decoration:none; }
.site-header { height:88px; padding:0 clamp(24px,6.65vw,96px); display:flex; align-items:center; justify-content:space-between; background:var(--ivory); position:relative; z-index:20; }
.brand { display:flex; align-items:center; color:var(--navy); overflow:hidden; }
.brand img { width:190px; height:62px; object-fit:cover; object-position:center; mix-blend-mode:multiply; }
.site-header nav { display:flex; gap:34px; font-size:14px; font-weight:700; }
.site-header nav a { position:relative; }
.site-header nav a:after { content:""; position:absolute; left:0; right:100%; bottom:-8px; height:2px; background:var(--copper); transition:.18s ease; }
.site-header nav a:hover:after,.site-header nav a:focus-visible:after { right:0; }
.header-call { border:1px solid var(--navy); border-radius:6px; padding:13px 18px; font-size:14px; font-weight:700; }
.hero { height:calc(100vh - 88px); min-height:690px; position:relative; overflow:hidden; color:#fff; }
.hero__image { position:absolute; inset:0; background:url("/projects/north-hills-adu/IMG_5046.jpeg") center 58%/cover no-repeat; transform:scale(1.025); animation:heroIn .8s ease-out forwards; }
.hero__overlay { position:absolute; inset:0; background:linear-gradient(90deg,rgba(11,31,51,.93) 0%,rgba(11,31,51,.82) 42%,rgba(11,31,51,.24) 74%,rgba(11,31,51,.08)); }
.hero__content { position:relative; z-index:2; width:min(610px,calc(100% - 48px)); margin-left:clamp(24px,6.65vw,96px); padding-top:clamp(100px,15vh,150px); animation:rise .5s ease-out both; }
.eyebrow,.section-kicker { text-transform:uppercase; letter-spacing:.2em; font-size:12px; font-weight:800; color:var(--copper); }
.hero h1 { margin:19px 0 24px; font-size:clamp(56px,5vw,76px); line-height:.97; letter-spacing:-.045em; text-transform:uppercase; }
.hero__lead { max-width:585px; color:#e4e8eb; font-size:19px; line-height:1.55; margin:0; }
.hero__actions { display:flex; gap:12px; margin-top:32px; }
.button { display:inline-flex; height:52px; padding:0 25px; align-items:center; justify-content:center; border-radius:7px; font-weight:800; font-size:15px; transition:.18s ease; }
.button:hover { transform:translateY(-2px); }
.button--copper { color:#fff; background:var(--copper); box-shadow:0 12px 35px rgba(0,0,0,.14); }
.button--copper:hover { background:#9f5f3c; }
.button--outline { border:1px solid rgba(255,255,255,.7); color:#fff; }
.trust { display:flex; gap:0; margin-top:29px; color:#dce2e6; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.trust span+span:before { content:"•"; color:var(--copper); margin:0 14px; }
.scroll-cue { position:absolute; z-index:2; right:clamp(24px,6.65vw,96px); bottom:38px; display:flex; align-items:center; gap:14px; text-transform:uppercase; font-size:10px; letter-spacing:.18em; }
.scroll-cue span { display:grid; place-items:center; width:34px; height:34px; border:1px solid rgba(255,255,255,.6); border-radius:50%; }
.section { padding:105px clamp(24px,6.65vw,96px); }
.intro { background:var(--ivory); }
.intro__heading { display:grid; grid-template-columns:1.25fr .75fr; gap:80px; align-items:end; margin-top:22px; }
h2 { font-size:clamp(38px,4vw,58px); line-height:1.04; letter-spacing:-.04em; margin:0; color:var(--navy); }
.intro__heading p,.projects__top p,.about__copy>p { font-size:17px; line-height:1.7; color:var(--muted); margin:0; }
.services { display:grid; grid-template-columns:repeat(3,1fr); margin-top:70px; border-top:1px solid var(--line); }
.service { padding:34px 30px 0 0; }
.service+.service { padding-left:30px; border-left:1px solid var(--line); }
.service>span { font-size:12px; color:var(--copper); font-weight:800; }
.service h3 { font-size:23px; color:var(--navy); margin:28px 0 14px; }
.service p { line-height:1.7; color:var(--muted); min-height:84px; }
.service a { font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.service a b { color:var(--copper); margin-left:7px; }
.projects { background:var(--navy); color:#fff; }
.section-kicker--light { color:#d29570; }
.projects__top { display:grid; grid-template-columns:1.1fr .7fr; align-items:end; gap:100px; }
.projects h2 { color:#fff; margin-top:20px; }
.projects__top p { color:#bdc7cf; }
.project-folders { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:64px; }
.project-folder { display:block; background:#fff; color:var(--ink); overflow:hidden; }
.project-folder__image { position:relative; height:480px; overflow:hidden; background:#142c44; }
.project-folder__image img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.project-folder:hover .project-folder__image img { transform:scale(1.035); }
.project-folder__image>span { position:absolute; right:18px; top:18px; padding:9px 12px; background:rgba(6,43,85,.9); color:#fff; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; }
.project-folder__copy { padding:28px 30px 31px; position:relative; }
.project-folder__copy p { margin:0 0 9px; color:var(--copper); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.15em; }
.project-folder__copy h3 { margin:0; color:var(--navy); font-size:27px; }
.project-folder__copy>span { display:inline-block; margin-top:22px; color:var(--navy); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.09em; }
.project-folder__copy b { color:var(--copper); margin-left:7px; }
.about { display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(50px,8vw,120px); align-items:center; background:#fff; }
.about__visual { min-height:620px; background:url("/projects/beverly-hills-bathroom/IMG_6395.jpeg") center/cover,var(--ivory); position:relative; }

.project-page { background:var(--ivory); min-height:100vh; }
.project-page .site-header { position:sticky; top:0; box-shadow:0 1px 0 rgba(6,43,85,.08); }
.project-nav-back { font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.project-hero { padding:90px clamp(24px,6.65vw,96px) 70px; background:var(--navy); color:#fff; }
.project-hero__back { display:inline-block; margin-bottom:45px; color:#c5d0d8; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.12em; }
.project-hero__meta { color:#d29570; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.18em; }
.project-hero h1 { max-width:900px; margin:15px 0 22px; color:#fff; font-size:clamp(48px,6vw,82px); line-height:.98; letter-spacing:-.045em; }
.project-hero p { max-width:720px; margin:0; color:#c5d0d8; font-size:18px; line-height:1.7; }
.gallery { padding:70px clamp(24px,6.65vw,96px) 105px; display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.gallery figure { margin:0; background:#e5e0d7; overflow:hidden; }
.gallery figure:nth-child(3n+1) { grid-column:span 2; }
.gallery img { display:block; width:100%; height:100%; max-height:760px; object-fit:cover; }
.gallery--single { grid-template-columns:1fr; }
.gallery--single figure { grid-column:auto!important; max-width:1040px; margin:0 auto; }
.gallery--single img { max-height:none; object-fit:contain; }
.project-cta { padding:80px clamp(24px,6.65vw,96px); background:#fff; display:flex; align-items:center; justify-content:space-between; gap:40px; }
.project-cta h2 { max-width:720px; }
.about__badge { position:absolute; right:-32px; bottom:42px; width:190px; height:190px; background:var(--copper); color:#fff; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.about__badge strong { font-size:28px; }.about__badge span { font-size:12px; text-transform:uppercase; letter-spacing:.11em; }
.about__copy h2 { margin:20px 0 28px; }
.about__copy ul { list-style:none; padding:0; margin:35px 0 0; }
.about__copy li { border-top:1px solid #e2ded7; padding:20px 0; display:grid; grid-template-columns:185px 1fr; gap:25px; }
.about__copy li b { color:var(--navy); }.about__copy li span { color:var(--muted); line-height:1.5; }
.testimonial { text-align:center; background:var(--ivory); }
.testimonial blockquote { max-width:970px; margin:0 auto; font-size:clamp(30px,3.4vw,50px); line-height:1.24; color:var(--navy); font-weight:700; letter-spacing:-.025em; }
.testimonial p { margin:30px 0 0; color:var(--copper); font-size:13px; text-transform:uppercase; letter-spacing:.12em; font-weight:800; }
.contact { display:grid; grid-template-columns:.72fr 1.28fr; gap:clamp(50px,7vw,100px); align-items:start; background:var(--navy); color:#fff; border-top:1px solid rgba(255,255,255,.12); }
.contact h2 { color:#fff; margin:18px 0 15px; }.contact p { color:#bdc7cf; margin:0; font-size:17px; }
.contact__intro { position:sticky; top:30px; }
.contact__direct { margin-top:42px; display:flex; flex-direction:column; gap:8px; color:#bdc7cf; font-size:13px; text-transform:uppercase; letter-spacing:.08em; }
.contact__direct a { width:max-content; color:#fff; font-size:18px; font-weight:800; letter-spacing:0; text-transform:none; border-bottom:1px solid var(--copper); padding-bottom:5px; }
.estimate-form { background:var(--ivory); color:var(--ink); padding:clamp(26px,4vw,48px); box-shadow:0 25px 70px rgba(0,0,0,.2); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.estimate-form label { display:flex; flex-direction:column; gap:9px; margin-bottom:20px; color:var(--navy); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.estimate-form input,.estimate-form select,.estimate-form textarea { width:100%; border:1px solid #ccc5b9; border-radius:3px; background:#fff; color:var(--ink); font:500 15px Arial,Helvetica,sans-serif; text-transform:none; letter-spacing:0; padding:14px; outline:none; transition:.18s ease; }
.estimate-form input,.estimate-form select { height:50px; }
.estimate-form textarea { resize:vertical; min-height:120px; }
.estimate-form input:focus,.estimate-form select:focus,.estimate-form textarea:focus { border-color:var(--sky); box-shadow:0 0 0 3px rgba(104,185,220,.18); }
.form-submit { display:flex; align-items:center; gap:22px; margin-top:4px; }
.form-submit button { border:0; cursor:pointer; white-space:nowrap; }
.form-submit button:disabled { opacity:.65; cursor:wait; transform:none; }
.form-submit span { color:var(--muted); font-size:11px; line-height:1.5; }
.form-message { margin-top:20px!important; padding:14px 16px; font-size:14px!important; font-weight:700; }
.form-message--success { color:#1f6640!important; background:#e9f5ed; }.form-message--error { color:#8f2730!important; background:#f9e9e9; }
footer { background:#071727; color:#c6d0d8; padding:70px clamp(24px,6.65vw,96px) 25px; }
.brand--light { color:#fff; }.brand--light img { mix-blend-mode:normal; border-radius:3px; }.footer__main { display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:45px; }
.footer__main>div { display:flex; flex-direction:column; gap:8px; font-size:14px; }.footer__main>div strong { color:#fff; text-transform:uppercase; letter-spacing:.12em; font-size:11px; margin-bottom:7px; }
.footer__bottom { border-top:1px solid rgba(255,255,255,.12); margin-top:60px; padding-top:22px; display:flex; justify-content:space-between; font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
@keyframes heroIn { to { transform:scale(1); } } @keyframes rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@media(max-width:900px){.site-header nav{display:none}.intro__heading,.projects__top,.about,.contact{grid-template-columns:1fr}.services{grid-template-columns:1fr}.service+.service{border-left:0;padding-left:0}.service{border-bottom:1px solid var(--line);padding:30px 0}.project-folders{grid-template-columns:1fr}.project-folder__image{height:420px}.about__visual{min-height:480px}.about__badge{right:20px}.footer__main{grid-template-columns:1fr 1fr}.contact__intro{position:static}.hero__overlay{background:rgba(6,43,85,.78)}.project-cta{align-items:flex-start;flex-direction:column}}
@media(max-width:600px){.site-header{height:76px}.brand img{width:145px;height:52px}.header-call{font-size:0;padding:11px}.header-call:after{content:"Call";font-size:13px}.hero{height:auto;min-height:700px}.hero__content{padding-top:110px}.hero h1{font-size:50px}.hero__lead{font-size:17px}.hero__actions{flex-direction:column;align-items:flex-start}.trust{flex-direction:column;gap:9px}.trust span+span:before{display:none}.scroll-cue{display:none}.section{padding-top:75px;padding-bottom:75px}.intro__heading{gap:25px}.projects__top{gap:25px}.project-folders{margin-top:40px}.project-folder__image{height:350px}.project-folder__copy{padding:23px}.about__copy li{grid-template-columns:1fr;gap:7px}.form-row{grid-template-columns:1fr}.estimate-form{margin-left:-8px;margin-right:-8px}.form-submit{align-items:flex-start;flex-direction:column}.footer__main{grid-template-columns:1fr}.footer__bottom{flex-direction:column;gap:10px}.project-nav-back{display:none}.project-hero{padding-top:60px}.gallery{grid-template-columns:1fr;padding-top:35px}.gallery figure,.gallery figure:nth-child(3n+1){grid-column:auto}.project-cta{padding-top:60px;padding-bottom:60px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}