/* ==========================================================================
   05 — Built For HVAC Contractors Who Are Serious About Growth
   Elementor container e6863ad + animated-headline widget 4545b88.
   Every value below is measured from research/components/05-built-for.spec.md,
   .dom.json, and the inline Elementor CSS in research/source/index.html.
   ========================================================================== */

.s-built-for {
  padding: 50px 0 100px;
  /* Measured, and deliberately unusual: the blueprint photo sits bottom-right
     at 33% of the section width. */
  background-image: url("../../../assets/img/2026/02/construction-engineer-holding-office-blueprints-ag-2026-01-08-07-35-11-utc-scaled-1.webp");
  background-size: 33%;
  background-position: 100% 100%;
  background-repeat: no-repeat;
  font-family: var(--f-body);
  font-size: var(--t-body-15);
  font-weight: 300;
  line-height: 1.5em;
  color: var(--c-text);
}

/* The Elementor inner container is 1140px of CONTENT, not 1140px box. */
.s-built-for .bf__inner {
  max-width: calc(var(--container) + (var(--container-pad) * 2));
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ------------------------------------------------------- animated headline */

.s-built-for .bf__headline {
  background-color: var(--c-white);
}

.s-built-for .bf__title {
  margin: 0 0 8px;
  font-family: var(--f-body);
  font-size: var(--t-h2-alt);      /* 50px desktop / 25px <=1024 */
  font-weight: 400;
  line-height: 1.3em;
  text-transform: capitalize;
  text-align: left;
  color: var(--c-black);
}

.s-built-for .bf__mark {
  position: relative;
  display: inline-block;
  z-index: 1;
}

/* Elementor's highlight marker geometry: 20px larger than the word in both
   axes, centred on it, overflow visible so the stroke can bleed out. */
.s-built-for .bf__marker {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  overflow: visible;
  z-index: 2;
  pointer-events: none;
}

.s-built-for .bf__marker svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* stroke: red and stroke-width: 9 are the shipped values from
   widget-animated-headline.min.css. main.js drives the dash offset. */
.s-built-for .bf__marker path {
  fill: none;
  stroke: red;
  stroke-width: 9;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .s-built-for .bf__marker path {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
}

/* ------------------------------------------------------------------- lead */

.s-built-for .bf__lead {
  margin: 0;
  font-family: var(--f-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--c-slate);
  text-align: left;
}

/* ------------------------------------------------------------ feature grid */

.s-built-for .bf__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  /* The right-hand 100px of the row is left empty so the blueprint photo
     reads through. Measured: two 510px columns inside 1140px. */
  padding-right: 100px;
}

.s-built-for .bf__card {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 25px;
  background-color: var(--c-offwhite);
  border-radius: 12px;
  transition: background var(--dur), border var(--dur), box-shadow var(--dur), transform var(--dur-slow);
}

.s-built-for .bf__icon {
  flex: 0 0 60px;
  width: 60px;
  height: 60px;
  margin-right: 15px;
  color: var(--c-text);
  transition: color var(--dur);
}

.s-built-for .bf__icon svg {
  width: 100%;
  height: 100%;
}

.s-built-for .bf__card:hover .bf__icon {
  color: var(--c-white);
}

.s-built-for .bf__card-body {
  min-width: 0;
  flex: 1 1 auto;
}

.s-built-for .bf__card-title {
  margin: 0 0 15px;
  font-family: var(--f-body);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2em;
  color: var(--c-text);
}

.s-built-for .bf__card-text {
  margin: 0;
  font-family: var(--f-body);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.5em;
  color: var(--c-text-grey);
}

/* ------------------------------------------------------------ closing bar */

.s-built-for .bf__closer {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  width: 90%;
  align-self: center;
  margin-top: 20px;
  padding: 10px;
  border-radius: 12px;
  background-image: linear-gradient(315deg, var(--c-black) 25%, var(--c-text) 100%);
}

.s-built-for .bf__logo {
  flex: 0 0 auto;
  width: 91px;
  height: 91px;
  border-radius: 12px;
  object-fit: cover;
}

.s-built-for .bf__closer-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  padding: 10px;
}

.s-built-for .bf__statement {
  width: 100%;
  margin: 0 0 10px;
  font-family: var(--f-body);
  font-size: 15px;
  font-weight: 600;
  font-style: italic;
  line-height: 20px;
  letter-spacing: 1px;
  color: var(--c-grey-light);
  text-align: left;
}

.s-built-for .bf__statement b {
  font-weight: 600;
}

.s-built-for .bf__pill {
  display: flex;
  flex: 0 1 auto;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  margin-right: -15px;
  padding: 4px 20px 4px 0;
  border-radius: 25px 0 0 25px;
  background-image: linear-gradient(135deg, var(--c-white) 0%, var(--c-offwhite) 100%);
}

.s-built-for .bf__pill-text {
  margin: 0;
  padding-right: 10px;
  font-family: var(--f-body);
  font-size: 12px;
  font-weight: 500;
  font-style: italic;
  line-height: 22px;
  color: var(--c-text-grey);
}

.s-built-for .bf__pill-text b {
  font-weight: 800;
  font-style: normal;
  letter-spacing: 1px;
  color: var(--c-text);
}

/* Essential Addons "liquid glass" creative button, effect1 + shadow effect1. */
.s-built-for .bf__btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  color: var(--c-white);
  background-color: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  box-shadow: 0 19px 26px 1px rgba(0, 0, 0, 0.78);
  transition: background-color var(--dur), color var(--dur), transform var(--dur);
}

.s-built-for .bf__btn-text {
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  text-align: center;
}

.s-built-for .bf__btn:hover,
.s-built-for .bf__btn:focus-visible {
  background-color: var(--c-black);
  color: var(--c-white);
}

.s-built-for .bf__btn:active {
  transform: translateY(1px);
}

/* ---------------------------------------------------- tablet 768 to 1024px */

@media (max-width: 1024px) {
  .s-built-for {
    padding: 50px 0 25px;
  }

  .s-built-for .bf__inner {
    padding-inline: 0;
  }

  .s-built-for .bf__title {
    text-align: center;
  }

  .s-built-for .bf__headline {
    margin-bottom: 10px;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  /* Tablet keeps the full-height bottom padding so the blueprint photo has
     room below the closing bar, exactly as at desktop. */
  .s-built-for {
    padding: 50px 0 100px;
  }

  /* The headline does NOT drop to the 25px token at tablet: the reference
     renders it at the desktop 50px, wrapping to three lines. */
  .s-built-for .bf__title {
    text-align: left;
    font-size: 50px;
  }

  .s-built-for .bf__grid {
    padding-right: 100px;
  }

  .s-built-for .bf__card-text {
    font-size: var(--t-body-15);
  }
}

/* ------------------------------------------------------- mobile <= 767px */

@media (max-width: 767px) {
  .s-built-for {
    padding: 50px 10px 25px;
  }

  .s-built-for .bf__inner {
    padding-inline: 4px;
  }

  .s-built-for .bf__title {
    text-align: center;
  }

  .s-built-for .bf__lead {
    text-align: center;
    font-size: 16px;
    line-height: 20px;
  }

  .s-built-for .bf__grid {
    grid-template-columns: minmax(0, 1fr);
    padding-right: 0;
  }

  .s-built-for .bf__card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .s-built-for .bf__icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 0 0 15px;
  }

  .s-built-for .bf__card-body {
    width: 100%;
  }

  .s-built-for .bf__card-text {
    font-size: 14px;
  }

  /* The closing bar stacks: logo, statement, pill, button. */
  .s-built-for .bf__closer {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 90%;
    margin-top: 25px;
    padding: 10px 0 0;
  }

  .s-built-for .bf__logo {
    width: 80px;
    height: 80px;
  }

  .s-built-for .bf__closer-body {
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }

  .s-built-for .bf__statement {
    text-align: center;
    padding: 10px 0 19px;
  }

  .s-built-for .bf__pill {
    width: 100%;
    justify-content: center;
    margin: 0;
    padding: 10px;
    border-radius: 25px 25px 0 0;
  }

  .s-built-for .bf__pill-text {
    padding-right: 0;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
  }

  .s-built-for .bf__btn {
    width: 100%;
    margin-top: -10px;
    border-radius: 24px;
  }
}