/* ── Hero — centered title only ── */
    .tr-hero {
      margin-top: 68px;
      padding: clamp(2.5rem, 5vw, 3.5rem) clamp(1.5rem, 6vw, 5rem);
      border-bottom: 1px solid var(--border);
      text-align: center;
    }
    .tr-title {
      font-family: var(--font-display);
      font-size: clamp(1.6rem, 3vw, 2.4rem);
      font-weight: 400;
      line-height: 1.15;
      letter-spacing: -0.02em;
      color: var(--ink);
      max-width: 24ch;
      margin: 0 auto;
      text-wrap: balance;
      animation: fadeUp 0.7s 0.1s cubic-bezier(0.16,1,0.3,1) both;
    }

    /* ── Fleet strip — seat classes as big numerals ── */
    .tr-fleet {
      max-width: 1280px; margin: 0 auto;
      padding: clamp(3rem, 5vw, 4.5rem) clamp(2rem, 5vw, 4rem);
    }
    .tr-fleet-row {
      display: flex;
      flex-wrap: wrap;
      align-items: stretch;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }
    .tr-fleet-item {
      flex: 1 1 120px;
      text-align: center;
      padding: 1.8rem 1rem;
      border-right: 1px solid var(--border);
    }
    .tr-fleet-item:last-child { border-right: none; }
    .tr-fleet-num {
      font-family: var(--font-display);
      font-size: clamp(2.6rem, 5vw, 4rem);
      font-weight: 300;
      line-height: 1;
      letter-spacing: -0.04em;
      color: var(--ink);
      font-variant-numeric: tabular-nums;
    }
    .tr-fleet-label {
      font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em;
      text-transform: uppercase; color: var(--muted);
      margin-top: 0.5rem;
    }
    .tr-brands {
      display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
      margin-top: 1.5rem;
    }
    .tr-brands-label {
      font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em;
      text-transform: uppercase; color: var(--ochre);
      margin-right: 0.8rem;
    }
    .tr-chip {
      font-size: 0.78rem; font-weight: 500; color: #4A3828;
      border: 1px solid var(--border); border-radius: 999px;
      padding: 0.4rem 0.95rem;
      background: rgba(255,255,255,0.4);
    }

    /* ── Booking process — numbered stops on the route ── */
    .tr-process {
      max-width: 1280px; margin: 0 auto;
      padding: clamp(2rem, 4vw, 3rem) clamp(2rem, 5vw, 4rem) clamp(4.5rem, 8vw, 7rem);
    }
    .tr-process .section-header { align-items: flex-end; }
    .tr-process-intro {
      font-size: 1.02rem; font-weight: 400; color: var(--ink);
      line-height: 1.8; max-width: 62ch;
      margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
    }
    .tr-route { position: relative; padding-left: 4.2rem; max-width: 760px; }
    .tr-route::before {
      content: '';
      position: absolute; left: 21px; top: 1.4rem; bottom: 1.4rem;
      border-left: 2px dotted rgba(196,116,26,0.45);
    }
    .tr-step {
      position: relative;
      padding-bottom: clamp(2.2rem, 4vw, 3rem);
    }
    .tr-step:last-child { padding-bottom: 0; }
    /* Numbered waypoint badge */
    .tr-step-num {
      position: absolute; left: -4.2rem; top: -0.2rem;
      width: 44px; height: 44px;
      display: grid; place-items: center;
      font-family: var(--font-display);
      font-size: 1.05rem; font-style: italic; font-weight: 500;
      color: var(--rust);
      background: var(--cream);
      border-radius: 50%;
    }
    .tr-step-num::before {
      content: ''; position: absolute; inset: 0;
      border-radius: 50%;
      border: 1.5px dashed rgba(196,116,26,0.6);
      transition: transform 0.7s cubic-bezier(0.16,1,0.3,1);
    }
    .tr-step:hover .tr-step-num::before { transform: rotate(60deg); }
    .tr-step-title {
      font-family: var(--font-display);
      font-size: clamp(1.25rem, 2vw, 1.55rem); font-weight: 500;
      letter-spacing: -0.015em; color: var(--ink);
      margin-bottom: 0.6rem;
      padding-top: 0.35rem;
    }
    .tr-step-text {
      font-size: 1rem; font-weight: 400; color: #2E2318;
      line-height: 1.8;
    }
    .tr-step-text a { color: inherit; font-weight: 500; transition: color 0.2s; }
    .tr-step-text a:hover { color: var(--ochre); }
    .tr-step-list { list-style: none; padding: 0; margin: 0; }
    .tr-step-list li {
      position: relative;
      padding-left: 1.2rem;
      font-size: 1rem; font-weight: 400; color: #2E2318; line-height: 1.8;
      margin-bottom: 0.3rem;
    }
    .tr-step-list li::before {
      content: ''; position: absolute; left: 0; top: 0.72em;
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--ochre); opacity: 0.55;
    }
    /* Note callout */
    .tr-note {
      margin-top: 0.9rem;
      padding: 0.9rem 1.1rem;
      border-left: 3px solid var(--ochre);
      background: rgba(196,116,26,0.07);
      border-radius: 0 3px 3px 0;
      font-size: 0.92rem; font-weight: 400; color: #4A3828; line-height: 1.7;
    }
    .tr-note strong { color: var(--rust); font-weight: 600; }
    /* Bank card */
    .tr-bank {
      margin-top: 1rem;
      padding: 1.3rem 1.4rem;
      border: 1px solid rgba(196,116,26,0.28);
      border-radius: 4px;
      background: #FDFAF2;
      display: grid;
      grid-template-columns: max-content 1fr;
      gap: 0.4rem 1.2rem;
      font-size: 0.95rem;
      max-width: 480px;
    }
    .tr-bank dt {
      font-size: 0.66rem; font-weight: 600; letter-spacing: 0.14em;
      text-transform: uppercase; color: var(--muted);
      align-self: center;
    }
    .tr-bank dd {
      margin: 0; color: var(--ink); font-weight: 500;
    }
    .tr-bank .tr-bank-acc {
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.06em;
      font-size: 1.05rem;
    }

    /* ── Booking CTA card ── */
    .tr-cta {
      max-width: 760px;
      margin: 0 auto;
      padding: 0 clamp(2rem, 5vw, 4rem) clamp(4.5rem, 8vw, 7rem);
    }
    .tr-cta-card {
      padding: clamp(1.8rem, 3vw, 2.4rem);
      border: 1px solid var(--border);
      border-radius: 4px;
      background: rgba(255,255,255,0.35);
      display: flex;
      align-items: center;
      gap: 1.6rem;
      flex-wrap: wrap;
    }
    .tr-cta-info { flex: 1; min-width: 220px; }
    .tr-cta-title {
      font-family: var(--font-display);
      font-size: 1.3rem; font-weight: 500;
      letter-spacing: -0.01em; color: var(--ink);
      margin-bottom: 0.35rem;
    }
    .tr-cta-meta {
      font-size: 0.9rem; font-weight: 400; color: #4A3F35; line-height: 1.7;
    }
    .tr-cta-meta a { color: inherit; transition: color 0.2s; }
    .tr-cta-meta a:hover { color: var(--ochre); }
    .btn-tr {
      display: inline-flex; align-items: center; gap: 0.6rem;
      background: var(--ochre); color: #fff; text-decoration: none;
      font-size: 0.85rem; font-weight: 600; letter-spacing: 0.06em;
      text-transform: uppercase; padding: 0.9rem 1.8rem; border-radius: 2px;
      transition: background 0.3s, transform 0.3s;
      white-space: nowrap;
    }
    .btn-tr:hover { background: var(--rust); transform: translateY(-2px); }

    
      .tr-fleet-item { flex: 1 1 33%; border-bottom: 1px solid var(--border); }
      .tr-fleet-row { border-bottom: none; }
    

    @media (max-width: 600px){
      .tr-route { padding-left: 3.4rem; }
      .tr-route::before { left: 17px; }
      .tr-step-num { left: -3.4rem; width: 36px; height: 36px; font-size: 0.9rem; }
      .tr-bank { grid-template-columns: 1fr; gap: 0.15rem; }
      .tr-bank dt { margin-top: 0.6rem; }
      .tr-cta-card { flex-direction: column; align-items: flex-start; }
      .btn-tr { width: 100%; justify-content: center; }
    }
    @media (prefers-reduced-motion: reduce){
      .tr-title { animation: none; }
      .tr-step-num::before, .btn-tr { transition: none; }
    }

/* Mobile field-guide: transport service */
.tr-hero {
  margin-top: 60px;
  padding: 34px var(--m-gutter) 28px;
  text-align: left;
  background: linear-gradient(135deg, rgba(43, 124, 184, 0.14), transparent 68%), var(--m-mist);
  border-bottom-color: var(--m-line);
}
.tr-hero::before {
  content: "GROUND ROUTE / TRANSFER";
  display: block;
  margin-bottom: 12px;
  color: var(--m-departure);
  font: 800 11px/1 var(--m-mono);
  letter-spacing: 0.1em;
}
.tr-title {
  max-width: 12ch;
  margin: 0;
  font-family: Inter, Arial, sans-serif;
  font-size: clamp(34px, 10vw, 46px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.05em;
}
.tr-fleet,
.tr-process,
.tr-cta { width: 100%; padding-right: var(--m-gutter); padding-left: var(--m-gutter); }
.tr-fleet { padding-top: 30px; padding-bottom: 40px; }
.tr-fleet-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin: 0 calc(var(--m-gutter) * -1);
  padding: 0 var(--m-gutter) 12px;
  overflow-x: auto;
  border: 0;
  scroll-snap-type: x mandatory;
}
.tr-fleet-item {
  flex: 0 0 132px;
  padding: 18px 12px;
  background: var(--m-paper);
  border: 1px solid var(--m-line);
  border-radius: 16px;
  scroll-snap-align: start;
}
.tr-fleet-num { color: var(--m-ocean-deep); font-family: Inter, Arial, sans-serif; font-size: 38px; font-weight: 800; }
.tr-fleet-label,
.tr-brands-label { font-family: var(--m-mono); font-size: 10px; }
.tr-brands { flex-wrap: nowrap; margin: 14px calc(var(--m-gutter) * -1) 0; padding: 0 var(--m-gutter) 3px; overflow-x: auto; }
.tr-chip { flex: 0 0 auto; min-height: 38px; display: inline-flex; align-items: center; background: var(--m-paper); border-color: var(--m-line); }
.tr-process { padding-top: 24px; padding-bottom: 46px; }
.tr-process-intro { font-size: 15px; line-height: 1.7; }
.tr-route { padding-left: 52px; }
.tr-route::before { left: 17px; border-left-color: rgba(43, 124, 184, 0.35); }
.tr-step { padding-bottom: 30px; }
.tr-step-num {
  left: -52px;
  width: 36px;
  height: 36px;
  color: var(--m-paper);
  background: var(--m-ocean-deep);
  border-radius: 12px;
  font-family: var(--m-mono);
  font-style: normal;
}
.tr-step-num::before { display: none; }
.tr-step-title { font-family: Inter, Arial, sans-serif; font-size: 21px; font-weight: 800; }
.tr-step-text,
.tr-step-list li { color: var(--m-muted); font-size: 15px; line-height: 1.7; }
.tr-note { background: rgba(239, 123, 69, 0.08); border-left-color: var(--m-departure); border-radius: 0 12px 12px 0; }
.tr-bank { padding: 16px; background: var(--m-paper); border-color: var(--m-line); border-radius: 14px; }
.tr-cta { padding-bottom: 56px; }
.tr-cta-card { padding: 18px; background: var(--m-paper); border-color: var(--m-line); border-radius: var(--m-radius); }
.tr-cta-title { font-family: Inter, Arial, sans-serif; font-size: 22px; font-weight: 800; }
.btn-tr { min-height: 50px; justify-content: center; background: var(--m-departure); border-radius: 12px; }