/* ============================================================
   GOLDEN STEP FLOORING — custom layer on top of Tailwind
   Signature motif: "the plank" — surfaces assemble like a
   floor being laid, board by board. Gold is the inlay, used
   sparingly. Charcoal is the room. Bone is the daylight.
   ============================================================ */

:root {
  --gold: #D4AF37;
  --gold-soft: #E8CD6F;
  --charcoal: #111111;
  --ink: #1a1a1a;
  --bone: #F6F3EC;
  --oak: #A9805A;
  --walnut: #6B4423;
  --espresso: #3E2A18;
}

html { scroll-behavior: smooth; }
body { background: var(--charcoal); color: var(--bone); -webkit-font-smoothing: antialiased; }

::selection { background: var(--gold); color: #111; }

/* ---------- Typography helpers ---------- */
.font-display { font-family: 'Playfair Display', Georgia, serif; }
.font-body { font-family: 'Inter', system-ui, sans-serif; }

.eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 0.6875rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
}
.eyebrow::before {
  content: '';
  width: 2.25rem;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
  display: inline-block;
}

.headline-italic { font-style: italic; color: var(--gold); }

/* ---------- Loader: planks being laid ---------- */
#loader {
  position: fixed; inset: 0; z-index: 100;
  background: var(--charcoal);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .6s ease .2s, visibility .6s ease .2s;
}
#loader.done { opacity: 0; visibility: hidden; }
.loader-planks { display: flex; flex-direction: column; gap: 4px; width: 180px; }
.loader-plank {
  height: 12px; border-radius: 2px;
  background: linear-gradient(90deg, var(--walnut), var(--oak));
  transform: scaleX(0); transform-origin: left;
  animation: layPlank .5s cubic-bezier(.65,0,.35,1) forwards;
}
.loader-plank:nth-child(2) { animation-delay: .12s; transform-origin: right; }
.loader-plank:nth-child(3) { animation-delay: .24s; }
.loader-plank:nth-child(4) { animation-delay: .36s; background: linear-gradient(90deg, var(--gold), var(--gold-soft)); height: 3px; }
@keyframes layPlank { to { transform: scaleX(1); } }
.loader-word {
  margin-top: 1.25rem; text-align: center;
  font-family: 'Inter', sans-serif; font-size: .625rem;
  letter-spacing: .4em; text-transform: uppercase; color: rgba(246,243,236,.5);
}

/* ---------- Navigation ---------- */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  transition: background .4s ease, box-shadow .4s ease, padding .4s ease;
}
#nav.scrolled {
  background: rgba(17,17,17,.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 1px 0 rgba(212,175,55,.18), 0 16px 40px rgba(0,0,0,.45);
}
.nav-link { position: relative; transition: color .3s; }
.nav-link::after {
  content: ''; position: absolute; left: 0; bottom: -6px;
  width: 100%; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: right;
  transition: transform .35s cubic-bezier(.65,0,.35,1);
}
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); transform-origin: left; }
.nav-link.active { color: var(--gold); }

/* Logo step mark */
.logo-mark { display: inline-block; width: 30px; height: 30px; }

/* ---------- Signature: plank reveal ----------
   Elements tagged .reveal rise into place; .reveal-planks
   covers an element with boards that slide away on entry. */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .1s; }
.reveal[data-delay="2"] { transition-delay: .2s; }
.reveal[data-delay="3"] { transition-delay: .3s; }
.reveal[data-delay="4"] { transition-delay: .4s; }

.reveal-planks { position: relative; overflow: hidden; }
.reveal-planks .plank-cover { position: absolute; inset: 0; display: flex; flex-direction: column; z-index: 5; pointer-events: none; }
.reveal-planks .plank-cover span {
  flex: 1; background: var(--charcoal);
  transform: scaleX(1); transition: transform .9s cubic-bezier(.76,0,.24,1);
}
.reveal-planks .plank-cover span:nth-child(odd) { transform-origin: right; }
.reveal-planks .plank-cover span:nth-child(even) { transform-origin: left; }
.reveal-planks.in .plank-cover span { transform: scaleX(0); }
.reveal-planks.in .plank-cover span:nth-child(2) { transition-delay: .08s; }
.reveal-planks.in .plank-cover span:nth-child(3) { transition-delay: .16s; }
.reveal-planks.in .plank-cover span:nth-child(4) { transition-delay: .24s; }
.reveal-planks.in .plank-cover span:nth-child(5) { transition-delay: .32s; }
.light .reveal-planks .plank-cover span, .plank-cover.on-bone span { background: var(--bone); }

/* ---------- Wood surfaces (SVG-free, pure CSS grain) ---------- */
.wood {
  position: relative;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.16) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 2px, transparent 2px 7px),
    linear-gradient(105deg, #8a5f38 0%, #a9805a 28%, #6b4423 55%, #97683f 78%, #7c5230 100%);
  background-size: 100% 100%, 100% 100%, 240% 240%;
}
.wood.light-oak {
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.1) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 2px, transparent 2px 8px),
    linear-gradient(100deg, #c9a376 0%, #dbb98d 30%, #b58a5b 60%, #d2ad7e 100%);
}
.wood.walnut {
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.22) 0 1px, transparent 1px 110px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 2px, transparent 2px 6px),
    linear-gradient(110deg, #4a2f1a 0%, #6b4423 35%, #3e2a18 65%, #5c3a20 100%);
}
.wood.grey-vinyl {
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.14) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 2px, transparent 2px 9px),
    linear-gradient(100deg, #6e655c 0%, #8c8378 32%, #57504a 62%, #7c7268 100%);
}
.wood.herringbone {
  background:
    repeating-linear-gradient(45deg, #9c7146 0 14px, #8a5f38 14px 28px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.12) 0 2px, transparent 2px 28px);
}
.wood::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 30% 0%, rgba(255,255,255,.14), transparent 55%),
              linear-gradient(180deg, transparent 55%, rgba(0,0,0,.35));
  pointer-events: none;
}

/* ---------- Glass card ---------- */
.glass {
  background: rgba(246,243,236,.045);
  border: 1px solid rgba(246,243,236,.09);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.glass-gold-edge { border-top: 1px solid rgba(212,175,55,.4); }

/* ---------- Buttons ---------- */
.btn-gold {
  position: relative; overflow: hidden;
  background: linear-gradient(120deg, var(--gold) 0%, var(--gold-soft) 50%, var(--gold) 100%);
  background-size: 200% 100%;
  color: #111; font-weight: 600;
  transition: background-position .6s ease, transform .25s ease, box-shadow .3s ease;
}
.btn-gold:hover { background-position: 100% 0; transform: translateY(-2px); box-shadow: 0 14px 34px rgba(212,175,55,.28); }
.btn-ghost {
  border: 1px solid rgba(246,243,236,.25); color: var(--bone);
  transition: border-color .3s, color .3s, background .3s, transform .25s;
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }

/* ---------- Hero ---------- */
.hero-grade {
  background:
    radial-gradient(90rem 50rem at 78% -10%, rgba(212,175,55,.10), transparent 55%),
    radial-gradient(60rem 40rem at -10% 110%, rgba(169,128,90,.12), transparent 60%),
    var(--charcoal);
}
.hero-plank-stack { display: flex; flex-direction: column; gap: 6px; height: 100%; }
.hero-plank-stack > div {
  flex: 1; border-radius: 4px;
  transform: translateX(110%);
  animation: slideLay 1s cubic-bezier(.22,1,.36,1) forwards;
  box-shadow: 0 18px 50px rgba(0,0,0,.5);
}
.hero-plank-stack > div:nth-child(1) { animation-delay: .9s; }
.hero-plank-stack > div:nth-child(2) { animation-delay: 1.05s; transform: translateX(-110%); }
.hero-plank-stack > div:nth-child(3) { animation-delay: 1.2s; }
.hero-plank-stack > div:nth-child(4) { animation-delay: 1.35s; transform: translateX(-110%); }
.hero-plank-stack > div:nth-child(5) { animation-delay: 1.5s; }
@keyframes slideLay { to { transform: translateX(0); } }
.hero-plank-stack > div {
  position: relative; overflow: hidden;
  transition: translate .6s cubic-bezier(.22,1,.36,1), box-shadow .6s ease;
}
.hero-plank-stack > div img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; pointer-events: none;
  -webkit-user-drag: none; user-select: none;
  transition: transform 1.1s cubic-bezier(.22,1,.36,1);
}
/* Hover: each plank nudges toward the side it slid in from, photo glides & zooms */
.hero-plank-stack > div:hover {
  translate: 14px 0;
  box-shadow: 0 22px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(212,175,55,.4);
}
.hero-plank-stack > div:nth-child(even):hover { translate: -14px 0; }
.hero-plank-stack > div:hover img { transform: scale(1.07) translateX(1.5%); }

.gold-shimmer {
  background: linear-gradient(110deg, var(--gold) 35%, #f4e3a1 50%, var(--gold) 65%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 5.5s linear infinite;
}
@keyframes shimmer { to { background-position: -220% 0; } }

/* Scroll cue */
.scroll-cue { width: 1px; height: 64px; background: rgba(246,243,236,.2); position: relative; overflow: hidden; }
.scroll-cue::after { content: ''; position: absolute; left: 0; top: -40%; width: 100%; height: 40%; background: var(--gold); animation: cueDrop 2.2s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes cueDrop { to { top: 110%; } }

/* ---------- Section step divider (gold stair line) ---------- */
.step-divider { height: 56px; position: relative; }
.step-divider svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- Cards ---------- */
.card-lift { transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, border-color .45s ease; }
.card-lift:hover { transform: translateY(-8px); box-shadow: 0 30px 60px rgba(0,0,0,.5); border-color: rgba(212,175,55,.45); }

.service-card .svc-icon { transition: transform .5s cubic-bezier(.22,1,.36,1), color .4s; }
.service-card:hover .svc-icon { transform: translateY(-4px) rotate(-4deg); color: var(--gold); }
.service-card .svc-line { width: 2.5rem; height: 1px; background: rgba(212,175,55,.5); transition: width .5s cubic-bezier(.22,1,.36,1); }
.service-card:hover .svc-line { width: 100%; }

/* ---------- Portfolio ---------- */
.masonry { columns: 1; column-gap: 1.25rem; }
@media (min-width: 640px) { .masonry { columns: 2; } }
@media (min-width: 1024px) { .masonry { columns: 3; } }
.masonry-item { break-inside: avoid; margin-bottom: 1.25rem; }

.proj-card { position: relative; overflow: hidden; border-radius: .75rem; cursor: pointer; }
.proj-card .proj-surface { transition: transform .8s cubic-bezier(.22,1,.36,1); }
.proj-card img.proj-surface { display: block; width: 100%; object-fit: cover; }
.proj-card:hover .proj-surface { transform: scale(1.06); }
.proj-card .proj-veil {
  position: absolute; inset: 0; z-index: 6;
  background: linear-gradient(180deg, transparent 30%, rgba(17,17,17,.92) 100%);
  opacity: .55; transition: opacity .5s;
}
.proj-card:hover .proj-veil { opacity: .95; }
.proj-card .proj-meta { position: absolute; left: 0; right: 0; bottom: 0; z-index: 7; padding: 1.5rem; transform: translateY(12px); transition: transform .5s cubic-bezier(.22,1,.36,1); }
.proj-card:hover .proj-meta { transform: translateY(0); }
.proj-card .proj-cta { opacity: 0; transition: opacity .4s .1s; }
.proj-card:hover .proj-cta { opacity: 1; }

.filter-btn { transition: color .3s, background .3s, border-color .3s; }
.filter-btn.active { background: var(--gold); color: #111; border-color: var(--gold); }

/* ---------- Before / After slider ---------- */
.ba { position: relative; overflow: hidden; border-radius: .75rem; user-select: none; touch-action: pan-y; }
.ba .ba-after { position: absolute; inset: 0; clip-path: inset(0 0 0 50%); }
.ba .ba-handle {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 2px;
  background: var(--gold); z-index: 10; cursor: ew-resize; transform: translateX(-1px);
}
.ba .ba-handle::after {
  content: '⟨ ⟩'; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 44px; height: 44px; border-radius: 999px;
  background: var(--gold); color: #111; font-weight: 700; font-size: .8rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
}
.ba .ba-tag { position: absolute; top: .875rem; z-index: 8; font-size: .625rem; letter-spacing: .22em; text-transform: uppercase; padding: .375rem .75rem; border-radius: 999px; background: rgba(17,17,17,.72); backdrop-filter: blur(8px); color: var(--bone); }
.ba .ba-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  pointer-events: none;          /* drags pass through to the slider */
  -webkit-user-drag: none;
  user-select: none;
}
.ba .ba-img--low { object-position: center 62%; } /* bias crop toward the floor */

/* ---------- Modal ---------- */
#proj-modal { position: fixed; inset: 0; z-index: 80; display: none; }
#proj-modal.open { display: flex; }
#proj-modal .modal-back { position: absolute; inset: 0; background: rgba(10,10,10,.78); backdrop-filter: blur(10px); animation: fadeIn .35s ease; }
#proj-modal .modal-card { animation: riseIn .5s cubic-bezier(.22,1,.36,1); }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes riseIn { from { opacity: 0; transform: translateY(40px); } }

/* ---------- Testimonials ---------- */
.testi-track { display: flex; transition: transform .7s cubic-bezier(.22,1,.36,1); }
.testi-slide { min-width: 100%; }
/* 2px visual bar, but a 44px-tall hit area via vertical padding (content-box) */
.testi-dot { width: 22px; height: 2px; padding: 21px 0; box-sizing: content-box; background: rgba(17,17,17,.22); background-clip: content-box; transition: background .3s, width .3s; }
.testi-dot.active { background: var(--gold); background-clip: content-box; width: 38px; }

/* ---------- Marquee of service areas ---------- */
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-inner { display: flex; gap: 3.5rem; width: max-content; animation: marquee 36s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee:hover .marquee-inner { animation-play-state: paused; }

/* ---------- Floating CTAs ---------- */
#float-call {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 70;
  width: 58px; height: 58px; border-radius: 999px;
  background: linear-gradient(135deg, var(--gold), var(--gold-soft));
  color: #111; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 16px 40px rgba(212,175,55,.4);
  animation: pulseRing 2.8s ease-out infinite;
  transition: transform .3s;
}
#float-call:hover { transform: scale(1.08); }
@keyframes pulseRing {
  0% { box-shadow: 0 16px 40px rgba(212,175,55,.4), 0 0 0 0 rgba(212,175,55,.45); }
  70% { box-shadow: 0 16px 40px rgba(212,175,55,.4), 0 0 0 22px rgba(212,175,55,0); }
  100% { box-shadow: 0 16px 40px rgba(212,175,55,.4), 0 0 0 0 rgba(212,175,55,0); }
}
/* ---------- Forms ---------- */
.field {
  background: rgba(246,243,236,.04);
  border: 1px solid rgba(246,243,236,.14);
  color: var(--bone);
  transition: border-color .3s, background .3s, box-shadow .3s;
}
.field:focus { outline: none; border-color: var(--gold); background: rgba(246,243,236,.06); box-shadow: 0 0 0 3px rgba(212,175,55,.15); }
.field::placeholder { color: rgba(246,243,236,.35); }
.field[aria-invalid="true"] { border-color: #e0654a; box-shadow: 0 0 0 3px rgba(224,101,74,.15); }
.field-error { display: flex; align-items: center; gap: .375rem; margin-top: .4rem; font-size: .75rem; color: #f0a08c; }
.field-error::before { content: '!'; flex: 0 0 auto; width: 1rem; height: 1rem; border-radius: 999px; background: #e0654a; color: #111; font-weight: 700; font-size: .65rem; display: inline-flex; align-items: center; justify-content: center; }
label.float-label { font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(246,243,236,.55); }

/* ---------- FAQ ---------- */
.faq-item { border-bottom: 1px solid rgba(246,243,236,.1); }
.faq-q { width: 100%; text-align: left; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .5s cubic-bezier(.22,1,.36,1); }
.faq-item.open .faq-a { max-height: 320px; }
.faq-plus { transition: transform .4s; }
.faq-item.open .faq-plus { transform: rotate(45deg); color: var(--gold); }

/* ---------- Light sections (bone) ---------- */
.section-bone { background: var(--bone); color: var(--ink); }
.section-bone .eyebrow { color: #9a7a1f; }
.section-bone .glass { background: rgba(17,17,17,.03); border-color: rgba(17,17,17,.1); }

/* ---------- Parallax ---------- */
.parallax-y { will-change: transform; }

/* ---------- Counter digits ---------- */
.stat-num { font-variant-numeric: tabular-nums; }

/* ---------- Process timeline ---------- */
.process-row { position: relative; padding-left: 2.5rem; }
.process-row::before {
  content: ''; position: absolute; left: 10px; top: 14px; bottom: -14px; width: 1px;
  background: linear-gradient(180deg, rgba(212,175,55,.6), rgba(212,175,55,.08));
}
.process-row:last-child::before { display: none; }
.process-row::after {
  content: ''; position: absolute; left: 6px; top: 8px;
  width: 9px; height: 9px; border-radius: 999px;
  background: var(--gold); box-shadow: 0 0 0 5px rgba(212,175,55,.14);
}

/* ---------- Accessibility & motion ---------- */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--gold); color: #111; padding: .75rem 1.25rem; font-weight: 600; }
.skip-link:focus { left: 1rem; top: 1rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal, .hero-plank-stack > div { opacity: 1 !important; transform: none !important; translate: none !important; }
}