:root {
  --color-orange: #F27B48;
  --color-orange-dark: #D9662F;
  --color-blue-grey: #23313A;
  --color-blue-grey-soft: #4A5A63;
  --color-bg: #FFFFFF;
  --color-bg-alt: #FAFBFC;
  --color-border: #E7EBEE;
  --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --radius: 12px;
  --max-width: 1140px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
[hidden] { display: none !important; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-blue-grey-soft);
  background: var(--color-bg);
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, legend, .btn { font-family: var(--font-heading); }
h1, h2, h3, h4 { color: var(--color-blue-grey); margin: 0 0 .6em; line-height: 1.2; font-weight: 600; }
h1 { font-size: clamp(1.85rem, 6vw, 3.1rem); font-weight: 600; letter-spacing: -.025em; }
h2 { font-size: clamp(1.45rem, 4.5vw, 2.2rem); text-align: center; margin-bottom: 1em; letter-spacing: -.02em; }
h3 { font-size: clamp(1.05rem, 2.6vw, 1.15rem); font-weight: 600; margin-bottom: .5em; letter-spacing: -.01em; }
h4 { font-size: 1rem; font-weight: 600; margin-bottom: .4em; }
p { margin: 0 0 1.2em; }
img { max-width: 100%; display: block; }
a { color: var(--color-orange-dark); }

.wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 20px; }
.wrap-narrow { max-width: 660px; }
.wrap-prose { max-width: 760px; }

.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--color-orange);
  color: #fff; padding: 8px 16px; z-index: 100;
}
.skip-link:focus { left: 0; }

/* ============ Header & navigation ============ */
.site-header { position: relative; padding: 16px 0; border-bottom: 1px solid var(--color-border); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.logo { height: 32px; width: auto; flex-shrink: 0; }
.header-actions { display: flex; align-items: center; gap: 18px; }
.header-phone { color: var(--color-blue-grey); font-weight: 600; text-decoration: none; white-space: nowrap; }
.header-phone:hover { color: var(--color-orange); }

.main-nav { display: flex; align-items: center; gap: 22px; }
.main-nav a {
  color: var(--color-blue-grey); text-decoration: none; font-weight: 600; font-size: .96rem;
}
.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--color-orange-dark); }

/* Mobile nav: a native <details> disclosure doubling as the hamburger menu,
   so opening/closing it needs no JavaScript at all. */
.nav-toggle { display: none; }
.nav-toggle summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 8px; border: 1.5px solid var(--color-border);
}
.nav-toggle summary::-webkit-details-marker { display: none; }
.nav-toggle summary .bar { display: block; width: 20px; height: 2px; background: var(--color-blue-grey); position: relative; }
.nav-toggle summary .bar::before, .nav-toggle summary .bar::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--color-blue-grey);
}
.nav-toggle summary .bar::before { top: -6px; }
.nav-toggle summary .bar::after { top: 6px; }
.nav-toggle[open] summary { border-color: var(--color-orange); }
.nav-toggle-panel {
  position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--color-border);
  box-shadow: 0 12px 24px rgba(35,49,58,.08); padding: 8px 0; z-index: 50;
}
.nav-toggle-panel a {
  display: block; padding: 12px 20px; color: var(--color-blue-grey); text-decoration: none; font-weight: 600;
}
.nav-toggle-panel a:hover, .nav-toggle-panel a[aria-current="page"] { background: var(--color-bg-alt); color: var(--color-orange-dark); }

@media (max-width: 860px) {
  .main-nav { display: none; }
  .nav-toggle { display: block; }
}
@media (min-width: 861px) {
  .nav-toggle { display: none; }
}

/* ============ Buttons - gradient CTA, sized for touch without looking heavy ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 999px; padding: 14px 28px; min-height: 48px;
  font-weight: 600; font-size: 1rem; line-height: 1.2; cursor: pointer;
  text-decoration: none; text-align: center; white-space: nowrap;
  transition: transform .18s ease, box-shadow .18s ease;
}
.btn-primary {
  background: linear-gradient(135deg, #F58A5E 0%, var(--color-orange) 45%, var(--color-orange-dark) 100%);
  color: #fff;
  box-shadow: 0 6px 16px rgba(242,123,72,.26);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(242,123,72,.34); }
.btn-small { padding: 11px 20px; min-height: 44px; font-size: 1rem; box-shadow: none; }
.btn-secondary { background: transparent; color: var(--color-blue-grey); border: 1.5px solid var(--color-border); }
.btn-secondary:hover { border-color: var(--color-orange); background: #FFF3EE; color: var(--color-orange-dark); }
.btn-block { width: 100%; }

/* ============ Hero ============ */
.hero { padding: 56px 0; background: var(--color-bg-alt); }
.hero-inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
.hero-inner.hero-inner-narrow { grid-template-columns: 1fr; max-width: 760px; }
.eyebrow {
  text-transform: uppercase; letter-spacing: .08em; font-weight: 600; font-size: 1rem;
  color: var(--color-orange); margin-bottom: 14px;
}
.hero-sub { font-size: clamp(1rem, 2.4vw, 1.12rem); max-width: 46ch; margin-bottom: 1.8em; }
.hero-media img {
  width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius); box-shadow: 0 16px 40px rgba(35,49,58,.14);
}
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

.trust-bar { margin-top: 24px; display: flex; align-items: center; gap: 10px; font-size: 1rem; font-weight: 600; color: var(--color-blue-grey); flex-wrap: wrap; }
.trust-google-logo { height: 16px; width: auto; }
.stars { display: inline-flex; gap: 2px; }
.stars img { height: 14px; width: 14px; }
.est-badge {
  margin: 16px 0 0; display: inline-block; font-size: .76rem; font-weight: 600; line-height: 1.4;
  color: var(--color-blue-grey); background: #EEF2F4; padding: 8px 14px; border-radius: 14px;
}

/* ============ Breadcrumbs ============ */
.breadcrumbs { padding: 14px 0 0; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; font-size: .82rem; color: var(--color-blue-grey-soft); }
.breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: 6px; color: var(--color-border); }
.breadcrumbs a { color: var(--color-blue-grey-soft); text-decoration: none; }
.breadcrumbs a:hover { color: var(--color-orange-dark); }
.breadcrumbs li[aria-current="page"] { color: var(--color-blue-grey); font-weight: 600; }

/* ============ Proof / gallery strip ============ */
.proof-strip { padding: 48px 0; }
.section-eyebrow {
  text-align: center; text-transform: uppercase; letter-spacing: .06em; font-size: 1rem;
  font-weight: 600; color: var(--color-orange); margin-bottom: 24px;
}
.proof-subheading {
  text-align: center; font-size: 1rem; font-weight: 600; color: var(--color-blue-grey);
  margin: 0 0 14px;
}
.proof-grid + .proof-subheading { margin-top: 32px; }
.proof-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px;
}
.proof-grid figure { margin: 0; border-radius: var(--radius); overflow: hidden; }
.proof-grid img { height: 100%; width: 100%; object-fit: cover; aspect-ratio: 3/4; cursor: zoom-in; }
.proof-note { text-align: center; font-size: 1rem; color: var(--color-blue-grey-soft); margin: 20px 0 0; }

/* Fuller work gallery with visible captions (real per-project location names) */
.work-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 28px; }
.work-card { margin: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--color-border); background: #fff; }
.work-card img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; cursor: zoom-in; }
.work-card figcaption { padding: 12px 14px; font-size: .85rem; font-weight: 600; color: var(--color-blue-grey); }
@media (max-width: 900px) { .work-gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .work-gallery { grid-template-columns: 1fr 1fr; gap: 12px; } }

/* ============ Lightbox (click-to-browse image galleries) ============ */
.lightbox {
  position: fixed; inset: 0; z-index: 1000; background: rgba(35, 49, 58, .94);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.lightbox[hidden] { display: none; }
.lightbox-figure {
  margin: 0; max-width: 92vw; text-align: center;
  /* dvh accounts for a mobile browser's address bar showing/hiding; vh
     alone can be taller than what's actually visible, so declare vh
     first as a fallback for browsers without dvh support, then let dvh
     override it where supported. */
  max-height: 88vh; max-height: 88dvh;
}
.lightbox-img {
  display: block; max-width: 92vw; width: auto; height: auto; object-fit: contain;
  max-height: 76vh; max-height: 76dvh;
  border-radius: 4px; box-shadow: 0 20px 60px rgba(0, 0, 0, .4);
}
.lightbox-caption { color: #fff; margin: 14px 0 0; font-size: .95rem; opacity: .9; }
.lightbox-count {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  color: #fff; font-size: .85rem; opacity: .7; margin: 0;
}
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .25);
  color: #fff; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, border-color .15s ease;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background: var(--color-orange); border-color: var(--color-orange); }
.lightbox-close { top: 20px; right: 20px; width: 40px; height: 40px; font-size: 1.5rem; line-height: 1; }
.lightbox-prev, .lightbox-next { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 1.8rem; }
.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }
@media (max-width: 640px) {
  /* At this width the image (92vw) leaves barely any side margin, so a
     prev/next button here would sit on top of the photo's edge rather
     than beside it. Swipe already does the same job (see lightbox.js),
     so hide the click targets instead of letting them overlap the image. */
  .lightbox-prev, .lightbox-next { display: none; }
  .lightbox-close { width: 36px; height: 36px; top: 12px; right: 12px; }
}

/* ============ Why choose - light, blue-grey used sparingly ============ */
.why-choose { padding: 56px 0; background: var(--color-bg-alt); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 28px; }
.why-grid.why-grid-3 { grid-template-columns: repeat(3, 1fr); }
.why-grid.why-grid-5 { grid-template-columns: repeat(5, 1fr); }
.why-card { padding: 6px 18px; text-align: center; }
.why-icon { width: 56px; height: 56px; margin: 0 auto 16px; }
.why-icon svg { width: 100%; height: 100%; }
.why-card h3 { color: var(--color-blue-grey); }
.why-card p { font-size: 1rem; margin: 10px 0 0; }
.why-card-finance { display: flex; flex-direction: column; }
.finance-logo-box { margin-top: auto; padding-top: 16px; display: flex; align-items: center; justify-content: center; width: 100%; }
.finance-logo { height: 28px; width: auto; max-width: 100%; object-fit: contain; }

/* ============ How it works ============ */
.how-it-works { padding: 56px 0; }
.how-it-works-cta { text-align: center; margin-top: 32px; }
.steps-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 28px; }
.steps-grid.steps-grid-4 { grid-template-columns: repeat(4, 1fr); }
.step-card {
  background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: 20px 18px;
}
.step-number { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 1.3rem; color: var(--color-orange); margin-bottom: 10px; }
.step-card h3 { font-size: 1rem; }
.step-card p { font-size: 1rem; margin: 0; }
.step-card .btn { margin-top: 14px; }

@media (max-width: 900px) {
  .steps-grid, .steps-grid.steps-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .steps-grid, .steps-grid.steps-grid-4 { grid-template-columns: 1fr; }
}

/* ============ Reviews (static, curated) ============ */
.reviews { padding: 56px 0; }
.reviews-heading { text-align: center; margin-bottom: 10px; }
.reviews-badge {
  display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
  font-size: 1rem; font-weight: 600; color: var(--color-blue-grey); margin-bottom: 28px;
}
.review-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
blockquote {
  margin: 0; background: var(--color-bg-alt); border-radius: var(--radius); padding: 22px;
  border-left: 3px solid var(--color-orange);
}
blockquote p { font-size: 1rem; font-style: italic; margin-bottom: 1em; }
blockquote cite { font-style: normal; font-weight: 600; font-size: 1rem; color: var(--color-blue-grey); }

/* ============ FAQ (native <details>/<summary>, no JS) ============ */
.faq { padding: 56px 0; }
.faq-list { max-width: 760px; margin: 28px auto 0; display: flex; flex-direction: column; gap: 10px; }
.faq-item { border: 1px solid var(--color-border); border-radius: var(--radius); background: #fff; overflow: hidden; }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 18px 20px; font-weight: 600; color: var(--color-blue-grey);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; font-size: 1.3rem; font-weight: 600; color: var(--color-orange); flex-shrink: 0;
  transition: transform .15s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item[open] summary { border-bottom: 1px solid var(--color-border); }
.faq-item .faq-answer { padding: 4px 20px 18px; font-size: 1rem; }
.faq-item .faq-answer p:last-child { margin-bottom: 0; }

/* ============ Contact method cards ============ */
.contact-methods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 28px 0 0; }
.contact-card {
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 22px 20px; text-align: center;
}
.contact-card h3 { margin-bottom: .3em; }
.contact-card a { color: var(--color-blue-grey-soft); text-decoration: none; font-weight: 600; }
.contact-card a:hover { color: var(--color-orange-dark); }
@media (max-width: 900px) { .contact-methods { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .contact-methods { grid-template-columns: 1fr; } }

/* ============ Forms (quote) ============ */
.quote-form-section { padding: 56px 0 64px; background: var(--color-bg-alt); }
.form-intro { text-align: center; font-size: 1rem; }
.form-progress { height: 6px; background: var(--color-border); border-radius: 999px; overflow: hidden; margin: 22px 0 8px; }
.form-progress-bar { height: 100%; width: 11.11%; background: linear-gradient(90deg, #F58A5E, var(--color-orange)); transition: width .3s ease; }
.form-step-label { text-align: center; font-size: 1rem; font-weight: 600; color: var(--color-blue-grey-soft); margin-bottom: 24px; }

#quoteForm { background: #fff; border-radius: var(--radius); padding: 28px; box-shadow: 0 4px 24px rgba(35,49,58,.07); }
.form-step legend { font-weight: 600; font-size: 1.05rem; padding: 0; margin-bottom: 18px; color: var(--color-blue-grey); }
.form-step { border: none; padding: 0; margin: 0; }

label { display: block; font-weight: 600; font-size: 1rem; margin: 18px 0 7px; color: var(--color-blue-grey); }
label:first-child { margin-top: 0; }

/* 16px minimum on every field is deliberate: below that, iOS Safari auto-zooms
   on focus and then snaps back, which is what causes the page to "jump" while
   typing. Keeping every field exactly at 16px avoids that entirely. */
input[type="text"], input[type="number"], input[type="tel"], input[type="email"], textarea {
  width: 100%; padding: 13px 14px; border: 1.5px solid var(--color-border); border-radius: 8px;
  font-family: var(--font-body); font-size: 16px; color: var(--color-blue-grey);
  -webkit-appearance: none; appearance: none; min-height: 48px;
}
textarea { min-height: 80px; }
/* Deliberately not the brand orange: the first field of every quote-builder
   step auto-focuses on load, and orange doubles as this form's error color
   (.field-error), so an orange focus ring reads as "this is wrong" before
   the visitor has typed anything. */
input:focus, textarea:focus { outline: 2px solid var(--color-blue-grey); outline-offset: 1px; }
textarea { resize: vertical; }
.field-note { font-size: 1rem; color: var(--color-blue-grey-soft); font-style: italic; margin-top: 7px; }
.privacy-note { font-size: 1rem; color: var(--color-blue-grey-soft); margin-top: 18px; }

.radio-label { font-weight: 600; font-size: 1rem; margin: 20px 0 8px; color: var(--color-blue-grey); }
.radio-group { display: flex; flex-direction: column; gap: 8px; }
.radio-group label {
  display: flex; align-items: center; gap: 12px; font-weight: 400; font-size: 1rem;
  border: 1.5px solid var(--color-border); border-radius: 8px; padding: 13px 14px; margin: 0; cursor: pointer;
  min-height: 48px; transition: border-color .15s ease, background .15s ease;
}
.radio-group input { accent-color: var(--color-orange); width: 18px; height: 18px; flex-shrink: 0; }
.radio-group label:has(input:checked) { border-color: var(--color-orange); background: #FFF3EE; }

/* Validation error state -- the field the "Next"/"Send" button jumps to when a
   required answer is missing */
.field-error { border-color: #D64545 !important; }
.radio-group.field-error { border-radius: 8px; box-shadow: 0 0 0 1px #D64545; padding: 4px; margin: -4px -4px 0; }

/* Stepper (+ / -) controls for aircon, geysers, pumps, cable distance */
.stepper { margin: 22px 0; }
.stepper-control {
  display: flex; align-items: center; gap: 0; border: 1.5px solid var(--color-border);
  border-radius: 999px; overflow: hidden; width: fit-content;
}
.stepper-btn {
  width: 56px; height: 56px; border: none; background: var(--color-bg-alt); color: var(--color-blue-grey);
  font-size: 1.5rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.stepper-btn:hover { background: #FFF3EE; color: var(--color-orange); }
.stepper-btn:active { background: var(--color-orange); color: #fff; }
.stepper-value {
  min-width: 64px; text-align: center; font-weight: 600; font-size: 1.05rem; color: var(--color-blue-grey);
  display: flex; align-items: baseline; justify-content: center; gap: 2px;
}
.stepper-suffix { font-size: 1rem; font-weight: 600; color: var(--color-blue-grey-soft); }

.form-nav { display: flex; gap: 10px; margin-top: 28px; }
.form-nav .btn { flex: 1; padding: 13px 20px; font-size: 1rem; }
.form-status { margin-top: 16px; font-weight: 600; color: var(--color-blue-grey); font-size: 1rem; }

/* ============ Pricing / monthly payment table ============ */
.pricing-strip { padding: 56px 0; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 28px; }
.pricing-card {
  border: 1.5px solid var(--color-border); border-radius: var(--radius);
  background: #fff; text-align: center; overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}
.pricing-card-pad { padding: 28px 24px; }
.pricing-card:hover { box-shadow: 0 10px 28px rgba(35,49,58,.1); transform: translateY(-3px); }
.pricing-card.is-popular { border-color: var(--color-orange); box-shadow: 0 8px 24px rgba(242,123,72,.14); position: relative; }
.pricing-card.is-popular.pricing-card-pad { padding-top: 52px; }
.pricing-photo {
  /* height: auto is deliberate, not redundant -- without it, the image's own
     height="" HTML attribute wins as a low-priority presentational hint, and
     with both width and height then explicitly set, aspect-ratio has nothing
     left to resolve and gets silently ignored, badly letterboxing the photo. */
  width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; display: block;
  background: var(--color-bg-alt); padding: 14px; box-sizing: border-box; margin-bottom: 20px;
}
.pricing-card h3, .pricing-card .pricing-sub, .pricing-card .pricing-specs, .pricing-card .btn { margin-left: 22px; margin-right: 22px; }
.pricing-card .pricing-monthly, .pricing-card .pricing-savings { margin-left: 22px; margin-right: 22px; }
.pricing-specs { width: calc(100% - 44px); margin-left: 22px; margin-right: 22px; }
.pricing-card > .btn, .pricing-card-pad > .btn { width: calc(100% - 44px) !important; margin-bottom: 22px; }
.pricing-card-pad .btn { width: 100% !important; margin-left: 0; margin-right: 0; }
.pricing-badge {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  display: inline-block; background: var(--color-orange); color: #fff; font-size: .72rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px;
  box-shadow: 0 4px 10px rgba(242,123,72,.35);
}
.pricing-card h3 { margin-bottom: .3em; }
.pricing-sub { font-size: .82rem; color: var(--color-blue-grey-soft); margin-bottom: 18px; }
.pricing-monthly { font-family: var(--font-heading); font-size: 2rem; font-weight: 700; color: var(--color-orange); margin-bottom: 2px; }
.pricing-monthly span { font-size: .95rem; font-weight: 600; color: var(--color-blue-grey-soft); }
.pricing-savings {
  display: inline-block; font-size: .95rem; font-weight: 700; color: #0a944d;
  background: rgba(10,148,77,.1); border-radius: 999px; padding: 5px 14px; margin-bottom: 18px;
}
.pricing-specs { list-style: none; padding: 0; margin: 0 0 22px; text-align: left; font-size: .85rem; }
.pricing-specs li { padding: 6px 0; border-bottom: 1px solid var(--color-border); }
.pricing-specs li:last-child { border-bottom: none; }
.pricing-note { text-align: center; font-size: .78rem; color: var(--color-blue-grey-soft); margin-top: 24px; }

@media (max-width: 900px) {
  .pricing-grid { grid-template-columns: 1fr; }
}

/* ============ Blog list ============ */
.blog-list { padding: 56px 0; }
.blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 28px; }
.blog-card { border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; background: #fff; }
.blog-card img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; }
.blog-card-body { padding: 20px 22px 22px; }
.blog-card time { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--color-orange); }
.blog-card h2 { text-align: left; font-size: 1.2rem; margin: 8px 0 10px; }
.blog-card h2 a { color: var(--color-blue-grey); text-decoration: none; }
.blog-card h2 a:hover { color: var(--color-orange-dark); }
.blog-card p { font-size: .95rem; margin-bottom: 12px; }
.blog-card .btn-secondary { padding: 9px 18px; min-height: 40px; font-size: .88rem; }
@media (max-width: 700px) { .blog-grid { grid-template-columns: 1fr; } }

/* ============ Article (blog post) ============ */
.article-header { padding: 40px 0 8px; }
.article-header .eyebrow { text-align: center; }
.article-header h1 { text-align: center; max-width: 760px; margin: 0 auto .4em; }
.article-meta { text-align: center; font-size: .85rem; color: var(--color-blue-grey-soft); margin-bottom: 1.5em; }
.article-featured { max-width: var(--max-width); margin: 0 auto 8px; padding: 0 20px; }
.article-featured img { border-radius: var(--radius); width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; }
.article-body { padding: 32px 0 8px; font-size: 1.05rem; }
.article-body h2 { text-align: left; font-size: clamp(1.3rem, 3.4vw, 1.6rem); margin-top: 1.6em; }
.article-body h3 { text-align: left; margin-top: 1.2em; }
.article-body ul, .article-body ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.article-body li { margin-bottom: .4em; }
.article-cta { background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 24px; text-align: center; margin: 2em 0; }
.article-cta p { margin-bottom: 1em; }
.article-footer-nav { padding: 32px 0 8px; border-top: 1px solid var(--color-border); margin-top: 24px; }

/* ============ Legal / prose pages (Terms, Privacy) ============ */
.legal-page { padding: 48px 0 64px; }
.legal-page h1 { text-align: center; }
.legal-page .updated-note { text-align: center; font-size: .85rem; color: var(--color-blue-grey-soft); margin-bottom: 2.2em; }
.legal-page h2 { text-align: left; font-size: 1.25rem; margin-top: 1.8em; }
.legal-page p, .legal-page li { font-size: .98rem; }
.legal-page ul { padding-left: 1.3em; }

/* ============ Thank-you page ============ */
.thankyou { padding: 90px 0; text-align: center; }
.thankyou .form-result-icon { margin: 0 auto 22px; width: 72px; height: 72px; font-size: 2rem; }
.thankyou h1 { margin-bottom: .4em; }
.thankyou p { max-width: 48ch; margin-left: auto; margin-right: auto; }
.thankyou .btn { margin-top: 12px; }

/* ============ CTA banner (site-wide, single-purpose, never marked H1) ============ */
.cta-banner { padding: 56px 0; background: linear-gradient(135deg, var(--color-blue-grey) 0%, #1a262d 100%); color: #fff; text-align: center; }
.cta-banner h2 { color: #fff; }
.cta-banner p { color: #C7D0D4; max-width: 52ch; margin: 0 auto 1.8em; }

/* ============ Footer ============ */
.site-footer { padding: 48px 0 24px; background: var(--color-bg-alt); border-top: 1px solid var(--color-border); color: var(--color-blue-grey-soft); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 28px; text-align: left; }
.footer-col h3 { font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--color-blue-grey); margin-bottom: .9em; }
.footer-col p, .footer-col li { font-size: .82rem; margin: 0 0 8px; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col a { color: var(--color-blue-grey-soft); text-decoration: none; }
.footer-col a:hover { color: var(--color-orange); }
.logo-footer { margin-bottom: 14px; opacity: .85; }
.footer-bank { font-size: .82rem; }
.footer-bank dt { font-weight: 600; color: var(--color-blue-grey); display: inline; }
.footer-bank dd { margin: 0 0 4px; display: inline; }
.footer-bank div { margin-bottom: 2px; }
.footer-bottom {
  margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--color-border);
  text-align: center; font-size: .78rem;
}
.footer-bottom p { margin: 0 0 6px; }
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; text-align: center; }
  .footer-col ul { display: flex; flex-direction: column; align-items: center; }
}

/* ============ Responsive ============ */
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; gap: 32px; }
  .hero-media { order: -1; }
  .proof-grid { grid-template-columns: repeat(3, 1fr); }
  .why-grid, .why-grid.why-grid-5 { grid-template-columns: repeat(2, 1fr); }
  .review-grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .wrap { padding: 0 16px; }
  .proof-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid, .why-grid.why-grid-5, .why-grid.why-grid-3 { grid-template-columns: 1fr; }
  .why-icon { width: 44px; height: 44px; margin: 0 auto 12px; }
  #quoteForm { padding: 18px; }
  .hero { padding: 40px 0; }
  .why-choose, .reviews, .proof-strip, .faq, .how-it-works, .pricing-strip, .blog-list, .cta-banner { padding: 40px 0; }
  .quote-form-section { padding: 40px 0 48px; }
  .btn { padding: 13px 22px; font-size: 1rem; }
  /* The phone number drops from the header on narrow screens rather than
     wrapping -- with logo + phone + CTA + hamburger all fighting for space,
     letting any of them wrap just breaks the row (button text splitting
     into a near-circle at the narrowest widths). It's still one tap away
     in the mobile menu below, and in the footer. */
  .header-phone { display: none; }
  .btn-small { font-size: .88rem; padding: 9px 14px; }
  .logo { height: 26px; }
  .header-inner { gap: 8px; }
  .form-nav { flex-direction: column; }
  .form-nav .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .form-progress-bar { transition: none; }
}

/* ============ Success / error result states -- replaces the whole active form UI ============ */
.form-result { text-align: center; padding: 32px 8px; }
.form-result-icon {
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; font-weight: 600; color: #fff;
}
.form-result-icon-success { background: #0a944d; }
.form-result-icon-error { background: #D64545; }
.form-result h3 { margin-bottom: .5em; }
.form-result p { max-width: 44ch; margin-left: auto; margin-right: auto; }
.form-result-contact { font-weight: 600; margin-top: -.5em; }
.form-result-contact a { color: var(--color-blue-grey); }
.form-result #tryAgainBtn { margin-top: 12px; }