/* ---- squelch (Squelch — Two-way radios & farm comms 148) --------------------
   THE STRUCTURAL MOVE: the page is a LADDER, not a stack of cards. Every band
   below the hero is a narrow contained rung — 900px, or 620px for the plain
   statement — hung off a single hairline rule at its head, with tall empty
   gutters left and right and no tint, card or shadow anywhere. Only the hero
   and the mid-page banner touch the viewport sides. Product shots sit on the
   same bone as the page so a radio reads as a cut-out rather than a boxed
   photograph, and the amber is rationed to exactly two places: the lower-case
   eyebrow labels and the buy slabs. The catalogue is withheld — band four pulls
   ONE handset out at double width AND double height inside a three-column grid
   (a 2x2 panel plus five singles fills all nine cells exactly), and no price
   grid appears until band seven. */
body.t-squelch {
  background: #f7f6f1;
  color: #2a2c2d;
  --bg-flat: #f7f6f1;
  --surface: #f7f6f1;
  --surface-2: #efeee7;
  --line: #dcdad2;
  --line-strong: #c4c1b6;
  --heading: #17191a;
  --text: #2a2c2d;
  --muted: #6f7173;
  --header-bg: #f7f6f1;
  --radius: 0;
  --shadow: none;
}

/* the bar is opaque bone with a hairline under it — never glass over the hero */
body.t-squelch .sf-header, body.t-squelch .sf-head,
body.t-squelch .sf-footer, body.t-squelch .sf-foot, body.t-squelch .sf-cats {
  background: #f7f6f1; border-color: #dcdad2;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}

/* AMBER — a flat hi-vis slab carrying dark ink, and no border on any control */
body.t-squelch .btn.brand { border: 0; border-radius: 0; color: #1b1206; box-shadow: none; font-weight: 700; letter-spacing: 0.04em; padding: 15px 32px; }
body.t-squelch .btn.brand:hover { filter: brightness(0.9); }

/* the dawn plate: the one edge-to-edge block above the midpoint, the headline
   held to about fifteen characters so it always breaks onto two centred lines */
body.t-squelch .sc-hero { min-height: 84vh; padding: 20px; }
body.t-squelch .sc-hero h1 { font-size: clamp(34px, 5.6vw, 62px); font-weight: 600; line-height: 1.08; letter-spacing: -0.02em; max-width: 15ch; margin-left: auto; margin-right: auto; }

/* THE LADDER — every rung narrowed to 900 and ruled off at its head, so the
   whitespace lives in the gutters either side rather than between the bands.
   The column ratio in here reaches exactly one element: .sc-about-split is the
   only grid in the selector list, which is how the spec band comes out
   asymmetric while the others are untouched by it. */
body.t-squelch .sc-strip, body.t-squelch .sc-buygrid,
body.t-squelch .sc-about-split, body.t-squelch .sc-showcase > .container {
  max-width: 900px; border-top: 1px solid var(--line); padding-top: 74px;
  grid-template-columns: 5fr 7fr; gap: 46px;
}
body.t-squelch .sc-richtext { max-width: 620px; border-top: 1px solid var(--line); padding: 86px 20px 90px; }
body.t-squelch .sc-richtext p { color: var(--text); font-size: 16.5px; line-height: 1.85; }

/* the only grid in the top half: four labelled tiles welded gapless */
body.t-squelch .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-bottom: 58px; }
body.t-squelch .sc-strip-img, body.t-squelch .sc-buy-media { background: transparent; border: 0; }

/* the eyebrows: small, lower case, wide-tracked. The two catalogue ones take
   the amber from --brand; the strip label inherits graphite and stays grey. */
body.t-squelch .sc-show-cat, body.t-squelch .sc-buy-cat, body.t-squelch .sc-strip-label {
  text-transform: lowercase; letter-spacing: 0.1em; font-size: 11.5px; font-weight: 600;
}

/* BAND FOUR — one handset pulled out large with the rest set small beside it */
body.t-squelch .sc-show-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 30px; max-width: 900px; margin: 0 auto; padding: 0 20px; }
body.t-squelch .sc-show-item,
body.t-squelch .sc-show-item:nth-child(4n + 2),
body.t-squelch .sc-show-item:nth-child(4n + 3) { background: transparent; border-top: 1px solid var(--line); }
body.t-squelch .sc-show-inner { min-height: 380px; padding: 44px 26px 50px; }
body.t-squelch .sc-show-item:first-child { grid-column: span 2; grid-row: span 2; }
body.t-squelch .sc-show-item:first-child .sc-show-media img { max-width: 84%; max-height: 420px; }

/* BAND SEVEN — six priced tiles, three across, two rows that fill */
body.t-squelch .sc-buy-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 52px 34px; }

/* the hinge: the second and last thing on the page that bleeds */
body.t-squelch .sc-banner { min-height: 60vh; padding: 132px 28px; }
body.t-squelch .sc-contact-band { background: var(--surface-2); border-top: 1px solid var(--line); padding: 88px 0 96px; }

@media (max-width: 860px) {
  body.t-squelch .sc-show-grid { grid-template-columns: 1fr; padding: 0; }
  body.t-squelch .sc-show-item:first-child { grid-column: auto; grid-row: auto; }
  body.t-squelch .sc-buy-grid, body.t-squelch .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-squelch .sc-about-split { grid-template-columns: 1fr; }
}

/* NIGHT — bone goes to cold graphite, the hairlines stay hairlines so the
   ladder survives, and the amber lifts a stop because it is the only warm mark
   on the page and has to carry every control on its own. */
html[data-theme="dark"] body.t-squelch {
  background: #16171a;
  color: #c5c7c9;
  --bg-flat: #16171a;
  --surface: #16171a;
  --surface-2: #1d1f22;
  --line: #2b2d31;
  --line-strong: #3c3f44;
  --heading: #f2f2ee;
  --text: #c5c7c9;
  --muted: #8b8e91;
  --header-bg: #16171a;
}
html[data-theme="dark"] body.t-squelch .sf-header, html[data-theme="dark"] body.t-squelch .sf-head,
html[data-theme="dark"] body.t-squelch .sf-footer, html[data-theme="dark"] body.t-squelch .sf-foot,
html[data-theme="dark"] body.t-squelch .sf-cats { background: #16171a; border-color: #2b2d31; }
html[data-theme="dark"] body.t-squelch .sc-contact-band { background: #1d1f22; border-top-color: #2b2d31; }
html[data-theme="dark"] body.t-squelch .btn.brand { background: #f0a24a; color: #171104; }