@charset "utf-8";
/* ============================================================
   hp2026.css -- recar.com homepage 2026 refresh
   Scope: index26.php ONLY. All selectors prefixed .hp26-
   Built incrementally: Task 08 (BC banner) -> 09 (hero) -> 10 (icons) -> 11 (tighten)
   Do NOT override global/site selectors here.
   ============================================================ */

/* --- Task 08: Buying-center banner (above hero) --- */
.hp26-bc-banner a { display:block; line-height:0; }
.hp26-bc-banner img { display:block; width:100%; height:auto; }
/* full bleed at all widths: neutralize the .container constraint */
.hp26-bc-banner .hp26-bc-inner { max-width:none; width:100%; padding-left:0; padding-right:0; }
/* desktop (>=768): black band + 20px padding all around (mobile stays full-bleed, no black) */
@media (min-width:768px){
  .hp26-bc-banner { background:#000; padding:0 20px; }
}

/* --- Task 09: Hero banner (CMS bg image + 2 hardcoded buttons) --- */
.hp26-hero { position:relative; width:100%; line-height:0; }
.hp26-hero-img { display:block; width:100%; height:auto; }
.hp26-hero-btns { position:absolute; left:0; width:100%; display:flex; justify-content:flex-start; align-items:center; line-height:normal; padding-left:7%; } /* Task 17: buttons left */
.hp26-hero-btn { display:inline-block; }
.hp26-hero-btn img { display:block; width:auto; height:auto; max-width:100%; }
/* mobile (approved look): width-based buttons */
@media (max-width:767px){
  .hp26-hero-btns { bottom:6%; gap:3%; }
  .hp26-hero-btn { width:42%; }
  .hp26-hero-btn img { width:100%; }
}
/* desktop: equal-height shrunk buttons, below the blue rule with room beneath */
@media (min-width:768px){
  .hp26-hero-btns { bottom:5%; gap:14px; }
  .hp26-hero-btn img { height:3vw; }
}

/* --- Task 10: Icon row (6 new icons) --- */

/* --- Task 11: Tighten vertical space (mobile-first) --- */


/* --- Task 16: Black/dark theme -- index26.php ONLY (scoped under body.hp26-dark) --- */
/* Everything BELOW the hero goes black with white text; header + BC banner + hero image unchanged.
   Blue buttons/effects are intentionally NOT overridden, so they stay blue (Allen: "some blue boxes can stay blue"). */
.hp26-dark .page-content.bg-white { background:#000; }
.hp26-dark .recar-home-bg { background:#000; color:#fff; }
/* icon row sits on a white band by default -> let the black show */
.hp26-dark .recar-home-bg .cdg-icon-bg-white { background:#000; }
/* interrupter gray band -> dark */
.hp26-dark .recar-home-bg .bg-gray { background:#111; }
/* headings + body copy sitting directly on the black */
.hp26-dark .recar-home-bg h2,
.hp26-dark .recar-home-bg h3,
.hp26-dark .recar-home-bg h4,
.hp26-dark .recar-home-bg .title,
.hp26-dark .recar-home-bg .section-head p { color:#fff; }
/* keep the inventory cards readable: white card keeps its dark text */
.hp26-dark .recar-home-bg .car-list-box { background:#fff; color:#333; }
.hp26-dark .recar-home-bg .car-list-box a,
.hp26-dark .recar-home-bg .car-list-box .title a { color:#333; }
/* footer (shared incl.php) darkened on THIS page only */
.hp26-dark #footer,
.hp26-dark #footer .footer-top,
.hp26-dark #footer .footer-bottom { background:#000; }
.hp26-dark #footer p,
.hp26-dark #footer .recar-name,
.hp26-dark #footer .recar-phone a { color:#fff; }

/* --- Task 17 + color fine-tune pass 1 (2026-06-28; Allen accents #01A6F6 bright, #CCF1FF pale) --- */

/* full background image behind everything below the hero (Clay will swap/adjust the image) */
.hp26-dark .recar-home-bg { position:relative; }
.hp26-dark .recar-home-bg::before {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url('/images/black-background-26.jpg') center top / cover no-repeat;
  opacity:1;
}
.hp26-dark .recar-home-bg > * { position:relative; z-index:1; }

/* glossy buttons mimicking Allen's hero PNGs -- GO + Clean Title + Rebuilt Title all use .recar-btn-gloss */
.hp26-dark .recar-home-bg .recar-btn-gloss,
.hp26-dark .recar-home-bg .recar-btn-gloss:focus {
  background:linear-gradient(180deg,#5FCBFF 0%,#01A6F6 52%,#0186c9 100%);
  border:0; border-radius:10px; color:#fff; font-weight:700;
  text-shadow:0 1px 1px rgba(0,0,0,.25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 3px 6px rgba(0,0,0,.45);
}
.hp26-dark .recar-home-bg .recar-btn-gloss:hover {
  background:linear-gradient(180deg,#7AD6FF 0%,#19B2FF 52%,#0196e0 100%); color:#fff;
}
.hp26-dark .recar-home-bg .recar-btn-gloss span,
.hp26-dark .recar-home-bg .recar-btn-gloss i { color:#fff; }
/* alt BLACK style (mimics Allen's finance btn) -- add class hp26-btn-black to any button to use it */
.hp26-dark .recar-home-bg .hp26-btn-black {
  background:linear-gradient(180deg,#2a2a2a 0%,#000 100%);
  border:0; border-radius:10px; color:#fff; font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 3px 6px rgba(0,0,0,.55);
}

/* inventory slider nav arrows: lighter background, pale-blue arrows */
.hp26-dark .recar-home-bg .btn-prev,
.hp26-dark .recar-home-bg .btn-next {
  background:rgba(204,241,255,.14); border:1px solid rgba(204,241,255,.35);
}
.hp26-dark .recar-home-bg .btn-prev i,
.hp26-dark .recar-home-bg .btn-next i { color:#CCF1FF; }

/* footer copyright -- pale-blue text + links, bright-blue hover (override inline blue) */
.hp26-dark #footer .copyright-text,
.hp26-dark #footer .copyright-text a { color:#CCF1FF !important; }
.hp26-dark #footer .copyright-text a:hover { color:#01A6F6 !important; }

/* --- Task 17b pass 2 (2026-06-28): one-line search, black buttons, finance boxes, dark inventory cards --- */

/* one-line search: keyword box | GO(black) + Clean + Rebuilt(blue) */
.hp26-dark .hp26-search-row .form-group { margin-bottom:0; }
.hp26-dark .hp26-search-actions { display:flex; gap:8px; align-items:stretch; }
.hp26-dark .hp26-search-actions .btn { flex:1 1 0; white-space:nowrap; display:flex; align-items:center; justify-content:center; }
.hp26-dark .hp26-search-actions .hp26-go { flex:0 0 72px; }
/* old Clean/Rebuilt buttons relocated into the search row -> hide here, pull inventory up */
.hp26-dark .recar-home-bg .btn-hp-cdg { display:none; }
.hp26-dark .recar-home-bg .content-inner-2.p-t0 { padding-top:0; padding-bottom:0; min-height:0; }
.hp26-dark .recar-home-bg .hp26-quicklook { padding-top:0; }

/* black button hover */
.hp26-dark .recar-home-bg .hp26-btn-black:hover { background:linear-gradient(180deg,#3a3a3a 0%,#0a0a0a 100%); color:#fff; }

/* PAGE LINKS finance/protection: black button style on the 3 boxes (blue .effect hover kept) */
.hp26-dark .recar-home-bg .icon-bx-wraper.style-1 {
  background:linear-gradient(180deg,#2a2a2a 0%,#000 100%);
  border:0; border-radius:10px; padding:22px 12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 3px 6px rgba(0,0,0,.55);
}
.hp26-dark .recar-home-bg .icon-bx-wraper.style-1 .title,
.hp26-dark .recar-home-bg .icon-bx-wraper.style-1 a { color:#fff; }

/* dark "techy" inventory cards -- KEEP red retail (.original #FF0000), blue ReCar tag (.badge #0176B1 shape), green clean (inline) */
.hp26-dark .recar-home-bg .car-list-box { background:#14181d; color:#cfe0ec; border:0 !important; }
.hp26-dark .recar-home-bg .car-list-box .list-info { background:#14181d; }
.hp26-dark .recar-home-bg .car-list-box .list-info .title a { color:#fff; }
.hp26-dark .recar-home-bg .car-list-box .list-info .title a .char:after { color:#fff; }   /* Splitting reveal was #000 -> invisible on dark */
.hp26-dark .recar-home-bg .car-list-box .list-info .title a .char:before { color:#01A6F6; }
.hp26-dark .recar-home-bg .car-list-box .car-type { color:#9fb4c4; }
.hp26-dark .recar-home-bg .car-list-box .list-info .feature-list .value { color:#cfe0ec; }
.hp26-dark .recar-home-bg .car-list-box .list-info .savings { color:#9fb4c4; }

/* --- dark header/nav -- index26.php ONLY (header.php is a shared include, untouched; all scoped .hp26-dark) --- */
/* top bar -> dark (default was #fff) */
.hp26-dark .site-header .main-bar { background:#000; box-shadow:0 6px 14px rgba(0,0,0,.45); }
.hp26-dark .header-nav { background:#000; }
/* top-level nav links -> white, hover bright blue */
.hp26-dark .header-nav .nav > li > a { color:#fff; }
.hp26-dark .header-nav .nav > li:hover > a,
.hp26-dark .header-nav .nav > li > a:hover { color:#01A6F6; }
/* dropdown submenus -> dark panel, pale-blue links */
.hp26-dark .header-nav .sub-menu { background:#0d0d0d; border-color:#222; }
.hp26-dark .header-nav .sub-menu li a { color:#cfe0ec; }
.hp26-dark .header-nav .sub-menu li a:hover { color:#01A6F6; background:rgba(204,241,255,.06); }
/* mobile hamburger bars -> light */
.hp26-dark .navbar-toggler .navicon span { background:#fff; }
/* facebook social icon -> light */
.hp26-dark .dlab-social-icon ul li a { color:#fff; }
.hp26-dark .dlab-social-icon ul li a:hover { color:#01A6F6; }

/* --- fine-tune pass 3 (2026-06-28, Clay) --- */

/* finance/protection boxes: kill the orange hover -> subtle light wash (opposite of the black btn) */
.hp26-dark .recar-home-bg .icon-bx-wraper.style-1 .effect.bg-primary {
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.03)) !important;
}

/* inventory card text area -> black button gradient */
.hp26-dark .recar-home-bg .car-list-box .list-info {
  background:linear-gradient(180deg,#2a2a2a 0%,#000 100%);
}

/* nav: accent bottom border + recolor the hover underline (was orange) */
.hp26-dark .site-header .main-bar { border-bottom:2px solid #01A6F6; }
.hp26-dark .header-nav .nav > li > a:before { background-color:#01A6F6; }

/* nav hover text -> pale blue */
.hp26-dark .header-nav .nav > li:hover > a,
.hp26-dark .header-nav .nav > li > a:hover { color:#CCF1FF; }

/* dropdown boxes -> dark treatment (matched theme specificity so it wins over #fff) */
.hp26-dark .header-nav .nav > li .sub-menu,
.hp26-dark .header-nav .nav > li .mega-menu { background-color:#0d0d0d; box-shadow:0 10px 20px rgba(0,0,0,.5); }
.hp26-dark .header-nav .nav > li .sub-menu li a { color:#cfe0ec; }
.hp26-dark .header-nav .nav > li .sub-menu li:hover > a { color:#CCF1FF; background:rgba(204,241,255,.06); }

/* Call or Text button -> black button style */
.hp26-dark .site-header .extra-nav .phone-no {
  background:linear-gradient(180deg,#2a2a2a 0%,#000 100%) !important;
  border:0 !important; color:#fff !important; border-radius:10px;
}
.hp26-dark .site-header .extra-nav .phone-no span,
.hp26-dark .site-header .extra-nav .phone-no i { color:#fff !important; }
.hp26-dark .site-header .extra-nav .phone-no.effect-1:after,
.hp26-dark .site-header .extra-nav .phone-no.effect-1:before { background:#01A6F6; }
/* card border hard-kill (Bootstrap .border utility uses !important) */
.hp26-dark .recar-home-bg .car-list-box,
.hp26-dark .recar-home-bg .car-list-box .media-box,
.hp26-dark .recar-home-bg .car-list-box .list-info { border:0 !important; }


/* --- media-query pass 1 (2026-06-28, Clay): 768 / 425 / 375 --- */

/* search row: 10px between buttons + 10px between the two stacked lines; tighten button padding */
.hp26-dark .hp26-search-row { --bs-gutter-x:10px; --bs-gutter-y:10px; }
.hp26-dark .hp26-search-row .form-group { margin-bottom:0; }
.hp26-dark .hp26-search-row .btn { padding-top:10px; padding-bottom:10px; }

/* 768-991 tablet: icon row 3 across (was 4) */
@media (min-width:768px) and (max-width:991px){
  .hp26-dark .recar-home-bg .brand-logo-area .col-md-3 { flex:0 0 33.3333%; max-width:33.3333%; }
}

/* tablet + mobile: tighten the vertical rhythm */
@media (max-width:991px){
  .hp26-dark .recar-home-bg .content-inner-2.p-t40 { padding-top:14px; }   /* inventory scroll -> finance boxes */
  .hp26-dark .recar-home-bg .content-inner-2.p-b40 { padding-bottom:14px; }/* finance boxes -> ... */
  .hp26-dark .recar-home-bg .content-inner { padding-top:16px; }           /* ... -> financing CTA */
  .hp26-dark .recar-home-bg .icon-bx-wraper.style-1 { margin-bottom:10px; }/* gap between stacked finance boxes */
}

/* mobile (425/375): tighten icon row bottom -> search bar top */
@media (max-width:767px){
  .hp26-dark .recar-home-bg .brand-logo-area .m-b10 { margin-bottom:2px; }
  .hp26-dark .recar-home-bg .car-searching { padding-top:0; margin-top:0; }
}

/* --- pass 1b (2026-06-28): xs title buttons -> drop icon, keep label on one line --- */
@media (max-width:575px){
  .hp26-dark .hp26-search-row .recar-btn-gloss i { display:none; }
  .hp26-dark .hp26-search-row .recar-btn-gloss,
  .hp26-dark .hp26-search-row .recar-btn-gloss span { white-space:nowrap; }
  .hp26-dark .hp26-search-row .recar-btn-gloss { padding-left:4px; padding-right:4px; font-size:14px; }
}

/* --- Task 18: CSS-styled hero buttons (2026-07-01, Allen) -- replace the 2 hero PNG images --- */
/* live on .hp26-hero-btns (container still handles bottom-left placement). old .hp26-hero-btn img rules now dead. */
.hp26-hero-btns .hp26-hbtn {
  display:inline-flex; align-items:center; justify-content:center; gap:.45em;
  font-weight:700; line-height:1; white-space:nowrap; text-decoration:none;
  border-radius:12px; box-sizing:border-box;
}
.hp26-hero-btns .hp26-hbtn-ico { width:1.15em; height:1.15em; flex:0 0 auto; }
.hp26-hero-btns .hp26-hbtn-arrow { font-weight:700; }
/* 1) glossy blue -- same gradient as Clean/Rebuilt .recar-btn-gloss (Allen: "use that as a base") */
.hp26-hero-btns .hp26-hbtn-blue,
.hp26-hero-btns .hp26-hbtn-blue:focus {
  background:linear-gradient(180deg,#5FCBFF 0%,#01A6F6 52%,#0186c9 100%);
  color:#fff; border:1px solid #7fd3ff;
  text-shadow:0 1px 1px rgba(0,0,0,.25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 3px 6px rgba(0,0,0,.45);
}
.hp26-hero-btns .hp26-hbtn-blue:hover {
  background:linear-gradient(180deg,#7AD6FF 0%,#19B2FF 52%,#0196e0 100%); color:#fff;
}
/* 2) white + black outline, simple */
.hp26-hero-btns .hp26-hbtn-outline,
.hp26-hero-btns .hp26-hbtn-outline:focus { background:#fff; color:#000; border:2px solid #000; }
.hp26-hero-btns .hp26-hbtn-outline:hover { background:#f2f2f2; color:#000; }
/* desktop sizing (replaces old img height:3vw) */
@media (min-width:768px){
  .hp26-hero-btns .hp26-hbtn { font-size:1.15vw; padding:.62em 1.1em; }
}
/* mobile sizing (replaces old img width:42%; let text buttons size to content) */
@media (max-width:767px){
  .hp26-hero-btns .hp26-hero-btn { width:auto; }
  .hp26-hero-btns .hp26-hbtn { font-size:3.4vw; padding:.6em .85em; border-radius:9px; }
}

/* --- Task 18b (2026-07-01): shrink hero buttons so they fit at <=575px (425/375/320) --- */
/* were running off-screen: two nowrap buttons + 7% left indent overflow narrow phones. */
@media (max-width:575px){
  .hp26-hero-btns { padding-left:3%; padding-right:3%; gap:2%; flex-wrap:nowrap; }         /* wrap = graceful stack if they still don't fit */
  .hp26-hero-btns .hp26-hbtn { flex:1 1 auto; min-width:0; width:auto; font-size:3.6vw; padding:.55em .5em; gap:.25em; border-radius:8px; }
  .hp26-hero-btns .hp26-hbtn-ico { width:.95em; height:.95em; }
}
/* 320px: no extra shrink -- few users, flex-wrap handles any overflow (Clay 2026-07-01) */

/* --- Task 19 (2026-07-01, Allen): tighten mobile so the search bar clears the fold on iPhone 15 --- */
@media (max-width:767px){
  /* gap below the hero blue line before the icons: theme .content-inner-2 padding-top 20px -> 10px (keep a little breathing room, not jammed against the line) */
  .hp26-dark .recar-home-bg .brand-logo-area.content-inner-2 { padding-top:10px; }
}

/* --- Task 20 (2026-07-01, Clay): search-form padding + input height --- */
.hp26-dark .searching-form { padding:10px 0 0; }
.hp26-dark .form-control.sm { height:40px; }

/* ============================================================
   Task 22 (2026-07-07): Inventory / listing page dark theme
   Scope: body.hp26-inv (vehicles26.php). Isolated from index26.php
   (which scopes its content rules under .recar-home-bg). Shared
   header/nav/footer dark rules (scoped .hp26-dark only) carry over,
   as does page background #000 (.hp26-dark .page-content.bg-white).
   ============================================================ */

/* section bands */
.hp26-inv .content-inner-2 { background:transparent; }
.hp26-inv .content-inner-2.cdg-icon-bg-white { background:#000; }

/* general text -> light on black */
.hp26-inv .content-inner-2,
.hp26-inv .serch-result,
.hp26-inv .serch-result strong,
.hp26-inv .error-head { color:#fff; }

/* keyword search field -> dark + visible on black */
.hp26-inv .search-bx .form-control { background:#14181d; border:1px solid #2a3540; color:#fff; }
.hp26-inv .search-bx .form-control::placeholder { color:#9fb4c4; opacity:1; }
.hp26-inv .search-bx .input-group-btn .btn { color:#CCF1FF; }

/* pagination -> dark */
.hp26-inv .pagination .page-link { background:#14181d; border-color:#2a3540; color:#cfe0ec; }
.hp26-inv .pagination .page-link.active,
.hp26-inv .pagination .page-link:hover { color:#fff; background:#0186c9; border-color:#0186c9; }

/* --- desktop result cards (.car-list-box) -- KEEP red Retail / green clean / blue ReCar tag accents --- */
.hp26-inv .car-list-box { background:#14181d; color:#cfe0ec; border:0 !important; }
.hp26-inv .car-list-box .media-box { border:0 !important; }
.hp26-inv .car-list-box .list-info { background:linear-gradient(180deg,#2a2a2a 0%,#000 100%); border:0 !important; }
.hp26-inv .car-list-box .list-info .title a { color:#fff; }
.hp26-inv .car-list-box .list-info .title a .char:after { color:#fff; }
.hp26-inv .car-list-box .car-type { color:#9fb4c4; }
.hp26-inv .car-list-box .list-info .feature-list .value { color:#cfe0ec; }
.hp26-inv .car-list-box .list-info .savings { color:#cfe0ec; }

/* --- mobile result cards (.icon-bx-wraper.style-3-v2) --- */
.hp26-inv .icon-bx-wraper.style-3-v2 { background:#14181d; color:#cfe0ec; border-radius:10px; padding:8px; }
.hp26-inv .icon-bx-wraper.style-3-v2 .media-heading-v2 a { color:#fff; }
.hp26-inv .icon-bx-wraper.style-3-v2 .used-car-dl-info-v2,
.hp26-inv .icon-bx-wraper.style-3-v2 .used-car-dl-info-v2 li { color:#cfe0ec; }
.hp26-inv .icon-bx-wraper.style-3-v2 .model-v2 { color:#9fb4c4; }

/* Task 22 fix (2026-07-07): theme .bg-white uses !important (style.css:5999); on this page
   there is no .recar-home-bg wrapper to mask it (unlike index26.php), so force the main
   content + the RC-banner band to black. (Flat black; swap to black-background-26.jpg if matching the homepage texture is preferred.) */
.hp26-inv .page-content.bg-white { background:#000 !important; }
.hp26-inv .content-inner-2.cdg-icon-bg-white { background:#000 !important; }

/* Task 22b (2026-07-07, Clay): match search-area buttons to the homepage new-button styles.
   GO=black, Clean Title=blue gloss on the homepage -> here: search submit (magnifying glass)=black,
   Cars/Trucks/SUVs + refine buttons=blue gloss. (Cars/Trucks/SUVs rebuilt as segmented toggle in Task 25.) */

/* blue gloss -- Cars/Trucks/SUVs + refine buttons (mirror .recar-btn-gloss) */
.hp26-inv .btn.btn-primary.effect-1,
.hp26-inv .btn.btn-primary.effect-1:focus {
  background:linear-gradient(180deg,#5FCBFF 0%,#01A6F6 52%,#0186c9 100%) !important;
  border:0 !important; border-radius:10px; color:#fff !important; font-weight:700;
  text-shadow:0 1px 1px rgba(0,0,0,.25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 3px 6px rgba(0,0,0,.45);
}
.hp26-inv .btn.btn-primary.effect-1:hover {
  background:linear-gradient(180deg,#7AD6FF 0%,#19B2FF 52%,#0196e0 100%) !important; color:#fff !important;
}
.hp26-inv .btn.btn-primary.effect-1 span { color:#fff !important; }

/* black -- keyword search submit (magnifying glass), like the homepage GO button.
   attached to the input-group -> round the right side only */
.hp26-inv .search-bx .input-group-btn .btn {
  background:linear-gradient(180deg,#2a2a2a 0%,#000 100%) !important;
  border:0 !important; border-radius:0 8px 8px 0; color:#fff !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 3px 6px rgba(0,0,0,.55);
  padding-left:16px; padding-right:16px;
}
.hp26-inv .search-bx .input-group-btn .btn:hover { background:linear-gradient(180deg,#3a3a3a 0%,#0a0a0a 100%) !important; }
.hp26-inv .search-bx .input-group-btn .btn i { color:#CCF1FF !important; }
/* keyword field -> round left side to pair with the black button */
.hp26-inv .search-bx .form-control { border-radius:8px 0 0 8px; }

/* Task 23 (2026-07-07): inside buying-center banner (replaces the old RC SVG; only banner on the page) */
.hp26-inv .hp26-inv-banner { display:block; padding:0; line-height:0; }
.hp26-inv .hp26-inv-banner a { display:block; line-height:0; }
.hp26-inv .hp26-inv-banner img { display:block; width:100%; height:auto; }

/* Task 22c (2026-07-07, Clay review): filter-button hover readability + black pagination arrows */

/* .effect-1 slides a WHITE fill on hover (style.css:10829/10840) -> washed out the blue btn + white text.
   Kill the slide; hover just brightens the blue like the homepage .recar-btn-gloss, text stays white. */
.hp26-inv .btn.btn-primary.effect-1:before,
.hp26-inv .btn.btn-primary.effect-1:after { display:none !important; }
.hp26-inv .btn.btn-primary.effect-1:hover span { color:#fff !important; }   /* theme sets span -> var(--primary) on hover */

/* bottom pagination prev/next arrows -> black gradient, like the magnifying-glass search button */
.hp26-inv .pagination li .prev,
.hp26-inv .pagination li .next {
  background:linear-gradient(180deg,#2a2a2a 0%,#000 100%) !important;
  border:0 !important; color:#CCF1FF !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 3px 6px rgba(0,0,0,.55);
}
.hp26-inv .pagination li .prev:hover,
.hp26-inv .pagination li .next:hover { background:linear-gradient(180deg,#3a3a3a 0%,#0a0a0a 100%) !important; color:#fff !important; }
.hp26-inv .pagination li .prev i,
.hp26-inv .pagination li .next i { color:#CCF1FF !important; }

/* --- Task 25: inventory filter UI (segmented Type toggle + refine chips) --- */
.hp26-inv .hp26-filter-bar{margin-bottom:14px}
.hp26-inv .hp26-seg{display:flex;flex-wrap:nowrap;width:100%;border-radius:8px;overflow:hidden}
.hp26-inv .hp26-seg-btn{flex:1 1 0;min-width:0;text-align:center;padding:9px 6px;font-weight:600;color:#CCF1FF;background:#14181d;border:1px solid #2f3944;text-decoration:none;transition:all .15s;white-space:nowrap}
.hp26-inv .hp26-seg-btn + .hp26-seg-btn{border-left:0}
.hp26-inv .hp26-seg-btn:first-child{border-radius:8px 0 0 8px}
.hp26-inv .hp26-seg-btn:last-child{border-radius:0 8px 8px 0}
.hp26-inv .hp26-seg-btn:hover{background:#1d2530;color:#fff}
.hp26-inv .hp26-seg-btn.is-on{background:linear-gradient(180deg,#5FCBFF 0%,#01A6F6 55%,#0186c9 100%);color:#fff;border-color:#0186c9;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.hp26-inv .hp26-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:8px}
.hp26-inv .hp26-chip{display:inline-block;padding:7px 15px;border-radius:20px;font-weight:600;font-size:.88rem;line-height:1.2;color:#CCF1FF;background:transparent;border:1.5px solid #01A6F6;text-decoration:none;transition:all .15s}
.hp26-inv .hp26-chip:hover{background:rgba(1,166,246,.15);color:#fff}
.hp26-inv .hp26-chip.is-on{background:linear-gradient(180deg,#5FCBFF 0%,#01A6F6 55%,#0186c9 100%);color:#fff;border-color:#0186c9;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.hp26-inv .hp26-chip-clear{border-color:#7a4a4a;color:#ffb3b3}
.hp26-inv .hp26-chip-clear:hover{background:rgba(255,80,80,.15);color:#fff;border-color:#cc9966}
@media (max-width:767px){.hp26-inv .hp26-filter-bar{margin-bottom:14px}.hp26-inv .hp26-seg{margin-bottom:4px}}

/* --- Task 25 tweak + Task 26 price box (2026-07-07, Clay) --- */
/* (A) keyword search + magnifying-glass button = same height as the Cars/Trucks/SUVs segmented toggle; drop extra vertical margins so the whole row pulls up tighter */
.hp26-inv .hp26-filter-bar .row{align-items:center}
.hp26-inv .hp26-filter-bar .widget_search,
.hp26-inv .hp26-filter-bar .search-bx,
.hp26-inv .hp26-filter-bar .form-group{margin-bottom:0!important}
.hp26-inv .hp26-seg-btn{height:44px;padding-top:0;padding-bottom:0;display:flex;align-items:center;justify-content:center}
.hp26-inv .hp26-filter-bar .search-bx .form-control{height:44px}
.hp26-inv .hp26-filter-bar .search-bx .input-group-btn .btn{height:44px;display:flex;align-items:center;justify-content:center;padding-top:0;padding-bottom:0}
@media (max-width:767px){.hp26-inv .hp26-filter-bar .row{row-gap:8px}}

/* (B) ReCar Price bar spans full width, edge-to-edge, squared -- breaks out of the .list-info 20px side padding; text stays inset. Background colors UNCHANGED (blue .badge #0176B1 / yellow .reduced #fbe122 / green pending / red sold). */
.hp26-inv .car-list-box .list-info .badge{
  display:block;box-sizing:border-box;width:auto;
  border-radius:0;                       /* was 0 30px 30px 0 -> fully squared incl. right edge */
  text-align:left;
  margin-left:0;margin-right:-20px;       /* left stays inset like before; only the RIGHT reaches the card edge */
  padding-left:10px;padding-right:20px;   /* original-ish left inset; keep the price off the right edge */
}

/* Task 26 mobile price box (2026-07-07, Clay): square + fill to the right of the details column -- matches the desktop squared bar. Backgrounds unchanged (badge-v2 blue gradient / reduced-v2 yellow / pending green / sold red). */
.hp26-inv .icon-bx-wraper.style-3-v2 .used-car-dl-info-v2 li.badge-v2,
.hp26-inv .icon-bx-wraper.style-3-v2 .used-car-dl-info-v2 li.reduced-v2,
.hp26-inv .icon-bx-wraper.style-3-v2 .used-car-dl-info-v2 li.pending-v2,
.hp26-inv .icon-bx-wraper.style-3-v2 .used-car-dl-info-v2 li.sold-v2{
  display:block;box-sizing:border-box;width:auto;
  border-radius:0;              /* was 0 30px 30px 0 -> squared incl. right */
  text-align:left;margin-right:7px;
}

/* --- Task 26b: mobile fine-tune (2026-07-07, Clay) --- */
/* (2) tighten top of content bands on tablet/mobile */
@media (max-width:991px){
  .hp26-inv .content-inner-2 { padding-top:10px; }
}
/* (4) refine chips smaller so all 6 fit on 2 lines at phone widths */
@media (max-width:767px){
  .hp26-inv .hp26-chips { gap:6px; }
  .hp26-inv .hp26-chip { padding:5px 11px; font-size:.74rem; }
}
/* (5) mobile card title -> light like desktop (theme sets #36454F at higher specificity than the Task 22 rule; this beats it) */
.hp26-inv .icon-bx-wraper.style-3-v2 .content-box-v2 h5.media-heading-v2 a { color:#fff; }


/* --- Task 26c (2026-07-07, Clay): desktop parity fixes --- */
/* (1) Call/Text button: on .hp26-inv the Task 22b blue-gloss rule (.hp26-inv .btn.btn-primary.effect-1)
   also caught the header Call/Text button (same btn-primary effect-1 classes) -> painted it blue.
   Re-assert the homepage BLACK button at inventory-winning specificity (hp26-inv + hp26-dark on <body>). */
.hp26-inv.hp26-dark .site-header .extra-nav .phone-no,
.hp26-inv.hp26-dark .site-header .extra-nav .phone-no:focus,
.hp26-inv.hp26-dark .site-header .extra-nav .phone-no:hover {
  background:linear-gradient(180deg,#2a2a2a 0%,#000 100%) !important;
  border:0 !important; color:#fff !important; border-radius:10px;
}
.hp26-inv.hp26-dark .site-header .extra-nav .phone-no span,
.hp26-inv.hp26-dark .site-header .extra-nav .phone-no i { color:#fff !important; }
/* restore the pale-blue effect-1 slide-fill (homepage keeps it; Task 22c had display:none'd it for filter buttons) */
.hp26-inv.hp26-dark .site-header .extra-nav .phone-no.effect-1:before,
.hp26-inv.hp26-dark .site-header .extra-nav .phone-no.effect-1:after { display:block !important; background:#01A6F6 !important; }
/* (2) inside banner: 80% width, centered on desktop */
@media (min-width:768px){
  .hp26-inv .hp26-inv-banner img { width:80%; margin-left:auto; margin-right:auto; }
}


/* --- Task 16d (2026-07-07, Clay): homepage cards match the inventory page --- */
/* ReCar Price box squared (mirror of vehicles26 Task 26): left stays inset, right bleeds to the card edge; bg colors UNCHANGED */
.hp26-dark .recar-home-bg .car-list-box .list-info .badge{
  display:block; box-sizing:border-box; width:auto;
  border-radius:0;
  text-align:left;
  margin-left:0; margin-right:-20px;
  padding-left:10px; padding-right:20px;
}


/* --- Task 26d: mobile fine-tune round 2 (Allen 2026-06-23) --- CSS-only, .hp26-inv-scoped, mobile-focused --- */

/* (Clay) MOBILE reorder: keyword search on top, Cars/Trucks/SUVs toggle drops directly above the refine chips
   so all filters are grouped together. Both cols share one flex .row -> reorder with `order`; desktop DOM order untouched. */
@media (max-width:767px){
  .hp26-inv .hp26-filter-bar .row > .col-xl-8{order:1;}   /* keyword search first */
  .hp26-inv .hp26-filter-bar .row > .col-xl-4{order:2;}   /* Cars/Trucks/SUVs second, right above the chips */
}

/* (B) Cars/Trucks/SUVs segmented toggle: BOLD labels + darker surround (fill + borders) so they stop getting lost */
.hp26-inv .hp26-seg-btn{font-weight:700;color:#EAF7FF;background:#0a0d10;border-color:#151b22;}
.hp26-inv .hp26-seg-btn:hover{background:#161d25;}
.hp26-inv .hp26-seg-btn.is-on{color:#fff;}   /* on-state keeps its bright blue gloss */

/* (C) Refine chips: uniform 3-up x 2 rows at EVERY phone width (grid = equal cells), brighter + thicker blue border, BOLD */
.hp26-inv .hp26-chip{font-weight:700;border-width:2.5px;border-color:#33B5FF;}
@media (max-width:767px){
  .hp26-inv .hp26-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
  .hp26-inv .hp26-chip{width:100%;text-align:center;padding:7px 4px;font-size:.72rem;white-space:nowrap;box-sizing:border-box;}
  .hp26-inv .hp26-chip-clear{grid-column:1 / -1;}   /* "Clear all" spans full width below the six */
}

/* (D) MOBILE ReCar Price box: BOLD label+price, BRIGHTER blue, shrink to content so the blue stops shortly after
   the price instead of filling the row. Squared corners kept. */
.hp26-inv .icon-bx-wraper.style-3-v2 .used-car-dl-info-v2 li.badge-v2{
  display:inline-block;width:auto;margin-right:0;font-weight:700;
  background-image:linear-gradient(to right,#0186c9 0,#1CB8FF 55%,#0186c9 100%);
}
.hp26-inv .icon-bx-wraper.style-3-v2 .used-car-dl-info-v2 li.badge-v2 span{font-weight:700;}
/* sibling price states shrink-to-content + bold to match (colors unchanged) */
.hp26-inv .icon-bx-wraper.style-3-v2 .used-car-dl-info-v2 li.reduced-v2,
.hp26-inv .icon-bx-wraper.style-3-v2 .used-car-dl-info-v2 li.pending-v2,
.hp26-inv .icon-bx-wraper.style-3-v2 .used-car-dl-info-v2 li.sold-v2{
  display:inline-block;width:auto;font-weight:700;
}
.hp26-inv .icon-bx-wraper.style-3-v2 .used-car-dl-info-v2 li.reduced-v2 span,
.hp26-inv .icon-bx-wraper.style-3-v2 .used-car-dl-info-v2 li.pending-v2 span,
.hp26-inv .icon-bx-wraper.style-3-v2 .used-car-dl-info-v2 li.sold-v2 span{font-weight:700;}

/* --- Task 26d-fix (Allen 2026-07-12): (1) seg surround BRIGHTER not darker (opposite of first pass) so buttons pop against black; (2) text-shadow on ReCar Price + price for readability on the brighter blue --- */
.hp26-inv .hp26-seg-btn{background:#1b222b;border-color:#33B5FF;}
.hp26-inv .hp26-seg-btn:hover{background:#243040;}
.hp26-inv .hp26-seg-btn.is-on{border-color:#0186c9;}   /* on-state keeps its own gloss border */
.hp26-inv .icon-bx-wraper.style-3-v2 .used-car-dl-info-v2 li.badge-v2,
.hp26-inv .icon-bx-wraper.style-3-v2 .used-car-dl-info-v2 li.badge-v2 span{
  text-shadow:0 1px 2px rgba(0,0,0,.6);
}

/* --- Task 26d-fix2 (Allen 2026-07-12): seg surround = fill BACK to original black; border near-WHITE (not blue) + thicker so it's not pixelated. Only the border lightens. --- */
.hp26-inv .hp26-seg-btn{background:#14181d;border-color:#e6edf2;border-width:2px;box-sizing:border-box;}
.hp26-inv .hp26-seg-btn:hover{background:#1d2530;}
.hp26-inv .hp26-seg-btn.is-on{border-color:#0186c9;}   /* on-state keeps its gloss border */

/* --- Task 26e (Allen 2026-07-12): (1) outline the keyword search bar like the Cars/Trucks/SUVs buttons so it stands out; (2) on-sale (yellow) price box -> BLACK text (white-on-yellow was hard to read); yellow bg kept --- */
/* (1) search bar: near-white 2px outline on the field + button, seam removed between them (matches the seg group) */
.hp26-inv .search-bx .form-control{border:2px solid #e6edf2;box-sizing:border-box;}
.hp26-inv .search-bx .input-group-btn .btn{border:2px solid #e6edf2;border-left:0;box-sizing:border-box;}
/* (2) reduced / on-sale price box: keep yellow bg, switch text to black (mobile reduced-v2 + desktop .badge.reduced) */
.hp26-inv .icon-bx-wraper.style-3-v2 .used-car-dl-info-v2 li.reduced-v2,
.hp26-inv .icon-bx-wraper.style-3-v2 .used-car-dl-info-v2 li.reduced-v2 span,
.hp26-inv .car-list-box .list-info .badge.reduced,
.hp26-inv .car-list-box .list-info .badge.reduced span{color:#000;}

/* --- Task 26e-fix (Allen 2026-07-12): near-white outline must wrap the magnify button too (its black-button style set border:0 !important, so the border only showed on the field). Force it onto the button + drop the field's right border so there's NO seam between field and button. */
.hp26-inv .search-bx .form-control{border-right:0;}
.hp26-inv .search-bx .input-group-btn .btn{border:2px solid #e6edf2 !important;border-left:0 !important;}

/* =========================================================================
   PHASE 5 - VEHICLE DETAIL PAGE  (Task 31 scaffold, 2026-07-14)
   Scope: body.hp26-detail (vehiclesDetail26.php). Isolated from index26.php
   + vehicles26.php. Base dark foundation here; component styling in Tasks 33-38.
   Header/nav/footer dark carry over from the shared .hp26-dark rules.
   ========================================================================= */
/* page bg: theme .bg-white is !important (style.css) - force #000 like .hp26-inv did */
.hp26-detail .page-content.bg-white { background:#000 !important; }
/* base text white on the dark detail page */
.hp26-detail .content-inner-2, .hp26-detail .content-inner-2 * { color:#fff; }

/* --- Task 33 (2026-07-14): TOP ROW = finance banner (LEFT) + Ask/Trade/Share quick-cards (RIGHT) on desktop.
   Banner = mobile image (bc-banner-inside-mobile_2026.png) on both breakpoints per Allen; NOT full-width on desktop.
   Mobile: banner full-width on top, top quick-cards HIDDEN (bottom set added in Task 37).
   Link buying-center.php (PROVISIONAL - pending Allen, may be finance.php). --- */
.hp26-detail .hp26-detail-topwrap { padding:22px 15px 6px; }
.hp26-detail .hp26-detail-top { display:flex; flex-wrap:wrap; align-items:stretch; gap:16px; }
.hp26-detail .hp26-detail-banner { display:block; line-height:0; flex:1 1 56%; min-width:0; }
.hp26-detail .hp26-detail-banner img { display:block; width:100%; height:auto; border-radius:10px; }
.hp26-detail .hp26-detail-quick { display:flex; gap:12px; flex:1 1 38%; margin:0; padding:0; }
.hp26-detail .hp26-qcard { display:flex; flex-direction:column; align-items:center; justify-content:center; flex:1 1 0; min-width:0; padding:14px 8px; background:#14181d; border:1px solid #2a3540; border-radius:12px; color:#fff !important; text-align:center; line-height:1.25; }
.hp26-detail .hp26-qcard i { color:#0186c9; font-size:20px; margin-bottom:6px; }
.hp26-detail .hp26-qcard .hp26-qcard-t { font-weight:700; }
.hp26-detail .hp26-qcard .hp26-qcard-s { font-size:.78rem; color:#9fb4c4; }
.hp26-detail .hp26-qcard:hover { border-color:#0186c9; }
@media (max-width:767px){
  .hp26-detail .hp26-detail-topwrap { padding:0 0 8px; }
  .hp26-detail .hp26-detail-top { flex-direction:column; gap:0; }
  .hp26-detail .hp26-detail-banner { flex-basis:auto; }
  .hp26-detail .hp26-detail-banner img { border-radius:0; }
  .hp26-detail .hp26-detail-top .hp26-detail-quick { display:none; }
}


/* --- Task 34 (2026-07-14): header single blue spec line (Title • Miles • Engine • Transmission) + VIN/Stock id row. Accent #01A6F6 to match detail scaffold. --- */
    .hp26-detail .vehicle-spec-blue-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;}
    .hp26-detail .vehicle-spec-blue-list li{color:#01A6F6;font-weight:600;font-size:1.05rem;line-height:1.4;}
    .hp26-detail .vehicle-spec-blue-list li:not(:last-child)::after{content:"\2022";margin:0 10px;color:#01A6F6;font-weight:400;}
    .hp26-detail .vehicle-idrow{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:10px;color:#fff;font-weight:600;}
    .hp26-detail .vehicle-idrow-vin{min-width:0;overflow-wrap:anywhere;}
    .hp26-detail .vehicle-idrow-stock{white-space:nowrap;}


/* --- Task 35 (2026-07-14): 3-up price boxes (RETAIL strike / YOU SAVE green #2ecc71 tunable / RECAR PRICE highlight) per mockup. Pending/Sold + Price Coming Soon logic retained in PHP. --- */
    .hp26-detail .vehicle-price-3up{display:flex;gap:10px;margin:6px 0 16px;}
    .hp26-detail .vehicle-price-box{flex:1 1 0;min-width:0;background:#14181d;border:1px solid #2a3540;border-radius:12px;padding:14px 8px;text-align:center;}
    .hp26-detail .vehicle-price-box .price-label{display:block;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:#9fb0bf;font-weight:700;margin-bottom:6px;}
    .hp26-detail .vehicle-price-box .price-value{display:block;font-size:1.5rem;font-weight:800;color:#fff;line-height:1.1;white-space:nowrap;}
    .hp26-detail .vehicle-price-box .price-value.strike{text-decoration:line-through;color:#8b97a2;font-weight:700;}
    .hp26-detail .vehicle-price-box.price-save{border-color:#2e7d4f;}
    .hp26-detail .vehicle-price-box.price-save .price-value.save{color:#2ecc71;}
    .hp26-detail .vehicle-price-box.price-main{background:linear-gradient(180deg,#3a444e 0%,#2a333c 100%);border-color:#4a5763;}
    @media (max-width:575px){.hp26-detail .vehicle-price-3up{gap:6px;} .hp26-detail .vehicle-price-box .price-value{font-size:1.15rem;} .hp26-detail .vehicle-price-box{padding:12px 6px;}}


/* --- Task 36 (2026-07-14): stacked CTA buttons (Finance blue / Reserve outline SOP_2 / Call outline). Blue #1a72f0 tunable. p7SOP wiring retained in PHP. --- */
    .hp26-detail .vehicle-cta-stack{display:flex;flex-direction:column;gap:10px;margin:0 0 16px;}
    .hp26-detail .hp26-cta{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:14px 18px;border-radius:10px;font-weight:700;font-size:1.02rem;letter-spacing:.02em;text-decoration:none;line-height:1.1;transition:filter .15s,border-color .15s,color .15s;}
    .hp26-detail .hp26-cta-blue{background:#1a72f0;color:#fff !important;}
    .hp26-detail .hp26-cta-blue:hover{filter:brightness(1.08);}
    .hp26-detail .hp26-cta-blue .hp26-cta-chev{position:absolute;right:18px;}
    .hp26-detail .hp26-cta-outline{background:transparent;color:#fff !important;border:1.5px solid #3a4753;}
    .hp26-detail .hp26-cta-outline:hover{border-color:#1a72f0;color:#1a72f0 !important;}
    .hp26-detail .hp26-cta .hp26-cta-phone,.hp26-detail .hp26-cta .hp26-cta-chev{flex:0 0 auto;}


/* --- Task 37 (2026-07-14): full-width bottom strip -- ext/int colors + CARFAX (left) | description (middle) | Ask/Trade/Share cards (right). Description already full-text (no Read More). Mobile hide above scoped to .hp26-detail-top so THIS bottom card set stays visible on phones. --- */
    .hp26-detail .hp26-detail-bottom{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start;padding:26px 0 10px;border-top:1px solid #2a3540;margin-top:6px;}
    .hp26-detail .hp26-db-left{flex:1 1 190px;}
    .hp26-detail .hp26-db-mid{flex:3 1 380px;}
    .hp26-detail .hp26-db-right{flex:2 1 300px;}
    .hp26-detail .hp26-db-left .vehicle-meta-list{list-style:none;margin:0 0 14px;padding:0;color:#fff;font-weight:600;line-height:1.6;}
    .hp26-detail .hp26-db-left .vehicle-carfax img{max-width:150px;height:auto;}
    .hp26-detail .hp26-db-mid .vehicle-description{color:#c9d3dc;line-height:1.6;margin:0;}
    .hp26-detail .hp26-db-right .hp26-detail-quick{display:flex;gap:12px;margin:0;padding:0;}
    @media (max-width:767px){.hp26-detail .hp26-detail-bottom{flex-direction:column;gap:18px;}}


/* --- Task 34r (2026-07-14): DESKTOP REVISION PASS (Clay browser review). Overrides after Tasks 33-37 win by source order. Sources: style.css .sop-btn margin/:after, .vehicle-detail-card #fff, .overlay-icon bottom-right. --- */
/* (A) vertical-center top row; margin:0 kills style.css .sop-btn margin:16px 2px 0 */
.hp26-detail .hp26-detail-top{ align-items:center; }
.hp26-detail .hp26-qcard{ margin:0; }
/* (B) remove skewX(-20deg) white shine slide (style.css .sop-btn:after); keep lift+border+icon hovers */
.hp26-detail .hp26-qcard:after{ content:none !important; display:none !important; }
/* (C) whole photo clickable -> opens existing lightgallery expand */
.hp26-detail .product-gallery .dlab-thum-bx .overlay-icon{ position:absolute; inset:0; top:0; left:0; right:0; bottom:0; width:100%; height:100%; padding:0; transform:none !important; display:flex; align-items:center; justify-content:center; }
.hp26-detail .product-gallery .dlab-thum-bx:hover .overlay-icon{ transform:none !important; }
.hp26-detail .product-gallery .overlay-icon .view-btn.lightimg{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; margin:0; cursor:pointer; }
.hp26-detail .product-gallery .overlay-icon .view-btn.lightimg svg{ width:60px; height:60px; }
/* (D) right card was #fff in style.css -> dark/transparent */
.hp26-detail .vehicle-detail-card{ background:transparent; box-shadow:none; }
/* (E) 4-item blue spec line smaller */
.hp26-detail .vehicle-spec-blue-list li{ font-size:.9rem; }
/* (F) bottom strip: hr before carfax, bigger carfax, white/smaller/tighter description */
.hp26-detail .hp26-db-left .vehicle-meta-list{ margin:0 0 10px; }
.hp26-detail .hp26-db-hr{ border:0; border-top:1px solid #2a3540; margin:12px 0; }
.hp26-detail .hp26-db-left .vehicle-carfax img{ max-width:220px; }
.hp26-detail .hp26-db-mid .vehicle-description{ color:#fff; font-size:.92rem; line-height:1.5; }

/* --- Task 34s (2026-07-14): DESKTOP REVISION PASS 2 -- match details-mockup-desktop1.png (gallery count+arrows/no-thumbs, detail-card border/year/price, bottom-left icon+off-white-hr+carfax-dark26, bottom gap). --- */
.hp26-detail .product-gallery .thumb-slider{ display:none !important; }
.hp26-detail .product-gallery{ padding-right:0; }
.hp26-detail .product-gallery .sync1{ position:relative; }
.hp26-detail .hp26-gallery-count{ position:absolute; top:16px; left:16px; z-index:6; background:rgba(0,0,0,.6); color:#fff; font-size:14px; font-weight:600; padding:4px 12px; border-radius:6px; pointer-events:none; }
.hp26-detail .sync1 .hp26-gnav{ width:48px; height:48px; margin-top:-24px; border-radius:50%; border:2px solid #1a72f0; background:rgba(0,0,0,.45); color:#fff; z-index:7; transition:background .15s; }
.hp26-detail .sync1 .hp26-gnav:hover{ background:#1a72f0; }
.hp26-detail .sync1 .swiper-button-prev.hp26-gnav{ left:16px; }
.hp26-detail .sync1 .swiper-button-next.hp26-gnav{ right:16px; }
.hp26-detail .sync1 .hp26-gnav:after{ font-size:18px; font-weight:700; }
.hp26-detail .vehicle-detail-card{ border:1px solid #c9cfd4; border-radius:16px; background:transparent; box-shadow:none; padding:22px 20px 20px; }
.hp26-detail .vehicle-year{ font-size:18px; font-weight:600; color:#8b97a2; letter-spacing:.02em; margin-bottom:2px; }
.hp26-detail .vehicle-idrow-stock{ background:#14181d; border:1px solid #2a3540; padding:4px 14px; border-radius:8px; }
.hp26-detail .vehicle-price-box .price-value{ font-weight:600; }
.hp26-detail .vehicle-price-box.price-main .price-value{ font-weight:700; }
.hp26-detail .vehicle-price-box .price-value.strike{ color:#9aa7b2; text-decoration-line:line-through; text-decoration-color:#e23b3b; text-decoration-thickness:2px; }
.hp26-detail .hp26-db-idblock{ display:flex; align-items:flex-start; gap:12px; }
.hp26-detail .hp26-db-icon{ color:#0186c9; font-size:26px; line-height:1; margin-top:2px; }
.hp26-detail .hp26-db-left .vehicle-meta-list{ margin:0; }
.hp26-detail .hp26-db-hr{ border:0; border-top:1px solid #c9cfd4; margin:14px 0; }
.hp26-detail .vehicle-carfax{ display:flex; align-items:center; gap:12px; }
.hp26-detail .hp26-db-left .vehicle-carfax img{ max-width:250px; }
.hp26-detail .hp26-carfax-txt{ font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; color:#9fb0bf; line-height:1.3; }
.hp26-detail .hp26-db-left{ flex:0 1 300px; }
.hp26-detail .hp26-db-mid{ flex:0 1 560px; }
.hp26-detail .hp26-db-right{ flex:1 1 420px; }

/* --- Task 34t (2026-07-14): desktop revision 3 (Clay) -- card border #3a4753; spec line + VIN one-line; .vehicle-pricing top margin; bottom-left colors stacked (style.css .vehicle-meta-list is flex -> force block, kill square bullet). --- */
.hp26-detail .vehicle-detail-card{ border-color:#3a4753; }
.hp26-detail .vehicle-spec-blue-list{ flex-wrap:nowrap; }
.hp26-detail .vehicle-spec-blue-list li{ font-size:.72rem; white-space:nowrap; line-height:1.3; }
.hp26-detail .vehicle-spec-blue-list li:not(:last-child)::after{ margin:0 5px; }
.hp26-detail .vehicle-idrow{ flex-wrap:nowrap; gap:10px; }
.hp26-detail .vehicle-idrow-vin{ font-size:.8rem; white-space:nowrap; overflow-wrap:normal; }
.hp26-detail .vehicle-pricing{ margin-top:18px; }
.hp26-detail .hp26-db-left .vehicle-meta-list{ display:block; }
.hp26-detail .hp26-db-left .vehicle-meta-list li{ display:block; }
.hp26-detail .hp26-db-left .vehicle-meta-list li:not(:last-child)::after{ content:none; }

/* --- Task 34u (2026-07-14): desktop revision 4 (Clay) -- photo magnify hidden (photo still opens gallery); VIN .9rem, spec .82rem; price values 1.3rem + weight 600; bottom row = bordered box + vertical rule + 3 cards one line (match desktop-bottom-finetune1.png). --- */
.hp26-detail .product-gallery .overlay-icon .view-btn.lightimg svg{ display:none; }
.hp26-detail .vehicle-idrow-vin{ font-size:.9rem; }
.hp26-detail .vehicle-spec-blue-list li{ font-size:.82rem; }
.hp26-detail .vehicle-price-box .price-value{ font-size:1.3rem; }
.hp26-detail .vehicle-price-box .price-value.strike{ font-weight:600; }
.hp26-detail .vehicle-price-box.price-main .price-value{ font-weight:600; }
.hp26-detail .hp26-detail-bottom{ border:1px solid #3a4753; border-radius:16px; padding:22px 26px; margin-top:16px; gap:28px; flex-wrap:nowrap; align-items:stretch; }
.hp26-detail .hp26-db-left{ flex:0 0 250px; }
.hp26-detail .hp26-db-mid{ flex:1 1 auto; border-left:1px solid #3a4753; padding-left:28px; }
.hp26-detail .hp26-db-right{ flex:0 0 360px; }
.hp26-detail .hp26-db-right .hp26-detail-quick{ gap:10px; flex-wrap:nowrap; }
.hp26-detail .hp26-db-right .hp26-qcard{ padding:12px 6px; }
.hp26-detail .hp26-db-right .hp26-qcard i{ font-size:18px; margin-bottom:4px; }
.hp26-detail .hp26-db-right .hp26-qcard .hp26-qcard-t{ font-size:.9rem; }
.hp26-detail .hp26-db-right .hp26-qcard .hp26-qcard-s{ font-size:.7rem; }
@media (max-width:991px){ .hp26-detail .hp26-detail-bottom{ flex-wrap:wrap; } .hp26-detail .hp26-db-mid{ border-left:0; padding-left:0; } .hp26-detail .hp26-db-left{ flex:0 1 300px; } .hp26-detail .hp26-db-right{ flex:1 1 320px; } }

/* --- Task 34v (2026-07-14): desktop spacing (Clay) -- kill gallery 40px bottom margin on desktop so bottom row sits closer; add space between bottom row and footer. --- */
@media (min-width:768px){ .hp26-detail .product-gallery.m-b40{ margin-bottom:0; } }
.hp26-detail .content-inner-2{ padding-bottom:45px; }

/* --- Task 38 (2026-07-14): MOBILE fine-tune -> details-mockup-mobile1.png. CSS-only, appended last so it wins on <=767. Items: (1) container ~2px bleed; (2) finance banner flush on top of photo; (3) smaller gallery arrows; (4) less padding on detail wrap; (5) bottom strip reflows: description -> colors/CARFAX -> Ask/Trade/Share, no bordered box. --- */
@media (max-width:767px){
  /* (1) container near edge-to-edge (2px); neutralize bootstrap container/row/col gutters */
  .hp26-detail .content-inner-2 > .container{ max-width:100%; width:100%; padding-left:2px; padding-right:2px; }
  .hp26-detail .content-inner-2 .row{ margin-left:0; margin-right:0; }
  .hp26-detail .content-inner-2 .row > [class*="col-"]{ padding-left:0; padding-right:0; }
  /* (2) finance banner flush on top of photo */
  .hp26-detail .hp26-detail-topwrap{ max-width:100%; width:100%; padding:0; }
  .hp26-detail .content-inner-2{ padding-top:0; padding-bottom:24px; }
  .hp26-detail .product-gallery.m-b40{ margin-bottom:14px; }
  /* (3) smaller gallery arrows + count overlay */
  .hp26-detail .sync1 .hp26-gnav{ width:32px; height:32px; margin-top:-16px; border-width:1.5px; }
  .hp26-detail .sync1 .hp26-gnav:after{ font-size:13px; }
  .hp26-detail .sync1 .swiper-button-prev.hp26-gnav{ left:8px; }
  .hp26-detail .sync1 .swiper-button-next.hp26-gnav{ right:8px; }
  .hp26-detail .hp26-gallery-count{ top:10px; left:10px; font-size:12px; padding:3px 9px; }
  /* (4) less padding on the detail wrap */
  .hp26-detail .vehicle-detail-card{ padding:14px; border-radius:12px; }
  /* (5) bottom strip reflow: description first, then colors/CARFAX, then Ask/Trade/Share; drop desktop bordered box, keep modest side inset */
  .hp26-detail .hp26-detail-bottom{ flex-direction:column; border:0; border-radius:0; padding:0 14px; margin-top:14px; gap:16px; }
  .hp26-detail .hp26-db-mid{ order:1; border-left:0; padding-left:0; }
  .hp26-detail .hp26-db-left{ order:2; flex-basis:auto; }
  .hp26-detail .hp26-db-right{ order:3; flex-basis:auto; }
  .hp26-detail .hp26-db-right .hp26-detail-quick{ gap:8px; }
}

/* --- Task 38b (2026-07-14): MOBILE refinements (Clay review of 38). CSS-only, appended last, mobile-only. (1)&(2) ext/int colors -> inline w/ bullet like the blue spec row, no doc icon, lighter weight; (3) pull the bottom block INSIDE the main card wrapper -- open card bottom + continue same border down through the strip so photo -> ONE continuous card. Desktop (>=768) untouched. --- */
@media (max-width:767px){
  /* neutralize ALL containers inside detail body (nesting-agnostic) so card+strip align */
  .hp26-detail .content-inner-2 .container{ max-width:100%; width:100%; padding-left:0; padding-right:0; margin-left:0; margin-right:0; }
  /* (3) merge: open the card's bottom, then continue the border through the strip */
  .hp26-detail .vehicle-detail-card{ margin:0 2px; padding:14px 14px 8px; border-radius:12px 12px 0 0; border-bottom:0; margin-bottom:0; }
  .hp26-detail .hp26-detail-bottom{ margin:0 2px; padding:8px 14px 14px; border:1px solid #3a4753; border-top:0; border-radius:0 0 12px 12px; margin-top:0; gap:14px; }
  /* (1)&(2) colors inline w/ blue bullet, no icon, lighter */
  .hp26-detail .hp26-db-idblock{ gap:0; }
  .hp26-detail .hp26-db-idblock .hp26-db-icon{ display:none; }
  .hp26-detail .hp26-db-left .vehicle-meta-list{ display:flex; flex-wrap:wrap; align-items:center; font-weight:500; margin:0; }
  .hp26-detail .hp26-db-left .vehicle-meta-list li{ display:inline-block; }
  .hp26-detail .hp26-db-left .vehicle-meta-list li:not(:last-child)::after{ content:"\2022"; margin:0 8px; color:#01A6F6; font-weight:400; }
}

/* --- Task 38c (2026-07-14): status/flag tweaks (Clay, BOTH desktop+mobile, NOT media-scoped). Root cause: .hp26-detail .content-inner-2 * {color:#fff} (scaffold) whitewashes theme colors. (1) reduced flag -> black text on its yellow bg; (2) SALE PENDING -> filled green badge, centered, rounded to match the .hp26-cta buttons below. Green #03BB24 = theme pending green (tunable). --- */
.hp26-detail .vehicle-header .vehicle-flag-reduced{ color:#000; }
.hp26-detail .vehicle-pricing .vehicle-status.status-pending{ display:flex; align-items:center; justify-content:center; width:100%; padding:14px 18px; border-radius:10px; background:#03BB24; color:#fff; font-weight:700; font-size:1.02rem; letter-spacing:.02em; line-height:1.1; text-align:center; margin:0 0 4px; }
/* --- Task 40 (2026-07-16): DETAIL Allen fine-tune pass 1 (reply to sent page). Paired with vehiclesDetail26.php markup edits, one atomic write. Note: Task 34s/34u/38b .hp26-db-left + .vehicle-meta-list rules now dead (block removed) -- left in place, harmless. --- */
/* (a) price disclaimer under the 3 boxes: spec-line size, blue, 8px below */
.hp26-detail .vehicle-price-disclaimer{ font-size:.82rem; color:#01A6F6; margin:8px 0 0; line-height:1.3; }
/* (b) VIN + Stock# same font size (match VIN .9rem) */
.hp26-detail .vehicle-idrow-stock{ font-size:.9rem; }
/* (c) ReCar-price standout: value 700 + a hair bigger; box bg+border lighter/brighter; label .73rem + neon light-blue (tunable) */
.hp26-detail .vehicle-price-box.price-main .price-value{ font-weight:700; font-size:1.45rem; }
.hp26-detail .vehicle-price-box.price-main{ background:linear-gradient(180deg,#4a5a68 0%,#33414d 100%); border-color:#6a7c8b; }
.hp26-detail .vehicle-price-box.price-main .price-label{ font-size:.73rem; color:#7fd8ff; font-weight:700; }
/* (e) remove bottom Ask/Trade/Share on DESKTOP only (kept on mobile - top set hidden there) */
@media (min-width:768px){ .hp26-detail .hp26-db-right{ display:none; } }
/* (f) desktop: description full-width in the bordered bottom box (left removed, right hidden) - drop old vertical rule; tie up line-height + weight */
@media (min-width:768px){ .hp26-detail .hp26-db-mid{ flex:1 1 auto; border-left:0; padding-left:0; } }
.hp26-detail .hp26-db-mid .vehicle-description{ line-height:1.38; font-weight:500; }
/* (g) CARFAX moved below Call/Text inside the detail card */
.hp26-detail .vehicle-detail-card .hp26-card-carfax{ margin-top:16px; text-align:center; }
.hp26-detail .vehicle-detail-card .hp26-card-carfax img{ max-width:220px; height:auto; }
/* --- Task 40b (2026-07-16): Clay tweaks to pass 1 --- */
/* (1) carfax in card: drop the 220px cap -> fill the card (max-width:100% = no overflow) */
.hp26-detail .vehicle-detail-card .hp26-card-carfax img{ max-width:100%; }
/* (2) ReCar price label was wrapping to 2 lines -> .7rem */
.hp26-detail .vehicle-price-box.price-main .price-label{ font-size:.7rem; }
/* (3) ReCar price value: keep ~1.4rem but shrink the $ so a 6-digit price fits; give the main box a bit more width so the number stays inside its background */
.hp26-detail .vehicle-price-box.price-main{ flex-grow:1.3; }
.hp26-detail .vehicle-price-box.price-main .price-value{ font-size:1.4rem; }
.hp26-detail .vehicle-price-box.price-main .price-value .hp26-cur{ font-size:.62em; vertical-align:baseline; margin-right:1px; }
@media (max-width:575px){ .hp26-detail .vehicle-price-box.price-main .price-value{ font-size:1.15rem; } }
/* (4) fine-print disclaimer -> white (was blue #01A6F6) */
.hp26-detail .vehicle-price-disclaimer{ color:#fff; }
/* --- Task 40c (2026-07-16): small $ on Retail + You Save too (generalize .hp26-cur to all 3 boxes) --- */
.hp26-detail .vehicle-price-box .price-value .hp26-cur{ font-size:.62em; vertical-align:baseline; margin-right:1px; }

/* ============================================================
   Task 21 (Phase 3) -- Interior pages dark pass  [.hp26-int]
   Shared "black + readable, no restyle" scope for interior
   content pages. Header/nav/footer dark carry over from the
   shared .hp26-dark rules; this only makes page CONTENT readable.
   Blue buttons/accents left as-is (Allen: blue can stay).
   Applied via <body class="theme-rounded hp26-dark hp26-int">.
   First page: about26.php (pattern-setter, 2026-07-22).
   ============================================================ */
.hp26-int .page-content.bg-white { background:#000 !important; }
/* inside-page banner -> dark art */
.hp26-int .dlab-bnr-inr.style-1 { background-image: url('/images/inside-bk-dark.webp') !important; border-bottom: 2px solid #323232; }
.hp26-int .content-inner,
.hp26-int .content-inner-1,
.hp26-int .content-inner-2 { background:transparent !important; }
.hp26-int .content-inner { padding-bottom: 50px; }

.hp26-int .page-content,
.hp26-int .page-content p,
.hp26-int .page-content li,
.hp26-int .page-content h1,
.hp26-int .page-content h2,
.hp26-int .page-content h3,
.hp26-int .page-content h4,
.hp26-int .page-content h5,
.hp26-int .page-content h6,
.hp26-int .page-content .title,
.hp26-int .page-content .post-title,
.hp26-int .page-content .sub-title,
.hp26-int .page-content strong { color:#fff; }

/* keep the blue accent sub-titles blue */
.hp26-int .page-content .text-primary { color:#01A6F6 !important; }

/* bordered content boxes: transparent bg, subtle light border */
.hp26-int .icon-bx-wraper.bx-style-1 { background:transparent; border-color:rgba(255,255,255,.18); }

/* tabs readable on dark, blue active */
.hp26-int .nav-tabs.style-1 { background-color:#111; }
.hp26-int .nav-tabs.style-1 .nav-link { color:#CCF1FF; }
.hp26-int .nav-tabs.style-1 .nav-link.active { color:#fff; }

/* content links (not buttons) pale blue -> bright on hover */
.hp26-int .page-content a:not(.btn) { color:#CCF1FF; }
.hp26-int .page-content a:not(.btn):hover { color:#01A6F6; }

/* team cards: name/title light */
.hp26-int .dlab-team .dlab-name,
.hp26-int .dlab-team .dlab-name a,
.hp26-int .dlab-team .dlab-content p { color:#fff; }

/* list-item accent icons */
.hp26-int .page-content .icon-bx-wraper li i { color:#01A6F6; }
/* ============================================================
   hp26 Task 21g — dark readability for bespoke interior pages
   title-center26 (.hp26-title, titlecenter25.css) + finance26 (.hp26-fin, finance25.css)
   Darken light cards, lighten on-black headings. Black + readable.
   ============================================================ */
.hp26-title .hero-content{background:rgba(10,12,16,.85);border-color:#2a3a50;}
.hp26-title .hero-content .lead{color:#d0d4dc;}
.hp26-title .cardCDG{background:#16181d;border-color:#2a2d34;color:#e8eaed;}
.hp26-title .cardCDG h3{color:#8ab4f8;}
.hp26-title .cardCDG p,.hp26-title .cardCDG li,.hp26-title .cardCDG .muted{color:#c8ccd4;}
.hp26-title .cardCDG strong{color:#fff;}
.hp26-title .note{background:#101216;border-left-color:#0071e3;color:#d5d8de;}
.hp26-title .note strong{color:#8ab4f8;}
.hp26-title .note--warn{background:#2a2410;border-left-color:#e0a800;color:#f0e6c8;}

.hp26-fin #finance-service-header .page-header h1{color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.6);}
.hp26-fin #finance-service-header .page-header p{color:#f0f0f0;text-shadow:0 1px 4px rgba(0,0,0,.6);}
.hp26-fin #finance-service-contracts .section-title{color:#fff;}
.hp26-fin #finance-service-contracts .section-label{color:#8ab4f8;}
.hp26-fin #finance-service-contracts .section-subtitle{color:#c8ccd4;}
.hp26-fin #finance-service-contracts .finance-pill{background:#16181d;color:#e8eaed;border:1px solid #2a2d34;}
.hp26-fin #finance-service-contracts .step-card,
.hp26-fin #finance-service-contracts .accordion-card,
.hp26-fin #finance-service-contracts .plan-card,
.hp26-fin #finance-service-contracts .feature-card{background:#16181d;border-color:#2a2d34;color:#e8eaed;}
.hp26-fin #finance-service-contracts .step-card h4,
.hp26-fin #finance-service-contracts .plan-card h4,
.hp26-fin #finance-service-contracts .plan-card .estimate,
.hp26-fin #finance-service-contracts .feature-card h4,
.hp26-fin #finance-service-contracts .accordion-title{color:#fff;}
.hp26-fin #finance-service-contracts .step-card p,
.hp26-fin #finance-service-contracts .plan-card p,
.hp26-fin #finance-service-contracts .feature-card ul,
.hp26-fin #finance-service-contracts .feature-card li,
.hp26-fin #finance-service-contracts .accordion-body p,
.hp26-fin #finance-service-contracts .finance-meta-inline{color:#c8ccd4;}
.hp26-fin #finance-service-contracts .tier-badge{background:#101216;border-color:#3a3d44;color:#d5d8de;}
.hp26-fin #finance-service-contracts .tier-badge strong{color:#fff;}
.hp26-fin #finance-service-contracts .plan-tag{background:#0f2e4a;color:#8ab4f8;}
.hp26-fin #finance-service-contracts .text-muted,
.hp26-fin #finance-service-contracts .disclaimer{color:#9aa0aa !important;}
.hp26-fin #finance-service-contracts hr{border-color:#2a2d34;}
.hp26-fin #finance-service-contracts .accordion-body{border-top-color:#2a2d34;}

/* === Task 21 Batch-2 review fixes (Clay 2026-07-23) === */
.hp26-int #paypal-button-container { max-width:450px; margin-left:auto; margin-right:auto; }   /* terms-benton26: center PayPal button group */
.hp26-int.hp26-terms .content-inner { padding-top:100px; padding-bottom:66px; }               /* terms-conditions26: page-specific padding */


/* === Task 21 buying-center26 dark (Clay 2026-07-23) — Offer Lane form to match finance26 === */
.hp26-bc .offer-lane{ --bg1:#0f1115; --bg2:#101216; --card:rgba(255,255,255,.04); --text:#e8eaed; --muted:#c8ccd4; --border:rgba(255,255,255,.12); }
.hp26-bc .offer-lane .hero{ background:linear-gradient(135deg, rgba(22,24,29,.95), rgba(1,112,170,.10)) !important; border-color:#2a2d34 !important; }
.hp26-bc .offer-lane h1{ color:#fff !important; }
.hp26-bc .offer-lane .sub{ color:#c8ccd4 !important; }
.hp26-bc .offer-lane .lane-pill{ background:#16181d !important; border-color:#2a2d34 !important; }
.hp26-bc .offer-lane fieldset{ background:#16181d !important; border-color:#2a2d34 !important; }
.hp26-bc .offer-lane legend{ background:#101216 !important; border-color:#2a2d34 !important; color:#8ab4f8 !important; }
.hp26-bc .offer-lane label{ color:#e8eaed !important; }
.hp26-bc .offer-lane input[type="text"],
.hp26-bc .offer-lane input[type="email"],
.hp26-bc .offer-lane input[type="tel"],
.hp26-bc .offer-lane input[type="number"],
.hp26-bc .offer-lane select,
.hp26-bc .offer-lane textarea{ background:#0d0f13 !important; background-color:#0d0f13 !important; border-color:#2a2d34 !important; color:#e8eaed !important; }
.hp26-bc .offer-lane input::placeholder,
.hp26-bc .offer-lane textarea::placeholder{ color:#7f8794 !important; }
.hp26-bc .offer-lane select option,
.hp26-bc .offer-lane select optgroup{ color:#f4f7ff !important; background:#1b2430 !important; }
.hp26-bc .offer-lane .hint,
.hp26-bc .offer-lane .small,
.hp26-bc .offer-lane .sticky-note,
.hp26-bc .offer-lane .vin-actions span{ color:#9aa0aa !important; }
.hp26-bc .offer-lane .divider{ background:rgba(255,255,255,.10) !important; }
.hp26-bc .offer-lane .chip{ background:#16181d !important; border-color:#2a2d34 !important; color:#e8eaed !important; }
.hp26-bc .offer-lane .secondary{ background:#16181d !important; border-color:#2a2d34 !important; color:#e8eaed !important; }
.hp26-bc .offer-lane .vin-status{ background:#16181d !important; border-color:#2a2d34 !important; color:#e8eaed !important; }
.hp26-bc .offer-lane .vin-status .pill{ background:#101216 !important; border-color:#2a2d34 !important; }
.hp26-bc .offer-lane .actions{ background:#16181d !important; border-color:#2a2d34 !important; }
.hp26-bc .offer-lane .sticky-bar{ background:rgba(16,18,22,.95) !important; }

/* ==========================================================================
   Task 31 (2026-08-05) - title-center26 relayout: stronger section separation
   on the black canvas. Clay ruled STAY BLACK (no white-bg flip).
   SCOPE: .hp26-title ONLY. css/titlecenter25.css is SHARED with the LIVE white
   title-center.php - never edit that file. The live page carries neither
   .hp26-title nor .hp26-dark and does not load hp2026.css at all, so nothing
   in this block can reach it. Card language mirrors vehiclesDetail26.
   ========================================================================== */

/* 1. palette - redefine titlecenter25's :root vars inside the dark scope.
      .hp26-title sits on <body>, so body{background:var(--bg)} resolves here. */
body.hp26-title{
  --bg:#000;
  --cardCDG:#16181d;
  --ink:#e8eaed;
  --muted:#a8aeb8;
  --brand:#01A6F6;
  --brand-600:#01A6F6;
  --brand-700:#01A6F6;
  --shadow:0 18px 40px -18px rgba(0,0,0,.7);
  background:#000 !important;
}

/* 2. H1 - titlecenter25 paints it as a GRADIENT TEXT FILL, so a plain color
      does nothing. background-clip + -webkit-text-fill-color must both reset. */
.hp26-title .hero-content h1{
  background:none !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
  -webkit-text-fill-color:#fff !important;
  color:#fff !important;
  text-shadow:0 2px 12px rgba(0,0,0,.65);
}

/* 3. de-overlap the hero card. titlecenter25 hangs .hero-cardCDG BELOW its own
      section (bottom:-70px / -90px) - the main reason the bands read as merged.
      Replace the absolute overlap with a real 2-col grid, card in normal flow. */
.hp26-title .hero{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 340px;
  align-items:center;
  gap:2rem;
  text-align:left !important;
  padding:3.5rem 1.25rem !important;
  background-attachment:scroll !important;
  background-image:linear-gradient(180deg,rgba(0,0,0,.74),rgba(0,0,0,.90)),url('/images/title-center-heading2.jpg') !important;
  border-bottom:1px solid #2a2d34 !important;
}
.hp26-title .hero-content{
  background:rgba(10,12,16,.90) !important;
  border:1px solid #2a2d34 !important;
  border-radius:12px !important;
  padding:2rem !important;
  box-shadow:none !important;
  max-width:none !important;
  margin:0 !important;
  text-align:left !important;
}
.hp26-title .hero-content .lead{
  color:#c8ccd4 !important;
  margin:1rem 0 0 !important;
  max-width:none !important;
}
.hp26-title .hero-cardCDG{
  position:static !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  transform:none !important;
  width:auto !important;
  margin:0 !important;
  background:#101216 !important;
  border:1px solid #2a2d34 !important;
  border-radius:12px !important;
  padding:1.35rem !important;
  box-shadow:none !important;
  color:#c8ccd4 !important;
  z-index:auto !important;
}
.hp26-title .hero-cardCDG h3{
  color:#fff !important;
  font-size:.95rem !important;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin:0 0 .9rem !important;
  padding-bottom:.65rem;
  border-bottom:1px solid #2a2d34;
}
.hp26-title .hero-cardCDG .dot{ background:#01A6F6 !important; }

@media (max-width:991px){
  .hp26-title .hero{
    grid-template-columns:minmax(0,1fr) !important;
    gap:1.25rem;
    padding:2.5rem 1.25rem !important;
  }
  .hp26-title .hero-cardCDG{ width:auto !important; margin:0 !important; }
}

/* 4. cards - this is the actual "better separation between sections" ask */
.hp26-title .grid{ gap:1.5rem !important; }
.hp26-title .cardCDG{
  background:#16181d !important;
  border:1px solid #2a2d34 !important;
  border-radius:12px !important;
  padding:1.5rem !important;
  box-shadow:none !important;
  color:#e8eaed !important;
}
.hp26-title .cardCDG h3{
  position:relative;
  color:#fff !important;
  font-size:1.2rem !important;
  font-weight:700 !important;
  margin:0 0 1rem !important;
  padding-bottom:.75rem !important;
  border-bottom:1px solid #2a2d34;
}
.hp26-title .cardCDG h3::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width:46px;
  height:2px;
  background:#01A6F6;
}
.hp26-title .cardCDG p,
.hp26-title .cardCDG li,
.hp26-title .cardCDG .muted{ color:#c8ccd4 !important; }
.hp26-title .cardCDG strong{ color:#fff !important; }
.hp26-title ul.clean li::marker{ color:#01A6F6; }

/* 5. notes */
.hp26-title .note{
  background:#101216 !important;
  border-left:4px solid #01A6F6 !important;
  border-radius:10px !important;
  box-shadow:none !important;
  color:#d5d8de !important;
  margin-top:1.15rem !important;
}
.hp26-title .note strong{ color:#fff !important; }
.hp26-title .note--warn{
  background:#1e1a0c !important;
  border-left-color:#e0a800 !important;
  color:#f0e6c8 !important;
}
/* end Task 31 */
/* ==========================================================================
   Task 31b (2026-08-05) - title-center26 fine-tune (Clay review round)
   (1) hero: drop the black overlay so the light blue image reads through
   (2) page: WHITE canvas + soft shadows for depth; card SURFACE stays DARK
       (Clay 2026-08-05: "cards back to the previous version while keeping the
       background and shadow how it is") - so dark cards float on white.
   SCOPE: .hp26-title ONLY. title-center26.php is the ONLY page carrying that
   hook (verified: grep -l hp26-title -> 1 file). This block deliberately does
   NOT touch .hp26-int (16 interior dark pages) or .hp26-dark, so no other page
   is affected. css/titlecenter25.css is SHARED with the LIVE white
   title-center.php and is NEVER edited; the live page carries no hp26-* hook
   and never loads this file.
   ORDER MATTERS: page-content re-inking comes FIRST, hero re-assertion AFTER,
   because .hero sits inside .page-content but keeps its dark panel.
   ========================================================================== */

/* 1. palette - flip titlecenter25's :root vars light so its own var()-driven
      rules follow automatically (the dark-pass pattern, inverted). */
body.hp26-title{
  --bg:#fff;
  --cardCDG:#fff;
  --ink:#14171c;
  --muted:#5b6270;
  --brand:#01A6F6;
  --brand-600:#0286c6;
  --brand-700:#0286c6;
  --shadow:0 10px 28px -10px rgba(16,24,40,.16), 0 2px 6px -1px rgba(16,24,40,.06);
  background:#fff !important;
  color:#14171c !important;
}

/* 2. page canvas white - beats .hp26-int (#000 !important) and .hp26-dark by
      later-in-file order at equal specificity. .hp26-int is NOT edited. */
.hp26-title .page-content.bg-white{ background:#fff !important; }

/* 3. re-ink everything .hp26-int forced to #fff */
.hp26-title .page-content,
.hp26-title .page-content p,
.hp26-title .page-content li,
.hp26-title .page-content h1,
.hp26-title .page-content h2,
.hp26-title .page-content h3,
.hp26-title .page-content h4,
.hp26-title .page-content h5,
.hp26-title .page-content h6,
.hp26-title .page-content .title,
.hp26-title .page-content .post-title,
.hp26-title .page-content .sub-title{ color:#14171c !important; }
.hp26-title .page-content strong{ color:#000 !important; }
.hp26-title .page-content .muted{ color:#5b6270 !important; }
.hp26-title .page-content a:not(.btn){ color:#0286c6 !important; }
.hp26-title .page-content a:not(.btn):hover{ color:#015d8a !important; }

/* 4. hero - black overlay REMOVED so the light blue art reads through.
      Task 31's grid / padding / text-align still apply (not re-declared). */
.hp26-title .hero{
  background-image:url('/images/title-center-heading2.jpg') !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  border-bottom:1px solid #e6e8ec !important;
}

/* 5. hero panels STAY dark over the light photo (Clay's call), lifted with a
      shadow. MUST follow rule 3 or the H1 goes dark-on-dark. */

/* 5a. FIX 2026-08-05 (Clay: "what to know box in heading has some black font on
       black background now, cant read it"). Rule 3 re-inks .page-content li/p/span
       to #14171c for the WHITE canvas, and both hero panels live inside
       .page-content - so their list text went black-on-black while only <strong>
       stayed white (it had its own rule). Re-light ALL text inside the two dark
       panels. Placed FIRST in section 5 so the h1 / .lead / strong / h3 rules
       below still win and keep their pure white. */
.hp26-title .hero-content,
.hp26-title .hero-content p,
.hp26-title .hero-content li,
.hp26-title .hero-content span,
.hp26-title .hero-cardCDG,
.hp26-title .hero-cardCDG ul,
.hp26-title .hero-cardCDG p,
.hp26-title .hero-cardCDG li,
.hp26-title .hero-cardCDG span{ color:#dfe3ea !important; }

.hp26-title .hero-content{
  background:rgba(12,16,22,.86) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow:0 18px 44px -16px rgba(0,0,0,.55) !important;
}
.hp26-title .hero-content h1{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}
.hp26-title .hero-content .lead{ color:#dfe3ea !important; }
.hp26-title .hero-content strong{ color:#fff !important; }
.hp26-title .hero-cardCDG{
  background:rgba(12,16,22,.90) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow:0 18px 44px -16px rgba(0,0,0,.55) !important;
  color:#dfe3ea !important;
}
.hp26-title .hero-cardCDG h3{
  color:#fff !important;
  border-bottom-color:rgba(255,255,255,.18) !important;
}
.hp26-title .hero-cardCDG strong{ color:#fff !important; }
.hp26-title .hero-cardCDG .dot{ background:#01A6F6 !important; }

/* 6. cards - DARK surface, reverted to the Task 31 look (Clay 2026-08-05),
      now floating on the white canvas with the 31b shadow kept unchanged. */
.hp26-title .grid{ gap:1.75rem !important; }
.hp26-title .cardCDG{
  background:#16181d !important;
  border:1px solid #2a2d34 !important;
  border-radius:14px !important;
  padding:1.75rem !important;
  color:#e8eaed !important;
  box-shadow:0 1px 2px rgba(16,24,40,.04), 0 10px 28px -8px rgba(16,24,40,.16) !important;
  transition:box-shadow .25s ease, transform .25s ease;
}
.hp26-title .cardCDG:hover{
  box-shadow:0 2px 4px rgba(16,24,40,.05), 0 18px 40px -10px rgba(16,24,40,.22) !important;
  transform:translateY(-2px);
}
.hp26-title .cardCDG h3{
  color:#fff !important;
  border-bottom:1px solid #2a2d34 !important;
}
.hp26-title .cardCDG p,
.hp26-title .cardCDG li{ color:#c8ccd4 !important; }
.hp26-title .cardCDG .muted{ color:#a8aeb8 !important; }
.hp26-title .cardCDG strong{ color:#fff !important; }
.hp26-title .cardCDG .dot{ background:#01A6F6 !important; }
.hp26-title ul.clean li::marker{ color:#01A6F6; }

/* 7. notes - dark again to match the reverted cards; shadow kept. */
.hp26-title .note{
  background:#101216 !important;
  border:1px solid #2a2d34 !important;
  border-left:4px solid #01A6F6 !important;
  border-radius:12px !important;
  box-shadow:0 1px 2px rgba(16,24,40,.04), 0 8px 20px -8px rgba(16,24,40,.12) !important;
  color:#d5d8de !important;
}
.hp26-title .note p{ color:#d5d8de !important; }
.hp26-title .note strong{ color:#fff !important; }
.hp26-title .note--warn{
  background:#2a2410 !important;
  border-color:#4a3f18 !important;
  border-left-color:#e0a800 !important;
  color:#f0e6c8 !important;
}
.hp26-title .note--warn p{ color:#f0e6c8 !important; }
.hp26-title .note--warn strong{ color:#fff !important; }
/* 7a. FIX 2026-08-05 - note--warn is a <p class="note note--warn"> (class on the P
       ITSELF, not a wrapper), so the descendant rule above can never match it, and
       the element-level .note--warn rule (0,2,0) loses to .cardCDG p (0,2,1).
       Element-qualify to win, plus a card-scoped variant for certainty. Measured
       symptom: cream #f0e6c8 was rendering as grey #c8ccd4 (readable at 9.6:1,
       so this is a tint correction, not a contrast fix). */
.hp26-title p.note--warn,
.hp26-title .cardCDG p.note--warn{ color:#f0e6c8 !important; }
.hp26-title p.note--warn strong,
.hp26-title .cardCDG p.note--warn strong{ color:#fff !important; }

/* 8. phone - keep the section separation the customer originally asked for */
@media (max-width:991px){
  .hp26-title .hero{ background-position:center top !important; }
  .hp26-title .grid{ gap:1.25rem !important; }
  .hp26-title .cardCDG{ padding:1.35rem !important; }
  .hp26-title .cardCDG:hover{ transform:none; }
}
/* end Task 31b */

/* ===================================================================
   Task 32 (Phase 4) - about26 whole-page redesign   [.hp26-about]
   Customer: "the font is all different types and stuff in the sections...
   i want to keep all this info but i want it better."
   Clay mockup 2026-08-06 (Task 32b): every card carries a FADED PHOTO on
   one side, ALTERNATING right / left / right / left, and the copy is pushed
   fully clear of the photo box so text never begins inside the fade.
   SCOPE: .hp26-about only - a body hook carried by about26.php alone.
   .hp26-int (16 interior pages) and .hp26-dark are NOT edited.
   NOTE: .hp26-int .page-content {h1..h6,p,li,strong} sets color:#fff at
   (0,2,1), so every colour here is !important to win at (0,2,0).
   =================================================================== */
.hp26-about{ --ab-card:#16181d; --ab-line:#2a2d34; --ab-accent:#01A6F6; --ab-body:#c8ccd4; }

/* 1. band rhythm */
.hp26-about .content-inner{ padding-top:60px; padding-bottom:60px; }
.hp26-about .ab26-stack{ display:flex; flex-direction:column; gap:1.75rem; }

/* 2. the card - border + radius IS the section separation.
      Padding lives on .ab26-body, NOT here, so the body's % padding and the
      photo's % width are both measured against the same box (the card). */
.hp26-about .ab26-card{
  position:relative; overflow:hidden; min-height:300px; padding:0;
  background:var(--ab-card); border:1px solid var(--ab-line);
  border-radius:12px; }

/* 3. the faded photo panel - half the card, alternating side */
.hp26-about .ab26-photo{
  position:absolute; top:0; bottom:0; width:52%; z-index:0; pointer-events:none; }
.hp26-about .ab26-ph-right .ab26-photo{ right:0; }
.hp26-about .ab26-ph-left  .ab26-photo{ left:0; }
/* Task 32c: the img is FULLY OPAQUE - every bit of fading is now done by the
   ::after gradient below, which Clay asked to leave exactly as-is. The
   <=991px block resets this to .55 for the phone band; that is deliberate. */
.hp26-about .ab26-photo img{
  display:block; width:100%; height:100%; object-fit:cover; opacity:1; }
/* the fade runs TOWARD the copy and is fully solid card-colour by the time it
   reaches the photo's inner edge. Since Task 32c the copy overlaps the photo's
   inner half, so this gradient is the ONLY thing keeping that text legible. */
.hp26-about .ab26-photo::after{
  content:""; position:absolute; top:0; right:0; bottom:0; left:0; }
.hp26-about .ab26-ph-right .ab26-photo::after{
  background:linear-gradient(to left,
    rgba(22,24,29,0) 0%, rgba(22,24,29,.42) 45%, rgba(22,24,29,.9) 84%, #16181d 100%); }
.hp26-about .ab26-ph-left .ab26-photo::after{
  background:linear-gradient(to right,
    rgba(22,24,29,0) 0%, rgba(22,24,29,.42) 45%, rgba(22,24,29,.9) 84%, #16181d 100%); }

/* 4. the copy - Task 32c: DELIBERATE, CONTROLLED OVERLAP (Clay 2026-08-06).
      The photo box stays 52% wide; only this padding narrows to 25%, so the
      copy runs across the photo's inner half and stops 24px short of the
      OUTER 25% band - and that band stays uncovered, reading as a real photo.
      Clay: "text appears to be over the top of the image, but only really
      over the part that's faded back more. Part of the image is uncovered."
      DO NOT re-pair these two percentages. The superseded 52%/52% pairing
      guaranteed ZERO overlap; the overlap is now the intended design, and the
      percentage below is what sets the width of the uncovered band.
      ** THE TWO SIDES ARE DELIBERATELY ASYMMETRIC: right 25%, left 32%. **
      Clay 2026-08-06, after seeing it live: "the left photos need a little
      more padding to keep all text legible." A left-side card's copy begins
      further along its gradient than a right-side card's copy ends, so the
      same number does not buy the same veil on both sides. Do NOT "tidy"
      these back to one value - the mismatch IS the fix. */
.hp26-about .ab26-body{ position:relative; z-index:1; padding:2rem 2.25rem; }
.hp26-about .ab26-ph-right .ab26-body{ padding-right:calc(25% + 1.5rem); }
.hp26-about .ab26-ph-left  .ab26-body{ padding-left:calc(32% + 1.5rem); }

/* 5. ONE type scale: one card-heading size, one body size, one list size */
.hp26-about .ab26-h{
  font-family:'Oswald',sans-serif; font-weight:600; font-size:1.75rem;
  line-height:1.25; letter-spacing:.01em; color:#fff !important;
  margin:0 0 1.1rem; }
.hp26-about .ab26-p{
  font-family:'Montserrat',sans-serif; font-size:1rem; line-height:1.7;
  color:var(--ab-body) !important; margin:0 0 1.05rem; }
.hp26-about .ab26-p:last-child{ margin-bottom:0; }
.hp26-about .ab26-p strong{ color:#fff !important; font-weight:600; }
.hp26-about .ab26-lead{ color:#fff !important; font-weight:600; }
.hp26-about .ab26-list{ list-style:none; margin:0 0 1.05rem; padding:0; }
.hp26-about .ab26-list:last-child{ margin-bottom:0; }
.hp26-about .ab26-list li{
  position:relative; padding-left:2rem; margin-bottom:.7rem;
  font-family:'Montserrat',sans-serif; font-size:1rem; line-height:1.6;
  color:var(--ab-body) !important; }
.hp26-about .ab26-list li:last-child{ margin-bottom:0; }
.hp26-about .ab26-list li i{
  position:absolute; left:0; top:.15rem; font-size:1.15rem;
  color:var(--ab-accent) !important; }

/* 6. CTA - Phase 4 CTA blue */
.hp26-about .ab26-cta{
  display:inline-flex; align-items:center; gap:.6rem;
  background:#1a72f0; color:#fff !important; text-decoration:none;
  font-family:'Oswald',sans-serif; font-weight:600; font-size:1rem;
  letter-spacing:.02em; padding:.85rem 1.5rem; border-radius:8px;
  margin-top:.3rem; }
.hp26-about .ab26-cta:hover{ background:#0f5fd6; color:#fff !important; }

/* 7. Meet Our Team band - same type scale, hairline separates the band.
      DORMANT while recar_team_members has 0 rows; styles the band on the
      first record without another edit. */
.hp26-about .content-inner-2{
  border-top:1px solid var(--ab-line); padding-top:60px; padding-bottom:30px; }
.hp26-about .content-inner-2 .section-head .sub-title{
  display:inline-block; font-family:'Montserrat',sans-serif; font-size:.75rem;
  font-weight:700; text-transform:uppercase; letter-spacing:.12em;
  color:#8ab4f8 !important; background:#101216; border-radius:4px;
  padding:.3rem .65rem; margin:0 0 .75rem; }
.hp26-about .content-inner-2 .section-head .title{
  font-family:'Oswald',sans-serif; font-weight:600; font-size:1.75rem;
  line-height:1.25; color:#fff !important; margin:0; }
.hp26-about .dlab-team.style-1{
  background:var(--ab-card); border:1px solid var(--ab-line);
  border-radius:12px; overflow:hidden; }
.hp26-about .dlab-team .dlab-content{ padding:1.1rem 1.25rem 1.35rem; }
.hp26-about .dlab-team .dlab-name{
  font-family:'Oswald',sans-serif; font-size:1.15rem; font-weight:600;
  color:#fff !important; margin:0 0 .2rem; }
.hp26-about .dlab-team .dlab-content p{
  font-family:'Montserrat',sans-serif; font-size:.95rem; line-height:1.5;
  color:var(--ab-body) !important; margin:0 0 .5rem; }
.hp26-about .dlab-team .dlab-content a{ color:var(--ab-accent) !important; }

/* 8. phone - the photo becomes a full-width band ABOVE the copy and the
      overlap goes away entirely, because copy sitting on a photo is the thing
      the customer objected to. No side padding shift at this width. */
@media (max-width:991px){
  .hp26-about .content-inner{ padding-top:36px; padding-bottom:36px; }
  .hp26-about .content-inner-2{ padding-top:36px; }
  .hp26-about .ab26-stack{ gap:1.25rem; }
  .hp26-about .ab26-card{ min-height:0; }
  .hp26-about .ab26-photo,
  .hp26-about .ab26-ph-right .ab26-photo,
  .hp26-about .ab26-ph-left .ab26-photo{
    position:relative; width:auto; height:165px; left:auto; right:auto; }
  .hp26-about .ab26-photo img{ opacity:.55; }
  .hp26-about .ab26-ph-right .ab26-photo::after,
  .hp26-about .ab26-ph-left .ab26-photo::after{
    background:linear-gradient(to bottom,
      rgba(22,24,29,0) 28%, rgba(22,24,29,.85) 78%, #16181d 100%); }
  .hp26-about .ab26-body,
  .hp26-about .ab26-ph-right .ab26-body,
  .hp26-about .ab26-ph-left .ab26-body{ padding:1.35rem 1.25rem 1.5rem; }
  .hp26-about .ab26-h,
  .hp26-about .content-inner-2 .section-head .title{ font-size:1.45rem; }
}
/* end Task 32 */

/* === Row 30 - FAQ accordion (recar2026/faq.php + homepage), spec 9.4 markup. Dark-theme scoped. === */
.hp26-dark .faq-wrap{max-width:900px;}
.hp26-dark .faq-jump{display:flex;flex-wrap:wrap;gap:.5rem .5rem;margin:0 0 2rem;padding:0;list-style:none;}
.hp26-dark .faq-jump a{display:inline-block;padding:.35rem .8rem;border:1px solid #2a2d34;border-radius:999px;background:#16181d;color:#e8eaed;font-size:.9rem;text-decoration:none;}
.hp26-dark .faq-jump a:hover,.hp26-dark .faq-jump a:focus-visible{border-color:#01a6f6;color:#fff;}
.hp26-dark .faq-section{margin:0 0 2.5rem;}
.hp26-dark .faq-section h2{font-size:1.45rem;color:#fff;margin:0 0 .5rem;padding-bottom:.5rem;border-bottom:2px solid #01a6f6;text-wrap:balance;}
.hp26-dark .faq-item{border-bottom:1px solid #2a2d34;}
.hp26-dark .faq-q{margin:0;font-size:1.05rem;line-height:1.35;font-weight:600;}
.hp26-dark .faq-q button{all:unset;box-sizing:border-box;display:flex;width:100%;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1rem 0;color:#fff;cursor:pointer;font:inherit;text-align:left;text-wrap:balance;}
.hp26-dark .faq-q button:after{content:"+";flex:0 0 auto;font-size:1.5rem;line-height:1;color:#01a6f6;}
.hp26-dark .faq-q button[aria-expanded="true"]:after{content:"\2212";}
.hp26-dark .faq-q button:hover{color:#ccf1ff;}
.hp26-dark .faq-q button:focus-visible{outline:2px solid #01a6f6;outline-offset:2px;}
.hp26-dark .faq-a{padding:0 2.5rem 1.1rem 0;color:#c8ccd4;}
.hp26-dark .faq-a p{margin:0 0 .75rem;color:#c8ccd4;text-wrap:pretty;}
.hp26-dark .faq-a p:last-child{margin-bottom:0;}
.hp26-dark .faq-a a{color:#01a6f6;}
.hp26-dark .faq-more{margin:1.5rem 0 0;color:#c8ccd4;}
.hp26-dark .faq-more a{color:#01a6f6;}
.hp26-dark .hp26-home-faq .section-head{margin-bottom:1rem;}
.hp26-dark .hp26-home-faq .faq-more .btn{color:#fff;}
/* end Row 30 */

/* ===== Row 36: footer navigation (recar2026 fork only; L7) ===== */
#footer .footer-nav{padding:6px 0 28px;}
.recar-fnav-title{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin:0 0 12px;}
.recar-fnav-list{list-style:none;margin:0;padding:0;}
.recar-fnav-list li{margin:0 0 8px;}
.recar-fnav-list a{font-size:.9rem;text-decoration:none;}
.hp26-dark #footer .recar-fnav-title{color:#fff;}
.hp26-dark #footer .recar-fnav-list a{color:#c8ccd4;}
.hp26-dark #footer .recar-fnav-list a:hover{color:#01a6f6;}
@media (max-width:991px){.recar-fnav-col{margin-bottom:20px;}}
/* end Row 36 */

/* ===== Row 37: sitewide FAQ sprinkle ===== */
.hp26-dark .hp26-sprinkle-faq{padding:60px 0;}
.hp26-dark .hp26-sprinkle-faq .section-head{margin-bottom:1rem;}
.hp26-dark .hp26-sprinkle-faq .faq-more .btn{color:#fff;}
/* end Row 37 */

/* ===== Row 31 shell + body background fix (Clay 2026-09-04) ===== */
body.hp26-dark{background:#000;}
.hp26-dark .hp26-sprinkle-testimonials{padding:40px 0 0;}
.hp26-dark .rc-review{border:1px solid #2a2d34;border-radius:12px;padding:1.25rem 1.5rem;margin:0 0 1rem;background:#16181d;}
.hp26-dark .rc-review blockquote{margin:0 0 .75rem;color:#e8eaed;border:0;padding:0;font-size:1rem;}
.hp26-dark .rc-review .rc-review-src{color:#a8aeb8;font-size:.85rem;margin:0;}
.hp26-dark .hp26-testimonials-list{max-width:860px;}
.hp26-dark .hp26-sprinkle-testimonials .faq-more a,.hp26-dark .hp26-testimonials-list .faq-more a{color:#01a6f6;}
/* end Row 31 */

/* ===== Row 32: Learn More blog + homepage h1 fix (Clay 2026-09-04) ===== */
.hp26-dark .page-content.bg-white{background:#000 !important;}
.hp26-home-h1{text-align:center;}
.hp26-home-h1 h1{font-size:1.5rem;line-height:1.4;margin:0;color:#fff !important;background:none !important;-webkit-background-clip:border-box !important;background-clip:border-box !important;-webkit-text-fill-color:#fff !important;text-shadow:none;display:inline-block;}
.hp26-dark .lm-col{margin-bottom:1.5rem;}
.hp26-dark .lm-card{border:1px solid #2a2d34;border-radius:12px;padding:1.5rem;background:#16181d;height:100%;}
.hp26-dark .lm-card h2{font-size:1.15rem;line-height:1.4;margin:0 0 .75rem;}
.hp26-dark .lm-card h2 a{color:#fff;}
.hp26-dark .lm-card h2 a:hover{color:#01a6f6;}
.hp26-dark .lm-card p{color:#c8ccd4;margin:0 0 .75rem;}
.hp26-dark .lm-card .lm-more{color:#01a6f6;font-size:.9rem;}
.hp26-dark .lm-body{max-width:860px;color:#c8ccd4;}
.hp26-dark .lm-body h2{font-size:1.35rem;margin:2rem 0 .75rem;color:#fff;}
.hp26-dark .lm-body p{color:#c8ccd4;}
.hp26-dark .lm-body a{color:#01a6f6;}
.hp26-dark .lm-back{margin-top:2rem;}
/* end Row 32 */
/* ===== Row 38 (Clay 2026-09-04): inventory H1 size + breadcrumbs match footer links ===== */
.hp26-inv-h1{font-size:1.5rem;line-height:1.4;}
.hp26-dark .rc-crumb li{color:#c8ccd4;font-size:.9rem;}
.hp26-dark .rc-crumb a{color:#c8ccd4;font-size:.9rem;text-decoration:none;}
.hp26-dark .rc-crumb a:hover{color:#01a6f6;}
.hp26-dark .rc-crumb [aria-current]{color:#fff;opacity:1;}
/* end Row 38 */
/* Row 21b: inventory filter-page intros (fork only, L7) */
.hp26-dark .hp26-inv-intro{color:#c8ccd4;max-width:1275px;font-size:.95rem;line-height:1.7;}
.hp26-dark .hp26-inv-intro p{margin-bottom:12px;}
/* end Row 21b */