/* ─── Getting Home Ready page — scoped styles ────────────────────────────────
   Relies on style.css for: .navbar, .final-cta, .site-footer__* shared tokens.
   Everything here is prefixed .ghr- to avoid collisions.
──────────────────────────────────────────────────────────────────────────── */

/* ─── Shared eyebrow label ───────────────────────────────────────────────── */
.ghr-eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: #2e2c2c;
  opacity: 0.4;
}

.ghr-section-header {
  display: flex;
  justify-content: center;
  margin-bottom: 2.25rem;
}

/* ─── Hero ───────────────────────────────────────────────────────────────── */
.ghr-hero {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  gap: 1.1rem;
  padding: clamp(2.5rem, 6vw, 5rem) 1.5rem clamp(2rem, 5vw, 3.5rem);
  max-width: 780px;
  margin: 0 auto;
}

.ghr-hero__eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: #2e2c2c;
  opacity: 0.42;
}

.ghr-hero__heading {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: clamp(2.2rem, 5.2vw, 4.2rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #1a1816;
  margin: 0;
}

.ghr-hero__subhead {
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  line-height: 1.6;
  color: #2e2c2c;
  opacity: 0.72;
  max-width: min(560px, 100%);
  margin: 0 auto;
}

/* ─── Banner images ──────────────────────────────────────────────────────── */
.ghr-banner {
  width: min(94vw, 1400px);
  margin: 0 auto clamp(3rem, 6vw, 5rem);
  border-radius: 20px;
  overflow: hidden;
}

.ghr-banner img {
  width: 100%;
  height: clamp(220px, 34vw, 460px);
  object-fit: cover;
  display: block;
}

/* ─── Before / after comparison slider ───────────────────────────────────── */
.ghr-compare-section {
  width: min(94vw, 1400px);
  margin: 0 auto clamp(3rem, 6vw, 5rem);
}

.ghr-compare-section .ghr-section-header {
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 2.5rem;
}

.ghr-compare__heading {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #1a1816;
  margin: 0;
  text-align: center;
}

.ghr-compare-wrap {
  position: relative;
  width: min(66vw, 980px);
  margin: 0 auto;
}

/* Thin rainbow neon glow around the comparison image. Lives on the wrapper
   (not .ghr-compare itself, which has overflow:hidden for the image clip) as
   a ::before — painted first, so it sits behind .ghr-compare with no z-index
   needed, and only shows as a soft ring bleeding past the rounded edges. */
.ghr-compare-wrap::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 23px;
  background: conic-gradient(from 180deg,
    #ff3b3b, #ff9d3b, #fff23b, #3bff6e, #3bd4ff, #7a3bff, #ff3bcf, #ff3b3b);
  filter: blur(9px);
  opacity: 0.9;
}

.ghr-compare {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: 20px;
  overflow: hidden;
  background: #1a1816;
}

.ghr-compare__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.ghr-compare__clip {
  position: absolute;
  inset: 0;
  clip-path: inset(0 50% 0 0);
  will-change: clip-path;
}

.ghr-compare__label {
  position: absolute;
  top: 1.25rem;
  z-index: 2;
  padding: 0.4rem 0.9rem;
  border-radius: 100px;
  background: rgba(26, 24, 22, 0.55);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  pointer-events: none;
}

.ghr-compare__label--before { left: 1.25rem; }
.ghr-compare__label--after  { right: 1.25rem; }

.ghr-compare__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 2;
  width: 3px;
  background: rgba(255, 255, 255, 0.9);
  transform: translateX(-50%);
  pointer-events: none;
  will-change: left;
}

.ghr-compare__handle::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
}

.ghr-compare__handle svg {
  position: absolute;
  top: 50%;
  left: 50%;
  color: #1a1816;
}

.ghr-compare__handle svg:first-child {
  transform: translate(calc(-100% - 1px), -50%);
}

.ghr-compare__handle svg:last-child {
  transform: translate(1px, -50%);
}

.ghr-compare__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
}

.ghr-compare__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 46px;
  height: 46px;
}

.ghr-compare__range::-moz-range-thumb {
  width: 46px;
  height: 46px;
  border: none;
  background: transparent;
}

/* ─── Intro / stat callout ───────────────────────────────────────────────── */
.ghr-intro {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  width: min(90vw, 980px);
  margin: 0 auto clamp(3rem, 7vw, 5.5rem);
}

.ghr-intro__stat {
  flex-shrink: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-style: normal;
  letter-spacing: -0.02em;
  font-size: clamp(3.2rem, 8vw, 6rem);
  line-height: 1;
  color: #1a1816;
}

.ghr-intro__body {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: 1.65;
  color: #2e2c2c;
  opacity: 0.82;
}

/* ─── Checklist grid ─────────────────────────────────────────────────────── */
.ghr-checklist {
  position: relative;
  width: min(94vw, 1400px);
  margin: 0 auto clamp(3rem, 6vw, 5rem);
}

/* Topographic contour pattern, recolored to the page's ink tone with the
   opacity baked into the SVG itself (fill-opacity). Full-bleed to the
   viewport width (not boxed to .ghr-checklist's own column) via the
   left:50% + 100vw trick, and extends past .ghr-checklist's own top/bottom
   edge to seep into the Intro and Compare sections on either side. A mask
   gradient fades it to nothing at both the top and bottom of that taller
   span, so there's no hard box edge anywhere — just a graceful fade in and
   out. Needs .ghr-checklist to be position:relative for the absolute
   positioning, and .ghr-grid to also be "positioned" (below) so painting
   order — not z-index — puts the real cards above this layer. */
.ghr-checklist::before {
  content: '';
  position: absolute;
  top: -6rem;
  bottom: -6rem;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background-image: url('assets/images/branding/topographic-pattern.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 80%, transparent 100%);
  pointer-events: none;
}

/* Flexbox instead of Grid: grid columns are shared across every row, so a
   short last row just leaves an empty track on the right instead of
   centering. Flex-wrap centers each wrapped line independently. */
.ghr-grid {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
}

.ghr-card {
  flex: 1 1 280px;
  max-width: 330px;
  background: #fff;
  border-radius: 16px;
  padding: 1.75rem 1.75rem 2rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04), 0 8px 28px rgba(0, 0, 0, 0.05);
}

.ghr-card__icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #1a1816;
  color: #fff;
  margin-bottom: 1rem;
}

.ghr-card__name {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 1.25rem;
  color: #1a1816;
  margin: 0 0 0.9rem;
  letter-spacing: -0.01em;
}

.ghr-card__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.ghr-card__list li {
  position: relative;
  padding-left: 1.3rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #2e2c2c;
  opacity: 0.78;
}

.ghr-card__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1a1816;
}

/* ─── Who Handles What ───────────────────────────────────────────────────── */
.ghr-handle {
  width: min(94vw, 1100px);
  margin: 0 auto clamp(4rem, 8vw, 6rem);
}

.ghr-handle__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.ghr-handle__col {
  background: #fff;
  border-radius: 20px;
  padding: clamp(1.75rem, 3vw, 2.75rem);
}

/* "You Handle" card only — the dark "We Handle" card already reads as its
   own distinct block against the white page via its own background. */
.ghr-handle__col:not(.ghr-handle__col--accent) {
  border: 1px solid #1a1816;
}

.ghr-handle__col--accent {
  background: #1a1816;
}

.ghr-handle__heading {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  color: #1a1816;
  margin: 0 0 1.25rem;
  letter-spacing: -0.01em;
}

.ghr-handle__col--accent .ghr-handle__heading {
  color: #fff;
}

.ghr-handle__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.ghr-handle__list li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #2e2c2c;
  opacity: 0.82;
}

.ghr-handle__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 9px;
  height: 9px;
  border-radius: 3px;
  border: 1.4px solid #2e2c2c;
  opacity: 0.55;
}

.ghr-handle__col--accent .ghr-handle__list li {
  color: #fff;
  opacity: 0.92;
}

.ghr-handle__col--accent .ghr-handle__list li::before {
  border-color: #fff;
  background: #fff;
  opacity: 1;
}

/* ─── Responsive: mobile (≤ 768px) ───────────────────────────────────────── */
@media (max-width: 768px) {
  .ghr-intro {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .ghr-handle__grid {
    grid-template-columns: 1fr;
  }

  /* Desktop sizes this at 66vw, which reads fine at wide widths but leaves
     the before/after image looking small and cramped next to the page's
     other mobile sections (which all sit around 90-94vw). Widen it to match
     on mobile only. */
  .ghr-compare-wrap {
    width: min(92vw, 980px);
  }
}