/* =============================================================
   LONDON PREMIER PROPERTIES — COMPONENTS
   Page-level and feature-level components. Tokens & base styles
   live in styles.css; this file is everything built on top.
   ============================================================= */

/* ---------------------------------------------------------------
   1. HERO
   --------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--charcoal);
  color: var(--cream);
  overflow: hidden;
  padding-top: var(--header-h);
}
.hero-bg-image {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.hero-bg-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  opacity: 0.22;
}
.hero-grid {
  position: relative;
  z-index: 1;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--sp-2xl) var(--container-pad) var(--sp-3xl);
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,0.92fr);
  gap: var(--sp-2xl);
  align-items: center;
}
.hero-grid--single { grid-template-columns: minmax(0,1fr); }
.hero-grid--single .hero-copy { max-width: 62ch; }
.hero-copy .eyebrow { color: var(--gold); margin-bottom: var(--sp-md); }
.hero-copy h1 { color: var(--cream); }
.hero-copy h1 em { font-style: italic; color: var(--gold); }
.hero-copy .lede { color: rgba(247,244,236,0.72); margin-top: var(--sp-md); margin-bottom: var(--sp-lg); }
.hero-skyline-rule { margin-top: var(--sp-xl); }

/* --- Spotlight carousel --- */
.spotlight { position: relative; }
.spotlight-frame {
  position: relative;
  border: 1px solid var(--line-on-dark);
  padding: 10px;
}
.spotlight-track { position: relative; aspect-ratio: 5 / 4; overflow: hidden; }
.spotlight-slide {
  position: absolute; inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.04);
  transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out), visibility 0s linear 700ms;
}
.spotlight-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .spotlight-slide { transition: opacity 300ms linear; transform: none; }
}
.spotlight-slide .image-frame { aspect-ratio: auto; height: 100%; }

.spotlight-status {
  position: absolute; top: 1rem; left: 1rem;
  z-index: 2;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--charcoal);
  background: var(--gold);
  padding: 0.5em 0.9em;
}

.spotlight-info {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-md);
  padding-top: var(--sp-lg);
}
.spotlight-info-main .spotlight-location {
  display: flex; align-items: center; gap: 0.5em;
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.5rem;
}
.spotlight-info-main h3 { color: var(--cream); font-size: 1.5rem; margin-bottom: 0.4rem; }
.spotlight-meta { display: flex; gap: 1.1em; font-size: var(--fs-small); color: rgba(247,244,236,0.62); }
.spotlight-meta span { display: inline-flex; align-items: center; gap: 0.4em; }
.spotlight-price { text-align: right; }
.spotlight-price .amount { font-family: var(--font-serif); font-size: 1.7rem; color: var(--gold); display: block; }
.spotlight-price .period { font-size: var(--fs-micro); color: rgba(247,244,236,0.55); letter-spacing: 0.06em; text-transform: uppercase; }

.spotlight-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--sp-lg);
  gap: var(--sp-md);
}
.spotlight-arrows { display: flex; gap: 0.6rem; }
.spotlight-arrow {
  width: 44px; height: 44px;
  border: 1px solid var(--line-on-dark);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--cream);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.spotlight-arrow:hover { border-color: var(--gold); background: rgba(179,161,98,0.12); }
.spotlight-dots { display: flex; gap: 0.5rem; }
.spotlight-dots button {
  width: 22px; height: 2px;
  background: var(--line-on-dark);
  transition: background var(--dur-fast) var(--ease), width var(--dur-med) var(--ease);
}
.spotlight-dots button.is-active { background: var(--gold); width: 34px; }

/* ---------------------------------------------------------------
   2. FEATURED / PROPERTY GRID
   --------------------------------------------------------------- */
.property-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-lg) var(--sp-lg);
}
.property-grid--2 { grid-template-columns: repeat(2, 1fr); }

.property-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--ivory);
}
.property-card-media { position: relative; overflow: hidden; }
.property-card-media .image-frame img {
  transition: transform var(--dur-slow) var(--ease-out);
}
.property-card:hover .property-card-media .image-frame img { transform: scale(1.045); }
@media (prefers-reduced-motion: reduce) {
  .property-card:hover .property-card-media .image-frame img { transform: none; }
}

.status-pill {
  position: absolute; top: 0.9rem; left: 0.9rem; z-index: 2;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.5em 0.85em;
  background: rgba(21,19,14,0.82);
  color: var(--gold);
  backdrop-filter: blur(4px);
}
.status-pill--let { background: rgba(21,19,14,0.55); color: rgba(247,244,236,0.75); }
.status-pill--inline { position: static; display: inline-flex; }

.property-card-body { padding: var(--sp-md) var(--sp-3xs) 0; }
.property-card-loc {
  display: flex; align-items: center; gap: 0.4em;
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 0.6rem;
}
.property-card-title { font-size: 1.2rem; margin-bottom: 0.5rem; }
.property-card-title a::after { content: ''; position: absolute; inset: 0; }
.property-card-meta {
  display: flex; flex-wrap: wrap; gap: 0.35em 1em;
  font-size: var(--fs-small);
  color: var(--stone);
  padding-bottom: var(--sp-md);
  margin-bottom: var(--sp-md);
  border-bottom: 1px solid var(--line);
}
.property-card-meta span { display: inline-flex; align-items: center; gap: 0.4em; }
.property-card-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-sm); }
.property-card-price { font-family: var(--font-serif); font-size: 1.35rem; }
.property-card-price .period { font-family: var(--font-sans); font-size: var(--fs-micro); color: var(--stone); text-transform: uppercase; letter-spacing: 0.04em; }
.property-card-link { position: relative; font-size: var(--fs-small); font-weight: 600; display: inline-flex; align-items: center; gap: 0.4em; color: var(--charcoal); }
.property-card-link .icon { transition: transform var(--dur-med) var(--ease-out); }
.property-card:hover .property-card-link .icon { transform: translateX(4px); }

/* ---------------------------------------------------------------
   3. FILTER BAR
   --------------------------------------------------------------- */
.filter-bar {
  background: var(--ivory);
  border: 1px solid var(--line);
  padding: var(--sp-md);
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--sp-md);
  margin-bottom: var(--sp-xl);
}
.filter-field { display: flex; flex-direction: column; gap: 0.4rem; min-width: 150px; flex: 1 1 150px; }
.filter-field label { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone); }
.filter-field .select-wrap, .filter-field .input { width: 100%; }
.filter-field .input, .filter-field .select { background: var(--white); padding: 0.75em 0.9em; }
.filter-price-range { display: flex; align-items: center; gap: 0.5rem; flex: 1 1 220px; }
.filter-actions { display: flex; gap: 0.75rem; margin-left: auto; flex-shrink: 0; }

.filter-bar-mobile-trigger { display: none; }

.results-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  margin-bottom: var(--sp-lg);
}
.results-count { font-size: var(--fs-small); color: var(--stone); }
.results-count strong { color: var(--charcoal); }
.sort-field { display: flex; align-items: center; gap: 0.6rem; }
.sort-field label { font-size: var(--fs-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--stone); }
.sort-field .select { border: 1px solid var(--line); background: var(--white); padding: 0.55em 2.2em 0.55em 0.9em; font-size: var(--fs-small); }

.active-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--sp-lg); }
.filter-chip {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-size: var(--fs-micro);
  letter-spacing: 0.04em;
  padding: 0.5em 0.5em 0.5em 0.9em;
  background: var(--gold-pale);
  color: var(--gold-ink);
  border: 1px solid var(--gold-light);
}
.filter-chip button { display: grid; place-items: center; width: 16px; height: 16px; }

/* ---------------------------------------------------------------
   FAQ ACCORDION — native <details>/<summary>, no extra JS needed
   --------------------------------------------------------------- */
.faq-list { display: flex; flex-direction: column; gap: 0; margin-top: var(--sp-lg); }
.faq-item {
  border-bottom: 1px solid var(--line);
  padding-block: var(--sp-md);
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--charcoal);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  flex-shrink: 0;
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--gold-dark);
  transition: transform var(--dur-med) var(--ease-out);
}
.faq-item[open] summary::after { content: '\2212'; }
.faq-item p {
  margin-top: 0.85rem;
  color: var(--stone);
  font-size: 0.98rem;
  max-width: 68ch;
}

/* Mobile filter drawer */
.filter-drawer-backdrop {
  position: fixed; inset: 0; z-index: 220;
  background: rgba(21,19,14,0.5);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-med) var(--ease), visibility 0s linear var(--dur-med);
}
.filter-drawer-backdrop.is-open { opacity: 1; visibility: visible; transition: opacity var(--dur-med) var(--ease); }
.filter-drawer {
  position: fixed; right: 0; top: 0; bottom: 0; z-index: 221;
  width: min(400px, 90vw);
  background: var(--cream);
  padding: var(--sp-lg) var(--sp-lg) var(--sp-xl);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--dur-med) var(--ease-out);
  display: flex;
  flex-direction: column;
}
.filter-drawer.is-open { transform: translateX(0); }
.filter-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-lg); }
.filter-drawer-close { width: 40px; height: 40px; display: grid; place-items: center; }
.filter-drawer .field { margin-bottom: var(--sp-lg); }
.filter-drawer-footer { margin-top: auto; padding-top: var(--sp-lg); display: flex; gap: var(--sp-sm); }

/* ---------------------------------------------------------------
   4. PROPERTY DETAIL — gallery & lightbox
   --------------------------------------------------------------- */
.detail-hero { padding-top: var(--header-h); background: var(--charcoal); color: var(--cream); }
.section--dark .empty-state p, .section--soft .empty-state p, .detail-hero .empty-state p { color: rgba(247,244,236,0.65); }
.detail-status-row {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--sp-lg) var(--container-pad) 0;
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  flex-wrap: wrap;
}
.detail-breadcrumb { font-size: var(--fs-micro); color: rgba(247,244,236,0.55); display: flex; gap: 0.5em; align-items: center; }
.detail-breadcrumb a { color: rgba(247,244,236,0.8); }
.detail-breadcrumb a:hover { color: var(--gold); }

.gallery {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--sp-lg) var(--container-pad) var(--sp-xl);
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 10px;
}
.gallery-main { position: relative; aspect-ratio: 16/10; overflow: hidden; cursor: zoom-in; }
.gallery-main .image-frame { aspect-ratio: auto; height: 100%; }
.gallery-main img { transition: transform 600ms var(--ease-out); }
.gallery-main:hover img { transform: scale(1.02); }
.gallery-count {
  position: absolute; bottom: 1rem; right: 1rem; z-index: 2;
  font-size: var(--fs-micro); letter-spacing: 0.06em;
  background: rgba(21,19,14,0.65); color: var(--cream);
  padding: 0.5em 0.9em;
}
.gallery-thumbs { display: grid; grid-template-rows: repeat(4, 1fr); gap: 10px; }
.gallery-thumb { position: relative; overflow: hidden; border: 2px solid transparent; }
.gallery-thumb.is-active { border-color: var(--gold); }
.gallery-thumb .image-frame { aspect-ratio: 4/3; height: 100%; }
.gallery-thumb-more {
  position: absolute; inset: 0; z-index: 2;
  background: rgba(21,19,14,0.62);
  color: var(--cream);
  display: grid; place-items: center;
  font-size: 1.1rem; font-family: var(--font-serif);
}

.lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(21,19,14,0.96);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-med) var(--ease), visibility 0s linear var(--dur-med);
}
.lightbox.is-open { opacity: 1; visibility: visible; transition: opacity var(--dur-med) var(--ease); }
.lightbox-stage { position: relative; width: min(1200px, 92vw); max-height: 86vh; }
.lightbox-stage .image-frame { aspect-ratio: 16/10; }
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: fixed;
  width: 50px; height: 50px;
  border: 1px solid var(--line-on-dark);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--cream);
  transition: border-color var(--dur-fast) var(--ease);
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { border-color: var(--gold); }
.lightbox-close { top: 1.5rem; right: 1.5rem; }
.lightbox-prev { left: 1.5rem; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 1.5rem; top: 50%; transform: translateY(-50%); }
.lightbox-caption { position: fixed; bottom: 1.75rem; left: 50%; transform: translateX(-50%); font-size: var(--fs-small); color: rgba(247,244,236,0.7); }

/* ---------------------------------------------------------------
   5. PROPERTY DETAIL — info layout
   --------------------------------------------------------------- */
.detail-layout {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 0 var(--container-pad) var(--sp-3xl);
  display: grid;
  grid-template-columns: minmax(0,1fr) 380px;
  gap: var(--sp-2xl);
  align-items: start;
}
.detail-main > * + * { margin-top: var(--sp-2xl); }
.detail-title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-md); flex-wrap: wrap; }
.detail-title-row .detail-loc { display: flex; align-items: center; gap: 0.5em; color: var(--gold-ink); font-size: var(--fs-small); letter-spacing: 0.04em; margin-bottom: 0.6rem; }
.detail-price-block { text-align: right; }
.detail-price-block .amount { font-family: var(--font-serif); font-size: 2rem; }
.detail-price-block .period { display: block; font-size: var(--fs-micro); color: var(--stone); text-transform: uppercase; letter-spacing: 0.06em; }
.detail-price-block .pw { font-size: var(--fs-small); color: var(--stone-soft); }

.spec-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xl);
  padding: var(--sp-lg) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.spec-item { display: flex; flex-direction: column; gap: 0.3rem; }
.spec-item .icon { color: var(--gold-ink); margin-bottom: 0.2rem; }
.spec-item .val { font-family: var(--font-serif); font-size: 1.3rem; }
.spec-item .lbl { font-size: var(--fs-micro); color: var(--stone); text-transform: uppercase; letter-spacing: 0.08em; }

.feature-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 1.5rem; }
.feature-list li { display: flex; align-items: center; gap: 0.7em; font-size: 0.95rem; color: var(--charcoal); }
.feature-list .icon { color: var(--gold); width: 16px; height: 16px; }

.map-placeholder {
  aspect-ratio: 16/7;
  position: relative;
  background:
    linear-gradient(var(--line-soft) 1px, transparent 1px) 0 0/32px 32px,
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px) 0 0/32px 32px,
    var(--ivory);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  border: 1px solid var(--line);
}
.map-placeholder .icon { width: 26px; height: 26px; color: var(--gold-ink); }
.map-placeholder strong { font-size: var(--fs-small); }
.map-placeholder span { font-size: var(--fs-micro); color: var(--stone); max-width: 34ch; }

/* Enquiry side panel */
.enquiry-panel {
  position: sticky;
  top: calc(var(--header-h-scrolled) + var(--sp-md));
  background: var(--ivory);
  border-top: 3px solid var(--gold);
  padding: var(--sp-lg);
  box-shadow: var(--shadow-2);
}
.enquiry-panel h3 { margin-bottom: 0.4rem; }
.enquiry-panel .stone-text { font-size: var(--fs-small); margin-bottom: var(--sp-md); }
.enquiry-ref {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--gold-pale);
  border: 1px solid var(--gold-light);
  padding: 0.75em 1em;
  font-size: var(--fs-small);
  margin-bottom: var(--sp-md);
}
.enquiry-ref span:first-child { color: var(--gold-ink); text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--fs-micro); }
.enquiry-ref span:last-child { font-weight: 600; }
.enquiry-call { display: flex; align-items: center; gap: var(--sp-sm); margin-top: var(--sp-md); padding-top: var(--sp-md); border-top: 1px solid var(--line); }
.enquiry-call .icon { color: var(--gold-ink); }
.enquiry-call a { font-weight: 600; }

/* ---------------------------------------------------------------
   6. LANDLORD / LET YOUR PROPERTY
   --------------------------------------------------------------- */
.benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-lg); }
.benefit-item { padding-top: var(--sp-md); border-top: 1px solid var(--line-on-dark); }
.section:not(.section--dark):not(.section--soft) .benefit-item { border-top-color: var(--line); }
.benefit-item .icon-mark { display: inline-flex; width: 34px; height: 34px; font-size: 34px; color: var(--gold); margin-bottom: var(--sp-md); }
.benefit-item .icon-mark .icon { width: 1em; height: 1em; stroke-width: 1.3; }
.benefit-item .icon-mark img { width: 100%; height: 100%; object-fit: contain; }
.benefit-item .icon-mark--md { width: 42px; height: 42px; }
.benefit-item .icon-mark--lg { width: 58px; height: 58px; }
.benefit-item h3 { font-size: 1.3rem; margin-bottom: 0.5rem; }
.benefit-item p { color: var(--stone); font-size: 1.02rem; }
.section--dark .benefit-item p, .section--soft .benefit-item p { color: rgba(247,244,236,0.65); }

.process-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-lg); }
.process-step { position: relative; }
.process-step .skyline-rule { margin-bottom: var(--sp-md); }
.process-step h3 { font-size: 1.2rem; margin-bottom: 0.4rem; }
.process-step p { font-size: 0.98rem; color: var(--stone); }

.appraisal-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2xl);
  align-items: center;
}
.appraisal-copy .lede { color: rgba(247,244,236,0.72); }

/* ---------------------------------------------------------------
   7. ABOUT
   --------------------------------------------------------------- */
.about-lead-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--sp-2xl);
  align-items: center;
}
.value-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-lg) var(--sp-2xl); }
.value-item { display: flex; gap: var(--sp-md); }
.value-item .skyline-rule { margin-top: 0.35rem; }
.value-item h3 { font-size: 1.1rem; margin-bottom: 0.4rem; }
.value-item p { color: var(--stone); font-size: 0.95rem; }

.testimonial-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-lg); }
.testimonial-card { padding: var(--sp-lg); background: var(--ivory); border-left: 2px solid var(--gold); }
.testimonial-card p { font-family: var(--font-serif); font-size: 1.2rem; font-style: italic; line-height: 1.5; margin-bottom: var(--sp-md); }
.testimonial-card cite { font-style: normal; font-size: var(--fs-small); color: var(--stone); font-weight: 600; }

/* ---------------------------------------------------------------
   8. CONTACT
   --------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--sp-2xl); align-items: start; }
.contact-info-item { display: flex; gap: var(--sp-md); padding: var(--sp-lg) 0; border-bottom: 1px solid var(--line); }
.contact-info-item:first-child { padding-top: 0; }
.contact-info-item .icon { color: var(--gold-ink); width: 22px; height: 22px; margin-top: 0.2rem; }
.contact-info-item h3 { font-size: 1rem; font-family: var(--font-sans); font-weight: 600; margin-bottom: 0.35rem; }
.contact-info-item p, .contact-info-item a { color: var(--stone); font-size: 0.95rem; }
.contact-hours { display: flex; justify-content: space-between; font-size: 0.92rem; padding-block: 0.3rem; color: var(--stone); }
.contact-hours strong { color: var(--charcoal); font-weight: 500; }
.contact-form-wrap { background: var(--ivory); padding: var(--sp-xl); }

/* ---------------------------------------------------------------
   9. CTA BAND
   --------------------------------------------------------------- */
.cta-band { text-align: center; }
.cta-band .skyline-rule { justify-content: center; margin-bottom: var(--sp-md); }
.cta-band h2 { max-width: 20ch; margin-inline: auto; }
.cta-band .lede { margin-inline: auto; text-align: center; margin-top: var(--sp-md); margin-bottom: var(--sp-lg); }
.cta-band .btn-row { justify-content: center; }

/* ---------------------------------------------------------------
   10. HOME — split feature band (about/let teaser)
   --------------------------------------------------------------- */
.split-band { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2xl); align-items: center; }
.split-band-media { position: relative; }
.split-band-media .image-frame { aspect-ratio: 4/5; }
.split-band-copy .btn-row { margin-top: var(--sp-lg); }
.stat-row { display: flex; gap: var(--sp-2xl); margin-top: var(--sp-xl); padding-top: var(--sp-lg); border-top: 1px solid var(--line); }
.section--dark .stat-row, .section--soft .stat-row { border-top-color: var(--line-on-dark); }