/* CMR Relocation - site.css. Rules: docs/RULES.md, design: docs/design-notes.md */
:root {
  --red: #892728;          /* logo red */
  --red-dark: #6a1d1e;
  --red-tint: #e6eef6;
  --ink: #1f2328;
  --text: #3f444a;
  --muted: #5d636a;
  --line: #e4e0dd;
  --soft: #faf7f5;
  --white: #fff;
  --radius: 10px;
  --wrap: 1180px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--white); color: var(--text); font: 17px/1.6 var(--font); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--red); text-underline-offset: 2px; }
a:hover { color: var(--red-dark); }
:focus-visible { outline: 3px solid #1a5fb4; outline-offset: 2px; }
.wrap { width: min(100% - 32px, var(--wrap)); margin-inline: auto; }
.narrow { max-width: 820px; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff; padding: .6rem 1rem; z-index: 100; }
.skip-link:focus { left: 8px; top: 8px; }

/* headings: H1 32-40px, H2 24-28px, H3 ~20px */
h1, h2, h3 { color: var(--ink); line-height: 1.2; margin: 0 0 .4em; }
h1 { font-size: clamp(32px, 2.2vw + 22px, 40px); }
h2 { font-size: clamp(24px, 1vw + 19px, 28px); }
h3 { font-size: 20px; }
p, ul, ol { margin: 0 0 1.5rem; }
p:last-child, ul:last-child { margin-bottom: 0; }
h2 + p, h3 + p { margin-top: 0; }

/* buttons */
.btn { display: inline-block; padding: .75rem 1.3rem; border-radius: 999px; font-weight: 700; text-decoration: none; border: 2px solid transparent; line-height: 1.2; }
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-dark); color: #fff; }
.btn-ghost { border-color: #fff; color: #fff; }
.btn-ghost:hover { background: #fff; color: var(--red); }
.btn-outline { border-color: var(--red); color: var(--red); }
.btn-outline:hover { background: var(--red); color: #fff; }

/* top bar */
.topbar .wrap, .site-header .wrap { width: min(100% - 32px, 1340px); }
.btn { white-space: nowrap; }
.ico { flex: none; vertical-align: -3px; }
.topbar { background: #231a1a; color: #e9e2e1; font-size: 14px; }
.topbar-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .45rem 0; }
.topbar p { margin: 0; display: flex; align-items: center; gap: .45rem; }
.topbar-right { gap: 1.25rem !important; }
.topbar-right span, .topbar-right a { display: inline-flex; align-items: center; gap: .4rem; }
.topbar a { color: #fff; text-decoration: none; }
.topbar a:hover { text-decoration: underline; }
.topbar .ico { color: #a9c8e3; width: 15px; height: 15px; }

/* header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.97); backdrop-filter: saturate(1.4) blur(6px); border-bottom: 1px solid var(--line); transition: box-shadow .2s; }
.site-header.scrolled { box-shadow: 0 6px 24px rgba(35,26,26,.10); }
.header-row { display: flex; align-items: center; gap: 1.25rem; padding: .7rem 0; }
.logo img { width: 180px; height: auto; transition: width .2s; }
.site-header.scrolled .logo img { width: 156px; }
.site-nav { flex: 1; }
.site-nav ul { list-style: none; padding: 0; }
.site-nav > ul { display: flex; align-items: center; gap: .1rem; margin: 0; justify-content: center; }
.site-nav a.top { display: block; padding: .55rem .6rem; color: var(--ink); text-decoration: none; font-weight: 650; font-size: 15px; border-radius: 8px; white-space: nowrap; }
.site-nav a.top:hover, .has-sub:hover > a.top { color: var(--red); background: var(--red-tint); }
.has-sub { position: relative; display: flex; align-items: center; }
.sub-toggle { background: none; border: 0; padding: .3rem; margin-left: -.35rem; cursor: pointer; color: var(--ink); display: grid; place-items: center; }
.sub-toggle .ico { width: 16px; height: 16px; transition: transform .2s; }
.has-sub.open .sub-toggle .ico { transform: rotate(180deg); }
.mega { position: absolute; top: calc(100% + 10px); left: 50%; transform: translate(-50%, 6px); min-width: 320px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 40px rgba(35,26,26,.14); padding: .6rem; opacity: 0; visibility: hidden; transition: opacity .15s, transform .15s, visibility .15s; }
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.has-sub:hover .mega, .has-sub:focus-within .mega, .has-sub.open .mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.sub { margin: 0; display: grid; gap: .15rem; }
.sub.two { grid-template-columns: repeat(2, minmax(220px, 1fr)); min-width: 520px; }
.sub a { display: flex; flex-direction: column; gap: .1rem; padding: .6rem .75rem; border-radius: 10px; text-decoration: none; }
.sub a:hover { background: var(--red-tint); }
.sub .t { color: var(--ink); font-weight: 700; font-size: 15.5px; }
.sub .d { color: var(--muted); font-size: 13.5px; line-height: 1.35; }
.sub a:hover .t { color: var(--red); }
.nav-mobile-cta { display: none; }
.header-cta { display: flex; align-items: center; gap: .9rem; margin-left: auto; }
.header-phone { display: flex; align-items: center; gap: .55rem; color: var(--ink); text-decoration: none; font-weight: 800; font-size: 1.08rem; white-space: nowrap; }
.header-phone .ico { width: 36px; height: 36px; padding: 8px; border-radius: 50%; background: var(--red-tint); color: var(--red); }
.header-phone span { display: flex; flex-direction: column; line-height: 1.15; }
.header-phone small { font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: .02em; }
.header-phone:hover { color: var(--red); }
.menu-toggle { display: none; align-items: center; gap: .5rem; background: var(--ink); color: #fff; border: 0; border-radius: 10px; padding: .55rem .8rem; font: 700 15px var(--font); cursor: pointer; }
.menu-toggle .bars, .menu-toggle .bars::before, .menu-toggle .bars::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; position: relative; transition: transform .2s, opacity .2s; }
.menu-toggle .bars::before, .menu-toggle .bars::after { content: ""; position: absolute; left: 0; }
.menu-toggle .bars::before { top: -6px; } .menu-toggle .bars::after { top: 6px; }
.menu-toggle[aria-expanded="true"] .bars { background: transparent; }
.menu-toggle[aria-expanded="true"] .bars::before { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .bars::after { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 1240px) { .header-quote { display: none; } }

/* hero */
.hero { position: relative; color: #fff; min-height: 480px; display: flex; align-items: center; background: var(--ink); overflow: hidden; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(25,14,14,.88) 0%, rgba(25,14,14,.66) 48%, rgba(25,14,14,.25) 100%); }
.hero-inner { position: relative; z-index: 1; padding: 2.75rem 0; display: grid; gap: 2rem; align-items: center; }
.hero-form .hero-inner { padding: 2.5rem 0 3rem; }
@media (min-width: 1000px) { .hero-form .hero-inner { grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr); gap: 3rem; } }
.hero h1 { color: #fff; max-width: 720px; }
.hero .lead { font-size: 1.15rem; max-width: 620px; color: #f3eded; }
.hero-points { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .45rem; }
.hero-points li { display: flex; align-items: center; gap: .55rem; font-weight: 600; }
.hero-points .ico { color: #fff; background: var(--red); border-radius: 50%; padding: 3px; width: 22px; height: 22px; }
.hero-buttons { display: flex; flex-wrap: wrap; gap: .7rem; margin: 0; }
.hero-buttons .btn { display: inline-flex; align-items: center; gap: .5rem; }
.hero .breadcrumbs, .hero .breadcrumbs a { color: #f3eded; }
.hero-form-card { background: #fff; color: var(--text); border-radius: 16px; padding: 1.4rem; box-shadow: 0 24px 60px rgba(0,0,0,.35); border-top: 5px solid var(--red); }
.trust-strip { background: var(--red-tint); padding: .65rem 0; font-weight: 600; font-size: 15px; }
.trust-strip .wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 2rem; }
.trust-strip a, .trust-strip span { display: inline-flex; align-items: center; gap: .4rem; color: var(--ink); text-decoration: none; }
.trust-strip .ico { color: var(--red); }
.page-head { background: var(--soft); padding: 2.25rem 0 1.75rem; border-bottom: 1px solid var(--line); }

/* breadcrumbs */
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; padding: 0; margin: 0 0 .8rem; font-size: 14.5px; }
.breadcrumbs li + li::before { content: "›"; margin-right: .3rem; opacity: .7; }

/* sections */
.section { padding: 2rem 0; }
.section.alt { background: var(--soft); }
.section:not(.alt) + .section:not(.alt), .section.alt + .section.alt { padding-top: 0; }   /* only collapse padding between same-colour bands */
@media (min-width: 760px) { .section { padding: 2.75rem 0; } }
@media (min-width: 1100px) { .section { padding: 3.25rem 0; } }
.prose { max-width: 820px; }
.prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: .4rem; }

/* split: text + image */
.split { display: grid; gap: 1.75rem; align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1.15fr 1fr; gap: 2.5rem; } .split.flip > :first-child { order: 2; } }
.split img, .figure img { border-radius: var(--radius); }
/* side-by-side photos: one consistent 4:3 frame, so portrait shots never leave tall gaps beside the text */
.split .figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
figure { margin: 0; }
figcaption { font-size: 14.5px; color: var(--muted); margin-top: .45rem; }

/* cards: always full rows (3 or 4 up) */
.cards { display: grid; gap: 1.25rem; grid-template-columns: 1fr; margin-top: 1rem; }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cards.c3 { grid-template-columns: repeat(3, 1fr); } .cards.c4 { grid-template-columns: repeat(4, 1fr); } }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; display: flex; flex-direction: column; }
.card img { border-radius: 8px; margin-bottom: .9rem; aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.card h3 { margin-bottom: .35rem; }
.card p { flex: 1; }
.card .more { font-weight: 700; margin-top: .6rem; }

/* 4 steps with the jigsaw motif from the logo */
.steps { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 1.25rem; counter-reset: step; }
@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.steps li { counter-increment: step; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: .7rem; background: var(--red); color: #fff; font-weight: 800; border-radius: 10px 10px 10px 22px; }

/* checklist ticks */
.ticks { list-style: none; padding: 0; }
.ticks li { position: relative; padding-left: 1.7rem; margin-bottom: .55rem; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .45em; width: 16px; height: 9px; border-left: 3px solid var(--red); border-bottom: 3px solid var(--red); transform: rotate(-45deg); }

/* quote band */
.quote-band { background: var(--red); color: #fff; border-radius: var(--radius); padding: 1.6rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }
.quote-band p { margin: 0; font-size: 1.15rem; font-weight: 700; color: #fff; }
.quote-band .btn-primary { background: #fff; color: var(--red); }

/* reviews */
blockquote { margin: 0; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--red); border-radius: var(--radius); padding: 1.1rem 1.25rem; }
blockquote p { margin-bottom: .5rem; }
blockquote footer { font-size: 15px; color: var(--muted); }

/* tables */
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; margin: 0 0 1.5rem; font-size: 16px; }
th, td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: var(--soft); color: var(--ink); }

/* section heads */
.section-head { max-width: 760px; margin-bottom: 1.6rem; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head p:last-child { margin-bottom: 0; color: var(--muted); }
.eyebrow { font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--red); margin: 0 0 .4rem; }

/* FAQ: centred head, two even columns, centred ask bar */
.faq { padding: 2.25rem 0; background: var(--soft); }
@media (min-width: 1100px) { .faq { padding: 3.25rem 0; } }
.section.alt + .faq { padding-top: 0; }
.faq-cols { display: grid; gap: .7rem 1.25rem; align-items: start; }
@media (min-width: 900px) { .faq-cols { grid-template-columns: 1fr 1fr; } }
.faq-list { display: grid; gap: .7rem; }
.faq-list details { background: #fff; border: 1px solid var(--line); border-radius: 12px; transition: border-color .2s, box-shadow .2s; }
.faq-list details[open] { border-color: var(--red); box-shadow: 0 8px 24px rgba(137,39,40,.08); }
.faq-list summary { list-style: none; cursor: pointer; padding: 1rem 3.4rem 1rem 1.2rem; font-weight: 700; color: var(--ink); position: relative; min-height: 64px; display: flex; align-items: center; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; background: var(--red-tint); color: var(--red); display: grid; place-items: center; font-weight: 800; font-size: 18px; line-height: 1; }
.faq-list details[open] summary::after { content: "–"; background: var(--red); color: #fff; }
.faq-list summary:hover { color: var(--red); }
.faq-a { padding: 0 1.2rem 1.1rem; }
.faq-a p { margin: 0; }
.ask-bar { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.25rem; }
.ask-bar p { margin: 0; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; color: var(--muted); }
.ask-bar p span { display: inline-flex; align-items: center; gap: .4rem; }
.ask-bar strong { color: var(--ink); }
.ask-bar .ico { color: var(--red); }
.ask-btns { gap: .6rem !important; }
.ask-btns .btn { display: inline-flex; align-items: center; gap: .5rem; }

/* guide cards (4 equal) + contact band (4 equal tiles) */
.guide-cards { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .guide-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .guide-cards { grid-template-columns: repeat(4, 1fr); } }
.guide-card { display: flex; flex-direction: column; gap: .45rem; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1.25rem; text-decoration: none; color: var(--text); position: relative; overflow: hidden; transition: border-color .2s, transform .2s, box-shadow .2s; }
.guide-card::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.guide-card:hover { border-color: var(--red); transform: translateY(-3px); box-shadow: 0 14px 30px rgba(35,26,26,.10); }
.guide-card:hover::before { transform: scaleX(1); }
.g-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: .35rem; }
.g-top .ico { width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: var(--red-tint); color: var(--red); }
.g-num { font-size: 13px; font-weight: 800; letter-spacing: .12em; color: #c9b9b9; }
.guide-card strong { color: var(--ink); font-size: 17.5px; line-height: 1.3; }
.g-text { font-size: 15px; color: var(--muted); flex: 1; }
.g-go { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; font-size: 15px; color: var(--red); margin-top: .4rem; }
.g-go .ico { width: 16px; height: 16px; transition: transform .2s; }
.guide-card:hover .g-go .ico { transform: translateX(4px); }
.contact-band { margin-top: 1.25rem; display: grid; gap: 1.1rem; align-items: center; background: #231a1a; color: #e9e2e1; border-radius: 16px; padding: 1.4rem; }
.contact-band-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; }
.contact-band-head p { margin: 0; color: #bfb4b3; }
.contact-band-head .cb-title { color: #fff; font-size: 22px; font-weight: 800; }
.contact-tiles { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .contact-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .contact-tiles { grid-template-columns: repeat(4, 1fr); } }
.contact-tiles li { display: flex; align-items: center; gap: .7rem; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: .8rem .9rem; min-height: 76px; font-size: 15px; }
.contact-tiles .ico { width: 38px; height: 38px; padding: 9px; border-radius: 50%; background: var(--red); color: #fff; }
.contact-tiles small { display: block; color: #bfb4b3; font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.contact-tiles a { color: #fff; font-weight: 700; }
.contact-tiles li span { min-width: 0; }
.contact-tiles li { font-size: 14.5px; }
.cb-btn { padding-inline: 1.6rem; }
.btn-block { display: block; width: 100%; text-align: center; }

/* forms */
.quote-form .form-title { font-size: 22px; font-weight: 800; color: var(--ink); margin: 0 0 .2rem; }
.quote-form .form-sub { font-size: 15px; color: var(--muted); margin: 0 0 1rem; }
.form-grid { display: grid; gap: .7rem; grid-template-columns: 1fr 1fr; }
.form-grid .full { grid-column: 1 / -1; }
.quote-form label { display: block; font-weight: 700; color: var(--ink); margin-bottom: .25rem; font-size: 14px; }
.quote-form .opt { font-weight: 400; color: var(--muted); }
.quote-form input, .quote-form select, .quote-form textarea { width: 100%; font: inherit; font-size: 15.5px; padding: .6rem .7rem; border: 1px solid #c9c2bd; border-radius: 8px; background: #fff; color: var(--ink); }
.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(137,39,40,.15); }
.quote-form .consent { display: block; position: relative; padding-left: 1.7rem; min-height: 26px; padding-top: 2px; font-weight: 400; font-size: 13.5px; color: var(--muted); margin: .85rem 0; }
.quote-form .consent input { position: absolute; left: 0; top: 1px; width: 18px; height: 18px; margin: 0; }
.quote-form .btn-block { padding: .85rem; font-size: 16px; }
.form-msg { border-radius: 8px; padding: .75rem .9rem; margin-bottom: .8rem; font-weight: 600; }
.form-msg.ok { background: #e7f4ec; color: #1d5b33; }
.form-msg.err { background: #fbeaea; color: #8a1f20; }
@media (max-width: 480px) { .form-grid { grid-template-columns: 1fr; } }
.hp { position: absolute; left: -9999px; }
.link-list { padding-left: 1.2rem; }

/* footer */
.site-footer { background: #231a1a; color: #e9e2e1; padding: 2.5rem 0 1rem; margin-top: 0; }
.site-footer a { color: #fff; }
.footer-grid { display: grid; gap: 1.75rem; grid-template-columns: 1fr; }
@media (min-width: 700px) and (max-width: 999px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } .footer-map { grid-column: 1 / -1; } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1fr .8fr 1.6fr; gap: 2.5rem; } }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .35rem; }
.footer-title { font-weight: 800; color: #fff; margin-bottom: .6rem; }
.map-embed { position: relative; height: 300px; border-radius: var(--radius); overflow: hidden; background: #3a2c2c repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 12px, transparent 12px 24px); }
.map-embed iframe { display: block; width: 100%; height: 100%; border: 0; }
.map-load { all: unset; box-sizing: border-box; cursor: pointer; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .7rem; padding: 1rem; color: #fff; font-weight: 700; text-align: left; }
.map-load .ico { width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: var(--red); flex: none; }
.map-load small { display: block; font-weight: 400; font-size: 13px; color: #cfc4c3; margin-top: .25rem; }
.map-load:hover span { text-decoration: underline; }
.map-load:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.footer-legal { border-top: 1px solid rgba(255,255,255,.15); margin-top: 1.75rem; padding-top: 1rem; font-size: 14.5px; }

/* mobile */
.sticky-bar { display: none; }
@media (max-width: 1060px) {
  .topbar-row > p:first-child { display: none; }
  .topbar-row { justify-content: center; }
}
@media (max-width: 1000px) {
  .topbar { display: none; }
  .header-phone span, .header-quote { display: none; }
  .menu-toggle { display: inline-flex; }
  .site-nav { position: fixed; inset: 0 0 0 auto; top: 0; width: min(420px, 100%); background: #fff; z-index: 70; padding: 4.5rem 1.25rem 1.5rem; overflow-y: auto; transform: translateX(100%); transition: transform .25s; box-shadow: -20px 0 40px rgba(0,0,0,.15); }
  .site-nav { visibility: hidden; transition: transform .25s, visibility 0s linear .25s; }
  .site-nav.open { transform: none; visibility: visible; transition: transform .25s, visibility 0s; }
  .site-nav > ul { flex-direction: column; align-items: stretch; }
  .has-sub { flex-wrap: wrap; }
  .has-sub > a.top { flex: 1; }
  .sub-toggle { margin: 0; padding: .6rem; }
  .mega { position: static; transform: none; opacity: 1; visibility: visible; display: none; box-shadow: none; border: 0; padding: 0 0 .4rem .4rem; min-width: 0; width: 100%; }
  .has-sub:hover .mega, .has-sub:focus-within .mega { transform: none; }
  .has-sub.open .mega { display: block; }
  .sub.two { grid-template-columns: 1fr; min-width: 0; }
  .nav-mobile-cta { display: flex; flex-direction: column; gap: .6rem; margin-top: 1.25rem; }
  .nav-mobile-cta .btn { text-align: center; }
  .menu-toggle { position: relative; z-index: 80; }
  .hero { min-height: 420px; }
  .sticky-bar { display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; }
  .sticky-bar a { text-align: center; padding: .85rem; font-weight: 800; text-decoration: none; color: #fff; background: var(--red); }
  .sticky-bar a + a { background: var(--ink); }
  body { padding-bottom: 52px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ===== homepage v2 ===== */
.center-prose { max-width: 760px; margin: 0 auto 1.25rem; text-align: center; }
.intro-section .eyebrow { margin-bottom: .5rem; }
.trusted { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: 15px; }
.trusted span { color: var(--muted); width: 100%; font-size: 13px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.trusted strong { font-size: 18px; color: var(--ink); letter-spacing: -.01em; padding: .3rem .8rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.figure-stack { position: relative; }
.float-badge { position: absolute; left: -18px; bottom: 54px; display: flex; align-items: center; gap: .7rem; background: #fff; border-radius: 14px; padding: .8rem 1rem; box-shadow: 0 18px 40px rgba(35,26,26,.18); }
.float-badge .ico { width: 42px; height: 42px; padding: 10px; border-radius: 12px; background: var(--red); color: #fff; }
.float-badge strong { display: block; color: var(--ink); font-size: 18px; line-height: 1.1; }
.float-badge span { font-size: 13.5px; color: var(--muted); }
@media (max-width: 899px) { .float-badge { left: 12px; bottom: 60px; } }

/* stats band */
.stats-band { background: radial-gradient(120% 160% at 0% 0%, #892728 0%, #4a1d1e 50%, #231a1a 100%); color: #fff; padding: 2rem 0; position: relative; overflow: hidden; }
.stats-band::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 16px, transparent 16px 32px); pointer-events: none; }
.stats-grid { position: relative; display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }
.stat { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .9rem; align-items: center; padding: .4rem 0; }
.stat .ico { grid-row: 1 / span 2; width: 48px; height: 48px; padding: 11px; border-radius: 14px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); color: #f2c1c2; }
.stat-num { margin: 0; font-size: clamp(26px, 2vw + 14px, 34px); font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.stat-label { margin: .2rem 0 0; color: #e9d6d6; font-size: 14.5px; }

/* services: bento */
.bento { display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .bento { grid-template-columns: 1fr 1fr; } }
.svc-big { position: relative; display: block; min-height: 340px; border-radius: 18px; overflow: hidden; color: #fff; text-decoration: none; isolation: isolate; }
.svc-big img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s; }
.svc-big::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20,12,12,.05) 20%, rgba(20,12,12,.88) 100%); }
.svc-big:hover img { transform: scale(1.05); }
.svc-big-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.5rem; display: flex; flex-direction: column; gap: .4rem; }
.svc-tag { align-self: flex-start; display: inline-flex; align-items: center; gap: .4rem; font-size: 13px; font-weight: 700; padding: .3rem .7rem; border-radius: 999px; background: rgba(255,255,255,.16); backdrop-filter: blur(4px); }
.svc-tag .ico { width: 15px; height: 15px; }
.svc-big strong { font-size: 28px; line-height: 1.1; }
.svc-big-body > span:not(.svc-tag):not(.svc-go) { color: #f1e6e6; max-width: 46ch; }
.svc-go { display: inline-flex; align-items: center; gap: .4rem; font-weight: 800; margin-top: .3rem; }
.svc-go .ico { width: 18px; height: 18px; transition: transform .2s; }
.svc-big:hover .svc-go .ico { transform: translateX(5px); }
.svc-grid { display: grid; gap: 1rem; margin-top: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .svc-grid { grid-template-columns: repeat(3, 1fr); } }
.svc-card { display: grid; grid-template-columns: auto 1fr; column-gap: .9rem; row-gap: .15rem; align-items: start; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1.1rem 1.2rem; text-decoration: none; color: var(--text); transition: border-color .2s, transform .2s, box-shadow .2s; }
.svc-card .ico { grid-row: 1 / span 2; width: 46px; height: 46px; padding: 11px; border-radius: 12px; background: var(--red-tint); color: var(--red); transition: background .2s, color .2s; }
.svc-card strong { color: var(--ink); font-size: 18px; }
.svc-card span { font-size: 15px; color: var(--muted); }
.svc-card:hover { border-color: var(--red); transform: translateY(-3px); box-shadow: 0 14px 30px rgba(35,26,26,.10); }
.svc-card:hover .ico { background: var(--red); color: #fff; }

/* timeline */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; position: relative; }
@media (min-width: 1000px) {
  .timeline { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
  .timeline::before { content: ""; position: absolute; left: 12%; right: 12%; top: 28px; height: 2px; background: repeating-linear-gradient(90deg, var(--red) 0 8px, transparent 8px 14px); opacity: .5; }
}
.timeline li { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 3.6rem 1.25rem 1.3rem; text-align: center; }
.tl-num { position: absolute; top: -2px; left: 50%; transform: translate(-50%, -25%); width: 58px; height: 58px; display: grid; place-items: center; border-radius: 16px 16px 16px 30px; background: var(--red); color: #fff; font-weight: 800; font-size: 22px; box-shadow: 0 10px 22px rgba(137,39,40,.3); border: 4px solid #fff; }
.timeline h3 { margin-bottom: .35rem; }
.timeline p { font-size: 15.5px; color: var(--text); margin: 0; }
@media (min-width: 1000px) { .timeline { padding-top: 14px; } }
@media (max-width: 999px) { .timeline { padding-top: 14px; gap: 2rem; } }

/* gallery of real jobs: 4 x 2 */
.gallery { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1000px) { .gallery { grid-template-columns: repeat(4, 1fr); } }
.gallery figure { margin: 0; position: relative; border-radius: 14px; overflow: hidden; background: #000; }
.gallery img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; transition: transform .5s, opacity .3s; }
.gallery figure:hover img { transform: scale(1.06); opacity: .85; }
.gallery figcaption { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 1.6rem .8rem .7rem; color: #fff; font-size: 13.5px; font-weight: 600; background: linear-gradient(transparent, rgba(0,0,0,.78)); }

/* why: photo + 6 feature tiles */
.why-grid { display: grid; gap: 1.5rem; align-items: stretch; }
@media (min-width: 1000px) { .why-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); } }
.why-photo { display: flex; flex-direction: column; }
.why-photo img { flex: 1; width: 100%; height: 100%; min-height: 300px; object-fit: cover; border-radius: 16px; }
.feature-tiles { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .feature-tiles { grid-template-columns: repeat(2, 1fr); } }
.feature { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1.1rem 1.2rem; transition: border-color .2s, box-shadow .2s; }
.feature:hover { border-color: var(--red); box-shadow: 0 10px 24px rgba(35,26,26,.08); }
.feature .ico { width: 42px; height: 42px; padding: 10px; border-radius: 12px; background: var(--red-tint); color: var(--red); margin-bottom: .6rem; }
.feature h3 { font-size: 18px; margin-bottom: .25rem; }
.feature p { margin: 0; font-size: 15px; color: var(--muted); }

/* scroll reveal (only when JS runs; off for reduced motion) */
.js-reveal .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.js-reveal .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js-reveal .reveal { opacity: 1; transform: none; transition: none; } }

/* ===== brighter look (v3) — all overrides in one block so it rolls back cleanly ===== */
:root { --red-bright: #b3302f; --soft: #f1f5f9; --blush: #fdecea; --line: #d9e3ec; --red-tint: #e6eef6; }
body { color: #3a3f45; }
/* sections: clean white + warm blush instead of beige */
.section.alt { background: linear-gradient(180deg, #f1f5f9 0%, #e6eef6 100%); }
.faq { background: linear-gradient(180deg, #f1f5f9 0%, #e6eef6 100%); }
/* buttons: brighter, with lift */
.btn { transition: transform .18s, box-shadow .18s, background .18s; }
.btn-primary { background: linear-gradient(135deg, #c63a37 0%, #a12b2c 100%); box-shadow: 0 8px 20px rgba(179,48,47,.28); }
.btn-primary:hover { background: linear-gradient(135deg, #b3302f 0%, #892728 100%); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(179,48,47,.34); }
.btn-outline { border-color: var(--red-bright); color: var(--red-bright); }
.btn-outline:hover { background: var(--red-bright); }
/* hero: let the photo shine */
.hero::after { background: linear-gradient(100deg, rgba(30,14,14,.80) 0%, rgba(30,14,14,.55) 40%, rgba(30,14,14,.12) 72%, rgba(30,14,14,0) 100%); }
.hero-points .ico { background: var(--red-bright); }
.hero-form-card { border-top-color: var(--red-bright); }
.trust-strip { background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 6px 18px rgba(35,26,26,.05); }
.trust-strip .ico { color: var(--red-bright); }
/* eyebrows become little pills; highlighted words in headings */
.eyebrow { display: inline-block; padding: .3rem .75rem; border-radius: 999px; background: var(--red-tint); color: var(--red-bright); letter-spacing: .12em; }
.hl { color: var(--red-bright); background: linear-gradient(transparent 68%, rgba(198,58,55,.16) 68%); padding: 0 .08em; }
/* icons: solid, cheerful badges */
.svc-card .ico, .feature .ico, .g-top .ico { background: linear-gradient(135deg, #c63a37, #a12b2c); color: #fff; box-shadow: 0 6px 14px rgba(179,48,47,.25); }
.svc-card:hover .ico { background: linear-gradient(135deg, #a12b2c, #6a1d1e); }
.svc-card, .feature, .guide-card, .timeline li { box-shadow: 0 4px 14px rgba(35,26,26,.04); }
.feature:hover, .svc-card:hover { box-shadow: 0 16px 34px rgba(179,48,47,.14); }
/* stats band: warm red, not near-black */
.stats-band { background: linear-gradient(120deg, #c63a37 0%, #a12b2c 45%, #7a2224 100%); }
.stat .ico { background: rgba(255,255,255,.16); color: #fff; }
.stat-label { color: #e2ebf4; }
/* timeline badges + float badge */
.tl-num { background: linear-gradient(135deg, #c63a37, #a12b2c); }
.timeline::before { background: repeating-linear-gradient(90deg, var(--red-bright) 0 8px, transparent 8px 14px); opacity: .6; }
.float-badge .ico { background: linear-gradient(135deg, #c63a37, #a12b2c); }
.trusted strong { border-color: #d3e0ec; background: #f6f9fb; }
/* ticks */
.ticks li::before { border-color: var(--red-bright); }
/* contact band warmer */
.contact-band { background: linear-gradient(120deg, #2b1c1c 0%, #4a1d1e 55%, #7a2224 100%); }
.contact-tiles .ico { background: linear-gradient(135deg, #c63a37, #a12b2c); }

/* feel-good band */
.joy-band { position: relative; overflow: hidden; color: #fff; isolation: isolate; }
.joy-band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; z-index: -2; }
.joy-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(122,34,36,.92) 0%, rgba(179,48,47,.80) 38%, rgba(179,48,47,.15) 70%, rgba(0,0,0,0) 100%); }
.joy-inner { padding: 3.5rem 0; max-width: 560px; }
.joy-band .eyebrow { background: rgba(255,255,255,.18); color: #fff; }
.joy-band h2 { color: #fff; font-size: clamp(28px, 2vw + 18px, 38px); }
.joy-band p { color: #f1f5f9; font-size: 1.08rem; }
.joy-band .btn-primary { background: #fff; color: var(--red-bright); box-shadow: 0 10px 24px rgba(0,0,0,.2); }
.joy-band .btn-primary:hover { color: #7a2224; background: #fff; }
.joy-band .btn-ghost { border-color: #fff; color: #fff; }
.joy-btns { display: flex; flex-wrap: wrap; gap: .7rem; }
.joy-btns .btn { display: inline-flex; align-items: center; gap: .5rem; }
@media (max-width: 899px) { .joy-band::after { background: linear-gradient(180deg, rgba(122,34,36,.88), rgba(179,48,47,.82)); } }

/* lighter image overlays: let the photos shine */
.hero::after { background: linear-gradient(100deg, rgba(30,14,14,.62) 0%, rgba(30,14,14,.38) 38%, rgba(30,14,14,.05) 65%, rgba(30,14,14,0) 100%); }
.hero h1, .hero .lead, .hero-points li { text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.svc-big::after { background: linear-gradient(180deg, rgba(20,12,12,0) 40%, rgba(20,12,12,.72) 100%); }
.svc-big-body { text-shadow: 0 1px 8px rgba(0,0,0,.35); }
.joy-band::after { background: linear-gradient(90deg, rgba(122,34,36,.82) 0%, rgba(179,48,47,.55) 34%, rgba(179,48,47,0) 62%); }
.gallery figure:hover img { opacity: 1; }
.gallery figcaption { background: linear-gradient(transparent, rgba(0,0,0,.6)); }

/* photo cards: text stays white on hover (overrides the global a:hover colour) */
.svc-big, .svc-big:hover, .svc-big:focus-visible, .svc-big:hover strong, .svc-big:hover .svc-go { color: #fff; }
.svc-big:hover .svc-tag { color: #fff; }
.svc-big:hover::after { background: linear-gradient(180deg, rgba(20,12,12,0) 30%, rgba(20,12,12,.8) 100%); }
.svc-big:hover .svc-go { text-decoration: underline; text-underline-offset: 4px; }
/* same safety for other dark-background link cards */
.gallery a:hover, .joy-band a.btn-ghost:hover { color: #fff; }

/* ===== card hover = colour change (clear "you're on this one" signal) ===== */
.svc-card, .feature, .guide-card, .timeline li, .contact-tiles li, .gallery figure {
  transition: background .25s, color .25s, border-color .25s, transform .25s, box-shadow .25s; }
/* light cards flip to brand red */
.svc-card:hover, .feature:hover, .guide-card:hover, .timeline li:hover {
  background: linear-gradient(135deg, #c63a37 0%, #a12b2c 100%); border-color: #a12b2c; color: #fff;
  transform: translateY(-4px); box-shadow: 0 18px 36px rgba(179,48,47,.32); }
.svc-card:hover strong, .svc-card:hover span, .feature:hover h3, .feature:hover p, .feature:hover a,
.guide-card:hover strong, .guide-card:hover .g-text, .guide-card:hover .g-go, .guide-card:hover .g-num,
.timeline li:hover h3, .timeline li:hover p, .timeline li:hover a { color: #fff; }
.svc-card:hover .ico, .feature:hover .ico, .guide-card:hover .g-top .ico { background: #fff; color: #b3302f; box-shadow: none; }
.guide-card:hover::before { background: #fff; }
.timeline li:hover .tl-num { background: #fff; color: #b3302f; border-color: #a12b2c; }
/* photo cards: warm red wash */
.svc-big::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(198,58,55,.15) 0%, rgba(161,43,44,.85) 100%); opacity: 0; transition: opacity .3s; }
.svc-big:hover::before { opacity: 1; }
.svc-big:hover .svc-tag { background: #fff; color: #b3302f; }
.svc-big:hover .svc-tag .ico { color: #b3302f; }
/* gallery: red edge + caption bar */
.gallery figure:hover { box-shadow: 0 0 0 4px #c63a37, 0 16px 30px rgba(179,48,47,.3); transform: translateY(-3px); }
.gallery figure:hover figcaption { background: linear-gradient(transparent, rgba(161,43,44,.92)); }
/* contact tiles: brighter on hover */
.contact-tiles li:hover { background: rgba(198,58,55,.35); border-color: rgba(255,255,255,.3); }
/* keyboard users get the same signal */
.svc-card:focus-visible, .guide-card:focus-visible, .svc-big:focus-visible { outline: 3px solid #1a5fb4; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .svc-card:hover, .feature:hover, .guide-card:hover, .timeline li:hover, .gallery figure:hover { transform: none; } }

/* "Talk to the team": clean solid brand red + white tiles (no muddy gradient) */
.contact-band { background: #b3302f; background-image: none; box-shadow: 0 18px 40px rgba(179,48,47,.25); }
.contact-band-head .cb-title { color: #fff; }
.contact-band-head p { color: #e2ebf4; }
.contact-band .cb-btn { background: #fff; color: #b3302f; box-shadow: 0 8px 18px rgba(0,0,0,.15); }
.contact-band .cb-btn:hover { background: #fff; color: #7a2224; }
.contact-tiles li { background: #fff; border: 0; color: #1f2328; box-shadow: 0 6px 16px rgba(90,20,20,.18); }
.contact-tiles li:hover { background: #fff; border: 0; transform: translateY(-3px); box-shadow: 0 12px 26px rgba(90,20,20,.28); }
.contact-tiles small { color: #b3302f; }
.contact-tiles a { color: #1f2328; }
.contact-tiles a:hover { color: #b3302f; }
.contact-tiles .ico { background: #e6eef6; color: #b3302f; }
.contact-tiles li { transition: transform .2s, box-shadow .2s; }

/* ===== mobile usability fixes (tools/mobile-audit.mjs) ===== */
/* form fields: 16px stops iPhones zooming in on focus; 44px tall to tap */
.quote-form input, .quote-form select, .quote-form textarea { font-size: 16px; }
.quote-form input, .quote-form select { min-height: 44px; }
/* links in lists and lines get a 24px+ tap height without changing the look */
.site-footer li a, .site-footer p a, .topbar a, .breadcrumbs a, .link-list a, .footer-legal a { display: inline-block; padding: 3px 0; line-height: 1.35; }
.site-footer li { margin-bottom: .1rem; }
@media (max-width: 1024px) {
  .menu-toggle { min-height: 44px; padding: .6rem .9rem; }
  .sub-toggle { min-width: 44px; min-height: 44px; }
  .site-nav a.top { min-height: 44px; display: flex; align-items: center; }
  .sub a { min-height: 44px; }
}
@media (max-width: 480px) {
  .feature p, .svc-card span, .g-text { font-size: 16px; }
  .gallery { gap: .5rem; }
}

.contact-tiles a { display: inline-block; padding: 4px 0; }
.logo { flex-shrink: 0; }

/* ===== mobile menu v2: full-screen drawer (built by site.js) ===== */
@media (max-width: 1000px) { .site-nav { display: none !important; } }
.menu-toggle { background: var(--red-bright); box-shadow: 0 6px 16px rgba(179,48,47,.28); border-radius: 12px; }
.m-drawer { position: fixed; inset: 0; z-index: 1000; }
.m-drawer[hidden] { display: none; }
.m-backdrop { position: absolute; inset: 0; background: rgba(28,16,16,.55); backdrop-filter: blur(2px); opacity: 0; transition: opacity .3s ease; }
.m-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%); background: #fff; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .32s cubic-bezier(.2,.8,.2,1); box-shadow: -24px 0 50px rgba(0,0,0,.22); outline: none; }
.m-drawer.open .m-backdrop { opacity: 1; }
.m-drawer.open .m-panel { transform: none; }
.m-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1rem .75rem 1.1rem; border-bottom: 1px solid var(--line); }
.m-logo img { width: 150px; height: auto; display: block; }
.m-close { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: 0 .9rem; border: 0; border-radius: 12px; background: var(--ink); color: #fff; font: 700 15px var(--font); cursor: pointer; }
.m-x { width: 20px; height: 20px; }
.m-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 1rem 1rem calc(1.5rem + env(safe-area-inset-bottom)); }
/* calls to action first */
.m-cta { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: 1rem; }
.m-quote { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: .4rem; min-height: 52px; border-radius: 14px;
  background: linear-gradient(135deg, #c63a37, #a12b2c); color: #fff; font-weight: 800; font-size: 17px; text-decoration: none; box-shadow: 0 10px 22px rgba(179,48,47,.3); }
.m-quote .m-chev { width: 18px; height: 18px; }
/* main list */
.m-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.m-list > li { border-bottom: 1px solid var(--line); opacity: 0; transform: translateX(16px); transition: opacity .3s ease, transform .3s ease; transition-delay: calc(var(--i) * 35ms + 80ms); }
.m-drawer.open .m-list > li { opacity: 1; transform: none; }
.m-link { width: 100%; display: flex; align-items: center; gap: .85rem; min-height: 58px; padding: .4rem .25rem; background: none; border: 0; text-align: left;
  font: 700 17px var(--font); color: var(--ink); text-decoration: none; cursor: pointer; }
.m-ico-wrap { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--red-tint); color: var(--red-bright); flex: none; transition: background .2s, color .2s; }
.m-ico { width: 20px; height: 20px; }
.m-ico-wrap .m-ico { width: 20px; height: 20px; }
.m-label { flex: 1; }
.m-count { font-size: 12px; font-weight: 800; color: var(--muted); background: #f4efed; border-radius: 999px; padding: 2px 8px; }
.m-chev { width: 18px; height: 18px; color: #b9aeac; flex: none; transition: transform .25s; }
.m-link:hover, .m-link:focus-visible, .m-link[aria-current="page"] { color: var(--red-bright); }
.m-link:hover .m-ico-wrap, .m-link[aria-current="page"] .m-ico-wrap, .m-group.open > .m-link .m-ico-wrap { background: var(--red-bright); color: #fff; }
.m-group.open > .m-link { color: var(--red-bright); }
.m-group.open .m-down { transform: rotate(180deg); color: var(--red-bright); }
/* accordion: smooth height via grid rows */
.m-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.m-sub > ul { overflow: hidden; list-style: none; margin: 0; padding: 0 0 0 3.35rem; }
.m-group.open > .m-sub { grid-template-rows: 1fr; }
.m-group.open > .m-sub > ul { padding-bottom: .6rem; }
.m-sub a { display: block; padding: .6rem .75rem; margin: 0 0 .2rem; border-radius: 10px; text-decoration: none; min-height: 44px; }
.m-sub a:hover, .m-sub a[aria-current="page"] { background: var(--red-tint); }
.m-sub-t { display: block; font-weight: 700; font-size: 16px; color: var(--ink); }
.m-sub-d { display: block; font-size: 14px; color: var(--muted); line-height: 1.35; margin-top: .1rem; }
.m-sub a[aria-current="page"] .m-sub-t { color: var(--red-bright); }
.m-group:not(.open) .m-sub a { visibility: hidden; }   /* closed items can't be tabbed to */
/* contact details */
@media (prefers-reduced-motion: reduce) {
  .m-panel, .m-backdrop, .m-list > li, .m-sub, .m-chev { transition: none !important; }
  .m-list > li { opacity: 1; transform: none; }
}

/* area pages: local data block (server-built chart + facts) */
.area-data-grid { display: grid; gap: 1.25rem; align-items: start; }
@media (min-width: 900px) { .area-data-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.area-chart { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1rem; margin: 0; }
.area-chart svg { width: 100%; height: auto; display: block; }
.area-chart figcaption { font-size: 13px; color: var(--muted); margin-top: .5rem; }
.area-chart .k { display: inline-block; width: 16px; height: 3px; border-radius: 2px; vertical-align: middle; margin: 0 .3rem 0 .2rem; }
.area-chart .k-a { background: #b3302f; } .area-chart .k-e { background: repeating-linear-gradient(90deg,#8a8a8d 0 4px,transparent 4px 7px); }
.area-facts { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin: 0; }
.area-facts caption { text-align: left; font-weight: 800; color: var(--ink); padding: 0 0 .5rem; }
.area-facts th, .area-facts td { padding: .75rem 1rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-size: 15px; }
.area-facts tr:last-child th, .area-facts tr:last-child td { border-bottom: 0; }
.area-facts th { color: var(--muted); font-weight: 700; width: 45%; background: #f6f9fb; }
.area-facts td strong { display: block; color: var(--ink); font-size: 17px; }
.area-facts td span { display: block; color: var(--muted); font-size: 13px; }
.area-data-src { font-size: 13px; color: var(--muted); margin-top: .75rem; }

/* ---- contrast fixes: links and icons on red/dark panels ---- */
.btn .ico, .ask-bar .btn .ico { color: currentColor; }
.quote-band a:not(.btn) { color: #fff; font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; white-space: nowrap; }
.quote-band a:not(.btn):hover { color: #ffe1df; }
.quote-band p { flex: 1 1 32rem; }
.quote-form .form-town { margin: .7rem 0 0; padding: .55rem .8rem; border-radius: 10px; background: var(--red-tint, #e6eef6); color: #3f2a2a; font-size: 1rem; line-height: 1.45; }
.quote-form .form-town a { font-weight: 700; }

/* feature tiles: centred on phones (single column) */
@media (max-width: 639px) {
  .feature { text-align: center; padding: 1.3rem 1.2rem 1.4rem; }
  .feature .ico { display: block; margin: 0 auto .7rem; }
  .feature p { max-width: 34ch; margin-left: auto; margin-right: auto; }
}

/* ---- phones: centre every card and call-to-action block, sitewide (user rule) ---- */
@media (max-width: 639px) {
  .svc-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .3rem; padding: 1.3rem 1.2rem 1.4rem; }
  .svc-card .ico { margin-bottom: .4rem; }
  .contact-tiles li { flex-direction: column; justify-content: center; text-align: center; gap: .45rem; padding: 1rem; }
  .ask-bar { flex-direction: column; text-align: center; justify-content: center; }
  .ask-bar p { justify-content: center; }
  .ask-btns { justify-content: center; }
  .stat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .45rem; }
  .svc-big-body { align-items: center; text-align: center; }
  .svc-tag { align-self: center; }
  .joy-band::after { background: linear-gradient(180deg, rgba(122,34,36,.9) 0%, rgba(179,48,47,.82) 100%); }
  .joy-inner { text-align: center; margin: 0 auto; }
  .joy-btns { justify-content: center; }
  .quote-band { flex-direction: column; text-align: center; justify-content: center; }
  .quote-band p { flex-basis: auto; }
}

/* quote form: the extra questions for the chosen type of move */
.quote-form .type-fields { border: 0; margin: .9rem 0 .2rem; padding: .9rem .9rem 1rem; border-radius: 12px; background: #f1f5f9; border-left: 4px solid var(--red, #b3302f); min-width: 0; }
.quote-form .type-fields[hidden] { display: none; }
.quote-form .type-fields legend { float: left; width: 100%; padding: 0; margin: 0 0 .6rem; font-weight: 800; color: var(--ink); font-size: 15px; }
.quote-form .type-fields legend + .form-grid { clear: both; }
.quote-form .type-fields .opt, .quote-form .opt { font-weight: 400; color: var(--muted); font-size: 13px; }
.quote-form label.check { display: flex; align-items: center; gap: .55rem; min-height: 32px; font-weight: 600; cursor: pointer; margin: 0; }
.quote-form label.check input { width: 20px; height: 20px; min-height: 0; flex: none; margin: 0; accent-color: var(--red, #b3302f); }
.quote-form .type-fields + .form-grid { margin-top: .7rem; }
.quote-form .type-fields.is-in { animation: tf-in .28s ease-out; }
@keyframes tf-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .quote-form .type-fields.is-in { animation: none; } }
.quote-form .type-fields .form-grid > div { display: flex; flex-direction: column; justify-content: flex-end; }

/* quote form: asked in conversation order, in three numbered steps */
.quote-form .form-step { display: flex; align-items: center; gap: .5rem; margin: 1.05rem 0 .55rem; font-weight: 800; color: var(--ink); font-size: 15.5px; }
.quote-form .form-step:first-of-type { margin-top: .4rem; }
.quote-form .form-step span { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--red, #b3302f); color: #fff; font-size: 13px; }
.quote-form .type-fields { margin-top: .7rem; }

/* "44 towns" stat jumps to the area map; the map stops clear of the sticky header */
a.stat-link { color: inherit; text-decoration: none; border-radius: 14px; transition: background .2s, transform .2s; }
a.stat-link .stat-num, a.stat-link .stat-label { display: block; }
a.stat-link .stat-label { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a.stat-link:hover { background: rgba(255,255,255,.1); transform: translateY(-2px); }
a.stat-link:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
#gm-map { scroll-margin-top: 96px; }

/* free printable moving guide download */
.pdf-card { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; background: #f1f5f9; border: 1px solid #d3e0ec; border-left: 5px solid var(--red, #b3302f); border-radius: 14px; padding: 1.2rem 1.4rem; margin: 1.5rem 0 0; }
.pdf-card > .ico { width: 48px; height: 48px; padding: 11px; border-radius: 12px; background: linear-gradient(135deg, #c63a37, #a12b2c); color: #fff; flex: none; }
.pdf-card .pdf-text { flex: 1 1 22rem; }
.pdf-card .pdf-title { margin: 0 0 .2rem; font-weight: 800; font-size: 18px; color: var(--ink); }
.pdf-card .pdf-text p:not(.pdf-title) { margin: 0; color: var(--muted); }
@media (max-width: 639px) { .pdf-card { flex-direction: column; text-align: center; } .pdf-card .btn { width: 100%; justify-content: center; } }

/* links on their own in a table cell are tap targets: give them at least 24px of height */
.table-wrap td a, .table-wrap th a { display: inline-block; padding: 4px 0; line-height: 1.3; }

/* quote form as three short steps: one pane at a time once site.js adds .is-wizard (without JS every pane shows) */
.quote-form .form-steps { display: none; }
.quote-form .form-nav { display: none; }
.quote-form.is-wizard .form-pane:not(.on) { display: none; }
.quote-form.is-wizard .form-pane > .form-step { display: none; }
.quote-form.is-wizard .form-steps { display: flex; gap: .35rem; list-style: none; margin: 0 0 .8rem; padding: 0; }
.quote-form.is-wizard .form-steps li { flex: 1; display: flex; align-items: center; gap: .35rem; padding-top: .45rem; border-top: 3px solid #e6dcd8; font-size: 12.5px; font-weight: 700; color: var(--muted); line-height: 1.2; }
.quote-form.is-wizard .form-steps li span { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: #e6dcd8; color: var(--ink); font-size: 11px; }
.quote-form.is-wizard .form-steps li.on, .quote-form.is-wizard .form-steps li.done { border-top-color: var(--red, #b3302f); color: var(--ink); }
.quote-form.is-wizard .form-steps li.on span, .quote-form.is-wizard .form-steps li.done span { background: var(--red, #b3302f); color: #fff; }
.quote-form.is-wizard .form-nav { display: flex; gap: .6rem; margin-top: .85rem; }
.quote-form.is-wizard .form-nav .btn { flex: 1; padding: .75rem .9rem; font-size: 15.5px; min-height: 44px; }
.quote-form.is-wizard .form-nav .form-back { flex: 0 0 auto; }
.quote-form.is-wizard .form-pane[data-step="3"] .consent { margin: .7rem 0 0; }
.quote-form.is-wizard .type-fields { margin: .7rem 0 0; padding: .7rem .8rem .8rem; }
.quote-form.is-wizard .form-sub { margin-bottom: .8rem; }
.quote-form .form-pane.is-in { animation: tf-in .25s ease-out; }
@media (prefers-reduced-motion: reduce) { .quote-form .form-pane.is-in { animation: none; } }
/* tighter fields in the stepped form; touch screens keep 44px boxes */
.quote-form.is-wizard .form-grid { gap: .55rem .7rem; }
.quote-form.is-wizard label { font-size: 13.5px; margin-bottom: .2rem; }
.quote-form.is-wizard .form-title { font-size: 21px; }
.quote-form.is-wizard .form-sub { font-size: 14.5px; line-height: 1.45; }
.quote-form.is-wizard .type-fields legend { margin-bottom: .45rem; font-size: 14.5px; }
.quote-form.is-wizard label.check { min-height: 28px; }
@media (pointer: fine) {
  .quote-form.is-wizard input, .quote-form.is-wizard select { min-height: 40px; padding: .45rem .65rem; }
  .quote-form.is-wizard .form-nav .btn { min-height: 42px; padding: .6rem .9rem; }
}

/* move-type picture tiles (site.js adds .has-tiles; without JS the plain list shows) */
.quote-form .type-tiles { display: none; }
.quote-form.has-tiles .type-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; }
.quote-form.has-tiles .type-tiles:not([data-more]) + select { display: none; }
.quote-form.has-tiles .type-tiles[data-more] + select { margin-top: .55rem; }
.quote-form .type-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; min-height: 64px; padding: .55rem .25rem .5rem;
  font: inherit; font-size: 13px; font-weight: 700; color: var(--ink); background: #fff; border: 1.5px solid #e3d9d5; border-radius: 12px; cursor: pointer;
  transition: border-color .18s, background .18s, color .18s, transform .18s, box-shadow .18s; }
.quote-form .type-tile .ico { width: 22px; height: 22px; color: var(--red, #b3302f); transition: color .18s, transform .18s; }
.quote-form .type-tile:hover { border-color: var(--red, #b3302f); background: #f1f5f9; transform: translateY(-2px); box-shadow: 0 6px 14px rgba(179,48,47,.14); }
.quote-form .type-tile:hover .ico { transform: scale(1.1); }
.quote-form .type-tile[aria-checked="true"] { background: linear-gradient(160deg, #c8413f, #b3302f 55%, #96282a); border-color: #b3302f; color: #fff; box-shadow: 0 6px 16px rgba(179,48,47,.32); }
.quote-form .type-tile[aria-checked="true"] .ico { color: #fff; }
.quote-form .type-tile:focus-visible { outline: 3px solid rgba(179,48,47,.35); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .quote-form .type-tile, .quote-form .type-tile:hover { transition: none; transform: none; } }

/* drop-downs: own chevron, soft fill, red on hover and focus, tinted once answered */
.quote-form select { -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 2.3rem !important; border-radius: 10px; border-color: #d3dcea; background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3302f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .75rem center; background-size: 16px; transition: border-color .18s, box-shadow .18s, background-color .18s; }
.quote-form select:hover { border-color: var(--red, #b3302f); background-color: #f6f9fb; }
.quote-form select:has(option[value=""]:checked) { color: #7a6f6b; }
.quote-form select:not(:has(option[value=""]:checked)) { border-color: #c4d6e6; background-color: #f6f9fb; color: var(--ink); }
.quote-form input:hover, .quote-form textarea:hover { border-color: #d39a94; }
.quote-form .type-fields { background: linear-gradient(180deg, #f1f5f9, #fffdfc); }
/* phones: the move questions stay two to a row so step 1 stays short */
@media (min-width: 340px) and (max-width: 480px) {
  .quote-form .type-fields .form-grid { grid-template-columns: 1fr 1fr; gap: .5rem .55rem; }
  .quote-form .type-fields label { font-size: 13px; line-height: 1.25; }
  .quote-form .type-fields select { font-size: 16px; padding-left: .55rem; padding-right: 1.9rem !important; background-position: right .5rem center; }
  .quote-form .type-fields { padding: .65rem .65rem .75rem; }
  .quote-form .type-tile { min-height: 60px; font-size: 12.5px; }
}
/* download cards side by side: two on checklist pages, three on the guides hub */
.pdf-grid { display: grid; gap: 1rem; margin-top: 1.5rem; grid-template-columns: 1fr; }
.pdf-grid .pdf-card { margin: 0; flex-direction: column; align-items: flex-start; }
.pdf-grid .pdf-card .pdf-text { flex: 1 1 auto; }
.pdf-grid .pdf-card .btn { margin-top: auto; }
@media (min-width: 760px) { .pdf-grid.two { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .pdf-grid:not(.two) { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 760px) and (max-width: 979px) { .pdf-grid:not(.two) { grid-template-columns: 1fr; } }
.pdf-card { transition: transform .2s, box-shadow .2s, border-color .2s; }
.pdf-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(179,48,47,.14); border-color: #c4d6e6; }
@media (max-width: 640px) { .pdf-grid .pdf-card { align-items: center; text-align: center; } }

/* text sections run the full page width, like the cards and bands around them (left-aligned so long lines stay easy to read) */
.center-prose, .wrap > .prose, .section > .wrap > .prose { max-width: none; margin-left: 0; margin-right: 0; text-align: left; }
.center-prose { margin-bottom: 1.25rem; }
.pdf-grid .pdf-card { min-width: 0; }
.pdf-grid .pdf-card .btn { white-space: normal; max-width: 100%; text-align: center; line-height: 1.3; }
/* small phones: tiles two to a row, icon beside the label, so each tile stays wide enough to read and tap */
@media (max-width: 479px) {
  .quote-form.has-tiles .type-tiles { grid-template-columns: 1fr 1fr; gap: .4rem; }
  .quote-form .type-tile { flex-direction: row; justify-content: flex-start; gap: .5rem; min-height: 46px; padding: .45rem .7rem; font-size: 14px; }
  .quote-form .type-tile .ico { width: 20px; height: 20px; flex: none; }
}

/* looping animation in place of a photo (home intro): square, rounded like the photos */
.figure-video { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: var(--radius); background: #e6eef6; object-fit: cover; }
.figure-video-wide { aspect-ratio: 16 / 9; }

/* quote form step 2: "moving from" and "moving to" each a small group of address line + postcode */
.quote-form fieldset.addr { border: 0; padding: 0; margin: 0 0 .7rem; min-width: 0; }
.quote-form fieldset.addr legend { padding: 0; margin: 0 0 .3rem; font-weight: 800; color: var(--ink); font-size: 14.5px; }
.quote-form .addr-grid { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
@media (max-width: 480px) { .quote-form .addr-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
.quote-form .addr-grid > div { display: flex; flex-direction: column; justify-content: flex-end; }
.quote-form .when-date[hidden] { display: none; }

/* quote form: "had another quote?" upload */
.quote-form .field-hint { margin: -.1rem 0 .4rem; font-size: 14px; line-height: 1.4; color: var(--muted); }
.quote-form input[type=file] { padding: .45rem; min-height: 48px; background: #f6f9fb; border: 1.5px dashed #c4d6e6; cursor: pointer; font-size: 15px; color: var(--muted); }
.quote-form input[type=file]:hover { border-color: var(--red, #b3302f); background: #f1f5f9; }
.quote-form input[type=file]::file-selector-button { margin-right: .7rem; padding: .5rem .9rem; min-height: 36px; border: 0; border-radius: 999px; background: var(--red, #b3302f); color: #fff; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
.quote-form input[type=file]::file-selector-button:hover { background: #96282a; }
.quote-form .file-note { margin: .35rem 0 0; font-size: 14px; color: #8a2b2a; font-weight: 600; }

/* ===== footer (tidied 2026-10-10): brand + contact | services | help + downloads | depot map, then one legal bar ===== */
.site-footer { padding: 3rem 0 0; font-size: 15.5px; line-height: 1.5; }
.site-footer a { color: #f3ecea; text-decoration: none; transition: color .18s; }
.site-footer a:hover, .site-footer a:focus-visible { color: #a9c8e3; text-decoration: underline; text-underline-offset: 3px; }
.footer-grid { gap: 2.25rem 2rem; }
@media (min-width: 700px) and (max-width: 999px) { .footer-grid { grid-template-columns: 1fr 1fr; } .foot-brand, .footer-map { grid-column: 1 / -1; } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.25fr .8fr .9fr 1.45fr; gap: 2.5rem; } }
.footer-title { font-size: 13px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: #ffffff; margin: 0 0 .9rem; }
.foot-sub { margin-top: 1.5rem; }
.foot-logo { display: inline-block; margin-bottom: .9rem; }
.foot-logo img { display: block; height: auto; }
.foot-intro { color: #a9bccd; margin: 0 0 1.1rem; max-width: 34ch; }
.foot-contact li { display: flex; gap: .65rem; align-items: flex-start; margin: 0 0 .65rem; color: #e9e2e1; }
.foot-contact .ico { flex: none; width: 18px; height: 18px; margin-top: 3px; color: #a9c8e3; }
.foot-contact a { padding: 0; font-weight: 600; }
.foot-socials { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
.site-footer a.foot-social { display: inline-flex; align-items: center; min-height: 40px; padding: .4rem 1rem; border: 1.5px solid rgba(255,255,255,.28); border-radius: 999px; font-size: 14px; font-weight: 700; }
.site-footer a.foot-social:hover { background: #b3302f; border-color: #b3302f; color: #fff; text-decoration: none; }
.foot-links li { margin: 0; }
.site-footer .foot-links a { display: inline-block; padding: 5px 0; }
.foot-dl li { margin: 0 0 .45rem; }
.site-footer .foot-dl a { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; min-height: 44px; border-radius: 10px; background: rgba(255,255,255,.06); }
.site-footer .foot-dl a:hover { background: #b3302f; color: #fff; text-decoration: none; }
.foot-dl .ico { flex: none; width: 18px; height: 18px; color: #a9c8e3; }
.site-footer .foot-dl a:hover .ico { color: #fff; }
.foot-dl span { flex: 1; font-weight: 600; }
.foot-dl small { font-size: 11px; font-weight: 800; letter-spacing: 1px; color: #a9bccd; }
.site-footer .foot-dl a:hover small { color: #fff; }
.footer-map .map-embed { height: 260px; }
.site-footer a.foot-directions { display: inline-flex; align-items: center; gap: .45rem; margin-top: .7rem; padding: 4px 0; font-weight: 700; }
.foot-directions .ico { width: 16px; height: 16px; color: #a9c8e3; }
.footer-legal { margin-top: 2.5rem; padding: 1.1rem 0 1.3rem; border-top: 1px solid rgba(255,255,255,.12); background: #1b1414; font-size: 13.5px; color: #b9adab; }
.legal-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 2rem; }
.legal-row p { margin: 0; }
.legal-links { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; list-style: none; margin: 0; padding: 0; }
.site-footer .legal-links a { display: inline-block; padding: 4px 0; color: #e0d6d4; }
/* phones: services and help side by side, everything else full width; room at the bottom for the call bar */
@media (max-width: 699px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem 1.25rem; }
  .foot-brand, .footer-map, .foot-dl-wrap { grid-column: 1 / -1; }
  .legal-row { flex-direction: column; align-items: flex-start; }
  .footer-legal { padding-bottom: 5rem; }
}
.foot-logo { background: #fff; border-radius: 12px; padding: 8px 12px 6px; }
.site-footer a.foot-logo:hover { text-decoration: none; }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.15fr .72fr 1fr 1.4fr; } }
@media (max-width: 699px) { .site-footer .foot-dl a { padding: .45rem .55rem; gap: .45rem; } .foot-dl small { display: none; } .foot-dl span { font-size: 15px; } }
.site-footer .foot-dl a::after { content: "PDF"; font-size: 11px; font-weight: 800; letter-spacing: 1px; color: #a9bccd; }
.site-footer .foot-dl a:hover::after { color: #fff; }
@media (max-width: 699px) { .site-footer .foot-dl a::after { content: none; } }


/* ===== footer colours: light and bright (2026-10-10) ===== */
.site-footer { background: #f1f5f9; color: #3f444a; border-top: 4px solid #b3302f; }
.site-footer a { color: #1f2328; }
.site-footer a:hover, .site-footer a:focus-visible { color: #b3302f; }
.footer-title { color: #b3302f; }
.foot-logo { background: transparent; padding: 0; border-radius: 0; }
.foot-intro { color: #5a5f66; }
.foot-contact li { color: #3f444a; }
.foot-contact .ico, .foot-dl .ico, .foot-directions .ico { color: #b3302f; }
.site-footer a.foot-social { border-color: #c4d6e6; background: #fff; color: #1f2328; }
.site-footer a.foot-social:hover { background: #b3302f; border-color: #b3302f; color: #fff; }
.site-footer .foot-dl a { background: #fff; border: 1px solid #d3e0ec; }
.site-footer .foot-dl a:hover { background: #b3302f; border-color: #b3302f; color: #fff; }
.site-footer .foot-dl a::after { color: #8a7f7d; }
.site-footer .foot-dl a:hover::after, .site-footer .foot-dl a:hover .ico { color: #fff; }
.footer-map .map-embed { box-shadow: 0 8px 22px rgba(179,48,47,.12); border: 1px solid #d3e0ec; }
.footer-legal { background: #e6eef6; border-top: 1px solid #d3e0ec; color: #5a5f66; }
.site-footer .legal-links a { color: #3f444a; }
.site-footer .legal-links a:hover { color: #b3302f; }
.foot-logo { background: #fff; padding: 8px 12px 6px; border-radius: 12px; border: 1px solid #d3e0ec; }
/* bottom legal bar matches the top bar: dark, slim, one line (details left, links right) */
.footer-legal { margin-top: 2.5rem; padding: .55rem 0; background: #231a1a; border-top: 0; color: #e9e2e1; font-size: 14px; }
.footer-legal .wrap { width: min(100% - 32px, 1340px); }
.legal-row { flex-wrap: nowrap; gap: .5rem 2rem; }
.legal-links { gap: .3rem 1.25rem; flex-wrap: nowrap; }
.site-footer .legal-links a { color: #e9e2e1; padding: 3px 0; white-space: nowrap; }
.site-footer .legal-links a:hover { color: #a9c8e3; }
@media (max-width: 899px) { .legal-row { flex-wrap: wrap; } .legal-links { flex-wrap: wrap; } }
@media (max-width: 699px) { .footer-legal { padding: .8rem 0 5rem; } }
/* social buttons in their brand colours (shades deep enough for white text to pass contrast) */
.site-footer a.foot-social { gap: .45rem; color: #fff; border: 0; }
.site-footer a.foot-social .ico { width: 16px; height: 16px; }
.site-footer a.foot-facebook { background: #166fe5; }
.site-footer a.foot-facebook:hover { background: #0f56b8; color: #fff; }
.site-footer a.foot-trustpilot { background: #007a52; }
.site-footer a.foot-trustpilot:hover { background: #00603f; color: #fff; }

/* footer map: cookie-free picture first, live Google map after consent */
.map-embed .map-still { position: absolute; inset: 0; display: block; }
.map-embed .map-still img { width: 100%; height: 100%; object-fit: cover; display: block; }
.map-embed .map-open { position: absolute; left: 10px; top: 10px; padding: .4rem .75rem; border-radius: 8px; background: #fff; color: #1a73e8; font-size: 14px; font-weight: 700; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.site-footer .map-embed a.map-still:hover { text-decoration: none; }
.site-footer .map-embed a.map-still:hover .map-open { background: #b3302f; color: #fff; }
.map-embed iframe { position: absolute; inset: 0; z-index: 1; }
/* cookie choice bar */
.consent-bar { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.25rem;
  max-width: 980px; margin: 0 auto; padding: 1rem 1.25rem; border-radius: 16px; background: #fff; color: #3f444a; border: 1px solid #d3e0ec; border-top: 4px solid #b3302f; box-shadow: 0 18px 50px rgba(0,0,0,.22); font-size: 15px; line-height: 1.45; }
.consent-bar[hidden] { display: none; }
.consent-bar p { margin: 0; flex: 1 1 26rem; }
.consent-bar a { color: #b3302f; font-weight: 700; }
.consent-bar .consent-btns { flex: 0 0 auto; display: flex; gap: .5rem; flex-wrap: wrap; }
.consent-bar .btn { min-height: 44px; padding: .6rem 1.1rem; font-size: 15px; }
@media (max-width: 899px) { .consent-bar { bottom: 74px; } }   /* sits above the phone call bar */
@media (max-width: 640px) { .consent-bar { text-align: center; } .consent-bar .consent-btns { width: 100%; justify-content: center; } .consent-bar .btn { flex: 1; } }
.site-footer .link-btn { background: none; border: 0; padding: 4px 0; font: inherit; color: #e9e2e1; cursor: pointer; white-space: nowrap; }
.site-footer .link-btn:hover { color: #a9c8e3; text-decoration: underline; text-underline-offset: 3px; }

/* ===== removal volume calculator ===== */
.vc { display: grid; gap: 1.25rem; margin-top: 1rem; }
@media (min-width: 1000px) { .vc { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; gap: 1.75rem; } .vc-summary { position: sticky; top: 110px; } }
.vc-room { background: #fff; border: 1px solid #d9e3ec; border-radius: 14px; margin-bottom: .6rem; overflow: hidden; }
.vc-room summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .9rem 1.1rem; cursor: pointer; font-weight: 800; color: var(--ink); list-style: none; min-height: 52px; }
.vc-room summary::-webkit-details-marker { display: none; }
.vc-room summary::after { content: "+"; font-size: 1.3rem; color: var(--red, #b3302f); margin-left: .5rem; }
.vc-room[open] summary::after { content: "−"; }
.vc-room[open] summary { border-bottom: 1px solid #f3e9e6; background: #f6f9fb; }
.vc-room-total { margin-left: auto; font-weight: 700; color: var(--muted); font-size: 14.5px; }
.vc-list { list-style: none; margin: 0; padding: .3rem .6rem .6rem; display: grid; grid-template-columns: 1fr; }
@media (min-width: 700px) { .vc-list { grid-template-columns: 1fr 1fr; column-gap: 1rem; } }
.vc-item { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .6rem; padding: .45rem .5rem; border-radius: 10px; transition: background .15s; }
.vc-item.on { background: #ecf2f8; }
.vc-name { font-weight: 600; color: var(--ink); line-height: 1.3; }
.vc-size { font-size: 13px; color: var(--muted); white-space: nowrap; }
.vc-step { display: inline-flex; align-items: center; gap: .25rem; }
.vc:not(.is-live) .vc-step { display: none; }
.vc-step button { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid #c4d6e6; background: #fff; color: var(--red, #b3302f); font-size: 1.3rem; font-weight: 800; line-height: 1; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.vc-step button:hover:not(:disabled) { background: var(--red, #b3302f); border-color: var(--red, #b3302f); color: #fff; }
.vc-step button:disabled { opacity: .35; cursor: default; }
.vc-count { min-width: 1.8rem; text-align: center; font-weight: 800; font-size: 1.05rem; color: var(--ink); }
.vc-summary { background: #fff; border: 1px solid #d9e3ec; border-top: 5px solid var(--red, #b3302f); border-radius: 16px; padding: 1.2rem 1.25rem; box-shadow: 0 14px 34px rgba(179,48,47,.10); }
.vc-kicker { display: block; margin: 0; font-size: 13px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--red, #b3302f); }
.vc-total { margin: .15rem 0 .2rem; font-size: 2.6rem; font-weight: 800; color: var(--ink); line-height: 1.1; }
.vc-meta { margin: 0 0 .8rem; color: var(--muted); font-size: 15px; }
.vc-chosen { list-style: none; margin: 0 0 .9rem; padding: 0; max-height: 220px; overflow: auto; font-size: 14.5px; color: var(--text); }
.vc-chosen li { padding: .25rem 0; border-bottom: 1px dashed #d9e3ec; }
.vc:not(.has-items) .vc-chosen { display: none; }
.vc-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .7rem; }
.vc-actions .btn-block { flex: 1 1 100%; white-space: normal; text-align: center; }
.vc-actions .btn-outline { flex: 1; min-height: 44px; }
.vc:not(.has-items) [data-vc-send], .vc:not(.has-items) [data-vc-pdf], .vc:not(.has-items) [data-vc-clear] { opacity: .5; pointer-events: none; }
.vc-note { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.45; }
@media (max-width: 999px) { .vc-summary { order: 2; } }
@media (max-width: 640px) { .vc-summary { text-align: center; } }
.quote-form .vc-attached { margin: .2rem 0 .8rem; padding: .6rem .8rem; border-radius: 10px; background: #eaf6ee; color: #1d5b33; font-weight: 600; font-size: 14.5px; }
.quote-form .vc-attached button { background: none; border: 0; padding: 0 .2rem; color: #1d5b33; text-decoration: underline; font: inherit; cursor: pointer; min-height: 24px; }
@media print { .site-header, .topbar, .site-footer, .sticky-bar, .consent-bar, .hero, .trust-strip, .vc-rooms, .vc-actions, .faq, .quote-band { display: none !important; } .vc-summary { box-shadow: none; border: 0; } }
/* phones: a slim running total pinned under the header while the rooms scroll */
.vc-mini { display: none; }
@media (max-width: 999px) {
  .vc.is-live .vc-mini { display: flex; justify-content: space-between; align-items: center; gap: 1rem; position: sticky; top: 76px; z-index: 5; padding: .7rem 1rem; min-height: 48px;
    border-radius: 12px; background: var(--red, #b3302f); color: #fff; text-decoration: none; font-size: 15.5px; box-shadow: 0 8px 20px rgba(179,48,47,.28); }
  .vc-mini strong { font-size: 1.15rem; }
  .vc-mini > span:last-child { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
}
#vc-summary { scroll-margin-top: 90px; }
.figure.label-example { max-width: 620px; margin: 1.5rem auto 0; }
.figure.label-example img { border-radius: 14px; box-shadow: 0 12px 30px rgba(31,35,40,.12); aspect-ratio: auto; }

/* header fits at every laptop width: phone becomes its icon (number stays readable to screen readers and is in the top bar), then tighter menu */
@media (min-width: 1001px) and (max-width: 1439px) {
  .header-phone span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .header-phone .ico { width: 42px; height: 42px; padding: 10px; }
  .logo img { width: 164px; }
  .header-row { gap: 1rem; }
}
@media (min-width: 1001px) and (max-width: 1150px) {
  .site-nav a.top { padding: .5rem .42rem; font-size: 14.5px; }
  .sub-toggle { margin-left: -.45rem; }
  .logo img { width: 150px; }
}

/* calculator: a photo per item (button appears once the item has a count) */
.vc-name { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.vc-photo { display: none; align-items: center; gap: .5rem; flex-wrap: wrap; }
.vc.is-live .vc-item.on .vc-photo { display: flex; }
.vc-cam { display: inline-flex; align-items: center; gap: .35rem; min-height: 32px; padding: .2rem .65rem .2rem .5rem; border-radius: 999px; border: 1.5px dashed #c4d6e6; background: #fff; color: #8a2b2a; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.vc-cam .ico { width: 15px; height: 15px; }
.vc-cam:hover { background: var(--red, #b3302f); border-color: var(--red, #b3302f); border-style: solid; color: #fff; }
.vc-item.has-photo .vc-cam { display: none; }
.vc.photos-full .vc-item:not(.has-photo) .vc-cam { opacity: .5; }
.vc-thumb { display: inline-flex; align-items: center; gap: .45rem; }
.vc-thumb img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.vc-thumb button { background: none; border: 0; padding: 4px 0; min-height: 28px; color: #8a2b2a; font: inherit; font-size: 13px; font-weight: 600; text-decoration: underline; cursor: pointer; }
.vc-item { align-items: start; }
.vc-size, .vc-step { align-self: center; }

/* tables: rows light up on hover (comparison tables, timelines, data tables) */
main table tbody tr td, main table tbody tr th { transition: background-color .15s, color .15s, box-shadow .15s; }
main table tbody tr:hover td, main table tbody tr:hover th { background-color: #fde3df; }
main table tbody tr:hover > :first-child { box-shadow: inset 4px 0 0 #b3302f; color: #8a2b2a; }
main table thead th { transition: none; }
@media (prefers-reduced-motion: reduce) { main table tbody tr td, main table tbody tr th { transition: none; } }

/* calculator on phones: readable summary text; size sits under the item name so the row is name + counter */
@media (max-width: 640px) {
  .vc-meta, .vc-chosen, .vc-note { font-size: 16px; }
}
@media (max-width: 480px) {
  .vc-item { grid-template-columns: 1fr auto; column-gap: .5rem; row-gap: 0; }
  .vc-item .vc-name { grid-column: 1; grid-row: 1; }
  .vc-item .vc-size { grid-column: 1; grid-row: 2; align-self: start; }
  .vc-item .vc-step { grid-column: 2; grid-row: 1 / span 2; }
}

/* image captions are not shown on screen (user rule 2026-10-10); they stay in the page for screen readers and search engines */
figure:has(> img) figcaption, figure:has(> a > img) figcaption, figure:has(video) figcaption, .gallery figcaption { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }
figure:has(> img), figure:has(video) { position: relative; }

/* inventory app: install card on the calculator, and app-style screens when opened from the home screen */
.app-card { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; position: relative; padding: .9rem 2.6rem .9rem 1rem; margin-bottom: 1rem; border-radius: 16px; background: linear-gradient(135deg, #f1f5f9, #fff); border: 1px solid #d3e0ec; border-left: 5px solid var(--red, #b3302f); }
.app-card[hidden] { display: none; }
.app-card img { border-radius: 14px; flex: none; box-shadow: 0 4px 12px rgba(179,48,47,.25); }
.app-card-text { flex: 1 1 16rem; display: flex; flex-direction: column; gap: .15rem; }
.app-card-text strong { color: var(--ink); font-size: 1.05rem; }
.app-card-text span { color: var(--muted); font-size: 15px; line-height: 1.45; }
.app-card .btn { min-height: 44px; }
.app-card-close { position: absolute; top: 2px; right: 2px; width: 44px; height: 44px; border: 0; background: none; font-size: 1.4rem; color: var(--muted); cursor: pointer; border-radius: 50%; }
.app-card-close:hover { background: #e6eef6; color: var(--red, #b3302f); }
@media (max-width: 640px) { .app-card { text-align: center; justify-content: center; padding-right: 1rem; } .app-card .btn { width: 100%; } }
/* opened as the installed app: no website chrome, just the tool */
html.is-app .topbar, html.is-app .site-footer, html.is-app .sticky-bar, html.is-app .consent-bar, html.is-app .trust-strip, html.is-app .breadcrumbs,
html.is-app .faq, html.is-app .quote-band, html.is-app .site-nav, html.is-app .menu-toggle { display: none !important; }
html.is-app .site-header .header-row { justify-content: space-between; }
html.is-app .hero { min-height: 0; }
html.is-app .hero .lead, html.is-app .hero-buttons { display: none; }
html.is-app body.type-guide main > section:not(:has(.vc)):not(.hero) { display: none; }
html.is-app body { padding-bottom: env(safe-area-inset-bottom); }
/* app view: the banner becomes a slim title bar */
html.is-app .hero { min-height: 0 !important; padding: 0 !important; background: var(--red, #b3302f); }
html.is-app .hero .hero-img, html.is-app .hero::before, html.is-app .hero::after { display: none !important; }
html.is-app .hero .hero-inner { padding: .9rem 0 !important; }
html.is-app .hero h1 { font-size: 1.35rem !important; margin: 0 !important; }

/* ===== survey mode (/survey.html) ===== */
body.survey-app { background: #f1f5f9; }
.sv-bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: .8rem; padding: .7rem 16px; padding-top: max(.7rem, env(safe-area-inset-top)); background: #fff; border-bottom: 3px solid var(--red, #b3302f); }
.sv-mode { font-weight: 800; color: var(--red, #b3302f); text-transform: uppercase; letter-spacing: 1.2px; font-size: 13px; }
.sv-net { margin-left: auto; font-size: 13px; font-weight: 700; color: #1d5b33; background: #eaf6ee; padding: .25rem .6rem; border-radius: 999px; }
.sv-net.off { color: #7a4300; background: #fff4e5; }
.sv-main { padding: 1rem 0 3rem; max-width: 1100px; }
.sv-lock { max-width: 420px; margin: 3rem auto; background: #fff; padding: 1.5rem; border-radius: 16px; border: 1px solid #d3e0ec; }
.sv-lock h1 { margin: 0 0 .4rem; font-size: 1.6rem; }
.sv-lock label, .sv-grid label, .vc-room-note { display: flex; flex-direction: column; gap: .3rem; font-weight: 700; color: var(--ink); font-size: 15px; }
.sv-lock input, .sv-grid input, .vc-room-note textarea { font: inherit; font-size: 16px; padding: .65rem .75rem; min-height: 46px; border: 1.5px solid #d3dcea; border-radius: 10px; background: #fff; font-weight: 400; }
.sv-lock .btn { margin-top: .9rem; }
.sv-card { background: #fff; border: 1px solid #d3e0ec; border-radius: 16px; padding: 1.1rem 1.1rem 1.25rem; margin-bottom: 1rem; }
.sv-card h2 { margin: 0 0 .8rem; font-size: 1.25rem; }
.sv-grid { display: grid; gap: .8rem; grid-template-columns: 1fr 1fr; }
.sv-grid .full { grid-column: 1 / -1; }
@media (max-width: 560px) { .sv-grid { grid-template-columns: 1fr; } }
.vc-room-note { margin: .4rem .6rem .8rem; font-size: 14px; }
.sv-card > .vc-room-note { margin: 0 0 .8rem; }
.vc-room-note textarea { resize: vertical; }
.sv-send .check { display: flex; gap: .6rem; align-items: center; font-weight: 700; margin-bottom: .8rem; min-height: 32px; }
.sv-send .check input { width: 22px; height: 22px; accent-color: var(--red, #b3302f); }
.sv-send .btn { margin-top: .5rem; min-height: 50px; font-size: 16px; }
.sv-msg { margin: .6rem 0 0; font-weight: 700; font-size: 15px; }
.sv-msg.ok { color: #1d5b33; } .sv-msg.err { color: #8a2b2a; }
.sv-small { margin: .8rem 0 0; color: var(--muted); font-size: 14px; }
.vc-survey .vc-summary { position: static; }
@media (min-width: 1000px) { .vc-survey .vc-summary { position: sticky; top: 80px; } }
.vc-survey .vc-mini { top: 64px; }
dl.sources { margin: 0 0 1.5rem; } dl.sources dt { font-weight: 800; color: var(--ink); margin-top: 1rem; } dl.sources dd { margin: .25rem 0 0; }
/* buttons on the red quote band: on hover they turn dark, so they never vanish into the red */
.quote-band .btn-primary:hover, .quote-band .btn-primary:focus-visible { background: #231a1a; color: #fff; border-color: #231a1a; box-shadow: 0 8px 20px rgba(0,0,0,.25); }
/* white outline buttons on photos and red bands: hover fills white with red text (never white on white) */
.hero .btn-ghost:hover, .hero .btn-ghost:focus-visible,
.joy-band a.btn-ghost:hover, .joy-band a.btn-ghost:focus-visible { background: #fff; color: #b3302f; border-color: #fff; }
.hero .btn-ghost:hover .ico, .joy-band a.btn-ghost:hover .ico { color: #b3302f; }
/* calculator grid: the app card and phone total strip span the full width; rooms stay left, summary right */
.vc > .app-card, .vc > .vc-mini { grid-column: 1 / -1; }
@media (min-width: 1000px) { .vc > .vc-rooms { grid-column: 1; } .vc > .vc-summary { grid-column: 2; grid-row: span 2; } }
.vc-item { align-items: center; }
.vc-item.has-photo, .vc-item.on { align-items: start; }
.vc-item.on .vc-size, .vc-item.on .vc-step { align-self: center; }

/* robot check (proof-of-work CAPTCHA) */
.captcha { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .7rem; align-items: center; margin: .8rem 0 .2rem; padding: .65rem .85rem; min-height: 54px;
  border: 1.5px solid #d3dcea; border-radius: 10px; background: #fafafa; cursor: pointer; user-select: none; }
.captcha:focus-visible { outline: 3px solid rgba(179,48,47,.35); outline-offset: 2px; }
.captcha .cap-box { grid-row: 1 / span 2; width: 26px; height: 26px; border: 2px solid #b9b1ad; border-radius: 6px; background: #fff; position: relative; }
.captcha .cap-text { font-weight: 700; font-size: 15px; color: var(--ink); }
.captcha .cap-note { font-size: 12.5px; color: var(--muted); }
.captcha[data-state="busy"] .cap-box { border-color: #b3302f; border-top-color: transparent; border-radius: 50%; animation: cap-spin .8s linear infinite; }
.captcha[data-state="done"] { border-color: #a9d5b5; background: #eef8f1; cursor: default; }
.captcha[data-state="done"] .cap-box { border-color: #1d7a3e; background: #1d7a3e; }
.captcha[data-state="done"] .cap-box::after { content: ""; position: absolute; left: 7px; top: 2px; width: 7px; height: 13px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg); }
.captcha[data-state="error"] { border-color: #c4d6e6; background: #f1f5f9; }
@keyframes cap-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .captcha[data-state="busy"] .cap-box { animation: none; } }

/* ===== navy + red (v4, 2026-10-11): red stays for the logo and buttons, navy carries the structure.
   Roll back by deleting this block (backup: backups/colours-before-navy-2026-10-11/) ===== */
:root { --navy: #2e5576; --navy-dark: #224058; --navy-mid: #396a93; --blue: #3c6f9a; --blue-tint: #e6eef6; --blue-soft: #f1f5f9; --line: #d9e3ec; }
h1, h2, h3 { color: var(--navy); }
a { color: var(--blue); }
a:hover { color: var(--navy); }
/* dark bars: navy, not brown-black */
.topbar { background: var(--navy-dark); color: #d9e5ef; }
.topbar .ico { color: #a9c8e3; }
.site-footer { background: var(--navy); color: #d9e5ef; }
.site-footer a { color: #edf2f7; }
.footer-legal { background: var(--navy-dark); color: #a9bccd; }
.site-footer .legal-links a { color: #d1dfeb; }
.site-header.scrolled { box-shadow: 0 6px 24px rgba(10,29,66,.12); }
.site-nav a.top:hover, .has-sub:hover > a.top { color: var(--navy); background: var(--blue-tint); }
/* tinted sections: cool blue instead of blush */
.section.alt, .faq { background: linear-gradient(180deg, #f1f5f9 0%, #e6eef6 100%); }
.eyebrow { background: var(--blue-tint); color: var(--blue); }
.btn-outline { border-color: var(--navy); color: var(--navy); }
.btn-outline:hover { background: var(--navy); color: #fff; }
.btn-ghost:hover { color: var(--navy); }
/* hero: navy wash */
.hero::after { background: linear-gradient(100deg, rgba(10,29,66,.72) 0%, rgba(10,29,66,.45) 38%, rgba(10,29,66,.08) 65%, rgba(10,29,66,0) 100%); }
.trust-strip { box-shadow: 0 6px 18px rgba(10,29,66,.06); }
.trust-strip .ico { color: var(--navy-mid); }
/* icon badges navy, cards flip to navy on hover */
.svc-card .ico, .feature .ico, .g-top .ico, .tl-num, .float-badge .ico { background: linear-gradient(135deg, #396a93, #2e5576); box-shadow: 0 6px 14px rgba(15,42,92,.25); }
.svc-card, .feature, .guide-card, .timeline li { box-shadow: 0 4px 14px rgba(10,29,66,.05); }
.svc-card:hover, .feature:hover, .guide-card:hover, .timeline li:hover {
  background: linear-gradient(135deg, #396a93 0%, #2e5576 100%); border-color: #2e5576; box-shadow: 0 18px 36px rgba(15,42,92,.30); }
.svc-card:hover .ico, .feature:hover .ico, .guide-card:hover .g-top .ico { background: #fff; color: #b3302f; }
.timeline li:hover .tl-num { color: var(--navy); border-color: var(--navy); }
.svc-big::before { background: linear-gradient(180deg, rgba(28,63,128,.15) 0%, rgba(15,42,92,.88) 100%); }
.gallery figure:hover { box-shadow: 0 0 0 4px var(--navy-mid), 0 16px 30px rgba(15,42,92,.3); }
.gallery figure:hover figcaption { background: linear-gradient(transparent, rgba(15,42,92,.92)); }
.timeline::before { background: repeating-linear-gradient(90deg, var(--navy-mid) 0 8px, transparent 8px 14px); }
/* bands: stats navy, contact navy with red button; feel-good band stays red for contrast */
.stats-band { background: linear-gradient(120deg, #396a93 0%, #2e5576 50%, #224058 100%); }
.stat-label { color: #d4e2ee; }
.contact-band { background: var(--navy); box-shadow: 0 18px 40px rgba(15,42,92,.25); }
.contact-band-head p { color: #d4e2ee; }
.contact-band .cb-btn { background: #b3302f; color: #fff; }
.contact-band .cb-btn:hover { background: #8f2524; color: #fff; }
.contact-tiles li { box-shadow: 0 6px 16px rgba(5,15,40,.22); }
.contact-tiles small { color: var(--blue); }
.contact-tiles a:hover { color: var(--blue); }
.contact-tiles .ico { background: var(--blue-tint); color: var(--navy); }
.trusted strong { border-color: #d1dfeb; background: #f5f8fb; }
/* navy footer, finished (overrides the light footer of 2026-10-10) */
.site-footer { border-top: 4px solid #b3302f; }
.site-footer a:hover, .site-footer a:focus-visible { color: #cfe0ef; }
.footer-title { color: #a9c8e3; }
.foot-intro, .foot-contact li { color: #d1dfeb; }
.foot-contact .ico, .foot-directions .ico { color: #a9c8e3; }
.site-footer .foot-dl a { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); color: #edf2f7; }
.site-footer .foot-dl .ico { color: #a9c8e3; }
.site-footer .foot-dl a::after { color: #a9bccd; }
.site-footer .foot-dl a:hover { background: #b3302f; border-color: #b3302f; }
.foot-logo { border-color: transparent; }
.footer-map .map-embed { border-color: rgba(255,255,255,.16); box-shadow: none; background: #335f84 repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 12px, transparent 12px 24px); }
.site-footer .legal-links a { color: #d9e5ef; }
.site-footer .legal-links a:hover { color: #cfe0ef; }
/* blue buttons (2026-10-11): every button is royal blue, red stays in the logo, ticks and highlighted words */
:root { --btn: #3f77a5; --btn-dark: #335f84; }
.btn-primary { background: linear-gradient(135deg, #4682b4 0%, #3c6f9a 100%); box-shadow: 0 8px 20px rgba(22,63,143,.28); }
.btn-primary:hover { background: linear-gradient(135deg, #3f77a5 0%, #2e5576 100%); box-shadow: 0 12px 26px rgba(22,63,143,.34); }
.quote-band { background: var(--navy); }
.quote-band .btn-primary, .joy-band .btn-primary { background: #fff; color: var(--btn); }
.quote-band .btn-primary:hover, .joy-band .btn-primary:hover { background: #fff; color: var(--navy); }
.joy-band a.btn-ghost:hover, .joy-band a.btn-ghost:focus-visible, .hero .btn-ghost:hover .ico, .joy-band a.btn-ghost:hover .ico { color: var(--btn); }
.contact-band .cb-btn { background: #fff; color: var(--btn); }
.contact-band .cb-btn:hover { background: #fff; color: var(--navy); }
.header-phone .ico { background: var(--blue-tint); color: var(--btn); }
.header-phone:hover { color: var(--btn); }
.menu-toggle { background: var(--btn); box-shadow: 0 6px 16px rgba(22,63,143,.28); }
.m-quote { background: linear-gradient(135deg, #4682b4, #3c6f9a); box-shadow: 0 10px 22px rgba(22,63,143,.3); }
@media (max-width: 899px) { .sticky-bar a { background: var(--btn); } .sticky-bar a + a { background: var(--navy); } }
@media (max-width: 999px) { .vc.is-live .vc-mini { background: var(--btn); box-shadow: 0 8px 20px rgba(22,63,143,.28); } }
.faq-list details[open] summary::after { background: var(--btn); }
/* quote form controls */
.quote-form .type-tile .ico { color: var(--btn); }
.quote-form .type-tile:hover { border-color: var(--btn); background: var(--blue-soft); box-shadow: 0 6px 14px rgba(22,63,143,.14); }
.quote-form .type-tile[aria-checked="true"] { background: linear-gradient(160deg, #4682b4, #3f77a5 55%, #335f84); border-color: var(--btn); box-shadow: 0 6px 16px rgba(22,63,143,.3); }
.quote-form .type-tile:focus-visible { outline-color: rgba(29,79,174,.4); }
.quote-form input[type=file]::file-selector-button { background: var(--btn); }
.vc-step button { color: var(--btn); border-color: #c4d6e6; }
.vc-step button:hover:not(:disabled), .vc-cam:hover { background: var(--btn); border-color: var(--btn); }

/* no peach: the pale tints are blue now (2026-10-11) */
:root { --red-tint: #e6eef6; --soft: #f1f5f9; --blush: #e6eef6; }
.footer-title { color: #fff; }

/* the quote form arrives already on step 1 (is-wizard + .on are in the HTML), so the hero doesn't jump when site.js starts.
   Without JavaScript every pane shows again and only the send button is offered */
@media (scripting: none) {
  .quote-form.is-wizard .form-pane:not(.on) { display: block; }
  .quote-form.is-wizard .form-pane > .form-step { display: flex; }
  .quote-form.is-wizard .form-steps, .quote-form.is-wizard .form-next, .quote-form.is-wizard .form-back { display: none; }
}
/* "Leave a Google review": top bar link, phone menu button, reviews page button (2026-10-11) */
.review-cta { text-align: center; margin-top: 1rem; }
.topbar a.topbar-review { font-weight: 700; }
.topbar a.topbar-review .ico { color: #ffd166; }
@media (max-width: 1180px) { .topbar a.topbar-review { display: none; } }
.m-review { grid-column: 1 / -1; display: flex; align-items: center; gap: .75rem; min-height: 56px; padding: .5rem .9rem; border: 1.5px solid var(--line); border-radius: 14px; color: var(--ink); text-decoration: none; font-weight: 800; font-size: 17px; }
.m-review small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--btn); }
.m-review .m-ico { width: 40px; height: 40px; padding: 10px; border-radius: 12px; background: #fff4d6; color: #b07800; flex: none; }
.m-review:hover, .m-review:focus-visible { border-color: var(--btn); color: var(--ink); }

/* video beside text: equal columns so the 16:9 clip matches the copy's height; key points run in one strip underneath.
   Full-width tick lists elsewhere (not beside a photo) use the same strip, so they don't leave the right half empty */
@media (min-width: 900px) { .split.split-video { grid-template-columns: 1fr 1fr; } }
.tick-strip, .wrap:not(.split) > .prose > ul.ticks, .wrap:not(.split) > ul.ticks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr)); gap: .55rem 1.75rem; margin: 1.75rem 0 0; padding: 1rem 1.25rem; background: #f1f5f9; border-radius: var(--radius); }
.tick-strip li, .wrap:not(.split) > .prose > ul.ticks li, .wrap:not(.split) > ul.ticks li { margin: 0; }
.section.alt .tick-strip, .section.alt .wrap:not(.split) > .prose > ul.ticks, .section.alt .wrap:not(.split) > ul.ticks { background: #fff; }

/* make a payment (/pay/): the form card beside the "how it works" steps; thank-you and cancelled pages */
.pay-layout { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 900px) { .pay-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; } }
.pay-form { background: #fff; border: 1px solid #dde6ef; border-radius: var(--radius); box-shadow: 0 10px 30px rgba(34, 64, 88, .08); padding: 1.5rem; }
.pay-form .form-title { font-size: 1.3rem; font-weight: 800; color: var(--navy); margin: 0 0 .2rem; }
.pay-form .form-sub { color: var(--muted); margin: 0 0 1rem; }
.pay-field { margin-bottom: .9rem; }
.pay-form label { display: block; font-weight: 700; color: var(--ink); margin-bottom: .3rem; font-size: 15px; }
.pay-form .opt { font-weight: 500; color: var(--muted); }
.pay-form input:not(.hp) { width: 100%; min-height: 44px; font: inherit; font-size: 16px; padding: .6rem .75rem; border: 1px solid #c3cfdb; border-radius: 8px; background: #fff; color: var(--ink); }
.pay-form input:not(.hp):focus { outline: none; border-color: var(--btn, #3f77a5); box-shadow: 0 0 0 3px rgba(63, 119, 165, .2); }
.pay-amount { position: relative; }
.pay-amount span { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); font-size: 1.25rem; font-weight: 800; color: var(--navy); }
.pay-form .pay-amount input { padding-left: 2.1rem; font-size: 1.3rem; font-weight: 800; color: var(--navy); }
.pay-hint { font-size: 14px; color: var(--muted); margin: .3rem 0 0; }
.pay-form .captcha { margin: 1rem 0; }
.pay-note { display: flex; align-items: center; gap: .45rem; font-size: 14px; color: var(--muted); margin: .75rem 0 0; }
.pay-note .ico { flex: none; color: var(--btn, #3f77a5); }
.pay-steps { padding-left: 1.3rem; }
.pay-steps li { margin-bottom: .6rem; }
.pay-result .lead { max-width: 46rem; }

/* header: the phone is a round call button (number in its label, the top bar and the menu). "Pay" sits beside the quote
   button; where the row is tight (measured: 1001-1079px and 1240-1339px) it shrinks to a round card icon like the phone.
   Phones and tablets have the "Make a payment" tile in the menu instead. */
.header-phone .ico { width: 44px; height: 44px; padding: 11px; }
.header-phone:hover .ico, .header-phone:focus-visible .ico { background: var(--btn); color: #fff; }
.header-pay { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.header-pay .ico { width: 18px; height: 18px; }
@media (max-width: 1000px) { .header-pay { display: none; } }
@media (min-width: 1001px) and (max-width: 1079px), (min-width: 1240px) and (max-width: 1339px) {
  .header-pay { width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; border-radius: 50%; }
  .header-pay .pay-label { display: none; }
}
/* phone menu: four buttons at the bottom (call, email, pay, review) */
.m-actions { margin-top: 1.25rem; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.m-tile { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; min-height: 96px; padding: .8rem; border-radius: 14px; background: #fff; border: 1.5px solid #dde6ef; color: var(--ink); text-decoration: none; font-weight: 800; font-size: 16px; line-height: 1.2; }
.m-tile .m-ico { width: 38px; height: 38px; padding: 9px; border-radius: 11px; background: var(--blue-tint, #e6eef6); color: var(--btn); flex: none; }
.m-tile[href*="g.page"] .m-ico { background: #fff4d6; color: #b07800; }
.m-tile-pay { border-color: var(--btn); }
.m-tile-pay .m-ico { background: var(--btn); color: #fff; }
.m-tile:hover, .m-tile:focus-visible { background: #e6eef6; }
@media (max-width: 339px) { .m-actions { grid-template-columns: 1fr; } .m-tile { min-height: 0; flex-direction: row; align-items: center; } }
@media (min-width: 1001px) and (max-width: 1040px) { .logo img { width: 140px; } .header-row { gap: .6rem; } .header-cta { gap: .6rem; } }
@media (min-width: 1001px) and (max-width: 1025px) { .site-nav a.top { padding-left: .34rem; padding-right: .34rem; } .sub-toggle { margin-left: -.7rem; } }
/* top strip stays one tidy line: no wrapping inside items; the location line goes first when space runs short */
.topbar-row > p, .topbar-right > * { white-space: nowrap; }
.topbar-row > p:first-child { display: none; }
.topbar-row { justify-content: flex-end; }
@media (max-width: 600px) { .pay-hint, .pay-note { font-size: 16px; } }
/* room for the round "Pay" icon where the header row is tightest (measured with tools/dev/header-fit.mjs) */
@media (min-width: 1241px) and (max-width: 1299px) { .logo img { width: 144px; } .header-row { gap: .75rem; } .header-cta { gap: .6rem; } .site-nav a.top { padding-left: .48rem; padding-right: .48rem; } }
@media (min-width: 1001px) and (max-width: 1025px) { .logo img { width: 112px; } .header-row { gap: .4rem; } .header-cta { gap: .3rem; } .site-nav a.top { font-size: 14px; } .header-phone .ico { width: 44px; height: 44px; padding: 11px; } .header-pay { width: 44px; height: 44px; min-height: 44px; } }