/* ============================================================================
   Calibre24 — Trust band  [c24_trust_band]
   ----------------------------------------------------------------------------
   Self-contained: every selector begins with .c24tb, and each carries two
   classes so it survives inside .c24-home, whose defensive resets
   (.c24-home a, .c24-home section …) are specificity (0,1,1) and would
   otherwise win.

   THEME
     Defaults to light. Inside the dark homepage wrapper it flips automatically
     via `.c24-home .c24tb`. theme="dark" / theme="light" force it anywhere
     else. prefers-color-scheme is deliberately NOT used — the band must match
     the page it sits on, not the visitor's OS setting.
   ============================================================================ */

.c24tb{
  --tb-ground:#FFFFFF;
  --tb-card:#FBFBFA;
  --tb-line:#E3E5E1;
  --tb-ink:#0B3D2E;
  --tb-body:#3C4A43;
  --tb-mute:#6B7873;
  --tb-accent:#127749;
  --tb-star:#C6A664;
  --tb-shadow:rgba(11,61,46,.10);

  display:block;
  background:var(--tb-ground);
  border-block:1px solid var(--tb-line);
  padding-block:clamp(34px,4vw,60px);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--tb-body);
}
.c24tb,.c24tb *,.c24tb *::before,.c24tb *::after{box-sizing:border-box}

/* dark contexts */
.c24tb.c24tb--dark,
.c24-home .c24tb{
  --tb-ground:#0F1012;
  --tb-card:#17181A;
  --tb-line:#24262A;
  --tb-ink:#EDEBE7;
  --tb-body:#B9BABC;
  --tb-mute:#8E9195;
  --tb-accent:#C6A664;
  --tb-star:#C6A664;
  --tb-shadow:rgba(0,0,0,.5);
}
/* explicit light wins even inside .c24-home */
.c24tb.c24tb--light,
.c24-home .c24tb.c24tb--light{
  --tb-ground:#FFFFFF;
  --tb-card:#FBFBFA;
  --tb-line:#E3E5E1;
  --tb-ink:#0B3D2E;
  --tb-body:#3C4A43;
  --tb-mute:#6B7873;
  --tb-accent:#127749;
  --tb-star:#C6A664;
  --tb-shadow:rgba(11,61,46,.10);
}

.c24tb .c24tb__inner{
  max-width:1280px;
  margin:0 auto;
  padding-inline:clamp(18px,4.5vw,64px);
}

/* ---------- optional heading ---------- */
.c24tb .c24tb__head{text-align:center;margin-bottom:clamp(26px,3vw,40px)}
.c24tb .c24tb__eyebrow{
  margin:0 0 12px;
  font-size:10.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:var(--tb-accent);
}
.c24tb .c24tb__heading{
  margin:0;
  font-size:clamp(24px,3vw,38px);font-weight:200;letter-spacing:-.022em;
  line-height:1.12;color:var(--tb-ink);
}

/* ---------- grid ---------- */
/* Column count holds at EVERY width — six stacked cards on a phone is a
   enormous amount of vertical scroll for what is meant to be a glanceable
   reassurance strip. The cards go compact instead of going full width:
   see the small-screen block at the bottom of this file. */
.c24tb .c24tb__grid{
  display:grid;
  gap:1px;                          /* hairline seams, card-to-card */
  background:var(--tb-line);
  border:1px solid var(--tb-line);
  border-radius:4px;
  overflow:hidden;
  grid-template-columns:repeat(3,1fr);
}
.c24tb.c24tb--cols-2 .c24tb__grid{grid-template-columns:repeat(2,1fr)}
.c24tb.c24tb--cols-3 .c24tb__grid{grid-template-columns:repeat(3,1fr)}

/* ---------- card ---------- */
.c24tb .c24tb__card{
  position:relative;
  display:flex;flex-direction:column;align-items:flex-start;
  gap:6px;
  padding:clamp(22px,2.4vw,32px);
  background:var(--tb-card);
  text-decoration:none;
  color:inherit;
  min-height:100%;
  transition:background .28s ease;
}
/* A thin accent that grows on hover — the only motion in the band, so it
   reads as deliberate rather than decorative. */
.c24tb .c24tb__card::after{
  content:"";
  position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--tb-accent);
  transform:scaleX(0);transform-origin:left;
  transition:transform .4s cubic-bezier(.2,.7,.3,1);
}
.c24tb a.c24tb__card:hover{background:var(--tb-ground)}
.c24tb a.c24tb__card:hover::after{transform:scaleX(1)}

.c24tb .c24tb__icon{
  display:block;width:22px;height:22px;color:var(--tb-accent);margin-bottom:4px;
}
.c24tb .c24tb__icon svg{width:100%;height:100%;display:block;stroke-linecap:round;stroke-linejoin:round}

/* ---------- stars ---------- */
.c24tb .c24tb__stars{display:block;line-height:0;margin-bottom:6px}
.c24tb .c24tb__stars svg{display:block;width:92px;height:18.4px}
.c24tb .c24tb__star-bg{fill:var(--tb-line)}
.c24tb .c24tb__star-fg{fill:var(--tb-star)}
/* On a light card the empty-star grey is too close to the card; darken it. */
.c24tb.c24tb--light .c24tb__star-bg,
.c24tb:not(.c24tb--dark) .c24tb__star-bg{fill:#D8DCD7}
.c24tb.c24tb--dark .c24tb__star-bg,
.c24-home .c24tb .c24tb__star-bg{fill:#2E3135}

/* ---------- text ---------- */
.c24tb .c24tb__value{
  display:block;
  font-size:clamp(15px,1.25vw,18px);font-weight:500;line-height:1.3;
  letter-spacing:-.01em;color:var(--tb-ink);
}
.c24tb .c24tb__label{
  display:block;
  font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--tb-accent);
}
.c24tb .c24tb__note{
  display:block;
  font-size:13px;line-height:1.55;color:var(--tb-mute);margin-top:2px;
}

/* ---------- link affordance ---------- */
.c24tb .c24tb__go{
  position:absolute;top:clamp(20px,2.2vw,28px);right:clamp(20px,2.2vw,28px);
  font-size:14px;color:var(--tb-accent);
  opacity:0;transform:translateX(-4px);
  transition:opacity .28s ease,transform .28s ease;
}
.c24tb a.c24tb__card:hover .c24tb__go{opacity:1;transform:translateX(0)}
.c24tb a.c24tb__card:focus-visible{
  outline:2px solid var(--tb-accent);outline-offset:-3px;
}
.c24tb a.c24tb__card:focus-visible .c24tb__go{opacity:1;transform:translateX(0)}

/* ============================================================
   TABLET — 3 up still, but tighter than desktop.
   ============================================================ */
@media(max-width:900px){
  .c24tb .c24tb__card{padding:18px 14px;gap:5px}
  .c24tb .c24tb__value{font-size:14px}
  .c24tb .c24tb__note{font-size:12px;line-height:1.5}
  .c24tb .c24tb__stars svg{width:80px;height:16px}
  .c24tb .c24tb__go{display:none}
}

/* ============================================================
   MOBILE — still 3 across, in a compact centred form.

   The cards keep the grid by dropping to a glanceable unit:
   centred, smaller type, and the supporting `note` hidden. The
   note is the one piece that is genuinely optional — the rating,
   the claim and its label all survive, which is what someone
   scanning for reassurance actually reads.
   ============================================================ */
@media(max-width:599px){
  .c24tb{padding-block:clamp(24px,6vw,34px)}
  .c24tb .c24tb__inner{padding-inline:clamp(12px,3.5vw,20px)}

  .c24tb .c24tb__card{
    padding:14px 8px 15px;
    align-items:center;
    text-align:center;
    gap:3px;
    min-height:0;
  }
  .c24tb .c24tb__icon{width:17px;height:17px;margin-bottom:3px}
  .c24tb .c24tb__stars{margin-bottom:3px}
  .c24tb .c24tb__stars svg{width:54px;height:10.8px}

  .c24tb .c24tb__value{
    font-size:11.5px;line-height:1.25;letter-spacing:-.005em;
    /* balance keeps "Perth CBD private showroom" from leaving one
       orphaned word on its own line in a ~105px column */
    text-wrap:balance;
  }
  .c24tb .c24tb__label{font-size:8px;letter-spacing:.1em;line-height:1.35}
  .c24tb .c24tb__note{display:none}
  .c24tb .c24tb__go{display:none}

  .c24tb .c24tb__head{margin-bottom:18px}
  .c24tb .c24tb__heading{font-size:clamp(19px,5.2vw,24px)}
  .c24tb .c24tb__eyebrow{font-size:9.5px;letter-spacing:.2em;margin-bottom:9px}

  /* The accent underline is 2px of a 14px-tall card edge on mobile —
     too heavy at this scale. */
  .c24tb .c24tb__card::after{height:1.5px}
}

/* Very narrow phones: 3 columns of ~95px. Shave the type once more
   rather than letting words break mid-syllable. */
@media(max-width:360px){
  .c24tb .c24tb__card{padding:12px 5px 13px}
  .c24tb .c24tb__value{font-size:10.5px}
  .c24tb .c24tb__label{font-size:7.5px;letter-spacing:.08em}
  .c24tb .c24tb__stars svg{width:46px;height:9.2px}
  .c24tb .c24tb__icon{width:15px;height:15px}
}

@media(prefers-reduced-motion:reduce){
  .c24tb *{transition:none!important}
  .c24tb .c24tb__card::after{display:none}
}