/* Amped Up Electrical Adelaide — shared theme: service + suburb pages
   Extracted from 80 pages that each carried an identical copy inline.
   Edit here, not per page. */
@font-face{font-family:'Satoshi';font-weight:400;font-style:normal;font-display:swap;src:url('/assets/fonts/satoshi-400.woff2') format('woff2')}@font-face{font-family:'Satoshi';font-weight:500;font-style:normal;font-display:swap;src:url('/assets/fonts/satoshi-500.woff2') format('woff2')}@font-face{font-family:'Satoshi';font-weight:700;font-style:normal;font-display:swap;src:url('/assets/fonts/satoshi-700.woff2') format('woff2')}@font-face{font-family:'Satoshi';font-weight:900;font-style:normal;font-display:swap;src:url('/assets/fonts/satoshi-900.woff2') format('woff2')}
 h1,h2,.callout h2{font-family:'Satoshi',system-ui,-apple-system,sans-serif;font-weight:700;letter-spacing:-.025em;line-height:1.12}
 h1{font-size:clamp(32px,4.6vw,46px)}
 ::selection{background:rgba(176,134,58,.25)}
 .card a:not(.btn){color:var(--accent)}
 .statSync strong{display:block;font-size:24px;color:#c9a24a;font-family:'Satoshi',system-ui,-apple-system,sans-serif;font-weight:700}
 .statSync span{color:rgba(255,255,255,.6);font-size:13px}

 :root{--bg:#f6f4ef;--panel:#ffffff;--text:#283042;--muted:#5a6478;--border:#e5e1d6;--accent:#14213d;--accent2:#1c2c4f;--shadow:0 10px 30px rgba(20,33,61,.10);--radius:22px}
 *{box-sizing:border-box}html{scroll-behavior:smooth}
 body{margin:0;font-family:'Satoshi',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}
 a{color:inherit;text-decoration:none}
 .wrap{max-width:1100px;margin:0 auto;padding:22px}
 .card{border:1px solid var(--border);border-radius:var(--radius);background:var(--panel);backdrop-filter:blur(10px);box-shadow:var(--shadow);padding:32px;margin:20px 0}
 h1{margin:0 0 12px;font-size:42px;line-height:1.1}h2{margin:24px 0 12px;font-size:28px}h3{margin:18px 0 8px;font-size:20px}
 .sub{color:var(--muted);font-size:17px;line-height:1.6;margin:0 0 20px}
 .kicker{color:var(--muted);font-weight:1000;letter-spacing:.7px;text-transform:uppercase;font-size:12px;margin-bottom:10px}
 p{margin:0 0 16px;color:var(--muted);line-height:1.6}ul{color:var(--muted);line-height:1.8;margin:0 0 16px}
 .btn{padding:14px 24px;border-radius:16px;border:1.5px solid #d6cfbf;background:#ffffff;color:var(--text);font-weight:1000;cursor:pointer;display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-size:16px}
 .btn.primary{border:none;background:#14213d;color:#fff}
 .btn.primary:hover{transform:scale(1.02)}
 .checkList{list-style:none;padding:0;margin:20px 0}
 .checkList li{padding:12px 0;border-bottom:1px solid var(--border);font-size:16px;color:var(--muted);line-height:1.6}
 .checkList li:before{content:"\2713";color:var(--accent);font-weight:1000;margin-right:12px;font-size:18px}
 .callout{background:linear-gradient(135deg,rgba(201,162,74,.18),rgba(255,122,0,.12));border:2px solid rgba(201,162,74,.40);border-radius:18px;padding:28px;text-align:center;margin:32px 0}
 .callout h2{margin:0 0 12px;font-size:32px}.callout p{margin:0 0 20px;font-size:17px;color:var(--muted)}
 @media(max-width:768px){h1{font-size:32px}.card{padding:24px}}
 .quotePopup{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:10000;display:none;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(8px)}
 .quotePopup.show{display:flex;animation:fadeIn 0.3s ease}
 @keyframes fadeIn{from{opacity:0}to{opacity:1}}
 .quotePopupInner{background:var(--bg);border-radius:var(--radius);padding:40px;max-width:520px;width:100%;position:relative;box-shadow:var(--shadow);border:1px solid var(--border);animation:slideUp 0.4s ease}
 @keyframes slideUp{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}
 .quotePopupClose{position:absolute;top:16px;right:16px;background:rgba(201,162,74,0.1);border:1px solid var(--border);color:var(--text);width:36px;height:36px;border-radius:50%;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s}
 .quotePopupClose:hover{background:var(--accent);color:#000;transform:rotate(90deg)}
 .quotePopupInner h3{font-size:28px;margin-bottom:12px;color:var(--accent);font-weight:800}
 .quotePopupInner p{color:var(--muted);margin-bottom:24px;font-size:15px}
 .quoteForm{display:flex;flex-direction:column;gap:16px}
 .quoteForm input,.quoteForm textarea,.quoteForm select{padding:14px 18px;background:rgba(201,162,74,0.05);border:1px solid var(--border);border-radius:12px;color:var(--text);font-size:15px;font-family:inherit;transition:all 0.2s}
 .quoteForm input:focus,.quoteForm textarea:focus,.quoteForm select:focus{outline:none;border-color:var(--accent);background:rgba(201,162,74,0.08)}
 .quoteForm textarea{min-height:100px;resize:vertical}
 .quoteForm button{padding:16px 32px;background:#14213d;color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:700;cursor:pointer;transition:all 0.2s;margin-top:8px}
 .quoteForm button:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(201,162,74,0.4)}
 .quoteSuccessMessage{display:none;text-align:center;padding:20px}
 .quoteSuccessMessage.show{display:block}
 .quoteSuccessMessage h4{color:#00cc70;font-size:24px;margin-bottom:12px}
 .quoteSuccessMessage p{color:var(--muted);font-size:16px}


/* Responsive logo sizing — bigger on desktop, sensible on mobile */
@media (max-width: 768px) {
 nav img[alt*="Amped Up"], .logo, .nav-brand img { height: 56px !important; }
 nav > div, .nav-inner { height: 70px !important; }
 body > div[style*="height:100px"], body > div[style*="height:80px"] { height: 70px !important; }
 .topSocials { gap: 4px !important; margin-right: 4px !important; }
 .topSocials a { width: 24px !important; height: 24px !important; }
 .topSocials a svg { width: 12px !important; height: 12px !important; }
 nav a[href="/#services"], nav a[href="/blog/"] { display: none !important; }
}


.mobileStickyCall{display:none;position:fixed;bottom:0;left:0;right:0;z-index:999;padding:12px 16px;background:rgba(250,249,246,.96);backdrop-filter:blur(12px);border-top:1px solid #d6cfbf;box-shadow:0 -10px 30px rgba(20,33,61,.12)}
.mobileStickyCall a{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:14px;background:linear-gradient(135deg,#dca82c,#c4901c);color:#0c1326;font-weight:800;font-size:16.5px;border-radius:12px;text-decoration:none;box-shadow:0 6px 18px rgba(20,33,61,.28)}
.mobileStickyCall a:active{transform:scale(0.98)}
@media (max-width:768px){.mobileStickyCall{display:block}body{padding-bottom:80px}}

/* ============================================================
   VISUAL REFRESH 2026-08-09 — appended to theme-pages.css
   CSS only, so it restyles all 80 service + suburb pages at once
   without touching a single page's markup.
   ============================================================ */

/* --- 1. Type hierarchy -------------------------------------
   Every heading was near the same weight and every paragraph was
   --muted, so nothing led the eye. Headings get scale + tighter
   tracking; body copy steps up to --text and muted is demoted to
   genuinely secondary lines only. */
.card h2{
  font-size:clamp(24px,2.5vw,31px);
  letter-spacing:-.028em;
  line-height:1.15;
  color:var(--accent);
  margin:0 0 6px;
}
.card h2 + p,
.card > p:first-of-type{ font-size:16.5px; }
.card h3{
  font-size:18.5px;
  letter-spacing:-.015em;
  color:var(--accent);
  margin:22px 0 6px;
}
.card p{ color:#42506b; }              /* was --muted everywhere: too grey, too flat */
.card li{ color:#42506b; }
.sub{ font-size:17.5px; color:var(--muted); }

/* A hairline rule under each section heading gives the stack of
   cards some rhythm instead of 12 identical white slabs. */
.card > h2:first-child::after,
.card > .kicker + h2::after{
  content:"";
  display:block;
  width:44px;
  height:3px;
  border-radius:2px;
  margin:14px 0 20px;
  background:linear-gradient(90deg,var(--gold-bright,#c9a24a),rgba(201,162,74,0));
}

/* --- 2. The service list ------------------------------------
   18 items in a single column read as a wall. Two columns on
   desktop, and the bold lead-in gets its own line so each row is
   scannable rather than a paragraph with a tick in front. */
@media (min-width:900px){
  .checkList{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:34px;
    row-gap:0;
  }
}
.checkList li{
  padding:14px 0 14px 30px;
  position:relative;
  font-size:15px;
  line-height:1.62;
}
.checkList li:before{
  position:absolute;
  left:0;
  top:13px;
  margin:0;
  font-size:15px;
  color:var(--gold-bright,#c9a24a);
}
.checkList li strong{
  display:block;
  color:var(--accent);
  font-size:15.5px;
  letter-spacing:-.01em;
  margin-bottom:2px;
}

/* --- 3. Cards ------------------------------------------------
   Softer border, lighter shadow, and a little more air. The old
   10px/30px shadow on every card made the page feel heavy. */
.card{
  padding:34px 34px 30px;
  margin:18px 0;
  border-color:#e8e3d8;
  box-shadow:0 1px 2px rgba(20,33,61,.04), 0 12px 28px rgba(20,33,61,.055);
}
@media (max-width:768px){
  .card{ padding:24px 20px 22px; border-radius:18px; }
  .card h2{ font-size:23px; }
}

/* --- 4. Buttons ---------------------------------------------
   Primary got a subtle depth cue and a real hover. Secondary was
   almost invisible against white. */
.btn{
  border-radius:14px;
  transition:transform .18s var(--ease,ease), box-shadow .18s var(--ease,ease), background .18s;
  border-color:#d9d2c2;
}
.btn.primary{
  box-shadow:0 6px 18px rgba(20,33,61,.22);
}
.btn.primary:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 26px rgba(20,33,61,.30);
}
.btn:not(.primary):hover{
  border-color:var(--accent);
  background:#fcfbf8;
}

/* --- 5. Callout ---------------------------------------------
   Was the only varied block on the page and still felt flat. */
.callout{
  border-radius:22px;
  padding:34px 28px;
  border-width:1px;
  background:linear-gradient(150deg,rgba(201,162,74,.20),rgba(201,162,74,.07) 60%,rgba(246,244,239,0));
}
.callout h2{ color:var(--accent); }
.callout h2::after{ display:none; }

/* --- 6. Kicker ----------------------------------------------- */
.kicker{
  color:var(--gold-deep,#b0863a);
  font-weight:800;
  letter-spacing:.09em;
  font-size:11.5px;
}

/* --- 7. Links ------------------------------------------------ */
.card a:not(.btn){
  text-decoration:none;
  border-bottom:1px solid rgba(201,162,74,.45);
  transition:border-color .18s;
}
.card a:not(.btn):hover{ border-bottom-color:var(--accent); }

/* --- 8. Focus visibility (was none anywhere) ----------------- */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--gold-deep,#b0863a);
  outline-offset:2px;
  border-radius:6px;
}