.hero {
  --hero-ink: #214e43;
  --hero-accent: #8a1234;
  --hero-card-height: clamp(344px, 24.8vw, 416px);
  width: min(1800px, calc(100% - 48px));
  padding-block: clamp(28px, 3vw, 48px);
  display: grid;
  grid-template-columns: minmax(0, 2.7fr) minmax(0, 2.2fr);
  align-items: stretch;
  gap: clamp(20px, 1.8vw, 34px);
  container-type: inline-size;
  font-family: "Segoe UI", Arial, sans-serif;
}

@media (max-width: 1100px) {
  .hero {
    width: min(100% - 64px, 980px);
    grid-template-columns: 1fr;
    gap: 24px;
    padding-block: 28px 32px;
  }}

@media (max-width: 650px) {
  .hero {
    width: calc(100% - 32px);
    gap: 18px;
    padding-block: 20px 28px;
  }}

@media (max-width: 350px) {

  .hero .button {
    padding-inline: 16px;
    font-size: 13px;
  }}

/* The offer promo and the wide banner share one compact three-track hero grid. */
.hero.hero-trio {
  width: min(1800px, calc(100% - 48px));
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding-block: clamp(28px, 3vw, 48px);
}

.hero-promo {
  position: relative;
  isolation: isolate;
  min-height: clamp(300px, 25vw, 390px);
  overflow: hidden;
  border: 1px solid #203b68;
  border-radius: 8px;
  background-color: #203b68;
  background-position: center;
  background-size: cover;
  color: #fff;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}

.hero-promo-image { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(1.12) brightness(1.08) contrast(1.04); }

.hero-promo:hover,
.hero-promo:focus-visible { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(22,45,84,.18); }
.hero-promo:focus-visible { outline: 3px solid #b52f43; outline-offset: 3px; }
.hero-promo-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8,10,14,0) 45%, rgba(8,10,14,.28) 72%, rgba(8,10,14,.62) 100%); }
.hero-promo-copy { position: absolute; inset: auto 24px 22px; }
.hero-promo-kicker { margin: 0 0 10px; color: #f5d4b1; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.hero-promo-kicker--top { position: absolute; top: 20px; left: 22px; z-index: 2; margin: 0; padding: 7px 14px; background: #b52f43; color: #fff; border-radius: 4px; font-size: 12px; font-weight: 800; letter-spacing: .09em; }
.hero-promo-kicker--amber { background: #f5d4b1; color: #203b68; }
.hero-promo h2 { margin: 0; color: #fff; font-family: inherit; font-size: clamp(27px, 2.4vw, 42px); font-weight: 600; letter-spacing: -.04em; line-height: 1.03; }

.hero-promo--offer h2 { font-size: clamp(21px, 1.7vw, 27px); line-height: 1.24; text-shadow: 0 2px 14px rgba(13,28,54,.55); margin: 0 0 12px; }
.hero-promo-sub { margin: 0 0 6px; font-size: 15px; line-height: 1.45; color: rgba(255,255,255,.92); text-shadow: 0 1px 8px rgba(13,28,54,.5); }
.hero-promo--offer .hero-promo-note { margin: -4px 0 0; font-size: 13px; line-height: 1.4; color: rgba(255,255,255,.72); text-shadow: 0 1px 8px rgba(13,28,54,.5); }
.hero-promo--offer .hero-promo-cta { margin-top: 18px; }
.hero-promo--electrician h2 { font-size: clamp(24px, 2vw, 32px); line-height: 1.55; text-shadow: 0 2px 18px rgba(8,10,14,.85); }
.hero-promo--electrician .hero-promo-note { margin-top: 12px; font-size: 15px; font-weight: 600; color: #fff; text-shadow: 0 1px 3px rgba(8,10,14,.95), 0 2px 14px rgba(8,10,14,.9); }
.hero-promo--electrician .hero-promo-cta { margin-top: 84px; }
.hero-promo-cta { display: inline-flex; align-items: center; gap: 8px; margin: 16px 0 12px; padding: 12px 26px; border: 0; border-radius: 6px; background: #b52f43; color: #fff; font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; transition: background .15s ease, transform .15s ease; }
.hero-promo-cta:hover { background: #9c2739; transform: translateY(-1px); }
.hero-promo-cta:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

@media (max-width: 900px) {
  .hero.hero-trio { grid-template-columns: 1fr; width: min(100% - 32px, 620px); padding-block: 24px 34px; }
  .hero-promo { min-height: 430px; }
  .hero-promo--offer .hero-promo-copy { inset: auto 20px 28px; }
  .hero-promo--offer h2 { font-size: 23px; line-height: 1.3; }
  .hero-promo--offer .hero-promo-cta { margin-top: 28px; }}

@media (max-width: 480px) {
  .hero.hero-trio { gap: 12px; }
  .hero-promo { min-height: 400px; }
  .hero-promo-copy { inset: auto 20px 18px; }
  .hero-promo-kicker { font-size: 11px; }
  .hero-promo--offer h2 { font-size: 21px; }}

@media (max-width: 900px) { .hero-promo--electrician .hero-promo-copy { inset: auto 20px 28px; } .hero-promo--electrician .hero-promo-cta { margin-top: 28px; } .hero-promo--electrician .hero-promo-note { margin-top: 10px; } .hero-promo--electrician h2 { font-size: 24px; line-height: 1.35; }}

.hero-promo--wide { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; gap: 0; cursor: default; }
@media (hover:hover) {
.hero-promo--wide:hover { transform: scale(1.015); box-shadow: 0 16px 34px rgba(22,45,84,.22); }
}
.hero-promo-half { position: relative; display: flex; align-items: flex-start; min-height: 0; }
.hero-half-clip { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.hero-half-image { position: absolute; top: 0; bottom: 0; width: 200%; height: 100%; object-fit: cover; z-index: 0; }
.hero-promo-half:first-child .hero-half-image { left: 0; }
.hero-promo-half:last-child .hero-half-image { right: 0; }
.hero-promo-half::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10,20,40,.22) 0%, rgba(10,20,40,.6) 55%, rgba(10,20,40,.88) 100%); }
.hero-promo-half .hero-promo-copy { position: relative; z-index: 2; padding: 80px 26px 30px; }
.hero-wide-cta-slot { position: absolute; z-index: 3; left: -100%; width: 100%; bottom: 26px; display: flex; justify-content: center; }
.hero-wide-cta { margin: 0; }
.hero-promo--wide h2 { color: #fff; font-size: clamp(24px, 2.2vw, 36px); line-height: 1.14; text-shadow: 0 2px 16px rgba(8,10,14,.85); }
.hero-wide-intro { margin: 16px 0 0; font-size: 16.5px; line-height: 1.6; color: rgba(255,255,255,.92); text-shadow: 0 1px 10px rgba(8,10,14,.8); }
.hero-wide-intro b, .hero-wide-note b { color: #f5d4b1; font-weight: 800; }
.hero-wide-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hero-wide-list li { position: relative; padding-left: 16px; display: flex; justify-content: space-between; align-items: baseline; gap: 26px 30px; font-size: 16px; font-weight: 700; color: #fff; text-shadow: 0 1px 10px rgba(8,10,14,.8); }
.hero-wide-list li > span { flex: 1 1 auto; }
.hero-wide-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 2px; background: #f5d4b1; }
.hero-wide-list em { font-style: normal; font-size: 13px; font-weight: 600; color: #f5d4b1; text-align: right; flex: 0 1 42%; max-width: 42%; }
.hero-wide-note { margin: 16px 0 0; font-size: 15px; line-height: 1.6; text-wrap: balance; color: rgba(255,255,255,.9); text-shadow: 0 1px 10px rgba(8,10,14,.8); }
.hero-wide-note--accent { color: #fff; font-weight: 600; }

@media (max-width: 900px) {
  .hero-promo--wide { grid-column: auto; display: flex; flex-direction: column; gap: 12px; background: none; border: 0; min-height: 0; }
  .hero-promo-half { width: 100%; min-height: 420px; border: 1px solid #203b68; border-radius: 8px; align-items: stretch; flex-direction: column; justify-content: flex-end; }
  .hero-wide-list li { flex-direction: column; align-items: flex-start; gap: 2px; }
  .hero-wide-cta-slot { position: static; width: auto; justify-content: center; align-self: stretch; margin: 20px 0 24px; }
  .hero-promo-half { transition: transform .2s ease; }
  @media (hover:hover) { .hero-promo-half:hover { transform: scale(1.02); } }
  .hero-promo-half .hero-promo-copy { padding: 24px 22px 18px; }
  .hero-promo-half:first-child .hero-promo-copy { padding-bottom: 38px; }
  .hero-wide-list { padding-left: 22px; }
  .hero-wide-list em { display: block; margin-top: 1px; flex: none; max-width: 100%; text-align: left; }
  .hero-wide-list li { display: list-item; list-style: disc; padding-left: 6px; }
  .hero-wide-list li::before { display: none; }
  .hero-wide-list li::marker { color: #f5d4b1; font-size: 1.25em; }
  .hero-promo--wide h2 { font-size: 26px; }
}