/* ============================================================
   Handy Tradie 4 U — base.css
   Shared design tokens, reset, and components used on EVERY page
   (header, footer, buttons, typography, trust icons, CTA band).
   Page-specific styles live in home.css / service.css.
   ============================================================ */

:root{
  --cream:#F1F8FC; --cream-2:#FFFFFF; --paper:#FFFFFF;
  --charcoal:#000000; --charcoal-soft:#6D6E71; --charcoal-deep:#0E2430; --ink-soft:#6D6E71;
  --line:rgba(29,137,219,.28);
  --gold:#F9CA10; --gold-soft:#F9D85C;
  --orange:#1D89DB; --orange-soft:#52A6E6;
  --cta-text:#3C3C3C;
  --on-dark:#FFFFFF; --on-dark-body:#D7E9F2; --on-dark-muted:#93A9B3; --on-dark-line:rgba(255,255,255,.16);
  --gold-wash:#FFF3D6;
}
*{box-sizing:border-box}
body{margin:0;font-family:'Barlow',system-ui,-apple-system,sans-serif;color:var(--charcoal);background:var(--paper);-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;letter-spacing:0}
h1,h2{font-family:'Anton',Impact,'Barlow Condensed',system-ui,sans-serif;font-weight:400}
h3{font-family:'Barlow Condensed',system-ui,sans-serif;font-weight:800}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1240px;margin:0 auto;padding:0 40px}
.hand{font-family:'Permanent Marker',cursive}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:'Barlow',sans-serif;font-weight:800;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark)}
.caps{font-family:'Barlow',sans-serif;text-transform:uppercase;letter-spacing:.06em}
.card-shadow{box-shadow:0 2px 4px rgba(23,35,45,.05), 0 14px 30px rgba(23,35,45,.1)}

/* buttons */
.btn-primary{display:inline-flex;align-items:center;gap:16px;font-family:'Barlow',sans-serif;font-weight:800;font-size:15px;padding:7px 7px 7px 26px;border-radius:999px;border:none;cursor:pointer;white-space:nowrap;background:var(--gold);color:var(--cta-text);box-shadow:0 10px 22px -6px rgba(255,176,0,.6);transition:transform .18s ease,box-shadow .18s ease}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 26px -6px rgba(255,176,0,.7)}
.btn-primary .circ{width:38px;height:38px;border-radius:50%;background:var(--charcoal);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .18s ease}
.btn-primary:hover .circ{transform:translateX(3px)}
.btn-primary .circ svg{width:17px;height:17px}
.btn-secondary{display:inline-flex;align-items:center;gap:9px;font-family:'Barlow',sans-serif;font-weight:700;font-size:14.5px;color:var(--on-dark);padding:14px 4px;border:none;background:none;cursor:pointer;border-bottom:2px dashed var(--on-dark);transition:gap .18s ease}
.btn-secondary:hover{gap:14px}
.btn-block{display:flex;align-items:center;justify-content:center;width:100%;font-family:'Barlow',sans-serif;font-weight:800;font-size:14.5px;letter-spacing:.02em;background:var(--charcoal);color:#fff;padding:17px 20px;border-radius:14px;border:none;cursor:pointer;box-shadow:0 10px 20px -6px rgba(23,35,45,.4);transition:transform .18s ease}
.btn-block:hover{transform:translateY(-2px)}

/* header / nav / logo */
.header-inner{display:flex;align-items:center;justify-content:space-between;height:96px}
.site-logo{width:auto;display:block}
.footer-logo{height:56px}
.logo-slot{position:relative;align-self:flex-start;width:184px;height:0}
.header-logo{position:absolute;top:6px;left:0;height:150px;z-index:5}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{position:relative;padding-bottom:3px;white-space:nowrap}
.nav-links > a[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--gold)}

/* services dropdown (desktop) */
.nav-dd{position:relative}
.nav-dd-toggle{display:inline-flex;align-items:center;gap:6px;background:none;border:none;padding:0 0 3px;margin:0;cursor:pointer;font-weight:700;font-size:13px;color:var(--charcoal)}
.nav-dd-toggle svg{transition:transform .18s ease}
.nav-dd.open .nav-dd-toggle svg{transform:rotate(180deg)}
.nav-dd-menu{position:absolute;top:calc(100% + 16px);left:50%;min-width:260px;background:var(--paper);border:2px solid var(--charcoal);border-radius:18px;padding:8px;box-shadow:0 2px 4px rgba(23,35,45,.05),0 18px 36px rgba(23,35,45,.16);opacity:0;visibility:hidden;transform:translate(-50%,6px);transition:opacity .16s ease,transform .16s ease,visibility .16s;z-index:30}
.nav-dd-menu::before{content:"";position:absolute;left:0;right:0;top:-20px;height:20px}
.nav-dd.open .nav-dd-menu{opacity:1;visibility:visible;transform:translate(-50%,0)}
@media (hover:hover){
  .nav-dd:hover .nav-dd-menu{opacity:1;visibility:visible;transform:translate(-50%,0)}
  .nav-dd:hover .nav-dd-toggle svg{transform:rotate(180deg)}
}
.nav-links .nav-dd-menu a{display:block;padding:10px 14px;border-radius:11px;font-weight:700;font-size:14.5px;color:var(--charcoal);white-space:nowrap}
.nav-links .nav-dd-menu a:hover,.nav-links .nav-dd-menu a:focus-visible{background:var(--gold-wash);outline:none}
.nav-links .nav-dd-menu a[aria-current="page"]{background:var(--gold)}
.nav-links .nav-dd-menu .nav-dd-all{margin-top:6px;border-top:1.5px dashed var(--line);border-radius:0 0 11px 11px;color:var(--orange);font-size:13.5px}

/* hamburger + slide-down menu (all sizes; the only nav on mobile) */
.menu-btn span{transition:transform .2s ease,opacity .2s ease}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg);width:24px!important}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg);width:24px!important}
.mobile-menu{position:absolute;top:100%;left:0;right:0;background:var(--paper);border-bottom:2px dashed var(--line);box-shadow:0 22px 34px -18px rgba(23,35,45,.3);padding:26px 0 30px;z-index:6}
.mm-label{font-weight:800;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--orange);margin-bottom:10px}
.mm-services{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.mm-services a{display:block;padding:12px 14px;border-radius:12px;background:var(--cream);font-weight:700;font-size:15px}
.mm-services a:hover{background:var(--gold-wash)}
.mm-services a[aria-current="page"]{background:var(--gold)}
.mm-links{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:22px;padding-top:18px;border-top:1.5px dashed var(--line)}
.mm-links a{font-weight:700;font-size:13px}
.mm-call{display:none;margin-top:22px;align-items:center;justify-content:center;gap:10px;background:var(--charcoal);color:#fff;font-weight:800;font-size:15px;padding:15px 20px;border-radius:999px}
.mm-call span{color:var(--gold)}

/* trust icon row (used in both home + service hero) */
.trust-icons{display:flex;gap:26px;flex-wrap:wrap;margin-top:36px}
.trust-icon{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:84px}
.trust-icon .ic-chip{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:var(--paper);border:2px solid var(--charcoal)}
.trust-icon span{font-family:'Barlow',sans-serif;font-size:13px;font-weight:700;color:var(--on-dark);line-height:1.3}

/* footer + CTA band */
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.cta-band{background:var(--charcoal);border-radius:36px;padding:58px;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;position:relative;overflow:hidden;border:3px solid var(--gold)}

@media (max-width:1280px){
  /* same-page links (What's Covered, FAQ, Get a Quote) drop into the hamburger first;
     Services / Our Work / About / Contact stay in the header */
  .nav-links > a[href^="#"]{display:none}
}
@media (max-width:1100px){
  .logo-slot{width:150px}
  .header-logo{height:120px;top:5px}
  .trust-icons{gap:18px}
  .nav-links{gap:22px}
  .mm-services{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:980px){
  .wrap{padding:0 28px}
  /* tablet: keep Services + phone in the header; page links move to the hamburger menu */
  .nav-links > a{display:none}
}
@media (max-width:760px){
  .nav-links{display:none}
  .mm-services{grid-template-columns:1fr 1fr}
  .mm-call{display:flex}
  .logo-slot{width:120px}
  .header-logo{height:96px;top:4px}
  .trust-icons{gap:16px;margin-top:26px}
  .trust-icon{min-width:68px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
  .cta-band{padding:36px;text-align:center;justify-content:center}
}
@media (max-width:480px){
  .wrap{padding:0 18px}
  .header-inner{height:76px}
  .logo-slot{width:96px}
  .header-logo{height:76px;top:3px}
  .footer-grid{grid-template-columns:1fr;gap:26px}
  .mm-services{grid-template-columns:1fr}
}