:root {
  color-scheme: light;
  --navy: #10254b;
  --ink: #132443;
  --muted: #485972;
  --blue: #005ab5;
  --blue-dark: #00498f;
  --tint: #eef5fb;
  --line: #d7e2ec;
  --red: #a52632;
  --white: #fff;
  --radius: 15px;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  line-height: 1.55;
  color: var(--ink);
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
img { display: block; max-width: 100%; }
a { color: var(--blue-dark); text-underline-offset: .22em; }
a:hover { color: var(--navy); }
button, input, select, textarea { font: inherit; }
button, summary { cursor: pointer; }
[hidden] { display: none !important; }
*:focus-visible { outline: 3px solid #076cd2; outline-offset: 4px; }
.site-footer :focus-visible, .callout :focus-visible, .utility :focus-visible { outline-color: #9dd7ff; }
.skip { position: fixed; top: 12px; left: 12px; z-index: 20; transform: translateY(-170%); background: white; padding: 10px 16px; border-radius: 8px; }
.skip:focus { transform: none; }
.container { width: min(100% - 64px, 1180px); margin-inline: auto; }
.section { padding-block: clamp(48px, 6vw, 90px); }
.tinted { background: var(--tint); }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 760; line-height: 1.1; }
h1 { font-size: clamp(2.65rem, 5vw, 4.5rem); letter-spacing: -.058em; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.65rem); letter-spacing: -.042em; }
h3 { font-size: 1.2rem; letter-spacing: -.02em; }
p { color: var(--muted); }
.intro { font-size: clamp(1.06rem, 1.6vw, 1.22rem); max-width: 58ch; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: var(--blue-dark); font-size: .77rem; font-weight: 750; letter-spacing: .105em; text-transform: uppercase; margin-bottom: 15px; }
.eyebrow span { flex: 0 0 22px; height: 2px; background: #c9303d; border-radius: 2px; }
.actions { display: flex; gap: 11px; flex-wrap: wrap; align-items: center; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; border-radius: 8px; padding: 10px 16px; font-size: .94rem; font-weight: 700; text-decoration: none; border: 1px solid transparent; line-height: 1.22; }
.button svg, .text-link svg { width: 19px; height: 19px; flex: none; }
.button.primary { background: var(--blue); color: white; }
.button.primary:hover { background: var(--blue-dark); }
.button.secondary { background: white; color: var(--navy); border-color: #b8cbdc; }
.button.secondary:hover { background: #e7f1fb; border-color: var(--blue); }
.button.light { background: white; color: var(--navy); }
.button.light:hover { background: #dceeff; }
.button.outline { color: white; border-color: #95aac6; }
.button.outline:hover { background: #2a456a; }
.text-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; }
.icon-tile { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 11px; background: #e6f1fc; color: var(--blue-dark); flex: none; }
.icon-tile svg { width: 25px; height: 25px; }

.utility { background: var(--navy); color: #e5effc; font-size: .82rem; }
.utility-inner { min-height: 36px; display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap; padding-block: 4px; }
.utility span, .utility a { display: inline-flex; align-items: center; gap: 6px; }
.utility svg { width: 16px; height: 16px; }
.utility a { color: white; text-decoration: none; }
.utility a:hover { text-decoration: underline; }
.site-header { position: relative; z-index: 2; background: white; border-bottom: 1px solid var(--line); }
.navigation { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.brand { flex: none; padding-block: 5px; }
.logo { width: 138px; height: auto; }
.desktop-nav { display: flex; align-items: center; gap: clamp(13px, 2.7vw, 37px); }
.desktop-nav a, .mobile-nav nav a { color: var(--ink); text-decoration: none; font-weight: 650; font-size: .95rem; padding-block: 12px; white-space: nowrap; }
.desktop-nav a:hover, .desktop-nav .current, .mobile-nav nav .current { color: var(--blue-dark); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px; }
.header-call { display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px; min-height: 44px; border: 1px solid var(--line); color: var(--navy); border-radius: 8px; font-weight: 750; text-decoration: none; white-space: nowrap; }
.header-call svg { width: 17px; height: 17px; color: var(--blue-dark); }
.header-call:hover { border-color: var(--blue); background: var(--tint); }
.mobile-nav, .mobile-actions { display: none; }

.home-hero { background: radial-gradient(ellipse at 75% 0%, #dfedf8 0, transparent 58%), #f5f9fc; padding-block: clamp(40px, 5.5vw, 82px) 57px; }
.hero-grid { display: grid; grid-template-columns: 1.02fr 1fr; align-items: center; gap: clamp(28px, 4vw, 62px); }
.hero-copy { padding-bottom: 20px; min-width: 0; }
.home-hero h1 { font-size: clamp(2.8rem, 5.25vw, 4.8rem); }
.home-hero h1 span { color: var(--blue); display: block; }
.home-hero .intro { margin: 23px 0; max-width: 42ch; }
.hero-note { display: flex; gap: 8px; align-items: flex-start; margin-top: 20px; font-size: .87rem; }
.hero-note svg { color: var(--blue-dark); width: 18px; height: 18px; margin-top: 2px; flex: none; }
.hero-figure { margin: 0; position: relative; min-width: 0; }
.hero-media { background: #dae4ec; border-radius: 20px; overflow: hidden; aspect-ratio: 1.18; box-shadow: 0 18px 40px -20px #19395c60; }
.hero-media picture, .hero-media img { display: block; width: 100%; height: 100%; }
.hero-media img { object-fit: cover; object-position: 58% 50%; }
.hero-figure figcaption { position: absolute; bottom: 12px; right: 12px; font-size: .73rem; color: white; background: #10254be8; padding: 4px 9px; border-radius: 5px; }
.urgent-wrap { margin-top: -23px; position: relative; }
.urgent { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; background: #fff6f5; border: 1px solid #f0cbd0; border-radius: 12px; padding: 13px 20px; }
.urgent-icon { display: grid; place-items: center; height: 42px; width: 42px; border-radius: 10px; background: #f9e0e2; color: var(--red); }
.urgent strong, .urgent .text-link { color: #8f202d; }
.urgent p { font-size: .91rem; }
.home-services { padding-top: clamp(48px, 5.5vw, 76px); }
.section-heading { margin-bottom: 24px; }
.section-heading p:not(.eyebrow) { margin-top: 10px; max-width: 65ch; }
.split { display: flex; justify-content: space-between; align-items: end; gap: 16px; }
.split .text-link { flex: none; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.service-card { display: flex; flex-direction: column; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--radius); background: white; padding: 22px; color: var(--ink); text-decoration: none; }
.service-card:hover { border-color: var(--blue); box-shadow: 0 6px 18px #14395d14; }
.service-card h3 { margin-top: 15px; }
.service-card p { margin: 7px 0 15px; font-size: .95rem; }
.card-link { display: inline-flex; align-items: center; gap: 6px; color: var(--blue-dark); font-weight: 750; font-size: .88rem; margin-top: auto; }
.card-link svg { width: 17px; height: 17px; }
.service-card:hover .card-link { text-decoration: underline; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3.2vw, 44px); margin: 0; padding: 0; list-style: none; }
.steps li { border-top: 2px solid #c6daee; padding: 17px 0 0; }
.steps li span { display: inline-grid; place-items: center; min-width: 38px; height: 32px; border-radius: 6px; background: white; color: var(--blue-dark); font-size: .9rem; font-weight: 750; margin-bottom: 12px; }
.steps p { margin-top: 8px; max-width: 35ch; }
.split-feature { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; }
.split-feature > div { border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(20px, 3vw, 40px); }
.split-feature h2 { margin: 15px 0 10px; font-size: clamp(1.55rem, 2.7vw, 2.15rem); }
.split-feature p { margin-bottom: 10px; max-width: 52ch; }
.review-feature { background: #f5f8fb; }
.faq-layout { display: grid; grid-template-columns: 1fr 1.7fr; gap: 20px 40px; }
.faq details { border-bottom: 1px solid #bdcfe0; }
.faq details:first-child { border-top: 1px solid #bdcfe0; }
.faq summary { font-weight: 700; padding: 13px 6px; min-height: 48px; }
.faq details p { padding: 0 8px 16px 23px; max-width: 63ch; }
.callout { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; border-radius: var(--radius); background: var(--navy); color: white; padding: clamp(22px, 4vw, 44px); }
.callout h2 { font-size: clamp(1.7rem, 3.1vw, 2.3rem); }
.callout p { color: #e3edf9; margin-top: 9px; }

.page-hero { background: radial-gradient(ellipse at 95% 0%, #dcecf9 0, transparent 65%), #f1f7fc; padding: 19px 0 clamp(40px, 6vw, 72px); }
.page-hero h1 { max-width: 24ch; }
.page-hero .intro { margin-top: 15px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 7px 10px; align-items: center; font-size: .87rem; color: var(--muted); margin-bottom: clamp(22px, 3.4vw, 42px); }
.crumbs a { display: inline-flex; align-items: center; min-height: 28px; }
.readable { max-width: 68ch; }
.readable.container { max-width: min(calc(100% - 64px), 780px); }
.readable h2 { font-size: clamp(1.42rem, 2.7vw, 2rem); margin-bottom: 10px; }
.readable h2:not(:first-child) { margin-top: 30px; }
.readable p + p { margin-top: 12px; }
.readable p + .text-link { margin-top: 8px; }
.service-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: start; gap: 24px clamp(24px, 6vw, 80px); }
.service-aside { background: #f3f8fc; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.service-aside h2 { font-size: 1.45rem; margin: 14px 0 9px; }
.service-aside p { margin-bottom: 15px; }
.service-aside .text-link { display: flex; width: fit-content; margin-top: 10px; }
.specific-guides { margin-top: 20px; padding-top: 17px; border-top: 1px solid var(--line); }
.specific-guides .text-link { margin-top: 2px; }
.symptoms { margin: 0; }
.symptoms div { border-bottom: 1px solid var(--line); padding: 13px 0; }
.symptoms dt { font-weight: 730; }
.symptoms dd { margin: 4px 0 0; color: var(--muted); }

@media (min-width: 761px) {
  .service-enquiry { position: sticky; top: 24px; }
}
.check-list { padding-left: 1.3em; color: var(--muted); }
.check-list li + li { margin-top: 5px; }
.towns { padding: 0; display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.towns li { background: #eef5fb; border-radius: 7px; padding: 6px 10px; color: var(--navy); font-weight: 650; }

.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; gap: 24px clamp(24px, 5vw, 68px); }
.contact-methods h2, .enquiry h2 { font-size: clamp(1.55rem, 2.8vw, 2.15rem); }
.contact-methods h2 { margin-bottom: 15px; }
.contact-methods > p { margin-top: 12px; }
.contact-method { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 9px; overflow-wrap: anywhere; }
.contact-method:hover { border-color: var(--blue); background: #f5f9fc; }
.contact-method strong, .contact-method small { display: block; }
.contact-method small { color: var(--muted); }
.contact-method > svg { width: 18px; height: 18px; color: var(--blue-dark); }
.enquiry { background: #f2f7fb; border: 1px solid var(--line); padding: clamp(18px, 3.2vw, 32px); border-radius: var(--radius); }
.enquiry > p { margin: 10px 0 16px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-weight: 700; margin-bottom: 5px; }
.field small { display: block; margin-top: 5px; color: var(--muted); }
.field input, .field select, .field textarea { display: block; min-height: 45px; width: 100%; padding: 8px 10px; color: var(--ink); background: white; border: 1px solid #8196ad; border-radius: 7px; }
.field textarea { resize: vertical; }
.form-status:not(:empty) { margin-top: 11px; }
.enquiry .privacy-note { margin: 12px 0 0; font-size: .86rem; }
.policy { overflow-wrap: anywhere; }

.site-footer { background: var(--navy); color: white; padding: 38px 0 20px; }
.footer-grid { display: grid; grid-template-columns: 1.25fr 1fr 1.1fr .9fr; gap: 20px; }
.footer-grid h2 { font-size: 1rem; letter-spacing: 0; margin-bottom: 8px; }
.footer-grid a { display: flex; align-items: center; gap: 4px; width: fit-content; min-height: 31px; color: #e5effc; font-size: .9rem; overflow-wrap: anywhere; }
.footer-grid a svg { width: 15px; height: 15px; flex: none; }
.footer-brand { padding: 4px 8px; border-radius: 8px; background: white; }
.footer-brand .logo { width: 118px; }
.footer-grid p { color: #ccdbec; font-size: .86rem; margin-top: 10px; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; border-top: 1px solid #456080; margin-top: 21px; padding-top: 13px; color: #ccdbec; font-size: .86rem; }
.footer-bottom div { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.footer-bottom a { color: white; }

@media (max-width: 940px) {
  .container { width: calc(100% - 48px); }
  .navigation { gap: 12px; }
  .header-call { font-size: .88rem; }
  .desktop-nav { gap: 14px; }
  .hero-break { display: none; }
  .home-hero h1 { font-size: clamp(2.65rem, 5.65vw, 3.8rem); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .container { width: calc(100% - 36px); }
  .readable.container { max-width: calc(100% - 36px); }
  .desktop-nav, .header-call { display: none; }
  .navigation { min-height: 72px; }
  .brand .logo { width: 112px; }
  .mobile-nav { display: block; }
  .mobile-nav summary { display: flex; align-items: center; gap: 6px; padding: 8px 12px; min-height: 44px; color: var(--navy); border: 1px solid var(--line); border-radius: 8px; font-weight: 700; list-style: none; }
  .mobile-nav summary::-webkit-details-marker { display: none; }
  .mobile-nav summary svg { width: 20px; height: 20px; }
  .mobile-nav nav { position: absolute; z-index: 5; inset: 100% 0 auto; display: grid; padding: 6px 18px; background: white; box-shadow: 0 12px 24px #12254524; border-block: 1px solid var(--line); }
  .mobile-nav nav a { display: block; padding: 12px 5px; }
  .mobile-nav nav a + a { border-top: 1px solid var(--line); }
  .hero-grid, .service-layout, .contact-grid, .faq-layout { grid-template-columns: minmax(0, 1fr); }
  .hero-copy { padding-bottom: 0; }
  .hero-media { aspect-ratio: 1.55; max-height: 450px; }
  .home-hero { padding-block: 35px 47px; }
  .home-hero h1 { max-width: 16ch; }
  .home-hero .intro { margin: 14px 0 17px; }
  .hero-note { margin-top: 13px; }
  .hero-grid { gap: 21px; }
  .urgent { padding: 11px 12px; gap: 8px 11px; grid-template-columns: auto 1fr; }
  .urgent .text-link { grid-column: 2; min-height: 32px; font-size: .88rem; }
  .split { align-items: flex-start; flex-direction: column; gap: 4px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split-feature { grid-template-columns: 1fr; }
  .steps { gap: 15px; }
  .mobile-actions { display: grid; grid-template-columns: 1fr 1fr; position: fixed; bottom: 0; left: 0; right: 0; z-index: 3; background: white; padding: 6px 10px calc(6px + env(safe-area-inset-bottom, 0px)); gap: 7px; border-top: 1px solid var(--line); box-shadow: 0 -3px 18px #12254515; }
  .mobile-actions a { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; border-radius: 7px; background: var(--blue); color: white; font-size: .89rem; font-weight: 750; text-decoration: none; }
  .mobile-actions a:last-child { color: var(--navy); background: #e7f2fc; }
  .mobile-actions svg { width: 19px; height: 19px; }
  .site-footer { padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px)); }
  html { scroll-padding-bottom: 72px; }
}

@media (max-width: 500px) {
  .steps { grid-template-columns: 1fr; }
  .steps li { display: grid; grid-template-columns: auto 1fr; gap: 3px 11px; align-items: center; }
  .steps li span { grid-row: span 2; align-self: start; margin: 0; }
  .steps p { margin: 0; }
  .service-card { padding: 13px; }
  .service-card h3 { font-size: 1.02rem; }
  .service-card p { font-size: .87rem; }
  .card-link { font-size: .81rem; }
  .footer-grid { gap: 18px 12px; }
  .footer-grid a { font-size: .82rem; }
}

@media (max-width: 360px) {
  .home-hero h1 { font-size: 2.36rem; }
  h1 { font-size: 2.25rem; }
  .enquiry .button { width: 100%; }
}