@charset "utf-8";
/* ═══ GoodWay home · section 4 · THE GAUGES ════════════════════════════════
   The shop's numbers on an instrument cluster, lit at night: the Google rating
   on a dial in the middle, and the meters either side in dark LCD windows,
   their digits on the kit's odometer wheels (tq-odo). Once, when each one
   comes into view, the needle sweeps up from 1 to the rating and the digits
   roll up from zero (Scripts/gw.sec4.js arms them with .is-armed and lets
   go); without the script, or for a visitor who asks for less motion, all
   of it is simply drawn at its value. Under the cluster, the dash's reviews
   on the kit's review cards. .tq-dark flips every role inside the section.
   Drawn by Services/HomeGauges.vb. Mobile first: the phone, then 768, 1024.
   ═════════════════════════════════════════════════════════════════════════ */

.gw-s4 {
  position: relative;
  padding-block: var(--tq-section);
  background:
    radial-gradient(70% 50% at 50% 66%, rgb(var(--tq-accent-rgb) / .09), transparent 70%),
    var(--tq-graphite-900);
  color: var(--tq-text-body);
}
.gw-s4__head { margin-block-end: var(--tq-sp-9); }
.gw-s4__head .tq-head__lead { max-inline-size: 58ch; text-wrap: pretty; }

/* ── the cluster: the dial on top, the meters under it, two by two ───────── */
.gw-s4__cluster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas: "dial dial" "l r";
  align-items: start;
  gap: var(--tq-sp-8) var(--tq-sp-5);
  padding: var(--tq-sp-8) var(--tq-sp-5) var(--tq-sp-9);
  border: 1px solid var(--tq-line);
  border-radius: 40px 40px 24px 24px / 32px 32px 24px 24px;
  background:
    radial-gradient(60% 70% at 50% 0%, rgb(var(--tq-white-rgb) / .045), transparent 70%),
    linear-gradient(180deg, var(--tq-ink-150), var(--tq-ink-100));
  box-shadow: inset 0 1px 0 rgb(var(--tq-white-rgb) / .06), 0 34px 70px -34px rgb(var(--tq-black-rgb) / .8);
}
.gw-s4__dial { grid-area: dial; }
.gw-s4__side--l { grid-area: l; }
.gw-s4__side--r { grid-area: r; }
.gw-s4__side { display: flex; flex-direction: column; gap: var(--tq-sp-7); min-inline-size: 0; }

/* no rating: the meters in one row */
.gw-s4__cluster--meters { grid-template-columns: minmax(0, 1fr); grid-template-areas: "l"; }
.gw-s4__cluster--meters .gw-s4__side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tq-sp-7) var(--tq-sp-5); }

/* the dial alone, or with one meter under it: one column at every width */
.gw-s4__cluster.gw-s4__cluster--0 { grid-template-columns: minmax(0, 1fr); grid-template-areas: "dial"; }
.gw-s4__cluster.gw-s4__cluster--1:not(.gw-s4__cluster--meters) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "dial" "l"; }
.gw-s4__cluster--0, .gw-s4__cluster--1:not(.gw-s4__cluster--meters) { max-inline-size: 36rem; margin-inline: auto; }

/* a meter: the number in a dark window, its label under it */
.gw-s4__meter { display: flex; flex-direction: column; align-items: center; gap: var(--tq-sp-3); min-inline-size: 0; text-align: center; }
.gw-s4__lcd {
  margin: 0;
  min-inline-size: 3.4em;               /* the windows all one size, as on a dash, up to "5,000+" */
  max-inline-size: 100%;
  padding: var(--tq-sp-3) var(--tq-sp-5);
  border-radius: var(--tq-r-sm);
  background: var(--tq-ink-050);
  box-shadow: inset 0 2px 9px rgb(var(--tq-black-rgb) / .85), inset 0 0 0 1px rgb(var(--tq-white-rgb) / .07);
  font-family: var(--tq-font-display);
  font-size: clamp(1.85rem, 1.35rem + 1.9vw, 2.9rem);
  font-weight: var(--tq-fw-bold);
  line-height: 1;
  letter-spacing: .02em;
  color: var(--tq-ink-950);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 18px rgb(var(--tq-accent-text-rgb) / .28);
  white-space: nowrap;
}
.gw-s4__num { display: inline-block; vertical-align: top; }
.gw-s4__label { margin: 0; font-size: var(--tq-fs-sm); line-height: 1.35; color: var(--tq-text-muted); }

/* ── the dial ─────────────────────────────────────────────────────────────── */
.gw-s4__dial { display: flex; flex-direction: column; align-items: center; gap: var(--tq-sp-4); margin: 0; min-inline-size: 0; }
.gw-s4__gauge { display: block; inline-size: min(100%, 320px); block-size: auto; overflow: visible; }
.gw-s4__track, .gw-s4__fill { fill: none; stroke-width: 9; stroke-linecap: butt; }
.gw-s4__track { stroke: rgb(var(--tq-white-rgb) / .08); }
.gw-s4__fill {
  stroke: var(--tq-accent-text);
  stroke-dasharray: 100 100;
  stroke-dashoffset: var(--o, 100);       /* the dark part of the arc, set by the page: 7.5 for a 4.7 */
  filter: drop-shadow(0 0 5px rgb(var(--tq-accent-text-rgb) / .55));
  transition: stroke-dashoffset 1.7s var(--tq-ease-out);
}
.gw-s4__ticks line { stroke: rgb(var(--tq-white-rgb) / .3); stroke-width: 1.4; stroke-linecap: round; }
.gw-s4__ticks line.is-major { stroke: rgb(var(--tq-white-rgb) / .62); stroke-width: 2.2; }
.gw-s4__marks text {
  fill: var(--tq-text-muted);
  font-family: var(--tq-font-display);
  font-size: 11px;
  font-weight: var(--tq-fw-semibold);
  text-anchor: middle;
  dominant-baseline: central;
}
.gw-s4__needle {
  transform: rotate(var(--a, 150deg));
  transform-origin: 100px 100px;
  transform-box: view-box;
  transition: transform 1.7s var(--tq-ease-out);
}
.gw-s4__needle path { fill: var(--tq-brand-500); filter: drop-shadow(0 0 4px rgb(var(--tq-accent-rgb) / .7)); }
.gw-s4__hub { fill: var(--tq-ink-300); stroke: var(--tq-ink-650); stroke-width: 1.5; }
.gw-s4__score {
  fill: var(--tq-ink-950);
  font-family: var(--tq-font-display);
  font-size: 38px;
  font-weight: var(--tq-fw-bold);
  text-anchor: middle;
  font-variant-numeric: tabular-nums;
}
.gw-s4__of { fill: var(--tq-text-muted); font-family: var(--tq-font-sans); font-size: 10px; text-anchor: middle; letter-spacing: .04em; }
.gw-s4__cap { display: flex; flex-direction: column; align-items: center; gap: var(--tq-sp-3); text-align: center; }
.gw-s4__count { font-size: var(--tq-fs-sm); color: var(--tq-text-body); }
.gw-s4__google {
  display: inline-flex;
  align-items: center;
  gap: var(--tq-sp-2);
  border-radius: var(--tq-r-xs);
  font-size: var(--tq-fs-sm);
  font-weight: var(--tq-fw-semibold);
  color: var(--tq-accent-text);
  text-decoration: none;
}
.gw-s4__google .tq-i { inline-size: 16px; block-size: 16px; }
.gw-s4__google:hover { text-decoration: underline; text-underline-offset: 3px; }
.gw-s4__google:focus-visible { outline: none; box-shadow: var(--tq-ring); }

/* armed by the script until each instrument is seen: the needle resting on 1, the arc dark, the digits
   on zero. The numbers in the page never change, so a screen reader always reads the real ones. Taking
   .is-armed off lets each instrument move to its value on its own transition. */
.gw-s4__dial.is-armed .gw-s4__needle { transform: rotate(150deg); transition: none; }
.gw-s4__dial.is-armed .gw-s4__fill { stroke-dashoffset: 100; transition: none; }
.gw-s4__meter.is-armed .tq-odo__d { transform: translateY(0); transition: none; }
@media (prefers-reduced-motion: no-preference) {
  .gw-s4__meter .tq-odo__d { transition: transform 1.5s var(--tq-ease-out); }
}
/* printed before it was ever seen: every instrument at its value */
@media print {
  .gw-s4__dial.is-armed .gw-s4__needle { transform: rotate(var(--a, 150deg)); }
  .gw-s4__dial.is-armed .gw-s4__fill { stroke-dashoffset: var(--o, 100); }
  .gw-s4__meter.is-armed .tq-odo__d { transform: translateY(calc(var(--tq-odo-v, 0) * -1em)); }
}

/* ── the reviews ──────────────────────────────────────────────────────────── */
.gw-s4__reviews { margin-block-start: var(--tq-sp-11); }
.gw-s4__rtitle { margin: 0 0 var(--tq-sp-7); }
.gw-s4__cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--tq-sp-6); }
.gw-s4__review { margin: 0; }
.gw-s4__review .tq-review__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  overflow: hidden;
}

/* ── 768 ──────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .gw-s4__cluster { gap: var(--tq-sp-9) var(--tq-sp-9); padding: var(--tq-sp-9) var(--tq-sp-10) var(--tq-sp-10); }
  .gw-s4__cluster--meters .gw-s4__side { display: flex; flex-direction: row; justify-content: space-around; }
  .gw-s4__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tq-sp-7); }
  .gw-s4__cards--1 { grid-template-columns: minmax(0, 640px); }
}

/* ── 1024: the meters either side of the dial ─────────────────────────────── */
@media (min-width: 1024px) {
  .gw-s4__cluster {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px) minmax(0, 1fr);
    grid-template-areas: "l dial r";
    align-items: center;
    padding: var(--tq-sp-10) var(--tq-sp-12);
  }
  .gw-s4__cluster--meters { grid-template-columns: minmax(0, 1fr); grid-template-areas: "l"; }
  .gw-s4__side { gap: var(--tq-sp-9); }
  .gw-s4__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gw-s4__cards--1 { grid-template-columns: minmax(0, 640px); }
  .gw-s4__cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .gw-s4__needle, .gw-s4__fill { transition: none; }
}
@media (forced-colors: active) {
  .gw-s4__cluster, .gw-s4__lcd { border: 1px solid CanvasText; }
  .gw-s4__fill { stroke: Highlight; }
  .gw-s4__needle path { fill: CanvasText; }
}