:root {
  --ink: #101010;
  --cream: #f2eee4;
  --paper: #f8f5ed;
  --blue: #2446bd;
  --cyan: #64cfcb;
  --orange: #ed7b2d;
  --red: #dc4d3f;
  --yellow: #e6bf3d;
  --max: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "Manrope", sans-serif; overflow-x: hidden; }
img { display: block; width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.section-shell { width: min(calc(100% - 48px), var(--max)); margin-inline: auto; }
.section-number { font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }

.cursor-glow { position: fixed; z-index: 100; width: 28px; height: 28px; border: 1px solid rgba(16,16,16,.35); border-radius: 50%; pointer-events: none; transform: translate(-50%,-50%); transition: width .2s, height .2s; mix-blend-mode: multiply; }
.site-header { position: fixed; z-index: 50; inset: 0 0 auto; height: 78px; padding: 0 max(24px, calc((100vw - var(--max))/2)); display: flex; align-items: center; justify-content: space-between; background: rgba(248,245,237,.86); border-bottom: 1px solid rgba(16,16,16,.12); backdrop-filter: blur(14px); }
.brand { display:flex; align-items:center; gap:10px; }
.brand img { display:block; width:auto; height:54px; object-fit:contain; }
.brand-wordmark { color:#102650; font-size:1.45rem; font-weight:800; letter-spacing:-.065em; line-height:1; }
.main-nav { display:flex; align-items:center; gap:30px; font-size:.78rem; font-weight:700; }
.main-nav > a:not(.nav-cta) { position:relative; }
.main-nav > a:not(.nav-cta)::after { content:""; position:absolute; height:1px; left:0; right:100%; bottom:-5px; background:var(--ink); transition:right .25s; }
.main-nav > a:hover::after { right:0; }
.nav-cta { display:flex; gap:26px; align-items:center; padding:11px 15px; color:white; background:var(--ink); }
.menu-toggle { display:none; border:0; background:none; }

.hero { position:relative; min-height:100svh; padding:150px max(24px, calc((100vw - var(--max))/2)) 78px; background:var(--cream); overflow:hidden; isolation:isolate; }
.paper-grain { position:absolute; inset:0; z-index:-1; opacity:.45; background-image:radial-gradient(rgba(0,0,0,.08) .6px, transparent .7px); background-size:5px 5px; mask-image:linear-gradient(to bottom,black 60%,transparent); }
.hero-copy { position:relative; z-index:3; width:63%; }
.eyebrow { display:flex; justify-content:space-between; width:68%; margin:0 0 50px; font-size:.66rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.hero h1,.intro h2,.section-heading h2,.manifesto h2,.contact h2 { margin:0; font-family:"DM Serif Display",serif; font-weight:400; letter-spacing:-.045em; line-height:.87; }
.hero h1 { font-size:clamp(4rem,9.5vw,9rem); }
h1 em,h2 em { color:var(--blue); font-weight:400; }
.hero-bottom { display:flex; align-items:center; gap:60px; margin-top:56px; }
.hero-bottom > p { max-width:430px; font-size:clamp(.92rem,1.3vw,1.1rem); line-height:1.75; }
.circle-link { width:108px; aspect-ratio:1; padding:21px; display:flex; align-items:center; justify-content:space-between; flex:none; border:1px solid; border-radius:50%; font-size:.66rem; font-weight:800; text-transform:uppercase; transition:.3s; }
.circle-link:hover { color:white; background:var(--blue); border-color:var(--blue); transform:rotate(-8deg); }
.circle-link b { font-size:1.5rem; }
.hero-visual { position:absolute; z-index:2; top:21%; right:4%; width:min(38vw,520px); height:60%; }
.visual-card { position:absolute; margin:0; width:82%; box-shadow:0 24px 70px rgba(44,41,33,.24); overflow:hidden; }
.visual-card img { aspect-ratio:16/9; object-fit:cover; }
.card-back { top:4%; right:-6%; transform:rotate(8deg); }.card-front { left:-8%; bottom:5%; transform:rotate(-5deg); }
.sticker { position:absolute; z-index:3; display:grid; place-content:center; text-align:center; color:white; font-weight:800; line-height:.9; }
.sticker small { display:block; margin-top:5px; font-size:.5rem; line-height:1; text-transform:uppercase; }
.sticker-blue { width:108px; aspect-ratio:1; right:0; bottom:18%; background:var(--blue); border-radius:50%; font-size:2rem; transform:rotate(10deg); }
.sticker-orange { width:115px; height:64px; left:-14%; top:10%; background:var(--orange); clip-path:polygon(5% 15%,25% 10%,38% 0,52% 13%,74% 5%,83% 23%,100% 34%,89% 53%,96% 76%,73% 83%,62% 100%,43% 90%,23% 98%,15% 77%,0 65%,9% 43%); font-size:.72rem; transform:rotate(-12deg); }
.orb,.line-art { position:absolute; z-index:-1; pointer-events:none; }
.orb { border-radius:50%; filter:blur(1px); }.orb-one { width:45vw; height:45vw; left:-20vw; top:35%; background:rgba(100,207,203,.32); }.orb-two { width:34vw; height:34vw; right:-12vw; top:-9vw; background:rgba(237,123,45,.24); }
.line-art { width:90px; height:90px; border:3px solid var(--cyan); clip-path:polygon(50% 0,100% 100%,0 100%); }.triangle-one { left:48%; top:24%; }.triangle-two { right:39%; bottom:10%; width:46px; height:46px; border-color:var(--orange); transform:rotate(20deg); }
.marquee { position:absolute; z-index:5; left:0; right:0; bottom:0; height:44px; display:flex; align-items:center; overflow:hidden; color:white; background:var(--ink); font-size:.72rem; font-weight:800; letter-spacing:.12em; white-space:nowrap; }
.marquee div { animation:marquee 24s linear infinite; }
@keyframes marquee { to { transform:translateX(-100%); } }

.intro { padding:150px 0 120px; }
.intro-grid { display:grid; grid-template-columns:1.1fr .75fr; gap:12%; margin-top:60px; }
.intro h2 { font-size:clamp(3rem,6vw,6rem); }.intro-copy { padding-top:22px; font-size:1rem; line-height:1.85; }.intro-copy p { margin:0 0 24px; }
.services { padding:140px 0; color:var(--cream); background:var(--ink); }
.section-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:30px; margin-bottom:80px; }.section-heading h2 { font-size:clamp(3.5rem,7vw,7rem); }.section-heading h2 em { color:var(--cyan); }
.service-list { border-top:1px solid rgba(255,255,255,.25); }
.service-card { display:grid; grid-template-columns:60px 210px 1fr; gap:28px; align-items:center; min-height:270px; padding:45px 0; border-bottom:1px solid rgba(255,255,255,.25); }
.service-index { align-self:start; color:var(--cyan); font-size:.7rem; font-weight:800; }.service-icon { width:150px; height:150px; display:grid; place-content:center; color:var(--ink); background:var(--cyan); transition:transform .45s cubic-bezier(.2,.8,.2,1); }.service-card:hover .service-icon { transform:rotate(-5deg) scale(1.04); }
.icon-merch { grid-template-columns:repeat(3,30px); gap:6px; align-items:end; }.icon-merch i { height:60px; background:var(--blue); }.icon-merch i:nth-child(2){height:88px;background:var(--orange)}.icon-merch i:nth-child(3){height:110px;background:var(--red)}
.icon-studio { background:var(--orange); font-size:5rem; }.icon-activation { background:var(--yellow); border-radius:50%; }.icon-activation i { width:64px; height:64px; border:10px solid var(--red); border-radius:50%; box-shadow:0 0 0 10px var(--blue); }
.service-card h3 { margin:0 0 14px; font-family:"DM Serif Display",serif; font-size:2.2rem; font-weight:400; }.service-card p { max-width:600px; margin:0; color:#bdbbb4; line-height:1.7; }.service-card ul { display:flex; gap:8px; margin:25px 0 0; padding:0; list-style:none; flex-wrap:wrap; }.service-card li { padding:7px 11px; border:1px solid #555; border-radius:999px; color:#d8d5cd; font-size:.65rem; text-transform:uppercase; }

.products { padding:150px 0; }
.products-intro { display:grid; grid-template-columns:1.15fr .7fr; align-items:end; gap:12%; }
.products-intro h2 { margin:52px 0 0; font-family:"DM Serif Display",serif; font-size:clamp(3.5rem,7vw,7rem); font-weight:400; letter-spacing:-.045em; line-height:.87; }
.products-intro h2 em { color:var(--red); }
.products-intro-copy { padding-bottom:8px; }
.products-intro-copy p { margin:0 0 28px; line-height:1.8; }
.products-intro-copy a { display:flex; justify-content:space-between; max-width:280px; padding:11px 0; border-bottom:1px solid; font-size:.72rem; font-weight:800; text-transform:uppercase; }
.product-showcase { position:relative; margin:90px 0 26px; overflow:hidden; background:#e7e1d5; }
.product-showcase img { aspect-ratio:16/7; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.2,1); }
.product-showcase:hover img { transform:scale(1.025); }
.showcase-label { position:absolute; top:22px; right:22px; width:150px; aspect-ratio:1; padding:25px; display:flex; flex-direction:column; justify-content:space-between; color:white; background:var(--blue); border-radius:50%; transform:rotate(8deg); }
.showcase-label span { font-size:.56rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }.showcase-label strong { font-family:"DM Serif Display",serif; font-size:1.35rem; font-weight:400; line-height:.9; }
.product-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid; border-left:1px solid; }
.product-card { position:relative; min-height:300px; padding:20px; display:flex; flex-direction:column; border-right:1px solid; border-bottom:1px solid; overflow:hidden; }
.product-card > span { font-size:.65rem; font-weight:800; color:var(--red); }
.product-glyph { width:92px; height:92px; margin:auto; display:grid; place-items:center; border:1px solid; border-radius:50%; font-family:"DM Serif Display",serif; font-size:1.25rem; transition:.4s; }
.product-card:nth-child(3n+2) .product-glyph { color:white; background:var(--blue); border-color:var(--blue); border-radius:0; transform:rotate(-5deg); }
.product-card:nth-child(3n) .product-glyph { background:var(--cyan); border-color:var(--cyan); clip-path:polygon(50% 0,100% 100%,0 100%); border-radius:0; padding-top:28px; }
.product-card:hover .product-glyph { transform:rotate(8deg) scale(1.08); }
.product-card h3 { margin:0 0 8px; font-family:"DM Serif Display",serif; font-size:1.45rem; font-weight:400; }.product-card p { margin:0; color:#666159; font-size:.75rem; line-height:1.5; }

.work { padding:150px 0; }.work-heading { align-items:flex-end; }.work-heading > p { max-width:390px; margin:0 0 10px; line-height:1.7; }.work-heading h2 em { color:var(--orange); }
.filter-bar { display:flex; gap:8px; margin-bottom:42px; flex-wrap:wrap; }.filter-bar button { padding:9px 14px; border:1px solid #bcb7ac; border-radius:999px; background:transparent; cursor:pointer; font-size:.7rem; font-weight:700; }.filter-bar button.active,.filter-bar button:hover { color:white; background:var(--blue); border-color:var(--blue); }
.project-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:65px 24px; }.project { min-width:0; transition:opacity .35s, transform .35s; }.project.is-hidden,.project.is-collapsed { display:none; }.project-wide { grid-column:span 2; }.project-image { overflow:hidden; background:#ddd6c9; cursor:zoom-in; position:relative; }.project-image img { aspect-ratio:16/9; object-fit:cover; transition:transform .75s cubic-bezier(.2,.7,.2,1); }.project:not(.project-wide) .project-image img { aspect-ratio:16/9; }.project:hover img { transform:scale(1.035); }.project-meta { position:relative; padding:18px 54px 0 0; }.project-meta span { font-size:.63rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:var(--blue); }.project-meta h3 { margin:8px 0 0; font-family:"DM Serif Display",serif; font-size:clamp(1.5rem,2.5vw,2.3rem); font-weight:400; }.project-meta b { position:absolute; right:0; top:20px; font-size:.72rem; }
.load-more-wrap { display:flex; justify-content:center; margin-top:75px; }.load-more { min-width:280px; padding:17px 20px; display:flex; justify-content:space-between; border:1px solid; background:transparent; cursor:pointer; font-size:.72rem; font-weight:800; text-transform:uppercase; transition:.25s; }.load-more:hover { color:white; background:var(--ink); }.load-more.is-hidden { display:none; }

.manifesto { position:relative; padding:150px 0; overflow:hidden; color:white; background:var(--blue); }.manifesto .section-number,.manifesto > div > p { color:var(--cyan); font-weight:800; letter-spacing:.14em; }.manifesto h2 { max-width:1050px; margin-top:42px; font-size:clamp(3.5rem,8.2vw,8rem); }.manifesto h2 em { color:var(--yellow); }.manifesto-footer { display:flex; justify-content:space-between; align-items:flex-end; gap:50px; margin-top:80px; }.manifesto-footer p { max-width:490px; margin:0; color:#dbe0ff; line-height:1.8; }.scribble { color:var(--yellow); font-family:"DM Serif Display",serif; font-size:2rem; font-style:italic; transform:rotate(-7deg); }.manifesto-shape { position:absolute; border:2px solid rgba(255,255,255,.35); }.shape-a { width:280px; height:280px; right:-60px; top:20%; border-radius:50%; }.shape-b { width:150px; height:150px; left:4%; bottom:-70px; transform:rotate(28deg); }

.process { padding:150px 0; }.process .section-heading h2 em { color:var(--red); }.process-list { margin:0; padding:0; list-style:none; border-top:1px solid; }.process-list li { display:grid; grid-template-columns:80px 1fr 1.3fr; align-items:center; gap:24px; padding:34px 0; border-bottom:1px solid; }.process-list span { font-size:.7rem; font-weight:800; color:var(--red); }.process-list h3 { margin:0; font-family:"DM Serif Display",serif; font-size:2.2rem; font-weight:400; }.process-list p { margin:0; color:#57554f; line-height:1.6; }

.contact { position:relative; padding:140px 0 90px; overflow:hidden; color:white; background:var(--ink); }.contact .section-number { color:var(--cyan); }.contact h2 { margin:45px 0 60px; max-width:1000px; font-size:clamp(4rem,9vw,9rem); }.contact h2 em { color:var(--orange); }.contact-button { display:flex; justify-content:space-between; align-items:center; width:min(100%,560px); padding:22px 24px; border-bottom:1px solid white; font-family:"DM Serif Display",serif; font-size:1.8rem; transition:.25s; }.contact-button:hover { padding-left:34px; color:var(--ink); background:var(--cyan); border-color:var(--cyan); }.contact-details { display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:40px; margin-top:110px; padding-top:30px; border-top:1px solid #454545; }.contact-details div { display:flex; flex-direction:column; align-items:flex-start; gap:8px; }.contact-details span { margin-bottom:11px; color:#888; font-size:.65rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }.contact-details a,.contact-details p { margin:0; font-size:.83rem; line-height:1.6; }.contact-orb { position:absolute; width:460px; height:460px; right:-170px; top:-150px; border:70px solid var(--blue); border-radius:50%; opacity:.6; }
footer { padding:22px max(24px,calc((100vw - var(--max))/2)); display:flex; justify-content:space-between; color:#777; background:var(--ink); border-top:1px solid #2b2b2b; font-size:.66rem; text-transform:uppercase; }
.whatsapp-float { position:fixed; z-index:45; right:24px; bottom:24px; min-width:58px; height:58px; padding:0 19px; display:flex; align-items:center; justify-content:center; gap:9px; color:white; background:#25d366; border-radius:999px; box-shadow:0 12px 35px rgba(0,0,0,.24); font-size:.72rem; font-weight:800; letter-spacing:.02em; transition:transform .25s, box-shadow .25s, background .25s; }
.whatsapp-float svg { width:27px; height:27px; flex:none; }.whatsapp-float:hover { background:#1fbd5b; transform:translateY(-4px); box-shadow:0 17px 42px rgba(0,0,0,.3); }

@media (max-width: 900px) {
  .cursor-glow { display:none; }.site-header { height:68px; }.brand img { width:auto; height:46px; }.brand-wordmark { font-size:1.2rem; }.menu-toggle { position:relative; z-index:2; display:grid; gap:4px; width:32px; padding:7px 4px; }.menu-toggle > span:not(.sr-only) { display:block; height:2px; background:var(--ink); }
  .main-nav { position:absolute; inset:0 0 auto; padding:95px 24px 35px; display:flex; flex-direction:column; align-items:stretch; background:var(--paper); transform:translateY(-120%); transition:transform .35s; box-shadow:0 20px 50px rgba(0,0,0,.12); }.main-nav.is-open { transform:none; }.nav-cta { justify-content:space-between; }
  .hero { padding-top:115px; min-height:960px; }.hero-copy { width:100%; }.eyebrow { width:100%; margin-bottom:34px; }.hero h1 { font-size:clamp(3.8rem,16vw,7rem); }.hero-bottom { align-items:flex-start; gap:22px; }.hero-visual { top:auto; bottom:80px; right:0; width:83vw; height:390px; }.visual-card { width:75%; }.card-front { left:2%; }.sticker-orange { left:0; }
  .intro-grid { grid-template-columns:1fr; gap:36px; }
  .products-intro { grid-template-columns:1fr; gap:45px; }.product-grid { grid-template-columns:repeat(2,1fr); }.product-showcase img { aspect-ratio:16/9; }
  .section-heading { display:block; }.section-heading .section-number { margin-bottom:50px; }.service-card { grid-template-columns:42px 120px 1fr; }.service-icon { width:110px; height:110px; }.icon-merch { grid-template-columns:repeat(3,21px); }.icon-merch i { height:42px }.icon-merch i:nth-child(2){height:60px}.icon-merch i:nth-child(3){height:78px}
  .work-heading > p { margin-top:35px; }.contact-details { grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 620px) {
  .section-shell { width:min(calc(100% - 32px),var(--max)); }.hero { padding-inline:16px; min-height:880px; }.hero-bottom { margin-top:38px; }.hero-bottom > p { margin:0; }.circle-link { width:88px; padding:15px; }.hero-visual { height:320px; }.sticker-blue { width:82px; font-size:1.5rem; }
  .intro,.work,.process { padding:100px 0; }.services,.manifesto,.contact { padding:100px 0; }.intro-grid { margin-top:42px; }.intro h2 { font-size:3.25rem; }
  .products { padding:100px 0; }.products-intro h2 { margin-top:42px; font-size:3.25rem; }.product-showcase { margin-top:65px; }.product-showcase img { aspect-ratio:16/9; }.showcase-label { width:105px; top:12px; right:12px; padding:18px; }.showcase-label strong { font-size:1rem; }.product-grid { grid-template-columns:1fr 1fr; }.product-card { min-height:260px; padding:16px; }.product-glyph { width:76px; height:76px; }.product-card h3 { font-size:1.2rem; }
  .service-card { grid-template-columns:35px 1fr; gap:16px; }.service-icon { grid-column:2; margin-bottom:18px; }.service-card > div:last-child { grid-column:2; }.service-card ul { display:none; }.service-card h3 { font-size:1.8rem; }
  .project-grid { grid-template-columns:1fr; gap:48px; }.project-wide { grid-column:auto; }.project .project-image img,.project:not(.project-wide) .project-image img { aspect-ratio:16/9; }
  .manifesto-footer { display:block; }.scribble { display:block; margin-top:45px; }.process-list li { grid-template-columns:42px 1fr; }.process-list p { grid-column:2; }.contact-details { grid-template-columns:1fr; margin-top:80px; }.contact h2 { font-size:3.6rem; }.contact-button { font-size:1.35rem; }.contact-orb { width:260px; height:260px; border-width:45px; }
  .whatsapp-float { right:16px; bottom:16px; width:56px; min-width:56px; height:56px; padding:0; }.whatsapp-float span { display:none; }
}

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

/* --- Interactive Lightbox Popup --- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s ease, visibility .3s ease;
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 14, 18, .92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.lightbox-shell {
  position: relative;
  z-index: 2;
  width: min(94vw, 1360px);
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  color: #fff;
  overflow: visible;
}

.lightbox-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 0 4px 14px;
}

.lightbox-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.lightbox-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.lightbox-title {
  margin: 0;
  font-family: "DM Serif Display", serif;
  font-size: clamp(1.1rem, 2.2vw, 1.6rem);
  font-weight: 400;
  color: #f5f5f5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lightbox-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.lightbox-counter {
  font-size: .78rem;
  font-weight: 700;
  color: #a8a8a8;
  letter-spacing: .06em;
}

.lightbox-close {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .1);
  color: #fff;
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: background .2s, transform .2s, border-color .2s;
}

.lightbox-close:hover {
  background: var(--red);
  border-color: var(--red);
  transform: rotate(90deg) scale(1.05);
}

.lightbox-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow: visible;
}

.lightbox-figure {
  position: relative;
  margin: 0;
  max-width: 100%;
  min-height: 240px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.lightbox-figure img {
  display: block;
  max-width: 100%;
  max-height: 76vh;
  width: auto;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 25px 70px rgba(0, 0, 0, .75);
  transform: scale(.95);
  opacity: 1;
  transition: opacity .25s ease, transform .3s cubic-bezier(.2, .8, .2, 1);
}

.lightbox.is-open .lightbox-figure img {
  transform: scale(1);
}

.lightbox-figure.is-loading img {
  opacity: .3;
  transform: scale(.98);
}

.lightbox-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;
  margin-top: -24px;
  margin-left: -24px;
  border: 3.5px solid rgba(255, 255, 255, .15);
  border-top-color: var(--cyan);
  border-right-color: var(--blue);
  border-radius: 50%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, visibility .2s ease;
  z-index: 10;
  box-shadow: 0 0 25px rgba(0, 240, 255, .3);
}

.lightbox-figure.is-loading .lightbox-spinner {
  opacity: 1;
  visibility: visible;
  animation: lbSpin .8s linear infinite;
}

@keyframes lbSpin {
  to {
    transform: rotate(360deg);
  }
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(16, 16, 16, .85);
  color: #fff;
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: background .2s, transform .2s, border-color .2s;
  backdrop-filter: blur(10px);
  z-index: 20;
}

.lightbox-prev { left: -26px; }
.lightbox-next { right: -26px; }

.lightbox-nav svg,
.lightbox-close svg {
  pointer-events: none;
}

.lightbox-nav:hover {
  background: var(--blue);
  border-color: var(--blue);
  transform: translateY(-50%) scale(1.1);
}

.lightbox-caption {
  margin-top: 12px;
  font-size: .84rem;
  color: #bbb;
  text-align: center;
}

/* Thumbnail interactive hover hints */
.project-image {
  position: relative;
  cursor: zoom-in;
}

.project-image::after {
  content: "Lihat Penuh ↗";
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 6px 14px;
  background: rgba(16, 16, 16, .84);
  color: #fff;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}

.project:hover .project-image::after {
  opacity: 1;
  transform: translateY(0);
}

.project {
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(36, 70, 189, 0.1);
}

.project-image {
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.product-showcase {
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 900px) {
  .lightbox { padding: 12px; }
  .lightbox-shell { width: 98vw; max-height: 98vh; }
  .lightbox-header { padding-bottom: 10px; }
  .lightbox-title { font-size: 1.1rem; max-width: 55vw; }
  .lightbox-close { width: 44px; height: 44px; min-width: 44px; }
  .lightbox-nav { width: 42px; height: 42px; }
  .lightbox-prev { left: 4px; }
  .lightbox-next { right: 4px; }
  .lightbox-figure img { max-height: 70vh; }
  .project-image::after {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    content: "🔍 Buka";
    opacity: .92;
    transform: none;
    right: 10px;
    bottom: 10px;
    padding: 4px 10px;
    font-size: .62rem;
  }
}