:root {
--teal: #124d43;
--teal-deep: #0b332c;
--cream: #f4e9c9;
--ink: #22302c;
--ink-soft: #51625c;
--paper: #ffffff;
--tint: #f0f4f2;
--line: #d4ddd9;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink); background: var(--paper); line-height: 1.6; }
.wrap { max-width: 60rem; margin-inline: auto; padding-inline: 1.2rem; }
.narrow { max-width: 40rem; }
.topbar { background: var(--teal-deep); padding: .8rem 0; }
.brand { margin: 0; color: #fff; font-weight: 800; letter-spacing: .02em; }
.brand span { color: var(--cream); }
.hero { background: linear-gradient(160deg, var(--teal) 0%, var(--teal-deep) 100%); color: #fff; padding: 2.6rem 0 2.8rem; }
.hero h1 { margin: 0 0 .6rem; font-size: clamp(1.5rem, 3.4vw, 2.2rem); line-height: 1.25; }
.hero .lede { margin: 0; color: var(--cream); font-size: 1.08rem; max-width: 38rem; }
.band { padding: 2.4rem 0; }
.band-tint { background: var(--tint); }
.band h2 { color: var(--teal); margin: 0 0 .9rem; }
.calc-grid { display: grid; gap: 1.6rem; }
@media (min-width: 820px) { .calc-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.calc-card { background: var(--tint); border: 1px solid var(--line); border-radius: 12px; padding: 1.4rem; display: grid; gap: 1rem; }
.calc-card label { font-weight: 600; display: grid; gap: .35rem; }
.unit-wrap { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 8px; background: #fff; overflow: hidden; }
.unit-wrap .unit { padding: .55rem .7rem; background: var(--teal); color: var(--cream); font-weight: 700; font-size: .9rem; }
.unit-wrap.right { flex-direction: row; }
.unit-wrap.right input { order: -1; }
.unit-wrap input { flex: 1; min-width: 0; border: 0; padding: .55rem .7rem; font: inherit; }
.unit-wrap input:focus { outline: 2px solid var(--teal); outline-offset: -2px; }
.calc-results dl { margin: 0; display: grid; gap: .8rem; }
.calc-results dl > div { border-left: 4px solid var(--teal); background: var(--tint); border-radius: 0 8px 8px 0; padding: .7rem .9rem; }
.calc-results dt { font-size: .85rem; color: var(--ink-soft); }
.calc-results dd { margin: .1rem 0 0; font-size: 1.35rem; font-weight: 800; color: var(--teal-deep); }
.fineprint { font-size: .8rem; color: var(--ink-soft); margin-top: 1rem; }
.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, .btn { font: inherit; font-weight: 700; background: var(--teal); color: #fff; border: 0; border-radius: 8px; padding: .75rem 1.5rem; cursor: pointer; text-decoration: none; display: inline-block; }
.enquiry button:hover, .btn:hover { background: var(--teal-deep); }
[data-lead-success] { color: var(--teal); font-weight: 700; }
[data-lead-error] { color: #a33; font-weight: 700; }
.hp { position: absolute; left: -9999px; }
.foot { background: var(--teal-deep); color: var(--cream); padding: 1.2rem 0; margin-top: 1.5rem; }
.foot p { margin: 0; font-size: .9rem; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}