/* ============================================
   613 CLEAN — DESIGN TOKENS
   Palette: Spruce (dark) / Chalk (bg) / Fog (surface)
            Marigold (cta) / Ink (text) / Sky (secondary)
   Type: Fraunces (display) / Inter (body) / JetBrains Mono (utility)
   ============================================ */
:root{
  --spruce: #125a8c;
  --spruce-dark: #0d4468;
  --chalk: #F3F5F1;
  --fog: #E7EEF2;
  --marigold: #8dc34b;
  --marigold-dark: #6ea23a;
  --ink: #16232b;
  --sky: #1f7a9c;
  --white: #FFFFFF;
  --line: rgba(18,90,140,0.16);

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 22px;
  --shadow-card: 0 8px 24px -12px rgba(13,68,104,0.25);
  --shadow-pop: 0 20px 45px -18px rgba(13,68,104,0.35);
  --maxw: 1180px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--chalk);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family: var(--font-display); color: var(--spruce-dark); margin: 0 0 .5em; line-height:1.12; font-weight:600; }
h1{ font-size: clamp(2.1rem, 4.2vw, 3.4rem); letter-spacing:-0.01em; }
h2{ font-size: clamp(1.6rem, 2.8vw, 2.3rem); letter-spacing:-0.01em; }
h3{ font-size: 1.28rem; }
p{ margin:0 0 1em; }
.container{ max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.eyebrow{
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .74rem;
  color: var(--sky);
  font-weight: 600;
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom: 14px;
}
.eyebrow::before{ content:""; width:8px; height:8px; border-radius:50%; background: var(--marigold); display:inline-block; }
.section{ padding: 76px 0; }
.section--tight{ padding: 52px 0; }
.section--fog{ background: var(--fog); }
.section--spruce{ background: var(--spruce); color: var(--chalk); }
.section--spruce h2, .section--spruce h3{ color: var(--white); }
.muted{ color: rgba(22,36,31,0.68); }
.center{ text-align:center; }
.lede{ font-size: 1.12rem; color: rgba(22,36,31,0.75); max-width: 640px; }
.center .lede{ margin-inline:auto; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family: var(--font-body); font-weight: 700; font-size: .96rem;
  padding: 14px 26px; border-radius: 999px; border: 2px solid transparent;
  cursor:pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space: nowrap;
}
.btn-primary{ background: var(--marigold); color: var(--spruce-dark); box-shadow: var(--shadow-card); }
.btn-primary:hover{ background: var(--marigold-dark); transform: translateY(-1px); }
.btn-outline{ border-color: var(--spruce); color: var(--spruce); background: transparent; }
.btn-outline:hover{ background: var(--spruce); color: var(--white); }
.btn-ghost-light{ border-color: rgba(255,255,255,0.5); color:var(--white); }
.btn-ghost-light:hover{ background: rgba(255,255,255,0.12); }
.btn-block{ width:100%; }
.btn-lg{ padding: 16px 30px; font-size: 1.02rem; }

/* ---------- Header ---------- */
header.site-header{
  background: var(--chalk); border-bottom: 1px solid var(--line);
  position: sticky; top:0; z-index: 60;
}
.header-row{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 0; gap: 18px;
}
.brand-phone{ display:flex; flex-direction:column; gap:5px; flex:none; }
.logo-mini{ display:flex; align-items:center; gap:8px; font-family: var(--font-display); font-weight:700; font-size:1.18rem; letter-spacing:-0.01em; color: var(--spruce-dark); }
.logo-mini:hover{ color: var(--marigold-dark); }
.logo-mini svg{ width:20px; height:20px; flex:none; }
.header-phone-big{ display:flex; align-items:center; gap:9px; font-family: var(--font-display); font-weight:700; font-size:1.5rem; color: var(--spruce-dark); letter-spacing:-0.01em; }
.header-phone-big svg{ width:19px; height:19px; color: var(--marigold-dark); flex:none; }
.header-phone-big:hover{ color: var(--marigold-dark); }
.logo{ display:flex; align-items:center; gap:10px; font-family: var(--font-display); font-weight:700; font-size:1.3rem; color: var(--spruce-dark); flex:none; }
.logo small{ display:block; font-family: var(--font-mono); font-size:.6rem; letter-spacing:.14em; color: var(--sky); font-weight:600; text-transform:uppercase; }

nav.mainnav{ display:flex; align-items:center; gap: 26px; }
nav.mainnav > ul{ list-style:none; display:flex; gap: 26px; margin:0; padding:0; align-items:center; }
nav.mainnav a{ font-weight:600; font-size:.95rem; color: var(--ink); padding: 8px 2px; position:relative; }
nav.mainnav > ul > li > a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background: var(--marigold);
  transform: scaleX(0); transition: transform .18s ease;
}
nav.mainnav > ul > li > a:hover::after{ transform: scaleX(1); }
.has-dropdown{ position:relative; }
.dropdown{
  position:absolute; top: 100%; left:0; background: var(--white); border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop); padding: 10px; min-width: 260px; list-style:none; margin:8px 0 0;
  opacity:0; visibility:hidden; transform: translateY(6px); transition: all .16s ease;
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.dropdown li a{ display:block; padding: 9px 12px; border-radius: var(--radius-sm); font-size:.88rem; }
.dropdown li a:hover{ background: var(--fog); }
.header-cta{ flex:none; }
.nav-toggle{ display:none; }

/* ---------- Hero (simple, photo-led) ---------- */
.hero{ padding: 40px 0 8px; }
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-top:20px; }
.hero-photo-frame{
  margin-top: 32px; border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow:hidden; box-shadow: var(--shadow-card); background:#fff;
}
.hero-photo-frame img{ width:100%; height:auto; display:block; max-height:520px; object-fit:cover; }
.hero-call-row{ display:flex; justify-content:center; margin: 28px 0 8px; }

/* ---------- Persistent page layout: content + sticky quote sidebar ---------- */
.page-layout{
  display:grid; grid-template-columns: 1fr 372px; gap: 46px; align-items:start;
  padding-top: 28px;
}
.page-main{ grid-column: 1; min-width: 0; }
.page-aside{ grid-column: 2; }
.page-aside .quote-panel{ position: sticky; top: 26px; }
.page-main > .section:first-child{ padding-top: 0; }

/* ---------- Cards / grids ---------- */
.grid{ display:grid; gap: 22px; }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.card{
  background: var(--white); border-radius: var(--radius-md); padding: 26px 24px;
  border:1px solid var(--line); box-shadow: var(--shadow-card);
}
.card-icon{ width:44px; height:44px; border-radius: var(--radius-sm); background: var(--fog); display:flex; align-items:center; justify-content:center; margin-bottom: 16px; color: var(--spruce); }
.card-icon svg{ width:22px; height:22px; }
.card h3{ margin-bottom:.4em; }
.card a.card-link{ font-weight:700; color: var(--spruce); font-size:.92rem; display:inline-flex; align-items:center; gap:6px; margin-top:6px; }
.card a.card-link:hover{ color: var(--marigold-dark); }

.link-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.link-list a{ display:flex; align-items:center; gap:10px; font-weight:600; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--white); border:1px solid var(--line); }
.link-list a svg{ width:16px; height:16px; flex:none; color: var(--sky); }
.link-list a:hover{ border-color: var(--marigold); }

/* ---------- Service-area mosaic ---------- */
.mosaic{ display:grid; grid-template-columns: repeat(6, 1fr); gap:10px; margin-top: 30px; }
.mosaic a{
  background: var(--spruce); color:#fff; border-radius: var(--radius-md); padding: 22px 10px;
  text-align:center; font-weight:700; font-size:.86rem; position:relative; overflow:hidden;
  min-height:96px; display:flex; align-items:center; justify-content:center;
  transition: transform .15s ease, background .15s ease;
}
.mosaic a:hover{ background: var(--marigold); color: var(--spruce-dark); transform: translateY(-3px); }
.mosaic a.is-active{ background: var(--marigold); color: var(--spruce-dark); }
.mosaic a .pin{ position:absolute; top:8px; right:10px; font-size:.66rem; font-family:var(--font-mono); opacity:.8; }

/* ---------- Quote form ---------- */
.quote-panel{
  background: var(--white); border-radius: var(--radius-lg); padding: 28px 26px;
  box-shadow: var(--shadow-pop); border: 1px solid var(--line);
}
.quote-panel h3{ margin-bottom:4px; }
.quote-panel .muted{ margin-bottom: 18px; font-size:.92rem; }
.form-row{ display:grid; gap: 14px; }
.form-row.two{ grid-template-columns: 1fr 1fr; }
.field label{ display:block; font-size:.8rem; font-weight:700; margin-bottom:6px; color: var(--spruce-dark); }
.field input, .field select, .field textarea{
  width:100%; padding: 12px 14px; border-radius: var(--radius-sm); border:1px solid var(--line);
  font-family: var(--font-body); font-size:.94rem; background: var(--chalk); color:var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--sky); outline-offset:1px; background:#fff; }
.form-fine{ font-size:.76rem; color: rgba(22,36,31,0.6); margin-top:12px; }
.honey{ position:absolute; left:-9999px; opacity:0; }

.quote-inline{ background: var(--fog); }
.quote-inline .quote-panel{ margin: 0 auto; max-width: 640px; }

/* ---------- FAQ ---------- */
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{
  width:100%; text-align:left; background:none; border:none; padding: 20px 0; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  font-family: var(--font-display); font-weight:600; font-size:1.06rem; color: var(--spruce-dark);
}
.faq-q .plus{ font-family: var(--font-mono); font-size:1.3rem; color: var(--marigold-dark); transition: transform .2s ease; flex:none; }
.faq-item.open .faq-q .plus{ transform: rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition: max-height .25s ease; }
.faq-a p{ padding-bottom: 20px; color: rgba(22,36,31,0.78); max-width: 720px; }

/* ---------- Reviews ---------- */
.review{ background:#fff; border-radius: var(--radius-md); padding:22px; border:1px solid var(--line); color: var(--ink); }
.review p{ color: var(--ink); }
.review .stars{ color: var(--marigold-dark); letter-spacing:2px; margin-bottom:10px; font-size:.95rem; }
.review footer{ margin-top:14px; font-family: var(--font-mono); font-size:.78rem; color: var(--sky); font-weight:700; }

/* ---------- Local proof strip ---------- */
.landmark-strip{ display:flex; gap:14px; flex-wrap:wrap; margin-top:18px; }
.landmark-chip{
  font-family: var(--font-mono); font-size:.75rem; letter-spacing:.03em; background: var(--white);
  border:1px dashed var(--sky); color: var(--spruce-dark); padding: 7px 12px; border-radius: 999px;
}

/* ---------- Pricing table ---------- */
table.price-table{ width:100%; border-collapse: collapse; background:#fff; border-radius: var(--radius-md); overflow:hidden; box-shadow: var(--shadow-card); }
table.price-table th, table.price-table td{ padding: 16px 18px; text-align:left; border-bottom:1px solid var(--line); }
table.price-table th{ background: var(--spruce); color:#fff; font-family: var(--font-mono); font-size:.78rem; letter-spacing:.05em; text-transform:uppercase; }
table.price-table tr:last-child td{ border-bottom:none; }
table.price-table td.price{ font-weight:800; color: var(--spruce-dark); }

/* ---------- Footer ---------- */
footer.site-footer{ background: var(--spruce-dark); color: rgba(243,245,241,0.82); padding: 56px 0 28px; }
footer.site-footer h4{ color:#fff; font-family: var(--font-mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:16px; }
.footer-grid{ display:grid; grid-template-columns: 1.3fr .8fr .8fr 1.1fr; gap: 36px; }
.footer-grid ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; font-size:.9rem; }
.footer-grid ul a:hover{ color: var(--marigold); }
.footer-phone{ font-family: var(--font-display); font-size:1.5rem; color: var(--marigold); font-weight:700; margin: 10px 0; display:block; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,0.12); margin-top:40px; padding-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.8rem; color: rgba(243,245,241,0.55); }

/* ---------- Breadcrumb ---------- */
.breadcrumb{ font-family: var(--font-mono); font-size:.76rem; color: var(--sky); padding: 16px 0 0; }
.breadcrumb a{ color: var(--sky); }
.breadcrumb span{ opacity:.5; margin: 0 6px; }

/* ---------- Sticky mobile call bar ---------- */
.mobile-callbar{ display:none; }

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .grid-3{ grid-template-columns: repeat(2,1fr); }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .mosaic{ grid-template-columns: repeat(3,1fr); }
  .page-layout{ grid-template-columns: 1fr; gap: 28px; }
  .page-main{ grid-column: 1; order: 2; }
  .page-aside{ grid-column: 1; order: 1; }
  .page-aside .quote-panel{ position: static; }
}
@media (max-width: 720px){
  nav.mainnav > ul{ display:none; }
  .header-phone-big{ font-size:1.18rem; }
  .grid-3, .grid-2{ grid-template-columns: 1fr; }
  .form-row.two{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; }
  .mosaic{ grid-template-columns: repeat(2,1fr); }
  h1{ font-size: 2rem; }
  .mobile-callbar{
    display:flex; position:fixed; bottom:0; left:0; right:0; z-index:70;
    background: var(--spruce-dark); padding:10px 16px; justify-content:space-between; gap:10px;
    box-shadow: 0 -8px 24px rgba(0,0,0,.2);
  }
  .mobile-callbar a{ flex:1; text-align:center; padding:12px; border-radius:999px; font-weight:700; font-size:.9rem; }
  body{ padding-bottom: 66px; }
}