/* ==========================================================
   ESKA 1 — UNIFIED ARCHITECTURAL THEME V3
   2026-09-19
   Purpose: one visual system across every page.
   Loaded after legacy + premium layers.
   ========================================================== */

:root{
  --u-bg:#06111f;
  --u-bg-deep:#030b13;
  --u-bg-2:#081a2a;
  --u-bg-3:#0b2236;
  --u-panel:#0c2235;
  --u-panel-2:#102b42;
  --u-panel-soft:#132f46;
  --u-line:rgba(164,218,240,.14);
  --u-line-strong:rgba(164,218,240,.27);
  --u-blue:#8fd3eb;
  --u-blue-2:#c5edf8;
  --u-blue-3:#5eb6d7;
  --u-text:#edf8fc;
  --u-text-soft:#c4d7e0;
  --u-muted:#8fa8b5;
  --u-muted-2:#6f8997;
  --u-shadow:0 24px 70px rgba(0,0,0,.26);
  --u-shadow-soft:0 16px 46px rgba(0,0,0,.16);
  --u-radius:18px;
  --u-radius-sm:12px;
  --u-ease:cubic-bezier(.22,1,.36,1);
}

/* ---------- Global canvas ---------- */
html{background:var(--u-bg-deep)}
body{
  background:var(--u-bg);
  color:var(--u-text);
}
main{background:var(--u-bg)}
body:before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 88% 8%,rgba(94,182,215,.08),transparent 29rem),
    radial-gradient(circle at 8% 58%,rgba(51,111,151,.07),transparent 34rem),
    var(--u-bg);
}
.wrap{position:relative}
.section{
  position:relative;
  overflow:hidden;
  color:var(--u-text);
  background:var(--u-bg);
  border-top:1px solid var(--u-line);
}
.section:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.22;
  background-image:
    linear-gradient(rgba(162,217,238,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(162,217,238,.022) 1px,transparent 1px);
  background-size:84px 84px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.75),transparent 72%);
}
.section>.wrap{z-index:1}
.section:nth-of-type(even){background:var(--u-bg-2)}
.section:nth-of-type(3n){background:linear-gradient(145deg,#071724,#0a2134)}

.kicker{
  display:inline-flex;
  align-items:center;
  gap:12px;
  color:var(--u-blue)!important;
  font-size:10px;
  font-weight:700;
  letter-spacing:.19em;
}
.kicker:before{
  content:"";
  width:36px;
  height:1px;
  background:linear-gradient(90deg,var(--u-blue),transparent);
}
.display,.display-sm,.hero h1,.page-hero h1,
.intro-copy p,.about-big,.contact-info h2,
.mv-card h3,.form-card h3,.principle h2,
.eska-home-project-copy h3,.project-card-copy h3{
  font-family:Georgia,"Times New Roman",serif!important;
  font-weight:400!important;
}
.display-sm{color:var(--u-text);letter-spacing:-.045em}
.lead,.muted{color:var(--u-text-soft)!important}
p{color:var(--u-text-soft)}
.rule{border-color:var(--u-line)}

/* ---------- Header + navigation ---------- */
.site-header{
  background:linear-gradient(180deg,rgba(3,11,19,.74),rgba(3,11,19,.18),transparent);
}
.site-header.scrolled{
  background:rgba(3,11,19,.97);
  border-bottom:1px solid var(--u-line);
  box-shadow:0 12px 36px rgba(0,0,0,.22);
}
.nav-links a{color:#eaf6fb;opacity:.76}
.nav-links a:hover{color:var(--u-blue-2);opacity:1}
.nav-contact{
  color:var(--u-blue-2);
  border-color:var(--u-line-strong);
  background:#0b2235;
}
.nav-contact:hover{
  color:#fff;
  background:#10304a;
  border-color:rgba(197,237,248,.46);
}
.nav-links .nav-gallery-link{
  background:#0a2032!important;
  border-color:var(--u-line-strong)!important;
  color:var(--u-blue-2)!important;
}
.site-header:not(.scrolled) .nav-links .nav-gallery-link{
  background:rgba(6,19,31,.5)!important;
}
.nav-links .nav-gallery-link:hover,
.nav-links .nav-gallery-link.active,
.site-header:not(.scrolled) .nav-links .nav-gallery-link:hover,
.site-header:not(.scrolled) .nav-links .nav-gallery-link.active{
  background:var(--u-blue)!important;
  border-color:var(--u-blue)!important;
  color:var(--u-bg)!important;
}

/* ---------- Hero system: same on every page ---------- */
.hero,.page-hero{
  border-bottom:1px solid var(--u-line);
  background-color:var(--u-bg-deep);
}
.page-hero{min-height:66svh}
.hero:before,.page-hero:before{
  background:
    linear-gradient(90deg,rgba(2,8,15,.9) 0%,rgba(3,14,25,.67) 46%,rgba(3,14,25,.2) 80%),
    linear-gradient(0deg,rgba(3,11,19,.78),transparent 60%);
}
.hero:after,.page-hero:after{
  opacity:.56;
  background-size:80px 80px;
}
.hero-meta{
  padding-bottom:16px;
  border-bottom:1px solid rgba(197,237,248,.16);
  color:var(--u-blue-2);
  opacity:.75;
}
.hero h1,.page-hero h1{
  color:#f3fbfe;
  text-shadow:0 12px 45px rgba(0,0,0,.28);
}
.hero h1 em{color:var(--u-blue)}
.hero-copy{color:#c8dce5}
.page-hero .hero-inner{z-index:2}

/* ---------- Buttons ---------- */
.btn,.project-action{
  border-radius:999px;
  transition:transform .32s var(--u-ease),background .25s ease,border-color .25s ease,color .25s ease;
}
.btn-light,.project-action-primary,.contact-cta .btn-dark{
  background:var(--u-blue-2)!important;
  border-color:var(--u-blue-2)!important;
  color:var(--u-bg)!important;
}
.btn-light:hover,.project-action-primary:hover,.contact-cta .btn-dark:hover{
  background:#e5f8fd!important;
  border-color:#e5f8fd!important;
}
.btn-dark{
  background:var(--u-panel-2);
  border-color:var(--u-line-strong);
  color:var(--u-text);
}
.btn-ghost,.contact-cta .btn:not(.btn-dark){
  color:var(--u-blue-2)!important;
  border-color:rgba(197,237,248,.34)!important;
  background:rgba(255,255,255,.025)!important;
}
.btn-ghost:hover,.contact-cta .btn:not(.btn-dark):hover{
  background:rgba(143,211,235,.08)!important;
  border-color:var(--u-blue)!important;
}

/* ---------- Generic section heads ---------- */
.section-head,.gallery-head,.portfolio-group-head{
  position:relative;
}
.section-head:before,.gallery-head:before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-24px;
  height:1px;
  background:linear-gradient(90deg,var(--u-line-strong),transparent 72%);
}
.section-head p,.light-head p,.portfolio-group-head p{
  color:var(--u-muted)!important;
}
.intro-grid{
  align-items:center;
}
.intro-grid>.kicker,.intro-grid>div:first-child{
  align-self:start;
}
.intro-copy{
  position:relative;
  padding:34px 0 34px 44px;
  border-left:1px solid var(--u-line-strong);
}
.intro-copy:before{
  content:"";
  position:absolute;
  left:-2px;
  top:34px;
  width:3px;
  height:54px;
  background:var(--u-blue);
  box-shadow:0 0 22px rgba(143,211,235,.35);
}
.intro-copy p{
  color:#deedf3;
  font-size:clamp(28px,3.1vw,48px);
}
.intro-copy p span{color:var(--u-blue)}

/* ---------- HOME: services ---------- */
.service-section,.process-section{
  background:var(--u-bg)!important;
}
.service-grid{
  gap:14px;
  border:0;
}
.service-grid article{
  position:relative;
  min-height:260px;
  padding:30px;
  overflow:hidden;
  border:1px solid var(--u-line)!important;
  border-radius:var(--u-radius);
  background:
    linear-gradient(145deg,rgba(18,47,70,.9),rgba(8,27,43,.96))!important;
  box-shadow:var(--u-shadow-soft);
}
.service-grid article:after{
  content:"";
  position:absolute;
  inset:auto -45px -65px auto;
  width:150px;
  height:150px;
  border:1px solid rgba(143,211,235,.11);
  border-radius:50%;
}
.service-grid article>span{
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border:1px solid var(--u-line-strong);
  border-radius:50%;
  color:var(--u-blue)!important;
  background:#0a2134;
}
.service-grid h3{
  color:var(--u-text);
  font-size:27px;
  margin:50px 0 13px;
}
.service-grid p{color:var(--u-muted)!important}
.service-grid article:hover{
  background:linear-gradient(145deg,#14334c,#0b263b)!important;
  border-color:rgba(143,211,235,.32)!important;
  box-shadow:0 30px 68px rgba(0,0,0,.26);
}

/* ---------- HOME: process ---------- */
.process-grid{
  gap:14px;
  border:0;
  background:transparent;
}
.process-grid article{
  position:relative;
  min-height:270px;
  padding:32px;
  overflow:hidden;
  border:1px solid var(--u-line);
  border-radius:var(--u-radius);
  background:linear-gradient(160deg,#0a1e30,#0c263b)!important;
}
.process-grid article:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:3px;
  transform:scaleX(.18);
  transform-origin:left;
  background:linear-gradient(90deg,var(--u-blue),transparent);
  transition:transform .45s var(--u-ease);
}
.process-grid article:hover:before{transform:scaleX(1)}
.process-grid b{
  color:var(--u-blue)!important;
  font-size:11px;
}
.process-grid h3{
  color:var(--u-text);
  margin:46px 0 14px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:31px;
  font-weight:400;
}
.process-grid p{color:var(--u-muted)!important}

/* ---------- HOME: projects ---------- */
.project-stage{
  background:linear-gradient(155deg,#061421,#071a2a 52%,#0a2236)!important;
}
.eska-home-project{
  border-radius:var(--u-radius);
  border-color:var(--u-line)!important;
  box-shadow:var(--u-shadow);
}
.eska-home-project:after{border-radius:calc(var(--u-radius) - 8px)}
.eska-project-status{
  color:var(--u-blue-2);
  border-color:var(--u-line-strong);
  background:#071a2a;
}
.eska-home-project-copy small{color:var(--u-blue)!important}
.eska-home-project-copy p{color:#b7cbd5}
.eska-project-all{color:var(--u-muted)}
.eska-project-all .mini-link,.eska-home-project-copy .mini-link{color:var(--u-blue-2)}

/* ---------- HOME: manifesto ---------- */
.manifesto{
  background:linear-gradient(145deg,#091c2d,#0c2940)!important;
}
.manifesto-line{
  color:#e6f4f9!important;
  opacity:.94;
}
.manifesto-line.alt{
  color:transparent!important;
  -webkit-text-stroke:1px rgba(143,211,235,.32)!important;
}
.principle{
  padding:42px;
  border:1px solid var(--u-line);
  border-radius:var(--u-radius);
  background:linear-gradient(145deg,#0d263a,#0a2032);
  box-shadow:var(--u-shadow-soft);
}
.principle-no{color:var(--u-blue)}
.principle h2{color:#edf8fc}
.principle p{color:var(--u-muted)!important}

/* ---------- Stats ---------- */
.stats{
  background:linear-gradient(145deg,#071928,#0a263b)!important;
}
.stats .section-head p{color:var(--u-muted)!important}
.stats-grid{
  gap:12px;
  border:0;
}
.stat{
  position:relative;
  min-height:220px;
  padding:30px;
  border:1px solid var(--u-line)!important;
  border-radius:var(--u-radius);
  background:linear-gradient(155deg,#0d2a40,#091f31);
  overflow:hidden;
}
.stat:before{
  content:"";
  position:absolute;
  right:-42px;
  top:-42px;
  width:110px;
  height:110px;
  border-radius:50%;
  border:1px solid rgba(143,211,235,.12);
}
.stat strong{color:var(--u-blue-2)}
.stat span{color:var(--u-muted)!important}

/* ---------- Founder / about feature ---------- */
.founder-teaser{
  padding:14px;
  gap:0;
  border:1px solid var(--u-line);
  border-radius:calc(var(--u-radius) + 4px);
  background:linear-gradient(135deg,#0a1f31,#0e2c43);
  box-shadow:var(--u-shadow);
}
.founder-photo{
  min-height:620px;
  border-radius:var(--u-radius);
  background:#102d43!important;
}
.founder-copy{
  padding:clamp(36px,5vw,78px);
}
.founder-copy h2{color:var(--u-text)}
.founder-copy p{color:var(--u-muted)!important}

/* ---------- Gallery shared ---------- */
.gallery-section,.gallery-page-section{
  background:var(--u-bg-2)!important;
}
.gallery-grid{gap:14px}
.gallery-btn{
  position:relative;
  border:1px solid var(--u-line);
  border-radius:var(--u-radius-sm);
  background:#071725;
  box-shadow:var(--u-shadow-soft);
}
.gallery-btn:after{
  content:"↗";
  position:absolute;
  right:14px;
  bottom:14px;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:var(--u-bg);
  background:var(--u-blue-2);
  opacity:0;
  transform:translateY(8px);
  transition:.3s var(--u-ease);
}
.gallery-btn:hover:after{opacity:1;transform:none}
.gallery-page-head{
  padding:38px;
  border:1px solid var(--u-line);
  border-radius:var(--u-radius);
  background:linear-gradient(145deg,#0d2b42,#0a2032);
}
.gallery-page-head>div:last-child{
  border-color:var(--u-line)!important;
}
.gallery-page-head strong{color:var(--u-blue-2)}
.gallery-page-head span,.gallery-page-head p{color:var(--u-muted)!important}
.gallery-page-grid{gap:14px}
.gallery-page-item{
  border:1px solid var(--u-line);
  border-radius:var(--u-radius);
  background:#071725;
  box-shadow:var(--u-shadow-soft);
}
.gallery-page-item:before{
  content:"";
  position:absolute;
  inset:12px;
  z-index:2;
  border:1px solid transparent;
  border-radius:calc(var(--u-radius) - 7px);
  pointer-events:none;
  transition:border-color .35s ease;
}
.gallery-page-item:hover:before{border-color:rgba(197,237,248,.28)}
.gallery-page-item span{
  color:#edf8fc!important;
  font-weight:600;
  text-shadow:0 3px 18px rgba(0,0,0,.55);
}

/* ---------- Projects page ---------- */
.project-browser{
  background:linear-gradient(150deg,#061421,#081b2b 52%,#0a2235)!important;
}
.portfolio-jump{
  border-color:var(--u-line)!important;
  background:var(--u-line)!important;
}
.portfolio-jump a{
  background:linear-gradient(145deg,#0b2438,#081b2b)!important;
}
.portfolio-jump a:hover{
  background:var(--u-blue)!important;
  color:var(--u-bg)!important;
}
.project-filter{
  background:rgba(5,17,29,.97)!important;
  border-color:var(--u-line)!important;
}
.project-filter button{
  border-color:var(--u-line-strong)!important;
  color:var(--u-text-soft)!important;
  background:#0a2032!important;
}
.project-filter button:hover{
  border-color:var(--u-blue)!important;
  color:#fff!important;
}
.project-filter button.active{
  background:var(--u-blue)!important;
  border-color:var(--u-blue)!important;
  color:var(--u-bg)!important;
}
.portfolio-group-head{
  padding:30px;
  border:1px solid var(--u-line)!important;
  border-radius:var(--u-radius);
  background:linear-gradient(145deg,#0c263b,#091e30);
}
.portfolio-group-head:before{color:var(--u-blue)!important}
.portfolio-group-head:after{color:var(--u-muted)!important}
.project-browser .project-card{
  border-radius:var(--u-radius);
  border-color:var(--u-line)!important;
  background:#071827;
}
.project-browser .project-card:before{border-radius:calc(var(--u-radius) - 8px)}
.project-card-location{color:var(--u-blue)!important}
.project-browser .project-status{
  color:var(--u-blue-2);
  background:#071a29!important;
  border-color:var(--u-line-strong)!important;
}
.project-browser .project-card-copy h3{color:#f2fbfe}
.project-browser .project-facts{
  border-color:rgba(197,237,248,.15)!important;
}
.project-browser .project-facts b{color:var(--u-muted)!important}
.project-browser .project-facts span{color:#dcebf1!important}
.project-action-secondary{
  color:var(--u-blue-2)!important;
  border-color:var(--u-line-strong)!important;
  background:#0a2032!important;
}

/* ---------- About page ---------- */
.about-grid{
  padding:clamp(34px,4vw,58px);
  border:1px solid var(--u-line);
  border-radius:var(--u-radius);
  background:linear-gradient(145deg,#0d2a40,#091f31);
  box-shadow:var(--u-shadow-soft);
}
.about-big{color:#edf8fc}
.about-text p{color:var(--u-muted)!important}

.mv-grid{
  gap:14px;
  border:0;
}
.mv-card{
  position:relative;
  min-height:350px;
  padding:42px;
  border:1px solid var(--u-line)!important;
  border-radius:var(--u-radius);
  background:linear-gradient(150deg,#0d2a40,#091e30);
  overflow:hidden;
}
.mv-card:after{
  content:"";
  position:absolute;
  width:160px;
  height:160px;
  right:-65px;
  bottom:-65px;
  border-radius:50%;
  border:1px solid rgba(143,211,235,.12);
}
.mv-card h3{color:#edf8fc;font-size:46px}
.mv-card p{color:var(--u-muted)!important}

.values-section{
  background:var(--u-bg)!important;
}
.values-grid{
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  border:0;
}
.values-grid article{
  position:relative;
  min-height:280px;
  padding:30px;
  border:1px solid var(--u-line)!important;
  border-radius:var(--u-radius);
  background:linear-gradient(150deg,#0c263a,#091d2e);
}
.values-grid article>span{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:50%;
  border:1px solid var(--u-line-strong);
  color:var(--u-blue)!important;
  background:#0a2134;
}
.values-grid h3{
  margin:48px 0 14px;
  color:var(--u-text);
  font-family:Georgia,"Times New Roman",serif;
  font-size:29px;
  font-weight:400;
}
.values-grid p{color:var(--u-muted)!important}
.values-grid article:hover{
  background:linear-gradient(145deg,#113149,#0b263b)!important;
  border-color:rgba(143,211,235,.3)!important;
}

.sustainability-section{
  background:linear-gradient(145deg,#081b2b,#0b263a)!important;
}
.sustainability-grid{
  padding:clamp(36px,5vw,70px);
  border:1px solid var(--u-line);
  border-radius:var(--u-radius);
  background:linear-gradient(145deg,#0d2a40,#091e2f);
  box-shadow:var(--u-shadow-soft);
}
.sustainability-copy p{color:var(--u-muted)!important}

/* ---------- Contact page ---------- */
.page-contact main{background:var(--u-bg)}
.page-contact main>.section{
  background:linear-gradient(150deg,#071725,#091f31)!important;
}
.contact-layout{
  gap:22px;
  align-items:stretch;
}
.contact-info,.form-card{
  border:1px solid var(--u-line);
  border-radius:var(--u-radius);
  background:linear-gradient(150deg,#0d2a40,#091f31)!important;
  box-shadow:var(--u-shadow-soft);
}
.contact-info{
  padding:clamp(34px,4vw,56px);
}
.contact-info h2{color:#edf8fc}
.contact-items{border-color:var(--u-line)!important}
.contact-item{
  position:relative;
  padding:21px 44px 21px 0;
  border-color:var(--u-line)!important;
  transition:padding .28s var(--u-ease),background .28s ease;
}
.contact-item:after{
  content:"↗";
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  color:var(--u-blue);
  opacity:.6;
}
.contact-item:hover{padding-left:12px}
.contact-item small{color:var(--u-muted)!important}
.contact-item strong{color:var(--u-blue-2)}

.form-card{
  padding:clamp(34px,4vw,56px);
}
.form-card h3{color:#edf8fc;font-size:44px}
.form-card>p{color:var(--u-muted)!important}
.field label{color:var(--u-blue)!important}
.field input,.field select,.field textarea{
  color:#eaf6fb!important;
  border-bottom-color:rgba(164,218,240,.22)!important;
}
.field input::placeholder,.field textarea::placeholder{color:#6d8897}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--u-blue)!important;
}
.field select{background:#0d2a40!important}
.form-status.ok{color:#8fe0bd}
.form-status.err{color:#f1a3a3}
.map-wrap{
  overflow:hidden;
  margin-top:22px;
  border:1px solid var(--u-line);
  border-radius:var(--u-radius);
  background:#071725;
  box-shadow:var(--u-shadow-soft);
}
.map-wrap iframe{
  filter:grayscale(.2) saturate(.75) contrast(1.05);
}

/* ---------- CTA ---------- */
.contact-cta{
  background:linear-gradient(145deg,#071827,#0a263c 62%,#0b3049)!important;
}
.contact-cta:after{
  opacity:.26;
  background-size:72px 72px;
}
.contact-cta .display-sm{color:#f0fafe}

/* ---------- Footer ---------- */
.footer{
  background:linear-gradient(160deg,#020911,#061522)!important;
  border-top:1px solid var(--u-line);
}
.footer-top{
  padding:46px;
  border:1px solid var(--u-line);
  border-radius:var(--u-radius);
  background:linear-gradient(145deg,rgba(13,42,64,.58),rgba(5,18,30,.62));
}
.footer-brand p,.footer-col a,.footer-col p{color:#98afba!important}
.footer-col h4{color:var(--u-blue)!important}
.footer-col a:hover{color:var(--u-blue-2)!important}
.footer-gallery{
  gap:10px;
  border-color:var(--u-line)!important;
}
.footer-gallery button{
  border:1px solid var(--u-line);
  border-radius:10px;
}
.footer-bottom{color:#6f8793!important}

/* ---------- Lightbox + utility ---------- */
.lightbox{background:rgba(2,8,14,.97)!important}
.lb-btn{
  color:var(--u-blue-2)!important;
  border-color:var(--u-line-strong)!important;
  background:#0b2336!important;
}
.lb-count{color:var(--u-muted)!important}
.backtop{
  background:#0a2135!important;
  color:var(--u-blue-2)!important;
  border:1px solid var(--u-line-strong)!important;
}

/* ---------- Motion polish ---------- */
.service-grid article,.process-grid article,.values-grid article,
.mv-card,.stat,.contact-info,.form-card,.gallery-page-head,
.about-grid,.sustainability-grid{
  transition:transform .42s var(--u-ease),border-color .3s ease,box-shadow .42s var(--u-ease),background .3s ease;
}
.service-grid article:hover,.process-grid article:hover,.values-grid article:hover,
.mv-card:hover,.stat:hover{
  transform:translateY(-6px);
  border-color:rgba(143,211,235,.28)!important;
}

/* ---------- Page-specific parity ---------- */
.page-gallery .gallery-page-section,
.page-about main>.section,
.page-contact main>.section,
.page-projects main>.section{
  color:var(--u-text);
}
.page-gallery .contact-cta,
.page-about .contact-cta,
.page-projects .contact-cta{
  border-top:1px solid var(--u-line);
}

/* ---------- Responsive ---------- */
@media(max-width:1100px){
  .service-grid{grid-template-columns:repeat(2,1fr)}
  .values-grid{grid-template-columns:repeat(2,1fr)}
  .footer-top{padding:34px}
}
@media(max-width:760px){
  .section{padding:82px 0}
  .intro-copy{padding:26px 0 26px 24px}
  .section-head:before,.gallery-head:before{bottom:-16px}
  .service-grid,.values-grid{grid-template-columns:1fr}
  .service-grid article,.values-grid article,.process-grid article{min-height:0}
  .principle{padding:28px 22px}
  .stats-grid{grid-template-columns:1fr}
  .stat{min-height:170px}
  .founder-teaser{padding:8px}
  .founder-copy{padding:34px 22px}
  .founder-photo{min-height:460px}
  .gallery-page-head{padding:26px 22px}
  .about-grid,.sustainability-grid{padding:28px 22px}
  .mv-card{padding:30px 24px;min-height:290px}
  .mv-card h3{font-size:38px}
  .contact-info,.form-card{padding:30px 22px}
  .form-card h3{font-size:38px}
  .footer-top{padding:28px 22px}
}
@media(max-width:640px){
  .page-hero{min-height:58svh}
  .service-grid,.process-grid,.values-grid,.stats-grid{gap:10px}
  .portfolio-group-head{padding:24px 20px}
  .gallery-page-grid{gap:10px}
  .gallery-page-item,.gallery-page-item.gallery-feature{border-radius:14px}
  .contact-layout{gap:14px}
}


/* V3 final consistency fixes */
.form-card .btn-dark{
  background:var(--u-blue-2)!important;
  border-color:var(--u-blue-2)!important;
  color:var(--u-bg)!important;
}
.form-card .btn-dark:hover{
  background:#e4f8fd!important;
  border-color:#e4f8fd!important;
}
.mobile-menu{
  background:linear-gradient(160deg,#030b13 0%,#071b2b 58%,#0b2940 100%)!important;
  color:var(--u-text)!important;
}
.mobile-menu a{
  color:#eaf6fb!important;
  border-color:var(--u-line)!important;
}
.mobile-menu a:hover{color:var(--u-blue)!important}
.mobile-menu .nav-gallery-link{
  border-color:var(--u-line-strong)!important;
  background:#0a2032!important;
  color:var(--u-blue-2)!important;
}

/* ==========================================================
   V3 HERO / SECTION SEAM FIX — 2026-09-19
   Remove hard horizontal seam between photographic hero and theme.
   ========================================================== */

/* No hard rule under hero imagery */
.hero,
.page-hero{
  border-bottom:0!important;
}

/* Global section separators were creating visible seams.
   Cards and internal blocks already carry their own borders. */
.section{
  border-top:0!important;
}

/* First themed section after every hero must visually grow out of the image */
.hero + .section,
.page-hero + .section{
  margin-top:-2px;
  position:relative;
  background:
    linear-gradient(
      180deg,
      #071522 0,
      #071827 72px,
      #071a2a 150px,
      var(--u-bg) 260px
    )!important;
}

/* Soft transition veil instead of a line */
.hero + .section:before,
.page-hero + .section:before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:190px;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(
      180deg,
      rgba(143,211,235,.025) 0%,
      rgba(9,30,47,.12) 25%,
      rgba(7,24,39,.55) 58%,
      rgba(6,17,31,0) 100%
    );
}

/* Existing grid texture must fade in, never form a horizontal edge */
.hero + .section:after,
.page-hero + .section:after{
  opacity:.08!important;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.16),rgba(0,0,0,.08) 38%,transparent 80%)!important;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.16),rgba(0,0,0,.08) 38%,transparent 80%)!important;
}

.hero + .section > .wrap,
.page-hero + .section > .wrap{
  position:relative;
  z-index:1;
}

/* Home hero needs the same seamless handoff to its first section */
.page-home .hero-home + .section{
  background:
    linear-gradient(180deg,#071522 0,#071827 84px,#071a2a 165px,var(--u-bg) 270px)!important;
}

/* Mobile: shorter transition so no empty dark band appears */
@media(max-width:760px){
  .hero + .section,
  .page-hero + .section,
  .page-home .hero-home + .section{
    background:linear-gradient(180deg,#071522 0,#071827 54px,var(--u-bg) 150px)!important;
  }
  .hero + .section:before,
  .page-hero + .section:before{
    height:120px;
  }
}

/* ==========================================================
   V3 FLUID / FULL-VIEWPORT LAYOUT — 2026-09-19
   Use the available screen instead of stacking content inside
   a fixed centered 1380px container.
   ========================================================== */

:root{
  --page-gutter:clamp(22px,3.6vw,86px);
  --section-space:clamp(76px,7vw,150px);
  --section-space-sm:clamp(52px,5vw,100px);
  --content-gap:clamp(20px,3.4vw,76px);
}

/* Full-width layout shell */
.wrap{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding-left:var(--page-gutter)!important;
  padding-right:var(--page-gutter)!important;
}

.section{
  padding-top:var(--section-space)!important;
  padding-bottom:var(--section-space)!important;
}

/* Header uses full viewport width too */
.nav{
  width:100%;
  max-width:none;
}

/* Hero content scales with the viewport instead of a fixed content block */
.hero-inner,
.page-hero .hero-inner{
  width:100%;
}
.hero h1{
  max-width:min(78vw,1500px)!important;
  font-size:clamp(54px,6.4vw,132px)!important;
}
.page-hero h1{
  max-width:min(76vw,1450px)!important;
  font-size:clamp(50px,5.8vw,116px)!important;
}
.hero-copy{
  max-width:min(42vw,760px)!important;
  font-size:clamp(16px,1.05vw,22px)!important;
}

/* Common content blocks spread across available space */
.intro-grid,
.section-head,
.portfolio-group-head,
.about-grid,
.contact-layout,
.sustainability-grid,
.founder-teaser,
.contact-cta-grid{
  gap:var(--content-gap)!important;
}

.intro-grid{
  grid-template-columns:minmax(220px,.7fr) minmax(0,1.7fr)!important;
}
.intro-copy{
  max-width:none!important;
}
.intro-copy p{
  max-width:min(74vw,1500px)!important;
}

.section-head{
  grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr)!important;
}
.section-head p{
  max-width:min(32vw,680px)!important;
}

/* Cards use whole page width */
.service-grid{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
}
.process-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
.values-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
.stats-grid{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
}

/* Home portfolio becomes genuinely wide-screen editorial */
.eska-home-projects{
  grid-template-columns:repeat(12,minmax(0,1fr))!important;
  gap:clamp(14px,1.25vw,30px)!important;
}
.eska-home-project:nth-child(1){grid-column:span 7!important}
.eska-home-project:nth-child(2){grid-column:span 5!important}
.eska-home-project:nth-child(3){grid-column:3/span 8!important}
.eska-home-project{
  min-height:clamp(540px,39vw,860px)!important;
}
.eska-home-project:nth-child(3){
  min-height:clamp(500px,32vw,720px)!important;
}

/* Project browser uses more horizontal real estate */
.project-browser .current-projects{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
.project-browser .completed-projects{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
.project-browser .project-card,
.project-browser .project-card.wide{
  width:100%;
}

/* Gallery fills wide monitors */
.gallery-page-grid{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
}
.gallery-page-item.gallery-feature{
  grid-column:span 2!important;
}
.gallery-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}

/* About and contact use full width with balanced columns */
.about-grid{
  grid-template-columns:minmax(320px,.8fr) minmax(0,1.5fr)!important;
}
.sustainability-grid{
  grid-template-columns:minmax(280px,.75fr) minmax(0,1.35fr)!important;
}
.founder-teaser{
  grid-template-columns:minmax(420px,.9fr) minmax(0,1.1fr)!important;
}
.contact-layout{
  grid-template-columns:minmax(360px,.72fr) minmax(0,1.28fr)!important;
}
.contact-cta-grid{
  grid-template-columns:minmax(0,1.3fr) minmax(340px,.7fr)!important;
}

/* Footer also spans the viewport */
.footer .wrap{
  width:100%!important;
  max-width:none!important;
}
.footer-top{
  grid-template-columns:minmax(360px,1.35fr) minmax(180px,.65fr) minmax(250px,.8fr)!important;
  gap:clamp(34px,4vw,90px)!important;
}

/* Typography scales continuously with desktop width */
.display-sm{
  font-size:clamp(38px,3.55vw,76px)!important;
}
.about-big{
  font-size:clamp(36px,3.3vw,70px)!important;
}
.principle h2{
  font-size:clamp(38px,3.9vw,82px)!important;
}

/* Ultra-wide screens: use the space, but keep text readable */
@media(min-width:1920px){
  :root{--page-gutter:clamp(72px,4.2vw,132px)}
  .service-grid,.process-grid,.values-grid,.stats-grid{gap:clamp(16px,1vw,28px)}
  .gallery-page-grid{gap:clamp(14px,.9vw,24px)}
  .project-browser .completed-projects{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .project-browser .project-card{aspect-ratio:4/5.25}
  .footer-gallery{grid-template-columns:repeat(8,minmax(0,1fr))}
}

/* Medium laptops / small desktop */
@media(max-width:1280px){
  :root{--page-gutter:clamp(24px,3vw,44px)}
  .service-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .values-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .gallery-page-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .project-browser .completed-projects{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .hero h1,.page-hero h1{max-width:90vw!important}
}

/* Tablet */
@media(max-width:1000px){
  :root{
    --page-gutter:clamp(20px,4vw,38px);
    --section-space:clamp(68px,8vw,96px);
  }
  .intro-grid,.section-head,.portfolio-group-head,.about-grid,
  .sustainability-grid,.founder-teaser,.contact-layout,.contact-cta-grid{
    grid-template-columns:1fr!important;
  }
  .section-head p,.hero-copy{max-width:760px!important}
  .process-grid{grid-template-columns:1fr!important}
  .gallery-page-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .eska-home-project:nth-child(1),
  .eska-home-project:nth-child(2){grid-column:span 6!important}
  .eska-home-project:nth-child(3){grid-column:3/span 8!important}
  .footer-top{grid-template-columns:1fr 1fr!important}
  .footer-brand{grid-column:1/-1!important}
}

/* Phones */
@media(max-width:640px){
  :root{
    --page-gutter:14px;
    --section-space:70px;
  }
  .wrap{padding-left:14px!important;padding-right:14px!important}
  .hero h1,.page-hero h1{max-width:100%!important}
  .hero-copy{max-width:100%!important}
  .service-grid,.values-grid,.stats-grid,
  .project-browser .current-projects,.project-browser .completed-projects,
  .gallery-page-grid,.gallery-grid{
    grid-template-columns:1fr!important;
  }
  .eska-home-projects{grid-template-columns:1fr!important}
  .eska-home-project:nth-child(1),
  .eska-home-project:nth-child(2),
  .eska-home-project:nth-child(3){
    grid-column:auto!important;
    min-height:0!important;
    aspect-ratio:4/5;
  }
  .gallery-page-item.gallery-feature{grid-column:auto!important}
  .footer-top{grid-template-columns:1fr!important}
  .footer-brand{grid-column:auto!important}
}

/* ==========================================================
   CURRENT PROJECTS PROPORTION FIX — 2026-09-19
   Keep the page fluid, but stop the two active projects from
   turning into oversized portrait billboards on wide screens.
   ========================================================== */

/* Section heading: more compact and architectural */
#ongoing-section .portfolio-group-head{
  padding:22px 26px!important;
  margin-bottom:28px!important;
  min-height:0!important;
}
#ongoing-section .portfolio-group-head .display-sm{
  font-size:clamp(34px,2.8vw,58px)!important;
}
#ongoing-section .portfolio-group-head>p{
  margin-top:8px!important;
  font-size:13px!important;
  line-height:1.55!important;
  max-width:520px!important;
}

/* Two active projects = landscape showcase cards */
.project-browser .current-projects{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:clamp(14px,1.2vw,24px)!important;
}
.project-browser .current-projects .project-card,
.project-browser .current-projects .project-card.wide{
  aspect-ratio:auto!important;
  height:clamp(390px,28vw,560px)!important;
  min-height:0!important;
  max-height:560px!important;
}
.project-browser .current-projects .project-card img{
  object-fit:cover!important;
}
.project-browser .current-projects .project-card-copy{
  padding:clamp(22px,2vw,32px)!important;
}
.project-browser .current-projects .project-card-copy h3{
  font-size:clamp(30px,2.6vw,48px)!important;
  max-width:720px;
}

/* Do not let ultra-wide monitors enlarge them again */
@media(min-width:1920px){
  .project-browser .current-projects .project-card,
  .project-browser .current-projects .project-card.wide{
    height:540px!important;
    max-height:540px!important;
    aspect-ratio:auto!important;
  }
}

/* Tablet: one generous landscape card per row */
@media(max-width:1050px){
  .project-browser .current-projects{
    grid-template-columns:1fr!important;
  }
  .project-browser .current-projects .project-card,
  .project-browser .current-projects .project-card.wide{
    height:clamp(380px,55vw,540px)!important;
    max-height:540px!important;
  }
}

/* Phone: compact card, still image-led but not an endless portrait */
@media(max-width:640px){
  #ongoing-section .portfolio-group-head{
    padding:20px 18px!important;
    margin-bottom:20px!important;
  }
  .project-browser .current-projects .project-card,
  .project-browser .current-projects .project-card.wide{
    aspect-ratio:auto!important;
    height:clamp(360px,112vw,480px)!important;
    max-height:480px!important;
  }
}

/* ==========================================================
   CONTENT WIDTH TUNING — 2026-09-19
   Full-bleed backgrounds stay viewport-wide.
   Content itself is inset 15% from left and right on desktop.
   ========================================================== */

@media(min-width:1281px){
  .wrap{
    width:70vw!important;
    max-width:none!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:0!important;
    padding-right:0!important;
  }

  /* Header and footer content use the same 70vw rhythm */
  .nav,
  .footer .wrap{
    width:70vw!important;
    max-width:none!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:0!important;
    padding-right:0!important;
  }

  /* Keep hero imagery full bleed, only its content is inset */
  .hero,
  .page-hero,
  .section,
  .footer{
    width:100%!important;
  }

  /* Rebalance typography/card density for the narrower canvas */
  .hero h1{
    max-width:100%!important;
    font-size:clamp(54px,5.2vw,108px)!important;
  }
  .page-hero h1{
    max-width:100%!important;
    font-size:clamp(48px,4.8vw,92px)!important;
  }
  .section-head p{
    max-width:560px!important;
  }
  .intro-copy p{
    max-width:100%!important;
  }

  /* The two active projects now fit the new 70vw page width naturally */
  .project-browser .current-projects .project-card,
  .project-browser .current-projects .project-card.wide{
    height:clamp(360px,22vw,500px)!important;
    max-height:500px!important;
  }
}

/* Medium desktop: slightly wider to avoid over-compression */
@media(min-width:1001px) and (max-width:1280px){
  .wrap,
  .nav,
  .footer .wrap{
    width:84vw!important;
    max-width:none!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:0!important;
    padding-right:0!important;
  }
}

/* Tablet/phone continue to use safe fluid gutters */
@media(max-width:1000px){
  .wrap,
  .nav,
  .footer .wrap{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    padding-left:var(--page-gutter)!important;
    padding-right:var(--page-gutter)!important;
  }
}

/* ==========================================================
   FULL-WIDTH SECTION SEPARATORS — 2026-09-19
   Thin architectural rules between content sections.
   Hero-to-first-section transition intentionally remains seamless.
   ========================================================== */

/* Main page sections: full viewport-width rule */
main > .section + .section{
  border-top:1px solid rgba(143,190,214,.28)!important;
}

/* Slightly brighter central hairline, matching the reference look */
main > .section + .section{
  box-shadow:
    inset 0 1px 0 rgba(197,229,241,.035),
    0 -1px 0 rgba(3,13,22,.5);
}

/* Keep hero/image handoff soft — no line directly under any hero */
.hero + .section,
.page-hero + .section{
  border-top:0!important;
  box-shadow:none!important;
}

/* Projects page has two internal portfolio chapters; divide them too */
.project-status-section + .project-status-section{
  position:relative;
  margin-top:clamp(72px,6vw,118px)!important;
  padding-top:clamp(72px,6vw,118px)!important;
}
.project-status-section + .project-status-section:before{
  content:"";
  position:absolute;
  left:calc((100vw - 100%) / -2);
  top:0;
  width:100vw;
  height:1px;
  background:rgba(143,190,214,.28);
  box-shadow:0 -1px 0 rgba(3,13,22,.5);
  pointer-events:none;
}

/* Footer is a major chapter boundary as well */
.footer{
  border-top:1px solid rgba(143,190,214,.28)!important;
}

@media(max-width:1000px){
  main > .section + .section{
    border-top-color:rgba(143,190,214,.22)!important;
  }
  .project-status-section + .project-status-section{
    margin-top:72px!important;
    padding-top:72px!important;
  }
  .project-status-section + .project-status-section:before{
    background:rgba(143,190,214,.22);
  }
}

/* ==========================================================
   COMPACT 9-IMAGE GALLERY SHOWCASE — 2026-09-19
   9 curated images on-page; full 18 remain in the lightbox.
   ========================================================== */
.page-gallery .gallery-page-section{
  padding-top:clamp(68px,5.5vw,110px)!important;
  padding-bottom:clamp(68px,5.5vw,110px)!important;
}
.gallery-showcase{
  overflow:hidden;
  border:1px solid var(--u-line-strong);
  border-radius:22px;
  background:linear-gradient(155deg,#0b2438,#071827 58%,#091f31);
  box-shadow:0 28px 75px rgba(0,0,0,.24);
}
.gallery-showcase .gallery-page-head{
  display:grid!important;
  grid-template-columns:minmax(0,1.35fr) minmax(250px,.65fr)!important;
  gap:clamp(28px,3vw,64px)!important;
  align-items:end!important;
  margin:0!important;
  padding:clamp(26px,3vw,46px)!important;
  border:0!important;
  border-bottom:1px solid var(--u-line)!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.gallery-showcase .gallery-page-head:before{display:none!important}
.gallery-showcase .gallery-page-head>div:last-child{
  padding:0!important;
  border:0!important;
}
.gallery-showcase-copy{
  max-width:760px!important;
  margin:18px 0 0!important;
  color:var(--u-muted)!important;
  line-height:1.7!important;
}
.gallery-showcase-side{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:18px;
}
.gallery-total{
  display:flex;
  align-items:baseline;
  gap:12px;
}
.gallery-total strong{
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(44px,3.4vw,70px)!important;
  line-height:.8!important;
  font-weight:400!important;
  color:var(--u-blue-2)!important;
}
.gallery-total span{
  font-size:10px!important;
  font-weight:700;
  letter-spacing:.14em!important;
  text-transform:uppercase;
  color:var(--u-muted)!important;
}
.gallery-open-all{
  appearance:none;
  cursor:pointer;
  background:var(--u-blue-2)!important;
  border-color:var(--u-blue-2)!important;
  color:var(--u-bg)!important;
}
.gallery-open-all:hover{
  background:#e5f8fd!important;
  border-color:#e5f8fd!important;
}
.gallery-nine-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:1px!important;
  padding:1px!important;
  background:var(--u-line-strong)!important;
}
.gallery-nine-grid .gallery-page-item,
.gallery-nine-grid .gallery-page-item.gallery-feature{
  grid-column:auto!important;
  width:100%;
  min-height:0!important;
  height:clamp(150px,11vw,230px)!important;
  aspect-ratio:auto!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
.gallery-nine-grid .gallery-page-item:before{
  inset:8px!important;
  border-radius:8px!important;
}
.gallery-nine-grid .gallery-page-item img{
  object-fit:cover!important;
}
.gallery-nine-grid .gallery-page-item span{
  left:16px!important;
  bottom:14px!important;
  right:16px;
  font-size:11px!important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.gallery-showcase-foot{
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:18px clamp(24px,3vw,44px);
  border-top:1px solid var(--u-line);
  color:var(--u-muted);
  font-size:10px;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.gallery-text-link{
  appearance:none;
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:0 0 5px;
  border:0;
  border-bottom:1px solid rgba(197,237,248,.45);
  background:transparent;
  color:var(--u-blue-2);
  font:inherit;
  cursor:pointer;
}
.gallery-text-link span{font-size:16px;transition:transform .25s var(--u-ease)}
.gallery-text-link:hover span{transform:translateX(4px)}

@media(max-width:1000px){
  .gallery-showcase .gallery-page-head{
    grid-template-columns:1fr!important;
    align-items:start!important;
  }
  .gallery-showcase-side{align-items:flex-start}
  .gallery-nine-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
  .gallery-nine-grid .gallery-page-item,
  .gallery-nine-grid .gallery-page-item.gallery-feature{
    height:clamp(135px,20vw,210px)!important;
  }
}
@media(max-width:640px){
  .gallery-showcase{border-radius:16px}
  .gallery-showcase .gallery-page-head{padding:24px 18px!important}
  .gallery-showcase-copy{font-size:13px!important;line-height:1.6!important}
  .gallery-open-all{width:100%}
  .gallery-nine-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
  .gallery-nine-grid .gallery-page-item,
  .gallery-nine-grid .gallery-page-item.gallery-feature{
    height:auto!important;
    aspect-ratio:1/1!important;
  }
  .gallery-nine-grid .gallery-page-item span{
    display:none!important;
  }
  .gallery-showcase-foot{
    min-height:0;
    padding:18px;
    flex-direction:column;
    align-items:flex-start;
  }
}

/* ==========================================================
   GALLERY 3x3 SPACING + PROPORTION PASS — 2026-09-19
   Separate thumbnails visually and give them more vertical balance.
   ========================================================== */
.gallery-nine-grid{
  gap:12px!important;
  padding:12px!important;
  background:#071827!important;
}

.gallery-nine-grid .gallery-page-item,
.gallery-nine-grid .gallery-page-item.gallery-feature{
  height:auto!important;
  min-height:0!important;
  aspect-ratio:16/10!important;
  border:1px solid rgba(143,190,214,.24)!important;
  border-radius:10px!important;
  overflow:hidden!important;
  background:#081b2b!important;
  box-shadow:0 10px 28px rgba(0,0,0,.14)!important;
}

.gallery-nine-grid .gallery-page-item:before{
  inset:7px!important;
  border-radius:7px!important;
}

.gallery-nine-grid .gallery-page-item img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}

.gallery-nine-grid .gallery-page-item:after{
  background:linear-gradient(0deg,rgba(2,10,18,.56),rgba(2,10,18,.06) 50%,transparent 72%)!important;
}

@media(max-width:1000px){
  .gallery-nine-grid{
    gap:10px!important;
    padding:10px!important;
  }
  .gallery-nine-grid .gallery-page-item,
  .gallery-nine-grid .gallery-page-item.gallery-feature{
    aspect-ratio:15/10!important;
    height:auto!important;
  }
}

@media(max-width:640px){
  .gallery-nine-grid{
    gap:7px!important;
    padding:7px!important;
  }
  .gallery-nine-grid .gallery-page-item,
  .gallery-nine-grid .gallery-page-item.gallery-feature{
    aspect-ratio:4/3!important;
    height:auto!important;
    border-radius:7px!important;
  }
}

/* ==========================================================
   NAV PRIORITY UPDATE — 2026-09-19
   Projects is the primary navigation pill; gallery is a normal link.
   ========================================================== */
.nav-links .nav-projects-link{
  border:1px solid var(--u-line-strong)!important;
  border-radius:999px;
  padding:9px 14px!important;
  margin:-9px 2px;
  background:#0a2032!important;
  color:var(--u-blue-2)!important;
  opacity:1!important;
  transition:.25s ease;
}
.site-header:not(.scrolled) .nav-links .nav-projects-link{
  background:rgba(6,19,31,.50)!important;
  border-color:rgba(197,237,248,.28)!important;
}
.nav-links .nav-projects-link:hover,
.nav-links .nav-projects-link.active,
.site-header:not(.scrolled) .nav-links .nav-projects-link:hover,
.site-header:not(.scrolled) .nav-links .nav-projects-link.active{
  background:var(--u-blue)!important;
  border-color:var(--u-blue)!important;
  color:var(--u-bg)!important;
}
.nav-links .nav-projects-link:after{display:none!important}

/* Gallery is now a standard navigation item */
.nav-links a[href="galeri.html"]{
  border:0!important;
  border-radius:0!important;
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  color:#eaf6fb!important;
  opacity:.76!important;
}
.nav-links a[href="galeri.html"]:hover{
  color:var(--u-blue-2)!important;
  opacity:1!important;
}

/* Mobile: keep Projects as the emphasized destination */
.mobile-menu .nav-projects-link{
  border:1px solid var(--u-line-strong)!important;
  border-radius:14px;
  padding:12px 14px!important;
  margin:4px 0;
  background:#0a2032!important;
  color:var(--u-blue-2)!important;
}
.mobile-menu a[href="galeri.html"]{
  background:transparent!important;
}

/* ==========================================================
   HOME INTRO FACTS — 2026-09-19
   Fill the left column with restrained corporate facts.
   ========================================================== */
.page-home .intro-side{
  display:flex;
  flex-direction:column;
  align-self:stretch;
  min-height:100%;
}
.page-home .intro-facts{
  width:min(100%,300px);
  margin-top:clamp(42px,4vw,78px);
  border-top:1px solid var(--u-line-strong);
}
.page-home .intro-fact{
  display:grid;
  grid-template-columns:74px 1fr;
  align-items:center;
  gap:18px;
  min-height:76px;
  padding:15px 0;
  border-bottom:1px solid var(--u-line);
}
.page-home .intro-fact strong{
  color:var(--u-blue-2);
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(25px,1.7vw,34px);
  line-height:1;
  font-weight:400;
  letter-spacing:-.035em;
}
.page-home .intro-fact span{
  color:var(--u-muted);
  font-size:9px;
  line-height:1.45;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.page-home .intro-fact-location{
  grid-template-columns:1fr;
  gap:8px;
  padding-top:19px;
  padding-bottom:19px;
}
.page-home .intro-fact-location strong{
  color:#d9edf5;
  font-family:Manrope,Arial,sans-serif;
  font-size:11px;
  line-height:1.5;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
}

@media(max-width:1000px){
  .page-home .intro-facts{
    width:100%;
    max-width:none;
    margin-top:32px;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    border-bottom:1px solid var(--u-line);
  }
  .page-home .intro-fact,
  .page-home .intro-fact-location{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:8px;
    min-height:96px;
    padding:16px 18px;
    border-bottom:0;
    border-right:1px solid var(--u-line);
  }
  .page-home .intro-fact:last-child{border-right:0}
}
@media(max-width:640px){
  .page-home .intro-facts{
    grid-template-columns:1fr;
    margin-top:26px;
  }
  .page-home .intro-fact,
  .page-home .intro-fact-location{
    min-height:72px;
    padding:14px 0;
    border-right:0;
    border-bottom:1px solid var(--u-line);
  }
  .page-home .intro-fact:last-child{border-bottom:0}
}

/* ==========================================================
   HOME MANIFESTO BALANCE — 2026-09-19
   Shift oversized statement inward and use the empty card side.
   ========================================================== */
.page-home .manifesto{
  --manifesto-shift:clamp(38px,6vw,118px);
}
.page-home .manifesto-line{
  width:calc(100% - var(--manifesto-shift))!important;
  margin-left:var(--manifesto-shift)!important;
  margin-right:0!important;
  transform:none!important;
}
.page-home .manifesto-line.alt{
  margin-left:var(--manifesto-shift)!important;
}

.page-home .principle{
  grid-template-columns:64px minmax(0,1.4fr) minmax(245px,.6fr)!important;
  gap:clamp(24px,3vw,56px)!important;
  align-items:stretch!important;
}
.page-home .principle-main{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
}
.page-home .principle-main h2{
  max-width:850px!important;
}
.page-home .principle-main p{
  max-width:700px!important;
}
.page-home .principle-values{
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-left:clamp(24px,2.4vw,44px);
  border-left:1px solid var(--u-line-strong);
}
.page-home .principle-values-label{
  display:block;
  margin-bottom:18px;
  color:var(--u-blue)!important;
  font-size:9px;
  font-weight:700;
  letter-spacing:.17em;
  text-transform:uppercase;
}
.page-home .principle-values>div{
  display:grid;
  grid-template-columns:30px 1fr;
  grid-template-rows:auto auto;
  column-gap:14px;
  padding:18px 0;
  border-top:1px solid var(--u-line);
}
.page-home .principle-values>div:last-child{
  border-bottom:1px solid var(--u-line);
}
.page-home .principle-values b{
  grid-row:1/3;
  align-self:center;
  color:var(--u-blue);
  font-size:9px;
  font-weight:700;
  letter-spacing:.12em;
}
.page-home .principle-values strong{
  color:var(--u-text);
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(18px,1.35vw,26px);
  line-height:1.05;
  font-weight:400;
}
.page-home .principle-values small{
  margin-top:5px;
  color:var(--u-muted);
  font-size:9px;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
}

@media(max-width:1100px){
  .page-home .principle{
    grid-template-columns:52px minmax(0,1fr)!important;
  }
  .page-home .principle-values{
    grid-column:2;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:0;
    margin-top:10px;
    padding:20px 0 0;
    border-left:0;
    border-top:1px solid var(--u-line-strong);
  }
  .page-home .principle-values-label{
    grid-column:1/-1;
  }
  .page-home .principle-values>div{
    padding:14px 16px;
    border-top:0;
    border-right:1px solid var(--u-line);
  }
  .page-home .principle-values>div:last-child{
    border-right:0;
    border-bottom:0;
  }
}
@media(max-width:640px){
  .page-home .manifesto{
    --manifesto-shift:14px;
  }
  .page-home .principle{
    grid-template-columns:1fr!important;
  }
  .page-home .principle-no{grid-column:1}
  .page-home .principle-values{
    grid-column:1;
    grid-template-columns:1fr;
  }
  .page-home .principle-values>div{
    border-right:0;
    border-bottom:1px solid var(--u-line);
  }
}

/* ==========================================================
   CONTACT MAP WIDTH ALIGNMENT — 2026-09-19
   Match map width to the site's content canvas.
   ========================================================== */
.page-contact .map-wrap{
  width:70vw!important;
  max-width:none!important;
  margin:clamp(28px,3vw,52px) auto clamp(70px,6vw,120px)!important;
  border-radius:18px!important;
  overflow:hidden!important;
  border:1px solid var(--u-line-strong)!important;
  box-shadow:0 20px 55px rgba(0,0,0,.18)!important;
}
.page-contact .map-wrap iframe{
  display:block;
  width:100%!important;
  height:clamp(340px,24vw,500px)!important;
  border:0!important;
}

@media(min-width:1001px) and (max-width:1280px){
  .page-contact .map-wrap{
    width:84vw!important;
  }
}

@media(max-width:1000px){
  .page-contact .map-wrap{
    width:calc(100% - (var(--page-gutter) * 2))!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}

@media(max-width:640px){
  .page-contact .map-wrap{
    width:calc(100% - 28px)!important;
    border-radius:14px!important;
    margin-top:20px!important;
    margin-bottom:70px!important;
  }
  .page-contact .map-wrap iframe{
    height:320px!important;
  }
}

/* ==========================================================
   ORIGINAL LOGO COLORS — 2026-09-19
   Legacy CSS forced the real colored logo to white.
   Keep the original silver / green / blue artwork everywhere.
   ========================================================== */
.brand img,
.footer-brand img{
  filter:none!important;
  -webkit-filter:none!important;
  opacity:1!important;
}

/* ==========================================================
   SECTION SEPARATORS — NEON FLOW PASS — 2026-09-19
   Thicker section rules with a subtle left-to-right light sweep.
   ========================================================== */

/* Base separator: slightly thicker and brighter */
main > .section + .section{
  position:relative;
  border-top:2px solid rgba(143,190,214,.30)!important;
  box-shadow:
    inset 0 1px 0 rgba(197,229,241,.05),
    0 -1px 0 rgba(3,13,22,.58),
    0 0 10px rgba(94,182,215,.08)!important;
}

/* The moving neon sweep uses a dedicated pseudo element. */
main > .section + .section:before{
  content:"";
  position:absolute;
  top:-4px;
  left:-20%;
  width:18%;
  height:8px;
  z-index:8;
  pointer-events:none;
  opacity:.92;
  background:linear-gradient(
    90deg,
    rgba(143,211,235,0) 0%,
    rgba(143,211,235,.10) 18%,
    rgba(197,237,248,.92) 50%,
    rgba(143,211,235,.22) 78%,
    rgba(143,211,235,0) 100%
  );
  filter:blur(1.1px);
  box-shadow:
    0 0 10px rgba(197,237,248,.30),
    0 0 22px rgba(94,182,215,.22),
    0 0 34px rgba(94,182,215,.13);
  animation:eskaSectionFlow 6s linear infinite;
}

/* Keep the hero/image handoff deliberately seamless. */
.hero + .section,
.page-hero + .section{
  border-top:0!important;
  box-shadow:none!important;
}
.hero + .section:before,
.page-hero + .section:before{
  animation:none!important;
  opacity:0!important;
}

/* Projects has an internal chapter separator too. */
.project-status-section + .project-status-section:before{
  height:2px!important;
  background:rgba(143,190,214,.30)!important;
  box-shadow:
    0 0 8px rgba(143,211,235,.10),
    0 -1px 0 rgba(3,13,22,.55)!important;
}
.project-status-section + .project-status-section:after{
  content:"";
  position:absolute;
  left:calc((100vw - 100%) / -2 - 20vw);
  top:-3px;
  width:18vw;
  height:8px;
  z-index:8;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(197,237,248,.90),rgba(143,211,235,.20),transparent);
  filter:blur(1.1px);
  box-shadow:0 0 18px rgba(94,182,215,.20);
  animation:eskaProjectSectionFlow 6s linear infinite;
}

.footer{
  border-top:2px solid rgba(143,190,214,.30)!important;
  position:relative;
}
.footer:before{
  content:"";
  position:absolute;
  top:-4px;
  left:-20%;
  width:18%;
  height:8px;
  z-index:8;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(197,237,248,.88),rgba(143,211,235,.18),transparent);
  filter:blur(1.1px);
  box-shadow:0 0 18px rgba(94,182,215,.18);
  animation:eskaSectionFlow 6.6s linear infinite;
}

@keyframes eskaSectionFlow{
  0%{transform:translateX(0);opacity:0}
  7%{opacity:.9}
  50%{opacity:1}
  93%{opacity:.82}
  100%{transform:translateX(700%);opacity:0}
}
@keyframes eskaProjectSectionFlow{
  0%{transform:translateX(0);opacity:0}
  8%{opacity:.9}
  92%{opacity:.85}
  100%{transform:translateX(760%);opacity:0}
}

@media(max-width:760px){
  main > .section + .section,
  .footer{
    border-top-width:1px!important;
  }
  main > .section + .section:before,
  .footer:before,
  .project-status-section + .project-status-section:after{
    height:6px;
    animation-duration:6.8s;
    opacity:.78;
  }
}

@media(prefers-reduced-motion:reduce){
  main > .section + .section:before,
  .footer:before,
  .project-status-section + .project-status-section:after{
    animation:none!important;
    opacity:.18!important;
  }
}

/* ==========================================================
   INLINE NEON SECTION FLOW — 2026-09-19
   The separator itself stays fixed; light moves INSIDE the line.
   No detached glowing bar.
   ========================================================== */

/* Fixed architectural separator */
main > .section + .section,
.footer{
  border-top:2px solid rgba(143,190,214,.24)!important;
  box-shadow:none!important;
}

/* Moving light constrained to the 2px separator itself */
main > .section + .section:before,
.footer:before{
  content:""!important;
  position:absolute!important;
  top:-2px!important;
  left:0!important;
  width:100%!important;
  height:2px!important;
  z-index:8!important;
  pointer-events:none!important;
  opacity:1!important;
  filter:none!important;
  box-shadow:none!important;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      transparent 38%,
      rgba(143,211,235,.18) 44%,
      rgba(218,246,255,.95) 50%,
      rgba(143,211,235,.20) 56%,
      transparent 62%,
      transparent 100%
    ) 0 0 / 28% 100% no-repeat!important;
  animation:eskaInlineLineFlow 5.4s linear infinite!important;
}

/* Hero transition remains seamless */
.hero + .section,
.page-hero + .section{
  border-top:0!important;
}
.hero + .section:before,
.page-hero + .section:before{
  display:none!important;
}

/* Internal project chapter separator uses the same inline effect */
.project-status-section + .project-status-section:before{
  content:""!important;
  position:absolute!important;
  top:0!important;
  left:calc((100vw - 100%) / -2)!important;
  width:100vw!important;
  height:2px!important;
  background:rgba(143,190,214,.24)!important;
  box-shadow:none!important;
}
.project-status-section + .project-status-section:after{
  content:""!important;
  position:absolute!important;
  top:0!important;
  left:calc((100vw - 100%) / -2)!important;
  width:100vw!important;
  height:2px!important;
  z-index:9!important;
  pointer-events:none!important;
  filter:none!important;
  box-shadow:none!important;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      transparent 38%,
      rgba(143,211,235,.18) 44%,
      rgba(218,246,255,.95) 50%,
      rgba(143,211,235,.20) 56%,
      transparent 62%,
      transparent 100%
    ) 0 0 / 28% 100% no-repeat!important;
  animation:eskaInlineLineFlow 5.4s linear infinite!important;
}

@keyframes eskaInlineLineFlow{
  0%{background-position:-40% 0}
  100%{background-position:140% 0}
}

@media(max-width:760px){
  main > .section + .section,
  .footer{
    border-top-width:1px!important;
  }
  main > .section + .section:before,
  .footer:before,
  .project-status-section + .project-status-section:before,
  .project-status-section + .project-status-section:after{
    height:1px!important;
    top:-1px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  main > .section + .section:before,
  .footer:before,
  .project-status-section + .project-status-section:after{
    animation:none!important;
    background:none!important;
  }
}

/* ==========================================================
   SECTION LINE REPAIR — 2026-09-19
   Always-visible 2px line; moving light stays inside that line.
   ========================================================== */

/* Remove the previous moving-bar behavior completely. */
main > .section + .section{
  position:relative!important;
  border-top:0!important;
  box-shadow:none!important;
}

/* One single 2px separator containing both base line + moving highlight. */
main > .section + .section::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  top:0!important;
  left:0!important;
  right:0!important;
  width:100%!important;
  height:2px!important;
  z-index:20!important;
  pointer-events:none!important;
  opacity:1!important;
  filter:none!important;
  box-shadow:none!important;
  background-image:
    linear-gradient(90deg,
      rgba(135,190,214,.34) 0%,
      rgba(135,190,214,.34) 100%
    ),
    linear-gradient(90deg,
      transparent 0%,
      transparent 42%,
      rgba(165,224,245,.32) 46%,
      rgba(230,250,255,1) 50%,
      rgba(165,224,245,.32) 54%,
      transparent 58%,
      transparent 100%
    )!important;
  background-size:100% 100%, 220% 100%!important;
  background-repeat:no-repeat!important;
  background-position:0 0, 120% 0!important;
  animation:eskaLineLightInside 4.8s linear infinite!important;
}

@keyframes eskaLineLightInside{
  0%{background-position:0 0,120% 0}
  100%{background-position:0 0,-120% 0}
}

/* First section after hero remains seamless. */
.hero + .section,
.page-hero + .section{
  border-top:0!important;
}
.hero + .section::before,
.page-hero + .section::before{
  display:none!important;
}

/* Project-page internal chapter separator: same exact 2px treatment. */
.project-status-section + .project-status-section{
  position:relative!important;
}
.project-status-section + .project-status-section::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  top:0!important;
  left:calc((100vw - 100%) / -2)!important;
  width:100vw!important;
  height:2px!important;
  z-index:20!important;
  pointer-events:none!important;
  opacity:1!important;
  filter:none!important;
  box-shadow:none!important;
  background-image:
    linear-gradient(90deg,rgba(135,190,214,.34),rgba(135,190,214,.34)),
    linear-gradient(90deg,transparent 0%,transparent 42%,rgba(165,224,245,.32) 46%,rgba(230,250,255,1) 50%,rgba(165,224,245,.32) 54%,transparent 58%,transparent 100%)!important;
  background-size:100% 100%,220% 100%!important;
  background-repeat:no-repeat!important;
  background-position:0 0,120% 0!important;
  animation:eskaLineLightInside 4.8s linear infinite!important;
}
.project-status-section + .project-status-section::after{
  display:none!important;
}

/* Footer: same visual language, with its own 2px line. */
.footer{
  position:relative!important;
  border-top:0!important;
}
.footer::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  top:0!important;
  left:0!important;
  right:0!important;
  width:100%!important;
  height:2px!important;
  z-index:20!important;
  pointer-events:none!important;
  opacity:1!important;
  filter:none!important;
  box-shadow:none!important;
  background-image:
    linear-gradient(90deg,rgba(135,190,214,.34),rgba(135,190,214,.34)),
    linear-gradient(90deg,transparent 0%,transparent 42%,rgba(165,224,245,.32) 46%,rgba(230,250,255,1) 50%,rgba(165,224,245,.32) 54%,transparent 58%,transparent 100%)!important;
  background-size:100% 100%,220% 100%!important;
  background-repeat:no-repeat!important;
  background-position:0 0,120% 0!important;
  animation:eskaLineLightInside 5.2s linear infinite!important;
}

@media(max-width:760px){
  main > .section + .section::before,
  .project-status-section + .project-status-section::before,
  .footer::before{
    height:1px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  main > .section + .section::before,
  .project-status-section + .project-status-section::before,
  .footer::before{
    animation:none!important;
    background-image:linear-gradient(90deg,rgba(135,190,214,.34),rgba(135,190,214,.34))!important;
    background-size:100% 100%!important;
    background-position:0 0!important;
  }
}

/* ==========================================================
   REAL SECTION LIGHT FLOW — 2026-09-19
   Dedicated DOM line + moving light core. No pseudo conflicts.
   ========================================================== */

/* Disable previous pseudo separator animations so only the real line is visible. */
main > .section + .section::before,
main > .section + .section::after,
.footer::before,
.project-status-section + .project-status-section::before,
.project-status-section + .project-status-section::after{
  display:none!important;
  animation:none!important;
}

.eska-section-flow-line{
  position:absolute;
  left:0;
  right:0;
  top:0;
  width:100%;
  height:3px;
  z-index:40;
  overflow:hidden;
  pointer-events:none;
  background:rgba(132,186,211,.28);
  box-shadow:inset 0 1px 0 rgba(210,241,251,.06);
}

.eska-section-flow-line > span{
  position:absolute;
  top:0;
  left:0;
  width:18%;
  height:100%;
  transform:translateX(-115%);
  background:linear-gradient(
    90deg,
    rgba(178,228,246,0) 0%,
    rgba(178,228,246,.18) 18%,
    rgba(210,244,255,.72) 42%,
    rgba(247,253,255,1) 50%,
    rgba(210,244,255,.72) 58%,
    rgba(178,228,246,.18) 82%,
    rgba(178,228,246,0) 100%
  );
  animation:eskaRealLineSweep 4.4s linear infinite;
  will-change:transform;
}

@keyframes eskaRealLineSweep{
  from{transform:translateX(-115%)}
  to{transform:translateX(665%)}
}

/* Internal project chapter line spans the viewport. */
.project-status-section > .eska-section-flow-line{
  left:calc((100vw - 100%) / -2);
  right:auto;
  width:100vw;
}

/* Footer line */
.footer > .eska-section-flow-line{
  top:0;
}

@media(max-width:760px){
  .eska-section-flow-line{height:2px}
  .eska-section-flow-line > span{width:26%;animation-duration:5s}
}

@media(prefers-reduced-motion:reduce){
  .eska-section-flow-line > span{display:none}
}