/* Section components for The Double H.
   Built on the design tokens in adinas-stunning-site-9a46b5.webflow.css so
   these sections sit natively alongside the template's own components. */

/* ---------- shared ---------- */

.section-intro {
  max-width: 46rem;
  margin-bottom: var(--_spacing---4-rem, 4rem);
}

.section-intro p {
  margin: var(--_spacing---1-rem, 1rem) 0 0;
}

.eyebrow {
  font-size: 12px;
  font-weight: var(--_typography---medium, 500);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--_color---light-accent, #39736a);
  margin-bottom: var(--_spacing---0-75-rem, .75rem);
}

.lede {
  font-size: var(--_typography---subtitle, 18px);
  line-height: 1.5;
  color: var(--grey, #3a4140);
}

/* ---------- hero ---------- */

.hero-panel {
  padding-top: 11rem;
  padding-bottom: var(--_spacing---8-rem, 8rem);
  background-color: var(--_color---subtle-grey, #f5f3f0);
}

.hero-panel .heading-1 {
  max-width: 20ch;
}

.hero-copy {
  max-width: 44rem;
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---1-rem, 1rem);
}

.hero-copy .lede {
  margin: 0;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--_spacing---1-rem, 1rem) var(--_spacing---1-5-rem, 1.5rem);
  margin-top: var(--_spacing---1-rem, 1rem);
}

.hero-note {
  font-size: 14px;
  color: var(--grey, #3a4140);
}

/* The primary call to action, used across the page. */
.cta-button {
  display: inline-block;
  padding: var(--_spacing---1-rem, 1rem) var(--_spacing---2-rem, 2rem);
  background-color: var(--_color---accent, #1f453f);
  color: var(--_color---white, #fefcf8);
  font-size: 13px;
  font-weight: var(--_typography---medium, 500);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .25s ease;
}

.cta-button:hover {
  background-color: var(--_color---light-accent, #39736a);
}

.cta-button.is-light {
  background-color: var(--_color---white, #fefcf8);
  color: var(--_color---accent, #1f453f);
}

.cta-button.is-light:hover {
  background-color: var(--_color---subtle-accent, #c6f0dc);
}

/* ---------- pain points ----------
   Sits in the template's .about-headline grid (.3fr 1fr): the "Tired of:"
   label takes the narrow column, the list and closer the wide one. */

.pain-body {
  justify-self: stretch;
  width: 100%;
}

.pain-list {
  list-style: none;
  margin: 0;
  padding: 0;
  /* multi-column rather than grid so the list reads down one column and then
     the next, instead of zig-zagging across rows */
  columns: 2;
  column-gap: var(--_spacing---4-rem, 4rem);
}

.pain-list li {
  break-inside: avoid;
  padding: var(--_spacing---0-75-rem, .75rem) 0;
  border-bottom: 1px solid var(--light-grey, #bbb9b5);
  color: var(--_color---black, #111317);
  font-size: var(--_typography---subtitle, 18px);
}

.pain-closer {
  margin: var(--_spacing---2-rem, 2rem) 0 0;
  font-size: var(--_typography---subtitle, 18px);
  line-height: 1.5;
  max-width: 46rem;
  color: var(--grey, #3a4140);
}

@media screen and (max-width: 767px) {
  .pain-list {
    columns: 1;
  }
}

/* ---------- how it works ---------- */

.step-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--_spacing---2-rem, 2rem);
}

.step {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---0-75-rem, .75rem);
  padding-top: var(--_spacing---1-5-rem, 1.5rem);
  border-top: 2px solid var(--_color---accent, #1f453f);
}

.step-number {
  font-size: 13px;
  font-weight: var(--_typography---medium, 500);
  letter-spacing: .14em;
  color: var(--_color---light-accent, #39736a);
}

.step h3 {
  margin: 0;
  font-size: var(--_typography---heading-6, 24px);
  font-weight: var(--_typography---medium, 500);
  line-height: var(--_typography---height-heading, 1.1);
}

.step p {
  margin: 0;
  color: var(--grey, #3a4140);
}

/* ---------- coverage areas ---------- */

.area-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--_spacing---0-75-rem, .75rem);
}

.area-list li {
  padding: var(--_spacing---0-5-rem, .5rem) var(--_spacing---1-rem, 1rem);
  border: 1px solid var(--light-grey, #bbb9b5);
  background-color: var(--_color---white, #fefcf8);
  font-size: var(--_typography---text, 16px);
  color: var(--_color---black, #111317);
}

/* ---------- services ---------- */

.help-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--_spacing---1-5-rem, 1.5rem);
}

.help-card {
  padding: var(--_spacing---2-rem, 2rem);
  background-color: var(--_color---white, #fefcf8);
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---0-75-rem, .75rem);
}

.help-card h3 {
  margin: 0;
  font-size: var(--_typography---heading-6, 24px);
  font-weight: var(--_typography---medium, 500);
  line-height: var(--_typography---height-heading, 1.1);
}

.help-card p {
  margin: 0;
  color: var(--grey, #3a4140);
}

/* ---------- faq ----------
   Native <details> rather than the template's scripted dropdown, so the
   accordion works even if webflow.js fails to load. */

.faq-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--light-grey, #bbb9b5);
  max-width: 52rem;
}

.faq-item {
  border-bottom: 1px solid var(--light-grey, #bbb9b5);
}

.faq-item > summary {
  list-style: none;
  cursor: pointer;
  padding: var(--_spacing---1-5-rem, 1.5rem) 3rem var(--_spacing---1-5-rem, 1.5rem) 0;
  position: relative;
  font-size: var(--_typography---heading-6, 24px);
  font-weight: var(--_typography---medium, 500);
  line-height: var(--_typography---height-heading, 1.1);
  color: var(--_color---black, #111317);
}

.faq-item > summary::-webkit-details-marker {
  display: none;
}

.faq-item > summary::after {
  content: "";
  position: absolute;
  right: var(--_spacing---0-5-rem, .5rem);
  top: 50%;
  width: .75rem;
  height: .75rem;
  border-right: 2px solid var(--_color---accent, #1f453f);
  border-bottom: 2px solid var(--_color---accent, #1f453f);
  transform: translateY(-65%) rotate(45deg);
  transition: transform .2s ease;
}

.faq-item[open] > summary::after {
  transform: translateY(-25%) rotate(-135deg);
}

.faq-item > summary:focus-visible {
  outline: 2px solid var(--_color---accent, #1f453f);
  outline-offset: 4px;
}

.faq-answer {
  margin: 0;
  padding: 0 3rem var(--_spacing---1-5-rem, 1.5rem) 0;
  color: var(--grey, #3a4140);
  line-height: 1.5;
}

/* ---------- closing cta ---------- */

.closing-cta {
  background-color: var(--_color---accent, #1f453f);
  color: var(--_color---white, #fefcf8);
  padding: var(--_spacing---8-rem, 8rem) 0;
  text-align: center;
}

.closing-cta h2 {
  margin: 0 auto var(--_spacing---1-rem, 1rem);
  max-width: 18ch;
  color: var(--_color---white, #fefcf8);
}

.closing-cta p {
  margin: 0 auto var(--_spacing---2-rem, 2rem);
  max-width: 42rem;
  color: var(--_color---subtle-accent, #c6f0dc);
  font-size: var(--_typography---subtitle, 18px);
  line-height: 1.5;
}

/* ---------- footer disclosure ---------- */

.footer-disclosure {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---0-75-rem, .75rem);
  max-width: 62rem;
  margin-top: var(--_spacing---2-rem, 2rem);
}

.footer-disclosure p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--_color---light-grey, #bbb9b5);
}

@media screen and (max-width: 991px) {
  .hero-panel {
    padding-top: 9rem;
  }
}

@media screen and (max-width: 767px) {
  .faq-item > summary,
  .faq-answer {
    font-size: var(--_typography---text, 16px);
    padding-right: 2.5rem;
  }

  .faq-item > summary {
    font-size: var(--_typography---heading-6, 24px);
  }
}

/* ---------- pieces added into the template's own sections ---------- */

.hero-note {
  margin-top: var(--_spacing---1-rem, 1rem);
  font-size: 14px;
  color: var(--grey, #3a4140);
}

.pain-label {
  font-size: 13px;
  font-weight: var(--_typography---medium, 500);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--_color---light-accent, #39736a);
  margin-bottom: var(--_spacing---1-rem, 1rem);
}

/* step description inside the template's property-label cards */
.step-desc {
  margin: var(--_spacing---0-5-rem, .5rem) 0 0;
  color: var(--_color---white, #fefcf8);
  font-size: 14px;
  line-height: 1.45;
  max-width: 34ch;
}

.footer-cta-sub {
  margin: var(--_spacing---0-75-rem, .75rem) 0 0;
  max-width: 40rem;
  color: var(--_color---light-grey, #bbb9b5);
  line-height: 1.5;
}

/* The template sized the hero for a four-word headline (420px) and a short
   sub-line (300px). The new copy is longer, so give both room to breathe. */

.heading-2.hero-heading {
  max-width: 17ch;
}

.text.hero-text {
  max-width: 34rem;
}

@media screen and (max-width: 991px) {
  .heading-2.hero-heading {
    max-width: 100%;
  }
  .text.hero-text {
    max-width: 100%;
  }
}

/* The hero button-wrapper is a flex row; keep the note on its own line. */
.button-wrapper {
  flex-wrap: wrap;
}

.hero-note {
  flex-basis: 100%;
}

/* ---------- about page ---------- */

.about-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--_spacing---4-rem, 4rem);
  align-items: start;
}

.about-main {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---4-rem, 4rem);
}

.about-block h2 {
  margin: 0 0 var(--_spacing---1-rem, 1rem);
}

.about-block p {
  margin: 0 0 var(--_spacing---1-rem, 1rem);
  line-height: 1.6;
  color: var(--grey, #3a4140);
  max-width: 44rem;
}

.about-block p:last-child {
  margin-bottom: 0;
}

@media screen and (max-width: 991px) {
  .about-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--_spacing---2-rem, 2rem);
  }
}

/* ---------- faq on the contact page ---------- */

/* Same .3fr 1fr editorial rhythm the rest of the site uses: heading in the
   narrow column, the accordion filling the wide one. */
.contact-faq {
  margin-top: var(--_spacing---8-rem, 8rem);
  display: grid;
  grid-template-columns: .3fr 1fr;
  gap: var(--_spacing---6-rem, 6rem);
  align-items: start;
}

.contact-faq .faq-heading {
  margin: 0;
}

/* the accordion sits under the headline, in the same wide column */
.contact-faq .faq-list {
  grid-column: 2;
  max-width: none;
}

@media screen and (max-width: 991px) {
  .contact-faq {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--_spacing---1-5-rem, 1.5rem);
  }

  .contact-faq .faq-list {
    grid-column: 1;
  }
}

/* ---------- footer CTA ----------
   The template capped this column at 30rem, which fit its short button
   labels ("Get In Touch" / "Learn More"). Ours are longer, so the pair
   wrapped onto two lines — give the column room to hold them side by side.
   The wrapper keeps flex-wrap, so they still stack on narrow screens. */

.footer-inner-three {
  max-width: 44rem;
}

.cta-footer-wrapper {
  justify-content: center;
}

/* ---------- how-it-works step cards ----------
   The template's label scrim is only 16% black, which worked over its
   darker stock photos. These images are brighter and the labels now carry
   a description line too, so deepen the scrim to keep the text legible. */

#how-it-works .property-label {
  background-color: rgba(8, 16, 16, .62);
}