/* Sloans Plumbing and Heating: shared styles (Tailwind Play CDN + these components) */
:root { --brass:#B39964; --coal:#1E1E1E; --char:#2B2B2B; }
html { -webkit-text-size-adjust:100%; }
body { overflow-x:hidden; }
::selection { background:var(--brass); color:var(--coal); }
.font-display { letter-spacing:0.01em; }

.site-header.is-scrolled, .site-header.menu-open { background:#1E1E1E; box-shadow:0 1px 0 rgba(179,153,100,.25), 0 10px 30px -18px rgba(0,0,0,.6); }
.navlink { position:relative; font-family:Montserrat,system-ui,sans-serif; font-size:.78rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.8); padding:.5rem 0; transition:color .2s; }
.navlink::after { content:""; position:absolute; left:0; bottom:0; height:2px; width:100%; background:var(--brass); transform:scaleX(0); transform-origin:left; transition:transform .3s; }
.navlink:hover, .navlink.is-active { color:#fff; }
.navlink:hover::after, .navlink.is-active::after { transform:scaleX(1); }

.kicker, .kicker-dark { font-family:Montserrat,system-ui,sans-serif; display:inline-flex; align-items:center; gap:.9rem; font-size:.75rem; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:var(--brass); }
.kicker::before, .kicker-dark::before { content:""; width:2.5rem; height:2px; background:currentColor; }
.kicker-dark { color:#8F7A4E; }
.h2 { font-family:"Patua One",Georgia,serif; text-transform:uppercase; font-size:clamp(2.1rem,4.6vw,3.75rem); line-height:.98; letter-spacing:-0.01em; color:#080A0C; }
.outline-text { color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.85); }

.btn-brass, .btn-dark, .btn-ghost, .btn-outline, .btn-outline-dark { font-family:Montserrat,system-ui,sans-serif; display:inline-flex; align-items:center; gap:.6rem; min-height:48px; padding:.8rem 1.4rem; border-radius:.5rem; font-weight:600; font-size:.9rem; letter-spacing:.04em; transition:transform .2s, background-color .2s, color .2s, border-color .2s, box-shadow .2s; }
.btn-brass { background:var(--brass); color:var(--coal); }
.btn-brass:hover { background:#CDB78A; transform:translateY(-2px); box-shadow:0 12px 30px -10px rgba(179,153,100,.6); }
.btn-dark { background:var(--coal); color:#fff; }
.btn-dark:hover { background:#000; transform:translateY(-2px); box-shadow:0 12px 30px -12px rgba(0,0,0,.6); }
.btn-ghost { border:1px solid rgba(255,255,255,.35); color:#fff; backdrop-filter:blur(6px); }
.btn-ghost:hover { border-color:var(--brass); color:var(--brass); }
.btn-outline { border:1.5px solid rgba(43,43,43,.25); color:var(--char); }
.btn-outline:hover { border-color:var(--char); background:var(--char); color:#fff; }
.btn-outline-dark { border:1.5px solid var(--coal); color:var(--coal); }
.btn-outline-dark:hover { background:var(--coal); color:#fff; }
.btn-brass svg, .btn-dark svg, .link-arrow svg { transition:transform .25s; }
.btn-brass:hover svg, .btn-dark:hover svg, .link-arrow:hover svg, .group:hover .link-arrow svg { transform:translateX(4px); }
button[disabled] { opacity:.6; cursor:wait; transform:none !important; }

.link-arrow { font-family:Montserrat,system-ui,sans-serif; display:inline-flex; align-items:center; gap:.5rem; font-weight:600; font-size:.85rem; letter-spacing:.14em; text-transform:uppercase; color:#8F7A4E; }
.card-feature { position:relative; display:block; border-radius:1.25rem; overflow:hidden; transition:transform .35s, box-shadow .35s; }
.card-feature:hover { transform:translateY(-6px); box-shadow:0 30px 60px -30px rgba(0,0,0,.45); }
.img-zoom img { transition:transform .8s; } .img-zoom:hover img { transform:scale(1.05); }

.step { display:flex; gap:1.5rem; padding:2rem 0; border-top:1px solid rgba(255,255,255,.1); }
.step-n { font-family:"Patua One",serif; font-size:2.5rem; line-height:1; color:var(--brass); min-width:3.5rem; }
.step-t { font-family:"Patua One",serif; text-transform:uppercase; font-size:1.5rem; letter-spacing:.02em; }
.step-p { margin-top:.6rem; color:rgba(255,255,255,.7); line-height:1.8; max-width:34rem; }
.tick { display:flex; gap:.8rem; line-height:1.6; }
.value { border-radius:1.25rem; background:#fff; padding:2rem; border:1px solid rgba(43,43,43,.08); transition:transform .3s; }
.value:hover { transform:translateY(-4px); }
.value-n { font-family:"Patua One",serif; font-size:2.5rem; color:#8F7A4E; }
.value-t { font-family:"Patua One",serif; text-transform:uppercase; font-size:1.4rem; margin-top:.75rem; color:#080A0C; }
.value-p { margin-top:.6rem; line-height:1.8; color:rgba(43,43,43,.8); }
.mini-n { display:grid; place-items:center; flex-shrink:0; width:2.25rem; height:2.25rem; border-radius:999px; background:var(--coal); color:var(--brass); font-family:"Patua One",serif; }

.form-card { background:#fff; border-radius:1.25rem; padding:clamp(1.5rem,4vw,3rem); box-shadow:0 30px 60px -40px rgba(0,0,0,.35); border:1px solid rgba(43,43,43,.08); }
.label { display:block; font-size:.85rem; font-weight:600; letter-spacing:.01em; color:var(--char); margin-bottom:.45rem; }
.input { width:100%; min-height:50px; border:1.5px solid rgba(43,43,43,.15); border-radius:.6rem; padding:.75rem 1rem; font-size:1rem; background:#fafafa; color:var(--char); transition:border-color .2s, box-shadow .2s, background .2s; }
.input:focus { outline:none; border-color:var(--brass); background:#fff; box-shadow:0 0 0 4px rgba(179,153,100,.2); }
.form-status.is-ok { background:rgba(179,153,100,.15); border:1px solid rgba(179,153,100,.6); color:#2B2B2B; }
.form-status.is-err { background:#fdf0ee; border:1px solid #e3b4ab; color:#7a2a1d; }
.hp { position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
.grecaptcha-badge { visibility:hidden; }
:focus-visible { outline:2px solid var(--brass); outline-offset:3px; }

.reveal { opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s ease; }
.reveal.is-in { opacity:1; transform:none; }
.hero-img { animation:heroZoom 14s ease-out both; }
@keyframes heroZoom { from { transform:scaleX(-1) scale(1.08); } to { transform:scaleX(-1) scale(1); } }
.mobile-cta { transition:transform .3s, opacity .3s; }
.mobile-cta.is-hidden { transform:translateY(150%); opacity:0; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .reveal { opacity:1; transform:none; transition:none; }
  .hero-img { animation:none; }
  *, *::before, *::after { transition-duration:0s !important; }
}
@media (max-width: 1023px) {
  .hero-img { -webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 100%); mask-image:linear-gradient(to bottom,#000 55%,transparent 100%); }
}