/* ══════════════════════════════════════
   THEMES
══════════════════════════════════════ */
[data-theme="dark-gold"]{
  --bg:#050507;--bg2:#09090d;--surface:#0d0d12;
  --gold:#c9a96e;--gold-light:#e8cc9a;--gold-dim:rgba(201,169,110,0.12);
  --text:#e8e4de;--text-dim:#5a5855;--text-mid:#9a9088;
  --border:rgba(201,169,110,0.1);--border-s:rgba(201,169,110,0.22);
  --shader-a:0.2,0.05,0.0;--shader-b:0.05,0.08,0.15;
  --accent-rgb:201,169,110;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;scroll-behavior:auto} /* lenis handles scroll */
body{
  background:var(--bg);color:var(--text);
  font-family:'DM Mono',monospace;cursor:none;overflow-x:hidden;
  transition:background .5s,color .5s;
}

/* ══════════════════════════════════════
   LOADER
══════════════════════════════════════ */
#loader{
  position:fixed;inset:0;z-index:10000;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:#050507;transition:opacity .7s,visibility .7s;
}
#loader.done{opacity:0;visibility:hidden;pointer-events:none}
.loader-name{font-family:'Cormorant Garamond',serif;font-size:clamp(3rem,8vw,7rem);font-weight:700;letter-spacing:-.02em}
.ln-char{display:inline-block;transform:translateY(100%);opacity:0;transition:transform .6s cubic-bezier(.22,1,.36,1),opacity .4s}
.ln-char.it{font-style:italic;color:#c9a96e;font-weight:300}
.loader-bar-wrap{margin-top:3rem;width:200px;height:1px;background:rgba(201,169,110,.15)}
.loader-bar{height:100%;width:0%;background:#c9a96e;transition:width .05s linear}
.loader-pct{margin-top:1rem;font-size:.52rem;letter-spacing:.3em;color:#5a5855}

/* ══════════════════════════════════════
   CURTAINS
══════════════════════════════════════ */
#ct,#cb{
  position:fixed;left:0;right:0;z-index:9999;
  background:var(--bg);pointer-events:none;
  transition:transform .95s cubic-bezier(.77,0,.18,1);
}
#ct{top:0;height:50%;transform:translateY(0)}
#cb{bottom:0;height:50%;transform:translateY(0)}
#ct.open{transform:translateY(-100%)}
#cb.open{transform:translateY(100%)}

/* ══════════════════════════════════════
   SCROLL PROGRESS
══════════════════════════════════════ */
#prog{position:fixed;top:0;left:0;height:2px;z-index:400;background:var(--gold);width:0%;box-shadow:0 0 10px rgba(var(--accent-rgb),.6)}

/* ══════════════════════════════════════
   CURSOR
══════════════════════════════════════ */
#cd{position:fixed;width:8px;height:8px;background:var(--gold);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);mix-blend-mode:difference;transition:width .15s,height .15s}
#cr{position:fixed;width:36px;height:36px;border:1px solid rgba(var(--accent-rgb),.4);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width .3s cubic-bezier(.25,.46,.45,.94),height .3s cubic-bezier(.25,.46,.45,.94),border-color .3s}
body:has(a:hover) #cd,body:has(button:hover) #cd{width:4px;height:4px}
body:has(a:hover) #cr,body:has(button:hover) #cr{width:52px;height:52px;border-color:var(--gold)}

/* ══════════════════════════════════════
   SHADER CANVAS
══════════════════════════════════════ */
#shader-canvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none}
#three-canvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;pointer-events:none}
.hr-gold-static{width:100%;height:1px;background:linear-gradient(to right,transparent,var(--gold),transparent);position:relative;z-index:2;background-color:var(--bg)}

/* ══════════════════════════════════════
   NOISE
══════════════════════════════════════ */
body::before{content:'';position:fixed;inset:0;z-index:500;pointer-events:none;opacity:.022;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ══════════════════════════════════════
   NAV
══════════════════════════════════════ */
nav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;justify-content:space-between;align-items:center;padding:1.8rem 5vw;background:linear-gradient(to bottom,rgba(var(--accent-rgb),.04),transparent);transition:background .4s,backdrop-filter .4s}
.nav-logo{font-family:'Cormorant Garamond',serif;font-size:1.4rem;font-weight:600;color:var(--gold);text-decoration:none;letter-spacing:.08em;cursor:none}
.nav-logo span{font-style:italic;font-weight:300}
.nav-links{display:flex;gap:2.5rem;list-style:none}
.nav-links a{color:var(--text-dim);text-decoration:none;font-size:.56rem;letter-spacing:.25em;text-transform:uppercase;transition:color .3s;cursor:none;position:relative}
.nav-links a::after{content:'';position:absolute;bottom:-3px;left:0;right:0;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.nav-links a:hover{color:var(--gold)}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-links a.active{color:var(--gold)}
.nav-right{display:flex;align-items:center;gap:1.5rem}
.nav-status{display:flex;align-items:center;gap:.6rem;font-size:.5rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim)}
.s-dot{width:6px;height:6px;border-radius:50%;background:#4caf8a;box-shadow:0 0 8px rgba(76,175,138,.8);animation:blink 2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

/* Live clock */
#live-clock{font-size:.5rem;letter-spacing:.18em;color:var(--text-dim);text-transform:uppercase}
#live-clock span{color:var(--gold)}

/* Theme switcher */
.theme-btn{
  display:flex;align-items:center;gap:.4rem;
  background:none;border:1px solid var(--border);
  color:var(--text-dim);font-family:'DM Mono',monospace;
  font-size:.48rem;letter-spacing:.2em;text-transform:uppercase;
  padding:.35rem .8rem;cursor:none;transition:all .3s;
}
.theme-btn:hover{border-color:var(--gold);color:var(--gold)}
.theme-dot{width:6px;height:6px;border-radius:50%;background:var(--gold)}

/* ══════════════════════════════════════
   SECTIONS
══════════════════════════════════════ */
section{position:relative;z-index:2}
#about,#dna-section,#experience,#projects,#contact,
#radar-section,#quote-section,#process-section,
#blog-section,#testimonials,#looking-section,
#learning-strip,#avail-cal-section,#github-section{
  background:var(--bg);
}


/* ══════════════════════════════════════
   HERO CONNECTOR — left name to right card
══════════════════════════════════════ */
#hero-connector{
  position:absolute;
  top:0;left:0;width:100%;height:100%;
  pointer-events:none;
  z-index:3;
  opacity:0;
  transition:opacity 2s ease 2.6s;
}
.hero-ready #hero-connector{opacity:1}
/* ══════════════════════════════════════
   HERO
══════════════════════════════════════ */
#hero{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr;align-items:center;padding:0 5vw 0 10vw;overflow:hidden;position:relative}
.hero-left{display:flex;flex-direction:column;justify-content:center;z-index:2}
.hero-right{display:flex;align-items:center;justify-content:center;height:100%;max-height:72vh;z-index:2;position:relative;align-self:center;padding:2rem 2rem 2rem 1rem}

#hero-title-canvas{width:100%;height:100%;display:block;opacity:0;transition:opacity 1.2s 1.8s;}
#hero-title-canvas.ready{opacity:1}
.hero-tag{display:inline-flex;align-items:center;gap:1rem;font-size:.55rem;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);margin-bottom:2.5rem;opacity:0}
.hero-tag::before{content:'';width:30px;height:1px;background:var(--gold)}
.hero-name{font-family:'Cormorant Garamond',serif;font-size:clamp(5rem,12vw,11rem);line-height:.9;font-weight:700;letter-spacing:-.03em;overflow:hidden}
.hero-name-line{overflow:hidden;display:block;padding-bottom:0.15em;margin-bottom:-0.15em}
.char{display:inline-block;transform:translateY(110%);opacity:0;transition:transform .8s cubic-bezier(.22,1,.36,1),opacity .5s}
.char.it{font-style:italic;font-weight:300;color:var(--gold)}
.char.ol{-webkit-text-stroke:1px rgba(var(--accent-rgb),.3);color:transparent}
.hero-descriptor{display:flex;align-items:center;gap:2rem;margin-top:2.5rem;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-mid);opacity:0;transform:translateY(16px);transition:opacity .8s 1.4s,transform .8s 1.4s}
.hero-descriptor span{color:var(--gold-light)}
.hero-descriptor .dot{color:var(--text-dim)}
.hero-bio{margin-top:2.5rem;max-width:520px;font-family:'Syne',sans-serif;font-size:.97rem;line-height:1.85;color:var(--text-mid);opacity:0;transform:translateY(16px);transition:opacity .8s 1.65s,transform .8s 1.65s}
.hero-bio strong{color:var(--text)}
.hero-cta{margin-top:3.5rem;display:flex;gap:1.5rem;opacity:0;transform:translateY(16px);transition:opacity .8s 1.9s,transform .8s 1.9s}
.hero-ready .hero-tag{opacity:1;transition:opacity .8s .2s}
.hero-ready .char{transform:translateY(0);opacity:1}
.hero-ready .hero-descriptor,.hero-ready .hero-bio,.hero-ready .hero-cta{opacity:1;transform:translateY(0)}
.hero-scroll{position:absolute;bottom:3rem;left:5vw;display:flex;align-items:center;gap:1rem;font-size:.5rem;letter-spacing:.3em;text-transform:uppercase;color:var(--text-dim);opacity:0;transition:opacity .8s 2.2s;grid-column:1/-1;z-index:3}
.hero-ready .hero-scroll{opacity:1}
.hero-scroll::before{content:'';width:36px;height:1px;background:var(--text-dim)}

.btn{display:inline-flex;align-items:center;gap:.8rem;padding:.9rem 2.2rem;font-family:'DM Mono',monospace;font-size:.56rem;letter-spacing:.25em;text-transform:uppercase;text-decoration:none;cursor:none;transition:all .35s cubic-bezier(.25,.46,.45,.94);position:relative;overflow:hidden}
.btn::before{content:'';position:absolute;inset:0;transform:translateX(-101%);transition:transform .35s cubic-bezier(.22,1,.36,1)}
.btn:hover::before{transform:translateX(0)}
.btn span{position:relative;z-index:1}
.btn-primary{background:var(--gold);color:var(--bg);font-weight:500}
.btn-primary::before{background:var(--gold-light)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(var(--accent-rgb),.3)}
.btn-ghost{border:1px solid var(--border-s);color:var(--text-dim)}
.btn-ghost::before{background:rgba(var(--accent-rgb),.07)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-3px)}

/* ══════════════════════════════════════
   MARQUEE
══════════════════════════════════════ */
.marquee-wrap{position:relative;z-index:2;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:.75rem 0;overflow:hidden;background:var(--bg2)}
.marquee-track{display:flex;width:max-content;animation:mq 28s linear infinite}
.marquee-wrap:hover .marquee-track{animation-play-state:paused}
.marquee-item{display:flex;align-items:center;gap:2rem;padding:0 2rem;font-size:.52rem;letter-spacing:.3em;text-transform:uppercase;color:var(--text-dim);white-space:nowrap}
.marquee-item .sep{color:var(--gold)}
@keyframes mq{to{transform:translateX(-50%)}}

/* ══════════════════════════════════════
   ABOUT
══════════════════════════════════════ */
#about{padding:10rem 10vw;display:grid;grid-template-columns:1fr 1fr;gap:8rem;align-items:start}
.about-left{position:sticky;top:10rem}
.section-label{display:flex;align-items:center;gap:1rem;font-size:.5rem;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);margin-bottom:2rem}
.section-label::before{content:'';width:24px;height:1px;background:var(--gold)}
.about-headline{font-family:'Cormorant Garamond',serif;font-size:clamp(2.8rem,5vw,5rem);line-height:1.05;font-weight:600;margin-bottom:2rem}
.about-headline em{font-style:italic;color:var(--gold);font-weight:300}
.about-body{font-family:'Syne',sans-serif;font-size:.93rem;line-height:1.9;color:var(--text-mid);margin-bottom:1.5rem}
.about-body strong{color:var(--text)}
.stats-row{display:flex;gap:3rem;margin-top:3rem}
.stat-num{font-family:'Cormorant Garamond',serif;font-size:3rem;font-weight:700;color:var(--gold);line-height:1}
.stat-label{font-size:.5rem;letter-spacing:.22em;text-transform:uppercase;color:var(--text-dim);margin-top:.4rem}
.skill-category{margin-bottom:2.5rem}
.skill-cat-name{font-size:.5rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem;padding-bottom:.6rem;border-bottom:1px solid var(--border)}
.skill-pills{display:flex;flex-wrap:wrap;gap:.5rem}
.skill-pill{padding:.4rem 1rem;font-size:.55rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-mid);border:1px solid var(--border);background:var(--surface);transition:all .25s}
.skill-pill:hover{border-color:var(--gold);color:var(--gold);background:var(--gold-dim)}
.cert-row{display:flex;gap:1rem;margin-top:1rem;flex-wrap:wrap}
.cert-badge{display:inline-flex;align-items:center;gap:.6rem;padding:.45rem 1rem;font-size:.5rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);border:1px solid var(--border-s);background:var(--gold-dim)}
.cert-badge::before{content:'✦';font-size:.45rem}

/* ══════════════════════════════════════
   EXPERIENCE
══════════════════════════════════════ */
/* ══════════════════════════════════════
   GEODE EXPERIENCE SECTION
══════════════════════════════════════ */
#experience{padding:8rem 0 0;overflow:hidden;position:relative;z-index:2;background:var(--bg)}
#experience .section-header{padding:0 10vw;margin-bottom:0}

/* ── Geode stage ── */
#geode-stage{
  position:relative;
  height:100vh;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  cursor:none;
  touch-action: pan-y;

}
#geode-canvas{
  position:absolute;inset:0;
  width:100%;height:100%;
  display:block;
}
/* ── Info overlay ── */
#geode-hint{
  position:absolute;bottom:2.8rem;left:50%;
  transform:translateX(-50%);
  font-size:.42rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--text-dim);pointer-events:none;z-index:20;
  white-space:nowrap;transition:opacity .5s;
  display:flex;align-items:center;gap:.7rem;
}
.hint-mobile{display:none}
@media(hover:none),(max-width:900px){
  .hint-desktop{display:none}
  .hint-mobile{display:inline}
}
#geode-hint::before,#geode-hint::after{
  content:'';display:block;width:20px;height:1px;
  background:var(--text-dim);opacity:.4;
}
/* ── Pin hover card ── */
#shard-label{
  position:fixed;pointer-events:none;z-index:9999;
  opacity:0;
  transform:translate(-50%,-115%) scale(.94);
  transition:opacity .22s cubic-bezier(.22,1,.36,1),transform .22s cubic-bezier(.22,1,.36,1);
  min-width:200px;
}
#shard-label.visible{
  opacity:1;transform:translate(-50%,-115%) scale(1);
}
#pin-card{
  background:rgba(5,5,7,0.92);
  border:1px solid var(--border-s);
  padding:.9rem 1.1rem .75rem;
  position:relative;overflow:hidden;
  backdrop-filter:blur(8px);
  box-shadow:0 8px 40px rgba(0,0,0,.5),0 0 0 1px rgba(var(--accent-rgb),.06);
}
/* gold left accent line */
#pin-card::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(to bottom,transparent,var(--gold),transparent);
}
/* shimmer sweep on appear */
#pin-card::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 40%,rgba(var(--accent-rgb),.06) 50%,transparent 60%);
  transform:translateX(-100%);
  transition:transform .5s ease .1s;
}
#shard-label.visible #pin-card::after{transform:translateX(100%);}
#pc-era{
  font-size:.36rem;letter-spacing:.4em;text-transform:uppercase;
  color:var(--gold);font-family:'DM Mono',monospace;
  margin-bottom:.4rem;display:flex;align-items:center;gap:.5rem;
}
#pc-era::before{content:'';display:block;width:12px;height:1px;background:var(--gold);flex-shrink:0}
#pc-city{
  font-family:'Cormorant Garamond',serif;
  font-size:1.3rem;font-weight:700;color:var(--text);
  line-height:1;letter-spacing:-.02em;margin-bottom:.25rem;
}
#pc-domain{
  font-size:.38rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-dim);font-family:'DM Mono',monospace;
  margin-bottom:.6rem;
}
#pc-snippet{
  font-family:'Syne',sans-serif;font-size:.75rem;
  color:var(--text-mid);line-height:1.6;
  border-top:1px solid var(--border);padding-top:.5rem;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
#pc-hint{
  margin-top:.55rem;font-size:.33rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--text-dim);font-family:'DM Mono',monospace;
  display:flex;align-items:center;gap:.4rem;
}
#pc-hint::before{content:'';display:block;width:8px;height:1px;background:var(--text-dim)}

/* ── ERA beacon city labels (screen-space) ── */
.era-pin-label{
  position:fixed;pointer-events:none;z-index:300;
  text-align:center;
  transition:opacity .3s ease;
  /* No transform here — set by JS */
}
.epl-city{
  display:block;
  font-family:'DM Mono',monospace;
  font-size:.38rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--text);
  text-shadow:0 0 12px rgba(0,0,0,1),0 0 24px rgba(0,0,0,.8),0 1px 3px rgba(0,0,0,1);
  white-space:nowrap;
}
.epl-year{
  display:block;
  font-family:'DM Mono',monospace;
  font-size:.28rem;letter-spacing:.18em;
  color:var(--gold);
  text-shadow:0 0 10px rgba(0,0,0,1),0 0 20px rgba(0,0,0,.9);
  margin-top:.15rem;white-space:nowrap;
}

/* ── Impact city label ── */
#imp-label{
  position:fixed;pointer-events:none;z-index:9998;
  opacity:0;transform:translate(-50%,-100%) scale(.9);
  transition:opacity .18s ease,transform .18s ease;
  text-align:center;
}
#imp-label.visible{opacity:1;transform:translate(-50%,-100%) scale(1);}
#imp-name{
  font-family:'Cormorant Garamond',serif;
  font-size:.95rem;font-weight:600;letter-spacing:.05em;
  color:var(--text);line-height:1;margin-bottom:.2rem;
  text-shadow:0 0 20px rgba(0,0,0,.9),0 0 6px rgba(0,0,0,1);
}
#imp-coords{
  font-family:'DM Mono',monospace;font-size:.3rem;
  letter-spacing:.18em;color:var(--gold);
  text-shadow:0 0 10px rgba(0,0,0,.9);
}
#imp-tag{
  font-family:'DM Mono',monospace;font-size:.28rem;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-dim);margin-top:.15rem;
  text-shadow:0 0 10px rgba(0,0,0,.9);
}
/* Scroll zoom hint */
#globe-scroll-hint{
  position:absolute;bottom:1.4rem;right:5vw;
  font-size:.36rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--text-dim);font-family:'DM Mono',monospace;
  display:flex;align-items:center;gap:.5rem;
  pointer-events:none;z-index:20;opacity:0;transition:opacity .6s;
}
#globe-scroll-hint.visible{opacity:1}
#globe-scroll-hint::before{
  content:'⌃';font-size:.55rem;color:var(--gold);opacity:.6;
}
/* ── Zoom buttons ── */
#globe-zoom-btns{
  position:absolute;top:50%;right:1.6rem;
  transform:translateY(-50%);
  display:flex;flex-direction:column;gap:.35rem;
  z-index:20;opacity:0;transition:opacity .8s 1s;
}
#globe-zoom-btns.visible{opacity:1}
.gz-btn{
  width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(5,5,7,0.75);
  border:1px solid var(--border);
  color:var(--text-dim);font-size:.9rem;line-height:1;
  cursor:pointer;transition:border-color .2s,color .2s,background .2s;
  font-family:'DM Mono',monospace;
  user-select:none;
  backdrop-filter:blur(4px);
}
.gz-btn:hover{border-color:var(--gold);color:var(--gold);background:rgba(201,169,110,.08)}
.gz-btn:active{transform:scale(.92)}
/* ══════════════════════════════════════
   ERA OVERLAY — fixed full-screen takeover
   Lives at body level so nothing clips it
══════════════════════════════════════ */
#globe-zoom{
  position:fixed;inset:0;z-index:2000;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:3px 1fr;
  pointer-events:none;
  opacity:0;visibility:hidden;
  background:rgba(4,4,6,0.97);
  transition:opacity .5s ease,visibility .5s ease;
}
#globe-zoom.open{opacity:1;visibility:visible;pointer-events:auto;}

/* Particle canvas */
#gz-particles{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:0;opacity:0;
  transition:opacity 1.2s .4s;
}
#globe-zoom.open #gz-particles{opacity:1;}

/* Timeline bar — full-width top strip */
#gz-timeline{
  grid-column:1/-1;z-index:5;
  display:flex;height:3px;align-self:start;
}
#gz-tl-fill{
  height:100%;width:0;
  background:linear-gradient(to right,rgba(var(--accent-rgb),.4),var(--gold));
  transition:width 1.6s cubic-bezier(.22,1,.36,1) .5s;
  box-shadow:0 0 12px rgba(var(--accent-rgb),.6);
}
#gz-tl-track{flex:1;background:rgba(255,255,255,.04);}

/* ── Left panel ── */
#gz-panel-left{
  position:relative;
  display:flex;flex-direction:column;justify-content:center;
  padding:4rem 4rem 4rem 6vw;
  background:transparent;
  border-right:1px solid rgba(var(--accent-rgb),.12);
  transform:translateX(-100%);
  transition:transform .95s cubic-bezier(.16,1,.3,1);
  overflow:hidden;z-index:1;
}
#globe-zoom.open #gz-panel-left{transform:translateX(0)}

/* Animated left edge line */
#gz-panel-left::before{
  content:'';position:absolute;left:0;top:0;width:2px;height:0%;
  background:linear-gradient(to bottom,transparent 0%,var(--gold) 40%,rgba(var(--accent-rgb),.3) 100%);
  transition:height 1.4s cubic-bezier(.22,1,.36,1) .4s;
  z-index:2;
}
#globe-zoom.open #gz-panel-left::before{height:100%}

/* Big ghosted city name watermark */
#gz-panel-left::after{
  content:attr(data-city);
  position:absolute;bottom:-1rem;left:-0.5rem;
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(5rem,13vw,14rem);font-weight:700;
  color:transparent;
  -webkit-text-stroke:1px rgba(var(--accent-rgb),.06);
  letter-spacing:-.04em;line-height:1;
  pointer-events:none;user-select:none;white-space:nowrap;
  z-index:0;
}

/* ── Right panel ── */
#gz-panel-right{
  position:relative;
  display:flex;flex-direction:column;justify-content:center;
  padding:4rem 6vw 4rem 4rem;
  background:transparent;
  transform:translateX(100%);
  transition:transform .95s cubic-bezier(.16,1,.3,1);
  overflow:hidden;z-index:1;
}
#globe-zoom.open #gz-panel-right{transform:translateX(0)}

/* Gold corner glow */
#gz-panel-right::before{
  content:'';position:absolute;top:0;right:0;
  width:300px;height:300px;pointer-events:none;
  background:radial-gradient(ellipse at top right,rgba(var(--accent-rgb),.07) 0%,transparent 65%);
}

/* Vertical center divider line */
#gz-panel-right::after{
  content:'';position:absolute;left:0;top:10%;height:0%;width:1px;
  background:linear-gradient(to bottom,transparent,rgba(var(--accent-rgb),.15),transparent);
  transition:height 1.2s cubic-bezier(.22,1,.36,1) .5s;
}
#globe-zoom.open #gz-panel-right::after{height:80%}

/* ── Back button: fixed sibling of overlay, never clipped ── */
#globe-zoom-back{
  position:fixed;
  top:1.6rem;left:2rem;
  z-index:2200; /* above everything */
  background:rgba(4,4,6,0.82);
  color:var(--text-dim);font-family:'DM Mono',monospace;
  font-size:.42rem;letter-spacing:.24em;text-transform:uppercase;
  cursor:none;
  display:none; /* hidden until overlay opens */
  align-items:center;gap:.6rem;
  padding:.48rem 1rem .48rem .7rem;
  border:1px solid var(--border-s);
  opacity:0;transform:translateY(-8px);
  transition:opacity .4s,transform .4s cubic-bezier(.22,1,.36,1),
             color .2s,border-color .2s,background .2s;
  backdrop-filter:blur(16px);
}
#globe-zoom-back.visible{
  display:flex;
  opacity:1;transform:translateY(0);
}
#globe-zoom-back:hover{
  color:var(--gold);border-color:var(--gold);
  background:rgba(var(--accent-rgb),.1);
}
#globe-zoom-back .back-arrow{
  display:inline-block;
  color:var(--gold);
  transition:transform .2s;
}
#globe-zoom-back:hover .back-arrow{transform:translateX(-3px);}

/* ══ LEFT PANEL CONTENT ══ */
#gz-era{
  font-size:.36rem;letter-spacing:.55em;text-transform:uppercase;
  color:var(--gold);margin-bottom:1.4rem;
  font-family:'DM Mono',monospace;
  opacity:0;transform:translateX(-20px);
  transition:opacity .5s .4s,transform .5s .4s;
  display:flex;align-items:center;gap:.8rem;position:relative;z-index:1;
}
#gz-era::before{content:'';display:block;width:24px;height:1px;background:var(--gold);flex-shrink:0}
#globe-zoom.open #gz-era{opacity:1;transform:translateX(0)}

#gz-sentence{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.8rem,3vw,3.2rem);
  font-weight:600;line-height:1.1;
  color:var(--text);letter-spacing:-.025em;
  margin-bottom:1.6rem;
  opacity:0;transform:translateX(-24px);
  transition:opacity .7s .5s,transform .7s .5s;
  position:relative;z-index:1;
}
#gz-sentence em{color:var(--gold);font-weight:300;font-style:italic}
#globe-zoom.open #gz-sentence{opacity:1;transform:translateX(0)}

#gz-body{
  font-family:'Syne',sans-serif;font-size:.84rem;
  line-height:1.95;color:var(--text-mid);
  margin-bottom:2.2rem;max-width:42ch;
  opacity:0;transform:translateX(-16px);
  transition:opacity .6s .62s,transform .6s .62s;
  position:relative;z-index:1;
}
#globe-zoom.open #gz-body{opacity:1;transform:translateX(0)}

/* Stat row — animated number counters */
#gz-stats{
  display:flex;gap:2.5rem;
  opacity:0;transform:translateX(-12px);
  transition:opacity .5s .75s,transform .5s .75s;
  position:relative;z-index:1;
  margin-bottom:1.5rem;
}
#globe-zoom.open #gz-stats{opacity:1;transform:translateX(0)}
.gz-stat{padding:0;background:none;border:none;}
.gz-stat-num{
  font-family:'Cormorant Garamond',serif;
  font-size:2.4rem;font-weight:700;color:var(--gold);line-height:1;
  display:block;
}
.gz-stat-label{
  font-size:.33rem;letter-spacing:.25em;text-transform:uppercase;
  color:var(--text-dim);margin-top:.3rem;font-family:'DM Mono',monospace;
  display:block;
}

#gz-live{
  font-size:.37rem;letter-spacing:.2em;text-transform:uppercase;
  color:#4caf8a;
  align-items:center;gap:.5rem;
  font-family:'DM Mono',monospace;
  opacity:0;transition:opacity .5s .85s;
  display:none;position:relative;z-index:1;
}
#gz-live.show{display:flex}
#globe-zoom.open #gz-live{opacity:1}
#gz-live::before{
  content:'';width:5px;height:5px;border-radius:50%;
  background:#4caf8a;box-shadow:0 0 8px rgba(76,175,138,.9);
  animation:blink 2s infinite;flex-shrink:0;
}
#gz-year-badge{
  position:absolute;bottom:2rem;left:6vw;
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(4rem,7vw,8rem);font-weight:700;
  color:transparent;
  -webkit-text-stroke:1px rgba(var(--accent-rgb),.07);
  letter-spacing:-.05em;line-height:1;
  pointer-events:none;user-select:none;
  opacity:0;transform:translateY(20px);
  transition:opacity .9s .6s,transform .9s .6s;
  z-index:0;
}
#globe-zoom.open #gz-year-badge{opacity:1;transform:translateY(0)}

/* ══ RIGHT PANEL CONTENT ══ */
#gz-mini-globe-wrap{
  width:160px;height:160px;
  position:absolute;top:3.5rem;right:5vw;
  opacity:0;transform:scale(.5) rotate(-25deg);
  transition:opacity .9s .3s,transform 1s cubic-bezier(.16,1,.3,1) .3s;
  border-radius:50%;
  box-shadow:0 0 0 1px rgba(var(--accent-rgb),.2),
             0 0 60px rgba(var(--accent-rgb),.15),
             0 0 120px rgba(var(--accent-rgb),.06);
  overflow:hidden;
}
#globe-zoom.open #gz-mini-globe-wrap{opacity:1;transform:scale(1) rotate(0deg)}
#gz-mini-globe{width:100%;height:100%;display:block;border-radius:50%}

#gz-city-sub{
  font-family:'DM Mono',monospace;font-size:.38rem;
  letter-spacing:.45em;text-transform:uppercase;color:var(--gold);
  margin-bottom:.6rem;margin-top:1rem;
  opacity:0;transform:translateX(18px);
  transition:opacity .5s .42s,transform .5s .42s;
}
#gz-city{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(2.6rem,4.5vw,5rem);
  font-weight:700;line-height:.92;letter-spacing:-.03em;
  color:var(--text);margin-bottom:.6rem;
  opacity:0;transform:translateX(26px);
  transition:opacity .7s .5s,transform .7s .5s;
}
#gz-city em{color:rgba(var(--accent-rgb),.4);font-style:normal}
#globe-zoom.open #gz-city{opacity:1;transform:translateX(0)}
#globe-zoom.open #gz-city-sub{opacity:1;transform:translateX(0)}

#gz-coords{
  font-family:'DM Mono',monospace;font-size:.38rem;letter-spacing:.2em;
  color:var(--text-dim);margin-bottom:2rem;
  opacity:0;transform:translateX(12px);
  transition:opacity .5s .6s,transform .5s .6s;
}
#globe-zoom.open #gz-coords{opacity:1;transform:translateX(0)}

#gz-divider{
  width:0;height:1px;
  background:linear-gradient(to right,var(--gold),rgba(var(--accent-rgb),.2),transparent);
  margin-bottom:1.8rem;
  transition:width 1.1s cubic-bezier(.22,1,.36,1) .55s;
  box-shadow:0 0 8px rgba(var(--accent-rgb),.3);
}
#globe-zoom.open #gz-divider{width:100%}

#gz-bullets{list-style:none;padding:0;margin:0;}
#gz-bullets li{
  font-family:'Syne',sans-serif;font-size:.8rem;
  line-height:1.75;color:var(--text-mid);
  padding:.32rem 0 .32rem 1.4rem;position:relative;
  border-bottom:1px solid rgba(var(--accent-rgb),.07);
  opacity:0;transform:translateX(16px);
}
#gz-bullets li:last-child{border-bottom:none}
#gz-bullets li::before{
  content:'→';position:absolute;left:0;
  color:var(--gold);font-size:.5rem;top:.44rem;
  transition:transform .2s;
}
#gz-bullets li:hover::before{transform:translateX(3px)}
#gz-bullets li strong{color:var(--text)}
#globe-zoom.open #gz-bullets li:nth-child(1){opacity:1;transform:translateX(0);transition:opacity .5s .62s,transform .5s .62s}
#globe-zoom.open #gz-bullets li:nth-child(2){opacity:1;transform:translateX(0);transition:opacity .5s .72s,transform .5s .72s}
#globe-zoom.open #gz-bullets li:nth-child(3){opacity:1;transform:translateX(0);transition:opacity .5s .82s,transform .5s .82s}
#globe-zoom.open #gz-bullets li:nth-child(4){opacity:1;transform:translateX(0);transition:opacity .5s .92s,transform .5s .92s}

/* Era navigation dots */
#gz-era-dots{
  display:flex;gap:.55rem;margin-top:2rem;
  opacity:0;transition:opacity .6s 1.1s;
}
#globe-zoom.open #gz-era-dots{opacity:1}
.gz-era-dot{
  width:6px;height:6px;border-radius:50%;
  background:rgba(var(--accent-rgb),.2);
  cursor:pointer;transition:background .25s,transform .3s,box-shadow .3s;
  position:relative;
}
.gz-era-dot::after{
  content:attr(data-label);
  position:absolute;bottom:140%;left:50%;transform:translateX(-50%);
  font-family:'DM Mono',monospace;font-size:.3rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--text-dim);white-space:nowrap;
  opacity:0;transition:opacity .2s;pointer-events:none;
}
.gz-era-dot:hover::after{opacity:1}
.gz-era-dot.active{
  background:var(--gold);
  box-shadow:0 0 10px rgba(var(--accent-rgb),.7),0 0 20px rgba(var(--accent-rgb),.3);
  transform:scale(1.5);
}
.gz-era-dot:hover:not(.active){
  background:rgba(var(--accent-rgb),.5);transform:scale(1.25);
}

/* Tilt */
#gz-panel-left,#gz-panel-right{will-change:transform;}
/* ── Globe live indicator ── */
#globe-live{
  position:absolute;top:2rem;right:5vw;
  display:flex;align-items:center;gap:.55rem;
  font-size:.42rem;letter-spacing:.22em;text-transform:uppercase;
  color:#4caf8a;z-index:20;pointer-events:none;
  opacity:0;transition:opacity .8s;
  font-family:'DM Mono',monospace;
}
#globe-live.visible{opacity:1}
.globe-live-dot{
  width:6px;height:6px;border-radius:50%;
  background:#4caf8a;box-shadow:0 0 8px rgba(76,175,138,.9);
  animation:blink 2s infinite;flex-shrink:0;
}
/* ── Globe caption ── */
#globe-caption{
  position:absolute;bottom:4.5rem;left:50%;
  transform:translateX(-50%);
  font-size:.44rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--text-dim);pointer-events:none;z-index:20;
  white-space:nowrap;opacity:0;transition:opacity 1s .5s;
  font-family:'DM Mono',monospace;
}
#globe-caption.visible{opacity:1}
/* ── Override hint position for globe ── */
#geode-hint{bottom:2.2rem}
@media(max-width:768px){
  #globe-caption{display:none}
  #globe-live{top:1rem;right:3vw}
}

/* ══════════════════════════════════════
   PROJECTS — HORIZONTAL SCROLL
══════════════════════════════════════ */
#projects{padding:8rem 0}
#projects .section-header{padding:0 10vw;margin-bottom:0}
.projects-hint{padding:1rem 10vw 3rem;font-size:.52rem;letter-spacing:.25em;text-transform:uppercase;color:var(--text-dim);display:flex;align-items:center;gap:1rem}
.projects-hint::before{content:'←';color:var(--gold)}
.projects-hint::after{content:'→';color:var(--gold)}

.horiz-track-wrap{
  overflow:hidden;position:relative;
  padding:2rem 0 4rem;
  cursor:none;
  touch-action: pan-y;
}
.horiz-track{
  display:flex;gap:2px;
  padding:0 10vw;
  width:max-content;
  transition:transform .1s ease-out;
  will-change:transform;
  align-items:stretch;
}
/* tilt-wrap needs full height so cards stretch equally */
.tilt-wrap{height:auto;display:flex;align-items:stretch}
.project-card{
  flex-shrink:0;width:420px;
  background:var(--bg2);padding:3rem;
  border:1px solid var(--border);
  cursor:none;text-decoration:none;color:inherit;
  display:flex;flex-direction:column;
  opacity:0;transform:translateY(24px);
  transition:opacity .8s,transform .8s,border-color .3s,box-shadow .3s,background .3s;
  position:relative;overflow:hidden;
}
.project-card::after{content:'';position:absolute;top:-60%;left:-60%;width:220%;height:220%;background:radial-gradient(circle at center,rgba(var(--accent-rgb),.05) 0%,transparent 60%);opacity:0;transition:opacity .4s;pointer-events:none}
.project-card:hover::after{opacity:1}
.project-card.visible{opacity:1;transform:translateY(0)}
.project-card:hover{background:var(--surface);border-color:var(--border-s);box-shadow:0 24px 60px rgba(0,0,0,.5)}
.project-card-featured{width:680px}
.project-card-num{font-size:.5rem;letter-spacing:.3em;color:var(--gold);margin-bottom:1.5rem;display:block}
.project-card-name{font-family:'Cormorant Garamond',serif;font-size:1.9rem;font-weight:600;line-height:1.15;margin-bottom:1rem;transition:color .3s}
.project-card:hover .project-card-name{color:var(--gold)}
.project-card-desc{font-family:'Syne',sans-serif;font-size:.82rem;line-height:1.8;color:var(--text-mid);margin-bottom:1.5rem;flex:1}
.project-card-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem}
.project-card-tag{font-size:.46rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim);padding:.22rem .65rem;border:1px solid var(--border)}
.project-card-arrow{font-size:1.2rem;color:var(--text-dim);transition:all .3s;display:inline-block;margin-top:auto;padding-top:1.5rem}
.project-card:hover .project-card-arrow{color:var(--gold);transform:translate(4px,-4px)}
.project-card-featured-visual{
  margin-top:2rem;height:140px;background:var(--surface);
  border:1px solid var(--border);position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.pfv-grid{position:absolute;inset:0;opacity:.15;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:28px 28px}
.pfv-orb{position:absolute;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(var(--accent-rgb),.2) 0%,transparent 70%);animation:orb 3s ease-in-out infinite}
.pfv-label{font-size:.5rem;letter-spacing:.3em;text-transform:uppercase;color:var(--text-dim);position:relative;z-index:1}
@keyframes orb{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.2);opacity:1}}

/* tilt hover handled above */

/* hover preview */
.project-preview{position:fixed;top:0;left:0;width:300px;height:185px;pointer-events:none;z-index:9990;opacity:0;transform:scale(.9) rotate(-2deg);transition:opacity .3s,transform .3s;border:1px solid var(--border-s);overflow:hidden}
.project-preview.show{opacity:1;transform:scale(1) rotate(0deg)}
.preview-inner{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:.5rem;letter-spacing:.25em;text-transform:uppercase;color:var(--text-dim);position:relative}
.p1{background:linear-gradient(135deg,#0d1520,#0a1a2e,#0d2040)}
.p2{background:linear-gradient(135deg,#0d1a15,#0a2018,#0d2820)}
.p3{background:linear-gradient(135deg,#1a0d1a,#200a20,#280d28)}
.p4{background:linear-gradient(135deg,#1a1000,#201400,#281a00)}
.p5{background:linear-gradient(135deg,#001a1a,#002020,#002828)}
.pv-grid{position:absolute;inset:0;opacity:.2;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:22px 22px}
.pv-glow{position:absolute;width:80px;height:80px;border-radius:50%;filter:blur(25px);opacity:.5}


/* ══════════════════════════════════════
   PROJECT CARD IMAGES (SVG illustrations)
══════════════════════════════════════ */
.card-img{
  width:100%;height:160px;border-radius:0;
  overflow:hidden;position:relative;
  margin-bottom:1.8rem;
  border:1px solid var(--border);
  background:var(--surface);
}
.card-img svg{width:100%;height:100%}
.card-img::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom,transparent 60%,var(--bg2));
  pointer-events:none;
}

/* ══════════════════════════════════════
   CASE STUDY MODAL
══════════════════════════════════════ */
#case-modal{
  position:fixed;inset:0;z-index:8000;
  opacity:0;visibility:hidden;
  transition:opacity .5s,visibility .5s;
  pointer-events:none;
}
#case-modal.open{opacity:1;visibility:visible;pointer-events:all}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.85);backdrop-filter:blur(8px)}
.modal-panel{
  position:fixed;
  top:5vh;left:50%;
  transform:translateX(-50%) translateY(40px);
  width:min(900px,95vw);
  height:90vh;
  background:var(--bg2);border:1px solid var(--border-s);
  overflow-y:scroll;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  z-index:8001;
  transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .5s;
  opacity:0;
}
#case-modal.open .modal-panel{
  transform:translateX(-50%) translateY(0);
  opacity:1;
}
.modal-close{
  position:absolute;top:2rem;right:2rem;
  background:none;border:1px solid var(--border);
  color:var(--text-dim);font-family:'DM Mono',monospace;
  font-size:.52rem;letter-spacing:.2em;text-transform:uppercase;
  padding:.45rem 1rem;cursor:none;transition:all .3s;z-index:2;
}
.modal-close:hover{border-color:var(--gold);color:var(--gold)}
.modal-hero{
  height:260px;background:var(--surface);
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;border-bottom:1px solid var(--border);
}
.modal-orb{position:absolute;width:200px;height:200px;border-radius:50%;filter:blur(60px);opacity:.35}
.modal-hero-label{font-family:'Cormorant Garamond',serif;font-size:3rem;font-weight:700;font-style:italic;color:var(--gold);position:relative;z-index:1}
.modal-body{padding:3rem}
.modal-title{font-family:'Cormorant Garamond',serif;font-size:2.5rem;font-weight:600;margin-bottom:.5rem}
.modal-meta{font-size:.52rem;letter-spacing:.25em;text-transform:uppercase;color:var(--text-dim);margin-bottom:2.5rem}
.modal-section-title{font-size:.55rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem;margin-top:2rem;display:flex;align-items:center;gap:.8rem}
.modal-section-title::before{content:'';width:20px;height:1px;background:var(--gold)}
.modal-text{font-family:'Syne',sans-serif;font-size:.9rem;line-height:1.85;color:var(--text-mid);margin-bottom:1rem}
.modal-text strong{color:var(--text)}
.modal-outcomes{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.5rem}
.modal-outcome{background:var(--surface);border:1px solid var(--border);padding:1.5rem;text-align:center}
.outcome-num{font-family:'Cormorant Garamond',serif;font-size:2rem;font-weight:700;color:var(--gold)}
.outcome-label{font-size:.5rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim);margin-top:.3rem}
.modal-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2rem}
.modal-tag{font-size:.48rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim);padding:.25rem .7rem;border:1px solid var(--border)}
.modal-grid-line{position:absolute;inset:0;opacity:.1;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:40px 40px}

/* ══════════════════════════════════════
   CONTACT
══════════════════════════════════════ */
#contact{padding:10rem 10vw;position:relative;overflow:hidden;text-align:center;border-top:1px solid var(--border)}
.contact-bg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:'Cormorant Garamond',serif;font-size:clamp(8rem,22vw,20rem);font-weight:700;font-style:italic;color:rgba(var(--accent-rgb),.022);white-space:nowrap;pointer-events:none;user-select:none;letter-spacing:-.05em}
.contact-label{font-size:.52rem;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);margin-bottom:2rem;display:block}
.contact-heading{font-family:'Cormorant Garamond',serif;font-size:clamp(3rem,8vw,8rem);line-height:.95;font-weight:600;margin-bottom:2rem}
.contact-heading em{font-style:italic;color:var(--gold);font-weight:300}
.contact-sub{font-family:'Syne',sans-serif;font-size:.92rem;color:var(--text-mid);line-height:1.9;margin-bottom:2rem}

/* Typing indicator */
.typing-indicator{
  display:inline-flex;align-items:center;gap:.8rem;
  font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-dim);margin-bottom:2.5rem;
  opacity:0;transition:opacity .5s;
}
.typing-indicator.show{opacity:1}
.typing-text{color:var(--gold)}
.typing-cursor{display:inline-block;width:2px;height:.8em;background:var(--gold);margin-left:2px;animation:blink .8s infinite}

.contact-email{display:inline-flex;align-items:center;gap:1rem;font-family:'Cormorant Garamond',serif;font-size:clamp(1.4rem,3vw,2.2rem);color:var(--text);text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:.3rem;transition:color .3s;cursor:none}
.contact-email:hover{color:var(--gold)}
.contact-info-row{display:flex;justify-content:center;gap:3rem;margin-top:2rem;flex-wrap:wrap}
.contact-info{font-size:.52rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim)}
.contact-info span{color:var(--gold)}
.social-links{display:flex;justify-content:center;gap:3rem;margin-top:5rem}
.social-link{font-size:.52rem;letter-spacing:.3em;text-transform:uppercase;color:var(--text-dim);text-decoration:none;transition:color .3s;cursor:none;position:relative}
.social-link::after{content:'';position:absolute;bottom:-3px;left:0;right:0;height:1px;background:var(--gold);transform:scaleX(0);transition:transform .3s;transform-origin:left}
.social-link:hover{color:var(--gold)}
.social-link:hover::after{transform:scaleX(1)}

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
footer{position:relative;z-index:2;border-top:1px solid var(--border);padding:2rem 5vw;display:flex;justify-content:space-between;align-items:center;font-size:.5rem;color:var(--text-dim);letter-spacing:.15em;text-transform:uppercase}
.footer-avail{display:flex;align-items:center;gap:.6rem;color:#4caf8a}
.footer-avail::before{content:'';width:6px;height:6px;border-radius:50%;background:#4caf8a;box-shadow:0 0 8px rgba(76,175,138,.8)}

/* ══════════════════════════════════════
   MUSIC PLAYER
══════════════════════════════════════ */
#music-btn{
  position:fixed;bottom:2rem;left:2rem;z-index:1000;
  display:flex;align-items:center;gap:.8rem;
  background:var(--bg2);border:1px solid var(--border-s);
  padding:.6rem 1.2rem;cursor:none;
  transition:border-color .3s,box-shadow .3s;
}
#music-btn:hover{border-color:var(--gold);box-shadow:0 8px 24px rgba(var(--accent-rgb),.15)}
.music-icon{font-size:.9rem;color:var(--gold);line-height:1}
.music-label{font-size:.45rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim);transition:color .3s}
#music-btn:hover .music-label{color:var(--gold)}
.music-viz{display:flex;align-items:flex-end;gap:2px;height:14px}
.music-bar{width:2px;background:var(--gold);border-radius:1px;transition:height .15s ease}
.music-bar:nth-child(1){height:4px}
.music-bar:nth-child(2){height:8px}
.music-bar:nth-child(3){height:6px}
.music-bar:nth-child(4){height:10px}
.music-bar:nth-child(5){height:4px}
#music-btn.playing .music-bar{animation:viz .4s ease-in-out infinite alternate}
#music-btn.playing .music-bar:nth-child(1){animation-delay:0s}
#music-btn.playing .music-bar:nth-child(2){animation-delay:.08s}
#music-btn.playing .music-bar:nth-child(3){animation-delay:.16s}
#music-btn.playing .music-bar:nth-child(4){animation-delay:.06s}
#music-btn.playing .music-bar:nth-child(5){animation-delay:.12s}
@keyframes viz{from{height:3px}to{height:13px}}





/* ══════════════════════════════════════
   EASTER EGG
══════════════════════════════════════ */
#egg{position:fixed;inset:0;z-index:20000;background:rgba(5,5,7,.96);display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
#egg.show{opacity:1;visibility:visible}
.egg-title{font-family:'Cormorant Garamond',serif;font-size:clamp(2rem,5vw,4rem);font-style:italic;color:var(--gold);margin-bottom:1rem}
.egg-sub{font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--text-mid);margin-bottom:2rem}
.egg-close{margin-top:2rem;font-size:.52rem;letter-spacing:.3em;text-transform:uppercase;color:var(--text-dim);cursor:none;border:1px solid var(--border);padding:.5rem 1.5rem;background:none;transition:color .3s,border-color .3s}
.egg-close:hover{color:var(--gold);border-color:var(--gold)}
.confetti-piece{position:absolute;width:6px;height:6px;border-radius:1px;animation:cf 2s ease-out forwards}
@keyframes cf{0%{opacity:1;transform:translateY(-20px) rotate(0deg)}100%{opacity:0;transform:translateY(80vh) rotate(720deg)}}

/* ══════════════════════════════════════
   HR + REVEAL
══════════════════════════════════════ */
/* hr-gold draws itself from centre outward */
.hr-gold{
  width:100%;height:1px;
  background:linear-gradient(to right,transparent,var(--gold),transparent);
  position:relative;z-index:2;background-color:var(--bg);
  transform-origin:center center;
  transform:scaleX(0);
  opacity:0;
  transition:transform 1.4s cubic-bezier(.22,1,.36,1), opacity .5s;
}
.hr-gold.hr-drawn{ transform:scaleX(1); opacity:1; }

.reveal{opacity:0;transform:translateY(32px);transition:opacity .9s,transform .9s}
.reveal.visible{opacity:1;transform:translateY(0)}

/* Section line draws left→right when section header becomes visible */
.section-line{
  flex:1;height:1px;
  background:var(--gold);
  transform-origin:left center;
  transform:scaleX(0);
  opacity:.35;
  transition:transform 1.1s cubic-bezier(.22,1,.36,1) .35s;
}
.reveal.visible .section-line{ transform:scaleX(1); }

/* Section header shared styles */
.section-header{display:flex;align-items:baseline;gap:2rem;margin-bottom:5rem}
.section-header-title{font-family:'Cormorant Garamond',serif;font-size:clamp(2.5rem,5vw,4.5rem)}
.section-num{font-size:.5rem;letter-spacing:.3em;color:var(--gold)}

/* ══════════════════════════════════════
   MOBILE
══════════════════════════════════════ */
@media(max-width:900px){
  nav{padding:1.5rem 5vw}
  .nav-links,.nav-status{display:none}
  #live-clock{display:none}
  .theme-btn{display:none}
  #hero{padding:0 6vw}
  #about{grid-template-columns:1fr;padding:6rem 6vw;gap:4rem}
  .about-left{position:static}
  #experience{padding:6rem 6vw}
  #projects{padding:6rem 0}
  .horiz-track{padding:0 6vw}
  .project-card{width:85vw}
  .project-card-featured{width:85vw}
  #contact{padding:6rem 6vw}
  #github-section{padding:4rem 6vw}
  .gh-grid{grid-template-columns:repeat(26,1fr)}
  footer{flex-direction:column;gap:1rem;padding:2rem 6vw;text-align:center}
  #music-btn{bottom:5rem}
  .stats-row{gap:2rem}
  .modal-outcomes{grid-template-columns:repeat(3,1fr)}
  #music-btn{bottom:5rem}
}

/* ── LOADER TERMINAL ── */
.loader-terminal{display:flex;flex-direction:column;gap:.8rem;min-width:340px}
.lt-line{display:flex;align-items:center;gap:.6rem;font-family:'DM Mono',monospace;font-size:.7rem;letter-spacing:.05em}
.lt-prompt{color:#c9a96e;font-size:.75rem}
.lt-text{color:#e8e4de}
.lt-cur{color:#c9a96e;animation:blink .7s infinite;font-size:.7rem}

/* ── HERO BUILDING TICKER ── */
.hero-building-ticker{
  display:inline-flex;align-items:center;gap:.8rem;
  padding:.4rem 1rem;border:1px solid rgba(76,175,138,.25);
  background:rgba(76,175,138,.05);
  margin-bottom:2rem;
  font-size:.48rem;letter-spacing:.18em;text-transform:uppercase;
}
.hbt-dot{width:6px;height:6px;border-radius:50%;background:#4caf8a;box-shadow:0 0 8px rgba(76,175,138,.8);animation:blink 2s infinite;flex-shrink:0}
.hbt-label{color:var(--text-dim)}
.hbt-value{color:#4caf8a;font-weight:500}

/* ── CURSOR LABEL ── */
#c-label{
  position:fixed;pointer-events:none;z-index:10000;
  font-size:.42rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);background:var(--bg);border:1px solid var(--border-s);
  padding:.2rem .5rem;
  opacity:0;transition:opacity .2s;
  transform:translate(16px,-50%);
  white-space:nowrap;
}
#c-label.show{opacity:1}

/* ── EMAIL COPY ── */
.email-copy-hint{
  font-size:.38rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--text-dim);border:1px solid var(--border);
  padding:.15rem .5rem;margin-left:.5rem;transition:all .3s;
}
.contact-email:hover .email-copy-hint{border-color:var(--gold);color:var(--gold)}
#copy-toast{
  position:fixed;bottom:3rem;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--gold);color:var(--bg);
  font-size:.5rem;letter-spacing:.2em;text-transform:uppercase;
  padding:.6rem 1.4rem;z-index:9000;
  opacity:0;transition:opacity .3s,transform .3s;
  pointer-events:none;
}
#copy-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── CONTACT FORM ── */
.contact-form-wrap{
  max-width:600px;margin:3rem auto 0;
  text-align:left;
}
.cf-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--border)}
.cf-title{font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-mid)}
.cf-powered{font-size:.42rem;letter-spacing:.15em;text-transform:uppercase;color:var(--text-dim)}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
.cf-field{margin-bottom:1rem}
.cf-label{display:block;font-size:.45rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim);margin-bottom:.5rem}
.cf-input{
  width:100%;background:var(--surface);border:1px solid var(--border);
  color:var(--text);font-family:'DM Mono',monospace;font-size:.65rem;
  padding:.75rem 1rem;outline:none;transition:border-color .3s;
  resize:none;
}
.cf-input:focus{border-color:var(--gold)}
.cf-input::placeholder{color:var(--text-dim)}
.cf-textarea{min-height:100px}
.cf-submit{margin-top:1rem;border:none;cursor:none}
#cf-status{
  margin-top:1rem;font-size:.52rem;letter-spacing:.15em;
  text-transform:uppercase;min-height:1.5rem;
}
#cf-status.ok{color:#4caf8a}
#cf-status.err{color:#e05555}

/* ── SKIP LINK (accessibility) ── */
/* ══════════════════════════════════════
   LETTER PANEL
══════════════════════════════════════ */
#letter-panel{pointer-events:all;perspective:1400px;perspective-origin:50% 44%;transform-style:preserve-3d;overflow:hidden;cursor:grab;width:100%;height:100%;min-height:420px;max-height:580px;position:relative;}
#letter-canvas{pointer-events:none}
#letter-canvas.ready{opacity:1}

/* Ink bleed canvas */
#ink-bleed-canvas{
  position:absolute;top:0;left:0;width:100%;height:100%;
  pointer-events:none;z-index:8;
}

/* Card transform origin for crumple animation */
/* Letter fold panels */
#lp-paper{transform-origin:center center;overflow:hidden;}
.lp-fold-flap{
  position:absolute;
  left:12%;right:12%;
  pointer-events:none;
  z-index:15;
  perspective:900px;
}
.lp-fold-inner{
  width:100%;height:100%;
  background:linear-gradient(160deg,#221c10 0%,#1c1710 50%,#17130d 100%);
  border-left:1px solid rgba(201,169,110,.22);
  border-right:1px solid rgba(201,169,110,.22);
  backface-visibility:hidden;
  transform-style:preserve-3d;
}
.lp-fold-top .lp-fold-inner{
  transform-origin:top center;
  transform:rotateX(180deg);
  border-top:1px solid rgba(201,169,110,.22);
  box-shadow:inset 0 -3px 10px rgba(0,0,0,.4);
}
.lp-fold-bot .lp-fold-inner{
  transform-origin:bottom center;
  transform:rotateX(-180deg);
  border-bottom:1px solid rgba(201,169,110,.22);
  box-shadow:inset 0 3px 10px rgba(0,0,0,.4);
}
.lp-fold-inner.open{
  transition:transform 0.7s cubic-bezier(0.4,0,0.2,1);
}
.lp-fold-top .lp-fold-inner.open{ transform:rotateX(0deg); }
.lp-fold-bot .lp-fold-inner.open{ transform:rotateX(0deg); }
#letter-email{
  /* sits below the wax seal, outside the card */
  position:absolute;bottom:2.2rem;left:50%;transform:translateX(-50%);
  font-family:'DM Mono',monospace;font-size:.42rem;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(201,169,110,.5);
  opacity:0;transition:opacity 1.4s;white-space:nowrap;z-index:10;
}
#letter-email::before{content:'→ ';color:rgba(201,169,110,.3)}
#letter-email a{color:inherit;text-decoration:none;}
#letter-email a:hover{color:var(--gold)}
#letter-email a{cursor:none;pointer-events:all}
#letter-lines-wrap{pointer-events:none;}
@media(max-width:900px){#letter-panel{display:none}}
.skip-link{
  position:absolute;top:-100px;left:1rem;
  background:var(--gold);color:var(--bg);
  padding:.5rem 1rem;font-size:.55rem;letter-spacing:.15em;text-transform:uppercase;
  text-decoration:none;z-index:99999;transition:top .2s;
}
.skip-link:focus{top:1rem}

/* ── MOBILE HAMBURGER ── */
#hamburger{
  display:none;flex-direction:column;gap:5px;cursor:none;
  background:none;border:none;padding:.4rem;z-index:300;
}
#hamburger span{
  display:block;width:22px;height:1px;background:var(--text-dim);
  transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .25s,background .3s;
}
#hamburger:hover span{background:var(--gold)}
#hamburger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
#hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
#hamburger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

#mobile-menu{
  position:fixed;inset:0;z-index:250;
  background:var(--bg);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2rem;
  opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s;
}
#mobile-menu.open{opacity:1;visibility:visible}
.mob-link{
  font-family:'Cormorant Garamond',serif;font-size:clamp(2.2rem,8vw,4rem);
  font-weight:600;color:var(--text);text-decoration:none;
  letter-spacing:-.02em;transition:color .3s;cursor:none;
  opacity:0;transform:translateY(20px);transition:opacity .5s,transform .5s,color .3s;
}
#mobile-menu.open .mob-link{opacity:1;transform:translateY(0)}
#mobile-menu.open .mob-link:nth-child(1){transition-delay:.05s}
#mobile-menu.open .mob-link:nth-child(2){transition-delay:.10s}
#mobile-menu.open .mob-link:nth-child(3){transition-delay:.15s}
#mobile-menu.open .mob-link:nth-child(4){transition-delay:.20s}
#mobile-menu.open .mob-link:nth-child(5){transition-delay:.25s}
.mob-link:hover,.mob-link em{color:var(--gold)}
.mob-email{font-size:.55rem;letter-spacing:.22em;text-transform:uppercase;color:var(--text-dim);margin-top:1rem;opacity:0;transition:opacity .5s .3s}
#mobile-menu.open .mob-email{opacity:1}

@media(max-width:900px){
  #hamburger{display:flex}
  body{cursor:auto}
  #cd,#cr{display:none}
}

/* ── TESTIMONIALS ── */
#testimonials{
  padding:8rem 10vw;border-top:1px solid var(--border);
}
.testimonials-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:4rem;
}
.testimonial-card{
  background:var(--bg2);border:1px solid var(--border);
  padding:2.5rem;position:relative;overflow:hidden;
  opacity:0;transform:translateY(20px);
  transition:opacity .8s,transform .8s,border-color .3s,background .3s;
}
.testimonial-card.visible{opacity:1;transform:translateY(0)}
.testimonial-card:hover{border-color:var(--border-s);background:var(--surface)}
.testimonial-card::before{
  content:'"';
  font-family:'Cormorant Garamond',serif;font-size:5rem;font-weight:700;
  color:rgba(var(--accent-rgb),.08);line-height:.7;
  position:absolute;top:1.5rem;right:1.5rem;pointer-events:none;
}
.testimonial-text{
  font-family:'Syne',sans-serif;font-size:.85rem;line-height:1.85;
  color:var(--text-mid);margin-bottom:2rem;font-style:italic;
}
.testimonial-text strong{color:var(--text);font-style:normal}
.testimonial-author{display:flex;align-items:center;gap:1rem;border-top:1px solid var(--border);padding-top:1.2rem}
.testimonial-avatar{
  width:36px;height:36px;border-radius:50%;
  background:var(--gold-dim);border:1px solid var(--border-s);
  display:flex;align-items:center;justify-content:center;
  font-family:'Cormorant Garamond',serif;font-size:1rem;font-weight:700;color:var(--gold);
  flex-shrink:0;
}
.testimonial-name{font-size:.52rem;letter-spacing:.15em;text-transform:uppercase;color:var(--text)}
.testimonial-role{font-size:.44rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);margin-top:.2rem}
.testimonial-note{font-size:.42rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(var(--accent-rgb),.5);margin-top:.15rem}

/* ── CURRENTLY LEARNING STRIP ── */
#learning-strip{
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:2.5rem 10vw;
  display:flex;align-items:center;gap:4rem;
  background:var(--bg2);
  flex-wrap:wrap;
  position:relative;z-index:2;
}
.learning-label{
  font-size:.46rem;letter-spacing:.35em;text-transform:uppercase;color:var(--gold);
  display:flex;align-items:center;gap:.8rem;flex-shrink:0;
}
.learning-label::before{content:'';width:20px;height:1px;background:var(--gold)}
.learning-items{display:flex;gap:1.5rem;flex-wrap:wrap;align-items:center;flex:1}
.learning-item{
  display:flex;align-items:center;gap:.6rem;
  font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--text-dim);
  padding:.35rem .9rem;border:1px solid var(--border);background:var(--surface);
  transition:border-color .3s,color .3s;
}
.learning-item:hover{border-color:var(--gold);color:var(--gold)}
.learning-item-icon{font-size:.85rem}
.learning-nz-time{
  margin-left:auto;font-size:.46rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--text-dim);flex-shrink:0;
}
.learning-nz-time span{color:var(--gold)}

@media(max-width:900px){
  .testimonials-grid{grid-template-columns:1fr}
  #testimonials{padding:6rem 6vw}
  #learning-strip{padding:2rem 6vw;gap:1.5rem}
  .learning-nz-time{display:none}
}


/* ══════════════════════════════════════════════════════
   COMPREHENSIVE MOBILE OVERHAUL
   Target: phones (≤480px) and tablets (≤768px)
   Philosophy: every section gets a purpose-built mobile
   layout — not just scaled-down desktop
══════════════════════════════════════════════════════ */

/* ── Global mobile base ── */
@media(max-width:900px){
  html{font-size:15px}
  /* Better tap targets */
  a,button{min-height:44px;display:inline-flex;align-items:center}
  /* Remove all cursor:none on touch */
  *{cursor:auto!important}
}

/* ── NAV mobile ── */
@media(max-width:900px){
  nav{padding:1.2rem 5vw;background:rgba(5,5,7,.95)!important;backdrop-filter:blur(20px)}
  .nav-logo{font-size:1.2rem}
}

/* ── HERO mobile ── */
@media(max-width:900px){
  #hero{
    grid-template-columns:1fr;
    min-height:100svh;
    padding:7rem 6vw 5rem;
    align-items:flex-start;
  }
  .hero-right{display:none}
  .hero-name{font-size:clamp(3.2rem,14vw,6rem);line-height:.92}
  .hero-tag{font-size:.48rem;margin-bottom:1.8rem}
  .hero-descriptor{font-size:.5rem;gap:1rem;margin-top:2rem;flex-wrap:wrap}
  .hero-bio{font-size:.88rem;margin-top:1.8rem;max-width:none}
  .hero-cta{margin-top:2.5rem;flex-wrap:wrap;gap:.8rem}
  .btn{font-size:.5rem;padding:.85rem 1.6rem;min-height:44px}
  .hero-scroll{bottom:1.5rem}
}
@media(max-width:480px){
  #hero{padding:6rem 5vw 4rem}
  .hero-name{font-size:clamp(2.8rem,16vw,4.5rem)}
  .hero-cta{flex-direction:column;align-items:stretch}
  .btn{justify-content:center;width:100%}
}

/* ── MARQUEE mobile ── */
@media(max-width:900px){
  .marquee-item{font-size:.44rem;gap:1.2rem;padding:0 1.2rem}
}

/* ── ABOUT mobile ── */
@media(max-width:900px){
  #about{grid-template-columns:1fr;padding:5rem 6vw;gap:3rem}
  .about-left{position:static}
  .about-headline{font-size:clamp(2.2rem,9vw,3.5rem)}
  .stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2rem}
  .stat-num{font-size:2.2rem}
  .skill-pills{gap:.4rem}
  .skill-pill{font-size:.48rem}
  .cert-row{flex-wrap:wrap}
}
@media(max-width:480px){
  #about{padding:4rem 5vw}
  .stats-row{grid-template-columns:repeat(3,1fr)}
  .stat-num{font-size:1.8rem}
}

/* ── GLOBE / EXPERIENCE mobile ──
   On mobile: show the globe but make it portrait-friendly.
   Reduced height, touch drag works, overlay goes single-column
── */
@media(max-width:900px){
  #experience{padding:4rem 0 0}
  #geode-stage{
    height:70svh;
    min-height:380px;
  }
  #geode-hint{
    font-size:.38rem;letter-spacing:.2em;
    bottom:1.4rem;
  }
  #globe-caption{display:none}
  #globe-live{top:.8rem;right:3vw;font-size:.36rem}
  #globe-scroll-hint{display:none} /* no scroll-zoom on touch */
  #globe-zoom-btns{
    right:.8rem;
    top:auto;
    bottom:4rem;
    transform:none;
  }
  .gz-btn{width:36px;height:36px;font-size:1.1rem}

  /* ── Overlay: single column stacked on mobile ── */
  #globe-zoom{
    grid-template-columns:1fr;
    grid-template-rows:3px auto auto;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    /* Override any background-image/blend that causes grey grain */
    background:rgba(4,4,6,0.98)!important;
    background-image:none!important;
    background-blend-mode:normal!important;
  }
  #gz-panel-left{
    padding:4rem 6vw 2.5rem;
    border-right:none;
    border-bottom:1px solid var(--border-s);
    transform:translateY(-30px);
    transition:transform .7s cubic-bezier(.22,1,.36,1);
  }
  #globe-zoom.open #gz-panel-left{transform:translateY(0)}
  #gz-panel-left::before{display:none} /* remove vertical edge line */
  #gz-panel-right{
    padding:2.5rem 6vw 4rem;
    transform:translateY(30px);
    transition:transform .7s cubic-bezier(.22,1,.36,1) .1s;
  }
  #globe-zoom.open #gz-panel-right{transform:translateY(0)}

  /* Mini globe moves inline on mobile */
  #gz-mini-globe-wrap{
    position:relative;
    top:auto;right:auto;
    width:90px;height:90px;
    margin-bottom:1.5rem;
    float:right;margin-left:1rem;
  }
  #gz-city{font-size:clamp(1.8rem,9vw,3rem)}
  #gz-sentence{font-size:clamp(1.4rem,6vw,2.2rem)}
  #gz-stats{flex-wrap:wrap;gap:1.5rem}
  .gz-stat-num{font-size:1.8rem}
  #gz-bullets li{font-size:.78rem}
  #gz-era-dots{margin-top:1.5rem}

  /* Back button mobile */
  #globe-zoom-back{
    top:1rem;left:1rem;
    font-size:.38rem;padding:.42rem .8rem;
    min-height:40px;
  }
}
@media(max-width:480px){
  #geode-stage{height:60svh;min-height:320px}
  #gz-panel-left{padding:3.5rem 5vw 2rem}
  #gz-panel-right{padding:2rem 5vw 3.5rem}
  #gz-mini-globe-wrap{width:72px;height:72px}
  #gz-city{font-size:clamp(1.6rem,10vw,2.5rem)}
  #gz-sentence{font-size:clamp(1.2rem,7vw,1.8rem)}
  #gz-body{font-size:.8rem}
}

/* ── ERA PIN LABELS mobile: smaller, less cluttered ── */
@media(max-width:900px){
  .era-pin-label{display:none} /* hide floating labels — too crowded on small globe */
  /* Impact label: adjust positioning */
  #imp-label{font-size:90%}
  /* Hover card: full-width at bottom on mobile */
  #shard-label{
    position:fixed;
    bottom:0;left:0;right:0;
    top:auto!important;
    transform:none!important;
    opacity:0;
    transition:opacity .25s,transform .25s;
  }
  #shard-label.visible{
    opacity:1;transform:translateY(0)!important;
  }
  #pin-card{
    border-left:none;border-right:none;border-bottom:none;
    border-top:1px solid var(--border-s);
    display:grid;grid-template-columns:1fr auto;
    grid-template-rows:auto auto auto;
    padding:1rem 6vw 1.5rem;
    background:rgba(5,5,7,0.96);
  }
  #pc-era{grid-column:1/-1;font-size:.34rem}
  #pc-city{font-size:1.1rem;grid-column:1}
  #pc-hint{grid-column:2;align-self:start;justify-self:end;font-size:.3rem;
    border:1px solid var(--border-s);padding:.3rem .6rem;margin-top:.2rem}
  #pc-domain{font-size:.34rem;grid-column:1/-1}
  #pc-snippet{grid-column:1/-1;font-size:.72rem;-webkit-line-clamp:1}
  #pin-card::before{display:none}
  #pin-card::after{display:none}
}

/* ── PROJECTS mobile ── */
@media(max-width:900px){
  #projects{padding:5rem 0}
  .projects-hint{padding:.8rem 6vw 2rem;font-size:.46rem}
  .horiz-track{padding:0 6vw;gap:1px}
  .project-card{width:82vw;padding:2rem}
  .project-card-featured{width:82vw}
  .project-card-name{font-size:1.6rem}
  .project-card-desc{font-size:.78rem}
  .card-img{height:130px;margin-bottom:1.4rem}
  /* Disable 3D tilt on touch */
  .project-card{transform:none!important;transition:opacity .8s,transform .8s,border-color .3s!important}
}
@media(max-width:480px){
  .project-card{width:88vw;padding:1.6rem}
  .project-card-name{font-size:1.4rem}
}

/* ── TESTIMONIALS mobile ── */
@media(max-width:900px){
  .testimonials-grid{grid-template-columns:1fr;gap:2px}
  #testimonials{padding:5rem 6vw}
  .testimonial-text{font-size:.82rem}
}

/* ── CONTACT mobile ── */
@media(max-width:900px){
  #contact{padding:5rem 6vw}
  .contact-heading{font-size:clamp(2.5rem,12vw,5rem)}
  .cf-row{grid-template-columns:1fr}
  .contact-info-row{flex-direction:column;gap:1rem}
  .cf-input{font-size:.7rem;padding:.8rem}
  .cf-submit{width:100%;justify-content:center}
}

/* ── MODAL mobile ── */
@media(max-width:900px){
  .modal-panel{
    position:fixed;top:0;left:0;right:0;bottom:0;
    width:100vw;height:100svh;
    transform:translateY(100%)!important;
    border-radius:0;
    overflow-y:scroll;
  }
  #case-modal.open .modal-panel{transform:translateY(0)!important}
  .modal-hero{height:160px}
  .modal-hero-label{font-size:1.8rem;padding:0 1.2rem;text-align:center}
  .modal-close{top:.8rem;right:.8rem;font-size:.44rem}
  .modal-body{padding:1.2rem 5vw}
  .modal-outcomes{grid-template-columns:repeat(3,1fr);gap:.5rem}
  .outcome-num{font-size:1.4rem}
  .cs-arch-grid{grid-template-columns:1fr}
  .cs-timeline{padding-left:.8rem}
}
@media(max-width:480px){
  .modal-outcomes{grid-template-columns:1fr 1fr}
  .outcome-num{font-size:1.2rem}
}

/* ── FOOTER mobile ── */
@media(max-width:900px){
  footer{flex-direction:column;gap:1.5rem;padding:2rem 6vw;text-align:center}
  .social-links{justify-content:center;flex-wrap:wrap;gap:1.2rem}
}

/* ── AVAILABILITY CAL mobile ── */
@media(max-width:900px){
  #avail-cal-section{grid-template-columns:1fr;gap:2.5rem;padding:4rem 6vw}
  .cal-slots{grid-template-columns:1fr 1fr}
  .cal-cta-row{flex-direction:column;align-items:stretch}
  .cal-cta-row .btn{justify-content:center}
}
@media(max-width:480px){
  .cal-slots{grid-template-columns:1fr}
}

/* ── LOOKING SECTION mobile ── */
@media(max-width:900px){
  #looking-section{grid-template-columns:1fr;padding:4rem 6vw;gap:2.5rem}
  .looking-grid{grid-template-columns:1fr 1fr}
  .looking-title{font-size:clamp(1.8rem,8vw,3rem)}
}
@media(max-width:480px){
  .looking-grid{grid-template-columns:1fr}
}

/* ── BLOG SECTION mobile ── */
@media(max-width:900px){
  .blog-grid{grid-template-columns:1fr}
  #blog-section{padding:5rem 6vw}
  .blog-title{font-size:clamp(1.2rem,5vw,1.6rem)}
  .blog-excerpt{font-size:.8rem}
  .blog-modal-close{cursor:auto;min-height:44px}
}

/* ── LEARNING STRIP mobile ── */
@media(max-width:900px){
  #learning-strip{padding:1.8rem 6vw;gap:1rem;flex-wrap:wrap}
  .learning-nz-time{display:none}
  .learning-items{gap:1rem}
  .learning-item{font-size:.44rem}
}

/* ── PROCESS SECTION mobile ── */
@media(max-width:900px){
  .process-grid{grid-template-columns:1fr 1fr}
  #process-section{padding:5rem 6vw}
}
@media(max-width:480px){
  .process-grid{grid-template-columns:1fr}
}

/* ── DNA SECTION mobile ── */
@media(max-width:900px){
  #dna-section{padding:3.5rem 0 1.5rem}
  .dna-canvas-wrap{height:60svh;min-height:360px}
  #dna-tooltip{display:none}
  #dna-legend{gap:.8rem;padding:0 5vw}
  .dna-leg{font-size:.38rem}
}
@media(max-width:480px){
  .dna-canvas-wrap{height:55svh;min-height:300px}
}

/* ── RADAR / GITHUB / MISC mobile ── */
@media(max-width:900px){
  #radar-section{grid-template-columns:1fr;padding:5rem 6vw;gap:2.5rem}
  #github-section{padding:3rem 6vw}
  .gh-grid{grid-template-columns:repeat(20,1fr)}
  #quote-section{padding:5rem 6vw}
  #quote-section blockquote{font-size:clamp(1.4rem,6vw,2.2rem)}
}

/* ── MUSIC BUTTON mobile ── */
@media(max-width:900px){
  #music-btn{
    bottom:1.2rem;
    left:50%;
    transform:translateX(-50%);
    width:auto;
  }
}

/* ── REFERRAL TOAST mobile ── */
@media(max-width:900px){
  #referral-toast{width:calc(100vw - 2.4rem);left:1.2rem;right:1.2rem;bottom:1.2rem}
}

/* ── COPY TOAST mobile ── */
@media(max-width:900px){
  #copy-toast{bottom:1.5rem;font-size:.44rem}
}

/* ── TOUCH-SPECIFIC DISABLES ── */
@media(hover:none){
  /* Remove all hover-only animations */
  .skill-pill::after{display:none}
  .project-card{transform:none!important}
  .btn:hover{transform:none!important;box-shadow:none!important}
  .looking-item:hover{transform:none!important}
  .sdot::before{display:none}
  .project-preview{display:none!important}
  /* Make links clearly tappable */
  .nav-links a::after{display:none}
  .blog-card:hover::before{display:none}
  /* Cursor: none removed globally above */
  #c-label{display:none}
}

/* ── SAFE AREA (notch phones) ── */
@supports(padding:max(0px)){
  @media(max-width:900px){
    #hero{padding-top:max(7rem,calc(6rem + env(safe-area-inset-top)))}
    nav{padding-top:max(1.2rem,calc(.8rem + env(safe-area-inset-top)))}
    #globe-zoom-back{top:max(1rem,calc(.6rem + env(safe-area-inset-top)))}
    #shard-label{padding-bottom:env(safe-area-inset-bottom)}
    footer{padding-bottom:max(2rem,calc(1.5rem + env(safe-area-inset-bottom)))}
  }
}

@media print{
  #loader,#ct,#cb,#prog,#cd,#cr,#c-label,#shader-canvas,#three-canvas,
  #music-btn,#scroll-dots,#avail-badge,
  .marquee-wrap,.horiz-track-wrap,.project-preview,nav .nav-right,
  .theme-btn{display:none!important}
  body{background:#fff;color:#111;cursor:auto}
  nav{position:static;background:none;border-bottom:1px solid #ccc;padding:1rem 0}
  .nav-logo{color:#111}
  section{padding:2rem 0!important}
  .reveal{opacity:1!important;transform:none!important}
  .tl-stop{opacity:1!important;transform:none!important}
  a{color:#111;text-decoration:underline}
  .btn{border:1px solid #111;color:#111;background:none;padding:.3rem .8rem}
  footer{border-top:1px solid #ccc}
}

.skill-pill{position:relative}
.skill-pill::after{
  content:attr(data-years);
  position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);
  background:var(--bg2);border:1px solid var(--border-s);
  font-size:.38rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);
  padding:.2rem .5rem;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .2s;
}
.skill-pill[data-years]:hover::after{opacity:1}

/* ── SCROLL DEPTH ── */
#scroll-depth{
  position:fixed;bottom:0;left:0;right:0;z-index:250;
  height:2px;background:transparent;
  pointer-events:none;
}
#scroll-depth-fill{height:100%;width:0%;background:linear-gradient(to right,rgba(var(--accent-rgb),.3),rgba(var(--accent-rgb),.7));transition:width .1s}

/* ── WHAT I AM LOOKING FOR SECTION ── */
#looking-section{
  padding:6rem 10vw;border-top:1px solid var(--border);
  display:grid;grid-template-columns:1fr 1fr;gap:6rem;align-items:center;
}
.looking-title{font-family:"Cormorant Garamond",serif;font-size:clamp(2rem,4vw,3.5rem);font-weight:600;line-height:1.1;margin-bottom:1.5rem}
.looking-title em{font-style:italic;color:var(--gold);font-weight:300}
.looking-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px}
.looking-item{
  padding:1.5rem;background:var(--bg2);border:1px solid var(--border);
  transition:background .3s,border-color .3s;
}
.looking-item:hover{background:var(--surface);border-color:var(--border-s)}
.looking-item-icon{font-size:1.1rem;margin-bottom:.7rem}
.looking-item-title{font-size:.48rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:.4rem}
.looking-item-val{font-family:"Syne",sans-serif;font-size:.82rem;line-height:1.6;color:var(--text-mid)}

/* ── MOBILE ADDITIONS ── */
@media(max-width:900px){
  .cf-row{grid-template-columns:1fr}
  #looking-section{grid-template-columns:1fr;padding:4rem 6vw;gap:3rem}
  .looking-grid{grid-template-columns:1fr}
  .hero-building-ticker{font-size:.42rem}
}

/* ── LOOKING ITEM — CLICKABLE ── */
.looking-item{
  all:unset;
  display:block;
  padding:1.5rem;background:var(--bg2);border:1px solid var(--border);
  transition:background .3s,border-color .3s,transform .25s;
  cursor:none;position:relative;text-align:left;width:100%;box-sizing:border-box;
}
.looking-item:hover{background:var(--surface);border-color:var(--gold);transform:translateY(-3px)}
.looking-item-icon{font-size:1.1rem;margin-bottom:.7rem}
.looking-item-title{font-size:.48rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:.4rem}
.looking-item-val{font-family:"Syne",sans-serif;font-size:.82rem;line-height:1.6;color:var(--text-mid);margin-bottom:1rem}
.looking-item-cta{font-size:.44rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);opacity:0;transform:translateY(4px);transition:opacity .25s,transform .25s}
.looking-item:hover .looking-item-cta{opacity:1;transform:translateY(0)}

/* ── LOOKING MODAL ── */
#looking-modal{
  position:fixed;inset:0;z-index:9000;
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s;
}
#looking-modal.open{opacity:1;visibility:visible}
.lm-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.82);backdrop-filter:blur(10px)}
.lm-panel{
  position:relative;z-index:1;
  width:min(560px,92vw);
  background:var(--bg2);border:1px solid var(--border-s);
  padding:3rem;
  transform:translateY(32px) scale(.97);
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}
#looking-modal.open .lm-panel{transform:translateY(0) scale(1)}
.lm-close{
  position:absolute;top:1.5rem;right:1.5rem;
  background:none;border:1px solid var(--border);color:var(--text-dim);
  font-size:.75rem;width:28px;height:28px;cursor:none;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .2s,color .2s;
}
.lm-close:hover{border-color:var(--gold);color:var(--gold)}
.lm-icon{font-size:2.2rem;margin-bottom:1rem}
.lm-category{font-size:.46rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:.6rem}
.lm-title{font-family:"Cormorant Garamond",serif;font-size:clamp(1.6rem,4vw,2.4rem);font-weight:600;color:var(--text);margin-bottom:1.2rem;line-height:1.15}
.lm-body{font-family:"Syne",sans-serif;font-size:.9rem;line-height:1.9;color:var(--text-mid);margin-bottom:1.5rem}
.lm-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:2rem}
.lm-tag{font-size:.44rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim);padding:.25rem .65rem;border:1px solid var(--border)}
.lm-cta{display:inline-flex;cursor:none}

/* ── CONTACT FORM (reset & fix EmailJS) ── */
.cf-submit{cursor:none;border:none;width:100%;justify-content:center;margin-top:.5rem}
#cf-status{margin-top:.8rem;font-size:.52rem;letter-spacing:.12em;text-transform:uppercase;min-height:1.2rem;text-align:center}
#cf-status.ok{color:#4caf8a}
#cf-status.err{color:#e05555}



/* ══════════════════════════════════════
   AWARD-WINNING ADDITIONS
══════════════════════════════════════ */

/* ── SCROLL NAV DOTS ── */
#scroll-dots{
  position:fixed;right:2rem;top:50%;transform:translateY(-50%);
  z-index:300;display:flex;flex-direction:column;gap:.8rem;
  opacity:0;transition:opacity .3s;
}
#scroll-dots.visible{opacity:1}
.sdot{
  width:6px;height:6px;border-radius:50%;
  background:var(--text-dim);border:1px solid transparent;
  cursor:none;transition:all .3s;position:relative;
}
.sdot::before{
  content:attr(data-label);
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  font-size:.42rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--text-dim);white-space:nowrap;
  opacity:0;transition:opacity .2s;pointer-events:none;
}
.sdot:hover::before,.sdot.active::before{opacity:1}
.sdot.active{background:var(--gold);border-color:var(--gold);transform:scale(1.5)}
.sdot:hover{background:var(--gold-light)}

/* ── AVAILABILITY BADGE ── */
#avail-badge{
  position:fixed;bottom:2rem;left:50%;transform:translateX(-50%);
  z-index:1000;
  display:flex;align-items:center;gap:.7rem;
  background:var(--bg2);border:1px solid rgba(76,175,138,.3);
  padding:.5rem 1.2rem .5rem .8rem;
  font-size:.46rem;letter-spacing:.18em;text-transform:uppercase;
  color:#4caf8a;
  opacity:0;transition:opacity .5s,transform .5s;
  transform:translateX(-50%) translateY(20px);
  pointer-events:none;
}
#avail-badge.show{opacity:1;transform:translateX(-50%) translateY(0)}
.avail-pulse{width:7px;height:7px;border-radius:50%;background:#4caf8a;
  box-shadow:0 0 8px rgba(76,175,138,.8);animation:blink 2s infinite;flex-shrink:0}

/* ── CURSOR SPOTLIGHT ── */
#spotlight{
  position:fixed;pointer-events:none;z-index:1;
  width:400px;height:400px;border-radius:50%;
  background:radial-gradient(circle,rgba(var(--accent-rgb),.04) 0%,transparent 70%);
  transform:translate(-50%,-50%);
  transition:opacity .3s;
}

/* ── PAGE TRANSITION ── */
#page-flash{
  position:fixed;inset:0;z-index:9998;
  background:var(--gold);opacity:0;pointer-events:none;
}

/* ── SKILL RADAR ── */
#radar-section{
  padding:8rem 10vw;border-top:1px solid var(--border);
  display:grid;grid-template-columns:1fr 1fr;gap:6rem;align-items:center;
}
#radar-section .section-label{margin-bottom:1.5rem}
.radar-title{font-family:'Cormorant Garamond',serif;font-size:clamp(2.2rem,4vw,3.8rem);font-weight:600;line-height:1.1;margin-bottom:1.5rem}
.radar-title em{font-style:italic;color:var(--gold);font-weight:300}
.radar-desc{font-family:'Syne',sans-serif;font-size:.88rem;line-height:1.85;color:var(--text-mid)}
#radar-canvas-wrap{display:flex;align-items:center;justify-content:center}
#radarChart{max-width:320px;width:100%}
.radar-legend{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2rem}
.radar-leg-item{display:flex;align-items:center;gap:.4rem;font-size:.46rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim)}
.radar-leg-dot{width:5px;height:5px;border-radius:50%;background:var(--gold)}

/* ── TESTIMONIAL / QUOTE SECTION ── */
#quote-section{
  padding:8rem 10vw;text-align:center;
  border-top:1px solid var(--border);position:relative;overflow:hidden;
}
.quote-mark{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(6rem,15vw,14rem);font-weight:700;
  color:rgba(var(--accent-rgb),.06);
  line-height:.8;position:absolute;top:2rem;left:50%;
  transform:translateX(-50%);pointer-events:none;user-select:none;
}
.quote-text{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.4rem,3vw,2.4rem);font-weight:300;font-style:italic;
  line-height:1.6;color:var(--text);max-width:800px;margin:0 auto 2.5rem;
  position:relative;z-index:1;
}
.quote-text strong{color:var(--gold);font-style:normal;font-weight:600}
.quote-attr{font-size:.52rem;letter-spacing:.3em;text-transform:uppercase;color:var(--text-dim)}
.quote-attr span{color:var(--gold)}

/* ── PROCESS SECTION ── */
#process-section{
  padding:8rem 10vw;border-top:1px solid var(--border);
}
.process-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-top:4rem;
}
.process-step{
  padding:2.5rem 2rem;background:var(--bg2);border:1px solid var(--border);
  position:relative;overflow:hidden;
  transition:background .3s,border-color .3s;
  opacity:0;transform:translateY(20px);transition:opacity .7s,transform .7s,background .3s,border-color .3s;
}
.process-step.visible{opacity:1;transform:translateY(0)}
.process-step:hover{background:var(--surface);border-color:var(--border-s)}
.process-step::before{
  content:attr(data-num);
  position:absolute;top:1.5rem;right:1.5rem;
  font-family:'Cormorant Garamond',serif;font-size:4rem;font-weight:700;
  color:rgba(var(--accent-rgb),.06);line-height:1;
}
.process-icon{font-size:1.4rem;margin-bottom:1.2rem}
.process-title{font-family:'Cormorant Garamond',serif;font-size:1.2rem;font-weight:600;margin-bottom:.8rem;color:var(--text)}
.process-desc{font-family:'Syne',sans-serif;font-size:.78rem;line-height:1.8;color:var(--text-mid)}

/* ── MOBILE ADDITIONS ── */
@media(max-width:900px){
  #scroll-dots{display:none}
  #avail-badge{display:none}
  #radar-section{grid-template-columns:1fr;padding:6rem 6vw;gap:3rem}
  .process-grid{grid-template-columns:1fr 1fr}
  #quote-section{padding:6rem 6vw}
  #process-section{padding:6rem 6vw}
}

/* ══════════════════════════════════════
   BLOG SECTION
══════════════════════════════════════ */
#blog-section{padding:8rem 10vw;border-top:1px solid var(--border)}
.blog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;margin-top:0}
.blog-card{
  background:var(--bg2);border:1px solid var(--border);
  padding:2.5rem;cursor:none;text-decoration:none;color:inherit;
  display:flex;flex-direction:column;
  transition:background .3s,border-color .3s,transform .3s;
  position:relative;overflow:hidden;
}
.blog-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(to right,transparent,var(--gold),transparent);
  transform:scaleX(0);transition:transform .4s;
}
.blog-card:hover::before{transform:scaleX(1)}
.blog-card:hover{background:var(--surface);border-color:var(--border-s)}
.blog-tag{font-size:.44rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem;display:flex;align-items:center;gap:.6rem}
.blog-tag::before{content:'';width:16px;height:1px;background:var(--gold)}
.blog-date{font-size:.44rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim);margin-left:auto}
.blog-title{font-family:'Cormorant Garamond',serif;font-size:clamp(1.4rem,2.5vw,2rem);font-weight:600;line-height:1.2;margin-bottom:1rem;transition:color .3s}
.blog-card:hover .blog-title{color:var(--gold)}
.blog-excerpt{font-family:'Syne',sans-serif;font-size:.85rem;line-height:1.85;color:var(--text-mid);flex:1;margin-bottom:1.5rem}
.blog-read{font-size:.5rem;letter-spacing:.25em;text-transform:uppercase;color:var(--text-dim);display:flex;align-items:center;gap:.6rem;transition:color .3s;margin-top:auto}
.blog-read::after{content:'→';transition:transform .3s}
.blog-card:hover .blog-read{color:var(--gold)}
.blog-card:hover .blog-read::after{transform:translateX(4px)}
.blog-read-time{display:flex;align-items:center;gap:.4rem;font-size:.46rem;letter-spacing:.15em;text-transform:uppercase;color:var(--text-dim);margin-top:1rem}
.blog-read-time::before{content:'◷';color:var(--gold)}

/* Blog full overlay */
#blog-modal{
  position:fixed;inset:0;z-index:8500;
  opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s;
  overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  background:var(--bg);
}
#blog-modal.open{opacity:1;visibility:visible}
.blog-modal-inner{
  max-width:740px;margin:0 auto;padding:4rem 2rem 8rem;
  position:relative;
}
.blog-modal-close{
  position:fixed;top:2rem;right:2rem;z-index:10;
  background:var(--bg2);border:1px solid var(--border);
  color:var(--text-dim);font-family:'DM Mono',monospace;
  font-size:.5rem;letter-spacing:.2em;text-transform:uppercase;
  padding:.45rem 1rem;cursor:none;transition:all .3s;
}
.blog-modal-close:hover{border-color:var(--gold);color:var(--gold)}
.blog-modal-tag{font-size:.46rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:1.5rem;display:flex;align-items:center;gap:.6rem}
.blog-modal-tag::before{content:'';width:20px;height:1px;background:var(--gold)}
.blog-modal-title{font-family:'Cormorant Garamond',serif;font-size:clamp(2rem,5vw,3.5rem);font-weight:600;line-height:1.1;margin-bottom:1rem}
.blog-modal-meta{font-size:.5rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim);margin-bottom:3rem;padding-bottom:2rem;border-bottom:1px solid var(--border)}
.blog-modal-body{font-family:'Syne',sans-serif;font-size:.95rem;line-height:1.95;color:var(--text-mid)}
.blog-modal-body h2{font-family:'Cormorant Garamond',serif;font-size:1.8rem;font-weight:600;color:var(--text);margin:2.5rem 0 1rem}
.blog-modal-body h3{font-size:.55rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin:2rem 0 .8rem}
.blog-modal-body p{margin-bottom:1.2rem}
.blog-modal-body strong{color:var(--text)}
.blog-modal-body code{font-family:'DM Mono',monospace;font-size:.8rem;background:var(--surface);border:1px solid var(--border);padding:.15rem .4rem;color:var(--gold)}
.blog-modal-body pre{background:var(--surface);border:1px solid var(--border);padding:1.5rem;overflow-x:auto;margin:1.5rem 0}
.blog-modal-body pre code{background:none;border:none;padding:0}
.blog-modal-body ul{padding-left:1.5rem;margin-bottom:1.2rem}
.blog-modal-body li{margin-bottom:.4rem}
.blog-modal-body blockquote{border-left:2px solid var(--gold);padding-left:1.5rem;margin:1.5rem 0;color:var(--text-mid);font-style:italic}

/* ══════════════════════════════════════
   AVAILABILITY CALENDAR
══════════════════════════════════════ */
#avail-cal-section{
  padding:6rem 10vw;border-top:1px solid var(--border);
  display:grid;grid-template-columns:1fr 1.4fr;gap:6rem;align-items:start;
}
.cal-intro{}
.cal-title{font-family:'Cormorant Garamond',serif;font-size:clamp(2rem,4vw,3.2rem);font-weight:600;line-height:1.1;margin-bottom:1rem}
.cal-title em{font-style:italic;color:var(--gold);font-weight:300}
.cal-desc{font-family:'Syne',sans-serif;font-size:.88rem;line-height:1.85;color:var(--text-mid);margin-bottom:2rem}
.cal-cta-row{display:flex;gap:1rem;flex-wrap:wrap}
.cal-slots{display:grid;grid-template-columns:1fr 1fr;gap:1px}
.cal-slot{
  background:var(--bg2);border:1px solid var(--border);
  padding:1.4rem 1.6rem;position:relative;
  transition:background .3s,border-color .3s;
}
.cal-slot.available{border-color:rgba(76,175,138,.2)}
.cal-slot.available:hover{background:var(--surface);border-color:rgba(76,175,138,.5)}
.cal-slot.busy{opacity:.45}
.cal-day{font-size:.52rem;letter-spacing:.25em;text-transform:uppercase;color:var(--gold);margin-bottom:.4rem}
.cal-time{font-family:'Syne',sans-serif;font-size:.88rem;color:var(--text);margin-bottom:.3rem}
.cal-tz{font-size:.44rem;letter-spacing:.15em;text-transform:uppercase;color:var(--text-dim)}
.cal-avail-badge{
  position:absolute;top:.8rem;right:.8rem;
  font-size:.38rem;letter-spacing:.18em;text-transform:uppercase;
  padding:.2rem .5rem;
}
.cal-slot.available .cal-avail-badge{color:#4caf8a;border:1px solid rgba(76,175,138,.3)}
.cal-slot.busy .cal-avail-badge{color:var(--text-dim);border:1px solid var(--border)}
.cal-note{margin-top:1.5rem;font-size:.52rem;letter-spacing:.12em;color:var(--text-dim);display:flex;align-items:center;gap:.6rem}
.cal-note::before{content:'✦';color:var(--gold);font-size:.4rem}
@media(max-width:900px){
  #avail-cal-section{grid-template-columns:1fr;gap:3rem}
  .cal-slots{grid-template-columns:1fr}
}

/* ══════════════════════════════════════
   REFERRAL TOAST
══════════════════════════════════════ */
#referral-toast{
  position:fixed;bottom:2rem;right:2rem;z-index:5000;
  width:320px;
  background:var(--bg2);border:1px solid var(--border-s);
  padding:1.5rem;
  transform:translateY(120%);opacity:0;
  transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .5s;
  pointer-events:none;
}
#referral-toast.show{transform:translateY(0);opacity:1;pointer-events:all}
.ref-close{
  position:absolute;top:.8rem;right:.8rem;
  background:none;border:none;color:var(--text-dim);
  font-size:.9rem;cursor:none;padding:.2rem .4rem;
  transition:color .2s;line-height:1;
}
.ref-close:hover{color:var(--gold)}
.ref-icon{font-size:1.4rem;margin-bottom:.8rem}
.ref-title{font-family:'Cormorant Garamond',serif;font-size:1.3rem;font-weight:600;margin-bottom:.4rem;color:var(--text)}
.ref-body{font-family:'Syne',sans-serif;font-size:.78rem;line-height:1.7;color:var(--text-mid);margin-bottom:1.2rem}
.ref-actions{display:flex;gap:.6rem}
.ref-btn{
  flex:1;font-family:'DM Mono',monospace;font-size:.44rem;
  letter-spacing:.18em;text-transform:uppercase;
  padding:.55rem .8rem;cursor:none;transition:all .25s;text-align:center;
  text-decoration:none;display:flex;align-items:center;justify-content:center;
}
.ref-btn-primary{background:var(--gold);color:var(--bg);border:1px solid var(--gold)}
.ref-btn-primary:hover{background:var(--gold-light)}
.ref-btn-ghost{border:1px solid var(--border);color:var(--text-dim)}
.ref-btn-ghost:hover{border-color:var(--gold);color:var(--gold)}

/* ══════════════════════════════════════
   ENHANCED CASE STUDY MODAL
══════════════════════════════════════ */
.cs-nav{
  display:flex;justify-content:space-between;align-items:center;
  padding:1.5rem 2rem 0;border-top:1px solid var(--border);margin-top:2.5rem;
}
.cs-nav-btn{
  background:none;border:1px solid var(--border);
  color:var(--text-dim);font-family:'DM Mono',monospace;
  font-size:.46rem;letter-spacing:.2em;text-transform:uppercase;
  padding:.4rem .9rem;cursor:none;transition:all .3s;
  display:flex;align-items:center;gap:.5rem;
}
.cs-nav-btn:hover{border-color:var(--gold);color:var(--gold)}
.cs-nav-btn:disabled{opacity:.25;pointer-events:none}
.cs-arch-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:1px;margin-top:1rem;
}
.cs-arch-item{
  background:var(--surface);border:1px solid var(--border);
  padding:1.2rem 1.4rem;
}
.cs-arch-layer{font-size:.44rem;letter-spacing:.25em;text-transform:uppercase;color:var(--gold);margin-bottom:.3rem}
.cs-arch-tech{font-family:'Syne',sans-serif;font-size:.82rem;color:var(--text);line-height:1.5}
.cs-arch-desc{font-size:.78rem;color:var(--text-dim);margin-top:.2rem;line-height:1.6}
.cs-timeline{margin-top:1rem;padding-left:1.5rem;border-left:1px solid var(--border)}
.cs-tl-item{position:relative;padding:.8rem 0 .8rem 1.5rem;border-bottom:1px solid var(--border)}
.cs-tl-item:last-child{border-bottom:none}
.cs-tl-item::before{content:'';position:absolute;left:-5px;top:1.2rem;width:8px;height:8px;border-radius:50%;background:var(--bg);border:1px solid var(--gold)}
.cs-tl-phase{font-size:.44rem;letter-spacing:.25em;text-transform:uppercase;color:var(--gold);margin-bottom:.2rem}
.cs-tl-desc{font-family:'Syne',sans-serif;font-size:.82rem;color:var(--text-mid);line-height:1.6}
.cs-challenge{
  background:var(--surface);border-left:2px solid var(--gold);
  padding:1rem 1.4rem;margin-top:1rem;
  font-family:'Syne',sans-serif;font-size:.85rem;line-height:1.75;color:var(--text-mid);
}
.cs-challenge strong{color:var(--text)}

/* ══════════════════════════════════════
   MOBILE POLISH (additional)
══════════════════════════════════════ */
@media(max-width:900px){
  body{cursor:auto}
  #cd,#cr{display:none!important}
  #hero{grid-template-columns:1fr;padding:8rem 6vw 4rem}
  .hero-right{display:none}
  .hero-name{font-size:clamp(3.8rem,16vw,7rem)}
  .hero-bio{font-size:.88rem}
  .hero-cta{flex-wrap:wrap;gap:1rem}
  .btn{font-size:.52rem;padding:.8rem 1.6rem}
  .stats-row{flex-wrap:wrap;gap:1.5rem}
  .section-header-title{font-size:clamp(2rem,8vw,3.5rem)}
  .timeline::before{display:none}
  .exp-item{padding-left:0}
  .exp-item::before{display:none}
  #scroll-dots{display:none}
  #avail-badge{display:none}
  .social-links{gap:1.5rem;flex-wrap:wrap}
  .contact-info-row{gap:1.5rem}
  #music-btn{bottom:1.5rem;left:50%;transform:translateX(-50%);width:auto}
  .modal-panel{max-height:100vh;width:100vw;margin:0;border-radius:0}
  .modal-body{padding:1.5rem}
  .modal-hero{height:180px}
  .modal-hero-label{font-size:2rem;text-align:center;padding:0 1rem}
  .modal-close{top:1rem;right:1rem}
  .modal-outcomes{grid-template-columns:repeat(3,1fr);gap:.5rem}
  .outcome-num{font-size:1.4rem}
  .cs-arch-grid{grid-template-columns:1fr}
  .cs-timeline{padding-left:1rem}
  /* Blog */
  .blog-grid{grid-template-columns:1fr}
  /* Availability */
  #avail-cal-section{padding:4rem 6vw}
  .cal-slots{grid-template-columns:1fr}
  /* Referral */
  #referral-toast{width:calc(100vw - 3rem);left:1.5rem;right:1.5rem;bottom:1.5rem}
}
@media(max-width:480px){
  .hero-name{font-size:clamp(3rem,18vw,5rem)}
  .loader-terminal{min-width:280px}
  .lt-line{font-size:.58rem}
  #about{padding:4rem 5vw}
  .contact-heading{font-size:clamp(2.5rem,12vw,5rem)}
  .modal-outcomes{grid-template-columns:1fr 1fr}
}
/* Touch: disable hover-only effects that feel broken on tap */
@media(hover:none){
  .skill-pill::after{display:none}
  .project-card{transform:none!important}
  .btn:hover{transform:none!important}
  .looking-item:hover{transform:none!important}
  .sdot::before{display:none}
}


/* Letter panel shuffle button */
#letter-shuffle{
  /* bottom-right corner, just outside the paper card */
  position:absolute;
  bottom:calc(15% - 18px);
  right:calc(15% - 18px);
  width:36px;height:36px;
  background:var(--bg2);
  border:1px solid rgba(201,169,110,.3);
  border-radius:50%;
  color:rgba(201,169,110,.6);
  font-size:.9rem;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:background .25s,border-color .25s,color .25s,transform .3s;
  opacity:1;pointer-events:all;z-index:20;
  box-shadow:0 2px 12px rgba(0,0,0,.5);
}
#letter-shuffle:hover{
  background:var(--gold-dim);
  border-color:var(--gold);
  color:var(--gold);
  transform:rotate(180deg);
}
#letter-shuffle:active{transform:rotate(180deg) scale(.92)}
/* tooltip removed */

/* pause feature removed */
#dna-section{
  position:relative;z-index:2;
  display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;
  padding:6rem 0 4rem;
  border-top:1px solid var(--border);
}
.dna-header{
  text-align:center;margin-bottom:2rem;
  padding:0 5vw;z-index:3;position:relative;
}
.dna-canvas-wrap{
  position:relative;width:100%;
  height:80vh;
  min-height:580px;
  display:block;
}
#dna-canvas{
  width:100%;height:100%;
  display:block;
  touch-action:none;
}
@media(max-width:900px){
  .dna-canvas-wrap{height:65vh;min-height:420px}
}
@media(max-width:480px){
  .dna-canvas-wrap{height:55vh;min-height:340px}
}
/* Tooltip card */
#dna-tooltip{
  position:fixed;z-index:9999;
  background:rgba(10,14,20,0.94);border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 24px 64px rgba(0,0,0,0.22);
  backdrop-filter:blur(14px);
  padding:1.2rem 1.4rem;
  max-width:240px;
  width:auto;
  pointer-events:none;
  opacity:0;transform:translateY(6px) scale(.97);
  transition:opacity .18s ease,transform .18s ease,box-shadow .18s ease;
}
#dna-tooltip.show{opacity:1;transform:translateY(0) scale(1);pointer-events:all}
.dna-tt-cta{pointer-events:all;cursor:pointer}
.dna-tt-layer{font-size:.4rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:.3rem}
.dna-tt-name{font-family:'Cormorant Garamond',serif;font-size:1.15rem;font-weight:600;color:var(--text);margin-bottom:.3rem;line-height:1.2}
.dna-tt-summary{font-family:'Syne',sans-serif;font-size:.72rem;line-height:1.6;color:var(--text-mid);margin-bottom:.7rem}
.dna-tt-tags{display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:.7rem}
.dna-tt-tag{font-size:.38rem;letter-spacing:.15em;text-transform:uppercase;color:var(--text-dim);padding:.18rem .5rem;border:1px solid var(--border)}
.dna-tt-cta{font-size:.42rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:.4rem;cursor:pointer}
.dna-tt-cta:hover{text-decoration:underline}
/* Mobile bottom sheet */
#dna-sheet{
  position:fixed;bottom:0;left:0;right:0;z-index:9999;
  background:var(--bg2);border-top:1px solid var(--border-s);
  padding:1.5rem 1.5rem 2.5rem;
  transform:translateY(100%);
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}
#dna-sheet.show{transform:translateY(0)}
.dna-sheet-drag{width:36px;height:3px;background:var(--border-s);border-radius:2px;margin:0 auto 1.2rem}
.dna-sheet-close{position:absolute;top:1rem;right:1rem;background:none;border:none;color:var(--text-dim);font-size:1rem;cursor:pointer;padding:.3rem}
/* Legend */
#dna-legend{
  display:flex;justify-content:center;gap:2rem;flex-wrap:wrap;
  margin-top:1.5rem;padding:0 5vw;z-index:3;position:relative;
}
.dna-leg{display:flex;align-items:center;gap:.5rem;font-size:.44rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim)}
.dna-leg-dot{width:8px;height:8px;border-radius:50%}
.dna-hint{
  margin-top:1rem;font-size:.46rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-dim);z-index:3;position:relative;
  display:flex;align-items:center;gap:.5rem;
}
.dna-hint::before{content:'✦';color:var(--gold);font-size:.38rem}
@media(max-width:900px){
  #dna-section{padding:4rem 0 2rem}
  #dna-tooltip{display:none}
  #dna-legend{gap:1rem}
}