:root {
  --bg: #121313;
  --surface: #181919;
  --fg: #f5f5f1;
  --muted: #aaa9a4;
  --muted-2: #777772;
  --line: rgba(245,245,241,.24);
  --line-soft: rgba(245,245,241,.12);
  --page: clamp(22px, 4.2vw, 72px);
  --max: 1680px;
  --section: clamp(76px, 8.5vw, 150px);
  --ease: cubic-bezier(.22,.8,.2,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  background:
    radial-gradient(circle at 84% 5%, rgba(255,255,255,.025), transparent 24rem),
    var(--bg);
  color: var(--fg);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; }

.site-shell {
  width: min(100%, var(--max));
  margin: 0 auto;
  padding-inline: var(--page);
}

.site-header {
  height: 86px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  z-index: 30;
}
.nav { display: flex; gap: clamp(24px, 3vw, 48px); align-items: center; justify-content: flex-start; }
.nav a {
  font-size: 13px;
  color: #dddcd7;
  position: relative;
  padding-block: 8px;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 2px;
  height: 1px; background: var(--fg);
  transition: right .28s var(--ease);
}
.nav a:hover::after { right: 0; }
.nav-toggle { display: none; background: none; color: var(--fg); border: 0; padding: 8px; }

.hero {
  min-height: clamp(620px, 72vh, 860px);
  display: grid;
  grid-template-columns: minmax(0, .98fr) minmax(420px, 1.02fr);
  align-items: center;
  position: relative;
  padding-bottom: clamp(42px, 5vw, 82px);
}
.hero__content { position: relative; z-index: 2; padding-bottom: 6%; }
.eyebrow {
  font-size: 11px;
  letter-spacing: .30em;
  text-transform: uppercase;
  color: #d0d0cb;
  margin: 0 0 24px;
}
.hero h1 {
  margin: 0;
  font-size: clamp(64px, 7vw, 124px);
  line-height: .87;
  letter-spacing: -.058em;
  font-weight: 760;
  max-width: 9ch;
}
.hero__intro {
  margin: 26px 0 0;
  max-width: 545px;
  color: #cfcec9;
  font-size: clamp(19px, 1.65vw, 27px);
  line-height: 1.28;
  letter-spacing: -.018em;
}
.hero__microline {
  width: 42px;
  height: 1px;
  background: var(--line);
  margin-top: 34px;
}
/* Hero visual is a full atmospheric layer, not a cropped card/box. */
.hero-visual {
  position: absolute;
  z-index: 0;
  top: -8%;
  right: -8%;
  width: min(72vw, 1180px);
  height: 118%;
  min-height: 700px;
  overflow: visible;
  pointer-events: none;
}
.hero-visual::after { content: none; }
.hero-visual__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  pointer-events: none;
}
.hero-visual__image { width: 100%; height: 100%; object-fit: cover; opacity: .92; }

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 34px;
}
.section-kicker {
  margin: 0;
  font-size: 11px;
  letter-spacing: .30em;
  text-transform: uppercase;
  font-weight: 500;
}

.work { padding-bottom: var(--section); }
.project-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(34px, 4vw, 72px) clamp(18px, 2vw, 32px);
}
.project-card { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease) var(--delay), transform .7s var(--ease) var(--delay); }
.project-card.is-visible { opacity: 1; transform: none; }
.project-card__link { display: block; }
.project-card__media {
  margin: 0;
  position: relative;
  overflow: hidden;
  background: #222;
  aspect-ratio: 1.54 / 1;
}
.project-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.001);
  transition: transform .8s var(--ease), filter .8s var(--ease);
}
.project-card__shade {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.12), transparent 38%);
  pointer-events: none;
}
.project-card__meta {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 17px;
  align-items: start;
  padding-top: 16px;
}
.project-card__number {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  padding-top: 2px;
  font-variant-numeric: tabular-nums;
}
.hairline { width: 18px; height: 1px; background: var(--line); display: inline-block; }
.project-card__copy h3 { margin: 0; font-size: clamp(18px, 1.55vw, 26px); letter-spacing: -.025em; line-height: 1.08; font-weight: 650; }
.project-card__copy p { margin: 7px 0 0; color: var(--muted); font-size: 13px; line-height: 1.35; }
.project-card__copy p span { color: var(--muted-2); padding-inline: 3px; }
.project-card__arrow { font-size: 24px; line-height: 1; transition: transform .3s var(--ease); color: #ddd; }
.project-card__link:hover .project-card__media img { transform: scale(1.025); filter: brightness(.93); }
.project-card__link:hover .project-card__arrow { transform: translateX(5px); }

.about {
  border-top: 1px solid var(--line);
  padding: clamp(44px, 5vw, 78px) 0 clamp(58px, 7vw, 105px);
}
.about__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr .56fr;
  gap: clamp(34px, 5vw, 92px);
  align-items: start;
}
.about__headline {
  margin: 13px 0 0;
  font-size: clamp(38px, 4vw, 70px);
  letter-spacing: -.048em;
  line-height: 1.02;
  font-weight: 430;
  max-width: 12ch;
}
.about__body { padding-top: 32px; }
.about__body p {
  margin: 0;
  color: #c9c8c3;
  font-size: clamp(16px, 1.25vw, 20px);
  line-height: 1.52;
  max-width: 45ch;
}
.text-links { display: flex; gap: 34px; margin-top: 30px; flex-wrap: wrap; }
.text-link { font-size: 13px; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.contact-block { border-left: 1px solid var(--line); padding-left: 30px; padding-top: 32px; min-height: 180px; }
.contact-block p { margin: 0 0 30px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.contact-block a { font-size: 28px; }

.footer {
  border-top: 1px solid var(--line-soft);
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: #aaa9a4;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.footer__links { display: flex; gap: 24px; }

[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].is-visible { opacity: 1; transform: none; }

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr 44%; min-height: 650px; }
  .hero h1 { font-size: clamp(62px, 10vw, 96px); }
  .hero-visual { right: -12%; width: 86vw; min-height: 620px; }
  .about__grid { grid-template-columns: 1fr 1fr; }
  .contact-block { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line-soft); padding: 28px 0 0; min-height: auto; }
}

@media (max-width: 720px) {
  :root { --page: 22px; --section: 82px; }
  .site-header { height: 72px; }
  .nav-toggle {
    display: block;
    position: relative;
    z-index: 60;
    padding: 0;
    margin: 0;
  }
  .nav-toggle::before { content: 'Menu'; text-transform: uppercase; font-size: 11px; letter-spacing: .16em; }
  .nav {
    position: fixed; inset: 0; z-index: 50;
    background: rgba(18,19,19,.97);
    flex-direction: column; align-items: flex-start; justify-content: center;
    padding: 30px var(--page);
    transform: translateY(-100%); transition: transform .45s var(--ease);
  }
  .nav a { font-size: 32px; letter-spacing: -.03em; }
  .nav-open .nav { transform: translateY(0); }
  .nav-open .nav-toggle::before { content: 'Close'; }
  .hero {
    min-height: auto;
    grid-template-columns: 1fr;
    padding: 78px 0 44px;
  }
  .hero__content { padding-bottom: 22px; }
  .eyebrow { margin-bottom: 20px; }
  .hero h1 {
    font-size: clamp(54px, 16vw, 86px);
    max-width: 100%;
  }
  .hero__intro { font-size: 19px; max-width: 30ch; margin-top: 22px; }
  .hero-visual {
    position: relative;
    top: auto;
    right: auto;
    width: calc(100% + (var(--page) * 2));
    height: 360px;
    min-height: 0;
    margin: -8px calc(var(--page) * -1) 0;
    overflow: visible;
  }
  .hero-visual::after { display: none; }
  .section-head { margin-bottom: 25px; }
  .project-grid { grid-template-columns: 1fr; gap: 46px; }
  .project-card__media { aspect-ratio: 1.37 / 1; }
  .project-card__meta { grid-template-columns: auto 1fr auto; gap: 12px; }
  .project-card__copy h3 { font-size: 20px; }
  .about__grid { grid-template-columns: 1fr; gap: 24px; }
  .about__headline { max-width: 14ch; }
  .about__body, .contact-block { padding-top: 8px; }
  .contact-block { grid-column: auto; margin-top: 18px; padding-top: 28px; }
  .footer { align-items: flex-start; flex-direction: column; padding-block: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* ---------- inner pages ---------- */
.inner-shell { width:min(100%,var(--max)); margin:0 auto; padding-inline:var(--page); }
.inner-header { height:86px; display:flex; align-items:center; position:relative; z-index:30; }
.inner-header .nav { display:flex; }
.page-intro { padding:clamp(80px,10vw,160px) 0 clamp(52px,7vw,110px); }
.page-intro__eyebrow { display:flex; gap:16px; align-items:center; margin:0 0 24px; font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:#c8c7c2; }
.page-intro h1 { margin:0; max-width:12ch; font-size:clamp(60px,8.6vw,150px); letter-spacing:-.06em; line-height:.88; font-weight:750; }
.page-intro__disc { margin:28px 0 0; color:var(--muted); font-size:14px; letter-spacing:.02em; }
.project-hero { margin:0 0 clamp(70px,8vw,130px); overflow:hidden; background:#1b1c1c; }
/*.project-hero img { width:100%; max-height:82vh; object-fit:cover; }*/
.project-hero img { width: 100%; height: auto; max-height: none; object-fit: contain; }
.project-story { display:grid; grid-template-columns:minmax(220px,.65fr) minmax(0,1.35fr); gap:clamp(48px,8vw,160px); padding-bottom:clamp(78px,9vw,145px); border-bottom:1px solid var(--line); }
.project-story__aside { display:grid; gap:30px; align-content:start; }
.project-story__label { margin:0 0 9px; font-size:10px; letter-spacing:.27em; text-transform:uppercase; color:var(--muted); }
.project-story__aside p { margin:0; color:#d3d2cd; font-size:14px; line-height:1.55; }
.project-story__copy .lead { margin:0 0 30px; max-width:31ch; font-size:clamp(29px,3vw,48px); line-height:1.13; letter-spacing:-.035em; font-weight:420; }
.project-story__copy .body { margin:0; max-width:64ch; color:#bdbcb7; font-size:clamp(16px,1.25vw,20px); line-height:1.62; }
.project-gallery { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(22px,2.2vw,38px); padding:clamp(70px,8vw,130px) 0; }
.gallery-item { grid-column:span 12; margin:0; opacity:0; transform:translateY(14px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.gallery-item.is-visible { opacity:1; transform:none; }
.gallery-item--half { grid-column:span 6; }
.gallery-item__image { overflow:hidden; background:#202121; }
.gallery-item img { width:100%; height:auto; transition:transform .8s var(--ease); }
.gallery-item:hover img { transform:scale(1.008); }
.gallery-item figcaption { margin-top:12px; color:var(--muted-2); font-size:11px; line-height:1.45; }
.next-project { border-top:1px solid var(--line); padding:clamp(52px,6vw,90px) 0 clamp(80px,9vw,140px); }
.next-project a { display:grid; grid-template-columns:auto 1fr auto; align-items:end; gap:24px; }
.next-project__label { font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); align-self:start; padding-top:9px; }
.next-project__title { font-size:clamp(44px,6vw,100px); line-height:.96; letter-spacing:-.055em; }
.next-project__arrow { font-size:clamp(32px,4vw,64px); }

/* About / resume / contact */
.content-page { padding:clamp(72px,9vw,138px) 0 clamp(90px,11vw,170px); }
.content-page__title { margin:0; font-size:clamp(64px,9vw,150px); line-height:.88; letter-spacing:-.06em; }
.content-page__lead { margin:28px 0 0; max-width:30ch; font-size:clamp(28px,3.5vw,54px); line-height:1.15; letter-spacing:-.035em; font-weight:420; }
.content-page__body { display:grid; grid-template-columns:.7fr 1.3fr; gap:clamp(50px,9vw,160px); padding-top:clamp(70px,8vw,125px); }
.content-page__body p { margin:0 0 24px; color:#c4c3be; font-size:clamp(16px,1.3vw,20px); line-height:1.65; max-width:60ch; }
.capability-grid { border-top:1px solid var(--line); margin-top:clamp(70px,8vw,130px); padding-top:36px; display:grid; grid-template-columns:repeat(4,1fr); gap:30px; }
.capability-grid h3 { margin:0 0 16px; font-size:13px; }
.capability-grid p { margin:0; color:var(--muted); font-size:13px; line-height:1.6; }
.client-strip { margin-top:clamp(70px,8vw,130px); border-top:1px solid var(--line); padding-top:36px; display:grid; grid-template-columns:.55fr 1.45fr; gap:40px; }
.client-strip__names { font-size:clamp(25px,3vw,46px); line-height:1.35; letter-spacing:-.03em; color:#d8d7d2; }
.resume-head { display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); gap:clamp(34px,5vw,76px); align-items:end; padding:clamp(72px,8vw,128px) 0 60px; border-bottom:1px solid var(--line); }
.resume-head h1 { margin:0; font-size:clamp(54px,7.2vw,116px); line-height:.86; letter-spacing:-.055em; white-space:nowrap; }
.resume-head p { margin:0; color:var(--muted); max-width:44ch; line-height:1.55; align-self:end; padding-bottom:.12em; }
.resume-section { display:grid; grid-template-columns:.42fr 1.58fr; gap:clamp(40px,8vw,130px); padding:54px 0; border-bottom:1px solid var(--line-soft); }
.resume-section__label { font-size:10px; text-transform:uppercase; letter-spacing:.28em; color:var(--muted); }
.resume-entry { display:grid; grid-template-columns:minmax(150px,.38fr) 1fr; gap:34px; align-items:start; padding-bottom:44px; }
.resume-entry:last-child { padding-bottom:0; }
.resume-entry__meta { color:var(--muted); font-size:12px; line-height:1.45; padding-top:2px; }
.resume-entry__body h3 { margin:0 0 6px; font-size:clamp(20px,2vw,29px); line-height:1.02; letter-spacing:-.025em; }
.resume-entry__body h4 { margin:0 0 14px; font-size:13px; font-weight:500; color:#c2c1bc; line-height:1.35; }
.resume-entry__body p { margin:0; color:var(--muted); max-width:66ch; line-height:1.6; font-size:14px; }
.skill-columns { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.skill-columns p { color:#d0cfca; line-height:1.9; margin:0; font-size:14px; }
.contact-page { min-height:calc(100vh - 176px); display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(60px,10vw,180px); align-items:start; padding:clamp(72px,9vw,138px) 0; }
.contact-page h1 { margin:0; font-size:clamp(65px,9vw,145px); letter-spacing:-.06em; line-height:.88; }
.contact-page__intro { margin-top:34px; color:#c6c5c0; font-size:clamp(19px,2vw,29px); max-width:25ch; line-height:1.35; }
.contact-form { display:grid; gap:28px; padding-top:8px; }
.form-row { display:grid; gap:9px; }
.form-row label { font-size:10px; letter-spacing:.25em; text-transform:uppercase; color:var(--muted); }
.form-row input,.form-row textarea { width:100%; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--fg); font:inherit; font-size:18px; padding:10px 0 14px; outline:none; border-radius:0; }
.form-row textarea { min-height:140px; resize:vertical; }
.form-row input:focus,.form-row textarea:focus { border-color:var(--fg); }
.form-submit { justify-self:start; border:1px solid var(--line); background:transparent; color:var(--fg); padding:13px 20px; cursor:pointer; text-transform:uppercase; letter-spacing:.18em; font-size:10px; transition:.25s ease; }
.form-submit:hover { background:var(--fg); color:var(--bg); }
.thanks { min-height:70vh; display:flex; flex-direction:column; justify-content:center; }
.thanks h1 { font-size:clamp(58px,8vw,130px); letter-spacing:-.055em; margin:0 0 24px; }
.thanks p { color:var(--muted); }

@media (max-width:720px) {
  .inner-header { height:72px; }
  .page-intro { padding:76px 0 48px; }
  .page-intro h1 { font-size:clamp(54px,16vw,86px); max-width:none; }
  .project-hero { margin-bottom:64px; }
  .project-story { grid-template-columns:1fr; gap:38px; padding-bottom:72px; }
  .project-story__copy .lead { font-size:30px; }
  .project-gallery { gap:34px; padding:64px 0 80px; }
  .gallery-item--half { grid-column:span 12; }
  .next-project a { grid-template-columns:1fr auto; }
  .next-project__label { grid-column:1/-1; }
  .content-page { padding:64px 0 100px; }
  .content-page__title { font-size:clamp(58px,17vw,88px); }
  .content-page__body { grid-template-columns:1fr; gap:35px; padding-top:60px; }
  .capability-grid { grid-template-columns:1fr 1fr; }
  .client-strip { grid-template-columns:1fr; }
  .resume-head { grid-template-columns:1fr; padding-top:64px; gap:22px; align-items:start; }
  .resume-head h1 { white-space:normal; }
  .resume-head p { padding-bottom:0; }
  .resume-section { grid-template-columns:1fr; gap:28px; }
  .resume-entry { grid-template-columns:1fr; gap:10px; }
  .skill-columns { grid-template-columns:1fr; }
  .contact-page { grid-template-columns:1fr; gap:55px; padding:64px 0 100px; }
}