/* =========================================================
   Manukau Auto & Tyre Centre — faithful recreation
   Matched from live site computed styles:
   header: rgba(17,17,17,.7) over hero photo | footer: #111
   body copy: #383838 Roboto | h1: Poppins 700 #000
   h2: Roboto 500 #2A2A2A | nav links: #fff 300 | dropdown: #0066BF
   ========================================================= */

:root{
  --near-black: #111111;
  --body-text: #383838;
  --heading: #000000;
  --h2: #2A2A2A;
  --blue: #0066BF;
  --yellow: #F5C518;
  --footer-text: #A6A6A6;
  --line: #e5e5e5;
  --hero-overlay: rgba(17,17,17,.7);
  --title-box: rgba(28,66,102,.78);
}

*,*::before,*::after{ box-sizing:border-box; }
body{
  margin:0;
  background:#fff;
  color:var(--body-text);
  font-family:"Roboto", Arial, sans-serif;
  font-weight:300;
  font-size:15px;
  line-height:1.75;
}
h1,h2,h3,h4{ font-family:"Poppins","Roboto",sans-serif; color:var(--heading); margin:0 0 .55em; line-height:1.25; }
h1{ font-size:30px; font-weight:700; }
h2{ font-size:24px; font-weight:500; color:var(--h2); }
h3{ font-size:19px; font-weight:600; }
p{ margin:0 0 1.2em; }
a{ color:var(--blue); text-decoration:none; }
a:hover{ text-decoration:underline; }
img{ max-width:100%; display:block; }
ul{ margin:0 0 1.2em; padding-left:20px; }

.wrap{ max-width:1170px; margin:0 auto; padding:0 15px; }
.section{ padding:60px 0; }
.section--grey{ background:#f7f7f7; }

/* ---------------- Header / hero ---------------- */
.hero-wrap{
  position:relative;
  background: linear-gradient(180deg,#3a3a3a 0%, #1c1c1c 60%, #101010 100%);
  min-height:340px;
}
.hero-wrap::after{
  /* subtle road-like texture so the banner isn't a flat block */
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.06), transparent 60%),
    repeating-linear-gradient(100deg, rgba(255,255,255,.02) 0 2px, transparent 2px 140px);
  pointer-events:none;
}

header.site-header{
  position:relative; z-index:20;
  background:var(--hero-overlay);
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; }

.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand:hover{ text-decoration:none; }
.brand__guru{
  font-family:"Poppins",sans-serif; line-height:1;
}
.brand__guru .l1{ display:block; font-style:italic; font-weight:600; font-size:15px; color:var(--yellow); }
.brand__guru .l2{ display:block; font-weight:800; font-size:22px; letter-spacing:.02em; color:#e9e9e9; }
.brand__matc{
  border-left:1px solid rgba(255,255,255,.25); padding-left:12px; margin-left:2px;
  font-family:"Poppins",sans-serif; line-height:1.1;
}
.brand__matc .l1{ font-size:11px; letter-spacing:.06em; color:var(--yellow); font-weight:600; }
.brand__matc .l2{ font-size:16px; font-weight:800; color:#fff; letter-spacing:.01em; }
.brand__matc .l3{ font-size:10px; letter-spacing:.12em; color:#9aa7b3; font-weight:500; }

.navlinks{ list-style:none; display:flex; align-items:center; gap:2px; margin:0; padding:0; flex-wrap:wrap; justify-content:flex-end; position:relative; }
.navlinks > li{ position:relative; }
.navlinks > li > a{
  display:block; padding:10px 12px; color:#fff; font-weight:300; font-size:13px;
  text-transform:uppercase; letter-spacing:.03em;
}
.navlinks > li > a:hover{ color:var(--yellow); text-decoration:none; }
.navlinks .current > a{ color:var(--yellow); }

.submenu{ list-style:none; margin:0; padding:6px 0; position:absolute; left:0; top:100%;
  background:#fff; min-width:190px; box-shadow:0 8px 20px rgba(0,0,0,.18); display:none; z-index:30; }
.navlinks > li:hover .submenu{ display:block; }
.submenu a{ display:block; padding:9px 16px; color:var(--blue); font-size:13px; font-weight:400; }
.submenu a:hover{ background:#f3f6fa; text-decoration:none; }

.nav__toggle{ display:none; background:none; border:0; cursor:pointer; }
.nav__toggle span{ display:block; width:24px; height:2px; background:#fff; margin:5px 0; }
@media (max-width:980px){
  .nav__toggle{ display:block; }
  .navlinks{ display:none; position:absolute; left:0; right:0; top:100%; background:var(--near-black); flex-direction:column; align-items:flex-start; padding:8px 15px 16px; }
  .navlinks.is-open{ display:flex; }
  .navlinks > li{ width:100%; }
  .submenu{ position:static; box-shadow:none; background:#1a1a1a; }
  .submenu a{ color:#cfe0f2; }
}

/* Page title / breadcrumb band on the hero image */
.page-title-band{ position:relative; z-index:10; padding:70px 0 46px; }
.page-title-box{
  display:inline-block; background:var(--title-box); padding:18px 32px 16px; position:relative;
}
.page-title-box .warn{
  position:absolute; left:-34px; top:50%; transform:translateY(-50%);
  width:20px; height:20px; color:#e2b93b;
}
.page-title-box h1{ color:#fff; margin:0; font-size:26px; letter-spacing:.02em; text-transform:uppercase; }
.page-title-box .crumb{ color:#cfd8df; font-size:12px; margin-top:2px; }
.page-title-box .crumb a{ color:#cfd8df; }
.page-title-box .crumb a:hover{ color:#fff; }

.home-hero .page-title-box h1{ font-size:30px; }

/* ---------------- Content blocks ---------------- */
.grid{ display:grid; gap:30px; }
.grid--2{ grid-template-columns:1fr 1fr; }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .grid--3{ grid-template-columns:1fr 1fr; } .grid--4{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .grid--2,.grid--3,.grid--4{ grid-template-columns:1fr; } }

.service-card{ text-align:left; }
.service-card__icon{
  width:56px; height:56px; border-radius:50%; background:var(--near-black); color:var(--yellow);
  display:flex; align-items:center; justify-content:center; font-family:"Poppins"; font-weight:700;
  font-size:18px; margin-bottom:16px;
}
.service-card h3{ margin-bottom:8px; }
.service-card a.readmore{ color:var(--blue); font-size:13px; font-weight:500; text-transform:uppercase; letter-spacing:.03em; }

.btn{
  display:inline-block; background:var(--near-black); color:#fff !important; text-decoration:none !important;
  padding:13px 28px; font-size:13px; font-weight:400; text-transform:uppercase; letter-spacing:.05em;
  border:none; cursor:pointer;
}
.btn:hover{ background:var(--blue); }
.btn--outline{ background:transparent; border:1px solid var(--near-black); color:var(--near-black) !important; }
.btn--outline:hover{ background:var(--near-black); color:#fff !important; }

.check-list{ list-style:none; padding:0; margin:0 0 1.2em; }
.check-list li{ padding-left:24px; position:relative; margin-bottom:8px; }
.check-list li::before{ content:"\\2713"; position:absolute; left:0; top:0; color:var(--blue); font-weight:700; }

/* Team / info box */
.info-box{ background:#f7f7f7; border-left:3px solid var(--blue); padding:22px 26px; margin-bottom:1.2em; }
.info-box h3{ margin-bottom:6px; font-size:15px; text-transform:uppercase; letter-spacing:.03em; color:var(--blue); }

details.faq{ border-bottom:1px solid var(--line); padding:14px 0; }
details.faq summary{ cursor:pointer; font-weight:500; color:var(--h2); font-family:"Poppins"; list-style:none; font-size:15px; }
details.faq summary::-webkit-details-marker{ display:none; }
details.faq summary::before{ content:"+ "; color:var(--blue); font-weight:700; }
details.faq[open] summary::before{ content:"\\2212 "; }
details.faq p{ margin:10px 0 0; }

.stats-row{ display:flex; gap:40px; flex-wrap:wrap; margin:30px 0; }
.stats-row .stat b{ display:block; font-family:"Poppins"; font-size:34px; font-weight:700; color:var(--near-black); }
.stats-row .stat span{ font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:#888; }

/* Contact */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:44px; }
@media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-item{ margin-bottom:20px; }
.contact-item h4{ text-transform:uppercase; font-size:12px; letter-spacing:.06em; color:#888; margin:0 0 4px; font-family:"Poppins"; font-weight:600; }
.contact-item p{ margin:0; }
form.enquiry input, form.enquiry textarea{
  width:100%; padding:12px 14px; margin-bottom:14px; border:1px solid #ddd; font-family:"Roboto"; font-size:14px;
}
form.enquiry label{ display:block; font-size:13px; color:#555; margin-bottom:6px; }
.map-embed iframe{ width:100%; height:320px; border:0; display:block; }

/* ---------------- Footer ---------------- */
footer.site-footer{ background:var(--near-black); color:var(--footer-text); padding:50px 0 0; }
.foot-cols{ display:grid; grid-template-columns:1fr 1fr; gap:30px; padding-bottom:34px; }
@media (max-width:640px){ .foot-cols{ grid-template-columns:1fr; } }
footer.site-footer h4{ color:#fff; font-family:"Poppins"; font-size:15px; text-transform:uppercase; letter-spacing:.04em; margin-bottom:14px; }
footer.site-footer a{ color:#fff; }
footer.site-footer p{ color:var(--footer-text); margin:0 0 6px; }
.foot-bottom{ border-top:1px solid #262626; padding:16px 0; text-align:center; font-size:12px; color:#777; }

.skip-link{ position:absolute; left:-999px; top:0; background:var(--blue); color:#fff; padding:10px 16px; z-index:100; }
.skip-link:focus{ left:10px; top:10px; }