/* Brookfield Garage: homepage (2026 redesign). Loaded only by front-page.php. */
.hp{
  --hp-ink:#0d141c; --hp-navy:#13202e; --hp-line-d:#22303f; --hp-paper:#f5f3ef; --hp-white:#fff;
  --hp-red:#c8161e; --hp-red-d:#a01218; --hp-red-text:#b3141b; --hp-mut:#4a5561; --hp-mut-d:#c9d1d9;
  --hp-sand:#e8dcc7; --hp-gold:#f2b705; --hp-line:#e3e0da; --hp-chip:#c9cdd2;
  color:var(--hp-ink); background:var(--hp-paper); font-size:17px; line-height:1.6;
}
.hp *, .hp *::before, .hp *::after{box-sizing:border-box}
.hp img{max-width:100%; display:block}
.hp h1, .hp h2, .hp h3{color:inherit; margin:0}
.hp p{margin:0}
.hp-wrap{max-width:1240px; margin:0 auto; padding:0 24px}

/* Type */
.hp-h1, .hp-h2, .hp h3, .hp-stat, .hp-card__num, .hp-step__n{font-weight:800; letter-spacing:-.02em; line-height:1.05}
.hp-h1{font-size:clamp(38px,5.4vw,72px); text-wrap:balance}
.hp-h2{font-size:clamp(30px,3.4vw,46px); line-height:1.08; text-wrap:balance}
.hp-h2--sm{font-size:clamp(26px,2.4vw,34px); margin-bottom:16px}
.hp h3{font-size:22px; line-height:1.2}
.hp-lead{font-size:clamp(18px,1.6vw,21px); color:#d5dce3; max-width:560px}
.hp-muted{color:var(--hp-mut)}
.hp-kicker{display:inline-flex; align-items:center; gap:10px; margin:0 0 12px; font-size:14px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--hp-red-text)}
.hp-kicker--light{color:var(--hp-sand)}
.hp-kicker--sand{color:var(--hp-sand)}
.hp-kicker__bar{width:28px; height:3px; background:var(--hp-red); display:inline-block}
.hp-link{display:inline-flex; align-items:center; min-height:44px; font-weight:700; color:var(--hp-red-text); text-decoration:underline; text-underline-offset:4px}
.hp-link:hover{color:var(--hp-red-d)}
.hp :focus-visible{outline:3px solid var(--hp-gold); outline-offset:2px}

/* Buttons */
.hp-actions{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.hp-btn{display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 24px; border-radius:6px; font-weight:700; font-size:17px; text-decoration:none; border:2px solid transparent; cursor:pointer; line-height:1.2}
.hp-btn--lg{min-height:56px; padding:0 28px; font-size:18px}
.hp-btn--block{width:100%}
.hp-btn--red{background:var(--hp-red); color:#fff}
.hp-btn--red:hover{background:var(--hp-red-d); color:#fff}
.hp-btn--white{background:#fff; color:var(--hp-ink)}
.hp-btn--white:hover{background:var(--hp-paper); color:var(--hp-ink)}
.hp-btn--outline-light{border-color:rgba(255,255,255,.75); color:#fff; background:transparent}
.hp-btn--outline-light:hover{background:rgba(255,255,255,.1); color:#fff}

/* Hero */
.hp-hero{position:relative; background:var(--hp-ink); color:#fff; overflow:hidden}
.hp-hero__bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:60% 50%}
.hp-hero::before{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(13,20,28,.95) 0%, rgba(13,20,28,.86) 45%, rgba(13,20,28,.55) 100%)}
.hp-hero__inner{position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:48px; align-items:flex-end; justify-content:space-between; padding-top:88px; padding-bottom:96px}
.hp-hero__text{flex:1 1 520px; max-width:680px; display:flex; flex-direction:column; gap:24px}
.hp-hero .hp-h1{color:#fff}
.hp-rating{display:flex; align-items:center; gap:12px; font-size:15px; color:#d5dce3}
.hp-rating strong{color:#fff}
.hp-stars{color:var(--hp-gold); letter-spacing:2px; font-size:18px}

/* Quick booking card */
.hp-quick{flex:0 1 420px; width:100%; background:#fff; color:var(--hp-ink); border-radius:12px; padding:28px; display:flex; flex-direction:column; gap:18px; box-shadow:0 24px 60px rgba(0,0,0,.35)}
.hp-quick__title{font-size:26px; font-weight:800; letter-spacing:-.02em; line-height:1.15}
.hp-quick__sub{font-size:15px; color:var(--hp-mut); margin-top:-12px}
.hp-quick__makes{border:0; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.hp-quick__makes legend{font-size:14px; font-weight:700; padding:0; margin-bottom:8px}
.hp-quick__makes label{position:relative; cursor:pointer}
.hp-quick__makes input{position:absolute; opacity:0; width:1px; height:1px}
.hp-quick__makes span{display:inline-flex; align-items:center; min-height:44px; padding:0 14px; border-radius:22px; border:1.5px solid var(--hp-chip); font-weight:600; font-size:14px; background:#fff}
.hp-quick__makes input:checked + span{background:var(--hp-ink); border-color:var(--hp-ink); color:#fff}
.hp-quick__makes input:focus-visible + span{outline:3px solid var(--hp-gold); outline-offset:2px}
.hp-quick__field{display:flex; flex-direction:column; gap:6px; font-size:14px; font-weight:700}
.hp-quick__field select{height:48px; padding:0 12px; border:1.5px solid var(--hp-chip); border-radius:6px; font:500 16px/1 inherit; font-family:inherit; background:#fff; color:var(--hp-ink)}
.hp-quick__note{display:flex; gap:8px; align-items:flex-start; font-size:14px; color:var(--hp-mut)}
.hp-quick__note svg{flex:none; margin-top:3px; color:#1f7a3d}

/* Proof */
.hp-proof{background:var(--hp-ink); color:#fff; border-top:1px solid var(--hp-line-d); padding:64px 0 72px}
.hp-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1px; background:var(--hp-line-d); border:1px solid var(--hp-line-d); margin:28px 0 36px}
.hp-stats > div{background:var(--hp-ink); padding:28px 24px; display:flex; flex-direction:column; gap:8px; color:var(--hp-mut-d)}
.hp-stat{font-size:60px; color:#fff; line-height:1}
.hp-stat__star{color:var(--hp-gold)}
.hp-trust{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:12px 32px; font-size:15px; color:#d5dce3}
.hp-trust li{display:flex; gap:8px; align-items:center}
.hp-trust svg{color:var(--hp-sand)}

/* Sections */
.hp-section{padding:104px 0; background:var(--hp-paper)}
.hp-section--white{background:#fff}
.hp-section--line{border-top:1px solid var(--hp-line)}
.hp-section--dark{background:var(--hp-ink); color:#fff}
.hp-section--dark .hp-h2{color:#fff}
.hp-head{display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between; align-items:flex-end; margin-bottom:48px}
.hp-head > div{max-width:700px; display:flex; flex-direction:column; gap:12px}
.hp-head .hp-kicker{margin:0}

/* Service cards */
.hp-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px}
.hp-card{position:relative; display:flex; flex-direction:column; gap:8px; min-height:280px; padding:28px 24px; border-radius:10px; background:#fff; border:1px solid var(--hp-line); color:var(--hp-ink); text-decoration:none; transition:border-color .15s, transform .15s}
.hp-card:hover{border-color:var(--hp-ink); transform:translateY(-2px); color:var(--hp-ink)}
.hp-card p{color:var(--hp-mut); flex:1}
.hp-card__num{font-size:44px; color:#d8d3ca}
.hp-card__tag{font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#5d6670}
.hp-card__go{font-weight:700; color:var(--hp-red-text)}
.hp-card--photo{padding:0; overflow:hidden; background:var(--hp-ink); border-color:var(--hp-ink); color:#fff; justify-content:flex-end}
.hp-card--photo:hover{color:#fff}
.hp-card--photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55; transition:opacity .2s}
.hp-card--photo:hover img{opacity:.45}
.hp-card__body{position:relative; display:flex; flex-direction:column; gap:8px; padding:28px 24px; background:linear-gradient(0deg, rgba(13,20,28,.92) 0%, rgba(13,20,28,0) 100%)}
.hp-card--photo .hp-card__tag{color:var(--hp-sand)}
.hp-card--photo .hp-card__go{color:#fff}

/* Split blocks */
.hp-split{display:flex; flex-wrap:wrap; gap:56px; align-items:center}
.hp-split--top{align-items:flex-start}
.hp-split--rev{flex-wrap:wrap-reverse}
.hp-split__media{flex:1 1 460px; position:relative}
.hp-split__media img{width:100%; height:520px; object-fit:cover; border-radius:10px}
.hp-split__text{flex:1 1 480px; display:flex; flex-direction:column; gap:20px; min-width:0}
.hp-split__text .hp-kicker{margin:0}
.hp-quote-pin{position:absolute; left:20px; bottom:20px; margin:0; max-width:300px; padding:16px 18px; background:#fff; border-radius:8px; box-shadow:0 10px 30px rgba(0,0,0,.2)}
.hp-quote-pin blockquote{margin:0; font-size:15px; line-height:1.5; border:0; padding:0}
.hp-quote-pin figcaption{margin-top:8px; font-size:13px; font-weight:700; color:var(--hp-mut)}
.hp-chips{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.hp-chips li{padding:6px 14px; border:1px solid var(--hp-chip); border-radius:20px; font-weight:600; font-size:15px}
.hp-chips--links li{padding:0; border:0}
.hp-chips--links a{display:inline-flex; align-items:center; min-height:44px; padding:0 16px; background:#fff; border:1px solid var(--hp-chip); border-radius:22px; font-weight:600; color:var(--hp-ink); text-decoration:none}
.hp-chips--links a:hover{border-color:var(--hp-ink)}
.hp-qa{margin:0; border-top:1px solid var(--hp-line)}
.hp-qa > div{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:6px 24px; padding:16px 0; border-bottom:1px solid var(--hp-line)}
.hp-qa dt{font-weight:700}
.hp-qa dd{margin:0; color:var(--hp-mut)}
.hp-ticks{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px 24px}
.hp-ticks li{display:flex; gap:10px}
.hp-ticks svg{flex:none; margin-top:4px; color:var(--hp-red-text)}

/* Steps */
.hp-steps{list-style:none; margin:32px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px}
.hp-steps li{background:#fff; border:1px solid var(--hp-line); border-radius:10px; padding:28px; display:flex; flex-direction:column; gap:10px}
.hp-steps p{color:var(--hp-mut)}
.hp-step__n{width:48px; height:48px; border-radius:24px; background:var(--hp-ink); color:#fff; display:flex; align-items:center; justify-content:center; font-size:22px}

/* Reviews */
.hp-reviews{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; margin-top:32px}
.hp-reviews figure{margin:0; background:var(--hp-navy); border-radius:10px; padding:28px; display:flex; flex-direction:column; gap:16px}
.hp-reviews blockquote{margin:0; padding:0; border:0; font-size:19px; line-height:1.5; flex:1; color:#fff; font-style:normal}
.hp-reviews figcaption{font-size:15px; color:var(--hp-mut-d)}
.hp-reviews strong{color:#fff}

/* Facts + FAQ */
.hp-facts{margin:8px 0 0; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:20px}
.hp-facts dt{font-weight:700}
.hp-facts dd{margin:4px 0 0; color:var(--hp-mut)}
.hp-faq{border-top:1px solid var(--hp-line)}
.hp-faq details{border-bottom:1px solid var(--hp-line)}
.hp-faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:64px; font-weight:700; font-size:18px}
.hp-faq summary::-webkit-details-marker{display:none}
.hp-faq__plus{font-size:28px; font-weight:400; transition:transform .2s}
.hp-faq details[open] .hp-faq__plus{transform:rotate(45deg)}
.hp-faq details p{color:var(--hp-mut); padding-bottom:20px}

/* Closing CTA */
.hp-cta{background:var(--hp-red); color:#fff; padding:88px 0}
.hp-cta .hp-h2{color:#fff; font-size:clamp(34px,4vw,54px)}
.hp-cta p{font-size:19px; margin-top:12px}
.hp-cta__inner{display:flex; flex-wrap:wrap; gap:32px; justify-content:space-between; align-items:center}

/* Phones */
@media (max-width:640px){
  .hp-hero__inner{padding-top:48px; padding-bottom:48px; gap:32px}
  .hp-quick{padding:22px}
  .hp-section{padding:72px 0}
  .hp-split{gap:32px}
  .hp-split__media img{height:300px}
  .hp-stat{font-size:48px}
  .hp-card{min-height:240px}
  .hp-quote-pin{position:static; max-width:none; margin-top:12px; box-shadow:none; border:1px solid var(--hp-line)}
}
@media (prefers-reduced-motion:reduce){
  .hp-card, .hp-card--photo img, .hp-faq__plus{transition:none}
}

/* Footer sits straight under the closing CTA on this template */
.home .site-footer{margin-top:0}

/* Team photo: keep the photo's own proportions so the whole car shows (7 Nov 2026) */
[aria-labelledby="hp-team-title"] .hp-split__media img{height:auto; aspect-ratio:1000/722}