/* ============================================================
   home-redesign.css — Right of Way Driving School
   Homepage redesign: compact hero, quick-start strip,
   Road Test Toolkit showcase, consolidated local story.
   Loaded AFTER home.css. Only additive rules and scoped
   overrides — no existing selector is deleted.
   ============================================================ */

:root {
  --rt-cyan: #00d4ff;
  --rt-gold: #d4af5b;
  --rt-orange: #ffb24a;
  --rt-panel: rgba(8, 12, 22, 0.98);
  --rt-ink: #050a14;
}

/* ============================================================
   1. HERO — tightened vertical rhythm
   ============================================================ */

#row-3d-hero .r-desc {
  max-width: 54ch;
}

/* The mobile hero keeps its 100px top padding — that is what clears the
   fixed header. Only the internal rhythm and the bottom padding are trimmed. */
@media (max-width: 900px) {
  #row-3d-hero {
    min-height: 0;
    padding-bottom: 34px;
  }
  #row-3d-hero .r-title {
    margin-bottom: 12px;
  }
  #row-3d-hero .r-desc {
    margin-bottom: 16px;
    font-size: 15px;
    line-height: 1.62;
  }
  #row-3d-hero .r-actions {
    margin-bottom: 8px;
  }
  #row-3d-hero .r-trust-wrapper {
    margin-top: 16px;
  }
}

/* ============================================================
   2. QUICK START — trust row + service selector
   ============================================================ */

#quick-start {
  position: relative;
  padding: 30px 0 46px;
}

.qs-container {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}

/* --- trust row (gold = trust, credentials, ratings) --- */
.qs-trust {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  padding: 0;
  border: 1px solid rgba(201, 168, 76, 0.20);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(20, 18, 12, 0.55), rgba(8, 10, 18, 0.75));
  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
  overflow: hidden;
}

.qs-trust-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 16px 12px;
  text-align: center;
  text-decoration: none;
  border-right: 1px solid rgba(201, 168, 76, 0.12);
  transition: background 0.28s ease;
}

.qs-trust-item:last-child {
  border-right: 0;
}

a.qs-trust-item:hover {
  background: rgba(201, 168, 76, 0.06);
}

.qs-trust-value {
  color: #f0dca4;
  font-family: 'Poppins', 'Inter', sans-serif;
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.qs-trust-value.qs-stars {
  color: #ffd36b;
  font-size: 15px;
  letter-spacing: 1px;
}

.qs-trust-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: #f0dca4;
}

.qs-trust-icon svg {
  width: 22px;
  height: 22px;
}

.qs-trust-label {
  display: block;
  color: rgba(226, 232, 240, 0.72);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.02em;
}

/* ------------------------------------------------------------
   Feature ticker under the static trust row.
   The static row above stays readable at a glance; the ticker
   carries the long tail of services, where no single item is
   critical, so movement costs nothing.
   Pauses on hover and on keyboard focus (WCAG 2.2.2) and stops
   completely under prefers-reduced-motion.
   ------------------------------------------------------------ */
.tm-marquee {
  position: relative;
  margin-top: 12px;
  padding: 9px 0;
  overflow: hidden;
  border: 1px solid rgba(0, 212, 255, 0.12);
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(0, 212, 255, 0.05), transparent 22%, transparent 78%, rgba(0, 212, 255, 0.05)),
    rgba(7, 11, 20, 0.72);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.tm-track {
  display: flex;
  width: max-content;
  animation: tm-scroll 52s linear infinite;
}

.tm-marquee:hover .tm-track,
.tm-marquee:focus-within .tm-track {
  animation-play-state: paused;
}

@keyframes tm-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.tm-list {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tm-list li {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

/* separator dot between items */
.tm-list li::after {
  content: "";
  width: 4px;
  height: 4px;
  margin: 0 18px;
  border-radius: 50%;
  background: rgba(0, 212, 255, 0.42);
  flex-shrink: 0;
}

.tm-list a,
.tm-list span {
  color: rgba(226, 232, 240, 0.80);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: color 0.22s ease;
}

.tm-list a:hover,
.tm-list a:focus-visible {
  color: #fff;
}

.tm-list a:focus-visible {
  outline: 2px solid rgba(0, 212, 255, 0.75);
  outline-offset: 3px;
  border-radius: 4px;
}

.tm-list span {
  color: rgba(226, 232, 240, 0.55);
}

@media (max-width: 760px) {
  .tm-marquee {
    margin-top: 10px;
    padding: 8px 0;
    border-radius: 10px;
  }
  .tm-list a,
  .tm-list span {
    font-size: 12.2px;
  }
  .tm-list li::after {
    margin: 0 13px;
  }
  .tm-track {
    animation-duration: 40s;
  }
}

/* --- selector heading --- */
.qs-head {
  margin: 38px 0 20px;
  text-align: center;
}

.qs-title {
  margin: 0 0 8px;
  color: #fff;
  font-family: 'Poppins', 'Inter', sans-serif;
  font-size: clamp(23px, 2.6vw, 31px);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.qs-sub {
  max-width: 74ch;
  margin: 0 auto;
  color: rgba(226, 232, 240, 0.66);
  font-size: 14.5px;
  line-height: 1.65;
}

.qs-sub a {
  color: var(--rt-cyan);
  font-weight: 700;
  white-space: nowrap;
}

/* --- selector cards (cyan = services, actions) --- */
.qs-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.qs-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  padding: 20px 20px 18px;
  border: 1px solid rgba(0, 212, 255, 0.14);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 0%, rgba(0, 212, 255, 0.07), transparent 62%),
    rgba(9, 13, 24, 0.92);
  text-decoration: none;
  transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
              border-color 0.3s ease,
              box-shadow 0.3s ease;
}

.qs-card-icon {
  font-size: 22px;
  line-height: 1;
}

.qs-card-title {
  color: #fff;
  font-family: 'Poppins', 'Inter', sans-serif;
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.qs-card-text {
  flex-grow: 1;
  color: rgba(226, 232, 240, 0.60);
  font-size: 13.5px;
  line-height: 1.6;
}

.qs-card-cta {
  color: var(--rt-cyan);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
}

@media (hover: hover) and (pointer: fine) {
  .qs-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 212, 255, 0.34);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.42), 0 0 26px rgba(0, 212, 255, 0.07);
  }
}

.qs-note {
  margin: 18px 0 0;
  color: rgba(226, 232, 240, 0.55);
  font-size: 13.5px;
  text-align: center;
}

.qs-note a {
  color: var(--rt-cyan);
  font-weight: 600;
}

@media (max-width: 1080px) {
  .qs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  #quick-start {
    padding: 22px 0 34px;
  }
  .qs-container {
    width: calc(100% - 28px);
  }
  .qs-trust {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-radius: 14px;
  }
  .qs-trust-item {
    padding: 13px 10px;
    border-right: 1px solid rgba(201, 168, 76, 0.12);
    border-bottom: 1px solid rgba(201, 168, 76, 0.12);
  }
  .qs-trust-item:nth-child(2n) {
    border-right: 0;
  }
  .qs-trust-item:last-child {
    grid-column: 1 / -1;
    flex-direction: row;
    gap: 10px;
    border-bottom: 0;
    border-right: 0;
  }
  .qs-trust-label {
    font-size: 11px;
  }
  .qs-head {
    margin: 24px 0 14px;
  }
  .qs-title {
    margin-bottom: 6px;
  }
  .qs-sub {
    font-size: 13.4px;
    line-height: 1.58;
  }
  .qs-grid {
    gap: 10px;
  }
  .qs-card {
    padding: 15px 15px 14px;
    border-radius: 14px;
  }
  .qs-card-icon {
    font-size: 19px;
  }
  .qs-card-title {
    font-size: 15px;
  }
  .qs-card-text {
    font-size: 12.8px;
    line-height: 1.52;
  }
}

/* Two columns hold down to 360px; below that the cards go to a single
   icon-beside-text row so the copy never gets squeezed. */
@media (max-width: 359px) {
  .qs-grid {
    grid-template-columns: 1fr;
  }
  .qs-card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "icon title"
      "icon text"
      "icon cta";
    column-gap: 12px;
    row-gap: 3px;
    align-items: start;
  }
  .qs-card-icon { grid-area: icon; align-self: center; }
  .qs-card-title { grid-area: title; }
  .qs-card-text { grid-area: text; }
  .qs-card-cta { grid-area: cta; }
}

/* ============================================================
   3. ROAD TEST TOOLKIT — Driving Hub showcase
   ============================================================ */

#road-test-toolkit {
  position: relative;
  padding: 18px 0 56px;
}

.rt-shell {
  position: relative;
  width: min(1220px, calc(100% - 40px));
  margin: 0 auto;
  padding: 46px 40px 40px;
  border: 1px solid rgba(0, 212, 255, 0.16);
  border-radius: 30px;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(0, 212, 255, 0.10), transparent 58%),
    linear-gradient(180deg, rgba(9, 16, 30, 0.96), rgba(5, 9, 18, 0.99));
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.55),
    0 0 60px rgba(0, 212, 255, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
  isolation: isolate;
}

/* thin illuminated top edge */
.rt-shell::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.75), transparent);
  z-index: 2;
  pointer-events: none;
}

/* controlled glow behind the heading */
.rt-glow {
  position: absolute;
  top: -180px;
  left: 50%;
  width: 720px;
  height: 380px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(0, 212, 255, 0.16), transparent 68%);
  filter: blur(30px);
  z-index: 0;
  pointer-events: none;
}

/* restrained dashboard grid detail */
.rt-grid-lines {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    linear-gradient(rgba(0, 212, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 212, 255, 0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(115% 80% at 50% 0%, #000 12%, transparent 72%);
          mask-image: radial-gradient(115% 80% at 50% 0%, #000 12%, transparent 72%);
}

.rt-container {
  position: relative;
  z-index: 1;
}

.rt-head {
  max-width: 780px;
  margin: 0 auto 34px;
  text-align: center;
}

.rt-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 6px 14px;
  border: 1px solid rgba(0, 212, 255, 0.28);
  border-radius: 999px;
  background: rgba(0, 212, 255, 0.07);
  color: var(--rt-cyan);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.rt-kicker-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rt-cyan);
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.9);
}

.rt-title {
  margin: 0 0 14px;
  color: #fff;
  font-family: 'Poppins', 'Inter', sans-serif;
  font-size: clamp(26px, 3.4vw, 42px);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.025em;
}

.rt-accent {
  background: linear-gradient(100deg, #00d4ff 10%, #8ef0ff 90%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

.rt-lede {
  margin: 0;
  color: rgba(226, 232, 240, 0.66);
  font-size: 15px;
  line-height: 1.72;
}

/* --- tool grid --- */
.rt-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.rt-tool {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(0, 212, 255, 0.14);
  background: var(--rt-panel);
  text-decoration: none;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.40),
    0 20px 60px rgba(0, 0, 0, 0.30),
    0 0 30px rgba(0, 212, 255, 0.035),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 0.4s ease,
              border-color 0.35s ease;
}

.rt-tool--skill {
  border-color: rgba(255, 153, 51, 0.18);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.40),
    0 20px 60px rgba(0, 0, 0, 0.30),
    0 0 30px rgba(255, 153, 51, 0.04),
    inset 0 1px 0 rgba(255, 153, 51, 0.06);
}

.rt-tool--planner {
  border-color: rgba(212, 175, 91, 0.20);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.40),
    0 20px 60px rgba(0, 0, 0, 0.30),
    0 0 30px rgba(212, 175, 91, 0.04),
    inset 0 1px 0 rgba(212, 175, 91, 0.06);
}

.rt-tool-media {
  position: relative;
  display: block;
  width: 100%;
  height: 218px;
  overflow: hidden;
  flex-shrink: 0;
  margin-bottom: -1px;
  z-index: 1;
  background:
    radial-gradient(circle at 50% 35%, rgba(0, 212, 255, 0.08), transparent 48%),
    rgba(5, 10, 18, 0.96);
}

.rt-tool-fallback,
.rt-tool-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The previews are 16:9 but the media well is wider than that, so the crop is
   anchored near the top — that is where each tool's title and headline numbers
   sit. A centred crop cut them off. */
.rt-tool-fallback,
.rt-tool-video {
  object-position: center 20%;
}

.rt-tool-fallback {
  opacity: 0.82;
  transform-origin: center center;
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.35s ease;
}

.rt-tool-video {
  z-index: 1;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.rt-tool-video.is-playing {
  opacity: 1;
}

/* image darkening toward the text area */
.rt-tool-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle at 72% 24%, rgba(0, 212, 255, 0.10), transparent 32%),
    linear-gradient(to bottom,
      rgba(3, 6, 13, 0.04) 0%,
      rgba(3, 6, 13, 0.10) 45%,
      rgba(8, 12, 22, 0.82) 88%,
      rgba(8, 12, 22, 1) 100%);
}

.rt-tool--skill .rt-tool-media::after {
  background:
    radial-gradient(circle at 72% 24%, rgba(255, 153, 51, 0.12), transparent 34%),
    linear-gradient(to bottom,
      rgba(3, 6, 13, 0.04) 0%,
      rgba(3, 6, 13, 0.16) 48%,
      rgba(12, 10, 12, 0.84) 88%,
      rgba(8, 12, 22, 1) 100%);
}

.rt-tool--planner .rt-tool-media::after {
  background:
    radial-gradient(circle at 72% 24%, rgba(212, 175, 91, 0.12), transparent 34%),
    linear-gradient(to bottom,
      rgba(3, 6, 13, 0.04) 0%,
      rgba(3, 6, 13, 0.14) 48%,
      rgba(14, 12, 10, 0.84) 88%,
      rgba(8, 12, 22, 1) 100%);
}

.rt-tool-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-grow: 1;
  padding: 24px 26px 26px;
  background: rgba(8, 12, 22, 1);
}

.rt-tool-tag {
  display: inline-block;
  width: fit-content;
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid rgba(0, 212, 255, 0.18);
  background: rgba(0, 212, 255, 0.06);
  color: var(--rt-cyan);
  font-size: 10px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.rt-tool-tag--orange {
  color: var(--rt-orange);
  background: rgba(255, 153, 51, 0.10);
  border-color: rgba(255, 153, 51, 0.22);
}

.rt-tool-tag--gold {
  color: var(--rt-gold);
  background: rgba(212, 175, 91, 0.08);
  border-color: rgba(212, 175, 91, 0.45);
}

.rt-tool-name {
  display: block;
  color: #fff;
  font-family: 'Poppins', 'Inter', sans-serif;
  font-size: clamp(19px, 1.9vw, 24px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.rt-tool-text {
  display: block;
  color: rgba(255, 255, 255, 0.62);
  font-size: 14.5px;
  line-height: 1.68;
}

.rt-tool-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 8px;
  color: var(--rt-cyan);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.03em;
  transition: color 0.2s ease, transform 0.2s ease;
}

.rt-tool--skill .rt-tool-cta {
  color: #ff9d2e;
}

.rt-tool--planner .rt-tool-cta {
  color: #e8c375;
}

@media (hover: hover) and (pointer: fine) {
  .rt-tool:hover {
    transform: translateY(-6px);
    border-color: rgba(0, 212, 255, 0.26);
    box-shadow:
      0 10px 30px rgba(0, 0, 0, 0.48),
      0 26px 70px rgba(0, 0, 0, 0.36),
      0 0 44px rgba(0, 212, 255, 0.09),
      inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }
  .rt-tool--skill:hover {
    border-color: rgba(255, 153, 51, 0.32);
  }
  .rt-tool--planner:hover {
    border-color: rgba(212, 175, 91, 0.38);
  }
  .rt-tool:hover .rt-tool-fallback {
    transform: scale(1.045);
  }
  .rt-tool:hover .rt-tool-cta {
    transform: translateX(3px);
  }
}

/* --- section footer: hub link + guide rail --- */
.rt-foot {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid rgba(0, 212, 255, 0.10);
  text-align: center;
}

.rt-hub-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 28px;
  border: 1px solid rgba(0, 212, 255, 0.38);
  border-radius: 999px;
  background: rgba(0, 212, 255, 0.08);
  color: #bff0ff;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  transition: background 0.28s ease, border-color 0.28s ease, transform 0.28s ease, color 0.28s ease;
}

@media (hover: hover) and (pointer: fine) {
  .rt-hub-link:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 212, 255, 0.7);
    background: rgba(0, 212, 255, 0.14);
    color: #fff;
  }
}

.rt-guides {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 18px;
  margin-top: 20px;
}

.rt-guides-label {
  color: rgba(226, 232, 240, 0.45);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.rt-guides a {
  position: relative;
  color: rgba(226, 232, 240, 0.72);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 212, 255, 0.22);
  padding-bottom: 1px;
  transition: color 0.24s ease, border-color 0.24s ease;
}

.rt-guides a:hover {
  color: #fff;
  border-color: rgba(0, 212, 255, 0.7);
}

@media (max-width: 1080px) {
  .rt-shell {
    padding: 38px 26px 32px;
    border-radius: 24px;
  }
  .rt-tool-media {
    height: 200px;
  }
}

@media (max-width: 760px) {
  #road-test-toolkit {
    padding: 6px 0 38px;
  }
  .rt-shell {
    width: calc(100% - 20px);
    padding: 30px 14px 26px;
    border-radius: 20px;
  }
  .rt-head {
    margin-bottom: 20px;
  }
  .rt-title {
    margin-bottom: 10px;
  }
  .rt-lede {
    font-size: 13.6px;
    line-height: 1.6;
  }
  .rt-tools {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .rt-tool-media {
    height: 172px;
  }
  .rt-tool-body {
    padding: 16px 16px 18px;
    gap: 7px;
  }
  .rt-tool-name {
    font-size: 19px;
  }
  .rt-tool-text {
    font-size: 13.4px;
    line-height: 1.58;
  }
  .rt-foot {
    margin-top: 22px;
    padding-top: 20px;
  }
  .rt-guides {
    gap: 7px 14px;
    margin-top: 16px;
  }
  .rt-guides a {
    font-size: 12.8px;
  }
}

@media (max-width: 380px) {
  .rt-tool-media {
    height: 164px;
  }
}

/* wide desktop: four across in a single row */
@media (min-width: 1500px) {
  .rt-tools {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
  }
  .rt-shell {
    width: min(1560px, calc(100% - 60px));
  }
  .rt-tool-media {
    height: 196px;
  }
}

/* ============================================================
   4. LOCAL STORY — founder + Chilliwack consolidated
   ============================================================ */

#local-story {
  position: relative;
  padding: 54px 0 46px;
  /* Own background so the site-wide road graphic does not cut through the copy */
  background:
    radial-gradient(90% 70% at 12% 8%, rgba(201, 168, 76, 0.055), transparent 60%),
    linear-gradient(180deg, rgba(6, 10, 20, 0.94), rgba(5, 9, 17, 0.98));
}

.ls-container {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 44px;
  align-items: center;
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}

.ls-content {
  min-width: 0;
}

.ls-kicker {
  display: inline-block;
  margin-bottom: 12px;
  padding: 6px 13px;
  border: 1px solid rgba(201, 168, 76, 0.28);
  border-radius: 999px;
  background: rgba(201, 168, 76, 0.07);
  color: #e2c887;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}

#local-story h2 {
  margin: 0 0 16px;
  color: #fff;
  font-family: 'Poppins', 'Inter', sans-serif;
  font-size: clamp(25px, 3vw, 37px);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.025em;
}

#local-story h2 .accent {
  color: #e2c887;
}

.ls-lede {
  margin: 0 0 12px;
  color: rgba(226, 232, 240, 0.82);
  font-size: 15.5px;
  line-height: 1.72;
}

.ls-body {
  margin: 0 0 22px;
  color: rgba(226, 232, 240, 0.62);
  font-size: 14.5px;
  line-height: 1.72;
}

.ls-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}

.ls-stat {
  padding: 13px 14px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.022);
}

.ls-stat strong {
  display: block;
  color: #e2c887;
  font-family: 'Poppins', 'Inter', sans-serif;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.1;
}

.ls-stat span {
  display: block;
  margin-top: 3px;
  color: rgba(226, 232, 240, 0.55);
  font-size: 11.8px;
  line-height: 1.4;
}

.ls-eyebrow {
  margin: 0 0 10px;
  color: rgba(226, 232, 240, 0.5);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ls-neighborhoods {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.ls-neighborhoods li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid rgba(0, 212, 255, 0.16);
  border-radius: 999px;
  background: rgba(0, 212, 255, 0.045);
  color: rgba(226, 232, 240, 0.86);
  font-size: 13px;
  font-weight: 600;
}

.ls-pin {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rt-cyan);
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.8);
  flex-shrink: 0;
}

.ls-pickup-note {
  margin: -10px 0 20px;
  color: rgba(226, 232, 240, 0.48);
  font-size: 12.6px;
  line-height: 1.55;
}

.ls-address {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 22px;
  padding: 13px 16px;
  border-left: 2px solid rgba(201, 168, 76, 0.5);
  background: rgba(255, 255, 255, 0.022);
  border-radius: 0 10px 10px 0;
}

.ls-address strong {
  color: #fff;
  font-size: 14px;
}

.ls-address span {
  color: rgba(226, 232, 240, 0.6);
  font-size: 13px;
}

.ls-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.ls-btn-primary,
.ls-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 26px;
  border-radius: 12px;
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.26s ease, box-shadow 0.26s ease, background 0.26s ease, border-color 0.26s ease, color 0.26s ease;
}

.ls-btn-primary {
  border: 1px solid rgba(201, 168, 76, 0.55);
  background: linear-gradient(135deg, rgba(201, 168, 76, 0.20), rgba(201, 168, 76, 0.08));
  color: #f2e0b0;
}

.ls-btn-ghost {
  border: 1px solid rgba(0, 212, 255, 0.30);
  background: rgba(0, 212, 255, 0.05);
  color: #bff0ff;
}

@media (hover: hover) and (pointer: fine) {
  .ls-btn-primary:hover {
    transform: translateY(-2px);
    border-color: rgba(201, 168, 76, 0.9);
    color: #fff;
  }
  .ls-btn-ghost:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 212, 255, 0.7);
    color: #fff;
  }
}

.ls-disclosure {
  width: min(1180px, calc(100% - 40px));
  margin: 30px auto 0;
  color: rgba(226, 232, 240, 0.48);
  font-size: 13px;
  line-height: 1.65;
  text-align: center;
}

.ls-disclosure a {
  color: rgba(0, 212, 255, 0.85);
  font-weight: 600;
}

@media (max-width: 1000px) {
  .ls-container {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

@media (max-width: 760px) {
  #local-story {
    padding: 38px 0 34px;
  }
  .ls-container,
  .ls-disclosure {
    width: calc(100% - 28px);
  }
  .ls-lede {
    font-size: 14.6px;
  }
  .ls-body {
    font-size: 14px;
  }
  .ls-stats {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .ls-stat {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 10px 13px;
  }
  .ls-stat strong {
    font-size: 17px;
  }
  .ls-stat span {
    margin-top: 0;
  }
  .ls-actions {
    gap: 9px;
  }
  .ls-btn-primary,
  .ls-btn-ghost {
    flex: 1 1 auto;
    padding: 12px 16px;
    font-size: 13.8px;
  }
}

/* ============================================================
   5. VERIFIED CREDENTIALS — tightened (licences + dates intact)
   ============================================================ */

#verified-credentials {
  padding-top: 34px;
  padding-bottom: 34px;
}

#verified-credentials .vc-header {
  margin-bottom: 24px;
}

#verified-credentials .vc-sub {
  max-width: 68ch;
  margin-left: auto;
  margin-right: auto;
  font-size: 14px;
  line-height: 1.62;
}

/* ============================================================
   6. HOW IT WORKS — compact numbered rail
   ============================================================ */

#how-it-works.hiw-compact {
  padding: 34px 0 40px;
}

.hiw-compact .hiw-header {
  margin-bottom: 24px;
}

.hiw-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: hiw;
}

.hiw-step {
  position: relative;
  min-width: 0;
  padding: 18px 18px 16px;
  border: 1px solid rgba(0, 212, 255, 0.10);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
}

.hiw-step .hiw-num {
  display: block;
  margin-bottom: 6px;
  color: rgba(0, 212, 255, 0.82);
  font-family: 'Poppins', 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.hiw-step h3 {
  margin: 0 0 5px;
  color: #fff;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.hiw-step p {
  margin: 0;
  color: rgba(226, 232, 240, 0.58);
  font-size: 13px;
  line-height: 1.58;
}

@media (max-width: 980px) {
  .hiw-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  #how-it-works.hiw-compact {
    padding: 26px 0 30px;
  }
  .hiw-rail {
    gap: 10px;
  }
  .hiw-step {
    padding: 14px 14px 13px;
  }
  .hiw-step h3 {
    font-size: 14.5px;
  }
  .hiw-step p {
    font-size: 12.6px;
  }
}

@media (max-width: 420px) {
  .hiw-rail {
    grid-template-columns: 1fr;
  }
  .hiw-step {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 12px;
    align-items: baseline;
  }
  .hiw-step .hiw-num {
    grid-row: 1 / span 2;
    margin-bottom: 0;
  }
}

/* ============================================================
   7. FINAL CTA / FAQ — trims
   ============================================================ */

#faq {
  padding-top: 34px;
  padding-bottom: 34px;
}

#final-cta {
  padding-top: 34px;
  padding-bottom: 44px;
}

/* Third option beside the two CTA buttons, for visitors who would rather call
   than book online. Styled as a quiet ghost so it does not outrank Book Online. */
.fcta-button-phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 26px;
  border: 1px solid rgba(226, 232, 240, 0.20);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(226, 232, 240, 0.88);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: transform 0.24s ease, border-color 0.24s ease, color 0.24s ease, background 0.24s ease;
}

.fcta-button-phone svg {
  width: 15px;
  height: 15px;
  opacity: 0.8;
}

@media (hover: hover) and (pointer: fine) {
  .fcta-button-phone:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 212, 255, 0.55);
    background: rgba(0, 212, 255, 0.06);
    color: #fff;
  }
}

@media (max-width: 620px) {
  .fcta-button-phone {
    width: 100%;
    padding: 14px 20px;
  }
}

/* ============================================================
   8. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  /* The ticker stops moving and becomes a plain wrapped list. The duplicate
     pass is dropped so nothing is stated twice. */
  .tm-track {
    animation: none;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }
  .tm-list[aria-hidden="true"] {
    display: none;
  }
  .tm-list {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 6px;
  }
  .tm-marquee {
    -webkit-mask-image: none;
            mask-image: none;
    padding: 10px 14px;
  }
  .tm-list li:last-child::after {
    display: none;
  }

  .rt-tool,
  .qs-card,
  .rt-tool-fallback,
  .rt-hub-link,
  .ls-btn-primary,
  .ls-btn-ghost,
  .rt-tool-cta {
    transition: none !important;
  }
  .rt-tool:hover,
  .qs-card:hover,
  .rt-hub-link:hover,
  .ls-btn-primary:hover,
  .ls-btn-ghost:hover {
    transform: none !important;
  }
  .rt-tool:hover .rt-tool-fallback {
    transform: none !important;
  }
  .rt-tool-video {
    display: none !important;
  }
}