/* ==========================================================
   Holly & Home – Navigation + Hero
   ========================================================== */

:root {
  --hh-green: #1f4a3b;
  --hh-green-dark: #163829;
  --hh-gold: #c8a46b;
  --hh-gold-dark: #b38f55;
  --hh-cream: #f8f4ee;
  --hh-text: #2b2b2b;
  --font-heading: "Cormorant Garamond", Georgia, serif;
  --font-body: "Jost", "Segoe UI", sans-serif;
  --header-h: 79px;
}

body {
  font-family: var(--font-body);
  overflow-x: hidden;
  overflow-x: clip; /* keep slide-in animations from causing sideways scroll */
  color: var(--hh-text);
  background: var(--hh-cream);
}

a { text-decoration: none; }

@media (min-width: 1560px) {
  .container { max-width: 1500px; }
}

/* ---------------- Navigation ---------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: #EDE9E2;
  transition: box-shadow .3s ease;
}
.site-header.scrolled { box-shadow: 0 4px 18px rgba(0, 0, 0, .08); }

.navbar { padding: 0; min-height: var(--header-h); }
.navbar > .container { align-items: center; }
.navbar-nav { align-items: center; }

.navbar-brand { padding: 0; margin-right: 1.5rem; }
.brand-logo {
  width: 130px;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
  display: block;
}

.navbar-nav .nav-link {
  font-size: 16px;
  font-weight: 400;
  color: var(--hh-text);
  padding: .5rem 1.4rem !important;
  white-space: nowrap;
  transition: color .2s ease;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active,
.navbar-nav .nav-link:focus { color: var(--hh-green); }

.navbar-nav .dropdown-toggle::after { display: none; }
.navbar-nav .dropdown-toggle .bi {
  font-size: 13px;
  -webkit-text-stroke: .6px;
  margin-left: 2px;
  display: inline-block;
  transition: transform .25s ease;
}
.navbar-nav .dropdown-toggle.show .bi { transform: rotate(180deg); }

.dropdown-menu {
  border: 0;
  border-radius: 10px;
  padding: .5rem 0;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .1);
  background: #fff;
}
.dropdown-item { padding: .55rem 1.25rem; font-size: 15px; }
.dropdown-item:hover,
.dropdown-item:focus { background: var(--hh-cream); color: var(--hh-green); }

.nav-actions { display: flex; align-items: center; gap: 20px; }

.btn-call,
.btn-consult {
  border-radius: 50px;
  font-size: 16px;
  font-weight: 400;
  padding: 12px 22px;
  white-space: nowrap;
  transition: background-color .25s ease, transform .25s ease;
}
.btn-call {
  background: var(--hh-green);
  color: #fff;
  padding: 12px 20px 12px 16px;
}
.btn-call .bi { color: var(--hh-gold); margin-right: 4px; }
.btn-call:hover { background: var(--hh-green-dark); color: #fff; transform: translateY(-1px); }

.btn-consult {
  background: var(--hh-gold);
  color: #fff;
  padding-left: 40px;
  padding-right: 40px;
}
.btn-consult:hover { background: var(--hh-gold-dark); color: #fff; transform: translateY(-1px); }

/* Toggler */
.navbar-toggler {
  border: 0;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.navbar-toggler:focus { box-shadow: none; }
.toggler-bar {
  width: 26px;
  height: 2px;
  background: var(--hh-green);
  border-radius: 2px;
  transition: transform .3s ease, opacity .3s ease;
}
.navbar-toggler[aria-expanded="true"] .toggler-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar-toggler[aria-expanded="true"] .toggler-bar:nth-child(2) { opacity: 0; }
.navbar-toggler[aria-expanded="true"] .toggler-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------------- Hero ---------------- */
.hero {
  position: relative;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  display: flex;
  align-items: center;
  padding: 80px 0;
  overflow: hidden;
  background: var(--hh-cream);
}

.hero-media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 73%;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* soft fade of the photo into the cream background */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
      var(--hh-cream) 0%,
      rgba(248, 244, 238, .85) 12%,
      rgba(248, 244, 238, .45) 25%,
      rgba(248, 244, 238, 0) 42%);
}

.hero-content { position: relative; z-index: 2; }

.hero-eyebrow {
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--hh-gold);
  margin-bottom: 26px;
}

.hero-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(2.5rem, 4.4vw, 4.1rem);
  line-height: 1.02;
  color: var(--hh-green);
  margin-bottom: 52px;
  max-width: 610px;
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 40px;
}
.btn-hero-primary,
.btn-hero-outline {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  border-radius: 6px;
  padding: 10px 18px;
  text-align: center;
  transition: background-color .25s ease, color .25s ease, transform .25s ease;
}
.btn-hero-primary {
  background: var(--hh-green);
  color: #fff;
  border: 1px solid var(--hh-green);
  max-width: 275px;
}
.btn-hero-primary:hover { background: var(--hh-green-dark); color: #fff; transform: translateY(-2px); }

.btn-hero-outline {
  background: #fff;
  color: #111;
  border: 1px solid var(--hh-green);
  max-width: 220px;
}
.btn-hero-outline:hover { background: var(--hh-green); color: #fff; transform: translateY(-2px); }

.btn-hero-primary .bi,
.btn-hero-outline .bi {
  -webkit-text-stroke: 1px;
  margin-left: 6px;
  transition: transform .25s ease;
  display: inline-block;
}
.btn-hero-primary:hover .bi,
.btn-hero-outline:hover .bi { transform: translateX(4px); }

.hero-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  font-weight: 600;
  color: var(--hh-green);
}
.hero-phone .bi { color: var(--hh-gold); font-size: 28px; }
.hero-phone:hover { color: var(--hh-gold-dark); }

/* ---------------- Responsive ---------------- */

/* Desktop: hover-open dropdown */
@media (min-width: 1200px) {
  .navbar-nav .dropdown:hover > .dropdown-menu { display: block; margin-top: 0; }
  .navbar-nav .dropdown:hover > .dropdown-toggle .bi { transform: rotate(180deg); }
}

/* Large desktop down: tighten nav spacing */
@media (max-width: 1399.98px) {
  .navbar-nav .nav-link { padding: .5rem .8rem !important; }
  .nav-actions { gap: 12px; }
  .btn-consult { padding-left: 26px; padding-right: 26px; }
}

/* Collapsed navbar (below xl) */
@media (max-width: 1199.98px) {
  .navbar { padding: 8px 0; }
  .brand-logo { width: 110px; }

  .navbar-collapse {
    background: #fff;
    border-radius: 12px;
    margin: 0;               /* margin/padding on the collapsing box itself cannot animate and caused a jump */
    padding: 0;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .08);
    max-height: calc(100vh - 110px);
    overflow-y: auto;
  }
  /* the spacing lives on the inside, so it opens and closes together with the panel */
  .navbar-collapse > .navbar-nav { padding: 12px 20px 0; }
  .navbar-collapse > .nav-actions { padding: 0 20px 20px; }
  .navbar-collapse.collapsing { transition: height .32s cubic-bezier(.4, 0, .2, 1); overflow: hidden; }
  .navbar-nav { align-items: stretch; }
  .navbar-nav .nav-link {
    padding: .75rem 0 !important;
    border-bottom: 1px solid #eee;
  }
  .navbar-nav .dropdown-toggle { display: flex; justify-content: space-between; align-items: center; }
  .dropdown-menu { box-shadow: none; background: var(--hh-cream); margin: 6px 0; }

  .nav-actions { flex-direction: column; align-items: stretch; margin-top: 18px; }
  .btn-call, .btn-consult { text-align: center; }
}

/* Tablet & mobile hero: photo covers full background with a cream wash */
@media (max-width: 991.98px) {
  .hero {
    min-height: auto;
    padding: 90px 0;
  }
  .hero-media { width: 100%; }
  .hero-media::after {
    background: linear-gradient(90deg,
        rgba(248, 244, 238, .95) 0%,
        rgba(248, 244, 238, .85) 55%,
        rgba(248, 244, 238, .55) 100%);
  }
  .hero-title { margin-bottom: 36px; }
}

@media (max-width: 575.98px) {
  .hero { padding: 60px 0; }
  .hero-media::after { background: rgba(248, 244, 238, .88); }
  .hero-eyebrow { font-size: 14px; margin-bottom: 16px; }
  .hero-title { font-size: 2.4rem; margin-bottom: 28px; }
  .hero-buttons { flex-direction: column; margin-bottom: 30px; }
  .btn-hero-primary,
  .btn-hero-outline { max-width: none; width: 100%; font-size: 16px; }
  .hero-phone { font-size: 17px; }
  .hero-phone .bi { font-size: 22px; }
}

/* ---------------- Highlights strip ---------------- */
.highlights {
  background: var(--hh-cream);
  padding: 22px 0;
}

.highlights-inner {
  display: flex;
  align-items: center;
  gap: 36px;
}

.highlights-line {
  flex: 1 1 0;
  min-width: 40px;
  height: 3px;
  background: var(--hh-gold);
  border-radius: 2px;
}

.highlights-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.highlights-list li {
  display: flex;
  align-items: center;
  font-size: 18px;
  color: #3a3a3a;
  white-space: nowrap;
}

/* dot separator between items */
.highlights-list li + li::before {
  content: "";
  width: 10px;
  height: 10px;
  margin: 0 40px;
  border-radius: 50%;
  background: #333;
  flex-shrink: 0;
}

@media (max-width: 1199.98px) {
  .highlights-inner { gap: 24px; }
  .highlights-list li { font-size: 17px; }
  .highlights-list li + li::before { margin: 0 24px; }
}

/* Tablet: lines sit above and below, items wrap centered */
@media (max-width: 991.98px) {
  .highlights { padding: 28px 0; }
  .highlights-inner { flex-direction: column; gap: 18px; }
  .highlights-line { flex: none; width: 120px; }
  .highlights-list { row-gap: 10px; }
  .highlights-list li { font-size: 16px; }
  .highlights-list li + li::before { width: 8px; height: 8px; margin: 0 18px; }
  .highlights-list li:last-child { flex-basis: 100%; justify-content: center; }
  .highlights-list li:last-child::before { display: none; }
}

/* Mobile: one item per line, dots become small gold markers */
@media (max-width: 575.98px) {
  .highlights-line { width: 80px; }
  .highlights-list { flex-direction: column; row-gap: 12px; }
  .highlights-list li {
    white-space: normal;
    text-align: center;
    justify-content: center;
  }
  .highlights-list li + li::before { display: none; }
  .highlights-list li::after { display: none; }
}

/* ---------------- Services ---------------- */
.services-section {
  background: #faf7f2;
  padding: 50px 0 80px;
}

.section-heading { margin-bottom: 56px; }

.section-eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--hh-gold);
  margin-bottom: 14px;
}

.section-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(2rem, 3vw, 2.6rem);
  color: var(--hh-green);
  margin: 0;
}

.service-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fcfaf6;
  border: 1px solid #ddd8d0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .08);
  transition: transform .3s ease, box-shadow .3s ease;
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 30px rgba(0, 0, 0, .1);
}

.service-card-img {
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.service-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}
.service-card:hover .service-card-img img { transform: scale(1.05); }

.service-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px 10px 26px;
}

.service-card-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 24px;
  color: var(--hh-green);
  margin-bottom: 18px;
}

.service-card-text {
  font-size: 17px;
  line-height: 1.55;
  color: #222;
  margin-bottom: 18px;
  padding-left: 2px;
}

.service-card-link {
  margin-top: auto;
  align-self: flex-start;
  color: var(--hh-green);
  font-size: 28px;
  line-height: 1;
}
.service-card-link .bi {
  display: inline-block;
  transition: transform .25s ease;
}
.service-card-link:hover { color: var(--hh-gold); }
.service-card:hover .service-card-link .bi { transform: translateX(6px); }

@media (max-width: 1399.98px) {
  .service-card-title { font-size: 22px; }
  .service-card-text { font-size: 16px; }
}

@media (max-width: 1199.98px) {
  .service-card-body { padding: 18px 14px 22px; }
  .service-card-title { font-size: 20px; }
  .service-card-text { font-size: 15px; }
}

/* Tablet: 2 x 2 grid (col-sm-6) */
@media (max-width: 991.98px) {
  .services-section { padding: 50px 0 60px; }
  .section-heading { margin-bottom: 40px; }
  .service-card-title { font-size: 22px; }
  .service-card-text { font-size: 16px; }
}

/* Mobile: single column */
@media (max-width: 575.98px) {
  .services-section { padding: 40px 0 50px; }
  .section-eyebrow { font-size: 16px; margin-bottom: 8px; }
  .section-title { font-size: 1.85rem; }
  .section-heading { margin-bottom: 30px; }
  .service-card-body { padding: 18px 16px 22px; }
}

/* ---------------- Not sure / Home check ---------------- */
.not-sure-section {
  position: relative;
  overflow: hidden;
  min-height: 640px;
  display: flex;
  align-items: center;
  padding: 80px 0;
  background: #e0dcc8;
}

.not-sure-bg {
  position: absolute;
  inset: 0;
}
.not-sure-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
/* beige wash on the left, fading out toward the right */
.not-sure-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
      rgba(224, 220, 200, .6) 0%,
      rgba(224, 220, 200, .6) 12.5%,
      rgba(224, 220, 200, .94) 13.5%,
      rgba(224, 220, 200, .94) 50%,
      rgba(224, 220, 200, 0) 60%);
}

.not-sure-inner {
  display: flex;
  align-items: center;
  gap: 80px;
}

.not-sure-icon {
  flex-shrink: 0;
  width: 132px;
  color: var(--hh-green);
  margin-left: 30px;
}
.not-sure-icon svg { width: 100%; height: auto; display: block; }

.not-sure-eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--hh-green);
  margin: 0 0 18px 6px;
}

.not-sure-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2rem, 2.8vw, 2.9rem);
  line-height: 1.3;
  color: var(--hh-green);
  margin-bottom: 50px;
}

.btn-not-sure {
  font-family: var(--font-heading);
  font-size: 21px;
  font-weight: 600;
  color: #fff;
  background: var(--hh-green);
  border-radius: 8px;
  padding: 13px 48px;
  transition: background-color .25s ease, transform .25s ease;
}
.btn-not-sure:hover { background: var(--hh-green-dark); color: #fff; transform: translateY(-2px); }

@media (max-width: 1399.98px) {
  .not-sure-inner { gap: 56px; }
  .not-sure-icon { margin-left: 0; width: 120px; }
}

/* Tablet: stronger wash so text stays readable over the photo */
@media (max-width: 991.98px) {
  .not-sure-section { min-height: 0; padding: 80px 0; }
  .not-sure-bg::after {
    background: linear-gradient(90deg,
        rgba(224, 220, 200, .95) 0%,
        rgba(224, 220, 200, .9) 65%,
        rgba(224, 220, 200, .6) 100%);
  }
  .not-sure-inner { gap: 36px; }
  .not-sure-icon { width: 100px; }
  .not-sure-title { margin-bottom: 36px; }
}

/* Mobile: icon above, everything centered */
@media (max-width: 575.98px) {
  .not-sure-section { padding: 60px 0; }
  .not-sure-bg::after { background: rgba(224, 220, 200, .92); }
  .not-sure-inner { flex-direction: column; text-align: center; gap: 24px; }
  .not-sure-icon { width: 80px; }
  .not-sure-eyebrow { font-size: 17px; margin: 0 0 12px; }
  .not-sure-title { font-size: 1.85rem; margin-bottom: 28px; }
  .not-sure-title br { display: none; }
  .btn-not-sure { font-size: 19px; padding: 12px 36px; }
}

/* ---------------- Our approach ---------------- */
.approach-section {
  background: #faf7f2;
  padding: 50px 0 60px;
}
.approach-section .section-heading { margin-bottom: 70px; }

.approach-step {
  display: flex;
  align-items: flex-start;
  gap: 26px;
  max-width: 440px;
}

.approach-num {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--hh-gold);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 3px;
  transition: transform .3s ease, background-color .3s ease;
}
.approach-step:hover .approach-num { transform: scale(1.08); background: var(--hh-green); }

.approach-title {
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 600;
  color: var(--hh-green);
  margin: 10px 0 10px;
}

.approach-text {
  font-size: 17px;
  line-height: 1.55;
  color: var(--hh-green);
  margin: 0;
}

@media (max-width: 1199.98px) {
  .approach-step { gap: 18px; }
  .approach-title { font-size: 22px; }
  .approach-text { font-size: 16px; }
}

/* Tablet: 2 + 1, centered */
@media (max-width: 991.98px) {
  .approach-section .section-heading { margin-bottom: 44px; }
  .approach-step { margin: 0 auto; }
}

/* Mobile: stacked list */
@media (max-width: 575.98px) {
  .approach-section { padding: 40px 0 50px; }
  .approach-section .section-heading { margin-bottom: 32px; }
  .approach-num { width: 44px; height: 44px; font-size: 28px; }
  .approach-title { font-size: 20px; margin-top: 7px; }
}

/* ---------------- Holiday CTA ---------------- */
.holiday-section {
  position: relative;
  overflow: hidden;
  min-height: 335px;
  display: flex;
  align-items: center;
  padding: 70px 0;
  background: #1c2b22;
}

.holiday-bg {
  position: absolute;
  inset: 0;
}
.holiday-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
/* deep green band through the middle, photo visible at the sides */
.holiday-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
      rgba(22, 56, 41, .15) 0%,
      rgba(22, 56, 41, .25) 18%,
      rgba(22, 56, 41, .88) 36%,
      rgba(22, 56, 41, .88) 60%,
      rgba(22, 56, 41, .2) 67%,
      rgba(22, 56, 41, .1) 100%);
}

.holiday-content { position: relative; z-index: 1; }

.holiday-eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--hh-gold);
  margin-bottom: 8px;
}

.holiday-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(1.9rem, 2.3vw, 2.4rem);
  color: #fff;
  margin-bottom: 10px;
}

.holiday-subtitle {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 32px;
}

.btn-holiday {
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  background: var(--hh-gold);
  border-radius: 8px;
  padding: 14px 40px;
  transition: background-color .25s ease, transform .25s ease;
}
.btn-holiday:hover { background: var(--hh-gold-dark); color: #fff; transform: translateY(-2px); }

/* Tablet: widen the green band so text never sits on busy photo */
@media (max-width: 991.98px) {
  .holiday-bg::after {
    background: linear-gradient(90deg,
        rgba(22, 56, 41, .45) 0%,
        rgba(22, 56, 41, .88) 22%,
        rgba(22, 56, 41, .88) 78%,
        rgba(22, 56, 41, .45) 100%);
  }
}

@media (max-width: 575.98px) {
  .holiday-section { min-height: 0; padding: 60px 0; }
  .holiday-bg::after { background: rgba(22, 56, 41, .85); }
  .holiday-eyebrow { font-size: 16px; }
  .holiday-title { font-size: 1.75rem; }
  .holiday-subtitle { font-size: 19px; margin-bottom: 26px; }
  .btn-holiday { font-size: 17px; padding: 12px 30px; }
}

/* ---------------- Living Connects ---------------- */
.living-connect-section {
  position: relative;
  overflow: hidden;
  background: #faf7f2;
  min-height: 330px;
  display: flex;
  align-items: center;
}

.living-connect-media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 59.6%;
}
.living-connect-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.living-connect-content { padding: 60px 30px 50px 0; }
.living-connect-content .section-eyebrow { margin-bottom: 18px; }

.living-connect-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(2rem, 2.4vw, 2.5rem);
  color: var(--hh-green);
  margin-bottom: 26px;
}

.living-connect-text {
  font-size: 17px;
  line-height: 1.55;
  color: #222;
  margin-bottom: 22px;
}

.living-connect-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 17px;
  font-weight: 600;
  color: #111;
}
.living-connect-link .bi {
  font-size: 26px;
  color: var(--hh-green);
  transition: transform .25s ease;
}
.living-connect-link:hover { color: var(--hh-green); }
.living-connect-link:hover .bi { transform: translateX(6px); }

@media (max-width: 1199.98px) {
  .living-connect-media { width: 55%; }
  .living-connect-text { font-size: 16px; }
}

/* Tablet & mobile: image on top, text below */
@media (max-width: 991.98px) {
  .living-connect-section { display: block; min-height: 0; }
  .living-connect-media {
    position: relative;
    width: 100%;
    aspect-ratio: 678 / 240;
  }
  .living-connect-content { padding: 44px 0 50px; }
}

@media (max-width: 575.98px) {
  .living-connect-media { aspect-ratio: 4 / 3; }
  .living-connect-media img { object-position: 35% center; }
  .living-connect-content { padding: 32px 0 40px; }
  .living-connect-title { font-size: 1.85rem; margin-bottom: 18px; }
  .living-connect-link { font-size: 16px; }
}

/* ---------------- Home you love CTA ---------------- */
.home-you-love-section {
  background: #204535;
  color: #fff;
  padding: 60px 0 70px;
}

.hyl-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(1.75rem, 2.2vw, 2.15rem);
  color: #fff;
  margin-bottom: 20px;
  white-space: nowrap;
}

.hyl-subtitle {
  font-size: 17px;
  color: #fff;
  margin: 0 0 0 4px;
}

.hyl-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px 50px;
  margin-bottom: 30px;
}

.btn-hyl {
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  background: var(--hh-gold);
  border-radius: 8px;
  padding: 14px 40px;
  transition: background-color .25s ease, transform .25s ease;
}
.btn-hyl:hover { background: var(--hh-gold-dark); color: #fff; transform: translateY(-2px); }

.hyl-contacts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px 50px;
}

.hyl-contact {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  transition: color .25s ease;
}
.hyl-contact:hover { color: var(--hh-gold); }

.hyl-phone-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--hh-gold);
  color: #204535;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.hyl-mail-icon {
  font-size: 40px;
  color: var(--hh-gold);
  line-height: 1;
  flex-shrink: 0;
}

.hyl-note {
  font-size: 18px;
  line-height: 1.6;
  color: #fff;
  margin: 0;
  max-width: 920px;
}
.hyl-note a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.hyl-note a:hover { color: var(--hh-gold); }

@media (max-width: 1399.98px) {
  .hyl-actions { gap: 20px 32px; }
  .hyl-contacts { gap: 20px 32px; }
  .btn-hyl { padding: 13px 30px; font-size: 18px; }
  .hyl-contact { font-size: 18px; gap: 14px; }
  .hyl-note { font-size: 17px; }
}

@media (max-width: 1199.98px) {
  .hyl-title { white-space: normal; }
}

/* Tablet: heading row on top, actions wrap below */
@media (max-width: 991.98px) {
  .home-you-love-section { padding: 50px 0 56px; text-align: center; }
  .hyl-title { margin-bottom: 12px; }
  .hyl-subtitle { margin: 0; }
  .hyl-actions { flex-direction: column; gap: 22px; }
  .hyl-contacts { justify-content: center; gap: 16px 36px; }
  .hyl-note { font-size: 16px; margin: 0 auto; }
}

/* Mobile: stack everything */
@media (max-width: 575.98px) {
  .home-you-love-section { padding: 44px 0 48px; }
  .hyl-title { font-size: 1.6rem; }
  .hyl-subtitle { font-size: 16px; }
  .hyl-actions { flex-direction: column; gap: 18px; }
  .hyl-actions { align-items: stretch; }
  .hyl-contacts { flex-direction: column; gap: 16px; }
  .btn-hyl { font-size: 17px; }
  .hyl-contact { font-size: 16px; gap: 12px; word-break: break-word; }
  .hyl-phone-icon { width: 40px; height: 40px; font-size: 18px; }
  .hyl-mail-icon { font-size: 32px; }
  .hyl-note { font-size: 15px; }
}

/* ---------------- Footer ---------------- */
.site-footer {
  background: #faf7f2;
  padding: 22px 0 36px;
}

.footer-logo { display: inline-block; }
.footer-logo img {
  width: 100%;
  max-width: 336px;
  border-radius: 10px;
  display: block;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 27px;
  margin-bottom: 18px;
}
.footer-nav a {
  font-size: 18px;
  color: var(--hh-green);
  transition: color .2s ease;
}
.footer-nav a:hover { color: var(--hh-gold); }

.footer-copy {
  text-align: center;
  font-size: 18px;
  color: #111;
  margin-bottom: 12px;
}

.footer-legal {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 26px;
}
.footer-legal a {
  font-size: 18px;
  color: var(--hh-green);
  transition: color .2s ease;
}
.footer-legal a:hover { color: var(--hh-gold); }
.footer-divider {
  width: 1px;
  height: 30px;
  background: #111;
}

.footer-right { text-align: center; }
.footer-area {
  font-size: 18px;
  font-weight: 600;
  color: var(--hh-green);
  margin-bottom: 20px;
}

.footer-social {
  display: flex;
  justify-content: center;
  gap: 12px;
}
.footer-social a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--hh-green);
  color: #faf7f2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  transition: background-color .25s ease, transform .25s ease;
}
.footer-social a:hover { background: var(--hh-gold); color: #fff; transform: translateY(-2px); }

@media (max-width: 1399.98px) {
  .footer-nav { gap: 8px 20px; }
  .footer-nav a,
  .footer-copy,
  .footer-legal a { font-size: 17px; }
  .footer-area { font-size: 17px; }
}

@media (max-width: 1199.98px) {
  .footer-nav { gap: 6px 16px; }
  .footer-nav a,
  .footer-copy,
  .footer-legal a { font-size: 16px; }
  .footer-area { font-size: 16px; }
}

@media (min-width: 992px) {
  .footer-nav { padding-top: 30px; }
  .footer-right { padding-top: 30px; }
}

/* Tablet: logo + area/social on top row, links below */
@media (max-width: 991.98px) {
  .site-footer { padding: 36px 0 32px; }
  .footer-logo img { max-width: 260px; }
  .footer-right { text-align: right; }
  .footer-social { justify-content: flex-end; }
  .footer-nav { gap: 8px 24px; padding-top: 22px; border-top: 1px solid #e3ddd2; }
}

/* Mobile: everything centered and stacked */
@media (max-width: 767.98px) {
  .site-footer .order-1 { text-align: center; }
  .footer-logo img { max-width: 220px; margin: 0 auto; }
  .footer-right { text-align: center; }
  .footer-social { justify-content: center; }
  .footer-area { margin-bottom: 14px; }
}

@media (max-width: 575.98px) {
  .footer-nav { gap: 8px 18px; }
  .footer-nav a,
  .footer-copy,
  .footer-legal a { font-size: 15px; }
  .footer-legal { gap: 18px; }
  .footer-divider { height: 22px; }
}

/* ==========================================================
   INNER PAGES
   ========================================================== */

/* ---------------- Shared buttons ---------------- */
.btn-hh,
.btn-hh-outline {
  font-size: 17px;
  font-weight: 600;
  border-radius: 6px;
  padding: 12px 26px;
  transition: background-color .25s ease, color .25s ease, transform .25s ease;
}
.btn-hh { background: var(--hh-green); color: #fff; border: 1px solid var(--hh-green); }
.btn-hh:hover,
.btn-hh:focus-visible { background: var(--hh-green-dark); color: #fff; transform: translateY(-2px); }
.btn-hh-outline { background: #fff; color: var(--hh-green); border: 1px solid var(--hh-green); }
.btn-hh-outline:hover,
.btn-hh-outline:focus-visible { background: var(--hh-green); color: #fff; }
.btn-hh-outline:disabled { opacity: .45; }
.btn-hh .bi,
.btn-hh-outline .bi { -webkit-text-stroke: .6px; margin-left: 6px; display: inline-block; transition: transform .25s ease; }
.btn-hh-outline .bi-arrow-left { margin: 0 6px 0 0; }
.btn-hh:hover .bi-arrow-right { transform: translateX(4px); }

/* ---------------- Page banner ---------------- */
.page-banner {
  position: relative;
  overflow: hidden;
  min-height: 420px;
  display: flex;
  align-items: center;
  padding: 80px 0;
  background: var(--hh-cream);
}
.page-banner-media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 62%;
}
.page-banner-media img { width: 100%; height: 100%; object-fit: cover; }
.page-banner-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
      var(--hh-cream) 0%,
      rgba(248, 244, 238, .8) 18%,
      rgba(248, 244, 238, .3) 40%,
      rgba(248, 244, 238, 0) 60%);
}
.page-banner-content { position: relative; z-index: 1; max-width: 620px; }

.hh-breadcrumb { margin-bottom: 18px; font-size: 15px; font-weight: 500; text-transform: uppercase; letter-spacing: .4px; }
.hh-breadcrumb a { color: var(--hh-gold); }
.hh-breadcrumb a:hover { color: var(--hh-gold-dark); }
.hh-breadcrumb .breadcrumb-item.active { color: var(--hh-green); }
.hh-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: var(--hh-gold); content: "•"; }

.page-banner-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(2.3rem, 4vw, 3.6rem);
  line-height: 1.08;
  color: var(--hh-green);
  margin-bottom: 18px;
}
.page-banner-text { font-size: 18px; line-height: 1.6; color: #333; margin: 0; max-width: 520px; }

@media (max-width: 991.98px) {
  .page-banner { min-height: 340px; padding: 70px 0; }
  .page-banner-media { width: 100%; }
  .page-banner-media::after {
    background: linear-gradient(90deg, rgba(248, 244, 238, .95) 0%, rgba(248, 244, 238, .85) 60%, rgba(248, 244, 238, .55) 100%);
  }
}
@media (max-width: 575.98px) {
  .page-banner { min-height: 0; padding: 56px 0; }
  .page-banner-media::after { background: rgba(248, 244, 238, .88); }
  .page-banner-title { font-size: 2.2rem; }
  .page-banner-text { font-size: 16px; }
}

/* ---------------- Service detail rows ---------------- */
.service-detail { background: #faf7f2; padding: 80px 0; scroll-margin-top: 80px; }
.service-detail-alt { background: #f3eee5; }

.service-detail-img {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .1);
  aspect-ratio: 4 / 3;
}
.service-detail-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.service-detail-img:hover img { transform: scale(1.04); }

.service-detail-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(1.9rem, 2.6vw, 2.6rem);
  color: var(--hh-green);
  margin-bottom: 18px;
}
.service-detail-text { font-size: 17px; line-height: 1.65; color: #333; margin-bottom: 18px; }

.hh-checklist { list-style: none; padding: 0; margin: 0 0 30px; display: grid; gap: 10px; }
.hh-checklist li { position: relative; padding-left: 32px; font-size: 17px; color: var(--hh-green); }
.hh-checklist li::before {
  content: "\F26E"; /* bootstrap-icons check2 */
  font-family: "bootstrap-icons";
  position: absolute;
  left: 0;
  top: 1px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--hh-gold);
  color: #fff;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 991.98px) {
  .service-detail { padding: 60px 0; }
}
@media (max-width: 575.98px) {
  .service-detail { padding: 44px 0; }
  .service-detail-text,
  .hh-checklist li { font-size: 16px; }
  .service-detail .btn-hh { width: 100%; }
}

/* ---------------- Home check quiz ---------------- */
.check-section { background: #faf7f2; padding: 70px 0 80px; }

.check-card {
  max-width: 820px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #e6e0d6;
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .06);
  padding: 44px 48px;
}

.check-progress { height: 6px; background: #eee7da; border-radius: 6px; overflow: hidden; }
.check-progress-bar { height: 100%; width: 25%; background: var(--hh-gold); border-radius: 6px; transition: width .4s ease; }
.check-count { font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: .5px; color: var(--hh-gold); margin: 14px 0 22px; }

.check-step { display: none; border: 0; padding: 0; margin: 0; min-width: 0; }
.check-step.active { display: block; animation: checkFade .35s ease; }
@keyframes checkFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.check-question {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(1.7rem, 2.4vw, 2.2rem);
  color: var(--hh-green);
  margin-bottom: 24px;
  float: none;
}

.check-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.check-option { position: relative; cursor: pointer; margin: 0; }
.check-option input { position: absolute; opacity: 0; pointer-events: none; }
.check-option span {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 100%;
  padding: 16px 18px;
  border: 1px solid #ddd6ca;
  border-radius: 8px;
  font-size: 17px;
  color: #222;
  background: #fcfaf6;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.check-option span .bi { font-size: 22px; color: var(--hh-gold); flex-shrink: 0; }
.check-option:hover span { border-color: var(--hh-gold); }
.check-option input:focus-visible + span { box-shadow: 0 0 0 3px rgba(200, 164, 107, .35); }
.check-option input:checked + span { border-color: var(--hh-green); background: #eef3ef; box-shadow: inset 0 0 0 1px var(--hh-green); }
.check-option input:checked + span .bi { color: var(--hh-green); }

.check-error { min-height: 24px; margin: 14px 0 0; font-size: 15px; color: #b3412e; }
.check-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; }

.check-result { text-align: center; padding: 10px 0; animation: checkFade .4s ease; }
.check-result-icon {
  width: 76px;
  height: 76px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--hh-gold);
  color: #fff;
  font-size: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.check-result-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  color: var(--hh-green);
  margin-bottom: 14px;
}
.check-result-text { font-size: 17px; line-height: 1.6; color: #333; max-width: 560px; margin: 0 auto 10px; }
.check-result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 26px 0 18px; }
.check-restart { background: none; border: 0; color: var(--hh-green); font-size: 15px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.check-restart:hover { color: var(--hh-gold); }

@media (max-width: 767.98px) {
  .check-card { padding: 32px 26px; }
  .check-options { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
  .check-section { padding: 40px 0 50px; }
  .check-card { padding: 26px 18px; }
  .check-option span { font-size: 16px; padding: 14px; }
  .check-result-actions .btn { width: 100%; }
}

/* ---------------- Approach timeline ---------------- */
.timeline-section { background: #faf7f2; padding: 70px 0 80px; }
.timeline { position: relative; max-width: 820px; margin: 0 auto; }
.timeline::before {
  content: "";
  position: absolute;
  left: 24px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: linear-gradient(var(--hh-gold), rgba(200, 164, 107, .2));
}
.timeline-item { position: relative; display: flex; gap: 32px; padding-bottom: 46px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item .approach-num { position: relative; z-index: 1; box-shadow: 0 0 0 8px #faf7f2; }
.timeline-body {
  flex: 1;
  background: #fff;
  border: 1px solid #e6e0d6;
  border-radius: 10px;
  padding: 22px 26px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .04);
}
.timeline-body .approach-title { margin-top: 0; }

@media (max-width: 575.98px) {
  .timeline-section { padding: 44px 0 50px; }
  .timeline::before { left: 21px; }
  .timeline-item { gap: 18px; padding-bottom: 30px; }
  .timeline-body { padding: 18px; }
}

/* ---------------- Value cards ---------------- */
.values-section { background: #f3eee5; padding: 70px 0 80px; }
.value-card {
  height: 100%;
  text-align: center;
  background: #fcfaf6;
  border: 1px solid #e6e0d6;
  border-radius: 10px;
  padding: 34px 24px;
  transition: transform .3s ease, box-shadow .3s ease;
}
.value-card:hover { transform: translateY(-6px); box-shadow: 0 16px 30px rgba(0, 0, 0, .08); }
.value-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--hh-green);
  color: var(--hh-gold);
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.value-title { font-family: var(--font-heading); font-weight: 600; font-size: 26px; color: var(--hh-green); margin-bottom: 10px; }
.value-text { font-size: 16px; line-height: 1.6; color: #333; margin: 0; }

@media (max-width: 575.98px) {
  .values-section { padding: 44px 0 50px; }
}

/* ---------------- About story ---------------- */
.about-story { background: #faf7f2; padding: 80px 0; }
.about-story-img {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .1);
}
.about-story-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 991.98px) { .about-story { padding: 60px 0; } }
@media (max-width: 575.98px) {
  .about-story { padding: 44px 0; }
  .about-story .btn-hh { width: 100%; }
}

/* ---------------- Gallery ---------------- */
.gallery-section { background: #faf7f2; padding: 60px 0 80px; }

.gallery-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 36px; }
.gallery-filter {
  border: 1px solid var(--hh-green);
  background: transparent;
  color: var(--hh-green);
  font-size: 16px;
  font-weight: 500;
  border-radius: 50px;
  padding: 8px 22px;
  transition: background-color .2s ease, color .2s ease;
}
.gallery-filter:hover { background: rgba(31, 74, 59, .08); }
.gallery-filter.active { background: var(--hh-green); color: #fff; }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 260px;
  grid-auto-flow: dense;
  gap: 18px;
}
.gallery-item {
  position: relative;
  border: 0;
  padding: 0;
  border-radius: 10px;
  overflow: hidden;
  background: #e9e3d8;
  cursor: zoom-in;
}
.gallery-item-wide { grid-column: span 2; }
.gallery-item-tall { grid-row: span 2; }
.gallery-item-wide-lg { grid-column: span 2; }
.gallery-item-full { grid-column: 1 / -1; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.gallery-item:hover img { transform: scale(1.06); }
.gallery-caption {
  position: absolute;
  left: 14px;
  bottom: 14px;
  background: rgba(250, 247, 242, .92);
  color: var(--hh-green);
  font-size: 14px;
  font-weight: 500;
  border-radius: 50px;
  padding: 5px 14px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s ease, transform .3s ease;
}
.gallery-item:hover .gallery-caption,
.gallery-item:focus-visible .gallery-caption { opacity: 1; transform: none; }
.gallery-item.is-hidden { display: none; }

.gallery-modal .modal-content { position: relative; background: transparent; border: 0; }
.gallery-modal img { width: 100%; max-height: 85vh; object-fit: contain; border-radius: 8px; }
.gallery-modal-close,
.gallery-modal-nav {
  position: absolute;
  border: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(250, 247, 242, .9);
  color: var(--hh-green);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.gallery-modal-close { top: 12px; right: 12px; }
.gallery-modal-nav { top: 50%; transform: translateY(-50%); }
.gallery-modal-nav.prev { left: 12px; }
.gallery-modal-nav.next { right: 12px; }
.gallery-modal-close:hover,
.gallery-modal-nav:hover { background: var(--hh-gold); color: #fff; }

@media (max-width: 991.98px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; }
  .gallery-item-wide-lg { grid-column: auto; }
}
@media (max-width: 575.98px) {
  .gallery-section { padding: 40px 0 50px; }
  .gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 240px; gap: 14px; }
  .gallery-item-wide,
  .gallery-item-tall,
  .gallery-item-full { grid-column: auto; grid-row: auto; }
  .gallery-caption { opacity: 1; transform: none; }
}

/* ---------------- Contact ---------------- */
.contact-section { background: #faf7f2; padding: 70px 0 80px; }

.contact-info-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid #e6e0d6;
  color: var(--hh-green);
  font-size: 18px;
  font-weight: 600;
  word-break: break-word;
}
a.contact-info-item:hover { color: var(--hh-gold-dark); }
.contact-info-item small {
  display: block;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--hh-gold);
}
.contact-info-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--hh-green);
  color: var(--hh-gold);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-social { justify-content: flex-start; margin-top: 24px; }

.contact-card {
  background: #fff;
  border: 1px solid #e6e0d6;
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .06);
  padding: 40px;
}
.contact-form .form-label { font-size: 15px; font-weight: 500; color: var(--hh-green); }
.contact-form .form-control,
.contact-form .form-select {
  border: 1px solid #ddd6ca;
  border-radius: 6px;
  padding: 12px 14px;
  font-size: 16px;
  background-color: #fcfaf6;
}
.contact-form .form-control:focus,
.contact-form .form-select:focus { border-color: var(--hh-gold); box-shadow: 0 0 0 3px rgba(200, 164, 107, .25); }
.contact-form .form-check-input:checked { background-color: var(--hh-green); border-color: var(--hh-green); }
.contact-form .form-check-label { font-size: 14px; line-height: 1.55; color: #555; }
.contact-form .form-check-label a { color: var(--hh-green); }

.contact-success { text-align: center; padding: 40px 10px; }
.contact-success a { color: var(--hh-green); font-weight: 600; }

@media (max-width: 991.98px) {
  .contact-info { text-align: center; }
  .contact-info-item { justify-content: center; text-align: left; }
  .contact-social { justify-content: center; }
}
@media (max-width: 575.98px) {
  .contact-section { padding: 40px 0 50px; }
  .contact-card { padding: 24px 18px; }
  .contact-info-item { justify-content: flex-start; font-size: 16px; }
  .contact-form .btn-hh { width: 100%; }
}

/* ---------------- WOW animations ---------------- */
.animated { animation-duration: .9s; }

@media (prefers-reduced-motion: reduce) {
  .wow { visibility: visible !important; animation: none !important; }
}

/* ---------------- Legal pages (Privacy Policy) ---------------- */
.page-banner-legal { min-height: 300px; padding: 70px 0; }
.page-banner-legal .page-banner-content { max-width: 760px; }

.legal-section { padding: 70px 0 90px; background: #fff; }
.legal-content { max-width: 820px; margin: 0 auto; }
.legal-intro { font-size: 18px; line-height: 1.7; color: #333; margin-bottom: 8px; }
.legal-content h2 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.9rem;
  color: var(--hh-green);
  margin: 42px 0 14px;
}
.legal-content p,
.legal-content li { font-size: 17px; line-height: 1.7; color: #333; }
.legal-content p { margin-bottom: 16px; }
.legal-content ul { padding-left: 1.25rem; margin-bottom: 18px; }
.legal-content li { margin-bottom: 8px; }
.legal-content li::marker { color: var(--hh-gold); }
.legal-content a { color: var(--hh-green); text-decoration: underline; text-decoration-color: var(--hh-gold); text-underline-offset: 3px; }
.legal-content a:hover { color: var(--hh-gold-dark); }
.legal-callout {
  background: var(--hh-cream);
  border-left: 3px solid var(--hh-gold);
  padding: 18px 22px;
  margin: 22px 0;
}
.legal-callout p { margin: 0; }
.legal-address { font-style: normal; line-height: 1.8; font-size: 17px; color: #333; margin-bottom: 18px; }

@media (max-width: 575.98px) {
  .legal-section { padding: 48px 0 64px; }
  .legal-content h2 { font-size: 1.6rem; margin-top: 34px; }
  .legal-content p, .legal-content li, .legal-intro { font-size: 16px; }
}

/* ---------------- Closing / Home Check banner supporting lines ---------------- */
.hyl-subtitle + .hyl-subtitle { margin-top: 6px; }
.not-sure-title.has-text { margin-bottom: 12px; }
.not-sure-text {
  font-size: 19px;
  line-height: 1.5;
  color: #333;
  margin: 0 0 50px;
}
@media (max-width: 991.98px) { .not-sure-text { margin-bottom: 36px; } }
@media (max-width: 575.98px) { .not-sure-text { font-size: 16px; margin-bottom: 28px; } }

/* ---------------- Fixed mobile booking bar (<= 768px) ---------------- */
.mobile-book-bar { display: none; }

@media (max-width: 768px) {
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

  .mobile-book-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid rgba(200, 164, 107, .45);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, .08);
  }
  .mobile-book-btn {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    padding: 0 14px;
    border-radius: 50px;
    background: var(--hh-gold);
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
  }
  .mobile-book-btn:hover, .mobile-book-btn:focus { background: var(--hh-gold-dark); color: #fff; }
  .mobile-call-btn {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--hh-green);
    color: #fff;
    font-size: 19px;
    text-decoration: none;
  }
  .mobile-call-btn:hover, .mobile-call-btn:focus { background: var(--hh-green-dark); color: #fff; }
}

/* ---------------- Hero subheadline ---------------- */
.hero-title.has-sub { margin-bottom: 18px; }
.hero-subtitle {
  font-size: 19px;
  line-height: 1.55;
  color: #333;
  max-width: 520px;
  margin: 0 0 44px;
}
@media (max-width: 991.98px) { .hero-subtitle { margin-bottom: 32px; } }
@media (max-width: 575.98px) {
  .hero-title.has-sub { margin-bottom: 14px; }
  .hero-subtitle { font-size: 16px; margin-bottom: 26px; }
}

/* ---------------- Sister companies ---------------- */
.sister-section { background: #f3eee5; padding: 80px 0 70px; }
.sister-intro { font-size: 18px; line-height: 1.6; color: #333; max-width: 720px; margin: 16px auto 0; }
.sister-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fcfaf6;
  border: 1px solid #e6e0d6;
  border-radius: 10px;
  padding: 38px 34px;
  transition: transform .3s ease, box-shadow .3s ease;
}
.sister-card:hover { transform: translateY(-6px); box-shadow: 0 16px 30px rgba(0, 0, 0, .08); }
.sister-title { font-family: var(--font-heading); font-weight: 600; font-size: 30px; color: var(--hh-green); margin-bottom: 12px; }
.sister-text { font-size: 17px; line-height: 1.65; color: #333; margin-bottom: 26px; }
.sister-actions { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.sister-link {
  font-weight: 500;
  color: var(--hh-green);
  text-decoration: underline;
  text-decoration-color: var(--hh-gold);
  text-underline-offset: 4px;
}
.sister-link:hover { color: var(--hh-gold-dark); }
.sister-note { font-size: 14.5px; line-height: 1.6; color: #555; max-width: 760px; margin: 36px auto 0; }

@media (max-width: 575.98px) {
  .sister-section { padding: 52px 0 46px; }
  .sister-intro { font-size: 16px; }
  .sister-card { padding: 28px 22px; }
  .sister-title { font-size: 26px; }
  .sister-text { font-size: 16px; }
  .sister-actions .btn { width: 100%; }
}

/* ---------------- Service card actions ---------------- */
.service-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.service-contractor-note { margin: 0; }
@media (max-width: 575.98px) {
  .service-actions { flex-direction: column; }
  .service-detail .service-actions .btn { width: 100%; }
}

.gallery-note { font-size: 13.5px; color: #666; text-align: center; margin: 22px 0 0; }

/* ---------------- Contact form notes ---------------- */
.form-fineprint { font-size: 13px; line-height: 1.5; color: #666; margin: 12px 0 0; }
.form-fineprint a, .form-reply-note a { color: var(--hh-green); text-decoration: underline; text-decoration-color: var(--hh-gold); text-underline-offset: 3px; }
.form-reply-note { font-size: 14px; color: #555; margin: 18px 0 0; }

/* ---------------- Home Readiness Check ---------------- */
.hc-card { max-width: 900px; }

.hc-path { list-style: none; display: flex; justify-content: space-between; gap: 6px; padding: 0 0 22px; margin: 0 0 26px; border-bottom: 1px solid #eee7da; counter-reset: none; }
.hc-path li { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; text-align: center; }
.hc-path li:not(:last-child)::after { content: ""; position: absolute; top: 15px; left: calc(50% + 18px); right: calc(-50% + 18px); height: 2px; background: #e6e0d6; }
.hc-path li.done:not(:last-child)::after { background: var(--hh-gold); }
.hc-dot { width: 30px; height: 30px; border-radius: 50%; background: #f1ece2; color: #8a8372; font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; transition: background .3s, color .3s; }
.hc-label { font-size: 13px; color: #6b6558; line-height: 1.25; }
.hc-path li.active .hc-dot { background: var(--hh-green); color: #fff; box-shadow: 0 0 0 4px rgba(31, 74, 59, .15); }
.hc-path li.active .hc-label { color: var(--hh-green); font-weight: 600; }
.hc-path li.done .hc-dot { background: var(--hh-gold); color: #fff; }

.hc-nosignup { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--hh-gold-dark); margin: 0 0 12px; }
.hc-options-3 { grid-template-columns: 1fr; }

.hc-answers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 6px 0 22px; }
.hc-answer {
  font-family: var(--font-body); font-size: 18px; font-weight: 500; padding: 16px 10px;
  background: #fff; color: var(--hh-green); border: 1px solid #ddd5c6; border-radius: 8px;
  transition: border-color .2s, background .2s, color .2s;
}
.hc-answer:hover { border-color: var(--hh-gold); background: #fbf8f1; }
.hc-answer:focus-visible { outline: 3px solid rgba(200, 164, 107, .5); outline-offset: 2px; }
.hc-answer.selected { background: var(--hh-green); border-color: var(--hh-green); color: #fff; }
.hc-qcount { font-size: 14px; color: #777; align-self: center; }

.hc-score { display: flex; align-items: center; gap: 28px; margin-bottom: 30px; }
.hc-score-ring { flex: 0 0 auto; width: 128px; height: 128px; border-radius: 50%; border: 6px solid var(--hh-gold); display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fcfaf6; }
.hc-score-ring span { font-family: var(--font-heading); font-size: 3.2rem; font-weight: 700; line-height: 1; color: var(--hh-green); }
.hc-score-ring small { font-size: 13px; color: #777; }
.hc-tier { text-align: left; margin-bottom: 8px; }
.hc-tier-text { margin: 0; max-width: none; }

.hc-subtitle { font-family: var(--font-heading); font-weight: 600; font-size: 1.7rem; color: var(--hh-green); margin: 0 0 14px; }
.hc-fix-list { list-style: none; counter-reset: fix; padding: 0; margin: 0 0 30px; display: grid; gap: 12px; }
.hc-fix-list li { counter-increment: fix; position: relative; padding: 16px 18px 16px 62px; background: #fcfaf6; border: 1px solid #e6e0d6; border-radius: 10px; display: flex; flex-direction: column; gap: 2px; }
.hc-fix-list li::before { content: counter(fix); position: absolute; left: 18px; top: 16px; width: 30px; height: 30px; border-radius: 50%; background: var(--hh-green); color: var(--hh-gold); font-weight: 600; display: flex; align-items: center; justify-content: center; }
.hc-fix-list strong { color: var(--hh-green); font-weight: 600; }
.hc-fix-list span { font-size: 15.5px; color: #444; line-height: 1.5; }

.hc-care { background: #f3eee5; border: 1px solid #e6e0d6; border-radius: 10px; padding: 26px 26px 24px; margin-bottom: 30px; }
.hc-care-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }

.hc-book { border-top: 1px solid #eee7da; padding-top: 28px; margin-bottom: 14px; }
.hc-book-intro { font-size: 16px; color: #444; margin-bottom: 18px; }
.hc-book .form-check-input:checked { background-color: var(--hh-green); border-color: var(--hh-green); }
.hc-book .form-check-label { font-size: 14px; line-height: 1.55; color: #555; }
.hc-book .form-check-label a, .hc-book .form-fineprint a { color: var(--hh-green); text-decoration: underline; text-decoration-color: var(--hh-gold); text-underline-offset: 3px; }
.hc-result .check-restart { margin-top: 10px; }

@media (max-width: 767.98px) {
  .hc-label { font-size: 0; }
  .hc-path li.active .hc-label { font-size: 12px; position: absolute; top: 36px; white-space: nowrap; }
  .hc-path { padding-bottom: 34px; }
  .hc-path li:not(:last-child)::after { left: calc(50% + 16px); right: calc(-50% + 16px); }
  .hc-score { flex-direction: column; text-align: center; gap: 16px; }
  .hc-tier { text-align: center; }
}
@media (max-width: 575.98px) {
  .hc-answers { grid-template-columns: 1fr; }
  .hc-care-actions .btn { width: 100%; }
}

/* ---------------- "One Standard" film ---------------- */
.film-section { background: #fff; padding: 80px 0; }
.film-section .section-heading { margin-bottom: 36px; }
.film-subtitle { font-size: 18px; line-height: 1.6; color: #333; max-width: 560px; margin: 14px auto 0; }
.film-frame {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: var(--hh-green-dark);
  box-shadow: 0 22px 50px rgba(0, 0, 0, .16);
}
.film-video { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--hh-green-dark); }
.film-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 92px;
  height: 92px;
  border: 0;
  border-radius: 50%;
  background: var(--hh-gold);
  color: #fff;
  font-size: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 6px;
  box-shadow: 0 0 0 10px rgba(200, 164, 107, .35), 0 12px 30px rgba(0, 0, 0, .28);
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
  cursor: pointer;
}
.film-play:hover, .film-play:focus-visible { background: var(--hh-gold-dark); transform: translate(-50%, -50%) scale(1.06); box-shadow: 0 0 0 14px rgba(200, 164, 107, .35), 0 12px 30px rgba(0, 0, 0, .3); }
.film-frame.is-playing .film-play { display: none; }

@media (max-width: 991.98px) { .film-section { padding: 60px 0; } }
@media (max-width: 575.98px) {
  .film-section { padding: 44px 0; }
  .film-section .section-heading { margin-bottom: 24px; }
  .film-subtitle { font-size: 16px; }
  .film-frame { border-radius: 10px; }
  .film-play { width: 64px; height: 64px; font-size: 32px; padding-left: 4px; box-shadow: 0 0 0 7px rgba(200, 164, 107, .35), 0 8px 20px rgba(0, 0, 0, .28); }
}

/* ---------------- Cleaning section: portrait video ---------------- */
.clean-video-frame {
  position: relative;
  width: 100%;
  max-width: 337.5px;      /* 9:16 at a 600px maximum height */
  aspect-ratio: 9 / 16;
  margin: 0 auto;
  border-radius: 10px;
  overflow: hidden;
  background: var(--hh-green-dark);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .1);
}
.clean-video { display: block; width: 100%; height: 100%; object-fit: cover; }
.sound-toggle {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px 8px 11px;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 50px;
  background: rgba(22, 56, 41, .82);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  backdrop-filter: blur(4px);
  cursor: pointer;
  transition: background .25s ease;
}
.sound-toggle .bi { font-size: 18px; color: var(--hh-gold); }
.sound-toggle:hover, .sound-toggle:focus-visible { background: var(--hh-green); }
.sound-toggle:focus-visible { outline: 3px solid rgba(200, 164, 107, .6); outline-offset: 2px; }


/* ---------------- Home hero: 16:9 video (desktop & tablet, wider than 768px) ---------------- */
.hero-video { display: none; }

@media (min-width: 769px) {
  .hero {
    aspect-ratio: 16 / 9;   /* grows only if the text needs more height */
    min-height: 0;
    padding: 0;
    background: #1c1c1c;
  }
  .hero-media { top: 0; right: 0; bottom: 0; left: 0; width: 100%; }
  .hero-media img { display: none; }
  .hero-video {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;          /* fills the hero, never stretched */
    object-position: 50% 50%;
  }
  /* soft cream-to-transparent wash behind the text column (6% to 34%); people stay clear in the middle and right */
  .hero-media::after {
    background: linear-gradient(90deg,
        rgba(248, 244, 238, .96) 0%,
        rgba(248, 244, 238, .90) 22%,
        rgba(248, 244, 238, .74) 34%,
        rgba(248, 244, 238, .30) 40%,
        rgba(248, 244, 238, 0) 46%);
  }

  /* text lives in the left third: 6% to 34% of the hero width */
  .hero > .container {
    max-width: none;
    width: 34%;
    margin: 0;
    padding: 0 0 0 6%;
    display: flex;
    align-items: center;
  }
  .hero > .container > .row { width: 100%; margin: 0; }
  .hero > .container > .row > [class*="col-"] { width: 100%; max-width: 100%; flex: 0 0 100%; padding: 0; }

  /* fluid type so everything fits the narrow column from tablet to large desktop */
  .hero .hero-content { padding: 1.2vw 0; }
  .hero .hero-eyebrow { font-size: clamp(9px, .95vw, 15px); margin-bottom: 1vw; letter-spacing: .2px; }
  .hero .hero-title { font-size: clamp(1.15rem, 2.9vw, 3.9rem); line-height: 1.05; margin-bottom: 1vw; max-width: none; }
  .hero .hero-subtitle { font-size: clamp(11px, 1.15vw, 18px); line-height: 1.45; max-width: none; margin-bottom: 1.6vw; }
  .hero .hero-buttons { flex-direction: column; align-items: stretch; gap: .8vw; margin-bottom: 1.4vw; }
  .hero .btn-hero-primary,
  .hero .btn-hero-outline { width: 100%; max-width: none; font-size: clamp(11px, 1.1vw, 18px); padding: .75vw 1vw; line-height: 1.25; }
  .hero .hero-phone { font-size: clamp(11px, 1.1vw, 18px); line-height: 1.3; }
  .hero .hero-phone .bi { font-size: clamp(13px, 1.4vw, 24px); }
}

/* Hero video: promote to its own GPU layer for smoother playback; layers are stacked and cross-faded by JS */
@media (min-width: 769px) {
  .hero-video { will-change: transform; transform: translateZ(0); backface-visibility: hidden; }
}
@media (min-width: 769px) {
  /* keep the cream wash above the video layers (and below the text) */
  .hero-media::after { z-index: 2; }
}

/* ---------------- Home hero: phone layout (768px and narrower) ---------------- */
.hero-video-mobile { display: none; }

@media (max-width: 768px) {
  /* video first, strict 4:5, full width; text and buttons sit below it on the cream background */
  .hero { display: block; padding: 0; min-height: 0; background: var(--hh-cream); }
  .hero-media { position: static; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: var(--hh-green-dark); }
  .hero-media::after { display: none; }
  .hero-media img,
  .hero-video { display: none; }
  .hero-video-mobile {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;          /* the clip is 4:5, so nothing is cropped or stretched */
    transform: translateZ(0);
  }
  .hero > .container { padding-top: 28px; padding-bottom: 40px; }
}

/* Hero video loop point: the picture dips to cream briefly while the clip restarts (desktop & tablet) */
@media (min-width: 769px) {
  .hero-media { background: var(--hh-cream); }
}