/* Taylor Made Roofing Services — Google Ads landing pages
   Palette taken from the client's logo: charcoal #15181B + brand lime #7ABF06.
   Lime is used as a fill and an accent only (never as small text on white) so
   contrast stays high. Mobile first, 48px minimum tap targets. */

:root {
  --ink: #15181b;
  --ink-2: #3b4249;
  --muted: #63707a;

  --charcoal: #1b2024;
  --charcoal-2: #242a30;

  --green: #7abf06;
  --green-bright: #8fdb0d;
  --green-deep: #5c9400;
  --green-tint: #f2f9e6;
  --green-line: #d3e7a8;

  --bg: #ffffff;
  --alt: #f7f9f2;
  --line: #e4e9dd;

  --radius: 16px;
  --radius-sm: 12px;
  --shadow: 0 14px 38px rgba(21, 24, 27, .13);
  --shadow-sm: 0 2px 10px rgba(21, 24, 27, .07);
  --wrap: 1140px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 { margin: 0 0 .5em; line-height: 1.08; letter-spacing: -.03em; font-weight: 800; }
h1 { font-size: clamp(2rem, 7.4vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 5.2vw, 2.35rem); }
h3 { font-size: 1.06rem; line-height: 1.25; }
p { margin: 0 0 1em; }
a { color: var(--ink); }
[hidden] { display: none !important; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 18px; }
.wrap-narrow { max-width: 830px; }

:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }

/* ------------------------------------------------------------------ buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 14px 22px;
  border: 2px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.01em;
  text-decoration: none;
  cursor: pointer;
  line-height: 1.1;
  white-space: nowrap;
  transition: transform .12s ease, background-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--green); color: #10160a; box-shadow: 0 6px 18px rgba(122, 191, 6, .35); }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--green-bright); }
.btn-call { background: var(--charcoal); color: #fff; box-shadow: var(--shadow-sm); }
.btn-call:hover, .btn-call:focus-visible { background: #000; }
.btn-outline-light { border-color: rgba(255, 255, 255, .45); color: #fff; }
.btn-outline-light:hover, .btn-outline-light:focus-visible { background: rgba(255, 255, 255, .12); }
.btn-block { width: 100%; }
.btn-lg { min-height: 58px; font-size: 1.06rem; }
.btn-sm { min-height: 46px; padding: 11px 16px; font-size: .94rem; }
.btn[disabled] { opacity: .7; cursor: progress; }
.icon-phone { width: 18px; height: 18px; fill: currentColor; flex: none; }

/* ------------------------------------------------------------------- header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header.is-scrolled { box-shadow: 0 6px 22px rgba(21, 24, 27, .09); }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 62px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.header-actions { display: flex; align-items: center; gap: 12px; }
.header-badge {
  display: none;
  font-size: .78rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .01em;
}
.brand { display: flex; align-items: center; text-decoration: none; }
/* The client's full logo lockup — diamond, wordmark and stars — so the name is
   the artwork itself, not type set beside a crop of the mark. Sized to keep the
   wordmark inside the logo readable. */
.brand-logo { height: 58px; width: auto; }

/* --------------------------------------------------------------------- hero */
.hero {
  position: relative;
  padding: 26px 0 30px;
  color: #fff;
  /* Full-bleed photo behind a charcoal scrim: dark enough that the headline
     stays white on dark, light enough that the roof tiles still read. The
     bottom gradient lands on the trust bar colour, so the hero and the bar
     below it read as one dark block. */
  --hero-img: url("/assets/img/hero-tile-roof-replacement.jpg");
  background-color: var(--charcoal);
  background-image:
    linear-gradient(180deg, rgba(21, 26, 29, 0) 46%, rgba(26, 31, 35, .78) 86%, var(--charcoal) 100%),
    linear-gradient(104deg, rgba(13, 16, 19, .95) 0%, rgba(17, 21, 24, .9) 48%, rgba(19, 23, 27, .72) 100%),
    var(--hero-img);
  background-repeat: no-repeat;
  background-size: cover, cover, cover;
  background-position: center, center, center 34%;
}
.hero--terracotta-roof-replacement { --hero-img: url("/assets/img/hero-terracotta-roof-replacement.jpg"); }
.hero--tile-roofers { --hero-img: url("/assets/img/hero-tile-roofers.jpg"); }

/* On a phone the hero is tall and narrow, so the angled scrim above would bury
   the photo down the middle. A squarer, slightly lighter wash keeps the roof
   visible while the headline stays white on dark. */
@media (max-width: 899px) {
  .hero {
    background-image:
      linear-gradient(180deg, rgba(21, 26, 29, .5) 0%, rgba(22, 27, 30, .72) 42%, rgba(26, 31, 35, .88) 84%, var(--charcoal) 100%),
      linear-gradient(180deg, rgba(15, 18, 21, .74), rgba(19, 23, 27, .8)),
      var(--hero-img);
    background-position: center, center, center 28%;
  }
}

/* White on photo, for the hero only — the rest of the page stays dark on light. */
.hero h1 { color: #fff; }
.hero .lede { color: rgba(255, 255, 255, .86); }
.hero .eyebrow { color: rgba(255, 255, 255, .74); }
.hero .ticks { color: #fff; }
.hero .ti { background: var(--green); fill: #10160a; }
.hero .hero-call { color: rgba(255, 255, 255, .74); }
.hero .hero-call a { color: #fff; }
.hero .form-card { box-shadow: 0 26px 60px rgba(0, 0, 0, .42); }
.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); flex: none; }
.eyebrow-light { color: rgba(255, 255, 255, .78); }

.hero h1 { margin-bottom: .42em; }
.lede { font-size: 1.03rem; color: var(--ink-2); margin-bottom: 16px; max-width: 34em; }
.ticks {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  gap: 8px;
  font-size: .97rem;
  font-weight: 700;
}
.ticks li { display: flex; align-items: center; gap: 9px; }
.ti { width: 21px; height: 21px; padding: 3px; border-radius: 50%; background: var(--green-tint); fill: var(--green-deep); flex: none; }
.hero-call {
  margin: 0 0 18px;
  font-size: .95rem;
  font-weight: 700;
  color: var(--muted);
}
.hero-call a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--green);
  padding-bottom: 1px;
  font-variant-numeric: tabular-nums;
}

/* Desktop-only reassurance strip: on mobile the form comes first. */
.hero-steps {
  display: none;
  list-style: none;
  margin: 26px 0 0;
  padding: 22px 0 0;
  border-top: 1px dashed rgba(255, 255, 255, .26);
  gap: 18px;
  grid-template-columns: repeat(3, 1fr);
}
.hero-steps li { display: flex; gap: 10px; align-items: flex-start; }
.hero-steps span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  background: var(--green);
  color: #10160a;
  font-weight: 900;
  font-size: .85rem;
}
.hero-steps strong { display: block; font-size: .92rem; letter-spacing: -.01em; }
.hero-steps em { font-style: normal; font-size: .82rem; color: rgba(255, 255, 255, .72); }

/* ---------------------------------------------------------------- form card */
.form-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.form-head { padding: 16px 16px 14px; background: var(--charcoal); color: #fff; }
.form-title { margin: 0 0 3px; font-size: 1.2rem; color: #fff; }
.form-sub { margin: 0; font-size: .88rem; color: rgba(255, 255, 255, .76); }
.form-promise { list-style: none; margin: 11px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.form-promise li {
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #14190c;
  background: var(--green);
  border-radius: 999px;
  padding: 4px 10px;
}
.form-body { padding: 16px; }
.field { margin-bottom: 11px; min-width: 0; }
.field-row { margin-bottom: 0; }
label { display: block; font-size: .8rem; font-weight: 800; margin-bottom: 5px; color: var(--ink-2); letter-spacing: .01em; }
input[type="text"], input[type="tel"], input[type="email"], select, textarea {
  width: 100%;
  min-height: 50px;
  padding: 11px 13px;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: #fbfcfa;
  border: 1.5px solid #dde3d4;
  border-radius: var(--radius-sm);
  appearance: none;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
input[type="file"] {
  width: 100%;
  min-height: 50px;
  padding: 11px 13px;
  font: inherit;
  font-size: .84rem;
  color: var(--muted);
  background: #fbfcfa;
  border: 1.5px dashed #d7dfcc;
  border-radius: var(--radius-sm);
}
select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2363707a' d='M1.4.6 6 5.2 10.6.6 12 2 6 8 0 2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 11px;
  padding-right: 36px;
}
textarea { min-height: 88px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  background: #fff;
  border-color: var(--green);
  box-shadow: 0 0 0 4px rgba(122, 191, 6, .18);
  outline: none;
}
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: #c62b21;
  background: #fff7f6;
  box-shadow: none;
}
.req { color: #c62b21; font-weight: 800; }
.opt { color: var(--muted); font-weight: 600; }
.error { margin: 6px 0 0; font-size: .83rem; font-weight: 800; color: #c62b21; }
.hint { margin: 5px 0 0; font-size: .74rem; color: var(--muted); }
.group-label {
  margin: 18px 0 10px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  font-size: .8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
}
.group-label span { text-transform: none; letter-spacing: 0; font-weight: 600; }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: .89rem; font-weight: 700; margin: 0; color: var(--ink-2); }
.check input { width: 24px; height: 24px; min-height: 0; margin: 0; flex: none; accent-color: var(--green-deep); }
.form-trust { margin: 14px 0 10px; text-align: center; font-size: .84rem; font-weight: 800; color: var(--ink); }
.form-fineprint { margin: 10px 0 0; text-align: center; font-size: .74rem; color: var(--muted); }
.form-status { margin-top: 12px; padding: 11px 13px; background: #fff7f6; border: 1px solid #f0c8c4; border-radius: var(--radius-sm); font-size: .88rem; font-weight: 700; color: #c62b21; }
.form-status a { color: #c62b21; }
.form-foot {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 13px 16px;
  background: var(--alt);
  border-top: 1px solid var(--line);
  font-size: .87rem;
  color: var(--muted);
  text-align: center;
}
.form-foot a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-weight: 800;
  color: var(--ink);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.form-foot .icon-phone { width: 15px; height: 15px; fill: var(--green-deep); }

/* ----------------------------------------------------------------- trustbar */
.trustbar { background: var(--charcoal); color: #fff; }
.trustbar ul {
  list-style: none;
  margin: 0;
  padding: 13px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 22px;
  font-size: .84rem;
  font-weight: 700;
}
.trustbar li { display: flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, .9); }
.trustbar li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: none; }

/* ----------------------------------------------------------------- sections */
.section { padding: 34px 0; }
.section-alt { background: var(--alt); }
.section-dark { background: var(--charcoal); color: #fff; }
.section-dark h2 { color: #fff; }
.section-dark .eyebrow { color: rgba(255, 255, 255, .7); }
.section-dark .section-sub { color: rgba(255, 255, 255, .72); }
.section-sub { margin: -6px 0 20px; color: var(--muted); font-size: .97rem; }
.lead-p { font-size: 1.06rem; color: var(--ink-2); }

.reliability-grid { display: grid; gap: 20px; }
.reliability-shot { margin: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--shadow-sm); }
.reliability-shot img { width: 100%; height: 100%; object-fit: cover; }
.plain-points { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.plain-points li { position: relative; padding-left: 32px; font-weight: 700; }
.plain-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--green) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2310160a' d='M6.2 11.7 2.6 8.1l1.1-1.1 2.5 2.5 6-6L13.3 4.6z'/%3E%3C/svg%3E") no-repeat center / 13px 13px;
}

/* steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: step; }
.step { position: relative; padding: 16px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); }
.section-dark .step { background: var(--charcoal-2); border-color: rgba(255, 255, 255, .1); }
.section-dark .step p { color: rgba(255, 255, 255, .74); }
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-bottom: 9px;
  border-radius: 50%;
  background: var(--green);
  color: #10160a;
  font-weight: 900;
  font-size: .95rem;
}
.step h3 { margin: 0 0 5px; }
.step p { margin: 0; font-size: .93rem; color: var(--muted); }
.steps-vertical { grid-template-columns: 1fr; }

/* cards + notes */
.cards { display: grid; gap: 14px; margin-bottom: 14px; }
.card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  overflow: hidden;
}
.card::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: var(--green); }
.card h3 { margin-top: 6px; }
.card p { margin: 0; font-size: .96rem; color: var(--ink-2); }
.note {
  margin-top: 14px;
  padding: 15px 17px;
  background: var(--green-tint);
  border-left: 5px solid var(--green);
  border-radius: 10px;
}
.note h3 { margin: 0 0 4px; font-size: 1rem; }
.note p { margin: 0; font-size: .96rem; color: var(--ink-2); }
.note-brand { background: var(--alt); border-left-color: var(--charcoal); }

/* gallery */
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.shot { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.shot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.shot figcaption { padding: 9px 11px 11px; font-size: .78rem; font-weight: 700; color: var(--ink-2); }

/* reviews */
.reviews { display: grid; gap: 14px; }
.review {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  border-top: 5px solid var(--green);
}
.stars { display: flex; gap: 3px; }
.stars svg { width: 18px; height: 18px; fill: var(--green); }
.review blockquote { margin: 0; }
.review blockquote p { margin: 0; font-size: .97rem; color: var(--ink-2); }
.review figcaption { display: flex; align-items: center; gap: 11px; margin-top: auto; padding-top: 4px; }
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  background: var(--green-tint);
  border: 1px solid var(--green-line);
  color: var(--green-deep);
  font-weight: 900;
  font-size: 1rem;
}
.review-who { display: flex; flex-direction: column; line-height: 1.25; }
.review-who strong { font-size: .93rem; }
.review-job { font-size: .8rem; color: var(--muted); font-weight: 700; }

/* Three across on desktop: a wall of proof reads better than one very wide
   card with two lines of text in it. */
@media (min-width: 700px) { .reviews { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .reviews { grid-template-columns: repeat(3, 1fr); } }

/* areas */
.areas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 9px; }
.areas li {
  padding: 9px 15px;
  font-size: .93rem;
  font-weight: 700;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.areas li::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--green); }

/* FAQ */
.faq { display: grid; gap: 10px; }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.faq-item summary {
  position: relative;
  padding: 16px 48px 16px 17px;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 17px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--green-deep);
}
.faq-item[open] summary::after { content: "\2013"; }
.faq-item[open] { border-color: var(--green-line); }
.faq-body { padding: 0 17px 17px; }
.faq-body p { margin: 0; color: var(--ink-2); font-size: .96rem; }

/* final CTA */
.final-cta { background: var(--charcoal); color: #fff; padding: 36px 0 42px; }
.final-cta h2 { color: #fff; text-align: center; }
.final-cta .hl { color: var(--green); }
.cta-buttons { display: grid; gap: 10px; margin: 22px 0 26px; }
.wrap.form-wrap { max-width: 720px; }

/* footer */
.site-footer { background: #101418; color: rgba(255, 255, 255, .72); padding: 28px 0 32px; text-align: center; }
.footer-logo { height: 76px; width: auto; margin: 0 auto 12px; }
.footer-lines { margin: 0 0 14px; font-size: .89rem; line-height: 1.7; }
.footer-contact { margin: 0 0 12px; }
.footer-lines a { color: #fff; }
.footer-fine { margin: 0; font-size: .8rem; }
.footer-fine a { color: rgba(255, 255, 255, .72); }
.footer-fine a:hover { color: #fff; }

/* sticky mobile action bar */
.mobile-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 9px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 26px rgba(21, 24, 27, .14);
}
.mobile-cta .btn { min-height: 50px; padding: 12px 14px; font-size: .98rem; }
@media (max-width: 899px) {
  body.has-mobile-cta { padding-bottom: 80px; }
}

/* thank you + legal */
.thanks-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--green);
}
.thanks-badge .ti { width: 30px; height: 30px; padding: 0; background: none; fill: #10160a; }
.thanks-inner h1 { margin-bottom: .35em; }
.thanks-call { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.thanks-call p { font-weight: 800; }
.legal h1 { font-size: clamp(1.7rem, 5vw, 2.4rem); }
.legal h2 { font-size: 1.15rem; margin-top: 1.5em; }
.legal p { color: var(--ink-2); }

/* ------------------------------------------------------------------ desktop */
@media (min-width: 700px) {
  .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 13px; }
  .gallery { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .cards { grid-template-columns: 1fr 1fr; gap: 18px; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .section { padding: 52px 0; }
  .cta-buttons { grid-auto-flow: column; justify-content: center; }
  .form-foot { flex-direction: row; align-items: center; justify-content: center; gap: 10px; }
  .header-badge { display: block; }
}

@media (min-width: 900px) {
  .header-inner { min-height: 80px; }
  .brand-logo { height: 74px; }

  .hero { padding: 54px 0 58px; }
  .hero-grid { display: grid; grid-template-columns: 1.04fr .96fr; gap: 52px; align-items: center; }
  .hero h1 { font-size: clamp(2.6rem, 3.6vw, 3.4rem); }
  .lede { font-size: 1.12rem; }
  .ticks { font-size: 1.02rem; gap: 10px; }
  .hero-steps { display: grid; }
  .form-head { padding: 20px 22px 18px; }
  .form-title { font-size: 1.32rem; }
  .form-body { padding: 18px 22px; }
  .field { margin-bottom: 9px; }
  .form-head { padding: 18px 22px 16px; }
  .form-promise { margin-top: 9px; }
  .group-label { margin: 15px 0 9px; padding-top: 12px; }
  .reliability-grid { grid-template-columns: 1.05fr .95fr; gap: 46px; align-items: center; }
  .steps { grid-template-columns: repeat(5, 1fr); gap: 15px; }
  .steps-vertical { grid-template-columns: 1fr; gap: 12px; }
  .section { padding: 68px 0; }
  .trustbar ul { font-size: .88rem; gap: 4px 30px; }
  .mobile-cta { display: none !important; }
  body.has-mobile-cta { padding-bottom: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* anchor offset for the sticky header */
#quote, #quote-bottom, #process, #faq, #areas, #materials, #gallery, #reviews, #why { scroll-margin-top: 88px; }