@import url("round8.css");
@import url("borsch.css");

:root{--bg:#f4faf6;--fg:#0a2616;--mut:#55705f;--line:rgba(10,38,22,.18);--acc:#00a055;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#06140c;--fg:#f4faf6;--mut:#8fb09a;--line:rgba(244,250,246,.18);--acc:#00c066}}
:root[data-theme="dark"]{--bg:#06140c;--fg:#f4faf6;--mut:#8fb09a;--line:rgba(244,250,246,.18);--acc:#00c066}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box;margin:0}
body{background:var(--bg);color:var(--fg);font-family:'Helvetica Neue',Arial,sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased}
.serif{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
/* image placeholders: set --img:url(...) on any .ph to use real photos */
.ph{background-image:var(--img,none),var(--g,linear-gradient(#2a2a2a,#2a2a2a));background-size:cover;background-position:center;position:relative;overflow:hidden}
.ph::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 70% 20%,rgba(255,226,170,.35),transparent 55%),linear-gradient(transparent 55%,rgba(0,0,0,.35));mix-blend-mode:soft-light}
.g1{--g:linear-gradient(120deg,#2b2118,#6b5238 45%,#c9a877 70%,#3a2d21)}
.g2{--g:linear-gradient(160deg,#1c2321,#3d5249 50%,#a9b8a8 85%,#27302c)}
.g3{--g:linear-gradient(140deg,#2a1e1e,#7a4b3f 50%,#d8b49a 80%,#3b2a28)}
.g4{--g:linear-gradient(130deg,#1d1f26,#4a5164 50%,#b9bfd0 85%,#2a2d38)}
/* preloader */
#pre{position:fixed;inset:0;background:#f4faf6;color:#0a2616;z-index:99;display:flex;align-items:flex-end;justify-content:space-between;padding:clamp(1.25rem,5vw,4rem);padding-bottom:calc(clamp(1.25rem,5vw,4rem) + env(safe-area-inset-bottom,0px));transition:transform 1s cubic-bezier(.77,0,.18,1)}
#pre.done{transform:translateY(-100%)}
.pre-brand{
  position:absolute;
  left:50%;
  top:50%;
  width:calc(100% - clamp(2rem,6vw,6rem));
  max-width:1400px;
  transform:translate(-50%,-50%);
  color:#00570a;
  text-align:center;
  text-transform:uppercase;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  font-style:normal !important;
}
.pre-brand-amb{
  display:block;
  font-family:'Borsch','Borscha',sans-serif;
  font-style:normal !important;
  font-size:clamp(6rem,22vw,19rem);
  font-weight:900;
  line-height:.84;
  letter-spacing:clamp(0.08em,0.4vw,0.18em);
  text-indent:clamp(0.08em,0.4vw,0.18em);
  color:#00570a;
  margin:0;
  text-align:center;
}
.pre-brand-sub{
  display:block;
  font-family:'Borsch','Borscha',sans-serif;
  font-style:normal !important;
  font-size:clamp(0.9rem,3vw,2.5rem);
  font-weight:700;
  letter-spacing:clamp(0.24em,0.7vw,0.46em);
  text-indent:clamp(0.24em,0.7vw,0.46em);
  line-height:1;
  color:#00570a;
  margin-top:clamp(.75rem,2vw,1.8rem);
  white-space:nowrap;
  text-align:center;
}
.pre-loading{display:flex;align-items:flex-end;gap:.45rem;color:#00570a;font-size:clamp(.7rem,1.2vw,.9rem);font-weight:700;letter-spacing:.12em}
.pre-loading b{font-size:clamp(4rem,16vw,12rem);font-weight:400;line-height:.8;letter-spacing:-.02em}
.pre-loading span{padding-bottom:.15em}
#pre .pre-logo{width:clamp(76px,10vw,132px);height:clamp(76px,10vw,132px)}
@media (max-width:600px){
  .pre-brand{width:calc(100% - 1.5rem)}
  .pre-brand-amb{font-size:clamp(5rem,25vw,8.5rem);line-height:.86;letter-spacing:0.14em;text-indent:0.14em}
  .pre-brand-sub{font-size:clamp(.75rem,3.4vw,1.15rem);letter-spacing:0.28em;text-indent:0.28em;margin-top:.75rem}
  #pre .pre-logo{width:clamp(68px,19vw,88px);height:clamp(68px,19vw,88px)}
}
/* nav */
nav{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:22px 4vw;color:var(--fg);text-shadow:none;font-size:12px;letter-spacing:.2em;text-transform:uppercase;transition:padding .35s ease,background-color .35s ease,border-color .35s ease,backdrop-filter .35s ease}
nav div{display:flex;gap:2.2rem}
/* ── Senawa-style pinned hero ────────────────────────────────── */
.hero-pin{
  position:relative;
  height:440vh;
  width:100%;
}
.hero{
  position:sticky;
  top:0;left:0;
  width:100%;
  height:100vh;
  height:100svh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  background:#07130b;
  color:#fff;
}
.hero-track{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
}
.hero-slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease-out;
  will-change:opacity;
}
.hero-slide.active{
  opacity:1;
}
.hero-slide-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  image-rendering:-webkit-optimize-contrast;
  filter:contrast(1.02) saturate(1.02);
}
.hero-slide-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(6,18,11,.55) 0%,rgba(6,18,11,.08) 25%,rgba(6,18,11,.22) 55%,rgba(6,18,11,.88) 100%);
  pointer-events:none;
}
.hero-slide-card{
  position:absolute;
  bottom:115px;
  left:4vw;
  z-index:5;
  max-width:min(580px,86vw);
  opacity:0;
  transform:translateY(16px);
  transition:opacity .5s cubic-bezier(.19,1,.22,1),transform .5s cubic-bezier(.19,1,.22,1);
  pointer-events:none;
}
.hero-slide.active .hero-slide-card{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.hero-slide-tag{
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(255,255,255,.76);
  margin-bottom:8px;
  display:block;
}
.hero-slide-name{
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(2rem,4.4vw,4rem);
  font-weight:400;
  line-height:1.04;
  color:#fff;
  margin-bottom:12px;
  letter-spacing:-.02em;
}
.hero-slide-cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.45);
  padding-bottom:3px;
  transition:border-color .3s,gap .3s;
}
.hero-slide-cta:hover{
  border-color:#fff;
  gap:12px;
  color:var(--acc);
}

/* bottom strip & progress bar */
.hero-foot{
  position:absolute;
  bottom:0;left:0;right:0;
  z-index:15;
  padding:0 4vw 22px;
  display:flex;
  flex-direction:column;
  gap:14px;
  pointer-events:auto;
  background:linear-gradient(0deg,rgba(6,18,11,.92) 0%,rgba(6,18,11,.45) 70%,transparent 100%);
}
.hero-strip{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:clamp(16px,2.8vw,42px);
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  padding-bottom:2px;
}
.hero-strip::-webkit-scrollbar{display:none}
.hero-item{
  background:transparent;
  border:none;
  padding:8px 6px;
  margin:0;
  cursor:pointer;
  text-align:left;
  color:#fff;
  font-family:inherit;
  opacity:.42;
  transition:opacity .3s ease,transform .3s ease;
  border-radius:4px;
  white-space:nowrap;
  outline:none;
  flex-shrink:0;
}
.hero-item:hover{
  opacity:.85;
}
.hero-item.active{
  opacity:1;
  transform:translateY(-2px);
}
.hero-item-t{
  display:block;
  font-size:clamp(13px,1.2vw,16px);
  font-weight:600;
  letter-spacing:.02em;
  color:#ffffff;
  margin-bottom:3px;
}
.hero-item-m{
  display:block;
  font-size:clamp(9px,.82vw,10.5px);
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
.hero-bar{
  position:relative;
  width:100%;
  height:2px;
  background:rgba(255,255,255,.2);
  border-radius:2px;
}
#hero-bar-prog{
  position:absolute;
  top:0;left:0;
  height:100%;
  width:0;
  background:#ffffff;
  border-radius:2px;
  transition:transform .12s cubic-bezier(.2,0,0,1),width .2s ease;
  will-change:transform,width;
  box-shadow:0 0 10px rgba(255,255,255,.8);
}

/* right side vertical badge & scroll hint */
.hero-badge{
  position:absolute;
  right:0;top:50%;
  transform:translateY(-50%);
  z-index:12;
  background:#06140c;
  color:#f4faf6;
  border:1px solid rgba(255,255,255,.15);
  border-right:none;
  padding:18px 8px;
  display:flex;
  align-items:center;
  writing-mode:vertical-rl;
  font-size:10px;
  font-weight:700;
  letter-spacing:.26em;
  text-transform:uppercase;
  border-top-left-radius:6px;
  border-bottom-left-radius:6px;
  box-shadow:-2px 0 16px rgba(0,0,0,.4);
  pointer-events:none;
}
.scroll{
  position:absolute;
  right:4vw;
  bottom:92px;
  z-index:12;
  font-size:10px;
  letter-spacing:.25em;
  writing-mode:vertical-rl;
  color:rgba(255,255,255,.8);
}
.scroll::after{
  content:"";
  display:block;
  width:1px;
  height:50px;
  margin:10px auto 0;
  background:currentColor;
  animation:drop 2s infinite;
}
@keyframes drop{
  0%{transform:scaleY(0);transform-origin:top}
  50%{transform:scaleY(1);transform-origin:top}
  51%{transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}

/* top nav over hero */
body:has(#p-.on) nav:not(.nav-scrolled),
body:has(#p-projects.on) nav:not(.nav-scrolled){
  color:#ffffff;
}
body:has(#p-.on) nav:not(.nav-scrolled) #mbtn span,
body:has(#p-projects.on) nav:not(.nav-scrolled) #mbtn span{
  background:#ffffff;
}
body:has(#p-.on):not(:has(nav.nav-scrolled)) #logo .lg,
body:has(#p-projects.on):not(:has(nav.nav-scrolled)) #logo .lg{
  filter:brightness(0) invert(1);
}

/* ── Projects Page Hero Video ─────────────────────────────── */
.projects-hero-wrap{
  position:relative;
  width:100%;
  height:clamp(60vh, 80vh, 88vh);
  min-height:480px;
  overflow:hidden;
  background:#07130b;
  margin-bottom:clamp(2.5rem, 5vw, 4rem);
}
.projects-hero-wrap::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:180px;
  background:linear-gradient(180deg,rgba(7,19,11,.65) 0%,rgba(7,19,11,.2) 60%,transparent 100%);
  z-index:2;
  pointer-events:none;
}
.projects-hero-wrap::after{
  content:"";
  position:absolute;
  bottom:0;left:0;right:0;
  height:90px;
  background:linear-gradient(0deg,var(--bg) 0%,transparent 100%);
  z-index:2;
  pointer-events:none;
}
.projects-hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  pointer-events:none;
  background:#07130b;
}

@media (max-width:900px){
  .hero-pin{height:360vh}
  .hero-strip{justify-content:flex-start;gap:18px}
  .hero-slide-card{bottom:100px}
  .hero-slide-name{font-size:clamp(1.7rem,7vw,2.4rem)}
  .hero-foot{padding:0 4vw 16px;gap:10px}
  .hero-badge{display:none!important}
  .scroll{display:none!important}
}
@media (prefers-reduced-motion:reduce){
  .hero-slide,.hero-slide-img,.hero-item,#hero-bar-prog{transition:none!important}
}

/* sections */
section{padding:16vh 4vw}
.label{font-size:12px;letter-spacing:.25em;text-transform:uppercase;color:var(--mut);margin-bottom:2rem}
.about{display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:center}
.about .ph{aspect-ratio:4/5}.about .ph.p{will-change:transform}
.about h2{font-size:clamp(2rem,4.6vw,4.4rem);line-height:1.05;margin-bottom:2rem}
.about p{color:var(--mut);line-height:1.8;max-width:34em}
.rv{opacity:0;transform:translateY(50px);transition:opacity 1.2s,transform 1.2s cubic-bezier(.19,1,.22,1)}.rv.in{opacity:1;transform:none}
/* marquee */
.mq{overflow:hidden;border-block:1px solid var(--line);padding:3vh 0;white-space:nowrap}
.mq div{display:inline-block;font-size:clamp(2.5rem,7vw,6rem);animation:mq 30s linear infinite}
.mq i{color:var(--acc);margin:0 3vw}
@keyframes mq{to{transform:translateX(-50%)}}
/* horizontal pinned projects */
.pin{height:420vh;position:relative;padding:0}
.stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;align-items:center}
.track{display:flex;gap:4vw;padding:0 4vw;will-change:transform}
.card{flex:0 0 min(58vw,740px)}
.card .ph{aspect-ratio:4/3;transition:transform .8s cubic-bezier(.19,1,.22,1)}
.card:hover .ph{transform:scale(.97)}
.card h3{font-size:clamp(1.5rem,2.6vw,2.6rem);margin-top:1.2rem}
.card small{color:var(--mut);letter-spacing:.15em;text-transform:uppercase;font-size:11px}
.bar{position:absolute;left:4vw;right:4vw;bottom:6vh;height:1px;background:var(--line)}.bar i{display:block;height:100%;background:var(--fg);width:0}
.ptitle{position:absolute;top:12vh;left:4vw}
/* services */
.svc{border-top:1px solid var(--line)}
.svc a{display:flex;justify-content:space-between;align-items:baseline;padding:3.2vh 0;border-bottom:1px solid var(--line);font-size:clamp(1.6rem,4.2vw,4rem);transition:padding .5s,color .5s}
.svc a span{font-size:12px;letter-spacing:.2em;color:var(--mut)}
.svc a:hover{padding-left:2vw;color:var(--acc)}
#hov{position:fixed;width:min(26vw,320px);aspect-ratio:3/4;pointer-events:none;z-index:40;opacity:0;transform:translate(-50%,-50%) scale(.8);transition:opacity .4s,transform .4s}
#hov.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
/* contact */
.cta{text-align:center;padding:22vh 4vw}
.cta h2{font-size:clamp(2.4rem,8vw,8rem);line-height:1}
.btn{display:inline-block;margin-top:4rem;padding:1.3rem 3rem;border:1px solid var(--fg);border-radius:99px;font-size:12px;letter-spacing:.25em;text-transform:uppercase;transition:background .4s,color .4s}
.btn:hover{background:var(--fg);color:var(--bg)}

@media (max-width:800px){.about{grid-template-columns:1fr}.card{flex-basis:80vw}nav div{display:none}#hov{display:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv,.line>span{opacity:1;transform:none}}
.page{display:none}.page.on{display:block;animation:fi .9s both}@keyframes fi{from{opacity:0}}
.cur{position:fixed;inset:0;z-index:90;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 42%,#087b28 0%,#00570a 60%,#004407 100%);transform:translateY(100%);transition:transform .75s cubic-bezier(.77,0,.18,1);pointer-events:none}.cur.c{transform:none}.cur.o{transform:translateY(-100%)}
.cur-mark{position:relative;display:grid;place-items:center;width:clamp(9rem,18vw,15rem);aspect-ratio:1;border:1px solid rgba(255,255,255,.42);border-radius:50%;background:linear-gradient(145deg,rgba(255,255,255,.22),rgba(255,255,255,.035) 46%,rgba(0,0,0,.12));box-shadow:inset 0 2px 2px rgba(255,255,255,.42),inset 0 -12px 24px rgba(0,35,8,.24),0 32px 70px rgba(0,25,5,.42),0 9px 20px rgba(0,20,4,.28);transform:perspective(900px) translateY(18px) rotateX(16deg) scale(.82);opacity:0;transition:transform .8s cubic-bezier(.19,1,.22,1),opacity .35s ease}
.cur-mark::before{content:"";position:absolute;inset:8%;border:1px solid rgba(255,255,255,.16);border-radius:inherit;box-shadow:inset 0 1px 5px rgba(255,255,255,.18)}
.cur-mark .lg{position:relative;z-index:1;width:68%;height:68%;background-image:url("../images/logo.png");background-size:contain;background-repeat:no-repeat;background-position:center;filter:brightness(0) invert(1) drop-shadow(0 4px 1px rgba(0,0,0,.22)) drop-shadow(0 12px 12px rgba(0,24,5,.38))}
.cur.c .cur-mark{transform:perspective(900px) translateY(0) rotateX(0) scale(1);opacity:1;transition-delay:.12s,.16s}
.cur.o .cur-mark{transform:perspective(900px) translateY(-20px) rotateX(-12deg) scale(.9);opacity:0;transition-delay:0s,0s}
@media (prefers-reduced-motion:reduce){.cur-mark{transition:none}.cur.c .cur-mark{transform:none;opacity:1}.cur.o .cur-mark{opacity:0}}
.pho{min-height:78vh;display:flex;flex-direction:column;justify-content:flex-end;padding:22vh 4vw 8vh}
.pho h1{font-size:clamp(3rem,10vw,10rem);line-height:.95}
.line{display:inline-block;overflow:hidden;vertical-align:bottom;margin-right:.24em}
.line:last-child{margin-right:0}
.line>span{display:inline-block;transform:translateY(110%);transition:transform 1.2s cubic-bezier(.19,1,.22,1)}
.in .line>span,.line.in>span{transform:none}
.line:nth-child(2)>span{transition-delay:.12s}
.line:nth-child(3)>span{transition-delay:.24s}
.band{height:85vh;overflow:hidden;position:relative}.band .ph{position:absolute;left:0;right:0;top:-18%;height:136%}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:4vw;border-top:1px solid var(--line);padding-top:5vh}
.stats b{display:block;font-size:clamp(3rem,8vw,7rem);font-weight:400;line-height:1}.stats span{color:var(--mut);font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:2vw}.team .ph{aspect-ratio:3/4;transition:transform .8s cubic-bezier(.19,1,.22,1)}.team div:hover .ph{transform:translateY(-12px)}.team h4{font-weight:400;font-size:1.4rem;margin-top:1rem}.team small{color:var(--mut)}
.chips{display:flex;gap:.8rem;flex-wrap:wrap;padding:0 4vw 6vh}.chips button{background:none;border:1px solid var(--line);color:var(--fg);padding:.8rem 1.6rem;border-radius:99px;font:inherit;font-size:12px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:.4s}.chips button.on,.chips button:hover{background:var(--fg);color:var(--bg)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:6vh 4vw;padding:0 4vw 16vh}.grid .it:nth-child(even){margin-top:12vh}.it.h{display:none}.it .ph{aspect-ratio:4/5;transition:transform 1s cubic-bezier(.19,1,.22,1)}.it:nth-child(3n) .ph{aspect-ratio:1}.it:hover .ph{transform:scale(1.04)}.it .w{overflow:hidden}.it h3{font-size:2rem;margin-top:1rem}.it small{color:var(--mut);letter-spacing:.15em;text-transform:uppercase;font-size:11px}
.sv{display:grid;grid-template-columns:1.1fr 1fr;gap:6vw;align-items:center;padding:10vh 4vw;border-top:1px solid var(--line)}.sv:nth-child(even) .ph{order:2}.sv .ph{aspect-ratio:4/5}.sv h2{font-size:clamp(2.2rem,5vw,4.6rem);line-height:1;margin-bottom:1.5rem}.sv p{color:var(--mut);line-height:1.8;max-width:32em}.sv ul{list-style:none;padding:0;margin-top:2rem}.sv li{padding:.9rem 0;border-bottom:1px solid var(--line);font-size:14px;letter-spacing:.08em}
.ct{display:grid;grid-template-columns:1.3fr 1fr;gap:8vw;padding:6vh 4vw 16vh}.f{display:grid;gap:2.2rem}.f input,.f select,.f textarea{width:100%;background:none;border:0;border-bottom:1px solid var(--line);color:var(--fg);font:inherit;font-size:1.2rem;padding:1rem 0;outline:none;transition:border-color .4s}.f input:focus,.f textarea:focus,.f select:focus{border-color:var(--acc)}.f option{color:#000}
.info p{color:var(--mut);line-height:2;margin-bottom:2rem}.info b{display:block;color:var(--fg);font-weight:400;font-size:1.4rem}
.g5{--g:linear-gradient(150deg,#241c14,#5e4a30 45%,#e0c8a0 78%,#33281c)}.g6{--g:linear-gradient(135deg,#1a1d1c,#56635d 50%,#c6cfc6 82%,#262b29)}
.prh{height:100vh;height:100svh;position:relative;display:flex;align-items:flex-end;overflow:hidden}.prh>.ph{position:absolute;inset:-2%;animation:zoom 28s ease-in-out infinite alternate;filter:contrast(1.06) saturate(1.04)}.prh .pho{min-height:0;padding:0 4vw 8vh;position:relative;z-index:2;color:#f4faf6;width:100%}
.meta{display:grid;grid-template-columns:repeat(4,1fr);gap:3vw;padding:6vh 4vw;border-bottom:1px solid var(--line)}.meta span{display:block;color:var(--mut);font-size:11px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:.6rem}.meta b{font-weight:400;font-size:1.3rem}
.gal{display:grid;grid-template-columns:1fr 1fr;gap:2vw;padding:0 4vw 12vh}.gal .gallery-thumb{display:block;position:relative;width:100%;aspect-ratio:4/5;padding:0;border:0;background:var(--line);overflow:hidden;cursor:zoom-in}.gal .gallery-thumb:nth-child(1),.gal .gallery-thumb:nth-child(4){grid-column:span 2;aspect-ratio:16/10}.gal .gallery-photo{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.19,1,.22,1)}.gal .gallery-thumb:hover .gallery-photo{transform:scale(1.025)}.gal .gallery-thumb:focus-visible,.viewer-thumb:focus-visible,.viewer-arrow:focus-visible,.viewer-close:focus-visible,.gallery-open:focus-visible{outline:2px solid var(--acc);outline-offset:4px}
.nx{display:block;padding:18vh 4vw;text-align:center;border-top:1px solid var(--line)}.nx h2{font-size:clamp(2.5rem,8vw,8rem);line-height:1;transition:letter-spacing .8s cubic-bezier(.19,1,.22,1),color .5s}.nx:hover h2{letter-spacing:.03em;color:var(--acc)}
@media (max-width:800px){.meta{grid-template-columns:1fr 1fr}.gal{grid-template-columns:1fr}.gal .gallery-thumb:nth-child(n){grid-column:auto;aspect-ratio:4/5}}
@media (max-width:800px){.stats,.team{grid-template-columns:1fr 1fr}.grid,.sv,.ct{grid-template-columns:1fr}.grid .it:nth-child(even){margin-top:0}.sv:nth-child(even) .ph{order:0}}
#mbtn,#menu .top button{background:none;border:0;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;padding:0}
#menu{position:fixed;inset:0;z-index:80;background:#00570a;color:#eaf7ef;display:flex;flex-direction:column;justify-content:space-between;padding:calc(22px + env(safe-area-inset-top,0px)) 4vw 5vh;clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .9s cubic-bezier(.77,0,.18,1),visibility 0s .9s}
#menu.open{clip-path:inset(0);visibility:visible;transition:clip-path .9s cubic-bezier(.77,0,.18,1)}
#menu .top{display:flex;justify-content:space-between;font-size:12px;letter-spacing:.2em;text-transform:uppercase}
#menu ul{list-style:none;padding:0}#menu li{overflow:hidden;border-bottom:1px solid rgba(234,247,239,.15)}
#menu li a{display:flex;justify-content:space-between;align-items:baseline;padding:1.2vh 0;font-size:clamp(2rem,6.4vw,5rem);font-family:Georgia,serif;transition:padding .5s,color .4s}
#menu.open li a{animation:up .95s cubic-bezier(.19,1,.22,1) both;animation-delay:calc(var(--n)*.06s + .3s)}
@keyframes up{from{transform:translateY(105%)}}
#menu li a:hover{padding-left:2vw;color:#4be08e}#menu li a span{font:12px 'Helvetica Neue',Arial,sans-serif;letter-spacing:.2em;opacity:.6}
#menu .ct2{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1.5rem;font-size:13px;line-height:1.8;opacity:.8}
.hero h1{font-size:clamp(2.6rem,7vw,7rem)}
.idx{position:absolute;right:calc(4vw + 56px);bottom:8vh;z-index:3;width:min(32vw,400px)}
.idx a{display:grid;grid-template-columns:2.2rem 1fr auto;gap:.8rem;align-items:baseline;padding:.95rem 0;border-bottom:1px solid rgba(244,250,246,.3);font-size:12px;transition:padding .5s,opacity .5s}
.idx:hover a{opacity:.4}.idx a:hover{opacity:1;padding-left:.8rem}
.idx b{font-weight:400;font-family:Georgia,serif;font-size:1.2rem}.idx em{font-style:normal;font-size:10px;letter-spacing:.18em;text-transform:uppercase;opacity:.75}
#heroimg2{opacity:0;transition:opacity .9s}#heroimg2.on{opacity:1}
.arch .row{display:grid;grid-template-columns:5rem 2fr 1.2fr 1.2fr 2rem;gap:2vw;padding:3vh 0;border-top:1px solid var(--line);align-items:baseline;font-size:14px;color:var(--mut);transition:padding .5s,color .4s}
.arch .row b{font-weight:400;font-family:Georgia,serif;font-size:clamp(1.4rem,2.6vw,2.4rem);color:var(--fg);transition:color .4s}
.arch a.row:hover{padding-left:2vw;color:var(--acc)}.arch a.row:hover b{color:var(--acc)}.arch .row:last-child{border-bottom:1px solid var(--line)}
@media (max-width:800px){.idx{display:none}.arch .row{grid-template-columns:3.5rem 1fr}.arch .row span:nth-child(n+3){display:none}}
#logo{position:fixed;top:calc(10px + env(safe-area-inset-top,0px));left:4vw;z-index:51;width:72px;height:72px;transition:transform .5s cubic-bezier(.19,1,.22,1)}#logo:hover{transform:scale(1.07) rotate(-2deg)}#logo .lg{width:100%;height:100%}
.badge{background-color:#fff;border-radius:18px;padding:7px;background-origin:content-box;background-clip:padding-box;box-sizing:border-box;box-shadow:0 6px 24px rgba(0,0,0,.18)}
nav{padding:40px 4vw 0}#menu .top{align-items:center}
#logo{top:calc(6px + env(safe-area-inset-top,0px));width:80px;height:80px;filter:none}
@media (max-width:800px){#logo{width:60px;height:60px;top:calc(4px + env(safe-area-inset-top,0px))}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) footer .lg{background-color:#fff;border-radius:18px;padding:7px;background-origin:content-box;background-clip:padding-box;box-sizing:border-box}}
nav .links{display:flex;align-items:center;gap:2.6rem;margin-left:auto}
.links a{position:relative;padding:.4rem 0}
.links a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s cubic-bezier(.19,1,.22,1)}
.links a:hover::after,.links a.on::after{transform:scaleX(1);transform-origin:left}
.links a:last-child{border:1px solid currentColor;border-radius:99px;padding:.75rem 1.5rem;transition:background .4s,color .4s}.links a:last-child::after{display:none}
.links a:last-child:hover{background:#f4faf6;color:#06140c}
nav #mbtn{display:none;margin-left:auto;width:46px;height:46px;position:relative}
#mbtn span{position:absolute;left:9px;right:9px;height:1.5px;background:currentColor;transition:transform .5s cubic-bezier(.19,1,.22,1),right .4s}
#mbtn span:nth-child(1){top:15px}#mbtn span:nth-child(2){top:22px}#mbtn span:nth-child(3){top:29px;right:19px}
#mbtn:hover span:nth-child(3){right:9px}
@media (max-width:800px){nav .links{display:none}nav #mbtn{display:block}}
#wa{position:fixed;right:4vw;bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:45;display:flex;align-items:center;gap:.7rem;background:#00a055;color:#fff;padding:.9rem 1.4rem;border-radius:99px;font-size:12px;letter-spacing:.15em;text-transform:uppercase;box-shadow:0 10px 30px rgba(0,0,0,.25);transition:transform .5s cubic-bezier(.19,1,.22,1),background .4s}
#wa:hover{transform:translateY(-4px);background:#00b860}#wa svg{width:20px;height:20px;fill:#fff}
.info a:hover,footer a:hover,#menu .ct2 a:hover{color:var(--acc)}.info a,footer a{transition:color .3s}
@media (max-width:800px){#wa{padding:.95rem}#wa span{display:none}}

.ph{background-position:var(--pos,center)}.hero .ph::before{display:none}
.ph::after{background:linear-gradient(transparent 62%,rgba(0,0,0,.28));mix-blend-mode:normal}
.hero .ph::after,.prh>.ph::after{background:linear-gradient(rgba(0,0,0,.3),rgba(0,0,0,.08) 40%,rgba(0,0,0,.68))}
.im1{--img:url("../images/01-dark-kitchen.jpg");--pos:center 55%}
.im2{--img:url("../images/02-white-smart-kitchen.jpg");}
.im3{--img:url("../images/living%20room%201.jpeg");}
.im4{--img:url("../images/04-white-dining-pendants.jpg");--pos:center 60%}
.im5{--img:url("../images/05-dark-dining-halo-lights.jpg");}
.im6{--img:url("../images/chefs-atelier.jpg");}
.im7{--img:url("../images/07-modern-living-blue-curtains.jpg");--pos:center 55%}
.im8{--img:url("../images/interior%201.jpeg");--pos:center 40%}
.im9{--img:url("../images/living%20room%202.jpeg");--pos:center 40%}
.im10{--img:url("../images/10-grand-hall-chandelier.jpg");--pos:center 50%}
.im11{--img:url("../images/kyoto-suite.jpg");}
.im12{--img:url("../images/12-marble-floor-living.jpg");}
.im13{--img:url("../images/13-curved-wood-kitchen.png");}
.im14{--img:url("../images/14-white-and-charcoal-kitchen.png");}
.im15{--img:url("../images/15-solstice-lounge.jpg");--pos:center 50%}
.im16{--img:url("../images/16-lumina-master-suite.jpg");--pos:center 50%}
.im17{--img:url("../images/17-glass-spa-ensuite.jpg");--pos:center 50%}
.im18{--img:url("../images/18-atelier-dressing-gallery.jpg");--pos:center 50%}

.lg{display:block;background-image:url("../images/logo.png");background-size:contain;background-repeat:no-repeat;background-position:center}

.gallery-open{position:absolute;right:4vw;bottom:8vh;z-index:3;display:flex;align-items:center;gap:1.5rem;padding:1rem 1.4rem;border:1px solid rgba(255,255,255,.65);border-radius:99px;background:rgba(0,0,0,.16);color:#fff;font:inherit;font-size:11px;letter-spacing:.16em;text-transform:uppercase;backdrop-filter:blur(8px);cursor:pointer;transition:background .35s,transform .35s}
.gallery-open:hover{background:rgba(0,0,0,.45);transform:translateY(-3px)}
.gallery-viewer{width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;padding:0;border:0;background:#07120c;color:#f4faf6}
.gallery-viewer::backdrop{background:rgba(0,0,0,.88);backdrop-filter:blur(8px)}
.viewer-shell{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:2vh;width:min(100%,1600px);height:100%;margin:auto;padding:clamp(1rem,3vw,3rem) 4vw}
.viewer-top,.viewer-top>div,.viewer-bottom{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.viewer-top .label{margin:0;color:#f4faf6}.viewer-top>div{gap:2rem;font-size:12px;letter-spacing:.14em}
.viewer-close,.viewer-arrow{border:1px solid rgba(244,250,246,.4);background:transparent;color:inherit;cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.viewer-close{padding:.75rem 1rem;border-radius:99px;font:inherit;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.viewer-close span{margin-left:.6rem;font-size:1.25rem;vertical-align:-.08em}
.viewer-close:hover,.viewer-arrow:hover{background:#f4faf6;color:#07120c;border-color:#f4faf6}
.viewer-stage{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(.6rem,2vw,2rem);min-height:0}
.viewer-stage #viewer-image{display:block;width:100%;height:100%;min-height:0;object-fit:contain}
.viewer-arrow{width:clamp(2.7rem,5vw,4rem);height:clamp(2.7rem,5vw,4rem);border-radius:50%;font-size:1.5rem}
.viewer-bottom{align-items:flex-end}.viewer-caption{max-width:25%;color:rgba(244,250,246,.72);font-family:Georgia,serif;font-size:clamp(1rem,1.5vw,1.4rem)}
.viewer-thumbs{display:flex;gap:.65rem;max-width:75%;overflow-x:auto;padding:5px}
.viewer-thumb{flex:none;width:clamp(3.5rem,7vw,6rem);aspect-ratio:1;border:1px solid rgba(244,250,246,.25);padding:0;background:none;opacity:.6;cursor:pointer;transition:opacity .25s,border-color .25s}
.viewer-thumb img{display:block;width:100%;height:100%;object-fit:cover}.viewer-thumb.active,.viewer-thumb:hover{opacity:1;border-color:#f4faf6}
@media (max-width:800px){.gallery-open{right:4vw;bottom:4vh}.viewer-shell{gap:1.5vh;padding:calc(1rem + env(safe-area-inset-top,0px)) 1rem calc(1rem + env(safe-area-inset-bottom,0px))}.viewer-top>div{gap:.8rem}.viewer-stage{gap:.5rem}.viewer-arrow{width:2.6rem;height:2.6rem;font-size:1.2rem}.viewer-bottom{align-items:flex-start;flex-direction:column}.viewer-caption,.viewer-thumbs{max-width:100%}.viewer-thumbs{width:100%}.viewer-thumb{width:3.5rem}}
@media (max-width:900px) and (max-height:500px){
  .viewer-shell{grid-template-rows:auto minmax(0,1fr) auto;gap:.45rem;padding:calc(.45rem + env(safe-area-inset-top,0px)) .7rem calc(.45rem + env(safe-area-inset-bottom,0px))}
  .viewer-top{min-height:2rem}
  .viewer-top>div{gap:.55rem;font-size:10px}
  .viewer-top .label{font-size:9px;letter-spacing:.12em}
  .viewer-close{padding:.4rem .65rem;font-size:9px}
  .viewer-close span{margin-left:.25rem;font-size:1rem}
  .viewer-stage{grid-template-columns:2.2rem minmax(0,1fr) 2.2rem;gap:.35rem}
  .viewer-arrow{width:2rem;height:2rem;font-size:1rem}
  .viewer-bottom{flex-direction:row;align-items:center;gap:.5rem;min-width:0}
  .viewer-caption{flex:0 1 30%;max-width:30%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem}
  .viewer-thumbs{flex:1 1 70%;width:auto;max-width:70%;min-width:0;gap:.35rem;padding:2px;justify-content:flex-end}
  .viewer-thumb{width:clamp(2rem,8vh,2.8rem);aspect-ratio:1}
}
@media (prefers-reduced-motion:reduce){.gal .gallery-thumb .ph,.gallery-open,.viewer-close,.viewer-arrow,.viewer-thumb{transition:none}}

#p-contact{--contact-gutter:clamp(1.5rem,8vw,8rem)}
.contact-intro{padding:clamp(10rem,19vh,15rem) var(--contact-gutter) clamp(3.5rem,8vh,7rem);max-width:112rem}
.contact-intro .label{margin-bottom:1.7rem}
.contact-intro h1{max-width:13ch;font-size:clamp(3rem,7.1vw,7.4rem);line-height:.98;letter-spacing:-.055em}
.contact-intro h1 i{font-weight:400;color:var(--acc)}
.contact-intro>p{max-width:42rem;margin-top:2rem;color:var(--mut);font-size:clamp(1.05rem,1.7vw,1.45rem);line-height:1.7}
.contact-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(18rem,.72fr);gap:clamp(3rem,9vw,9rem);align-items:start;padding:0 var(--contact-gutter) clamp(6rem,12vh,11rem)}
.contact-form{gap:0}
.contact-note{margin-bottom:2rem;color:var(--mut);font-size:.9rem;line-height:1.7}
.contact-fields{display:grid;grid-template-columns:1fr 1fr;column-gap:2rem}
.contact-field{display:grid;align-content:start;gap:.7rem;padding:1.2rem 0 1.45rem;border-top:1px solid var(--line)}
.contact-field>span,.contact-field small{color:var(--mut);font-size:10px;font-weight:400;letter-spacing:.19em;text-transform:uppercase}
.contact-field>span b{color:var(--acc);font-weight:400}
.contact-field small{letter-spacing:.1em;opacity:.8}
.contact-field input,.contact-field select,.contact-field textarea{width:100%;min-height:2.5rem;padding:.15rem 0;border:0;border-radius:0;outline:0;background:transparent;color:var(--fg);font:inherit;font-size:1rem;line-height:1.6;resize:vertical}
.contact-field input::placeholder,.contact-field textarea::placeholder{color:var(--mut);opacity:.68}
.contact-field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--mut) 50%),linear-gradient(135deg,var(--mut) 50%,transparent 50%);background-position:calc(100% - 5px) 50%,100% 50%;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:1rem;cursor:pointer}
.contact-field select option{background:var(--bg);color:var(--fg)}
.contact-field:focus-within{border-color:var(--acc)}
.contact-field-wide{grid-column:1/-1}
.contact-submit{display:flex;align-items:center;justify-self:start;gap:2rem;margin-top:2rem;padding:1.1rem 1.5rem;border:1px solid var(--fg);background:transparent;color:var(--fg);font:inherit;cursor:pointer}
.contact-submit:hover{border-color:var(--fg)}
.contact-submit span{font-size:1.2rem}
.contact-success{margin-top:1.5rem;color:var(--acc);line-height:1.6}
.contact-privacy{margin-top:1.5rem;color:var(--mut);font-size:.75rem;line-height:1.6}
.contact-aside{padding-top:0}
.contact-image .ph{aspect-ratio:4/5}
.contact-image-caption{display:block;padding-top:.85rem;color:var(--mut);font-size:9px;letter-spacing:.17em;text-transform:uppercase}
.contact-details{display:grid;grid-template-columns:1fr 1fr;gap:2rem 1.2rem;padding-top:3rem}
.contact-details>div{display:grid;align-content:start;gap:.4rem}
.contact-details .label{margin:0;font-size:9px}
.contact-details a,.contact-details p{font-size:.92rem;line-height:1.7}
.contact-details a:hover{color:var(--acc)}
.contact-details p{color:var(--mut)}
.contact-faq{display:grid;grid-template-columns:minmax(14rem,.7fr) minmax(0,1.3fr);gap:clamp(3rem,9vw,9rem);padding:clamp(4rem,9vh,8rem) var(--contact-gutter);border-top:1px solid var(--line)}
.contact-faq h2{max-width:8ch;font-size:clamp(2.4rem,5vw,5rem);line-height:1.02}
.contact-questions details{border-top:1px solid var(--line)}
.contact-questions details:last-child{border-bottom:1px solid var(--line)}
.contact-questions summary{display:flex;justify-content:space-between;gap:2rem;padding:1.5rem 0;list-style:none;font-family:Georgia,'Times New Roman',serif;font-size:clamp(1.2rem,2vw,1.7rem);cursor:pointer}
.contact-questions summary::-webkit-details-marker{display:none}
.contact-questions summary span{color:var(--acc);font-family:Arial,sans-serif;font-size:1.3rem;transition:transform .25s}
.contact-questions details[open] summary span{transform:rotate(45deg)}
.contact-questions details>p{max-width:48rem;padding:0 2rem 1.5rem 0;color:var(--mut);line-height:1.8}
@media (max-width:800px){#p-contact{--contact-gutter:6vw}.contact-intro{padding-top:11rem}.contact-layout,.contact-faq{grid-template-columns:1fr;gap:4rem}.contact-fields{column-gap:1.2rem}.contact-details{padding-top:2rem}}
@media (max-width:520px){.contact-fields{grid-template-columns:1fr}.contact-field-wide{grid-column:auto}.contact-intro h1{font-size:clamp(2.8rem,13vw,4.5rem)}.contact-details{grid-template-columns:1fr 1fr}}

nav.nav-scrolled{min-height:90px;padding:8px 4vw;background:rgba(255,255,255,.88);color:#0a2616;text-shadow:none;mix-blend-mode:normal;border-bottom:1px solid rgba(10,38,22,.12);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
nav.nav-scrolled .links a:last-child:hover{background:#0a2616;color:#fff}
body:has(nav.nav-scrolled) #logo{top:calc(9px + env(safe-area-inset-top,0px));width:72px;height:72px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.12))}
@media (max-width:800px){nav.nav-scrolled{min-height:66px;padding:7px 4vw}body:has(nav.nav-scrolled) #logo{top:calc(8px + env(safe-area-inset-top,0px));width:50px;height:50px}}
@media (max-width:800px){#p-about>.pho{min-height:44vh;min-height:44svh;justify-content:flex-start;padding:calc(100px + env(safe-area-inset-top,0px)) 6vw 4rem}}
@media (prefers-reduced-motion:reduce){nav{transition:none}}

/* ── Ultra-Modern Clientele Page ──────────────────────────── */
.clientele-intro{
  max-width:54rem;
  color:var(--mut);
  line-height:1.8;
  font-size:clamp(1.05rem,1.4vw,1.25rem);
  margin-top:1.5rem;
}
.clientele-filters{
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
  margin-bottom:3.2rem;
}
.clientele-filters button{
  background:transparent;
  border:1px solid var(--line);
  color:var(--mut);
  padding:.65rem 1.4rem;
  border-radius:999px;
  font-family:inherit;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  cursor:pointer;
  transition:all .28s ease;
}
.clientele-filters button:hover,
.clientele-filters button.on{
  background:var(--fg);
  color:var(--bg);
  border-color:var(--fg);
}
.clientele-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr));
  gap:2rem;
}
.client-card{
  background:rgba(10,38,22,.03);
  border:1px solid var(--line);
  border-radius:14px;
  padding:2.4rem 2.2rem;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  position:relative;
  overflow:hidden;
  transition:transform .45s cubic-bezier(.19,1,.22,1),border-color .35s,box-shadow .35s,opacity .3s;
}
:root[data-theme="dark"] .client-card,
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .client-card{
    background:rgba(255,255,255,.03);
  }
}
.client-card:hover{
  transform:translateY(-6px);
  border-color:var(--acc);
  box-shadow:0 16px 40px rgba(0,0,0,.08);
}
.client-card.h{
  display:none;
}
.client-card-top{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:1rem;
  margin-bottom:1.8rem;
}
.client-badge{
  font-size:10px;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--acc);
}
.client-loc{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mut);
}
.client-num{
  position:absolute;
  right:1.6rem;
  bottom:1.4rem;
  font-family:Georgia,serif;
  font-size:4rem;
  line-height:1;
  color:var(--line);
  opacity:.4;
  pointer-events:none;
  transition:color .3s,opacity .3s;
}
.client-card:hover .client-num{
  color:var(--acc);
  opacity:.3;
}
.client-title{
  font-size:clamp(1.4rem,2vw,1.9rem);
  line-height:1.15;
  margin-bottom:1rem;
  padding-right:2rem;
}
.client-sub{
  font-family:inherit;
  font-size:.85em;
  opacity:.75;
  font-weight:400;
}
.client-desc{
  color:var(--mut);
  line-height:1.75;
  font-size:.92rem;
  margin-bottom:2rem;
  max-width:92%;
}
.client-tags{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  position:relative;
  z-index:2;
}
.client-tags span{
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:5px 11px;
  border-radius:4px;
  background:rgba(10,38,22,.06);
  color:var(--fg);
}
:root[data-theme="dark"] .client-tags span,
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .client-tags span{
    background:rgba(255,255,255,.08);
  }
}
.clientele-cta{
  margin-top:4.5rem;
  padding:clamp(2.5rem,5vw,4.5rem);
  border:1px solid var(--line);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(0,160,85,.07) 0%,rgba(10,38,22,.02) 100%);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:1.2rem;
}
.clientele-cta h3{
  font-size:clamp(1.8rem,3.4vw,2.8rem);
  line-height:1.1;
  max-width:24ch;
}
.clientele-cta p{
  max-width:44rem;
  color:var(--mut);
  line-height:1.8;
  font-size:1.05rem;
}
@media (max-width:768px){
  .clientele-grid{grid-template-columns:1fr;gap:1.4rem}
  .client-card{padding:1.8rem 1.6rem}
  .clientele-cta{padding:2rem 1.5rem}
}
@media (prefers-reduced-motion:reduce){
  .client-card,.clientele-filters button{transition:none!important}
}

/* ════════════════════════════════════════════════════════════════════════════
   ULTRA-MODERN FOOTER (Inspired by ENA Ointing with Stretchy Giant Logo)
   ════════════════════════════════════════════════════════════════════════════ */
.site-footer{
  position:relative;
  overflow:hidden;
  border-top:1px solid var(--line);
  background:var(--bg);
  color:var(--fg);
  padding:0;
}
.footer-glow{
  pointer-events:none;
  position:absolute;
  top:-180px;
  left:50%;
  width:min(1100px,94vw);
  height:440px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,160,85,.14),transparent 75%);
  z-index:0;
}
:root[data-theme="dark"] .footer-glow,
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .footer-glow{
    background:radial-gradient(closest-side,rgba(0,192,102,.18),transparent 75%);
  }
}
.footer-inner{
  position:relative;
  z-index:1;
  padding:clamp(2.8rem,5.5vw,4.5rem) 4vw clamp(1.5rem,3vw,2.5rem);
}
.footer-hero-wrap{
  display:flex;
  flex-direction:column;
  gap:2.5rem;
  margin-bottom:clamp(3rem,6vw,5.5rem);
}
@media (min-width:768px){
  .footer-hero-wrap{
    flex-direction:row;
    justify-content:space-between;
    align-items:flex-end;
  }
}
.footer-headline{
  font-size:clamp(2.4rem,5.6vw,5.8rem);
  line-height:.96;
  letter-spacing:-.038em;
  font-weight:400;
  max-width:16ch;
  color:var(--fg);
}
.footer-cta-box{
  flex-shrink:0;
}
.footer-cta-circle{
  position:relative;
  display:grid;
  place-items:center;
  width:clamp(120px,11vw,150px);
  height:clamp(120px,11vw,150px);
  border-radius:50%;
  background:var(--fg);
  color:var(--bg);
  text-align:center;
  font-size:13px;
  font-weight:600;
  letter-spacing:.04em;
  overflow:hidden;
  box-shadow:0 12px 36px rgba(0,0,0,.12);
  transition:transform .5s cubic-bezier(.19,1,.22,1),box-shadow .5s ease;
  cursor:pointer;
  text-decoration:none;
}
.footer-cta-circle:hover{
  transform:scale(1.06);
  box-shadow:0 18px 45px rgba(0,160,85,.28);
}
.footer-cta-fill{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:var(--acc);
  transform-origin:bottom;
  transform:scaleY(0);
  transition:transform .5s cubic-bezier(.19,1,.22,1);
}
.footer-cta-circle:hover .footer-cta-fill{
  transform:scaleY(1);
}
.footer-cta-content{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:1rem;
  transition:color .45s ease;
}
.footer-cta-circle:hover .footer-cta-content{
  color:#ffffff;
}
.footer-cta-arrow{
  width:18px;
  height:18px;
  transition:transform .5s cubic-bezier(.19,1,.22,1);
}
.footer-cta-circle:hover .footer-cta-arrow{
  transform:rotate(45deg);
}

/* 4-column directory */
.footer-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1.2fr;
  gap:3vw;
}
.footer-brand-col{
  padding-right:1.5rem;
}
.footer-brand-lockup{
  display:flex;
  flex-direction:column;
  gap:1.2rem;
  align-items:flex-start;
}
.footer-brand-name{
  display:block;
  font-size:1.45rem;
  line-height:1.2;
  margin-bottom:.6rem;
  color:var(--fg);
  letter-spacing:-.01em;
}
.footer-brand-desc{
  color:var(--mut);
  line-height:1.75;
  font-size:.92rem;
  max-width:32ch;
}
.footer-col-title{
  font-size:11px;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--mut);
  margin-bottom:1.4rem;
}
.footer-nav-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:.75rem;
  font-size:.95rem;
  line-height:1.5;
}
.footer-nav-list a{
  color:var(--fg);
  opacity:.8;
  display:inline-block;
  transition:opacity .3s,color .3s,transform .3s;
}
.footer-nav-list a:hover{
  opacity:1;
  color:var(--acc);
  transform:translateX(4px);
}
.footer-address{
  color:var(--mut);
  font-size:.88rem;
  line-height:1.65;
  margin-top:.4rem;
}

/* Bottom status & utility bar */
.footer-utility-bar{
  margin-top:clamp(3rem,6vw,4.5rem);
  border-top:1px solid var(--line);
  padding-top:1.8rem;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:1.4rem;
  font-size:13px;
  color:var(--mut);
}
.footer-clock-wrap{
  display:flex;
  align-items:center;
  gap:.65rem;
}
.footer-live-beacon{
  position:relative;
  display:inline-flex;
  width:9px;
  height:9px;
}
.footer-ping{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:var(--acc);
  opacity:.75;
  animation:footerPing 2s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes footerPing{
  75%,100%{transform:scale(2.4);opacity:0}
}
.footer-dot{
  position:relative;
  display:inline-block;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--acc);
}
.footer-copy{
  font-size:13px;
}
/* ════════════════════════════════════════════════════════════════════════════
   ARCHITECTURAL FLOATING "BACK TO TOP" (Classy Glassmorphic Signature)
   ════════════════════════════════════════════════════════════════════════════ */
.footer-top-btn,
#back-to-top{
  position:fixed;
  right:4vw;
  bottom:calc(80px + env(safe-area-inset-bottom,0px));
  z-index:46;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(10,38,22,.14);
  color:var(--fg);
  font:inherit;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  gap:.75rem;
  cursor:pointer;
  padding:6px 7px 6px 16px;
  border-radius:999px;
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  box-shadow:0 12px 32px rgba(10,38,22,.08), 0 2px 8px rgba(10,38,22,.04), inset 0 1px 1px rgba(255,255,255,.8);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(14px) scale(.95);
  transition:opacity .4s cubic-bezier(.19,1,.22,1),
             transform .4s cubic-bezier(.19,1,.22,1),
             visibility .4s ease,
             background .35s ease,
             color .35s ease,
             border-color .35s ease,
             box-shadow .35s ease;
  user-select:none;
  outline:none;
}

#back-to-top.visible,
.footer-top-btn.visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0) scale(1);
}

:root[data-theme="dark"] .footer-top-btn,
:root[data-theme="dark"] #back-to-top,
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .footer-top-btn,
  :root:not([data-theme="light"]) #back-to-top{
    background:rgba(8,24,14,.84);
    border-color:rgba(255,255,255,.14);
    color:#f4faf6;
    box-shadow:0 14px 36px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.3), inset 0 1px 1px rgba(255,255,255,.12);
  }
}

.footer-top-btn:hover,
#back-to-top:hover{
  background:var(--acc);
  border-color:var(--acc);
  color:#ffffff;
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 16px 36px -4px rgba(0,160,85,.4), 0 0 0 1px rgba(0,160,85,.35);
}

:root[data-theme="dark"] .footer-top-btn:hover,
:root[data-theme="dark"] #back-to-top:hover,
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .footer-top-btn:hover,
  :root:not([data-theme="light"]) #back-to-top:hover{
    background:#00c066;
    border-color:#00c066;
    color:#06140c;
    box-shadow:0 16px 36px -4px rgba(0,192,102,.42), 0 0 0 1px rgba(0,192,102,.45);
  }
}

.footer-top-btn:active,
#back-to-top:active{
  transform:scale(.95) translateY(0);
  transition-duration:.12s;
}

.footer-top-text{
  display:inline-block;
  line-height:1;
  padding-top:1px;
}

.footer-top-icon{
  position:relative;
  overflow:hidden;
  width:28px;
  height:28px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(10,38,22,.06);
  color:currentColor;
  border:1px solid rgba(10,38,22,.08);
  transition:all .35s cubic-bezier(.19,1,.22,1);
}

:root[data-theme="dark"] .footer-top-icon,
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .footer-top-icon{
    background:rgba(255,255,255,.08);
    border-color:rgba(255,255,255,.12);
    color:currentColor;
  }
}

.footer-top-btn:hover .footer-top-icon,
#back-to-top:hover .footer-top-icon{
  background:rgba(255,255,255,.22);
  border-color:transparent;
  color:#ffffff;
}

:root[data-theme="dark"] .footer-top-btn:hover .footer-top-icon,
:root[data-theme="dark"] #back-to-top:hover .footer-top-icon,
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .footer-top-btn:hover .footer-top-icon,
  :root:not([data-theme="light"]) #back-to-top:hover .footer-top-icon{
    background:rgba(6,20,12,.18);
    border-color:transparent;
    color:#06140c;
  }
}

.footer-top-arrow{
  width:13px;
  height:13px;
}

.footer-top-arrow.arrow-1{
  position:absolute;
  transition:transform .4s cubic-bezier(.19,1,.22,1);
}

.footer-top-arrow.arrow-2{
  position:absolute;
  transform:translateY(135%);
  transition:transform .4s cubic-bezier(.19,1,.22,1);
}

.footer-top-btn:hover .footer-top-arrow.arrow-1,
#back-to-top:hover .footer-top-arrow.arrow-1{
  transform:translateY(-135%);
}

.footer-top-btn:hover .footer-top-arrow.arrow-2,
#back-to-top:hover .footer-top-arrow.arrow-2{
  transform:translateY(0);
}

@media (max-width:800px){
  .footer-top-btn,
  #back-to-top{
    bottom:calc(74px + env(safe-area-inset-bottom,0px));
    right:4vw;
    padding:0;
    width:44px;
    height:44px;
    border-radius:50%;
    justify-content:center;
  }
  .footer-top-btn .footer-top-text,
  #back-to-top .footer-top-text{
    display:none;
  }
  .footer-top-btn .footer-top-icon,
  #back-to-top .footer-top-icon{
    width:44px;
    height:44px;
    background:transparent;
    border:none;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   THE STRETCHY GIANT LOGO WATERMARK
   ════════════════════════════════════════════════════════════════════════════ */
.footer-giant-mark{
  pointer-events:none;
  position:relative;
  overflow:hidden;
  width:100%;
  padding:clamp(.5rem,2vw,1.5rem) 4vw clamp(1.8rem,4vw,3.2rem);
  user-select:none;
  will-change:transform,opacity;
  transform-origin:center bottom;
  transform:translate3d(0,35%,0) scale(1,1.15);
  opacity:0;
  transition:transform .12s ease-out,opacity .25s ease-out;
}
.footer-giant-scaler{
  width:100%;
  display:block;
}
.footer-giant-svg{
  display:block;
  width:100%;
  height:auto;
  max-height:clamp(170px,24vw,300px);
  filter:none!important;
}

/* Footer giant logo theme colors:
   - On brighter background: maintain green (#00a055)
   - On dark background: all white (#ffffff)
   - No glow around logo */
#giant-mark stop,
#giant-fade stop,
.footer-giant-svg #giant-mark stop,
.footer-giant-svg #giant-fade stop{
  stop-color:#00a055!important;
}

:root[data-theme="dark"] #giant-mark stop,
:root[data-theme="dark"] #giant-fade stop,
:root[data-theme="dark"] .footer-giant-svg #giant-mark stop,
:root[data-theme="dark"] .footer-giant-svg #giant-fade stop{
  stop-color:#ffffff!important;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) #giant-mark stop,
  :root:not([data-theme="light"]) #giant-fade stop,
  :root:not([data-theme="light"]) .footer-giant-svg #giant-mark stop,
  :root:not([data-theme="light"]) .footer-giant-svg #giant-fade stop{
    stop-color:#ffffff!important;
  }
}

@media (max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:2.2rem}
  .footer-brand-col{grid-column:span 2;padding-right:0}
  .footer-headline{font-size:clamp(2rem,7vw,3.4rem);max-width:100%}
  .footer-hero-wrap{gap:2rem}
}

@media (max-width:768px){
  .site-footer{
    overflow:hidden;
  }
  .footer-inner{
    padding:clamp(2rem,4.5vw,2.8rem) 4vw 1rem;
  }
  .footer-grid{
    grid-template-columns:1fr 1fr;
    gap:1.8rem 1.4rem;
  }
  .footer-brand-col{
    grid-column:span 2;
    padding-right:0;
  }
  .footer-col:last-child{
    grid-column:span 2;
  }
  .footer-utility-bar{
    margin-top:1.8rem;
    padding-top:1.2rem;
    flex-direction:column;
    align-items:flex-start;
    gap:.75rem;
  }
  .footer-giant-mark{
    position:relative;
    overflow:hidden;
    opacity:1 !important;
    transform:none !important;
    margin:0 !important;
    padding:0.4rem 4vw 1.2rem !important;
  }
  .footer-giant-svg{
    max-height:clamp(60px,16vw,120px);
  }
  #giant-mark stop,
  #giant-fade stop,
  #giant-depth stop,
  .footer-giant-svg #giant-mark stop,
  .footer-giant-svg #giant-fade stop,
  .footer-giant-svg #giant-depth stop{
    stop-opacity:1 !important;
    stop-color:#00570a !important;
  }
  .footer-giant-svg path,
  .footer-giant-svg text{
    fill:#00570a !important;
    opacity:1 !important;
  }
}

@media (max-width:480px){
  .footer-inner{
    padding:1.8rem 4vw .8rem;
  }
  .footer-grid{
    grid-template-columns:1fr 1fr;
    gap:1.4rem 1rem;
  }
  .footer-col-title{
    margin-bottom:.8rem;
  }
  .footer-nav-list{
    font-size:.88rem;
    gap:.5rem;
  }
  .footer-brand-desc{
    font-size:.85rem;
    line-height:1.6;
  }
  .footer-utility-bar{
    margin-top:1.4rem;
    padding-top:1rem;
  }
  .footer-giant-mark{
    padding:0.2rem 4vw 1rem !important;
  }
  .footer-giant-svg{
    max-height:clamp(50px,14vw,80px);
  }
}

:root[data-theme="dark"] .footer-giant-svg path,
:root[data-theme="dark"] .footer-giant-svg text{
  fill:#ffffff !important;
}

@media (max-width:768px) and (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) #giant-mark stop,
  :root:not([data-theme="light"]) #giant-fade stop,
  :root:not([data-theme="light"]) #giant-depth stop,
  :root:not([data-theme="light"]) .footer-giant-svg #giant-mark stop,
  :root:not([data-theme="light"]) .footer-giant-svg #giant-fade stop,
  :root:not([data-theme="light"]) .footer-giant-svg #giant-depth stop{
    stop-color:#ffffff !important;
    stop-opacity:1 !important;
  }
  :root:not([data-theme="light"]) .footer-giant-svg path,
  :root:not([data-theme="light"]) .footer-giant-svg text{
    fill:#ffffff !important;
    opacity:1 !important;
  }
}

@media (prefers-reduced-motion:reduce){
  .footer-giant-mark{
    transform:none!important;
    opacity:1!important;
    transition:none!important;
  }
  .footer-cta-circle,.footer-cta-fill,.footer-cta-arrow,.footer-ping{
    animation:none!important;
    transition:none!important;
  }
}