/*
  Page content: sections, hero, cards, questions, steps, the legal strip and the
  light theme used on every page except Home.

  Split out of style.css, which was over 550 lines and mixed the chrome (shell,
  sidebar, navigation, buttons) with the page interiors. style.css keeps the theme
  header, the tokens and the chrome; this file is everything inside the content
  column.
*/

/* ---------------------------------------------------------------
   Sections
   --------------------------------------------------------------- */
.mrt-section { padding: var(--s-8) var(--s-7); }
.mrt-section--ink { background: var(--ink); }
.mrt-section--ink2 { background: var(--ink-2); }
.mrt-section--paper { background: var(--paper); color: var(--ink-2); padding: var(--s-7); border-bottom: 1px solid var(--line); }

.mrt-section h1,
.mrt-section h2 { font-size: var(--t-3xl); color: var(--white); margin: 0 0 var(--s-6); }
.mrt-section--paper h1,
.mrt-section--paper h2 { color: var(--ink); }

/* Hero */
.mrt-hero {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  background: var(--ink);
  color: var(--white);
}
.mrt-hero__body { padding: var(--s-8) var(--s-7); }
.mrt-hero__badge {
  display: inline-block;
  color: var(--amber);
  border: 1px solid var(--amber);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--t-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 6px 10px;
  margin-bottom: var(--s-5);
}
.mrt-hero h1 {
  font-size: var(--t-4xl);
  line-height: 0.98;
  margin: 0 0 var(--s-5);
  max-width: 18ch;
}
.mrt-hero__intro {
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--mute-lt);
  margin: 0 0 var(--s-6);
  max-width: 42ch;
}
.mrt-hero__actions { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.mrt-hero__img { height: 100%; min-height: 320px; border-left: 4px solid var(--amber); }
.mrt-hero__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Facts */
.mrt-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.mrt-fact { border-top: 2px solid var(--amber); padding-top: var(--s-3); }
.mrt-fact__key {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--t-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber-dk);
  padding-bottom: var(--s-2);
}
.mrt-fact__val { font-size: var(--t-lg); line-height: 1.6; color: var(--ink-2); }

/* Image band */
.mrt-plates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; background: var(--ink-3); }
.mrt-plate { height: 220px; }
.mrt-plate img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------------------------------------------------------------
   Footer
   --------------------------------------------------------------- */
.mrt-footer {
  background: var(--ink);
  color: var(--mute-lt);
  border-top: 1px solid var(--ink-3);
  padding: var(--s-7);
  margin-top: auto;
}
.mrt-footer__top { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--s-6); align-items: start; }
.mrt-footer__blurb { font-size: var(--t-sm); line-height: 1.7; margin: 0; max-width: 44ch; }
.mrt-footer__actions { display: grid; gap: var(--s-3); justify-items: start; }
.mrt-footer__legal {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  background: var(--ink);
  border-top: 1px solid var(--ink-3);
  font-size: var(--t-xs);
  line-height: 1.7;
  color: var(--mute-lt2);
}
.mrt-footer__legal a { color: var(--mute-lt); text-decoration: underline; }

/* ---------------------------------------------------------------
   Mobile — replaces Prototype 2's data-view overrides
   --------------------------------------------------------------- */
@media (max-width: 900px) {
  .mrt-shell { grid-template-columns: minmax(0, 1fr); background: none; }
  .mrt-sidebar { display: none; }

  .mrt-mobnav {
    display: grid;
    /* Adapts to however many menu items there are, rather than assuming five. */
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    background: var(--ink);
    border-bottom: 1px solid var(--ink-3);
    position: sticky;
    top: 0;
    z-index: 30;
  }
  .mrt-mobnav a {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: var(--t-sm);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-align: center;
    padding: 12px 4px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--line);
    border: 0;
    border-right: 1px solid var(--ink-3);
    text-decoration: none;
  }
  .mrt-mobnav a:last-child { border-right: 0; }
  .mrt-mobnav a[aria-current="page"] { background: var(--amber); color: var(--ink); }

  .mrt-mobbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    background: var(--ink);
    padding: var(--s-4) var(--s-5);
    border-bottom: 1px solid var(--ink-3);
  }
  .mrt-mobbar .mrt-logo { max-width: 120px; padding-bottom: 0; }
  /* On a 320px screen the wordmark at 120px leaves exactly too little for three
     44px buttons, and the email icon drops to a second line. The mark reads fine
     smaller; the buttons cannot shrink without becoming a poor tap target. */
  @media (max-width: 360px) { .mrt-mobbar .mrt-logo { max-width: 92px; } }


  /* All three contact routes as icons. The sidebar carries them on desktop but is
     hidden here, which left WhatsApp and email unreachable on the device most
     people arrive on. Icons rather than values: three full numbers do not fit
     across a 320px screen, and one printed number beside two icons made the phone
     look like the only real option. */
  .mrt-mobbar__contact {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--s-2);
  }

  .mrt-iconlink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-height: 44px;
    border: 1px solid var(--ink-3);
    border-radius: 2px;
    text-decoration: none;
  }
  .mrt-iconlink:active { background: var(--ink-3); }
  .mrt-iconlink .mrt-contact__icon { width: 22px; height: 22px; }


  .mrt-hero, .mrt-facts, .mrt-plates, .mrt-footer__top { grid-template-columns: minmax(0, 1fr); }
  .mrt-hero__img { height: 200px; min-height: 0; border-left: 0; border-top: 4px solid var(--amber); }
  .mrt-plate { height: 130px; }
  .mrt-section, .mrt-hero__body { padding: var(--s-5) var(--s-5); }
  .mrt-section h1 { margin-bottom: var(--s-4); }
}

@media (min-width: 901px) {
  .mrt-mobbar { display: none; }
}


/* ---------------------------------------------------------------
   What we move
   ---------------------------------------------------------------
   The same numbered list as How it works, so the two pages read as one site.
   Both sets of class names are carried on the shared rules further down rather
   than restated here: two near-identical blocks are how the WhatsApp icon ended
   up amber in one place and green in another. */

/* ---------------------------------------------------------------
   Questions
   --------------------------------------------------------------- */
.mrt-faqs { max-width: 56rem; }
.mrt-faq { border-bottom: 1px solid var(--ink-3); }
.mrt-faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  width: 100%; text-align: left; cursor: pointer; padding: var(--s-5) 0;
  color: var(--white); min-height: 44px; list-style: none;
  font-family: var(--font-head); font-weight: 600; font-size: var(--t-xl);
  text-transform: uppercase; letter-spacing: 0.03em;
}
.mrt-faq__q::-webkit-details-marker { display: none; }
.mrt-faq__mark {
  font-family: var(--font-head); font-weight: 700; font-size: var(--t-2xl);
  color: var(--amber); line-height: 1; flex: none;
}
.mrt-faq__mark::before { content: '+'; }
.mrt-faq[open] .mrt-faq__mark::before { content: '\2212'; }
.mrt-faq__a {
  font-size: var(--t-base); line-height: 1.7; color: var(--mute-lt);
  margin: 0 0 var(--s-5); max-width: 68ch;
}

/* ---------------------------------------------------------------
   How it works
   --------------------------------------------------------------- */
/* Spacing is deliberately tight. On a phone these stack into one column, and the
   airy desktop rhythm turned seven services into nearly two thousand pixels of
   scrolling. The amber rule already separates the items, so the gaps between them
   do not have to. */
.mrt-steps,
.mrt-services {
  list-style: none; margin: 0 0 var(--s-5); padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--s-4);
}
.mrt-step,
.mrt-card { border-top: 2px solid var(--amber); padding-top: var(--s-3); }
.mrt-step__num,
.mrt-card__num {
  display: block; font-family: var(--font-head); font-weight: 700;
  font-size: var(--t-3xl); line-height: 1; color: var(--amber);
  font-feature-settings: 'tnum'; padding-bottom: var(--s-1);
}
.mrt-step__body,
.mrt-card__body { font-size: var(--t-base); line-height: 1.6; color: var(--mute-lt); margin: 0; }

.mrt-empty { color: var(--mute-lt); font-size: var(--t-base); }



/* No outer cap. At 1180px the content stopped short of the window with dark down
   both sides, which reads as the page being cut off — even on a 15in laptop. The
   shell fills the window; the text inside is capped instead (see the ch-based
   max-widths on the intro, answers and card text), so lines never run too long. */

/* Contact lines in the sidebar: icon, then the number or address. */
.mrt-contact { display: flex; align-items: center; gap: var(--s-2); min-height: 28px; }
.mrt-contact__icon { width: 18px; height: 18px; flex: none; color: var(--amber); }
.mrt-contact__value { border-bottom: 1px dashed var(--amber); }
a.mrt-contact__value { color: var(--white); }
a.mrt-contact__value:hover { color: var(--amber-lt); text-decoration: none; }
.mrt-contact--whatsapp .mrt-contact__icon,
.mrt-iconlink--whatsapp .mrt-contact__icon { color: var(--whatsapp); }

/* The phone number, WhatsApp and email are the point of the whole site — a driver
   gets paid when someone rings. They were set in the prototype's quiet grey, which
   is legible but reads as small print. Lifted to full white at body size. */
.mrt-contact { min-height: 32px; gap: var(--s-3); }
.mrt-contact__icon { width: 20px; height: 20px; }
.mrt-contact__value {
  font-size: var(--t-base);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--white);
}
a.mrt-contact__value { color: var(--white); }
a.mrt-contact__value:hover { color: var(--amber-lt); }

/* Still unset: readable, but visibly provisional. */
.mrt-contact__value.mrt-tel--pending { color: var(--mute-lt); font-weight: 600; }

/* White throughout, set or not, and uppercase like the rest of the livery. */
.mrt-contact__value,
.mrt-contact__value.mrt-tel--pending,
a.mrt-contact__value {
  color: var(--white);
  text-transform: uppercase;
}

/* ===============================================================
   Light pages — everything except Home
   The sidebar and footer stay dark; the content column goes paper.
   Amber is only used at --amber-dk on light grounds: #ff6a13 on #f6f5f2
   is about 2.8:1, which is not readable as text.
   =============================================================== */
:root {
  --on-paper: #131517;    /* headings */
  --on-paper-2: #3d4348;  /* body copy */
  --on-paper-3: #6a7075;  /* secondary */
  --paper-2: #eceae5;     /* recessed fill on light pages */
}

.mrt-light .mrt-main { background: var(--paper); }
.mrt-light .mrt-section--ink,
.mrt-light .mrt-section--ink2 { background: var(--paper); }
.mrt-light .mrt-section h1,
.mrt-light .mrt-section h2 { color: var(--on-paper); }
.mrt-light .mrt-lede { color: var(--on-paper-2); }
.mrt-light .mrt-empty { color: var(--on-paper-3); }

.mrt-light .mrt-btn-link { color: var(--amber-dk); }
.mrt-light .mrt-btn-link:hover { color: var(--amber); }

/* Questions */
.mrt-light .mrt-faq { border-bottom-color: var(--line); }
.mrt-light .mrt-faq__q { color: var(--on-paper); }
.mrt-light .mrt-faq__mark { color: var(--amber-dk); }
.mrt-light .mrt-faq__a { color: var(--on-paper-2); }

/* How it works, and What we move on the same pattern */
.mrt-light .mrt-step__num,
.mrt-light .mrt-card__num { color: var(--amber-dk); }
.mrt-light .mrt-step__body,
.mrt-light .mrt-card__body { color: var(--on-paper-2); }

/* Mobile bar sits above the content column, so it stays dark with the sidebar. */
.mrt-light .mrt-mobbar, .mrt-light .mrt-mobnav { background: var(--ink); }

/* ---------------------------------------------------------------
   Legal strip — small print, every page, pinned to the bottom
   --------------------------------------------------------------- */
.mrt-legalbar {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3) var(--s-5);
  padding: var(--s-4) var(--s-7);
  background: var(--ink);
  border-top: 1px solid var(--ink-3);
  font-size: var(--t-xs);
  line-height: 1.7;
  color: var(--mute-lt2);
}
.mrt-legalbar__text { max-width: 80ch; }
.mrt-legalbar__links { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.mrt-legalbar__links a { color: var(--mute-lt); text-decoration: underline; }
.mrt-legalbar__links a:hover { color: var(--white); }
.mrt-legalbar__links li { list-style: none; }

/* The strip stays dark on the light pages too — it reads as chrome, like the
   sidebar, rather than as part of the page content. */

@media (max-width: 900px) {
  .mrt-legalbar { padding: var(--s-4) var(--s-5); }
}


/* Heading on each step, and on each thing we move, between number and text. */
.mrt-step__title,
.mrt-card__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--t-xl);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.15;
  color: var(--white);
  margin: 0 0 var(--s-2);
}
.mrt-light .mrt-step__title,
.mrt-light .mrt-card__title { color: var(--on-paper); }