/* ============================================================
   AFRA ENGINEERING · 2030 Design System
   Dark glass + gold glow. Per-page accent via body class:
   .p-index .p-emergency .p-powertrip .p-wiring .p-install
   ============================================================ */
:root{
  --bg:#120A0E;
  --bg-2:#1A0F14;
  --maroon:#571E2B;
  --gold:#E8A33D;
  --gold-hi:#FFD57A;
  --cream:#F6EDE2;
  --mut:#B99C93;
  --glass:rgba(255,255,255,.045);
  --glass-2:rgba(255,255,255,.08);
  --bord:rgba(255,255,255,.12);
  --wa:#1EBE5D;
  --accent:var(--gold);
  --accent-hi:var(--gold-hi);
  --r-lg:26px; --r-md:18px; --r-sm:12px;
}
.p-emergency{--accent:#FF7A5C;--accent-hi:#FFB49F}
.p-powertrip{--accent:#FFB020;--accent-hi:#FFD57A}
.p-wiring{--accent:#E07A3D;--accent-hi:#FFB27A}
.p-install{--accent:#FFD57A;--accent-hi:#FFE9B8}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{font-family:'Archivo',system-ui,sans-serif;background:var(--bg);color:var(--cream);line-height:1.65;font-size:16.5px;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-weight:900;line-height:1.06;letter-spacing:-0.02em}
h2{font-size:clamp(1.9rem,4vw,3rem);margin-bottom:16px}
.wrap{max-width:1160px;margin:0 auto;padding:0 22px}
.section{padding:88px 0}
.section-intro{max-width:680px;margin-bottom:44px}
.section-intro p{color:var(--mut);font-size:1.05rem}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* hands motif */
.hands{display:inline-flex;gap:5px;vertical-align:middle}
.hands i{width:9px;height:9px;border-radius:50% 50% 50% 2px}
.hands i:nth-child(1){background:#3E9B4F;transform:rotate(45deg)}
.hands i:nth-child(2){background:#2E6FB7;transform:rotate(135deg)}
.hands i:nth-child(3){background:#D64541;transform:rotate(225deg)}
.hands i:nth-child(4){background:#F2B705;transform:rotate(315deg)}

/* ---------- glass topbar ---------- */
.topbar{position:fixed;top:0;left:0;right:0;z-index:80;background:rgba(18,10,14,.72);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--bord)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:14px}
.brand{color:#fff;font-weight:900;font-size:1.15rem;text-decoration:none;display:flex;align-items:center;gap:10px}
.brand .logo-img{height:38px;width:auto}
.brand small{display:block;font-weight:500;font-size:.66rem;color:var(--mut);letter-spacing:.08em}
.top-call{display:inline-flex;align-items:center;gap:9px;background:var(--accent);color:#1A0F14;font-weight:800;
  text-decoration:none;padding:11px 20px;border-radius:999px;font-size:.95rem;white-space:nowrap;
  box-shadow:0 0 24px color-mix(in srgb, var(--accent) 45%, transparent);transition:transform .15s, box-shadow .2s}
.top-call:hover{transform:translateY(-1px);box-shadow:0 0 36px color-mix(in srgb, var(--accent) 65%, transparent)}
.top-call svg{width:16px;height:16px}

/* ---------- hero ---------- */
.hero{position:relative;min-height:92vh;display:flex;align-items:center;padding:130px 0 90px;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg, rgba(18,10,14,.92) 0%, rgba(18,10,14,.72) 45%, rgba(18,10,14,.25) 100%)}
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.2fr .8fr;gap:56px;align-items:center;width:100%}
.eyebrow{display:inline-flex;align-items:center;gap:10px;background:var(--glass);border:1px solid var(--bord);
  backdrop-filter:blur(10px);border-radius:999px;padding:9px 18px;font-size:.88rem;font-weight:600;color:var(--cream)}
.eyebrow::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 12px var(--accent);animation:pulse 2.2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.hero h1{font-size:clamp(2.6rem,6vw,4.6rem);margin:22px 0 20px;color:#fff}
.hero h1 em{font-style:normal;color:var(--accent);text-shadow:0 0 40px color-mix(in srgb, var(--accent) 55%, transparent)}
.hero .sub{color:#E3CFC6;font-size:1.12rem;max-width:540px;margin-bottom:30px}
.hero-anim{animation:rise .8s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* glass call panel */
.call-panel{background:var(--glass);border:1px solid var(--bord);border-radius:var(--r-lg);padding:34px 30px;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:0 30px 80px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08)}
.call-panel .lbl{color:var(--mut);font-weight:600;font-size:.9rem;margin-bottom:8px}
.call-panel .num{display:block;font-weight:900;font-size:clamp(2.6rem,5vw,3.6rem);color:var(--accent);
  text-decoration:none;line-height:1;margin-bottom:8px;text-shadow:0 0 44px color-mix(in srgb, var(--accent) 60%, transparent)}
.call-panel .num:hover{color:var(--accent-hi)}
.call-panel .open-note{color:#E3CFC6;font-size:.94rem;margin-bottom:22px}
.call-panel .open-note b{color:#fff}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:800;text-decoration:none;
  padding:15px 26px;border-radius:999px;font-size:1rem;border:0;cursor:pointer;font-family:inherit;
  transition:transform .15s, box-shadow .2s}
.btn:active{transform:scale(.97)}
.btn-gold{background:linear-gradient(135deg, var(--accent) 0%, var(--accent-hi) 100%);color:#1A0F14;
  box-shadow:0 0 30px color-mix(in srgb, var(--accent) 45%, transparent)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 0 46px color-mix(in srgb, var(--accent) 70%, transparent)}
.btn-wa{background:var(--wa);color:#fff;box-shadow:0 0 24px rgba(30,190,93,.35)}
.btn-wa:hover{transform:translateY(-2px)}
.btn-ghost{background:var(--glass);border:1px solid var(--bord);color:var(--cream);backdrop-filter:blur(10px)}
.btn-ghost:hover{background:var(--glass-2)}
.btn svg{width:18px;height:18px;flex:0 0 auto}
.bca{display:flex;align-items:center;gap:12px;margin-top:24px;padding-top:20px;border-top:1px solid var(--bord)}
.bca img{height:46px;width:auto;background:#fff;border-radius:8px;padding:5px}
.bca span{font-size:.85rem;color:var(--mut);line-height:1.4}
.bca span b{color:#fff;display:block}

/* ---------- ticker ---------- */
.ticker{background:var(--accent);color:#1A0F14;overflow:hidden;padding:13px 0;white-space:nowrap}
.ticker-track{display:inline-block;animation:tick 26s linear infinite;font-weight:800;font-size:.95rem}
.ticker-track span{margin:0 26px}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none}}

/* ---------- stats band ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--bord);border:1px solid var(--bord);border-radius:var(--r-lg);overflow:hidden}
.stat{background:var(--bg-2);padding:30px 24px;text-align:center}
.stat b{display:block;font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:900;color:var(--accent);line-height:1.1}
.stat span{font-size:.9rem;color:var(--mut)}

/* ---------- bento grid ---------- */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:16px}
.b-card{position:relative;border-radius:var(--r-md);overflow:hidden;background:var(--glass);border:1px solid var(--bord);
  padding:24px;display:flex;flex-direction:column;justify-content:flex-end;text-decoration:none;
  transition:transform .18s, border-color .18s}
.b-card:hover{transform:translateY(-4px);border-color:var(--accent)}
.b-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.55}
.b-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(18,10,14,.05) 20%, rgba(18,10,14,.88) 100%);z-index:1}
.b-card h3,.b-card p,.b-card .go{position:relative;z-index:2}
.b-card h3{font-size:1.2rem;color:#fff;margin-bottom:5px}
.b-card p{font-size:.9rem;color:#DCC8BE}
.b-card .go{margin-top:10px;font-weight:800;font-size:.85rem;color:var(--accent)}
.b-2w{grid-column:span 2}
.b-2h{grid-row:span 2}
.b-solid{background:linear-gradient(150deg, var(--maroon) 0%, #35121C 100%)}
.b-glow{background:radial-gradient(120% 120% at 80% 10%, color-mix(in srgb, var(--accent) 28%, transparent) 0%, var(--bg-2) 60%)}

/* ---------- glass cards row ---------- */
.gcards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gcard{background:var(--glass);border:1px solid var(--bord);border-radius:var(--r-md);padding:28px 24px;backdrop-filter:blur(12px)}
.gcard .ic{width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg, var(--maroon), #35121C);
  border:1px solid var(--bord);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.gcard .ic svg{width:22px;height:22px;stroke:var(--accent)}
.gcard h3{font-size:1.1rem;margin-bottom:8px;color:#fff}
.gcard p{font-size:.93rem;color:var(--mut)}

/* ---------- symptom chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:12px}
.chip{background:var(--glass);border:1px solid var(--bord);border-radius:999px;padding:12px 20px;font-size:.95rem;
  display:inline-flex;align-items:center;gap:10px;backdrop-filter:blur(8px)}
.chip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);flex:0 0 auto}

/* ---------- breaker toggle (power trip page) ---------- */
.breaker{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.breaker-visual{background:var(--glass);border:1px solid var(--bord);border-radius:var(--r-lg);padding:44px;text-align:center;backdrop-filter:blur(14px)}
.breaker-visual p.small{color:var(--mut);font-size:.9rem;margin-top:18px}
.switch{position:relative;display:inline-block;width:110px;height:190px;background:#241318;border-radius:22px;
  border:1px solid var(--bord);cursor:pointer;box-shadow:inset 0 4px 18px rgba(0,0,0,.6)}
.switch input{position:absolute;opacity:0;inset:0;cursor:pointer;z-index:3}
.switch .knob{position:absolute;left:12px;right:12px;top:12px;height:80px;border-radius:14px;
  background:linear-gradient(180deg,#4A2531,#2E1119);border:1px solid rgba(255,255,255,.14);
  transition:transform .25s cubic-bezier(.5,1.6,.4,1), background .25s;z-index:2;
  display:flex;align-items:center;justify-content:center;font-weight:900;color:#8f6f78;font-size:.9rem}
.switch input:checked + .knob{transform:translateY(86px);background:linear-gradient(180deg, var(--accent-hi), var(--accent));color:#1A0F14;
  box-shadow:0 0 34px color-mix(in srgb, var(--accent) 65%, transparent)}
.breaker-state{margin-top:22px;font-weight:900;font-size:1.4rem;color:var(--mut)}
.switch input:checked ~ .breaker-state{color:var(--accent)}
.breaker-copy h2{margin-bottom:14px}
.breaker-copy p{color:var(--mut);margin-bottom:14px}

/* ---------- split media section ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.split .media{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--bord);position:relative}
.split .media img{width:100%;height:100%;object-fit:cover;min-height:360px}
.split .media .tag{position:absolute;left:18px;bottom:18px;background:rgba(18,10,14,.7);backdrop-filter:blur(10px);
  border:1px solid var(--bord);border-radius:999px;padding:9px 18px;font-size:.85rem;font-weight:700}
.split ul{list-style:none;margin-top:8px}
.split ul li{padding:11px 0;border-bottom:1px solid var(--bord);color:#E3CFC6;font-size:.98rem;display:flex;gap:12px}
.split ul li::before{content:"→";color:var(--accent);font-weight:900}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:st}
.step{background:var(--glass);border:1px solid var(--bord);border-radius:var(--r-md);padding:28px 24px;position:relative;counter-increment:st;backdrop-filter:blur(10px)}
.step::before{content:counter(st,decimal-leading-zero);font-weight:900;font-size:2.4rem;
  color:transparent;-webkit-text-stroke:1.5px var(--accent);display:block;margin-bottom:12px;opacity:.9}
.step h3{font-size:1.12rem;margin-bottom:8px;color:#fff}
.step p{font-size:.94rem;color:var(--mut)}

/* ---------- faq ---------- */
.faq details{background:var(--glass);border:1px solid var(--bord);border-radius:var(--r-md);margin-bottom:12px;overflow:hidden;backdrop-filter:blur(8px)}
.faq summary{cursor:pointer;font-weight:800;padding:20px 22px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;color:#fff}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:800;font-size:1.4rem;color:var(--accent);flex:0 0 auto;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 22px 20px;color:var(--mut);font-size:.96rem}

/* ---------- areas ---------- */
.areas{display:flex;flex-wrap:wrap;gap:10px}
.areas li{list-style:none;background:var(--glass);border:1px solid var(--bord);border-radius:999px;padding:8px 16px;font-size:.88rem;color:#E3CFC6}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:44px}
.c-info p{margin-bottom:14px;color:var(--mut)}
.c-line{display:flex;gap:12px;align-items:flex-start;margin-bottom:16px;font-size:.98rem;color:#E3CFC6}
.c-line svg{width:20px;height:20px;stroke:var(--accent);flex:0 0 auto;margin-top:3px}
.c-line a{font-weight:700;text-decoration:none;color:#fff}
.c-line a:hover{color:var(--accent)}
form{background:var(--glass);border:1px solid var(--bord);border-radius:var(--r-lg);padding:32px;backdrop-filter:blur(16px)}
form h3{font-size:1.25rem;margin-bottom:6px;color:#fff}
form .fh{color:var(--mut);font-size:.92rem;margin-bottom:20px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
label{display:block;font-weight:700;font-size:.85rem;margin-bottom:6px;color:#E3CFC6}
input,select,textarea{width:100%;font-family:inherit;font-size:.98rem;padding:13px 15px;border:1px solid var(--bord);
  border-radius:12px;background:rgba(0,0,0,.28);color:var(--cream);margin-bottom:16px}
select option{color:#1A0F14}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent)}
.form-note{font-size:.84rem;color:var(--mut);margin-top:10px}
.form-note a{color:var(--accent)}

/* ---------- xlinks ---------- */
.xlinks{display:flex;flex-wrap:wrap;gap:10px}
.xlinks a{background:var(--glass);border:1px solid var(--bord);border-radius:999px;padding:10px 20px;font-size:.9rem;
  font-weight:700;text-decoration:none;color:#E3CFC6;transition:border-color .15s,color .15s}
.xlinks a:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--bord);padding:40px 0;font-size:.88rem;color:var(--mut)}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
footer b{color:#fff}
footer a{color:#E3CFC6}

/* ---------- mobile bar ---------- */
.mob-bar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:90;grid-template-columns:1fr 1fr;gap:1px;
  background:rgba(18,10,14,.8);backdrop-filter:blur(16px);border-top:1px solid var(--bord)}
.mob-bar a{display:flex;align-items:center;justify-content:center;gap:8px;padding:16px 10px;font-weight:800;text-decoration:none;font-size:1rem}
.mob-bar .m-call{background:var(--accent);color:#1A0F14}
.mob-bar .m-wa{background:var(--wa);color:#fff}
.mob-bar svg{width:18px;height:18px}

/* ---------- floating call bubble (desktop) ---------- */
.float-call{position:fixed;right:26px;bottom:26px;z-index:85;display:flex;align-items:center;gap:10px;
  background:linear-gradient(135deg,var(--accent),var(--accent-hi));color:#1A0F14;font-weight:900;text-decoration:none;
  padding:16px 24px;border-radius:999px;font-size:1rem;box-shadow:0 12px 40px color-mix(in srgb, var(--accent) 45%, transparent);
  transition:transform .15s, box-shadow .2s}
.float-call:hover{transform:translateY(-3px);box-shadow:0 16px 54px color-mix(in srgb, var(--accent) 70%, transparent)}
.float-call svg{width:19px;height:19px}
.float-call .fc-ring{position:absolute;inset:-6px;border-radius:999px;border:2px solid color-mix(in srgb, var(--accent) 60%, transparent);animation:ring 2.4s ease-out infinite;pointer-events:none}
@keyframes ring{0%{transform:scale(.9);opacity:.9}70%{transform:scale(1.18);opacity:0}100%{opacity:0}}
@media (max-width:640px){.float-call{display:none}}

/* bento hover shine */
.b-card::before{content:"";position:absolute;top:0;left:-70%;width:50%;height:100%;z-index:2;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.14),transparent);transform:skewX(-18deg);transition:left .5s ease}
.b-card:hover::before{left:130%}

/* ---------- illustrated scenes ---------- */
.scene{background:var(--glass);border:1px solid var(--bord);border-radius:var(--r-lg);padding:40px;backdrop-filter:blur(12px);
  display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.scene svg{width:100%;height:auto;display:block}
.scene .caption{color:var(--mut);font-size:.9rem;margin-top:14px}
.scene h2{margin-bottom:14px}
.scene p{color:var(--mut);margin-bottom:12px}
@media (max-width:980px){.scene{grid-template-columns:1fr}}

/* window flicker for HDB scene */
.win{fill:#FFC873;opacity:.92}
.win.dim{animation:windim 3.4s ease-in-out infinite}
@keyframes windim{0%,100%{opacity:.92}50%{opacity:.45}}
.win.dark{fill:#241318;opacity:1}
@media (prefers-reduced-motion:reduce){.win.dim{animation:none}}

/* pendant lamps glow */
.lamp-glow{filter:drop-shadow(0 0 18px rgba(255,213,122,.65))}

/* DB panel frame around interactive breaker */
.db-frame{background:#1D0F15;border:1px solid var(--bord);border-radius:18px;padding:22px;display:inline-block}
.db-row{display:flex;gap:10px;justify-content:center;margin-bottom:18px}
.mcb{width:34px;height:64px;border-radius:8px;background:#2B151D;border:1px solid rgba(255,255,255,.12);position:relative}
.mcb::after{content:"";position:absolute;left:7px;right:7px;top:8px;height:22px;border-radius:5px;background:#4A2531;border:1px solid rgba(255,255,255,.14)}
.mcb.on::after{background:linear-gradient(180deg,var(--accent-hi),var(--accent));box-shadow:0 0 10px color-mix(in srgb, var(--accent) 60%, transparent)}
.mcb.off::after{top:34px;background:#3A1B24}

/* ---------- main nav ---------- */
.mainnav{display:flex;gap:4px;align-items:center}
.mainnav a{color:#E3CFC6;text-decoration:none;font-weight:600;font-size:.92rem;padding:9px 13px;border-radius:999px;transition:color .15s,background .15s}
.mainnav a:hover{color:var(--accent);background:var(--glass)}
.top-actions{display:flex;align-items:center;gap:12px}
.navtoggle{display:none;background:var(--glass);border:1px solid var(--bord);border-radius:10px;width:44px;height:44px;
  cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.navtoggle span{display:block;width:20px;height:2px;background:var(--cream);border-radius:2px;transition:transform .2s,opacity .2s}
.nav-open .navtoggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-open .navtoggle span:nth-child(2){opacity:0}
.nav-open .navtoggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobilenav{display:none;flex-direction:column;background:rgba(18,10,14,.97);backdrop-filter:blur(20px);border-bottom:1px solid var(--bord)}
.mobilenav a{color:#E3CFC6;text-decoration:none;font-weight:700;padding:15px 24px;border-bottom:1px solid rgba(255,255,255,.06)}
.mobilenav a:hover{color:var(--accent)}
.nav-open .mobilenav{display:flex}
@media (max-width:1080px){.mainnav{display:none}.navtoggle{display:flex}}

/* ---------- gallery ---------- */
.gallery{columns:3;gap:16px}
.gallery a{display:block;margin-bottom:16px;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--bord);
  position:relative;break-inside:avoid;transition:transform .18s,border-color .18s}
.gallery a:hover{transform:translateY(-3px);border-color:var(--accent)}
.gallery img{width:100%;display:block}
.gallery .glabel{position:absolute;left:12px;bottom:12px;background:rgba(18,10,14,.72);backdrop-filter:blur(8px);
  border:1px solid var(--bord);border-radius:999px;padding:6px 14px;font-size:.78rem;font-weight:700;color:#E3CFC6}
@media (max-width:900px){.gallery{columns:2}}
@media (max-width:560px){.gallery{columns:1}}

/* lightbox */
dialog.lightbox{border:0;background:rgba(10,5,8,.92);backdrop-filter:blur(10px);padding:0;max-width:92vw;max-height:92vh;border-radius:16px;overflow:hidden}
dialog.lightbox::backdrop{background:rgba(10,5,8,.8)}
dialog.lightbox img{max-width:92vw;max-height:86vh;display:block}
dialog.lightbox .lb-close{position:absolute;top:12px;right:12px;background:var(--accent);color:#1A0F14;border:0;border-radius:999px;
  width:40px;height:40px;font-weight:900;font-size:1.2rem;cursor:pointer}

/* contact page map + hours */
.map-embed{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--bord);min-height:340px}
.map-embed iframe{width:100%;height:100%;min-height:340px;border:0;display:block;filter:grayscale(.2) contrast(1.05)}
.hours{width:100%;border-collapse:collapse}
.hours td{padding:10px 0;border-bottom:1px solid var(--bord);color:#E3CFC6;font-size:.95rem}
.hours td:last-child{text-align:right;font-weight:800;color:var(--accent)}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .hero{min-height:auto}
  .hero .wrap{grid-template-columns:1fr;gap:36px}
  .bento{grid-template-columns:repeat(2,1fr)}
  .gcards{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .breaker,.split,.contact-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .section{padding:60px 0}
  .steps,.gcards{grid-template-columns:1fr}
  .bento{grid-template-columns:1fr;grid-auto-rows:180px}
  .b-2w{grid-column:span 1}
  .f-row{grid-template-columns:1fr}
  .mob-bar{display:grid}
  body{padding-bottom:58px}
  .topbar .top-call{display:none}
}