/* Woodhouse Search — custom styles beyond Tailwind utilities */

[x-cloak] { display: none !important; }

::selection { background: #C24A2A; color: #FAF7F2; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Fraunces optical sizing / softness */
.font-serif { font-variation-settings: "SOFT" 40, "WONK" 0; }

/* ---- Wordmark (HTML-rendered, matches brand SVG) ---- */
.wordmark-name {
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}
.wordmark-sub {
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ---- GSAP reveal helpers ----
   Elements are hidden by JS (progressive enhancement), so no-JS users
   and reduced-motion users always see content. */

/* ---- Client logo marquee ---- */
.marquee { overflow: hidden; }
.marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marquee 42s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; }
  .marquee-track > .marquee-dup { display: none; }
}

/* ---- Media bands ---- */
.band-media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.parallax-img {
  position: absolute; left: 0; right: 0; top: -12%; height: 124%;
  width: 100%; object-fit: cover; will-change: transform;
}

/* ---- Step sequence progress line ---- */
.step-line {
  position: absolute; left: 27px; top: 0; bottom: 0; width: 1px;
  background: #E5DED2;
}
.step-line-fill {
  position: absolute; left: 27px; top: 0; width: 1px; height: 100%;
  background: #C24A2A;
  transform-origin: top;
  transform: scaleY(0);
}
@media (min-width: 768px) {
  .step-line, .step-line-fill { left: 39px; }
}

/* ---- Ghost numerals ---- */
.ghost-num {
  font-family: Fraunces, Georgia, serif;
  font-weight: 300;
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1px rgba(194, 74, 42, 0.35);
}

/* ---- Accordion transition ---- */
.acc-body { overflow: hidden; }