:root { --navy:#0f2a6b; --blue:#1d4fb8; --ink:#14213d; --err:#c62828; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Poppins', Arial, sans-serif; color: #fff; min-height: 100vh; overflow-x: hidden;
  background: #0a1f55 url('assets/bg.jpg') center / cover fixed;
  position: relative;
}
body::before { content:""; position: fixed; inset: 0; background: rgba(10,31,85,.55); z-index: -1; }
body.modal-open { overflow: hidden; }
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #ffd54a; outline-offset: 2px; }

.page { display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(20px,4vw,40px) 16px 24px; max-width: 1100px; margin: 0 auto; }
.headline { font-family: 'Lato', sans-serif; font-weight: 400; font-size: clamp(1.6rem, 4vw, 2.2rem); margin-bottom: 20px; }

.brochure { display: block; width: min(100%, 440px); border-radius: 4px; box-shadow: 0 10px 40px rgba(0,0,0,.45); background: #fff; }
.brochure img { display: block; width: 100%; height: auto; }

.btn { display: inline-block; font-family: 'Poppins', sans-serif; font-size: 1.05rem; font-weight: 500; line-height: 1.2; padding: 14px 26px; border-radius: 8px; border: 0; cursor: pointer; text-decoration: none; transition: transform .15s, background .15s; }
.btn-light { background: #fff; color: var(--navy); }
.btn-light:hover { background: #e8efff; transform: translateY(-1px); }
.btn-demo { font-family: Georgia, 'Times New Roman', serif; font-weight: 700; }
.btn-primary { background: var(--navy); color: #fff; width: 100%; margin-top: 8px; }
.btn-primary:hover { background: var(--blue); }
.btn[disabled] { opacity: .6; cursor: not-allowed; transform: none; }
.brochure + .btn { margin-top: 18px; }

.quote { font-family: 'Lato', sans-serif; font-size: clamp(1.4rem, 4.2vw, 2.4rem); margin-top: 26px; line-height: 1.25; text-shadow: 0 2px 8px rgba(0,0,0,.4); }
.phone { margin-top: 10px; font-family: 'Lato', sans-serif; font-weight: 700; font-size: clamp(1.5rem, 4vw, 2rem); }
.phone a, .footer a { text-decoration: none; }
.phone a:hover, .footer a:hover { text-decoration: underline; }
.phone svg { width: .8em; height: .8em; fill: currentColor; margin-right: 12px; vertical-align: -.05em; }

.social { list-style: none; display: flex; gap: 16px; justify-content: center; margin-top: 14px; }
.social a { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; transition: background .15s; }
.social a:hover { background: rgba(255,255,255,.18); }
.social svg { width: 28px; height: 28px; fill: #fff; }

.actions { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; margin-top: 22px; }

.reviews { text-align: center; padding: 36px 16px; background: rgba(255,255,255,.08); margin-top: 24px; }
.reviews .g-logo { width: 150px; height: auto; display: block; margin: 0 auto 4px; }
.reviews h2 { font-weight: 500; font-size: 1.3rem; }
.reviews p { max-width: 520px; margin: 8px auto 18px; line-height: 1.5; }

.footer { text-align: center; padding: 22px 16px 24px; font-size: .95rem; line-height: 1.8; }
/* Checkatrade injects its own div after the footer: equal space above (footer) and below */
body > div:not(.modal):not(#checkatrade-widget) { margin: 0 auto; padding-bottom: 30px; }
.footer .agency { opacity: .9; }

/* modals */
.modal[hidden] { display: none; }
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding: 16px; overflow-y: auto; background: rgba(5,12,35,.6); }
.modal-box { position: relative; background: #fff; color: var(--ink); width: min(100%, 440px); margin: auto; padding: 22px 24px 26px; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.4); animation: pop .18s ease-out; }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.modal-box h2 { font-size: 1.05rem; font-weight: 600; padding-right: 36px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid #e3e6ee; }
.modal-close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border: 0; background: none; font-size: 1.9rem; line-height: 1; color: #555; cursor: pointer; border-radius: 50%; }
.modal-close:hover { background: #eef1f7; color: #000; }
.modal-logo { display: block; margin: 0 auto 14px; width: 150px; height: auto; }
.field { display: block; margin-bottom: 14px; border: 0; text-align: center; }
.field label, .field legend { display: block; font-size: .92rem; font-weight: 500; margin-bottom: 6px; }
.field input[type=text], .field input[type=email], .field input[type=tel] { width: 100%; padding: 11px 12px; border: 1px solid #cfd5e3; border-radius: 6px; font: inherit; font-size: 1rem; }
.field input[aria-invalid=true] { border-color: var(--err); }
.checks { text-align: left; }
.checks legend { text-align: center; width: 100%; }
.checks label { display: flex; align-items: center; gap: 10px; padding: 6px 4px; font-weight: 400; cursor: pointer; }
.checks input { width: 20px; height: 20px; accent-color: var(--navy); }
.err { display: block; color: var(--err); font-size: .82rem; text-align: left; min-height: 0; margin-top: 4px; }
.err:empty { display: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.g-recaptcha { margin: 6px 0 10px; display: flex; justify-content: center; }
.status { font-size: .92rem; text-align: center; margin-top: 4px; }
.status:empty { display: none; }
.status.ok { color: #1b7a3a; font-weight: 500; }
.status.bad { color: var(--err); }

@media (max-width: 480px) {
  .actions { flex-direction: column; width: 100%; max-width: 320px; gap: 12px; }
  .actions .btn { width: 100%; }
  .btn { padding: 15px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}