*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --black:#080808;
  --white:#F2F0EA;
  --gray:#9a9890;
  --dim:#3a3936;
  --serif:'Cormorant Garamond',Georgia,serif;
  --display:'Bebas Neue',sans-serif;
  --mono:'DM Mono',monospace;
  --ease:cubic-bezier(.25,.1,.25,1);
}
html{scroll-behavior:smooth}
body{
  background:var(--black);
  color:var(--white);
  font-family:var(--mono);
  overflow-x:hidden;
  cursor:none;
}

/* Grain overlay */
body::before{
  content:'';
  position:fixed;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  background-size:180px;
  opacity:.028;
  pointer-events:none;
  z-index:9000;
  mix-blend-mode:overlay;
}

/* Cursor */
#cur{position:fixed;width:8px;height:8px;background:var(--white);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .3s,height .3s,opacity .3s}
#cur-r{position:fixed;width:32px;height:32px;border:1px solid rgba(242,240,234,.35);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width .25s,height .25s,opacity .3s}
body.hovering #cur{width:18px;height:18px;opacity:.6}
body.hovering #cur-r{width:56px;height:56px;opacity:.25}

/* Vertical spine */
#spine{
  position:fixed;
  right:28px;top:50%;
  transform:translateY(-50%) rotate(90deg);
  transform-origin:center center;
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--dim);
  writing-mode:vertical-rl;
  transform:translateY(-50%) rotate(180deg);
  z-index:80;
}

/* Nav */
nav{
  position:fixed;top:0;left:0;right:0;
  z-index:200;
  display:flex;justify-content:space-between;align-items:center;
  padding:28px 48px;
  mix-blend-mode:difference;
}
.nav-logo{
  display: block;
  height: 32px;
  width: auto;
}
.nav-links{display:flex;gap:36px;list-style:none}
.nav-links a{
  font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(242,240,234,.5);text-decoration:none;
  transition:color .2s;
}
.nav-links a:hover{color:var(--white)}

/* Hamburger button — hidden on desktop */
.nav-burger{
  display:none;
  flex-direction:column;justify-content:center;align-items:center;
  gap:5px;
  width:36px;height:36px;
  background:none;border:none;cursor:pointer;padding:4px;
  z-index:300;
}
.nav-burger span{
  display:block;width:22px;height:1px;
  background:var(--white);
  transition:transform .35s var(--ease),opacity .25s,width .3s;
  transform-origin:center;
}

/* Open state — X */
.nav-burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0;width:0}
.nav-burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Mobile overlay menu */
.nav-overlay{
  position:fixed;inset:0;
  background:var(--black);
  z-index:250;
  display:flex;flex-direction:column;
  justify-content:center;align-items:flex-start;
  padding:0 32px;
  opacity:0;pointer-events:none;
  transition:opacity .4s var(--ease);
}
.nav-overlay.open{opacity:1;pointer-events:all}
.nav-overlay ul{list-style:none;display:flex;flex-direction:column;gap:0;width:100%}
.nav-overlay ul li{border-bottom:1px solid var(--dim);overflow:hidden}
.nav-overlay ul li a{
  display:block;
  font-family:var(--display);
  font-size:clamp(48px,14vw,80px);
  font-weight:400;letter-spacing:.01em;
  color:var(--white);text-decoration:none;
  padding:16px 0;
  transform:translateY(40px);opacity:0;
  transition:transform .5s var(--ease),opacity .5s var(--ease),color .2s;
}
.nav-overlay.open ul li a{transform:translateY(0);opacity:1}
.nav-overlay ul li:nth-child(1) a{transition-delay:.05s}
.nav-overlay ul li:nth-child(2) a{transition-delay:.12s}
.nav-overlay ul li:nth-child(3) a{transition-delay:.19s}
.nav-overlay ul li a:hover{color:var(--gray)}
.nav-overlay-foot{
  position:absolute;bottom:40px;left:32px;right:32px;
  display:flex;justify-content:space-between;align-items:center;
  font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
  opacity:0;transition:opacity .4s .3s;
}
.nav-overlay.open .nav-overlay-foot{opacity:1}

/* ===================== HERO ===================== */
#hero{
  min-height:100vh;
  display:flex;flex-direction:column;
  justify-content:flex-end;
  padding:0 48px 60px;
  position:relative;overflow:hidden;
}

/* Magnetic headline container */
#hero-headline-wrap{
  position:relative;
  line-height:0.88;
  margin-bottom:0;
  user-select:none;
}
.hero-line{
  display:block;
  font-family:var(--display);
  font-size:clamp(80px,12.5vw,192px);
  font-weight:400;
  letter-spacing:-.01em;
  color:var(--white);
  position:relative;
  overflow:visible;
}
.hero-line.italic-serif{
  font-family:var(--serif);
  font-style:italic;
  font-weight:300;
  font-size:clamp(50px,8vw,118px);
  color:transparent;
  -webkit-text-stroke:1px rgba(242,240,234,.5);
  letter-spacing:.01em;
}
/* Each letter individually for magnetic distortion */
.mag-letter{
  display:inline-block;
  transition:transform .5s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}

/* Hero bottom bar */
.hero-bottom{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-top:52px;
  padding-top:24px;
  border-top:1px solid var(--dim);
}
.hero-desc{
  font-size:11px;font-weight:300;
  color:var(--gray);line-height:1.9;
  max-width:300px;letter-spacing:.04em;
}
.hero-meta{display:flex;gap:48px;align-items:flex-end}
.hero-stat-block{text-align:right}
.hero-stat-num{
  font-family:var(--serif);
  font-size:52px;font-weight:300;line-height:1;
  color:var(--white);
}
.hero-stat-lbl{
  font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gray);margin-top:4px;
}
.btn-cta{
  display:inline-flex;align-items:center;gap:10px;
  font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--black);background:var(--white);
  padding:14px 28px;text-decoration:none;
  transition:background .25s,color .25s,gap .25s;
  white-space:nowrap;
}
.btn-cta:hover{background:var(--gray);gap:16px}

/* Scroll line */
.scroll-tag{
  position:absolute;bottom:64px;right:48px;
  display:flex;align-items:center;gap:10px;
  font-size:8px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);
  transform:rotate(90deg);transform-origin:right center;
}
.scroll-tag::before{
  content:'';width:28px;height:1px;background:var(--dim);
}

/* Hero background grid */
.hero-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(242,240,234,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(242,240,234,.03) 1px,transparent 1px);
  background-size:80px 80px;
  pointer-events:none;
}

/* ===================== TICKER ===================== */
.ticker-wrap{
  overflow:hidden;
  border-top:1px solid var(--dim);
  border-bottom:1px solid var(--dim);
  padding:14px 0;
  background:var(--black);
}
.ticker-track{
  display:flex;
  animation:ticker 28s linear infinite;
  white-space:nowrap;
}
.ticker-item{
  font-family:var(--serif);
  font-style:italic;
  font-size:16px;font-weight:300;
  color:var(--dim);
  padding:0 48px;
  border-right:1px solid var(--dim);
  letter-spacing:.04em;flex-shrink:0;
}
.ticker-item b{font-style:normal;font-weight:400;color:rgba(242,240,234,.4)}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ===================== WORKS ===================== */
#works{
  padding:120px 48px;
  background:var(--black);
}
.section-eyebrow{
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);margin-bottom:12px;
}
.section-title{
  font-family:var(--serif);
  font-size:clamp(42px,5.5vw,76px);
  font-weight:300;line-height:1.05;letter-spacing:-.01em;
}
.section-title em{font-style:italic}
.works-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:72px;
}

/* Project cards — large hover reveal */
.project-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2px;
  background:var(--dim);
}
.project-card{
  position:relative;
  background:var(--black);
  padding:48px;
  overflow:hidden;
  cursor:none;
  min-height:300px;
  display:flex;flex-direction:column;justify-content:flex-end;
  transition:background .4s var(--ease);
}
/* Expanding white fill on hover */
.project-card::before{
  content:'';
  position:absolute;
  bottom:0;left:0;right:0;height:0;
  background:var(--white);
  transition:height .55s cubic-bezier(.77,0,.18,1);
  z-index:0;
}
.project-card:hover::before{height:100%}
.project-card:hover .pc-num,
.project-card:hover .pc-type,
.project-card:hover .pc-arrow{color:var(--dim) !important}
.project-card:hover .pc-title{color:var(--black) !important}
.project-card:hover .pc-line{background:rgba(0,0,0,.12)}
.pc-content{position:relative;z-index:1}
.pc-top{
  display:flex;justify-content:space-between;align-items:flex-start;
  margin-bottom:auto;
  position:absolute;top:48px;left:48px;right:48px;
}
.pc-num{
  font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);transition:color .4s;
}
.pc-arrow{
  font-size:20px;color:var(--dim);
  transition:color .4s,transform .4s;
}
.project-card:hover .pc-arrow{transform:translate(4px,-4px)}
.pc-line{
  width:100%;height:1px;background:var(--dim);
  margin-bottom:20px;transition:background .4s;
}
.pc-type{
  font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);margin-bottom:12px;transition:color .4s;
}
.pc-title{
  font-family:var(--serif);
  font-size:clamp(26px,3vw,40px);
  font-weight:400;letter-spacing:-.01em;
  line-height:1.1;color:var(--white);
  transition:color .4s;
}
.pc-year{
  font-size:9px;letter-spacing:.1em;color:var(--dim);
  margin-top:14px;transition:color .4s;
}
.project-card:hover .pc-year{color:var(--dim)}

/* Wide card */
.project-card.wide{grid-column:span 2}

/* ===================== ABOUT ===================== */
#about{
  background:var(--white);
  color:var(--black);
  padding:120px 48px;
  display:grid;
  grid-template-columns:5fr 7fr;
  gap:80px;align-items:start;
}
#about .section-eyebrow{color:rgba(0,0,0,.3)}
.about-left{}
.about-headline{
  font-family:var(--serif);
  font-size:clamp(42px,5vw,72px);
  font-weight:300;line-height:1.05;letter-spacing:-.01em;
  color:var(--black);
}
.about-headline em{font-style:italic}
.about-right{}
.about-body{
  font-size:12px;font-weight:300;
  color:rgba(0,0,0,.55);
  line-height:2;margin-bottom:40px;letter-spacing:.03em;
}
.skill-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:32px}
.chip{
  font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid rgba(0,0,0,.15);color:rgba(0,0,0,.4);
  padding:8px 18px;
  transition:border-color .2s,color .2s,background .2s;
}
.chip:hover{border-color:var(--black);color:var(--black)}
.years-block{
  margin-top:52px;padding-top:32px;
  border-top:1px solid rgba(0,0,0,.1);
  display:grid;grid-template-columns:1fr 1fr;gap:24px;
}
.yb-num{
  font-family:var(--display);font-size:64px;color:var(--black);
  line-height:1;
}
.yb-lbl{
  font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(0,0,0,.35);margin-top:6px;
}

/* ===================== EXPERTISE ===================== */
#expertise{
  background:var(--black);
  padding:120px 48px;
}
.exp-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  margin-top:72px;
  border:1px solid var(--dim);
}
.exp-card{
  padding:40px 32px;
  border-right:1px solid var(--dim);
  position:relative;overflow:hidden;
  transition:background .35s;
}
.exp-card:last-child{border-right:none}
/* Vertical fill on hover */
.exp-card::after{
  content:'';
  position:absolute;
  top:-100%;left:0;right:0;bottom:0;
  background:var(--white);
  transition:top .5s cubic-bezier(.77,0,.18,1);
  z-index:0;
}
.exp-card:hover::after{top:0}
.exp-card:hover .ec-num,
.exp-card:hover .ec-desc{color:rgba(0,0,0,.45) !important}
.exp-card:hover .ec-title{color:var(--black) !important}
.exp-inner{position:relative;z-index:1}
.ec-num{
  font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim);margin-bottom:40px;display:block;
  transition:color .35s;
}
.ec-title{
  font-family:var(--serif);
  font-size:22px;font-weight:400;letter-spacing:-.01em;
  margin-bottom:16px;transition:color .35s;
}
.ec-line{
  width:24px;height:1px;background:var(--dim);margin-bottom:18px;
  transition:background .35s;
}
.exp-card:hover .ec-line{background:rgba(0,0,0,.15)}
.ec-desc{
  font-size:11px;font-weight:300;
  color:var(--dim);line-height:1.9;
  transition:color .35s;
}

/* ===================== PROCESS ===================== */
#process{
  background:var(--white);
  color:var(--black);
  padding:120px 48px;
}
#process .section-eyebrow{color:rgba(0,0,0,.3)}
.process-track{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  margin-top:72px;
  border:1px solid rgba(0,0,0,.12);
}
.ps{
  padding:36px 28px;
  border-right:1px solid rgba(0,0,0,.12);
  transition:background .3s;
  position:relative;overflow:hidden;
}
.ps:last-child{border-right:none}
.ps::before{
  content:'';
  position:absolute;inset:0;
  background:var(--black);
  transform:translateY(100%);
  transition:transform .45s cubic-bezier(.77,0,.18,1);
  z-index:0;
}
.ps:hover::before{transform:translateY(0)}
.ps:hover .ps-num,.ps:hover .ps-title{color:var(--white) !important}
.ps-inner{position:relative;z-index:1}
.ps-num{
  font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(0,0,0,.3);margin-bottom:48px;display:block;
  transition:color .3s;
}
.ps-title{
  font-family:var(--serif);
  font-size:17px;font-weight:400;
  color:var(--black);line-height:1.2;
  transition:color .3s;
}

/* ===================== MARQUEE DIVIDER ===================== */
.marquee-div{
  overflow:hidden;
  border-top:1px solid var(--dim);border-bottom:1px solid var(--dim);
  padding:20px 0;background:var(--black);
}
.marquee-track{
  display:flex;
  animation:ticker 20s linear infinite;
  white-space:nowrap;
}
.marquee-item{
  font-family:var(--display);
  font-size:56px;font-weight:400;
  color:transparent;
  -webkit-text-stroke:1px var(--dim);
  padding:0 48px;
  flex-shrink:0;letter-spacing:.04em;
  transition:color .3s,-webkit-text-stroke .3s;
}
.marquee-item:hover{
  color:var(--white);
  -webkit-text-stroke:1px var(--white);
}

/* ===================== CONTACT ===================== */
#contact{
  background:var(--black);
  padding:120px 48px 80px;
  position:relative;overflow:hidden;
}
.contact-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;align-items:end;
}
.contact-headline{
  font-family:var(--display);
  font-size:clamp(72px,11vw,168px);
  font-weight:400;
  line-height:.88;
  letter-spacing:-.01em;
  color:var(--white);
}
.contact-sub{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(32px,3.5vw,48px);
  font-weight:300;
  color:transparent;
  -webkit-text-stroke:1px rgba(242,240,234,.3);
  margin-top:12px;
}
.contact-right{}
.contact-desc{
  font-size:11px;font-weight:300;
  color:var(--gray);line-height:2;
  margin-bottom:48px;letter-spacing:.03em;
}
.contact-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:20px 0;
  border-bottom:1px solid var(--dim);
  text-decoration:none;
  transition:padding-left .3s;
}
.contact-row:hover{padding-left:8px}
.contact-row-label{
  font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gray);transition:color .2s;
}
.contact-row:hover .contact-row-label{color:var(--white)}
.contact-row-val{
  font-family:var(--serif);font-size:18px;font-weight:400;
  color:rgba(242,240,234,.4);transition:color .2s;
}
.contact-row:hover .contact-row-val{color:var(--white)}

/* Location blob */
.contact-loc{
  margin-top:48px;
  display:flex;align-items:center;gap:10px;
  font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);
}
.loc-dot{width:6px;height:6px;background:#4eff91;border-radius:50%;animation:pulse 2s ease-in-out infinite}

/* Footer */
footer{
  background:var(--black);
  border-top:1px solid var(--dim);
  padding:24px 48px;
  display:flex;justify-content:space-between;align-items:center;
}
footer p,footer a{
  font-size:9px;letter-spacing:.1em;
  color:var(--dim);text-decoration:none;
}

/* ===================== REVEAL ===================== */
.reveal{
  opacity:0;transform:translateY(28px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
}
.reveal.vis{opacity:1;transform:translateY(0)}

/* ===================== SCRAMBLE ===================== */
.scramble{display:inline-block}

/* ===================== TABLET (≤1024px) ===================== */
@media(max-width:1024px){
  .exp-grid{grid-template-columns:1fr 1fr}
  .exp-card:nth-child(2){border-right:none}
  .exp-card:nth-child(3){border-right:1px solid var(--dim);border-top:1px solid var(--dim)}
  .exp-card:nth-child(4){border-right:none;border-top:1px solid var(--dim)}
  .process-track{grid-template-columns:repeat(3,1fr)}
  .ps:nth-child(3){border-right:none}
  .ps:nth-child(4){border-right:1px solid rgba(0,0,0,.12);border-top:1px solid rgba(0,0,0,.12)}
  .ps:nth-child(5){border-top:1px solid rgba(0,0,0,.12)}
  .ps:nth-child(6){border-right:none;border-top:1px solid rgba(0,0,0,.12)}
}

/* ===================== MOBILE (≤768px) ===================== */
@media(max-width:768px){
  body{cursor:auto}
  #cur,#cur-r{display:none}
  #spine{display:none}

  /* --- NAV --- */
  nav{
    padding:20px 24px;
    mix-blend-mode:normal;
    background:rgba(8,8,8,.85);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid var(--dim);
  }
  .nav-links{display:none}
  .nav-burger{display:flex}

  /* --- HERO --- */
  #hero{
    padding:0 24px 52px;
    min-height:100svh;
  }
  .avail{
    top:auto;bottom:auto;left:24px;
    position:relative;
    transform:none;
    margin-bottom:24px;
  }
  #hero-headline-wrap{margin-bottom:0}
  .hero-line{
    font-size:clamp(64px,18vw,120px);
    line-height:.9;
  }
  .hero-line.italic-serif{
    font-size:clamp(36px,11vw,72px);
  }
  .hero-bottom{
    flex-direction:column;
    gap:24px;
    align-items:flex-start;
    margin-top:32px;
    padding-top:20px;
  }
  .hero-desc{font-size:12px;max-width:100%}
  .hero-meta{
    flex-direction:row;
    flex-wrap:wrap;
    gap:20px 32px;
    align-items:flex-end;
    width:100%;
  }
  .hero-stat-block{text-align:left}
  .hero-stat-num{font-size:40px}
  .btn-cta{margin-left:auto}
  .scroll-tag{display:none}

  /* --- TICKER --- */
  .ticker-item{font-size:13px;padding:0 28px}

  /* --- WORKS --- */
  #works{padding:72px 24px}
  .works-head{
    flex-direction:column;align-items:flex-start;gap:14px;
    margin-bottom:40px;
  }
  .project-grid{
    grid-template-columns:1fr;
    background:none;
    gap:1px;
    border:1px solid var(--dim);
  }
  .project-card{
    min-height:220px;
    padding:28px 24px;
    border-bottom:1px solid var(--dim);
  }
  .project-card:last-child{border-bottom:none}
  .pc-top{top:28px;left:24px;right:24px}
  .pc-title{font-size:clamp(22px,6vw,32px)}
  .project-card.wide{grid-column:span 1}

  /* --- MARQUEE --- */
  .marquee-item{font-size:36px;padding:0 28px}

  /* --- ABOUT --- */
  #about{
    grid-template-columns:1fr;
    gap:0;
    padding:72px 24px;
  }
  .about-left{margin-bottom:40px}
  .about-headline{font-size:clamp(36px,10vw,60px)}
  .years-block{margin-top:36px;padding-top:24px;gap:16px}
  .yb-num{font-size:52px}
  .about-body{font-size:12px}

  /* --- EXPERTISE --- */
  #expertise{padding:72px 24px}
  .exp-grid{
    grid-template-columns:1fr;
    border:1px solid var(--dim);
  }
  .exp-card{
    border-right:none !important;
    border-bottom:1px solid var(--dim);
  }
  .exp-card:last-child{border-bottom:none}
  .ec-num{margin-bottom:24px}

  /* --- PROCESS --- */
  #process{padding:72px 24px}
  .process-track{
    grid-template-columns:1fr 1fr;
    border:1px solid rgba(0,0,0,.12);
  }
  .ps{
    border-right:1px solid rgba(0,0,0,.12);
    border-bottom:1px solid rgba(0,0,0,.12);
  }
  .ps:nth-child(2n){border-right:none}
  .ps:nth-child(5),.ps:nth-child(6){border-bottom:none}
  .ps-num{margin-bottom:28px}

  /* --- CONTACT --- */
  #contact{padding:72px 24px 56px}
  .contact-inner{
    grid-template-columns:1fr;
    gap:40px;
    align-items:flex-start;
  }
  .contact-headline{font-size:clamp(60px,18vw,100px)}
  .contact-sub{font-size:clamp(22px,6vw,36px)}
  .contact-row-val{font-size:14px}
  .contact-desc{font-size:11px;margin-bottom:32px}

  /* --- FOOTER --- */
  footer{
    flex-direction:column;gap:8px;
    text-align:center;padding:20px 24px;
  }
}