:root{--navy:#00394c;--slate:#1d5568;--ink:#1c2430;--muted:#5a6677;--bg:#f6f7f9;--orange:#971b1d;--orange2:#e0676b;--line:#e2e6ec}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);line-height:1.6;background:#fff}
a{color:var(--orange)}img,svg{max-width:100%}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px}.skip:focus{left:10px;top:10px;background:#fff;padding:8px;z-index:99}
header.site{background:#fff;border-bottom:1px solid var(--line);box-shadow:0 1px 6px rgba(0,0,0,.05);position:sticky;top:0;z-index:10}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:64px;gap:12px}
.logo{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:800;line-height:1.1}
.logo small{display:block;font-weight:500;color:#c5cddb;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.menu-btn{background:none;border:1px solid #9fb3bd;color:var(--navy);border-radius:6px;padding:6px 10px;font:inherit}
nav ul{list-style:none;margin:0;padding:0;display:none}
nav ul.open{display:block;position:absolute;left:0;right:0;top:64px;background:#fff;padding:8px 20px 16px;border-bottom:1px solid var(--line)}
nav a{color:var(--navy);text-decoration:none;display:block;padding:8px 0;font-weight:500}nav a:hover{color:var(--orange)}
@media(min-width:860px){.menu-btn{display:none}nav ul{display:flex;gap:24px}nav ul.open{position:static;padding:0}}
.hero{position:relative;background:var(--navy);color:#fff;overflow:hidden;padding:72px 0 88px}
.hero .topo{position:absolute;inset:0;width:100%;height:100%;opacity:.22}
.hero .wrap{position:relative}
.eyebrow{color:var(--orange2);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.8rem}
h1{font-size:clamp(2rem,5vw,3.2rem);line-height:1.12;margin:.3em 0 .4em;max-width:18ch}
.hero p{font-size:1.15rem;color:#d4dbe6;max-width:60ch}
.btn{display:inline-block;background:var(--orange);color:#fff;text-decoration:none;font-weight:700;padding:13px 22px;border-radius:8px;border:0;font:inherit;font-weight:700;cursor:pointer}
.btn:hover{background:#7a1517}.btn.ghost{background:transparent;border:2px solid #8fa0bb;margin-left:8px}
.cta{margin-top:28px;display:flex;flex-wrap:wrap;gap:10px}.cta .ghost{margin-left:0}
section{padding:72px 0}section.alt{background:var(--bg)}
h2{font-size:clamp(1.6rem,3.5vw,2.2rem);margin:0 0 .3em;color:var(--navy)}
.lead{color:var(--muted);max-width:65ch;margin-bottom:32px}
.grid{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:640px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.grid.three{grid-template-columns:repeat(3,1fr)}}
.card{background:#fff;border:1px solid var(--line);border-top:4px solid var(--orange);border-radius:10px;padding:24px}
.card h3{margin:12px 0 6px;color:var(--navy);font-size:1.15rem}.card p{margin:0;color:var(--muted)}
.icon{width:40px;height:40px;color:var(--slate)}
.types{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));list-style:none;padding:0;margin:0}
.types li{background:#fff;border:1px solid var(--line);border-left:4px solid var(--slate);border-radius:8px;padding:16px 18px;font-weight:600;color:var(--navy)}
.types li span{display:block;font-weight:400;color:var(--muted);font-size:.92rem}
.split{display:grid;gap:36px;align-items:center}@media(min-width:860px){.split{grid-template-columns:1.1fr .9fr}}
.code{background:var(--navy);color:#d4dbe6;border-radius:10px;padding:22px;font-family:ui-monospace,Consolas,monospace;font-size:.88rem;overflow:auto}
.code .k{color:var(--orange2)}.code .c{color:#8796ae}
ul.checks{padding:0;list-style:none}ul.checks li{padding-left:28px;position:relative;margin:8px 0}
ul.checks li::before{content:"";position:absolute;left:4px;top:.5em;width:12px;height:7px;border-left:3px solid var(--orange);border-bottom:3px solid var(--orange);transform:rotate(-45deg)}
.badge{display:inline-block;background:var(--navy);color:#fff;border-radius:999px;padding:6px 14px;font-weight:600;font-size:.9rem}
.placeholder{color:var(--muted);font-style:italic;background:#fbf3f3;border:1px dashed #d9a2a4;padding:12px 16px;border-radius:8px}
.contact-info a{font-weight:700;font-size:1.1rem;text-decoration:none}
form{display:grid;gap:14px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:24px}
label{font-weight:600;font-size:.92rem;color:var(--navy)}
input,textarea,select{width:100%;font:inherit;padding:11px 12px;border:1px solid #c3cad6;border-radius:6px;margin-top:4px}
input:focus,textarea:focus,select:focus,a:focus-visible,.btn:focus-visible{outline:3px solid var(--orange2);outline-offset:2px}
footer{background:var(--navy);color:#aeb9cb;padding:32px 0;font-size:.9rem}footer a{color:#e6eaf1}
.logo img{display:block;height:auto;width:180px}.flogo{background:#fff;padding:8px 12px;border-radius:8px;height:auto}footer a:hover{color:#fff}
.hero-plan{background-color:var(--navy);background-image:linear-gradient(100deg,rgba(0,57,76,.90) 0%,rgba(0,57,76,.84) 50%,rgba(0,57,76,.72) 100%),url(/assets/hero-siteplan.jpg);background-image:linear-gradient(100deg,rgba(0,57,76,.90) 0%,rgba(0,57,76,.84) 50%,rgba(0,57,76,.72) 100%),image-set(url(/assets/hero-siteplan.webp) type("image/webp"),url(/assets/hero-siteplan.jpg) type("image/jpeg"));background-size:cover;background-position:center;background-repeat:no-repeat}
.hero-plan h1,.hero-plan p{text-shadow:0 1px 3px rgba(0,0,0,.35)}
@media (max-width:640px){.hero-plan{background-image:linear-gradient(180deg,rgba(0,57,76,.90),rgba(0,57,76,.82)),url(/assets/hero-siteplan.jpg);background-image:linear-gradient(180deg,rgba(0,57,76,.90),rgba(0,57,76,.82)),image-set(url(/assets/hero-siteplan.webp) type("image/webp"),url(/assets/hero-siteplan.jpg) type("image/jpeg"))}}
/* hero crossfade: base=siteplan (no overlay), ::before=grading (animated), ::after=overlay on top */
.hero-plan{background-image:url(/assets/hero-siteplan.jpg);background-image:image-set(url(/assets/hero-siteplan.webp) type("image/webp"),url(/assets/hero-siteplan.jpg) type("image/jpeg"))}
.hero-plan::before,.hero-plan::after{content:"";position:absolute;inset:0;pointer-events:none}
.hero-plan::before{background:url(/assets/hero-grading.jpg) center/cover no-repeat;background-image:image-set(url(/assets/hero-grading.webp) type("image/webp"),url(/assets/hero-grading.jpg) type("image/jpeg"));opacity:0;will-change:opacity;animation:heroFade 17s ease-in-out infinite}
.hero-plan::after{background:linear-gradient(100deg,rgba(0,57,76,.90) 0%,rgba(0,57,76,.84) 50%,rgba(0,57,76,.72) 100%)}
.hero-plan .wrap{position:relative;z-index:1}
/* 17s cycle: siteplan 7s, fade 1.5s, grading 7s, fade 1.5s */
@keyframes heroFade{0%,41.18%{opacity:0}50%,91.18%{opacity:1}100%{opacity:0}}
@media (max-width:640px){.hero-plan{background-image:url(/assets/hero-siteplan.jpg);background-image:image-set(url(/assets/hero-siteplan.webp) type("image/webp"),url(/assets/hero-siteplan.jpg) type("image/jpeg"))}.hero-plan::after{background:linear-gradient(180deg,rgba(0,57,76,.90),rgba(0,57,76,.82))}}
@media (prefers-reduced-motion:reduce){.hero-plan::before{animation:none;opacity:0;background:none}}