/* The Blue Collar Crew — unified design system. One file, all pages. */
:root{
  --navy:#1a2e4d; --navy2:#2e5984; --rust:#b85c29; --rust-dk:#9d4d22;
  --bone:#f5f2ec; --ink:#16191f; --grey:#5c6470; --line:#e3e0d7; --tint:#f4f7fb;
  --gold:#b08e4a; --gold-lt:#d8be86; --white:#fff;
  --serif:Georgia,'Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);line-height:1.6;background:#fff}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--serif);color:var(--navy);line-height:1.15;font-weight:700}
.label{font-size:13px;letter-spacing:3px;text-transform:uppercase;color:var(--rust);font-weight:700}
a{color:var(--navy2)}
.muted{color:var(--grey)} .center{text-align:center}

/* topbar */
.topbar{background:var(--navy);color:#cdd8e6;font-size:13.5px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:38px}
.topbar a{color:#fff;text-decoration:none;font-weight:600}
.topbar .tline{font-family:var(--serif);font-style:italic;color:#aebfd6}

/* nav */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);transition:box-shadow .25s ease}
header.scrolled{box-shadow:0 6px 24px rgba(16,25,42,.10)}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none}
.brand img{height:50px;width:auto}
.brand b{font-family:var(--serif);color:var(--navy);font-size:19px;letter-spacing:.5px;line-height:1.1}
.brand b span{display:block;font-size:11px;letter-spacing:2px;color:var(--rust);font-weight:700;font-family:var(--sans)}
.navlinks{display:flex;gap:24px;align-items:center}
.navlinks a{color:var(--ink);text-decoration:none;font-size:15px;font-weight:600}
.navlinks a:hover{color:var(--rust)}
.btn{display:inline-block;background:var(--rust);color:#fff;padding:13px 24px;border-radius:8px;text-decoration:none;font-weight:700;font-size:15px;border:none;cursor:pointer;transition:.2s;will-change:transform}
.btn:hover{background:var(--rust-dk)} .btn:active{transform:translateY(1px)}
.btn.navy{background:var(--navy)} .btn.navy:hover{background:var(--navy2)}
.btn.gold{background:var(--gold)} .btn.gold:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;color:#fff;border:2px solid #fff}
.btn.ghost:hover{background:#fff;color:var(--navy)}
.btn.ghostnavy{background:transparent;color:var(--navy);border:2px solid var(--navy)}
.btn.ghostnavy:hover{background:var(--navy);color:#fff}
.btn.ghostgold{background:transparent;color:var(--gold);border:2px solid var(--gold)}
.btn.ghostgold:hover{background:var(--gold);color:#fff}
.menu-toggle{display:none;background:none;border:none;font-size:28px;color:var(--navy);cursor:pointer}

/* hero */
.hero{background:linear-gradient(165deg,var(--navy) 0%,#243d63 60%,var(--navy2) 100%);color:#fff;padding:84px 0 76px;text-align:center;position:relative;border-top:none}
.hero.page{padding:62px 0 56px}
.hero .label{color:#e9b489}
.hero h1{color:#fff;font-size:54px;margin:14px 0 18px}
.hero.page h1{font-size:44px}
.hero p.sub{font-size:21px;color:#d7e2f0;max-width:800px;margin:0 auto 32px}
.hero .cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.crumb{font-size:13px;color:#9fb6d6;margin-bottom:6px}.crumb a{color:#cfe0f5}

/* trust + stats */
.trust{background:var(--bone);border-bottom:1px solid var(--line)}
.trust .wrap{display:flex;justify-content:center;gap:38px;flex-wrap:wrap;padding:18px 24px;font-weight:700;color:var(--navy);font-size:15px}
.trust span{display:flex;align-items:center;gap:9px}
.trust .ic{color:var(--rust);font-size:18px}
.stats{background:#fff;border-bottom:1px solid var(--line)}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:42px 24px;text-align:center}
.stats .num{font-family:var(--serif);font-size:46px;font-weight:800;color:var(--navy);line-height:1}
.stats .num .u{color:var(--rust)}
.stats .lbl{font-size:14px;color:var(--grey);font-weight:600;margin-top:8px}

/* sections */
section{padding:66px 0;border-top:1px solid var(--line)}
section h2{font-size:38px;margin-bottom:12px}
.lead{font-size:18px;color:var(--grey);max-width:820px;margin-bottom:34px}
.center .lead{margin-left:auto;margin-right:auto}
.why p{font-size:18px;color:#3a4150;max-width:880px;margin:0 auto 18px;text-align:center}
.why .kicker{font-family:var(--serif);font-size:23px;color:var(--navy);font-weight:700}
.pull{background:var(--bone);border-left:6px solid var(--rust);padding:22px 28px;border-radius:10px;font-size:19px;color:#41382e;max-width:880px;margin:26px auto 0;text-align:left}

/* grids + cards */
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
.card{border:1px solid var(--line);border-radius:12px;padding:24px;background:#fff;transition:.2s}
.card:hover{border-color:var(--rust);box-shadow:0 10px 26px rgba(26,46,77,.08)}
.card h3{font-size:20px;margin-bottom:7px} .card p{color:var(--grey);font-size:15px}
.card .ic{font-size:26px;margin-bottom:10px;display:block}
.services{background:var(--tint)}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.svc-grid .card h3{font-size:18px;color:var(--navy)} .svc-grid .card.flag{border-top:3px solid var(--rust)}
.pill{display:inline-block;background:var(--bone);color:var(--navy);font-size:12px;font-weight:700;padding:4px 11px;border-radius:20px;border:1px solid var(--line)}

/* deep service section (services.html) */
.svc-block{padding:46px 0;border-top:1px solid var(--line)}
.svc-block:first-of-type{border-top:none}
.svc-block .head{display:flex;align-items:center;gap:14px;margin-bottom:8px}
.svc-block .head .ic{font-size:30px}
.svc-block h2{font-size:30px;margin:0}
.svc-block .cols{columns:2;column-gap:36px;margin-top:14px}
.svc-block .cols div{break-inside:avoid;padding:6px 0 6px 22px;position:relative;color:#3a4150;font-size:15.5px}
.svc-block .cols div:before{content:"✓";color:var(--rust);position:absolute;left:0;font-weight:700}

/* tiers */
.tier{position:relative}
.tier .pname{font-family:var(--serif);font-size:21px;color:var(--navy);font-weight:700}
.tier .pprice{font-size:30px;font-weight:800;color:var(--navy);margin:6px 0 14px}
.tier .pprice span{font-size:15px;font-weight:600;color:var(--grey)}
.tier ul{list-style:none;margin-bottom:18px}
.tier li{font-size:14.5px;color:#41495a;padding:5px 0 5px 24px;position:relative}
.tier li:before{content:"✓";color:var(--rust);position:absolute;left:0;font-weight:700}
.tier.feat{border:2px solid var(--rust);box-shadow:0 12px 30px rgba(26,46,77,.10)}
.tier .ribbon{position:absolute;top:-13px;right:18px;background:var(--rust);color:#fff;font-size:12px;font-weight:700;letter-spacing:1px;padding:4px 12px;border-radius:20px}

/* concierge accent (division) */
.concierge{background:linear-gradient(160deg,var(--navy) 0%,var(--navy2) 100%);color:#fff}
.concierge h2{color:#fff} .concierge .label{color:var(--gold)} .concierge .lead{color:#d7e2f0}
.concierge .feat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:26px 0 30px}
.concierge .feat-row div{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:18px}
.concierge .feat-row h3{color:#fff;font-size:17px;margin-bottom:5px} .concierge .feat-row p{color:#c5d3e6;font-size:14.5px}

/* realtor band */
.realtor{background:var(--ink);color:#fff}
.realtor h2{color:#fff} .realtor .lead{color:#c2ccd9} .realtor .label{color:#e9b489}
.realtor .card{background:#1c2330;border-color:#2b3344} .realtor .card h3{color:#fff} .realtor .card p{color:#aeb8c6}

/* standards */
.standards .card{background:var(--bone);border-color:var(--line)}
.standards .num{font-family:var(--serif);font-size:30px;color:var(--rust);font-weight:700;line-height:1}

/* pbp */
.pbp{background:var(--bone)}
.pbp .box{display:flex;gap:30px;align-items:center;flex-wrap:wrap}
.pbp .box>div{flex:1;min-width:280px}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.step .n{width:46px;height:46px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-family:var(--serif);font-size:20px;margin-bottom:12px}
.step h3{font-size:17px;margin-bottom:4px} .step p{color:var(--grey);font-size:14.5px}

/* faq */
.faq details{border-bottom:1px solid var(--line);padding:18px 0}
.faq summary{font-family:var(--serif);font-size:19px;color:var(--navy);font-weight:700;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary:before{content:"+";color:var(--rust);font-weight:700;margin-right:12px}
.faq details[open] summary:before{content:"–"}
.faq p{color:var(--grey);font-size:16px;margin-top:12px}

/* contact */
.contact{background:var(--navy);color:#fff}
.contact h2{color:#fff} .contact .lead{color:#cdd8e6}
.reach a{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid rgba(255,255,255,.16);border-radius:10px;background:rgba(255,255,255,.05);text-decoration:none;color:#fff;font-weight:600;margin-bottom:12px;font-size:16px}
.reach a:hover{border-color:var(--rust);background:rgba(184,92,41,.16)} .reach .ic{font-size:22px}

/* footer */
footer{background:#11192a;color:#cdd8e6;padding:42px 0 30px;font-size:14px}
footer .frow{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px}
footer .fbrand{display:flex;align-items:center;gap:12px}
footer .fbrand img{height:46px} footer .fbrand b{font-family:var(--serif);color:#fff;font-size:17px}
footer a{color:#fff;text-decoration:none}
footer .cols{display:flex;gap:50px;flex-wrap:wrap}
footer .cols h4{font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:#8fa3bf;margin-bottom:10px;font-family:var(--sans)}
footer .cols a{display:block;color:#cdd8e6;margin-bottom:7px;font-weight:500} footer .cols a:hover{color:#fff}
.disc{border-top:1px solid #2b3a52;padding-top:16px;margin-top:26px;font-size:12.5px;color:#8298b5;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

/* motion */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@keyframes floatlabel{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.hero .label{animation:floatlabel 3.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.hero .label{animation:none}}

/* single-job savings calculator */
.calc{max-width:900px;margin:26px auto 0;border:1px solid var(--line);border-radius:16px;background:#fff;padding:28px}
.calc .chips{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:24px}
.calc .chip{flex:1;min-width:150px;border:2px solid var(--line);background:#fff;border-radius:12px;padding:13px;font-weight:700;color:var(--navy);cursor:pointer;font-size:15px;text-align:center;font-family:var(--sans);transition:.15s}
.calc .chip span{display:block;color:var(--grey);font-weight:600;font-size:13px;margin-top:3px}
.calc .chip:hover{border-color:var(--rust)}
.calc .chip.active{border-color:var(--rust);background:var(--bone);box-shadow:0 6px 18px rgba(184,92,41,.12)}
.calc .slider{max-width:520px;margin:0 auto 24px;text-align:center}
.calc .slider label{display:block;font-size:14px;font-weight:600;color:var(--navy);margin-bottom:10px}
.calc .slider label b{color:var(--rust);font-family:var(--serif);font-size:18px}
.calc .slider input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:6px;background:var(--line);outline:none}
.calc .slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;background:var(--rust);cursor:pointer;border:3px solid #fff;box-shadow:0 2px 8px rgba(184,92,41,.4)}
.calc .slider input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--rust);cursor:pointer;border:3px solid #fff;box-shadow:0 2px 8px rgba(184,92,41,.4)}
.calc .slider .ends{display:flex;justify-content:space-between;font-size:12px;color:var(--grey);margin-top:6px}
.calc .compare{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.calc .col{border:1px solid var(--line);border-radius:12px;padding:20px;text-align:center;position:relative}
.calc .col.alacarte{background:var(--tint)}
.calc .col.best{border:2px solid var(--rust);box-shadow:0 10px 26px rgba(26,46,77,.10)}
.calc .col .t{font-size:12.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--navy2)}
.calc .col.alacarte .t{color:var(--grey)}
.calc .col .p{font-family:var(--serif);font-size:32px;font-weight:800;color:var(--navy);margin:8px 0 6px}
.calc .col .s{font-size:13px;color:var(--grey);line-height:1.4}
.calc .col .badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--rust);color:#fff;font-size:11px;font-weight:800;letter-spacing:1px;padding:3px 12px;border-radius:20px}
.calc .note{text-align:center;font-size:17px;color:var(--navy);margin:22px 0 6px}
.calc .note b{color:var(--rust)}
.calc .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.calc .fine{text-align:center;font-size:12.5px;color:var(--grey);margin-top:12px;font-style:italic}
@media(max-width:760px){.calc .compare{grid-template-columns:1fr}.calc .chip{min-width:120px}}

/* responsive */
@media(max-width:880px){
  .stats .wrap{grid-template-columns:repeat(2,1fr);gap:28px}
  .navlinks{display:none} .menu-toggle{display:block}
  .navlinks.open{display:flex;position:absolute;top:76px;left:0;right:0;background:#fff;flex-direction:column;padding:18px 24px;border-bottom:1px solid var(--line);gap:16px}
  .hero h1{font-size:38px}.hero.page h1{font-size:32px}.hero p.sub{font-size:18px}
  section h2{font-size:30px}
  .g2,.g3,.g4,.svc-grid,.concierge .feat-row,.contact .grid,.steps{grid-template-columns:1fr}
  .svc-block .cols{columns:1}
  .topbar .tline{display:none}
}