:root{
  --bg:#fbfbf8;
  --bg-alt:#f1f0ea;
  --card:#ffffff;
  --text:#111110;
  --muted:#5a5a56;
  --accent:#c6ff33;
  --accent-dim:#94c723;
  --accent-ink:#527a0f;
  --pink:#e0308f;
  --cyan:#0aa8c9;
  --orange:#e07a1c;
  --purple:#7a3fd6;
  --border:rgba(10,10,10,0.1);
  --serif: 'Georgia', 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  line-height:1.6;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

.wrap{max-width:1100px;margin:0 auto;padding:0 32px;}

header.site{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:24px 32px;
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  background:rgba(251,251,248,0.92);
  backdrop-filter:blur(6px);
  z-index:10;
}
header.site .logo{
  font-family:var(--serif);
  font-size:22px;
  letter-spacing:0.5px;
}
header.site .logo span{color:var(--accent-ink);}
nav.site-nav{display:flex;gap:24px;flex-wrap:wrap;}
nav.site-nav a{
  font-size:13px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--muted);
  transition:color .15s;
}
nav.site-nav a:hover, nav.site-nav a.active{color:var(--accent-ink);}

.hero{
  padding:96px 32px 72px;
  text-align:center;
  border-bottom:1px solid var(--border);
}
.hero .eyebrow{
  color:var(--accent-ink);
  letter-spacing:0.15em;
  font-size:12px;
  text-transform:uppercase;
  margin-bottom:18px;
}
.hero h1{
  font-family:var(--serif);
  font-size:56px;
  margin:0 0 20px;
}
.hero p{
  max-width:560px;
  margin:0 auto 32px;
  color:var(--muted);
  font-size:17px;
}
.btn-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}
.btn{
  display:inline-block;
  padding:14px 28px;
  border-radius:999px;
  font-size:14px;
  font-weight:600;
  letter-spacing:0.02em;
}
.btn-primary{background:var(--accent);color:#0a0a0a;}
.btn-secondary{border:1px solid var(--border);color:var(--text);}
.btn:hover{opacity:0.82;}

/* View Website button (prominent, used inside cards) */
.btn-view{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:6px;
  padding:10px 20px;
  border-radius:999px;
  background:var(--text);
  color:var(--bg) !important;
  font-size:13px;
  font-weight:700;
  letter-spacing:0.03em;
  text-transform:uppercase;
  transition:transform .2s ease, background .2s ease;
}
.btn-view:hover{background:var(--accent-ink);transform:translateY(-2px);}
.btn-view.on-accent{background:var(--accent);color:#0a0a0a !important;}
.btn-view.on-accent:hover{background:var(--accent-dim);}

section{padding:72px 32px;}
section.alt{background:var(--bg-alt);}
.section-head{max-width:640px;margin:0 auto 48px;text-align:center;}
.section-head .eyebrow{color:var(--accent-ink);letter-spacing:0.15em;font-size:12px;text-transform:uppercase;margin-bottom:14px;}
.section-head h2{font-family:var(--serif);font-size:34px;margin:0 0 12px;}
.section-head p{color:var(--muted);}

.grid{
  max-width:1100px;margin:0 auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:24px;
}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:28px;
  transition:transform .15s, border-color .15s, box-shadow .15s;
  box-shadow:0 1px 2px rgba(10,10,10,0.03);
}
.card:hover{transform:translateY(-3px);border-color:var(--accent-dim);box-shadow:0 16px 32px rgba(10,10,10,0.08);}
.card .tag{color:var(--accent-ink);font-size:12px;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:10px;display:block;}
.card h3{font-family:var(--serif);font-size:22px;margin:0 0 10px;}
.card p{color:var(--muted);font-size:15px;margin:0 0 14px;}
.card .stats{display:flex;gap:20px;margin-top:16px;flex-wrap:wrap;}
.card .stat b{display:block;font-size:22px;color:var(--accent-ink);font-family:var(--serif);}
.card .stat span{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:0.05em;}

.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px;
  margin:32px 0;
}
.gallery img{border-radius:10px;object-fit:cover;width:100%;height:280px;border:1px solid var(--border);cursor:zoom-in;transition:transform .3s ease, box-shadow .3s ease;}
.gallery img:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(10,10,10,0.12);}

/* ============ CAROUSEL / SLIDESHOW ============ */
.carousel-wrap{position:relative;margin:32px -8px;}
.carousel{
  display:flex;
  gap:16px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:8px 8px 20px;
  scrollbar-width:thin;
  scrollbar-color:var(--accent-dim) transparent;
}
.carousel::-webkit-scrollbar{height:6px;}
.carousel::-webkit-scrollbar-thumb{background:var(--accent-dim);border-radius:999px;}
.carousel-item{
  flex:0 0 auto;
  width:min(78vw,340px);
  scroll-snap-align:start;
}
.carousel-item img{
  width:100%;
  height:380px;
  object-fit:cover;
  border-radius:12px;
  border:1px solid var(--border);
  cursor:zoom-in;
  transition:transform .3s ease, box-shadow .3s ease;
}
.carousel-item img:hover{transform:translateY(-4px) scale(1.01);box-shadow:0 20px 40px rgba(10,10,10,0.14);}
.carousel-nav{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin:0 8px 8px;
}
.carousel-btn{
  width:42px;height:42px;
  border-radius:50%;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text);
  font-size:18px;
  cursor:pointer;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.carousel-btn:hover{background:var(--text);color:var(--bg);transform:translateY(-2px);}

/* ============ INTERACTIVE HOVER-GRID (Creative Direction) ============ */
.hover-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:10px;
  margin:32px 0;
}
.hover-grid .zoom-tile{aspect-ratio:1/1;}
@media (max-width:640px){
  .hover-grid{grid-template-columns:repeat(3,1fr);}
}

/* ============ BENTO GRID (Graphic Design) ============ */
.bento-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  grid-auto-rows:90px;
  gap:10px;
  margin:32px 0;
}
.bento-grid .zoom-tile{grid-column:span 2;grid-row:span 2;}
.bento-grid .zoom-tile.b-wide{grid-column:span 4;grid-row:span 2;}
.bento-grid .zoom-tile.b-tall{grid-column:span 2;grid-row:span 3;}
.bento-grid .zoom-tile.b-big{grid-column:span 3;grid-row:span 3;}
.bento-grid .zoom-tile.b-small{grid-column:span 2;grid-row:span 1;}
@media (max-width:800px){
  .bento-grid{
    grid-template-columns:repeat(3,1fr);
    grid-auto-rows:unset;
    justify-content:center;
  }
  .bento-grid .zoom-tile,
  .bento-grid .zoom-tile.b-wide,
  .bento-grid .zoom-tile.b-tall,
  .bento-grid .zoom-tile.b-big,
  .bento-grid .zoom-tile.b-small{
    grid-column:span 1 !important;
    grid-row:span 1 !important;
    aspect-ratio:1/1;
  }
  /* Center a lone tile left dangling on the final row */
  .bento-grid .zoom-tile:last-child:nth-child(3n+1){grid-column:2 !important;}
}

/* Shared zoom-tile: used by hover-grid, bento-grid, scatter-map */
.zoom-tile{
  position:relative;
  overflow:hidden;
  border-radius:10px;
  cursor:zoom-in;
  background:var(--card);
  border:1px solid var(--border);
  transition:transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, z-index 0s;
}
.zoom-tile img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  transition:transform .5s cubic-bezier(.22,.61,.36,1), filter .4s ease;
  filter:saturate(0.92);
}
.zoom-tile:hover{
  transform:scale(1.14);
  z-index:20;
  box-shadow:0 26px 60px rgba(10,10,10,0.22);
  border-color:var(--accent-dim);
}
.zoom-tile:hover img{transform:scale(1.06);filter:saturate(1.05);}
@media (hover:none){
  .zoom-tile:hover{transform:none;box-shadow:none;}
}

/* ============ SCATTERED MAP LAYOUT (Fashion) ============ */
.scatter-map{
  display:flex;
  flex-wrap:wrap;
  gap:20px 14px;
  margin:40px 0 20px;
  padding:10px;
}
.scatter-map .zoom-tile{
  width:150px;height:190px;
  flex:0 0 auto;
  border-radius:12px;
}
.scatter-map .zoom-tile:hover{transform:scale(1.22) rotate(0deg) !important;}
.scatter-map .pin-a{transform:rotate(-4deg) translateY(6px);}
.scatter-map .pin-b{transform:rotate(3deg) translateY(-8px);}
.scatter-map .pin-c{transform:rotate(-2deg) translateY(14px);}
.scatter-map .pin-d{transform:rotate(5deg) translateY(-4px);}
.scatter-map .pin-e{transform:rotate(-6deg) translateY(2px);}
.scatter-map .pin-f{transform:rotate(2deg) translateY(10px);}
.scatter-map .pin-g{transform:rotate(-3deg) translateY(-10px);}
.scatter-map .pin-h{transform:rotate(4deg) translateY(4px);}
.scatter-map .zoom-tile.pin-a:hover,.scatter-map .zoom-tile.pin-b:hover,.scatter-map .zoom-tile.pin-c:hover,
.scatter-map .zoom-tile.pin-d:hover,.scatter-map .zoom-tile.pin-e:hover,.scatter-map .zoom-tile.pin-f:hover,
.scatter-map .zoom-tile.pin-g:hover,.scatter-map .zoom-tile.pin-h:hover{transform:scale(1.25) rotate(0deg) translateY(0);}
@media (max-width:640px){
  .scatter-map{justify-content:center;gap:10px;padding:0;}
  .scatter-map .zoom-tile{width:calc((100% - 20px) / 3);height:auto;aspect-ratio:110/140;}
  .scatter-map .pin-a,.scatter-map .pin-b,.scatter-map .pin-c,.scatter-map .pin-d,
  .scatter-map .pin-e,.scatter-map .pin-f,.scatter-map .pin-g,.scatter-map .pin-h{
    transform:none;
  }
}

/* ============ VIDEO GRID (Animations & Videos) ============ */
.video-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:16px;
  margin:32px 0;
}
.video-tile{
  position:relative;
  overflow:hidden;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--card);
  aspect-ratio:9/16;
  transition:transform .3s ease, box-shadow .3s ease;
}
.video-tile:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(10,10,10,0.16);}
.video-tile video{width:100%;height:100%;object-fit:cover;display:block;background:#000;}
@media (max-width:800px){
  .video-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
}

.callout{
  background:var(--card);
  border-left:3px solid var(--accent-ink);
  border-radius:8px;
  padding:20px 24px;
  color:var(--muted);
  font-size:15px;
  max-width:760px;
  margin:32px auto;
}
.callout b{color:var(--text);}

.label-flag{
  display:inline-block;
  background:rgba(82,122,15,0.1);
  color:var(--accent-ink);
  border:1px solid var(--accent-dim);
  border-radius:999px;
  padding:4px 14px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  margin-bottom:16px;
}
.label-flag.warn{
  background:rgba(224,122,28,0.1);
  color:#a85a10;
  border-color:#e07a1c;
}

.brand-list{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  justify-content:center;
  max-width:800px;
  margin:0 auto;
}
.brand-list span{
  border:1px solid var(--border);
  padding:10px 20px;
  border-radius:999px;
  color:var(--muted);
  font-size:14px;
}

.case-block{max-width:760px;margin:0 auto 56px;}
.case-block h3{font-family:var(--serif);font-size:26px;margin:0 0 6px;}
.case-block .meta{color:var(--accent-ink);font-size:13px;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:16px;}
.case-block p{color:var(--muted);}
.case-block .roles{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0;}
.case-block .roles span{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:6px 12px;font-size:13px;color:var(--text);}

footer.site{
  padding:56px 32px;
  border-top:1px solid var(--border);
  text-align:center;
  color:var(--muted);
  font-size:14px;
}
footer.site a.accent{color:var(--accent-ink);}
footer.site .foot-links{margin-top:14px;display:flex;gap:20px;justify-content:center;flex-wrap:wrap;}

@media (max-width:640px){
  .hero h1{font-size:38px;}
  header.site{flex-direction:column;gap:14px;}
}

.lightbox-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(8,8,6,0.94);
  z-index:100;
  align-items:center;
  justify-content:center;
  padding:40px;
  cursor:zoom-out;
}
.lightbox-overlay.open{display:flex;}
.lightbox-overlay img{
  max-width:90vw;
  max-height:88vh;
  border-radius:10px;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
}
.lightbox-close{
  position:absolute;
  top:24px;
  right:32px;
  color:#fff;
  font-size:28px;
  line-height:1;
}

/* ============ SINGLE-PAGE SCROLL EXPERIENCE ============ */

html{scroll-behavior:smooth;}

/* Reveal on scroll — directional variants */
.reveal{
  opacity:0;
  transform:translateY(36px);
  transition:opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1);
  will-change:opacity, transform;
}
.reveal.dir-left{transform:translateX(-64px);}
.reveal.dir-right{transform:translateX(64px);}
.reveal.dir-up{transform:translateY(64px);}
.reveal.dir-down{transform:translateY(-64px);}
.reveal.dir-scale{transform:scale(0.85);}
.reveal.visible{opacity:1;transform:translate(0,0) scale(1);}

.reveal-stagger.visible .stagger-item{opacity:1;transform:translate(0,0) scale(1);}
.stagger-item{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}
.stagger-item.dir-left{transform:translateX(-48px);}
.stagger-item.dir-right{transform:translateX(48px);}
.stagger-item:nth-child(3n+1){transition-delay:.02s;}
.stagger-item:nth-child(3n+2){transition-delay:.12s;}
.stagger-item:nth-child(3n+3){transition-delay:.22s;}

/* Section numbering (Oliver Gareis-style) */
.work-section{
  padding:88px 32px;
  border-bottom:1px solid var(--border);
  position:relative;
  overflow:hidden;
}
.work-section:nth-child(even){background:var(--bg-alt);}
.work-num{
  position:absolute;
  top:48px;
  right:48px;
  font-family:var(--serif);
  font-size:120px;
  color:transparent;
  -webkit-text-stroke:1px var(--border);
  line-height:1;
  pointer-events:none;
  z-index:0;
}
.work-inner{position:relative;z-index:1;max-width:1100px;margin:0 auto;}
.work-kicker{
  display:flex;
  align-items:center;
  gap:14px;
  color:var(--accent-ink);
  font-size:13px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  margin-bottom:20px;
}
.work-kicker::before{content:"";width:32px;height:1px;background:var(--accent-ink);}
.work-title{font-family:var(--serif);font-size:clamp(32px,5vw,52px);margin:0 0 20px;max-width:700px;}
.work-desc{color:var(--muted);max-width:680px;font-size:16px;margin-bottom:40px;}

/* Tilt-on-hover cards */
.tilt-card{
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
  transform-style:preserve-3d;
}
.tilt-card:hover{
  border-color:var(--accent-dim);
  box-shadow:0 24px 48px rgba(10,10,10,0.1);
}

/* Logo marquee */
.marquee-wrap{
  overflow:hidden;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:40px 0;
  background:var(--bg-alt);
}
.marquee-track{
  display:flex;
  align-items:center;
  gap:0;
  width:max-content;
  animation:marquee 34s linear infinite;
}
.brand-item{
  display:flex;
  align-items:center;
  justify-content:center;
  height:56px;
  padding:0 40px;
  position:relative;
}
.brand-item::after{
  content:"";
  position:absolute;
  right:0;
  width:5px;height:5px;
  border-radius:50%;
  background:var(--accent-ink);
  opacity:0.45;
}
.marquee-track img.logo-img{
  height:30px;
  width:auto;
  max-width:150px;
  object-fit:contain;
  filter:grayscale(1) contrast(1.15) brightness(0.85);
  opacity:0.8;
  transition:opacity .3s ease, filter .3s ease;
}
.brand-item:hover img.logo-img{opacity:1;filter:grayscale(0) contrast(1) brightness(1);}
.marquee-track img.logo-img.logo-invert{
  filter:invert(1) grayscale(1) contrast(1.15) brightness(0.85);
}
.brand-item:hover img.logo-img.logo-invert{
  filter:invert(1) grayscale(0) contrast(1) brightness(1);
}
.marquee-track img.logo-caliwater{
  height:48px;
  max-width:200px;
}
.marquee-track .wordmark{
  display:flex;
  align-items:center;
  font-family:var(--serif);
  font-size:20px;
  letter-spacing:0.02em;
  color:var(--text);
  opacity:0.65;
  white-space:nowrap;
  transition:opacity .3s ease;
}
.brand-item:hover .wordmark{opacity:1;}
@keyframes marquee{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* Parallax hero layers */
.parallax-hero{
  position:relative;
  min-height:92vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
  border-bottom:1px solid var(--border);
}
.parallax-layer{
  position:absolute;
  inset:-10%;
  background:radial-gradient(circle at 30% 20%, rgba(198,255,51,0.16), transparent 55%),
             radial-gradient(circle at 75% 80%, rgba(224,48,143,0.10), transparent 50%);
  pointer-events:none;
  will-change:transform;
}
.hero-elevated{
  background:
    radial-gradient(ellipse 130% 70% at 50% -15%, rgba(198,255,51,0.16), transparent 60%),
    radial-gradient(ellipse 90% 60% at 90% 115%, rgba(224,48,143,0.12), transparent 55%),
    linear-gradient(165deg, #0a0a0a 0%, #131311 52%, #0a0a09 100%);
}
.parallax-hero .hero-content{position:relative;z-index:1;padding:0 32px;max-width:720px;}
.parallax-hero .eyebrow{color:var(--accent);letter-spacing:0.15em;font-size:12px;text-transform:uppercase;margin-bottom:18px;}
.parallax-hero h1{font-family:var(--serif);margin:0 0 20px;}
.parallax-hero p{color:#e6e6e0;font-size:17px;margin:0 auto 32px;max-width:560px;}
.hero-name{
  font-family:var(--serif);
  font-weight:700;
  background:linear-gradient(120deg, #ffffff 0%, #ffffff 55%, var(--accent) 115%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  letter-spacing:-0.01em;
  line-height:0.95;
}
.parallax-hero .btn-secondary{border-color:rgba(255,255,255,0.4);color:#fff;}

/* Sticky single-page nav */
.page-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 32px;
  position:fixed;
  top:0;left:0;right:0;
  z-index:50;
  background:rgba(251,251,248,0.7);
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, background .3s ease;
}
.page-nav.scrolled{background:rgba(251,251,248,0.94);border-color:var(--border);}
.page-nav .logo{font-family:var(--serif);font-size:20px;}
.page-nav .logo span{color:var(--accent-ink);}
.nav-links{display:flex;align-items:center;gap:26px;}
.nav-links a{font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);}
.nav-links a:hover{color:var(--accent-ink);}

/* Dropdown "Work" nav item */
.nav-drop{position:relative;}
.nav-drop > .nav-drop-trigger{
  background:none;border:none;cursor:pointer;
  font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);
  font-family:inherit;display:flex;align-items:center;gap:6px;padding:0;
}
.nav-drop > .nav-drop-trigger:hover{color:var(--accent-ink);}
.nav-drop-trigger .caret{font-size:9px;transition:transform .2s ease;}
.nav-drop.open .nav-drop-trigger .caret{transform:rotate(180deg);}
.nav-drop-menu{
  position:absolute;
  top:calc(100% + 14px);
  left:50%;
  transform:translateX(-50%) translateY(-8px);
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:0 20px 44px rgba(10,10,10,0.14);
  padding:10px;
  min-width:220px;
  display:flex;
  flex-direction:column;
  gap:2px;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
  z-index:60;
}
/* Invisible bridge so the cursor never crosses dead space between the
   trigger and the menu — without this, mouseleave fires on the gap
   before the pointer reaches the menu, and the dropdown closes instantly. */
.nav-drop-menu::before{
  content:"";
  position:absolute;
  top:-14px;
  left:0;
  right:0;
  height:14px;
}
.nav-drop.open .nav-drop-menu{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0);}
.nav-drop-menu a{
  padding:10px 14px;
  border-radius:8px;
  font-size:12px;
  letter-spacing:0.04em;
  text-transform:none;
  color:var(--text);
  display:flex;
  align-items:center;
  gap:10px;
}
.nav-drop-menu a .num{color:var(--accent-ink);font-family:var(--serif);font-size:14px;width:20px;}
.nav-drop-menu a:hover{background:var(--bg-alt);color:var(--text);}

.nav-toggle{display:none;background:none;border:1px solid var(--border);color:var(--text);border-radius:8px;padding:8px 12px;font-size:13px;}

@media (max-width:800px){
  .nav-links{
    position:fixed;
    top:64px;left:0;right:0;
    background:rgba(251,251,248,0.98);
    flex-direction:column;
    align-items:stretch;
    gap:0;
    max-height:0;
    overflow:hidden auto;
    transition:max-height .3s ease;
    border-bottom:1px solid var(--border);
  }
  .nav-links.open{max-height:70vh !important;}
  .nav-links > a{padding:16px 32px;width:100%;border-top:1px solid var(--border);}
  .nav-toggle{display:block;}
  .work-num{font-size:64px;top:24px;right:24px;}
  .work-section{padding:72px 24px;}

  .nav-drop{width:100%;}
  .nav-drop > .nav-drop-trigger{width:100%;padding:16px 32px;border-top:1px solid var(--border);justify-content:space-between;}
  /* Must match/exceed the specificity of the desktop ".nav-drop.open .nav-drop-menu"
     transform rule above, or that rule wins on mobile and shoves this off-screen
     by translateX(-50%) — which is exactly why the dropdown items were invisible. */
  .nav-drop-menu,
  .nav-drop.open .nav-drop-menu{
    position:static !important;
    left:auto !important;
    transform:none !important;
    opacity:1;
    pointer-events:auto;
    display:none;
    box-shadow:none;
    border:none;
    border-radius:0;
    background:var(--bg-alt);
    min-width:0;
    padding:0;
  }
  .nav-drop.open .nav-drop-menu{display:flex;}
  .nav-drop-menu a{padding:14px 44px;border-radius:0;}
}

/* ============ COLOR, SHAPES & MOTION ============ */

.gradient-text{
  background:linear-gradient(90deg, var(--accent-dim), var(--cyan) 45%, var(--pink) 75%, var(--orange));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  background-size:200% auto;
  animation:gradient-shift 8s ease-in-out infinite;
}
@keyframes gradient-shift{
  0%,100%{background-position:0% center;}
  50%{background-position:100% center;}
}

.blob-field{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
.blob{
  position:absolute;
  border-radius:50%;
  filter:blur(70px);
  opacity:0.4;
  mix-blend-mode:multiply;
  will-change:transform;
}
.blob-1{width:340px;height:340px;background:var(--accent);top:-60px;left:8%;animation:float-a 16s ease-in-out infinite;}
.blob-2{width:280px;height:280px;background:var(--pink);top:20%;right:10%;animation:float-b 13s ease-in-out infinite;}
.blob-3{width:260px;height:260px;background:var(--cyan);bottom:-40px;left:32%;animation:float-c 18s ease-in-out infinite;}
.blob-4{width:220px;height:220px;background:var(--orange);bottom:12%;right:24%;animation:float-a 14s ease-in-out infinite reverse;}
.blob-5{width:200px;height:200px;background:var(--purple);top:40%;left:48%;animation:float-b 20s ease-in-out infinite;}

/* On dark hero/contact sections, blend screen for glow effect over image */
.parallax-hero .blob{mix-blend-mode:screen;opacity:0.5;}

@keyframes float-a{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(30px,-40px) scale(1.12);}
}
@keyframes float-b{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(-36px,28px) scale(0.92);}
}
@keyframes float-c{
  0%,100%{transform:translate(0,0) rotate(0deg);}
  50%{transform:translate(24px,20px) rotate(20deg);}
}

/* Decorative geometric shapes scattered in sections */
.shape{position:absolute;pointer-events:none;z-index:0;opacity:0.7;}
.shape-ring{border-radius:50%;border:2px solid currentColor;}
.shape-square{border:2px solid currentColor;}
.shape-dot{border-radius:50%;}
.shape-spin{animation:spin-slow 22s linear infinite;}
.shape-drift{animation:float-a 12s ease-in-out infinite;}
@keyframes spin-slow{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}

.work-kicker.c-pink{color:var(--pink);}
.work-kicker.c-pink::before{background:var(--pink);}
.work-kicker.c-cyan{color:var(--cyan);}
.work-kicker.c-cyan::before{background:var(--cyan);}
.work-kicker.c-orange{color:var(--orange);}
.work-kicker.c-orange::before{background:var(--orange);}
.work-kicker.c-purple{color:var(--purple);}
.work-kicker.c-purple::before{background:var(--purple);}

.work-num.c-pink{-webkit-text-stroke-color:var(--pink);opacity:0.3;}
.work-num.c-cyan{-webkit-text-stroke-color:var(--cyan);opacity:0.3;}
.work-num.c-orange{-webkit-text-stroke-color:var(--orange);opacity:0.3;}
.work-num.c-purple{-webkit-text-stroke-color:var(--purple);opacity:0.3;}

@media (max-width:800px){
  .blob{filter:blur(40px);opacity:0.3;}
  .blob-1,.blob-2,.blob-3,.blob-4,.blob-5{width:160px;height:160px;}
}

/* ============ CUSTOM CURSOR ============ */
.cursor-dot, .cursor-ring{
  position:fixed;
  top:0;left:0;
  border-radius:50%;
  pointer-events:none;
  z-index:9999;
  transform:translate(-50%,-50%);
  will-change:transform;
}
.cursor-dot{
  width:8px;height:8px;
  background:var(--text);
  transition:opacity .2s ease, background .2s ease;
}
.cursor-ring{
  width:36px;height:36px;
  border:1.5px solid var(--text);
  opacity:0.6;
  transition:width .25s ease, height .25s ease, opacity .25s ease, border-color .25s ease, background .25s ease;
}
.cursor-ring.hovering{
  width:64px;height:64px;
  background:rgba(198,255,51,0.25);
  border-color:var(--accent-ink);
  opacity:1;
}
.cursor-ring.on-image{
  width:84px;height:84px;
  background:rgba(17,17,16,0.06);
  border-color:var(--text);
}
body.custom-cursor-active, body.custom-cursor-active a, body.custom-cursor-active button{cursor:none;}

@media (max-width:900px), (hover:none){
  .cursor-dot,.cursor-ring{display:none !important;}
  body.custom-cursor-active{cursor:auto;}
}

@media (prefers-reduced-motion: reduce){
  .gradient-text{animation:none;}
  .blob, .shape-spin, .shape-drift{animation:none;}
  .reveal, .stagger-item{opacity:1 !important;transform:none !important;transition:none !important;}
  .marquee-track{animation:none;}
  .parallax-layer{display:none;}
  .cursor-dot,.cursor-ring{display:none !important;}
  html{scroll-behavior:auto;}
}