/* ═══════════════════════════════════════════════════════════
   HOME PAGE — Hero Section
   Hupp & Fuller Detailing
   ═══════════════════════════════════════════════════════════ */

:root {
  --hf-gold:     #D3AF37;
  --hf-cream:    #F6D97B;
  --hf-navy:     #111828;
  --hf-black:    #050409;
  --hf-white:    #F0EDE6;
  --hf-ease:     cubic-bezier(0.22, 1, 0.36, 1);
  --hf-ease-out: cubic-bezier(0.0, 0, 0.2, 1);
  --hf-mouse-x:  50%;
  --hf-mouse-y:  50%;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-snap-type: y mandatory;
  overflow-y: auto;
  scrollbar-width: none;
}
html::-webkit-scrollbar { display: none; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--hf-black);
  color: var(--hf-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ═══════════════════════════════════
   HERO — Full viewport, logo dominant
   ═══════════════════════════════════ */
.hf-hero {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
  overflow: hidden;
  z-index: 1;
}

.hf-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    700px circle at var(--hf-mouse-x) var(--hf-mouse-y),
    rgba(211,175,55,0.07) 0%,
    transparent 65%
  );
  pointer-events: none;
  z-index: 1;
}

/* ── Decorative BG ── */
.hf-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.hf-hero__glow {
  position: absolute;
  width: 50vw;
  height: 50vw;
  max-width: 650px;
  max-height: 650px;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.1;
}
.hf-hero__glow--tl {
  top: -12%; left: -8%;
  background: radial-gradient(circle, var(--hf-gold), transparent 70%);
  animation: hfGlowDrift-tl 18s ease-in-out infinite alternate;
}
.hf-hero__glow--br {
  bottom: -10%; right: -6%;
  background: radial-gradient(circle, var(--hf-cream), transparent 70%);
  animation: hfGlowDrift-br 22s ease-in-out infinite alternate;
}

/* ═══════════════════════════════════
   LOGO STAGE — Doubled size, true centerpiece
   ═══════════════════════════════════ */
.hf-hero__stage {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(420px, 72vw, 920px);
  height: clamp(420px, 72vw, 920px);
  flex-shrink: 0;
  opacity: 0;
  animation: hfBlurUnveil 1100ms var(--hf-ease) 0ms forwards;
}

.hf-hero__ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(211,175,55,0.08);
}
.hf-hero__ring--outer {
  width: 112%;
  height: 112%;
  animation: hfRingFloat 7s ease-in-out infinite;
  border-color: rgba(211,175,55,0.05);
}
.hf-hero__ring--mid {
  width: 104%;
  height: 104%;
  animation: hfRingFloat 5.5s ease-in-out 0.8s infinite;
  border-color: rgba(211,175,55,0.07);
}
.hf-hero__ring--inner {
  width: 94%;
  height: 94%;
  animation: hfRingFloat 6.2s ease-in-out 1.6s infinite;
  border-color: rgba(211,175,55,0.1);
}

.hf-hero__logo-wrap {
  position: relative;
  width: 82%;
  height: 82%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hf-hero__logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 0 12px rgba(211,175,55,0.2))
    drop-shadow(0 0 30px rgba(211,175,55,0.08));
  user-select: none;
}

/* ═══════════════════════════════════
   CTA — Centered below logo
   ═══════════════════════════════════ */
.hf-hero__cta {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
  padding: 15px 44px;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  border-radius: 60px;
  cursor: pointer;
  white-space: nowrap;
  background: linear-gradient(135deg, var(--hf-gold) 0%, #C5982F 100%);
  color: var(--hf-black);
  border: 1px solid rgba(211,175,55,0.5);
  box-shadow: 0 2px 16px rgba(211,175,55,0.3);
  opacity: 0;
  animation: hfFadeUp 700ms var(--hf-ease) 600ms forwards;
  transition:
    transform 260ms var(--hf-ease),
    box-shadow 260ms var(--hf-ease);
}

.hf-hero__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(211,175,55,0.45), 0 0 44px rgba(211,175,55,0.12);
}
.hf-hero__cta:active { transform: translateY(0); }

.hf-hero__cta:focus-visible {
  outline: 2px solid var(--hf-gold);
  outline-offset: 3px;
}

/* ── Scroll Cue ── */
.hf-hero__scroll-cue {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  opacity: 0;
  animation: hfFadeIn 500ms ease 1400ms forwards;
}

.hf-hero__scroll-track {
  width: 18px;
  height: 30px;
  border-radius: 10px;
  border: 1.5px solid rgba(211,175,55,0.2);
  display: flex;
  justify-content: center;
  padding-top: 5px;
}

.hf-hero__scroll-dot {
  width: 3px;
  height: 7px;
  border-radius: 3px;
  background: var(--hf-gold);
  animation: hfScrollPulse 2s ease-in-out infinite;
}

/* ═══════════════════════════════════
   KEYFRAMES
   ═══════════════════════════════════ */
@keyframes hfBlurUnveil {
  from { opacity: 0; filter: blur(16px); transform: scale(0.85); }
  to   { opacity: 1; filter: blur(0);    transform: scale(1); }
}

@keyframes hfFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes hfFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes hfRingFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-8px) scale(1.02); }
}

@keyframes hfGlowDrift-tl {
  0%   { transform: translate(0, 0)      scale(1); }
  100% { transform: translate(30px, 20px) scale(1.08); }
}
@keyframes hfGlowDrift-br {
  0%   { transform: translate(0, 0)        scale(1); }
  100% { transform: translate(-25px, -18px) scale(1.06); }
}

@keyframes hfScrollPulse {
  0%, 100% { opacity: 1;   transform: translateY(0); }
  50%      { opacity: 0.25; transform: translateY(8px); }
}

/* ═══════════════════════════════════
   RESPONSIVE — Tablet (max 900px)
   ═══════════════════════════════════ */
@media (max-width: 900px) {
  .hf-hero__stage {
    width: clamp(340px, 75vw, 560px);
    height: clamp(340px, 75vw, 560px);
  }
}

/* ═══════════════════════════════════
   RESPONSIVE — Mobile (max 600px)
   ═══════════════════════════════════ */
@media (max-width: 600px) {
  .hf-hero__stage {
    width: clamp(280px, 85vw, 420px);
    height: clamp(280px, 85vw, 420px);
  }

  .hf-hero__ring--outer { display: none; }

  .hf-hero__cta {
    padding: 13px 36px;
    font-size: 0.86rem;
    margin-top: 16px;
  }

  .hf-hero__scroll-cue { bottom: 8px; }
}

/* ═══════════════════════════════════
   RESPONSIVE — Small mobile (max 380px)
   ═══════════════════════════════════ */
@media (max-width: 380px) {
  .hf-hero__stage {
    width: 260px;
    height: 260px;
  }
}

/* ═══════════════════════════════════
   RESPONSIVE — Ultrawide (min 2200px)
   ═══════════════════════════════════ */
@media (min-width: 2200px) {
  .hf-hero__stage {
    width: 1100px;
    height: 1100px;
  }

  .hf-hero__cta {
    padding: 18px 56px;
    font-size: 1.1rem;
    margin-top: 32px;
  }
}

/* ═══════════════════════════════════
   RESPONSIVE — Super ultrawide (min 3800px)
   ═══════════════════════════════════ */
@media (min-width: 3800px) {
  .hf-hero__stage {
    width: 1400px;
    height: 1400px;
  }

  .hf-hero__cta {
    padding: 22px 64px;
    font-size: 1.3rem;
  }
}

/* ═══════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .hf-hero__stage,
  .hf-hero__cta,
  .hf-hero__scroll-cue {
    animation: none !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }

  .hf-hero__ring,
  .hf-hero__glow--tl,
  .hf-hero__glow--br {
    animation: none !important;
  }
}

/* ═══════════════════════════════════
   TRUST BAR — Expanding Cards with Photo Reveal
   ═══════════════════════════════════ */
.hf-trust {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
  z-index: 1;
  overflow: hidden;
}

.hf-trust::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  max-width: 700px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(211,175,55,0.3), transparent);
  opacity: 0;
  transition: opacity 600ms ease;
}
.hf-trust.is-visible::before { opacity: 1; }

/* ── Blur overlay ── */
.hf-trust__blur-overlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  background: rgba(5,4,9,0);
  pointer-events: none;
  opacity: 0;
  transition:
    backdrop-filter 600ms cubic-bezier(0.22, 1, 0.36, 1),
    -webkit-backdrop-filter 600ms cubic-bezier(0.22, 1, 0.36, 1),
    background 600ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.hf-trust.has-active-card .hf-trust__blur-overlay {
  backdrop-filter: blur(22px) saturate(0.5);
  -webkit-backdrop-filter: blur(22px) saturate(0.5);
  background: rgba(5,4,9,0.65);
  pointer-events: auto;
  opacity: 1;
}

/* ── Card grid ── */
.hf-trust__inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 0 40px;
  max-width: 1360px;
  width: 100%;
}
.hf-trust.has-active-card .hf-trust__inner {
  pointer-events: none;
}

/* ── Placeholder (holds grid space during card expansion) ── */
.hf-trust__placeholder {
  border-radius: 18px;
  flex-shrink: 0;
}

/* ═══════════════════════════════════
   CARD — Container
   ═══════════════════════════════════ */
.hf-trust__card {
  position: relative;
  flex: 1;
  max-width: 200px;
  height: 240px;
  cursor: pointer;
  border-radius: 18px;
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 700ms var(--hf-ease),
    transform 700ms var(--hf-ease);
}

.hf-trust.is-visible .hf-trust__card {
  opacity: 1;
  transform: translateY(0);
}
.hf-trust.is-visible .hf-trust__card[data-trust-index="0"] { transition-delay: 0ms; }
.hf-trust.is-visible .hf-trust__card[data-trust-index="1"] { transition-delay: 100ms; }
.hf-trust.is-visible .hf-trust__card[data-trust-index="2"] { transition-delay: 200ms; }
.hf-trust.is-visible .hf-trust__card[data-trust-index="3"] { transition-delay: 300ms; }
.hf-trust.is-visible .hf-trust__card[data-trust-index="4"] { transition-delay: 400ms; }
.hf-trust.is-visible .hf-trust__card[data-trust-index="5"] { transition-delay: 500ms; }

/* ── Dim siblings when one is active ── */
.hf-trust.has-active-card .hf-trust__card {
  opacity: 0.08;
  filter: blur(3px);
  pointer-events: none;
  transition:
    opacity 500ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.hf-trust.has-active-card .hf-trust__card.is-expanding {
  opacity: 1;
  filter: none;
  pointer-events: auto;
}

/* ═══════════════════════════════════
   CARD — Expanded state (fixed overlay, ~8× area)
   ═══════════════════════════════════ */
.hf-trust__card.is-expanding {
  position: fixed;
  z-index: 100;
  cursor: default;
  max-width: none;
  flex: none;
  --expanded-w: min(90vw, 960px);
  --expanded-h: min(72vh, 540px);
  top: calc(50% - var(--expanded-h) / 2);
  left: calc(50% - var(--expanded-w) / 2);
  width: var(--expanded-w);
  height: var(--expanded-h);
  transform-origin: center center;
  border-radius: 22px;
}

/* ═══════════════════════════════════
   CARD — Inner wrapper
   ═══════════════════════════════════ */
.hf-trust__card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
}

/* ═══════════════════════════════════
   FRONT FACE
   ═══════════════════════════════════ */
.hf-trust__front {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px 16px;
  border-radius: inherit;
  border: 1px solid rgba(211,175,55,0.08);
  overflow: hidden;
  background: linear-gradient(
    150deg,
    rgba(17,24,40,0.45) 0%,
    rgba(5,4,9,0.55) 100%
  );
  z-index: 2;
  transition:
    opacity 350ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 350ms ease,
    box-shadow 350ms ease;
}

.hf-trust__card.is-flipped .hf-trust__front {
  opacity: 0;
  pointer-events: none;
}

.hf-trust__front::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    ellipse at 50% 0%,
    rgba(211,175,55,0.07) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 350ms ease;
}
.hf-trust__card:not(.is-expanding):hover .hf-trust__front::before { opacity: 1; }

.hf-trust__card:not(.is-expanding):hover .hf-trust__front {
  border-color: rgba(211,175,55,0.22);
  box-shadow:
    0 4px 28px rgba(211,175,55,0.1),
    0 0 50px rgba(211,175,55,0.04);
}

/* ── Icon ── */
.hf-trust__icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hf-gold);
  transition:
    transform 350ms var(--hf-ease),
    filter 350ms ease;
}
.hf-trust__icon svg { width: 100%; height: 100%; }

.hf-trust__card:not(.is-expanding):hover .hf-trust__icon {
  transform: translateY(-3px) scale(1.12);
  filter: drop-shadow(0 0 12px rgba(211,175,55,0.5));
}

/* ── Label ── */
.hf-trust__label {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(240,237,230,0.7);
  text-align: center;
  line-height: 1.35;
  transition: color 300ms ease;
}
.hf-trust__card:not(.is-expanding):hover .hf-trust__label { color: var(--hf-white); }

/* ═══════════════════════════════════
   BACK FACE — Horizontal: Content left, Photo right
   ═══════════════════════════════════ */
.hf-trust__back {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: row;
  border-radius: inherit;
  border: 1px solid rgba(211,175,55,0.25);
  overflow: hidden;
  background: var(--hf-black);
  box-shadow:
    0 20px 70px rgba(211,175,55,0.18),
    0 0 120px rgba(211,175,55,0.06),
    inset 0 1px 0 rgba(211,175,55,0.12);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transition: opacity 400ms cubic-bezier(0.22, 1, 0.36, 1) 100ms;
}

.hf-trust__card.is-flipped .hf-trust__back {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

/* ── Text content — Left column (~25-30%) ── */
.hf-trust__back-content {
  order: -1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 18px;
  width: 30%;
  min-width: 200px;
  flex-shrink: 0;
  padding: 44px 36px;
  text-align: left;
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: translateX(-20px);
  transition:
    opacity 550ms cubic-bezier(0.22, 1, 0.36, 1) 300ms,
    transform 550ms cubic-bezier(0.22, 1, 0.36, 1) 300ms;
}

.hf-trust__card.is-flipped .hf-trust__back-content {
  opacity: 1;
  transform: translateX(0);
}

.hf-trust__back-title {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hf-gold);
  line-height: 1.3;
}

.hf-trust__back-desc {
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.75;
  color: rgba(240,237,230,0.85);
  letter-spacing: 0.01em;
}

/* ── Photo — Right side (~70-75%) ── */
.hf-trust__back-photo {
  position: relative;
  flex: 1;
  height: 100%;
  overflow: hidden;
}

.hf-trust__back-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transform: scale(1.15);
  filter: blur(6px) brightness(0.5);
  transition:
    opacity 700ms cubic-bezier(0.22, 1, 0.36, 1) 200ms,
    transform 1400ms cubic-bezier(0.22, 1, 0.36, 1) 200ms,
    filter 1000ms cubic-bezier(0.22, 1, 0.36, 1) 300ms;
}

.hf-trust__card.is-flipped .hf-trust__back-photo img {
  opacity: 1;
  transform: scale(1);
  filter: blur(0) brightness(0.88);
}

/* Gradient fade on LEFT edge of photo (blends into content column) */
.hf-trust__back-photo::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 40%;
  background: linear-gradient(
    to right,
    var(--hf-black) 0%,
    rgba(5,4,9,0.8) 18%,
    rgba(5,4,9,0.35) 55%,
    transparent 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* Gold shimmer — vertical line at photo left edge */
.hf-trust__back-photo::before {
  content: '';
  position: absolute;
  top: 12%;
  bottom: 12%;
  left: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(211,175,55,0.35), transparent);
  z-index: 2;
  opacity: 0;
  transform: scaleY(0);
  transition:
    opacity 500ms ease 450ms,
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1) 450ms;
}

.hf-trust__card.is-flipped .hf-trust__back-photo::before {
  opacity: 1;
  transform: scaleY(1);
}

/* ═══════════════════════════════════
   TRUST BAR — Responsive: Tablet
   ═══════════════════════════════════ */
@media (max-width: 1024px) {
  .hf-trust__inner {
    flex-wrap: wrap;
    gap: 16px;
    padding: 0 24px;
    justify-content: center;
  }

  .hf-trust__card {
    flex: 0 0 calc(33.333% - 16px);
    max-width: none;
    height: 200px;
  }

  .hf-trust__card.is-expanding {
    --expanded-w: 92vw;
    --expanded-h: min(68vh, 500px);
  }

  .hf-trust__back-content {
    width: 35%;
    padding: 32px 28px;
  }

  .hf-trust__back-title { font-size: 0.95rem; }
  .hf-trust__back-desc { font-size: 0.88rem; }
}

/* ═══════════════════════════════════
   TRUST BAR — Responsive: Mobile
   ═══════════════════════════════════ */
@media (max-width: 600px) {
  .hf-trust {
    min-height: 100svh;
    padding: 40px 0;
  }

  .hf-trust__inner {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 0 20px;
  }

  .hf-trust__card {
    flex: none;
    width: 100%;
    max-width: 320px;
    height: 180px;
  }

  .hf-trust__front {
    flex-direction: row;
    justify-content: flex-start;
    gap: 16px;
    padding: 20px 24px;
  }

  .hf-trust__icon { width: 32px; height: 32px; flex-shrink: 0; }
  .hf-trust__label { text-align: left; font-size: 0.8rem; }

  /* Expanded card goes vertical on mobile */
  .hf-trust__card.is-expanding {
    --expanded-w: 94vw;
    --expanded-h: min(82vh, 620px);
    border-radius: 18px;
  }

  .hf-trust__back {
    flex-direction: column;
  }

  .hf-trust__back-content {
    order: 0;
    width: 100%;
    min-width: 0;
    padding: 24px 24px 28px;
    transform: translateY(12px);
  }
  .hf-trust__card.is-flipped .hf-trust__back-content {
    transform: translateY(0);
  }

  .hf-trust__back-photo {
    height: 55%;
    flex: none;
    width: 100%;
  }

  /* Bottom-edge gradient instead of left-edge on mobile */
  .hf-trust__back-photo::after {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(
      to top,
      var(--hf-black) 0%,
      rgba(5,4,9,0.7) 30%,
      transparent 100%
    );
  }

  /* Horizontal gold line on mobile */
  .hf-trust__back-photo::before {
    top: auto;
    bottom: 0;
    left: 10%;
    right: 10%;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(211,175,55,0.35), transparent);
    transform: scaleX(0);
  }
  .hf-trust__card.is-flipped .hf-trust__back-photo::before {
    transform: scaleX(1);
  }

  .hf-trust__back-title { font-size: 0.92rem; }
  .hf-trust__back-desc { font-size: 0.86rem; line-height: 1.6; }
}

/* ═══════════════════════════════════
   TRUST BAR — Responsive: Small mobile
   ═══════════════════════════════════ */
@media (max-width: 380px) {
  .hf-trust__card {
    max-width: 290px;
    height: 170px;
  }

  .hf-trust__icon { width: 28px; height: 28px; }
  .hf-trust__label { font-size: 0.74rem; }

  .hf-trust__card.is-expanding {
    --expanded-w: 96vw;
    --expanded-h: min(85vh, 580px);
  }

  .hf-trust__back-title { font-size: 0.86rem; }
  .hf-trust__back-desc { font-size: 0.8rem; }
}

/* ═══════════════════════════════════
   TRUST BAR — Responsive: Ultrawide
   ═══════════════════════════════════ */
@media (min-width: 2200px) {
  .hf-trust__inner {
    max-width: 1700px;
    gap: 28px;
  }

  .hf-trust__card {
    max-width: 270px;
    height: 300px;
  }

  .hf-trust__icon { width: 54px; height: 54px; }
  .hf-trust__label { font-size: 0.9rem; }

  .hf-trust__card.is-expanding {
    --expanded-w: min(80vw, 1300px);
    --expanded-h: min(70vh, 680px);
  }

  .hf-trust__back-title { font-size: 1.2rem; }
  .hf-trust__back-desc { font-size: 1.05rem; }
  .hf-trust__back-content { padding: 48px 44px; gap: 22px; }
}

/* ═══════════════════════════════════
   TRUST BAR — Responsive: Super ultrawide
   ═══════════════════════════════════ */
@media (min-width: 3800px) {
  .hf-trust__card {
    max-width: 340px;
    height: 380px;
  }

  .hf-trust__icon { width: 68px; height: 68px; }
  .hf-trust__label { font-size: 1.05rem; }

  .hf-trust__card.is-expanding {
    --expanded-w: min(70vw, 2000px);
    --expanded-h: min(65vh, 900px);
  }

  .hf-trust__back-title { font-size: 1.5rem; }
  .hf-trust__back-desc { font-size: 1.2rem; }
  .hf-trust__back-content { padding: 60px 56px; gap: 26px; }
}

/* ═══════════════════════════════════
   TRUST BAR — Reduced motion
   ═══════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .hf-trust__card {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .hf-trust__front { transition: none !important; }
  .hf-trust__back { transition-duration: 0ms !important; }
  .hf-trust__blur-overlay { transition-duration: 0ms !important; }
  .hf-trust::before { opacity: 1 !important; transition: none !important; }
  .hf-trust.has-active-card .hf-trust__card { transition-duration: 0ms !important; }

  .hf-trust__back-photo img {
    opacity: 1 !important;
    transform: none !important;
    filter: brightness(0.88) !important;
    transition: none !important;
  }

  .hf-trust__back-content {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .hf-trust__back-photo::before {
    opacity: 1 !important;
    transform: scaleY(1) !important;
    transition: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   SERVICES OVERVIEW — Premium Service Selector
   ═══════════════════════════════════════════════════════════ */
.hf-services {
  position: relative;
  width: 100%;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
  z-index: 1;
  padding: 80px 40px;
  gap: 48px;
}

/* ── Header ── */
.hf-services__header {
  text-align: center;
  max-width: 640px;
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 700ms var(--hf-ease),
    transform 700ms var(--hf-ease);
}

.hf-services.is-visible .hf-services__header {
  opacity: 1;
  transform: translateY(0);
}

.hf-services__eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hf-gold);
  margin-bottom: 14px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 500ms var(--hf-ease) 200ms, transform 500ms var(--hf-ease) 200ms;
}
.hf-services.is-visible .hf-services__eyebrow {
  opacity: 1;
  transform: translateY(0);
}

.hf-services__heading {
  font-size: clamp(1.5rem, 3.5vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--hf-white);
  line-height: 1.15;
  margin-bottom: 14px;
}

.hf-services__subtext {
  font-size: 0.92rem;
  font-weight: 400;
  color: rgba(240,237,230,0.55);
  line-height: 1.6;
  letter-spacing: 0.01em;
}

/* ── Card Grid — 3×2 ── */
.hf-services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: 100%;
  max-width: 1200px;
}

/* ═══════════════════════════════════
   SERVICE CARD
   ═══════════════════════════════════ */
.hf-svc {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 320px;
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: var(--hf-white);
  border: 1px solid rgba(211,175,55,0.06);
  cursor: pointer;
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 700ms var(--hf-ease),
    transform 700ms var(--hf-ease),
    border-color 400ms ease,
    box-shadow 400ms ease;
}

.hf-services.is-visible .hf-svc {
  opacity: 1;
  transform: translateY(0);
}
.hf-services.is-visible .hf-svc:nth-child(1) { transition-delay: 80ms; }
.hf-services.is-visible .hf-svc:nth-child(2) { transition-delay: 160ms; }
.hf-services.is-visible .hf-svc:nth-child(3) { transition-delay: 240ms; }
.hf-services.is-visible .hf-svc:nth-child(4) { transition-delay: 320ms; }
.hf-services.is-visible .hf-svc:nth-child(5) { transition-delay: 400ms; }
.hf-services.is-visible .hf-svc:nth-child(6) { transition-delay: 480ms; }

.hf-svc:hover,
.hf-svc:focus-visible {
  border-color: rgba(211,175,55,0.25);
  box-shadow:
    0 8px 40px rgba(211,175,55,0.12),
    0 0 60px rgba(211,175,55,0.04);
}
.hf-svc:focus-visible {
  outline: 2px solid var(--hf-gold);
  outline-offset: 2px;
}

/* ═══════════════════════════════════
   IMAGE LAYER
   ═══════════════════════════════════ */
.hf-svc__img-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hf-svc__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.01);
  filter: brightness(0.45) saturate(0.85);
  transition:
    transform 800ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hf-svc:hover .hf-svc__img-wrap img,
.hf-svc.is-expanded .hf-svc__img-wrap img {
  transform: scale(1.08);
  filter: brightness(0.3) saturate(0.7);
}

/* ── Shine / light-glide effect per card ── */
.hf-svc__img-shine {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 500ms ease;
}

.hf-svc:hover .hf-svc__img-shine,
.hf-svc.is-expanded .hf-svc__img-shine {
  opacity: 1;
}

/* Exterior — light gliding across paint */
[data-svc="exterior"] .hf-svc__img-shine {
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(211,175,55,0.08) 45%,
    rgba(255,255,255,0.06) 50%,
    rgba(211,175,55,0.08) 55%,
    transparent 70%
  );
  background-size: 300% 100%;
  animation: none;
}
[data-svc="exterior"]:hover .hf-svc__img-shine,
[data-svc="exterior"].is-expanded .hf-svc__img-shine {
  animation: svcShineSweep 2.5s ease-in-out infinite;
}

/* Interior — crisp reveal wipe */
[data-svc="interior"] .hf-svc__img-shine {
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(240,237,230,0.04) 40%,
    rgba(240,237,230,0.08) 50%,
    rgba(240,237,230,0.04) 60%,
    transparent 100%
  );
  background-size: 250% 100%;
}
[data-svc="interior"]:hover .hf-svc__img-shine,
[data-svc="interior"].is-expanded .hf-svc__img-shine {
  animation: svcShineSweep 3s ease-in-out infinite;
}

/* Full Detail — layered gold sweep */
[data-svc="full"] .hf-svc__img-shine {
  background: linear-gradient(
    130deg,
    transparent 25%,
    rgba(211,175,55,0.06) 40%,
    rgba(246,217,123,0.06) 50%,
    rgba(211,175,55,0.06) 60%,
    transparent 75%
  );
  background-size: 300% 100%;
}
[data-svc="full"]:hover .hf-svc__img-shine,
[data-svc="full"].is-expanded .hf-svc__img-shine {
  animation: svcShineSweep 3.2s ease-in-out infinite;
}

/* Paint Correction — micro swirl reveal */
[data-svc="correction"] .hf-svc__img-shine {
  background: radial-gradient(
    ellipse at 50% 50%,
    rgba(211,175,55,0.08) 0%,
    transparent 55%
  );
  mix-blend-mode: screen;
}
[data-svc="correction"]:hover .hf-svc__img-shine,
[data-svc="correction"].is-expanded .hf-svc__img-shine {
  animation: svcCorrectionPulse 3s ease-in-out infinite;
}

/* Ceramic Coating — water-bead shimmer */
[data-svc="ceramic"] .hf-svc__img-shine {
  background:
    radial-gradient(circle at 20% 30%, rgba(211,175,55,0.06) 0%, transparent 20%),
    radial-gradient(circle at 70% 60%, rgba(211,175,55,0.06) 0%, transparent 20%),
    radial-gradient(circle at 40% 80%, rgba(211,175,55,0.05) 0%, transparent 18%),
    radial-gradient(circle at 80% 20%, rgba(211,175,55,0.05) 0%, transparent 18%);
}
[data-svc="ceramic"]:hover .hf-svc__img-shine,
[data-svc="ceramic"].is-expanded .hf-svc__img-shine {
  animation: svcBeadShimmer 4s ease-in-out infinite;
}

/* Add-ons — soft plus pulse */
[data-svc="addons"] .hf-svc__img-shine {
  background: radial-gradient(
    ellipse at 50% 50%,
    rgba(240,237,230,0.05) 0%,
    transparent 50%
  );
}
[data-svc="addons"]:hover .hf-svc__img-shine,
[data-svc="addons"].is-expanded .hf-svc__img-shine {
  animation: svcCorrectionPulse 3.5s ease-in-out infinite;
}

@keyframes svcShineSweep {
  0%   { background-position: 150% 0; }
  100% { background-position: -50% 0; }
}

@keyframes svcCorrectionPulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.15); }
}

@keyframes svcBeadShimmer {
  0%, 100% { opacity: 0.5; filter: blur(0px); }
  50%      { opacity: 1; filter: blur(1px); }
}

/* ═══════════════════════════════════
   OVERLAY — Darkening gradient
   ═══════════════════════════════════ */
.hf-svc__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(5,4,9,0.92) 0%,
    rgba(5,4,9,0.6) 35%,
    rgba(5,4,9,0.25) 60%,
    transparent 100%
  );
  transition: background 500ms ease;
}

.hf-svc:hover .hf-svc__overlay,
.hf-svc.is-expanded .hf-svc__overlay {
  background: linear-gradient(
    to top,
    rgba(5,4,9,0.95) 0%,
    rgba(5,4,9,0.78) 40%,
    rgba(5,4,9,0.45) 70%,
    rgba(5,4,9,0.2) 100%
  );
}

/* ═══════════════════════════════════
   CONTENT LAYER
   ═══════════════════════════════════ */
.hf-svc__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: 28px 24px;
  gap: 0;
}

/* ── Icon ── */
.hf-svc__icon {
  width: 28px;
  height: 28px;
  color: var(--hf-gold);
  margin-bottom: 10px;
  opacity: 0.7;
  transition: opacity 300ms ease, transform 350ms var(--hf-ease);
}
.hf-svc__icon svg { width: 100%; height: 100%; }

.hf-svc:hover .hf-svc__icon,
.hf-svc.is-expanded .hf-svc__icon {
  opacity: 1;
  transform: translateY(-2px);
}

/* ── Title ── */
.hf-svc__title {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--hf-white);
  line-height: 1.25;
  margin-bottom: 0;
  transition: color 300ms ease;
}

/* ── Summary (hidden → visible on hover) ── */
.hf-svc__summary {
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.6;
  color: rgba(240,237,230,0.7);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0;
  transition:
    max-height 550ms var(--hf-ease),
    opacity 400ms var(--hf-ease),
    margin-top 400ms var(--hf-ease);
}

.hf-svc:hover .hf-svc__summary,
.hf-svc.is-expanded .hf-svc__summary {
  max-height: 80px;
  opacity: 1;
  margin-top: 10px;
}

/* ── Tags row ── */
.hf-svc__includes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0;
  transition:
    max-height 500ms var(--hf-ease) 80ms,
    opacity 400ms var(--hf-ease) 80ms,
    margin-top 400ms var(--hf-ease) 80ms;
}

.hf-svc:hover .hf-svc__includes,
.hf-svc.is-expanded .hf-svc__includes {
  max-height: 60px;
  opacity: 1;
  margin-top: 12px;
}

.hf-svc__tag {
  display: inline-block;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--hf-gold);
  background: rgba(211,175,55,0.08);
  border: 1px solid rgba(211,175,55,0.12);
  border-radius: 4px;
  padding: 3px 8px;
  white-space: nowrap;
}

/* ── Use case ── */
.hf-svc__use-case {
  font-size: 0.7rem;
  font-weight: 500;
  font-style: italic;
  color: rgba(240,237,230,0.45);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0;
  transition:
    max-height 500ms var(--hf-ease) 140ms,
    opacity 400ms var(--hf-ease) 140ms,
    margin-top 400ms var(--hf-ease) 140ms;
}

.hf-svc:hover .hf-svc__use-case,
.hf-svc.is-expanded .hf-svc__use-case {
  max-height: 40px;
  opacity: 1;
  margin-top: 10px;
}

/* ── CTA text ── */
.hf-svc__cta-text {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--hf-gold);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0;
  transition:
    max-height 500ms var(--hf-ease) 200ms,
    opacity 400ms var(--hf-ease) 200ms,
    margin-top 400ms var(--hf-ease) 200ms,
    transform 300ms var(--hf-ease);
}

.hf-svc:hover .hf-svc__cta-text,
.hf-svc.is-expanded .hf-svc__cta-text {
  max-height: 30px;
  opacity: 1;
  margin-top: 14px;
}

.hf-svc:hover .hf-svc__cta-text:hover {
  transform: translateX(4px);
}

/* ═══════════════════════════════════
   SERVICES — Responsive: Tablet
   ═══════════════════════════════════ */
@media (max-width: 1024px) {
  .hf-services {
    padding: 60px 24px;
    gap: 36px;
  }

  .hf-services__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .hf-svc { height: 290px; }
  .hf-svc__title { font-size: 1.05rem; }
}

/* ═══════════════════════════════════
   SERVICES — Responsive: Mobile
   ═══════════════════════════════════ */
@media (max-width: 600px) {
  .hf-services {
    padding: 50px 16px;
    gap: 28px;
    min-height: auto;
    scroll-snap-align: start;
  }

  .hf-services__grid {
    grid-template-columns: 1fr;
    gap: 14px;
    max-width: 400px;
  }

  .hf-svc {
    height: auto;
    min-height: 110px;
  }

  /* Mobile: accordion-style, collapsed by default */
  .hf-svc__img-wrap img {
    filter: brightness(0.35) saturate(0.8);
  }

  .hf-svc__content {
    padding: 20px 20px;
  }

  .hf-svc__icon {
    width: 24px;
    height: 24px;
    margin-bottom: 6px;
  }

  .hf-svc__title { font-size: 0.95rem; }
  .hf-svc__summary { font-size: 0.8rem; }
  .hf-svc__tag { font-size: 0.6rem; }
  .hf-svc__use-case { font-size: 0.68rem; }
  .hf-svc__cta-text { font-size: 0.7rem; }

  .hf-services__heading {
    font-size: 1.35rem;
  }

  .hf-services__subtext {
    font-size: 0.84rem;
  }
}

/* ═══════════════════════════════════
   SERVICES — Responsive: Small mobile
   ═══════════════════════════════════ */
@media (max-width: 380px) {
  .hf-services { padding: 40px 12px; }
  .hf-services__grid { max-width: 340px; }
  .hf-svc__title { font-size: 0.88rem; }
  .hf-svc__content { padding: 16px; }
}

/* ═══════════════════════════════════
   SERVICES — Responsive: Ultrawide
   ═══════════════════════════════════ */
@media (min-width: 2200px) {
  .hf-services__grid {
    max-width: 1600px;
    gap: 28px;
  }

  .hf-svc { height: 420px; }
  .hf-svc__title { font-size: 1.4rem; }
  .hf-svc__summary { font-size: 0.95rem; }
  .hf-svc__tag { font-size: 0.72rem; padding: 4px 10px; }
  .hf-svc__cta-text { font-size: 0.82rem; }
  .hf-svc__icon { width: 36px; height: 36px; }

  .hf-services__heading { font-size: 2.8rem; }
  .hf-services__subtext { font-size: 1.05rem; }
}

/* ═══════════════════════════════════
   SERVICES — Responsive: Super ultrawide
   ═══════════════════════════════════ */
@media (min-width: 3800px) {
  .hf-services__grid {
    max-width: 2200px;
    gap: 36px;
  }

  .hf-svc { height: 540px; border-radius: 24px; }
  .hf-svc__title { font-size: 1.7rem; }
  .hf-svc__summary { font-size: 1.1rem; }
  .hf-svc__tag { font-size: 0.82rem; padding: 5px 12px; }
  .hf-svc__icon { width: 48px; height: 48px; }

  .hf-services__heading { font-size: 3.4rem; }
}

/* ═══════════════════════════════════
   SERVICES — Reduced motion
   ═══════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .hf-services__header,
  .hf-services__eyebrow {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .hf-svc {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .hf-svc__img-wrap img {
    transition: none !important;
  }

  .hf-svc__img-shine {
    animation: none !important;
    opacity: 0 !important;
  }

  .hf-svc__summary,
  .hf-svc__includes,
  .hf-svc__use-case,
  .hf-svc__cta-text {
    transition-duration: 0ms !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   PACKAGES — Smart Decision Tool
   ═══════════════════════════════════════════════════════════ */
.hf-pkg {
  position: relative;
  width: 100%;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  scroll-snap-align: start;
  z-index: 1;
  padding: 80px 40px 120px;
  gap: 40px;
}

/* ── Header ── */
.hf-pkg__header {
  text-align: center;
  max-width: 640px;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--hf-ease), transform 700ms var(--hf-ease);
}
.hf-pkg.is-visible .hf-pkg__header {
  opacity: 1;
  transform: translateY(0);
}

.hf-pkg__eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hf-gold);
  margin-bottom: 14px;
}

.hf-pkg__heading {
  font-size: clamp(1.5rem, 3.5vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--hf-white);
  line-height: 1.15;
  margin-bottom: 14px;
}

.hf-pkg__subtext {
  font-size: 0.92rem;
  font-weight: 400;
  color: rgba(240,237,230,0.5);
  line-height: 1.6;
}

/* ═══════════════════════════════════
   VEHICLE SELECTOR — Segmented control
   ═══════════════════════════════════ */
.hf-pkg__selector {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: rgba(17,24,40,0.5);
  border: 1px solid rgba(211,175,55,0.1);
  border-radius: 12px;
  padding: 4px;
  gap: 0;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms var(--hf-ease) 150ms, transform 600ms var(--hf-ease) 150ms;
}
.hf-pkg.is-visible .hf-pkg__selector {
  opacity: 1;
  transform: translateY(0);
}

.hf-pkg__seg {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 24px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: rgba(240,237,230,0.5);
  background: none;
  border: none;
  border-radius: 9px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 300ms ease;
}

.hf-pkg__seg.is-active { color: var(--hf-gold); }
.hf-pkg__seg:hover { color: rgba(240,237,230,0.85); }
.hf-pkg__seg.is-active:hover { color: var(--hf-gold); }

.hf-pkg__seg-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.hf-pkg__seg-indicator {
  position: absolute;
  z-index: 1;
  top: 4px;
  left: 4px;
  height: calc(100% - 8px);
  border-radius: 9px;
  background: rgba(211,175,55,0.1);
  border: 1px solid rgba(211,175,55,0.2);
  transition: transform 400ms var(--hf-ease), width 400ms var(--hf-ease);
  pointer-events: none;
}

/* ── Compare toggle ── */
.hf-pkg__compare-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(240,237,230,0.5);
  background: rgba(17,24,40,0.35);
  border: 1px solid rgba(211,175,55,0.08);
  border-radius: 8px;
  cursor: pointer;
  transition: color 300ms ease, border-color 300ms ease, background 300ms ease;
  opacity: 0;
  transform: translateY(12px);
}
.hf-pkg.is-visible .hf-pkg__compare-btn {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 600ms var(--hf-ease) 250ms, transform 600ms var(--hf-ease) 250ms, color 300ms ease, border-color 300ms ease, background 300ms ease;
}

.hf-pkg__compare-btn svg {
  width: 16px;
  height: 16px;
}

.hf-pkg__compare-btn:hover,
.hf-pkg__compare-btn[aria-pressed="true"] {
  color: var(--hf-gold);
  border-color: rgba(211,175,55,0.25);
  background: rgba(211,175,55,0.06);
}

/* ═══════════════════════════════════
   PACKAGE CARDS — 3-column grid
   ═══════════════════════════════════ */
.hf-pkg__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
  max-width: 1140px;
  align-items: stretch;
}

/* ── Individual card ── */
.hf-pkg__card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  border: 1px solid rgba(211,175,55,0.06);
  overflow: hidden;
  background: linear-gradient(165deg, rgba(17,24,40,0.4) 0%, rgba(5,4,9,0.55) 100%);
  cursor: pointer;
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 700ms var(--hf-ease),
    transform 600ms var(--hf-ease),
    border-color 350ms ease,
    box-shadow 350ms ease;
}

.hf-pkg.is-visible .hf-pkg__card {
  opacity: 1;
  transform: translateY(0);
}
.hf-pkg.is-visible .hf-pkg__card:nth-child(1) { transition-delay: 120ms; }
.hf-pkg.is-visible .hf-pkg__card:nth-child(2) { transition-delay: 220ms; }
.hf-pkg.is-visible .hf-pkg__card:nth-child(3) { transition-delay: 320ms; }

.hf-pkg__card:hover,
.hf-pkg__card:focus-visible {
  transform: translateY(-6px);
  border-color: rgba(211,175,55,0.25);
  box-shadow:
    0 12px 48px rgba(211,175,55,0.1),
    0 0 60px rgba(211,175,55,0.04);
}

.hf-pkg__card:focus-visible {
  outline: 2px solid var(--hf-gold);
  outline-offset: 2px;
}

.hf-pkg__card.is-selected {
  border-color: rgba(211,175,55,0.4);
  box-shadow:
    0 12px 48px rgba(211,175,55,0.15),
    0 0 80px rgba(211,175,55,0.06);
}

/* ── Featured (Signature) card — visual emphasis ── */
.hf-pkg__card--featured {
  border-color: rgba(211,175,55,0.15);
  background: linear-gradient(165deg, rgba(17,24,40,0.5) 0%, rgba(5,4,9,0.6) 100%);
}

.hf-pkg__card--featured::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--hf-gold), transparent);
  z-index: 3;
}

/* ── Ribbon ── */
.hf-pkg__card-ribbon {
  position: absolute;
  top: 16px;
  right: -30px;
  z-index: 4;
  padding: 5px 40px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hf-black);
  background: var(--hf-gold);
  transform: rotate(45deg);
  transform-origin: center;
}

/* ── Card image (top) ── */
.hf-pkg__card-img {
  position: relative;
  width: 100%;
  height: 180px;
  overflow: hidden;
  flex-shrink: 0;
}

.hf-pkg__card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.5) saturate(0.8);
  transform: scale(1.02);
  transition: transform 700ms var(--hf-ease), filter 500ms ease;
}

.hf-pkg__card:hover .hf-pkg__card-img img {
  transform: scale(1.08);
  filter: brightness(0.38) saturate(0.7);
}

.hf-pkg__card-img::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: linear-gradient(to top, rgba(5,4,9,0.95), transparent);
  pointer-events: none;
}

/* ── Card body ── */
.hf-pkg__card-body {
  display: flex;
  flex-direction: column;
  padding: 24px 24px 28px;
  gap: 0;
  flex: 1;
}

/* ── Badge ── */
.hf-pkg__card-badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hf-white);
  background: rgba(240,237,230,0.08);
  border: 1px solid rgba(240,237,230,0.12);
  border-radius: 4px;
  padding: 3px 10px;
  margin-bottom: 10px;
}
.hf-pkg__card-badge--gold {
  color: var(--hf-gold);
  background: rgba(211,175,55,0.08);
  border-color: rgba(211,175,55,0.18);
}

/* ── Title ── */
.hf-pkg__card-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--hf-white);
  line-height: 1.2;
  margin-bottom: 12px;
}

/* ── Pricing row ── */
.hf-pkg__card-pricing {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
}

.hf-pkg__card-price {
  font-size: 2rem;
  font-weight: 800;
  color: var(--hf-gold);
  letter-spacing: -0.03em;
  line-height: 1;
  transition: opacity 300ms ease;
}
.hf-pkg__card-price.is-updating {
  opacity: 0.3;
}

.hf-pkg__card-time {
  font-size: 0.72rem;
  font-weight: 500;
  color: rgba(240,237,230,0.4);
  letter-spacing: 0.01em;
  transition: opacity 300ms ease;
}
.hf-pkg__card-time.is-updating {
  opacity: 0.3;
}

/* ── Description ── */
.hf-pkg__card-desc {
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.65;
  color: rgba(240,237,230,0.6);
  margin-bottom: 16px;
}

/* ── Features list (revealed on hover/tap) ── */
.hf-pkg__card-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-bottom: 0;
  transition:
    max-height 550ms var(--hf-ease),
    opacity 400ms var(--hf-ease),
    margin-bottom 400ms var(--hf-ease);
}

.hf-pkg__card:hover .hf-pkg__card-features,
.hf-pkg__card.is-selected .hf-pkg__card-features,
.hf-pkg__card.is-touch-active .hf-pkg__card-features {
  max-height: 280px;
  opacity: 1;
  margin-bottom: 16px;
}

.hf-pkg__card-features li {
  position: relative;
  padding-left: 22px;
  font-size: 0.78rem;
  font-weight: 400;
  color: rgba(240,237,230,0.75);
  line-height: 1.4;
}

.hf-pkg__card-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(211,175,55,0.12);
  border: 1px solid rgba(211,175,55,0.25);
}

.hf-pkg__card-features li::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 6px;
  width: 6px;
  height: 3px;
  border-left: 1.5px solid var(--hf-gold);
  border-bottom: 1.5px solid var(--hf-gold);
  transform: rotate(-45deg);
  opacity: 0;
  transition: opacity 300ms ease;
}

.hf-pkg__card:hover .hf-pkg__card-features li::after,
.hf-pkg__card.is-selected .hf-pkg__card-features li::after,
.hf-pkg__card.is-touch-active .hf-pkg__card-features li::after {
  opacity: 1;
}

.hf-pkg__card:hover .hf-pkg__card-features li:nth-child(1)::after { transition-delay: 80ms; }
.hf-pkg__card:hover .hf-pkg__card-features li:nth-child(2)::after { transition-delay: 140ms; }
.hf-pkg__card:hover .hf-pkg__card-features li:nth-child(3)::after { transition-delay: 200ms; }
.hf-pkg__card:hover .hf-pkg__card-features li:nth-child(4)::after { transition-delay: 260ms; }
.hf-pkg__card:hover .hf-pkg__card-features li:nth-child(5)::after { transition-delay: 320ms; }
.hf-pkg__card:hover .hf-pkg__card-features li:nth-child(6)::after { transition-delay: 380ms; }

/* ── Best for line ── */
.hf-pkg__card-best {
  font-size: 0.7rem;
  font-weight: 500;
  font-style: italic;
  color: rgba(240,237,230,0.35);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-bottom: 0;
  transition:
    max-height 450ms var(--hf-ease) 100ms,
    opacity 350ms var(--hf-ease) 100ms,
    margin-bottom 350ms var(--hf-ease) 100ms;
}

.hf-pkg__card:hover .hf-pkg__card-best,
.hf-pkg__card.is-selected .hf-pkg__card-best,
.hf-pkg__card.is-touch-active .hf-pkg__card-best {
  max-height: 40px;
  opacity: 1;
  margin-bottom: 14px;
}

/* ── CTA button ── */
.hf-pkg__card-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 24px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  border-radius: 10px;
  cursor: pointer;
  color: var(--hf-black);
  background: linear-gradient(135deg, var(--hf-gold) 0%, #C5982F 100%);
  border: 1px solid rgba(211,175,55,0.5);
  margin-top: auto;
  opacity: 0.7;
  transform: translateY(4px);
  transition:
    opacity 350ms ease,
    transform 350ms var(--hf-ease),
    box-shadow 350ms ease;
}

.hf-pkg__card:hover .hf-pkg__card-cta,
.hf-pkg__card.is-selected .hf-pkg__card-cta,
.hf-pkg__card.is-touch-active .hf-pkg__card-cta {
  opacity: 1;
  transform: translateY(0);
}

.hf-pkg__card-cta:hover {
  box-shadow: 0 4px 20px rgba(211,175,55,0.35);
  transform: translateY(-2px);
}

/* ═══════════════════════════════════
   COMPARISON TABLE
   ═══════════════════════════════════ */
.hf-pkg__compare {
  width: 100%;
  max-width: 1140px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-height 650ms var(--hf-ease),
    opacity 400ms var(--hf-ease);
}

.hf-pkg__compare.is-open {
  max-height: 800px;
  opacity: 1;
}

.hf-pkg__compare-inner {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(211,175,55,0.1);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(17,24,40,0.3);
}

.hf-pkg__compare-head {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr;
  gap: 0;
  padding: 14px 24px;
  background: rgba(211,175,55,0.04);
  border-bottom: 1px solid rgba(211,175,55,0.08);
}

.hf-pkg__compare-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(240,237,230,0.4);
}

.hf-pkg__compare-col {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(240,237,230,0.5);
  text-align: center;
}

.hf-pkg__compare-col--feat {
  color: var(--hf-gold);
}

.hf-pkg__compare-row {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr;
  padding: 12px 24px;
  border-bottom: 1px solid rgba(240,237,230,0.03);
  transition: background 200ms ease;
}

.hf-pkg__compare-row:last-child { border-bottom: none; }
.hf-pkg__compare-row:hover { background: rgba(211,175,55,0.03); }

.hf-pkg__compare-feat {
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(240,237,230,0.7);
}

.hf-pkg__compare-check {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hf-pkg__compare-check::after {
  content: '';
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  transform: scale(0);
  transition: transform 350ms var(--hf-ease), background 200ms ease;
}

.hf-pkg__compare.is-open .hf-pkg__compare-check::after {
  transform: scale(1);
}

.hf-pkg__compare-check[data-has="true"]::after {
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23D3AF37' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;
  background-color: rgba(211,175,55,0.12);
  border: 1px solid rgba(211,175,55,0.25);
}

.hf-pkg__compare-check[data-has="false"]::after {
  background-color: rgba(240,237,230,0.04);
  border: 1px solid rgba(240,237,230,0.06);
}

/* Stagger check animations */
.hf-pkg__compare-row[data-row="0"] .hf-pkg__compare-check::after { transition-delay: 60ms; }
.hf-pkg__compare-row[data-row="1"] .hf-pkg__compare-check::after { transition-delay: 120ms; }
.hf-pkg__compare-row[data-row="2"] .hf-pkg__compare-check::after { transition-delay: 180ms; }
.hf-pkg__compare-row[data-row="3"] .hf-pkg__compare-check::after { transition-delay: 240ms; }
.hf-pkg__compare-row[data-row="4"] .hf-pkg__compare-check::after { transition-delay: 300ms; }
.hf-pkg__compare-row[data-row="5"] .hf-pkg__compare-check::after { transition-delay: 360ms; }
.hf-pkg__compare-row[data-row="6"] .hf-pkg__compare-check::after { transition-delay: 420ms; }
.hf-pkg__compare-row[data-row="7"] .hf-pkg__compare-check::after { transition-delay: 480ms; }
.hf-pkg__compare-row[data-row="8"] .hf-pkg__compare-check::after { transition-delay: 540ms; }
.hf-pkg__compare-row[data-row="9"] .hf-pkg__compare-check::after { transition-delay: 600ms; }

/* ═══════════════════════════════════
   STICKY SELECTION BAR
   ═══════════════════════════════════ */
.hf-pkg__sticky {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 14px 32px;
  background: rgba(5,4,9,0.92);
  backdrop-filter: blur(16px) saturate(0.8);
  -webkit-backdrop-filter: blur(16px) saturate(0.8);
  border-top: 1px solid rgba(211,175,55,0.15);
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 450ms var(--hf-ease), opacity 350ms ease;
}

.hf-pkg__sticky.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.hf-pkg__sticky-label {
  font-size: 0.82rem;
  font-weight: 400;
  color: rgba(240,237,230,0.7);
}

.hf-pkg__sticky-name {
  color: var(--hf-gold);
  font-weight: 700;
}

.hf-pkg__sticky-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 28px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
  color: var(--hf-black);
  background: linear-gradient(135deg, var(--hf-gold) 0%, #C5982F 100%);
  border: 1px solid rgba(211,175,55,0.5);
  transition: box-shadow 300ms ease, transform 300ms var(--hf-ease);
}

.hf-pkg__sticky-cta:hover {
  box-shadow: 0 4px 20px rgba(211,175,55,0.4);
  transform: translateY(-1px);
}

/* ═══════════════════════════════════
   PACKAGES — Responsive: Tablet
   ═══════════════════════════════════ */
@media (max-width: 1024px) {
  .hf-pkg { padding: 60px 24px 110px; gap: 32px; }

  .hf-pkg__cards {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    max-width: 960px;
  }

  .hf-pkg__card-img { height: 150px; }
  .hf-pkg__card-title { font-size: 1.05rem; }
  .hf-pkg__card-price { font-size: 1.7rem; }
  .hf-pkg__card-body { padding: 20px 18px 24px; }

  .hf-pkg__compare-head,
  .hf-pkg__compare-row {
    padding: 10px 16px;
  }
  .hf-pkg__compare-feat { font-size: 0.72rem; }
}

/* ═══════════════════════════════════
   PACKAGES — Responsive: Mobile
   ═══════════════════════════════════ */
@media (max-width: 600px) {
  .hf-pkg {
    padding: 50px 16px 100px;
    gap: 24px;
    min-height: auto;
  }

  .hf-pkg__heading { font-size: 1.35rem; }
  .hf-pkg__subtext { font-size: 0.84rem; }

  .hf-pkg__selector {
    flex-wrap: wrap;
    justify-content: center;
    border-radius: 12px;
    padding: 3px;
  }
  .hf-pkg__seg { padding: 9px 16px; font-size: 0.72rem; }
  .hf-pkg__seg-icon { width: 16px; height: 16px; }

  .hf-pkg__cards {
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 400px;
  }

  .hf-pkg__card-img { height: 140px; }
  .hf-pkg__card-title { font-size: 1rem; }
  .hf-pkg__card-price { font-size: 1.6rem; }
  .hf-pkg__card-desc { font-size: 0.8rem; }
  .hf-pkg__card-features li { font-size: 0.76rem; }
  .hf-pkg__card-body { padding: 18px 18px 22px; }

  /* Features always visible on mobile */
  .hf-pkg__card-features {
    max-height: 280px;
    opacity: 1;
    margin-bottom: 14px;
  }
  .hf-pkg__card-features li::after { opacity: 1; }

  .hf-pkg__card-best {
    max-height: 40px;
    opacity: 1;
    margin-bottom: 12px;
  }

  .hf-pkg__card-cta {
    opacity: 1;
    transform: translateY(0);
  }

  /* Comparison table scrollable on mobile */
  .hf-pkg__compare-inner { overflow-x: auto; }
  .hf-pkg__compare-head,
  .hf-pkg__compare-row {
    min-width: 480px;
    padding: 10px 16px;
  }

  .hf-pkg__sticky { gap: 12px; padding: 12px 16px; }
  .hf-pkg__sticky-label { font-size: 0.74rem; }
  .hf-pkg__sticky-cta { padding: 9px 20px; font-size: 0.72rem; }
}

/* ═══════════════════════════════════
   PACKAGES — Responsive: Small mobile
   ═══════════════════════════════════ */
@media (max-width: 380px) {
  .hf-pkg { padding: 40px 12px 100px; }
  .hf-pkg__cards { max-width: 340px; }
  .hf-pkg__card-title { font-size: 0.92rem; }
  .hf-pkg__card-price { font-size: 1.45rem; }
}

/* ═══════════════════════════════════
   PACKAGES — Responsive: Ultrawide
   ═══════════════════════════════════ */
@media (min-width: 2200px) {
  .hf-pkg__cards {
    max-width: 1500px;
    gap: 32px;
  }

  .hf-pkg__card-img { height: 240px; }
  .hf-pkg__card-title { font-size: 1.45rem; }
  .hf-pkg__card-price { font-size: 2.4rem; }
  .hf-pkg__card-desc { font-size: 0.95rem; }
  .hf-pkg__card-features li { font-size: 0.88rem; }
  .hf-pkg__card-body { padding: 32px 32px 36px; }
  .hf-pkg__card-cta { padding: 14px 32px; font-size: 0.88rem; }

  .hf-pkg__heading { font-size: 2.8rem; }
  .hf-pkg__compare { max-width: 1500px; }
}

/* ═══════════════════════════════════
   PACKAGES — Responsive: Super ultrawide
   ═══════════════════════════════════ */
@media (min-width: 3800px) {
  .hf-pkg__cards { max-width: 2100px; gap: 40px; }
  .hf-pkg__card { border-radius: 28px; }
  .hf-pkg__card-img { height: 320px; }
  .hf-pkg__card-title { font-size: 1.8rem; }
  .hf-pkg__card-price { font-size: 3rem; }
  .hf-pkg__card-desc { font-size: 1.1rem; }
  .hf-pkg__card-body { padding: 40px; }
  .hf-pkg__heading { font-size: 3.4rem; }
}

/* ═══════════════════════════════════
   PACKAGES — Reduced motion
   ═══════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .hf-pkg__header,
  .hf-pkg__selector,
  .hf-pkg__compare-btn {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .hf-pkg__card {
    opacity: 1 !important;
    transform: none !important;
  }

  .hf-pkg__card:hover { transform: none !important; }

  .hf-pkg__card-img img { transition: none !important; }
  .hf-pkg__card-price,
  .hf-pkg__card-time { transition: none !important; }

  .hf-pkg__seg-indicator { transition: none !important; }
  .hf-pkg__compare { transition: none !important; }
  .hf-pkg__compare-check::after { transition: none !important; }
  .hf-pkg__sticky { transition: none !important; }

  .hf-pkg__card-features,
  .hf-pkg__card-best,
  .hf-pkg__card-cta {
    transition: none !important;
    max-height: none !important;
    opacity: 1 !important;
    margin-bottom: 12px !important;
    transform: none !important;
  }

  .hf-pkg__card-features li::after {
    opacity: 1 !important;
    transition: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   WHY CHOOSE US — Vertical Tab + Proof Panels
   ═══════════════════════════════════════════════════════════ */
.hf-why {
  position: relative;
  width: 100%;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
  z-index: 1;
  padding: 80px 40px;
  gap: 40px;
}

/* ── Header ── */
.hf-why__header {
  text-align: center;
  max-width: 640px;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--hf-ease), transform 700ms var(--hf-ease);
}
.hf-why.is-visible .hf-why__header {
  opacity: 1;
  transform: translateY(0);
}

.hf-why__eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hf-gold);
  margin-bottom: 14px;
}

.hf-why__heading {
  font-size: clamp(1.5rem, 3.5vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--hf-white);
  line-height: 1.15;
  margin-bottom: 14px;
}

.hf-why__subtext {
  font-size: 0.92rem;
  font-weight: 400;
  color: rgba(240,237,230,0.5);
  line-height: 1.6;
}

/* ═══════════════════════════════════
   BODY — Split layout: Tabs | Panel
   ═══════════════════════════════════ */
.hf-why__body {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 32px;
  width: 100%;
  max-width: 1140px;
  flex: 1;
  min-height: 0;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms var(--hf-ease) 200ms, transform 700ms var(--hf-ease) 200ms;
}
.hf-why.is-visible .hf-why__body {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════
   VERTICAL TABS
   ═══════════════════════════════════ */
.hf-why__tabs {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hf-why__tab {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background: rgba(17,24,40,0.25);
  border: 1px solid rgba(240,237,230,0.04);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: rgba(240,237,230,0.5);
  overflow: hidden;
  transition:
    background 350ms ease,
    border-color 350ms ease,
    color 350ms ease,
    box-shadow 350ms ease;
}

.hf-why__tab:hover {
  background: rgba(17,24,40,0.45);
  border-color: rgba(211,175,55,0.1);
  color: rgba(240,237,230,0.75);
}

.hf-why__tab.is-active {
  background: rgba(211,175,55,0.06);
  border-color: rgba(211,175,55,0.2);
  color: var(--hf-white);
  box-shadow: 0 4px 24px rgba(211,175,55,0.06);
}

.hf-why__tab:focus-visible {
  outline: 2px solid var(--hf-gold);
  outline-offset: 2px;
}

/* Tab number */
.hf-why__tab-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: rgba(240,237,230,0.3);
  border: 1px solid rgba(240,237,230,0.08);
  border-radius: 8px;
  transition: color 350ms ease, border-color 350ms ease, background 350ms ease;
}

.hf-why__tab.is-active .hf-why__tab-num {
  color: var(--hf-gold);
  border-color: rgba(211,175,55,0.3);
  background: rgba(211,175,55,0.08);
}

/* Tab text */
.hf-why__tab-content {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.hf-why__tab-title {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hf-why__tab-sub {
  font-size: 0.68rem;
  font-weight: 400;
  line-height: 1.4;
  color: rgba(240,237,230,0.35);
  transition: color 350ms ease;
}

.hf-why__tab.is-active .hf-why__tab-sub {
  color: rgba(240,237,230,0.55);
}

/* Progress bar at bottom of active tab */
.hf-why__tab-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--hf-gold), rgba(211,175,55,0.3));
  border-radius: 0 1px 0 0;
  transition: none;
}

.hf-why__tab.is-active .hf-why__tab-progress {
  animation: hf-why-progress 6s linear forwards;
}

@keyframes hf-why-progress {
  from { width: 0; }
  to { width: 100%; }
}

/* ═══════════════════════════════════
   VISUAL PANELS
   ═══════════════════════════════════ */
.hf-why__panels {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  min-height: 420px;
  background: rgba(5,4,9,0.3);
  border: 1px solid rgba(211,175,55,0.06);
}

.hf-why__panel {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 500ms var(--hf-ease), visibility 0ms 500ms;
}

.hf-why__panel.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  transition: opacity 500ms var(--hf-ease), visibility 0ms 0ms;
}

/* ── Panel image ── */
.hf-why__panel-img {
  position: relative;
  width: 100%;
  height: 280px;
  overflow: hidden;
}

.hf-why__panel-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.45) saturate(0.85);
  transform: scale(1.04);
  transition: transform 6s var(--hf-ease), filter 600ms ease;
}

.hf-why__panel.is-active .hf-why__panel-img img {
  transform: scale(1);
}

.hf-why__panel-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5,4,9,0.95) 0%, rgba(5,4,9,0.3) 50%, transparent 100%);
  pointer-events: none;
}

/* ── Before/After panel variant ── */
.hf-why__panel-img--ba {
  position: relative;
  cursor: ew-resize;
}

.hf-why__ba-before,
.hf-why__ba-after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.5) saturate(0.8);
}

.hf-why__ba-before {
  clip-path: inset(0 50% 0 0);
  filter: brightness(0.35) saturate(0.5);
}

.hf-why__ba-after {
  clip-path: inset(0 0 0 50%);
  filter: brightness(0.5) saturate(0.9);
}

.hf-why__ba-slider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  z-index: 5;
  transform: translateX(-50%);
  pointer-events: none;
}

.hf-why__ba-line {
  position: absolute;
  inset: 0;
  width: 2px;
  background: var(--hf-gold);
  opacity: 0.7;
}

.hf-why__ba-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(5,4,9,0.85);
  border: 2px solid var(--hf-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 12px rgba(0,0,0,0.5);
  pointer-events: auto;
  cursor: ew-resize;
}

.hf-why__ba-handle svg {
  width: 16px;
  height: 16px;
  color: var(--hf-gold);
}

.hf-why__ba-label {
  position: absolute;
  top: 12px;
  z-index: 4;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(240,237,230,0.6);
  padding: 3px 10px;
  background: rgba(5,4,9,0.5);
  border-radius: 4px;
  backdrop-filter: blur(6px);
}

.hf-why__ba-label--before { left: 12px; }
.hf-why__ba-label--after { right: 12px; }

/* ── Proof block ── */
.hf-why__panel-proof {
  padding: 24px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hf-why__proof-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(211,175,55,0.08);
  border: 1px solid rgba(211,175,55,0.18);
  color: var(--hf-gold);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 500ms var(--hf-ease) 150ms, transform 500ms var(--hf-ease) 150ms;
}

.hf-why__panel.is-active .hf-why__proof-icon {
  opacity: 1;
  transform: translateY(0);
}

.hf-why__proof-icon svg {
  width: 18px;
  height: 18px;
}

.hf-why__proof-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--hf-white);
  line-height: 1.2;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 500ms var(--hf-ease) 200ms, transform 500ms var(--hf-ease) 200ms;
}

.hf-why__panel.is-active .hf-why__proof-title {
  opacity: 1;
  transform: translateY(0);
}

.hf-why__proof-text {
  font-size: 0.84rem;
  font-weight: 400;
  line-height: 1.65;
  color: rgba(240,237,230,0.55);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 500ms var(--hf-ease) 280ms, transform 500ms var(--hf-ease) 280ms;
}

.hf-why__panel.is-active .hf-why__proof-text {
  opacity: 1;
  transform: translateY(0);
}

/* ── Stat badge ── */
.hf-why__proof-stat {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  padding: 10px 16px;
  background: rgba(211,175,55,0.04);
  border: 1px solid rgba(211,175,55,0.12);
  border-radius: 10px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 500ms var(--hf-ease) 380ms, transform 500ms var(--hf-ease) 380ms;
}

.hf-why__panel.is-active .hf-why__proof-stat {
  opacity: 1;
  transform: translateY(0);
}

.hf-why__stat-value {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--hf-gold);
  letter-spacing: -0.02em;
  line-height: 1;
}

.hf-why__stat-label {
  font-size: 0.72rem;
  font-weight: 500;
  color: rgba(240,237,230,0.45);
  line-height: 1.3;
}

/* ── Bottom CTA ── */
.hf-why__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-radius: 12px;
  color: var(--hf-black);
  background: linear-gradient(135deg, var(--hf-gold) 0%, #C5982F 100%);
  border: 1px solid rgba(211,175,55,0.5);
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 600ms var(--hf-ease) 350ms,
    transform 600ms var(--hf-ease) 350ms,
    box-shadow 300ms ease;
}

.hf-why.is-visible .hf-why__cta {
  opacity: 1;
  transform: translateY(0);
}

.hf-why__cta:hover {
  box-shadow: 0 6px 28px rgba(211,175,55,0.35);
  transform: translateY(-2px);
}

.hf-why__cta-arrow svg {
  width: 16px;
  height: 16px;
  transition: transform 300ms var(--hf-ease);
}

.hf-why__cta:hover .hf-why__cta-arrow svg {
  transform: translateX(3px);
}

/* ═══════════════════════════════════
   WHY — Responsive: Tablet
   ═══════════════════════════════════ */
@media (max-width: 1024px) {
  .hf-why { padding: 60px 24px; gap: 32px; }

  .hf-why__body {
    grid-template-columns: 280px 1fr;
    gap: 20px;
  }

  .hf-why__tab { padding: 12px 14px; gap: 10px; }
  .hf-why__tab-title { font-size: 0.78rem; }
  .hf-why__tab-num { width: 24px; height: 24px; font-size: 0.56rem; }
  .hf-why__panel-img { height: 220px; }
  .hf-why__panel-proof { padding: 20px 22px 24px; }
  .hf-why__proof-title { font-size: 1rem; }
}

/* ═══════════════════════════════════
   WHY — Responsive: Mobile
   ═══════════════════════════════════ */
@media (max-width: 768px) {
  .hf-why {
    padding: 50px 16px;
    gap: 24px;
    min-height: auto;
  }

  .hf-why__body {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Horizontal scrolling tabs on mobile */
  .hf-why__tabs {
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding-bottom: 4px;
  }

  .hf-why__tabs::-webkit-scrollbar { display: none; }
  .hf-why__tabs { scrollbar-width: none; }

  .hf-why__tab {
    flex-shrink: 0;
    scroll-snap-align: start;
    min-width: 180px;
    padding: 12px 14px;
    border-radius: 12px;
  }

  .hf-why__tab-sub { display: none; }

  .hf-why__tab-progress {
    height: 2px;
    bottom: 0;
    left: 0;
    border-radius: 0 0 12px 12px;
  }

  .hf-why__panels {
    min-height: 360px;
    border-radius: 16px;
  }

  .hf-why__panel-img { height: 200px; }

  .hf-why__panel-proof { padding: 18px 18px 22px; }
  .hf-why__proof-title { font-size: 0.95rem; }
  .hf-why__proof-text { font-size: 0.8rem; }
  .hf-why__stat-value { font-size: 1.2rem; }

  .hf-why__heading { font-size: 1.35rem; }
  .hf-why__subtext { font-size: 0.84rem; }
}

/* ═══════════════════════════════════
   WHY — Responsive: Small Mobile
   ═══════════════════════════════════ */
@media (max-width: 380px) {
  .hf-why { padding: 40px 12px; }
  .hf-why__tab { min-width: 150px; padding: 10px 12px; }
  .hf-why__panel-img { height: 170px; }
  .hf-why__panels { min-height: 320px; }
}

/* ═══════════════════════════════════
   WHY — Responsive: Ultrawide
   ═══════════════════════════════════ */
@media (min-width: 2200px) {
  .hf-why__body {
    max-width: 1500px;
    grid-template-columns: 420px 1fr;
    gap: 40px;
  }

  .hf-why__tab { padding: 20px 22px; }
  .hf-why__tab-title { font-size: 1rem; }
  .hf-why__tab-sub { font-size: 0.78rem; }
  .hf-why__tab-num { width: 34px; height: 34px; font-size: 0.72rem; }

  .hf-why__panel-img { height: 380px; }
  .hf-why__panel-proof { padding: 32px 36px 36px; }
  .hf-why__proof-title { font-size: 1.35rem; }
  .hf-why__proof-text { font-size: 0.98rem; }
  .hf-why__stat-value { font-size: 1.8rem; }

  .hf-why__heading { font-size: 2.8rem; }
}

/* ═══════════════════════════════════
   WHY — Responsive: Super Ultrawide
   ═══════════════════════════════════ */
@media (min-width: 3800px) {
  .hf-why__body { max-width: 2100px; grid-template-columns: 560px 1fr; }
  .hf-why__panel-img { height: 480px; }
  .hf-why__panels { border-radius: 28px; }
  .hf-why__heading { font-size: 3.4rem; }
}

/* ═══════════════════════════════════
   WHY — Reduced Motion
   ═══════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .hf-why__header,
  .hf-why__body,
  .hf-why__cta {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .hf-why__panel {
    transition: opacity 200ms ease !important;
  }

  .hf-why__panel-img img {
    transform: scale(1) !important;
    transition: none !important;
  }

  .hf-why__proof-icon,
  .hf-why__proof-title,
  .hf-why__proof-text,
  .hf-why__proof-stat {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .hf-why__tab-progress { animation: none !important; }
  .hf-why__tab { transition: background 200ms ease, border-color 200ms ease !important; }
}


/* ═══════════════════════════════════════════════════════════
   BEFORE & AFTER — Transformation Showcase
   ═══════════════════════════════════════════════════════════ */
.hf-ba {
  position: relative;
  width: 100%;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
  z-index: 1;
  padding: 80px 40px;
  gap: 36px;
}

/* ── Header ── */
.hf-ba__header {
  text-align: center;
  max-width: 640px;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--hf-ease), transform 700ms var(--hf-ease);
}
.hf-ba.is-visible .hf-ba__header {
  opacity: 1;
  transform: translateY(0);
}

.hf-ba__eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hf-gold);
  margin-bottom: 14px;
}

.hf-ba__heading {
  font-size: clamp(1.5rem, 3.5vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--hf-white);
  line-height: 1.15;
  margin-bottom: 14px;
}

.hf-ba__subtext {
  font-size: 0.92rem;
  font-weight: 400;
  color: rgba(240,237,230,0.5);
  line-height: 1.6;
}

/* ═══════════════════════════════════
   SHOWCASE CONTAINER
   ═══════════════════════════════════ */
.hf-ba__showcase {
  position: relative;
  width: 100%;
  max-width: 1100px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms var(--hf-ease) 200ms, transform 700ms var(--hf-ease) 200ms;
}
.hf-ba.is-visible .hf-ba__showcase {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════
   MODULE — Each transformation unit
   ═══════════════════════════════════ */
.hf-ba__module {
  display: none;
  grid-template-columns: 1.4fr 1fr;
  gap: 28px;
  align-items: stretch;
}

.hf-ba__module.is-active {
  display: grid;
  animation: hf-ba-fadeIn 500ms var(--hf-ease) both;
}

@keyframes hf-ba-fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════
   SLIDER — Before/After comparison
   ═══════════════════════════════════ */
.hf-ba__slider {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  cursor: ew-resize;
  aspect-ratio: 4/3;
  background: rgba(5,4,9,0.5);
  border: 1px solid rgba(211,175,55,0.08);
  user-select: none;
  -webkit-user-select: none;
}

.hf-ba__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hf-ba__img--before {
  clip-path: inset(0 50% 0 0);
  filter: brightness(0.4) saturate(0.5);
}

.hf-ba__img--after {
  clip-path: inset(0 0 0 50%);
  filter: brightness(0.55) saturate(0.85);
}

/* ── Divider line + handle ── */
.hf-ba__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  z-index: 5;
  transform: translateX(-50%);
  pointer-events: none;
}

.hf-ba__divider-line {
  position: absolute;
  inset: 0;
  background: var(--hf-gold);
  opacity: 0.6;
  box-shadow: 0 0 12px rgba(211,175,55,0.3);
}

.hf-ba__divider-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(5,4,9,0.88);
  border: 2px solid var(--hf-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 2px 16px rgba(0,0,0,0.6),
    0 0 20px rgba(211,175,55,0.15);
  pointer-events: auto;
  cursor: ew-resize;
  transition: box-shadow 300ms ease, transform 300ms var(--hf-ease);
}

.hf-ba__slider:active .hf-ba__divider-handle {
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow:
    0 2px 24px rgba(0,0,0,0.7),
    0 0 30px rgba(211,175,55,0.3);
}

.hf-ba__divider-handle svg {
  width: 18px;
  height: 18px;
  color: var(--hf-gold);
}

/* ── Labels ── */
.hf-ba__label {
  position: absolute;
  top: 16px;
  z-index: 4;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(240,237,230,0.7);
  padding: 4px 12px;
  background: rgba(5,4,9,0.6);
  border-radius: 6px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
}

.hf-ba__label--before { left: 16px; }
.hf-ba__label--after { right: 16px; }

/* ═══════════════════════════════════
   HOTSPOTS — Callout pins on the image
   ═══════════════════════════════════ */
.hf-ba__hotspot {
  position: absolute;
  z-index: 6;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--hf-gold);
  background: rgba(211,175,55,0.15);
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: background 300ms ease, box-shadow 300ms ease;
}

.hf-ba__hotspot:hover,
.hf-ba__hotspot:focus-visible {
  background: rgba(211,175,55,0.35);
  box-shadow: 0 0 16px rgba(211,175,55,0.4);
}

.hf-ba__hotspot:focus-visible {
  outline: 2px solid var(--hf-gold);
  outline-offset: 3px;
}

/* Pulsing ring */
.hf-ba__hotspot-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(211,175,55,0.3);
  animation: hf-ba-pulse 2.5s ease-out infinite;
}

@keyframes hf-ba-pulse {
  0%   { transform: scale(0.8); opacity: 0.8; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* Tooltip */
.hf-ba__hotspot::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  white-space: nowrap;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--hf-white);
  background: rgba(5,4,9,0.9);
  border: 1px solid rgba(211,175,55,0.2);
  border-radius: 6px;
  padding: 5px 12px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 250ms ease, transform 250ms var(--hf-ease);
}

.hf-ba__hotspot:hover::after,
.hf-ba__hotspot:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ═══════════════════════════════════
   RESULT STORY — Narrative beside slider
   ═══════════════════════════════════ */
.hf-ba__story {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px 0;
  gap: 16px;
}

.hf-ba__story-tag {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hf-gold);
  background: rgba(211,175,55,0.08);
  border: 1px solid rgba(211,175,55,0.18);
  border-radius: 4px;
  padding: 3px 10px;
}

.hf-ba__story-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--hf-white);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* ── Steps timeline ── */
.hf-ba__story-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  padding-left: 20px;
}

.hf-ba__story-steps::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(to bottom, #e74c3c, var(--hf-gold), #27ae60);
  opacity: 0.4;
}

.hf-ba__step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  position: relative;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 450ms var(--hf-ease), transform 450ms var(--hf-ease);
}

.hf-ba__module.is-active .hf-ba__step:nth-child(1) { opacity: 1; transform: translateX(0); transition-delay: 200ms; }
.hf-ba__module.is-active .hf-ba__step:nth-child(2) { opacity: 1; transform: translateX(0); transition-delay: 380ms; }
.hf-ba__module.is-active .hf-ba__step:nth-child(3) { opacity: 1; transform: translateX(0); transition-delay: 560ms; }

/* Step markers (colored dots on the timeline) */
.hf-ba__step-marker {
  flex-shrink: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  margin-top: 3px;
  position: relative;
  left: -20px;
  margin-right: -20px;
}

.hf-ba__step-marker--issue   { background: #e74c3c; box-shadow: 0 0 8px rgba(231,76,60,0.35); }
.hf-ba__step-marker--process { background: var(--hf-gold); box-shadow: 0 0 8px rgba(211,175,55,0.35); }
.hf-ba__step-marker--result  { background: #27ae60; box-shadow: 0 0 8px rgba(39,174,96,0.35); }

.hf-ba__step-text {
  font-size: 0.82rem;
  font-weight: 400;
  color: rgba(240,237,230,0.6);
  line-height: 1.55;
}

/* ═══════════════════════════════════
   NAV DOTS
   ═══════════════════════════════════ */
.hf-ba__nav {
  display: flex;
  gap: 10px;
  align-items: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 500ms var(--hf-ease) 350ms, transform 500ms var(--hf-ease) 350ms;
}
.hf-ba.is-visible .hf-ba__nav {
  opacity: 1;
  transform: translateY(0);
}

.hf-ba__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid rgba(211,175,55,0.3);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background 300ms ease, border-color 300ms ease, transform 300ms var(--hf-ease);
}

.hf-ba__dot:hover {
  border-color: var(--hf-gold);
  transform: scale(1.2);
}

.hf-ba__dot.is-active {
  background: var(--hf-gold);
  border-color: var(--hf-gold);
  box-shadow: 0 0 10px rgba(211,175,55,0.3);
}

.hf-ba__dot:focus-visible {
  outline: 2px solid var(--hf-gold);
  outline-offset: 3px;
}

/* ── Bottom CTA ── */
.hf-ba__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-radius: 12px;
  color: var(--hf-gold);
  background: rgba(211,175,55,0.06);
  border: 1px solid rgba(211,175,55,0.2);
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 600ms var(--hf-ease) 400ms,
    transform 600ms var(--hf-ease) 400ms,
    background 300ms ease,
    border-color 300ms ease,
    box-shadow 300ms ease,
    color 300ms ease;
}

.hf-ba.is-visible .hf-ba__cta {
  opacity: 1;
  transform: translateY(0);
}

.hf-ba__cta:hover {
  background: linear-gradient(135deg, var(--hf-gold) 0%, #C5982F 100%);
  color: var(--hf-black);
  border-color: rgba(211,175,55,0.5);
  box-shadow: 0 6px 28px rgba(211,175,55,0.3);
  transform: translateY(-2px);
}

.hf-ba__cta-arrow svg {
  width: 16px;
  height: 16px;
  transition: transform 300ms var(--hf-ease);
}

.hf-ba__cta:hover .hf-ba__cta-arrow svg {
  transform: translateX(3px);
}

/* ═══════════════════════════════════
   BA — Responsive: Tablet
   ═══════════════════════════════════ */
@media (max-width: 1024px) {
  .hf-ba { padding: 60px 24px; gap: 28px; }

  .hf-ba__module {
    grid-template-columns: 1.2fr 1fr;
    gap: 20px;
  }

  .hf-ba__slider { border-radius: 16px; }
  .hf-ba__story-title { font-size: 1.15rem; }
  .hf-ba__divider-handle { width: 38px; height: 38px; }
}

/* ═══════════════════════════════════
   BA — Responsive: Mobile
   ═══════════════════════════════════ */
@media (max-width: 768px) {
  .hf-ba {
    padding: 50px 16px;
    gap: 24px;
    min-height: auto;
  }

  .hf-ba__module {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .hf-ba__slider {
    aspect-ratio: 16/10;
    border-radius: 14px;
  }

  .hf-ba__heading { font-size: 1.35rem; }
  .hf-ba__subtext { font-size: 0.84rem; }
  .hf-ba__story-title { font-size: 1.1rem; }
  .hf-ba__step-text { font-size: 0.78rem; }

  .hf-ba__divider-handle { width: 40px; height: 40px; }

  .hf-ba__hotspot { width: 20px; height: 20px; }
  .hf-ba__hotspot::after { font-size: 0.6rem; padding: 4px 8px; }

  /* Mobile before/after tap toggle */
  .hf-ba__slider[data-mobile-state]::before {
    content: 'Tap to toggle';
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 8;
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(240,237,230,0.5);
    background: rgba(5,4,9,0.6);
    padding: 4px 12px;
    border-radius: 4px;
    backdrop-filter: blur(6px);
    pointer-events: none;
  }
}

/* ═══════════════════════════════════
   BA — Responsive: Small Mobile
   ═══════════════════════════════════ */
@media (max-width: 380px) {
  .hf-ba { padding: 40px 12px; }
  .hf-ba__slider { aspect-ratio: 3/2; }
  .hf-ba__story-title { font-size: 1rem; }
}

/* ═══════════════════════════════════
   BA — Responsive: Ultrawide
   ═══════════════════════════════════ */
@media (min-width: 2200px) {
  .hf-ba__showcase { max-width: 1500px; }

  .hf-ba__module { gap: 40px; }

  .hf-ba__slider { border-radius: 24px; }
  .hf-ba__story-title { font-size: 1.6rem; }
  .hf-ba__step-text { font-size: 0.95rem; }
  .hf-ba__divider-handle { width: 52px; height: 52px; }
  .hf-ba__divider-handle svg { width: 22px; height: 22px; }
  .hf-ba__hotspot { width: 30px; height: 30px; }

  .hf-ba__heading { font-size: 2.8rem; }
}

/* ═══════════════════════════════════
   BA — Responsive: Super Ultrawide
   ═══════════════════════════════════ */
@media (min-width: 3800px) {
  .hf-ba__showcase { max-width: 2100px; }
  .hf-ba__slider { border-radius: 28px; }
  .hf-ba__story-title { font-size: 2rem; }
  .hf-ba__heading { font-size: 3.4rem; }
}

/* ═══════════════════════════════════
   BA — Reduced Motion
   ═══════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .hf-ba__header,
  .hf-ba__showcase,
  .hf-ba__nav,
  .hf-ba__cta {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .hf-ba__step {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .hf-ba__module.is-active {
    animation: none !important;
  }

  .hf-ba__hotspot-ring { animation: none !important; }
  .hf-ba__hotspot::after { transition: none !important; }
  .hf-ba__divider-handle { transition: none !important; }
}


/* ═══════════════════════════════════════════════════════════
   HOW IT WORKS — 4-Step Journey with Progress Track
   ═══════════════════════════════════════════════════════════ */
.hf-how {
  position: relative;
  width: 100%;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
  z-index: 1;
  padding: 80px 40px;
  gap: 44px;
}

/* ── Header ── */
.hf-how__header {
  text-align: center;
  max-width: 640px;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--hf-ease), transform 700ms var(--hf-ease);
}
.hf-how.is-visible .hf-how__header {
  opacity: 1;
  transform: translateY(0);
}

.hf-how__eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hf-gold);
  margin-bottom: 14px;
}

.hf-how__heading {
  font-size: clamp(1.5rem, 3.5vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--hf-white);
  line-height: 1.15;
  margin-bottom: 14px;
}

.hf-how__subtext {
  font-size: 0.92rem;
  font-weight: 400;
  color: rgba(240,237,230,0.5);
  line-height: 1.6;
}

/* ═══════════════════════════════════
   TRACK — Horizontal step layout
   ═══════════════════════════════════ */
.hf-how__track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  width: 100%;
  max-width: 1140px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms var(--hf-ease) 200ms, transform 700ms var(--hf-ease) 200ms;
}
.hf-how.is-visible .hf-how__track {
  opacity: 1;
  transform: translateY(0);
}

/* ── Horizontal progress line ── */
.hf-how__progress {
  position: absolute;
  top: 28px;
  left: 40px;
  right: 40px;
  height: 2px;
  background: rgba(240,237,230,0.06);
  border-radius: 1px;
  z-index: 0;
  overflow: hidden;
}

.hf-how__progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--hf-gold), rgba(211,175,55,0.4));
  border-radius: 1px;
  transition: width 600ms var(--hf-ease);
  box-shadow: 0 0 8px rgba(211,175,55,0.3);
}

/* ═══════════════════════════════════
   STEP — Individual step card
   ═══════════════════════════════════ */
.hf-how__step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  cursor: pointer;
  opacity: 0.35;
  transform: translateY(8px);
  transition:
    opacity 500ms var(--hf-ease),
    transform 500ms var(--hf-ease);
}

.hf-how__step.is-active {
  opacity: 1;
  transform: translateY(0);
}

.hf-how__step.is-completed {
  opacity: 0.65;
  transform: translateY(0);
}

/* ── Step indicator (numbered circle) ── */
.hf-how__step-indicator {
  position: relative;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}

.hf-how__step-num {
  position: relative;
  z-index: 2;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: rgba(240,237,230,0.3);
  background: rgba(17,24,40,0.4);
  border: 1.5px solid rgba(240,237,230,0.08);
  transition:
    color 400ms ease,
    background 400ms ease,
    border-color 400ms ease,
    box-shadow 400ms ease,
    transform 400ms var(--hf-ease);
}

.hf-how__step.is-active .hf-how__step-num {
  color: var(--hf-black);
  background: var(--hf-gold);
  border-color: var(--hf-gold);
  box-shadow: 0 4px 24px rgba(211,175,55,0.35), 0 0 40px rgba(211,175,55,0.12);
  transform: scale(1.15);
}

.hf-how__step.is-completed .hf-how__step-num {
  color: var(--hf-gold);
  background: rgba(211,175,55,0.1);
  border-color: rgba(211,175,55,0.3);
}

/* Pulse ring on active */
.hf-how__step-pulse {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid rgba(211,175,55,0.3);
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
}

.hf-how__step.is-active .hf-how__step-pulse {
  animation: hf-how-pulse 2.5s ease-out infinite;
}

@keyframes hf-how-pulse {
  0%   { opacity: 0.7; transform: scale(0.85); }
  100% { opacity: 0; transform: scale(1.6); }
}

/* ── Step content ── */
.hf-how__step-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hf-how__step-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: rgba(240,237,230,0.5);
  letter-spacing: -0.01em;
  line-height: 1.25;
  transition: color 400ms ease;
}

.hf-how__step.is-active .hf-how__step-title {
  color: var(--hf-white);
}

.hf-how__step.is-completed .hf-how__step-title {
  color: rgba(240,237,230,0.65);
}

.hf-how__step-desc {
  font-size: 0.78rem;
  font-weight: 400;
  color: rgba(240,237,230,0.3);
  line-height: 1.6;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-height 500ms var(--hf-ease),
    opacity 400ms var(--hf-ease);
}

.hf-how__step.is-active .hf-how__step-desc {
  max-height: 120px;
  opacity: 1;
}

/* ── Step visual (image card) ── */
.hf-how__step-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(211,175,55,0.04);
  transform: scale(0.92);
  opacity: 0;
  transition:
    transform 600ms var(--hf-ease),
    opacity 500ms var(--hf-ease),
    border-color 400ms ease;
}

.hf-how__step.is-active .hf-how__step-visual {
  transform: scale(1);
  opacity: 1;
  border-color: rgba(211,175,55,0.12);
}

.hf-how__step.is-completed .hf-how__step-visual {
  transform: scale(0.95);
  opacity: 0.5;
}

.hf-how__step-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.45) saturate(0.8);
  transform: scale(1.06);
  transition: transform 5s var(--hf-ease), filter 500ms ease;
}

.hf-how__step.is-active .hf-how__step-visual img {
  transform: scale(1);
  filter: brightness(0.5) saturate(0.85);
}

.hf-how__step-visual-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5,4,9,0.85) 0%, rgba(5,4,9,0.2) 60%, transparent 100%);
  pointer-events: none;
}

.hf-how__step-visual-icon {
  position: absolute;
  bottom: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(211,175,55,0.1);
  border: 1px solid rgba(211,175,55,0.2);
  color: var(--hf-gold);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 400ms var(--hf-ease) 200ms, transform 400ms var(--hf-ease) 200ms;
}

.hf-how__step.is-active .hf-how__step-visual-icon {
  opacity: 1;
  transform: translateY(0);
}

.hf-how__step-visual-icon svg {
  width: 18px;
  height: 18px;
}

/* ═══════════════════════════════════
   CTA — Revealed at journey end
   ═══════════════════════════════════ */
.hf-how__cta-wrap {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms var(--hf-ease), transform 600ms var(--hf-ease);
  pointer-events: none;
}

.hf-how__cta-wrap.is-revealed {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.hf-how__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 36px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-radius: 12px;
  color: var(--hf-black);
  background: linear-gradient(135deg, var(--hf-gold) 0%, #C5982F 100%);
  border: 1px solid rgba(211,175,55,0.5);
  transition: box-shadow 300ms ease, transform 300ms var(--hf-ease);
}

.hf-how__cta:hover {
  box-shadow: 0 6px 28px rgba(211,175,55,0.4);
  transform: translateY(-2px);
}

.hf-how__cta-arrow svg {
  width: 16px;
  height: 16px;
  transition: transform 300ms var(--hf-ease);
}

.hf-how__cta:hover .hf-how__cta-arrow svg {
  transform: translateX(3px);
}

/* ═══════════════════════════════════
   HOW — Responsive: Tablet
   ═══════════════════════════════════ */
@media (max-width: 1024px) {
  .hf-how { padding: 60px 24px; gap: 36px; }

  .hf-how__track {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }

  .hf-how__step-indicator { width: 48px; height: 48px; }
  .hf-how__step-num { width: 48px; height: 48px; font-size: 0.78rem; }
  .hf-how__step-title { font-size: 0.85rem; }
  .hf-how__step-desc { font-size: 0.74rem; }
  .hf-how__step-visual { border-radius: 12px; }

  .hf-how__progress { top: 24px; left: 30px; right: 30px; }
}

/* ═══════════════════════════════════
   HOW — Responsive: Mobile (vertical)
   ═══════════════════════════════════ */
@media (max-width: 768px) {
  .hf-how {
    padding: 50px 16px;
    gap: 28px;
    min-height: auto;
  }

  .hf-how__heading { font-size: 1.35rem; }
  .hf-how__subtext { font-size: 0.84rem; }

  .hf-how__track {
    grid-template-columns: 1fr;
    gap: 0;
    max-width: 400px;
  }

  /* Vertical progress line */
  .hf-how__progress {
    top: 28px;
    bottom: 28px;
    left: 27px;
    right: auto;
    width: 2px;
    height: auto;
  }

  .hf-how__progress-fill {
    width: 100%;
    height: 0%;
    transition: height 600ms var(--hf-ease);
  }

  /* Step layout: horizontal on mobile */
  .hf-how__step {
    flex-direction: row;
    text-align: left;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 0;
  }

  .hf-how__step-indicator {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
  }

  .hf-how__step-num { width: 48px; height: 48px; font-size: 0.75rem; }

  .hf-how__step-content { flex: 1; min-width: 0; }

  /* Visual hidden on mobile for space */
  .hf-how__step-visual {
    display: none;
  }

  /* Description always visible on mobile */
  .hf-how__step-desc {
    max-height: none;
    opacity: 0.6;
  }

  .hf-how__step.is-active .hf-how__step-desc {
    opacity: 1;
  }

  .hf-how__step-pulse { inset: -4px; }
}

/* ═══════════════════════════════════
   HOW — Responsive: Small Mobile
   ═══════════════════════════════════ */
@media (max-width: 380px) {
  .hf-how { padding: 40px 12px; }
  .hf-how__step-indicator { width: 40px; height: 40px; }
  .hf-how__step-num { width: 40px; height: 40px; font-size: 0.7rem; }
  .hf-how__step-title { font-size: 0.82rem; }
  .hf-how__step-desc { font-size: 0.72rem; }

  .hf-how__progress { left: 19px; }
}

/* ═══════════════════════════════════
   HOW — Responsive: Ultrawide
   ═══════════════════════════════════ */
@media (min-width: 2200px) {
  .hf-how__track { max-width: 1500px; gap: 36px; }

  .hf-how__step-indicator { width: 68px; height: 68px; }
  .hf-how__step-num { width: 68px; height: 68px; font-size: 1rem; }
  .hf-how__step-title { font-size: 1.15rem; }
  .hf-how__step-desc { font-size: 0.92rem; }
  .hf-how__step-visual { border-radius: 18px; }
  .hf-how__step-visual-icon { width: 44px; height: 44px; }
  .hf-how__step-visual-icon svg { width: 22px; height: 22px; }

  .hf-how__heading { font-size: 2.8rem; }
  .hf-how__progress { top: 34px; left: 50px; right: 50px; }
}

/* ═══════════════════════════════════
   HOW — Responsive: Super Ultrawide
   ═══════════════════════════════════ */
@media (min-width: 3800px) {
  .hf-how__track { max-width: 2100px; gap: 48px; }
  .hf-how__step-indicator { width: 80px; height: 80px; }
  .hf-how__step-num { width: 80px; height: 80px; font-size: 1.2rem; }
  .hf-how__step-title { font-size: 1.4rem; }
  .hf-how__heading { font-size: 3.4rem; }
  .hf-how__step-visual { border-radius: 24px; }
}

/* ═══════════════════════════════════
   HOW — Reduced Motion
   ═══════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .hf-how__header,
  .hf-how__track {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .hf-how__step {
    opacity: 0.5 !important;
    transform: none !important;
    transition: opacity 200ms ease !important;
  }

  .hf-how__step.is-active { opacity: 1 !important; }
  .hf-how__step.is-completed { opacity: 0.65 !important; }

  .hf-how__step-num { transition: color 200ms ease, background 200ms ease, border-color 200ms ease !important; transform: none !important; }
  .hf-how__step-visual { transition: opacity 200ms ease !important; transform: none !important; }
  .hf-how__step-visual img { transition: none !important; transform: scale(1) !important; }
  .hf-how__step-visual-icon { transition: none !important; opacity: 1 !important; transform: none !important; }
  .hf-how__step-desc { transition: opacity 200ms ease !important; max-height: none !important; }
  .hf-how__step-pulse { animation: none !important; }
  .hf-how__progress-fill { transition: none !important; }

  .hf-how__cta-wrap {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    pointer-events: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════
   SECTION 8 — WHO WE SERVE
   ═══════════════════════════════════════════════════════ */

.hf-serve {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 80px 5vw;
  scroll-snap-align: start;
  z-index: 1;
  overflow: hidden;
}

/* ── Header ── */

.hf-serve__header {
  text-align: center;
  margin-bottom: 48px;
  max-width: 720px;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--hf-ease), transform 0.8s var(--hf-ease);
}
.hf-serve.is-visible .hf-serve__header {
  opacity: 1;
  transform: translateY(0);
}

.hf-serve__eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--hf-gold);
  margin-bottom: 12px;
}
.hf-serve__heading {
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  font-weight: 800;
  color: var(--hf-white);
  line-height: 1.15;
  margin: 0 0 14px;
}
.hf-serve__subtext {
  font-size: clamp(0.88rem, 1.3vw, 1.05rem);
  color: rgba(240, 237, 230, 0.6);
  line-height: 1.6;
  margin: 0;
}

/* ── Body: two-column layout ── */

.hf-serve__body {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 36px;
  width: 100%;
  max-width: 1200px;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.85s 0.15s var(--hf-ease), transform 0.85s 0.15s var(--hf-ease);
}
.hf-serve.is-visible .hf-serve__body {
  opacity: 1;
  transform: translateY(0);
}

/* ── Category Tabs (left column) ── */

.hf-serve__categories {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hf-serve__cat {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(211, 175, 55, 0.08);
  border-radius: 12px;
  cursor: pointer;
  transition:
    background 0.35s var(--hf-ease),
    border-color 0.35s var(--hf-ease),
    box-shadow 0.35s var(--hf-ease),
    transform 0.3s var(--hf-ease);
  color: rgba(240, 237, 230, 0.6);
  text-align: left;
  font-family: inherit;
  outline: none;
}
.hf-serve__cat:hover {
  background: rgba(211, 175, 55, 0.06);
  border-color: rgba(211, 175, 55, 0.2);
  transform: translateX(4px);
}
.hf-serve__cat:focus-visible {
  box-shadow: 0 0 0 2px rgba(211, 175, 55, 0.5);
  border-color: rgba(211, 175, 55, 0.4);
}
.hf-serve__cat.is-active {
  background: rgba(211, 175, 55, 0.1);
  border-color: rgba(211, 175, 55, 0.35);
  color: var(--hf-white);
  box-shadow: 0 0 20px rgba(211, 175, 55, 0.08);
}

.hf-serve__cat-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(211, 175, 55, 0.08);
  transition: background 0.3s var(--hf-ease), color 0.3s var(--hf-ease);
}
.hf-serve__cat-icon svg {
  width: 18px;
  height: 18px;
}
.hf-serve__cat.is-active .hf-serve__cat-icon {
  background: rgba(211, 175, 55, 0.2);
  color: var(--hf-gold);
}

.hf-serve__cat-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hf-serve__cat-title {
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.2;
  transition: color 0.3s var(--hf-ease);
}
.hf-serve__cat.is-active .hf-serve__cat-title {
  color: var(--hf-gold);
}
.hf-serve__cat-sub {
  font-size: 0.72rem;
  opacity: 0.55;
  line-height: 1.3;
  transition: opacity 0.3s var(--hf-ease);
}
.hf-serve__cat.is-active .hf-serve__cat-sub {
  opacity: 0.8;
}

/* ── Detail Panel (right column) ── */

.hf-serve__panels {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  min-height: 420px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(211, 175, 55, 0.1);
}

.hf-serve__panel {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.55s var(--hf-ease), visibility 0s 0.55s;
}
.hf-serve__panel.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.55s var(--hf-ease), visibility 0s 0s;
}
.hf-serve__panel[hidden] {
  display: none;
}
.hf-serve__panel.is-active[hidden] {
  display: grid;
}

/* Panel Image */
.hf-serve__panel-img {
  position: relative;
  overflow: hidden;
}
.hf-serve__panel-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--hf-ease);
}
.hf-serve__panel.is-active .hf-serve__panel-img img {
  transform: scale(1.03);
  animation: hf-serve-imgZoom 8s var(--hf-ease) forwards;
}
@keyframes hf-serve-imgZoom {
  0% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

.hf-serve__panel-grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 50%, rgba(5, 4, 9, 0.85) 100%);
  pointer-events: none;
}

/* Panel Info */
.hf-serve__panel-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 36px 32px;
  gap: 14px;
}

.hf-serve__panel-tag {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hf-gold);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s 0.1s var(--hf-ease), transform 0.5s 0.1s var(--hf-ease);
}
.hf-serve__panel.is-active .hf-serve__panel-tag {
  opacity: 1;
  transform: translateY(0);
}

.hf-serve__panel-title {
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 800;
  color: var(--hf-white);
  line-height: 1.2;
  margin: 0;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s 0.18s var(--hf-ease), transform 0.5s 0.18s var(--hf-ease);
}
.hf-serve__panel.is-active .hf-serve__panel-title {
  opacity: 1;
  transform: translateY(0);
}

.hf-serve__panel-desc {
  font-size: clamp(0.82rem, 1.1vw, 0.95rem);
  color: rgba(240, 237, 230, 0.6);
  line-height: 1.65;
  margin: 0;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s 0.26s var(--hf-ease), transform 0.5s 0.26s var(--hf-ease);
}
.hf-serve__panel.is-active .hf-serve__panel-desc {
  opacity: 1;
  transform: translateY(0);
}

/* Need tags */
.hf-serve__panel-needs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s 0.34s var(--hf-ease), transform 0.5s 0.34s var(--hf-ease);
}
.hf-serve__panel.is-active .hf-serve__panel-needs {
  opacity: 1;
  transform: translateY(0);
}
.hf-serve__need {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--hf-gold);
  background: rgba(211, 175, 55, 0.08);
  border: 1px solid rgba(211, 175, 55, 0.15);
  border-radius: 100px;
}

/* Recommendation */
.hf-serve__panel-rec {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s 0.42s var(--hf-ease), transform 0.5s 0.42s var(--hf-ease);
}
.hf-serve__panel.is-active .hf-serve__panel-rec {
  opacity: 1;
  transform: translateY(0);
}
.hf-serve__rec-label {
  color: rgba(240, 237, 230, 0.5);
  font-weight: 500;
}
.hf-serve__rec-pkg {
  color: var(--hf-gold);
  font-weight: 700;
}

/* CTA */
.hf-serve__panel-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 12px 28px;
  background: linear-gradient(135deg, #D3AF37, #F6D97B);
  color: #050409;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-radius: 10px;
  align-self: flex-start;
  transition: transform 0.3s var(--hf-ease), box-shadow 0.3s var(--hf-ease);
  opacity: 0;
  transform: translateY(12px);
}
.hf-serve__panel.is-active .hf-serve__panel-cta {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s 0.5s var(--hf-ease), transform 0.5s 0.5s var(--hf-ease), box-shadow 0.3s var(--hf-ease);
}
.hf-serve__panel-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(211, 175, 55, 0.3);
}
.hf-serve__panel-cta:focus-visible {
  outline: 2px solid var(--hf-gold);
  outline-offset: 3px;
}

/* ── Mobile: swipeable card stack ── */

.hf-serve__mobile-nav {
  display: none;
}

/* ── Responsive ── */

@media (max-width: 1024px) {
  .hf-serve__body {
    grid-template-columns: 280px 1fr;
    gap: 24px;
  }
  .hf-serve__panel-info {
    padding: 28px 24px;
  }
}

@media (max-width: 768px) {
  .hf-serve {
    padding: 60px 5vw 80px;
    justify-content: flex-start;
    min-height: auto;
    height: auto;
    scroll-snap-align: start;
  }
  .hf-serve__header {
    margin-bottom: 32px;
  }
  .hf-serve__body {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* Mobile: horizontal scroll categories */
  .hf-serve__categories {
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
    gap: 8px;
    scroll-snap-type: x proximity;
  }
  .hf-serve__categories::-webkit-scrollbar {
    display: none;
  }
  .hf-serve__cat {
    flex-shrink: 0;
    min-width: 160px;
    scroll-snap-align: start;
    padding: 12px 14px;
  }
  .hf-serve__cat:hover {
    transform: none;
  }
  .hf-serve__cat-sub {
    display: none;
  }

  /* Panel stacks vertically on mobile */
  .hf-serve__panels {
    min-height: 0;
    border-radius: 14px;
  }
  .hf-serve__panel,
  .hf-serve__panel.is-active {
    grid-template-columns: 1fr;
  }
  .hf-serve__panel.is-active[hidden] {
    display: grid;
  }
  .hf-serve__panel-img {
    height: 200px;
  }
  .hf-serve__panel-grad {
    background: linear-gradient(180deg, transparent 30%, rgba(5, 4, 9, 0.9) 100%);
  }
  .hf-serve__panel-info {
    padding: 24px 20px;
    gap: 12px;
  }

  /* Mobile nav arrows */
  .hf-serve__mobile-nav {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 16px;
  }
  .hf-serve__mobile-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(211, 175, 55, 0.1);
    border: 1px solid rgba(211, 175, 55, 0.2);
    border-radius: 50%;
    color: var(--hf-gold);
    cursor: pointer;
    transition: background 0.3s var(--hf-ease);
    font-family: inherit;
  }
  .hf-serve__mobile-btn:hover {
    background: rgba(211, 175, 55, 0.2);
  }
  .hf-serve__mobile-btn:focus-visible {
    box-shadow: 0 0 0 2px rgba(211, 175, 55, 0.5);
  }
  .hf-serve__mobile-counter {
    display: flex;
    align-items: center;
    font-size: 0.82rem;
    color: rgba(240, 237, 230, 0.5);
    font-weight: 600;
    gap: 2px;
  }
  .hf-serve__mobile-counter .current {
    color: var(--hf-gold);
  }
}

@media (max-width: 480px) {
  .hf-serve {
    padding: 48px 4vw 60px;
  }
  .hf-serve__heading {
    font-size: 1.35rem;
  }
  .hf-serve__cat {
    min-width: 140px;
    padding: 10px 12px;
  }
  .hf-serve__panel-img {
    height: 160px;
  }
  .hf-serve__panel-title {
    font-size: 1.05rem;
  }
  .hf-serve__panel-cta {
    width: 100%;
    justify-content: center;
    padding: 14px 24px;
  }
}

@media (max-width: 380px) {
  .hf-serve__heading {
    font-size: 1.2rem;
  }
  .hf-serve__cat {
    min-width: 130px;
  }
  .hf-serve__panel-info {
    padding: 20px 16px;
  }
}

/* Ultrawide */
@media (min-width: 2200px) {
  .hf-serve__body {
    max-width: 1400px;
    grid-template-columns: 400px 1fr;
    gap: 48px;
  }
  .hf-serve__panels {
    min-height: 500px;
  }
  .hf-serve__heading {
    font-size: 2.8rem;
  }
}

@media (min-width: 3800px) {
  .hf-serve__body {
    max-width: 1800px;
    grid-template-columns: 480px 1fr;
    gap: 64px;
  }
  .hf-serve__panels {
    min-height: 600px;
  }
  .hf-serve__cat {
    padding: 20px 24px;
    border-radius: 16px;
  }
  .hf-serve__cat-title {
    font-size: 1.1rem;
  }
  .hf-serve__heading {
    font-size: 3.2rem;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hf-serve__header,
  .hf-serve__body,
  .hf-serve__panel-tag,
  .hf-serve__panel-title,
  .hf-serve__panel-desc,
  .hf-serve__panel-needs,
  .hf-serve__panel-rec,
  .hf-serve__panel-cta {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .hf-serve__panel.is-active .hf-serve__panel-img img {
    animation: none !important;
    transform: none !important;
  }
}

/* ═══════════════════════════════════════════════════════
   SECTION 9 — REVIEWS
   ═══════════════════════════════════════════════════════ */

.hf-rev {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 80px 5vw;
  scroll-snap-align: start;
  z-index: 1;
  overflow: hidden;
}

/* ── Header ── */

.hf-rev__header {
  text-align: center;
  margin-bottom: 48px;
  max-width: 720px;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--hf-ease), transform 0.8s var(--hf-ease);
}
.hf-rev.is-visible .hf-rev__header {
  opacity: 1;
  transform: translateY(0);
}

.hf-rev__eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--hf-gold);
  margin-bottom: 12px;
}
.hf-rev__heading {
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  font-weight: 800;
  color: var(--hf-white);
  line-height: 1.15;
  margin: 0 0 14px;
}
.hf-rev__subtext {
  font-size: clamp(0.88rem, 1.3vw, 1.05rem);
  color: rgba(240, 237, 230, 0.6);
  line-height: 1.6;
  margin: 0;
}

/* ── Layout: sidebar left + main right ── */

.hf-rev__layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 36px;
  width: 100%;
  max-width: 1260px;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.85s 0.15s var(--hf-ease), transform 0.85s 0.15s var(--hf-ease);
}
.hf-rev.is-visible .hf-rev__layout {
  opacity: 1;
  transform: translateY(0);
}

/* ── Trust Sidebar ── */

.hf-rev__trust {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 28px 24px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(211, 175, 55, 0.1);
  border-radius: 18px;
  align-self: start;
  position: sticky;
  top: 15vh;
}

.hf-rev__trust-score {
  text-align: center;
}
.hf-rev__trust-number {
  display: block;
  font-size: 3.2rem;
  font-weight: 800;
  color: var(--hf-white);
  line-height: 1;
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}
.hf-rev__trust-stars {
  display: flex;
  justify-content: center;
  gap: 3px;
  color: var(--hf-gold);
}
.hf-rev__trust-stars svg {
  width: 18px;
  height: 18px;
}

.hf-rev__trust-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.hf-rev__trust-stat {
  text-align: center;
  padding: 14px 8px;
  background: rgba(211, 175, 55, 0.05);
  border: 1px solid rgba(211, 175, 55, 0.1);
  border-radius: 12px;
}
.hf-rev__trust-stat-num {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--hf-gold);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.hf-rev__trust-stat-label {
  display: block;
  font-size: 0.68rem;
  color: rgba(240, 237, 230, 0.5);
  margin-top: 4px;
  line-height: 1.3;
}

.hf-rev__trust-geo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: rgba(240, 237, 230, 0.5);
  line-height: 1.4;
}
.hf-rev__trust-geo-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--hf-gold);
  opacity: 0.7;
}

.hf-rev__trust-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 20px;
  background: transparent;
  border: 1px solid rgba(211, 175, 55, 0.3);
  color: var(--hf-gold);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-decoration: none;
  border-radius: 10px;
  transition: background 0.3s var(--hf-ease), border-color 0.3s var(--hf-ease), transform 0.3s var(--hf-ease), box-shadow 0.3s var(--hf-ease);
}
.hf-rev__trust-cta:hover {
  background: rgba(211, 175, 55, 0.08);
  border-color: rgba(211, 175, 55, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(211, 175, 55, 0.15);
}
.hf-rev__trust-cta:focus-visible {
  outline: 2px solid var(--hf-gold);
  outline-offset: 3px;
}

/* ── Main reviews area ── */

.hf-rev__main {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

/* ── Filter Chips ── */

.hf-rev__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hf-rev__chip {
  padding: 8px 18px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(240, 237, 230, 0.55);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(211, 175, 55, 0.1);
  border-radius: 100px;
  cursor: pointer;
  transition: background 0.3s var(--hf-ease), border-color 0.3s var(--hf-ease), color 0.3s var(--hf-ease), transform 0.25s var(--hf-ease), box-shadow 0.3s var(--hf-ease);
  font-family: inherit;
  outline: none;
}
.hf-rev__chip:hover {
  background: rgba(211, 175, 55, 0.06);
  border-color: rgba(211, 175, 55, 0.25);
  color: rgba(240, 237, 230, 0.85);
}
.hf-rev__chip:focus-visible {
  box-shadow: 0 0 0 2px rgba(211, 175, 55, 0.5);
}
.hf-rev__chip.is-active {
  background: rgba(211, 175, 55, 0.12);
  border-color: rgba(211, 175, 55, 0.4);
  color: var(--hf-gold);
  box-shadow: 0 0 12px rgba(211, 175, 55, 0.1);
}

/* ── Review Cards Grid ── */

.hf-rev__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.hf-rev__card {
  position: relative;
  padding: 22px 24px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(211, 175, 55, 0.08);
  border-radius: 16px;
  cursor: default;
  transition: border-color 0.35s var(--hf-ease), box-shadow 0.35s var(--hf-ease), transform 0.35s var(--hf-ease), opacity 0.45s var(--hf-ease);
  outline: none;
  opacity: 0;
  transform: translateY(16px);
}
.hf-rev.is-visible .hf-rev__card {
  opacity: 1;
  transform: translateY(0);
}
.hf-rev.is-visible .hf-rev__card:nth-child(1) { transition-delay: 0.08s; }
.hf-rev.is-visible .hf-rev__card:nth-child(2) { transition-delay: 0.16s; }
.hf-rev.is-visible .hf-rev__card:nth-child(3) { transition-delay: 0.24s; }
.hf-rev.is-visible .hf-rev__card:nth-child(4) { transition-delay: 0.32s; }
.hf-rev.is-visible .hf-rev__card:nth-child(5) { transition-delay: 0.40s; }
.hf-rev.is-visible .hf-rev__card:nth-child(6) { transition-delay: 0.48s; }
.hf-rev.is-visible .hf-rev__card:nth-child(7) { transition-delay: 0.56s; }
.hf-rev.is-visible .hf-rev__card:nth-child(8) { transition-delay: 0.64s; }

/* Hover expand */
.hf-rev__card:hover,
.hf-rev__card:focus-visible {
  border-color: rgba(211, 175, 55, 0.25);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 20px rgba(211, 175, 55, 0.06);
  transform: translateY(-3px);
}

/* Filter hide/show */
.hf-rev__card.is-hidden {
  opacity: 0 !important;
  transform: scale(0.92) translateY(8px) !important;
  pointer-events: none;
  position: absolute;
  visibility: hidden;
}
.hf-rev__card.is-showing {
  animation: hf-rev-cardIn 0.5s var(--hf-ease) forwards;
}
@keyframes hf-rev-cardIn {
  from { opacity: 0; transform: scale(0.94) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Card top row */
.hf-rev__card-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.hf-rev__card-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid rgba(211, 175, 55, 0.2);
}
.hf-rev__card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hf-rev__card-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hf-rev__card-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--hf-white);
}
.hf-rev__card-stars {
  font-size: 0.75rem;
  color: var(--hf-gold);
  letter-spacing: 1px;
}

/* Quote */
.hf-rev__card-quote {
  font-size: 0.85rem;
  color: rgba(240, 237, 230, 0.72);
  line-height: 1.65;
  margin: 0 0 0;
  padding: 0;
  border: none;
  font-style: normal;
}

/* Expandable detail area */
.hf-rev__card-expand {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--hf-ease), opacity 0.35s var(--hf-ease), margin 0.45s var(--hf-ease);
  opacity: 0;
  margin-top: 0;
}
.hf-rev__card:hover .hf-rev__card-expand,
.hf-rev__card:focus-visible .hf-rev__card-expand {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 14px;
}
.hf-rev__card-expand > * {
  overflow: hidden;
}

.hf-rev__card-detail {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-top: 1px solid rgba(211, 175, 55, 0.06);
}
.hf-rev__card-detail:first-child {
  border-top: 1px solid rgba(211, 175, 55, 0.12);
  padding-top: 10px;
}
.hf-rev__card-detail-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(240, 237, 230, 0.35);
  min-width: 64px;
}
.hf-rev__card-detail-value {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--hf-gold);
}

/* ── No results message ── */

.hf-rev__empty {
  display: none;
  grid-column: 1 / -1;
  text-align: center;
  padding: 48px 24px;
  color: rgba(240, 237, 230, 0.4);
  font-size: 0.92rem;
}
.hf-rev__empty.is-visible {
  display: block;
}

/* ═══ RESPONSIVE ═══ */

@media (max-width: 1024px) {
  .hf-rev__layout {
    grid-template-columns: 240px 1fr;
    gap: 24px;
  }
  .hf-rev__trust {
    padding: 22px 18px;
  }
}

@media (max-width: 768px) {
  .hf-rev {
    padding: 60px 5vw 80px;
    justify-content: flex-start;
    min-height: auto;
    height: auto;
    scroll-snap-align: start;
  }
  .hf-rev__header {
    margin-bottom: 28px;
  }

  /* Stack layout: trust on top */
  .hf-rev__layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .hf-rev__trust {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 20px;
    border-radius: 14px;
  }
  .hf-rev__trust-score {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .hf-rev__trust-number {
    font-size: 2.2rem;
    margin-bottom: 0;
  }
  .hf-rev__trust-stats {
    gap: 8px;
  }
  .hf-rev__trust-stat {
    padding: 10px 16px;
  }
  .hf-rev__trust-geo {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  .hf-rev__trust-cta {
    width: 100%;
  }

  /* Filters scroll horizontal */
  .hf-rev__filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .hf-rev__filters::-webkit-scrollbar {
    display: none;
  }
  .hf-rev__chip {
    flex-shrink: 0;
  }

  /* Cards single column */
  .hf-rev__grid {
    grid-template-columns: 1fr;
  }

  /* Expand always visible on mobile (no hover) */
  .hf-rev__card-expand {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-top: 14px;
  }
}

@media (max-width: 480px) {
  .hf-rev {
    padding: 48px 4vw 60px;
  }
  .hf-rev__heading {
    font-size: 1.35rem;
  }
  .hf-rev__card {
    padding: 18px 16px;
  }
  .hf-rev__trust-number {
    font-size: 1.8rem;
  }
}

@media (max-width: 380px) {
  .hf-rev__heading {
    font-size: 1.2rem;
  }
  .hf-rev__trust-stat-num {
    font-size: 1.2rem;
  }
}

/* Ultrawide */
@media (min-width: 2200px) {
  .hf-rev__layout {
    max-width: 1500px;
    grid-template-columns: 320px 1fr;
    gap: 48px;
  }
  .hf-rev__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .hf-rev__heading {
    font-size: 2.8rem;
  }
  .hf-rev__trust-number {
    font-size: 3.8rem;
  }
}

@media (min-width: 3800px) {
  .hf-rev__layout {
    max-width: 1900px;
    grid-template-columns: 380px 1fr;
    gap: 64px;
  }
  .hf-rev__grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .hf-rev__heading {
    font-size: 3.2rem;
  }
  .hf-rev__card {
    padding: 28px 30px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hf-rev__header,
  .hf-rev__layout,
  .hf-rev__card {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .hf-rev__card-expand {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-top: 14px;
    transition: none !important;
  }
  .hf-rev__card.is-showing {
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════
   SECTION 10 — SERVICE AREA
   Interactive OKC metro coverage map + city list
   ═══════════════════════════════════════════════════════ */

.hf-area {
  position: relative;
  width: 100%;
  min-height: 100svh;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 5vw;
  overflow: hidden;
  z-index: 1;
}

.hf-area__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  max-width: 1260px;
  width: 100%;
  align-items: center;
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.8s var(--hf-ease), transform 0.8s var(--hf-ease);
}
.hf-area.is-visible .hf-area__inner {
  opacity: 1;
  transform: translateY(0);
}

/* ─────── Map column ─────── */

.hf-area__map-col {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hf-area__map-canvas {
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 6 / 5;
}

.hf-area__map-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  height: 80%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(211,175,55,0.08) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  animation: hf-area-glowPulse 6s ease-in-out infinite;
}

@keyframes hf-area-glowPulse {
  0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.08); }
}

.hf-area__map-svg {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
}

/* Metro outline */
.hf-area__map-outline {
  stroke: rgba(211,175,55,0.18);
  stroke-width: 1.5;
  fill: rgba(211,175,55,0.02);
  transition: stroke 0.5s var(--hf-ease), fill 0.5s var(--hf-ease);
  filter: drop-shadow(0 0 12px rgba(211,175,55,0.06));
}
.hf-area.is-visible .hf-area__map-outline {
  stroke-dasharray: 1600;
  stroke-dashoffset: 1600;
  animation: hf-area-drawOutline 2s 0.3s var(--hf-ease) forwards;
}
@keyframes hf-area-drawOutline {
  to { stroke-dashoffset: 0; }
}

/* HQ marker */
.hf-area__map-hq {
  fill: var(--hf-gold);
  filter: drop-shadow(0 0 8px rgba(211,175,55,0.5));
}

/* Pulse rings */
.hf-area__map-pulse {
  fill: none;
  stroke: var(--hf-gold);
  stroke-width: 1.5;
  opacity: 0;
  animation: hf-area-pulse 3s ease-out infinite;
}
.hf-area__map-pulse--delay {
  animation-delay: 1.5s;
}
@keyframes hf-area-pulse {
  0%   { r: 6;  opacity: 0.6; stroke-width: 2; }
  100% { r: 40; opacity: 0;   stroke-width: 0.5; }
}

/* City dots */
.hf-area__map-dot {
  fill: rgba(211,175,55,0.35);
  cursor: pointer;
  transition: fill 0.3s var(--hf-ease), r 0.3s var(--hf-ease);
  pointer-events: all;
}
.hf-area__map-dot:hover,
.hf-area__map-dot.is-active {
  fill: var(--hf-gold);
  r: 7;
  filter: drop-shadow(0 0 10px rgba(211,175,55,0.5));
}

/* Connector lines */
.hf-area__map-line {
  stroke: rgba(211,175,55,0.25);
  stroke-width: 1;
  stroke-dasharray: 4 3;
  opacity: 0;
  transition: opacity 0.4s var(--hf-ease);
}
.hf-area__map-line.is-active {
  opacity: 1;
}

/* Map tooltip */
.hf-area__map-tip {
  position: absolute;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 16px;
  background: rgba(5, 4, 9, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(211,175,55,0.2);
  border-radius: 12px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s var(--hf-ease), transform 0.3s var(--hf-ease);
  white-space: nowrap;
}
.hf-area__map-tip.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.hf-area__map-tip[hidden] {
  display: none;
}
.hf-area__map-tip-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--hf-gold);
}
.hf-area__map-tip-status {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(240,237,230,0.7);
  display: flex;
  align-items: center;
  gap: 6px;
}
.hf-area__map-tip-status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  flex-shrink: 0;
}
.hf-area__map-tip-note {
  font-size: 0.68rem;
  color: rgba(240,237,230,0.4);
  font-style: italic;
}

/* ─────── Content column ─────── */

.hf-area__content-col {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.hf-area__header {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hf-area__tag {
  display: inline-flex;
  align-self: flex-start;
  padding: 5px 14px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hf-gold);
  background: rgba(211,175,55,0.08);
  border: 1px solid rgba(211,175,55,0.15);
  border-radius: 100px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s var(--hf-ease), transform 0.6s var(--hf-ease);
}
.hf-area.is-visible .hf-area__tag {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.15s;
}

.hf-area__heading {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 800;
  color: var(--hf-white);
  line-height: 1.15;
  max-width: 520px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--hf-ease), transform 0.7s var(--hf-ease);
}
.hf-area.is-visible .hf-area__heading {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.25s;
}

.hf-area__sub {
  font-size: clamp(0.85rem, 1.1vw, 0.98rem);
  color: rgba(240,237,230,0.5);
  line-height: 1.65;
  max-width: 480px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s var(--hf-ease), transform 0.7s var(--hf-ease);
}
.hf-area.is-visible .hf-area__sub {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.35s;
}

/* ── City buttons grid ── */

.hf-area__cities {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--hf-ease), transform 0.7s var(--hf-ease);
}
.hf-area.is-visible .hf-area__cities {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.45s;
}

.hf-area__city {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(211,175,55,0.06);
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(240,237,230,0.55);
  outline: none;
  transition: all 0.3s var(--hf-ease);
}
.hf-area__city:hover {
  background: rgba(211,175,55,0.05);
  border-color: rgba(211,175,55,0.2);
  color: var(--hf-white);
}
.hf-area__city:focus-visible {
  box-shadow: 0 0 0 2px rgba(211,175,55,0.5);
}
.hf-area__city.is-active {
  background: rgba(211,175,55,0.08);
  border-color: rgba(211,175,55,0.35);
  color: var(--hf-gold);
}

.hf-area__city-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(211,175,55,0.25);
  flex-shrink: 0;
  transition: background 0.3s var(--hf-ease), box-shadow 0.3s var(--hf-ease);
}
.hf-area__city.is-active .hf-area__city-dot,
.hf-area__city:hover .hf-area__city-dot {
  background: var(--hf-gold);
  box-shadow: 0 0 8px rgba(211,175,55,0.4);
}

.hf-area__city-name {
  flex: 1;
  text-align: left;
}

.hf-area__city-badge {
  padding: 2px 8px;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hf-black);
  background: var(--hf-gold);
  border-radius: 100px;
}

/* ── Coverage checker ── */

.hf-area__checker {
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s var(--hf-ease), transform 0.7s var(--hf-ease);
}
.hf-area.is-visible .hf-area__checker {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.55s;
}

.hf-area__checker-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(240,237,230,0.5);
}

.hf-area__checker-row {
  display: flex;
  gap: 10px;
}

.hf-area__checker-field {
  position: relative;
  flex: 1;
}
.hf-area__checker-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: rgba(211,175,55,0.4);
  pointer-events: none;
  transition: color 0.3s var(--hf-ease);
}
.hf-area__checker-field:focus-within .hf-area__checker-icon {
  color: var(--hf-gold);
}

.hf-area__checker-input {
  width: 100%;
  padding: 13px 16px 13px 42px;
  font-size: 0.88rem;
  font-weight: 500;
  font-family: inherit;
  color: var(--hf-white);
  background: rgba(255,255,255,0.03);
  border: 1.5px solid rgba(211,175,55,0.1);
  border-radius: 12px;
  outline: none;
  transition: border-color 0.3s var(--hf-ease), box-shadow 0.3s var(--hf-ease), background 0.3s var(--hf-ease);
}
.hf-area__checker-input::placeholder {
  color: rgba(240,237,230,0.2);
  font-weight: 400;
}
.hf-area__checker-input:hover {
  border-color: rgba(211,175,55,0.2);
}
.hf-area__checker-input:focus {
  border-color: var(--hf-gold);
  box-shadow: 0 0 0 3px rgba(211,175,55,0.1);
  background: rgba(255,255,255,0.05);
}

.hf-area__checker-btn {
  padding: 13px 28px;
  font-size: 0.85rem;
  font-weight: 700;
  font-family: inherit;
  color: var(--hf-black);
  background: linear-gradient(135deg, var(--hf-gold), var(--hf-cream));
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.3s var(--hf-ease), box-shadow 0.3s var(--hf-ease);
  outline: none;
  flex-shrink: 0;
}
.hf-area__checker-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(211,175,55,0.25);
}
.hf-area__checker-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(211,175,55,0.5);
}

/* Result feedback */
.hf-area__checker-result {
  font-size: 0.82rem;
  font-weight: 600;
  min-height: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s var(--hf-ease), transform 0.35s var(--hf-ease);
}
.hf-area__checker-result.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.hf-area__checker-result.is-yes {
  color: #4ade80;
}
.hf-area__checker-result.is-maybe {
  color: var(--hf-cream);
}

.hf-area__checker-result-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ── CTAs ── */

.hf-area__cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s var(--hf-ease), transform 0.7s var(--hf-ease);
}
.hf-area.is-visible .hf-area__cta-row {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.65s;
}

.hf-area__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  font-size: 0.88rem;
  font-weight: 700;
  font-family: inherit;
  text-decoration: none;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.3s var(--hf-ease), box-shadow 0.3s var(--hf-ease);
  outline: none;
  color: var(--hf-black);
  background: linear-gradient(135deg, var(--hf-gold), var(--hf-cream));
  border: none;
}
.hf-area__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(211,175,55,0.3);
}
.hf-area__cta:focus-visible {
  box-shadow: 0 0 0 3px rgba(211,175,55,0.5);
}

.hf-area__cta--outline {
  background: transparent;
  border: 1.5px solid rgba(211,175,55,0.25);
  color: var(--hf-gold);
}
.hf-area__cta--outline:hover {
  background: rgba(211,175,55,0.06);
  border-color: rgba(211,175,55,0.5);
  box-shadow: none;
}

/* ═══ SECTION 10 — RESPONSIVE ═══ */

@media (max-width: 1024px) {
  .hf-area__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .hf-area__map-col {
    order: -1;
  }
  .hf-area__map-canvas {
    max-width: 400px;
  }
  .hf-area__heading {
    max-width: 100%;
  }
  .hf-area__sub {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .hf-area {
    padding: 60px 5vw;
  }
  .hf-area__cities {
    grid-template-columns: repeat(2, 1fr);
  }
  .hf-area__map-canvas {
    max-width: 320px;
  }
  .hf-area__cta-row {
    flex-direction: column;
  }
  .hf-area__cta {
    width: 100%;
    text-align: center;
  }
  .hf-area__checker-row {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .hf-area {
    padding: 50px 4vw;
  }
  .hf-area__cities {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .hf-area__city {
    padding: 8px 10px;
    font-size: 0.72rem;
  }
  .hf-area__map-canvas {
    max-width: 260px;
  }
}

@media (min-width: 2200px) {
  .hf-area__inner {
    max-width: 1500px;
    gap: 80px;
  }
  .hf-area__heading {
    font-size: 2.8rem;
  }
  .hf-area__map-canvas {
    max-width: 620px;
  }
  .hf-area__city {
    padding: 14px 18px;
    font-size: 0.9rem;
  }
}

@media (min-width: 3800px) {
  .hf-area__inner {
    max-width: 2000px;
    gap: 120px;
  }
  .hf-area__heading {
    font-size: 3.6rem;
  }
  .hf-area__map-canvas {
    max-width: 800px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hf-area__inner,
  .hf-area__tag,
  .hf-area__heading,
  .hf-area__sub,
  .hf-area__cities,
  .hf-area__checker,
  .hf-area__cta-row {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hf-area__map-outline {
    animation: none !important;
    stroke-dashoffset: 0 !important;
  }
  .hf-area__map-pulse {
    animation: none !important;
    opacity: 0 !important;
  }
  .hf-area__map-glow {
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════
   SECTION 11 — FAQ
   Category chips + search + smart accordion + CTAs
   ═══════════════════════════════════════════════════════ */

.hf-faq {
  position: relative;
  width: 100%;
  min-height: 100svh;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 5vw;
  overflow: hidden;
  z-index: 1;
}

.hf-faq__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  max-width: 860px;
  width: 100%;
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.8s var(--hf-ease), transform 0.8s var(--hf-ease);
}
.hf-faq.is-visible .hf-faq__inner {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Header ─── */

.hf-faq__header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.hf-faq__tag {
  display: inline-flex;
  padding: 5px 14px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hf-gold);
  background: rgba(211,175,55,0.08);
  border: 1px solid rgba(211,175,55,0.15);
  border-radius: 100px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s var(--hf-ease), transform 0.6s var(--hf-ease);
}
.hf-faq.is-visible .hf-faq__tag {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s;
}

.hf-faq__heading {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 800;
  color: var(--hf-white);
  line-height: 1.15;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--hf-ease), transform 0.7s var(--hf-ease);
}
.hf-faq.is-visible .hf-faq__heading {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
}

.hf-faq__sub {
  font-size: clamp(0.85rem, 1.1vw, 0.96rem);
  color: rgba(240,237,230,0.45);
  line-height: 1.65;
  max-width: 620px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s var(--hf-ease), transform 0.7s var(--hf-ease);
}
.hf-faq.is-visible .hf-faq__sub {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.3s;
}

/* ─── Search bar ─── */

.hf-faq__search-wrap {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s var(--hf-ease), transform 0.7s var(--hf-ease);
}
.hf-faq.is-visible .hf-faq__search-wrap {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.35s;
}

.hf-faq__search-field {
  position: relative;
  width: 100%;
}

.hf-faq__search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: rgba(211,175,55,0.35);
  pointer-events: none;
  transition: color 0.3s var(--hf-ease);
}
.hf-faq__search-field:focus-within .hf-faq__search-icon {
  color: var(--hf-gold);
}

.hf-faq__search-input {
  width: 100%;
  padding: 14px 44px 14px 46px;
  font-size: 0.9rem;
  font-weight: 500;
  font-family: inherit;
  color: var(--hf-white);
  background: rgba(255,255,255,0.03);
  border: 1.5px solid rgba(211,175,55,0.1);
  border-radius: 14px;
  outline: none;
  transition: border-color 0.3s var(--hf-ease), box-shadow 0.3s var(--hf-ease), background 0.3s var(--hf-ease);
  -webkit-appearance: none;
  appearance: none;
}
.hf-faq__search-input::placeholder {
  color: rgba(240,237,230,0.2);
  font-weight: 400;
}
.hf-faq__search-input:hover {
  border-color: rgba(211,175,55,0.2);
}
.hf-faq__search-input:focus {
  border-color: var(--hf-gold);
  box-shadow: 0 0 0 3px rgba(211,175,55,0.1);
  background: rgba(255,255,255,0.05);
}
/* Hide webkit search cancel button */
.hf-faq__search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.hf-faq__search-clear {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(211,175,55,0.1);
  border-radius: 8px;
  cursor: pointer;
  color: rgba(240,237,230,0.4);
  transition: color 0.2s var(--hf-ease), background 0.2s var(--hf-ease), border-color 0.2s var(--hf-ease);
  outline: none;
}
.hf-faq__search-clear svg {
  width: 14px;
  height: 14px;
}
.hf-faq__search-clear:hover {
  color: var(--hf-white);
  background: rgba(255,255,255,0.08);
  border-color: rgba(211,175,55,0.25);
}
.hf-faq__search-clear:focus-visible {
  box-shadow: 0 0 0 2px rgba(211,175,55,0.4);
}
.hf-faq__search-clear[hidden] {
  display: none;
}

.hf-faq__search-count {
  font-size: 0.72rem;
  font-weight: 500;
  color: rgba(240,237,230,0.3);
  min-height: 16px;
}

/* ─── Category chips ─── */

.hf-faq__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s var(--hf-ease), transform 0.7s var(--hf-ease);
}
.hf-faq.is-visible .hf-faq__chips {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.4s;
}

.hf-faq__chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  font-size: 0.76rem;
  font-weight: 600;
  font-family: inherit;
  color: rgba(240,237,230,0.5);
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(211,175,55,0.08);
  border-radius: 100px;
  cursor: pointer;
  outline: none;
  transition: all 0.3s var(--hf-ease);
  white-space: nowrap;
}
.hf-faq__chip:hover {
  color: var(--hf-white);
  background: rgba(211,175,55,0.05);
  border-color: rgba(211,175,55,0.2);
}
.hf-faq__chip:focus-visible {
  box-shadow: 0 0 0 2px rgba(211,175,55,0.45);
}
.hf-faq__chip.is-active {
  color: var(--hf-black);
  background: linear-gradient(135deg, var(--hf-gold), var(--hf-cream));
  border-color: transparent;
  font-weight: 700;
}

/* ─── FAQ list / accordion ─── */

.hf-faq__list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--hf-ease), transform 0.7s var(--hf-ease);
}
.hf-faq.is-visible .hf-faq__list {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.5s;
}

/* FAQ item */
.hf-faq__item {
  border: 1px solid rgba(211,175,55,0.06);
  border-radius: 14px;
  background: rgba(255,255,255,0.015);
  overflow: hidden;
  transition: border-color 0.35s var(--hf-ease), background 0.35s var(--hf-ease), opacity 0.4s var(--hf-ease), transform 0.4s var(--hf-ease);
}
.hf-faq__item:hover {
  border-color: rgba(211,175,55,0.12);
  background: rgba(255,255,255,0.025);
}
.hf-faq__item.is-open {
  border-color: rgba(211,175,55,0.2);
  background: rgba(211,175,55,0.02);
}

/* Filtered out */
.hf-faq__item.is-hidden {
  display: none;
}

/* Search highlight glow */
.hf-faq__item.is-match {
  border-color: rgba(211,175,55,0.25);
}

/* Question button */
.hf-faq__question {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 20px 24px;
  text-align: left;
  font-family: inherit;
  font-size: clamp(0.88rem, 1vw, 0.96rem);
  font-weight: 600;
  color: rgba(240,237,230,0.75);
  background: none;
  border: none;
  cursor: pointer;
  outline: none;
  transition: color 0.3s var(--hf-ease);
}
.hf-faq__question:hover {
  color: var(--hf-white);
}
.hf-faq__question:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(211,175,55,0.4);
  border-radius: 14px;
}
.hf-faq__item.is-open .hf-faq__question {
  color: var(--hf-gold);
}

.hf-faq__q-text {
  flex: 1;
  line-height: 1.4;
}

/* Plus/minus icon */
.hf-faq__q-icon {
  position: relative;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.hf-faq__q-icon::before,
.hf-faq__q-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.4s var(--hf-ease), opacity 0.4s var(--hf-ease);
}
.hf-faq__q-icon::before {
  width: 14px;
  height: 2px;
  transform: translate(-50%, -50%);
}
.hf-faq__q-icon::after {
  width: 2px;
  height: 14px;
  transform: translate(-50%, -50%);
}
.hf-faq__item.is-open .hf-faq__q-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

/* Answer panel */
.hf-faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--hf-ease);
}
.hf-faq__item.is-open .hf-faq__answer {
  grid-template-rows: 1fr;
}

.hf-faq__answer-inner {
  overflow: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.4s 0.05s var(--hf-ease), transform 0.4s 0.05s var(--hf-ease);
  padding: 0 24px;
}
.hf-faq__item.is-open .hf-faq__answer-inner {
  opacity: 1;
  transform: translateY(0);
  padding: 0 24px 20px;
}

.hf-faq__answer-inner p {
  font-size: clamp(0.82rem, 0.95vw, 0.9rem);
  color: rgba(240,237,230,0.5);
  line-height: 1.72;
  margin: 0 0 16px;
}

/* In-answer CTA link */
.hf-faq__answer-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: 0.78rem;
  font-weight: 700;
  font-family: inherit;
  color: var(--hf-gold);
  background: rgba(211,175,55,0.06);
  border: 1px solid rgba(211,175,55,0.15);
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.3s var(--hf-ease);
  outline: none;
}
.hf-faq__answer-cta svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.3s var(--hf-ease);
}
.hf-faq__answer-cta:hover {
  background: rgba(211,175,55,0.1);
  border-color: rgba(211,175,55,0.35);
  transform: translateX(2px);
}
.hf-faq__answer-cta:hover svg {
  transform: translateX(3px);
}
.hf-faq__answer-cta:focus-visible {
  box-shadow: 0 0 0 2px rgba(211,175,55,0.45);
}

/* ─── Empty state ─── */

.hf-faq__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 48px 24px;
  text-align: center;
}
.hf-faq__empty[hidden] {
  display: none;
}
.hf-faq__empty-icon {
  width: 40px;
  height: 40px;
  color: rgba(211,175,55,0.2);
}
.hf-faq__empty-text {
  font-size: 0.88rem;
  color: rgba(240,237,230,0.35);
  line-height: 1.5;
  margin: 0;
}
.hf-faq__empty-reset {
  display: inline;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  color: var(--hf-gold);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  outline: none;
}
.hf-faq__empty-reset:hover {
  color: var(--hf-cream);
}
.hf-faq__empty-reset:focus-visible {
  box-shadow: 0 0 0 2px rgba(211,175,55,0.4);
  border-radius: 3px;
}

/* ─── Bottom CTA ─── */

.hf-faq__bottom {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s var(--hf-ease), transform 0.7s var(--hf-ease);
}
.hf-faq.is-visible .hf-faq__bottom {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.6s;
}

.hf-faq__bottom-text {
  font-size: 0.88rem;
  font-weight: 500;
  color: rgba(240,237,230,0.4);
  margin: 0;
}

.hf-faq__bottom-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  font-size: 0.85rem;
  font-weight: 700;
  font-family: inherit;
  color: var(--hf-black);
  background: linear-gradient(135deg, var(--hf-gold), var(--hf-cream));
  border: none;
  border-radius: 12px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.3s var(--hf-ease), box-shadow 0.3s var(--hf-ease);
  outline: none;
}
.hf-faq__bottom-cta svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.3s var(--hf-ease);
}
.hf-faq__bottom-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(211,175,55,0.3);
}
.hf-faq__bottom-cta:hover svg {
  transform: translateX(3px);
}
.hf-faq__bottom-cta:focus-visible {
  box-shadow: 0 0 0 3px rgba(211,175,55,0.5);
}

/* ═══ SECTION 11 — RESPONSIVE ═══ */

@media (max-width: 768px) {
  .hf-faq {
    padding: 60px 5vw;
  }
  .hf-faq__inner {
    gap: 24px;
  }
  .hf-faq__chips {
    gap: 6px;
  }
  .hf-faq__chip {
    padding: 7px 14px;
    font-size: 0.72rem;
  }
  .hf-faq__question {
    padding: 16px 18px;
    font-size: 0.86rem;
    gap: 12px;
  }
  .hf-faq__answer-inner {
    padding: 0 18px;
  }
  .hf-faq__item.is-open .hf-faq__answer-inner {
    padding: 0 18px 16px;
  }
  .hf-faq__search-input {
    padding: 12px 40px 12px 42px;
    font-size: 0.86rem;
  }
  .hf-faq__bottom {
    flex-direction: column;
    gap: 10px;
  }
}

@media (max-width: 480px) {
  .hf-faq {
    padding: 50px 4vw;
  }
  .hf-faq__chips {
    gap: 5px;
  }
  .hf-faq__chip {
    padding: 6px 12px;
    font-size: 0.68rem;
  }
  .hf-faq__question {
    padding: 14px 14px;
    font-size: 0.82rem;
  }
  .hf-faq__answer-inner {
    padding: 0 14px;
  }
  .hf-faq__item.is-open .hf-faq__answer-inner {
    padding: 0 14px 14px;
  }
  .hf-faq__answer-cta {
    padding: 9px 16px;
    font-size: 0.74rem;
  }
  .hf-faq__q-icon {
    width: 18px;
    height: 18px;
  }
  .hf-faq__q-icon::before { width: 12px; }
  .hf-faq__q-icon::after  { height: 12px; }
}

@media (min-width: 2200px) {
  .hf-faq__inner {
    max-width: 1040px;
    gap: 40px;
  }
  .hf-faq__heading {
    font-size: 2.8rem;
  }
  .hf-faq__question {
    font-size: 1.08rem;
    padding: 24px 28px;
  }
  .hf-faq__chip {
    padding: 10px 22px;
    font-size: 0.86rem;
  }
}

@media (min-width: 3800px) {
  .hf-faq__inner {
    max-width: 1400px;
  }
  .hf-faq__heading {
    font-size: 3.6rem;
  }
  .hf-faq__question {
    font-size: 1.3rem;
    padding: 28px 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hf-faq__inner,
  .hf-faq__tag,
  .hf-faq__heading,
  .hf-faq__sub,
  .hf-faq__search-wrap,
  .hf-faq__chips,
  .hf-faq__list,
  .hf-faq__bottom {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hf-faq__answer {
    transition: none !important;
  }
  .hf-faq__answer-inner {
    transition: none !important;
  }
  .hf-faq__q-icon::before,
  .hf-faq__q-icon::after {
    transition: none !important;
  }
}

/* ═══════════════════════════════════════════════════════
   SECTION 12 — FINAL CTA
   Cinematic closing section with dynamic headline
   ═══════════════════════════════════════════════════════ */

.hf-cta-final {
  position: relative;
  width: 100%;
  min-height: 100svh;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 5vw;
  overflow: hidden;
  z-index: 1;
}

/* ─── Background image ─── */

.hf-cta-final__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hf-cta-final__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  opacity: 0.12;
  filter: saturate(0.3) brightness(0.6);
  transition: opacity 1.2s var(--hf-ease);
}
.hf-cta-final.is-visible .hf-cta-final__bg-img {
  opacity: 0.18;
}

.hf-cta-final__bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(5,4,9,0.85) 0%,
    rgba(5,4,9,0.6) 40%,
    rgba(5,4,9,0.75) 100%
  );
}

.hf-cta-final__bg-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(5,4,9,0.9) 100%);
}

/* ─── Ambient glow ─── */

.hf-cta-final__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 500px;
  height: 500px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(211,175,55,0.06) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation: hf-ctafinal-glow 7s ease-in-out infinite;
}

@keyframes hf-ctafinal-glow {
  0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.15); }
}

/* ─── Inner content ─── */

.hf-cta-final__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 28px;
  max-width: 720px;
  width: 100%;
}

/* ─── Status chip ─── */

.hf-cta-final__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 18px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #4ade80;
  background: rgba(74,222,128,0.06);
  border: 1px solid rgba(74,222,128,0.15);
  border-radius: 100px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--hf-ease), transform 0.6s var(--hf-ease);
}
.hf-cta-final.is-visible .hf-cta-final__status {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s;
}

.hf-cta-final__status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  flex-shrink: 0;
  animation: hf-ctafinal-statusPulse 2.5s ease-in-out infinite;
}
@keyframes hf-ctafinal-statusPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(74,222,128,0.4); }
  50%      { opacity: 0.6; box-shadow: 0 0 0 6px rgba(74,222,128,0); }
}

/* ─── Heading ─── */

.hf-cta-final__heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
}

.hf-cta-final__heading-line1 {
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  font-weight: 500;
  color: rgba(240,237,230,0.5);
  letter-spacing: 0.04em;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--hf-ease), transform 0.7s var(--hf-ease);
}
.hf-cta-final.is-visible .hf-cta-final__heading-line1 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
}

.hf-cta-final__heading-line2 {
  font-size: clamp(1.8rem, 3.6vw, 3rem);
  font-weight: 800;
  color: var(--hf-white);
  line-height: 1.1;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s var(--hf-ease), transform 0.8s var(--hf-ease);
}
.hf-cta-final.is-visible .hf-cta-final__heading-line2 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.3s;
}

/* Gold highlight for dynamic text */
.hf-cta-final__heading-line2 em {
  font-style: normal;
  color: var(--hf-gold);
}

/* ─── Sub copy ─── */

.hf-cta-final__sub {
  font-size: clamp(0.88rem, 1.1vw, 1rem);
  color: rgba(240,237,230,0.45);
  line-height: 1.7;
  max-width: 560px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s var(--hf-ease), transform 0.7s var(--hf-ease);
}
.hf-cta-final.is-visible .hf-cta-final__sub {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.4s;
}

/* ─── Proof strip ─── */

.hf-cta-final__proof {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  justify-content: center;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s var(--hf-ease), transform 0.7s var(--hf-ease);
}
.hf-cta-final.is-visible .hf-cta-final__proof {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.5s;
}

.hf-cta-final__proof-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(240,237,230,0.55);
}

.hf-cta-final__proof-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--hf-gold);
  opacity: 0.7;
}

/* ─── CTA buttons ─── */

.hf-cta-final__buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s var(--hf-ease), transform 0.7s var(--hf-ease);
}
.hf-cta-final.is-visible .hf-cta-final__buttons {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.6s;
}

.hf-cta-final__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 40px;
  font-size: 0.95rem;
  font-weight: 700;
  font-family: inherit;
  text-decoration: none;
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.3s var(--hf-ease), box-shadow 0.3s var(--hf-ease);
  outline: none;
  position: relative;
  overflow: hidden;
}

/* Primary — bold gold solid */
.hf-cta-final__btn--primary {
  color: var(--hf-black);
  background: linear-gradient(135deg, var(--hf-gold), var(--hf-cream));
  border: none;
  box-shadow: 0 4px 20px rgba(211,175,55,0.25), 0 0 40px rgba(211,175,55,0.08);
}
.hf-cta-final__btn--primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(211,175,55,0.4), 0 0 60px rgba(211,175,55,0.12);
}
.hf-cta-final__btn--primary:active {
  transform: translateY(-1px);
}
.hf-cta-final__btn--primary:focus-visible {
  box-shadow: 0 0 0 3px rgba(211,175,55,0.6);
}

/* Shine sweep on primary */
.hf-cta-final__btn-shine {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  z-index: 1;
  pointer-events: none;
}
.hf-cta-final__btn--primary:hover .hf-cta-final__btn-shine {
  animation: hf-ctafinal-shine 0.6s var(--hf-ease) forwards;
}
@keyframes hf-ctafinal-shine {
  to { left: 100%; }
}

.hf-cta-final__btn-text {
  position: relative;
  z-index: 2;
}

.hf-cta-final__btn-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  transition: transform 0.3s var(--hf-ease);
}
.hf-cta-final__btn:hover .hf-cta-final__btn-icon {
  transform: translateX(3px);
}

/* Secondary — outline */
.hf-cta-final__btn--secondary {
  color: var(--hf-white);
  background: rgba(255,255,255,0.03);
  border: 1.5px solid rgba(240,237,230,0.15);
}
.hf-cta-final__btn--secondary:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(240,237,230,0.3);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.hf-cta-final__btn--secondary:focus-visible {
  box-shadow: 0 0 0 3px rgba(211,175,55,0.4);
}

/* ─── Micro assurance ─── */

.hf-cta-final__micro {
  font-size: 0.72rem;
  font-weight: 400;
  color: rgba(240,237,230,0.25);
  letter-spacing: 0.02em;
  margin: 0;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.7s var(--hf-ease), transform 0.7s var(--hf-ease);
}
.hf-cta-final.is-visible .hf-cta-final__micro {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.75s;
}

/* ═══ SECTION 12 — RESPONSIVE ═══ */

@media (max-width: 768px) {
  .hf-cta-final {
    padding: 60px 5vw;
  }
  .hf-cta-final__inner {
    gap: 22px;
  }
  .hf-cta-final__proof {
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }
  .hf-cta-final__buttons {
    flex-direction: column;
    width: 100%;
    max-width: 360px;
  }
  .hf-cta-final__btn {
    width: 100%;
    justify-content: center;
    padding: 15px 32px;
  }
  .hf-cta-final__glow {
    width: 300px;
    height: 300px;
  }
}

@media (max-width: 480px) {
  .hf-cta-final {
    padding: 50px 4vw;
  }
  .hf-cta-final__btn {
    font-size: 0.88rem;
    padding: 14px 24px;
  }
  .hf-cta-final__proof-item {
    font-size: 0.72rem;
  }
  .hf-cta-final__micro {
    font-size: 0.66rem;
  }
}

@media (min-width: 2200px) {
  .hf-cta-final__inner {
    max-width: 900px;
    gap: 36px;
  }
  .hf-cta-final__heading-line2 {
    font-size: 3.6rem;
  }
  .hf-cta-final__btn {
    padding: 20px 52px;
    font-size: 1.08rem;
  }
  .hf-cta-final__glow {
    width: 700px;
    height: 700px;
  }
}

@media (min-width: 3800px) {
  .hf-cta-final__inner {
    max-width: 1200px;
  }
  .hf-cta-final__heading-line2 {
    font-size: 4.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hf-cta-final__inner > *,
  .hf-cta-final__status,
  .hf-cta-final__heading-line1,
  .hf-cta-final__heading-line2,
  .hf-cta-final__sub,
  .hf-cta-final__proof,
  .hf-cta-final__buttons,
  .hf-cta-final__micro {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hf-cta-final__glow {
    animation: none !important;
  }
  .hf-cta-final__status-dot {
    animation: none !important;
    opacity: 1 !important;
  }
  .hf-cta-final__bg-img {
    transition: none !important;
    opacity: 0.15 !important;
  }
  .hf-cta-final__btn-shine {
    display: none;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   ▓▓ REFINEMENT LAYER ▓▓
   Scroll choreography + mobile composition

   Appended deliberately: these rules refine what the sections above
   already establish rather than replacing it, so they need to win on
   source order at equal specificity. Nothing here uses !important
   except where it overrides an existing !important.

   Two things to know before editing:

   1. `.hf-trust` and `.hf-pkg` each contain a position:fixed child (the
      blur overlay and the sticky package bar). Putting opacity or
      transform on those SECTIONS would make them containing blocks and
      pin those children to the section instead of the viewport. So all
      motion lives on children; the section only ever carries state
      classes.

   2. `is-visible` is now added AND removed by the choreographer in
      home.js, which is what gives every section an outro. The existing
      rules above already describe the resting (hidden) state, so they
      reverse for free — what this layer adds is direction, so a section
      leaves the way you pushed it rather than always sinking downward.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Motion tokens ──────────────────────────────────────────────────── */
:root {
  --hf-rise:      28px;   /* how far staggered children travel */
  --hf-step:      70ms;   /* gap between items in a stagger */
  --hf-in:        720ms;  /* entering — unhurried */
  --hf-out:       420ms;  /* leaving — quicker; nobody watches an exit */
  --hf-ease-in:   cubic-bezier(0.22, 1, 0.36, 1);
  --hf-ease-exit: cubic-bezier(0.4, 0, 1, 1);
}

/* ── Stagger ────────────────────────────────────────────────────────────
   home.js writes --i onto each child, so one rule replaces the
   nth-child chains and keeps working past however many were hardcoded. */
.hf-trust__card,
.hf-svc,
.hf-pkg__card,
.hf-how__step,
.hf-serve__card,
.hf-rev__card,
.hf-area__city,
.hf-faq__item {
  transition-delay: calc(var(--i, 0) * var(--hf-step));
}

/* Leaving is not a reversed entrance: no stagger, and faster, so the
   section clears out as one piece instead of unravelling. */
.hf-trust:not(.is-visible) .hf-trust__card,
.hf-services:not(.is-visible) .hf-svc,
.hf-pkg:not(.is-visible) .hf-pkg__card,
.hf-how:not(.is-visible) .hf-how__step,
.hf-serve:not(.is-visible) .hf-serve__card,
.hf-rev:not(.is-visible) .hf-rev__card,
.hf-area:not(.is-visible) .hf-area__city,
.hf-faq:not(.is-visible) .hf-faq__item {
  transition-duration: var(--hf-out);
  transition-delay: 0ms;
  transition-timing-function: var(--hf-ease-exit);
}

/* Direction. `data-from="above"` means the section left upward, so its
   contents should follow it up rather than drop back down. */
[data-from="above"]:not(.is-visible) .hf-trust__card,
[data-from="above"]:not(.is-visible) .hf-svc,
[data-from="above"]:not(.is-visible) .hf-pkg__card,
[data-from="above"]:not(.is-visible) .hf-how__step,
[data-from="above"]:not(.is-visible) .hf-serve__card,
[data-from="above"]:not(.is-visible) .hf-rev__card,
[data-from="above"]:not(.is-visible) .hf-area__city,
[data-from="above"]:not(.is-visible) .hf-faq__item {
  transform: translate3d(0, calc(var(--hf-rise) * -1), 0);
}

/* Section headers get the same treatment, one beat ahead of the cards. */
.hf-services__header,
.hf-pkg__header,
.hf-how__header,
.hf-serve__header,
.hf-rev__header,
.hf-area__header,
.hf-faq__header {
  transition:
    opacity var(--hf-in) var(--hf-ease-in),
    transform var(--hf-in) var(--hf-ease-in);
}
[data-from="above"]:not(.is-visible) .hf-services__header,
[data-from="above"]:not(.is-visible) .hf-pkg__header,
[data-from="above"]:not(.is-visible) .hf-how__header,
[data-from="above"]:not(.is-visible) .hf-serve__header,
[data-from="above"]:not(.is-visible) .hf-rev__header,
[data-from="above"]:not(.is-visible) .hf-area__header,
[data-from="above"]:not(.is-visible) .hf-faq__header {
  transform: translate3d(0, -18px, 0);
}

/* Sections that had no reveal of their own.
   Scoped to html.hf-motion, which an inline script in the <head> sets
   before first paint. If scripting is off that class never lands, so
   these keep their natural opacity instead of being hidden forever by a
   reveal that will never arrive. Setting it inline rather than from
   home.js is what avoids a flash of visible-then-hidden content. */
html.hf-motion .hf-ba__stage,
html.hf-motion .hf-why__body,
html.hf-motion .hf-cta-final__inner {
  opacity: 0;
  transform: translate3d(0, var(--hf-rise), 0);
  transition:
    opacity var(--hf-in) var(--hf-ease-in),
    transform var(--hf-in) var(--hf-ease-in);
}
.hf-ba.is-visible .hf-ba__stage,
.hf-why.is-visible .hf-why__body,
.hf-cta-final.is-visible .hf-cta-final__inner {
  opacity: 1;
  transform: none;
}
[data-from="above"]:not(.is-visible) .hf-ba__stage,
[data-from="above"]:not(.is-visible) .hf-why__body,
[data-from="above"]:not(.is-visible) .hf-cta-final__inner {
  transform: translate3d(0, calc(var(--hf-rise) * -1), 0);
  transition-duration: var(--hf-out);
  transition-timing-function: var(--hf-ease-exit);
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE COMPOSITION  (≤ 768px)
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Free scrolling.
     The page declares `scroll-snap-type: y mandatory`, which suits
     full-viewport panels. But Packages is ~2280px tall and Reviews ~2980px
     on a 375px screen — roughly three viewports each — and mandatory
     snapping fights momentum inside a section that tall, yanking you back
     to its top mid-flick. It also competes with the scroll-triggered
     reveals. Panels are a desktop idea here; on a phone the page is a
     column, so let it behave like one. */
  html { scroll-snap-type: none; }

  /* One rhythm for every section instead of per-section padding. */
  :root {
    --hf-gutter: 20px;
    --hf-sec-y:  72px;
    --hf-rise:   20px;   /* shorter travel — less distance to cover */
    --hf-step:   55ms;   /* and a tighter stagger */
  }

  .hf-trust, .hf-services, .hf-pkg, .hf-why, .hf-ba,
  .hf-how, .hf-serve, .hf-rev, .hf-area, .hf-faq, .hf-cta-final {
    padding-left: var(--hf-gutter);
    padding-right: var(--hf-gutter);
  }

  /* ── Hero ──────────────────────────────────────────────────────────
     The stage was clamp(420px, 72vw, 920px). On a 375px screen the 420px
     floor won, so a 420px square sat in a 375px viewport — overflowing on
     both sides while the wide logo letterboxed inside it. That is why the
     mark read small with dead space above and below it: you were seeing a
     wide logo fitted into a square that was itself too big to fit.

     Sizing from the viewport instead lets the logo be as wide as the
     screen honestly allows, and the rings stay circular. */
  .hf-hero {
    height: 100dvh;          /* dvh, so mobile browser chrome doesn't clip */
    min-height: 540px;
    padding: 0 var(--hf-gutter);
  }
  .hf-hero__stage {
    width: min(92vw, 420px);
    height: min(92vw, 420px);
  }
  .hf-hero__cta {
    margin-top: 4px;         /* the square stage already carries the gap */
    padding: 15px 38px;
    font-size: 0.95rem;
  }
  .hf-hero__scroll-cue { bottom: max(16px, env(safe-area-inset-bottom)); }

  /* ── Trust ─────────────────────────────────────────────────────────
     These are flip cards: hover reveals a photo and a paragraph on the
     back. A touch screen has no hover, so on a phone all six were 180px
     boxes holding one icon and one label — about 1,100px of scrolling for
     six short phrases, and no way to reach the content on the back.

     Two columns of compact chips says the same thing in a third of the
     height, and the label alone carries the claim. The flip stays exactly
     as it is on pointer devices. */
  /* An earlier ≤600px block pins this to 100svh so it works as a snap
     panel. Snapping is off here and the grid is only ~290px tall, so a
     full viewport would be 500px of nothing. Let it be its own size. */
  .hf-trust {
    height: auto;
    min-height: 0;
    padding-top: var(--hf-sec-y);
    padding-bottom: var(--hf-sec-y);
  }
  .hf-trust__inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 0;
    align-items: stretch;
    flex-direction: unset;   /* undo the column stacking from that block */
  }
  .hf-trust__card {
    max-width: none;
    height: auto;
    min-height: 92px;
    cursor: default;
  }
  .hf-trust__card-inner { height: 100%; }
  .hf-trust__front {
    position: relative;
    inset: auto;
    height: 100%;
    gap: 10px;
    padding: 16px 12px;
    justify-content: center;
  }
  .hf-trust__back { display: none; }
  .hf-trust__label {
    font-size: 0.72rem;
    line-height: 1.3;
    text-align: center;
  }
  .hf-trust__icon svg { width: 22px; height: 22px; }

  /* ── Services ──────────────────────────────────────────────────────── */
  .hf-services { padding-top: var(--hf-sec-y); padding-bottom: var(--hf-sec-y); }
  .hf-services__grid { width: 100%; gap: 14px; }

  /* ── Packages ──────────────────────────────────────────────────────── */
  .hf-pkg { padding-top: var(--hf-sec-y); padding-bottom: var(--hf-sec-y); }
  .hf-pkg__cards { gap: 18px; }

  /* The comparison table is wider than the screen and scrolls sideways
     inside its own box, which is right — but nothing said so. A gold
     hairline that fades as you reach the end is the affordance. */
  .hf-pkg__compare-inner {
    position: relative;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .hf-pkg__compare-inner::after {
    content: '';
    position: sticky;
    right: 0;
    top: 0;
    float: right;
    width: 40px;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(5,4,9,0.92));
  }

  /* ── Why ───────────────────────────────────────────────────────────
     The tab strip already scrolls (988px of tabs in 351px). Nothing
     indicated that, so it just looked like a sentence cut off mid-word.
     Snap points make it land on whole tabs, and the fade admits there
     is more to the right. */
  .hf-why { padding-top: var(--hf-sec-y); padding-bottom: var(--hf-sec-y); }
  .hf-why__body { position: relative; }
  .hf-why__tabs {
    scroll-snap-type: x proximity;
    scroll-padding-left: var(--hf-gutter);
    margin-inline: calc(var(--hf-gutter) * -1);
    padding-inline: var(--hf-gutter);
    -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent 100%);
            mask-image: linear-gradient(90deg, #000 82%, transparent 100%);
  }
  .hf-why__tab {
    flex: 0 0 auto;
    scroll-snap-align: start;
    max-width: 74vw;
  }

  /* ── Remaining sections ────────────────────────────────────────────── */
  .hf-ba,
  .hf-how,
  .hf-serve,
  .hf-rev,
  .hf-area,
  .hf-faq {
    padding-top: var(--hf-sec-y);
    padding-bottom: var(--hf-sec-y);
  }
  .hf-cta-final { padding-top: var(--hf-sec-y); padding-bottom: var(--hf-sec-y); }

  /* Headings: the desktop scale is too loud at this width. */
  .hf-services__heading,
  .hf-pkg__heading,
  .hf-why__heading,
  .hf-ba__heading,
  .hf-how__heading,
  .hf-serve__heading,
  .hf-rev__heading,
  .hf-area__heading,
  .hf-faq__heading {
    font-size: clamp(1.5rem, 6.4vw, 1.95rem);
    line-height: 1.2;
    letter-spacing: -0.015em;
  }
  .hf-services__sub,
  .hf-pkg__sub,
  .hf-why__sub,
  .hf-ba__sub,
  .hf-how__sub,
  .hf-serve__sub,
  .hf-rev__sub,
  .hf-area__sub,
  .hf-faq__sub {
    font-size: 0.9rem;
    line-height: 1.6;
  }

  /* Anything that scrolls sideways should not also be a swipe trap. */
  .hf-serve__cats,
  .hf-rev__track,
  .hf-why__tabs,
  .hf-pkg__compare-inner {
    overscroll-behavior-x: contain;
  }
}

/* ── Tablets ────────────────────────────────────────────────────────
   Two columns across 768px gives each chip ~360px to hold one icon and
   two words. Three columns keeps them proportionate to their content. */
@media (min-width: 560px) and (max-width: 768px) {
  :root { --hf-gutter: 28px; --hf-sec-y: 84px; }
  .hf-trust__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .hf-trust__card { min-height: 104px; }
  .hf-trust__label { font-size: 0.76rem; }
  .hf-why__tab { max-width: 46vw; }
}

/* ── Small phones ──────────────────────────────────────────────────── */
@media (max-width: 380px) {
  :root {
    --hf-gutter: 16px;
    --hf-sec-y:  58px;
  }
  .hf-hero__stage { width: 94vw; height: 94vw; }
  .hf-hero__cta { padding: 14px 30px; font-size: 0.9rem; }
  .hf-trust__inner { gap: 8px; }
  .hf-trust__label { font-size: 0.68rem; }
}

/* ── Reduced motion ─────────────────────────────────────────────────────
   home.js reveals everything and disconnects the observer, so nothing can
   be left mid-transition. This makes sure no leftover delay from the
   stagger rules above can hold an element back. */
@media (prefers-reduced-motion: reduce) {
  .hf-trust__card,
  .hf-svc,
  .hf-pkg__card,
  .hf-how__step,
  .hf-serve__card,
  .hf-rev__card,
  .hf-area__city,
  .hf-faq__item,
  .hf-ba__stage,
  .hf-why__body,
  .hf-cta-final__inner {
    transition-delay: 0ms !important;
    transition-duration: 1ms !important;
    opacity: 1 !important;
    transform: none !important;
  }
}