/* ============================================================================
   site-2026.css — the Thata public site.

   Implements the approved design package (Thata_Tyres_New_Website_Package):
   near-black ground, Barlow Condensed uppercase headings, Inter body, one red.

   This is the ONLY stylesheet the public pages and the customer portal load.
   `site.css` and `site-thata.css` were dropped from the shell once the portal
   moved onto these components — 1,196 lines that no page rendered any more.

   ⚠️ EVERY class in here is still prefixed `tt-`, and should stay that way. It
   costs nothing and it is what makes it safe to load a second stylesheet beside
   this one later without two `.container` rules quietly fighting.

   ⚠️ The reset below is load-bearing — see the note on it. Removing `site.css`
   took `box-sizing: border-box` with it and broke every form on the site.

   Palette note: the design package draws its red as #e11b22. The platform's
   shared accent — the Desk, Glovebox and the app all use it — is #D63E3E, so
   that is the flat colour, with the package's hotter red kept for the button
   gradient. Change `--tt-red` alone to move the whole site.
   ========================================================================== */

:root {
  --tt-red:        #d63e3e;   /* shared with desk.css and mobile/src/v2/theme.js */
  --tt-red-hot:    #e11b22;   /* gradient top, per the design package */
  --tt-red-deep:   #b70f16;
  --tt-red-soft:   rgba(214, 62, 62, .14);
  --tt-red-glow:   rgba(214, 62, 62, .27);

  --tt-black:      #07080a;
  --tt-charcoal:   #101216;
  --tt-panel:      #15181d;
  --tt-panel-2:    #1a1e24;
  --tt-line:       rgba(255, 255, 255, .11);
  --tt-line-soft:  rgba(255, 255, 255, .06);

  --tt-text:       #f6f7f8;
  --tt-dim:        #d6d8dc;
  --tt-muted:      #b2b6bd;
  --tt-steel:      #8b919a;

  --tt-r-sm:       12px;
  --tt-r:          18px;
  --tt-r-lg:       26px;
  --tt-shadow:     0 20px 55px rgba(0, 0, 0, .35);
  --tt-container:  1240px;

  --tt-head: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --tt-body: Inter, "Segoe UI", system-ui, Arial, sans-serif;
}

/* ── Reset ──────────────────────────────────────────────────────────────────
   🚨 This block is load-bearing and was added late, after `site.css` was dropped
   from the shell. `site.css` had been supplying `box-sizing: border-box`, and
   without it every `.tt-field input` — `width:100%` plus 28px of padding and 2px
   of border — computes WIDER than its grid cell. The form inputs overflowed,
   swallowed the 14px gap between them and butted together with square corners.
   It looked like the grid had broken; it was the box model.

   Bare element selectors are fine here now: this is the only stylesheet the
   public pages load. Keep the `tt-` prefix on everything else regardless — it is
   what makes it safe to load a second stylesheet alongside this one later. */
*, *::before, *::after { box-sizing: border-box; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

/* ── Ground ─────────────────────────────────────────────────────────────── */
html.tt { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; }

body.tt {
  margin: 0;
  color: var(--tt-text);
  font-family: var(--tt-body);
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 78% 8%, rgba(214, 62, 62, .10), transparent 28%),
    linear-gradient(180deg, #08090b 0%, #0b0d10 55%, #08090b 100%);
  /* 🚨 No `background-attachment: fixed` here. Combined with the fixed grain
     layer below it forces a full-page repaint on every scroll frame, and on a
     page this long Chrome's renderer stops keeping up — scrolling stalls and
     the page intermittently paints blank white. The design package does not use
     it either. Leave the background scrolling with the document. */
}

/* The film-grain wash from the design package. Purely atmospheric, and behind
   pointer-events:none so it can never eat a click.

   🚨 The SVG carries explicit `width='180' height='180'` and the layer tiles it.
   The design package's version omitted both, which leaves the image with no
   intrinsic size — so Chrome stretches one copy across the whole viewport and
   re-rasterises a `feTurbulence` filter at that size on every paint. On a page
   this long that stalls the renderer outright: scrolling stops responding and
   the page paints blank white. As a 180px tile it rasterises once and repeats.

   `background-size` is pinned to match, so a future edit to the viewBox cannot
   quietly bring the full-viewport raster back. */
body.tt::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: .032;
  background-repeat: repeat;
  background-size: 180px 180px;
  background-image: url("data:image/svg+xml,%3Csvg width='180' height='180' viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

/* ── Layout primitives ──────────────────────────────────────────────────── */
.tt-container { width: min(calc(100% - 40px), var(--tt-container)); margin-inline: auto; }
.tt-section   { padding: 92px 0; position: relative; }
.tt-section--tight { padding: 64px 0; }
.tt-section--flush { padding-top: 0; }
.tt-section--panel { background: rgba(255, 255, 255, .015); border-block: 1px solid var(--tt-line-soft); }

.tt-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  color: #ff6b6b;
  font-family: var(--tt-head);
  font-size: .98rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.tt-eyebrow::before {
  content: "";
  width: 32px;
  height: 2px;
  border-radius: 99px;
  background: var(--tt-red);
  flex: 0 0 auto;
}

.tt-h1, .tt-h2, .tt-h3, .tt-h4 {
  margin: 0;
  font-family: var(--tt-head);
  line-height: .98;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--tt-text);
}
/* Sized against the design reference at 1440px: h1 ~68px, h2 ~46px. The package's
   own clamps ran to 6.7rem and 4.7rem, which put "TRUCK BREAKDOWN?" onto three
   lines and pushed the request form below the fold on a laptop. */
.tt-h1 { font-size: clamp(2.7rem, 4.9vw, 4.5rem); font-weight: 800; }
.tt-h2 { font-size: clamp(2rem, 3.2vw, 3rem);     font-weight: 800; }
.tt-h3 { font-size: 1.55rem; font-weight: 700; }
.tt-h4 { font-size: 1.1rem;  font-weight: 700; letter-spacing: .06em; }
.tt-h1 .tt-accent, .tt-h2 .tt-accent { color: var(--tt-red); display: block; }

.tt-lead  { max-width: 690px; margin: 0; color: var(--tt-dim); font-size: clamp(1rem, 1.7vw, 1.15rem); }
.tt-muted { color: var(--tt-muted); }
.tt-p     { margin: 0; color: var(--tt-muted); }
/* Paragraph spacing keys off the WRAPPER, not the paragraph's class. `para()` is
   called with cls='' in a dozen places (inside cards, steps and FAQ answers),
   and those bare <p> elements would otherwise run together now that the reset
   above zeroes their default margin. */
.tt-prose p + p { margin-top: 1em; }

.tt-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 34px;
  align-items: end;
  margin-bottom: 46px;
}
.tt-section-head .tt-lead { color: var(--tt-muted); }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.tt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 13px;
  font-family: var(--tt-head);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .055em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.tt-btn:hover { transform: translateY(-2px); }
.tt-btn--primary {
  background: linear-gradient(135deg, var(--tt-red-hot), var(--tt-red-deep));
  box-shadow: 0 13px 32px var(--tt-red-glow);
}
.tt-btn--primary:hover { background: linear-gradient(135deg, #fa343b, #c5121a); }
.tt-btn--outline {
  border-color: rgba(255, 255, 255, .32);
  background: rgba(5, 6, 8, .48);
}
.tt-btn--outline:hover { border-color: #fff; background: rgba(255, 255, 255, .07); }
.tt-btn--dark { border-color: var(--tt-line); background: #0b0d10; }
.tt-btn--dark:hover { border-color: rgba(214, 62, 62, .7); }
.tt-btn--wide { width: 100%; }

.tt-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--tt-red);
  font-family: var(--tt-head);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
}
.tt-link::after { content: "\2192"; transition: transform .18s ease; }
.tt-link:hover::after { transform: translateX(4px); }

/* ── Emergency bar ──────────────────────────────────────────────────────── */
.tt-emergency {
  position: relative;
  z-index: 60;
  background: linear-gradient(90deg, var(--tt-red-deep), var(--tt-red-hot) 55%, var(--tt-red-deep));
  font-size: .87rem;
}
.tt-emergency .tt-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  min-height: 40px;
  padding-block: 6px;
}
.tt-emergency a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.tt-emergency a:hover { text-decoration: underline; }
.tt-emergency strong { font-family: var(--tt-head); font-size: 1.08rem; letter-spacing: .04em; }
.tt-emergency-sep { width: 1px; height: 15px; background: rgba(255, 255, 255, .4); }

/* ── Header / nav ───────────────────────────────────────────────────────── */
.tt-header {
  position: sticky;
  top: 0;
  z-index: 55;
  background: rgba(7, 8, 10, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--tt-line-soft);
}
.tt-nav {
  display: flex;
  align-items: center;
  gap: 26px;
  min-height: 76px;
}
.tt-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: 0 0 auto; min-width: 0; }
.tt-brand img { height: 46px; width: auto; display: block; }
/* Hidden until the logo image fails — the image already carries the wordmark.
   The inline `onerror` in base_public.html is what reveals it. */
.tt-brand-word {
  display: none;
  font-family: var(--tt-head);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
}
.tt-brand-word span { color: var(--tt-red); }

.tt-nav-links { display: flex; align-items: center; gap: 22px; margin-inline: auto; }
.tt-nav-links a {
  position: relative;
  padding: 6px 0;
  color: var(--tt-muted);
  font-family: var(--tt-head);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: color .18s ease;
}
.tt-nav-links a:hover { color: #fff; }
.tt-nav-links a.is-active { color: #fff; }
.tt-nav-links a.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  border-radius: 99px;
  background: var(--tt-red);
}

.tt-nav-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.tt-nav-phone {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 18px 9px 11px;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--tt-red-hot), var(--tt-red-deep));
  box-shadow: 0 10px 26px var(--tt-red-glow);
  color: #fff;
  text-decoration: none;
}
.tt-nav-phone .tt-nav-phone-icon {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  font-size: 1rem;
}
.tt-nav-phone-label { font-size: .64rem; letter-spacing: .17em; text-transform: uppercase; opacity: .85; line-height: 1.3; }
.tt-nav-phone-number { font-family: var(--tt-head); font-size: 1.22rem; font-weight: 700; letter-spacing: .03em; line-height: 1.05; }

.tt-burger {
  display: none;
  width: 46px; height: 46px;
  border: 1px solid var(--tt-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  color: #fff;
  font-size: 1.25rem;
  cursor: pointer;
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.tt-hero { position: relative; overflow: hidden; padding: 74px 0 84px; }
.tt-hero-bg { position: absolute; inset: 0; z-index: 0; }
.tt-hero-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tt-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(7, 8, 10, .96) 0%, rgba(7, 8, 10, .78) 42%, rgba(7, 8, 10, .55) 100%),
    linear-gradient(180deg, rgba(7, 8, 10, .5) 0%, transparent 30%, rgba(7, 8, 10, .9) 100%);
}
.tt-hero .tt-container { position: relative; z-index: 1; }
.tt-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: 54px;
  align-items: center;
}
.tt-hero-copy .tt-h1 { margin-bottom: 22px; }
.tt-hero-copy .tt-lead { margin-bottom: 30px; }
.tt-hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-bottom: 38px; }

.tt-proof {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  padding-top: 26px;
  border-top: 1px solid var(--tt-line);
}
.tt-proof-item strong {
  display: block;
  font-family: var(--tt-head);
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.tt-proof-item span { display: block; color: var(--tt-steel); font-size: .84rem; }
.tt-proof-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--tt-red); margin-bottom: 9px; box-shadow: 0 0 0 4px var(--tt-red-soft); }

/* ── Form card (hero right-hand panel, and reused standalone) ───────────── */
.tt-card {
  padding: 28px;
  border: 1px solid var(--tt-line);
  border-radius: var(--tt-r-lg);
  background: linear-gradient(165deg, rgba(26, 30, 36, .97), rgba(13, 15, 19, .97));
  box-shadow: var(--tt-shadow);
}
.tt-card > .tt-h3 { margin-bottom: 8px; }
.tt-card-note { margin-top: 14px; color: var(--tt-steel); font-size: .8rem; line-height: 1.5; }

.tt-form { display: grid; gap: 14px; margin-top: 20px; }
.tt-form--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tt-field { display: grid; gap: 6px; }
.tt-field--full { grid-column: 1 / -1; }
.tt-field label {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tt-steel);
}
.tt-field label .tt-req { color: var(--tt-red); }
.tt-field input,
.tt-field select,
.tt-field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--tt-line);
  border-radius: var(--tt-r-sm);
  background: rgba(7, 8, 10, .72);
  color: var(--tt-text);
  font-family: var(--tt-body);
  font-size: .95rem;
}
.tt-field textarea { min-height: 104px; resize: vertical; }
.tt-field input::placeholder, .tt-field textarea::placeholder { color: #6f757e; }
.tt-field input:focus, .tt-field select:focus, .tt-field textarea:focus {
  outline: none;
  border-color: var(--tt-red);
  box-shadow: 0 0 0 3px var(--tt-red-soft);
}
.tt-field input[type="file"] { padding: 10px 12px; color: var(--tt-muted); }

/* ── Quick strip ────────────────────────────────────────────────────────── */
.tt-quick { border-block: 1px solid var(--tt-line); background: rgba(255, 255, 255, .02); }
.tt-quick-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.tt-quick-item {
  padding: 26px 20px;
  border-left: 1px solid var(--tt-line-soft);
  text-decoration: none;
  transition: background .18s ease;
}
.tt-quick-item:first-child { border-left: 0; }
.tt-quick-item:hover { background: rgba(214, 62, 62, .07); }
.tt-quick-num { display: block; color: var(--tt-red); font-family: var(--tt-head); font-size: .95rem; font-weight: 700; letter-spacing: .16em; }
.tt-quick-item strong { display: block; margin: 6px 0 3px; color: #fff; font-family: var(--tt-head); font-size: 1.16rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.tt-quick-item span:last-child { display: block; color: var(--tt-steel); font-size: .83rem; line-height: 1.45; }

/* ── Service cards ──────────────────────────────────────────────────────── */
.tt-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 22px;
}
.tt-card-item {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--tt-line);
  border-radius: var(--tt-r);
  background: linear-gradient(180deg, var(--tt-panel-2), var(--tt-charcoal));
  text-decoration: none;
  transition: transform .2s ease, border-color .2s ease;
}
.tt-card-item:hover { transform: translateY(-4px); border-color: rgba(214, 62, 62, .55); }
.tt-card-media { aspect-ratio: 16 / 9; overflow: hidden; background: #0b0d10; position: relative; }
.tt-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tt-card-body { display: flex; flex-direction: column; gap: 11px; padding: 24px; flex: 1; }
.tt-card-index { color: var(--tt-red); font-family: var(--tt-head); font-size: .95rem; font-weight: 700; letter-spacing: .18em; }
.tt-card-body .tt-h3 { color: #fff; }
.tt-card-body p { margin: 0; color: var(--tt-muted); font-size: .94rem; line-height: 1.6; }
.tt-card-body .tt-link { margin-top: auto; padding-top: 6px; }

/* ── Split (image + copy) ───────────────────────────────────────────────── */
.tt-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 46px;
  align-items: center;
}
.tt-split--flip .tt-split-media { order: 2; }
.tt-split-media {
  overflow: hidden;
  border: 1px solid var(--tt-line);
  border-radius: var(--tt-r-lg);
  aspect-ratio: 4 / 3;
  position: relative;
}
.tt-split-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tt-split-copy .tt-h2 { margin-bottom: 18px; }
.tt-split-copy .tt-p { margin-bottom: 22px; }

.tt-checks { display: grid; gap: 11px; margin: 0 0 26px; padding: 0; list-style: none; }
.tt-checks li { display: flex; gap: 12px; align-items: flex-start; color: var(--tt-dim); font-size: .95rem; }
.tt-checks li::before {
  content: "\2713";
  flex: 0 0 auto;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--tt-red-soft);
  color: var(--tt-red);
  font-size: .78rem;
  font-weight: 700;
  margin-top: 1px;
}

/* ── Process steps ──────────────────────────────────────────────────────── */
.tt-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 20px;
  margin-top: 44px;
}
.tt-step {
  position: relative;
  padding: 28px 22px 26px;
  border: 1px solid var(--tt-line);
  border-radius: var(--tt-r);
  background: rgba(255, 255, 255, .022);
}
.tt-step-num {
  display: block;
  margin-bottom: 14px;
  color: rgba(214, 62, 62, .55);
  font-family: var(--tt-head);
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
}
.tt-step .tt-h3 { font-size: 1.28rem; margin-bottom: 9px; }
.tt-step p { margin: 0; color: var(--tt-muted); font-size: .9rem; line-height: 1.6; }

/* ── Feature grid (fleet band) ──────────────────────────────────────────── */
.tt-features { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 22px; }
.tt-feature {
  position: relative;
  overflow: hidden;
  min-height: 460px;
  border: 1px solid var(--tt-line);
  border-radius: var(--tt-r-lg);
  display: flex;
  align-items: flex-end;
}
.tt-feature > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tt-feature-body {
  position: relative;
  padding: 38px;
  background: linear-gradient(0deg, rgba(7, 8, 10, .95) 12%, rgba(7, 8, 10, .7) 55%, transparent);
  width: 100%;
}
.tt-feature-body .tt-h2 { margin-bottom: 14px; }
.tt-feature-body .tt-p { margin-bottom: 24px; max-width: 52ch; }

.tt-stack { display: grid; gap: 22px; }
.tt-mini {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--tt-line);
  border-radius: var(--tt-r);
  background: var(--tt-panel);
}
.tt-mini > .tt-mini-media { position: relative; }
.tt-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tt-mini-body { padding: 22px; }
.tt-mini-body .tt-eyebrow { margin-bottom: 8px; font-size: .82rem; }
.tt-mini-body .tt-h3 { font-size: 1.2rem; margin-bottom: 8px; }
.tt-mini-body p { margin: 0; color: var(--tt-muted); font-size: .88rem; line-height: 1.55; }

/* ── Stats ──────────────────────────────────────────────────────────────── */
.tt-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; }
.tt-stat {
  padding: 30px 24px;
  border: 1px solid var(--tt-line);
  border-radius: var(--tt-r);
  background: rgba(255, 255, 255, .022);
  text-align: center;
}
.tt-stat-num {
  font-family: var(--tt-head);
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  font-weight: 800;
  line-height: 1;
  color: var(--tt-red);
  font-variant-numeric: tabular-nums;
}
.tt-stat-label { margin-top: 10px; color: var(--tt-steel); font-size: .8rem; letter-spacing: .13em; text-transform: uppercase; }

/* ── Track card ─────────────────────────────────────────────────────────── */
.tt-track {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--tt-line);
  border-radius: var(--tt-r-lg);
  background: linear-gradient(150deg, var(--tt-panel-2), var(--tt-black));
}
.tt-track-copy { padding: 46px; }
.tt-track-copy .tt-h2 { margin-bottom: 14px; }
.tt-track-media { position: relative; min-height: 300px; }
.tt-track-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tt-track-form { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.tt-track-form input {
  flex: 1 1 240px;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid var(--tt-line);
  border-radius: var(--tt-r-sm);
  background: rgba(7, 8, 10, .72);
  color: var(--tt-text);
  font-family: var(--tt-body);
  font-size: .95rem;
}
.tt-track-form input:focus { outline: none; border-color: var(--tt-red); box-shadow: 0 0 0 3px var(--tt-red-soft); }

.tt-result {
  margin-top: 26px;
  padding: 22px;
  border: 1px solid var(--tt-line);
  border-left: 3px solid var(--tt-red);
  border-radius: var(--tt-r-sm);
  background: rgba(7, 8, 10, .55);
}
.tt-result-rows { display: grid; gap: 9px; margin-top: 14px; }
.tt-result-row { display: flex; justify-content: space-between; gap: 18px; font-size: .92rem; }
.tt-result-row span:first-child { color: var(--tt-steel); }
.tt-result-row span:last-child { color: #fff; font-weight: 600; text-align: right; }

.tt-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 13px;
  border-radius: 99px;
  background: var(--tt-red-soft);
  color: #ff8080;
  font-family: var(--tt-head);
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.tt-faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 46px; align-items: start; }
.tt-faq-list { display: grid; gap: 12px; }
.tt-faq-list details {
  padding: 20px 22px;
  border: 1px solid var(--tt-line);
  border-radius: var(--tt-r);
  background: rgba(255, 255, 255, .022);
}
.tt-faq-list details[open] { border-color: rgba(214, 62, 62, .45); }
.tt-faq-list summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--tt-head);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #fff;
}
.tt-faq-list summary::-webkit-details-marker { display: none; }
.tt-faq-list summary::after { content: "+"; float: right; color: var(--tt-red); font-size: 1.4rem; line-height: 1; }
.tt-faq-list details[open] summary::after { content: "\2013"; }
.tt-faq-list details p { margin: 12px 0 0; color: var(--tt-muted); font-size: .94rem; line-height: 1.65; }

/* ── CTA band ───────────────────────────────────────────────────────────── */
.tt-cta { padding: 66px 0; background: linear-gradient(120deg, #16090b 0%, #24090c 48%, #120608 100%); border-block: 1px solid rgba(214, 62, 62, .28); }
.tt-cta-box { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; }
.tt-cta-box .tt-h2 { margin-bottom: 10px; }
.tt-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.tt-footer { padding: 62px 0 0; background: var(--tt-black); border-top: 1px solid var(--tt-line); }
.tt-footer-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 38px; }
.tt-footer-logo { height: 54px; width: auto; margin-bottom: 16px; }
.tt-footer-brand p { margin: 0; color: var(--tt-steel); font-size: .9rem; line-height: 1.65; max-width: 38ch; }
.tt-footer-social { display: flex; gap: 10px; margin-top: 16px; }
.tt-footer-social a {
  padding: 6px 14px;
  border: 1px solid var(--tt-line);
  border-radius: 99px;
  color: var(--tt-steel);
  font-size: .82rem;
  text-decoration: none;
}
.tt-footer-social a:hover { border-color: var(--tt-red); color: var(--tt-red); }
.tt-footer-col h4 { margin: 0 0 16px; font-family: var(--tt-head); font-size: 1rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: #fff; }
.tt-footer-col a, .tt-footer-col span { display: block; margin-bottom: 9px; color: var(--tt-steel); font-size: .9rem; text-decoration: none; white-space: pre-line; }
.tt-footer-col a:hover { color: var(--tt-red); }
.tt-footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  margin-top: 46px; padding: 22px 0;
  border-top: 1px solid var(--tt-line-soft);
  color: #6f757e; font-size: .82rem;
}

/* ── Flash / alerts ─────────────────────────────────────────────────────── */
.tt-flash {
  position: fixed;
  top: 92px; right: 22px;
  z-index: 120;
  max-width: 420px;
  padding: 16px 20px;
  border: 1px solid var(--tt-line);
  border-left: 3px solid var(--tt-red);
  border-radius: var(--tt-r-sm);
  background: rgba(21, 24, 29, .97);
  box-shadow: var(--tt-shadow);
  color: var(--tt-text);
  font-size: .92rem;
  line-height: 1.55;
}
.tt-flash--success { border-left-color: #3fbf6a; }
.tt-flash--error   { border-left-color: #e5484d; }
.tt-flash-ref { display: block; margin-top: 8px; font-family: var(--tt-head); font-size: 1.35rem; letter-spacing: .08em; color: var(--tt-red); }

/* ══ Customer portal ══════════════════════════════════════════════════════
   /portal, /portal/job/{ref} and the not-found page. These used to be styled by
   the old site.css with per-element inline styles — six different hand-written
   status pills, each with its own rgba() literal. The states are named here
   instead, so "completed", "paid" and "delivered" are one colour by definition
   rather than by three people happening to pick the same green.
   ────────────────────────────────────────────────────────────────────────── */
:root {
  --tt-ok:   #3fbf6a;   /* completed · paid · delivered */
  --tt-warn: #f5a524;   /* in progress · awaiting payment · ready */
  --tt-bad:  #e5484d;   /* overdue */
  --tt-dead: #8b919a;   /* cancelled · scrapped */
  --tt-info: #6fa8ff;   /* a plant stage, mid-pipeline */
}

/* A short hero for interior pages that are a lookup rather than a pitch. */
.tt-page-hero { padding: 54px 0 40px; border-bottom: 1px solid var(--tt-line); }
.tt-page-hero .tt-h1 { font-size: clamp(2.1rem, 3.6vw, 3.2rem); }
.tt-page-hero .tt-lead { margin-top: 16px; }
.tt-back {
  display: inline-block;
  margin-top: 18px;
  color: var(--tt-steel);
  font-size: .85rem;
  text-decoration: none;
}
.tt-back:hover { color: var(--tt-red); }

.tt-narrow { max-width: 780px; margin-inline: auto; }

/* Group heading with a rule under it — "Breakdown Jobs (3)". */
.tt-group {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 34px 0 14px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--tt-line);
  color: var(--tt-steel);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.tt-group:first-child { margin-top: 0; }

/* A row in a list of jobs, invoices or deliveries. */
.tt-list { display: grid; gap: 10px; }
.tt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 15px 18px;
  border: 1px solid var(--tt-line);
  border-radius: var(--tt-r-sm);
  background: rgba(255, 255, 255, .022);
  text-decoration: none;
  transition: border-color .18s ease, background .18s ease;
}
a.tt-row:hover { border-color: rgba(214, 62, 62, .5); background: rgba(214, 62, 62, .06); }
.tt-row--past { opacity: .68; }
.tt-row-ref {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: .95rem;
  font-weight: 500;
  color: #fff;
  letter-spacing: .02em;
}
.tt-row-sub { margin-top: 3px; color: var(--tt-steel); font-size: .82rem; }
.tt-row-right { display: flex; align-items: center; gap: 12px; }
.tt-row-amount {
  font-family: var(--tt-head);
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.tt-chev { color: var(--tt-steel); font-size: 1.1rem; }

/* One badge, five states. */
.tt-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 99px;
  background: rgba(139, 145, 154, .16);
  color: var(--tt-dead);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tt-badge--ok   { background: rgba(63, 191, 106, .16); color: var(--tt-ok); }
.tt-badge--warn { background: rgba(245, 165, 36, .16); color: var(--tt-warn); }
.tt-badge--bad  { background: rgba(229, 72, 77, .16);  color: var(--tt-bad); }
.tt-badge--info { background: rgba(111, 168, 255, .16); color: var(--tt-info); }

/* Key/value facts about a job. */
.tt-facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 18px;
  padding: 20px;
  border: 1px solid var(--tt-line);
  border-radius: var(--tt-r-sm);
  background: rgba(7, 8, 10, .5);
}
.tt-fact-k {
  margin-bottom: 4px;
  color: var(--tt-steel);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.tt-fact-v { color: #fff; font-size: .92rem; font-weight: 600; }
.tt-fact-v--mono { font-family: "DM Mono", ui-monospace, monospace; font-weight: 500; }
.tt-fact-v--soft { color: var(--tt-dim); font-weight: 400; font-size: .88rem; }

/* Breakdown job timeline. */
.tt-timeline { display: grid; gap: 0; }
.tt-tl-step { position: relative; display: flex; gap: 16px; padding: 0 0 22px 0; }
.tt-tl-step:last-child { padding-bottom: 0; }
.tt-tl-step::before {
  content: "";
  position: absolute;
  left: 6px; top: 16px; bottom: 0;
  width: 2px;
  background: var(--tt-line);
}
.tt-tl-step:last-child::before { display: none; }
.tt-tl-dot {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 14px; height: 14px;
  margin-top: 3px;
  border-radius: 50%;
  background: #2a2e35;
  border: 2px solid #3a3f47;
}
.tt-tl-dot--done   { background: var(--tt-ok);   border-color: var(--tt-ok); }
.tt-tl-dot--active { background: var(--tt-red);  border-color: var(--tt-red);
                     box-shadow: 0 0 0 5px var(--tt-red-soft); }
.tt-tl-dot--dead   { background: var(--tt-dead); border-color: var(--tt-dead); }
.tt-tl-label { color: var(--tt-steel); font-size: .93rem; }
.tt-tl-label--done   { color: var(--tt-dim); }
.tt-tl-label--active { color: #fff; font-weight: 600; }
.tt-tl-label--dead   { color: var(--tt-dead); }
.tt-tl-time { margin-top: 2px; color: #6f757e; font-size: .78rem; }

/* Retreading pipeline. */
.tt-stages { display: grid; gap: 13px; }
.tt-stage-head {
  display: flex; justify-content: space-between; gap: 12px;
  margin-bottom: 5px; font-size: .85rem;
}
.tt-stage-name { color: var(--tt-steel); }
.tt-stage-name--done { color: var(--tt-dim); }
.tt-stage-name--now  { color: #fff; font-weight: 700; }
.tt-stage-flag { font-size: .76rem; }
.tt-stage-flag--done { color: var(--tt-ok); }
.tt-stage-flag--now  { color: var(--tt-red); }
.tt-stage-track { height: 5px; border-radius: 99px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.tt-stage-fill  { height: 100%; border-radius: 99px; background: var(--tt-red); }
.tt-stage-fill--done { background: var(--tt-ok); }

/* Notices and empty states. */
.tt-notice {
  padding: 15px 18px;
  border: 1px solid var(--tt-line);
  border-left: 3px solid var(--tt-steel);
  border-radius: var(--tt-r-sm);
  background: rgba(255, 255, 255, .025);
  color: var(--tt-dim);
  font-size: .9rem;
  line-height: 1.6;
}
.tt-notice--ok   { border-left-color: var(--tt-ok);   color: #b7f0cb; background: rgba(63, 191, 106, .07); }
.tt-notice--warn { border-left-color: var(--tt-warn); color: #ffdca6; background: rgba(245, 165, 36, .07); }
.tt-notice--bad  { border-left-color: var(--tt-bad);  color: #ffc4c6; background: rgba(229, 72, 77, .07); }

.tt-empty {
  padding: 44px 24px;
  border: 1px dashed var(--tt-line);
  border-radius: var(--tt-r);
  text-align: center;
}
.tt-empty .tt-h3 { margin-bottom: 8px; }
.tt-empty p { margin: 0; color: var(--tt-steel); font-size: .9rem; }

.tt-actions {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 12px;
  margin-top: 40px; padding-top: 28px;
  border-top: 1px solid var(--tt-line);
}
.tt-btn--sm { min-height: 44px; padding: 0 18px; font-size: .92rem; }

/* ── Mobile sticky call bar ─────────────────────────────────────────────── */
.tt-mobile-bar { display: none; }

/* ══ Responsive ═══════════════════════════════════════════════════════════ */
@media (max-width: 1080px) {
  .tt-nav-links { display: none; }
  .tt-nav-links.is-open {
    display: flex;
    position: absolute;
    left: 0; right: 0; top: 100%;
    z-index: 60;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px 20px 20px;
    /* Solid, not rgba(...,.98). The 2% that got through was enough to show the
       hero heading straight through the open menu — a high-contrast white
       headline behind a near-black panel still reads. There is no design reason
       for the menu to be translucent. */
    background: var(--tt-black);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .6);
    border-bottom: 1px solid var(--tt-line);
  }
  /* 48px minimum, because this is the menu somebody uses one-handed at the
     roadside. */
  .tt-nav-links.is-open a { padding: 15px 0; border-bottom: 1px solid var(--tt-line-soft); font-size: 1.1rem; }
  .tt-nav-links.is-open a.is-active::after { display: none; }
  .tt-burger { display: block; }
  .tt-header { position: relative; }
  /* Drop the backdrop blur on phones and tablets. A full-width sticky element
     with `backdrop-filter` re-blurs everything behind it on every scroll frame,
     and behind this one are full-bleed hero photographs. It is the most
     expensive thing on the page, on the devices least able to afford it — and
     the audience here is a driver on the roadside, not a design studio. An
     opaque bar looks near-identical over a dark hero. */
  .tt-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(7, 8, 10, .96); }
  .tt-nav-phone-label, .tt-nav-phone-number { display: none; }
  .tt-nav-phone { padding: 9px; }
  .tt-hero-grid { grid-template-columns: 1fr; gap: 38px; }
  .tt-features { grid-template-columns: 1fr; }
  .tt-track { grid-template-columns: 1fr; }
  .tt-track-media { min-height: 220px; }
  .tt-faq-grid { grid-template-columns: 1fr; gap: 30px; }
  .tt-section-head { grid-template-columns: 1fr; gap: 16px; align-items: start; }
  .tt-quick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tt-quick-item:nth-child(3n + 1) { border-left: 0; }
  .tt-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Four stats auto-fit to 3-across at tablet width and leave one orphan on its
     own row. 2×2 reads as a set; 3+1 reads as a mistake. */
  .tt-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* `1fr auto` gives the two buttons whatever width they want and squeezes the
     heading and paragraph into what is left — about 230px at tablet size, which
     breaks "TELL US WHERE YOU ARE." across three lines beside a half-empty row
     of buttons. Stack it here rather than at 720px. */
  .tt-cta-box { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  /* The header at 390px: logo, call button, burger, and nothing spilling over
     the edge. Every one of these is what stops horizontal overflow — the burger
     was pushed off-screen before, which left no way to open the menu at all. */
  .tt-container { width: calc(100% - 28px); }
  .tt-nav { gap: 12px; min-height: 64px; }
  .tt-brand img { height: 38px; }
  .tt-brand-word { font-size: 1.15rem; }
  .tt-nav-actions { gap: 8px; margin-left: auto; }
  .tt-nav-phone { padding: 7px; }
  .tt-nav-phone .tt-nav-phone-icon { width: 28px; height: 28px; }
  .tt-burger { width: 42px; height: 42px; }

  .tt-section { padding: 62px 0; }
  .tt-section--tight { padding: 46px 0; }
  .tt-hero { padding: 46px 0 62px; }
  .tt-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
  .tt-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tt-quick-item:nth-child(2n + 1) { border-left: 0; }
  .tt-quick-item:nth-child(3n + 1) { border-left: 1px solid var(--tt-line-soft); }
  .tt-quick-item:nth-child(2n + 1) { border-left: 0; }
  .tt-form--2 { grid-template-columns: 1fr; }
  .tt-cta-box { grid-template-columns: 1fr; }
  .tt-track-copy { padding: 30px 24px; }
  .tt-feature-body { padding: 26px 22px; }
  .tt-mini { grid-template-columns: 1fr; }
  .tt-mini > .tt-mini-media { height: 160px; }
  .tt-footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .tt-split--flip .tt-split-media { order: 0; }
  .tt-emergency { font-size: .8rem; }
  .tt-emergency-sep { display: none; }

  /* Somebody on the roadside gets one thumb and no patience. */
  .tt-mobile-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 90;
    border-top: 1px solid var(--tt-line);
    background: rgba(7, 8, 10, .97);
    backdrop-filter: blur(12px);
  }
  .tt-mobile-bar a {
    padding: 15px 10px;
    text-align: center;
    color: #fff;
    font-family: var(--tt-head);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    text-decoration: none;
  }
  .tt-mobile-bar a:first-child { background: linear-gradient(135deg, var(--tt-red-hot), var(--tt-red-deep)); }
  .tt-footer { padding-bottom: 58px; }
  .tt-flash { top: auto; bottom: 70px; left: 14px; right: 14px; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  html.tt { scroll-behavior: auto; }
  .tt-btn:hover, .tt-card-item:hover { transform: none; }
}