/* ═══════════════════════════════════════
   NATE'S RATES ELECTRICAL, SHARED STYLES
   ═══════════════════════════════════════ */
:root {
  --navy:#0c1a3e;--navy2:#0f2050;--navy3:#162764;
  --gold:#c9a020;--gold2:#e0b828;--gold3:#f0cc50;
  --white:#ffffff;--text:#dde4f0;--muted:#8a97b8;
  --border:#1e2f5e;--success:#22c55e;--dark:#060e24;--danger:#ef4444;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{background:var(--dark);color:var(--text);font-family:'DM Sans',sans-serif;font-size: calc(16px * var(--text-scale));line-height:1.65;overflow-x:hidden;}
::-webkit-scrollbar{width:6px;}
::-webkit-scrollbar-track{background:var(--dark);}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}
h1,h2,h3,h4{font-family:'Oswald',sans-serif;font-weight:700;line-height:1.1;letter-spacing:0.02em;text-transform:uppercase;}
p{line-height:1.75;}
a{text-decoration:none;}
img{max-width:100%;height:auto;}

/* ── NAV ── */
nav{position:fixed;top:0;left:0;right:0;z-index:200;height:64px;display:flex;align-items:center;background:rgba(6,14,36,0.95);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);transition:box-shadow 0.3s;}
nav.scrolled{box-shadow:0 4px 32px rgba(0,0,0,0.5);}
.nav-inner{width:100%;max-width:1200px;margin:0 auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between;}
.nav-logo{display:flex;align-items:center;gap:10px;cursor:pointer;text-decoration:none;}
.nav-logo-text{font-family:'Oswald',sans-serif;font-size: calc(18px * var(--text-scale));font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--white);line-height:1;}
.nav-logo-text span{color:var(--gold);display:block;font-size: calc(10px * var(--text-scale));font-weight:500;letter-spacing:0.18em;}
.nav-links{display:flex;align-items:center;gap:4px;}
.nav-links a{font-size: calc(13px * var(--text-scale));font-weight:500;color:var(--muted);text-decoration:none;padding:8px 14px;border-radius:6px;transition:all 0.2s;letter-spacing:0.02em;}
.nav-links a:hover,.nav-links a.active{color:var(--white);background:var(--border);}
.nav-right{display:flex;align-items:center;gap:10px;}
.nav-phone{font-size: calc(13px * var(--text-scale));font-weight:500;color:var(--gold);text-decoration:none;border:1px solid var(--gold);border-radius:6px;padding:8px 14px;transition:all 0.2s;}
.nav-phone:hover{background:var(--gold);color:var(--navy);}
.nav-cta{background:var(--gold);color:var(--navy);font-family:'Oswald',sans-serif;font-size: calc(14px * var(--text-scale));font-weight:700;letter-spacing:0.08em;text-transform:uppercase;padding:10px 20px;border-radius:6px;border:none;transition:all 0.3s;cursor:pointer;white-space:nowrap;text-decoration:none;display:inline-block;}
.nav-cta:hover{background:var(--gold2);transform:translateY(-1px);}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px;background:none;border:none;}
.hamburger span{display:block;width:24px;height:2px;background:var(--white);border-radius:2px;transition:all 0.3s;}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.mobile-menu{display:none;position:fixed;top:64px;left:0;right:0;background:rgba(6,14,36,0.98);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);z-index:199;flex-direction:column;padding:16px;gap:4px;max-height:calc(100vh - 64px);overflow-y:auto;}
.mobile-menu.open{display:flex;}
.mobile-menu .mob-section{font-size: calc(10px * var(--text-scale));font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);padding:10px 16px 0;}
.mobile-menu .mob-section:first-child{padding-top:4px;}
.mobile-menu a{font-size: calc(15px * var(--text-scale));font-weight:500;color:var(--muted);text-decoration:none;padding:11px 16px;border-radius:6px;transition:all 0.2s;display:block;}
.mobile-menu a:hover{color:var(--white);background:var(--border);}
.mobile-menu .mob-cta{background:var(--gold);color:var(--navy);text-align:center;font-family:'Oswald',sans-serif;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;margin-top:8px;border-radius:6px;}

/* ── BREADCRUMB ── */
.breadcrumb{background:rgba(6,14,36,0.95);border-bottom:1px solid var(--border);padding:0 28px;height:34px;display:flex;align-items:center;gap:6px;font-size: calc(12px * var(--text-scale));font-weight:500;position:fixed;top:64px;left:0;right:0;z-index:190;backdrop-filter:blur(12px);}
.bc-item{color:var(--muted);text-decoration:none;transition:color 0.2s;white-space:nowrap;}
.bc-item:hover{color:var(--gold);}
.bc-item.current{color:var(--text);cursor:default;pointer-events:none;}
.bc-sep{color:var(--border);font-size: calc(10px * var(--text-scale));}
body{padding-top:98px;}

/* ── MOBILE STICKY CALL BAR ── */
.sticky-call-bar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:300;background:var(--gold);padding:12px 20px;flex-direction:row;align-items:center;justify-content:space-between;box-shadow:0 -4px 24px rgba(0,0,0,0.4);}
.sticky-call-bar a{color:var(--navy);font-family:'Oswald',sans-serif;font-weight:700;font-size: calc(16px * var(--text-scale));letter-spacing:0.06em;text-decoration:none;display:flex;align-items:center;gap:7px;}
.sticky-call-bar .scb-quote{background:var(--navy);color:var(--gold);padding:8px 16px;border-radius:6px;font-size: calc(13px * var(--text-scale));}

/* ── SCROLL TO TOP ── */
.scroll-top{position:fixed;bottom:28px;right:24px;z-index:150;width:42px;height:42px;border-radius:50%;background:var(--navy);border:1px solid var(--border);color:var(--gold);font-size: calc(18px * var(--text-scale));cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:all 0.3s;box-shadow:0 4px 20px rgba(0,0,0,0.4);}
.scroll-top.visible{opacity:1;pointer-events:all;}
.scroll-top:hover{background:var(--gold);color:var(--navy);border-color:var(--gold);transform:translateY(-2px);}

/* ── TRUST BAR ── */
.trust-bar{background:var(--navy);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:16px 32px;}
.trust-bar-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:30px;flex-wrap:wrap;}
.trust-item{display:flex;align-items:center;gap:9px;font-size: calc(13px * var(--text-scale));font-weight:500;color:var(--text);opacity:0.85;}
.trust-item strong{color:var(--gold);}

/* ── BUTTONS ── */
.btn-primary{display:inline-flex;align-items:center;gap:9px;background:var(--gold);color:var(--navy);font-family:'Oswald',sans-serif;font-size: calc(15px * var(--text-scale));font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:14px 28px;border-radius:7px;text-decoration:none;transition:all 0.2s;border:none;cursor:pointer;}
.btn-primary:hover{background:var(--gold2);transform:translateY(-2px);box-shadow:0 8px 24px rgba(201,160,32,0.3);}
.btn-secondary{display:inline-flex;align-items:center;gap:9px;background:transparent;color:var(--white);font-family:'Oswald',sans-serif;font-size: calc(15px * var(--text-scale));font-weight:600;letter-spacing:0.08em;text-transform:uppercase;padding:13px 26px;border-radius:7px;text-decoration:none;border:1px solid var(--border);transition:all 0.2s;cursor:pointer;}
.btn-secondary:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px);}

/* ── SECTIONS ── */
.section{padding:88px 32px;}
.section-inner{max-width:1200px;margin:0 auto;}
.section-label{font-size: calc(11px * var(--text-scale));font-weight:600;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold);margin-bottom:12px;display:flex;align-items:center;gap:10px;}
.section-label::before{content:'';width:22px;height:2px;background:var(--gold);}
.section-title{font-size: clamp(calc(30px * var(--text-scale)),calc(4vw * var(--text-scale)),calc(48px * var(--text-scale)));color:var(--white);margin-bottom:14px;}
.section-sub{font-size: calc(17px * var(--text-scale));color:var(--muted);max-width:560px;line-height:1.7;}

/* ── PAGE HERO ── */
.page-hero{background:linear-gradient(135deg,#060e24 0%,#0c1a3e 100%);padding:64px 32px 52px;position:relative;overflow:hidden;}
.page-hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(201,160,32,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(201,160,32,0.03) 1px,transparent 1px);background-size:50px 50px;}
.page-hero-glow{position:absolute;top:-150px;right:-150px;width:500px;height:500px;background:radial-gradient(circle,rgba(201,160,32,0.09) 0%,transparent 65%);}
.page-hero-inner{max-width:1200px;margin:0 auto;position:relative;z-index:1;}
.page-hero-eyebrow{font-size: calc(11px * var(--text-scale));font-weight:600;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold);margin-bottom:12px;display:flex;align-items:center;gap:9px;}
.page-hero-eyebrow::before{content:'';width:18px;height:2px;background:var(--gold);}
.page-hero h1{font-size: clamp(calc(34px * var(--text-scale)),calc(5vw * var(--text-scale)),calc(58px * var(--text-scale)));color:var(--white);margin-bottom:14px;}
.page-hero p{font-size: calc(17px * var(--text-scale));color:var(--muted);max-width:540px;line-height:1.7;margin-bottom:24px;}

/* ── SERVICE CARDS ── */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:50px;}
.service-card{background:var(--navy);border:1px solid var(--border);border-radius:12px;padding:26px;transition:all 0.25s;text-decoration:none;display:block;position:relative;overflow:hidden;}
.service-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--gold),transparent);opacity:0;transition:opacity 0.25s;}
.service-card:hover{border-color:rgba(201,160,32,0.35);background:linear-gradient(135deg,var(--navy2),var(--navy));transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,0.4);}
.service-card:hover::after{opacity:1;}
.sc-icon{font-size: calc(34px * var(--text-scale));margin-bottom:16px;display:block;}
.sc-title{font-family:'Oswald',sans-serif;font-size: calc(19px * var(--text-scale));font-weight:600;color:var(--white);text-transform:uppercase;letter-spacing:0.04em;margin-bottom:9px;}
.sc-desc{font-size: calc(14px * var(--text-scale));color:var(--muted);line-height:1.7;margin-bottom:16px;}
.sc-link{font-size: calc(12px * var(--text-scale));font-weight:600;color:var(--gold);letter-spacing:0.06em;text-transform:uppercase;}

/* ── SERVICE DETAIL ── */
.service-detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:40px;}
.service-detail-card{background:var(--navy);border:1px solid var(--border);border-radius:14px;padding:32px;transition:all 0.25s;}
.service-detail-card:hover{border-color:rgba(201,160,32,0.3);}
.sdc-top{display:flex;align-items:flex-start;gap:15px;margin-bottom:16px;}
.sdc-icon{font-size: calc(36px * var(--text-scale));flex-shrink:0;line-height:1;}
.sdc-title{font-family:'Oswald',sans-serif;font-size: calc(21px * var(--text-scale));font-weight:700;color:var(--white);text-transform:uppercase;margin-bottom:3px;}
.sdc-subtitle{font-size: calc(12px * var(--text-scale));color:var(--gold);}
.sdc-desc{font-size: calc(14px * var(--text-scale));color:var(--muted);line-height:1.75;margin-bottom:18px;}
.sdc-includes{border-top:1px solid var(--border);padding-top:16px;}
.sdc-includes-title{font-size: calc(11px * var(--text-scale));font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;}
.sdc-list{list-style:none;display:flex;flex-direction:column;gap:5px;}
.sdc-list li{display:flex;align-items:center;gap:7px;font-size: calc(13px * var(--text-scale));color:var(--text);}
.sdc-list li::before{content:'✓';color:var(--gold);font-weight:700;flex-shrink:0;}

/* ── WHY SECTION ── */
.why-section{background:var(--navy);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;}
.why-points{margin-top:34px;display:flex;flex-direction:column;gap:22px;}
.why-point{display:flex;gap:16px;}
.wp-num{font-family:'Oswald',sans-serif;font-size: calc(34px * var(--text-scale));font-weight:700;color:var(--gold);opacity:0.35;line-height:1;flex-shrink:0;width:42px;}
.wp-title{font-family:'Oswald',sans-serif;font-size: calc(17px * var(--text-scale));font-weight:600;color:var(--white);text-transform:uppercase;margin-bottom:5px;}
.wp-text{font-size: calc(14px * var(--text-scale));color:var(--muted);line-height:1.7;}
.why-visual{background:var(--dark);border:1px solid var(--border);border-radius:16px;padding:34px;}
.stat-item{padding:20px 0;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.stat-item:last-child{border-bottom:none;padding-bottom:0;}
.stat-item:first-child{padding-top:0;}
.stat-val{font-family:'Oswald',sans-serif;font-size: calc(40px * var(--text-scale));font-weight:700;color:var(--gold);line-height:1;}
.stat-label{font-size: calc(13px * var(--text-scale));color:var(--muted);margin-top:3px;}
.stat-icon{font-size: calc(30px * var(--text-scale));opacity:0.35;}

/* ── AREAS ── */
.areas-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:44px;}
.area-chip{background:var(--navy);border:1px solid var(--border);border-radius:8px;padding:13px 16px;font-size: calc(13px * var(--text-scale));font-weight:500;color:var(--text);display:flex;align-items:center;gap:7px;transition:all 0.2s;text-decoration:none;}
.area-chip:hover{border-color:var(--gold);color:var(--gold);}
.area-chip::before{content:'📍';font-size: calc(13px * var(--text-scale));}

/* ── BLOG CARDS ── */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:50px;}
.blog-card{background:var(--navy);border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:all 0.25s;text-decoration:none;display:block;}
.blog-card:hover{border-color:rgba(201,160,32,0.35);transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,0.4);}
.blog-thumb{height:160px;display:flex;align-items:center;justify-content:center;font-size: calc(52px * var(--text-scale));}
.blog-body{padding:18px 22px 22px;}
.blog-tag{font-size: calc(11px * var(--text-scale));font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--gold);margin-bottom:8px;}
.blog-title{font-family:'Oswald',sans-serif;font-size: calc(18px * var(--text-scale));font-weight:600;color:var(--white);text-transform:uppercase;margin-bottom:9px;line-height:1.2;}
.blog-excerpt{font-size: calc(13px * var(--text-scale));color:var(--muted);line-height:1.65;}
.blog-read{margin-top:12px;font-size: calc(12px * var(--text-scale));font-weight:600;color:var(--gold);letter-spacing:0.08em;text-transform:uppercase;}

/* ── BLOG LIST ── */
.blog-list{display:flex;flex-direction:column;gap:20px;margin-top:44px;}
.blog-list-card{background:var(--navy);border:1px solid var(--border);border-radius:12px;padding:26px 28px;display:grid;grid-template-columns:60px 1fr;gap:20px;align-items:start;text-decoration:none;transition:all 0.25s;}
.blog-list-card:hover{border-color:rgba(201,160,32,0.35);transform:translateY(-2px);}
.blc-icon{width:60px;height:60px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size: calc(26px * var(--text-scale));flex-shrink:0;}
.blc-meta{font-size: calc(11px * var(--text-scale));font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--gold);margin-bottom:6px;}
.blc-title{font-family:'Oswald',sans-serif;font-size: calc(20px * var(--text-scale));color:var(--white);text-transform:uppercase;margin-bottom:7px;line-height:1.2;}
.blc-excerpt{font-size: calc(14px * var(--text-scale));color:var(--muted);line-height:1.7;}
.blc-read{margin-top:8px;font-size: calc(12px * var(--text-scale));font-weight:600;color:var(--gold);letter-spacing:0.08em;text-transform:uppercase;}

/* ── BLOG POST ── */
.blog-post-wrap{max-width:780px;margin:0 auto;padding:52px 32px 88px;}
.back-link{display:inline-flex;align-items:center;gap:7px;font-size: calc(13px * var(--text-scale));color:var(--muted);text-decoration:none;margin-bottom:28px;transition:color 0.2s;}
.back-link:hover{color:var(--gold);}
.bp-tag{font-size: calc(11px * var(--text-scale));font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:var(--gold);margin-bottom:12px;}
.bp-title{font-size: clamp(calc(28px * var(--text-scale)),calc(4vw * var(--text-scale)),calc(44px * var(--text-scale)));color:var(--white);margin-bottom:18px;line-height:1.1;}
.bp-meta{display:flex;align-items:center;gap:14px;font-size: calc(13px * var(--text-scale));color:var(--muted);margin-bottom:34px;padding-bottom:26px;border-bottom:1px solid var(--border);flex-wrap:wrap;}
.bp-content{font-size: calc(16px * var(--text-scale));color:var(--text);line-height:1.8;}
.bp-content h2{font-family:'Oswald',sans-serif;font-size: calc(25px * var(--text-scale));color:var(--white);text-transform:uppercase;margin:36px 0 12px;}
.bp-content h3{font-family:'Oswald',sans-serif;font-size: calc(19px * var(--text-scale));color:var(--gold);text-transform:uppercase;margin:26px 0 9px;}
.bp-content p{margin-bottom:16px;color:var(--muted);}
.bp-content strong{color:var(--text);}
.bp-content ul{margin:0 0 16px 20px;display:flex;flex-direction:column;gap:7px;}
.bp-content ul li{color:var(--muted);}
.bp-content .callout{background:rgba(201,160,32,0.06);border:1px solid rgba(201,160,32,0.2);border-left:3px solid var(--gold);border-radius:0 8px 8px 0;padding:16px 18px;margin:22px 0;font-size: calc(15px * var(--text-scale));color:var(--text);}
.bp-content table{width:100%;border-collapse:collapse;margin:22px 0;font-size: calc(14px * var(--text-scale));display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.bp-content th{background:var(--navy2);color:var(--gold);font-family:'Oswald',sans-serif;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;padding:11px 14px;text-align:left;border:1px solid var(--border);}
.bp-content td{padding:10px 14px;border:1px solid var(--border);color:var(--muted);}
.bp-content tr:nth-child(even) td{background:rgba(255,255,255,0.02);}
.bp-cta{background:linear-gradient(135deg,var(--navy2),var(--navy));border:1px solid rgba(201,160,32,0.25);border-radius:12px;padding:32px;margin-top:44px;text-align:center;}
.bp-cta h3{font-family:'Oswald',sans-serif;font-size: calc(22px * var(--text-scale));color:var(--white);text-transform:uppercase;margin-bottom:8px;}
.bp-cta p{font-size: calc(14px * var(--text-scale));color:var(--muted);margin-bottom:20px;}

/* ── CTA BANNER ── */
.cta-banner{background:linear-gradient(135deg,var(--navy2),var(--navy3));border:1px solid rgba(201,160,32,0.2);border-radius:16px;padding:56px;text-align:center;position:relative;overflow:hidden;}
.cta-banner::before{content:'⚡';position:absolute;top:-20px;right:40px;font-size: calc(160px * var(--text-scale));opacity:0.04;line-height:1;}
.cta-banner h2{font-size: clamp(calc(26px * var(--text-scale)),calc(4vw * var(--text-scale)),calc(44px * var(--text-scale)));color:var(--white);margin-bottom:10px;}
.cta-banner p{font-size: calc(17px * var(--text-scale));color:var(--muted);margin-bottom:30px;}
.cta-banner-actions{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;}

/* ── CONTACT ── */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:50px;}
.contact-methods{display:flex;flex-direction:column;gap:12px;margin-bottom:28px;}
.cm-item{display:flex;align-items:center;gap:13px;background:var(--navy);border:1px solid var(--border);border-radius:10px;padding:14px 18px;text-decoration:none;transition:all 0.2s;}
.cm-item:hover{border-color:var(--gold);transform:translateX(4px);}
.cm-icon{font-size: calc(22px * var(--text-scale));flex-shrink:0;}
.cm-label{font-size: calc(11px * var(--text-scale));color:var(--muted);letter-spacing:0.1em;text-transform:uppercase;font-weight:600;}
.cm-value{font-size: calc(15px * var(--text-scale));color:var(--white);font-weight:500;}
.cm-item:hover .cm-value{color:var(--gold);}
.area-tags{display:flex;flex-wrap:wrap;gap:7px;}
.area-tag{font-size: calc(12px * var(--text-scale));padding:4px 10px;border-radius:20px;background:rgba(201,160,32,0.08);border:1px solid rgba(201,160,32,0.2);color:var(--gold);font-weight:500;}
.contact-form-box{background:var(--navy);border:1px solid var(--border);border-radius:14px;padding:32px;position:relative;overflow:hidden;}
.contact-form-box::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold),var(--gold3));}
.form-title{font-family:'Oswald',sans-serif;font-size: calc(21px * var(--text-scale));color:var(--white);text-transform:uppercase;margin-bottom:5px;}
.form-sub{font-size: calc(13px * var(--text-scale));color:var(--muted);margin-bottom:22px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.form-group{margin-bottom:12px;}
.form-group label,.form-group legend{display:block;font-size: calc(11px * var(--text-scale));font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);margin-bottom:5px;}
.form-fieldset{border:0;padding:0;margin:0;min-width:0;}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.est-service-card:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.form-group input,.form-group select,.form-group textarea{width:100%;background:var(--dark);border:1px solid var(--border);border-radius:8px;padding:11px 13px;font-size: calc(14px * var(--text-scale));color:var(--text);font-family:'DM Sans',sans-serif;outline:none;transition:border-color 0.2s;}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--gold);}
.form-group select option{background:var(--dark);}
.form-group textarea{resize:vertical;min-height:96px;}
.form-submit{width:100%;background:var(--gold);color:var(--navy);font-family:'Oswald',sans-serif;font-size: calc(15px * var(--text-scale));font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:13px;border-radius:8px;border:none;cursor:pointer;transition:all 0.2s;margin-top:4px;}
.form-submit:hover{background:var(--gold2);}
.form-success{display:none;text-align:center;padding:30px 0;}
.form-success .fs-icon{font-size: calc(44px * var(--text-scale));margin-bottom:9px;}
.form-success h4{font-family:'Oswald',sans-serif;font-size: calc(21px * var(--text-scale));color:var(--white);text-transform:uppercase;margin-bottom:5px;}
.form-success p{font-size: calc(14px * var(--text-scale));color:var(--muted);}

/* ── GALLERY ── */
.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:44px;}
.gallery-card{border-radius:12px;overflow:hidden;position:relative;aspect-ratio:4/3;}
.gallery-card img{width:100%;height:100%;object-fit:cover;transition:transform 0.4s;}
.gallery-card:hover img{transform:scale(1.04);}
.gallery-label{position:absolute;bottom:0;left:0;right:0;padding:14px 16px;background:linear-gradient(transparent,rgba(6,14,36,0.9));font-family:'Oswald',sans-serif;font-size: calc(14px * var(--text-scale));color:var(--white);text-transform:uppercase;letter-spacing:0.06em;}

/* ── ABOUT ── */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:76px;align-items:start;}
.about-img-box{border-radius:16px;aspect-ratio:4/3;overflow:hidden;position:relative;}
.about-img-box img{width:100%;height:100%;object-fit:cover;}
.about-badge{position:absolute;bottom:16px;right:16px;background:var(--gold);color:var(--navy);border-radius:12px;padding:16px 20px;text-align:center;}
.ab-num{font-family:'Oswald',sans-serif;font-size: calc(32px * var(--text-scale));font-weight:700;line-height:1;}
.ab-label{font-size: calc(11px * var(--text-scale));font-weight:600;letter-spacing:0.08em;text-transform:uppercase;}
.about-points{display:flex;flex-direction:column;gap:16px;margin:24px 0;}
.ap-item{display:flex;align-items:flex-start;gap:13px;}
.ap-icon{width:38px;height:38px;border-radius:8px;background:rgba(201,160,32,0.1);border:1px solid rgba(201,160,32,0.2);display:flex;align-items:center;justify-content:center;font-size: calc(17px * var(--text-scale));flex-shrink:0;}
.ap-title{font-family:'Oswald',sans-serif;font-size: calc(15px * var(--text-scale));color:var(--white);text-transform:uppercase;margin-bottom:2px;}
.ap-text{font-size: calc(13px * var(--text-scale));color:var(--muted);line-height:1.65;}

/* ── SUBURB PAGE ── */
.suburb-content-grid{display:grid;grid-template-columns:2fr 1fr;gap:50px;align-items:start;}
.suburb-sidebar{background:var(--navy);border:1px solid var(--border);border-radius:14px;padding:24px;position:sticky;top:110px;}
.suburb-sidebar-title{font-family:'Oswald',sans-serif;font-size: calc(13px * var(--text-scale));font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--gold);margin-bottom:16px;}
.suburb-body{font-size: calc(16px * var(--text-scale));color:var(--muted);line-height:1.8;}
.suburb-body h2{font-family:'Oswald',sans-serif;font-size: calc(22px * var(--text-scale));color:var(--white);text-transform:uppercase;margin:30px 0 10px;}
.suburb-body p{margin-bottom:14px;}
.suburb-body ul{margin:0 0 14px 20px;display:flex;flex-direction:column;gap:6px;}
.suburb-body ul li{color:var(--muted);}
.suburb-body strong{color:var(--text);}

/* ── QUIZ ── */
.quiz-wrap{max-width:700px;margin:0 auto;}
.quiz-progress{height:4px;background:var(--border);border-radius:2px;margin-bottom:40px;overflow:hidden;}
.quiz-progress-bar{height:100%;background:var(--gold);border-radius:2px;transition:width 0.4s ease;}
.quiz-step{display:none;}
.quiz-step.active{display:block;}
.quiz-step-label{font-size: calc(11px * var(--text-scale));font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--gold);margin-bottom:12px;}
.quiz-question{font-size: clamp(calc(20px * var(--text-scale)),calc(3vw * var(--text-scale)),calc(28px * var(--text-scale)));color:var(--white);font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase;margin-bottom:30px;line-height:1.15;}
.quiz-options{display:flex;flex-direction:column;gap:12px;}
.quiz-option{background:var(--navy);border:1px solid var(--border);border-radius:10px;padding:16px 20px;cursor:pointer;transition:all 0.2s;display:flex;align-items:center;gap:14px;font-size: calc(15px * var(--text-scale));color:var(--text);}
.quiz-option:hover{border-color:var(--gold);color:var(--white);transform:translateX(4px);}
.quiz-option.selected{border-color:var(--gold);background:rgba(201,160,32,0.08);color:var(--white);}
.quiz-option-letter{width:30px;height:30px;border-radius:6px;background:rgba(201,160,32,0.1);border:1px solid rgba(201,160,32,0.2);display:flex;align-items:center;justify-content:center;font-family:'Oswald',sans-serif;font-size: calc(13px * var(--text-scale));font-weight:700;color:var(--gold);flex-shrink:0;}
.quiz-nav{display:flex;align-items:center;gap:12px;margin-top:28px;flex-wrap:wrap;}
.quiz-result{display:none;text-align:center;padding:20px 0;}
.quiz-result.show{display:block;}
.result-score-ring{width:120px;height:120px;border-radius:50%;margin:0 auto 24px;display:flex;align-items:center;justify-content:center;font-family:'Oswald',sans-serif;font-size: calc(36px * var(--text-scale));font-weight:700;}
.result-score-ring.low{background:rgba(34,197,94,0.1);border:3px solid var(--success);color:var(--success);}
.result-score-ring.mid{background:rgba(251,191,36,0.1);border:3px solid #fbbf24;color:#fbbf24;}
.result-score-ring.high{background:rgba(239,68,68,0.1);border:3px solid var(--danger);color:var(--danger);}
.result-title{font-family:'Oswald',sans-serif;font-size: calc(28px * var(--text-scale));color:var(--white);text-transform:uppercase;margin-bottom:10px;}
.result-text{font-size: calc(16px * var(--text-scale));color:var(--muted);max-width:480px;margin:0 auto 28px;line-height:1.7;}

/* ── ESTIMATOR ── */
.estimator-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px;}
.est-service-card{background:var(--navy);border:2px solid var(--border);border-radius:12px;padding:20px;cursor:pointer;transition:all 0.2s;position:relative;}
.est-service-card:hover{border-color:rgba(201,160,32,0.4);}
.est-service-card.selected{border-color:var(--gold);background:rgba(201,160,32,0.05);}
.est-service-card.selected::after{content:'✓';position:absolute;top:12px;right:14px;font-size: calc(16px * var(--text-scale));color:var(--gold);font-weight:700;}
.est-icon{font-size: calc(28px * var(--text-scale));margin-bottom:10px;}
.est-name{font-family:'Oswald',sans-serif;font-size: calc(15px * var(--text-scale));color:var(--white);text-transform:uppercase;margin-bottom:4px;}
.est-range{font-size: calc(13px * var(--text-scale));color:var(--gold);font-weight:500;}
.est-qty{display:flex;align-items:center;gap:8px;margin-top:10px;}
.est-qty input{width:55px;background:var(--dark);border:1px solid var(--border);border-radius:6px;padding:5px 8px;color:var(--text);font-size: calc(13px * var(--text-scale));text-align:center;}
.est-qty label{font-size: calc(12px * var(--text-scale));color:var(--muted);}
.estimator-result{background:var(--dark);border:1px solid var(--border);border-radius:14px;padding:28px;margin-top:32px;}
.est-total-label{font-size: calc(11px * var(--text-scale));font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;}
.est-total-range{font-family:'Oswald',sans-serif;font-size: calc(42px * var(--text-scale));font-weight:700;color:var(--gold);line-height:1;margin-bottom:8px;}
.est-disclaimer{font-size: calc(12px * var(--text-scale));color:var(--muted);margin-bottom:20px;line-height:1.6;}
.est-line-items{display:flex;flex-direction:column;gap:6px;margin-bottom:24px;}
.est-line{display:flex;justify-content:space-between;font-size: calc(13px * var(--text-scale));color:var(--muted);padding:7px 0;border-bottom:1px solid var(--border);}
.est-line:last-child{border-bottom:none;}
.est-line span:last-child{color:var(--gold);font-weight:500;}

/* ── MYTH ── */
.myth-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;}
.myth-list{margin-top:30px;display:flex;flex-direction:column;gap:10px;}
.myth-item{border:1px solid var(--border);border-radius:10px;overflow:hidden;cursor:pointer;transition:border-color 0.2s;}
.myth-item.open{border-color:rgba(201,160,32,0.4);}
.myth-header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:16px 18px;background:rgba(255,255,255,0.02);}
.myth-item.open .myth-header{background:rgba(201,160,32,0.05);}
.myth-q{font-family:'Oswald',sans-serif;font-size: calc(14px * var(--text-scale));color:var(--white);text-transform:uppercase;display:flex;align-items:flex-start;gap:8px;line-height:1.3;flex:1;min-width:0;}
.myth-badge{font-size: calc(10px * var(--text-scale));font-weight:700;letter-spacing:0.1em;padding:3px 8px;border-radius:4px;text-transform:uppercase;flex-shrink:0;}
.myth-badge.false{background:rgba(239,68,68,0.15);color:#f87171;border:1px solid rgba(239,68,68,0.3);}
.myth-badge.mostly{background:rgba(251,191,36,0.15);color:#fbbf24;border:1px solid rgba(251,191,36,0.3);}
.myth-chevron{color:var(--muted);transition:transform 0.3s;font-size: calc(13px * var(--text-scale));flex-shrink:0;margin-top:2px;}
.myth-item.open .myth-chevron{transform:rotate(180deg);color:var(--gold);}
.myth-body{display:none;padding:0 18px 16px;font-size: calc(14px * var(--text-scale));color:var(--muted);line-height:1.7;}
.myth-item.open .myth-body{display:block;}
.myth-visual{background:var(--dark);border:1px solid var(--border);border-radius:16px;padding:34px;}
.myth-visual-title{font-family:'Oswald',sans-serif;font-size: calc(13px * var(--text-scale));font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--gold);margin-bottom:20px;}
.myth-fact{display:flex;align-items:flex-start;gap:12px;padding:16px 0;border-bottom:1px solid var(--border);}
.myth-fact:last-child{border-bottom:none;padding-bottom:0;}
.myth-fact-icon{font-size: calc(24px * var(--text-scale));flex-shrink:0;}
.myth-fact-text{font-size: calc(14px * var(--text-scale));color:var(--muted);line-height:1.6;}
.myth-fact-text strong{color:var(--text);display:block;margin-bottom:2px;font-size: calc(13px * var(--text-scale));text-transform:uppercase;letter-spacing:0.04em;}

/* ── FB SECTION ── */
.fb-section{background:var(--navy);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.fb-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.fb-embed-wrap{border-radius:12px;overflow:hidden;border:1px solid var(--border);}
.fb-embed-wrap iframe{display:block;width:100%;border:none;}
.fb-cta-card{background:var(--dark);border:1px solid var(--border);border-radius:14px;padding:28px;}
.fb-stat{padding:16px 0;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:14px;}
.fb-stat:last-of-type{border-bottom:none;}
.fb-stat-icon{font-size: calc(26px * var(--text-scale));}
.fb-stat-label{font-size: calc(13px * var(--text-scale));color:var(--muted);}
.fb-stat-val{font-family:'Oswald',sans-serif;font-size: calc(18px * var(--text-scale));color:var(--white);}

/* ── BOOKING BADGE ── */
.booking-badge{display:inline-flex;align-items:center;gap:7px;background:rgba(34,197,94,0.1);border:1px solid rgba(34,197,94,0.3);border-radius:20px;padding:5px 14px;font-size: calc(12px * var(--text-scale));font-weight:600;color:var(--success);letter-spacing:0.04em;}
.booking-badge::before{content:'●';font-size: calc(8px * var(--text-scale));animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.3;}}

/* ── ZAP ANIMATION ── */
@keyframes zapBtn{0%{box-shadow:0 0 0 rgba(201,160,32,0);}40%{box-shadow:0 0 40px 6px rgba(201,160,32,0.7);transform:scale(1.06);}100%{box-shadow:0 0 0 rgba(201,160,32,0);transform:scale(1);}}
.btn-zap.fired{animation:zapBtn 0.5s ease-out;}

/* ── FOOTER ── */
footer{background:var(--navy);border-top:1px solid var(--border);padding:56px 32px 36px;}
.footer-inner{max-width:1200px;margin:0 auto;}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:44px;margin-bottom:44px;}
.footer-brand-desc{font-size: calc(14px * var(--text-scale));color:var(--muted);line-height:1.75;margin:12px 0 18px;}
.footer-contact a{display:flex;align-items:center;gap:7px;font-size: calc(14px * var(--text-scale));color:var(--gold);text-decoration:none;margin-bottom:7px;}
.footer-head{font-family:'Oswald',sans-serif;font-size: calc(13px * var(--text-scale));font-weight:600;text-transform:uppercase;letter-spacing:0.12em;color:var(--white);margin-bottom:14px;}
.footer-links{display:flex;flex-direction:column;gap:7px;}
.footer-links a{font-size: calc(13px * var(--text-scale));color:var(--muted);text-decoration:none;transition:color 0.2s;}
.footer-links a:hover{color:var(--gold);}
.footer-bottom{border-top:1px solid var(--border);padding-top:24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;}
.footer-copy{font-size: calc(12px * var(--text-scale));color:var(--muted);}
.footer-lic{font-size: calc(11px * var(--text-scale));color:var(--muted);background:rgba(201,160,32,0.08);border:1px solid rgba(201,160,32,0.15);border-radius:6px;padding:5px 12px;}
.footer-abn{font-size: calc(11px * var(--text-scale));color:var(--muted);}

/* ── WHY GRID ── */
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;}

/* ── HERO GRID ── */
.hero-inner-grid{display:grid;grid-template-columns:1fr 420px;gap:70px;align-items:center;}

/* ── QUIZ TEASER ── */
.quiz-teaser-grid{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;}

/* ── WHY SECTION INNER ── */
.why-section-inner{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;}

/* ── CAROUSEL (mobile) ── */
.services-carousel-wrap{display:none;}

/* ── RESPONSIVE ── */
@media(max-width:960px){
  .nav-cta{display:none;}
  .nav-links{display:none;}
  .nav-phone{display:none;}
  .hamburger{display:flex;}
  .services-grid{grid-template-columns:repeat(2,1fr);}
  .why-grid{grid-template-columns:1fr!important;gap:36px!important;}
  .hero-inner-grid{grid-template-columns:1fr!important;gap:40px!important;}
  .quiz-teaser-grid{grid-template-columns:1fr!important;text-align:center!important;}
  .mobile-menu{padding-bottom:80px;}
  .myth-grid{grid-template-columns:1fr;}
  .fb-grid{grid-template-columns:1fr;}
  .areas-grid{grid-template-columns:repeat(2,1fr);}
  .blog-grid{grid-template-columns:1fr 1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px;}
  .about-grid{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .service-detail-grid{grid-template-columns:1fr;}
  .estimator-grid{grid-template-columns:1fr;}
  .gallery-grid{grid-template-columns:1fr;}
  .suburb-content-grid{grid-template-columns:1fr;}
  .sticky-call-bar{display:flex;}
  body{padding-bottom:60px;}
  .scroll-top{display:none;}
}
@media(max-width:700px){
  body{padding-top:94px;}
  nav{height:60px;}
  .breadcrumb{top:60px;padding:0 16px;height:30px;font-size: calc(11px * var(--text-scale));}
  .mobile-menu{top:60px;}
  .section{padding:52px 20px;}
  .page-hero{padding:44px 20px 36px;}
  .services-grid{display:none;}
  .services-carousel-wrap{display:block;margin-top:40px;}
  .services-carousel{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:4px 20px 16px;scrollbar-width:none;cursor:grab;}
  .services-carousel::-webkit-scrollbar{display:none;}
  .carousel-card{flex:0 0 80vw;max-width:300px;scroll-snap-align:center;background:var(--navy);border:1px solid var(--border);border-radius:12px;padding:22px;}
  .carousel-dots{display:flex;justify-content:center;gap:6px;margin-top:10px;}
  .cdot{width:6px;height:6px;border-radius:50%;background:var(--border);transition:all 0.3s;cursor:pointer;}
  .cdot.active{background:var(--gold);width:18px;border-radius:3px;}
  .carousel-hint{display:flex;align-items:center;justify-content:center;gap:6px;font-size: calc(12px * var(--text-scale));color:var(--muted);margin-bottom:10px;}
  .hero-inner-grid{padding:48px 20px 40px!important;}
  .quiz-teaser-grid{padding:28px 20px!important;}
  .blog-grid{grid-template-columns:1fr;}
  .areas-grid{grid-template-columns:1fr 1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  .blog-list-card{grid-template-columns:1fr;}
  .cta-banner{padding:32px 20px;}
  .cta-banner-actions{flex-direction:column;align-items:stretch;}
  .cta-banner-actions .btn-primary,.cta-banner-actions .btn-secondary,.cta-banner-actions a{text-align:center;justify-content:center;}
  .trust-bar{padding:12px 16px;}
  footer{padding:40px 16px 24px;}
  .blog-post-wrap{padding:32px 16px 60px;}
  .contact-form-box{padding:20px 16px;}
  .sticky-call-bar{padding:10px 16px;}
}

/* ── MOBILE STACKING OVERRIDES (belt and braces) ── */
@media(max-width:700px) {
  /* Hero grid */
  .hero-inner-grid {
    grid-template-columns:1fr !important;
    padding:48px 20px 36px !important;
    gap:32px !important;
  }
  /* Quiz teaser */
  .quiz-teaser-grid {
    grid-template-columns:1fr !important;
    padding:28px 20px !important;
    text-align:center !important;
  }
  /* Service detail & suburb content */
  .suburb-content-grid,
  [style*="grid-template-columns:2fr 1fr"],
  [style*="grid-template-columns:1fr 2fr"] {
    display:flex !important;
    flex-direction:column !important;
  }
  /* Sidebar goes below on mobile */
  .suburb-sidebar {
    position:static !important;
  }
  /* Why grid */
  .why-grid {
    grid-template-columns:1fr !important;
    gap:32px !important;
  }
  /* Contact grid */
  .contact-grid {
    grid-template-columns:1fr !important;
  }
  /* About grid */
  .about-grid {
    grid-template-columns:1fr !important;
  }
  /* Facebook grid */
  .fb-grid {
    grid-template-columns:1fr !important;
  }
  /* Blog grid */
  .blog-grid {
    grid-template-columns:1fr !important;
  }
  /* Areas grid */
  .areas-grid {
    grid-template-columns:1fr 1fr !important;
  }
  /* Footer grid */
  .footer-grid {
    grid-template-columns:1fr !important;
  }
  /* Service detail cards */
  .service-detail-grid {
    grid-template-columns:1fr !important;
  }
  /* Services checkbox grid on contact page */
  #f-services-wrap {
    grid-template-columns:1fr !important;
  }
  /* General fix: any inline grid in sections */
  .section-inner > [style*="display:grid"] {
    display:flex !important;
    flex-direction:column !important;
  }
}

/* ── NATE HERO, keep his face visible across viewports ── */
.hero [style*="nate-working-hero"] {
  background-position: 70% 28% !important;
}
@media(max-width:700px) {
  .hero [style*="nate-working-hero"] {
    background-position: 75% 25% !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   v2 FRAMEWORK ADDITIONS, appended to Nate's original style.css
   Added: 20 May 2026
   Scope: a11y controls UI, skip-link, sticky mobile CTA, scroll-top,
   body class effects (text-large, text-xl, hc-mode, pe-mode, motion-reduce),
   self-hosted fonts. Nothing above this line was touched.
   ─────────────────────────────────────────────────────────────────────── */

/* ── Self-hosted fonts (replaces Google Fonts CDN) ── */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/oswald-latin-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/oswald-latin-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/oswald-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/oswald-latin-700.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/dm-sans-latin-300.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/dm-sans-latin-400.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/dm-sans-latin-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/dm-sans-latin-500.woff2') format('woff2');
}

/* ── Text-scale variable (kept for potential future calc()-based scaling;
   the live text-size feature now uses CSS zoom on #main, see v2.0.1
   accessibility rebuild block further down). ── */
:root { --text-scale: 1; }

/* ── Skip-to-content link (keyboard a11y) ── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  background: var(--gold);
  color: var(--navy);
  padding: 10px 18px;
  font-family: 'Oswald', sans-serif;
  font-size: calc(14px * var(--text-scale));
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  z-index: 9999;
  text-decoration: none;
  border-radius: 0 0 6px 0;
  transition: top 0.15s;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 0;
  outline: 2px solid var(--white);
  outline-offset: -4px;
}

/* ── Scroll-to-top button ── */
.scroll-top {
  position: fixed;
  bottom: 96px;
  right: 20px;
  z-index: 150;
  width: 42px;
  height: 42px;
  background: var(--navy2);
  border: 1px solid var(--border);
  color: var(--gold);
  font-size: calc(18px * var(--text-scale));
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.2s, background 0.2s, border-color 0.2s;
  border-radius: 6px;
}
.scroll-top.visible {
  opacity: 1;
  pointer-events: all;
}
.scroll-top:hover {
  background: var(--gold);
  color: var(--navy);
  border-color: var(--gold);
  transform: translateY(-2px);
}
.scroll-top:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ── Sticky mobile CTA bar ── */
.sticky-cta {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 180;
  background: rgba(6, 14, 36, 0.97);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--gold);
  padding: 8px 12px;
  gap: 8px;
  align-items: stretch;
}
.sticky-cta a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Oswald', sans-serif;
  font-size: calc(14px * var(--text-scale));
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 12px 10px;
  border-radius: 6px;
  text-decoration: none;
  text-align: center;
  line-height: 1.1;
  min-height: 44px;
}
.sticky-cta .sc-call {
  background: var(--navy3);
  color: var(--gold);
  border: 1px solid var(--gold);
}
.sticky-cta .sc-quote {
  background: var(--gold);
  color: var(--navy);
}
.sticky-cta .sc-quote:active {
  background: var(--gold2);
}
@media (max-width: 768px) {
  .sticky-cta { display: flex; }
  body { padding-bottom: 64px; }
  .scroll-top { bottom: 76px; right: 14px; width: 38px; height: 38px; }
}

/* ── Accessibility trigger button + panel (a11y.v4.js wires this up) ── */
.a11y-trigger {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 160;
  width: 48px;
  height: 48px;
  background: var(--navy2);
  color: var(--gold);
  border: 2px solid var(--gold);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(22px * var(--text-scale));
  line-height: 1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  transition: background 0.2s, transform 0.2s;
}
.a11y-trigger::before {
  content: '\2657'; /* fallback symbol; replaced by inner SVG below if used */
  display: none;
}
.a11y-trigger {
  /* Use the universal accessibility symbol drawn in pure CSS / SVG */
  font-family: 'Arial', sans-serif;
}
.a11y-trigger:hover {
  background: var(--gold);
  color: var(--navy);
  transform: translateY(-2px);
}
.a11y-trigger:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 2px;
}
@media (max-width: 768px) {
  .a11y-trigger {
    bottom: 76px;
    right: 14px;
    width: 44px;
    height: 44px;
    font-size: calc(20px * var(--text-scale));
  }
}

.a11y-panel {
  position: fixed;
  bottom: 80px;
  right: 20px;
  z-index: 170;
  width: 320px;
  max-width: calc(100vw - 28px);
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  background: var(--navy2);
  border: 1px solid var(--gold);
  border-radius: 10px;
  padding: 22px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55);
  display: none;
  font-family: 'DM Sans', sans-serif;
}
.a11y-panel.open { display: block; }
.a11y-panel h2 {
  font-family: 'Oswald', sans-serif;
  font-size: calc(18px * var(--text-scale));
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--white);
  margin: 0 0 16px;
}
.a11y-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: calc(20px * var(--text-scale));
  cursor: pointer;
  border-radius: 4px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.a11y-close:hover {
  background: var(--navy3);
  color: var(--white);
  border-color: var(--gold);
}
.a11y-group {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.a11y-group:last-child { border-bottom: 0; padding-bottom: 0; }
.a11y-group-reset { padding-top: 4px; }
.a11y-label {
  font-size: calc(11px * var(--text-scale));
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin-bottom: 8px;
}
.a11y-btns {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.a11y-btn {
  background: var(--navy3);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 8px 14px;
  font-family: 'DM Sans', sans-serif;
  font-size: calc(13px * var(--text-scale));
  font-weight: 500;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.15s;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.a11y-btn.size-1 { font-size: calc(13px * var(--text-scale)); }
.a11y-btn.size-2 { font-size: calc(16px * var(--text-scale)); }
.a11y-btn.size-3 { font-size: calc(20px * var(--text-scale)); }
.a11y-btn:hover {
  background: var(--navy);
  border-color: var(--gold);
  color: var(--white);
}
.a11y-btn[aria-pressed="true"] {
  background: var(--gold);
  color: var(--navy);
  border-color: var(--gold);
  font-weight: 700;
}
.a11y-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.a11y-helper {
  font-size: calc(11px * var(--text-scale));
  color: var(--muted);
  line-height: 1.45;
  margin-top: 8px;
}

/* ─────────────────────────────────────────────────────────────────────────
   v2.0.2 ACCESSIBILITY REBUILD, 23 May 2026

   Replaces the v2.0.1 implementation, which had:
   - text-large/.text-xl using CSS zoom on #main: zoom scales the whole layout
     (boxes, images, padding) not just text. That's page-zoom behaviour, not
     "increase text size" behaviour.

   Approach now mirrors Steel Cap v12.0.25 patterns exactly:
   - Text size: every font-size declaration in CSS (139 of them) and every
     inline style="font-size:..." attribute in HTML (219 of them) has been
     wrapped as calc(NNpx * var(--text-scale)). The body classes just flip
     the variable. Text scales, layout boxes stay at their original size.
   - HC mode: blanket reset plus targeted overrides for every Nate element.
     v2.0.2 adds emoji and image handling that v2.0.1 missed.
   - Motion reduce: same mirror-the-prefers-reduced-motion pattern.

   PE (Plain English) mode: toggle hidden via CSS. The pe-tech/pe-plain swap
   markup hasn't been added to Nate's content yet. To enable later: add the
   swap spans throughout, then remove the .a11y-pe-toggle hide rule below.
   ───────────────────────────────────────────────────────────────────── */

/* === TEXT SIZE === */

/* The variable is read by every font-size: calc(... * var(--text-scale))
   declaration across the CSS and inline styles. Default scale is 1. */
body.text-large { --text-scale: 1.15; }
body.text-xl    { --text-scale: 1.30; }

/* === HIGH CONTRAST MODE === */

/* Blanket reset: every element gets pure black/white. The -webkit-text-fill-color
   override is needed because some buttons use background-clip:text which would
   otherwise paint text invisibly. */
body.hc-mode,
body.hc-mode * {
  background-color: #fff !important;
  background-image: none !important;
  color: #000 !important;
  border-color: #000 !important;
  text-shadow: none !important;
  box-shadow: none !important;
  -webkit-text-fill-color: #000 !important;
}

/* Pseudo-elements: flatten text styles only. Backgrounds and decorative content
   left alone so individual problem cases can be targeted below. */
body.hc-mode *::before,
body.hc-mode *::after {
  color: #000 !important;
  text-shadow: none !important;
  -webkit-text-fill-color: #000 !important;
}

/* Hide decorative overlays that would obscure content in HC */
body.hc-mode .page-hero-glow,
body.hc-mode .page-hero-grid {
  display: none !important;
}

/* Links underlined for affordance, inverted on hover/focus */
body.hc-mode a {
  text-decoration: underline !important;
}
body.hc-mode a:hover,
body.hc-mode a:focus-visible {
  background: #000 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
body.hc-mode a:focus-visible {
  outline: 3px solid #000 !important;
  outline-offset: 2px !important;
}

/* Nav and footer separator borders */
body.hc-mode nav { border-bottom: 2px solid #000 !important; }
body.hc-mode footer { border-top: 2px solid #000 !important; }

/* Card-like surfaces get a solid border for visual separation */
body.hc-mode .service-card,
body.hc-mode .carousel-card,
body.hc-mode .blog-card,
body.hc-mode .blog-list-card,
body.hc-mode .gallery-card,
body.hc-mode .est-service-card,
body.hc-mode .contact-form-box,
body.hc-mode .form-box,
body.hc-mode .area-chip,
body.hc-mode .cm-item,
body.hc-mode .ap-item,
body.hc-mode .stat-item,
body.hc-mode .trust-item,
body.hc-mode .cta-banner,
body.hc-mode .trust-bar,
body.hc-mode .scroll-top,
body.hc-mode .a11y-trigger,
body.hc-mode .a11y-panel,
body.hc-mode .sticky-cta,
body.hc-mode .mobile-menu,
body.hc-mode .hero,
body.hc-mode .page-hero,
body.hc-mode .breadcrumb,
body.hc-mode .est-line-item,
body.hc-mode .est-line,
body.hc-mode .estimator-result,
body.hc-mode .why-point,
body.hc-mode .area-card,
body.hc-mode .gallery-link,
body.hc-mode .feature-item {
  border: 2px solid #000 !important;
}

/* Selected state for estimator cards needs visible indicator beyond colour */
body.hc-mode .est-service-card.selected {
  border: 4px solid #000 !important;
  background: #000 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
body.hc-mode .est-service-card.selected * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: #000 !important;
}

/* Buttons: default state white-on-black, with text-fill override so the
   text actually renders (background-clip:text would otherwise hide it). */
body.hc-mode .btn-primary,
body.hc-mode .btn-secondary,
body.hc-mode .btn-zap,
body.hc-mode .nav-cta,
body.hc-mode .nav-phone,
body.hc-mode .form-submit,
body.hc-mode .form-cta,
body.hc-mode .sticky-cta a,
body.hc-mode button,
body.hc-mode .area-chip {
  background: #fff !important;
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  border: 2px solid #000 !important;
  text-shadow: none !important;
}

/* Hover: inverted */
body.hc-mode .btn-primary:hover,
body.hc-mode .btn-secondary:hover,
body.hc-mode .btn-zap:hover,
body.hc-mode .nav-cta:hover,
body.hc-mode .form-submit:hover,
body.hc-mode .sticky-cta a:hover,
body.hc-mode button:hover,
body.hc-mode .area-chip:hover {
  background: #000 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* Form inputs */
body.hc-mode input,
body.hc-mode select,
body.hc-mode textarea {
  border: 2px solid #000 !important;
  background: #fff !important;
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
}

/* SVG icons stay solid black */
body.hc-mode svg {
  fill: #000 !important;
  stroke: #000 !important;
}

/* HC: all content images get grayscale + contrast for monochrome legibility.
   Logos override this rule below with a stronger filter (brightness(0)). */
body.hc-mode img {
  filter: grayscale(100%) contrast(1.15) brightness(0.95) !important;
}

/* PNG logos: transparent background under the filter so brightness(0) only
   affects the actual image pixels (otherwise the white * reset would paint
   the whole element black under the filter). Higher specificity than the
   general img rule above so it wins. */
body.hc-mode .nav-logo img,
body.hc-mode .footer-logo img {
  background: transparent !important;
  background-color: transparent !important;
  filter: brightness(0) !important;
}

/* Opt-in: any image that doesn't translate well to monochrome can be hidden
   by adding class="hc-hide-img" to the img or its wrapper, paired with a
   .hc-image-fallback descriptor (Steel Cap pattern). */
body.hc-mode .hc-hide-img,
body.hc-mode .hc-hide-img img {
  display: none !important;
}
.hc-image-fallback { display: none; }
body.hc-mode .hc-image-fallback {
  display: block;
  padding: 24px 22px;
  border: 2px solid #000 !important;
  background: #fff !important;
}
body.hc-mode .hc-image-fallback strong {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-size: calc(18px * var(--text-scale));
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* HC: decorative emoji pseudo-elements. CSS color doesn't change emoji
   rendering (emojis use their own colour palette via the OS font), so the
   *::before color:#000 rule above can't reach them. Hiding the worst
   offenders is cleaner than trying to recolour them. */
body.hc-mode .cta-banner::before,
body.hc-mode .booking-badge::before {
  display: none !important;
}
/* Area-chip pin emoji: replace the coloured 📍 with a plain dot in HC */
body.hc-mode .area-chip::before {
  content: '•' !important;
  font-size: calc(14px * var(--text-scale)) !important;
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
}

/* HC: inline and standalone emojis.

   v2.0.4 fix following Steel Cap pass-40 bug #2 pattern. The previous
   version (v2.0.3) hit exactly the same bug Shannon documented for the
   logo PNGs in pass-40: filter: brightness(0) on a span that inherits
   background-color: #fff from the blanket HC reset renders as a solid
   black rectangle because the filter operates on the rendered output
   including the white background. Pass-40 fix: set background to
   transparent !important BEFORE the filter, so brightness(0) only acts
   on the actual emoji pixels.

   Also: v2.0.2/v2.0.3 had a container-level filter list that included
   .wp-num (which contains "01" "02" "03" "04" text, NOT emojis). That
   filter turned those numbered cards into solid black rectangles too.
   Removed entirely. Every emoji is now wrapped in .a11y-emoji at the
   HTML level, so the container-level filter is both wrong and
   redundant. */
body.hc-mode .a11y-emoji {
  background: transparent !important;
  background-color: transparent !important;
  filter: grayscale(100%) brightness(0) contrast(2) !important;
  display: inline-block !important;
}

/* Belt-and-braces for browsers that implement font-variant-emoji */
body.hc-mode {
  font-variant-emoji: text;
}

/* HC: hero h1 line-height override. The inline style on the h1 sets
   line-height: 0.92 to produce an intentional overlapping stacked effect
   on the dark hero in normal mode. In HC mode that same overlap renders
   as letters merging into each other (LICENSED's descenders inside
   RELIABLE's ascenders) because everything is solid black on white.
   v2.0.4 bumped to 1.05 which was still too tight; Shannon's screenshot
   showed visible character crowding on Oswald 700-weight at clamp(54px,
   7vw, 88px). v2.0.5 bumps to 1.15 to match the value Steel Cap pass-39
   settled on for the same kind of large-cap headline. Specificity 0,2,1
   beats the inline style via !important. */
body.hc-mode .hero h1 {
  line-height: 1.15 !important;
}

/* HC: opacity overrides. The blanket reset above handles background-color,
   color, border-color, text-shadow, box-shadow, and -webkit-text-fill-color
   but doesn't touch CSS opacity. Several Nate elements use opacity for
   visual de-emphasis on the dark theme (faded numbers, faded icons, faded
   pipe separators, faded arrows). In HC mode that opacity bleeds through
   and renders black text/icons as faded grey instead of solid black, which
   is what Shannon's stats card screenshot was showing.

   Covers:
   .wp-num             (CSS opacity:0.35, the 01/02/03/04 Why Choose numbers)
   .stat-icon          (CSS opacity:0.35, the ⚡/📋/🚗/💰 stat row icons)
   .trust-item         (CSS opacity:0.85, the trust bar items)
   .hero [opacity]     (inline opacity on hero <p>, | separators, → arrows) */
body.hc-mode .wp-num,
body.hc-mode .stat-icon,
body.hc-mode .trust-item,
body.hc-mode .hero [style*="opacity"] {
  opacity: 1 !important;
}

/* HC: hamburger menu lines. The spans inherit background: var(--white)
   from the base CSS, and the blanket body.hc-mode * { background-color:
   #fff !important } rule keeps them white-on-white once the nav itself
   goes white in HC. v2.0.3 added this rule but Shannon's last
   screenshot still showed an empty bordered box (likely a deploy or
   cache issue at the time, included here so v2.0.4 carries it
   regardless). */
body.hc-mode .hamburger span {
  background: #000 !important;
  background-color: #000 !important;
}

/* Licensed badge in footer: the 🛡️ shield is wrapped by .a11y-emoji now
   so it gets filtered correctly. The border is still useful for visual
   grouping of the badge. */
body.hc-mode .footer-lic,
body.hc-mode .footer-badge {
  border: 2px solid #000 !important;
  padding: 6px 12px !important;
  display: inline-block !important;
}

/* HC: accessibility panel and trigger themselves */
body.hc-mode .a11y-trigger {
  background: #fff !important;
  border: 2px solid #000 !important;
  color: #000 !important;
}
body.hc-mode .a11y-trigger:hover {
  background: #000 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
body.hc-mode .a11y-trigger svg { fill: #000 !important; }
body.hc-mode .a11y-trigger:hover svg { fill: #fff !important; }
body.hc-mode .a11y-panel {
  background: #fff !important;
  border: 2px solid #000 !important;
}
body.hc-mode .a11y-btn {
  background: #fff !important;
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  border: 2px solid #000 !important;
}
body.hc-mode .a11y-btn:hover,
body.hc-mode .a11y-btn[aria-pressed="true"] {
  background: #000 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* === PLAIN ENGLISH MODE === */

/* PE swap pattern (active when content carries .pe-tech / .pe-plain spans) */
.pe-tech { display: revert; }
.pe-plain { display: none; }
body.pe-mode .pe-tech { display: none; }
body.pe-mode .pe-plain { display: revert; }

/* Hide the floating PE toggle until PE markup is added to content.
   To enable: add <span class="pe-tech">RCD</span><span class="pe-plain">safety
   switch</span> pairs to jargon throughout the site, then remove this rule. */
.a11y-pe-toggle { display: none !important; }

/* === MOTION REDUCE === */

/* Blanket reset: every animation/transition collapses to effectively zero.
   Mirrors what prefers-reduced-motion does at the OS level, so the in-page
   Reduce button is functionally equivalent to the OS setting. */
body.motion-reduce *,
body.motion-reduce *::before,
body.motion-reduce *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}
body.motion-reduce { scroll-behavior: auto !important; }

/* Carousel: stop scroll-snap which can cause jumpy behaviour for users
   sensitive to motion */
body.motion-reduce .carousel-dots,
body.motion-reduce .services-carousel { scroll-snap-type: none !important; }

/* Counter animation on homepage hero stats: setting animation-duration to
   0.01ms above kills the counter's setInterval-driven count-up. Show the
   final value immediately by overriding the inline 0 text via CSS where
   possible (the JS still runs but completes in one tick). */

/* Honour the OS preference when motion is set to 'auto' (default).
   The motion-allow class explicitly opts out of OS preference. */
@media (prefers-reduced-motion: reduce) {
  body:not(.motion-reduce):not(.motion-allow) *,
  body:not(.motion-reduce):not(.motion-allow) *::before,
  body:not(.motion-reduce):not(.motion-allow) *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  body:not(.motion-reduce):not(.motion-allow) .carousel-dots,
  body:not(.motion-reduce):not(.motion-allow) .services-carousel {
    scroll-snap-type: none !important;
  }
}

/* ── End of v2.0.1 accessibility rebuild ── */

/* ─────────────────────────────────────────────────────────────────────────
   v2.0.3 PRINT STYLESHEET, 23 May 2026

   The hero h1 uses line-height: 0.92 for tight typographic stacking on
   screen ("LICENSED / RELIABLE / NATE'S RATES." with overlapping
   visual). In print/PDF rendering this tight line-height causes the
   first line to clip at the top of the page boundary. Override to a
   safer line-height for print only.
   ───────────────────────────────────────────────────────────────────── */
@media print {
  .hero h1 {
    line-height: 1.05 !important;
  }
  /* Also make sure photos that were grayscaled in HC still print sensibly */
  body.hc-mode img {
    filter: grayscale(100%) !important;
  }
}