/* Home page styles (loaded after base.css). */

.hero--home .hero__mark { margin-bottom: 22px; }
.hero--home .hero__title { margin-bottom: 14px; max-width: 12ch; }
.hero--home .hero__subtitle { margin-bottom: 48px; }
@media (max-width: 767.98px) { .hero--home .hero__title { line-height: 1.25; } .hero--home .hero__subtitle { margin-bottom: 36px; } }

/* "Dedicated to You" */
.club { padding-top: 50px; padding-bottom: 90px; }
@media (min-width: 1025px) { .club { padding-bottom: 148px; } }
.club .section-head .h2 { margin-top: 24px; }
.steps { display: grid; grid-template-columns: 1fr; gap: 20px; max-width: 460px; margin: 20px auto 0; padding: 0; list-style: none; }
@media (min-width: 600px) { .steps { grid-template-columns: 1fr 1fr; max-width: none; } }
@media (min-width: 1025px) { .step { min-height: 197px; } .steps { grid-template-columns: repeat(4, 1fr); max-width: 1120px; margin-top: 40px; } }
.step { min-height: 170px; padding: 36px 25px 28px; text-align: center; background: #fff no-repeat center center / 100% auto; }
@media (prefers-reduced-motion: no-preference) { .step { transition: box-shadow .3s; } }
.step:hover { box-shadow: var(--shadow-card-hover); }
.step--1 { background-image: url("../assets/images/1.svg"); }
.step--2 { background-image: url("../assets/images/2.svg"); }
.step--3 { background-image: url("../assets/images/3.svg"); }
.step--4 { background-image: url("../assets/images/reload-2.svg"); }
/* Phones and tablets: same card shape as desktop (265:197) so the cropped icon watermark looks the same at every width */
@media (max-width: 1024.98px) { .step { aspect-ratio: 265 / 197; } }
.step__title { margin-bottom: 15px; font: 600 25px/1.2 var(--ff-display); letter-spacing: -.5px; color: var(--c-ink); }
.step__text { font: 300 18px/28px var(--ff-sans); color: var(--c-body-muted); }
.club__cta { margin-top: 60px; text-align: center; }
.club__cta .eyebrow { margin-top: 24px; }

/* Customer reviews */
.reviews { color: var(--c-navy); padding-top: 104px; padding-bottom: 92px; }
.reviews .h2 { color: var(--c-navy); }
.stars { width: 165px; height: auto; margin: 6px auto 14px; }
.reviews__intro { font: 300 14px/1.6 var(--ff-roboto); color: var(--c-navy); }
.reviews__grid { display: grid; grid-template-columns: 1fr; gap: 48px; max-width: 980px; margin: 56px auto 0; }
@media (min-width: 768px) { .reviews__grid { grid-template-columns: 1fr 1fr; gap: 64px 56px; margin-top: 72px; } }
.testimonial { position: relative; padding: 28px 20px 0; text-align: center; }
.testimonial::before { content: ""; position: absolute; top: 0; left: 50%; width: 36px; height: 2px; margin-left: -18px; background: #ffc800; }
.testimonial blockquote { font: 300 17px/1.65 var(--ff-roboto); color: var(--c-navy); }
.testimonial figcaption { margin-top: 18px; font: 700 15px/1.4 var(--ff-slab); color: var(--c-navy); }

/* Our Services dark band */
.services { padding-top: clamp(72px, 10.9vw, 186px); padding-bottom: clamp(72px, 14.6vw, 250px); }
.services__mark { width: 72px; height: auto; margin: 0 auto 30px; }
.services__cols { display: grid; grid-template-columns: 1fr; gap: 64px; align-items: start; }
@media (min-width: 1025px) { .services__cols { grid-template-columns: 529px 1fr; gap: 0 30px; padding: 0 34px 0 37px; } }
.checklist { margin: 40px 0 0; padding: 0; list-style: none; }
.checklist li { display: flex; align-items: center; gap: 8px; padding: 11px 0; font: 300 18px/1.1 var(--ff-sans); border-bottom: 2px solid var(--c-rule-on-dark); }
.checklist li:last-child { border-bottom: 0; }
.checklist .check { flex: none; }
.counter { text-align: center; }
@media (max-width: 1024.98px) { .counter { order: -1; } }
.counter__label { font: 300 15px/1.2 var(--ff-roboto); }
.counter__number { margin-top: 4px; font: 900 var(--fs-counter)/1.1 var(--ff-sans); color: #fff; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.counter__rule { width: 50%; margin: 20px auto 0; border: 0; border-top: 1px solid #fff; }

/* Let's get in touch */
.touch { padding-block: clamp(64px, 9.5vw, 160px); }
.touch .h2 { color: var(--c-slate); text-align: center; }
.touch__cta { margin-top: 28px; text-align: center; }

/* ---- Hero slideshow: gentle drift (Ken Burns) + crossfade ---- */
.hero__slides { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__slide { position: absolute; inset: 0; display: block; opacity: 0; transition: opacity 2s ease-in-out; }
.hero__slide.is-active { opacity: 1; }
.hero__slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 50%; will-change: transform; }
/* Slow sideways pan: image is held at 1.14x so it can travel +/-5% without exposing edges; direction alternates by slide */
@keyframes hero-drift-0 { from { transform: scale(1.14) translate3d(5%, 0, 0); } to { transform: scale(1.14) translate3d(-5%, 0, 0); } }
@keyframes hero-drift-1 { from { transform: scale(1.14) translate3d(-5%, 0, 0); } to { transform: scale(1.14) translate3d(5%, 0, 0); } }
@keyframes hero-drift-2 { from { transform: scale(1.1) translate3d(4%, 0.8%, 0); } to { transform: scale(1.16) translate3d(-4%, -0.8%, 0); } }
.hero__slide.is-active img, .hero__slide.is-leaving img { animation-duration: 13s; animation-timing-function: linear; animation-fill-mode: both; }
/* animation-name only while active/leaving, so every slide starts its pan from the beginning when its turn comes */
.hero__slide.kb-0.is-active img, .hero__slide.kb-0.is-leaving img { animation-name: hero-drift-0; }
.hero__slide.kb-1.is-active img, .hero__slide.kb-1.is-leaving img { animation-name: hero-drift-1; }
.hero__slide.kb-2.is-active img, .hero__slide.kb-2.is-leaving img { animation-name: hero-drift-2; }
.hero__slide.is-leaving { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .hero__slide, .hero__slide img { transition: none; animation: none !important; transform: none; }
}