/* Homepage (Direction A) — pieces Avada has no element for. Loaded by the td-mikeymachvac plugin. */

/* ---- hero: the photo runs full width; the words sit on a navy fade from the left ---- */
.td-hero { position: relative; }
.td-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,26,61,.94) 0%, rgba(14,26,61,.82) 36%, rgba(14,26,61,.18) 66%, rgba(14,26,61,0) 100%); pointer-events: none; }
.td-hero > .fusion-builder-row { position: relative; max-width: none; }
/* the text column starts where every normal band's content starts: (row width - 1240) / 2, less Avada's 25px column gutter */
.td-hero-text { padding-left: max(44px, calc((100% - 1240px) / 2 - 25px)) !important; }
.td-hero-kick p { margin: 0; display: flex; flex-wrap: wrap; }
.td-hero-kick .td-tag { font-size: 16px; padding: 6px 12px; }
.td-hero-lead p { margin: 0; max-width: 34em; }
.td-hero-num p { margin: 0; line-height: 1; }
.td-hero-num small { display: block; font-family: Barlow, Arial, sans-serif; font-weight: 600; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: #ffd166; margin-bottom: 8px; }
.td-hero-num a { font-family: 'Barlow Condensed', Impact, sans-serif; font-weight: 800; font-size: 74px; letter-spacing: .01em; color: #fff !important; text-decoration: none !important; line-height: 1; }
.td-hero-tag { margin-top: 26px; }
.td-hero-tag p { margin: 0; display: inline-block; font-style: italic; font-weight: 500; color: #fff; background: rgba(14,26,61,.65); padding: 8px 14px; border-left: 3px solid #c8262e; }
@media (max-width: 1024px) { .td-hero::before { background: linear-gradient(90deg, rgba(14,26,61,.94) 0%, rgba(14,26,61,.86) 50%, rgba(14,26,61,.35) 100%); } }
/* On a phone the photo used to fill the first screen on its own: the headline began 634px down and the phone number
   at 886px, both below the fold, so the visitor met a picture of a van and had to scroll to learn anything (2026-09-24).
   Now the photo gets a fixed band at the top — Mike's face inside it — and the words sit right underneath it. */
@media (max-width: 640px) {
  /* the hero block is very tall on a phone, so a 'cover' image only ever showed its top edge — a blank slab of van panel.
     Zooming the photo puts Mike and the van lettering inside the band instead. */
  .td-hero { background-size: 210% auto !important; background-position: 60% 0 !important; background-repeat: no-repeat !important; background-color: #0e1a3d !important; }
  .td-hero::before { background: linear-gradient(180deg, rgba(14,26,61,.10) 0%, rgba(14,26,61,.20) 34%, rgba(14,26,61,.86) 50%, rgba(14,26,61,.97) 64%, rgba(14,26,61,.98) 100%); }
  .td-hero-text { padding-left: 20px !important; padding-right: 20px !important; padding-top: 152px !important; padding-bottom: 28px !important; }
  .td-hero-kick .td-tag { font-size: 14px; padding: 5px 10px; }
  .td-hero-h { font-size: 42px !important; }
  .td-hero-lead { margin-top: 10px !important; }
  .td-hero-lead p { font-size: 15px; line-height: 1.4; }
  .td-hero-num { margin-top: 12px !important; }
  .td-hero-num a { font-size: 46px; }
  .td-hero-num small { font-size: 12.5px; margin-bottom: 3px; }
  .td-hero .fusion-button { margin-top: 4px !important; }
  .td-hero-tag { margin-top: 16px; }
  .td-hero-tag p { font-size: 14px; }
}
/* shorter screens: a shorter photo band, so the number and the estimate button both land on the first screen */
@media (max-width: 640px) and (max-height: 880px) {
  .td-hero-text { padding-top: 140px !important; }
}
@media (max-width: 400px) and (max-height: 800px) {
  .td-hero-text { padding-top: 126px !important; }
  .td-hero-h { font-size: 38px !important; }
}

/* ---- services cards ---- */
.td-legend p { margin: 0; display: flex; gap: 18px; justify-content: flex-end; font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: .08em; color: #2b3442; }
.td-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.td-legend__h { background: #c8262e; } .td-legend__c { background: #3a9ad9; } .td-legend__b { background: #1b2f6b; }
@media (max-width: 640px) { .td-legend p { justify-content: flex-start; } }
.td-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.td-card { position: relative; display: flex; flex-direction: column; border: 1px solid #dfe3ea; border-top: 5px solid #1b2f6b; background: #fff; transition: box-shadow .15s; }
.td-card:hover { box-shadow: 0 12px 30px rgba(27,47,107,.12); }
.td-card--h { border-top-color: #c8262e; } .td-card--c { border-top-color: #3a9ad9; }
.td-card img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; display: block; }
.td-card__body { padding: 20px 22px 24px; }
.td-card__type { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #1b2f6b; }
.td-card--h .td-card__type { color: #c8262e; } .td-card--c .td-card__type { color: #3a9ad9; }
.td-services .td-card h3 { font-size: 26px !important; color: #1b2f6b; margin: 6px 0 0; line-height: 1; }
.td-card p { margin: 10px 0 0; font-size: 15.5px; color: #5b6575; line-height: 1.5; }
.td-card__more { margin-top: 14px; font-weight: 600; color: #1b2f6b; font-size: 15px; }
.td-card:hover .td-card__more { color: #c8262e; }
.td-card__link { position: absolute; inset: 0; }
@media (max-width: 1024px) { .td-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .td-cards { grid-template-columns: 1fr; gap: 16px; } }

/* ---- about ---- */
.td-about .td-promises li { color: #fff; }
.td-about .td-lic { color: #fff; border-color: rgba(255,255,255,.4); }
.td-about .td-photo { border-color: #fff; }

/* ---- reviews (the Google widget, in this page's type) ---- */
.td-reviews-widget { margin-top: 4px; }

/* ---- towns on the homepage: names only, with the small red/blue tags ---- */
.td-areas .td-towns--simple li { padding: 9px 0; }

/* ---- estimate form ---- */
.td-estimate .gform_wrapper .gfield--width-full { grid-column: 1 / -1; }