*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#050505}
:root{
  --black:#050505;
  --black-2:#0c0c0c;
  --graphite:#161616;
  --white:#f6f5f1;
  --warm:#d8d4cb;
  --muted:#9e9d98;
  --line:rgba(255,255,255,.16);
  --accent:#c8ff00;
}
body{
  margin:0;
  background:var(--black);
  color:var(--white);
  font-family:Inter,Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%}

.site-header{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;gap:30px;
  padding:20px 3.2vw;
  color:#fff;
  background:linear-gradient(to bottom,rgba(0,0,0,.66),rgba(0,0,0,0));
  border:0;
}
.brand{
  display:grid;place-items:center;
  width:46px;height:30px;
  background:transparent;
  color:#fff;
  border:1px solid rgba(255,255,255,.55);
  border-radius:0;
  font-size:12px;
  letter-spacing:.18em;
  font-weight:600;
}
.site-header nav{
  display:flex;justify-content:center;gap:34px;
  font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
}
.site-header nav a{opacity:.82}
.site-header nav a:hover{opacity:1}
.pill{
  padding:11px 17px;
  border:1px solid rgba(255,255,255,.7);
  border-radius:0;
  background:transparent;
  color:#fff;
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
}

.hero{
  position:relative;
  min-height:96vh;
  padding:18vh 5vw 8vh;
  display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;
  color:#fff;
  background:
    linear-gradient(90deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.55) 44%,rgba(0,0,0,.15) 100%),
    radial-gradient(circle at 72% 26%,#30343a 0%,#121417 27%,#070707 64%,#030303 100%);
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.22;
  pointer-events:none;
  background:
    linear-gradient(120deg,transparent 0 52%,rgba(255,255,255,.07) 52.2%,transparent 52.6%),
    linear-gradient(120deg,transparent 0 66%,rgba(255,255,255,.035) 66.1%,transparent 66.35%);
}
.hero>*{position:relative;z-index:1}
.hero-kicker,.eyebrow{
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#c5c5c0;
  font-weight:700;
}
.hero h1{
  max-width:1000px;
  margin:18px 0 22px;
  font-size:clamp(60px,8.4vw,138px);
  line-height:.79;
  letter-spacing:-.065em;
  text-transform:uppercase;
  font-weight:700;
}
.hero-copy{
  max-width:620px;
  margin:0;
  font-size:clamp(16px,1.5vw,21px);
  line-height:1.58;
  color:#c0c0bc;
}
.hero-actions{
  display:flex;gap:12px;flex-wrap:wrap;
  margin-top:32px;
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;
  padding:0 20px;
  border-radius:0;
  font-size:10px;
  letter-spacing:.15em;
  text-transform:uppercase;
  font-weight:700;
  transition:.25s ease;
}
.btn.primary{
  background:var(--white);
  color:#080808;
  border:1px solid var(--white);
}
.btn.primary:hover{background:transparent;color:#fff}
.btn.ghost{
  border:1px solid rgba(255,255,255,.48);
  color:#fff;background:transparent;
}
.btn.ghost:hover{border-color:#fff}
.hero-meta{
  margin-top:54px;
  padding-top:18px;
  border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:26px;
  font-size:9px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#8f8f8b;
}

.intro-strip{
  min-height:68vh;
  padding:12vh 6vw;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:10vw;
  background:#eeeae1;
  color:#111;
}
.intro-strip .eyebrow{color:#5b5a56}
.intro-strip h2,.section-title h2,.about h2{
  margin:14px 0 0;
  font-size:clamp(48px,6vw,94px);
  line-height:.93;
  letter-spacing:-.055em;
  text-transform:uppercase;
  font-weight:650;
}
.intro-strip p,.about-copy p{
  font-size:17px;
  line-height:1.8;
  color:#5f5e59;
}

.project{
  min-height:90vh;
  padding:10vh 5vw 12vh;
  position:relative;
}
.project.dark{
  background:#060606;
  color:#f6f5f1;
}
.project.light{
  background:#e9e7e1;
  color:#111;
}
.section-head{
  display:flex;justify-content:space-between;align-items:center;
  padding-bottom:15px;
  margin-bottom:50px;
  border-bottom:1px solid currentColor;
  opacity:.9;
}
.index{
  margin-right:18px;
  font-size:10px;
  letter-spacing:.18em;
  opacity:.5;
}
.tag{
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  font-size:9px;
  letter-spacing:.17em;
  text-transform:uppercase;
  opacity:.68;
}
.project-grid{
  display:grid;
  grid-template-columns:minmax(300px,.8fr) minmax(0,1.65fr);
  gap:6vw;
  align-items:start;
}
.project-grid.reverse{
  grid-template-columns:minmax(0,1.65fr) minmax(300px,.8fr);
}
.project-copy{position:sticky;top:100px;min-width:0;overflow:hidden;padding-right:10px}
.project-copy h2{
  margin:0 0 28px;
  max-width:630px;
  font-size:clamp(44px,4.8vw,78px);
  line-height:.93;
  letter-spacing:-.055em;
  text-transform:uppercase;
  font-weight:650;
}
.project-copy p{
  max-width:560px;
  font-size:15px;
  line-height:1.75;
  color:#9e9d98;
}
.project.light .project-copy p{color:#5f5e59}
.project-copy h3{
  margin-top:32px;
  font-size:9px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#777671;
}
.two-col{
  display:grid;grid-template-columns:1fr 1fr;
  gap:16px;margin-top:32px;
}
.two-col>div{
  padding:18px 0;
  border-top:1px solid rgba(127,127,127,.38);
  background:transparent;
  border-radius:0;
}
.two-col p{font-size:13px}
.chips,.feature-list{
  display:flex;flex-wrap:wrap;gap:8px 18px;
  margin-top:30px;
}
.chips span,.feature-list span{
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  font-size:9px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:#83827e;
}

.gallery{display:grid;gap:18px}
.gallery img{
  width:100%;
  display:block;
  border-radius:0;
  background:#111;
  border:0;
  box-shadow:none;
}
.palatra-gallery{grid-template-columns:1fr 1fr}
.palatra-gallery .wide{grid-column:1/-1}
.attendance-gallery{grid-template-columns:1fr 1fr}
.attendance-gallery img:first-child{grid-column:1/-1}
.acrelyx-gallery{grid-template-columns:repeat(3,1fr)}
.flow{
  margin:32px 0;
  display:grid;gap:0;
  border-top:1px solid rgba(127,127,127,.36)
}
.flow div{
  padding:16px 0;
  display:grid;gap:5px;
  border-radius:0;
  background:transparent;
  border-bottom:1px solid rgba(127,127,127,.36)
}
.flow b{
  font-size:10px;
  letter-spacing:.15em;
  text-transform:uppercase
}
.flow span{font-size:13px;color:#777671}
.notice{
  margin-top:32px;
  padding:18px 0;
  border:0;
  border-top:1px solid rgba(127,127,127,.36);
  border-radius:0;
  background:transparent;
  font-size:12px;
  line-height:1.7;
  color:#777671;
}

.selected-work{
  padding:12vh 6vw;
  background:#101010;
  color:#fff;
}
.section-title{max-width:1080px}
.section-title .eyebrow{color:#888}
.cards{
  margin-top:60px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid rgba(255,255,255,.22)
}
.cards article{
  min-height:380px;
  padding:30px 30px 34px 0;
  border:0;
  border-right:1px solid rgba(255,255,255,.14);
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.cards article+article{padding-left:30px}
.cards article:last-child{border-right:0}
.card-num{
  font-size:10px;
  letter-spacing:.18em;
  color:#70706c;
}
.cards h3{
  margin:80px 0 18px;
  font-size:clamp(29px,3vw,48px);
  line-height:1;
  letter-spacing:-.045em;
  text-transform:uppercase;
  font-weight:600;
}
.cards p{
  font-size:14px;
  line-height:1.7;
  color:#9a9a96;
}
.cards strong,.cards a{
  display:block;
  margin-top:24px;
  font-size:10px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:#fff;
}
.cards a::after{content:"  ↗"}

.about{
  min-height:75vh;
  padding:12vh 6vw;
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:8vw;
  align-items:center;
  background:#e9e7e1;
  color:#111;
}
.about .eyebrow{color:#666}
.about-copy p{color:#5b5a56}
.contact-row{
  display:flex;flex-wrap:wrap;
  gap:14px 24px;margin-top:36px;
}
.contact-row a{
  padding-bottom:4px;
  border-bottom:1px solid #111;
  font-size:10px;
  letter-spacing:.15em;
  text-transform:uppercase;
}
footer{
  padding:25px 6vw;
  display:flex;justify-content:space-between;
  background:#050505;color:#767672;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:9px;
  letter-spacing:.15em;
  text-transform:uppercase;
}

/* Guided click-to-expand */
.gallery img{cursor:zoom-in}
.expandable-figure{margin:0;min-width:0}
.expandable-trigger{
  appearance:none;border:0;padding:0;margin:0;
  width:100%;display:block;background:transparent;
  cursor:zoom-in;color:inherit;text-align:left;
}
.expandable-trigger:focus-visible{
  outline:1px solid #fff;
  outline-offset:5px;
}
.expand-hint{
  margin:10px 0 2px;
  display:flex;align-items:center;gap:8px;
  font-size:8px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#777671;
}
.expand-hint::before{content:"＋";font-size:11px}

.lightbox{
  width:min(96vw,1700px);
  max-width:none;
  max-height:94vh;
  padding:16px;
  border:0;border-radius:0;
  background:#050505;color:#fff;
  overflow:auto;
}
.lightbox::backdrop{
  background:rgba(0,0,0,.92);
  backdrop-filter:blur(8px)
}
.lightbox-image{
  display:block;width:100%;height:auto;
  max-height:84vh;object-fit:contain;
  border-radius:0;background:#050505
}
.lightbox-close{
  position:sticky;top:0;
  margin-left:auto;margin-bottom:10px;
  display:grid;place-items:center;
  width:44px;height:44px;
  border:1px solid rgba(255,255,255,.5);
  border-radius:0;
  background:#050505;color:#fff;
  font-size:24px;cursor:pointer;z-index:2;
}
.lightbox-caption{
  margin:12px 0 2px;
  color:#8f8f8b;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

@media (max-width:900px){
  .site-header nav{display:none}
  .site-header{grid-template-columns:auto 1fr auto}
  .hero{min-height:88vh;padding:18vh 6vw 7vh}
  .hero h1{font-size:64px}
  .intro-strip,.project-grid,.project-grid.reverse,.about{grid-template-columns:1fr}
  .project-copy{position:static}
  .project{padding:8vh 6vw}
  .gallery{margin-top:25px}
  .palatra-gallery,.attendance-gallery,.acrelyx-gallery{grid-template-columns:1fr}
  .palatra-gallery .wide,.attendance-gallery img:first-child{grid-column:auto}
  .two-col{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .cards article,.cards article+article{
    min-height:auto;
    padding:34px 0;
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.16)
  }
  .cards h3{margin-top:35px}
}
@media (max-width:700px){
  .lightbox{width:98vw;padding:8px}
  .lightbox-image{max-height:80vh}
}


.hero-copy{
  display:flex;
  flex-direction:column;
  gap:12px;
  max-width:900px;
}
.hero-name{
  display:block;
  font-size:clamp(42px,5vw,72px);
  line-height:.96;
  letter-spacing:-.045em;
  font-weight:650;
  color:#fff;
}
.hero-desc{
  display:block;
  max-width:760px;
  font-size:clamp(21px,2vw,30px);
  line-height:1.5;
  color:#c0c0bc;
}


.project-copy h2{
  max-width:100%;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
}
.project-grid,
.project-grid.reverse{
  overflow:hidden;
}
.gallery{
  min-width:0;
}


/* === Precision typography + layout refinement === */

/* Softer hierarchy overall */
body{
  font-weight:400;
  line-height:1.5;
}

.hero h1{
  font-size:clamp(54px,7.2vw,116px);
  line-height:.88;
  font-weight:600;
  letter-spacing:-.05em;
}

.hero-name{
  font-size:clamp(42px,4.6vw,68px);
  line-height:1;
  font-weight:560;
  letter-spacing:-.035em;
}

.hero-desc{
  max-width:760px;
  font-size:clamp(19px,1.65vw,25px);
  line-height:1.55;
  color:#c7c7c2;
}

.intro-strip h2,
.section-title h2,
.about h2{
  font-size:clamp(38px,4.2vw,66px);
  line-height:1.02;
  letter-spacing:-.04em;
  text-transform:none;
  font-weight:540;
}

/* Projects: no oversized shouty headlines */
.project{
  padding:9vh 5vw 10vh;
}

.project-grid,
.project-grid.reverse{
  grid-template-columns:minmax(0, .95fr) minmax(0, 1.35fr);
  gap:4.5vw;
  overflow:visible;
}

.project-grid.reverse{
  grid-template-columns:minmax(0, 1.35fr) minmax(0, .95fr);
}

.project-copy{
  position:sticky;
  top:105px;
  min-width:0;
  overflow:visible;
  padding-right:0;
}

.project-copy h2{
  max-width:100%;
  margin:0 0 24px;
  font-size:clamp(34px,3.6vw,56px);
  line-height:1.02;
  letter-spacing:-.035em;
  text-transform:none;
  font-weight:540;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
}

.project-copy p{
  max-width:600px;
  margin:0 0 16px;
  font-size:clamp(16px,1.15vw,18px);
  line-height:1.72;
  color:#aaa9a4;
}

.project.light .project-copy p{
  color:#5e5d59;
}

.project-copy h3{
  margin:30px 0 10px;
  font-size:10px;
  line-height:1.3;
  letter-spacing:.17em;
  font-weight:650;
}

.two-col{
  grid-template-columns:1fr;
  gap:0;
  margin-top:28px;
}

.two-col>div{
  padding:18px 0;
}

.two-col p{
  font-size:15px;
  line-height:1.65;
}

.chips,
.feature-list{
  gap:10px 16px;
  margin-top:26px;
}

.chips span,
.feature-list span{
  font-size:10px;
  line-height:1.3;
  letter-spacing:.10em;
  color:#8b8a85;
}

.flow span{
  font-size:14px;
  line-height:1.55;
}

.notice{
  font-size:14px;
  line-height:1.65;
}

/* Project labels should guide, not compete */
.section-head{
  margin-bottom:42px;
}

.section-head .eyebrow,
.section-head .tag,
.index{
  font-size:9px;
  letter-spacing:.17em;
}

/* Media gets room to breathe */
.gallery{
  gap:20px;
  min-width:0;
}

.expand-hint{
  margin-top:11px;
  font-size:9px;
  letter-spacing:.16em;
  color:#85847f;
}

/* Selected work: calm cards, readable copy */
.section-title{
  max-width:900px;
}

.cards{
  margin-top:50px;
}

.cards article{
  min-height:330px;
  padding-top:28px;
}

.cards h3{
  margin:58px 0 16px;
  font-size:clamp(25px,2.3vw,37px);
  line-height:1.05;
  letter-spacing:-.03em;
  text-transform:none;
  font-weight:540;
}

.cards p{
  font-size:15px;
  line-height:1.7;
  color:#aaa9a4;
}

.cards strong,
.cards a{
  font-size:10px;
  line-height:1.5;
  letter-spacing:.11em;
  font-weight:650;
}

/* About section: editorial rather than promotional */
.about h2{
  max-width:800px;
  font-size:clamp(40px,4.5vw,70px);
}

.about-copy p{
  font-size:17px;
  line-height:1.75;
}

/* Avoid project copy touching imagery at laptop widths */
@media (min-width:901px) and (max-width:1500px){
  .project-grid,
  .project-grid.reverse{
    grid-template-columns:minmax(0,.8fr) minmax(0,1.35fr);
    gap:4vw;
  }

  .project-grid.reverse{
    grid-template-columns:minmax(0,1.35fr) minmax(0,.8fr);
  }

  .project-copy h2{
    font-size:clamp(32px,3.2vw,49px);
  }

  .project-copy p{
    font-size:16px;
  }
}

@media (max-width:1100px){
  .project-grid,
  .project-grid.reverse{
    grid-template-columns:1fr;
  }

  .project-copy{
    position:static;
    max-width:760px;
    margin-bottom:30px;
  }

  .project-grid.reverse .project-copy{
    order:-1;
  }

  .project-copy h2{
    font-size:clamp(34px,6vw,54px);
  }

  .gallery{
    margin-top:0;
  }
}

@media (max-width:700px){
  .hero h1{
    font-size:clamp(52px,17vw,76px);
  }

  .hero-name{
    font-size:38px;
  }

  .hero-desc{
    font-size:18px;
  }

  .project-copy h2{
    font-size:36px;
  }

  .project-copy p{
    font-size:16px;
  }
}


/* === Project header scale boost === */
.project-copy h2{
  font-size:clamp(48px,5vw,82px);
  line-height:.98;
  letter-spacing:-.04em;
  font-weight:540;
}

@media (min-width:901px) and (max-width:1500px){
  .project-copy h2{
    font-size:clamp(44px,4.4vw,68px);
  }
}

@media (max-width:1100px){
  .project-copy h2{
    font-size:clamp(42px,7vw,62px);
  }
}

@media (max-width:700px){
  .project-copy h2{
    font-size:42px;
  }
}


/* === Project section label emphasis === */
.section-head{
  align-items:flex-end;
  gap:20px;
  padding-bottom:18px;
  margin-bottom:46px;
}

.section-head > div{
  display:flex;
  align-items:baseline;
  gap:14px;
  min-width:0;
}

.section-head .eyebrow{
  font-size:clamp(18px,1.7vw,28px);
  line-height:1.1;
  letter-spacing:.035em;
  text-transform:none;
  font-weight:560;
  color:inherit;
  opacity:1;
  white-space:normal;
}

.section-head .index{
  font-size:12px;
  line-height:1;
  letter-spacing:.12em;
  opacity:.5;
  flex:0 0 auto;
}

.section-head .tag{
  font-size:11px;
  line-height:1.2;
  letter-spacing:.1em;
  text-transform:uppercase;
  opacity:.7;
  flex:0 0 auto;
}

@media (max-width:900px){
  .section-head{
    align-items:flex-start;
    flex-direction:column;
  }

  .section-head .eyebrow{
    font-size:24px;
  }

  .section-head .tag{
    margin-left:26px;
  }
}

/* Mobile hero overflow fix */
@media (max-width: 700px) {
  .hero {
    padding-left: 6vw;
    padding-right: 6vw;
    overflow: hidden;
  }

  .hero h1 {
    max-width: 100%;
    font-size: clamp(46px, 13.5vw, 60px);
    line-height: 0.9;
    letter-spacing: -0.04em;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  .hero-copy {
    max-width: 100%;
  }

  .hero-name {
    font-size: clamp(36px, 10vw, 44px);
  }

  .hero-desc {
    max-width: 100%;
    font-size: 18px;
    line-height: 1.55;
  }
}