/* =========================================================
   Carpenter Point — Global Stylesheet
   Extracted from single-file SPA into a shared style.css
   ========================================================= */

:root{
  --walnut-950:#1D140F; --walnut-900:#241812; --walnut-800:#3E2723;
  --oak-600:#8B5E3C; --brass-500:#B87333; --brass-400:#CA8A4B;
  --parchment-50:#FBF8F3; --parchment-100:#F5EFE6;
}

*{ scroll-behavior:smooth; }

body{ font-family:'Work Sans',sans-serif; background:var(--parchment-50); color:var(--walnut-900); }
h1,h2,h3,.font-display{ font-family:'Fraunces',serif; }

.grain-bg{
  background-image:
    repeating-linear-gradient(180deg, rgba(139,94,60,0.06) 0px, rgba(139,94,60,0.06) 1px, transparent 1px, transparent 26px),
    radial-gradient(ellipse at 20% 20%, rgba(184,115,51,0.10), transparent 55%),
    radial-gradient(ellipse at 80% 60%, rgba(62,39,35,0.08), transparent 55%);
}

.joint-divider{ width:100%; height:34px; display:flex; align-items:center; justify-content:center; opacity:0.9; }
.joint-divider svg{ height:100%; }

.ruler-eyebrow{ display:inline-flex; align-items:center; gap:8px; letter-spacing:.22em; font-size:.72rem; font-weight:600; text-transform:uppercase; color:var(--brass-500); }
.ruler-eyebrow::before{ content:''; width:34px; height:8px; background-image:repeating-linear-gradient(90deg, var(--brass-500) 0 2px, transparent 2px 7px); }

.logo-placeholder{ width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.logo-placeholder img{ width:100%; height:100%; object-fit:contain; }

.fab-wrap{ position:fixed; bottom:22px; left:0; right:0; z-index:50; display:flex; justify-content:space-between; padding:0 18px; pointer-events:none; }
.fab-wrap > a{ pointer-events:auto; }
.fab{ position:relative; display:flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:999px; box-shadow:0 10px 30px -6px rgba(29,20,15,0.45); transition:transform .25s ease, box-shadow .25s ease; }
.fab:hover{ transform:translateY(-3px); box-shadow:0 16px 34px -6px rgba(29,20,15,0.55); }
.fab-call{ background:var(--walnut-800); color:var(--parchment-100); }
.fab-wa{ background:linear-gradient(135deg,#25D366,#1DA851); color:#fff; }
.fab-pulse{ position:absolute; inset:0; border-radius:999px; animation:pulse-ring 2.4s ease-out infinite; }
@keyframes pulse-ring{ 0%{ box-shadow:0 0 0 0 rgba(37,211,102,0.45);} 100%{ box-shadow:0 0 0 16px rgba(37,211,102,0);} }

.burger{ width:30px; height:22px; position:relative; cursor:pointer; }
.burger span{
  position:absolute; left:0; width:100%; height:2.5px; background:var(--walnut-900); border-radius:2px;
  transform-origin:center;
  transition: top .32s cubic-bezier(.4,0,.2,1), transform .38s cubic-bezier(.68,-0.55,.27,1.55) .08s, opacity .22s ease .08s;
}
.burger span:nth-child(1){ top:0; }
.burger span:nth-child(2){ top:9.5px; }
.burger span:nth-child(3){ top:19px; }
.burger.active span:nth-child(1){ top:9.5px; transform:rotate(45deg); }
.burger.active span:nth-child(2){ opacity:0; transform:scale(0); }
.burger.active span:nth-child(3){ top:9.5px; transform:rotate(-45deg); }

#mobileMenu{ transform:translateY(-12px); opacity:0; pointer-events:none; transition:opacity .3s ease, transform .3s ease; }
#mobileMenu.open{ transform:translateY(0); opacity:1; pointer-events:auto; }

.glow-field{ transition:box-shadow .35s ease, border-color .35s ease, background .35s ease; border:1.5px solid #E3D6C2; }
.glow-field:focus{ outline:none; border-color:var(--brass-500); box-shadow:0 0 0 4px rgba(184,115,51,0.16), 0 0 24px -4px rgba(184,115,51,0.45); background:#fff; }

.shimmer-btn{ position:relative; overflow:hidden; isolation:isolate; }
.shimmer-btn::after{
  content:''; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,0.55), transparent);
  transform:skewX(-20deg); animation:shimmer-sweep 2.6s ease-in-out infinite;
}
@keyframes shimmer-sweep{ 0%{ left:-60%; } 55%{ left:130%; } 100%{ left:130%; } }

.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

.area-tag{ border:1px solid #E3D6C2; transition:all .25s ease; }
.area-tag:hover{ background:var(--walnut-800); color:var(--parchment-100); border-color:var(--walnut-800); transform:translateY(-2px); }

.faq-panel{ max-height:0; overflow:hidden; transition:max-height .45s cubic-bezier(.4,0,.2,1), padding .3s ease; }
.faq-item.open .faq-panel{ max-height:400px; }
.faq-item.open .faq-icon{ transform:rotate(135deg); }
.faq-icon{ transition:transform .35s ease; }
.faq-item{ border:1px solid #E9DFCB; }

.social-ico{ width:38px; height:38px; border-radius:999px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); transition:all .25s ease; color:#F5EFE6; }
.social-ico:hover{ transform:translateY(-3px); border-color:transparent; }
.social-ico-instagram:hover{ background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.social-ico-facebook:hover{ background:#1877F2; }
.social-ico-youtube:hover{ background:#FF0000; }

/* Active nav link (set by script.js based on current page) */
.nav-link.active-link{ color:var(--brass-500); font-weight:600; }

::selection{ background:var(--brass-400); color:#fff; }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }