@charset "utf-8";
/* ============================================================================
   TORQUE DESIGN SYSTEM
   03 · SITE — the public components: paper, graphite, one signal
   Requires: tq.fonts.css · tq.tokens.css · tq.base.css
   Optional: litepicker.tq.css (date fields)          Script: tq.site.js
   ----------------------------------------------------------------------------
   Ported from Arxeon's "Prism" (arxeon.components.css + arxeon.webforms.css):
   the same anatomy, the same class shapes, the same behaviour hooks. Prism is
   dark glass lit by a spectrum; Torque is paper and graphite marked by one
   signal colour — so every edge, fill and shadow here was redrawn, not
   recoloured.

   THE LAWS
     1  ONE SIGNAL. The shop's colour marks what you act on — the primary
        action, the selection, the focus, the price you are reading — and
        nothing decorative. Status colours carry status only.
     2  PRESS vs TYPE. Controls you press are capsules. Controls you type
        into are rectangles (--tq-r-sm). The two never swap shapes.
     3  GRAPHITE IS A PLACE. The header, the footer and any dark band carry
        .tq-dark: the roles turn inside them, so one component works on both
        grounds and there is no "inverse" variant of anything.
     4  THE LANE. The signature is a dashed centre line in the signal colour
        (--tq-grad-signature). It opens under a primary action, runs under the
        header and the active tab, joins the steps of a process and marks a
        selected card. It only moves when something is in flight.
     5  NUMBERS ARE READ-OUTS. Prices, sizes, counts and times are Barlow
        Condensed and tabular — the way a sidewall or a gauge prints them.

   CONTENTS
     01 Buttons                 13 Steps · Timeline
     02 Badges · Chips · Dots   14 Loaders · Skeleton · Progress · Topbar
     03 Icons · Cards           15 The road: strip · header · signs ·
     04 Field shell                bay door · action bar · odometer
                                16 The overpass (the footer)
     05 Text controls           17 Hero · Bands · Brands · Media · Split
     06 Choice controls         18 Tire card · Price · Stock · Stars
     07 Select                  19 Size finder
     08 Tooltip · Popover       20 Quote · Qty · Totals
     09 Modal · Drawer · Dock   21 Reviews · Hours · Contact · Map
     10 Toast · Alert · Empty   22 WebForms layer
     11 Tabs · Accordion        23 Motion · Forced colours · Print
     12 Crumbs · Pager · Seg
   ========================================================================= */


/* ── site-level roles (the tokens file stays shared with the dash) ───────── */
:root {
  --tq-star:        #F2A900;   /* rating stars — decorative: the number is always printed beside them */
  --tq-star-empty:  rgb(var(--tq-steel-rgb) / .16);
  --tq-header-h:    72px;
  --tq-actionbar-h: 0px;
}
.tq-dark {
  --tq-star-empty:  rgb(var(--tq-white-rgb) / .22);
}
/* A dark band on a paper page: .tq-dark turns the roles, this sets the ink
   so text inside inherits the band's colour, not the page's. */
body .tq-dark { color: var(--tq-text-body); }
/* an in-page jump lands below the sticky header, not under it */
[id] { scroll-margin-top: calc(var(--tq-header-h) + var(--tq-sp-6)); }


/* ═══ 01 · BUTTONS ═══════════════════════════════════════════════════════
   One capsule, seven fills. A variant only sets the knobs below; the motion
   is the same for all of them — hover lifts 1px, press settles and dips.
     primary    the signal, white ink ........ 4.69 · hover 5.21 · press 5.81
     contrast   the opposite of the ground: graphite on paper, white on a
                dark band. The confident second action.
     secondary  a paper capsule with a steel edge
     tonal      the signal as a wash, as ink .. 5.15 · hover 6.07
     ghost      text only
     danger     crimson, white ink ........... 6.16 · hover 7.41
     link       an underlined word, no capsule
   THE LANE opens under a primary action on intent — a dashed line in the
   signal colour draws out from the middle, the way a centre line runs out
   ahead of you. It is the only decoration a button carries, and an <input>
   button (asp:Button) simply goes without it.
   ===================================================================== */

.tq-btn {
  --btn-h: var(--tq-btn-h);
  --btn-px: var(--tq-sp-7);
  --btn-fill: transparent;
  --btn-fill-hi: var(--btn-fill);
  --btn-fill-press: var(--btn-fill-hi);
  --btn-ink: var(--tq-text-strong);
  --btn-ink-hi: var(--btn-ink);
  --btn-edge: transparent;
  --btn-edge-hi: var(--btn-edge);
  --btn-shadow: none;
  --btn-shadow-hi: var(--btn-shadow);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tq-sp-4);
  block-size: var(--btn-h);
  min-inline-size: 0;
  padding-inline: var(--btn-px);
  border: 1px solid var(--btn-edge);
  border-radius: var(--tq-r-full);
  background-color: var(--btn-fill);
  color: var(--btn-ink);
  box-shadow: var(--btn-shadow);
  font-family: var(--tq-font-sans);
  font-size: var(--tq-fs-sm);
  font-weight: var(--tq-fw-semibold);
  letter-spacing: .01em;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
  transition: transform var(--tq-d-fast) var(--tq-ease-out),
              box-shadow var(--tq-d-base) var(--tq-ease-out),
              background-color var(--tq-d-fast) var(--tq-ease),
              border-color var(--tq-d-fast) var(--tq-ease),
              color var(--tq-d-fast) var(--tq-ease),
              opacity var(--tq-d-fast) var(--tq-ease);
}
.tq-btn:hover {
  background-color: var(--btn-fill-hi);
  border-color: var(--btn-edge-hi);
  color: var(--btn-ink-hi);
  box-shadow: var(--btn-shadow-hi);
  transform: translateY(-1px);
}
.tq-btn:active {
  background-color: var(--btn-fill-press);
  box-shadow: var(--btn-shadow);
  transform: translateY(0) scale(.985);
  transition-duration: var(--tq-d-instant);
}
.tq-btn:focus-visible { box-shadow: var(--tq-ring); }
.tq-btn[disabled], .tq-btn[aria-disabled="true"], .tq-btn.is-disabled {
  pointer-events: none;
  opacity: .42;
  box-shadow: none;
}
.tq-btn .tq-i { inline-size: 18px; block-size: 18px; }
.tq-btn__label { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; }

/* primary — the signal */
.tq-btn--primary {
  --btn-fill: var(--tq-accent);
  --btn-fill-hi: var(--tq-accent-hi);
  --btn-fill-press: var(--tq-accent-press);
  --btn-ink: var(--tq-on-accent);
  --btn-shadow: 0 1px 2px rgb(var(--tq-steel-rgb) / .22);
  --btn-shadow-hi: 0 12px 22px -12px rgb(var(--tq-accent-rgb) / .75), 0 1px 2px rgb(var(--tq-steel-rgb) / .18);
}
.tq-btn--primary::after {
  content: "";
  position: absolute;
  inset-inline: 22%;
  inset-block-end: -8px;
  block-size: 2px;
  background: var(--tq-grad-signature);
  opacity: 0;
  transform: scaleX(.18);
  transition: transform .52s var(--tq-ease-out), opacity .3s var(--tq-ease-out);
  pointer-events: none;
}
.tq-btn--primary:hover::after,
.tq-btn--primary:focus-visible::after { opacity: 1; transform: scaleX(1); }

/* contrast — the opposite of the ground it stands on */
.tq-btn--contrast {
  --btn-fill: var(--tq-graphite-900);
  --btn-fill-hi: var(--tq-graphite-700);
  --btn-fill-press: var(--tq-graphite-800);
  --btn-ink: var(--tq-ink-950);
  --btn-shadow: 0 1px 2px rgb(var(--tq-steel-rgb) / .25);
  --btn-shadow-hi: 0 12px 22px -12px rgb(var(--tq-steel-rgb) / .6);
}
.tq-dark .tq-btn--contrast {
  --btn-fill: var(--tq-ink-950);
  --btn-fill-hi: #FFFFFF;
  --btn-fill-press: var(--tq-ink-900);
  --btn-ink: var(--tq-ink-050);
  --btn-shadow: none;
  --btn-shadow-hi: 0 12px 26px -14px rgb(var(--tq-black-rgb) / .9);
}

/* secondary — paper with a steel edge */
.tq-btn--secondary {
  --btn-fill: var(--tq-surface);
  --btn-fill-hi: var(--tq-surface);
  --btn-fill-press: var(--tq-surface-2);
  --btn-ink: var(--tq-text-strong);
  --btn-edge: var(--tq-line-strong);
  --btn-edge-hi: rgb(var(--tq-steel-rgb) / .34);
  --btn-shadow: 0 1px 2px rgb(var(--tq-steel-rgb) / .06);
  --btn-shadow-hi: 0 10px 20px -14px rgb(var(--tq-steel-rgb) / .45);
}
.tq-dark .tq-btn--secondary {
  --btn-fill: rgb(var(--tq-white-rgb) / .04);
  --btn-fill-hi: rgb(var(--tq-white-rgb) / .09);
  --btn-fill-press: rgb(var(--tq-white-rgb) / .06);
  --btn-edge: rgb(var(--tq-white-rgb) / .2);
  --btn-edge-hi: rgb(var(--tq-white-rgb) / .38);
  --btn-shadow: none;
  --btn-shadow-hi: none;
}

/* tonal — the signal as a wash */
.tq-btn--tonal {
  --btn-fill: var(--tq-brand-100);
  --btn-fill-hi: var(--tq-brand-200);
  --btn-fill-press: var(--tq-brand-200);
  --btn-ink: var(--tq-brand-700);
  --btn-ink-hi: var(--tq-brand-800);
}
.tq-dark .tq-btn--tonal {
  --btn-fill: rgb(var(--tq-accent-rgb) / .2);
  --btn-fill-hi: rgb(var(--tq-accent-rgb) / .3);
  --btn-fill-press: rgb(var(--tq-accent-rgb) / .24);
  --btn-ink: var(--tq-accent-text);
  --btn-ink-hi: #FFFFFF;
}

/* ghost — text only */
.tq-btn--ghost {
  --btn-ink: var(--tq-text-muted);
  --btn-ink-hi: var(--tq-text-strong);
  --btn-fill-hi: var(--tq-fill-2);
  --btn-fill-press: var(--tq-fill-3);
}

/* danger */
.tq-btn--danger {
  --btn-fill: var(--tq-danger-fill);
  --btn-fill-hi: var(--tq-danger-fill-hi);
  --btn-fill-press: var(--tq-danger-fill-hi);
  --btn-ink: #FFFFFF;
  --btn-shadow: 0 1px 2px rgb(var(--tq-steel-rgb) / .2);
}
.tq-btn--danger:focus-visible { box-shadow: var(--tq-ring-danger); }

/* link — a word, underlined; the one "button" with no capsule */
.tq-btn--link {
  --btn-h: auto;
  --btn-px: 0;
  --btn-ink: var(--tq-accent-text);
  border-radius: var(--tq-r-xs);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.tq-btn--link:hover { transform: none; text-decoration-thickness: 2px; }

/* sizes */
.tq-btn--sm { --btn-h: var(--tq-btn-h-sm); --btn-px: var(--tq-sp-6); font-size: var(--tq-fs-xs); gap: var(--tq-sp-3); }
.tq-btn--sm .tq-i { inline-size: 16px; block-size: 16px; }
.tq-btn--lg { --btn-h: var(--tq-btn-h-lg); --btn-px: var(--tq-sp-9); font-size: var(--tq-fs-md); }
.tq-btn--lg .tq-i { inline-size: 20px; block-size: 20px; }
.tq-btn--block { display: flex; inline-size: 100%; }
.tq-btn--icon { --btn-px: 0; inline-size: var(--btn-h); }

/* THE ARROW — a chevron at rest; on intent it grows its stem and moves
   toward where the button goes.
     <span class="tq-btn__arrow" aria-hidden="true"><svg viewBox="0 0 16 16">
       <path class="tq-btn__stem" d="M3 8h9"/><path d="M8.5 4 12.5 8l-4 4"/></svg></span> */
.tq-btn__arrow { display: inline-flex; flex: none; inline-size: 15px; block-size: 15px; margin-inline-end: -3px; }
.tq-btn__arrow svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tq-btn__arrow path { transform-box: fill-box; transition: transform .4s var(--tq-ease-out), opacity .25s var(--tq-ease-out); }
.tq-btn__arrow .tq-btn__stem { transform-origin: 0 50%; transform: scaleX(0); opacity: 0; }
.tq-btn:hover .tq-btn__arrow path,
.tq-btn:focus-visible .tq-btn__arrow path { transform: translateX(2px); }
.tq-btn:hover .tq-btn__arrow .tq-btn__stem,
.tq-btn:focus-visible .tq-btn__arrow .tq-btn__stem { transform: translateX(2px) scaleX(1); opacity: 1; }

/* a count riding on a button (the quote) */
.tq-btn__count {
  display: inline-grid;
  place-items: center;
  min-inline-size: 22px;
  block-size: 22px;
  margin-inline-end: -8px;
  padding-inline: 6px;
  border-radius: var(--tq-r-full);
  background: rgb(var(--tq-white-rgb) / .22);
  font-family: var(--tq-font-display);
  font-size: var(--tq-fs-xs);
  font-weight: var(--tq-fw-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.tq-btn__count.is-bump { animation: tq-bump var(--tq-d-slow) var(--tq-ease-out); }
@keyframes tq-bump { 0% { transform: scale(1); } 40% { transform: scale(1.28); } 100% { transform: scale(1); } }
.tq-btn--secondary .tq-btn__count,
.tq-btn--ghost .tq-btn__count { background: var(--tq-accent); color: var(--tq-on-accent); }

/* loading — the label stays in the DOM (the width holds), a ring turns */
.tq-btn.is-loading { pointer-events: none; color: transparent !important; }
.tq-btn.is-loading > * { visibility: hidden; }
.tq-btn.is-loading::before {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 18px;
  block-size: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  border: 2px solid rgb(var(--tq-steel-rgb) / .18);
  border-block-start-color: var(--btn-ink);
  animation: tq-spin .62s linear infinite;
  z-index: 3;
}
.tq-btn--primary.is-loading::before,
.tq-btn--danger.is-loading::before,
.tq-btn--contrast.is-loading::before { border-color: rgb(var(--tq-white-rgb) / .3); border-block-start-color: var(--btn-ink); }
.tq-btn.is-posting { pointer-events: none; opacity: .72; }
@keyframes tq-spin { to { transform: rotate(360deg); } }

/* group — capsule ends, square joints */
.tq-btn-group { display: inline-flex; }
.tq-btn-group .tq-btn { border-radius: 0; }
.tq-btn-group .tq-btn:first-child { border-start-start-radius: var(--tq-r-full); border-end-start-radius: var(--tq-r-full); }
.tq-btn-group .tq-btn:last-child  { border-start-end-radius: var(--tq-r-full); border-end-end-radius: var(--tq-r-full); }
.tq-btn-group .tq-btn + .tq-btn { margin-inline-start: -1px; }
.tq-btn-group .tq-btn::after { display: none; }


/* ═══ 02 · BADGES · CHIPS · DOTS ═════════════════════════════════════════
   A badge is a read-out, so it is condensed capitals. A chip is pressed, so
   it is a capsule; a selected chip wears the signal.                     */

.tq-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--tq-sp-2);
  block-size: 24px;
  padding-inline: var(--tq-sp-4);
  border-radius: var(--tq-r-xs);
  border: 1px solid var(--tq-line);
  background: var(--tq-fill-2);
  color: var(--tq-text-muted);
  font-family: var(--tq-font-display);
  font-size: var(--tq-fs-xs);
  font-weight: var(--tq-fw-semibold);
  letter-spacing: .07em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.tq-badge .tq-i { inline-size: 14px; block-size: 14px; }
.tq-badge--signal  { background: var(--tq-accent-soft); border-color: rgb(var(--tq-accent-text-rgb) / .22); color: var(--tq-accent-text); }
.tq-badge--success { background: rgb(var(--tq-success-rgb) / .09); border-color: rgb(var(--tq-success-rgb) / .24); color: var(--tq-success); }
.tq-badge--warning { background: rgb(var(--tq-warning-rgb) / .09); border-color: rgb(var(--tq-warning-rgb) / .24); color: var(--tq-warning); }
.tq-badge--danger  { background: rgb(var(--tq-danger-rgb) / .08);  border-color: rgb(var(--tq-danger-rgb) / .22);  color: var(--tq-danger); }
.tq-badge--info    { background: rgb(var(--tq-info-rgb) / .08);    border-color: rgb(var(--tq-info-rgb) / .22);    color: var(--tq-info); }
.tq-badge--solid   { background: var(--tq-graphite-900); border-color: transparent; color: var(--tq-ink-950); }
.tq-badge--sale    { background: var(--tq-accent); border-color: transparent; color: var(--tq-on-accent); }
.tq-badge--paper   { background: rgb(var(--tq-white-rgb) / .94); border-color: transparent; color: var(--tq-t-strong); box-shadow: 0 1px 2px rgb(var(--tq-steel-rgb) / .16); }
.tq-dark .tq-badge--solid { background: var(--tq-ink-950); color: var(--tq-ink-050); }

.tq-dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: currentColor; flex: none; }
.tq-dot--live { position: relative; }
.tq-dot--live::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid currentColor;
  animation: tq-ping 2s var(--tq-ease-out) infinite;
}
@keyframes tq-ping { 0% { transform: scale(.7); opacity: .9; } 80%, 100% { transform: scale(2.2); opacity: 0; } }

.tq-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--tq-sp-3);
  block-size: 36px;
  padding-inline: var(--tq-sp-6);
  border-radius: var(--tq-r-full);
  border: 1px solid var(--tq-line-strong);
  background: var(--tq-surface);
  color: var(--tq-text-body);
  font-size: var(--tq-fs-sm);
  font-weight: var(--tq-fw-medium);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--tq-t-color), border-color var(--tq-d-fast) var(--tq-ease),
              background-color var(--tq-d-fast) var(--tq-ease), transform var(--tq-d-fast) var(--tq-ease-out);
}
.tq-chip:hover { color: var(--tq-text-strong); border-color: rgb(var(--tq-steel-rgb) / .32); transform: translateY(-1px); }
.tq-chip[aria-pressed="true"], .tq-chip.is-active {
  color: var(--tq-accent-text);
  background: var(--tq-accent-soft);
  border-color: rgb(var(--tq-accent-text-rgb) / .4);
  font-weight: var(--tq-fw-semibold);
}
.tq-chip .tq-i { inline-size: 16px; block-size: 16px; }
.tq-chip__n { font-family: var(--tq-font-display); font-weight: var(--tq-fw-semibold); color: var(--tq-text-subtle); font-variant-numeric: tabular-nums; }
.tq-chip[aria-pressed="true"] .tq-chip__n, .tq-chip.is-active .tq-chip__n { color: inherit; }   /* subtle on the wash measured 4.46 */
.tq-chip__x {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 18px;
  block-size: 18px;
  margin-inline-end: -6px;
  border-radius: 50%;
  background: var(--tq-fill-3);
  color: inherit;
  transition: background var(--tq-d-fast) var(--tq-ease), color var(--tq-d-fast) var(--tq-ease);
}
.tq-chip__x::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; }   /* 28px target */
.tq-chip__x:hover { background: var(--tq-danger-fill); color: #FFFFFF; }
.tq-chip__x svg { inline-size: 10px; block-size: 10px; }
.tq-dark .tq-chip { background: rgb(var(--tq-white-rgb) / .04); border-color: rgb(var(--tq-white-rgb) / .16); }
.tq-dark .tq-chip:hover { border-color: rgb(var(--tq-white-rgb) / .32); }
.tq-dark .tq-chip[aria-pressed="true"], .tq-dark .tq-chip.is-active { background: rgb(var(--tq-accent-rgb) / .2); border-color: rgb(var(--tq-accent-text-rgb) / .5); }

kbd, .tq-kbd {
  display: inline-block;
  min-inline-size: 22px;
  padding: 3px 6px;
  border-radius: var(--tq-r-xs);
  border: 1px solid var(--tq-line-strong);
  border-block-end-width: 2px;
  background: var(--tq-surface);
  color: var(--tq-text-muted);
  font-family: var(--tq-font-display);
  font-size: var(--tq-fs-xs);
  font-weight: var(--tq-fw-semibold);
  line-height: 1.1;
  text-align: center;
}


/* ═══ 03 · ICONS · CARDS ═════════════════════════════════════════════════
   Icons are Heroicons (v2.2.0, MIT), outline, from one inline sprite:
     <svg class="tq-i"><use href="#tqi-phone"/></svg>
   They take currentColor, so an icon is always the colour of its text.   */

.tq-i { display: inline-block; flex: none; inline-size: 20px; block-size: 20px; vertical-align: -.2em; }
.tq-i--sm { inline-size: 16px; block-size: 16px; }
.tq-i--lg { inline-size: 24px; block-size: 24px; }
.tq-i--xl { inline-size: 32px; block-size: 32px; }

/* the icon tile — a service, a feature, an empty state */
.tq-tile {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 48px;
  block-size: 48px;
  border-radius: var(--tq-r-md);
  background: var(--tq-accent-soft);
  color: var(--tq-accent-text);
  transition: var(--tq-t-lift), background-color var(--tq-d-base) var(--tq-ease);
}
.tq-tile .tq-i { inline-size: 24px; block-size: 24px; }
.tq-tile--steel { background: var(--tq-fill-2); color: var(--tq-text-strong); }
.tq-dark .tq-tile { background: rgb(var(--tq-accent-rgb) / .18); }

.tq-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  border-radius: var(--tq-r-lg);
  border: 1px solid var(--tq-line);
  background: var(--tq-surface);
  box-shadow: var(--tq-el-1);
  transition: var(--tq-t-lift), border-color var(--tq-d-base) var(--tq-ease);
}
.tq-card__body { display: flex; flex-direction: column; gap: var(--tq-sp-4); padding: var(--tq-sp-8); flex: 1 1 auto; min-inline-size: 0; }
.tq-card__media {
  position: relative;
  overflow: hidden;
  border-start-start-radius: inherit;
  border-start-end-radius: inherit;
  background: var(--tq-bg-sunken);
  aspect-ratio: 16 / 10;
}
.tq-card__media > img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--tq-d-slower) var(--tq-ease-out); }
.tq-card__eyebrow { margin-block-end: var(--tq-sp-2); }
.tq-card__title { margin: 0; font-size: var(--tq-fs-lg); font-weight: var(--tq-fw-semibold); line-height: 1.3; letter-spacing: var(--tq-tr-lead); color: var(--tq-text-strong); }
.tq-card__title a { color: inherit; text-decoration: none; }
.tq-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }   /* the whole card is the target */
.tq-card__text { margin: 0; font-size: var(--tq-fs-sm); line-height: 1.6; color: var(--tq-text-muted); }
.tq-card__foot {
  display: flex;
  align-items: center;
  gap: var(--tq-sp-5);
  margin-block-start: auto;
  padding-block-start: var(--tq-sp-6);
  border-block-start: 1px solid var(--tq-line-soft);
}
.tq-card--flat { box-shadow: none; background: var(--tq-surface-2); }
.tq-card--sm .tq-card__body { padding: var(--tq-sp-6); }
.tq-card--lg .tq-card__body { padding: var(--tq-sp-11); }
.tq-card--interactive { cursor: pointer; }
.tq-card--interactive:hover { transform: translateY(-3px); box-shadow: var(--tq-el-3); border-color: var(--tq-line-strong); }
.tq-card--interactive:hover .tq-card__media > img { transform: scale(1.04); }
.tq-card--interactive:hover .tq-tile { transform: translateY(-2px); }
.tq-card--interactive:focus-within { box-shadow: var(--tq-el-3), var(--tq-ring); }
.tq-card--interactive :focus-visible { box-shadow: none; }
/* selected: the lane along the top edge */
.tq-card.is-selected, .tq-card[aria-selected="true"] { border-color: rgb(var(--tq-accent-text-rgb) / .45); }
.tq-card.is-selected::before, .tq-card[aria-selected="true"]::before {
  content: "";
  position: absolute;
  inset-inline: var(--tq-sp-8);
  inset-block-start: -1px;
  block-size: 3px;
  background: var(--tq-grad-signature);
  pointer-events: none;
}
.tq-dark .tq-card { background: var(--tq-surface); border-color: var(--tq-line); }

/* a feature or service card: tile, title, text, a "from" price */
.tq-feature { gap: var(--tq-sp-5); }
.tq-feature .tq-tile { margin-block-end: var(--tq-sp-2); }
.tq-feature__from {
  display: flex;
  align-items: baseline;
  gap: var(--tq-sp-3);
  margin-block-start: auto;
  padding-block-start: var(--tq-sp-4);
  font-size: var(--tq-fs-xs);
  color: var(--tq-text-subtle);
}
.tq-feature__from b {
  font-family: var(--tq-font-display);
  font-size: var(--tq-fs-xl);
  font-weight: var(--tq-fw-bold);
  font-variant-numeric: tabular-nums;
  color: var(--tq-text-strong);
  letter-spacing: .01em;
}

/* the panel — a plain raised surface for anything that is not a card */
.tq-panel {
  border-radius: var(--tq-r-lg);
  border: 1px solid var(--tq-line);
  background: var(--tq-surface);
  box-shadow: var(--tq-el-2);
  padding: var(--tq-sp-8);
}
.tq-panel--sunken { background: var(--tq-bg-sunken); box-shadow: none; border-color: transparent; }
.tq-divider { block-size: 1px; border: 0; background: var(--tq-line); margin-block: var(--tq-sp-8); }
.tq-divider--lane { block-size: 2px; background: var(--tq-grad-signature); opacity: .8; }


/* ═══ 04 · FIELD SHELL ═══════════════════════════════════════════════════ */

.tq-field { display: flex; flex-direction: column; gap: var(--tq-sp-3); min-inline-size: 0; }
.tq-field--row { flex-direction: row; align-items: center; gap: var(--tq-sp-5); }
.tq-label {
  display: flex;
  align-items: baseline;
  gap: var(--tq-sp-3);
  font-size: var(--tq-fs-sm);
  font-weight: var(--tq-fw-semibold);
  line-height: 1.3;
  color: var(--tq-text-body);
  transition: color var(--tq-d-fast) var(--tq-ease);
}
.tq-field:focus-within > .tq-label { color: var(--tq-accent-text); }
.tq-label__req { color: var(--tq-danger); font-weight: var(--tq-fw-bold); }
.tq-label__opt { margin-inline-start: auto; font-size: var(--tq-fs-xs); font-weight: var(--tq-fw-regular); color: var(--tq-text-subtle); }
.tq-help { display: flex; align-items: flex-start; gap: var(--tq-sp-3); margin: 0; font-size: var(--tq-fs-xs); line-height: 1.5; color: var(--tq-text-subtle); }
.tq-error {
  display: flex;
  align-items: flex-start;
  gap: var(--tq-sp-3);
  margin: 0;
  font-size: var(--tq-fs-xs);
  font-weight: var(--tq-fw-medium);
  line-height: 1.5;
  color: var(--tq-danger);
  animation: tq-slip var(--tq-d-base) var(--tq-ease-out);
}
.tq-error .tq-i, .tq-help .tq-i { inline-size: 16px; block-size: 16px; margin-block-start: 1px; }
@keyframes tq-slip { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.tq-fieldset { display: grid; gap: var(--tq-sp-7); border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.tq-fieldset > legend { margin-block-end: var(--tq-sp-5); font-size: var(--tq-fs-md); font-weight: var(--tq-fw-semibold); color: var(--tq-text-strong); }
.tq-form-grid { display: grid; gap: var(--tq-sp-7) var(--tq-sp-6); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tq-form-grid > .is-wide { grid-column: 1 / -1; }
@media (max-width: 639px) { .tq-form-grid { grid-template-columns: minmax(0, 1fr); } }


/* ═══ 05 · TEXT CONTROLS ═════════════════════════════════════════════════
   A rectangle of paper with a steel edge. Focus turns the edge to the signal
   and lays a soft halo of it around the field — the field is where the
   visitor is, so it is lit. 16px type: iOS never zooms a field this size. */

.tq-input, .tq-textarea, .tq-select__trigger, .tq-native-select {
  position: relative;
  display: block;
  inline-size: 100%;
  min-inline-size: 0;
  block-size: var(--tq-control-h);
  padding-inline: var(--tq-sp-6);
  border: 1px solid var(--tq-line-strong);
  border-radius: var(--tq-r-sm);
  background-color: var(--tq-surface);
  color: var(--tq-text-strong);
  font-family: inherit;
  font-size: var(--tq-fs-md);
  line-height: 1.35;
  box-shadow: inset 0 1px 2px rgb(var(--tq-steel-rgb) / .04);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--tq-d-fast) var(--tq-ease),
              box-shadow var(--tq-d-base) var(--tq-ease-out),
              background-color var(--tq-d-base) var(--tq-ease),
              color var(--tq-d-fast) var(--tq-ease);
}
.tq-textarea {
  block-size: auto;
  min-block-size: 120px;
  padding-block: var(--tq-sp-5);
  line-height: var(--tq-lh-body);
  resize: vertical;
}
.tq-input::placeholder, .tq-textarea::placeholder { color: var(--tq-text-subtle); opacity: 1; }
.tq-input:hover, .tq-textarea:hover, .tq-select__trigger:hover, .tq-native-select:hover { border-color: rgb(var(--tq-steel-rgb) / .34); }
.tq-input:focus, .tq-textarea:focus, .tq-native-select:focus,
.tq-select__trigger:focus-visible, .tq-select.is-open .tq-select__trigger {
  outline: none;
  border-color: var(--tq-accent);
  box-shadow: 0 0 0 4px rgb(var(--tq-accent-rgb) / .14);
}
.tq-input:disabled, .tq-textarea:disabled, .tq-native-select:disabled, .tq-select__trigger:disabled {
  color: var(--tq-text-disabled);
  background-color: var(--tq-bg-sunken);
  border-color: var(--tq-line);
  box-shadow: none;
  cursor: not-allowed;
}
.tq-input[readonly] { background-color: var(--tq-surface-2); color: var(--tq-text-muted); }
.tq-input[readonly][data-tq-date] { background-color: var(--tq-surface); color: var(--tq-text-strong); }   /* read-only only so a phone keeps its keyboard away */
.tq-input--lg, .tq-select--lg .tq-select__trigger { block-size: var(--tq-control-h-lg); font-size: var(--tq-fs-lg); padding-inline: var(--tq-sp-7); border-radius: var(--tq-r-md); }
.tq-input--sm, .tq-select--sm .tq-select__trigger { block-size: var(--tq-control-h-sm); font-size: var(--tq-fs-sm); padding-inline: var(--tq-sp-5); }
.tq-input--num { font-family: var(--tq-font-display); font-weight: var(--tq-fw-semibold); letter-spacing: .02em; font-variant-numeric: tabular-nums; }

/* invalid / valid */
.tq-input.is-invalid, .tq-textarea.is-invalid, .tq-input[aria-invalid="true"], .tq-textarea[aria-invalid="true"],
.tq-select.is-invalid .tq-select__trigger {
  border-color: var(--tq-danger);
  box-shadow: 0 0 0 4px rgb(var(--tq-danger-rgb) / .1);
}
.tq-input.is-valid, .tq-textarea.is-valid { border-color: rgb(var(--tq-success-rgb) / .6); }

/* on a dark band */
.tq-dark .tq-input, .tq-dark .tq-textarea, .tq-dark .tq-select__trigger, .tq-dark .tq-native-select {
  background-color: rgb(var(--tq-white-rgb) / .045);
  border-color: rgb(var(--tq-white-rgb) / .16);
  box-shadow: none;
}
.tq-dark .tq-input:hover, .tq-dark .tq-textarea:hover, .tq-dark .tq-select__trigger:hover { border-color: rgb(var(--tq-white-rgb) / .3); }
.tq-dark .tq-input:focus, .tq-dark .tq-textarea:focus, .tq-dark .tq-select.is-open .tq-select__trigger,
.tq-dark .tq-select__trigger:focus-visible {
  border-color: var(--tq-accent-text);
  box-shadow: 0 0 0 4px rgb(var(--tq-accent-rgb) / .24);
}

/* addons — an icon at the start, a control at the end */
.tq-input-wrap { position: relative; display: block; min-inline-size: 0; }
.tq-input-wrap--icon .tq-input { padding-inline-start: 44px; }
.tq-input-wrap--suffix .tq-input { padding-inline-end: 48px; }
.tq-input-affix {
  position: absolute;
  inset-block: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  inline-size: 44px;
  color: var(--tq-text-subtle);
  pointer-events: none;
  transition: color var(--tq-d-fast) var(--tq-ease);
}
.tq-input-affix .tq-i { inline-size: 18px; block-size: 18px; }
.tq-input-affix--start { inset-inline-start: 0; }
.tq-input-affix--end { inset-inline-end: 2px; pointer-events: auto; }
.tq-input-wrap:focus-within .tq-input-affix--start { color: var(--tq-accent-text); }
.tq-input-affix--end button {
  display: grid;
  place-items: center;
  inline-size: 38px;
  block-size: 38px;
  border-radius: var(--tq-r-xs);
  color: var(--tq-text-subtle);
  transition: var(--tq-t-color), background-color var(--tq-d-fast) var(--tq-ease);
}
.tq-input-affix--end button:hover { color: var(--tq-text-strong); background: var(--tq-fill-2); }
.tq-input-affix--end button.is-on { color: var(--tq-accent-text); }

/* THE COMBO — a field with its action docked inside it: search, subscribe.
   The field is still a rectangle; the button inside it is still a capsule. */
.tq-combo {
  display: flex;
  align-items: center;
  gap: var(--tq-sp-3);
  min-inline-size: 0;
  block-size: var(--tq-control-h-lg);
  padding: 5px 5px 5px var(--tq-sp-6);
  border: 1px solid var(--tq-line-strong);
  border-radius: var(--tq-r-md);
  background: var(--tq-surface);
  transition: border-color var(--tq-d-fast) var(--tq-ease), box-shadow var(--tq-d-base) var(--tq-ease-out);
}
.tq-combo:hover { border-color: rgb(var(--tq-steel-rgb) / .34); }
.tq-combo:focus-within { border-color: var(--tq-accent); box-shadow: 0 0 0 4px rgb(var(--tq-accent-rgb) / .14); }
.tq-combo > .tq-i { color: var(--tq-text-subtle); }
.tq-combo:focus-within > .tq-i { color: var(--tq-accent-text); }
.tq-combo__input {
  flex: 1 1 auto;
  min-inline-size: 0;
  block-size: 100%;
  border: 0;
  background: transparent;
  color: var(--tq-text-strong);
  font: inherit;
  font-size: var(--tq-fs-md);
}
.tq-combo__input::placeholder { color: var(--tq-text-subtle); opacity: 1; }
.tq-combo__input:focus, .tq-combo__input:focus-visible { outline: none; box-shadow: none; }
.tq-combo > .tq-btn { flex: none; block-size: 100%; }
.tq-combo > .tq-btn::after { display: none; }
.tq-dark .tq-combo { background: rgb(var(--tq-white-rgb) / .045); border-color: rgb(var(--tq-white-rgb) / .16); }
.tq-dark .tq-combo:focus-within { border-color: var(--tq-accent-text); box-shadow: 0 0 0 4px rgb(var(--tq-accent-rgb) / .24); }

/* floating label */
.tq-float { position: relative; display: block; min-inline-size: 0; }
.tq-float > .tq-input, .tq-float > .tq-textarea { padding-block-start: 22px; padding-block-end: 6px; }
.tq-float > .tq-input { block-size: 58px; }
.tq-float > .tq-textarea { min-block-size: 128px; }
.tq-float > label {
  position: absolute;
  inset-inline-start: calc(var(--tq-sp-6) + 1px);
  inset-block-start: 18px;
  z-index: 2;
  font-size: var(--tq-fs-md);
  color: var(--tq-text-subtle);
  pointer-events: none;
  transform-origin: 0 0;
  transition: transform var(--tq-d-base) var(--tq-ease-out), color var(--tq-d-base) var(--tq-ease);
}
.tq-float > .tq-input:focus + label,
.tq-float > .tq-input:not(:placeholder-shown) + label,
.tq-float > .tq-textarea:focus + label,
.tq-float > .tq-textarea:not(:placeholder-shown) + label { transform: translateY(-10px) scale(.76); color: var(--tq-accent-text); }
.tq-float > .tq-input:not(:focus):not(:placeholder-shown) + label,
.tq-float > .tq-textarea:not(:focus):not(:placeholder-shown) + label { color: var(--tq-text-subtle); }

/* counter · password strength */
.tq-counter { margin-inline-start: auto; font-family: var(--tq-font-display); font-size: var(--tq-fs-xs); font-weight: var(--tq-fw-medium); letter-spacing: .03em; font-variant-numeric: tabular-nums; color: var(--tq-text-subtle); }
.tq-counter.is-over { color: var(--tq-danger); }
.tq-strength { display: flex; gap: 4px; margin-block-start: var(--tq-sp-3); }
.tq-strength__seg { flex: 1; block-size: 4px; border-radius: 2px; background: var(--tq-fill-3); transition: background var(--tq-d-slow) var(--tq-ease-out); }
.tq-strength[data-score="1"] .tq-strength__seg:nth-child(-n+1) { background: var(--tq-danger); }
.tq-strength[data-score="2"] .tq-strength__seg:nth-child(-n+2) { background: var(--tq-warning); }
.tq-strength[data-score="3"] .tq-strength__seg:nth-child(-n+3) { background: var(--tq-info); }
.tq-strength[data-score="4"] .tq-strength__seg { background: var(--tq-success); }

/* a date field (LitePicker, data-tq-date) looks like any field, with a calendar at the end */
.tq-input[data-tq-date] {
  padding-inline-end: 44px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236A6D73' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px 18px;
}


/* ═══ 06 · CHOICE CONTROLS ═══════════════════════════════════════════════
   The native input stays in the DOM (focusable, postback-safe); the box is
   drawn. The check is a real stroke that DRAWS on a spring, it does not
   fade; a checked box is the signal.                                     */

.tq-check {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  gap: var(--tq-sp-5);
  min-block-size: 24px;
  font-size: var(--tq-fs-md);
  line-height: 1.4;
  color: var(--tq-text-body);
  cursor: pointer;
  user-select: none;
  transition: color var(--tq-d-fast) var(--tq-ease);
}
.tq-check:hover { color: var(--tq-text-strong); }
.tq-check input { position: absolute; inline-size: 22px; block-size: 22px; margin: 0; opacity: 0; cursor: pointer; }
.tq-check__box {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 22px;
  block-size: 22px;
  margin-block-start: 0;
  border: 1.5px solid rgb(var(--tq-steel-rgb) / .36);
  border-radius: var(--tq-r-xs);
  background: var(--tq-surface);
  overflow: hidden;
  transition: background-color var(--tq-d-base) var(--tq-ease),
              border-color var(--tq-d-fast) var(--tq-ease),
              transform var(--tq-d-slow) var(--tq-ease-spring),
              box-shadow var(--tq-d-base) var(--tq-ease);
}
.tq-check:hover .tq-check__box { border-color: rgb(var(--tq-steel-rgb) / .56); }
.tq-check__box svg { position: relative; z-index: 2; inline-size: 14px; block-size: 14px; color: var(--tq-on-accent); }
.tq-check__box svg path { stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset var(--tq-d-slow) var(--tq-ease-out) 40ms; }
.tq-check input:checked ~ .tq-check__box,
.tq-check input:indeterminate ~ .tq-check__box { background: var(--tq-accent); border-color: var(--tq-accent); transform: scale(1.05); }
.tq-check input:checked ~ .tq-check__box svg path { stroke-dashoffset: 0; }
.tq-check input:indeterminate ~ .tq-check__box::after { content: ""; position: absolute; z-index: 2; inline-size: 10px; block-size: 2px; border-radius: 1px; background: var(--tq-on-accent); }
.tq-check input:focus-visible ~ .tq-check__box { box-shadow: var(--tq-ring); }
.tq-check input:disabled ~ .tq-check__box { opacity: .45; }
.tq-check:has(input:disabled) { cursor: not-allowed; color: var(--tq-text-disabled); }
.tq-check__text small { display: block; margin-block-start: 2px; font-size: var(--tq-fs-xs); color: var(--tq-text-subtle); }
.tq-dark .tq-check__box { background: rgb(var(--tq-white-rgb) / .05); border-color: rgb(var(--tq-white-rgb) / .3); }

/* radio */
.tq-radio .tq-check__box { border-radius: 50%; }
.tq-radio .tq-check__box::after {
  content: "";
  position: relative;
  z-index: 2;
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--tq-on-accent);
  transform: scale(0);
  transition: transform var(--tq-d-slow) var(--tq-ease-spring) 40ms;
}
.tq-radio input:checked ~ .tq-check__box { transform: none; }
.tq-radio input:checked ~ .tq-check__box::after { transform: scale(1); }

/* a choice card — the radio or checkbox wrapped in a panel */
.tq-choice {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--tq-sp-5);
  padding: var(--tq-sp-6);
  border: 1px solid var(--tq-line-strong);
  border-radius: var(--tq-r-md);
  background: var(--tq-surface);
  cursor: pointer;
  transition: border-color var(--tq-d-fast) var(--tq-ease), box-shadow var(--tq-d-base) var(--tq-ease-out),
              background-color var(--tq-d-base) var(--tq-ease), transform var(--tq-d-fast) var(--tq-ease-out);
}
.tq-choice:hover { border-color: rgb(var(--tq-steel-rgb) / .34); transform: translateY(-1px); }
.tq-choice:has(input:checked) {
  border-color: var(--tq-accent);
  background: var(--tq-brand-50);
  box-shadow: 0 0 0 1px var(--tq-accent), 0 10px 24px -16px rgb(var(--tq-accent-rgb) / .7);
}
.tq-choice:has(input:focus-visible) { box-shadow: var(--tq-ring); }
.tq-choice__main { flex: 1 1 auto; min-inline-size: 0; }
.tq-choice__title { display: block; font-weight: var(--tq-fw-semibold); color: var(--tq-text-strong); }
.tq-choice__text { display: block; margin-block-start: 2px; font-size: var(--tq-fs-sm); color: var(--tq-text-muted); }
.tq-choice__aside { font-family: var(--tq-font-display); font-weight: var(--tq-fw-bold); font-size: var(--tq-fs-lg); color: var(--tq-text-strong); font-variant-numeric: tabular-nums; }

/* switch */
.tq-switch { position: relative; display: inline-flex; align-items: center; gap: var(--tq-sp-5); font-size: var(--tq-fs-md); color: var(--tq-text-body); cursor: pointer; user-select: none; }
.tq-switch input { position: absolute; inline-size: 46px; block-size: 26px; margin: 0; opacity: 0; cursor: pointer; }
.tq-switch__track {
  position: relative;
  flex: none;
  inline-size: 46px;
  block-size: 26px;
  border-radius: var(--tq-r-full);
  background: rgb(var(--tq-steel-rgb) / .2);
  transition: background-color var(--tq-d-base) var(--tq-ease);
}
.tq-switch__track::after {
  content: "";
  position: absolute;
  inset-block-start: 3px;
  inset-inline-start: 3px;
  inline-size: 20px;
  block-size: 20px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgb(var(--tq-steel-rgb) / .35);
  transition: transform var(--tq-d-slow) var(--tq-ease-spring), inline-size var(--tq-d-fast) var(--tq-ease);
}
.tq-switch input:checked ~ .tq-switch__track { background: var(--tq-accent); }
.tq-switch input:checked ~ .tq-switch__track::after { transform: translateX(20px); }
.tq-switch:active .tq-switch__track::after { inline-size: 25px; }
.tq-switch input:checked:active ~ .tq-switch__track::after { transform: translateX(15px); }
.tq-switch input:focus-visible ~ .tq-switch__track { box-shadow: var(--tq-ring); }
.tq-switch input:disabled ~ .tq-switch__track { opacity: .4; }
.tq-switch__note { display: block; margin-block-start: 2px; font-size: var(--tq-fs-xs); color: var(--tq-text-subtle); }
.tq-dark .tq-switch__track { background: rgb(var(--tq-white-rgb) / .18); }


/* ═══ 07 · SELECT ════════════════════════════════════════════════════════
   A real <select> stays in the DOM (an asp:DropDownList still posts back,
   AutoPostBack still fires); this listbox is layered over it by tq.site.js.
   The panel drops 6px and settles; no skew, no blur — that was Prism's
   30-degree axis, and this system travels on the road's straight line.  */

.tq-select { position: relative; display: block; min-inline-size: 0; }
.tq-select__native {
  position: absolute;
  inset: 0;
  z-index: -1;
  inline-size: 100%;
  block-size: 100%;
  opacity: 0;
  pointer-events: none;
}
.tq-select__trigger {
  display: flex;
  align-items: center;
  gap: var(--tq-sp-5);
  text-align: start;
  cursor: pointer;
}
.tq-select__value { flex: 1 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tq-select__value.is-placeholder { color: var(--tq-text-subtle); }
.tq-select__caret {
  flex: none;
  inline-size: 16px;
  block-size: 16px;
  color: var(--tq-text-subtle);
  transition: transform var(--tq-d-slow) var(--tq-ease-out), color var(--tq-d-fast) var(--tq-ease);
}
.tq-select__caret svg { display: block; inline-size: 100%; block-size: 100%; }
.tq-select.is-open .tq-select__caret { transform: rotate(180deg); color: var(--tq-accent-text); }
.tq-select__panel {
  position: absolute;
  inset-inline: 0;
  inset-block-start: calc(100% + 6px);
  z-index: var(--tq-z-popover);
  padding: 6px;
  border: 1px solid var(--tq-line);
  border-radius: var(--tq-r-md);
  background: var(--tq-overlay);
  box-shadow: var(--tq-el-4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(.985);
  transform-origin: 50% 0;
  transition: opacity var(--tq-d-base) var(--tq-ease-out),
              transform var(--tq-d-slow) var(--tq-ease-out),
              visibility 0s linear var(--tq-d-slow);
}
.tq-select.is-open .tq-select__panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.tq-select.is-up .tq-select__panel { inset-block-start: auto; inset-block-end: calc(100% + 6px); transform-origin: 50% 100%; transform: translateY(6px) scale(.985); }
.tq-select.is-up.is-open .tq-select__panel { transform: none; }
.tq-select__search {
  inline-size: 100%;
  block-size: 40px;
  margin-block-end: 6px;
  padding-inline: var(--tq-sp-5);
  border: 0;
  border-block-end: 1px solid var(--tq-line);
  border-radius: var(--tq-r-xs) var(--tq-r-xs) 0 0;
  background: transparent;
  color: var(--tq-text-strong);
  font: inherit;
  font-size: var(--tq-fs-md);
}
.tq-select__search:focus, .tq-select__search:focus-visible { outline: none; box-shadow: 0 1px 0 0 var(--tq-accent); border-block-end-color: var(--tq-accent); border-radius: var(--tq-r-xs) var(--tq-r-xs) 0 0; }
.tq-select__list { max-block-size: 280px; margin: 0; padding: 0; overflow-y: auto; list-style: none; overscroll-behavior: contain; }
.tq-select__group {
  padding: var(--tq-sp-5) var(--tq-sp-5) var(--tq-sp-3);
  font-family: var(--tq-font-display);
  font-size: var(--tq-fs-xs);
  font-weight: var(--tq-fw-semibold);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tq-text-subtle);
}
.tq-select__opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--tq-sp-5);
  min-block-size: 42px;
  padding: var(--tq-sp-3) var(--tq-sp-5) var(--tq-sp-3) var(--tq-sp-6);
  border-radius: var(--tq-r-xs);
  font-size: var(--tq-fs-md);
  color: var(--tq-text-body);
  cursor: pointer;
  transition: background-color var(--tq-d-instant) var(--tq-ease), color var(--tq-d-instant) var(--tq-ease);
}
.tq-select__opt::before {               /* the signal rail on the active row */
  content: "";
  position: absolute;
  inset-block: 9px;
  inset-inline-start: 4px;
  inline-size: 3px;
  border-radius: 2px;
  background: var(--tq-accent);
  transform: scaleY(0);
  transition: transform var(--tq-d-base) var(--tq-ease-out);
}
.tq-select__opt.is-active { background: var(--tq-fill-2); color: var(--tq-text-strong); }
.tq-select__opt.is-active::before { transform: scaleY(1); }
.tq-select__opt[aria-selected="true"] { color: var(--tq-accent-text); font-weight: var(--tq-fw-semibold); }
.tq-select__opt[aria-selected="true"]::after {
  content: "";
  flex: none;
  inline-size: 13px;
  block-size: 7px;
  margin-inline-start: auto;
  border-inline-start: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(-45deg) translate(1px, -2px);
}
.tq-select__opt.is-blank, .tq-select__opt.is-blank[aria-selected="true"] { color: var(--tq-text-subtle); font-weight: var(--tq-fw-regular); }
.tq-select__opt.is-blank::after { display: none; }
.tq-select__opt[aria-disabled="true"] { color: var(--tq-text-disabled); cursor: not-allowed; }
.tq-select__opt small { display: block; font-size: var(--tq-fs-xs); color: var(--tq-text-subtle); }
.tq-select__empty { padding: var(--tq-sp-7); text-align: center; font-size: var(--tq-fs-sm); color: var(--tq-text-subtle); }

/* the native fallback — a raw asp:DropDownList is never ugly. The caret is
   the FIRST background layer, or the fill beneath it would paint over it. */
.tq-native-select {
  padding-inline-end: 42px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%236A6D73' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
}
.tq-native-select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23B83217' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.tq-dark .tq-native-select option { background: #191C20; color: #E7E9EB; }


/* ═══ 08 · TOOLTIP · POPOVER ═════════════════════════════════════════════
   Placement is measured by tq.site.js (flip, shift, arrow on the anchor).
   The tooltip is a small piece of graphite on the paper.                 */

.tq-tip {
  position: fixed;
  z-index: var(--tq-z-tooltip);
  max-inline-size: 272px;
  padding: var(--tq-sp-4) var(--tq-sp-5);
  border-radius: var(--tq-r-sm);
  background: var(--tq-graphite-900);
  color: var(--tq-ink-950);
  font-size: var(--tq-fs-sm);
  font-weight: var(--tq-fw-medium);
  line-height: 1.45;
  box-shadow: var(--tq-el-3);
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, var(--tq-tip-from-y, 4px), 0) scale(.97);
  transition: opacity var(--tq-d-fast) var(--tq-ease-out), transform var(--tq-d-base) var(--tq-ease-out);
  text-wrap: pretty;
}
.tq-tip.is-in { opacity: 1; transform: none; }
.tq-tip__arrow { position: absolute; inline-size: 8px; block-size: 8px; border-radius: 1px; background: inherit; transform: rotate(45deg); }
.tq-tip--rich { max-inline-size: 320px; padding: var(--tq-sp-6); }
.tq-tip--rich b { display: block; margin-block-end: 2px; color: #FFFFFF; font-size: var(--tq-fs-md); }
.tq-tip__body .tq-mute { color: var(--tq-ink-700); }

.tq-popover {
  position: fixed;
  z-index: var(--tq-z-popover);
  min-inline-size: 220px;
  max-inline-size: 360px;
  padding: var(--tq-sp-6);
  border: 1px solid var(--tq-line);
  border-radius: var(--tq-r-md);
  background: var(--tq-overlay);
  box-shadow: var(--tq-el-4);
  opacity: 0;
  transform: translate3d(0, 6px, 0) scale(.985);
  transition: opacity var(--tq-d-base) var(--tq-ease-out), transform var(--tq-d-slow) var(--tq-ease-out);
}
.tq-popover.is-in { opacity: 1; transform: none; }


/* ═══ 09 · MODAL · DRAWER ════════════════════════════════════════════════
   One engine (tq.site.js, Torque.modal) opens both. A modal is centred on a
   wide screen and becomes a BOTTOM SHEET on a phone — where the thumb is.
   A drawer comes in from the right edge and is the whole screen on a phone.
     <button data-tq-open="quote">…</button>
     <div class="tq-modal" id="quote" hidden aria-labelledby="quote-t">…</div>
     [data-tq-close] anywhere inside closes it.                           */

.tq-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--tq-z-backdrop);
  background: rgb(var(--tq-steel-rgb) / .52);
  -webkit-backdrop-filter: blur(4px) saturate(110%);
  backdrop-filter: blur(4px) saturate(110%);
  opacity: 0;
  transition: opacity var(--tq-d-base) var(--tq-ease);
}
.tq-backdrop.is-in { opacity: 1; }

.tq-modal {
  position: fixed;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  z-index: var(--tq-z-modal);
  display: flex;
  flex-direction: column;
  inline-size: min(560px, calc(100vw - 32px));
  max-block-size: min(90svh, 920px);
  border: 1px solid var(--tq-line);
  border-radius: var(--tq-r-xl);
  background: var(--tq-overlay);
  color: var(--tq-text-body);
  box-shadow: var(--tq-el-5);
  overflow: hidden;
  opacity: 0;
  transform: translate(-50%, -47%) scale(.97);
  transition: opacity var(--tq-d-base) var(--tq-ease-out), transform var(--tq-d-slow) var(--tq-ease-out);
}
.tq-modal.is-in { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.tq-modal--lg { inline-size: min(820px, calc(100vw - 32px)); }
.tq-modal--xl { inline-size: min(1080px, calc(100vw - 32px)); }
.tq-modal__head {
  display: flex;
  align-items: flex-start;
  gap: var(--tq-sp-6);
  padding: var(--tq-sp-8) var(--tq-sp-8) var(--tq-sp-6);
}
.tq-modal__title { margin: 0; font-size: var(--tq-fs-xl); font-weight: var(--tq-fw-bold); line-height: 1.25; letter-spacing: var(--tq-tr-lead); color: var(--tq-text-strong); }
.tq-modal__sub { margin: var(--tq-sp-2) 0 0; font-size: var(--tq-fs-sm); color: var(--tq-text-muted); }
.tq-modal__body { flex: 1 1 auto; min-block-size: 0; padding: 0 var(--tq-sp-8) var(--tq-sp-8); overflow-y: auto; overscroll-behavior: contain; }
.tq-modal__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--tq-sp-5);
  padding: var(--tq-sp-6) var(--tq-sp-8);
  border-block-start: 1px solid var(--tq-line);
  background: var(--tq-surface-2);
}
.tq-modal__foot .tq-btn--primary::after { display: none; }   /* the lane would fall off the sheet's edge */
.tq-x {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 40px;
  block-size: 40px;
  margin: -6px -8px 0 auto;
  border-radius: var(--tq-r-full);
  color: var(--tq-text-subtle);
  transition: var(--tq-t-color), background-color var(--tq-d-fast) var(--tq-ease), transform var(--tq-d-base) var(--tq-ease-out);
}
.tq-x:hover { background: var(--tq-fill-2); color: var(--tq-text-strong); transform: rotate(90deg); }
.tq-x .tq-i { inline-size: 20px; block-size: 20px; }

@media (max-width: 639px) {
  .tq-modal, .tq-modal--lg, .tq-modal--xl {
    inset-block: auto 0;
    inset-inline: 0;
    inline-size: 100%;
    max-block-size: 94svh;
    border-radius: var(--tq-r-xl) var(--tq-r-xl) 0 0;
    border-block-end: 0;
    transform: translateY(104%);
    padding-block-end: env(safe-area-inset-bottom, 0px);
  }
  .tq-modal.is-in { transform: none; }
  .tq-modal::before {                     /* the grab handle */
    content: "";
    position: absolute;
    inset-block-start: 8px;
    inset-inline-start: 50%;
    inline-size: 40px;
    block-size: 4px;
    margin-inline-start: -20px;
    border-radius: 2px;
    background: rgb(var(--tq-steel-rgb) / .2);
  }
  .tq-modal__head { padding: var(--tq-sp-9) var(--tq-sp-6) var(--tq-sp-5); }
  .tq-modal__body { padding: 0 var(--tq-sp-6) var(--tq-sp-7); }
  .tq-modal__foot { flex-direction: column-reverse; align-items: stretch; padding: var(--tq-sp-5) var(--tq-sp-6); }
  .tq-modal__foot .tq-btn { inline-size: 100%; }
}

.tq-drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: var(--tq-z-modal);
  display: flex;
  flex-direction: column;
  inline-size: min(460px, 100vw);
  background: var(--tq-overlay);
  color: var(--tq-text-body);
  border-inline-start: 1px solid var(--tq-line);
  box-shadow: var(--tq-el-5);
  transform: translateX(104%);
  transition: transform var(--tq-d-slow) var(--tq-ease-out);
}
.tq-drawer.is-in { transform: none; }
.tq-drawer--wide { inline-size: min(560px, 100vw); }
.tq-drawer .tq-modal__head { border-block-end: 1px solid var(--tq-line); padding-block-end: var(--tq-sp-6); }
.tq-drawer .tq-modal__body { padding-block-start: var(--tq-sp-7); }
.tq-drawer .tq-modal__foot { padding-block-end: calc(var(--tq-sp-6) + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 639px) {                /* a drawer's foot keeps its row: the total beside the action */
  .tq-drawer .tq-modal__foot { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .tq-drawer .tq-modal__foot .tq-btn { inline-size: auto; flex: 1 1 auto; }
}


/* THE DOCK — a drawer that answers to the hidden attribute alone, for a
   page whose own script opens and closes it (the shop's quote on a
   WebForms page). The root IS the scrim, so a click on the root is a click
   outside the panel; the panel comes in from the right edge and is the
   whole screen on a phone.
     <div class="tq-dock" id="…" hidden role="dialog" aria-modal="true">
       <div class="tq-dock__panel"> head · body </div></div>               */
.tq-dock {
  position: fixed;
  inset: 0;
  z-index: var(--tq-z-modal);
  display: flex;
  justify-content: flex-end;
  background: rgb(var(--tq-steel-rgb) / .52);
  -webkit-backdrop-filter: blur(4px) saturate(110%);
  backdrop-filter: blur(4px) saturate(110%);
  overscroll-behavior: contain;
  animation: tq-fade-in var(--tq-d-base) var(--tq-ease) both;
}
.tq-dock[hidden] { display: none; }
.tq-dock__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  inline-size: min(580px, 100vw);
  block-size: 100%;
  background: var(--tq-overlay);
  color: var(--tq-text-body);
  line-height: var(--tq-lh-body);
  box-shadow: var(--tq-el-5);
  animation: tq-dock-in var(--tq-d-slow) var(--tq-ease-out) both;
}
@keyframes tq-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes tq-dock-in { from { transform: translateX(48px); opacity: 0; } to { transform: none; opacity: 1; } }
/* the head is a piece of the road: graphite, with the lane under it */
.tq-dock__head {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--tq-sp-6);
  flex: none;
  padding: var(--tq-sp-8) var(--tq-sp-8) var(--tq-sp-7);
  background: var(--tq-graphite-900);
}
.tq-dock__head::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: -1px; block-size: 2px; background: var(--tq-grad-signature); opacity: .5; }
.tq-dock__head .tq-modal__title { display: flex; align-items: center; gap: var(--tq-sp-4); font-family: var(--tq-font-display); font-size: var(--tq-fs-2xl); letter-spacing: .04em; text-transform: uppercase; }
.tq-dock__head .tq-modal__title .tq-i { color: var(--tq-accent-text); }
.tq-dock__body { flex: 1 1 auto; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--tq-sp-8) var(--tq-sp-8) 0; }
.tq-dock__send {
  position: sticky;
  inset-block-end: 0;
  z-index: 1;
  margin-inline: calc(var(--tq-sp-8) * -1);
  margin-block-start: var(--tq-sp-7);
  padding: var(--tq-sp-6) var(--tq-sp-8) calc(var(--tq-sp-6) + env(safe-area-inset-bottom, 0px));
  border-block-start: 1px solid var(--tq-line);
  background: var(--tq-surface-2);
}
.tq-dock__send .tq-btn { inline-size: 100%; }
.tq-dock__send .tq-btn::after { display: none; }
@media (max-width: 639px) {
  .tq-dock__panel { inline-size: 100vw; }
  .tq-dock__head { padding: var(--tq-sp-7) var(--tq-sp-6) var(--tq-sp-6); }
  .tq-dock__body { padding: var(--tq-sp-7) var(--tq-sp-6) 0; }
  .tq-dock__send { margin-inline: calc(var(--tq-sp-6) * -1); padding-inline: var(--tq-sp-6); }
}
@media (prefers-reduced-motion: reduce) { .tq-dock, .tq-dock__panel { animation: none; } }
/* the shop's quote inside a dock: its line template and its totals */
a.tq-qline__name { display: block; color: var(--tq-text-strong); text-decoration: none; }
a.tq-qline__name:hover { color: var(--tq-accent-text); }
.tq-qline__ph { display: grid; place-items: center; color: var(--tq-text-disabled); }
.tq-qline__ph .tq-i { inline-size: 26px; block-size: 26px; }
.tq-qline .tq-qty { block-size: 34px; }
.tq-qline .tq-qty button { inline-size: 32px; block-size: 32px; }
.tq-totals__row { display: contents; }
.tq-dock__form { margin-block-start: var(--tq-sp-9); }
.tq-dock .tq-fieldset + .tq-fieldset, .tq-dock .tq-totals { margin-block-start: var(--tq-sp-8); }
.tq-dock .tq-sent__note { margin: 0; max-inline-size: 40ch; font-size: var(--tq-fs-sm); color: var(--tq-text-muted); }
/* round 16: the lines under the tires come from the shop's install price list (Quote.ashx); while an
   answer is on its way the amounts dim, and a promotion the cart is short of shows under the total */
.tq-totals dd { transition: opacity var(--tq-d-fast) var(--tq-ease); }
.tq-totals[aria-busy="true"] dd { opacity: .45; }
.tq-dock .tq-qnudge { margin-block-start: var(--tq-sp-6); }


/* ═══ 10 · TOAST · ALERT · EMPTY ═════════════════════════════════════════
   A toast is a piece of graphite (tq.site.js gives it .tq-dark), so it reads
   on any page and its status colours are the dark set. On a phone it rises
   above the action bar, never under it.                                  */

.tq-toast-region {
  position: fixed;
  inset-block-end: calc(var(--tq-sp-8) + var(--tq-actionbar-h));
  inset-inline-end: var(--tq-sp-8);
  z-index: var(--tq-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--tq-sp-4);
  max-inline-size: min(400px, calc(100vw - 32px));
  pointer-events: none;
}
@media (max-width: 639px) {
  .tq-toast-region { inset-inline: var(--tq-sp-5); inset-block-end: calc(var(--tq-sp-5) + var(--tq-actionbar-h)); max-inline-size: none; }
}
.tq-toast {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--tq-sp-5);
  padding: var(--tq-sp-6) var(--tq-sp-7) var(--tq-sp-6) var(--tq-sp-6);
  border: 1px solid rgb(var(--tq-white-rgb) / .08);
  border-radius: var(--tq-r-md);
  background: var(--tq-graphite-900);
  color: var(--tq-ink-800);
  box-shadow: 0 22px 48px -18px rgb(var(--tq-steel-rgb) / .55), 0 2px 6px rgb(var(--tq-steel-rgb) / .2);
  pointer-events: auto;
  overflow: hidden;
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px) scale(.97);
  transition: opacity var(--tq-d-base) var(--tq-ease-out), transform var(--tq-d-slow) var(--tq-ease-out), margin var(--tq-d-slow) var(--tq-ease-out);
}
.tq-toast.is-in { opacity: 1; transform: none; }
.tq-toast.is-out { opacity: 0; transform: translateX(24px) scale(.97); margin-block-end: -72px; }
.tq-toast__icon { flex: none; inline-size: 20px; block-size: 20px; margin-block-start: 1px; color: var(--tq-accent-text); }
.tq-toast__icon svg { display: block; inline-size: 100%; block-size: 100%; }
.tq-toast__body { flex: 1 1 auto; min-inline-size: 0; }
.tq-toast__title { font-size: var(--tq-fs-md); font-weight: var(--tq-fw-semibold); color: var(--tq-ink-950); line-height: 1.35; }
.tq-toast__msg { margin-block-start: 2px; font-size: var(--tq-fs-sm); line-height: 1.5; color: var(--tq-ink-700); }
.tq-toast__action {
  align-self: center;
  flex: none;
  padding: 6px 12px;
  border-radius: var(--tq-r-full);
  background: rgb(var(--tq-white-rgb) / .1);
  color: #FFFFFF;
  font-size: var(--tq-fs-sm);
  font-weight: var(--tq-fw-semibold);
  transition: background-color var(--tq-d-fast) var(--tq-ease);
}
.tq-toast__action:hover { background: rgb(var(--tq-white-rgb) / .18); }
.tq-toast__bar {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 2px;
  background: currentColor;
  color: var(--tq-accent-text);
  transform-origin: 0 50%;
  animation: tq-toast-bar var(--tq-toast-life, 4600ms) linear forwards;
}
.tq-toast:hover .tq-toast__bar { animation-play-state: paused; }
@keyframes tq-toast-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.tq-toast--success .tq-toast__icon, .tq-toast--success .tq-toast__bar { color: var(--tq-success); }
.tq-toast--warning .tq-toast__icon, .tq-toast--warning .tq-toast__bar { color: var(--tq-warning); }
.tq-toast--danger  .tq-toast__icon, .tq-toast--danger  .tq-toast__bar { color: var(--tq-danger); }
.tq-toast--info    .tq-toast__icon, .tq-toast--info    .tq-toast__bar { color: var(--tq-info); }

.tq-alert {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--tq-sp-5);
  padding: var(--tq-sp-6) var(--tq-sp-7);
  border: 1px solid var(--tq-line);
  border-radius: var(--tq-r-md);
  background: var(--tq-surface-2);
  color: var(--tq-text-muted);
  font-size: var(--tq-fs-sm);
  line-height: 1.55;
  overflow: hidden;
}
.tq-alert::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 3px; background: currentColor; }
.tq-alert__icon { flex: none; inline-size: 20px; block-size: 20px; margin-block-start: 1px; }
.tq-alert__text { flex: 1 1 auto; min-inline-size: 0; color: var(--tq-text-body); }
.tq-alert__text b { color: var(--tq-text-strong); }
.tq-alert--info    { color: var(--tq-info);    background: rgb(var(--tq-info-rgb) / .06);    border-color: rgb(var(--tq-info-rgb) / .2); }
.tq-alert--success { color: var(--tq-success); background: rgb(var(--tq-success-rgb) / .06); border-color: rgb(var(--tq-success-rgb) / .22); }
.tq-alert--warning { color: var(--tq-warning); background: rgb(var(--tq-warning-rgb) / .07); border-color: rgb(var(--tq-warning-rgb) / .24); }
.tq-alert--danger  { color: var(--tq-danger);  background: rgb(var(--tq-danger-rgb) / .05);  border-color: rgb(var(--tq-danger-rgb) / .2); }
.tq-alert--signal  { color: var(--tq-accent-text); background: var(--tq-brand-50); border-color: rgb(var(--tq-accent-text-rgb) / .2); }

.tq-empty { display: grid; place-items: center; gap: var(--tq-sp-5); padding: var(--tq-sp-13) var(--tq-sp-8); text-align: center; }
.tq-empty .tq-tile { inline-size: 64px; block-size: 64px; border-radius: var(--tq-r-lg); }
.tq-empty .tq-tile .tq-i { inline-size: 30px; block-size: 30px; }
.tq-empty__title { margin: 0; font-size: var(--tq-fs-lg); font-weight: var(--tq-fw-semibold); color: var(--tq-text-strong); }
.tq-empty__msg { margin: 0; max-inline-size: 44ch; font-size: var(--tq-fs-sm); color: var(--tq-text-muted); }


/* ═══ 11 · TABS · ACCORDION ══════════════════════════════════════════════ */

.tq-tabs {
  position: relative;
  display: flex;
  gap: var(--tq-sp-2);
  border-block-end: 1px solid var(--tq-line);
  overflow-x: auto;
  scrollbar-width: none;
}
.tq-tabs::-webkit-scrollbar { display: none; }
.tq-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--tq-sp-3);
  min-block-size: 48px;
  padding: var(--tq-sp-4) var(--tq-sp-6);
  font-size: var(--tq-fs-md);
  font-weight: var(--tq-fw-medium);
  color: var(--tq-text-muted);
  white-space: nowrap;
  transition: color var(--tq-d-fast) var(--tq-ease);
}
.tq-tab:hover { color: var(--tq-text-strong); }
.tq-tab[aria-selected="true"] { color: var(--tq-text-strong); font-weight: var(--tq-fw-semibold); }
.tq-tab .tq-i { inline-size: 18px; block-size: 18px; }
.tq-tabs__ink {                    /* the lane, under the active tab */
  position: absolute;
  inset-block-end: -1px;
  inset-inline-start: 0;
  block-size: 3px;
  background: var(--tq-grad-signature);
  transition: transform var(--tq-d-slow) var(--tq-ease-out), inline-size var(--tq-d-slow) var(--tq-ease-out);
  pointer-events: none;
}
.tq-tabpanel { padding-block-start: var(--tq-sp-8); }
.tq-tabpanel[hidden] { display: none; }
.tq-tabpanel.is-in { animation: tq-fade-up var(--tq-d-slow) var(--tq-ease-out); }
@keyframes tq-fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* the accordion — the FAQ. Height rides grid-template-rows 0fr → 1fr: no
   measuring, so nested content and late fonts never fight it. */
.tq-accordion { border-block-start: 1px solid var(--tq-line); }
.tq-acc { border-block-end: 1px solid var(--tq-line); }
.tq-acc__btn {
  display: flex;
  align-items: center;
  gap: var(--tq-sp-6);
  inline-size: 100%;
  min-block-size: 64px;
  padding: var(--tq-sp-6) var(--tq-sp-2);
  text-align: start;
  font-size: var(--tq-fs-lg);
  font-weight: var(--tq-fw-semibold);
  line-height: 1.35;
  color: var(--tq-text-strong);
  transition: color var(--tq-d-fast) var(--tq-ease);
}
.tq-acc__btn:hover { color: var(--tq-accent-text); }
.tq-acc__btn[aria-expanded="true"] { color: var(--tq-accent-text); }
.tq-acc__sign {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 32px;
  block-size: 32px;
  margin-inline-start: auto;
  border-radius: 50%;
  background: var(--tq-fill-2);
  color: var(--tq-text-strong);
  transition: background-color var(--tq-d-base) var(--tq-ease), color var(--tq-d-base) var(--tq-ease);
}
.tq-acc__sign::before, .tq-acc__sign::after {
  content: "";
  position: absolute;
  inline-size: 12px;
  block-size: 2px;
  border-radius: 1px;
  background: currentColor;
  transition: transform var(--tq-d-slow) var(--tq-ease-out);
}
.tq-acc__sign::after { transform: rotate(90deg); }
.tq-acc__btn[aria-expanded="true"] .tq-acc__sign { background: var(--tq-accent); color: var(--tq-on-accent); }
.tq-acc__btn[aria-expanded="true"] .tq-acc__sign::after { transform: rotate(0deg); }
.tq-acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--tq-d-slow) var(--tq-ease-out); }
.tq-acc__panel[data-open="true"] { grid-template-rows: 1fr; }
.tq-acc__inner { overflow: hidden; }
.tq-acc__inner > div { max-inline-size: 72ch; padding: 0 var(--tq-sp-2) var(--tq-sp-8); font-size: var(--tq-fs-md); line-height: 1.65; color: var(--tq-text-body); }
.tq-acc__inner p + p { margin-block-start: var(--tq-sp-5); }


/* ═══ 12 · CRUMBS · PAGER · SEGMENTED ════════════════════════════════════ */

.tq-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tq-sp-3); margin: 0; padding: 0; list-style: none; font-size: var(--tq-fs-sm); color: var(--tq-text-subtle); }
.tq-crumbs a { display: inline-flex; align-items: center; min-block-size: 28px; color: var(--tq-text-muted); text-decoration: none; transition: var(--tq-t-color); }
.tq-crumbs a:hover { color: var(--tq-accent-text); }
.tq-crumbs__sep { inline-size: 14px; block-size: 14px; opacity: .55; }
.tq-crumbs [aria-current="page"] { color: var(--tq-text-strong); font-weight: var(--tq-fw-medium); }

.tq-pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tq-sp-2); }
.tq-pager a, .tq-pager button, .tq-pager span {
  display: grid;
  place-items: center;
  min-inline-size: 42px;
  block-size: 42px;
  padding-inline: var(--tq-sp-4);
  border-radius: var(--tq-r-full);
  font-family: var(--tq-font-display);
  font-size: var(--tq-fs-md);
  font-weight: var(--tq-fw-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--tq-text-muted);
  text-decoration: none;
  transition: var(--tq-t-color), background-color var(--tq-d-fast) var(--tq-ease);
}
.tq-pager a:hover, .tq-pager button:hover { background: var(--tq-fill-2); color: var(--tq-text-strong); }
.tq-pager [aria-current="page"] { background: var(--tq-accent); color: var(--tq-on-accent); }
.tq-pager [aria-disabled="true"] { opacity: .4; pointer-events: none; }
.tq-pager .tq-i { inline-size: 18px; block-size: 18px; }

/* segmented — a capsule track with a sliding paper thumb */
.tq-seg {
  position: relative;
  display: inline-flex;
  max-inline-size: 100%;
  padding: 4px;
  gap: 2px;
  align-self: flex-start;               /* in a column it keeps its own width; .tq-seg--block fills */
  border-radius: var(--tq-r-full);
  background: var(--tq-fill-2);
  box-shadow: inset 0 1px 2px rgb(var(--tq-steel-rgb) / .06);
}
.tq-seg__thumb {
  position: absolute;
  inset-block: 4px;
  inset-inline-start: 0;
  z-index: 0;
  border-radius: var(--tq-r-full);
  background: var(--tq-surface);
  box-shadow: 0 1px 3px rgb(var(--tq-steel-rgb) / .16), 0 0 0 1px rgb(var(--tq-steel-rgb) / .05);
  transition: transform var(--tq-d-slow) var(--tq-ease-out), inline-size var(--tq-d-slow) var(--tq-ease-out);
  pointer-events: none;
}
.tq-seg button {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tq-sp-3);
  block-size: 38px;
  min-inline-size: 0;
  padding-inline: var(--tq-sp-6);
  border-radius: var(--tq-r-full);
  font-size: var(--tq-fs-sm);
  font-weight: var(--tq-fw-semibold);
  color: var(--tq-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--tq-d-fast) var(--tq-ease);
}
.tq-seg button:hover { color: var(--tq-text-strong); }
.tq-seg button[aria-selected="true"], .tq-seg button.is-active { color: var(--tq-text-strong); }
.tq-seg button .tq-i { inline-size: 18px; block-size: 18px; }
.tq-seg--block { display: flex; align-self: stretch; }
.tq-seg--block button { flex: 1 1 0; }
@media (max-width: 479px) { .tq-seg button { padding-inline: var(--tq-sp-4); } }
.tq-dark .tq-seg { background: rgb(var(--tq-white-rgb) / .06); }
.tq-dark .tq-seg__thumb { background: rgb(var(--tq-white-rgb) / .14); box-shadow: none; }


/* ═══ 13 · STEPS · TIMELINE ══════════════════════════════════════════════
   THE ROUTE — how it works. Numbered stops joined by the lane: the dashes
   run between the markers across on a wide screen, down on a narrow one. */

.tq-route { display: grid; grid-template-columns: repeat(var(--tq-route-n, 4), minmax(0, 1fr)); gap: var(--tq-sp-8); margin: 0; padding: 0; list-style: none; counter-reset: tq-route; }
.tq-route__stop { position: relative; display: flex; flex-direction: column; gap: var(--tq-sp-4); min-inline-size: 0; counter-increment: tq-route; }
.tq-route__mark {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  inline-size: 52px;
  block-size: 52px;
  margin-block-end: var(--tq-sp-4);
  border-radius: 50%;
  background: var(--tq-graphite-900);
  color: #FFFFFF;
  font-family: var(--tq-font-display);
  font-size: var(--tq-fs-xl);
  font-weight: var(--tq-fw-bold);
  box-shadow: 0 0 0 6px var(--tq-route-ground, var(--tq-bg));
}
.tq-route__mark::before { content: counter(tq-route, decimal-leading-zero); }
.tq-route__stop:last-child .tq-route__mark { background: var(--tq-accent); }
.tq-route__stop:not(:last-child)::after {       /* the lane to the next stop */
  content: "";
  position: absolute;
  inset-block-start: 25px;
  inset-inline-start: 64px;
  inset-inline-end: calc(-1 * var(--tq-sp-8) + 12px);
  block-size: 2px;
  background: var(--tq-grad-signature);
  opacity: .9;
}
.tq-route__title { margin: 0; font-size: var(--tq-fs-lg); font-weight: var(--tq-fw-semibold); color: var(--tq-text-strong); }
.tq-route__text { margin: 0; font-size: var(--tq-fs-sm); line-height: 1.6; color: var(--tq-text-muted); }
@media (max-width: 767px) {
  .tq-route { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .tq-route__stop { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: var(--tq-sp-6); row-gap: var(--tq-sp-2); padding-block-end: var(--tq-sp-9); }
  .tq-route__stop:last-child { padding-block-end: 0; }
  .tq-route__mark { grid-row: 1 / span 2; margin: 0; }
  .tq-route__title { align-self: end; padding-block-start: var(--tq-sp-3); }
  .tq-route__stop:not(:last-child)::after {
    inset-block-start: 64px;
    inset-block-end: 10px;
    inset-inline-start: 25px;
    inset-inline-end: auto;
    inline-size: 2px;
    block-size: auto;
    background: repeating-linear-gradient(180deg, rgb(var(--tq-accent-text-rgb)) 0 9px, transparent 9px 14px);
  }
}

/* progress steps — for a form in stages */
.tq-steps { display: flex; gap: var(--tq-sp-2); margin: 0; padding: 0; list-style: none; }
.tq-step { display: flex; flex: 1 1 0; flex-direction: column; gap: var(--tq-sp-3); min-inline-size: 0; }
.tq-step__bar { position: relative; block-size: 4px; border-radius: 2px; background: var(--tq-fill-3); overflow: hidden; }
.tq-step__bar::after { content: ""; position: absolute; inset: 0; background: var(--tq-accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--tq-d-slower) var(--tq-ease-out); }
.tq-step.is-done .tq-step__bar::after { transform: scaleX(1); }
.tq-step.is-current .tq-step__bar::after { transform: scaleX(.5); }
.tq-step__label { display: flex; align-items: center; gap: var(--tq-sp-3); font-size: var(--tq-fs-xs); color: var(--tq-text-subtle); }
.tq-step.is-current .tq-step__label, .tq-step.is-done .tq-step__label { color: var(--tq-text-body); }
.tq-step__n { font-family: var(--tq-font-display); font-weight: var(--tq-fw-bold); color: var(--tq-accent-text); }

/* timeline — a quote's story, newest last */
/* :is(ul, ol) lifts the rule over tq.base.css's list reset (ul[class] { padding: 0 }) */
:is(ul, ol).tq-timeline, .tq-timeline { position: relative; margin: 0; padding: 0 0 0 var(--tq-sp-9); list-style: none; }
.tq-timeline::before { content: ""; position: absolute; inset-block: 8px; inset-inline-start: 6px; inline-size: 2px; background: repeating-linear-gradient(180deg, var(--tq-line-strong) 0 6px, transparent 6px 10px); }
.tq-tl-item { position: relative; padding-block-end: var(--tq-sp-8); }
.tq-tl-item:last-child { padding-block-end: 0; }
.tq-tl-item::before {
  content: "";
  position: absolute;
  inset-block-start: 5px;
  inset-inline-start: calc(-1 * var(--tq-sp-9) + 1px);
  inline-size: 12px;
  block-size: 12px;
  border-radius: 50%;
  background: var(--tq-surface);
  border: 2px solid rgb(var(--tq-steel-rgb) / .36);
}
.tq-tl-item.is-done::before { background: var(--tq-graphite-900); border-color: var(--tq-graphite-900); }
.tq-tl-item.is-now::before { background: var(--tq-accent); border-color: var(--tq-accent); box-shadow: 0 0 0 4px rgb(var(--tq-accent-rgb) / .18); }
.tq-tl-item__when { font-family: var(--tq-font-display); font-size: var(--tq-fs-xs); font-weight: var(--tq-fw-semibold); letter-spacing: .06em; text-transform: uppercase; color: var(--tq-text-subtle); }
.tq-tl-item__title { margin: 2px 0 0; font-size: var(--tq-fs-md); font-weight: var(--tq-fw-semibold); color: var(--tq-text-strong); }
.tq-tl-item__text { margin: 2px 0 0; font-size: var(--tq-fs-sm); color: var(--tq-text-muted); }


/* ═══ 14 · LOADERS · SKELETON · PROGRESS · TOPBAR ════════════════════════
   THE ONE PLACE THE LANE MOVES: while something is in flight, the dashes
   run — the road going by under you. At rest, they never move.           */

.tq-spinner {
  display: inline-block;
  flex: none;
  inline-size: 28px;
  block-size: 28px;
  border-radius: 50%;
  border: 2.5px solid var(--tq-fill-3);
  border-block-start-color: var(--tq-accent);
  animation: tq-spin .7s linear infinite;
}
.tq-spinner--sm { inline-size: 18px; block-size: 18px; border-width: 2px; }
.tq-spinner--lg { inline-size: 44px; block-size: 44px; border-width: 3px; }

.tq-lane-loader {
  position: relative;
  display: block;
  inline-size: 100%;
  max-inline-size: 220px;
  block-size: 4px;
  border-radius: 2px;
  background: var(--tq-fill-3);
  overflow: hidden;
}
.tq-lane-loader::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline: -28px 0;
  background: repeating-linear-gradient(90deg, var(--tq-accent) 0 9px, transparent 9px 14px);
  animation: tq-lane-run .42s linear infinite;
}
@keyframes tq-lane-run { from { transform: translateX(0); } to { transform: translateX(14px); } }

.tq-dots { display: inline-flex; align-items: center; gap: 5px; }
.tq-dots i { inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--tq-accent); animation: tq-dot-bob 1.1s var(--tq-ease-in-out) infinite; }
.tq-dots i:nth-child(2) { animation-delay: .13s; }
.tq-dots i:nth-child(3) { animation-delay: .26s; }
@keyframes tq-dot-bob { 0%, 100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(-5px); opacity: 1; } }

.tq-skeleton { position: relative; display: block; border-radius: var(--tq-r-xs); background: var(--tq-fill-3); overflow: hidden; }
.tq-skeleton::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: -150%;
  inline-size: 150%;
  background: linear-gradient(90deg, transparent, rgb(var(--tq-white-rgb) / .65) 50%, transparent);
  animation: tq-shimmer 1.4s var(--tq-ease-in-out) infinite;
}
.tq-dark .tq-skeleton::after { background: linear-gradient(90deg, transparent, rgb(var(--tq-white-rgb) / .07) 50%, transparent); }
@keyframes tq-shimmer { to { inset-inline-start: 150%; } }
.tq-skeleton--text   { block-size: 12px; border-radius: var(--tq-r-full); }
.tq-skeleton--title  { block-size: 22px; border-radius: var(--tq-r-full); }
.tq-skeleton--circle { border-radius: 50%; }
.tq-skeleton--media  { aspect-ratio: 4 / 3; border-radius: var(--tq-r-md); }

.tq-progress { block-size: 6px; border-radius: var(--tq-r-full); background: var(--tq-fill-3); overflow: hidden; }
.tq-progress__fill { block-size: 100%; border-radius: inherit; background: var(--tq-accent); transition: inline-size var(--tq-d-slower) var(--tq-ease-out); }

/* top-of-page progress — a postback, a page on its way */
.tq-topbar {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--tq-z-toast);
  block-size: 3px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: opacity var(--tq-d-base) var(--tq-ease);
}
.tq-topbar.is-on { opacity: 1; }
.tq-topbar::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline: -28px 0;
  background: repeating-linear-gradient(90deg, var(--tq-accent) 0 9px, transparent 9px 14px);
  animation: tq-lane-run .32s linear infinite;
}


/* ═══ 15 · THE ROAD — STRIP · HEADER · SIGNS · BAY DOOR · ACTION BAR ══════
   The chrome is road furniture. Barlow was drawn from highway signs and the
   system's signature is already the road's centre line, so the frame of the
   site speaks road and nothing else:
     .tq-topstrip   the strip above the bar: THE SIGNAL (open · closing ·
                    closed, three lamps, the lit one is the truth), the
                    rating, the address and the phone. It scrolls away.
     .tq-header     the asphalt: brand, the way in, the size, the call, the
                    quote. Sticky. THE LANE runs under it — its dashes drift
                    while the page moves, and the stretch under what you
                    point at lights dash by dash, like a sequential signal.
     .tq-mega       a SIGN that swings down out of the bar on two brackets;
                    a headlight sweeps its face once as it settles.
     .tq-board      the sign face: graphite, the inset white border every
                    road sign carries, an exit tab with its name, and
                    destinations that print a count where a road sign
                    prints a distance.
     .tq-sheet      the phone menu, behind a BAY DOOR that rolls up.
     .tq-actionbar  Call · Directions · Quote, under the thumb.
     .tq-odo        a count that rolls like an odometer when it changes.  */

:root {
  /* the aggregate in the asphalt: a few hundred light grains per tile —
     enough that the bar reads as a surface, never as a texture */
  --tq-asphalt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='a' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 2.4 -1.32'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23a)'/%3E%3C/svg%3E");
  /* the sign face: brushed aluminium under graphite sheeting */
  --tq-sign-face: linear-gradient(180deg, #22262C 0%, #1B1E23 34%, #16191D 100%);
  --tq-sign-edge: rgb(var(--tq-white-rgb) / .42);     /* the inset border line */
  --tq-sign-shadow: 0 36px 72px -30px rgb(var(--tq-black-rgb) / .78), 0 12px 26px -14px rgb(var(--tq-black-rgb) / .55);
  /* a bracket: a short steel bar with light on its left face */
  --tq-bracket: linear-gradient(90deg, #30353C 0 28%, #6E7580 44%, #3D4249 62%, #1F2226 100%);
}

/* ── the frame fills the window ────────────────────────────────────────
   On a page shorter than the window the footer still meets its bottom edge
   (the paper never shows under it), and <main> takes what is left - as a
   flex item, the way the old frame held it, so an old page's first margin
   stays inside it. The WebForms <form> carries the frame; a static page's
   <body> does. */
:is(body, body > form):has(> .tq-header) { display: flex; flex-direction: column; min-block-size: 100vh; min-block-size: 100svh; }
:is(body, body > form):has(> .tq-header) > main { flex: 1 0 auto; }

/* ── the strip ─────────────────────────────────────────────────────────── */
.tq-topstrip {
  position: relative;
  background: var(--tq-graphite-800);
  color: var(--tq-text-muted);
  font-size: var(--tq-fs-xs);
  line-height: 1.4;
  box-shadow: inset 0 -1px 0 rgb(var(--tq-black-rgb) / .5);
}
.tq-topstrip__in { display: flex; align-items: center; gap: var(--tq-sp-8); min-block-size: 40px; }
.tq-topstrip a { display: inline-flex; align-items: center; gap: var(--tq-sp-3); color: var(--tq-text-body); text-decoration: none; white-space: nowrap; transition: var(--tq-t-color); }
.tq-topstrip .tq-open { white-space: nowrap; }
.tq-topstrip a:hover { color: var(--tq-accent-text); }
.tq-topstrip .tq-i { inline-size: 16px; block-size: 16px; color: var(--tq-text-subtle); }
.tq-topstrip a:hover .tq-i { color: currentColor; }
.tq-topstrip__end { display: flex; align-items: center; gap: var(--tq-sp-8); margin-inline-start: auto; }
.tq-topstrip__num { font-family: var(--tq-font-display); font-size: var(--tq-fs-sm); font-weight: var(--tq-fw-semibold); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.tq-topstrip__sep { inline-size: 1px; block-size: 16px; background: var(--tq-line-strong); }
@media (max-width: 1099px) { .tq-topstrip .tq-topstrip__wide { display: none; } }   /* two classes: ".tq-topstrip a" would win over one */
@media (max-width: 767px) { .tq-topstrip { display: none; } }

/* the rating, printed: the stars are decoration — the number is always there */
.tq-rate { display: inline-flex; align-items: center; gap: var(--tq-sp-3); color: var(--tq-text-body); text-decoration: none; white-space: nowrap; transition: var(--tq-t-color); }
a.tq-rate:hover { color: var(--tq-accent-text); }
.tq-rate b { font-family: var(--tq-font-display); font-size: var(--tq-fs-sm); font-weight: var(--tq-fw-bold); letter-spacing: .02em; color: var(--tq-text-strong); }
.tq-rate__stars { position: relative; display: inline-block; inline-size: 70px; block-size: 13px; flex: none; }
.tq-rate__stars::before, .tq-rate__stars::after {
  content: "";
  position: absolute;
  inset: 0;
  -webkit-mask: var(--tq-star-mask) 0 0 / 14px 13px repeat-x;
  mask: var(--tq-star-mask) 0 0 / 14px 13px repeat-x;
}
.tq-rate__stars::before { background: var(--tq-star-empty); }
.tq-rate__stars::after { background: var(--tq-star); inline-size: calc(var(--tq-rate, 0) * 20%); }
:root { --tq-star-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 26'%3E%3Cpath d='M12.7 1.6c.5-1.2 2.1-1.2 2.6 0l2.6 6.2 6.7.5c1.3.1 1.8 1.7.8 2.5l-5.1 4.4 1.6 6.5c.3 1.3-1.1 2.3-2.2 1.6L14 19.8l-5.7 3.5c-1.1.7-2.5-.3-2.2-1.6l1.6-6.5-5.1-4.4c-1-.8-.5-2.4.8-2.5l6.7-.5 2.6-6.2Z'/%3E%3C/svg%3E"); }

/* open-now read-out — filled in by tq.site.js from data-tq-hours (the kit's
   own rules, kept from section 15 before the road: the signal below builds on them) */
.tq-open { display: inline-flex; align-items: center; gap: var(--tq-sp-3); font-weight: var(--tq-fw-medium); color: var(--tq-text-body); white-space: nowrap; }
.tq-open .tq-dot { color: var(--tq-text-subtle); }
.tq-open.is-open .tq-dot { color: var(--tq-success); }
.tq-open.is-soon .tq-dot { color: var(--tq-warning); }
.tq-open.is-closed .tq-dot { color: var(--tq-danger); }
.tq-open b { font-weight: var(--tq-fw-semibold); color: var(--tq-text-strong); }
/* in a sign the words may take two lines; the lamps stay beside them, level with the first */
.tq-board .tq-open, .tq-sheet__tail .tq-open { white-space: normal; align-items: flex-start; }
.tq-board .tq-open > .tq-signal, .tq-sheet__tail .tq-open > .tq-signal { margin-block-start: calc((1lh - 14px) / 2); }
.tq-board .tq-open > .tq-signal--lg { margin-block-start: calc((1lh - 23px) / 2); }

/* ── THE SIGNAL ────────────────────────────────────────────────────────────
   Red · amber · green in one housing, the way a signal reads from the side
   of the road. Unlit lenses keep a trace of their colour; the lit one burns
   with a white core. The words beside it always say the same thing, so the
   colour is never the only messenger.
     <span class="tq-open tq-open--signal is-open">
       <span class="tq-signal" aria-hidden="true"><i></i><i></i><i></i></span>
       <span><b>Open now</b> · until 6:30 p.m.</span></span>             */
.tq-signal {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: none;
  padding: 3px 4px;
  border-radius: var(--tq-r-full);
  background: #08090C;
  box-shadow: inset 0 1px 2px rgb(var(--tq-black-rgb) / .9), 0 0 0 1px rgb(var(--tq-white-rgb) / .08), 0 1px 0 rgb(var(--tq-white-rgb) / .05);
}
.tq-signal i {
  --lamp: 150 154 160;
  display: block;
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, rgb(var(--lamp) / .34), rgb(var(--lamp) / .12) 62%, rgb(var(--tq-black-rgb) / .5));
  box-shadow: inset 0 0 0 1px rgb(var(--tq-black-rgb) / .55);
}
.tq-signal i:nth-child(1) { --lamp: 252 67 111; }   /* the dark set's crimson — never the orange */
.tq-signal i:nth-child(2) { --lamp: 245 180 48; }
.tq-signal i:nth-child(3) { --lamp: 0 216 159; }
.tq-open.is-closed .tq-signal i:nth-child(1),
.tq-open.is-soon .tq-signal i:nth-child(2),
.tq-open.is-open .tq-signal i:nth-child(3) {
  background: radial-gradient(circle at 38% 32%, #FFFFFF 0 9%, rgb(var(--lamp)) 36%, rgb(var(--lamp) / .86) 70%, rgb(var(--lamp) / .62));
  box-shadow: 0 0 0 1px rgb(var(--lamp) / .55), 0 0 6px 1px rgb(var(--lamp) / .62), 0 0 16px 3px rgb(var(--lamp) / .26);
  animation: tq-lamp-on .62s linear both;
}
@keyframes tq-lamp-on {           /* a lamp coming on: it catches, dips once, then holds */
  0% { opacity: .25; } 18% { opacity: 1; } 30% { opacity: .55; } 46%, 100% { opacity: 1; }
}
.tq-open--signal { gap: var(--tq-sp-4); }
.tq-open--signal.tq-open--lg { gap: var(--tq-sp-5); }
.tq-signal--lg { gap: 5px; padding: 5px 7px; }
.tq-signal--lg i { inline-size: 13px; block-size: 13px; }

/* ── the header: asphalt ───────────────────────────────────────────────── */
.tq-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--tq-z-header);
  background: rgb(16 19 23 / .965);                 /* graphite-900 */
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: inset 0 1px 0 rgb(var(--tq-white-rgb) / .055), 0 1px 0 rgb(var(--tq-black-rgb) / .6);
  line-height: var(--tq-lh-body);
  transition: box-shadow var(--tq-d-slow) var(--tq-ease);
}
@supports not (backdrop-filter: blur(1px)) { .tq-header { background: var(--tq-graphite-900); } }
.tq-header::before {                /* the aggregate */
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--tq-asphalt);
  background-size: 180px 180px;
  opacity: .5;
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.tq-header.is-stuck { box-shadow: inset 0 1px 0 rgb(var(--tq-white-rgb) / .055), 0 1px 0 rgb(var(--tq-black-rgb) / .6), 0 18px 40px -22px rgb(var(--tq-steel-rgb) / .7); }
.tq-header__bar { position: relative; display: flex; align-items: center; gap: var(--tq-sp-7); block-size: var(--tq-header-h); }

/* THE LANE — full width, quiet; its dashes drift with the page (--tq-lane-x) */
.tq-header__lane {
  position: absolute;
  inset-inline: 0;
  inset-block-end: -1px;
  block-size: 2px;
  background: var(--tq-grad-signature);
  background-position: var(--tq-lane-x, 0px) 0;
  opacity: .34;
  pointer-events: none;
}
/* THE NODE — the lit stretch. It walks to what you point at one dash at a
   time (tq.site.js sets .is-seq with --tq-seq-n steps), then the trail goes. */
.tq-header__node {
  position: absolute;
  inset-block-end: -1px;
  inset-inline-start: 0;
  block-size: 2px;
  inline-size: var(--tq-node-w, 0px);
  background: var(--tq-grad-signature);
  background-size: 14px 100%;
  background-position: calc(var(--tq-node-bgx, 0px) + var(--tq-lane-x, 0px)) 0;
  transform: translateX(var(--tq-node-x, 0px));
  opacity: 0;
  filter: drop-shadow(0 0 5px rgb(var(--tq-accent-text-rgb) / .75)) drop-shadow(0 0 1px rgb(var(--tq-accent-text-rgb)));
  transition: transform var(--tq-d-slow) var(--tq-ease-out), inline-size var(--tq-d-slow) var(--tq-ease-out),
              background-position var(--tq-d-slow) var(--tq-ease-out), opacity var(--tq-d-base) var(--tq-ease);
  pointer-events: none;
}
.tq-header__node.is-on { opacity: 1; }
.tq-header__node.is-seq {
  transition: transform var(--tq-seq-d, 240ms) steps(var(--tq-seq-n, 6), end),
              inline-size var(--tq-seq-d, 240ms) steps(var(--tq-seq-n, 6), end),
              background-position var(--tq-seq-d, 240ms) steps(var(--tq-seq-n, 6), end),
              opacity var(--tq-d-fast) var(--tq-ease);
}
@media (max-width: 767px) { :root { --tq-header-h: 62px; } }

.tq-brand { display: inline-flex; align-items: center; flex: none; gap: var(--tq-sp-4); text-decoration: none; }
.tq-brand img { display: block; inline-size: auto; block-size: 44px; }
/* the lockup: the shop's mark, then its name set in the system's type —
   the name is live text (searchable, sharp at any size), never baked into the image */
.tq-brand__word { display: flex; flex-direction: column; min-inline-size: 0; line-height: 1; }
.tq-brand__name { font-family: var(--tq-font-display); font-size: 25px; font-weight: var(--tq-fw-bold); letter-spacing: .06em; text-transform: uppercase; color: var(--tq-text-strong); white-space: nowrap; }
.tq-brand__sub { margin-block-start: 4px; font-family: var(--tq-font-display); font-size: 11.5px; font-weight: var(--tq-fw-semibold); letter-spacing: .3em; text-transform: uppercase; color: var(--tq-text-muted); white-space: nowrap; }
.tq-brand__tag { margin-block-start: 6px; font-size: var(--tq-fs-sm); font-style: italic; font-weight: var(--tq-fw-semibold); color: var(--tq-accent-text); }
@media (max-width: 767px) { .tq-brand__name { font-size: 21px; } .tq-brand__sub { font-size: 10px; letter-spacing: .26em; } .tq-brand img { block-size: 38px; } }
@media (max-width: 379px) { .tq-brand__word { display: none; } }

/* the way in: lettered like a sign, uppercase condensed */
.tq-nav { display: flex; align-items: center; gap: var(--tq-sp-1); margin-inline-start: var(--tq-sp-5); }
.tq-nav__list { display: flex; align-items: center; gap: var(--tq-sp-1); margin: 0; padding: 0; list-style: none; }
.tq-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  block-size: 44px;
  padding-inline: 13px 11px;
  border-radius: var(--tq-r-full);
  font-family: var(--tq-font-display);
  font-size: 16px;
  font-weight: var(--tq-fw-semibold);
  letter-spacing: .085em;
  text-transform: uppercase;
  color: var(--tq-text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--tq-d-fast) var(--tq-ease), background-color var(--tq-d-fast) var(--tq-ease);
}
.tq-nav__link .tq-i { inline-size: 15px; block-size: 15px; opacity: .8; transition: transform var(--tq-d-base) var(--tq-ease-out); }
.tq-nav__link:hover { color: var(--tq-text-strong); background: rgb(var(--tq-white-rgb) / .05); }
.tq-nav__link[aria-current="page"], .tq-nav__link.is-here { color: var(--tq-text-strong); }
.tq-nav__link[aria-expanded="true"] { color: var(--tq-text-strong); background: rgb(var(--tq-white-rgb) / .08); }
.tq-nav__link[aria-expanded="true"] .tq-i { transform: rotate(180deg); }
.tq-header__actions { display: flex; align-items: center; gap: var(--tq-sp-4); margin-inline-start: auto; }
.tq-header__phone { --btn-px: var(--tq-sp-5); font-family: var(--tq-font-display); font-size: var(--tq-fs-md); font-weight: var(--tq-fw-semibold); letter-spacing: .03em; font-variant-numeric: tabular-nums; }
.tq-header__phone .tq-i { color: var(--tq-accent-text); }

/* the size, in the bar: the system's size field, lowered to the bar's height */
.tq-sizefield--bar { inline-size: 226px; flex: none; }
.tq-sizefield--bar .tq-sizefield__box { --sf-px: 38px; block-size: 42px; border-radius: var(--tq-r-sm); background: rgb(var(--tq-black-rgb) / .32); border-color: rgb(var(--tq-white-rgb) / .14); }
.tq-sizefield--bar .tq-sizefield__input,
.tq-sizefield--bar .tq-sizefield__mask { font-size: 18px; letter-spacing: .07em; }
.tq-sizefield--bar .tq-sizefield__input { padding-inline-end: 72px; }
.tq-sizefield--bar .tq-sizefield__mask { color: rgb(var(--tq-white-rgb) / .34); }
.tq-sizefield__lead { position: absolute; inset-inline-start: 12px; z-index: 1; inline-size: 18px; block-size: 18px; color: var(--tq-text-subtle); pointer-events: none; }
.tq-sizefield--bar .tq-sizefield__clear { inset-inline-end: 38px; inline-size: 30px; block-size: 30px; }
.tq-sizefield__go {
  position: absolute;
  inset-inline-end: 4px;
  z-index: 2;
  display: grid;
  place-items: center;
  inline-size: 32px;
  block-size: 32px;
  border-radius: var(--tq-r-full);
  background: var(--tq-accent);
  color: var(--tq-on-accent);
  transition: background-color var(--tq-d-fast) var(--tq-ease), transform var(--tq-d-fast) var(--tq-ease-out);
}
.tq-sizefield__go:hover { background: var(--tq-accent-hi); transform: translateX(1px); }
.tq-sizefield__go .tq-i { inline-size: 16px; block-size: 16px; }
.tq-sizefield__go:focus-visible { box-shadow: var(--tq-ring); }

.tq-burger {
  display: none;
  place-items: center;
  flex: none;
  inline-size: 44px;
  block-size: 44px;
  border-radius: var(--tq-r-full);
  color: var(--tq-text-strong);
  transition: background-color var(--tq-d-fast) var(--tq-ease);
}
.tq-burger:hover { background: rgb(var(--tq-white-rgb) / .08); }
.tq-burger span, .tq-burger span::before, .tq-burger span::after {
  display: block;
  inline-size: 20px;
  block-size: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--tq-d-base) var(--tq-ease-out), background-color var(--tq-d-fast) var(--tq-ease);
}
.tq-burger span { position: relative; }
.tq-burger span::before, .tq-burger span::after { content: ""; position: absolute; inset-inline-start: 0; }
.tq-burger span::before { inset-block-start: -6px; }
.tq-burger span::after  { inset-block-start: 6px; }
.tq-burger[aria-expanded="true"] span { background: transparent; }
.tq-burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.tq-burger[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1279px) { .tq-header .tq-sizefield--bar { display: none; } }
@media (max-width: 1139px) { .tq-header__phone .tq-header__num { display: none; } .tq-header__phone { --btn-px: 0px; inline-size: var(--btn-h); } }
@media (max-width: 1023px) {
  .tq-nav, .tq-header__phone { display: none; }
  .tq-burger { display: grid; }
  .tq-header__bar { gap: var(--tq-sp-5); }
}
@media (max-width: 479px) { .tq-header__quote .tq-btn__label { display: none; } .tq-header__quote { --btn-px: var(--tq-sp-5); } }

/* ── THE SIGNS ─────────────────────────────────────────────────────────────
   .tq-hang  draws two brackets on its top edge and hangs a .tq-board from
             them. .tq-mega is a hang that drops out of the header.        */
.tq-hang { position: relative; padding-block-start: 16px; }
.tq-hang::before, .tq-hang::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inline-size: 5px;
  block-size: 20px;
  border-radius: 1px 1px 2px 2px;
  background: var(--tq-bracket);
  box-shadow: 0 2px 3px rgb(var(--tq-black-rgb) / .5);
}
.tq-hang::before { inset-inline-start: 22%; }
.tq-hang::after  { inset-inline-end: 22%; }

.tq-board {
  position: relative;
  isolation: isolate;
  padding: 34px 28px 26px;
  border-radius: var(--tq-r-lg);
  background:
    linear-gradient(180deg, rgb(var(--tq-white-rgb) / .16) 0 1px, transparent 1px),        /* the lit top face */
    linear-gradient(0deg, rgb(var(--tq-black-rgb) / .7) 0 1px, transparent 1px),          /* the edge turning away */
    var(--tq-sign-face);
  color: var(--tq-ink-800);
  box-shadow: var(--tq-sign-shadow);
  overflow: hidden;
}
.tq-board::before {                 /* the border every road sign carries, inset */
  content: "";
  position: absolute;
  inset: 7px;
  z-index: -1;
  border: 2px solid var(--tq-sign-edge);
  border-radius: calc(var(--tq-r-lg) - 6px);
  pointer-events: none;
}
.tq-board::after {                  /* headlights: retroreflective sheeting gives the light back once */
  content: "";
  position: absolute;
  inset: -20% -40%;
  z-index: 2;
  background: linear-gradient(104deg, transparent 38%, rgb(var(--tq-white-rgb) / .06) 45%, rgb(var(--tq-white-rgb) / .17) 50%, rgb(var(--tq-white-rgb) / .06) 55%, transparent 62%);
  transform: translateX(-75%);
  opacity: 0;
  pointer-events: none;
}
.is-lit > .tq-board::after, .tq-board.is-lit::after { animation: tq-sheen 1.25s var(--tq-ease-out) var(--tq-sheen-delay, .12s) both; }
@keyframes tq-sheen { 0% { transform: translateX(-75%); opacity: 1; } 100% { transform: translateX(75%); opacity: 1; } }

.tq-board__tab {                    /* the exit tab: the sign's name, hanging from its top edge */
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 24px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px 5px;
  border-radius: 0 0 8px 8px;
  background: var(--tq-accent);
  color: var(--tq-on-accent);
  font-family: var(--tq-font-display);
  font-size: 12.5px;
  font-weight: var(--tq-fw-bold);
  letter-spacing: .16em;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: 0 6px 12px -6px rgb(var(--tq-black-rgb) / .8);
}
.tq-board__tab b { padding-inline-start: 7px; border-inline-start: 1px solid rgb(var(--tq-white-rgb) / .45); font-weight: var(--tq-fw-semibold); letter-spacing: .08em; }
.tq-board__title { margin: 0 0 var(--tq-sp-6); font-family: var(--tq-font-display); font-size: var(--tq-fs-2xl); font-weight: var(--tq-fw-bold); letter-spacing: .04em; line-height: 1.05; text-transform: uppercase; color: var(--tq-ink-950); }
.tq-board__cols { display: grid; grid-template-columns: repeat(var(--tq-cols, 3), minmax(0, 1fr)); gap: var(--tq-sp-5) var(--tq-sp-10); }
.tq-board__h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tq-sp-4);
  margin: 0 0 var(--tq-sp-3);
  padding-block-end: var(--tq-sp-4);
  border-block-end: 1px dashed rgb(var(--tq-white-rgb) / .16);
  font-family: var(--tq-font-display);
  font-size: 12.5px;
  font-weight: var(--tq-fw-semibold);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tq-ink-650);
}
.tq-board__list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
/* a destination: where it goes, how many, the arrow */
.tq-board__go {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: var(--tq-sp-5);
  min-block-size: 38px;
  margin-inline: -10px;
  padding-inline: 10px;
  border-radius: 9px;
  color: var(--tq-ink-950);
  font-family: var(--tq-font-display);
  font-size: 18px;
  font-weight: var(--tq-fw-semibold);
  letter-spacing: .05em;
  line-height: 1.1;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color var(--tq-d-fast) var(--tq-ease), color var(--tq-d-fast) var(--tq-ease);
}
button.tq-board__go { inline-size: calc(100% + 20px); text-align: start; }
.tq-board__go > span { min-inline-size: 0; padding-block: 6px; overflow-wrap: anywhere; text-wrap: balance; }   /* a long name the owner gave a page takes two lines; it is never cut */
.tq-board__go b { font-size: 15px; font-weight: var(--tq-fw-semibold); letter-spacing: .04em; color: var(--tq-ink-650); font-variant-numeric: tabular-nums; }
.tq-board__go .tq-i { inline-size: 18px; block-size: 18px; color: var(--tq-ink-650); transition: transform var(--tq-d-base) var(--tq-ease-out), color var(--tq-d-fast) var(--tq-ease); }
.tq-board__go:hover { background: rgb(var(--tq-white-rgb) / .065); color: var(--tq-brand-glow); }
.tq-board__go:hover b { color: var(--tq-ink-800); }
.tq-board__go:hover .tq-i { color: var(--tq-brand-glow); transform: translate(2px, -2px); }
.tq-board__go:focus-visible { box-shadow: var(--tq-ring); }
.tq-board__go--sm { min-block-size: 34px; font-size: 16px; }
.tq-board__note { margin: var(--tq-sp-6) 0 0; font-size: var(--tq-fs-xs); color: var(--tq-ink-650); }
.tq-board__note a { color: var(--tq-ink-800); }
.tq-board__note a:hover { color: var(--tq-brand-glow); }

/* the dock in the Tires sign: type the size, or take the whole list */
.tq-board__dock {
  display: flex;
  flex-direction: column;
  gap: var(--tq-sp-6);
  padding: var(--tq-sp-7);
  border-radius: var(--tq-r-md);
  background: rgb(var(--tq-black-rgb) / .28);
  box-shadow: inset 0 1px 2px rgb(var(--tq-black-rgb) / .55), 0 1px 0 rgb(var(--tq-white-rgb) / .06);
}
.tq-board__dock .tq-sizefield__label { font-family: var(--tq-font-display); font-size: 12.5px; font-weight: var(--tq-fw-semibold); letter-spacing: .16em; text-transform: uppercase; color: var(--tq-ink-650); }
.tq-board__dock .tq-sizefield__box { --sf-px: var(--tq-sp-6); block-size: 54px; background: rgb(var(--tq-black-rgb) / .35); border-color: rgb(var(--tq-white-rgb) / .16); }
.tq-board__dock .tq-sizefield__input, .tq-board__dock .tq-sizefield__mask { font-size: 22px; }
.tq-board__dock .tq-sizefield__mask { color: rgb(var(--tq-white-rgb) / .3); }
.tq-board__dock .tq-sizefield__read { min-block-size: 18px; }
/* its go button sits at the end of the box; the clear button steps left of it */
.tq-board__dock .tq-sizefield__go { inline-size: 40px; block-size: 40px; inset-inline-end: 6px; }
.tq-board__dock .tq-sizefield__clear { inset-inline-end: 50px; }
.tq-board__dock .tq-sizefield__input { padding-inline-end: 92px; }

/* the sign that drops out of the header */
.tq-mega {
  position: absolute;
  inset-block-start: calc(100% - 2px);
  inset-inline-start: var(--tq-mega-x, 0px);
  z-index: -1;
  inline-size: var(--tq-mega-w, auto);
  max-inline-size: calc(100vw - var(--tq-gutter) * 2);
  transform-origin: 50% 0;
}
.tq-mega[hidden] { display: none; }
.tq-mega.is-in { animation: tq-swing .66s var(--tq-ease-spring) both; }
.tq-mega.is-out { animation: tq-swing-out .17s var(--tq-ease-accel) both; }
@keyframes tq-swing {
  0% { transform: perspective(1500px) rotateX(-58deg); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: perspective(1500px) rotateX(0deg); opacity: 1; }
}
@keyframes tq-swing-out { to { transform: perspective(1500px) rotateX(-24deg); opacity: 0; } }
.tq-mega--wide { --tq-mega-w: min(1180px, calc(100vw - var(--tq-gutter) * 2)); }
.tq-mega .tq-board { padding-block-start: 40px; }
.tq-mega--tires .tq-board__cols { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(270px, 1.15fr); }
.tq-mega--help { --tq-mega-w: 430px; }
.tq-mega--visit { --tq-mega-w: 640px; }
.tq-visit { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--tq-sp-8) var(--tq-sp-10); }
.tq-visit__now { display: flex; flex-direction: column; gap: var(--tq-sp-5); }
/* the headline: the signal across the whole sign, like the message line of an electronic road sign */
.tq-visit > .tq-open { grid-column: 1 / -1; padding-block-end: var(--tq-sp-6); border-block-end: 1px dashed rgb(var(--tq-white-rgb) / .16); font-size: var(--tq-fs-md); color: var(--tq-ink-800); }
.tq-visit > .tq-open b { color: var(--tq-ink-950); }
.tq-visit address { font-style: normal; font-size: var(--tq-fs-md); line-height: 1.55; color: var(--tq-ink-800); }
.tq-visit__acts { display: flex; flex-wrap: wrap; gap: var(--tq-sp-4); margin-block-start: var(--tq-sp-2); }
.tq-board .tq-hours { font-size: var(--tq-fs-sm); }
.tq-board .tq-hours th, .tq-board .tq-hours td { padding-block: 7px; border-block-end-color: rgb(var(--tq-white-rgb) / .07); }

/* ── THE PHONE MENU — behind a bay door ────────────────────────────────── */
.tq-sheet {
  position: fixed;
  inset: 0;
  z-index: var(--tq-z-drawer);
  display: flex;
  flex-direction: column;
  block-size: 100dvh;
  background:
    radial-gradient(120% 60% at 50% 0%, rgb(var(--tq-brand-glow-rgb) / .10), transparent 62%),   /* the bay is lit */
    var(--tq-graphite-900);
  color: var(--tq-text-body);
  line-height: var(--tq-lh-body);
  visibility: hidden;
  overflow: hidden;
  overscroll-behavior: contain;
}
.tq-sheet.is-open, .tq-sheet.is-closing { visibility: visible; }
.tq-sheet__head { position: relative; display: flex; align-items: center; flex: none; block-size: var(--tq-header-h); }
.tq-sheet__head::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 2px; background: var(--tq-grad-signature); opacity: .34; }
.tq-sheet__head .tq-container { display: flex; align-items: center; justify-content: space-between; }
.tq-sheet__body { flex: 1 1 auto; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; padding-block: var(--tq-sp-7) var(--tq-sp-10); }
.tq-sheet__foot { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: var(--tq-sp-4); padding-block: var(--tq-sp-5) calc(var(--tq-sp-5) + env(safe-area-inset-bottom, 0px)); border-block-start: 1px solid var(--tq-line); background: rgb(var(--tq-black-rgb) / .25); }
.tq-sheet__find, .tq-sizefield--bar.tq-sheet__find { inline-size: 100%; margin-block-end: var(--tq-sp-7); }
.tq-sheet__find .tq-sizefield__box { --sf-px: 40px; block-size: 52px; background: rgb(var(--tq-black-rgb) / .3); border-color: rgb(var(--tq-white-rgb) / .16); }
.tq-sheet__find .tq-sizefield__input { padding-inline-end: 76px; }
.tq-sheet__find .tq-sizefield__clear { inset-inline-end: 44px; }
.tq-sheet__find .tq-sizefield__go { inline-size: 38px; block-size: 38px; inset-inline-end: 6px; }
.tq-sheet__find .tq-sizefield__mask { color: rgb(var(--tq-white-rgb) / .3); }
.tq-sheet__nav { display: flex; flex-direction: column; }
.tq-sheet__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--tq-sp-5);
  inline-size: 100%;
  min-block-size: 62px;
  padding-inline: var(--tq-sp-7) 0;
  border-block-end: 1px dashed rgb(var(--tq-white-rgb) / .12);    /* lane markings between the rows */
  font-family: var(--tq-font-display);
  font-size: var(--tq-fs-3xl);
  font-weight: var(--tq-fw-bold);
  letter-spacing: .03em;
  text-align: start;
  text-transform: uppercase;
  color: var(--tq-text-strong);
  text-decoration: none;
}
.tq-sheet__link::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block: 20px;
  inline-size: 3px;
  border-radius: 2px;
  background: var(--tq-ink-400);
  transition: background-color var(--tq-d-fast) var(--tq-ease), inset-block var(--tq-d-base) var(--tq-ease-out);
}
.tq-sheet__link[aria-current="page"]::before, .tq-sheet__link[aria-expanded="true"]::before, .tq-sheet__link:active::before { background: var(--tq-accent-text); inset-block: 14px; }
.tq-sheet__link .tq-i { margin-inline-start: auto; inline-size: 22px; block-size: 22px; color: var(--tq-text-subtle); transition: transform var(--tq-d-base) var(--tq-ease-out); }
.tq-sheet__link[aria-expanded="true"] .tq-i { transform: rotate(180deg); color: var(--tq-accent-text); }
.tq-sheet__link small { font-family: var(--tq-font-display); font-size: var(--tq-fs-md); font-weight: var(--tq-fw-semibold); letter-spacing: .04em; color: var(--tq-text-subtle); }
.tq-sheet__sub { padding: var(--tq-sp-5) 0 var(--tq-sp-7) var(--tq-sp-7); border-block-end: 1px dashed rgb(var(--tq-white-rgb) / .12); }
.tq-sheet__sub[hidden] { display: none; }
.tq-sheet__sub .tq-board__h { margin-block-start: var(--tq-sp-6); }
.tq-sheet__sub .tq-board__h:first-child { margin-block-start: 0; }
.tq-sheet__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--tq-sp-8); }
.tq-sheet__grid .tq-board__go { grid-template-columns: minmax(0, 1fr) auto; font-size: 17px; }   /* two columns: the count stays, the arrow goes */
.tq-sheet__grid .tq-board__go .tq-i { display: none; }
@media (max-width: 359px) { .tq-sheet__grid { grid-template-columns: minmax(0, 1fr); } }
.tq-sheet__label { display: block; margin-block: var(--tq-sp-9) var(--tq-sp-5); font-family: var(--tq-font-display); font-size: var(--tq-fs-xs); font-weight: var(--tq-fw-semibold); letter-spacing: .12em; text-transform: uppercase; color: var(--tq-text-subtle); }
.tq-sheet__tail address { font-style: normal; font-size: var(--tq-fs-md); line-height: 1.7; color: var(--tq-text-muted); }
.tq-sheet__sub address { margin-block-end: var(--tq-sp-5); font-style: normal; font-size: var(--tq-fs-md); line-height: 1.6; color: var(--tq-text-body); }
.tq-sheet__tail .tq-gantry__hours { max-inline-size: 360px; font-size: var(--tq-fs-md); }
.tq-sheet__tail .tq-gantry__hours li { padding-block: 5px; border-block-end: 1px dashed rgb(var(--tq-white-rgb) / .08); }
.tq-sheet__rate { margin-block-start: var(--tq-sp-8); font-size: var(--tq-fs-sm); }
.tq-sheet__sub .tq-hours { margin-block-end: var(--tq-sp-5); }
.tq-sheet [data-tq-sheet-item] {
  opacity: 0;
  transform: translate3d(18px, 0, 0);
  transition: opacity var(--tq-d-slow) var(--tq-ease-out), transform var(--tq-d-slow) var(--tq-ease-out);
  transition-delay: var(--tq-sheet-delay, 0ms);
}
.tq-sheet.is-open [data-tq-sheet-item] { opacity: 1; transform: none; }
.tq-sheet.is-closing [data-tq-sheet-item] { transition-delay: 0ms; }

/* the door: slats with ribbing, a row of lit windows, a seal and a handle.
   It starts down; opening rolls it up into the head; closing brings it down. */
.tq-sheet__door {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  transform: translateY(-101%);
  box-shadow: 0 18px 30px -6px rgb(var(--tq-black-rgb) / .7);
}
.tq-sheet__door i {
  position: relative;
  flex: 1 1 0;
  background:
    linear-gradient(180deg, rgb(var(--tq-white-rgb) / .10) 0 1px, transparent 1px 44%, rgb(var(--tq-black-rgb) / .35) 44% calc(44% + 1px), rgb(var(--tq-white-rgb) / .05) calc(44% + 1px) calc(44% + 2px), transparent calc(44% + 2px)),
    linear-gradient(180deg, #2B2F35 0%, #23262B 52%, #1A1D21 100%);
  border-block-end: 1px solid #060709;
}
.tq-sheet__door i.is-windows::after {      /* the bay is lit behind the door */
  content: "";
  position: absolute;
  inset-block: 24% 30%;
  inset-inline: 9%;
  background: repeating-linear-gradient(90deg,
    rgb(var(--tq-brand-glow-rgb) / .55) 0 calc(20% - 10px), transparent calc(20% - 10px) 20%);
  border-radius: 3px;
  box-shadow: 0 0 18px rgb(var(--tq-brand-glow-rgb) / .25);
  filter: saturate(.8);
}
.tq-sheet__door i:last-child { flex-grow: 1.2; border-block-end: 0; box-shadow: inset 0 -7px 0 #0B0C0E; }    /* the seal */
.tq-sheet__door i:last-child::after {      /* the handle */
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 34%;
  inline-size: 92px;
  block-size: 9px;
  margin-inline-start: -46px;
  border-radius: 5px;
  background: linear-gradient(180deg, #5A6069, #2B2F35);
  box-shadow: 0 2px 3px rgb(var(--tq-black-rgb) / .6);
}
.tq-sheet.is-open .tq-sheet__door { animation: tq-door-up .6s var(--tq-ease-in-out) both; }
.tq-sheet.is-closing .tq-sheet__door { animation: tq-door-down .36s var(--tq-ease-accel) both; }
@keyframes tq-door-up { 0%, 10% { transform: translateY(0); } 100% { transform: translateY(-101%); } }
@keyframes tq-door-down { from { transform: translateY(-101%); } to { transform: translateY(0); } }

/* the action bar — Call · Directions · Quote, under the thumb on a phone */
.tq-actionbar { display: none; }
@media (max-width: 767px) {
  :root:has(.tq-actionbar) { --tq-actionbar-h: 66px; }
  body:has(.tq-actionbar) { padding-block-end: calc(var(--tq-actionbar-h) + env(safe-area-inset-bottom, 0px)); }
  /* with a footer, the bar's room at the end of the page is the footer's own, so the page ends in graphite under the bar */
  body:has(.tq-actionbar):has(.tq-footer) { padding-block-end: 0; }
  body:has(.tq-actionbar) .tq-footer { padding-block-end: calc(var(--tq-actionbar-h) + env(safe-area-inset-bottom, 0px)); }
  .tq-actionbar {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: var(--tq-z-sticky);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--tq-sp-3);
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
    background: rgb(16 19 23 / .96);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    box-shadow: 0 -12px 30px -18px rgb(var(--tq-steel-rgb) / .7);
  }
  .tq-actionbar::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 2px; background: var(--tq-grad-signature); opacity: .34; }
  .tq-actionbar a, .tq-actionbar button {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    block-size: 50px;
    border-radius: var(--tq-r-md);
    color: var(--tq-text-body);
    font-size: var(--tq-fs-2xs);
    font-weight: var(--tq-fw-semibold);
    letter-spacing: .02em;
    text-decoration: none;
    transition: background-color var(--tq-d-fast) var(--tq-ease), color var(--tq-d-fast) var(--tq-ease);
  }
  .tq-actionbar a:active, .tq-actionbar button:active { background: rgb(var(--tq-white-rgb) / .08); }
  .tq-actionbar .tq-i { inline-size: 22px; block-size: 22px; }
  .tq-actionbar .is-primary { background: var(--tq-accent); color: var(--tq-on-accent); }
  .tq-actionbar .is-primary:active { background: var(--tq-accent-press); }
  .tq-actionbar__count {
    position: absolute;
    inset-block-start: 5px;
    inset-inline-start: calc(50% + 8px);
    display: grid;
    place-items: center;
    min-inline-size: 18px;
    block-size: 18px;
    padding-inline: 4px;
    border-radius: var(--tq-r-full);
    background: #FFFFFF;
    color: var(--tq-brand-700);
    font-family: var(--tq-font-display);
    font-size: 11px;
    font-weight: var(--tq-fw-bold);
    line-height: 1;
  }
}

/* ── THE ODOMETER ──────────────────────────────────────────────────────────
   A count that rolls when it changes, digit by digit, the way a mechanical
   counter turns. The real number stays in the element for screen readers
   and for whatever script set it; the wheels are drawn beside it.        */
.tq-odo { display: inline-flex; overflow: hidden; block-size: 1em; line-height: 1; }
.tq-odo__d { display: flex; flex-direction: column; transform: translateY(calc(var(--tq-odo-v, 0) * -1em)); transition: transform var(--tq-d-slower) var(--tq-ease-spring); }
.tq-odo__d span { display: block; block-size: 1em; text-align: center; }
.tq-odo__plain { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }


/* ═══ 16 · THE OVERPASS — FOOTER ══════════════════════════════════════════
   The page ends on the road. Across it stands a sign bridge — a truss on
   two posts — with a sign over each lane: Tires, Help, Visit. Under it the
   road runs off to a lit horizon; its lane lines (the system's dashes)
   come towards you while the page scrolls, and the signs catch your
   headlights once as you arrive. Under the bridge: who, the newsletter,
   the small print.
     .tq-overpass       the scene: sky, the road (an <svg> tq.site.js draws
                        in perspective), the bridge and its signs
     .tq-gantry         the bridge — truss, posts, three .tq-hang signs
     .tq-footer__floor  name, live signal, newsletter, call and quote
     .tq-footer__base   the small print                                  */

.tq-footer { position: relative; background: var(--tq-graphite-900); color: var(--tq-text-muted); line-height: var(--tq-lh-body); }
.tq-footer::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; z-index: 3; block-size: 2px; background: var(--tq-grad-signature); opacity: .5; }

.tq-overpass {
  --tq-horizon: 42%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: 96px 220px;
  background:
    radial-gradient(58% 18% at 50% var(--tq-horizon), rgb(var(--tq-brand-glow-rgb) / .22), transparent 74%),     /* sodium haze on the horizon */
    linear-gradient(180deg, #08090C 0%, #0D0F13 calc(var(--tq-horizon) - 8%), #121419 var(--tq-horizon), #07080A 100%);
}
.tq-overpass__road { position: absolute; inset: 0 0 auto; z-index: -1; display: block; inline-size: 100%; block-size: 100%; pointer-events: none; }
.tq-overpass__road .r-asphalt { fill: url(#tq-road-asphalt); }
.tq-overpass__road .r-edge { fill: rgb(var(--tq-white-rgb) / .5); }
.tq-overpass__road .r-dash { fill: rgb(var(--tq-brand-glow-rgb) / .95); }
.tq-overpass::after {               /* the near road falls into the floor's shadow */
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: -1;
  block-size: 90px;
  background: linear-gradient(180deg, transparent, var(--tq-graphite-900));
  pointer-events: none;
}

.tq-gantry { position: relative; }
.tq-gantry__beam {                  /* the truss: two chords, the lacing between them, light on the top chord */
  position: absolute;
  inset-inline: calc(var(--tq-gutter) * -1 + 8px);
  inset-block-start: -42px;
  block-size: 24px;
  background:
    linear-gradient(180deg, #4A5059 0 1px, #2A2E34 1px 5px, transparent 5px calc(100% - 5px), #202328 calc(100% - 5px) calc(100% - 1px), #050607 calc(100% - 1px)),
    repeating-linear-gradient(55deg, transparent 0 13px, #1C1F24 13px 15px, transparent 15px 26px),
    repeating-linear-gradient(-55deg, transparent 0 13px, #16181C 13px 15px, transparent 15px 26px),
    linear-gradient(180deg, #0B0C0F, #0E1013);
  box-shadow: 0 14px 22px -12px rgb(var(--tq-black-rgb) / .95);
}
.tq-gantry::before, .tq-gantry::after {     /* the two posts, down to the shoulders */
  content: "";
  position: absolute;
  inset-block: -44px -168px;
  inline-size: 16px;
  background: linear-gradient(90deg, #1A1D21 0 20%, #3C4148 40%, #262A2F 70%, #121417 100%);
  box-shadow: 0 0 14px rgb(var(--tq-black-rgb) / .6);
  z-index: -1;
}
.tq-gantry::before { inset-inline-start: calc(var(--tq-gutter) * -1 + 2px); }
.tq-gantry::after  { inset-inline-end: calc(var(--tq-gutter) * -1 + 2px); }
.tq-gantry__signs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tq-sp-9); align-items: start; }
.tq-gantry .tq-hang::before, .tq-gantry .tq-hang::after { block-size: 26px; inset-block-start: -8px; }
.tq-gantry .tq-board__go { font-size: 17px; min-block-size: 36px; }
.tq-gantry .tq-open { font-size: var(--tq-fs-sm); color: var(--tq-ink-800); }
.tq-gantry .tq-open b { color: var(--tq-ink-950); }
.tq-gantry address { margin-block: var(--tq-sp-5) var(--tq-sp-4); font-style: normal; font-size: var(--tq-fs-sm); line-height: 1.6; color: var(--tq-ink-800); }
.tq-gantry__hours { margin: 0; padding: 0; list-style: none; font-size: var(--tq-fs-sm); color: var(--tq-ink-700); font-variant-numeric: tabular-nums; }
.tq-gantry__hours li { display: flex; justify-content: space-between; gap: var(--tq-sp-5); padding-block: 3px; }
.tq-gantry__hours b { font-weight: var(--tq-fw-medium); color: var(--tq-ink-800); }

@media (max-width: 1023px) {
  .tq-overpass { padding-block: 210px 56px; }
  .tq-overpass__road { block-size: 290px; }
  .tq-gantry::before, .tq-gantry::after, .tq-gantry__beam { display: none; }
  .tq-gantry__signs { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--tq-sp-7); }
  .tq-gantry__signs > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 639px) {
  .tq-overpass { padding-block: 168px 40px; }
  .tq-overpass__road { block-size: 240px; }
  .tq-gantry__signs { grid-template-columns: minmax(0, 1fr); }
  .tq-gantry .tq-hang::before, .tq-gantry .tq-hang::after { display: none; }
  .tq-gantry .tq-hang { padding-block-start: 0; }
}

/* under the bridge */
.tq-footer__floor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--tq-sp-10) var(--tq-sp-12);
  padding-block: var(--tq-sp-11) var(--tq-sp-10);
}
.tq-footer__ident { display: flex; flex-direction: column; gap: var(--tq-sp-6); min-inline-size: 0; }
.tq-footer__ident .tq-brand img { block-size: 52px; }
.tq-footer__say { margin: 0; max-inline-size: 40ch; font-size: var(--tq-fs-md); line-height: 1.6; color: var(--tq-text-muted); }
.tq-footer__news { display: flex; flex-direction: column; gap: var(--tq-sp-5); }
.tq-footer__h {
  margin: 0;
  font-family: var(--tq-font-display);
  font-size: var(--tq-fs-sm);
  font-weight: var(--tq-fw-semibold);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tq-text-strong);
}
.tq-footer__acts { display: flex; flex-wrap: wrap; gap: var(--tq-sp-4); }
.tq-footer address { font-style: normal; }
.tq-footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--tq-sp-5) var(--tq-sp-8);
  padding-block: var(--tq-sp-7) calc(var(--tq-sp-7) + env(safe-area-inset-bottom, 0px));
  border-block-start: 1px solid var(--tq-line);
  font-size: var(--tq-fs-xs);
  color: var(--tq-text-subtle);
}
.tq-footer__base nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tq-sp-3) var(--tq-sp-8); }
.tq-footer__base a { display: inline-flex; align-items: center; gap: var(--tq-sp-3); color: var(--tq-text-muted); text-decoration: none; transition: var(--tq-t-color); }
.tq-footer__base a:hover { color: var(--tq-accent-text); }
.tq-footer__credit b { font-weight: var(--tq-fw-semibold); color: var(--tq-text-body); }
.tq-footer .tq-hours { font-size: var(--tq-fs-sm); }
@media (max-width: 1023px) { .tq-footer__floor { grid-template-columns: minmax(0, 1fr); } }

/* touch screens: nothing that moves on hover may latch after a tap */
@media (hover: none) {
  .tq-board__go:hover .tq-i { transform: none; }
  .tq-sizefield__go:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tq-mega.is-in, .tq-mega.is-out { animation: none; }
  .is-lit > .tq-board::after, .tq-board.is-lit::after { animation: none; }
  .tq-sheet__door { display: none; }
  .tq-open .tq-signal i { animation: none !important; }
  .tq-header__node.is-seq { transition: none; }
}


/* ═══ 17 · HERO · BANDS · BRANDS · MEDIA · SPLIT ═════════════════════════
   THE HERO is a graphite band with the photo FRAMED on the right — never
   words laid over a photo, so the title stays readable whatever picture the
   owner uploads from the dash. The dock (the size finder) sits across the
   band's lower edge, half on graphite, half on paper, and the lane runs
   along that edge behind it: the centre line of the road the page is on.
     <section class="tq-hero">
       <div class="tq-hero__band tq-dark"> … .tq-hero__grid … </div>
       <div class="tq-container tq-hero__dock"> … .tq-finder … </div>
     </section>                                                         */

.tq-hero { --tq-hero-overlap: 72px; position: relative; isolation: isolate; }
.tq-hero__band {
  position: relative;
  padding-block: clamp(2.5rem, 1.2rem + 5vw, 5.5rem) calc(var(--tq-sp-12) + var(--tq-hero-overlap));
  background: var(--tq-graphite-900);
  overflow: hidden;
  overflow: clip;
}
.tq-hero:not(:has(.tq-hero__dock)) .tq-hero__band { padding-block-end: var(--tq-sp-13); }
.tq-hero__band::before {                   /* a low glow of the signal behind the words */
  content: "";
  position: absolute;
  inset-block-start: -18%;
  inset-inline-start: -12%;
  inline-size: min(820px, 80vw);
  aspect-ratio: 1.3;
  background: radial-gradient(closest-side, rgb(var(--tq-accent-rgb) / .17), transparent);
  pointer-events: none;
}
.tq-hero__band::after {                    /* the edge lane, behind the dock */
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: calc(var(--tq-hero-overlap) - 1px);
  block-size: 2px;
  background: var(--tq-grad-signature);
  opacity: .55;
  pointer-events: none;
}
.tq-hero:not(:has(.tq-hero__dock)) .tq-hero__band::after { inset-block-end: 0; }
.tq-hero__band > .tq-container { position: relative; z-index: 1; }
.tq-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: var(--tq-sp-11) var(--tq-sp-12);
}
.tq-hero__copy { display: flex; flex-direction: column; gap: var(--tq-sp-7); min-inline-size: 0; }
.tq-hero__title { margin: 0; color: var(--tq-text-strong); }
.tq-hero__title em { font-style: normal; color: var(--tq-accent-text); }
.tq-hero__lead { margin: 0; max-inline-size: 46ch; font-size: var(--tq-fs-lg); line-height: var(--tq-lh-lead); color: var(--tq-text-muted); }
.tq-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--tq-sp-5); margin-block-start: var(--tq-sp-3); }
.tq-hero__proof { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tq-sp-4) var(--tq-sp-8); margin: var(--tq-sp-4) 0 0; padding: 0; list-style: none; font-size: var(--tq-fs-sm); color: var(--tq-text-muted); }
.tq-hero__proof li { display: inline-flex; align-items: center; gap: var(--tq-sp-3); }
.tq-hero__proof b { font-family: var(--tq-font-display); font-size: var(--tq-fs-lg); font-weight: var(--tq-fw-bold); color: var(--tq-text-strong); letter-spacing: .01em; }
.tq-hero__proof .tq-i { color: var(--tq-accent-text); }
.tq-hero__media { position: relative; min-inline-size: 0; }
.tq-hero__media .tq-media { aspect-ratio: 5 / 4; box-shadow: 0 40px 80px -40px rgb(var(--tq-black-rgb) / .9); }
.tq-hero__tag {                            /* a read-out pinned to the photo */
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--tq-sp-5) var(--tq-sp-6);
  border-radius: var(--tq-r-md);
  background: var(--tq-paper-0);
  color: var(--tq-t-body);
  box-shadow: 0 20px 40px -20px rgb(var(--tq-black-rgb) / .8);
  font-size: var(--tq-fs-xs);
}
.tq-hero__tag > b { font-family: var(--tq-font-display); font-size: var(--tq-fs-2xl); font-weight: var(--tq-fw-bold); line-height: 1; color: var(--tq-t-strong); font-variant-numeric: tabular-nums; }
.tq-hero__tag--a { inset-block-end: var(--tq-sp-8); inset-inline-start: calc(-1 * var(--tq-sp-8)); }
.tq-hero__tag--b { inset-block-start: var(--tq-sp-8); inset-inline-end: calc(-1 * var(--tq-sp-6)); flex-direction: row; align-items: center; gap: var(--tq-sp-3); font-size: var(--tq-fs-sm); font-weight: var(--tq-fw-semibold); color: var(--tq-t-strong); }
.tq-hero__dock { position: relative; z-index: 2; margin-block-start: calc(-1 * var(--tq-hero-overlap)); }
@media (max-width: 1023px) {
  .tq-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .tq-hero__media { max-inline-size: 640px; }
  .tq-hero__tag--a { inset-inline-start: var(--tq-sp-5); }
  .tq-hero__tag--b { inset-inline-end: var(--tq-sp-5); }
}
@media (max-width: 559px) {
  .tq-hero__media .tq-media { aspect-ratio: 4 / 3; }
  .tq-hero__ctas .tq-btn { flex: 1 1 100%; }
}

/* a page head — every page that is not the home page */
.tq-pagehead { position: relative; padding-block: var(--tq-sp-12) var(--tq-sp-11); background: var(--tq-graphite-900); color: var(--tq-text-body); }
.tq-pagehead::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 2px; background: var(--tq-grad-signature); opacity: .5; }
.tq-pagehead__title { margin: var(--tq-sp-5) 0 0; }
.tq-pagehead__lead { margin: var(--tq-sp-5) 0 0; max-inline-size: 60ch; font-size: var(--tq-fs-lg); color: var(--tq-text-muted); }

/* the section head — eyebrow, title, a line of lead, an action at the end */
.tq-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--tq-sp-6) var(--tq-sp-10); margin-block-end: var(--tq-sp-10); }
.tq-head__main { display: flex; flex-direction: column; gap: var(--tq-sp-5); max-inline-size: 720px; min-inline-size: 0; }
.tq-head__title { margin: 0; }
.tq-head__lead { margin: 0; font-size: var(--tq-fs-lg); line-height: var(--tq-lh-lead); color: var(--tq-text-muted); }
.tq-head--center { flex-direction: column; align-items: center; text-align: center; }
.tq-head--center .tq-head__main { align-items: center; }

/* stats — read-outs across a band */
.tq-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.tq-stat { display: flex; flex-direction: column; gap: var(--tq-sp-3); padding: var(--tq-sp-4) var(--tq-sp-8); min-inline-size: 0; }
.tq-stat + .tq-stat { border-inline-start: 1px solid var(--tq-line); }
.tq-stat__v { font-family: var(--tq-font-display); font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem); font-weight: var(--tq-fw-bold); line-height: 1; letter-spacing: .005em; color: var(--tq-text-strong); font-variant-numeric: tabular-nums; }
.tq-stat__v small { font-size: .5em; font-weight: var(--tq-fw-semibold); color: var(--tq-accent-text); margin-inline-start: 2px; }
.tq-stat__k { font-size: var(--tq-fs-sm); color: var(--tq-text-muted); }
@media (max-width: 767px) {
  .tq-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--tq-sp-8); }
  .tq-stat { padding-inline: var(--tq-sp-5); }
  .tq-stat:nth-child(3) { border-inline-start: 0; }
}

/* the CTA band — graphite, rounded, the lane across its top */
.tq-cta {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--tq-sp-8) var(--tq-sp-12);
  padding: clamp(2rem, 1.2rem + 3.4vw, 4rem);
  border-radius: var(--tq-r-2xl);
  background: var(--tq-graphite-900);
  color: var(--tq-text-body);
  overflow: hidden;
  isolation: isolate;
}
.tq-cta::before { content: ""; position: absolute; inset-inline: clamp(2rem, 1.2rem + 3.4vw, 4rem); inset-block-start: 0; block-size: 3px; background: var(--tq-grad-signature); }
.tq-cta::after { content: ""; position: absolute; inset-block-end: -50%; inset-inline-end: -12%; z-index: -1; inline-size: 520px; aspect-ratio: 1; background: radial-gradient(closest-side, rgb(var(--tq-accent-rgb) / .22), transparent); }
.tq-cta__title { margin: 0; }
.tq-cta__text { margin: var(--tq-sp-5) 0 0; max-inline-size: 52ch; font-size: var(--tq-fs-lg); color: var(--tq-text-muted); }
.tq-cta__actions { display: flex; flex-wrap: wrap; gap: var(--tq-sp-5); }
@media (max-width: 767px) { .tq-cta { grid-template-columns: minmax(0, 1fr); } .tq-cta__actions .tq-btn { flex: 1 1 100%; } }

/* the brand strip — the lines a shop carries, as words, never borrowed artwork */
.tq-brands { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--tq-sp-6) clamp(1.5rem, .5rem + 4vw, 4rem); margin: 0; padding: 0; list-style: none; }
.tq-brands a, .tq-brands span {
  font-family: var(--tq-font-display);
  font-size: clamp(1.4rem, 1.1rem + 1.1vw, 2rem);
  font-weight: var(--tq-fw-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tq-text-subtle);
  text-decoration: none;
  transition: color var(--tq-d-base) var(--tq-ease);
}
.tq-brands a:hover { color: var(--tq-text-strong); }

/* media — a framed photo */
.tq-media { position: relative; margin: 0; border-radius: var(--tq-r-xl); background: var(--tq-bg-sunken); overflow: hidden; }
.tq-media > img, .tq-media > picture > img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.tq-media__cap {
  position: absolute;
  inset-inline-start: var(--tq-sp-5);
  inset-block-end: var(--tq-sp-5);
  padding: 6px 10px;
  border-radius: var(--tq-r-xs);
  background: rgb(16 19 23 / .78);
  color: #FFFFFF;
  font-size: var(--tq-fs-xs);
  font-weight: var(--tq-fw-medium);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* split — words beside a picture */
.tq-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: var(--tq-sp-11) var(--tq-sp-13); }
.tq-split--flip > :first-child { order: 2; }
.tq-split__copy { display: flex; flex-direction: column; gap: var(--tq-sp-6); min-inline-size: 0; }
.tq-split__copy > p { margin: 0; }
.tq-mosaic { display: grid; grid-template-columns: 1.2fr 1fr; grid-template-rows: 1fr 1fr; gap: var(--tq-sp-5); min-inline-size: 0; }
.tq-mosaic .tq-media:first-child { grid-row: 1 / span 2; }
.tq-mosaic .tq-media { aspect-ratio: auto; min-block-size: 160px; }
@media (max-width: 1023px) { .tq-split { grid-template-columns: minmax(0, 1fr); } .tq-split--flip > :first-child { order: 0; } }

/* a list of ticks — what is included */
.tq-ticks { display: flex; flex-direction: column; gap: var(--tq-sp-4); margin: 0; padding: 0; list-style: none; font-size: var(--tq-fs-md); color: var(--tq-text-body); }
.tq-ticks li { display: flex; align-items: flex-start; gap: var(--tq-sp-4); }
.tq-ticks li::before {
  content: "";
  flex: none;
  inline-size: 12px;
  block-size: 7px;
  margin-block-start: 7px;
  border-inline-start: 2px solid var(--tq-accent-text);
  border-block-end: 2px solid var(--tq-accent-text);
  transform: rotate(-45deg);
}


/* ═══ 18 · TIRE CARD · PRICE · STOCK · STARS ═════════════════════════════
   A tire is sold as a SET OF FOUR, so the set is the big number and the
   single tire is the small one under it. The size is a read-out — the way
   the sidewall prints it. Every card has one action: put the set on the
   quote.
     <article class="tq-tire"> media · brand · name · size · specs ·
                               price · stock · installed line · action   */

.tq-tires { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(268px, 100%), 1fr)); gap: var(--tq-sp-8) var(--tq-sp-7); }
.tq-tires--rail {                               /* a swipeable row on a phone */
  grid-auto-flow: column;
  grid-template-columns: none;
  grid-auto-columns: minmax(268px, calc((100% - 3 * var(--tq-sp-7)) / 4));
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-block-end: var(--tq-sp-3);
}
.tq-tires--rail::-webkit-scrollbar { display: none; }
.tq-tires--rail > * { scroll-snap-align: start; }
@media (max-width: 1023px) { .tq-tires--rail { grid-auto-columns: minmax(268px, 44%); } }
@media (max-width: 559px)  { .tq-tires--rail { grid-auto-columns: 82%; } }

.tq-tire {
  position: relative;
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  border: 1px solid var(--tq-line);
  border-radius: var(--tq-r-lg);
  background: var(--tq-surface);
  box-shadow: var(--tq-el-1);
  transition: var(--tq-t-lift), border-color var(--tq-d-base) var(--tq-ease);
}
.tq-tire:hover { transform: translateY(-3px); box-shadow: var(--tq-el-3); border-color: var(--tq-line-strong); }
.tq-tire:focus-within { box-shadow: var(--tq-el-3), var(--tq-ring); }
.tq-tire :focus-visible { box-shadow: none; }
.tq-tire__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-start-start-radius: inherit;
  border-start-end-radius: inherit;
  background: radial-gradient(120% 90% at 50% 40%, var(--tq-paper-0), var(--tq-paper-200));
  overflow: hidden;
}
.tq-tire__media > img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--tq-d-slower) var(--tq-ease-out); }
.tq-tire__media--contain > img { object-fit: contain; padding: var(--tq-sp-6); }
.tq-tire:hover .tq-tire__media > img { transform: scale(1.045); }
.tq-tire__nophoto { display: grid; place-items: center; align-content: center; gap: var(--tq-sp-3); block-size: 100%; color: var(--tq-text-subtle); font-size: var(--tq-fs-xs); }
.tq-tire__nophoto svg { inline-size: 56px; block-size: 56px; opacity: .6; }
.tq-tire__flags { position: absolute; inset-block-start: var(--tq-sp-5); inset-inline-start: var(--tq-sp-5); display: flex; flex-wrap: wrap; gap: var(--tq-sp-2); }
.tq-tire__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--tq-sp-3); padding: var(--tq-sp-7) var(--tq-sp-7) var(--tq-sp-7); min-inline-size: 0; }
.tq-tire__brand {
  margin: 0;
  font-family: var(--tq-font-display);
  font-size: var(--tq-fs-sm);
  font-weight: var(--tq-fw-semibold);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tq-text-subtle);
}
.tq-tire__name { margin: 0; font-size: var(--tq-fs-lg); font-weight: var(--tq-fw-semibold); line-height: 1.25; color: var(--tq-text-strong); }
.tq-tire__name a { color: inherit; text-decoration: none; }
.tq-tire__name a::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
.tq-tire__name a:hover { color: var(--tq-accent-text); }
.tq-size {                                   /* 225/65R17 102T — a sidewall read-out */
  display: inline-flex;
  align-items: baseline;
  gap: var(--tq-sp-3);
  margin: 0;
  font-family: var(--tq-font-display);
  font-size: var(--tq-fs-xl);
  font-weight: var(--tq-fw-bold);
  letter-spacing: .02em;
  line-height: 1.1;
  color: var(--tq-text-strong);
  font-variant-numeric: tabular-nums;
}
.tq-size small { font-size: .72em; font-weight: var(--tq-fw-semibold); letter-spacing: .04em; color: var(--tq-text-subtle); }
.tq-tire__specs { display: flex; flex-wrap: wrap; gap: var(--tq-sp-2) var(--tq-sp-5); margin: var(--tq-sp-2) 0 0; padding: 0; list-style: none; font-size: var(--tq-fs-xs); color: var(--tq-text-muted); }
.tq-tire__specs li { display: inline-flex; align-items: center; gap: var(--tq-sp-2); }
.tq-tire__specs .tq-i { inline-size: 15px; block-size: 15px; color: var(--tq-text-subtle); }
/* the foot is the price alone, so every card's price sits on the same line; stock rides
   at its top-right, level with "Set of 4" */
.tq-tire__foot { position: relative; margin-block-start: auto; padding-block-start: var(--tq-sp-6); }
.tq-tire__foot > .tq-stock { position: absolute; inset-block-start: var(--tq-sp-6); inset-inline-end: 0; }
.tq-tire__installed { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px var(--tq-sp-4); margin: 0; padding: var(--tq-sp-4) var(--tq-sp-5); border-radius: var(--tq-r-sm); background: var(--tq-surface-2); font-size: var(--tq-fs-xs); line-height: 1.45; color: var(--tq-text-muted); }
.tq-tire__installed > :last-child { white-space: nowrap; }
.tq-tire__installed b { font-family: var(--tq-font-display); font-size: var(--tq-fs-md); font-weight: var(--tq-fw-bold); color: var(--tq-text-strong); font-variant-numeric: tabular-nums; }
.tq-tire__action { position: relative; z-index: 1; display: flex; gap: var(--tq-sp-3); margin-block-start: var(--tq-sp-4); }
.tq-tire__action .tq-btn { flex: 1 1 auto; }
.tq-tire__action .tq-btn::after { display: none; }
.tq-tire.is-out .tq-tire__media > img { filter: grayscale(.8); opacity: .7; }

/* the price — the set is the number; the single tire is the note */
.tq-price { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.tq-price__label { font-family: var(--tq-font-display); font-size: var(--tq-fs-xs); font-weight: var(--tq-fw-semibold); letter-spacing: .1em; text-transform: uppercase; color: var(--tq-text-subtle); }
.tq-price__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--tq-sp-2) var(--tq-sp-4); }
.tq-price__amt {
  font-family: var(--tq-font-display);
  font-size: var(--tq-fs-3xl);
  font-weight: var(--tq-fw-bold);
  line-height: 1;
  letter-spacing: .005em;
  color: var(--tq-text-strong);
  font-variant-numeric: tabular-nums;
}
.tq-price__amt sup { font-size: .5em; vertical-align: .72em; margin-inline-end: 1px; }
.tq-price--sale .tq-price__amt { color: var(--tq-accent-text); }
.tq-price__was { font-family: var(--tq-font-display); font-size: var(--tq-fs-md); font-weight: var(--tq-fw-medium); color: var(--tq-text-subtle); text-decoration: line-through; text-decoration-thickness: 1.5px; font-variant-numeric: tabular-nums; }
.tq-price__per { font-size: var(--tq-fs-xs); color: var(--tq-text-muted); font-variant-numeric: tabular-nums; }
.tq-price--lg .tq-price__amt { font-size: var(--tq-fs-5xl); }
.tq-price--sm .tq-price__amt { font-size: var(--tq-fs-2xl); }

/* stock — a dot and a plain sentence */
.tq-stock { display: inline-flex; align-items: center; gap: var(--tq-sp-3); font-size: var(--tq-fs-xs); font-weight: var(--tq-fw-semibold); color: var(--tq-text-muted); white-space: nowrap; }
.tq-stock::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%; background: currentColor; }
.tq-stock--ok   { color: var(--tq-success); }
.tq-stock--low  { color: var(--tq-warning); }
.tq-stock--out  { color: var(--tq-text-subtle); }
.tq-stock--order { color: var(--tq-info); }

/* stars — a mask of five, filled to the rating. Decorative: the number is
   always printed beside them (the stars never carry the value alone). */
.tq-stars {
  --v: 5;
  --s: 16px;
  display: inline-block;
  flex: none;
  inline-size: calc(var(--s) * 5);
  block-size: var(--s);
  background: linear-gradient(90deg, var(--tq-star) calc(var(--v) / 5 * 100%), var(--tq-star-empty) 0);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z' clip-rule='evenodd'/%3E%3C/svg%3E") 0 0 / var(--s) var(--s) repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z' clip-rule='evenodd'/%3E%3C/svg%3E") 0 0 / var(--s) var(--s) repeat-x;
}
.tq-stars--lg { --s: 22px; }
.tq-rating { display: inline-flex; align-items: center; gap: var(--tq-sp-3); font-size: var(--tq-fs-sm); color: var(--tq-text-muted); }
.tq-rating b { font-family: var(--tq-font-display); font-size: 1.25em; font-weight: var(--tq-fw-bold); color: var(--tq-text-strong); font-variant-numeric: tabular-nums; }


/* ═══ 19 · SIZE FINDER ═══════════════════════════════════════════════════
   The visitor TYPES their size the way it is printed on the sidewall —
   225/65R17, 225 65 17, 2256517, LT265/70R17, 31x10.50R15 — and the field
   formats it as they go, with the rest of the pattern waiting in grey
   ahead of the caret. Below it, the read-out says what it understood.
     <div class="tq-sizefield" data-tq-size>                      (tq.site.js)
       <label class="tq-sizefield__label" for="size">Your tire size</label>
       <div class="tq-sizefield__box">
         <input class="tq-sizefield__input" id="size" …>
         <span class="tq-sizefield__mask" aria-hidden="true"></span>
       </div>
       <p class="tq-sizefield__read" aria-live="polite"></p>
     </div>                                                              */

.tq-finder {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--tq-sp-7);
  padding: var(--tq-sp-8);
  border: 1px solid var(--tq-line);
  border-radius: var(--tq-r-xl);
  background: var(--tq-surface);
  box-shadow: var(--tq-el-4);
}
.tq-finder__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--tq-sp-5); }
.tq-finder__title { margin: 0; font-family: var(--tq-font-display); font-size: var(--tq-fs-2xl); font-weight: var(--tq-fw-bold); letter-spacing: .02em; text-transform: uppercase; color: var(--tq-text-strong); }
.tq-finder__row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto; align-items: start; gap: var(--tq-sp-6); }
/* the controls line up by their boxes, not their bottoms: the size field has a read-out under it */
.tq-finder__row > .tq-btn { block-size: var(--tq-control-h-lg); margin-block-start: calc(var(--tq-fs-sm) * 1.3 + var(--tq-sp-3)); }
.tq-finder__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tq-sp-3) var(--tq-sp-8); font-size: var(--tq-fs-sm); color: var(--tq-text-muted); }
.tq-finder__foot .tq-i { color: var(--tq-text-subtle); }
.tq-finder__panel[hidden] { display: none; }
@media (max-width: 1023px) { .tq-finder__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .tq-finder__row > .tq-sizefield { grid-column: 1 / -1; } }
@media (max-width: 559px)  {
  .tq-finder { padding: var(--tq-sp-6); border-radius: var(--tq-r-lg); gap: var(--tq-sp-6); }
  .tq-finder__row { grid-template-columns: minmax(0, 1fr); }
  .tq-finder__row > .tq-btn { inline-size: 100%; }
}

.tq-sizefield { display: flex; flex-direction: column; gap: var(--tq-sp-3); min-inline-size: 0; }
.tq-sizefield__label { font-size: var(--tq-fs-sm); font-weight: var(--tq-fw-semibold); line-height: 1.3; color: var(--tq-text-body); }
.tq-sizefield:focus-within .tq-sizefield__label { color: var(--tq-accent-text); }
.tq-sizefield__box {
  --sf-px: var(--tq-sp-7);
  position: relative;
  display: flex;
  align-items: center;
  block-size: var(--tq-control-h-lg);
  border: 1px solid var(--tq-line-strong);
  border-radius: var(--tq-r-md);
  background: var(--tq-surface);
  overflow: hidden;
  transition: border-color var(--tq-d-fast) var(--tq-ease), box-shadow var(--tq-d-base) var(--tq-ease-out);
}
.tq-sizefield__box:hover { border-color: rgb(var(--tq-steel-rgb) / .34); }
.tq-sizefield__box:focus-within { border-color: var(--tq-accent); box-shadow: 0 0 0 4px rgb(var(--tq-accent-rgb) / .14); }
.tq-sizefield.is-invalid .tq-sizefield__box { border-color: var(--tq-danger); box-shadow: 0 0 0 4px rgb(var(--tq-danger-rgb) / .1); }
.tq-sizefield__input,
.tq-sizefield__mask {
  font-family: var(--tq-font-display);
  font-size: 26px;
  font-weight: var(--tq-fw-bold);
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  text-transform: uppercase;
  line-height: 1;
}
.tq-sizefield__input {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-inline-size: 0;
  block-size: 100%;
  padding: 0 44px 0 var(--sf-px);
  border: 0;
  background: transparent;
  color: var(--tq-text-strong);
  caret-color: var(--tq-accent);
}
.tq-sizefield__input:focus, .tq-sizefield__input:focus-visible { outline: none; box-shadow: none; }
.tq-sizefield__input::placeholder { color: transparent; }
.tq-sizefield__mask {                       /* same metrics as the input, drawn under it */
  position: absolute;
  inset-block: 0;
  inset-inline-start: var(--sf-px);
  z-index: 0;
  display: flex;
  align-items: center;
  white-space: pre;
  color: var(--tq-text-disabled);
  pointer-events: none;
}
.tq-sizefield__mask i { font-style: normal; color: transparent; }   /* the typed part holds its place */
.tq-sizefield__mask em { font-style: normal; font-size: 16px; font-weight: var(--tq-fw-medium); letter-spacing: 0; text-transform: none; font-family: var(--tq-font-sans); color: var(--tq-text-subtle); }
.tq-sizefield__clear {
  position: absolute;
  inset-inline-end: 6px;
  z-index: 2;
  display: grid;
  place-items: center;
  inline-size: 36px;
  block-size: 36px;
  border-radius: 50%;
  color: var(--tq-text-subtle);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--tq-d-fast) var(--tq-ease), background-color var(--tq-d-fast) var(--tq-ease), color var(--tq-d-fast) var(--tq-ease);
}
.tq-sizefield.has-value .tq-sizefield__clear { opacity: 1; pointer-events: auto; }
.tq-sizefield__clear:hover { background: var(--tq-fill-2); color: var(--tq-text-strong); }
.tq-sizefield__clear .tq-i { inline-size: 18px; block-size: 18px; }
.tq-sizefield__read { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tq-sp-2) var(--tq-sp-5); min-block-size: 22px; margin: 0; font-size: var(--tq-fs-xs); color: var(--tq-text-subtle); }
.tq-sizefield__read b { font-family: var(--tq-font-display); font-size: var(--tq-fs-md); font-weight: var(--tq-fw-bold); color: var(--tq-text-strong); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.tq-sizefield__read .is-ok { display: inline-flex; align-items: center; gap: var(--tq-sp-2); color: var(--tq-success); font-weight: var(--tq-fw-semibold); }
.tq-sizefield__read .is-bad { color: var(--tq-danger); font-weight: var(--tq-fw-medium); }
@media (max-width: 559px) { .tq-sizefield__input, .tq-sizefield__mask { font-size: 23px; } .tq-sizefield__box { --sf-px: var(--tq-sp-6); } }

/* the sidewall — where the size is printed (a help diagram) */
.tq-sidewall { display: block; inline-size: 100%; max-inline-size: 320px; block-size: auto; color: var(--tq-text-strong); }
.tq-sidewall .sw-tire { fill: var(--tq-graphite-800); }
.tq-sidewall .sw-rim { fill: var(--tq-paper-300); }
.tq-sidewall .sw-text { fill: #FFFFFF; font-family: var(--tq-font-display); font-weight: 700; letter-spacing: .08em; }
.tq-sidewall .sw-hi { fill: var(--tq-brand-400); }


/* ═══ 20 · QUOTE · QTY · TOTALS ══════════════════════════════════════════
   The quote is a short list of lines — each tire set, then the fees that
   follow it — and the money at the foot. Every figure is computed in cents
   (tq.site.js, Torque.money) so a total is never a cent off.           */

.tq-qty {
  display: inline-flex;
  align-items: center;
  flex: none;
  block-size: 40px;
  border: 1px solid var(--tq-line-strong);
  border-radius: var(--tq-r-full);
  background: var(--tq-surface);
}
.tq-qty button {
  display: grid;
  place-items: center;
  inline-size: 38px;
  block-size: 38px;
  border-radius: 50%;
  color: var(--tq-text-muted);
  transition: background-color var(--tq-d-fast) var(--tq-ease), color var(--tq-d-fast) var(--tq-ease);
}
.tq-qty button:hover { background: var(--tq-fill-2); color: var(--tq-text-strong); }
.tq-qty button:disabled { opacity: .35; pointer-events: none; }
.tq-qty button svg { inline-size: 14px; block-size: 14px; }
.tq-qty input {
  inline-size: 2.6ch;
  block-size: 100%;
  border: 0;
  background: transparent;
  color: var(--tq-text-strong);
  font-family: var(--tq-font-display);
  font-size: var(--tq-fs-lg);
  font-weight: var(--tq-fw-bold);
  text-align: center;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}
.tq-qty input::-webkit-outer-spin-button, .tq-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tq-qty input:focus, .tq-qty input:focus-visible { outline: none; box-shadow: none; }
.tq-qty:focus-within { border-color: var(--tq-accent); box-shadow: 0 0 0 4px rgb(var(--tq-accent-rgb) / .14); }
.tq-qty > output, .tq-qty > span {           /* a stepper whose number is printed, not typed */
  min-inline-size: 2.6ch;
  text-align: center;
  font-family: var(--tq-font-display);
  font-size: var(--tq-fs-lg);
  font-weight: var(--tq-fw-bold);
  color: var(--tq-text-strong);
  font-variant-numeric: tabular-nums;
}

/* a quote line: thumb · what · qty · money */
.tq-qlines { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.tq-qline {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  grid-template-areas: "thumb what money" "thumb qty money";
  align-items: center;
  gap: var(--tq-sp-2) var(--tq-sp-5);
  padding-block: var(--tq-sp-6);
  border-block-end: 1px solid var(--tq-line-soft);
}
.tq-qline__thumb { grid-area: thumb; align-self: start; inline-size: 64px; block-size: 64px; border-radius: var(--tq-r-sm); background: var(--tq-bg-sunken); object-fit: cover; }
.tq-qline__what { grid-area: what; min-inline-size: 0; }
.tq-qline__name { margin: 0; font-size: var(--tq-fs-sm); font-weight: var(--tq-fw-semibold); color: var(--tq-text-strong); line-height: 1.35; }
.tq-qline__meta { margin: 2px 0 0; font-size: var(--tq-fs-xs); color: var(--tq-text-subtle); font-variant-numeric: tabular-nums; }
.tq-qline__qty { grid-area: qty; display: flex; align-items: center; gap: var(--tq-sp-4); }
.tq-qline__money { grid-area: money; align-self: start; text-align: end; font-family: var(--tq-font-display); font-size: var(--tq-fs-lg); font-weight: var(--tq-fw-bold); color: var(--tq-text-strong); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tq-qline__money small { display: block; font-family: var(--tq-font-sans); font-size: var(--tq-fs-xs); font-weight: var(--tq-fw-regular); color: var(--tq-text-subtle); }
.tq-qline__remove { font-size: var(--tq-fs-xs); font-weight: var(--tq-fw-medium); color: var(--tq-text-subtle); text-decoration: underline; text-underline-offset: 2px; }
.tq-qline__remove:hover { color: var(--tq-danger); }
.tq-qline.is-new { animation: tq-line-in var(--tq-d-slower) var(--tq-ease-out); }
@keyframes tq-line-in { from { background: var(--tq-brand-50); } to { background: transparent; } }

/* the fee rows under the sets */
.tq-fees { display: flex; flex-direction: column; gap: var(--tq-sp-3); margin: var(--tq-sp-6) 0 0; padding: 0; list-style: none; font-size: var(--tq-fs-sm); color: var(--tq-text-muted); }
.tq-fees li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--tq-sp-5); }
.tq-fees span:last-child { font-family: var(--tq-font-display); font-size: var(--tq-fs-md); font-weight: var(--tq-fw-semibold); color: var(--tq-text-body); font-variant-numeric: tabular-nums; }
.tq-fees small { color: var(--tq-text-subtle); }

/* totals — the money at the foot (the dash kit's 28 · totals, on paper) */
.tq-totals { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--tq-sp-3) 0; margin: 0; font-size: var(--tq-fs-sm); }   /* no column gap: the grand line runs unbroken */
.tq-totals dt { color: var(--tq-text-muted); }
.tq-totals dd { margin: 0; padding-inline-start: var(--tq-sp-6); text-align: end; font-family: var(--tq-font-display); font-size: var(--tq-fs-md); font-weight: var(--tq-fw-semibold); color: var(--tq-text-body); font-variant-numeric: tabular-nums; }
.tq-totals__note { margin-inline-start: var(--tq-sp-2); font-size: var(--tq-fs-xs); color: var(--tq-text-subtle); }
.tq-totals .is-grand { padding-block-start: var(--tq-sp-5); margin-block-start: var(--tq-sp-3); border-block-start: 2px solid var(--tq-text-strong); color: var(--tq-text-strong); font-weight: var(--tq-fw-semibold); }
.tq-totals dt.is-grand { font-size: var(--tq-fs-md); align-self: stretch; display: flex; align-items: flex-end; }   /* stretched, so its rule meets the amount's */
.tq-totals dd.is-grand { font-size: var(--tq-fs-3xl); font-weight: var(--tq-fw-bold); line-height: 1; }
.tq-totals .is-save { color: var(--tq-success); }
.tq-totals dd.is-save { color: var(--tq-success); }

/* the search inside the quote — find another tire and add it */
.tq-qsearch { position: relative; }
:is(ul, ol).tq-qsearch__list, .tq-qsearch__list {   /* :is() lifts it over the base list reset */
  position: absolute;
  inset-inline: 0;
  inset-block-start: calc(100% + 6px);
  z-index: var(--tq-z-popover);
  max-block-size: 320px;
  margin: 0;
  padding: 6px;
  border: 1px solid var(--tq-line);
  border-radius: var(--tq-r-md);
  background: var(--tq-overlay);
  box-shadow: var(--tq-el-4);
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.tq-qsearch__list[hidden] { display: none; }
.tq-qsearch__item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--tq-sp-5);
  padding: var(--tq-sp-3) var(--tq-sp-4);
  border-radius: var(--tq-r-sm);
  cursor: pointer;
  transition: background-color var(--tq-d-instant) var(--tq-ease);
}
.tq-qsearch__item.is-active, .tq-qsearch__item:hover { background: var(--tq-fill-2); }
.tq-qsearch__item img, .tq-qsearch__item .tq-qsearch__ph { inline-size: 44px; block-size: 44px; border-radius: var(--tq-r-xs); background: var(--tq-bg-sunken); object-fit: cover; }
.tq-qsearch__item b { display: block; font-size: var(--tq-fs-sm); font-weight: var(--tq-fw-semibold); color: var(--tq-text-strong); }
.tq-qsearch__item span { display: block; font-size: var(--tq-fs-xs); color: var(--tq-text-subtle); font-variant-numeric: tabular-nums; }
.tq-qsearch__item em { font-style: normal; font-family: var(--tq-font-display); font-weight: var(--tq-fw-bold); font-size: var(--tq-fs-md); color: var(--tq-text-strong); white-space: nowrap; }
.tq-qsearch__item mark { background: var(--tq-brand-100); color: inherit; border-radius: 3px; padding-inline: 1px; }
.tq-qsearch__empty { padding: var(--tq-sp-6); text-align: center; font-size: var(--tq-fs-sm); color: var(--tq-text-subtle); }

/* the sent state */
.tq-sent { display: grid; justify-items: center; gap: var(--tq-sp-5); padding: var(--tq-sp-10) var(--tq-sp-4); text-align: center; }
.tq-sent__mark { display: grid; place-items: center; inline-size: 72px; block-size: 72px; border-radius: 50%; background: rgb(var(--tq-success-rgb) / .1); color: var(--tq-success); }
.tq-sent__mark svg { inline-size: 36px; block-size: 36px; }
.tq-sent__mark path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: tq-draw .6s var(--tq-ease-out) .15s forwards; }
@keyframes tq-draw { to { stroke-dashoffset: 0; } }
.tq-sent__ref { font-family: var(--tq-font-display); font-size: var(--tq-fs-2xl); font-weight: var(--tq-fw-bold); letter-spacing: .04em; color: var(--tq-text-strong); }


/* ═══ 21 · REVIEWS · HOURS · CONTACT · MAP ═══════════════════════════════ */

.tq-review {
  display: flex;
  flex-direction: column;
  gap: var(--tq-sp-5);
  block-size: 100%;
  padding: var(--tq-sp-8);
  border: 1px solid var(--tq-line);
  border-radius: var(--tq-r-lg);
  background: var(--tq-surface);
  box-shadow: var(--tq-el-1);
}
.tq-review__text { margin: 0; font-size: var(--tq-fs-md); line-height: 1.65; color: var(--tq-text-body); text-wrap: pretty; }
.tq-review__who { display: flex; align-items: center; gap: var(--tq-sp-5); margin-block-start: auto; padding-block-start: var(--tq-sp-5); border-block-start: 1px solid var(--tq-line-soft); }
.tq-review__avatar {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 40px;
  block-size: 40px;
  border-radius: 50%;
  background: var(--tq-graphite-900);
  color: #FFFFFF;
  font-family: var(--tq-font-display);
  font-size: var(--tq-fs-md);
  font-weight: var(--tq-fw-bold);
}
.tq-review__name { display: block; font-size: var(--tq-fs-sm); font-weight: var(--tq-fw-semibold); color: var(--tq-text-strong); }
.tq-review__when { display: block; font-size: var(--tq-fs-xs); color: var(--tq-text-subtle); }
.tq-review__src { margin-inline-start: auto; font-size: var(--tq-fs-xs); font-weight: var(--tq-fw-semibold); color: var(--tq-text-subtle); }
.tq-score { display: flex; flex-direction: column; align-items: flex-start; gap: var(--tq-sp-4); }
.tq-score__v { font-family: var(--tq-font-display); font-size: clamp(3.5rem, 2.6rem + 3vw, 5rem); font-weight: var(--tq-fw-bold); line-height: .9; color: var(--tq-text-strong); font-variant-numeric: tabular-nums; }
.tq-score__k { font-size: var(--tq-fs-sm); color: var(--tq-text-muted); }

/* hours — today is marked, the open-now read-out sits above */
.tq-hours { inline-size: 100%; border-collapse: collapse; font-size: var(--tq-fs-sm); font-variant-numeric: tabular-nums; }
.tq-hours th, .tq-hours td { padding: 9px 0; border-block-end: 1px solid var(--tq-line-soft); text-align: start; font-weight: var(--tq-fw-regular); color: var(--tq-text-muted); }
.tq-hours td { text-align: end; color: var(--tq-text-body); }
.tq-hours tr:last-child th, .tq-hours tr:last-child td { border-block-end: 0; }
.tq-hours tr.is-today th, .tq-hours tr.is-today td { color: var(--tq-text-strong); font-weight: var(--tq-fw-semibold); }
.tq-hours tr.is-today th::after { content: "Today"; margin-inline-start: var(--tq-sp-4); padding: 2px 7px; border-radius: var(--tq-r-full); background: var(--tq-accent-soft); color: var(--tq-accent-text); font-family: var(--tq-font-display); font-size: var(--tq-fs-3xs); font-weight: var(--tq-fw-bold); letter-spacing: .08em; text-transform: uppercase; vertical-align: 1px; }
.tq-hours .is-closed { color: var(--tq-text-subtle); }

/* contact lines — an icon, a label, the thing itself */
.tq-contact { display: flex; flex-direction: column; gap: var(--tq-sp-6); margin: 0; padding: 0; list-style: none; }
.tq-contact li { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: var(--tq-sp-5); }
.tq-contact .tq-tile { inline-size: 44px; block-size: 44px; border-radius: var(--tq-r-sm); }
.tq-contact .tq-tile .tq-i { inline-size: 20px; block-size: 20px; }
.tq-contact small { display: block; font-size: var(--tq-fs-xs); color: var(--tq-text-subtle); }
.tq-contact a, .tq-contact span { font-size: var(--tq-fs-md); font-weight: var(--tq-fw-semibold); color: var(--tq-text-strong); text-decoration: none; }
.tq-contact a:hover { color: var(--tq-accent-text); }

/* the map frame — an iframe, or a placeholder until one is set */
.tq-map { position: relative; overflow: hidden; border-radius: var(--tq-r-xl); background: var(--tq-bg-sunken); aspect-ratio: 16 / 11; }
.tq-map iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; }
.tq-map__ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--tq-sp-5);
  padding: var(--tq-sp-8);
  text-align: center;
  color: var(--tq-text-muted);
  background:
    repeating-linear-gradient(90deg, transparent 0 39px, rgb(var(--tq-steel-rgb) / .05) 39px 40px),
    repeating-linear-gradient(0deg, transparent 0 39px, rgb(var(--tq-steel-rgb) / .05) 39px 40px),
    var(--tq-paper-200);
}
.tq-map__pin { display: grid; place-items: center; inline-size: 56px; block-size: 56px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--tq-accent); color: #FFFFFF; box-shadow: 0 14px 24px -12px rgb(var(--tq-accent-rgb) / .8); }
.tq-map__pin .tq-i { transform: rotate(45deg); inline-size: 24px; block-size: 24px; }


/* ═══ 22 · WEBFORMS LAYER ════════════════════════════════════════════════
   Server controls choose their own markup at render time: an asp:Button is
   an <input type="submit">, a validator arrives with style="color:Red", a
   list control wraps its items in a table or spans of its own. This layer
   works three ways (ported from arxeon.webforms.css):
     · element rules keyed on what is always true (input[type=submit] …)
     · defensive rules that hold for either wrapper shape a control emits
     · the runtime upgrader in tq.site.js, which READS the rendered DOM and
       rebuilds checkboxes and radios as .tq-check — never predicting it.
   CssClass cheat-sheet
     asp:TextBox           tq-input  (TextMode=MultiLine → tq-textarea)
     asp:DropDownList      tq-native-select   + data-tq-select to upgrade
     asp:Button            tq-btn tq-btn--primary
     asp:LinkButton        tq-btn tq-btn--secondary
     asp:CheckBox          tq-wf-check
     asp:CheckBoxList      tq-wf-list        asp:RadioButtonList  tq-wf-list
     asp:FileUpload        tq-wf-file
     validators            tq-error  + data-tq-validates="<field ClientID>"
     asp:ValidationSummary tq-wf-summary
     asp:UpdatePanel       add data-tq-updating to its wrapper to dim it
   ===================================================================== */

/* 1 · a button that is an <input>: no pseudo-elements, so no lane and no
   spinner — and the label is centred by line-height alone, which must be
   the CONTENT box: the button's height less its two 1px borders. */
input[type="submit"].tq-btn,
input[type="button"].tq-btn,
input[type="reset"].tq-btn {
  display: inline-block;
  padding-block: 0;
  line-height: calc(var(--btn-h) - 2px);
  text-align: center;
  overflow: visible;
}
input[type="submit"].tq-btn::-moz-focus-inner { border: 0; padding: 0; }
a.tq-btn { text-decoration: none; }
.tq-btn--link:is(a) { text-decoration: underline; }

/* 2 · validators: the framework writes color:Red inline — an inline style
   outranks every class, so !important is the right tool, used only here. */
span.tq-error, .tq-wf-validator {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--tq-sp-3);
  color: var(--tq-danger) !important;
  font-size: var(--tq-fs-xs) !important;
  font-weight: var(--tq-fw-medium);
  line-height: 1.5;
}
span.tq-error[style*="visibility:hidden"], span.tq-error[style*="visibility: hidden"] { visibility: hidden !important; }
.tq-wf-summary {
  padding: var(--tq-sp-6) var(--tq-sp-7);
  border: 1px solid rgb(var(--tq-danger-rgb) / .22);
  border-radius: var(--tq-r-md);
  background: rgb(var(--tq-danger-rgb) / .05);
  color: var(--tq-danger) !important;
  font-size: var(--tq-fs-sm);
}
.tq-wf-summary ul { margin: 0; padding-inline-start: var(--tq-sp-7); }
.tq-wf-summary li { margin-block: var(--tq-sp-2); }
.tq-wf-failure { color: var(--tq-danger) !important; font-size: var(--tq-fs-sm); }

/* 3 · checkbox / radio lists — right before the upgrade, and after it */
.tq-wf-check, .tq-wf-list { font-size: var(--tq-fs-md); color: var(--tq-text-body); }
.tq-wf-check input[type="checkbox"], .tq-wf-check input[type="radio"],
.tq-wf-list input[type="checkbox"], .tq-wf-list input[type="radio"] {
  inline-size: 18px;
  block-size: 18px;
  margin: 0 var(--tq-sp-4) 0 0;
  vertical-align: -3px;
  accent-color: var(--tq-accent);
  cursor: pointer;
}
.tq-wf-check label, .tq-wf-list label { margin-inline-end: var(--tq-sp-7); color: inherit; cursor: pointer; }
.tq-wf-list table { border-collapse: separate; border-spacing: 0 var(--tq-sp-3); }
.tq-wf-list td { padding-inline-end: var(--tq-sp-7); vertical-align: middle; }
.tq-wf-list.is-upgraded { display: flex; flex-wrap: wrap; gap: var(--tq-sp-5) var(--tq-sp-8); }
.tq-wf-list.is-upgraded.tq-wf-list--stack { flex-direction: column; gap: var(--tq-sp-5); }
.tq-wf-list.is-upgraded table, .tq-wf-list.is-upgraded tbody,
.tq-wf-list.is-upgraded tr, .tq-wf-list.is-upgraded td { display: contents; }
.tq-wf-list.is-upgraded br { display: none; }

/* 4 · file upload */
.tq-wf-file, input[type="file"].tq-input {
  inline-size: 100%;
  block-size: var(--tq-control-h);
  padding: 0;
  border: 1px solid var(--tq-line-strong);
  border-radius: var(--tq-r-sm);
  background: var(--tq-surface);
  color: var(--tq-text-muted);
  font-size: var(--tq-fs-sm);
  line-height: calc(var(--tq-control-h) - 2px);
  cursor: pointer;
}
.tq-wf-file::file-selector-button, input[type="file"].tq-input::file-selector-button {
  block-size: calc(var(--tq-control-h) - 2px);
  margin-inline-end: var(--tq-sp-6);
  padding-inline: var(--tq-sp-7);
  border: 0;
  border-inline-end: 1px solid var(--tq-line);
  background: var(--tq-surface-2);
  color: var(--tq-text-strong);
  font: inherit;
  font-weight: var(--tq-fw-semibold);
  cursor: pointer;
  transition: background-color var(--tq-d-fast) var(--tq-ease);
}
.tq-wf-file:hover::file-selector-button { background: var(--tq-surface-3); }

/* 5 · an UpdatePanel in flight dims in place; the page never jumps */
.tq-wf-updating { position: relative; pointer-events: none; }
.tq-wf-updating::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  background: rgb(var(--tq-white-rgb) / .6);
  animation: tq-fade-in var(--tq-d-base) var(--tq-ease) both;
}
@keyframes tq-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* 6 · the rest of what the framework writes */
form[id] > div:first-child:not([class]) { line-height: 0; font-size: 0; }   /* ScriptManager's hidden wrapper */
input[type="hidden"] { display: none !important; }
.tq-hp { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* the honeypot */


/* ═══ 23 · MOTION · FORCED COLOURS · PRINT ═══════════════════════════════
   The tokens already collapse every duration to 1ms under reduced motion;
   what is left here are the few things that LOOP, which a 1ms duration
   would only make flicker.                                               */

@media (prefers-reduced-motion: reduce) {
  .tq-dot--live::after, .tq-dots i, .tq-skeleton::after { animation: none; }
  .tq-lane-loader::after, .tq-topbar::after { animation: none; }
  .tq-spinner { animation-duration: 1.6s; }
  .tq-btn:hover, .tq-card--interactive:hover, .tq-tire:hover, .tq-chip:hover, .tq-choice:hover { transform: none; }
  .tq-tire:hover .tq-tire__media > img, .tq-card--interactive:hover .tq-card__media > img { transform: none; }
  .tq-sheet [data-tq-sheet-item] { opacity: 1; transform: none; transition: none; }
  .tq-sent__mark path { stroke-dashoffset: 0; animation: none; }
}

@media (forced-colors: active) {
  .tq-btn { border: 1px solid ButtonText; }
  .tq-btn--primary { background: Highlight; color: HighlightText; }
  .tq-check__box, .tq-switch__track, .tq-qty, .tq-sizefield__box, .tq-combo { border: 1px solid CanvasText; }
  .tq-check input:checked ~ .tq-check__box { background: Highlight; }
  .tq-switch input:checked ~ .tq-switch__track { background: Highlight; }
  .tq-header__lane, .tq-header__node, .tq-hero__band::after, .tq-footer::before, .tq-tabs__ink { background: CanvasText; }
  .tq-stars { background: CanvasText; }
  .tq-select__opt.is-active { outline: 2px solid Highlight; }
}

@media print {
  .tq-topstrip, .tq-header, .tq-sheet, .tq-actionbar, .tq-toast-region, .tq-topbar, .tq-backdrop, .tq-finder, .tq-cta__actions { display: none !important; }
  .tq-hero__band, .tq-pagehead, .tq-footer, .tq-cta { background: none !important; color: #000 !important; }
  .tq-tire, .tq-card, .tq-review, .tq-panel { box-shadow: none !important; break-inside: avoid; }
  body:has(.tq-actionbar) { padding-block-end: 0; }
}