/* ==========================================================================
   End Point Electrical — Landing Page
   Brand tokens lifted directly from the live Webflow stylesheet so this page
   matches www.epelec.com.au exactly.
   ========================================================================== */

:root {
  /* Brand */
  --volt:          #aef513;
  --volt-hover:    #aef513e6;
  --sand:          #fff5c0;
  --black:         #000000;
  --white:         #ffffff;
  --grey:          #626262;
  --placeholder:   #959595;
  --bg-elements:   #f5f8fa;
  --stroke:        #e1e4ea;
  --hover-black:   #000000b3;

  /* Type */
  --font: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Layout */
  --container: 1200px;
  --gutter: 24px;
  --radius-card: 8px;
  --radius-pill: 100px;

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--grey);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 {
  margin: 0;
  color: var(--black);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- Utilities ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container-narrow { max-width: 820px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--volt); color: var(--black);
  padding: 12px 24px; border-radius: 0 0 var(--radius-card) 0;
  font-weight: 500; text-decoration: none;
}
.skip-link:focus { left: 0; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--black);
  outline-offset: 2px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.12s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn img { flex: none; }

.btn-lg { padding: 15px 30px; font-size: 1.0625rem; }
.btn-block { width: 100%; }

.btn-volt  { background: var(--volt); color: var(--black); }
.btn-volt:hover  { background: var(--volt-hover); }

.btn-black { background: var(--black); color: var(--white); }
.btn-black:hover { background: var(--hover-black); }
.btn-black img { filter: invert(1) brightness(2); }

.btn-ghost {
  background: rgba(255,255,255,0.12);
  color: var(--white);
  border-color: rgba(255,255,255,0.55);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover { background: var(--white); color: var(--black); border-color: var(--white); }
.btn-ghost img { filter: invert(1) brightness(2); transition: filter 0.2s var(--ease); }
.btn-ghost:hover img { filter: none; }

.btn-outline-black { background: transparent; color: var(--black); border-color: var(--black); }
.btn-outline-black:hover { background: var(--black); color: var(--white); }
.btn-outline-black:hover img { filter: invert(1) brightness(2); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--stroke);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 76px;
}
.header-logo { display: flex; align-items: center; }
.header-logo img { width: 62px; height: auto; }
.header-actions { display: flex; align-items: center; gap: 10px; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--black); }
.hero-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(100deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.4) 45%, rgba(0,0,0,0.25) 100%),
    url("../img/hero.webp");
  background-size: cover;
  background-position: 50% 45%;
}
/* Diagonal slash motif, matching the main site */
.hero-bg::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    115deg,
    transparent 0 68px,
    rgba(255,255,255,0.05) 68px 72px,
    transparent 72px 140px
  );
  pointer-events: none;
}
.hero-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 452px;
  gap: 56px;
  align-items: center;
  padding-block: 52px 60px;
}
.hero-copy { color: var(--white); max-width: 620px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  margin-bottom: 18px;
  color: var(--white);
  font-size: 0.9375rem;
  font-weight: 500;
}
.eyebrow::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--volt); flex: none;
}

/* Sized against this column rather than the viewport. Between 901px and
   1180px the two-column hero squeezes the copy column to ~413px while the
   viewport is still wide, so any vw-based size overflows exactly there. */
.hero-copy { container-type: inline-size; }

.hero-copy h1 {
  color: var(--white);
  line-height: 1.06;
  margin-bottom: 20px;
  /* Fallback for browsers without container query units */
  font-size: clamp(1.5rem, 7vw, 3.2rem);
}
@media (min-width: 901px) and (max-width: 1180px) {
  .hero-copy h1 { font-size: clamp(1.5rem, 3.4vw, 3.2rem); }
}
.hero-copy h1 {
  /* 8% of the column keeps the longer line ("Expert Sydney electricians.",
     12.24em wide) on one line with a little slack. Retune this whenever the
     headline changes: the divisor is the widest line's em width. Declared
     last so it wins over the fallbacks wherever cqw is supported. */
  font-size: clamp(1.3rem, 8cqw, 3.2rem);
}
.hero-copy h1 span { display: block; }
/* Gap between the two sentences so they read as distinct statements */
.hero-copy h1 span:first-child { margin-bottom: 0.18em; }
.hero-sub {
  color: rgba(255,255,255,0.86);
  font-size: 1.0625rem;
  max-width: 560px;
  margin-bottom: 26px;
}

.hero-ticks { display: grid; gap: 10px; margin-bottom: 32px; }
.hero-ticks li {
  position: relative;
  padding-left: 30px;
  color: var(--white);
  font-size: 0.9688rem;
  line-height: 1.5;
}
.hero-ticks li::before {
  content: "";
  position: absolute; left: 0; top: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--volt);
  /* tick glyph */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 12px 12px;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Quote form card ---------- */
.form-card {
  background: var(--white);
  border-radius: 16px;
  padding: 26px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.28);
  scroll-margin-top: 90px;
}
.form-title { font-size: 1.5rem; margin-bottom: 6px; }
.form-sub { font-size: 0.9375rem; margin-bottom: 22px; }

.quote-form { display: grid; gap: 14px; }
/* align-content:start keeps label and input pinned to the top of the cell.
   Without it, a two-line error message under one field stretches its
   sibling's rows and knocks the paired input out of alignment. */
.field { display: grid; gap: 6px; min-width: 0; align-content: start; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }

.field label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--black);
}
.optional { color: var(--placeholder); font-weight: 400; }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font);
  font-size: 1rem;
  color: var(--black);
  background: var(--white);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-card);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.field textarea { resize: vertical; min-height: 84px; }
.field input::placeholder,
.field textarea::placeholder { color: var(--placeholder); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--black);
  box-shadow: 0 0 0 3px rgba(174,245,19,0.45);
}
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23626262' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  padding-right: 38px;
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: #d92d20; }
.field-error {
  display: none;
  font-size: 0.8125rem;
  color: #d92d20;
}
.field.has-error .field-error { display: block; }

/* Honeypot. Moved off-canvas rather than display:none, since naive bots skip
   undisplayed inputs but happily fill an off-screen one. padding and border
   must be zeroed or border-box floors the element at ~8x6px instead of 1px. */
.hp-field {
  position: absolute !important;
  left: -9999px; top: 0;
  width: 1px; height: 1px;
  padding: 0; border: 0;
  opacity: 0; pointer-events: none;
}

.form-foot {
  font-size: 0.8125rem;
  color: var(--placeholder);
  text-align: center;
}
.form-status { font-size: 0.9375rem; text-align: center; }
.form-status.is-error { color: #d92d20; }

#submitBtn[aria-busy="true"] { opacity: 0.72; pointer-events: none; }

/* ---------- Trust bar ---------- */
.trustbar { background: var(--black); }
.trustbar-inner {
  display: flex; flex-wrap: wrap;
  justify-content: space-between; align-items: center;
  gap: 16px 32px;
  padding-block: 20px;
}
.trustbar-item {
  display: flex; align-items: center; gap: 10px;
  color: var(--white);
  font-size: 0.9375rem;
  font-weight: 500;
}
/* Also complete badges: white circle, black glyph. Left as-is, which is
   the same treatment the main site uses over its dark hero. */
.trustbar-item img { width: 32px; height: 32px; }

/* ---------- Sections ---------- */
.section { padding-block: clamp(56px, 6vw, 88px); }
.section-alt { background: var(--bg-elements); }

.section-head { max-width: 759px; margin-bottom: 40px; }
.section-head h2 { font-size: clamp(1.75rem, 1.15rem + 2vw, 2.5rem); margin-bottom: 12px; }
.section-head p { font-size: 1.0625rem; }

/* ---------- Services ---------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.service-card {
  background: var(--white);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-card);
  padding: 26px 24px;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.service-card:hover { border-color: var(--black); transform: translateY(-2px); }
/* The service SVGs are complete badges: they already contain the sand
   circle and the glyph. Do not add a background here or the circle
   doubles up and the glyph shrinks. */
.service-icon { display: block; margin-bottom: 16px; }
.service-icon img { width: 56px; height: 56px; }
.service-card h3 { font-size: 1.125rem; margin-bottom: 8px; }
.service-card p { font-size: 0.9375rem; }

/* ---------- Why us ---------- */
.why-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
.why-media img {
  width: 100%;
  border-radius: var(--radius-card);
  object-fit: cover;
  aspect-ratio: 4 / 3;
  display: block;
}
.why-copy h2 { font-size: clamp(1.75rem, 1.15rem + 2vw, 2.4rem); margin-bottom: 28px; }
.why-list { display: grid; gap: 22px; }
.why-list li { padding-left: 22px; border-left: 3px solid var(--volt); }
.why-list h3 { font-size: 1.0625rem; margin-bottom: 5px; }
.why-list p { font-size: 0.9688rem; }

/* ---------- Pull quote ----------
   Still used by the anchor testimonial on thanks.html, so these must stay
   even though the landing page's proof section no longer uses them. */
.quote-anchor {
  margin: 0 0 24px;
  background: var(--black);
  color: var(--white);
  border-radius: var(--radius-card);
  padding: 40px;
}
.quote-anchor p {
  font-size: clamp(1.125rem, 0.95rem + 0.7vw, 1.5rem);
  line-height: 1.45;
  color: var(--white);
  letter-spacing: -0.01em;
  margin-bottom: 22px;
}
.quote-anchor footer { display: flex; align-items: baseline; gap: 10px; font-size: 0.9375rem; }
.quote-anchor footer strong { color: var(--volt); font-weight: 500; }
.quote-anchor footer span { color: rgba(255,255,255,0.7); }

/* ---------- Proof: Google reviews ---------- */
.rv-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--white);
  border: 1px solid var(--stroke);
  border-radius: 14px;
  padding: 18px 24px;
  margin-bottom: 20px;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: border-color 0.2s var(--ease);
}
.rv-bar:hover { border-color: var(--black); }
.rv-bar-g { width: 26px; height: 26px; flex: none; }
.rv-bar-label { color: var(--black); font-size: 1.0625rem; font-weight: 600; }
.rv-bar-stars { display: inline-flex; gap: 2px; }
.rv-bar-score { color: var(--black); font-size: 1.0625rem; font-weight: 600; }
.rv-bar-sep { width: 1px; height: 20px; background: var(--stroke); }
.rv-bar-count { color: var(--black); font-size: 1.0625rem; font-weight: 500; }

/* Masonry via CSS columns: cards keep their natural height and stagger,
   which is what gives the reference layout its look. */
.rv-grid { columns: 3; column-gap: 20px; }

.rv-card {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  display: inline-block;
  width: 100%;
  background: var(--white);
  border: 1px solid var(--stroke);
  border-radius: 14px;
  padding: 22px;
  margin-bottom: 20px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.rv-summary { background: var(--bg-elements); }

.rv-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.rv-avatar {
  display: grid; place-items: center;
  width: 44px; height: 44px; flex: none;
  border-radius: 50%;
  color: var(--white);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1;
}
.rv-stack { display: flex; flex: none; }
.rv-stack-av {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 2px solid var(--bg-elements);
  color: var(--white);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
}
.rv-stack-av + .rv-stack-av { margin-left: -14px; }

.rv-meta { min-width: 0; flex: 1; }
.rv-name {
  color: var(--black);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.rv-date { color: var(--placeholder); font-size: 0.875rem; }
.rv-g { width: 20px; height: 20px; flex: none; align-self: flex-start; }

.rv-stars { display: flex; align-items: center; gap: 3px; margin-bottom: 10px; }
.rv-star { width: 18px; height: 18px; }
.rv-verified { width: 16px; height: 16px; margin-left: 5px; }

.rv-text {
  color: var(--grey);
  font-size: 0.9688rem;
  line-height: 1.6;
  overflow-wrap: break-word;
}
/* Long reviews are clamped; main.js adds a Read more toggle where it bites */
.rv-text.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rv-more {
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--black);
  font-family: var(--font);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--volt);
  text-underline-offset: 3px;
}

/* ---------- Process ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.step { background: var(--white); border-radius: var(--radius-card); padding: 26px 24px; border: 1px solid var(--stroke); }
.step-num {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--volt);
  color: var(--black);
  font-weight: 600;
  margin-bottom: 16px;
}
.step h3 { font-size: 1.0625rem; margin-bottom: 8px; }
.step p { font-size: 0.9375rem; }

/* ---------- Areas ---------- */
.area-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 24px; }
.area-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 14px;
}
.area-card h3 { font-size: 1.0625rem; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 12px; }
.faq-item {
  background: var(--white);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-card);
}
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px;
  color: var(--black);
  font-size: 1.0625rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "";
  flex: none;
  width: 20px; height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.2s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(180deg); }
.faq-body { padding: 0 24px 22px; }
.faq-body p { font-size: 0.9688rem; }

/* ---------- Final CTA ---------- */
.final-cta { background: var(--volt); padding-block: clamp(52px, 5.5vw, 76px); }
.final-cta-inner { text-align: center; }
.final-cta h2 { font-size: clamp(1.75rem, 1.15rem + 2vw, 2.5rem); margin-bottom: 12px; }
.final-cta p { color: rgba(0,0,0,0.72); font-size: 1.0625rem; margin-bottom: 28px; }
.final-cta .hero-cta { justify-content: center; }

/* ---------- Footer ---------- */
.site-footer { background: var(--black); color: rgba(255,255,255,0.66); padding-block: 40px; }
.footer-inner { display: grid; gap: 16px; justify-items: center; text-align: center; }
.footer-logo { width: 62px; filter: brightness(0) invert(1); }
.footer-meta { font-size: 0.9375rem; }
.footer-legal { font-size: 0.8125rem; color: rgba(255,255,255,0.45); }
.footer-legal a { color: rgba(255,255,255,0.7); }

/* ---------- Sticky mobile bar ---------- */
.sticky-bar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
  gap: 10px;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--stroke);
}
.sticky-bar .btn { flex: 1; }

/* ---------- Thank you page ---------- */
.thanks-main { padding-block: clamp(48px, 6vw, 80px); }

.thanks-mark {
  width: 62px; height: 62px;
  border-radius: 50%;
  background: var(--volt);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 30px 30px;
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom: 24px;
}
.thanks-title { font-size: clamp(1.875rem, 1.2rem + 2.3vw, 2.75rem); margin-bottom: 14px; }
.thanks-lede { font-size: 1.125rem; margin-bottom: 40px; max-width: 620px; }

.thanks-steps { display: grid; gap: 14px; margin-bottom: 40px; }
.thanks-steps li {
  display: flex; align-items: flex-start; gap: 18px;
  background: var(--bg-elements);
  border-radius: var(--radius-card);
  padding: 22px 24px;
}
.thanks-steps .step-num { margin-bottom: 0; flex: none; }
.thanks-steps h2 { font-size: 1.0625rem; margin-bottom: 5px; }
.thanks-steps p { font-size: 0.9688rem; }

.thanks-urgent {
  border: 1px solid var(--stroke);
  border-left: 4px solid var(--volt);
  border-radius: var(--radius-card);
  padding: 28px;
  margin-bottom: 40px;
}
.thanks-urgent h2 { font-size: 1.25rem; margin-bottom: 8px; }
.thanks-urgent p { margin-bottom: 20px; }

.thanks-quote { margin-bottom: 32px; }
.thanks-back { font-size: 0.9688rem; }
.thanks-back a { color: var(--black); text-decoration-color: var(--volt); text-underline-offset: 3px; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) 400px; gap: 40px; }
  .rv-grid { columns: 2; }
  .steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  /* Once the copy and form stack, the hero is ~1650px tall. A 1440x959
     landscape photo at `cover` then has to upscale ~1.7x and crops to a
     narrow vertical slice, so it reads as blurry texture rather than a
     photo. Instead the image occupies a band behind the copy and fades into
     black before the form card, which is opaque and never showed it anyway.
     At this height the image is downscaled rather than stretched, so it
     stays sharp. */
  .hero { background: var(--black); }
  .hero-bg {
    bottom: auto;
    height: clamp(400px, 60vh, 620px);
    background-position: 50% 38%;
    -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
  }

  .hero-grid { grid-template-columns: 1fr; padding-block: 56px 64px; gap: 36px; }
  .hero-copy { max-width: none; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .area-grid { grid-template-columns: repeat(2, 1fr); gap: 26px 18px; }
  .why-grid { grid-template-columns: 1fr; gap: 36px; }
  .why-media { order: 2; }
  .trustbar-inner { justify-content: flex-start; gap: 14px 28px; }

  /* Mobile: phone leads, sticky bar appears */
  .header-quote { display: none; }
  .sticky-bar { display: flex; }
  body { padding-bottom: 78px; }
  .form-card { scroll-margin-top: 84px; }
}

@media (max-width: 620px) {
  :root { --gutter: 18px; }
  .header-inner { min-height: 66px; }
  .header-logo img { width: 54px; }
  .header-actions .btn { padding: 10px 18px; font-size: 0.9375rem; }

  .hero-cta .btn { width: 100%; }
  .services-grid,
  .steps { grid-template-columns: 1fr; }
  .rv-grid { columns: 1; }
  .field-row { grid-template-columns: 1fr; }
  .form-card { padding: 24px 20px; }
  .quote-anchor { padding: 28px 24px; }
  .trustbar-inner { display: grid; grid-template-columns: 1fr 1fr; }
  .trustbar-item { font-size: 0.875rem; }
  /* the bar wraps at this width, so the divider would dangle mid-air */
  .rv-bar { gap: 8px 10px; padding: 16px 18px; }
  .rv-bar-sep { display: none; }
}