/* ==========================================================================
   MOUNTAIN DAWGS — SITE STYLESHEET
   Moving • Junk Removal • Interior Demolition — North Alabama

   This file is the ORIGINAL inline stylesheet from index.html, extracted so
   all pages share (and cache) one file. Existing rules are unchanged.
   Sections marked "ADDED" are new components that did not exist before, or
   styles for classes the markup already used but that were never written.
   ========================================================================== */

/* --------------------------------------------------------------- 1. TOKENS */
:root{
  --black:#020302;--ink:#070907;--panel:#0d110d;--panel2:#111711;
  --hunter:#2f432a;--hunter2:#455b37;--hunter3:#1d2a1b;--olive:#65704a;
  --tan:#81755b;--cream:#f2f0e8;--white:#fff;--muted:#c4c9bf;
  --line:rgba(255,255,255,.14);--greenline:rgba(69,91,55,.65);
  --shadow:0 22px 70px rgba(0,0,0,.52);--radius:26px
}

/* ----------------------------------------------------------------- 2. BASE */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--black);color:var(--white);font-family:Inter,Arial,sans-serif}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{width:min(1180px,calc(100% - 32px));margin:auto}
.gold{color:var(--olive)}

/* Clean black background: no bubbles, dots, or camouflage blobs */
.camo-bg,
.top,
.btn-gold,
.icon,
.progress i.on,
.contact,
.float .btn,
.gallery div:before{
  background:#050605;
}

/* ADDED — accessible focus ring for keyboard users (was missing sitewide) */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid #7d8f66;outline-offset:2px;border-radius:6px
}
/* ADDED — skip link for screen readers */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:#0d110d;color:#fff;
  padding:12px 18px;border:1px solid var(--greenline);border-radius:0 0 12px 0;font-weight:900}
.skip:focus{left:0}

/* --------------------------------------------------------- 3. TOP BAR / NAV */
.top{color:#fff;font-size:13px;font-weight:900;text-align:center;padding:9px 14px;letter-spacing:.2px;border-bottom:1px solid var(--greenline)}
nav{position:sticky;top:0;z-index:50;background:rgba(3,5,3,.94);backdrop-filter:blur(16px);border-bottom:1px solid var(--greenline)}
.navin{min-height:92px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;text-decoration:none}
.brand img{width:300px;max-width:38vw;height:auto;object-fit:contain;background:transparent}
.links{display:flex;align-items:center;gap:20px}
.links a{text-decoration:none;font-size:13px;font-weight:800}

/* ADDED — services dropdown (11 pages will not fit as a flat nav) */
.has-drop{position:relative}
.has-drop>button{background:none;border:0;color:#fff;font:inherit;font-size:13px;font-weight:800;
  cursor:pointer;padding:0;display:inline-flex;align-items:center;gap:6px}
.has-drop>button:after{content:"▾";font-size:11px;opacity:.8}
.drop{position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%) translateY(-6px);
  min-width:250px;background:#080b08;border:1px solid var(--greenline);border-radius:18px;padding:9px;
  box-shadow:var(--shadow);display:grid;gap:2px;opacity:0;visibility:hidden;transition:.18s}
.has-drop:hover .drop,.has-drop:focus-within .drop,.drop.open{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.drop a{display:block;padding:11px 13px;border-radius:12px;font-size:13px;font-weight:700;color:#dfe4d9}
.drop a:hover{background:rgba(69,91,55,.3);color:#fff}
.links a[aria-current="page"]{color:#96a67e}

/* ADDED — mobile menu */
.burger{display:none;background:none;border:1px solid var(--greenline);border-radius:12px;
  width:46px;height:44px;cursor:pointer;padding:0;place-items:center}
.burger span{display:block;width:20px;height:2px;background:#fff;margin:3px auto;border-radius:2px;transition:.2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.mobilemenu{display:none;border-top:1px solid var(--greenline);background:#050705;padding:14px 0 22px}
.mobilemenu.open{display:block}
.mobilemenu a{display:block;text-decoration:none;font-weight:800;font-size:15px;padding:13px 4px;
  border-bottom:1px solid rgba(255,255,255,.07);color:#e6eae1}
.mobilemenu .mm-head{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:#6d7d58;
  font-weight:900;padding:16px 4px 6px;border:0}
.mobilemenu .mm-actions{display:grid;gap:10px;margin-top:18px}
.mobilemenu .mm-actions .btn{width:100%}

/* -------------------------------------------------------------- 4. BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:999px;padding:14px 19px;font-weight:900;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:.2s transform,.2s box-shadow,.2s background}
.btn:hover{transform:translateY(-2px)}
.btn-gold{color:#fff;box-shadow:0 14px 30px rgba(20,30,18,.36);border-color:#5f7450}
.btn-dark{background:#090b09;color:#fff;border-color:rgba(255,255,255,.18)}
.btn-ghost{background:rgba(255,255,255,.05);border-color:rgba(87,108,70,.58);color:#fff}

/* ----------------------------------------------------------------- 5. HERO */
.hero{position:relative;overflow:hidden;padding:80px 0 90px;background:linear-gradient(145deg,#020302 0%,#0b0f0b 60%,#131c12 100%)}
.hero:before{content:"";position:absolute;inset:0;background:none}
.hero-grid{position:relative;display:grid;grid-template-columns:1.2fr .8fr;gap:46px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(89,111,72,.7);background:rgba(47,67,42,.38);color:#f3f5ea;border-radius:999px;padding:9px 13px;font-size:11px;font-weight:900;letter-spacing:1px;text-transform:uppercase}
.hero h1{font-family:'Archivo Black',sans-serif;font-size:clamp(48px,7vw,90px);line-height:.92;letter-spacing:-2px;margin:20px 0}
.tagline{font-size:clamp(24px,3vw,36px);font-weight:900;margin:0 0 18px;max-width:780px}
.hero p{font-size:17px;line-height:1.7;color:#d5d9d3;max-width:690px}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:27px}
.trust{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.trust span{font-size:12px;font-weight:800;border:1px solid rgba(83,105,68,.5);background:rgba(255,255,255,.04);padding:9px 12px;border-radius:999px}
.hero-card{border:1px solid var(--greenline);border-radius:30px;padding:28px;background:rgba(7,10,7,.84);box-shadow:var(--shadow);position:relative;overflow:hidden}
.hero-card:before{content:"";position:absolute;inset:0;background:none}
.hero-card>*{position:relative}
.hero-card h3{font-family:'Archivo Black',sans-serif;font-size:32px;line-height:1;margin:0 0 16px}
.hero-card .paw{font-size:70px;line-height:1;color:#73805a;filter:grayscale(.25)}
.hero-card p{font-size:14px;color:#d3d8cf}
.hero-card strong{display:block;font-size:21px;margin-top:14px}

/* ADDED — 6. PAGE HERO for the interior pages (same language as .hero) */
.pagehero{position:relative;overflow:hidden;padding:62px 0 58px;
  background:linear-gradient(145deg,#020302 0%,#0b0f0b 62%,#131c12 100%);
  border-bottom:1px solid var(--greenline)}
.pagehero h1{font-family:'Archivo Black',sans-serif;font-size:clamp(36px,5.4vw,66px);
  line-height:.98;letter-spacing:-1.5px;margin:16px 0 14px;max-width:900px}
.pagehero p{font-size:17px;line-height:1.7;color:#d5d9d3;max-width:760px;margin:0}

/* ADDED — 7. BREADCRUMBS */
.crumbs{font-size:12px;font-weight:700;color:#8e9a85;padding:16px 0 0}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.crumbs li:not(:last-child):after{content:"›";margin-left:8px;color:#5c6a54}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:#b9c4ad}

/* ---------------------------------------------------------------- 8. STATS */
.stats{margin-top:-30px;position:relative;z-index:5}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);background:#0d100d;border:1px solid var(--greenline);border-radius:24px;box-shadow:var(--shadow);overflow:hidden}
.stat{padding:24px;text-align:center;border-right:1px solid var(--line)}
.stat:last-child{border:0}
.stat b{font-family:'Archivo Black',sans-serif;font-size:29px;color:#77835e;display:block}
.stat span{font-size:12px;color:var(--muted);font-weight:700}

/* ------------------------------------------------------ 9. SECTIONS / CARDS */
section{padding:86px 0}
.light{background:#eceee9;color:#111}
.section-head{max-width:790px;margin:0 auto 42px;text-align:center}
.eyebrow{font-size:11px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;color:#6d7d58}
.section-head h2{font-family:'Archivo Black',sans-serif;font-size:clamp(37px,5vw,59px);line-height:1;margin:10px 0 14px}
.section-head p{color:var(--muted);line-height:1.7;margin:0}
.light .section-head p{color:#575b54}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:linear-gradient(145deg,#111611,#0b0e0b);border:1px solid var(--greenline);border-radius:24px;padding:26px;transition:.2s transform,.2s border;position:relative;overflow:hidden}
.card:after{content:"";position:absolute;inset:auto -50px -70px auto;width:170px;height:140px;border-radius:50%;background:rgba(59,77,48,.15)}
.card:hover{transform:translateY(-5px);border-color:#6d7f5b}
.icon{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;color:#fff;font-size:25px;border:1px solid #657752}
.card h3{margin:17px 0 8px}
/* ADDED — .card always has a dark background, but inside a .light section the
   heading inherited color:#111 and disappeared. Same trap as .demo-art h3,
   .steps h3 and .crosslinks h3 below. */
.card h3{color:var(--white)}
.card p{color:var(--muted);line-height:1.65;margin:0}
.card ul{color:var(--muted);padding-left:18px;line-height:1.7}
.wide{grid-column:span 2}

/* ADDED — 10. MASCOT SHOWCASE (markup existed, styles never written) */
.mascot-showcase{background:linear-gradient(160deg,#050705,#0e140d)}
.mascot-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.mascot-grid h2{font-family:'Archivo Black',sans-serif;font-size:clamp(36px,4.6vw,56px);line-height:1;margin:10px 0 16px}
.mascot-grid p{color:var(--muted);line-height:1.75;font-size:16px;max-width:560px}
.mascot-frame{border:1px solid var(--greenline);border-radius:30px;overflow:hidden;
  background:#000;box-shadow:var(--shadow);position:relative}
.mascot-frame img{width:100%;height:auto;display:block}
/* ADDED — owner credit under "Meet the Mountain Dawgs". Mountain Dawgs has no
   fixed roster (crews are built per job), so this names the owner only. */
.alpha{display:flex;align-items:center;gap:15px;margin:26px 0 18px;padding:16px 18px;
  border:1px solid var(--greenline);border-radius:20px;background:rgba(7,10,7,.7);
  max-width:430px;flex-wrap:wrap}
.alpha-badge{font-family:'Archivo Black',sans-serif;font-size:12px;letter-spacing:1.6px;
  color:#eef2eb;background:#2b3b27;border:1px solid #5f7650;border-radius:999px;
  padding:10px 15px;white-space:nowrap}
.alpha-who strong{display:block;font-size:19px;line-height:1.25}
.alpha-who span{font-size:11px;font-weight:900;color:#9fae8d;letter-spacing:.7px;text-transform:uppercase}
/* Placeholder shown until the owner supplies the mascot artwork. */
.mascot-frame .ph{aspect-ratio:3/4;display:grid;place-items:center;text-align:center;padding:30px;
  color:#76836e;font-size:13px;font-weight:800;letter-spacing:.5px;text-transform:uppercase}
.mascot-frame .ph span{font-size:58px;display:block;margin-bottom:14px;opacity:.7;text-transform:none}
.mascot-frame:after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 90px rgba(0,0,0,.7)}

/* ------------------------------------------------------------ 11. DEMO ART */
.demo-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:28px;align-items:center}
.demo-art{min-height:470px;border-radius:30px;background:linear-gradient(135deg,#121612,#050605);border:1px solid var(--greenline);padding:30px;position:relative;overflow:hidden;display:flex;align-items:end}
.demo-art:before{content:"";position:absolute;inset:30px;border-radius:22px;background:linear-gradient(135deg,rgba(49,68,42,.35),rgba(255,255,255,.02));border:1px solid rgba(81,103,65,.55)}
/* Original rule, kept as-is. No image is placed in this card at present, so it
   is currently unused — see the note on .demo-art h3 below. */
.demo-art img{position:absolute;inset:35px 35px auto auto;width:72%;border-radius:50%;clip-path:circle(38% at 50% 36%);opacity:.92}
/* The :before panel sits at inset:30px and the card padding is also 30px, so
   the text landed exactly on the inner border with no breathing room.
   This insets the content inside that panel. */
.demo-art div{position:relative;z-index:3;padding:0 26px 26px}
.demo-art h3{font-family:'Archivo Black',sans-serif;font-size:clamp(28px,3.3vw,42px);line-height:1.06;margin:0}
/* ADDED — this card sits inside .light, which sets color:#111. Without an
   explicit colour the heading inherited near-black text onto a near-black
   card and was invisible. Same trap as .card, .steps and .crosslinks. */
.demo-art h3{color:var(--white)}
.demo-art .eyebrow{color:#9fae8d}
.demo-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.demo-list div{background:#fff;border:1px solid #d4d8d0;border-radius:15px;padding:14px;font-weight:800}

/* ----------------------------------------------------------- 12. ESTIMATOR */
.estimator{background:linear-gradient(160deg,#070a07,#10170f);position:relative}
.estimator:before{content:"";position:absolute;inset:0;background:none}
.estimator>.wrap{position:relative}
.estimate-grid{display:grid;grid-template-columns:1.18fr .82fr;gap:24px;align-items:start}
.formbox,.resultbox{border:1px solid var(--greenline);border-radius:28px;background:rgba(5,8,5,.82);backdrop-filter:blur(8px);padding:28px}
.progress{display:flex;gap:7px;margin-bottom:24px}
.progress i{display:block;height:7px;flex:1;background:#2e332d;border-radius:99px}
.progress i.on{border:1px solid #677653}
.step{display:none}
.step.on{display:block}
.step h3{font-family:'Archivo Black',sans-serif;font-size:30px;margin:0 0 8px}
.step>p{color:var(--muted);margin-top:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.full{grid-column:1/-1}
label{display:block;font-size:12px;font-weight:900;margin:0 0 7px;color:#eef1e6}
input,select,textarea{width:100%;background:#0c100c;color:#fff;border:1px solid #3a4337;border-radius:14px;padding:13px 14px;font:inherit}
input:focus,select:focus,textarea:focus{outline:3px solid rgba(71,92,58,.22);border-color:#6d7c58}
option{background:#111}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.check{display:flex;align-items:center;gap:9px;padding:12px;border:1px solid #374235;border-radius:13px;background:#0b0f0b;font-size:13px;font-weight:700}
.check input{width:auto}
.formnav{display:flex;justify-content:space-between;gap:12px;margin-top:22px}
.resultbox{position:sticky;top:110px}
.resultbox h3{font-family:'Archivo Black',sans-serif;font-size:31px;margin:0}
.range{font-family:'Archivo Black',sans-serif;font-size:42px;color:#7a875f;margin:14px 0}
.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.result-grid div{border:1px solid var(--line);border-radius:14px;padding:13px;background:#0b0f0b}
.result-grid small{color:#9da59a;display:block}
.result-grid b{font-size:14px}
.disclaimer{font-size:11px;color:#9ea79b;line-height:1.55;margin-top:15px}
.upload-note{font-size:11px;color:#9ea79b;margin-top:8px}

/* ADDED — result box classes the markup uses but that had no styles at all
   (.price and .minimum rendered as plain text; the <ul> showed raw bullets) */
.resultbox .price{font-family:'Archivo Black',sans-serif;font-size:clamp(34px,4.4vw,44px);
  color:#7a875f;margin:14px 0 4px;line-height:1}
.resultbox .minimum{display:inline-block;font-size:11px;font-weight:900;letter-spacing:.6px;
  text-transform:uppercase;color:#c9d1bf;background:rgba(69,91,55,.28);
  border:1px solid var(--greenline);border-radius:999px;padding:6px 11px}
.resultbox ul{list-style:none;margin:20px 0 16px;padding:0;display:grid;gap:8px}
.resultbox ul li{display:flex;align-items:center;justify-content:space-between;gap:14px;
  border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:#0b0f0b}
.resultbox ul li span{font-size:12px;color:#9da59a;font-weight:700}
.resultbox ul li strong{font-size:14px;text-align:right}
.resultbox>p{font-size:12px;color:#9ea79b;line-height:1.6}
.resultbox .btn{width:100%;margin-top:8px}

/* ADDED — estimator validation + honeypot */
.field-error{color:#e8a5a5;font-size:11px;font-weight:800;margin-top:6px;display:none}
.invalid input,.invalid select,.invalid textarea,input.invalid,select.invalid,textarea.invalid{border-color:#9c5a5a}
.invalid .field-error{display:block}
.hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden}
.formstatus{margin-top:16px;border-radius:14px;padding:14px;font-size:13px;font-weight:700;display:none}
.formstatus.show{display:block}
.formstatus.ok{background:rgba(69,91,55,.25);border:1px solid var(--greenline);color:#e7ecdf}
.formstatus.bad{background:rgba(120,60,60,.22);border:1px solid #7c4a4a;color:#f2dede}

/* -------------------------------------------------------------- 13. GALLERY */
.gallery{display:grid;grid-template-columns:1.4fr 1fr 1fr;grid-template-rows:220px 220px;gap:14px}
.gallery div{border-radius:20px;border:1px solid var(--greenline);background:linear-gradient(135deg,#131813,#070907);position:relative;overflow:hidden;padding:20px;display:flex;align-items:end}
.gallery div:first-child{grid-row:1/3}
.gallery div:before{content:"";position:absolute;inset:0;opacity:.22}
.gallery b{position:relative;font-size:17px}
.gallery span{font-size:28px;display:block}

/* ADDED — owner-updatable photo grid for gallery.html */
.gal-filters{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-bottom:30px}
.gal-filters button{background:#0b0f0b;color:#dfe4d9;border:1px solid var(--greenline);
  border-radius:999px;padding:10px 16px;font:inherit;font-size:12px;font-weight:800;cursor:pointer;transition:.18s}
.gal-filters button:hover{border-color:#7d8f66}
.gal-filters button[aria-pressed="true"]{background:rgba(69,91,55,.32);color:#fff;border-color:#7d8f66}
.photogrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.photogrid figure{margin:0;border:1px solid var(--greenline);border-radius:20px;overflow:hidden;
  background:linear-gradient(135deg,#131813,#070907)}
.photogrid img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.photogrid figcaption{padding:14px 16px;font-size:13px;font-weight:800;color:#dfe4d9}
.photogrid .ph{aspect-ratio:4/3;display:grid;place-items:center;text-align:center;padding:20px;
  color:#7d8a75;font-size:13px;font-weight:800;border-bottom:1px solid var(--line)}
.photogrid .ph span{font-size:34px;display:block;margin-bottom:8px;opacity:.8}

/* -------------------------------------------------------------- 14. REVIEWS */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.review{background:#fff;border:1px solid #dadfd7;border-radius:22px;padding:24px}
.stars{color:#465a38;letter-spacing:2px}
.review p{color:#4e544b;line-height:1.65}
.review-note{margin-top:17px;border-radius:16px;background:#e8ebe5;padding:14px;font-size:12px;color:#4e554b;text-align:center}

/* ------------------------------------------------------------------ 15. FAQ */
details{border-bottom:1px solid #323a30;padding:17px 0}
summary{cursor:pointer;font-weight:900}
details p{color:var(--muted);line-height:1.7}
.light details{border-bottom-color:#d3d8cf}
.light details p{color:#575b54}

/* --------------------------------------------------------------- 16. PORTAL */
.portal{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.portal-card{border:1px solid var(--greenline);border-radius:24px;padding:26px;background:#101510}
.portal-card ul{color:var(--muted);line-height:1.8}
/* ADDED — dark card inside a .light section; see the .card h3 note. */
.portal-card h3{color:var(--white)}
.coming{display:inline-block;background:#2b3b27;border:1px solid #5f7650;color:#eef2eb;border-radius:99px;padding:7px 10px;font-size:10px;font-weight:900;letter-spacing:.8px;text-transform:uppercase}

/* -------------------------------------------------------- 17. CONTACT BAND */
.contact{border:1px solid #5d704e;border-radius:32px;padding:38px;display:flex;justify-content:space-between;gap:20px;align-items:center;color:#fff}
.contact h2{font-family:'Archivo Black',sans-serif;font-size:38px;margin:0}
.contact p{margin:6px 0 0;color:#e5e9e1}

/* --------------------------------------------------------------- 18. FOOTER */
footer{border-top:1px solid var(--greenline);padding:50px 0 28px;background:#050705}
.foot{display:grid;grid-template-columns:1.4fr .85fr .85fr 1.05fr;gap:28px}
.foot>div:first-child img{display:none}
.foot p,.foot a{color:#aeb6aa;line-height:1.65}
.fine{border-top:1px solid var(--line);margin-top:30px;padding-top:18px;color:#7f897c;font-size:10px}
/* ADDED — footer nav columns for the multi-page site */
.foot ul{list-style:none;margin:8px 0 0;padding:0;line-height:2}
.foot ul a{text-decoration:none;font-size:14px}
.foot ul a:hover{color:#dfe4d9}
.foot strong{display:block;margin-bottom:4px;letter-spacing:.4px}
.foot-areas{margin-top:26px;border-top:1px solid var(--line);padding-top:20px}
.foot-areas p{font-size:12px;color:#8b9487}

/* ---------------------------------------------------- 19. FLOATING ACTIONS */
.float{position:fixed;right:18px;bottom:18px;z-index:60}


/* ------------------------------------------ 20. ADDED — CONTENT COMPONENTS */
/* Prose blocks used across the service pages */
.prose{max-width:820px}
.prose h2{font-family:'Archivo Black',sans-serif;font-size:clamp(30px,3.6vw,44px);line-height:1.04;margin:44px 0 16px}
.prose h3{font-size:21px;margin:30px 0 10px}
.prose p{color:var(--muted);line-height:1.8;font-size:16px}
.light .prose p{color:#4f544c}
.prose strong{color:#fff}
.light .prose strong{color:#111}

/* Two-column split used on service pages */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:start}

/* Checklist — the "everything we handle" lists */
.checklist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.checklist li{position:relative;padding:12px 14px 12px 40px;border:1px solid var(--greenline);
  border-radius:14px;background:#0b0f0b;font-size:14px;font-weight:700;line-height:1.45}
.checklist li:before{content:"";position:absolute;left:15px;top:50%;width:7px;height:12px;
  margin-top:-8px;border:solid #8b9c72;border-width:0 2px 2px 0;transform:rotate(45deg)}
.light .checklist li{background:#fff;border-color:#d4d8d0;color:#1a1c19}

/* Callout / policy notice */
.notice{border:1px solid var(--greenline);border-left-width:5px;border-radius:16px;
  background:rgba(69,91,55,.14);padding:20px 22px;margin:26px 0}
.notice p{margin:0;color:#dfe4d9;line-height:1.7;font-size:15px}
.notice strong{color:#fff}
.light .notice{background:#e2e6dd;border-color:#a9b79b}
.light .notice p{color:#3c4239}
.light .notice strong{color:#111}

/* Numbered process steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:s}
.steps div{border:1px solid var(--greenline);border-radius:20px;padding:24px;background:#0b0f0b;counter-increment:s}
.steps div:before{content:counter(s);font-family:'Archivo Black',sans-serif;font-size:30px;
  color:#77835e;display:block;margin-bottom:10px}
.steps h3{margin:0 0 8px;font-size:17px;color:var(--white)}
.steps p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}

/* Areas served chips */
.areas{display:flex;flex-wrap:wrap;gap:9px;justify-content:center}
.areas span{font-size:13px;font-weight:800;border:1px solid rgba(83,105,68,.5);
  background:rgba(255,255,255,.04);padding:10px 14px;border-radius:999px}
.light .areas span{background:#fff;border-color:#d4d8d0;color:#1a1c19}

/* Pricing / policy table */
.ptable{width:100%;border-collapse:collapse;border:1px solid var(--greenline);border-radius:16px;overflow:hidden}
.ptable th,.ptable td{text-align:left;padding:15px 18px;border-bottom:1px solid var(--line);font-size:14px}
.ptable th{background:#0d110d;font-weight:900;font-size:12px;letter-spacing:.6px;text-transform:uppercase;color:#9fae8d}
.ptable td{color:var(--muted)}
.ptable tr:last-child td{border-bottom:0}
.tablewrap{overflow-x:auto}

/* Service cross-links at the bottom of every service page */
.crosslinks{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.crosslinks a{text-decoration:none;border:1px solid var(--greenline);border-radius:20px;padding:24px;
  background:linear-gradient(145deg,#111611,#0b0e0b);transition:.2s transform,.2s border;display:block;
  color:var(--white)}
.crosslinks a:hover{transform:translateY(-4px);border-color:#6d7f5b}
.crosslinks h3{margin:12px 0 6px;font-size:19px;color:var(--white)}
.crosslinks p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}
.crosslinks .icon{margin-bottom:2px}

/* Contact page detail cards */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.contact-card{border:1px solid var(--greenline);border-radius:24px;padding:28px;background:#0b0f0b}
.contact-card h3{margin:14px 0 10px;font-size:20px;color:var(--white)}
.contact-card p{color:var(--muted);line-height:1.7;margin:0 0 6px}
.contact-card a{font-weight:800}

/* Thank-you / utility pages */
.centerbox{max-width:660px;margin:0 auto;text-align:center}
.centerbox h1{font-family:'Archivo Black',sans-serif;font-size:clamp(38px,6vw,68px);line-height:1;margin:20px 0 16px}
.centerbox p{color:var(--muted);line-height:1.75;font-size:16px}
.centerbox .actions{justify-content:center}

/* ----------------------------------------------------- 21. RESPONSIVE */
@media(max-width:960px){
  .links a:not(.btn){display:none}
  .hero-grid,.demo-grid,.estimate-grid,.portal,.foot{grid-template-columns:1fr}
  .hero-card{max-width:620px}
  .cards{grid-template-columns:1fr 1fr}
  .resultbox{position:static}
  .stats-grid{grid-template-columns:1fr 1fr}
  .stat:nth-child(2){border-right:0}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .gallery{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .gallery div:first-child{grid-row:auto}
  .reviews{grid-template-columns:1fr}
  .contact{display:block}
  .contact .actions{margin-top:20px}
  .brand img{width:240px;max-width:55vw}
  /* ADDED */
  .has-drop{display:none}
  .burger{display:grid}
  .mascot-grid,.split,.contact-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .photogrid,.crosslinks{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .brand img{width:190px;max-width:58vw}
  .navin{min-height:76px}
  .links .btn{padding:11px 13px;font-size:12px}
  .hero{padding-top:48px}
  .hero h1{letter-spacing:-1px}
  .cards,.grid2,.checks,.demo-list,.gallery{grid-template-columns:1fr}
  .wide{grid-column:auto}
  .stats-grid{grid-template-columns:1fr}
  .stat{border-right:0!important;border-bottom:1px solid var(--line)!important}
  .stat:last-child{border-bottom:0!important}
  .formbox,.resultbox{padding:21px}
  .contact{padding:27px}
  .float .btn{padding:13px 15px;font-size:12px}
  /* ADDED */
  section{padding:58px 0}
  .checklist,.steps,.photogrid,.crosslinks{grid-template-columns:1fr}
  .pagehero{padding:40px 0 42px}
}

/* ADDED — respect reduced-motion preferences */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ADDED — print */
@media print{
  nav,.top,.float,.mobilemenu,.gal-filters{display:none!important}
  body{background:#fff;color:#000}
}