/* NOTE FOR EDITORS - read before changing this file (15 Nov 2026)
   1. This one file holds the look of the whole CQ Junk Removal site. The top bar and
      menu are in includes/header.php, and the footer in includes/footer.php.
   2. After any change here, raise the number in site.css?v= on every page in the
      same pass, or phones keep showing the old look.
   3. Phones: the footer folds shut to one row of three headings. See
      "FOOTER ON PHONES" near the bottom of this file. */

/* Layout idea: their trailer signage on a page. Navy panels and white type like the trailers,
   light grey menu bar from the sample header, real job photos doing the selling. */
:root{
  --navy:#001248;        /* logo and trailer navy */
  --navy-2:#13306E;      /* hover, secondary navy */
  --sky:#2E6FD1;         /* accent: links, small highlights */
  --mist:#EEF1F6;        /* light grey menu bar and alternate sections */
  --line:#D9DFE9;
  --ink:#141B2D;
  --muted:#4E586B;
  --white:#FFFFFF;
  --display:'Outfit', 'Trebuchet MS', Arial, sans-serif;
  --body:'Source Sans 3', 'Segoe UI', Arial, sans-serif;
  --max:1180px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--body);font-size:17px;line-height:1.6;color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
h1,h2,h3{font-family:var(--display);line-height:1.1;color:var(--navy);text-wrap:balance}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

/* ---------- TOP BAR ---------- */
.topbar{background:var(--navy);color:#DCE4F3;font-size:14px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:7px;padding-bottom:7px}
.topbar a{color:#fff;font-weight:700;text-decoration:none;white-space:nowrap}

/* ---------- MENU BAR ---------- */
.nav{background:var(--mist);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.nav .wrap{display:flex;align-items:center;gap:20px;padding-top:10px;padding-bottom:10px}
.brand img{height:54px;width:auto}
.links{display:flex;align-items:center;gap:22px;margin-left:auto}
.links a{text-decoration:none;font-family:var(--display);font-weight:600;font-size:15.5px;color:var(--navy);padding:6px 0;border-bottom:2px solid transparent}
.links a:hover{border-bottom-color:var(--navy)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--display);font-weight:700;font-size:16px;text-decoration:none;padding:13px 22px;border-radius:8px;border:2px solid var(--navy);transition:background .15s,color .15s}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-2);border-color:var(--navy-2)}
.btn-line{background:transparent;color:var(--navy)}
.btn-line:hover{background:var(--navy);color:#fff}
.btn-white{background:#fff;color:var(--navy);border-color:#fff}
.btn-white:hover{background:var(--mist)}
.btn-ghost{background:transparent;color:#fff;border-color:#fff}
.btn-ghost:hover{background:#fff;color:var(--navy)}
.links .btn{padding:9px 18px;font-size:15px}
.links a.btn-navy{color:#fff;border-bottom:2px solid var(--navy)}
.links a.btn-navy:hover{background:var(--navy-2);border-color:var(--navy-2)}
.burger{display:none;margin-left:auto;background:#fff;border:1px solid var(--line);border-radius:8px;padding:9px 11px;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:var(--navy);margin:4px 0}

/* ---------- COMING SOON STRIP ---------- */
.strip{background:#E3ECFA;border-bottom:1px solid #C9D8F1}
.strip .wrap{display:flex;align-items:center;gap:14px;padding-top:11px;padding-bottom:11px;font-size:15.5px;color:var(--ink)}
.tag{flex:none;background:var(--navy);color:#fff;font:700 12px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;padding:6px 10px;border-radius:4px}
.strip a{color:var(--navy);font-weight:700}

/* ---------- HOME / HERO ---------- */
.hero{display:grid;grid-template-columns:1fr 1fr;background:var(--white)}
.hero-copy{padding:56px 48px 52px max(24px,calc((100vw - var(--max))/2 + 24px));display:flex;flex-direction:column;justify-content:center}
.kicker{display:block;font:700 13px/1.3 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--sky);margin-bottom:14px}
.hero h1{font-size:50px;font-weight:800}
.hero h2{font-size:27px;font-weight:600;color:var(--navy-2);margin-top:10px}
.hero p{font-size:19px;color:var(--muted);margin:20px 0 28px;max-width:34em}
.btns{display:flex;gap:12px;flex-wrap:wrap}
.hero-photo{position:relative;min-height:420px}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 60%}

/* talk to us band (the side card) */
.talk{background:var(--navy);color:#DCE4F3}
.talk .wrap{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:28px;padding-top:26px;padding-bottom:26px;align-items:center}
.talk h3{color:#fff;font-size:21px;margin-bottom:4px}
.talk .big{display:block;font:700 26px/1.2 var(--display);color:#fff;text-decoration:none}
.talk a{color:#fff}
.tick{position:relative;padding-left:24px}
.tick::before{content:"";position:absolute;left:2px;top:7px;width:11px;height:6px;border-left:2.5px solid #8FB4F0;border-bottom:2.5px solid #8FB4F0;transform:rotate(-45deg)}

/* ---------- FOUR FACTS ---------- */
.facts{background:var(--mist);border-bottom:1px solid var(--line)}
.facts .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding-top:30px;padding-bottom:30px}
.fact{display:flex;gap:14px;align-items:flex-start}
.fact svg{flex:none;width:38px;height:38px;color:var(--navy)}
.fact b{display:block;font:700 18px/1.2 var(--display);color:var(--navy)}
.fact span{font-size:15.5px;color:var(--muted)}

/* ---------- SECTIONS ---------- */
.sec{padding:70px 0}
.sec.alt{background:var(--mist)}
.sec h2{font-size:38px;font-weight:800}
.lede{font-size:18.5px;color:var(--muted);max-width:40em;margin-top:12px}

/* services */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
.svc{background:#fff;border:1px solid var(--line);border-radius:10px;padding:24px 22px}
.svc svg{width:34px;height:34px;color:var(--navy);margin-bottom:12px}
.svc h3{font-size:21px;margin-bottom:6px}
.svc p{font-size:16px;color:var(--muted)}
.svc.recycle{background:var(--navy);border-color:var(--navy)}
.svc.recycle h3,.svc.recycle svg{color:#fff}
.svc.recycle p{color:#DCE4F3}
.skip{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center;justify-content:space-between;background:#fff;border:1px solid var(--line);border-left:5px solid var(--navy);border-radius:10px;padding:18px 22px}
.skip p{font-size:17px}
.skip small{font-size:15px;color:var(--muted)}

/* who we help + where we work */
.two{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 18px}
.chip{background:#fff;border:1.5px solid var(--navy);color:var(--navy);font:600 16px/1 var(--display);padding:10px 14px;border-radius:999px}
.chip.solid{background:var(--navy);color:#fff}
.two p{color:var(--muted);font-size:17.5px}

/* gallery */
.gal{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:34px}
.pair{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px}
.pair-imgs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pair figure{position:relative;margin:0}
.pair img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:7px}
.pair figcaption{position:absolute;top:8px;left:8px;background:rgba(0,18,72,.88);color:#fff;font:700 12px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;padding:6px 9px;border-radius:4px}
.pair figure.after figcaption{background:#fff;color:var(--navy)}
.pair p{font-size:16px;padding:12px 4px 4px;color:var(--ink)}
.pair p b{font-family:var(--display);color:var(--navy)}
.more{margin-top:28px}

/* about */
.about{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center}
.about img{border-radius:12px;width:100%}
.about p{font-size:19px;color:var(--ink);margin-top:16px}
.pull{margin-top:22px;border-left:5px solid var(--navy);padding:6px 0 6px 18px;font:600 22px/1.35 var(--display);color:var(--navy)}

/* community */
.comm{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:start}
.comm p{color:var(--muted);font-size:17.5px;margin-top:12px}
.reviews{display:grid;gap:16px}
.review{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px 24px}
.stars{color:#E8A317;letter-spacing:2px;font-size:17px}
.review q{display:block;font-size:18px;line-height:1.5;color:var(--ink);margin:8px 0 10px;quotes:"\201C" "\201D"}
.review cite{font-style:normal;font-size:15px;color:var(--muted)}
.review cite b{color:var(--navy)}
.comm .btns{margin-top:22px}

/* coming next */
.next{background:var(--white);border-top:1px solid var(--line)}
.next-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:26px}
.ni{border:1px solid var(--line);border-radius:10px;padding:14px 16px;background:#fff}
.ni b{display:flex;align-items:center;justify-content:space-between;gap:8px;font:700 17px/1.2 var(--display);color:var(--navy)}
.ni i{font:700 11px/1 var(--display);font-style:normal;letter-spacing:.08em;text-transform:uppercase;padding:4px 7px;border-radius:4px;background:var(--mist);color:var(--muted)}
.ni.live{background:var(--navy);border-color:var(--navy)}
.ni.live b{color:#fff}
.ni.live i{background:#fff;color:var(--navy)}
.ni span{display:block;font-size:15px;color:var(--muted);margin-top:6px;line-height:1.4}
.ni.live span{color:#DCE4F3}

/* contact */
.cta{background:var(--navy);color:#DCE4F3;text-align:center}
.cta h2{color:#fff}
.cta p{font-size:19px;max-width:36em;margin:14px auto 26px}
.cta .btns{justify-content:center}
.cta .hours{margin-top:20px;font-size:16px}
.cta .plain{margin-top:8px;font-size:16px;color:#fff}

/* footer: 15 Nov 2026 (Wendy): the light grey of the menu bar with navy writing,
   so it stands apart from the navy "Got junk to go?" section above it */
.foot{background:var(--mist);color:var(--muted);font-size:15px;border-top:1px solid var(--line)}
.foot .wrap{display:grid;grid-template-columns:auto 1fr 1fr 1fr;gap:36px;padding-top:40px;padding-bottom:28px;align-items:start}
.foot img{height:64px;width:auto}
.foot h4{font:700 14px/1.2 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--navy);margin-bottom:8px}
.foot a{color:var(--navy);text-decoration:none}
.foot a:hover{text-decoration:underline}
.foot-bot{border-top:1px solid var(--line)}
.foot-bot .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;padding-top:14px;padding-bottom:18px;font-size:13.5px;grid-template-columns:none}

/* ---------- COMPUTER TO TABLET ---------- */
@media (max-width:1060px){
  .links{gap:16px}
  .links a{font-size:14.5px}
}
@media (max-width:980px){
  .burger{display:block}
  .links{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 12px 24px rgba(0,18,72,.12);flex-direction:column;align-items:stretch;gap:0;margin:0;padding:6px 0 14px}
  .links.open{display:flex}
  .links a{padding:13px 24px;border-bottom:1px solid var(--mist);font-size:16.5px}
  .links .btn{margin:12px 24px 0;padding:13px 18px;border-bottom:2px solid var(--navy)}
  .nav .wrap{position:relative}
  .hero{grid-template-columns:1fr}
  .hero-copy{padding:44px 24px 36px}
  .hero-photo{min-height:0;aspect-ratio:16/10}
  .talk .wrap{grid-template-columns:1fr 1fr;gap:20px}
  .talk .wrap>div:first-child{grid-column:1/-1}
  .facts .wrap{grid-template-columns:1fr 1fr}
  .svc-grid{grid-template-columns:1fr 1fr}
  .two,.about,.comm{grid-template-columns:1fr;gap:34px}
  .next-grid{grid-template-columns:1fr 1fr}
  .foot .wrap{grid-template-columns:1fr 1fr}
}
/* ---------- PHONE ---------- */
@media (max-width:600px){
  body{font-size:16.5px}
  .wrap{padding:0 18px}
  .topbar .places{display:none}
  .topbar .wrap{justify-content:center}
  .brand img{height:46px}
  .strip .wrap{flex-direction:column;align-items:flex-start;gap:8px;font-size:15px}
  .hero-copy{padding:34px 18px 28px}
  .hero h1{font-size:35px}
  .hero h2{font-size:22px}
  .hero p{font-size:17.5px;margin:16px 0 22px}
  .btns .btn{flex:1 1 100%}
  .talk .wrap{grid-template-columns:1fr;gap:14px}
  .facts .wrap{grid-template-columns:1fr;gap:16px}
  .sec{padding:48px 0}
  .sec h2{font-size:29px}
  .svc-grid{grid-template-columns:1fr}
  .gal{grid-template-columns:1fr;gap:20px}
  .pull{font-size:19px}
  .next-grid{grid-template-columns:1fr 1fr;gap:8px}
  .ni{padding:11px 12px}
  .ni span{display:none}
  .foot .wrap{grid-template-columns:1fr;gap:22px}
}

/* ---------- FOOTER HEADINGS (15 Nov 2026) ----------
   Each footer heading is a button, so it can open its list on phones.
   On computers and tablets it looks and acts like a plain heading. */
.facc{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;text-align:left;cursor:default}
.fcar{display:none;width:9px;height:9px;fill:none;stroke:currentColor;stroke-width:2.2;transition:transform .2s}

/* ---------- FOOTER ON PHONES (15 Nov 2026, Wendy) ----------
   The footer folds shut to one row of three headings: CQ Junk Removal, Contact,
   Follow us. Tapping a heading opens its details across the full width under the row;
   tapping another closes the first (the script at the bottom of the page).
   The phone number stays in the top bar, so Contact can fold too.
   Computers and tablets keep the full footer. */
@media (max-width:600px){
  .foot .foot-cols{grid-template-columns:1.4fr 1fr 1fr;gap:0;padding:0;border-bottom:1px solid var(--line)}
  .foot .foot-logo{display:none}
  .foot .fgroup{display:contents}
  .foot h4{grid-row:1;margin:0;display:flex}
  .foot .facc{width:100%;min-height:48px;justify-content:center;gap:5px;padding:0 4px;font-size:12px;line-height:1.2;letter-spacing:.06em;text-align:center;color:var(--navy-2);cursor:pointer;-webkit-tap-highlight-color:transparent}
  .foot .fgroup+.fgroup h4{border-left:1px solid var(--line)}
  .fcar{display:block}
  .foot .fgroup.open .facc{color:var(--navy);background:#fff}
  .fgroup.open .fcar{transform:rotate(180deg)}
  .foot .flinks{display:none;grid-row:2;grid-column:1 / -1;padding:12px 18px 14px;border-top:1px solid var(--line);background:#fff;font-size:15px;line-height:1.75}
  .foot .fgroup.open .flinks{display:block}
  .foot-bot{border-top:0}
  .foot .foot-bot .wrap{justify-content:center;gap:0 12px;padding-top:9px;padding-bottom:11px;font-size:12px;line-height:1.5;text-align:center}
}
@media (max-width:600px) and (prefers-reduced-motion:reduce){.fcar{transition:none}}

/* ---------- WORDS BESIDE HEADINGS (computers only, 15 Nov 2026, Wendy) ----------
   On wide screens, a line already on the page sits beside the section heading, so the
   heading doesn't sit alone in an empty row. Tablets and phones keep the usual order. */
.computer-only{display:none}
@media (min-width:981px){
  .headside{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,480px);grid-template-rows:1fr auto auto auto;column-gap:56px;grid-template-areas:"k a" "h a" "g g" "m m"}
  .headside>.kicker{grid-area:k;align-self:end}
  .headside>h2{grid-area:h}
  .headside>.side{grid-area:a;align-self:end;margin-top:0}
  .headside>.svc-grid,.headside>.gal,.headside>.next-grid{grid-area:g}
  .headside>.more{grid-area:m}
  .headside>.lede.side{font-size:18.5px;max-width:none}
  #services .headside{grid-template-columns:auto minmax(0,1fr)}
  .headside>.skip.side{flex-wrap:nowrap;align-items:center;gap:18px;padding:14px 18px}
  .headside>.skip.side p{font-size:16px;line-height:1.5}
  .headside>.skip.side .btn{flex:none}
  /* About: the words start level with the top of the photo (15 Nov 2026, Wendy) */
  .about{align-items:start}
  .computer-only{display:block}
  .next .headside>.side a{color:var(--navy);font-weight:700}
}

/* ---------- SPACE BETWEEN SECTIONS (computers and tablets, 15 Nov 2026, Wendy) ----------
   Half the old space above and below each section, so the page doesn't feel gappy.
   Phones keep their own spacing; the navy "Got junk to go?" section keeps its padding. */
@media (min-width:601px){
  .sec:not(.cta){padding:35px 0}
}

/* ---------- PHONES: SPACING AND SERVICES BOXES (15 Nov 2026, Wendy) ----------
   Half the space between sections, as on computers. The Services boxes are about
   half their old height: the icon sits beside the heading and the padding is tighter. */
@media (max-width:600px){
  .sec:not(.cta){padding:24px 0}
  .svc-grid{gap:10px;margin-top:20px}
  .svc{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:center;padding:10px 14px}
  .svc svg{width:28px;height:28px;margin:0}
  .svc h3{font-size:19px;margin:0}
  .svc p{grid-column:1 / -1;font-size:15px;line-height:1.4;margin-top:3px}
  .skip{margin-top:14px}
}

/* ---------- "GOT JUNK TO GO?" ON PHONES (15 Nov 2026, Wendy) ----------
   Half its old height: less padding, Call and Email side by side. The line repeating
   the phone and email is left off on phones (they're on the buttons and in the footer). */
@media (max-width:600px){
  .sec.cta{padding:22px 0 20px}
  .cta h2{font-size:25px}
  .cta p{font-size:15px;line-height:1.45;margin:6px auto 14px}
  .cta .btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .cta .btns .btn{padding:10px 6px;font-size:15px}
  .cta .btns .btn-white{grid-column:1 / -1}
  .cta .plain{display:none}
  .cta .hours{margin-top:10px;font-size:14px;line-height:1.4}
}

/* ---------- PREVIEW LINE (15 Nov 2026) ----------
   The thin grey "Preview for CQ Junk Removal · not live yet" line at the very top.
   It only shows while the site is a preview (see includes/settings.php). */
.pv{background:#D9DFE9;color:#13306E;text-align:center;font:600 12.5px/1.4 'Source Sans 3','Segoe UI',Arial,sans-serif;letter-spacing:.02em;padding:5px 12px}

/* NOTE FOR EDITORS (bottom, 15 Nov 2026): the top bar and menu are in
   includes/header.php and the footer in includes/footer.php. After any change in this
   file, raise the number in site.css?v= on every page in the same pass. */