*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}

:root{
  --bg: #101720; /* Midnight Slate */
  --bg-alt: #172331; /* Slate Blue Depth */
  --bg2: var(--bg-alt);
  --accent: #b8f0d8; /* Signature Mint */
  --text: #e7edf0; /* Soft Off-White */
  --muted: #8c9aa5; /* Slate Gray */
  --line: rgba(184,240,216,.06);
  --mint: var(--accent);
  --fd: Georgia, 'Times New Roman', serif;
  --fb: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fm: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace;
  --imgf:grayscale(100%) contrast(1.1) brightness(0.8);
  --sb:0px;
  --bg-x:50%;
  --bg-y:0%;
}

body{background:
  radial-gradient(circle at var(--bg-x) var(--bg-y), rgba(184,240,216,.06) 0%, transparent 24%),
  radial-gradient(circle at 18% 18%, rgba(255,255,255,.04) 0%, transparent 26%),
  radial-gradient(circle at 82% 0%, rgba(184,240,216,.03) 0%, transparent 30%),
  linear-gradient(180deg, var(--bg-alt) 0%, var(--bg) 62%, #0c1116 100%);
  color:var(--text);font-family:var(--fb);overflow-x:hidden;cursor:none;overscroll-behavior-x:none;overscroll-behavior-y:auto;position:relative;touch-action:pan-y;}

/* Pro typography — kerning + ligatures on every header */
h1,h2,h3,.logo,.proj-title,.contact-h,.about-h,.hero-name,.stat-num,.cap-col-title{
  font-feature-settings:"kern" 1,"liga" 1;
  font-kerning:normal;
  text-rendering:optimizeLegibility;
}

/* Smooth color transition on every link */
a{transition:color .22s ease,border-color .22s ease,opacity .22s ease}

.hero-tag .tag-inline,
#lab .tag-inline,
.contact-info .tag-inline{
  display:inline-flex !important;
  align-items:center;
  gap:.28em;
  white-space:nowrap;
}

.hero-tag .tag-label{
  display:block;
  margin-top:.15rem;
}

.flag-mw{
  display:inline-block;
  width:1.05em;
  height:.72em;
  vertical-align:-.08em;
  border-radius:1px;
  object-fit:cover;
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset;
}

/* NOISE */
body::before{
  content:'';position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:.03;
  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='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:240px 240px; background-position:0 0; will-change:background-position,opacity; animation:grainFlicker .1s linear infinite;
}

@keyframes grainFlicker{
  0%{ background-position: 0 0; opacity:.02; }
  25%{ background-position: 18px -12px; opacity:.03; }
  50%{ background-position: -14px 20px; opacity:.026; }
  75%{ background-position: 10px 8px; opacity:.034; }
  100%{ background-position: 0 0; opacity:.02; }
}

/* Aura orbs (floating blurred color orbs) */
#aura1, #aura2{
  position:fixed;pointer-events:none;z-index:0;filter:blur(64px);mix-blend-mode:screen;opacity:1;
  background: rgba(184, 240, 216, 0.08);
  border-radius:50%;
}
#aura1{ width:52vw; height:52vw; left:6%; top:6%; animation: auraDrift1 34s ease-in-out infinite; }
#aura2{ width:42vw; height:42vw; right:4%; top:54%; animation: auraDrift2 40s ease-in-out infinite; }

@keyframes auraDrift1{
  0%{ transform: translate3d(0,0,0) scale(1); }
  25%{ transform: translate3d(5vw, -2vw, 0) scale(1.06); }
  50%{ transform: translate3d(8vw, 4vw, 0) scale(.96); }
  75%{ transform: translate3d(2vw, -1vw, 0) scale(1.05); }
  100%{ transform: translate3d(0,0,0) scale(1); }
}
@keyframes auraDrift2{
  0%{ transform: translate3d(0,0,0) scale(1); }
  25%{ transform: translate3d(-4vw, 2vw, 0) scale(.97); }
  50%{ transform: translate3d(-8vw, -4vw, 0) scale(1.06); }
  75%{ transform: translate3d(-2vw, 1vw, 0) scale(1.01); }
  100%{ transform: translate3d(0,0,0) scale(1); }
}

/* CURSOR */
#cur{
  width:11px;height:11px;background:#fff;border-radius:50%;
  position:fixed;pointer-events:none;z-index:10000;mix-blend-mode:difference;
  transform:translate(-50%,-50%);transition:transform .18s ease,filter .18s ease;
}
body.lh #cur{transform:translate(-50%,-50%) scale(3.8);filter:blur(1.8px)}

/* GLOW */
#glow{
  position:fixed;width:40vw;height:40vw;border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(circle,rgba(184,240,216,.05) 0%,transparent 68%);
  filter:blur(48px);transform:translate(-50%,-50%);will-change:left,top;
}

/* REVEAL IMAGE — position:fixed, floats above all rows, follows cursor */
.proj-reveal-img{
  position:fixed;z-index:2000;
  width:260px;height:180px;
  object-fit:cover;border-radius:3px;
  pointer-events:none;
  filter:var(--imgf);
  opacity:0;
  transform:scale(0.88) rotate(-2deg);
  transition:opacity .38s cubic-bezier(.16,1,.3,1),transform .38s cubic-bezier(.16,1,.3,1);
  will-change:left,top;
}
.project-item:hover .proj-reveal-img{opacity:1;transform:scale(1) rotate(0deg)}

/* LAB */
#lab{
  position:fixed;bottom:1.9rem;left:2.2rem;z-index:500;pointer-events:none;
  display:flex;flex-direction:column;gap:.18rem;
  font-family:var(--fm);font-size:.52rem;font-weight:300;
  letter-spacing:.08em;color:rgba(228,228,228,.18);line-height:1.7;
}

/* STAGGER */
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.anim{animation:fadeUp .9s cubic-bezier(.16,1,.3,1) both}
.d0{animation-delay:.05s}.d1{animation-delay:.25s}.d2{animation-delay:.45s}.d3{animation-delay:.62s}

/* NAV */
nav{
  position:fixed;top:var(--sb);left:0;right:0;z-index:500;
  padding:1.4rem 3rem;display:flex;justify-content:space-between;align-items:center;
}
.logo{font-family:var(--fd);font-size:.7rem;font-weight:800;letter-spacing:.32em;color:var(--text);text-transform:uppercase}
.nav-links{display:flex;gap:2.8rem;list-style:none}
.nav-links a{color:var(--muted);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
.nav-links a:hover{color:var(--text)}

/* HERO */
.hero{
  min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 3rem 4.5rem;position:relative;overflow:hidden;
}
.hero-wm{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-family:var(--fd);font-size:clamp(9rem,20vw,22rem);font-weight:800;
  color:transparent;-webkit-text-stroke:1px rgba(230,237,234,.028);
  white-space:nowrap;pointer-events:none;user-select:none;letter-spacing:-.03em;
}

/* Subtle shimmer / pulse for hero watermark */
.hero-wm{ animation: heroPulse 6s ease-in-out infinite; }
@keyframes heroPulse{
  0%{ opacity: .06; text-shadow: 0 0 0 rgba(184,240,216,0); }
  50%{ opacity: .10; text-shadow: 0 10px 50px rgba(184,240,216,0.06); }
  100%{ opacity: .06; text-shadow: 0 0 0 rgba(184,240,216,0); }
}
.hero-meta{
  display:flex;justify-content:space-between;align-items:flex-start;
  margin-bottom:auto;padding-top:calc(var(--sb) + 5.5rem);
}
.hero-tag{font-size:.63rem;letter-spacing:.18em;color:var(--muted);text-transform:uppercase;line-height:2}
.hero-tag span{display:block;color:var(--mint)}

.hero-name{
  font-family:var(--fd);font-size:clamp(4.5rem,11vw,10rem);font-weight:800;
  line-height:1.1;letter-spacing:-0.06em;text-transform:uppercase;
  margin-bottom:.9rem;color:var(--text);
}
.hero-name em{font-style:normal;color:var(--mint)}

/* Hero Index: Dividers and Layout */
.hero-index-divider {
  height: 1px;
  background: var(--line);
  margin: 2.2rem 0;
  width: 100%;
}

.hero-index {
  display: grid;
  grid-template-columns: repeat(3, 1fr) auto;
  gap: 2.2rem;
  align-items: start;
  margin: 0;
  width: 100%;
}

/* Discipline Block */
.hero-discipline {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.discipline-eyebrow {
  font-family: var(--fm);
  font-size: .56rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(228, 228, 228, .42);
  font-weight: 500;
}

.discipline-title {
  font-family: var(--fb);
  font-size: .86rem;
  font-weight: 400;
  color: var(--text);
  line-height: 1.3;
}

.discipline-body {
  font-family: var(--fb);
  font-size: .78rem;
  font-weight: 300;
  color: rgba(228, 228, 228, .42);
  line-height: 1.7;
  margin: 0;
}

.mint-accent {
  color: var(--mint);
  font-weight: 400;
}

/* Scroll Cue Animation */
.hero-scroll-cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  height: auto;
}

.scroll-cue-caption {
  font-family: var(--fm);
  font-size: .5rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(228, 228, 228, .18);
  font-weight: 500;
}

.scroll-cue-line {
  width: 1px;
  height: 30px;
  background: var(--mint);
  transform-origin: top;
  animation: scrollCuePulse 2s ease-in-out infinite;
}

@keyframes scrollCuePulse {
  0%, 100% { transform: scaleY(0.2); }
  50% { transform: scaleY(1); }
}

/* Editorial Marquee Strip */
.hero-marquee-strip {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  white-space: nowrap;
  padding: .95rem 3rem;
  background: var(--bg);
  margin-top: 0;
  margin-left: -3rem;
  margin-right: -3rem;
  width: calc(100% + 6rem);
}

.marquee-track-editorial {
  display: inline-flex;
  animation: marqueeEditorial 70s linear infinite;
  gap: 0;
}

.marquee-sans {
  font-family: var(--fb);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text);
  display: inline-block;
  white-space: nowrap;
  padding: 0 1.4rem 0 0;
  flex-shrink: 0;
}

.marquee-serif {
  font-family: var(--fb);
  font-size: .95rem;
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: lowercase;
  color: var(--mint);
  display: inline-block;
  white-space: nowrap;
  padding: 0 1.4rem 0 0;
  flex-shrink: 0;
}

.marquee-sep {
  font-family: var(--fm);
  font-size: .85rem;
  color: rgba(228, 228, 228, .18);
  display: inline-block;
  white-space: nowrap;
  padding: 0 1.4rem;
  flex-shrink: 0;
}

@keyframes marqueeEditorial {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Old hero role + foot (hidden, kept for compatibility) */
.hero-role {
  display: none;
}

.hero-foot {
  display: none;
}

/* SHARED */
.section{padding:7.5rem 3rem;max-width:1100px;margin:0 auto; border-top:1px solid var(--line);}
.s-label{font-size:.58rem;letter-spacing:.28em;text-transform:uppercase;color:rgba(228,228,228,.22);display:flex;align-items:center;gap:1rem;margin-bottom:4rem}
.s-label::after{content:'';flex:1;height:1px;background:var(--line)}

/* ABOUT */
.about-grid{display:grid;grid-template-columns:1fr 210px 1fr;gap:4rem;align-items:start}
.about-h{font-family:var(--fd);font-size:clamp(1.9rem,3.5vw,3rem);font-weight:800;line-height:1.1;letter-spacing:-.03em;margin-bottom:2rem}
.about-h em{font-style:normal;color:var(--mint)}
.about-body{color:var(--muted);font-size:.89rem;line-height:1.95;font-weight:300}
.about-body p{margin-bottom:1.1rem}
.about-body strong{color:var(--text);font-weight:500}
.sig-wrap{margin-top:2.2rem;opacity:.78}
.about-img-wrap{position:relative;overflow:hidden;border-radius:3px;align-self:stretch;min-height:400px}
.about-img-wrap img{width:100%;height:100%;object-fit:cover;filter:var(--imgf);display:block}
.about-img-wrap::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,transparent 60%,var(--bg) 100%);pointer-events:none}
.stat-row{padding:1.6rem 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:baseline}
.stat-row:first-child{border-top:1px solid var(--line)}
.stat-num{font-family:var(--fd);font-size:2.5rem;font-weight:800;color:var(--mint)}
.stat-text{font-size:.66rem;letter-spacing:.07em;text-transform:uppercase;color:rgba(228,228,228,.26);text-align:right;max-width:148px;line-height:1.7}

/* CAPABILITIES */
.cap-section{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cap-inner{max-width:1100px;margin:0 auto;padding:7.5rem 3rem}
.cap-cols{display:grid;grid-template-columns:1fr 1fr;gap:5.5rem}
.cap-col-title{font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(228,228,228,.2);padding-bottom:.85rem;margin-bottom:1.2rem;border-bottom:1px solid var(--line)}
.cap-grid{display:grid;grid-template-columns:1fr 1fr}
.cap-item{display:flex;align-items:center;gap:.6rem;padding:.72rem 0;border-bottom:1px solid rgba(228,228,228,.035);font-size:.83rem;color:rgba(228,228,228,.38);font-weight:300;transition:color .22s;cursor:default}
.cap-item:hover{color:var(--text)}
.cap-item:hover .cap-bullet{color:var(--mint)}
.cap-bullet{font-size:.48rem;color:rgba(228,228,228,.18);transition:color .22s;flex-shrink:0}

/* PROJECTS */
.projects-list{display:flex;flex-direction:column}
.project-item{
  position:relative;
  display:grid;grid-template-columns:72px 1fr 28px;gap:2rem;align-items:start;
  padding:3rem 1.8rem;margin:0 -1.8rem;
  border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit;background:transparent;
  transition:background .3s ease,padding-left .3s ease;
}
.project-item:first-child{border-top:1px solid var(--line)}
.project-item:hover{background:var(--bg2);padding-left:3rem}
.project-item:hover .proj-num{color:var(--mint)}
.project-item:hover .proj-title{color:var(--mint);letter-spacing:.018em}
.project-item:hover .proj-arrow{opacity:1;transform:none}
.proj-num{font-family:var(--fd);font-size:.62rem;color:rgba(228,228,228,.16);font-weight:700;letter-spacing:.12em;padding-top:.3rem;transition:color .28s}
.proj-title{font-family:var(--fd);font-size:1.3rem;font-weight:700;line-height:1.1;letter-spacing:-0.01em;margin-bottom:.45rem;transition:color .28s,letter-spacing .3s ease}
.proj-desc{font-size:.82rem;color:var(--muted);font-weight:300;line-height:1.8;max-width:500px}
.proj-tags{display:flex;gap:.45rem;margin-top:.85rem;flex-wrap:wrap;align-items:center}
.proj-status{
  font-family:var(--fm);font-size:.52rem;font-weight:300;
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(184,240,216,.55);
  background:rgba(184,240,216,.05);
  border:1px solid rgba(184,240,216,.14);
  padding:.2rem .7rem;border-radius:2px;
}
.proj-tag{font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;border:1px solid rgba(228,228,228,.08);padding:.18rem .58rem;border-radius:2px;color:rgba(228,228,228,.26)}
.proj-arrow{color:var(--mint);font-size:.9rem;opacity:0;transform:translateX(-10px) translateY(2px);transition:all .28s ease;padding-top:.25rem;justify-self:end}

/* Glassmorphism for about & capabilities cards */
.glass-panel{
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 10px;
  padding: 1.25rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  width: 100%;
  overflow: hidden;
  isolation: isolate;
}

/* ============================================================
   CONTACT · FULL-WIDTH EDITORIAL SECTION
   ============================================================ */
.contact-section {
  background: linear-gradient(135deg, #b8f0d8 0%, #a8e6cc 100%);
  position: relative;
  overflow: hidden;
  padding: 6rem 3rem;
}

/* Soft white radial highlight in top-right */
.contact-section::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -20%;
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(255,255,255,.18) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}

.contact-inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  color: #0a0a0c;
}

/* Top label with fade divider */
.contact-top {
  margin-bottom: 2.4rem;
}

.contact-label {
  font-family: var(--fm);
  font-size: .68rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: rgba(10, 10, 12, .48);
  margin-bottom: 1.2rem;
  font-weight: 500;
}

.contact-divider-fade {
  height: 1px;
  background: linear-gradient(to right, rgba(10,10,12,.3), rgba(10,10,12,0));
  margin-bottom: 2rem;
}

/* Headline with serif accent */
.contact-headline {
  font-family: var(--fb);
  font-size: clamp(3rem, 8vw, 9rem);
  font-weight: 800;
  line-height: .92;
  letter-spacing: -.05em;
  text-transform: uppercase;
  margin-bottom: 3.2rem;
  color: #0a0a0c;
}

.contact-headline-accent {
  display: inline;
}

.contact-accent-serif {
  font-family: var(--fd);
  font-style: italic;
  font-weight: 400;
}

/* Directory section */
.contact-directory {
  margin: 3.2rem 0;
}

.contact-directory-divider {
  height: 1px;
  background: rgba(10, 10, 12, .12);
  margin: 2.4rem 0;
}

.contact-dir-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  padding: 2.4rem 0;
}

.contact-dir-col {
  display: flex;
  flex-direction: column;
}

.contact-dir-header {
  font-family: var(--fm);
  font-size: .62rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(10, 10, 12, .45);
  margin-bottom: 1.2rem;
  font-weight: 600;
}

.contact-dir-link {
  font-size: .95rem;
  color: #0a0a0c;
  text-decoration: none;
  border-bottom: 1px solid rgba(10, 10, 12, .18);
  display: inline-block;
  transition: border-color .24s ease;
  margin-bottom: .6rem;
  line-height: 1.4;
}

.contact-dir-link:hover {
  border-color: rgba(10, 10, 12, .4);
}

.contact-arrow {
  display: inline;
  margin-left: .2em;
  font-size: .88em;
}

.contact-elsewhere {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.contact-location {
  font-size: .95rem;
  color: #0a0a0c;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.contact-location img {
  display: inline-block;
  width: 1.05em;
  height: .72em;
  object-fit: cover;
  vertical-align: -.08em;
  margin-left: .3em;
}

.contact-dir-note {
  font-size: .78rem;
  color: rgba(10, 10, 12, .55);
  line-height: 1.5;
  margin-top: .8rem;
}

/* CTA + Status row */
.contact-cta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  padding: 2.4rem 0;
  border-top: 1px solid rgba(10, 10, 12, .12);
  flex-wrap: wrap;
}

/* Pill-shaped CTA button with magnetic effect */
.contact-cta-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .4em;
  background: #0a0a0c;
  color: #b8f0d8;
  padding: .88rem 2.2rem;
  border-radius: 3rem;
  text-decoration: none;
  font-family: var(--fb);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  transition: all .28s cubic-bezier(0.23, 1, 0.320, 1);
  will-change: transform;
  z-index: 10;
}

.contact-cta-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(10, 10, 12, .18);
}

.contact-cta-text {
  display: inline;
}

.contact-cta-arrow {
  display: inline;
  transition: transform .28s cubic-bezier(0.23, 1, 0.320, 1);
}

.contact-cta-button:hover .contact-cta-arrow {
  transform: translateX(2px);
}

/* Status block — monospace, right-aligned */
.contact-status {
  font-family: var(--fm);
  font-size: .82rem;
  text-align: right;
  color: #0a0a0c;
  display: grid;
  gap: .45rem;
}

.contact-status-line {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .9rem;
  align-items: baseline;
  line-height: 1.45;
}

.contact-status-label {
  color: rgba(10, 10, 12, .45);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
}

.contact-status-value {
  color: #0a0a0c;
  font-weight: 700;
  font-family: var(--fb);
  font-size: .9rem;
  line-height: 1.35;
}

/* Mobile responsiveness */
@media (max-width: 800px) {
  .contact-section {
    padding: 4rem 1.2rem;
  }

  .contact-headline {
    font-size: clamp(2rem, 6vw, 5rem);
    margin-bottom: 2rem;
  }

  .contact-dir-cols {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .contact-dir-header {
    margin-bottom: .8rem;
  }

  .contact-cta-row {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.6rem 0;
  }

  .contact-status {
    text-align: left;
  }

  .contact-status-line {
    grid-template-columns: 1fr;
    gap: .15rem;
  }
}

/* FOOTER */
footer{
  background:var(--bg);padding:2rem 3rem;
  display:flex;justify-content:space-between;align-items:center;
  border-top:1px solid var(--line);
}
footer p{font-size:.58rem;letter-spacing:.14em;color:rgba(228,228,228,.14);text-transform:uppercase}

/* RESPONSIVE */
@media (max-width: 800px) {
  /* Zero overflow */
  html, body { overflow-x: hidden !important; width: 100% !important; position: relative !important; touch-action: pan-y !important; overscroll-behavior-y: auto !important; -webkit-overflow-scrolling: touch !important; }

  /* Navigation and spacing */
  nav { padding: 0.8rem 1.2rem; }
  .nav-links { display: none; }

  /* Padding and layout reset */
  .hero { padding: 0 1.2rem 3.5rem; display: flex; flex-direction: column; width: 100%; }
  .section { padding: 2.5rem 1.2rem; display: flex; flex-direction: column; width: 100%; }
  .cap-inner { padding: 2.5rem 1.2rem; }

  /* Force grids into single-column flex layouts to avoid overflow */
  .about-grid, .cap-cols, .cap-grid { display: flex !important; flex-direction: column !important; width: 100% !important; gap: 1.2rem; }

  /* Hero watermark and heavy visuals removed on mobile to prevent overflow */
  .hero-wm, #cur, #glow { display: none !important; }

  /* Typography scaling: keep name on one line */
  .hero-name { font-size: 13vw !important; white-space: nowrap !important; word-break: keep-all !important; overflow-x: hidden !important; line-height: 1 !important; }

  /* Ensure hero title doesn't break and remains readable */
  .hero-meta, .hero-foot { width: 100%; }

  /* Hero index: stack on mobile */
  .hero-index { grid-template-columns: 1fr !important; gap: 1.6rem !important; }
  .hero-scroll-cue { display: none !important; }
  .hero-index-divider { margin: 1.6rem 0 !important; }

  /* About image and items */
  .about-img-wrap { min-height: 220px; width: 100%; }

  /* Projects and reveal images */
  .project-item { display: flex !important; flex-direction: column !important; width: 100% !important; padding: 1.2rem 0.6rem; margin: 0; }
  .proj-reveal-img { display: none !important; }

  /* Mobile visual cleanup */
  #aura1, #aura2 { display: none !important; }
  .glass-panel { padding: 1rem; border-radius: 8px; }

  /* Footer and lab badge */
  footer { flex-direction: column; gap: 1rem; padding: 1.2rem; text-align: center; width: 100%; }
  #lab { display: none !important; }
}

/* Hide reveal thumbnails on touch devices (no hover) to avoid scroll interference */
@media (hover: none), (pointer: coarse) {
  .proj-reveal-img { display: none !important; }
}