/* ==========================================================
   VIGIL HAULING & JUNK REMOVAL — shared site styles (Oct 2026)
   Palette: Night / Charcoal / Safety orange / Burnt orange / Sand
   Type: Anton (headlines) + Inter (everything else)
   ========================================================== */
:root{
  --night:#1C1813; --night-2:#14110D; --char:#26211B; --char-2:#3A332B;
  --orange:#F5A623; --orange-hover:#FFB838;
  --burnt:#8F5300; --burnt-hover:#6E4000; --burnt-deep:#7A4700;
  --sand:#F7F2EA; --sand-2:#EFE6D8; --paper:#FFFFFF; --butter:#FFF4DE; --zebra:#FBF8F3;
  --stone:#5E564C; --dust:#A39A8D; --mist:#C9C1B4; --cream:#E4DCCF;
  --line:#E6DED1; --line-soft:#ECE4D8; --line-dark:#2E2821; --line-dark-2:#4A4239;
  --green:#2E7D32; --red:#B3261E;
  --max:1240px; --radius:16px;
  --font-display:'Anton', Impact, 'Arial Narrow', sans-serif;
  --font-body:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* legacy names used by older page styles, mapped onto the new palette */
  --dark:#1C1813; --charcoal:#26211B; --ltgray:#F7F2EA; --orange-dim:#8F5300;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{transition-duration:.01ms !important; animation-duration:.01ms !important} }
body{margin:0; background:var(--sand); color:var(--night); font-family:var(--font-body); font-size:17px; line-height:1.55; overflow-x:hidden}
img{max-width:100%; height:auto}
a{color:var(--burnt)} a:hover{color:var(--burnt-hover)}
:focus-visible{outline:3px solid var(--orange); outline-offset:2px}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.skip-link{position:absolute; left:12px; top:-60px; z-index:100; background:var(--orange); color:var(--night); padding:10px 16px; border-radius:8px; font-weight:800; text-decoration:none}
.skip-link:focus{top:12px}

.wrap{max-width:var(--max); margin:0 auto; padding:0 32px}
@media (max-width:600px){ .wrap{padding:0 20px} }

/* ---------- type ---------- */
.eyebrow{margin:0; font-size:12.5px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--burnt)}
.on-dark .eyebrow, .eyebrow.on-dark{color:var(--orange)}
.display{font-family:var(--font-display); font-weight:400; text-transform:uppercase; line-height:1.04; letter-spacing:.005em; margin:0}
.h1{font-size:clamp(40px, 6.2vw, 68px)}
.h2{font-size:clamp(32px, 4.6vw, 52px)}
.h3{font-size:clamp(26px, 3.4vw, 36px)}
.lede{margin:14px 0 0; font-size:18px; color:var(--stone); max-width:680px}
.on-dark .lede{color:var(--mist)}
.accent{color:var(--orange)}
.muted{color:var(--stone)}
.on-dark .muted{color:var(--mist)}

/* ---------- buttons ---------- */
.b{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 24px; border-radius:10px; border:2px solid transparent; font-family:var(--font-body); font-weight:800; font-size:16.5px; line-height:1.15; text-align:center; text-decoration:none; cursor:pointer; transition:background .15s, color .15s, border-color .15s}
.b svg{width:20px; height:20px; flex:none}
.b-sm{min-height:46px; padding:0 18px; font-size:14.5px}
.b-sm svg{width:18px; height:18px}
.b-lg{min-height:56px; padding:0 26px; font-size:17px}
.b-orange{background:var(--orange); color:var(--night)} .b-orange:hover{background:var(--orange-hover); color:var(--night)}
.b-dark{background:var(--night); color:#fff} .b-dark:hover{background:#000; color:#fff}
.b-ghost-light{border-color:var(--sand); color:var(--sand); background:transparent} .b-ghost-light:hover{background:rgba(247,242,234,.1); color:#fff}
.b-ghost-dark{border-color:var(--night); color:var(--night); background:transparent} .b-ghost-dark:hover{background:var(--night); color:#fff}
.b-block{display:flex; width:100%}
.link-strong{font-weight:800; text-decoration-thickness:2px; text-underline-offset:3px}

/* ---------- utility bar + header ---------- */
.util-bar{background:var(--night-2); color:var(--mist); font-size:13px}
.util-bar .wrap{display:flex; flex-wrap:wrap; gap:6px 24px; align-items:center; justify-content:space-between; padding-top:9px; padding-bottom:9px}
.util-bar a{color:var(--mist); text-decoration:none} .util-bar a:hover{color:#fff}
.util-bar b{color:var(--sand)}
.util-links{display:flex; gap:20px}

.site-header{position:sticky; top:0; z-index:50; display:block; padding:0; text-align:left; background:var(--night); border-bottom:1px solid var(--line-dark)}
.site-header .wrap{position:relative; display:flex; align-items:center; gap:16px 28px; min-height:84px}
.lockup{display:flex; align-items:center; gap:12px; text-decoration:none; flex:none}
.lockup-badge{width:56px; height:56px; border-radius:12px; background:var(--sand); display:flex; align-items:center; justify-content:center; flex:none}
.lockup-badge img{width:48px; height:auto; display:block}
.lockup-text{display:flex; flex-direction:column; line-height:1}
.lockup-name{font-family:var(--font-display); font-size:30px; color:#fff; letter-spacing:.02em}
.lockup-tag{font-size:10.5px; font-weight:700; letter-spacing:.24em; color:var(--orange); margin-top:5px; white-space:nowrap}
.site-nav{display:flex; flex-wrap:wrap; gap:4px 22px; flex:1; font-size:15px; font-weight:600}
.site-nav a{color:var(--sand); text-decoration:none; padding:6px 0; border-bottom:2px solid transparent}
.site-nav a:hover{color:var(--orange)}
.site-nav a[aria-current="page"]{color:var(--orange); border-bottom-color:var(--orange)}
.site-nav .nav-extra{display:none}
.header-ctas{display:flex; gap:10px; flex:none}
.menu-btn{display:none; width:46px; height:46px; border:1.5px solid var(--line-dark-2); border-radius:10px; background:transparent; color:var(--sand); align-items:center; justify-content:center; cursor:pointer; margin-left:auto}
.menu-btn svg{width:22px; height:22px}
/* "Text a photo" is a phone action (hero CTA + phone action bar); in the desktop header it pushed the nav onto two rows */
.header-ctas .hide-mid{display:none}
@media (min-width:981px) and (max-width:1180px){
  .lockup-tag{display:none}
  .site-header .wrap{gap:16px 24px}
  .site-nav{gap:4px 16px; font-size:14.5px}
}
@media (max-width:980px){
  .util-bar{display:none}
  .site-header .wrap{min-height:66px}
  .lockup-badge{width:44px; height:44px; border-radius:10px}
  .lockup-badge img{width:38px}
  .lockup-name{font-size:23px}
  .lockup-tag{font-size:8.5px; margin-top:4px}
  .header-ctas{display:none}
  .menu-btn{display:flex}
  .site-nav{display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0; padding:6px 20px 18px; background:var(--night); border-bottom:1px solid var(--line-dark); max-height:calc(100vh - 66px); overflow:auto}
  .site-nav.open{display:flex}
  .site-nav a{padding:14px 0; border-bottom:1px solid var(--line-dark); font-size:17px}
  .site-nav a[aria-current="page"]{border-bottom-color:var(--line-dark)}
  .site-nav .nav-extra{display:block}
}

/* ---------- phone action bar ---------- */
.action-bar{display:none}
@media (max-width:980px){
  .action-bar{display:grid; grid-template-columns:1fr 1.6fr 1fr; gap:8px; position:fixed; left:0; right:0; bottom:0; z-index:60; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); background:var(--night-2); border-top:1px solid var(--line-dark)}
  body{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
  .action-bar a{min-height:54px; border-radius:12px; display:flex; align-items:center; justify-content:center; gap:4px 8px; text-decoration:none; font-weight:700}
  .action-bar .ab-side{border:1.5px solid var(--line-dark-2); color:var(--sand); flex-direction:column; font-size:12.5px}
  .action-bar .ab-main{background:var(--orange); color:var(--night); font-size:15.5px; font-weight:800}
  .action-bar svg{width:20px; height:20px}
}

/* ---------- sections & cards ---------- */
.sec{padding:96px 0}
@media (max-width:700px){ .sec{padding:64px 0} }
.sec-tight{padding:64px 0}
.sec-dark{background:var(--night); color:var(--sand)}
.sec-sand2{background:var(--sand-2)}
.sec-orange{background:var(--orange); color:var(--night)}
.sec-head{margin-bottom:40px}
.sec-head .display{margin-top:8px}
.split-head{display:flex; flex-wrap:wrap; gap:16px 40px; align-items:flex-end; justify-content:space-between; margin-bottom:36px}
.cards{display:flex; flex-wrap:wrap; gap:20px}
.card{flex:1 1 250px; min-width:0; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:26px}
.card-col{display:flex; flex-direction:column}
.card-dark{background:var(--char); border-color:var(--char); color:var(--sand)}
.card-night{background:var(--night); border-color:var(--night); color:var(--sand)}
.card h3{margin:0; font-size:21px; font-weight:800; line-height:1.3}
.card p{margin:0}
.card .card-link{margin-top:auto; padding-top:18px; font-weight:800; font-size:15px}
.icon-box{width:52px; height:52px; border-radius:12px; background:var(--night); color:var(--orange); display:flex; align-items:center; justify-content:center; flex:none}
.icon-box svg{width:26px; height:26px}
.price-big{font-family:var(--font-display); font-size:40px; line-height:1.1; margin:6px 0 0}
.price-big small{font-size:22px}
.row{display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid var(--line-soft); font-size:16px}
.row:last-child{border-bottom:0}
.row b{white-space:nowrap}
.note{margin:14px 0 0; padding:12px 14px; border-radius:10px; background:var(--butter); font-size:14.5px; color:var(--night)}
.chips{display:flex; flex-wrap:wrap; gap:10px}
.chip{display:inline-flex; align-items:center; min-height:40px; padding:0 16px; border-radius:999px; border:1.5px solid var(--line-dark-2); color:var(--sand); font-weight:700; font-size:14.5px; text-decoration:none}
.chip:hover{border-color:var(--orange); color:#fff}
.chip-on{background:var(--orange); border-color:var(--orange); color:var(--night)} .chip-on:hover{color:var(--night)}
.stars{color:var(--burnt); letter-spacing:2px}
.on-dark .stars, .hero .stars{color:var(--orange)}
.breadcrumb{font-size:13.5px; color:var(--dust); margin:0 0 40px}
.breadcrumb a{color:var(--dust)} .breadcrumb a:hover{color:#fff}
.breadcrumb [aria-current]{color:var(--sand)}

/* price tables on service pages */
.pt{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.pt-row{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:15px 20px; border-bottom:1px solid var(--line-soft)}
.pt-row:nth-child(even){background:var(--zebra)}
.pt-row:last-child{border-bottom:0}
.pt-row .n{font-weight:700; display:block}
.pt-row .d{display:block; font-size:14px; color:var(--stone); margin-top:1px}
.pt-row .p{font-size:21px; font-weight:800; color:var(--burnt); white-space:nowrap; text-align:right}
.pt-row .p small{display:block; font-size:12.5px; font-weight:700; color:var(--stone)}
.pt-head{padding:14px 20px; background:var(--night); color:var(--sand)}
.pt-head b{display:block; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--orange)}
.pt-head span{display:block; font-size:13.5px; color:var(--mist); margin-top:2px}

/* FAQ blocks */
.faq-grid{display:flex; flex-wrap:wrap; gap:20px}
.faq-item{flex:1 1 440px; min-width:0; background:var(--paper); border-radius:var(--radius); padding:24px; border:1px solid var(--line)}
.faq-item h3{margin:0 0 6px; font-size:18px; font-weight:800}
.faq-item p{margin:0; font-size:16px; color:var(--stone)}

/* two-column layout helper */
.cols{display:flex; flex-wrap:wrap; gap:32px}
.col-main{flex:1.3 1 520px; min-width:0}
.col-side{flex:1 1 320px; min-width:0; display:flex; flex-direction:column; gap:20px}

/* ---------- footer ---------- */
.site-footer{background:var(--night-2); color:var(--mist); padding:56px 0 40px; font-size:15px; text-align:left; line-height:1.55}
.site-footer a{color:var(--mist); text-decoration:none} .site-footer a:hover{color:var(--orange)}
.foot-grid{display:flex; flex-wrap:wrap; gap:36px 56px}
.foot-brand{flex:1.4 1 280px; min-width:0}
.foot-brand .lockup-name{font-size:28px}
.foot-brand p{margin:14px 0 0; line-height:1.75}
.foot-brand .foot-phone{color:var(--sand); font-weight:800}
.foot-col{flex:1 1 150px; display:flex; flex-direction:column; gap:8px; min-width:0}
.foot-title{margin:0 0 4px; color:#fff; font-weight:800; font-size:15px}
.foot-bottom{margin-top:36px; padding-top:20px; border-top:1px solid var(--line-dark); display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between; font-size:13.5px; color:var(--dust)}

/* ---------- call / text number tooltip (desktop) ---------- */
.call-tooltip{position:absolute; z-index:200; background:var(--char); border:1px solid var(--orange); border-radius:10px; padding:14px 16px; min-width:210px; box-shadow:0 8px 24px rgba(0,0,0,.35); font-family:var(--font-body)}
.call-tooltip-label{display:block; font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--dust); margin-bottom:4px}
.call-tooltip-num{display:block; color:var(--sand); font-weight:800; font-size:18px; margin-bottom:10px}
.call-tooltip-copy{width:100%; min-height:40px; border:0; border-radius:8px; background:var(--orange); color:var(--night); font:800 14px var(--font-body); cursor:pointer}
.call-tooltip-copy:hover{background:var(--orange-hover)}
.call-tooltip-copy.copied{background:var(--green); color:#fff}