/* ==========================================
   RESET
========================================== */
*{ margin:0; padding:0; box-sizing:border-box; }

html, body{
  width:100%; overflow-x:hidden;
  background:var(--bg); color:var(--text);
  font-family: Inter, Arial, sans-serif;
}

:root{
  --bg:#07110C; --bg-deep:#050B07;
  --surface:#0B1811; --surface-soft:#102219; --surface-elevated:#142A1E;
  --green:#35F28B; --green-soft:#8CFFC1; --green-dark:#147A45;
  --text:#F2FFF7; --text-soft:#C8E1D2; --muted:#799987;
  --border:rgba(140,255,193,.14); --border-strong:rgba(53,242,139,.38);
  --border-hover:rgba(53,242,139,.55); --focus:rgba(140,255,193,.42);
  --cyan:var(--green); --cyan-soft:var(--green-soft);
  --magenta:var(--green-dark); --magenta-soft:var(--green-soft); --violet:var(--green-dark);
  --border-magenta:rgba(53,242,139,.28); --ease:cubic-bezier(.16,1,.3,1);
}

/* ==========================================
   EXPERIENCE WRAPPER
========================================== */
#experienceWrapper{
  opacity:0; pointer-events:none;
  position:relative; z-index:1;
}

/* ==========================================
   HEADER
========================================== */
#siteHeader{
  position:fixed; top:0; left:0; right:0;
  z-index:500; padding:0 44px; height:60px;
  display:flex; align-items:center;
  background:rgba(7,17,12,.64); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--border);
  transition:transform .4s ease, opacity .4s ease;
}

#siteHeader.hidden{ transform:translateY(-100%); opacity:0; }

#projectsHeader, #caseHeader, #caseHeaderINKKA{
  position:fixed; top:0; left:0; right:0;
  z-index:1300; padding:0 44px; height:60px;
  display:flex; align-items:center;
  background:rgba(7,17,12,.86);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
}

#caseHeader, #caseHeaderINKKA{ z-index:2100; }

.header-inner{
  width:100%; display:flex;
  align-items:center; justify-content:space-between;
}

.header-logo{ font-size:14px; font-weight:800; letter-spacing:4px; color:var(--cyan); }

.header-right{ display:flex; gap:36px; align-items:center; }
.header-left{ display:flex; align-items:center; }

.header-btn{
  background:transparent; border:none;
  color:rgba(248,250,252,.65); cursor:pointer;
  font-size:11px; letter-spacing:4px;
  padding:6px 0; text-decoration:none;
  transition:color .3s ease; white-space:nowrap;
  position:relative;
}

.header-btn::after{
  content:""; position:absolute;
  bottom:-2px; left:0; width:0; height:1px;
  background:var(--text);
  transition:width .35s cubic-bezier(.16,1,.3,1);
}

.header-btn:hover{ color:var(--text); }
.header-btn:hover::after{ width:100%; }

.header-btn-accent{ color:var(--cyan); }
.header-btn-accent:hover{ color:var(--text); }

/* ==========================================
   HERO
========================================== */
#hero{ position:relative; width:100%; height:100vh; }

#heroCanvas{
  position:fixed; inset:0; width:100vw; height:100vh;
  z-index:1; background:#000;
}

.hero-overlay{
  position:fixed; inset:0; z-index:2;
  background:linear-gradient(90deg,rgba(7,17,12,.94) 0%,rgba(7,17,12,.72) 38%,rgba(7,17,12,.12) 100%);
}

/* ==========================================
   WELCOME TYPEWRITER
========================================== */
#welcomeOverlay{
  position:relative; inset:auto;
  z-index:1; width:min(430px,100%); text-align:left; pointer-events:none;
  margin:0 0 clamp(24px,3vh,38px);
  padding:16px 20px 17px 24px;
  border-left:1px solid var(--cyan);
  border-top:1px solid rgba(121,242,255,.16);
  background:linear-gradient(105deg,rgba(8,9,16,.88),rgba(16,17,27,.5) 72%,transparent);
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%);
  box-shadow:inset 24px 0 40px rgba(53,242,139,.035),-12px 0 30px rgba(53,242,139,.035);
  transition:opacity .8s ease, transform .8s ease;
}
#welcomeOverlay::before{
  content:""; position:absolute; top:-1px; right:18px; width:58px; height:1px;
  background:var(--green); box-shadow:0 0 12px rgba(53,242,139,.55);
}
#welcomeOverlay::after{
  content:"2050 / FUTURE INTERFACE"; position:absolute; right:15px; bottom:8px;
  color:rgba(121,242,255,.18); font-size:7px; letter-spacing:2px;
}
#welcomeOverlay.hidden{ opacity:1; transform:none; }

.welcome-status{
  display:flex; align-items:center; gap:8px; margin-bottom:10px;
  color:var(--cyan); font-size:7px; font-weight:700; letter-spacing:3px;
}
.welcome-status::before{
  content:""; width:5px; height:5px; border-radius:50%; background:var(--cyan);
  box-shadow:0 0 0 4px rgba(53,242,139,.08),0 0 14px var(--green);
  animation:futureSignal 1.8s ease-in-out infinite;
}

.welcome-label{
  display:block; font-size:9px; font-weight:700; letter-spacing:6px;
  color:var(--cyan-soft); margin-bottom:2px; min-height:15px;
  text-shadow:0 0 18px rgba(53,242,139,.22);
}
.welcome-year{
  display:flex; align-items:center; gap:10px; font-size:clamp(34px,3.3vw,54px); font-weight:900;
  color:var(--text); letter-spacing:12px; line-height:1; min-height:56px;
  font-variant-numeric:tabular-nums; text-shadow:0 0 10px rgba(53,242,139,.2),0 0 35px rgba(20,122,69,.1);
}
.welcome-year>span:first-child,.welcome-year>span:last-child{
  color:var(--violet); font-size:.52em; font-weight:400; letter-spacing:0;
}
.tw-cursor{
  display:inline-block; width:2px; height:.85em;
  background:rgba(248,250,252,.25); margin-left:2px;
  vertical-align:middle; animation:blinkCursor .7s step-end infinite;
}
@keyframes blinkCursor{ 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes futureSignal{ 0%,100%{opacity:.35;transform:scale(.82)} 50%{opacity:1;transform:scale(1.12)} }

/* ==========================================
   CONTENT BLOCKS
========================================== */
.content-block{
  position:fixed;
  left:6vw !important;
  right:auto !important;
  top:44%;
  transform:translateY(-50%);
  width:100%; max-width:620px;
  z-index:100; color:var(--text);
  opacity:0; pointer-events:none;
  filter:blur(10px);
  transition:opacity .65s ease, filter .65s ease;
}

.content-block.active{ opacity:1; pointer-events:auto; filter:blur(0); }

/* glitch animations */
.content-block.glitch-out{ animation:glitchOut .3s ease forwards; }
.content-block.glitch-in{ animation:glitchIn .4s ease forwards; }

@keyframes glitchOut{
  0%{ opacity:1; transform:translateY(-50%) translateX(0); filter:blur(0); }
  30%{ transform:translateY(-50%) translateX(-5px); filter:blur(2px); clip-path:inset(10% 0 30% 0); }
  60%{ transform:translateY(-50%) translateX(5px); filter:blur(3px); opacity:.5; clip-path:inset(30% 0 10% 0); }
  100%{ opacity:0; transform:translateY(-50%); filter:blur(8px); clip-path:inset(0); }
}

@keyframes glitchIn{
  0%{ opacity:0; transform:translateY(-50%) translateX(0); filter:blur(8px); clip-path:inset(50% 0 50% 0); }
  30%{ transform:translateY(-50%) translateX(5px); filter:blur(3px); opacity:.4; clip-path:inset(20% 0 20% 0); }
  60%{ transform:translateY(-50%) translateX(-3px); filter:blur(1px); opacity:.8; clip-path:inset(5% 0 5% 0); }
  100%{ opacity:1; transform:translateY(-50%); filter:blur(0); clip-path:inset(0); }
}

.subtitle{
  display:block; margin-bottom:20px;
  font-size:11px; letter-spacing:7px; color:rgba(248,250,252,.4);
}

/* h-line — enters from sides */
.h-line{
  display:block; overflow:visible;
  font-size:clamp(48px,6vw,108px);
  line-height:.88; font-weight:800;
  transform:translateX(-40px); opacity:0;
  transition:transform .55s cubic-bezier(.16,1,.3,1), opacity .55s ease;
}
#introContent{max-width:680px}
.h-line:nth-child(2){ transform:translateX(40px); transition-delay:.08s; }
.h-line:nth-child(3){ transform:translateX(-40px); transition-delay:.16s; }
.h-accent{ color:rgba(248,250,252,.45); }

.content-block.active .h-line{
  transform:translateX(0); opacity:1;
}

.content-block h1, .content-block h2{
  margin-bottom:24px;
}

.content-block p{
  font-size:15px; line-height:1.9;
  max-width:580px; color:rgba(248,250,252,.55);
  transform:translateY(16px); opacity:0;
  transition:transform .55s ease .3s, opacity .55s ease .3s;
}
.content-block.active p{ transform:translateY(0); opacity:1; }

.intro-sub{
  font-size:18px !important; color:rgba(248,250,252,.7) !important;
  opacity:1 !important; transform:none !important;
  transition:none !important; line-height:1.5 !important;
}

.skill-list{ color:rgba(248,250,252,.4); font-size:13px; letter-spacing:1px; }

/* ==========================================
   SCROLL TRACK
========================================== */
.scroll-track{ height:9000px; position:relative; z-index:0; }

/* ==========================================
   LOADING
========================================== */
#loadingScreen{
  position:fixed; inset:0; z-index:10000; background:#0A0A0A;
  display:none; align-items:center; justify-content:center;
  flex-direction:column; text-align:center;
}
.loading-content{ color:var(--text); }
.loading-content span{ display:block; margin-bottom:20px; font-size:11px; letter-spacing:8px; color:var(--muted); }
#loadingPercent{ font-size:80px; font-weight:800; color:var(--cyan); }

/* ==========================================
   ENTER BUTTON
========================================== */
#enterBtn{
  margin-top:0; background:transparent;
  border:none; border-bottom:1px solid rgba(255,255,255,.2);
  color:rgba(248,250,252,.65); padding:10px 0;
  font-size:13px; letter-spacing:5px; cursor:pointer;
  transition:.3s ease; display:inline-block;
}
#enterBtn.is-entry-loading{
  border-color:rgba(140,255,193,.56);
  color:var(--green-soft);
}
#enterBtn:hover{ color:var(--text); border-bottom-color:rgba(255,255,255,.5); }

.archive-entry-control{width:min(100%,330px);margin-top:36px}
.archive-entry-hint{
  position:fixed;
  z-index:520;
  left:50%;
  bottom:max(26px,env(safe-area-inset-bottom));
  width:min(420px,calc(100vw - 40px));
  opacity:0;
  visibility:hidden;
  transform:translate3d(-50%,12px,0);
  transition:opacity .28s ease,transform .36s cubic-bezier(.2,.72,.2,1),visibility .28s;
  pointer-events:none;
}
#projectsContent.active ~ .archive-entry-hint{
  opacity:1;
  visibility:visible;
  transform:translate3d(-50%,0,0);
  pointer-events:auto;
}
#projectsContent.active ~ #scrollHint{opacity:0;visibility:hidden}
.archive-touch-prompt{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  width:100%;
  margin-top:12px;
  padding:10px 12px;
  overflow:hidden;
  border:1px solid rgba(53,242,139,.42);
  background:linear-gradient(100deg,rgba(7,17,12,.92),rgba(11,35,23,.78));
  color:var(--green-soft);
  box-shadow:inset 0 0 24px rgba(53,242,139,.035),0 10px 30px rgba(0,0,0,.22);
  cursor:pointer;
  text-align:left;
  font:700 8px/1.2 Consolas,"SFMono-Regular",monospace;
  letter-spacing:2px;
  transition:border-color .25s ease,background-color .25s ease,color .25s ease;
}
.archive-touch-prompt::before{
  content:"";
  position:absolute;
  inset:0;
  width:var(--entry-progress,0%);
  background:rgba(53,242,139,.09);
  pointer-events:none;
}
.archive-touch-prompt span,.archive-touch-prompt small{position:relative;z-index:1}
.archive-touch-prompt small{color:rgba(140,255,193,.68);font-size:7px;letter-spacing:1.2px}
.archive-touch-prompt:hover,.archive-touch-prompt:focus-visible,.archive-touch-prompt.is-entry-loading{
  border-color:rgba(140,255,193,.48);
  background:rgba(11,24,17,.72);
  color:var(--text);
}
.archive-hold-progress{width:100%;margin-top:10px;padding:0 2px;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .22s ease,transform .22s ease,visibility .22s;pointer-events:none}
.archive-hold-progress.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
.archive-hold-meta{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:8px;color:var(--green-soft);font-size:9px;font-weight:700;letter-spacing:2.4px}
.archive-hold-track{width:100%;height:2px;overflow:hidden;background:rgba(140,255,193,.13)}
.archive-hold-fill{display:block;width:0%;height:100%;background:var(--green);box-shadow:0 0 8px rgba(53,242,139,.32);transition:width .16s linear}

/* ==========================================
   NAV MAP
========================================== */
#navMap{
  position:fixed; right:44px; top:50%;
  transform:translateY(-50%); z-index:300;
  display:flex; flex-direction:column; align-items:flex-end; gap:15px;
}

.nav-item{
  display:flex; align-items:center; gap:10px;
  justify-content:flex-end;
  opacity:.24;
  transform:scale(.84);
  transform-origin:right center;
  transition:
    transform .5s cubic-bezier(.16,1,.3,1),
    opacity .35s ease,
    filter .35s ease;
  cursor:pointer; user-select:none;
  padding:8px 4px;
  will-change:transform;
}

.nav-item:hover{
  opacity:.78;
  transform:scale(1.06);
}
.nav-item.active{
  opacity:1;
  transform:scale(1.2);
  filter:drop-shadow(0 0 8px rgba(53,242,139,.12));
}
.nav-item.active:hover{ transform:scale(1.24); }

.nav-dot{
  width:5px; height:5px; border-radius:50%;
  background:rgba(248,250,252,.2);
  transition:transform .5s cubic-bezier(.16,1,.3,1),background-color .35s ease,box-shadow .35s ease;
  flex-shrink:0;
}
.nav-item.active .nav-dot{
  background:var(--text); box-shadow:0 0 8px rgba(248,250,252,.3);
  transform:scale(1.35);
}

.nav-label{
  font-size:9px;
  font-weight:700;
  letter-spacing:2.6px;
  color:var(--text);
  white-space:nowrap;
}

/* ==========================================
   SCROLL HINT
========================================== */
#scrollHint{
  position:fixed; left:50%; bottom:36px;
  transform:translateX(-50%); z-index:250;
  text-align:center; color:var(--text);
  pointer-events:auto; cursor:pointer;
  padding:16px 28px;
}
#scrollHint:hover .hint-title{ color:rgba(248,250,252,.7); }
#scrollHint:hover #nextSectionText{ opacity:.8; }
.hint-title{
  display:block; font-size:11px; letter-spacing:5px;
  color:rgba(248,250,252,.45); margin-bottom:8px;
  animation:glitchPulse 2.5s infinite;
}
#nextSectionText{
  display:block; font-size:12px; opacity:.5;
  letter-spacing:2px; color:rgba(248,250,252,.5);
}

/* ==========================================
   TRANSITION
========================================== */
#transitionSection{
  position:fixed; inset:0; z-index:1000;
  opacity:0; visibility:hidden; pointer-events:none; background:#000;
}
#transitionCanvas{ width:100vw; height:100vh; }

/* ==========================================
   PROJECTS UNIVERSE
========================================== */
#projectsUniverse{
  position:fixed; inset:0; z-index:1200;
  opacity:0; visibility:hidden; pointer-events:none;
  overflow-x:hidden; overflow-y:auto; background:#0A0A0A;
}

.radial-glow{
  position:fixed; width:1000px; height:1000px;
  left:50%; top:30%; transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(53,242,139,.08) 0%,rgba(20,122,69,.025) 42%,transparent 70%);
  filter:blur(100px); animation:auraMove 8s ease-in-out infinite;
  pointer-events:none;
}

.particles{
  position:fixed; inset:0; opacity:.06;
  background-image:radial-gradient(rgba(248,250,252,.3) 1px,transparent 1px);
  background-size:90px 90px;
  animation:particlesMove 40s linear infinite; pointer-events:none;
}

.projects-inner{
  position:relative; max-width:1160px;
  margin:0 auto; padding:110px 60px 80px; z-index:5;
}

.projects-inner>h2{
  font-size:clamp(56px,7vw,120px);
  line-height:.85; margin-bottom:16px;
}
.projects-inner>p{ font-size:15px; opacity:.4; line-height:2; margin-bottom:56px; }

/* ==========================================
   PROJECT CARDS
========================================== */
.projects-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
  gap:24px; margin-bottom:80px;
}

.project-card{
  background:rgba(255,255,255,.02);
  border:1px solid var(--border);
  overflow:hidden; cursor:pointer;
  transition:transform .4s ease,border-color .4s ease,box-shadow .4s ease; position:relative;
}
.project-card:hover{
  border-color:rgba(255,255,255,.15);
  transform:translateY(-4px);
}

.project-card-soon{ opacity:.4; cursor:default; }
.project-card-soon:hover{ transform:none; border-color:var(--border); }

.project-card-img{
  width:100%; height:210px;
  background-size:cover; background-position:center; background-color:#111;
  position:relative;
}
.project-card-img::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom,transparent 50%,rgba(10,10,10,.7));
}
.project-card-img-soon{
  background:repeating-linear-gradient(
    45deg, #111 0px, #111 10px, #0d0d0d 10px, #0d0d0d 20px
  );
}

.project-card-body{ padding:24px; }

.project-card-tags{ margin-bottom:10px; display:flex; gap:8px; flex-wrap:wrap; }
.tag{
  font-size:10px; letter-spacing:3px; color:rgba(248,250,252,.45);
  border:1px solid rgba(255,255,255,.1); padding:5px 14px;
}
.tag-cat{ color:rgba(248,250,252,.25); }

.project-card-body h3{
  font-size:20px; font-weight:800; color:var(--text);
  margin-bottom:8px; letter-spacing:1px;
}
.card-hook{
  font-size:13px; color:rgba(248,250,252,.45);
  line-height:1.7; margin-bottom:20px;
}

.view-case-btn{
  background:transparent; border:none;
  border-bottom:1px solid rgba(255,255,255,.18);
  color:rgba(248,250,252,.5); font-size:10px;
  letter-spacing:4px; padding:5px 0; cursor:pointer;
  transition:.3s ease;
}
.view-case-btn:hover{ color:var(--text); border-bottom-color:rgba(255,255,255,.4); }

.coming-soon-label{
  display:inline-block; font-size:9px; letter-spacing:4px;
  color:rgba(248,250,252,.25); border:1px solid rgba(255,255,255,.06);
  padding:4px 12px;
}

/* ==========================================
   SERVICES SECTION
========================================== */
.sky-capabilities{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  display:grid;
  grid-template-rows:auto auto;
  align-content:center;
  gap:clamp(28px,4vw,64px);
  padding:clamp(44px,6vw,96px) clamp(28px,7vw,110px);
  color:#f5fbff;
  background:
    radial-gradient(ellipse at 16% 12%,rgba(255,255,255,.78) 0%,rgba(210,241,255,.34) 18%,transparent 42%),
    radial-gradient(ellipse at 88% 34%,rgba(205,239,255,.55),transparent 34%),
    linear-gradient(155deg,#b9e9ff 0%,#75c9ef 38%,#39a4d2 72%,#177aa7 100%);
  isolation:isolate;
}
.sky-capabilities::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.72;
  background:
    radial-gradient(ellipse at 8% 72%,rgba(255,255,255,.28),transparent 24%),
    radial-gradient(ellipse at 72% 8%,rgba(255,255,255,.22),transparent 21%),
    linear-gradient(115deg,transparent 38%,rgba(255,255,255,.28) 49%,transparent 61%);
  pointer-events:none;
}
.sky-capabilities::after{content:"";position:absolute;z-index:-1;left:-8%;right:-8%;bottom:-34%;height:70%;opacity:.28;transform:perspective(520px) rotateX(62deg);transform-origin:center bottom;background-image:linear-gradient(rgba(3,43,65,.42) 1px,transparent 1px),linear-gradient(90deg,rgba(3,43,65,.42) 1px,transparent 1px);background-size:54px 54px;mask-image:linear-gradient(to top,#000,transparent 82%);pointer-events:none}
.future-sky-visual{position:absolute;z-index:-1;inset:0;overflow:hidden;pointer-events:none}
.future-portal{position:absolute;left:50%;top:4%;width:min(92%,1180px);height:auto;opacity:.52;transform:translateX(-50%)}
.future-orbit{fill:none;stroke:url(#futureLine);stroke-width:1.15;transform-box:fill-box;transform-origin:center}
.future-orbit-a{animation:futureOrbitA 18s linear infinite}
.future-orbit-b{opacity:.64;animation:futureOrbitB 24s linear infinite reverse}
.future-core{fill:url(#futureGlass);stroke:rgba(10,92,55,.68);stroke-width:1.15;transform-box:fill-box;transform-origin:center;animation:futureCoreFloat 7s ease-in-out infinite}
.future-core circle{fill:#35F28B;stroke:#0A3B24;stroke-width:1;filter:drop-shadow(0 0 7px rgba(53,242,139,.34))}
.future-data-lines{fill:none;stroke:rgba(10,92,55,.42);stroke-width:1;stroke-dasharray:6 10}
.future-coordinate,.future-signal{position:absolute;color:rgba(7,74,43,.72);font:700 8px/1 Consolas,"SFMono-Regular",monospace;letter-spacing:2.6px}
.future-coordinate-a{left:4.5%;top:18%}
.future-coordinate-b{right:4.5%;top:31%}
.future-signal{right:8%;bottom:9%;padding-left:15px}
.future-signal::before{content:"";position:absolute;left:0;top:50%;width:6px;height:6px;border-radius:50%;background:#147A45;box-shadow:0 0 7px rgba(53,242,139,.32);transform:translateY(-50%);animation:futureSignalPulse 2.4s ease-in-out infinite}
@keyframes futureOrbitA{to{transform:rotate(360deg)}}
@keyframes futureOrbitB{to{transform:rotate(360deg)}}
@keyframes futureCoreFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(9px) scale(1.015)}}
@keyframes futureSignalPulse{0%,100%{opacity:.35;transform:translateY(-50%) scale(.75)}50%{opacity:1;transform:translateY(-50%) scale(1)}}
.sky-capabilities .subtitle{color:#063d59;text-shadow:0 1px rgba(255,255,255,.28)}
.services-section{
  border-top:1px solid rgba(4,45,68,.22);
  padding-top:clamp(22px,3vw,48px); margin:0;
}

.services-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:32px; margin-top:32px;
}

.sky-capabilities .service-item{position:relative;overflow:hidden;padding:clamp(18px,2vw,30px);border:1px solid rgba(213,243,255,.3);background:linear-gradient(145deg,rgba(4,24,36,.96),rgba(7,46,65,.92));box-shadow:0 22px 46px rgba(2,43,65,.28),inset 0 1px rgba(255,255,255,.07);transition:border-color .3s ease,background .3s ease,box-shadow .3s ease}
.sky-capabilities .service-item::after{content:"";position:absolute;right:-22px;bottom:-28px;width:76px;height:76px;border:1px solid rgba(125,214,255,.12);transform:rotate(45deg);pointer-events:none}
@media(hover:hover) and (pointer:fine){.sky-capabilities .service-item:hover{border-color:rgba(224,247,255,.58);background:linear-gradient(145deg,#071d2a,#0a4059);box-shadow:0 28px 55px rgba(2,43,65,.35),inset 0 1px rgba(255,255,255,.1)}}
.sky-capabilities .service-num{color:#78d6ff}
.sky-capabilities .service-item h4{color:#fff}
.sky-capabilities .service-item p{color:rgba(220,243,252,.68)}
.service-num{
  display:block; font-size:9px; letter-spacing:4px;
  color:rgba(248,250,252,.2); margin-bottom:12px;
}
.service-item h4{
  font-size:14px; font-weight:700; color:var(--text);
  letter-spacing:1px; margin-bottom:10px;
}
.service-item p{ font-size:12px; color:var(--muted); line-height:1.8; }

/* ==========================================
   SKILLS SECTION
========================================== */
.skills-section{
  border-top:1px solid rgba(4,45,68,.22);
  padding-top:clamp(22px,3vw,48px); margin:0;
}

.skills-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:32px; margin-top:32px;
}

.skill-group h5{
  font-size:9px; letter-spacing:5px; color:var(--muted);
  margin-bottom:16px;
}
.skill-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.skill-tags span{
  font-size:10px; letter-spacing:2px; color:rgba(248,250,252,.5);
  border:1px solid var(--border); padding:5px 12px;
}
.sky-capabilities .skill-group{position:relative;overflow:hidden;background:linear-gradient(135deg,rgba(4,29,43,.91),rgba(9,57,77,.87));border:1px solid rgba(218,244,255,.28);box-shadow:0 18px 42px rgba(2,43,65,.2),inset 0 1px rgba(255,255,255,.06)}
.sky-capabilities .skill-group h5{color:#a8e5ff}
.sky-capabilities .skill-tags span{color:#eefaff;background:rgba(3,20,30,.52);border-color:rgba(179,229,250,.2)}
.sky-capabilities .skill-tags span::before{background:#67d0ff;box-shadow:none}

@media(max-width:700px){
  .sky-capabilities{aspect-ratio:9/16;grid-template-rows:auto 1fr;align-content:start;gap:22px;padding:30px 16px 24px}
  .sky-capabilities .services-section,.sky-capabilities .skills-section{padding-top:18px}
  .sky-capabilities .services-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:16px}
  .sky-capabilities .service-item{min-height:104px;padding:12px 11px}
  .sky-capabilities .service-num{margin-bottom:7px;font-size:7px}
  .sky-capabilities .service-item h4{margin-bottom:6px;font-size:11px;line-height:1.25}
  .sky-capabilities .service-item p{font-size:8.5px;line-height:1.45}
  .sky-capabilities .skills-grid{grid-template-columns:1fr;gap:8px;margin-top:14px}
  .sky-capabilities .skill-group{padding:11px 12px}
  .sky-capabilities .skill-group h5{margin-bottom:8px;font-size:7px;letter-spacing:3px}
  .sky-capabilities .skill-tags{gap:5px}
  .sky-capabilities .skill-tags span{padding:4px 8px;font-size:7px;letter-spacing:1px}
  .sky-capabilities::after{bottom:-18%;height:42%;background-size:34px 34px}
  .future-portal{top:10%;width:160%;opacity:.25}
  .future-coordinate{font-size:6px;letter-spacing:1.5px}
  .future-coordinate-a{left:5%;top:8%}
  .future-coordinate-b{right:5%;top:39%}
  .future-signal{right:6%;bottom:5%;font-size:6px}
}

/* ==========================================
   HERSHOP CASE STUDY
========================================== */
.hs-case-study{
  --case-bg:#090707;
  --case-surface:#160a0e;
  --case-surface-soft:#2a0d16;
  --case-text:#faf6f1;
  --case-copy:#d9ccc8;
  --case-muted:#a89691;
  --case-accent:#dfc47f;
  background:radial-gradient(circle at 85% 8%,rgba(84,21,36,.34),transparent 32rem),linear-gradient(180deg,#090707,#14080d 45%,#090707);
  scrollbar-color:rgba(223,196,127,.5) #090707;
}
.hs-case-study::before{background:linear-gradient(rgba(223,196,127,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(223,196,127,.025) 1px,transparent 1px);background-size:64px 64px}
.hs-case-study>header{background:rgba(9,7,7,.86);border-bottom-color:rgba(223,196,127,.15)}
.hs-case-study .hs-hero-copy h1{max-width:none;color:#a72b52}
.hs-case-study .hs-hero-copy h1 span{display:block;color:#3d7745}
.hs-hero-visual{background:#2a0d16;border-color:rgba(223,196,127,.22)}
.hs-shopify-proof{position:relative;margin:clamp(72px,8vw,112px) 0 0;padding:clamp(24px,3.5vw,48px);display:grid;grid-template-columns:clamp(82px,9vw,132px) minmax(0,1fr) auto;gap:clamp(24px,4vw,58px);align-items:center;overflow:hidden;background:linear-gradient(112deg,rgba(42,13,22,.92),rgba(9,7,7,.96) 62%);border:1px solid rgba(223,196,127,.2);box-shadow:inset 0 1px rgba(255,255,255,.025)}
.hs-shopify-proof::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(149,191,71,.07),transparent 28%),linear-gradient(rgba(223,196,127,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(223,196,127,.025) 1px,transparent 1px);background-size:auto,32px 32px,32px 32px}
.hs-shopify-mark{position:relative;aspect-ratio:1;display:grid;place-items:center;padding:18%;background:#0c0909;border:1px solid rgba(149,191,71,.24);clip-path:polygon(0 0,84% 0,100% 16%,100% 100%,0 100%)}
.hs-shopify-mark img{display:block;width:100%;height:100%;object-fit:contain;filter:saturate(.72) brightness(.9)}
.hs-shopify-copy{position:relative;max-width:780px}
.hs-shopify-copy span{display:block;margin-bottom:12px;color:#95bf47;font:700 10px/1.2 Consolas,monospace;letter-spacing:2.6px}
.hs-shopify-copy h2{margin:0 0 12px;color:var(--case-text);font-size:clamp(28px,3.2vw,48px);line-height:1;letter-spacing:-.04em;text-wrap:balance}
.hs-shopify-copy p{max-width:680px;margin:0;color:var(--case-copy);font-size:15px;line-height:1.7;text-wrap:pretty}
.hs-shopify-status{position:relative;align-self:start;padding:9px 12px;color:var(--case-accent);border:1px solid rgba(223,196,127,.22);font:700 9px/1 Consolas,monospace;letter-spacing:1.7px;white-space:nowrap}
.hs-overview{margin:clamp(120px,14vw,190px) 0;display:grid;grid-template-columns:minmax(180px,.48fr) minmax(0,1.15fr) minmax(240px,.7fr);gap:clamp(36px,6vw,90px);align-items:start}
.hs-overview h2,.hs-section-heading h2{margin:0;color:var(--case-text);font-size:clamp(42px,5vw,76px);line-height:.96;letter-spacing:-.05em;text-wrap:balance}
.hs-overview p,.hs-section-heading p{color:var(--case-copy);font-size:17px;line-height:1.75;text-wrap:pretty}
.hs-overview dl{margin:0;border-top:1px solid rgba(223,196,127,.2)}
.hs-overview dl div{padding:16px 0;border-bottom:1px solid rgba(223,196,127,.12)}
.hs-overview dt{margin-bottom:5px;color:var(--case-accent);font:700 10px/1.2 Consolas,monospace;letter-spacing:2px}
.hs-overview dd{margin:0;color:var(--case-copy);font-size:13px;line-height:1.5}
.hs-palette,.hs-stack-section,.hs-responsive{margin:0 0 clamp(130px,15vw,210px)}
.hs-section-heading{max-width:900px;margin-bottom:clamp(44px,6vw,84px)}
.hs-section-heading p{max-width:680px}
.hs-palette-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));min-height:390px;border:1px solid rgba(223,196,127,.16)}
.hs-palette-grid article{position:relative;min-width:0;padding:190px 18px 22px;display:flex;flex-direction:column;gap:9px;background:var(--swatch);isolation:isolate}
.hs-palette-grid article::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 32%,rgba(0,0,0,.84));z-index:-1}
.hs-palette-grid strong{color:#faf6f1;font-size:14px;line-height:1.3}
.hs-palette-grid code{color:#dfc47f;font-size:11px}
.hs-palette-grid p{margin:auto 0 0;color:rgba(250,246,241,.7);font-size:11px;line-height:1.55}
.hs-case-stack{position:relative;padding-bottom:clamp(100px,12vw,170px)}
.hs-case-card{position:sticky;top:clamp(84px,10vh,120px);min-height:min(720px,76vh);margin-bottom:clamp(90px,12vh,150px);padding:clamp(18px,2.5vw,34px);display:grid;grid-template-columns:minmax(250px,.42fr) minmax(0,1.58fr);gap:clamp(28px,4vw,64px);align-items:center;background:linear-gradient(145deg,#160a0e,#090707);border:1px solid rgba(223,196,127,.22);box-shadow:0 24px 70px rgba(0,0,0,.34);transform-origin:50% 8%;will-change:transform,opacity}
.hs-case-card:nth-child(2n){transform:rotate(.25deg)}
.hs-case-card:nth-child(3n){transform:rotate(-.2deg)}
.hs-case-card-light{background:#faf6f1;border-color:rgba(84,21,36,.2)}
.hs-case-card-light .hs-card-copy h3{color:#2a0d16}.hs-case-card-light .hs-card-copy li{color:#541524}.hs-case-card-light .hs-card-copy span{color:#3d7745}
.hs-case-card img{display:block;width:100%;max-height:66vh;object-fit:contain;background:#090707}
.hs-case-card-portrait img{width:auto;max-width:100%;max-height:68vh;justify-self:center}
.hs-card-copy span,.hs-video-panel>div>span{display:block;margin-bottom:18px;color:var(--case-accent);font:700 10px/1.2 Consolas,monospace;letter-spacing:3px}
.hs-card-copy h3,.hs-video-panel h3{margin:0 0 24px;color:var(--case-text);font-size:clamp(30px,3.4vw,52px);line-height:1;letter-spacing:-.04em;text-wrap:balance}
.hs-card-copy ul{margin:0;padding:0;display:grid;gap:12px;list-style:none}
.hs-card-copy li{position:relative;padding-left:18px;color:var(--case-copy);font-size:13px;line-height:1.6}
.hs-card-copy li::before{content:"";position:absolute;left:0;top:.7em;width:6px;height:1px;background:var(--case-accent)}
.hs-responsive{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:clamp(32px,5vw,72px);align-items:start}
.hs-responsive>.hs-section-heading{grid-column:1/-1}
.hs-video-panel{display:flex;flex-direction:column;gap:26px;min-width:0}
.hs-video-panel>div{max-width:640px}
.hs-video-panel p{color:var(--case-copy);font-size:15px;line-height:1.7}
.hs-video-panel video{display:block;width:100%;object-fit:contain;background:#050303;border:1px solid rgba(223,196,127,.2)}
.hs-video-desktop video{aspect-ratio:16/9}.hs-video-mobile video{aspect-ratio:9/16;max-height:72vh}
.hs-case-next{grid-template-columns:minmax(340px,.82fr) minmax(0,1.18fr);background:linear-gradient(135deg,#2a0d16,#090707)}
.hs-case-next .case-next-copy{min-width:0}
.hs-case-next .case-next-copy h2{max-width:100%;font-size:clamp(48px,5.4vw,82px);line-height:.88;letter-spacing:-.06em;overflow-wrap:normal}

@media(max-width:1024px){
  .hs-palette-grid{grid-template-columns:repeat(4,1fr)}
  .hs-palette-grid article{min-height:280px;padding-top:135px}
  .hs-overview{grid-template-columns:160px 1fr}.hs-overview dl{grid-column:2}
  .selected-work-stage .project-entry-hershop{right:2%;top:31%;width:clamp(205px,25vw,270px)}
}
@media(max-width:700px){
  .selected-work-phone-project-hershop .selected-work-phone-card{border-color:rgba(223,196,127,.38)}
  .selected-work-phone-project-hershop .selected-work-phone-card-info{border-left-color:#f11f2d}
  .hs-shopify-proof{margin-top:64px;padding:22px;grid-template-columns:68px minmax(0,1fr);gap:18px}
  .hs-shopify-copy span{font-size:8px;letter-spacing:1.7px}
  .hs-shopify-copy h2{font-size:clamp(25px,8vw,34px)}
  .hs-shopify-copy p{grid-column:1/-1;font-size:14px;line-height:1.65}
  .hs-shopify-status{grid-column:1/-1;justify-self:start;margin-top:2px}
  .hs-overview{display:block;margin:88px 0}.hs-overview>div{margin-bottom:36px}.hs-overview dl{margin-top:34px}
  .hs-palette-grid{grid-template-columns:repeat(2,1fr);min-height:0}
  .hs-palette-grid article{min-height:230px;padding:112px 14px 18px}.hs-palette-grid article:last-child{grid-column:1/-1}
  .hs-case-stack{
    display:grid;
    gap:clamp(24px,7vw,36px);
    padding-bottom:clamp(48px,14vw,72px)
  }
  .hs-case-card{
    position:relative;
    top:auto;
    width:100%;
    height:auto;
    min-height:0;
    margin:0;
    padding:clamp(14px,4vw,18px);
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:clamp(16px,4vw,22px);
    overflow:visible;
    opacity:1!important;
    transform:none!important;
    will-change:auto
  }
  .hs-case-card img{
    order:initial;
    width:100%;
    height:auto;
    min-height:0;
    max-height:none;
    object-fit:contain
  }
  .hs-case-card-portrait img{
    width:auto;
    max-width:100%;
    max-height:78svh;
    margin-inline:auto
  }
  .hs-card-copy{order:initial;min-height:0}
  .hs-card-copy span{margin-bottom:10px;font-size:9px;letter-spacing:2px}
  .hs-card-copy h3{margin-bottom:14px;font-size:clamp(24px,7vw,32px);line-height:1}
  .hs-card-copy ul{gap:8px}
  .hs-card-copy li{padding-left:14px;font-size:12px;line-height:1.55}
  .hs-card-copy li::before{width:5px}
  .hs-responsive{display:flex;flex-direction:column}.hs-video-mobile{width:min(100%,390px);margin-inline:auto}
}
@media(prefers-reduced-motion:reduce){.hs-case-card{transform:none!important}}

/* ==========================================
   NEW SITE FOOTER
========================================== */
.site-footer{
  opacity:0;
  --footer-bg:#050706; --footer-surface:#0b0f0d; --footer-surface-hover:#111713;
  --footer-text:#f1f5f2; --footer-muted:#89958e; --footer-border:rgba(241,245,242,.11);
  position:relative; isolation:isolate; overflow:hidden;
  left:50%; width:calc(100dvw - 24px); max-width:none; transform:translateX(calc(-50% + 7px));
  margin-top:clamp(90px,10vw,140px); margin-bottom:-80px; padding:clamp(72px,7vw,108px) clamp(20px,2vw,28px) 28px;
  background:linear-gradient(145deg,#030504 0%,var(--footer-bg) 48%,#080b09 100%);
  border:1px solid var(--footer-border); color:var(--footer-text);
}
.site-footer::before{
  content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:
    linear-gradient(rgba(140,255,193,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(140,255,193,.045) 1px,transparent 1px),
    linear-gradient(rgba(241,245,242,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(241,245,242,.035) 1px,transparent 1px);
  background-size:32px 32px,32px 32px,128px 128px,128px 128px;
  mask-image:linear-gradient(to bottom,#000 8%,rgba(0,0,0,.82) 70%,transparent 100%);
}
.site-footer::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(circle at 82% 28%,rgba(53,242,139,.055),transparent 34%),radial-gradient(circle at 15% 90%,rgba(255,255,255,.028),transparent 33%);
}
.footer-ghost{position:absolute;z-index:-1;pointer-events:none;user-select:none;font-weight:900;line-height:.72;letter-spacing:-.085em;color:transparent;-webkit-text-stroke:1px rgba(241,245,242,.055);text-shadow:0 1px rgba(255,255,255,.02),0 -1px rgba(0,0,0,.9)}
.footer-ghost-2050{left:-1%;top:7%;font-size:clamp(140px,19vw,300px)}
.footer-brain-stage{position:absolute;z-index:-1;right:clamp(10px,4vw,70px);top:3%;width:min(34vw,500px);opacity:.13;pointer-events:none}
.footer-brain{display:block;width:100%;height:auto;animation:footerBrainFloat 8s ease-in-out infinite;transform-origin:62% 48%}
.footer-brain-lines path{stroke-dasharray:1;stroke-dashoffset:1}
@keyframes footerBrainFloat{0%,100%{transform:translate3d(0,0,0) rotate(-1deg)}50%{transform:translate3d(-6px,8px,0) rotate(1deg)}}
.site-footer-inner{position:relative;z-index:2;width:100%;max-width:none;margin:0}
.footer-intro{max-width:800px;margin-bottom:38px}
.footer-kicker{display:inline-flex;align-items:center;gap:9px;margin-bottom:24px;color:var(--green-soft);font:700 10px/1.2 Consolas,monospace;letter-spacing:4px}
.footer-kicker::before{content:"";width:24px;height:1px;background:var(--green)}
.footer-intro h2{max-width:800px;margin:0 0 22px;font-size:clamp(50px,5.6vw,82px);font-weight:900;line-height:.9;letter-spacing:-.05em;text-wrap:balance}
.footer-intro h2 span{color:#b9d7c5}
.footer-intro p{max-width:660px;margin:0;color:var(--footer-muted);font-size:clamp(14px,1.25vw,18px);line-height:1.8;text-wrap:pretty}
.footer-actions{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:clamp(52px,6vw,78px)}
.footer-btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:space-between;gap:16px;min-width:0;min-height:54px;padding:0 16px;overflow:hidden;border:1px solid var(--footer-border);background:rgba(11,15,13,.82);color:var(--footer-text);font:700 9px/1 Consolas,monospace;letter-spacing:1.8px;text-decoration:none;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:rgba(53,242,139,.12);transition:transform .3s var(--ease),border-color .3s ease,background-color .3s ease,color .3s ease,box-shadow .3s ease}
.footer-btn::before{content:"";position:absolute;inset:0;z-index:-1;transform:translateX(-125%);background:linear-gradient(105deg,transparent,rgba(255,255,255,.16),transparent);transition:transform .55s var(--ease)}
.footer-btn:hover::before,.footer-btn:focus-visible::before{transform:translateX(125%)}
.footer-btn i{font-style:normal;font-size:14px;transition:transform .3s var(--ease)}
.footer-btn:hover,.footer-btn:focus-visible{transform:translateY(-2px);border-color:var(--green);background:rgba(53,242,139,.12);color:var(--green-soft);box-shadow:inset 3px 0 0 var(--green),inset 0 0 24px rgba(53,242,139,.08)}
.footer-btn:hover i,.footer-btn:focus-visible i{transform:translate(4px,-1px)}
.footer-btn:focus-visible,.footer-project:focus-visible{outline:2px solid var(--green-soft);outline-offset:3px}
.footer-facebook:hover,.footer-facebook:focus-visible{color:#8DBBFF;border-color:#1877F2;background:rgba(24,119,242,.1);box-shadow:inset 0 0 22px rgba(24,119,242,.12)}
.footer-whatsapp:hover,.footer-whatsapp:focus-visible{color:#8CFFB7;border-color:#25D366;background:rgba(37,211,102,.1);box-shadow:inset 0 0 22px rgba(37,211,102,.12)}
.footer-work{padding-top:26px;border-top:1px solid var(--footer-border)}
.footer-section-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}
.footer-section-head h3,.footer-section-head span{font:700 9px/1.2 Consolas,monospace;letter-spacing:3px}
.footer-section-head h3{color:#b9d7c5}.footer-section-head span{color:var(--footer-muted)}
.footer-projects{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.footer-project{position:relative;min-width:0;min-height:76px;padding:0;overflow:hidden;border:1px solid var(--footer-border);background:rgba(11,15,13,.88);color:var(--footer-text);text-align:left;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:rgba(53,242,139,.12);transition:transform .4s var(--ease),border-color .35s ease,background-color .35s ease,color .35s ease,box-shadow .35s ease}
.footer-project::before{content:"";position:absolute;inset:0;pointer-events:none;transform:translateX(-120%);background:linear-gradient(105deg,transparent,rgba(140,255,193,.1),transparent);transition:transform .6s var(--ease)}
.footer-project-meta{position:relative;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 22px}
.footer-project-meta>span{display:grid;gap:7px;min-width:0}.footer-project-meta strong{font-size:18px;letter-spacing:.04em}.footer-project-meta small{overflow-wrap:anywhere;color:var(--footer-muted);font:700 8px/1.2 Consolas,monospace;letter-spacing:2px}
.footer-project-meta i{font-style:normal;font-size:18px;color:#aab4ae;transition:transform .35s var(--ease),color .35s ease}
.footer-project:hover,.footer-project:focus-visible{transform:translateY(-2px);border-color:var(--green);background:rgba(53,242,139,.12);color:var(--green-soft);box-shadow:inset 3px 0 0 var(--green),inset 0 0 24px rgba(53,242,139,.08)}
.footer-project:hover::before,.footer-project:focus-visible::before{transform:translateX(120%)}
.footer-project:hover .footer-project-meta i,.footer-project:focus-visible .footer-project-meta i{transform:translate(4px,-2px)}
.footer-project[data-target="case8west"]:hover,.footer-project[data-target="case8west"]:focus-visible{border-color:#8e9b3e;background:rgba(126,139,56,.18);color:#e5edaa;box-shadow:inset 3px 0 0 #8e9b3e,inset 0 0 24px rgba(142,155,62,.13)}
.footer-project[data-target="case8west"]:hover::before,.footer-project[data-target="case8west"]:focus-visible::before{background:linear-gradient(105deg,transparent,rgba(213,226,121,.16),transparent)}
.footer-project[data-target="case8west"]:hover .footer-project-meta i,.footer-project[data-target="case8west"]:focus-visible .footer-project-meta i{color:#d7e479}
.footer-project[data-target="case8west"]:focus-visible{outline-color:#b8c965}
.footer-project[data-target="caseINKKA"]:hover,.footer-project[data-target="caseINKKA"]:focus-visible{border-color:#9f3657;background:rgba(122,24,52,.24);color:#ffd1dd;box-shadow:inset 3px 0 0 #9f3657,inset 0 0 24px rgba(159,54,87,.15)}
.footer-project[data-target="caseINKKA"]:hover::before,.footer-project[data-target="caseINKKA"]:focus-visible::before{background:linear-gradient(105deg,transparent,rgba(255,174,196,.16),transparent)}
.footer-project[data-target="caseINKKA"]:hover .footer-project-meta i,.footer-project[data-target="caseINKKA"]:focus-visible .footer-project-meta i{color:#ffb3c7}
.footer-project[data-target="caseINKKA"]:focus-visible{outline-color:#c65a7c}
.footer-project[data-target="caseHershop"]:hover,.footer-project[data-target="caseHershop"]:focus-visible{border-color:#dfc47f;background:rgba(223,196,127,.14);color:#fff1c7;box-shadow:inset 3px 0 0 #dfc47f,inset 0 0 24px rgba(223,196,127,.13)}
.footer-project[data-target="caseHershop"]:hover::before,.footer-project[data-target="caseHershop"]:focus-visible::before{background:linear-gradient(105deg,transparent,rgba(255,239,193,.18),transparent)}
.footer-project[data-target="caseHershop"]:hover .footer-project-meta i,.footer-project[data-target="caseHershop"]:focus-visible .footer-project-meta i{color:#f5df9e}
.footer-project[data-target="caseHershop"]:focus-visible{outline-color:#dfc47f}
.footer-project[data-target="caseLabella"]:hover,.footer-project[data-target="caseLabella"]:focus-visible{border-color:#6D0482;background:rgba(109,4,130,.18);color:#f2ccfa;box-shadow:inset 3px 0 0 #6D0482,inset 0 0 24px rgba(109,4,130,.2)}
.footer-project[data-target="caseLabella"]:hover::before,.footer-project[data-target="caseLabella"]:focus-visible::before{background:linear-gradient(105deg,transparent,rgba(220,167,232,.22),transparent)}
.footer-project[data-target="caseLabella"]:hover .footer-project-meta i,.footer-project[data-target="caseLabella"]:focus-visible .footer-project-meta i{color:#dca7e8}
.footer-project[data-target="caseLabella"]:focus-visible{outline-color:#9e4db0}

/* HORIZON-STYLE CHARACTER ROLL — FOOTER + SITE CTAs */
.hx-roll{display:inline-flex;align-items:center;white-space:pre}
.hx-roll-char{position:relative;display:inline-block;height:1.12em;overflow:hidden;line-height:1.12;vertical-align:bottom}
.hx-roll-char.is-space{width:.42em}
.hx-roll-face{display:block;transform:translateY(0);transition:transform .52s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--hx-index) * 18ms);will-change:transform}
.hx-roll-back{position:absolute;left:0;top:100%}
.has-hx-roll:hover .hx-roll-front,.has-hx-roll:focus-visible .hx-roll-front{transform:translateY(-110%)}
.has-hx-roll:hover .hx-roll-back,.has-hx-roll:focus-visible .hx-roll-back{transform:translateY(-100%)}
.footer-bottom{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;margin-top:42px;padding-top:22px;border-top:1px solid var(--footer-border);color:var(--footer-muted);font:700 8px/1.4 Consolas,monospace;letter-spacing:1.8px}
.footer-bottom>span:nth-child(2){text-align:center}.footer-status{display:inline-flex;align-items:center;justify-self:end;gap:8px;color:var(--green-soft)}
.footer-status i{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px rgba(53,242,139,.45);animation:footerStatusPulse 2.4s ease-in-out infinite}
@keyframes footerStatusPulse{50%{opacity:.4;transform:scale(.72)}}
@media(max-width:900px){.footer-actions{grid-template-columns:repeat(3,minmax(0,1fr))}.footer-brain-stage{width:min(48vw,430px);opacity:.14}}
@media(max-width:700px){.site-footer{left:50%;width:calc(100dvw - 27px);height:calc((100dvw - 27px) * 16 / 9);min-height:0;aspect-ratio:9/16;margin-top:58px;margin-bottom:-60px;padding:34px max(16px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}.site-footer-inner{height:100%;display:grid;grid-template-rows:auto auto auto auto;align-content:space-between}.footer-ghost-2050{left:-4%;top:3%;font-size:clamp(82px,29vw,120px);opacity:.38}.footer-brain-stage{right:-9%;top:0;width:52vw;opacity:.07}.footer-intro{max-width:100%;margin-bottom:0}.footer-kicker{margin-bottom:10px;font-size:7px;letter-spacing:2px}.footer-kicker::before{width:16px}.footer-intro h2{max-width:88%;margin-bottom:10px;font-size:clamp(30px,8.8vw,39px);line-height:.92;letter-spacing:-.04em}.footer-intro p{max-width:82%;font-size:10.5px;line-height:1.45}.footer-actions{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:0}.footer-actions>:last-child{grid-column:auto}.footer-btn{width:100%;min-height:44px;gap:5px;padding-inline:8px;font-size:6.4px;letter-spacing:.85px}.footer-btn i{font-size:10px}.footer-work{padding-top:14px}.footer-section-head{gap:8px;margin-bottom:10px}.footer-section-head h3,.footer-section-head span{font-size:6.4px;letter-spacing:1.2px}.footer-section-head h3{max-width:none;line-height:1.25}.footer-projects{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.footer-project{min-height:56px}.footer-project-meta{gap:6px;padding:9px 8px}.footer-project-meta>span{gap:4px}.footer-project-meta strong{font-size:11px}.footer-project-meta small{font-size:5.2px;letter-spacing:.55px}.footer-project-meta i{font-size:11px}.footer-bottom{grid-template-columns:1.35fr .75fr .9fr;gap:7px;margin-top:0;padding-top:11px;text-align:left;font-size:5.4px;line-height:1.25;letter-spacing:.65px}.footer-bottom>span:nth-child(2){text-align:center}.footer-status{justify-self:end;gap:4px}.footer-status i{width:4px;height:4px}}
@media(max-width:430px){.site-footer{padding-inline:max(14px,env(safe-area-inset-left))}.footer-intro h2{font-size:clamp(29px,8.7vw,36px)}}
@media(prefers-reduced-motion:reduce){.footer-brain,.footer-status i{animation:none}.footer-brain-lines path{stroke-dashoffset:0}.footer-btn,.footer-btn::before,.footer-btn i,.footer-project,.footer-project::before,.footer-project-meta i,.hx-roll-face{transition:none}.has-hx-roll:hover .hx-roll-front,.has-hx-roll:focus-visible .hx-roll-front,.has-hx-roll:hover .hx-roll-back,.has-hx-roll:focus-visible .hx-roll-back{transform:none}}
@media(prefers-reduced-motion:reduce){.future-orbit-a,.future-orbit-b,.future-core,.future-signal::before{animation:none}}

/* ==========================================
   ARCHIVE OVERLAY + SEQUENCE
========================================== */
#archiveOverlay{
  position:fixed; inset:0; z-index:9000; opacity:0; pointer-events:none;
  transition:opacity .6s ease;
  background:
    repeating-linear-gradient(0deg,rgba(53,242,139,.012) 0px,rgba(53,242,139,.012) 1px,transparent 2px,transparent 4px),
    rgba(0,0,0,.75);
}

#archiveSequence{
  position:fixed; inset:0; z-index:9100;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .5s ease; background:transparent;
}
#archiveSequence.active{ opacity:1; visibility:visible; }

.archive-sequence-inner{ text-align:center; display:flex; flex-direction:column; align-items:center; }

.seq-line{
  display:block; font-size:10px; letter-spacing:6px;
  color:var(--text); opacity:0; transform:translateY(8px);
  transition:opacity .4s ease, transform .4s ease;
  margin-bottom:16px; white-space:nowrap;
}
.seq-line.visible{ opacity:1; transform:translateY(0); }
.seq-line.dim.visible{ opacity:.3; }
.seq-line.highlight{ color:rgba(248,250,252,.9); font-size:12px; letter-spacing:8px; }
.seq-line.large{ font-size:44px; letter-spacing:12px; font-weight:800; margin-bottom:0; }

.seq-divider{ width:1px; height:0; background:rgba(248,250,252,.15); margin:4px auto 20px; transition:height .5s ease; }
.seq-divider.visible{ height:36px; }

.seq-scan{ width:200px; height:1px; background:rgba(248,250,252,.05); position:relative; margin-bottom:20px; overflow:hidden; }
.seq-scan::after{
  content:""; position:absolute; left:-100%; top:0; width:100%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(248,250,252,.5),transparent);
  transition:left .7s ease;
}
.seq-scan.scanning::after{ left:100%; }

#portalCanvas{
  position:fixed; inset:0; width:100vw; height:100vh;
  z-index:9200; opacity:0; pointer-events:none; transition:opacity .3s ease;
}

/* ==========================================
   CASE STUDY — SHARED
========================================== */
.case-study-section{
  position:fixed; inset:0; z-index:2000;
  opacity:0; visibility:hidden; pointer-events:none;
  overflow-y:auto; background:#0A0A0A;
}
.case-study-section.active{ opacity:1; visibility:visible; pointer-events:auto; }

/* legacy selector kept for 8west compatibility */
#case8west{
  position:fixed; inset:0; z-index:2000;
  opacity:0; visibility:hidden; pointer-events:none;
  overflow-y:auto; background:#0A0A0A;
}
#case8west.active{ opacity:1; visibility:visible; pointer-events:auto; }

.case-inner{ max-width:1060px; margin:0 auto; padding:100px 60px 80px; }

.case-hero-text{ margin-bottom:44px; }
.case-hero-text h2{
  font-size:clamp(56px,7vw,110px);
  line-height:.84; font-weight:800; color:var(--text); margin-bottom:12px;
}
.case-niche{ font-size:10px; letter-spacing:5px; color:var(--muted); margin-bottom:12px; }
.case-tagline{ font-size:20px; line-height:1.5; color:rgba(248,250,252,.55); font-weight:300; }

.case-description{ max-width:700px; margin-bottom:56px; }
.case-description p{ font-size:16px; line-height:2; color:rgba(248,250,252,.6); margin-bottom:16px; }

/* VIDEO */
.case-video-wrap{
  position:relative;
  margin-bottom:72px;
}
.case-video-copy{
  max-width:760px;
  margin-bottom:18px;
  padding:clamp(20px,2.4vw,30px);
  background:linear-gradient(135deg,rgba(16,34,25,.92),rgba(7,17,12,.96));
  border:1px solid var(--border);
  border-left:2px solid var(--green);
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);
}
.case-video-copy span{
  display:block;
  margin-bottom:12px;
  color:var(--green-soft);
  font-size:9px;
  letter-spacing:4px;
}
.case-video-copy h3{
  margin:0 0 10px;
  color:var(--text);
  font-size:clamp(20px,2.2vw,30px);
  line-height:1.15;
}
.case-video-copy p{
  max-width:660px;
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.8;
}
.case-video-frame{
  width:100%;
  overflow:hidden;
  background:#000;
  border:1px solid var(--border);
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%);
}
.case-video-desktop .case-video-frame{ aspect-ratio:16 / 9; }
.case-video-phone .case-video-frame{
  width:min(100%,480px);
  aspect-ratio:9 / 16;
  margin-inline:auto;
}
.case-video-frame video{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  background:#000;
  accent-color:var(--green);
}

/* CASE BLOCKS */
.case-blocks{ display:flex; flex-direction:column; gap:72px; margin-bottom:72px; }

.case-block img{ width:100%; height:auto; display:block; border:1px solid var(--border); }
.case-block-hero img{ border:none; }

.case-block-info{
  padding:28px 0 0; border-top:1px solid var(--border); margin-top:0;
}
.case-block-info ul{ list-style:none; display:flex; flex-wrap:wrap; gap:10px 28px; }
.case-block-info ul li{
  font-size:11px; letter-spacing:3px; color:var(--muted);
  position:relative; padding-left:14px;
}
.case-block-info ul li::before{ content:"—"; position:absolute; left:0; color:rgba(248,250,252,.2); font-size:9px; }
.case-block-info p{ font-size:15px; line-height:1.9; color:var(--muted); max-width:620px; }

/* RESULTS */
.case-results{
  border-top:1px solid var(--border);
  padding-top:56px; margin-bottom:64px;
}
.results-grid{ display:flex; flex-direction:column; gap:20px; margin-top:28px; }
.result-item{
  display:flex; align-items:center; gap:20px;
  padding:20px 0; border-bottom:1px solid rgba(255,255,255,.05);
  flex-wrap:wrap;
}
.result-before{ font-size:12px; letter-spacing:2px; color:var(--muted); flex:1; min-width:200px; }
.result-arrow{ font-size:16px; color:rgba(248,250,252,.2); }
.result-after{ font-size:13px; letter-spacing:1px; color:rgba(248,250,252,.7); font-weight:600; flex:1; min-width:200px; }

/* PROCESS */
.case-process{
  border-top:1px solid var(--border);
  padding-top:56px; margin-bottom:64px;
}
.process-steps{ display:flex; flex-direction:column; gap:0; margin-top:28px; max-width:320px; }
.process-step{ display:flex; align-items:center; gap:20px; padding:16px 0; }
.process-num{ font-size:9px; letter-spacing:4px; color:rgba(248,250,252,.2); width:24px; }
.process-name{ font-size:13px; letter-spacing:3px; color:rgba(248,250,252,.65); }
.process-arrow{ font-size:18px; color:rgba(248,250,252,.1); padding:2px 0 2px 44px; }

/* ==========================================
   KEYFRAMES
========================================== */
@keyframes pulseAura{ 0%,100%{transform:scale(1);opacity:.8} 50%{transform:scale(1.1);opacity:1} }
@keyframes auraMove{ 0%,100%{transform:translate(-50%,-50%) scale(1)} 50%{transform:translate(-50%,-50%) scale(1.1)} }
@keyframes particlesMove{ from{transform:translateY(0)} to{transform:translateY(-180px)} }
@keyframes glitchPulse{ 0%{opacity:.3} 15%{opacity:.8} 18%{opacity:.2} 20%{opacity:.7} 100%{opacity:.4} }

/* ==========================================
   MOBILE
========================================== */
@media(max-width:768px){
  html,
  body,
  #experienceWrapper,
  .scroll-track,
  #hero{
    touch-action:pan-y;
  }

  #siteHeader{ padding:0 20px; }

  #navMap{
    right:16px; gap:14px; display:flex;
  }
  .nav-label{ display:none; }
  .nav-dot{ width:5px; height:5px; }
  .nav-item{ padding:9px 6px; transform:scale(.88); }
  .nav-item:hover{ transform:scale(1.1); }
  .nav-item.active{ transform:scale(1.35); }
  .nav-item.active:hover{ transform:scale(1.4); }

  .content-block{
    left:6vw !important;
    right:52px !important;
    top:auto;
    bottom:clamp(88px,12dvh,118px);
    width:auto;
    max-width:none;
    transform:none;
  }
  .content-block.glitch-out{animation:mobileContentOut .28s ease forwards}
  .content-block.glitch-in{animation:mobileContentIn .48s cubic-bezier(.16,1,.3,1) forwards}
  @keyframes mobileContentOut{
    from{opacity:1;transform:translateY(0);filter:blur(0)}
    to{opacity:0;transform:translateY(14px);filter:blur(7px)}
  }
  @keyframes mobileContentIn{
    from{opacity:0;transform:translateY(20px);filter:blur(8px)}
    to{opacity:1;transform:translateY(0);filter:blur(0)}
  }

  .content-block h1,
  .content-block h2{ margin-bottom:16px; }
  .h-line{
    font-size:clamp(32px,10.4vw,40px);
    line-height:.91;
    letter-spacing:-1.2px;
  }
  .subtitle{
    margin-bottom:12px;
    font-size:8px;
    letter-spacing:4px;
  }
  .content-block p{
    max-width:310px;
    font-size:12px;
    line-height:1.65;
  }
  .intro-sub{ font-size:13px !important; line-height:1.45 !important; }
  .skill-list{ font-size:10px; line-height:1.7; }
  #projectsContent{
    width:auto;
    margin-left:0;
    bottom:clamp(106px,15dvh,132px);
    padding:0;
    clip-path:none;
  }
  #projectsContent .archive-entry-control{ width:min(100%,280px); margin-top:22px; }
  #projectsContent #enterBtn{ padding:11px 14px; font-size:9px; touch-action:pan-y; }
  .archive-entry-hint{
    bottom:max(10px,env(safe-area-inset-bottom));
    width:min(304px,calc(100vw - 36px));
  }
  .archive-entry-hint .archive-touch-prompt{
    display:grid;
    grid-template-columns:max-content minmax(0,1fr);
    align-items:center;
    min-height:50px;
    margin-top:0;
    padding:10px 12px;
    gap:12px;
    border-color:rgba(53,242,139,.58);
    border-radius:3px;
    background:
      linear-gradient(90deg,rgba(53,242,139,.08),transparent 42%),
      rgba(5,18,11,.94);
    box-shadow:
      inset 3px 0 0 rgba(53,242,139,.86),
      inset 0 1px 0 rgba(140,255,193,.08),
      0 12px 32px rgba(0,0,0,.34);
    font-size:10px;
    line-height:1;
    letter-spacing:2px;
    touch-action:pan-y;
    -webkit-tap-highlight-color:rgba(53,242,139,.12);
    user-select:none;
  }
  .archive-entry-hint .archive-touch-prompt span{
    white-space:nowrap;
    color:#f2fff7;
  }
  .archive-entry-hint .archive-touch-prompt small{
    min-width:0;
    color:rgba(140,255,193,.76);
    font-size:8px;
    line-height:1.35;
    letter-spacing:1px;
    text-align:right;
    text-wrap:balance;
  }
  .archive-entry-hint .archive-touch-prompt:active,
  .archive-entry-hint .archive-touch-prompt.is-entry-loading{
    border-color:#35f28b;
    background:
      linear-gradient(90deg,rgba(53,242,139,.14),transparent 54%),
      rgba(5,18,11,.97);
    transform:translateY(1px);
  }
  .archive-entry-hint .archive-touch-prompt:focus-visible{
    outline:2px solid #8cffc1;
    outline-offset:3px;
  }
  .archive-entry-hint .archive-hold-progress{
    margin-top:9px;
    padding:0;
  }
  .archive-entry-hint .archive-hold-meta{
    margin-bottom:7px;
    font-size:9px;
    line-height:1.2;
    letter-spacing:1.5px;
    font-variant-numeric:tabular-nums;
  }
  .archive-entry-hint .archive-hold-track{
    height:3px;
    border-radius:999px;
    background:rgba(140,255,193,.16);
  }
  .archive-entry-hint .archive-hold-fill{border-radius:inherit}

  #scrollHint{ bottom:24px; }

  .projects-inner{ padding:90px 20px 60px; }
  .projects-grid{ grid-template-columns:1fr; }
  .skills-grid{ grid-template-columns:1fr; }
  .services-grid{ grid-template-columns:1fr; }

  .case-inner{ padding:88px 20px 60px; }
  .case-video-wrap{ margin-bottom:52px; }
  .case-video-copy{ padding:18px; }
  .case-video-copy span{ letter-spacing:2.5px; }
  .case-video-phone .case-video-frame{ width:min(100%,360px); }
  .result-item{ flex-direction:column; gap:8px; }
  .process-steps{ max-width:100%; }

  #welcomeOverlay{ inset:auto; width:min(300px,100%); margin-bottom:14px; padding:8px 12px 9px 14px; }
  #welcomeOverlay::after{ display:none; }
  .welcome-status{ margin-bottom:7px; }
  .welcome-label{ font-size:7px; letter-spacing:4px; }
  .welcome-year{ font-size:25px; min-height:32px; letter-spacing:7px; }
}

/* scroll hint — always clickable */
#scrollHint {
  pointer-events: auto !important;
  cursor: pointer;
  z-index: 500;
  padding: 20px 32px;
}

/* ==========================================
   BASE CREATIVE FRONTEND ART DIRECTION
========================================== */
::selection{ background:var(--cyan); color:var(--bg); }
:focus-visible{ outline:2px solid var(--cyan-soft); outline-offset:5px; }
button, a, [role="button"]{ -webkit-tap-highlight-color:transparent; }

.subtitle, .tag, .service-num, .process-num{ color:var(--cyan-soft); }
.h-accent, .projects-inner>h2 span:last-child, .result-after, .case-niche{ color:var(--cyan); }
.skill-list{ color:var(--cyan-soft); }

#loadingScreen{ background:rgba(7,17,12,.97); backdrop-filter:blur(20px); }
.loading-content{ width:min(460px,82vw); text-align:center; }
#loadingPercent{ color:var(--cyan); font-variant-numeric:tabular-nums; }
.loading-track{ width:100%; height:3px; margin:18px 0 14px; background:var(--surface-soft); overflow:hidden; }
#loadingBar{ width:0; height:100%; background:linear-gradient(90deg,var(--green-dark),var(--green)); transition:width .18s ease; box-shadow:0 0 20px rgba(53,242,139,.25); }
#loadingStatus{ min-height:20px; color:var(--muted); font-size:11px; line-height:1.6; letter-spacing:1.5px; }
#loadingRetry{ margin-top:18px; padding:12px 20px; color:var(--bg); background:var(--cyan); border:0; font-weight:800; letter-spacing:2px; cursor:pointer; }
#loadingRetry:hover{ background:var(--cyan-soft); }

.archive-entry{ cursor:pointer; padding:30px; margin-left:-30px; border:1px solid transparent; border-radius:2px; }
.archive-entry:hover, .archive-entry:focus-visible{ background:linear-gradient(120deg,rgba(11,24,17,.72),rgba(16,34,25,.25)); border-color:var(--border); }
.archive-entry:hover #enterBtn{ color:var(--cyan-soft); border-bottom-color:var(--cyan); }

#enterBtn, .view-case-btn{ color:var(--cyan-soft); border-bottom-color:var(--violet); }
#enterBtn:hover, .view-case-btn:hover{ color:var(--cyan); border-bottom-color:var(--cyan); }
.nav-item.active .nav-dot{ background:var(--green); box-shadow:0 0 18px rgba(53,242,139,.4); }
.nav-item:hover .nav-label, .nav-item.active .nav-label{ color:var(--cyan-soft); }

#projectsUniverse, .case-study-section{ background:var(--bg); }
.project-card, .service-item, .skill-group, .case-description, .case-block, .result-item{
  background:linear-gradient(145deg,var(--surface),rgba(11,24,17,.72)); border-color:var(--border);
}
.project-card:hover{ border-color:var(--border-hover); box-shadow:0 24px 70px rgba(0,0,0,.3),0 0 0 1px rgba(53,242,139,.05); }
.project-card[data-target]{ cursor:pointer; }
.project-card[data-target]:focus-visible{ border-color:var(--green); box-shadow:0 0 0 3px rgba(53,242,139,.13); outline:none; }
.project-card[data-target] .project-card-img{ transition:transform .5s cubic-bezier(.16,1,.3,1),filter .5s ease; }
.project-card[data-target]:hover .project-card-img,
.project-card[data-target]:focus-visible .project-card-img{ transform:scale(1.015); filter:saturate(1.08); }
.project-card-img::after{ background:linear-gradient(180deg,transparent 45%,rgba(7,17,12,.88)); }
.tag-cat, .card-hook, .services-section p, .skill-group h5, .case-description p{ color:var(--muted); }
.skill-tags span{ background:var(--surface-soft); border:1px solid var(--border); color:var(--cyan-soft); }

.case-video-frame{ background:var(--surface); border:1px solid var(--border); }
.case-video-frame video{ accent-color:var(--green); }

@media(max-width:768px){
  #siteHeader, #projectsHeader, #caseHeader, #caseHeaderINKKA{ height:56px; padding:0 18px; }
  .header-right{ gap:18px; }
  .header-btn{ font-size:9px; letter-spacing:2px; }
  .header-logo{ font-size:11px; letter-spacing:2px; }
  .archive-entry{ padding:20px; margin-left:-20px; width:calc(100% + 40px); }
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{ scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}

/* ==========================================
   PREMIUM CYBERPUNK 2050 — FINAL SYSTEM
========================================== */
::selection{background:var(--cyan);color:var(--bg-deep)}
:focus-visible{outline-color:var(--cyan-soft)}
.subtitle,.tag,.service-num,.process-num{color:var(--cyan-soft);font-family:Consolas,"SFMono-Regular",monospace}
.h-accent,.projects-inner>h2 span:last-child,.result-after,.case-niche{color:var(--cyan)}
.skill-list{color:var(--cyan-soft)}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.22;background-image:linear-gradient(rgba(121,242,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(121,242,255,.025) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(to bottom,transparent 5%,#000 40%,transparent 100%)}
#siteHeader,#projectsHeader,#caseHeader,#caseHeaderINKKA{background:rgba(8,9,16,.72);border-bottom-color:var(--border);backdrop-filter:blur(18px) saturate(125%)}
.header-btn{color:var(--text-soft)}.header-btn::after{background:linear-gradient(90deg,var(--cyan),var(--magenta))}.header-btn-accent{color:var(--cyan)}
.hero-overlay{background:radial-gradient(circle at 88% 18%,rgba(255,43,214,.045),transparent 32%),radial-gradient(circle at 0 55%,rgba(0,229,255,.075),transparent 35%),linear-gradient(90deg,rgba(5,6,10,.94),rgba(8,9,16,.64) 38%,rgba(5,6,10,.18)),radial-gradient(ellipse at center,transparent 38%,rgba(5,6,10,.56) 100%)}
#welcomeOverlay{border-color:var(--cyan);background:linear-gradient(115deg,rgba(16,17,27,.9),rgba(22,24,39,.48));box-shadow:inset 22px 0 42px rgba(0,229,255,.025)}
#welcomeOverlay::before{background:linear-gradient(90deg,var(--cyan),var(--magenta));box-shadow:0 0 10px rgba(0,229,255,.28)}
.welcome-status,.welcome-label{color:var(--cyan-soft)}.welcome-status::before{background:var(--magenta);box-shadow:0 0 0 4px rgba(255,43,214,.08),0 0 12px rgba(255,43,214,.42)}
.content-block.glitch-out{animation:cyberExit .3s var(--ease) forwards}.content-block.glitch-in{animation:cyberEnter .55s var(--ease) forwards}
@keyframes cyberExit{to{opacity:0;filter:blur(8px);transform:translateY(-50%) translateX(-16px);clip-path:inset(0 0 0 100%)}}
@keyframes cyberEnter{from{opacity:0;filter:blur(10px);transform:translateY(-48%) translateX(22px);clip-path:inset(0 100% 0 0)}to{opacity:1;filter:blur(0);transform:translateY(-50%);clip-path:inset(0)}}
#loadingScreen{background:rgba(5,6,10,.975)}#loadingPercent{color:var(--cyan)}
#loadingBar{background:linear-gradient(90deg,var(--violet),var(--cyan),var(--magenta));box-shadow:0 0 18px rgba(0,229,255,.24)}
#loadingRetry{position:relative;overflow:hidden;border:1px solid var(--cyan);background:linear-gradient(135deg,var(--cyan),var(--cyan-soft));color:var(--bg-deep);font-weight:800;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px))}
#enterBtn,.view-case-btn{position:relative;overflow:hidden;background:rgba(16,17,27,.58);border:1px solid var(--border-strong);color:var(--cyan-soft);padding:13px 20px;text-decoration:none;clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,0 100%)}
#enterBtn::before,.view-case-btn::before,#loadingRetry::before{content:"";position:absolute;inset:0;transform:translateX(-120%);background:linear-gradient(105deg,transparent,rgba(255,255,255,.18),transparent);transition:transform .55s var(--ease)}
#enterBtn:hover::before,.view-case-btn:hover::before,#loadingRetry:hover::before{transform:translateX(120%)}
#enterBtn:hover,.view-case-btn:hover,#loadingRetry:hover{transform:translateY(-2px);border-color:var(--cyan);box-shadow:0 8px 28px rgba(0,229,255,.09)}
#enterBtn:active,.view-case-btn:active,#loadingRetry:active{transform:scale(.98)}
.archive-entry{clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%)}.archive-entry:hover,.archive-entry:focus-visible{background:linear-gradient(120deg,rgba(16,17,27,.72),rgba(119,92,255,.055));border-color:var(--border)}
.nav-item.active .nav-dot{background:var(--magenta);box-shadow:0 0 14px rgba(255,43,214,.5)}.nav-item:hover .nav-label,.nav-item.active .nav-label{color:var(--cyan-soft)}
#projectsUniverse,.case-study-section{background:var(--bg-deep)}
#projectsUniverse::before,.case-study-section::before{content:"";position:fixed;inset:0;pointer-events:none;background:linear-gradient(rgba(0,229,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(0,229,255,.02) 1px,transparent 1px);background-size:54px 54px;mask-image:radial-gradient(circle at 50% 25%,#000,transparent 78%)}
.radial-glow{background:radial-gradient(circle at 35% 45%,rgba(0,229,255,.105),transparent 46%),radial-gradient(circle at 70% 55%,rgba(255,43,214,.055),transparent 34%);filter:blur(85px)}
.particles{opacity:.13;background-image:linear-gradient(90deg,transparent 49.8%,rgba(121,242,255,.09) 50%,transparent 50.2%);background-size:180px 100%;animation:ambientDrift 18s ease-in-out infinite alternate}@keyframes ambientDrift{to{transform:translate3d(24px,-12px,0);opacity:.09}}
.projects-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.project-card{--mx:50%;--my:50%;position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(145deg,rgba(27,29,44,.94),rgba(16,17,27,.94));border:1px solid var(--border);clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,14px 100%,0 calc(100% - 14px));box-shadow:0 22px 55px rgba(0,0,0,.32);transform-style:preserve-3d;transition:transform .55s var(--ease),border-color .45s,box-shadow .45s}
.project-card::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(320px circle at var(--mx) var(--my),rgba(0,229,255,.09),transparent 55%);opacity:0;transition:opacity .35s}.project-card::after{content:"";position:absolute;right:0;bottom:0;width:72px;height:2px;z-index:5;background:var(--magenta);transform:scaleX(.35);transform-origin:right;transition:transform .45s var(--ease)}
.project-card:hover{transform:translateY(-8px);border-color:var(--border-strong);box-shadow:0 30px 70px rgba(0,0,0,.42),0 0 0 1px rgba(0,229,255,.04)}.project-card:hover::before{opacity:1}.project-card:hover::after{transform:scaleX(1)}
.project-card[data-target]:focus-visible{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,229,255,.13);outline:none}
.card-system-code{position:absolute;z-index:6;right:18px;top:17px;padding:6px 9px;background:rgba(5,6,10,.72);border-left:1px solid var(--magenta);color:var(--cyan-soft);font:8px/1 Consolas,monospace;letter-spacing:2px}
.project-card-img{height:clamp(230px,25vw,330px);overflow:hidden;transition:transform .7s var(--ease),filter .7s}.project-card:hover .project-card-img{transform:scale(1.03);filter:contrast(1.04) saturate(1.09)}
.project-card-img::after{background:linear-gradient(180deg,rgba(8,9,16,.02) 35%,rgba(8,9,16,.92) 100%),linear-gradient(120deg,rgba(0,229,255,.035),rgba(255,43,214,.025))}
.project-card-body{position:relative;z-index:4;padding:28px 30px 32px;background:linear-gradient(180deg,rgba(16,17,27,.2),rgba(16,17,27,.96))}.project-card-body h3{font-size:clamp(25px,2.2vw,34px)}
.tag{border-color:var(--border);background:rgba(8,9,16,.42);color:var(--cyan-soft)}.tag-cat,.card-hook,.services-section p,.skill-group h5,.case-description p{color:var(--muted)}
.project-card-soon{opacity:1;cursor:default;background:linear-gradient(145deg,rgba(22,24,39,.8),rgba(8,9,16,.94))}.project-card-soon .project-card-img{filter:grayscale(1);opacity:.45;background:repeating-linear-gradient(135deg,var(--surface) 0 9px,var(--surface-soft) 9px 10px)}.project-card-soon:hover{transform:none;border-color:var(--border)}
.coming-soon-label{color:var(--magenta-soft);border-color:var(--border-magenta);background:rgba(255,43,214,.04)}
.service-item{padding:26px;background:linear-gradient(145deg,rgba(22,24,39,.7),rgba(16,17,27,.42));border:1px solid var(--border);clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%);transition:transform .35s var(--ease),border-color .35s}.service-item:hover{transform:translateY(-3px);border-color:var(--border-strong)}
.skill-group{padding:24px;background:rgba(16,17,27,.55);border:1px solid var(--border)}.skill-tags span{position:relative;background:var(--surface-soft);border-color:var(--border);color:var(--text-soft);padding-left:19px}.skill-tags span::before{content:"";position:absolute;left:9px;top:50%;width:4px;height:4px;border-radius:50%;background:var(--cyan);transform:translateY(-50%)}
.case-description,.case-block,.result-item{background:linear-gradient(145deg,rgba(22,24,39,.72),rgba(16,17,27,.55));border-color:var(--border)}.case-description{border-left:2px solid var(--cyan)}
.case-video-frame{background:var(--surface);border:1px solid var(--border);clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%)}.case-video-frame video{accent-color:var(--green)}
.case-block{overflow:hidden;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%)}.result-item{padding:22px;border:1px solid var(--border)}.process-step{border-left:1px solid var(--border);padding-left:18px}
@media(max-width:1024px){.projects-inner{padding-inline:34px}.projects-grid{gap:22px}.project-card-img{height:240px}}
@media(max-width:768px){.projects-grid{grid-template-columns:1fr}.project-card{transform:none!important}.project-card-img{height:clamp(220px,60vw,320px)}.projects-inner{padding:88px 20px 60px}.service-item,.skill-group{padding:20px}body::before,.particles{opacity:.06}.radial-glow{opacity:.65}}
@media(max-width:768px){
  .content-block.glitch-out{animation:mobileContentOut .28s ease forwards}
  .content-block.glitch-in{animation:mobileContentIn .48s cubic-bezier(.16,1,.3,1) forwards}
  #scrollHint{
    bottom:10px;
    padding:5px 10px;
    line-height:1.15;
  }
  #scrollHint .hint-title{
    margin-bottom:3px;
    font-size:7px;
    letter-spacing:3px;
  }
  #scrollHint #nextSectionText{
    font-size:7px;
    letter-spacing:1px;
  }
}
@media(max-width:430px){.content-block{top:auto;bottom:clamp(82px,11dvh,104px)}.h-line{font-size:clamp(30px,9.8vw,38px)}#welcomeOverlay{margin-bottom:12px}.project-card-body{padding:22px}.projects-inner>h2{font-size:52px}}
@media(prefers-reduced-motion:reduce){.project-card{transform:none!important}.project-card::before{display:none}.particles{animation:none}}

/* ==========================================
   SELECTED WORK — GREEN ARCHIVE TIMELINE
========================================== */
body::before{background-image:linear-gradient(rgba(140,255,193,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(140,255,193,.022) 1px,transparent 1px)}
.hero-overlay{background:radial-gradient(circle at 0 55%,rgba(53,242,139,.075),transparent 36%),linear-gradient(90deg,rgba(5,11,7,.95),rgba(7,17,12,.65) 40%,rgba(5,11,7,.2)),radial-gradient(ellipse at center,transparent 38%,rgba(5,11,7,.58) 100%)}
#siteHeader,#projectsHeader,#caseHeader,#caseHeaderINKKA{background:rgba(7,17,12,.76)}
#projectsHeader{background:transparent!important;border-bottom-color:transparent!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
#projectsHeader.is-over-sky .header-btn{color:#03141d!important;text-shadow:none}
#projectsHeader.is-over-sky .header-btn::after{background:#03141d!important}
#projectsHeader.is-over-sky .header-btn-accent{color:#03141d!important}
#welcomeOverlay{padding:0;background:transparent;border-color:transparent;box-shadow:none}
#welcomeOverlay::before,#welcomeOverlay::after{display:none}
.header-btn::after{background:linear-gradient(90deg,var(--green-dark),var(--green),var(--green-soft))}
.welcome-status::before{background:var(--green)}
.archive-entry{cursor:default;background:transparent;border-color:transparent;clip-path:none}
.archive-entry:hover{background:transparent;border-color:transparent}
.archive-entry:focus-visible{background:transparent;border-color:transparent;outline:1px solid var(--green);outline-offset:4px}
.archive-entry:hover #enterBtn{color:inherit;border-color:var(--border-strong)}
.archive-entry #enterBtn:hover,.archive-entry #enterBtn:focus-visible{color:var(--green-soft);border-color:var(--green);box-shadow:inset 0 0 22px rgba(53,242,139,.06)}
#projectsUniverse::before,.case-study-section::before{background:linear-gradient(rgba(53,242,139,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(53,242,139,.018) 1px,transparent 1px);background-size:54px 54px}
.radial-glow{background:radial-gradient(circle at 50% 42%,rgba(53,242,139,.1),transparent 48%)}
.particles{background-image:linear-gradient(90deg,transparent 49.8%,rgba(140,255,193,.075) 50%,transparent 50.2%)}
/* ==========================================
   SELECTED WORK — FRAME SEQUENCE
========================================== */
.projects-inner{max-width:none;margin:0;padding:0}
.selected-work-experience{position:relative;height:500svh;background:var(--bg);isolation:isolate}
.selected-work-stage{position:sticky;top:0;width:100%;height:100svh;overflow:hidden;background:#07110c}
#selectedWorkCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;background:#07110c}
.selected-work-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(7,17,12,.48),transparent 25%,transparent 75%,rgba(7,17,12,.48)),linear-gradient(180deg,rgba(7,17,12,.16),transparent 35%,rgba(7,17,12,.58))}
.selected-work-heading{position:absolute;z-index:4;left:50%;bottom:4.5%;width:min(560px,44vw);text-align:center;transform:translateX(-50%);pointer-events:none}
.selected-work-heading>span{display:block;margin-bottom:8px;color:var(--green-soft);font:600 9px/1.2 Consolas,"SFMono-Regular",monospace;letter-spacing:4px}
.selected-work-heading h2{margin:0;color:var(--text);font-size:clamp(36px,4.8vw,76px);line-height:.9;letter-spacing:-.045em;text-wrap:balance}
.selected-work-heading strong{color:var(--green);font-weight:inherit}
.selected-work-stage .selected-project-entry{position:absolute;z-index:5;width:clamp(280px,27vw,430px);opacity:.14;filter:saturate(.55);transform:translateY(24px) scale(.975);transform-origin:center bottom}
.selected-work-stage .project-card{position:relative;width:100%;aspect-ratio:16/9;margin:0;padding:0;overflow:hidden;text-align:left;font:inherit;color:inherit;background:var(--surface);border:1px solid var(--border);border-radius:0;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%);box-shadow:0 22px 60px rgba(0,0,0,.34);transition:border-color .3s ease,box-shadow .3s ease;touch-action:manipulation;-webkit-tap-highlight-color:rgba(53,242,139,.12)}
.selected-work-stage button.project-card{cursor:pointer}
.selected-work-stage .project-entry-8west{left:4.5%;bottom:7%}
.selected-work-stage .project-entry-inkka{right:2.25%;bottom:4.5%;width:clamp(270px,22vw,350px)}
.selected-work-stage .project-entry-trendy{left:4.5%;top:28%}
.selected-work-stage .project-entry-hershop{left:4.5%;right:auto;top:34%;width:clamp(280px,25vw,390px)}
.selected-work-stage .project-entry-hershop .project-card-info{right:auto;left:0;text-align:left;border-left:2px solid #f11f2d;border-right:1px solid rgba(223,196,127,.2)}
.selected-work-stage .project-entry-hershop .project-card-tags{justify-content:flex-start}
.selected-work-stage .project-entry-hershop .card-hook{margin-left:0}
.selected-work-stage .project-entry-hershop.is-active .project-card{border-color:rgba(223,196,127,.5);box-shadow:0 28px 74px rgba(0,0,0,.46),inset 0 0 30px rgba(84,21,36,.14)}
.selected-work-stage .project-entry-labella{right:4.5%;left:auto;top:34%;width:clamp(280px,25vw,390px)}
.selected-work-stage .project-entry-labella .project-card-info{right:0;left:auto;text-align:right;border-right:2px solid #6D0482;border-left:1px solid rgba(212,175,55,.24)}
.selected-work-stage .project-entry-labella .project-card-tags{justify-content:flex-end}
.selected-work-stage .project-entry-labella .card-hook{margin-left:auto}
.selected-work-stage .project-entry-labella .project-info-connector{transform:scaleX(-1)}
.selected-work-stage .project-entry-labella .project-info-connector path{stroke:rgba(109,4,130,.52)}
.selected-work-stage .project-entry-labella .project-card-title{color:#6D0482}
.selected-work-stage .project-entry-labella .card-system-code,.selected-work-stage .project-entry-labella .view-case-btn{color:#D4AF37}
.selected-work-stage .selected-project-entry.is-active{opacity:1;filter:none;transform:translateY(0) scale(1)}
.selected-work-stage .selected-project-entry.is-active .project-card{border-color:rgba(140,255,193,.38);box-shadow:0 28px 74px rgba(0,0,0,.46),inset 0 0 24px rgba(53,242,139,.025)}
.selected-work-stage .project-entry-labella.is-active .project-card{border-color:rgba(109,4,130,.58);box-shadow:0 28px 74px rgba(0,0,0,.46),inset 0 0 28px rgba(109,4,130,.12)}
.selected-work-stage .project-entry-labella.is-active .project-info-connector path{stroke-dashoffset:0;stroke:rgba(109,4,130,.78)}
.selected-work-stage .project-card:focus-visible{outline:2px solid var(--green-soft);outline-offset:4px;border-color:var(--green)}
@media(hover:hover) and (pointer:fine){.selected-work-stage button.project-card:hover{border-color:var(--green);box-shadow:0 30px 76px rgba(0,0,0,.5),inset 0 0 26px rgba(53,242,139,.05)}}
.selected-work-stage .project-card-img{position:absolute;inset:0;display:block;width:100%;height:100%;background-size:cover;background-position:center;border:0}
.selected-work-stage .project-card-img::after{background:linear-gradient(180deg,rgba(5,11,7,.02),rgba(5,11,7,.12))}
.selected-work-stage .project-card-info{position:absolute;left:0;bottom:calc(100% + 52px);display:block;width:min(94%,390px);padding:14px 17px 15px;background:linear-gradient(135deg,rgba(7,17,12,.94),rgba(11,24,17,.8));border:1px solid rgba(140,255,193,.16);border-left:2px solid rgba(53,242,139,.7);box-shadow:0 14px 35px rgba(0,0,0,.2);pointer-events:none}
.selected-work-stage .project-entry-inkka .project-card-info{right:0;left:auto;text-align:right;border-right:2px solid rgba(53,242,139,.7);border-left:1px solid rgba(140,255,193,.16)}
.selected-work-stage .project-info-connector{position:absolute;left:0;bottom:calc(100% - 1px);width:100%;height:58px;overflow:visible;pointer-events:none}
.selected-work-stage .project-info-connector path{fill:none;stroke:rgba(53,242,139,.48);stroke-width:1.25;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .7s cubic-bezier(.16,1,.3,1),stroke .35s ease}
.selected-work-stage .selected-project-entry.is-active .project-info-connector path{stroke-dashoffset:0;stroke:rgba(53,242,139,.72)}
.selected-work-stage .project-card-tags{display:flex;margin-bottom:6px;gap:6px;flex-wrap:wrap}
.selected-work-stage .project-entry-inkka .project-card-tags{justify-content:flex-end}
.selected-work-stage .project-card-title{display:block;margin-bottom:4px;color:var(--text);font-size:clamp(20px,1.7vw,28px);line-height:1}
.selected-work-stage .card-hook{display:block;max-width:85%;margin-bottom:7px;color:var(--muted);font-size:10px;line-height:1.45}
.selected-work-stage .project-entry-inkka .card-hook{margin-left:auto}
.selected-work-stage .view-case-btn{display:inline-block;padding:4px 0;color:var(--green-soft);font-size:8px;letter-spacing:2.5px;border-bottom:1px solid rgba(140,255,193,.25)}
.selected-work-stage .card-system-code{position:static;display:block;margin-bottom:7px;padding:0;background:none;border:0;color:var(--green-soft);font-size:7px;letter-spacing:2px}
.selected-work-stage .project-card-soon{cursor:default}.selected-work-stage .project-card-soon .project-card-img{background:repeating-linear-gradient(135deg,#0b1811 0 10px,#102219 10px 11px)}
.project-scroll-segment{position:absolute;left:0;width:1px;pointer-events:none}.project-scroll-segment[data-project-segment="0"]{top:0;height:100svh}.project-scroll-segment[data-project-segment="1"]{top:100svh;height:200svh}.project-scroll-segment[data-project-segment="2"]{top:300svh;height:100svh}.project-scroll-segment[data-project-segment="3"]{top:400svh;height:100svh}

.labella-case-study .hs-hero-copy h1,
.labella-case-study .hs-hero-copy h1 span{color:#6D0482}
.labella-palette-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.labella-palette-grid .labella-swatch-light::before{background:linear-gradient(180deg,transparent 28%,rgba(251,248,245,.88))}
.labella-palette-grid .labella-swatch-light strong,
.labella-palette-grid .labella-swatch-light code,
.labella-palette-grid .labella-swatch-light p{color:#231627}
@media(max-width:1024px){.labella-palette-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.selected-work-phone-sequence{display:none}
#loadingBar{background:linear-gradient(90deg,var(--green-dark),var(--green),var(--green-soft));box-shadow:0 0 18px rgba(53,242,139,.25)}
#enterBtn:hover,.view-case-btn:hover,#loadingRetry:hover{border-color:var(--green);box-shadow:inset 0 0 22px rgba(53,242,139,.06)}
@media(max-width:1024px) and (min-width:701px){.selected-work-stage .selected-project-entry{width:clamp(210px,29vw,310px)}.selected-work-stage .project-entry-8west,.selected-work-stage .project-entry-trendy{left:3%}.selected-work-stage .project-entry-inkka{right:1.5%;bottom:5%;width:clamp(205px,25vw,270px)}.selected-work-heading{width:31vw}.selected-work-stage .card-hook{display:none}.selected-work-stage .project-card-info{bottom:calc(100% + 38px);padding:10px 12px}.selected-work-stage .project-info-connector{height:42px}.selected-work-stage .project-entry-trendy{top:30%}}
@media(max-width:767px){
  /* The fixed archive header overlays frame one; it must not consume scroll space. */
  .projects-inner{padding-top:0}
  #projectsHeader{
    background:linear-gradient(180deg,rgba(3,12,8,.78),rgba(3,12,8,.18) 72%,transparent)!important;
    border-bottom-color:rgba(140,255,193,.08)!important;
  }
  .selected-work-experience{display:none}
  .selected-work-phone-sequence{
    --phone-sequence-screens:6.667;
    position:relative;
    display:block;
    width:100%;
    height:calc(var(--phone-sequence-screens) * 100svh);
    min-height:600svh;
    overflow:clip;
    background:#06120d;
    contain:layout paint;
    isolation:isolate;
  }
  .selected-work-phone-sticky{
    position:sticky;
    top:0;
    width:100%;
    height:100svh;
    min-height:100svh;
    overflow:hidden;
    background:#06120d;
  }
  .selected-work-phone-poster,
  .selected-work-phone-canvas{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
  }
  .selected-work-phone-poster{
    z-index:0;
    background:#06120d url("FRAMESELECTEDWORKPHONE/frame_0001.webp") center/contain no-repeat;
    opacity:1;
    transition:opacity .24s ease;
  }
  .selected-work-phone-canvas{
    z-index:1;
    background:transparent;
    opacity:0;
    transition:opacity .18s ease;
  }
  .selected-work-phone-sequence.is-canvas-ready .selected-work-phone-canvas{opacity:1}
  .selected-work-phone-sequence.is-canvas-ready .selected-work-phone-poster{opacity:0}
  .selected-work-phone-vignette{
    position:absolute;
    z-index:2;
    inset:0;
    pointer-events:none;
    background:
      linear-gradient(180deg,rgba(3,12,8,.34) 0,rgba(3,12,8,.06) 27%,transparent 48%,rgba(3,12,8,.12) 100%),
      radial-gradient(ellipse at 50% 53%,transparent 48%,rgba(2,9,6,.2) 100%);
  }
  .selected-work-phone-title{
    position:absolute;
    z-index:3;
    top:clamp(88px,15svh,138px);
    left:clamp(20px,7vw,36px);
    width:min(76vw,330px);
    pointer-events:none;
    transform:translate3d(0,var(--phone-title-shift,0),0);
    will-change:transform;
  }
  .selected-work-phone-title>span{
    display:block;
    margin-bottom:10px;
    color:#9fffc9;
    font:700 clamp(8px,2.15vw,10px)/1.3 Consolas,"SFMono-Regular",monospace;
    letter-spacing:clamp(2px,.8vw,4px);
    text-shadow:0 1px 12px rgba(2,9,6,.42);
  }
  .selected-work-phone-title h2{
    margin:0;
    color:#f2fff7;
    font-size:clamp(38px,13vw,66px);
    line-height:.82;
    letter-spacing:-.055em;
    text-wrap:balance;
    text-shadow:0 3px 18px rgba(2,9,6,.5);
  }
  .selected-work-phone-title strong{display:block;color:#35f28b;font-weight:inherit}
  .selected-work-phone-projects{
    position:absolute;
    z-index:4;
    inset:0;
    pointer-events:none;
  }
  .selected-work-phone-project{
    position:absolute;
    bottom:clamp(38px,6svh,64px);
    left:clamp(18px,5vw,28px);
    right:clamp(18px,5vw,28px);
    height:clamp(102px,27vw,120px);
    opacity:0;
    visibility:hidden;
    transform:translate3d(0,18px,0);
    transition:opacity .32s ease,transform .42s cubic-bezier(.2,.72,.2,1),visibility .32s;
    pointer-events:none;
  }
  .selected-work-phone-project.is-active{
    opacity:1;
    visibility:visible;
    transform:translate3d(0,0,0);
    pointer-events:auto;
  }
  .selected-work-phone-card{
    position:absolute;
    bottom:0;
    left:0;
    width:clamp(160px,45vw,190px);
    aspect-ratio:16/9;
    margin:0;
    padding:0;
    overflow:hidden;
    color:#f2fff7;
    text-align:left;
    background:#07110c;
    border:1px solid rgba(140,255,193,.22);
    border-radius:0;
    clip-path:polygon(0 0,calc(100% - 11px) 0,100% 11px,100% 100%,0 100%);
    box-shadow:0 14px 36px rgba(0,0,0,.34);
    pointer-events:auto;
    -webkit-tap-highlight-color:rgba(53,242,139,.12);
  }
  button.selected-work-phone-card{cursor:pointer}
  .selected-work-phone-project-inkka .selected-work-phone-card{
    left:auto;
    right:0;
  }
  .selected-work-phone-card-image{
    position:absolute;
    inset:0;
    display:block;
    background-position:center;
    background-size:cover;
    transform:scale(1.01);
  }
  .selected-work-phone-card-image-soon{
    background:
      linear-gradient(135deg,rgba(53,242,139,.07),transparent 55%),
      repeating-linear-gradient(135deg,#08130d 0 9px,#0d1d14 9px 10px);
  }
  .selected-work-phone-card-info{
    position:absolute;
    z-index:2;
    top:0;
    right:0;
    width:clamp(122px,35vw,148px);
    display:grid;
    align-content:center;
    gap:4px;
    min-height:68px;
    padding:10px 0 10px 12px;
    color:#f2fff7;
    text-align:left;
    border-left:1px solid rgba(53,242,139,.5);
    background:linear-gradient(90deg,rgba(5,17,11,.72),rgba(5,17,11,.12));
    pointer-events:none;
  }
  .selected-work-phone-project-inkka .selected-work-phone-card-info{
    right:auto;
    left:0;
    padding:10px 12px 10px 0;
    text-align:right;
    border-left:0;
    border-right:1px solid rgba(53,242,139,.5);
    background:linear-gradient(270deg,rgba(5,17,11,.72),rgba(5,17,11,.12));
  }
  .selected-work-phone-card-info>span{
    color:#8cffc1;
    font:700 6px/1.2 Consolas,"SFMono-Regular",monospace;
    letter-spacing:1.7px;
  }
  .selected-work-phone-card-info strong{
    color:#f2fff7;
    font-size:clamp(16px,4.6vw,21px);
    line-height:1;
    letter-spacing:-.025em;
  }
  .selected-work-phone-card-info small{
    color:#9ab5a5;
    font:600 7px/1.2 Consolas,"SFMono-Regular",monospace;
    letter-spacing:1px;
  }
  .selected-work-phone-connector{
    position:absolute;
    z-index:1;
    left:calc(clamp(160px,45vw,190px) - 8px);
    top:18px;
    width:clamp(42px,14vw,62px);
    height:48px;
    overflow:visible;
    pointer-events:none;
  }
  .selected-work-phone-connector path{
    fill:none;
    stroke:rgba(53,242,139,.72);
    stroke-width:1.15;
    vector-effect:non-scaling-stroke;
    stroke-linecap:round;
    stroke-dasharray:1;
    stroke-dashoffset:1;
    transition:stroke-dashoffset .58s cubic-bezier(.2,.72,.2,1) .16s,opacity .25s ease;
  }
  .selected-work-phone-project.is-active .selected-work-phone-connector path{stroke-dashoffset:0}
  .selected-work-phone-project-inkka .selected-work-phone-connector{
    left:auto;
    right:calc(clamp(160px,45vw,190px) - 8px);
    transform:scaleX(-1);
    transform-origin:center;
  }
  @media(hover:hover) and (pointer:fine){
    button.selected-work-phone-card:hover{
      border-color:#35f28b;
      box-shadow:0 14px 36px rgba(0,0,0,.34),inset 0 0 20px rgba(53,242,139,.05);
    }
  }
  .selected-work-phone-status{
    position:absolute;
    z-index:4;
    left:clamp(20px,7vw,36px);
    bottom:max(20px,env(safe-area-inset-bottom));
    margin:0;
    color:rgba(159,255,201,.66);
    font:700 8px/1.3 Consolas,"SFMono-Regular",monospace;
    letter-spacing:2px;
    text-transform:uppercase;
    opacity:0;
    transition:opacity .2s ease;
  }
  .selected-work-phone-sequence.is-loading .selected-work-phone-status{opacity:1}
}
@supports(height:100dvh){
  @media(max-width:767px){
    .selected-work-phone-sticky{height:100dvh}
  }
}
@media(prefers-reduced-motion:reduce){.selected-work-stage .selected-project-entry{filter:none;transform:none}.selected-work-stage .selected-project-entry:first-of-type{opacity:1}.selected-work-stage .project-info-connector path{stroke-dashoffset:0}}
@media(max-width:767px) and (prefers-reduced-motion:reduce){
  .selected-work-phone-project{transition:none}
  .selected-work-phone-connector path{stroke-dashoffset:0;transition:none}
}

/* ==========================================
   CONTACT REQUEST FORM
========================================== */
.contact-panel{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(250px,.7fr) minmax(0,1.3fr);
  gap:clamp(36px,6vw,96px);
  margin-top:clamp(48px,7vw,92px);
  padding:clamp(28px,4vw,54px) 0;
  border-top:1px solid rgba(140,255,193,.13);
  border-bottom:1px solid rgba(140,255,193,.1);
}
.contact-panel-heading>span{
  display:block;
  margin-bottom:16px;
  color:var(--green-soft);
  font:700 8px/1.3 Consolas,"SFMono-Regular",monospace;
  letter-spacing:3px;
}
.contact-panel-heading h3{
  max-width:470px;
  margin:0 0 16px;
  color:var(--text);
  font-size:clamp(28px,3.4vw,52px);
  line-height:.96;
  letter-spacing:-.045em;
}
.contact-panel-heading p{max-width:420px;margin:0;color:var(--muted);font-size:13px;line-height:1.7}
.contact-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 18px}
.contact-request-form label{display:grid;gap:9px}
.contact-request-form label>span{
  color:var(--green-soft);
  font:700 8px/1 Consolas,"SFMono-Regular",monospace;
  letter-spacing:2.2px;
}
.contact-request-form input,
.contact-request-form select,
.contact-request-form textarea{
  width:100%;
  min-height:48px;
  padding:13px 14px;
  border:1px solid rgba(140,255,193,.16);
  border-radius:0;
  outline:0;
  background:rgba(7,17,12,.58);
  color:var(--text);
  font:500 14px/1.45 Arial,sans-serif;
  transition:border-color .25s ease,background-color .25s ease,box-shadow .25s ease;
}
.contact-request-form textarea{min-height:128px;resize:vertical}
.contact-request-form select{cursor:pointer;color:var(--muted)}
.contact-request-form select:valid{color:var(--text)}
.contact-request-form option{background:#0b1811;color:var(--text)}
.contact-request-form input:hover,
.contact-request-form select:hover,
.contact-request-form textarea:hover{border-color:rgba(140,255,193,.32)}
.contact-request-form input:focus,
.contact-request-form select:focus,
.contact-request-form textarea:focus{
  border-color:var(--green);
  background:rgba(11,24,17,.82);
  box-shadow:inset 0 0 20px rgba(53,242,139,.045);
}
.contact-message-field{grid-column:1/-1}
.contact-form-action{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:20px}
.contact-form-status{min-height:20px;margin:0;color:var(--muted);font-size:12px;line-height:1.5}
.contact-form-status.is-success{color:var(--green-soft)}
.contact-form-status.is-error{color:#ff9c9c}
.contact-submit-btn{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:34px;
  min-width:210px;
  min-height:48px;
  padding:13px 16px;
  overflow:hidden;
  border:1px solid rgba(140,255,193,.32);
  background:rgba(11,24,17,.7);
  color:var(--text);
  cursor:pointer;
  font:700 9px/1 Consolas,"SFMono-Regular",monospace;
  letter-spacing:2.4px;
  transition:transform .25s ease,border-color .25s ease,background-color .25s ease;
}
.contact-submit-btn:hover,.contact-submit-btn:focus-visible{transform:translateY(-2px);border-color:var(--green);background:rgba(16,34,25,.9)}
.contact-submit-btn:disabled{cursor:wait;opacity:.58;transform:none}
.contact-submit-btn i{color:var(--green);font-style:normal}
@media(max-width:800px){
  .contact-panel{grid-template-columns:1fr;gap:30px}
}
@media(max-width:560px){
  .contact-panel{margin-top:42px;padding:32px 0}
  .contact-form-grid{grid-template-columns:1fr;gap:17px}
  .contact-message-field{grid-column:auto}
  .contact-form-action{align-items:stretch;flex-direction:column}
  .contact-submit-btn{width:100%;min-width:0}
}

/* ==========================================
   FOOTER + CONTACT VIEWPORT PANELS
========================================== */
.site-footer{
  overflow:visible;
  height:calc((100dvw - 24px) * 9 / 16);
  min-height:620px;
  aspect-ratio:16/9;
  margin-bottom:calc((100dvw - 24px) * 9 / 16);
  padding:clamp(58px,5vw,80px) clamp(20px,2vw,28px) 28px;
}
.site-footer-inner{height:100%}
.contact-panel{
  position:absolute;
  top:calc(100% + 30px);
  left:50%;
  z-index:2;
  width:calc(100dvw - 24px);
  height:calc((100dvw - 24px) * 9 / 16);
  min-height:620px;
  aspect-ratio:16/9;
  margin:0;
  padding:clamp(48px,5vw,78px) clamp(28px,5vw,76px);
  align-items:center;
  overflow:hidden;
  transform:translateX(calc(-50% - 7px));
  border:1px solid rgba(140,255,193,.18);
  background:linear-gradient(rgba(140,255,193,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(140,255,193,.035) 1px,transparent 1px),radial-gradient(circle at 78% 24%,rgba(53,242,139,.09),transparent 34%),linear-gradient(145deg,#050906,#07110c 52%,#09150e);
  background-size:40px 40px,40px 40px,auto,auto;
  box-shadow:inset 0 1px rgba(255,255,255,.025);
  align-content:center;
}
.contact-panel::before{content:"TRANSMISSION // 2050";position:absolute;right:4%;bottom:2%;z-index:-1;color:transparent;-webkit-text-stroke:1px rgba(140,255,193,.055);font-size:clamp(62px,9vw,142px);font-weight:900;letter-spacing:-.06em;pointer-events:none}
.contact-panel-heading p{color:#a8b9af;font-size:14px}
.contact-form-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:18px 14px}
.contact-request-form label{grid-column:span 2}
.contact-request-form label:nth-child(4),.contact-request-form label:nth-child(5){grid-column:span 3}
.contact-message-field{grid-column:1/-1!important}
.contact-request-form input,.contact-request-form select,.contact-request-form textarea{border-color:rgba(140,255,193,.28);background:rgba(3,10,6,.82)}
@media(max-width:560px){
  .site-footer{margin-bottom:calc((100dvw - 27px) * 16 / 9 + 17px)}
  .contact-panel{top:calc(100% + 14px);width:calc(100dvw - 27px);height:calc((100dvw - 27px) * 16 / 9 + 32px);min-height:0;aspect-ratio:auto;padding:24px 16px;gap:14px;transform:translateX(-50%);align-content:center}
  .contact-panel::before{right:-2%;bottom:1%;font-size:18vw}
  .contact-panel-heading>span{margin-bottom:8px;font-size:6px;letter-spacing:1.5px}
  .contact-panel-heading h3{max-width:92%;margin-bottom:7px;font-size:clamp(25px,7.7vw,33px)}
  .contact-panel-heading p{max-width:94%;font-size:9px;line-height:1.4}
  .contact-form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 8px}
  .contact-request-form label{grid-column:auto;gap:5px}
  .contact-request-form label:nth-child(3),.contact-message-field{grid-column:1/-1!important}
  .contact-request-form label>span{font-size:6px;letter-spacing:1.2px}
  .contact-request-form input,.contact-request-form select,.contact-request-form textarea{min-height:38px;padding:8px 9px;font-size:11px}
  .contact-request-form textarea{min-height:70px;max-height:88px}
  .contact-form-action{align-items:stretch;flex-direction:column;gap:7px;margin-top:9px}
  .contact-form-status{min-height:13px;font-size:8px}
  .contact-submit-btn{width:100%;min-width:0;min-height:42px}
}

/* CONTACT FORM READABILITY REFINEMENT */
.contact-request-form{
  color:#F3F6F2;
}
.contact-request-form label>span{
  color:#9FE5B6;
  font-size:13px;
  font-weight:700;
  line-height:1.45;
  letter-spacing:1.5px;
}
.contact-request-form input,
.contact-request-form select,
.contact-request-form textarea{
  min-height:52px;
  padding:14px 16px;
  border-color:rgba(57,255,136,.24);
  background:#07110D;
  color:#F3F6F2;
  font-size:15px;
  font-weight:500;
  line-height:1.6;
  caret-color:#39FF88;
}
.contact-request-form textarea{
  min-height:128px;
}
.contact-request-form input::placeholder,
.contact-request-form textarea::placeholder{
  color:#70877A;
  font-size:14px;
  opacity:1;
}
.contact-request-form select{
  color:#F3F6F2;
  color-scheme:dark;
}
.contact-request-form select:invalid{
  color:#70877A;
}
.contact-request-form select option{
  background:#07110D;
  color:#F3F6F2;
  font-size:14px;
  line-height:1.6;
}
.contact-request-form input:focus,
.contact-request-form select:focus,
.contact-request-form textarea:focus{
  border-color:#39FF88;
  background:#07110D;
  box-shadow:0 0 0 3px rgba(57,255,136,.09),inset 0 0 18px rgba(57,255,136,.025);
  outline:none;
}
.contact-submit-btn{
  color:#F3F6F2;
  font-size:13px;
  font-weight:800;
  line-height:1.3;
  letter-spacing:2px;
}
.contact-form-status{
  color:#F3F6F2;
  line-height:1.55;
}
@media(max-width:560px){
  .contact-panel{gap:8px}
  .contact-form-grid{gap:6px 8px}
  .contact-request-form label{gap:3px}
  .contact-request-form label>span{
    font-size:12px;
    line-height:1.45;
  }
  .contact-request-form input,
  .contact-request-form select,
  .contact-request-form textarea{
    min-height:42px;
    padding:8px 12px;
    font-size:14px;
    line-height:1.55;
  }
  .contact-request-form input::placeholder,
  .contact-request-form textarea::placeholder,
  .contact-request-form select option{
    font-size:14px;
  }
  .contact-request-form textarea{
    min-height:58px;
    max-height:76px;
  }
  .contact-form-action{gap:4px;margin-top:5px}
  .contact-submit-btn{
    min-height:42px;
    font-size:13px;
    letter-spacing:1.7px;
  }
}
/* SKY DROPDOWNS + VIEWPORT SCROLL DAMPING */
.contact-custom-select{
  position:relative;
  min-width:0;
}
.contact-request-form select.is-customized{
  position:absolute;
  width:1px;
  height:1px;
  margin:0;
  padding:0;
  opacity:0;
  pointer-events:none;
}
.contact-custom-select-trigger{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  width:100%;
  min-height:52px;
  padding:14px 16px;
  border:1px solid rgba(57,255,136,.24);
  background:#07110D;
  color:#F3F6F2;
  font-family:inherit;
  font-size:15px;
  font-weight:500;
  line-height:1.6;
  text-align:left;
  cursor:pointer;
  transition:border-color .25s ease,background-color .25s ease,box-shadow .25s ease,color .25s ease;
}
.contact-custom-select-trigger.is-placeholder{color:#70877A}
.contact-custom-select-trigger::after{
  content:"";
  flex:0 0 auto;
  width:8px;
  height:8px;
  border-right:1.5px solid #78D6FF;
  border-bottom:1.5px solid #78D6FF;
  transform:translateY(-2px) rotate(45deg);
  transition:transform .25s ease;
}
.contact-custom-select.is-open .contact-custom-select-trigger{
  border-color:#78D6FF;
  background:#06131A;
  box-shadow:0 0 0 3px rgba(120,214,255,.12),inset 0 0 20px rgba(120,214,255,.04);
}
.contact-custom-select.is-open .contact-custom-select-trigger::after{transform:translateY(2px) rotate(225deg)}
.contact-custom-select-menu{
  position:absolute;
  z-index:120;
  top:calc(100% + 6px);
  left:0;
  right:0;
  display:grid;
  gap:2px;
  max-height:240px;
  padding:5px;
  overflow:auto;
  visibility:hidden;
  opacity:0;
  transform:translateY(-7px);
  border:1px solid rgba(120,214,255,.28);
  background:#061017;
  box-shadow:0 18px 40px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.035);
  transition:opacity .2s ease,transform .2s ease,visibility .2s;
}
.contact-custom-select.is-open .contact-custom-select-menu{
  visibility:visible;
  opacity:1;
  transform:translateY(0);
}
.contact-custom-select-option{
  width:100%;
  min-height:40px;
  padding:9px 11px;
  border:1px solid transparent;
  background:#07110D;
  color:#F3F6F2;
  font-family:inherit;
  font-size:14px;
  font-weight:500;
  line-height:1.5;
  text-align:left;
  cursor:pointer;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.contact-custom-select-option:hover,
.contact-custom-select-option:focus-visible{
  outline:none;
  border-color:rgba(120,214,255,.55);
  background:#78D6FF;
  color:#032235;
  transform:translateX(2px);
}
.contact-custom-select-option[aria-selected="true"]{
  border-color:rgba(120,214,255,.42);
  background:rgba(120,214,255,.14);
  color:#CFF3FF;
}
@media(max-width:560px){
  .contact-custom-select-trigger{min-height:46px;padding:11px 12px;font-size:14px;line-height:1.55}
  .contact-custom-select-menu{max-height:210px}
  .contact-custom-select-option{min-height:42px;font-size:14px}
}
@media(prefers-reduced-motion:reduce){
  .contact-custom-select-trigger,.contact-custom-select-trigger::after,.contact-custom-select-menu,.contact-custom-select-option{transition:none}
}
/* CONTACT END ROW + TRUE FINAL EDGE */
.contact-panel>.footer-bottom{
  grid-column:1/-1;
  position:absolute;
  right:clamp(28px,5vw,76px);
  bottom:clamp(22px,2vw,34px);
  left:clamp(28px,5vw,76px);
  width:auto;
  margin-top:0;
  padding-top:18px;
}
.projects-inner:has(> .site-footer),
.case-inner:has(> .site-footer){padding-bottom:0}
@media(max-width:560px){
  .contact-panel>.footer-bottom{
    right:16px;
    bottom:max(10px,env(safe-area-inset-bottom));
    left:16px;
    padding-top:4px;
    font-size:7px;
    letter-spacing:.8px;
  }
  .contact-panel>.contact-request-form{margin-bottom:34px}
  .contact-panel>.contact-request-form .contact-submit-btn{
    min-height:42px;
    height:42px;
    padding-block:8px;
  }
}

/* ==========================================
   CONTACT TRANSMISSION — MYMIND VISUAL SYSTEM
========================================== */
.header-contact-link{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:10.5px;
  letter-spacing:2.2px;
  text-decoration:none;
}
.header-contact-arrows{
  position:relative;
  display:block;
  width:14px;
  height:14px;
  overflow:hidden;
}
.header-contact-link svg{
  position:absolute;
  inset:0;
  width:14px;
  height:14px;
  overflow:visible;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  transform-origin:center;
  transition:transform .24s cubic-bezier(.22,.61,.36,1),stroke .24s ease;
}
.header-contact-link .arrow-in{transform:translate(-100%,100%)}
.header-contact-link:hover .arrow-out,
.header-contact-link:focus-visible .arrow-out{
  stroke:var(--green-soft);
  transform:translate(100%,-100%);
}
.header-contact-link:hover .arrow-in,
.header-contact-link:focus-visible .arrow-in{
  stroke:var(--green-soft);
  transform:translate(0,0);
}

.contact-panel{
  grid-template-columns:minmax(300px,.82fr) minmax(0,1.18fr);
  gap:clamp(52px,8vw,132px);
}
.contact-panel-heading{
  position:relative;
  align-self:center;
  padding-left:24px;
}
.contact-panel-heading::before{
  content:"";
  position:absolute;
  top:4px;
  bottom:4px;
  left:0;
  width:1px;
  background:linear-gradient(180deg,var(--green),rgba(53,242,139,.08));
  box-shadow:0 0 14px rgba(53,242,139,.16);
}
.contact-panel-heading>span{
  color:var(--green);
  font-size:9px;
  letter-spacing:3.2px;
}
.contact-panel-heading h3{
  max-width:580px;
  font-size:clamp(44px,5vw,78px);
  font-weight:700;
  line-height:.9;
  letter-spacing:-.055em;
}
.contact-panel-heading p{
  max-width:390px;
  padding-top:18px;
  border-top:1px solid rgba(140,255,193,.16);
  color:#a8b9af;
  font-size:14px;
}
.contact-request-form{
  position:relative;
  align-self:center;
  padding:clamp(24px,2.5vw,38px);
  border:1px solid rgba(140,255,193,.16);
  background:linear-gradient(145deg,rgba(11,24,17,.78),rgba(4,12,8,.9));
  box-shadow:0 24px 70px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.025);
}
.contact-request-form::before{
  content:"LET'S TALK // SECURE CHANNEL";
  display:block;
  margin-bottom:24px;
  color:#F3F6F2;
  font:700 clamp(18px,2vw,30px)/1.1 Arial,sans-serif;
  letter-spacing:-.025em;
}
.contact-form-grid{gap:20px 16px}
.contact-request-form input,
.contact-request-form select,
.contact-request-form textarea,
.contact-custom-select-trigger{
  border-width:0 0 1px;
  border-color:rgba(140,255,193,.28);
  background:rgba(3,10,6,.34);
}
.contact-request-form input:hover,
.contact-request-form select:hover,
.contact-request-form textarea:hover,
.contact-custom-select-trigger:hover{border-color:rgba(140,255,193,.58)}
.contact-submit-btn{
  position:relative;
  isolation:isolate;
  width:100%;
  min-height:54px;
  overflow:hidden;
  border:1px solid rgba(140,255,193,.34);
  border-radius:0;
  background:linear-gradient(110deg,#0b1811 0%,#102219 65%,#143322 100%);
  color:#f3f6f2;
  box-shadow:inset 0 1px rgba(255,255,255,.035),0 14px 34px rgba(0,0,0,.18);
  font-size:13px;
  font-weight:800;
  letter-spacing:2.4px;
  transition:transform .24s cubic-bezier(.22,.61,.36,1),border-color .24s ease,background-color .24s ease,box-shadow .24s ease,color .24s ease;
}
.contact-submit-btn::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(105deg,transparent 0 38%,rgba(181,255,214,.16) 48%,transparent 58%);
  transform:translateX(-125%);
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
}
.contact-submit-btn i{
  color:var(--green-soft);
  font-size:17px;
  transition:transform .24s cubic-bezier(.22,.61,.36,1),color .24s ease;
}
.contact-submit-btn:hover,
.contact-submit-btn:focus-visible{
  border-color:var(--green);
  background:#102d1f;
  color:#fff;
  box-shadow:inset 0 0 22px rgba(53,242,139,.08),0 14px 34px rgba(0,0,0,.18);
}
.contact-submit-btn:hover::before,
.contact-submit-btn:focus-visible::before{transform:translateX(125%)}
.contact-submit-btn:hover i,
.contact-submit-btn:focus-visible i{color:#fff;transform:translate(4px,-4px)}
.contact-submit-btn:focus-visible{outline:2px solid var(--green-soft);outline-offset:3px}

@media(max-width:800px){
  .contact-panel{
    grid-template-columns:1fr;
    gap:20px;
  }
  .contact-panel-heading{padding-left:18px}
  .contact-panel-heading h3{font-size:clamp(30px,8vw,44px)}
  .contact-request-form{padding:20px}
}
@media(max-width:560px){
  .header-contact-link{gap:6px;font-size:8.5px;letter-spacing:1.5px}
  .header-contact-arrows,.header-contact-link svg{width:11px;height:11px}
  .contact-panel{gap:10px}
  .contact-panel-heading{padding-left:12px}
  .contact-panel-heading>span{margin-bottom:5px;font-size:6px;letter-spacing:1.6px}
  .contact-panel-heading h3{max-width:100%;margin-bottom:5px;font-size:clamp(23px,7vw,30px)}
  .contact-panel-heading p{padding-top:7px;font-size:9px;line-height:1.35}
  .contact-request-form{padding:12px}
  .contact-request-form::before{margin-bottom:9px;font-size:16px}
  .contact-form-grid{gap:6px 8px}
  .contact-submit-btn{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .header-contact-link svg{transition:none}
}

/* ==========================================
   STANDALONE CONTACT VIEW
========================================== */
.contact-page{
  position:fixed;
  inset:0;
  z-index:1200;
  display:block;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  touch-action:pan-y;
  -webkit-overflow-scrolling:touch;
  background:var(--bg);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .45s ease,visibility .45s;
}
.contact-page.active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.contact-page-header{
  position:sticky;
  top:0;
  z-index:20;
  height:68px;
  border-bottom:1px solid rgba(140,255,193,.12);
  background:rgba(5,13,8,.86);
  backdrop-filter:blur(18px);
}
.contact-header-inner{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  height:100%;
  padding-inline:clamp(22px,3.2vw,52px);
}
.contact-home-btn{
  justify-self:start;
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-height:46px;
  padding-inline:0 16px;
  color:var(--text);
  font-size:11px;
  font-weight:800;
  letter-spacing:2.4px;
}
.contact-home-btn>span:first-child{
  color:var(--green);
  font-size:17px;
  transition:transform .24s cubic-bezier(.22,.61,.36,1);
}
.contact-home-btn:hover>span:first-child,
.contact-home-btn:focus-visible>span:first-child{
  transform:translateX(-4px);
}
.contact-header-mark{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:15px;
  min-width:0;
}
.contact-header-mark strong{
  color:var(--text);
  font:900 15px/1 Consolas,"SFMono-Regular",monospace;
  letter-spacing:3.2px;
}
.contact-header-mark span{
  position:relative;
  padding-left:15px;
  color:#9ab3a4;
  font:700 9px/1 Consolas,"SFMono-Regular",monospace;
  letter-spacing:2px;
}
.contact-header-mark span::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:1px;
  height:16px;
  background:rgba(140,255,193,.2);
  transform:translateY(-50%);
}
.contact-header-status{
  display:inline-flex;
  align-items:center;
  justify-self:end;
  gap:10px;
  color:var(--green-soft);
  font:800 9px/1 Consolas,"SFMono-Regular",monospace;
  letter-spacing:2px;
}
.contact-header-status i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 10px rgba(53,242,139,.5);
}
.contact-page-content{width:100%}
.contact-page-form.contact-panel{
  position:relative;
  top:auto;
  left:auto;
  width:100%;
  height:calc(100dvh - 68px);
  min-height:620px;
  margin:0;
  transform:none;
  border-width:0 0 1px;
}
.contact-page-footer.site-footer{
  position:relative;
  left:auto;
  width:100%;
  height:auto;
  min-height:0;
  aspect-ratio:auto;
  margin:0;
  transform:none;
  overflow:hidden;
}
.contact-page-footer .site-footer-inner{
  height:auto;
  grid-template-rows:auto auto auto auto;
}
.contact-page-footer .footer-bottom{
  align-self:end;
  width:100%;
}

@media(max-width:700px){
  .contact-page-header{height:58px}
  .contact-header-inner{grid-template-columns:auto 1fr auto;gap:10px;padding-inline:16px}
  .contact-home-btn{min-height:44px;padding-right:8px;font-size:9px;letter-spacing:1.6px}
  .contact-home-btn>span:first-child{font-size:15px}
  .contact-header-mark{justify-self:center}
  .contact-header-mark span{display:none}
  .contact-header-mark strong{font-size:12px;letter-spacing:2.4px}
  .contact-header-status{font-size:0;letter-spacing:0}
  .contact-header-status i{width:7px;height:7px}
  .contact-page-form.contact-panel{
    width:100%;
    height:calc(100dvh - 58px);
    min-height:720px;
    aspect-ratio:auto;
    padding-inline:16px;
  }
  .contact-page-footer.site-footer{
    left:auto;
    width:100%;
    height:auto;
    min-height:0;
    aspect-ratio:auto;
    margin:0;
    transform:none;
  }
}
@media(prefers-reduced-motion:reduce){
  .contact-page{transition:none}
  .contact-submit-btn,
  .contact-submit-btn::before,
  .contact-submit-btn i{transition:none}
}

/* ==========================================
   EDITORIAL CASE STUDIES — 8WEST / INKKA
========================================== */
.case-study-section{
  --case-bg:#07110d;
  --case-surface:#0b0f0d;
  --case-surface-soft:#111513;
  --case-text:#f2f4f3;
  --case-copy:#b8c0bc;
  --case-muted:#7c8982;
  --case-accent:#39f3a2;
  color-scheme:dark;
  background:
    radial-gradient(circle at 82% 8%,rgba(36,232,138,.07),transparent 28rem),
    linear-gradient(180deg,#03110b 0%,var(--case-bg) 38%,#050907 100%);
  overflow-x:hidden;
  overscroll-behavior:contain;
  scrollbar-color:rgba(57,243,162,.42) #050907;
}
.case-study-section::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(rgba(57,243,162,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(57,243,162,.025) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(to bottom,#000,transparent 70%);
}
.case-study-section > header{
  position:sticky;
  top:0;
  z-index:20;
  min-height:68px;
  background:rgba(3,17,11,.82);
  border-bottom:1px solid rgba(184,192,188,.12);
  backdrop-filter:blur(18px) saturate(130%);
}
.case-study-section .header-inner{
  width:min(100%,1440px);
  min-height:68px;
  margin-inline:auto;
  padding-inline:clamp(20px,4vw,64px);
}
.case-study-section .header-btn{
  min-height:44px;
  color:var(--case-copy);
  letter-spacing:2px;
  touch-action:manipulation;
}
.case-study-section .header-btn:hover{color:var(--case-text)}
.case-study-section .header-btn:focus-visible,
.case-study-section button:focus-visible{
  outline:2px solid var(--case-accent);
  outline-offset:4px;
}
.case-container{
  width:min(calc(100% - 48px),1400px);
  max-width:none;
  margin-inline:auto;
  padding:clamp(80px,8vw,128px) 0 0;
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  column-gap:clamp(48px,7vw,112px);
  align-items:center;
}
.case-container > *{grid-column:1 / -1;min-width:0}
.case-container > .case-hero-text{grid-column:1;align-self:center;margin:0}
.case-container > .case-hero-visual{grid-column:2;align-self:center}
.case-hero-text .subtitle,
.case-label{
  display:block;
  margin-bottom:20px;
  color:var(--case-accent);
  font:700 12px/1.2 Consolas,"SFMono-Regular",monospace;
  letter-spacing:4px;
}
.case-hero-text h1{
  max-width:9ch;
  margin:0 0 22px;
  color:var(--case-text);
  font-size:clamp(72px,8vw,116px);
  line-height:.82;
  letter-spacing:-.065em;
  text-wrap:balance;
}
.case-niche{
  margin:0 0 18px;
  color:var(--case-muted);
  font-size:12px;
  line-height:1.6;
  letter-spacing:3px;
}
.case-tagline{
  max-width:520px;
  margin:0;
  color:var(--case-copy);
  font-size:clamp(18px,1.7vw,24px);
  line-height:1.5;
  text-wrap:pretty;
}
.case-meta{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px 32px;
  margin:48px 0 0;
  padding-top:24px;
  border-top:1px solid rgba(184,192,188,.16);
}
.case-meta div{min-width:0}
.case-meta dt{
  margin-bottom:8px;
  color:var(--case-accent);
  font:700 10px/1.2 Consolas,"SFMono-Regular",monospace;
  letter-spacing:2px;
}
.case-meta dd{
  margin:0;
  color:var(--case-copy);
  font-size:13px;
  line-height:1.55;
  text-wrap:pretty;
}
.case-media{
  position:relative;
  overflow:hidden;
  margin:0;
  background:var(--case-surface);
  border:1px solid rgba(184,192,188,.14);
  border-radius:2px;
}
.case-media::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);
}
.case-media img{display:block;width:100%;height:auto}
.case-hero-visual{
  box-shadow:0 32px 90px rgba(0,0,0,.34);
}
.case-hero-visual figcaption{
  position:absolute;
  inset:auto 18px 16px;
  color:rgba(242,244,243,.72);
  font:700 10px/1.2 Consolas,"SFMono-Regular",monospace;
  letter-spacing:2px;
}
.case-container > .case-description{
  max-width:none;
  margin:clamp(120px,14vw,190px) 0;
  padding:0;
  display:grid;
  grid-template-columns:minmax(220px,.65fr) minmax(0,1.35fr);
  gap:clamp(48px,8vw,140px);
  background:none;
  border:0;
}
.case-description::before{
  content:"01 // OVERVIEW";
  color:var(--case-accent);
  font:700 12px/1.2 Consolas,"SFMono-Regular",monospace;
  letter-spacing:4px;
}
.case-description p{
  max-width:760px;
  margin:0;
  color:var(--case-copy);
  font-size:clamp(18px,1.6vw,22px);
  line-height:1.8;
  text-wrap:pretty;
}
.case-video-wrap,
.case-blocks,
.case-results,
.case-process{
  margin:0 0 clamp(120px,13vw,180px);
}
.case-video-wrap{
  display:grid;
  grid-template-columns:minmax(250px,.65fr) minmax(0,1.35fr);
  gap:clamp(40px,7vw,104px);
  align-items:start;
}
.case-video-copy{
  position:sticky;
  top:108px;
  max-width:560px;
  margin:0;
  padding:0;
  background:none;
  border:0;
  clip-path:none;
}
.case-video-copy span{margin-bottom:20px;color:var(--case-accent);font-size:11px;letter-spacing:3px}
.case-video-copy h3{
  margin:0 0 18px;
  color:var(--case-text);
  font-size:clamp(38px,4vw,62px);
  line-height:1;
  letter-spacing:-.045em;
  text-wrap:balance;
}
.case-video-copy p{max-width:560px;color:var(--case-copy);font-size:17px;line-height:1.75;text-wrap:pretty}
.case-video-frame{
  width:100%;
  max-width:100%;
  justify-self:center;
  border-color:rgba(184,192,188,.16);
  border-radius:2px;
  clip-path:none;
}
.case-video-desktop .case-video-frame{aspect-ratio:var(--case-video-ratio,16/9)}
.case-video-phone .case-video-frame{width:min(100%,620px);aspect-ratio:var(--case-video-ratio,9/16);margin:0}
.case-video-frame.is-portrait-video{width:min(100%,620px)}
.case-video-frame video{object-fit:contain;background:#020403}
.case-blocks{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:clamp(64px,8vw,120px) 28px;
}
.case-block{
  grid-column:1 / -1;
  min-width:0;
  overflow:visible;
  clip-path:none;
}
.case-block:nth-child(even){grid-column:2 / 11}
.case-block:nth-child(odd):not(:first-child){grid-column:3 / 13}
.case-block.case-block-wide{grid-column:1 / -1}
.case-block.case-block-portrait{grid-column:span 6}
.case-block img{
  display:block;
  width:100%;
  height:auto;
  border-color:rgba(184,192,188,.14);
  background:var(--case-surface);
}
.case-block-info{
  max-width:760px;
  margin-top:22px;
  padding:22px 0 0;
  border-top:1px solid rgba(184,192,188,.14);
}
.case-block-info ul{gap:12px 28px}
.case-block-info ul li{color:var(--case-copy);font-size:11px;line-height:1.5;letter-spacing:2px}
.case-block-info p{color:var(--case-copy);font-size:17px;line-height:1.75}
.case-results,
.case-process{
  padding-top:clamp(64px,8vw,104px);
  border-top:1px solid rgba(184,192,188,.16);
}
.case-results::before,
.case-process::before{
  display:block;
  margin-bottom:26px;
  color:var(--case-accent);
  font:700 11px/1.2 Consolas,"SFMono-Regular",monospace;
  letter-spacing:3px;
}
.case-results::before{content:"08 // BRAND TRANSFORMATION"}
.case-process::before{content:"09 // PROCESS"}
.results-grid{margin-top:0;gap:0}
.result-item{
  display:grid;
  grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr);
  gap:24px;
  padding:30px 0;
  background:none;
  border:0;
  border-bottom:1px solid rgba(184,192,188,.12);
}
.result-before,.result-after{min-width:0;font-size:clamp(15px,1.4vw,19px);line-height:1.5;letter-spacing:0}
.result-before{color:var(--case-muted)}
.result-after{color:var(--case-text)}
.result-arrow{color:var(--case-accent);text-align:center}
.process-steps{
  max-width:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:1px;
  background:rgba(184,192,188,.12);
  list-style:none;
}
.process-step{
  min-height:156px;
  padding:24px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:space-between;
  gap:32px;
  background:var(--case-surface);
  border:0;
}
.process-num{width:auto;color:var(--case-accent);font-size:11px}
.process-name{color:var(--case-copy);font-size:13px;line-height:1.4;letter-spacing:1.5px}
.process-arrow{display:none}
.case-next{
  min-height:min(820px,82vh);
  margin:0 calc(50% - 50vw);
  padding:clamp(80px,10vw,150px) max(24px,calc((100vw - 1400px)/2));
  display:grid;
  grid-template-columns:minmax(280px,.7fr) minmax(0,1.3fr);
  gap:clamp(48px,8vw,128px);
  align-items:center;
  background:linear-gradient(135deg,#0b0f0d,#111513);
  border-block:1px solid rgba(184,192,188,.12);
}
.case-next-copy h2{
  margin:0 0 18px;
  color:var(--case-text);
  font-size:clamp(64px,9vw,132px);
  line-height:.82;
  letter-spacing:-.065em;
}
.case-next-copy p{color:var(--case-muted);font-size:15px;line-height:1.6}
.case-next-link{
  width:min(100%,300px);
  min-height:54px;
  margin-top:36px;
  padding:0 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:var(--case-text);
  background:transparent;
  border:1px solid rgba(184,192,188,.22);
  font:700 11px/1 Consolas,"SFMono-Regular",monospace;
  letter-spacing:2px;
  cursor:pointer;
  transition:color .25s ease,background-color .25s ease,border-color .25s ease,transform .25s ease;
}
.case-next-link:hover{color:#03110b;background:var(--case-accent);border-color:var(--case-accent);transform:translateY(-2px)}
.case-next-visual{
  position:relative;
  padding:0;
  overflow:hidden;
  background:#050907;
  border:1px solid rgba(184,192,188,.16);
  cursor:pointer;
}
.case-next-visual img{display:block;width:100%;height:auto;transition:transform .7s cubic-bezier(.16,1,.3,1),filter .35s ease}
.case-next-visual:hover img{transform:scale(1.025);filter:brightness(1.06)}
.case-side-next{
  position:fixed;
  right:0;
  top:50%;
  z-index:30;
  width:58px;
  min-height:210px;
  padding:18px 12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  color:var(--case-copy);
  background:rgba(11,15,13,.88);
  border:1px solid rgba(184,192,188,.18);
  border-right:0;
  backdrop-filter:blur(14px);
  cursor:pointer;
  transform:translateY(-50%);
  transition:width .3s cubic-bezier(.16,1,.3,1),color .25s ease,background-color .25s ease;
}
.case-side-next small,.case-side-next strong{writing-mode:vertical-rl;transform:rotate(180deg)}
.case-side-next small{font-size:8px;letter-spacing:2px}
.case-side-next strong{color:var(--case-text);font-size:12px;letter-spacing:2px}
.case-side-next:hover{width:68px;color:var(--case-accent);background:rgba(17,21,19,.96)}
.case-container > .site-footer{
  grid-column:1 / -1;
  margin-top:0;
}

@media(max-width:1024px){
  .case-container{width:min(calc(100% - 40px),920px);grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:40px}
  .case-hero-text h1{font-size:clamp(64px,9vw,92px)}
  .case-meta{grid-template-columns:1fr}
  .case-container > .case-description{grid-template-columns:180px 1fr;gap:40px}
  .case-video-wrap{grid-template-columns:260px minmax(0,1fr);gap:40px}
  .process-steps{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:700px){
  .case-study-section > header,.case-study-section .header-inner{min-height:58px}
  .case-study-section .header-inner{padding-inline:14px}
  .case-study-section .header-right{gap:6px}
  .case-study-section .header-btn{min-height:44px;padding-inline:7px;font-size:8px;letter-spacing:1.2px}
  .case-container{
    width:100%;
    padding:clamp(70px,10svh,92px) 20px 0;
    display:flex;
    flex-direction:column;
    align-items:stretch;
  }
  .case-container > .case-hero-text{min-height:auto}
  .case-hero-text .subtitle{margin-bottom:14px;font-size:10px;letter-spacing:3px}
  .case-hero-text h1{font-size:clamp(48px,15vw,64px);line-height:.88;margin-bottom:16px}
  .case-niche{font-size:10px;letter-spacing:2px}
  .case-tagline{font-size:17px;line-height:1.5}
  .case-meta{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:28px;padding-top:18px}
  .case-meta dd{font-size:12px}
  .case-hero-visual{margin-top:34px}
  .case-hero-visual figcaption{inset:auto 12px 10px;font-size:8px}
  .case-container > .case-description{
    display:block;
    margin:88px 0;
  }
  .case-description::before{display:block;margin-bottom:24px;font-size:10px;letter-spacing:3px}
  .case-description p{font-size:17px;line-height:1.72}
  .case-video-wrap,.case-blocks,.case-results,.case-process{margin-bottom:96px}
  .case-video-wrap{display:flex;flex-direction:column;gap:28px}
  .case-video-copy{position:static}
  .case-video-copy span{font-size:10px}
  .case-video-copy h3{font-size:clamp(32px,10vw,40px)}
  .case-video-copy p{font-size:15px}
  .case-video-phone .case-video-frame{width:min(100%,390px)}
  .case-blocks{display:flex;flex-direction:column;gap:76px}
  .case-block,.case-block:nth-child(even),.case-block:nth-child(odd):not(:first-child){width:100%;grid-column:auto}
  .case-block.case-block-portrait{width:min(100%,360px);margin-inline:auto}
  .case-block-info ul{display:grid;grid-template-columns:1fr;gap:10px}
  .case-results,.case-process{padding-top:56px}
  .result-item{grid-template-columns:1fr 30px 1fr;gap:10px;padding:22px 0}
  .result-before,.result-after{font-size:13px}
  .process-steps{grid-template-columns:repeat(2,1fr)}
  .process-step{min-height:124px;padding:18px}
  .case-next{
    min-height:100svh;
    width:calc(100% + 40px);
    margin-inline:-20px;
    padding:84px 20px max(48px,env(safe-area-inset-bottom));
    grid-template-columns:1fr;
    gap:40px;
  }
  .case-next-copy h2{font-size:clamp(58px,20vw,82px)}
  .case-next-visual{order:-1}
  .case-side-next{display:none}
}
@media(prefers-reduced-motion:reduce){
  .case-next-link,.case-next-visual img,.case-side-next{transition:none}
}


/* =========================================================
   GLOBAL BROWSER SCROLL MODE — VALID CSS
   Browser scrollbar stays visible.
========================================================= */
html{
  overflow-x:clip !important;
  overflow-y:scroll !important;
}

body{
  overflow-x:clip !important;
  overflow-y:visible !important;
}

/* Selected Work becomes part of the document flow.
   The browser scrollbar drives the 500svh sequence. */
#projectsUniverse{
  position:relative !important;
  inset:auto !important;
  width:100% !important;
  min-height:100vh !important;
  height:auto !important;
  overflow:visible !important;
  display:none;
}

#projectsUniverse.browser-scroll-active{
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}

.selected-work-experience{
  position:relative !important;
  height:500svh !important;
  overflow:visible !important;
}

.selected-work-stage{
  position:sticky !important;
  top:0 !important;
  width:100% !important;
  height:100svh !important;
  overflow:hidden !important;
}

/* Case studies also use the page/document scrollbar. */
.case-study-section,
#case8west{
  position:relative !important;
  inset:auto !important;
  width:100% !important;
  min-height:100vh !important;
  height:auto !important;
  overflow:visible !important;
  display:none !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  overscroll-behavior:auto !important;
}

.case-study-section.active,
#case8west.active{
  display:block !important;
}

/* Contact page uses the browser scrollbar too. */
.contact-page{
  position:relative !important;
  inset:auto !important;
  width:100% !important;
  min-height:100vh !important;
  height:auto !important;
  overflow:visible !important;
  display:none !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}

.contact-page.active{
  display:block !important;
}

/* =========================================================
   CPU / PAINT OPTIMIZATION
========================================================= */

/* 8WEST: image 8 + checkout image 9 as phone-sized 9:16 shots. */
#case8west .case-block-phone-shot{
  width:min(390px,100%) !important;
  margin-inline:auto !important;
}
#case8west .case-block-phone-shot img{
  width:100% !important;
  aspect-ratio:9 / 16 !important;
  height:auto !important;
  max-height:78svh;
  object-fit:contain !important;
  background:#050805;
}
@media(max-width:700px){
  #case8west .case-block-phone-shot{
    width:min(330px,100%) !important;
  }
}

/* Avoid permanent compositor layers. */
.nav-item,
.hs-case-card,
.hx-roll-face{
  will-change:auto !important;
}

/* HERSHOP / LA BELLA: lightweight normal cards, no sticky paper-stack cost. */
.hs-case-card{
  position:relative !important;
  top:auto !important;
  transform:none !important;
  opacity:1 !important;
  box-shadow:0 12px 34px rgba(0,0,0,.22) !important;
}

/* Static background effects instead of continuously animated blur layers. */
.radial-glow{
  filter:none !important;
  animation:none !important;
  width:820px !important;
  height:820px !important;
}
.particles{
  animation:none !important;
}

/* Cheaper header blur. */
#siteHeader,
#projectsHeader,
#caseHeader,
#caseHeaderINKKA,
#caseHeaderLabella{
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
}

/* Skip painting heavy off-screen case-study content. */
.case-block,
.case-video-wrap,
.hs-case-card,
.hs-video-panel,
.case-results,
.case-process,
.case-next{
  content-visibility:auto;
  contain-intrinsic-size:auto 720px;
}

/* Lighter hover paint. */
.project-card:hover{
  box-shadow:0 14px 38px rgba(0,0,0,.24) !important;
}


/* =========================================================
   RESPONSIVE CASE-STUDY MEDIA FIX
   Desktop experience = full-width 16:9.
   Mobile experience remains a centered phone-sized 9:16 block below it.
========================================================= */
.hs-responsive{
  display:block !important;
}
.hs-responsive > .hs-section-heading{
  width:100%;
  max-width:900px;
}
.hs-video-desktop{
  width:100% !important;
  max-width:1200px;
  margin:0 auto !important;
}
.hs-video-desktop video{
  width:100% !important;
  height:auto !important;
  aspect-ratio:16 / 9 !important;
  max-height:none !important;
  object-fit:contain !important;
}
.hs-video-mobile{
  width:min(420px,100%) !important;
  margin:clamp(54px,7vw,92px) auto 0 !important;
}
.hs-video-mobile video{
  width:100% !important;
  height:auto !important;
  aspect-ratio:9 / 16 !important;
  max-height:78svh !important;
  object-fit:contain !important;
}

/* Selected Work phone sequence: fill the viewport cleanly. */
@media(max-width:767px){
  .selected-work-phone-sequence{
    overflow:visible !important;
    contain:none !important;
  }
  .selected-work-phone-sticky{
    overflow:hidden !important;
  }
  .selected-work-phone-canvas,
  .selected-work-phone-poster{
    width:100% !important;
    height:100% !important;
  }
}


/* =========================================================
   COMPACT RESPONSIVE VIDEO SECTION — HERSHOP + LA BELLA
   Desktop PC 16:9 + phone 9:16 side-by-side without oversized media.
========================================================= */
@media(min-width: 901px){
  .hs-responsive{
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) 240px !important;
    column-gap:clamp(28px,3.2vw,52px) !important;
    row-gap:28px !important;
    align-items:start !important;
    max-width:1060px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    margin-bottom:clamp(90px,9vw,135px) !important;
  }

  .hs-responsive > .hs-section-heading{
    grid-column:1 / -1 !important;
    width:100% !important;
    max-width:760px !important;
    margin-bottom:8px !important;
  }

  .hs-responsive > .hs-section-heading h2{
    font-size:clamp(34px,3.5vw,54px) !important;
    line-height:.98 !important;
  }

  .hs-video-panel{
    gap:16px !important;
    min-width:0 !important;
  }

  .hs-video-panel > div{
    max-width:none !important;
  }

  .hs-video-panel h3{
    font-size:clamp(26px,2.6vw,40px) !important;
    margin-bottom:14px !important;
  }

  .hs-video-panel p{
    font-size:13px !important;
    line-height:1.55 !important;
  }

  .hs-video-desktop{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
  }

  .hs-video-desktop video{
    width:100% !important;
    aspect-ratio:16 / 9 !important;
    max-height:430px !important;
    object-fit:contain !important;
  }

  .hs-video-mobile{
    width:240px !important;
    margin:0 !important;
    justify-self:end !important;
  }

  .hs-video-mobile video{
    width:100% !important;
    aspect-ratio:9 / 16 !important;
    max-height:430px !important;
    object-fit:contain !important;
  }
}

@media(min-width: 901px) and (max-width: 1180px){
  .hs-responsive{
    max-width:900px !important;
    grid-template-columns:minmax(0,1fr) 210px !important;
  }
  .hs-video-mobile{
    width:210px !important;
  }
  .hs-video-desktop video,
  .hs-video-mobile video{
    max-height:380px !important;
  }
}

@media(max-width: 900px){
  .hs-responsive{
    display:flex !important;
    flex-direction:column !important;
    gap:38px !important;
    margin-bottom:80px !important;
  }

  .hs-video-desktop{
    width:100% !important;
    max-width:760px !important;
    margin:0 auto !important;
  }

  .hs-video-mobile{
    width:min(300px,82vw) !important;
    margin:0 auto !important;
  }

  .hs-video-mobile video{
    max-height:68svh !important;
  }
}


/* =========================================================
   SELECTED WORK MOBILE — NATIVE 9:16 FRAMES
   Source = 720x1280. Keep original ratio and composition.
========================================================= */
@media(max-width:767px){
  .selected-work-phone-sticky{
    overflow:hidden !important;
  }

  .selected-work-phone-canvas{
    position:absolute !important;
    top:50% !important;
    left:50% !important;
    width:auto !important;
    height:100svh !important;
    max-width:none !important;
    aspect-ratio:9 / 16 !important;
    transform:translate(-50%,-50%) !important;
  }
}


/* =========================================================
   24" / LANDSCAPE DESKTOP — COMPACT RESPONSIVE CASE MEDIA
   HERSHOP + LA BELLA
========================================================= */
@media (min-width: 1000px) and (min-aspect-ratio: 4/3){
  .hs-responsive{
    grid-template-columns:minmax(0, 650px) 180px !important;
    max-width:900px !important;
    gap:24px 34px !important;
    margin-bottom:72px !important;
    align-items:start !important;
  }

  .hs-responsive > .hs-section-heading{
    max-width:650px !important;
    margin-bottom:0 !important;
  }

  .hs-responsive > .hs-section-heading h2{
    font-size:clamp(30px,2.55vw,44px) !important;
    line-height:.96 !important;
  }

  .hs-video-panel{
    gap:10px !important;
  }

  .hs-video-panel h3{
    font-size:clamp(22px,1.9vw,31px) !important;
    line-height:1 !important;
    margin-bottom:8px !important;
  }

  .hs-video-panel p{
    margin:0 !important;
    font-size:11px !important;
    line-height:1.42 !important;
  }

  .hs-video-desktop{
    width:650px !important;
    max-width:650px !important;
  }

  .hs-video-desktop video{
    width:650px !important;
    height:auto !important;
    aspect-ratio:16 / 9 !important;
    max-height:366px !important;
    object-fit:contain !important;
  }

  .hs-video-mobile{
    width:180px !important;
    max-width:180px !important;
    justify-self:end !important;
  }

  .hs-video-mobile video{
    width:180px !important;
    height:auto !important;
    aspect-ratio:9 / 16 !important;
    max-height:320px !important;
    object-fit:contain !important;
  }
}

/* Short landscape screens: shrink the media more so it does not dominate the viewport. */
@media (min-width: 1000px) and (max-height: 820px){
  .hs-responsive{
    grid-template-columns:minmax(0, 560px) 160px !important;
    max-width:780px !important;
    gap:18px 28px !important;
    margin-bottom:56px !important;
  }

  .hs-video-desktop,
  .hs-video-desktop video{
    width:560px !important;
    max-width:560px !important;
  }

  .hs-video-desktop video{
    max-height:315px !important;
  }

  .hs-video-mobile,
  .hs-video-mobile video{
    width:160px !important;
    max-width:160px !important;
  }

  .hs-video-mobile video{
    max-height:285px !important;
  }
}

/* =========================================================
   HERSHOP + LA BELLA RESPONSIVE SHOWCASE
   PC and Phone each get their own full row.
   Copy on the left, media on the right.
========================================================= */
@media(min-width: 901px){
  .hs-responsive{
    display:block !important;
    max-width:1180px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    margin-bottom:clamp(90px,9vw,140px) !important;
  }

  .hs-responsive > .hs-section-heading{
    width:100% !important;
    max-width:900px !important;
    margin-bottom:44px !important;
  }

  .hs-responsive > .hs-section-heading h2{
    font-size:clamp(36px,3.6vw,58px) !important;
    line-height:.98 !important;
  }

  .hs-responsive .hs-video-panel{
    display:grid !important;
    grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr) !important;
    align-items:center !important;
    gap:clamp(34px,5vw,76px) !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:clamp(28px,3vw,42px) 0 !important;
  }

  .hs-responsive .hs-video-panel + .hs-video-panel{
    margin-top:clamp(44px,5vw,72px) !important;
    padding-top:clamp(44px,5vw,72px) !important;
    border-top:1px solid rgba(223,196,127,.12) !important;
  }

  .hs-responsive .hs-video-panel > div{
    width:100% !important;
    max-width:430px !important;
  }

  .hs-responsive .hs-video-panel h3{
    font-size:clamp(28px,2.7vw,44px) !important;
    line-height:1 !important;
    margin-bottom:16px !important;
  }

  .hs-responsive .hs-video-panel p{
    margin:0 !important;
    font-size:14px !important;
    line-height:1.7 !important;
  }

  .hs-responsive .hs-video-desktop video{
    width:100% !important;
    max-width:760px !important;
    aspect-ratio:16 / 9 !important;
    height:auto !important;
    max-height:none !important;
    object-fit:contain !important;
    justify-self:end !important;
  }

  .hs-responsive .hs-video-mobile{
    align-items:center !important;
  }

  .hs-responsive .hs-video-mobile video{
    width:min(330px,100%) !important;
    aspect-ratio:9 / 16 !important;
    height:auto !important;
    max-height:620px !important;
    object-fit:contain !important;
    justify-self:end !important;
  }
}

/* 24-inch / landscape desktop */
@media(min-width: 1200px) and (min-aspect-ratio: 4/3){
  .hs-responsive{
    max-width:1120px !important;
  }

  .hs-responsive .hs-video-panel{
    grid-template-columns:minmax(290px,.78fr) minmax(0,1.22fr) !important;
    gap:58px !important;
  }

  .hs-responsive .hs-video-desktop video{
    max-width:720px !important;
  }

  .hs-responsive .hs-video-mobile video{
    width:300px !important;
    max-height:560px !important;
  }
}

/* Tablet / mobile: each row stacks copy then media */
@media(max-width: 900px){
  .hs-responsive{
    display:block !important;
  }

  .hs-responsive .hs-video-panel{
    display:flex !important;
    flex-direction:column !important;
    gap:22px !important;
    width:100% !important;
    max-width:760px !important;
    margin:0 auto !important;
    padding:28px 0 !important;
  }

  .hs-responsive .hs-video-panel + .hs-video-panel{
    margin-top:34px !important;
    padding-top:40px !important;
    border-top:1px solid rgba(223,196,127,.12) !important;
  }

  .hs-responsive .hs-video-desktop video{
    width:100% !important;
    aspect-ratio:16 / 9 !important;
  }

  .hs-responsive .hs-video-mobile video{
    width:min(300px,82vw) !important;
    aspect-ratio:9 / 16 !important;
    margin:0 auto !important;
  }
}


/* =========================================================
   SECTION REVEAL — SCROLL SAFE
   No opacity:0 dependency. Sections slide in from left/right
   only when they enter the viewport.
========================================================= */
.reveal-section{
  opacity:1 !important;
  transition:
    transform .7s cubic-bezier(.16,1,.3,1),
    filter .7s cubic-bezier(.16,1,.3,1) !important;
  transform:translate3d(0,0,0);
  filter:none;
}

.reveal-section.reveal-from-left.reveal-pending{
  transform:translate3d(-56px,0,0);
  filter:blur(3px);
}

.reveal-section.reveal-from-right.reveal-pending{
  transform:translate3d(56px,0,0);
  filter:blur(3px);
}

.reveal-section.reveal-visible{
  transform:translate3d(0,0,0) !important;
  filter:none !important;
}

@media(max-width:700px){
  .reveal-section.reveal-from-left.reveal-pending{
    transform:translate3d(-28px,0,0);
  }
  .reveal-section.reveal-from-right.reveal-pending{
    transform:translate3d(28px,0,0);
  }
}

@media(prefers-reduced-motion:reduce){
  .reveal-section,
  .reveal-section.reveal-pending,
  .reveal-section.reveal-visible{
    transform:none !important;
    filter:none !important;
    transition:none !important;
  }
}

/* Never hide footer/sections with opacity. */
.site-footer,
.case-study-section,
.hs-responsive,
.case-block,
.case-results,
.case-process,
.case-next,
.sky-capabilities,
.footer-work,
.contact-panel{
  opacity:1 !important;
}


/* =========================================================
   FOOTER + CONTACT FORM LAYOUT RESTORE
   Footer/form must stay in their original positions and never
   receive left/right reveal transforms.
========================================================= */
.site-footer,
.site-footer *,
.contact-panel,
.contact-panel *{
  transform:none !important;
  filter:none !important;
}

.site-footer,
.contact-panel{
  opacity:1 !important;
}

.site-footer .contact-panel{
  position:relative !important;
  inset:auto !important;
}

.site-footer .footer-inner,
.site-footer .footer-work,
.site-footer .contact-panel,
.site-footer .footer-bottom{
  width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Reveal animation must never touch footer/form descendants. */
.site-footer .reveal-section,
.contact-panel.reveal-section,
.contact-panel .reveal-section{
  transform:none !important;
  filter:none !important;
  transition:none !important;
}




/* =========================================================
   FOOTER / TALK / FORM — STATIC WITHOUT BREAKING LAYOUT
========================================================= */

/* Footer must be visible, but keep its original left/width/translateX centering. */
.site-footer{
  opacity:1 !important;
  animation:none !important;
}

/* Disable reveal/scroll animation only. Do NOT override structural transforms. */
.site-footer .footer-intro,
.site-footer .footer-actions,
.site-footer .footer-work,
.site-footer .contact-panel,
.site-footer .footer-bottom,
.site-footer .footer-brain-stage,
.site-footer .footer-project,
.site-footer .footer-btn,
.site-footer .contact-panel-heading,
.site-footer .contact-request-form,
.site-footer .contact-form-grid,
.site-footer .contact-form-action,
.site-footer .contact-submit-btn,
.site-footer .js-contact-link{
  opacity:1 !important;
  filter:none !important;
  animation:none !important;
}

/* Reveal system must never modify footer or contact form. */
.site-footer .reveal-section,
.site-footer .reveal-pending,
.site-footer .reveal-visible,
.contact-panel.reveal-section,
.contact-panel .reveal-section,
.contact-panel .reveal-pending,
.contact-panel .reveal-visible,
.js-contact-link.reveal-section,
.js-contact-link.reveal-pending,
.js-contact-link.reveal-visible{
  opacity:1 !important;
  filter:none !important;
  animation:none !important;
  transition:none !important;
}

/* Preserve original footer structural positioning. */
.site-footer{
  transform:translateX(calc(-50% + 7px)) !important;
}

/* Contact form returns to its original grid/layout. */
.site-footer .contact-panel{
  position:relative !important;
  inset:auto !important;
  display:grid !important;
  grid-template-columns:minmax(250px,.7fr) minmax(0,1.3fr) !important;
  gap:clamp(36px,6vw,96px) !important;
  margin-top:clamp(48px,7vw,92px) !important;
  padding:clamp(28px,4vw,54px) 0 !important;
}

/* No entrance animation on footer buttons / TALK / form controls.
   Keep hover functionality intact. */
.site-footer .footer-btn,
.site-footer .footer-project,
.site-footer .contact-request-form input,
.site-footer .contact-request-form select,
.site-footer .contact-request-form textarea,
.site-footer .contact-submit-btn{
  animation:none !important;
}

/* Brain lines stay drawn with no reveal animation. */
.site-footer .footer-brain-lines path{
  stroke-dashoffset:0 !important;
}


/* =========================================================
   FINAL MOBILE SELECTED WORK + CONTACT PAGE FIX
========================================================= */

/* Selected Work phone:
   poster and canvas use the SAME native 9:16 box from the first paint.
   This prevents the first frame from appearing oversized and then snapping
   into the correct rectangle after the first scroll. */
@media(max-width:767px){
  .selected-work-phone-sticky{
    position:sticky !important;
    top:0 !important;
    height:100svh !important;
    min-height:100svh !important;
    overflow:hidden !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  .selected-work-phone-poster,
  .selected-work-phone-canvas{
    position:absolute !important;
    inset:auto !important;
    top:50% !important;
    left:50% !important;
    width:auto !important;
    height:min(100svh, calc(100vw * 16 / 9)) !important;
    max-width:100vw !important;
    aspect-ratio:9 / 16 !important;
    transform:translate(-50%,-50%) !important;
  }

  .selected-work-phone-poster{
    background-size:100% 100% !important;
    background-position:center !important;
    background-repeat:no-repeat !important;
  }
}

/* Standalone LET'S TALK page:
   keep the cloned contact form in normal document flow and fully visible. */
.contact-page-content{
  position:relative !important;
  display:block !important;
  width:100% !important;
  overflow:visible !important;
}

.contact-page-form.contact-panel{
  position:relative !important;
  top:auto !important;
  right:auto !important;
  bottom:auto !important;
  left:auto !important;
  display:grid !important;
  width:min(calc(100% - 32px),1180px) !important;
  height:auto !important;
  min-height:0 !important;
  aspect-ratio:auto !important;
  margin:0 auto !important;
  padding:clamp(42px,6vw,76px) 0 !important;
  overflow:visible !important;
  transform:none !important;
  opacity:1 !important;
  visibility:visible !important;
}

/* The footer clone inside LET'S TALK must NOT inherit the normal footer's
   centered translateX layout, otherwise it shifts left. */
.contact-page-footer.site-footer{
  position:relative !important;
  top:auto !important;
  right:auto !important;
  bottom:auto !important;
  left:auto !important;
  width:100% !important;
  max-width:none !important;
  height:auto !important;
  min-height:0 !important;
  aspect-ratio:auto !important;
  margin:0 !important;
  transform:none !important;
  opacity:1 !important;
  overflow:hidden !important;
}

@media(max-width:700px){
  .contact-page-content{
    padding:0 !important;
  }

  .contact-page-form.contact-panel{
    grid-template-columns:1fr !important;
    gap:22px !important;
    width:100% !important;
    margin:0 !important;
    padding:34px 18px 42px !important;
    border-left:0 !important;
    border-right:0 !important;
  }

  .contact-page-form .contact-panel-heading{
    width:100% !important;
    padding-left:12px !important;
  }

  .contact-page-form .contact-request-form{
    display:block !important;
    width:100% !important;
    padding:16px !important;
    margin:0 !important;
    opacity:1 !important;
    visibility:visible !important;
  }

  .contact-page-form .contact-form-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  .contact-page-form .contact-request-form label,
  .contact-page-form .contact-request-form label:nth-child(3),
  .contact-page-form .contact-request-form label:nth-child(4),
  .contact-page-form .contact-request-form label:nth-child(5),
  .contact-page-form .contact-message-field{
    grid-column:1 / -1 !important;
  }

  .contact-page-form .contact-form-action{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:12px !important;
  }

  .contact-page-footer.site-footer{
    left:auto !important;
    width:100% !important;
    margin:0 !important;
    transform:none !important;
  }
}


/* =========================================================
   FINAL LET'S TALK MOBILE LAYOUT
   Footer first, contact form directly underneath.
========================================================= */

#contactPage{
  overflow-x:hidden !important;
  overflow-y:auto !important;
}

#contactPage .contact-page-content{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  width:100% !important;
  min-height:100% !important;
  overflow:visible !important;
}

/* Footer clone on LET'S TALK: normal flow, centered, never translated. */
#contactPage .contact-page-footer.site-footer{
  order:1 !important;
  position:relative !important;
  inset:auto !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
  width:100% !important;
  max-width:none !important;
  height:auto !important;
  min-height:0 !important;
  margin:0 !important;
  transform:none !important;
  opacity:1 !important;
  visibility:visible !important;
  overflow:visible !important;
}

/* Form clone: always directly after the footer. */
#contactPage .contact-page-form.contact-panel{
  order:2 !important;
  position:relative !important;
  inset:auto !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
  display:grid !important;
  width:min(1180px,calc(100% - 32px)) !important;
  height:auto !important;
  min-height:0 !important;
  margin:0 auto !important;
  padding:48px 24px 64px !important;
  aspect-ratio:auto !important;
  transform:none !important;
  opacity:1 !important;
  visibility:visible !important;
  overflow:visible !important;
  z-index:1 !important;
}

#contactPage .contact-page-form .contact-panel-heading,
#contactPage .contact-page-form .contact-request-form,
#contactPage .contact-page-form .contact-form-grid,
#contactPage .contact-page-form .contact-form-action{
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  filter:none !important;
}

@media(max-width:700px){
  #contactPage .contact-page-footer.site-footer{
    width:100% !important;
    margin:0 !important;
    transform:none !important;
  }

  #contactPage .contact-page-footer .site-footer-inner{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
  }

  #contactPage .contact-page-form.contact-panel{
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:34px 16px 48px !important;
    border-right:0 !important;
    border-left:0 !important;
  }

  #contactPage .contact-page-form .contact-panel-heading{
    display:block !important;
    width:100% !important;
    margin:0 0 24px !important;
    padding:0 0 0 12px !important;
  }

  #contactPage .contact-page-form .contact-request-form{
    position:relative !important;
    display:block !important;
    width:100% !important;
    height:auto !important;
    margin:0 !important;
    padding:16px !important;
  }

  #contactPage .contact-page-form .contact-form-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:14px !important;
    width:100% !important;
  }

  #contactPage .contact-page-form .contact-request-form label,
  #contactPage .contact-page-form .contact-request-form label:nth-child(3),
  #contactPage .contact-page-form .contact-request-form label:nth-child(4),
  #contactPage .contact-page-form .contact-request-form label:nth-child(5),
  #contactPage .contact-page-form .contact-message-field{
    display:grid !important;
    grid-column:1 / -1 !important;
    width:100% !important;
  }

  #contactPage .contact-page-form input,
  #contactPage .contact-page-form select,
  #contactPage .contact-page-form textarea,
  #contactPage .contact-page-form .contact-custom-select-trigger{
    width:100% !important;
    max-width:none !important;
  }

  #contactPage .contact-page-form .contact-form-action{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    width:100% !important;
    gap:12px !important;
    margin-top:16px !important;
  }

  #contactPage .contact-page-form .contact-submit-btn{
    display:flex !important;
    width:100% !important;
    min-height:48px !important;
  }
}


/* =========================================================
   MOBILE LET'S TALK FORM — HARD VISIBILITY GUARANTEE
========================================================= */
@media(max-width:700px){
  html body #contactPage.active{
    display:block !important;
    height:auto !important;
    min-height:100vh !important;
    overflow:visible !important;
  }

  html body #contactPage.active .contact-page-content{
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
  }

  html body #contactPage.active .contact-page-footer.site-footer{
    order:1 !important;
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    height:auto !important;
    margin:0 !important;
    transform:none !important;
  }

  html body #contactPage.active .contact-page-form.contact-panel{
    order:2 !important;
    position:relative !important;
    inset:auto !important;
    display:block !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:34px 16px 54px !important;
    transform:none !important;
    opacity:1 !important;
    visibility:visible !important;
    overflow:visible !important;
    z-index:5 !important;
  }

  html body #contactPage.active .contact-page-form .contact-panel-heading,
  html body #contactPage.active .contact-page-form .contact-request-form,
  html body #contactPage.active .contact-page-form .contact-form-grid,
  html body #contactPage.active .contact-page-form .contact-form-action{
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    filter:none !important;
  }

  html body #contactPage.active .contact-page-form .contact-request-form{
    display:block !important;
    width:100% !important;
    height:auto !important;
  }

  html body #contactPage.active .contact-page-form .contact-form-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
}


/* =========================================================
   RESTORE NORMAL FOOTER CONTACT FORM ON MOBILE
   Selected Work + Case Studies only.
   The form sits BELOW the footer as the original design intended.
========================================================= */
@media(max-width:560px){

  /* Normal footers need to allow the absolutely-positioned form
     to extend below them and reserve space for it. */
  .site-footer:not(.contact-page-footer){
    overflow:visible !important;
    margin-bottom:calc((100dvw - 27px) * 16 / 9 + 17px) !important;
  }

  /* Restore the original mobile contact panel placement below footer. */
  .site-footer:not(.contact-page-footer) > .site-footer-inner > .contact-panel{
    position:absolute !important;
    top:calc(100% + 14px) !important;
    right:auto !important;
    bottom:auto !important;
    left:50% !important;

    display:grid !important;
    grid-template-columns:1fr !important;
    align-content:center !important;
    gap:14px !important;

    width:calc(100dvw - 27px) !important;
    height:calc((100dvw - 27px) * 16 / 9 + 32px) !important;
    min-height:0 !important;
    aspect-ratio:auto !important;

    margin:0 !important;
    padding:24px 16px !important;

    transform:translateX(-50%) !important;
    opacity:1 !important;
    visibility:visible !important;
    overflow:hidden !important;
    z-index:5 !important;
  }

  .site-footer:not(.contact-page-footer) > .site-footer-inner > .contact-panel .contact-panel-heading{
    display:block !important;
    width:100% !important;
    padding-left:12px !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
  }

  .site-footer:not(.contact-page-footer) > .site-footer-inner > .contact-panel .contact-request-form{
    display:block !important;
    position:relative !important;
    width:100% !important;
    height:auto !important;
    margin:0 !important;
    padding:12px !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
  }

  .site-footer:not(.contact-page-footer) > .site-footer-inner > .contact-panel .contact-form-grid{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:9px 8px !important;
    width:100% !important;
  }

  .site-footer:not(.contact-page-footer) > .site-footer-inner > .contact-panel .contact-request-form label{
    display:grid !important;
    grid-column:auto !important;
    gap:5px !important;
  }

  .site-footer:not(.contact-page-footer) > .site-footer-inner > .contact-panel .contact-request-form label:nth-child(3),
  .site-footer:not(.contact-page-footer) > .site-footer-inner > .contact-panel .contact-message-field{
    grid-column:1 / -1 !important;
  }

  .site-footer:not(.contact-page-footer) > .site-footer-inner > .contact-panel .contact-form-action{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:7px !important;
    margin-top:9px !important;
  }

  .site-footer:not(.contact-page-footer) > .site-footer-inner > .contact-panel .contact-submit-btn{
    width:100% !important;
    min-width:0 !important;
    min-height:42px !important;
  }
}


/* =========================================================
   MOBILE FOOTER FORM — POLISHED LAYOUT
   Fixes cramped fields + credit overlap with SEND REQUEST.
========================================================= */
@media(max-width:560px){

  /* Give the form a little more breathing room below the footer. */
  .site-footer:not(.contact-page-footer){
    margin-bottom:calc((100dvw - 27px) * 16 / 9 + 92px) !important;
  }

  .site-footer:not(.contact-page-footer) > .site-footer-inner > .contact-panel{
    height:auto !important;
    min-height:calc((100dvw - 27px) * 16 / 9 + 88px) !important;
    align-content:start !important;
    gap:18px !important;
    padding:26px 16px 20px !important;
    overflow:visible !important;
  }

  .site-footer:not(.contact-page-footer) > .site-footer-inner > .contact-panel .contact-panel-heading{
    margin:0 0 6px !important;
  }

  .site-footer:not(.contact-page-footer) > .site-footer-inner > .contact-panel .contact-panel-heading h3{
    max-width:100% !important;
    font-size:clamp(24px,7.4vw,31px) !important;
    line-height:.94 !important;
  }

  .site-footer:not(.contact-page-footer) > .site-footer-inner > .contact-panel .contact-panel-heading p{
    max-width:100% !important;
    font-size:9.5px !important;
    line-height:1.45 !important;
  }

  .site-footer:not(.contact-page-footer) > .site-footer-inner > .contact-panel .contact-request-form{
    padding:14px !important;
    margin:0 !important;
    border-color:rgba(140,255,193,.2) !important;
    background:linear-gradient(145deg,rgba(8,20,13,.9),rgba(3,10,6,.96)) !important;
  }

  .site-footer:not(.contact-page-footer) > .site-footer-inner > .contact-panel .contact-request-form::before{
    margin-bottom:14px !important;
    font-size:14px !important;
    line-height:1.15 !important;
  }

  .site-footer:not(.contact-page-footer) > .site-footer-inner > .contact-panel .contact-form-grid{
    gap:11px 9px !important;
  }

  .site-footer:not(.contact-page-footer) > .site-footer-inner > .contact-panel .contact-request-form label{
    gap:4px !important;
  }

  .site-footer:not(.contact-page-footer) > .site-footer-inner > .contact-panel .contact-request-form label>span{
    font-size:8px !important;
    letter-spacing:1.25px !important;
  }

  .site-footer:not(.contact-page-footer) > .site-footer-inner > .contact-panel input,
  .site-footer:not(.contact-page-footer) > .site-footer-inner > .contact-panel select,
  .site-footer:not(.contact-page-footer) > .site-footer-inner > .contact-panel textarea,
  .site-footer:not(.contact-page-footer) > .site-footer-inner > .contact-panel .contact-custom-select-trigger{
    min-height:40px !important;
    padding:9px 10px !important;
    font-size:11px !important;
    line-height:1.35 !important;
  }

  .site-footer:not(.contact-page-footer) > .site-footer-inner > .contact-panel textarea{
    min-height:78px !important;
    max-height:none !important;
  }

  /* SEND REQUEST gets its own clear row. */
  .site-footer:not(.contact-page-footer) > .site-footer-inner > .contact-panel .contact-form-action{
    margin-top:14px !important;
    gap:10px !important;
  }

  .site-footer:not(.contact-page-footer) > .site-footer-inner > .contact-panel .contact-submit-btn{
    min-height:46px !important;
    height:auto !important;
    padding:11px 14px !important;
  }

  /* Critical fix:
     credits are no longer absolute, so they cannot sit on top of SEND REQUEST. */
  .site-footer:not(.contact-page-footer) > .site-footer-inner > .contact-panel > .footer-bottom{
    position:relative !important;
    inset:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:space-between !important;
    gap:7px 12px !important;
    width:100% !important;
    margin:16px 0 0 !important;
    padding:12px 0 2px !important;
    border-top:1px solid rgba(140,255,193,.12) !important;
    font-size:6.5px !important;
    line-height:1.35 !important;
    letter-spacing:.65px !important;
  }

  .site-footer:not(.contact-page-footer) > .site-footer-inner > .contact-panel > .footer-bottom .footer-status{
    margin-left:auto !important;
  }
}


/* =========================================================
   FOOTER ENGRAVED BRAND MARK
   Replaces the decorative brain with logo.webp only.
========================================================= */
.footer-logo-stage{
  right:clamp(18px,4vw,76px) !important;
  top:6% !important;
  width:min(34vw,500px) !important;
  opacity:1 !important;
}

.footer-engraved-logo{
  display:block;
  width:100%;
  height:auto;
  opacity:.095;
  filter:grayscale(1) brightness(1.2) contrast(.9);
  mix-blend-mode:screen;
  transform:none;
  animation:none;
  pointer-events:none;
  user-select:none;
}

@media(max-width:700px){
  .footer-logo-stage{
    right:-3vw !important;
    top:8% !important;
    width:min(56vw,300px) !important;
  }

  .footer-engraved-logo{
    opacity:.075;
  }
}


/* =========================================================
   MOBILE — HIDE INTERNAL SCROLLBARS
   Keep touch scrolling, remove visible nested scrollbar UI.
========================================================= */
@media(max-width:768px){
  #projectsUniverse,
  .projects-inner,
  .selected-work-experience,
  .selected-work-phone-sequence,
  .case-study-section,
  .case-study-inner,
  .site-footer,
  .site-footer-inner,
  .contact-panel,
  .contact-page,
  .contact-page-content{
    scrollbar-width:none !important;
    -ms-overflow-style:none !important;
  }

  #projectsUniverse::-webkit-scrollbar,
  .projects-inner::-webkit-scrollbar,
  .selected-work-experience::-webkit-scrollbar,
  .selected-work-phone-sequence::-webkit-scrollbar,
  .case-study-section::-webkit-scrollbar,
  .case-study-inner::-webkit-scrollbar,
  .site-footer::-webkit-scrollbar,
  .site-footer-inner::-webkit-scrollbar,
  .contact-panel::-webkit-scrollbar,
  .contact-page::-webkit-scrollbar,
  .contact-page-content::-webkit-scrollbar{
    width:0 !important;
    height:0 !important;
    display:none !important;
  }
}


/* =========================================================
   HERSHOP MOBILE — FIT CASE-STUDY CARDS TO PHONE WIDTH
   Only affects the HERSHOP stacked screenshot cards.
========================================================= */
@media(max-width:700px){
  #caseHershop .hs-stack-section{
    width:100% !important;
    max-width:100% !important;
    overflow:visible !important;
  }

  #caseHershop .hs-case-stack{
    width:100% !important;
    max-width:100% !important;
    padding-inline:0 !important;
    justify-items:center !important;
  }

  #caseHershop .hs-case-card{
    width:min(calc(100vw - 56px),360px) !important;
    max-width:360px !important;
    margin-inline:auto !important;
    padding:14px !important;
    box-sizing:border-box !important;
  }

  #caseHershop .hs-case-card img{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    object-fit:contain !important;
  }

  #caseHershop .hs-case-card-portrait{
    width:min(calc(100vw - 72px),320px) !important;
    max-width:320px !important;
  }

  #caseHershop .hs-case-card-portrait img{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    max-height:none !important;
  }
}


/* ==========================================================
   LOADER V2 — INTO MY MIND
   Cinematic loader using logo.webp.
   The green eye is a CSS overlay positioned over the existing
   green iris, so the source image remains unchanged.
   ========================================================== */
#loadingScreen{
  --loader-green:#35F28B;
  --loader-green-soft:#8CFFC1;
  --loader-ink:#020705;
  --loader-line:rgba(140,255,193,.12);
  --loader-progress:0%;

  position:fixed!important;
  inset:0!important;
  z-index:10000!important;
  display:none;
  align-items:stretch!important;
  justify-content:flex-start!important;
  overflow:hidden!important;
  isolation:isolate;
  text-align:left!important;
  background:
    radial-gradient(circle at 77% 48%,rgba(20,122,69,.22),transparent 32%),
    radial-gradient(circle at 18% 76%,rgba(53,242,139,.06),transparent 26%),
    linear-gradient(112deg,#010403 0%,#041009 52%,#020705 100%)!important;
  color:#F2FFF7;
  opacity:1;
  transition:opacity .38s ease,filter .38s ease;
}

#loadingScreen.is-complete{
  opacity:0;
  filter:blur(4px);
  pointer-events:none;
}

.loader-grid{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.42;
  background-image:
    linear-gradient(rgba(140,255,193,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(140,255,193,.035) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(90deg,#000 0 60%,transparent 92%);
  -webkit-mask-image:linear-gradient(90deg,#000 0 60%,transparent 92%);
}

.loader-noise{
  position:absolute;
  inset:-20%;
  z-index:5;
  pointer-events:none;
  opacity:.035;
  background-image:
    repeating-radial-gradient(circle at 0 0,rgba(255,255,255,.75) 0 1px,transparent 1px 3px);
  background-size:7px 7px;
  mix-blend-mode:soft-light;
  animation:loaderNoiseShift .32s steps(2,end) infinite;
}

.loader-visual{
  position:absolute;
  z-index:1;
  top:50%;
  right:-3vw;
  width:min(78vw,1380px);
  aspect-ratio:3/2;
  transform:translateY(-50%);
  pointer-events:none;
}

.loader-portrait{
  position:absolute;
  inset:0;
  overflow:visible;
  filter:saturate(.92) contrast(1.03);
  animation:loaderPortraitBreathe 4.8s ease-in-out infinite alternate;
}

.loader-portrait::before{
  content:"";
  position:absolute;
  z-index:2;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,#020705 0%,rgba(2,7,5,.93) 16%,rgba(2,7,5,.42) 42%,transparent 67%),
    linear-gradient(0deg,#020705 0%,transparent 21%),
    radial-gradient(circle at 70% 61%,transparent 0 16%,rgba(1,5,3,.12) 36%,rgba(1,5,3,.52) 100%);
}

.loader-portrait::after{
  content:"";
  position:absolute;
  z-index:3;
  left:68.9%;
  top:65.9%;
  width:8.2%;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle,
    rgba(140,255,193,.12) 0 12%,
    rgba(53,242,139,.12) 20%,
    rgba(53,242,139,.025) 44%,
    transparent 70%);
  filter:blur(3px);
  animation:loaderEyeAtmosphere 1.3s ease-in-out infinite;
}

.loader-portrait img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  user-select:none;
  -webkit-user-drag:none;
}

.loader-eye-halo,






.loading-content{
  position:relative;
  z-index:10;
  align-self:center;
  width:min(500px,42vw)!important;
  margin-left:clamp(36px,6vw,110px);
  padding:clamp(26px,3vw,42px) 0;
  color:#F2FFF7!important;
  text-align:left!important;
}

.loading-content span{
  display:initial;
  margin:0;
  letter-spacing:initial;
}

.loader-kicker{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:clamp(22px,3vh,38px);
  color:rgba(200,225,210,.7);
  font:700 9px/1.2 Consolas,"SFMono-Regular",monospace;
  letter-spacing:3.2px;
}

.loader-live-dot{
  width:6px;
  height:6px;
  flex:0 0 auto;
  border-radius:50%;
  background:var(--loader-green);
  box-shadow:0 0 0 5px rgba(53,242,139,.07),0 0 16px rgba(53,242,139,.75);
  animation:loaderSignal 1.3s ease-in-out infinite;
}

#loadingLabel{
  color:rgba(200,225,210,.72)!important;
  font:700 9px/1.2 Consolas,"SFMono-Regular",monospace!important;
  letter-spacing:3.2px!important;
  margin:0!important;
}

.loader-title{
  margin-bottom:clamp(30px,4vh,52px);
}

.loader-title small{
  display:block;
  margin-bottom:10px;
  color:rgba(140,255,193,.48);
  font:700 8px/1.2 Consolas,"SFMono-Regular",monospace;
  letter-spacing:2.6px;
}

.loader-title strong{
  display:block;
  max-width:470px;
  color:#F2FFF7;
  font:900 clamp(38px,4.1vw,72px)/.88 Inter,Arial,sans-serif;
  letter-spacing:-.055em;
  text-wrap:balance;
}

.loader-title strong em{
  color:var(--loader-green);
  font-style:normal;
  text-shadow:0 0 32px rgba(53,242,139,.12);
}

.loader-progress-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:13px;
}

#loadingPercent{
  margin:0!important;
  color:#F2FFF7!important;
  font:800 clamp(42px,5vw,76px)/.82 Inter,Arial,sans-serif!important;
  letter-spacing:-.065em;
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 32px rgba(53,242,139,.08);
}

.loader-progress-meta{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:5px;
  padding-bottom:2px;
  font:700 7px/1.2 Consolas,"SFMono-Regular",monospace;
  letter-spacing:1.9px;
  text-align:right;
}

.loader-progress-meta span{
  color:rgba(200,225,210,.42);
}

.loader-progress-meta b{
  color:var(--loader-green-soft);
  font-weight:700;
}

.loading-track{
  position:relative!important;
  width:100%!important;
  height:5px!important;
  margin:0!important;
  overflow:visible!important;
  border:1px solid rgba(140,255,193,.1);
  background:rgba(140,255,193,.055)!important;
  box-shadow:inset 0 0 12px rgba(0,0,0,.55);
}

.loading-track::before{
  content:"";
  position:absolute;
  inset:-7px 0;
  pointer-events:none;
  background:repeating-linear-gradient(90deg,
    transparent 0 30px,
    rgba(140,255,193,.055) 30px 31px);
}

#loadingBar{
  position:relative;
  z-index:2;
  width:0;
  height:100%!important;
  background:linear-gradient(90deg,#147A45 0%,#35F28B 62%,#B6FFD2 100%)!important;
  box-shadow:
    0 0 8px rgba(53,242,139,.55),
    0 0 24px rgba(53,242,139,.2)!important;
  transition:width .16s linear!important;
}

#loadingBar::after{
  content:"";
  position:absolute;
  right:-2px;
  top:50%;
  width:5px;
  height:13px;
  transform:translateY(-50%);
  background:#D5FFE4;
  box-shadow:0 0 12px #35F28B,0 0 28px rgba(53,242,139,.7);
}

.loader-track-glint{
  position:absolute;
  z-index:3;
  inset:-2px auto -2px 0;
  width:74px;
  pointer-events:none;
  opacity:.55;
  background:linear-gradient(90deg,transparent,rgba(220,255,232,.45),transparent);
  filter:blur(1px);
  animation:loaderTrackScan 1.65s linear infinite;
}

.loader-status-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-top:14px;
}

#loadingStatus{
  min-height:18px!important;
  margin:0!important;
  max-width:330px;
  color:rgba(200,225,210,.58)!important;
  font:600 9px/1.55 Consolas,"SFMono-Regular",monospace!important;
  letter-spacing:1px!important;
}

.loader-secure{
  flex:0 0 auto;
  color:rgba(53,242,139,.5);
  font:700 7px/1.5 Consolas,"SFMono-Regular",monospace;
  letter-spacing:1.5px;
  white-space:nowrap;
}

#loadingRetry{
  margin-top:20px!important;
  padding:11px 15px!important;
  border:1px solid rgba(53,242,139,.55)!important;
  background:rgba(53,242,139,.08)!important;
  color:var(--loader-green-soft)!important;
  clip-path:none!important;
  font:800 9px/1 Consolas,"SFMono-Regular",monospace!important;
  letter-spacing:2px!important;
  cursor:pointer;
}

.loader-corner{
  position:absolute;
  z-index:11;
  color:rgba(140,255,193,.24);
  font:700 7px/1 Consolas,"SFMono-Regular",monospace;
  letter-spacing:2.2px;
  pointer-events:none;
}

.loader-corner-a{left:28px;top:25px}
.loader-corner-b{right:28px;bottom:25px;text-align:right}




@keyframes loaderSignal{
  0%,100%{opacity:.35;transform:scale(.8)}
  50%{opacity:1;transform:scale(1.12)}
}
@keyframes loaderPortraitBreathe{
  from{transform:translate3d(0,2px,0) scale(1)}
  to{transform:translate3d(-4px,-4px,0) scale(1.012)}
}
@keyframes loaderTrackScan{
  from{left:-78px}
  to{left:calc(100% + 78px)}
}
@keyframes loaderNoiseShift{
  0%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(1.5%,-1%,0)}
  100%{transform:translate3d(-1%,1.5%,0)}
}

@media(max-width:900px){
  #loadingScreen{
    justify-content:flex-end!important;
    background:
      radial-gradient(circle at 50% 31%,rgba(20,122,69,.18),transparent 30%),
      linear-gradient(180deg,#020705 0%,#041109 58%,#020705 100%)!important;
  }

  .loader-grid{
    background-size:44px 44px;
    mask-image:linear-gradient(#000 0 60%,transparent 94%);
    -webkit-mask-image:linear-gradient(#000 0 60%,transparent 94%);
  }

  .loader-visual{
    top:32%;
    right:50%;
    width:min(142vw,860px);
    transform:translate(50%,-50%);
  }

  .loader-portrait::before{
    background:
      linear-gradient(0deg,#020705 0%,rgba(2,7,5,.8) 17%,transparent 38%),
      radial-gradient(circle at 50% 58%,transparent 0 28%,rgba(1,5,3,.08) 50%,rgba(1,5,3,.52) 100%);
  }

  .loading-content{
    width:calc(100% - 40px)!important;
    max-width:520px!important;
    margin:0 auto max(34px,env(safe-area-inset-bottom))!important;
    padding:0!important;
  }

  .loader-kicker{margin-bottom:13px}
  .loader-title{margin-bottom:20px}
  .loader-title small{font-size:7px;margin-bottom:7px}
  .loader-title strong{
    max-width:360px;
    font-size:clamp(35px,11vw,54px);
    line-height:.9;
  }
  .loader-progress-head{margin-bottom:10px}
  #loadingPercent{font-size:clamp(42px,13vw,64px)!important}
  .loader-status-row{margin-top:11px}
  #loadingStatus{font-size:8px!important;max-width:230px}
  .loader-secure{font-size:6px}
  .loader-corner-a{left:18px;top:18px}
  .loader-corner-b{right:18px;bottom:auto;top:18px}
}

@media(max-width:520px){
  .loader-visual{
    top:30%;
    width:158vw;
  }
  .loading-content{
    width:calc(100% - 30px)!important;
    margin-bottom:max(24px,env(safe-area-inset-bottom))!important;
  }
  .loader-title strong{font-size:clamp(32px,10.5vw,46px)}
  .loader-progress-meta{font-size:6px}
  .loader-secure{display:none}
}

/* ==========================================================
   LOADER EYE — ELECTRICAL OFF / ON LAYERS
   Same logo, same eye coordinates; no loader layout changes.
   ========================================================== */


.loader-portrait::after{
  content:""!important;
  position:absolute!important;
  z-index:6!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  pointer-events:none!important;
  background:url("logo.webp") center top / contain no-repeat!important;
  clip-path:circle(2.55% at 68.9% 65.9%)!important;
  -webkit-clip-path:circle(2.55% at 68.9% 65.9%)!important;
  filter:
    saturate(1.35)
    contrast(1.12)
    brightness(1.18)
    drop-shadow(0 0 5px rgba(140,255,193,.95))
    drop-shadow(0 0 13px rgba(53,242,139,.9))
    drop-shadow(0 0 28px rgba(53,242,139,.62))!important;
  opacity:0;
  animation:loaderEyeElectricalSwitch 1.12s steps(1,end) infinite!important;
}

.loader-eye-halo,




@media(prefers-reduced-motion:reduce){
  .loader-noise,
  .loader-portrait,
  .loader-eye-halo,
  .loader-eye-core,
  .loader-portrait::after,
  .loader-live-dot,
  .loader-track-glint{
    animation:none!important;
  }
  
  
}



/* ==========================================================
   LOADER V3 — centered background composition
   Image is part of the background, not a right-side panel.
   All progress UI sits below the visual.
   Eye alternates between B/W and green in a fast waiting pulse.
   ========================================================== */

#loadingScreen{
  display:none;
  align-items:center!important;
  justify-content:flex-end!important;
  text-align:center!important;
  background:
    radial-gradient(circle at 50% 34%,rgba(53,242,139,.11),transparent 32%),
    linear-gradient(180deg,#020503 0%,#030906 52%,#020503 100%)!important;
}

.loader-grid{
  opacity:.24!important;
  mask-image:radial-gradient(circle at 50% 42%,#000 0 42%,transparent 78%)!important;
  -webkit-mask-image:radial-gradient(circle at 50% 42%,#000 0 42%,transparent 78%)!important;
}

.loader-visual{
  top:0!important;
  left:0!important;
  right:0!important;
  bottom:auto!important;
  width:100vw!important;
  height:72vh!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  transform:none!important;
  overflow:hidden!important;
}

.loader-portrait{
  position:absolute!important;
  inset:0!important;
  animation:none!important;
}

.loader-portrait::before{
  z-index:3!important;
  background:
    linear-gradient(180deg,
      rgba(2,5,3,.24) 0%,
      rgba(2,5,3,.02) 18%,
      rgba(2,5,3,.02) 56%,
      rgba(2,5,3,.66) 78%,
      #020503 100%),
    linear-gradient(90deg,
      #020503 0%,
      rgba(2,5,3,.3) 12%,
      transparent 28%,
      transparent 72%,
      rgba(2,5,3,.3) 88%,
      #020503 100%)!important;
}

.loader-portrait::after{
  display:none!important;
}

.loader-main-image,


.loader-main-image{
  z-index:1;
  filter:saturate(.9) contrast(1.04) brightness(.88);
}



.loader-eye-halo,






/* All textual/progress UI below the image */
.loading-content{
  position:relative!important;
  z-index:20!important;
  align-self:auto!important;
  width:min(760px,calc(100vw - 48px))!important;
  margin:0 auto clamp(28px,4vh,52px)!important;
  padding:0!important;
  text-align:center!important;
}

.loader-kicker{
  justify-content:center!important;
  margin-bottom:10px!important;
}

.loader-title{
  display:none!important;
}

.loader-progress-head{
  justify-content:center!important;
  margin:0 0 12px!important;
}

#loadingPercent{
  font-size:clamp(44px,5.2vw,76px)!important;
  line-height:.9!important;
  text-align:center!important;
}

.loader-progress-meta{
  display:none!important;
}

.loading-track{
  width:min(620px,100%)!important;
  margin:0 auto!important;
  height:4px!important;
}

.loader-status-row{
  width:min(620px,100%)!important;
  margin:11px auto 0!important;
  justify-content:center!important;
}

#loadingStatus{
  max-width:none!important;
  text-align:center!important;
}

.loader-secure{
  display:none!important;
}

.loader-corner{
  opacity:.5;
}







/* Desktop positioning: use source image as a centered background visual */
@media(min-width:901px){
  .loader-visual{
    height:76vh!important;
  }

  .loader-main-image,
  

  .loading-content{
    margin-bottom:clamp(26px,3.4vh,44px)!important;
  }
}

/* Mobile/tablet: keep the visual centered and preserve the progress below it */
@media(max-width:900px){
  #loadingScreen{
    justify-content:flex-end!important;
  }

  .loader-visual{
    top:0!important;
    right:0!important;
    left:0!important;
    width:100vw!important;
    height:68vh!important;
    transform:none!important;
  }

  .loader-main-image,
  

  .loading-content{
    width:calc(100% - 32px)!important;
    margin:0 auto max(24px,env(safe-area-inset-bottom))!important;
  }

  .loader-kicker{
    margin-bottom:9px!important;
  }

  #loadingPercent{
    font-size:clamp(42px,14vw,66px)!important;
  }

  .loader-status-row{
    margin-top:9px!important;
  }
}

@media(max-width:520px){
  .loader-visual{
    height:66vh!important;
  }

  .loading-content{
    width:calc(100% - 26px)!important;
  }

  #loadingLabel{
    font-size:7px!important;
    letter-spacing:2.3px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  
}

/* Final eye-state override: must follow Loader V3. */

.loader-portrait::after{
  content:""!important;
  position:absolute!important;
  z-index:6!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  pointer-events:none!important;
  background:url("logo.webp") center top / contain no-repeat!important;
  clip-path:circle(2.55% at 68.9% 65.9%)!important;
  -webkit-clip-path:circle(2.55% at 68.9% 65.9%)!important;
  filter:saturate(1.35) contrast(1.12) brightness(1.18)
    drop-shadow(0 0 5px rgba(140,255,193,.95))
    drop-shadow(0 0 13px rgba(53,242,139,.9))
    drop-shadow(0 0 28px rgba(53,242,139,.62))!important;
  opacity:0;
  animation:loaderEyeElectricalSwitch 1.12s steps(1,end) infinite!important;
}
.loader-eye-halo,


/* ==========================================================
   LOADER V6 — CINEMATIC FUTURISTIC LOGO TRANSITION
   OFF image is the base.
   ON image fades in/out with cinematic glow, slight blur,
   contrast lift and a synchronized scan sweep.
   ========================================================== */

#loadingScreen{
  background:
    radial-gradient(circle at 50% 31%,rgba(53,242,139,.095),transparent 30%),
    radial-gradient(circle at 50% 62%,rgba(20,122,69,.055),transparent 36%),
    linear-gradient(180deg,#010402 0%,#030805 52%,#010402 100%)!important;
}

/* Keep the visual already composed as part of the background. */
#loadingScreen .loader-portrait{
  position:absolute!important;
  inset:0!important;
  overflow:hidden!important;
  isolation:isolate;
}

#loadingScreen .loader-logo-off,
#loadingScreen .loader-logo-on{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  display:block!important;
  object-fit:contain!important;
  object-position:center top!important;
  transform:translateZ(0);
  pointer-events:none!important;
  user-select:none!important;
  -webkit-user-drag:none!important;
  backface-visibility:hidden;
}

#loadingScreen .loader-logo-off{
  z-index:1!important;
  opacity:1!important;
  filter:brightness(.84) saturate(.74) contrast(1.04);
  animation:loaderOffAmbientV6 3.2s ease-in-out infinite;
}

#loadingScreen .loader-logo-on{
  z-index:2!important;
  opacity:0;
  filter:brightness(.78) saturate(.72) contrast(1.04) blur(1.4px);
  will-change:opacity,filter,transform;
  animation:loaderLogoCinematicV6 3.2s cubic-bezier(.45,0,.2,1) infinite;
}

/* Futuristic scan atmosphere synced with the power-up phase. */
#loadingScreen .loader-portrait::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:4!important;
  pointer-events:none!important;
  background:
    linear-gradient(
      180deg,
      transparent 0%,
      transparent 45%,
      rgba(140,255,193,.02) 48%,
      rgba(140,255,193,.14) 50%,
      rgba(53,242,139,.035) 52%,
      transparent 56%,
      transparent 100%
    )!important;
  mix-blend-mode:screen;
  opacity:0;
  transform:translateY(-55%);
  animation:loaderScanV6 3.2s cubic-bezier(.45,0,.2,1) infinite;
}

/* Soft bloom, not a flash. */
#loadingScreen .loader-portrait::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  z-index:3!important;
  pointer-events:none!important;
  background:
    radial-gradient(circle at 51.5% 53%,rgba(53,242,139,.13),transparent 20%),
    radial-gradient(circle at 50% 34%,rgba(53,242,139,.07),transparent 32%)!important;
  opacity:0;
  filter:blur(18px);
  animation:loaderBloomV6 3.2s ease-in-out infinite;
}

/* Cycle:
   0–24%   OFF
   25–42%  cinematic power-up
   43–63%  ON / hold
   64–82%  cinematic power-down
   83–100% OFF / rest
*/
@keyframes loaderLogoCinematicV6{
  0%,24%{
    opacity:0;
    filter:brightness(.78) saturate(.68) contrast(1.03) blur(1.4px);
    transform:scale(1.002);
  }
  33%{
    opacity:.48;
    filter:brightness(1.02) saturate(1.03) contrast(1.06) blur(.65px);
    transform:scale(1.004);
  }
  43%,63%{
    opacity:1;
    filter:brightness(1.09) saturate(1.10) contrast(1.07) blur(0);
    transform:scale(1.006);
  }
  72%{
    opacity:.52;
    filter:brightness(.98) saturate(.96) contrast(1.05) blur(.45px);
    transform:scale(1.004);
  }
  83%,100%{
    opacity:0;
    filter:brightness(.78) saturate(.68) contrast(1.03) blur(1.4px);
    transform:scale(1.002);
  }
}

@keyframes loaderOffAmbientV6{
  0%,24%,83%,100%{
    filter:brightness(.83) saturate(.70) contrast(1.04);
  }
  43%,63%{
    filter:brightness(.70) saturate(.58) contrast(1.04);
  }
}

@keyframes loaderBloomV6{
  0%,24%,83%,100%{opacity:0}
  37%{opacity:.42}
  43%,63%{opacity:.68}
  74%{opacity:.28}
}

@keyframes loaderScanV6{
  0%,22%{
    opacity:0;
    transform:translateY(-58%);
  }
  28%{
    opacity:.22;
  }
  43%{
    opacity:.62;
    transform:translateY(12%);
  }
  60%{
    opacity:.18;
    transform:translateY(72%);
  }
  66%,100%{
    opacity:0;
    transform:translateY(82%);
  }
}

/* Small electronic micro-flicker while ON, but never a hard flash. */
#loadingScreen .loader-logo-on{
  --cinematic-flicker:1;
}

@media(max-width:900px){
  #loadingScreen .loader-logo-off,
  #loadingScreen .loader-logo-on{
    object-position:center top!important;
  }
}

@media(prefers-reduced-motion:reduce){
  #loadingScreen .loader-logo-off{
    animation:none!important;
  }
  #loadingScreen .loader-logo-on{
    animation:loaderLogoCinematicV6 5.2s ease-in-out infinite!important;
  }
  #loadingScreen .loader-portrait::before,
  #loadingScreen .loader-portrait::after{
    animation:none!important;
  }
}


/* ==========================================================
   LOADER V7 — EMBEDDED / ENGRAVED BACKGROUND LOOK
   The two logo states are intentionally subtle, faded into
   the background instead of reading as cut-out image panels.
   ========================================================== */

#loadingScreen .loader-visual{
  opacity:0;
  transition:opacity .65s cubic-bezier(.2,.7,.2,1);
}

#loadingScreen.visuals-ready .loader-visual{
  opacity:1;
}

#loadingScreen .loader-logo-off,
#loadingScreen .loader-logo-on{
  /* Fade the hard rectangular edges into the loader background. */
  -webkit-mask-image:
    radial-gradient(
      ellipse 64% 80% at 50% 47%,
      #000 0%,
      #000 52%,
      rgba(0,0,0,.88) 65%,
      rgba(0,0,0,.42) 79%,
      transparent 96%
    )!important;
  mask-image:
    radial-gradient(
      ellipse 64% 80% at 50% 47%,
      #000 0%,
      #000 52%,
      rgba(0,0,0,.88) 65%,
      rgba(0,0,0,.42) 79%,
      transparent 96%
    )!important;

  mix-blend-mode:screen;
}

/* OFF image is almost engraved into the background. */
#loadingScreen .loader-logo-off{
  opacity:.24!important;
  filter:brightness(.58) saturate(.48) contrast(1.12)!important;
  animation:loaderOffEmbeddedV7 3.8s ease-in-out infinite!important;
}

/* ON state never becomes a full opaque image.
   It only "powers up" the existing engraved background. */
#loadingScreen .loader-logo-on{
  opacity:0;
  filter:brightness(.62) saturate(.62) contrast(1.10) blur(1px)!important;
  animation:loaderLogoEmbeddedV7 3.8s cubic-bezier(.45,0,.2,1) infinite!important;
}

/* Much softer atmosphere so the image remains part of the background. */
#loadingScreen .loader-portrait::after{
  background:
    radial-gradient(circle at 51.5% 53%,rgba(53,242,139,.075),transparent 19%),
    radial-gradient(circle at 50% 34%,rgba(53,242,139,.035),transparent 31%)!important;
  filter:blur(24px)!important;
  animation:loaderBloomEmbeddedV7 3.8s ease-in-out infinite!important;
}

#loadingScreen .loader-portrait::before{
  opacity:0;
  animation:loaderScanEmbeddedV7 3.8s cubic-bezier(.45,0,.2,1) infinite!important;
}

/* Cinematic power transition: no hard flash.
   Both states remain low-opacity and background-like. */
@keyframes loaderLogoEmbeddedV7{
  0%,23%{
    opacity:0;
    filter:brightness(.60) saturate(.58) contrast(1.08) blur(1.1px);
    transform:scale(1.001);
  }
  34%{
    opacity:.16;
    filter:brightness(.69) saturate(.76) contrast(1.10) blur(.6px);
    transform:scale(1.003);
  }
  45%,62%{
    opacity:.40;
    filter:brightness(.82) saturate(.95) contrast(1.12) blur(0);
    transform:scale(1.005);
  }
  73%{
    opacity:.17;
    filter:brightness(.68) saturate(.72) contrast(1.09) blur(.55px);
    transform:scale(1.003);
  }
  84%,100%{
    opacity:0;
    filter:brightness(.60) saturate(.58) contrast(1.08) blur(1.1px);
    transform:scale(1.001);
  }
}

@keyframes loaderOffEmbeddedV7{
  0%,23%,84%,100%{
    opacity:.24;
    filter:brightness(.58) saturate(.48) contrast(1.12);
  }
  45%,62%{
    opacity:.15;
    filter:brightness(.50) saturate(.38) contrast(1.10);
  }
}

@keyframes loaderBloomEmbeddedV7{
  0%,24%,84%,100%{opacity:0}
  39%{opacity:.18}
  47%,62%{opacity:.32}
  74%{opacity:.12}
}

@keyframes loaderScanEmbeddedV7{
  0%,25%{
    opacity:0;
    transform:translateY(-60%);
  }
  34%{
    opacity:.12;
  }
  49%{
    opacity:.28;
    transform:translateY(10%);
  }
  63%{
    opacity:.08;
    transform:translateY(68%);
  }
  70%,100%{
    opacity:0;
    transform:translateY(80%);
  }
}

/* Requested loader copy. */
#loadingScreen .loader-wait-copy{
  margin:0 0 12px!important;
  color:rgba(200,225,210,.62);
  font:600 11px/1.4 Consolas,"SFMono-Regular",monospace;
  letter-spacing:2px;
  text-align:center;
  text-transform:none;
}

/* Loader is already present on first paint. Until logo images decode,
   the background + progress UI remain visible instead of a blank screen. */
#loadingScreen:not(.visuals-ready) .loader-wait-copy::after{
  content:"  // VISUAL CORE";
  color:rgba(53,242,139,.38);
  font-size:.78em;
}

@media(max-width:520px){
  #loadingScreen .loader-logo-off{
    opacity:.20!important;
  }

  @keyframes loaderLogoEmbeddedV7{
    0%,23%,84%,100%{opacity:0}
    34%{opacity:.13}
    45%,62%{opacity:.34}
    73%{opacity:.14}
  }

  #loadingScreen .loader-wait-copy{
    font-size:9px;
    letter-spacing:1.25px;
    margin-bottom:10px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  #loadingScreen .loader-logo-off{
    animation:none!important;
    opacity:.22!important;
  }

  #loadingScreen .loader-logo-on{
    animation:loaderLogoEmbeddedV7 6s ease-in-out infinite!important;
  }
}


/* ==========================================================
   LOADER V8 — FAST CINEMATIC PULSE FOR SHORT LOAD TIMES
   Designed so a ~2s loader still shows 3–4 visible power pulses.
   ========================================================== */

/* Reveal visual quickly once both images are decoded. */
#loadingScreen .loader-visual{
  transition:opacity .18s ease-out!important;
}

/* Do NOT let the animation run invisibly before visuals are ready.
   This restarts the pulse from frame 0 exactly when the images appear. */
#loadingScreen:not(.visuals-ready) .loader-logo-off,
#loadingScreen:not(.visuals-ready) .loader-logo-on,
#loadingScreen:not(.visuals-ready) .loader-portrait::before,
#loadingScreen:not(.visuals-ready) .loader-portrait::after{
  animation:none!important;
}

/* Base OFF image stays subtly engraved. */
#loadingScreen.visuals-ready .loader-logo-off{
  animation:loaderOffEmbeddedV8 560ms ease-in-out infinite!important;
}

/* ON image powers up/down smoothly, but quickly enough to be seen. */
#loadingScreen.visuals-ready .loader-logo-on{
  animation:loaderLogoEmbeddedV8 560ms cubic-bezier(.22,.7,.2,1) infinite!important;
}

/* Soft futuristic scan + bloom synced with each pulse. */
#loadingScreen.visuals-ready .loader-portrait::before{
  animation:loaderScanEmbeddedV8 560ms cubic-bezier(.22,.7,.2,1) infinite!important;
}

#loadingScreen.visuals-ready .loader-portrait::after{
  animation:loaderBloomEmbeddedV8 560ms ease-in-out infinite!important;
}

/* 560ms loop:
   ~3.5 cycles in 2 seconds.
   Smooth power-up / short hold / smooth power-down.
*/
@keyframes loaderLogoEmbeddedV8{
  0%,12%{
    opacity:0;
    filter:brightness(.60) saturate(.58) contrast(1.08) blur(1px);
    transform:scale(1.001);
  }
  28%{
    opacity:.22;
    filter:brightness(.72) saturate(.82) contrast(1.10) blur(.45px);
    transform:scale(1.003);
  }
  42%,58%{
    opacity:.46;
    filter:brightness(.88) saturate(1.04) contrast(1.12) blur(0);
    transform:scale(1.005);
  }
  74%{
    opacity:.18;
    filter:brightness(.70) saturate(.76) contrast(1.09) blur(.4px);
    transform:scale(1.003);
  }
  90%,100%{
    opacity:0;
    filter:brightness(.60) saturate(.58) contrast(1.08) blur(1px);
    transform:scale(1.001);
  }
}

@keyframes loaderOffEmbeddedV8{
  0%,12%,90%,100%{
    opacity:.24;
    filter:brightness(.58) saturate(.48) contrast(1.12);
  }
  42%,58%{
    opacity:.14;
    filter:brightness(.48) saturate(.34) contrast(1.10);
  }
}

@keyframes loaderBloomEmbeddedV8{
  0%,12%,90%,100%{opacity:0}
  30%{opacity:.14}
  42%,58%{opacity:.34}
  76%{opacity:.10}
}

@keyframes loaderScanEmbeddedV8{
  0%,10%{
    opacity:0;
    transform:translateY(-58%);
  }
  26%{
    opacity:.10;
  }
  48%{
    opacity:.26;
    transform:translateY(8%);
  }
  68%{
    opacity:.08;
    transform:translateY(66%);
  }
  82%,100%{
    opacity:0;
    transform:translateY(80%);
  }
}

@media(prefers-reduced-motion:reduce){
  #loadingScreen.visuals-ready .loader-logo-on{
    animation:loaderLogoEmbeddedV8 1100ms ease-in-out infinite!important;
  }
  #loadingScreen.visuals-ready .loader-logo-off{
    animation:loaderOffEmbeddedV8 1100ms ease-in-out infinite!important;
  }
  #loadingScreen.visuals-ready .loader-portrait::before{
    animation:none!important;
  }
  #loadingScreen.visuals-ready .loader-portrait::after{
    animation:loaderBloomEmbeddedV8 1100ms ease-in-out infinite!important;
  }
}


/* ==========================================================
   LOADER V9 — MOBILE COMPOSITION REBUILD
   Mobile becomes ONE connected composition:
   full-screen cinematic image background + attached progress HUD.
   Desktop remains unchanged.
   ========================================================== */

@media(max-width:700px){

  #loadingScreen{
    display:flex;
    align-items:stretch!important;
    justify-content:flex-end!important;
    min-height:100svh!important;
    background:
      radial-gradient(circle at 50% 28%,rgba(53,242,139,.10),transparent 34%),
      linear-gradient(180deg,#020604 0%,#031009 48%,#020604 100%)!important;
  }

  /* Make the artwork a real full-screen background instead of a small image block. */
  #loadingScreen .loader-visual{
    position:absolute!important;
    inset:0!important;
    width:100vw!important;
    height:100svh!important;
    max-height:none!important;
    opacity:0;
    overflow:hidden!important;
    transition:opacity .16s ease-out!important;
  }

  #loadingScreen.visuals-ready .loader-visual{
    opacity:1;
  }

  #loadingScreen .loader-portrait{
    position:absolute!important;
    inset:0!important;
    overflow:hidden!important;
  }

  #loadingScreen .loader-logo-off,
  #loadingScreen .loader-logo-on{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:50% 31%!important;

    /* Hide the original rectangular image edge completely. */
    -webkit-mask-image:
      linear-gradient(
        180deg,
        rgba(0,0,0,.88) 0%,
        #000 17%,
        #000 58%,
        rgba(0,0,0,.78) 70%,
        rgba(0,0,0,.28) 83%,
        transparent 96%
      )!important;
    mask-image:
      linear-gradient(
        180deg,
        rgba(0,0,0,.88) 0%,
        #000 17%,
        #000 58%,
        rgba(0,0,0,.78) 70%,
        rgba(0,0,0,.28) 83%,
        transparent 96%
      )!important;
  }

  #loadingScreen .loader-logo-off{
    opacity:.19!important;
    filter:brightness(.53) saturate(.42) contrast(1.12)!important;
  }

  /* Keep the ON image subtle; it powers up the background, not replaces it. */
  @keyframes loaderLogoEmbeddedV8{
    0%,12%{
      opacity:0;
      filter:brightness(.58) saturate(.55) contrast(1.08) blur(1px);
      transform:scale(1.002);
    }
    28%{
      opacity:.17;
      filter:brightness(.70) saturate(.80) contrast(1.10) blur(.4px);
      transform:scale(1.004);
    }
    42%,58%{
      opacity:.34;
      filter:brightness(.84) saturate(1.00) contrast(1.12) blur(0);
      transform:scale(1.008);
    }
    74%{
      opacity:.14;
      filter:brightness(.68) saturate(.74) contrast(1.09) blur(.35px);
      transform:scale(1.004);
    }
    90%,100%{
      opacity:0;
      filter:brightness(.58) saturate(.55) contrast(1.08) blur(1px);
      transform:scale(1.002);
    }
  }

  /* Dark cinematic bridge between artwork and HUD. */
  #loadingScreen::after{
    content:"";
    position:absolute;
    inset:auto 0 0;
    height:45svh;
    z-index:8;
    pointer-events:none;
    background:
      linear-gradient(
        180deg,
        transparent 0%,
        rgba(2,6,4,.28) 16%,
        rgba(2,6,4,.78) 48%,
        rgba(2,6,4,.96) 78%,
        #020604 100%
      );
  }

  /* Attach all loader information to the visual instead of leaving a dead gap. */
  #loadingScreen .loading-content{
    position:relative!important;
    z-index:20!important;
    align-self:flex-end!important;
    width:calc(100% - 34px)!important;
    max-width:430px!important;
    margin:0 auto max(28px,env(safe-area-inset-bottom))!important;
    padding:18px 16px 16px!important;
    text-align:center!important;

    background:
      linear-gradient(180deg,rgba(5,17,11,.18),rgba(5,17,11,.50));
    border-top:1px solid rgba(140,255,193,.08);
    box-shadow:
      0 -24px 60px rgba(0,0,0,.18),
      inset 0 1px 0 rgba(255,255,255,.015);
    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);
  }

  #loadingScreen .loader-kicker{
    justify-content:center!important;
    margin:0 0 6px!important;
    opacity:.72;
  }

  #loadingScreen #loadingLabel{
    font-size:6.5px!important;
    letter-spacing:2.5px!important;
  }

  #loadingScreen .loader-live-dot{
    width:4px!important;
    height:4px!important;
  }

  #loadingScreen .loader-wait-copy{
    margin:0 0 10px!important;
    color:rgba(220,240,228,.66)!important;
    font-size:9px!important;
    line-height:1.35!important;
    letter-spacing:1.15px!important;
  }

  #loadingScreen .loader-progress-head{
    margin:0 0 9px!important;
  }

  #loadingScreen #loadingPercent{
    font-size:clamp(48px,15vw,64px)!important;
    line-height:.82!important;
    color:rgba(242,255,247,.94)!important;
    text-shadow:
      0 0 26px rgba(53,242,139,.09),
      0 8px 24px rgba(0,0,0,.38);
  }

  #loadingScreen .loading-track{
    width:100%!important;
    max-width:none!important;
    height:3px!important;
    margin:0!important;
    background:rgba(140,255,193,.055)!important;
    border-color:rgba(140,255,193,.08)!important;
  }

  #loadingScreen .loader-status-row{
    width:100%!important;
    margin:8px 0 0!important;
  }

  #loadingScreen #loadingStatus{
    width:100%;
    max-width:none!important;
    text-align:center!important;
    font-size:6.5px!important;
    line-height:1.3!important;
    letter-spacing:.55px!important;
    color:rgba(170,204,184,.48)!important;
  }

  /* Remove corner labels on phone; they make the small viewport feel fragmented. */
  #loadingScreen .loader-corner{
    display:none!important;
  }

  /* Keep the scan subtle on phone. */
  #loadingScreen.visuals-ready .loader-portrait::before{
    opacity:.55;
  }

  #loadingScreen.visuals-ready .loader-portrait::after{
    opacity:.55;
  }
}

@media(max-width:420px){
  #loadingScreen .loader-logo-off,
  #loadingScreen .loader-logo-on{
    object-position:50% 29%!important;
  }

  #loadingScreen .loading-content{
    width:calc(100% - 24px)!important;
    margin-bottom:max(18px,env(safe-area-inset-bottom))!important;
    padding:15px 12px 13px!important;
  }

  #loadingScreen #loadingPercent{
    font-size:56px!important;
  }
}


/* ==========================================================
   V10 — LOADER EXIT FIX
   Do NOT force display:flex with !important on mobile.
   JS must be able to set inline display:none when loading ends.
   ========================================================== */
@media(max-width:700px){
  #loadingScreen[style*="display: none"]{
    display:none!important;
  }
}