/*
 * Dr IT Services - Design System
 * ─────────────────────────────────────────────────────────────
 * FILE: dr-it-style.css
 * USAGE: Paste into child theme Additional CSS, or enqueue via
 *        functions.php wp_enqueue_style()
 *
 * SCOPING: All rules are scoped to #dw to prevent conflicts
 *          with the GeneratePress parent theme.
 *
 * SECTIONS:
 *   1. Design Tokens (:root)
 *   2. Scoped Reset
 *   3. Progress Bar (global fixed)
 *   4. Scroll Reveal
 *   5. Layout / Container
 *   6. Buttons
 *   7. Announce Bar
 *   8. Hero
 *   9. Device Filter
 *  10. Hero Visual Card
 *  11. Review Logo Bar
 *  12. Cert Trust Bar
 *  13. Service Cards
 *  14. Stats Banner
 *  15. About Section
 *  16. Award Marquee
 *  17. Credentials (tabbed)
 *  18. Why Us / Why Choose
 *  19. Location + Hours
 *  20. Service Areas
 *  21. Brands Marquee
 *  22. Process Steps
 *  23. Reviews Carousel (scroll-snap)
 *  24. FAQ Accordion
 *  25. CTA Section
 *  26. Floating CTA
 *  27. Calculator
 *  28. Responsive Breakpoints
 * ─────────────────────────────────────────────────────────────
 */

/* ============================================================
   1. DESIGN TOKENS
============================================================ */
:root{
  --n900:#080f2a;--n800:#0d1637;--n700:#122050;
  --b500:#1a6dff;--b400:#4d90ff;--b300:#80b3ff;--cyan:#00d4ff;
  --wh:#fff;--g50:#f8f9fb;--g100:#f0f2f6;--g200:#e2e6ee;
  --g400:#8e9ab5;--g600:#4d5b7a;--g800:#1e2640;
  --grn:#22c55e;--amb:#fbbf24;
  --rsm:6px;--rmd:12px;--rlg:20px;--rxl:32px;
  --smd:0 4px 16px rgba(0,0,0,.10),0 2px 6px rgba(0,0,0,.06);
  --slg:0 12px 40px rgba(0,0,0,.14),0 4px 12px rgba(0,0,0,.08);
  --sblu:0 8px 32px rgba(26,109,255,.30);
  --t:200ms cubic-bezier(.4,0,.2,1);
  --fh:'Space Grotesk',sans-serif;
  --fb:'Inter',sans-serif;
}

/* ============================================================
   2. SCOPED RESET
============================================================ */
#dw*,#dw *::before,#dw *::after{box-sizing:border-box;margin:0;padding:0;}
#dw{font-family:var(--fb);font-size:16px;line-height:1.65;color:var(--g800);background:var(--wh);-webkit-font-smoothing:antialiased;display:block;float:none;clear:both;margin-bottom:0 !important;padding-bottom:0 !important;}
#dw img{display:block;max-width:100%;}
#dw a{color:inherit;text-decoration:none;}
#dw ul{list-style:none;}
#dw button{font-family:var(--fb);}

/* ============================================================
   3. PROGRESS BAR
============================================================ */
#dw-prog{position:fixed;top:0;left:0;height:3px;width:0%;background:linear-gradient(90deg,var(--b500),var(--cyan));z-index:9999;transition:width .1s linear;box-shadow:0 0 8px rgba(26,109,255,.55);}

/* ============================================================
   4. SCROLL REVEAL
============================================================ */
.dr{opacity:0;transform:translateY(22px);transition:opacity .5s ease,transform .5s ease;}
.dr.dv{opacity:1;transform:none;}
.dr1{transition-delay:.1s;}.dr2{transition-delay:.2s;}.dr3{transition-delay:.3s;}.dr4{transition-delay:.4s;}

/* ============================================================
   5. LAYOUT
============================================================ */
#dw .ct{width:100%;max-width:1200px;margin-inline:auto;padding-inline:24px;}
#dw .sh{text-align:center;margin-bottom:52px;}
#dw .slbl{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--b500);margin-bottom:10px;}
#dw .stit{font-family:var(--fh);font-size:clamp(24px,4vw,40px);font-weight:700;color:var(--n900);line-height:1.2;}
#dw .ssub{font-size:16px;color:var(--g600);max-width:560px;margin-top:10px;line-height:1.7;}

/* ============================================================
   6. BUTTONS
============================================================ */
#dw .btn{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:var(--rmd);font-family:var(--fb);font-size:14.5px;font-weight:600;cursor:pointer;border:none;transition:all var(--t);white-space:nowrap;position:relative;overflow:hidden;}
#dw .btn .rpl{position:absolute;border-radius:50%;transform:scale(0);animation:drpl .6s linear;background:rgba(255,255,255,.32);pointer-events:none;}
@keyframes drpl{to{transform:scale(4);opacity:0;}}
#dw .bp{background:var(--b500) !important;color:var(--wh) !important;box-shadow:var(--sblu) !important;}
#dw .bp:hover{background:#1558e0 !important;color:var(--wh) !important;transform:translateY(-1px);box-shadow:0 12px 36px rgba(26,109,255,.40) !important;}
#dw .bg{background:transparent;color:var(--wh);border:1.5px solid rgba(255,255,255,.25);}
#dw .bg:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.50);}
#dw .bw{background:var(--wh);color:var(--n900);font-weight:700;}
#dw .bw:hover{background:var(--g100);transform:translateY(-1px);}
#dw .bo{background:transparent !important;color:var(--b500) !important;border:1.5px solid var(--b500) !important;padding:13px 26px !important;}
#dw .bo:hover{background:var(--b500);color:var(--wh);}

/* ============================================================
   7. ANNOUNCE BAR
============================================================ */
#dw .ann{background:var(--n800);color:var(--wh);text-align:center;padding:10px 20px;font-size:13px;font-weight:500;}
#dw .ann strong{color:var(--cyan);}
#dw .ann a{color:var(--wh);text-decoration:underline;text-decoration-color:rgba(255,255,255,.45);font-weight:700;}

/* ============================================================
   8. HERO
============================================================ */
#dw .hero{background:var(--n900);position:relative;overflow:hidden;padding:68px 0 76px;}
#dw .hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 900px 600px at 70% 50%,rgba(26,109,255,.13) 0%,transparent 70%),radial-gradient(ellipse 500px 400px at 10% 80%,rgba(0,212,255,.05) 0%,transparent 60%);pointer-events:none;}
#dw .hgrid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;position:relative;z-index:1;}
#dw .hbrow{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
#dw .hdot{width:8px;height:8px;background:var(--grn);border-radius:50%;box-shadow:0 0 10px var(--grn);animation:dp 2s infinite;flex-shrink:0;}
@keyframes dp{0%,100%{opacity:1}50%{opacity:.4}}
#dw .hbrow span{font-size:13px;font-weight:600;color:rgba(255,255,255,.52);letter-spacing:.06em;}
#dw .htit{font-family:var(--fh);font-size:clamp(30px,5vw,52px);font-weight:800;line-height:1.08;color:var(--wh);margin-bottom:16px;}
#dw .htit .acc{color:var(--b400);}
#dw .tw{color:var(--cyan);border-right:3px solid var(--cyan);padding-right:3px;animation:dc .8s step-end infinite;white-space:nowrap;}
@keyframes dc{0%,100%{border-color:var(--cyan)}50%{border-color:transparent}}
#dw .hdesc{font-size:16px;color:rgba(255,255,255,.58);line-height:1.75;margin-bottom:26px;max-width:490px;}
#dw .hact{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
#dw .htrust{display:flex;align-items:center;gap:16px;margin-top:32px;padding-top:26px;border-top:1px solid rgba(255,255,255,.07);flex-wrap:wrap;}
#dw .hti{display:flex;align-items:center;gap:8px;}
#dw .hti svg{color:var(--amb);}
#dw .hti strong{color:var(--wh);font-size:13.5px;font-weight:700;}
#dw .hti span{color:rgba(255,255,255,.40);font-size:12px;}
#dw .tdiv{width:1px;height:26px;background:rgba(255,255,255,.10);}

/* ============================================================
   9. DEVICE FILTER
============================================================ */
#dw .dflt{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:var(--rmd);padding:13px 16px;margin-top:18px;}
#dw .dflbl{font-size:11px;font-weight:700;color:rgba(255,255,255,.32);letter-spacing:.08em;text-transform:uppercase;margin-bottom:9px;}
#dw .dfch{display:flex;gap:7px;flex-wrap:wrap;}
#dw .dc{padding:6px 12px;border-radius:100px;font-size:12px;font-weight:600;border:1px solid rgba(255,255,255,.13);color:rgba(255,255,255,.55);background:transparent;cursor:pointer;transition:all var(--t);}
#dw .dc:hover{color:var(--wh);border-color:rgba(255,255,255,.32);}
#dw .dc.dca{background:var(--b500);border-color:var(--b500);color:var(--wh);box-shadow:var(--sblu);}

/* ============================================================
   10. HERO VISUAL CARD
============================================================ */
#dw .hvis{position:relative;}
#dw .hcard{background:linear-gradient(135deg,var(--n800) 0%,rgba(26,109,255,.08) 100%);border:1px solid rgba(255,255,255,.08);border-radius:var(--rxl);padding:26px;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:18px;}
#dw .hcard::before{content:'';position:absolute;top:-60px;right:-60px;width:180px;height:180px;background:radial-gradient(circle,rgba(26,109,255,.2) 0%,transparent 70%);pointer-events:none;}
#dw .chips{display:flex;flex-wrap:wrap;gap:8px;}
#dw .chip{display:flex;align-items:center;gap:7px;padding:8px 13px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:100px;color:rgba(255,255,255,.70);font-size:12.5px;font-weight:500;transition:all var(--t);cursor:pointer;}
#dw .chip:hover,#dw .chip.cha{background:rgba(26,109,255,.18);border-color:rgba(26,109,255,.45);color:var(--wh);}
#dw .chip svg{color:var(--b400);}
#dw .srow{display:grid;grid-template-columns:1fr 1fr;gap:11px;}
#dw .sbox{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:var(--rmd);padding:15px 17px;transition:all var(--t);}
#dw .sbox:hover{background:rgba(26,109,255,.08);border-color:rgba(26,109,255,.22);transform:translateY(-2px);}
#dw .snum{font-family:var(--fh);font-size:24px;font-weight:800;color:var(--wh);line-height:1;}
#dw .snum span{color:var(--b400);}
#dw .slb{font-size:11px;color:rgba(255,255,255,.38);margin-top:4px;font-weight:500;}
#dw .aws{display:flex;align-items:center;justify-content:center;gap:10px;background:rgba(34,197,94,.10);border:1px solid rgba(34,197,94,.22);border-radius:var(--rmd);padding:11px 16px;text-align:center;}
#dw .aws svg{color:var(--grn);flex-shrink:0;}
#dw .awst{color:var(--wh);font-size:13px;font-weight:700;}
#dw .awss{color:rgba(255,255,255,.50);font-size:11px;margin-top:2px;}

/* ============================================================
   11. REVIEW LOGO BAR
============================================================ */
#dw .lbar{background:var(--n900);border-bottom:1px solid rgba(255,255,255,.06);padding:18px 0;}
#dw .lbar-in{display:flex !important;flex-direction:row !important;align-items:center !important;justify-content:center !important;gap:28px !important;flex-wrap:wrap !important;}
#dw .lbar-it:hover{opacity:1;}
#dw .lbar-it img{height:28px;width:auto;object-fit:contain;}

/* ============================================================
   12. CERT TRUST BAR
============================================================ */
#dw .tbar{background:var(--g50);border-top:1px solid var(--g200);border-bottom:1px solid var(--g200);padding:16px 0;}
#dw .tbar-in{display:flex;align-items:center;justify-content:center;gap:32px;flex-wrap:wrap;}
#dw .ti{display:flex;align-items:center;gap:8px;color:var(--g600);font-size:13px;font-weight:500;position:relative;transition:color var(--t);}
#dw .ti:hover{color:var(--b500);}
#dw .ti svg{color:var(--b500);flex-shrink:0;}
#dw .ti strong{color:var(--g800);}
#dw .tip{position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%) translateY(4px);background:var(--n900);color:rgba(255,255,255,.80);font-size:11px;line-height:1.5;padding:8px 12px;border-radius:var(--rsm);pointer-events:none;opacity:0;transition:all var(--t);box-shadow:var(--slg);z-index:50;max-width:260px;white-space:normal;text-align:center;}
#dw .tip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--n900);}
#dw .ti:hover .tip{opacity:1;transform:translateX(-50%) translateY(0);}

/* ============================================================
   13. SERVICE CARDS
============================================================ */
#dw .svc{padding:84px 0;background:var(--wh);}
#dw .sgrid{display:grid !important;grid-template-columns:repeat(4,1fr) !important;gap:20px !important;float:none !important;align-items:start !important;}
#dw .sgrid > *{display:flex !important;flex-direction:column !important;min-width:0 !important;}
#dw .sc{background:var(--g50);border:1.5px solid var(--g200);border-radius:var(--rlg);padding:26px 22px;transition:all var(--t);cursor:pointer;position:relative;overflow:hidden;display:flex !important;flex-direction:column !important;}
#dw .sc::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(26,109,255,.04) 0%,transparent 60%);opacity:0;transition:opacity var(--t);}
#dw .sc:hover,#dw .sc.sch{border-color:var(--b400);background:var(--wh);transform:translateY(-4px);box-shadow:var(--slg);}
#dw .sc:hover::after,#dw .sc.sch::after{opacity:1;}
#dw .sc.sch{border-color:var(--b500);box-shadow:0 0 0 3px rgba(26,109,255,.14),var(--slg);}
#dw .sic{width:48px;height:48px;background:rgba(26,109,255,.10);border-radius:var(--rmd);display:flex;align-items:center;justify-content:center;margin-bottom:16px;transition:background var(--t);}
#dw .sc:hover .sic{background:rgba(26,109,255,.18);}
#dw .sic svg{color:var(--b500);}
#dw .sc h3{font-family:var(--fh);font-size:17.5px;font-weight:700;color:var(--n900);margin-bottom:9px;}
#dw .sc p{font-size:14px;color:var(--g600);line-height:1.65;margin-bottom:13px;}
#dw .sbw{margin-bottom:13px;overflow:hidden;max-height:0;transition:max-height .4s ease,opacity .4s ease;opacity:0;}
#dw .sc:hover .sbw,#dw .sc.sch .sbw{max-height:60px;opacity:1;}
#dw .sbl{display:flex;justify-content:space-between;font-size:11px;font-weight:600;color:var(--g600);margin-bottom:5px;}
#dw .sbt{height:5px;background:var(--g200);border-radius:100px;overflow:hidden;}
#dw .sbf{height:100%;background:linear-gradient(90deg,var(--b500),var(--cyan));border-radius:100px;width:0;transition:width 1s ease .2s;}
#dw .sc:hover .sbf,#dw .sc.sch .sbf{width:var(--fp);}
#dw .slk{display:inline-flex;align-items:center;gap:6px;color:var(--b500);font-size:14px;font-weight:600;transition:gap var(--t);}
#dw .sc:hover .slk,#dw .sc.sch .slk{gap:10px;}

/* ============================================================
   14. STATS BANNER
============================================================ */
#dw .stbn{background:var(--b500);padding:48px 0;}
#dw .stin{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center;}
#dw .stnum{font-family:var(--fh);font-size:38px;font-weight:800;color:var(--wh);line-height:1;}
#dw .stlb{font-size:13px;color:rgba(255,255,255,.70);margin-top:6px;font-weight:500;}

/* ============================================================
   15. ABOUT SECTION
============================================================ */
#dw .abt{padding:84px 0;background:var(--wh);}
#dw .agrid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
#dw .acon p{font-size:15px;color:var(--g600);line-height:1.75;margin-bottom:14px;}
#dw .acon p:last-of-type{margin-bottom:0;}
#dw .avis{display:flex;flex-direction:column;gap:14px;}
#dw .asc{background:var(--g50);border:1.5px solid var(--g200);border-radius:var(--rlg);padding:20px 24px;display:flex;align-items:center;gap:16px;transition:all var(--t);}
#dw .asc:hover{border-color:var(--b300);background:var(--wh);transform:translateX(4px);}
#dw .asi{width:44px;height:44px;border-radius:var(--rmd);background:rgba(26,109,255,.09);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
#dw .asi svg{color:var(--b500);}
#dw .asn{font-family:var(--fh);font-size:24px;font-weight:800;color:var(--n900);}
#dw .asl{font-size:13px;color:var(--g600);margin-top:2px;}

/* ============================================================
   16. AWARD MARQUEE
============================================================ */
#dw .awsec{background:var(--g50);padding:68px 0;overflow:hidden;}
#dw .mq-out{overflow:hidden;width:100%;margin-top:36px;position:relative;}
#dw .mq-out::before,#dw .mq-out::after{content:'';position:absolute;top:0;bottom:0;width:70px;z-index:2;pointer-events:none;}
#dw .mq-out::before{left:0;background:linear-gradient(to right,var(--g50),transparent);}
#dw .mq-out::after{right:0;background:linear-gradient(to left,var(--g50),transparent);}
#dw .mq-tr{display:flex !important;flex-direction:row !important;align-items:center !important;gap:24px !important;width:max-content !important;animation:mqan 26s linear infinite;flex-wrap:nowrap !important;}
#dw .mq-out:hover .mq-tr{animation-play-state:paused;}
@keyframes mqan{from{transform:translateX(0)}to{transform:translateX(-50%)}}
#dw .aw-img{flex-shrink:0;border-radius:var(--rmd);overflow:hidden;border:1.5px solid var(--g200);background:var(--wh);padding:7px;transition:all var(--t);}
#dw .aw-img:hover{border-color:var(--b400);box-shadow:var(--smd);transform:scale(1.03);}
#dw .aw-img img{height:150px;width:auto;max-width:210px;object-fit:contain;display:block;}

/* ============================================================
   17. CREDENTIALS (tabbed)
============================================================ */
#dw .cred{padding:84px 0;background:var(--n900);position:relative;overflow:hidden;}
#dw .cred::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 700px 500px at 90% 50%,rgba(26,109,255,.09) 0%,transparent 70%);pointer-events:none;}
#dw .crlyt{display:grid;grid-template-columns:210px 1fr;gap:28px;position:relative;z-index:1;margin-top:36px;}
#dw .crtabs{display:flex;flex-direction:column;gap:5px;}
#dw .crtab{padding:11px 14px;border-radius:var(--rmd);border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.03);color:rgba(255,255,255,.52);font-size:13px;font-weight:600;cursor:pointer;transition:all var(--t);text-align:left;}
#dw .crtab:hover{background:rgba(255,255,255,.06);color:rgba(255,255,255,.78);}
#dw .crtab.ta{background:rgba(26,109,255,.16);border-color:rgba(26,109,255,.38);color:var(--wh);}
#dw .crpanel{display:none;}
#dw .crpanel.pa{display:block;}
#dw .cptit{font-family:var(--fh);font-size:19px;font-weight:700;color:var(--wh);margin-bottom:18px;}
#dw .crlist{display:flex;flex-direction:column;gap:9px;}
#dw .crit{display:flex;align-items:flex-start;gap:11px;padding:13px 16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:var(--rmd);transition:all var(--t);}
#dw .crit:hover{background:rgba(26,109,255,.08);border-color:rgba(26,109,255,.18);}
#dw .crd{width:6px;height:6px;background:var(--b400);border-radius:50%;margin-top:7px;flex-shrink:0;}
#dw .crt{color:rgba(255,255,255,.65);font-size:13.5px;line-height:1.6;}
#dw .cmq-out{overflow:hidden;margin-top:52px;position:relative;}
#dw .cmq-out::before,#dw .cmq-out::after{content:'';position:absolute;top:0;bottom:0;width:60px;z-index:2;pointer-events:none;}
#dw .cmq-out::before{left:0;background:linear-gradient(to right,var(--n900),transparent);}
#dw .cmq-out::after{right:0;background:linear-gradient(to left,var(--n900),transparent);}
#dw .cmq-tr{display:flex !important;flex-direction:row !important;align-items:center !important;gap:28px !important;width:max-content !important;animation:mqan 35s linear infinite;flex-wrap:nowrap !important;}
#dw .cmq-out:hover .cmq-tr{animation-play-state:paused;}
#dw .cimg{height:56px;width:auto;max-width:130px;object-fit:contain;filter:brightness(0) invert(1);opacity:.85;transition:all var(--t);display:block !important;}
#dw .cimg:hover{opacity:1;filter:brightness(0) invert(1);}

/* ============================================================
   18. WHY US
============================================================ */
#dw .why{padding:84px 0;background:var(--wh);}
#dw .wgrid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start;}
#dw .wft{display:flex;flex-direction:column;gap:9px;}
#dw .wf{display:flex;gap:13px;align-items:flex-start;padding:15px 16px;background:var(--g50);border:1px solid var(--g200);border-radius:var(--rmd);transition:all var(--t);cursor:pointer;}
#dw .wf:hover,#dw .wf.fo{background:rgba(26,109,255,.05);border-color:rgba(26,109,255,.22);}
#dw .wfi{width:40px;height:40px;flex-shrink:0;background:rgba(26,109,255,.09);border-radius:var(--rsm);display:flex;align-items:center;justify-content:center;transition:background var(--t);}
#dw .wf:hover .wfi,#dw .wf.fo .wfi{background:rgba(26,109,255,.18);}
#dw .wfi svg{color:var(--b500);}
#dw .wft2 h4{font-family:var(--fh);font-size:14px;font-weight:700;color:var(--n900);margin-bottom:3px;display:flex;align-items:center;justify-content:space-between;gap:8px;}
#dw .wft2 h4 .drit-arrow{color:var(--g400);transition:transform .25s ease,color .25s ease;font-size:13px;flex-shrink:0;}
#dw .wf.fo .drit-arrow{transform:rotate(180deg);color:var(--b500);}
#dw .wft2 p{font-size:13px;color:var(--g600);line-height:1.6;}
#dw .fex{overflow:hidden;max-height:0;transition:max-height .4s ease,opacity .3s ease;opacity:0;}
#dw .wf.fo .fex{max-height:120px;opacity:1;}
#dw .fex p{margin-top:9px;padding-top:9px;border-top:1px solid var(--g200);font-size:12.5px;color:var(--g600);line-height:1.6;}
#dw .wsb{display:flex;flex-direction:column;gap:16px;}
#dw .wc{background:var(--g50);border:1.5px solid var(--g200);border-radius:var(--rlg);padding:24px;transition:border-color var(--t);}
#dw .wc:hover{border-color:var(--b300);}
#dw .wct{font-family:var(--fh);font-size:15px;font-weight:700;color:var(--n900);margin-bottom:14px;}
#dw .arl{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--g200);}
#dw .arl:last-child{border-bottom:none;}
#dw .ary{background:rgba(26,109,255,.09);color:var(--b500);font-size:11px;font-weight:700;padding:3px 9px;border-radius:100px;white-space:nowrap;}
#dw .arn{color:#374151;font-size:13px;line-height:1.4;}
#dw .crl{display:flex;flex-wrap:wrap;gap:7px;}
#dw .crb{padding:6px 11px;background:var(--wh);border:1.5px solid var(--g200);border-radius:var(--rsm);color:#374151;font-size:12px;font-weight:600;transition:all var(--t);}
#dw .crb:hover{border-color:var(--b400);color:var(--b500);}
#dw .loc-card{background:rgba(26,109,255,.04)!important;border-color:rgba(26,109,255,.18)!important;}

/* ============================================================
   19. LOCATION + HOURS
============================================================ */
#dw .locsec{padding:84px 0;background:var(--g50);}
#dw .locgrid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:36px;}
#dw .locbig{background:var(--n900);border-radius:var(--rxl);padding:32px;}
#dw .locadr{display:flex;align-items:flex-start;gap:12px;margin-bottom:22px;}
#dw .locadr svg{color:var(--b400);flex-shrink:0;margin-top:2px;}
#dw .locadr h3{font-family:var(--fh);font-size:16px;font-weight:700;color:var(--wh);}
#dw .locadr p{color:rgba(255,255,255,.52);font-size:13.5px;margin-top:3px;line-height:1.5;}
#dw .hgd{display:grid;grid-template-columns:1fr 1fr;gap:7px;}
#dw .hr{display:flex;align-items:center;justify-content:space-between;padding:9px 13px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:var(--rsm);}
#dw .hd{font-size:13px;color:rgba(255,255,255,.58);font-weight:500;}
#dw .ht{font-size:13px;font-weight:700;color:var(--wh);}
#dw .ht.cls{color:rgba(255,255,255,.28);}
#dw .ht.opn{color:var(--grn);}
#dw .socard{background:var(--wh);border:1.5px solid var(--g200);border-radius:var(--rxl);padding:28px;display:flex;flex-direction:column;gap:12px;}
#dw .so{display:flex;gap:12px;align-items:flex-start;padding:12px;border:1px solid var(--g200);border-radius:var(--rmd);transition:all var(--t);}
#dw .so:hover{border-color:var(--b300);background:rgba(26,109,255,.03);}
#dw .soi{width:36px;height:36px;background:rgba(26,109,255,.08);border-radius:var(--rsm);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
#dw .soi svg{color:var(--b500);}
#dw .sott{font-family:var(--fh);font-size:13.5px;font-weight:700;color:var(--n900);}
#dw .sotd{font-size:12px;color:var(--g600);line-height:1.5;margin-top:2px;}

/* ============================================================
   20. SERVICE AREAS
============================================================ */
#dw .areas{padding:84px 0;background:var(--wh);}
#dw .agr{display:flex;flex-wrap:wrap;gap:9px;margin-top:28px;}
#dw .ap{padding:7px 15px;background:var(--g50);border:1.5px solid var(--g200);border-radius:100px;font-size:13px;font-weight:500;color:#374151;transition:all var(--t);cursor:default;}
#dw .ap:hover{background:rgba(26,109,255,.06);border-color:var(--b300);color:var(--b500);}
#dw .app{background:rgba(26,109,255,.07);border-color:rgba(26,109,255,.28);color:var(--b500);font-weight:600;}

/* ============================================================
   21. BRANDS MARQUEE
============================================================ */
#dw .brnd{padding:68px 0;background:var(--g50);overflow:hidden;}
#dw .bmq-out{overflow:hidden;margin-top:32px;position:relative;}
#dw .bmq-out::before,#dw .bmq-out::after{content:'';position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none;}
#dw .bmq-out::before{left:0;background:linear-gradient(to right,var(--g50),transparent);}
#dw .bmq-out::after{right:0;background:linear-gradient(to left,var(--g50),transparent);}
#dw .bmq-tr{display:flex !important;flex-direction:row !important;align-items:center !important;gap:32px !important;width:max-content !important;animation:mqan 50s linear infinite;flex-wrap:nowrap !important;}
#dw .bmq-out:hover .bmq-tr{animation-play-state:paused;}
#dw .bimg{height:34px;width:auto;max-width:110px;object-fit:contain;filter:grayscale(1) opacity(.45);transition:all var(--t);}
#dw .bimg:hover{filter:grayscale(0) opacity(1);}

/* ============================================================
   22. PROCESS STEPS
============================================================ */
#dw .proc{padding:84px 0;background:var(--wh);}
#dw .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative;z-index:1;margin-top:52px;}
#dw .steps::before{content:'';position:absolute;top:26px;left:calc(12.5% - 4px);right:calc(12.5% - 4px);height:2px;background:linear-gradient(90deg,var(--b500),var(--cyan));z-index:0;}
#dw .step{text-align:center;position:relative;z-index:1;cursor:pointer;}
#dw .stepn{width:52px;height:52px;background:var(--g200);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-inline:auto;margin-bottom:16px;font-family:var(--fh);font-size:18px;font-weight:800;color:var(--g600);border:3px solid var(--wh);transition:all .35s ease;}
#dw .step.sa .stepn{background:var(--b500);color:var(--wh);box-shadow:var(--sblu);transform:scale(1.12);}
#dw .step h3{font-family:var(--fh);font-size:15px;font-weight:700;color:var(--n900);margin-bottom:7px;transition:color .25s ease;}
#dw .step.sa h3{color:var(--b500);}
#dw .step p{font-size:13px;color:var(--g600);line-height:1.6;}
#dw .stdtl{overflow:hidden;max-height:0;transition:max-height .45s ease,opacity .35s ease;opacity:0;margin-top:10px;grid-column:1/-1;}
#dw .stdtl.do{max-height:130px;opacity:1;}
#dw .stdtl-in{background:var(--n900);border-radius:var(--rmd);padding:16px 22px;display:flex;align-items:center;gap:13px;}
#dw .stdtl-in svg{color:var(--b400);flex-shrink:0;}
#dw .stdtl-in p{color:rgba(255,255,255,.68);font-size:13.5px;line-height:1.65;}

/* ============================================================
   23. REVIEWS CAROUSEL (scroll-snap)
============================================================ */
#dw .revs{padding:84px 0;background:var(--g50);}
#dw .rtrack{display:flex;gap:20px;overflow-x:scroll;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-behavior:smooth;}
#dw .rtrack::-webkit-scrollbar{display:none;}
#dw .rcard{min-width:calc(33.333% - 14px);flex-shrink:0;scroll-snap-align:start;background:var(--wh);border:1.5px solid var(--g200);border-radius:var(--rlg);padding:24px;transition:border-color var(--t),transform var(--t),box-shadow var(--t);}
#dw .rcard.rv{border-color:var(--b300);box-shadow:var(--smd);}
#dw .rstars{display:flex;gap:3px;margin-bottom:11px;}
#dw .rstars svg{color:var(--amb);}
#dw .rtxt{font-size:14px;color:var(--g600);line-height:1.7;margin-bottom:16px;font-style:italic;}
#dw .rper{display:flex;align-items:center;gap:10px;}
#dw .rav{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--b500) 0%,var(--cyan) 100%);display:flex;align-items:center;justify-content:center;font-family:var(--fh);font-size:14px;font-weight:700;color:var(--wh);flex-shrink:0;}
#dw .rname{font-size:13.5px;font-weight:700;color:var(--n900);}
#dw .rsrc{font-size:11.5px;color:var(--g400);margin-top:1px;}
#dw .gph{background:var(--wh);border:2px dashed var(--g200);border-radius:var(--rlg);padding:28px;text-align:center;margin-top:14px;}
#dw .gph p{color:var(--g400);font-size:13px;margin-top:7px;}
#dw .cctl{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:20px;}
#dw .cdot{width:7px;height:7px;border-radius:100px;background:var(--g200);border:none;cursor:pointer;transition:all .3s ease;}
#dw .cdot.ca{background:var(--b500);width:20px;box-shadow:var(--sblu);}
#dw .cbtn{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--g200);background:var(--wh);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--t);color:var(--g600);}
#dw .cbtn:hover{border-color:var(--b400);color:var(--b500);background:rgba(26,109,255,.05);}
#dw .ragg{background:var(--n900);border-radius:var(--rxl);padding:32px;margin-top:24px;display:flex;align-items:center;justify-content:center;gap:48px;flex-wrap:wrap;}
#dw .agnum{font-family:var(--fh);font-size:56px;font-weight:800;color:var(--wh);line-height:1;text-align:center;}
#dw .agst{display:flex;gap:4px;justify-content:center;margin:5px 0;}
#dw .agst svg{color:var(--amb);}
#dw .aglb{color:rgba(255,255,255,.40);font-size:12.5px;text-align:center;}
#dw .plt{display:flex;flex-direction:column;gap:9px;}
#dw .plr{display:flex;align-items:center;gap:11px;}
#dw .pln{color:rgba(255,255,255,.50);font-size:13px;font-weight:500;width:74px;}
#dw .plb{width:140px;height:5px;background:rgba(255,255,255,.07);border-radius:100px;}
#dw .plf{height:100%;background:linear-gradient(90deg,var(--b500),var(--cyan));border-radius:100px;width:0;transition:width 1.2s ease;}
#dw .pls{color:rgba(255,255,255,.60);font-size:12px;font-weight:700;width:22px;}

/* ============================================================
   24. FAQ
============================================================ */
#dw .faq{padding:84px 0;background:var(--wh);}
#dw .faqg{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:36px;}
#dw .fi{border:1.5px solid var(--g200);border-radius:var(--rmd);overflow:hidden;transition:border-color var(--t);}
#dw .fi:hover,#dw .fi.fop{border-color:var(--b300);}
#dw .fq{display:flex;align-items:center;justify-content:space-between;gap:11px;padding:16px 18px;cursor:pointer;background:var(--wh);}
#dw .fqt{font-family:var(--fh);font-size:14px;font-weight:700;color:var(--n900);line-height:1.4;}
#dw .fic{width:21px;height:21px;border-radius:50%;background:var(--g100);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .25s ease;}
#dw .fi.fop .fic{background:var(--b500);transform:rotate(45deg);}
#dw .fic svg{color:var(--g600);transition:color .25s ease;}
#dw .fi.fop .fic svg{color:var(--wh);}
#dw .fa-ans{overflow:hidden;max-height:0;transition:max-height .4s ease,opacity .3s ease;opacity:0;}
#dw .fi.fop .fa-ans{max-height:200px;opacity:1;}
#dw .fai{padding:0 18px 16px;font-size:13.5px;color:var(--g600);line-height:1.7;}

/* ============================================================
   25. CTA SECTION
============================================================ */
#dw .ctasec{padding:84px 0 0 0;background:var(--g50);margin-bottom:0 !important;}
#dw .ctac{background:linear-gradient(135deg,var(--n900) 0%,var(--n800) 60%,rgba(26,109,255,.14) 100%);border-radius:var(--rxl);padding:56px 60px;position:relative;overflow:hidden;text-align:center;}
#dw .ctac::before{content:'';position:absolute;top:-100px;right:-100px;width:360px;height:360px;background:radial-gradient(circle,rgba(26,109,255,.16) 0%,transparent 70%);pointer-events:none;}
#dw .ctac::after{content:'';position:absolute;bottom:-70px;left:-70px;width:280px;height:280px;background:radial-gradient(circle,rgba(0,212,255,.09) 0%,transparent 70%);pointer-events:none;}
#dw .ctac h2{font-family:var(--fh);font-size:clamp(24px,4vw,38px);font-weight:800;color:var(--wh);line-height:1.2;margin-bottom:12px;position:relative;z-index:1;}
#dw .ctac>p{font-size:16px;color:rgba(255,255,255,.52);margin-bottom:28px;position:relative;z-index:1;}
#dw .ctaact{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;position:relative;z-index:1;}
#dw .ctanote{margin-top:20px;font-size:12.5px;color:rgba(255,255,255,.34);position:relative;z-index:1;}

/* ============================================================
   26. FLOATING CTA
============================================================ */
#dw-float{position:fixed;bottom:22px;right:22px;z-index:999;opacity:0;transform:translateY(14px);pointer-events:none;transition:all .35s cubic-bezier(.4,0,.2,1);}
#dw-float.fv{opacity:1;transform:translateY(0);pointer-events:auto;}
#dw-float a{display:flex;align-items:center;gap:8px;background:var(--b500);color:var(--wh);padding:12px 18px;border-radius:100px;font-family:var(--fb);font-size:14px;font-weight:700;box-shadow:0 6px 28px rgba(26,109,255,.48);transition:all var(--t);}
#dw-float a:hover{background:#1558e0;transform:translateY(-2px);}
#dw-float .fp{width:7px;height:7px;background:var(--grn);border-radius:50%;animation:dp 2s infinite;flex-shrink:0;}

/* ============================================================
   27. CALCULATOR
============================================================ */
#dw .calc-tab{padding:9px 18px;border-radius:100px;font-size:13px;font-weight:600;border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.55);background:transparent;cursor:pointer;transition:all var(--t);}
#dw .calc-tab:hover{color:var(--wh);border-color:rgba(255,255,255,.35);}
#dw .calc-tab-active{background:var(--b500);border-color:var(--b500);color:var(--wh);box-shadow:var(--sblu);}
#calc-select option{background:#0d1637;color:#fff;}




/* WordPress injects <br> tags inside Custom HTML flex containers - hide them */
#dw .lbar-in br,
#dw .tbar-in br,
#dw .mq-tr br,
#dw .cmq-tr br,
#dw .bmq-tr br,
#dw .dfch br,
#dw .chips br,
#dw .crl br,
#dw .hact br,
#dw .agr br,
#dw .stin br,
#dw .cctl br,
#dw .plt br,
#dw .ctaact br,
#dw .lbar-in > br,
#dw br { display: none !important; }


/* ============================================================
   BOOKING / ENQUIRY FORM SECTION
============================================================ */
#dw .bksec{padding:72px 0;background:var(--g50);border-bottom:1px solid var(--g200);}
#dw .bkgrid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start;}
#dw .bk-turnaround{display:flex;flex-direction:column;gap:8px;margin-top:8px;}
#dw .bkt{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;background:var(--wh);border:1px solid var(--g200);border-radius:var(--rsm);transition:border-color var(--t);}
#dw .bkt:hover{border-color:var(--b300);}
#dw .bkd{font-size:13px;color:var(--g600);font-weight:500;}
#dw .bkv{font-size:12.5px;font-weight:700;color:var(--b500);background:rgba(26,109,255,.08);padding:3px 10px;border-radius:100px;}
#dw .bkr .wpforms-container{background:var(--wh);border:1.5px solid var(--g200);border-radius:var(--rlg);padding:28px;}


/* ============================================================
   REPAIR SPOTLIGHT / CASE STUDY SECTION
============================================================ */
#dw .spotlight{padding:84px 0;background:var(--wh);}
#dw .spgrid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px;}
#dw .spc{background:var(--g50);border:1.5px solid var(--g200);border-radius:var(--rlg);padding:28px;transition:border-color var(--t),box-shadow var(--t);}
#dw .spc:hover{border-color:var(--b300);box-shadow:var(--smd);}
#dw .spt{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--b500);background:rgba(26,109,255,.09);padding:4px 11px;border-radius:100px;margin-bottom:12px;}
#dw .sph{font-family:var(--fh);font-size:18px;font-weight:700;color:var(--n900);line-height:1.3;margin-bottom:12px;}
#dw .spb{font-size:14px;color:var(--g600);line-height:1.75;margin-bottom:20px;}
#dw .spstats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding-top:18px;border-top:1px solid var(--g200);}
#dw .spstat{text-align:center;}
#dw .spn{display:block;font-family:var(--fh);font-size:17px;font-weight:800;color:var(--n900);}
#dw .spl{display:block;font-size:11px;color:var(--g400);margin-top:3px;}


/* ============================================================
   REVIEW LOGO BAR - STAR RATINGS
============================================================ */


/* ============================================================
   REPAIRPRESS / BOOTSTRAP 3 COMPATIBILITY
   Single consolidated block - no duplicates
============================================================ */

/* 1. SVG: normalize.css svg:not(:root){overflow:hidden} fix */
#dw svg { overflow: visible !important; }

/* 2. SVG child elements default to fill:black per SVG spec */
#dw svg rect, #dw svg path, #dw svg circle,
#dw svg line, #dw svg polyline, #dw svg polygon, #dw svg ellipse {
  fill: none; stroke: inherit;
}
/* Star/rating SVGs are filled */
#dw .rstars svg path, #dw .agst svg path,
#dw .hti > svg, #dw .hti > svg path { fill: currentColor !important; stroke: none !important; }

/* 3. Icon containers - explicit colour + dimensions */
#dw .sic { width:48px !important; height:48px !important; display:flex !important; align-items:center !important; justify-content:center !important; flex-shrink:0 !important; color:var(--b500) !important; }
#dw .wfi { width:40px !important; height:40px !important; display:flex !important; align-items:center !important; justify-content:center !important; flex-shrink:0 !important; color:var(--b400) !important; }
#dw .soi { width:36px !important; height:36px !important; display:flex !important; align-items:center !important; justify-content:center !important; flex-shrink:0 !important; color:var(--b500) !important; }
#dw .asi { width:44px !important; height:44px !important; display:flex !important; align-items:center !important; justify-content:center !important; flex-shrink:0 !important; color:var(--b500) !important; }
#dw .fic { width:21px !important; height:21px !important; display:flex !important; align-items:center !important; justify-content:center !important; flex-shrink:0 !important; }

#dw .sic svg, #dw .sic svg * { stroke:var(--b500) !important; fill:none !important; }
#dw .wfi svg, #dw .wfi svg * { stroke:var(--b400) !important; fill:none !important; }
#dw .soi svg, #dw .soi svg * { stroke:var(--b500) !important; fill:none !important; }
#dw .asi svg, #dw .asi svg * { stroke:var(--b500) !important; fill:none !important; }
#dw .fic svg * { fill:none !important; }

/* 4. Buttons: Bootstrap .btn overrides */
#dw .btn { display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:8px !important; padding:13px 26px !important; border-radius:var(--rmd) !important; font-family:var(--fb) !important; font-size:14.5px !important; font-weight:600 !important; cursor:pointer !important; border:none !important; white-space:nowrap !important; position:relative !important; overflow:hidden !important; text-decoration:none !important; box-sizing:border-box !important; line-height:1.2 !important; }
#dw .bp { background:var(--b500) !important; color:var(--wh) !important; box-shadow:var(--sblu) !important; }
#dw .bp:hover { background:#1558e0 !important; color:var(--wh) !important; }
#dw .bg { background:transparent !important; color:var(--wh) !important; border:1.5px solid rgba(255,255,255,.25) !important; }
#dw .bg:hover { background:rgba(255,255,255,.08) !important; }
#dw .bo { background:transparent !important; color:var(--b500) !important; border:1.5px solid var(--b500) !important; }
#dw .bo:hover { background:var(--b500) !important; color:var(--wh) !important; }
#dw .bw { background:var(--wh) !important; color:var(--n900) !important; }
#dw a { text-decoration:none !important; }

/* 5. Accordion arrow - prevent Font Awesome styling */
#dw .drit-arrow { font-family:inherit !important; font-style:normal !important; font-size:13px !important; display:inline-block !important; }
#dw .wf.fo .drit-arrow { transform:rotate(180deg); color:var(--b500); }

/* 6. Flex containers: Bootstrap row margins */
#dw .hgrid,#dw .agrid,#dw .wgrid,#dw .locgrid,#dw .stin,#dw .steps,#dw .faqg { margin-left:0 !important; margin-right:0 !important; }

/* 7. Service card grid */
#dw .sgrid { display:grid !important; grid-template-columns:repeat(4,1fr) !important; gap:20px !important; float:none !important; }
#dw .sgrid > a { display:flex !important; flex-direction:column !important; min-width:0 !important; }

/* 8. Marquee rows - MUST be flex row, NOT column */
#dw .mq-tr, #dw .cmq-tr, #dw .bmq-tr, #dw .lbar-in, #dw .tbar-in, #dw .dfch, #dw .chips {
  display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important;
  align-items:center !important; width:max-content !important;
}
#dw .lbar-in { flex-wrap:wrap !important; width:auto !important; justify-content:center !important; }
#dw .tbar-in { flex-wrap:wrap !important; width:auto !important; justify-content:center !important; }
#dw .dfch { flex-wrap:wrap !important; width:auto !important; }
#dw .chips { flex-wrap:wrap !important; width:auto !important; }

/* 9. WordPress injects <br> inside flex rows - hide all */
#dw br { display:none !important; }

/* 10. Cert marquee images */
#dw .cimg { filter:none !important; opacity:.92 !important; display:block !important; background:rgba(255,255,255,.92) !important; border-radius:8px !important; padding:6px 10px !important; }

/* 11. Layout */
#dw { display:block; float:none; clear:both; margin-bottom:0 !important; padding-bottom:0 !important; }
#dw .ct { width:100% !important; max-width:1200px !important; margin-inline:auto !important; padding-inline:24px !important; float:none !important; }
#dw .ctasec { padding:84px 0 0 0; margin-bottom:0 !important; }

/* Responsive */

@media(max-width:767px){ #dw .sgrid{grid-template-columns:1fr !important;} }


@media(max-width:1024px){
  #dw .sgrid{grid-template-columns:repeat(2,1fr) !important;}
  #dw .bkgrid{grid-template-columns:1fr;}
  #dw .spgrid{grid-template-columns:1fr;}
}