: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, legend, .btn { font-family: var(--font-heading); }
h1, h2, h3 { 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; }
p { margin: 0 0 1.2em; }
img { max-width: 100%; display: block; }

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

.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 */
.site-header { padding: 16px 0; border-bottom: 1px solid var(--color-border); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.logo { height: 32px; width: auto; flex-shrink: 0; }

/* 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); }

/* 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; }
.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);
}

.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;
}

/* Proof 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-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; }

/* 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-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; }
.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; }

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

/* Reviews */
.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); }

/* Quote form */
.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); }

/* 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; }
input:focus, textarea:focus { outline: 2px solid var(--color-orange); 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" 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; }

/* Footer - blue-grey used lightly, not as a heavy fill */
.site-footer { padding: 40px 0; background: var(--color-bg-alt); border-top: 1px solid var(--color-border); color: var(--color-blue-grey-soft); text-align: center; }
.logo-footer { margin: 0 auto 14px; opacity: .85; }
.footer-contact { margin: 6px 0; }
.footer-contact a, .footer-links a { color: var(--color-blue-grey); font-weight: 600; text-decoration: none; font-size: .82rem; }
.footer-contact a:hover, .footer-links a:hover { color: var(--color-orange); }
.footer-inner p { font-size: .82rem; margin: 6px 0; }

/* 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 { grid-template-columns: repeat(2, 1fr); }
  .review-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .wrap { padding: 0 16px; }
  .proof-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { 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 { padding: 40px 0; }
  .quote-form-section { padding: 40px 0 48px; }
  .btn { padding: 13px 22px; font-size: 1rem; }
  .header-phone, .btn-small { font-size: .92rem; padding: 9px 14px; white-space: normal; text-align: center; line-height: 1.2; }
  .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; }