:root {
--slate: #334a5e;
--slate-deep: #243443;
--linen: #f4f1ea;
--ink: #2b3540;
--ink-soft: #5b6a77;
--line: #d8d3c6;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: "Avenir Next", "Segoe UI", system-ui, sans-serif; color: var(--ink); background: #fff; line-height: 1.65; }
.wrap { max-width: 56rem; margin-inline: auto; padding-inline: 1.2rem; }
.narrow { max-width: 42rem; }
.topbar { background: #fff; border-bottom: 1px solid var(--line); padding: .85rem 0; }
.topbar .wrap { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.4rem; }
.brand { font-size: 1.25rem; font-weight: 800; color: var(--slate-deep); text-decoration: none; letter-spacing: .01em; }
.brand span { color: var(--ink-soft); font-weight: 500; }
.topbar nav { display: flex; gap: 1.2rem; margin-left: auto; }
.topbar nav a { color: var(--slate); text-decoration: none; font-weight: 600; }
.topbar nav a:hover { text-decoration: underline; }
.hero { background: var(--linen); padding: 3rem 0; text-align: center; }
.hero.small { padding: 2rem 0; }
.hero h1 { margin: .4rem 0 0; color: var(--slate-deep); font-size: clamp(1.6rem, 3.6vw, 2.4rem); }
.hero .lede { margin: .5rem 0 0; color: var(--ink-soft); font-size: 1.05rem; }
.louvres { display: grid; gap: 6px; width: 6.5rem; margin: 0 auto; }
.louvres span { height: 9px; border-radius: 5px; background: var(--slate); opacity: .85; }
.louvres span:nth-child(even) { opacity: .45; }
.band { padding: 2.4rem 0; }
.chip-list, .svc-grid { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.chip-list li, .svc-grid li { background: var(--linen); border: 1px solid var(--line); border-radius: 999px; padding: .35rem .9rem; font-size: .92rem; color: var(--slate-deep); }
.svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.svc-grid li { border-radius: 8px; text-align: center; padding: .8rem .6rem; font-weight: 600; }
.btn { display: inline-block; font-weight: 700; background: var(--slate); color: #fff; border-radius: 8px; padding: .7rem 1.4rem; text-decoration: none; }
.btn:hover { background: var(--slate-deep); }
.btn.ghost { background: transparent; color: var(--slate); border: 2px solid var(--slate); }
.enquiry { display: grid; gap: .9rem; }
.enquiry .two { display: grid; gap: .9rem; }
@media (min-width: 560px) { .enquiry .two { grid-template-columns: 1fr 1fr; } }
.enquiry label { font-weight: 600; display: grid; gap: .3rem; }
.enquiry input, .enquiry textarea { font: inherit; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 8px; width: 100%; }
.enquiry button { font: inherit; font-weight: 700; background: var(--slate); color: #fff; border: 0; border-radius: 8px; padding: .75rem 1.5rem; cursor: pointer; justify-self: start; }
.enquiry button:hover { background: var(--slate-deep); }
[data-lead-success] { color: var(--slate); font-weight: 700; }
[data-lead-error] { color: #a33; font-weight: 700; }
.hp { position: absolute; left: -9999px; }
.foot { background: var(--slate-deep); color: #cfd9e2; padding: 1.1rem 0; margin-top: 1.5rem; }
.foot p { margin: 0; font-size: .88rem; text-align: center; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}