/* Home Team Construction — cta-band

   COMPONENT S10 — CLOSING CTA BAND
   CSS-ONLY. This is the first container of FOOTER TEMPLATE 167, not page
   content — which is why it appears on every page of the site and why there
   is no HTML widget to paste into. One restyle covers all 223 pages, and it
   closes the last pending section on the homepage lab too.
   THE ANGLED TWO-TONE GROUND IS ALREADY HERE. Read off the compiled footer
   CSS, container 762ff73 carries
   linear-gradient(113deg, #3F3B3A 64%, #005F9AAB 64%)
   — a hard-edged diagonal split, grey into blue at 64%. That is the same
   device as the angled rule the homepage lab singled out as the one genuinely
   ownable thing on this site, and it is already built from kit colours:
   #3F3B3A is --htc-grey-mid and #005F9A is --htc-blue-dark. Rebuilt on the
   tokens rather than the literals, alpha kept.
   What changes is everything around it: type off the scale, the dual CTA
   formalised as the standard pair, and the heading promoted from a styled
   <p> to a real <h2>.

   Ported from deliverables/service-page-review.html <template id="cmp-cta-band">.
   Tokens come from tokens.css; only local overrides are declared here.
*/

/* Home Team Construction — S10 Closing CTA band (pattern 7) */
.htc-band{
  box-sizing:border-box;
  width:100%;
  padding:var(--htc-s6) var(--htc-s4);
  font-family:var(--htc-font-body);

  /* The site's own angled two-tone, on tokens. The dotted overlay sits on top
     of the gradient and is decorative only. */
  background-color:var(--htc-grey-mid);
  background-image:
    url("https://www.hometeamconstructionli.com/wp-content/uploads/2024/09/dotted-abstract-bg-overlay.png"),
    linear-gradient(113deg, var(--htc-grey-mid) 64%, rgba(0,95,154,.67) 64%);
  background-position:center right, center center;
  background-repeat:no-repeat, no-repeat;
  background-size:auto, cover;
}

.htc-band *,
.htc-band *::before,
.htc-band *::after{ box-sizing:border-box; }

.htc-band__inner{
  max-width:var(--htc-container);
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--htc-s5);
}

.htc-band__copy{ flex:1 1 34rem; min-width:0; }

.htc-band__title{
  margin:0 0 var(--htc-s2);
  font-size:var(--htc-h2);
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.015em;
  color:var(--htc-white);
  max-width:16ch;
  text-wrap:balance;
}

.htc-band__lead{
  margin:0;
  font-size:var(--htc-lead);
  font-weight:400;
  line-height:1.6;
  color:rgba(255,255,255,.88);
  max-width:var(--htc-measure);
}
/* No link rule existed here, so an in-copy link fell through to the site
   default (near-black), which is close to unreadable against this section's
   dark background. White is the highest-contrast choice against this
   background (a switch to the brand red would drop under WCAG AA here);
   bold plus a heavier underline is what separates it from the paragraph's
   own near-white text. */
.htc-band__lead a{
  color:var(--htc-white);
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:2px;
  text-decoration-thickness:2px;
}
.htc-band__lead a:hover{ text-decoration-thickness:3px; }
.htc-band__lead a:focus-visible{ outline:2px solid var(--htc-white); outline-offset:2px; }

.htc-band__actions{
  flex:0 0 auto;
  display:flex;
  flex-wrap:wrap;
  gap:var(--htc-s2);
}

.htc-band .htc-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:var(--htc-s2) var(--htc-s4);
  border:2px solid transparent;
  border-radius:var(--htc-radius);
  font-family:var(--htc-font-body);
  font-size:var(--htc-body);
  font-weight:600;
  line-height:1.2;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  transition:background-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
}
.htc-band .htc-btn--primary{
  background:var(--htc-red);
  border-color:var(--htc-red);
  color:var(--htc-white);
}
.htc-band .htc-btn--primary:hover{ box-shadow:inset 0 0 0 999px rgba(2,1,1,.15); }
.htc-band .htc-btn--primary:focus-visible{ outline:2px solid var(--htc-white); outline-offset:2px; }

/* Outlined inverts on a dark ground, same as the hero. */
.htc-band .htc-btn--secondary{
  background:transparent;
  border-color:var(--htc-white);
  color:var(--htc-white);
}
.htc-band .htc-btn--secondary:hover{ background:var(--htc-white); color:var(--htc-black); }
.htc-band .htc-btn--secondary:focus-visible{ outline:2px solid var(--htc-white); outline-offset:2px; }

@media (max-width:1150px){
  .htc-band{ padding:var(--htc-s5) var(--htc-s3); }
  .htc-band__inner{ gap:var(--htc-s4); }
}

@media (max-width:767px){
  .htc-band{ padding:var(--htc-s5) var(--htc-s3); }
  /* The 113deg split lands badly on a narrow column — it clips a corner rather
     than crossing the band. Flatten to a vertical two-tone below 768. */
  .htc-band{
    background-image:
      url("https://www.hometeamconstructionli.com/wp-content/uploads/2024/09/dotted-abstract-bg-overlay.png"),
      linear-gradient(160deg, var(--htc-grey-mid) 70%, rgba(0,95,154,.67) 70%);
  }
  .htc-band__inner{ flex-direction:column; align-items:stretch; }
  .htc-band__title{ max-width:none; }
  .htc-band__actions{ flex-direction:column; align-items:stretch; }
  .htc-band .htc-btn{ width:100%; }
}

@media (prefers-reduced-motion: reduce){
  .htc-band .htc-btn{ transition:none; }
}