/* ─── Stallion Construction — shared styles ──────────────────────── */

:root {
  --color-primary: #111111;
  --color-primary-light: #2a2a2a;
  --color-secondary: #4a4a4a;
  --color-accent: #c9a96e;
  --color-accent-dark: #b08d52;
  --color-background: #f8f7f4;
  --color-background-dark: #f0efe9;
  --color-surface: #ffffff;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  background: var(--color-background);
  color: var(--color-primary);
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}
body { margin: 0; padding: 0; }

/* ─── Buttons ─────────────────────────────────────────────────────── */
.btn-accent { background-color: var(--color-accent); color: var(--color-primary); transition: background-color .2s; }
.btn-accent:hover { background-color: var(--color-accent-dark); }
.btn-dark { background-color: var(--color-primary); color: #fff; transition: background-color .2s; }
.btn-dark:hover { background-color: var(--color-primary-light); }
.btn-outline-white { border: 1px solid rgba(255,255,255,.4); color: rgba(255,255,255,.85); transition: border-color .2s, color .2s; }
.btn-outline-white:hover { border-color: var(--color-accent); color: var(--color-accent); }
.btn-outline-dark { border: 1px solid rgba(17,17,17,.2); color: var(--color-primary); transition: border-color .2s, color .2s; }
.btn-outline-dark:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* ─── Nav + footer links ──────────────────────────────────────────── */
.nav-link-dark { color: rgba(255,255,255,.65); transition: color .2s; position: relative; }
.nav-link-dark:hover { color: #fff; }
.nav-link-dark.is-active { color: #fff; }
.nav-link-dark.is-active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -8px; height: 1px;
  background: var(--color-accent);
}
.footer-link { color: rgba(255,255,255,.55); transition: color .2s; }
.footer-link:hover { color: #fff; }
.footer-legal-link { color: rgba(255,255,255,.35); transition: color .2s; }
.footer-legal-link:hover { color: rgba(255,255,255,.65); }

/* ─── Cards ───────────────────────────────────────────────────────── */
.scope-card { border: 1px solid rgba(17,17,17,.08); background: #fff; transition: border-color .25s, transform .25s; }
.scope-card:hover { border-color: var(--color-accent); transform: translateY(-2px); }
.service-card {
  border: 1px solid rgba(17,17,17,.12); background: #fff;
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.service-card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 12px 40px rgba(17,17,17,.1);
  transform: translateY(-4px);
}
.area-card { border: 1px solid rgba(17,17,17,.12); background: #fff; transition: border-color .2s, box-shadow .2s; }
.area-card:hover { border-color: var(--color-accent); box-shadow: 0 4px 20px rgba(17,17,17,.07); }

.testimonial-card { transition: box-shadow .25s, transform .25s; }
.testimonial-card:hover { box-shadow: 0 12px 40px rgba(17,17,17,.08); transform: translateY(-3px); }

/* ─── Image hovers ────────────────────────────────────────────────── */
.proof-img, .area-image, .feature-image { transition: transform .6s ease; }
.proof-card:hover .proof-img, .area-card:hover .area-image, .feature-card:hover .feature-image { transform: scale(1.04); }

/* ─── Arrow link ──────────────────────────────────────────────────── */
.arrow-link { display: inline-flex; align-items: center; gap: .5rem; }
.arrow-link .arrow { display: inline-block; transition: transform .2s; }
.arrow-link:hover .arrow { transform: translateX(4px); }

/* ─── Featured Work ───────────────────────────────────────────────── */
.featured-work-card { display: block; overflow: hidden; position: relative; }

/* ─── Scroll reveal ───────────────────────────────────────────────── */
.reveal-on-scroll { opacity: 0; transform: translateY(28px); transition: opacity .65s ease, transform .65s ease; }
.reveal-visible { opacity: 1; transform: translateY(0); }

/* ─── FAQ ─────────────────────────────────────────────────────────── */
.faq-plus { transition: transform .2s; }

/* ─── Page route transitions ──────────────────────────────────────── */
.route-page { animation: route-in .55s cubic-bezier(.2,.65,.2,1); }
@keyframes route-in {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: translateX(0); }
}
.route-out { animation: route-out .25s cubic-bezier(.4,.2,.6,1) forwards; }
@keyframes route-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-28px); }
}

/* ─── Hero slideshow (homepage) ───────────────────────────────────── */
.hero-slide { opacity: 0; transition: opacity 1.4s ease; }
.hero-slide.is-active { opacity: 1; }
.hero-dot {
  width: 28px; height: 2px; background: rgba(255,255,255,.25);
  transition: background-color .3s; cursor: pointer; border: 0; padding: 0;
}
.hero-dot.is-active { background: var(--color-accent); }

/* ─── Testimonial marquee ─────────────────────────────────────────── */
.testimonial-marquee { width: 100%; overflow: hidden; }
.testimonial-track { width: max-content; animation: marquee-scroll 60s linear infinite; display: flex; gap: 1.5rem; }
.testimonial-marquee:hover .testimonial-track { animation-play-state: paused; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .testimonial-track { animation: none; }
  .route-page { animation: none; }
  .route-out { animation: none; }
}

/* ─── Form controls ───────────────────────────────────────────────── */
.field {
  width: 100%;
  padding: .85rem 1rem;
  background: #fff;
  border: 1px solid rgba(17,17,17,.15);
  color: var(--color-primary);
  font-size: .9375rem;
  font-family: inherit;
  transition: border-color .2s;
}
.field:focus { outline: none; border-color: var(--color-accent); }
.field-label { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--color-primary); margin-bottom: .5rem; display: block; }
select.field {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%23111' fill='none' stroke-width='1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

/* ─── Section dividers ────────────────────────────────────────────── */
.divider-hairline { border-top: 1px solid rgba(17,17,17,.08); }

/* ─── Stats counter ───────────────────────────────────────────────── */
.stat-num { font-variant-numeric: tabular-nums; }

/* ─── Hash anchor offset for fixed header ─────────────────────────── */
section[id] { scroll-margin-top: 8rem; }

/* ─── Mobile menu sheet ───────────────────────────────────────────── */
.mobile-sheet {
  position: fixed; inset: 0; z-index: 60;
  background: var(--color-primary);
  display: flex; flex-direction: column; padding: 8rem 2rem 2rem;
  animation: sheet-in .35s ease;
}
@keyframes sheet-in {
  from { opacity: 0; transform: translateY(-2%); }
  to   { opacity: 1; transform: translateY(0); }
}