/* ==========================================================================
   Better Home Offer — recreation of betterhomeofferllc.com
   Design tokens lifted from the live site (Kadence theme + Kadence Blocks).
   ========================================================================== */

:root {
  /* Brand palette (as used on the live site) */
  --orange:        #f4943c;
  --orange-alt:    #f3943c;
  --cream:         #d7ccc0;
  --brown:         #332b24;
  --brown-deep:    #281f18;
  --header-bg:     #1d1d1e;
  --btn-dark:      #1d1d1d;
  --hero-overlay:  #322f1d;

  --text:          #2d3748;
  --white:         #ffffff;

  /* Layout */
  --content-width: 1290px;
  --edge-padding:  1.5rem;

  /* Kadence spacing scale */
  --sp-xxs: 0.5rem;
  --sp-xs:  1rem;
  --sp-sm:  1.5rem;
  --sp-md:  2rem;
  --sp-lg:  3rem;
  --sp-xl:  4rem;
  --sp-xxl: 5rem;

  --gap-sm: 1rem;
  --row-gutter: 2rem;

  /* Kadence fluid type scale */
  --fs-sm:   clamp(0.8rem, 0.73rem + 0.217vw, 0.9rem);
  --fs-md:   clamp(1.1rem, 0.995rem + 0.326vw, 1.25rem);
  --fs-lg:   clamp(1.75rem, 1.576rem + 0.543vw, 2rem);
  --fs-xl:   clamp(2.25rem, 1.728rem + 1.63vw, 3rem);

  --font-body:    'Bricolage Grotesque', sans-serif;
  --font-heading: 'Josefin Sans', sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

/* Kadence renders headings at weight 400 / line-height 1.5 on this site;
   only h4 is bold. Matching the live computed styles exactly. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 400;
  margin: 0 0 0.5em;      /* Kadence heading rhythm */
  line-height: 1.5;
  color: #1a202c;
}

h4 { font-weight: 700; }

h1 strong, h2 strong, h3 strong, h4 strong { font-weight: 700; }

p { margin: 0 0 32px; }   /* WP/Kadence block gap */

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a { color: inherit; text-decoration: none; }

/* ---------- Row / container primitives ---------- */
.row { position: relative; }

.row__inner {
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--edge-padding);
  position: relative;
  z-index: 1;
}

/* ---------- Buttons ---------- */
.btns { display: flex; flex-wrap: wrap; gap: var(--gap-sm); }
.btns--center { justify-content: center; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  padding: var(--sp-xs);
  border-radius: 5px;
  color: var(--white);
  transition: color .2s ease, background .2s ease;
}

.btn--orange { background: var(--orange); text-transform: uppercase; }
.btn--orange:hover, .btn--orange:focus { color: #000; background: var(--orange); }

.btn--dark { background: var(--btn-dark); }
.btn--dark:hover, .btn--dark:focus { background: var(--btn-dark); }

/* "Standard" width buttons with generous side padding (Kadence xxl) */
.btn--wide { padding-inline: var(--sp-xxl); }

.btn--full { width: 100%; }
.btn--sm { padding-block: var(--sp-xs); }

/* ---------- Icons ---------- */
.icon {
  display: inline-flex;
  align-items: center;
  margin-right: 0.25em;
  flex-shrink: 0;
}
.icon--orange { color: var(--orange-alt); }

/* ==========================================================================
   HEADER
   ========================================================================== */
.row--header { background-color: var(--header-bg); }

.header__inner {
  max-width: 1800px;
  display: grid;
  grid-template-columns:
    minmax(0, calc(35% - (var(--row-gutter) * 2 / 3)))
    minmax(0, calc(45% - (var(--row-gutter) * 2 / 3)))
    minmax(0, calc(20% - (var(--row-gutter) * 2 / 3)));
  gap: var(--row-gutter);
  align-content: center;
  align-items: center;
  padding-block: var(--sp-sm);
}

/* Renders at the file's natural size (219x96), capped by the block's max-width */
.header__logo img { max-width: 392px; width: auto; }

.header__nav {
  display: flex;
  justify-content: center;
  gap: var(--gap-sm);
}

.header__cta { display: flex; justify-content: center; }

/* ==========================================================================
   HERO
   ========================================================================== */
.row--hero {
  background-image: url('assets/sxFFYxmeuncpsjpz.jpg');
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

.row--hero .row__overlay {
  position: absolute;
  inset: 0;
  background-color: var(--hero-overlay);
  opacity: 0.70;
  z-index: 0;
}

.hero__inner {
  min-height: 80vh;
  padding-top: var(--sp-xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
}

.hero__title,
.hero__lead,
.hero__sub {
  max-width: 1000px;
  margin-inline: auto;
  text-align: center;
  color: var(--white);
}

.hero__title { font-size: 60px; }
.hero__lead  { font-size: var(--fs-md); }
.hero__sub   { font-size: var(--fs-md); }

/* Testimonial box inside the hero */
.quote {
  border: 2px solid var(--orange);
  border-radius: 10px;
  padding: var(--sp-xs) var(--sp-sm);
  align-self: center;
  text-align: center;
  color: var(--white);
}

.quote--hero {
  max-width: 600px;
  margin: var(--sp-lg) auto 0;
}

.quote__stars {
  max-width: 80px;
  width: 100%;
  margin: 0 auto var(--sp-xxs);
}

.quote__text {
  max-width: 800px;
  margin: 0 auto 1.5rem;
  text-align: center;
}

.quote__cite { margin: 0; padding-top: 0; text-align: center; }

/* ==========================================================================
   TRUSTED BY / VIP CARDS
   ========================================================================== */
.trusted__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--row-gutter);
  padding-top: var(--sp-xl);
}

.trusted__stats h3 { font-size: 24px; }

.stat { margin: 0 0 32px; }
.stat-label { margin: 0 0 32px; font-size: 17px; }
.stat-label:last-child { margin-bottom: 0; }

/* WordPress preset sizes as computed on the live site */
.fs-larger { font-size: 40px; }
.fs-large  { font-size: 32px; }

/* Cards */
.card {
  padding: var(--sp-sm);
  border-radius: 10px;
}

.card--cream {
  border: 2px solid var(--cream);
  margin-bottom: var(--sp-xxs);
}
.card--cream:hover { border-color: var(--orange-alt); }

.card--brown {
  background-color: var(--brown);
  border: 2px solid rgba(255, 255, 255, 0.2);
}
.card--brown:hover { border-color: var(--orange-alt); }

.card__title {
  display: flex;
  align-items: center;
  gap: 0.25em;
  max-width: 1000px;
  margin-bottom: var(--sp-xxs);
  text-align: left;
  font-size: var(--fs-md);
  line-height: 1.2;
  color: #000;
}
.card__title--light { color: var(--white); }

.card__lead { margin-bottom: var(--sp-xxs); color: #000; }

.card__body {
  max-width: 1000px;
  margin: 0;
  text-align: left;
  color: #000;
}
.card__body--light { color: var(--white); }

/* ==========================================================================
   BE AN INVESTOR (dark)
   ========================================================================== */
.row--investor { background-color: #000; }

.investor__inner {
  padding-top: var(--sp-sm);
  padding-bottom: var(--sp-md);
}

.investor__title {
  max-width: 1000px;
  margin-inline: auto;
  text-align: center;
  font-size: 48px;
  color: var(--white);
}

.investor__lead {
  max-width: 1000px;
  margin-inline: auto;
  text-align: center;
  font-size: var(--fs-md);
  color: rgba(255, 255, 255, 0.8);
}

.investor__sub {
  margin-top: 48px;
  text-align: center;
  font-size: var(--fs-lg);
  color: var(--white);
}

.investor__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--gap-sm);
  row-gap: var(--sp-lg);
  margin-bottom: var(--sp-md);
}

.quote--dark {
  background-color: var(--brown);
  max-width: 600px;
  margin: var(--sp-xxl) auto 0;
  padding: var(--sp-sm);
}

/* ==========================================================================
   FLIPS
   ========================================================================== */
.row--flips { background-color: #000; }

.flips__inner {
  padding-top: var(--sp-md);
  padding-bottom: var(--sp-xl);
}

.flips__title {
  max-width: 1000px;
  margin-top: 8px;
  margin-inline: auto;
  text-align: center;
  font-size: var(--fs-xl);
  color: var(--white);
}

.flips__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--row-gutter);
  padding-block: var(--sp-sm);
}

.flip {
  background-color: var(--brown-deep);
  border-radius: 10px;
  padding: var(--sp-xs) var(--sp-xs) var(--sp-xs) var(--sp-md);
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
}

.flip__title {
  padding-bottom: 0;
  margin-bottom: 0;
  text-align: left;
  font-size: 28px;
  color: var(--white);
}

/* Full-width shots sit inside the cell's image margin (525px at 1440, 366px at 430) */
.flip > img { margin-inline: 16px; }

.flip__split {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--gap-sm);
  align-items: center;
}

/* The "before" portraits render at the size WordPress serves them at */
.flip__split img {
  width: 230px;
  margin-inline: 16px;
}

/* Shrink-to-fit and centred, as the live column's flex alignment produces */
.flip__caption {
  margin: 0 auto;
  width: fit-content;
  text-align: center;
  font-size: var(--fs-md);
  color: var(--white);
}

/* Full-bleed CTA band — a top-level column on the live site, so it spans the viewport */
.cta {
  background-color: var(--brown-deep);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  padding: var(--sp-sm);
}

.cta__title {
  text-align: center;
  font-size: var(--fs-lg);
  color: var(--white);
}

.cta__body {
  text-align: center;
  color: var(--white);
}

/* ==========================================================================
   FOUNDER
   ========================================================================== */
.founder__inner {
  padding-block: var(--sp-xl);
}

.founder__title {
  max-width: 1000px;
  margin-inline: auto;
  text-align: center;
  font-size: 40px;
  color: #000;
}

.founder__sub {
  max-width: 858px;
  margin-inline: auto;
  text-align: center;
  font-size: 28px;
}

.founder__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--row-gutter);
  padding-block: var(--sp-sm);
  align-items: center;
}

.founder__photo img {
  max-width: 250px;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  margin-inline: auto;
}

.founder__bio p {
  max-width: 1000px;
  margin: 0;
  text-align: left;
  font-size: var(--fs-md);
  color: #000;
}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.questions__title {
  margin-bottom: 0;
  text-align: center;
  font-size: var(--fs-lg);
  color: #000;
}

.contact__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--row-gutter);
  padding-block: var(--sp-sm);
}

.contact__card {
  border: 2px solid var(--cream);
  border-radius: 10px;
  padding: var(--sp-sm);
  align-self: center;
}

.contact__title {
  text-align: left;
  font-size: var(--fs-lg);
  color: var(--orange-alt);
}

.contact__line {
  display: flex;
  align-items: center;
  gap: 0.25em;
  max-width: 1000px;
  margin-bottom: 8px;
  text-align: left;
  color: #000;
}

.contact__line .icon { padding-right: var(--sp-xxs); }
.contact__line a { color: #000; }
.contact__line a:hover { color: var(--orange-alt); }

/* ==========================================================================
   RESPONSIVE — matches the live site's mobile collapse points
   ========================================================================== */
@media (max-width: 1024px) {
  .founder__grid { grid-template-columns: minmax(0, 1fr); }
  .founder__photo img { margin-inline: auto; }

  /* The live header's nav and Inventory columns carry kvs-md-false /
     kvs-sm-false, i.e. they are hidden on tablet and mobile. */
  .header__nav,
  .header__cta { display: none; }

  .header__inner { grid-template-columns: minmax(0, 1fr); justify-items: center; }
}

@media (max-width: 767px) {
  /* Rows collapse to a single column */
  /* .flip__split is deliberately excluded — the live nested row keeps its
     two-column layout on mobile (kt-mobile-layout-row). */
  .header__inner,
  .trusted__inner,
  .investor__grid,
  .flips__grid,
  .contact__inner,
  .founder__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .header__inner { text-align: center; justify-items: center; }
  .header__logo img { max-width: 260px; }

  /* Hero: fixed attachment is disabled on mobile by the live site */
  .row--hero { background-attachment: scroll; }
  .hero__inner { padding: var(--sp-xxs); }
  .hero__title { font-size: var(--fs-xl); }

  .quote--hero { max-width: unset; margin-inline: unset; }

  .investor__title { font-size: var(--fs-xl); }
  .flip__title { text-align: center; }
  .flip { padding-inline: var(--sp-xxs); }
  .flip__split img { width: 250px; }

  .investor__inner,
  .flips__inner { padding-inline: var(--sp-xxs); }

  /* Buttons drop to the small step on mobile */
  .btn { font-size: var(--fs-sm); }

  .contact__line { font-size: var(--fs-md); }
  .contact__spacer { display: none; }
}