/* ==========================================================================
   PRO CONSTRUCTION — Custom Garage Landing Page
   Layout dimensions mirror the reference page measured at a 1440px viewport:
   container 1170px, header 143px, hero 583px, offer strip 63px,
   split columns 585/585, step cards 370x234, form columns 566/604.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Brand colour — sampled from the PRO Construction logo */
  --gold:            #B9873E;   /* muted construction gold — fills, icons, accents */
  --gold-bright:     #CB9C4C;   /* hover */
  --gold-deep:       #8A6420;   /* gold that meets AA on light backgrounds */
  --gold-pale:       #EBD9B6;   /* gold tint on dark backgrounds */
  --gold-star:       #E9B949;   /* review stars: brighter than the brand gold so they read as stars */

  --ink:             #1A1410;   /* nearly-black brown — dark sections */
  --ink-2:           #241B13;   /* raised dark surface */
  --ink-footer:      #12100C;   /* footer */

  --cream:           #FFFCF7;   /* light sections */
  --cream-tint:      #F3EDE2;   /* alternating light section */
  --cream-line:      #E3D9C8;   /* hairlines on light */

  --text:            #2B2019;   /* dark brown headline / body text */
  --text-muted:      #6B5D4E;   /* secondary body copy */
  --text-on-dark:    #FFFCF7;
  --text-on-dark-mut:#D9CEBC;

  --focus:           var(--gold);

  /* Type */
  --font: "Poppins", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --fs-display-hero: 35px;   --lh-display-hero: 45.5px;
  --fs-display-split:28px;   --lh-display-split:36.4px;
  --fs-display-center:35px;  --lh-display-center:45.5px;
  --fs-lede:          20px;  --lh-lede:          33px;
  --fs-body:          18px;  --lh-body:          27px;
  --fs-body-loose:    18px;  --lh-body-loose:    30px;
  --fs-small:         14px;  --lh-small:         21px;
  --fs-strip:         20px;  --lh-strip:         43.2px;

  /* Layout */
  --container: 1170px;
  --gutter: 15px;
  --split-gap: 64px;          /* breathing room between copy and image columns */
  --section-pad-y: 66px;      /* matches the reference's vertical rhythm */
  --section-pad-y-sm: 44px;

  /* Controls */
  --btn-h: 54px;
  --btn-h-lg: 60px;
  --btn-pad-x: 30px;
  --btn-radius: 0px;
  --btn-radius-pill: 75px;
  --field-h: 46px;            /* >=44px touch target */
  --radius-sm: 5px;
  --radius-md: 15px;
  --radius-lg: 20px;
}

/* ---------- 2. Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  overflow-x: clip;
  max-width: 100%;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4, p, ul, ol, blockquote, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: var(--gold-deep); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--gold);
  color: var(--ink);
  font-weight: 700;
  padding: 12px 20px;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ---------- 3. Layout primitives ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container-narrow { max-width: 900px; }

.section { padding-block: var(--section-pad-y); }

.section-dark  { background: var(--ink);       color: var(--text-on-dark); }
.section-cream { background: var(--cream);     color: var(--text); }
.section-tint  { background: var(--cream-tint);color: var(--text); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--split-gap);
  align-items: center;
}
.split > .col { padding: 10px 0; min-width: 0; }

/* Reference form section columns: 566 / 604 of 1170 */
.split-form { grid-template-columns: minmax(0, 566fr) minmax(0, 604fr); align-items: start; }

/* ---------- 4. Typography ---------- */
.display {
  font-family: var(--font);
  font-weight: 800;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.display em { font-style: normal; color: var(--gold); }
.section-cream .display em,
.section-tint  .display em { color: var(--gold-deep); }

.display-hero   { font-size: var(--fs-display-hero);   line-height: var(--lh-display-hero); }
.display-split  { font-size: var(--fs-display-split);  line-height: var(--lh-display-split); }
.display-center { font-size: var(--fs-display-center); line-height: var(--lh-display-center); text-align: center; }

.lede {
  font-size: var(--fs-lede);
  line-height: var(--lh-lede);
  margin-top: 16px;
  max-width: 46ch;
}
.section-dark .lede { color: var(--text-on-dark); }
.lede strong { color: var(--gold); font-weight: 700; }

.body-lg {
  font-size: var(--fs-body-loose);
  line-height: var(--lh-body-loose);
  color: var(--text-muted);
  margin-top: 16px;
  max-width: 52ch;
}
.section-dark .body-lg { color: var(--text-on-dark-mut); }
.body-lg strong { color: var(--text); font-weight: 700; }
.section-dark .body-lg strong { color: var(--gold); }
.section-cream .body-lg strong,
.section-tint  .body-lg strong { color: var(--text); }

/* ---------- 5. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--btn-h);
  padding: 15px var(--btn-pad-x);
  border: 2px solid transparent;
  border-radius: var(--btn-radius);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-label { white-space: nowrap; }
.btn-icon { display: inline-flex; flex: none; }

.btn-gold {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
  box-shadow: 0 2px 0 rgba(0,0,0,.18);
}
.btn-gold:hover { background: var(--gold-bright); border-color: var(--gold-bright); }

.btn-outline-gold {
  background: var(--cream);
  border-color: var(--gold);
  color: var(--gold-deep);
  border-radius: var(--btn-radius-pill);
  min-height: var(--btn-h-lg);
  min-width: 356px;
}
.btn-outline-gold:hover { background: var(--gold); color: var(--ink); }

.btn-outline-light {
  background: transparent;
  border-color: var(--cream);
  color: var(--cream);
  border-radius: var(--btn-radius-pill);
  min-height: var(--btn-h-lg);
  min-width: 356px;
}
.btn-outline-light:hover { background: var(--cream); color: var(--ink); }

.btn-block { display: flex; width: 100%; }
.cta-center { display: flex; justify-content: center; margin-top: 46px; }

/* A CTA that follows body copy, a list, or a heading always needs air above it. */
.col-copy > .btn,
.col-copy > .btn-block { margin-top: 32px; }

/* ---------- 6. Header (reference: 143px tall, logo left, CTA right) ----------
   The supplied logo is gold-on-transparent, drawn for dark backgrounds. The bar
   is dark so the artwork sits directly on it with no plate or box around it. */
.site-header {
  background: var(--ink-2);
  border-bottom: 1px solid rgba(185, 135, 62, .22);
  padding-block: 14px;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 113px;
}
.site-logo { display: inline-flex; align-items: center; flex: none; min-height: 44px; }
.site-logo img { width: auto; height: 104px; }
.header-cta { min-width: 350px; }

/* ---------- 7. Hero ---------- */
.hero { padding-block: 50px 40px; }
.split-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }

.checklist { margin-top: 26px; display: grid; gap: 18px; }
.checklist li {
  position: relative;
  padding-left: 36px;
  font-size: 19px;
  line-height: 1.4;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--gold);
  /* inline SVG checkmark — no icon library */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1410' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  background-size: 16px 16px;
  background-position: center;
  background-repeat: no-repeat;
}
.checklist li strong { color: var(--gold); font-weight: 700; }
/* Spacing below the hero list comes from the shared `.col-copy > .btn` rule,
   so it is not declared twice and cannot collapse unpredictably. */

.checklist-final { margin-top: 22px; gap: 18px; }
.checklist-final li { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-on-dark-mut); }
.checklist-final li strong { color: var(--gold); }

.qual-line {
  margin-top: 14px;
  font-size: 15px;
  line-height: 23px;
  color: var(--text-on-dark-mut);
}
.qual-line strong { color: var(--gold); font-weight: 700; }

/* Google rating row, in the slot the reference gives its ratings bar. */
.rating-row {
  margin-top: 22px;
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.rating-stars { display: inline-flex; align-items: center; gap: 3px; }
.rating-stars svg { fill: var(--gold-star); display: block; }
.rating-text {
  font-size: 19px;
  font-weight: 500;
  line-height: 1;
  color: var(--text-on-dark);
  white-space: nowrap;
}
.rating-score { font-weight: 700; }
.rating-google { display: inline-flex; align-items: center; }

/* ---------- 8. Media ---------- */
.media-figure { position: relative; }
.media-figure img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  object-fit: cover;
}
.split-hero .media-figure img { aspect-ratio: 544 / 399; }

/* Offer card layered over the property visualization */
.media-overlay-host { position: relative; }
.offer-card {
  position: absolute;
  left: 0;
  bottom: 34px;
  width: 232px;
  padding: 16px 18px 14px;
  background: var(--cream);
  border-top: 5px solid var(--gold);
  border-radius: var(--radius-sm);
  box-shadow: 0 14px 30px rgba(0,0,0,.38);
  text-align: center;
}
.offer-card-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--gold-deep);
}
.offer-card-title {
  margin-top: 8px;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--text);
}
.offer-card-fine {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--cream-line);
  font-size: 12px;
  line-height: 17px;
  color: var(--text-muted);
}

/* ---------- 9. Offer strip (reference: 63px, full width) ---------- */
.offer-strip {
  background: var(--gold);
  color: var(--ink);
  min-height: 63px;
  display: flex;
  align-items: center;
}
.offer-strip p {
  font-size: var(--fs-strip);
  line-height: var(--lh-strip);
  text-align: center;
  overflow-wrap: anywhere;
}
.offer-strip strong { font-weight: 800; }

/* ---------- 10. Benefit list (light split section) ---------- */
.benefit-list { margin-top: 22px; display: grid; gap: 18px; }
.benefit-list li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: start; }
.benefit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  background: rgba(185,135,62,.14);
  color: var(--gold-deep);
}
.benefit-list h3 { font-size: 19px; font-weight: 700; line-height: 1.3; color: var(--text); }
.benefit-list p  { margin-top: 5px; font-size: 16px; line-height: 25px; color: var(--text-muted); }

/* ---------- 11. Reviews (Elfsight embed) ----------
   The widget renders its own markup, so this only reserves space and keeps it
   inside the container. min-height approximates the loaded height to limit
   layout shift while the lazy widget hydrates. */
.reviews-embed {
  margin-top: 40px;
  min-height: 400px;
  max-width: 100%;
}
.reviews-embed > div { max-width: 100%; }

/* ---------- 12. Value grid ---------- */
.value-grid {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}
.value-item {
  text-align: left;
  padding-top: 24px;
  border-top: 3px solid var(--cream-line);
}
/* The guaranteed maximum price is the differentiator — give it the gold rule. */
.value-item-lead { border-top-color: var(--gold); }
.value-item h3 { margin-top: 14px; font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--text); }
.value-item p  { margin-top: 10px; font-size: 16px; line-height: 26px; color: var(--text-muted); }
.value-item p strong { color: var(--text); font-weight: 700; }

/* ---------- 13. Three steps (reference cards: 370 x 234, radius 15, pad 10/40) ---------- */
.step-grid {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}
.step-card {
  background: var(--cream);
  border-radius: var(--radius-md);
  padding: 26px 40px 30px;
  min-height: 234px;
}
.step-num {
  display: block;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--gold);
}
.step-card h3 { margin-top: 12px; font-size: 22px; font-weight: 700; line-height: 30px; color: var(--text); }
.step-card p  { margin-top: 12px; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-muted); }

/* ---------- 14. FAQ accordion ---------- */
.accordion { margin-top: 40px; border-top: 1px solid var(--cream-line); }
.acc-item { border-bottom: 1px solid var(--cream-line); }
.acc-item h3 { margin: 0; }
.acc-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  min-height: 64px;
  padding: 18px 4px;
  background: none;
  border: 0;
  font-family: var(--font);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.acc-trigger:hover { color: var(--gold-deep); }

.acc-indicator {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
}
.acc-indicator::before,
.acc-indicator::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--gold);
  transform: translate(-50%, -50%);
  transition: opacity .18s ease, transform .18s ease;
}
.acc-indicator::before { width: 22px; height: 3px; }
.acc-indicator::after  { width: 3px; height: 22px; }
.acc-trigger[aria-expanded="true"] .acc-indicator::after { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); }

.acc-panel { padding: 0 4px 22px; }
.acc-panel p { font-size: 16px; line-height: 27px; color: var(--text-muted); max-width: 78ch; }

/* ---------- 15. Final form (GoHighLevel embed) ----------
   The embed renders its own cream card, heading, fields and consent copy, so
   there is no wrapper card here: a second background would double up on it.
   form_embed.js posts the content height and sets the iframe height; the
   min-height below just reserves space until that message arrives. */
/* form_embed.js briefly pulls the iframe out of flow (position:absolute,
   off-screen) while it measures the content, and an explicit height keeps the
   form usable if that script is ever blocked (ad blocker, offline, CSP). When
   it does run it writes its own inline height, which wins over these rules.

   Measured natural heights of the embed, by iframe width:
     288px -> 1417   343px -> 1349   414px -> 1321   480px -> 1289
     555px ->  876   608px ->  846   720px ->  846
   The form drops from two columns to one below roughly 520px of iframe width,
   which is a ~550px viewport once the page gutters are subtracted. */
.form-embed { width: 100%; min-height: 900px; }
.form-embed iframe {
  display: block;
  width: 100%;
  height: 900px;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--cream);
  overflow: hidden;
}

/* Single-column form: taller. Keyed to the embed's own breakpoint, not the
   page's, so the reserved space matches what the form actually renders. */
@media (max-width: 550px) {
  .form-embed { min-height: 1430px; }
  .form-embed iframe { height: 1430px; }
}

/* ---------- 15b. Thank you page ---------- */
/* Confirmation header carries the logo only: there is no form left to send
   anyone to, so the usual CTA would be a dead link. */
.header-inner-plain { justify-content: center; }

.thanks { text-align: center; }
.thanks-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
}
.thanks-h { margin-top: 26px; }
.thanks-lede {
  margin-inline: auto;
  max-width: 54ch;
  color: var(--text-on-dark-mut);
}

.thanks-next {
  margin-top: 44px;
  margin-inline: auto;
  max-width: 620px;
  padding: 32px 34px 34px;
  text-align: left;
  background: var(--ink-2);
  border-top: 4px solid var(--gold);
  border-radius: var(--radius-md);
}
.thanks-next-h {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-on-dark);
}
.thanks-next .checklist { margin-top: 20px; }
.thanks-note {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(185, 135, 62, .28);
  font-size: 15px;
  line-height: 25px;
  color: var(--text-on-dark-mut);
}

.thanks-rating { margin-top: 40px; justify-content: center; }

.thanks-more-copy {
  margin-inline: auto;
  max-width: 60ch;
  text-align: center;
}

/* ---------- 16. Footer ---------- */
.site-footer {
  background: var(--ink-footer);
  color: var(--text-on-dark);
  padding-block: 34px;
}
.footer-inner { text-align: center; }
.footer-logo { width: 168px; height: auto; margin-inline: auto; }
.footer-desc {
  margin-top: 14px;
  margin-inline: auto;
  max-width: 74ch;
  font-size: 15px;
  line-height: 24px;
  color: var(--text-on-dark-mut);
}
.footer-terms {
  margin-top: 12px;
  margin-inline: auto;
  max-width: 104ch;
  font-size: 12px;
  line-height: 18px;
  color: var(--text-on-dark-mut);
  opacity: .78;
}
.footer-terms strong { color: var(--gold-pale); }
.footer-links { margin-top: 16px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 14px; }
.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;          /* touch target */
  padding-inline: 10px;
  color: var(--gold-pale);
  text-decoration: none;
}
.footer-links a:hover { text-decoration: underline; }
.footer-copy { margin-top: 12px; font-size: 14px; line-height: 22px; color: var(--text-on-dark-mut); opacity: .75; }

/* ==========================================================================
   17. Responsive — mirrors the reference page's mobile stacking
   ========================================================================== */

/* --- Tablet / small desktop --- */
@media (max-width: 1100px) {
  :root {
    --fs-display-hero: 32px;   --lh-display-hero: 42px;
    --fs-display-center: 31px; --lh-display-center: 41px;
    --fs-strip: 20px;          --lh-strip: 32px;
    --gutter: 24px;
    --split-gap: 44px;
  }
  .header-cta { min-width: 0; }
  .site-logo img { height: 84px; }
  .header-inner { min-height: 100px; }
  .btn-outline-gold, .btn-outline-light { min-width: 0; width: 100%; }
}

/* --- Stack the splits (reference collapses to one column here) --- */
@media (max-width: 900px) {
  :root { --section-pad-y: var(--section-pad-y-sm); }

  .split,
  .split-form { grid-template-columns: minmax(0, 1fr); gap: 40px; }

  /* No order overrides: DOM order already stacks each split in its
     desktop left-to-right reading order. */

  .lede { max-width: none; }
  .body-lg { max-width: none; }

  .value-grid,
  .step-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }

  /* Stacked, a full-width top rule reads as a section divider rather than an
     item boundary, so tighten the item and let the icon lead instead. */
  .value-grid { margin-top: 30px; gap: 8px; }
  .value-item { padding-top: 20px; }
  .value-item h3 { margin-top: 10px; }

  .step-card { min-height: 0; padding: 24px 28px 26px; }

}

/* --- Phone --- */
@media (max-width: 640px) {
  :root {
    --fs-display-hero: 28px;   --lh-display-hero: 37px;
    --fs-display-split: 25px;  --lh-display-split: 33px;
    --fs-display-center: 26px; --lh-display-center: 34px;
    --fs-lede: 17px;           --lh-lede: 28px;
    --fs-body-loose: 16px;     --lh-body-loose: 27px;
    --fs-strip: 16px;          --lh-strip: 26px;
    --btn-pad-x: 16px;
    --gutter: 16px;
  }

  /* Compact header: logo left, CTA right, both on one line */
  .site-header { padding-block: 10px; }
  .header-inner { min-height: 0; gap: 10px; }
  .site-logo img { height: 48px; }
  .header-cta { padding: 12px 14px; min-height: 46px; min-width: 0; }
  .header-cta .btn-icon { display: none; }
  .header-cta .btn-label { font-size: 13px; }

  .hero { padding-block: 34px 32px; }

  .checklist li { font-size: 16px; padding-left: 32px; }
  .checklist li::before { width: 21px; height: 21px; background-size: 14px 14px; }
  .checklist { gap: 16px; }

  /* Keep the rating bar on one line at phone widths. */
  .rating-row { gap: 9px; }
  .rating-stars { gap: 2px; }
  .rating-stars svg { width: 20px; height: 19px; }
  .rating-text { font-size: 16px; }
  .rating-google svg { width: 22px; height: 22px; }

  .offer-strip { padding-block: 14px; }
  .offer-strip p { line-height: 26px; }

  .btn { font-size: 15px; }
  .btn-label { white-space: normal; }
  .btn-block .btn-label { white-space: nowrap; }


  /* The card tucks under the photo. `relative` is required: a static block's
     background paints *below* the image's inline content, which clipped the
     card's top edge and its "COMPLIMENTARY" line. */
  .offer-card {
    position: relative;
    z-index: 1;
    inset: auto;
    width: auto;
    margin-top: -28px;
    margin-inline: 20px;
  }

  .reviews-embed { margin-top: 28px; min-height: 300px; }

  /* Full-width CTAs read better than centred pills on a phone. */
  .cta-center { margin-top: 32px; }
  .cta-center .btn { width: 100%; }

  .acc-trigger { font-size: 16px; gap: 14px; }

  .footer-logo { width: 168px; }
}

/* --- Very narrow (320px) --- */
@media (max-width: 380px) {
  :root { --fs-display-hero: 25px; --lh-display-hero: 33px; --btn-pad-x: 12px; }
  .header-cta .btn-label { font-size: 12px; }
  .site-logo img { height: 40px; }
  /* Drop the icon and tighten the label so long CTAs stay on one line at 320px */
  .btn-block .btn-icon { display: none; }
  .btn-block .btn-label { white-space: nowrap; font-size: 13px; }
  .step-card { padding-inline: 18px; }

  /* Keep stars, score and the Google mark on one line at 320px. */
  .rating-row { gap: 7px; }
  .rating-stars svg { width: 17px; height: 16px; }
  .rating-text { font-size: 15px; }
  .rating-google svg { width: 20px; height: 20px; }
}

/* ---------- 18. Motion preference ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .btn:hover { transform: none; }
}