/* ================================================================
   DJVD ELECTRICAL — styles.css
   Brand: navy #142942 · electric blue #1766C7 · sky #4FA3E6 · white
   ================================================================ */
:root{
  --navy-900:#0C2545; --navy-800:#122A4D; --navy:#142942;
  --blue-700:#12437E; --blue:#1766C7; --blue-400:#2E7BDA;
  --sky:#4FA3E6; --sky-300:#7FBEF0; --sky-100:#E7F1FB;
  --wa:#25D366; --wa-d:#12a44b;
  --paper:#F4F8FC; --white:#fff; --ink:#10233F; --body:#48576D; --muted:#6B7A90; --line:#E4EAF2;
  --grad:linear-gradient(135deg,#123A6E 0%,#1766C7 55%,#4FA3E6 100%);
  --shadow-sm:0 2px 10px rgba(16,35,63,.06);
  --shadow:0 14px 40px rgba(16,35,63,.12);
  --shadow-lg:0 30px 70px rgba(12,37,69,.28);
  --r:16px; --r-lg:22px;
  --head-h:74px;
  --maxw:1200px;
  font-synthesis:none;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--head-h) + 10px);}
html,body{overflow-x:clip;}
body{
  margin:0; background:var(--white); color:var(--body);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:'Plus Jakarta Sans',Inter,sans-serif; color:var(--ink); line-height:1.12; margin:0; letter-spacing:-.01em; font-weight:800;}
p{margin:0}
a{color:var(--blue); text-decoration:none}
img{display:block; max-width:100%}
button{font-family:inherit; cursor:pointer}
.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(18px,4vw,40px);}
.ic{width:1.15em; height:1.15em; display:inline-block; vertical-align:-.15em; fill:none;}
.skip{position:absolute; left:-999px; top:0; background:var(--navy); color:#fff; padding:10px 16px; z-index:200; border-radius:0 0 8px 0;}
.skip:focus{left:0}
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1; transform:none}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:.55em; font-weight:700; font-family:'Plus Jakarta Sans',sans-serif;
  border:0; border-radius:999px; padding:.72em 1.3em; font-size:.95rem; line-height:1; color:#fff; transition:transform .18s, box-shadow .25s, background .2s; white-space:nowrap;}
.btn .ic{width:1.25em; height:1.25em}
.btn--wa{background:var(--grad); box-shadow:0 8px 24px rgba(23,102,199,.34);}
.btn--wa:hover{filter:brightness(1.07); transform:translateY(-2px); box-shadow:0 13px 30px rgba(23,102,199,.46);}
.btn--wa .ic--wa{--wa-phone:#fff}
.btn--ghost{background:rgba(255,255,255,.08); color:#fff; border:1.5px solid rgba(255,255,255,.34);}
.btn--ghost:hover{background:rgba(255,255,255,.16); transform:translateY(-2px)}
.btn--lg{padding:.95em 1.6em; font-size:1.02rem}
.btn--block{width:100%; justify-content:center}

.link{display:inline-flex; align-items:center; gap:.35em; font-weight:700; font-family:'Plus Jakarta Sans',sans-serif; color:var(--blue); font-size:.92rem;}
.link .ic{width:1.1em;height:1.1em; transition:transform .2s}
.link:hover .ic{transform:translateX(4px)}

/* ---------- Brand lockup ---------- */
.brand{display:inline-flex; align-items:center; gap:11px}
.brand__mark{border-radius:12px; box-shadow:0 4px 14px rgba(23,102,199,.28)}
.brand__wm{line-height:1}
.brand__wm b{display:block; font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:1.42rem; letter-spacing:.05em; color:var(--navy);}
.brand__wm>span{display:block; font-family:'Plus Jakarta Sans',sans-serif; font-weight:600; font-size:.6rem; letter-spacing:.34em; color:var(--blue); margin-top:2px;}

/* ---------- Header ---------- */
.site-header{position:sticky; top:0; z-index:100; background:rgba(255,255,255,.86); backdrop-filter:blur(12px); border-bottom:1px solid transparent; transition:box-shadow .25s, border-color .25s, background .25s;}
.site-header.scrolled{box-shadow:0 6px 24px rgba(16,35,63,.09); border-color:var(--line); background:rgba(255,255,255,.94);}
.head-inner{display:flex; align-items:center; justify-content:space-between; height:var(--head-h);}
.nav{display:flex; align-items:center; gap:clamp(14px,2vw,30px)}
.nav>a{color:var(--navy); font-weight:600; font-size:.96rem; letter-spacing:-.01em;}
.nav>a:not(.nav__cta){position:relative}
.nav>a:not(.nav__cta)::after{content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px; background:var(--grad); border-radius:2px; transition:width .25s}
.nav>a:not(.nav__cta):hover{color:var(--blue)}
.nav>a:not(.nav__cta):hover::after,.nav>a.active::after{width:100%}
.nav>a.nav__cta{color:#fff; margin-left:6px}
.hamb{display:none; width:44px; height:44px; border:0; background:transparent; flex-direction:column; justify-content:center; gap:5px; padding:0}
.hamb span{display:block; height:2.5px; width:24px; margin-inline:auto; background:var(--navy); border-radius:3px; transition:.3s}
.hamb[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.hamb[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamb[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{position:relative; background:var(--navy-900); color:#cfe0f5; overflow:hidden; isolation:isolate;}
.hero__bg{position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(60% 55% at 78% 8%, rgba(79,163,230,.34), transparent 60%),
    radial-gradient(50% 50% at 8% 92%, rgba(23,102,199,.30), transparent 60%),
    linear-gradient(180deg,#0C2545,#0d2851 65%,#0C2545);
}
/* Faint grid revealed by a soft spotlight that follows the cursor */
.hero__grid,.band__grid{--grid-x:50%; --grid-y:50%; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:0;
  background-image:
    linear-gradient(rgba(126,195,250,.18) 1px,transparent 1px),
    linear-gradient(90deg,rgba(126,195,250,.18) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(circle 235px at var(--grid-x) var(--grid-y),#000 0%,rgba(0,0,0,.9) 38%,rgba(0,0,0,.42) 70%,transparent 100%);
          mask-image:radial-gradient(circle 235px at var(--grid-x) var(--grid-y),#000 0%,rgba(0,0,0,.9) 38%,rgba(0,0,0,.42) 70%,transparent 100%);
  transition:opacity .28s ease;
  will-change:opacity;
}
.hero__grid.is-active,.band__grid.is-active{opacity:.82}
.hero__inner{display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(30px,5vw,64px); align-items:center; padding-block:clamp(56px,8vw,104px);}
.eyebrow{display:inline-flex; align-items:center; gap:.5em; font-weight:600; font-size:clamp(.6rem,3vw,.82rem); letter-spacing:.02em; color:var(--sky-300); background:rgba(79,163,230,.12); border:1px solid rgba(79,163,230,.28); padding:.5em .9em; border-radius:999px; margin-bottom:20px; white-space:nowrap; max-width:100%;}
.eyebrow .dot{width:7px; height:7px; border-radius:50%; background:var(--sky); flex:0 0 auto; animation:dotPulse 2s ease-in-out infinite}
@keyframes dotPulse{0%{box-shadow:0 0 0 0 rgba(79,163,230,.55)}70%{box-shadow:0 0 0 7px rgba(79,163,230,0)}100%{box-shadow:0 0 0 0 rgba(79,163,230,0)}}
.hero__title{font-size:clamp(2.3rem,5.4vw,3.7rem); color:#fff; letter-spacing:-.022em; line-height:1.04;}
.hero__title .grad{background:linear-gradient(96deg,#8FCBFF 0%,#4FA3E6 52%,#BFE3FF 100%); -webkit-background-clip:text; background-clip:text; color:transparent;}
.hero__scope{margin-top:14px; font-family:'Plus Jakarta Sans',sans-serif; font-weight:600; font-size:clamp(.95rem,1.5vw,1.1rem); letter-spacing:.02em; color:var(--sky-300);}
.hero__sub{margin-top:16px; font-size:clamp(1rem,1.4vw,1.14rem); color:#b9cbe6; max-width:40ch;}
.hero__cta{display:flex; gap:14px; margin-top:30px; flex-wrap:wrap}
.hero__chips{list-style:none; display:flex; flex-wrap:nowrap; gap:8px 15px; padding:0; margin:28px 0 0;}
.hero__chips li{display:inline-flex; align-items:center; gap:.38em; font-size:.82rem; color:#c6d6ee; font-weight:500; white-space:nowrap}
.hero__chips .ic{width:1em; height:1em; color:var(--sky); stroke:var(--sky); flex:0 0 auto}

.hero__media{position:relative}
.hero__frame{position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg); border:1px solid rgba(255,255,255,.12); aspect-ratio:4/3.05;}
.hero__frame img{width:100%; height:100%; object-fit:cover}
.hero__frame::after{content:""; position:absolute; inset:0; background:linear-gradient(160deg,transparent 55%,rgba(12,37,69,.5));}
.floatcard{position:absolute; z-index:2; background:rgba(255,255,255,.97); color:var(--ink); border-radius:14px; box-shadow:var(--shadow); backdrop-filter:blur(6px); will-change:transform; animation:floaty 5.5s ease-in-out infinite;}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.floatcard--motto{left:-18px; bottom:26px; display:flex; align-items:center; gap:12px; padding:13px 17px 13px 14px;}
.floatcard--motto .ic{width:34px; height:34px; padding:7px; border-radius:10px; color:#fff; stroke:#fff; background:var(--grad); box-shadow:0 6px 16px rgba(23,102,199,.4)}
.floatcard--motto b{display:block; font-family:'Plus Jakarta Sans',sans-serif; font-size:.95rem; color:var(--navy)}
.floatcard--motto span{font-size:.76rem; color:var(--muted)}
.floatcard--reply{top:20px; right:-14px; display:inline-flex; align-items:center; gap:.55em; padding:9px 14px; font-size:.82rem; font-weight:600; color:var(--navy); animation:floaty 6.8s ease-in-out -1.8s infinite}
.pulse{width:9px; height:9px; border-radius:50%; background:#4FA3E6; box-shadow:0 0 0 0 rgba(79,163,230,.6); animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(79,163,230,.55)}70%{box-shadow:0 0 0 9px rgba(79,163,230,0)}100%{box-shadow:0 0 0 0 rgba(79,163,230,0)}}

/* ---------- Value strip ---------- */
.values{background:var(--white); border-bottom:1px solid var(--line)}
.values__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2.4vw,30px); padding-block:clamp(34px,4.5vw,52px);}
.value{display:flex; gap:14px; align-items:flex-start}
.value__ic{flex:0 0 auto; width:48px; height:48px; display:grid; place-items:center; border-radius:13px; background:var(--sky-100); color:var(--blue); box-shadow:inset 0 0 0 1px rgba(23,102,199,.12)}
.value__ic .ic{width:24px; height:24px; stroke:var(--blue)}
.value b{display:block; font-family:'Plus Jakarta Sans',sans-serif; color:var(--ink); font-size:1.02rem; margin-bottom:2px}
.value p{font-size:.9rem; color:var(--muted); line-height:1.5}

/* ---------- Section shell ---------- */
.section{padding-block:clamp(58px,8vw,100px)}
.services{background:var(--paper)}
.sec-head{max-width:760px; margin:0 auto clamp(34px,4.5vw,52px); text-align:center}
.kicker{display:inline-block; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--blue); margin-bottom:12px;}
.kicker--light{color:var(--sky-300)}
.sec-head h2{font-size:clamp(1.8rem,3.6vw,2.7rem)}
.sec-sub{margin-top:14px; font-size:1.05rem; color:var(--muted)}

/* ---------- Services ---------- */
.svc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,24px)}
.svc{background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow-sm); transition:transform .28s, box-shadow .28s, border-color .28s;}
.svc:hover{transform:translateY(-8px); box-shadow:var(--shadow); border-color:#cfe0f4}
.svc__img{position:relative; aspect-ratio:4/3.35; overflow:hidden}
.svc__img img{width:100%; height:100%; object-fit:cover; transition:transform .5s}
.svc:hover .svc__img img{transform:scale(1.06)}
.svc__img::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(12,37,69,.42))}
.svc__ic{position:absolute; left:14px; bottom:14px; z-index:2; width:44px; height:44px; display:grid; place-items:center; border-radius:12px; background:rgba(255,255,255,.95); color:var(--blue); box-shadow:var(--shadow-sm)}
.svc__ic .ic{width:24px; height:24px; stroke:var(--blue)}
.svc__body{padding:20px 20px 22px; display:flex; flex-direction:column; gap:10px; flex:1}
.svc__body h3{font-size:1.16rem}
.svc__body p{font-size:.92rem; color:var(--body); flex:1}

/* ---------- Work / gallery ---------- */
.filters{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:clamp(26px,3vw,38px)}
.filter{background:var(--white); border:1.5px solid var(--line); color:var(--navy); font-weight:600; font-size:.9rem; padding:.6em 1.15em; border-radius:999px; transition:.22s; font-family:'Plus Jakarta Sans',sans-serif;}
.filter:hover{border-color:var(--sky)}
.filter.is-active{background:var(--navy); color:#fff; border-color:var(--navy)}
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.6vw,20px)}
.shot{position:relative; margin:0; border-radius:var(--r); overflow:hidden; cursor:pointer; aspect-ratio:4/3; box-shadow:var(--shadow-sm); background:#dbe5f1;}
.shot img{width:100%; height:100%; object-fit:cover; transition:transform .5s}
.shot:hover img{transform:scale(1.07)}
.shot figcaption{position:absolute; left:0; right:0; bottom:0; padding:26px 14px 12px; color:#fff; font-size:.86rem; font-weight:600; font-family:'Plus Jakarta Sans',sans-serif; background:linear-gradient(180deg,transparent,rgba(12,37,69,.82)); transform:translateY(6px); opacity:.9; transition:.3s}
.shot:hover figcaption{transform:none; opacity:1}
.shot.hide{display:none}
.shot::before{content:""; position:absolute; z-index:2; top:12px; right:12px; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.92); opacity:0; transform:scale(.8); transition:.25s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='17' height='17' fill='none' stroke='%231766C7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3H4v4M16 3h4v4M8 21H4v-4M16 21h4v-4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center;}
.shot:hover::before{opacity:1; transform:scale(1)}

/* ---------- Band (solar / load-shedding) ---------- */
.band{position:relative; background:var(--navy-900); color:#c4d5ec; overflow:hidden; isolation:isolate}
.band::before{content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(55% 60% at 85% 20%,rgba(79,163,230,.28),transparent 60%),radial-gradient(45% 55% at 5% 90%,rgba(23,102,199,.26),transparent 60%),linear-gradient(180deg,#0C2545,#0d2851);}
.band__inner{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,64px); align-items:center; padding-block:clamp(52px,7vw,92px)}
.band__copy h2{color:#fff; font-size:clamp(1.7rem,3.4vw,2.6rem); margin-top:6px}
.band__copy>p{margin-top:16px; font-size:1.05rem; color:#b9cbe6; max-width:52ch}
.band__list{list-style:none; padding:0; margin:22px 0 28px; display:grid; gap:11px}
.band__list li{display:flex; align-items:center; gap:.6em; color:#dceafa; font-weight:500}
.band__list .ic{width:1.3em; height:1.3em; color:var(--sky); stroke:var(--sky)}
.band__media{border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg); border:1px solid rgba(255,255,255,.12); aspect-ratio:4/3.4; max-height:520px}
.band__media img{width:100%; height:100%; object-fit:cover}

/* ---------- About ---------- */
.about{background:var(--white)}
.about__inner{display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(30px,5vw,64px); align-items:center}
.about__media{border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--line); aspect-ratio:4/3.1}
.about__media img{width:100%; height:100%; object-fit:cover; object-position:center 35%}
.about__copy h2{font-size:clamp(1.8rem,3.4vw,2.6rem); margin:6px 0 16px}
.about__copy>p{margin-bottom:14px; color:var(--body)}
.about__points{display:grid; grid-template-columns:1fr 1fr; gap:20px 26px; margin-top:26px}
.about__points>div b{display:block; font-family:'Plus Jakarta Sans',sans-serif; color:var(--ink); margin:8px 0 3px; font-size:1.02rem}
.about__points>div p{font-size:.88rem; color:var(--muted); line-height:1.5}
.value__ic--sm{width:40px; height:40px; border-radius:11px}
.value__ic--sm .ic{width:21px; height:21px}

/* ---------- Contact ---------- */
.contact{background:var(--paper)}
.contact__grid{display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(20px,3vw,40px); align-items:start}
.contact__card{display:grid; gap:12px}
.cc{display:flex; align-items:center; gap:14px; background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:16px 18px; transition:transform .2s, box-shadow .25s, border-color .25s;}
a.cc:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:#cfe0f4}
.cc__ic{flex:0 0 auto; width:46px; height:46px; display:grid; place-items:center; border-radius:12px; background:var(--sky-100); color:var(--blue)}
.cc__ic .ic{width:23px; height:23px; stroke:var(--blue)}
.cc__ic--wa{background:var(--grad)}
.cc__t{display:flex; flex-direction:column; flex:1; min-width:0}
.cc__t b{font-family:'Plus Jakarta Sans',sans-serif; color:var(--ink); font-size:1rem}
.cc__t span{font-size:.9rem; color:var(--muted); overflow-wrap:anywhere}
.cc__go{width:20px; height:20px; color:var(--sky); stroke:var(--sky); flex:0 0 auto; transition:transform .2s}
a.cc:hover .cc__go{transform:translateX(4px)}
.cc--static{cursor:default}

.contact__form{background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(22px,3vw,32px); box-shadow:var(--shadow-sm); display:grid; gap:15px}
.form__lead{font-size:.95rem; color:var(--body); margin-bottom:2px}
.contact__form label{display:grid; gap:7px; font-size:.86rem; font-weight:600; color:var(--navy); font-family:'Plus Jakarta Sans',sans-serif}
.contact__form input,.contact__form select,.contact__form textarea{
  font-family:Inter,sans-serif; font-size:.98rem; color:var(--ink); background:var(--paper); border:1.5px solid var(--line); border-radius:11px; padding:.8em .9em; width:100%; transition:border-color .2s, box-shadow .2s; font-weight:400}
.contact__form textarea{resize:vertical; min-height:96px}
.contact__form input:focus,.contact__form select:focus,.contact__form textarea:focus{outline:none; border-color:var(--sky); box-shadow:0 0 0 4px rgba(79,163,230,.16); background:#fff}
.form__note{font-size:.78rem; color:var(--muted); text-align:center; margin-top:-2px}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy-900); color:#a9bdd8}
.foot-inner{display:grid; grid-template-columns:1.6fr 1fr 1.3fr; gap:clamp(26px,4vw,54px); padding-block:clamp(46px,6vw,72px)}
.brand--foot .brand__wm b{color:#fff}
.brand--foot .brand__wm>span{color:var(--sky-300)}
.foot-blurb{margin-top:16px; font-size:.92rem; color:#98acca; max-width:38ch; line-height:1.6}
.foot-blurb em{color:var(--sky-300); font-style:normal; font-weight:600}
.foot-links{display:flex; flex-direction:column; gap:11px}
.foot-links h4{font-family:'Plus Jakarta Sans',sans-serif; color:#fff; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:4px; font-weight:700}
.foot-links a{color:#a9bdd8; font-size:.93rem; transition:color .2s; width:fit-content}
.foot-links a:hover{color:#fff}
.foot-area{font-size:.9rem; color:#7d92b2}
.foot-bottom{display:flex; align-items:center; justify-content:space-between; gap:14px; padding-block:20px; border-top:1px solid rgba(255,255,255,.09); font-size:.84rem; color:#7d92b2; flex-wrap:wrap}
.foot-motto{display:inline-flex; align-items:center; gap:.5em; color:var(--sky-300); font-weight:600; font-family:'Plus Jakarta Sans',sans-serif}
.foot-motto .ic{width:1.15em; height:1.15em; stroke:var(--sky-300)}
.foot-credit{font-size:.84rem; color:#7d92b2; margin:0}
.foot-credit a{color:var(--sky-300); font-weight:600}
.foot-credit a:hover{color:#fff; text-decoration:underline}

/* ---------- Floating WhatsApp ---------- */
.fab{position:fixed; z-index:90; right:20px; bottom:20px; width:58px; height:58px; border-radius:50%; background:var(--grad); display:grid; place-items:center; box-shadow:0 10px 30px rgba(23,102,199,.5); transition:transform .2s;}
.fab .ic{width:30px; height:30px}
.fab::after{content:""; position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 0 rgba(79,163,230,.5); animation:pulse 2.4s infinite}
.fab:hover{transform:scale(1.08)}

/* ---------- Lightbox ---------- */
.lightbox{position:fixed; inset:0; z-index:150; background:rgba(8,20,38,.9); backdrop-filter:blur(6px); display:none; align-items:center; justify-content:center; padding:24px; opacity:0; transition:opacity .28s;}
.lightbox.open{display:flex; opacity:1}
.lb__stage{margin:0; max-width:min(1000px,92vw); max-height:86vh; display:flex; flex-direction:column; align-items:center; gap:12px}
.lb__stage img{max-width:100%; max-height:78vh; border-radius:12px; box-shadow:var(--shadow-lg); object-fit:contain}
.lb__stage figcaption{color:#dbe7f7; font-size:.92rem; font-weight:600; font-family:'Plus Jakarta Sans',sans-serif}
.lb__close,.lb__nav{position:absolute; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); color:#fff; border-radius:50%; display:grid; place-items:center; transition:.2s; backdrop-filter:blur(4px);}
.lb__close{top:18px; right:20px; width:46px; height:46px; font-size:26px; line-height:1}
.lb__nav{top:50%; transform:translateY(-50%); width:52px; height:52px; font-size:30px; line-height:1}
.lb__prev{left:18px} .lb__next{right:18px}
.lb__close:hover,.lb__nav:hover{background:rgba(255,255,255,.24)}

/* ================= RESPONSIVE ================= */
@media (max-width:1024px){
  .values__grid{grid-template-columns:repeat(2,1fr); gap:24px 30px}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .hero__inner{grid-template-columns:1fr; gap:40px}
  .hero__media{max-width:560px}
  .hero__sub{max-width:52ch}
  .band__inner,.about__inner{grid-template-columns:1fr; gap:34px}
  .about__inner{grid-template-columns:1fr}
  .about__media{order:-1; max-height:420px}
  .band__media{max-width:560px; order:-1}
  .contact__grid{grid-template-columns:1fr}
  .foot-inner{grid-template-columns:1fr 1fr; gap:34px}
  .foot-brand{grid-column:1 / -1}
}
@media (max-width:900px){
  :root{--head-h:64px}
  .nav{position:fixed; inset:var(--head-h) 0 auto 0; flex-direction:column; align-items:stretch; gap:0; background:#fff; border-bottom:1px solid var(--line); padding:8px 22px 22px; box-shadow:0 20px 40px rgba(16,35,63,.14); transform:translateY(-140%); transition:transform .34s cubic-bezier(.3,.8,.3,1); max-height:calc(100vh - var(--head-h)); overflow:auto;}
  .nav.open{transform:none}
  .nav>a:not(.nav__cta){padding:15px 4px; border-bottom:1px solid var(--line); font-size:1.05rem}
  .nav>a:not(.nav__cta)::after{display:none}
  .nav__cta{margin:16px 0 0; justify-content:center}
  .hamb{display:flex}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .about__points{grid-template-columns:1fr 1fr; gap:18px}
  .foot-bottom{justify-content:flex-start}
}
@media (max-width:560px){
  body{font-size:15.5px}
  .values__grid{grid-template-columns:1fr; gap:18px}
  .svc-grid{grid-template-columns:1fr}
  .foot-inner{grid-template-columns:1fr}
  .hero__cta .btn,.hero__cta{width:100%}
  .hero__cta .btn{justify-content:center}
  .floatcard--motto{left:10px; bottom:12px}
  .floatcard--reply{right:10px}
  .filters{gap:8px}
  .filter{font-size:.84rem; padding:.55em 1em}
  .about__points{grid-template-columns:1fr}
  .lb__nav{width:44px;height:44px}
  .brand__wm b{font-size:1.28rem}
}
@media (max-width:640px){
  .hero__chips{display:grid; grid-template-columns:1fr 1fr; gap:12px 14px; margin-top:24px}
  .hero__chips li{white-space:normal}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; scroll-behavior:auto !important}
  .reveal{opacity:1; transform:none; transition:none}
  .hero__grid,.band__grid{transition:none}
}
@media (any-hover:none){
  .hero__grid,.band__grid{display:none}
}