/* Home Team Construction — trust

   COMPONENT 05 — TRUST BLOCK

   CORRECTED 2026-09-02: THE ARTIFACT HAD THIS SECTION INVERTED, and this is the
   one place on the homepage where that happened.

   The artifact read the heading ranks and concluded that "Real Solutions For
   Real Problems", carrying an h3, was the eyebrow. It is not. On the live page
   rank and role are unrelated: every section's eyebrow is whatever element
   holds the service-plus-geo phrase, styled at Elementor's 17px "primary"
   global, and the headline is a non-heading text widget at 32-55px. Measured
   off the live kit:

     h2 fe949e3  "Trusted Roofing Contractors in Suffolk County, NY"  17px
     h3 1b97761  "Real Solutions For Real Problems"                   36px

   So the geo phrase is the eyebrow and the hook is the headline — the same
   pattern as the hero, the service grid, outcomes, and how we work, all four of
   which the artifact got right. Only this block was built the other way round.
   The rank fix the artifact wanted still stands: the hook is the h2 here and
   the eyebrow is a <p>, so no h3 follows an h2 with nothing between.

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

/* Home Team Construction — 05 Trust block */
.htc-trust{
  box-sizing:border-box;
  width:100%;
  background:var(--htc-white);
  padding:var(--htc-s7) var(--htc-s4);
  font-family:var(--htc-font-body);
}

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

/* Copy left, photograph right. 7fr/5fr with a fixed ratio and object-fit is
   the same treatment split.css and prose.css use for an image beside prose.

   THE COPY STAYS ON THE LEFT and that is not arbitrary. Every left-aligned
   heading on this page — the reviews eyebrow above, the service grid and
   outcomes eyebrows below — starts on the same vertical line. Putting the
   image first would push this section's eyebrow and h2 off that spine, which
   reads as a mistake even when nothing else changes. */
.htc-trust__inner{
  max-width:var(--htc-container);
  margin:0 auto;
  display:grid;
  grid-template-columns:7fr 5fr;
  align-items:center;
  gap:var(--htc-s6);
}

.htc-trust__media{
  margin:0;
  aspect-ratio:4/3;
  overflow:hidden;
  border-radius:var(--htc-radius);
}

.htc-trust__media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.htc-trust__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-trust__eyebrow::before{
  content:"";
  flex:0 0 auto;
  width:24px;
  height:2px;
  background:var(--htc-red);
}

.htc-trust__title{
  margin:0 0 var(--htc-s3);
  font-size:var(--htc-h2);
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.015em;
  color:var(--htc-black);
  /* Was 20ch, tuned for the 48-character geo phrase this slot used to hold.
     The headline is now the short hook, which fits on one line here as it does
     on the live page; 20ch would have forced it into a needless two. */
  max-width:34ch;
  text-wrap:balance;
}

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

.htc-trust__list{
  list-style:none;
  margin:0 0 var(--htc-s5);
  padding:0;
  display:flex;
  flex-direction:column;
  gap:var(--htc-s2);
  max-width:var(--htc-measure);
}
.htc-trust__list li{
  display:flex;
  align-items:flex-start;
  gap:var(--htc-s2);
  font-size:var(--htc-body);
  font-weight:600;
  line-height:1.5;
  color:var(--htc-black);
}
.htc-trust__list svg{ flex:0 0 auto; display:block; margin-top:3px; color:var(--htc-red); }

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

.htc-trust .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-size:var(--htc-body);
  font-weight:600;
  line-height:1.2;
  text-decoration:none;
  cursor:pointer;
  transition:background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
/* Call stays the outlined button everywhere on the site: red always means
   "get a quote", outlined always means "phone us". Consistency of meaning
   beats giving a lone button more weight. */
.htc-trust .htc-btn--secondary{
  background:transparent;
  border-color:var(--htc-black);
  color:var(--htc-black);
}
.htc-trust .htc-btn--secondary:hover{ background:var(--htc-black); color:var(--htc-white); }
.htc-trust .htc-btn--secondary:focus-visible{ outline:2px solid var(--htc-red); outline-offset:2px; }

@media (max-width:1150px){
  .htc-trust{ padding:var(--htc-s6) var(--htc-s3); }
  .htc-trust__inner{ gap:var(--htc-s4); }
}

@media (max-width:767px){
  .htc-trust{ padding:var(--htc-s5) var(--htc-s3); }
  /* Stacked at the same width split and prose stack, photograph below the
     copy — it supports the claim rather than making it, so it reads second. */
  .htc-trust__inner{ grid-template-columns:minmax(0, 1fr); }
  .htc-trust__title{ max-width:none; }
  .htc-trust__actions{ align-items:stretch; }
  .htc-trust .htc-btn{ width:100%; }
}

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