/* ===== LD Construction & Remodeling — shared styles ===== */
:root { color-scheme: dark; }
html, body { background-color: #18140F; }
body { font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.font-serif { font-family: 'Playfair Display', Georgia, serif; }

/* Warm ambient glow behind sections (cheap radial gradient, no blur cost) */
.glow-gold { background:
  radial-gradient(60% 50% at 80% 0%, rgba(202,138,4,0.10), transparent 70%),
  radial-gradient(50% 40% at 0% 100%, rgba(202,138,4,0.06), transparent 70%); }

/* Hairline texture for premium feel — single tiling SVG, very subtle */
.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  opacity: 0.035; mix-blend-mode: overlay;
}

.hairline { height: 1px; background: linear-gradient(90deg, transparent, rgba(202,138,4,0.55), transparent); }

/* Scroll reveal — one gentle motion per element, ease-out */
.reveal { opacity: 0; transform: translateY(22px);
  transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; }
.reveal.settled { will-change: auto; }

/* Image load: warm skeleton shimmer → fade in */
.media { position: relative; overflow: hidden; background: #211C16; }
.media::before { content:""; position:absolute; inset:0; z-index:0;
  background: linear-gradient(100deg, #211C16 30%, #2E2820 50%, #211C16 70%); background-size: 200% 100%;
  animation: shimmer 1.5s linear infinite; }
.media.ready::before { display:none; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.ph { position: relative; z-index: 1; opacity: 0; transition: opacity .7s ease; }
.ph.ready { opacity: 1; }

/* Subtle, slow hero image settle — ONE element animated */
@keyframes settleIn { from { transform: scale(1.08); } to { transform: scale(1); } }
.settle { animation: settleIn 1.6s cubic-bezier(.22,1,.36,1) both; }

.zoom { transition: transform .9s cubic-bezier(.22,1,.36,1); }
.group:hover .zoom { transform: scale(1.05); }

/* Scroll progress — single GPU transform */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; pointer-events: none; }
.progress > span { display: block; height: 100%; transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, #CA8A04, #E3B23C); }

/* Card lift — transform only, hover-capable pointers only */
.lift { transition: transform .4s cubic-bezier(.22,1,.36,1), border-color .3s ease, background-color .3s ease; }
@media (hover: hover) and (pointer: fine) {
  .lift:hover { transform: translateY(-5px); }
}

#site-header { transition: background-color .4s ease, border-color .4s ease, backdrop-filter .4s ease; }

.navlink { position: relative; }
.navlink::after { content:""; position:absolute; left:0; right:100%; bottom:-5px; height:1px; background:#CA8A04; transition:right .35s ease; }
.navlink:hover::after, .navlink.active::after { right:0; }

#mobnav { transition: opacity .3s ease, transform .3s ease; }
#mobnav.closed { opacity:0; transform: translateY(-8px); pointer-events:none; }

.chip.on { background:#CA8A04; color:#18140F; border-color:#CA8A04; }

/* Before / After comparison */
.ba { position: relative; --p: 50%; touch-action: pan-y; cursor: ew-resize; }
.ba .after { position:absolute; inset:0; clip-path: inset(0 calc(100% - var(--p)) 0 0); }
/* Range kept for keyboard accessibility only; pointer dragging is handled on the .ba container */
.ba-range { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; pointer-events:none; }
.ba-bar { position:absolute; top:0; bottom:0; left:var(--p); width:2px; margin-left:-1px; background:#CA8A04; pointer-events:none; }
.ba-knob { position:absolute; top:50%; left:50%; width:46px; height:46px; transform:translate(-50%,-50%);
  border-radius:9999px; background:#CA8A04; color:#18140F; display:grid; place-items:center; box-shadow:0 8px 24px rgba(0,0,0,.55); }

/* FAQ */
.faq-a { max-height:0; overflow:hidden; transition: max-height .4s ease; }
.faq.open .faq-a { max-height: 360px; }
.faq.open .chev { transform: rotate(180deg); }
.chev { transition: transform .35s ease; }

.map-embed { filter: invert(0.9) hue-rotate(180deg) brightness(1) contrast(0.9) saturate(0.85); }

/* Defer offscreen long sections (faster first paint on mobile) */
.cv { content-visibility: auto; contain-intrinsic-size: auto 760px; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid #E3B23C; outline-offset: 3px; border-radius: 4px; }

.balance { text-wrap: balance; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity:1 !important; transform:none !important; transition:none !important; }
  .settle, .media::before { animation: none !important; }
  .media::before { display:none !important; }
  .ph { opacity:1 !important; transition:none !important; }
  .zoom, .faq-a, .chev, .lift { transition:none !important; }
  .lift:hover { transform:none !important; }
  .progress { display:none !important; }
  html { scroll-behavior: auto; }
}