/*
 * corpweb.css — every style addition that is OURS.
 *
 * assets/css/style.css is the stock Arsha sheet and is deliberately left untouched, so it stays diffable
 * against upstream and so it is always obvious which rules the template brought and which we wrote.
 *
 * Colours are taken from the Arsha palette already in use rather than invented, so the additions read as
 * part of the same design rather than bolted on:
 *   #37517e  navy      headings, dark bands
 *   #47b2e4  blue      primary action, accents
 *   #209dd8  blue dark hover
 *   #f3f5fa  wash      alternating section background
 *   #444444  body text
 *   #6c757d  muted
 *
 * Design-token discipline: the values live in :root below and the rules reference them, so a rebrand is
 * one block rather than a search. That mirrors the App's DESIGN_GUIDELINES approach; it is not the App's
 * token sheet, because the two properties are styled independently for now (a shared token sheet is the
 * obvious next step if they are ever aligned).
 */

:root {
  --tc-navy: #37517e;
  --tc-blue: #47b2e4;
  --tc-blue-dark: #209dd8;
  --tc-wash: #f3f5fa;
  --tc-text: #444444;
  --tc-muted: #6c757d;
  --tc-border: #e4e8f0;
  --tc-radius: 6px;
  --tc-shadow: 0 4px 18px rgba(55, 81, 126, 0.08);
  --tc-shadow-hover: 0 10px 28px rgba(55, 81, 126, 0.16);
}

/* ==========================================================================
   Header / nav additions
   The logo is now an <img> plus a <span> rather than the old inline-styled <h1>,
   so the font stack and sizing live here instead of in a style attribute.
   ========================================================================== */

#header .logo {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  /* The stock sheet renders the wordmark UPPERCASE with 2px of tracking. Ours is title case, matching the
     App's wordmark and the footer's. Both properties are overridden together on purpose: tracking that
     reads as deliberate on TRANSPORT CHIEF reads as a spacing bug on Transport Chief. */
  text-transform: none;
  letter-spacing: 0;
}

#header .logo img {
  max-height: 42px;
  width: auto;
}

#header .logo span {
  font-family: "Jost", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}

/* THE HEADER IS NAVY IN EVERY STATE, AND THE WORDMARK IS WHITE IN EVERY STATE (TCCW-3).
   What used to be here flipped the wordmark to navy on .header-scrolled / .header-inner-pages, on the
   belief that those states give a white header. They do not - the stock sheet paints both
   rgba(40, 58, 90, 0.9) - so the wordmark was navy on navy and all but vanished the moment you scrolled.
   Restoring a colour flip of any kind reintroduces that; the two states differ by elevation and size, not
   by colour.

   The background is restated as the brand navy rather than left at the stock 40/58/90, so that scrolling
   the home page does not shift the hue out from under a header that is sitting over a --tc-navy hero. On
   an inner page it means the header and .tc-page-head are the same navy and read as one band until the
   banner scrolls away and the shadow appears. */
#header.header-scrolled,
#header.header-inner-pages {
  background: var(--tc-navy);
}

/* THE HEADER IS ALSO THE SAME SIZE IN EVERY STATE. A scrolled state that shrinks its own padding and
   wordmark was tried and rejected: the header is fixed, so the resize happens in the reader's peripheral
   vision while they are reading something else, and it reads as a glitch rather than as polish.
   The shadow is therefore the entire "you have scrolled" signal - nothing moves, nothing changes colour.
   It is on the scrolled state only, never on .header-inner-pages at rest, where the header is flush
   against a banner of the same navy and a shadow would just draw a line across it. */
#header.header-scrolled {
  box-shadow: 0 2px 14px rgba(15, 26, 48, 0.28);
}

/* "Log in" is deliberately quieter than the trial button — see the note in _Header.html. */
#navbar .tc-nav-login {
  font-weight: 600;
}

@media (max-width: 991px) {
  #header .logo span { font-size: 22px; }
  #header .logo img { max-height: 32px; }
}

/* The features submenu links "Access, security & sign-in" at /features#access, and #header is
   fixed-top - so without this the browser scrolls the card exactly under the header (TCCW-10). */
#access {
  scroll-margin-top: 110px;
}

/* ==========================================================================
   Generic section furniture
   ========================================================================== */

.tc-section {
  padding: 70px 0;
}

.tc-section-wash {
  background: var(--tc-wash);
}

.tc-section-navy {
  background: var(--tc-navy);
  color: #fff;
}

.tc-section-navy h2,
.tc-section-navy h3,
.tc-section-navy p {
  color: #fff;
}

.tc-lead {
  font-size: 18px;
  line-height: 1.7;
  color: var(--tc-muted);
  max-width: 760px;
}

.tc-section-navy .tc-lead {
  color: rgba(255, 255, 255, 0.85);
}

.tc-section-head {
  margin-bottom: 42px;
}

.tc-section-head h2 {
  font-size: 32px;
  font-weight: 700;
  color: var(--tc-navy);
  margin-bottom: 14px;
}

.tc-section-head .tc-kicker {
  text-transform: uppercase;
  letter-spacing: 1.4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--tc-blue);
  margin-bottom: 8px;
  display: block;
}

.tc-section-navy .tc-section-head h2 { color: #fff; }

/* ==========================================================================
   Hero
   ========================================================================== */

.tc-hero {
  width: 100%;
  background: var(--tc-navy);
  padding: 150px 0 90px;
}

.tc-hero h1 {
  font-size: 46px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  margin-bottom: 20px;
}

.tc-hero p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 19px;
  line-height: 1.7;
  margin-bottom: 28px;
}

.tc-hero img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 991px) {
  .tc-hero { padding: 120px 0 60px; text-align: center; }
  .tc-hero h1 { font-size: 32px; }
  .tc-hero p { font-size: 17px; }
}

/* Inner-page banner: smaller than the hero, used as the top of every non-home page. */
.tc-page-head {
  background: var(--tc-navy);
  padding: 130px 0 50px;
}

.tc-page-head h1 {
  color: #fff;
  font-size: 38px;
  font-weight: 700;
  margin-bottom: 12px;
}

.tc-page-head p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 18px;
  max-width: 780px;
  margin: 0;
}

.tc-page-head nav {
  margin-top: 16px;
  font-size: 14px;
}

/* The breadcrumb sits on navy, so it needs its own colour (TCCW-9). Without this the CURRENT page - a
   bare text node, e.g. "Bookings & quoting" - inherited --tc-text (#444) from the body and rendered
   near-black on navy. The three parts are deliberately three weights: the parent is a blue link, the
   current page is white because you are on it, and the separator is dimmed so it recedes. */
.tc-page-head nav { color: #fff; }
.tc-page-head nav a { color: var(--tc-blue); }
.tc-page-head nav span { color: rgba(255, 255, 255, 0.45); }

@media (max-width: 991px) {
  .tc-page-head { padding: 110px 0 40px; }
  .tc-page-head h1 { font-size: 28px; }
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.tc-btn {
  display: inline-block;
  padding: 12px 30px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: all 0.25s ease;
  border: 2px solid transparent;
  cursor: pointer;
}

.tc-btn-primary { background: var(--tc-blue); color: #fff; }
.tc-btn-primary:hover { background: var(--tc-blue-dark); color: #fff; }

.tc-btn-ghost { border-color: rgba(255, 255, 255, 0.6); color: #fff; }
.tc-btn-ghost:hover { border-color: #fff; background: rgba(255, 255, 255, 0.1); color: #fff; }

.tc-btn-outline { border-color: var(--tc-blue); color: var(--tc-blue); }
.tc-btn-outline:hover { background: var(--tc-blue); color: #fff; }

.tc-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.tc-btn-note {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  margin: 10px 0 0;
}

/* ==========================================================================
   Cards — feature grid, benefit blocks
   ========================================================================== */

.tc-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 26px;
}

.tc-card {
  background: #fff;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius);
  padding: 30px 26px;
  box-shadow: var(--tc-shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
}

.tc-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--tc-shadow-hover);
}

.tc-card i {
  font-size: 34px;
  color: var(--tc-blue);
  margin-bottom: 16px;
  display: block;
}

.tc-card h3 {
  font-size: 19px;
  font-weight: 700;
  color: var(--tc-navy);
  margin-bottom: 10px;
}

.tc-card h3 a { color: inherit; text-decoration: none; }
.tc-card h3 a:hover { color: var(--tc-blue); }

.tc-card p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--tc-muted);
  margin-bottom: 14px;
}

.tc-card .tc-card-more {
  margin-top: auto;
  font-weight: 600;
  font-size: 14px;
  color: var(--tc-blue);
  text-decoration: none;
}

/* Alternating text/image rows used on the feature detail pages. */
.tc-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
  margin-bottom: 60px;
}

.tc-split:last-child { margin-bottom: 0; }
.tc-split.tc-split-flip .tc-split-text { order: 2; }

/* Wider text column, for prose that runs to paragraphs rather than a sentence or two - /about uses it
   (TCCW-8). align-items:start stops a 200px placeholder floating in the middle of a tall text block. */
.tc-split.tc-split-wide {
  grid-template-columns: 1.55fr 1fr;
  align-items: start;
}

/* h2 as well as h3: the feature pages use h3 because they sit under a section h2, whereas /about's
   splits ARE its top-level sections. Same size either way - the difference is document outline, not
   visual weight. */
.tc-split h2,
.tc-split h3 {
  font-size: 24px;
  font-weight: 700;
  color: var(--tc-navy);
  margin-bottom: 14px;
}

/* .tc-prose puts 34px above every h2 to separate stacked sections. Inside a split it is the first thing
   in the column, so that margin would push the heading below the top of the image beside it. */
.tc-split-text.tc-prose > h2:first-child { margin-top: 0; }

.tc-split p { line-height: 1.8; color: var(--tc-text); }

@media (max-width: 991px) {
  .tc-split, .tc-split.tc-split-wide { grid-template-columns: 1fr; gap: 26px; }
  .tc-split.tc-split-flip .tc-split-text { order: 0; }
}

/* Tick lists — used wherever a benefit set is listed out. */
.tc-ticks { list-style: none; padding: 0; margin: 0; }

.tc-ticks li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  line-height: 1.65;
}

.tc-ticks li::before {
  /* bootstrap-icons bi-check2. Was remixicon ri-check-line, which is why RemixIcon was loaded on
     every page of the site: one tick glyph, against 399 KB of font files and a 108 KB stylesheet.
     Bootstrap Icons is already loaded for the nav chevron and the pricing ticks, so this rule is the
     entire reason that download can go. Keep it on a family the site already uses. */
  content: "\f272";
  font-family: "bootstrap-icons";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--tc-blue);
  font-size: 18px;
  line-height: 1.5;
}

.tc-section-navy .tc-ticks li::before { color: var(--tc-blue); }

/* ==========================================================================
   Screenshot gallery
   Figures are captioned because an uncaptioned screenshot makes the reader work
   out what they are looking at, which is the opposite of the point.
   ========================================================================== */

.tc-shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
}

.tc-shot-figure { margin: 0; }

.tc-shot {
  display: block;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--tc-shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
}

.tc-shot:hover { transform: translateY(-3px); box-shadow: var(--tc-shadow-hover); }

.tc-shot img { width: 100%; height: auto; display: block; }

/* Zoom affordance, so it is obvious the image opens larger. */
.tc-shot::after {
  content: "\f4a5"; /* bootstrap-icons bi-zoom-in */
  font-family: "bootstrap-icons";
  position: absolute;
  right: 10px;
  bottom: 10px;
  background: rgba(55, 81, 126, 0.85);
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.tc-shot:hover::after { opacity: 1; }

.tc-shot-figure figcaption {
  font-size: 14px;
  color: var(--tc-muted);
  padding: 10px 2px 0;
  line-height: 1.6;
}

/* Placeholder shown where a screenshot has not been supplied yet. Deliberately obvious rather than a
   grey box: an empty-looking panel on a live page reads as broken, whereas this reads as unfinished. */
.tc-shot-placeholder {
  border: 2px dashed var(--tc-border);
  border-radius: var(--tc-radius);
  background: var(--tc-wash);
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 26px;
  color: var(--tc-muted);
}

.tc-shot-placeholder i { font-size: 32px; color: var(--tc-blue); margin-bottom: 10px; }
.tc-shot-placeholder strong { color: var(--tc-navy); display: block; margin-bottom: 4px; }
.tc-shot-placeholder span { font-size: 13px; }

/* ==========================================================================
   Pricing
   ========================================================================== */

.tc-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 26px;
  align-items: stretch;
}

.tc-plan {
  background: #fff;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius);
  padding: 32px 26px;
  box-shadow: var(--tc-shadow);
  display: flex;
  flex-direction: column;
  position: relative;
}

/* The recommended plan is lifted rather than recoloured, so the emphasis survives in greyscale and for
   anyone who cannot distinguish the accent colour. */
.tc-plan-featured {
  border-color: var(--tc-blue);
  box-shadow: var(--tc-shadow-hover);
  transform: translateY(-8px);
}

@media (max-width: 767px) {
  .tc-plan-featured { transform: none; }
}

.tc-plan-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--tc-blue);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 5px 16px;
  border-radius: 50px;
  white-space: nowrap;
}

.tc-plan h3 {
  font-size: 21px;
  font-weight: 700;
  color: var(--tc-navy);
  margin-bottom: 6px;
}

.tc-plan .tc-plan-for {
  font-size: 14px;
  color: var(--tc-muted);
  min-height: 42px;
  margin-bottom: 16px;
}

.tc-plan .tc-plan-price {
  font-size: 26px;
  font-weight: 700;
  color: var(--tc-navy);
  margin-bottom: 4px;
}

.tc-plan .tc-plan-price-note {
  font-size: 13px;
  color: var(--tc-muted);
  margin-bottom: 22px;
}

.tc-plan .tc-ticks { margin-bottom: 24px; font-size: 15px; }
.tc-plan .tc-btn { margin-top: auto; text-align: center; }

/* Feature comparison matrix. Scrolls inside its own container rather than making the page scroll. */
.tc-matrix-wrap {
  overflow-x: auto;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius);
  background: #fff;
}

.tc-matrix {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
  font-size: 15px;
}

.tc-matrix th,
.tc-matrix td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--tc-border);
  text-align: left;
}

.tc-matrix thead th {
  background: var(--tc-navy);
  color: #fff;
  font-weight: 600;
  position: sticky;
  top: 0;
}

.tc-matrix tbody th {
  font-weight: 500;
  color: var(--tc-text);
}

.tc-matrix td { text-align: center; width: 130px; }
.tc-matrix tbody tr:nth-child(even) { background: var(--tc-wash); }
.tc-matrix tbody tr:last-child th,
.tc-matrix tbody tr:last-child td { border-bottom: none; }

.tc-matrix .tc-yes { color: #27ae60; font-size: 18px; }
.tc-matrix .tc-no { color: #c9ced6; font-size: 18px; }

.tc-matrix-group th {
  background: #eef1f7;
  font-weight: 700;
  color: var(--tc-navy);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 1px;
}

/* ==========================================================================
   FAQ accordion
   ========================================================================== */

.tc-faq { max-width: 860px; }

.tc-faq-item {
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius);
  margin-bottom: 12px;
  background: #fff;
  overflow: hidden;
}

.tc-faq-q {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 18px 52px 18px 22px;
  font-size: 16px;
  font-weight: 600;
  color: var(--tc-navy);
  cursor: pointer;
  position: relative;
  line-height: 1.5;
}

.tc-faq-q::after {
  content: "\f282"; /* bi-chevron-down */
  font-family: "bootstrap-icons";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--tc-blue);
  font-size: 14px;
  transition: transform 0.25s ease;
}

.tc-faq-item.open .tc-faq-q::after { transform: translateY(-50%) rotate(180deg); }

/* max-height rather than display:none — the answer stays in the DOM and in the accessibility tree, so
   in-page find and search engines both see it. See the note in site.js. */
.tc-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  padding: 0 22px;
}

.tc-faq-item.open .tc-faq-a {
  max-height: 1200px;
  padding: 0 22px 20px;
}

.tc-faq-a p { line-height: 1.8; margin-bottom: 10px; color: var(--tc-text); }
.tc-faq-a p:last-child { margin-bottom: 0; }
.tc-faq-a ul { line-height: 1.8; padding-left: 20px; }

.tc-faq-group {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--tc-blue);
  margin: 34px 0 14px;
}

.tc-faq-group:first-child { margin-top: 0; }

/* ==========================================================================
   Contact form
   ========================================================================== */

.tc-form { max-width: 680px; }

.tc-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

@media (max-width: 767px) {
  .tc-form-row { grid-template-columns: 1fr; }
}

.tc-field { margin-bottom: 18px; }

.tc-field label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--tc-navy);
  margin-bottom: 6px;
}

.tc-field .tc-optional { font-weight: 400; color: var(--tc-muted); }

.tc-field input,
.tc-field textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius);
  font-size: 15px;
  font-family: inherit;
  color: var(--tc-text);
  background: #fff;
}

.tc-field input:focus,
.tc-field textarea:focus {
  outline: none;
  border-color: var(--tc-blue);
  box-shadow: 0 0 0 3px rgba(71, 178, 228, 0.15);
}

.tc-field textarea { min-height: 150px; resize: vertical; }

/* The honeypot. Positioned off-screen rather than display:none, because some bots skip hidden inputs but
   not absolutely-positioned ones. aria-hidden and tabindex keep it away from real users either way. */
.tc-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.tc-form-status { display: none; margin-bottom: 18px; border-radius: var(--tc-radius); padding: 14px 18px; font-size: 15px; }
/* NO BULLETS. The <ul> stays because a failed submission can return several
   messages, but every one of them is a whole sentence inside its own coloured
   panel - a bullet in front of a single sentence reads as a list of one, and
   that is what "Sending your message..." and the success line always are.
   Each item is a flex row so the in-flight spinner sits ON the line of text
   rather than above it: as a sibling of this block-level <ul> it took a line
   of its own. */
.tc-form-status ul { margin: 0; padding-left: 0; list-style: none; }
.tc-form-status ul li { display: flex; align-items: center; margin-bottom: 4px; }
.tc-form-status ul li:last-child { margin-bottom: 0; }
.tc-form-status-info { background: var(--tc-wash); color: var(--tc-muted); }
.tc-form-status-error { background: #fdecea; color: #a4302a; }
.tc-form-status-success { background: #e8f7ee; color: #1e7c46; }

#tc-contact-turnstile { margin-bottom: 18px; }

.tc-form-privacy { font-size: 13px; color: var(--tc-muted); margin-top: 14px; line-height: 1.6; }

/* ==========================================================================
   Live storefront embed (/online-bookings)
   ========================================================================== */

.tc-embed-frame {
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius);
  overflow: hidden;
  box-shadow: var(--tc-shadow-hover);
  background: #fff;
}

.tc-embed-bar {
  background: #eef1f7;
  border-bottom: 1px solid var(--tc-border);
  padding: 9px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--tc-muted);
}

.tc-embed-dots { display: flex; gap: 5px; }
.tc-embed-dots span { width: 10px; height: 10px; border-radius: 50%; background: #cdd4e0; display: block; }

.tc-embed-frame iframe {
  display: block;
  width: 100%;
  height: 760px;
  border: 0;
}

@media (max-width: 767px) {
  .tc-embed-frame iframe { height: 620px; }
}

.tc-embed-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #1e7c46;
  font-weight: 600;
}

.tc-embed-live::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #27ae60;
}

/* Shown instead of the iframe when demo_storefront_url is not configured. */
.tc-embed-fallback {
  border: 2px dashed var(--tc-border);
  border-radius: var(--tc-radius);
  background: var(--tc-wash);
  padding: 50px 30px;
  text-align: center;
  color: var(--tc-muted);
}

.tc-embed-fallback i { font-size: 40px; color: var(--tc-blue); margin-bottom: 14px; display: block; }
.tc-embed-fallback strong { color: var(--tc-navy); display: block; font-size: 18px; margin-bottom: 8px; }

/* ==========================================================================
   Comparison "before / after" panels — used for the enquiry-vs-storefront pitch
   ========================================================================== */

.tc-versus {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}

@media (max-width: 767px) {
  .tc-versus { grid-template-columns: 1fr; }
}

.tc-versus-panel {
  border-radius: var(--tc-radius);
  padding: 28px 26px;
  border: 1px solid var(--tc-border);
  background: #fff;
}

.tc-versus-bad { border-left: 4px solid #d9534f; }
.tc-versus-good { border-left: 4px solid #27ae60; }

.tc-versus-panel h3 { font-size: 18px; font-weight: 700; color: var(--tc-navy); margin-bottom: 16px; }
.tc-versus-panel ol { padding-left: 20px; margin: 0; line-height: 1.8; color: var(--tc-text); }
.tc-versus-panel .tc-versus-outcome { margin-top: 16px; font-weight: 600; font-size: 15px; }
.tc-versus-bad .tc-versus-outcome { color: #a4302a; }
.tc-versus-good .tc-versus-outcome { color: #1e7c46; }

/* ==========================================================================
   Stat strip
   ========================================================================== */

.tc-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 26px;
  text-align: center;
}

.tc-stat strong {
  display: block;
  font-size: 34px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

.tc-stat span { color: rgba(255, 255, 255, 0.8); font-size: 15px; }

/* ==========================================================================
   Closing CTA band
   ========================================================================== */

.tc-cta {
  background: var(--tc-navy);
  padding: 60px 0;
  text-align: center;
}

.tc-cta h2 { color: #fff; font-size: 30px; font-weight: 700; margin-bottom: 14px; }
.tc-cta p { color: rgba(255, 255, 255, 0.85); font-size: 17px; max-width: 640px; margin: 0 auto 26px; }
.tc-cta .tc-btn-row { justify-content: center; }

/* ==========================================================================
   Footer additions
   ========================================================================== */

#footer .footer-top .footer-contact a { color: var(--tc-blue); }

/* The footer carries the same wordmark as the header, and the stock sheet uppercases this one too. Left
   alone it would be the only ALL CAPS "Transport Chief" left on the site (TCCW-3). */
#footer .footer-top .footer-contact h3 {
  text-transform: none;
}

/* "Proudly crafted in New Zealand", with the flag inline (TCCW-7). The flag is an inline <svg> in
   _Footer.html rather than an image file: at 20px it is a handful of shapes, so inlining it costs less
   than the request would and it stays sharp on any display. The Union Jack in the canton is drawn
   simplified - the real one counterchanges the red diagonals off-centre, which is invisible at this size.
   The hairline ring keeps the flag's dark blue field from bleeding into the white footer. */
.tc-nz {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.tc-nz-flag {
  width: 20px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 1px;
  box-shadow: 0 0 0 1px rgba(55, 81, 126, 0.22);
}

#footer .tc-footer-cta {
  display: inline-block;
  font-weight: 600;
  color: var(--tc-blue);
  text-decoration: none;
}

#footer .tc-footer-cta:hover { color: var(--tc-blue-dark); }

/* ==========================================================================
   Long-form legal / prose pages
   ========================================================================== */

.tc-prose { max-width: 820px; }
.tc-prose h2 { font-size: 24px; font-weight: 700; color: var(--tc-navy); margin: 34px 0 14px; }
.tc-prose h3 { font-size: 18px; font-weight: 700; color: var(--tc-navy); margin: 24px 0 10px; }
.tc-prose p { line-height: 1.8; margin-bottom: 14px; }
.tc-prose ul, .tc-prose ol { line-height: 1.8; margin-bottom: 14px; padding-left: 22px; }
.tc-prose table { width: 100%; border-collapse: collapse; margin-bottom: 20px; font-size: 15px; }
.tc-prose table th, .tc-prose table td { border: 1px solid var(--tc-border); padding: 10px 13px; text-align: left; }
.tc-prose table th { background: var(--tc-wash); color: var(--tc-navy); }
.tc-prose .tc-updated { color: var(--tc-muted); font-size: 14px; font-style: italic; }

/* ==========================================================================
   Accessibility: skip link, focus visibility, reduced motion

   These three are grouped because they are the same kind of fix - the site
   worked without them for everyone who uses a mouse, a trackpad and no
   vestibular sensitivity, which is why none of it showed up in testing.
   ========================================================================== */

/* Off-screen until focused, then a real, visible control. Not display:none:
   a hidden element is not focusable, so the link would never be reachable by
   the only input method that needs it. */
.tc-skip-link {
  position: absolute;
  top: -60px;
  left: 12px;
  z-index: 2000;
  padding: 12px 20px;
  background: var(--tc-navy);
  color: #fff;
  font-weight: 600;
  border-radius: 0 0 var(--tc-radius) var(--tc-radius);
  box-shadow: var(--tc-shadow-hover);
  transition: top 0.18s ease-in-out;
}
.tc-skip-link:hover { color: #fff; }
.tc-skip-link:focus { top: 0; color: #fff; outline: 3px solid var(--tc-blue); outline-offset: 2px; }

/* The <main> takes focus from the skip link but must never show a focus ring
   when it does - the ring belongs to controls the user chose, not to a landmark
   they were sent to. */
#tc-main:focus { outline: none; }

/* ONE focus treatment for the whole site. The stock Arsha sheet sets
   `outline: none` in two places, which removes the browser default and puts
   nothing back, so keyboard focus was invisible on those controls.
   :focus-visible rather than :focus, so a mouse click does not leave a ring
   behind on a button - which is the reason people remove outlines in the first
   place. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 3px solid var(--tc-blue);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Respect an operating-system request for less motion. AOS animates nearly
   every section of every page, and for a visitor with vestibular sensitivity
   that is not decoration, it is a reason to leave. AOS's own classes are
   neutralised here rather than by disabling AOS in JS, so content that AOS
   has not yet revealed cannot be left permanently invisible. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .tc-spinner { animation: none !important; border-top-color: currentColor !important; }
}

/* ==========================================================================
   Footer contact and social
   ========================================================================== */

.tc-footer-contact { list-style: none; padding: 0; margin: 0 0 18px; }
.tc-footer-contact li { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; line-height: 1.5; }
.tc-footer-icon { width: 16px; height: 16px; flex: 0 0 16px; color: var(--tc-blue); }
.tc-footer-contact a { color: inherit; }
.tc-footer-contact a:hover { color: var(--tc-blue); }

.tc-social { list-style: none; padding: 0; margin: 18px 0 0; display: flex; gap: 10px; }
.tc-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
  transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out, color 0.2s ease-in-out;
}
.tc-social-link svg { width: 18px; height: 18px; }
.tc-social-link:hover { color: #fff; transform: translateY(-3px); }
/* Each mark lifts to ITS OWN brand colour rather than a single house blue.
   A LinkedIn icon that turns Facebook blue reads as a mistake to anyone who
   looks, and these are the two marks people recognise fastest. */
.tc-social-linkedin:hover { background: #0a66c2; }
.tc-social-facebook:hover { background: #1877f2; }

/* ==========================================================================
   Contact page: the call-us panel
   ========================================================================== */

.tc-contact-phone {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  margin-bottom: 20px;
  border-radius: var(--tc-radius);
  background: var(--tc-navy);
  color: #fff;
  box-shadow: var(--tc-shadow);
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.tc-contact-phone:hover { color: #fff; transform: translateY(-2px); box-shadow: var(--tc-shadow-hover); }
.tc-contact-phone-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--tc-blue);
}
.tc-contact-phone-icon svg { width: 20px; height: 20px; }
.tc-contact-phone-text { display: flex; flex-direction: column; }
.tc-contact-phone-label { font-size: 13px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--tc-blue); font-weight: 600; }
/* Tabular figures so the grouped number does not wobble, and a size that makes
   this the first thing read in the column. */
.tc-contact-phone-number { font-size: 26px; font-weight: 700; line-height: 1.25; font-variant-numeric: tabular-nums; }
.tc-contact-phone-note { font-size: 13px; color: rgba(255, 255, 255, 0.75); }

/* ==========================================================================
   Form: per-field errors and the submit spinner
   ========================================================================== */

/* Empty and out of flow until filled, so a clean form has no reserved gaps and
   nothing shifts when a message appears under one field. */
.tc-field-error { display: none; margin: 6px 0 0; font-size: 14px; color: #a4302a; }
.tc-field-error.is-shown { display: block; }

.tc-field input.is-invalid,
.tc-field textarea.is-invalid {
  border-color: #d3453b;
  background: #fdf7f7;
}
.tc-field input.is-invalid:focus-visible,
.tc-field textarea.is-invalid:focus-visible { outline-color: #d3453b; }

/* The submit button's own progress indicator. Replaces a static "Sending..."
   line that gave no evidence anything was happening - the single most common
   reason a person presses submit twice. */
.tc-btn[data-busy="true"] { position: relative; pointer-events: none; opacity: 0.85; }
.tc-spinner {
  display: inline-block;
  /* Inside the status box this is a flex item, and a flex item with a long
     message beside it would otherwise be shrunk out of round. */
  flex: none;
  width: 15px;
  height: 15px;
  margin-right: 9px;
  vertical-align: -2px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: tc-spin 0.7s linear infinite;
}
@keyframes tc-spin { to { transform: rotate(360deg); } }

/* The status box gets a matching indicator while a submission is in flight, so
   the feedback is visible whether the reader is looking at the button or at the
   message above the form. */
.tc-form-status-info .tc-spinner { border-color: rgba(55, 81, 126, 0.25); border-top-color: var(--tc-navy); }

@media (max-width: 575px) {
  .tc-contact-phone-number { font-size: 22px; }
}

/* The mobile nav toggle is a real <button> now (it was an <i role="button">).
   These three lines strip the browser's button chrome so it still renders as a
   bare icon; the stock sheet's .mobile-nav-toggle rules do the rest. The icon
   moved to a child <i>, so the bi-list/bi-x swap happens there. */
.mobile-nav-toggle { background: none; border: 0; padding: 0; }
.mobile-nav-toggle i { font-size: 28px; line-height: 0; }

/* The visitor-session Turnstile challenge.

   OFF-SCREEN, NOT display:none, and that distinction is the whole point. A
   display:none widget cannot be painted, so when Turnstile decides a visitor
   must interact there is nothing to interact with and the challenge never
   resolves - no callback, no error, and (before the timeout was added) a
   contact form stuck on "Sending" forever.

   Positioned off-screen it stays invisible in the ordinary case while remaining
   a real, paintable element. site.js adds .is-visible from Turnstile's
   before-interactive-callback, which brings it into view as a centred panel for
   the one case where the visitor has to do something. */
.tc-session-challenge {
  position: absolute;
  left: -9999px;
  top: 0;
  width: 300px;
  height: 65px;
}

.tc-session-challenge.is-visible {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10050;
  width: auto;
  height: auto;
  padding: 20px;
  background: #fff;
  border-radius: var(--tc-radius);
  box-shadow: var(--tc-shadow-hover);
}