/* =========================================================
   XXCELL SITE UI
   Shared presentation layer for non-home content pages.
   Does not alter SEO/content/schema.
   ========================================================= */

:root{
  --xx-red:#dc2626;
  --xx-red-dark:#b91c1c;
  --xx-navy:#0f172a;
  --xx-navy-2:#111c2f;
  --xx-text:#0f172a;
  --xx-muted:#64748b;
  --xx-line:#e2e8f0;
  --xx-bg:#f8fafc;
  --xx-white:#ffffff;
}

/* -----------------------------------------
   GENERAL PAGE
----------------------------------------- */

body{
  background:var(--xx-bg);
}

section{
  position:relative;
}

.wrap{
  width:min(1080px, calc(100% - 36px));
}

/* -----------------------------------------
   HEADER / NAV
----------------------------------------- */

body > nav{
  background:#fff;
  border-bottom:1px solid var(--xx-line);
  box-shadow:0 2px 10px rgba(15,23,42,.05);
}

body > nav .logo{
  font-weight:800;
}

body > nav .logo b{
  color:var(--xx-red);
}

.navcall{
  background:var(--xx-red);
  color:#fff !important;
  border-radius:9px;
  padding:10px 14px;
  font-weight:800;
}

/* -----------------------------------------
   PAGE HERO
----------------------------------------- */

.phero{
  background:var(--xx-bg);
  padding-top:28px;
  padding-bottom:34px;
}

.phero-grid{
  background:#fff;
  border:1px solid var(--xx-line);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 7px 22px rgba(15,23,42,.07);
}

.phero-grid > div:first-child{
  padding:34px;
}

.phero .crumb{
  font-size:.78rem;
  color:var(--xx-muted);
  margin-bottom:12px;
}

.phero .crumb a{
  color:var(--xx-red);
  text-decoration:none;
  font-weight:700;
}

.phero .avail{
  display:inline-flex;
  align-items:center;
  margin-bottom:12px;
  padding:7px 10px;
  border:1px solid #bbf7d0;
  border-radius:999px;
  background:#f0fdf4;
  color:#166534;
  font-size:.74rem;
  font-weight:800;
}

.phero h1{
  color:var(--xx-text);
  letter-spacing:-.03em;
}

.phero h1 b{
  color:var(--xx-red);
}

.phero .hero-lead{
  color:var(--xx-muted);
  line-height:1.6;
}

.phero-img{
  overflow:hidden;
  min-height:100%;
}

.phero-img img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.hero-cta{
  gap:10px;
}

.btn{
  border-radius:9px;
  font-weight:800;
}

.btn-red{
  background:var(--xx-red);
  border-color:var(--xx-red);
  color:#fff;
}

.btn-line{
  background:#fff;
  border:2px solid var(--xx-text);
  color:var(--xx-text);
}

/* -----------------------------------------
   CONTENT
----------------------------------------- */

body > section:not(.phero):not(.pbody){
  background:var(--xx-bg);
}

.tcopy{
  background:#fff;
  border:1px solid var(--xx-line);
  border-radius:14px;
  padding:24px;
  color:#475569;
  box-shadow:0 3px 10px rgba(15,23,42,.035);
}

.tcopy p{
  line-height:1.7;
}

.rel-list,
.need-list{
  margin-top:18px;
}

.rel-list a{
  color:var(--xx-red);
  font-weight:700;
}

/* -----------------------------------------
   FAQ CARDS
----------------------------------------- */

.faq-item{
  background:#fff;
  border:1px solid var(--xx-line);
  border-radius:12px;
  padding:18px;
  margin-bottom:10px;
  box-shadow:0 2px 7px rgba(15,23,42,.035);
}

.faq-item h3{
  margin-top:0;
  color:var(--xx-text);
}

.faq-item p{
  color:var(--xx-muted);
  line-height:1.6;
}

/* -----------------------------------------
   CTA
----------------------------------------- */

.cta{
  background:var(--xx-red);
  color:#fff;
  margin:38px auto 0;
}

.cta h2,
.cta p{
  color:#fff;
}

.cta-call{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  color:var(--xx-red) !important;
  border-radius:9px;
  padding:12px 18px;
  font-weight:850;
  text-decoration:none;
}

/* -----------------------------------------
   FOOTER
----------------------------------------- */

footer{
  background:var(--xx-navy);
  color:#94a3b8;
}

footer .flogo{
  color:#fff;
  font-weight:850;
}

footer .flogo b{
  color:var(--xx-red);
}

footer .fcol h3,
footer .fcol h4{
  color:#fff;
}

footer .fcol a,
footer .fbot a{
  color:#cbd5e1;
}

footer .fbot{
  border-color:#273449;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:768px){

  body{
    padding-bottom:76px !important;
    background:var(--xx-bg) !important;
  }

  body > nav{
    min-height:62px !important;
    height:62px !important;
    padding:0 14px 0 16px !important;
  }

  body > nav .logo{
    font-size:1.18rem !important;
  }

  .hbg{
    width:40px !important;
    height:40px !important;
  }

  /* Hero */
  .phero{
    padding:10px 12px 26px !important;
    background:var(--xx-bg) !important;
  }

  .phero > .wrap,
  .phero .phero-grid{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
  }

  .phero-grid{
    display:flex !important;
    flex-direction:column !important;
    border-radius:16px !important;
  }

  .phero-grid > div:first-child{
    order:2 !important;
    padding:17px 16px 18px !important;
  }

  .phero-grid .phero-img{
    order:1 !important;
    width:100% !important;
    height:220px !important;
    min-height:220px !important;
  }

  .phero-grid .phero-img img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }

  .phero .crumb{
    margin:0 0 10px !important;
    font-size:.68rem !important;
  }

  .phero .avail{
    margin:0 0 11px !important;
    font-size:.68rem !important;
  }

  .phero h1{
    margin:0 !important;
    font-size:clamp(1.85rem,8vw,2.35rem) !important;
    line-height:1.05 !important;
  }

  .phero .hero-lead{
    margin:12px 0 15px !important;
    font-size:.94rem !important;
    line-height:1.52 !important;
  }

  .phero .hero-cta{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
    margin:0 !important;
  }

  .phero .hero-cta .btn{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    min-height:50px !important;
    margin:0 !important;
    padding:11px 13px !important;
  }

  /* Normal content */
  section > .wrap,
  .pbody > .wrap{
    width:auto !important;
    margin-left:12px !important;
    margin-right:12px !important;
  }

  section:not(.phero){
    padding-top:34px;
    padding-bottom:34px;
  }

  section:not(.phero) h2{
    font-size:1.72rem;
    line-height:1.12;
    letter-spacing:-.025em;
  }

  .tcopy{
    padding:18px !important;
    border-radius:13px !important;
  }

  .tcopy p{
    font-size:.94rem;
    line-height:1.6;
  }

  .faq-item{
    padding:16px !important;
    border-radius:11px !important;
  }

  /* CTA */
  .cta{
    margin:0 !important;
    padding:34px 18px !important;
    text-align:center !important;
  }

  .cta h2{
    margin-bottom:8px !important;
    font-size:1.75rem !important;
  }

  .cta p{
    margin-bottom:16px !important;
    line-height:1.5 !important;
  }

  .cta-call{
    width:100% !important;
    max-width:360px !important;
    min-height:50px !important;
  }

  /* Footer */
  footer{
    padding:34px 16px 92px !important;
  }

  footer .ftop{
    display:flex !important;
    flex-direction:column !important;
    gap:14px !important;
    margin-bottom:20px !important;
  }

  footer .ftop > div:first-child{
    padding-bottom:14px !important;
    border-bottom:1px solid #273449 !important;
  }

  footer .fcol{
    padding:14px !important;
    background:var(--xx-navy-2) !important;
    border:1px solid #273449 !important;
    border-radius:12px !important;
  }

  footer .fcol ul{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:0 14px !important;
  }

  footer .fcol li{
    margin:0 !important;
  }

  footer .fcol a{
    display:block !important;
    padding:7px 0 !important;
    font-size:.78rem !important;
  }

  footer .fbot{
    display:block !important;
    margin-top:18px !important;
    padding-top:16px !important;
    font-size:.72rem !important;
    line-height:1.5 !important;
  }

  /* Shared bottom action bar */
  .site-mobile-bar{
    display:flex !important;
    align-items:center !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    height:66px !important;
    min-height:66px !important;
    padding:6px 8px calc(6px + env(safe-area-inset-bottom)) !important;
    background:#111827 !important;
    border-radius:14px 14px 0 0 !important;
    z-index:9999 !important;
  }

  .site-mobile-action{
    flex:1 1 0 !important;
    min-width:0 !important;
    height:54px !important;
    margin:0 3px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:3px !important;
    color:#fff !important;
    text-decoration:none !important;
    border-radius:9px !important;
  }

  .site-mobile-primary{
    background:var(--xx-red) !important;
  }

  /* Put Call in center without changing existing HTML yet */
  .site-mobile-action:nth-child(1){order:2}
  .site-mobile-action:nth-child(2){order:1}
  .site-mobile-action:nth-child(3){order:3}

  .site-mobile-action span,
  .site-mobile-action strong{
    color:#fff !important;
  }

  .site-mobile-action span{
    font-size:1rem !important;
  }

  .site-mobile-action strong{
    font-size:.78rem !important;
  }

}

/* =========================================================
   XXCELL SHARED MOBILE GALLERY — HORIZONTAL THUMB STRIP
   ========================================================= */

@media(max-width:768px){

.ev-gallery{
width:100% !important;
margin-top:16px !important;
}

.ev-gallery-main{
position:relative !important;
width:100% !important;
aspect-ratio:16 / 10 !important;
height:auto !important;
overflow:hidden !important;
border-radius:14px !important;
background:#020617 !important;
}

.ev-gallery-main > img{
display:block !important;
width:100% !important;
height:100% !important;
object-fit:cover !important;
}

/* easier-to-tap arrows */
.ev-gallery-prev,
.ev-gallery-next{
width:42px !important;
height:42px !important;
border-radius:50% !important;
background:rgba(15,23,42,.82) !important;
border:1px solid rgba(255,255,255,.24) !important;
color:#fff !important;
}

/* horizontal filmstrip */
.ev-gallery-thumbs{
display:flex !important;
flex-wrap:nowrap !important;
gap:8px !important;
width:100% !important;
margin:10px 0 0 !important;
padding:0 0 4px !important;
overflow-x:auto !important;
overflow-y:hidden !important;
scroll-snap-type:x proximity !important;
-webkit-overflow-scrolling:touch !important;
scrollbar-width:none !important;
}

.ev-gallery-thumbs::-webkit-scrollbar{
display:none !important;
}

.ev-thumb{
display:block !important;
flex:0 0 calc((100% - 24px) / 4) !important;
width:auto !important;
height:auto !important;
aspect-ratio:4 / 3 !important;
margin:0 !important;
padding:2px !important;
overflow:hidden !important;
background:#1e293b !important;
border:2px solid transparent !important;
border-radius:8px !important;
scroll-snap-align:start !important;
box-sizing:border-box !important;
}

.ev-thumb.active{
border-color:#dc2626 !important;
}

.ev-thumb img{
display:block !important;
width:100% !important;
height:100% !important;
object-fit:cover !important;
border-radius:5px !important;
}

}

/* =========================================================
   XXCELL FLATBED PAGE — FINAL CONTENT POLISH
   ========================================================= */

@media(max-width:768px){

.flatbed-page section > .wrap > .tcopy:first-of-type{
display:grid !important;
grid-template-columns:1fr !important;
gap:10px !important;
padding:0 !important;
background:transparent !important;
border:0 !important;
border-radius:0 !important;
box-shadow:none !important;
}

.flatbed-page section > .wrap > .tcopy:first-of-type > p{
margin:0 !important;
padding:18px !important;
background:#ffffff !important;
border:1px solid #e2e8f0 !important;
border-radius:13px !important;
box-shadow:0 3px 10px rgba(15,23,42,.035) !important;
color:#475569 !important;
font-size:.94rem !important;
line-height:1.62 !important;
}

.flatbed-page section > .wrap > h2{
margin-top:34px !important;
margin-bottom:16px !important;
}

}

/* =========================================================
   XXCELL FLATBED PAGE — PHASE 1 HERO
   Existing SEO/content preserved.
   ========================================================= */

.flatbed-page .flatbed-trust-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px;
margin-top:16px;
}

.flatbed-page .flatbed-trust-grid span{
position:relative;
display:flex;
align-items:center;
min-height:44px;
padding:9px 10px 9px 29px;
background:#f8fafc;
border:1px solid #e2e8f0;
border-radius:9px;
color:#334155;
font-size:.78rem;
line-height:1.25;
font-weight:750;
}

.flatbed-page .flatbed-trust-grid span::before{
content:"✓";
position:absolute;
left:10px;
color:#dc2626;
font-weight:900;
}

/* Stronger Flatbed hero presentation */
.flatbed-page .phero-grid{
background:#ffffff;
}

.flatbed-page .phero-img{
position:relative;
background:#0f172a;
}

.flatbed-page .phero-img::after{
content:"Real XXCELL Flatbed Transport";
position:absolute;
left:12px;
bottom:12px;
padding:6px 9px;
background:rgba(15,23,42,.82);
border:1px solid rgba(255,255,255,.18);
border-radius:7px;
color:#fff;
font-size:.70rem;
font-weight:800;
line-height:1;
}

@media(max-width:768px){

.flatbed-page .phero{
padding-top:10px !important;
}

.flatbed-page .phero-grid .phero-img{
height:235px !important;
min-height:235px !important;
}

.flatbed-page .phero-grid > div:first-child{
padding:17px 16px 18px !important;
}

.flatbed-page .phero h1{
font-size:clamp(1.9rem,8.2vw,2.4rem) !important;
}

.flatbed-page .phero .hero-lead{
font-size:.94rem !important;
line-height:1.55 !important;
}

.flatbed-page .flatbed-trust-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:7px;
margin-top:13px;
}

.flatbed-page .flatbed-trust-grid span{
min-height:48px;
padding:8px 7px 8px 26px;
font-size:.70rem;
}

}

/* =========================================================
   XXCELL FLATBED PAGE — PHASE 2 BENEFIT CARDS
   Existing SEO paragraphs remain unchanged.
   ========================================================= */

.flatbed-page .flatbed-benefits-head{
margin-bottom:18px;
}

.flatbed-page .flatbed-benefits-head .eyebrow{
margin:0 0 7px;
color:#dc2626;
font-size:.72rem;
font-weight:900;
letter-spacing:.09em;
text-transform:uppercase;
}

.flatbed-page .flatbed-benefits-head h2{
margin:0 0 8px;
color:#0f172a;
font-size:2rem;
line-height:1.08;
letter-spacing:-.03em;
}

.flatbed-page .flatbed-benefits-head > p:last-child{
margin:0;
color:#64748b;
line-height:1.55;
}

.flatbed-page section > .wrap > .tcopy:first-of-type > p{
position:relative !important;
padding:54px 18px 18px !important;
}

.flatbed-page section > .wrap > .tcopy:first-of-type > p::before{
position:absolute;
left:18px;
top:16px;
display:inline-flex;
align-items:center;
min-height:25px;
padding:4px 9px;
background:#fff1f2;
border:1px solid #ffe4e6;
border-radius:6px;
color:#dc2626;
font-size:.68rem;
line-height:1;
font-weight:900;
letter-spacing:.02em;
}

.flatbed-page section > .wrap > .tcopy:first-of-type > p:nth-child(1)::before{
content:"Flatbed Transport";
}

.flatbed-page section > .wrap > .tcopy:first-of-type > p:nth-child(2)::before{
content:"AWD · 4WD · EV";
}

.flatbed-page section > .wrap > .tcopy:first-of-type > p:nth-child(3)::before{
content:"Soft-Strap Securement";
}

.flatbed-page section > .wrap > .tcopy:first-of-type > p:nth-child(4)::before{
content:"Controlled Loading";
}

.flatbed-page section > .wrap > .tcopy:first-of-type > p:nth-child(5)::before{
content:"All Wheels Off Road";
}

.flatbed-page section > .wrap > .tcopy:first-of-type > p:nth-child(6)::before{
content:"Everyday + Specialty Vehicles";
}

@media(max-width:768px){

.flatbed-page .flatbed-benefits-head{
margin-bottom:14px;
}

.flatbed-page .flatbed-benefits-head h2{
font-size:1.8rem !important;
}

.flatbed-page .flatbed-benefits-head > p:last-child{
font-size:.92rem;
}

.flatbed-page section > .wrap > .tcopy:first-of-type > p{
padding:52px 17px 17px !important;
}

}

/* =========================================================
   XXCELL FLATBED PAGE — LOADING PROCESS TIMELINE
   ========================================================= */

.flatbed-page .flatbed-process{
position:relative;
display:flex;
flex-direction:column;
gap:12px;
margin-top:14px;
padding-left:48px;
}

.flatbed-page .flatbed-process::before{
content:"";
position:absolute;
left:17px;
top:20px;
bottom:20px;
border-left:2px dashed #cbd5e1;
}

.flatbed-page .flatbed-process-step{
position:relative;
display:block;
padding:16px;
background:#ffffff;
border:1px solid #e2e8f0;
border-radius:13px;
box-shadow:0 3px 10px rgba(15,23,42,.035);
}

.flatbed-page .flatbed-process-num{
position:absolute;
left:-48px;
top:16px;
display:flex;
align-items:center;
justify-content:center;
width:34px;
height:34px;
border-radius:50%;
background:#dc2626;
color:#ffffff;
font-size:.86rem;
font-weight:900;
box-shadow:0 0 0 5px #f8fafc;
z-index:2;
}

.flatbed-page .flatbed-process-step h3{
margin:0 0 5px;
color:#0f172a;
font-size:1.05rem;
line-height:1.2;
font-weight:850;
}

.flatbed-page .flatbed-process-step p{
margin:0;
color:#64748b;
font-size:.92rem;
line-height:1.5;
}

@media(max-width:768px){

.flatbed-page .flatbed-process{
gap:10px;
margin-top:12px;
padding-left:44px;
}

.flatbed-page .flatbed-process::before{
left:15px;
top:18px;
bottom:18px;
}

.flatbed-page .flatbed-process-num{
left:-44px;
width:32px;
height:32px;
font-size:.82rem;
}

.flatbed-page .flatbed-process-step{
padding:14px;
}

.flatbed-page .flatbed-process-step h3{
font-size:1rem;
}

.flatbed-page .flatbed-process-step p{
font-size:.88rem;
}

}

/* =========================================================
   XXCELL FLATBED PAGE — FINAL CONTENT SECTIONS
   ========================================================= */

/* Vehicle chips */
.flatbed-page .flatbed-vehicle-chips{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:12px;
}

.flatbed-page .flatbed-vehicle-chips span{
display:inline-flex;
align-items:center;
min-height:34px;
padding:7px 11px;
background:#ffffff;
border:1px solid #e2e8f0;
border-radius:999px;
color:#334155;
font-size:.78rem;
font-weight:750;
box-shadow:0 2px 6px rgba(15,23,42,.025);
}

/* Why Drivers Call XXCELL */
.flatbed-page .flatbed-trust-cards{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
margin-top:12px;
}

.flatbed-page .flatbed-trust-cards > div{
padding:16px;
background:#ffffff;
border:1px solid #e2e8f0;
border-radius:12px;
box-shadow:0 3px 10px rgba(15,23,42,.035);
}

.flatbed-page .flatbed-trust-cards strong{
display:block;
margin-bottom:5px;
color:#0f172a;
font-size:.95rem;
line-height:1.2;
}

.flatbed-page .flatbed-trust-cards span{
display:block;
color:#64748b;
font-size:.84rem;
line-height:1.45;
}

/* Related services become cleaner link cards */
.flatbed-page .rel-list{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:9px;
padding:0;
list-style:none;
}

.flatbed-page .rel-list li{
margin:0;
padding:14px;
background:#ffffff;
border:1px solid #e2e8f0;
border-radius:11px;
color:#64748b;
font-size:.86rem;
line-height:1.45;
}

.flatbed-page .rel-list a{
display:block;
margin-bottom:4px;
color:#dc2626;
font-weight:850;
text-decoration:none;
}

/* FAQ polish */
.flatbed-page .faq-item{
margin-bottom:9px !important;
padding:17px !important;
background:#ffffff !important;
border:1px solid #e2e8f0 !important;
border-radius:12px !important;
box-shadow:0 2px 7px rgba(15,23,42,.03) !important;
}

.flatbed-page .faq-item h3{
margin:0 0 7px !important;
font-size:1rem !important;
line-height:1.25 !important;
color:#0f172a !important;
}

.flatbed-page .faq-item p{
margin:0 !important;
color:#64748b !important;
font-size:.9rem !important;
line-height:1.55 !important;
}

/* Final CTA */
.flatbed-page .cta{
background:#dc2626 !important;
}

.flatbed-page .cta-call{
background:#ffffff !important;
color:#dc2626 !important;
}

/* Mobile */
@media(max-width:768px){

.flatbed-page .flatbed-vehicle-chips{
gap:6px;
}

.flatbed-page .flatbed-vehicle-chips span{
font-size:.72rem;
padding:6px 9px;
}

.flatbed-page .flatbed-trust-cards{
grid-template-columns:1fr;
gap:8px;
}

.flatbed-page .flatbed-trust-cards > div{
padding:14px;
}

.flatbed-page .rel-list{
grid-template-columns:1fr;
gap:8px;
}

.flatbed-page .rel-list li{
padding:13px;
}

}