/* Home Team Construction — hero-hook

   ---------- OPTION A — the hook leads ----------

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

/* Home Team Construction — 02 Hero / OPTION A, hook leads */
.htc-hero{
  box-sizing:border-box;
  /* Was `padding:var(--htc-s7) 0;`. This block relied on Elementor's container for its horizontal
     padding and 1400px centring; there is no such container in this theme, so it
     carries both itself. max-width puts the gutters outside the container width
     so content aligns with sections that centre an __inner at --htc-container. */
  padding:var(--htc-s7) var(--htc-s4);
  max-width:calc(var(--htc-container) + var(--htc-s4) * 2);
  margin-inline:auto;
  font-family:var(--htc-font-body);
  color:var(--htc-text);
}

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

.htc-hero__eyebrow{
  display:flex;
  align-items:center;
  gap:var(--htc-s2);
  margin:0 0 var(--htc-s2);
  font-size:var(--htc-eyebrow);
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  line-height:1.3;
  color:var(--htc-red);
}
.htc-hero__eyebrow::before{
  content:"";
  flex:0 0 auto;
  width:24px;
  height:2px;
  background:var(--htc-red);
}

.htc-hero__title{
  margin:0 0 var(--htc-s3);
  font-size:var(--htc-h1);
  font-weight:800;
  line-height:1.15;
  letter-spacing:-.015em;
  color:var(--htc-black);
  max-width:20ch;
  text-wrap:balance;
}

.htc-hero__lead{
  margin:0 0 var(--htc-s4);
  font-size:var(--htc-lead);
  font-weight:400;
  line-height:1.6;
  color:var(--htc-text);
  max-width:var(--htc-measure);
}
.htc-hero__lead a{
  color:var(--htc-blue-dark);
  text-decoration:underline;
  text-underline-offset:2px;
  text-decoration-thickness:1px;
}
.htc-hero__lead a:hover{ color:var(--htc-red); }
.htc-hero__lead a:focus-visible{ outline:2px solid var(--htc-red); outline-offset:2px; }

/* Was a rotating Animated Headline showing one claim at a time. Now all three,
   static, no motion. */
.htc-hero__chips{
  list-style:none;
  margin:0 0 var(--htc-s4);
  padding:var(--htc-s3) 0 0;
  border-top:1px solid var(--htc-divider);
  display:flex;
  flex-wrap:wrap;
  gap:var(--htc-s2) var(--htc-s4);
  max-width:var(--htc-measure);
}
.htc-hero__chip{
  display:flex;
  align-items:center;
  gap:var(--htc-s1);
  font-size:var(--htc-small);
  font-weight:600;
  line-height:1.4;
  color:var(--htc-black);
}
.htc-hero__chip svg{ flex:0 0 auto; display:block; color:var(--htc-red); }

.htc-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--htc-s2);
}

.htc-hero .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, border-color 200ms ease, box-shadow 200ms ease;
}
.htc-hero .htc-btn--primary{
  background:var(--htc-red);
  border-color:var(--htc-red);
  color:var(--htc-white);
}
.htc-hero .htc-btn--primary:hover{ box-shadow:inset 0 0 0 999px rgba(2,1,1,.15); }
.htc-hero .htc-btn--primary:focus-visible{ outline:2px solid var(--htc-black); outline-offset:2px; }

.htc-hero .htc-btn--secondary{
  background:transparent;
  border-color:var(--htc-black);
  color:var(--htc-black);
}
.htc-hero .htc-btn--secondary:hover{ background:var(--htc-black); color:var(--htc-white); }
.htc-hero .htc-btn--secondary:focus-visible{ outline:2px solid var(--htc-red); outline-offset:2px; }

@media (max-width:1150px){
  .htc-hero{ padding:var(--htc-s6) 0; }
}

@media (max-width:767px){
  .htc-hero{ padding:var(--htc-s5) 0 var(--htc-s4); }
  .htc-hero__title{ max-width:none; }
  .htc-hero__chips{ flex-direction:column; gap:var(--htc-s2); }
  .htc-hero__actions{ flex-direction:column; align-items:stretch; }
  .htc-hero .htc-btn{ width:100%; }
}

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