/* ============================================================
   offroad281.com — below-the-fold styles
   Loaded async (preload + onload swap) — extracted from what was
   an 839-line inline <style> block, the #1 documented cause of
   mobile element-render-delay in this project's own playbook.
   Everything here is genuinely below the initial viewport:
   reviews, video, family, booking, footer, FAQ, and misc content
   sections. Header/hero/nav CSS stays inline in index.html since
   it's needed for first paint.
   ============================================================ */

  .video-section{content-visibility:auto;contain-intrinsic-size:0 700px;}
  .family-section{content-visibility:auto;contain-intrinsic-size:0 950px;}
  .sec-wrap-1100{content-visibility:auto;contain-intrinsic-size:0 750px;}
  .how-wrap{content-visibility:auto;contain-intrinsic-size:0 950px;}
  .booking-intro{content-visibility:auto;contain-intrinsic-size:0 200px;}
  .sec-wrap-900{content-visibility:auto;contain-intrinsic-size:0 650px;}

    /* ── REVIEWS STRIP ── */
    .reviews-strip {
      background: var(--surface);
      border-bottom: 1px solid var(--rule);
      padding: 1.6rem 0 1.8rem;
      position: relative;
      z-index: 1;
      overflow: hidden;
    }
    .reviews-label {
      font-size: .65rem; letter-spacing: .28em;
      text-transform: uppercase; color: var(--muted);
      text-align: center; margin-bottom: 1.2rem;
      padding: 0 2rem;
    }
    /* Outer scroll viewport — user can swipe */
    .reviews-viewport {
      overflow-x: scroll;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      position: relative;
      padding: 0 2rem;
      cursor: grab;
    }
    .reviews-viewport::-webkit-scrollbar { display: none; }
    .reviews-viewport.dragging { cursor: grabbing; }

    /* Inner track — scrolled by JS RAF */
    .reviews-track {
      display: flex;
      gap: 1.2rem;
      width: max-content;
    }
    .review-card {
      background: var(--card);
      border: 1px solid var(--rule);
      padding: 1.1rem 1.4rem;
      min-width: 290px; max-width: 310px;
      flex-shrink: 0;
      display: flex; flex-direction: column;
    }
    .review-card-head {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: .55rem;
    }
    .review-stars { display: flex; gap: 2px; }
    .review-stars svg { width: 13px; height: 13px; fill: var(--gold); }
    .review-source-badge {
      width: 18px; height: 18px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .review-source-badge svg { width: 18px; height: 18px; }
    .review-text { font-size: .82rem; line-height: 1.55; color: rgba(240,232,216,.78); margin-bottom: .7rem; font-style: italic; flex: 1; }
    .review-author { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
    .review-source { font-size: .65rem; color: var(--muted); margin-top: .15rem; letter-spacing: .04em; }

    /* ── VIDEO SECTION ── */
    .video-section {
      max-width: 1100px;
      margin: 0 auto;
      padding: 3rem 2rem 0;
      display: flex;
      align-items: center;
      gap: 2.5rem;
      flex-wrap: wrap;
    }
    .video-text { flex: 1; min-width: 240px; }
    .video-text .section-label {
      font-size: .68rem; letter-spacing: .28em;
      text-transform: uppercase; color: var(--orange);
      margin-bottom: .6rem; display: block;
      text-align: center;
    }
    .video-text h2 {
      font-family: 'Russo One', sans-serif;
      font-size: clamp(1.5rem, 3vw, 2.2rem);
      text-transform: uppercase;
      line-height: 1.05;
      margin-bottom: .8rem;
      text-align: center;
    }
    .video-text h2 span { color: var(--orange); }
    .video-text p {
      font-size: .9rem; line-height: 1.7;
      color: rgba(240,232,216,.6);
    }
    .video-embed-wrap {
      flex: 0 0 auto;
      width: min(360px, 100%);
      position: relative;
      /* YouTube Shorts aspect ratio 9:16 */
      aspect-ratio: 9 / 16;
      max-height: 500px;
      border: 1px solid var(--rule);
      overflow: hidden;
      box-shadow: 0 12px 40px rgba(0,0,0,.5);
    }
    .video-embed-wrap iframe {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      border: none;
    }
    @media (max-width: 700px) {
      .video-section { flex-direction: column; padding: 2rem 1.25rem 0; }
      .video-embed-wrap { width: min(300px, 100%); max-height: 420px; }
    }

    /* ── FAMILY SECTION ── */
    .family-section {
      max-width: 1100px;
      margin: 0 auto;
      padding: 3rem 2rem 0;
      display: flex;
      align-items: center;
      gap: 2.5rem;
      flex-wrap: wrap;
    }
    .family-img-wrap {
      flex: 1 1 auto;
      width: min(520px, 100%);
      border: 1px solid var(--rule);
      box-shadow: 0 12px 40px rgba(0,0,0,.5);
    }
    .family-img-wrap img {
      width: 100%;
      height: auto;
      display: block;
    }
    .age-badge {
      display: block;
      background: var(--orange-btn);
      color: #fff;
      font-family: 'Russo One', sans-serif;
      font-size: .75rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      padding: .55rem 1rem;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .family-text { flex: 1; min-width: 240px; }
    .family-text .section-label {
      font-size: .68rem; letter-spacing: .28em;
      text-transform: uppercase; color: var(--orange);
      margin-bottom: .6rem; display: block;
      text-align: center;
    }
    .family-text h2 {
      font-family: 'Russo One', sans-serif;
      font-size: clamp(1.5rem, 3vw, 2.2rem);
      text-transform: uppercase;
      line-height: 1.05;
      margin-bottom: 1rem;
      text-align: center;
    }
    .family-text h2 span { color: var(--orange); }
    .family-text p {
      font-size: .92rem; line-height: 1.75;
      color: rgba(240,232,216,.65);
      margin-bottom: .85rem;
    }
    .family-text p strong { color: var(--light); }
    .family-text .family-bullets {
      display: flex; flex-direction: column; gap: .5rem;
      margin-top: .5rem;
    }
    .family-bullet {
      display: flex; align-items: center; gap: .5rem;
      font-size: .82rem; font-weight: 600;
      color: var(--tan); letter-spacing: .04em;
    }
    .family-bullet svg { color: var(--orange); width: 14px; height: 14px; flex-shrink: 0; }
    @media (max-width: 700px) {
      .family-section { flex-direction: column-reverse; padding: 2rem 1.25rem 0; }
      .family-img-wrap { width: 100%; }
    }
    .booking-intro {
      max-width: 1100px; margin: 0 auto;
      padding: 2.5rem 2rem 0;
      text-align: center;
    }
    .booking-intro h2 {
      font-family: 'Russo One', sans-serif;
      font-size: clamp(1.8rem, 4vw, 2.8rem);
      line-height: 1.05; letter-spacing: -.005em;
      text-transform: uppercase;
      margin-bottom: .8rem;
    }
    .booking-intro h2 .accent { color: var(--orange); }
    .booking-intro p {
      font-size: 1rem; line-height: 1.7;
      color: rgba(240,232,216,.7);
      max-width: 660px; margin: 0 auto;
    }
    .booking-intro p strong { color: var(--light); font-weight: 700; }

    /* ── BOOKING ── */
    .booking-section { max-width: 1100px; margin: 0 auto; padding: 1.5rem 2rem 4rem; }

/* ---- FOOTER ---- */
footer{background:var(--surface);border-top:1px solid var(--rule);padding:2.5rem 2rem 1.8rem;}
.footer-main{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:2rem;padding-bottom:1.8rem;border-bottom:1px solid var(--rule);}
.footer-logo-img{height:56px;width:auto;display:block;}
.footer-info{font-size:.82rem;color:var(--muted);line-height:1.7;}
.footer-info strong{color:var(--tan);display:block;margin-bottom:.15rem;font-size:.9rem;}
.footer-info a{color:var(--tan);text-decoration:none;}
.footer-info a:hover{color:var(--orange);}
.footer-social{display:flex;gap:.4rem;justify-content:flex-end;}
.footer-social .social-link{width:34px;height:34px;border:1px solid var(--rule);border-radius:4px;}
.footer-network{max-width:1100px;margin:1.5rem auto 0;text-align:center;}
.footer-network-label{font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);margin-bottom:.8rem;}
.footer-network-links{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.5rem;margin-bottom:1.4rem;}
.footer-network-links a{font-size:.78rem;color:var(--tan);text-decoration:none;letter-spacing:.02em;transition:color .2s;position:relative;}
.footer-network-links a:hover{color:var(--orange);}
.footer-network-links a:not(:last-child)::after{content:'·';position:absolute;right:-.85rem;color:var(--muted);}
.footer-copyright{max-width:1100px;margin:0 auto;padding-top:1.2rem;border-top:1px solid var(--rule);text-align:center;font-size:.7rem;color:var(--muted);letter-spacing:.06em;}
.footer-copyright a{color:var(--muted);text-decoration:none;}
.footer-copyright a:hover{color:var(--tan);}

/* ---- RESPONSIVE (footer) ---- */
@media(max-width:520px){
  footer{padding:2rem 1.25rem 1.5rem;}
  .footer-main{grid-template-columns:1fr;text-align:center;gap:1.2rem;}
  .footer-info{text-align:center;}
  .footer-social{justify-content:center;}
  .footer-logo-img{margin:0 auto;}
}

    /* ── Extracted utility classes ── */
    .veh-head{font-family:'Russo One',sans-serif;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--light);margin-bottom:.2rem}
    .veh-p{font-size:.78rem;line-height:1.6;color:rgba(240,232,216,.6);margin:0}
    .step-title{font-family:'Russo One',sans-serif;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;color:var(--light);margin-bottom:.25rem}
    .step-p{font-size:.82rem;line-height:1.6;color:rgba(240,232,216,.6)}
    .sec-lbl{font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:var(--orange);margin-bottom:.6rem}
    .sec-lbl-c{text-align:center;margin-bottom:.7rem}
    .seo-h2{font-family:'Russo One',sans-serif;font-size:1.2rem;letter-spacing:.06em;text-transform:uppercase;color:var(--tan);margin-bottom:1rem;line-height:1.3}
    .seo-p{font-size:.9rem;line-height:1.85;color:rgba(240,232,216,.6);margin-bottom:1.2rem}
    .seo-p-last{margin-bottom:0}

    /* ── Extracted from inline styles — FAQ accordion ── */
    .faq-item{border:1px solid rgba(212,176,122,.12);background:rgba(255,255,255,.02);padding:1.2rem 1.5rem;cursor:pointer;}
    .faq-summary{font-family:'Russo One',sans-serif;font-size:1rem;letter-spacing:.04em;text-transform:uppercase;color:var(--light);list-style:none;display:flex;justify-content:space-between;align-items:center;}
    .faq-answer{margin-top:.9rem;font-size:.9rem;line-height:1.75;color:rgba(240,232,216,.65);}
    .faq-icon{color:var(--orange);font-size:1.3rem;flex-shrink:0;margin-left:.75rem;}
    /* Step circles */
    .step-circle{width:36px;height:36px;background:var(--orange-btn);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Russo One',sans-serif;font-size:.9rem;color:#fff;flex-shrink:0;cursor:pointer;}
    .step-row{display:flex;gap:1rem;align-items:flex-start;}
    /* Fleet cards */
    .fleet-card{border-left:2px solid var(--orange);padding-left:.9rem;}
    /* Section wrappers */
    .sec-wrap-1100{max-width:1100px;margin:0 auto;padding:3rem 2rem 0;}
    .sec-wrap-900{max-width:900px;margin:0 auto;padding:3.5rem 2rem 4rem;}
    .sec-wrap-900.sec-why-outside{padding-top:1.5rem;padding-bottom:2rem;}
    .sec-wrap-900.sec-why-outside .sec-border-top{padding-top:1.5rem;}
    .sec-border-top{border-top:1px solid rgba(212,176,122,.12);padding-top:2.5rem;}
    /* How-to section flex columns */
    .how-col-steps{flex:1;min-width:260px;}
    .how-col-map{flex:1;min-width:280px;}
    .how-wrap{max-width:1100px;margin:0 auto;padding:3rem 2rem 0;display:flex;gap:2.5rem;flex-wrap:wrap;align-items:flex-start;}
    /* Fleet list */
    .fleet-list{display:flex;flex-direction:column;gap:.9rem;margin-top:1rem;}
    /* Map facade */
    .map-facade-inner{width:100%;height:100%;background:#1c1509;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;cursor:pointer;}
    /* Inline CTA button (video section) */
    .btn-inline-cta{display:inline-block;margin-top:1.4rem;background:var(--orange-btn);color:#fff;font-family:'Russo One',sans-serif;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;padding:.65rem 1.4rem;text-decoration:none;border-radius:2px;}
    /* Map directions link */
    .map-dir-link{display:flex;align-items:center;gap:.5rem;margin-top:.7rem;font-size:.78rem;color:var(--orange);text-decoration:none;font-weight:700;letter-spacing:.06em;}
    /* SEO text block */
    .seo-block-wrap{border-top:1px solid rgba(212,176,122,.12);padding-top:2.5rem;}
    /* Steps column inner list */
    .steps-list{display:flex;flex-direction:column;gap:1.2rem;}

    /* ── STAR SVG helper ── */
    .star-svg { display: inline-block; }