:root{
  --bg:#0f0f10; --panel:#171819; --muted:#f4f5f7;
  --text:#e9eaec; --subtle:#b9bdc2;
  --accent:#ff9900; --accent-600:#d87f00;
  --radius:12px; --radius-lg:16px; --shadow:0 10px 30px rgba(0,0,0,.15);
  --maxw:1120px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;color:#222;background:#fff;line-height:1.6}
.container{max-width:var(--maxw); margin:0 auto; padding:0 20px}
.container.narrow{max-width:740px}
.section{padding:64px 0}
.section-muted{background:var(--muted)}
.section-title{
  font-family:"Playfair Display",serif; font-weight:600;
  font-size:clamp(28px,3vw,36px); margin:0 0 24px; text-align:center;
}
/* Nav */
.top-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  color: var(--text);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px; /* increased from 10px */
  text-decoration: none;
  color: var(--text);
}

.brand-mark {
  width: 48px;   /* increased from 36px */
  height: 48px;  /* increased from 36px */
  object-fit: contain;
}

.brand-name {
  font-weight: 700;
  letter-spacing: 0.2px;
}

.links {
  display: flex;
  align-items: center;
  gap: 18px;
}

.links a {
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  opacity: 0.9;
  position: relative;
}

.links a.icon {
  opacity: 0.85;
}

.links a:hover {
  opacity: 1;
}

.links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--accent);
  transition: transform 0.2s ease;
}

.links a:hover::after,
.links a.active::after {
  transform: scaleX(1);
}

/* Hero */
#hero{position:relative; min-height:64vh; display:flex; align-items:center; overflow:hidden}
#hero .hero-bg {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(15,15,16,0.65), rgba(15,15,16,0.2)), 
              url("./junk.jpg") center/cover no-repeat;
  filter: brightness(0.95) contrast(1.05);
  image-rendering: auto;
}



.hero-content{position:relative; text-align:center; color:#fff}
.hero-content h1{font-family:"Playfair Display",serif; font-size:clamp(32px,5vw,48px); line-height:1.15; margin:0 0 10px}
.hero-content p{font-size:clamp(16px,2.2vw,18px); color:#e6e6e6; margin:0 0 22px}
.hero-cta{display:flex; gap:18px; justify-content:center; align-items:center; flex-wrap:wrap}
.call-inline{font-size:15px; color:#f0f0f0}
.link-accent{color:var(--accent); text-decoration:none}
.link-accent:hover{color:var(--accent-600)}
/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px; border-radius:var(--radius);
  border:1px solid transparent; background:#fff; color:#111; font-weight:600; text-decoration:none;
  box-shadow:var(--shadow);
}
.btn:hover{filter:brightness(.98)}
.btn:focus{outline:3px solid rgba(255,153,0,.35); outline-offset:2px}
.btn-primary{background:var(--accent); color:#111}
.btn-primary:hover{background:var(--accent-600)}
/* Cards */
.card-grid{
  list-style:none; margin:24px 0 0; padding:0;
  display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
}
.card{
  background:#fff; border:1px solid #eceff2; border-radius:var(--radius-lg);
  padding:18px 16px; font-weight:600; text-align:center;
  box-shadow:0 4px 16px rgba(0,0,0,.06);
}
/* Contact */
.contact-card{
  background:#fff; border:1px solid #eceff2; border-radius:var(--radius-lg);
  padding:22px; max-width:620px; margin:0 auto; text-align:center;
  box-shadow:0 4px 16px rgba(0,0,0,.06);
}
.contact-card a{color:#111; text-decoration:none; border-bottom:1px solid rgba(17,17,17,.12)}
.contact-card a:hover{color:var(--accent)}
.social-row{margin-top:8px}
.sep{margin:0 10px; color:#999}
/* Footer */
.site-footer{background:#fafafa; border-top:1px solid #eef0f3; color:#444}
.site-footer .container{padding:24px 20px; text-align:center}
/* Quote form */
.quote-header p{color:#555; margin:-6px 0 18px; text-align:center}
.quote-form{display:grid; gap:14px; background:#fff; border:1px solid #eceff2; border-radius:var(--radius-lg); padding:20px; box-shadow:0 6px 22px rgba(0,0,0,.06)}
.field{display:grid; gap:6px}
label{font-weight:600}
input,select,textarea{width:100%; padding:12px 12px; border-radius:10px; border:1px solid #dfe3e8; background:#fff; font:inherit}
input:focus,select:focus,textarea:focus{outline:3px solid rgba(255,153,0,.25); border-color:#c6ccd3}
/* Small screens */
@media (max-width:640px){
  .brand-name{display:none}
  .nav-inner{height:60px}
}
/* Success animation & Mobile Call Bar (thank-you page) */
.success-wrap{display:flex;justify-content:center;margin-bottom:12px;transform:translateZ(0)}
.success-badge{width:110px;height:110px}
.sb-circle{stroke:rgba(0,0,0,.12)}
.sb-check{stroke:var(--accent);stroke-dasharray:140;stroke-dashoffset:140;animation:sb-draw-check 900ms ease forwards 250ms}
.success-badge{animation:sb-pop 500ms cubic-bezier(.2,.8,.2,1) 0ms both}
@keyframes sb-draw-check{to{stroke-dashoffset:0}}
@keyframes sb-pop{0%{transform:scale(.9)}70%{transform:scale(1.05)}100%{transform:scale(1)}}
/* Mobile sticky call bar */
.mobile-callbar{
  position:fixed; left:0; right:0; bottom:16px; z-index:60;
  margin:auto; width:clamp(260px, 92vw, 520px);
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 16px; border-radius:999px;
  background:var(--accent); color:#111; text-decoration:none; font-weight:800;
  box-shadow:0 14px 38px rgba(0,0,0,.25);
  transition:transform .18s ease, filter .18s ease;
}
.mobile-callbar i{font-size:16px}
.mobile-callbar .mc-number{font-weight:700; opacity:.9}
.mobile-callbar:hover{filter:brightness(.98); transform:translateY(-1px)}
@media (min-width: 721px){ .mobile-callbar{display:none} }
/* Desktop-only tel: visual hint */
@media (hover: hover) and (pointer: fine) {
  .tel-disabled-desktop { cursor:not-allowed; opacity:.82; text-decoration:none; border-bottom-color:transparent; }
}
/* Modal base */
.cc-modal-open { overflow: hidden; }
.cc-callmodal-backdrop{
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.45);
  display: none; align-items: center; justify-content: center;
  padding: 20px;
}
.cc-callmodal-backdrop.show{ display:flex; animation: cc-fade .18s ease-out both }
.cc-callmodal{
  background: #fff; color: #111; width: min(520px, 92vw);
  border-radius: 16px; border: 1px solid #eceff2;
  box-shadow: 0 24px 70px rgba(0,0,0,.25);
  padding: 22px 20px;
  transform: translateY(6px) scale(.98);
  opacity: 0;
  animation: cc-pop .22s cubic-bezier(.2,.8,.2,1) .08s both;
}
.cc-callmodal-title{
  margin: 6px 0 4px;
  font-family: "Playfair Display", serif;
  font-size: clamp(22px, 2.5vw, 26px);
}
.cc-callmodal-sub{ margin: 0 0 14px; color:#555 }
.cc-callmodal-number{
  display:flex; align-items:center; justify-content:center;
  font: 700 22px/1.2 Inter, system-ui, sans-serif;
  padding: 12px 14px; border-radius: 12px;
  border: 1px dashed #d8dde4; background: #fafbfc; margin-bottom: 14px;
}
.cc-callmodal-actions{ display:flex; gap:10px; justify-content:center }
.cc-callmodal .btn{ min-width: 140px }
.cc-callmodal-close{
  position:absolute; top:10px; right:10px;
  width:36px; height:36px; border:0; border-radius:10px;
  background:#f3f4f6; color:#111; font-size:22px; line-height:1; cursor:pointer;
}
.cc-callmodal-close:hover{ background:#eceef2 }
.cc-callmodal-toast{
  position:absolute; left:50%; transform:translate(-50%, 8px);
  bottom: 14px; background:#111; color:#fff; padding:8px 10px;
  border-radius: 999px; font-size: 13px; opacity:0; pointer-events:none;
}
.cc-callmodal-toast.show{ animation: cc-toast 1.2s ease both }
@keyframes cc-fade{ from{opacity:0} to{opacity:1} }
@keyframes cc-pop{ from{opacity:0; transform: translateY(10px) scale(.98)} to{opacity:1; transform:none} }
@keyframes cc-toast{
  0%{opacity:0; transform:translate(-50%, 12px)}
  15%{opacity:1; transform:translate(-50%, 0)}
  85%{opacity:1; transform:translate(-50%, 0)}
  100%{opacity:0; transform:translate(-50%, 6px)}
}