@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --bg:#070605;
  --paper:#121010;
  --paper-2:#171512;
  --ink:#efe7d6;
  --muted:#93897a;
  --line:#2c2620;
  --line-soft:#211d18;
  --dark:#000000;
  --soft:#161310;
  --gold:#cf9d47;
  --gold-bright:#f0c274;
  --gold-deep:#7a5e2c;
  --gold-dim:rgba(207,157,71,.5);

  --font-display:'Fraunces','Georgia',serif;
  --font-body:'Inter',Arial,Helvetica,sans-serif;
  --font-mono:'JetBrains Mono',monospace;

  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:20px;

  --ease:cubic-bezier(.16,1,.3,1);

  --shadow-sm:0 2px 10px -2px rgba(0,0,0,.5);
  --shadow-md:0 18px 40px -18px rgba(0,0,0,.75), 0 4px 14px -6px rgba(0,0,0,.6);
  --shadow-lg:0 34px 70px -20px rgba(0,0,0,.85), 0 10px 26px -10px rgba(0,0,0,.65);
  --shadow-gold:0 22px 46px -18px rgba(207,157,71,.28);
  --inset-hair:inset 0 1px 0 rgba(255,255,255,.045);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--ink);font-family:var(--font-body);line-height:1.55;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  background-color:var(--bg);
  background-image:url('images/bg-theme.svg');
  background-repeat:no-repeat;
  background-size:cover;
  background-position:top center;
  background-attachment:fixed;
  overflow-x:hidden;
  position:relative;
}
body::before{
  content:'';
  position:fixed;
  inset:-12%;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(ellipse 46% 38% at 16% 6%, rgba(207,157,71,.09), transparent 65%);
  animation:driftGlow 26s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes driftGlow{
  0%{ transform:translate(-2%,-3%) scale(1); }
  100%{ transform:translate(3%,4%) scale(1.06); }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  body::before{ animation:none; }
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.wrap{width:min(1260px,92vw);margin:auto}
::selection{background:var(--gold);color:#100c08}

h1,h2,h3{font-family:var(--font-display)}

/* ============== SCROLL REVEAL ============== */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease), transform .8s var(--ease)}
[data-reveal].in{opacity:1;transform:translateY(0)}

header{position:sticky;top:0;z-index:500;background-color:rgba(6,5,4,calc(var(--chrome-o,1) * .92));backdrop-filter:blur(calc(var(--chrome-o,1) * 16px)) saturate(1.1);-webkit-backdrop-filter:blur(calc(var(--chrome-o,1) * 16px)) saturate(1.1);border-bottom:1px solid rgba(33,29,24,var(--chrome-o,1));box-shadow:0 14px 34px -10px rgba(0,0,0,calc(var(--chrome-o,1) * .75))}
/* Pre-scroll: only the language switch shows (--chrome-o:0 hides/mutes the rest of the bar); JS drives --chrome-o up to 1 as you scroll, in sync with the flying logo landing. */
html.has-intro header{--chrome-o:0}
html.has-intro .logo,
html.has-intro .menu,
html.has-intro .nav-actions,
html.has-intro .burger{opacity:var(--chrome-o,1);pointer-events:none}
html.has-intro header.scrolled .logo,
html.has-intro header.scrolled .menu,
html.has-intro header.scrolled .nav-actions,
html.has-intro header.scrolled .burger{pointer-events:auto}
.nav{padding:7px 0;display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{display:flex;align-items:center;gap:10px;white-space:nowrap}
.logo-mark{height:52px;width:auto;object-fit:contain;transition:transform .3s var(--ease)}
.logo:hover .logo-mark{transform:translateY(-2px) scale(1.03)}
.logo-badge{width:30px;height:30px;border-radius:4px;object-fit:cover}
.menu{display:flex;gap:26px;font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.11em;color:var(--muted)}
.menu a{position:relative;padding-bottom:4px;transition:color .3s ease}
.menu a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--gold);transition:right .35s var(--ease)}
.menu a:hover{color:var(--ink)}
.menu a:hover::after{right:0}
.nav-actions{display:flex;align-items:center;gap:16px}
.lang-switch{display:flex;gap:6px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.04em}
.lang-pill{padding:4px 9px;border:1px solid var(--line);border-radius:20px;color:var(--muted);transition:border-color .25s ease,color .25s ease,background .25s ease}
.lang-pill:hover{border-color:var(--gold);color:var(--gold-bright)}
.lang-pill.active{background:var(--gold);color:#100c08;border-color:var(--gold);box-shadow:0 4px 14px rgba(207,157,71,.3)}
.btn.small{padding:11px 16px;font-size:10px;white-space:nowrap}
.burger{display:none;background:none;border:0;font-size:22px;cursor:pointer;color:var(--ink)}
.mobile-menu{display:none;flex-direction:column;gap:2px;background:rgba(6,5,4,.98);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.mobile-menu.open{display:flex}
.mobile-menu a{padding:14px 6%;border-top:1px solid var(--line);font-family:var(--font-mono);font-size:12.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink)}
.mobile-menu .lang-switch{padding:14px 6%;border-top:1px solid var(--line)}

.hero{height:100vh;height:100svh;min-height:480px;display:flex;align-items:center;justify-content:center;padding:clamp(14px,3.2vh,40px) 24px;border-bottom:1px solid var(--line-soft);position:relative;overflow:hidden}
/* while the header is invisible pre-scroll it still reserves its height in flow; cancel that so this spans the true viewport instead of sitting below it. Only while has-intro is active (header is transparent then) so the reduced-motion fallback, where the header is always opaque, is untouched. */
html.has-intro .hero{margin-top:-67px}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 50% 28%,rgba(207,157,71,.1),transparent 70%);pointer-events:none}

.hero-grid{display:grid;grid-template-columns:1fr;grid-template-areas:"mast" "text";row-gap:clamp(14px,2.6vh,28px);align-items:stretch;width:100%;max-width:1100px;position:relative;z-index:1}
.hero-mast{grid-area:mast;display:flex;flex-direction:column;align-items:center;text-align:center;width:100%}
.hero-inner{grid-area:text;display:flex;flex-direction:column;align-items:flex-start;text-align:left;position:relative;width:100%}

.intro-logo-space{height:clamp(96px,18.5vh,208px);width:100%;display:flex;align-items:center;justify-content:center;margin-bottom:clamp(6px,1.2vh,14px)}
#introLogo{height:clamp(96px,18.5vh,208px);width:auto;object-fit:contain;will-change:transform,opacity}
html.has-intro #introLogo.is-flying{position:fixed;top:0;left:0;z-index:700;pointer-events:none;margin:0;transform-origin:top left}

.hero-mast .eyebrow{display:inline-flex;align-items:center;gap:9px;justify-content:center;margin:0 0 clamp(10px,2vh,22px);padding:8px 18px;border:1px solid rgba(207,157,71,.35);border-radius:999px;background:rgba(207,157,71,.06);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:heroIn .8s var(--ease) .12s both}
.hero-mast .eyebrow::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--gold-bright);box-shadow:0 0 9px 2px rgba(240,194,116,.6);animation:pulseDot 2s ease-in-out infinite}
@keyframes pulseDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.7)}}

.hero-inner h1{text-align:left;margin:0;letter-spacing:-.02em;font-size:clamp(30px,min(4vw,7.6vh),64px);line-height:1.05;background:linear-gradient(175deg,var(--ink) 30%,var(--gold-bright) 130%);-webkit-background-clip:text;background-clip:text;color:transparent;animation:heroIn .8s var(--ease) .22s both}

.hero-inner .lead{margin:clamp(10px,1.6vh,18px) 0 0;font-size:clamp(14px,min(1.4vw,2.15vh),17px);line-height:1.6;max-width:520px;animation:heroIn .8s var(--ease) .34s both}

.hero-cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-start;margin-top:clamp(16px,2.6vh,30px);animation:heroIn .8s var(--ease) .46s both}
.hero-cta .btn{gap:9px}
.hero-cta .btn::after{content:'\2192';display:inline-block;transition:transform .3s var(--ease)}
.hero-cta .btn:hover::after{transform:translateX(4px)}

@keyframes heroIn{from{opacity:0;transform:translateY(18px);filter:blur(6px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@media(prefers-reduced-motion:reduce){
 .hero-mast .eyebrow,.hero-inner h1,.hero-inner .lead,.hero-cta{animation:none;opacity:1;filter:none}
}

.scroll-cue{position:absolute;left:50%;bottom:clamp(14px,3vh,32px);width:1px;height:44px;transform:translateX(-50%);background:linear-gradient(180deg,rgba(207,157,71,0),rgba(207,157,71,.55) 45%,rgba(207,157,71,0));transition:opacity .3s ease}
.scroll-cue::after{content:'';position:absolute;left:50%;top:0;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--gold-bright);box-shadow:0 0 8px 2px rgba(240,194,116,.55);animation:scrollDot 2s ease-in-out infinite}
html.page-scrolled .scroll-cue{opacity:0;pointer-events:none}
@keyframes scrollDot{0%{top:0;opacity:0}25%{opacity:1}100%{top:44px;opacity:0}}

.eyebrow{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:var(--gold);margin-bottom:18px;display:inline-flex;align-items:center;gap:8px}
.eyebrow::before{content:'';width:16px;height:1px;background:var(--gold-deep)}
h1{font-family:var(--font-display);font-weight:600;font-size:clamp(44px,7vw,98px);line-height:1;letter-spacing:-.02em;margin:0 0 28px;color:var(--ink);text-shadow:0 4px 40px rgba(0,0,0,.65)}
h2{font-family:var(--font-display);font-weight:600;font-size:clamp(32px,4.4vw,58px);line-height:1.04;letter-spacing:-.015em;margin:0;color:var(--ink)}
h3{font-family:var(--font-display);font-weight:600;margin:0;color:var(--ink)}
.lead{font-size:18px;color:var(--muted);max-width:760px;line-height:1.65}

.btn{display:inline-flex;align-items:center;padding:15px 22px;border:1px solid var(--gold-deep);color:var(--ink);font-family:var(--font-body);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.13em;border-radius:var(--radius-sm);background:rgba(207,157,71,.04);cursor:pointer;transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s ease,color .3s ease,border-color .3s ease}
.btn:hover{background:var(--gold);border-color:var(--gold);color:#100c08;box-shadow:0 16px 34px -10px rgba(207,157,71,.4);transform:translateY(-3px)}
.btn:active{transform:translateY(-1px);box-shadow:0 6px 14px rgba(0,0,0,.4)}
.btn.white{border-color:rgba(255,255,255,.5);color:#fff;background:rgba(255,255,255,.03)}
.btn.white:hover{background:var(--gold);border-color:var(--gold);color:#100c08}

section{padding:clamp(64px,9vw,120px) 0;border-bottom:1px solid var(--line-soft)}
.section-head{display:grid;grid-template-columns:.9fr 1.6fr;gap:50px;margin-bottom:48px;align-items:end}

.metrics{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.metric{padding:28px 24px;border-right:1px solid var(--line);transition:background .3s ease}
.metric:hover{background:rgba(207,157,71,.05)}
.metric:first-child{padding-left:0}
.metric:last-child{border-right:0}
.metric strong{font-family:var(--font-display);font-weight:600;font-size:34px;display:block;color:var(--gold-bright)}
.metric span{font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}

/* location */
.location{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:48px;border-top:1px solid var(--line);padding-top:48px}
.location-text p{color:var(--muted);font-size:15px}
.location-text .addr{color:var(--ink);font-weight:500;line-height:1.7}
.location-text h3{font-size:27px;margin-bottom:14px}
.location-map{min-height:280px;border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;background:var(--soft);box-shadow:var(--shadow-md);filter:invert(92%) contrast(.85) brightness(.82) saturate(.9);transition:filter .3s ease}
.location-map:hover{filter:invert(92%) contrast(.9) brightness(.9) saturate(1)}
.location-map iframe{width:100%;height:100%;min-height:280px;border:0;display:block}

.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;perspective:1400px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;perspective:1400px}
.card{background:linear-gradient(160deg,rgba(207,157,71,.055),rgba(255,255,255,.012)),var(--paper);border:1px solid var(--line);padding:28px;min-height:232px;border-radius:var(--radius-md);box-shadow:var(--shadow-sm),var(--inset-hair);transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s ease;display:flex;flex-direction:column;justify-content:flex-end}
.card:hover{transform:translateY(-9px);box-shadow:var(--shadow-md),0 0 32px -14px rgba(207,157,71,.3);border-color:var(--gold-deep)}
.card .num{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--gold);order:-1;margin-bottom:auto;padding-bottom:32px}
.card h3{font-size:23px;margin:0 0 12px}
.card p{color:var(--muted);font-size:14px;line-height:1.6}

.dark-section{background:rgba(0,0,0,.32);color:var(--ink)}
.dark-section .lead,.dark-section p{color:var(--muted)}
.dark-section .eyebrow{color:var(--gold)}
.sector{padding:24px;border:1px solid var(--line);min-height:190px;background-size:cover;background-position:center;position:relative;border-radius:var(--radius-md);background-color:var(--soft);display:flex;flex-direction:column;justify-content:flex-end;box-shadow:var(--shadow-sm);transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s ease}
.sector:hover{transform:translateY(-9px) scale(1.015);box-shadow:var(--shadow-md),0 0 34px -12px rgba(207,157,71,.28);z-index:2;border-color:var(--gold-deep)}
.sector h3{font-size:21px;margin-bottom:10px}
.sector.has-img{border-color:rgba(207,157,71,.14)}
.sector.has-img p{color:#e6e0d2}
.sector.has-img::before{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.55) 100%);pointer-events:none}

/* 03 · Sektorët — darken the photo only, keep the text bright and above the overlay */
#sectors .sector.has-img::before{background:linear-gradient(180deg,rgba(0,0,0,.4) 0%,rgba(0,0,0,.35) 35%,rgba(0,0,0,.85) 100%)}
#sectors .sector.has-img h3,
#sectors .sector.has-img p{position:relative;z-index:1}
#sectors .sector.has-img h3{color:#ffffff;text-shadow:0 2px 10px rgba(0,0,0,.85)}
#sectors .sector.has-img p{color:#f5f1e6;text-shadow:0 1px 8px rgba(0,0,0,.8)}

a.sector{text-decoration:none;color:inherit}
a.sector:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px}

.projects{display:grid;grid-template-columns:1.2fr .8fr;gap:20px}
.project-large,.project-small{background-color:var(--soft);background-size:cover;background-position:center;min-height:460px;padding:28px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;border-radius:var(--radius-lg);border:1px solid var(--line);box-shadow:var(--shadow-md);transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s ease}
.project-large:hover,.project-small:hover{transform:translateY(-9px);box-shadow:var(--shadow-lg),0 0 46px -14px rgba(207,157,71,.28);border-color:var(--gold-deep)}
.project-large:before,.project-small:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.8))}
.project-large.bright:before{background:linear-gradient(180deg,rgba(0,0,0,.02) 0%,rgba(0,0,0,.1) 55%,rgba(0,0,0,.65) 100%)}
.project-large>*,.project-small>*{position:relative;z-index:1;color:#fff}
.project-title{font-size:36px;max-width:500px;font-weight:600}
.project-meta{display:flex;justify-content:space-between;gap:20px;border-top:1px solid rgba(207,157,71,.3);padding-top:12px;font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em}
.project-stack{display:grid;gap:20px}
.project-small{min-height:220px}

.process{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--line)}
.step{padding:24px 18px;min-height:200px;border-right:1px solid var(--line);transition:background .3s ease,transform .3s var(--ease);display:flex;flex-direction:column}
.step:hover{background:rgba(207,157,71,.06);transform:translateY(-5px)}
.step:first-child{padding-left:0}
.step:last-child{border-right:0}
.step b{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:var(--gold)}
.step h3{font-size:19px;margin:auto 0 8px}
.step p{font-size:13px;color:var(--muted);line-height:1.55}

.why{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.why-box{background:linear-gradient(160deg,rgba(207,157,71,.065),rgba(255,255,255,.008)),var(--soft);border:1px solid var(--line);padding:30px;min-height:232px;border-radius:var(--radius-md);box-shadow:var(--shadow-sm),var(--inset-hair);transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s ease}
.why-box:hover{transform:translateY(-7px);box-shadow:var(--shadow-md),0 0 30px -14px rgba(207,157,71,.28);border-color:var(--gold-deep)}
.why-box h3{font-size:24px;margin-bottom:12px}
.list{display:grid;gap:10px;margin-top:18px}
.list div{padding:12px 0;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}

.energy{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.energy .sector{min-height:212px}

.faq{display:grid;gap:0;border-top:1px solid var(--line)}
.faq-item{padding:24px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr 1.5fr;gap:35px;transition:padding-left .3s var(--ease),background .3s ease}
.faq-item:hover{padding-left:16px;background:rgba(207,157,71,.05)}
.faq-item h3{font-size:18px;font-weight:600}
.faq-item p{margin:0;color:var(--muted)}

.cta{background:rgba(0,0,0,.45)}
.cta h2{font-size:clamp(38px,5.6vw,78px)}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:44px}
.contact-box{border-top:1px solid var(--line);padding-top:18px;color:#cfc7b4;transition:transform .3s var(--ease)}
.contact-box:hover{transform:translateY(-4px)}
.contact-box span{display:block;font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.13em;color:var(--gold);margin-bottom:9px}
.contact-box a:hover{color:var(--gold-bright)}

footer{background:rgba(0,0,0,.55);color:var(--muted);padding:28px 0;font-family:var(--font-mono);font-size:11px;border-top:1px solid var(--line)}
.foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

.wa-float{position:fixed;right:22px;bottom:22px;width:58px;height:58px;border-radius:50%;background:#1f8a4c;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md),0 0 0 1px rgba(207,157,71,.25);z-index:60;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.wa-float:hover{transform:scale(1.1) translateY(-4px);box-shadow:var(--shadow-lg),0 0 0 1px rgba(207,157,71,.45)}

@media(prefers-reduced-motion:reduce){
 *{transition:none!important;animation:none!important}
 .card:hover,.sector:hover,.project-large:hover,.project-small:hover,.why-box:hover,.btn:hover,.step:hover,.wa-float:hover,.logo:hover .logo-mark{transform:none!important}
}
/* ================= PROJECT SLIDESHOW ================= */
.project__visual--slideshow {
  position: relative;
  overflow: hidden;
}
.slideshow {
  position: relative;
  width: 100%;
  height: 100%;
}
.slideshow__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}
.slideshow__img.is-active {
  opacity: 1;
}
/* ================= PROJECT SECTION — layout fix ================= */
.projects__grid--single {
  grid-template-columns: 1fr;
}
.project__photos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 6px;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.project__photos img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 640px) {
  .project__photos {
    grid-template-columns: 1fr 1fr;
    aspect-ratio: 4 / 5;
  }
}

/* ================= SECTOR GALLERY LIGHTBOX ================= */
.lightbox{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;pointer-events:none;transition:opacity .3s ease}
.lightbox.is-open{opacity:1;pointer-events:auto}
.lightbox-backdrop{position:absolute;inset:0;background:rgba(8,8,8,.88);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.lightbox-dialog{position:relative;z-index:1;max-width:min(92vw,1100px);max-height:90vh;display:flex;flex-direction:column;align-items:center;gap:14px}
.lightbox-stage{position:relative;width:100%;display:flex;align-items:center;justify-content:center}
.lightbox-img{max-width:100%;max-height:72vh;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);object-fit:contain;background:#111}
.lightbox-close{position:absolute;top:-44px;right:0;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(10,10,10,.6);color:#fff;font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .25s ease}
.lightbox-close:hover{background:var(--gold);color:#100c08}
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(10,10,10,.5);color:#fff;font-size:26px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .25s ease}
.lightbox-nav:hover{background:var(--gold);color:#100c08}
.lightbox-prev{left:-58px}
.lightbox-next{right:-58px}
.lightbox-nav[hidden]{display:none}
.lightbox-caption{color:#fff;font-family:var(--font-display);font-size:18px;text-align:center}
.lightbox-counter{color:rgba(255,255,255,.6);font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
/* (mobile lightbox rules live in the RESPONSIVE ≤768 block at the end of this file) */

/* ================= CATEGORY DETAIL PAGE ================= */
.detail-hero{padding-bottom:0}
.back-link{display:inline-flex;align-items:center;gap:8px;color:var(--gold);font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.12em;text-decoration:none;margin-bottom:32px;transition:gap .25s ease}
.back-link:hover{gap:12px}
.back-link::before{content:'\2190'}
.photo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,560px));justify-content:center;gap:20px}
.photo-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-md);border:1px solid var(--line);cursor:pointer;background:var(--soft);box-shadow:var(--shadow-sm);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.photo-grid img:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.photo-grid img:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px}
.cta-compact h2{font-size:clamp(24px,3.2vw,38px)}

/* =====================================================================
   RESPONSIVE — tablet & mobile only. Nothing below applies above 1024px
   (except hover:none, which only matches touch devices).
   Breakpoints: 1024 (tablet) · 768 (small tablet / large phone) · 600 (single column) · 480 (phone)
   ===================================================================== */

/* Touch devices: no fixed background (janky on iOS) and no "stuck" hover lift after a tap */
@media(hover:none),(max-width:1024px){
 /* background-attachment:fixed is broken/janky on mobile, and "scroll" stretches the cover image over the whole
    (very tall) page so its bright gold areas land behind text mid-page. A fixed layer keeps the desktop look. */
 body{background-image:none}
 body::after{content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;background:url('images/bg-theme.svg') top center/cover no-repeat}
 body::before{animation:none}
}
@media(hover:none){
 .card:hover,.sector:hover,.why-box:hover,.step:hover,.metric:hover,.contact-box:hover,
 .project-large:hover,.project-small:hover,.photo-grid img:hover,.btn:hover,.wa-float:hover,
 .logo:hover .logo-mark{transform:none}
 .faq-item:hover{padding-left:0}
}

/* ---------- ≤1024 · TABLET ---------- */
@media(max-width:1024px){
 /* header / navigation */
 .nav{position:relative;gap:12px;min-height:66px}
 .logo{margin-right:auto}
 .menu{display:none}
 .burger{display:block}
 /* Once scrolled, the index page goes back to logo + CTA + burger (lang switch lives in the dropdown); .nav-lang is only for the pre-scroll, nav-free state. */
 html.has-intro header.scrolled .nav-lang{display:none}
 /* pre-scroll on the index page only the pills are visible — center them instead of leaving them squeezed between invisible items */
 html.has-intro header:not(.scrolled) .nav-lang{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1}

 .burger{position:relative;width:44px;height:44px;flex:0 0 44px;padding:0;border:1px solid var(--line);border-radius:var(--radius-sm);background:rgba(207,157,71,.04);font-size:0;color:transparent;-webkit-tap-highlight-color:transparent;transition:border-color .25s ease,background .25s ease}
 .burger::before,.burger::after{content:'';position:absolute;left:12px;right:12px;height:1.5px;border-radius:2px;background:var(--ink);transition:transform .35s var(--ease),top .35s var(--ease),box-shadow .2s ease,background .25s ease}
 .burger::before{top:14px;box-shadow:0 6.5px 0 var(--ink)}
 .burger::after{top:27px}
 .burger:hover,.burger[aria-expanded="true"]{border-color:var(--gold-deep);background:rgba(207,157,71,.1)}
 .burger[aria-expanded="true"]::before{top:20.5px;transform:rotate(45deg);box-shadow:0 0 0 transparent;background:var(--gold-bright)}
 .burger[aria-expanded="true"]::after{top:20.5px;transform:rotate(-45deg);background:var(--gold-bright)}
 .burger:focus-visible{outline:2px solid var(--gold-bright);outline-offset:2px}

 /* dropdown overlays the page instead of pushing it down; scrolls itself on short screens */
 .mobile-menu{position:absolute;top:100%;left:0;right:0;max-height:calc(100vh - 66px);max-height:calc(100svh - 66px);overflow-y:auto;overscroll-behavior:contain;padding-bottom:8px;box-shadow:0 30px 50px -20px rgba(0,0,0,.85)}
 .mobile-menu.open{animation:menuIn .35s var(--ease) both}
 .mobile-menu a{display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:15px 4vw;transition:color .25s ease,background .25s ease}
 .mobile-menu a::after{content:'\2192';color:var(--gold-deep);transition:transform .3s var(--ease),color .25s ease}
 .mobile-menu a:hover,.mobile-menu a:active{color:var(--gold-bright);background:rgba(207,157,71,.05)}
 .mobile-menu a:hover::after{color:var(--gold);transform:translateX(4px)}
 .mobile-menu .lang-switch{flex-wrap:wrap;gap:8px;padding:18px 4vw 12px}
 .mobile-menu .lang-pill{display:inline-flex;align-items:center;justify-content:center;min-width:46px;min-height:38px;padding:8px 12px;border-top:1px solid var(--line);font-size:12px;letter-spacing:.06em}
 .mobile-menu .lang-pill::after{content:none}
 .mobile-menu .lang-pill.active,.mobile-menu .lang-pill.active:hover{border-color:var(--gold);background:var(--gold);color:#100c08}
 .lang-pill{display:inline-flex;align-items:center;min-height:30px}

 /* anchors from the menu land below the sticky header */
 section[id]{scroll-margin-top:66px}

 /* hero: grow with its content instead of clipping it on short screens */
 .hero{height:auto;min-height:100vh;min-height:100svh}
 .hero-grid{row-gap:clamp(12px,2.2vh,22px)}
 .hero-inner{align-items:center;text-align:center}
 .hero-inner h1{text-align:center;font-size:clamp(32px,min(5vw,7.6vh),48px)}
 .hero-inner .lead{margin-left:auto;margin-right:auto}
 .hero-cta{justify-content:center}
 .btn:not(.small){min-height:48px}

 /* layouts */
 .section-head,.projects,.why,.faq-item,.location{grid-template-columns:1fr}
 .section-head{gap:18px;margin-bottom:40px}
 .grid4,.grid3,.metrics,.energy,.contact-grid{grid-template-columns:1fr 1fr}
 /* 3-item rows (sustainability cards, contact boxes) — let the odd one out span the row instead of leaving a hole */
 .grid3>:last-child:nth-child(odd),.contact-grid>:last-child:nth-child(odd){grid-column:1/-1}
 .location{margin-top:40px;padding-top:40px}
 .location-map{min-height:280px}

 /* metrics as a clean 2×2 */
 .metric{padding:24px 20px;border-bottom:1px solid var(--line)}
 .metric:nth-child(odd){padding-left:0}
 .metric:nth-child(2n){border-right:0}
 .metric:nth-last-child(-n+2){border-bottom:0}

 /* process: own dark backdrop so the gold background artwork can never wash out the text */
 #process{position:relative;isolation:isolate}
 #process::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 80% 45% at 50% 0%,rgba(207,157,71,.08),transparent 70%),linear-gradient(180deg,rgba(7,6,5,.9),rgba(7,6,5,.95))}
 #process .lead{color:#b9ae9c}
 .step b{color:var(--gold-bright)}
 .step h3{color:var(--ink)}
 .step p{color:#c4baa8}

 /* process as 2 rows × 3 */
 .process{grid-template-columns:repeat(3,1fr)}
 .step{min-height:0;padding-top:22px;padding-bottom:24px}
 .step h3{margin:14px 0 8px}
 .step p{margin:0}
 .step:nth-child(3n+1){padding-left:0}
 .step:nth-child(3n){border-right:0}
 .step:nth-child(-n+3){border-bottom:1px solid var(--line)}
}

/* ---------- ≤768 · SMALL TABLET / LARGE PHONE ---------- */
@media(max-width:768px){
 .nav-actions{display:none}
 h1,h2,h3{overflow-wrap:break-word}
 .lead{font-size:16px}
 .hero-inner .lead{font-size:15px}
 .section-head{margin-bottom:34px}
 .card,.why-box{padding:24px}
 .card .num{padding-bottom:24px}
 .contact-grid{gap:22px;margin-top:36px}
 .contact-box{overflow-wrap:anywhere}
 .contact-box a{display:inline-block;padding:4px 0}
 .foot{flex-direction:column;align-items:center;text-align:center;gap:8px;line-height:1.7}
 .back-link{display:flex;width:fit-content;padding:8px 0;margin-bottom:24px}

 /* lightbox: close button pinned to the viewport so it can never be pushed off-screen */
 .lightbox{padding:12px}
 .lightbox-dialog{max-width:100%;gap:10px}
 .lightbox-img{max-height:70vh;max-height:70svh;border-radius:var(--radius-md)}
 .lightbox-close{position:fixed;top:calc(14px + env(safe-area-inset-top,0px));right:calc(14px + env(safe-area-inset-right,0px));width:44px;height:44px;z-index:2}
 .lightbox-nav{width:44px;height:44px}
 .lightbox-prev{left:6px}
 .lightbox-next{right:6px}
 .lightbox-caption{font-size:16px;padding:0 8px}
}

/* ---------- ≤600 · SINGLE COLUMN ---------- */
@media(max-width:600px){
 section{padding:56px 0}
 .grid4,.grid3,.energy,.contact-grid{grid-template-columns:1fr}
 .grid4,.grid3,.energy{gap:14px}
 .hero-mast .eyebrow{flex-wrap:wrap;row-gap:6px}
 .hero-mast .eyebrow::before{display:none}

 .card{min-height:0}
 .card h3{font-size:21px}
 .sector,.energy .sector{min-height:220px;padding:22px}
 .why-box{min-height:0}
 .why-box h3{font-size:22px}

 /* process as a compact numbered list instead of six tall boxes */
 .process{grid-template-columns:1fr}
 .step,.step:nth-child(n){display:grid;grid-template-columns:38px 1fr;column-gap:16px;align-items:start;min-height:0;padding:18px 0;border-right:0;border-bottom:1px solid var(--line)}
 .step:last-child{border-bottom:0}
 /* step number as a small gold badge */
 .step b{grid-row:1/3;display:flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid rgba(207,157,71,.45);border-radius:50%;background:rgba(207,157,71,.08);font-size:11px;letter-spacing:.06em}
 .step h3{margin:7px 0 4px;font-size:19px;line-height:1.2}
 .step p{grid-column:2;margin:0;font-size:14px;line-height:1.55}

 .photo-grid{grid-template-columns:1fr;gap:14px}

 .wa-float{width:52px;height:52px;right:calc(14px + env(safe-area-inset-right,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px))}
 .logo-mark{height:40px}
 /* keep footer text clear of the floating WhatsApp button */
 footer{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
}

/* ---------- ≤480 · PHONE ---------- */
@media(max-width:480px){
 .wrap{width:min(1260px,calc(100% - 40px))}
 .hero-grid{width:100%}
 section{padding:52px 0}
 h2{font-size:clamp(28px,8.4vw,36px)}
 .cta h2{font-size:clamp(32px,9.6vw,40px)}
 .cta-compact h2{font-size:clamp(24px,7vw,30px)}
 .lead{font-size:15.5px}

 /* header: tighter pills; on pages without the intro the pills live only in the dropdown (no room next to logo + burger) */
 .lang-switch{gap:5px}
 .nav-lang .lang-pill{padding:4px 8px;min-height:30px}
 html:not(.has-intro) .nav-lang{display:none}
 .mobile-menu a,.mobile-menu .lang-switch{padding-left:20px;padding-right:20px}

 /* hero */
 .hero{padding:clamp(14px,3.2vh,40px) 20px 76px}
 html.has-intro .hero{padding-top:78px}
 .hero-mast .eyebrow{font-size:10px;letter-spacing:.14em;line-height:1.6;padding:8px 14px}
 .hero-inner h1{font-size:clamp(28px,8.2vw,38px);line-height:1.08}
 .hero-cta{width:100%;flex-direction:column;align-items:stretch}

 /* full-width, easy-to-tap primary buttons */
 .hero-cta .btn,.cta .btn,.location-text .btn{width:100%;justify-content:center;text-align:center}

 .section-head{gap:14px;margin-bottom:28px}
 .metric{padding:20px 14px}
 .metric strong{font-size:28px}
 .metric span{font-size:10px;letter-spacing:.1em}
 .location{gap:24px;margin-top:32px;padding-top:32px}
 .location-text h3{font-size:23px}
 .location-map,.location-map iframe{min-height:260px}
 .card,.why-box{padding:22px}
 .contact-grid{margin-top:30px}
 .eyebrow{letter-spacing:.15em}
}

@media(max-height:680px){
 .intro-logo-space{height:clamp(64px,14vh,140px)}
 #introLogo{height:clamp(64px,14vh,140px)}
 .hero-cta{margin-top:clamp(10px,1.6vh,20px)}
}

@keyframes menuIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}