/* Dark Horse Movers — shared site styles (companion to Tailwind CDN config) */
html { scroll-behavior: smooth; }
body { font-family: 'Montserrat', sans-serif; background: #070A18; }
.display { font-family: 'Bricolage Grotesque', sans-serif; }

/* Film-grain overlay */
.grain::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
}

/* Credential marquee */
.marquee { display: flex; width: max-content; animation: scroll 32s linear infinite; }
@keyframes scroll { to { transform: translateX(-50%); } }

.lift { transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.num-tab { font-variant-numeric: tabular-nums; }
.hairline { border-color: rgba(255,255,255,.12); }

/* Animated underline link */
.link-u { background-image: linear-gradient(#FF7B63,#FF7B63); background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .35s ease; }
.link-u:hover, .link-u:focus-visible { background-size: 100% 1px; }
.link-u[aria-current="page"] { background-size: 100% 1px; color: #FF7B63; }

::selection { background: #FF7B63; color: #070A18; }

/* Primary nav links — centered growing underline */
.nav-link { position: relative; color: rgba(244,241,234,.7); transition: color .25s ease; }
.nav-link:hover, .nav-link:focus-visible { color: #F4F1EA; }
.nav-link::after {
  content: ''; position: absolute; left: 50%; bottom: -7px; height: 2px; width: 0;
  background: #FF7B63; border-radius: 2px; transform: translateX(-50%); transition: width .3s ease;
}
.nav-link:hover::after, .nav-link:focus-visible::after { width: 100%; }
.nav-link[aria-current="page"] { color: #FF7B63; }
.nav-link[aria-current="page"]::after { width: 100%; }

/* Accessible focus rings */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #FF7B63; outline-offset: 3px; border-radius: 4px;
}

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* Form controls (used on contact + quote) */
.field {
  width: 100%; background: transparent; color: #F4F1EA;
  border: 1px solid rgba(255,255,255,.18); border-radius: 14px;
  padding: 14px 16px; font-size: 15px; transition: border-color .25s, background .25s;
}
.field::placeholder { color: rgba(244,241,234,.35); }
.field:hover { border-color: rgba(255,255,255,.3); }
.field:focus { outline: none; border-color: #FF7B63; background: rgba(255,255,255,.03); }
/* Keep native date picker controls legible on the dark field */
.field[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .55; cursor: pointer; }
.field[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.field[type="date"]:not(:focus):invalid,
.field[type="date"][value=""] { color: rgba(244,241,234,.45); }
.field-light {
  background: #fff; color: #070A18; border: 1px solid rgba(7,10,24,.15);
}
.field-light::placeholder { color: rgba(7,10,24,.35); }
.field-light:focus { border-color: #EC4621; background: #fff; }
.field.invalid, .field-light.invalid { border-color: #EC4621; }

label.req::after { content: ' *'; color: #FF7B63; }

/* ---- Quote wizard (quote.html) ---- */
/* Steps: only the active fieldset is visible */
.step { display: none; }
.step.active { display: block; }

/* Move-type selectable cards */
.select-card {
  position: relative; background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.14); border-radius: 18px;
  transition: border-color .25s, background .25s, transform .25s; cursor: pointer;
}
.select-card:hover { border-color: rgba(255,255,255,.32); transform: translateY(-2px); }
.select-card .check { opacity: 0; transform: scale(.7); transition: opacity .2s, transform .2s; }
.select-card.selected { border-color: #FF7B63; background: rgba(255,123,99,.08); }
.select-card.selected .check { opacity: 1; transform: scale(1); }

/* Home-size chips */
.size-chip {
  background: transparent; color: #F4F1EA;
  border: 1px solid rgba(255,255,255,.18); border-radius: 12px;
  transition: border-color .2s, background .2s, color .2s; cursor: pointer;
}
.size-chip:hover { border-color: rgba(255,255,255,.35); }
.size-chip.selected { background: #FF7B63; color: #070A18; border-color: #FF7B63; }

/* Service pills (multi-select) */
.check-pill {
  background: transparent; color: #F4F1EA;
  border: 1px solid rgba(255,255,255,.18); border-radius: 999px;
  transition: border-color .2s, background .2s, color .2s; cursor: pointer;
}
.check-pill:hover { border-color: rgba(255,255,255,.35); }
.check-pill.selected { background: #FF7B63; color: #070A18; border-color: #FF7B63; }

/* Bedroom-count buttons reuse .size-chip; service multi-select cards */
.service-card {
  position: relative; background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.14); border-radius: 16px;
  transition: border-color .25s, background .25s, transform .25s; cursor: pointer;
}
.service-card:hover { border-color: rgba(255,255,255,.32); }
.service-card .check { opacity: 0; transform: scale(.7); transition: opacity .2s, transform .2s; }
.service-card.selected { border-color: #FF7B63; background: rgba(255,123,99,.08); }
.service-card.selected .check { opacity: 1; transform: scale(1); }

/* Conditional field groups inside a wizard step */
.cond-group { display: none; }
.cond-group.active { display: block; animation: stepIn .4s cubic-bezier(.2,.8,.2,1); }
@keyframes stepIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cond-group.active { animation: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .lift { transition: none; }
}