/* ==========================================================================
   GROWVA — Growth By Design  |  css/style.css
   ========================================================================== */

:root{
  --black: #111111;
  --black-deep: #0a0a0a;
  --ivory: #f6f6f6;
  --white: #ffffff;
  --mint: #B1FA20;           /* PRIMARY accent — matches logo gradient */
  --mint-soft: rgba(177,250,32,.15);
  --green: #50b964;          /* secondary / muted green */
  --green-soft: rgba(80,185,100,.16);
  --gray: #9a9a9a;
  --gray-dim: #6b6b6b;
  --line: rgba(246,246,246,.12);
  --line-soft: rgba(17,17,17,.1);
  --serif: 'Fraunces', serif;
  --sans: 'Inter', sans-serif;
  --mono: 'JetBrains Mono', monospace;
  --ease: cubic-bezier(.16,.84,.44,1);
  --container: 1240px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
html.lenis,
html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto !important;}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain;}
.lenis.lenis-stopped{overflow:hidden;}
body{
  background:var(--ivory);
  color:var(--black);
  font-family:var(--sans);
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;background:none;border:none;cursor:pointer;color:inherit;}
.container{max-width:var(--container);margin:0 auto;padding:0 40px;}

/* ---------- Cinematic scroll-driven WebGL background (homepage) ---------- */
.cinematic-webgl{
  position:fixed;
  inset:0;
  z-index:-1;
  width:100%;
  height:100%;
  pointer-events:none;
}
@media(prefers-reduced-motion:reduce){
  .cinematic-webgl{display:none;}
}

/* ---------- Liquid mint glow — two soft blurred blobs that drift across
   the page horizontally as you scroll, brand mint colour, screen-blended
   so only the glow itself is visible against the black homepage. ---------- */
.liquid-glow{
  position:fixed;
  top:0;left:0;
  width:64vw;height:64vw;
  max-width:900px;max-height:900px;
  border-radius:50%;
  z-index:-1;
  pointer-events:none;
  mix-blend-mode:screen;
  will-change:transform;
  background:radial-gradient(circle,
    rgba(177,250,32,.5) 0%,
    rgba(177,250,32,.22) 38%,
    rgba(177,250,32,0) 70%);
  filter:blur(20px);
}
.liquid-glow--a{top:-38%;left:-32%;}
.liquid-glow--b{top:auto;bottom:-38%;left:auto;right:-32%;}
@media(prefers-reduced-motion:reduce),(max-width:700px){
  .liquid-glow{display:none;}
}

/* ---------- Scroll progress ---------- */
.scroll-progress{
  position:fixed;
  top:0;left:0;right:0;
  height:3px;
  z-index:1002;
  pointer-events:none;
  background:rgba(246,246,246,.06);
}
.scroll-progress span{
  display:block;
  width:0%;
  height:100%;
  background:var(--mint);
  transform-origin:left center;
  box-shadow:0 0 18px rgba(177,250,32,.45);
}

/* ---------- Preloader ---------- */
.preloader{
  position:fixed;inset:0;z-index:10000;background:var(--black);
  display:flex;align-items:center;justify-content:center;
  transition:transform .9s var(--ease);
}
.preloader.done{transform:translateY(-100%);}
.preloader-core{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:22px;
  color:var(--ivory);
}
.preloader-mark{
  width:82px;height:82px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(177,250,32,.22);
  background:radial-gradient(circle at 50% 45%,rgba(177,250,32,.16),rgba(10,10,10,.2) 68%);
  box-shadow:0 0 46px rgba(177,250,32,.13);
  opacity:0;
  transform:scale(.86);
  animation:preloaderMark .9s var(--ease) forwards;
}
.preloader-mark svg{width:58px;height:58px;overflow:visible;}
.preloader-mark path,
.preloader-mark polyline{
  stroke-dasharray:180;
  stroke-dashoffset:180;
  animation:preloaderDraw 1.05s var(--ease) forwards .1s;
}
.preloader-wordmark{
  font-family:var(--serif);
  font-size:clamp(1.35rem,3vw,2rem);
  letter-spacing:.04em;
  opacity:0;
  animation:preloaderIn .95s var(--ease) forwards .12s;
}
.preloader-count{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.12em;
  color:var(--mint);
}
.preloader-word{
  font-family:var(--serif);font-size:clamp(2rem,6vw,4rem);color:var(--ivory);
  letter-spacing:.02em;opacity:0;animation:preloaderIn 1.2s var(--ease) forwards;
}
@keyframes preloaderMark{
  0%{opacity:0;transform:scale(.86) rotate(-8deg);}
  100%{opacity:1;transform:scale(1) rotate(0);}
}
@keyframes preloaderDraw{
  0%{stroke-dashoffset:180;}
  100%{stroke-dashoffset:0;}
}
@keyframes preloaderIn{
  0%{opacity:0;letter-spacing:.4em;}
  100%{opacity:1;letter-spacing:.02em;}
}

/* ---------- Type scale ---------- */
.eyebrow{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mint);display:flex;align-items:center;gap:8px;margin-bottom:22px;font-weight:500;
}
.eyebrow-dot{width:6px;height:6px;border-radius:50%;background:var(--mint);display:inline-block;}
.h2{
  font-family:var(--serif);font-weight:500;font-size:clamp(2.1rem,4.2vw,3.4rem);
  line-height:1.08;letter-spacing:-.01em;
}
.section{padding:150px 0;position:relative;}
.section-head{max-width:720px;margin-bottom:70px;}

/* ---------- Reveal animations ---------- */
.reveal-up{opacity:0;transform:translateY(36px) scale(.98);transition:opacity .9s var(--ease),transform .9s var(--ease);}
.reveal-up.in{opacity:1;transform:translateY(0) scale(1);}

/* Card grids all reveal together via the same observer, since each card
   already carries its own .reveal-up — staggering the transition-delay
   per position is what actually makes them feel like they cascade in one
   after another instead of popping in as one flat block. */
.stats-grid .stat-item.reveal-up,
.services-compact-grid .service-compact-item.reveal-up,
.why-cards .why-card.reveal-up,
.landing-grid-cards .landing-card.reveal-up,
.latest-project-grid .latest-project-card.reveal-up{
  transition-delay:calc(var(--card-index,0) * 70ms);
}
.reveal-line{overflow:hidden;display:block;}
.reveal-line span{display:inline-block;transform:translateY(110%);transition:transform 1s var(--ease);}
.reveal-line.in span{transform:translateY(0);}
/* ---------- Buttons ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  padding:17px 34px;font-family:var(--sans);font-weight:600;font-size:.92rem;
  border-radius:100px;overflow:hidden;isolation:isolate;transition:transform .4s var(--ease);
}
.btn:active{transform:scale(.96);}
.btn span{position:relative;z-index:2;}
.btn-primary{background:var(--mint);color:var(--black-deep);}
.btn-primary::before{
  content:'';position:absolute;inset:0;background:var(--black);z-index:1;
  transform:translateY(101%);transition:transform .45s var(--ease);
}
.btn-primary:hover::before{transform:translateY(0);}
.btn-primary:hover{color:var(--ivory);}
.btn-ghost{border:1px solid rgba(17,17,17,.25);color:var(--black);}
.btn-ghost::before{
  content:'';position:absolute;inset:0;background:var(--black);z-index:1;
  transform:translateY(101%);transition:transform .45s var(--ease);
}
.btn-ghost:hover::before{transform:translateY(0);}
.btn-ghost:hover{color:var(--ivory);border-color:var(--black);}
.btn-nav{padding:12px 24px;font-size:.82rem;}

/* ================= NAV ================= */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:20px 0;
  background:rgba(10,10,10,.94);
  border-bottom:1px solid rgba(246,246,246,.08);
  transition:background .4s,padding .4s,border-color .4s,opacity .7s var(--ease),transform .7s var(--ease);
  color:var(--ivory);
  opacity:0;
  transform:translateY(-16px);
}
.nav.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){.nav{opacity:1;transform:none;}}
.nav.scrolled{
  background:rgba(10,10,10,.98);
  padding:13px 0;
  border-color:rgba(246,246,246,.12);
}
.nav-inner{
  max-width:var(--container);margin:0 auto;padding:0 40px;
  display:flex;align-items:center;justify-content:space-between;
}

/* Logo */
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;}
.logo-img{height:34px;width:auto;display:block;flex-shrink:0;}
.logo-3d{width:38px;height:38px;flex-shrink:0;--poster-color:transparent;pointer-events:none;}
.logo-text{font-family:'Bodoni Moda',serif;font-weight:400;font-size:1.5rem;letter-spacing:.05em;color:var(--ivory);font-variation-settings:'opsz' 96;}
.logo-dot{color:var(--mint);}
/* 3D "GROWVA" wordmark model — sits static until hovered, at which point
   JS spins it a full turn and eases it back to rest on mouseleave (see
   spinWordmarkOnHover() in script.js). Deliberately excluded from the
   icon's own continuous auto-rotate loop/selector. */
.logo-wordmark-3d{width:165px;height:36px;flex-shrink:0;--poster-color:transparent;pointer-events:auto;}
@media(max-width:600px){.logo-wordmark-3d{width:138px;height:30px;}}

.nav-links{display:flex;align-items:center;gap:28px;}
.nav-link{
  appearance:none;background:none;border:0;font:inherit;cursor:pointer;text-decoration:none;
  font-size:.88rem;font-weight:500;position:relative;padding:0 0 4px;color:rgba(246,246,246,.8);
}
.nav-link::after{
  content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--mint);
  transition:width .3s var(--ease);
}
.nav-link:hover::after,.nav-link.active::after,.nav-item--mega.open>.nav-link::after{width:100%;}
.nav-link.active{color:var(--ivory);}
.nav-link:hover,.nav-item--mega.open>.nav-link{color:var(--ivory);}
.nav-item{position:relative;display:flex;align-items:center;}
.mega-menu{
  position:absolute;top:calc(100% + 24px);left:50%;z-index:1100;
  width:min(760px,calc(100vw - 48px));padding:18px;
  background:linear-gradient(165deg,rgba(20,20,20,.92),rgba(8,8,8,.96));
  backdrop-filter:blur(28px) saturate(160%);
  -webkit-backdrop-filter:blur(28px) saturate(160%);
  border:1px solid rgba(246,246,246,.1);
  border-radius:16px;
  box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 0 1px rgba(177,250,32,.05) inset,0 1px 0 rgba(246,246,246,.08) inset;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translate(-50%,10px) scale(.97);
  transition:opacity .28s var(--ease),transform .32s var(--ease),visibility .28s var(--ease);
}
.nav-item--mega.open>.mega-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0) scale(1);}
.mega-menu::before{content:'';position:absolute;left:0;right:0;top:-24px;height:24px;}
.mega-menu::after{
  content:'';position:absolute;left:32px;right:32px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(177,250,32,.5),transparent);
}
.mega-menu--services{display:grid;grid-template-columns:220px 1fr;gap:16px;}
.mega-menu--simple{width:min(430px,calc(100vw - 48px));display:grid;gap:6px;}
.mega-tabs{
  display:grid;gap:4px;padding:6px;border-right:1px solid rgba(246,246,246,.08);
}
.mega-tab{
  appearance:none;border:0;background:transparent;color:rgba(246,246,246,.72);
  font:600 .86rem var(--sans);text-align:left;cursor:pointer;
  padding:12px 14px;border-radius:10px;border-left:2px solid transparent;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease);
}
.mega-tab:hover,.mega-tab:focus-visible,.mega-tab.active{
  color:var(--ivory);background:rgba(177,250,32,.1);border-left-color:var(--mint);transform:translateX(2px);
}
.mega-panels{min-height:270px;}
.mega-panel{display:none;grid-template-columns:1fr;gap:6px;height:100%;}
.mega-panel.active{display:grid;}
.mega-link{
  position:relative;isolation:isolate;overflow:hidden;
  display:grid;grid-template-columns:38px 1fr;gap:12px;align-items:start;
  padding:12px;border-radius:12px;color:rgba(246,246,246,.84);text-decoration:none;
  transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease);
}
.mega-link:hover,.mega-link:focus-visible{
  background:rgba(177,250,32,.07);color:var(--mint);transform:translateX(3px);
}
.mega-icon{
  width:38px;height:38px;padding:8px;box-sizing:border-box;
  background:rgba(177,250,32,.08);border:1px solid rgba(177,250,32,.16);border-radius:9px;
  color:rgba(177,250,32,.86);fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  transition:color .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
}
.mega-link:hover .mega-icon,.mega-link:focus-visible .mega-icon{
  color:var(--mint);background:rgba(177,250,32,.16);border-color:rgba(177,250,32,.4);transform:scale(1.08);
}
.mega-link strong{display:block;font-size:.92rem;line-height:1.25;font-weight:650;color:currentColor;}
.mega-link small{display:block;margin-top:3px;font-size:.78rem;line-height:1.45;color:var(--gray-dim);}
.mega-cta{
  align-self:end;display:inline-flex;width:max-content;margin:6px 0 0 12px;
  color:var(--mint);font-size:.85rem;font-weight:650;text-decoration:none;
  transition:gap .25s var(--ease);
}
.mega-cta:hover{color:var(--ivory);}
.btn-nav{background:var(--mint);color:var(--black-deep);border:none;}
.btn-nav:hover{background:var(--ivory);}

.nav-burger{display:none;flex-direction:column;gap:5px;width:26px;}
.nav-burger span{height:1.5px;background:var(--ivory);width:100%;transition:transform .3s,opacity .3s;}
.nav-mobile{
  display:none;flex-direction:column;gap:0;background:var(--black-deep);
  border-top:1px solid rgba(246,246,246,.08);
}
.nav-mobile a,.mobile-mega-toggle{
  width:100%;padding:18px 40px;border:0;border-bottom:1px solid rgba(246,246,246,.06);
  background:transparent;text-align:left;font-size:1.1rem;font-family:var(--serif);color:rgba(246,246,246,.85);
}
.nav-mobile a:hover,.nav-mobile a.active{color:var(--mint);}
.nav-mobile.open{display:flex;}
.mobile-mega-toggle{
  display:flex;align-items:center;justify-content:space-between;cursor:pointer;
}
.mobile-mega-toggle:hover,.mobile-mega.open>.mobile-mega-toggle{color:var(--mint);}
.mobile-mega-toggle span{position:relative;width:16px;height:16px;flex:0 0 16px;}
.mobile-mega-toggle span::before,.mobile-mega-toggle span::after{
  content:'';position:absolute;left:0;top:7px;width:16px;height:1.5px;background:currentColor;
  transition:transform .25s var(--ease);
}
.mobile-mega-toggle span::after{transform:rotate(90deg);}
.mobile-mega.open .mobile-mega-toggle span::after{transform:rotate(0deg);}
.mobile-mega-panel{max-height:0;overflow:hidden;background:rgba(246,246,246,.025);transition:max-height .28s var(--ease);}
.mobile-mega.open .mobile-mega-panel{max-height:1400px;}
.mobile-mega-panel a{
  display:block;width:100%;padding:12px 56px;font:500 .9rem/1.35 var(--sans);color:rgba(246,246,246,.68);
}

@media(max-width:960px){
  .nav-links,.btn-nav{display:none;}
  .nav-burger{display:flex;}
}

@media(prefers-reduced-motion:reduce){
  .mega-menu,.mega-tab,.mega-link,.mobile-mega-panel,.mobile-mega-toggle span::before,.mobile-mega-toggle span::after{
    transition:none!important;
  }
}

/* ================= HERO (index only) =================
   Transparent by design — the sitewide cinematicWebGL canvas (fixed,
   behind everything) is what supplies the scene here now; the old
   heroCanvas grid + spinning brand-object mesh were removed. */
.hero-travel-scene{
  position:relative;
  background:transparent;
  isolation:isolate;
}
.hero{
  position:sticky;top:0;min-height:100vh;background:transparent;color:var(--black);
  display:flex;flex-direction:column;justify-content:center;overflow:hidden;
  z-index:1;
}
.brand-object-canvas{
  display:block;
  width:100%;
  height:100%;
}
.hero-content{
  position:relative;z-index:2;max-width:var(--container);margin:0 auto;padding:160px 40px 80px;width:100%;
}
.hero-title{font-family:var(--serif);font-weight:500;font-size:clamp(3.4rem,9vw,7.6rem);line-height:.98;letter-spacing:-.02em;margin-bottom:32px;}
.hero-title .italic{font-style:italic;font-weight:400;color:var(--mint);}
.hero-sub{font-size:1.15rem;color:rgba(10,10,10,.72);max-width:480px;line-height:1.55;margin-bottom:44px;font-weight:400;}
.hero .eyebrow{color:var(--mint);}
.hero-actions{display:flex;gap:18px;flex-wrap:wrap;}

.hero-scroll{
  position:absolute;bottom:110px;left:40px;z-index:2;display:flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(10,10,10,.55);
}
.hero-scroll-line{width:1px;height:46px;background:rgba(10,10,10,.2);position:relative;overflow:hidden;}
.hero-scroll-line i{position:absolute;top:-100%;left:0;width:100%;height:100%;background:var(--mint);animation:scrollLine 2s ease-in-out infinite;}
@keyframes scrollLine{0%{top:-100%;} 50%{top:0;} 100%{top:100%;}}

.marquee-strip{
  position:relative;z-index:2;border-top:1px solid rgba(10,10,10,.14);
  padding:26px 0;overflow:hidden;white-space:nowrap;
}
.marquee-track{display:inline-flex;gap:56px;animation:marquee 28s linear infinite;}
.marquee-track span{
  font-family:var(--mono);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(10,10,10,.55);
}
@keyframes marquee{0%{transform:translateX(0);} 100%{transform:translateX(-50%);}}

/* ================= PAGE HERO (inner pages) ================= */
.page-hero{
  background:var(--black);color:var(--ivory);padding:180px 0 100px;
  position:relative;overflow:hidden;
}
#pageHeroCanvas{position:absolute;inset:0;width:100%;height:100%;opacity:.35;display:block;}
.page-hero-inner{position:relative;z-index:2;max-width:var(--container);margin:0 auto;padding:0 40px;}
.page-hero .eyebrow{color:var(--mint);}
.page-hero-title{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(2.8rem,6vw,5.2rem);
  line-height:1.05;letter-spacing:-.02em;margin-bottom:24px;
}
.page-hero-sub{font-size:1.15rem;color:rgba(246,246,246,.65);max-width:560px;line-height:1.6;}
.project-featured-image{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;margin-top:48px;border-radius:20px;border:1px solid rgba(246,246,246,.12);}
.project-featured-image:not([src]),.project-featured-image[src=""]{display:none;}

/* ================= WHY SHOPIFY (home teaser) ================= */
.why-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;}
.why-lead p{font-family:var(--serif);font-size:1.5rem;line-height:1.5;font-weight:400;color:var(--black);}
.why-cards{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);}
.why-card{background:var(--ivory);padding:34px 30px;transition:background .3s;text-decoration:none;color:var(--black);}
.why-card:hover{background:#fff;}
.dept-icon{
  width:24px;height:24px;margin-bottom:18px;color:var(--mint);fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
.why-num{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mint);display:block;margin-bottom:16px;}
.why-card h3{font-family:var(--serif);font-size:1.2rem;font-weight:500;line-height:1.3;margin-bottom:10px;}
.why-card p{font-size:.92rem;color:var(--gray-dim);line-height:1.5;}
.why-cta{margin-top:44px;}

@media(max-width:900px){
  .why-grid{grid-template-columns:1fr;gap:44px;}
  .why-cards{grid-template-columns:1fr;}
  .hero-brand-object{display:none;}
}

/* ================= SERVICES (home grid) ================= */
.service-list{border-top:1px solid var(--line-soft);}
.service-row{
  border-bottom:1px solid var(--line-soft);padding:30px 0;cursor:none;
  transition:padding-left .4s var(--ease);
}
.service-row:hover{padding-left:16px;}
.service-row-top{display:flex;align-items:center;justify-content:space-between;gap:20px;}
.service-row-top h3{font-family:var(--serif);font-weight:500;font-size:clamp(1.1rem,2vw,1.6rem);}
.service-arrow{
  font-family:var(--mono);font-size:1.3rem;color:var(--mint);opacity:0;transform:translateX(-8px);
  transition:opacity .35s,transform .35s;flex-shrink:0;
}
.service-row:hover .service-arrow{opacity:1;transform:translateX(0);}
.service-desc{max-width:560px;color:var(--gray-dim);font-size:.9rem;line-height:1.55;margin-top:6px;}

/* Home services compact grid */
.services-compact-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);
}
.service-compact-item{
  background:var(--ivory);padding:28px 24px;
  transition:background .3s,color .3s;
  display:flex;align-items:flex-start;gap:12px;
}
.service-compact-item:hover{background:var(--black);color:var(--ivory);}
.service-compact-num{font-family:var(--mono);font-size:.68rem;color:var(--mint);flex-shrink:0;margin-top:3px;}
.service-compact-name{font-family:var(--serif);font-size:1rem;font-weight:500;line-height:1.3;}

/* ================= PROCESS (home teaser) ================= */
.process{padding-bottom:80px;}
.process-track-wrap{max-width:var(--container);margin:0 auto;padding:0 40px;position:relative;}
.process-line{
  position:relative;height:2px;background:var(--line-soft);margin-bottom:60px;overflow:hidden;
}
.process-line i{
  position:absolute;top:0;left:0;height:100%;width:0%;background:var(--mint);
  transition:width .1s linear;display:block;
}
.process-steps{display:grid;grid-template-columns:repeat(9,1fr);gap:24px;}
.process-step{padding-right:8px;}
.p-num{font-family:var(--mono);font-size:.78rem;color:var(--mint);display:block;margin-bottom:14px;}
.process-step h4{font-family:var(--serif);font-size:1.05rem;font-weight:600;margin-bottom:8px;}
.process-step p{font-size:.82rem;line-height:1.5;color:var(--gray-dim);}
.process-cta{text-align:center;margin-top:60px;}

@media(max-width:1100px){.process-steps{grid-template-columns:repeat(3,1fr);row-gap:44px;}}
@media(max-width:600px){.process-steps{grid-template-columns:repeat(1,1fr);}}

/* ================= JOURNEY (home "Full-Service" teaser) ================= */
.journey{padding-bottom:80px;}
.journey-track-wrap{max-width:var(--container);margin:0 auto;padding:0 40px;position:relative;}
.journey-line{position:relative;height:2px;background:var(--line-soft);margin-bottom:60px;overflow:hidden;}
.journey-line i{position:absolute;top:0;left:0;height:100%;width:0%;background:var(--mint);transition:width .1s linear;display:block;}
.journey-steps{display:grid;grid-template-columns:repeat(6,1fr);gap:24px;}
.journey-step{text-align:center;position:relative;}
.j-num{font-family:var(--mono);font-size:.78rem;color:var(--mint);display:block;margin-bottom:14px;}
.journey-step h4{font-family:var(--serif);font-size:1.05rem;font-weight:600;}
.journey-step:not(:last-child)::after{
  content:'→';position:absolute;top:26px;right:-16px;color:var(--gray-dim);font-family:var(--mono);font-size:.9rem;
}
.journey-sub{text-align:center;margin-top:54px;font-size:1rem;color:var(--gray-dim);max-width:560px;margin-left:auto;margin-right:auto;}

@media(max-width:1100px){
  .journey-steps{grid-template-columns:repeat(3,1fr);row-gap:44px;}
  .journey-step:nth-child(3n)::after{display:none;}
}
@media(max-width:600px){
  .journey-steps{grid-template-columns:repeat(1,1fr);}
  .journey-step::after{display:none;}
}

/* ================= STATS ================= */
.stats{background:var(--black);color:var(--ivory);padding:110px 0;}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;}
.stat-item{
  border:1px solid rgba(246,246,246,.1);
  padding:24px 22px;
  border-radius:14px;
  background:rgba(246,246,246,.04);
  background-position:50% 50%;background-size:cover;
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(246,246,246,.08);
  transition:background-color .3s,border-color .3s,transform .4s var(--ease);
}
.stat-item:hover{background-color:rgba(246,246,246,.07);border-color:rgba(177,250,32,.28);}
.stat-num{font-family:var(--serif);font-size:clamp(2.4rem,5vw,4rem);font-weight:500;color:var(--mint);}
.stat-plus{font-family:var(--serif);font-size:2rem;color:var(--mint);}
.stat-item p{margin-top:10px;font-size:.88rem;color:rgba(246,246,246,.6);}
.stat-item[data-media-current-url]:not([data-media-current-url=""]){background-color:rgba(5,5,5,.62);background-blend-mode:darken;}

/* Homepage-only variant: transparent so the sitewide cinematicWebGL
   canvas shows through. Other pages (about, contact, process) keep the
   standard dark .stats above. */
.stats.stats--light{background:transparent;color:var(--black);}
.stats--light .stat-item{background:rgba(10,10,10,.04);border-color:rgba(10,10,10,.1);box-shadow:inset 0 1px 0 rgba(10,10,10,.06);}
.stats--light .stat-item:hover{background-color:rgba(10,10,10,.07);border-color:rgba(177,250,32,.4);}
.stats--light .stat-item p{color:rgba(10,10,10,.6);}

@media(max-width:800px){.stats-grid{grid-template-columns:1fr 1fr;row-gap:44px;}}

/* ================= WORK / PORTFOLIO ================= */
.gallery-wrap{
  position:relative;
  width:100%;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:var(--black);
  color:var(--ivory);
  z-index:1;
}
.gallery{
  position:relative;
  width:100%;
  height:100%;
  flex:none;
}
.gallery__item{
  background-position:50% 50%;
  background-size:cover;
  flex:none;
  position:relative;
  overflow:hidden;
  border-radius:8px;
  border:1px solid rgba(246,246,246,.08);
  box-shadow:0 22px 70px rgba(0,0,0,.3);
  isolation:isolate;
}
.gallery__item img{object-fit:cover;width:100%;height:100%;}
.gallery__item[data-media-current-url]:not([data-media-current-url=""]) .gallery-tile{background:rgba(5,5,5,.5);backdrop-filter:blur(1px);}
body:not(.admin-edit-mode) .gallery__item[data-cms-clickable-card]{cursor:pointer;}
.gallery--bento{
  display:grid;
  gap:1vh;
  grid-template-columns:repeat(3,24vw);
  grid-template-rows:repeat(4,16vh);
  justify-content:center;
  align-content:center;
}
.gallery--final.gallery--bento{
  grid-template-columns:repeat(3,100vw);
  grid-template-rows:repeat(4,49.5vh);
  gap:1vh;
}
.gallery--bento .gallery__item:nth-child(1){grid-area:1 / 1 / 3 / 2;}
.gallery--bento .gallery__item:nth-child(2){grid-area:1 / 2 / 2 / 3;}
.gallery--bento .gallery__item:nth-child(3){grid-area:2 / 2 / 4 / 3;}
.gallery--bento .gallery__item:nth-child(4){grid-area:1 / 3 / 3 / 4;}
.gallery--bento .gallery__item:nth-child(5){grid-area:3 / 1 / 4 / 2;}
.gallery--bento .gallery__item:nth-child(6){grid-area:3 / 3 / 5 / 4;}
.gallery--bento .gallery__item:nth-child(7){grid-area:4 / 1 / 5 / 2;}
.gallery--bento .gallery__item:nth-child(8){grid-area:4 / 2 / 5 / 3;}
.gallery-tile{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:linear-gradient(155deg,#111,#050505);
}
.gallery-tile::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.52));
}
.gallery-tile--case::before{
  content:'';
  position:absolute;
  inset:12%;
  border:1px solid rgba(177,250,32,.14);
  border-radius:999px;
  transform:rotate(-8deg);
}
.gallery-tile--noor{
  background:
    radial-gradient(circle at 30% 20%,rgba(177,250,32,.45),transparent 60%),
    linear-gradient(155deg,#1a1a1a 0%,#111 60%,#0a0a0a 100%);
}
.gallery-tile--vella{
  background:
    radial-gradient(circle at 70% 30%,rgba(246,246,246,.25),transparent 55%),
    linear-gradient(155deg,#222 0%,#111 55%,#0a0a0a 100%);
}
.gallery-tile--marbre{
  background:
    radial-gradient(circle at 40% 70%,rgba(177,250,32,.35),transparent 60%),
    linear-gradient(155deg,#161616 0%,#0e0e0e 55%,#080808 100%);
}
.gallery-tile--mark{
  background:
    radial-gradient(circle at 50% 46%,rgba(177,250,32,.16),transparent 45%),
    linear-gradient(155deg,#101010,#050505);
}
.gallery-mark svg{
  width:clamp(78px,12vw,148px);
  height:clamp(78px,12vw,148px);
  filter:drop-shadow(0 18px 42px rgba(177,250,32,.2));
}
.gallery-tile--chart{
  align-items:flex-end;
  justify-content:flex-start;
  padding:clamp(20px,3vw,42px);
  padding-bottom:clamp(56px,7vh,82px);
  background:
    radial-gradient(circle at 80% 18%,rgba(177,250,32,.2),transparent 45%),
    linear-gradient(155deg,#121212,#050505);
}
.gallery-bars{
  position:absolute;
  right:clamp(18px,3vw,46px);
  top:clamp(20px,4vh,50px);
  height:45%;
  width:44%;
  display:flex;
  align-items:flex-end;
  gap:10%;
  z-index:1;
}
.gallery-bars span{
  width:100%;
  height:var(--bh);
  border-radius:999px 999px 0 0;
  background:linear-gradient(180deg,var(--mint),rgba(177,250,32,.2));
}
.gallery-tile--stat{
  justify-content:flex-start;
  padding:clamp(22px,3.4vw,48px);
  background:
    radial-gradient(circle at 80% 15%,rgba(177,250,32,.18),transparent 54%),
    linear-gradient(155deg,#141414,#050505);
}
.gallery-stat{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  color:var(--ivory);
}
.gallery-stat strong{
  font-family:var(--serif);
  font-size:clamp(2rem,5vw,4.8rem);
  font-weight:500;
  line-height:.9;
}
.gallery-stat small{
  max-width:190px;
  margin-top:12px;
  font-family:var(--mono);
  font-size:clamp(.64rem,.85vw,.78rem);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(246,246,246,.62);
}
.gallery-tile--wordmark{
  background:
    radial-gradient(circle at 82% 20%,rgba(177,250,32,.18),transparent 52%),
    linear-gradient(155deg,#0f0f0f,#020202);
}
.gallery-wordmark{
  position:relative;
  z-index:1;
  font-family:var(--serif);
  font-size:clamp(1.6rem,3.4vw,4.2rem);
  font-weight:700;
  letter-spacing:.01em;
  color:var(--ivory);
}
.gallery-wordmark span{color:var(--mint);}
.gallery-tile--phrase{
  align-items:flex-start;
  justify-content:flex-start;
  padding:clamp(18px,3vw,44px);
  padding-bottom:clamp(44px,6vh,70px);
  background:
    radial-gradient(circle at 90% 90%,rgba(177,250,32,.12),transparent 52%),
    linear-gradient(155deg,#0c0c0c,#020202);
}
.gallery-phrase{
  position:relative;
  z-index:1;
  font-family:var(--serif);
  font-size:clamp(1.25rem,2.3vw,3.2rem);
  font-style:italic;
  line-height:.9;
  color:var(--mint);
}
.gallery-tile--icon{
  justify-content:flex-start;
  align-items:flex-end;
  padding:clamp(22px,3.2vw,46px);
  background:
    radial-gradient(circle at 82% 18%,rgba(177,250,32,.13),transparent 54%),
    linear-gradient(155deg,#121212,#050505);
}
.gallery-icon{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap:12px;
  max-width:260px;
}
.gallery-icon svg{
  width:clamp(34px,5vw,62px);
  height:clamp(34px,5vw,62px);
  color:var(--mint);
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.gallery-icon strong{
  font-family:var(--serif);
  font-size:clamp(1.35rem,2.4vw,2.4rem);
  font-weight:500;
  line-height:1;
}
.gallery-icon small{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(246,246,246,.62);
}
.gallery-tile--store{
  padding:clamp(18px,3vw,44px);
  background:
    radial-gradient(circle at 22% 18%,rgba(177,250,32,.22),transparent 48%),
    linear-gradient(155deg,#121212,#050505);
}
.gallery-store{
  position:relative;
  z-index:1;
  width:min(72%,520px);
  aspect-ratio:4/3;
  border:1px solid rgba(246,246,246,.18);
  border-radius:14px;
  background:rgba(246,246,246,.05);
  box-shadow:0 20px 70px rgba(0,0,0,.35);
  padding:7%;
  display:grid;
  gap:8%;
}
.gallery-store span{
  display:block;
  border-radius:999px;
  background:rgba(246,246,246,.14);
}
.gallery-store span:nth-child(1){width:54%;height:16px;background:var(--mint);}
.gallery-store span:nth-child(2){width:100%;height:42%;}
.gallery-store span:nth-child(3){width:68%;height:14px;}
.gallery-caption{
  position:absolute;
  left:18px;
  bottom:16px;
  z-index:2;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(246,246,246,.78);
}
.gallery--static .gallery-caption{
  opacity:1;
  visibility:visible;
  transform:none;
}

.bento-gallery-wrap{
  position:relative;
  width:100%;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:var(--black);
  color:var(--ivory);
  isolation:isolate;
}
.bento-gallery{
  position:relative;
  width:100%;
  height:100%;
}
.bento-gallery__item{
  position:relative;
  flex:none;
  overflow:hidden;
  border-radius:8px;
  background:#080808;
  border:1px solid rgba(246,246,246,.08);
  box-shadow:0 28px 80px rgba(0,0,0,.34);
  min-width:0;
  min-height:0;
}
.bento-gallery--grid{
  display:grid;
  gap:1vh;
  grid-template-columns:repeat(3,30vw);
  grid-template-rows:repeat(4,20vh);
  justify-content:center;
  align-content:center;
}
.bento-gallery--grid .bento-gallery__item:nth-child(1){grid-area:1 / 1 / 3 / 2;}
.bento-gallery--grid .bento-gallery__item:nth-child(2){grid-area:1 / 2 / 2 / 3;}
.bento-gallery--grid .bento-gallery__item:nth-child(3){grid-area:2 / 2 / 4 / 3;}
.bento-gallery--grid .bento-gallery__item:nth-child(4){grid-area:1 / 3 / 3 / 4;}
.bento-gallery--grid .bento-gallery__item:nth-child(5){grid-area:3 / 1 / 4 / 2;}
.bento-gallery--grid .bento-gallery__item:nth-child(6){grid-area:3 / 3 / 5 / 4;}
.bento-gallery--grid .bento-gallery__item:nth-child(7){grid-area:4 / 1 / 5 / 2;}
.bento-gallery--grid .bento-gallery__item:nth-child(8){grid-area:4 / 2 / 5 / 3;}
.bento-gallery--final.bento-gallery--grid{
  grid-template-columns:repeat(3,26vw);
  grid-template-rows:repeat(3,27vh);
  gap:2vh;
}
.bento-gallery--final.bento-gallery--grid .bento-gallery__item:nth-child(1){grid-area:1 / 1 / 3 / 2;}
.bento-gallery--final.bento-gallery--grid .bento-gallery__item:nth-child(2){grid-area:1 / 2 / 2 / 3;}
.bento-gallery--final.bento-gallery--grid .bento-gallery__item:nth-child(3){grid-area:1 / 3 / 2 / 4;}
.bento-gallery--final.bento-gallery--grid .bento-gallery__item:nth-child(4){grid-area:2 / 2 / 4 / 3;}
.bento-gallery--final.bento-gallery--grid .bento-gallery__item:nth-child(5){grid-area:2 / 1 / 3 / 2;}
.bento-gallery--final.bento-gallery--grid .bento-gallery__item:nth-child(6){grid-area:2 / 3 / 3 / 4;}
.bento-gallery--final.bento-gallery--grid .bento-gallery__item:nth-child(7){grid-area:3 / 1 / 4 / 2;}
.bento-gallery--final.bento-gallery--grid .bento-gallery__item:nth-child(8){grid-area:3 / 3 / 4 / 4;}
.bento-panel{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
}
.bento-panel::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,transparent 48%,rgba(0,0,0,.58));
}
.bento-panel--case::before{
  content:'';
  position:absolute;
  inset:12%;
  border:1px solid rgba(177,250,32,.14);
  opacity:.55;
  transform:rotate(-6deg);
}
.bento-panel--noor{
  background:
    radial-gradient(circle at 30% 20%,rgba(177,250,32,.45),transparent 60%),
    linear-gradient(155deg,#1a1a1a 0%,#111 60%,#0a0a0a 100%);
}
.bento-panel--vella{
  background:
    radial-gradient(circle at 70% 30%,rgba(246,246,246,.25),transparent 55%),
    linear-gradient(155deg,#222 0%,#111 55%,#0a0a0a 100%);
}
.bento-panel--marbre{
  background:
    radial-gradient(circle at 40% 70%,rgba(177,250,32,.35),transparent 60%),
    linear-gradient(155deg,#161616 0%,#0e0e0e 55%,#080808 100%);
}
.bento-panel--mark{
  background:
    radial-gradient(circle at 50% 46%,rgba(177,250,32,.16),transparent 45%),
    linear-gradient(155deg,#101010,#050505);
}
.bento-panel--mark svg{
  width:clamp(78px,12vw,148px);
  height:clamp(78px,12vw,148px);
  filter:drop-shadow(0 18px 42px rgba(177,250,32,.2));
}
.bento-panel--chart{
  align-items:flex-end;
  justify-content:flex-start;
  padding:clamp(20px,3vw,42px);
  padding-bottom:clamp(56px,7vh,82px);
  background:
    radial-gradient(circle at 20% 10%,rgba(177,250,32,.24),transparent 52%),
    linear-gradient(155deg,#141414,#070707);
}
.bento-chart{
  position:absolute;
  left:clamp(18px,2.2vw,32px);
  right:clamp(18px,2.2vw,32px);
  bottom:clamp(76px,9vh,108px);
  height:42%;
  display:flex;
  align-items:flex-end;
  gap:7%;
}
.bento-chart span{
  display:block;
  width:14%;
  height:var(--bh);
  border-radius:999px 999px 0 0;
  background:linear-gradient(180deg,var(--mint),rgba(177,250,32,.16));
}
.bento-stat,
.bento-panel--stat{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.bento-stat strong,
.bento-panel--stat strong{
  font-family:var(--serif);
  font-size:clamp(2rem,5vw,4.8rem);
  font-weight:500;
  line-height:.9;
  color:var(--mint);
}
.bento-stat small,
.bento-panel--stat small{
  max-width:190px;
  margin-top:12px;
  font-family:var(--mono);
  font-size:clamp(.64rem,.85vw,.78rem);
  line-height:1.45;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:rgba(246,246,246,.66);
}
.bento-panel--stat{
  justify-content:center;
  padding:clamp(22px,3.4vw,48px);
  background:
    radial-gradient(circle at 80% 15%,rgba(177,250,32,.18),transparent 54%),
    linear-gradient(155deg,#111,#050505);
}
.bento-panel--wordmark{
  font-family:var(--serif);
  font-size:clamp(2rem,5vw,5rem);
  font-weight:700;
  letter-spacing:.01em;
  color:var(--ivory);
  background:linear-gradient(155deg,#111,#050505);
}
.bento-panel--wordmark span{color:var(--mint);}
.bento-panel--phrase{
  padding:clamp(24px,4vw,56px);
  justify-content:flex-start;
  text-align:left;
  font-family:var(--serif);
  font-size:clamp(2rem,5vw,5.4rem);
  font-style:italic;
  line-height:.92;
  color:var(--mint);
  background:
    radial-gradient(circle at 90% 90%,rgba(177,250,32,.12),transparent 52%),
    linear-gradient(155deg,#0c0c0c,#020202);
}
.bento-gallery__label{
  position:absolute;
  left:18px;
  bottom:16px;
  z-index:2;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(246,246,246,.78);
}
.bento-gallery--static .bento-gallery__label{
  opacity:1;
  visibility:visible;
  transform:none;
}
.case-list{max-width:var(--container);margin:0 auto;padding:0 40px;display:flex;flex-direction:column;gap:130px;}
.case-card{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center;}
.case-card.reverse{direction:rtl;}
.case-card.reverse > *{direction:ltr;}
.case-visual{aspect-ratio:4/5;position:relative;overflow:hidden;border-radius:2px;}
.case-visual-inner{position:absolute;inset:0;background-size:cover;background-position:50% 50%;transition:transform .8s var(--ease);}
.case-card:hover .case-visual-inner{transform:scale(1.05);}
.case-visual-1 .case-visual-inner{background:
  radial-gradient(circle at 30% 20%,rgba(177,250,32,.45),transparent 60%),
  linear-gradient(155deg,#1a1a1a 0%,#111 60%,#0a0a0a 100%);}
.case-visual-2 .case-visual-inner{background:
  radial-gradient(circle at 70% 30%,rgba(246,246,246,.25),transparent 55%),
  linear-gradient(155deg,#222 0%,#111 55%,#0a0a0a 100%);}
.case-visual-3 .case-visual-inner{background:
  radial-gradient(circle at 40% 70%,rgba(177,250,32,.35),transparent 60%),
  linear-gradient(155deg,#161616 0%,#0e0e0e 55%,#080808 100%);}
.case-visual-4 .case-visual-inner{background:
  radial-gradient(circle at 60% 40%,rgba(80,185,100,.4),transparent 60%),
  linear-gradient(155deg,#0e1a0e 0%,#0a140a 55%,#080808 100%);}
.case-visual-5 .case-visual-inner{background:
  radial-gradient(circle at 35% 55%,rgba(177,250,32,.3),transparent 60%),
  linear-gradient(155deg,#1a1a12 0%,#111108 55%,#0a0a04 100%);}
.latest-project-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;
}
.latest-project-card{
  display:block;text-decoration:none;color:var(--black);outline:none;
}
.latest-project-visual{
  position:relative;display:block;aspect-ratio:1.06/1;overflow:hidden;border-radius:8px;
  background:var(--black);box-shadow:0 22px 55px rgba(10,10,10,.12);
  isolation:isolate;
}
/* Legibility scrim — sits above whatever fills the visual (gradient or an
   uploaded photo) and below the title/badge text, so real photos never
   wash out the white title text the way a bright photo otherwise could. */
.latest-project-visual::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.6),transparent 55%);
}
.latest-project-visual .case-visual-inner{
  transition:transform .8s var(--ease),filter .35s var(--ease);
}
.latest-project-card:hover .case-visual-inner,.latest-project-card:focus-visible .case-visual-inner{
  transform:scale(1.05);filter:saturate(1.08);
}
.latest-project-visual--brand{
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(circle at 74% 28%,rgba(177,250,32,.22),transparent 42%),
    radial-gradient(circle at 18% 80%,rgba(246,246,246,.11),transparent 44%),
    linear-gradient(155deg,#121212 0%,#050505 68%,#020202 100%);
  background-size:cover;background-position:50% 50%;
}
/* Once a real photo is uploaded onto the brand card, the wordmark graphic
   steps aside rather than sitting on top of someone's photo. */
.latest-project-visual--brand[data-media-current-url]:not([data-media-current-url=""]) .photo-hide{display:none;}
.latest-project-wordmark{
  position:relative;z-index:2;
  font-family:var(--serif);font-size:clamp(2.8rem,6vw,6.2rem);font-weight:600;
  letter-spacing:-.03em;color:var(--ivory);line-height:1;
}
.latest-project-wordmark span{color:var(--mint);}
.latest-project-title{
  position:absolute;left:22px;bottom:20px;z-index:2;
  font-family:var(--serif);font-size:clamp(1.35rem,2.4vw,2.15rem);line-height:1;
  color:var(--ivory);text-shadow:0 12px 34px rgba(0,0,0,.45);
}
.latest-project-badge{
  position:absolute;left:50%;top:50%;z-index:3;transform:translate(-50%,-50%) scale(.9);
  opacity:0;display:inline-flex;align-items:center;justify-content:center;
  padding:10px 16px;border-radius:999px;background:var(--mint);color:var(--black-deep);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  box-shadow:0 16px 34px rgba(0,0,0,.28);
  transition:opacity .24s var(--ease),transform .24s var(--ease);
}
.latest-project-caption{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding-top:14px;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
}
.latest-project-caption span:first-child{color:var(--gray-dim);}
.latest-project-caption span:last-child{color:var(--mint);}
.latest-project-card:hover .latest-project-caption span:last-child,.latest-project-card:focus-visible .latest-project-caption span:last-child{
  color:var(--black);
}
.latest-project-card:focus-visible .latest-project-visual{
  box-shadow:0 0 0 2px var(--mint),0 22px 55px rgba(10,10,10,.12);
}
@media(hover:hover){
  .latest-project-card:hover .latest-project-badge,.latest-project-card:focus-visible .latest-project-badge{
    opacity:1;transform:translate(-50%,-50%) scale(1);
  }
}
@media(hover:none){
  .latest-project-badge{opacity:1;transform:translate(-50%,-50%) scale(1);}
}
.case-tag{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mint);margin-bottom:14px;}
.case-body h3{font-family:var(--serif);font-size:clamp(1.8rem,3vw,2.4rem);font-weight:500;margin-bottom:22px;}
.case-line{font-size:.95rem;line-height:1.6;color:var(--gray-dim);margin-bottom:12px;}
.case-line strong{color:var(--black);}
.case-metrics{display:flex;gap:34px;margin-top:28px;padding-top:24px;border-top:1px solid var(--line-soft);}
.case-metrics span{display:block;font-family:var(--serif);font-size:1.5rem;color:var(--mint);font-weight:500;}
.case-metrics small{font-size:.75rem;color:var(--gray-dim);text-transform:uppercase;letter-spacing:.06em;}
.work-cta{text-align:center;margin-top:110px;}
.latest-projects .work-cta{margin-top:54px;}

@media(max-width:900px){
  .gallery-wrap{
    height:auto;
    min-height:0;
    padding:110px 20px 80px;
    overflow:visible;
  }
  .gallery,
  .gallery--bento,
  .gallery--final.gallery--bento{
    width:min(100%,720px);
    height:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:none;
    gap:10px;
    justify-content:stretch;
    align-content:start;
  }
  .gallery--bento .gallery__item,
  .gallery--final.gallery--bento .gallery__item{
    grid-area:auto!important;
    min-height:180px;
  }
  .gallery--bento .gallery__item:nth-child(1),
  .gallery--bento .gallery__item:nth-child(4),
  .gallery--bento .gallery__item:nth-child(8){
    grid-column:span 2;
    min-height:260px;
  }
  .gallery-caption{
    opacity:1;
    visibility:visible;
    transform:none;
  }
  .gallery-icon strong{font-size:1.35rem;}
  .bento-gallery-wrap{
    height:auto;
    min-height:0;
    padding:90px 20px;
    overflow:visible;
  }
  .bento-gallery,
  .bento-gallery--grid,
  .bento-gallery--final.bento-gallery--grid{
    width:min(100%,720px);
    height:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:none;
    gap:10px;
    justify-content:stretch;
    align-content:start;
  }
  .bento-gallery--grid .bento-gallery__item,
  .bento-gallery--final.bento-gallery--grid .bento-gallery__item{
    grid-area:auto !important;
    min-height:180px;
  }
  .bento-gallery--grid .bento-gallery__item:nth-child(1),
  .bento-gallery--grid .bento-gallery__item:nth-child(4),
  .bento-gallery--grid .bento-gallery__item:nth-child(8){
    grid-column:span 2;
    min-height:260px;
  }
  .bento-gallery__label{
    opacity:1;
    visibility:visible;
    transform:none;
  }
  .latest-project-grid{grid-template-columns:1fr;gap:28px;}
  .case-card,.case-card.reverse{grid-template-columns:1fr;direction:ltr;}
  .case-list{gap:80px;}
}

@media(max-width:560px){
  .gallery,
  .gallery--bento,
  .gallery--final.gallery--bento{
    grid-template-columns:1fr;
  }
  .gallery--bento .gallery__item:nth-child(1),
  .gallery--bento .gallery__item:nth-child(4),
  .gallery--bento .gallery__item:nth-child(8){
    grid-column:auto;
  }
  .bento-gallery,
  .bento-gallery--grid,
  .bento-gallery--final.bento-gallery--grid{
    grid-template-columns:1fr;
  }
  .bento-gallery--grid .bento-gallery__item:nth-child(1),
  .bento-gallery--grid .bento-gallery__item:nth-child(4),
  .bento-gallery--grid .bento-gallery__item:nth-child(8){
    grid-column:auto;
  }
}

@media(prefers-reduced-motion:reduce){
  .gallery-wrap{
    height:auto;
    min-height:0;
    padding:110px 20px;
    overflow:visible;
  }
  .gallery-caption{
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
  }
  .bento-gallery-wrap{
    height:auto;
    min-height:0;
    padding:110px 20px;
    overflow:visible;
  }
  .bento-gallery__label{
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
  }
}

/* Work page filter */
.work-filter{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:60px;}
.work-filter-btn{
  padding:10px 22px;border:1px solid var(--line-soft);border-radius:100px;
  font-size:.78rem;font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em;
  transition:all .3s;cursor:none;background:transparent;color:var(--black);
}
.work-filter-btn:hover,.work-filter-btn.active{background:var(--mint);border-color:var(--mint);color:var(--black);}
.work-empty{
  display:none;max-width:var(--container);margin:0 auto;padding:30px 40px 0;
  color:var(--gray-dim);font-size:.95rem;
}
.work-empty.show{display:block;}

/* ================= ABOUT ================= */
.about{background:var(--black);color:var(--ivory);}
.about .eyebrow{color:var(--mint);}
.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;}
.about-left .h2{color:var(--ivory);}
.about-p{font-size:1.05rem;line-height:1.7;color:rgba(246,246,246,.75);margin-bottom:24px;}
.about-values{display:flex;flex-wrap:wrap;gap:14px;margin-top:20px;}
.about-values span{
  font-family:var(--mono);font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;
  border:1px solid rgba(246,246,246,.2);padding:9px 16px;border-radius:100px;color:rgba(246,246,246,.85);
}

@media(max-width:900px){.about-grid{grid-template-columns:1fr;gap:44px;}}

/* About page full */
.about-page-section{padding:80px 0;border-bottom:1px solid var(--line-soft);}
.about-page-section:last-child{border-bottom:none;}
.about-narrative{max-width:760px;}
.about-narrative h2{font-family:var(--serif);font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:500;margin-bottom:30px;line-height:1.1;}
.about-narrative p{font-size:1.05rem;line-height:1.75;color:var(--gray-dim);margin-bottom:22px;}

.values-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);margin-top:60px;
}
.value-item{background:var(--ivory);padding:36px 30px;transition:background .3s;background-position:50% 50%;background-size:cover;}
.value-item:hover{background-color:var(--white);}
.value-num{font-family:var(--mono);font-size:.72rem;color:var(--mint);letter-spacing:.1em;display:block;margin-bottom:12px;}
.value-item h3{font-family:var(--serif);font-size:1.25rem;font-weight:500;margin-bottom:10px;}
.value-item p{font-size:.92rem;color:var(--gray-dim);line-height:1.55;}
.value-item[data-media-current-url]:not([data-media-current-url=""]){background-color:rgba(10,10,10,.7);background-blend-mode:darken;}
.value-item[data-media-current-url]:not([data-media-current-url=""]) h3{color:#f6f6f6;}
.value-item[data-media-current-url]:not([data-media-current-url=""]) p{color:rgba(246,246,246,.75);}

/* ================= TESTIMONIALS ================= */
.testimonials{padding-bottom:110px;}
.testi-marquee{overflow:hidden;padding:10px 0;}
.testi-track{display:flex;gap:24px;width:max-content;animation:testiScroll 42s linear infinite;}
.testi-track:hover{animation-play-state:paused;}
.testi-card{
  width:400px;flex-shrink:0;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.5);
  border-radius:14px;
  padding:36px 32px;background-position:50% 50%;background-size:cover;
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  box-shadow:0 12px 40px rgba(17,17,17,.06),inset 0 1px 0 rgba(255,255,255,.7);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.testi-card p{font-family:var(--serif);font-size:1.15rem;line-height:1.55;margin-bottom:20px;font-weight:400;}
.testi-card span{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--gray-dim);}
.testi-card[data-media-current-url]:not([data-media-current-url=""]){background-color:rgba(10,10,10,.72);background-blend-mode:darken;}
.testi-card[data-media-current-url]:not([data-media-current-url=""]) p{color:#f6f6f6;}
.testi-card[data-media-current-url]:not([data-media-current-url=""]) span{color:rgba(246,246,246,.72);}
@keyframes testiScroll{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}

/* ================= FAQ ================= */
.faq-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:80px;}
.faq-left .h2{position:sticky;top:140px;}
.faq-item{border-bottom:1px solid var(--line-soft);}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:28px 0;text-align:left;font-family:var(--serif);font-size:1.15rem;font-weight:500;
}
.faq-icon{font-family:var(--mono);font-size:1.2rem;color:var(--mint);transition:transform .35s var(--ease);}
.faq-item.open .faq-icon{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .45s var(--ease);}
.faq-a p{padding-bottom:26px;color:var(--gray-dim);font-size:.95rem;line-height:1.6;max-width:560px;}

/* FAQ page categories */
.faq-category{margin-bottom:70px;}
.faq-category-title{
  font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--mint);margin-bottom:24px;padding-bottom:12px;border-bottom:2px solid var(--mint);display:inline-block;
}

@media(max-width:900px){
  .faq-grid{grid-template-columns:1fr;gap:30px;}
  .faq-left .h2{position:static;}
}

/* ================= FINAL CTA ================= */
.final-cta{
  background:var(--black);color:var(--ivory);text-align:center;padding:180px 0;
  position:relative;overflow:hidden;
}
#ctaCanvas{position:absolute;inset:0;width:100%;height:100%;opacity:.5;}
.final-cta-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;}
.final-cta .eyebrow{justify-content:center;color:var(--mint);}
.final-headline{font-family:var(--serif);font-weight:500;font-size:clamp(2.4rem,5.6vw,4.4rem);line-height:1.08;letter-spacing:-.01em;margin-bottom:26px;}
.final-sub{color:rgba(246,246,246,.65);font-size:1.05rem;margin-bottom:44px;}
.final-cta .btn-ghost{border-color:rgba(246,246,246,.3);color:var(--ivory);}
.final-cta .btn-ghost::before{background:var(--mint);}
.final-cta .btn-ghost:hover{color:var(--black-deep);border-color:var(--mint);}

/* ================= FOOTER ================= */
.footer{
  background:var(--black-deep);
  color:var(--ivory);padding:90px 0 30px;
  position:relative;
}
.footer-top{display:grid;grid-template-columns:1.3fr .75fr .75fr .75fr .75fr;gap:40px;padding-bottom:70px;border-bottom:1px solid rgba(246,246,246,.1);}
.footer-brand p{color:rgba(246,246,246,.5);margin-top:14px;font-family:var(--serif);font-style:italic;}
.footer-object{
  width:128px;
  height:128px;
  margin-top:28px;
  opacity:.82;
  position:relative;
}
.footer-object-3d{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  --poster-color:transparent;
}
.footer-object-3d:not([src]),.footer-object-3d[src=""]{display:none;}
.footer-object-3d[src]:not([src=""]) ~ .brand-object-canvas{display:none;}
.footer-col h5{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--mint);margin-bottom:18px;text-align:center;}
.footer-col-links{width:fit-content;max-width:100%;margin:0 auto;}
.footer-col a{display:block;color:rgba(246,246,246,.65);font-size:.92rem;margin-bottom:12px;transition:color .25s;text-align:left;}
.footer-col a:hover{color:var(--mint);}
.footer-bottom{display:flex;justify-content:space-between;padding-top:28px;font-size:.78rem;color:rgba(246,246,246,.4);font-family:var(--mono);}
.footer-credit{text-align:center;padding-top:16px;font-size:.72rem;color:rgba(246,246,246,.3);font-family:var(--mono);}

.footer-social{display:flex;gap:12px;padding-top:32px;}
.footer-social a{width:40px;height:40px;border-radius:50%;border:1px solid rgba(246,246,246,.18);display:flex;align-items:center;justify-content:center;color:rgba(246,246,246,.7);transition:border-color .25s,color .25s,background .25s;flex:0 0 auto;}
.footer-social a:hover{border-color:var(--mint);color:var(--mint);background:rgba(177,250,32,.06);}
.footer-social svg{width:18px;height:18px;}

@media(max-width:800px){
  .footer-top{grid-template-columns:1fr 1fr;row-gap:44px;}
  .footer-brand{grid-column:1/-1;}
  .footer-bottom{flex-direction:column;gap:10px;}
  .footer-social{padding-top:24px;flex-wrap:wrap;}
}

/* "Follow Us" section (about.html only) — larger, labeled variant of the
   same round social icons used in the footer. */
.follow-us{text-align:center;}
.follow-us-grid{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;margin-top:36px;}
.follow-us-item{display:flex;flex-direction:column;align-items:center;gap:10px;color:rgba(246,246,246,.7);transition:color .25s;}
.follow-us-item:hover{color:var(--mint);}
.follow-us-icon{width:56px;height:56px;border-radius:50%;border:1px solid rgba(246,246,246,.18);display:flex;align-items:center;justify-content:center;transition:border-color .25s,background .25s;}
.follow-us-item:hover .follow-us-icon{border-color:var(--mint);background:rgba(177,250,32,.06);}
.follow-us-icon svg{width:24px;height:24px;}
.follow-us-item span{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;}

/* ================= SERVICES PAGE ================= */
.services-layout{
  display:grid;grid-template-columns:220px 1fr;gap:80px;align-items:start;
}
.services-sidenav{position:sticky;top:120px;}
.services-sidenav a{
  display:block;padding:12px 0 12px 16px;font-size:.84rem;color:var(--gray-dim);
  border-left:2px solid var(--line-soft);transition:color .3s,border-color .3s;
}
.services-sidenav a:hover,.services-sidenav a.active{color:var(--mint);border-color:var(--mint);}
.service-section{padding:70px 0;border-bottom:1px solid var(--line-soft);}
.service-section:first-child{padding-top:0;}
.service-section:last-child{border-bottom:none;}
.service-section-tag{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--mint);margin-bottom:16px;}
.service-section-title{font-family:var(--serif);font-size:clamp(1.8rem,3vw,2.4rem);font-weight:500;margin-bottom:18px;}
.service-section-intro{font-size:1rem;line-height:1.7;color:var(--gray-dim);max-width:640px;margin-bottom:40px;}
.service-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;}
.service-detail-item h4{
  font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--mint);margin-bottom:10px;
}
.service-detail-item p,.service-detail-item ul{font-size:.9rem;line-height:1.65;color:var(--gray-dim);}
.service-detail-item ul{list-style:none;padding:0;}
.service-detail-item ul li{padding:5px 0;padding-left:16px;position:relative;}
.service-detail-item ul li::before{content:'→';color:var(--mint);font-family:var(--mono);position:absolute;left:0;}
.service-timeline{
  display:inline-flex;align-items:center;gap:10px;
  border:1px solid var(--line-soft);padding:10px 18px;border-radius:100px;
  font-family:var(--mono);font-size:.78rem;color:var(--gray-dim);margin-top:24px;
}
.service-timeline::before{content:'⏱';font-size:.9rem;}

/* Services directory */
.service-directory-section{background:var(--ivory);}
.service-directory{
  display:grid;
  grid-template-columns:minmax(230px,280px) 1fr;
  gap:1px;
  background:var(--line-soft);
  border:1px solid var(--line-soft);
  overflow:hidden;
}
.service-directory-tabs{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:12px;
  background:var(--black);
}
.service-directory-tab{
  display:grid;
  grid-template-columns:34px 1fr;
  gap:12px;
  align-items:center;
  width:100%;
  min-height:56px;
  padding:14px 16px;
  color:rgba(246,246,246,.66);
  font-size:.88rem;
  font-weight:600;
  line-height:1.25;
  text-align:left;
  transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease);
}
.service-directory-tab span{
  font-family:var(--mono);
  font-size:.68rem;
  color:var(--mint);
  transition:color .25s var(--ease);
}
.service-directory-tab:hover,
.service-directory-tab:focus-visible{color:var(--ivory);background:rgba(246,246,246,.08);}
.service-directory-tab.active{
  background:var(--mint);
  color:var(--black);
}
.service-directory-tab.active span{color:var(--black);}
.service-directory-panels{
  min-height:520px;
  padding:clamp(30px,5vw,64px);
  background:var(--ivory);
}
.service-directory-panel{display:none;}
.service-directory-panel.active{display:block;}
.service-directory-kicker{
  font-family:var(--mono);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--mint);
  margin-bottom:14px;
}
.service-directory-panel h2{
  font-family:var(--serif);
  font-size:clamp(2rem,4vw,3.4rem);
  font-weight:500;
  line-height:1.02;
  margin-bottom:30px;
}
.service-directory-list{
  display:grid;
  gap:10px;
}
.service-directory-link,
.related-service-card{
  display:grid;
  grid-template-columns:36px 1fr;
  gap:16px;
  align-items:start;
  padding:18px;
  border:1px solid var(--line-soft);
  background:rgba(255,255,255,.45);
  color:var(--black);
  transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
}
.service-directory-link .mega-icon,
.related-service-card .mega-icon{
  width:28px;
  height:28px;
  padding:0;
  background:none;
  border:none;
  border-radius:0;
  color:var(--mint);
  stroke-width:1.8;
}
.service-directory-link strong,
.related-service-card strong{
  display:block;
  font-size:1rem;
  line-height:1.25;
  margin-bottom:6px;
}
.service-directory-link small,
.related-service-card small{
  display:block;
  max-width:620px;
  color:var(--gray-dim);
  font-size:.86rem;
  line-height:1.55;
}
.service-directory-link:hover,
.service-directory-link:focus-visible,
.related-service-card:hover,
.related-service-card:focus-visible{
  background:var(--white);
  border-color:rgba(177,250,32,.7);
  transform:translateY(-2px);
}

/* Individual service pages */
.service-page-hero{
  padding:170px 0 96px;
  background:var(--black);
  color:var(--ivory);
  position:relative;
  overflow:hidden;
}
.service-page-hero::after{
  content:'';
  position:absolute;
  inset:auto 0 0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(177,250,32,.55),transparent);
}
.service-page-hero-inner{position:relative;z-index:1;}
.service-back-link{
  display:inline-flex;
  margin-bottom:34px;
  font-family:var(--mono);
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--mint);
}
.service-page-title{
  max-width:980px;
  font-family:var(--serif);
  font-size:clamp(3rem,7vw,7rem);
  font-weight:500;
  line-height:.95;
  margin:18px 0 28px;
}
.service-page-sub{
  max-width:760px;
  color:rgba(246,246,246,.68);
  font-size:clamp(1rem,1.4vw,1.16rem);
  line-height:1.75;
}
.service-detail-page{background:var(--ivory);}
.service-detail-page .service-section--single{
  padding-top:0;
  border-bottom:none;
}
.service-detail-page .service-section-title{font-size:clamp(2rem,4vw,3.1rem);}
.service-detail-page .service-detail-grid{gap:22px;}
.service-detail-page .service-detail-item{
  padding:24px;
  border:1px solid var(--line-soft);
  background:rgba(255,255,255,.5);
}
.related-services-section{background:var(--white);}
.related-services-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

@media(max-width:860px){
  .services-layout{grid-template-columns:1fr;}
  .services-sidenav{display:none;}
  .service-directory{grid-template-columns:1fr;}
  .service-directory-tabs{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .service-directory-panels{min-height:0;}
  .service-page-hero{padding:140px 0 72px;}
  .service-detail-grid{grid-template-columns:1fr;}
  .related-services-grid{grid-template-columns:1fr;}
}

@media(max-width:560px){
  .service-directory-tabs{grid-template-columns:1fr;}
  .service-directory-tab{min-height:52px;}
  .service-directory-link,
  .related-service-card{grid-template-columns:30px 1fr;padding:16px;}
  .service-page-title{font-size:clamp(2.6rem,16vw,4.1rem);}
}

/* ================= SHOPIFY PAGE ================= */
.shopify-lead{
  display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;margin-bottom:100px;
}
.shopify-lead-text h2{font-family:var(--serif);font-size:clamp(2rem,4vw,3rem);font-weight:500;line-height:1.1;margin-bottom:24px;}
.shopify-lead-text p{font-size:1rem;line-height:1.7;color:var(--gray-dim);margin-bottom:16px;}
.shopify-visual{
  aspect-ratio:1;background:var(--black);position:relative;overflow:hidden;border-radius:2px;
  cursor:none;
}
.shopify-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;}
.shopify-visual::after{
  content:'';
  position:absolute;inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%,transparent 0%,rgba(10,10,10,.38) 72%),
    linear-gradient(135deg,rgba(177,250,32,.12),transparent 44%);
}

.shopify-pillars{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);margin-bottom:100px;
}
.shopify-pillar{background:var(--ivory);padding:40px 32px;transition:background .3s;background-position:50% 50%;background-size:cover;}
.shopify-pillar:hover{background-color:var(--white);}
.shopify-pillar-num{font-family:var(--mono);font-size:.72rem;color:var(--mint);letter-spacing:.1em;display:block;margin-bottom:16px;}
.shopify-pillar h3{font-family:var(--serif);font-size:1.25rem;font-weight:500;margin-bottom:12px;}
.shopify-pillar p{font-size:.9rem;line-height:1.6;color:var(--gray-dim);}
.shopify-pillar[data-media-current-url]:not([data-media-current-url=""]){background-color:rgba(10,10,10,.7);background-blend-mode:darken;}
.shopify-pillar[data-media-current-url]:not([data-media-current-url=""]) h3{color:#f6f6f6;}
.shopify-pillar[data-media-current-url]:not([data-media-current-url=""]) p{color:rgba(246,246,246,.75);}

.shopify-process{margin-bottom:100px;}
.shopify-process h2{font-family:var(--serif);font-size:clamp(1.8rem,3vw,2.6rem);font-weight:500;margin-bottom:50px;}
.shopify-process-steps{display:flex;flex-direction:column;gap:0;}
.shopify-process-step{
  display:grid;grid-template-columns:60px 1fr;gap:32px;
  padding:30px 0;border-bottom:1px solid var(--line-soft);align-items:start;
}
.shopify-step-num{font-family:var(--mono);font-size:1.8rem;color:var(--mint);font-weight:500;}
.shopify-step-content h4{font-family:var(--serif);font-size:1.15rem;font-weight:500;margin-bottom:8px;}
.shopify-step-content p{font-size:.9rem;color:var(--gray-dim);line-height:1.6;}

.shopify-integrations{margin-bottom:60px;}
.shopify-integrations h2{font-family:var(--serif);font-size:clamp(1.8rem,3vw,2.6rem);font-weight:500;margin-bottom:14px;}
.shopify-integrations-sub{font-size:1rem;color:var(--gray-dim);margin-bottom:44px;}
.integrations-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);
}
.integration-item{
  background:var(--ivory);padding:28px 20px;text-align:center;
  font-family:var(--mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--gray-dim);transition:background .3s,color .3s;
}
.integration-item:hover{background:var(--mint);color:var(--black);}

@media(max-width:860px){
  .shopify-lead{grid-template-columns:1fr;}
  .shopify-visual{
    width:min(100%,420px);
    margin:0 auto;
  }
}

/* ================= PROCESS PAGE ================= */
.process-timeline{max-width:860px;}
.process-stage{
  display:grid;grid-template-columns:100px 1fr;gap:40px;
  padding:70px 0;border-bottom:1px solid var(--line-soft);
}
.process-stage:first-child{padding-top:0;}
.process-stage:last-child{border-bottom:none;}
.process-stage-num{font-family:var(--mono);font-size:3rem;color:var(--mint);font-weight:500;line-height:1;}
.process-stage-content h3{font-family:var(--serif);font-size:clamp(1.5rem,2.5vw,2rem);font-weight:500;margin-bottom:14px;}
.process-stage-content > p{font-size:1rem;color:var(--gray-dim);line-height:1.7;margin-bottom:22px;}
.process-stage-bullets{list-style:none;padding:0;}
.process-stage-bullets li{
  font-size:.9rem;color:var(--gray-dim);padding:7px 0 7px 22px;
  position:relative;line-height:1.55;
}
.process-stage-bullets li::before{content:'→';color:var(--mint);font-family:var(--mono);position:absolute;left:0;}

@media(max-width:700px){
  .process-stage{grid-template-columns:1fr;}
  .process-stage-num{font-size:2rem;}
}

/* ================= PRICING PAGE ================= */
.pricing-category{margin-bottom:100px;}
.pricing-category-title{font-family:var(--serif);font-size:clamp(1.6rem,2.8vw,2.2rem);font-weight:500;margin-bottom:10px;}
.pricing-category-sub{font-size:.95rem;color:var(--gray-dim);margin-bottom:44px;}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.pricing-card{
  border:1px solid var(--line-soft);padding:44px 36px;position:relative;
  transition:border-color .3s,transform .3s;
  background:rgba(10,11,9,.86);
}
.pricing-card:hover{border-color:var(--mint);transform:translateY(-4px);}
.pricing-card.featured{border-color:var(--mint);background:var(--black);color:var(--ivory);}
.pricing-card.featured .pricing-note{color:rgba(246,246,246,.55);}
.pricing-card.featured .pricing-features li{border-color:rgba(246,246,246,.1);}
.pricing-card.featured .pricing-features li{color:rgba(246,246,246,.8);}
.pricing-tier{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--mint);margin-bottom:16px;}
.pricing-price{font-family:var(--serif);font-size:2.2rem;font-weight:500;margin-bottom:8px;}
.pricing-note{font-size:.82rem;color:var(--gray-dim);margin-bottom:32px;line-height:1.5;}
.pricing-features{list-style:none;padding:0;margin-bottom:36px;}
.pricing-features li{
  padding:11px 0;border-bottom:1px solid var(--line-soft);
  font-size:.9rem;display:flex;gap:10px;align-items:flex-start;
}
.pricing-features li::before{content:'✓';color:var(--mint);font-weight:700;flex-shrink:0;}
.pricing-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--mint);color:var(--black-deep);font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.06em;padding:5px 14px;border-radius:100px;white-space:nowrap;}
.pricing-price .currency{font-family:var(--mono);font-size:.85rem;font-weight:400;margin-left:6px;color:var(--gray-dim);}
.pricing-card.featured .pricing-price .currency{color:rgba(246,246,246,.5);}
.pricing-category-page{margin-bottom:100px;}

.pricing-addons-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.pricing-addon-col{
  border:1px solid var(--line-soft);padding:32px 28px;
  background:rgba(10,11,9,.86);
}
.pricing-addon-col h4{font-family:var(--serif);font-size:1.05rem;font-weight:600;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--line-soft);}
.pricing-addon-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 0;border-bottom:1px solid var(--line-soft);font-size:.86rem;}
.pricing-addon-row:last-child{border-bottom:none;}
.pricing-addon-name{color:rgba(246,246,246,.75);}
.pricing-addon-price{font-family:var(--mono);color:var(--mint);white-space:nowrap;flex-shrink:0;}

.pricing-grid--4up{grid-template-columns:repeat(4,1fr);}
.pricing-grid--2up{grid-template-columns:repeat(2,1fr);}

.pricing-card.reveal-up,.pricing-addon-col.reveal-up{transition-delay:calc(var(--card-index,0) * 90ms);}

.pricing-note-box{max-width:820px;border:1px solid var(--line-soft);padding:44px 40px;}
.pricing-note-box.featured-box{border-color:var(--mint);}
.pricing-note-box p{font-size:1rem;line-height:1.75;color:var(--gray-dim);margin-bottom:14px;}
.pricing-note-box p:last-child{margin-bottom:0;}
.pricing-note-box.is-quote p{font-style:italic;}

.pricing-note-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start;}
.pricing-note-grid .pricing-note-box{max-width:none;height:100%;padding:36px 32px;}
.pricing-note-grid .pricing-note-box h2{font-size:clamp(1.1rem,1.7vw,1.4rem)!important;margin-bottom:16px!important;}
.pricing-note-grid .pricing-note-box p{font-size:.9rem;line-height:1.6;}
.pricing-note-grid .pricing-plain-list li{font-size:.86rem;}

.pricing-plain-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 32px;}
.pricing-plain-list li{position:relative;padding-left:20px;padding-bottom:10px;color:rgba(246,246,246,.72);font-size:.9rem;line-height:1.6;}
.pricing-plain-list li::before{content:'—';position:absolute;left:0;color:var(--gray-dim);}
.pricing-note-grid .pricing-plain-list{grid-template-columns:1fr;}

.pricing-numbered-list{list-style:none;counter-reset:imglist;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:16px 32px;}
.pricing-numbered-list li{position:relative;padding-left:36px;counter-increment:imglist;font-size:.92rem;color:rgba(246,246,246,.8);line-height:1.5;}
.pricing-numbered-list li::before{content:counter(imglist);position:absolute;left:0;top:-3px;width:24px;height:24px;border:1px solid var(--mint);color:var(--mint);border-radius:50%;font-family:var(--mono);font-size:.72rem;display:flex;align-items:center;justify-content:center;}

@media(max-width:1100px){.pricing-grid--4up{grid-template-columns:1fr 1fr;}}
@media(max-width:860px){.pricing-grid{grid-template-columns:1fr;} .pricing-grid--2up{grid-template-columns:1fr;} .pricing-addons-grid{grid-template-columns:1fr;} .pricing-plain-list{grid-template-columns:1fr;} .pricing-numbered-list{grid-template-columns:1fr;} .pricing-note-grid{grid-template-columns:1fr;} }
@media(min-width:600px) and (max-width:860px){.pricing-grid{grid-template-columns:1fr 1fr;}}

/* ================= CONTACT PAGE ================= */
.contact-layout{display:grid;grid-template-columns:1fr 1.5fr;gap:100px;align-items:start;}
.contact-info-block{position:sticky;top:120px;}
.contact-info-item{margin-bottom:44px;}
.contact-info-item h4{
  font-family:var(--mono);font-size:.72rem;text-transform:uppercase;
  letter-spacing:.1em;color:var(--mint);margin-bottom:10px;
}
.contact-info-item p,.contact-info-item a{font-size:1rem;color:var(--gray-dim);line-height:1.6;}
.contact-info-item a:hover{color:var(--mint);}
.whatsapp-btn{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--black);color:var(--ivory);padding:14px 28px;border-radius:100px;
  font-size:.9rem;font-weight:600;margin-top:10px;transition:background .3s;
}
.whatsapp-btn:hover{background:var(--mint);color:var(--black);}
.calendly-placeholder{
  border:1px dashed rgba(17,17,17,.2);padding:50px 36px;text-align:center;
  margin-top:60px;color:var(--gray-dim);font-size:.9rem;line-height:1.6;
}
.calendly-placeholder strong{display:block;font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--mint);margin-bottom:10px;}

.contact-form{display:flex;flex-direction:column;gap:24px;}
.form-group{display:flex;flex-direction:column;gap:8px;}
.form-group label{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--gray-dim);}
.form-group input,.form-group select,.form-group textarea{
  background:transparent;border:1px solid var(--line-soft);padding:16px 20px;
  font-family:var(--sans);font-size:.95rem;color:var(--ivory);
  transition:border-color .3s;border-radius:0;-webkit-appearance:none;appearance:none;width:100%;
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
  outline:none;border-color:var(--mint);
}
.form-group select option{color:#111;background:#fff;}
.form-group textarea{resize:vertical;min-height:130px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.form-success{
  display:none;text-align:center;padding:60px 40px;border:1px solid var(--mint);
}
.form-success.show{display:block;}
.form-success h3{font-family:var(--serif);font-size:1.8rem;margin-bottom:12px;}
.form-success p{color:var(--gray-dim);}

@media(max-width:860px){
  .contact-layout{grid-template-columns:1fr;}
  .contact-info-block{position:static;}
  .form-row{grid-template-columns:1fr;}
}

/* ===================================================================
   HERO STACK-DECK — scroll scatter (index.html only)
   =================================================================== */

/* Desktop: push hero text left to leave room for the deck */
@media(min-width:900px){
  .hero--has-deck .hero-content{
    padding-right:clamp(300px,36vw,500px);
  }
}

/* ---- Deck container ---- */
.stack-deck{
  position:absolute;
  right:clamp(28px,6.5vw,96px);
  top:42%;
  transform:translateY(-50%);
  width:284px;
  height:374px;
  z-index:3;
  pointer-events:none; /* cards don't block hero interactions */
}

/* ---- Floating badge (inside deck, floats above it) ---- */
.stack-badge{
  position:absolute;
  bottom:calc(100% + 14px); /* 14 px above deck top edge */
  left:50%;
  transform:translateX(-50%);
  white-space:nowrap;
  background:rgba(246,246,246,.92);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-radius:100px;
  padding:8px 16px;
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.06em;
  color:var(--black-deep);
  display:flex;
  align-items:center;
  gap:8px;
  animation:badgeFloat 3.5s ease-in-out infinite;
}
.stack-badge-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--mint);
  flex-shrink:0;
  animation:badgePulse 2.2s ease-in-out infinite;
}
@keyframes badgeFloat{
  0%,100%{transform:translateX(-50%) translateY(0);}
  50%     {transform:translateX(-50%) translateY(-5px);}
}
@keyframes badgePulse{
  0%,100%{opacity:1;transform:scale(1);}
  50%     {opacity:.4;transform:scale(.65);}
}

/* ---- Base card ---- */
.stack-card{
  position:absolute;
  top:0;left:0;
  width:280px;
  height:370px;
  border-radius:16px;
  background:linear-gradient(145deg,#1b1b1b 0%,#0a0a0a 100%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:
    0 8px 32px rgba(0,0,0,.75),
    0 32px 80px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.07);
  padding:22px 20px 18px;
  overflow:hidden;
  will-change:transform,opacity;
}

/* ---- Optional photo layer (Brand Identity / Packaging / Growth cards) ----
   Transparent by default so the drawn icon/mockup shows as before; once an
   admin sets a real image, it covers the card and the decorative art
   (.sc-photo-hide) steps aside. */
.sc-card-photo{
  position:absolute;inset:0;
  background-position:50% 50%;
  background-repeat:no-repeat;
  border-radius:inherit;
  pointer-events:none;
}
.sc-card-photo[data-media-current-url]:not([data-media-current-url=""]){
  background-size:cover;
}
.sc-card-photo[data-media-current-url]:not([data-media-current-url=""])::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.5) 45%,rgba(0,0,0,.78) 100%);
}
.stack-card:has(> .sc-card-photo[data-media-current-url]:not([data-media-current-url=""])) .sc-photo-hide{
  display:none;
}

/* shared bottom label on all cards */
.sc-card-label{
  position:absolute;
  bottom:16px;right:18px;
  font-family:var(--mono);
  font-size:.62rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:rgba(177,250,32,.55);
}

/* ---- Card 1: Shopify Store ---- */
.sc-browser-bar{
  display:flex;align-items:center;gap:6px;
  margin-bottom:14px;
}
.sc-dot{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;
}
.sc-dot--red  {background:#FF5F57;}
.sc-dot--amber{background:#FEBC2E;}
.sc-dot--green{background:#28C840;}

.sc-product-img{
  width:100%;height:150px;
  border-radius:8px;
  background:
    radial-gradient(circle at 38% 34%,rgba(177,250,32,.6) 0%,transparent 55%),
    radial-gradient(circle at 72% 68%,rgba(80,185,100,.35) 0%,transparent 50%),
    linear-gradient(145deg,#161616 0%,#0a0a0a 100%);
  background-position:50% 50%;
  margin-bottom:14px;
}
.sc-product-img[data-media-current-url]:not([data-media-current-url=""]){background-size:cover;}
.sc-product-body{display:flex;flex-direction:column;gap:4px;}
.sc-product-name{
  font-family:var(--serif);font-size:.9rem;font-weight:500;
  color:rgba(246,246,246,.9);
}
.sc-product-price{
  font-family:var(--mono);font-size:.76rem;
  color:rgba(246,246,246,.5);
  margin-bottom:10px;
}
.sc-atc-btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--mint);color:var(--black-deep);
  font-family:var(--sans);font-size:.7rem;font-weight:700;
  border-radius:100px;padding:7px 18px;letter-spacing:.04em;
  width:fit-content;
}

/* ---- Card 2: Brand Identity (flex-centered) ---- */
.sc-card-brand{
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;gap:14px;
}
.sc-brand-mark{
  width:105px;height:105px;border-radius:50%;
  background:#0e0e0e;
  border:1px solid rgba(177,250,32,.22);
  display:flex;align-items:center;justify-content:center;
}
.sc-brand-mark svg{width:82px;height:82px;}
.sc-brand-name{
  position:relative; /* stack above the absolutely-positioned .sc-card-photo */
  font-family:var(--serif);font-size:.88rem;font-weight:500;
  color:rgba(246,246,246,.85);
}
.sc-swatches{display:flex;gap:8px;align-items:center;justify-content:center;}
.sc-swatch{
  width:22px;height:22px;border-radius:50%;display:block;flex-shrink:0;
  border:1px solid rgba(255,255,255,.18);
}

/* ---- Card 3: Packaging (flex-centered) ---- */
.sc-card-pkg{
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
}
.sc-pkg-scene{
  position:relative;
  width:154px;height:189px;
  margin:0 auto;
}
.sc-pkg-front-face{
  position:absolute;left:0;top:26px;
  width:117px;height:163px;
  background:linear-gradient(145deg,#1e1e1e,#0c0c0c);
  border:1px solid rgba(177,250,32,.22);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:5px;
}
.sc-pkg-wordmark{
  font-family:var(--serif);font-size:.86rem;font-weight:600;
  color:rgba(246,246,246,.9);letter-spacing:.07em;
}
.sc-pkg-sub{
  font-family:var(--mono);font-size:.6rem;
  color:rgba(177,250,32,.7);
  text-transform:uppercase;letter-spacing:.08em;
  text-align:center;
}
.sc-pkg-side-face{
  position:absolute;top:35px;left:117px;
  width:37px;height:154px;
  background:linear-gradient(180deg,#141414,#060606);
  border-right:1px solid rgba(177,250,32,.12);
  clip-path:polygon(0 0,100% 8px,100% calc(100% + 8px),0% 100%);
}
.sc-pkg-top-face{
  position:absolute;top:0;left:0;
  width:154px;height:33px;
  background:linear-gradient(90deg,#242424,#181818);
  clip-path:polygon(0% 100%,37px 0%,154px 0%,117px 100%);
}

/* ---- Card 4: Growth (normal flow) ---- */
.sc-card-growth{display:flex;flex-direction:column;}
.sc-growth-eyebrow{
  position:relative; /* stack above the absolutely-positioned .sc-card-photo */
  font-family:var(--mono);font-size:.68rem;
  text-transform:uppercase;letter-spacing:.1em;
  color:var(--mint);margin-bottom:14px;
}
.sc-chart{
  display:flex;align-items:flex-end;gap:7px;
  height:112px;width:100%;margin-bottom:16px;padding:0 2px;
  flex:none;
}
.sc-bar{
  flex:1;
  height:var(--bh);
  background:linear-gradient(to top,rgba(20,42,8,.9) 0%,var(--mint) 100%);
  border-radius:3px 3px 0 0;
}
.sc-stat-block{
  position:relative; /* stack above the absolutely-positioned .sc-card-photo */
  display:flex;flex-direction:column;gap:3px;
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:12px;
}
.sc-stat-num{
  font-family:var(--serif);font-size:2rem;font-weight:500;
  color:var(--mint);line-height:1;
}
.sc-stat-lbl{
  font-family:var(--mono);font-size:.64rem;
  text-transform:uppercase;letter-spacing:.08em;
  color:rgba(246,246,246,.42);
}

/* ---- Mobile: static stack, no pin ---- */
@media(max-width:899px){
  .stack-deck{
    position:relative;
    right:auto;top:auto;
    transform:none;
    margin:48px auto 0;
    /* use a tighter container so the fan is visible */
    width:260px;height:350px;
  }
  .stack-badge{display:none;}
}

/* ================= Landing grid — where the traveling hero cards dock ================= */
.landing-grid{padding-top:20px;}
.landing-grid-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  max-width:940px;
  margin:0 auto;
}
.landing-grid .stack-card.landing-card{
  position:relative;
  top:auto;left:auto;right:auto;
  width:100%;
  height:auto;
  aspect-ratio:240/320;
  opacity:0;
  visibility:hidden;
  pointer-events:auto;
}
.landing-grid .stack-card.landing-card .card-cta-overlay{pointer-events:none;}

@media(max-width:1099px){
  .landing-grid-cards{grid-template-columns:repeat(2,1fr);max-width:420px;gap:20px;}
}
@media(max-width:899px){
  .landing-grid .stack-card.landing-card{opacity:1;visibility:visible;}
}
@media(max-width:520px){
  .landing-grid-cards{grid-template-columns:1fr;max-width:280px;}
}

/* ================= Reduced motion ================= */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
  .reveal-up,.reveal-line span{opacity:1 !important;transform:none !important;}
  .brand-object-canvas{display:none !important;}
  .stack-badge,.stack-badge-dot{animation:none !important;}
  .landing-grid .stack-card.landing-card{opacity:1 !important;visibility:visible !important;}
}

@media(max-width:600px){
  .section{padding:90px 0;}
  .container{padding:0 24px;}
  .nav-inner{padding:0 24px;}
  .page-hero{padding:140px 0 80px;}
  .page-hero-inner{padding:0 24px;}
}

/* ===================================================================
   CINEMATIC SYSTEM — Page Transitions · Magnetic · Tilt · Spotlight
   =================================================================== */

/* --- Page-transition overlay --- */
.page-transition{
  position:fixed;inset:0;
  z-index:99999;
  background:var(--black-deep);
  transform:scaleY(0);
  transform-origin:bottom center;
  will-change:transform;
  pointer-events:none;
}
.pt-line{
  position:absolute;
  top:50%;left:0;
  width:0%;height:3px;
  background:var(--mint);
  transform:translateY(-50%);
}

/* --- Radial spotlight on dark sections --- */
.spotlight{
  position:absolute;inset:0;
  pointer-events:none;
  z-index:1;
  background:radial-gradient(
    580px circle at var(--sl-x,50%) var(--sl-y,50%),
    rgba(177,250,32,.038) 0%,
    transparent 65%
  );
}

/* --- 3-D tilt card ---
   Rotation/scale are driven by JS every animation frame (a lerped
   spring), so no CSS transition on transform here — one would fight
   the per-frame updates and make the motion feel laggy/muted. */
.has-tilt{
  transform:perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) scale(var(--tilt-s,1)) translateZ(0);
  will-change:transform;
  box-shadow:0 var(--tilt-shadow-y,4px) var(--tilt-shadow-blur,18px) rgba(10,10,10,var(--tilt-shadow-o,0));
  transition:box-shadow .35s var(--ease);
}
.has-tilt:hover{--tilt-shadow-y:34px;--tilt-shadow-blur:64px;--tilt-shadow-o:.32;}
/* Cards that also use the scroll-reveal fade (.reveal-up/.reveal-up.in) set
   their own `transform` for the slide-up entrance, at equal-or-higher CSS
   specificity than .has-tilt — so once revealed, the hover tilt above was
   silently overridden back to a flat identity matrix and never visibly
   rotated (only the sheen glow, a separate property, still showed). Bump
   specificity here so the tilt formula always wins once both classes meet. */
.has-tilt.reveal-up,
.has-tilt.reveal-up.in{
  transform:perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) scale(var(--tilt-s,1)) translateZ(0);
}

/* --- Cursor-tracked glass sheen highlight --- */
.has-sheen{position:relative;isolation:isolate;}
/* .stack-card must stay absolutely positioned (it's deck-stacked inside
   .stack-deck / #cardTravel) — .has-sheen's position:relative would otherwise
   collapse the deck into a plain vertical list. absolute already establishes
   its own positioning context, so the sheen ::after overlay still works. */
.stack-card.has-sheen{position:absolute;}
.has-sheen::after{
  content:"";
  position:absolute;inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:2;
  opacity:var(--sheen-o,0);
  transition:opacity .4s var(--ease);
  background:radial-gradient(circle at var(--sheen-x,50%) var(--sheen-y,50%),rgba(255,255,255,.35),rgba(255,255,255,0) 42%);
  mix-blend-mode:overlay;
}

/* --- Magnetic buttons keep their spring reset --- */
.btn-primary,.btn-ghost,.btn-nav{will-change:transform;}

/* --- Case-visual clip-path reveal --- */
.case-visual{overflow:hidden;}
.case-visual-inner{overflow:hidden;}

/* --- Shopify chapter chapter-nav sidebar --- */
.shopify-chapter-nav{
  position:fixed;
  right:22px;top:50%;
  transform:translateY(-50%);
  z-index:200;
  display:flex;flex-direction:column;gap:9px;
  opacity:0;pointer-events:none;
  transition:opacity .4s;
}
.shopify-chapter-nav.visible{opacity:1;pointer-events:all;}
.chapter-dot{
  width:7px;height:7px;
  border-radius:50%;
  background:rgba(246,246,246,.22);
  cursor:pointer;
  border:none;padding:0;
  transition:background .3s,transform .3s;
}
.chapter-dot:hover{background:rgba(246,246,246,.5);}
.chapter-dot.active{background:var(--mint);transform:scale(1.5);}

/* --- Sticky chapter label (injected by JS) --- */
.chapter-label{
  position:sticky;
  top:72px;
  z-index:15;
  padding:10px 0;
  font-family:var(--mono);
  font-size:.66rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--mint);
  background:rgba(10,10,10,.88);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  display:flex;align-items:center;gap:12px;
  border-bottom:1px solid rgba(177,250,32,.1);
}
.chapter-label-line{
  display:block;
  width:24px;height:1px;
  background:currentColor;
  flex-shrink:0;
}
.shopify-chapter{
  border-top:1px solid var(--line);
  padding-top:0;
}

/* --- Touch / no-hover guards --- */
@media(hover:none){
  .has-tilt{transform:none !important;transition:none !important;}
  .spotlight{display:none !important;}
  .shopify-chapter-nav{display:none !important;}
}

/* ===================================================================
   STACK-DECK TRAVEL — Card links · Hover overlay · Travel sentinel
   =================================================================== */

/* Stretch-link covering entire card */
.card-link{
  position:absolute;inset:0;
  z-index:10;
  border-radius:inherit;
}

/* "View Service →" overlay on hover */
.card-cta-overlay{
  position:absolute;inset:0;
  z-index:11;
  border-radius:inherit;
  display:flex;align-items:center;justify-content:center;
  background:rgba(177,250,32,.12);
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
  opacity:0;
  transition:opacity .3s cubic-bezier(.16,.84,.44,1);
  pointer-events:none;
}
.card-cta-overlay span{
  font-family:var(--mono);
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--mint);
  text-transform:uppercase;
}
@media(hover:hover){
  .stack-card:hover .card-cta-overlay{opacity:1;}
}

/* Travel sentinel — sets aside vertical space for parallax cards.
   Kept short so the hero doesn't stay pinned for an overly long scroll
   before the landing section arrives. */
#cardTravel{
  height:140vh;
  pointer-events:none;
  position:relative;
  /* invisible — only reserves scroll space */
}

/* Cards while traveling (position:fixed driven by JS) */
.stack-card--traveling{
  pointer-events:auto;
  /* visual state maintained by GSAP inline styles */
}

#cardTravel{
  z-index:5;
  margin-top:0;
}

#cardTravel .stack-card{
  top:var(--travel-top, 14vh);
  left:auto;
  width:clamp(200px,21vw,280px);
  height:calc(clamp(200px,21vw,280px) * 1.32143);
  pointer-events:auto;
  transform-origin:center center;
}

#cardTravel .stack-card--traveling{
  position:absolute;
  opacity:0;
  visibility:hidden;
  z-index:6;
}

#cardTravel .stack-card--traveling.travel-lane-left{
  left:clamp(-96px,-6vw,-64px);
}

#cardTravel .stack-card--traveling.travel-lane-right{
  right:clamp(16px,4vw,48px);
}

.stack-card--traveling .card-link{
  pointer-events:auto;
}

@media(max-width:899px){
  .hero{position:relative;}
  #cardTravel{display:none;}
}
@media(prefers-reduced-motion:reduce){
  .card-cta-overlay{transition:none !important;}
  .hero{position:relative;}
  #cardTravel{display:none;}
}

/* Technical-features pill list (GROWVA Agency OS case study) */
.tech-badges{display:flex;flex-wrap:wrap;gap:14px;margin-top:24px;}
.tech-badge{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border:1px solid var(--line);border-radius:100px;background:rgba(177,250,32,.03);font-family:var(--mono);font-size:.78rem;color:var(--ivory);}
.tech-badge svg{width:18px;height:18px;color:var(--mint);flex-shrink:0;}

/* Service-department "how we work" alternating steps (services/*.html) */
.dept-steps{display:flex;flex-direction:column;}
.dept-step{display:flex;align-items:center;gap:56px;padding:56px 0;border-top:1px solid var(--line);}
.dept-step:nth-child(even){flex-direction:row-reverse;}
.dept-step-media{flex:0 0 42%;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background-position:50% 50%;background-size:cover;background-color:#141414;}
.dept-step-body{flex:1;min-width:0;}
.dept-step-num{display:block;font-family:var(--mono);font-size:.7rem;color:var(--mint);letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px;}
.dept-step-body h3{font-family:var(--serif);font-size:1.7rem;font-weight:500;color:var(--ivory);margin-bottom:14px;}
.dept-step-body p{color:rgba(246,246,246,.65);line-height:1.75;font-size:1rem;}
@media(max-width:899px){
  .dept-step,.dept-step:nth-child(even){flex-direction:column;align-items:stretch;gap:24px;padding:36px 0;}
  .dept-step-media{flex:none;width:100%;}
}

/* Deep-dive module breakdown (problem/solution/benefits/shots/stat) */
.module-detail{padding:64px 0;border-top:1px solid var(--line);}
.module-detail-top{display:flex;align-items:center;gap:16px;margin-bottom:32px;}
.module-detail-icon{width:46px;height:46px;border-radius:10px;background:rgba(177,250,32,.08);border:1px solid rgba(177,250,32,.25);display:flex;align-items:center;justify-content:center;color:var(--mint);flex:none;}
.module-detail-icon svg{width:22px;height:22px;}
.module-detail-top-text{min-width:0;}
.module-detail-eyebrow{display:block;font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:rgba(246,246,246,.44);margin-bottom:4px;}
.module-detail-top h3{font-family:var(--serif);font-size:1.9rem;font-weight:500;color:var(--ivory);}
.module-detail-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:start;}
.module-detail-block{margin-bottom:24px;}
.module-detail-block:last-child{margin-bottom:0;}
.module-detail-label{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--mint);margin-bottom:8px;display:block;}
.module-detail-block p{color:rgba(246,246,246,.68);line-height:1.75;font-size:1rem;}
.module-detail-benefits{list-style:none;margin-top:6px;}
.module-detail-benefits li{position:relative;padding-left:26px;color:rgba(246,246,246,.75);line-height:1.6;font-size:.95rem;margin-bottom:10px;}
.module-detail-benefits li::before{content:"";position:absolute;left:0;top:.35em;width:14px;height:14px;border-radius:50%;background:rgba(177,250,32,.12);border:1px solid var(--mint);}
.module-detail-benefits li::after{content:"";position:absolute;left:4px;top:.55em;width:6px;height:3px;border-left:1.6px solid var(--mint);border-bottom:1.6px solid var(--mint);transform:rotate(-45deg);}
.module-detail-media{display:flex;flex-direction:column;gap:16px;}
.module-detail-shots{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.module-detail-stat{text-align:center;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:10px;padding:22px 16px;}
@media(max-width:899px){
  .module-detail-grid{grid-template-columns:1fr;gap:28px;}
  .module-detail{padding:44px 0;}
}
@media(max-width:560px){
  .module-detail-shots{grid-template-columns:1fr 1fr;gap:8px;}
}

/* --- Reduced-motion guards for cinematic layer --- */
@media(prefers-reduced-motion:reduce){
  .page-transition,.pt-line{transition:none !important;animation:none !important;}
  .has-tilt{transform:none !important;transition:none !important;}
  .latest-project-badge{opacity:1;transform:translate(-50%,-50%) scale(1);transition:none!important;}
  .latest-project-visual .case-visual-inner{transition:none!important;}
  .spotlight{display:none !important;}
  .chapter-label{position:static !important;}
  .shopify-chapter-nav{display:none !important;}
}

/* ===================================================================
   PORTFOLIO SYSTEM — Chevrons · Category Directory · Project Grid · Project Pages
   =================================================================== */

/* --- Dropdown chevron on mega-menu triggers --- */
.nav-chevron{
  display:inline-block;
  width:10px;height:6px;
  margin-left:5px;
  vertical-align:middle;
  flex-shrink:0;
  transition:transform .22s var(--ease);
}
.nav-item--mega.open>.nav-link--mega .nav-chevron{transform:rotate(180deg);}
[aria-expanded="true"].mobile-mega-toggle .nav-chevron{transform:rotate(180deg);}
.mobile-mega-toggle .nav-chevron{margin-left:auto;width:12px;height:8px;}
@media(prefers-reduced-motion:reduce){.nav-chevron{transition:none !important;}}

/* --- work.html: category directory grid --- */
.work-directory{padding:80px 0;}
.work-cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px;}
.work-cat-card{
  position:relative;display:flex;flex-direction:column;
  text-decoration:none;color:var(--ivory);
}
.work-cat-card-visual{
  position:relative;aspect-ratio:1.06/1;border-radius:14px;overflow:hidden;
  background:linear-gradient(145deg,#161616 0%,#0d0d0d 100%);
  border:1px solid rgba(246,246,246,.1);box-shadow:0 22px 55px rgba(10,10,10,.28);
  isolation:isolate;transition:border-color .3s var(--ease);
}
.work-cat-card:hover .work-cat-card-visual{border-color:rgba(177,250,32,.38);}
.work-cat-card-visual::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,.62),transparent 55%);}
.work-cat-card-photo{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-position:50% 50%;background-size:cover;}
.work-cat-card-photo[data-media-current-url]:not([data-media-current-url=""]) > *{display:none;}
.cat-v-shopify .work-cat-card-photo{background:radial-gradient(ellipse at 50% 55%,rgba(177,250,32,.13) 0%,transparent 60%),linear-gradient(145deg,#152510 0%,#0d0d0d 100%);}
.cat-v-brand .work-cat-card-photo{background:radial-gradient(ellipse at 50% 50%,rgba(177,250,32,.1) 0%,transparent 55%),linear-gradient(145deg,#181818 0%,#0d0d0d 100%);}
.cat-v-pkg .work-cat-card-photo{background:radial-gradient(ellipse at 35% 65%,rgba(177,250,32,.09) 0%,transparent 55%),linear-gradient(145deg,#181420 0%,#0d0d0d 100%);}
.cat-v-amazon .work-cat-card-photo{background:radial-gradient(ellipse at 50% 40%,rgba(255,153,51,.08) 0%,transparent 55%),linear-gradient(145deg,#1a1608 0%,#0d0d0d 100%);}
.cat-v-web .work-cat-card-photo{background:radial-gradient(ellipse at 50% 50%,rgba(100,140,255,.08) 0%,transparent 55%),linear-gradient(145deg,#0e1420 0%,#0d0d0d 100%);}
.cat-v-print .work-cat-card-photo{background:radial-gradient(ellipse at 50% 50%,rgba(177,250,32,.07) 0%,transparent 55%),linear-gradient(145deg,#181818 0%,#0d0d0d 100%);}
.cat-v-neutral .work-cat-card-photo{background:radial-gradient(ellipse at 50% 50%,rgba(177,250,32,.1) 0%,transparent 55%),linear-gradient(145deg,#181818 0%,#0d0d0d 100%);}
.work-cat-card-name{position:absolute;left:22px;bottom:20px;z-index:2;margin:0;font-family:var(--serif);font-size:clamp(1.2rem,2vw,1.5rem);font-weight:500;line-height:1.2;color:var(--ivory);text-shadow:0 12px 34px rgba(0,0,0,.45);}
.work-cat-card-badge{position:absolute;left:50%;top:50%;z-index:3;transform:translate(-50%,-50%) scale(.9);opacity:0;display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:999px;background:var(--mint);color:var(--black-deep);font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 16px 34px rgba(0,0,0,.28);transition:opacity .24s var(--ease),transform .24s var(--ease);}
@media(hover:hover){.work-cat-card:hover .work-cat-card-badge,.work-cat-card:focus-visible .work-cat-card-badge{opacity:1;transform:translate(-50%,-50%) scale(1);}}
@media(hover:none){.work-cat-card-badge{opacity:1;transform:translate(-50%,-50%) scale(1);}}
.work-cat-card-caption{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:14px;font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;}
.work-cat-card-count{color:var(--mint);}
.work-cat-card-arrow{color:var(--mint);opacity:0;transition:opacity .22s var(--ease);}
.work-cat-card:hover .work-cat-card-arrow{opacity:1;}
@media(max-width:899px){.work-cat-grid{grid-template-columns:repeat(2,1fr);gap:16px;}}
@media(max-width:560px){.work-cat-grid{grid-template-columns:1fr;}}

/* Mini visuals for category cards */
.catv-browser{width:130px;background:#111;border-radius:7px;overflow:hidden;border:1px solid rgba(246,246,246,.12);}
.catv-browser-bar{height:16px;background:#1a1a1a;display:flex;align-items:center;gap:4px;padding:0 7px;}
.catv-dot{width:5px;height:5px;border-radius:50%;}
.catv-dot:nth-child(1){background:#FF5F57;}.catv-dot:nth-child(2){background:#FEBC2E;}.catv-dot:nth-child(3){background:#28C840;}
.catv-browser-content{padding:8px 7px;display:flex;flex-direction:column;gap:4px;}
.catv-browser-hero{height:34px;border-radius:3px;background:linear-gradient(135deg,rgba(177,250,32,.22),rgba(80,185,100,.1));}
.catv-browser-row{height:5px;border-radius:2px;background:rgba(246,246,246,.12);}
.catv-browser-row--short{width:60%;}
.catv-browser-btn{height:11px;width:52px;border-radius:100px;background:var(--mint);opacity:.8;}

.catv-logo-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;}
.catv-logo-mark{width:72px;height:72px;border-radius:50%;background:#0e0e0e;border:1px solid rgba(177,250,32,.22);display:flex;align-items:center;justify-content:center;}
.catv-logo-mark svg{width:52px;height:52px;color:var(--ivory);}
.catv-swatches{display:flex;gap:5px;}
.catv-swatch{width:18px;height:18px;border-radius:50%;border:1px solid rgba(255,255,255,.15);}

.catv-box{position:relative;width:72px;height:88px;}
.catv-box-front{position:absolute;bottom:0;left:0;width:54px;height:70px;background:linear-gradient(145deg,#1e1e1e,#0e0e0e);border:1px solid rgba(177,250,32,.22);}
.catv-box-side{position:absolute;bottom:0;left:54px;width:18px;height:62px;background:linear-gradient(180deg,#141414,#0a0a0a);clip-path:polygon(0 0,100% 7px,100% 100%,0% 100%);}
.catv-box-top{position:absolute;bottom:70px;left:0;width:72px;height:18px;background:#1c1c1c;clip-path:polygon(0% 100%,18px 0%,72px 0%,54px 100%);}

.catv-amazon{width:130px;background:#111;border-radius:5px;overflow:hidden;border:1px solid rgba(255,153,51,.18);padding:7px;display:flex;flex-direction:column;gap:4px;}
.catv-amazon-logo{font-family:var(--serif);font-size:.65rem;font-weight:700;color:#FF9900;letter-spacing:.04em;}
.catv-amazon-img{height:36px;background:linear-gradient(135deg,rgba(255,153,51,.15),transparent);border-radius:3px;}
.catv-amazon-row{height:4px;border-radius:2px;background:rgba(246,246,246,.1);}
.catv-amazon-stars{color:#FF9900;font-size:.5rem;letter-spacing:1px;}
.catv-amazon-btn{height:14px;border-radius:2px;background:#FF9900;opacity:.85;}

.catv-web-mockup{width:130px;background:#0d1117;border-radius:5px;overflow:hidden;border:1px solid rgba(100,140,255,.2);}
.catv-web-header{height:20px;background:#12181f;display:flex;align-items:center;gap:6px;padding:0 8px;}
.catv-web-nav-dot{width:28px;height:4px;border-radius:2px;background:rgba(246,246,246,.15);}
.catv-web-hero{height:48px;background:linear-gradient(135deg,rgba(100,140,255,.15),rgba(80,80,180,.08));margin:5px;border-radius:3px;}
.catv-web-body{padding:0 5px 5px;display:flex;flex-direction:column;gap:3px;}
.catv-web-row{height:4px;border-radius:2px;background:rgba(246,246,246,.1);}

.catv-print-layout{width:100px;height:80px;background:#0f0f0f;border-radius:3px;overflow:hidden;border:1px solid rgba(246,246,246,.12);padding:7px;display:grid;grid-template-columns:1fr 1fr;gap:4px;}
.catv-print-panel{background:linear-gradient(145deg,rgba(177,250,32,.1),transparent);border-radius:2px;}
.catv-print-panel--tall{grid-row:span 2;}

.cat-v-neutral{background:radial-gradient(ellipse at 50% 50%,rgba(177,250,32,.1) 0%,transparent 55%),linear-gradient(145deg,#181818 0%,#0d0d0d 100%);}
.catv-icon-card{width:84px;height:84px;border-radius:20px;background:rgba(177,250,32,.06);border:1px solid rgba(177,250,32,.22);display:flex;align-items:center;justify-content:center;}
.catv-icon-card svg{width:38px;height:38px;color:var(--mint);}

.project-card--placeholder .work-cat-card-photo,.project-card--placeholder .project-card-photo{background:rgba(246,246,246,.03);}
.project-card--placeholder-icon{width:52px;height:52px;border-radius:50%;background:rgba(177,250,32,.08);border:1px solid rgba(177,250,32,.25);display:flex;align-items:center;justify-content:center;}
.project-card--placeholder-icon svg{width:24px;height:24px;color:var(--mint);}
.work-empty-note{margin-top:52px;padding:48px 32px;border:1px dashed rgba(246,246,246,.16);border-radius:16px;text-align:center;color:var(--gray-dim);font-size:.92rem;}

/* --- L2: project thumbnail grid --- */
.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px;}
.project-card{display:block;text-decoration:none;color:var(--ivory);}
.project-card-visual{
  position:relative;aspect-ratio:1.06/1;border-radius:14px;overflow:hidden;
  background:linear-gradient(145deg,#1a1a1a 0%,#0e0e0e 100%);
  border:1px solid rgba(246,246,246,.09);box-shadow:0 22px 55px rgba(10,10,10,.28);
  isolation:isolate;transition:border-color .3s var(--ease);
}
.project-card:hover .project-card-visual{border-color:rgba(177,250,32,.3);}
.project-card-visual::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,.62),transparent 55%);}
.project-card-photo{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-position:50% 50%;background-size:cover;}
.project-card-photo[data-media-current-url]:not([data-media-current-url=""]) > *{display:none;}
.project-card-title{position:absolute;left:20px;bottom:18px;z-index:2;margin:0;font-family:var(--serif);font-size:clamp(1rem,1.6vw,1.25rem);font-weight:500;line-height:1.2;color:var(--ivory);text-shadow:0 12px 34px rgba(0,0,0,.45);}
.project-card-badge{position:absolute;left:50%;top:50%;z-index:3;transform:translate(-50%,-50%) scale(.9);opacity:0;display:inline-flex;align-items:center;justify-content:center;padding:9px 15px;border-radius:999px;background:var(--mint);color:var(--black-deep);font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 16px 34px rgba(0,0,0,.28);transition:opacity .24s var(--ease),transform .24s var(--ease);}
@media(hover:hover){.project-card:hover .project-card-badge,.project-card:focus-visible .project-card-badge{opacity:1;transform:translate(-50%,-50%) scale(1);}}
@media(hover:none){.project-card-badge{opacity:1;transform:translate(-50%,-50%) scale(1);}}
.project-card-caption{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:12px;font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;}
.project-card-tag{color:rgba(177,250,32,.85);}
.project-card-arrow{color:var(--mint);opacity:0;transition:opacity .22s var(--ease);}
.project-card:hover .project-card-arrow{opacity:1;}

/* Admin-only "hidden from visitors" indicator. Visitors never see this —
   the card gets display:none for them instead. Admins see the card at
   reduced opacity with a clear dashed ribbon so the layout footprint
   (and the ability to click through and un-hide it) is preserved. */
.project-card.is-admin-hidden{position:relative;}
.project-card.is-admin-hidden .project-card-visual{opacity:.4;}
.project-card.is-admin-hidden::after{
  content:'Hidden from visitors';position:absolute;inset:0;z-index:6;
  display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  color:#ff8a8a;background:rgba(10,10,10,.5);border:2px dashed rgba(255,107,107,.55);
  border-radius:14px;pointer-events:none;
}
@media(max-width:899px){.project-grid{grid-template-columns:repeat(2,1fr);gap:14px;}}
@media(max-width:560px){.project-grid{grid-template-columns:1fr;}}

/* --- L3: project page --- */
.project-breadcrumb{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.67rem;text-transform:uppercase;letter-spacing:.08em;color:var(--gray-dim);margin-bottom:36px;}
.project-breadcrumb a{color:var(--gray-dim);text-decoration:none;}
.project-breadcrumb a:hover{color:var(--mint);}
.project-breadcrumb-sep{opacity:.4;font-size:.58rem;}

.project-narrative{display:grid;grid-template-columns:1fr 1fr 1fr;gap:36px;padding:64px 0 56px;border-top:1px solid var(--line);}
.project-narrative-block h4{font-family:var(--mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.1em;color:var(--mint);margin-bottom:12px;}
.project-narrative-block p{font-size:.94rem;line-height:1.76;color:rgba(246,246,246,.6);}

.project-gallery{padding:64px 0 72px;border-top:1px solid var(--line);}
.project-gallery-eyebrow{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;color:var(--mint);margin-bottom:28px;}
.project-gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:210px;gap:14px;}
.pgi{border-radius:12px;border:1px solid rgba(246,246,246,.09);background:linear-gradient(145deg,#181818 0%,#0e0e0e 100%);overflow:hidden;display:flex;align-items:center;justify-content:center;position:relative;background-position:50% 50%;background-size:cover;}
.pgi[data-media-current-url]:not([data-media-current-url=""]) > *{display:none;}
.pgi--wide{grid-column:span 2;}
.pgi--tall{grid-row:span 2;}
.pgi--full{grid-column:span 3;}
@media(max-width:899px){.project-gallery-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:180px;}.pgi--wide{grid-column:span 1;}.pgi--full{grid-column:span 2;}.project-narrative{grid-template-columns:1fr;gap:24px;}}
@media(max-width:560px){.project-gallery-grid{grid-template-columns:1fr;grid-auto-rows:150px;}.pgi--full,.pgi--wide{grid-column:span 1;}}

.project-presentation{position:relative;max-width:min(1100px,92vw);margin:0 auto;}
.project-presentation-pin{position:relative;height:min(78vh,700px);border-radius:20px;box-shadow:0 30px 90px rgba(0,0,0,.5);overflow:hidden;}
.project-presentation-slide{position:absolute;inset:0;border-radius:20px;overflow:hidden;}
.project-presentation-photo{position:absolute;inset:-10% -3%;border-radius:20px;border:1px solid rgba(246,246,246,.09);background:linear-gradient(145deg,#181818 0%,#0e0e0e 100%);background-position:50% 50%;background-size:cover;display:flex;align-items:center;justify-content:center;}
.project-presentation-photo[data-media-current-url]:not([data-media-current-url=""]) > *{display:none;}
.project-presentation-slide-placeholder{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--gray-dim);}
.project-presentation-slide-placeholder svg{width:32px;height:32px;color:var(--mint);opacity:.75;}
.project-presentation-slide-placeholder span{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;}
.project-presentation-num{position:absolute;top:16px;left:16px;font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;color:var(--mint);background:rgba(10,10,10,.72);padding:5px 12px;border-radius:100px;border:1px solid rgba(177,250,32,.25);z-index:2;}
@media(max-width:560px){.project-presentation-pin{height:min(62vh,520px);}}

/* Single-card interactive 3D model showcase (replaces the photo-slide
   presentation on projects where the work itself is a 3D asset).
   model-viewer supplies drag-to-orbit on desktop and full-direction
   touch rotation on mobile natively via camera-controls. */
.project-model-showcase{position:relative;max-width:min(1100px,92vw);margin:0 auto;}
.project-model-card{position:relative;height:min(78vh,700px);border-radius:20px;box-shadow:0 30px 90px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.08);overflow:hidden;background:rgba(255,255,255,.05);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);border:1px solid rgba(246,246,246,.12);}
.project-model-viewer{width:100%;height:100%;--poster-color:transparent;}
@media(max-width:560px){.project-model-card{height:min(62vh,520px);}}

/* Single-card motion-logo showcase (After Effects exports, e.g. .webm).
   Plays once when scrolled into view and holds on its last frame --
   see initMotionLogoPlayback in script.js. */
.project-motion-showcase{position:relative;max-width:min(1100px,92vw);margin:0 auto;}
.project-motion-card{position:relative;height:min(78vh,700px);border-radius:20px;box-shadow:0 30px 90px rgba(0,0,0,.5);overflow:hidden;background:#0e0e0e;display:flex;align-items:center;justify-content:center;border:1px solid rgba(246,246,246,.09);}
.project-motion-video{width:100%;height:100%;object-fit:contain;}
@media(max-width:560px){.project-motion-card{height:min(62vh,520px);}}

.project-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:56px 0 64px;border-top:1px solid var(--line);}
.project-metric{text-align:center;background-position:50% 50%;background-size:cover;border-radius:8px;padding:18px 10px;}
.project-metric[data-media-current-url]:not([data-media-current-url=""]){background-color:rgba(5,5,5,.6);background-blend-mode:darken;}
.project-metric-num{font-family:var(--serif);font-size:2.6rem;font-weight:500;color:var(--mint);display:block;line-height:1;margin-bottom:7px;}
.project-metric-lbl{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;color:rgba(246,246,246,.44);}
@media(max-width:600px){.project-metrics{grid-template-columns:1fr 1fr;}}

/* --- Case Study Template: reusable, admin-editable sections ---
   Same "generous slot + per-item visibility toggle" pattern used for
   project cards sitewide: hiding an item sets display:none for visitors
   (nothing shifts/breaks) while admins still see it, dimmed, with a
   ribbon, so it can always be found and switched back on. This is what
   makes sections 4/6/7/8 "dynamic" without touching page design. */
.gv-hideable.is-admin-hidden{position:relative;opacity:.42;}
.gv-hideable.is-admin-hidden::after{
  content:'Hidden from visitors';position:absolute;inset:0;z-index:6;
  display:flex;align-items:center;justify-content:center;text-align:center;padding:12px;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;
  color:#ff8a8a;background:rgba(10,10,10,.55);border:2px dashed rgba(255,107,107,.55);
  border-radius:inherit;pointer-events:none;
}

/* Before GROWVA — problem section */
.project-before{padding:64px 0 56px;border-top:1px solid var(--line);}
.project-before-eyebrow{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;color:#ff8a8a;margin-bottom:18px;}
.project-before-intro{max-width:640px;font-size:.96rem;line-height:1.7;color:rgba(246,246,246,.6);margin:14px 0 32px;}
.project-before-list{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;list-style:none;}
.project-before-item{display:flex;align-items:flex-start;gap:12px;padding:18px 20px;border:1px solid var(--line);border-radius:10px;background:rgba(255,90,90,.03);}
.project-before-icon{flex-shrink:0;width:20px;height:20px;color:#ff6b6b;margin-top:1px;}
.project-before-text{font-size:.9rem;line-height:1.55;color:rgba(246,246,246,.68);}
@media(max-width:700px){.project-before-list{grid-template-columns:1fr;}}

/* GROWVA Solution — phased build-out */
.project-solution{padding:56px 0 64px;border-top:1px solid var(--line);}
.project-solution-eyebrow{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;color:var(--mint);margin-bottom:28px;}
.project-solution-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;}
.project-solution-phase{border:1px solid var(--line);border-radius:12px;padding:22px 20px 24px;background:linear-gradient(160deg,rgba(177,250,32,.03),transparent);}
.project-solution-num{display:block;font-family:var(--mono);font-size:.7rem;color:rgba(177,250,32,.6);margin-bottom:10px;}
.project-solution-phase h4{font-family:var(--serif);font-size:1.05rem;font-weight:500;color:var(--ivory);margin-bottom:14px;overflow-wrap:break-word;}
.project-solution-list{list-style:none;display:flex;flex-direction:column;gap:9px;}
.project-solution-list li{position:relative;padding-left:16px;font-size:.82rem;line-height:1.5;color:rgba(246,246,246,.6);}
.project-solution-list li::before{content:'';position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--mint);}
@media(max-width:899px){.project-solution-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:560px){.project-solution-grid{grid-template-columns:1fr;}}

/* Results & Numbers — dynamic KPI grid (admin add/remove via visibility) */
.project-results{padding:56px 0 64px;border-top:1px solid var(--line);}
.project-results-eyebrow{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;color:var(--mint);margin-bottom:28px;}
.project-results-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;}
.project-result-card{text-align:center;padding:30px 16px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(160deg,rgba(177,250,32,.05),transparent);}
.project-result-num{font-family:var(--serif);font-size:1.7rem;font-weight:600;color:var(--mint);display:block;line-height:1.15;margin-bottom:8px;overflow-wrap:break-word;}
.project-result-lbl{font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.06em;color:rgba(246,246,246,.5);overflow-wrap:break-word;}
@media(max-width:899px){.project-results-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}

/* Proof-of-results / product-photography grids — click to enlarge */
.project-proof,.project-photography{padding:56px 0 64px;border-top:1px solid var(--line);}
.project-proof-eyebrow,.project-photography-eyebrow{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;color:var(--mint);margin-bottom:28px;}
.project-proof-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.project-proof-item{position:relative;display:block;width:100%;padding:0;text-align:left;aspect-ratio:4/3;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#101010;cursor:zoom-in;}
.project-proof-photo{position:absolute;inset:0;background-position:50% 50%;background-size:cover;}
.project-proof-caption{position:absolute;left:0;right:0;bottom:0;padding:10px 14px;font-family:var(--mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ivory);background:linear-gradient(to top,rgba(0,0,0,.78),transparent);}
.project-proof-zoom{position:absolute;top:10px;right:10px;width:28px;height:28px;border-radius:50%;background:rgba(10,10,10,.55);border:1px solid rgba(246,246,246,.18);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s var(--ease);}
.project-proof-zoom svg{width:14px;height:14px;color:var(--ivory);}
@media(hover:hover){.project-proof-item:hover .project-proof-zoom{opacity:1;}}
@media(hover:none){.project-proof-zoom{opacity:1;}}
@media(max-width:899px){.project-proof-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:560px){.project-proof-grid{grid-template-columns:1fr;}}

/* Products listed on Amazon */
.project-products{padding:56px 0 64px;border-top:1px solid var(--line);}
.project-products-eyebrow{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;color:var(--mint);margin-bottom:28px;}
.project-products-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
.project-product-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#101010;}
.project-product-photo{aspect-ratio:1/1;background-position:50% 50%;background-size:cover;background-color:#161616;}
.project-product-body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:6px;}
.project-product-name{font-family:var(--serif);font-size:1rem;font-weight:500;color:var(--ivory);overflow-wrap:break-word;}
.project-product-desc{font-size:.82rem;line-height:1.5;color:rgba(246,246,246,.55);}
.project-product-link{margin-top:8px;font-family:var(--mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.06em;color:var(--mint);display:inline-block;}
.project-product-link:hover{text-decoration:underline;}
@media(max-width:899px){.project-products-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:560px){.project-products-grid{grid-template-columns:1fr;}}

/* Services provided — badges */
.project-services{padding:56px 0 64px;border-top:1px solid var(--line);}
.project-services-eyebrow{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;color:var(--mint);margin-bottom:28px;}
.project-services-grid{display:flex;flex-wrap:wrap;gap:12px;}
.project-service-badge{display:inline-flex;align-items:center;padding:10px 18px;border:1px solid rgba(177,250,32,.28);border-radius:999px;font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--mint);background:rgba(177,250,32,.06);}

/* Lightbox / popup for proof + photography galleries */
.gv-lightbox{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:40px;background:rgba(5,5,5,.92);backdrop-filter:blur(6px);}
.gv-lightbox.is-open{display:flex;}
.gv-lightbox-img{max-width:min(1100px,92vw);max-height:88vh;width:auto;height:auto;border-radius:10px;box-shadow:0 40px 100px rgba(0,0,0,.6);object-fit:contain;background:#0a0a0a;}
.gv-lightbox-caption{position:absolute;left:0;right:0;bottom:24px;text-align:center;font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:rgba(246,246,246,.7);}
.gv-lightbox-close{position:absolute;top:24px;right:28px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .18s var(--ease);}
.gv-lightbox-close:hover{background:rgba(255,255,255,.16);}
.gv-lightbox-close svg{width:18px;height:18px;}
@media(max-width:560px){.gv-lightbox{padding:20px;}.gv-lightbox-close{top:14px;right:14px;width:38px;height:38px;}}

.project-related{padding:56px 0 72px;border-top:1px solid var(--line);}
.project-related-eyebrow{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;color:var(--mint);margin-bottom:28px;}
.project-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
@media(max-width:899px){.project-related-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.project-related-grid{grid-template-columns:1fr;}}

/* Gallery inner visual patterns (pgi = project-gallery-item inner) */
.pgi-browser{width:84%;height:84%;display:flex;flex-direction:column;background:#101010;border-radius:6px;overflow:hidden;border:1px solid rgba(246,246,246,.1);}
.pgi-browser-bar{height:18px;background:#1a1a1a;display:flex;align-items:center;gap:4px;padding:0 7px;flex-shrink:0;}
.pgi-dot{width:5px;height:5px;border-radius:50%;}
.pgi-dot:nth-child(1){background:#FF5F57;}.pgi-dot:nth-child(2){background:#FEBC2E;}.pgi-dot:nth-child(3){background:#28C840;}
.pgi-browser-body{flex:1;padding:8px;display:flex;flex-direction:column;gap:5px;overflow:hidden;}
.pgi-hero-strip{height:42%;border-radius:4px;background:linear-gradient(135deg,rgba(177,250,32,.2),rgba(80,185,100,.08));}
.pgi-content-row{height:6px;border-radius:2px;background:rgba(246,246,246,.1);}
.pgi-content-row--short{width:55%;}
.pgi-atc{height:18px;width:72px;border-radius:100px;background:var(--mint);opacity:.82;margin-top:3px;}

.pgi-logo-panel{display:flex;flex-direction:column;align-items:center;gap:14px;}
.pgi-mark{width:88px;height:88px;border-radius:50%;background:#0e0e0e;border:1px solid rgba(177,250,32,.22);display:flex;align-items:center;justify-content:center;}
.pgi-mark svg{width:66px;height:66px;}
.pgi-palette{display:flex;gap:6px;}
.pgi-swatch{width:26px;height:26px;border-radius:50%;border:1px solid rgba(255,255,255,.12);}

.pgi-pkg{position:relative;width:92px;height:114px;}
.pgi-pkg-front{position:absolute;bottom:0;left:0;width:70px;height:92px;background:linear-gradient(145deg,#1e1e1e,#0c0c0c);border:1px solid rgba(177,250,32,.22);display:flex;align-items:center;justify-content:center;}
.pgi-pkg-side{position:absolute;bottom:0;left:70px;width:22px;height:84px;background:linear-gradient(180deg,#141414,#080808);clip-path:polygon(0 0,100% 8px,100% 100%,0% 100%);}
.pgi-pkg-top{position:absolute;bottom:92px;left:0;width:92px;height:22px;background:#1c1c1c;clip-path:polygon(0% 100%,22px 0%,92px 0%,70px 100%);}
.pgi-pkg-text{font-family:var(--serif);font-size:.52rem;color:rgba(246,246,246,.7);text-align:center;}

.pgi-type-specimen{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:14px;}
.pgi-type-large{font-family:var(--serif);font-size:2rem;font-weight:500;color:rgba(246,246,246,.82);line-height:1;}
.pgi-type-small{font-family:var(--mono);font-size:.56rem;text-transform:uppercase;letter-spacing:.12em;color:var(--mint);}

.pgi-card-mockup{width:78%;height:78%;background:linear-gradient(145deg,#1a1a1a,#0d0d0d);border-radius:7px;border:1px solid rgba(246,246,246,.12);padding:12px;display:flex;flex-direction:column;justify-content:space-between;}
.pgi-card-logo{font-family:var(--serif);font-size:.7rem;font-weight:600;color:rgba(246,246,246,.82);}
.pgi-card-info{display:flex;flex-direction:column;gap:3px;}
.pgi-card-line{height:4px;border-radius:2px;background:rgba(246,246,246,.15);}
.pgi-card-line--short{width:50%;}

.pgi-ad-sq{width:78%;height:78%;background:linear-gradient(145deg,#141414,#0a0a0a);border-radius:7px;border:1px solid rgba(177,250,32,.14);display:flex;flex-direction:column;overflow:hidden;}
.pgi-ad-img{flex:1;background:linear-gradient(135deg,rgba(177,250,32,.13),rgba(80,185,100,.05));}
.pgi-ad-caption{padding:7px 8px;display:flex;flex-direction:column;gap:3px;}
.pgi-ad-line{height:4px;border-radius:2px;background:rgba(246,246,246,.2);}
.pgi-ad-line--short{width:46%;}

.pgi-mobile{width:46%;height:86%;background:#101010;border-radius:11px;overflow:hidden;border:1px solid rgba(246,246,246,.12);display:flex;flex-direction:column;}
.pgi-mobile-notch{height:10px;background:#1a1a1a;display:flex;justify-content:center;align-items:center;}
.pgi-mobile-notch span{width:26px;height:3px;background:#222;border-radius:2px;}
.pgi-mobile-body{flex:1;padding:5px;display:flex;flex-direction:column;gap:3px;}
.pgi-mobile-hero{height:38%;border-radius:3px;background:linear-gradient(135deg,rgba(177,250,32,.18),rgba(80,185,100,.06));}
.pgi-mobile-row{height:4px;border-radius:2px;background:rgba(246,246,246,.1);}
.pgi-mobile-btn{height:12px;border-radius:100px;background:var(--mint);opacity:.78;margin-top:3px;}

.pgi-amazon-storefront{width:83%;height:83%;background:#0d0d0d;border-radius:6px;overflow:hidden;border:1px solid rgba(255,153,51,.14);display:flex;flex-direction:column;}
.pgi-amz-header{height:24px;background:#131313;display:flex;align-items:center;gap:6px;padding:0 8px;flex-shrink:0;}
.pgi-amz-logo-text{font-family:var(--serif);font-size:.55rem;font-weight:700;color:#FF9900;}
.pgi-amz-hero{flex:0 0 44%;background:linear-gradient(135deg,rgba(255,153,51,.11),rgba(180,100,0,.05));}
.pgi-amz-body{flex:1;padding:5px 7px;display:flex;flex-direction:column;gap:4px;}
.pgi-amz-row{height:4px;border-radius:2px;background:rgba(246,246,246,.1);}

.pgi-web-mockup{width:83%;height:83%;background:#0c121b;border-radius:6px;overflow:hidden;border:1px solid rgba(100,140,255,.14);display:flex;flex-direction:column;}
.pgi-web-header{height:22px;background:#111820;display:flex;align-items:center;gap:5px;padding:0 8px;flex-shrink:0;}
.pgi-web-logo{height:5px;width:32px;border-radius:2px;background:rgba(246,246,246,.3);}
.pgi-web-nav{display:flex;gap:4px;margin-left:auto;}
.pgi-web-nav-item{height:3px;width:18px;border-radius:2px;background:rgba(246,246,246,.14);}
.pgi-web-hero{flex:0 0 38%;background:linear-gradient(135deg,rgba(100,140,255,.11),rgba(60,80,200,.05));}
.pgi-web-body{flex:1;padding:5px 7px;display:flex;flex-direction:column;gap:3px;}
.pgi-web-row{height:3px;border-radius:2px;background:rgba(246,246,246,.1);}

/* ── Accessibility utility ──────────────────────────────────────────────── */
.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;}
.gv-cms-setting{display:none;}

/* ================= SITEWIDE DARK THEME — final overrides =================
   Deliberately placed at the very end of the file: this block used to
   live earlier in the stylesheet, but several of the selectors below
   (.footer, .btn-ghost, .value-item, .shopify-pillar, .service-directory-*,
   etc.) have their real base definition further down in the file than
   that earlier spot — same selector, same specificity, so whichever
   comes LAST in the file wins, and the base rule was silently winning
   and undoing the override. Every page runs dark end-to-end so the
   cinematicWebGL scene (particles, constellation lines, the centerpiece,
   the liquid glow) reads clearly everywhere, not just the homepage —
   every section named here is transparent over body's black so the
   moving scene stays visible behind the content on every page. */
body{
  background:#050505;
  color:var(--ivory);
  --gray-dim: rgba(246,246,246,.5);
  --gray: rgba(246,246,246,.68);
  --line-soft: rgba(246,246,246,.1);
}
.hero{color:var(--ivory);}
.hero-sub{color:rgba(246,246,246,.72);}
.hero-scroll{color:rgba(246,246,246,.55);}
.hero-scroll-line{background:rgba(246,246,246,.2);}
.marquee-strip{border-top-color:rgba(246,246,246,.14);}
.marquee-track span{color:rgba(246,246,246,.55);}

.why-lead p{color:var(--ivory);}
.why-card{background:rgba(255,255,255,.035);color:var(--ivory);}
.why-card:hover{background:rgba(255,255,255,.07);}

.service-compact-item{background:rgba(255,255,255,.035);}
.service-compact-item:hover{background:var(--mint);color:var(--black-deep);}

.stats{background:transparent;}

.testi-card{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.12);
  box-shadow:0 20px 60px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.08);
}
.testi-card[data-media-current-url]:not([data-media-current-url=""]){background-color:rgba(0,0,0,.55);}

.final-cta{background:transparent;}

.btn-ghost{border-color:rgba(246,246,246,.3);color:var(--ivory);}
.btn-ghost::before{background:var(--mint);}
.btn-ghost:hover{color:var(--black-deep);border-color:var(--mint);}

/* Nav + footer fully transparent everywhere too — body's own black is
   already behind them, so this just lets the glow/particles show
   straight through instead of sitting behind a solid bar. */
.nav,
.nav.scrolled{background:transparent;border-bottom-color:transparent;}
.footer{background:transparent;}

.value-item{background:rgba(255,255,255,.035);color:var(--ivory);}
.value-item:hover{background-color:rgba(255,255,255,.07);}
.service-directory-section{background:transparent;}
.service-directory-panels{background:rgba(255,255,255,.03);}
.service-detail-page{background:transparent;}
.shopify-pillar{background:rgba(255,255,255,.035);}
.shopify-pillar:hover{background-color:rgba(255,255,255,.07);}
.integration-item{background:rgba(255,255,255,.035);}
.service-directory-link,
.related-service-card{background:rgba(255,255,255,.06);color:var(--ivory);}
.service-directory-link:hover,
.service-directory-link:focus-visible,
.related-service-card:hover,
.related-service-card:focus-visible{background:rgba(255,255,255,.1);}
.case-line strong{color:var(--ivory);}
.work-filter-btn{color:var(--ivory);}

/* The bento intro galleries (about/contact/faq/pricing/process/services/
   shopify) sit in a full-viewport-height wrapper with its own solid black
   fill — each tile already paints its own opaque dark gradient card, so
   the wrapper's fill only ever showed in the gaps/margins around the
   grid. Making just the wrapper transparent lets the cinematicWebGL scene
   read through those gaps like everywhere else, without touching how any
   individual tile looks. */
.gallery-wrap{background:transparent;}
.bento-gallery-wrap{background:transparent;}

/* Same story for the two inner-page hero variants (41 and 20 pages
   respectively) — both already render their own small transparent
   pageHeroCanvas particle effect scoped to just the hero, so a
   transparent section background layers the main scene behind that
   local effect instead of blocking it outright. */
.page-hero{background:transparent;}
.service-page-hero{background:transparent;}

/* --- Printing category pages (work/printing-services/*) --- */
.page-hero .btn-ghost{border-color:rgba(246,246,246,.3);color:var(--ivory);}
.page-hero .btn-ghost::before{background:var(--mint);}
.page-hero .btn-ghost:hover{color:var(--black-deep);}

.print-hero-actions{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap;}

/* "What we can print" mini product grid */
.print-products{padding:64px 0;border-top:1px solid var(--line);}
.print-products-eyebrow{text-align:center;font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;color:var(--mint);margin-bottom:40px;}
.print-product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;}
.print-product-card{text-align:center;padding:28px 16px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(160deg,rgba(177,250,32,.03),transparent);}
.print-product-icon{width:44px;height:44px;margin:0 auto 16px;color:var(--mint);}
.print-product-icon svg{width:100%;height:100%;}
.print-product-name{display:block;font-family:var(--serif);font-size:1.02rem;font-weight:500;color:var(--ivory);margin-bottom:8px;}
.print-product-desc{font-size:.82rem;line-height:1.5;color:rgba(246,246,246,.55);}
@media(max-width:899px){.print-product-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:560px){.print-product-grid{grid-template-columns:1fr;}}
.print-product-grid--wide{grid-template-columns:repeat(2,minmax(0,1fr));}
.print-product-grid--wide .print-product-card-photo{aspect-ratio:16/9;}
@media(max-width:560px){.print-product-grid--wide{grid-template-columns:1fr;}}
.print-product-card.has-photo{padding:0 0 24px;overflow:hidden;text-align:center;}
.print-product-card-photo{width:100%;aspect-ratio:16/10;background-position:50% 0;background-size:cover;background-color:#141414;margin-bottom:20px;}
.print-product-card.has-photo .print-product-icon{margin:0 auto 12px;}
.print-product-card.has-photo .print-product-name,
.print-product-card.has-photo .print-product-desc{padding:0 20px;}

/* Modifier: card's screenshot stays hidden by default; hovering shows a
   small preview that follows the cursor, clicking opens it full-size in
   the shared lightbox. Cards with no matching screenshot are left plain. */
.print-product-grid--preview .print-product-card:has(.print-product-card-preview){cursor:pointer;}
.gv-hover-preview{position:fixed;z-index:9998;width:240px;height:150px;border-radius:12px;background-position:50% 50%;background-size:cover;background-color:#141414;box-shadow:0 20px 50px rgba(0,0,0,.5);border:1px solid rgba(246,246,246,.14);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s ease;transform:translateY(-50%);}
.gv-hover-preview.is-visible{opacity:1;visibility:visible;}
@media(hover:none),(pointer:coarse){.gv-hover-preview{display:none;}}

/* Featured projects showcase (case-study style, not a plain gallery) */
.print-showcase{padding:64px 0;border-top:1px solid var(--line);}
.print-showcase-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:32px;flex-wrap:wrap;}
.print-showcase-eyebrow{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;color:var(--mint);}
.print-showcase-more{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--mint);white-space:nowrap;}
.print-showcase-more:hover{text-decoration:underline;}

/* Pinned scroll-reveal: text list on the left drives image crossfade on the right */
.print-showcase-pin{position:relative;display:flex;align-items:center;gap:56px;min-height:78vh;padding:12px 0;}
.print-showcase-list{position:relative;flex:0 0 auto;width:340px;list-style:none;margin:0;padding:0 0 0 28px;}
.print-showcase-item{padding:22px 0;}
.print-showcase-item-title{display:block;font-family:var(--serif);font-size:1.2rem;font-weight:500;color:rgba(246,246,246,.32);transition:color .25s ease;}
.print-showcase-item-specs{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:8px;}
.print-showcase-item-specs span{font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.04em;color:rgba(246,246,246,.28);transition:color .25s ease;}
.print-showcase-item-specs b{font-weight:500;}
.print-showcase-item:first-child .print-showcase-item-title{color:var(--mint);}
.print-showcase-item:first-child .print-showcase-item-specs span{color:rgba(246,246,246,.6);}
/* Modifier: only the active item's description shows (rest stay collapsed to
   just their title). Shrinks the list's total height so it can't overrun its
   pinned box on sections with many items. Opt-in via --collapsed-specs so
   the original always-visible-specs showcases elsewhere are untouched. */
.print-showcase-pin--collapsed-specs .print-showcase-item-specs{display:none;}
.print-showcase-pin--collapsed-specs .print-showcase-item.is-active .print-showcase-item-specs{display:flex;}

.print-showcase-track{position:absolute;left:0;top:0;width:2px;height:100%;background:rgba(246,246,246,.14);}
.print-showcase-fill{position:absolute;left:0;top:0;width:100%;height:100%;background:var(--mint);transform:scaleY(0);transform-origin:top left;}

/* Compact variant: the 30-card "Everything Inside" feature grid on the
   GROWVA Agency OS page reused .print-product-card, but that card's default
   padding/icon size was designed for an 8-card grid with longer copy — at
   30 cards with short one-line descriptions it read as oversized, mostly
   empty space. Tightens padding and shrinks the icon so the box matches
   its content instead of dwarfing it. */
.print-product-grid--preview .print-product-card{padding:20px 18px;}
.print-product-grid--preview .print-product-icon{width:28px;height:28px;margin:0 auto 10px;}
.print-product-grid--preview .print-product-icon svg{width:28px;height:28px;}
.print-product-grid--preview .print-product-name{font-size:.92rem;}
.print-product-grid--preview .print-product-desc{font-size:.82rem;line-height:1.4;}
.print-showcase-slides{position:relative;flex:1;min-height:420px;border-radius:16px;overflow:hidden;background:#141414;}
.print-showcase-slide{position:absolute;inset:0;background-position:50% 50%;background-size:cover;background-color:#141414;opacity:0;visibility:hidden;}
.print-showcase-slide:first-child{opacity:1;visibility:visible;}
.print-showcase-pin--static .print-showcase-track,.print-showcase-pin--static .print-showcase-fill{display:none;}
.print-showcase-pin--static .print-showcase-item-title{color:var(--ivory);}
.print-showcase-pin--static .print-showcase-item-specs span{color:rgba(246,246,246,.55);}
.print-showcase-pin--static .print-showcase-slides{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;min-height:0;border-radius:0;overflow:visible;background:transparent;}
.print-showcase-pin--static .print-showcase-slide{position:relative;inset:auto;opacity:1;visibility:visible;aspect-ratio:4/3;border-radius:14px;}
@media(max-width:899px){
  .print-showcase-pin{flex-direction:column;align-items:stretch;gap:28px;min-height:0;}
  .print-showcase-list{width:auto;padding-left:0;}
  .print-showcase-item{padding:16px 0;border-bottom:1px solid var(--line);}
  .print-showcase-track,.print-showcase-fill{display:none;}
  .print-showcase-item-title{color:var(--ivory)!important;}
  .print-showcase-item-specs span{color:rgba(246,246,246,.55)!important;}
  .print-showcase-slides{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;min-height:0;border-radius:0;overflow:visible;background:transparent;}
  .print-showcase-slide{position:relative;inset:auto;opacity:1;visibility:visible;aspect-ratio:4/3;border-radius:14px;}
}
@media(max-width:560px){.print-showcase-pin--static .print-showcase-slides,.print-showcase-slides{grid-template-columns:1fr;}}

/* Materials & finishing swatches */
.print-materials{padding:64px 0;border-top:1px solid var(--line);}
.print-materials-grid{display:flex;flex-wrap:wrap;gap:36px;justify-content:center;}
.print-material-card{display:flex;flex-direction:column;align-items:center;gap:14px;width:150px;text-align:center;}
.print-material-swatch{width:128px;height:128px;border-radius:50%;background-position:50% 50%;background-size:cover;border:1px solid rgba(246,246,246,.14);background-color:#181818;}
.print-material-label{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:rgba(246,246,246,.6);line-height:1.4;}
@media(max-width:560px){.print-material-swatch{width:100px;height:100px;}.print-material-card{width:120px;}}

/* Quote request section */
.print-quote{padding:64px 0 80px;border-top:1px solid var(--line);}
.print-quote-inner{display:grid;grid-template-columns:.8fr 1.6fr;gap:48px;background:linear-gradient(160deg,rgba(177,250,32,.04),transparent);border:1px solid var(--line);border-radius:20px;padding:44px;}
.print-quote-intro-icon{width:46px;height:46px;color:var(--mint);margin-bottom:18px;}
.print-quote-intro-icon svg{width:100%;height:100%;}
.print-quote-intro h2{margin-bottom:12px;}
.print-quote-intro p{font-size:.92rem;line-height:1.6;color:rgba(246,246,246,.6);}
.print-quote .form-group label{color:rgba(246,246,246,.5);}
.print-quote .form-group input,.print-quote .form-group select,.print-quote .form-group textarea{
  background:rgba(255,255,255,.03);border-color:var(--line);color:var(--ivory);
}
.print-quote .form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;}
.print-quote-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:8px;}
.print-quote-whatsapp{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.78rem;color:var(--mint);}
.print-quote-whatsapp svg{width:18px;height:18px;}
.print-quote-whatsapp:hover{text-decoration:underline;}
@media(max-width:899px){.print-quote-inner{grid-template-columns:1fr;padding:32px 24px;}.print-quote .form-row-3{grid-template-columns:1fr;}}