/* ---------------------------------------------------------------------------
   Simple Transport - marketing site styles

   Values here are measured from the live Squarespace site (computed styles on
   /couch-removal at a 1280px viewport), not guessed, so the rebuild matches
   what customers see today:

     headings  Manrope 500        h1 62.08px / 1.056, tracking -0.02em
                                  h2 43.648px, h4 25.216px
     body      Arial 14.9056px / 22.3584px, #333
     page      #fff background, #1c1c1c default text
     container 1265px at 1280 viewport

   Squarespace shipped ~150 <style> tags and 12 render-blocking stylesheets per
   page. This is one file, cached once for the whole site.
--------------------------------------------------------------------------- */

/* Manrope, self-hosted. Squarespace pulled this from Google's servers, which
   costs an extra DNS + TLS handshake to a third party before any heading can
   render. Latin subset only, 24 KB per weight. font-display:swap so text is
   visible immediately in the fallback and reflows once the font arrives. */
@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/manrope-500.woff2) format("woff2");
}
@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/manrope-600.woff2) format("woff2");
}

:root {
  --font-heading: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: Arial, Helvetica, sans-serif;

  --ink: #1c1c1c;
  --ink-body: #333;
  --ink-invert: #fafafa;
  --bg: #fff;
  --bg-dark: #000;
  --rule: #e6e6e6;
  --accent: #c8a24a;          /* the gold chevrons / accents */
  --ok: #1f7a3f;              /* the green discount banner */
  --ok-bg: #eaf7ee;

  --container: 1200px;
  --gutter: 32px;

  /* Squarespace's scale, kept exact at desktop and stepped down on mobile. */
  --h1: 62.08px;
  --h2: 43.648px;
  --h3: 32px;
  --h4: 25.216px;
  --body: 14.9056px;
  --body-lh: 22.3584px;
}

@media (max-width: 900px) {
  :root {
    --h1: 38px;
    --h2: 29px;
    --h3: 24px;
    --h4: 20px;
    --gutter: 20px;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-body);
  font-family: var(--font-body);
  font-size: var(--body);
  line-height: var(--body-lh);
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 .5em;
}

h1 { font-size: var(--h1); line-height: 1.056; letter-spacing: -.02em; }
h2 { font-size: var(--h2); line-height: 1.1;   letter-spacing: -.02em; }
h3 { font-size: var(--h3); line-height: 1.15; }
h4 { font-size: var(--h4); line-height: 1.25; }

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --- header ------------------------------------------------------------- */

.site-header {
  background: var(--bg-dark);
  color: var(--ink-invert);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 75px;
}
.site-header .logo img { width: 150px; }
.site-header .phone {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 600;
  text-decoration: none;
  padding: 10px 18px;
  border: 2px solid var(--ink-invert);
  border-radius: 4px;
  white-space: nowrap;
}

/* --- hero --------------------------------------------------------------- */

.hero { position: relative; background: #111; }
.hero-img {
  width: 100%;
  height: clamp(260px, 34vw, 430px);
  object-fit: cover;
  opacity: .78;
}
.hero-body {
  position: absolute; inset: 0;
  display: grid; align-content: center; justify-items: center;
  text-align: center;
  padding: 40px var(--gutter);
}
.hero h1, .hero p { color: var(--ink-invert); }
.hero p { max-width: 46ch; font-size: 1.15rem; line-height: 1.5; }

.trust-bar {
  background: var(--bg-dark);
  color: var(--ink-invert);
  font-size: 15px;
}
.trust-bar .container {
  display: flex; justify-content: space-between; gap: 16px;
  padding-block: 10px;
}
.trust-bar span { display: inline-flex; align-items: center; gap: 8px; }
.trust-bar img { width: 20px; height: auto; }

/* Trust badges */
.badge-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  align-items: center;
  max-width: 1000px;
  margin-inline: auto;
}
.badge-row img { width: 100%; height: auto; border-radius: 4px; }
@media (max-width: 700px) {
  .trust-bar .container { flex-direction: column; align-items: center; text-align: center; gap: 4px; }
}

/* --- sections ----------------------------------------------------------- */

.section { padding-block: 56px; }
.section--tight { padding-block: 32px; }
.section h2 { text-align: center; }
.section > .container > p { max-width: 70ch; margin-inline: auto; }

.booking-cta { text-align: center; }
.booking-cta h2 { text-decoration: underline; text-underline-offset: 6px; }
.discount-badge {
  display: inline-block;
  border: 1px solid var(--ok);
  background: var(--ok-bg);
  color: var(--ok);
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 4px;
}

/* Booking widget - iframed so it is cached once for the whole site. Height is
   driven by postMessage from the widget; this is the pre-resize fallback. */
.booking-frame {
  width: 100%;
  min-height: 240px;
  border: 0;
  display: block;
}
@media (max-width: 700px) { .booking-frame { min-height: 260px; } }

/* Long-form content pages (privacy, terms, refund) */
.prose { max-width: 780px; }
.prose h1 { font-size: var(--h2); margin-bottom: .6em; }
.prose h2 { font-size: var(--h3); text-align: left; margin-top: 1.6em; }
.prose h3, .prose h4 { margin-top: 1.4em; }
.prose p { margin: 0 0 1em; }

/* FAQ - the source pages use plain <p> pairs, so we render real <details> */
.faq { max-width: 820px; margin-inline: auto; }
.faq details {
  border-bottom: 1px solid var(--rule);
  padding: 14px 0;
}
.faq summary {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; font-size: 22px; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 10px 0 0; }

/* item lists - three columns on desktop, stacked on mobile */
.item-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px 32px;
  max-width: 900px;
  margin-inline: auto;
}
.item-cols ul { margin: 0; padding-left: 1.1em; }
.item-cols li { margin-bottom: 4px; }

.job-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.job-gallery img { border-radius: 4px; aspect-ratio: 4 / 3; object-fit: cover; }

/* --- footer ------------------------------------------------------------- */

.site-footer {
  background: var(--bg-dark);
  color: var(--ink-invert);
  padding-block: 44px;
  margin-top: 48px;
}
.site-footer a { color: var(--ink-invert); }
.site-footer .cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 28px;
}
.site-footer h4 { color: var(--ink-invert); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 6px; }

/* Respect users who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}