/* ============================================================================
   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,
body:has(.hero) .site-header:not(.scrolled) .brand img { filter: brightness(0) invert(1); }
.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: #CFCBC6; animation: pulse 2s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(255,255,255,.55)} 70%{box-shadow:0 0 0 9px rgba(255,255,255,0)} 100%{box-shadow:0 0 0 0 rgba(255,255,255,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, #E93D3D));
  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; }

/* ============================================================================
   THE TRAILER RENTAL GUYS — BRAND LAYER
   Rockwall, TX · brick-red #8C4843 (accent) + slate navy #273E47 (structure) · Montserrat + Inter.
   Loaded last so it wins over the premium-light base. --primary/--accent are set
   STATICALLY here (not just at runtime) because Henry strips the theme JS on ingest.
============================================================================ */
:root{
  --head:"Montserrat", system-ui, sans-serif;
  --body:"Inter", system-ui, sans-serif;
  --primary:#273E47; --accent:#8C4843;
  --bg:#F4F3F1; --surface:#FFFFFF; --surface-2:#EEECEA;
  --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; }

/* Brick-red accents (CTAs, highlight gradients) */
.btn-accent{ background:linear-gradient(135deg,#8C4843,#A85A54); color:#fff; box-shadow:0 10px 28px rgba(140,72,67,.34); }
.btn-accent:hover{ box-shadow:0 14px 36px rgba(140,72,67,.50); }
.section-title .hi, .hero-stats .num.grad, .detail-price-row .dp.week .amt{
  background:linear-gradient(100deg,#8C4843,#A85A54); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.detail-h2::after{ background:linear-gradient(90deg,#8C4843,#273E47); }
.eyebrow{ color:#8C4843; background:rgba(140,72,67,.10); border-color:rgba(140,72,67,.30); }
.detail-eyebrow{ color:#8C4843; }
.hero-feature .hf-tag{ background:#8C4843; color:#fff; }
.hero-feature .hf-tagline, .trailer-tagline, .mini-tag, .area-link{ color:#8C4843; }
.filter-tabs button.active{ background:linear-gradient(135deg,#8C4843,#A85A54); border-color:transparent; color:#fff; }
.fl-check{ background:linear-gradient(135deg,rgba(140,72,67,.18),rgba(39,62,71,.14)); color:#1C1B1B; }
.step .num{ border-color:#8C4843; }
.review-card .quote-mark, .faq-mark{ color:#8C4843; }

/* Slate-navy structure (marquee, category chip, blobs, CTA band) */
.marquee{ background:#273E47; }
.marquee-track span{ color:#fff; }
.marquee-track span::after{ color:#C9D4D9; opacity:.95; }
.trailer-cat-chip{ background:rgba(39,62,71,.88); }
.blob-1{ background:radial-gradient(circle, rgba(39,62,71,.16), transparent 65%); opacity:.5; }
.blob-2{ background:radial-gradient(circle, rgba(140,72,67,.20), transparent 65%); opacity:.55; }
.cta-band{ background:linear-gradient(120deg,#273E47,#33505C 52%,#8C4843); }
.contact-map{ background:
  radial-gradient(circle at 30% 40%, rgba(39,62,71,.20), transparent 42%),
  radial-gradient(circle at 70% 70%, rgba(140,72,67,.16), 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), #ECEBEA; }

/* ============================================================================
   LOGO + WHITE HEADER (The Trailer Rental Guys).
   The logo is a WIDE wordmark: black car-hauler line-art + brick-red "THE TRAILER
   RENTAL GUYS" + a "Rockwall, TX" sub-line (recolored to slate navy so it reads on
   white). It reads on WHITE, not on a dark hero, so the base "brightness(0) invert(1)"
   trick is DISABLED and the header is a solid WHITE bar (navy nav, red CTA, hairline
   shadow) in ALL states. On Henry the header never gets .scrolled (its JS is stripped),
   so every state is targeted with !important to beat the base dark-glass rules. The
   253x88 source is sized for a wide wordmark (taller than a square badge would be).
============================================================================ */
/* White bar, all states */
.site-header,
body:has(.hero) .site-header:not(.scrolled),
body:has(.page-hero) .site-header:not(.scrolled),
.site-header.scrolled{
  background:#ffffff !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  border-bottom:1px solid rgba(28,27,27,.12) !important;
  box-shadow:0 2px 16px rgba(28,27,27,.10) !important;
}
/* nav + phone: charcoal on the white bar */
.site-header .nav-desktop a,
body:has(.hero) .site-header:not(.scrolled) .nav-desktop a,
body:has(.page-hero) .site-header:not(.scrolled) .nav-desktop a{ color:var(--primary) !important; }
.site-header .nav-desktop a:hover,
body:has(.hero) .site-header:not(.scrolled) .nav-desktop a:hover{ color:#000 !important; }
.site-header .header-phone,
body:has(.hero) .site-header:not(.scrolled) .header-phone,
body:has(.page-hero) .site-header:not(.scrolled) .header-phone{ color:var(--primary) !important; }
.site-header .header-phone:hover{ color:#000 !important; }
/* logo shows full (dark) colour on white — NEVER inverted, in any state */
.site-header .brand img,
body:has(.hero) .site-header:not(.scrolled) .brand img,
body:has(.page-hero) .site-header:not(.scrolled) .brand img,
.site-header.scrolled .brand img{ filter:none !important; }
/* wide-wordmark sizing (253x88 source) */
.brand img{ height:54px !important; width:auto; }
.site-header.scrolled .brand img{ height:48px !important; }
@media (max-width:768px){ .brand img{ height:46px !important; } }
@media (max-width:560px){ .brand img{ height:40px !important; } }
/* hamburger bars charcoal on the white bar (higher specificity beats the code-slot
   mobile-fix rule that forces white bars for dark headers) */
.site-header .header-inner .nav-toggle span,
.site-header.scrolled .nav-toggle span{ background:var(--primary) !important; }
/* mobile dropdown = clean white card with charcoal links */
.nav-mobile{ background:#fff !important; border-color:rgba(28,27,27,.12) !important; }
.nav-mobile a{ color:var(--primary) !important; }

/* Footer logo sits on the DARK footer (#08090b) — frame it on a clean white
   rounded chip so the dark badge reads (never inverted). */
.footer-brand img{
  height:58px !important; width:auto; filter:none !important;
  background:#fff; padding:10px 14px; border-radius:14px;
}

/* Even card grids — explicit columns that DIVIDE the card counts, no orphan row
   (Amanda standing rule 2026-08-05). Features = 6 → 3×2; Policies = 4 → 2×2;
   Gallery = 6 real photos → 3×2. */
.features-grid{ grid-template-columns:repeat(3,1fr); }
.policies-grid{ grid-template-columns:repeat(2,1fr); }
.gallery-grid{ grid-template-columns:repeat(3,1fr); grid-auto-rows:210px; }
@media (max-width:900px){
  .features-grid{ grid-template-columns:repeat(2,1fr); }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:180px; }
}
@media (max-width:560px){
  .features-grid, .policies-grid, .gallery-grid{ grid-template-columns:1fr; }
  .gallery-grid{ grid-auto-rows:220px; }
}

/* 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/TheTrailerRentalGuys/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(20,19,18,.84) 0%, rgba(34,33,32,.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(140,72,67,.28); color:#F0DCD8; border-color:rgba(255,255,255,.35); }
.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,#F2E1DE,#D2A59E); -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/TheTrailerRentalGuys/2d64bf1f34032d235d6f.jpg') center 55% / cover no-repeat #1a1918;
}
/* dark gradient: opaque left (text readable) → transparent right (photo shows) */
.hero .hero-bg{
  background: linear-gradient(
    100deg,
    rgba(22,21,20,.95) 0%,
    rgba(22,21,20,.82) 22%,
    rgba(22,21,20,.34) 48%,
    rgba(22,21,20,.00) 72%
  );
}
/* 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; }
/* hero-inner goes single-column, text sits on left */
.hero .hero-inner{ grid-template-columns:1fr; max-width:660px; }
/* text colours */
.hero .eyebrow{ color:#D8D5D1; background:rgba(54,52,53,.24); border-color:rgba(255,255,255,.35); }
.hero #heroTitle{ color:#fff; }
.hero #heroTitle .hi{ background:linear-gradient(100deg,#F2E1DE,#D2A59E); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero .hero-sub{ color:rgba(255,255,255,.74); }
.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(18,17,16,.66) !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); }

/* ============================================================================
   PH VERIFIED-OPERATOR TRUST BADGE — mobile (STANDARD, Amanda 2026-09-02).
   The #heroTrust/.ph-mark badge is display:inline-flex, which on mobile wrapped
   each text run into a ragged 3-column, 2-line stack with the shield floating.
   Force a compact SINGLE centered line (icon inline). Container-agnostic so it
   also fixes any footer instance. Also shipped in the Henry code slot via
   henry-migrate/mobile-nav-snippet.mjs so past + future sites all inherit it.
============================================================================ */
@media (max-width:600px){
  .ph-mark{ display:block !important; text-align:center !important; white-space:nowrap !important; font-size:11px !important; line-height:1.5 !important; margin:4px auto 0 !important; }
  .ph-mark img{ width:14px !important; height:14px !important; vertical-align:-3px !important; margin:0 4px 0 0 !important; }
  .ph-mark b{ margin:0 .22em !important; }
}
/* No horizontal scroll on mobile. The base clips body only; the PH chat widget
   (#ph-chat-frame) is fixed-positioned near the right edge and can push the html
   scroll width past the viewport, so clip BOTH html and body (matches the standard
   Henry code-slot mobile guard in mobile-nav-snippet.mjs). Verified 375px 2026-09-19. */
@media (max-width:600px){ html, body { overflow-x:hidden; max-width:100%; } }

/* Never render an empty gray contact-icon box — a blank .ci-ico reads as a broken
   image placeholder (Main Street shipped with i:"" contact icons, 2026-09-02). If a
   contact row has no icon, collapse the box instead of showing a gray square. */
.ci-ico:empty{ display:none !important; }

/* Long unbreakable EMAIL (TheTrailerGuysDFW@gmail.com, 26 chars, no spaces) can push
   the contact card past a 375px viewport and clip the right edge WITHOUT triggering a
   documentElement scroll (html overflow-x:hidden clips it), so it is invisible to the
   numeric hScroll check. Let the email wrap instead. (Star City landmine, 2026-09-19.) */
.ci-value, .ci-value a, #footerContact li, #footerContact a{ overflow-wrap:anywhere; word-break:break-word; }
.contact-info, .contact-form-wrap, .contact-list{ min-width:0; }