:root{
  --navy:#0a0a0a; --navy2:#171717; --red:#f5a000; --white:#fff;
  --light:#f5f7fa; --text:#13243a; --muted:#65758a; --line:#dfe5eb;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--text);background:#fff;line-height:1.55}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{width:min(var(--max),92%);margin:auto}
.topbar{background:var(--navy);color:#fff;font-size:.92rem}
.topbar .container{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:8px 0}
.topbar a{font-weight:700}
.header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.nav{height:86px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{display:flex;align-items:center;gap:10px;min-width:270px}
.logo-mark{width:56px;height:42px;position:relative}
.logo-mark:before{content:"";position:absolute;left:4px;top:14px;width:42px;height:28px;border-left:7px solid var(--navy);border-top:7px solid var(--navy);transform:skewY(-32deg) rotate(5deg)}
.logo-mark:after{content:"";position:absolute;left:26px;top:23px;width:13px;height:13px;background:var(--red);box-shadow:16px 0 0 var(--red)}
.brand strong{display:block;font-size:1.5rem;letter-spacing:.04em;color:var(--navy)}
.brand strong span{color:var(--red)}
.brand small{font-size:.68rem;font-weight:700;letter-spacing:.08em}
.links{display:flex;align-items:center;gap:24px;font-size:.92rem;font-weight:700}
.links a:hover,.links a.active{color:var(--red)}
.header-cta{background:var(--red);color:#fff;padding:12px 18px;border-radius:6px;font-weight:800;white-space:nowrap}
.menu-btn{display:none;background:none;border:0;font-size:1.7rem}
.hero{min-height:585px;background:
linear-gradient(90deg,rgba(3,33,61,.95) 0%,rgba(3,33,61,.78) 45%,rgba(3,33,61,.08) 75%),
url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=1800&q=85') center/cover no-repeat;
color:#fff;display:flex;align-items:center}
.hero-grid{display:grid;grid-template-columns:1.2fr .72fr;gap:55px;align-items:center;padding:62px 0}
.eyebrow{font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.hero h1{font-size:clamp(2.45rem,5vw,4.5rem);line-height:.98;margin:12px 0 20px;text-transform:uppercase}
.hero h1 .red{color:#ff2b2f}
.hero p{font-size:1.12rem;max-width:700px}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin:28px 0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 20px;border-radius:6px;font-weight:800;border:2px solid transparent;cursor:pointer}
.btn.red{background:var(--red);color:#fff}
.btn.white{background:#fff;color:var(--navy)}
.btn.outline{border-color:#fff;color:#fff;background:transparent}
.btn.navy{background:var(--navy);color:#fff}
.trust-row{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:26px;font-weight:800;font-size:.88rem}
.form-card{background:#fff;color:var(--text);padding:28px;border-radius:8px;box-shadow:0 18px 45px rgba(0,0,0,.25)}
.form-card h2{margin:0;color:var(--navy);font-size:1.8rem;text-transform:uppercase}
.form-card p{font-size:.9rem;margin-top:4px}
.field{width:100%;padding:13px 12px;border:1px solid #cfd6df;border-radius:5px;margin:7px 0;font:inherit}
.form-card .btn{width:100%;margin-top:8px}
.form-note{font-size:.75rem;color:var(--muted);margin-top:8px}
.section{padding:68px 0}
.section.light{background:var(--light)}
.section.navy{background:var(--navy);color:#fff}
.section-title{text-align:center;margin-bottom:34px}
.section-title h2{font-size:2.25rem;color:var(--navy);margin:0;text-transform:uppercase}
.section.navy .section-title h2{color:#fff}
.section-title p{margin:4px 0;color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.card{background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;box-shadow:0 7px 22px rgba(0,0,0,.06)}
.card img{height:185px;width:100%;object-fit:cover}
.card-body{padding:18px}
.card h3{color:var(--navy);text-transform:uppercase;font-size:1.03rem;margin:0 0 8px}
.card p{font-size:.9rem;color:#526176}
.card .learn{color:var(--red);font-weight:800;font-size:.88rem}
.split{display:grid;grid-template-columns:1fr 1.65fr;gap:34px;align-items:center}
.split h2{font-size:2.25rem;line-height:1.05;text-transform:uppercase;margin:0 0 14px}
.before-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ba{display:grid;grid-template-columns:1fr 1fr;background:#fff;border-radius:6px;overflow:hidden;color:var(--text)}
.ba figure{margin:0;position:relative}
.ba img{height:220px;width:100%;object-fit:cover}
.tag{position:absolute;left:8px;bottom:8px;background:var(--red);color:#fff;padding:5px 8px;font-weight:800;font-size:.72rem;border-radius:3px}
.tag.after{background:#19964b}
.review-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:30px;align-items:stretch}
.review-box,.area-box{background:#fff;border:1px solid var(--line);border-radius:8px;padding:28px}
.stars{color:#f3b400;font-size:1.35rem;letter-spacing:2px}
.quote{font-style:italic;font-size:1.05rem}
.area-list{columns:2;list-style:none;padding:0;margin:18px 0}
.area-list li{margin:7px 0}
.cta{background:
linear-gradient(rgba(4,42,76,.75),rgba(4,42,76,.78)),
url('https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1800&q=80') center/cover;color:#fff;text-align:center;padding:55px 0}
.cta h2{font-size:2.35rem;margin:0;text-transform:uppercase}
.footer{background:#041e39;color:#fff;padding:40px 0 18px}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:45px}
.footer h4{margin:0 0 12px}
.footer a{display:block;margin:6px 0;color:#dfe8f2}
.legal{border-top:1px solid rgba(255,255,255,.15);margin-top:30px;padding-top:15px;font-size:.8rem;color:#c7d1dc}
.page-hero{background:linear-gradient(90deg,rgba(4,42,76,.96),rgba(4,42,76,.72)),url('https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?auto=format&fit=crop&w=1800&q=80') center/cover;color:#fff;padding:90px 0}
.page-hero h1{font-size:clamp(2.4rem,5vw,4.3rem);margin:0 0 12px;text-transform:uppercase}
.content-grid{display:grid;grid-template-columns:1.6fr .8fr;gap:40px}
.prose h2{color:var(--navy);font-size:2rem;margin-top:34px}
.prose h3{color:var(--navy)}
.checks{padding:0;list-style:none}
.checks li{margin:10px 0;padding-left:27px;position:relative}
.checks li:before{content:"✓";position:absolute;left:0;color:var(--red);font-weight:900}
.sidebar{background:var(--light);padding:25px;border-radius:8px;align-self:start;position:sticky;top:110px}
.contact-strip{background:var(--red);color:#fff;padding:18px 0}
.contact-strip .container{display:flex;justify-content:center;gap:18px;align-items:center;flex-wrap:wrap;font-weight:800}
.faq details{border-bottom:1px solid var(--line);padding:15px 0}
.faq summary{font-weight:800;cursor:pointer;color:var(--navy)}
.notice{background:#fff7db;border:1px solid #ead58b;padding:12px 14px;border-radius:6px;font-size:.88rem}
@media(max-width:980px){
  .links{display:none;position:absolute;top:86px;left:0;right:0;background:#fff;padding:20px;flex-direction:column;align-items:flex-start;border-bottom:1px solid var(--line)}
  .links.open{display:flex}.menu-btn{display:block}.header-cta{display:none}
  .hero-grid,.split,.review-grid,.content-grid{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(2,1fr)}
  .form-card{max-width:580px}.sidebar{position:static}.footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .topbar .container{font-size:.78rem}.topbar span:nth-child(2){display:none}
  .nav{height:74px}.logo{min-width:0}.brand strong{font-size:1.15rem}.brand small{display:none}
  .links{top:74px}.hero{min-height:auto}.hero-grid{padding:45px 0;gap:25px}
  .hero h1{font-size:2.6rem}.actions{flex-direction:column}.btn{width:100%}
  .cards{grid-template-columns:1fr}.before-grid{grid-template-columns:1fr}.ba img{height:170px}
  .area-list{columns:1}.footer-grid{grid-template-columns:1fr}.section{padding:50px 0}
}

.project-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.project-gallery figure{margin:0;background:#fff;border-radius:7px;overflow:hidden;color:#13243a}
.project-gallery img{width:100%;height:245px;object-fit:cover}
.project-gallery figcaption{padding:12px 14px;font-weight:800;text-align:center}
.full-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.full-gallery figure{margin:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff}
.full-gallery img{width:100%;height:285px;object-fit:cover}
.full-gallery figcaption{padding:13px 15px;font-weight:800;color:var(--navy)}
@media(max-width:980px){.project-gallery,.full-gallery{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.project-gallery,.full-gallery{grid-template-columns:1fr}.project-gallery img,.full-gallery img{height:260px}}

/* V3 brand system */
:root{--orange:#f5a000;--black:#080808}
.topbar,.footer{background:#050505}
.header{background:#0a0a0a;border-bottom-color:#2b2b2b}
.nav{height:94px}
.site-logo{width:215px;height:82px;object-fit:contain;object-position:left center}
.footer-logo{width:190px;max-height:150px;object-fit:contain}
.links{color:#fff}
.links a:hover,.links a.active{color:var(--orange)}
.header-cta,.btn.red{background:var(--orange);color:#111}
.hero{background:
linear-gradient(90deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.76) 48%,rgba(0,0,0,.18) 78%),
url('assets/projects/project-10.webp') center/cover no-repeat}
.hero h1 .red,.learn,.card .learn{color:var(--orange)}
.section.navy{background:#080808}
.tag{background:var(--orange);color:#111}
.contact-strip{background:var(--orange);color:#111}
.cta{background:linear-gradient(rgba(0,0,0,.72),rgba(0,0,0,.78)),url('assets/projects/project-01.jpeg') center/cover}
.problem-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.problem-card{position:relative;overflow:hidden;border:1px solid #333;border-radius:7px;background:#111}
.problem-card img{width:100%;height:220px;object-fit:cover;opacity:.88;transition:.25s}
.problem-card:hover img{transform:scale(1.025);opacity:1}
.problem-card h3{position:absolute;left:0;right:0;bottom:0;margin:0;padding:18px 14px 12px;background:linear-gradient(transparent,rgba(0,0,0,.95));color:#fff;text-transform:uppercase;font-size:1rem}
.problem-card h3 span{color:var(--orange)}
@media(max-width:980px){.problem-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.site-logo{width:165px;height:68px}.problem-grid{grid-template-columns:1fr}.problem-card img{height:230px}}

/* V4 desktop-safe contact UX */
.contact-modal{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:9999;display:none;align-items:center;justify-content:center;padding:20px}
.contact-modal.open{display:flex}
.contact-panel{width:min(520px,100%);background:#fff;border-radius:12px;padding:28px;box-shadow:0 22px 70px rgba(0,0,0,.38);color:#161616;position:relative}
.contact-panel h2{margin:0 0 8px;font-size:2rem;color:#0a0a0a;text-transform:uppercase}
.contact-number{font-size:2rem;font-weight:900;background:#f4f4f4;border:1px solid #ddd;padding:16px;border-radius:8px;text-align:center;margin:18px 0}
.modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.modal-close{position:absolute;right:14px;top:12px;background:none;border:0;font-size:1.8rem;cursor:pointer}
.copy-status{min-height:22px;margin-top:8px;font-weight:800;color:#2d7a45;text-align:center}
.form-status{margin-top:12px;padding:12px;border-radius:6px;display:none;font-weight:700}
.form-status.success{display:block;background:#e9f8ee;border:1px solid #a9dfb8;color:#1c6634}
.form-status.error{display:block;background:#fff0f0;border:1px solid #e6b1b1;color:#8f2323}
.form-card textarea.field{min-height:115px;resize:vertical}
.honeypot{position:absolute;left:-9999px;opacity:0;pointer-events:none}
@media(max-width:620px){.contact-number{font-size:1.65rem}.modal-actions{grid-template-columns:1fr}}