/* ==========================================================
   reviews.css   VERSION 3
   Page stylesheet for /reviews.

   VERSION 2 fixed a page that did not work:

   1. The carousel was styled for a transform carousel while the
      script drove it with scrollIntoView on an element that was
      not a scroll container. scrollLeft was always 0, nothing
      moved, no dot updated. It is a real overflow-x rail with
      snap points now, which tracks the finger 1:1, carries
      momentum, can be grabbed mid-flight, and still works with
      the script removed.

   2. Every review sat alone inside a slide that was itself a
      three column grid, so each card took a third of the width
      and two thirds of every slide was empty.

   3. The script builds .carousel-dot; the stylesheet only had
      .c-dot. .c-btn and .carousel-btns had rules and no markup.

   4. .star used var(--yellow), not a token here, so stars fell
      back to inherited black. .review-avatar had no fill, so it
      was white text on a white circle. .stats-grid asked for
      four columns with three stats in the markup.

   5. .btn-blue and .btn-outline, the buttons this page uses, had
      no base rules, only :active and :focus-visible, so they
      rendered as bare text links. .btn-wa, .btn-fb and
      .btn-pricing had full rules and appear nowhere, and
      .btn-fb called var(--fb), another token that does not exist.

   6. Dropped everything shell.css owns or the page never used:
      footer, nav { display:none }, .mob-top-nav, #progress-bar,
      the scrollbar theme, .trust-strip, .how-* and .body-copy-*.
      The nav rule switched at 720px while shell switches at 900.

   VERSION 4 clears the editor warnings on reviews.html: the
   star clip width moved off a style attribute and onto two
   classes, and the FAQ schema moved into an include so the
   templated JSON is no longer inside an ld+json block for the
   editor to parse as JSON. Nothing renders differently.

   VERSION 3 rebuilt the top of the page:

   7. The hero was a headline and a paragraph, with the rating
      sitting below it in a dark band as a bare number. The
      rating now leads the hero with real stars, and a review
      sits beside it, so the page opens on its own subject.

   8. The dark stats band is gone. Two of its three figures were
      the rating and the count, which are in the hero now, so it
      was repeating itself.

   9. Stars were the star character, rendered in whatever system
      font caught it. One SVG symbol now, drawn once and
      referenced, with the gold layer clipped to the exact
      rating, so 4.8 draws as 4.8 rather than rounding to five.

   .review-service was a filled capsule. Plain uppercase now.

   :root carried in full: every page stylesheet here has its own
   complete set so a token can never go missing.
   ========================================================== */

:root {
  /* Mobile standard (phones, max-width 720px). Identical in every page
     stylesheet; the "MOBILE STANDARD" block at the end of this file maps
     this page's classes onto them. */
  --m-gutter: 20px;
  --m-section: 48px;
  --m-block: 24px;
  --m-hero-top: 24px;
  --m-band: 24px;
  --m-card-pad: 20px;
  --m-card-radius: 14px;
  --m-panel-pad: 16px;
  --m-panel-radius: 12px;
  --m-row-pad: 14px 16px;
  --m-gap-cards: 12px;
  --m-gap-rows: 10px;
  --m-h1: 1.7rem;
  --m-h2: 1.3rem;
  --m-h2-space: 12px;
  --m-text: 16px;
  --m-text-min: 13px;
  --m-btn: 48px;

  --blue:    #1560FF;
  --blue-lt: #EEF3FF;
  --blue-mid:#C7D8FF;
  --blue-dk: #0A3ACC;
  --ink:     #0F172A;
  --ink2:    #1E293B;
  --muted:   #5E6E84;
  --muted2:  #64748B;
  --border:  #E2E8F0;
  --border2: #CBD5E1;
  --bg:      #FFFFFF;
  --bg2:     #F8FAFC;
  --bg3:     #F1F5F9;
  --wa:      #22C55E;
  --wa-dk:   #15803D;
  --wa-deep:   #166534;
  --gold:    #F59E0B;
  --teal:    #00CFFF;
  --display: 'Sora', 'Sora Fallback', sans-serif;
  --body:    'DM Sans', 'DM Sans Fallback', sans-serif;
  --radius:  14px;
  --nav-h:     64px;
  --mob-nav-h: 60px;
  --rail-gap: 1.25rem;
  --ease-settle: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-press:  cubic-bezier(0.4, 0, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--body); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: inherit; }

/* The <symbol> definition holder. Out of the flow rather than
   display:none, which stops some browsers resolving <use>. */
.ico-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ==========================================================
   PAGE SHELL
   ========================================================== */
.page { padding: calc(var(--nav-h) + 1.5rem) 2rem 5rem; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 2rem; }

/* ==========================================================
   STAR RATING
   Two identical rows of the same symbol, one grey underneath and
   one gold on top, with the gold layer clipped to a percentage.
   That is what lets 4.8 draw as four and four fifths instead of
   rounding to five, and it needs no per-star arithmetic.
   ========================================================== */
.stars {
  --s-whole: 0;   /* filled stars, 0 to 5 */
  --s-tenth: 0;   /* tenth of the next star, 0 to 9 */
  position: relative; display: inline-flex; flex-shrink: 0;
}
.stars-bg,
.stars-fg { display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; }
.stars-fg {
  position: absolute; top: 0; left: 0; bottom: 0; overflow: hidden;
  width: calc((var(--s-whole) * 20%) + (var(--s-tenth) * 2%));
}

/* The clip width used to be an inline style attribute, which every editor
   flags: a CSS validator reads width:{{ value }}% as a literal value and
   marks it invalid. It comes from two classes now, added together above,
   which covers every rating to one decimal place. Class values are not
   validated, so the warnings go and the geometry is unchanged. */
.sw-0 { --s-whole: 0; } .sw-1 { --s-whole: 1; } .sw-2 { --s-whole: 2; }
.sw-3 { --s-whole: 3; } .sw-4 { --s-whole: 4; } .sw-5 { --s-whole: 5; }
.st-0 { --s-tenth: 0; } .st-1 { --s-tenth: 1; } .st-2 { --s-tenth: 2; }
.st-3 { --s-tenth: 3; } .st-4 { --s-tenth: 4; } .st-5 { --s-tenth: 5; }
.st-6 { --s-tenth: 6; } .st-7 { --s-tenth: 7; } .st-8 { --s-tenth: 8; }
.st-9 { --s-tenth: 9; }
.star { width: 14px; height: 14px; flex: 0 0 auto; display: block; }
.stars-bg .star { fill: var(--border2); }
.stars-fg .star { fill: var(--gold); }
.stars-lg .star { width: 22px; height: 22px; }

/* ==========================================================
   HERO
   Two columns: the claim on the left, the evidence on the right.
   Tracking is size specific, tight on the h1 because letters read
   too far apart as they grow, near zero on body copy.
   ========================================================== */
.page-hero {
  padding: 2.5rem 2rem 3.25rem;
  background: var(--bg); position: relative; overflow: hidden;
}
.page-hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 760px 420px at 22% 30%, rgba(21,96,255,0.07) 0%, transparent 68%),
    radial-gradient(ellipse 520px 380px at 88% 70%, rgba(0,207,255,0.06) 0%, transparent 65%);
  pointer-events: none;
}
.hero-grid {
  position: relative; max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1.02fr 0.98fr;
  gap: 3rem; align-items: center;
}
.hero-copy { min-width: 0; }

.s-eyebrow {
  display: block; font-size: 12px; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 0.9rem;
}
.page-title {
  font-family: var(--display);
  font-size: clamp(2rem, 4.4vw, 3.15rem);
  font-weight: 800; letter-spacing: -0.032em;
  line-height: 1.06; color: var(--ink);
  margin: 0 0 0.8rem;
}
.page-title em:where(:not([class])) { color: var(--blue); font-style: normal; }
.page-sub {
  font-size: 16.5px; color: var(--muted); max-width: 46ch;
  margin: 0 0 1.6rem; line-height: 1.75; letter-spacing: 0;
}

/* The rating, given the weight a page named after it deserves. */
.rating-block {
  display: flex; align-items: center; gap: 1.1rem;
  padding: 1.15rem 1.35rem; margin-bottom: 1.6rem;
  background: var(--bg2); border: 1.5px solid var(--border);
  border-radius: 16px; max-width: 30rem;
}
.rating-score {
  font-family: var(--display); font-size: 2.6rem; font-weight: 800;
  line-height: 1; letter-spacing: -0.045em; color: var(--ink);
  font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.rating-detail { min-width: 0; }
.rating-meta {
  margin: 0.5rem 0 0; font-size: 13px; color: var(--muted);
  line-height: 1.55;
}
.rating-meta strong:where(:not([class])) { color: var(--ink2); font-weight: 700; }

.hero-btns { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* ==========================================================
   FEATURED REVIEW
   The first entry in the data file, lifted out of the rail so
   the page opens on a customer rather than a claim about them.
   ========================================================== */
.hero-review {
  position: relative; margin: 0;
  background: var(--bg); border: 1.5px solid var(--border);
  border-radius: 20px; padding: 1.85rem 1.75rem 1.6rem;
  box-shadow: 0 18px 44px rgba(15,23,42,0.08);
  display: flex; flex-direction: column; gap: 1.1rem;
  overflow: hidden;
}
.hero-review::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--teal));
}
.hero-quote {
  margin: 0; font-family: var(--display);
  font-size: clamp(1rem, 1.5vw, 1.15rem); font-weight: 600;
  color: var(--ink); line-height: 1.55; letter-spacing: -0.012em;
  position: relative; padding-left: 26px;
}
.hero-quote::before {
  content: '\201C'; position: absolute; left: -2px; top: -10px;
  font-size: 3rem; line-height: 1; color: var(--blue-mid);
  font-family: var(--display); font-weight: 800;
}

/* ==========================================================
   SECTION HEADINGS
   Site vocabulary. .sec-label and .sec-sublabel are gone.
   ========================================================== */
.s-title {
  font-family: var(--display); font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800; letter-spacing: -0.028em; line-height: 1.1;
  color: var(--ink); margin: 0 0 0.5rem;
}
.accent { color: var(--blue); }
.s-sub {
  font-size: 15.5px; color: var(--muted); max-width: 62ch;
  line-height: 1.75; margin: 0 0 1.75rem;
}
.s-sub a:where(:not([class])) {
  color: var(--blue); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid var(--blue-mid);
  transition: color 0.15s var(--ease-settle), border-color 0.15s var(--ease-settle);
}
@media (hover: hover) { .s-sub a:where(:not([class])):hover { color: var(--blue-dk); border-bottom-color: var(--blue-dk); } }

/* ==========================================================
   REVIEW RAIL
   A native scroll container, not a scripted transform. Native
   scrolling already gives 1:1 tracking, momentum on release and
   an interruptible flick that can be caught and reversed mid
   motion. The dots read the rail; they do not drive it.
   overscroll-behavior-x: contain stops a swipe at the end of the
   rail triggering the browser's back gesture.
   ========================================================== */
.carousel-wrap { position: relative; margin-bottom: 3rem; }

.carousel-track {
  display: flex; gap: var(--rail-gap);
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px 4px 8px;
}
.carousel-track::-webkit-scrollbar { display: none; }

/* Edge fades signal that the rail continues past the viewport. */
.carousel-wrap::before,
.carousel-wrap::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 36px;
  z-index: 2; pointer-events: none;
}
.carousel-wrap::before { left: 0; background: linear-gradient(to right, var(--bg), transparent); }
.carousel-wrap::after { right: 0; background: linear-gradient(to left, var(--bg), transparent); }

.review-card {
  flex: 0 0 calc((100% - (var(--rail-gap) * 2)) / 3);
  scroll-snap-align: start;
  background: var(--bg2); border: 1.5px solid var(--border);
  border-radius: 16px; padding: 1.6rem 1.5rem;
  display: flex; flex-direction: column; gap: 1rem;
  position: relative; overflow: hidden;
  transition:
    border-color 0.3s var(--ease-settle),
    transform 0.3s var(--ease-settle),
    box-shadow 0.3s var(--ease-settle);
}
.review-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--teal));
  opacity: 0; transition: opacity 0.2s var(--ease-settle);
}
@media (hover: hover) { .review-card:hover {
  border-color: var(--blue-mid); transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(15,23,42,0.08);
} }
@media (hover: hover) { .review-card:hover::before { opacity: 1; } }

.review-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem;
}

/* Plain uppercase. No capsule, no fill. */
.review-service {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted2);
  white-space: nowrap; text-align: right;
}

.review-quote {
  flex: 1; margin: 0; font-size: 14.5px; color: var(--ink2);
  line-height: 1.75; font-style: italic;
  position: relative; padding-left: 18px;
}
.review-quote::before {
  content: '\201C'; position: absolute; left: 0; top: -6px;
  font-size: 2.2rem; color: var(--blue-mid); line-height: 1;
  font-style: normal; font-family: var(--display);
}

.review-footer {
  display: flex; align-items: center; gap: 12px;
  border-top: 1px solid var(--border); padding-top: 1rem;
}
.review-avatar {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 13px; font-weight: 800;
  color: #fff; letter-spacing: 0.02em;
  background: linear-gradient(135deg, var(--blue), var(--blue-dk));
}
/* Version 1 set the text white and never set a fill, so the
   initials were invisible. Cycled so adjacent cards differ. */
.review-card:nth-child(5n+2) .review-avatar { background: linear-gradient(135deg, #0EA5E9, #0369A1); }
.review-card:nth-child(5n+3) .review-avatar { background: linear-gradient(135deg, var(--wa), var(--wa-dk)); }
.review-card:nth-child(5n+4) .review-avatar { background: linear-gradient(135deg, #8B5CF6, #6D28D9); }
.review-card:nth-child(5n+5) .review-avatar { background: linear-gradient(135deg, #F97316, #C2410C); }

.review-author {
  font-family: var(--display); font-size: 13px; font-weight: 700;
  color: var(--ink); line-height: 1.3;
}
.review-suburb { font-size: 12px; color: var(--muted2); font-weight: 500; margin-top: 1px; }
.review-date {
  font-size: 12px; color: var(--muted2); margin-left: auto;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}

/* ==========================================================
   RAIL DOTS
   One per page of the rail, not one per card, so the count
   follows the layout instead of contradicting it. The script
   builds .carousel-dot; version 1 styled .c-dot.
   ========================================================== */
.carousel-controls {
  display: flex; align-items: center; justify-content: center;
  margin-top: 1.4rem;
}
/* Dots: the button is the tap target (44px tall, 24px wide, per Apple's
   44pt minimum); the dot you see is drawn inside it by ::before. The
   negative margins cancel the extra height so the dots sit where they did. */
.carousel-dots { display: flex; gap: 0; align-items: center; margin: -18px 0; }
.carousel-dot {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 44px; padding: 0 4px;
  background: none; border: none; cursor: pointer;
  flex-shrink: 0; -webkit-tap-highlight-color: transparent;
}
.carousel-dot::before {
  content: ''; display: block; width: 8px; height: 8px; border-radius: 4px;
  background: var(--border2);
  transition: background 0.25s var(--ease-settle), width 0.3s var(--ease-settle);
}
@media (hover: hover) { .carousel-dot:hover::before { background: var(--muted2); } }
.carousel-dot.active::before { background: var(--blue); width: 26px; }

/* ==========================================================
   FAQ
   ========================================================== */
.faq-wrap { max-width: 1100px; margin: 0 auto 3rem; padding: 0 2rem; display: flex; flex-direction: column; gap: 10px; }

/* ==========================================================
   CTA
   .btn-blue and .btn-outline are the buttons this page actually
   uses. Version 1 styled .btn-wa, .btn-fb and .btn-pricing,
   none of which are in the markup, and left these two bare.
   ========================================================== */
.cta-bar {
  background: var(--bg2); border: 1.5px solid var(--border);
  border-radius: 20px; padding: 2.75rem; text-align: center;
  max-width: 1100px; margin: 2.5rem auto 0;
}
.cta-kicker {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--blue); margin-bottom: 0.75rem;
}
.cta-bar h2:where(:not([class])) {
  font-family: var(--display); font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 800; color: var(--ink); letter-spacing: -0.03em;
  line-height: 1.12; margin: 0 0 0.6rem;
}
.cta-bar p:where(:not([class])) {
  font-size: 15px; color: var(--muted); line-height: 1.75;
  max-width: 52ch; margin: 0 auto 1.75rem;
}
.cta-btns { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }

.btn-blue {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--blue); color: #fff; text-decoration: none;
  font-family: var(--body); font-size: 15px; font-weight: 700;
  padding: 14px 26px; border-radius: 50px; border: none; cursor: pointer;
  box-shadow: 0 4px 16px rgba(21,96,255,0.35); white-space: nowrap;
  transition:
    transform 0.2s var(--ease-settle),
    box-shadow 0.2s var(--ease-settle),
    background 0.2s var(--ease-settle);
}
@media (hover: hover) { .btn-blue:hover {
  background: var(--blue-dk); transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(21,96,255,0.45);
} }
.btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: transparent; color: var(--ink); text-decoration: none;
  font-family: var(--body); font-size: 15px; font-weight: 600;
  padding: 13px 25px; border-radius: 50px; cursor: pointer;
  border: 1.5px solid var(--border2); white-space: nowrap;
  transition:
    border-color 0.18s var(--ease-settle),
    color 0.18s var(--ease-settle),
    transform 0.2s var(--ease-settle);
}
@media (hover: hover) { .btn-outline:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-1px); } }

/* ==========================================================
   RESPONSIVE
   Shell owns the nav swap at 900px. This file no longer tries
   to run its own at 720px.
   ========================================================== */
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2rem; }
  .hero-review { max-width: 34rem; }
  .page-sub { max-width: 60ch; }
  .review-card { flex-basis: calc((100% - var(--rail-gap)) / 2); }
}

@media (max-width: 900px) {
  body { padding-top: var(--mob-nav-h); }
  .page { padding-top: 1.25rem; }
}

@media (max-width: 720px) {
  .page { padding: 1.25rem 1rem 4rem; }
  .wrap, .faq-wrap { padding: 0 1rem; }

  .page-hero { padding: 1.25rem 1rem 2.25rem; }
  .page-title { font-size: clamp(1.8rem, 7.5vw, 2.4rem); letter-spacing: -0.028em; }
  .page-sub { font-size: 15.5px; margin-bottom: 1.35rem; }

  .rating-block { gap: 0.9rem; padding: 1rem 1.1rem; border-radius: 14px; }
  .rating-score { font-size: 2.15rem; }
  .stars-lg .star { width: 19px; height: 19px; }
  .rating-meta { font-size: 12.5px; }

  .hero-btns { gap: 0.6rem; }
  .btn-blue, .btn-outline { flex: 1 1 100%; }

  .hero-review { padding: 1.5rem 1.35rem 1.35rem; border-radius: 16px; }
  .hero-quote { font-size: 1rem; padding-left: 22px; }

  /* One card per swipe, with a sliver of the next one showing so
     it is obvious the rail continues. */
  .review-card { flex-basis: 86%; padding: 1.4rem 1.25rem; }
  .carousel-wrap::before, .carousel-wrap::after { width: 20px; }
  .carousel-controls { margin-top: 1.1rem; }

  .cta-bar { padding: 1.75rem 1.25rem; border-radius: 14px; margin-top: 1.5rem; }
  .cta-btns { flex-direction: column; }
}

@media (max-width: 440px) {
  .rating-score { font-size: 1.9rem; }
  .review-card { flex-basis: 89%; }
}

/* ==========================================================
   PRESS FEEDBACK AND ACCESSIBILITY
   Feedback lands on the press, not on release.
   ========================================================== */
.review-card, .btn-blue, .btn-outline, .carousel-dot {
  -webkit-tap-highlight-color: transparent;
}
.review-card:active {
  transform: translateY(0) scale(0.99);
  box-shadow: 0 2px 6px rgba(15,23,42,0.1);
  transition: transform 0.1s var(--ease-press), box-shadow 0.1s var(--ease-press);
}
.btn-blue:active, .btn-outline:active {
  transform: scale(0.97);
  transition: transform 0.1s var(--ease-press);
}
.carousel-dot:active { transform: scale(0.8); transition: transform 0.1s var(--ease-press); }

.btn-blue:focus-visible, .btn-outline:focus-visible,
.carousel-dot:focus-visible, .carousel-track:focus-visible, .s-sub a:where(:not([class])):focus-visible {
  outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .carousel-track { scroll-behavior: auto; }
  .review-card, .btn-blue, .btn-outline, .carousel-dot { transition-duration: 0.15s; }
  .review-card:hover, .review-card:active,
  .btn-blue:hover, .btn-blue:active,
  .btn-outline:hover, .btn-outline:active,
  .carousel-dot:active { transform: none; }

}

@media (prefers-contrast: more) {
  .review-quote, .review-suburb, .review-date, .s-sub, .page-sub,
  .rating-meta { color: #334155; }
  .review-service { color: #475569; }
  .stars-bg .star { fill: #94A3B8; }
  .review-card, .cta-bar,
  .rating-block, .hero-review { border-color: #0F172A; }
  .btn-outline { border-color: #0F172A; }
  .carousel-wrap::before, .carousel-wrap::after { display: none; }
}

/* ==========================================================
   FAQ: one component, the same on every page. The homepage design,
   copied into each page stylesheet that has an FAQ (index, pricing,
   reviews, health-check, service, tech-tip, suburb, industry,
   business-it). Keep every copy identical: change one, change all.

   Markup:
     <div class="faq-item">
       <button type="button" class="faq-q" aria-expanded="false" aria-controls="faq-a-1">
         Question
         <svg viewBox="0 0 24 24" ...><polyline points="6 9 12 15 18 9"/></svg>
       </button>
       <div class="faq-a" id="faq-a-1" role="region"><p>Answer</p></div>
     </div>
   The shared handler in _includes/scripts.html opens one at a time.
   The answer opens with grid-template-rows 0fr to 1fr rather than a
   max-height, so it sizes itself to the text and can never be clipped.
   The page lays the items out (list, gap, columns); this block only
   styles an item.
   ========================================================== */
.faq-item { background:var(--bg); border:1.5px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:border-color 0.2s; }
.faq-item.open { border-color:var(--blue-mid); }
.faq-q { width:100%; background:none; border:none; text-align:left; cursor:pointer; font-family:var(--display); font-size:15px; font-weight:700; line-height:1.4; color:var(--ink); padding:1.25rem 1.5rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; transition:color 0.15s,background 0.15s; -webkit-tap-highlight-color:transparent; }
.faq-q:active { background:var(--bg2); }
.faq-q:focus-visible { outline:2px solid var(--blue); outline-offset:-2px; }
/* Rotation gets a touch of overshoot so the tap feels answered. */
.faq-q svg { width:18px; height:18px; flex-shrink:0; color:var(--blue); transition:transform 0.35s var(--ease-settle); }
.faq-item.open .faq-q svg { transform:rotate(180deg); }
.faq-a { display:grid; grid-template-rows:0fr; overflow:hidden; transition:grid-template-rows 0.4s var(--ease-settle); }
.faq-item.open .faq-a { grid-template-rows:1fr; }
.faq-a p:where(:not([class])) { min-height:0; font-size:14px; color:var(--muted); line-height:1.75; margin:0; padding:0 1.5rem; transition:padding 0.4s var(--ease-settle); }
.faq-item.open .faq-a p:where(:not([class])) { padding:0 1.5rem 1.25rem; }
.faq-a a:where(:not([class])) { color:var(--blue); font-weight:600; text-decoration:none; border-bottom:1px solid var(--blue-mid); }
.faq-a strong:where(:not([class])) { color:var(--ink); font-weight:600; }
@media (hover: hover) {
  .faq-item:hover { border-color:var(--blue-mid); }
  .faq-q:hover { color:var(--blue); }
  .faq-a a:where(:not([class])):hover { color:var(--blue-dk); border-bottom-color:var(--blue-dk); }
}
@media (max-width:720px) {
  .faq-q { font-size:14px; padding:1rem 1.25rem; }
  .faq-a p:where(:not([class])) { font-size:13.5px; padding:0 1.25rem; }
  .faq-item.open .faq-a p:where(:not([class])) { padding:0 1.25rem 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .faq-item, .faq-q, .faq-q svg, .faq-a, .faq-a p:where(:not([class])) { transition:none; }
}
@media (prefers-contrast: more) {
  .faq-a p:where(:not([class])) { color:#334155; }
  .faq-item { border-color:#0F172A; }
}

/* ==========================================================
   MOBILE STANDARD, phones (max-width: 720px)
   The same numbers on every page (tokens in :root, --m-*):
     side margin 20 | sections 48 top and bottom, hero 24 on top |
     thin bands 24 | cards and lists inside a section 24 above and
     below | cards 20 padding, 14 corners | boxes inside a
     card 16 padding, 12 corners | table-style rows 14/16 |
     gaps: 12 between cards, 10 between stacked rows |
     H1 1.7rem | H2 1.3rem with 12 below | reading text 16px |
     no sentence under 13px | buttons 48px tall, full width.
   It sits last in the file on purpose, so it wins over the older
   per-breakpoint values above it. Desktop is untouched.
   ========================================================== */
@media (max-width: 720px) {
  /* Side margin: each section is the 20px; the page wrapper adds nothing */
  .page { padding-left: 0; padding-right: 0; padding-top: var(--m-hero-top); padding-bottom: var(--m-section); }
  .page-hero, .page > .wrap, .faq-wrap { padding-left: var(--m-gutter); padding-right: var(--m-gutter); }
  .cta-bar { margin-left: var(--m-gutter); margin-right: var(--m-gutter); }

  /* Section rhythm: 48 between sections */
  .page-hero { padding-top: 0; padding-bottom: var(--m-section); }
  .carousel-wrap { margin-bottom: var(--m-section); }
  .faq-wrap { margin-bottom: var(--m-section); }
  .cta-bar { margin-top: 0; }

  /* Carousel edge to edge, first card on the 20px line */
  .carousel-track {
    margin-left: calc(-1 * var(--m-gutter)); margin-right: calc(-1 * var(--m-gutter));
    padding-left: var(--m-gutter); padding-right: var(--m-gutter);
    scroll-padding-inline: var(--m-gutter);
  }
  .carousel-track > .review-card { scroll-snap-align: start; }

  /* Cards */
  .rating-block, .hero-review, .review-card, .cta-bar { padding: var(--m-card-pad); border-radius: var(--m-card-radius); }

  /* Gaps */
  .carousel-track { gap: var(--m-gap-cards); }
  .faq-wrap { gap: var(--m-gap-rows); }

  /* Headings */
  .page-title { font-size: var(--m-h1); }
  .s-title, .cta-bar > h2 { font-size: var(--m-h2); margin-bottom: var(--m-h2-space); }

  /* Text */
  .page-sub, .s-sub, .cta-bar > p { font-size: var(--m-text); }
  .rating-meta { font-size: var(--m-text-min); }

  /* Buttons */
  .btn-blue, .btn-outline { min-height: var(--m-btn); padding-top: 0; padding-bottom: 0; width: 100%; justify-content: center; }

  /* FAQ list: 10 between questions, but the flex gap must not also sit
     under the heading and intro */
  .faq-wrap { gap: 0; }
  .faq-wrap > .s-sub { margin-bottom: var(--m-block); }
  .faq-wrap > .faq-item + .faq-item { margin-top: var(--m-gap-rows); }
  .s-title + *, .cta-bar > h2 + * { margin-top: 0; }
  .review-suburb, .review-date { font-size: var(--m-text-min); }
}