/* ================================================================
   GRINDROD ELECTRICAL SOLUTIONS — GLOBAL CSS v2
   WPCode → CSS Snippet Type → Sitewide (all pages)
   
   WHAT'S IN HERE:
   ─ Design tokens (:root)
   ─ Reset + base body styles
   ─ Layout: .g-w, .g-sec, .g-alt, .g-dark
   ─ Typography: .g-h1/.g-h2, .g-eye, .g-div, .g-title
   ─ Buttons: .g-btn, .g-bp, .g-bg, .g-bg2 + .g-pill
   ─ Top bar + sticky header + desktop nav + dropdown + hamburger
   ─ Mobile nav drawer + overlay
   ─ Footer (all 4 columns + bottom bar)
   ─ SHARED COMPONENTS (used on 2+ pages):
       Reviews, Gallery, Stats, Steps/Process,
       Why-section tiles, Contact info rows,
       FAQ accordion, Service area tags,
       CTA banner row, Map box, Form wrap,
       Hero grid/orb backgrounds, Scroll reveal
   ─ Responsive breakpoints: 1050px → 740px → 500px → 400px
   
   PAGE-SPECIFIC CSS stays in each page's own embedded style block.
   ================================================================ */

/* ── GOOGLE FONTS ── */

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Barlow',sans-serif;background:#0a0f14;color:#c8d8e4;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{cursor:pointer;border:none;background:none;font-family:inherit}

/* ── DESIGN TOKENS ── */
:root{
  --g-blue:#61B8E5;
  --g-blue2:#7ecbf0;
  --g-bdim:rgba(97,184,229,.15);
  --g-gold:#f0a500;
  --g-n1:#0a0f14;
  --g-n2:#0f1820;
  --g-n3:#061018;
  --g-st:#1e2f3e;
  --g-st2:#243444;
  --g-w:#ffffff;
  --g-tx:#c8d8e4;
  --g-tx2:rgba(200,216,228,.55);
  --g-tx3:rgba(200,216,228,.35);
  --g-bd:rgba(97,184,229,.15);
  --g-r:6px;
  --g-rl:14px;
  --g-sh:0 8px 40px rgba(0,0,0,.45);
  --g-glow:0 0 40px rgba(97,184,229,.18);
  --g-tr:.28s cubic-bezier(.4,0,.2,1);
  --g-fd:'Barlow Condensed',sans-serif;
  --g-max:1240px;
  --g-py:clamp(72px,9vw,110px)
}

/* ================================================================
   LAYOUT UTILITIES
================================================================ */
.g-w{width:92%;max-width:var(--g-max);margin:0 auto}
.g-sec{padding:var(--g-py) 0}
.g-alt{background:var(--g-n2)}
.g-dark{background:var(--g-n3)}

/* ================================================================
   TYPOGRAPHY
================================================================ */
.g-sec h1,.g-sec h2,.g-sec h3,.g-sec h4,
#g-hdr h2,#g-hdr h3,
#g-footer h2,#g-footer h3,#g-footer h4{
  font-family:var(--g-fd);font-weight:800;line-height:1.08;
  letter-spacing:.02em;text-transform:uppercase;color:var(--g-w)
}
.g-sec p{font-size:clamp(.9rem,1.3vw,1rem);color:var(--g-tx);line-height:1.75}

.g-h1{font-family:var(--g-fd);font-size:clamp(2.3rem,5.5vw,4.5rem);font-weight:900;text-transform:uppercase;letter-spacing:.02em;color:var(--g-w);line-height:1.05}
.g-h2{font-family:var(--g-fd);font-size:clamp(1.85rem,3.8vw,3.1rem);font-weight:800;text-transform:uppercase;letter-spacing:.02em;color:var(--g-w);line-height:1.08}
.g-h1 em,.g-h2 em{font-style:normal;color:var(--g-blue)}

.g-eye{display:inline-flex;align-items:center;gap:9px;font-family:var(--g-fd);font-size:.73rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--g-blue);margin-bottom:13px}
.g-eye::before{content:'';display:block;width:26px;height:2px;background:var(--g-blue);flex-shrink:0}
.g-eye.c{justify-content:center}
.g-eye.c::before{display:none}
.g-eye.c::after{content:'';display:block;width:26px;height:2px;background:var(--g-blue);flex-shrink:0}

.g-div{width:46px;height:3px;background:var(--g-blue);border-radius:2px;margin:13px 0 18px}
.g-div.c{margin:13px auto 18px}

.g-title{margin-bottom:clamp(34px,5vw,58px)}
.g-title.c{text-align:center}
.g-title.c p{margin:11px auto 0;max-width:570px}
.g-title p{margin-top:11px;color:var(--g-tx2)}

/* ================================================================
   BUTTONS
================================================================ */
.g-btn{display:inline-flex!important;align-items:center;gap:8px;font-family:var(--g-fd);font-size:.87rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:13px 27px;border-radius:var(--g-r);transition:var(--g-tr);white-space:nowrap;text-decoration:none!important;cursor:pointer}

/* Primary — blue fill */
.g-bp{background:var(--g-blue)!important;color:var(--g-n1)!important;border:2px solid var(--g-blue)!important}
.g-bp:hover,.g-bp:focus,.g-bp:active{background:var(--g-blue2)!important;border-color:var(--g-blue2)!important;color:var(--g-n1)!important;transform:translateY(-2px);box-shadow:0 10px 30px rgba(97,184,229,.36);text-decoration:none!important}

/* Ghost — white outline */
.g-bg{background:transparent!important;color:var(--g-w)!important;border:2px solid rgba(255,255,255,.28)!important}
.g-bg:hover,.g-bg:focus{border-color:var(--g-blue)!important;color:var(--g-blue)!important;background:transparent!important;transform:translateY(-2px);text-decoration:none!important}

/* Ghost 2 — blue outline */
.g-bg2{background:transparent!important;color:var(--g-w)!important;border:2px solid rgba(97,184,229,.3)!important}
.g-bg2:hover,.g-bg2:focus{border-color:var(--g-blue)!important;color:var(--g-blue)!important;background:transparent!important;transform:translateY(-2px);text-decoration:none!important}

/* Pills */
.g-pills{display:flex;flex-wrap:wrap;gap:7px}
.g-pill{padding:5px 12px;background:rgba(255,255,255,.06);border:1px solid rgba(97,184,229,.2);border-radius:100px;font-family:var(--g-fd);font-size:.69rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(200,216,228,.72)}

/* ================================================================
   TOP BAR
================================================================ */
#g-topbar{background:var(--g-blue);padding:8px 0;font-family:var(--g-fd);font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--g-n1)}
#g-topbar .g-tb{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:5px 16px}
#g-topbar .g-tb a{color:var(--g-n1);text-decoration:none!important}
#g-topbar .g-tb a:hover{opacity:.75}
.g-tb-tag{display:flex;align-items:center;gap:6px;background:rgba(0,0,0,.12);padding:3px 12px;border-radius:100px}

/* ================================================================
   STICKY HEADER
================================================================ */
#g-hdr{position:sticky;top:0;z-index:900;background:rgba(10,15,20,.97);border-bottom:1px solid var(--g-bd);backdrop-filter:blur(14px);transition:box-shadow var(--g-tr)}
#g-hdr.g-scrolled{box-shadow:0 4px 32px rgba(0,0,0,.6)}
#g-hdr .g-hdr-i{display:flex;align-items:center;gap:16px;padding:13px 0}

/* Logo */
#g-hdr .g-logo{display:flex;align-items:center;gap:9px;text-decoration:none!important;flex-shrink:0;max-width:200px}
#g-hdr .g-logo img{height:48px;width:auto;max-width:120px;border-radius:5px;mix-blend-mode:lighten;object-fit:contain;display:block;flex-shrink:0}
#g-hdr .g-logo-txt span:first-child{display:block;font-family:var(--g-fd);font-size:1.05rem;font-weight:900;color:var(--g-w);text-transform:uppercase;letter-spacing:.05em;line-height:1;text-decoration:none!important}
#g-hdr .g-logo-txt span:last-child{display:block;font-size:.56rem;color:var(--g-blue);letter-spacing:.18em;text-transform:uppercase;font-weight:600;margin-top:2px}

/* Desktop nav */
#g-hdr .g-nav{display:flex;align-items:center;gap:2px;margin-left:auto}
#g-hdr .g-nav a{font-family:var(--g-fd);font-size:.78rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--g-tx);padding:7px 10px;border-radius:var(--g-r);transition:var(--g-tr);white-space:nowrap;text-decoration:none!important}
#g-hdr .g-nav a:hover,#g-hdr .g-nav a.g-active{color:var(--g-blue)}

/* Dropdown */
.g-drop{position:relative}
.g-drop>a::after{content:'▾';font-size:.6rem;margin-left:3px;opacity:.55}
.g-drop-menu{position:absolute;top:calc(100% + 6px);left:0;background:var(--g-n2);border:1px solid var(--g-bd);border-top:3px solid var(--g-blue);border-radius:var(--g-r);min-width:228px;padding:7px 0;opacity:0;pointer-events:none;transform:translateY(-8px);transition:var(--g-tr);z-index:200;box-shadow:var(--g-sh)}
.g-drop:hover .g-drop-menu{opacity:1;pointer-events:all;transform:none}
.g-drop-menu a{display:block;padding:8px 15px;font-family:var(--g-fd);font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--g-tx);transition:var(--g-tr);text-decoration:none!important}
.g-drop-menu a:hover{background:var(--g-bdim);color:var(--g-blue)}

/* Hamburger button */
.g-ham{display:none;flex-direction:column;gap:5px;padding:8px;flex-shrink:0;margin-left:auto;cursor:pointer;background:none!important;border:none!important;outline:none!important;box-shadow:none!important}
.g-ham span{display:block;width:22px;height:2px;background:var(--g-w);border-radius:2px;transition:var(--g-tr)}
.g-ham.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.g-ham.open span:nth-child(2){opacity:0}
.g-ham.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Header CTA */
.g-hdr-cta{margin-left:12px;padding:9px 18px!important;font-size:.75rem!important}

/* ================================================================
   MOBILE NAV DRAWER
================================================================ */
#g-mob{position:fixed;top:0;right:-300px;width:280px;height:100vh;background:var(--g-n2);z-index:1000;padding:70px 20px 30px;display:flex;flex-direction:column;gap:4px;transition:right var(--g-tr);border-left:1px solid var(--g-bd);overflow-y:auto}
#g-mob.open{right:0}
#g-mob a{font-family:var(--g-fd);font-size:.88rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--g-tx);padding:10px 12px;border-radius:var(--g-r);text-decoration:none!important;transition:var(--g-tr)}
#g-mob a:hover,#g-mob a.g-active{color:var(--g-blue);background:var(--g-bdim)}
.g-mob-cta{background:var(--g-blue)!important;color:var(--g-n1)!important;text-align:center;margin-top:10px;padding:12px!important;font-size:.82rem!important;justify-content:center;border-radius:var(--g-r)}
.g-mob-cta:hover{background:var(--g-blue2)!important;color:var(--g-n1)!important}
#g-ov{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:999;backdrop-filter:blur(2px)}
#g-ov.open{display:block}

/* ================================================================
   FOOTER
================================================================ */
#g-footer{background:var(--g-n1);border-top:1px solid var(--g-bd)}
#g-footer .g-foot-grid{display:grid;grid-template-columns:2fr 1.2fr 1fr 1.4fr;gap:42px;padding:62px 0 46px}

#g-footer .g-fh{font-family:var(--g-fd);font-size:.69rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--g-tx2);padding-bottom:8px;border-bottom:1px solid var(--g-bd);margin-bottom:12px;display:block}

/* Footer logo */
#g-footer .g-flogo{display:flex;align-items:center;gap:10px;margin-bottom:14px;text-decoration:none!important}
#g-footer .g-flogo img{height:42px;width:auto;border-radius:5px;mix-blend-mode:lighten}
#g-footer .g-flogo-txt span:first-child{display:block;font-family:var(--g-fd);font-size:1.05rem;font-weight:900;color:var(--g-w);text-transform:uppercase;letter-spacing:.05em;line-height:1.05}
#g-footer .g-flogo-txt span:last-child{display:block;font-size:.54rem;color:var(--g-blue);letter-spacing:.18em;text-transform:uppercase;font-weight:600;margin-top:2px}

.g-fdesc{font-size:.8rem;color:var(--g-tx2);line-height:1.7;margin-bottom:14px}

/* Footer badges */
.g-fbadges{display:flex;flex-wrap:wrap;gap:4px}
.g-fbadge{padding:3px 9px;background:var(--g-bdim);border:1px solid rgba(97,184,229,.16);border-radius:100px;font-size:.62rem;color:var(--g-blue);font-family:var(--g-fd);font-weight:700;text-transform:uppercase;letter-spacing:.06em}

/* Footer nav links */
.g-flinks{display:flex;flex-direction:column;gap:6px}
#g-footer .g-flinks a{font-family:var(--g-fd);font-size:.8rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--g-tx2);transition:color var(--g-tr);text-decoration:none!important;display:block}
#g-footer .g-flinks a:hover{color:var(--g-blue)!important}

/* Footer contact rows */
.g-fcontact{display:flex;flex-direction:column;gap:11px}
.g-fcr{display:flex;gap:9px;align-items:flex-start}
.g-fcr-ico{width:28px;height:28px;border-radius:6px;background:var(--g-bdim);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--g-blue)}
.g-fcr-lbl{font-size:.6rem;color:var(--g-tx2);text-transform:uppercase;letter-spacing:.1em;font-weight:700;font-family:var(--g-fd);display:block;margin-bottom:2px}
.g-fcr-val{font-size:.8rem;color:var(--g-tx);word-break:break-word;line-height:1.3;display:block}
.g-fcr-ph{font-size:.93rem!important;color:var(--g-blue)!important;font-weight:700;font-family:var(--g-fd);display:block}
a.g-fcr-val,a.g-fcr-ph{color:var(--g-blue)!important;text-decoration:none!important}
a.g-fcr-val:hover,a.g-fcr-ph:hover{color:var(--g-blue2)!important}

/* Footer CTA */
.g-foot-cta{margin-top:14px}
#g-footer .g-foot-cta .g-btn{width:100%;justify-content:center}

/* Footer bottom bar */
.g-foot-bot{border-top:1px solid var(--g-bd);padding:14px 0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:9px}
.g-copy{font-size:.7rem;color:var(--g-tx3)}
.g-flegal{display:flex;gap:13px;flex-wrap:wrap}
#g-footer .g-flegal a{font-size:.68rem;color:var(--g-tx3);transition:color var(--g-tr);text-decoration:none!important}
#g-footer .g-flegal a:hover{color:var(--g-blue)!important}

/* ================================================================
   SHARED COMPONENT — REVIEWS
   Classes: .g-rev-grid .g-rc .g-stars .g-rtext .g-rperson
            .g-rav .g-rname .g-rloc .g-rib
   Used on: Homepage, About, Services, all inner pages
   In HTML use these exact class names on every page.
================================================================ */
.g-rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}
.g-rc{background:var(--g-n2);border:1px solid var(--g-bd);border-radius:var(--g-rl);padding:22px;position:relative;overflow:hidden;transition:border-color var(--g-tr),transform var(--g-tr)}
.g-rc:hover{border-color:rgba(97,184,229,.34);transform:translateY(-4px)}
.g-rc::before{content:'\201C';position:absolute;top:-8px;right:12px;font-size:6rem;line-height:1;color:rgba(97,184,229,.05);font-family:var(--g-fd);font-weight:900;pointer-events:none}
.g-stars{color:#f0a500;font-size:.9rem;margin-bottom:10px;letter-spacing:2px}
.g-rtext{font-size:.87rem;font-style:italic;margin-bottom:15px;line-height:1.75;color:var(--g-tx)}
.g-rperson{display:flex;align-items:center;gap:9px}
.g-rav{width:34px;height:34px;border-radius:50%;background:var(--g-blue);display:flex;align-items:center;justify-content:center;font-family:var(--g-fd);font-size:.88rem;font-weight:800;color:var(--g-n1);flex-shrink:0}
.g-rname{font-family:var(--g-fd);font-size:.82rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--g-w)}
.g-rloc{font-size:.68rem;color:var(--g-tx2);margin-top:2px}
/* Reviews rating badge (★★★★★ 5.0 on Google) */
.g-rib{display:flex;align-items:stretch;flex-wrap:wrap;border-right:1px solid var(--g-bd)}
.g-ri{display:flex;align-items:center;gap:10px;padding:18px 24px;border-left:1px solid var(--g-bd);flex:1 1 17%;min-width:160px;transition:background var(--g-tr)}
.g-ri:hover{background:var(--g-bdim)}
.g-ri-ico{width:36px;height:36px;background:var(--g-bdim);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.g-ri-lbl{font-family:var(--g-fd);font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--g-tx2);display:block;margin-bottom:2px}
.g-ri-val{font-family:var(--g-fd);font-size:.9rem;font-weight:900;color:var(--g-w)}

/* ================================================================
   SHARED COMPONENT — GALLERY
   Classes: .g-gal .g-gc
================================================================ */
.g-gal{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,250px);gap:10px}
.g-gc{border-radius:var(--g-r);overflow:hidden;position:relative;border:1px solid var(--g-bd)}
.g-gc img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;display:block}
.g-gc:hover img{transform:scale(1.06)}

/* ================================================================
   SHARED COMPONENT — STATS BAR
   Classes: .g-stats .g-stat .g-stat-num .g-stat-lbl
================================================================ */
.g-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-top:26px}
.g-stat{background:var(--g-st);border:1px solid var(--g-bd);border-radius:var(--g-rl);padding:16px;border-top:3px solid var(--g-blue)}
.g-stat-num{font-family:var(--g-fd);font-size:clamp(1.5rem,2.8vw,2rem);font-weight:900;color:var(--g-blue);letter-spacing:-.02em;line-height:1;display:block}
.g-stat-lbl{font-size:.68rem;color:var(--g-tx2);text-transform:uppercase;letter-spacing:.09em;margin-top:3px;display:block}

/* ================================================================
   SHARED COMPONENT — PROCESS / STEPS
   Classes: .g-steps .g-step .g-step-n
================================================================ */
.g-steps{display:grid;grid-template-columns:repeat(4,1fr);position:relative}
.g-steps::before{content:'';position:absolute;top:33px;left:calc(12.5% + 17px);right:calc(12.5% + 17px);height:2px;background:var(--g-bd);z-index:0}
.g-step{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 14px;position:relative}
.g-step-n{width:68px;height:68px;border-radius:50%;background:var(--g-st);border:2px solid var(--g-bd);display:flex;align-items:center;justify-content:center;font-family:var(--g-fd);font-size:1.6rem;font-weight:900;color:var(--g-tx2);position:relative;z-index:1;margin-bottom:18px;transition:var(--g-tr);flex-shrink:0}
.g-step:first-child .g-step-n,.g-step:hover .g-step-n{background:var(--g-blue);border-color:var(--g-blue);color:var(--g-n1);box-shadow:0 0 0 8px rgba(97,184,229,.12)}
.g-step h4{font-family:var(--g-fd);font-size:.86rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--g-w);margin-bottom:7px}
.g-step p{font-size:.79rem;color:var(--g-tx2);line-height:1.65}

/* ================================================================
   SHARED COMPONENT — WHY CHOOSE US (split panel + tile grid)
   Classes: .g-why-grid .g-why-l .g-why-q .g-why-lbtns
            .g-why-r .g-wt .g-wt-ico
================================================================ */
.g-why-grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--g-bd);border-radius:var(--g-rl);overflow:hidden}
.g-why-l{padding:clamp(32px,5vw,56px);background:var(--g-n1);border-right:1px solid var(--g-bd)}
.g-why-q{font-family:var(--g-fd);font-size:clamp(1.15rem,2vw,1.65rem);font-weight:900;text-transform:uppercase;color:var(--g-w);line-height:1.12;margin:14px 0}
.g-why-q em{font-style:normal;color:var(--g-blue)}
.g-why-l p{color:var(--g-tx2);font-size:.88rem;line-height:1.75}
.g-why-lbtns{display:flex;flex-direction:column;gap:8px;margin-top:22px}
.g-why-lbtns .g-btn{justify-content:center;font-size:.83rem}
.g-why-r{display:grid;grid-template-columns:1fr 1fr}
.g-wt{padding:24px 20px;border-bottom:1px solid var(--g-bd);border-right:1px solid var(--g-bd);transition:background var(--g-tr);position:relative;overflow:hidden}
.g-wt:nth-child(2n){border-right:none}
.g-wt:nth-last-child(-n+2){border-bottom:none}
.g-wt::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--g-blue);transform:scaleX(0);transition:transform var(--g-tr)}
.g-wt:hover{background:var(--g-bdim)}
.g-wt:hover::after{transform:scaleX(1)}
.g-wt-ico{width:38px;height:38px;background:var(--g-bdim);border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:10px;border:1px solid rgba(97,184,229,.16);color:var(--g-blue)}
.g-wt h4{font-family:var(--g-fd);font-size:.84rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--g-w);margin-bottom:6px}
.g-wt p{font-size:.79rem;color:var(--g-tx2);line-height:1.65}

/* ================================================================
   SHARED COMPONENT — FAQ ACCORDION
   Classes: .g-flist .g-fi .g-fbtn .g-ficon .g-fbody .g-fans
            .g-faq-i (grid wrapper) .g-faq-sidebar .g-faq-ph .g-faq-hrs
================================================================ */
.g-faq-i{display:grid;grid-template-columns:300px 1fr;gap:52px;align-items:start}
.g-flist{display:flex;flex-direction:column;border-top:1px solid var(--g-bd)}
.g-fi{border-bottom:1px solid var(--g-bd)}
.g-fbtn{width:100%;display:flex;justify-content:space-between;align-items:center;padding:16px 0;gap:14px;text-align:left;font-family:var(--g-fd);font-size:.88rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--g-w);transition:color var(--g-tr);background:none!important;border:none!important;cursor:pointer;outline:none!important;box-shadow:none!important}
.g-fbtn:hover,.g-fbtn:focus,.g-fbtn:active{color:var(--g-blue)!important;background:none!important;outline:none!important;box-shadow:none!important}
.g-ficon{width:25px;height:25px;border-radius:50%;background:var(--g-st);border:1px solid var(--g-bd);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--g-tr);font-size:1rem;color:var(--g-tx2);line-height:1;font-weight:400;font-family:'Barlow',sans-serif}
.g-fi.open .g-ficon{background:var(--g-blue);border-color:var(--g-blue);color:var(--g-n1)}
.g-fbody{max-height:0;overflow:hidden;transition:max-height .4s ease}
.g-fi.open .g-fbody{max-height:360px}
.g-fans{padding-bottom:15px;font-size:.87rem;color:var(--g-tx);line-height:1.78}
/* FAQ sidebar */
.g-faq-sidebar{background:var(--g-st);border:1px solid var(--g-bd);border-radius:var(--g-rl);padding:28px;position:sticky;top:100px}
.g-faq-sidebar h3{font-family:var(--g-fd);font-size:1rem;font-weight:900;text-transform:uppercase;color:var(--g-w);margin-bottom:8px}
.g-faq-sidebar p{font-size:.82rem;color:var(--g-tx2);line-height:1.7;margin-bottom:18px}
.g-faq-lbl{font-family:var(--g-fd);font-size:.65rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--g-blue);margin-bottom:4px;display:block}
.g-faq-ph{font-family:var(--g-fd);font-size:1.55rem;font-weight:900;color:var(--g-blue);display:block;text-decoration:none!important;margin-bottom:4px;line-height:1}
.g-faq-ph:hover{color:var(--g-blue2)!important}
.g-faq-hrs{font-size:.74rem;color:var(--g-tx2);margin-bottom:16px}
.g-faq-cta{margin-top:16px}

/* ================================================================
   SHARED COMPONENT — CONTACT INFO ROWS
   Classes: .g-cinfo .g-ci .g-ci-ico .g-ci-lbl .g-ci-val
================================================================ */
.g-cinfo{display:flex;flex-direction:column;gap:14px}
.g-ci{display:flex;align-items:flex-start;gap:12px}
.g-ci-ico{width:36px;height:36px;border-radius:8px;background:var(--g-bdim);border:1px solid rgba(97,184,229,.18);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--g-blue)}
.g-ci-lbl{font-family:var(--g-fd);font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--g-tx2);display:block;margin-bottom:3px}
.g-ci-val{font-size:.88rem;color:var(--g-tx);line-height:1.4;display:block}
a.g-ci-val{color:var(--g-blue)!important;text-decoration:none!important}
a.g-ci-val:hover{color:var(--g-blue2)!important}

/* ================================================================
   SHARED COMPONENT — MAP BOX
   Classes: .g-mapbox
================================================================ */
.g-mapbox{border-radius:var(--g-rl);overflow:hidden;border:1px solid var(--g-bd);aspect-ratio:16/9}
.g-mapbox iframe{width:100%;height:100%;border:none;display:block}

/* ================================================================
   SHARED COMPONENT — FORM WRAP
   Classes: .g-form-wrap
================================================================ */
.g-form-wrap{background:var(--g-n2);border:1px solid var(--g-bd);border-radius:var(--g-rl);padding:32px}
.g-form-wrap h3{font-family:var(--g-fd);font-size:1.1rem;font-weight:900;text-transform:uppercase;color:var(--g-w);margin-bottom:6px}
.g-form-wrap p{font-size:.83rem;color:var(--g-tx2);margin-bottom:22px}

/* ================================================================
   SHARED COMPONENT — SERVICE AREA TAGS
   Classes: .g-atags .g-atag
================================================================ */
.g-atags{display:flex;flex-wrap:wrap;gap:7px}
.g-atag{padding:6px 14px;background:var(--g-st);border:1px solid var(--g-bd);border-radius:100px;font-family:var(--g-fd);font-size:.71rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--g-tx)}

/* ================================================================
   SHARED COMPONENT — CTA BANNER ROW
   Classes: .g-cta-i .g-cta-btns
================================================================ */
.g-cta-i{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:26px}
.g-cta-btns{display:flex;flex-wrap:wrap;gap:11px;flex-shrink:0}

/* CTA card (phone number card) */
.g-cta-card{background:var(--g-n2);border:1px solid var(--g-bd);border-radius:var(--g-rl);padding:32px 28px;text-align:center}
.g-cta-lbl{font-family:var(--g-fd);font-size:.65rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--g-blue);margin-bottom:6px;display:block}
.g-cta-ph{font-family:var(--g-fd);font-size:2rem;font-weight:900;color:var(--g-w);text-decoration:none!important;display:block;transition:color var(--g-tr)}
.g-cta-ph:hover{color:var(--g-blue)!important}
.g-cta-or{font-size:.72rem;color:var(--g-tx2);margin:12px 0;text-transform:uppercase;letter-spacing:.12em}
.g-cta-fine{font-size:.72rem;color:var(--g-tx3);margin-top:11px}

/* ================================================================
   SHARED COMPONENT — HERO BG LAYERS
   Classes: .g-hero-grid .g-hero-img (photo overlay)
            .g-dot (pulsing indicator)
================================================================ */
.g-hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(97,184,229,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(97,184,229,.035) 1px,transparent 1px);background-size:60px 60px;pointer-events:none;z-index:0;animation:g-grid 22s linear infinite}
@keyframes g-grid{0%{background-position:0 0}100%{background-position:60px 60px}}

.g-hero-img{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;opacity:.18;z-index:0;pointer-events:none}

.g-dot{width:8px;height:8px;border-radius:50%;background:var(--g-blue);display:inline-block;animation:g-pulse 2s ease-in-out infinite;flex-shrink:0}
@keyframes g-pulse{0%,100%{box-shadow:0 0 0 0 rgba(97,184,229,.5)}50%{box-shadow:0 0 0 8px rgba(97,184,229,0)}}

/* ================================================================
   SHARED COMPONENT — SERVICE CARDS GRID (homepage + services)
   Classes: .g-svc .g-sc .g-sc-num .g-sc-ico .g-sc-lnk
            .g-sc-cta .g-sc-cta-btns
================================================================ */
.g-svc{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--g-bd);border:1px solid var(--g-bd);border-radius:var(--g-rl);overflow:hidden}
.g-sc{background:var(--g-n2);padding:28px 22px;transition:background var(--g-tr);position:relative;overflow:hidden}
.g-sc::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--g-blue);transform:scaleY(0);transform-origin:bottom;transition:transform var(--g-tr)}
.g-sc:hover{background:var(--g-st)}
.g-sc:hover::before{transform:scaleY(1)}
.g-sc-num{font-family:var(--g-fd);font-size:.58rem;font-weight:700;letter-spacing:.18em;color:var(--g-blue);opacity:.45;margin-bottom:12px}
.g-sc-ico{width:50px;height:50px;background:var(--g-bdim);border-radius:11px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;border:1px solid rgba(97,184,229,.16);transition:background var(--g-tr);color:var(--g-blue)}
.g-sc:hover .g-sc-ico{background:var(--g-blue);color:var(--g-n1)}
.g-sc h3{font-family:var(--g-fd);font-size:.93rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--g-w);margin-bottom:9px;line-height:1.1}
.g-sc p{font-size:.81rem;color:var(--g-tx2);line-height:1.68;margin-bottom:14px}
.g-sc-lnk{display:inline-flex;align-items:center;gap:5px;font-family:var(--g-fd);font-size:.69rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--g-blue);transition:gap var(--g-tr);text-decoration:none!important}
.g-sc:hover .g-sc-lnk{gap:9px}
.g-sc-cta{background:var(--g-n3);padding:20px 22px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;border-top:1px solid var(--g-bd)}
.g-sc-cta p{font-size:.83rem;color:var(--g-tx2);margin:0}
.g-sc-cta-btns{display:flex;gap:8px;flex-wrap:wrap}
.g-sc-cta-btns .g-btn{font-size:.79rem;padding:9px 18px!important}

/* ================================================================
   SCROLL REVEAL
================================================================ */
[data-gr]{opacity:0;transform:translateY(22px);transition:opacity .65s ease,transform .65s ease}
[data-gr].vis{opacity:1;transform:none}
[data-gr][data-d="1"]{transition-delay:.1s}
[data-gr][data-d="2"]{transition-delay:.2s}
[data-gr][data-d="3"]{transition-delay:.3s}
[data-gr][data-d="4"]{transition-delay:.4s}
[data-grf]{opacity:0;transform:translateY(18px);animation:grf-in .62s ease forwards}
[data-grf][data-d="1"]{animation-delay:.12s}
[data-grf][data-d="2"]{animation-delay:.23s}
[data-grf][data-d="3"]{animation-delay:.36s}
[data-grf][data-d="4"]{animation-delay:.48s}
@keyframes grf-in{to{opacity:1;transform:none}}

/* ================================================================
   RESPONSIVE — 1050px (tablet landscape)
================================================================ */
@media(max-width:1050px){
  /* Nav */
  #g-hdr .g-nav,.g-hdr-cta{display:none}
  .g-ham{display:flex}
  /* Footer */
  #g-footer .g-foot-grid{grid-template-columns:1fr 1fr;gap:28px}
  /* Shared components */
  .g-rev-grid{grid-template-columns:1fr 1fr}
  .g-gal{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,180px)}
  .g-steps{grid-template-columns:1fr 1fr;gap:24px}
  .g-steps::before{display:none}
  .g-why-grid{grid-template-columns:1fr}
  .g-why-l{border-right:none;border-bottom:1px solid var(--g-bd)}
  .g-svc{grid-template-columns:repeat(2,1fr)}
  .g-stats{grid-template-columns:repeat(2,1fr)}
  .g-faq-i{grid-template-columns:1fr}
  .g-faq-sidebar{position:static}
}

/* ================================================================
   RESPONSIVE — 740px (tablet portrait)
================================================================ */
@media(max-width:740px){
  #g-topbar .g-tb{flex-direction:column;align-items:flex-start;gap:4px;font-size:.7rem}
  .g-why-r{grid-template-columns:1fr!important}
  .g-rev-grid{grid-template-columns:1fr 1fr}
  .g-ri{flex:1 1 45%}
  .g-cta-i{flex-direction:column;align-items:flex-start}
}

/* ================================================================
   RESPONSIVE — 500px (mobile)
================================================================ */
@media(max-width:500px){
  #g-hdr .g-logo img{height:40px;max-width:100px}
  #g-footer .g-foot-grid{grid-template-columns:1fr}
  .g-rev-grid{grid-template-columns:1fr}
  .g-gal{grid-template-columns:1fr;grid-template-rows:none}
  .g-gal .g-gc{height:200px}
  .g-steps{grid-template-columns:1fr}
  .g-stats{grid-template-columns:1fr 1fr}
  .g-svc{grid-template-columns:1fr}
  .g-ri{flex:1 1 100%;border-right:none;border-bottom:1px solid var(--g-bd)}
}

/* ================================================================
   RESPONSIVE — 400px (small mobile)
================================================================ */
@media(max-width:400px){
  .g-stats{grid-template-columns:1fr}
}