/* ============================================================================
   PREMIUM TRAILER RENTAL TEMPLATE — STYLES
   An elevated redesign of the same content: glass header, mesh-gradient hero,
   featured-trailer card, animated reveals, CTA band. Same config.js as classic.
============================================================================ */

:root {
  --primary: #1A6FD4;
  --accent:  #E07B2A;
  --bg:      #0c0d10;
  --surface: #15171c;
  --surface-2: #1c1f26;
  --text:    #F5F6F8;
  --muted:   #9aa0ac;
  --border:  rgba(255,255,255,.08);
  --border-2: rgba(255,255,255,.14);
  --radius:  16px;
  --maxw:    1220px;
  --head:    "Barlow Condensed", "Arial Narrow", sans-serif;
  --body:    "Barlow", system-ui, sans-serif;
  --shadow:  0 24px 60px rgba(0,0,0,.45);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  font-family: var(--body); background: var(--bg); color: var(--text);
  line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--head); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  font-size: 15px; padding: 13px 26px; border-radius: 999px; border: 1.5px solid transparent;
  cursor: pointer; transition: transform .18s cubic-bezier(.3,.8,.4,1), box-shadow .18s, background .18s, color .18s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-accent { background: linear-gradient(135deg, var(--accent), #f0913f); color: #1a1208; box-shadow: 0 10px 28px rgba(224,123,42,.4); }
.btn-accent:hover { box-shadow: 0 14px 36px rgba(224,123,42,.55); }
.btn-outline { background: rgba(255,255,255,.03); color: var(--text); border-color: var(--border-2); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
.btn-light { background: #fff; color: #14161b; }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.btn-outline-light:hover { background: rgba(255,255,255,.12); }
.btn-sm { padding: 10px 18px; font-size: 13.5px; }
.btn-lg { padding: 16px 34px; font-size: 17px; }
.btn-block { width: 100%; }

/* ---- Header ---- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100; padding: 14px 0;
  transition: background .3s, box-shadow .3s, padding .3s; background: transparent;
}
/* On photo-hero inner pages AND the dark homepage hero: white nav */
body:has(.page-hero) .site-header:not(.scrolled),
body:has(.hero) .site-header:not(.scrolled) {
  background: rgba(8,9,12,.45);
  backdrop-filter: blur(6px);
}
body:has(.page-hero) .site-header:not(.scrolled) .nav-desktop a,
body:has(.page-hero) .site-header:not(.scrolled) .header-phone,
body:has(.hero) .site-header:not(.scrolled) .nav-desktop a,
body:has(.hero) .site-header:not(.scrolled) .header-phone { color: #d9dce2; }
body:has(.page-hero) .site-header:not(.scrolled) .nav-desktop a:hover,
body:has(.hero) .site-header:not(.scrolled) .nav-desktop a:hover { color: #fff; }
body:has(.page-hero) .site-header:not(.scrolled) .brand img,
/* logo-invert removed: All Star wordmark is solid black, invert would destroy the star */
.site-header.scrolled {
  background: rgba(12,13,16,.8); backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--border); box-shadow: 0 8px 30px rgba(0,0,0,.4); padding: 9px 0;
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.brand { display: flex; align-items: center; gap: 11px; font-family: var(--head); font-weight: 800; font-size: 23px; letter-spacing: .01em; }
.brand .logo-badge {
  display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
  background: linear-gradient(135deg, var(--primary), var(--accent)); color: #fff; font-size: 15px; font-weight: 800;
  box-shadow: 0 6px 18px rgba(26,111,212,.4);
}
.brand img { height: 44px; width: auto; }
.nav-desktop { display: flex; align-items: center; gap: 30px; margin-left: auto; margin-right: 28px; }
.nav-desktop a { font-family: var(--head); font-weight: 600; font-size: 16px; letter-spacing: .03em; color: #d9dce2; transition: color .15s; position: relative; }
.nav-desktop a::after { content: ""; position: absolute; left: 0; bottom: -5px; width: 0; height: 2px; background: var(--accent); transition: width .2s; }
.nav-desktop a:hover { color: #fff; }
.nav-desktop a:hover::after { width: 100%; }
.header-cta { display: flex; align-items: center; gap: 16px; }
.header-phone { font-family: var(--head); font-weight: 700; font-size: 17px; color: var(--text); }
.header-phone:hover { color: var(--accent); }

.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; }
.nav-toggle span { width: 26px; height: 2.5px; background: var(--text); border-radius: 2px; transition: .25s; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
.nav-mobile { display: none; flex-direction: column; gap: 2px; margin: 12px 16px 0; padding: 14px 20px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; }
.nav-mobile.open { display: flex; }
.nav-mobile a { font-family: var(--head); font-weight: 600; font-size: 18px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.nav-mobile .btn { margin-top: 12px; border-bottom: none; }

/* ---- Hero ---- */
.hero { position: relative; padding: 150px 0 0; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55; }
.blob-1 { width: 620px; height: 620px; right: -120px; top: -160px; background: radial-gradient(circle, rgba(26,111,212,.6), transparent 65%); animation: float1 16s ease-in-out infinite; }
.blob-2 { width: 520px; height: 520px; left: -140px; bottom: -120px; background: radial-gradient(circle, rgba(224,123,42,.5), transparent 65%); animation: float2 19s ease-in-out infinite; }
@keyframes float1 { 50% { transform: translate(-40px, 50px) scale(1.08); } }
@keyframes float2 { 50% { transform: translate(40px, -40px) scale(1.1); } }
.hero-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 54px 54px; mask-image: radial-gradient(circle at 60% 30%, #000 20%, transparent 75%);
}
.hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.15fr .85fr; gap: 50px; align-items: center; padding-bottom: 70px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--head); font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase; font-size: 13.5px; color: #ffd9b3;
  background: rgba(224,123,42,.12); border: 1px solid rgba(224,123,42,.35); border-radius: 999px; padding: 8px 16px; margin-bottom: 24px;
}
.hero-title { font-family: var(--head); font-weight: 900; line-height: .92; letter-spacing: -.015em; font-size: clamp(52px, 7.5vw, 104px); text-transform: uppercase; margin-bottom: 22px; }
.hero-title .hi { background: linear-gradient(100deg, var(--accent), #ffb066); -webkit-background-clip: text; background-clip: text; color: transparent; display: block; }
.hero-sub { font-size: clamp(16px, 1.5vw, 20px); color: #c7cbd3; max-width: 540px; margin-bottom: 34px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 30px; }
.hero-trust { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; color: var(--muted); font-size: 14.5px; }
.hero-trust .stars { color: #ffc63b; letter-spacing: 2px; }
.hero-trust strong { color: var(--text); font-family: var(--head); font-size: 17px; }
.hero-trust .dot-sep { width: 5px; height: 5px; border-radius: 50%; background: var(--border-2); }
.hero-trust .live { display: inline-flex; align-items: center; gap: 7px; }
.hero-trust .live .pulse { width: 9px; height: 9px; border-radius: 50%; background: #34d058; animation: pulse 2s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(52,208,88,.55)} 70%{box-shadow:0 0 0 9px rgba(52,208,88,0)} 100%{box-shadow:0 0 0 0 rgba(52,208,88,0)} }

/* Hero featured card */
.hero-feature {
  position: relative; background: rgba(21,23,28,.7); backdrop-filter: blur(14px);
  border: 1px solid var(--border-2); border-radius: 22px; overflow: hidden; box-shadow: var(--shadow);
}
.hero-feature .hf-tag { position: absolute; top: 14px; left: 14px; z-index: 2; background: var(--accent); color: #1a1208; font-family: var(--head); font-weight: 700; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; }
.hero-feature .hf-media { aspect-ratio: 16/11; background: #0e0f12; overflow: hidden; }
.hero-feature .hf-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-feature .hf-body { padding: 20px 22px 22px; }
.hero-feature h3 { font-family: var(--head); font-weight: 700; font-size: 24px; line-height: 1.05; }
.hero-feature .hf-tagline { color: var(--accent); font-size: 13.5px; font-weight: 600; margin: 4px 0 14px; }
.hero-feature .hf-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }
.hero-feature .hf-price .amt { font-family: var(--head); font-weight: 900; font-size: 38px; line-height: .9; }
.hero-feature .hf-price .per { color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .05em; }

/* Hero stats band */
.hero-stats-band { position: relative; z-index: 2; border-top: 1px solid var(--border); background: rgba(255,255,255,.015); }
.hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.hero-stats .stat { padding: 26px 10px; text-align: center; border-right: 1px solid var(--border); }
.hero-stats .stat:last-child { border-right: none; }
.hero-stats .num { font-family: var(--head); font-weight: 900; font-size: clamp(30px, 4vw, 46px); line-height: 1; }
.hero-stats .num.grad { background: linear-gradient(100deg,var(--accent),#ffb066); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-stats .lbl { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .09em; margin-top: 6px; }

/* ---- Marquee ---- */
.marquee { background: linear-gradient(90deg, var(--primary), #2f86e8); color: #fff; overflow: hidden; padding: 13px 0; }
.marquee-track { display: flex; white-space: nowrap; width: max-content; animation: scroll-x 30s linear infinite; }
.marquee-track span { font-family: var(--head); font-weight: 700; font-size: 18px; text-transform: uppercase; letter-spacing: .05em; padding: 0 28px; opacity: .95; }
.marquee-track span::after { content: "✦"; margin-left: 28px; opacity: .5; }
@keyframes scroll-x { to { transform: translateX(-50%); } }

/* ---- Sections ---- */
.section { padding: 100px 0; }
.section-head { display: grid; grid-template-columns: 1fr .8fr; gap: 30px; align-items: end; margin-bottom: 44px; }
.section-eyebrow { font-family: var(--head); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; font-size: 13.5px; color: var(--accent); margin-bottom: 12px; }
.section-eyebrow.center { text-align: center; }
.section-title { font-family: var(--head); font-weight: 800; text-transform: uppercase; line-height: .98; font-size: clamp(34px, 5vw, 60px); letter-spacing: -.015em; }
.section-title.center { text-align: center; }
.section-title .hi { background: linear-gradient(100deg,var(--accent),#ffb066); -webkit-background-clip: text; background-clip: text; color: transparent; }
.section-lead { color: var(--muted); font-size: 17px; max-width: 480px; }
.section-lead.center { text-align: center; max-width: 600px; margin-bottom: 50px; }

/* ---- Fleet ---- */
.filter-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
.filter-tabs button {
  font-family: var(--head); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: 14px;
  background: var(--surface); color: #ccd0d8; border: 1px solid var(--border); border-radius: 999px; padding: 10px 22px; cursor: pointer; transition: .18s;
}
.filter-tabs button:hover { border-color: var(--border-2); color: #fff; }
.filter-tabs button.active { background: linear-gradient(135deg,var(--accent),#f0913f); border-color: transparent; color: #1a1208; }

.fleet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 26px; }
.trailer-card {
  position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; overflow: hidden;
  display: flex; flex-direction: column; transition: transform .25s cubic-bezier(.3,.8,.4,1), border-color .25s, box-shadow .25s;
}
.trailer-card:hover { transform: translateY(-8px); border-color: var(--border-2); box-shadow: var(--shadow); }
.trailer-media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: #0e0f12; }
.trailer-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.trailer-card:hover .trailer-media img { transform: scale(1.07); }
.trailer-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.55)); }
.trailer-price-tag { position: absolute; top: 14px; right: 14px; z-index: 2; background: rgba(12,13,16,.7); backdrop-filter: blur(8px); border: 1px solid var(--border-2); color: #fff; font-family: var(--head); font-weight: 800; font-size: 15px; padding: 6px 13px; border-radius: 999px; }
.trailer-cat-chip { position: absolute; bottom: 14px; left: 14px; z-index: 2; font-family: var(--head); font-weight: 600; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: rgba(26,111,212,.85); padding: 4px 11px; border-radius: 999px; }
.trailer-body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.trailer-body h3 { font-family: var(--head); font-weight: 700; font-size: 23px; line-height: 1.08; }
.trailer-tagline { color: var(--accent); font-size: 13.5px; font-weight: 600; margin: 5px 0 16px; }
.trailer-specs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.trailer-specs .spec { background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; padding: 7px 11px; font-size: 12.5px; }
.trailer-specs .spec b { font-family: var(--head); font-weight: 700; color: #fff; }
.trailer-specs .spec span { color: var(--muted); }
.trailer-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border); }
.trailer-foot .price .amt { font-family: var(--head); font-weight: 900; font-size: 28px; line-height: .9; }
.trailer-foot .price .per { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.trailer-foot .price .week { color: var(--muted); font-size: 12.5px; }

/* ---- Steps ---- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; position: relative; }
.steps::before { content: ""; position: absolute; top: 36px; left: 16%; right: 16%; height: 2px; background: linear-gradient(90deg, var(--primary), var(--accent)); opacity: .4; }
.step { text-align: center; position: relative; z-index: 1; padding: 0 12px; }
.step .num { display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto 22px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); color: #fff; font-family: var(--head); font-weight: 900; font-size: 30px; box-shadow: 0 0 0 8px var(--bg); }
.step h3 { font-family: var(--head); font-weight: 700; font-size: 23px; margin-bottom: 10px; }
.step p { color: var(--muted); max-width: 320px; margin: 0 auto; }

/* ---- Features ---- */
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 22px; }
.feature { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 30px; transition: transform .22s, border-color .22s; }
.feature:hover { transform: translateY(-5px); border-color: var(--border-2); }
.feat-num { font-family: var(--head); font-weight: 900; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; }
/* Feature cards — minimal brand accent bar instead of emoji/box icons (icons killed per playbook) */
.feature .ico{
  width:30px; height:3px; border-radius:2px; padding:0;
  background:linear-gradient(90deg, var(--primary, #333), var(--accent, #333));
  margin-bottom:14px; display:block;
}
.feature h3 { font-family: var(--head); font-weight: 700; font-size: 21px; margin-bottom: 9px; }
.feature p { color: var(--muted); font-size: 15px; }

/* ---- Gallery ---- */
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 16px; }
.gallery-grid a { display: block; border-radius: 16px; overflow: hidden; background: #0e0f12; border: 1px solid var(--border); }
.gallery-grid a:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.gallery-grid a:nth-child(6) { grid-column: span 2; }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.gallery-grid a:hover img { transform: scale(1.07); }

/* ---- Reviews ---- */
.reviews-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 36px; }
.reviews-headline { display: flex; align-items: center; gap: 20px; }
.reviews-headline .rating-num { font-family: var(--head); font-weight: 900; font-size: 64px; line-height: .9; }
.reviews-headline .stars { color: #ffc63b; font-size: 26px; letter-spacing: 3px; }
.reviews-headline .count { color: var(--muted); font-size: 15px; margin-top: 4px; }
.reviews-headline .sub { font-family: var(--head); font-weight: 600; font-size: 18px; }
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 22px; }
.review-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 26px; position: relative; transition: transform .2s, border-color .2s; }
.review-card:hover { transform: translateY(-4px); border-color: var(--border-2); }
.review-card .quote-mark { font-family: Georgia, serif; font-size: 60px; line-height: 0; color: var(--accent); opacity: .3; position: absolute; top: 26px; right: 22px; }
.review-card .r-stars { color: #ffc63b; letter-spacing: 2px; margin-bottom: 12px; }
.review-card p { color: #dadde3; font-size: 15px; margin-bottom: 18px; }
.review-card .r-meta { display: flex; align-items: center; gap: 11px; }
.review-card .r-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg,var(--primary),var(--accent)); display: grid; place-items: center; font-family: var(--head); font-weight: 700; color: #fff; }
.review-card .r-name { font-family: var(--head); font-weight: 700; font-size: 15.5px; }
.review-card .r-date { color: var(--muted); font-size: 12px; }

/* ---- Contact ---- */
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 26px; margin-bottom: 50px; }
.contact-info, .contact-form-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: 22px; padding: 32px; }
.contact-list li { display: flex; gap: 15px; padding: 15px 0; border-bottom: 1px solid var(--border); }
.contact-list li:first-child { padding-top: 0; }
.contact-list .ci-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); font-size: 20px; flex-shrink: 0; }
.contact-list .ci-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.contact-list .ci-value { font-family: var(--head); font-weight: 600; font-size: 17px; }
.contact-map { margin-top: 22px; height: 150px; border-radius: 14px; border: 1px solid var(--border); background:
  radial-gradient(circle at 30% 40%, rgba(26,111,212,.25), transparent 40%),
  radial-gradient(circle at 70% 70%, rgba(224,123,42,.22), transparent 45%),
  repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 28px),
  repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 28px), var(--surface-2);
  position: relative; }
.contact-map::after { content: "📍"; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-60%); font-size: 30px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
.contact-form-wrap h3 { font-family: var(--head); font-weight: 700; font-size: 24px; margin-bottom: 20px; }
.contact-form { display: flex; flex-direction: column; gap: 14px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact-form input, .contact-form select, .contact-form textarea {
  width: 100%; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px;
  color: var(--text); padding: 14px 15px; font-family: var(--body); font-size: 15px;
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: none; border-color: var(--accent); }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #6e7480; }
.form-note { font-size: 14px; color: #6fe08a; text-align: center; }

.policies { background: var(--surface); border: 1px solid var(--border); border-radius: 22px; padding: 32px; }
.policies h3 { font-family: var(--head); font-weight: 700; font-size: 24px; margin-bottom: 22px; }
.policies-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 22px; }
/* Policy cards — minimal brand accent bar instead of emoji/box icons (icons killed per playbook) */
.policy .p-ico{
  width:30px; height:3px; border-radius:2px; padding:0;
  background:linear-gradient(90deg, var(--primary, #333), var(--accent, #C50400));
  margin-bottom:14px;
}
.policy .p-ico::after{ content:none; }
.policy h4 { font-family: var(--head); font-weight: 700; font-size: 16px; margin-bottom: 6px; }
.policy p { color: var(--muted); font-size: 13.5px; }

/* ---- CTA band ---- */
.cta-band { background: linear-gradient(120deg, var(--primary), #1456a8 60%, var(--accent)); position: relative; overflow: hidden; }
.cta-band::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 80% 20%, rgba(255,255,255,.16), transparent 40%); }
.cta-inner { position: relative; text-align: center; padding: 80px 0; }
.cta-inner h2 { font-family: var(--head); font-weight: 900; text-transform: uppercase; font-size: clamp(34px, 5vw, 58px); line-height: 1; margin-bottom: 14px; }
.cta-inner p { font-size: 18px; opacity: .92; margin-bottom: 30px; }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---- Footer ---- */
.site-footer { background: #08090b; border-top: 1px solid var(--border); padding: 70px 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 44px; padding-bottom: 44px; }
.footer-brand p { color: var(--muted); font-size: 14.5px; margin: 18px 0; max-width: 360px; }
.footer-social { display: flex; gap: 12px; }
.footer-social a { width: 42px; height: 42px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); display: grid; place-items: center; font-size: 16px; transition: .18s; }
.footer-social a:hover { background: var(--accent); color: #1a1208; transform: translateY(-3px); }
.footer-col h4 { font-family: var(--head); font-weight: 700; font-size: 18px; margin-bottom: 16px; text-transform: uppercase; letter-spacing: .04em; }
.footer-col ul li { padding: 7px 0; }
.footer-col ul a, .footer-contact li { color: var(--muted); font-size: 14.5px; transition: color .15s; }
.footer-col ul a:hover { color: var(--accent); }
.footer-contact li { padding: 7px 0; }
.footer-bottom { border-top: 1px solid var(--border); padding: 24px 28px; text-align: center; }
.footer-bottom p { color: #6b7080; font-size: 13px; }
.footer-bottom a { color: var(--accent); }

/* ---- Mobile bar ---- */
.mobile-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 90; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(8,9,11,.96); backdrop-filter: blur(8px); border-top: 1px solid var(--border); }

/* ---- Modal ---- */
.modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 24px; }
.modal.open { display: flex; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.72); backdrop-filter: blur(4px); }
.modal-box { position: relative; background: var(--surface); border: 1px solid var(--border-2); border-radius: 22px; padding: 38px; max-width: 470px; text-align: center; box-shadow: var(--shadow); }
.modal-icon { font-size: 44px; margin-bottom: 12px; }
.modal-box h3 { font-family: var(--head); font-weight: 700; font-size: 26px; margin-bottom: 12px; }
.modal-box p { color: var(--muted); margin-bottom: 26px; }
.modal-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---- Reveal ---- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---- Responsive ---- */
@media (max-width: 1040px) {
  .hero-inner { grid-template-columns: 1fr; gap: 36px; }
  .hero-feature { max-width: 440px; }
  .section-head { grid-template-columns: 1fr; gap: 16px; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .nav-desktop, .header-cta { display: none; }
  .nav-toggle { display: flex; margin-left: auto; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
  .gallery-grid a:nth-child(1), .gallery-grid a:nth-child(6) { grid-column: span 1; grid-row: span 1; }
}
@media (max-width: 760px) {
  .hero { padding-top: 120px; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .hero-stats .stat:nth-child(2) { border-right: none; }
  .hero-stats .stat:nth-child(1), .hero-stats .stat:nth-child(2) { border-bottom: 1px solid var(--border); }
  .section { padding: 70px 0; }
  .steps { grid-template-columns: 1fr; gap: 34px; }
  .steps::before { display: none; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .mobile-bar { display: flex; }
  body { padding-bottom: 76px; }
}
@media (max-width: 430px) { .form-row { grid-template-columns: 1fr; } }

/* ============================================================================
   DETAIL PAGE (trailer.html) — PREMIUM
============================================================================ */
.detail-page { background: var(--bg); }
.detail-header { position: sticky; top: 0; z-index: 100; background: rgba(12,13,16,.8); backdrop-filter: blur(16px) saturate(140%); border-bottom: 1px solid var(--border); transition: box-shadow .3s; }
.detail-header.scrolled { box-shadow: 0 8px 30px rgba(0,0,0,.4); }
.detail-header-inner { display: flex; align-items: center; justify-content: space-between; height: 70px; gap: 16px; }
.detail-header-actions { display: flex; align-items: center; gap: 20px; }
.detail-back { font-family: var(--head); font-weight: 600; font-size: 15px; color: var(--muted); transition: color .15s; }
.detail-back:hover { color: var(--accent); }

/* Hero */
.detail-hero { position: relative; }
.detail-hero-media { position: relative; height: clamp(260px, 40vw, 460px); overflow: hidden; background: #0e0f12; }
.detail-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.detail-hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,13,16,.1) 18%, rgba(12,13,16,.6) 60%, rgba(12,13,16,.97)); }
.detail-hero-inner { position: relative; margin-top: -120px; z-index: 2; padding-bottom: 8px; }
.breadcrumb { font-size: 13.5px; color: #c7cbd3; margin-bottom: 16px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb .current { color: #fff; }
.breadcrumb span { opacity: .5; }
.detail-eyebrow { font-family: var(--head); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: 13px; color: #ffd9b3; margin-bottom: 12px; }
.detail-title { font-family: var(--head); font-weight: 900; text-transform: uppercase; line-height: .96; font-size: clamp(34px, 5.5vw, 60px); margin-bottom: 16px; letter-spacing: -.015em; }
.detail-desc { color: #c7cbd3; font-size: 18px; max-width: 660px; margin-bottom: 26px; }
.detail-price-row { display: flex; gap: 14px; margin-bottom: 26px; }
.detail-price-row .dp { background: rgba(21,23,28,.7); backdrop-filter: blur(8px); border: 1px solid var(--border-2); border-radius: 14px; padding: 14px 22px; }
.detail-price-row .dp .amt { font-family: var(--head); font-weight: 900; font-size: 36px; line-height: 1; }
.detail-price-row .dp.week .amt { background: linear-gradient(100deg,var(--accent),#ffb066); -webkit-background-clip: text; background-clip: text; color: transparent; }
.detail-price-row .dp .per { display: block; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }
.detail-cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* Body grid */
.detail-main { display: grid; grid-template-columns: 1fr 360px; gap: 46px; padding: 60px 28px 80px; align-items: start; }
.detail-block { margin-bottom: 50px; }
.detail-block:last-child { margin-bottom: 0; }
.detail-h2 { font-family: var(--head); font-weight: 800; text-transform: uppercase; font-size: 30px; margin-bottom: 22px; letter-spacing: -.01em; }
.detail-h2::after { content: ""; display: block; width: 60px; height: 3px; margin-top: 10px; border-radius: 3px; background: linear-gradient(90deg, var(--accent), #ffb066); }

/* Spec table */
.spec-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.spec-table tr { border-bottom: 1px solid var(--border); }
.spec-table tr:last-child { border-bottom: none; }
.spec-table th { text-align: left; padding: 15px 20px; color: var(--muted); font-weight: 500; font-size: 14.5px; width: 48%; }
.spec-table td { text-align: right; padding: 15px 20px; font-family: var(--head); font-weight: 700; font-size: 16px; }
.spec-table tr:nth-child(even) { background: rgba(255,255,255,.018); }

/* Features */
.feature-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 24px; }
.feature-list li { display: flex; gap: 12px; align-items: flex-start; color: #dadde3; font-size: 15.5px; }
.fl-check { display: inline-grid; place-items: center; width: 24px; height: 24px; flex-shrink: 0; border-radius: 8px; background: linear-gradient(135deg, rgba(26,111,212,.3), rgba(224,123,42,.3)); color: #fff; font-size: 12px; font-weight: 700; margin-top: 1px; }

/* Use cases */
.usecase-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.usecase { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 24px; transition: transform .2s, border-color .2s; }
.usecase:hover { transform: translateY(-4px); border-color: var(--border-2); }
.usecase h3 { font-family: var(--head); font-weight: 700; font-size: 20px; margin-bottom: 9px; }
.usecase p { color: var(--muted); font-size: 14.5px; }

/* FAQ */
.faq-list { display: flex; flex-direction: column; gap: 14px; }
.faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; transition: border-color .2s; }
.faq-item[open] { border-color: var(--border-2); }
.faq-item summary { list-style: none; cursor: pointer; padding: 20px 22px; font-family: var(--head); font-weight: 700; font-size: 18px; display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-mark { color: var(--accent); font-size: 26px; line-height: 1; transition: transform .25s; flex-shrink: 0; }
.faq-item[open] .faq-mark { transform: rotate(45deg); }
.faq-answer { padding: 0 22px 22px; color: var(--muted); font-size: 15px; }

/* Booking box (sticky aside) */
.detail-aside { position: sticky; top: 92px; }
.book-box { background: rgba(21,23,28,.85); backdrop-filter: blur(10px); border: 1px solid var(--border-2); border-radius: 22px; padding: 28px; box-shadow: var(--shadow); }
.book-box h3 { font-family: var(--head); font-weight: 800; text-transform: uppercase; font-size: 23px; margin-bottom: 20px; }
.bb-rates { display: flex; gap: 14px; margin-bottom: 20px; }
.bb-rate { flex: 1; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 13px 15px; }
.bb-rate span { display: block; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.bb-rate strong { font-family: var(--head); font-weight: 900; font-size: 27px; }
.book-box .btn { margin-bottom: 11px; }
.bb-checklist { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.bb-checklist li { font-size: 13.5px; color: #c7cbd3; }

/* Related */
.related { padding: 80px 0; border-top: 1px solid var(--border); background: #0a0b0e; }
.related .section-title { margin-bottom: 32px; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.related-card { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; transition: transform .25s, border-color .25s, box-shadow .25s; display: block; }
.related-card:hover { transform: translateY(-7px); border-color: var(--border-2); box-shadow: var(--shadow); }
.related-media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: #0e0f12; }
.related-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.related-card:hover .related-media img { transform: scale(1.07); }
.related-price { position: absolute; top: 14px; right: 14px; background: rgba(12,13,16,.7); backdrop-filter: blur(8px); border: 1px solid var(--border-2); color: #fff; font-family: var(--head); font-weight: 800; font-size: 14px; padding: 5px 12px; border-radius: 999px; }
.related-body { padding: 20px; }
.related-body h3 { font-family: var(--head); font-weight: 700; font-size: 20px; line-height: 1.1; margin-bottom: 6px; }
.related-body p { color: var(--accent); font-size: 13px; font-weight: 600; }

/* Detail footer */
.detail-footer { background: #08090b; border-top: 1px solid var(--border); padding: 32px 0; text-align: center; }
.detail-footer p { color: var(--muted); font-size: 13.5px; }
.detail-footer a { color: var(--accent); }
.detail-footer-built { color: #5a606c !important; font-size: 12px !important; margin-top: 6px; }

@media (max-width: 900px) {
  .detail-main { grid-template-columns: 1fr; gap: 0; }
  .detail-aside { position: static; margin-top: 32px; }
  .feature-list, .usecase-grid { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .detail-hero-inner { margin-top: -80px; }
  .detail-header-actions .detail-back { display: none; }
  .detail-main { padding-bottom: 96px; }
}

.trailer-body h3 a { color: inherit; transition: color .15s; }
.trailer-body h3 a:hover { color: var(--accent); }

/* ============================================================================
   LIGHT THEME OVERRIDES — premium-light
============================================================================ */
:root{
  --bg:#FAFAF7; --surface:#FFFFFF; --surface-2:#F2F1EC;
  --text:#15171C; --muted:#5b6470; --border:rgba(0,0,0,.09); --border-2:rgba(0,0,0,.15);
  --shadow:0 22px 50px rgba(20,30,50,.12);
}
body{ background:var(--bg); color:var(--text); }

/* Header (transparent over light hero) */
.site-header.scrolled{ background:rgba(255,255,255,.82); border-bottom:1px solid var(--border); box-shadow:0 8px 30px rgba(0,0,0,.08); }
.nav-desktop a{ color:#2c2c2c; }
.nav-desktop a:hover{ color:#000; }
.header-phone{ color:var(--text); }
.nav-toggle span{ background:#15171c; }
.nav-mobile{ background:#fff; border-color:var(--border); }
.btn-outline{ background:rgba(0,0,0,.02); color:var(--text); border-color:var(--border-2); }

/* Hero */
.blob-1{ background:radial-gradient(circle, rgba(26,111,212,.26), transparent 65%); opacity:.55; }
.blob-2{ background:radial-gradient(circle, rgba(224,123,42,.24), transparent 65%); opacity:.55; }
.hero-grid{ background-image:linear-gradient(rgba(0,0,0,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.045) 1px,transparent 1px); }
.eyebrow{ color:#b85d10; background:rgba(224,123,42,.12); border-color:rgba(224,123,42,.35); }
.hero-sub{ color:#3f4650; }
.hero-trust{ color:var(--muted); }
.hero-feature{ background:rgba(255,255,255,.75); border-color:var(--border-2); box-shadow:var(--shadow); }
.hero-feature .hf-media{ background:#ECEAE3; }
.hero-stats-band{ background:rgba(0,0,0,.015); border-top:1px solid var(--border); }
.hero-stats .stat{ border-right:1px solid var(--border); }

/* Cards */
.trailer-media{ background:#ECEAE3; }
.trailer-media::after{ background:linear-gradient(180deg, transparent 58%, rgba(0,0,0,.16)); }
.trailer-price-tag{ background:rgba(255,255,255,.85); border:1px solid var(--border-2); color:#15171c; }
.review-card p{ color:#33373e; }

/* Forms */
.contact-form input, .contact-form select, .contact-form textarea{ background:#F4F3EE; }
.contact-form input::placeholder, .contact-form textarea::placeholder{ color:#9aa0aa; }

/* Footer / bars */
.site-footer{ background:#F2F1EC; border-top:1px solid var(--border); }
.footer-social a{ background:#fff; border-color:var(--border); }
.footer-bottom p{ color:#8a8f98; }
.mobile-bar{ background:rgba(255,255,255,.96); border-top:1px solid var(--border); }
.modal-box{ background:#fff; }

/* Detail page */
.detail-header{ background:rgba(255,255,255,.82); border-bottom:1px solid var(--border); }
.detail-back{ color:var(--muted); }
.detail-hero-media{ background:#ECEAE3; }
.detail-hero-media::after{ background:linear-gradient(180deg, rgba(250,250,247,0) 28%, rgba(250,250,247,.72) 74%, rgba(250,250,247,.97)); }
.breadcrumb{ color:#5b6470; }
.breadcrumb .current{ color:#15171c; }
.detail-eyebrow{ color:#b85d10; }
.detail-desc{ color:#3f4650; }
.detail-price-row .dp{ background:rgba(255,255,255,.82); border-color:var(--border-2); }
.spec-table tr:nth-child(even){ background:rgba(0,0,0,.02); }
.fl-check{ background:linear-gradient(135deg, rgba(26,111,212,.18), rgba(224,123,42,.18)); color:#15171c; }
.book-box{ background:rgba(255,255,255,.9); border-color:var(--border-2); box-shadow:var(--shadow); }
.related{ background:#F2F1EC; border-top:1px solid var(--border); }
.related-price{ background:rgba(255,255,255,.85); border:1px solid var(--border-2); color:#15171c; }
.detail-footer{ background:#F2F1EC; }

/* ============================================================================
   ALL STAR TRAILER RENTALS — BRAND LAYER (All-Star red #C50400 + navy #004A80, Montserrat)
   Loaded last so it wins over the premium-light base.
============================================================================ */
:root{
  --head:"Montserrat", system-ui, sans-serif;
  --body:"Inter", system-ui, sans-serif;
  --bg:#F6F5F2; --surface:#FFFFFF; --surface-2:#F1F0EC;
  --border:rgba(0,0,0,.09); --border-2:rgba(0,0,0,.14);
}

/* Montserrat is wider than Barlow Condensed — tighten the display scale */
.hero-title{ font-size:clamp(38px,5.4vw,68px); line-height:1.02; letter-spacing:-.02em; }
.section-title{ font-size:clamp(28px,3.8vw,46px); letter-spacing:-.02em; line-height:1.04; }
.detail-title{ font-size:clamp(28px,4vw,48px); letter-spacing:-.02em; }
.cta-inner h2{ font-size:clamp(30px,4.2vw,50px); letter-spacing:-.02em; }
.detail-h2{ font-size:clamp(24px,3vw,30px); letter-spacing:-.01em; }
.brand{ letter-spacing:-.01em; }

/* Red accents (CTAs, highlight gradients) */
.btn-accent{ background:linear-gradient(135deg,#C50400,#ff5a5a); color:#fff; box-shadow:0 10px 28px rgba(197,4,0,.38); }
.btn-accent:hover{ box-shadow:0 14px 36px rgba(197,4,0,.52); }
.hero-title .hi, .section-title .hi, .hero-stats .num.grad, .detail-price-row .dp.week .amt{
  background:linear-gradient(100deg,#C50400,#ff6a6a); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.detail-h2::after{ background:linear-gradient(90deg,#C50400,#ff8a6a); }
.eyebrow{ color:#9c0300; background:rgba(197,4,0,.10); border-color:rgba(197,4,0,.30); }
.detail-eyebrow{ color:#c0271f; }
.hero-feature .hf-tag{ background:#C50400; color:#fff; }
.fl-check{ background:linear-gradient(135deg,rgba(197,4,0,.20),rgba(43,43,43,.14)); color:#1a1a1a; }
.step .num{ border-color:#C50400; }

/* Charcoal structure (marquee, category chip, blobs, CTA band) */
.marquee{ background:#262626; }
.marquee-track span{ color:#fff; }
.marquee-track span::after{ color:#C50400; opacity:.9; }
.trailer-cat-chip{ background:rgba(38,38,38,.86); }
.blob-1{ background:radial-gradient(circle, rgba(38,38,38,.16), transparent 65%); opacity:.5; }
.blob-2{ background:radial-gradient(circle, rgba(197,4,0,.20), transparent 65%); opacity:.55; }
.cta-band{ background:linear-gradient(120deg,#262626,#7a241f 52%,#C50400); }
.contact-map{ background:
  radial-gradient(circle at 30% 40%, rgba(197,4,0,.20), transparent 42%),
  radial-gradient(circle at 70% 70%, rgba(38,38,38,.18), transparent 46%),
  repeating-linear-gradient(0deg, rgba(0,0,0,.05) 0 1px, transparent 1px 28px),
  repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 1px, transparent 1px 28px), #ECEAE3; }

/* Logo wordmark sizing in header/footer */
.brand img{ height:38px; }

/* Light-mode text-contrast fixes (values were hardcoded white for dark theme) */
.trailer-specs .spec b{ color:var(--text); }
.step .num{ color:var(--text); }
.cta-band .cta-inner h2, .cta-band .cta-inner p{ color:#fff; }

/* Home-page FAQ + "What Can You Haul?" (relocated from the removed detail pages) */
#faq .faq-list{ max-width: 860px; }
#faq .faq-item summary{ font-size: 17px; }

/* ============================================================================
   STANDALONE PAGES (faq.html, etc.) — page hero + helpers
============================================================================ */
.page-hero{
  position:relative; overflow:hidden; padding:160px 0 72px;
  border-bottom:1px solid rgba(0,0,0,.15);
  background-image:url('/a/AllStarTrailerRentals/2d64bf1f34032d235d6f.jpg');
  background-size:cover; background-position:center 55%;
}
.page-hero::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(160deg, rgba(15,16,20,.82) 0%, rgba(35,20,20,.70) 100%);
}
/* dark cap at the top so the fixed transparent nav always reads clearly */
.page-hero::after{
  content:''; position:absolute; top:0; left:0; right:0; height:130px; z-index:2; pointer-events:none;
  background:linear-gradient(to bottom, rgba(8,9,12,.88) 0%, transparent 100%);
}
/* suppress blob decorations — photo carries the visual weight */
.page-hero .hero-bg{ display:none; }
.page-hero-inner{ position:relative; z-index:2; max-width:760px; }
/* all text inside page-hero goes white */
.page-hero .breadcrumb,
.page-hero .breadcrumb a,
.page-hero .breadcrumb span{ color:rgba(255,255,255,.65); }
.page-hero .breadcrumb .current{ color:rgba(255,255,255,.9); }
.page-hero .eyebrow{ background:rgba(197,4,0,.20); color:#ff8080; border-color:rgba(197,4,0,.42); }
.page-hero .page-title{ color:#fff; }
.page-hero .page-sub{ color:rgba(255,255,255,.72); }
.page-title{ font-family:var(--head); font-weight:900; text-transform:uppercase; line-height:1.0; letter-spacing:-.02em; font-size:clamp(34px,5.2vw,58px); margin:14px 0 0; }
.page-title .hi{ background:linear-gradient(100deg,#ff5555,#ff8a8a); -webkit-background-clip:text; background-clip:text; color:transparent; }
.page-sub{ color:var(--muted); font-size:18px; max-width:600px; margin-top:16px; }

.faq-page{ padding-top:60px; }
.faq-page .faq-list{ max-width:860px; margin:0 auto; }
.faq-page .faq-item summary{ font-size:18px; }

.faq-help{ max-width:860px; margin:44px auto 0; text-align:center; background:var(--surface); border:1px solid var(--border); border-radius:22px; padding:38px 32px; }
.faq-help h3{ font-family:var(--head); font-weight:800; text-transform:uppercase; font-size:26px; }
.faq-help p{ color:var(--muted); margin:8px 0 22px; }
.faq-help-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* active nav item */
.nav-desktop a.active{ color:#000; }
.nav-desktop a.active::after{ width:100%; }

/* ---- Service Areas page ---- */
.areas-page{ padding-top:60px; }
.area-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; }
.area-card{ background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:24px; transition:transform .2s,border-color .2s; }
.area-card:hover{ transform:translateY(-4px); border-color:var(--border-2); }
.area-pin{ font-size:22px; margin-bottom:8px; }
.area-card h3{ font-family:var(--head); font-weight:700; font-size:21px; margin-bottom:8px; }
.area-card p{ color:var(--muted); font-size:14.5px; }
.areas-note{ margin-top:36px; text-align:center; background:var(--surface); border:1px solid var(--border); border-radius:22px; padding:38px 32px; }
.areas-note h3{ font-family:var(--head); font-weight:800; text-transform:uppercase; font-size:24px; }
.areas-note p{ color:var(--muted); max-width:620px; margin:8px auto 22px; }
.areas-note a{ color:var(--accent); }
.areas-note .btn{ color:#fff; }

/* ---- About page ---- */
.about-story{ display:grid; grid-template-columns:1.05fr .95fr; gap:46px; align-items:center; margin-bottom:60px; }
.about-copy p{ color:#3f4650; margin-bottom:14px; }
.about-copy .section-title{ margin-bottom:18px; }
.about-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:24px; }
.about-media img{ width:100%; border-radius:22px; border:1px solid var(--border); box-shadow:var(--shadow); }
.about-values{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; }

/* ---- Contact page map ---- */
.contact-map-embed{ width:100%; height:240px; border:1px solid var(--border); border-radius:14px; margin-top:18px; display:block; }
.contact-info > .btn{ margin-top:8px; }

@media (max-width:900px){ .about-story{ grid-template-columns:1fr; gap:28px; } }

/* ---- Area cards as links ---- */
.area-card{ display:block; color:inherit; }
.area-link{ display:inline-block; margin-top:12px; color:var(--accent); font-family:var(--head); font-weight:600; font-size:13.5px; }

/* ---- Location pages: compact fleet ---- */
.loc-intro p{ color:#3f4650; font-size:17px; max-width:780px; margin-bottom:14px; }
.area-fleet-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:18px; }
.mini-trailer{ display:block; background:var(--surface); border:1px solid var(--border); border-radius:16px; overflow:hidden; color:inherit; transition:transform .2s,border-color .2s,box-shadow .2s; }
.mini-trailer:hover{ transform:translateY(-4px); border-color:var(--border-2); box-shadow:var(--shadow); }
.mini-media{ position:relative; aspect-ratio:16/10; overflow:hidden; background:#ECEAE3; }
.mini-media img{ width:100%; height:100%; object-fit:cover; }
.mini-price{ position:absolute; top:10px; right:10px; background:rgba(255,255,255,.9); border:1px solid var(--border-2); color:#15171c; font-family:var(--head); font-weight:800; font-size:13px; padding:3px 10px; border-radius:999px; }
.mini-body{ padding:14px 16px 16px; }
.mini-body h3{ font-family:var(--head); font-weight:700; font-size:17px; line-height:1.1; }
.mini-tag{ color:var(--accent); font-size:12.5px; font-weight:600; }

/* ---- Nearby areas chips ---- */
.nearby-areas{ display:flex; flex-wrap:wrap; gap:10px; }
.nearby-areas a{ background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:8px 16px; font-family:var(--head); font-weight:600; font-size:14px; color:var(--text); transition:.15s; }
.nearby-areas a:hover{ border-color:var(--accent); color:var(--accent); }

/* ---- 4-column footer (adds Service Areas) ---- */
.footer-grid{ grid-template-columns:1.5fr 1fr 1fr 1.1fr; }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }

/* ---- Homepage hero photo panel ---- */
.hero-photo-panel{ position:relative; }
.hero-photo{ width:100%; border-radius:18px; object-fit:cover; aspect-ratio:4/3; display:block; box-shadow:0 24px 60px rgba(0,0,0,.35); }
/* hide the glass trailer card — photo is the hero visual */
.hero-photo-panel .hero-feature{ display:none; }

/* ============================================================================
   CINEMATIC HERO — full-bleed photo background, gradient overlay left→right
============================================================================ */
/* photo fills the entire hero */
.hero{
  background: url('/a/AllStarTrailerRentals/2d64bf1f34032d235d6f.jpg') center 45% / cover no-repeat #0d1a2e;
}
/* dark gradient: opaque left (text readable) → transparent right (photo shows) */
.hero .hero-bg{
  background: linear-gradient(
    100deg,
    rgba(8,16,30,.94) 0%,
    rgba(8,16,30,.90) 34%,
    rgba(8,16,30,.62) 56%,
    rgba(8,16,30,.18) 78%,
    rgba(8,16,30,.00) 100%
  );
}
/* hide blobs + grid — the photo handles the visual */
.hero .blob, .hero .hero-grid{ display:none; }
/* hide the right-column photo panel — photo is now the background */
.hero-photo-panel{ display:none; }
/* Single column, but the CONTAINER keeps its normal width. Capping .hero-inner
   itself was the bug: it is also .container (margin:0 auto), so a 660px cap
   CENTRED the text in the viewport and dropped it onto the transparent middle
   of the scrim, right on top of the trailer. Constrain the CHILDREN instead so
   the copy stays left, over the opaque part of the gradient. */
.hero .hero-inner{ grid-template-columns:1fr; max-width:var(--maxw); }
.hero .hero-inner > *{ max-width:640px; }
.hero .hero-sub{ max-width:600px; }
@media (min-width:1600px){ .hero .hero-inner > *{ max-width:700px; } }
@media (max-width:900px){
  .hero .hero-inner > *, .hero .hero-sub{ max-width:100%; }
  .hero .hero-bg{ background:linear-gradient(180deg,rgba(8,16,30,.88),rgba(8,16,30,.80)); }
}
/* text colours */
.hero .eyebrow{ color:#ff9d99; background:rgba(197,4,0,.20); border-color:rgba(197,4,0,.42); }
.hero #heroTitle{ color:#fff; }
.hero .hero-sub{ color:rgba(255,255,255,.72); }
.hero .hero-trust{ color:rgba(255,255,255,.58); }
.hero .hero-trust strong{ color:#fff; }
/* outline button on dark */
.hero .btn-outline{ color:#fff; border-color:rgba(255,255,255,.32); background:rgba(255,255,255,.07); }
.hero .btn-outline:hover{ background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.55); }
/* stats band */
.hero .hero-stats-band{ background:rgba(6,12,24,.65) !important; border-top:1px solid rgba(255,255,255,.10) !important; }
.hero .stat{ border-right-color:rgba(255,255,255,.10) !important; }
.hero .stat .num{ color:#fff; }
.hero .stat .lbl{ color:rgba(255,255,255,.50); }