@import url('https://fonts.googleapis.com/css2?family=Spectral:wght@500;600&family=Rubik:wght@400;500&display=swap');
:root{--primary:#1f3a5f;--accent:#e2725b;--bg:#fcfaf6;--bg-alt:#f0ebe0;--text:#25303f;--muted:#647082;--on-primary:#fcfaf6;--radius:8px;}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Rubik',system-ui,sans-serif;color:var(--text);background:var(--bg);line-height:1.65;font-size:17px}
h1,h2,h3{font-family:'Spectral',serif;line-height:1.15;text-transform:none;color:var(--primary)}
a{color:var(--primary)}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
.btn{display:inline-block;background:var(--primary);color:var(--on-primary);padding:13px 28px;border-radius:var(--radius);text-decoration:none;font-weight:600;border:none;font-size:16px;cursor:pointer}
.btn.alt{background:var(--accent);color:var(--text)}
header nav a{text-decoration:none;margin-left:22px;font-size:15px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px;margin-top:30px}
.card{background:var(--bg);border:1px solid var(--bg-alt);border-radius:var(--radius);padding:26px}
.card h3{margin-bottom:10px;font-size:1.15rem}
.card p{font-size:.95rem;color:var(--muted)}
.card a{font-size:.9rem}
section{padding:58px 0}
section.alt{background:var(--bg-alt)}
.eyebrow{letter-spacing:.22em;text-transform:uppercase;font-size:.75rem;color:var(--accent);font-weight:700;margin-bottom:14px}
footer{background:var(--primary);color:var(--on-primary);padding:44px 0;font-size:.88rem}
footer a{color:var(--on-primary)}
.faq dt{font-weight:700;margin-top:22px}
.faq dd{margin:8px 0 0;color:var(--muted)}
form .row{margin-bottom:16px}
input,select,textarea{width:100%;padding:12px;border:1px solid var(--muted);border-radius:var(--radius);font:inherit;background:var(--bg)}
label{font-size:.85rem;font-weight:600;display:block;margin-bottom:6px}
.notice{font-size:.8rem;color:var(--muted);margin-top:12px}
@media(max-width:720px){header .wrap{flex-direction:column;gap:12px}header nav a{margin:0 10px}}
header{border-bottom:1px solid var(--bg-alt);padding:20px 0}header .wrap{display:flex;justify-content:space-between;align-items:center}.hero{padding:90px 0;background:var(--primary)} .hero h1{color:var(--on-primary);font-size:2.6rem;max-width:18ch} .hero p{color:var(--on-primary);opacity:.85;max-width:60ch;margin:22px 0 32px} .hero .btn{background:var(--accent);color:var(--text)}

/* roller shutters are shading products, not security products — see design-brief.md */
.rs-note{font-size:.94rem;line-height:1.6;opacity:.85;margin:14px 0 0;
  padding:12px 14px;border-left:2px solid currentColor}
.rs-note strong{font-weight:600}