/* ==========================================================================
   Crystal Hair — extras.css
   Additive styles on top of the design system (main.css). Nothing here
   renames or overrides contract classes — hero slider (contract block lives
   in main.css §5), house elevation sections (marquee, stats, process, FAQ,
   CTA strip, quote carousel, work row), gallery lightbox, scroll reveal.
   ========================================================================== */

/* ---- Rhythm helpers used by templates ------------------------------------ */
.section-follow { margin-top: var(--sp-8); }
.text-follow { margin-top: var(--sp-4); }
.error-page .lead { margin-inline: auto; text-align: center; }

.frame-img--wide { aspect-ratio: 3 / 2; }

/* ---- Trust marquee (home, under the hero slider) --------------------------- */
.trust-strip {
  background: var(--ivory);
  border-block: 1px solid var(--line);
  padding-block: var(--sp-5);
  overflow: hidden;
}
.trust-track {
  display: flex; width: max-content;
  animation: trust-scroll 40s linear infinite;
}
.trust-strip:hover .trust-track { animation-play-state: paused; }
.trust-group { display: flex; align-items: center; list-style: none; }
.trust-group li {
  display: flex; align-items: center; gap: var(--sp-5);
  padding-right: var(--sp-5);
  font-size: var(--fs-caption); font-weight: 500; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-soft); white-space: nowrap;
}
.trust-group li::before {
  content: ""; width: 6px; height: 6px; background: var(--rose-400);
  transform: rotate(45deg); flex: none;
}
@keyframes trust-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .trust-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
  .trust-group[aria-hidden="true"] { display: none; }
}

/* ---- Stats band (home, after the marquee) ------------------------------------ */
.stats-band { display: grid; gap: var(--sp-7); align-items: center; }
.stats-intro { display: grid; gap: var(--sp-4); justify-items: start; }
.stats-grid { display: grid; gap: var(--sp-5); grid-template-columns: 1fr 1fr; }
.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--line);
  border-top: 2px solid var(--rose-400);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  display: grid; gap: var(--sp-2); align-content: center; justify-items: start;
}
.stat-number {
  font-family: var(--font-display); font-size: var(--fs-display);
  font-weight: 700; line-height: 1; color: var(--ink);
}
.stat-label {
  font-size: var(--fs-caption); font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted);
}
/* Three verifiable stats only — the third spans the row so the band keeps
   its two-column rhythm instead of squeezing three cards side by side. */
.stat-card--wide { grid-column: 1 / -1; }
@media (min-width: 960px) {
  .stats-band { grid-template-columns: 0.9fr 1.1fr; gap: var(--sp-9); }
}

/* ---- Numbered process — "Your Visit, Step by Step" --------------------------- */
.process-grid { display: grid; gap: var(--sp-5); }
@media (min-width: 580px) { .process-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .process-grid { grid-template-columns: repeat(4, 1fr); } }
.process-card {
  background: var(--color-surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-6);
  display: grid; gap: var(--sp-3); align-content: start;
  transition: transform var(--t-slow), box-shadow var(--t-slow);
}
.process-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.process-card .process-num {
  display: flex; align-items: center; gap: var(--sp-3);
  font-family: var(--font-display); font-size: 2.5rem; font-weight: 600;
  line-height: 1; color: var(--rose-200);
}
.process-num::after {
  content: ""; width: 9px; height: 9px; background: var(--rose-400);
  transform: rotate(45deg); flex: none;
}
.process-card h3 { font-size: var(--fs-h3); font-weight: 600; color: var(--ink); }
.process-card p { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--color-muted); }
/* Centre-card elevation: the house gesture, on "Customize". */
.process-card--lead { background: var(--rose-700); border-color: var(--rose-700); }
.process-card--lead:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.process-card--lead h3 { color: var(--on-dark); }
.process-card--lead p { color: var(--on-dark); }
.process-card--lead .process-num { color: var(--rose-200); }
.process-card--lead .process-num::after { background: var(--rose-200); }
@media (min-width: 960px) {
  .process-card--lead { transform: translateY(-12px); }
  .process-card--lead:hover { transform: translateY(-16px); }
}

/* ---- Split FAQ (contact) ------------------------------------------------------- */
.faq-split { display: grid; gap: var(--sp-7); align-items: start; }
.faq-intro { display: grid; gap: var(--sp-4); justify-items: start; }
.faq-lead-card {
  background: var(--rose-700); border-radius: var(--r-md);
  padding: var(--sp-6); color: var(--on-dark);
  display: grid; gap: var(--sp-3); justify-items: start;
}
.faq-index {
  font-family: var(--font-display); font-size: 2.5rem; font-weight: 600;
  line-height: 1; color: var(--rose-200);
}
.faq-question {
  font-family: var(--font-display); font-size: var(--fs-h3);
  font-weight: 600; color: #fff;
}
.faq-answer { font-size: var(--fs-small); line-height: var(--lh-body); }
.faq-lead-card .faq-answer { color: var(--on-dark); opacity: 0.9; }
.faq-item { border-bottom: 1px solid var(--line-strong); }
.faq-item summary {
  display: flex; align-items: center; gap: var(--sp-4);
  min-height: 44px; padding-block: var(--sp-3); cursor: pointer;
  font-size: var(--fs-body); font-weight: 500; color: var(--ink);
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-num {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 600;
  color: var(--rose-600); flex: none; min-width: 2.2rem;
}
.faq-item summary::after {
  content: ""; width: 8px; height: 8px; background: var(--rose-400);
  transform: rotate(45deg); flex: none; margin-left: auto;
  transition: transform var(--t-slow);
}
.faq-item[open] summary::after { transform: rotate(225deg); }
.faq-item .faq-answer { color: var(--color-muted); padding-bottom: var(--sp-5); }
@media (min-width: 960px) {
  .faq-split { grid-template-columns: 0.9fr 1.1fr; gap: var(--sp-9); }
}

/* ---- CTA chip strip (before the footer) ------------------------------------------ */
.cta-strip .container { display: grid; gap: var(--sp-6); align-items: center; }
.cta-strip .cta-intro { display: grid; gap: var(--sp-3); justify-items: start; }
@media (min-width: 960px) {
  .cta-strip .container { grid-template-columns: 1.2fr 1fr; }
  .cta-strip .actions-row { justify-content: flex-end; }
}

/* ---- Quote carousel (testimonials) + shared snap arrows ---------------------------- */
.quote-head { position: relative; }
.quote-nav {
  display: flex; gap: var(--sp-2); justify-content: center;
  margin-top: var(--sp-5);
}
@media (min-width: 960px) {
  .quote-nav { position: absolute; right: 0; top: 6px; margin-top: 0; }
}
.quote-carousel {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.quote-carousel::-webkit-scrollbar { display: none; }
.quote-carousel .testimonial {
  position: relative; isolation: isolate;
  flex: 0 0 100%; max-width: 100%; scroll-snap-align: center;
  padding-top: var(--sp-7);
}
.quote-carousel .testimonial::before {
  content: "\201C";
  position: absolute; left: 50%; top: -0.15em; transform: translateX(-50%);
  z-index: -1;
  font-family: var(--font-script); font-size: 5rem; line-height: 1;
  color: var(--rose-200); pointer-events: none;
}

/* ---- Portfolio featured row (uniform 4:3 snap cards) -------------------------------- */
.work-head { position: relative; }
.work-row {
  display: flex; gap: var(--sp-4); overflow-x: auto;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.work-row::-webkit-scrollbar { display: none; }
.work-row .gallery-item {
  flex: 0 0 78%; margin-bottom: 0; scroll-snap-align: center;
}
.work-row .gallery-img { aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 960px) {
  .work-row .gallery-item { flex-basis: calc((100% - 2 * var(--sp-4)) / 3); }
}

/* ---- Contact page quick branch summary ------------------------------------- */
.branch-quick {
  display: grid; gap: var(--sp-5); align-content: start;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
}
.branch-quick .branch-name { font-size: var(--fs-h3); }
.branch-quick .branch-lines { font-size: var(--fs-small); color: var(--color-muted); line-height: 1.7; }
.branch-quick .branch-lines a { color: var(--ink-soft); font-weight: 500; }
.branch-quick .branch-lines a:hover { color: var(--rose-700); }
.branch-quick .branch-hours {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-caption); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--rose-700);
}
@media (min-width: 960px) {
  .branch-quick { position: sticky; top: calc(var(--header-h) + var(--sp-4)); }
}

/* ---- Gallery lightbox -------------------------------------------------------- */
.lightbox {
  position: fixed; inset: 0; z-index: var(--z-nav);
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-6);
  background: rgba(23, 17, 15, 0.92);
  border: 0;
}
.lightbox:not([open]) { display: none; }
.lightbox figure {
  display: grid; gap: var(--sp-3);
  max-width: min(920px, 92vw); max-height: 86vh; margin: 0;
}
.lightbox img {
  max-width: 100%; max-height: 74vh; width: auto; height: auto;
  margin-inline: auto; border-radius: var(--r-md);
}
.lightbox figcaption {
  color: var(--on-dark); font-size: var(--fs-small); text-align: center;
}
.lightbox-close {
  position: absolute; top: var(--sp-4); right: var(--sp-4);
  width: 44px; height: 44px; border-radius: 50%;
  background: transparent; border: 1px solid var(--on-dark-line);
  color: var(--on-dark); font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.lightbox-close:hover { background: var(--rose-700); border-color: var(--rose-700); }
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255, 253, 251, 0.1); border: 1px solid var(--on-dark-line);
  color: var(--on-dark); font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.lightbox-nav:hover { background: var(--rose-700); border-color: var(--rose-700); }
.lightbox-nav--prev { left: var(--sp-4); }
.lightbox-nav--next { right: var(--sp-4); }

/* ---- Scroll reveal (JS adds .is-revealed when in view) -----------------------
   Gated on html.js so content stays visible without JavaScript. */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 560ms ease, transform 560ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  html.js [data-reveal].is-revealed { opacity: 1; transform: none; }
  /* Failsafe (main.js adds .reveal-force on <html> ~1.75s after load, and on
     beforeprint): non-scrolling renders must never capture hidden content. */
  html.js.reveal-force [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none;
  }
}