@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&display=swap');
:root{
  /* Black / white / yellow identity — matched to the DPC Groundworks logo */
  --charcoal: #16140f;      /* Near-black */
  --charcoal-2: #201d18;
  --charcoal-3: #2a261e;
  --amber: #FFC600;         /* Bold brand yellow — backgrounds, buttons, icons */
  --amber-dark: #B8860B;    /* Dark goldenrod — hover states + small accent text/links */
  --amber-light: #FFE375;   /* Light yellow — text/accents on dark backgrounds */
  --amber-pale: #FFF6DC;    /* Pale yellow wash — hover backgrounds, pale cards */
  --cream: #F7F5F1;         /* Paper */
  --cream-deep: #E9E3DA;    /* Warm grey */
  --white: #ffffff;
  --ink: #141210;
  --text: #17140f;          /* Ink */
  --muted: #6f6a58;
  --border: #e3dcd0;
  --border-dark: #d0c7b6;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  color: var(--text);
  background: var(--cream);
  line-height:1.6;
  padding-bottom: 56px; /* space for sticky mobile call bar */
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.container{ max-width:1140px; margin:0 auto; padding:0 24px; }
h1,h2,h3,h4{ font-weight:800; line-height:1.15; color: var(--charcoal); letter-spacing:-0.01em; }
h1{ font-size:2.6rem; }
h2{ font-size:2rem; margin-bottom:14px; }
h3{ font-size:1.25rem; margin-bottom:8px; }
p{ margin-bottom:14px; color:var(--text); }
.eyebrow{
  text-transform:uppercase; letter-spacing:2.5px; font-size:0.75rem;
  color: var(--charcoal); font-weight:700; margin-bottom:10px; display:block;
}
.section{ padding:64px 0; }
.section.tight{ padding:44px 0; }
@media (max-width:700px){
  /* Every section on the homepage carries the same 64px top+bottom padding
     regardless of screen width. Across a dozen stacked sections that adds
     up to nearly two extra screens of pure whitespace on mobile, so trim it
     back here rather than everywhere it's used. */
  .section{ padding:40px 0; }
}
.section.dark{ background: var(--cream-deep); }
.section.cream{ background: var(--cream); }
.section.white{ background: var(--white); }

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 26px; border-radius:4px; font-weight:700; font-size:0.95rem;
  border:2px solid transparent; cursor:pointer;
}
.btn-amber{ background: var(--amber); color: var(--charcoal); }
.btn-amber:hover{ background: var(--amber-dark); color: var(--white); }
.btn-outline{ border-color: var(--charcoal); color: var(--charcoal); background:transparent; }
.btn-outline-dark{ border-color: var(--charcoal); color: var(--charcoal); background:transparent; }
.btn-outline:hover{ background:var(--charcoal); color:var(--white); }
.btn-block{ width:100%; justify-content:center; }

/* ---------- TOP UTILITY BAR ---------- */
.top-bar{ background: var(--ink); }
.top-bar-inner{
  max-width:1140px; margin:0 auto; padding:8px 24px;
  display:flex; align-items:center; justify-content:flex-end; gap:24px;
}
.top-bar a{
  display:inline-flex; align-items:center; gap:6px;
  color:var(--cream); font-size:0.82rem; font-weight:600;
}
.top-bar a:hover{ color:var(--amber-light); }
.top-bar svg{ width:14px; height:14px; color:var(--amber-light); flex-shrink:0; }
@media (max-width:760px){ .top-bar{ display:none; } }

/* ---------- HEADER ---------- */
header.site-header{
  background: var(--charcoal);
  position:sticky; top:0; z-index:100;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px; max-width:1140px; margin:0 auto;
}
.logo-lockup{ display:flex; align-items:center; gap:12px; }
.logo-lockup .mark{ width:42px; height:42px; flex-shrink:0; }
.logo-lockup .word{ line-height:1.1; }
.logo-lockup .word .dpc{ font-size:1.25rem; font-weight:800; color:var(--white); letter-spacing:0.3px; }
.logo-lockup .word .sub{ font-size:0.6rem; letter-spacing:2px; color:var(--amber-light); text-transform:uppercase; font-weight:700; }
/* Header logo: the mark is now cropped tight to the lettering (no dead
   padding around it like the old square file), so it reads bigger and
   bolder at the same header height. Height-only + width:auto keeps its
   natural, wider aspect ratio instead of forcing it back into a square. */
.header-logo.logo-lockup .mark{ width:auto; height:84px; }
@media (max-width:560px){ .header-logo.logo-lockup .mark{ height:64px; } }
/* Footer logo: same cropped mark, sized to sit cleanly above the footer
   copy without the text lockup underneath it. */
.footer-logo.logo-lockup .mark{ width:auto; height:56px; }
nav.main-nav{ display:flex; align-items:center; gap:18px; flex-shrink:0; white-space:nowrap; }
nav.main-nav a{ color:var(--cream); font-size:0.88rem; font-weight:600; }
nav.main-nav a:hover{ color: var(--amber-light); }
nav.main-nav .has-dropdown{ position:relative; }
nav.main-nav .dropdown{
  display:none; position:absolute; top:100%; left:0; background: var(--white);
  min-width:230px; padding:8px 0; border-radius:4px; box-shadow:0 12px 24px rgba(0,0,0,0.24);
  border:1px solid var(--border);
}
nav.main-nav .has-dropdown:hover .dropdown{ display:block; }
nav.main-nav .dropdown a{ display:block; padding:9px 18px; font-size:0.87rem; white-space:normal; color:var(--charcoal); }
nav.main-nav .dropdown a:hover{ background: var(--amber-pale); color:var(--charcoal); }
.header-cta{ display:flex; align-items:center; gap:14px; flex-shrink:0; }

/* ---------- HAMBURGER / MOBILE NAV ---------- */
.nav-toggle{
  display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px;
  width:36px; height:36px; background:transparent; border:none; cursor:pointer; padding:0; flex-shrink:0;
}
.nav-toggle span{ display:block; width:20px; height:2px; background:var(--white); border-radius:2px; }
.mobile-nav{
  display:none; flex-direction:column; background:var(--white); border-top:1px solid var(--border);
  max-height:0; overflow:hidden;
}
.mobile-nav.open{ display:flex; max-height:2000px; }
.mobile-nav a{
  padding:13px 24px; border-bottom:1px solid var(--border); color:var(--charcoal);
  font-weight:600; font-size:0.92rem;
}
.mobile-nav a.sub-link{ padding-left:42px; font-size:0.86rem; color:var(--muted); font-weight:500; }
.mobile-nav a:hover{ background:var(--amber-pale); color:var(--charcoal); }

/* ---------- HERO ---------- */
.hero{
  background: linear-gradient(135deg, #f4ede0 0%, #e8d3b8 100%);
  color: var(--charcoal);
  padding:80px 0 70px;
  position:relative;
  overflow:hidden;
}
.hero:before{
  content:""; position:absolute; right:-80px; top:-80px; width:360px; height:360px;
  border-radius:50%; background: radial-gradient(circle, rgba(154,84,51,0.22) 0%, rgba(226,135,47,0) 70%);
}
.hero:after{
  content:""; position:absolute; left:-100px; bottom:-120px; width:320px; height:320px;
  border-radius:50%; background: radial-gradient(circle, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0) 70%);
}
.hero .hero-grid{ display:flex; align-items:center; gap:48px; }
.hero .hero-copy{ flex:1.1; }
.hero .hero-media{ flex:1; }
.hero h1{ color:var(--charcoal); font-size:2.9rem; margin-bottom:18px; }
.hero p.lead{ font-size:1.1rem; color:var(--text); max-width:520px; margin-bottom:26px; }
.hero .hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:28px; }
.trust-row{ display:flex; gap:22px; flex-wrap:wrap; margin-top:20px; }
.trust-row .trust-item{ font-size:0.8rem; color:var(--muted); display:flex; align-items:center; gap:6px; }
.trust-row .trust-item b{ color:var(--charcoal); }

/* ---------- FULL-BLEED HERO ---------- */
.hero-full{
  background-size:cover; background-position:center 65%;
  position:relative; padding:130px 0 90px; min-height:560px; display:flex; align-items:flex-end;
}
.hero-full:before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(20,18,16,0.88) 10%, rgba(20,18,16,0.45) 55%, rgba(20,18,16,0.55) 100%);
}
.hero-full .container{ position:relative; z-index:1; }
.hero-full-copy{ max-width:800px; }
.hero-full-copy h1{
  color:var(--white); font-size:2.5rem; text-transform:uppercase; letter-spacing:-0.01em;
  line-height:1.2; margin-bottom:20px;
}
.hero-full-copy h1 span{
  display:block; font-size:1.05rem; font-weight:700; text-transform:uppercase; letter-spacing:0.5px;
  color:var(--cream-deep); margin-top:14px; line-height:1.4;
}
.hero-full-copy p.lead{ color:var(--cream); font-size:1.08rem; max-width:600px; margin-bottom:26px; }
.hero-full .hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; }
.btn-outline-white{ border:2px solid var(--white); color:var(--white); background:transparent; }
.btn-outline-white:hover{ background:var(--white); color:var(--charcoal); }
.trust-strip{ display:flex; gap:26px; flex-wrap:wrap; justify-content:center; }
.trust-strip .trust-item{ font-size:0.85rem; color:var(--muted); display:flex; align-items:center; gap:6px; }
.trust-strip .trust-item b{ color:var(--charcoal); }
@media (max-width:700px){
  .hero-full{ padding:90px 0 56px; min-height:0; }
  .hero-full-copy h1{ font-size:1.7rem; }
  .hero-full-copy h1 span{ font-size:0.92rem; }
}

.page-hero{
  background: var(--cream-deep); color:var(--charcoal); padding:52px 0;
}
.page-hero h1{ color:var(--charcoal); font-size:2.1rem; margin-bottom:8px; }
.page-hero .breadcrumb{ font-size:0.82rem; color:var(--muted); margin-bottom:10px; }
.page-hero .breadcrumb a{ color:var(--charcoal); text-decoration:underline; }
.page-hero p{ color:var(--text); max-width:640px; }

/* ---------- PLACEHOLDER IMAGERY ---------- */
.ph{
  background:
    repeating-linear-gradient(135deg, var(--cream-deep), var(--cream-deep) 12px, #e2d3b4 12px, #e2d3b4 24px);
  border-radius:6px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:var(--muted); position:relative; overflow:hidden;
  min-height:220px;
  border: 1px dashed var(--amber);
}
.ph .ph-label{
  background:rgba(27,26,18,0.78); color:#fff; padding:8px 16px; border-radius:4px; font-size:0.78rem;
  font-weight:600; max-width:80%;
}
.ph.tall{ min-height:340px; }
.ph.short{ min-height:150px; }
.ph.square{ aspect-ratio:1/1; min-height:0; }

/* ---------- REAL PHOTOS (same footprint as .ph placeholders) ---------- */
.photo{
  border-radius:6px; overflow:hidden; position:relative; background:var(--border);
  min-height:220px;
}
.photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.photo.tall{ min-height:340px; }
.photo.short{ min-height:150px; }
.photo.square{ aspect-ratio:1/1; min-height:0; }
.photo.square img{ aspect-ratio:1/1; }
.photo .cap{
  position:absolute; left:0; right:0; bottom:0; padding:8px 12px;
  background:linear-gradient(0deg, rgba(0,0,0,0.65), rgba(0,0,0,0));
  color:#fff; font-size:0.72rem; font-weight:600;
}

/* ---------- CARDS / GRIDS ---------- */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.card{
  background: var(--white); border:1px solid var(--border); border-radius:6px; padding:26px;
}
.card.dark{ background: var(--amber-pale); border-color: var(--border); }
.card.dark h3, .card.dark p{ color: var(--charcoal); }
.card-icon{
  width:44px; height:44px; border-radius:50%; background:var(--amber-pale);
  display:flex; align-items:center; justify-content:center; font-size:1.3rem; margin-bottom:14px;
}
.service-card{
  background:var(--white); border:1px solid var(--border); border-radius:6px; overflow:hidden;
  display:flex; flex-direction:column;
}
.service-card .ph{ border-radius:0; border:none; min-height:170px; }
.service-card .service-card-body{ padding:22px; flex:1; display:flex; flex-direction:column; }
.service-card h3{ font-size:1.1rem; }
.service-card .more{ margin-top:auto; color:var(--amber-dark); font-weight:700; font-size:0.88rem; padding-top:10px; }
.service-card.flagship{ border:2px solid var(--amber); position:relative; }
.service-card.flagship .flag-tag{
  position:absolute; top:12px; left:12px; background:var(--amber); color:var(--charcoal);
  font-size:0.68rem; font-weight:800; letter-spacing:1px; text-transform:uppercase;
  padding:5px 10px; border-radius:3px; z-index:2;
}

/* ---------- LISTS ---------- */
.check-list{ list-style:none; }
.check-list li{
  position:relative; padding:9px 0 9px 28px; border-bottom:1px solid var(--border); font-size:0.96rem;
}
.check-list li:before{
  content:"✓"; position:absolute; left:0; top:9px; color:var(--amber-dark); font-weight:800;
}
.section.dark .check-list li{ border-color: var(--border); }

/* ---------- QUOTE / CALLOUT ---------- */
.callout{
  background: var(--amber-pale); border-left:4px solid var(--amber); color:var(--charcoal);
  padding:22px 26px; border-radius:4px; margin:24px 0;
}
.callout p{ color:var(--charcoal); font-style:italic; margin-bottom:0; }

/* ---------- STATS ---------- */
.stat-row{ display:flex; gap:36px; flex-wrap:wrap; }
.stat{ text-align:left; }
.stat .num{ font-size:2.1rem; font-weight:800; color:var(--amber-dark); display:block; }
.stat .label{ font-size:0.82rem; color:var(--muted); text-transform:uppercase; letter-spacing:1px; }

/* ---------- TESTIMONIALS ---------- */
.testimonial{ background:var(--white); border:1px solid var(--border); border-radius:6px; padding:24px; }
.testimonial .stars{ color: var(--amber); letter-spacing:2px; margin-bottom:10px; }
.testimonial .who{ font-weight:700; margin-top:10px; color:var(--charcoal); }
.testimonial .where{ font-size:0.82rem; color:var(--muted); }

/* ---------- AREAS ---------- */
.area-pill{
  display:inline-block; background:var(--white); border:1px solid var(--border);
  padding:8px 16px; border-radius:20px; font-size:0.88rem; font-weight:600; margin:0 8px 8px 0;
}
.area-pill.hq{ background:var(--amber); border-color:var(--amber); color:var(--charcoal); }
.area-pill.placeholder-pill{ background:#efe4cf; border:1px dashed var(--amber-dark); color:var(--amber-dark); }
.area-group h3{ font-size:1rem; text-transform:uppercase; letter-spacing:1px; color:var(--amber-dark); margin-bottom:0; }

/* ---------- CTA BAND ---------- */
.cta-band{
  background: linear-gradient(120deg, var(--amber) 0%, var(--amber-dark) 100%);
  color: var(--charcoal); padding:44px 0; text-align:center;
}
.cta-band h2{ color:var(--charcoal); margin-bottom:8px; }
.cta-band .btn-outline-dark:hover{ background:var(--charcoal); color:var(--white); }

/* ---------- FOOTER ---------- */
footer.site-footer{ background: var(--cream-deep); color:var(--text); padding:56px 0 24px; }
footer.site-footer h4{ color:var(--charcoal); font-size:0.95rem; margin-bottom:14px; }
footer .footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; margin-bottom:36px; }
footer .footer-grid a{ display:block; color:var(--muted); font-size:0.88rem; margin-bottom:9px; }
footer .footer-grid a:hover{ color:var(--charcoal); text-decoration:underline; }
footer .accreditations{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
footer .accreditations span{
  border:1px solid var(--border); border-radius:4px; padding:5px 10px; font-size:0.72rem; color:var(--muted);
}
.badge-row{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.badge-row span{
  border:1px solid var(--border); border-radius:20px; padding:8px 18px; font-size:0.82rem; font-weight:700;
  color:var(--charcoal); background:var(--white); letter-spacing:0.3px;
}
footer .foot-bottom{
  border-top:1px solid var(--border); padding-top:20px; font-size:0.8rem; color:var(--muted);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
}

/* ---------- MOBILE STICKY CALL BAR ---------- */
.mobile-call-bar{
  display:none; position:fixed; bottom:0; left:0; right:0; z-index:200;
  background:var(--white); border-top:1px solid var(--border);
  padding:10px 16px;
}
.mobile-call-bar a{
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:var(--amber); color:var(--charcoal); font-weight:800; padding:12px; border-radius:5px;
}

/* ---------- BLOG ---------- */
.blog-card{ background:var(--white); border:1px solid var(--border); border-radius:6px; overflow:hidden; }
.blog-card .ph{ border-radius:0; border:none; min-height:170px; }
.blog-card .blog-card-body{ padding:20px; }
.blog-card .meta{ font-size:0.78rem; color:var(--muted); margin-bottom:6px; text-transform:uppercase; letter-spacing:0.5px; }
.blog-post-body h2{ margin-top:34px; }
.blog-post-body h3{ margin-top:22px; }
.blog-post-body p{ font-size:1.02rem; }
.blog-post-body ul{ margin:0 0 16px 22px; }
.blog-post-body li{ margin-bottom:8px; }

/* ---------- FORM ---------- */
.contact-form label{ display:block; font-size:0.85rem; font-weight:700; margin-bottom:6px; color:var(--charcoal); }
.contact-form input, .contact-form select, .contact-form textarea{
  width:100%; padding:11px 12px; border:1px solid var(--border); border-radius:4px; margin-bottom:16px;
  font-family:inherit; font-size:0.95rem; background:var(--white);
}
.contact-form textarea{ min-height:110px; resize:vertical; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1180px){
  nav.main-nav{ display:none; }
  .nav-toggle{ display:flex; }
}
@media (min-width: 1181px){
  .mobile-nav{ display:none !important; }
  .nav-toggle{ display:none; }
}
@media (max-width: 900px){
  .hero .hero-grid{ flex-direction:column; }
  .hero h1{ font-size:2.2rem; }
  .grid-2, .grid-3, .grid-4{ grid-template-columns:1fr; }
  footer .footer-grid{ grid-template-columns:1fr 1fr; }
  .mobile-call-bar{ display:block; }
  body{ padding-bottom:64px; }
}
@media (max-width: 560px){
  .header-cta{ gap:10px; }
  .btn-amber.btn{ padding:11px 16px; font-size:0.85rem; }
  .dave-photo-pair{ grid-template-columns:1fr; }
  /* The squeezed 2-column footer left just half the width for the
     accreditation pills, so longer ones like "First Aid Certified" wrapped
     onto their own line each, one under another. Full-width stacked
     sections give every column room to lay out properly. */
  footer .footer-grid{ grid-template-columns:1fr; gap:28px; }
}

/* Footer column headings ("Services", "Areas We Cover", "Get in Touch") are
   real links to their pages. On desktop they look exactly like the plain
   heading did before. On mobile the detailed sub-content (blurb,
   accreditations, individual service/area links, contact details) is
   hidden, leaving just the three headings as simple, working nav links to
   the relevant page, so the footer doesn't force a long scroll on phone. */
footer .footer-col-link{ color:inherit; text-decoration:none; }
footer .footer-col-link:hover{ text-decoration:underline; }

@media (max-width:700px){
  footer .footer-blurb,
  footer .accreditations,
  footer .social-links,
  footer .footer-services-list,
  footer .footer-areas-list,
  footer .footer-contact-details{
    display:none;
  }
  footer.site-footer h4{ margin-bottom:0; }
  footer .footer-grid > div{
    border-bottom:1px solid var(--border); padding-bottom:14px; margin-bottom:14px;
  }
  footer .footer-grid > div:last-child{ border-bottom:none; margin-bottom:0; }
  footer .footer-col-link{
    display:flex; align-items:center; justify-content:space-between;
    font-size:1rem;
  }
  footer .footer-col-link::after{
    content:"→"; color:var(--amber-dark); font-weight:700; margin-left:10px;
  }
}

/* ---------- CENTERED HERO (contemporary layout) ---------- */
.hero-centered{ padding:76px 0 0; text-align:center; }
.hero-copy-centered{ max-width:640px; margin:0 auto; }
.hero-copy-centered .eyebrow{ display:block; text-align:center; }
.hero-copy-centered h1{ color:var(--charcoal); font-size:3.4rem; margin-bottom:18px; letter-spacing:-0.02em; }
.hero-copy-centered p.lead{ font-size:1.15rem; color:var(--text); max-width:560px; margin:0 auto 26px; }
.hero-media-full{ margin-top:44px; }
.hero-media-full .photo{ border-radius:10px 10px 0 0; max-width:1140px; margin:0 auto; box-shadow:0 -12px 40px rgba(154,84,51,0.14); }
.hero-media-full .photo.tall{ height:440px; }
.hero-media-full .photo img{ object-position: center 75%; }
@media (max-width:900px){
  .hero-centered{ padding:52px 0 0; }
  .hero-copy-centered h1{ font-size:2.3rem; }
  .hero-media-full{ margin-top:30px; }
  .hero-media-full .photo.tall{ height:260px; }
}

/* ---------- MODERNIZED SERVICE CARDS (tile feel) ---------- */
.service-card{ border-radius:12px; box-shadow:0 2px 10px rgba(27,26,18,0.06); transition:transform 0.15s ease, box-shadow 0.15s ease; }
.service-card:hover{ transform:translateY(-3px); box-shadow:0 10px 24px rgba(27,26,18,0.12); }
.service-card .photo{ border-radius:0; height:200px; }
.card{ border-radius:12px; box-shadow:0 2px 10px rgba(27,26,18,0.05); }
.testimonial{ border-radius:12px; }

/* ---------- HOW IT WORKS ---------- */
.how-step{ text-align:center; padding:8px 16px; }
.how-step-num{
  width:44px; height:44px; border-radius:50%; background:var(--amber); color:var(--charcoal);
  font-weight:800; font-size:1.1rem; display:flex; align-items:center; justify-content:center;
  margin:0 auto 14px;
}
.how-step h3{ margin-bottom:8px; }

/* ---------- MEET THE FOUNDER ---------- */
.meet-founder{ display:grid; grid-template-columns:220px 1fr; gap:36px; align-items:center; max-width:820px; margin:0 auto; }
.founder-copy .eyebrow{ margin-bottom:6px; }
.founder-copy h2{ margin-bottom:12px; }
@media (max-width:700px){
  .meet-founder{ grid-template-columns:1fr; text-align:center; }
  .founder-photo{ max-width:180px; margin:0 auto; }
  .founder-copy .eyebrow{ text-align:center; display:block; }
}

/* ---------- FAQ ---------- */
.faq-list{ max-width:760px; margin:24px auto 0; }
.faq-item{ border-bottom:1px solid var(--border); padding:18px 0; }
.faq-item h3{ font-size:1.05rem; margin-bottom:8px; }
.faq-item:last-child{ border-bottom:none; }
.faq-toggle{ display:none; }
/* Desktop keeps every answer open, exactly as before. On mobile the answers
   collapse behind the question so the FAQ reads as a quick list to scan
   rather than a page of text, and tapping a question expands just that one. */
@media (max-width:700px){
  .faq-item h3{
    cursor:pointer; margin-bottom:0; display:flex; align-items:center;
    justify-content:space-between; gap:12px;
  }
  .faq-item p{ display:none; margin-top:10px; }
  .faq-item.open p{ display:block; }
  .faq-toggle{
    display:inline-block; font-size:1.4rem; line-height:1; font-weight:700;
    color:var(--amber-dark); flex-shrink:0; transition:transform 0.2s ease;
  }
  .faq-item.open .faq-toggle{ transform:rotate(45deg); }
}

/* ---------- PLACEHOLDER / DRAFT-CONTENT BANNER ---------- */
.placeholder-banner{
  background:#efe4cf; border:1px dashed var(--amber-dark); color:var(--charcoal);
  font-size:0.85rem; font-weight:600; padding:10px 16px; border-radius:6px;
  margin:14px 0 24px; text-align:center;
}

/* ---------- SERVICES MARQUEE (streamlined homepage services strip) ---------- */
.services-marquee{ background:var(--charcoal); overflow:hidden; padding:20px 0; }
.marquee-track{
  display:inline-flex; align-items:center; gap:16px; white-space:nowrap; width:max-content;
  animation: marquee-scroll 26s linear infinite;
}
.marquee-track a{ color:var(--amber); font-weight:700; font-size:1.08rem; letter-spacing:0.01em; padding:0 2px; }
.marquee-track a:hover{ color:var(--white); }
.marquee-track .dot{ color:rgba(255,255,255,0.35); font-size:1.1rem; }
.services-marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes marquee-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee-track{ animation:none; } }
@media (max-width:600px){ .marquee-track a{ font-size:0.95rem; } }

/* ---------- HERO DAVE INSET (small portrait callout on hero photo) ---------- */
.hero-media-full .photo{ position:relative; }
.hero-dave-inset{
  position:absolute; top:18px; right:18px; width:150px; height:110px;
  border:2px solid var(--white); border-radius:6px; overflow:hidden;
  box-shadow:0 8px 20px rgba(27,26,18,0.35); z-index:2;
}
.hero-dave-inset .ph{ min-height:0; height:100%; border-radius:0; border:none; }
.hero-dave-inset .ph-label{ font-size:0.68rem; padding:6px 8px; }
.hero-dave-inset img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:600px){
  .hero-dave-inset{ width:110px; height:84px; top:12px; right:12px; }
}

/* ---------- MEET DAVE (dark olive panel, second section on homepage) ---------- */
.meet-dave-dark{ background: var(--charcoal); color: var(--cream); }
.meet-dave-dark .eyebrow{ color: var(--amber-light); }
.meet-dave-dark h2{ color: var(--white); }
.dave-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:44px; align-items:center; }
.dave-photo-wrap .ph{
  border-color: var(--amber-light); color: var(--cream-deep);
  background: repeating-linear-gradient(135deg, #3d4a24, #3d4a24 12px, #46542a 12px, #46542a 24px);
}
.dave-photo-wrap .ph-label{ background: rgba(0,0,0,0.4); }
.dave-photo-caption{ font-size:0.8rem; color: var(--cream-deep); margin-top:10px; }
.dave-photo-pair{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
.dave-quote{
  font-size:1.15rem; line-height:1.55; color: var(--cream); font-style:italic;
  border-left:3px solid var(--amber-light); padding-left:18px; margin-bottom:10px;
}
.dave-quote-note{ font-size:0.78rem; color: var(--cream-deep); margin-bottom:22px; }
.dave-ctas{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:30px; }
.dave-hours{ font-size:0.85rem; color: var(--cream-deep); }
.dave-stats{ display:flex; gap:32px; flex-wrap:wrap; border-top:1px solid rgba(247,244,234,0.18); padding-top:22px; }
.dave-stat b{ display:block; font-size:1.15rem; color: var(--white); margin-bottom:3px; }
.dave-stat span{ font-size:0.78rem; color: var(--cream-deep); }
@media (max-width:700px){
  .dave-grid{ grid-template-columns:1fr; text-align:left; }
}

/* ---------- WHY DPC — NUMBERED ROWS (replaces card grid) ---------- */
.why-rows{ max-width:820px; margin:0 auto; }
.why-row{
  display:flex; align-items:flex-start; gap:30px; padding:26px 0;
  border-bottom:1px solid var(--border);
}
.why-row:last-child{ border-bottom:none; }
.why-num{
  font-size:2.6rem; font-weight:800; color: var(--amber-dark); width:120px;
  text-align:center; line-height:1; flex-shrink:0;
}
.why-num span{
  display:block; font-size:0.66rem; text-transform:uppercase; letter-spacing:1.5px;
  color: var(--muted); font-weight:700; margin-top:6px; overflow-wrap:break-word;
}
.why-copy h3{ margin-bottom:5px; }
.why-copy p{ margin-bottom:0; font-size:0.94rem; color: var(--muted); }
@media (max-width:600px){
  .why-row{ gap:18px; }
  .why-num{ width:78px; font-size:1.9rem; }
}

/* ---------- JOBS, NOT TESTIMONIALS (replaces star-review placeholders) ---------- */
.jobs-dark{ background: var(--charcoal); color: var(--cream); }
.jobs-dark .eyebrow{ color: var(--amber-light); }
.jobs-dark h2{ color: var(--white); }
.jobs-grid{ display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:30px; }
.job-card{
  background: rgba(247,244,234,0.05); border:1px solid rgba(247,244,234,0.18);
  border-radius:10px; overflow:hidden;
}
.job-card-photos{ display:grid; grid-template-columns:1fr; }
.job-card-photos .photo, .job-card-photos .ph{ border-radius:0; min-height:220px; }
.job-card-body{ padding:20px 22px; }
.job-meta{
  text-transform:uppercase; letter-spacing:1px; font-size:0.72rem; font-weight:700;
  color: var(--amber-light); margin-bottom:10px; display:block;
}
.job-card-body p{ color: var(--cream-deep); font-size:0.94rem; margin-bottom:0; }
.jobs-note{
  margin-top:30px; padding:16px 20px; border:1px dashed rgba(247,244,234,0.35); border-radius:8px;
  color: var(--cream-deep); font-size:0.86rem; text-align:center;
}
.jobs-cta{ text-align:center; margin-top:26px; }

/* ---------- SCROLLING GOOGLE REVIEWS BANNER ---------- */
.reviews-marquee{ overflow:hidden; margin-top:34px; -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.reviews-track{ display:inline-flex; align-items:flex-start; gap:16px; width:max-content; animation: marquee-scroll 90s linear infinite; }
.reviews-marquee:hover .reviews-track{ animation-play-state:paused; }
.review-card{
  background: rgba(247,244,234,0.05); border:1px solid rgba(247,244,234,0.18);
  border-radius:10px; padding:18px 20px; width:250px; flex-shrink:0;
}
.review-card .stars{ color:var(--amber); font-size:0.95rem; letter-spacing:2px; display:block; margin-bottom:10px; }
.review-card p{ color:var(--cream-deep); font-size:0.87rem; margin-bottom:10px; }
.review-card .reviewer{
  font-size:0.7rem; text-transform:uppercase; letter-spacing:1px; font-weight:700; color: var(--amber-light);
}
@media (prefers-reduced-motion: reduce){ .reviews-track{ animation:none; overflow-x:auto; -webkit-overflow-scrolling:touch; } }
@media (max-width:600px){ .review-card{ width:220px; padding:16px; } }
@media (max-width:700px){
  .jobs-grid{ grid-template-columns:1fr; }
  .job-card-photos .photo, .job-card-photos .ph{ min-height:170px; }
  .job-card-body{ padding:16px 18px; }
}

/* ---------- ROTATING GALLERY (auto-scrolling photo rows, gallery.html) ---------- */
.gallery-rotator{ display:flex; flex-direction:column; gap:18px; }
.gallery-row{ overflow:hidden; }
.gallery-track{
  display:inline-flex; gap:14px; width:max-content;
  animation: gallery-scroll-left 90s linear infinite;
}
.gallery-row.reverse .gallery-track{ animation-name: gallery-scroll-right; animation-duration:100s; }
.gallery-row:hover .gallery-track{ animation-play-state:paused; }
.gallery-tile{
  position:relative; flex:0 0 auto; width:280px; height:200px;
  border-radius:10px; overflow:hidden; box-shadow:0 4px 14px rgba(27,26,18,0.12);
}
.gallery-tile img{ width:100%; height:100%; object-fit:cover; display:block; }
.gallery-tile .cap{
  position:absolute; left:0; right:0; bottom:0;
  background:linear-gradient(transparent, rgba(20,18,10,0.72));
  color:#fff; font-size:0.78rem; font-weight:600; letter-spacing:0.02em;
  padding:22px 12px 9px;
}
@keyframes gallery-scroll-left{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes gallery-scroll-right{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
@media (prefers-reduced-motion: reduce){
  .gallery-track{ animation:none; overflow-x:auto; -webkit-overflow-scrolling:touch; }
}
@media (max-width:700px){
  .gallery-tile{ width:200px; height:150px; }
}

/* ---------- STICKY QUOTE TAB ---------- */
.quote-tab{
  position:fixed; right:0; top:50%; transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl; text-orientation:mixed;
  background:var(--amber); color:var(--charcoal); font-weight:800; font-size:0.82rem;
  letter-spacing:1.5px; text-transform:uppercase; padding:18px 10px; border-radius:6px 0 0 6px;
  z-index:120; box-shadow:-2px 0 12px rgba(0,0,0,0.18);
}
.quote-tab:hover{ background:var(--amber-dark); color:var(--white); }
@media (max-width:700px){ .quote-tab{ display:none; } }

/* ---------- WHAT WE DO — service tile grid (bold cards) ---------- */
.what-we-do{ background:var(--cream-deep); position:relative; }
.wwd-heading{ text-align:left; }
.wwd-heading .eyebrow{ color:var(--amber); font-size:0.85rem; letter-spacing:2px; }
.wwd-heading h2{ font-size:2.2rem; text-transform:uppercase; }
.wwd-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:32px; }
.wwd-card{
  background:var(--white); border-radius:10px; overflow:hidden;
  box-shadow:0 10px 28px rgba(20,18,16,0.1); display:flex; flex-direction:column;
}
.wwd-card .photo{ border-radius:0; height:190px; }
.wwd-card-body{ padding:20px 22px 26px; }
.wwd-card-body h3{ font-size:1.1rem; margin-bottom:8px; }
.wwd-card-body p{ font-size:0.88rem; color:var(--muted); margin-bottom:0; }
@media (max-width:900px){ .wwd-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){
  /* This grid was the single biggest reason the mobile homepage felt so
     long: 9 full-width cards, each with a big photo and a description,
     stacked in one column. Keeping it 2-up and dropping the description
     (it's repeated on every service's own page, and again in the plain-text
     list further down this page) turns it back into a quick visual scan
     instead of a wall of cards to scroll through. */
  .wwd-grid{ grid-template-columns:1fr 1fr; gap:12px; margin-top:20px; }
  .wwd-heading h2{ font-size:1.5rem; }
  .wwd-card .photo{ height:100px; }
  .wwd-card-body{ padding:10px 12px 14px; }
  .wwd-card-body h3{ font-size:0.86rem; margin-bottom:0; }
  .wwd-card-body p{ display:none; }
}

/* ---------- DARK PHOTO BANNER ---------- */
.photo-banner{
  position:relative; padding:100px 0; text-align:center; color:var(--white);
  background-size:cover; background-position:center; overflow:hidden;
}
.photo-banner:before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,18,16,0.55) 0%, rgba(20,18,16,0.82) 100%);
}
.photo-banner .container{ position:relative; z-index:1; }
.photo-banner h2{ color:var(--white); font-size:2.6rem; text-transform:uppercase; margin-bottom:16px; }
.photo-banner p{ color:var(--cream-deep); max-width:640px; margin:0 auto 28px; font-size:1.05rem; }
@media (max-width:700px){ .photo-banner{ padding:64px 0; } .photo-banner h2{ font-size:1.8rem; } }

/* ---------- FULL SERVICE LIST ---------- */
.service-list-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px 32px; margin-top:24px; }
.service-list-item{ display:flex; align-items:center; gap:12px; font-weight:700; font-size:0.95rem; }
.service-list-item .badge{
  background:var(--amber); color:var(--charcoal); font-size:0.68rem; font-weight:800;
  padding:5px 8px; border-radius:4px; letter-spacing:0.5px; flex-shrink:0;
}
@media (max-width:760px){ .service-list-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .service-list-grid{ grid-template-columns:1fr 1fr; gap:10px 16px; } .service-list-item{ font-size:0.85rem; } }

/* ---------- SOCIAL / INSTAGRAM STRIP ---------- */
.insta-strip-head{ text-align:center; margin-bottom:24px; }
.insta-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:6px; }
.insta-grid a{ position:relative; display:block; aspect-ratio:1/1; overflow:hidden; }
.insta-grid img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.25s; }
.insta-grid a:hover img{ transform:scale(1.06); }
@media (max-width:760px){ .insta-grid{ grid-template-columns:repeat(3,1fr); } }

/* ---------- REVIEWS BAND ---------- */
.reviews-band{ background:var(--charcoal); color:var(--cream); text-align:center; padding:56px 0; }
.reviews-band .stars{ color:var(--amber-light); font-size:1.6rem; letter-spacing:4px; margin-bottom:14px; }
.reviews-band h2{ color:var(--white); margin-bottom:10px; }
.reviews-band p{ color:var(--cream-deep); max-width:520px; margin:0 auto 26px; }