/* ==========================================================================
   ZedHome — Homepage
   Hero: photo slideshow, centred headline, floating search card. One
   consistent dark tint keeps the white text legible on every slide; motion
   is limited to the slide crossfade and a short fade-in of the copy.
   ========================================================================== */

/* ---------------------------------------------------------------------- */
/* Hero                                                                    */
/* ---------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: var(--color-ink);
  min-height: 660px;
  padding-block: clamp(120px, 22vh, 190px) clamp(112px, 16vh, 150px);
  --color-focus: #fff;
}

/* Homepage-only: the transparent navbar floats over the hero image. The navbar
   is 80px plus its 1px bottom border; pulling the hero up by the full 81px
   leaves no strip of page background under the top bar. */
body.has-hero-nav .hero { margin-top: -81px; }

.hero__slides { position: absolute; inset: 0; z-index: 0; }
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s var(--ease-standard);
}
.hero__slide.is-active { opacity: 1; z-index: 1; }
.hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}

/* One even tint (heavier at the top for the navbar and at the bottom where the
   search card overlaps) plus a soft centre darkening behind the copy, so a
   bright slide never leaves the heading below 4.5:1. */
.hero__topscrim { display: none; }
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 62% 52% at 50% 46%, rgba(15, 13, 12, 0.42) 0%, rgba(15, 13, 12, 0) 100%),
    linear-gradient(180deg, rgba(15, 13, 12, 0.52) 0%, rgba(15, 13, 12, 0.4) 50%, rgba(15, 13, 12, 0.6) 100%);
}

.hero__content { position: relative; z-index: 3; max-width: 860px; margin-inline: auto; text-align: center; }

.hero__heading {
  color: #fff;
  font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-5);
  text-wrap: balance;
  text-shadow: 0 2px 32px rgba(15, 13, 12, 0.4);
}
.hero__heading .accent { color: var(--color-brand); }

.hero__sub {
  max-width: 52ch;
  margin-inline: auto;
  font-size: var(--fs-lead);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 18px rgba(15, 13, 12, 0.5);
}

/* Copy fades in word by word on each slide change (hero.js). */
.hero__heading .word-mask,
.hero__sub .word-mask { display: inline-block; overflow: hidden; vertical-align: top; }
.hero__heading .word,
.hero__sub .word {
  display: inline-block;
  opacity: 0;
  transition: opacity 0.5s var(--ease-standard);
}
.hero__heading .word.is-in,
.hero__sub .word.is-in { opacity: 1; }

/* Prev / next */
.hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(15, 13, 12, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  transition: background var(--dur-fast) var(--ease-standard);
}
.hero__arrow:hover { background: rgba(15, 13, 12, 0.7); }
.hero__arrow--prev { left: var(--space-6); }
.hero__arrow--next { right: var(--space-6); }
.hero__arrow--prev svg { transform: scaleX(-1); }
.hero__arrow svg { width: 20px; height: 20px; }

/* The autoplay progress line sat directly under the top bar and read as a
   white border, so it is not shown (dots + counter still track the slide). */
.hero__progress { display: none; }

/* Dots + counter, raised clear of the overlapping search card */
.hero__meta {
  position: absolute;
  right: var(--space-6);
  bottom: 118px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.hero__dots { display: flex; align-items: center; gap: 8px; }
.hero__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  transition: background var(--dur-fast) var(--ease-standard), width var(--dur-fast) var(--ease-standard);
}
.hero__dot:hover { background: rgba(255, 255, 255, 0.75); }
.hero__dot.is-active { width: 22px; border-radius: 4px; background: #fff; }
.hero__count {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: rgba(15, 13, 12, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.28);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  font-variant-numeric: tabular-nums;
}
.hero__count-sep { opacity: 0.55; }

@media (prefers-reduced-motion: reduce) {
  .hero__slide { transition: opacity 0.3s linear; }
  .hero__heading .word, .hero__sub .word { opacity: 1 !important; transition: none !important; }
}

/* ---------------------------------------------------------------------- */
/* Floating search card                                                    */
/* ---------------------------------------------------------------------- */
.hero-panel-wrap { position: relative; z-index: 5; margin-top: -126px; }

.hero-panel {
  padding: var(--space-6) var(--space-8) var(--space-5);
  background: var(--color-surface);
  color: var(--color-ink);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 60px -24px rgba(15, 13, 12, 0.5), 0 0 0 1px rgba(15, 13, 12, 0.06);
  --color-focus: var(--color-brand-dark);
}

/* Tabs: radios underneath (posts without JS); "Cars" is a link (hero.js). */
.hero-panel__segments { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }
.hero-panel__segment { position: relative; display: inline-flex; }
.hero-panel__segment input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.hero-panel__segment span {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 var(--space-4);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--color-text);
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.hero-panel__segment span svg { width: 16px; height: 16px; color: var(--color-text-soft); transition: color var(--dur-fast) var(--ease-standard); }
.hero-panel__segment span:hover { border-color: var(--color-ink); }
.hero-panel__segment input:checked + span,
.hero-panel__segment.is-active span { background: var(--color-ink); border-color: var(--color-ink); color: #fff; }
.hero-panel__segment input:checked + span svg,
.hero-panel__segment.is-active span svg { color: var(--color-brand); }
.hero-panel__segment input:focus-visible + span { outline: 2.5px solid var(--color-focus); outline-offset: 2px; }
.hero-panel__segment--link:focus-visible { outline: 2.5px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-pill); }

.hero-panel__fields {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1.2fr auto;
  gap: var(--space-4);
  align-items: end;
}
.hero-panel__fields[hidden] { display: none; }
.hero-panel__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hero-panel__field label { font-size: var(--fs-sm); font-weight: 700; color: var(--color-ink); }

/* Controls carry their icon inside the box. */
.hero-panel__control { position: relative; }
.hero-panel__control > svg,
.hero-panel__price-row > svg { width: 18px; height: 18px; color: var(--color-text-soft); flex-shrink: 0; pointer-events: none; }
.hero-panel__control > svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); }
.hero-panel__control select {
  width: 100%;
  height: var(--control-h);
  padding: 0 36px 0 42px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23726D66' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  appearance: none;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--color-ink);
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.hero-panel__price-row {
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--control-h);
  padding: 0 12px 0 14px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.hero-panel__price-row input {
  flex: 1;
  min-width: 0;
  height: auto;
  align-self: stretch;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--color-ink);
}
.hero-panel__price-row input:focus { outline: none; }
.hero-panel__price-row span { font-size: var(--fs-sm); color: var(--color-text-soft); }
.hero-panel__control select:hover,
.hero-panel__price-row:hover { border-color: var(--color-text-soft); }
.hero-panel__control select:focus,
.hero-panel__price-row:focus-within { outline: none; border-color: var(--color-brand-dark); box-shadow: 0 0 0 3px rgba(233, 122, 26, 0.22); }
.hero-panel__submit { white-space: nowrap; padding-inline: var(--space-8); }

.hero-panel__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-8);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.hero-panel__trust li { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 600; color: var(--color-text-soft); }
.hero-panel__trust svg { width: 16px; height: 16px; color: var(--color-verified); flex-shrink: 0; }

/* ---------------------------------------------------------------------- */
/* Transparent navbar over the hero, solid again once scrolled             */
/* ---------------------------------------------------------------------- */
body.has-hero-nav .navbar:not(.is-scrolled) {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  --color-focus: #fff;
}
body.has-hero-nav .navbar:not(.is-scrolled) .nav-link:not(.nav-cta),
body.has-hero-nav .navbar:not(.is-scrolled) .nav-icon-btn,
body.has-hero-nav .navbar:not(.is-scrolled) .hamburger,
body.has-hero-nav .navbar:not(.is-scrolled) .nav-auth a { color: #fff; }
body.has-hero-nav .navbar:not(.is-scrolled) .nav-link:hover,
body.has-hero-nav .navbar:not(.is-scrolled) .nav-link[aria-expanded="true"],
body.has-hero-nav .navbar:not(.is-scrolled) .nav-icon-btn:hover,
body.has-hero-nav .navbar:not(.is-scrolled) .hamburger:hover,
body.has-hero-nav .navbar:not(.is-scrolled) .nav-auth a:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
body.has-hero-nav .navbar:not(.is-scrolled) .nav-link.is-active { color: #fff; }
body.has-hero-nav .navbar:not(.is-scrolled) .nav-link.is-active::after { background: #fff; }
body.has-hero-nav .navbar:not(.is-scrolled) .brand__logo--dark { display: none; }
body.has-hero-nav .navbar:not(.is-scrolled) .brand__logo--light { display: block; }

/* ---------------------------------------------------------------------- */
/* Responsive                                                              */
/* ---------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .hero-panel__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-panel__submit { grid-column: 1 / -1; }
}
@media (max-width: 980px) {
  .hero { min-height: 600px; padding-block: clamp(112px, 22vh, 160px) 100px; }
  .hero__meta { bottom: 100px; }
  .hero-panel-wrap { margin-top: -72px; }
}
@media (max-width: 640px) {
  .hero { min-height: 540px; padding-block: 104px 112px; }
  .hero__heading { font-size: clamp(2rem, 1.5rem + 5vw, 2.5rem); }
  .hero__sub { font-size: var(--fs-base); max-width: 38ch; }
  /* Swipe covers slide navigation on phones. */
  .hero__arrow, .hero__meta { display: none; }
  .hero-panel-wrap { margin-top: -84px; }
  .hero-panel { padding: var(--space-5) var(--space-4) var(--space-4); border-radius: var(--radius-md); }
  /* One swipeable row of tabs instead of two wrapped lines. */
  .hero-panel__segments { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--space-4) * -1); padding-inline: var(--space-4); }
  .hero-panel__segments::-webkit-scrollbar { display: none; }
  .hero-panel__segment { flex-shrink: 0; }
  .hero-panel__fields { grid-template-columns: 1fr; }
  .hero-panel__trust { gap: var(--space-2) var(--space-5); }
}

/* ---------------------------------------------------------------------- */
/* Explore ZedHome: one tile per marketplace category                      */
/* ---------------------------------------------------------------------- */
.explore { padding-top: var(--space-10); padding-bottom: 0; }
.explore-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.explore-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.explore-tile:hover { border-color: var(--color-brand); box-shadow: var(--shadow-soft); transform: translateY(-2px); }
.explore-tile__icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--color-brand-50); color: var(--color-brand-dark); }
.explore-tile__icon svg { width: 22px; height: 22px; }
.explore-tile__body { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.explore-tile__body strong { font-family: var(--font-display); font-size: var(--fs-lead); color: var(--color-ink); }
.explore-tile__body span { font-size: var(--fs-md); color: var(--color-text-soft); line-height: 1.5; }
.explore-tile__meta { font-size: var(--fs-sm); font-weight: 700; color: var(--color-brand-dark); }
@media (max-width: 1024px) { .explore-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) {
  .explore-grid { grid-template-columns: 1fr; }
  .explore-tile { flex-direction: row; align-items: flex-start; }
  .explore-tile__meta { display: none; }
}

/* Type / trade pills under a section heading */
.type-strip { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); }
.type-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--color-ink);
  transition: border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}
.type-pill svg { width: 16px; height: 16px; color: var(--color-brand-dark); }
.type-pill span { font-weight: 600; color: var(--color-text-soft); }
.type-pill:hover { border-color: var(--color-brand); background: var(--color-brand-50); }
/* On phones the pills become one swipeable row instead of a five-line wall. */
@media (max-width: 640px) {
  .type-strip:not(.type-strip--center) { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); padding-bottom: 2px; }
  .type-strip:not(.type-strip--center)::-webkit-scrollbar { display: none; }
  .type-strip:not(.type-strip--center) .type-pill { flex-shrink: 0; white-space: nowrap; }
}

/* Join ZedHome: five audiences */

/* ==========================================================================
   13. News: three editorial cards in a flex row (wraps to 2, then 1).
   Photo, category + reading time, headline, excerpt, then a byline
   ("Posted by ZedHome Editorial Team", date) like a publication. The
   headline link is stretched over the card: one link per card.
   ========================================================================== */
.hn { background: var(--color-paper); }
.hn__head { align-items: flex-end; }
.hn__all { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; min-height: 46px; padding: 0 18px; border: 1px solid var(--color-border-strong); border-radius: 10px; background: var(--color-surface); font-size: var(--fs-md); font-weight: 700; color: var(--color-ink); transition: border-color 200ms, background-color 200ms, color 200ms; }
.hn__all svg { width: 16px; height: 16px; color: var(--color-brand-dark); transition: transform 300ms ease; }
.hn__all:hover { border-color: var(--color-ink); background: var(--color-ink); color: #fff; }
.hn__all:hover svg { color: var(--color-brand); transform: translateX(3px); }

.hn__cards { display: flex; flex-wrap: wrap; gap: 22px; }
.hn-card {
  position: relative; display: flex; flex-direction: column; flex: 1 1 calc((100% - 44px) / 3); min-width: 0; max-width: calc((100% - 44px) / 3);
  padding: 8px; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface);
  transition: border-color 250ms ease, box-shadow 250ms ease;
}
.hn-card:hover { border-color: var(--color-border-strong); box-shadow: 0 18px 40px -26px rgba(30, 27, 26, 0.35); }

.hn-card__media { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--color-border); }
.hn-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms ease; }
.hn-card:hover .hn-card__media img { transform: scale(1.04); }
.hn-card__media--empty { display: grid; place-items: center; background: var(--color-brand-50); }
.hn-card__media--empty .hn-card__placeholder { width: 96px; height: auto; opacity: 0.5; transform: none !important; }

.hn-card__body { display: flex; flex-direction: column; flex: 1; padding: 14px 10px 6px; }
.hn-card__kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.hn-card__cat { color: var(--color-brand-dark); }
.hn-card__read { display: inline-flex; align-items: center; gap: 10px; color: var(--color-text-soft); }
.hn-card__read::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: currentColor; }

.hn-card__title { margin: 0; font-size: 1.075rem; line-height: 1.35; letter-spacing: -0.02em; text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hn-card__title a { color: var(--color-ink); background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1.5px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size 350ms ease; }
.hn-card:hover .hn-card__title a { background-size: 100% 1.5px; }
.hn-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.hn-card__title a:focus-visible { outline: none; }
.hn-card:has(.hn-card__title a:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.hn-card__excerpt { margin: 8px 0 0; font-size: var(--fs-md); line-height: 1.6; color: var(--color-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.hn-card__byline { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 16px; }
.hn-card__avatar { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--color-surface); border: 1px solid var(--color-border); overflow: hidden; }
.hn-card__avatar img { width: 27px; height: 27px; object-fit: contain; }
.hn-card__who { display: grid; gap: 1px; min-width: 0; }
.hn-card__author { font-size: var(--fs-sm); font-weight: 700; color: var(--color-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hn-card__who time { font-size: var(--fs-xs); color: var(--color-text-soft); }

@media (max-width: 980px) {
  .hn-card { flex-basis: calc((100% - 22px) / 2); max-width: calc((100% - 22px) / 2); }
}
@media (max-width: 640px) {
  .hn__head { flex-direction: column; align-items: flex-start; }
  .hn-card { flex-basis: 100%; max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .hn-card, .hn-card__media img, .hn-card__title a, .hn__all svg { transition: none; }
  .hn-card:hover .hn-card__media img { transform: none; }
}

/* ==========================================================================
   11. Why ZedHome: copy + photo, then a ruled band of live figures
   (the shared partials/stats-band.php, styled in about.css).
   ========================================================================== */
.hw { padding-block: var(--section-pad-y); background: var(--color-surface); }
.hw .stats-band { margin-top: clamp(48px, 6vw, 80px); }
.hw__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.hw__heading { margin: 10px 0 0; font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; text-wrap: balance; }
.hw__heading span { color: var(--color-brand-dark); }
.hw__lead { max-width: 54ch; margin: 18px 0 0; font-size: var(--fs-lead); line-height: 1.65; color: var(--color-text); }

.hw__points { display: grid; margin: 28px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--color-border); }
.hw__points li { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--color-border); }
.hw__point-icon { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; background: var(--color-brand-50); color: var(--color-brand-dark); }
.hw__point-icon svg { width: 19px; height: 19px; }
.hw__points strong { display: block; margin-bottom: 3px; font-size: var(--fs-base); font-weight: 700; color: var(--color-ink); }
.hw__points li > span:last-child { font-size: var(--fs-md); line-height: 1.6; color: var(--color-text); }
.hw__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.hw__photo { position: relative; margin: 0; aspect-ratio: 4 / 4.4; border-radius: 18px; overflow: hidden; background: var(--color-border); }
.hw__photo img { width: 100%; height: 100%; object-fit: cover; }


@media (max-width: 980px) {
  .hw__grid { grid-template-columns: minmax(0, 1fr); }
  .hw__photo { aspect-ratio: 16 / 10; }
}
@media (max-width: 640px) {
  .hw__actions .btn { flex: 1 1 100%; justify-content: center; }
}

/* ==========================================================================
   16. Final CTA: dark rounded card, photo on the right fading into the copy
   on the left (the same design as "Need a hand?" on services.php, .sv-close).
   ========================================================================== */


.hc {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    padding-block: clamp(8px, 2vw, 30px);

    background:
        #161312
        url("../../assets/images/hero/travis.png")
        center center / cover
        no-repeat;
        background-attachment: fixed;
        color: #fff;    
       --color-focus: #fff;
}


/* Dark / RGB overlay across the entire section */
.hc::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgb(22 19 18 / 0.98) 0%,
            rgb(22 19 18 / 0.92) 22%,
            rgb(22 19 18 / 0.70) 42%,
            rgb(22 19 18 / 0.32) 65%,
            rgb(22 19 18 / 0.08) 82%,
            transparent 100%
        );
}


/* Subtle bottom depth */
.hc::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            transparent 55%,
            rgb(0 0 0 / 0.18) 100%
        );
}


/* =========================================================
   CONTENT
   ========================================================= */

.hc__card {
    position: relative;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    align-items: center;

    min-height: 0;

    background: transparent;

    color: #fff;

    border: 0;
    border-radius: 0;

    overflow: visible;

    box-shadow: none;
}


/* Remove old media layer completely */
.hc__media {
    display: none;
}


/* =========================================================
   COPY
   ========================================================= */

.hc__copy {
    align-self: center;

    max-width: 650px;

    padding:
        clamp(16px, 2vw, 28px)
        0;
}


.hc__copy .eyebrow {
    color: var(--color-brand);
}


.hc__copy .eyebrow::before {
    background: var(--color-brand);
}


.hc__copy h2 {
    max-width: 620px;

    margin: 10px 0 0;

    color: #fff;

    font-size:
        clamp(
            1.8rem,
            1.25rem + 2vw,
            2.8rem
        );

    font-weight: 600;

    line-height: 1.08;

    letter-spacing: -0.03em;

    text-wrap: balance;
}


.hc__copy p {
    max-width: 46ch;

    margin: 16px 0 0;

    font-size: var(--fs-lead);

    line-height: 1.65;

    color: rgb(255 255 255 / 0.76);
}


/* =========================================================
   BUTTONS
   ========================================================= */

.hc__actions {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top:
        clamp(
            20px,
            2.4vw,
            28px
        );
}


.hc__actions .btn {
    min-height: 48px;

    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        background-color 180ms ease,
        border-color 180ms ease;
}


.hc__actions .btn:hover {
    transform: translateY(-2px);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 980px) {

    .hc {
        background-position: center center;
    }


    .hc::before {
        background:
            linear-gradient(
                90deg,
                rgb(22 19 18 / 0.98) 0%,
                rgb(22 19 18 / 0.90) 35%,
                rgb(22 19 18 / 0.58) 65%,
                rgb(22 19 18 / 0.20) 100%
            );
    }


    .hc__card {
        grid-template-columns: 1fr;

        min-height: 0;
    }


    .hc__copy {
        padding-block: 24px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

    .hc {
        padding-block: 24px;

        background-position: 62% center;
    }


    .hc::before {
        background:
            linear-gradient(
                180deg,
                rgb(22 19 18 / 0.25) 0%,
                rgb(22 19 18 / 0.68) 35%,
                rgb(22 19 18 / 0.96) 78%,
                rgb(22 19 18 / 1) 100%
            );
    }


    .hc__card {
        min-height: 300px;
    }


    .hc__copy {
        align-self: end;

        padding-block: 32px 10px;
    }


    .hc__copy h2 {
        font-size: 2rem;
    }


    .hc__copy p {
        font-size: 0.95rem;
    }


    .hc__actions {
        flex-direction: column;

        align-items: stretch;
    }


    .hc__actions .btn {
        width: 100%;

        justify-content: center;
    }
}
/* ==========================================================================
   14. Join ZedHome: five account cards set on an arch.
   The arch is made only by height (no tilt): outer cards sit lowest,
   Professionals is the crown — taller, dark, first in reading order on
   small screens. Each card: a photograph with its role, a live figure from
   the marketplace, a heading, one line of copy, and a full-width action row.
   A soft glow behind the crown replaces decorative lines. On reveal the
   cards rise into their places from the centre out.
   ========================================================================== */
.jr { position: relative; overflow: hidden; }
.jr__stage { position: relative; margin-top: clamp(40px, 4vw, 60px); }
.jr__glow { position: absolute; left: 50%; top: 42%; width: min(980px, 90%); aspect-ratio: 2 / 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(233, 122, 26, 0.16), rgba(233, 122, 26, 0.05) 60%, transparent); pointer-events: none; }

.jr__cards { --lift: 72px; position: relative; display: flex; justify-content: center; align-items: stretch; gap: 16px; margin: 0; padding: 0 0 var(--lift); list-style: none; }

.jr-card {
  --y: 0px;
  position: relative; display: flex; flex-direction: column; flex: 0 1 236px; min-width: 0;
  padding: 6px; border-radius: 20px; background: var(--color-surface);
  box-shadow: 0 0 0 1px rgba(30, 27, 26, 0.07), 0 2px 4px rgba(30, 27, 26, 0.03), 0 24px 48px -30px rgba(30, 27, 26, 0.4);
  transform: translateY(var(--y));
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 300ms ease;
}
.jr-card--1, .jr-card--5 { --y: var(--lift); }
.jr-card--2, .jr-card--4 { --y: calc(var(--lift) * 0.36); }
.jr-card--3 { --y: 0px; }

.jr-card__media { position: relative; aspect-ratio: 4 / 3; border-radius: 15px; overflow: hidden; background: var(--color-border); }
.jr-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1); }
.jr-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.45) 100%); }
.jr-card__role { position: absolute; z-index: 1; left: 10px; bottom: 10px; padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.94); font-size: var(--fs-xs); font-weight: 600; color: var(--color-ink); }

.jr-card__body { display: flex; flex-direction: column; flex: 1; padding: 16px 12px 8px; }
.jr-card__stat { margin: 0 0 10px; font-size: var(--fs-sm); color: var(--color-text-soft); }
.jr-card__stat strong { margin-right: 2px; font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--color-brand-hover); }
.jr-card__title { margin: 0; font-size: 1.075rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.jr-card__text { flex: 1; margin: 6px 0 0; font-size: var(--fs-md); line-height: 1.6; color: var(--color-text); }
.jr-card__link { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; padding: 10px 6px 4px; border-top: 1px solid var(--color-border); font-size: var(--fs-md); font-weight: 600; color: var(--color-ink); }
.jr-card__arrow { display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--color-border); color: var(--color-ink); transition: background-color 250ms, border-color 250ms, color 250ms, transform 350ms cubic-bezier(0.22, 1, 0.36, 1); }
.jr-card__arrow svg { width: 14px; height: 14px; }
.jr-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* whole card is the link */
.jr-card__link:focus-visible { outline: none; }
.jr-card:has(.jr-card__link:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 3px; }

/* the crown */
.jr-card--featured { z-index: 2; flex-basis: 268px; background: var(--color-ink); box-shadow: 0 0 0 1px var(--color-ink), 0 40px 70px -34px rgba(30, 27, 26, 0.75); }
.jr-card--featured .jr-card__media { aspect-ratio: 4 / 3.4; }
.jr-card--featured .jr-card__role { background: var(--color-brand); color: var(--color-ink); }
.jr-card--featured .jr-card__stat { color: rgba(255, 255, 255, 0.6); }
.jr-card--featured .jr-card__stat strong { color: var(--color-brand); }
.jr-card--featured .jr-card__title { color: #fff; font-size: 1.2rem; }
.jr-card--featured .jr-card__text { color: rgba(255, 255, 255, 0.7); }
.jr-card--featured .jr-card__link { color: #fff; border-top-color: rgba(255, 255, 255, 0.14); }
.jr-card--featured .jr-card__arrow { background: var(--color-brand); border-color: var(--color-brand); color: var(--color-ink); }

/* hover */
.jr-card:hover { z-index: 3; transform: translateY(calc(var(--y) - 8px)); box-shadow: 0 0 0 1px rgba(30, 27, 26, 0.12), 0 36px 60px -30px rgba(30, 27, 26, 0.5); }
.jr-card--featured:hover { box-shadow: 0 0 0 1px var(--color-ink), 0 46px 80px -34px rgba(30, 27, 26, 0.85); }
.jr-card:hover .jr-card__media img { transform: scale(1.05); }
.jr-card:hover .jr-card__arrow { background: var(--color-ink); border-color: var(--color-ink); color: #fff; transform: translateX(3px); }
.jr-card--featured:hover .jr-card__arrow { background: #fff; border-color: #fff; color: var(--color-ink); }

/* reveal: each card rises into its place on the arch, centre first */
.jr[data-reveal] .jr-card { opacity: 0; transform: translateY(calc(var(--y) + 48px)); }
.jr[data-reveal].is-visible .jr-card { opacity: 1; transform: translateY(var(--y)); transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1), opacity 600ms ease, box-shadow 300ms ease; }
.jr[data-reveal].is-visible .jr-card--2, .jr[data-reveal].is-visible .jr-card--4 { transition-delay: 90ms; }
.jr[data-reveal].is-visible .jr-card--1, .jr[data-reveal].is-visible .jr-card--5 { transition-delay: 180ms; }
.jr[data-reveal].is-visible .jr-card:hover { transform: translateY(calc(var(--y) - 8px)); transition-delay: 0ms; }

/* tablet and phone: a grid, Professionals first and full width */
@media (max-width: 1100px) {
  .jr__glow { display: none; }
  .jr__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-bottom: 0; }
  .jr-card, .jr-card--1, .jr-card--2, .jr-card--4, .jr-card--5 { --y: 0px; }
  .jr-card--featured { order: -1; grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .jr-card--featured .jr-card__media { aspect-ratio: auto; min-height: 220px; }
  .jr-card--featured .jr-card__body { padding: 20px 18px 10px; }
}
@media (max-width: 560px) {
  .jr__cards { grid-template-columns: minmax(0, 1fr); }
  .jr-card--featured { display: flex; }
  .jr-card--featured .jr-card__media { aspect-ratio: 4 / 3; min-height: 0; }
  .jr-card:not(.jr-card--featured) .jr-card__media { aspect-ratio: 16 / 9; }
}
@media (prefers-reduced-motion: reduce) {
  .jr[data-reveal] .jr-card, .jr[data-reveal].is-visible .jr-card { opacity: 1; transform: translateY(var(--y)); transition: none; }
  .jr-card:hover, .jr[data-reveal].is-visible .jr-card:hover { transform: translateY(var(--y)); }
  .jr-card__media img, .jr-card__arrow { transition: none; }
  .jr-card:hover .jr-card__media img { transform: none; }
}

/* ==========================================================================
   6. Popular locations: portrait photo cards, 5 across on desktop
   (3 tablet, 2 phone). With more locations than fit, js/auto-slider.js
   moves the row one card right-to-left every 5 seconds, pausing on hover
   or keyboard focus. Without JS the cards sit in a static grid.
   ========================================================================== */
.lc__head p { margin-top: 8px; }
.lc__slider { --lc-cols: 5; --lc-gap: 18px; }
.lc__slider .auto-slider__viewport { overflow: hidden; overflow: clip; margin: -8px; padding: 8px; }
.lc__track { display: grid; grid-template-columns: repeat(var(--lc-cols), minmax(0, 1fr)); gap: var(--lc-gap); margin: 0; padding: 0; list-style: none; }
.lc__slider.is-ready .lc__track { display: flex; will-change: transform; }
.lc__slider.is-ready .auto-slider__item { flex: 0 0 calc((100% - (var(--lc-cols) - 1) * var(--lc-gap)) / var(--lc-cols)); min-width: 0; }

.lc-card { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 18px; overflow: hidden; isolation: isolate; background: var(--color-ink); color: #fff; box-shadow: 0 18px 40px -26px rgba(30, 27, 26, 0.55); }
.lc-card__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1); }
.lc-card__img--empty { display: grid; place-items: center; background: linear-gradient(160deg, #2b2522, #161312); color: rgba(255, 255, 255, 0.35); }
.lc-card__img--empty svg { width: 40px; height: 40px; }
.lc-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0) 45%, rgba(12, 10, 9, 0.86) 100%); transition: opacity 400ms ease; }

.lc-card__rank { position: absolute; top: 14px; left: 14px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.lc-card__body { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 10px; padding: 18px; }
.lc-card__name { font-family: var(--font-display); font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; }
.lc-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.22); }
.lc-card__count { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 500; color: rgba(255, 255, 255, 0.85); }
.lc-card__count svg { width: 14px; height: 14px; color: var(--color-brand); }
.lc-card__go { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); transition: background-color 300ms, color 300ms, transform 400ms cubic-bezier(0.22, 1, 0.36, 1); }
.lc-card__go svg { width: 15px; height: 15px; }

.lc-card:hover .lc-card__img { transform: scale(1.07); }
.lc-card:hover .lc-card__go { background: var(--color-brand); color: var(--color-ink); transform: rotate(-45deg); }
.lc-card:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

@media (max-width: 1100px) { .lc__slider { --lc-cols: 3; } }
@media (max-width: 640px)  { .lc__slider { --lc-cols: 2; --lc-gap: 12px; } .lc-card__body { padding: 14px; } .lc-card__rank { top: 10px; left: 10px; } }
@media (prefers-reduced-motion: reduce) {
  .lc-card__img, .lc-card__go { transition: none; }
  .lc-card:hover .lc-card__img { transform: none; }
}

/* ==========================================================================
   8. Just listed: freshness badge on the photo (.card__fresh). The slider
   itself is the shared .home-slider below.
   ========================================================================== */

.card__fresh { position: absolute; z-index: 2; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 9px; border-radius: 999px; background: rgba(22, 19, 18, 0.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: var(--fs-xs); font-weight: 600; color: #fff; }
.card__fresh-dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: #3ddc84; }
.card__fresh-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: jl-pulse 2s ease-out infinite; }
@keyframes jl-pulse { from { transform: scale(1); opacity: 0.7; } to { transform: scale(3); opacity: 0; } }

@media (prefers-reduced-motion: reduce) { .card__fresh-dot::after { animation: none; } }

/* ==========================================================================
   Homepage card sliders (Properties, Cars, Professionals, Just listed).
   4 cards across (3 tablet, 2 small tablet, 1 phone). js/auto-slider.js
   moves the row one card right-to-left every 5 seconds when there are more
   cards than fit, pausing on hover or focus; otherwise it stays a static row.
   ========================================================================== */
.home-slider { --hs-cols: 4; --hs-gap: 20px; }
.home-slider .auto-slider__viewport { overflow: hidden; overflow: clip; margin: -10px; padding: 10px; }
.home-slider__track { display: grid; grid-template-columns: repeat(var(--hs-cols), minmax(0, 1fr)); gap: var(--hs-gap); margin: 0; padding: 0; list-style: none; }
.home-slider.is-ready .home-slider__track { display: flex; will-change: transform; }
.home-slider.is-ready .auto-slider__item { flex: 0 0 calc((100% - (var(--hs-cols) - 1) * var(--hs-gap)) / var(--hs-cols)); min-width: 0; }
.home-slider__track .auto-slider__item > .card { height: 100%; }
@media (max-width: 1100px) { .home-slider { --hs-cols: 3; } }
@media (max-width: 760px)  { .home-slider { --hs-cols: 2; --hs-gap: 14px; } }
@media (max-width: 520px)  { .home-slider { --hs-cols: 1; } }

/* ==========================================================================
   15. FAQ: heading + help card on the left (sticky on desktop), numbered
   accordion on the right. Native <details name> keeps one answer open at a
   time; the open/close animates where the browser supports it.
   Typography matches the site: Bricolage Grotesque for the heading and the
   questions, Manrope for body text.
   ========================================================================== */
.hq { background: var(--color-paper); }
.hq__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.hq__side { position: sticky; top: 112px; }
.hq__side h2 { margin: 10px 0 0; font-family: var(--font-display); font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.025em; text-wrap: balance; }
.hq__intro { max-width: 40ch; margin: 14px 0 0; font-size: var(--fs-body); line-height: 1.65; color: var(--color-text); }

.hq__help { display: flex; gap: 14px; margin-top: 28px; padding: 20px; border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-surface); }
.hq__help-icon { display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; background: var(--color-brand-50); color: var(--color-brand-dark); }
.hq__help-icon svg { width: 20px; height: 20px; }
.hq__help-title { margin: 0; font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--color-ink); }
.hq__help-text { margin: 4px 0 0; font-size: var(--fs-md); line-height: 1.55; color: var(--color-text); }
.hq__help-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: var(--fs-md); font-weight: 600; color: var(--color-brand-dark); }
.hq__help-link svg { width: 15px; height: 15px; transition: transform 250ms ease; }
.hq__help-link:hover svg { transform: translateX(3px); }

.hq__list { border-top: 1px solid var(--color-border-strong); }
.hq-item { border-bottom: 1px solid var(--color-border-strong); }
.hq-item summary { display: grid; grid-template-columns: 44px minmax(0, 1fr) 36px; align-items: center; gap: 12px; padding: 22px 0; cursor: pointer; list-style: none; }
.hq-item summary::-webkit-details-marker { display: none; }
.hq-item summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: 8px; }
.hq-item__n { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-text-soft); transition: color 250ms; }
.hq-item__q { font-family: var(--font-display); font-size: clamp(1.05rem, 1rem + 0.25vw, 1.2rem); font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; color: var(--color-ink); transition: color 250ms; }
.hq-item__toggle { position: relative; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--color-border-strong); background: var(--color-surface); transition: background-color 300ms, border-color 300ms, transform 400ms cubic-bezier(0.22, 1, 0.36, 1); }
.hq-item__toggle::before, .hq-item__toggle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: var(--color-ink); transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1), background-color 300ms; }
.hq-item__toggle::after { transform: rotate(90deg); }
.hq-item summary:hover .hq-item__q { color: var(--color-brand-dark); }
.hq-item summary:hover .hq-item__toggle { border-color: var(--color-ink); }
.hq-item[open] .hq-item__n { color: var(--color-brand-dark); }
.hq-item[open] .hq-item__toggle { background: var(--color-brand); border-color: var(--color-brand); transform: rotate(180deg); }
.hq-item[open] .hq-item__toggle::after { transform: rotate(0deg); }
.hq-item__a p { max-width: 62ch; margin: 0; padding: 0 48px 24px 56px; font-size: var(--fs-body); line-height: 1.75; color: var(--color-text); }
@supports (interpolate-size: allow-keywords) {
  .hq__list { interpolate-size: allow-keywords; }
  .hq-item::details-content { height: 0; overflow: clip; opacity: 0; transition: height 420ms cubic-bezier(0.22, 1, 0.36, 1), opacity 320ms ease, content-visibility 420ms allow-discrete; }
  .hq-item[open]::details-content { height: auto; opacity: 1; }
}

@media (max-width: 900px) {
  .hq__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .hq__side { position: static; }
}
@media (max-width: 560px) {
  .hq-item summary { grid-template-columns: 30px minmax(0, 1fr) 32px; gap: 10px; padding: 18px 0; }
  .hq-item__toggle { width: 32px; height: 32px; }
  .hq-item__a p { padding: 0 0 20px 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .hq-item__toggle, .hq-item__toggle::before, .hq-item__toggle::after, .hq__help-link svg { transition: none; }
}

/* ==========================================================================
   Homepage polish (body.home only). A finishing layer over the sections
   above: one vertical rhythm, one heading scale, alternating section
   surfaces, calmer section heads, consistent card and image treatment,
   and two-way, direction-aware scroll reveals (js/home-motion.js).
   ========================================================================== */
.home { --home-pad: clamp(64px, 7.5vw, 112px); --home-ease: cubic-bezier(0.22, 1, 0.36, 1); }

/* ---- Rhythm: every band uses the same vertical padding ---- */
.home main > section.section,
.home main > section.hw { padding-block: var(--home-pad); }
.home main > section.explore { padding-top: clamp(36px, 4vw, 56px); padding-bottom: 0; }
.home main > section.explore + section.section { padding-top: clamp(56px, 6vw, 88px); }

/* ---- Surfaces: bands alternate paper / white, so each section reads on its
   own. The alternation is by position, so it stays correct when optional
   sections (cars, jobs, testimonials, news) are empty and left out. ---- */
.home main > section:nth-of-type(odd):not(.hero):not(.hc):not(.explore) { background: var(--color-paper); }
.home main > section:nth-of-type(even):not(.hero):not(.hc):not(.explore) { background: var(--color-surface); }
.home main > section.explore { background: var(--color-paper); }
.home main > section:not(.hero):not(.hc):not(.explore) + section:not(.hc) { border-top: 1px solid rgba(30, 27, 26, 0.05); }
.home main > section.explore + section { border-top: 0 !important; }

/* ---- Heading scale: one size and weight for every section title ---- */
.home .section-head h2,
.home .hw__heading,
.home .hq__side h2 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.2rem + 1.75vw, 2.5rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.home .section-head h2 { margin: 0; }
.home .section-head { align-items: flex-end; row-gap: 16px; margin-bottom: clamp(28px, 3.5vw, 44px); }
.home .section-head__copy { max-width: 640px; }
.home .section-head .eyebrow { margin-bottom: 14px; }
.home .section-head__copy p { max-width: 56ch; margin: 12px 0 0; font-size: var(--fs-lead); line-height: 1.6; color: var(--color-text); }
.home .section-head--center .section-head__copy { margin-inline: auto; }
.home .section-head--center .section-head__copy p { margin-inline: auto; }

/* "See all" links: quieter, sit on the heading's baseline row, with an
   underline that draws in rather than a gap that jumps. */
.home .section-head .link-more {
  position: relative; min-height: 40px; gap: 8px; margin-bottom: 2px;
  font-size: var(--fs-md); font-weight: 600; color: var(--color-ink);
  transition: color 200ms ease;
}
.home .section-head .link-more::after { content: ""; position: absolute; left: 0; right: 24px; bottom: 8px; height: 1.5px; background: var(--color-brand); transform: scaleX(0); transform-origin: left; transition: transform 350ms var(--home-ease); }
.home .section-head .link-more svg { color: var(--color-brand-dark); transition: transform 250ms ease; }
.home .section-head .link-more:hover { gap: 8px; color: var(--color-brand-dark); }
.home .section-head .link-more:hover::after { transform: scaleX(1); }
.home .section-head .link-more:hover svg { transform: translateX(3px); }

/* ---- Cards and images: one radius, one resting shadow, one hover ---- */
.home .card { border-radius: 16px; border-color: var(--color-border); box-shadow: 0 1px 2px rgba(30, 27, 26, 0.04); transition: box-shadow 300ms ease, border-color 300ms ease, transform 300ms var(--home-ease); }
.home .card:hover { border-color: var(--color-border-strong); box-shadow: 0 18px 40px -24px rgba(30, 27, 26, 0.35); transform: translateY(-2px); }
.home .card .card__media { overflow: hidden; }
.home .card .card__media img { transition: transform 700ms var(--home-ease); }
.home .card:hover .card__media img { transform: scale(1.035); }

/* ---- Buttons: consistent height, weight and press feedback ---- */
.home main .btn { min-height: 48px; font-weight: 600; letter-spacing: -0.005em; transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 250ms ease, transform 150ms ease; }
.home main .btn:active { transform: translateY(1px); }
.home main .btn--primary:hover { box-shadow: 0 10px 24px -12px rgba(217, 109, 15, 0.7); }

/* ---- Scroll reveal: restrained, two-way, direction-aware ---- */
.home [data-reveal] { transform: translateY(24px); transition: opacity 800ms var(--home-ease), transform 900ms var(--home-ease); }
.home [data-reveal][data-reveal-from="above"]:not(.is-visible) { transform: translateY(-24px); }
.home [data-reveal].is-visible { opacity: 1; transform: none; }
/* inside a section: heading first, content a beat later */
.home [data-reveal] > .container > .section-head { opacity: 0; transform: translateY(12px); transition: opacity 700ms var(--home-ease), transform 800ms var(--home-ease); }
.home [data-reveal].is-visible > .container > .section-head { opacity: 1; transform: none; transition-delay: 60ms; }
.home [data-stagger] > * { transition-duration: 700ms; transition-timing-function: var(--home-ease); }

@media (max-width: 640px) {
  .home .section-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .home .section-head .link-more { margin-bottom: 0; }
  .home .section-head--center { align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  .home [data-reveal], .home [data-reveal] > .container > .section-head { opacity: 1 !important; transform: none !important; transition: none; }
  .home .card, .home .card .card__media img, .home main .btn { transition: none; }
  .home .card:hover, .home .card:hover .card__media img { transform: none; }
}
/* News "All articles": same quiet text link as every other section head. */
.home .section-head .hn__all { min-height: 40px; padding: 0; border: 0; border-radius: 0; background: none; font-size: var(--fs-md); font-weight: 600; color: var(--color-ink); }
.home .section-head .hn__all:hover { background: none; color: var(--color-brand-dark); }
.home .section-head .hn__all svg { color: var(--color-brand-dark); }