/* ==========================================================================
   HeartandHome — About Us Page Redesign
   Scoped to .page-id-22 (About Us page only).

   Sections:
     Section 0 (.et_pb_section_0)  → Hero — full-width photo, dark overlay, text
     Section 1 (.et_pb_section_1)  → Our Story — image left, text right
     Section 2 (.et_pb_section_2)  → Our Mission — dark forest green, centered
     Section 3 (.et_pb_section_3)  → Spacer — hidden
     Section 4 (.et_pb_section_4)  → Our Values — 2×2 card grid
     Section 5 (.et_pb_section_5)  → Hidden (team gallery removed from About)

   Enqueued by: functions.php  |  Handle: hh-about-page  |  Depends: hh-tokens
   ========================================================================== */


/* ==========================================================================
   SECTION 0 — HERO: Bright image + frosted content card (V2)
   Source: untitled.pen — "Hero V2 - Bright Home" (node NNXtT)
   Layout: Full-bleed bright photo, frosted white card floating left

   NOTE: Selectors use `body.page-id-22 #page-container` to beat the
   homepage hero-section.css specificity (`body #page-container`).
   ========================================================================== */

/* --- Section: full-bleed bright background image, flex to center card --- */
body.page-id-22 #page-container .et_pb_section_0 {
  position: relative !important;
  background: url('/wp-content/uploads/2026/03/about-hero-bright-nofamily.png')
              center center / cover no-repeat !important;
  min-height: clamp(520px, 65vh, 700px) !important;
  max-height: none !important;
  padding: clamp(48px, 6vw, 80px) clamp(32px, 5vw, 64px) !important;
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
}

/* --- Subtle overlay for depth (not dark) --- */
body.page-id-22 #page-container .et_pb_section_0::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.1) 0%,
    rgba(0, 0, 0, 0.03) 50%,
    transparent 100%
  ) !important;
  z-index: 1;
  pointer-events: none;
}

/* --- Row: flex — hero card left (section padding = distance from viewport edge) --- */
body.page-id-22 #page-container .et_pb_section_0 .et_pb_row_0.et_pb_row {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-items: center !important;
  max-width: none !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  gap: 0 !important;
}

/* --- First column: frosted white floating card — fit-content height --- */
body.page-id-22 #page-container .et_pb_section_0 .et_pb_row_0 .et_pb_column_0.et_pb_column {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: stretch !important;
  align-self: center !important;
  text-align: center !important;
  gap: 20px !important;
  width: clamp(380px, 40vw, 520px) !important;
  max-width: 520px !important;
  height: fit-content !important;
  min-height: 0 !important;
  padding: clamp(36px, 4vw, 48px) !important;
  background: rgba(255, 255, 255, 0.45) !important;
  backdrop-filter: blur(24px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  border-radius: var(--hh-radius-card) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08),
              inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  order: 0 !important;
}

/* --- Second column: completely hidden --- */
body.page-id-22 #page-container .et_pb_section_0 .et_pb_row_0 .et_pb_column_1.et_pb_column {
  display: none !important;
  width: 0 !important;
  min-height: 0 !important;
  order: 1 !important;
}

/* --- Hide decorative images --- */
body.page-id-22 #page-container .et_pb_section_0 .et_pb_image_0,
body.page-id-22 #page-container .et_pb_section_0 .et_pb_image_1 {
  display: none !important;
}

/* --- Eyebrow badge: pill style above heading --- */
/* Extra specificity to beat hero-section.css `display: none` on ::before */
body.page-id-22 #page-container .et_pb_section_0 .et_pb_row_0 .et_pb_text_0::before {
  content: 'ABOUT HEART & HOME' !important;
  display: inline-block !important;
  font-family: var(--hh-font-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: #2B3C2E !important;
  background: rgba(91, 111, 96, 0.15) !important;
  padding: 5px 14px !important;
  border-radius: 20px !important;
  margin-bottom: 12px !important;
}

/* --- Reset Divi animation offsets on all modules in the card --- */
body.page-id-22 #page-container .et_pb_section_0 .et_pb_row_0 .et_pb_column_0 .et_pb_module {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-top: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  transform: none !important;
  opacity: 1 !important;
}

/* --- Heading text module: constrain to card width --- */
body.page-id-22 #page-container .et_pb_section_0 .et_pb_row_0 .et_pb_text_0 {
  padding-bottom: 0 !important;
  max-width: 100% !important;
  min-width: 0 !important;
  width: 100% !important;
  text-align: center !important;
}
body.page-id-22 #page-container .et_pb_section_0 .et_pb_row_0 .et_pb_text_0 .et_pb_text_inner {
  text-align: center !important;
}

/* --- Main heading: dark text, wraps within card --- */
body.page-id-22 #page-container .et_pb_section_0 .et_pb_row_0 .et_pb_text_0 h1,
body.page-id-22 #page-container .et_pb_section_0 .et_pb_row_0 .et_pb_text_0 h2 {
  font-family: var(--hh-font-heading) !important;
  font-size: clamp(32px, 3.5vw, 44px) !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.5px !important;
  color: #2B3C2E !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  max-width: 100% !important;
}

/* --- Override any span color leaks --- */
body.page-id-22 #page-container .et_pb_section_0 .et_pb_row_0 .et_pb_text_0 h1 span {
  color: #2B3C2E !important;
}

/* --- Subtitle: muted dark text --- */
body.page-id-22 #page-container .et_pb_section_0 .et_pb_row_0 .et_pb_text_1 {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  text-align: center !important;
}
body.page-id-22 #page-container .et_pb_section_0 .et_pb_row_0 .et_pb_text_1 .et_pb_text_inner {
  text-align: center !important;
}
body.page-id-22 #page-container .et_pb_section_0 .et_pb_row_0 .et_pb_text_1 p {
  font-family: var(--hh-font-body) !important;
  font-size: clamp(14px, 1.1vw, 16px) !important;
  line-height: 1.65 !important;
  color: var(--hh-text-secondary) !important;
  text-align: center !important;
  margin: 0 !important;
}

/* --- CTA: style-guide medium Sage (“Learn More”) on light hero card --- */
body.page-id-22 #page-container .et_pb_section_0 .et_pb_row_0 .et_pb_button_0_wrapper {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
}
body.page-id-22 #page-container .et_pb_section_0 .et_pb_row_0 .et_pb_button_0.et_pb_button {
  background-color: var(--hh-btn-primary-bg) !important;
  color: var(--hh-text-white) !important;
  border-radius: var(--hh-btn-radius) !important;
  border: 2px solid var(--hh-btn-primary-border) !important;
  padding: var(--hh-btn-padding-y) var(--hh-btn-padding-x) !important;
  font-family: var(--hh-font-body) !important;
  font-size: var(--hh-btn-font-size) !important;
  font-weight: var(--hh-btn-font-weight) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
  margin-top: 0 !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, border-color 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--hh-btn-gap) !important;
  box-sizing: border-box !important;
  min-height: 0 !important;
  height: auto !important;
  line-height: 1.25 !important;
  width: auto !important;
}
body.page-id-22 #page-container .et_pb_section_0 .et_pb_row_0 .et_pb_button_0.et_pb_button:hover,
body.page-id-22 #page-container .et_pb_section_0 .et_pb_row_0 .et_pb_button_0.et_pb_button:focus-visible {
  background-color: var(--hh-btn-primary-hover-bg) !important;
  border-color: var(--hh-btn-primary-hover-border) !important;
}

body.page-id-22 #page-container .et_pb_section_0 .et_pb_row_0 .et_pb_button_0.et_pb_button:focus-visible {
  outline: 2px solid var(--hh-accent-sage, #5B6F60) !important;
  outline-offset: 2px !important;
}
body.page-id-22 #page-container .et_pb_section_0 .et_pb_row_0 .et_pb_button_0.et_pb_button::after {
  content: none !important;
  display: none !important;
}


/* ==========================================================================
   SECTION 1 — OUR STORY / OUR PROMISE
   Source: pleaseread.pen — node KzdV9
   Layout: Family photo left (large, clipped) · rose divider + "Our Promise"
   heading + body text right, vertically centered · cream background
   ========================================================================== */

/* --- Section: cream background matching page --- */
.page-id-22 .et_pb_section_1 {
  background: var(--hh-bg-cream) !important;
  padding: clamp(56px, 7vw, 88px) 0 clamp(64px, 8vw, 100px) !important;
}

/* --- Row: two-column grid, image slightly wider --- */
.page-id-22 .et_pb_section_1 > .et_pb_row {
  display: grid !important;
  grid-template-columns: 1.1fr 1fr !important;
  gap: clamp(40px, 5vw, 80px) !important;
  align-items: center !important;
  max-width: 1200px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 var(--hh-padding-section-x) !important;
}

/* --- Both columns: fill grid cell --- */
.page-id-22 .et_pb_section_1 .et_pb_column {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  min-width: 0 !important;
}

/* --- Image column: simple flex for image --- */
.page-id-22 .et_pb_section_1 > .et_pb_row > .et_pb_column:first-child {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* --- Remove old "Our Story" heading from image column --- */
.page-id-22 .et_pb_section_1 > .et_pb_row > .et_pb_column:first-child::before {
  display: none !important;
}

/* --- Family photo: rounded, cover-fill --- */
.page-id-22 .et_pb_section_1 .et_pb_image {
  flex: 1 !important;
  min-height: 0 !important;
}
.page-id-22 .et_pb_section_1 .et_pb_image,
.page-id-22 .et_pb_section_1 .et_pb_image .et_pb_image_wrap {
  display: flex !important;
}
.page-id-22 .et_pb_section_1 .et_pb_image img {
  border-radius: var(--hh-radius-card) !important;
  width: 100% !important;
  flex: 1 !important;
  object-fit: cover !important;
  max-height: none !important;
}

/* --- Text column: vertically centered, flex column --- */
.page-id-22 .et_pb_section_1 .et_pb_column:last-child {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 0 !important;
}

/* --- Kill white background leaking from Divi specialty column --- */
.page-id-22 .et_pb_section_1 .et_pb_specialty_column,
.page-id-22 .et_pb_section_1 .et_pb_row_inner,
.page-id-22 .et_pb_section_1 .et_pb_column_inner {
  background: transparent !important;
  background-color: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* --- "Our Promise" heading on text side via ::before on specialty column --- */
.page-id-22 .et_pb_section_1 .et_pb_specialty_column::before {
  content: '';
  display: block;
  width: 60px;
  height: 2px;
  background: #7D6155;
  margin-bottom: 24px;
}

/* --- Hide original heading module (replaced by styled text below) --- */
.page-id-22 .et_pb_section_1 .et_pb_text_2 {
  display: block !important;
  margin: 0 0 20px 0 !important;
  padding: 0 !important;
}
.page-id-22 .et_pb_section_1 .et_pb_text_2,
.page-id-22 .et_pb_section_1 .et_pb_text_2 h2,
.page-id-22 .et_pb_section_1 .et_pb_text_2 h3,
.page-id-22 .et_pb_section_1 .et_pb_text_2 .et_pb_text_inner {
  font-family: var(--hh-font-heading) !important;
  font-size: clamp(32px, 4vw, 42px) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.5px !important;
  color: var(--hh-text-primary) !important;
}

/* --- Body text module: reset spacing --- */
.page-id-22 .et_pb_section_1 .et_pb_text_3 {
  margin: 0 !important;
  padding: 0 !important;
}

/* --- Body text inner: SINGLE column (not two-column) --- */
.page-id-22 .et_pb_section_1 .et_pb_text_3 .et_pb_text_inner {
  column-count: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: 560px !important;
}

/* --- Flatten nested Divi/Tailwind wrapper divs --- */
.page-id-22 .et_pb_section_1 .et_pb_text_3 .et_pb_text_inner div {
  display: contents !important;
}

/* --- Body text paragraphs --- */
.page-id-22 .et_pb_section_1 .et_pb_text_3 p {
  font-family: var(--hh-font-body) !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
  color: var(--hh-text-secondary) !important;
  text-align: left !important;
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
}

/* --- Hide empty trailing paragraphs --- */
.page-id-22 .et_pb_section_1 .et_pb_text_3 p:empty,
.page-id-22 .et_pb_section_1 .et_pb_text_3 p:has(span:empty:only-child) {
  display: none !important;
}

/* --- Remove old landscape image below text --- */
.page-id-22 .et_pb_section_1 .et_pb_specialty_column::after {
  display: none !important;
}

/* --- "Learn What We Offer" CTA after body text --- */
.hh-about-story-cta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  width: fit-content;
  gap: var(--hh-btn-gap);
  margin-top: 28px;
  padding: var(--hh-btn-padding-y) var(--hh-btn-padding-x);
  font-family: var(--hh-font-body);
  font-size: var(--hh-btn-font-size);
  font-weight: var(--hh-btn-font-weight);
  line-height: 1.25;
  color: var(--hh-btn-primary-bg);
  background: transparent;
  border: 2px solid var(--hh-btn-primary-bg);
  border-radius: var(--hh-btn-radius);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.hh-about-story-cta:hover,
.hh-about-story-cta:focus-visible {
  background-color: var(--hh-btn-primary-bg);
  color: var(--hh-text-white);
  border-color: var(--hh-btn-primary-bg);
}
.hh-about-story-cta:focus-visible {
  outline: 2px solid var(--hh-accent-sage, #5B6F60);
  outline-offset: 2px;
}
.hh-about-story-cta::after {
  content: '→';
  font-size: 1.1em;
  transition: transform 0.2s ease;
}
.hh-about-story-cta:hover::after,
.hh-about-story-cta:focus-visible::after {
  transform: translateX(3px);
}


/* ==========================================================================
   ABOUT TRUST BADGES — injected after Section 1
   Source: pleaseread.pen — node mnjHF
   4 badges with vertical dividers, horizontally centered
   ========================================================================== */

.hh-about-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(32px, 4vw, 64px);
  padding: clamp(32px, 4vw, 48px) var(--hh-padding-section-x);
  background: var(--hh-bg-cream);
}

.hh-about-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.hh-about-badge svg {
  width: 30px;
  height: 30px;
  transition: color 0.3s ease;
}

/* Alternating icon colors — rose (1st, 3rd) / sage (2nd, 4th)
   Children: badge(1) divider(2) badge(3) divider(4) badge(5) divider(6) badge(7) */
.hh-about-badges > :nth-child(1) svg,
.hh-about-badges > :nth-child(5) svg {
  color: var(--hh-accent-rose);
}

.hh-about-badges > :nth-child(3) svg,
.hh-about-badges > :nth-child(7) svg {
  color: var(--hh-accent-sage);
}

.hh-about-badge span {
  font-family: var(--hh-font-body);
  font-size: 13px;
  font-weight: 400;
  color: var(--hh-text-secondary);
  white-space: nowrap;
}

.hh-about-badge-divider {
  width: 1px;
  height: 48px;
  background: #D9D5D0;
  flex-shrink: 0;
}


/* ==========================================================================
   ABOUT TEAM GALLERY — "Meet the Team" photo grid
   5 team member action shots with subtle overlay labels
   ========================================================================== */

.hh-about-gallery-wrapper {
  background: var(--hh-bg-cream);
  padding: 48px 50px 40px;
}

.hh-about-gallery-heading {
  font-family: var(--hh-font-heading);
  font-size: 32px;
  font-weight: 400;
  font-style: italic;
  color: var(--hh-text-primary);
  text-align: center;
  margin: 0 0 28px;
  letter-spacing: -0.3px;
}

.hh-about-gallery {
  display: flex;
  gap: 16px;
  overflow: hidden;
}

.hh-about-gallery-item {
  height: 400px;
  border-radius: var(--hh-radius-card);
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  min-width: 0;
}

/* Photo cards — background-image set inline */
.hh-about-gallery-photo {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Gradient scrim for text legibility */
.hh-about-gallery-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.15) 40%,
    transparent 70%
  );
  pointer-events: none;
}

/* --- Overlay text on photo cards --- */
.hh-about-gallery-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 1;
}

.hh-about-gallery-label {
  font-family: var(--hh-font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.hh-about-gallery-title {
  font-family: var(--hh-font-heading);
  font-size: 22px;
  font-weight: 400;
  font-style: italic;
  color: #FFFFFF;
  line-height: 1.2;
}


/* ==========================================================================
   SECTION 2 — OUR MISSION: Dark forest green, centered
   ========================================================================== */

/* Override Divi's et-core-unified specificity:
   .et-l--post > .et_builder_inner_content > .et_pb_section.et_pb_section_2 */
.page-id-22 .et-l--post .et_builder_inner_content .et_pb_section.et_pb_section_2,
.page-id-22 .et_pb_section_2 {
  background-color: #1F2D22 !important;
  background-image: none !important;
  padding: clamp(64px, 8vw, 100px) var(--hh-padding-section-x) !important;
  border-radius: 0 !important;
  position: relative !important;
  overflow: visible !important;
  opacity: 1 !important;
  height: auto !important;
}

/* --- Subtle radial glow texture --- */
.page-id-22 .et_pb_section_2::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(91, 111, 96, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 50%, rgba(91, 111, 96, 0.06) 0%, transparent 50%);
  pointer-events: none;
}

/* --- Row: centered single column --- */
.page-id-22 .et_pb_section_2 .et_pb_row_1 {
  position: relative !important;
  z-index: 1;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 20px !important;
  max-width: 760px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  text-align: center !important;
}

/* --- All columns: full width, centered --- */
.page-id-22 .et_pb_section_2 .et_pb_column {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* --- Eyebrow injected before heading --- */
.page-id-22 .et_pb_section_2 .et_pb_text_4::before {
  content: 'OUR PROMISE';
  display: block;
  font-family: var(--hh-font-body) !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #94A89A;
  text-align: center;
  margin-bottom: 12px;
}

/* --- Mission heading --- */
.page-id-22 .et_pb_section_2 .et_pb_text_4,
.page-id-22 .et_pb_section_2 .et_pb_text_4 h2,
.page-id-22 .et_pb_section_2 .et_pb_text_4 h3,
.page-id-22 .et_pb_section_2 .et_pb_text_4 .et_pb_text_inner {
  font-family: var(--hh-font-heading) !important;
  font-size: clamp(30px, 3.5vw, 42px) !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.75px !important;
  color: var(--hh-text-white) !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* --- Mission body text --- */
.page-id-22 .et_pb_section_2 .et_pb_text_5,
.page-id-22 .et_pb_section_2 .et_pb_text_5 p,
.page-id-22 .et_pb_section_2 .et_pb_text_5 .et_pb_text_inner {
  font-family: var(--hh-font-body) !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
  color: rgba(255, 255, 255, 0.8) !important;
  text-align: center !important;
  max-width: 600px !important;
  margin: 4px auto 0 !important;
  padding: 0 !important;
}

/* --- Hide ALL images and ALL buttons in mission for clean centered layout --- */
.page-id-22 .et_pb_section_2 .et_pb_image,
.page-id-22 .et_pb_section_2 .et_pb_button_module_wrapper,
.page-id-22 .et_pb_section_2 .et_pb_module.et_pb_button {
  display: none !important;
}


/* ==========================================================================
   SECTION 3 — SPACER: Hidden
   ========================================================================== */

.page-id-22 .et_pb_section_3 {
  display: none !important;
}


/* ==========================================================================
   SECTION 4 — OUR VALUES: 2×2 card grid
   Override about-team.css which hides .et_pb_section_4 globally.
   ========================================================================== */

/* Override Divi's border-radius: 1140px and box-shadow on this section */
.page-id-22 .et-l--post .et_builder_inner_content .et_pb_section.et_pb_section_4,
.page-id-22 .et_pb_section_4 {
  display: flex !important;
  flex-direction: column !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  overflow: visible !important;
  background: var(--hh-bg-cream) !important;
  padding: clamp(60px, 8vw, 100px) var(--hh-padding-section-x) !important;
  max-width: 100% !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin-top: 0 !important;
  z-index: auto !important;
}

/* --- Section header: eyebrow + heading above the card grid --- */
.page-id-22 .et_pb_section_4::before {
  content: 'WHAT DRIVES US';
  display: block;
  font-family: var(--hh-font-body) !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--hh-accent-sage);
  max-width: 1200px;
  width: 100%;
  margin: 0 auto 8px;
  padding: 0;
  order: -2;
}
.page-id-22 .et_pb_section_4::after {
  content: 'Our Core Values';
  display: block;
  font-family: var(--hh-font-heading) !important;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: var(--hh-text-primary);
  max-width: 1200px;
  width: 100%;
  margin: 0 auto clamp(32px, 3vw, 48px);
  padding: 0;
  order: -1;
}

/* --- Both value rows: 2-column grid --- */
.page-id-22 .et_pb_section_4 .et_pb_row_3,
.page-id-22 .et_pb_section_4 .et_pb_row_4 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px !important;
  max-width: 1200px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  overflow: visible !important;
}

/* --- Second row spacing --- */
.page-id-22 .et_pb_section_4 .et_pb_row_4 {
  margin-top: 24px !important;
}

/* --- Columns: fill grid cells, visible --- */
.page-id-22 .et_pb_section_4 .et_pb_row_3 .et_pb_column,
.page-id-22 .et_pb_section_4 .et_pb_row_4 .et_pb_column {
  display: flex !important;
  flex-direction: column !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
}

/* --- Each value text module: styled as a card --- */
.page-id-22 .et_pb_section_4 .et_pb_row_3 .et_pb_text,
.page-id-22 .et_pb_section_4 .et_pb_row_4 .et_pb_text {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex: 1 !important;
  overflow: visible !important;
  background: #FFFFFF !important;
  border: 1px solid var(--hh-border-light) !important;
  border-radius: var(--hh-radius-lg) !important;
  padding: clamp(28px, 3vw, 40px) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  width: 100% !important;
  max-width: 100% !important;
}
.page-id-22 .et_pb_section_4 .et_pb_row_3 .et_pb_text:hover,
.page-id-22 .et_pb_section_4 .et_pb_row_4 .et_pb_text:hover,
.page-id-22 .et_pb_section_4 .et_pb_row_3 .et_pb_text:focus-within,
.page-id-22 .et_pb_section_4 .et_pb_row_4 .et_pb_text:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(45, 45, 45, 0.06);
}

/* --- Accent bar at top of each card — alternating rose / sage --- */
.page-id-22 .et_pb_section_4 .et_pb_row_3 .et_pb_text .et_pb_text_inner::before,
.page-id-22 .et_pb_section_4 .et_pb_row_4 .et_pb_text .et_pb_text_inner::before {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  border-radius: 2px;
  margin-bottom: 20px;
}

/* Row 3: card 1 (left) = rose, card 2 (right) = sage */
.page-id-22 .et_pb_section_4 .et_pb_row_3 .et_pb_column:first-child .et_pb_text_inner::before {
  background: var(--hh-accent-rose);
}
.page-id-22 .et_pb_section_4 .et_pb_row_3 .et_pb_column:last-child .et_pb_text_inner::before {
  background: var(--hh-accent-sage);
}

/* Row 4: card 3 (left) = rose, card 4 (right) = sage */
.page-id-22 .et_pb_section_4 .et_pb_row_4 .et_pb_column:first-child .et_pb_text_inner::before {
  background: var(--hh-accent-rose);
}
.page-id-22 .et_pb_section_4 .et_pb_row_4 .et_pb_column:last-child .et_pb_text_inner::before {
  background: var(--hh-accent-sage);
}

/* --- Card headings --- */
.page-id-22 .et_pb_section_4 .et_pb_row_3 .et_pb_text h2,
.page-id-22 .et_pb_section_4 .et_pb_row_3 .et_pb_text h3,
.page-id-22 .et_pb_section_4 .et_pb_row_3 .et_pb_text h4,
.page-id-22 .et_pb_section_4 .et_pb_row_4 .et_pb_text h2,
.page-id-22 .et_pb_section_4 .et_pb_row_4 .et_pb_text h3,
.page-id-22 .et_pb_section_4 .et_pb_row_4 .et_pb_text h4 {
  font-family: var(--hh-font-subheading) !important;
  font-size: clamp(20px, 1.8vw, 24px) !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  color: var(--hh-text-primary) !important;
  margin: 0 0 12px 0 !important;
}

/* --- Card body text --- */
.page-id-22 .et_pb_section_4 .et_pb_row_3 .et_pb_text p,
.page-id-22 .et_pb_section_4 .et_pb_row_4 .et_pb_text p {
  font-family: var(--hh-font-body) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: var(--hh-text-secondary) !important;
  margin: 0 !important;
}

/* --- Hide the team photo row (row_5) in values section --- */
.page-id-22 .et_pb_section_4 .et_pb_row_5 {
  display: none !important;
}


/* ==========================================================================
   SECTION 5 — Team gallery: removed from About (layout may still exist in Divi)
   ========================================================================== */

.page-id-22 .et-l--post .et_builder_inner_content .et_pb_section.et_pb_section_5,
.page-id-22 .et_pb_section_5 {
  display: none !important;
}


/* ==========================================================================
   RESPONSIVE — Tablet (max-width: 980px)
   ========================================================================== */

@media (max-width: 980px) {

  /* Hero: card shrinks on tablet */
  body.page-id-22 #page-container .et_pb_section_0 {
    height: auto !important;
    min-height: 440px !important;
    max-height: none !important;
  }
  body.page-id-22 #page-container .et_pb_section_0 .et_pb_row_0.et_pb_row {
    position: relative !important;
    top: auto !important;
    transform: none !important;
    padding: 40px !important;
  }
  body.page-id-22 #page-container .et_pb_section_0 .et_pb_row_0 .et_pb_column_0.et_pb_column {
    width: 100% !important;
    max-width: 420px !important;
  }

  /* Story: stack vertically */
  .page-id-22 .et_pb_section_1 > .et_pb_row {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    padding: 0 40px !important;
  }
  .page-id-22 .et_pb_section_1 .et_pb_image img {
    aspect-ratio: 16 / 10 !important;
    max-height: 400px !important;
  }

  /* Mission */
  .page-id-22 .et_pb_section_2 {
    padding: 60px 40px !important;
  }
  .page-id-22 .et_pb_section_2 .et_pb_text_4,
  .page-id-22 .et_pb_section_2 .et_pb_text_4 h2,
  .page-id-22 .et_pb_section_2 .et_pb_text_4 h3,
  .page-id-22 .et_pb_section_2 .et_pb_text_4 .et_pb_text_inner {
    font-size: 32px !important;
  }

  /* Values */
  .page-id-22 .et_pb_section_4 {
    padding: 60px 40px !important;
  }
  .page-id-22 .et_pb_section_4 .et_pb_row_3,
  .page-id-22 .et_pb_section_4 .et_pb_row_4 {
    gap: 20px !important;
  }

  /* About badges: smaller gap on tablet */
  .hh-about-badges {
    gap: 24px;
    padding: 32px 40px;
  }

  /* Gallery: horizontal scroll on tablet */
  .hh-about-gallery-wrapper {
    padding: 36px 40px 32px;
  }
  .hh-about-gallery-heading {
    font-size: 28px;
    margin-bottom: 20px;
  }
  .hh-about-gallery {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .hh-about-gallery-item {
    height: 320px;
    min-width: 300px;
  }
}


/* ==========================================================================
   RESPONSIVE — Phone (max-width: 767px)
   ========================================================================== */

@media (max-width: 767px) {

  /* Hero: full-width card on phone */
  body.page-id-22 #page-container .et_pb_section_0 {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  body.page-id-22 #page-container .et_pb_section_0 .et_pb_row_0.et_pb_row {
    position: relative !important;
    top: auto !important;
    transform: none !important;
    padding: 24px 16px !important;
  }
  body.page-id-22 #page-container .et_pb_section_0 .et_pb_row_0 .et_pb_column_0.et_pb_column {
    width: 100% !important;
    max-width: 100% !important;
    padding: 32px 24px !important;
    border-radius: var(--hh-radius-card-sm) !important;
  }
  body.page-id-22 #page-container .et_pb_section_0 .et_pb_row_0 .et_pb_text_0 h1,
  body.page-id-22 #page-container .et_pb_section_0 .et_pb_row_0 .et_pb_text_0 h2 {
    font-size: 28px !important;
    letter-spacing: -0.5px !important;
  }
  body.page-id-22 #page-container .et_pb_section_0 .et_pb_row_0 .et_pb_button_0.et_pb_button {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    padding: var(--hh-btn-padding-y) var(--hh-btn-padding-x) !important;
    font-size: var(--hh-btn-font-size) !important;
  }

  /* Story */
  .page-id-22 .et_pb_section_1 {
    padding: 48px 0 !important;
  }
  .page-id-22 .et_pb_section_1 > .et_pb_row {
    padding: 0 20px !important;
    gap: 32px !important;
  }
  .page-id-22 .et_pb_section_1 .et_pb_text_2,
  .page-id-22 .et_pb_section_1 .et_pb_text_2 h2,
  .page-id-22 .et_pb_section_1 .et_pb_text_2 h3,
  .page-id-22 .et_pb_section_1 .et_pb_text_2 .et_pb_text_inner {
    font-size: 28px !important;
  }

  /* Story CTA: center on mobile */
  .hh-about-story-cta {
    align-self: center;
  }

  /* About badges: clean 2×2 grid on phone, dividers hidden */
  .hh-about-badges {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 28px 24px !important;
    justify-items: center !important;
    padding: 32px 20px !important;
  }
  .hh-about-badge-divider {
    display: none !important;
  }
  .hh-about-badge {
    justify-self: center !important;
  }

  /* Gallery: horizontal scroll on phone */
  .hh-about-gallery-wrapper {
    padding: 32px 20px 24px;
  }
  .hh-about-gallery-heading {
    font-size: 24px;
    margin-bottom: 16px;
  }
  .hh-about-gallery {
    gap: 12px;
  }
  .hh-about-gallery-item {
    height: 280px;
    min-width: 260px;
  }

  /* Mission */
  .page-id-22 .et_pb_section_2 {
    padding: 48px 20px !important;
  }
  .page-id-22 .et_pb_section_2 .et_pb_text_4,
  .page-id-22 .et_pb_section_2 .et_pb_text_4 h2,
  .page-id-22 .et_pb_section_2 .et_pb_text_4 h3,
  .page-id-22 .et_pb_section_2 .et_pb_text_4 .et_pb_text_inner {
    font-size: 26px !important;
  }
  .page-id-22 .et_pb_section_2 .et_pb_text_5,
  .page-id-22 .et_pb_section_2 .et_pb_text_5 p {
    font-size: 15px !important;
  }

  /* Values: single column */
  .page-id-22 .et_pb_section_4 {
    padding: 48px 20px !important;
  }
  .page-id-22 .et_pb_section_4 .et_pb_row_3,
  .page-id-22 .et_pb_section_4 .et_pb_row_4 {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .page-id-22 .et_pb_section_4 .et_pb_row_4 {
    margin-top: 16px !important;
  }
}


/* ==========================================================================
   Reduced motion — disable transitions/animations for users who prefer it
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  body.page-id-22 #page-container .et_pb_section_0 .et_pb_row_0 .et_pb_button_0.et_pb_button,
  .hh-about-story-cta,
  .hh-about-story-cta::after,
  .hh-about-badge svg,
  .page-id-22 .et_pb_section_4 .et_pb_row_3 .et_pb_text,
  .page-id-22 .et_pb_section_4 .et_pb_row_4 .et_pb_text {
    transition: none !important;
    animation: none !important;
  }
}