/* GAR brand palette: black, charcoal, gunmetal, grey, white + logo blue (orange kept only for the roadside emergency button) */
:root{
  --gar-bg:#050506; --gar-bg-alt:#121417; --gar-card:#1b1e23; --gar-border:#2c3136;
  --gar-chrome:#b4bac1; --gar-text:#f5f6f7;
  --gar-blue:#0566d1; --gar-blue-bright:#0499f7; --gar-blue-light:#5cc0ff;
  --gar-sunset:#f67b16; --gar-sunset-hover:#ff9a45; --gar-on-sunset:#1a0d02;
}
/* Roadside emergency button in sunset orange */
.roadside-call{background:var(--gar-sunset)!important;border-color:var(--gar-sunset-hover)!important;color:var(--gar-on-sunset)!important;box-shadow:0 8px 28px rgba(246,123,22,.22)!important}
.roadside-call:hover{background:var(--gar-sunset-hover)!important}
.roadside-call svg{stroke:var(--gar-on-sunset)}
/* Request service = solid logo blue */
.hero-request{background:var(--gar-blue);border-color:var(--gar-blue-bright)}
.hero-request:hover{background:var(--gar-blue-bright);border-color:var(--gar-blue-light)}
/* Sunset accent carried down the page: small section labels */
.front .platform-eyebrow,
.front .location{color:var(--gar-blue-bright)!important}
.front .location i{background:var(--gar-blue-bright)!important;border-color:var(--gar-blue-bright)!important}
/* Mobile sticky roadside bar in sunset orange too */
.roadside-mobile-call{background:var(--gar-sunset)!important;color:var(--gar-on-sunset)!important;border-color:var(--gar-sunset-hover)!important}
.roadside-mobile-call *{color:var(--gar-on-sunset)!important}
/* Raised "ombré" tiles: charcoal-to-black gradient, light top edge, soft drop shadow */
.front .tp-card,
.front .catalog-grid > a.job,
.front .fleet-grid > article,
.front .rv-service-grid > article,
.front .rv-preview-types > a,
.front .google-review-cards article,
.front .google-work-band:not(.gw) figure,
.front .gas-platform-tile{
  background:linear-gradient(160deg,#2a2e35 0%,#1b1e23 45%,#0d0f12 100%)!important;
  border:1px solid #2c3136!important; border-top-color:#454b53!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 12px 26px rgba(0,0,0,.5)!important;
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.front .tp-card{border-top:3px solid #0499f7!important}
.front .gas-platform-tile{background:linear-gradient(110deg,#2a2e35 0%,#1b1e23 40%,#0d0f12 100%)!important}
.front .tp-card:hover,
.front .catalog-grid > a.job:hover,
.front .fleet-grid > article:hover,
.front .rv-preview-types > a:hover,
.front .gas-platform-tile:hover{
  transform:translateY(-3px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 34px rgba(0,0,0,.6)!important;
  border-color:#3d434a!important;
}
.front .tp-card:hover{border-top-color:#5cc0ff!important}
.front .tp-chip{background:linear-gradient(180deg,#2a2e35,#1b1e23)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
/* Truck cards: gunmetal glow behind the logo row */
.front .tp-card{position:relative;overflow:hidden}
.front .tp-card::before{content:'';position:absolute;left:-10%;right:-10%;top:-60px;height:170px;pointer-events:none;
  background:radial-gradient(ellipse at 50% 40%,rgba(120,132,148,.22),rgba(120,132,148,0) 70%)}
.front .tp-card > *{position:relative}
/* Engine buttons: blue outline + glow when hovered or focused */
.front .tp-chip{transition:border-color .15s,box-shadow .15s,transform .15s}
.front .tp-chip:hover,.front .tp-chip:focus-visible{border-color:#0499f7!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 1px rgba(4,153,247,.35),0 0 16px rgba(4,153,247,.45)!important;transform:translateY(-1px);outline:none}