/* milestonefire.com, rebuilt to match the original site (WordPress/Elementor,
   archived 2024): its red, black and greys, Roboto headings, Lato text, pill
   buttons and red dotted dividers. Token names follow
   services/checklists/engine/styles.css. The original had no dark mode, so
   neither does this. */
:root{
  --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#F4F4F4; --surface-3:#EBEBEB;
  --border:#E2E2E2; --border-strong:#BDBDBD;
  --text:#000000; --text-muted:#696969; --text-faint:#9A9A9A;
  --accent:#D61D2A; --accent-strong:#B0141F; --accent-contrast:#FFFFFF; --accent-soft:#FBE4E6;
  --focus:#D61D2A;
  --danger:#B3261E; --danger-contrast:#FFFFFF;
  --success:#1E7B45;
  --ink:#262626;      /* top bar, footer */
  --ink-2:#2C2C2C;
  --hero-text:#FFFFFF;
  --shadow:0 10px 40px rgba(0,0,0,.08);
  --radius:6px;
  --pill:50px;
  --heading:"Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --body:"Lato",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color-scheme:light;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--heading); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased}
img{max-width:100%; height:auto; display:block}
button,input,textarea,select{font:inherit}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
.wrap{max-width:1240px; margin:0 auto; padding:0 16px}
.skip{position:absolute; left:-9999px}
.skip:focus{left:16px; top:16px; z-index:100; background:#fff; padding:8px 12px}
[hidden]{display:none !important}
.icon{width:16px; height:16px; flex:none}

/* ---- buttons: the original's uppercase pills */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-width:190px; padding:15px 32px; border-radius:var(--pill); border:2px solid var(--accent); background:var(--accent); color:var(--accent-contrast); font-family:var(--heading); font-size:14px; font-weight:500; letter-spacing:.02em; text-transform:uppercase; text-decoration:none; cursor:pointer; transition:background .2s, color .2s, border-color .2s, box-shadow .2s}
.btn:hover{background:var(--accent-strong); border-color:var(--accent-strong); color:var(--accent-contrast)}
.btn.outline{background:transparent; border-color:rgba(255,255,255,.85); color:#fff}
.btn.outline:hover{background:#fff; color:var(--text)}
.btn.small{min-width:0; padding:12px 26px}
.btn[disabled]{opacity:.55; pointer-events:none}

/* ---- red dotted divider under headings (". . . ———") */
.divider{display:flex; align-items:center; justify-content:center; gap:4px; margin:14px auto 18px}
.divider i{width:3px; height:3px; border-radius:50%; background:var(--accent)}
.divider b{width:64px; height:3px; border-radius:2px; background:var(--accent); margin-left:3px}

/* ---- top bar + header */
.topbar{background:var(--ink); color:#fff; font-size:14px}
.topbar .wrap{display:flex; justify-content:space-between; align-items:center; min-height:44px; gap:12px}
.topbar a{color:#fff; text-decoration:none}
.topbar a:hover{color:var(--accent)}
.topbar .contact-links{display:flex; gap:18px; flex-wrap:wrap}
.social{display:flex; gap:10px}
.topbar .social a{display:inline-flex}
.topbar .social .icon{width:15px; height:15px}
.site-header{position:sticky; top:0; z-index:30; background:#fff; box-shadow:0 1px 0 var(--border)}
.site-header .wrap{display:flex; justify-content:space-between; align-items:center; min-height:96px; gap:16px}
.logo img{width:240px}
.nav{display:flex; gap:4px}
.nav a{color:var(--text); text-decoration:none; font-size:14px; font-weight:500; text-transform:uppercase; padding:10px 12px}
.nav a:hover,.nav a[aria-current="page"]{color:var(--accent)}
.menu-toggle{display:none; background:none; border:0; padding:8px; cursor:pointer; color:var(--text)}
.menu-toggle .icon{width:26px; height:26px}
@media (max-width:900px){
  .site-header .wrap{min-height:76px}
  .logo img{width:190px}
  .menu-toggle{display:inline-flex}
  .nav{display:none; position:absolute; left:0; right:0; top:100%; flex-direction:column; background:#fff; padding:8px 16px 16px; box-shadow:0 12px 20px rgba(0,0,0,.08)}
  .nav.open{display:flex}
  .topbar .social{display:none}
}

/* ---- hero: photo under a dark overlay, everything centered */
.hero{position:relative; color:var(--hero-text); text-align:center; background:#000 center/cover no-repeat}
.hero::before{content:""; position:absolute; inset:0; background:rgba(0,0,0,.62)}
.hero .wrap{position:relative; padding-top:100px; padding-bottom:100px}
.hero h1{font-size:clamp(34px,5vw,56px); line-height:1.2; font-weight:500; margin:0 auto; max-width:1000px}
.hero p{font-size:18px; margin:0}
.hero .hero-logo{width:min(300px,70%); margin:0 auto 22px}
.hero .buttons{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:44px}
.hero.plain{background:#000}
.hero.plain::before{display:none}
.hero.plain .wrap{padding-top:90px; padding-bottom:70px}
.hero.plain h1{font-size:clamp(36px,5vw,60px)}
.hero.plain .buttons{margin-top:30px}

/* ---- certification logos */
.certs{padding:40px 0 10px}
.certs ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; align-items:center}
.certs img{width:100%; max-width:240px; margin:0 auto}
@media (max-width:700px){ .certs ul{grid-template-columns:repeat(2,1fr)} }

/* ---- intro paragraph with the red drop cap */
.intro{padding:20px 0 70px; color:#444; font-size:16.5px; line-height:1.85}
.intro p{margin:0}
.drop-cap::first-letter{float:left; font-size:68px; line-height:.9; color:var(--accent); font-weight:500; margin:6px 10px 0 0}

/* ---- service cards: photo, then a white card with a red edge */
.services{background:linear-gradient(#fff 0,#fff 30%,var(--surface-2) 100%); padding:20px 0 90px}
.service-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media (max-width:900px){ .service-grid{grid-template-columns:1fr} }
.service{display:flex; flex-direction:column}
.service img{width:100%; aspect-ratio:3/2; object-fit:cover}
.service .body{position:relative; background:#fff; box-shadow:var(--shadow); margin:-24px 0 0; padding:34px 20px 34px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:18px; flex:1}
.service .body::before{content:""; position:absolute; left:0; top:34px; width:3px; height:22px; background:var(--accent)}
.service h3{margin:0; font-size:17px; font-weight:600}
.extended{list-style:none; margin:30px 0 0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:10px}
.extended li{background:#fff; border-left:3px solid var(--accent); box-shadow:var(--shadow); padding:10px 16px; font-weight:500}

/* ---- call to action band */
.cta{background:var(--ink-2); color:#fff; text-align:center; padding:90px 0}
.cta h2{font-size:clamp(26px,3.6vw,40px); font-weight:500; margin:0; line-height:1.25}
.cta p{margin:0 0 34px; font-size:17px}
.cta .btn.outline{box-shadow:0 10px 30px rgba(0,0,0,.35)}

/* ---- about page */
.section-title{font-size:clamp(28px,3.4vw,40px); font-weight:500; text-align:center; margin:0}
.intro .buttons{display:flex; justify-content:center; margin-top:30px}
.team{padding:20px 0 80px}
.team-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center}
@media (max-width:900px){ .team-grid{grid-template-columns:1fr} }
.team-grid p{color:#444; text-align:center}
.tabs{margin-top:28px}
.tablist{display:flex; justify-content:center; gap:6px; border-bottom:1px solid var(--border)}
.tablist button{background:none; border:0; border-bottom:3px solid transparent; padding:12px 22px; font-weight:600; font-size:15px; cursor:pointer; color:var(--text-muted)}
.tablist button[aria-selected="true"]{color:var(--accent); border-bottom-color:var(--accent)}
.tabpanel{padding:20px 4px 0; color:#444; text-align:center}
.tabpanel p{margin:0 0 8px}
.no-js-label{display:none}
html:not(.js) .tablist{display:none}
html:not(.js) .tabpanel[hidden]{display:block !important}
html:not(.js) .no-js-label{display:block; font-weight:600; color:var(--text)}
.projects{padding:10px 0 80px}
.project-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:30px}
.project-grid img{width:100%; aspect-ratio:1; object-fit:cover}
@media (max-width:700px){ .project-grid{grid-template-columns:repeat(2,1fr)} }

/* ---- testimonials: three across, dots underneath (the original's slider) */
.testimonials{background:var(--surface-2); padding:80px 0}
.slider{display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 2*20px)/3); gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; margin-top:30px; padding-bottom:6px}
.slider::-webkit-scrollbar{display:none}
@media (max-width:900px){ .slider{grid-auto-columns:100%} }
.quote{scroll-snap-align:start; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:30px 28px; margin:0; display:flex; flex-direction:column; gap:14px}
.stars{color:#F5A623; letter-spacing:2px; font-size:17px}
.quote blockquote{margin:0; color:#444; font-size:15.5px; line-height:1.75; flex:1}
.quote figcaption{font-weight:700; color:var(--accent)}
.dots{display:flex; justify-content:center; gap:8px; margin-top:22px}
.dots button{width:10px; height:10px; padding:0; border-radius:50%; border:0; background:#C9C9C9; cursor:pointer}
.dots button[aria-current="true"]{background:var(--accent)}

/* ---- contact page: white card overlapping the black hero */
.contact-card{position:relative; background:#fff; box-shadow:var(--shadow); margin-top:-36px; padding:60px 16px 70px}
#contact-form{max-width:800px; margin:0 auto}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px 12px}
.form-grid .full{grid-column:1/-1}
@media (max-width:640px){ .form-grid{grid-template-columns:1fr} }
.field{display:flex; flex-direction:column; gap:8px; min-width:0}
.field label{color:#252C35; font-weight:500; font-size:16px}
.field input,.field select,.field textarea{width:100%; padding:14px 18px; border:1px solid #9A9A9A; border-radius:5px; background:#fff; color:var(--text); font-family:var(--heading); font-size:16px}
.field input,.field select{height:56px}
.field textarea{min-height:158px; resize:vertical; border-color:#252C35}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--focus); outline-offset:0; border-color:var(--focus)}
.field [aria-invalid="true"]{border-color:var(--danger)}
.field-error{font-size:14px; color:var(--danger)}
.field-error:empty{display:none}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
#contact-form .btn{width:100%; margin-top:20px; font-size:16px}
.form-status{margin-top:16px; padding:12px 16px; border-radius:5px; font-size:15px}
.form-status:empty{display:none}
.form-status.ok{background:color-mix(in srgb,var(--success) 12%,#fff); color:var(--success); border:1px solid var(--success)}
.form-status.error{background:color-mix(in srgb,var(--danger) 10%,#fff); color:var(--danger); border:1px solid var(--danger)}
.info-boxes{display:grid; grid-template-columns:1fr 1fr; gap:18px; padding:90px 0 100px}
@media (max-width:700px){ .info-boxes{grid-template-columns:1fr} }
.info-box{border:2px solid #000; border-radius:4px; padding:44px 20px; text-align:center; color:var(--text); text-decoration:none; display:flex; flex-direction:column; align-items:center; gap:10px}
.info-box .circle{width:80px; height:80px; border-radius:50%; background:#EBEBEB; display:flex; align-items:center; justify-content:center; margin-bottom:8px; transition:background .2s, color .2s}
.info-box .circle .icon{width:26px; height:26px}
.info-box strong{font-weight:500; font-size:18px}
.info-box span{color:var(--text-muted); font-size:18px}
a.info-box:hover .circle{background:var(--accent); color:#fff}

/* ---- footer */
.footer{background:var(--ink); color:#fff; font-family:var(--body)}
.footer .wrap.cols{display:grid; grid-template-columns:1fr 1fr; gap:40px; padding-top:80px; padding-bottom:70px}
@media (max-width:760px){ .footer .wrap.cols{grid-template-columns:1fr} }
.footer .logo img{width:300px}
.footer p{font-size:16px; line-height:1.6; max-width:420px}
.footer h4{color:var(--accent); font-family:var(--body); font-weight:700; font-size:20px; margin:0 0 18px}
.footer .links{display:grid; grid-template-columns:1fr 1fr; gap:14px 30px; max-width:420px}
.footer .links a{color:#fff; text-decoration:none; font-size:15px}
.footer .links a:hover{color:var(--accent)}
.footer .social a{display:inline-flex; width:32px; height:32px; border-radius:50%; background:var(--accent); color:#fff; align-items:center; justify-content:center}
.footer .social a:hover{background:#fff; color:var(--accent)}
.footer .social .icon{width:15px; height:15px}
.footer-bottom{background:var(--accent); font-family:var(--heading); font-size:15px}
.footer-bottom .wrap{min-height:72px; display:flex; align-items:center}
.not-found{padding:90px 0; text-align:center}

/* Scroll-in effect, like the original's Elementor fade-ins. Off for people
   who ask for less motion, and when JavaScript doesn't run. */
.js .reveal:not(.in){opacity:0; transform:translateY(20px)}
.reveal{transition:opacity .6s ease, transform .6s ease}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
  .js .reveal:not(.in){opacity:1; transform:none}
}