/* =========================================================
   Rise & Shine Lot Sweeping — Style System v8 "Sunrise Crew"
   Built around the client-supplied raccoon mascot mark.
   Yellow / white / black. Bold condensed display type,
   rounded/pill shapes and arcs in place of v6's hairline
   editorial system. Fun-but-professional, not cartoonish.
   Mobile-first. Breakpoints: 768 / 1024 / 1280 only.
   ========================================================= */

:root{
  --forest:       #1B1D1F;   /* primary near-black (was forest green) */
  --forest-deep:  #101113;   /* deepest black, footer/trust-bar */
  --ink:          #1B1D1F;
  --ink-soft:     #5B5E62;
  --paper:        #FFFFFF;
  --paper-2:      #F7F4EC;   /* warm light neutral for section tint */
  --card:         #FFFFFF;
  --gold:         #F5B417;   /* primary yellow, from the sunburst/wordmark */
  --gold-bright:  #FFCB3D;   /* lighter yellow for accents on dark bg */
  --gold-deep:    #C98D0E;   /* hover/pressed state for yellow */
  --cream:        #FFF3D2;   /* soft yellow tint for chips/pills */
  --line:         rgba(27,29,31,0.10);
  --line-dark:    rgba(255,255,255,0.16);
  --text-light:   #FFFFFF;

  --focus-ring:   #F5B417;

  --display: 'Archivo Black', 'Arial Black', 'Helvetica Neue', sans-serif;
  --body:    'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --sans:    'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  --max-w: 1220px;
  --gutter: 20px;
  --radius: 16px;
  --radius-lg: 28px;
}

/* Self-hosted brand fonts (woff2), matching this project's convention. */
@font-face{
  font-family:'Poppins';
  src:url('/fonts/poppins-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Poppins';
  src:url('/fonts/poppins-500.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Poppins';
  src:url('/fonts/poppins-600.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Poppins';
  src:url('/fonts/poppins-700.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Poppins';
  src:url('/fonts/poppins-800.woff2') format('woff2');
  font-weight:800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Archivo Black';
  src:url('/fonts/archivo-black-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
html,body{ overflow-x:hidden; max-width:100%; }
body{
  margin:0;
  font-family:var(--body);
  color:var(--ink-soft);
  background:var(--paper);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:400;
  color:var(--ink);
  line-height:1.12;
  margin:0 0 var(--sp-4);
  letter-spacing:-0.01em;
}
p{ margin:0 0 var(--sp-4); }
button, input, select, textarea{ font-family:var(--sans); }

a,button,input[type="submit"],select,[role="button"]{ min-height:48px; }
button, input[type="submit"]{ min-width:48px; cursor:pointer; }

:focus-visible{ outline:3px solid var(--focus-ring); outline-offset:3px; border-radius:4px; }

.skip-link{
  position:absolute; left:-9999px; top:0;
  background:var(--forest); color:#fff; padding:12px 20px;
  z-index:1000;
}
.skip-link:focus{ left:0; }

.wrap{ max-width:var(--max-w); margin:0 auto; padding:0 var(--gutter); position:relative; z-index:1; }
@media (min-width:1280px){ .wrap{ padding:0 32px; } }

section{ padding:var(--sp-8) 0; position:relative; }
@media (min-width:1024px){ section{ padding:104px 0; } }

.section-dark{ background:var(--forest); color:var(--text-light); }
.section-dark h2,.section-dark h3{ color:#fff; }
.section-tint{ background:var(--paper-2); }
.section-line-top{ border-top:1px solid var(--line); }

/* ---------- Eyebrow ---------- */
.eyebrow{
  display:block;
  font-family:var(--sans);
  font-size:0.74rem;
  font-weight:700;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--gold-deep);
  margin-bottom:var(--sp-4);
}
.section-dark .eyebrow{ color:var(--gold-bright); }
.section-dark .section-intro{ color:rgba(255,255,255,0.75); }

h2.section-title{
  font-size:clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight:400;
  max-width:20ch;
  letter-spacing:-0.01em;
}
.section-intro{ max-width:60ch; color:var(--ink-soft); font-size:1.05rem; }

/* ---------- Buttons (pill-shaped, 3D pop) ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  font-family:var(--sans);
  font-weight:700;
  font-size:0.9rem;
  letter-spacing:0.01em;
  padding:15px 30px;
  border-radius:999px;
  border:3px solid var(--ink);
  transition:background .15s ease, color .15s ease, transform .12s ease, box-shadow .12s ease;
  white-space:nowrap;
  box-shadow:4px 4px 0 var(--ink);
}
.btn:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); }
.btn:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
.btn-gold{ background:var(--gold); color:var(--ink); }
.btn-gold:hover{ background:var(--gold-bright); }
.btn-green{ background:var(--ink); color:#fff; border-color:var(--ink); box-shadow:4px 4px 0 var(--gold); }
.btn-green:hover{ background:#000; box-shadow:6px 6px 0 var(--gold); }
.btn-green:active{ box-shadow:1px 1px 0 var(--gold); }
.btn-outline{ background:transparent; border-color:currentColor; color:inherit; box-shadow:4px 4px 0 currentColor; }
.btn-outline:hover{ background:rgba(0,0,0,0.05); }
.btn-block{ width:100%; }
@media (prefers-reduced-motion: reduce){
  .btn{ transition:none; }
  .btn:hover, .btn:active{ transform:none; }
}
.text-link{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); font-weight:700; font-size:0.92rem;
  border-bottom:2px solid var(--gold); padding-bottom:2px; min-height:0; color:var(--ink);
}
.section-dark .text-link, .cta-banner .text-link{ color:#fff; border-bottom-color:var(--gold-bright); }

/* ---------- Trust line ---------- */
.trust-bar{ background:var(--forest-deep); }
.trust-bar .wrap{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:8px 6px; padding:10px var(--gutter);
  font-family:var(--sans); font-weight:600; font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase;
  text-align:center; color:var(--gold-bright);
}
@media (min-width:768px){
  .trust-bar .wrap{ gap:0; justify-content:space-between; flex-wrap:nowrap; }
}
.trust-bar span{ position:relative; padding:0 12px; white-space:nowrap; animation:trustGlow 3.2s ease-in-out infinite; }
.trust-bar span::after{ content:"•"; position:absolute; right:-4px; color:rgba(255,203,61,0.5); }
.trust-bar span:last-child::after{ display:none; }
.trust-bar span:nth-child(1){ animation-delay:0s; }
.trust-bar span:nth-child(2){ animation-delay:.5s; }
.trust-bar span:nth-child(3){ animation-delay:1s; }
.trust-bar span:nth-child(4){ animation-delay:1.5s; }
@keyframes trustGlow{
  0%, 60%, 100%{ text-shadow:0 0 0 rgba(255,203,61,0); color:var(--gold-bright); }
  30%{ text-shadow:0 0 10px rgba(255,203,61,0.85), 0 0 2px rgba(255,203,61,0.6); color:#fff; }
}
@media (prefers-reduced-motion: reduce){
  .trust-bar span{ animation:none; }
}

/* ---------- Header ---------- */
header.site-header{
  background:rgba(255,255,255,0.96);
  backdrop-filter:saturate(140%) blur(10px);
  position:sticky; top:0; z-index:200;
  border-bottom:3px solid var(--gold);
}
.nav-row{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:12px; padding-bottom:12px; }
.logo-link{ display:flex; align-items:center; flex:none; }
.logo-link img{ height:76px; width:auto; }
@media (min-width:480px){ .logo-link img{ height:84px; } }
@media (min-width:768px){ .logo-link img{ height:88px; } }
@media (min-width:1024px){ .logo-link img{ height:88px; } }

.nav-links{ display:none; }
@media (min-width:1180px){
  .nav-links{
    display:flex; align-items:center; gap:26px; font-family:var(--sans); font-weight:600; font-size:0.9rem; letter-spacing:0.01em;
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  }
  .nav-links a.nav-link{ position:relative; padding:4px 0; color:var(--ink); display:inline-flex; align-items:center; line-height:1; }
  .nav-links a.nav-link:hover{ color:var(--gold-deep); }
  .mobile-only{ display:none !important; }

  .nav-item{ position:relative; }
  .nav-link.has-dropdown{ display:inline-flex; align-items:center; gap:5px; background:none; border:none; cursor:pointer; font:inherit; letter-spacing:inherit; }
  .nav-link.has-dropdown svg{ width:10px; height:10px; stroke:currentColor; stroke-width:3; transition:transform .15s ease; }
  .nav-item:hover .nav-link.has-dropdown svg,
  .nav-item:focus-within .nav-link.has-dropdown svg{ transform:rotate(180deg); }

  /* Invisible bridge over the visual gap so the pointer never leaves a
     hoverable box on the way from the trigger down to the panel. */
  .nav-item::before{
    content:""; position:absolute; left:50%; top:100%; transform:translateX(-50%);
    width:300px; height:16px;
  }

  .nav-dropdown{
    position:absolute; top:100%; left:50%; margin-top:14px; transform:translateX(-50%) translateY(4px);
    min-width:290px; background:var(--paper); border-radius:16px;
    box-shadow:0 16px 36px rgba(0,0,0,0.16); border:1px solid var(--line);
    padding:8px; opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .15s ease, transform .15s ease, visibility .15s;
    z-index:250;
  }
  .nav-item:hover .nav-dropdown,
  .nav-item:focus-within .nav-dropdown{
    opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);
  }
  .nav-dropdown a{
    display:block; padding:11px 14px; border-radius:10px; font-weight:600; font-size:0.86rem;
    color:var(--ink); white-space:nowrap; letter-spacing:normal;
  }
  .nav-dropdown a:hover{ background:var(--paper-2); color:var(--gold-deep); }
}
.nav-actions{ display:flex; align-items:center; gap:18px; }
.nav-cta{ display:none; }
@media (min-width:1180px){ .nav-cta{ display:inline-flex; padding:13px 24px; font-size:0.84rem; } }
.nav-phone{
  display:none; align-items:center; gap:8px; font-family:var(--sans); font-weight:700; font-size:0.9rem; color:var(--ink);
}
.nav-phone svg{ width:16px; height:16px; stroke:var(--gold-deep); }
@media (min-width:1180px){ .nav-phone{ display:flex; } }

.nav-phone-icon{
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:50%;
  background:var(--gold); color:var(--ink);
}
.nav-phone-icon svg{ width:19px; height:19px; stroke:var(--ink); }

.hamburger{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; background:none; border:2px solid var(--ink); border-radius:50%;
}
@media (min-width:1180px){ .hamburger{ display:none; } }
.hamburger svg{ width:20px; height:20px; stroke:var(--ink); }

#mobile-panel{
  position:fixed; inset:0 0 0 auto; width:min(88vw,360px);
  background:var(--paper); height:100vh; transform:translateX(100%);
  transition:transform .25s ease; z-index:300; padding:28px; overflow-y:auto;
  box-shadow:-8px 0 24px rgba(0,0,0,0.15);
  border-radius:24px 0 0 24px;
}
#mobile-panel.open{ transform:translateX(0); }
#mobile-panel a{ display:block; padding:14px 6px; font-family:var(--sans); font-weight:700; font-size:1.05rem; border-bottom:1px solid var(--line); color:var(--ink); }
#mobile-panel a.sub-link{ padding:12px 6px 12px 22px; font-weight:600; font-size:0.92rem; color:var(--ink-soft); }
.mobile-panel-close{ margin-left:auto; display:block; width:44px; height:44px; border-radius:50%; }
#scrim{ position:fixed; inset:0; background:rgba(16,17,19,0.55); z-index:290; opacity:0; pointer-events:none; transition:opacity .25s ease; }
#scrim.show{ opacity:1; pointer-events:auto; }

/* ---------- Icons ---------- */
.i{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- Arc dividers (replace v6's hairline seams) ---------- */
.arc-divider{ position:absolute; left:0; right:0; bottom:-1px; line-height:0; z-index:2; pointer-events:none; }
.arc-divider svg{ display:block; width:100%; height:52px; }
@media (min-width:768px){ .arc-divider svg{ height:78px; } }
.arc-divider.flip{ transform:scaleY(-1); }

/* ---------- Hero (full-bleed photo, text sits on its own scrim card so the
   photo — truck, brush, headlights — reads clearly rather than being washed
   out by a full-width gradient) ---------- */
.hero{
  position:relative;
  background-image:
    linear-gradient(180deg, rgba(16,17,19,0.32) 0%, rgba(16,17,19,0.45) 100%),
    url('/images/hero-photo.webp');
  background-size:cover;
  background-position:center 35%;
  color:var(--text-light);
  overflow:hidden;
  padding:90px 0 90px;
  min-height:64vh;
  display:flex; align-items:center;
}
@media (min-width:1024px){ .hero{ padding:96px 0 110px; min-height:70vh; } }
.hero .wrap{ display:block; }
.hero-copy{
  max-width:600px;
  background:rgba(16,17,19,0.62);
  backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  border-radius:var(--radius-lg);
  padding:32px 28px;
}
@media (min-width:768px){ .hero-copy{ padding:40px 44px; } }
.hero-copy .eyebrow{ color:var(--gold-bright); }
.hero h1{
  font-size:clamp(2.1rem,7vw,2.9rem);
  font-weight:400;
  color:#fff;
}
@media (min-width:1024px){ .hero h1{ font-size:clamp(2.5rem,3.6vw,3.4rem); } }
.hero-sub{
  font-family:var(--body);
  font-weight:400;
  font-size:clamp(1rem,1.6vw,1.14rem);
  color:#EDEDED;
  max-width:50ch;
  margin-bottom:var(--sp-6);
}
.hero-ctas{ display:flex; flex-wrap:wrap; align-items:center; gap:24px; }
.hero-ctas .text-link{ color:#fff; border-bottom-color:var(--gold-bright); }

/* ---------- Proof strip (compact icon + label row, no giant badges) ---------- */
.proof-row{ background:var(--paper); padding:22px 0; border-bottom:1px solid var(--line); }
.proof-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:18px 14px;
}
@media (min-width:640px){ .proof-grid{ grid-template-columns:repeat(4,1fr); gap:20px; } }
.proof-item{
  display:flex; align-items:center; gap:12px; justify-content:flex-start;
}
@media (min-width:640px){ .proof-item{ justify-content:center; } }
.proof-item .proof-icon{
  flex:none; width:38px; height:38px; border-radius:50%; background:var(--gold);
  display:flex; align-items:center; justify-content:center;
}
.proof-item .proof-icon svg{ width:19px; height:19px; stroke:var(--ink); fill:none; stroke-width:2; }
.proof-item .proof-text{ display:flex; flex-direction:column; line-height:1.2; }
.proof-item .proof-text strong{ font-family:var(--sans); font-weight:700; font-size:0.86rem; color:var(--ink); }
.proof-item .proof-text span{ font-family:var(--sans); font-size:0.72rem; color:var(--ink-soft); }

/* ---------- Two-column ratio system ---------- */
.cols{ display:grid; gap:var(--sp-7); grid-template-columns:1fr; }
@media (min-width:1024px){
  .cols-5050{ grid-template-columns:1fr 1fr; align-items:center; }
  .cols-5545{ grid-template-columns:55% 45%; }
  .cols-6040{ grid-template-columns:1.15fr 1fr; align-items:center; }
  .cols-4258{ grid-template-columns:0.8fr 1fr; align-items:start; }
}

/* ---------- Services intro / tag list (pill chips) ---------- */
.tag-list{ display:flex; flex-wrap:wrap; gap:10px; margin:var(--sp-5) 0 var(--sp-6); }
.tag-list span{
  font-family:var(--sans); font-weight:600; font-size:0.82rem; color:var(--ink);
  background:var(--cream); border-radius:999px; padding:8px 16px;
}

/* ---------- Services list (rounded cards) ---------- */
.svc-grid{ display:grid; grid-template-columns:1fr; gap:var(--sp-5); margin-top:var(--sp-7); }
@media (min-width:768px){ .svc-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .svc-grid{ grid-template-columns:repeat(3,1fr); } }
.svc-card{
  background:var(--card); border-radius:var(--radius-lg);
  padding:var(--sp-6) var(--sp-5);
  box-shadow:0 3px 18px rgba(27,29,31,0.07);
}
.svc-num{
  font-family:var(--display); font-weight:400; font-size:1rem; color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%; background:var(--gold);
  margin-bottom:16px;
}
.svc-card h3{ font-size:1.18rem; margin-bottom:8px; font-family:var(--sans); font-weight:700; }
.svc-card p{ font-size:0.95rem; margin-bottom:0; color:var(--ink-soft); }

/* Cross-sell callout panel (e.g. "bundle with your sweeping contract") */
.integration-panel{
  display:grid; grid-template-columns:1fr; gap:var(--sp-5); align-items:center;
  background:var(--cream); border-radius:var(--radius-lg); padding:var(--sp-6);
  margin-top:var(--sp-7);
}
@media (min-width:1024px){ .integration-panel{ grid-template-columns:1.2fr 1fr; } }
.integration-panel h3{ font-family:var(--sans); font-weight:700; font-size:1.3rem; margin:6px 0 10px; }
.integration-panel p{ margin-bottom:0; }
.integration-panel .tag-list span{ background:var(--paper); }

/* 2-up variant for even item counts (e.g. 4 sweeping sub-services) */
.svc-grid.cols-2{ grid-template-columns:1fr; }
@media (min-width:768px){ .svc-grid.cols-2{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .svc-grid.cols-2{ grid-template-columns:repeat(2,1fr); } }

/* 4-across variant (sweeping sub-services in one row, wide photo below) */
.svc-grid.cols-4{ grid-template-columns:1fr; }
@media (min-width:640px){ .svc-grid.cols-4{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .svc-grid.cols-4{ grid-template-columns:repeat(4,1fr); } }

/* ---------- Service line groups (Sweeping / Pressure Washing / Snow & Ice) ---------- */
.svc-title{ font-family:var(--display); font-weight:400; font-size:clamp(1.5rem, 2.3vw, 1.9rem); line-height:1.2; margin:0 0 10px; white-space:normal; }
.svc-tagline{ font-family:var(--sans); font-weight:600; font-size:1.05rem; color:var(--gold-deep); margin:0 0 var(--sp-4); white-space:normal; }
.svc-group .section-intro{ margin-bottom:0; }
.svc-head{ text-align:center; margin-bottom:var(--sp-3); }
.svc-head .svc-title, .svc-head .svc-tagline, .svc-head .section-title, .svc-head .section-intro{ margin-left:auto; margin-right:auto; }
.svc-head .svc-tagline{ margin-bottom:0; }

/* Real photo spot */
.svc-photo{ border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/5; box-shadow:0 3px 18px rgba(27,29,31,0.08); }
.svc-photo.ratio-43{ aspect-ratio:4/3; }
.svc-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Wide banner photo (e.g. below the 4-across sweeping cards) */
.svc-photo-wide{ border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/3; box-shadow:0 3px 18px rgba(27,29,31,0.08); margin-top:var(--sp-6); }
.svc-photo-wide img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (min-width:768px){ .svc-photo-wide{ aspect-ratio:16/7; } }

/* CTA button centered under a service section */
.svc-cta{ text-align:center; margin-top:var(--sp-6); }

/* Branded placeholder photo spot (swap for a real photo when the client has one) */
.svc-photo-placeholder{
  border-radius:var(--radius-lg); background:var(--forest); aspect-ratio:4/3;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  color:#fff; padding:var(--sp-6);
}
.svc-photo-placeholder .ph-icon{
  width:74px; height:74px; border-radius:50%; background:rgba(245,180,23,0.14);
  display:flex; align-items:center; justify-content:center;
}
.svc-photo-placeholder .ph-icon svg{ width:36px; height:36px; stroke:var(--gold-bright); fill:none; stroke-width:1.6; }
.svc-photo-placeholder span{ font-family:var(--sans); font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.45); text-align:center; }


/* ---------- Section header with inline mascot art ---------- */
.section-head-flex{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--sp-6); flex-wrap:wrap; }
.section-head-flex h2{ margin-bottom:0; }
.mascot-inline{ display:none; flex:none; height:auto; }
@media (min-width:640px){ .mascot-inline{ display:block; width:120px; } }
@media (min-width:1024px){ .mascot-inline{ width:170px; } }
/* Why Us: larger hero-weight mascot, vertically balanced with the title */
.why-us .section-head-flex{ align-items:center; gap:var(--sp-7); }
.mascot-hero{ margin:0 auto; }
@media (min-width:640px){ .mascot-hero{ width:190px; } }
@media (min-width:1024px){ .mascot-hero{ width:250px; } }
@media (min-width:1280px){ .mascot-hero{ width:290px; } }

/* ---------- Why us (circular numerals on dark) ---------- */
.why-grid{ display:grid; grid-template-columns:1fr; gap:var(--sp-6); margin-top:var(--sp-7); }
@media (min-width:768px){ .why-grid{ grid-template-columns:repeat(2,1fr); } }
.why-item{ display:flex; gap:20px; }
.why-num{
  font-family:var(--display); font-weight:400; font-size:1.1rem; color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:50%; background:var(--gold);
  flex:none;
}
.why-item h3{ color:#fff; font-size:1.08rem; margin-bottom:6px; font-family:var(--sans); font-weight:700; }
.why-item p{ opacity:0.78; font-size:0.94rem; margin-bottom:0; }

/* ---------- Our Process (dark, glowing numerals + connector line + pill highlights) ---------- */
.process-head{ text-align:center; }
.process-head .section-title, .process-head .section-intro{ margin-left:auto; margin-right:auto; }
.process-row{ display:grid; grid-template-columns:1fr; gap:var(--sp-6); margin-top:var(--sp-7); position:relative; }
@media (min-width:640px){ .process-row{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){
  .process-row{ grid-template-columns:repeat(5,1fr); gap:0; align-items:start; }
  .process-row::before{
    content:""; position:absolute; top:23px; left:10%; right:10%; height:2px;
    background:rgba(201,141,14,0.3); z-index:0;
  }
}
.process-step{ position:relative; z-index:1; text-align:center; background:transparent; border-radius:0; padding:0; box-shadow:none; }
@media (min-width:640px) and (max-width:1023px){ .process-step{ text-align:left; } }
@media (min-width:1024px){ .process-step{ padding:0 var(--sp-3); } }
.process-num{
  font-family:var(--display); font-weight:400; color:var(--ink); font-size:1rem;
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:50%; background:var(--gold);
  margin:0 auto 16px;
  box-shadow:0 0 0 6px rgba(245,180,23,0.16);
}
@media (min-width:640px) and (max-width:1023px){ .process-num{ margin-left:0; margin-right:0; } }
.process-step h3{ color:var(--ink); font-size:1.05rem; margin-bottom:6px; font-family:var(--sans); font-weight:700; }
.process-step p{ color:var(--ink-soft); font-size:0.9rem; margin-bottom:16px; }
.process-tag{
  display:inline-block; font-family:var(--sans); font-size:0.66rem; font-weight:700;
  letter-spacing:0.05em; text-transform:uppercase; color:var(--gold-deep);
  border:1.5px solid rgba(201,141,14,0.4); border-radius:999px; padding:7px 14px;
}

/* ---------- About / owner ---------- */
.about-photo{
  border-radius:var(--radius-lg);
  aspect-ratio:4/3; overflow:hidden;
}
.about-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.owner-quote{
  font-family:var(--body); font-style:normal; font-weight:600; font-size:1.3rem; color:var(--ink);
  margin:var(--sp-5) 0; padding:var(--sp-5); border-radius:var(--radius); background:var(--cream);
}
.credential-line{
  font-family:var(--sans); font-size:0.86rem; color:var(--ink-soft);
  margin-top:var(--sp-5); padding-top:var(--sp-5); border-top:3px dotted var(--line);
}
.stat-row{ display:flex; flex-wrap:wrap; gap:var(--sp-6); margin:var(--sp-5) 0; }
.stat-row .item{ min-width:90px; }
.stat-row .n{ font-family:var(--display); font-weight:400; font-size:1.6rem; color:var(--ink); display:block; }
.stat-row .l{ font-family:var(--sans); font-size:0.68rem; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-soft); }

/* Mobile: stat items become 2-across centered pills; credential line + CTA button center under them */
@media (max-width:767px){
  .stat-row{
    display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-4);
    max-width:340px; margin-left:auto; margin-right:auto;
  }
  .stat-row .item{
    min-width:0; width:100%; text-align:center;
    background:var(--cream); border-radius:999px; padding:16px 12px;
  }
  .credential-line{ text-align:center; }
  .about-cta{ text-align:center; }
}
.named-entity{
  font-family:var(--body); font-size:0.98rem; color:var(--ink-soft);
  padding:var(--sp-5); border-radius:var(--radius); background:var(--paper-2);
  margin:var(--sp-5) 0;
}

/* ---------- FAQ (refined, professional accordion) ---------- */
.faq-list{ margin-top:var(--sp-6); display:flex; flex-direction:column; gap:0; border-top:1px solid var(--line); }
.faq-item{ background:var(--paper); border-bottom:1px solid var(--line); transition:background .15s ease; }
.faq-item:hover{ background:var(--paper-2); }
.faq-q{
  width:100%; text-align:left; background:none; border:none;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 6px; font-family:var(--sans); font-weight:700; font-size:1rem; color:var(--ink);
}
/* Question text lives in an <h3> to match the FAQ schema markup 1:1 — reset it
   back to the button's own type instead of the global h1-h4 display-font rule. */
.faq-q h3{ font:inherit; font-family:inherit; font-weight:inherit; color:inherit; letter-spacing:inherit; line-height:inherit; margin:0; }
.faq-q .plus{
  position:relative; width:26px; height:26px; flex:none; border-radius:50%;
  background:transparent; border:2px solid var(--gold-deep);
}
.faq-q .plus::before, .faq-q .plus::after{
  content:""; position:absolute; background:var(--gold-deep); top:50%; left:50%;
}
.faq-q .plus::before{ width:10px; height:2px; transform:translate(-50%,-50%); }
.faq-q .plus::after{ width:2px; height:10px; transform:translate(-50%,-50%); transition:transform .2s ease; }
.faq-item[data-open="true"] .plus::after{ transform:translate(-50%,-50%) scaleY(0); }
.faq-item[data-open="true"] .faq-q{ color:var(--gold-deep); }
.faq-a{ padding:0 6px 22px; font-size:0.94rem; max-width:70ch; color:var(--ink-soft); }
.faq-item[data-open="false"] .faq-a{ display:none; }
.faq-cta{
  margin-top:var(--sp-7); padding:var(--sp-6); border-radius:var(--radius-lg); background:var(--forest);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;
}
.faq-cta p{ font-family:var(--display); font-weight:400; font-size:1.2rem; color:#fff; margin-bottom:0; }

/* Lighter-weight CTA dropped mid-list (between Q5/Q6) so a ready-to-book
   visitor doesn't have to read all the way to the bottom of the FAQ. */
.faq-mid-cta{
  margin:var(--sp-5) 0; padding:var(--sp-5) var(--sp-5);
  border-radius:var(--radius-lg); background:var(--cream);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;
}
.faq-mid-cta p{ font-family:var(--sans); font-weight:700; font-size:0.98rem; color:var(--ink); margin:0; }

/* ---------- Service area ---------- */
.area-intro{ max-width:75ch; }

/* Priority-ranked hub rail: Greensboro home base, then Concord, Lake Norman,
   Charlotte, Winston-Salem in that order — deliberately not a plain card
   grid, so it reads differently from Green & Clean's own service-area layout. */
.hub-priority{ margin-top:var(--sp-7); position:relative; }
.hub-priority-track{
  display:flex; flex-direction:column; gap:var(--sp-6);
  border-left:3px dotted var(--line); padding-left:var(--sp-5);
}
@media (min-width:1024px){
  .hub-priority-track{
    flex-direction:row; align-items:flex-start; gap:0;
    border-left:none; padding-left:0; position:relative;
  }
  .hub-priority-track::before{
    content:""; position:absolute; top:23px; left:5%; right:5%; height:3px;
    background:repeating-linear-gradient(to right, var(--line) 0 8px, transparent 8px 14px);
    z-index:0;
  }
}
.hub-stop{ position:relative; flex:1; }
@media (min-width:1024px){ .hub-stop{ padding:0 var(--sp-3); text-align:center; } }
.hub-stop-badge{
  width:46px; height:46px; border-radius:50%; background:var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:400; font-size:1rem; color:var(--ink);
  margin-bottom:14px; position:relative; z-index:2;
}
@media (min-width:1024px){ .hub-stop-badge{ margin-left:auto; margin-right:auto; } }
.hub-stop.is-home .hub-stop-badge{ background:var(--ink); color:var(--gold); }
.hub-stop-tag{ font-family:var(--sans); font-size:0.64rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--gold-deep); font-weight:700; display:block; margin-bottom:4px; }
.hub-stop.is-home .hub-stop-tag{ color:var(--ink); }
.hub-stop-city{ font-family:var(--display); font-weight:400; font-size:1.15rem; margin:0 0 3px; color:var(--ink); }
.hub-stop-county{ font-size:0.8rem; color:var(--ink-soft); margin-bottom:10px; }
.hub-stop-towns{ font-size:0.82rem; color:var(--ink-soft); }
.area-disclaimer{ margin-top:var(--sp-7); font-size:0.9rem; color:var(--ink-soft); }

/* ---------- CTA banner ---------- */
.cta-banner{ position:relative; overflow:hidden; background:var(--forest); color:#fff; }
.cta-banner .wrap{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-5); }
@media (min-width:1024px){ .cta-banner .wrap{ flex-direction:row; align-items:center; justify-content:space-between; } }
.cta-banner h2{ color:#fff; margin-bottom:8px; }
.cta-banner p{ opacity:0.78; margin-bottom:0; max-width:46ch; font-size:1.02rem; }
.cta-banner .btn-row{ display:flex; flex-wrap:wrap; align-items:center; gap:22px; flex:none; }

/* ---------- Contact (rounded bordered fields) ---------- */
.form-row{ display:grid; grid-template-columns:1fr; gap:var(--sp-4); margin-bottom:var(--sp-4); }
@media (min-width:768px){ .form-row.two{ grid-template-columns:1fr 1fr; } }
label{ display:block; font-family:var(--sans); font-weight:700; font-size:0.78rem; letter-spacing:0.02em; margin-bottom:7px; color:var(--ink); }
input,select,textarea{
  width:100%; border:2px solid var(--line); border-radius:var(--radius);
  padding:13px 16px; font-size:1rem; background:var(--paper); color:var(--ink);
}
input:focus,select:focus,textarea:focus{ border-color:var(--gold); }
.hp-field{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.privacy-note{ font-family:var(--sans); font-size:0.78rem; color:var(--ink-soft); margin-top:var(--sp-4); }
.form-msg{ font-family:var(--sans); font-size:0.9rem; margin-top:var(--sp-3); display:none; padding:14px 18px; border-radius:var(--radius); }
.form-msg.show{ display:block; }
.form-msg.ok{ background:#EAF7EC; color:#1E6B2E; }
.form-msg.err{ background:#FBE9E7; color:#8C241C; }
.map-embed{ aspect-ratio:4/3; background:var(--paper-2); border-radius:var(--radius-lg); overflow:hidden; }
@media (min-width:768px){ .map-embed{ aspect-ratio:16/10; } }
.map-embed iframe{ display:block; width:100%; height:100%; border:0; }
.owner-reassure{ font-family:var(--body); margin-bottom:var(--sp-6); color:var(--ink-soft); }
.contact-info-list{ margin-top:var(--sp-6); display:flex; flex-direction:column; gap:10px; }
.contact-info-list .row{ display:flex; gap:14px; align-items:center; padding:14px 18px; border-radius:var(--radius); background:var(--paper-2); }
.contact-info-list svg{ width:20px; height:20px; stroke:var(--gold-deep); flex:none; }
.contact-info-list span{ font-family:var(--sans); font-size:0.92rem; color:var(--ink-soft); }

/* ---------- Credential grid (dark section, e.g. About page) ---------- */
.credential-grid{ display:grid; grid-template-columns:1fr; gap:12px; margin-top:var(--sp-6); }
@media (min-width:640px){ .credential-grid{ grid-template-columns:repeat(2,1fr); } }
.credential-grid .row{ display:flex; gap:14px; align-items:center; padding:16px 20px; border-radius:var(--radius); background:var(--paper-2); height:100%; }
.credential-grid svg{ width:20px; height:20px; stroke:var(--gold-deep); flex:none; }
.credential-grid span{ font-family:var(--sans); font-size:0.92rem; color:var(--ink-soft); }

/* ---------- Footer ---------- */
footer.site-footer{ background:var(--forest-deep); color:var(--text-light); padding:var(--sp-8) 0 100px; position:relative; }
.footer-grid{ display:grid; grid-template-columns:1fr; gap:var(--sp-6); }
@media (min-width:768px){ .footer-grid{ grid-template-columns:1.4fr 1fr 1fr; } }
.footer-logo-badge{
  display:inline-block; background:var(--paper); border-radius:var(--radius-lg);
  padding:20px 26px; margin-bottom:var(--sp-4);
}
.footer-logo-badge img{ display:block; height:60px; width:auto; }
@media (min-width:768px){ .footer-logo-badge img{ height:72px; } }
.footer-col h4{ color:var(--gold-bright); font-family:var(--sans); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:var(--sp-3); font-weight:700; }
.footer-col li{ padding:5px 0; font-size:0.9rem; opacity:0.8; }
.footer-col a:hover{ color:var(--gold-bright); }
.footer-license{ font-size:0.8rem; opacity:0.6; margin-top:var(--sp-3); }
.footer-bottom{
  border-top:1px solid var(--line-dark); margin-top:var(--sp-7); padding-top:var(--sp-5);
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; font-size:0.78rem; opacity:0.65;
  font-family:var(--sans);
}

/* ---------- Sticky phone bar (mobile only) ---------- */
#sticky-phone{
  position:fixed; left:0; right:0; bottom:0; z-index:250;
  background:var(--forest-deep); color:#fff;
  display:flex; align-items:stretch;
  box-shadow:0 -4px 16px rgba(0,0,0,0.18);
  border-radius:22px 22px 0 0; overflow:hidden;
  transition:transform .25s ease;
}
/* Mobile only: slide the full-width bar out of the way while scrolling down
   so it doesn't sit on top of whatever content is at the bottom of the
   viewport, then bring it back the moment the visitor scrolls up. */
@media (max-width:1023px){
  #sticky-phone.hide{ transform:translateY(100%); }
}
@media (prefers-reduced-motion: reduce){
  #sticky-phone{ transition:none; }
}
#sticky-phone a{
  flex:1; display:flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--sans); font-weight:700; font-size:0.92rem; padding:16px 10px;
}
#sticky-phone a.quote{ background:var(--gold); color:var(--ink); box-shadow:inset 0 3px 0 rgba(255,255,255,0.35), inset 0 -3px 0 rgba(0,0,0,0.15); }
#sticky-phone svg{ width:18px; height:18px; stroke:currentColor; }
/* Desktop: floating rounded pill bottom-right instead of an edge-to-edge mobile bar */
@media (min-width:1024px){
  #sticky-phone{
    left:auto; right:32px; bottom:24px;
    border-radius:999px;
    box-shadow:0 10px 28px rgba(16,17,19,0.28);
  }
  #sticky-phone a{ flex:none; padding:16px 26px; font-size:0.86rem; }
}

/* ---------- Misc pages ---------- */
.page-hero{
  background-image:
    linear-gradient(100deg, rgba(16,17,19,0.92) 0%, rgba(16,17,19,0.68) 45%, rgba(16,17,19,0.32) 100%),
    url('/images/hero-photo.webp');
  background-size:cover; background-position:center 42%;
  color:#fff; padding:88px 0 68px; position:relative;
}
.page-hero h1{ color:#fff; }
.breadcrumb{ font-family:var(--sans); font-size:0.8rem; opacity:0.7; margin-bottom:var(--sp-4); }
.breadcrumb a:hover{ color:var(--gold-bright); }

/* ---------- Hero proof pills (service-specific trust signals, dark-photo hero) ---------- */
.hero-pills{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 var(--sp-6); }
.hero-pill{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--sans); font-weight:600; font-size:0.8rem; color:#fff; white-space:nowrap;
  background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.32);
  border-radius:999px; padding:8px 16px;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.hero-pill svg{ width:12px; height:12px; stroke:var(--gold-bright); stroke-width:3; fill:none; flex:none; }

.simple-hero{ text-align:center; padding:var(--sp-8) 0; }
.simple-hero .check{
  width:64px; height:64px; border-radius:50%; background:var(--gold);
  display:flex; align-items:center; justify-content:center; margin:0 auto var(--sp-5); color:var(--ink);
}
.simple-hero .check svg{ width:30px; height:30px; }

.err-code{
  font-family:var(--display); font-weight:400; color:var(--gold-deep);
  font-size:clamp(3rem,10vw,6rem); line-height:1;
}